@rozenite/storage-plugin 1.13.0 → 2.1.0

package/src/ui/panel.tsx

@@ -1,642 +1,782 @@
+import { useQueryClient } from '@tanstack/react-query';
+import type { ColumnDef, OnChangeFn, SortingState } from '@tanstack/react-table';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Download, Plus, Search, Upload } from 'lucide-react';
+import {
+  Badge,
+  Button,
+  ConfirmDialog,
+  EmptyState,
+  PluginShell,
+  SearchField,
+  Sidebar,
+  Split,
+  Toolbar,
+  VirtualizedDataTable,
+} from '@rozenite/ui';
+import { useEffect, useMemo, useRef, useState, type ChangeEvent } from 'react';
+import { Database, Download, Edit3, Plus, RefreshCw, Trash2, Upload } from 'lucide-react';
 import type {
-  StorageDeleteEntryEvent,
+  StorageDiscoverStoragesResponseEvent,
   StorageEventMap,
+  StorageImportProgressEvent,
   StorageImportResultEvent,
-  StorageSetEntryEvent,
-  StorageSnapshotEvent,
+  StorageInvalidatedEvent,
 } from '../shared/messaging';
+import { parseSnapshot } from '../shared/snapshot';
 import type {
-  StorageCapabilities,
+  StorageDescriptor,
   StorageEntry,
+  StorageEntryPreview,
   StorageEntryValue,
   StorageTarget,
 } from '../shared/types';
 import { getStorageViewId } from '../shared/types';
-import {
-  buildSnapshot,
-  computePreview,
-  parseSnapshot,
-} from '../shared/snapshot';
-import { EditableTable } from './editable-table';
 import { AddEntryDialog } from './add-entry-dialog';
-import { EntryDetailDialog } from './entry-detail-dialog';
 import { EditEntryDialog } from './edit-entry-dialog';
-import { ConfirmDialog } from './confirm-dialog';
+import { EntryDetailDialog } from './entry-detail-dialog';
 import { ImportDialog, type ImportFlightState } from './import-dialog';
+import { StorageQueryClientProvider } from './query-client';
+import { buildStorageSidebarGroups } from './storage-groups';
+import {
+  flattenStorageEntryPreviewPages,
+  dropStorageFullEntries,
+  invalidateStorageEntryPreviews,
+  resetSelectedStorageQueries,
+  useStorageEntryPreviews,
+  useStorageFullEntry,
+} from './use-storage-entries';
 import { buildExportFilename, downloadJson } from './utils';
 import './globals.css';
 
-type StorageSnapshotState = {
-  target: StorageTarget;
-  adapterName: string;
-  storageName: string;
-  capabilities: StorageCapabilities;
-  blacklist?: RegExp;
-  entries: StorageEntry[];
-};
-
-type AlertState = {
-  isOpen: boolean;
-  title: string;
-  message: string;
-};
+type AlertState = { title: string; message: string };
+type FullEntryInteraction = { key: string; mode: 'detail' | 'edit' };
 
 const sameTarget = (a: StorageTarget, b: StorageTarget) =>
   a.adapterId === b.adapterId && a.storageId === b.storageId;
 
-const getEntryTypeFromValue = (
-  value: StorageEntryValue,
-): StorageEntry['type'] => {
-  if (typeof value === 'string') {
-    return 'string';
-  }
+const getEntryTypeFromValue = (value: StorageEntryValue): StorageEntry['type'] => {
+  if (typeof value === 'string') return 'string';
+  if (typeof value === 'number') return 'number';
+  if (typeof value === 'boolean') return 'boolean';
+  return 'buffer';
+};
 
-  if (typeof value === 'number') {
-    return 'number';
-  }
+const useDebouncedValue = (value: string, delay = 250) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
 
-  if (typeof value === 'boolean') {
-    return 'boolean';
-  }
+  useEffect(() => {
+    const timeout = window.setTimeout(() => setDebouncedValue(value), delay);
+    return () => window.clearTimeout(timeout);
+  }, [delay, value]);
 
-  return 'buffer';
+  return debouncedValue;
 };
 
-export default function StoragePanel() {
-  const [snapshots, setSnapshots] = useState<Map<string, StorageSnapshotState>>(
-    new Map(),
-  );
-  const [selectedStorageViewId, setSelectedStorageViewId] = useState<
-    string | null
-  >(null);
-  const [loading, setLoading] = useState(false);
+function StoragePanelContent() {
+  const [descriptors, setDescriptors] = useState<StorageDescriptor[]>([]);
+  const [selectedTarget, setSelectedTarget] = useState<StorageTarget | null>(null);
   const [searchTerm, setSearchTerm] = useState('');
+  const [keySortDirection, setKeySortDirection] = useState<'ascending' | 'descending'>('ascending');
+  const [interaction, setInteraction] = useState<FullEntryInteraction | null>(null);
   const [showAddDialog, setShowAddDialog] = useState(false);
-  const [selectedEntry, setSelectedEntry] = useState<StorageEntry | null>(null);
-  const [showDetailDialog, setShowDetailDialog] = useState(false);
-  const [editingEntry, setEditingEntry] = useState<StorageEntry | null>(null);
-  const [showEditDialog, setShowEditDialog] = useState(false);
-  const [importFlight, setImportFlight] = useState<ImportFlightState | null>(
-    null,
-  );
-  const [alertState, setAlertState] = useState<AlertState>({
-    isOpen: false,
-    title: '',
-    message: '',
-  });
+  const [deleteKey, setDeleteKey] = useState<string | null>(null);
+  const [showPurgeDialog, setShowPurgeDialog] = useState(false);
+  const [virtualListVersion, setVirtualListVersion] = useState(0);
+  const [exportState, setExportState] = useState<
+    { status: 'idle' } | { status: 'loading' } | { status: 'error'; message: string }
+  >({ status: 'idle' });
+  const [importFlight, setImportFlight] = useState<ImportFlightState | null>(null);
+  const [alertState, setAlertState] = useState<AlertState | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
-
+  const selectedTargetRef = useRef<StorageTarget | null>(null);
+  const discoveryRequestIdRef = useRef(0);
+  const exportAbortControllerRef = useRef<AbortController | null>(null);
+  const importPreviewAbortControllerRef = useRef<AbortController | null>(null);
+  const importRequestIdRef = useRef(0);
+  const activeImportRequestIdRef = useRef<string | null>(null);
+  const isFetchingNextPageRef = useRef(false);
+  const isFetchingPreviousPageRef = useRef(false);
+  const pendingInvalidationsRef = useRef(new Set<string>());
   const client = useRozeniteDevToolsClient<StorageEventMap>({
     pluginId: '@rozenite/storage-plugin',
   });
+  const queryClient = useQueryClient();
+  const debouncedSearch = useDebouncedValue(searchTerm);
+  const selectedDescriptor = descriptors.find(
+    (descriptor) => selectedTarget && sameTarget(descriptor.target, selectedTarget),
+  );
+  const previews = useStorageEntryPreviews({
+    client,
+    target: selectedTarget,
+    search: debouncedSearch,
+    keySortDirection,
+  });
+  const fullEntry = useStorageFullEntry({
+    client,
+    target: selectedTarget,
+    key: interaction?.key,
+    enabled: interaction !== null,
+  });
+  const rows = flattenStorageEntryPreviewPages(previews.data);
+  const supportedTypes = selectedDescriptor?.capabilities.supportedTypes ?? [];
+  const sidebarGroups = useMemo(() => {
+    const storages = new Map(
+      descriptors.map((descriptor) => [getStorageViewId(descriptor.target), descriptor]),
+    );
+    return buildStorageSidebarGroups(storages);
+  }, [descriptors]);
 
-  useEffect(() => {
-    if (!client) {
-      return;
-    }
+  const closeInteraction = () => {
+    fullEntry.reset();
+    setInteraction(null);
+  };
 
-    const snapshotSubscription = client.onMessage(
-      'snapshot',
-      (event: StorageSnapshotEvent) => {
-        const viewId = getStorageViewId(event.target);
-        setSnapshots((previous) => {
-          const next = new Map(previous);
-          next.set(viewId, {
-            target: event.target,
-            adapterName: event.adapterName,
-            storageName: event.storageName,
-            capabilities: event.capabilities,
-            blacklist: event.blacklist
-              ? new RegExp(event.blacklist.source, event.blacklist.flags)
-              : undefined,
-            entries: event.entries,
-          });
+  const refreshSelectedStorage = async () => {
+    if (!selectedTarget) return;
+    closeInteraction();
+    setVirtualListVersion((version) => version + 1);
+    await resetSelectedStorageQueries(queryClient, selectedTarget);
+  };
 
-          if (previous.size === 0 && !selectedStorageViewId) {
-            setSelectedStorageViewId(viewId);
-          }
+  useEffect(() => {
+    if (!client) return;
 
-          return next;
-        });
+    const requestDiscovery = () => {
+      discoveryRequestIdRef.current += 1;
+      client.send('discover-storages', {
+        type: 'discover-storages',
+        requestId: `discovery-${discoveryRequestIdRef.current}`,
+      });
+    };
 
-        if (viewId === selectedStorageViewId) {
-          setLoading(false);
-        }
+    const descriptorsSubscription = client.onMessage(
+      'storage-descriptors',
+      (event: StorageDiscoverStoragesResponseEvent) => {
+        if (event.requestId !== `discovery-${discoveryRequestIdRef.current}`) return;
+        setDescriptors(event.storages);
+        setSelectedTarget((previous) =>
+          previous && event.storages.some((descriptor) => sameTarget(descriptor.target, previous))
+            ? previous
+            : (event.storages[0]?.target ?? null),
+        );
       },
     );
-
-    const setEntrySubscription = client.onMessage(
-      'set-entry',
-      (event: StorageSetEntryEvent) => {
-        const viewId = getStorageViewId(event.target);
-        setSnapshots((previous) => {
-          const next = new Map(previous);
-          const current = next.get(viewId);
-
-          if (!current) {
-            return previous;
-          }
-
-          const existingIndex = current.entries.findIndex(
-            (entry) => entry.key === event.entry.key,
-          );
-
-          const entries =
-            existingIndex >= 0
-              ? current.entries.map((entry) =>
-                  entry.key === event.entry.key ? event.entry : entry,
-                )
-              : [...current.entries, event.entry];
-
-          next.set(viewId, {
-            ...current,
-            entries,
-          });
-
-          return next;
-        });
-
-        setImportFlight((previous) => {
-          if (!previous || previous.phase !== 'importing') return previous;
-          if (!sameTarget(event.target, previous.target)) return previous;
-          return { ...previous, written: previous.written + 1 };
-        });
+    const importProgressSubscription = client.onMessage(
+      'import-progress',
+      (event: StorageImportProgressEvent) => {
+        setImportFlight((previous) =>
+          previous?.phase === 'importing' &&
+          previous.requestId === event.requestId &&
+          sameTarget(previous.target, event.target)
+            ? { ...previous, written: event.written, total: event.total }
+            : previous,
+        );
       },
     );
-
     const importResultSubscription = client.onMessage(
       'import-result',
       (event: StorageImportResultEvent) => {
+        if (
+          activeImportRequestIdRef.current === event.requestId &&
+          selectedTargetRef.current &&
+          sameTarget(event.target, selectedTargetRef.current)
+        ) {
+          activeImportRequestIdRef.current = null;
+          closeInteraction();
+          setVirtualListVersion((version) => version + 1);
+          void resetSelectedStorageQueries(queryClient, event.target);
+        }
         setImportFlight((previous) => {
-          if (!previous || previous.phase !== 'importing') return previous;
-          if (!sameTarget(event.target, previous.target)) return previous;
-          if (event.ok) {
-            return { phase: 'result', ok: true, written: event.written };
-          }
-          return {
-            phase: 'result',
-            ok: false,
-            written: event.written,
-            total: event.total,
-            failedKey: event.failedKey,
-            error: event.error ?? 'Unknown error',
-          };
+          if (
+            previous?.phase !== 'importing' ||
+            previous.requestId !== event.requestId ||
+            !sameTarget(previous.target, event.target)
+          )
+            return previous;
+          return event.ok
+            ? { phase: 'result', ok: true, written: event.written }
+            : {
+                phase: 'result',
+                ok: false,
+                written: event.written,
+                total: event.total,
+                failedKey: event.failedKey,
+                error: event.error ?? 'Unknown error',
+              };
         });
       },
     );
+    const invalidationSubscription = client.onMessage(
+      'storage-invalidated',
+      (event: StorageInvalidatedEvent) => {
+        void dropStorageFullEntries(queryClient, event.target, event.key);
+        setDescriptors((current) =>
+          current.map((descriptor) =>
+            sameTarget(descriptor.target, event.target)
+              ? { ...descriptor, entryCount: event.entryCount }
+              : descriptor,
+          ),
+        );
+        if (selectedTargetRef.current && sameTarget(event.target, selectedTargetRef.current)) {
+          setInteraction((current) =>
+            current && (event.key == null || current.key === event.key) ? null : current,
+          );
+        }
 
-    const deleteEntrySubscription = client.onMessage(
-      'delete-entry',
-      (event: StorageDeleteEntryEvent) => {
-        const viewId = getStorageViewId(event.target);
-
-        setSnapshots((previous) => {
-          const next = new Map(previous);
-          const current = next.get(viewId);
-
-          if (!current) {
-            return previous;
+        const targetId = getStorageViewId(event.target);
+        if (pendingInvalidationsRef.current.has(targetId)) return;
+        pendingInvalidationsRef.current.add(targetId);
+        queueMicrotask(() => {
+          pendingInvalidationsRef.current.delete(targetId);
+          if (selectedTargetRef.current && sameTarget(event.target, selectedTargetRef.current)) {
+            setVirtualListVersion((version) => version + 1);
           }
-
-          next.set(viewId, {
-            ...current,
-            entries: current.entries.filter((entry) => entry.key !== event.key),
-          });
-
-          return next;
+          void invalidateStorageEntryPreviews(queryClient, event.target);
         });
       },
     );
 
-    client.send('get-snapshot', {
-      type: 'get-snapshot',
-      target: 'all',
+    // The device announces itself once it is listening. It reconnects on every
+    // app reload, so discovery has to run again — the descriptors and cached
+    // entries the panel holds belong to the previous JS context.
+    const deviceReadySubscription = client.onMessage('device-ready', () => {
+      void queryClient.resetQueries();
+      requestDiscovery();
     });
 
+    requestDiscovery();
     return () => {
-      snapshotSubscription.remove();
-      setEntrySubscription.remove();
-      deleteEntrySubscription.remove();
+      descriptorsSubscription.remove();
+      importProgressSubscription.remove();
       importResultSubscription.remove();
+      invalidationSubscription.remove();
+      deviceReadySubscription.remove();
     };
-  }, [client, selectedStorageViewId]);
+  }, [client, queryClient]);
 
   useEffect(() => {
-    if (!client || !selectedStorageViewId) {
-      return;
-    }
-
-    const selectedSnapshot = snapshots.get(selectedStorageViewId);
-
-    if (selectedSnapshot) {
-      setLoading(false);
-      return;
-    }
-
-    const separatorIndex = selectedStorageViewId.indexOf(':');
-    if (separatorIndex < 0) {
-      console.warn(
-        `[Rozenite] Storage Plugin: Invalid storage view id "${selectedStorageViewId}".`,
-      );
-      setLoading(false);
-      return;
-    }
-
-    const adapterId = selectedStorageViewId.slice(0, separatorIndex);
-    const storageId = selectedStorageViewId.slice(separatorIndex + 1);
-
-    setLoading(true);
-    client.send('get-snapshot', {
-      type: 'get-snapshot',
-      target: {
-        adapterId,
-        storageId,
-      },
-    });
-  }, [client, selectedStorageViewId, snapshots]);
-
-  const selectedStorage = selectedStorageViewId
-    ? (snapshots.get(selectedStorageViewId) ?? null)
-    : null;
-
-  const entries = selectedStorage?.entries ?? [];
-
-  const filteredEntries = useMemo(
-    () =>
-      entries.filter((entry) =>
-        entry.key.toLowerCase().includes(searchTerm.toLowerCase()),
-      ),
-    [entries, searchTerm],
+    selectedTargetRef.current = selectedTarget;
+    exportAbortControllerRef.current?.abort();
+    exportAbortControllerRef.current = null;
+    importPreviewAbortControllerRef.current?.abort();
+    importPreviewAbortControllerRef.current = null;
+    activeImportRequestIdRef.current = null;
+    setExportState({ status: 'idle' });
+    setDeleteKey(null);
+    setShowPurgeDialog(false);
+    setInteraction(null);
+    setImportFlight(null);
+  }, [selectedTarget]);
+
+  useEffect(
+    () => () => {
+      exportAbortControllerRef.current?.abort();
+      importPreviewAbortControllerRef.current?.abort();
+    },
+    [],
   );
 
-  const supportedTypes = selectedStorage?.capabilities.supportedTypes ?? [];
-
-  const updateEntriesForSelectedStorage = (
-    mutate: (entries: StorageEntry[]) => StorageEntry[],
-  ) => {
-    if (!selectedStorageViewId) {
-      return;
-    }
-
-    setSnapshots((previous) => {
-      const next = new Map(previous);
-      const current = next.get(selectedStorageViewId);
-
-      if (!current) {
-        return previous;
-      }
-
-      next.set(selectedStorageViewId, {
-        ...current,
-        entries: mutate(current.entries),
-      });
-
-      return next;
-    });
+  const mutateSelectedStorage = (operation: () => void) => {
+    operation();
   };
 
   const handleValueChange = (key: string, newValue: StorageEntryValue) => {
-    if (!client || !selectedStorage) {
+    if (!client || !selectedTarget || !supportedTypes.includes(getEntryTypeFromValue(newValue)))
       return;
-    }
-
     const type = getEntryTypeFromValue(newValue);
-
-    if (!selectedStorage.capabilities.supportedTypes.includes(type)) {
-      return;
-    }
-
-    let updatedEntry: StorageEntry;
-    if (type === 'string') {
-      updatedEntry = { key, type: 'string', value: newValue as string };
-    } else if (type === 'number') {
-      updatedEntry = { key, type: 'number', value: newValue as number };
-    } else if (type === 'boolean') {
-      updatedEntry = { key, type: 'boolean', value: newValue as boolean };
-    } else {
-      updatedEntry = { key, type: 'buffer', value: newValue as number[] };
-    }
-
-    client.send('set-entry', {
-      type: 'set-entry',
-      target: selectedStorage.target,
-      entry: updatedEntry,
-    });
-
-    updateEntriesForSelectedStorage((currentEntries) =>
-      currentEntries.map((entry) => (entry.key === key ? updatedEntry : entry)),
+    const entry =
+      type === 'string'
+        ? { key, type, value: newValue as string }
+        : type === 'number'
+          ? { key, type, value: newValue as number }
+          : type === 'boolean'
+            ? { key, type, value: newValue as boolean }
+            : { key, type, value: newValue as number[] };
+    mutateSelectedStorage(() =>
+      client.send('set-entry', {
+        type: 'set-entry',
+        target: selectedTarget,
+        entry,
+      }),
     );
   };
 
-  const handleDeleteEntry = (key: string) => {
-    if (!client || !selectedStorage) {
-      return;
-    }
-
-    client.send('delete-entry', {
-      type: 'delete-entry',
-      target: selectedStorage.target,
-      key,
-    });
-
-    updateEntriesForSelectedStorage((currentEntries) =>
-      currentEntries.filter((entry) => entry.key !== key),
+  const handleAddEntry = (entry: StorageEntry) => {
+    if (!client || !selectedTarget) return;
+    mutateSelectedStorage(() =>
+      client.send('set-entry', {
+        type: 'set-entry',
+        target: selectedTarget,
+        entry,
+      }),
     );
   };
 
-  const handleAddEntry = (entry: StorageEntry) => {
-    if (!client || !selectedStorage) {
-      return;
-    }
+  const handleDeleteEntry = () => {
+    if (!client || !selectedTarget || !deleteKey) return;
+    const key = deleteKey;
+    setDeleteKey(null);
+    mutateSelectedStorage(() =>
+      client.send('delete-entry', {
+        type: 'delete-entry',
+        target: selectedTarget,
+        key,
+      }),
+    );
+  };
 
-    client.send('set-entry', {
-      type: 'set-entry',
-      target: selectedStorage.target,
-      entry,
+  const handlePurgeStorage = () => {
+    if (!client || !selectedTarget) return;
+    setShowPurgeDialog(false);
+    client.send('purge-storage', {
+      type: 'purge-storage',
+      target: selectedTarget,
     });
-
-    updateEntriesForSelectedStorage((currentEntries) => [
-      ...currentEntries,
-      entry,
-    ]);
   };
 
-  const showAlert = (title: string, message: string) =>
-    setAlertState({ isOpen: true, title, message });
+  const showAlert = (title: string, message: string) => setAlertState({ title, message });
 
   const handleImportClick = () => {
-    if (!fileInputRef.current) return;
-    fileInputRef.current.value = '';
-    fileInputRef.current.click();
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+      fileInputRef.current.click();
+    }
   };
 
-  const handleFileChange = async (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
+  const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
-    if (!file || !selectedStorage) {
-      return;
-    }
-
+    if (!file || !client || !selectedTarget) return;
     let raw: unknown;
     try {
-      const text = await file.text();
-      raw = JSON.parse(text);
-    } catch (parseError) {
-      showAlert(
-        'Could not read file',
-        parseError instanceof Error ? parseError.message : String(parseError),
-      );
+      raw = JSON.parse(await file.text());
+    } catch (error) {
+      showAlert('Could not read file', error instanceof Error ? error.message : String(error));
       return;
     }
-
     const parsed = parseSnapshot(raw);
     if (!parsed.ok) {
-      showAlert(
-        'Invalid snapshot',
-        `${parsed.error.path}: ${parsed.error.message}`,
-      );
+      showAlert('Invalid snapshot', `${parsed.error.path}: ${parsed.error.message}`);
       return;
     }
-
-    const preview = computePreview(parsed.snapshot, {
-      target: selectedStorage.target,
-      capabilities: selectedStorage.capabilities,
-      entryKeys: new Set(selectedStorage.entries.map((entry) => entry.key)),
-      isBlacklisted: selectedStorage.blacklist
-        ? (key) => selectedStorage.blacklist!.test(key)
-        : () => false,
-    });
-
-    const skippedSet = new Set(preview.skippedKeys.map((s) => s.key));
-    const unsupportedSet = new Set(preview.unsupportedTypes.map((u) => u.key));
-    const entriesToWrite = parsed.snapshot.entries.filter(
-      (entry) => !skippedSet.has(entry.key) && !unsupportedSet.has(entry.key),
-    );
-
-    setImportFlight({
-      phase: 'preview',
-      target: selectedStorage.target,
-      targetLabel: `${selectedStorage.adapterName} / ${selectedStorage.storageName}`,
-      snapshot: parsed.snapshot,
-      preview,
-      entriesToWrite,
-    });
+    importPreviewAbortControllerRef.current?.abort();
+    const controller = new AbortController();
+    importPreviewAbortControllerRef.current = controller;
+    const target = selectedTarget;
+    try {
+      const response = await client.request({
+        requestType: 'preview-import',
+        responseType: 'import-preview',
+        errorType: 'storage-request-error',
+        payload: { type: 'preview-import', target, snapshot: parsed.snapshot },
+        signal: controller.signal,
+      });
+      if (controller.signal.aborted || !sameTarget(target, selectedTargetRef.current ?? target))
+        return;
+      setImportFlight({
+        phase: 'preview',
+        target,
+        targetLabel: selectedDescriptor
+          ? `${selectedDescriptor.adapterName} / ${selectedDescriptor.storageName}`
+          : 'selected storage',
+        snapshot: parsed.snapshot,
+        preview: response.preview,
+        entriesToWrite: response.preview.acceptedEntryIndexes.map(
+          (index) => parsed.snapshot.entries[index],
+        ),
+      });
+    } catch {
+      if (!controller.signal.aborted && sameTarget(target, selectedTargetRef.current ?? target)) {
+        showAlert(
+          'Could not preview import',
+          'Could not inspect the selected storage. Please try again.',
+        );
+      }
+    } finally {
+      if (importPreviewAbortControllerRef.current === controller)
+        importPreviewAbortControllerRef.current = null;
+    }
   };
 
   const handleApplyImport = () => {
-    if (!client) return;
-    if (!importFlight || importFlight.phase !== 'preview') return;
-
+    if (!client || importFlight?.phase !== 'preview') return;
+    const requestId = `import-${++importRequestIdRef.current}`;
+    activeImportRequestIdRef.current = requestId;
     client.send('import-entries', {
       type: 'import-entries',
+      requestId,
       target: importFlight.target,
       entries: importFlight.entriesToWrite,
     });
-
     setImportFlight({
       phase: 'importing',
+      requestId,
       target: importFlight.target,
       total: importFlight.entriesToWrite.length,
       written: 0,
     });
   };
 
-  const handleCloseImport = () => setImportFlight(null);
+  const handleExport = async () => {
+    if (!client || !selectedTarget || exportAbortControllerRef.current) return;
+    const target = selectedTarget;
+    const controller = new AbortController();
+    exportAbortControllerRef.current = controller;
+    setExportState({ status: 'loading' });
+    try {
+      const response = await client.request({
+        requestType: 'export-snapshot',
+        responseType: 'export-snapshot-result',
+        errorType: 'storage-request-error',
+        payload: { type: 'export-snapshot', target },
+        signal: controller.signal,
+      });
+      if (!controller.signal.aborted && sameTarget(target, selectedTargetRef.current ?? target)) {
+        downloadJson(response.snapshot, buildExportFilename(target));
+        setExportState({ status: 'idle' });
+      }
+    } catch {
+      if (!controller.signal.aborted && sameTarget(target, selectedTargetRef.current ?? target)) {
+        setExportState({
+          status: 'error',
+          message: 'Could not export the selected storage. Please try again.',
+        });
+      }
+    } finally {
+      if (exportAbortControllerRef.current === controller) exportAbortControllerRef.current = null;
+    }
+  };
 
-  const handleExport = () => {
-    if (!selectedStorage) return;
-    const snapshot = buildSnapshot({
-      target: selectedStorage.target,
-      adapterName: selectedStorage.adapterName,
-      storageName: selectedStorage.storageName,
-      capabilities: selectedStorage.capabilities,
-      entries: selectedStorage.entries,
+  const columns = useMemo<ColumnDef<StorageEntryPreview>[]>(
+    () => [
+      {
+        id: 'key',
+        accessorKey: 'key',
+        header: 'Key',
+        enableSorting: true,
+        cell: ({ row }) => (
+          <span className="font-mono text-sm text-foreground">{row.original.key}</span>
+        ),
+      },
+      {
+        id: 'type',
+        accessorKey: 'type',
+        header: 'Type',
+        enableSorting: false,
+        cell: ({ row }) => <Badge variant="outline">{row.original.type}</Badge>,
+      },
+      {
+        id: 'preview',
+        accessorKey: 'preview',
+        header: 'Value',
+        enableSorting: false,
+        cell: ({ row }) => (
+          <div className="min-w-0">
+            <span className="break-all font-mono text-sm text-foreground">
+              {row.original.preview}
+            </span>
+            <span
+              className="ml-2 text-xs text-muted-foreground"
+              title={
+                row.original.isTruncated ? `Full value size: ${row.original.valueSize}` : undefined
+              }
+            >
+              {row.original.isTruncated
+                ? `truncated · ${row.original.valueSize}`
+                : row.original.valueSize}
+            </span>
+          </div>
+        ),
+      },
+      {
+        id: 'actions',
+        header: '',
+        enableSorting: false,
+        cell: ({ row }) => (
+          <div className="flex items-center gap-1" onClick={(event) => event.stopPropagation()}>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setInteraction({ key: row.original.key, mode: 'edit' })}
+              aria-label={`Edit value for ${row.original.key}`}
+            >
+              <Edit3 className="h-3.5 w-3.5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="text-muted-foreground hover:text-destructive"
+              onClick={() => setDeleteKey(row.original.key)}
+              aria-label={`Delete entry ${row.original.key}`}
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        ),
+      },
+    ],
+    [],
+  );
+  const sorting: SortingState = [{ id: 'key', desc: keySortDirection === 'descending' }];
+  const handleSortingChange: OnChangeFn<SortingState> = (updater) => {
+    const next = typeof updater === 'function' ? updater(sorting) : updater;
+    const keySort = next.find((item) => item.id === 'key');
+    setKeySortDirection(keySort?.desc ? 'descending' : 'ascending');
+  };
+  const fetchNextPage = () => {
+    if (
+      !previews.hasNextPage ||
+      previews.isFetching ||
+      previews.isFetchingNextPage ||
+      isFetchingNextPageRef.current
+    )
+      return;
+    isFetchingNextPageRef.current = true;
+    void previews.fetchNextPage().finally(() => {
+      isFetchingNextPageRef.current = false;
     });
-    downloadJson(snapshot, buildExportFilename(selectedStorage.target));
   };
-
-  const storageOptions = [...snapshots.entries()].map(([viewId, snapshot]) => ({
-    viewId,
-    label: `${snapshot.adapterName} / ${snapshot.storageName}`,
-  }));
+  const fetchPreviousPage = () => {
+    if (
+      !previews.hasPreviousPage ||
+      previews.isFetching ||
+      previews.isFetchingPreviousPage ||
+      isFetchingPreviousPageRef.current
+    )
+      return;
+    isFetchingPreviousPageRef.current = true;
+    void previews.fetchPreviousPage().finally(() => {
+      isFetchingPreviousPageRef.current = false;
+    });
+  };
+  const selectedStorageViewId = selectedTarget ? getStorageViewId(selectedTarget) : '';
 
   return (
-    <div className="h-screen bg-gray-900 text-gray-100 flex flex-col">
-      <div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-medium text-gray-200">Storage</span>
-        </div>
-        <div className="flex-1" />
-        <div className="flex items-center gap-2">
-          <label htmlFor="storage-select" className="text-xs text-gray-400">
-            Storage:
-          </label>
-          <select
-            id="storage-select"
-            value={selectedStorageViewId ?? ''}
-            onChange={(event) => setSelectedStorageViewId(event.target.value)}
-            disabled={snapshots.size === 0}
-            className="h-8 px-2 text-xs bg-gray-700 border border-gray-600 rounded text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
-          >
-            {snapshots.size === 0 ? (
-              <option>No storages found</option>
-            ) : (
-              storageOptions.map((option) => (
-                <option key={option.viewId} value={option.viewId}>
-                  {option.label}
-                </option>
-              ))
-            )}
-          </select>
-        </div>
-      </div>
-
-      <div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
-        <button
-          onClick={() => setShowAddDialog(true)}
-          disabled={!selectedStorage}
-          className="flex items-center gap-1 px-3 h-8 text-xs bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded transition-colors"
-          title="Add new entry"
-        >
-          <Plus className="h-3 w-3" />
-          Add Entry
-        </button>
-        <button
-          onClick={handleImportClick}
-          disabled={!selectedStorage}
-          className="flex items-center gap-1 px-3 h-8 text-xs bg-gray-700 hover:bg-gray-600 disabled:bg-gray-800 disabled:cursor-not-allowed text-gray-100 rounded transition-colors"
-          title="Import entries from a JSON snapshot"
-        >
-          <Upload className="h-3 w-3" />
-          Import
-        </button>
-        <button
-          onClick={handleExport}
-          disabled={!selectedStorage || entries.length === 0}
-          className="flex items-center gap-1 px-3 h-8 text-xs bg-gray-700 hover:bg-gray-600 disabled:bg-gray-800 disabled:cursor-not-allowed text-gray-100 rounded transition-colors"
-          title="Export entries to a JSON snapshot"
-        >
-          <Download className="h-3 w-3" />
-          Export
-        </button>
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept="application/json,.json"
-          className="hidden"
-          onChange={handleFileChange}
-        />
-        <div className="flex-1">
-          <div className="relative">
-            <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
-            <input
-              type="text"
-              placeholder="Search keys..."
-              value={searchTerm}
-              onChange={(event) => setSearchTerm(event.target.value)}
-              className="h-8 w-full pl-8 pr-3 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-            />
-          </div>
-        </div>
-        <div className="flex items-center gap-2 text-xs text-gray-400">
-          {filteredEntries.length} of {entries.length} entries
-        </div>
-      </div>
-
-      <main className="flex flex-1 min-h-0 overflow-auto">
-        {selectedStorage ? (
-          filteredEntries.length === 0 ? (
-            <div className="flex flex-col items-center justify-center h-full text-center w-full">
-              <h3 className="text-lg font-semibold text-gray-200 mb-2">
-                No entries found
-              </h3>
-              <p className="text-gray-400 text-sm">
-                {searchTerm
-                  ? 'Try adjusting your search terms'
-                  : 'This storage appears to be empty'}
-              </p>
+    <PluginShell>
+      <PluginShell.Body>
+        <Split direction="horizontal" autoSaveId="storage">
+          <Split.Pane defaultSize={22} minSize={15} maxSize={40}>
+            <Sidebar className="w-full border-r-0">
+              {sidebarGroups.length === 0 ? (
+                <div className="flex flex-1 items-center justify-center p-4 text-center text-xs text-sidebar-foreground/60">
+                  Waiting for storages…
+                </div>
+              ) : (
+                sidebarGroups.map((group) => (
+                  <Sidebar.Group key={group.adapterId} label={group.adapterName}>
+                    {group.items.map((item) => (
+                      <Sidebar.Item
+                        key={item.viewId}
+                        selected={item.viewId === selectedStorageViewId}
+                        adornment={<Database />}
+                        trailing={<Badge variant="secondary">{item.entryCount}</Badge>}
+                        onClick={() => {
+                          const descriptor = descriptors.find(
+                            (candidate) => getStorageViewId(candidate.target) === item.viewId,
+                          );
+                          if (descriptor) setSelectedTarget(descriptor.target);
+                        }}
+                      >
+                        {item.storageName}
+                      </Sidebar.Item>
+                    ))}
+                  </Sidebar.Group>
+                ))
+              )}
+            </Sidebar>
+          </Split.Pane>
+          <Split.Handle />
+          <Split.Pane>
+            <div className="flex h-full min-h-0 flex-col">
+              <Toolbar>
+                <Toolbar.Group>
+                  <Toolbar.Button
+                    onClick={() => setShowAddDialog(true)}
+                    disabled={!selectedDescriptor}
+                    aria-label="Add entry"
+                    title="Add entry"
+                    className="w-7 px-0"
+                  >
+                    <Plus className="h-3.5 w-3.5" />
+                  </Toolbar.Button>
+                  <Toolbar.Button
+                    onClick={() => setShowPurgeDialog(true)}
+                    disabled={!client || !selectedTarget || previews.isFetching}
+                    aria-label="Purge storage"
+                    title="Purge storage"
+                    className="w-7 px-0 text-muted-foreground hover:text-destructive"
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </Toolbar.Button>
+                </Toolbar.Group>
+                <Toolbar.Separator />
+                <Toolbar.Group>
+                  <Toolbar.Button
+                    onClick={() => void refreshSelectedStorage()}
+                    disabled={!selectedTarget || previews.isFetching}
+                    aria-label="Refresh storage"
+                    title="Refresh storage"
+                    className="w-7 px-0"
+                  >
+                    <RefreshCw className="h-3.5 w-3.5" />
+                  </Toolbar.Button>
+                </Toolbar.Group>
+                <Toolbar.Separator />
+                <Toolbar.Group>
+                  <Toolbar.Button
+                    onClick={handleImportClick}
+                    disabled={!selectedDescriptor}
+                    aria-label="Import storage"
+                    title="Import storage"
+                    className="w-7 px-0"
+                  >
+                    <Upload className="h-3.5 w-3.5" />
+                  </Toolbar.Button>
+                  <Toolbar.Button
+                    onClick={handleExport}
+                    disabled={!client || !selectedTarget || exportState.status === 'loading'}
+                    aria-label={
+                      exportState.status === 'loading' ? 'Exporting storage' : 'Export storage'
+                    }
+                    title={
+                      exportState.status === 'loading' ? 'Exporting storage' : 'Export storage'
+                    }
+                    className="w-7 px-0"
+                  >
+                    <Download className="h-3.5 w-3.5" />
+                  </Toolbar.Button>
+                </Toolbar.Group>
+                <Toolbar.Separator />
+                <div className="min-w-40 flex-1">
+                  <SearchField
+                    placeholder="Search keys…"
+                    value={searchTerm}
+                    onChange={(event) => setSearchTerm(event.target.value)}
+                    onClear={() => setSearchTerm('')}
+                    disabled={!selectedDescriptor}
+                  />
+                </div>
+                {exportState.status === 'error' ? (
+                  <span role="alert" className="text-xs text-destructive">
+                    {exportState.message}
+                  </span>
+                ) : null}
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="application/json,.json"
+                  className="hidden"
+                  onChange={handleFileChange}
+                />
+              </Toolbar>
+              <div className="min-h-0 flex-1 overflow-auto">
+                {selectedDescriptor ? (
+                  <VirtualizedDataTable
+                    key={virtualListVersion}
+                    ariaLabel="Storage entries"
+                    columns={columns}
+                    data={rows}
+                    getRowId={(entry) => entry.key}
+                    getRowTextValue={(entry) => entry.key}
+                    loading={previews.isLoading}
+                    emptyMessage={
+                      debouncedSearch ? 'No entries match your search.' : 'This storage is empty.'
+                    }
+                    manualSorting
+                    onEndReached={fetchNextPage}
+                    onRowClick={(entry) => setInteraction({ key: entry.key, mode: 'detail' })}
+                    onSortingChange={handleSortingChange}
+                    onStartReached={fetchPreviousPage}
+                    scrollClassName="h-full w-full overflow-auto"
+                    style={{ height: '100%' }}
+                    sorting={sorting}
+                  />
+                ) : (
+                  <EmptyState
+                    icon={Database}
+                    title="No storage selected"
+                    description="Choose a storage from the sidebar to inspect its entries."
+                  />
+                )}
+              </div>
             </div>
-          ) : (
-            <EditableTable
-              data={filteredEntries}
-              supportedTypes={supportedTypes}
-              onValueChange={handleValueChange}
-              onDeleteEntry={handleDeleteEntry}
-              onRowClick={(entry) => {
-                setSelectedEntry(entry);
-                setShowDetailDialog(true);
-              }}
-              loading={loading}
-            />
-          )
-        ) : (
-          <div className="flex flex-col items-center justify-center h-full text-center w-full">
-            <h2 className="text-xl font-semibold text-gray-200 mb-2">
-              Welcome to Storage Inspector
-            </h2>
-            <p className="text-gray-400 text-sm">
-              Select a storage from the dropdown above to inspect data
-            </p>
-          </div>
-        )}
-      </main>
-
+          </Split.Pane>
+        </Split>
+      </PluginShell.Body>
       <AddEntryDialog
         isOpen={showAddDialog}
         onClose={() => setShowAddDialog(false)}
         onAddEntry={handleAddEntry}
-        existingKeys={entries.map((entry) => entry.key)}
+        existingKeys={rows.map((entry) => entry.key)}
         supportedTypes={supportedTypes}
       />
-
       <EntryDetailDialog
-        isOpen={showDetailDialog}
-        onClose={() => {
-          setShowDetailDialog(false);
-          setSelectedEntry(null);
-        }}
-        onEdit={(entry) => {
-          setShowDetailDialog(false);
-          setEditingEntry(entry);
-          setShowEditDialog(true);
+        open={interaction?.mode === 'detail' && fullEntry.entry != null}
+        onOpenChange={(open) => {
+          if (!open) closeInteraction();
         }}
-        entry={selectedEntry}
+        onEdit={() =>
+          setInteraction((current) => (current ? { ...current, mode: 'edit' } : current))
+        }
+        entry={fullEntry.entry ?? null}
       />
-
       <EditEntryDialog
-        isOpen={showEditDialog}
-        onClose={() => {
-          setShowEditDialog(false);
-          setEditingEntry(null);
-        }}
-        onEditEntry={(key, newValue) => {
-          handleValueChange(key, newValue);
-          setShowEditDialog(false);
-          setEditingEntry(null);
-        }}
+        isOpen={interaction?.mode === 'edit' && fullEntry.entry != null}
+        onClose={closeInteraction}
+        onEditEntry={handleValueChange}
+        entry={fullEntry.entry ?? null}
         supportedTypes={supportedTypes}
-        entry={editingEntry}
       />
-
       <ImportDialog
         state={importFlight}
         onApply={handleApplyImport}
-        onCancel={handleCloseImport}
-        onClose={handleCloseImport}
+        onCancel={() => setImportFlight(null)}
+        onClose={() => setImportFlight(null)}
       />
-
       <ConfirmDialog
-        isOpen={alertState.isOpen}
-        onClose={() => setAlertState((prev) => ({ ...prev, isOpen: false }))}
-        onConfirm={() => setAlertState((prev) => ({ ...prev, isOpen: false }))}
-        title={alertState.title}
-        message={alertState.message}
-        type="alert"
+        open={deleteKey !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteKey(null);
+        }}
+        variant="confirm"
+        destructive
+        title="Delete Entry"
+        description={
+          deleteKey ? `Are you sure you want to delete the entry "${deleteKey}"?` : undefined
+        }
+        confirmLabel="Delete"
+        onConfirm={handleDeleteEntry}
       />
-    </div>
+      <ConfirmDialog
+        open={showPurgeDialog}
+        onOpenChange={setShowPurgeDialog}
+        variant="confirm"
+        destructive
+        title="Purge Storage"
+        description={
+          selectedDescriptor
+            ? `Are you sure you want to remove all entries from "${selectedDescriptor.storageName}"? This action cannot be undone.`
+            : 'Are you sure you want to remove all entries from this storage? This action cannot be undone.'
+        }
+        confirmLabel="Purge"
+        onConfirm={handlePurgeStorage}
+      />
+      <ConfirmDialog
+        open={alertState !== null}
+        onOpenChange={(open) => {
+          if (!open) setAlertState(null);
+        }}
+        variant="alert"
+        title={alertState?.title ?? ''}
+        description={alertState?.message}
+      />
+    </PluginShell>
+  );
+}
+
+export default function StoragePanel() {
+  return (
+    <StorageQueryClientProvider>
+      <StoragePanelContent />
+    </StorageQueryClientProvider>
   );
 }