diff --git a/.oxlintrc.json b/.oxlintrc.json
index 2ec28ddc..5e10cd94 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -14,6 +14,7 @@
     "browser": true
   },
   "rules": {
+    "typescript/no-explicit-any": "error",
     "typescript/explicit-function-return-type": "error",
     "typescript/explicit-module-boundary-types": "error",
     "typescript/array-type": ["error", { "default": "array-simple" }],
@@ -44,9 +45,18 @@
     "react/jsx-no-useless-fragment": "warn",
     "react/no-unescaped-entities": "error",
     "react/exhaustive-deps": "error",
-    "react/react-compiler": "warn",
-    "react-doctor/no-fetch-in-effect": "warn",
-    "react-doctor/no-derived-state": "warn",
+    "react/unsupported-syntax": "error",
+    "react/no-deriving-state-in-effects": "error",
+    "react/invariant": "error",
+    "react/rule-suppression": "error",
+    "react/syntax": "error",
+    "react/todo": "error",
+    "react/capitalized-calls": "error",
+    "react/exhaustive-effect-dependencies": "error",
+    "react/hooks": "error",
+    "react/memo-dependencies": "error",
+    "react-doctor/no-fetch-in-effect": "error",
+    "react-doctor/no-derived-state": "error",
     "react/jsx-curly-brace-presence": [
       "error",
       { "props": "never", "children": "never", "propElementValues": "always" }
diff --git a/README.md b/README.md
index 4ccbb3e2..da4aaaa8 100644
--- a/README.md
+++ b/README.md
@@ -64,8 +64,10 @@ npm run lint
 npm run lint:fix
 ```
 
-The Oxlint configuration includes React Doctor's lint-native rules. Run `npm run doctor` for the full React Doctor
-project scan; pull requests and pushes to `main` also run that scan in GitHub Actions.
+The Oxlint configuration treats React Compiler rules as errors, including the recommended correctness rules and the
+compiler checks in the suspicious, performance, and restriction categories. React Doctor's `no-fetch-in-effect` and
+`no-derived-state` rules are also errors. Run `npm run doctor` for the full React Doctor project scan; pull requests and
+pushes to `main` also run that scan in GitHub Actions.
 
 #### Development mode
 
diff --git a/STYLEGUIDE.md b/STYLEGUIDE.md
index 8600e18d..4d0320fe 100644
--- a/STYLEGUIDE.md
+++ b/STYLEGUIDE.md
@@ -37,7 +37,7 @@ touch without expanding the task into unrelated cleanup.
   for dynamic values passed across memoized boundaries. Do not add memoization blindly or omit dependencies.
 - Memoize React context values when they contain objects or functions whose identity would otherwise change each render.
 - Avoid array-index keys when a stable domain identifier exists.
-- Treat `react/react-compiler` and `react-perf` diagnostics as design feedback. Fix new warnings rather than disabling
+- Treat React Compiler and `react-perf` diagnostics as design feedback. Fix new warnings rather than disabling
   the rule or increasing the repository warning ceiling.
 
 ## Components, state, and accessibility
diff --git a/client/src/context/FetchContext.test.tsx b/client/src/context/FetchContext.test.tsx
index ed84157f..a661effb 100644
--- a/client/src/context/FetchContext.test.tsx
+++ b/client/src/context/FetchContext.test.tsx
@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, renderHook, screen, waitFor } from '@testing-library/react';
 
 import type { FetchFn } from './FetchContext';
 import { FetchProvider, useFetch } from './FetchContext';
@@ -38,15 +38,9 @@ function TestJsonConsumer({ url }: { url: string }): React.ReactElement {
 describe('FetchContext', () => {
   describe('useFetch without provider', () => {
     it('returns the default fetch wrapper from @perses-dev/client', () => {
-      let hookResult: ReturnType<typeof useFetch> | undefined;
-      function Capture(): React.ReactNode {
-        hookResult = useFetch();
-        return null;
-      }
-      render(<Capture />);
-      expect(hookResult).toBeDefined();
-      expect(typeof hookResult!.fetch).toBe('function');
-      expect(typeof hookResult!.fetchJson).toBe('function');
+      const { result } = renderHook(() => useFetch());
+      expect(typeof result.current.fetch).toBe('function');
+      expect(typeof result.current.fetchJson).toBe('function');
     });
   });
 
diff --git a/client/src/model/resource.ts b/client/src/model/resource.ts
index e5c193f6..187c897b 100644
--- a/client/src/model/resource.ts
+++ b/client/src/model/resource.ts
@@ -34,8 +34,7 @@ export interface ProjectMetadata extends Metadata {
 export interface Resource {
   kind: Kind;
   metadata: Metadata | ProjectMetadata;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  spec?: any;
+  spec?: unknown;
 }
 
 export interface ProjectResource {
diff --git a/components/src/EChart/EChart.test.tsx b/components/src/EChart/EChart.test.tsx
new file mode 100644
index 00000000..82d8cd5d
--- /dev/null
+++ b/components/src/EChart/EChart.test.tsx
@@ -0,0 +1,58 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { act, render } from '@testing-library/react';
+import { init } from 'echarts/core';
+
+import { EChart } from './EChart';
+
+const option = {};
+
+it('resizes on container changes and cancels pending work when unmounted', () => {
+  vi.useFakeTimers();
+  const resize = vi.fn();
+  const dispose = vi.fn();
+  const observe = vi.fn();
+  const disconnect = vi.fn();
+  const callbacks: ResizeObserverCallback[] = [];
+  class TestResizeObserver {
+    observe = observe;
+    disconnect = disconnect;
+    unobserve = vi.fn();
+    constructor(callback: ResizeObserverCallback) {
+      callbacks.push(callback);
+    }
+  }
+  vi.stubGlobal('ResizeObserver', TestResizeObserver);
+  vi.mocked(init).mockReturnValue({ setOption: vi.fn(), resize, dispose } as unknown as ReturnType<typeof init>);
+  try {
+    const { unmount } = render(<EChart option={option} />);
+    expect(observe).toHaveBeenCalledTimes(1);
+    act(() => vi.advanceTimersByTime(200));
+    expect(resize).toHaveBeenCalledTimes(1);
+    act(() => {
+      callbacks[0]?.([], {} as ResizeObserver);
+      vi.advanceTimersByTime(200);
+    });
+    expect(resize).toHaveBeenCalledTimes(2);
+    act(() => callbacks[0]?.([], {} as ResizeObserver));
+    unmount();
+    act(() => vi.runAllTimers());
+    expect(disconnect).toHaveBeenCalledTimes(1);
+    expect(dispose).toHaveBeenCalledTimes(1);
+    expect(resize).toHaveBeenCalledTimes(2);
+  } finally {
+    vi.unstubAllGlobals();
+    vi.useRealTimers();
+  }
+});
diff --git a/components/src/EChart/EChart.tsx b/components/src/EChart/EChart.tsx
index b00caf70..01b91992 100644
--- a/components/src/EChart/EChart.tsx
+++ b/components/src/EChart/EChart.tsx
@@ -169,7 +169,7 @@ export const EChart = memo(function EChart<T>({
   sx,
   style,
   onEvents,
-  _instance,
+  _instance: instanceRef,
   syncGroup,
   onChartInitialized,
 }: EChartsProps<T>) {
@@ -185,15 +185,15 @@ export const EChart = memo(function EChart<T>({
     if (chartElement.current === undefined) return;
     chartElement.current.setOption(initialOption.current, true);
     onChartInitialized?.(chartElement.current);
-    if (_instance !== undefined) {
-      _instance.current = chartElement.current;
+    if (instanceRef !== undefined) {
+      instanceRef.current = chartElement.current;
     }
     return (): void => {
       if (chartElement.current === null) return;
       chartElement.current.dispose();
       chartElement.current = null;
     };
-  }, [_instance, onChartInitialized, theme, renderer]);
+  }, [instanceRef, onChartInitialized, theme, renderer]);
 
   // When syncGroup is explicitly set, charts within same group share interactions such as crosshair
   useEffect(() => {
@@ -210,16 +210,21 @@ export const EChart = memo(function EChart<T>({
     prevOption.current = option;
   }, [option]);
 
-  // Resize chart, cleanup listener on unmount
+  // Observe actual container size, including layout and style changes.
   useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
     const updateSize = debounce(() => {
-      if (!chartElement.current) return;
-      chartElement.current.resize();
+      chartElement.current?.resize();
     }, 200);
+    const observer = new ResizeObserver(updateSize);
+    observer.observe(container);
     window.addEventListener('resize', updateSize);
     updateSize();
     return (): void => {
+      observer.disconnect();
       window.removeEventListener('resize', updateSize);
+      updateSize.cancel();
     };
   }, []);
 
@@ -237,26 +242,6 @@ export const EChart = memo(function EChart<T>({
     };
   }, [onEvents]);
 
-  // TODO: re-evaluate how this is triggered. It's technically working right
-  // now because the sx prop is an object that gets re-created, but that also
-  // means it runs unnecessarily some of the time and theoretically might
-  // not run in some other cases. Maybe it should use a resize observer?
-  useEffect(() => {
-    // TODO: fix this debouncing. This likely isn't working as intended because
-    // the debounced function is re-created every time this useEffect is called.
-    const updateSize = debounce(
-      () => {
-        if (!chartElement.current) return;
-        chartElement.current.resize();
-      },
-      200,
-      {
-        leading: true,
-      },
-    );
-    updateSize();
-  }, [sx, style]);
-
   return <Box ref={containerRef} sx={sx} style={style}></Box>;
 });
 
diff --git a/components/src/Legend/TableLegend.tsx b/components/src/Legend/TableLegend.tsx
index 9abc2a30..8bc7cb2d 100644
--- a/components/src/Legend/TableLegend.tsx
+++ b/components/src/Legend/TableLegend.tsx
@@ -39,7 +39,7 @@ const COLUMNS: Array<TableColumnConfig<LegendItem>> = [
     // Starting with `title` attr instead of a tooltip because it is easier to
     // implement. We should try adding a tooltip in the future, but we'll need
     // to be very careful about performance when doing so with large tables.
-    cell: ({ getValue }) => <span title={getValue()}>{getValue()}</span>,
+    cell: ({ getValue }) => <span title={getValue<string>()}>{getValue<string>()}</span>,
   },
 ];
 
diff --git a/components/src/SettingsAutocomplete/SettingsAutocomplete.tsx b/components/src/SettingsAutocomplete/SettingsAutocomplete.tsx
index 985e6a1e..312286dd 100644
--- a/components/src/SettingsAutocomplete/SettingsAutocomplete.tsx
+++ b/components/src/SettingsAutocomplete/SettingsAutocomplete.tsx
@@ -11,10 +11,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import type { AutocompleteProps, UseAutocompleteProps } from '@mui/material';
+import type { AutocompleteProps, AutocompleteRenderInputParams, UseAutocompleteProps } from '@mui/material';
 import { Autocomplete, TextField, Typography, createFilterOptions } from '@mui/material';
 import type { ReactElement, ReactNode } from 'react';
 
+function renderDefaultInput(params: AutocompleteRenderInputParams): ReactElement {
+  return <TextField {...params} />;
+}
+
 /**
  * Interface to extend from for `options` when using `SettingsAutocomplete`.
  */
@@ -67,7 +71,7 @@ export function SettingsAutocomplete<
   DisableClearable extends boolean | undefined = false,
 >({
   options,
-  renderInput = (params): ReactElement => <TextField {...params} />,
+  renderInput = renderDefaultInput,
   id,
   'aria-labelledby': ariaLabelledby,
   ...otherProps
diff --git a/components/src/Table/Table.test.tsx b/components/src/Table/Table.test.tsx
index 32493274..5565293c 100644
--- a/components/src/Table/Table.test.tsx
+++ b/components/src/Table/Table.test.tsx
@@ -62,7 +62,7 @@ const COLUMNS: TableProps<MockTableData>['columns'] = [
     header: 'Color',
     headerDescription: 'Hex codes for colors',
     width: 100,
-    cell: ({ getValue }) => <div data-testid="wrapper">{getValue()}</div>,
+    cell: ({ getValue }) => <div data-testid="wrapper">{getValue<string>()}</div>,
     enableSorting: true,
   },
 ];
diff --git a/components/src/Table/Table.tsx b/components/src/Table/Table.tsx
index cafaa09a..a192a675 100644
--- a/components/src/Table/Table.tsx
+++ b/components/src/Table/Table.tsx
@@ -80,6 +80,8 @@ export function Table<TableData>({
   defaultColumnConfig,
   ...otherProps
 }: TableProps<TableData>): ReactElement {
+  'use no memo'; // TanStack Table v8 uses a mutable instance that automatic memoization cannot track.
+
   const theme = useTheme();
 
   const hasSubRows = !!getSubRows;
@@ -205,6 +207,8 @@ export function Table<TableData>({
     return initTableColumns;
   }, [columns, defaultColumnConfig, hasItemActions, checkboxSelection, actionsColumn, checkboxColumn]);
 
+  // Oxlint still checks incompatible APIs inside functions opted out of compilation above.
+  // oxlint-disable-next-line react/incompatible-library
   const table = useReactTable({
     data,
     columns: tableColumns,
diff --git a/components/src/Table/TableToolbar.tsx b/components/src/Table/TableToolbar.tsx
index cebd24bd..f25e8706 100644
--- a/components/src/Table/TableToolbar.tsx
+++ b/components/src/Table/TableToolbar.tsx
@@ -86,6 +86,8 @@ export function TableToolbar<TableData>({
   isAllExpanded,
   onExpandAllChange,
 }: TableToolbarProps<TableData>): ReactElement | null {
+  'use no memo'; // TanStack Table columns retain their identity when visibility changes.
+
   const [colMenuAnchor, setColMenuAnchor] = useState<null | HTMLElement>(null);
   const colMenuOpen = Boolean(colMenuAnchor);
   const [searchResetKey, setSearchResetKey] = useState(0);
diff --git a/components/src/Table/VirtualizedTable.tsx b/components/src/Table/VirtualizedTable.tsx
index 85e70ca0..e7f320d1 100644
--- a/components/src/Table/VirtualizedTable.tsx
+++ b/components/src/Table/VirtualizedTable.tsx
@@ -79,14 +79,14 @@ export function VirtualizedTable<TableData>({
   rows,
   columns,
   headers,
-  columnSizing,
-  columnSizingInfo,
   cellConfigs,
   pagination,
   onPaginationChange,
   rowCount,
   toolbarConfig,
 }: VirtualizedTableProps<TableData>): ReactElement {
+  'use no memo'; // TanStack Table row and column getters read mutable state behind stable identities.
+
   const virtuosoRef = useRef<TableVirtuosoHandle>(null);
   // Use a ref for these values because they are only needed for keyboard
   // focus interactions and setting them on state will lead to a significant
@@ -133,8 +133,7 @@ export function VirtualizedTable<TableData>({
       },
       TableHead,
       TableFoot,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      TableRow: ({ item, ...props }): ReactElement | null => {
+      TableRow: ({ item: _item, ...props }): ReactElement | null => {
         const index = props['data-index'];
         const row = rows[index];
         if (!row) {
@@ -183,23 +182,18 @@ export function VirtualizedTable<TableData>({
   /**
    * Instead of calling `column.getSize()` on every render for every header
    * and especially every data cell (very expensive),
-   * we will calculate all column sizes at once at the root table level in a useMemo
+   * we calculate all column sizes once per render at the root table level
    * and pass the column sizes down as CSS variables to the <table> element.
    */
-  const columnSizeVars = useMemo(() => {
-    const colSizes: { [key: string]: number } = {};
-    headers.forEach((headerGroup) => {
-      headerGroup.headers
-        .filter((header) => header.column.getCanResize())
-        .forEach((header) => {
-          colSizes[`--header-${header.id}-size`] = header.getSize();
-          colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
-        });
-    });
-    return colSizes;
-    // We want to recalculate column sizes whenever column sizes or column resizing info changes.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [columnSizingInfo, columnSizing, headers]);
+  const columnSizeVars: { [key: string]: number } = {};
+  headers.forEach((headerGroup) => {
+    headerGroup.headers
+      .filter((header) => header.column.getCanResize())
+      .forEach((header) => {
+        columnSizeVars[`--header-${header.id}-size`] = header.getSize();
+        columnSizeVars[`--col-${header.column.id}-size`] = header.column.getSize();
+      });
+  });
 
   return (
     <Box style={{ width, height, ...columnSizeVars }}>
diff --git a/components/src/Table/model/table-model.test.tsx b/components/src/Table/model/table-model.test.tsx
index aa5d5292..40cc5c3a 100644
--- a/components/src/Table/model/table-model.test.tsx
+++ b/components/src/Table/model/table-model.test.tsx
@@ -24,8 +24,7 @@ describe('getTableCellLayout', () => {
       { name: 'first column', opts: { isFirstColumn: true } },
       { name: 'center column', opts: {} },
       { name: 'last column', opts: { isLastColumn: true } },
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ])(`in $name`, ({ name, opts }) => {
+    ])(`in $name`, ({ opts }) => {
       expect(getTableCellLayout(mockMuiTheme, density, opts)).toMatchSnapshot();
     });
   });
@@ -267,7 +266,7 @@ describe('persesColumnToTanstackColumn', () => {
         headerDescription: 'The total number of values.',
         width: 120,
         dataLink: undefined,
-        cell: (data) => <strong>{data.getValue()}</strong>,
+        cell: (data) => <strong>{data.getValue<number>()}</strong>,
         cellDescription: (data) => `Desc for ${data.getValue()}`,
       },
     ];
diff --git a/components/src/Table/model/table-model.ts b/components/src/Table/model/table-model.ts
index 37f25618..640ffeab 100644
--- a/components/src/Table/model/table-model.ts
+++ b/components/src/Table/model/table-model.ts
@@ -351,7 +351,6 @@ export interface TableCellConfig {
 // I couldn't get it to work properly that way and punted on figuring it out
 // after trying several things.
 declare module '@tanstack/table-core' {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnMeta<TData extends RowData, TValue> {
     align?: TableColumnConfig<TData>['align'];
     headerDescription?: TableColumnConfig<TData>['headerDescription'];
@@ -375,13 +374,14 @@ export type DataLink = Omit<Link, 'name'>;
 // Only exposing a very simplified version of the very extensive column definitions
 // possible with tanstack table to make it easier for us to control rendering
 // and functionality.
-export interface TableColumnConfig<TableData>
-  // Any needed to work around some typing issues with tanstack query.
-  // https://github.com/TanStack/table/issues/4241
-  // TODO: revisit issue thread and see if there are any workarounds we can
-  // use.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn' | 'id' | 'enableResizing'> {
+/**
+ * Cell values default to `unknown`. In cell callbacks, use `getValue<ValueType>()`
+ * when the column's value type is known, or narrow the value before using it.
+ */
+export interface TableColumnConfig<TableData> extends Pick<
+  AccessorKeyColumnDef<TableData>,
+  'accessorKey' | 'cell' | 'sortingFn' | 'id' | 'enableResizing'
+> {
   /**
    * Text to display in the header for the column.
    */
@@ -400,9 +400,7 @@ export interface TableColumnConfig<TableData>
    * If set to `true`, it will use the value generated by the `cell` prop if it
    * can be treated as a string.
    */
-  // `any` needed for same reason as no-explicit-any higher up in this type.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;
+  cellDescription?: ((props: CellContext<TableData, unknown>) => string) | boolean | undefined;
 
   /**
    * When `true`, the column will be sortable.
diff --git a/components/src/ThresholdsEditor/ThresholdsEditor.tsx b/components/src/ThresholdsEditor/ThresholdsEditor.tsx
index e10d7615..21b7949e 100644
--- a/components/src/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/components/src/ThresholdsEditor/ThresholdsEditor.tsx
@@ -54,7 +54,7 @@ export function ThresholdsEditor({
     if (!recentlyAddedInputRef.current || !focusRef.current) return;
     recentlyAddedInputRef.current?.focus();
     focusRef.current = false;
-  }, [steps?.length]);
+  });
 
   const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {
     if (thresholds !== undefined) {
diff --git a/components/src/TimeRangeSelector/DateTimeRangePicker.tsx b/components/src/TimeRangeSelector/DateTimeRangePicker.tsx
index abab6a85..b7875af6 100644
--- a/components/src/TimeRangeSelector/DateTimeRangePicker.tsx
+++ b/components/src/TimeRangeSelector/DateTimeRangePicker.tsx
@@ -46,7 +46,7 @@ export const DateTimeRangePicker = ({
   timeZone,
 }: AbsoluteTimeFormProps): ReactElement => {
   const stdTimeZone = ['local', 'browser'].includes(timeZone.toLowerCase())
-    ? Intl.DateTimeFormat().resolvedOptions().timeZone
+    ? new Intl.DateTimeFormat().resolvedOptions().timeZone
     : timeZone;
   const [timeRange, setTimeRange] = useState<AbsoluteTimeRange>(initialTimeRange);
   const [showStartCalendar, setShowStartCalendar] = useState<boolean>(true);
diff --git a/components/src/TimeRangeSelector/TimeRangeSelector.tsx b/components/src/TimeRangeSelector/TimeRangeSelector.tsx
index 174be5ab..ff80e913 100644
--- a/components/src/TimeRangeSelector/TimeRangeSelector.tsx
+++ b/components/src/TimeRangeSelector/TimeRangeSelector.tsx
@@ -17,7 +17,7 @@ import { isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/spec';
 import Calendar from 'mdi-material-ui/Calendar';
 import EarthIcon from 'mdi-material-ui/Earth';
 import type { ReactElement } from 'react';
-import { useMemo, useRef, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { useTimeZone } from '../context';
 import type { TimeOption } from '../model';
@@ -76,7 +76,7 @@ export function TimeRangeSelector({
   const { timeZone: ctxTimeZone } = useTimeZone();
   const timeZone = timeZoneProp ?? ctxTimeZone;
 
-  const anchorEl = useRef();
+  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
   const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);
 
   const convertedTimeRange = useMemo(() => {
@@ -130,7 +130,7 @@ export function TimeRangeSelector({
         </Box>
       </Popover>
       <Popover
-        anchorEl={anchorEl.current}
+        anchorEl={anchorEl}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
         open={showCustomDateSelector}
         onClose={() => setShowCustomDateSelector(false)}
@@ -147,7 +147,7 @@ export function TimeRangeSelector({
           timeZone={timeZone}
         />
       </Popover>
-      <Box ref={anchorEl}>
+      <Box ref={setAnchorEl}>
         <Select
           open={open}
           value={formatTimeRange(value, timeZone)}
diff --git a/components/src/TimeSeriesTooltip/TimeChartTooltip.tsx b/components/src/TimeSeriesTooltip/TimeChartTooltip.tsx
index 8c290898..336d152d 100644
--- a/components/src/TimeSeriesTooltip/TimeChartTooltip.tsx
+++ b/components/src/TimeSeriesTooltip/TimeChartTooltip.tsx
@@ -19,6 +19,7 @@ import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import useResizeObserver from 'use-resize-observer';
 
 import type { FormatOptions, TimeChartSeriesMapping } from '../model';
+import type { NearbySeriesArray } from './nearby-series';
 import { getNearbySeriesData } from './nearby-series';
 import type { CursorCoordinates } from './tooltip-model';
 import { useMousePosition } from './tooltip-model';
@@ -59,7 +60,7 @@ export const TimeChartTooltip = memo(function TimeChartTooltip({
   pinnedPos,
 }: TimeChartTooltipProps) {
   const [showAllSeries, setShowAllSeries] = useState(false);
-  const transform = useRef<string | undefined>();
+  const [nearbySeries, setNearbySeries] = useState<NearbySeriesArray>([]);
   const tooltipElementRef = useRef<HTMLDivElement | null>(null);
 
   const mousePos = useMousePosition();
@@ -78,6 +79,23 @@ export const TimeChartTooltip = memo(function TimeChartTooltip({
 
   const containerElement = containerId ? document.querySelector(containerId) : undefined;
 
+  // Chart reads and highlight actions synchronize with ECharts after commit.
+  useLayoutEffect(() => {
+    const chart = chartRef.current;
+    setNearbySeries(
+      getNearbySeriesData({
+        mousePos,
+        data,
+        seriesMapping,
+        pinnedPos,
+        chart,
+        format,
+        seriesFormatMap,
+        showAllSeries,
+      }),
+    );
+  }, [chartRef, mousePos, data, seriesMapping, pinnedPos, format, seriesFormatMap, showAllSeries]);
+
   // Synchronously reposition after every render to prevent one-frame viewport overflow.
   useLayoutEffect(() => {
     if (mousePos === null) return;
@@ -86,8 +104,7 @@ export const TimeChartTooltip = memo(function TimeChartTooltip({
     const rect = node.getBoundingClientRect();
     if (rect.height === 0 || rect.width === 0) return;
     const nextTransform = assembleTransform(mousePos, pinnedPos, rect.height, rect.width, containerElement);
-    if (nextTransform && nextTransform !== transform.current) {
-      transform.current = nextTransform;
+    if (nextTransform && nextTransform !== node.style.transform) {
       node.style.transform = nextTransform;
     }
   });
@@ -96,23 +113,11 @@ export const TimeChartTooltip = memo(function TimeChartTooltip({
 
   if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;
 
-  const chart = chartRef.current;
-
   // Cap height to container so the tooltip is not cut off.
   const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;
 
-  transform.current = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);
-
-  const nearbySeries = getNearbySeriesData({
-    mousePos,
-    data,
-    seriesMapping,
-    pinnedPos,
-    chart,
-    format,
-    seriesFormatMap,
-    showAllSeries,
-  });
+  const transform = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);
+
   if (nearbySeries.length === 0) {
     return null;
   }
@@ -125,7 +130,7 @@ export const TimeChartTooltip = memo(function TimeChartTooltip({
         ref={setTooltipRef}
         sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)}
         style={{
-          transform: transform.current,
+          transform,
         }}
       >
         <Stack spacing={0.5}>
diff --git a/components/src/controls/TextField.test.tsx b/components/src/controls/TextField.test.tsx
new file mode 100644
index 00000000..065837d4
--- /dev/null
+++ b/components/src/controls/TextField.test.tsx
@@ -0,0 +1,54 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { act, fireEvent, render, screen } from '@testing-library/react';
+
+import { TextField } from './TextField';
+
+it('debounces changes and cancels pending callbacks when unmounted', () => {
+  vi.useFakeTimers();
+  const onChange = vi.fn();
+  try {
+    const { unmount } = render(<TextField label="Query" value="" onChange={onChange} debounceMs={250} />);
+    fireEvent.change(screen.getByRole('textbox', { name: 'Query' }), { target: { value: 'up' } });
+    expect(screen.getByRole('textbox')).toHaveValue('up');
+    expect(onChange).not.toHaveBeenCalled();
+    act(() => vi.advanceTimersByTime(250));
+    expect(onChange).toHaveBeenCalledWith('up');
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'rate(up[5m])' } });
+    unmount();
+    act(() => vi.runAllTimers());
+    expect(onChange).toHaveBeenCalledTimes(1);
+  } finally {
+    vi.useRealTimers();
+  }
+});
+
+it('delivers pending input to the latest callback without restarting the debounce', () => {
+  vi.useFakeTimers();
+  const originalOnChange = vi.fn();
+  const latestOnChange = vi.fn();
+  try {
+    const { rerender } = render(<TextField label="Query" value="" onChange={originalOnChange} debounceMs={250} />);
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'rate(up[5m])' } });
+    act(() => vi.advanceTimersByTime(200));
+    rerender(<TextField label="Query" value="" onChange={latestOnChange} debounceMs={250} />);
+
+    expect(screen.getByRole('textbox')).toHaveValue('rate(up[5m])');
+    act(() => vi.advanceTimersByTime(50));
+    expect(originalOnChange).not.toHaveBeenCalled();
+    expect(latestOnChange).toHaveBeenCalledExactlyOnceWith('rate(up[5m])');
+  } finally {
+    vi.useRealTimers();
+  }
+});
diff --git a/components/src/controls/TextField.tsx b/components/src/controls/TextField.tsx
index 4cbabce1..a6393f30 100644
--- a/components/src/controls/TextField.tsx
+++ b/components/src/controls/TextField.tsx
@@ -13,9 +13,10 @@
 
 import type { TextFieldProps as MuiTextFieldProps } from '@mui/material';
 import { TextField as MuiTextField } from '@mui/material';
+import type { DebouncedFunc } from 'lodash';
 import debounce from 'lodash/debounce';
 import type { ChangeEvent, ForwardedRef } from 'react';
-import { forwardRef, useCallback, useMemo, useState } from 'react';
+import { forwardRef, useCallback, useLayoutEffect, useRef, useState } from 'react';
 
 type TextFieldProps = Omit<MuiTextFieldProps, 'onChange'> & { debounceMs?: number; onChange?: (value: string) => void };
 
@@ -25,19 +26,22 @@ export const TextField = forwardRef(function (
 ) {
   const [currentValue, setCurrentValue] = useState(value);
 
-  function handleChange(event: ChangeEvent<HTMLInputElement>): void {
-    setCurrentValue(event.target.value);
-    debounceFn(event.target.value);
-  }
+  const onChangeRef = useRef(onChange);
+  useLayoutEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
 
-  const handleDebounceFn = useCallback(
-    (inputValue: string) => {
-      onChange?.(inputValue);
-    },
-    [onChange],
-  );
+  const debounceRef = useRef<DebouncedFunc<(inputValue: string) => void> | null>(null);
+  useLayoutEffect(() => {
+    const debounceFn = debounce((inputValue: string) => onChangeRef.current?.(inputValue), debounceMs);
+    debounceRef.current = debounceFn;
+    return (): void => debounceFn.cancel();
+  }, [debounceMs]);
 
-  const debounceFn = useMemo(() => debounce(handleDebounceFn, debounceMs), [debounceMs, handleDebounceFn]);
+  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>): void => {
+    setCurrentValue(event.target.value);
+    debounceRef.current?.(event.target.value);
+  }, []);
 
   return <MuiTextField ref={ref} value={currentValue} onChange={handleChange} {...props} />;
 });
diff --git a/components/src/utils/component-ids.test.ts b/components/src/utils/component-ids.test.ts
new file mode 100644
index 00000000..8bab32d9
--- /dev/null
+++ b/components/src/utils/component-ids.test.ts
@@ -0,0 +1,27 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { renderHook } from '@testing-library/react';
+
+import { useId } from './component-ids';
+
+it('generates unique IDs that keep their original prefix across rerenders', () => {
+  const { result, rerender } = renderHook(({ prefix }) => [useId(prefix), useId(prefix)], {
+    initialProps: { prefix: 'control' },
+  });
+  const initialIds = result.current;
+  expect(initialIds[0]).toMatch(/^control-/);
+  expect(initialIds[0]).not.toBe(initialIds[1]);
+  rerender({ prefix: 'changed' });
+  expect(result.current).toEqual(initialIds);
+});
diff --git a/components/src/utils/component-ids.ts b/components/src/utils/component-ids.ts
index cf83a8fb..0d3d0d3e 100644
--- a/components/src/utils/component-ids.ts
+++ b/components/src/utils/component-ids.ts
@@ -11,24 +11,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { useRef } from 'react';
+import { useId as useReactId, useState } from 'react';
 
-declare global {
-  // eslint-disable-next-line no-var
-  var useIdValue: number;
-}
-
-/**
- * Generates a unique (stable) ID for a component. Should be replaced with React.useId once we support only React 18.
- */
+/** Generates a unique, stable React ID with the given prefix. */
 export function useId(prefix: string): string {
-  if (globalThis.useIdValue === undefined) {
-    globalThis.useIdValue = 0;
-  }
-
-  const id = useRef<string | undefined>(undefined);
-  if (id.current === undefined) {
-    id.current = `${prefix}-${globalThis.useIdValue++}`;
-  }
-  return id.current;
+  const id = useReactId();
+  const [initialPrefix] = useState(prefix);
+  return `${initialPrefix}-${id}`;
 }
diff --git a/components/src/utils/index.ts b/components/src/utils/index.ts
index 6c3ce862..e1dae5ce 100644
--- a/components/src/utils/index.ts
+++ b/components/src/utils/index.ts
@@ -18,7 +18,6 @@ export * from './combine-sx';
 export * from './component-ids';
 export * from './data-field-interpolation';
 export * from './format';
-export * from './memo';
 export * from './request-interpolation';
 export * from './selection-interpolation';
 export * from './theme-gen';
diff --git a/components/src/utils/memo.ts b/components/src/utils/memo.ts
deleted file mode 100644
index 7c3ae067..00000000
--- a/components/src/utils/memo.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import isEqual from 'lodash/isEqual';
-import type { DependencyList } from 'react';
-import { useRef } from 'react';
-
-type MemoRef<T> = {
-  value: T;
-  deps: DependencyList;
-};
-
-/**
- * Like React's useMemo, but guarantees the value will only be recalulated if
- * a dependency changes. Uses strict equality (===) for comparison. (React's
- * useMemo does not offer this guarantee, it's only a performance optimization).
- */
-export function useMemoized<T>(factory: () => T, deps: DependencyList): T {
-  const ref = useRef<MemoRef<T>>();
-
-  let areEqual = true;
-  for (let i = 0; i < deps.length; i++) {
-    if (ref.current?.deps[i] !== deps[i]) {
-      areEqual = false;
-      break;
-    }
-  }
-
-  if (ref.current === undefined || areEqual === false) {
-    ref.current = { value: factory(), deps: deps };
-  }
-
-  return ref.current.value;
-}
-
-/**
- * Like React's useMemo, except it does a deep equality comparison with lodash's
- * isEqual on the dependency list.
- */
-export function useDeepMemo<T>(factory: () => T, deps: DependencyList): T {
-  const ref = useRef<MemoRef<T>>();
-  if (ref.current === undefined || isEqual(deps, ref.current.deps) === false) {
-    ref.current = { value: factory(), deps };
-  }
-  return ref.current.value;
-}
diff --git a/components/src/utils/text.test.ts b/components/src/utils/text.test.ts
index 64f30d67..071e54ca 100644
--- a/components/src/utils/text.test.ts
+++ b/components/src/utils/text.test.ts
@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import type { ProjectResource } from '@perses-dev/client';
+import type { ProjectResource, Resource } from '@perses-dev/client';
 
 import { getResourceDisplayName, getResourceExtendedDisplayName } from './text';
 
@@ -32,6 +32,27 @@ const projectWithoutSpec = {
   metadata: { name: 'my-project' },
 } as unknown as ProjectResource;
 
+describe('resource display settings', () => {
+  test.each([
+    { spec: { spec: { display: { name: 'Variable' } } }, name: 'Variable' },
+    { spec: { display: { name: 'resource-id' } }, name: 'resource-id' },
+    { spec: { spec: {}, display: { name: 'Outer' } }, name: 'Outer' },
+  ])('reads a display name from $spec', ({ spec, name }) => {
+    const resource: Resource = { kind: 'Variable', metadata: { name: 'resource-id' }, spec };
+    expect(getResourceDisplayName(resource)).toBe(name);
+    expect(getResourceExtendedDisplayName(resource)).toBe(`${name} (ID: resource-id)`);
+  });
+
+  test.each([undefined, null, 'invalid', {}, { display: null }, { display: { name: 42 } }, { display: { name: '' } }])(
+    'falls back to the resource ID for spec %j',
+    (spec) => {
+      const resource: Resource = { kind: 'Project', metadata: { name: 'resource-id' }, spec };
+      expect(getResourceDisplayName(resource)).toBe('resource-id');
+      expect(getResourceExtendedDisplayName(resource)).toBe('resource-id');
+    },
+  );
+});
+
 describe('getResourceDisplayName', () => {
   test('returns spec.display.name when present', () => {
     expect(getResourceDisplayName(projectWithDisplayName)).toBe('My Project');
diff --git a/components/src/utils/text.ts b/components/src/utils/text.ts
index ab8608e0..2fa16e57 100644
--- a/components/src/utils/text.ts
+++ b/components/src/utils/text.ts
@@ -13,18 +13,21 @@
 
 import type { Resource } from '@perses-dev/client';
 
-export function getResourceDisplayName<T extends Resource>(resource: T): string {
-  // Variables
-  if (resource.spec?.spec?.display?.name) {
-    return resource.spec.spec.display.name;
-  }
+function getDisplayName(spec: unknown): string | undefined {
+  if (typeof spec !== 'object' || spec === null || !('display' in spec)) return undefined;
+  const { display } = spec;
+  if (typeof display !== 'object' || display === null || !('name' in display)) return undefined;
+  return typeof display.name === 'string' && display.name ? display.name : undefined;
+}
 
-  // Other resources with display
-  if (resource.spec?.display?.name) {
-    return resource.spec.display.name;
-  }
+function getSpecDisplayName(spec: unknown): string | undefined {
+  // Variables wrap their display settings in a nested spec.
+  const nestedSpec = typeof spec === 'object' && spec !== null && 'spec' in spec ? spec.spec : undefined;
+  return getDisplayName(nestedSpec) ?? getDisplayName(spec);
+}
 
-  return resource.metadata.name;
+export function getResourceDisplayName<T extends Resource>(resource: T): string {
+  return getSpecDisplayName(resource.spec) ?? resource.metadata.name;
 }
 
 /**
@@ -32,15 +35,6 @@ export function getResourceDisplayName<T extends Resource>(resource: T): string
  * Else, only return the resource name
  */
 export function getResourceExtendedDisplayName<T extends Resource>(resource: T): string {
-  // Variables
-  if (resource.spec?.spec?.display?.name) {
-    return `${resource.spec.spec.display.name} (ID: ${resource.metadata.name})`;
-  }
-
-  // Other resources with display
-  if (resource.spec?.display?.name) {
-    return `${resource.spec.display.name} (ID: ${resource.metadata.name})`;
-  }
-
-  return resource.metadata.name;
+  const displayName = getSpecDisplayName(resource.spec);
+  return displayName ? `${displayName} (ID: ${resource.metadata.name})` : resource.metadata.name;
 }
diff --git a/dashboards/src/components/Dashboard/Dashboard.tsx b/dashboards/src/components/Dashboard/Dashboard.tsx
index 6de25683..1708653a 100644
--- a/dashboards/src/components/Dashboard/Dashboard.tsx
+++ b/dashboards/src/components/Dashboard/Dashboard.tsx
@@ -16,7 +16,7 @@ import { Box } from '@mui/material';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
 import { SnapGridGroup } from '@snapgridjs/react';
 import type { ReactElement } from 'react';
-import { useRef } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 
 import { usePanelGroupIds, useViewPanelGroup } from '../../context';
 import type { EmptyDashboardProps } from '../EmptyDashboard';
@@ -43,10 +43,18 @@ export function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: Da
   const viewPanelItemId = useViewPanelGroup();
   const boxRef = useRef<HTMLDivElement>(null);
   const isEmpty = !panelGroupIds.length;
-  // Only the viewed panel needs this; measuring on every render would force a reflow and re-layout every group.
-  const panelFullHeight = viewPanelItemId
-    ? window.innerHeight - (boxRef.current?.getBoundingClientRect().top ?? HEADER_HEIGHT) - window.scrollY
-    : undefined;
+  const [panelFullHeight, setPanelFullHeight] = useState<number>();
+
+  useLayoutEffect(() => {
+    if (!viewPanelItemId) return;
+    const measure = (): void => {
+      const top = boxRef.current?.getBoundingClientRect().top ?? HEADER_HEIGHT;
+      setPanelFullHeight(window.innerHeight - top - window.scrollY);
+    };
+    measure();
+    window.addEventListener('resize', measure);
+    return (): void => window.removeEventListener('resize', measure);
+  }, [viewPanelItemId]);
 
   return (
     <Box {...boxProps} sx={{ height: '100%' }} ref={boxRef}>
@@ -63,7 +71,7 @@ export function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: Da
                 key={panelGroupId}
                 panelGroupId={panelGroupId}
                 panelOptions={panelOptions}
-                panelFullHeight={panelFullHeight}
+                panelFullHeight={viewPanelItemId ? panelFullHeight : undefined}
               />
             ))}
         </SnapGridGroup>
diff --git a/dashboards/src/components/DownloadButton/DownloadButton.tsx b/dashboards/src/components/DownloadButton/DownloadButton.tsx
index 430d11c0..e0a1c3bf 100644
--- a/dashboards/src/components/DownloadButton/DownloadButton.tsx
+++ b/dashboards/src/components/DownloadButton/DownloadButton.tsx
@@ -80,8 +80,7 @@ export function DownloadButton(): ReactElement {
       </Menu>
 
       {/* Hidden link to download the dashboard as a JSON or YAML file */}
-      {/* eslint-disable jsx-a11y/anchor-has-content */}
-      {/* eslint-disable jsx-a11y/anchor-is-valid  */}
+      {/* oxlint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */}
       <a ref={hiddenLinkRef} style={{ display: 'none' }} />
     </>
   );
diff --git a/dashboards/src/components/LeaveDialog/LeaveDialog.tsx b/dashboards/src/components/LeaveDialog/LeaveDialog.tsx
index 789b2cc2..b19ac5bd 100644
--- a/dashboards/src/components/LeaveDialog/LeaveDialog.tsx
+++ b/dashboards/src/components/LeaveDialog/LeaveDialog.tsx
@@ -48,7 +48,7 @@ export function Prompt({ isBlocked, message }: LeaveDialogProps): ReactElement {
     return (): void => {
       window.removeEventListener('beforeunload', handleRouteChange);
     };
-  }, [blocker, isBlocked, isBlockedState]);
+  }, [isBlocked]);
 
   const handleDiscardChanges = (): void => blocker.proceed?.();
   const handleCancel = (): void => blocker.reset?.();
diff --git a/dashboards/src/components/Panel/Panel.test.tsx b/dashboards/src/components/Panel/Panel.test.tsx
index 81678ffd..fb26a4b6 100644
--- a/dashboards/src/components/Panel/Panel.test.tsx
+++ b/dashboards/src/components/Panel/Panel.test.tsx
@@ -143,8 +143,15 @@ vi.mock('@perses-dev/plugin-system', async () => {
         PanelComponent: (): JSX.Element => <div>TimeSeriesChart panel</div>,
         actions: [
           {
-            component: (): JSX.Element => (
-              <button aria-label="Export CSV" data-testid="export-action">
+            component: ({ queryResults }: PluginSystemModule.PanelProps<unknown>): JSX.Element => (
+              <button
+                aria-label="Export CSV"
+                data-testid="export-action"
+                data-query-count={queryResults.length}
+                data-query-states={queryResults
+                  .map((query) => (query.data === undefined ? 'unavailable' : 'ready'))
+                  .join(',')}
+              >
                 Export
               </button>
             ),
@@ -225,6 +232,27 @@ describe('Panel', () => {
     });
   });
 
+  it('passes pending, successful, and errored queries to plugin actions in order', async () => {
+    vi.mocked(useDataQueriesContext).mockReturnValue(
+      makeDataQueriesContext([
+        makeQueryResult({ isLoading: true }),
+        makeQueryResult({ data: { series: [{ name: 'test', values: [[1, 2]] }] } }),
+        makeQueryResult({ error: new Error('query failed') }),
+      ]),
+    );
+
+    await renderPanel();
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Export CSV' })).toHaveAttribute('data-query-count', '3');
+      expect(screen.getByRole('button', { name: 'Export CSV' })).toHaveAttribute(
+        'data-query-states',
+        'unavailable,ready,unavailable',
+      );
+    });
+    vi.mocked(useDataQueriesContext).mockReturnValue(makeDataQueriesContext());
+  });
+
   it('should render panel', async () => {
     await renderPanel();
 
diff --git a/dashboards/src/components/Panel/Panel.tsx b/dashboards/src/components/Panel/Panel.tsx
index 3772330f..fe4776ac 100644
--- a/dashboards/src/components/Panel/Panel.tsx
+++ b/dashboards/src/components/Panel/Panel.tsx
@@ -24,7 +24,7 @@ import {
 import type { ActionOptions } from '@perses-dev/plugin-system';
 import { useDataQueriesContext, usePluginRegistry } from '@perses-dev/plugin-system';
 import type { PanelDefinition } from '@perses-dev/spec';
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import { memo, useEffect, useMemo, useState } from 'react';
 import useResizeObserver from 'use-resize-observer';
 
@@ -159,10 +159,10 @@ export const Panel = memo(function Panel(props: PanelProps) {
         const headerActions = plugin.actions
           .filter((action) => !action.location || action.location === 'header')
           .map((action, index): ReactNode | null => {
-            const ActionComponent = action.component;
+            // Actions also receive pending or failed queries, despite PanelProps requiring data.
+            const ActionComponent = action.component as ComponentType<typeof panelPropsForActions>;
             try {
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              return <ActionComponent key={`plugin-action-${index}`} {...(panelPropsForActions as any)} />;
+              return <ActionComponent key={`plugin-action-${index}`} {...panelPropsForActions} />;
             } catch (error) {
               console.warn(`Failed to render plugin action ${index}:`, error);
               return null;
diff --git a/dashboards/src/components/Panel/PanelActions.tsx b/dashboards/src/components/Panel/PanelActions.tsx
index 4833b984..0fb9033d 100644
--- a/dashboards/src/components/Panel/PanelActions.tsx
+++ b/dashboards/src/components/Panel/PanelActions.tsx
@@ -272,10 +272,6 @@ export const PanelActions: React.FC<PanelActionsProps> = ({
 
   const divider = <Box sx={{ flexGrow: 1 }}></Box>;
 
-  // By default, the panel header shows certain icons only on hover if the panel is in non-editing, non-fullscreen mode
-  const OnHover = ({ children }: PropsWithChildren): ReactNode =>
-    showIcons === 'hover' ? <Box sx={{ display: 'var(--panel-hover, none)' }}>{children}</Box> : <>{children}</>;
-
   return (
     <>
       {/* small panel width: move all icons except move/grab to overflow menu */}
@@ -285,7 +281,7 @@ export const PanelActions: React.FC<PanelActionsProps> = ({
         })}
       >
         {divider}
-        <OnHover>
+        <OnHover showIcons={showIcons}>
           <OverflowMenu title={title}>
             {descriptionAction} {linksAction} {queryStateIndicator} {noticesIndicator}
             {informationTooltipIcon} {extraActions} {viewQueryAction}
@@ -304,12 +300,12 @@ export const PanelActions: React.FC<PanelActionsProps> = ({
           },
         })}
       >
-        <OnHover>
+        <OnHover showIcons={showIcons}>
           {descriptionAction} {linksAction}
         </OnHover>
         {divider} {queryStateIndicator}
         {noticesIndicator}
-        <OnHover>
+        <OnHover showIcons={showIcons}>
           {extraActions}
           {readActions}
           {informationTooltipIcon}
@@ -328,12 +324,12 @@ export const PanelActions: React.FC<PanelActionsProps> = ({
           [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).down(HEADER_MEDIUM_WIDTH)]: { display: 'none' },
         })}
       >
-        <OnHover>
+        <OnHover showIcons={showIcons}>
           {descriptionAction} {linksAction}
         </OnHover>
         {divider} {queryStateIndicator}
         {noticesIndicator}
-        <OnHover>
+        <OnHover showIcons={showIcons}>
           {extraActions}
           {viewQueryAction}
           {readActions} {informationTooltipIcon} {editActions}
@@ -436,3 +432,8 @@ export const OverflowMenu: React.FC<
     </Box>
   );
 };
+
+// Only show these actions on hover when requested by the panel options.
+function OnHover({ children, showIcons }: PropsWithChildren<{ showIcons: PanelOptions['showIcons'] }>): ReactNode {
+  return showIcons === 'hover' ? <Box sx={{ display: 'var(--panel-hover, none)' }}>{children}</Box> : <>{children}</>;
+}
diff --git a/dashboards/src/components/Panel/PanelHeader.tsx b/dashboards/src/components/Panel/PanelHeader.tsx
index 9157fac2..aec5ca6b 100644
--- a/dashboards/src/components/Panel/PanelHeader.tsx
+++ b/dashboards/src/components/Panel/PanelHeader.tsx
@@ -18,7 +18,7 @@ import type { ItemAction, QueryData } from '@perses-dev/plugin-system';
 import { useAllVariableValues, useReplaceVariablesInString } from '@perses-dev/plugin-system';
 import type { Link } from '@perses-dev/spec';
 import type { ReactElement, ReactNode } from 'react';
-import { useRef } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 
 import { HEADER_ACTIONS_CONTAINER_NAME } from '../../constants/styles';
 import type { PanelOptions } from './Panel';
@@ -72,8 +72,11 @@ export function PanelHeader({
 
   const textRef = useRef<HTMLDivElement>(null);
 
-  const isEllipsisActive =
-    textRef.current && dimension?.width ? textRef.current.scrollWidth > textRef.current.clientWidth : false;
+  const [isEllipsisActive, setIsEllipsisActive] = useState(false);
+  useLayoutEffect(() => {
+    const element = title ? textRef.current : null;
+    setIsEllipsisActive(!!element && !!dimension?.width && element.scrollWidth > element.clientWidth);
+  }, [title, dimension?.width]);
 
   const { actionButtons, confirmDialog } = useSelectionItemActions({
     actions: itemActionsListConfig,
diff --git a/dashboards/src/components/PanelDrawer/PanelDrawer.tsx b/dashboards/src/components/PanelDrawer/PanelDrawer.tsx
index dd970f54..47db9187 100644
--- a/dashboards/src/components/PanelDrawer/PanelDrawer.tsx
+++ b/dashboards/src/components/PanelDrawer/PanelDrawer.tsx
@@ -11,7 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-/* eslint-disable @typescript-eslint/no-empty-function */
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -59,9 +58,9 @@ export const PanelDrawer = (): ReactElement => {
     [panelEditor],
   );
 
-  const handleClose = (): void => {
+  const handleClose = useCallback((): void => {
     setIsClosing(true);
-  };
+  }, []);
 
   // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state
   const handleExited = useCallback(() => {
@@ -71,9 +70,9 @@ export const PanelDrawer = (): ReactElement => {
 
   // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.
   // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up
-  const handleClickOut = (): void => {
+  const handleClickOut = useCallback((): void => {
     /* do nothing */
-  };
+  }, []);
 
   const drawer = useMemo(() => {
     return (
@@ -97,7 +96,7 @@ export const PanelDrawer = (): ReactElement => {
         )}
       </Drawer>
     );
-  }, [handleExited, handleSave, isOpen, panelEditor, panelKey]);
+  }, [handleClickOut, handleClose, handleExited, handleSave, isOpen, panelEditor, panelKey]);
 
   // If the panel editor is using a repeat variable, we need to wrap the drawer in a VariableContext.Provider
   if (panelEditor?.panelGroupItemId?.repeatVariable?.group) {
diff --git a/dashboards/src/components/Variables/Variable.tsx b/dashboards/src/components/Variables/Variable.tsx
index 228a6a61..269ebc0d 100644
--- a/dashboards/src/components/Variables/Variable.tsx
+++ b/dashboards/src/components/Variables/Variable.tsx
@@ -81,11 +81,11 @@ export function useListVariableState(
   const loading = useMemo(() => variablesOptionsQuery.isFetching ?? false, [variablesOptionsQuery.isFetching]);
   const options = useMemo(() => variablesOptionsQuery.data ?? [], [variablesOptionsQuery.data]);
 
-  let value = state?.value;
+  let initialValue = state?.value;
 
-  // Make sure value is an array if allowMultiple is true
-  if (allowMultiple && !Array.isArray(value)) {
-    value = typeof value === 'string' ? [value] : [];
+  // Make sure initialValue is an array if allowMultiple is true
+  if (allowMultiple && !Array.isArray(initialValue)) {
+    initialValue = typeof initialValue === 'string' ? [initialValue] : [];
   }
 
   // Sort the provided list of options according to the method defined
@@ -94,7 +94,7 @@ export function useListVariableState(
 
     if (!sort || sort === 'none') return opts;
     const sortMethod = SORT_METHODS[sort as SortMethodName];
-    // oxlint-disable-next-line unicorn/no-array-sort Calling sort of object, not the built-in array sort function
+    // oxlint-disable-next-line unicorn/no-array-sort -- Calling sort of object, not the built-in array sort function
     return !sortMethod ? opts : sortMethod.sort(opts);
   }, [options, sort]);
 
@@ -108,31 +108,31 @@ export function useListVariableState(
     return computedOptions;
   }, [allowAllValue, sortedOptions]);
 
-  const valueIsInOptions = useMemo(
+  const initialValueIsInOptions = useMemo(
     () =>
       Boolean(
         viewOptions.find((v) => {
           if (allowMultiple) {
-            return (value as string[]).includes(v.value);
+            return (initialValue as string[]).includes(v.value);
           }
-          return value === v.value;
+          return initialValue === v.value;
         }),
       ),
-    [viewOptions, value, allowMultiple],
+    [viewOptions, initialValue, allowMultiple],
   );
 
-  value = useMemo(() => {
+  const value = useMemo(() => {
     const firstOptionValue = viewOptions?.[allowAllValue ? 1 : 0]?.value;
 
-    // If there is no value but there are options, or the value is not in options, we set the value to the first option.
+    // If the value is missing or not in the options, default to the first option.
     if (firstOptionValue) {
-      if (!valueIsInOptions || !value || value.length === 0) {
+      if (!initialValueIsInOptions || !initialValue || initialValue.length === 0) {
         return allowMultiple ? [firstOptionValue] : firstOptionValue;
       }
     }
 
-    return value;
-  }, [viewOptions, value, valueIsInOptions, allowMultiple, allowAllValue]);
+    return initialValue;
+  }, [viewOptions, initialValue, initialValueIsInOptions, allowMultiple, allowAllValue]);
 
   const selectedOptions = useMemo(() => {
     // In the case Autocomplete.multiple equals false, Autocomplete.value expects a single object, not
@@ -346,12 +346,14 @@ function TextVariable({ name, source }: VariableProps): ReactElement {
   const state = ctx.state;
   const definition = ctx.definition as TextVariableDefinition;
   const [tempValue, setTempValue] = useState(state?.value ?? '');
-  const [inputWidth, setInputWidth] = useState(getWidthPx(tempValue as string, 'text'));
+  const inputWidth = getWidthPx(tempValue as string, 'text');
+  const [previousValue, setPreviousValue] = useState(state?.value);
   const { setVariableValue } = useVariableDefinitionActions();
 
-  useEffect(() => {
+  if (previousValue !== state?.value) {
+    setPreviousValue(state?.value);
     setTempValue(state?.value ?? '');
-  }, [state?.value]);
+  }
 
   return (
     <TextField
@@ -359,7 +361,6 @@ function TextVariable({ name, source }: VariableProps): ReactElement {
       value={tempValue}
       onChange={(e) => {
         setTempValue(e.target.value);
-        setInputWidth(getWidthPx(e.target.value, 'text'));
       }}
       onBlur={() => setVariableValue(name, tempValue, source)}
       placeholder={name}
diff --git a/dashboards/src/context/DashboardProvider/DashboardProvider.tsx b/dashboards/src/context/DashboardProvider/DashboardProvider.tsx
index 2bec4203..a8ae5a8d 100644
--- a/dashboards/src/context/DashboardProvider/DashboardProvider.tsx
+++ b/dashboards/src/context/DashboardProvider/DashboardProvider.tsx
@@ -15,7 +15,7 @@ import type { DashboardKind, DashboardResource, ProjectMetadata } from '@perses-
 import { usePlugin, usePluginRegistry } from '@perses-dev/plugin-system';
 import type { Display, DurationString, DatasourceSpec } from '@perses-dev/spec';
 import type { ReactElement, ReactNode } from 'react';
-import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
 import { createStore } from 'zustand';
 import type { StoreApi } from 'zustand';
 import { devtools } from 'zustand/middleware';
@@ -105,8 +105,7 @@ export interface DashboardProviderProps {
 
 export function DashboardProvider(props: DashboardProviderProps): ReactElement {
   // Prevent calling createDashboardStore every time it rerenders
-  const createDashboardStore = useCallback(initStore, [props]);
-  const [store] = useState(createDashboardStore(props));
+  const [store] = useState(() => initStore(props));
 
   // load plugin to retrieve initial spec if default panel kind is defined
   const { defaultPluginKinds } = usePluginRegistry();
diff --git a/dashboards/src/context/DashboardProvider/common.ts b/dashboards/src/context/DashboardProvider/common.ts
index dcfbcef7..dff237b4 100644
--- a/dashboards/src/context/DashboardProvider/common.ts
+++ b/dashboards/src/context/DashboardProvider/common.ts
@@ -22,7 +22,6 @@ export type OnSaveDashboard = (dashboard: DashboardResource) => Promise<unknown>
 export type Middleware = [['zustand/immer', never], ['zustand/devtools', never]];
 
 declare global {
-  // eslint-disable-next-line no-var
   var dashboardStoreId: number | undefined;
 }
 
diff --git a/dashboards/src/context/DashboardProvider/use-save-dashboard.ts b/dashboards/src/context/DashboardProvider/use-save-dashboard.ts
index ab633aad..bff51a71 100644
--- a/dashboards/src/context/DashboardProvider/use-save-dashboard.ts
+++ b/dashboards/src/context/DashboardProvider/use-save-dashboard.ts
@@ -54,27 +54,28 @@ export function useSaveDashboard(onSave?: OnSaveDashboard): SaveDashboardResult
   const { timeZone } = useTimeZoneParams();
   const { getSavedVariablesStatus, setVariableDefaultValues } = useVariableDefinitionActions();
   const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();
-  const performSave = useCallback(async (): Promise<void> => {
-    if (!onSave) {
-      setEditMode(false);
-      return;
-    }
-
-    try {
-      setSaving(true);
-      await onSave(dashboard);
-      closeSaveChangesConfirmationDialog();
-      setEditMode(false);
-    } finally {
-      setSaving(false);
-    }
-  }, [closeSaveChangesConfirmationDialog, dashboard, onSave, setEditMode]);
 
   const saveDashboard = useCallback((): void => {
     if (isSaving) {
       return;
     }
 
+    const performSave = async (): Promise<void> => {
+      if (!onSave) {
+        setEditMode(false);
+        return;
+      }
+
+      setSaving(true);
+      await Promise.resolve()
+        .then(() => onSave(dashboard))
+        .then(() => {
+          closeSaveChangesConfirmationDialog();
+          setEditMode(false);
+        })
+        .finally(() => setSaving(false));
+    };
+
     const { isSavedVariableModified } = getSavedVariablesStatus();
     const isSavedDurationModified =
       isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
@@ -125,7 +126,8 @@ export function useSaveDashboard(onSave?: OnSaveDashboard): SaveDashboardResult
     openSaveChangesConfirmationDialog,
     setVariableDefaultValues,
     setDashboard,
-    performSave,
+    onSave,
+    setEditMode,
     closeSaveChangesConfirmationDialog,
   ]);
 
diff --git a/dashboards/src/test/dashboard-provider.tsx b/dashboards/src/test/dashboard-provider.tsx
index c5a81584..ce4f5978 100644
--- a/dashboards/src/test/dashboard-provider.tsx
+++ b/dashboards/src/test/dashboard-provider.tsx
@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import type { DashboardResource } from '@perses-dev/client';
-import { useContext } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import type { StoreApi } from 'zustand';
 
 import type { DashboardStoreState } from '../context';
@@ -41,7 +41,9 @@ export function createDashboardProviderSpy(): {
   // Spy component just captures the store value so it can be inspected in tests
   function DashboardProviderSpy(): null {
     const ctx = useContext(DashboardContext);
-    store.value = ctx;
+    useLayoutEffect(() => {
+      store.value = ctx;
+    }, [ctx]);
     return null;
   }
 
diff --git a/dashboards/src/utils/pluginVersioning.test.ts b/dashboards/src/utils/pluginVersioning.test.ts
index 5f0df094..a6d27437 100644
--- a/dashboards/src/utils/pluginVersioning.test.ts
+++ b/dashboards/src/utils/pluginVersioning.test.ts
@@ -27,7 +27,7 @@ import {
 } from './pluginVersioning';
 
 function buildMetadata(
-  kind: string,
+  kind: PluginMetadataWithModule['kind'],
   name: string,
   moduleVersion: string,
   options?: { pluginVersion?: string; registry?: string },
@@ -37,8 +37,7 @@ function buildMetadata(
     metadata: options?.pluginVersion ? { version: options.pluginVersion } : undefined,
     spec: { name, display: { name } },
     module: { name: `${name}-module`, version: moduleVersion, registry: options?.registry },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } as any;
+  };
 }
 
 /** Build the version map used by `applyPluginVersions` from a plain `pluginType:kind -> version` record. */
@@ -72,13 +71,11 @@ function buildDashboard(): DashboardResource {
             allowAllValue: false,
             plugin: { kind: 'PrometheusLabelValuesVariable', spec: {} },
           },
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        } as any,
+        },
         {
           kind: 'TextVariable',
           spec: { name: 'bar', value: 'baz' },
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        } as any,
+        },
       ],
       layouts: [],
       panels: {
@@ -94,22 +91,19 @@ function buildDashboard(): DashboardResource {
               },
             ],
           },
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        } as any,
+        },
       },
       datasources: {
         ds1: {
           default: true,
           plugin: { kind: 'PrometheusDatasource', spec: {} },
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        } as any,
+        },
       },
       annotations: [
         {
           display: { name: 'anno' },
           plugin: { kind: 'TempoAnnotation', spec: {} },
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        } as any,
+        },
       ],
     },
   };
@@ -181,19 +175,16 @@ describe('applyPluginVersions / removePluginVersions / isDashboardLocked', () =>
     const locked = applyPluginVersions(dashboard, versions);
 
     // original is untouched (deep clone)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((dashboard.spec.panels.panel1 as any).spec.plugin.metadata).toBeUndefined();
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((locked.spec.panels.panel1 as any).spec.plugin.metadata.version).toBe('1.0.0');
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((locked.spec.panels.panel1 as any).spec.queries[0].spec.plugin.metadata.version).toBe('1.1.0');
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((locked.spec.variables[0] as any).spec.plugin.metadata.version).toBe('1.2.0');
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((locked.spec.datasources!.ds1 as any).plugin.metadata.version).toBe('1.3.0');
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((locked.spec.annotations![0] as any).plugin.metadata.version).toBe('1.4.0');
+    expect(dashboard.spec.panels.panel1?.spec.plugin.metadata).toBeUndefined();
+
+    expect(locked.spec.panels.panel1?.spec.plugin.metadata?.version).toBe('1.0.0');
+    expect(locked.spec.panels.panel1?.spec.queries?.[0]?.spec.plugin.metadata?.version).toBe('1.1.0');
+    expect(locked.spec.variables?.[0]).toMatchObject({
+      kind: 'ListVariable',
+      spec: { plugin: { metadata: { version: '1.2.0' } } },
+    });
+    expect(locked.spec.datasources?.ds1?.plugin.metadata?.version).toBe('1.3.0');
+    expect(locked.spec.annotations?.[0]?.plugin.metadata?.version).toBe('1.4.0');
     expect(isDashboardLocked(locked)).toBe(true);
   });
 
@@ -202,16 +193,13 @@ describe('applyPluginVersions / removePluginVersions / isDashboardLocked', () =>
     const unlocked = removePluginVersions(locked);
 
     expect(isDashboardLocked(unlocked)).toBe(false);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((unlocked.spec.panels.panel1 as any).spec.plugin.metadata).toBeUndefined();
+    expect(unlocked.spec.panels.panel1?.spec.plugin.metadata).toBeUndefined();
   });
 
   test('plugins without an available version are left unpinned', () => {
     const partial = applyPluginVersions(buildDashboard(), buildVersions([['Panel', 'TimeSeriesChart', '1.0.0']]));
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((partial.spec.panels.panel1 as any).spec.plugin.metadata.version).toBe('1.0.0');
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((partial.spec.datasources!.ds1 as any).plugin.metadata).toBeUndefined();
+    expect(partial.spec.panels.panel1?.spec.plugin.metadata?.version).toBe('1.0.0');
+    expect(partial.spec.datasources?.ds1?.plugin.metadata).toBeUndefined();
   });
 
   test('a partially pinned dashboard is pinned but not locked', () => {
@@ -287,8 +275,9 @@ describe('findOutdatedPlugins / updatePluginVersions', () => {
 
   test('a pin on a plugin registry that has nothing newer is left alone', () => {
     const dashboard = applyPluginVersions(buildDashboard(), buildVersions([['Panel', 'TimeSeriesChart', '1.0.0']]));
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (dashboard.spec.panels.panel1 as any).spec.plugin.metadata.registry = 'other';
+    const metadata = dashboard.spec.panels.panel1?.spec.plugin.metadata;
+    if (!metadata) throw new Error('Expected the panel plugin to be pinned');
+    metadata.registry = 'other';
     // `latest` only knows about the registry-less identity, so nothing can be proposed for registry 'other'.
     expect(findOutdatedPlugins(dashboard, latest)).toEqual([]);
   });
@@ -300,17 +289,13 @@ describe('findOutdatedPlugins / updatePluginVersions', () => {
 
     const updated = updatePluginVersions(dashboard, [panelPlugin]);
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((updated.spec.panels.panel1 as any).spec.plugin.metadata.version).toBe('2.0.0');
+    expect(updated.spec.panels.panel1?.spec.plugin.metadata?.version).toBe('2.0.0');
     // Not selected -> untouched
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((updated.spec.panels.panel1 as any).spec.queries[0].spec.plugin.metadata.version).toBe('1.0.0');
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((updated.spec.datasources!.ds1 as any).plugin.metadata.version).toBe('1.0.0');
+    expect(updated.spec.panels.panel1?.spec.queries?.[0]?.spec.plugin.metadata?.version).toBe('1.0.0');
+    expect(updated.spec.datasources?.ds1?.plugin.metadata?.version).toBe('1.0.0');
 
     // The source dashboard is not mutated
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((dashboard.spec.panels.panel1 as any).spec.plugin.metadata.version).toBe('1.0.0');
+    expect(dashboard.spec.panels.panel1?.spec.plugin.metadata?.version).toBe('1.0.0');
   });
 
   test('updating every outdated plugin clears the outdated list', () => {
diff --git a/explore/src/components/ExploreManager/ExplorerManagerProvider.test.tsx b/explore/src/components/ExploreManager/ExplorerManagerProvider.test.tsx
new file mode 100644
index 00000000..a1241e79
--- /dev/null
+++ b/explore/src/components/ExploreManager/ExplorerManagerProvider.test.tsx
@@ -0,0 +1,41 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { act, renderHook } from '@testing-library/react';
+import type { PropsWithChildren, ReactElement } from 'react';
+import { StrictMode } from 'react';
+
+import { ExplorerManagerProvider, useExplorerManagerContext } from './ExplorerManagerProvider';
+
+function Wrapper({ children }: PropsWithChildren): ReactElement {
+  return (
+    <StrictMode>
+      <ExplorerManagerProvider>{children}</ExplorerManagerProvider>
+    </StrictMode>
+  );
+}
+
+it('restores each explorer draft and preserves data when selecting the current explorer', () => {
+  const { result } = renderHook(() => useExplorerManagerContext<{ query?: string }>(), { wrapper: Wrapper });
+  act(() => result.current.setExplorer('metrics'));
+  act(() => result.current.setData({ query: 'up' }));
+  act(() => result.current.setExplorer('metrics'));
+  expect(result.current.data).toEqual({ query: 'up' });
+  act(() => result.current.setExplorer('logs'));
+  expect(result.current.data).toEqual({});
+  act(() => result.current.setData({ query: 'error' }));
+  act(() => result.current.setExplorer('metrics'));
+  expect(result.current.data).toEqual({ query: 'up' });
+  act(() => result.current.setExplorer('logs'));
+  expect(result.current.data).toEqual({ query: 'error' });
+});
diff --git a/explore/src/components/ExploreManager/ExplorerManagerProvider.tsx b/explore/src/components/ExploreManager/ExplorerManagerProvider.tsx
index 2fa743d0..c4e15509 100644
--- a/explore/src/components/ExploreManager/ExplorerManagerProvider.tsx
+++ b/explore/src/components/ExploreManager/ExplorerManagerProvider.tsx
@@ -49,10 +49,11 @@ export function ExplorerManagerProvider({
   const { explorer, data } = explorerState;
 
   function setExplorer(newExplorer: string): void {
+    if (newExplorer === explorer) return;
+
     if (explorer) {
       // store current explorer state
-      explorerStateCache[explorer] = { data };
-      setExplorerStateCache(explorerStateCache);
+      setExplorerStateCache((cache) => ({ ...cache, [explorer]: { data } }));
     }
 
     // restore previous explorer state (if any)
diff --git a/package-lock.json b/package-lock.json
index 457916c4..4509fa4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,8 +30,8 @@
         "concurrently": "^10.0.3",
         "cross-env": "^7.0.3",
         "jsdom": "^26.1.0",
-        "oxfmt": "0.55.0",
-        "oxlint": "1.70.0",
+        "oxfmt": "0.70.0",
+        "oxlint": "1.85.0",
         "oxlint-plugin-react-doctor": "0.9.12",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",
@@ -3191,9 +3191,9 @@
       }
     },
     "node_modules/@oxfmt/binding-android-arm-eabi": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-android-arm-eabi/-/binding-android-arm-eabi-0.55.0.tgz",
-      "integrity": "sha512-+rFDOqQe5LOWgxrAJaZgLRudr6GQm0wGI6gtu7vVkrdLGjNMUSGbAlaCr8j7F2H2Er97vYQCU8WDb30onqMM1g==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-android-arm-eabi/-/binding-android-arm-eabi-0.70.0.tgz",
+      "integrity": "sha512-Xd7YO4/T2axEj6FTLcj4Why3mTBqFMg+x24xtorT4Lb2+1g82090GH0a/4U1m0pABGYiix2bq1pqkYrmV3f0Sw==",
       "cpu": [
         "arm"
       ],
@@ -3208,9 +3208,9 @@
       }
     },
     "node_modules/@oxfmt/binding-android-arm64": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-android-arm64/-/binding-android-arm64-0.55.0.tgz",
-      "integrity": "sha512-ctulLq8s3x8Zmvw6+iccB09TIKERAklRSmbJ10gk8mlAn05qZxoyo52dj3Hi9IJcmDSwF54fQaTVh2CbL6PInw==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-android-arm64/-/binding-android-arm64-0.70.0.tgz",
+      "integrity": "sha512-x9rlMYyKXdgKdYyUJzGsK1ZV8P4di/J32ipzcS6Jet6p9r9UAh28neXIMtdlSaJJycdi61Z4YkcLKLpk8ueFjg==",
       "cpu": [
         "arm64"
       ],
@@ -3225,9 +3225,9 @@
       }
     },
     "node_modules/@oxfmt/binding-darwin-arm64": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-darwin-arm64/-/binding-darwin-arm64-0.55.0.tgz",
-      "integrity": "sha512-xDQczLH9pw/RBk1h/GH0qcGMm8hQtmtVHBNLSH3lk1gEIR09hZ4L+mJQl4VqiVAvPK9VG9PYrWWuSQLt7xTbiA==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-darwin-arm64/-/binding-darwin-arm64-0.70.0.tgz",
+      "integrity": "sha512-IUTUPvrBVYy7POh4stXzRdz4IVC/1QSaviCWoyenSlOhGu0X9j5K07vCTM9biLjAA2Zs31l0Rj5vvRpj9n95wA==",
       "cpu": [
         "arm64"
       ],
@@ -3242,9 +3242,9 @@
       }
     },
     "node_modules/@oxfmt/binding-darwin-x64": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-darwin-x64/-/binding-darwin-x64-0.55.0.tgz",
-      "integrity": "sha512-JaNoFCkF2CJdGgpPSMbuO9HVyXyoNGIhMHPvp6NYAjeVKw9XEYc0HcUWJLPQa3Q69WV5wMa9m5jPMJPtbLtcRg==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-darwin-x64/-/binding-darwin-x64-0.70.0.tgz",
+      "integrity": "sha512-vw745q870oTd6J517O24asoX4/E+eK0nxYIFoedSLqgJ+nI5En7+ZS82iZSHZ69zevQrnOXiyHP01dA+t8xD8w==",
       "cpu": [
         "x64"
       ],
@@ -3259,9 +3259,9 @@
       }
     },
     "node_modules/@oxfmt/binding-freebsd-x64": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-freebsd-x64/-/binding-freebsd-x64-0.55.0.tgz",
-      "integrity": "sha512-DNbszhpg6S2MIzax5azdHFTTBIVkR5xr8yyRZuA4yoDAwOkzIp3tmldgKZM2+VlT+hJIG0xUksA+elISzMEAfA==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-freebsd-x64/-/binding-freebsd-x64-0.70.0.tgz",
+      "integrity": "sha512-NO14EgSM9dFkcg+MfGPxvsKqXYs9LKaxPrOKXpv1R0rLokGGFDcCq6dBMq18dE4wlpFOovX0UZY2uh1P30O7QA==",
       "cpu": [
         "x64"
       ],
@@ -3276,9 +3276,9 @@
       }
     },
     "node_modules/@oxfmt/binding-linux-arm-gnueabihf": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.55.0.tgz",
-      "integrity": "sha512-2snoaoRfFFyGnbOcKUK36rREBYxe/Xgz3uHbiA5zbCB/s6R4DQj4mHqYAaWWhgizCUSDxV8cE9zAZ0XleNpKGw==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.70.0.tgz",
+      "integrity": "sha512-139OEhHarj9CYoJ/i9gXlPv4KLBGtLj2toseOWYFf09QwlhklaZk+wW3aOvlqoeZtuayvkoSNVWra7WJ21s3VQ==",
       "cpu": [
         "arm"
       ],
@@ -3293,9 +3293,9 @@
       }
     },
     "node_modules/@oxfmt/binding-linux-arm-musleabihf": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.55.0.tgz",
-      "integrity": "sha512-q1aktHF/WRpSK81BX1dE/9vWrS2jGw1Nax2kb4DBLGAewubCLcoNyp4Zl/NSMgbv3vUS46Z33wIQkBVYOP3PYg==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.70.0.tgz",
+      "integrity": "sha512-GEh2PY3IWTE0M24eNhTduountANSbWyDmMnzFSQE/nGg/bjPugbUgiGuFu+xdqcQSd/HKSwH80/F2yVVD48yhA==",
       "cpu": [
         "arm"
       ],
@@ -3310,9 +3310,9 @@
       }
     },
     "node_modules/@oxfmt/binding-linux-arm64-gnu": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.55.0.tgz",
-      "integrity": "sha512-VD0y36aENezl/3tsclA/4G53Cc7iV+7Uoh7gz4yvcOTaEYBtJpQsE6PKDGTtUtOvGS4kv51ybfXY/nWZejO5IA==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.70.0.tgz",
+      "integrity": "sha512-En5i+UJmZSPxuSf47F2Hl5YOzKB0bicQLnGQkeTCMQ35cWLtbrSwACJKfiLqRZrk05DwSnsJkhBRaM3OURtIaA==",
       "cpu": [
         "arm64"
       ],
@@ -3330,9 +3330,9 @@
       }
     },
     "node_modules/@oxfmt/binding-linux-arm64-musl": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.55.0.tgz",
-      "integrity": "sha512-r8xlKJFcsRmn0H5jZrdORae6RX9jDBrZVvOoxF+bCQtampQJClv80aZEHsv+NsLsp2KCE5ql79O7DpPVzYWpXA==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.70.0.tgz",
+      "integrity": "sha512-WWOoV5W9Im3flVwOVrWn/2DUlOF8v5vcCip+kcNuaMpulRCh6nzzt1Su2vcL2F908YJIXNV3HvegbBHuyLwKHg==",
       "cpu": [
         "arm64"
       ],
@@ -3350,9 +3350,9 @@
       }
     },
     "node_modules/@oxfmt/binding-linux-ppc64-gnu": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-0.55.0.tgz",
-      "integrity": "sha512-GRKv/HXHcwIVld/WU61rF0g0R16hl5EJ+ScKdpjevT57lnLnagj/U2YUbXf2mT+2Pg1uCzWC+mvGicPV3CDdLQ==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-0.70.0.tgz",
+      "integrity": "sha512-YUouneIqW+5n7aE8xx/zeZ6/utr/KH7oykcGoFyd8Uz8uh591T1oKlnoWA3BsRq/ZR42oY1w4MUYvS/0e/MQOA==",
       "cpu": [
         "ppc64"
       ],
@@ -3370,9 +3370,9 @@
       }
     },
     "node_modules/@oxfmt/binding-linux-riscv64-gnu": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.55.0.tgz",
-      "integrity": "sha512-rdv57enTiPtpSYRMKfAiEbQb0Puw5t9N7isVinDoo5qeLDScro2gznmZqSgSWbVZRzLisTeCTW8Qwgw0bOHv3A==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.70.0.tgz",
+      "integrity": "sha512-iEnMf21S5aGVa4hViDGY8sAQ/AHyCu2JPyrQF8P06wtHhSkD1YJBeT4m/KiGewgf7+a5XCYSCRIPcRQa1xwEoQ==",
       "cpu": [
         "riscv64"
       ],
@@ -3390,9 +3390,9 @@
       }
     },
     "node_modules/@oxfmt/binding-linux-riscv64-musl": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-0.55.0.tgz",
-      "integrity": "sha512-7v1nNrlD43VY6+sYQ6efYyb3lE6QY182304PD/768ZxTjOmFd/3dQa3u/nGBUAXYdGSWOQc5N3PnS0QzUXyEIA==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-0.70.0.tgz",
+      "integrity": "sha512-91Sdniaj20fQzyMeCxMDzTP4c9s4RB8dGQ308xHhDR0n6U7+1Xq7N9klE7mfXq8iV3lRmIGSXi5X23Hn/0XX/g==",
       "cpu": [
         "riscv64"
       ],
@@ -3410,9 +3410,9 @@
       }
     },
     "node_modules/@oxfmt/binding-linux-s390x-gnu": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.55.0.tgz",
-      "integrity": "sha512-f4lJLUSPOgScjFl9LiflKCTocyNRwE25JmTMbN4XQdDjoZzEHjqf3wA3VESF1/csg7i8m7+EQLbrZyYDqe10UQ==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.70.0.tgz",
+      "integrity": "sha512-uUV30M6E+2TKKGMaKiwfeL4RZrviHXlUxsrYJ/jFBb+1EZy+pnFT+hF73eeWdzh5NqPOAnw0iiMAIqjqiLZPFg==",
       "cpu": [
         "s390x"
       ],
@@ -3430,9 +3430,9 @@
       }
     },
     "node_modules/@oxfmt/binding-linux-x64-gnu": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.55.0.tgz",
-      "integrity": "sha512-MihqiPziJNoWy4MqNSV+jVA1g+07iQDjZiR0vaCaDoPgFEiJpCMsxamktzLV07cEeQsSJ04vQaU4CzCQwIvtDA==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.70.0.tgz",
+      "integrity": "sha512-ivMcX6kNDPhqtbOaBt/ItFlLlTlXNHLgRuNmxP6Na6UuYXRT10llpJcAPbGeRgjjb3Qzv4jwPp3fB0hui50WNQ==",
       "cpu": [
         "x64"
       ],
@@ -3450,9 +3450,9 @@
       }
     },
     "node_modules/@oxfmt/binding-linux-x64-musl": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-x64-musl/-/binding-linux-x64-musl-0.55.0.tgz",
-      "integrity": "sha512-Yqghym7KYAVjP9MmSrNZiDeerMuoejNjo0r3ox5H3GDKk8eAfl8VyJm9i+pWCLDCTnAbcTUMMN2ZKjUYXH1v3g==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-x64-musl/-/binding-linux-x64-musl-0.70.0.tgz",
+      "integrity": "sha512-w+S+fERxYmlZSyZlJK/U292FjyBoH8cCEj21/tYJX6atX5kNSn+HDkhlFQKT2zcMwUW0uAtUL/bOrlwJZwqRdA==",
       "cpu": [
         "x64"
       ],
@@ -3470,9 +3470,9 @@
       }
     },
     "node_modules/@oxfmt/binding-openharmony-arm64": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-openharmony-arm64/-/binding-openharmony-arm64-0.55.0.tgz",
-      "integrity": "sha512-s5SDvVVSbyQl1V5UU3Yl12M+XLUQ3rl5SglNqgAA2K4PXUtQhyNSS00wivONPEnNo5W01rCou8WkDNyvI/RGHg==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-openharmony-arm64/-/binding-openharmony-arm64-0.70.0.tgz",
+      "integrity": "sha512-Zlom1Xkx257R8bk4ZI4zJsrGno2opknz1+5v5baka3nn4FPyvNSdh8JUL4CdN1S1OWRMvJ9UJQ+RfIqGGCUEfA==",
       "cpu": [
         "arm64"
       ],
@@ -3487,9 +3487,9 @@
       }
     },
     "node_modules/@oxfmt/binding-win32-arm64-msvc": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.55.0.tgz",
-      "integrity": "sha512-7p9FB5R32tw2KyyNX3wpQrR2WHwEHvMEiBlGXxeTCaRMCVNx3UtFMAUbaQ/pRNWIrEUZmYhJ6tcUH52uPTRYjQ==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.70.0.tgz",
+      "integrity": "sha512-FQgPW5R17vzt7cgrJ8eG/dqX00o2xHsqFeLfw4xzA9FRHpN/DjFo9YDonvIIXGxiEuS9F/jZPnGO+KHNKuCo4Q==",
       "cpu": [
         "arm64"
       ],
@@ -3504,9 +3504,9 @@
       }
     },
     "node_modules/@oxfmt/binding-win32-ia32-msvc": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-0.55.0.tgz",
-      "integrity": "sha512-ZYqj3fDnOT1IaVGMP5kpmkQl4F3tQIm2ZyAxvqkJYmI0xgWWak4ss4XYwv3VDfM+TWXeC9K4uQ/wW5jm/5XABA==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-0.70.0.tgz",
+      "integrity": "sha512-ZfZublNhZ+XBndMiXhkiLlPE+XyGRDa0CweeTL6t1fZypfCh1LTg7e5CvnOeTBunq15MskOcRempumSPGAaCQA==",
       "cpu": [
         "ia32"
       ],
@@ -3521,9 +3521,9 @@
       }
     },
     "node_modules/@oxfmt/binding-win32-x64-msvc": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/@oxfmt/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.55.0.tgz",
-      "integrity": "sha512-eEYT5tivGnGbPHuOHuQpi6CGLObhh0re/5jcNQHihD2GRYkTM85dyi5a19zjP8Q00t1uqAx+/QGLUGdHeqzWyg==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/@oxfmt/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.70.0.tgz",
+      "integrity": "sha512-HlIZEn+WzLQL0DszNzldiRl/DPRCX5R0Vkt6qeUPR1YHwy52hZZo4x6HoTOVmKRP2wUiwPGtKsihNY/f8KRaBg==",
       "cpu": [
         "x64"
       ],
@@ -3538,9 +3538,9 @@
       }
     },
     "node_modules/@oxlint/binding-android-arm-eabi": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm-eabi/-/binding-android-arm-eabi-1.70.0.tgz",
-      "integrity": "sha512-zFh0P4cswmRvw6nkyb89dr18rRanuaCPAsEXsFDoQY8WdaquI8Pt4NWFjaMJg6L23cy5NeN8J9cBnREbWzZhaw==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm-eabi/-/binding-android-arm-eabi-1.85.0.tgz",
+      "integrity": "sha512-q2KO/Zso9UT+OMn0NF9ywn4E4t0MI3yxiDhNyhsQ7DyQJrC4FhFE4TXOi4bktFnOWXTMds8qZSbpv2XwRaNOBg==",
       "cpu": [
         "arm"
       ],
@@ -3555,9 +3555,9 @@
       }
     },
     "node_modules/@oxlint/binding-android-arm64": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm64/-/binding-android-arm64-1.70.0.tgz",
-      "integrity": "sha512-qI8o4HZjeGiBrWv+pJv4lH0Yi2Gl/JSp/EumBUApezJprIKa5PS4nU0lQsQngtky8k+SplQIOjv6hwu0SSxeyg==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm64/-/binding-android-arm64-1.85.0.tgz",
+      "integrity": "sha512-SxLN3ALjoT9NNdvpjEevGeHvfzTAFrF0NBYB5tzK7/GtCKMze3j1e/m/X2ozqGj2U9hfGG/dg/OG8vpVK4PiDA==",
       "cpu": [
         "arm64"
       ],
@@ -3572,9 +3572,9 @@
       }
     },
     "node_modules/@oxlint/binding-darwin-arm64": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-arm64/-/binding-darwin-arm64-1.70.0.tgz",
-      "integrity": "sha512-8KjgVVHI5F9nVwHCRwwA78Ty7zNKP4Wd9OeN5PSv3iu/F/u1RVXoOCgLhWqust6HmwQG6xc8c+RCyaWENy24+w==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-arm64/-/binding-darwin-arm64-1.85.0.tgz",
+      "integrity": "sha512-Y/Sup/J4f0f9UGsSd/xyCNTeWL+gepO63GBdEDAfue9nBsnk9zMmnIXx1O6b1V8C90vB5nucYNZ0pbMXAp8zJA==",
       "cpu": [
         "arm64"
       ],
@@ -3589,9 +3589,9 @@
       }
     },
     "node_modules/@oxlint/binding-darwin-x64": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-x64/-/binding-darwin-x64-1.70.0.tgz",
-      "integrity": "sha512-WVydssv5PSUBXFJTdNBWlmGkbNmvPGaFt/2SUT/EZRB6bq6bEOHmMlbnupZD5jmlEvi9+mZJHi8TCw15lyfSfQ==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-x64/-/binding-darwin-x64-1.85.0.tgz",
+      "integrity": "sha512-ApOSNC04ynpDTwvBD+//0wyfODRSbEzvRoKpX8teffmc27z8AockwSNeMXGJXn5KP85eahDgR/2llICWLkzcnw==",
       "cpu": [
         "x64"
       ],
@@ -3606,9 +3606,9 @@
       }
     },
     "node_modules/@oxlint/binding-freebsd-x64": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-freebsd-x64/-/binding-freebsd-x64-1.70.0.tgz",
-      "integrity": "sha512-hJucmUf8OlinHNb1R7fI4Fw6WsAstOz7i8nmkWQfiHoZXtbufNm+MxiDTIMk1ggh2Ro4vLzgQ+bKvRY54MZoRA==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-freebsd-x64/-/binding-freebsd-x64-1.85.0.tgz",
+      "integrity": "sha512-bNrVrCOA/kHky3Tu79IXWXe5bhIgLXfUuUEDHlAGOHUk96MkvDZ1ecaQF19rwstrnaqfP1o9nBTqzIr9+ZHkUg==",
       "cpu": [
         "x64"
       ],
@@ -3623,9 +3623,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-arm-gnueabihf": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.70.0.tgz",
-      "integrity": "sha512-1BnS7wbCYDSXwWzJJ+mc3NURoha6m6m6RT5c6vgAY3oz7C3OVXP+S0awo2mRq97arrJkVvO3qRQfyAHL+76xtQ==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.85.0.tgz",
+      "integrity": "sha512-NUrzOJ1s/EqsVvfn2L/1D8Wro2LPIZUbihL8kOJLh5fEdGEN3rdOGUYq3HwnUIL8sjpoP+4N6RaGrgmMJnaMPw==",
       "cpu": [
         "arm"
       ],
@@ -3640,9 +3640,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-arm-musleabihf": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-1.70.0.tgz",
-      "integrity": "sha512-yKy/UdbR55+M2yEcuiV5DCNC/gdQAjr/GioUy50QwBzSrKm8ueWADqyRLS9Xk+qjNeCYGg6A8FvUBds56ttfqg==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-1.85.0.tgz",
+      "integrity": "sha512-UJXrAT3E/RWkEqXLIs2ehETja1qfgkPb+5gwLIIS+o/6cf+grHvoOXTa5997a/YNQfcJS0DRBTOfZt95cvOI1g==",
       "cpu": [
         "arm"
       ],
@@ -3657,9 +3657,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-arm64-gnu": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.70.0.tgz",
-      "integrity": "sha512-0A5XJ4alvmqFUFP/4oYSyaO+qLto/HrKEWTSaegiVl+HOufFngK2BjYw9x4RbwBt/du5QG6l5q1zeWiJYYG5yg==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.85.0.tgz",
+      "integrity": "sha512-lK40QLjI0HxigO7CjDDshEtfYIeiYS0020v5BHFPqN4uuQBQxd2K9LNom2dW15o9F1937quSCRVp4ZsVhdbYdg==",
       "cpu": [
         "arm64"
       ],
@@ -3677,9 +3677,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-arm64-musl": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.70.0.tgz",
-      "integrity": "sha512-JiylyurlB0CLSedNtx1gzv3FvfWPF1h/2Y3BJszPLNt5XQFlBsH5ke0Jle3iJb3uqu5m2e7A/DwzpuCAHdiU+A==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.85.0.tgz",
+      "integrity": "sha512-c2zbdBwGKreHXwRx3gWBuFGJxLhxgsg6YlZ+3H+RgRusU/UEV9jNwJ3HGYK+nRo0LvBa7mt6Kj86xoVotUo8cw==",
       "cpu": [
         "arm64"
       ],
@@ -3697,9 +3697,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-ppc64-gnu": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.70.0.tgz",
-      "integrity": "sha512-J8VPG7I3/HmgaU4u8pNU2kFx2+0U+vPLS1dXFxXOaR/2TQ0f8AC7DRz0SRGRI1bfphnX2hVYTTtLuhL4nYKL+Q==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.85.0.tgz",
+      "integrity": "sha512-tlt/Hy8lZ97/lCPmCgw/B3k/mwh+BzaIPbPkldZEly7TwLmx0xe2CQcaW2g/rR0dOgS9JNGCZsMEqLhUNMGvaw==",
       "cpu": [
         "ppc64"
       ],
@@ -3717,9 +3717,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-riscv64-gnu": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-1.70.0.tgz",
-      "integrity": "sha512-N2+4lV2KLN+oXTIIIwmWDhwkrnvqf5oX7Hw0zPjk+RuIVgiBQSOlJWF7uQoFx2siEYX0ZQ5cfSbEAHm+J3t7Wg==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-1.85.0.tgz",
+      "integrity": "sha512-3tNR9Xey82X0zKuY1d8hJ6Rc9gwRDurmqGLnQZa5xqOXy8/YyiqFXjAtugkKLY82obOlpK1eSiDRlgcNPuxtIg==",
       "cpu": [
         "riscv64"
       ],
@@ -3737,9 +3737,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-riscv64-musl": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-1.70.0.tgz",
-      "integrity": "sha512-1e2L7cFCvx9QDzq6NPP+0tABKb5z6nWHyddWTNKprEsjO9xNrAtPowuCGpjNXxkTdsMiZ4jc8YQ5SstZd4XK6g==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-1.85.0.tgz",
+      "integrity": "sha512-wbGRd5PqCcjkJFHhZuZ2OBSUQY9czlQsoA/cQQB9JK/L9mC5MQgGoKAh+xd8QjA5V+0D3j+Qd1lAWn1I8zlelA==",
       "cpu": [
         "riscv64"
       ],
@@ -3757,9 +3757,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-s390x-gnu": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.70.0.tgz",
-      "integrity": "sha512-Kwu/l/8GcYibCWA9m9N5pRXMIKVSsL/YbgpLzYkqDhWTiqdRfnNJ/+nqIKRKQiFbHWsdlHEhzMwruJK+qcEruA==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.85.0.tgz",
+      "integrity": "sha512-3Sn0kSrE4DPZCWV/8o+n4x3aFZxI9ulMnkYlwCbJ8eUVkwRK2IerohE/A/z3SNbCwoPFOCJmGE5Avrq0rrvdvQ==",
       "cpu": [
         "s390x"
       ],
@@ -3777,9 +3777,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-x64-gnu": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.70.0.tgz",
-      "integrity": "sha512-tap04CsHYOl0nSAQJfPNIuBxqEPB2HnhQqwaOXLg1jnp2XfRo8Fa814dA4QC4zpvTWXCjAAaCY1W5LOORkEQuQ==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.85.0.tgz",
+      "integrity": "sha512-JY2pxxYfB62bAGfejljVCqc44etItehPuAyaeSAdMuEMtwNA00ggMnS66lC1oIhos6oOXUkuU6mZ9bpFh3BqWg==",
       "cpu": [
         "x64"
       ],
@@ -3797,9 +3797,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-x64-musl": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-musl/-/binding-linux-x64-musl-1.70.0.tgz",
-      "integrity": "sha512-hzJa/WgvtJpbBD9rgfy0qe+MjbxOXNUT0bfR1S6EQQzfTtBFA9xg5q8KSwRrQ2QfSS+TaP4j+4mVPQrfNc6UNg==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-musl/-/binding-linux-x64-musl-1.85.0.tgz",
+      "integrity": "sha512-5k74vZ6qJBjBHEOlBk9B/iv68Yu0F1Afw/vvT2ar6OGCqEeXLaSjXz2n/IPCbhLG22UoKoYEJTzpYraRdcp6PA==",
       "cpu": [
         "x64"
       ],
@@ -3817,9 +3817,9 @@
       }
     },
     "node_modules/@oxlint/binding-openharmony-arm64": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-openharmony-arm64/-/binding-openharmony-arm64-1.70.0.tgz",
-      "integrity": "sha512-xbsaNSNzVSnaJACCUYr1HQMyY/Q/Q1LkePmHG3UvZPvGCYGNxrsZp9OmtA6ick8xH47ltRRbRrPCM1YXYcyC+A==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-openharmony-arm64/-/binding-openharmony-arm64-1.85.0.tgz",
+      "integrity": "sha512-GbAl5qt5TCkPLXTaIISZJnugrcBhra6rodcXc9jYt620UtdsTt71NlNmJmm0frxzFpd54x/G+MkitEJA8I/BoA==",
       "cpu": [
         "arm64"
       ],
@@ -3834,9 +3834,9 @@
       }
     },
     "node_modules/@oxlint/binding-win32-arm64-msvc": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.70.0.tgz",
-      "integrity": "sha512-icAEsUI7JbW1TMRdEXV83mVAInhRVQYuuAlPpxdGwJ95chNdnCzjloRW8GglT0WvzOEZSio6fnYSk2DJ2Hv7LQ==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.85.0.tgz",
+      "integrity": "sha512-kjmws5MK0et2swk4ND85D7NVQyDHw162i6whtZDLUA/lo6FQyBZDcmMRCMcVZcNrAhIaftVb00x9ChGDOjjNJA==",
       "cpu": [
         "arm64"
       ],
@@ -3851,9 +3851,9 @@
       }
     },
     "node_modules/@oxlint/binding-win32-ia32-msvc": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.70.0.tgz",
-      "integrity": "sha512-FHMSWbVsPVs/f+Jcl04ws4JJ2wUnauyTzlpxWRG/lSO/8GpX08Fo2gQZqdA6CrRFI+zvkxl+N/KwJGWfUwYVZA==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.85.0.tgz",
+      "integrity": "sha512-eSsIJx9n4yxvOqYTZyPEMyEXRmE60XH7xGAU7i0Qbsn1lf6Za3CWJ9aRd82oSFKXaxhp+sA6/yMJVRIpLpna6A==",
       "cpu": [
         "ia32"
       ],
@@ -3868,9 +3868,9 @@
       }
     },
     "node_modules/@oxlint/binding-win32-x64-msvc": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.70.0.tgz",
-      "integrity": "sha512-ptOlKwCz7n4AKs5VweMqG6DAg677FmKOK+vBkkL9DMNgFATIQ+upqUYBTOEwRQyRAx1ncGlPlXleV2hIcm3z4g==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.85.0.tgz",
+      "integrity": "sha512-pBebIPUpKKhWrhSMWhy8TdAZBewiXnfxmaAGxhzxM1068GagqFaTwgKlU6e+UyJ2sPR+VoHouhXuGJkQjsrDvA==",
       "cpu": [
         "x64"
       ],
@@ -9352,13 +9352,13 @@
       }
     },
     "node_modules/oxfmt": {
-      "version": "0.55.0",
-      "resolved": "https://registry.npmjs.org/oxfmt/-/oxfmt-0.55.0.tgz",
-      "integrity": "sha512-jSj2wCTakwgPMxkfiVZX0jf+nX+Nz6xlyAZjqNE0qXTFdCBPYlP6JAN+ODjmealw7DXBjOzYbdsqwBMAZnPZ6A==",
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/oxfmt/-/oxfmt-0.70.0.tgz",
+      "integrity": "sha512-IsHxZ4y0wQLLMhnrJblBJgZsLDzfULrJnAw5j/QqsTlMa/m3AqsbToi+W71uhBGaqlqq/PbbjvHc09TJwdv3Tw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "tinypool": "2.1.0"
+        "tinypool": "2.1.2"
       },
       "bin": {
         "oxfmt": "bin/oxfmt"
@@ -9367,28 +9367,28 @@
         "node": "^20.19.0 || >=22.12.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/Boshen"
+        "url": "https://github.com/sponsors/oxc-project"
       },
       "optionalDependencies": {
-        "@oxfmt/binding-android-arm-eabi": "0.55.0",
-        "@oxfmt/binding-android-arm64": "0.55.0",
-        "@oxfmt/binding-darwin-arm64": "0.55.0",
-        "@oxfmt/binding-darwin-x64": "0.55.0",
-        "@oxfmt/binding-freebsd-x64": "0.55.0",
-        "@oxfmt/binding-linux-arm-gnueabihf": "0.55.0",
-        "@oxfmt/binding-linux-arm-musleabihf": "0.55.0",
-        "@oxfmt/binding-linux-arm64-gnu": "0.55.0",
-        "@oxfmt/binding-linux-arm64-musl": "0.55.0",
-        "@oxfmt/binding-linux-ppc64-gnu": "0.55.0",
-        "@oxfmt/binding-linux-riscv64-gnu": "0.55.0",
-        "@oxfmt/binding-linux-riscv64-musl": "0.55.0",
-        "@oxfmt/binding-linux-s390x-gnu": "0.55.0",
-        "@oxfmt/binding-linux-x64-gnu": "0.55.0",
-        "@oxfmt/binding-linux-x64-musl": "0.55.0",
-        "@oxfmt/binding-openharmony-arm64": "0.55.0",
-        "@oxfmt/binding-win32-arm64-msvc": "0.55.0",
-        "@oxfmt/binding-win32-ia32-msvc": "0.55.0",
-        "@oxfmt/binding-win32-x64-msvc": "0.55.0"
+        "@oxfmt/binding-android-arm-eabi": "0.70.0",
+        "@oxfmt/binding-android-arm64": "0.70.0",
+        "@oxfmt/binding-darwin-arm64": "0.70.0",
+        "@oxfmt/binding-darwin-x64": "0.70.0",
+        "@oxfmt/binding-freebsd-x64": "0.70.0",
+        "@oxfmt/binding-linux-arm-gnueabihf": "0.70.0",
+        "@oxfmt/binding-linux-arm-musleabihf": "0.70.0",
+        "@oxfmt/binding-linux-arm64-gnu": "0.70.0",
+        "@oxfmt/binding-linux-arm64-musl": "0.70.0",
+        "@oxfmt/binding-linux-ppc64-gnu": "0.70.0",
+        "@oxfmt/binding-linux-riscv64-gnu": "0.70.0",
+        "@oxfmt/binding-linux-riscv64-musl": "0.70.0",
+        "@oxfmt/binding-linux-s390x-gnu": "0.70.0",
+        "@oxfmt/binding-linux-x64-gnu": "0.70.0",
+        "@oxfmt/binding-linux-x64-musl": "0.70.0",
+        "@oxfmt/binding-openharmony-arm64": "0.70.0",
+        "@oxfmt/binding-win32-arm64-msvc": "0.70.0",
+        "@oxfmt/binding-win32-ia32-msvc": "0.70.0",
+        "@oxfmt/binding-win32-x64-msvc": "0.70.0"
       },
       "peerDependencies": {
         "svelte": "^5.0.0",
@@ -9404,9 +9404,9 @@
       }
     },
     "node_modules/oxlint": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/oxlint/-/oxlint-1.70.0.tgz",
-      "integrity": "sha512-D6JgHtzkhRwvEC+A0Nw5AEc5bk8x5i1pHzvZIEf/a0C4hOzmAACNGtkDGPyFaxxX3ZVGxCPeig3P3rMM8XU3/g==",
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/oxlint/-/oxlint-1.85.0.tgz",
+      "integrity": "sha512-bc26s97nuvPj1ViyPsqmKecVkUWFMEdtayO8MaQ6oiLfs1pj94cQlZZhrh4BPNlr9HQosjhIlwgZKsfcwmcNgg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -9416,31 +9416,31 @@
         "node": "^20.19.0 || >=22.12.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/Boshen"
+        "url": "https://github.com/sponsors/oxc-project"
       },
       "optionalDependencies": {
-        "@oxlint/binding-android-arm-eabi": "1.70.0",
-        "@oxlint/binding-android-arm64": "1.70.0",
-        "@oxlint/binding-darwin-arm64": "1.70.0",
-        "@oxlint/binding-darwin-x64": "1.70.0",
-        "@oxlint/binding-freebsd-x64": "1.70.0",
-        "@oxlint/binding-linux-arm-gnueabihf": "1.70.0",
-        "@oxlint/binding-linux-arm-musleabihf": "1.70.0",
-        "@oxlint/binding-linux-arm64-gnu": "1.70.0",
-        "@oxlint/binding-linux-arm64-musl": "1.70.0",
-        "@oxlint/binding-linux-ppc64-gnu": "1.70.0",
-        "@oxlint/binding-linux-riscv64-gnu": "1.70.0",
-        "@oxlint/binding-linux-riscv64-musl": "1.70.0",
-        "@oxlint/binding-linux-s390x-gnu": "1.70.0",
-        "@oxlint/binding-linux-x64-gnu": "1.70.0",
-        "@oxlint/binding-linux-x64-musl": "1.70.0",
-        "@oxlint/binding-openharmony-arm64": "1.70.0",
-        "@oxlint/binding-win32-arm64-msvc": "1.70.0",
-        "@oxlint/binding-win32-ia32-msvc": "1.70.0",
-        "@oxlint/binding-win32-x64-msvc": "1.70.0"
+        "@oxlint/binding-android-arm-eabi": "1.85.0",
+        "@oxlint/binding-android-arm64": "1.85.0",
+        "@oxlint/binding-darwin-arm64": "1.85.0",
+        "@oxlint/binding-darwin-x64": "1.85.0",
+        "@oxlint/binding-freebsd-x64": "1.85.0",
+        "@oxlint/binding-linux-arm-gnueabihf": "1.85.0",
+        "@oxlint/binding-linux-arm-musleabihf": "1.85.0",
+        "@oxlint/binding-linux-arm64-gnu": "1.85.0",
+        "@oxlint/binding-linux-arm64-musl": "1.85.0",
+        "@oxlint/binding-linux-ppc64-gnu": "1.85.0",
+        "@oxlint/binding-linux-riscv64-gnu": "1.85.0",
+        "@oxlint/binding-linux-riscv64-musl": "1.85.0",
+        "@oxlint/binding-linux-s390x-gnu": "1.85.0",
+        "@oxlint/binding-linux-x64-gnu": "1.85.0",
+        "@oxlint/binding-linux-x64-musl": "1.85.0",
+        "@oxlint/binding-openharmony-arm64": "1.85.0",
+        "@oxlint/binding-win32-arm64-msvc": "1.85.0",
+        "@oxlint/binding-win32-ia32-msvc": "1.85.0",
+        "@oxlint/binding-win32-x64-msvc": "1.85.0"
       },
       "peerDependencies": {
-        "oxlint-tsgolint": ">=0.22.1",
+        "oxlint-tsgolint": ">=7.0.2001",
         "vite-plus": "*"
       },
       "peerDependenciesMeta": {
@@ -10874,9 +10874,9 @@
       }
     },
     "node_modules/tinypool": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-2.1.0.tgz",
-      "integrity": "sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-2.1.2.tgz",
+      "integrity": "sha512-9YodfrxS9g9IbFr/KOjE5bAeJ0p61n3bW6mqvy0jtoeKd1kTW1Cxm0oulm6KX2lyM9Gl6WIe8nEbY7LWv5ZJww==",
       "dev": true,
       "license": "MIT",
       "engines": {
diff --git a/package.json b/package.json
index dc60e9da..325e24cc 100644
--- a/package.json
+++ b/package.json
@@ -47,8 +47,8 @@
     "concurrently": "^10.0.3",
     "cross-env": "^7.0.3",
     "jsdom": "^26.1.0",
-    "oxfmt": "0.55.0",
-    "oxlint": "1.70.0",
+    "oxfmt": "0.70.0",
+    "oxlint": "1.85.0",
     "oxlint-plugin-react-doctor": "0.9.12",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
diff --git a/plugin-system/src/components/DatasourceSelect/DatasourceSelect.tsx b/plugin-system/src/components/DatasourceSelect/DatasourceSelect.tsx
index fafe4249..7df6562c 100644
--- a/plugin-system/src/components/DatasourceSelect/DatasourceSelect.tsx
+++ b/plugin-system/src/components/DatasourceSelect/DatasourceSelect.tsx
@@ -124,7 +124,6 @@ export function DatasourceSelect(props: DatasourceSelectProps): ReactElement {
   // We use a fake action event when we click on the action of the chip (hijack the "delete" feature).
   // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property
   // controls its visibility.
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   const fakeActionEvent = (): void => {};
 
   return (
diff --git a/plugin-system/src/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.test.tsx b/plugin-system/src/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.test.tsx
index 55b52613..b9a5244d 100644
--- a/plugin-system/src/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.test.tsx
+++ b/plugin-system/src/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.test.tsx
@@ -81,6 +81,22 @@ describe('DatasourceTestConnectionButton', () => {
     });
   });
 
+  it('reports synchronous failures and re-enables the button', async () => {
+    const error = new Error('connection setup failed');
+    const testConnection = vi.fn(() => {
+      throw error;
+    });
+    render(<DatasourceTestConnectionButton testConnection={testConnection} />);
+    const button = screen.getByRole('button', { name: /test connection/i });
+
+    await userEvent.click(button);
+
+    await waitFor(() => {
+      expect(mockExceptionSnackbar).toHaveBeenCalledWith(error);
+      expect(button).not.toBeDisabled();
+    });
+  });
+
   it('respects the disabled prop', () => {
     render(<DatasourceTestConnectionButton testConnection={vi.fn()} disabled />);
     expect(screen.getByRole('button', { name: /test connection/i })).toBeDisabled();
diff --git a/plugin-system/src/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.tsx b/plugin-system/src/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.tsx
index ef97e46b..dc5d57da 100644
--- a/plugin-system/src/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.tsx
+++ b/plugin-system/src/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.tsx
@@ -31,14 +31,13 @@ export const DatasourceTestConnectionButton = ({
 
   const handleClick = useCallback(async (): Promise<void> => {
     setIsTesting(true);
-    try {
-      await testConnection();
-      successSnackbar('Datasource is healthy');
-    } catch (e) {
-      exceptionSnackbar(e instanceof Error ? e : new Error('Datasource is not healthy'));
-    } finally {
-      setIsTesting(false);
-    }
+    await Promise.resolve()
+      .then(() => testConnection())
+      .then(() => successSnackbar('Datasource is healthy'))
+      .catch((e: unknown) => {
+        exceptionSnackbar(e instanceof Error ? e : new Error('Datasource is not healthy'));
+      })
+      .finally(() => setIsTesting(false));
   }, [testConnection, successSnackbar, exceptionSnackbar]);
 
   return (
diff --git a/plugin-system/src/components/HTTPSettingsEditor/HTTPSettingsEditor.test.tsx b/plugin-system/src/components/HTTPSettingsEditor/HTTPSettingsEditor.test.tsx
index f7aec753..9c761c64 100644
--- a/plugin-system/src/components/HTTPSettingsEditor/HTTPSettingsEditor.test.tsx
+++ b/plugin-system/src/components/HTTPSettingsEditor/HTTPSettingsEditor.test.tsx
@@ -63,6 +63,14 @@ describe('HTTPSettingsEditor - Request Headers', () => {
     return render(<Wrapper />);
   };
 
+  it('initializes proxy settings without mutating the input', () => {
+    const value = Object.freeze({});
+    const onChange = vi.fn();
+    renderComponent(value, onChange);
+    expect(value).toEqual({});
+    expect(onChange).toHaveBeenCalledWith(initialSpecProxy);
+  });
+
   describe('Adding headers', () => {
     it('should add a new empty header when clicking the add button', async () => {
       const onChange = vi.fn();
diff --git a/plugin-system/src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx b/plugin-system/src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx
index c2971b82..a1ec9f03 100644
--- a/plugin-system/src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx
+++ b/plugin-system/src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx
@@ -18,8 +18,8 @@ import { produce } from 'immer';
 import MinusIcon from 'mdi-material-ui/Minus';
 import PlusIcon from 'mdi-material-ui/Plus';
 import type { ReactElement } from 'react';
-import React, { Fragment, useCallback, useState } from 'react';
-import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { Controller, useFieldArray, useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 
 import { DatasourceTestConnectionButton } from '../DatasourceTestConnectionButton';
@@ -48,14 +48,20 @@ export interface HTTPSettingsEditor {
 
 /** Edits direct URLs and proxy settings, including mutually exclusive allow/drop request header lists. */
 export function HTTPSettingsEditor(props: HTTPSettingsEditor): ReactElement {
-  const { value, onChange, isReadonly, initialSpecDirect, initialSpecProxy, testConnection } = props;
+  const { value: providedValue, onChange, isReadonly, initialSpecDirect, initialSpecProxy, testConnection } = props;
   const strDirect = 'Direct access';
   const strProxy = 'Proxy';
 
-  // Initialize Proxy mode by default, if neither direct nor proxy mode is selected.
-  if (value.directUrl === undefined && value.proxy === undefined) {
-    Object.assign(value, initialSpecProxy);
-  }
+  // Initialize proxy mode without mutating the caller's datasource definition.
+  const value = useMemo(() => {
+    if (providedValue.directUrl === undefined && providedValue.proxy === undefined) {
+      return { ...providedValue, ...initialSpecProxy };
+    }
+    return providedValue;
+  }, [providedValue, initialSpecProxy]);
+  useEffect(() => {
+    if (value !== providedValue) onChange(value);
+  }, [value, providedValue, onChange]);
 
   // Use local state to maintain an array of header entries during editing, instead of
   // manipulating a map directly which causes weird UX.
@@ -74,7 +80,7 @@ export function HTTPSettingsEditor(props: HTTPSettingsEditor): ReactElement {
   });
 
   // Watch the headers array for changes to detect duplicates
-  const watchedHeaders = headersForm.watch('headers');
+  const watchedHeaders = useWatch({ control: headersForm.control, name: 'headers' });
 
   // Check for duplicate header names
   // TODO: duplication detection logic to be replaced by proper zod schema validation in the future
@@ -509,15 +515,13 @@ export function HTTPSettingsEditor(props: HTTPSettingsEditor): ReactElement {
       setPreviousSpecProxy(value);
 
       // Copy all settings (for example, scrapeInterval), except 'proxy'
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { proxy, ...newValue } = value;
+      const { proxy: _proxy, ...newValue } = value;
       onChange({ ...newValue, directUrl: previousSpecDirect.directUrl });
     } else if (tabs[v]?.label === strProxy) {
       setPreviousSpecDirect(value);
 
       // Copy all settings (for example, scrapeInterval), except 'directUrl'
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { directUrl, ...newValue } = value;
+      const { directUrl: _directUrl, ...newValue } = value;
       onChange({ ...newValue, proxy: previousSpecProxy.proxy });
     }
   };
diff --git a/plugin-system/src/components/LayoutEditor/LayoutEditor.test.tsx b/plugin-system/src/components/LayoutEditor/LayoutEditor.test.tsx
index 12549e99..2469ee2f 100644
--- a/plugin-system/src/components/LayoutEditor/LayoutEditor.test.tsx
+++ b/plugin-system/src/components/LayoutEditor/LayoutEditor.test.tsx
@@ -14,7 +14,8 @@
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { ReactElement } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { useEffect } from 'react';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
 
 import type { PanelEditorValues } from '../../model';
 import { VariableContext } from '../../runtime';
@@ -107,7 +108,10 @@ describe('LayoutEditor', () => {
     let capturedGroupId: number | undefined;
     const Component = (): ReactElement => {
       const form = useForm<PanelEditorValues>({ defaultValues: { groupId: 1 } });
-      capturedGroupId = form.watch('groupId');
+      const groupId = useWatch({ control: form.control, name: 'groupId' });
+      useEffect(() => {
+        capturedGroupId = groupId;
+      }, [groupId]);
       return (
         <FormProvider {...form}>
           <VariableContext.Provider value={{ state: {} }}>
diff --git a/plugin-system/src/components/PluginEditor/PluginEditor.test.tsx b/plugin-system/src/components/PluginEditor/PluginEditor.test.tsx
index 03966471..4df84518 100644
--- a/plugin-system/src/components/PluginEditor/PluginEditor.test.tsx
+++ b/plugin-system/src/components/PluginEditor/PluginEditor.test.tsx
@@ -14,7 +14,7 @@
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { ReactElement } from 'react';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import type { MockedFunction } from 'vitest';
 
 import type { DefaultPluginKinds, PluginType } from '../../model';
@@ -41,13 +41,16 @@ describe('PluginEditor', () => {
     };
 
     // A test helper component that includes the state that's controlled from outside
-    let onChange: MockedFunction<PluginEditorProps['onChange']> = vi.fn();
+    const onChange: MockedFunction<PluginEditorProps['onChange']> = vi.fn();
     function TestHelperForm(): ReactElement {
       const [value, setValue] = useState(testValue);
-      onChange = vi.fn((v) => setValue(v));
+      const handleChange = useCallback((next: PluginEditorProps['value']): void => {
+        onChange(next);
+        setValue(next);
+      }, []);
 
       return (
-        <PluginEditor pluginTypes={pluginTypes} pluginKindLabel="Variable Type" value={value} onChange={onChange} />
+        <PluginEditor pluginTypes={pluginTypes} pluginKindLabel="Variable Type" value={value} onChange={handleChange} />
       );
     }
 
@@ -116,6 +119,11 @@ describe('PluginEditor', () => {
     // Make sure the editor from the first plugin appears and has our modified value from before the switch
     editor = await screen.findByLabelText('ErnieVariable editor');
     expect(editor).toHaveValue('MyNewValue');
+
+    // The completed request must not reactivate when another cached kind is selected.
+    await openPluginKind();
+    userEvent.click(screen.getByRole('option', { name: 'Ernie Variable 2' }));
+    expect(await screen.findByLabelText('ErnieVariable2 editor')).toHaveValue('');
   });
 
   describe('when defaultPluginKinds specified in plugin registry', () => {
@@ -126,7 +134,7 @@ describe('PluginEditor', () => {
           TimeSeriesQuery: 'PrometheusTimeSeriesQuery',
           Variable: 'ErnieVariable1',
         },
-        value: { selection: { type: 'Variable', kind: '' }, spec: {} },
+        value: Object.freeze({ selection: Object.freeze({ type: 'Variable', kind: '' }), spec: {} }),
       });
 
       // Wait for default panel kind to load.
diff --git a/plugin-system/src/components/PluginEditor/plugin-editor-api.test.tsx b/plugin-system/src/components/PluginEditor/plugin-editor-api.test.tsx
new file mode 100644
index 00000000..a3357177
--- /dev/null
+++ b/plugin-system/src/components/PluginEditor/plugin-editor-api.test.tsx
@@ -0,0 +1,154 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { RenderHookResult } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { StrictMode, useState } from 'react';
+import type { Mock } from 'vitest';
+
+import { PluginRegistryContext } from '../../runtime';
+import type { PluginEditorSelection, PluginEditorValue } from './plugin-editor-api';
+import { usePluginEditor } from './plugin-editor-api';
+
+function deferred<T>(): { promise: Promise<T>; resolve: (value: T) => void } {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((complete) => {
+    resolve = complete;
+  });
+  return { promise, resolve };
+}
+
+function setup(): RenderHookResult<ReturnType<typeof usePluginEditor> & { value: PluginEditorValue }, unknown> & {
+  getPlugin: Mock;
+  onChange: Mock;
+  createInitialOptions: Mock;
+} {
+  const createInitialOptions = vi.fn(() => ({ initialized: true }));
+  const getPlugin = vi.fn().mockResolvedValue({ createInitialOptions });
+  const onChange = vi.fn();
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  function Wrapper({ children }: { children: ReactNode }): ReactNode {
+    const [registry] = useState(() => ({ getPlugin, listPluginMetadata: vi.fn() }));
+    return (
+      <StrictMode>
+        <QueryClientProvider client={queryClient}>
+          <PluginRegistryContext.Provider value={registry}>{children}</PluginRegistryContext.Provider>
+        </QueryClientProvider>
+      </StrictMode>
+    );
+  }
+  const hook = renderHook(
+    () => {
+      const [value, setValue] = useState<PluginEditorValue>({
+        selection: { type: 'Variable', kind: 'Initial' },
+        spec: { original: true },
+      });
+      const editor = usePluginEditor({
+        pluginTypes: ['Variable'],
+        // Match form callers that rebuild value and omit metadata on every render.
+        value: { selection: { type: value.selection.type, kind: value.selection.kind }, spec: value.spec },
+        onChange: (next) => {
+          onChange(next);
+          // Fail boundedly instead of hanging if the repeated-update regression returns.
+          if (onChange.mock.calls.length > 10) throw new Error('Repeated plugin initialization');
+          setValue({ selection: { type: next.selection.type, kind: next.selection.kind }, spec: next.spec });
+        },
+      });
+      return { ...editor, value };
+    },
+    { wrapper: Wrapper },
+  );
+  return { ...hook, getPlugin, onChange, createInitialOptions };
+}
+
+it.each([{ version: '1.0.0' }, { registry: 'corp' }, { version: '1.0.0', registry: 'corp' }])(
+  'completes a selection once when the owner drops metadata %j',
+  async (metadata) => {
+    const { result, rerender, getPlugin, onChange, createInitialOptions } = setup();
+    const selection: PluginEditorSelection = { type: 'Variable', kind: 'Selected', metadata };
+    act(() => result.current.onSelectionChange(selection));
+    await waitFor(() => expect(result.current.value.spec).toEqual({ initialized: true }));
+    expect(result.current.pendingSelection).toBeUndefined();
+    expect(result.current.isLoading).toBe(false);
+    expect(getPlugin).toHaveBeenCalledWith({ kind: 'Variable', name: 'Selected', ...metadata });
+    expect(onChange).toHaveBeenCalledExactlyOnceWith({ selection, spec: { initialized: true } });
+
+    rerender();
+    act(() => result.current.onSpecChange({ edited: true }));
+    rerender();
+    expect(result.current.value.spec).toEqual({ edited: true });
+    expect(createInitialOptions).toHaveBeenCalledTimes(1);
+
+    act(() => result.current.onSelectionChange({ type: 'Variable', kind: 'Initial' }));
+    expect(result.current.value.spec).toEqual({ original: true });
+    act(() => result.current.onSelectionChange(selection));
+    expect(result.current.value.spec).toEqual({ edited: true });
+    expect(result.current.pendingSelection).toBeUndefined();
+    expect(createInitialOptions).toHaveBeenCalledTimes(1);
+  },
+);
+
+it('ignores an older plugin load after a newer selection completes', async () => {
+  const { result, getPlugin, onChange } = setup();
+  const older = deferred<{ createInitialOptions: () => { source: string } }>();
+  const newer = deferred<{ createInitialOptions: () => { source: string } }>();
+  getPlugin.mockReturnValueOnce(older.promise).mockReturnValueOnce(newer.promise);
+  act(() => result.current.onSelectionChange({ type: 'Variable', kind: 'Older' }));
+  await waitFor(() => expect(getPlugin).toHaveBeenCalledTimes(1));
+  act(() => result.current.onSelectionChange({ type: 'Variable', kind: 'Newer' }));
+  await waitFor(() => expect(getPlugin).toHaveBeenCalledTimes(2));
+  await act(async () => newer.resolve({ createInitialOptions: () => ({ source: 'newer' }) }));
+  await waitFor(() => expect(result.current.value.spec).toEqual({ source: 'newer' }));
+  await act(async () => older.resolve({ createInitialOptions: () => ({ source: 'older' }) }));
+  expect(result.current.value.spec).toEqual({ source: 'newer' });
+  expect(onChange).toHaveBeenCalledTimes(1);
+});
+
+it.each(['cached selection', 'unmount'])('ignores a pending load after %s', async (action) => {
+  const { result, getPlugin, onChange, unmount } = setup();
+  const pending = deferred<{ createInitialOptions: () => { initialized: boolean } }>();
+  getPlugin.mockReturnValueOnce(pending.promise);
+  act(() => result.current.onSelectionChange({ type: 'Variable', kind: 'Selected' }));
+  await waitFor(() => expect(getPlugin).toHaveBeenCalledTimes(1));
+  if (action === 'unmount') {
+    unmount();
+  } else {
+    act(() => result.current.onSelectionChange({ type: 'Variable', kind: 'Initial' }));
+    expect(result.current.pendingSelection).toBeUndefined();
+    expect(result.current.isLoading).toBe(false);
+  }
+  onChange.mockClear();
+  await act(async () => pending.resolve({ createInitialOptions: () => ({ initialized: true }) }));
+  expect(onChange).not.toHaveBeenCalled();
+});
+
+it('does not apply an old load to a new request after returning to a cached selection', async () => {
+  const { result, getPlugin, onChange } = setup();
+  const older = deferred<{ createInitialOptions: () => { source: string } }>();
+  const newer = deferred<{ createInitialOptions: () => { source: string } }>();
+  getPlugin.mockReturnValueOnce(older.promise).mockReturnValueOnce(newer.promise);
+  act(() => result.current.onSelectionChange({ type: 'Variable', kind: 'Older' }));
+  await waitFor(() => expect(getPlugin).toHaveBeenCalledTimes(1));
+  act(() => result.current.onSelectionChange({ type: 'Variable', kind: 'Initial' }));
+  act(() => result.current.onSelectionChange({ type: 'Variable', kind: 'Newer' }));
+  await waitFor(() => expect(getPlugin).toHaveBeenCalledTimes(2));
+  onChange.mockClear();
+  await act(async () => older.resolve({ createInitialOptions: () => ({ source: 'older' }) }));
+  expect(onChange).not.toHaveBeenCalled();
+  expect(result.current.isLoading).toBe(true);
+  await act(async () => newer.resolve({ createInitialOptions: () => ({ source: 'newer' }) }));
+  await waitFor(() => expect(result.current.value.spec).toEqual({ source: 'newer' }));
+  expect(onChange).toHaveBeenCalledTimes(1);
+});
diff --git a/plugin-system/src/components/PluginEditor/plugin-editor-api.ts b/plugin-system/src/components/PluginEditor/plugin-editor-api.ts
index 496451fb..68b572ed 100644
--- a/plugin-system/src/components/PluginEditor/plugin-editor-api.ts
+++ b/plugin-system/src/components/PluginEditor/plugin-editor-api.ts
@@ -13,11 +13,12 @@
 
 import type { BoxProps } from '@mui/material';
 import type { DatasourceSpec, PluginDefinitionMetadata, UnknownSpec } from '@perses-dev/spec';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { produce } from 'immer';
-import { useState, useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 
-import type { PanelPlugin, PluginType } from '../../model';
-import { usePlugin, usePluginRegistry } from '../../runtime';
+import type { PanelPlugin, PluginType, PluginImplementation } from '../../model';
+import { usePluginRegistry } from '../../runtime';
 import { useEvent } from '../../utils';
 import type { PluginKindSelectProps } from '../PluginKindSelect';
 import type { PluginSpecEditorProps } from '../PluginSpecEditor';
@@ -82,7 +83,6 @@ export function usePluginEditor(props: UsePluginEditorProps): {
   onSpecChange: (next: UnknownSpec) => void;
   rememberCurrentSpecState: () => void;
 } {
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   const { pluginTypes, value, onHideQueryEditorChange = (): void => {} } = props; // setting onHideQueryEditorChange to empty function here because useEvent requires a function
 
   // Keep a stable reference, so we don't run the effect below when we don't need to
@@ -107,72 +107,60 @@ export function usePluginEditor(props: UsePluginEditorProps): {
     [value.selection.kind]: false,
   });
 
-  const { defaultPluginKinds } = usePluginRegistry();
+  const { defaultPluginKinds, getPlugin } = usePluginRegistry();
+  const queryClient = useQueryClient();
+  const currentRequest = useRef<PluginEditorSelection | undefined>(undefined);
+  const selectionLoad = useMutation<PluginImplementation<PluginType>, Error, PluginEditorSelection>({
+    mutationFn: (selection) =>
+      queryClient.fetchQuery({
+        queryKey: [
+          'getPlugin',
+          selection.type,
+          selection.kind,
+          selection.metadata?.version ?? '',
+          selection.metadata?.registry ?? '',
+        ],
+        queryFn: () =>
+          getPlugin({
+            kind: selection.type,
+            name: selection.kind,
+            version: selection.metadata?.version,
+            registry: selection.metadata?.registry,
+          }),
+      }),
+  });
+  const pendingSelection = selectionLoad.isSuccess ? undefined : selectionLoad.variables;
   const defaultPluginType = pluginTypes[0];
   const defaultPluginKind = defaultPluginType ? defaultPluginKinds?.[defaultPluginType] : undefined;
-  const defaultPluginSelection =
-    defaultPluginType && defaultPluginKind
-      ? {
-          type: defaultPluginType,
-          kind: defaultPluginKind,
-        }
-      : undefined;
-  const initPendingSelection = !value.selection && defaultPluginSelection ? defaultPluginSelection : undefined;
-
-  // When kind changes and we haven't loaded that plugin before, we will need to enter a "pending" state so that we
-  // can generate proper initial spec values that match the new plugin kind
-  const [pendingSelection, setPendingSelection] = useState<PluginEditorSelection | undefined>(initPendingSelection);
 
-  // Take a default kind in case user write explicitly an empty kind in the initial value
+  // Notify the owner instead of mutating the selection passed by the caller.
   useEffect(() => {
-    if (value.selection.kind === '') {
-      value.selection.kind = defaultPluginKind || '';
+    if (value.selection.kind === '' && defaultPluginKind) {
+      onChange({ ...value, selection: { ...value.selection, kind: defaultPluginKind } });
     }
-  }, [value.selection, defaultPluginKind]);
-
-  // Load the pending plugin honoring the pinned version/registry, so the initial options come from the exact
-  // implementation the definition will use rather than from the latest one.
-  const {
-    data: plugin,
-    isFetching,
-    error,
-  } = usePlugin(pendingSelection?.type, pendingSelection?.kind || '', {
-    version: pendingSelection?.metadata?.version,
-    registry: pendingSelection?.metadata?.registry,
-  });
+  }, [value, defaultPluginKind, onChange]);
+
+  // Apply each completed load once, independently of how the owner stores the selection metadata.
+  const applyLoadedSelection = useEvent(
+    (plugin: PluginImplementation<PluginType> | undefined, selection: PluginEditorSelection) => {
+      // v4 `reset()` still observes the in-flight load, which then reports the current (empty or newer) result.
+      if (!plugin || selection !== currentRequest.current) return;
+      currentRequest.current = undefined;
+      rememberCurrentSpecState();
+      onChange({
+        selection,
+        spec: plugin.createInitialOptions ? plugin.createInitialOptions() : {},
+      });
 
-  useEffect(() => {
-    // Nothing to do if no new plugin kind is pending
-    if (!pendingSelection) return;
-
-    // Can't get spec value until we have a plugin
-    if (plugin === undefined || isFetching) return;
-
-    // Fire an onChange to change to the pending kind with initial values from the plugin
-    rememberCurrentSpecState();
-    onChange({
-      selection: pendingSelection,
-      spec: plugin.createInitialOptions ? plugin.createInitialOptions() : {},
-    });
-
-    if (pendingSelection.type === 'Panel') {
-      const panelPlugin = plugin as PanelPlugin;
-      hideQueryState.current[pendingSelection.kind] = !!panelPlugin.hideQueryEditor;
-      if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.selection.kind]) {
-        onHideQuery(!!panelPlugin.hideQueryEditor);
+      if (selection.type === 'Panel') {
+        const panelPlugin = plugin as PanelPlugin;
+        hideQueryState.current[selection.kind] = !!panelPlugin.hideQueryEditor;
+        if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.selection.kind]) {
+          onHideQuery(!!panelPlugin.hideQueryEditor);
+        }
       }
-    }
-    setPendingSelection(undefined);
-  }, [
-    pendingSelection,
-    plugin,
-    isFetching,
-    rememberCurrentSpecState,
-    onChange,
-    onHideQuery,
-    hideQueryState,
-    value.selection,
-  ]);
+    },
+  );
 
   /**
    * When the user tries to change the plugin kind, make sure we have the correct spec for that plugin kind before we
@@ -182,6 +170,8 @@ export function usePluginEditor(props: UsePluginEditorProps): {
     // If we already have state for this plugin type/kind from a previous selection, just use it
     const previousState = prevSpecState.current[nextSelection.type]?.[nextSelection.kind];
     if (previousState !== undefined) {
+      currentRequest.current = undefined;
+      selectionLoad.reset();
       rememberCurrentSpecState();
       onChange({
         selection: nextSelection,
@@ -189,7 +179,9 @@ export function usePluginEditor(props: UsePluginEditorProps): {
       });
     } else {
       // Otherwise, kick off the async loading process
-      setPendingSelection(nextSelection);
+      // Per-call callbacks run only for the latest mutation while the editor is mounted.
+      currentRequest.current = nextSelection;
+      selectionLoad.mutate(nextSelection, { onSuccess: applyLoadedSelection });
     }
 
     if (
@@ -214,8 +206,8 @@ export function usePluginEditor(props: UsePluginEditorProps): {
 
   return {
     pendingSelection,
-    isLoading: isFetching,
-    error,
+    isLoading: selectionLoad.isLoading,
+    error: selectionLoad.error,
     onSelectionChange,
     onSpecChange,
     rememberCurrentSpecState,
diff --git a/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx b/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx
index 75aa28e6..592736e3 100644
--- a/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx
+++ b/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx
@@ -24,9 +24,7 @@ import {
 import type { AbsoluteTimeRange, DurationString, RelativeTimeRange } from '@perses-dev/spec';
 import { parseDurationString } from '@perses-dev/spec';
 import { milliseconds } from 'date-fns';
-// eslint-disable-next-line import/no-duplicates
 import ZoomOut from 'mdi-material-ui/MinusCircleOutline';
-// eslint-disable-next-line import/no-duplicates
 import ZoomIn from 'mdi-material-ui/PlusCircleOutline';
 import RefreshIcon from 'mdi-material-ui/Refresh';
 import type { ReactElement } from 'react';
diff --git a/plugin-system/src/components/Variables/VariableEditorForm/VariablePreview.tsx b/plugin-system/src/components/Variables/VariableEditorForm/VariablePreview.tsx
index 3999a95b..77276e7f 100644
--- a/plugin-system/src/components/Variables/VariableEditorForm/VariablePreview.tsx
+++ b/plugin-system/src/components/Variables/VariableEditorForm/VariablePreview.tsx
@@ -102,7 +102,7 @@ export function VariableListPreview(props: VariableListPreviewProps): ReactEleme
   const { data, isFetching, error } = useListVariablePluginValues(definition);
   const errorMessage = (error as Error)?.message;
 
-  // oxlint-disable-next-line unicorn/no-array-sort Calling sort of object, not the built-in array sort function
+  // oxlint-disable-next-line unicorn/no-array-sort -- Calling sort of object, not the built-in array sort function
   const result = !sortMethod || sortMethod === 'none' || !data ? data : SORT_METHODS[sortMethod].sort(data);
 
   const variablePreview = useMemo(
diff --git a/plugin-system/src/remote/PluginLoaderComponent.test.tsx b/plugin-system/src/remote/PluginLoaderComponent.test.tsx
index 924cfd4c..5256c815 100644
--- a/plugin-system/src/remote/PluginLoaderComponent.test.tsx
+++ b/plugin-system/src/remote/PluginLoaderComponent.test.tsx
@@ -55,21 +55,70 @@ class SimpleErrorBoundary extends React.Component<React.PropsWithChildren, { err
   }
 }
 
+const mockPlugin: PersesPlugin = {
+  name: 'test-plugin',
+  moduleName: 'test-module',
+  baseURL: 'https://example.com',
+};
+const firstProps = { label: 'First' };
+const secondProps = { label: 'Second' };
+const samePlugin = { ...mockPlugin };
+const previousPlugin = { ...mockPlugin, version: '1' };
+const nextPlugin = { ...mockPlugin, version: '2' };
+
 describe('PluginLoaderComponent', () => {
-  const mockPlugin: PersesPlugin = {
-    name: 'test-plugin',
-    moduleName: 'test-module',
-    baseURL: 'https://example.com',
-  };
+  it('keeps the loaded plugin mounted when only its props change', async () => {
+    const loadPlugin = vi.fn().mockResolvedValue({
+      'test-plugin': ({ label }: { label: string }): React.ReactNode => <div>{label}</div>,
+    });
+    vi.mocked(PluginRuntime.usePluginRuntime).mockReturnValue({
+      loadPlugin,
+      pluginRuntime: {} as ModuleFederation,
+    });
+    const { rerender } = render(<PluginLoaderComponent plugin={mockPlugin} props={firstProps} />);
+    expect(await screen.findByText('First')).toBeInTheDocument();
+
+    rerender(<PluginLoaderComponent plugin={samePlugin} props={secondProps} />);
+    expect(screen.getByText('Second')).toBeInTheDocument();
+    expect(loadPlugin).toHaveBeenCalledTimes(1);
+  });
+
+  it('reloads a changed plugin version and ignores the previous pending load', async () => {
+    let resolvePrevious!: (module: RemotePluginModule) => void;
+    const previousLoad = vi.fn(
+      () =>
+        new Promise<RemotePluginModule>((resolve) => {
+          resolvePrevious = resolve;
+        }),
+    );
+    const nextLoad = vi.fn().mockResolvedValue({
+      'test-plugin': (): React.ReactNode => <div>New version</div>,
+    });
+    vi.mocked(PluginRuntime.usePluginRuntime).mockImplementation(({ plugin }) => ({
+      loadPlugin: plugin.version === '2' ? nextLoad : previousLoad,
+      pluginRuntime: {} as ModuleFederation,
+    }));
+    const { rerender } = render(<PluginLoaderComponent plugin={previousPlugin} />);
+    rerender(<PluginLoaderComponent plugin={nextPlugin} />);
+    expect(await screen.findByText('New version')).toBeInTheDocument();
+
+    await act(async () => {
+      resolvePrevious({ 'test-plugin': (): React.ReactNode => <div>Old version</div> });
+    });
+    expect(screen.queryByText('Old version')).not.toBeInTheDocument();
+    expect(screen.getByText('New version')).toBeInTheDocument();
+    expect(previousLoad).toHaveBeenCalledTimes(1);
+    expect(nextLoad).toHaveBeenCalledTimes(1);
+  });
 
   it('should render the plugin component', async () => {
     const mockPluginModule = vi.fn(() => <div>Mock Plugin Component</div>);
 
-    vi.spyOn(PluginRuntime, 'usePluginRuntime').mockImplementation(() => ({
+    vi.spyOn(PluginRuntime, 'usePluginRuntime').mockReturnValue({
       loadPlugin: (): Promise<{ 'test-plugin': () => React.ReactNode }> =>
         Promise.resolve({ 'test-plugin': mockPluginModule }),
       pluginRuntime: {} as ModuleFederation,
-    }));
+    });
 
     act(() => {
       render(<PluginLoaderComponent plugin={mockPlugin} />);
@@ -85,10 +134,10 @@ describe('PluginLoaderComponent', () => {
   it('should throw an error if the plugin module does not have a named export', async () => {
     const mockPluginModule = vi.fn(() => <div>Mock Plugin Component</div>);
 
-    vi.spyOn(PluginRuntime, 'usePluginRuntime').mockImplementation(() => ({
+    vi.spyOn(PluginRuntime, 'usePluginRuntime').mockReturnValue({
       loadPlugin: (): Promise<RemotePluginModule> => Promise.resolve({ mockPluginModule } as RemotePluginModule),
       pluginRuntime: {} as ModuleFederation,
-    }));
+    });
 
     act(() => {
       render(
@@ -106,11 +155,11 @@ describe('PluginLoaderComponent', () => {
   });
 
   it('should throw an error if the plugin module named export is not a function', async () => {
-    vi.spyOn(PluginRuntime, 'usePluginRuntime').mockImplementation(() => ({
+    vi.spyOn(PluginRuntime, 'usePluginRuntime').mockReturnValue({
       loadPlugin: (): Promise<RemotePluginModule> =>
         Promise.resolve({ 'test-plugin': 'not a function' } as unknown as RemotePluginModule),
       pluginRuntime: {} as ModuleFederation,
-    }));
+    });
 
     act(() => {
       render(
diff --git a/plugin-system/src/remote/PluginLoaderComponent.tsx b/plugin-system/src/remote/PluginLoaderComponent.tsx
index 86f004cf..37c559b8 100644
--- a/plugin-system/src/remote/PluginLoaderComponent.tsx
+++ b/plugin-system/src/remote/PluginLoaderComponent.tsx
@@ -11,7 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -25,7 +24,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import type { PersesPlugin, RemotePluginModule } from './PersesPlugin.types';
 import { usePluginRuntime } from './PluginRuntime';
@@ -43,27 +42,31 @@ function PluginContainer<P>({
   pluginFn: (props: P | undefined) => JSX.Element;
   props: P | undefined;
 }): JSX.Element {
+  'use no memo'; // Remote plugin functions may call hooks; their invocation must run on every render.
+
   return pluginFn(props);
 }
 
 export function PluginLoaderComponent<P>({ plugin, props, field }: PluginLoaderProps<P>): JSX.Element | null {
+  // Reset loading state and plugin hooks together whenever the remote identity changes.
+  const key = JSON.stringify([plugin.moduleName, plugin.name, plugin.registry, plugin.version, plugin.baseURL]);
+  return <PluginLoaderSession key={key} plugin={plugin} props={props} field={field} />;
+}
+
+function PluginLoaderSession<P>({ plugin, props, field }: PluginLoaderProps<P>): JSX.Element | null {
   const { loadPlugin } = usePluginRuntime({ plugin });
   const [pluginModule, setPluginModule] = useState<RemotePluginModule | null>(null);
   const [error, setError] = useState<Error | null>(null);
 
-  const name = `${plugin.moduleName}-${plugin.name}`;
-  const previousPluginName = useRef<string>(name);
-
   useEffect(() => {
-    previousPluginName.current = name;
-    setError(null);
+    let cancelled = false;
 
     loadPlugin()
       .then((module) => {
-        setPluginModule(module);
+        if (!cancelled) setPluginModule(module);
       })
       .catch((error) => {
-        setPluginModule(null);
+        if (cancelled) return;
         console.error(
           `PluginLoaderComponent: Error loading plugin ${plugin.name} from module ${plugin.moduleName}:`,
           error,
@@ -72,8 +75,10 @@ export function PluginLoaderComponent<P>({ plugin, props, field }: PluginLoaderP
           new Error(`PluginLoaderComponent: Error loading plugin ${plugin.name} from module ${plugin.moduleName}`),
         );
       });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [name]);
+    return (): void => {
+      cancelled = true;
+    };
+  }, [loadPlugin, plugin.name, plugin.moduleName]);
 
   if (error) {
     throw error;
@@ -97,12 +102,5 @@ export function PluginLoaderComponent<P>({ plugin, props, field }: PluginLoaderP
     throw new Error(`PluginLoaderComponent: Plugin ${plugin.name} export is not a function`);
   }
 
-  // make sure to re mount the plugin when changes, to avoid mismatch in hooks ordering when re rendering
-  if (previousPluginName.current !== name) {
-    return null;
-  }
-
-  return (
-    <PluginContainer key={name} pluginFn={pluginFunction as (props: P | undefined) => JSX.Element} props={props} />
-  );
+  return <PluginContainer pluginFn={pluginFunction as (props: P | undefined) => JSX.Element} props={props} />;
 }
diff --git a/plugin-system/src/remote/PluginRuntime.tsx b/plugin-system/src/remote/PluginRuntime.tsx
index bd187c22..f074b98f 100644
--- a/plugin-system/src/remote/PluginRuntime.tsx
+++ b/plugin-system/src/remote/PluginRuntime.tsx
@@ -16,7 +16,7 @@ import * as EmotionStyled from '@emotion/styled';
 import type { ModuleFederation } from '@module-federation/enhanced/runtime';
 import { createInstance } from '@module-federation/enhanced/runtime';
 import * as ReactQuery from '@tanstack/react-query';
-import React from 'react';
+import React, { useCallback } from 'react';
 import ReactDOM from 'react-dom';
 import * as ReactHookForm from 'react-hook-form';
 import * as ReactRouterDOM from 'react-router-dom';
@@ -230,6 +230,8 @@ const getPluginRuntime = (): ModuleFederation => {
         },
         'mdi-material-ui': {
           version: '7.9.4',
+          // Federation must register the package root to satisfy existing plugin shared-module requests.
+          // oxlint-disable-next-line no-restricted-imports
           get: createSharedModuleLoader(() => import('mdi-material-ui')),
           shareConfig: {
             singleton: true,
@@ -297,11 +299,14 @@ export function usePluginRuntime({ plugin }: { plugin: PersesPlugin }): {
   pluginRuntime: ModuleFederation;
   loadPlugin: () => Promise<RemotePluginModule | null>;
 } {
+  const { moduleName, name: pluginName, registry, version, baseURL } = plugin;
+  const load = useCallback(
+    () => loadPlugin({ moduleName, pluginName, registry, version, baseURL }),
+    [moduleName, pluginName, registry, version, baseURL],
+  );
+
   return {
     pluginRuntime: getPluginRuntime(),
-    loadPlugin: (): Promise<RemotePluginModule | null> => {
-      const { moduleName, name: pluginName, registry, version, baseURL } = plugin;
-      return loadPlugin({ moduleName, pluginName, registry, version, baseURL });
-    },
+    loadPlugin: load,
   };
 }
diff --git a/plugin-system/src/runtime/TimeRangeProvider/query-params.ts b/plugin-system/src/runtime/TimeRangeProvider/query-params.ts
index 518ddc17..5fc88867 100644
--- a/plugin-system/src/runtime/TimeRangeProvider/query-params.ts
+++ b/plugin-system/src/runtime/TimeRangeProvider/query-params.ts
@@ -14,7 +14,7 @@
 import type { TimeRangeValue, DurationString, AbsoluteTimeRange } from '@perses-dev/spec';
 import { isRelativeTimeRange, isDurationString } from '@perses-dev/spec';
 import { getUnixTime, isDate } from 'date-fns';
-import { useMemo, useCallback, useEffect, useState } from 'react';
+import { useMemo, useCallback, useEffect, useRef } from 'react';
 import type { QueryParamConfig } from 'use-query-params';
 import { useQueryParams, StringParam } from 'use-query-params';
 
@@ -122,19 +122,19 @@ export function useInitialTimeRange(dashboardDuration: DurationString): TimeRang
 export function useTimeRangeParams(initialTimeRange: TimeRangeValue): Pick<TimeRange, 'timeRange' | 'setTimeRange'> {
   const [query, setQuery] = useQueryParams(timeRangeQueryConfig, { updateType: 'replaceIn' });
   // determine whether initial param had previously been populated to fix back btn
-  const [paramsLoaded, setParamsLoaded] = useState<boolean>(false);
+  const paramsLoaded = useRef(false);
 
   const { start } = query;
 
   useEffect(() => {
     // when dashboard loaded with no params, default to dashboard duration
-    if (!paramsLoaded && !start) {
+    if (!paramsLoaded.current && !start) {
       if (isRelativeTimeRange(initialTimeRange)) {
         setQuery({ start: initialTimeRange.pastDuration, end: undefined });
-        setParamsLoaded(true);
+        paramsLoaded.current = true;
       }
     }
-  }, [initialTimeRange, paramsLoaded, start, setQuery]);
+  }, [initialTimeRange, start, setQuery]);
 
   const setTimeRange: TimeRange['setTimeRange'] = useCallback(
     (value: TimeRangeValue) => {
@@ -179,17 +179,17 @@ export function useSetRefreshIntervalParams(
   const [query, setQuery] = useQueryParams(refreshIntervalQueryConfig, { updateType: 'replaceIn' });
 
   // determine whether initial param had previously been populated to fix back btn
-  const [paramsLoaded, setParamsLoaded] = useState<boolean>(false);
+  const paramsLoaded = useRef(false);
 
   const { refresh } = query;
 
   useEffect(() => {
     // when dashboard loaded with no params, default to dashboard refresh interval
-    if (!paramsLoaded && !refresh) {
+    if (!paramsLoaded.current && !refresh) {
       setQuery({ refresh: initialRefreshInterval });
-      setParamsLoaded(true);
+      paramsLoaded.current = true;
     }
-  }, [initialRefreshInterval, paramsLoaded, refresh, setQuery]);
+  }, [initialRefreshInterval, refresh, setQuery]);
 
   const setRefreshInterval: TimeRange['setRefreshInterval'] = useCallback(
     (refresh: DurationString) => setQuery({ refresh }),
diff --git a/plugin-system/src/runtime/UsageMetricsProvider.tsx b/plugin-system/src/runtime/UsageMetricsProvider.tsx
index 0f1febaf..5e6fb2e9 100644
--- a/plugin-system/src/runtime/UsageMetricsProvider.tsx
+++ b/plugin-system/src/runtime/UsageMetricsProvider.tsx
@@ -15,7 +15,7 @@ import type { FetchFn } from '@perses-dev/client';
 import { useFetch } from '@perses-dev/client';
 import type { QueryDefinition } from '@perses-dev/spec';
 import type { ReactElement, ReactNode } from 'react';
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useState } from 'react';
 
 type QueryState = 'pending' | 'success' | 'error';
 
@@ -55,29 +55,32 @@ export const useUsageMetrics = (): UseUsageMetricsResults => {
       if (ctx === undefined) {
         return;
       }
-
-      const definitionKey = JSON.stringify(definition);
-      if (ctx.pendingQueries.has(definitionKey) && newState === 'pending') {
-        // Never allow transitions back to pending, to avoid re-sending stats on a re-render.
-        return;
-      }
-
-      if (ctx.pendingQueries.get(definitionKey) !== newState) {
-        ctx.pendingQueries.set(definitionKey, newState);
-        if (newState === 'error') {
-          ctx.renderErrorCount += 1;
-        }
-
-        const allDone = [...ctx.pendingQueries.values()].every((p) => p !== 'pending');
-        if (ctx.renderDurationMs === 0 && allDone) {
-          ctx.renderDurationMs = Date.now() - ctx.startRenderTime;
-          submitMetrics(ctx);
-        }
-      }
+      recordQuery(ctx, definition, newState);
     },
   };
 };
 
+function recordQuery(ctx: UsageMetrics, definition: QueryDefinition, newState: QueryState): void {
+  const definitionKey = JSON.stringify(definition);
+  if (ctx.pendingQueries.has(definitionKey) && newState === 'pending') {
+    // Never allow transitions back to pending, to avoid re-sending stats on a re-render.
+    return;
+  }
+
+  if (ctx.pendingQueries.get(definitionKey) !== newState) {
+    ctx.pendingQueries.set(definitionKey, newState);
+    if (newState === 'error') {
+      ctx.renderErrorCount += 1;
+    }
+
+    const allDone = [...ctx.pendingQueries.values()].every((p) => p !== 'pending');
+    if (ctx.renderDurationMs === 0 && allDone) {
+      ctx.renderDurationMs = Date.now() - ctx.startRenderTime;
+      submitMetrics(ctx);
+    }
+  }
+}
+
 const submitMetrics = async (stats: UsageMetrics): Promise<void> => {
   await stats.fetchFn(`${stats.apiPrefix ?? ''}/api/v1/view`, {
     method: 'POST',
@@ -95,12 +98,13 @@ const submitMetrics = async (stats: UsageMetrics): Promise<void> => {
 
 export const UsageMetricsProvider = ({ apiPrefix, project, dashboard, children }: UsageMetricsProps): ReactElement => {
   const { fetch } = useFetch();
+  const [startRenderTime] = useState(() => Date.now());
 
   const ctx: UsageMetrics = {
     project: project,
     dashboard: dashboard,
     renderErrorCount: 0,
-    startRenderTime: Date.now(),
+    startRenderTime,
     renderDurationMs: 0,
     pendingQueries: new Map(),
     apiPrefix,
diff --git a/vitest.shared.ts b/vitest.shared.ts
index ec2446d4..23af475d 100644
--- a/vitest.shared.ts
+++ b/vitest.shared.ts
@@ -43,7 +43,7 @@ export function definePackageVitestConfig({
   packageDir,
   setupFiles = [],
   passWithNoTests = false,
-}: VitestPackageOptions) {
+}: VitestPackageOptions): ReturnType<typeof mergeConfig> {
   return mergeConfig(
     sharedConfig,
     defineConfig({