diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index 7b9ccd1de5..eee23d31c8 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -1,28 +1,3 @@
-<script lang="ts">
-type CachedStructuredFilterRule = {
-  id: string;
-  columnName: string;
-  mode: "equals" | "not-equals" | "is-null" | "is-not-null" | "like" | "not-like" | "less-than" | "greater-than" | "in" | "not-in" | "between" | "not-between";
-  rawValue: string;
-  rawEndValue: string;
-  conjunction: "AND" | "OR";
-  disabled?: boolean;
-};
-type CachedServerColumnFilter = {
-  condition: string;
-  keys: string[];
-  labels: string[];
-};
-type StructuredFilterCacheState = {
-  scopeKey: string;
-  manualWhereInput: string;
-  rules: CachedStructuredFilterRule[];
-  appliedWhereInput: string;
-  serverColumnFilters?: Record<number, CachedServerColumnFilter>;
-};
-const structuredFilterStateCache = new Map<string, StructuredFilterCacheState>();
-</script>
-
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, onActivated, onDeactivated, ref, shallowRef, toRaw, useSlots, watch, defineAsyncComponent, type Component, type CSSProperties } from "vue";
 import { useI18n } from "vue-i18n";
@@ -31,28 +6,21 @@ import {
   ArrowDown,
   ArrowUpDown,
   Upload,
-  Plus,
   Trash2,
-  Save,
   ChevronDown,
   ChevronLeft,
   ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
   Search,
   Inbox,
   SearchX,
   Code2,
   Copy,
-  Eye,
-  EyeOff,
   Loader2,
   X,
   Undo2,
   WrapText,
   Info,
   Rows3,
-  RefreshCcw,
   RotateCcw,
   Pencil,
   Filter,
@@ -69,24 +37,23 @@ import {
   Database,
   Columns3,
   PencilRuler,
-  Timer,
 } from "@lucide/vue";
 import { Button } from "@/components/ui/button";
 import QueryLoadingState from "@/components/common/QueryLoadingState.vue";
 import CustomContextMenu, { type ContextMenuItem } from "@/components/ui/CustomContextMenu.vue";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import LightTooltip from "@/components/ui/LightTooltip.vue";
-import LightDropdown from "@/components/ui/LightDropdown.vue";
 import LightDropdownMenu from "@/components/ui/LightDropdownMenu.vue";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import ErrorBanner from "@/components/ui/ErrorBanner.vue";
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import DangerConfirmDialog from "@/components/editor/DangerConfirmDialog.vue";
-import ImagePreviewDialog from "@/components/grid/ImagePreviewDialog.vue";
+import DataGridCellDetailPanel from "@/components/grid/DataGridCellDetailPanel.vue";
+import DataGridPagination from "@/components/grid/DataGridPagination.vue";
+import DataGridSearchBar from "@/components/grid/DataGridSearchBar.vue";
+import DataGridToolbar from "@/components/grid/DataGridToolbar.vue";
+import DataGridColumnHeader from "@/components/grid/DataGridColumnHeader.vue";
+import DataGridQueryControls from "@/components/grid/DataGridQueryControls.vue";
 import TemporalCellEditor from "@/components/grid/TemporalCellEditor.vue";
 import EnumCellEditor from "@/components/grid/EnumCellEditor.vue";
 import type { QueryResult, ColumnInfo, DatabaseType, ForeignKeyInfo, IndexInfo, TriggerInfo, TableInfoTab } from "@/types/database";
@@ -148,19 +115,7 @@ import {
 } from "@/lib/dataGrid/binaryCellDownload";
 import { buildBinaryHexViewRows } from "@/lib/dataGrid/binaryHexViewer";
 import { canFormatCellDetailJson, cellDetailEditorText, compactJsonText, defaultCellDetailTab, formatJsonText, isGeometryColumnType, linkedCellDetailTarget, looksLikeJsonContainerText, valueEditorActions, visibleCellDetailTabs, type CellDetailTab } from "@/lib/dataGrid/cellDetailPresentation";
-import { renderWktOnCanvas, isHexGeometry } from "@/lib/dataGrid/geometryPreview";
-import {
-  buildDataGridCellDetail,
-  buildDataGridColumnDetail,
-  buildDataGridRowDetail,
-  CELL_DETAIL_VALUE_PREVIEW_MAX_LENGTH,
-  dataGridColumnDetailJson,
-  dataGridColumnDetailTsv,
-  dataGridRowDetailJson,
-  dataGridRowDetailTsv,
-  filterDataGridDetailFields,
-  type DataGridCellDetail,
-} from "@/lib/dataGrid/dataGridDetail";
+import { buildDataGridCellDetail, buildDataGridColumnDetail, buildDataGridRowDetail, CELL_DETAIL_VALUE_PREVIEW_MAX_LENGTH, dataGridColumnDetailJson, dataGridColumnDetailTsv, dataGridRowDetailJson, dataGridRowDetailTsv, type DataGridCellDetail } from "@/lib/dataGrid/dataGridDetail";
 import { applyColumnFormatter, buildColumnFormatterKey, normalizeColumnFormatter, resolveColumnFormatter, type ColumnFormatterConfig, type DateTimeFormatterUnit, DateTimePatterns } from "@/lib/dataGrid/columnFormatter";
 import { temporalCellEditorConfig, type TemporalCellEditorConfig } from "@/lib/dataGrid/dataGridTemporalEditor";
 import { isCancelSearchShortcut, isCopyCurrentRowShortcut, isDeleteCurrentRowShortcut, isFocusSearchShortcut, isModRShortcut, isSaveShortcut, isToggleTransposeShortcut } from "@/lib/editor/keyboardShortcuts";
@@ -188,35 +143,43 @@ import {
   removeColumnValueFilterCondition,
   replaceColumnValueFilterCondition,
 } from "@/lib/dataGrid/dataGridColumnFilter";
-import { clampSearchSplitWidth } from "@/lib/dataGrid/dataGridSearchSplit";
-import { MAX_RESULT_PAGE_SIZE, MIN_RESULT_PAGE_SIZE, normalizeResultPageSize, resultPageSizeMenuOptions } from "@/lib/dataGrid/paginationPageSize";
-import { allNullColumnIndexes, filterColumnVisibilityOptions, hiddenColumnIndexesWithAllNullColumns, invertedHiddenColumnIndexes, nextHiddenColumnIndexes, removeAutoHiddenColumnIndexes, visibleColumnIndexesForFilter } from "@/lib/dataGrid/dataGridColumnVisibility";
+import { normalizeResultPageSize, resultPageSizeMenuOptions } from "@/lib/dataGrid/paginationPageSize";
+import { allNullColumnIndexes } from "@/lib/dataGrid/dataGridColumnVisibility";
 import { buildDataGridColumnLookupItems, filterDataGridColumnLookupItems } from "@/lib/dataGrid/dataGridColumnLookup";
-import { columnOrderKeysForIndexes, isDefaultColumnOrder, moveVisibleColumnIndex, orderedColumnIndexes, uniqueDataGridColumnOrderKeys } from "@/lib/dataGrid/dataGridColumnOrder";
-import {
-  dataGridColumnLayoutScopeKey,
-  loadDataGridColumnOrder,
-  loadTableDataGridColumnOrder,
-  notifyTableDataGridColumnOrderChanged,
-  removeDataGridColumnOrder,
-  removeTableDataGridColumnOrder,
-  saveDataGridColumnOrder,
-  saveTableDataGridColumnOrder,
-  TABLE_DATA_GRID_COLUMN_ORDER_CHANGED_EVENT,
-  tableDataGridColumnOrderScopeKey,
-  type TableDataGridColumnOrderChangedDetail,
-} from "@/lib/dataGrid/dataGridColumnLayoutStorage";
+import { uniqueDataGridColumnOrderKeys } from "@/lib/dataGrid/dataGridColumnOrder";
+import { dataGridColumnLayoutScopeKey, TABLE_DATA_GRID_COLUMN_ORDER_CHANGED_EVENT, tableDataGridColumnOrderScopeKey } from "@/lib/dataGrid/dataGridColumnLayoutStorage";
 import { parseClipboardTable, summarizeSelection } from "@/lib/dataGrid/gridSelection";
-import { columnHeaderCanvasPointerDisabled, columnHeaderClickShouldBeSuppressed, columnHeaderPreviewOffsetForColumn, columnHeaderTooltipDisabled } from "@/lib/dataGrid/dataGridColumnHeaderInteraction";
+import {
+  createDataGridCellContextMenuItems,
+  createDataGridColumnContextMenuItems,
+  createDataGridCompactColumnActionItems,
+  createDataGridContextMenuItems,
+  createDataGridFilterSubmenu,
+  createDataGridRowContextMenuItems,
+  createDataGridSortMenuItems,
+  dataGridSelectedSortMenuValue,
+  type DataGridColumnSortState,
+} from "@/lib/dataGrid/dataGridContextMenu";
 
 import { useToast } from "@/composables/useToast";
 import { useDataGridExport } from "@/composables/useDataGridExport";
 import { eventTargetAllowsNativeClipboard, isPlainClipboardShortcut, readTextFromClipboard } from "@/lib/common/clipboard";
-import { claimDataGridPaste } from "@/lib/dataGrid/dataGridClipboard";
-import ExportProgressDialog from "@/components/export/ExportProgressDialog.vue";
+import { claimDataGridPaste, planDataGridPaste } from "@/lib/dataGrid/dataGridClipboard";
 import { DATA_GRID_ROW_NUM_WIDTH, useDataGridColumnResize } from "@/composables/useDataGridColumnResize";
+import { useDataGridColumnLayout, useDataGridColumnLayoutState } from "@/composables/useDataGridColumnLayout";
+import { useDataGridCanvasRuntime, type DataGridCanvasRuntime } from "@/composables/useDataGridCanvasRuntime";
+import { useDataGridScrollbars, type DataGridScrollbarsRuntime } from "@/composables/useDataGridScrollbars";
 import { useDataGridSelection } from "@/composables/useDataGridSelection";
+import { moveDataGridCell } from "@/lib/dataGrid/dataGridNavigation";
+import { createDataGridRuntimeScope } from "@/lib/dataGrid/dataGridRuntime";
 import { useDataGridEditor } from "@/composables/useDataGridEditor";
+import { useDataGridSort } from "@/composables/useDataGridSort";
+import { useDataGridSearch, type DataGridSearchMatch } from "@/composables/useDataGridSearch";
+import { useDataGridResultLifecycle } from "@/composables/useDataGridResultLifecycle";
+import { useDataGridAutoRefresh } from "@/composables/useDataGridAutoRefresh";
+import { useDataGridAsyncSurface } from "@/composables/useDataGridAsyncSurface";
+import { useDataGridFilterBuilder, type DataGridStructuredFilterRule } from "@/composables/useDataGridFilterBuilder";
+import { cloneDataGridStructuredFilterRules, loadDataGridStructuredFilterState, saveDataGridStructuredFilterState, type DataGridCachedServerColumnFilter, type DataGridStructuredFilterCacheState } from "@/lib/dataGrid/dataGridFilterBuilderPersistence";
 import { useSqlHighlighter } from "@/composables/useSqlHighlighter";
 import { useCellDetailEditor, type UseCellDetailEditorReturn } from "@/composables/useCellDetailEditor";
 import { useTheme } from "@/composables/useTheme";
@@ -224,13 +187,11 @@ import { useConnectionStore } from "@/stores/connectionStore";
 import { useQueryStore } from "@/stores/queryStore";
 import { useSettingsStore } from "@/stores/settingsStore";
 import type { DataGridSortDirection, DataGridSortMode } from "@/lib/dataGrid/dataGridSort";
-import { DATA_GRID_COMPACT_TOPBAR_WIDTH, type DataGridReloadIntent } from "@/lib/dataGrid/dataGridToolbar";
+import { DATA_GRID_COMPACT_TOPBAR_WIDTH, type DataGridReloadIntent, type DataGridToolbarActionCapability, type DataGridToolbarAutoRefreshCapability, type DataGridToolbarSaveCapability } from "@/lib/dataGrid/dataGridToolbar";
 import { getTableMetadataCapabilities } from "@/lib/table/tableMetadataCapabilities";
 import { getTableStructureCapabilities } from "@/lib/table/tableStructureCapabilities";
 import { supportsTableStructureEditing } from "@/lib/database/databaseCapabilities";
-import { forgetDataGridConditionHistory, loadDataGridConditionHistory, rememberDataGridConditionHistory } from "@/lib/dataGrid/dataGridConditionHistory";
-import { getDataGridConditionSuggestionPosition } from "@/lib/dataGrid/dataGridConditionSuggestionPosition";
-import { caretPositionInsideInsertedSqlSingleQuotes, insertedSqlSingleQuoteAtCaret } from "@/lib/sql/sqlQuoteCaret";
+import { rememberDataGridConditionHistory } from "@/lib/dataGrid/dataGridConditionHistory";
 import { effectiveDatabaseTypeForConnection } from "@/lib/database/jdbcDialect";
 import { isMacOS } from "@/lib/backend/platform";
 import { appendDebugLog, isDebugLoggingEnabled } from "@/lib/backend/debugLog";
@@ -238,6 +199,12 @@ import { formatShortcut } from "@/lib/editor/shortcutRegistry";
 import { SearchableSelect } from "@/components/ui/searchable-select";
 
 const SqlPreviewPanel = defineAsyncComponent(() => import("@/components/editor/SqlPreviewPanel.vue"));
+const ImagePreviewDialog = defineAsyncComponent(() => import("@/components/grid/ImagePreviewDialog.vue"));
+const DataGridCellDetailDialog = defineAsyncComponent(() => import("@/components/grid/DataGridCellDetailDialog.vue"));
+const DataGridMongoJsonPreview = defineAsyncComponent(() => import("@/components/grid/DataGridMongoJsonPreview.vue"));
+const DataGridDetailDialogs = defineAsyncComponent(() => import("@/components/grid/DataGridDetailDialogs.vue"));
+const DataGridBulkEditDialog = defineAsyncComponent(() => import("@/components/grid/DataGridBulkEditDialog.vue"));
+const ExportProgressDialog = defineAsyncComponent(() => import("@/components/export/ExportProgressDialog.vue"));
 const FORMATTED_JSON_EDIT_WARNING_COUNT_STORAGE_KEY = "dbx-cell-detail-formatted-json-edit-warning-count";
 const FORMATTED_JSON_EDIT_WARNING_MAX_COUNT = 3;
 
@@ -264,11 +231,6 @@ interface PreparedCopyValue {
   ready: boolean;
 }
 
-type ConditionSuggestion = {
-  value: string;
-  kind: "column" | "history";
-};
-
 type SortMenuValue = "local-asc" | "local-desc" | "database-asc" | "database-desc" | "clear";
 
 interface DataGridProps {
@@ -327,6 +289,11 @@ const props = withDefaults(defineProps<DataGridProps>(), {
 const dataGridTraceId = uuid().slice(0, 8);
 const dataGridCreatedAt = performance.now();
 const dataGridElapsed = () => `${Math.round(performance.now() - dataGridCreatedAt)}ms`;
+const dataGridRuntimeScope = createDataGridRuntimeScope();
+const dataGridResultLifecycle = useDataGridResultLifecycle({
+  resultKey: computed(() => props.result),
+  runtimeScope: dataGridRuntimeScope,
+});
 const isMac = isMacOS();
 const shortcutMod = isMac ? "Cmd" : "Ctrl";
 const saveShortcutLabel = computed(() => formatShortcut(settingsStore.editorSettings.shortcuts.saveSql));
@@ -344,9 +311,9 @@ const emit = defineEmits<{
   "update:orderByInput": [value: string];
 }>();
 
-const autoRefreshIntervalSeconds = ref(10);
-const autoRefreshEnabled = ref(false);
-let autoRefreshTimer: ReturnType<typeof setInterval> | undefined;
+const autoRefresh = useDataGridAutoRefresh({ canRefresh: computed(() => !isSaving.value && !props.loading), refresh: onToolbarRefresh });
+const autoRefreshIntervalSeconds = autoRefresh.intervalSeconds;
+const autoRefreshEnabled = autoRefresh.enabled;
 const autoRefreshLabel = computed(() => (autoRefreshEnabled.value ? t("tabs.autoRefreshEvery", { seconds: autoRefreshIntervalSeconds.value }) : t("tabs.autoRefresh")));
 
 if (isDebugLoggingEnabled()) {
@@ -487,45 +454,28 @@ function columnIsSorted(column: string, columnIndex: number): boolean {
   return sortCol.value === column && sortColIndex.value === columnIndex;
 }
 
+function currentColumnSortState(): DataGridColumnSortState {
+  return { column: sortCol.value, columnIndex: sortColIndex.value, direction: sortDir.value, mode: sortMode.value };
+}
+
 function sortMenuItems(column: string, columnIndex: number) {
-  return [
-    {
-      label: t("grid.sortDatabaseAscending"),
-      value: "database-asc",
-      icon: Database,
-      checked: columnIsSorted(column, columnIndex) && sortDir.value === "asc" && sortMode.value === "database",
+  return createDataGridSortMenuItems({
+    column,
+    columnIndex,
+    state: currentColumnSortState(),
+    labels: {
+      databaseAscending: t("grid.sortDatabaseAscending"),
+      databaseDescending: t("grid.sortDatabaseDescending"),
+      currentPageAscending: t("grid.sortCurrentPageAscending"),
+      currentPageDescending: t("grid.sortCurrentPageDescending"),
+      clear: t("grid.clearSort"),
     },
-    {
-      label: t("grid.sortDatabaseDescending"),
-      value: "database-desc",
-      icon: Database,
-      checked: columnIsSorted(column, columnIndex) && sortDir.value === "desc" && sortMode.value === "database",
-    },
-    {
-      label: t("grid.sortCurrentPageAscending"),
-      value: "local-asc",
-      icon: ArrowUp,
-      checked: columnIsSorted(column, columnIndex) && sortDir.value === "asc" && sortMode.value === "local",
-      separatorBefore: true,
-    },
-    {
-      label: t("grid.sortCurrentPageDescending"),
-      value: "local-desc",
-      icon: ArrowDown,
-      checked: columnIsSorted(column, columnIndex) && sortDir.value === "desc" && sortMode.value === "local",
-    },
-    {
-      label: t("grid.clearSort"),
-      value: "clear",
-      icon: ArrowUpDown,
-      disabled: !columnIsSorted(column, columnIndex),
-      separatorBefore: true,
-    },
-  ];
+    icons: { database: Database, ascending: ArrowUp, descending: ArrowDown, clear: ArrowUpDown },
+  });
 }
 
 function selectedSortMenuValue(column: string, columnIndex: number): SortMenuValue | undefined {
-  return columnIsSorted(column, columnIndex) ? (`${sortMode.value}-${sortDir.value}` as SortMenuValue) : undefined;
+  return dataGridSelectedSortMenuValue(currentColumnSortState(), column, columnIndex) as SortMenuValue | undefined;
 }
 
 function typeColorClass(t: string): string {
@@ -560,586 +510,43 @@ const showMongoJsonPreview = ref(false);
 const activeCellDetailTab = ref<CellDetailTab>(defaultCellDetailTab());
 const cellDetailDialogOpen = ref(false);
 const cellDetailDialogTarget = ref<{ rowIndex: number; col: number } | null>(null);
+const cellDetailPanelRef = ref<{ openSearch: () => boolean } | null>(null);
 const rowDetailDialogOpen = ref(false);
 const rowDetailDialogRowId = ref<number | null>(null);
 const columnDetailDialogOpen = ref(false);
 const columnDetailDialogColumnIndex = ref<number | null>(null);
-const rowDetailSearch = ref("");
-const columnDetailSearch = ref("");
 const isResizingDetail = ref(false);
 const imagePreviewOpen = ref(false);
 const imagePreviewSrc = ref("");
 const imagePreviewTitle = ref("");
-const sideGeometryPreviewOpen = ref(false);
-const dialogGeometryPreviewOpen = ref(false);
-const sideGeometryCanvas = ref<HTMLCanvasElement | null>(null);
-const dialogGeometryCanvas = ref<HTMLCanvasElement | null>(null);
+const bulkEditDialogMounted = useDataGridAsyncSurface(bulkEditDialogOpen);
+const cellDetailDialogMounted = useDataGridAsyncSurface(cellDetailDialogOpen);
+const detailDialogsMounted = useDataGridAsyncSurface(computed(() => rowDetailDialogOpen.value || columnDetailDialogOpen.value));
+const imagePreviewMounted = useDataGridAsyncSurface(imagePreviewOpen);
 const previewDialogOpen = ref(false);
 const previewDialogConfig = shallowRef<{ component: any; props: Record<string, any> } | null>(null);
 const transposeScrollRef = ref<HTMLElement | { $el?: HTMLElement }>();
 const transposeScrollLeft = ref(0);
 const transposeViewportWidth = ref(0);
-const sortCol = ref<string | null>(null);
-const sortColIndex = ref<number | null>(null);
-const sortDir = ref<DataGridSortDirection>("asc");
-const sortMode = ref<DataGridSortMode>("database");
-const searchText = ref("");
-const deferredClientSearchText = ref("");
-const searchOverlayVisible = ref(false);
-const currentMatchIndex = ref(-1);
-let _searchTimer: ReturnType<typeof setTimeout> | undefined;
-
-const searchSuggestions = ref<string[]>([]);
-const suggestionIndex = ref(-1);
-const searchInputRef = ref<HTMLInputElement>();
-const measureRef = ref<HTMLSpanElement>();
-const suggestionLeft = ref(0);
-
-const whereSuggestions = ref<ConditionSuggestion[]>([]);
-const whereSuggestionIndex = ref(-1);
-const whereHistoryMenuOpen = ref(false);
-const whereFilterInputRef = ref<HTMLTextAreaElement>();
-const whereFilterOverlayRef = ref<HTMLTextAreaElement>();
-const whereConditionPaneRef = ref<HTMLDivElement>();
-const whereConditionControlRef = ref<HTMLDivElement>();
-const whereSuggestionDropdownRef = ref<HTMLDivElement>();
-const whereSuggestionPosition = ref({ left: 0, top: 0, width: 180 });
-const whereConditionRendered = ref(false);
-const whereConditionExpanded = ref(false);
-const whereConditionHeight = ref(28);
-const whereConditionRect = ref({ left: 0, top: 0, width: 0, height: 28 });
-const whereConditionScrollTop = ref(0);
-const whereConditionImmediateHeight = ref(false);
-let whereConditionCollapseTimer: ReturnType<typeof setTimeout> | undefined;
-let suppressNextWhereWatchResize = false;
-
-const orderBySuggestions = ref<ConditionSuggestion[]>([]);
-const orderBySuggestionIndex = ref(-1);
-const orderByHistoryMenuOpen = ref(false);
-const orderByInputRef = ref<HTMLTextAreaElement>();
-const orderByOverlayRef = ref<HTMLTextAreaElement>();
-const orderByConditionPaneRef = ref<HTMLDivElement>();
-const orderByConditionControlRef = ref<HTMLDivElement>();
-const orderBySuggestionDropdownRef = ref<HTMLDivElement>();
-const orderBySuggestionPosition = ref({ left: 0, top: 0, width: 180 });
-const orderByConditionRendered = ref(false);
-const orderByConditionExpanded = ref(false);
-const orderByConditionHeight = ref(28);
-const orderByConditionRect = ref({ left: 0, top: 0, width: 0, height: 28 });
-const orderByConditionScrollTop = ref(0);
-const orderByConditionImmediateHeight = ref(false);
-let orderByConditionCollapseTimer: ReturnType<typeof setTimeout> | undefined;
-let suppressNextOrderByWatchResize = false;
-const conditionHistoryPreview = ref<{ value: string; left: number; top: number; maxWidth: number; arrowTop: number; side: "left" | "right" } | null>(null);
+const { sortColumn: sortCol, sortColumnIndex: sortColIndex, sortDirection: sortDir, sortMode, setSort, clearSort } = useDataGridSort();
+const searchBarRef = ref<{ focus: (select?: boolean) => void } | null>(null);
+const dataGridSearch = useDataGridSearch({
+  columns: () => props.result.columns,
+  suggestionColumns: () => props.tableMeta?.columns.map((column) => column.name) ?? props.result.columns,
+  rows: () => displayItems.value,
+  getCellText: (row, columnIndex) => (row.data[columnIndex] === null ? "" : formatCellCached(row.data[columnIndex], columnIndex)),
+  onNavigate: () => nextTick(scrollToCurrentMatch),
+});
+const { searchText, deferredSearchText: deferredClientSearchText, overlayVisible: searchOverlayVisible, currentMatchIndex, suggestions: searchSuggestions, suggestionIndex, matches: searchMatches, matchSet: searchMatchSet, currentMatch: currentSearchMatch } = dataGridSearch;
 
 const orderByInput = ref(props.initialOrderByInput ?? "");
-const hasOrderByInput = computed(() => orderByInput.value.trim().length > 0);
 const whereFilterInput = ref(props.initialWhereInput ?? "");
-let previousWhereFilterInputValue = whereFilterInput.value;
-let suppressWhereHistoryOnNextEmptyInput = false;
-let suppressOrderByHistoryOnNextEmptyInput = false;
-const hasWhereFilterInput = computed(() => whereFilterInput.value.trim().length > 0);
 const conditionHistoryScope = computed(() => ({
   connectionId: props.connectionId,
   database: props.database,
   schema: props.tableMeta?.schema ?? props.schema,
   tableName: props.tableMeta?.tableName,
 }));
-const searchSplitContainerRef = ref<HTMLDivElement>();
-const searchSplitWhereWidth = ref<number | null>(null);
-const isResizingSearchSplit = ref(false);
-let searchSplitStartX = 0;
-let searchSplitStartWidth = 0;
-
-const whereSearchPaneStyle = computed(() => {
-  if (searchSplitWhereWidth.value == null) return {};
-  return {
-    flex: `0 0 ${searchSplitWhereWidth.value}px`,
-  };
-});
-
-const whereSuggestionStyle = computed(() => ({
-  left: `${whereSuggestionPosition.value.left}px`,
-  top: `${whereSuggestionPosition.value.top}px`,
-  width: `${whereSuggestionPosition.value.width}px`,
-}));
-const showWhereSuggestionDropdown = computed(() => whereSuggestions.value.length > 0 || whereHistoryMenuOpen.value);
-const whereHistoryEmptyText = computed(() => (whereFilterInput.value.trim() ? t("grid.conditionHistoryNoMatches") : t("grid.conditionHistoryEmpty")));
-
-const orderBySuggestionStyle = computed(() => ({
-  left: `${orderBySuggestionPosition.value.left}px`,
-  top: `${orderBySuggestionPosition.value.top}px`,
-  width: `${orderBySuggestionPosition.value.width}px`,
-}));
-const showOrderBySuggestionDropdown = computed(() => orderBySuggestions.value.length > 0 || orderByHistoryMenuOpen.value);
-const orderByHistoryEmptyText = computed(() => (orderByInput.value.trim() ? t("grid.conditionHistoryNoMatches") : t("grid.conditionHistoryEmpty")));
-const conditionHistoryPreviewStyle = computed<CSSProperties>(() => {
-  const preview = conditionHistoryPreview.value;
-  if (!preview) return {};
-  return {
-    left: `${preview.left}px`,
-    maxWidth: `${preview.maxWidth}px`,
-    top: `${preview.top}px`,
-  };
-});
-const conditionHistoryPreviewArrowStyle = computed<CSSProperties>(() => {
-  const preview = conditionHistoryPreview.value;
-  if (!preview) return {};
-  return {
-    top: `${preview.arrowTop}px`,
-  };
-});
-
-type ConditionInputKind = "where" | "orderBy";
-const CONDITION_EXPANDED_MAX_HEIGHT = 260;
-
-function conditionInputRef(kind: ConditionInputKind) {
-  return kind === "where" ? whereFilterInputRef.value : orderByInputRef.value;
-}
-
-function conditionOverlayRef(kind: ConditionInputKind) {
-  return kind === "where" ? whereFilterOverlayRef.value : orderByOverlayRef.value;
-}
-
-function conditionPaneRef(kind: ConditionInputKind) {
-  return kind === "where" ? whereConditionPaneRef.value : orderByConditionPaneRef.value;
-}
-
-function conditionControlRef(kind: ConditionInputKind) {
-  return kind === "where" ? whereConditionControlRef.value : orderByConditionControlRef.value;
-}
-
-function conditionEditorRef(kind: ConditionInputKind) {
-  return conditionOverlayRef(kind) ?? conditionInputRef(kind);
-}
-
-function conditionInputTextWidth(input: HTMLTextAreaElement): number {
-  const probe = document.createElement("span");
-  const style = window.getComputedStyle(input);
-  probe.textContent = input.value || input.placeholder || "";
-  probe.style.cssText = `
-    position: fixed;
-    left: -9999px;
-    top: -9999px;
-    visibility: hidden;
-    white-space: pre;
-    font: ${style.font};
-    font-size: ${style.fontSize};
-    font-family: ${style.fontFamily};
-    font-weight: ${style.fontWeight};
-    letter-spacing: ${style.letterSpacing};
-  `;
-  document.body.appendChild(probe);
-  const width = probe.getBoundingClientRect().width;
-  probe.remove();
-  return width;
-}
-
-function conditionInputShouldExpand(input: HTMLTextAreaElement): boolean {
-  return input.value.length > 0 && conditionInputTextWidth(input) > input.clientWidth + 1;
-}
-
-function conditionInputContentHeight(input: HTMLTextAreaElement): number {
-  const probe = document.createElement("div");
-  const style = window.getComputedStyle(input);
-  probe.textContent = input.value || input.placeholder || "";
-  probe.style.cssText = `
-    position: fixed;
-    left: -9999px;
-    top: -9999px;
-    visibility: hidden;
-    box-sizing: border-box;
-    width: ${input.clientWidth}px;
-    min-height: 0;
-    padding: ${style.paddingTop} ${style.paddingRight} ${style.paddingBottom} ${style.paddingLeft};
-    border: 0;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-    font: ${style.font};
-    font-size: ${style.fontSize};
-    font-family: ${style.fontFamily};
-    font-weight: ${style.fontWeight};
-    line-height: ${style.lineHeight};
-    letter-spacing: ${style.letterSpacing};
-    text-indent: ${style.textIndent};
-  `;
-  document.body.appendChild(probe);
-  const height = probe.scrollHeight;
-  probe.remove();
-  return height;
-}
-
-function conditionExpandedHeight(input: HTMLTextAreaElement): number {
-  const style = window.getComputedStyle(input);
-  const lineHeight = Number.parseFloat(style.lineHeight) || 24;
-  const inputRect = input.getBoundingClientRect();
-  const pane = input.parentElement;
-  const paneRect = pane?.getBoundingClientRect();
-  const verticalInset = paneRect ? Math.max(0, inputRect.top - paneRect.top) + Math.max(0, paneRect.bottom - inputRect.bottom) : 0;
-  const minimumHeight = Math.max(56, lineHeight * 2.5);
-  const availableHeight = Math.max(minimumHeight, window.innerHeight - input.getBoundingClientRect().top - 12);
-  const contentHeight = conditionInputContentHeight(input);
-  return Math.min(Math.max(minimumHeight, contentHeight + verticalInset), Math.min(CONDITION_EXPANDED_MAX_HEIGHT, availableHeight));
-}
-
-function conditionCaretTop(input: HTMLTextAreaElement, caretIndex: number): number {
-  const probe = document.createElement("div");
-  const style = window.getComputedStyle(input);
-  const textBeforeCaret = input.value.slice(0, caretIndex);
-  probe.textContent = textBeforeCaret || " ";
-  probe.style.cssText = `
-    position: fixed;
-    left: -9999px;
-    top: -9999px;
-    visibility: hidden;
-    box-sizing: border-box;
-    width: ${input.clientWidth}px;
-    min-height: 0;
-    padding: ${style.paddingTop} ${style.paddingRight} ${style.paddingBottom} ${style.paddingLeft};
-    border: 0;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-    font: ${style.font};
-    font-size: ${style.fontSize};
-    font-family: ${style.fontFamily};
-    font-weight: ${style.fontWeight};
-    line-height: ${style.lineHeight};
-    letter-spacing: ${style.letterSpacing};
-    text-indent: ${style.textIndent};
-  `;
-  document.body.appendChild(probe);
-  const lineHeight = Number.parseFloat(style.lineHeight) || 24;
-  const top = Math.max(0, probe.scrollHeight - lineHeight);
-  probe.remove();
-  return top;
-}
-
-function setConditionScrollTop(kind: ConditionInputKind, scrollTop: number) {
-  if (kind === "where") {
-    whereConditionScrollTop.value = scrollTop;
-  } else {
-    orderByConditionScrollTop.value = scrollTop;
-  }
-}
-
-function scrollConditionCaretIntoView(kind: ConditionInputKind, input: HTMLTextAreaElement, caretIndex: number) {
-  const caretTop = conditionCaretTop(input, caretIndex);
-  const lineHeight = Number.parseFloat(window.getComputedStyle(input).lineHeight) || 24;
-  const topPadding = lineHeight * 0.5;
-  const maxScrollTop = Math.max(0, input.scrollHeight - input.clientHeight);
-  input.scrollTop = Math.min(Math.max(0, caretTop - topPadding), maxScrollTop);
-  setConditionScrollTop(kind, input.scrollTop);
-}
-
-function conditionCollapsedHeight(kind: ConditionInputKind) {
-  const pane = conditionPaneRef(kind) ?? conditionControlRef(kind);
-  return pane ? pane.getBoundingClientRect().height : 28;
-}
-
-function clearConditionCollapseTimer(kind: ConditionInputKind) {
-  if (kind === "where") {
-    if (whereConditionCollapseTimer) clearTimeout(whereConditionCollapseTimer);
-    whereConditionCollapseTimer = undefined;
-  } else {
-    if (orderByConditionCollapseTimer) clearTimeout(orderByConditionCollapseTimer);
-    orderByConditionCollapseTimer = undefined;
-  }
-}
-
-function conditionPaneRendered(kind: ConditionInputKind) {
-  return kind === "where" ? whereConditionRendered.value : orderByConditionRendered.value;
-}
-
-function setConditionRendered(kind: ConditionInputKind, rendered: boolean) {
-  if (kind === "where") {
-    whereConditionRendered.value = rendered;
-  } else {
-    orderByConditionRendered.value = rendered;
-  }
-}
-
-function conditionPaneExpanded(kind: ConditionInputKind) {
-  return kind === "where" ? whereConditionExpanded.value : orderByConditionExpanded.value;
-}
-
-function setConditionExpandedState(kind: ConditionInputKind, expanded: boolean) {
-  if (kind === "where") {
-    whereConditionExpanded.value = expanded;
-  } else {
-    orderByConditionExpanded.value = expanded;
-  }
-}
-
-function queueConditionPaneRemoval(kind: ConditionInputKind) {
-  clearConditionCollapseTimer(kind);
-  const timer = setTimeout(() => {
-    if (!conditionPaneExpanded(kind)) setConditionRendered(kind, false);
-  }, 160);
-  if (kind === "where") {
-    whereConditionCollapseTimer = timer;
-  } else {
-    orderByConditionCollapseTimer = timer;
-  }
-}
-
-function setConditionExpanded(kind: ConditionInputKind, expanded: boolean) {
-  if (expanded) {
-    const wasRendered = conditionPaneRendered(kind);
-    clearConditionCollapseTimer(kind);
-    setConditionRendered(kind, true);
-    if (wasRendered) {
-      setConditionExpandedState(kind, true);
-    } else {
-      setConditionExpandedState(kind, false);
-      requestAnimationFrame(() => requestAnimationFrame(() => setConditionExpandedState(kind, true)));
-    }
-    return;
-  }
-  setConditionExpandedState(kind, false);
-  queueConditionPaneRemoval(kind);
-}
-
-function setConditionHeight(kind: ConditionInputKind, height: number) {
-  if (kind === "where") {
-    whereConditionHeight.value = height;
-  } else {
-    orderByConditionHeight.value = height;
-  }
-}
-
-function setConditionRect(kind: ConditionInputKind, rect: DOMRect) {
-  const nextRect = {
-    left: rect.left,
-    top: rect.top,
-    width: rect.width,
-    height: rect.height,
-  };
-  if (kind === "where") {
-    whereConditionRect.value = nextRect;
-  } else {
-    orderByConditionRect.value = nextRect;
-  }
-}
-
-function conditionInputInsets(kind: ConditionInputKind) {
-  const pane = conditionPaneRef(kind);
-  const input = conditionInputRef(kind);
-  const control = conditionControlRef(kind);
-  if (!pane || !input) {
-    return { controlsTop: 3, inputTop: 3, prefix: 0, suffix: 0 };
-  }
-  const paneRect = pane.getBoundingClientRect();
-  const inputRect = input.getBoundingClientRect();
-  const controlRect = control?.getBoundingClientRect();
-  const paneStyle = window.getComputedStyle(pane);
-  const paddingLeft = Number.parseFloat(paneStyle.paddingLeft) || 0;
-  const paddingRight = Number.parseFloat(paneStyle.paddingRight) || 0;
-  return {
-    controlsTop: Math.max(0, (controlRect?.top ?? inputRect.top) - paneRect.top),
-    inputTop: Math.max(0, inputRect.top - paneRect.top),
-    prefix: Math.max(0, inputRect.left - paneRect.left - paddingLeft),
-    suffix: Math.max(28, paneRect.right - inputRect.right - paddingRight),
-  };
-}
-
-function conditionPaneStyle(kind: ConditionInputKind): CSSProperties {
-  const rendered = conditionPaneRendered(kind);
-  const expanded = conditionPaneExpanded(kind);
-  const height = kind === "where" ? whereConditionHeight.value : orderByConditionHeight.value;
-  const immediateHeight = kind === "where" ? whereConditionImmediateHeight.value : orderByConditionImmediateHeight.value;
-  if (!rendered) return {};
-  const rect = kind === "where" ? whereConditionRect.value : orderByConditionRect.value;
-  const collapsedHeight = rect.height || 28;
-  const insets = conditionInputInsets(kind);
-  return {
-    "--data-grid-condition-controls-top": `${insets.controlsTop}px`,
-    "--data-grid-condition-input-top": `${insets.inputTop}px`,
-    "--data-grid-condition-prefix-indent": `${insets.prefix}px`,
-    "--data-grid-condition-suffix-width": `${insets.suffix}px`,
-    height: `${expanded ? height : collapsedHeight}px`,
-    left: `${rect.left}px`,
-    pointerEvents: expanded ? "auto" : "none",
-    top: `${rect.top}px`,
-    transition: immediateHeight ? "box-shadow 150ms ease" : undefined,
-    width: `${rect.width}px`,
-  };
-}
-
-function conditionTopbarOverlayStyle(kind: ConditionInputKind): CSSProperties {
-  const scrollTop = kind === "where" ? whereConditionScrollTop.value : orderByConditionScrollTop.value;
-  return {
-    transform: `translateY(${-scrollTop}px)`,
-  };
-}
-
-function focusConditionOverlay(kind: ConditionInputKind, source: HTMLTextAreaElement) {
-  window.setTimeout(() => {
-    const overlay = conditionOverlayRef(kind);
-    if (!overlay) return;
-    const start = source.selectionStart ?? source.value.length;
-    const end = source.selectionEnd ?? start;
-    overlay.focus();
-    overlay.setSelectionRange(start, end);
-    scrollConditionCaretIntoView(kind, overlay, start);
-    requestAnimationFrame(() => scrollConditionCaretIntoView(kind, overlay, start));
-    updateConditionSuggestionPosition(kind);
-  }, 0);
-}
-
-function focusConditionInput(kind: ConditionInputKind, source: HTMLTextAreaElement) {
-  const input = conditionInputRef(kind);
-  if (!input) return;
-  const start = source.selectionStart ?? source.value.length;
-  const end = source.selectionEnd ?? start;
-  nextTick(() => {
-    input.focus();
-    input.setSelectionRange(start, end);
-    updateConditionSuggestionPosition(kind);
-  });
-}
-
-function onConditionOverlayScroll(kind: ConditionInputKind, event: Event) {
-  const input = event.target instanceof HTMLTextAreaElement ? event.target : null;
-  if (!input) return;
-  setConditionScrollTop(kind, input.scrollTop);
-}
-
-function resetConditionOverlayScrollIfContentFits(kind: ConditionInputKind) {
-  requestAnimationFrame(() => {
-    const overlay = conditionOverlayRef(kind);
-    const pane = overlay?.parentElement;
-    if (!overlay || !pane || overlay.scrollHeight > overlay.clientHeight + 1 || pane.getBoundingClientRect().height >= CONDITION_EXPANDED_MAX_HEIGHT - 1) return;
-    overlay.scrollTop = 0;
-    setConditionScrollTop(kind, 0);
-  });
-}
-
-function onConditionOverlayClick(kind: ConditionInputKind) {
-  if (kind === "where") {
-    if (whereHistoryMenuOpen.value) {
-      dismissWhereSuggestions();
-      return;
-    }
-    updateWhereSuggestionPosition();
-  } else {
-    if (orderByHistoryMenuOpen.value) {
-      dismissOrderBySuggestions();
-      return;
-    }
-    updateOrderBySuggestionPosition();
-  }
-}
-
-function resizeConditionInput(kind: ConditionInputKind, options: { focusOverlay?: boolean; expandFromFocus?: boolean; immediateHeight?: boolean } = {}) {
-  nextTick(() => {
-    const input = conditionInputRef(kind);
-    if (!input) return;
-    const editor = conditionEditorRef(kind) ?? input;
-    const focused = document.activeElement === input || document.activeElement === conditionOverlayRef(kind);
-    const expanded = focused && conditionInputShouldExpand(input) && (options.expandFromFocus || document.activeElement === conditionOverlayRef(kind));
-    const shouldRestoreInputFocus = !expanded && document.activeElement === conditionOverlayRef(kind);
-    if (shouldRestoreInputFocus && editor instanceof HTMLTextAreaElement) focusConditionInput(kind, editor);
-    if (expanded) setConditionRect(kind, (conditionPaneRef(kind) ?? conditionControlRef(kind) ?? input).getBoundingClientRect());
-    setConditionExpanded(kind, expanded);
-    requestAnimationFrame(() => {
-      if (!expanded) {
-        if (kind === "where") whereConditionImmediateHeight.value = false;
-        else orderByConditionImmediateHeight.value = false;
-        setConditionHeight(kind, conditionCollapsedHeight(kind));
-        return;
-      }
-      if (options.immediateHeight) {
-        if (kind === "where") whereConditionImmediateHeight.value = true;
-        else orderByConditionImmediateHeight.value = true;
-      }
-      setConditionHeight(kind, conditionExpandedHeight(editor));
-      if (options.immediateHeight) {
-        requestAnimationFrame(() => {
-          if (kind === "where") whereConditionImmediateHeight.value = false;
-          else orderByConditionImmediateHeight.value = false;
-        });
-      }
-      updateConditionSuggestionPosition(kind);
-      if (options.focusOverlay && document.activeElement === input) focusConditionOverlay(kind, input);
-      else resetConditionOverlayScrollIfContentFits(kind);
-    });
-  });
-}
-
-function onConditionInputClick(kind: ConditionInputKind) {
-  if (kind === "where" && showWhereSuggestionDropdown.value) {
-    dismissWhereSuggestions();
-    resizeConditionInput(kind, { expandFromFocus: true, focusOverlay: true });
-    return;
-  }
-  if (kind === "orderBy" && showOrderBySuggestionDropdown.value) {
-    dismissOrderBySuggestions();
-    resizeConditionInput(kind, { expandFromFocus: true, focusOverlay: true });
-    return;
-  }
-  updateConditionSuggestionPosition(kind);
-  resizeConditionInput(kind, { expandFromFocus: true, focusOverlay: true });
-}
-
-function collapseConditionInput(kind: ConditionInputKind) {
-  setConditionExpanded(kind, false);
-  setConditionHeight(kind, conditionCollapsedHeight(kind));
-  setConditionScrollTop(kind, 0);
-}
-
-function collapseConditionInputAfterBlur(kind: ConditionInputKind) {
-  window.setTimeout(() => {
-    const input = conditionInputRef(kind);
-    const overlay = conditionOverlayRef(kind);
-    if (document.activeElement === input || document.activeElement === overlay) return;
-    collapseConditionInput(kind);
-  }, 0);
-}
-
-function resizeFocusedConditionInputs() {
-  resizeConditionInput("where");
-  resizeConditionInput("orderBy");
-}
-
-function normalizeConditionInputValue(value: string) {
-  return value.replace(/\s*\r?\n\s*/g, " ");
-}
-
-function updateConditionSuggestionPosition(kind: ConditionInputKind) {
-  if (kind === "where") {
-    updateWhereSuggestionPosition();
-  } else {
-    updateOrderBySuggestionPosition();
-  }
-}
-
-function showConditionHistoryPreview(value: string, event: MouseEvent) {
-  const target = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
-  if (!target) return;
-  const textElement = target.querySelector<HTMLElement>("[data-condition-history-text]");
-  if (!textElement || textElement.scrollWidth <= textElement.clientWidth + 1) {
-    hideConditionHistoryPreview();
-    return;
-  }
-  const rect = target.getBoundingClientRect();
-  const gap = 10;
-  const minWidth = 280;
-  const preferredWidth = 560;
-  const availableRight = window.innerWidth - rect.right - gap - 8;
-  const availableLeft = rect.left - gap - 8;
-  const placeRight = availableRight >= minWidth || availableRight >= availableLeft;
-  const maxWidth = Math.max(minWidth, Math.min(preferredWidth, placeRight ? availableRight : availableLeft));
-  const left = placeRight ? rect.right + gap : Math.max(8, rect.left - gap - maxWidth);
-  const estimatedHeight = Math.min(260, Math.max(56, Math.ceil(value.length / 58) * 18 + 24));
-  const top = Math.min(Math.max(8, rect.top), Math.max(8, window.innerHeight - estimatedHeight - 8));
-  const arrowTop = Math.min(Math.max(14, rect.top + rect.height / 2 - top), estimatedHeight - 14);
-  conditionHistoryPreview.value = { value, left, top, maxWidth, arrowTop, side: placeRight ? "left" : "right" };
-}
-
-function hideConditionHistoryPreview() {
-  conditionHistoryPreview.value = null;
-}
-
 type LocalFilterMode = "local" | "server";
 type LocalFilterOption = {
   key: string;
@@ -1157,15 +564,7 @@ type LocalColumnFilterDraft = {
 
 type FilterMode = DataGridContextFilterMode;
 
-type StructuredFilterRule = {
-  id: string;
-  columnName: string;
-  mode: FilterMode;
-  rawValue: string;
-  rawEndValue: string;
-  conjunction: "AND" | "OR";
-  disabled?: boolean;
-};
+type StructuredFilterRule = DataGridStructuredFilterRule;
 
 const localColumnFilters = ref<Record<number, Set<string>>>({});
 const localFilterOpenColumn = ref<number | null>(null);
@@ -1181,11 +580,9 @@ const serverFilterError = ref("");
 const serverFilterOptions = ref<LocalFilterOption[]>([]);
 const serverFilterLimited = ref(false);
 const serverFilterValueByKey = ref<Map<string, CellValue>>(new Map());
-const serverColumnFilters = ref<Record<number, CachedServerColumnFilter>>({});
+const serverColumnFilters = ref<Record<number, DataGridCachedServerColumnFilter>>({});
 let serverFilterRequestId = 0;
 let serverFilterSearchTimer: ReturnType<typeof window.setTimeout> | undefined;
-const filterBuilderOpen = ref(false);
-const filterBuilderColumnSearch = ref("");
 const allFilterModeOptions: Array<{ value: FilterMode; labelKey: string }> = [
   { value: "equals", labelKey: "grid.filterBuilderEquals" },
   { value: "not-equals", labelKey: "grid.filterBuilderNotEquals" },
@@ -1203,16 +600,34 @@ const allFilterModeOptions: Array<{ value: FilterMode; labelKey: string }> = [
 const filterModeOptions = computed(() => allFilterModeOptions.filter((option) => filterModeIsSupportedForDatabase(option.value, resolvedDatabaseType.value)));
 const filterBuilderColumns = computed(() => props.tableMeta?.columns ?? []);
 const filterBuilderColumnOptions = computed(() => filterBuilderColumns.value.map((column) => column.name));
-const filteredFilterBuilderColumnOptions = computed(() => {
-  const query = filterBuilderColumnSearch.value.trim().toLowerCase();
-  if (!query) return filterBuilderColumnOptions.value;
-  return filterBuilderColumnOptions.value.filter((columnName) => columnName.toLowerCase().includes(query));
-});
-const filterBuilderColumnSearchNavigationKeys = new Set(["Escape", "Tab", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown"]);
 const structuredFilterCacheKey = computed(() => props.cacheKey || [props.connectionId ?? "", props.database ?? "", props.context ?? "", props.tableMeta?.schema ?? "", props.tableMeta?.tableName ?? ""].join("\u0001"));
 const structuredFilterScopeKey = computed(() => [props.connectionId ?? "", props.database ?? "", props.schema ?? "", props.context ?? "", props.tableMeta?.schema ?? "", props.tableMeta?.tableName ?? "", filterBuilderColumnOptions.value.join("\0")].join("\u0001"));
-const structuredFilterRules = ref<StructuredFilterRule[]>([]);
-const appliedStructuredWhereInput = ref("");
+const filterBuilder = useDataGridFilterBuilder({
+  columns: filterBuilderColumnOptions,
+  createId: uuid,
+  isComplete: (rule) => filterModeIsSupportedForDatabase(rule.mode, resolvedDatabaseType.value) && filterModeHasCompleteValue(rule.mode, rule.rawValue, rule.rawEndValue),
+  buildCondition: async (rule) => {
+    const columnInfo = filterBuilderColumns.value.find((column) => column.name === rule.columnName);
+    const usesList = filterModeUsesList(rule.mode);
+    const usesRange = filterModeUsesRange(rule.mode);
+    return (
+      (await buildDataGridContextFilterCondition({
+        databaseType: resolvedDatabaseType.value,
+        columnName: rule.columnName,
+        columnInfo,
+        mode: rule.mode,
+        value: !usesList && filterModeNeedsValue(rule.mode) ? parseFilterValue(rule.rawValue, columnInfo, resolvedDatabaseType.value) : null,
+        values: usesList ? parseFilterValues(rule.rawValue, columnInfo, resolvedDatabaseType.value) : undefined,
+        endValue: usesRange ? parseFilterValue(rule.rawEndValue, columnInfo, resolvedDatabaseType.value) : undefined,
+      })) ?? undefined
+    );
+  },
+});
+const structuredFilterRules = filterBuilder.rules;
+const filterBuilderOpen = filterBuilder.open;
+const filterBuilderColumnSearch = filterBuilder.columnSearch;
+const filteredFilterBuilderColumnOptions = filterBuilder.filteredColumns;
+const appliedStructuredWhereInput = filterBuilder.appliedWhereInput;
 const structuredFilterCount = computed(() => structuredFilterRules.value.filter((rule) => !rule.disabled && !!rule.columnName && filterModeHasCompleteValue(rule.mode, rule.rawValue, rule.rawEndValue)).length);
 const hasStructuredFilters = computed(() => !!combineWhereInputs(undefined, appliedStructuredWhereInput.value));
 const formatterOpenColumn = ref<number | null>(null);
@@ -1496,28 +911,12 @@ function openCompactLocalFilter(colIdx: number, mode: LocalFilterMode = "local")
 }
 
 function compactColumnActionMenuItems(columnName: string) {
-  return [
-    {
-      label: t("grid.columnFormatter"),
-      value: "formatter",
-      icon: Code2,
-      disabled: !formatterKeyForColumn(columnName),
-    },
-    {
-      label: t("grid.localFilter"),
-      value: "localFilter",
-      icon: Filter,
-    },
-    ...(canUseServerColumnFilter.value
-      ? [
-          {
-            label: t("grid.databaseValueFilter"),
-            value: "serverFilter",
-            icon: Database,
-          },
-        ]
-      : []),
-  ];
+  return createDataGridCompactColumnActionItems({
+    labels: { formatter: t("grid.columnFormatter"), localFilter: t("grid.localFilter"), serverFilter: t("grid.databaseValueFilter") },
+    icons: { formatter: Code2, filter: Filter, database: Database },
+    formatterAvailable: !!formatterKeyForColumn(columnName),
+    serverFilterAvailable: canUseServerColumnFilter.value,
+  });
 }
 
 function columnFilterPanelTitle(columnName: string): string {
@@ -1876,27 +1275,11 @@ watch(localFilterSearch, (value) => {
 });
 
 function defaultStructuredFilterRule(): StructuredFilterRule {
-  return {
-    id: uuid(),
-    columnName: filterBuilderColumnOptions.value[0] ?? "",
-    mode: "equals",
-    rawValue: "",
-    rawEndValue: "",
-    conjunction: "AND",
-  };
+  return filterBuilder.defaultRule();
 }
 
-function filterModeUsesExpandedLayout(mode: FilterMode): boolean {
-  return filterModeUsesList(mode) || filterModeUsesRange(mode);
-}
-
-function cloneStructuredFilterRules(rules: StructuredFilterRule[]): StructuredFilterRule[] {
-  return rules.map((rule) => ({ ...rule }));
-}
-
-function cachedStructuredFilterState(): StructuredFilterCacheState | undefined {
-  const cached = structuredFilterStateCache.get(structuredFilterCacheKey.value);
-  return cached?.scopeKey === structuredFilterScopeKey.value ? cached : undefined;
+function cachedStructuredFilterState(): DataGridStructuredFilterCacheState | undefined {
+  return loadDataGridStructuredFilterState(structuredFilterCacheKey.value, structuredFilterScopeKey.value);
 }
 
 async function buildStructuredWhereFromRules(rules: StructuredFilterRule[]): Promise<string> {
@@ -1934,10 +1317,10 @@ async function buildStructuredWhereFromRules(rules: StructuredFilterRule[]): Pro
 }
 
 function persistStructuredFilterState() {
-  structuredFilterStateCache.set(structuredFilterCacheKey.value, {
+  saveDataGridStructuredFilterState(structuredFilterCacheKey.value, {
     scopeKey: structuredFilterScopeKey.value,
     manualWhereInput: whereFilterInput.value,
-    rules: cloneStructuredFilterRules(structuredFilterRules.value),
+    rules: cloneDataGridStructuredFilterRules(structuredFilterRules.value),
     appliedWhereInput: appliedStructuredWhereInput.value,
     // Vue wraps ref-held objects in proxies; structuredClone cannot clone those proxies.
     serverColumnFilters: structuredClone(toRaw(serverColumnFilters.value)),
@@ -1949,7 +1332,7 @@ function loadStructuredFilterStateForScope() {
   if (cached) {
     const cacheKey = structuredFilterCacheKey.value;
     const scopeKey = structuredFilterScopeKey.value;
-    structuredFilterRules.value = cloneStructuredFilterRules(cached.rules);
+    structuredFilterRules.value = cloneDataGridStructuredFilterRules(cached.rules);
     whereFilterInput.value = cached.manualWhereInput;
     serverColumnFilters.value = structuredClone(cached.serverColumnFilters ?? {});
     appliedStructuredWhereInput.value = "";
@@ -1967,64 +1350,23 @@ function loadStructuredFilterStateForScope() {
 }
 
 function ensureStructuredFilterRule() {
-  if (structuredFilterRules.value.length === 0 && filterBuilderColumnOptions.value.length > 0) {
-    structuredFilterRules.value = [defaultStructuredFilterRule()];
-  }
-}
-
-function openStructuredFilterFromExpandedWhere() {
-  collapseConditionInput("where");
-  ensureStructuredFilterRule();
-  filterBuilderOpen.value = true;
+  filterBuilder.ensureRule();
 }
 
 function addStructuredFilterRule() {
-  ensureStructuredFilterRule();
-  structuredFilterRules.value = [...structuredFilterRules.value, defaultStructuredFilterRule()];
+  filterBuilder.addRule();
 }
 
 function removeStructuredFilterRule(ruleId: string) {
-  structuredFilterRules.value = structuredFilterRules.value.filter((rule) => rule.id !== ruleId);
-  if (structuredFilterRules.value.length === 0) {
-    appliedStructuredWhereInput.value = "";
-  }
+  filterBuilder.removeRule(ruleId);
 }
 
 function updateStructuredFilterRule(ruleId: string, patch: Partial<StructuredFilterRule>) {
-  structuredFilterRules.value = structuredFilterRules.value.map((rule) => {
-    if (rule.id !== ruleId) return rule;
-    const next = { ...rule, ...patch };
-    if (!filterModeNeedsValue(next.mode)) {
-      next.rawValue = "";
-      next.rawEndValue = "";
-    } else if (!filterModeUsesRange(next.mode)) {
-      next.rawEndValue = "";
-    }
-    return next;
-  });
-}
-
-function updateStructuredFilterRuleColumn(ruleId: string, columnName: string) {
-  updateStructuredFilterRule(ruleId, { columnName });
-  filterBuilderColumnSearch.value = "";
-}
-
-function handleFilterBuilderColumnSearchKeydown(event: KeyboardEvent) {
-  if (event.isComposing || event.key === "Process") {
-    event.stopPropagation();
-    return;
-  }
-  if (filterBuilderColumnSearchNavigationKeys.has(event.key)) return;
-  if (event.ctrlKey || event.metaKey || event.altKey) return;
-  if (event.key.length === 1 || event.key === "Backspace" || event.key === "Delete") {
-    // Let text editing stay in the search box without breaking Select navigation keys.
-    event.stopPropagation();
-  }
+  filterBuilder.updateRule(ruleId, patch);
 }
 
 function resetStructuredFilters() {
-  appliedStructuredWhereInput.value = "";
-  structuredFilterRules.value = filterBuilderColumnOptions.value.length > 0 ? [defaultStructuredFilterRule()] : [];
+  filterBuilder.reset();
 }
 
 async function clearAllFilters() {
@@ -2078,10 +1420,6 @@ async function applyStructuredFilters() {
 
 watch([structuredFilterCacheKey, structuredFilterScopeKey], loadStructuredFilterStateForScope, { immediate: true });
 
-watch(filterBuilderOpen, (open) => {
-  if (!open) filterBuilderColumnSearch.value = "";
-});
-
 watch(
   [structuredFilterRules, appliedStructuredWhereInput, serverColumnFilters],
   () => {
@@ -2095,50 +1433,8 @@ watch(
   { deep: true },
 );
 
-function updateSuggestionPosition() {
-  nextTick(() => {
-    const input = searchInputRef.value;
-    const measure = measureRef.value;
-    if (!input || !measure) return;
-    const cursorPos = input.selectionStart ?? 0;
-    measure.textContent = searchText.value.slice(0, cursorPos);
-    suggestionLeft.value = measure.getBoundingClientRect().width;
-  });
-}
-
-watch(searchText, (val) => {
-  searchSuggestions.value = [];
-  if (!props.tableMeta?.columns?.length) return;
-
-  const trimmed = val.trim();
-  if (trimmed.length === 0) return;
-
-  const lastToken = trimmed.split(/[\s,()><=!&|]+/).pop() || "";
-  if (lastToken.length > 0) {
-    const tl = lastToken.toLowerCase();
-    searchSuggestions.value = props.tableMeta.columns
-      .map((c) => c.name)
-      .filter((n) => n.toLowerCase().startsWith(tl) && n.toLowerCase() !== tl)
-      .slice(0, 8);
-    suggestionIndex.value = 0;
-    updateSuggestionPosition();
-  }
-});
-
 function acceptSuggestion() {
-  const idx = suggestionIndex.value;
-  if (idx < 0 || idx >= searchSuggestions.value.length) return;
-  const sug = searchSuggestions.value[idx];
-
-  const lastWordMatch = searchText.value.match(/([^\s,()><=!&|]+)$/);
-  if (lastWordMatch) {
-    const lastWord = lastWordMatch[1];
-    const prefix = searchText.value.slice(0, -lastWord.length);
-    searchText.value = prefix + sug;
-  }
-  searchSuggestions.value = [];
-  suggestionIndex.value = -1;
-  searchInputRef.value?.focus();
+  if (dataGridSearch.acceptSuggestion()) searchBarRef.value?.focus();
 }
 
 function dismissSuggestions() {
@@ -2147,26 +1443,19 @@ function dismissSuggestions() {
 }
 
 function navigateSuggestion(delta: number) {
-  if (searchSuggestions.value.length === 0) return;
-  suggestionIndex.value = Math.min(Math.max(suggestionIndex.value + delta, 0), searchSuggestions.value.length - 1);
+  dataGridSearch.navigateSuggestion(delta);
 }
 
 function focusSearch(): boolean {
   searchOverlayVisible.value = true;
   nextTick(() => {
-    const input = searchInputRef.value;
-    if (!input) return;
-    input.focus();
-    input.select();
-    updateSuggestionPosition();
+    searchBarRef.value?.focus(true);
   });
   return true;
 }
 
 function closeSearch() {
-  searchOverlayVisible.value = false;
-  searchText.value = "";
-  searchSuggestions.value = [];
+  dataGridSearch.close();
 }
 
 const PAIRS: Record<string, string> = { "'": "'", '"': '"', "(": ")" };
@@ -2239,387 +1528,25 @@ function onSearchKeydown(e: KeyboardEvent) {
   }
 }
 
-// --- WHERE filter input suggestions ---
-function updateWhereSuggestionPosition() {
-  nextTick(() => {
-    const input = conditionEditorRef("where");
-    if (!input) return;
-    const inputRect = input.getBoundingClientRect();
-    whereSuggestionPosition.value = getDataGridConditionSuggestionPosition(inputRect, { viewportWidth: window.innerWidth });
-  });
-}
-
-function acceptWhereSuggestion() {
-  const idx = whereSuggestionIndex.value;
-  if (idx < 0 || idx >= whereSuggestions.value.length) return;
-  const sug = whereSuggestions.value[idx];
-  if (sug.kind === "history") {
-    whereFilterInput.value = sug.value;
-    whereSuggestions.value = [];
-    whereSuggestionIndex.value = -1;
-    whereHistoryMenuOpen.value = false;
-    conditionEditorRef("where")?.focus();
-    return;
-  }
-  const lastWordMatch = whereFilterInput.value.match(/([^\s,()><=!&|]+)$/);
-  if (lastWordMatch) {
-    const lastWord = lastWordMatch[1];
-    const prefix = whereFilterInput.value.slice(0, -lastWord.length);
-    whereFilterInput.value = prefix + sug.value;
-  }
-  whereSuggestions.value = [];
-  whereSuggestionIndex.value = -1;
-  whereHistoryMenuOpen.value = false;
-  conditionEditorRef("where")?.focus();
-}
-
-function dismissWhereSuggestions() {
-  whereSuggestions.value = [];
-  whereSuggestionIndex.value = -1;
-  whereHistoryMenuOpen.value = false;
-  hideConditionHistoryPreview();
-}
-
-function eventTargetInside(event: Event, ...elements: Array<HTMLElement | undefined>): boolean {
-  const path = typeof event.composedPath === "function" ? event.composedPath() : [];
-  const target = event.target instanceof Node ? event.target : null;
-  return elements.some((element) => element && (path.includes(element) || (target ? element.contains(target) : false)));
-}
-
-function onConditionSuggestionDocumentPointerDown(event: PointerEvent) {
-  const whereExpandedPane = whereFilterOverlayRef.value?.parentElement ?? undefined;
-  const orderByExpandedPane = orderByOverlayRef.value?.parentElement ?? undefined;
-  if (!eventTargetInside(event, whereFilterInputRef.value, whereFilterOverlayRef.value, whereConditionPaneRef.value, whereExpandedPane, whereSuggestionDropdownRef.value)) {
-    dismissWhereSuggestions();
-  }
-  if (!eventTargetInside(event, orderByInputRef.value, orderByOverlayRef.value, orderByConditionPaneRef.value, orderByExpandedPane, orderBySuggestionDropdownRef.value)) {
-    dismissOrderBySuggestions();
-  }
-}
-
-function navigateWhereSuggestion(delta: number) {
-  if (whereSuggestions.value.length === 0) return;
-  if (whereSuggestionIndex.value < 0) {
-    whereSuggestionIndex.value = delta > 0 ? 0 : whereSuggestions.value.length - 1;
-    return;
-  }
-  whereSuggestionIndex.value = Math.min(Math.max(whereSuggestionIndex.value + delta, 0), whereSuggestions.value.length - 1);
-}
-
-function openWhereHistoryMenu() {
-  if (showWhereSuggestionDropdown.value) {
-    dismissWhereSuggestions();
-    return;
-  }
-  conditionEditorRef("where")?.focus();
-  whereHistoryMenuOpen.value = true;
-  const history = loadDataGridConditionHistory("where", conditionHistoryScope.value);
-  whereSuggestions.value = history.map((value) => ({ value, kind: "history" }));
-  whereSuggestionIndex.value = -1;
-  updateWhereSuggestionPosition();
-}
-
 function clearWhereFilterInput() {
-  suppressWhereHistoryOnNextEmptyInput = true;
   whereFilterInput.value = "";
-  dismissWhereSuggestions();
   void applyWhereFilter();
 }
 
-function deleteWhereHistorySuggestion(value: string) {
-  const history = forgetDataGridConditionHistory("where", conditionHistoryScope.value, value);
-  whereSuggestions.value = history.map((item) => ({ value: item, kind: "history" }));
-  whereSuggestionIndex.value = whereSuggestions.value.length ? Math.min(whereSuggestionIndex.value, whereSuggestions.value.length - 1) : -1;
-  whereHistoryMenuOpen.value = true;
-  updateWhereSuggestionPosition();
-}
-
-function onWhereFilterInput(event: Event) {
-  const input = event.target instanceof HTMLTextAreaElement ? event.target : null;
-  if (!input) return;
-  suppressNextWhereWatchResize = true;
-  const nextValue = normalizeConditionInputValue(input.value);
-  if (nextValue !== input.value) {
-    whereFilterInput.value = nextValue;
-    previousWhereFilterInputValue = nextValue;
-    nextTick(() => input.setSelectionRange(nextValue.length, nextValue.length));
-    resizeConditionInput("where", { expandFromFocus: true, focusOverlay: true, immediateHeight: true });
-    return;
-  }
-  if (
-    insertedSqlSingleQuoteAtCaret({
-      previousValue: previousWhereFilterInputValue,
-      nextValue,
-      selectionStart: input.selectionStart,
-    })
-  ) {
-    const caret = input.selectionStart ?? nextValue.length;
-    const pairedValue = `${nextValue.slice(0, caret)}'${nextValue.slice(caret)}`;
-    whereFilterInput.value = pairedValue;
-    previousWhereFilterInputValue = pairedValue;
-    nextTick(() => input.setSelectionRange(caret, caret));
-    resizeConditionInput("where", { expandFromFocus: true, focusOverlay: true, immediateHeight: true });
-    return;
-  }
-  const nextCaret = caretPositionInsideInsertedSqlSingleQuotes({
-    previousValue: previousWhereFilterInputValue,
-    nextValue,
-    selectionStart: input.selectionStart,
-  });
-  previousWhereFilterInputValue = nextValue;
-  resizeConditionInput("where", { expandFromFocus: true, focusOverlay: true, immediateHeight: true });
-  if (nextCaret == null) return;
-  nextTick(() => input.setSelectionRange(nextCaret, nextCaret));
-}
-
-watch(whereFilterInput, (val) => {
+watch(whereFilterInput, () => {
   emit("update:whereInput", currentWhereInput() ?? "");
   persistStructuredFilterState();
-  previousWhereFilterInputValue = val;
-  if (suppressNextWhereWatchResize) {
-    suppressNextWhereWatchResize = false;
-  } else {
-    resizeConditionInput("where");
-  }
-  whereSuggestions.value = [];
-  whereHistoryMenuOpen.value = false;
-  const trimmed = val.trim();
-  if (trimmed.length === 0) {
-    if (suppressWhereHistoryOnNextEmptyInput) {
-      suppressWhereHistoryOnNextEmptyInput = false;
-    }
-    return;
-  }
-  suppressWhereHistoryOnNextEmptyInput = false;
-  if (!props.tableMeta?.columns?.length) return;
-  const lastToken = trimmed.split(/[\s,()><=!&|]+/).pop() || "";
-  if (lastToken.length > 0) {
-    const tl = lastToken.toLowerCase();
-    whereSuggestions.value = props.tableMeta.columns
-      .map((c) => c.name)
-      .filter((n) => n.toLowerCase().startsWith(tl) && n.toLowerCase() !== tl)
-      .slice(0, 8)
-      .map((value) => ({ value, kind: "column" }));
-    whereSuggestionIndex.value = 0;
-    updateWhereSuggestionPosition();
-  }
 });
 
-function onWhereFilterKeydown(e: KeyboardEvent) {
-  if (e.key in PAIRS && !e.ctrlKey && !e.metaKey) {
-    const input = e.target as HTMLTextAreaElement;
-    const start = input.selectionStart ?? 0;
-    const end = input.selectionEnd ?? 0;
-    const close = PAIRS[e.key];
-    if (start !== end) {
-      e.preventDefault();
-      const selected = whereFilterInput.value.slice(start, end);
-      whereFilterInput.value = whereFilterInput.value.slice(0, start) + e.key + selected + close + whereFilterInput.value.slice(end);
-      nextTick(() => {
-        input.setSelectionRange(start + 1 + selected.length, start + 1 + selected.length);
-      });
-      whereSuggestionIndex.value = -1;
-      return;
-    }
-    if (e.key === close && whereFilterInput.value[start] === close) {
-      e.preventDefault();
-      input.setSelectionRange(start + 1, start + 1);
-      return;
-    }
-    e.preventDefault();
-    whereFilterInput.value = whereFilterInput.value.slice(0, start) + e.key + close + whereFilterInput.value.slice(end);
-    nextTick(() => {
-      input.setSelectionRange(start + 1, start + 1);
-    });
-    whereSuggestionIndex.value = -1;
-    return;
-  }
-  if (whereSuggestions.value.length > 0) {
-    if (e.key === "Tab") {
-      e.preventDefault();
-      acceptWhereSuggestion();
-      return;
-    }
-    if (e.key === "Escape") {
-      e.preventDefault();
-      dismissWhereSuggestions();
-      return;
-    }
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      navigateWhereSuggestion(1);
-      return;
-    }
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      navigateWhereSuggestion(-1);
-      return;
-    }
-  }
-  if (e.key === "Enter") {
-    e.preventDefault();
-    if (whereSuggestions.value.length > 0 && whereSuggestionIndex.value >= 0) {
-      acceptWhereSuggestion();
-      return;
-    }
-    applyWhereFilter();
-  }
-}
-
-// --- ORDER BY input suggestions ---
-function updateOrderBySuggestionPosition() {
-  nextTick(() => {
-    const input = conditionEditorRef("orderBy");
-    if (!input) return;
-    const inputRect = input.getBoundingClientRect();
-    orderBySuggestionPosition.value = getDataGridConditionSuggestionPosition(inputRect, { viewportWidth: window.innerWidth });
-  });
-}
-
-function acceptOrderBySuggestion() {
-  const idx = orderBySuggestionIndex.value;
-  if (idx < 0 || idx >= orderBySuggestions.value.length) return;
-  const sug = orderBySuggestions.value[idx];
-  if (sug.kind === "history") {
-    orderByInput.value = sug.value;
-    orderBySuggestions.value = [];
-    orderBySuggestionIndex.value = -1;
-    orderByHistoryMenuOpen.value = false;
-    conditionEditorRef("orderBy")?.focus();
-    return;
-  }
-  const lastWordMatch = orderByInput.value.match(/([^\s,()]+)$/);
-  if (lastWordMatch) {
-    const lastWord = lastWordMatch[1];
-    const prefix = orderByInput.value.slice(0, -lastWord.length);
-    orderByInput.value = prefix + sug.value;
-  }
-  orderBySuggestions.value = [];
-  orderBySuggestionIndex.value = -1;
-  orderByHistoryMenuOpen.value = false;
-  conditionEditorRef("orderBy")?.focus();
-}
-
-function dismissOrderBySuggestions() {
-  orderBySuggestions.value = [];
-  orderBySuggestionIndex.value = -1;
-  orderByHistoryMenuOpen.value = false;
-  hideConditionHistoryPreview();
-}
-
-function navigateOrderBySuggestion(delta: number) {
-  if (orderBySuggestions.value.length === 0) return;
-  if (orderBySuggestionIndex.value < 0) {
-    orderBySuggestionIndex.value = delta > 0 ? 0 : orderBySuggestions.value.length - 1;
-    return;
-  }
-  orderBySuggestionIndex.value = Math.min(Math.max(orderBySuggestionIndex.value + delta, 0), orderBySuggestions.value.length - 1);
-}
-
-function openOrderByHistoryMenu() {
-  if (showOrderBySuggestionDropdown.value) {
-    dismissOrderBySuggestions();
-    return;
-  }
-  conditionEditorRef("orderBy")?.focus();
-  orderByHistoryMenuOpen.value = true;
-  const history = loadDataGridConditionHistory("orderBy", conditionHistoryScope.value);
-  orderBySuggestions.value = history.map((value) => ({ value, kind: "history" }));
-  orderBySuggestionIndex.value = -1;
-  updateOrderBySuggestionPosition();
-}
-
 function clearOrderByInput() {
-  suppressOrderByHistoryOnNextEmptyInput = true;
   orderByInput.value = "";
-  dismissOrderBySuggestions();
   void applyOrderBySearch();
 }
 
-function deleteOrderByHistorySuggestion(value: string) {
-  const history = forgetDataGridConditionHistory("orderBy", conditionHistoryScope.value, value);
-  orderBySuggestions.value = history.map((item) => ({ value: item, kind: "history" }));
-  orderBySuggestionIndex.value = orderBySuggestions.value.length ? Math.min(orderBySuggestionIndex.value, orderBySuggestions.value.length - 1) : -1;
-  orderByHistoryMenuOpen.value = true;
-  updateOrderBySuggestionPosition();
-}
-
-watch(orderByInput, (val) => {
-  emit("update:orderByInput", val);
-  if (suppressNextOrderByWatchResize) {
-    suppressNextOrderByWatchResize = false;
-  } else {
-    resizeConditionInput("orderBy");
-  }
-  orderBySuggestions.value = [];
-  orderByHistoryMenuOpen.value = false;
-  const trimmed = val.trim();
-  if (trimmed.length === 0) {
-    if (suppressOrderByHistoryOnNextEmptyInput) {
-      suppressOrderByHistoryOnNextEmptyInput = false;
-    }
-    return;
-  }
-  suppressOrderByHistoryOnNextEmptyInput = false;
-  if (!props.tableMeta?.columns?.length) return;
-  const lastToken = trimmed.split(/[\s,()]+/).pop() || "";
-  if (lastToken.length > 0 && !["asc", "desc"].includes(lastToken.toLowerCase())) {
-    const tl = lastToken.toLowerCase();
-    orderBySuggestions.value = props.tableMeta.columns
-      .map((c) => c.name)
-      .filter((n) => n.toLowerCase().startsWith(tl) && n.toLowerCase() !== tl)
-      .slice(0, 8)
-      .map((value) => ({ value, kind: "column" }));
-    orderBySuggestionIndex.value = 0;
-    updateOrderBySuggestionPosition();
-  }
+watch(orderByInput, (value) => {
+  emit("update:orderByInput", value);
 });
 
-function onOrderByInput(event: Event) {
-  const input = event.target instanceof HTMLTextAreaElement ? event.target : null;
-  if (!input) return;
-  suppressNextOrderByWatchResize = true;
-  const nextValue = normalizeConditionInputValue(input.value);
-  if (nextValue !== input.value) {
-    orderByInput.value = nextValue;
-    nextTick(() => input.setSelectionRange(nextValue.length, nextValue.length));
-  }
-  resizeConditionInput("orderBy", { expandFromFocus: true, focusOverlay: true, immediateHeight: true });
-}
-
-function onOrderByKeydown(e: KeyboardEvent) {
-  if (orderBySuggestions.value.length > 0) {
-    if (e.key === "Tab") {
-      e.preventDefault();
-      acceptOrderBySuggestion();
-      return;
-    }
-    if (e.key === "Escape") {
-      e.preventDefault();
-      dismissOrderBySuggestions();
-      return;
-    }
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      navigateOrderBySuggestion(1);
-      return;
-    }
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      navigateOrderBySuggestion(-1);
-      return;
-    }
-  }
-  if (e.key === "Enter") {
-    e.preventDefault();
-    if (orderBySuggestions.value.length > 0 && orderBySuggestionIndex.value >= 0) {
-      acceptOrderBySuggestion();
-      return;
-    }
-    applyOrderBySearch();
-  }
-}
-
 const isApplyingWhere = ref(false);
 const rowStatusFilter = ref<RowStatusFilter>("all");
 const gridRef = ref<HTMLDivElement>();
@@ -2636,12 +1563,7 @@ let gridHorizontalScrollbarThumbLeftPercent = 0;
 let gridHorizontalScrollbarThumbWidthPercent = 100;
 let gridVerticalScrollbarThumbTopPercent = 0;
 let gridVerticalScrollbarThumbHeightPercent = 100;
-let gridHorizontalScrollbarFrame = 0;
-let gridHorizontalScrollbarDragFrame = 0;
-let gridHorizontalScrollbarPendingClientX = 0;
-let gridVerticalScrollbarDragFrame = 0;
-let gridVerticalScrollbarPendingClientY = 0;
-let gridHorizontalScrollbarResizeObserver: ResizeObserver | null = null;
+let gridScrollbarsRuntime: DataGridScrollbarsRuntime;
 let dataGridTopbarResizeObserver: ResizeObserver | null = null;
 let cellEditResizeObserver: ResizeObserver | null = null;
 let resetCellEditTextareaScrollOnResize = false;
@@ -2659,9 +1581,6 @@ let gridVerticalScrollbarDragState: {
 } | null = null;
 const GRID_HORIZONTAL_SCROLLBAR_DRAGGING_CLASS = "data-grid-horizontal-scrollbar--dragging";
 const GRID_VERTICAL_SCROLLBAR_DRAGGING_CLASS = "data-grid-vertical-scrollbar--dragging";
-const hiddenColumnIndexes = ref<Set<number>>(new Set());
-const nullColumnsHidden = ref(false);
-const autoHiddenNullColumnIndexes = ref<Set<number>>(new Set());
 const highlightedColumnIndex = ref<number | null>(null);
 let highlightedColumnTimer = 0;
 
@@ -2690,13 +1609,44 @@ const tableColumnOrderScopeKey = computed(() => {
     tableName: props.tableMeta.tableName,
   });
 });
-const persistedColumnOrderKeys = ref<string[]>([]);
 const displayableColumnIndexes = computed(() =>
   props.result.columns
     .map((column, index) => ({ column, index }))
     .filter(({ column, index }) => !props.result.hidden_column_indexes?.includes(index) && !isHiddenGridColumn(props.databaseType, column, props.tableMeta?.primaryKeys ?? [], props.tableMeta?.tableType))
     .map(({ index }) => index),
 );
+const allNullColumnIndexesForResult = computed(() => allNullColumnIndexes(props.result.rows, displayableColumnIndexes.value));
+const {
+  hiddenColumnIndexes,
+  nullColumnsHidden,
+  orderedDisplayableColumnIndexes,
+  visibleColumnIndexes,
+  displayableColumnCount,
+  hiddenColumnCount,
+  allNullColumnCount,
+  hasCustomColumnOrder,
+  canToggleAllNullColumns,
+  filteredColumnVisibilityOptions,
+  isColumnVisible,
+  toggleColumnVisibility,
+  showAllColumns,
+  invertColumnVisibility,
+  persistColumnOrder,
+  resetColumnOrder,
+  toggleAllNullColumns,
+  resetColumnVisibility,
+  onTableDataGridColumnOrderChanged,
+} = useDataGridColumnLayoutState({
+  columns: computed(() => props.result.columns),
+  sourceColumns: computed(() => props.sourceColumns),
+  commentByColumn: columnCommentMap,
+  displayableColumnIndexes,
+  allNullColumnIndexes: allNullColumnIndexesForResult,
+  columnOrderKeys,
+  layoutScopeKey: columnLayoutScopeKey,
+  tableScopeKey: tableColumnOrderScopeKey,
+  onRefreshMetrics: refreshGridScrollerMetrics,
+});
 const goToColumnItems = computed(() =>
   buildDataGridColumnLookupItems({
     columns: props.result.columns,
@@ -2708,14 +1658,6 @@ const goToColumnItems = computed(() =>
 const filteredGoToColumns = computed(() => {
   return filterDataGridColumnLookupItems(goToColumnItems.value, goToColumnSearch.value);
 });
-const orderedDisplayableColumnIndexes = computed(() =>
-  orderedColumnIndexes({
-    availableIndexes: displayableColumnIndexes.value,
-    columnKeys: columnOrderKeys.value,
-    orderedKeys: persistedColumnOrderKeys.value,
-  }),
-);
-const visibleColumnIndexes = computed(() => visibleColumnIndexesForFilter(orderedDisplayableColumnIndexes.value, hiddenColumnIndexes.value));
 const visibleColumns = computed(() => visibleColumnIndexes.value.map((index) => props.result.columns[index]));
 const visibleSourceColumns = computed(() => {
   if (!props.sourceColumns || props.sourceColumns.length !== props.result.columns.length) return undefined;
@@ -2742,101 +1684,6 @@ const previewActions = computed(() => {
   if (!props.result) return [];
   return getApplicablePreviewActions(props.result);
 });
-const displayableColumnCount = computed(() => displayableColumnIndexes.value.length);
-const hiddenColumnCount = computed(() => displayableColumnCount.value - visibleColumnCount.value);
-const hasCustomColumnOrder = computed(() => !isDefaultColumnOrder(displayableColumnIndexes.value, orderedDisplayableColumnIndexes.value));
-const allNullColumnIndexesForResult = computed(() => allNullColumnIndexes(props.result.rows, displayableColumnIndexes.value));
-const allNullColumnCount = computed(() => allNullColumnIndexesForResult.value.length);
-const canToggleAllNullColumns = computed(() => nullColumnsHidden.value || (allNullColumnCount.value > 0 && displayableColumnCount.value > 1));
-function filteredColumnVisibilityOptions(query: string) {
-  const displayable = new Set(displayableColumnIndexes.value);
-  return filterColumnVisibilityOptions(props.result.columns, query, { sourceColumns: props.sourceColumns, commentByColumn: columnCommentMap.value }).filter((option) => displayable.has(option.index));
-}
-function isColumnVisible(columnIndex: number): boolean {
-  return !hiddenColumnIndexes.value.has(columnIndex);
-}
-function toggleColumnVisibility(columnIndex: number) {
-  hiddenColumnIndexes.value = nextHiddenColumnIndexes({
-    columnIndex,
-    hiddenIndexes: hiddenColumnIndexes.value,
-    totalColumns: displayableColumnCount.value,
-  });
-}
-function showAllColumns() {
-  hiddenColumnIndexes.value = new Set();
-}
-function invertColumnVisibility() {
-  hiddenColumnIndexes.value = invertedHiddenColumnIndexes(displayableColumnIndexes.value, hiddenColumnIndexes.value);
-}
-function loadColumnOrder() {
-  const tableOrder = tableColumnOrderScopeKey.value ? loadTableDataGridColumnOrder(tableColumnOrderScopeKey.value) : [];
-  persistedColumnOrderKeys.value = tableOrder.length ? tableOrder : loadDataGridColumnOrder(columnLayoutScopeKey.value, columnOrderKeys.value);
-}
-function onTableDataGridColumnOrderChanged(event: Event) {
-  if (!(event instanceof CustomEvent)) return;
-  const detail = event.detail as TableDataGridColumnOrderChangedDetail | undefined;
-  if (!detail || detail.scopeKey !== tableColumnOrderScopeKey.value) return;
-  loadColumnOrder();
-  nextTick(refreshGridScrollerMetrics);
-}
-function persistColumnOrder(indexes: number[]) {
-  const tableScopeKey = tableColumnOrderScopeKey.value;
-  if (isDefaultColumnOrder(displayableColumnIndexes.value, indexes)) {
-    removeDataGridColumnOrder(columnLayoutScopeKey.value);
-    if (tableScopeKey) {
-      removeTableDataGridColumnOrder(tableScopeKey);
-      notifyTableDataGridColumnOrderChanged(tableScopeKey);
-    }
-    persistedColumnOrderKeys.value = [];
-    return;
-  }
-  const keys = columnOrderKeysForIndexes(indexes, columnOrderKeys.value);
-  persistedColumnOrderKeys.value = keys;
-  saveDataGridColumnOrder(columnLayoutScopeKey.value, columnOrderKeys.value, keys);
-  if (tableScopeKey) {
-    saveTableDataGridColumnOrder(tableScopeKey, keys);
-    notifyTableDataGridColumnOrderChanged(tableScopeKey);
-  }
-}
-function resetColumnOrder() {
-  removeDataGridColumnOrder(columnLayoutScopeKey.value);
-  const tableScopeKey = tableColumnOrderScopeKey.value;
-  if (tableScopeKey) {
-    removeTableDataGridColumnOrder(tableScopeKey);
-    notifyTableDataGridColumnOrderChanged(tableScopeKey);
-  }
-  persistedColumnOrderKeys.value = [];
-  nextTick(refreshGridScrollerMetrics);
-}
-function showAllNullColumns() {
-  hiddenColumnIndexes.value = removeAutoHiddenColumnIndexes(hiddenColumnIndexes.value, autoHiddenNullColumnIndexes.value);
-  autoHiddenNullColumnIndexes.value = new Set();
-  nullColumnsHidden.value = false;
-}
-function hideAllNullColumns() {
-  const next = hiddenColumnIndexesWithAllNullColumns({
-    availableIndexes: displayableColumnIndexes.value,
-    hiddenIndexes: hiddenColumnIndexes.value,
-    allNullIndexes: new Set(allNullColumnIndexesForResult.value),
-  });
-  hiddenColumnIndexes.value = next.hiddenIndexes;
-  autoHiddenNullColumnIndexes.value = next.autoHiddenIndexes;
-  nullColumnsHidden.value = next.autoHiddenIndexes.size > 0;
-}
-function toggleAllNullColumns() {
-  if (nullColumnsHidden.value) {
-    showAllNullColumns();
-  } else {
-    hideAllNullColumns();
-  }
-}
-watch(allNullColumnIndexesForResult, () => {
-  if (!nullColumnsHidden.value) return;
-  hiddenColumnIndexes.value = removeAutoHiddenColumnIndexes(hiddenColumnIndexes.value, autoHiddenNullColumnIndexes.value);
-  autoHiddenNullColumnIndexes.value = new Set();
-  hideAllNullColumns();
-});
-watch([columnLayoutScopeKey, tableColumnOrderScopeKey], loadColumnOrder, { immediate: true });
 const firstVisibleColumnIndex = computed(() => visibleColumnIndexes.value[0] ?? 0);
 function actualColumnIndex(visibleColumnIndex: number): number {
   return visibleColumnIndexes.value[visibleColumnIndex] ?? visibleColumnIndex;
@@ -2914,16 +1761,47 @@ const gridStyle = computed(() => ({
 const gridHorizontalScrollLeft = ref(0);
 const gridViewportWidth = ref(0);
 let gridScrollLeftBeforeTranspose = 0;
-const renderedColumnOffsets = computed(() => {
-  const widths = renderedColumnWidths.value;
-  const offsets = Array.from({ length: widths.length + 1 }, () => 0);
-  offsets[0] = 0;
-  for (let index = 0; index < widths.length; index++) {
-    offsets[index + 1] = offsets[index] + (widths[index] ?? 0);
-  }
-  return offsets;
+const {
+  renderedColumnOffsets,
+  horizontalColumnWindow,
+  renderedGridColumns,
+  renderedColumnStyle,
+  columnContentOffsetLeft,
+  columnHeaderTooltipsDisabled,
+  columnHeaderPreviewOffsets,
+  columnHeaderPreviewSourceVisibleIndex,
+  columnHeaderPointerInteractionActive,
+  startColumnHeaderResize,
+  startColumnHeaderDrag,
+  suppressHeaderClickIfNeeded,
+  columnHeaderDragClass,
+  columnHeaderStyle,
+} = useDataGridColumnLayout({
+  columnNames: computed(() => props.result.columns),
+  visibleColumnIndexes,
+  renderedColumnWidths,
+  scrollLeft: gridHorizontalScrollLeft,
+  viewportWidth: gridViewportWidth,
+  rowNumberWidth: DATA_GRID_ROW_NUM_WIDTH,
+  headerRef,
+  orderedColumnIndexes: orderedDisplayableColumnIndexes,
+  hiddenColumnIndexes,
+  getIsResizing,
+  onResizeStart,
+  onCanvasMouseLeave,
+  onCanvasDrawSchedule: scheduleCanvasDraw,
+  onRefreshMetrics: () => nextTick(refreshGridScrollerMetrics),
+  onPersistColumnOrder: persistColumnOrder,
 });
 
+function onHeaderClickCapture(event: MouseEvent) {
+  suppressHeaderClickIfNeeded(event);
+}
+
+function onHeaderClick(visibleColIdx: number, event: MouseEvent) {
+  if (!suppressHeaderClickIfNeeded(event)) selectColumn(visibleColIdx, event);
+}
+
 function updateGridHorizontalViewport(element: HTMLElement) {
   const nextScrollLeft = element.scrollLeft;
   const nextViewportWidth = element.clientWidth;
@@ -3034,32 +1912,8 @@ function setGridVerticalScrollbarDragging(dragging: boolean) {
   gridVerticalScrollbarTrackRef.value?.classList.toggle(GRID_VERTICAL_SCROLLBAR_DRAGGING_CLASS, dragging);
 }
 
-function scheduleGridHorizontalScrollbarUpdate() {
-  if (gridHorizontalScrollbarFrame) return;
-  const update = () => {
-    gridHorizontalScrollbarFrame = 0;
-    updateGridHorizontalScrollbar();
-    updateGridVerticalScrollbar();
-  };
-  if (typeof requestAnimationFrame === "function") {
-    gridHorizontalScrollbarFrame = requestAnimationFrame(update);
-  } else {
-    window.setTimeout(update, 0);
-  }
-}
-
 function observeGridHorizontalScrollbarScroller() {
-  gridHorizontalScrollbarResizeObserver?.disconnect();
-  gridHorizontalScrollbarResizeObserver = null;
-  const scroller = gridScrollerElement();
-  if (scroller && typeof ResizeObserver !== "undefined") {
-    gridHorizontalScrollbarResizeObserver = new ResizeObserver(scheduleGridHorizontalScrollbarUpdate);
-    gridHorizontalScrollbarResizeObserver.observe(scroller);
-    for (const child of Array.from(scroller.children)) {
-      gridHorizontalScrollbarResizeObserver.observe(child);
-    }
-  }
-  scheduleGridHorizontalScrollbarUpdate();
+  gridScrollbarsRuntime.observeScroller();
 }
 
 function updateDataGridTopbarWidth() {
@@ -3077,14 +1931,13 @@ function observeDataGridTopbarWidth() {
   }
 }
 
-function applyPendingGridHorizontalScrollbarDrag() {
-  gridHorizontalScrollbarDragFrame = 0;
+function applyPendingGridHorizontalScrollbarDrag(clientX: number) {
   const dragState = gridHorizontalScrollbarDragState;
   if (!dragState) return;
 
   const thumbWidthPx = dragState.trackRect.width * (gridHorizontalScrollbarThumbWidthPercent / 100);
   const maxThumbLeftPx = Math.max(1, dragState.trackRect.width - thumbWidthPx);
-  const thumbLeftPx = Math.min(maxThumbLeftPx, Math.max(0, gridHorizontalScrollbarPendingClientX - dragState.trackRect.left - dragState.thumbOffsetPx));
+  const thumbLeftPx = Math.min(maxThumbLeftPx, Math.max(0, clientX - dragState.trackRect.left - dragState.thumbOffsetPx));
   const scroller = dragState.scroller;
   const nextScrollLeft = (thumbLeftPx / maxThumbLeftPx) * dragState.maxScrollLeft;
   if (Math.abs(scroller.scrollLeft - nextScrollLeft) < 0.5) return;
@@ -3097,16 +1950,11 @@ function applyPendingGridHorizontalScrollbarDrag() {
 }
 
 function scheduleGridHorizontalScrollbarDrag(clientX: number) {
-  gridHorizontalScrollbarPendingClientX = clientX;
-  if (gridHorizontalScrollbarDragFrame) return;
-  // Pointermove can fire faster than paint; keep expensive canvas/layout work to one frame.
-  gridHorizontalScrollbarDragFrame = requestAnimationFrame(applyPendingGridHorizontalScrollbarDrag);
+  gridScrollbarsRuntime.scheduleHorizontalDrag(clientX);
 }
 
 function flushGridHorizontalScrollbarDrag() {
-  if (!gridHorizontalScrollbarDragFrame) return;
-  cancelAnimationFrame(gridHorizontalScrollbarDragFrame);
-  applyPendingGridHorizontalScrollbarDrag();
+  gridScrollbarsRuntime.flushHorizontalDrag();
 }
 
 function onGridHorizontalScrollbarPointerMove(event: PointerEvent) {
@@ -3165,14 +2013,13 @@ function startGridHorizontalScrollbarDrag(event: PointerEvent) {
   scheduleGridHorizontalScrollbarDrag(event.clientX);
 }
 
-function applyPendingGridVerticalScrollbarDrag() {
-  gridVerticalScrollbarDragFrame = 0;
+function applyPendingGridVerticalScrollbarDrag(clientY: number) {
   const dragState = gridVerticalScrollbarDragState;
   if (!dragState) return;
 
   const thumbHeightPx = dragState.trackRect.height * (gridVerticalScrollbarThumbHeightPercent / 100);
   const maxThumbTopPx = Math.max(1, dragState.trackRect.height - thumbHeightPx);
-  const thumbTopPx = Math.min(maxThumbTopPx, Math.max(0, gridVerticalScrollbarPendingClientY - dragState.trackRect.top - dragState.thumbOffsetPx));
+  const thumbTopPx = Math.min(maxThumbTopPx, Math.max(0, clientY - dragState.trackRect.top - dragState.thumbOffsetPx));
   const scroller = dragState.scroller;
   const nextScrollTop = (thumbTopPx / maxThumbTopPx) * dragState.maxScrollTop;
   if (Math.abs(scroller.scrollTop - nextScrollTop) < 0.5) return;
@@ -3185,18 +2032,27 @@ function applyPendingGridVerticalScrollbarDrag() {
 }
 
 function scheduleGridVerticalScrollbarDrag(clientY: number) {
-  gridVerticalScrollbarPendingClientY = clientY;
-  if (gridVerticalScrollbarDragFrame) return;
-  // Match horizontal dragging: coalesce pointermove bursts to one canvas/layout update per frame.
-  gridVerticalScrollbarDragFrame = requestAnimationFrame(applyPendingGridVerticalScrollbarDrag);
+  gridScrollbarsRuntime.scheduleVerticalDrag(clientY);
 }
 
 function flushGridVerticalScrollbarDrag() {
-  if (!gridVerticalScrollbarDragFrame) return;
-  cancelAnimationFrame(gridVerticalScrollbarDragFrame);
-  applyPendingGridVerticalScrollbarDrag();
+  gridScrollbarsRuntime.flushVerticalDrag();
 }
 
+gridScrollbarsRuntime = useDataGridScrollbars({
+  update: () => {
+    updateGridHorizontalScrollbar();
+    updateGridVerticalScrollbar();
+  },
+  getScroller: gridScrollerElement,
+  applyHorizontalDrag: applyPendingGridHorizontalScrollbarDrag,
+  applyVerticalDrag: applyPendingGridVerticalScrollbarDrag,
+  frameDriver: {
+    request: (callback) => requestAnimationFrame(callback),
+    cancel: (frameId) => cancelAnimationFrame(frameId),
+  },
+});
+
 function onGridVerticalScrollbarPointerMove(event: PointerEvent) {
   if (!gridVerticalScrollbarDragState) return;
   event.preventDefault();
@@ -3256,347 +2112,6 @@ function syncHeaderScroll(e: Event) {
   }
 }
 
-const HORIZONTAL_COLUMN_BUFFER_PX = 900;
-
-interface RenderedGridColumn {
-  visibleColIdx: number;
-  actualColIdx: number;
-  name: string;
-}
-
-interface HorizontalColumnWindow {
-  start: number;
-  end: number;
-  beforeWidth: number;
-  afterWidth: number;
-}
-
-function getHorizontalColumnWindow(): HorizontalColumnWindow {
-  const widths = renderedColumnWidths.value;
-  const offsets = renderedColumnOffsets.value;
-  const totalColumns = visibleColumnIndexes.value.length;
-  if (totalColumns === 0 || widths.length === 0) {
-    return { start: 0, end: 0, beforeWidth: 0, afterWidth: 0 };
-  }
-
-  const viewportStart = Math.max(0, gridHorizontalScrollLeft.value - DATA_GRID_ROW_NUM_WIDTH - HORIZONTAL_COLUMN_BUFFER_PX);
-  const viewportEnd = Math.max(gridViewportWidth.value, 1) + Math.max(0, gridHorizontalScrollLeft.value - DATA_GRID_ROW_NUM_WIDTH) + HORIZONTAL_COLUMN_BUFFER_PX;
-  let low = 0;
-  let high = totalColumns - 1;
-  while (low < high) {
-    const mid = Math.floor((low + high) / 2);
-    if ((offsets[mid + 1] ?? 0) < viewportStart) low = mid + 1;
-    else high = mid;
-  }
-  const start = low;
-  const offset = offsets[start] ?? 0;
-
-  let end = start;
-  while (end < totalColumns && (offsets[end] ?? 0) < viewportEnd) {
-    end++;
-  }
-  const visibleWidth = offsets[end] ?? offset;
-
-  const columnsWidth = offsets[totalColumns] ?? 0;
-  return {
-    start,
-    end,
-    beforeWidth: offset,
-    afterWidth: Math.max(0, columnsWidth - visibleWidth),
-  };
-}
-
-const horizontalColumnWindow = computed(getHorizontalColumnWindow);
-
-const renderedGridColumns = computed<RenderedGridColumn[]>(() => {
-  const window = horizontalColumnWindow.value;
-  const columns: RenderedGridColumn[] = [];
-  for (let visibleColIdx = window.start; visibleColIdx < window.end; visibleColIdx++) {
-    const actualColIdx = visibleColumnIndexes.value[visibleColIdx];
-    if (actualColIdx === undefined) continue;
-    columns.push({
-      visibleColIdx,
-      actualColIdx,
-      name: props.result.columns[actualColIdx] ?? "",
-    });
-  }
-  return columns;
-});
-
-function renderedColumnStyle(visibleColIdx: number) {
-  return { width: `var(--col-w-${visibleColIdx})` };
-}
-
-type ColumnHeaderDragState = {
-  sourceVisibleIndex: number;
-  targetVisibleIndex: number;
-  startX: number;
-  startY: number;
-  currentX: number;
-  columnRects: { visibleIndex: number; left: number; width: number }[];
-  dragging: boolean;
-};
-const columnHeaderDragState = ref<ColumnHeaderDragState | null>(null);
-const columnHeaderResizeActive = ref(false);
-let columnHeaderDragClickGuardUntil = 0;
-let columnHeaderSuppressNextClick = false;
-let columnHeaderSuppressClickTimer = 0;
-let columnHeaderDragFrame = 0;
-let columnHeaderPendingClientX = 0;
-let columnHeaderResizeListenersCleanup: (() => void) | null = null;
-
-const columnHeaderTooltipsDisabled = computed(() =>
-  columnHeaderTooltipDisabled({
-    columnDragActive: columnHeaderDragState.value !== null,
-    columnResizeActive: columnHeaderResizeActive.value,
-  }),
-);
-
-function columnHeaderPointerInteractionActive(): boolean {
-  return columnHeaderCanvasPointerDisabled({
-    columnDragActive: columnHeaderDragState.value !== null,
-    columnResizeActive: columnHeaderResizeActive.value,
-  });
-}
-
-function finishColumnHeaderResizeInteraction() {
-  clearColumnHeaderResizeListeners();
-  requestAnimationFrame(() => {
-    columnHeaderResizeActive.value = false;
-  });
-}
-
-function clearColumnHeaderResizeListeners() {
-  if (!columnHeaderResizeListenersCleanup) return;
-  columnHeaderResizeListenersCleanup();
-  columnHeaderResizeListenersCleanup = null;
-}
-
-function clearColumnHeaderClickGuard() {
-  columnHeaderSuppressNextClick = false;
-  columnHeaderDragClickGuardUntil = 0;
-  if (columnHeaderSuppressClickTimer) {
-    window.clearTimeout(columnHeaderSuppressClickTimer);
-    columnHeaderSuppressClickTimer = 0;
-  }
-}
-
-function armColumnHeaderClickGuard() {
-  clearColumnHeaderClickGuard();
-  columnHeaderSuppressNextClick = true;
-  columnHeaderDragClickGuardUntil = Date.now() + 800;
-  columnHeaderSuppressClickTimer = window.setTimeout(() => {
-    clearColumnHeaderClickGuard();
-  }, 800);
-}
-
-function startColumnHeaderResize(visibleColIdx: number, event: MouseEvent) {
-  // Browser hover state can stick to multiple header cells during pointer drags,
-  // so keep header tooltips closed until the resize gesture has fully settled.
-  clearColumnHeaderResizeListeners();
-  columnHeaderResizeActive.value = true;
-  armColumnHeaderClickGuard();
-  onCanvasMouseLeave();
-  const finishResize = () => {
-    armColumnHeaderClickGuard();
-    finishColumnHeaderResizeInteraction();
-  };
-  columnHeaderResizeListenersCleanup = () => {
-    window.removeEventListener("mouseup", finishResize, true);
-    window.removeEventListener("blur", finishResize, true);
-  };
-  window.addEventListener("mouseup", finishResize, true);
-  window.addEventListener("blur", finishResize, true);
-  onResizeStart(visibleColIdx, event);
-}
-
-function columnHeaderInteractiveTarget(target: EventTarget | null): boolean {
-  return target instanceof HTMLElement && !!target.closest("button, input, textarea, select, [contenteditable='true'], [role='button'], [data-column-resize-handle]");
-}
-
-function columnHeaderDropTargetVisibleIndex(clientX: number): number {
-  const state = columnHeaderDragState.value;
-  if (!state || state.columnRects.length === 0) return state?.sourceVisibleIndex ?? 0;
-  for (const rect of state.columnRects) {
-    const visibleIndex = rect.visibleIndex;
-    if (!Number.isFinite(visibleIndex)) continue;
-    if (clientX < rect.left + rect.width / 2) return visibleIndex;
-  }
-  return visibleColumnIndexes.value.length;
-}
-
-function applyColumnHeaderDragPreview() {
-  columnHeaderDragFrame = 0;
-  const state = columnHeaderDragState.value;
-  if (!state?.dragging) return;
-  state.currentX = columnHeaderPendingClientX;
-  state.targetVisibleIndex = columnHeaderDropTargetVisibleIndex(columnHeaderPendingClientX);
-  if (useCanvasGridRows.value) scheduleCanvasDraw();
-}
-
-function scheduleColumnHeaderDragPreview(clientX: number) {
-  columnHeaderPendingClientX = clientX;
-  if (columnHeaderDragFrame) return;
-  columnHeaderDragFrame = requestAnimationFrame(applyColumnHeaderDragPreview);
-}
-
-function flushColumnHeaderDragPreview() {
-  if (columnHeaderDragFrame) cancelAnimationFrame(columnHeaderDragFrame);
-  applyColumnHeaderDragPreview();
-}
-
-function cancelColumnHeaderDragPreview() {
-  if (!columnHeaderDragFrame) return;
-  cancelAnimationFrame(columnHeaderDragFrame);
-  columnHeaderDragFrame = 0;
-}
-
-function columnHeaderLayoutRects(): { visibleIndex: number; left: number; width: number }[] {
-  const header = headerRef.value;
-  return Array.from(header?.querySelectorAll<HTMLElement>("[data-visible-col-index]") ?? [])
-    .map((element) => {
-      const rect = element.getBoundingClientRect();
-      return {
-        visibleIndex: Number(element.dataset.visibleColIndex),
-        left: rect.left,
-        width: rect.width,
-      };
-    })
-    .filter((rect) => Number.isFinite(rect.visibleIndex));
-}
-
-function stopColumnHeaderDrag(commit: boolean) {
-  const state = columnHeaderDragState.value;
-  if (!state) return;
-  const hadCanvasPreview = useCanvasGridRows.value && state.dragging;
-  window.removeEventListener("pointermove", onColumnHeaderPointerMove, true);
-  window.removeEventListener("pointerup", onColumnHeaderPointerUp, true);
-  window.removeEventListener("pointercancel", onColumnHeaderPointerCancel, true);
-  cancelColumnHeaderDragPreview();
-  document.body.style.userSelect = "";
-  columnHeaderDragState.value = null;
-  if (hadCanvasPreview) scheduleCanvasDraw();
-  if (state.dragging) armColumnHeaderClickGuard();
-  if (!commit || !state.dragging || state.sourceVisibleIndex === state.targetVisibleIndex) return;
-  const next = moveVisibleColumnIndex({
-    orderedIndexes: orderedDisplayableColumnIndexes.value,
-    hiddenIndexes: hiddenColumnIndexes.value,
-    fromVisibleIndex: state.sourceVisibleIndex,
-    toVisibleIndex: state.targetVisibleIndex,
-  });
-  persistColumnOrder(next);
-  nextTick(refreshGridScrollerMetrics);
-}
-
-function onColumnHeaderPointerMove(event: PointerEvent) {
-  const state = columnHeaderDragState.value;
-  if (!state) return;
-  const moved = Math.abs(event.clientX - state.startX) > 5 || Math.abs(event.clientY - state.startY) > 5;
-  if (!state.dragging && moved) {
-    state.dragging = true;
-    document.body.style.userSelect = "none";
-    onCanvasMouseLeave();
-  }
-  if (!state.dragging) return;
-  event.preventDefault();
-  scheduleColumnHeaderDragPreview(event.clientX);
-}
-
-function onColumnHeaderPointerUp(event: PointerEvent) {
-  columnHeaderPendingClientX = event.clientX;
-  flushColumnHeaderDragPreview();
-  stopColumnHeaderDrag(true);
-}
-
-function onColumnHeaderPointerCancel() {
-  stopColumnHeaderDrag(false);
-}
-
-function startColumnHeaderDrag(visibleColIdx: number, event: PointerEvent) {
-  if (event.button !== 0 || getIsResizing() || columnHeaderInteractiveTarget(event.target)) return;
-  columnHeaderDragState.value = {
-    sourceVisibleIndex: visibleColIdx,
-    targetVisibleIndex: visibleColIdx,
-    startX: event.clientX,
-    startY: event.clientY,
-    currentX: event.clientX,
-    columnRects: columnHeaderLayoutRects(),
-    dragging: false,
-  };
-  columnHeaderPendingClientX = event.clientX;
-  window.addEventListener("pointermove", onColumnHeaderPointerMove, true);
-  window.addEventListener("pointerup", onColumnHeaderPointerUp, true);
-  window.addEventListener("pointercancel", onColumnHeaderPointerCancel, true);
-}
-
-function suppressHeaderClickIfNeeded(event: MouseEvent): boolean {
-  if (
-    !columnHeaderClickShouldBeSuppressed({
-      now: Date.now(),
-      guardUntil: columnHeaderDragClickGuardUntil,
-      suppressNextClick: columnHeaderSuppressNextClick,
-    })
-  ) {
-    return false;
-  }
-  clearColumnHeaderClickGuard();
-  event.preventDefault();
-  event.stopPropagation();
-  event.stopImmediatePropagation();
-  return true;
-}
-
-function onHeaderClickCapture(event: MouseEvent) {
-  suppressHeaderClickIfNeeded(event);
-}
-
-function onHeaderClick(visibleColIdx: number, event: MouseEvent) {
-  if (suppressHeaderClickIfNeeded(event)) return;
-  selectColumn(visibleColIdx, event);
-}
-
-function columnHeaderDragClass(visibleColIdx: number) {
-  const state = columnHeaderDragState.value;
-  return {
-    "z-30 shadow-lg ring-1 ring-primary/40 bg-background dark:bg-muted pointer-events-none": state?.dragging && state.sourceVisibleIndex === visibleColIdx,
-  };
-}
-
-function columnHeaderPreviewOffset(visibleColIdx: number): number {
-  const state = columnHeaderDragState.value;
-  if (!state) return 0;
-  return columnHeaderPreviewOffsetForColumn({
-    columnDragActive: state.dragging,
-    visibleColIdx,
-    sourceVisibleIndex: state.sourceVisibleIndex,
-    targetVisibleIndex: state.targetVisibleIndex,
-    startX: state.startX,
-    currentX: state.currentX,
-    sourceWidth: renderedColumnWidths.value[state.sourceVisibleIndex] ?? 0,
-  });
-}
-
-function columnHeaderStyle(visibleColIdx: number) {
-  const style = renderedColumnStyle(visibleColIdx);
-  const offset = columnHeaderPreviewOffset(visibleColIdx);
-  if (!offset) return style;
-  return {
-    ...style,
-    transform: `translateX(${offset}px)`,
-    transition: columnHeaderDragState.value?.sourceVisibleIndex === visibleColIdx ? undefined : "transform 120ms ease-out",
-  };
-}
-
-const columnHeaderPreviewOffsets = computed(() => renderedColumnWidths.value.map((_, visibleColIdx) => columnHeaderPreviewOffset(visibleColIdx)));
-const columnHeaderPreviewSourceVisibleIndex = computed(() => {
-  const state = columnHeaderDragState.value;
-  return state?.dragging ? state.sourceVisibleIndex : null;
-});
-
-function columnContentOffsetLeft(visibleColIdx: number): number {
-  return DATA_GRID_ROW_NUM_WIDTH + (renderedColumnOffsets.value[visibleColIdx] ?? 0);
-}
-
 let scrollingTimer = 0;
 const isScrolling = ref(false);
 let infiniteScrollPositions = new WeakMap<HTMLElement, DataGridScrollPosition>();
@@ -3687,9 +2202,7 @@ watch(
   () => localFilterScopeKey.value,
   () => {
     localColumnFilters.value = {};
-    hiddenColumnIndexes.value = new Set();
-    nullColumnsHidden.value = false;
-    autoHiddenNullColumnIndexes.value = new Set();
+    resetColumnVisibility();
     closeLocalFilter();
   },
 );
@@ -3862,19 +2375,6 @@ watch(
   },
   { immediate: true },
 );
-const clientSearchText = computed(() => (searchText.value.trim() ? searchText.value : ""));
-watch(clientSearchText, (value) => {
-  clearTimeout(_searchTimer);
-  const q = value.trim().toLowerCase();
-  if (!q) {
-    deferredClientSearchText.value = "";
-    return;
-  }
-  _searchTimer = setTimeout(() => {
-    deferredClientSearchText.value = q;
-  }, 150);
-});
-
 function currentWhereInput(): string | undefined {
   return combineWhereInputs(whereFilterInput.value, appliedStructuredWhereInput.value);
 }
@@ -3903,10 +2403,7 @@ watch(
   ([column, columnIndex, direction, mode], previous) => {
     const wasControlledSort = !!previous?.[0] && !!previous?.[2];
     const isControlledSort = !!column && !!direction;
-    sortCol.value = column && direction ? column : null;
-    sortColIndex.value = typeof columnIndex === "number" && direction ? columnIndex : null;
-    sortDir.value = direction ?? "asc";
-    sortMode.value = mode ?? "database";
+    setSort(column && direction ? column : null, typeof columnIndex === "number" && direction ? columnIndex : null, direction ?? "asc", mode ?? "database");
     if (isControlledSort && sortMode.value === "database") {
       syncOrderByInputWithSort(sortCol.value, sortDir.value);
     } else if (wasControlledSort) {
@@ -4425,34 +2922,12 @@ async function onToolbarRefresh() {
   emit("reload", props.sql, searchText.value, currentWhereInput(), currentOrderBy(), pageSize.value, (currentPage.value - 1) * pageSize.value, "refresh");
 }
 
-function stopAutoRefreshTimer() {
-  clearInterval(autoRefreshTimer);
-  autoRefreshTimer = undefined;
-}
-
-function runAutoRefreshTick() {
-  if (!autoRefreshEnabled.value || !canAutoRefresh.value) return;
-  void onToolbarRefresh();
-}
-
-function restartAutoRefreshTimer() {
-  stopAutoRefreshTimer();
-  if (!autoRefreshEnabled.value) return;
-  autoRefreshTimer = setInterval(runAutoRefreshTick, autoRefreshIntervalSeconds.value * 1000);
-}
-
 function setAutoRefreshInterval(seconds: number) {
-  autoRefreshIntervalSeconds.value = seconds;
-  if (autoRefreshEnabled.value) restartAutoRefreshTimer();
+  autoRefresh.setIntervalSeconds(seconds);
 }
 
 function toggleAutoRefresh() {
-  autoRefreshEnabled.value = !autoRefreshEnabled.value;
-  if (autoRefreshEnabled.value) {
-    restartAutoRefreshTimer();
-  } else {
-    stopAutoRefreshTimer();
-  }
+  autoRefresh.toggle();
 }
 
 async function onToolbarCommit() {
@@ -4476,6 +2951,55 @@ function addRow() {
   focusAppendedTransposeRecord();
 }
 
+const refreshToolbarCapability = computed<DataGridToolbarActionCapability>(() => ({
+  label: t("grid.refresh"),
+  tooltip: `${t("grid.refresh")} (${shortcutMod}+R)`,
+  disabled: isSaving.value,
+  loading: props.loading,
+  onTrigger: onToolbarRefresh,
+}));
+const autoRefreshToolbarCapability = computed<DataGridToolbarAutoRefreshCapability>(() => ({
+  label: autoRefreshLabel.value,
+  shortLabel: t("tabs.autoRefreshShort"),
+  startLabel: t("tabs.startAutoRefresh"),
+  stopLabel: t("tabs.stopAutoRefresh"),
+  enabled: autoRefreshEnabled.value,
+  intervalSeconds: autoRefreshIntervalSeconds.value,
+  intervalOptions: AUTO_REFRESH_INTERVAL_OPTIONS,
+  intervalLabel: (seconds) => t("tabs.autoRefreshEvery", { seconds }),
+  onToggle: toggleAutoRefresh,
+  onSelectInterval: setAutoRefreshInterval,
+}));
+const addRowToolbarCapability = computed<DataGridToolbarActionCapability>(() => ({
+  label: t("grid.addRow"),
+  tooltip: `${t("grid.addRow")} (${shortcutMod}+N)`,
+  visible: canInsertRows.value,
+  onTrigger: addRow,
+}));
+const previewToolbarCapability = computed<DataGridToolbarActionCapability>(() => ({
+  label: t(previewLabelKey.value),
+  visible: saveToolbarState.value.showActions && pendingChangeCount.value > 0,
+  disabled: isPreviewLoading.value,
+  loading: isPreviewLoading.value,
+  onTrigger: openSqlPreview,
+}));
+const saveToolbarCapability = computed<DataGridToolbarSaveCapability>(() => ({
+  label: t(saveActionMode.value.labelKey, { count: pendingChangeCount.value }),
+  tooltip: t(saveActionMode.value.tooltipKey, { count: pendingChangeCount.value }),
+  visible: saveToolbarState.value.showActions,
+  disabled: saveToolbarState.value.actionsDisabled,
+  loading: isSaving.value,
+  pendingCount: pendingChangeCount.value,
+  shortcutLabel: saveShortcutLabel.value,
+  onTrigger: onToolbarCommit,
+}));
+const rollbackToolbarCapability = computed<DataGridToolbarActionCapability>(() => ({
+  label: t(saveActionMode.value.secondaryActionKey),
+  visible: saveToolbarState.value.showActions,
+  disabled: saveToolbarState.value.actionsDisabled,
+  onTrigger: useTransaction.value ? onToolbarRollback : discardChanges,
+}));
+
 const sortedRows = computed(() => {
   let indices = localFilteredRows.value;
   const q = deferredClientSearchText.value;
@@ -4624,57 +3148,6 @@ watch(
   { immediate: true },
 );
 
-interface SearchMatch {
-  kind: "cell" | "column";
-  displayRow: number; // -1 for column matches
-  col: number;
-}
-
-const searchMatches = computed<SearchMatch[]>(() => {
-  const q = deferredClientSearchText.value;
-  if (!q) return [];
-  const lowered = q.toLowerCase();
-  const items = displayItems.value;
-  const matches: SearchMatch[] = [];
-
-  // Column name matches (navigate first)
-  for (let c = 0; c < props.result.columns.length; c++) {
-    if (props.result.columns[c].toLowerCase().includes(lowered)) {
-      matches.push({ kind: "column", displayRow: -1, col: c });
-    }
-  }
-
-  // Cell value matches
-  for (let r = 0; r < items.length; r++) {
-    const data = items[r].data;
-    for (let c = 0; c < data.length; c++) {
-      if (data[c] !== null && formatCellCached(data[c], c).toLowerCase().includes(lowered)) {
-        matches.push({ kind: "cell", displayRow: r, col: c });
-      }
-    }
-  }
-  return matches;
-});
-
-const searchMatchSet = computed(() => {
-  const set = new Set<string>();
-  for (const m of searchMatches.value) {
-    set.add(`${m.kind}:${m.displayRow}:${m.col}`);
-  }
-  return set;
-});
-
-const currentSearchMatch = computed(() => {
-  const idx = currentMatchIndex.value;
-  if (idx < 0 || idx >= searchMatches.value.length) return null;
-  return searchMatches.value[idx] ?? null;
-});
-
-watch(searchMatches, (matches) => {
-  currentMatchIndex.value = matches.length > 0 ? 0 : -1;
-  if (matches.length > 0) nextTick(scrollToCurrentMatch);
-});
-
 function cellIsSearchMatch(displayRow: number, col: number): boolean {
   if (isScrolling.value) return false;
   return searchMatchSet.value.has(`cell:${displayRow}:${col}`);
@@ -4702,10 +3175,7 @@ function transposeHeaderIsCurrentMatch(fieldIndex: number): boolean {
 }
 
 function navigateMatch(delta: number) {
-  const total = searchMatches.value.length;
-  if (total === 0) return;
-  currentMatchIndex.value = (currentMatchIndex.value + delta + total) % total;
-  scrollToCurrentMatch();
+  dataGridSearch.navigateMatch(delta);
 }
 
 function scrollToCurrentMatch() {
@@ -4745,7 +3215,7 @@ function scrollToCurrentMatch() {
 // In transpose view records are columns (horizontal) and fields are rows
 // (vertical). Bring the matched record column into the horizontal viewport and
 // the matched field row into the vertical viewport.
-function scrollTransposeMatchIntoView(match: SearchMatch) {
+function scrollTransposeMatchIntoView(match: DataGridSearchMatch) {
   nextTick(() => {
     const scroller = transposeScrollRef.value;
     // Both match kinds use `col` as the field (transpose row) index: cell
@@ -4814,6 +3284,7 @@ const selection = useDataGridSelection({
   gridRef,
   getScrollElement: dataGridSelectionScroller,
   cellFromClientPoint: dataGridCellFromClientPoint,
+  runtimeScope: dataGridRuntimeScope,
 });
 
 const {
@@ -5057,7 +3528,6 @@ const dialogCellDetail = computed(() => {
 const cellDetailJsonFormatted = computed(() => settingsStore.editorSettings.cellDetailJsonFormatted);
 const cellDetailMetadataCollapsed = computed(() => settingsStore.editorSettings.cellDetailMetadataCollapsed);
 const sideDetailJsonView = computed(() => cellDetailJsonFormatted.value && !!activeCellDetail.value?.formattedJson);
-const cellDetailJsonView = computed(() => cellDetailJsonFormatted.value && !!dialogCellDetail.value?.formattedJson);
 
 const rowDetail = computed(() => {
   if (rowDetailDialogRowId.value === null) return null;
@@ -5098,10 +3568,6 @@ const columnDetail = computed(() => {
   });
 });
 
-const filteredRowDetailFields = computed(() => (rowDetail.value ? filterDataGridDetailFields(rowDetail.value.fields, rowDetailSearch.value) : []));
-
-const filteredColumnDetailFields = computed(() => (columnDetail.value ? filterDataGridDetailFields(columnDetail.value.fields, columnDetailSearch.value) : []));
-
 watch(cellDetailDialogOpen, (open) => {
   if (!open) cellDetailDialogTarget.value = null;
 });
@@ -5109,36 +3575,12 @@ watch(cellDetailDialogOpen, (open) => {
 watch(rowDetailDialogOpen, (open) => {
   if (!open) {
     rowDetailDialogRowId.value = null;
-    rowDetailSearch.value = "";
   }
 });
 
 watch(columnDetailDialogOpen, (open) => {
   if (!open) {
     columnDetailDialogColumnIndex.value = null;
-    columnDetailSearch.value = "";
-  }
-});
-
-watch(sideGeometryPreviewOpen, async (open) => {
-  if (open) {
-    await nextTick();
-    const canvas = sideGeometryCanvas.value;
-    const detail = activeCellDetail.value;
-    if (canvas && detail && detail.value !== null) {
-      renderWktOnCanvas(canvas, String(detail.value));
-    }
-  }
-});
-
-watch(dialogGeometryPreviewOpen, async (open) => {
-  if (open) {
-    await nextTick();
-    const canvas = dialogGeometryCanvas.value;
-    const detail = dialogCellDetail.value;
-    if (canvas && detail && detail.value !== null) {
-      renderWktOnCanvas(canvas, String(detail.value));
-    }
   }
 });
 
@@ -5283,11 +3725,6 @@ const detailTemporalEditorConfig = computed(() => {
   return detail ? temporalEditorConfigForColumn(detail.colIndex) : undefined;
 });
 const sideDetailValueFillsHeight = computed(() => cellDetailPanelIsBottom.value || isEditingDetail.value || (!cellDetailPanelIsBottom.value && !activeCellDetail.value?.imagePreviewUrl));
-const sideJsonPreviewText = computed(() => {
-  const detail = activeCellDetail.value;
-  if (!detail?.formattedJson) return "";
-  return sideDetailJsonView.value ? detail.formattedJson : detail.rawValuePreview;
-});
 const canCompactDetailJson = computed(() => {
   const detail = activeCellDetail.value;
   return !!detail && isEditingDetail.value && canFormatCellDetailJson(detailEditValue.value, detail.type);
@@ -5299,16 +3736,8 @@ const showCompactDetailJson = computed(() => {
 });
 
 // CodeMirror-based cell detail editors
-const detailsEditorContainer = ref<HTMLElement>();
 const valueEditorContainer = ref<HTMLElement>();
-const sideJsonPreviewContainer = ref<HTMLElement>();
-const dialogJsonPreviewContainer = ref<HTMLElement>();
-const mongoJsonPreviewContainer = ref<HTMLElement>();
-let detailsDetailEditor: UseCellDetailEditorReturn | null = null;
 let valueDetailEditor: UseCellDetailEditorReturn | null = null;
-let sideJsonPreviewEditor: UseCellDetailEditorReturn | null = null;
-let dialogJsonPreviewEditor: UseCellDetailEditorReturn | null = null;
-let mongoJsonPreviewEditor: UseCellDetailEditorReturn | null = null;
 
 const editorThemeAccessor = () => settingsStore.editorSettings.theme;
 const editorAppAppearance = () => (isDark.value ? "dark" : "light") as import("@/lib/app/appTheme").AppThemeAppearance;
@@ -5327,29 +3756,9 @@ const sideDetailEditorStyle = computed(() => {
 });
 
 function getDetailEditor(): UseCellDetailEditorReturn | null {
-  return activeCellDetailTab.value === "valueEditor" ? valueDetailEditor : detailsDetailEditor;
+  return valueDetailEditor;
 }
 
-watch(detailsEditorContainer, async (el) => {
-  if (el && !detailsDetailEditor) {
-    detailsDetailEditor = useCellDetailEditor({
-      onChange: (v) => {
-        detailEditValue.value = v;
-      },
-      onEscape: () => cancelDetailEdit(),
-      editorTheme: editorThemeAccessor,
-      appAppearance: editorAppAppearance,
-      appPalette: editorAppPalette,
-      fontSize: editorFontSize,
-      fontFamily: editorFontFamily,
-    });
-    await detailsDetailEditor.create(el, detailEditValue.value, activeCellDetail.value?.type);
-  } else if (!el && detailsDetailEditor) {
-    detailsDetailEditor.destroy();
-    detailsDetailEditor = null;
-  }
-});
-
 watch(valueEditorContainer, async (el) => {
   if (el && !valueDetailEditor) {
     valueDetailEditor = useCellDetailEditor({
@@ -5371,75 +3780,6 @@ watch(valueEditorContainer, async (el) => {
   }
 });
 
-watch(sideJsonPreviewContainer, async (el) => {
-  if (el && !sideJsonPreviewEditor) {
-    sideJsonPreviewEditor = useCellDetailEditor({
-      language: "json",
-      readOnly: true,
-      editorTheme: editorThemeAccessor,
-      appAppearance: editorAppAppearance,
-      appPalette: editorAppPalette,
-      fontSize: editorFontSize,
-      fontFamily: editorFontFamily,
-    });
-    await sideJsonPreviewEditor.create(el, sideJsonPreviewText.value, "json");
-  } else if (!el && sideJsonPreviewEditor) {
-    sideJsonPreviewEditor.destroy();
-    sideJsonPreviewEditor = null;
-  }
-});
-
-watch(dialogJsonPreviewContainer, async (el) => {
-  if (el && !dialogJsonPreviewEditor) {
-    dialogJsonPreviewEditor = useCellDetailEditor({
-      language: "json",
-      readOnly: true,
-      editorTheme: editorThemeAccessor,
-      appAppearance: editorAppAppearance,
-      appPalette: editorAppPalette,
-      fontSize: editorFontSize,
-      fontFamily: editorFontFamily,
-    });
-    await dialogJsonPreviewEditor.create(el, dialogCellDetail.value?.formattedJson ?? "", "json");
-  } else if (!el && dialogJsonPreviewEditor) {
-    dialogJsonPreviewEditor.destroy();
-    dialogJsonPreviewEditor = null;
-  }
-});
-
-watch(mongoJsonPreviewContainer, async (el) => {
-  if (el && !mongoJsonPreviewEditor) {
-    mongoJsonPreviewEditor = useCellDetailEditor({
-      language: "json",
-      readOnly: true,
-      editorTheme: editorThemeAccessor,
-      appAppearance: editorAppAppearance,
-      appPalette: editorAppPalette,
-      fontSize: editorFontSize,
-      fontFamily: editorFontFamily,
-    });
-    await mongoJsonPreviewEditor.create(el, mongoJsonPreviewText.value, "json");
-  } else if (!el && mongoJsonPreviewEditor) {
-    mongoJsonPreviewEditor.destroy();
-    mongoJsonPreviewEditor = null;
-  }
-});
-
-watch(sideJsonPreviewText, (value) => {
-  sideJsonPreviewEditor?.setValue(value, "json");
-});
-
-watch(mongoJsonPreviewText, (value) => {
-  mongoJsonPreviewEditor?.setValue(value, "json");
-});
-
-watch(
-  () => dialogCellDetail.value?.formattedJson ?? "",
-  (value) => {
-    dialogJsonPreviewEditor?.setValue(value, "json");
-  },
-);
-
 function resetDetailEdit() {
   isEditingDetail.value = false;
   detailEditValue.value = "";
@@ -5602,20 +3942,14 @@ function applyColumnSort(column: string, columnIndex: number, direction: "asc" |
   currentPage.value = 1;
   resetGridVerticalScroll(true);
   if (direction) {
-    sortCol.value = column;
-    sortColIndex.value = columnIndex;
-    sortDir.value = direction;
-    sortMode.value = mode;
+    setSort(column, columnIndex, direction, mode);
     if (mode === "database") {
       syncOrderByInputWithSort(column, direction);
     } else {
       syncOrderByInputWithSort(null, null);
     }
   } else {
-    sortCol.value = null;
-    sortColIndex.value = null;
-    sortDir.value = "asc";
-    sortMode.value = "database";
+    clearSort();
     syncOrderByInputWithSort(null, null);
   }
   emit("sort", column, columnIndex, direction, currentWhereInput(), mode);
@@ -5690,9 +4024,7 @@ async function applyOrderBySearch() {
   isApplyingWhere.value = true;
   saveError.value = "";
   currentPage.value = 1;
-  sortCol.value = null;
-  sortColIndex.value = null;
-  sortDir.value = "asc";
+  clearSort();
   try {
     const tableMeta = await waitForTableMeta();
     if (!tableMeta) return;
@@ -5950,12 +4282,10 @@ const canvasSurfaceWidth = computed(() => {
 const canvasRenderStyleKey = computed(() => `${settingsStore.editorSettings.theme}:${settingsStore.editorSettings.uiScale}:${canvasBackingPixelRatio.value}:${isDark.value}:${themePalette.value}:${settingsStore.editorSettings.fontFamily}:${tableFontSize.value}`);
 const CANVAS_MOUSE_WHEEL_SCROLL_MULTIPLIER = 1.5;
 const CANVAS_TRACKPAD_DELTA_THRESHOLD = 40;
-let canvasResizeObserver: ResizeObserver | null = null;
 let canvasPixelRatioMediaQuery: MediaQueryList | null = null;
 let canvasPixelRatioMediaQueryCleanup: (() => void) | null = null;
-let canvasPixelRatioFrame = 0;
-let canvasDrawFrame = 0;
 let dataGridIsActive = true;
+let canvasRuntime: DataGridCanvasRuntime;
 
 watch(
   () => [totalWidth.value, displayRowCount.value, useCanvasGridRows.value, props.result.columns.join("\u0000")],
@@ -6016,7 +4346,7 @@ function syncCanvasViewport() {
   canvasScrollTop.value = scroller.scrollTop;
   updateGridScrollbarGutter(scroller);
   updateGridHorizontalViewport(scroller);
-  drawCanvasGridNow();
+  canvasRuntime?.drawNow();
 }
 
 function currentCanvasDevicePixelRatio(): number {
@@ -6024,16 +4354,8 @@ function currentCanvasDevicePixelRatio(): number {
 }
 
 function scheduleCanvasPixelRatioRefresh() {
-  if (!dataGridIsActive || canvasPixelRatioFrame) return;
-  canvasPixelRatioFrame = requestAnimationFrame(() => {
-    canvasPixelRatioFrame = 0;
-    const next = currentCanvasDevicePixelRatio();
-    if (Math.abs(next - canvasDevicePixelRatio.value) > 0.001) {
-      canvasDevicePixelRatio.value = next;
-      attachCanvasPixelRatioWatcher();
-    }
-    syncCanvasViewport();
-  });
+  if (!dataGridIsActive) return;
+  canvasRuntime.schedulePixelRatioRefresh();
 }
 
 function attachCanvasPixelRatioWatcher() {
@@ -6053,37 +4375,37 @@ function attachCanvasPixelRatioWatcher() {
 }
 
 function attachCanvasResizeObserver() {
-  canvasResizeObserver?.disconnect();
-  canvasResizeObserver = null;
   if (!dataGridIsActive) return;
   if (!useCanvasGridRows.value) return;
-  const scroller = canvasScrollerElement();
-  if (!scroller) return;
   attachCanvasPixelRatioWatcher();
-  syncCanvasViewport();
-  if (typeof ResizeObserver === "undefined") return;
-  canvasResizeObserver = new ResizeObserver(syncCanvasViewport);
-  canvasResizeObserver.observe(scroller);
+  canvasRuntime.observeViewport();
 }
 
 function scheduleCanvasDraw() {
   if (!dataGridIsActive) return;
-  if (!useCanvasGridRows.value || canvasDrawFrame) return;
-  canvasDrawFrame = requestAnimationFrame(() => {
-    canvasDrawFrame = 0;
-    drawCanvasGrid();
-  });
+  if (!useCanvasGridRows.value) return;
+  canvasRuntime.scheduleDraw();
 }
 
 function drawCanvasGridNow() {
   if (!useCanvasGridRows.value) return;
-  if (canvasDrawFrame) {
-    cancelAnimationFrame(canvasDrawFrame);
-    canvasDrawFrame = 0;
-  }
-  drawCanvasGrid();
+  canvasRuntime.drawNow();
 }
 
+canvasRuntime = useDataGridCanvasRuntime({
+  draw: drawCanvasGrid,
+  syncViewport: syncCanvasViewport,
+  getViewport: canvasScrollerElement,
+  refreshPixelRatio: () => {
+    const next = currentCanvasDevicePixelRatio();
+    if (Math.abs(next - canvasDevicePixelRatio.value) > 0.001) {
+      canvasDevicePixelRatio.value = next;
+      attachCanvasPixelRatioWatcher();
+    }
+    syncCanvasViewport();
+  },
+});
+
 function canvasColumnAt(contentX: number): number {
   const offsets = renderedColumnOffsets.value;
   const totalColumns = renderedColumnWidths.value.length;
@@ -6509,26 +4831,20 @@ watch(
 
 function pauseCanvasGridWork() {
   dataGridIsActive = false;
-  canvasResizeObserver?.disconnect();
-  canvasResizeObserver = null;
+  canvasRuntime.pause();
+  gridScrollbarsRuntime.pause();
   disconnectCellEditResizeObserver();
   dataGridTopbarResizeObserver?.disconnect();
   dataGridTopbarResizeObserver = null;
   canvasPixelRatioMediaQueryCleanup?.();
   canvasPixelRatioMediaQueryCleanup = null;
   canvasPixelRatioMediaQuery = null;
-  if (canvasPixelRatioFrame) {
-    cancelAnimationFrame(canvasPixelRatioFrame);
-    canvasPixelRatioFrame = 0;
-  }
-  if (canvasDrawFrame) {
-    cancelAnimationFrame(canvasDrawFrame);
-    canvasDrawFrame = 0;
-  }
 }
 
 function resumeCanvasGridWork() {
   dataGridIsActive = true;
+  canvasRuntime.resume();
+  gridScrollbarsRuntime.resume();
   nextTick(() => {
     attachCanvasResizeObserver();
     observeDataGridTopbarWidth();
@@ -6542,40 +4858,25 @@ onActivated(resumeCanvasGridWork);
 onMounted(() => {
   if (typeof window === "undefined") return;
   window.addEventListener("resize", scheduleCanvasPixelRatioRefresh);
-  window.addEventListener("resize", resizeFocusedConditionInputs);
   window.visualViewport?.addEventListener("resize", scheduleCanvasPixelRatioRefresh);
-  window.visualViewport?.addEventListener("resize", resizeFocusedConditionInputs);
   window.addEventListener("dbx:ui-scale-applied", scheduleCanvasPixelRatioRefresh);
-  window.addEventListener("dbx:ui-scale-applied", resizeFocusedConditionInputs);
   window.addEventListener(TABLE_DATA_GRID_COLUMN_ORDER_CHANGED_EVENT, onTableDataGridColumnOrderChanged);
-  document.addEventListener("pointerdown", onConditionSuggestionDocumentPointerDown, true);
 });
 onDeactivated(pauseCanvasGridWork);
 onUnmounted(() => {
+  dataGridRuntimeScope.dispose();
   pauseCanvasGridWork();
-  clearConditionCollapseTimer("where");
-  clearConditionCollapseTimer("orderBy");
-  gridHorizontalScrollbarResizeObserver?.disconnect();
+  canvasRuntime.dispose();
+  gridScrollbarsRuntime.dispose();
   dataGridTopbarResizeObserver?.disconnect();
   disconnectCellEditResizeObserver();
-  stopColumnHeaderDrag(false);
   stopGridHorizontalScrollbarDrag();
   stopGridVerticalScrollbarDrag();
-  if (gridHorizontalScrollbarFrame && typeof cancelAnimationFrame === "function") {
-    cancelAnimationFrame(gridHorizontalScrollbarFrame);
-  }
-  if (gridVerticalScrollbarDragFrame && typeof cancelAnimationFrame === "function") {
-    cancelAnimationFrame(gridVerticalScrollbarDragFrame);
-  }
   if (typeof window === "undefined") return;
   window.removeEventListener("resize", scheduleCanvasPixelRatioRefresh);
-  window.removeEventListener("resize", resizeFocusedConditionInputs);
   window.visualViewport?.removeEventListener("resize", scheduleCanvasPixelRatioRefresh);
-  window.visualViewport?.removeEventListener("resize", resizeFocusedConditionInputs);
   window.removeEventListener("dbx:ui-scale-applied", scheduleCanvasPixelRatioRefresh);
-  window.removeEventListener("dbx:ui-scale-applied", resizeFocusedConditionInputs);
   window.removeEventListener(TABLE_DATA_GRID_COLUMN_ORDER_CHANGED_EVENT, onTableDataGridColumnOrderChanged);
-  document.removeEventListener("pointerdown", onConditionSuggestionDocumentPointerDown, true);
 });
 
 function setRowStatusFilter(value: string) {
@@ -6584,6 +4885,7 @@ function setRowStatusFilter(value: string) {
 
 // --- Export progress dialog state ---
 const exportProgressDialog = ref(false);
+const exportProgressDialogMounted = useDataGridAsyncSurface(exportProgressDialog);
 const exportProgressState = ref({
   title: "",
   tableName: "",
@@ -6675,8 +4977,6 @@ const {
   exportCancelHandler,
 });
 
-const canAutoRefresh = computed(() => !isSaving.value && !props.loading);
-
 const pageSizeMenuItems = computed(() =>
   pageSizeOptions.value.map((size) => ({
     value: String(size),
@@ -6923,7 +5223,9 @@ function clipboardShortcut(event: KeyboardEvent, key: string): boolean {
 
 async function pasteClipboardIntoSelection() {
   if (!props.editable) return;
+  const operation = dataGridResultLifecycle.beginOperation();
   const text = await readTextFromClipboard();
+  if (!dataGridResultLifecycle.isCurrent(operation)) return;
   pasteTextIntoSelection(text);
 }
 
@@ -6939,15 +5241,12 @@ function pasteTextIntoSelection(text: string): boolean {
   const start = pasteStartCell();
   if (!start) return false;
   let applied = false;
-  rows.forEach((row, rowOffset) => {
-    const item = displayItemAt(start.rowIndex + rowOffset);
-    if (!item) return;
-    row.forEach((value, colOffset) => {
-      const visibleCol = start.colIndex + colOffset;
-      if (visibleCol >= visibleColumns.value.length) return;
-      applied = applyVisibleSelectedCellValue(item, visibleCol, value, allowDraftSelectionValue) || applied;
-    });
-  });
+  for (const cell of planDataGridPaste(rows, displayRowCount.value - start.rowIndex, visibleColumns.value.length - start.colIndex)) {
+    const item = displayItemAt(start.rowIndex + cell.rowOffset);
+    if (!item) continue;
+    const visibleCol = start.colIndex + cell.columnOffset;
+    applied = applyVisibleSelectedCellValue(item, visibleCol, cell.value, allowDraftSelectionValue) || applied;
+  }
   if (applied) toast(t("grid.pasted"));
   return applied;
 }
@@ -7185,12 +5484,15 @@ function toggleKeyboardTranspose(): boolean {
 function moveSelectedCell(rowDelta: number, colDelta: number): boolean {
   const position = currentSelectedCellPosition();
   if (!position || editingCell.value || displayRowCount.value === 0 || visibleColumnIndexes.value.length === 0) return false;
-  const rowIndex = Math.max(0, Math.min(displayRowCount.value - 1, position.rowIndex + rowDelta));
-  const colIndex = Math.max(0, Math.min(visibleColumnIndexes.value.length - 1, position.colIndex + colDelta));
-  selectSingleCell(rowIndex, colIndex);
+  const nextPosition = moveDataGridCell(position, rowDelta, colDelta, {
+    rowCount: displayRowCount.value,
+    visibleColumnCount: visibleColumnIndexes.value.length,
+  });
+  if (!nextPosition) return false;
+  selectSingleCell(nextPosition.rowIndex, nextPosition.colIndex);
   clearRowSelection();
-  if (showTranspose.value) transposeRowIndex.value = rowIndex;
-  scrollCellIntoView(rowIndex, colIndex);
+  if (showTranspose.value) transposeRowIndex.value = nextPosition.rowIndex;
+  scrollCellIntoView(nextPosition.rowIndex, nextPosition.colIndex);
   return true;
 }
 
@@ -7308,7 +5610,7 @@ function redoGridChange(): boolean {
 }
 
 function openCellDetailSearch(): boolean {
-  return getDetailEditor()?.openSearch() ?? false;
+  return getDetailEditor()?.openSearch() || cellDetailPanelRef.value?.openSearch() || false;
 }
 
 async function onGridKeydown(event: KeyboardEvent) {
@@ -7511,32 +5813,6 @@ async function copyDetailSqlCondition() {
   copyText(detailSqlConditionCopy.value.text);
 }
 
-function copyDialogCellValue() {
-  const detail = dialogCellDetail.value;
-  if (!detail) return;
-  copyText(detail.value === null ? "" : displayCellValue(detail.value));
-}
-
-function copyDialogCellFormattedJson() {
-  const detail = dialogCellDetail.value;
-  if (!detail?.formattedJson) return;
-  copyText(detail.formattedJson);
-}
-
-function copyDialogCellCurrentValue() {
-  if (cellDetailJsonView.value && dialogCellDetail.value?.formattedJson) {
-    copyDialogCellFormattedJson();
-  } else {
-    copyDialogCellValue();
-  }
-}
-
-function copyDialogCellColumnName() {
-  const detail = dialogCellDetail.value;
-  if (!detail) return;
-  copyText(detail.column);
-}
-
 async function openDialogCellInSidePanel() {
   const detail = dialogCellDetail.value;
   if (!detail) return;
@@ -8466,64 +6742,12 @@ function toggleDdlWrap() {
   ddlWrap.value = !ddlWrap.value;
 }
 
-function searchSplitContainerWidth(): number {
-  return searchSplitContainerRef.value?.getBoundingClientRect().width ?? 0;
-}
-
-function onSearchSplitResizeStart(event: MouseEvent) {
-  const containerWidth = searchSplitContainerWidth();
-  if (containerWidth <= 0) return;
-  event.preventDefault();
-  isResizingSearchSplit.value = true;
-  searchSplitStartX = event.clientX;
-  searchSplitStartWidth = clampSearchSplitWidth({
-    containerWidth,
-    desiredWidth: searchSplitWhereWidth.value ?? undefined,
-  });
-  searchSplitWhereWidth.value = searchSplitStartWidth;
-  document.body.classList.add("select-none", "cursor-col-resize");
-  window.addEventListener("mousemove", onSearchSplitResizeMove);
-  window.addEventListener("mouseup", onSearchSplitResizeEnd);
-}
-
-function onSearchSplitResizeMove(event: MouseEvent) {
-  if (!isResizingSearchSplit.value) return;
-  const containerWidth = searchSplitContainerWidth();
-  if (containerWidth <= 0) return;
-  searchSplitWhereWidth.value = clampSearchSplitWidth({
-    containerWidth,
-    desiredWidth: searchSplitStartWidth + event.clientX - searchSplitStartX,
-  });
-  resizeFocusedConditionInputs();
-}
-
-function onSearchSplitResizeEnd() {
-  isResizingSearchSplit.value = false;
-  document.body.classList.remove("select-none", "cursor-col-resize");
-  window.removeEventListener("mousemove", onSearchSplitResizeMove);
-  window.removeEventListener("mouseup", onSearchSplitResizeEnd);
-}
-
-function resetSearchSplitWidth() {
-  const containerWidth = searchSplitContainerWidth();
-  searchSplitWhereWidth.value = containerWidth > 0 ? clampSearchSplitWidth({ containerWidth }) : null;
-  resizeFocusedConditionInputs();
-}
-
 function onDataGridTopbarFixedActionWheel(event: WheelEvent) {
   if (Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return;
   event.preventDefault();
   event.stopPropagation();
 }
 
-function onConditionInputWheel(event: WheelEvent) {
-  const input = event.currentTarget instanceof HTMLTextAreaElement ? event.currentTarget : null;
-  if (!input || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return;
-  input.scrollLeft += event.deltaX;
-  event.preventDefault();
-  event.stopPropagation();
-}
-
 function onDdlResizeStart(event: MouseEvent) {
   isResizingDdl.value = true;
   ddlResizeStartX = event.clientX;
@@ -8652,27 +6876,21 @@ watch(
 
 onActivated(() => {
   startLoadingElapsedTimer();
-  restartAutoRefreshTimer();
+  autoRefresh.start();
 });
 onDeactivated(() => {
   stopLoadingElapsedTimer();
-  stopAutoRefreshTimer();
+  autoRefresh.stop();
 });
 
 onUnmounted(() => {
   cleanupFrames();
-  stopAutoRefreshTimer();
-  cancelColumnHeaderDragPreview();
-  clearColumnHeaderResizeListeners();
-  clearColumnHeaderClickGuard();
-  columnHeaderResizeActive.value = false;
-  onSearchSplitResizeEnd();
+  autoRefresh.stop();
   onDdlResizeEnd();
   onDetailResizeEnd();
   onMongoJsonPreviewResizeEnd();
   finishCellSelection();
   clearTimeout(highlightedColumnTimer);
-  clearTimeout(_searchTimer);
   if (serverFilterSearchTimer !== undefined) {
     window.clearTimeout(serverFilterSearchTimer);
   }
@@ -8834,23 +7052,23 @@ function copyRowLabels() {
 }
 
 function filterSubmenu(): ContextMenuItem {
-  return {
+  return createDataGridFilterSubmenu({
     label: t("grid.filter"),
     icon: Filter,
-    children: [
-      { label: t("grid.filterByValue"), action: () => applyContextFilter("equals") },
-      { label: t("grid.filterExcludeValue"), action: () => applyContextFilter("not-equals") },
-      { label: t("grid.filterLike"), action: () => applyContextFilter("like") },
-      { label: t("grid.filterNotLike"), action: () => applyContextFilter("not-like") },
-      { label: t("grid.filterLessThan"), action: () => applyContextFilter("less-than") },
-      { label: t("grid.filterGreaterThan"), action: () => applyContextFilter("greater-than") },
-      { label: "", separator: true },
-      { label: t("grid.filterIsNull"), action: () => applyContextFilter("is-null") },
-      { label: t("grid.filterIsNotNull"), action: () => applyContextFilter("is-not-null") },
-      { label: "", separator: true },
-      { label: t("grid.clearFilter"), action: clearContextFilter },
-    ],
-  };
+    labels: {
+      equals: t("grid.filterByValue"),
+      notEquals: t("grid.filterExcludeValue"),
+      like: t("grid.filterLike"),
+      notLike: t("grid.filterNotLike"),
+      lessThan: t("grid.filterLessThan"),
+      greaterThan: t("grid.filterGreaterThan"),
+      isNull: t("grid.filterIsNull"),
+      isNotNull: t("grid.filterIsNotNull"),
+      clear: t("grid.clearFilter"),
+    },
+    apply: applyContextFilter,
+    clear: clearContextFilter,
+  });
 }
 
 function copySubmenu(): ContextMenuItem {
@@ -8940,130 +7158,17 @@ function exportSubmenu(): ContextMenuItem {
 }
 
 const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
-  const items: ContextMenuItem[] = [];
-
-  // 1. Copy column name
-  if (contextHeaderColumn.value) {
-    items.push({ label: t("grid.copyColumnName"), action: copyHeaderColumn, icon: Copy });
-    items.push({ label: t("grid.copyColumnNames"), action: copyColumnNames, icon: Copy });
-    items.push({
-      label: t("grid.openColumnDetailsDialog"),
-      action: openContextColumnDetailDialog,
-      icon: TableProperties,
-    });
-    if (canCopyAlterColumnSql.value) {
-      items.push({ label: t("grid.copyAlterColumnSql"), action: copyAlterColumnSql, icon: Copy });
-    }
-  }
-
-  // 2. Column sort & filter
-  if (contextColumn.value) {
-    items.push(
-      { label: t("grid.sortDatabaseAscending"), action: () => applyContextSort("asc", "database"), icon: Database },
-      { label: t("grid.sortDatabaseDescending"), action: () => applyContextSort("desc", "database"), icon: Database },
-      { label: "", separator: true },
-      { label: t("grid.sortCurrentPageAscending"), action: () => applyContextSort("asc", "local"), icon: ArrowUp },
-      { label: t("grid.sortCurrentPageDescending"), action: () => applyContextSort("desc", "local"), icon: ArrowDown },
-    );
-    if (sortCol.value) {
-      items.push({ label: t("grid.clearSort"), action: () => applyContextSort(null, sortMode.value), icon: ArrowUpDown });
-    }
-    if (canUseWhereSearch.value) {
-      items.push({ label: "", separator: true });
-      items.push(filterSubmenu());
-    }
-    items.push({ label: "", separator: true });
-  }
-
-  // 3. Detail dialogs
-  if (contextCell.value) {
-    if (contextColumn.value) {
-      items.push({ label: t("grid.openCellDetailsDialog"), action: openContextCellDetailDialog, icon: Maximize2 });
-      const downloadItem = binaryDownloadSubmenu(contextCellDetail.value);
-      if (downloadItem) items.push(downloadItem);
-      items.push({
-        label: t("grid.openColumnDetailsDialog"),
-        action: openContextColumnDetailDialog,
-        icon: TableProperties,
-      });
-    }
-    items.push({ label: t("grid.openRowDetailsDialog"), action: openContextRowDetailDialog, icon: ListTree });
-    items.push({ label: "", separator: true });
-  }
-
-  // 4. Copy submenu
-  if (!contextHeaderColumn.value) {
-    items.push(copySubmenu());
-  }
-
-  if (props.editable && hasCellSelection.value) {
-    const hasEditableSelection = selectionHasEditableCells();
-    if (!contextHeaderColumn.value) {
-      items.push({
-        label: t("grid.setNull"),
-        action: setSelectionNull,
-        disabled: !hasEditableSelection,
-        icon: X,
-      });
-    }
-    items.push({
-      label: t("grid.bulkEditSelection"),
-      action: openBulkEditDialog,
-      disabled: !hasEditableSelection,
-      icon: Pencil,
-    });
-  }
-
-  // 5. Transpose
-  if (contextCell.value) {
-    items.push({ label: t("grid.transpose"), action: openContextTranspose, icon: Rows3 });
-  }
-
-  // 6. Selection submenu
-  if (hasCellSelection.value) {
-    items.push(selectionSubmenu());
-  }
-
-  // 7. Row actions
-  if (props.editable && contextRowItem.value) {
-    const labels = rowActionLabels();
-    items.push({ label: "", separator: true });
-    if (canInsertRows.value && !contextRowItem.value.isDraft) {
-      items.push({
-        label: labels.clone,
-        action: () => (isMultiRow.value ? cloneRows(affectedRowIds()) : cloneRow(contextRowItem.value!.id)),
-        icon: CopyPlus,
-      });
-    }
-    if (contextRowItem.value.isDeleted) {
-      items.push({
-        label: labels.restore,
-        action: () => (isMultiRow.value ? restoreRows(affectedRowIds()) : restoreRow(contextRowItem.value!.id)),
-        icon: Undo2,
-      });
-    } else if (canDeleteRowItem(contextRowItem.value)) {
-      items.push({
-        label: labels.delete,
-        action: () => (isMultiRow.value ? requestDeleteRows(deletableRowIds(affectedRowIds())) : requestDeleteRow(contextRowItem.value!.id)),
-        icon: Trash2,
-        variant: "destructive" as const,
-      });
-    }
-    items.push({ label: "", separator: true });
-  }
-
-  // 8. Export submenu
-  items.push(exportSubmenu());
-
-  // 9. Preview actions from registry (e.g. geometry map preview)
+  const row = contextRowItem.value;
+  const rowLabels = rowActionLabels();
+  const previewItems: ContextMenuItem[] = [];
   if (!contextHeaderColumn.value && contextCell.value) {
     const colType = props.result.column_types?.[contextCell.value.col];
     if (colType && isGeometryColumnType(colType)) {
       const actions = previewActions.value;
       if (actions.length > 0) {
-        items.push({ label: "", separator: true });
+        previewItems.push({ label: "", separator: true });
         for (const action of actions) {
-          items.push({
+          previewItems.push({
             label: t("grid.layerPreview"),
             action: () => executePreviewAction(action),
             icon: action.icon,
@@ -9073,7 +7178,68 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
     }
   }
 
-  return items;
+  return createDataGridContextMenuItems(
+    createDataGridColumnContextMenuItems({
+      headerColumn: !!contextHeaderColumn.value,
+      contextColumn: !!contextColumn.value,
+      canCopyAlterSql: canCopyAlterColumnSql.value,
+      canFilter: canUseWhereSearch.value,
+      hasSort: !!sortCol.value,
+      sortMode: sortMode.value,
+      labels: {
+        copyName: t("grid.copyColumnName"),
+        copyNames: t("grid.copyColumnNames"),
+        details: t("grid.openColumnDetailsDialog"),
+        copyAlterSql: t("grid.copyAlterColumnSql"),
+        databaseAscending: t("grid.sortDatabaseAscending"),
+        databaseDescending: t("grid.sortDatabaseDescending"),
+        localAscending: t("grid.sortCurrentPageAscending"),
+        localDescending: t("grid.sortCurrentPageDescending"),
+        clearSort: t("grid.clearSort"),
+      },
+      icons: { copy: Copy, columnDetails: TableProperties, database: Database, ascending: ArrowUp, descending: ArrowDown, clearSort: ArrowUpDown },
+      actions: { copyName: copyHeaderColumn, copyNames: copyColumnNames, details: openContextColumnDetailDialog, copyAlterSql: copyAlterColumnSql, sort: applyContextSort },
+      filterSubmenu: filterSubmenu(),
+    }),
+    createDataGridCellContextMenuItems({
+      hasCell: !!contextCell.value,
+      hasColumn: !!contextColumn.value,
+      headerColumn: !!contextHeaderColumn.value,
+      editable: props.editable,
+      hasCellSelection: hasCellSelection.value,
+      hasEditableSelection: selectionHasEditableCells(),
+      hasSelection: hasCellSelection.value,
+      labels: {
+        cellDetails: t("grid.openCellDetailsDialog"),
+        columnDetails: t("grid.openColumnDetailsDialog"),
+        rowDetails: t("grid.openRowDetailsDialog"),
+        setNull: t("grid.setNull"),
+        bulkEdit: t("grid.bulkEditSelection"),
+        transpose: t("grid.transpose"),
+      },
+      icons: { cellDetails: Maximize2, columnDetails: TableProperties, rowDetails: ListTree, setNull: X, bulkEdit: Pencil, transpose: Rows3 },
+      actions: { cellDetails: openContextCellDetailDialog, columnDetails: openContextColumnDetailDialog, rowDetails: openContextRowDetailDialog, setNull: setSelectionNull, bulkEdit: openBulkEditDialog, transpose: openContextTranspose },
+      downloadItem: binaryDownloadSubmenu(contextCellDetail.value),
+      copySubmenu: copySubmenu(),
+      selectionSubmenu: selectionSubmenu(),
+    }),
+    createDataGridRowContextMenuItems({
+      editable: props.editable,
+      hasRow: !!row,
+      canClone: !!row && canInsertRows.value && !row.isDraft,
+      deleted: !!row?.isDeleted,
+      canDelete: !!row && canDeleteRowItem(row),
+      labels: rowLabels,
+      icons: { clone: CopyPlus, restore: Undo2, delete: Trash2 },
+      actions: {
+        clone: () => (isMultiRow.value ? cloneRows(affectedRowIds()) : row && cloneRow(row.id)),
+        restore: () => (isMultiRow.value ? restoreRows(affectedRowIds()) : row && restoreRow(row.id)),
+        delete: () => (isMultiRow.value ? requestDeleteRows(deletableRowIds(affectedRowIds())) : row && requestDeleteRow(row.id)),
+      },
+    }),
+    [exportSubmenu()],
+    previewItems,
+  );
 });
 </script>
 
@@ -9086,13 +7252,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
           <div v-if="hasResultToolbarLeadingSlot" class="flex shrink-0 items-center border-r">
             <slot name="result-toolbar-leading" :compact="compactDataGridToolbar" />
           </div>
-          <div
-            class="data-grid-topbar-scroll min-w-0 flex-1 overflow-x-hidden"
-            @scroll="
-              updateWhereSuggestionPosition();
-              updateOrderBySuggestionPosition();
-            "
-          >
+          <div class="data-grid-topbar-scroll min-w-0 flex-1 overflow-x-hidden">
             <div class="data-grid-topbar flex items-stretch relative" :class="{ 'data-grid-topbar--compact': compactDataGridToolbar }">
               <div v-if="useTransaction && editable && hasDataGridSaveTarget" class="flex items-center px-2 py-0.5 border-r shrink-0">
                 <Select :model-value="rowStatusFilter" @update:model-value="(value: any) => setRowStatusFilter(String(value))">
@@ -9118,616 +7278,128 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
                 </div>
               </template>
               <template v-if="canShowWhereSearch">
-                <div ref="searchSplitContainerRef" class="flex flex-1 min-w-0">
-                  <div ref="whereConditionPaneRef" class="flex flex-1 items-center gap-1 px-2 py-0.5 min-w-0 relative" :class="{ 'border-l': useTransaction && editable && hasDataGridSaveTarget }" :style="whereSearchPaneStyle">
-                    <Popover v-model:open="filterBuilderOpen">
-                      <PopoverTrigger as-child>
-                        <button
-                          type="button"
-                          class="relative flex h-5 w-5 shrink-0 items-center justify-center rounded border text-[11px] font-medium transition-colors"
-                          :class="filterButtonActive ? 'border-primary/40 bg-primary/10 text-primary hover:bg-primary/15' : 'border-border/70 text-muted-foreground hover:bg-accent hover:text-foreground'"
-                          :disabled="!canUseWhereSearch"
-                          @click="ensureStructuredFilterRule"
-                        >
-                          <Filter class="h-3 w-3" />
-                          <span v-if="filterButtonCount" class="absolute -right-1 -top-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-1 text-[9px] leading-none text-primary-foreground">
-                            {{ filterButtonCount }}
-                          </span>
-                        </button>
-                      </PopoverTrigger>
-                      <PopoverContent align="start" class="w-[380px] max-w-[calc(100vw-24px)] gap-3 p-3">
-                        <div class="flex items-center justify-between gap-3">
-                          <div class="text-xs font-medium text-foreground">{{ t("grid.filter") }}</div>
-                          <Button variant="ghost" size="sm" class="h-7 px-2 text-xs" @click="addStructuredFilterRule">
-                            <Plus class="mr-1 h-3.5 w-3.5" />
-                            {{ t("grid.filterBuilderAddRule") }}
-                          </Button>
-                        </div>
-
-                        <div v-if="hasLocalColumnFilters" class="space-y-2 rounded-md border border-primary/20 bg-primary/5 px-2.5 py-2">
-                          <div class="flex items-center justify-between gap-3">
-                            <div class="flex min-w-0 items-center gap-2 text-xs font-medium text-primary">
-                              <Filter class="h-3.5 w-3.5 shrink-0" />
-                              <span class="truncate">{{ t("grid.localFiltersActive", { count: localFilterCount }) }}</span>
-                            </div>
-                            <Button variant="ghost" size="sm" class="h-7 shrink-0 px-2 text-xs" @click="clearLocalFilter()">
-                              <X class="mr-1 h-3.5 w-3.5" />
-                              {{ t("grid.clearLocalFiltersShort") }}
-                            </Button>
-                          </div>
-                          <div class="space-y-1">
-                            <div v-for="summary in localFilterSummaries" :key="summary.columnIndex" class="grid grid-cols-[minmax(0,0.9fr)_minmax(0,1.6fr)_auto] items-center gap-2 rounded border border-primary/10 bg-background/70 px-2 py-1 text-xs">
-                              <span class="truncate font-medium text-foreground" :title="summary.columnName">
-                                {{ summary.columnName }}
-                              </span>
-                              <span class="min-w-0 truncate font-mono text-muted-foreground">
-                                <template v-for="(value, valueIndex) in summary.values" :key="valueIndex">
-                                  <span v-if="valueIndex > 0">, </span>
-                                  <span>{{ value }}</span>
-                                </template>
-                                <span v-if="summary.hiddenValueCount">
-                                  {{ t("grid.localFilterMoreValues", { count: summary.hiddenValueCount }) }}
-                                </span>
-                              </span>
-                              <Button variant="ghost" size="icon" class="h-6 w-6 text-muted-foreground hover:text-destructive" :title="t('grid.clearFilter')" @click="clearLocalFilter(summary.columnIndex)">
-                                <X class="h-3.5 w-3.5" />
-                              </Button>
-                            </div>
-                          </div>
-                        </div>
-
-                        <div v-if="structuredFilterRules.length" class="space-y-2">
-                          <template v-for="(rule, index) in structuredFilterRules" :key="rule.id">
-                            <div v-if="index > 0" class="flex justify-center">
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                class="h-6 px-2 text-[11px] font-medium text-muted-foreground hover:text-foreground"
-                                @click="
-                                  updateStructuredFilterRule(rule.id, {
-                                    conjunction: rule.conjunction === 'AND' ? 'OR' : 'AND',
-                                  })
-                                "
-                              >
-                                {{ rule.conjunction }}
-                              </Button>
-                            </div>
-                            <div class="grid items-center gap-2" :class="filterModeUsesExpandedLayout(rule.mode) ? 'grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)_auto]' : 'grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)_minmax(0,1.2fr)_auto]'">
-                              <Select :model-value="rule.columnName" :disabled="rule.disabled" :class="rule.disabled ? 'opacity-45' : ''" @update:model-value="(value: any) => updateStructuredFilterRuleColumn(rule.id, String(value))">
-                                <SelectTrigger class="h-8 w-full min-w-0 overflow-hidden text-xs [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate">
-                                  <SelectValue :placeholder="t('grid.filterBuilderColumn')" />
-                                </SelectTrigger>
-                                <SelectContent position="popper" class="max-h-72" :hide-scroll-buttons="true">
-                                  <SelectItem v-for="columnName in filteredFilterBuilderColumnOptions" :key="columnName" :value="columnName">
-                                    {{ columnName }}
-                                  </SelectItem>
-                                  <div v-if="filteredFilterBuilderColumnOptions.length === 0" class="px-2 py-2 text-xs text-muted-foreground">
-                                    {{ t("grid.filterBuilderNoMatchingColumns") }}
-                                  </div>
-                                  <div class="sticky bottom-0 mt-1 flex items-center gap-1.5 border-t bg-popover px-2 py-1.5">
-                                    <Search class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                                    <input
-                                      v-model="filterBuilderColumnSearch"
-                                      autocapitalize="off"
-                                      autocomplete="off"
-                                      autocorrect="off"
-                                      spellcheck="false"
-                                      class="h-7 min-w-0 flex-1 bg-transparent text-xs outline-none placeholder:text-muted-foreground"
-                                      :placeholder="t('grid.filterBuilderSearchColumns')"
-                                      @click.stop
-                                      @keydown="handleFilterBuilderColumnSearchKeydown"
-                                      @pointerdown.stop
-                                    />
-                                  </div>
-                                </SelectContent>
-                              </Select>
-
-                              <Select :model-value="rule.mode" :disabled="rule.disabled" :class="rule.disabled ? 'opacity-45' : ''" @update:model-value="(value: any) => updateStructuredFilterRule(rule.id, { mode: value as FilterMode })">
-                                <SelectTrigger class="h-8 w-full min-w-0 overflow-hidden text-xs [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate">
-                                  <SelectValue />
-                                </SelectTrigger>
-                                <SelectContent position="popper">
-                                  <SelectItem v-for="option in filterModeOptions" :key="option.value" :value="option.value">
-                                    {{ t(option.labelKey) }}
-                                  </SelectItem>
-                                </SelectContent>
-                              </Select>
-
-                              <div v-if="filterModeUsesRange(rule.mode)" class="col-span-2 flex min-w-0 gap-2">
-                                <Input
-                                  :model-value="rule.rawValue"
-                                  class="h-8 min-w-0 flex-1 text-xs"
-                                  :class="rule.disabled ? 'opacity-45' : ''"
-                                  :disabled="rule.disabled"
-                                  :aria-label="t('grid.filterBuilderRangeStart')"
-                                  :placeholder="t('grid.filterBuilderRangeStart')"
-                                  @update:model-value="(value) => updateStructuredFilterRule(rule.id, { rawValue: String(value ?? '') })"
-                                  @keydown.enter.prevent="applyStructuredFilters"
-                                />
-                                <Input
-                                  :model-value="rule.rawEndValue"
-                                  class="h-8 min-w-0 flex-1 text-xs"
-                                  :class="rule.disabled ? 'opacity-45' : ''"
-                                  :disabled="rule.disabled"
-                                  :aria-label="t('grid.filterBuilderRangeEnd')"
-                                  :placeholder="t('grid.filterBuilderRangeEnd')"
-                                  @update:model-value="(value) => updateStructuredFilterRule(rule.id, { rawEndValue: String(value ?? '') })"
-                                  @keydown.enter.prevent="applyStructuredFilters"
-                                />
-                              </div>
-                              <textarea
-                                v-else-if="filterModeUsesList(rule.mode)"
-                                rows="2"
-                                autocapitalize="off"
-                                autocomplete="off"
-                                autocorrect="off"
-                                spellcheck="false"
-                                class="col-span-2 min-h-14 w-full min-w-0 resize-y rounded-[6px] border border-input bg-transparent px-2.5 py-1 text-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring"
-                                :class="rule.disabled ? 'opacity-45' : ''"
-                                :disabled="rule.disabled"
-                                :aria-label="t('grid.filterBuilderValues')"
-                                :placeholder="t('grid.filterBuilderValues')"
-                                :value="rule.rawValue"
-                                @input="updateStructuredFilterRule(rule.id, { rawValue: ($event.target as HTMLTextAreaElement).value })"
-                                @keydown.ctrl.enter.prevent="applyStructuredFilters"
-                                @keydown.meta.enter.prevent="applyStructuredFilters"
-                              ></textarea>
-                              <Input
-                                v-else-if="filterModeNeedsValue(rule.mode)"
-                                :model-value="rule.rawValue"
-                                class="h-8 min-w-0 text-xs"
-                                :class="rule.disabled ? 'opacity-45' : ''"
-                                :disabled="rule.disabled"
-                                :placeholder="t('grid.filterBuilderValue')"
-                                @update:model-value="(value) => updateStructuredFilterRule(rule.id, { rawValue: String(value ?? '') })"
-                                @keydown.enter.prevent="applyStructuredFilters"
-                              />
-                              <div v-else class="flex h-8 min-w-0 items-center overflow-hidden rounded-md border border-dashed px-2 text-xs text-muted-foreground" :class="rule.disabled ? 'opacity-45' : ''">
-                                <span class="truncate">{{ t("grid.filterBuilderNoValue") }}</span>
-                              </div>
-
-                              <div class="flex items-center gap-1" :class="filterModeUsesExpandedLayout(rule.mode) ? 'col-start-3 row-start-1 row-span-2 self-center' : ''">
-                                <Button variant="ghost" size="icon" class="h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground" @click="updateStructuredFilterRule(rule.id, { disabled: !rule.disabled })">
-                                  <EyeOff v-if="rule.disabled" class="h-3.5 w-3.5" />
-                                  <Eye v-else class="h-3.5 w-3.5" />
-                                </Button>
-                                <Button variant="ghost" size="icon" class="h-8 w-8 shrink-0 text-muted-foreground hover:text-destructive" :disabled="structuredFilterRules.length === 1" @click="removeStructuredFilterRule(rule.id)">
-                                  <Trash2 class="h-3.5 w-3.5" />
-                                </Button>
-                              </div>
-                            </div>
-                          </template>
-                        </div>
-
-                        <div v-else class="rounded-md border border-dashed px-3 py-4 text-center text-xs text-muted-foreground">
-                          {{ t("grid.filterBuilderEmpty") }}
-                        </div>
-
-                        <div class="flex items-center justify-between gap-2 pt-1">
-                          <Button variant="ghost" size="sm" class="h-8 px-2 text-xs" @click="clearAllFilters">
-                            {{ t("grid.clearFilter") }}
-                          </Button>
-                          <div class="flex items-center gap-2">
-                            <Button variant="ghost" size="sm" class="h-8 px-2 text-xs" @click="resetStructuredFilters">
-                              {{ t("grid.resetFilterBuilder") }}
-                            </Button>
-                            <Button size="sm" class="h-8 px-3 text-xs" @click="applyStructuredFilters">
-                              {{ t("grid.applyFilter") }}
-                            </Button>
-                          </div>
-                        </div>
-                      </PopoverContent>
-                    </Popover>
-                    <div ref="whereConditionControlRef" class="flex min-w-0 flex-1 items-center gap-1">
-                      <span class="data-grid-topbar-condition-label data-grid-topbar-condition-label--where" :class="{ 'data-grid-topbar-condition-label--compact': compactDataGridToolbar }">WHERE</span>
-                      <div class="relative h-6 min-w-0 flex-1 overflow-hidden">
-                        <textarea
-                          ref="whereFilterInputRef"
-                          v-model="whereFilterInput"
-                          wrap="off"
-                          rows="1"
-                          autocapitalize="off"
-                          autocorrect="off"
-                          spellcheck="false"
-                          class="data-grid-topbar-condition-input data-grid-topbar-condition-input--where absolute inset-x-0 top-0 h-6 min-w-0 resize-none bg-transparent outline-none"
-                          :class="{ 'data-grid-topbar-condition-input--compact': compactDataGridToolbar }"
-                          style="height: 24px"
-                          placeholder="WHERE"
-                          @input="onWhereFilterInput"
-                          @keydown="onWhereFilterKeydown"
-                          @focus="resizeConditionInput('where')"
-                          @click="onConditionInputClick('where')"
-                          @wheel="onConditionInputWheel"
-                          @blur="
-                            dismissWhereSuggestions();
-                            collapseConditionInputAfterBlur('where');
-                          "
-                        />
-                      </div>
-                      <button class="text-muted-foreground hover:text-foreground shrink-0" type="button" @mousedown.prevent="openWhereHistoryMenu">
-                        <ChevronDown class="w-3 h-3" />
-                      </button>
-                      <button v-if="hasWhereFilterInput" class="text-muted-foreground hover:text-foreground shrink-0" @click="clearWhereFilterInput">
-                        <X class="w-3 h-3" />
-                      </button>
-                    </div>
-                    <Teleport to="body">
-                      <div v-if="whereConditionRendered" class="data-grid-topbar-condition-pane--expanded flex min-w-0 items-start gap-1" :class="{ 'border-l': useTransaction && editable && hasDataGridSaveTarget }" :style="conditionPaneStyle('where')">
-                        <textarea
-                          ref="whereFilterOverlayRef"
-                          v-model="whereFilterInput"
-                          wrap="soft"
-                          rows="1"
-                          autocapitalize="off"
-                          autocorrect="off"
-                          spellcheck="false"
-                          class="data-grid-topbar-condition-input data-grid-topbar-condition-input--where data-grid-topbar-condition-input--expanded absolute resize-none outline-none"
-                          :class="{ 'data-grid-topbar-condition-input--compact': compactDataGridToolbar }"
-                          placeholder="WHERE"
-                          @input="onWhereFilterInput"
-                          @keydown="onWhereFilterKeydown"
-                          @focus="resizeConditionInput('where')"
-                          @click="onConditionOverlayClick('where')"
-                          @scroll="onConditionOverlayScroll('where', $event)"
-                          @blur="
-                            dismissWhereSuggestions();
-                            collapseConditionInputAfterBlur('where');
-                          "
-                        />
-                        <div class="data-grid-topbar-condition-floating-controls pointer-events-none absolute inset-x-2 z-[1] flex h-6 min-w-0 items-center gap-1" :style="conditionTopbarOverlayStyle('where')">
-                          <button
-                            type="button"
-                            class="data-grid-topbar-condition-icon-control pointer-events-auto relative flex h-5 w-5 shrink-0 items-center justify-center rounded border text-[11px] font-medium transition-colors"
-                            :class="filterButtonActive ? 'border-primary/40 bg-primary/10 text-primary hover:bg-primary/15' : 'border-border/70 text-muted-foreground hover:bg-accent hover:text-foreground'"
-                            :disabled="!canUseWhereSearch"
-                            @mousedown.prevent
-                            @click="openStructuredFilterFromExpandedWhere"
-                          >
-                            <Filter class="h-3 w-3" />
-                            <span v-if="filterButtonCount" class="absolute -right-1 -top-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-1 text-[9px] leading-none text-primary-foreground">
-                              {{ filterButtonCount }}
-                            </span>
-                          </button>
-                          <span class="data-grid-topbar-condition-label data-grid-topbar-condition-label--where" :class="{ 'data-grid-topbar-condition-label--compact': compactDataGridToolbar }">WHERE</span>
-                          <div class="min-w-0 flex-1" />
-                          <button class="data-grid-topbar-condition-icon-control pointer-events-auto text-muted-foreground hover:text-foreground shrink-0" type="button" @mousedown.prevent="openWhereHistoryMenu">
-                            <ChevronDown class="w-3 h-3" />
-                          </button>
-                          <button v-if="hasWhereFilterInput" class="data-grid-topbar-condition-icon-control pointer-events-auto text-muted-foreground hover:text-foreground shrink-0" @click="clearWhereFilterInput">
-                            <X class="w-3 h-3" />
-                          </button>
-                        </div>
-                      </div>
-                    </Teleport>
-                    <!-- WHERE suggestion dropdown -->
-                    <Teleport to="body">
-                      <div v-if="showWhereSuggestionDropdown" ref="whereSuggestionDropdownRef" class="fixed z-[90] min-w-[180px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md" :style="whereSuggestionStyle">
-                        <div
-                          v-for="(sug, idx) in whereSuggestions"
-                          :key="`${sug.kind}:${sug.value}`"
-                          class="flex min-w-0 items-center gap-2 px-3 py-1.5 text-xs cursor-pointer"
-                          :class="idx === whereSuggestionIndex ? 'bg-accent text-accent-foreground' : 'hover:bg-gray-200 dark:hover:bg-gray-800'"
-                          @mousedown.prevent="
-                            whereSuggestionIndex = idx;
-                            acceptWhereSuggestion();
-                          "
-                          @mouseenter="
-                            whereSuggestionIndex = idx;
-                            sug.kind === 'history' ? showConditionHistoryPreview(sug.value, $event) : hideConditionHistoryPreview();
-                          "
-                          @mouseleave="hideConditionHistoryPreview"
-                        >
-                          <Search class="w-3 h-3 mr-2 text-muted-foreground shrink-0" />
-                          <span data-condition-history-text class="min-w-0 flex-1 truncate font-mono">{{ sug.value }}</span>
-                          <button v-if="sug.kind === 'history'" class="shrink-0 rounded p-0.5 text-muted-foreground hover:bg-destructive/10 hover:text-destructive" type="button" @mousedown.stop.prevent="deleteWhereHistorySuggestion(sug.value)">
-                            <X class="h-3 w-3" />
-                          </button>
-                        </div>
-                        <div v-if="whereSuggestions.length === 0" class="px-3 py-2 text-xs text-muted-foreground">
-                          {{ whereHistoryEmptyText }}
-                        </div>
-                      </div>
-                    </Teleport>
-                  </div>
-                  <button
-                    type="button"
-                    class="group relative flex w-2 shrink-0 cursor-col-resize items-center justify-center border-l border-r border-border/80 bg-muted/15 hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
-                    aria-label="Resize WHERE and ORDER BY"
-                    @mousedown="onSearchSplitResizeStart"
-                    @dblclick.stop="resetSearchSplitWidth"
-                  >
-                    <span class="h-5 w-px bg-border group-hover:bg-primary/60" />
-                  </button>
-                  <div ref="orderByConditionPaneRef" class="flex flex-1 items-center gap-1 px-2 py-0.5 border-r min-w-0 relative">
-                    <div ref="orderByConditionControlRef" class="flex min-w-0 flex-1 items-center gap-1">
-                      <span class="data-grid-topbar-condition-label data-grid-topbar-condition-label--order" :class="{ 'data-grid-topbar-condition-label--compact': compactDataGridToolbar }">ORDER BY</span>
-                      <div class="relative h-6 min-w-0 flex-1 overflow-hidden">
-                        <textarea
-                          ref="orderByInputRef"
-                          v-model="orderByInput"
-                          wrap="off"
-                          rows="1"
-                          autocapitalize="off"
-                          autocorrect="off"
-                          spellcheck="false"
-                          class="data-grid-topbar-condition-input data-grid-topbar-condition-input--order absolute inset-x-0 top-0 h-6 min-w-0 resize-none bg-transparent outline-none"
-                          :class="{ 'data-grid-topbar-condition-input--compact': compactDataGridToolbar }"
-                          style="height: 24px"
-                          placeholder="ORDER BY"
-                          @input="onOrderByInput"
-                          @keydown="onOrderByKeydown"
-                          @focus="resizeConditionInput('orderBy')"
-                          @click="onConditionInputClick('orderBy')"
-                          @wheel="onConditionInputWheel"
-                          @blur="
-                            dismissOrderBySuggestions();
-                            collapseConditionInputAfterBlur('orderBy');
-                          "
-                        />
-                      </div>
-                      <button class="text-muted-foreground hover:text-foreground shrink-0" type="button" @mousedown.prevent="openOrderByHistoryMenu">
-                        <ChevronDown class="w-3 h-3" />
-                      </button>
-                      <button v-if="hasOrderByInput" class="text-muted-foreground hover:text-foreground shrink-0" @click="clearOrderByInput">
-                        <X class="w-3 h-3" />
-                      </button>
-                    </div>
-                    <Teleport to="body">
-                      <div v-if="orderByConditionRendered" class="data-grid-topbar-condition-pane--expanded flex min-w-0 items-start gap-1 border-r" :style="conditionPaneStyle('orderBy')">
-                        <textarea
-                          ref="orderByOverlayRef"
-                          v-model="orderByInput"
-                          wrap="soft"
-                          rows="1"
-                          autocapitalize="off"
-                          autocorrect="off"
-                          spellcheck="false"
-                          class="data-grid-topbar-condition-input data-grid-topbar-condition-input--order data-grid-topbar-condition-input--expanded absolute resize-none outline-none"
-                          :class="{ 'data-grid-topbar-condition-input--compact': compactDataGridToolbar }"
-                          placeholder="ORDER BY"
-                          @input="onOrderByInput"
-                          @keydown="onOrderByKeydown"
-                          @focus="resizeConditionInput('orderBy')"
-                          @click="onConditionOverlayClick('orderBy')"
-                          @scroll="onConditionOverlayScroll('orderBy', $event)"
-                          @blur="
-                            dismissOrderBySuggestions();
-                            collapseConditionInputAfterBlur('orderBy');
-                          "
-                        />
-                        <div class="data-grid-topbar-condition-floating-controls pointer-events-none absolute inset-x-2 z-[1] flex h-6 min-w-0 items-center gap-1" :style="conditionTopbarOverlayStyle('orderBy')">
-                          <span class="data-grid-topbar-condition-label data-grid-topbar-condition-label--order" :class="{ 'data-grid-topbar-condition-label--compact': compactDataGridToolbar }">ORDER BY</span>
-                          <div class="min-w-0 flex-1" />
-                          <button class="data-grid-topbar-condition-icon-control pointer-events-auto text-muted-foreground hover:text-foreground shrink-0" type="button" @mousedown.prevent="openOrderByHistoryMenu">
-                            <ChevronDown class="w-3 h-3" />
-                          </button>
-                          <button v-if="hasOrderByInput" class="data-grid-topbar-condition-icon-control pointer-events-auto text-muted-foreground hover:text-foreground shrink-0" @click="clearOrderByInput">
-                            <X class="w-3 h-3" />
-                          </button>
-                        </div>
-                      </div>
-                    </Teleport>
-                    <!-- ORDER BY suggestion dropdown -->
-                    <Teleport to="body">
-                      <div v-if="showOrderBySuggestionDropdown" ref="orderBySuggestionDropdownRef" class="fixed z-[90] min-w-[180px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md" :style="orderBySuggestionStyle">
-                        <div
-                          v-for="(sug, idx) in orderBySuggestions"
-                          :key="`${sug.kind}:${sug.value}`"
-                          class="flex min-w-0 items-center gap-2 px-3 py-1.5 text-xs cursor-pointer"
-                          :class="idx === orderBySuggestionIndex ? 'bg-accent text-accent-foreground' : 'hover:bg-gray-200 dark:hover:bg-gray-800'"
-                          @mousedown.prevent="
-                            orderBySuggestionIndex = idx;
-                            acceptOrderBySuggestion();
-                          "
-                          @mouseenter="
-                            orderBySuggestionIndex = idx;
-                            sug.kind === 'history' ? showConditionHistoryPreview(sug.value, $event) : hideConditionHistoryPreview();
-                          "
-                          @mouseleave="hideConditionHistoryPreview"
-                        >
-                          <Search class="w-3 h-3 mr-2 text-muted-foreground shrink-0" />
-                          <span data-condition-history-text class="min-w-0 flex-1 truncate font-mono">{{ sug.value }}</span>
-                          <button v-if="sug.kind === 'history'" class="shrink-0 rounded p-0.5 text-muted-foreground hover:bg-destructive/10 hover:text-destructive" type="button" @mousedown.stop.prevent="deleteOrderByHistorySuggestion(sug.value)">
-                            <X class="h-3 w-3" />
-                          </button>
-                        </div>
-                        <div v-if="orderBySuggestions.length === 0" class="px-3 py-2 text-xs text-muted-foreground">
-                          {{ orderByHistoryEmptyText }}
-                        </div>
-                      </div>
-                    </Teleport>
-                    <Teleport to="body">
-                      <div v-if="conditionHistoryPreview" class="pointer-events-none fixed z-[140] rounded-md bg-foreground shadow-xl" :style="conditionHistoryPreviewStyle">
-                        <span class="absolute h-3 w-3 rotate-45 bg-foreground" :class="conditionHistoryPreview.side === 'left' ? '-left-1.5' : '-right-1.5'" :style="conditionHistoryPreviewArrowStyle" />
-                        <div class="max-h-[min(320px,calc(100vh-16px))] overflow-auto rounded-md px-3 py-2 font-mono text-xs leading-relaxed whitespace-pre-wrap break-words text-background">
-                          {{ conditionHistoryPreview.value }}
-                        </div>
-                      </div>
-                    </Teleport>
-                  </div>
-                </div>
+                <DataGridQueryControls
+                  v-model:where-input="whereFilterInput"
+                  v-model:order-by-input="orderByInput"
+                  v-model:filter-builder-open="filterBuilderOpen"
+                  :columns="props.tableMeta?.columns.map((column) => column.name) ?? props.result.columns"
+                  :history-scope="conditionHistoryScope"
+                  :can-use-where-search="canUseWhereSearch"
+                  :compact="compactDataGridToolbar"
+                  :leading-border="!!(useTransaction && editable && hasDataGridSaveTarget)"
+                  :filter-button-active="filterButtonActive"
+                  :filter-button-count="filterButtonCount"
+                  :has-local-column-filters="hasLocalColumnFilters"
+                  :local-filter-count="localFilterCount"
+                  :local-filter-summaries="localFilterSummaries"
+                  :rules="structuredFilterRules"
+                  :filtered-columns="filteredFilterBuilderColumnOptions"
+                  :mode-options="filterModeOptions"
+                  :column-search="filterBuilderColumnSearch"
+                  :apply-where="applyWhereFilter"
+                  :clear-where="clearWhereFilterInput"
+                  :apply-order-by="applyOrderBySearch"
+                  :clear-order-by="clearOrderByInput"
+                  @update:column-search="filterBuilderColumnSearch = $event"
+                  @ensure-rule="ensureStructuredFilterRule"
+                  @add-rule="addStructuredFilterRule"
+                  @apply-filters="applyStructuredFilters"
+                  @reset-filters="resetStructuredFilters"
+                  @clear-filters="clearAllFilters"
+                  @remove-rule="removeStructuredFilterRule"
+                  @update-rule="updateStructuredFilterRule"
+                  @clear-local-filter="clearLocalFilter"
+                />
               </template>
 
               <slot name="search-bar" :local-filter-count="localFilterCount + serverColumnFilterCount" :has-local-column-filters="hasLocalColumnFilters || hasServerColumnFilters" :local-filter-summaries="localFilterSummaries" :clear-local-filter="clearLocalFilter" />
             </div>
           </div>
 
-          <div class="flex shrink-0 items-center gap-1 px-1 ml-auto" @wheel="onDataGridTopbarFixedActionWheel">
-            <slot v-if="hasResultToolbarActionsSlot" name="result-toolbar-actions" :compact="compactDataGridToolbar" />
-            <Tooltip v-if="showQueryEditReadOnlyBadge">
-              <TooltipTrigger as-child>
-                <div class="flex h-5 items-center gap-1 rounded border border-muted-foreground/30 bg-muted/60 px-1.5 text-xs font-medium text-muted-foreground">
-                  {{ t("grid.queryEditReadOnly") }}
-                </div>
-              </TooltipTrigger>
-              <TooltipContent side="bottom" class="max-w-sm">
-                {{ queryEditReadOnlyReason }}
-              </TooltipContent>
-            </Tooltip>
-            <Tooltip v-if="showKeylessEditWarning">
-              <TooltipTrigger as-child>
-                <div class="flex h-5 items-center gap-1 rounded border border-amber-500/30 bg-amber-500/10 px-1.5 text-xs font-medium text-amber-700 dark:text-amber-300">
-                  <KeyRound class="h-3 w-3" />
-                  {{ t("grid.keylessEditWarning") }}
-                </div>
-              </TooltipTrigger>
-              <TooltipContent side="bottom" class="max-w-sm">
-                {{ t("grid.keylessEditWarningHint") }}
-              </TooltipContent>
-            </Tooltip>
-            <Tooltip v-if="canShowMongoJsonPreview">
-              <TooltipTrigger as-child>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  :class="['data-grid-topbar-action-button h-5 shrink-0 text-xs px-1.5', compactDataGridToolbar ? 'data-grid-topbar-action-button--compact' : '', mongoJsonPreviewOpen ? 'text-primary bg-primary/10 hover:bg-primary/15' : '']"
-                  :aria-pressed="mongoJsonPreviewOpen"
-                  @click="toggleMongoJsonPreview"
-                >
-                  <Code2 class="data-grid-topbar-action-icon w-3 h-3" />
-                  <span class="data-grid-topbar-action-label" :class="{ 'data-grid-topbar-action-label--compact': compactDataGridToolbar }">{{ t("grid.mongoJsonPreview") }}</span>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">{{ t("grid.mongoJsonPreview") }}</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger as-child>
-                <Button variant="ghost" size="sm" :class="['data-grid-topbar-action-button h-5 shrink-0 text-xs px-1.5', compactDataGridToolbar ? 'data-grid-topbar-action-button--compact' : '', isSaving ? '' : '']" :disabled="isSaving" @click="onToolbarRefresh">
-                  <Loader2 v-if="loading" class="data-grid-topbar-action-icon w-3 h-3 animate-spin" />
-                  <RefreshCcw v-else class="data-grid-topbar-action-icon w-3 h-3" />
-                  <span class="data-grid-topbar-action-label" :class="{ 'data-grid-topbar-action-label--compact': compactDataGridToolbar }">{{ t("grid.refresh") }}</span>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">{{ t("grid.refresh") }} ({{ shortcutMod }}+R)</TooltipContent>
-            </Tooltip>
-            <DropdownMenu>
-              <DropdownMenuTrigger as-child>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  :class="['data-grid-topbar-action-button h-5 shrink-0 text-xs px-1.5', compactDataGridToolbar ? 'data-grid-topbar-action-button--compact' : '', autoRefreshEnabled ? 'text-primary bg-primary/10 hover:bg-primary/15' : 'text-muted-foreground hover:text-foreground']"
-                  :title="autoRefreshLabel"
-                  :aria-label="autoRefreshLabel"
-                  :aria-pressed="autoRefreshEnabled"
-                >
-                  <Timer class="data-grid-topbar-action-icon w-3 h-3" />
-                  <span class="data-grid-topbar-action-label" :class="{ 'data-grid-topbar-action-label--compact': compactDataGridToolbar }">{{ autoRefreshEnabled ? `${autoRefreshIntervalSeconds}s` : t("tabs.autoRefreshShort") }}</span>
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" class="w-40">
-                <DropdownMenuItem class="gap-2" @select="toggleAutoRefresh">
-                  <Check v-if="autoRefreshEnabled" class="h-3.5 w-3.5" />
-                  <span v-else class="h-3.5 w-3.5" />
-                  {{ autoRefreshEnabled ? t("tabs.stopAutoRefresh") : t("tabs.startAutoRefresh") }}
-                </DropdownMenuItem>
-                <DropdownMenuItem v-for="seconds in AUTO_REFRESH_INTERVAL_OPTIONS" :key="seconds" class="gap-2" @select="setAutoRefreshInterval(seconds)">
-                  <Check v-if="autoRefreshIntervalSeconds === seconds" class="h-3.5 w-3.5" />
-                  <span v-else class="h-3.5 w-3.5" />
-                  {{ t("tabs.autoRefreshEvery", { seconds }) }}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <Tooltip v-if="props.result.columns.length">
-              <TooltipTrigger as-child>
-                <Popover v-model:open="goToColumnOpen">
-                  <PopoverTrigger as-child>
-                    <Button variant="ghost" size="sm" :class="['data-grid-topbar-action-button h-5 shrink-0 text-xs px-1.5', compactDataGridToolbar ? 'data-grid-topbar-action-button--compact' : '', goToColumnOpen ? 'text-primary bg-primary/10' : '']">
-                      <Columns3 class="data-grid-topbar-action-icon w-3 h-3" />
-                      <span class="data-grid-topbar-action-label" :class="{ 'data-grid-topbar-action-label--compact': compactDataGridToolbar }">{{ t("grid.goToColumn") }}</span>
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent align="end" class="w-56 p-2" @keydown="onGoToColumnKeydown">
-                    <div class="relative mb-1">
-                      <Search class="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-                      <input v-model="goToColumnSearch" :placeholder="t('grid.searchColumn')" class="h-8 w-full rounded-md border bg-transparent pl-7 pr-6 text-xs outline-none focus-visible:border-ring/50 focus-visible:ring-1 focus-visible:ring-ring/25" />
-                      <button v-if="goToColumnSearch" type="button" class="absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground" @click="goToColumnSearch = ''">
-                        <X class="h-3.5 w-3.5" />
-                      </button>
-                    </div>
-                    <div class="max-h-56 overflow-auto rounded border">
-                      <button v-for="column in filteredGoToColumns" :key="column.index" type="button" class="grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-x-2 gap-y-0.5 px-2 py-1.5 text-left text-xs hover:bg-accent hover:text-accent-foreground" @click="scrollToColumn(column.index)">
-                        <span class="min-w-0 truncate">{{ column.name }}</span>
-                        <span class="shrink-0 font-mono text-[10px] text-muted-foreground">#{{ column.index + 1 }}</span>
-                        <span v-if="column.comment" class="col-span-2 min-w-0 truncate text-[11px] leading-4 text-muted-foreground" :title="column.comment">{{ column.comment }}</span>
-                      </button>
-                      <div v-if="!filteredGoToColumns.length" class="px-2 py-3 text-center text-xs text-muted-foreground">{{ t("grid.noColumnsFound") }}</div>
-                    </div>
-                  </PopoverContent>
-                </Popover>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">{{ t("grid.goToColumn") }}</TooltipContent>
-            </Tooltip>
-            <Tooltip v-if="editable && hasDataGridInsertTarget && canInsertRows">
-              <TooltipTrigger as-child>
-                <Button variant="ghost" size="sm" :class="['data-grid-topbar-action-button h-5 shrink-0 text-xs px-1.5', compactDataGridToolbar ? 'data-grid-topbar-action-button--compact' : '']" @click="addRow">
-                  <Plus class="data-grid-topbar-action-icon w-3 h-3" />
-                  <span class="data-grid-topbar-action-label" :class="{ 'data-grid-topbar-action-label--compact': compactDataGridToolbar }">{{ t("grid.addRow") }}</span>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">{{ t("grid.addRow") }} ({{ shortcutMod }}+N)</TooltipContent>
-            </Tooltip>
-            <template v-if="saveToolbarState.showActions">
-              <Tooltip v-if="pendingChangeCount > 0">
+          <DataGridToolbar
+            class="ml-auto"
+            :compact="compactDataGridToolbar"
+            :refresh="refreshToolbarCapability"
+            :auto-refresh="autoRefreshToolbarCapability"
+            :add-row="addRowToolbarCapability"
+            :preview="previewToolbarCapability"
+            :save="saveToolbarCapability"
+            :rollback="rollbackToolbarCapability"
+            @wheel="onDataGridTopbarFixedActionWheel"
+          >
+            <template #leading>
+              <slot v-if="hasResultToolbarActionsSlot" name="result-toolbar-actions" :compact="compactDataGridToolbar" />
+              <Tooltip v-if="showQueryEditReadOnlyBadge">
+                <TooltipTrigger as-child>
+                  <div class="flex h-5 items-center gap-1 rounded border border-muted-foreground/30 bg-muted/60 px-1.5 text-xs font-medium text-muted-foreground">
+                    {{ t("grid.queryEditReadOnly") }}
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" class="max-w-sm">
+                  {{ queryEditReadOnlyReason }}
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip v-if="showKeylessEditWarning">
+                <TooltipTrigger as-child>
+                  <div class="flex h-5 items-center gap-1 rounded border border-amber-500/30 bg-amber-500/10 px-1.5 text-xs font-medium text-amber-700 dark:text-amber-300">
+                    <KeyRound class="h-3 w-3" />
+                    {{ t("grid.keylessEditWarning") }}
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" class="max-w-sm">
+                  {{ t("grid.keylessEditWarningHint") }}
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip v-if="canShowMongoJsonPreview">
                 <TooltipTrigger as-child>
                   <Button
                     variant="ghost"
                     size="sm"
-                    :class="['data-grid-topbar-action-button h-5 shrink-0 text-xs px-1.5 text-sky-600 hover:bg-sky-500/10 hover:text-sky-700', compactDataGridToolbar ? 'data-grid-topbar-action-button--compact' : '']"
-                    :disabled="isPreviewLoading"
-                    @click="openSqlPreview"
+                    :class="['data-grid-topbar-action-button h-5 shrink-0 text-xs px-1.5', compactDataGridToolbar ? 'data-grid-topbar-action-button--compact' : '', mongoJsonPreviewOpen ? 'text-primary bg-primary/10 hover:bg-primary/15' : '']"
+                    :aria-pressed="mongoJsonPreviewOpen"
+                    @click="toggleMongoJsonPreview"
                   >
-                    <Loader2 v-if="isPreviewLoading" class="data-grid-topbar-action-icon w-3 h-3 animate-spin" />
-                    <Eye v-else class="data-grid-topbar-action-icon w-3 h-3" />
-                    <span class="data-grid-topbar-action-label" :class="{ 'data-grid-topbar-action-label--compact': compactDataGridToolbar }">{{ t(previewLabelKey) }}</span>
+                    <Code2 class="data-grid-topbar-action-icon w-3 h-3" />
+                    <span class="data-grid-topbar-action-label" :class="{ 'data-grid-topbar-action-label--compact': compactDataGridToolbar }">{{ t("grid.mongoJsonPreview") }}</span>
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent side="bottom" class="max-w-sm">
-                  {{ t(previewLabelKey) }}
-                </TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger as-child>
-                  <Button
-                    variant="default"
-                    size="sm"
-                    :class="['data-grid-topbar-action-button data-grid-topbar-action-button--commit relative h-5 shrink-0 text-xs px-1.5', compactDataGridToolbar ? 'data-grid-topbar-action-button--compact' : '']"
-                    :disabled="saveToolbarState.actionsDisabled"
-                    @click="onToolbarCommit"
-                  >
-                    <Loader2 v-if="isSaving" class="data-grid-topbar-action-icon w-3 h-3 animate-spin" />
-                    <Save v-else-if="compactDataGridToolbar || pendingChangeCount === 0" class="data-grid-topbar-action-icon w-3 h-3" />
-                    <span
-                      v-if="pendingChangeCount > 0"
-                      :class="
-                        compactDataGridToolbar
-                          ? 'absolute -right-1 -top-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-300 px-1 text-[9px] font-semibold leading-none text-amber-950 shadow-[0_0_0_1px_rgba(120,53,15,0.16)] dark:bg-amber-400 dark:text-amber-950'
-                          : 'mr-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-300 px-1 text-[9px] font-semibold leading-none text-amber-950 shadow-[0_0_0_1px_rgba(120,53,15,0.16)] dark:bg-amber-400 dark:text-amber-950'
-                      "
-                    >
-                      {{ pendingChangeCount }}
-                    </span>
-                    <span class="data-grid-topbar-action-label" :class="{ 'data-grid-topbar-action-label--compact': compactDataGridToolbar }">{{ t(saveActionMode.labelKey, { count: pendingChangeCount }) }}</span>
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent side="bottom" class="max-w-sm"> {{ t(saveActionMode.tooltipKey, { count: pendingChangeCount }) }} ({{ saveShortcutLabel }}) </TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger as-child>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    :class="['data-grid-topbar-action-button h-5 shrink-0 text-xs px-1.5', compactDataGridToolbar ? 'data-grid-topbar-action-button--compact' : '']"
-                    :disabled="saveToolbarState.actionsDisabled"
-                    @click="useTransaction ? onToolbarRollback() : discardChanges()"
-                  >
-                    <RotateCcw class="data-grid-topbar-action-icon w-3 h-3" />
-                    <span class="data-grid-topbar-action-label" :class="{ 'data-grid-topbar-action-label--compact': compactDataGridToolbar }">{{ t(saveActionMode.secondaryActionKey) }}</span>
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent side="bottom">{{ t(saveActionMode.secondaryActionKey) }}</TooltipContent>
+                <TooltipContent side="bottom">{{ t("grid.mongoJsonPreview") }}</TooltipContent>
               </Tooltip>
             </template>
-          </div>
+
+            <template #navigation>
+              <Tooltip v-if="props.result.columns.length">
+                <TooltipTrigger as-child>
+                  <Popover v-model:open="goToColumnOpen">
+                    <PopoverTrigger as-child>
+                      <Button variant="ghost" size="sm" :class="['data-grid-topbar-action-button h-5 shrink-0 text-xs px-1.5', compactDataGridToolbar ? 'data-grid-topbar-action-button--compact' : '', goToColumnOpen ? 'text-primary bg-primary/10' : '']">
+                        <Columns3 class="data-grid-topbar-action-icon w-3 h-3" />
+                        <span class="data-grid-topbar-action-label" :class="{ 'data-grid-topbar-action-label--compact': compactDataGridToolbar }">{{ t("grid.goToColumn") }}</span>
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent align="end" class="w-56 p-2" @keydown="onGoToColumnKeydown">
+                      <div class="relative mb-1">
+                        <Search class="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                        <input v-model="goToColumnSearch" :placeholder="t('grid.searchColumn')" class="h-8 w-full rounded-md border bg-transparent pl-7 pr-6 text-xs outline-none focus-visible:border-ring/50 focus-visible:ring-1 focus-visible:ring-ring/25" />
+                        <button v-if="goToColumnSearch" type="button" class="absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground" @click="goToColumnSearch = ''">
+                          <X class="h-3.5 w-3.5" />
+                        </button>
+                      </div>
+                      <div class="max-h-56 overflow-auto rounded border">
+                        <button v-for="column in filteredGoToColumns" :key="column.index" type="button" class="grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-x-2 gap-y-0.5 px-2 py-1.5 text-left text-xs hover:bg-accent hover:text-accent-foreground" @click="scrollToColumn(column.index)">
+                          <span class="min-w-0 truncate">{{ column.name }}</span>
+                          <span class="shrink-0 font-mono text-[10px] text-muted-foreground">#{{ column.index + 1 }}</span>
+                          <span v-if="column.comment" class="col-span-2 min-w-0 truncate text-[11px] leading-4 text-muted-foreground" :title="column.comment">{{ column.comment }}</span>
+                        </button>
+                        <div v-if="!filteredGoToColumns.length" class="px-2 py-3 text-center text-xs text-muted-foreground">{{ t("grid.noColumnsFound") }}</div>
+                      </div>
+                    </PopoverContent>
+                  </Popover>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">{{ t("grid.goToColumn") }}</TooltipContent>
+              </Tooltip>
+            </template>
+          </DataGridToolbar>
         </div>
         <!-- Truncation warning banner -->
         <div v-if="showTruncationWarning" class="shrink-0 px-3 py-1 bg-amber-500/10 border-b border-amber-500/20 text-xs text-amber-600 dark:text-amber-400 flex items-center gap-1.5">
@@ -9737,44 +7409,23 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
         <div class="flex-1 grid min-h-0 overflow-hidden" :style="contentGridStyle">
           <div class="col-start-1 row-start-1 flex flex-col min-w-0 overflow-hidden relative">
             <!-- Search overlay (Ctrl+F) -->
-            <Transition enter-active-class="transition-opacity duration-150" leave-active-class="transition-opacity duration-100" enter-from-class="opacity-0" leave-to-class="opacity-0">
-              <div v-if="searchOverlayVisible" class="absolute top-1 right-2 z-20 flex items-center gap-1 px-2 py-1 bg-background border rounded-md shadow-md">
-                <Search class="w-3.5 h-3.5 text-muted-foreground shrink-0" />
-                <input
-                  ref="searchInputRef"
-                  v-model="searchText"
-                  autocapitalize="off"
-                  autocorrect="off"
-                  spellcheck="false"
-                  class="w-48 h-5 min-w-0 text-xs bg-transparent outline-none placeholder:text-muted-foreground"
-                  :placeholder="t('grid.search')"
-                  @keydown="onSearchKeydown"
-                  @click="updateSuggestionPosition"
-                />
-                <span ref="measureRef" class="invisible absolute left-0 top-0 text-xs whitespace-pre pointer-events-none" aria-hidden="true" />
-                <div v-if="searchSuggestions.length > 0" class="absolute top-full right-0 mt-0.5 z-50 min-w-[180px] rounded-md border bg-popover text-popover-foreground shadow-md">
-                  <div
-                    v-for="(sug, idx) in searchSuggestions"
-                    :key="sug"
-                    class="flex items-center px-3 py-1.5 text-xs cursor-pointer"
-                    :class="idx === suggestionIndex ? 'bg-accent text-accent-foreground' : 'hover:bg-gray-200 dark:hover:bg-gray-800'"
-                    @mousedown.prevent="
-                      suggestionIndex = idx;
-                      acceptSuggestion();
-                    "
-                    @mouseenter="suggestionIndex = idx"
-                  >
-                    <Search class="w-3 h-3 mr-2 text-muted-foreground shrink-0" />
-                    <span>{{ sug }}</span>
-                  </div>
-                </div>
-                <span v-if="searchMatches.length > 0" class="text-xs text-muted-foreground shrink-0"> {{ currentMatchIndex + 1 }}/{{ searchMatches.length }} </span>
-                <span v-else-if="deferredClientSearchText" class="text-xs text-muted-foreground shrink-0"> 0 </span>
-                <button class="text-muted-foreground hover:text-foreground shrink-0" @click="closeSearch">
-                  <X class="w-3.5 h-3.5" />
-                </button>
-              </div>
-            </Transition>
+            <DataGridSearchBar
+              ref="searchBarRef"
+              v-model:text="searchText"
+              :open="searchOverlayVisible"
+              :suggestions="searchSuggestions"
+              :suggestion-index="suggestionIndex"
+              :match-count="searchMatches.length"
+              :current-match-index="currentMatchIndex"
+              :has-deferred-search-text="!!deferredClientSearchText"
+              @keydown="onSearchKeydown"
+              @close="closeSearch"
+              @accept-suggestion="
+                suggestionIndex = $event;
+                acceptSuggestion();
+              "
+              @hover-suggestion="suggestionIndex = $event"
+            />
             <ErrorBanner v-if="isErrorResult" variant="centered" :message="errorMessage">
               <template #actions>
                 <slot name="error-actions" :error-message="errorMessage" />
@@ -9982,367 +7633,348 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
                     #
                   </div>
                   <div class="shrink-0" :style="{ width: `${horizontalColumnWindow.beforeWidth}px` }" />
-                  <LightTooltip v-for="col in renderedGridColumns" :key="`${col.name}-${col.actualColIdx}`" :text="col.name" side="bottom" :side-offset="4" :disabled="columnHeaderTooltipsDisabled">
-                    <div
-                      class="data-grid-header-cell shrink-0 px-2 py-1.5 border-r border-border whitespace-nowrap hover:bg-gray-200 dark:hover:bg-gray-800 select-none relative overflow-hidden"
-                      :class="{
-                        'data-grid-header-cell--selected outline outline-primary -outline-offset-1': highlightedColumnIndex === col.actualColIdx || columnIsSelected(col.visibleColIdx),
-                        'bg-amber-500/20 ring-1 ring-inset ring-amber-500/40': currentSearchMatch?.kind === 'column' && currentSearchMatch.col === col.actualColIdx,
-                        ...columnHeaderDragClass(col.visibleColIdx),
-                      }"
-                      :style="columnHeaderStyle(col.visibleColIdx)"
-                      :data-grid-column-index="col.actualColIdx"
-                      :data-visible-col-index="col.visibleColIdx"
-                      @pointerdown="startColumnHeaderDrag(col.visibleColIdx, $event)"
-                      @click.capture="onHeaderClickCapture"
-                      @click="onHeaderClick(col.visibleColIdx, $event)"
-                      @contextmenu="onHeaderContext(col.name, col.actualColIdx)"
-                    >
-                      <span class="flex min-w-0 items-center gap-1 overflow-hidden">
-                        <span class="flex min-w-0 flex-1 flex-col overflow-hidden">
-                          <span class="min-w-0 truncate leading-4">
-                            {{ col.name }}
-                          </span>
-                          <span v-if="headerColumnType(col.name, col.actualColIdx)" class="min-w-0 truncate text-[10px] font-normal leading-3" :class="typeColorClass(headerColumnType(col.name, col.actualColIdx))" :title="headerColumnType(col.name, col.actualColIdx)">
-                            {{ headerColumnType(col.name, col.actualColIdx) }}
-                          </span>
-                          <span v-if="headerColumnComment(col.name)" class="min-w-0 truncate text-[10px] font-normal leading-3 text-muted-foreground" :title="headerColumnComment(col.name)">
-                            {{ headerColumnComment(col.name) }}
-                          </span>
-                        </span>
-                        <span class="flex shrink-0 items-center gap-1" :class="{ 'flex-col !gap-0': columnWidthDensity === 'compact' }">
-                          <LightDropdownMenu
-                            v-if="headerColumnSortable(col.actualColIdx)"
-                            :items="sortMenuItems(col.name, col.actualColIdx)"
-                            :open="headerSortMenuOpenColumn === col.actualColIdx"
-                            :selected-value="selectedSortMenuValue(col.name, col.actualColIdx)"
-                            align="end"
-                            content-class="w-max min-w-28 p-0.5"
-                            item-class="gap-1 px-1.5 py-0.5 text-xs"
-                            item-icon-class="h-3 w-3"
-                            :match-trigger-width="false"
-                            @update:open="(value: boolean) => (headerSortMenuOpenColumn = value ? col.actualColIdx : null)"
-                            @select="(value: string) => selectHeaderSort(value, col.name, col.actualColIdx)"
-                          >
-                            <template #trigger="{ open, toggle }">
-                              <button
-                                type="button"
-                                class="flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-foreground"
-                                :class="columnIsSorted(col.name, col.actualColIdx) ? 'text-primary opacity-100' : 'opacity-80'"
-                                :title="t('grid.sort')"
-                                :aria-expanded="open"
-                                @mousedown.stop
-                                @click.stop="toggle"
-                              >
-                                <ArrowUp v-if="columnIsSorted(col.name, col.actualColIdx) && sortDir === 'asc'" class="h-3 w-3 shrink-0" />
-                                <ArrowDown v-else-if="columnIsSorted(col.name, col.actualColIdx) && sortDir === 'desc'" class="h-3 w-3 shrink-0" />
-                                <ArrowUpDown v-else class="h-3 w-3 shrink-0" />
-                              </button>
-                            </template>
-                          </LightDropdownMenu>
-                          <LightDropdownMenu
-                            v-if="compactColumnHeaderActions"
-                            :items="compactColumnActionMenuItems(col.name)"
-                            :open="headerActionMenuOpenColumn === col.actualColIdx"
-                            align="end"
-                            content-class="w-max min-w-28 max-w-48 p-0.5"
-                            item-class="gap-1 px-1.5 py-0.5 text-xs"
-                            item-icon-class="h-3 w-3"
-                            :match-trigger-width="false"
-                            @update:open="(value: boolean) => (headerActionMenuOpenColumn = value ? col.actualColIdx : null)"
-                            @select="(value: string) => selectCompactColumnAction(value, col.actualColIdx)"
-                          >
-                            <template #trigger="{ open, toggle }">
-                              <button
-                                type="button"
-                                class="flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-foreground"
-                                :class="columnHasFormatter(col.actualColIdx) || localFilterActive(col.actualColIdx) ? 'text-primary opacity-90' : 'opacity-80'"
-                                :title="t('grid.columnActions')"
-                                :aria-expanded="open"
-                                @click.stop="toggle"
-                              >
-                                <ChevronDown class="h-3 w-3" />
-                              </button>
-                            </template>
-                          </LightDropdownMenu>
-                          <Popover :open="formatterOpenColumn === col.actualColIdx" @update:open="(value: boolean) => handleColumnFormatterOpenChange(value, col.actualColIdx)">
-                            <PopoverAnchor v-if="compactColumnHeaderActions" as-child>
-                              <span class="pointer-events-none absolute right-3 top-1/2 h-px w-px -translate-y-1/2" />
-                            </PopoverAnchor>
-                            <PopoverTrigger v-else as-child>
-                              <button
-                                type="button"
-                                class="flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-foreground"
-                                :class="columnHasFormatter(col.actualColIdx) ? 'text-primary opacity-100' : 'opacity-80'"
-                                :disabled="!formatterKeyForColumn(col.name)"
-                                :title="t('grid.columnFormatter')"
-                                @click.stop
-                              >
-                                <Code2 class="h-3.5 w-3.5" />
-                              </button>
-                            </PopoverTrigger>
-                            <PopoverContent align="start" side="bottom" class="w-[420px] max-w-[calc(100vw-2rem)] gap-0 overflow-hidden rounded-xl border bg-popover p-0 text-popover-foreground shadow-xl" @click.stop @keydown.stop>
-                              <div class="border-b bg-muted/40 px-3 py-2">
-                                <div class="text-sm font-semibold">
-                                  {{ t("grid.columnFormatterFor", { column: col.name }) }}
-                                </div>
-                                <div class="mt-0.5 text-[11px] text-muted-foreground">
-                                  {{ t("grid.columnFormatterHint") }}
-                                </div>
+                  <DataGridColumnHeader
+                    v-for="col in renderedGridColumns"
+                    :key="`${col.name}-${col.actualColIdx}`"
+                    :name="col.name"
+                    :actual-column-index="col.actualColIdx"
+                    :visible-column-index="col.visibleColIdx"
+                    :selected="highlightedColumnIndex === col.actualColIdx || columnIsSelected(col.visibleColIdx)"
+                    :search-match="currentSearchMatch?.kind === 'column' && currentSearchMatch.col === col.actualColIdx"
+                    :dark="isDark"
+                    :tooltip-disabled="columnHeaderTooltipsDisabled"
+                    :column-type="headerColumnType(col.name, col.actualColIdx)"
+                    :column-comment="headerColumnComment(col.name)"
+                    :tooltip-column-type="columnTypeMap.get(col.name)"
+                    :tooltip-column-comment="columnCommentMap.get(col.name)"
+                    :type-class="typeColorClass(headerColumnType(col.name, col.actualColIdx))"
+                    :drag-class="columnHeaderDragClass(col.visibleColIdx)"
+                    :column-style="columnHeaderStyle(col.visibleColIdx)"
+                    :copy-column-name-label="t('grid.copyColumnName')"
+                    :column-name-label="t('grid.columnName')"
+                    :column-type-label="t('grid.columnType')"
+                    :column-comment-label="t('grid.columnComment')"
+                    @pointerdown="startColumnHeaderDrag(col.visibleColIdx, $event)"
+                    @click-capture="onHeaderClickCapture"
+                    @click="onHeaderClick(col.visibleColIdx, $event)"
+                    @contextmenu="onHeaderContext(col.name, col.actualColIdx)"
+                    @resize-start="startColumnHeaderResize(col.visibleColIdx, $event)"
+                    @auto-fit="autoFitColumn(col.visibleColIdx)"
+                    @copy-name="copyText(col.name)"
+                  >
+                    <template #actions>
+                      <span class="flex shrink-0 items-center gap-1" :class="{ 'flex-col !gap-0': columnWidthDensity === 'compact' }">
+                        <LightDropdownMenu
+                          v-if="headerColumnSortable(col.actualColIdx)"
+                          :items="sortMenuItems(col.name, col.actualColIdx)"
+                          :open="headerSortMenuOpenColumn === col.actualColIdx"
+                          :selected-value="selectedSortMenuValue(col.name, col.actualColIdx)"
+                          align="end"
+                          content-class="w-max min-w-28 p-0.5"
+                          item-class="gap-1 px-1.5 py-0.5 text-xs"
+                          item-icon-class="h-3 w-3"
+                          :match-trigger-width="false"
+                          @update:open="(value: boolean) => (headerSortMenuOpenColumn = value ? col.actualColIdx : null)"
+                          @select="(value: string) => selectHeaderSort(value, col.name, col.actualColIdx)"
+                        >
+                          <template #trigger="{ open, toggle }">
+                            <button
+                              type="button"
+                              class="flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-foreground"
+                              :class="columnIsSorted(col.name, col.actualColIdx) ? 'text-primary opacity-100' : 'opacity-80'"
+                              :title="t('grid.sort')"
+                              :aria-expanded="open"
+                              @mousedown.stop
+                              @click.stop="toggle"
+                            >
+                              <ArrowUp v-if="columnIsSorted(col.name, col.actualColIdx) && sortDir === 'asc'" class="h-3 w-3 shrink-0" />
+                              <ArrowDown v-else-if="columnIsSorted(col.name, col.actualColIdx) && sortDir === 'desc'" class="h-3 w-3 shrink-0" />
+                              <ArrowUpDown v-else class="h-3 w-3 shrink-0" />
+                            </button>
+                          </template>
+                        </LightDropdownMenu>
+                        <LightDropdownMenu
+                          v-if="compactColumnHeaderActions"
+                          :items="compactColumnActionMenuItems(col.name)"
+                          :open="headerActionMenuOpenColumn === col.actualColIdx"
+                          align="end"
+                          content-class="w-max min-w-28 max-w-48 p-0.5"
+                          item-class="gap-1 px-1.5 py-0.5 text-xs"
+                          item-icon-class="h-3 w-3"
+                          :match-trigger-width="false"
+                          @update:open="(value: boolean) => (headerActionMenuOpenColumn = value ? col.actualColIdx : null)"
+                          @select="(value: string) => selectCompactColumnAction(value, col.actualColIdx)"
+                        >
+                          <template #trigger="{ open, toggle }">
+                            <button
+                              type="button"
+                              class="flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-foreground"
+                              :class="columnHasFormatter(col.actualColIdx) || localFilterActive(col.actualColIdx) ? 'text-primary opacity-90' : 'opacity-80'"
+                              :title="t('grid.columnActions')"
+                              :aria-expanded="open"
+                              @click.stop="toggle"
+                            >
+                              <ChevronDown class="h-3 w-3" />
+                            </button>
+                          </template>
+                        </LightDropdownMenu>
+                        <Popover :open="formatterOpenColumn === col.actualColIdx" @update:open="(value: boolean) => handleColumnFormatterOpenChange(value, col.actualColIdx)">
+                          <PopoverAnchor v-if="compactColumnHeaderActions" as-child>
+                            <span class="pointer-events-none absolute right-3 top-1/2 h-px w-px -translate-y-1/2" />
+                          </PopoverAnchor>
+                          <PopoverTrigger v-else as-child>
+                            <button
+                              type="button"
+                              class="flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-foreground"
+                              :class="columnHasFormatter(col.actualColIdx) ? 'text-primary opacity-100' : 'opacity-80'"
+                              :disabled="!formatterKeyForColumn(col.name)"
+                              :title="t('grid.columnFormatter')"
+                              @click.stop
+                            >
+                              <Code2 class="h-3.5 w-3.5" />
+                            </button>
+                          </PopoverTrigger>
+                          <PopoverContent align="start" side="bottom" class="w-[420px] max-w-[calc(100vw-2rem)] gap-0 overflow-hidden rounded-xl border bg-popover p-0 text-popover-foreground shadow-xl" @click.stop @keydown.stop>
+                            <div class="border-b bg-muted/40 px-3 py-2">
+                              <div class="text-sm font-semibold">
+                                {{ t("grid.columnFormatterFor", { column: col.name }) }}
                               </div>
-                              <div class="space-y-3 p-3">
+                              <div class="mt-0.5 text-[11px] text-muted-foreground">
+                                {{ t("grid.columnFormatterHint") }}
+                              </div>
+                            </div>
+                            <div class="space-y-3 p-3">
+                              <div class="space-y-1.5">
+                                <div class="text-xs font-medium text-muted-foreground">
+                                  {{ t("grid.formatterType") }}
+                                </div>
+                                <Select :model-value="formatterKind" @update:model-value="(value: any) => (formatterKind = value)">
+                                  <SelectTrigger class="h-8 text-xs">
+                                    <SelectValue />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    <SelectItem value="datetime">{{ t("grid.formatterDatetime") }}</SelectItem>
+                                    <SelectItem value="json-path">{{ t("grid.formatterJsonPath") }}</SelectItem>
+                                    <SelectItem value="mask">{{ t("grid.formatterMask") }}</SelectItem>
+                                    <SelectItem value="custom-template">{{ t("grid.formatterCustomTemplate") }}</SelectItem>
+                                  </SelectContent>
+                                </Select>
+                              </div>
+
+                              <div v-if="formatterKind === 'datetime'" class="flex gap-2">
                                 <div class="space-y-1.5">
                                   <div class="text-xs font-medium text-muted-foreground">
-                                    {{ t("grid.formatterType") }}
+                                    {{ t("grid.formatterTimestampUnit") }}
                                   </div>
-                                  <Select :model-value="formatterKind" @update:model-value="(value: any) => (formatterKind = value)">
+                                  <Select :model-value="formatterDateUnit" @update:model-value="(value: any) => (formatterDateUnit = value)">
                                     <SelectTrigger class="h-8 text-xs">
                                       <SelectValue />
                                     </SelectTrigger>
                                     <SelectContent>
-                                      <SelectItem value="datetime">{{ t("grid.formatterDatetime") }}</SelectItem>
-                                      <SelectItem value="json-path">{{ t("grid.formatterJsonPath") }}</SelectItem>
-                                      <SelectItem value="mask">{{ t("grid.formatterMask") }}</SelectItem>
-                                      <SelectItem value="custom-template">{{ t("grid.formatterCustomTemplate") }}</SelectItem>
+                                      <SelectItem value="auto">{{ t("grid.formatterUnitAuto") }}</SelectItem>
+                                      <SelectItem value="seconds">{{ t("grid.formatterUnitSeconds") }}</SelectItem>
+                                      <SelectItem value="milliseconds">{{ t("grid.formatterUnitMilliseconds") }}</SelectItem>
                                     </SelectContent>
                                   </Select>
                                 </div>
-
-                                <div v-if="formatterKind === 'datetime'" class="flex gap-2">
-                                  <div class="space-y-1.5">
-                                    <div class="text-xs font-medium text-muted-foreground">
-                                      {{ t("grid.formatterTimestampUnit") }}
-                                    </div>
-                                    <Select :model-value="formatterDateUnit" @update:model-value="(value: any) => (formatterDateUnit = value)">
-                                      <SelectTrigger class="h-8 text-xs">
-                                        <SelectValue />
-                                      </SelectTrigger>
-                                      <SelectContent>
-                                        <SelectItem value="auto">{{ t("grid.formatterUnitAuto") }}</SelectItem>
-                                        <SelectItem value="seconds">{{ t("grid.formatterUnitSeconds") }}</SelectItem>
-                                        <SelectItem value="milliseconds">{{ t("grid.formatterUnitMilliseconds") }}</SelectItem>
-                                      </SelectContent>
-                                    </Select>
-                                  </div>
-                                  <div class="space-y-1.5 flex-1">
-                                    <div class="text-xs font-medium text-muted-foreground">
-                                      {{ t("grid.formatterDatetimePattern") }}
-                                    </div>
-                                    <SearchableSelect
-                                      :model-value="formatterDatetimePattern"
-                                      :options="DateTimePatterns"
-                                      :placeholder="t('grid.formatterDatetimePatternPlaceholder')"
-                                      :search-placeholder="t('grid.formatterDatetimePatternPlaceholder')"
-                                      :empty-text="t('grid.formatterDatetimePatternEmpty')"
-                                      :loading-text="t('common.loading')"
-                                      :allow-custom="true"
-                                      :trigger-class="['border border-input h-8 w-72 pl-2.5 text-xs']"
-                                      content-class="w-72"
-                                      item-class="h-auto min-h-8 px-2 py-1.5 text-xs"
-                                      @update:model-value="(value: any) => (formatterDatetimePattern = value)"
-                                    />
-                                  </div>
-                                </div>
-
-                                <div v-else-if="formatterKind === 'json-path'" class="space-y-1.5">
+                                <div class="space-y-1.5 flex-1">
                                   <div class="text-xs font-medium text-muted-foreground">
-                                    {{ t("grid.formatterJsonPathInput") }}
-                                  </div>
-                                  <input v-model="formatterJsonPath" autocapitalize="off" autocorrect="off" spellcheck="false" class="h-8 w-full rounded border bg-background px-2 font-mono text-xs outline-none focus:border-primary" placeholder="$.user.name" />
-                                </div>
-
-                                <div v-else-if="formatterKind === 'mask'" class="grid grid-cols-2 gap-2">
-                                  <label class="space-y-1.5">
-                                    <span class="text-xs font-medium text-muted-foreground">
-                                      {{ t("grid.formatterMaskPrefix") }}
-                                    </span>
-                                    <input v-model.number="formatterMaskPrefix" type="number" min="0" class="h-8 w-full rounded border bg-background px-2 text-xs outline-none focus:border-primary" />
-                                  </label>
-                                  <label class="space-y-1.5">
-                                    <span class="text-xs font-medium text-muted-foreground">
-                                      {{ t("grid.formatterMaskSuffix") }}
-                                    </span>
-                                    <input v-model.number="formatterMaskSuffix" type="number" min="0" class="h-8 w-full rounded border bg-background px-2 text-xs outline-none focus:border-primary" />
-                                  </label>
-                                </div>
-
-                                <div v-else class="space-y-2">
-                                  <div v-if="savedCustomFormatters.length" class="space-y-1.5">
-                                    <div class="text-xs font-medium text-muted-foreground">
-                                      {{ t("grid.formatterSavedCustom") }}
-                                    </div>
-                                    <Select :model-value="formatterCustomId" @update:model-value="(value: any) => selectCustomFormatter(String(value))">
-                                      <SelectTrigger class="h-8 text-xs">
-                                        <SelectValue />
-                                      </SelectTrigger>
-                                      <SelectContent>
-                                        <SelectItem :value="CUSTOM_FORMATTER_NEW">{{ t("grid.formatterNewCustom") }}</SelectItem>
-                                        <SelectItem v-for="formatter in savedCustomFormatters" :key="formatter.id" :value="formatter.id">
-                                          {{ formatter.name }}
-                                        </SelectItem>
-                                      </SelectContent>
-                                    </Select>
-                                  </div>
-                                  <label class="block space-y-1.5">
-                                    <span class="text-xs font-medium text-muted-foreground">
-                                      {{ t("grid.formatterCustomName") }}
-                                    </span>
-                                    <input v-model="formatterCustomName" class="h-8 w-full rounded border bg-background px-2 text-xs outline-none focus:border-primary" :placeholder="t('grid.formatterCustomNamePlaceholder')" />
-                                  </label>
-                                  <label class="block space-y-1.5">
-                                    <span class="text-xs font-medium text-muted-foreground">
-                                      {{ t("grid.formatterCustomTemplateInput") }}
-                                    </span>
-                                    <input v-model="formatterCustomTemplate" autocapitalize="off" autocorrect="off" spellcheck="false" class="h-8 w-full rounded border bg-background px-2 font-mono text-xs outline-none focus:border-primary" placeholder="ID-${value}" />
-                                  </label>
-                                  <div class="text-[11px] leading-4 text-muted-foreground">
-                                    {{ t("grid.formatterCustomTemplateHint") }}
-                                  </div>
-                                </div>
-
-                                <div class="space-y-1.5">
-                                  <div class="text-xs font-medium text-muted-foreground">
-                                    {{ t("grid.formatterPreview") }}
-                                  </div>
-                                  <div class="max-h-40 overflow-auto rounded border bg-muted/20">
-                                    <div v-for="row in formatterPreviewRows(col.actualColIdx)" :key="row.index" class="grid grid-cols-[2rem_minmax(0,1fr)_minmax(0,1fr)] gap-2 border-b px-2 py-1.5 text-[11px] last:border-b-0">
-                                      <span class="text-muted-foreground">{{ row.index }}</span>
-                                      <span class="truncate font-mono text-muted-foreground">{{ row.raw }}</span>
-                                      <span class="truncate font-mono">{{ row.formatted }}</span>
-                                    </div>
+                                    {{ t("grid.formatterDatetimePattern") }}
                                   </div>
+                                  <SearchableSelect
+                                    :model-value="formatterDatetimePattern"
+                                    :options="DateTimePatterns"
+                                    :placeholder="t('grid.formatterDatetimePatternPlaceholder')"
+                                    :search-placeholder="t('grid.formatterDatetimePatternPlaceholder')"
+                                    :empty-text="t('grid.formatterDatetimePatternEmpty')"
+                                    :loading-text="t('common.loading')"
+                                    :allow-custom="true"
+                                    :trigger-class="['border border-input h-8 w-72 pl-2.5 text-xs']"
+                                    content-class="w-72"
+                                    item-class="h-auto min-h-8 px-2 py-1.5 text-xs"
+                                    @update:model-value="(value: any) => (formatterDatetimePattern = value)"
+                                  />
                                 </div>
                               </div>
 
-                              <div class="flex items-center justify-between gap-2 border-t bg-muted/30 px-3 py-2">
-                                <Button variant="ghost" size="sm" class="h-7 px-2 text-xs" :disabled="!columnHasFormatter(col.actualColIdx)" @click="clearColumnFormatter(col.actualColIdx)">
-                                  {{ t("grid.clearFormatter") }}
+                              <div v-else-if="formatterKind === 'json-path'" class="space-y-1.5">
+                                <div class="text-xs font-medium text-muted-foreground">
+                                  {{ t("grid.formatterJsonPathInput") }}
+                                </div>
+                                <input v-model="formatterJsonPath" autocapitalize="off" autocorrect="off" spellcheck="false" class="h-8 w-full rounded border bg-background px-2 font-mono text-xs outline-none focus:border-primary" placeholder="$.user.name" />
+                              </div>
+
+                              <div v-else-if="formatterKind === 'mask'" class="grid grid-cols-2 gap-2">
+                                <label class="space-y-1.5">
+                                  <span class="text-xs font-medium text-muted-foreground">
+                                    {{ t("grid.formatterMaskPrefix") }}
+                                  </span>
+                                  <input v-model.number="formatterMaskPrefix" type="number" min="0" class="h-8 w-full rounded border bg-background px-2 text-xs outline-none focus:border-primary" />
+                                </label>
+                                <label class="space-y-1.5">
+                                  <span class="text-xs font-medium text-muted-foreground">
+                                    {{ t("grid.formatterMaskSuffix") }}
+                                  </span>
+                                  <input v-model.number="formatterMaskSuffix" type="number" min="0" class="h-8 w-full rounded border bg-background px-2 text-xs outline-none focus:border-primary" />
+                                </label>
+                              </div>
+
+                              <div v-else class="space-y-2">
+                                <div v-if="savedCustomFormatters.length" class="space-y-1.5">
+                                  <div class="text-xs font-medium text-muted-foreground">
+                                    {{ t("grid.formatterSavedCustom") }}
+                                  </div>
+                                  <Select :model-value="formatterCustomId" @update:model-value="(value: any) => selectCustomFormatter(String(value))">
+                                    <SelectTrigger class="h-8 text-xs">
+                                      <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      <SelectItem :value="CUSTOM_FORMATTER_NEW">{{ t("grid.formatterNewCustom") }}</SelectItem>
+                                      <SelectItem v-for="formatter in savedCustomFormatters" :key="formatter.id" :value="formatter.id">
+                                        {{ formatter.name }}
+                                      </SelectItem>
+                                    </SelectContent>
+                                  </Select>
+                                </div>
+                                <label class="block space-y-1.5">
+                                  <span class="text-xs font-medium text-muted-foreground">
+                                    {{ t("grid.formatterCustomName") }}
+                                  </span>
+                                  <input v-model="formatterCustomName" class="h-8 w-full rounded border bg-background px-2 text-xs outline-none focus:border-primary" :placeholder="t('grid.formatterCustomNamePlaceholder')" />
+                                </label>
+                                <label class="block space-y-1.5">
+                                  <span class="text-xs font-medium text-muted-foreground">
+                                    {{ t("grid.formatterCustomTemplateInput") }}
+                                  </span>
+                                  <input v-model="formatterCustomTemplate" autocapitalize="off" autocorrect="off" spellcheck="false" class="h-8 w-full rounded border bg-background px-2 font-mono text-xs outline-none focus:border-primary" placeholder="ID-${value}" />
+                                </label>
+                                <div class="text-[11px] leading-4 text-muted-foreground">
+                                  {{ t("grid.formatterCustomTemplateHint") }}
+                                </div>
+                              </div>
+
+                              <div class="space-y-1.5">
+                                <div class="text-xs font-medium text-muted-foreground">
+                                  {{ t("grid.formatterPreview") }}
+                                </div>
+                                <div class="max-h-40 overflow-auto rounded border bg-muted/20">
+                                  <div v-for="row in formatterPreviewRows(col.actualColIdx)" :key="row.index" class="grid grid-cols-[2rem_minmax(0,1fr)_minmax(0,1fr)] gap-2 border-b px-2 py-1.5 text-[11px] last:border-b-0">
+                                    <span class="text-muted-foreground">{{ row.index }}</span>
+                                    <span class="truncate font-mono text-muted-foreground">{{ row.raw }}</span>
+                                    <span class="truncate font-mono">{{ row.formatted }}</span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+
+                            <div class="flex items-center justify-between gap-2 border-t bg-muted/30 px-3 py-2">
+                              <Button variant="ghost" size="sm" class="h-7 px-2 text-xs" :disabled="!columnHasFormatter(col.actualColIdx)" @click="clearColumnFormatter(col.actualColIdx)">
+                                {{ t("grid.clearFormatter") }}
+                              </Button>
+                              <div class="flex items-center gap-2">
+                                <Button variant="outline" size="sm" class="h-7 px-2 text-xs" @click="closeColumnFormatter">
+                                  {{ t("dangerDialog.cancel") }}
+                                </Button>
+                                <Button size="sm" class="h-7 px-2 text-xs" :disabled="!formatterDraftIsSavable()" @click="saveColumnFormatter(col.actualColIdx)">
+                                  {{ t("grid.saveFormatter") }}
                                 </Button>
-                                <div class="flex items-center gap-2">
-                                  <Button variant="outline" size="sm" class="h-7 px-2 text-xs" @click="closeColumnFormatter">
-                                    {{ t("dangerDialog.cancel") }}
-                                  </Button>
-                                  <Button size="sm" class="h-7 px-2 text-xs" :disabled="!formatterDraftIsSavable()" @click="saveColumnFormatter(col.actualColIdx)">
-                                    {{ t("grid.saveFormatter") }}
-                                  </Button>
-                                </div>
                               </div>
-                            </PopoverContent>
-                          </Popover>
-                          <Popover :open="localFilterOpenColumn === col.actualColIdx" @update:open="(value: boolean) => handleLocalFilterOpenChange(value, col.actualColIdx)">
-                            <PopoverAnchor v-if="compactColumnHeaderActions" as-child>
-                              <span class="pointer-events-none absolute right-3 top-1/2 h-px w-px -translate-y-1/2" />
-                            </PopoverAnchor>
-                            <PopoverTrigger v-else as-child>
-                              <button
-                                type="button"
-                                class="flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-foreground"
-                                :class="localFilterActive(col.actualColIdx) ? 'text-primary opacity-100' : 'opacity-80'"
-                                :title="t('grid.localFilter')"
-                                @click.stop
-                              >
-                                <Filter class="h-3.5 w-3.5" />
+                            </div>
+                          </PopoverContent>
+                        </Popover>
+                        <Popover :open="localFilterOpenColumn === col.actualColIdx" @update:open="(value: boolean) => handleLocalFilterOpenChange(value, col.actualColIdx)">
+                          <PopoverAnchor v-if="compactColumnHeaderActions" as-child>
+                            <span class="pointer-events-none absolute right-3 top-1/2 h-px w-px -translate-y-1/2" />
+                          </PopoverAnchor>
+                          <PopoverTrigger v-else as-child>
+                            <button
+                              type="button"
+                              class="flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-foreground"
+                              :class="localFilterActive(col.actualColIdx) ? 'text-primary opacity-100' : 'opacity-80'"
+                              :title="t('grid.localFilter')"
+                              @click.stop
+                            >
+                              <Filter class="h-3.5 w-3.5" />
+                            </button>
+                          </PopoverTrigger>
+                          <PopoverContent align="start" side="bottom" class="w-[300px] max-w-[calc(100vw-2rem)] gap-0 overflow-hidden rounded-xl border bg-popover p-0 text-popover-foreground shadow-xl" @click.stop @keydown.stop>
+                            <div class="border-b bg-muted/40 px-2 py-1.5 text-center text-xs font-semibold">
+                              {{ columnFilterPanelTitle(col.name) }}
+                            </div>
+                            <div class="flex items-center gap-1.5 border-b px-2 py-1.5">
+                              <Search class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                              <input v-model="localFilterSearch" autocapitalize="off" autocorrect="off" spellcheck="false" class="h-7 min-w-0 flex-1 bg-transparent text-xs outline-none placeholder:text-muted-foreground" :placeholder="t('grid.searchValues')" />
+                            </div>
+                            <div class="grid grid-cols-[1.75rem_minmax(0,1fr)_3.5rem] border-b bg-muted/40 px-2 py-1 text-xs font-medium text-muted-foreground">
+                              <button type="button" class="flex h-4 w-4 items-center justify-center rounded border" :class="localFilterAllVisibleSelected ? 'border-blue-600 bg-blue-600 text-white' : 'border-border bg-background text-foreground/70'" @click="toggleAllLocalFilterOptions">
+                                <Check v-if="localFilterAllVisibleSelected" class="h-3 w-3 stroke-[3]" />
                               </button>
-                            </PopoverTrigger>
-                            <PopoverContent align="start" side="bottom" class="w-[300px] max-w-[calc(100vw-2rem)] gap-0 overflow-hidden rounded-xl border bg-popover p-0 text-popover-foreground shadow-xl" @click.stop @keydown.stop>
-                              <div class="border-b bg-muted/40 px-2 py-1.5 text-center text-xs font-semibold">
-                                {{ columnFilterPanelTitle(col.name) }}
-                              </div>
-                              <div class="flex items-center gap-1.5 border-b px-2 py-1.5">
-                                <Search class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                                <input v-model="localFilterSearch" autocapitalize="off" autocorrect="off" spellcheck="false" class="h-7 min-w-0 flex-1 bg-transparent text-xs outline-none placeholder:text-muted-foreground" :placeholder="t('grid.searchValues')" />
-                              </div>
-                              <div class="grid grid-cols-[1.75rem_minmax(0,1fr)_3.5rem] border-b bg-muted/40 px-2 py-1 text-xs font-medium text-muted-foreground">
-                                <button type="button" class="flex h-4 w-4 items-center justify-center rounded border" :class="localFilterAllVisibleSelected ? 'border-blue-600 bg-blue-600 text-white' : 'border-border bg-background text-foreground/70'" @click="toggleAllLocalFilterOptions">
-                                  <Check v-if="localFilterAllVisibleSelected" class="h-3 w-3 stroke-[3]" />
-                                </button>
-                                <span>{{ t("grid.value") }}</span>
-                                <span class="text-right">{{ t("grid.count") }}</span>
-                              </div>
-                              <div v-if="localFilterDraft?.mode === 'server' && (serverFilterLoading || serverFilterError || serverFilterLimited)" class="flex items-center gap-1.5 border-b px-2 py-1 text-[11px] text-muted-foreground">
-                                <Loader2 v-if="serverFilterLoading" class="h-3 w-3 animate-spin" />
-                                <span class="min-w-0 truncate">
-                                  <template v-if="serverFilterLoading">{{ t("grid.loadingValues") }}</template>
-                                  <template v-else-if="serverFilterError">{{ serverFilterError }}</template>
-                                  <template v-else>{{ t("grid.serverValuesLimited", { count: SERVER_COLUMN_FILTER_LIMIT }) }}</template>
+                              <span>{{ t("grid.value") }}</span>
+                              <span class="text-right">{{ t("grid.count") }}</span>
+                            </div>
+                            <div v-if="localFilterDraft?.mode === 'server' && (serverFilterLoading || serverFilterError || serverFilterLimited)" class="flex items-center gap-1.5 border-b px-2 py-1 text-[11px] text-muted-foreground">
+                              <Loader2 v-if="serverFilterLoading" class="h-3 w-3 animate-spin" />
+                              <span class="min-w-0 truncate">
+                                <template v-if="serverFilterLoading">{{ t("grid.loadingValues") }}</template>
+                                <template v-else-if="serverFilterError">{{ serverFilterError }}</template>
+                                <template v-else>{{ t("grid.serverValuesLimited", { count: SERVER_COLUMN_FILTER_LIMIT }) }}</template>
+                              </span>
+                            </div>
+                            <div class="max-h-72 overflow-auto py-0.5">
+                              <button v-for="option in localFilterOptions" :key="option.key" type="button" class="grid w-full grid-cols-[1.75rem_minmax(0,1fr)_3.5rem] items-center px-2 py-1 text-left text-xs hover:bg-accent" @click="toggleLocalFilterValue(option.key)">
+                                <span class="flex h-4 w-4 items-center justify-center rounded border" :class="localFilterDraft?.values.has(option.key) ? 'border-blue-600 bg-blue-600 text-white' : 'border-border bg-background text-foreground/70'">
+                                  <Check v-if="localFilterDraft?.values.has(option.key)" class="h-3 w-3 stroke-[3]" />
                                 </span>
+                                <span class="truncate font-mono" :class="{ 'italic text-muted-foreground': option.value === null }">
+                                  {{ option.label }}
+                                </span>
+                                <span class="text-right tabular-nums text-muted-foreground text-xs">{{ option.count ?? "" }}</span>
+                              </button>
+                              <div v-if="localFilterDraft?.mode === 'local' && localFilterAllOptions.length > localFilterOptions.length" class="px-2 py-0.5 text-center text-[10px] text-muted-foreground">
+                                {{
+                                  t("grid.moreValues", {
+                                    count: localFilterAllOptions.length - localFilterOptions.length,
+                                  })
+                                }}
                               </div>
-                              <div class="max-h-72 overflow-auto py-0.5">
-                                <button v-for="option in localFilterOptions" :key="option.key" type="button" class="grid w-full grid-cols-[1.75rem_minmax(0,1fr)_3.5rem] items-center px-2 py-1 text-left text-xs hover:bg-accent" @click="toggleLocalFilterValue(option.key)">
-                                  <span class="flex h-4 w-4 items-center justify-center rounded border" :class="localFilterDraft?.values.has(option.key) ? 'border-blue-600 bg-blue-600 text-white' : 'border-border bg-background text-foreground/70'">
-                                    <Check v-if="localFilterDraft?.values.has(option.key)" class="h-3 w-3 stroke-[3]" />
-                                  </span>
-                                  <span class="truncate font-mono" :class="{ 'italic text-muted-foreground': option.value === null }">
-                                    {{ option.label }}
-                                  </span>
-                                  <span class="text-right tabular-nums text-muted-foreground text-xs">{{ option.count ?? "" }}</span>
-                                </button>
-                                <div v-if="localFilterDraft?.mode === 'local' && localFilterAllOptions.length > localFilterOptions.length" class="px-2 py-0.5 text-center text-[10px] text-muted-foreground">
-                                  {{
-                                    t("grid.moreValues", {
-                                      count: localFilterAllOptions.length - localFilterOptions.length,
-                                    })
-                                  }}
-                                </div>
-                                <button v-if="canApplyTypedLocalFilterValue" type="button" class="grid w-full grid-cols-[1.75rem_minmax(0,1fr)] items-center px-2 py-1 text-left text-xs text-primary hover:bg-accent" @click="applyTypedLocalFilterValue">
-                                  <Search class="h-3.5 w-3.5" />
-                                  <span class="truncate font-mono">
-                                    {{ t("grid.filterTypedValue", { value: localFilterTypedValue }) }}
-                                  </span>
-                                </button>
-                                <div v-if="localFilterOptions.length === 0 && !canApplyTypedLocalFilterValue && !serverFilterLoading" class="px-2 py-6 text-center text-xs text-muted-foreground">
-                                  {{ t("grid.noSearchResults") }}
-                                </div>
+                              <button v-if="canApplyTypedLocalFilterValue" type="button" class="grid w-full grid-cols-[1.75rem_minmax(0,1fr)] items-center px-2 py-1 text-left text-xs text-primary hover:bg-accent" @click="applyTypedLocalFilterValue">
+                                <Search class="h-3.5 w-3.5" />
+                                <span class="truncate font-mono">
+                                  {{ t("grid.filterTypedValue", { value: localFilterTypedValue }) }}
+                                </span>
+                              </button>
+                              <div v-if="localFilterOptions.length === 0 && !canApplyTypedLocalFilterValue && !serverFilterLoading" class="px-2 py-6 text-center text-xs text-muted-foreground">
+                                {{ t("grid.noSearchResults") }}
                               </div>
-                              <div class="flex items-center justify-between gap-2 border-t bg-muted/40 px-2 py-1.5">
-                                <Button variant="ghost" size="sm" class="h-7 px-2 text-xs" @click="clearLocalFilter(col.actualColIdx)">
-                                  {{ t("grid.clearFilter") }}
+                            </div>
+                            <div class="flex items-center justify-between gap-2 border-t bg-muted/40 px-2 py-1.5">
+                              <Button variant="ghost" size="sm" class="h-7 px-2 text-xs" @click="clearLocalFilter(col.actualColIdx)">
+                                {{ t("grid.clearFilter") }}
+                              </Button>
+                              <div class="flex items-center gap-2">
+                                <Button variant="outline" size="sm" class="h-7 px-2 text-xs" @click="closeLocalFilter">
+                                  {{ t("dangerDialog.cancel") }}
+                                </Button>
+                                <Button size="sm" class="h-7 px-2 text-xs" @click="applyLocalFilter">
+                                  {{ t("grid.applyFilter") }}
                                 </Button>
-                                <div class="flex items-center gap-2">
-                                  <Button variant="outline" size="sm" class="h-7 px-2 text-xs" @click="closeLocalFilter">
-                                    {{ t("dangerDialog.cancel") }}
-                                  </Button>
-                                  <Button size="sm" class="h-7 px-2 text-xs" @click="applyLocalFilter">
-                                    {{ t("grid.applyFilter") }}
-                                  </Button>
-                                </div>
                               </div>
-                            </PopoverContent>
-                          </Popover>
-                          <button
-                            v-if="!compactColumnHeaderActions && canUseServerColumnFilter"
-                            type="button"
-                            class="flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-foreground"
-                            :class="localFilterOpenColumn === col.actualColIdx && localFilterDraft?.mode === 'server' ? 'text-primary opacity-100' : 'opacity-80'"
-                            :title="t('grid.databaseValueFilter')"
-                            @click.stop="openLocalFilter(col.actualColIdx, 'server')"
-                          >
-                            <Database class="h-3.5 w-3.5" />
-                          </button>
-                        </span>
+                            </div>
+                          </PopoverContent>
+                        </Popover>
+                        <button
+                          v-if="!compactColumnHeaderActions && canUseServerColumnFilter"
+                          type="button"
+                          class="flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-foreground"
+                          :class="localFilterOpenColumn === col.actualColIdx && localFilterDraft?.mode === 'server' ? 'text-primary opacity-100' : 'opacity-80'"
+                          :title="t('grid.databaseValueFilter')"
+                          @click.stop="openLocalFilter(col.actualColIdx, 'server')"
+                        >
+                          <Database class="h-3.5 w-3.5" />
+                        </button>
                       </span>
-                      <div data-column-resize-handle class="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-primary/30" @mousedown.stop="startColumnHeaderResize(col.visibleColIdx, $event)" @click.stop.prevent @dblclick.stop="autoFitColumn(col.visibleColIdx)" />
-                    </div>
-                    <template #content>
-                      <div class="grid min-w-56 grid-cols-[auto_minmax(0,1fr)] gap-x-2 gap-y-1 px-3 py-2">
-                        <span class="text-background/70">{{ t("grid.columnName") }}</span>
-                        <span class="flex min-w-0 items-center gap-2">
-                          <span class="min-w-0 flex-1 truncate font-mono">{{ col.name }}</span>
-                          <button type="button" class="flex h-5 w-5 shrink-0 items-center justify-center rounded hover:bg-background/10" :title="t('grid.copyColumnName')" @click.stop="copyText(col.name)">
-                            <Copy class="h-3 w-3" />
-                          </button>
-                        </span>
-                        <template v-if="columnTypeMap.get(col.name)">
-                          <span class="text-background/70">{{ t("grid.columnType") }}</span>
-                          <span :class="typeColorClass(columnTypeMap.get(col.name)!)">{{ columnTypeMap.get(col.name) }}</span>
-                        </template>
-                        <template v-if="columnCommentMap.get(col.name)">
-                          <span class="text-background/70">{{ t("grid.columnComment") }}</span>
-                          <span>{{ columnCommentMap.get(col.name) }}</span>
-                        </template>
-                      </div>
                     </template>
-                  </LightTooltip>
+                  </DataGridColumnHeader>
                   <div class="shrink-0" :style="{ width: `${horizontalColumnWindow.afterWidth}px` }" />
                   <div v-if="gridScrollbarGutter > 0" class="shrink-0 border-l border-border w-(--grid-scrollbar-gutter)" />
                 </div>
@@ -10876,186 +8508,35 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
                 </div>
               </div>
 
-              <TabsContent value="details" class="m-0 min-h-0 flex-1 flex flex-col">
-                <div data-native-clipboard class="flex-1 min-h-0 overflow-auto px-3 pt-3 text-xs" :class="[sideDetailValueFillsHeight ? 'flex flex-col gap-3' : 'space-y-3', isEditingDetail && !cellDetailPanelIsBottom ? 'pb-1' : 'pb-3']">
-                  <div v-if="cellDetailPanelIsBottom && !cellDetailMetadataCollapsed" class="grid grid-cols-[minmax(180px,1.6fr)_repeat(4,minmax(74px,0.55fr))_minmax(160px,1fr)] gap-3 rounded border bg-muted/20 p-2">
-                    <div class="min-w-0 space-y-1">
-                      <div class="text-muted-foreground">{{ t("grid.columnName") }}</div>
-                      <div class="truncate font-medium" :title="activeCellDetail.column">
-                        {{ activeCellDetail.column }}
-                      </div>
-                    </div>
-                    <div class="space-y-1">
-                      <div class="text-muted-foreground">{{ t("grid.rowNumber") }}</div>
-                      <div>{{ activeCellDetail.rowNumber }}</div>
-                    </div>
-                    <div class="min-w-0 space-y-1">
-                      <div class="text-muted-foreground">{{ t("grid.columnType") }}</div>
-                      <div class="truncate" :class="activeCellDetail.type ? typeColorClass(activeCellDetail.type) : 'text-muted-foreground'" :title="activeCellDetail.type || '-'">
-                        {{ activeCellDetail.type || "-" }}
-                      </div>
-                    </div>
-                    <div class="space-y-1">
-                      <div class="text-muted-foreground">{{ t("grid.nullValue") }}</div>
-                      <div>{{ activeCellDetail.value === null ? "true" : "false" }}</div>
-                    </div>
-                    <div class="space-y-1">
-                      <div class="text-muted-foreground">{{ t("grid.valueLength") }}</div>
-                      <div>{{ activeCellDetail.length }}</div>
-                    </div>
-                    <div class="min-w-0 space-y-1">
-                      <div class="text-muted-foreground">{{ t("grid.columnComment") }}</div>
-                      <div class="truncate" :title="activeCellDetail.comment || t('grid.noComment')">
-                        {{ activeCellDetail.comment || t("grid.noComment") }}
-                      </div>
-                    </div>
-                  </div>
-                  <template v-else-if="!cellDetailMetadataCollapsed && !isEditingDetail">
-                    <div class="space-y-1">
-                      <div class="text-muted-foreground">{{ t("grid.columnName") }}</div>
-                      <div class="font-medium break-all">{{ activeCellDetail.column }}</div>
-                    </div>
-                    <div class="grid grid-cols-2 gap-3">
-                      <div class="space-y-1">
-                        <div class="text-muted-foreground">{{ t("grid.rowNumber") }}</div>
-                        <div>{{ activeCellDetail.rowNumber }}</div>
-                      </div>
-                      <div class="space-y-1">
-                        <div class="text-muted-foreground">{{ t("grid.columnType") }}</div>
-                        <div :class="activeCellDetail.type ? typeColorClass(activeCellDetail.type) : 'text-muted-foreground'">
-                          {{ activeCellDetail.type || "-" }}
-                        </div>
-                      </div>
-                      <div class="space-y-1">
-                        <div class="text-muted-foreground">{{ t("grid.nullValue") }}</div>
-                        <div>{{ activeCellDetail.value === null ? "true" : "false" }}</div>
-                      </div>
-                      <div class="space-y-1">
-                        <div class="text-muted-foreground">{{ t("grid.valueLength") }}</div>
-                        <div>{{ activeCellDetail.length }}</div>
-                      </div>
-                    </div>
-                    <div class="space-y-1">
-                      <div class="text-muted-foreground">{{ t("grid.columnComment") }}</div>
-                      <div class="whitespace-pre-wrap break-words">
-                        {{ activeCellDetail.comment || t("grid.noComment") }}
-                      </div>
-                    </div>
-                  </template>
-                  <div class="space-y-1" :class="[{ 'min-h-0 flex flex-col': sideDetailValueFillsHeight }, sideDetailValueFillsHeight && !(activeCellDetail.imagePreviewUrl && !isEditingDetail) ? 'flex-1' : '', activeCellDetail.imagePreviewUrl && !isEditingDetail ? 'shrink-0' : '']">
-                    <div class="flex min-h-5 items-center justify-between gap-2">
-                      <div class="text-muted-foreground">{{ t("grid.cellValue") }}</div>
-                      <div class="flex items-center gap-1">
-                        <Button v-if="showCompactDetailJson" variant="ghost" size="sm" class="h-5 gap-1 px-1.5 text-xs" :disabled="!canCompactDetailJson" :title="t('grid.compactJson')" @click="compactDetailJson">
-                          <Code2 class="h-3 w-3" />
-                          {{ t("grid.compactJson") }}
-                        </Button>
-                        <Button v-if="!isEditingDetail && activeCellDetail.formattedJson" :variant="sideDetailJsonView ? 'secondary' : 'ghost'" size="sm" class="h-5 gap-1 px-1.5 text-xs" :title="t('grid.formattedJson')" @click="toggleCellDetailJsonFormatted">
-                          <Code2 class="h-3 w-3" />
-                          {{ t("grid.formattedJson") }}
-                        </Button>
-                        <Button v-if="!isEditingDetail && activeCellDetail.isEditable" variant="ghost" size="icon" class="h-5 w-5" :title="t('grid.editValue')" @click="startDetailEdit">
-                          <Pencil class="h-3 w-3" />
-                        </Button>
-                        <Button v-if="!isEditingDetail" variant="ghost" size="icon" class="h-5 w-5" :title="t('grid.copyValue')" @click="copyDetailCurrentValue">
-                          <Copy class="h-3 w-3" />
-                        </Button>
-                        <DropdownMenu v-if="!isEditingDetail && canDownloadDetailBinaryValue(activeCellDetail)">
-                          <DropdownMenuTrigger as-child>
-                            <Button variant="ghost" size="icon" class="h-5 w-5" :title="t('grid.downloadBinaryValue')">
-                              <Upload class="h-3 w-3" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end" class="w-44">
-                            <DropdownMenuItem v-for="mode in BINARY_CELL_DOWNLOAD_MODES" :key="mode" @click="downloadDetailBinaryValue(activeCellDetail, mode)">
-                              {{ t(`grid.binaryDownload.${mode}`) }}
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                        <!-- Skip hex fallback from backend (unsupported geometry types like TIN/Triangle) -->
-                        <Popover v-if="isGeometryColumnType(activeCellDetail.type) && activeCellDetail.value !== null && !isEditingDetail && !isHexGeometry(activeCellDetail.value as string)" v-model:open="sideGeometryPreviewOpen">
-                          <PopoverTrigger as-child>
-                            <Button variant="ghost" size="icon" class="h-5 w-5" :title="t('grid.geometryPreview')">
-                              <Eye class="h-3 w-3" />
-                            </Button>
-                          </PopoverTrigger>
-                          <PopoverContent class="w-auto p-1.5" align="end">
-                            <canvas v-show="sideGeometryPreviewOpen" ref="sideGeometryCanvas" width="400" height="280" class="block rounded" />
-                          </PopoverContent>
-                        </Popover>
-                      </div>
-                    </div>
-                    <div v-if="activeCellDetail.imagePreviewUrl && !isEditingDetail" class="shrink-0 space-y-1.5">
-                      <div class="text-muted-foreground">{{ t("grid.imagePreview") }}</div>
-                      <a :href="activeCellDetail.imagePreviewUrl" role="button" class="flex overflow-hidden rounded border bg-muted/20" :class="cellDetailPanelIsBottom ? 'max-h-28' : 'max-h-40'" @click.prevent="openImagePreview(activeCellDetail.imagePreviewUrl, activeCellDetail.column)">
-                        <img :src="activeCellDetail.imagePreviewUrl" :alt="activeCellDetail.column" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="max-h-full w-full object-contain" />
-                      </a>
-                    </div>
-                    <template v-if="isEditingDetail">
-                      <div class="min-h-0 flex-1" :style="sideDetailEditorStyle">
-                        <TemporalCellEditor
-                          v-if="detailTemporalEditorConfig"
-                          v-model="detailEditValue"
-                          :kind="detailTemporalEditorConfig.kind"
-                          :fraction-precision="detailTemporalEditorConfig.fractionPrecision"
-                          variant="inline"
-                          :commit-on-close="false"
-                          @cancel="cancelDetailEdit"
-                          @commit="commitDetailEdit"
-                        />
-                        <div v-else ref="detailsEditorContainer" data-cell-detail-editor-root class="min-h-0 h-full w-full rounded border overflow-hidden" />
-                      </div>
-                      <div v-if="!cellDetailPanelIsBottom" class="flex shrink-0 gap-1 py-0.5">
-                        <Button size="sm" class="h-6 text-xs" @click="commitDetailEdit">
-                          {{ t("dangerDialog.confirm") }}
-                        </Button>
-                        <Button variant="outline" size="sm" class="h-6 text-xs" @click="cancelDetailEdit">
-                          {{ t("dangerDialog.cancel") }}
-                        </Button>
-                      </div>
-                    </template>
-                    <div
-                      v-else-if="activeCellDetail.formattedJson"
-                      ref="sideJsonPreviewContainer"
-                      data-cell-detail-editor-root
-                      class="overflow-hidden rounded border bg-muted/20 p-2"
-                      :class="[{ 'cursor-text': activeCellDetail.isEditable }, sideDetailValueFillsHeight ? 'min-h-0 flex-1' : 'h-72 max-h-[42vh]']"
-                      @dblclick.capture="startDetailEdit"
-                    />
-                    <pre
-                      v-else
-                      class="overflow-auto rounded border bg-muted/20 p-2 font-mono text-xs whitespace-pre-wrap break-words cursor-pointer hover:border-primary/50"
-                      :class="[{ 'cursor-text': activeCellDetail.isEditable }, cellDetailPanelIsBottom && activeCellDetail.imagePreviewUrl ? 'min-h-24 max-h-32 shrink-0' : '', sideDetailValueFillsHeight && !activeCellDetail.imagePreviewUrl ? 'min-h-0 flex-1' : '']"
-                      @dblclick="startDetailEdit"
-                      >{{ activeCellDetail.rawValuePreview }}</pre
-                    >
-                    <div v-if="activeCellDetail.isValuePreviewTruncated && !sideDetailJsonView" class="text-[11px] text-muted-foreground">
-                      {{
-                        t("grid.largeValuePreviewHint", {
-                          count: activeCellDetail.rawValuePreview.length,
-                        })
-                      }}
-                    </div>
-                  </div>
-                </div>
-
-                <div class="border-t flex gap-1 overflow-hidden bg-background p-1.5" :class="cellDetailPanelIsBottom ? 'shrink-0 items-center' : 'shrink-0 flex-col'">
-                  <div v-if="isEditingDetail && cellDetailPanelIsBottom" class="flex shrink-0 gap-1 mr-auto">
-                    <Button size="sm" class="h-6 text-xs" @click="commitDetailEdit">
-                      {{ t("dangerDialog.confirm") }}
-                    </Button>
-                    <Button variant="outline" size="sm" class="h-6 text-xs" @click="cancelDetailEdit">
-                      {{ t("dangerDialog.cancel") }}
-                    </Button>
-                  </div>
-                  <div class="flex gap-1" :class="cellDetailPanelIsBottom ? 'ml-auto shrink-0 justify-end' : 'flex-col'">
-                    <Button v-if="activeCellDetail.isEditable && activeCellDetail.value !== null" variant="ghost" size="sm" class="h-6 justify-start text-xs" @click="setDetailNull"> <X class="w-3 h-3 mr-2" /> {{ t("grid.setNull") }} </Button>
-                    <Button variant="ghost" size="sm" class="h-6 justify-start text-xs" @click="copyDetailColumnName"> <Copy class="w-3 h-3 mr-2" /> {{ t("grid.copyColumnName") }} </Button>
-                    <Button variant="ghost" size="sm" class="h-6 justify-start text-xs" :disabled="!canCopyPreparedDetailSqlCondition()" @click="copyDetailSqlCondition"> <Code2 class="w-3 h-3 mr-2" /> {{ t("grid.copySqlCondition") }} </Button>
-                  </div>
-                </div>
-              </TabsContent>
-
+              <DataGridCellDetailPanel
+                v-if="activeCellDetail"
+                ref="cellDetailPanelRef"
+                v-model:value="detailEditValue"
+                :detail="activeCellDetail"
+                :panel-is-bottom="cellDetailPanelIsBottom"
+                :metadata-collapsed="cellDetailMetadataCollapsed"
+                :value-fills-height="sideDetailValueFillsHeight"
+                :editing="isEditingDetail"
+                :editor-style="sideDetailEditorStyle"
+                :temporal-editor-config="detailTemporalEditorConfig"
+                :side-json-view="sideDetailJsonView"
+                :show-compact-json="showCompactDetailJson"
+                :can-compact-json="canCompactDetailJson"
+                :type-color-class="typeColorClass"
+                :can-download-binary-value="canDownloadDetailBinaryValue"
+                :download-binary-value="downloadDetailBinaryValue"
+                :open-image-preview="openImagePreview"
+                :can-copy-sql-condition="canCopyPreparedDetailSqlCondition"
+                @start-edit="startDetailEdit"
+                @compact-json="compactDetailJson"
+                @toggle-formatted="toggleCellDetailJsonFormatted"
+                @copy-value="copyDetailCurrentValue"
+                @commit="commitDetailEdit"
+                @cancel="cancelDetailEdit"
+                @set-null="setDetailNull"
+                @copy-column-name="copyDetailColumnName"
+                @copy-sql-condition="copyDetailSqlCondition"
+              />
               <TabsContent v-if="activeCellDetailTabs.includes('hexViewer')" value="hexViewer" class="m-0 min-h-0 flex-1 flex flex-col p-3 text-xs">
                 <div class="mb-2 min-w-0 shrink-0">
                   <div class="font-medium">{{ t("grid.hexViewer") }}</div>
@@ -11106,30 +8587,18 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
               </TabsContent>
             </Tabs>
           </div>
-          <!-- MongoDB document JSON preview -->
-          <div v-else-if="mongoJsonPreviewOpen" class="relative col-start-3 row-start-1 flex min-w-0 flex-col border-l bg-background" :class="{ 'detail-drawer-resizing': isResizingMongoJsonPreview }" :style="mongoJsonPreviewStyle" @contextmenu="onDrawerContextMenu">
-            <div class="absolute bottom-0 left-0 top-0 z-20 w-1.5 -translate-x-1/2 cursor-col-resize hover:bg-primary/30" @mousedown.prevent="onMongoJsonPreviewResizeStart" />
-            <div class="flex h-9 shrink-0 items-center gap-2 border-b bg-muted/20 px-3">
-              <Code2 class="h-3.5 w-3.5 text-muted-foreground" />
-              <span class="min-w-0 flex-1 truncate text-xs font-medium">{{ t("grid.mongoJsonPreview") }}</span>
-              <Button variant="ghost" size="icon" class="h-5 w-5" :disabled="!mongoJsonPreviewFullText" :title="t('grid.copyJson')" @click="copyMongoJsonPreview">
-                <Copy class="h-3 w-3" />
-              </Button>
-              <Button variant="ghost" size="icon" class="h-5 w-5" @click="closeMongoJsonPreview">
-                <X class="h-3 w-3" />
-              </Button>
-            </div>
-            <div v-if="mongoJsonPreviewText" class="flex min-h-0 flex-1 flex-col overflow-hidden p-2">
-              <div v-if="mongoJsonPreviewUsesCodeEditor" ref="mongoJsonPreviewContainer" data-cell-detail-editor-root class="min-h-0 flex-1 overflow-hidden" />
-              <template v-else>
-                <pre class="min-h-0 flex-1 overflow-auto rounded border bg-muted/20 p-3 font-mono text-xs whitespace-pre-wrap break-words">{{ mongoJsonPreviewText }}</pre>
-                <div class="mt-1 text-[11px] text-muted-foreground">{{ t("grid.largeValuePreviewHint", { count: mongoJsonPreviewText.length }) }}</div>
-              </template>
-            </div>
-            <div v-else class="flex min-h-0 flex-1 items-center justify-center px-6 text-center text-xs text-muted-foreground">
-              {{ t("grid.mongoJsonPreviewEmpty") }}
-            </div>
-          </div>
+          <DataGridMongoJsonPreview
+            v-if="mongoJsonPreviewOpen"
+            :full-text="mongoJsonPreviewFullText"
+            :text="mongoJsonPreviewText"
+            :uses-code-editor="mongoJsonPreviewUsesCodeEditor"
+            :panel-style="mongoJsonPreviewStyle"
+            :resizing="isResizingMongoJsonPreview"
+            @copy="copyMongoJsonPreview"
+            @close="closeMongoJsonPreview"
+            @resize-start="onMongoJsonPreviewResizeStart"
+            @context-menu="onDrawerContextMenu"
+          />
         </div>
       </div>
     </CustomContextMenu>
@@ -11177,379 +8646,59 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
       </Tooltip>
       <span v-else class="min-w-0" />
 
-      <div class="flex min-w-max items-center justify-end gap-1">
-        <div v-if="selectionSummary" class="flex shrink-0 items-center gap-3 tabular-nums">
-          <span class="shrink-0">{{ t("grid.selectionSum", { value: selectionSummarySumText }) }}</span>
-          <div class="flex shrink-0 items-center gap-1">
-            <span class="shrink-0">{{ t("grid.selectionCells", { count: selectionSummary.cellCount }) }}</span>
-            <span class="shrink-0">{{ t("grid.rows", { count: selectionSummary.rowCount }) }}</span>
-          </div>
-        </div>
-        <Loader2 v-if="loading" class="w-3 h-3 animate-spin text-muted-foreground" />
-        <template v-if="infiniteScrollEnabled">
-          <span v-if="infiniteScrollAllLoaded" class="text-xs text-muted-foreground shrink-0">
-            {{ t("grid.allLoaded") }}
-          </span>
-        </template>
-        <template v-if="!infiniteScrollEnabled">
-          <LightDropdown
-            :model-value="String(pageSize)"
-            :items="pageSizeMenuItems"
-            :trigger-label="`${pageSize}${t('grid.rowsPerPageShort')}`"
-            trigger-class="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded-md px-1.5 text-xs hover:bg-accent hover:text-accent-foreground"
-            content-class="w-36"
-            :highlight-selected="false"
-            check-position="none"
-            align="end"
-            @update:model-value="selectPageSizeMenuItem"
-          >
-            <div class="bg-border -mx-1 my-1 h-px" />
-            <div class="text-muted-foreground px-1.5 py-1 text-xs">{{ t("grid.customRowsPerPage") }}</div>
-            <div class="flex items-center gap-1 px-1.5 pb-1" @click.stop @keydown.stop>
-              <Input
-                v-model="customPageSizeInput"
-                type="number"
-                inputmode="numeric"
-                :min="MIN_RESULT_PAGE_SIZE"
-                :max="MAX_RESULT_PAGE_SIZE"
-                class="h-6 w-20 px-1.5 text-xs tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                @keydown.enter.prevent.stop="applyCustomPageSize"
-              />
-              <Tooltip>
-                <TooltipTrigger as-child>
-                  <Button variant="outline" size="icon" class="h-6 w-6 shrink-0" :aria-label="t('grid.applyPageSize')" @click.stop="applyCustomPageSize">
-                    <Check class="h-3 w-3" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent side="bottom">{{ t("grid.applyPageSize") }}</TooltipContent>
-              </Tooltip>
-            </div>
-          </LightDropdown>
-          <Button variant="ghost" size="icon" class="h-5 w-5 shrink-0" :disabled="currentPage <= 1" @click="firstPage">
-            <ChevronsLeft class="h-3 w-3" />
-          </Button>
-          <Button variant="ghost" size="icon" class="h-5 w-5 shrink-0" :disabled="currentPage <= 1" @click="prevPage">
-            <ChevronLeft class="h-3 w-3" />
-          </Button>
-          <span class="shrink-0 tabular-nums">{{ currentPage }}</span>
-          <Button variant="ghost" size="icon" class="h-5 w-5 shrink-0" :disabled="!canGoNextPage" @click="nextPage">
-            <ChevronRight class="h-3 w-3" />
-          </Button>
-          <Button variant="ghost" size="icon" class="h-5 w-5 shrink-0" :disabled="!canJumpLastPage" @click="lastPage">
-            <ChevronsRight class="h-3 w-3" />
-          </Button>
-        </template>
-        <LightDropdown
-          model-value=""
-          :items="exportMenuItems"
-          :aria-label="t('grid.export')"
-          :trigger-icon="Upload"
-          :trigger-label="t('grid.export')"
-          trigger-class="inline-flex h-6 shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-md px-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground"
-          trigger-icon-class="h-3.5 w-3.5"
-          :show-trigger-label="true"
-          :show-chevron="true"
-          :highlight-selected="false"
-          check-position="none"
-          align="end"
-          @update:model-value="selectExportMenuItem"
-        />
-      </div>
+      <DataGridPagination
+        v-model:custom-page-size-input="customPageSizeInput"
+        :selection-summary="selectionSummary"
+        :selection-summary-sum-text="selectionSummarySumText"
+        :loading="loading"
+        :infinite-scroll-enabled="infiniteScrollEnabled"
+        :infinite-scroll-all-loaded="infiniteScrollAllLoaded"
+        :page-size="pageSize"
+        :page-size-menu-items="pageSizeMenuItems"
+        :export-menu-items="exportMenuItems"
+        :current-page="currentPage"
+        :can-go-next-page="canGoNextPage"
+        :can-jump-last-page="canJumpLastPage"
+        @select-page-size="selectPageSizeMenuItem"
+        @apply-custom-page-size="applyCustomPageSize"
+        @first-page="firstPage"
+        @previous-page="prevPage"
+        @next-page="nextPage"
+        @last-page="lastPage"
+        @select-export="selectExportMenuItem"
+      />
     </div>
 
-    <Dialog v-model:open="cellDetailDialogOpen">
-      <DialogContent v-if="dialogCellDetail" class="sm:max-w-[840px] max-h-[85vh] flex flex-col overflow-hidden">
-        <DialogHeader class="shrink-0 pr-8">
-          <DialogTitle class="flex min-w-0 items-center gap-2 text-sm">
-            <Info class="h-4 w-4 shrink-0 text-muted-foreground" />
-            <span class="min-w-0 truncate">{{ t("grid.cellDetails") }}</span>
-          </DialogTitle>
-        </DialogHeader>
+    <DataGridCellDetailDialog
+      v-if="cellDetailDialogMounted"
+      v-model:open="cellDetailDialogOpen"
+      :detail="dialogCellDetail"
+      :type-color-class="typeColorClass"
+      :open-image-preview="openImagePreview"
+      :copy-text="copyText"
+      :can-download-binary-value="canDownloadDetailBinaryValue"
+      :download-binary-value="downloadDetailBinaryValue"
+      @edit="openDialogCellInSidePanel"
+    />
 
-        <div class="min-h-0 flex-1 overflow-auto pr-1 text-xs space-y-4">
-          <div class="grid gap-3 rounded border bg-muted/20 p-3 sm:grid-cols-2 lg:grid-cols-4">
-            <div class="space-y-1">
-              <div class="text-muted-foreground">{{ t("grid.columnName") }}</div>
-              <div class="font-medium break-all">{{ dialogCellDetail.column }}</div>
-            </div>
-            <div class="space-y-1">
-              <div class="text-muted-foreground">{{ t("grid.rowNumber") }}</div>
-              <div>{{ dialogCellDetail.rowNumber }}</div>
-            </div>
-            <div class="space-y-1">
-              <div class="text-muted-foreground">{{ t("grid.columnType") }}</div>
-              <div :class="dialogCellDetail.type ? typeColorClass(dialogCellDetail.type) : 'text-muted-foreground'">
-                {{ dialogCellDetail.type || "-" }}
-              </div>
-            </div>
-            <div class="space-y-1">
-              <div class="text-muted-foreground">{{ t("grid.valueLength") }}</div>
-              <div>{{ dialogCellDetail.length }}</div>
-            </div>
-          </div>
+    <DataGridDetailDialogs
+      v-if="detailDialogsMounted"
+      v-model:row-open="rowDetailDialogOpen"
+      v-model:column-open="columnDetailDialogOpen"
+      :row-detail="rowDetail"
+      :column-detail="columnDetail"
+      :type-color-class="typeColorClass"
+      :open-image-preview="openImagePreview"
+      :copy-row-detail-field-value="copyRowDetailFieldValue"
+      :copy-column-detail-field-value="copyColumnDetailFieldValue"
+      :copy-row-detail-json="copyRowDetailJson"
+      :copy-row-detail-tsv="copyRowDetailTsv"
+      :copy-column-detail-json="copyColumnDetailJson"
+      :copy-column-detail-tsv="copyColumnDetailTsv"
+      :copy-column-detail-column-name="copyColumnDetailColumnName"
+    />
 
-          <div class="space-y-1">
-            <div class="text-muted-foreground">{{ t("grid.columnComment") }}</div>
-            <div class="whitespace-pre-wrap break-words">
-              {{ dialogCellDetail.comment || t("grid.noComment") }}
-            </div>
-          </div>
-
-          <div class="space-y-2">
-            <div class="flex items-center justify-between gap-2">
-              <div class="text-muted-foreground">{{ t("grid.cellValue") }}</div>
-              <div class="flex items-center gap-1">
-                <Button v-if="dialogCellDetail.formattedJson" :variant="cellDetailJsonView ? 'secondary' : 'ghost'" size="sm" class="h-6 gap-1 px-2 text-xs" :title="t('grid.formattedJson')" @click="toggleCellDetailJsonFormatted">
-                  <Code2 class="h-3 w-3" />
-                  {{ t("grid.formattedJson") }}
-                </Button>
-                <Button v-if="dialogCellDetail.isEditable" variant="ghost" size="icon" class="h-6 w-6" :title="t('grid.editValue')" @click="openDialogCellInSidePanel">
-                  <Pencil class="h-3 w-3" />
-                </Button>
-                <Button variant="ghost" size="icon" class="h-6 w-6" :title="t('grid.copyValue')" @click="copyDialogCellCurrentValue">
-                  <Copy class="h-3 w-3" />
-                </Button>
-                <DropdownMenu v-if="canDownloadDetailBinaryValue(dialogCellDetail)">
-                  <DropdownMenuTrigger as-child>
-                    <Button variant="ghost" size="icon" class="h-6 w-6" :title="t('grid.downloadBinaryValue')">
-                      <Upload class="h-3 w-3" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" class="w-44">
-                    <DropdownMenuItem v-for="mode in BINARY_CELL_DOWNLOAD_MODES" :key="mode" @click="downloadDetailBinaryValue(dialogCellDetail, mode)">
-                      {{ t(`grid.binaryDownload.${mode}`) }}
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-                <!-- Skip hex fallback from backend (unsupported geometry types like TIN/Triangle) -->
-                <Popover v-if="isGeometryColumnType(dialogCellDetail.type) && dialogCellDetail.value !== null && !isHexGeometry(dialogCellDetail.value as string)" v-model:open="dialogGeometryPreviewOpen">
-                  <PopoverTrigger as-child>
-                    <Button variant="ghost" size="icon" class="h-6 w-6" :title="t('grid.geometryPreview')">
-                      <Eye class="h-3 w-3" />
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent class="w-auto p-1.5" align="end">
-                    <canvas v-show="dialogGeometryPreviewOpen" ref="dialogGeometryCanvas" width="400" height="280" class="block rounded" />
-                  </PopoverContent>
-                </Popover>
-              </div>
-            </div>
-            <a v-if="dialogCellDetail.imagePreviewUrl" :href="dialogCellDetail.imagePreviewUrl" role="button" class="block max-h-72 overflow-hidden rounded border bg-muted/20" @click.prevent="openImagePreview(dialogCellDetail.imagePreviewUrl, dialogCellDetail.column)">
-              <img :src="dialogCellDetail.imagePreviewUrl" :alt="dialogCellDetail.column" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="max-h-72 w-full object-contain" />
-            </a>
-            <div v-if="cellDetailJsonView && dialogCellDetail.formattedJson" ref="dialogJsonPreviewContainer" data-cell-detail-editor-root class="h-[44vh] min-h-60 overflow-hidden rounded border bg-muted/20 p-3" />
-            <pre v-else class="max-h-[44vh] overflow-auto rounded border bg-muted/20 p-3 font-mono text-xs whitespace-pre-wrap break-words" :class="{ 'italic text-muted-foreground': dialogCellDetail.value === null }">{{ dialogCellDetail.rawValuePreview }}</pre>
-            <div v-if="dialogCellDetail.isValuePreviewTruncated && !cellDetailJsonView" class="text-[11px] text-muted-foreground">
-              {{ t("grid.largeValuePreviewHint", { count: dialogCellDetail.rawValuePreview.length }) }}
-            </div>
-          </div>
-        </div>
-
-        <DialogFooter class="shrink-0 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-          <div class="flex flex-wrap gap-2"></div>
-          <Button variant="ghost" size="sm" class="h-7 text-xs" @click="copyDialogCellColumnName"> <Copy class="mr-1.5 h-3 w-3" /> {{ t("grid.copyColumnName") }} </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-
-    <Dialog v-model:open="rowDetailDialogOpen">
-      <DialogContent v-if="rowDetail" class="sm:max-w-[960px] max-h-[85vh] flex flex-col overflow-hidden">
-        <DialogHeader class="shrink-0 pr-8">
-          <DialogTitle class="flex min-w-0 items-center gap-2 text-sm">
-            <ListTree class="h-4 w-4 shrink-0 text-muted-foreground" />
-            <span class="min-w-0 truncate">{{ t("grid.rowDetailsFor", { row: rowDetail.rowNumber }) }}</span>
-          </DialogTitle>
-        </DialogHeader>
-
-        <div class="flex shrink-0 items-center gap-2 text-xs text-muted-foreground">
-          <span class="whitespace-nowrap">{{ t("grid.columnsCount", { count: rowDetail.fields.length }) }}</span>
-          <div class="relative ml-auto w-56 max-w-full">
-            <Search class="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-            <Input v-model="rowDetailSearch" :placeholder="t('grid.detailSearchPlaceholder')" class="h-7 pl-7 text-xs" />
-          </div>
-        </div>
-
-        <div class="min-h-0 flex-1 overflow-auto rounded border">
-          <table class="w-full min-w-[640px] text-xs">
-            <thead class="sticky top-0 z-10 bg-muted text-muted-foreground">
-              <tr class="border-b">
-                <th class="w-16 px-3 py-2 text-left font-medium">{{ t("grid.fieldIndex") }}</th>
-                <th class="w-56 px-3 py-2 text-left font-medium">{{ t("grid.columnName") }}</th>
-                <th class="px-3 py-2 text-left font-medium">{{ t("grid.cellValue") }}</th>
-                <th class="w-10 px-2 py-2"></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(field, fieldIndex) in filteredRowDetailFields" :key="`${field.colIndex}:${field.column}`" class="border-b align-top last:border-b-0">
-                <td class="px-3 py-2 text-muted-foreground tabular-nums">{{ fieldIndex + 1 }}</td>
-                <td class="px-3 py-2">
-                  <div class="font-medium break-words">{{ field.column }}</div>
-                  <div :class="field.type ? typeColorClass(field.type) : 'text-muted-foreground'" class="mt-1 text-[11px]">
-                    {{ field.type || "-" }}
-                  </div>
-                  <div v-if="field.comment" class="mt-1 text-[11px] text-muted-foreground whitespace-pre-wrap">
-                    {{ field.comment }}
-                  </div>
-                </td>
-                <td class="w-full max-w-0 px-3 py-2">
-                  <div class="mb-1 text-[11px] text-muted-foreground">
-                    {{ field.value === null ? t("grid.nullValue") : t("grid.valueLength") }}:
-                    {{ field.value === null ? "true" : field.length }}
-                  </div>
-                  <a v-if="field.imagePreviewUrl" :href="field.imagePreviewUrl" role="button" class="mb-2 block max-h-48 overflow-hidden rounded border bg-muted/20" @click.prevent="openImagePreview(field.imagePreviewUrl, field.column)">
-                    <img :src="field.imagePreviewUrl" :alt="field.column" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="max-h-48 w-full object-contain" />
-                  </a>
-                  <pre class="max-h-44 overflow-auto rounded border bg-muted/20 p-2 font-mono text-xs whitespace-pre-wrap break-words" :class="{ 'italic text-muted-foreground': field.value === null }">{{ field.rawValuePreview }}</pre>
-                  <div v-if="field.isValuePreviewTruncated" class="mt-1 text-[11px] text-muted-foreground">
-                    {{ t("grid.largeValuePreviewHint", { count: field.rawValuePreview.length }) }}
-                  </div>
-                  <div v-if="field.formattedJson" class="mt-2 space-y-1">
-                    <div class="text-muted-foreground">{{ t("grid.formattedJson") }}</div>
-                    <pre class="max-h-44 overflow-auto rounded border bg-muted/20 p-2 font-mono text-xs whitespace-pre-wrap break-words">{{ field.formattedJson }}</pre>
-                  </div>
-                </td>
-                <td class="px-2 py-2">
-                  <Button variant="ghost" size="icon" class="h-6 w-6" :title="t('grid.copyValue')" @click="copyRowDetailFieldValue(field)">
-                    <Copy class="h-3 w-3" />
-                  </Button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div v-if="rowDetailSearch && !filteredRowDetailFields.length" class="px-3 py-6 text-center text-xs text-muted-foreground">
-            {{ t("grid.detailSearchNoMatch") }}
-          </div>
-        </div>
-
-        <DialogFooter class="shrink-0 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-          <div class="flex flex-wrap gap-2">
-            <Button variant="outline" size="sm" class="h-7 text-xs" @click="copyRowDetailJson"> <Copy class="mr-1.5 h-3 w-3" /> {{ t("grid.copyRow") }} </Button>
-            <Button variant="outline" size="sm" class="h-7 text-xs" @click="copyRowDetailTsv"> <Copy class="mr-1.5 h-3 w-3" /> {{ t("grid.copyRowTsv") }} </Button>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-
-    <Dialog v-model:open="columnDetailDialogOpen">
-      <DialogContent v-if="columnDetail" class="sm:max-w-[900px] max-h-[85vh] flex flex-col overflow-hidden">
-        <DialogHeader class="shrink-0 pr-8">
-          <DialogTitle class="flex min-w-0 items-center gap-2 text-sm">
-            <TableProperties class="h-4 w-4 shrink-0 text-muted-foreground" />
-            <span class="min-w-0 truncate">{{ t("grid.columnDetailsFor", { column: columnDetail.column }) }}</span>
-          </DialogTitle>
-        </DialogHeader>
-
-        <div class="grid shrink-0 gap-3 rounded border bg-muted/20 p-3 text-xs sm:grid-cols-3">
-          <div class="space-y-1">
-            <div class="text-muted-foreground">{{ t("grid.columnName") }}</div>
-            <div class="font-medium break-all">{{ columnDetail.column }}</div>
-          </div>
-          <div class="space-y-1">
-            <div class="text-muted-foreground">{{ t("grid.columnType") }}</div>
-            <div :class="columnDetail.type ? typeColorClass(columnDetail.type) : 'text-muted-foreground'">
-              {{ columnDetail.type || "-" }}
-            </div>
-          </div>
-          <div class="space-y-1">
-            <div class="text-muted-foreground">{{ t("grid.rowCount") }}</div>
-            <div>{{ columnDetail.fields.length }}</div>
-          </div>
-          <div class="space-y-1 sm:col-span-3">
-            <div class="text-muted-foreground">{{ t("grid.columnComment") }}</div>
-            <div class="whitespace-pre-wrap break-words">
-              {{ columnDetail.comment || t("grid.noComment") }}
-            </div>
-          </div>
-        </div>
-
-        <div class="flex shrink-0 items-center gap-2 text-xs text-muted-foreground">
-          <span class="whitespace-nowrap">{{ t("grid.rowCount") }}: {{ columnDetail.fields.length }}</span>
-          <div class="relative ml-auto w-56 max-w-full">
-            <Search class="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-            <Input v-model="columnDetailSearch" :placeholder="t('grid.detailSearchPlaceholder')" class="h-7 pl-7 text-xs" />
-          </div>
-        </div>
-
-        <div class="min-h-0 flex-1 overflow-auto rounded border">
-          <table class="w-full min-w-[500px] text-xs">
-            <thead class="sticky top-0 z-10 bg-muted text-muted-foreground">
-              <tr class="border-b">
-                <th class="w-24 px-3 py-2 text-left font-medium">{{ t("grid.rowNumber") }}</th>
-                <th class="px-3 py-2 text-left font-medium">{{ t("grid.cellValue") }}</th>
-                <th class="w-10 px-2 py-2"></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="field in filteredColumnDetailFields" :key="`${field.rowId}:${field.colIndex}`" class="border-b align-top last:border-b-0">
-                <td class="px-3 py-2 tabular-nums">{{ field.rowNumber }}</td>
-                <td class="w-full max-w-0 px-3 py-2">
-                  <div class="mb-1 text-[11px] text-muted-foreground">
-                    {{ field.value === null ? t("grid.nullValue") : t("grid.valueLength") }}:
-                    {{ field.value === null ? "true" : field.length }}
-                  </div>
-                  <a v-if="field.imagePreviewUrl" :href="field.imagePreviewUrl" role="button" class="mb-2 block max-h-40 overflow-hidden rounded border bg-muted/20" @click.prevent="openImagePreview(field.imagePreviewUrl, field.column)">
-                    <img :src="field.imagePreviewUrl" :alt="field.column" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="max-h-40 w-full object-contain" />
-                  </a>
-                  <pre class="max-h-36 overflow-auto rounded border bg-muted/20 p-2 font-mono text-xs whitespace-pre-wrap break-words" :class="{ 'italic text-muted-foreground': field.value === null }">{{ field.rawValuePreview }}</pre>
-                  <div v-if="field.isValuePreviewTruncated" class="mt-1 text-[11px] text-muted-foreground">
-                    {{ t("grid.largeValuePreviewHint", { count: field.rawValuePreview.length }) }}
-                  </div>
-                  <div v-if="field.formattedJson" class="mt-2 space-y-1">
-                    <div class="text-muted-foreground">{{ t("grid.formattedJson") }}</div>
-                    <pre class="max-h-36 overflow-auto rounded border bg-muted/20 p-2 font-mono text-xs whitespace-pre-wrap break-words">{{ field.formattedJson }}</pre>
-                  </div>
-                </td>
-                <td class="px-2 py-2">
-                  <Button variant="ghost" size="icon" class="h-6 w-6" :title="t('grid.copyValue')" @click="copyColumnDetailFieldValue(field)">
-                    <Copy class="h-3 w-3" />
-                  </Button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div v-if="columnDetailSearch && !filteredColumnDetailFields.length" class="px-3 py-6 text-center text-xs text-muted-foreground">
-            {{ t("grid.detailSearchNoMatch") }}
-          </div>
-        </div>
-
-        <DialogFooter class="shrink-0 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-          <div class="flex flex-wrap gap-2">
-            <Button variant="outline" size="sm" class="h-7 text-xs" @click="copyColumnDetailJson"> <Copy class="mr-1.5 h-3 w-3" /> {{ t("grid.copyColumnValues") }} </Button>
-            <Button variant="outline" size="sm" class="h-7 text-xs" @click="copyColumnDetailTsv"> <Copy class="mr-1.5 h-3 w-3" /> {{ t("grid.copyColumnTsv") }} </Button>
-          </div>
-          <Button variant="ghost" size="sm" class="h-7 text-xs" @click="copyColumnDetailColumnName"> <Copy class="mr-1.5 h-3 w-3" /> {{ t("grid.copyColumnName") }} </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-
-    <Dialog v-model:open="bulkEditDialogOpen">
-      <DialogContent class="sm:max-w-[420px]">
-        <DialogHeader>
-          <DialogTitle>{{ t("grid.bulkEditTitle") }}</DialogTitle>
-        </DialogHeader>
-        <div class="space-y-2">
-          <p class="text-sm text-muted-foreground">
-            {{ t("grid.bulkEditDescription", { count: selectedCellCount }) }}
-          </p>
-          <textarea
-            v-model="bulkEditValue"
-            autocapitalize="off"
-            autocomplete="off"
-            autocorrect="off"
-            spellcheck="false"
-            rows="5"
-            class="min-h-24 w-full min-w-0 resize-y rounded-[6px] border border-input bg-transparent px-2.5 py-1.5 text-base outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 md:text-sm"
-            :placeholder="t('grid.bulkEditValuePlaceholder')"
-            @keydown.ctrl.enter.prevent="applyBulkEditValue"
-            @keydown.meta.enter.prevent="applyBulkEditValue"
-          />
-        </div>
-        <DialogFooter>
-          <Button variant="outline" @click="bulkEditDialogOpen = false">{{ t("dangerDialog.cancel") }}</Button>
-          <Button @click="applyBulkEditValue">{{ t("grid.applyBulkEdit") }}</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DataGridBulkEditDialog v-if="bulkEditDialogMounted" v-model:open="bulkEditDialogOpen" v-model:value="bulkEditValue" :selected-cell-count="selectedCellCount" @apply="applyBulkEditValue" />
 
     <!-- SQL Preview panel for pending data changes -->
     <div v-if="showSqlPreview" class="h-52 shrink-0 border-t">
@@ -11584,9 +8733,9 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
       :close-on-confirm="false"
       @confirm="confirmDropAllMongoIndexes"
     />
-    <ImagePreviewDialog v-model:open="imagePreviewOpen" :src="imagePreviewSrc" :title="imagePreviewTitle" />
+    <ImagePreviewDialog v-if="imagePreviewMounted" v-model:open="imagePreviewOpen" :src="imagePreviewSrc" :title="imagePreviewTitle" />
     <component v-if="previewDialogOpen && previewDialogConfig" :is="previewDialogConfig.component" v-model:open="previewDialogOpen" v-bind="previewDialogConfig.props" />
-    <ExportProgressDialog v-model:open="exportProgressDialog" v-bind="exportProgressState" :disable-cancel="!exportCancelHandler" @cancel="cancelActiveExport" />
+    <ExportProgressDialog v-if="exportProgressDialogMounted" v-model:open="exportProgressDialog" v-bind="exportProgressState" :disable-cancel="!exportCancelHandler" @cancel="cancelActiveExport" />
   </div>
 </template>
 
@@ -11786,212 +8935,6 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
   min-width: 0;
 }
 
-.data-grid-topbar-condition-label {
-  display: inline-flex;
-  flex-shrink: 0;
-  max-width: 5rem;
-  overflow: hidden;
-  white-space: nowrap;
-  font-family: var(--data-grid-condition-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.5rem;
-  user-select: none;
-  opacity: 1;
-  transform: translateX(0);
-  transition:
-    max-width var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing),
-    opacity 240ms ease 60ms,
-    transform var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing),
-    color 240ms ease;
-}
-
-.data-grid-topbar-condition-label--where {
-  color: rgb(37 99 235);
-}
-
-.data-grid-topbar-condition-label--order {
-  color: rgb(234 88 12);
-}
-
-:global(.dark) [data-grid-root] .data-grid-topbar-condition-label--where {
-  color: rgb(96 165 250);
-}
-
-:global(.dark) [data-grid-root] .data-grid-topbar-condition-label--order {
-  color: rgb(251 146 60);
-}
-
-.data-grid-topbar-condition-label--compact {
-  max-width: 0;
-  opacity: 0;
-  transform: translateX(-4px);
-}
-
-.data-grid-topbar-condition-input,
-.data-grid-topbar-condition-measure {
-  font-family: var(--data-grid-condition-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  font-variant-ligatures: none;
-  font-feature-settings:
-    "liga" 0,
-    "calt" 0;
-}
-
-.data-grid-topbar-condition-input {
-  width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-  padding: 0 0.125rem;
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: pre;
-  border: 0;
-  border-radius: 0;
-  appearance: none;
-  scrollbar-width: none;
-}
-
-[data-grid-root].data-grid--dark .data-grid-topbar-condition-input {
-  color: rgb(244, 244, 245);
-  background-color: transparent !important;
-}
-
-.data-grid-topbar-condition-input::-webkit-scrollbar {
-  display: none;
-}
-
-.data-grid-topbar-condition-icon-control {
-  align-self: center;
-  margin-top: 0;
-}
-
-.data-grid-topbar-condition-floating-controls {
-  top: var(--data-grid-condition-controls-top);
-  will-change: transform;
-}
-
-.data-grid-topbar-condition-pane--expanded {
-  --data-grid-condition-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  position: fixed;
-  z-index: 80;
-  right: auto;
-  bottom: auto;
-  box-sizing: border-box;
-  padding: 0.1875rem 0.5rem 0.1875rem 0.5rem;
-  overflow: hidden;
-  background: color-mix(in oklab, var(--background) 96%, var(--muted) 4%);
-  box-shadow:
-    inset 0 -1px 0 var(--border),
-    0 8px 16px rgb(15 23 42 / 8%);
-  transition:
-    height 150ms ease,
-    box-shadow 150ms ease;
-  --data-grid-expanded-scrollbar-offset: 8px;
-  --data-grid-condition-controls-top: 0.125rem;
-  --data-grid-condition-input-top: 0.125rem;
-  --data-grid-condition-prefix-indent: 0px;
-  --data-grid-condition-suffix-width: 0px;
-}
-
-[data-grid-root].data-grid--dark .data-grid-topbar-condition-pane--expanded {
-  background: rgb(24, 24, 27) !important;
-  color: rgb(244, 244, 245);
-  box-shadow:
-    inset 0 -1px 0 rgb(63, 63, 70),
-    0 8px 16px rgb(0 0 0 / 32%);
-}
-
-.data-grid-topbar-condition-input--expanded {
-  top: var(--data-grid-condition-input-top);
-  right: 0.5rem;
-  bottom: 0.125rem;
-  left: 0.5rem;
-  height: auto;
-  line-height: 1.5rem;
-  margin-left: 0;
-  width: calc(100% - 1rem + var(--data-grid-expanded-scrollbar-offset));
-  max-width: none;
-  margin-right: calc(-1 * var(--data-grid-expanded-scrollbar-offset));
-  padding: 0 calc(var(--data-grid-condition-suffix-width) + 0.5rem) 0.0625rem 0.125rem;
-  text-indent: var(--data-grid-condition-prefix-indent);
-  overflow-x: hidden;
-  overflow-y: auto;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  scrollbar-width: thin;
-}
-
-.data-grid-topbar-condition-input--expanded::-webkit-scrollbar {
-  display: initial;
-  width: 8px;
-}
-
-.data-grid-topbar-condition-input::placeholder {
-  color: transparent;
-  transition: color 240ms ease;
-}
-
-.data-grid-topbar-condition-input--where.data-grid-topbar-condition-input--compact::placeholder {
-  color: rgb(59 130 246 / 70%);
-}
-
-.data-grid-topbar-condition-input--order.data-grid-topbar-condition-input--compact::placeholder {
-  color: rgb(249 115 22 / 70%);
-}
-
-:global(.dark) [data-grid-root] .data-grid-topbar-condition-input--where.data-grid-topbar-condition-input--compact::placeholder {
-  color: rgb(147 197 253 / 70%);
-}
-
-:global(.dark) [data-grid-root] .data-grid-topbar-condition-input--order.data-grid-topbar-condition-input--compact::placeholder {
-  color: rgb(253 186 116 / 70%);
-}
-
-.data-grid-topbar-action-button {
-  align-items: center;
-  justify-content: center;
-  max-width: 9rem;
-  min-width: 1.25rem;
-  gap: 0;
-  line-height: 1;
-  overflow: hidden;
-  transition:
-    max-width var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing),
-    min-width var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing),
-    padding-inline var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing),
-    color 220ms ease,
-    background-color 220ms ease,
-    border-color 220ms ease;
-}
-
-.data-grid-topbar-action-button--compact {
-  max-width: 1.25rem;
-  min-width: 1.25rem;
-  padding-inline: 0;
-}
-
-.data-grid-topbar-action-button--commit.data-grid-topbar-action-button--compact {
-  overflow: visible;
-}
-
-.data-grid-topbar-action-icon {
-  display: block;
-  align-self: center;
-  flex-shrink: 0;
-  transition:
-    margin-inline-end var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing),
-    transform var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing);
-}
-
-.data-grid-topbar-action-button:not(.data-grid-topbar-action-button--compact) .data-grid-topbar-action-icon {
-  margin-inline-end: 0.25rem;
-}
-
 .data-grid-scroller,
 .data-grid-header-row,
 .data-grid-transpose-header,
@@ -11999,33 +8942,6 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
   font-size: var(--dbx-table-font-size, 13px);
 }
 
-.data-grid-topbar-action-button--compact .data-grid-topbar-action-icon {
-  margin-inline-end: 0;
-  transform: scale(0.96);
-}
-
-.data-grid-topbar-action-label {
-  display: inline-flex;
-  align-items: center;
-  height: 1rem;
-  max-width: 8rem;
-  overflow: hidden;
-  white-space: nowrap;
-  line-height: 1;
-  opacity: 1;
-  transform: translateX(0);
-  transition:
-    max-width var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing),
-    opacity 240ms ease 60ms,
-    transform var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing);
-}
-
-.data-grid-topbar-action-label--compact {
-  max-width: 0;
-  opacity: 0;
-  transform: translateX(-4px);
-}
-
 .data-grid-topbar-scroll {
   scrollbar-width: none;
   scrollbar-gutter: auto;
diff --git a/apps/desktop/src/components/grid/DataGridBulkEditDialog.vue b/apps/desktop/src/components/grid/DataGridBulkEditDialog.vue
new file mode 100644
index 0000000000..4af477d989
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridBulkEditDialog.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+
+const { t } = useI18n();
+const open = defineModel<boolean>("open", { default: false });
+const value = defineModel<string>("value", { default: "" });
+defineProps<{ selectedCellCount: number }>();
+const emit = defineEmits<{ apply: [] }>();
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent class="sm:max-w-[420px]">
+      <DialogHeader
+        ><DialogTitle>{{ t("grid.bulkEditTitle") }}</DialogTitle></DialogHeader
+      >
+      <div class="space-y-2">
+        <p class="text-sm text-muted-foreground">{{ t("grid.bulkEditDescription", { count: selectedCellCount }) }}</p>
+        <textarea
+          v-model="value"
+          autocapitalize="off"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
+          rows="5"
+          class="min-h-24 w-full min-w-0 resize-y rounded-[6px] border border-input bg-transparent px-2.5 py-1.5 text-base outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 md:text-sm"
+          :placeholder="t('grid.bulkEditValuePlaceholder')"
+          @keydown.ctrl.enter.prevent="emit('apply')"
+          @keydown.meta.enter.prevent="emit('apply')"
+        />
+      </div>
+      <DialogFooter
+        ><Button variant="outline" @click="open = false">{{ t("dangerDialog.cancel") }}</Button
+        ><Button @click="emit('apply')">{{ t("grid.applyBulkEdit") }}</Button></DialogFooter
+      >
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/apps/desktop/src/components/grid/DataGridCellDetailDialog.vue b/apps/desktop/src/components/grid/DataGridCellDetailDialog.vue
new file mode 100644
index 0000000000..7f2dd0f13b
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridCellDetailDialog.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from "vue";
+import { Code2, Copy, Eye, Info, Pencil, Upload } from "@lucide/vue";
+import { useI18n } from "vue-i18n";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { useCellDetailEditor, type UseCellDetailEditorReturn } from "@/composables/useCellDetailEditor";
+import { useTheme } from "@/composables/useTheme";
+import { useSettingsStore } from "@/stores/settingsStore";
+import { BINARY_CELL_DOWNLOAD_MODES, type BinaryCellDownloadMode } from "@/lib/dataGrid/binaryCellDownload";
+import { isGeometryColumnType } from "@/lib/dataGrid/cellDetailPresentation";
+import { isHexGeometry, renderWktOnCanvas } from "@/lib/dataGrid/geometryPreview";
+import type { DataGridCellDetail } from "@/lib/dataGrid/dataGridDetail";
+
+const { t } = useI18n();
+const settingsStore = useSettingsStore();
+const { isDark, themePalette } = useTheme();
+
+const props = defineProps<{
+  detail: DataGridCellDetail | null;
+  typeColorClass: (type: string) => string;
+  openImagePreview: (src: string, title: string) => void;
+  copyText: (text: string) => void;
+  canDownloadBinaryValue: (detail: DataGridCellDetail | null) => boolean;
+  downloadBinaryValue: (detail: DataGridCellDetail | null, mode: BinaryCellDownloadMode) => void | Promise<void>;
+}>();
+
+const emit = defineEmits<{
+  edit: [];
+}>();
+
+const open = defineModel<boolean>("open", { default: false });
+const geometryPreviewOpen = ref(false);
+const geometryCanvas = ref<HTMLCanvasElement | null>(null);
+const jsonPreviewContainer = ref<HTMLElement>();
+let jsonPreviewEditor: UseCellDetailEditorReturn | null = null;
+
+const jsonFormatted = computed(() => settingsStore.editorSettings.cellDetailJsonFormatted);
+const jsonView = computed(() => jsonFormatted.value && !!props.detail?.formattedJson);
+
+function toggleJsonFormatted() {
+  settingsStore.updateEditorSettings({ cellDetailJsonFormatted: !jsonFormatted.value });
+}
+
+function copyCurrentValue() {
+  const detail = props.detail;
+  if (!detail) return;
+  if (jsonView.value && detail.formattedJson) {
+    props.copyText(detail.formattedJson);
+    return;
+  }
+  props.copyText(detail.value === null ? "" : detail.rawValue);
+}
+
+function copyColumnName() {
+  if (props.detail) props.copyText(props.detail.column);
+}
+
+watch(open, (isOpen) => {
+  if (!isOpen) geometryPreviewOpen.value = false;
+});
+
+watch(
+  () => props.detail,
+  () => {
+    geometryPreviewOpen.value = false;
+  },
+);
+
+watch(geometryPreviewOpen, async (isOpen) => {
+  if (!isOpen) return;
+  await nextTick();
+  const canvas = geometryCanvas.value;
+  const detail = props.detail;
+  if (canvas && detail?.value !== null && detail?.value !== undefined) {
+    renderWktOnCanvas(canvas, String(detail.value));
+  }
+});
+
+watch(jsonPreviewContainer, async (element) => {
+  if (element && !jsonPreviewEditor) {
+    jsonPreviewEditor = useCellDetailEditor({
+      language: "json",
+      readOnly: true,
+      editorTheme: () => settingsStore.editorSettings.theme,
+      appAppearance: () => (isDark.value ? "dark" : "light"),
+      appPalette: () => themePalette.value,
+      fontSize: () => settingsStore.editorSettings.fontSize,
+      fontFamily: () => settingsStore.editorSettings.fontFamily,
+    });
+    await jsonPreviewEditor.create(element, props.detail?.formattedJson ?? "", "json");
+  } else if (!element && jsonPreviewEditor) {
+    jsonPreviewEditor.destroy();
+    jsonPreviewEditor = null;
+  }
+});
+
+watch(
+  () => props.detail?.formattedJson ?? "",
+  (value) => jsonPreviewEditor?.setValue(value, "json"),
+);
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent v-if="detail" class="sm:max-w-[840px] max-h-[85vh] flex flex-col overflow-hidden">
+      <DialogHeader class="shrink-0 pr-8">
+        <DialogTitle class="flex min-w-0 items-center gap-2 text-sm">
+          <Info class="h-4 w-4 shrink-0 text-muted-foreground" />
+          <span class="min-w-0 truncate">{{ t("grid.cellDetails") }}</span>
+        </DialogTitle>
+      </DialogHeader>
+
+      <div class="min-h-0 flex-1 overflow-auto pr-1 text-xs space-y-4">
+        <div class="grid gap-3 rounded border bg-muted/20 p-3 sm:grid-cols-2 lg:grid-cols-4">
+          <div class="space-y-1">
+            <div class="text-muted-foreground">{{ t("grid.columnName") }}</div>
+            <div class="font-medium break-all">{{ detail.column }}</div>
+          </div>
+          <div class="space-y-1">
+            <div class="text-muted-foreground">{{ t("grid.rowNumber") }}</div>
+            <div>{{ detail.rowNumber }}</div>
+          </div>
+          <div class="space-y-1">
+            <div class="text-muted-foreground">{{ t("grid.columnType") }}</div>
+            <div :class="detail.type ? typeColorClass(detail.type) : 'text-muted-foreground'">{{ detail.type || "-" }}</div>
+          </div>
+          <div class="space-y-1">
+            <div class="text-muted-foreground">{{ t("grid.valueLength") }}</div>
+            <div>{{ detail.length }}</div>
+          </div>
+        </div>
+
+        <div class="space-y-1">
+          <div class="text-muted-foreground">{{ t("grid.columnComment") }}</div>
+          <div class="whitespace-pre-wrap break-words">{{ detail.comment || t("grid.noComment") }}</div>
+        </div>
+
+        <div class="space-y-2">
+          <div class="flex items-center justify-between gap-2">
+            <div class="text-muted-foreground">{{ t("grid.cellValue") }}</div>
+            <div class="flex items-center gap-1">
+              <Button v-if="detail.formattedJson" :variant="jsonView ? 'secondary' : 'ghost'" size="sm" class="h-6 gap-1 px-2 text-xs" :title="t('grid.formattedJson')" @click="toggleJsonFormatted">
+                <Code2 class="h-3 w-3" />
+                {{ t("grid.formattedJson") }}
+              </Button>
+              <Button v-if="detail.isEditable" variant="ghost" size="icon" class="h-6 w-6" :title="t('grid.editValue')" @click="emit('edit')">
+                <Pencil class="h-3 w-3" />
+              </Button>
+              <Button variant="ghost" size="icon" class="h-6 w-6" :title="t('grid.copyValue')" @click="copyCurrentValue">
+                <Copy class="h-3 w-3" />
+              </Button>
+              <DropdownMenu v-if="canDownloadBinaryValue(detail)">
+                <DropdownMenuTrigger as-child>
+                  <Button variant="ghost" size="icon" class="h-6 w-6" :title="t('grid.downloadBinaryValue')">
+                    <Upload class="h-3 w-3" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" class="w-44">
+                  <DropdownMenuItem v-for="mode in BINARY_CELL_DOWNLOAD_MODES" :key="mode" @click="downloadBinaryValue(detail, mode)">
+                    {{ t(`grid.binaryDownload.${mode}`) }}
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <!-- Unsupported geometry values can arrive as a hex fallback that cannot be rendered. -->
+              <Popover v-if="isGeometryColumnType(detail.type) && detail.value !== null && !isHexGeometry(detail.value as string)" v-model:open="geometryPreviewOpen">
+                <PopoverTrigger as-child>
+                  <Button variant="ghost" size="icon" class="h-6 w-6" :title="t('grid.geometryPreview')">
+                    <Eye class="h-3 w-3" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent class="w-auto p-1.5" align="end">
+                  <canvas v-show="geometryPreviewOpen" ref="geometryCanvas" width="400" height="280" class="block rounded" />
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+          <a v-if="detail.imagePreviewUrl" :href="detail.imagePreviewUrl" role="button" class="block max-h-72 overflow-hidden rounded border bg-muted/20" @click.prevent="openImagePreview(detail.imagePreviewUrl, detail.column)">
+            <img :src="detail.imagePreviewUrl" :alt="detail.column" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="max-h-72 w-full object-contain" />
+          </a>
+          <div v-if="jsonView && detail.formattedJson" ref="jsonPreviewContainer" data-cell-detail-editor-root class="h-[44vh] min-h-60 overflow-hidden rounded border bg-muted/20 p-3" />
+          <pre v-else class="max-h-[44vh] overflow-auto rounded border bg-muted/20 p-3 font-mono text-xs whitespace-pre-wrap break-words" :class="{ 'italic text-muted-foreground': detail.value === null }">{{ detail.rawValuePreview }}</pre>
+          <div v-if="detail.isValuePreviewTruncated && !jsonView" class="text-[11px] text-muted-foreground">
+            {{ t("grid.largeValuePreviewHint", { count: detail.rawValuePreview.length }) }}
+          </div>
+        </div>
+      </div>
+
+      <DialogFooter class="shrink-0 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <div class="flex flex-wrap gap-2" />
+        <Button variant="ghost" size="sm" class="h-7 text-xs" @click="copyColumnName">
+          <Copy class="mr-1.5 h-3 w-3" />
+          {{ t("grid.copyColumnName") }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/apps/desktop/src/components/grid/DataGridCellDetailPanel.vue b/apps/desktop/src/components/grid/DataGridCellDetailPanel.vue
new file mode 100644
index 0000000000..dba473921d
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridCellDetailPanel.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { toRef } from "vue";
+import { Code2, Copy, Eye, Pencil, Upload, X } from "@lucide/vue";
+import { useI18n } from "vue-i18n";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { TabsContent } from "@/components/ui/tabs";
+import TemporalCellEditor from "@/components/grid/TemporalCellEditor.vue";
+import { useDataGridCellDetail } from "@/composables/useDataGridCellDetail";
+import { BINARY_CELL_DOWNLOAD_MODES, type BinaryCellDownloadMode } from "@/lib/dataGrid/binaryCellDownload";
+import { isGeometryColumnType } from "@/lib/dataGrid/cellDetailPresentation";
+import { isHexGeometry } from "@/lib/dataGrid/geometryPreview";
+import type { DataGridCellDetail } from "@/lib/dataGrid/dataGridDetail";
+import type { TemporalCellEditorConfig } from "@/lib/dataGrid/dataGridTemporalEditor";
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  detail: DataGridCellDetail;
+  panelIsBottom: boolean;
+  metadataCollapsed: boolean;
+  valueFillsHeight: boolean;
+  editing: boolean;
+  editorStyle?: Record<string, string>;
+  temporalEditorConfig?: TemporalCellEditorConfig;
+  sideJsonView: boolean;
+  showCompactJson: boolean;
+  canCompactJson: boolean;
+  typeColorClass: (type: string) => string;
+  canDownloadBinaryValue: (detail: DataGridCellDetail | null) => boolean;
+  downloadBinaryValue: (detail: DataGridCellDetail | null, mode: BinaryCellDownloadMode) => void | Promise<void>;
+  openImagePreview: (src: string, title: string) => void;
+  canCopySqlCondition: () => boolean;
+}>();
+
+const detailEditValue = defineModel<string>("value", { default: "" });
+
+const emit = defineEmits<{
+  startEdit: [];
+  compactJson: [];
+  toggleFormatted: [];
+  copyValue: [];
+  commit: [];
+  cancel: [];
+  setNull: [];
+  copyColumnName: [];
+  copySqlCondition: [];
+}>();
+
+const { geometryPreviewOpen, geometryCanvas, detailsEditorContainer, sideJsonPreviewContainer, openSearch } = useDataGridCellDetail({ detail: toRef(props, "detail"), editValue: detailEditValue, onCancel: () => emit("cancel") });
+void geometryCanvas;
+void detailsEditorContainer;
+void sideJsonPreviewContainer;
+
+defineExpose({ openSearch });
+</script>
+
+<template>
+  <TabsContent value="details" class="m-0 min-h-0 flex-1 flex flex-col">
+    <div data-native-clipboard class="flex-1 min-h-0 overflow-auto px-3 pt-3 text-xs" :class="[valueFillsHeight ? 'flex flex-col gap-3' : 'space-y-3', editing && !panelIsBottom ? 'pb-1' : 'pb-3']">
+      <div v-if="panelIsBottom && !metadataCollapsed" class="grid grid-cols-[minmax(180px,1.6fr)_repeat(4,minmax(74px,0.55fr))_minmax(160px,1fr)] gap-3 rounded border bg-muted/20 p-2">
+        <div class="min-w-0 space-y-1">
+          <div class="text-muted-foreground">{{ t("grid.columnName") }}</div>
+          <div class="truncate font-medium" :title="detail.column">{{ detail.column }}</div>
+        </div>
+        <div class="space-y-1">
+          <div class="text-muted-foreground">{{ t("grid.rowNumber") }}</div>
+          <div>{{ detail.rowNumber }}</div>
+        </div>
+        <div class="min-w-0 space-y-1">
+          <div class="text-muted-foreground">{{ t("grid.columnType") }}</div>
+          <div class="truncate" :class="detail.type ? typeColorClass(detail.type) : 'text-muted-foreground'" :title="detail.type || '-'">{{ detail.type || "-" }}</div>
+        </div>
+        <div class="space-y-1">
+          <div class="text-muted-foreground">{{ t("grid.nullValue") }}</div>
+          <div>{{ detail.value === null ? "true" : "false" }}</div>
+        </div>
+        <div class="space-y-1">
+          <div class="text-muted-foreground">{{ t("grid.valueLength") }}</div>
+          <div>{{ detail.length }}</div>
+        </div>
+        <div class="min-w-0 space-y-1">
+          <div class="text-muted-foreground">{{ t("grid.columnComment") }}</div>
+          <div class="truncate" :title="detail.comment || t('grid.noComment')">{{ detail.comment || t("grid.noComment") }}</div>
+        </div>
+      </div>
+      <template v-else-if="!metadataCollapsed && !editing">
+        <div class="space-y-1">
+          <div class="text-muted-foreground">{{ t("grid.columnName") }}</div>
+          <div class="font-medium break-all">{{ detail.column }}</div>
+        </div>
+        <div class="grid grid-cols-2 gap-3">
+          <div class="space-y-1">
+            <div class="text-muted-foreground">{{ t("grid.rowNumber") }}</div>
+            <div>{{ detail.rowNumber }}</div>
+          </div>
+          <div class="space-y-1">
+            <div class="text-muted-foreground">{{ t("grid.columnType") }}</div>
+            <div :class="detail.type ? typeColorClass(detail.type) : 'text-muted-foreground'">{{ detail.type || "-" }}</div>
+          </div>
+          <div class="space-y-1">
+            <div class="text-muted-foreground">{{ t("grid.nullValue") }}</div>
+            <div>{{ detail.value === null ? "true" : "false" }}</div>
+          </div>
+          <div class="space-y-1">
+            <div class="text-muted-foreground">{{ t("grid.valueLength") }}</div>
+            <div>{{ detail.length }}</div>
+          </div>
+        </div>
+        <div class="space-y-1">
+          <div class="text-muted-foreground">{{ t("grid.columnComment") }}</div>
+          <div class="whitespace-pre-wrap break-words">{{ detail.comment || t("grid.noComment") }}</div>
+        </div>
+      </template>
+
+      <div class="space-y-1" :class="[{ 'min-h-0 flex flex-col': valueFillsHeight }, valueFillsHeight && !(detail.imagePreviewUrl && !editing) ? 'flex-1' : '', detail.imagePreviewUrl && !editing ? 'shrink-0' : '']">
+        <div class="flex min-h-5 items-center justify-between gap-2">
+          <div class="text-muted-foreground">{{ t("grid.cellValue") }}</div>
+          <div class="flex items-center gap-1">
+            <Button v-if="showCompactJson" variant="ghost" size="sm" class="h-5 gap-1 px-1.5 text-xs" :disabled="!canCompactJson" :title="t('grid.compactJson')" @click="emit('compactJson')"><Code2 class="h-3 w-3" />{{ t("grid.compactJson") }}</Button>
+            <Button v-if="!editing && detail.formattedJson" :variant="sideJsonView ? 'secondary' : 'ghost'" size="sm" class="h-5 gap-1 px-1.5 text-xs" :title="t('grid.formattedJson')" @click="emit('toggleFormatted')"><Code2 class="h-3 w-3" />{{ t("grid.formattedJson") }}</Button>
+            <Button v-if="!editing && detail.isEditable" variant="ghost" size="icon" class="h-5 w-5" :title="t('grid.editValue')" @click="emit('startEdit')"><Pencil class="h-3 w-3" /></Button>
+            <Button v-if="!editing" variant="ghost" size="icon" class="h-5 w-5" :title="t('grid.copyValue')" @click="emit('copyValue')"><Copy class="h-3 w-3" /></Button>
+            <DropdownMenu v-if="!editing && canDownloadBinaryValue(detail)"
+              ><DropdownMenuTrigger as-child
+                ><Button variant="ghost" size="icon" class="h-5 w-5" :title="t('grid.downloadBinaryValue')"><Upload class="h-3 w-3" /></Button></DropdownMenuTrigger
+              ><DropdownMenuContent align="end" class="w-44"
+                ><DropdownMenuItem v-for="mode in BINARY_CELL_DOWNLOAD_MODES" :key="mode" @click="downloadBinaryValue(detail, mode)">{{ t(`grid.binaryDownload.${mode}`) }}</DropdownMenuItem></DropdownMenuContent
+              ></DropdownMenu
+            >
+            <Popover v-if="isGeometryColumnType(detail.type) && detail.value !== null && !editing && !isHexGeometry(detail.value as string)" v-model:open="geometryPreviewOpen"
+              ><PopoverTrigger as-child
+                ><Button variant="ghost" size="icon" class="h-5 w-5" :title="t('grid.geometryPreview')"><Eye class="h-3 w-3" /></Button></PopoverTrigger
+              ><PopoverContent class="w-auto p-1.5" align="end"><canvas v-show="geometryPreviewOpen" ref="geometryCanvas" width="400" height="280" class="block rounded" /></PopoverContent
+            ></Popover>
+          </div>
+        </div>
+        <div v-if="detail.imagePreviewUrl && !editing" class="shrink-0 space-y-1.5">
+          <div class="text-muted-foreground">{{ t("grid.imagePreview") }}</div>
+          <a :href="detail.imagePreviewUrl" role="button" class="flex overflow-hidden rounded border bg-muted/20" :class="panelIsBottom ? 'max-h-28' : 'max-h-40'" @click.prevent="openImagePreview(detail.imagePreviewUrl, detail.column)"
+            ><img :src="detail.imagePreviewUrl" :alt="detail.column" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="max-h-full w-full object-contain"
+          /></a>
+        </div>
+        <template v-if="editing"
+          ><div class="min-h-0 flex-1" :style="editorStyle">
+            <TemporalCellEditor v-if="temporalEditorConfig" v-model="detailEditValue" :kind="temporalEditorConfig.kind" :fraction-precision="temporalEditorConfig.fractionPrecision" variant="inline" :commit-on-close="false" @cancel="emit('cancel')" @commit="emit('commit')" />
+            <div v-else ref="detailsEditorContainer" data-cell-detail-editor-root class="min-h-0 h-full w-full rounded border overflow-hidden" />
+          </div>
+          <div v-if="!panelIsBottom" class="flex shrink-0 gap-1 py-0.5">
+            <Button size="sm" class="h-6 text-xs" @click="emit('commit')">{{ t("dangerDialog.confirm") }}</Button
+            ><Button variant="outline" size="sm" class="h-6 text-xs" @click="emit('cancel')">{{ t("dangerDialog.cancel") }}</Button>
+          </div></template
+        >
+        <div
+          v-else-if="detail.formattedJson"
+          ref="sideJsonPreviewContainer"
+          data-cell-detail-editor-root
+          class="overflow-hidden rounded border bg-muted/20 p-2"
+          :class="[{ 'cursor-text': detail.isEditable }, valueFillsHeight ? 'min-h-0 flex-1' : 'h-72 max-h-[42vh]']"
+          @dblclick.capture="emit('startEdit')"
+        />
+        <pre
+          v-else
+          class="overflow-auto rounded border bg-muted/20 p-2 font-mono text-xs whitespace-pre-wrap break-words cursor-pointer hover:border-primary/50"
+          :class="[{ 'cursor-text': detail.isEditable }, panelIsBottom && detail.imagePreviewUrl ? 'min-h-24 max-h-32 shrink-0' : '', valueFillsHeight && !detail.imagePreviewUrl ? 'min-h-0 flex-1' : '']"
+          @dblclick="emit('startEdit')"
+          >{{ detail.rawValuePreview }}</pre
+        >
+        <div v-if="detail.isValuePreviewTruncated && !sideJsonView" class="text-[11px] text-muted-foreground">{{ t("grid.largeValuePreviewHint", { count: detail.rawValuePreview.length }) }}</div>
+      </div>
+    </div>
+    <div class="border-t flex gap-1 overflow-hidden bg-background p-1.5" :class="panelIsBottom ? 'shrink-0 items-center' : 'shrink-0 flex-col'">
+      <div v-if="editing && panelIsBottom" class="flex shrink-0 gap-1 mr-auto">
+        <Button size="sm" class="h-6 text-xs" @click="emit('commit')">{{ t("dangerDialog.confirm") }}</Button
+        ><Button variant="outline" size="sm" class="h-6 text-xs" @click="emit('cancel')">{{ t("dangerDialog.cancel") }}</Button>
+      </div>
+      <div class="flex gap-1" :class="panelIsBottom ? 'ml-auto shrink-0 justify-end' : 'flex-col'">
+        <Button v-if="detail.isEditable && detail.value !== null" variant="ghost" size="sm" class="h-6 justify-start text-xs" @click="emit('setNull')"><X class="w-3 h-3 mr-2" />{{ t("grid.setNull") }}</Button
+        ><Button variant="ghost" size="sm" class="h-6 justify-start text-xs" @click="emit('copyColumnName')"><Copy class="w-3 h-3 mr-2" />{{ t("grid.copyColumnName") }}</Button
+        ><Button variant="ghost" size="sm" class="h-6 justify-start text-xs" :disabled="!canCopySqlCondition()" @click="emit('copySqlCondition')"><Code2 class="w-3 h-3 mr-2" />{{ t("grid.copySqlCondition") }}</Button>
+      </div>
+    </div>
+  </TabsContent>
+</template>
diff --git a/apps/desktop/src/components/grid/DataGridColumnHeader.vue b/apps/desktop/src/components/grid/DataGridColumnHeader.vue
new file mode 100644
index 0000000000..5dbf51c9c7
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridColumnHeader.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { CSSProperties, HTMLAttributes } from "vue";
+import { Copy } from "@lucide/vue";
+import LightTooltip from "@/components/ui/LightTooltip.vue";
+
+defineProps<{
+  name: string;
+  actualColumnIndex: number;
+  visibleColumnIndex: number;
+  selected?: boolean;
+  searchMatch?: boolean;
+  dark?: boolean;
+  tooltipDisabled?: boolean;
+  columnType?: string;
+  columnComment?: string;
+  tooltipColumnType?: string;
+  tooltipColumnComment?: string;
+  typeClass?: HTMLAttributes["class"];
+  dragClass?: HTMLAttributes["class"];
+  columnStyle?: CSSProperties;
+  copyColumnNameLabel: string;
+  columnNameLabel: string;
+  columnTypeLabel: string;
+  columnCommentLabel: string;
+}>();
+
+const emit = defineEmits<{
+  pointerdown: [event: PointerEvent];
+  clickCapture: [event: MouseEvent];
+  click: [event: MouseEvent];
+  contextmenu: [event: MouseEvent];
+  resizeStart: [event: MouseEvent];
+  autoFit: [];
+  copyName: [];
+}>();
+</script>
+
+<template>
+  <LightTooltip :text="name" side="bottom" :side-offset="4" :disabled="tooltipDisabled">
+    <div
+      class="data-grid-header-cell shrink-0 px-2 py-1.5 border-r border-border whitespace-nowrap hover:bg-gray-200 dark:hover:bg-gray-800 select-none relative overflow-hidden"
+      :class="[dark && 'data-grid-header-cell--dark', selected && 'data-grid-header-cell--selected outline outline-primary -outline-offset-1', searchMatch && 'bg-amber-500/20 ring-1 ring-inset ring-amber-500/40', dragClass]"
+      :style="columnStyle"
+      :data-grid-column-index="actualColumnIndex"
+      :data-visible-col-index="visibleColumnIndex"
+      @pointerdown="emit('pointerdown', $event)"
+      @click.capture="emit('clickCapture', $event)"
+      @click="emit('click', $event)"
+      @contextmenu="emit('contextmenu', $event)"
+    >
+      <span class="flex min-w-0 items-center gap-1 overflow-hidden">
+        <span class="flex min-w-0 flex-1 flex-col overflow-hidden">
+          <span class="min-w-0 truncate leading-4">{{ name }}</span>
+          <span v-if="columnType" class="min-w-0 truncate text-[10px] font-normal leading-3" :class="typeClass" :title="columnType">{{ columnType }}</span>
+          <span v-if="columnComment" class="min-w-0 truncate text-[10px] font-normal leading-3 text-muted-foreground" :title="columnComment">{{ columnComment }}</span>
+        </span>
+        <slot name="actions" />
+      </span>
+      <div data-column-resize-handle class="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-primary/30" @mousedown.stop="emit('resizeStart', $event)" @click.stop.prevent @dblclick.stop="emit('autoFit')" />
+    </div>
+    <template #content>
+      <div class="grid min-w-56 grid-cols-[auto_minmax(0,1fr)] gap-x-2 gap-y-1 px-3 py-2">
+        <span class="text-background/70">{{ columnNameLabel }}</span>
+        <span class="flex min-w-0 items-center gap-2">
+          <span class="min-w-0 flex-1 truncate font-mono">{{ name }}</span>
+          <button type="button" class="flex h-5 w-5 shrink-0 items-center justify-center rounded hover:bg-background/10" :title="copyColumnNameLabel" @click.stop="emit('copyName')">
+            <Copy class="h-3 w-3" />
+          </button>
+        </span>
+        <template v-if="tooltipColumnType ?? columnType">
+          <span class="text-background/70">{{ columnTypeLabel }}</span>
+          <span :class="typeClass">{{ tooltipColumnType ?? columnType }}</span>
+        </template>
+        <template v-if="tooltipColumnComment ?? columnComment">
+          <span class="text-background/70">{{ columnCommentLabel }}</span>
+          <span>{{ tooltipColumnComment ?? columnComment }}</span>
+        </template>
+      </div>
+    </template>
+  </LightTooltip>
+</template>
+
+<style scoped>
+.data-grid-header-cell {
+  background-color: rgb(239, 239, 239);
+}
+
+.data-grid-header-cell--dark {
+  background-color: rgb(32, 32, 34) !important;
+}
+
+.data-grid-header-cell--dark:hover {
+  background-color: rgb(46, 47, 51) !important;
+}
+
+.data-grid-header-cell--selected {
+  background-color: rgb(209, 213, 219) !important;
+}
+
+.data-grid-header-cell--dark.data-grid-header-cell--selected {
+  background-color: rgb(66, 67, 70) !important;
+  color: rgb(244, 244, 245) !important;
+}
+</style>
diff --git a/apps/desktop/src/components/grid/DataGridConditionEditor.vue b/apps/desktop/src/components/grid/DataGridConditionEditor.vue
new file mode 100644
index 0000000000..bd42ccd045
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridConditionEditor.vue
@@ -0,0 +1,540 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, useId, watch, type CSSProperties } from "vue";
+import { ChevronDown, X } from "@lucide/vue";
+import { useDataGridConditionEditor, type DataGridConditionSuggestionProvider } from "@/composables/useDataGridConditionEditor";
+import { getDataGridConditionSuggestionPosition } from "@/lib/dataGrid/dataGridConditionSuggestionPosition";
+import type { DataGridConditionHistoryKind, DataGridConditionHistoryScope } from "@/lib/dataGrid/dataGridConditionHistory";
+
+const props = withDefaults(
+  defineProps<{
+    kind: DataGridConditionHistoryKind;
+    columns?: readonly string[];
+    historyScope: DataGridConditionHistoryScope;
+    placeholder?: string;
+    ariaLabel?: string;
+    historyEmptyText?: string;
+    historyNoMatchesText?: string;
+    suggestionProvider?: DataGridConditionSuggestionProvider;
+    suggestionDebounceMs?: number;
+    disabled?: boolean;
+    compact?: boolean;
+    apply?: (value: string) => void | boolean | Promise<void | boolean>;
+    clear?: () => void | Promise<void>;
+  }>(),
+  {
+    columns: () => [],
+    placeholder: "",
+    ariaLabel: "",
+    historyEmptyText: "No history yet",
+    historyNoMatchesText: "No matching history",
+    suggestionDebounceMs: 0,
+    disabled: false,
+  },
+);
+
+const modelValue = defineModel<string>({ default: "" });
+const emit = defineEmits<{
+  apply: [value: string];
+  clear: [];
+}>();
+
+const inputRef = ref<HTMLTextAreaElement>();
+const suggestionListId = `${useId()}-${props.kind}-condition-suggestions`;
+const overlayRef = ref<HTMLTextAreaElement>();
+const controlRef = ref<HTMLDivElement>();
+const dropdownRef = ref<HTMLDivElement>();
+const expanded = ref(false);
+const expandedRect = ref({ left: 0, top: 0, width: 0 });
+const expandedHeight = ref(56);
+const suggestionPosition = ref({ left: 0, top: 0, width: 180 });
+const historyPreview = ref<{ value: string; left: number; top: number; maxWidth: number; arrowTop: number; side: "left" | "right" } | null>(null);
+let collapseTimer: ReturnType<typeof setTimeout> | undefined;
+let resizeObserver: ResizeObserver | undefined;
+
+const editor = useDataGridConditionEditor({
+  kind: props.kind,
+  value: modelValue,
+  columns: () => props.columns,
+  historyScope: () => props.historyScope,
+  suggestionProvider: props.suggestionProvider,
+  suggestionDebounceMs: props.suggestionDebounceMs,
+});
+
+const activeEditor = computed(() => overlayRef.value ?? inputRef.value);
+const hasValue = computed(() => modelValue.value.trim().length > 0);
+const emptyHistoryText = computed(() => (modelValue.value.trim() ? props.historyNoMatchesText : props.historyEmptyText));
+const activeSuggestionId = computed(() => (editor.highlightedIndex.value >= 0 ? `${suggestionListId}-${editor.highlightedIndex.value}` : undefined));
+const suggestionStyle = computed<CSSProperties>(() => ({
+  left: `${suggestionPosition.value.left}px`,
+  top: `${suggestionPosition.value.top}px`,
+  width: `${suggestionPosition.value.width}px`,
+}));
+const overlayStyle = computed<CSSProperties>(() => ({
+  left: `${expandedRect.value.left}px`,
+  top: `${expandedRect.value.top}px`,
+  width: `${expandedRect.value.width}px`,
+  height: `${expandedHeight.value}px`,
+}));
+const previewStyle = computed<CSSProperties>(() => {
+  const preview = historyPreview.value;
+  return preview ? { left: `${preview.left}px`, top: `${preview.top}px`, maxWidth: `${preview.maxWidth}px` } : {};
+});
+const previewArrowStyle = computed<CSSProperties>(() => ({ top: `${historyPreview.value?.arrowTop ?? 0}px` }));
+
+function createTextProbe(input: HTMLTextAreaElement, wrap: boolean) {
+  const probe = document.createElement(wrap ? "div" : "span");
+  const style = window.getComputedStyle(input);
+  probe.textContent = input.value || input.placeholder || "";
+  probe.style.cssText = `position:fixed;left:-9999px;top:-9999px;visibility:hidden;box-sizing:border-box;${wrap ? `width:${input.clientWidth}px;white-space:pre-wrap;overflow-wrap:anywhere;padding:${style.paddingTop} ${style.paddingRight} ${style.paddingBottom} ${style.paddingLeft};` : "white-space:pre;"}font:${style.font};font-size:${style.fontSize};font-family:${style.fontFamily};font-weight:${style.fontWeight};line-height:${style.lineHeight};letter-spacing:${style.letterSpacing};`;
+  document.body.appendChild(probe);
+  return probe;
+}
+
+function shouldExpand(input: HTMLTextAreaElement) {
+  if (!input.value) return false;
+  const probe = createTextProbe(input, false);
+  const should = probe.getBoundingClientRect().width > input.clientWidth + 1;
+  probe.remove();
+  return should;
+}
+
+function measureExpandedHeight(input: HTMLTextAreaElement) {
+  const probe = createTextProbe(input, true);
+  const style = window.getComputedStyle(input);
+  const lineHeight = Number.parseFloat(style.lineHeight) || 24;
+  const contentHeight = probe.scrollHeight;
+  probe.remove();
+  const availableHeight = Math.max(56, window.innerHeight - input.getBoundingClientRect().top - 12);
+  return Math.min(Math.max(56, lineHeight * 2.5, contentHeight), Math.min(260, availableHeight));
+}
+
+function updateSuggestionPosition() {
+  void nextTick(() => {
+    const target = activeEditor.value;
+    if (!target) return;
+    suggestionPosition.value = getDataGridConditionSuggestionPosition(target.getBoundingClientRect(), { viewportWidth: window.innerWidth });
+  });
+}
+
+function resizeEditor(forceExpand = false) {
+  void nextTick(() => {
+    const input = inputRef.value;
+    if (!input) return;
+    const focused = document.activeElement === input || document.activeElement === overlayRef.value;
+    const nextExpanded = focused && shouldExpand(input) && (forceExpand || expanded.value);
+    if (nextExpanded) {
+      expandedRect.value = input.getBoundingClientRect();
+      expandedHeight.value = measureExpandedHeight(input);
+    }
+    expanded.value = nextExpanded;
+    updateSuggestionPosition();
+    if (nextExpanded && document.activeElement === input) {
+      void nextTick(() => {
+        const overlay = overlayRef.value;
+        if (!overlay) return;
+        const start = input.selectionStart;
+        overlay.focus();
+        overlay.setSelectionRange(start, start);
+      });
+    }
+  });
+}
+
+function focus(select = false) {
+  const target = activeEditor.value ?? inputRef.value;
+  target?.focus();
+  if (select) target?.select();
+  resizeEditor(true);
+}
+
+function scheduleCollapse() {
+  if (collapseTimer) clearTimeout(collapseTimer);
+  collapseTimer = setTimeout(() => {
+    const active = document.activeElement;
+    if (active === inputRef.value || active === overlayRef.value) return;
+    expanded.value = false;
+  }, 0);
+}
+
+function onInput() {
+  resizeEditor(true);
+  updateSuggestionPosition();
+}
+
+async function applyCondition() {
+  editor.dismiss();
+  const applied = props.apply ? await props.apply(modelValue.value) : emit("apply", modelValue.value);
+  if (applied !== false && modelValue.value.trim()) editor.rememberHistory();
+}
+
+async function clearCondition() {
+  modelValue.value = "";
+  editor.dismiss();
+  expanded.value = false;
+  if (props.clear) await props.clear();
+  else emit("clear");
+}
+
+function onKeydown(event: KeyboardEvent) {
+  const action = editor.handleKeydown(event);
+  if (action === "apply") void applyCondition();
+  if (action === "accept") void nextTick(() => focus());
+}
+
+function openHistory() {
+  editor.openHistory();
+  updateSuggestionPosition();
+  focus();
+}
+
+function acceptSuggestion(index: number) {
+  editor.accept(index);
+  void nextTick(() => focus());
+}
+
+function eventInside(event: Event, element?: HTMLElement) {
+  if (!element) return false;
+  const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+  return path.includes(element) || (event.target instanceof Node && element.contains(event.target));
+}
+
+function onDocumentPointerDown(event: PointerEvent) {
+  if (eventInside(event, controlRef.value) || eventInside(event, overlayRef.value?.parentElement ?? undefined) || eventInside(event, dropdownRef.value)) return;
+  editor.dismiss();
+}
+
+function onViewportResize() {
+  resizeEditor();
+}
+
+function showHistoryPreview(value: string, event: MouseEvent) {
+  const target = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
+  const text = target?.querySelector<HTMLElement>("[data-condition-history-text]");
+  if (!target || !text || text.scrollWidth <= text.clientWidth + 1) return hideHistoryPreview();
+  const rect = target.getBoundingClientRect();
+  const gap = 10;
+  const availableRight = window.innerWidth - rect.right - gap - 8;
+  const availableLeft = rect.left - gap - 8;
+  const placeRight = availableRight >= 280 || availableRight >= availableLeft;
+  const maxWidth = Math.max(280, Math.min(560, placeRight ? availableRight : availableLeft));
+  const estimatedHeight = Math.min(260, Math.max(56, Math.ceil(value.length / 58) * 18 + 24));
+  const top = Math.min(Math.max(8, rect.top), Math.max(8, window.innerHeight - estimatedHeight - 8));
+  historyPreview.value = {
+    value,
+    left: placeRight ? rect.right + gap : Math.max(8, rect.left - gap - maxWidth),
+    top,
+    maxWidth,
+    arrowTop: Math.min(Math.max(14, rect.top + rect.height / 2 - top), estimatedHeight - 14),
+    side: placeRight ? "left" : "right",
+  };
+}
+
+function hideHistoryPreview() {
+  historyPreview.value = null;
+}
+
+watch(modelValue, () => resizeEditor());
+watch(
+  () => editor.dropdownOpen.value,
+  (open) => {
+    if (open) updateSuggestionPosition();
+    else hideHistoryPreview();
+  },
+);
+
+onMounted(() => {
+  window.addEventListener("resize", onViewportResize);
+  window.visualViewport?.addEventListener("resize", onViewportResize);
+  window.addEventListener("dbx:ui-scale-applied", onViewportResize);
+  document.addEventListener("pointerdown", onDocumentPointerDown, true);
+  if (typeof ResizeObserver !== "undefined" && controlRef.value) {
+    resizeObserver = new ResizeObserver(() => resizeEditor());
+    resizeObserver.observe(controlRef.value);
+  }
+});
+
+onUnmounted(() => {
+  if (collapseTimer) clearTimeout(collapseTimer);
+  resizeObserver?.disconnect();
+  window.removeEventListener("resize", onViewportResize);
+  window.visualViewport?.removeEventListener("resize", onViewportResize);
+  window.removeEventListener("dbx:ui-scale-applied", onViewportResize);
+  document.removeEventListener("pointerdown", onDocumentPointerDown, true);
+});
+
+defineExpose({ focus, dismiss: editor.dismiss, rememberHistory: editor.rememberHistory });
+</script>
+
+<template>
+  <div ref="controlRef" class="relative flex min-w-0 flex-1 items-stretch">
+    <div class="flex min-w-0 flex-1 items-center gap-1">
+      <span class="data-grid-topbar-condition-label" :class="[props.kind === 'where' ? 'data-grid-topbar-condition-label--where' : 'data-grid-topbar-condition-label--order', { 'data-grid-topbar-condition-label--compact': props.compact }]">
+        {{ props.kind === "where" ? "WHERE" : "ORDER BY" }}
+      </span>
+      <div class="relative h-6 min-w-0 flex-1 overflow-hidden">
+        <textarea
+          ref="inputRef"
+          v-model="modelValue"
+          wrap="off"
+          rows="1"
+          autocapitalize="off"
+          autocorrect="off"
+          spellcheck="false"
+          :disabled="props.disabled"
+          :placeholder="props.placeholder"
+          :aria-label="props.ariaLabel || props.placeholder"
+          role="combobox"
+          aria-autocomplete="list"
+          :aria-expanded="editor.dropdownOpen.value"
+          :aria-controls="suggestionListId"
+          :aria-activedescendant="activeSuggestionId"
+          class="data-grid-topbar-condition-input absolute inset-x-0 top-0 h-6 min-w-0 resize-none bg-transparent outline-none"
+          :class="[props.kind === 'where' ? 'data-grid-topbar-condition-input--where' : 'data-grid-topbar-condition-input--order', { 'data-grid-topbar-condition-input--compact': props.compact }]"
+          style="height: 24px"
+          @focus="resizeEditor(true)"
+          @blur="scheduleCollapse"
+          @click="resizeEditor(true)"
+          @input="onInput"
+          @keydown="onKeydown"
+        />
+      </div>
+      <button type="button" class="shrink-0 text-muted-foreground hover:text-foreground" :disabled="props.disabled" @mousedown.prevent @click="openHistory">
+        <ChevronDown class="h-3 w-3" />
+      </button>
+      <button v-if="hasValue" type="button" class="shrink-0 text-muted-foreground hover:text-foreground" :disabled="props.disabled" @mousedown.prevent @click="clearCondition">
+        <X class="h-3 w-3" />
+      </button>
+    </div>
+
+    <Teleport to="body">
+      <div v-if="expanded" class="data-grid-topbar-condition-pane--expanded fixed z-[80] flex min-w-0 items-start gap-1" :style="overlayStyle">
+        <textarea
+          ref="overlayRef"
+          v-model="modelValue"
+          :disabled="props.disabled"
+          :placeholder="props.placeholder"
+          :aria-label="props.ariaLabel || props.placeholder"
+          role="combobox"
+          aria-autocomplete="list"
+          :aria-expanded="editor.dropdownOpen.value"
+          :aria-controls="suggestionListId"
+          :aria-activedescendant="activeSuggestionId"
+          class="data-grid-topbar-condition-input data-grid-topbar-condition-input--expanded absolute resize-none outline-none"
+          :class="[props.kind === 'where' ? 'data-grid-topbar-condition-input--where' : 'data-grid-topbar-condition-input--order', { 'data-grid-topbar-condition-input--compact': props.compact }]"
+          @blur="scheduleCollapse"
+          @input="onInput"
+          @keydown="onKeydown"
+        />
+        <div class="data-grid-topbar-condition-floating-controls pointer-events-none absolute inset-x-2 z-[1] flex h-6 min-w-0 items-center gap-1">
+          <span class="data-grid-topbar-condition-label" :class="[props.kind === 'where' ? 'data-grid-topbar-condition-label--where' : 'data-grid-topbar-condition-label--order', { 'data-grid-topbar-condition-label--compact': props.compact }]">
+            {{ props.kind === "where" ? "WHERE" : "ORDER BY" }}
+          </span>
+          <div class="min-w-0 flex-1" />
+          <button type="button" class="data-grid-topbar-condition-icon-control pointer-events-auto shrink-0 text-muted-foreground hover:text-foreground" :disabled="props.disabled" @mousedown.prevent @click="openHistory">
+            <ChevronDown class="h-3 w-3" />
+          </button>
+          <button v-if="hasValue" type="button" class="data-grid-topbar-condition-icon-control pointer-events-auto shrink-0 text-muted-foreground hover:text-foreground" :disabled="props.disabled" @mousedown.prevent @click="clearCondition">
+            <X class="h-3 w-3" />
+          </button>
+        </div>
+      </div>
+    </Teleport>
+
+    <Teleport to="body">
+      <div v-if="editor.dropdownOpen.value" :id="suggestionListId" ref="dropdownRef" role="listbox" class="fixed z-[90] min-w-[180px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md" :style="suggestionStyle">
+        <div
+          v-for="(suggestion, index) in editor.suggestions.value"
+          :key="`${suggestion.kind}:${suggestion.value}`"
+          :id="`${suggestionListId}-${index}`"
+          role="option"
+          :aria-selected="index === editor.highlightedIndex.value"
+          class="flex cursor-pointer items-center px-3 py-1.5 text-xs"
+          :class="index === editor.highlightedIndex.value ? 'bg-accent text-accent-foreground' : 'hover:bg-gray-200 dark:hover:bg-gray-800'"
+          @mousedown.prevent="acceptSuggestion(index)"
+          @mouseenter="
+            editor.highlightedIndex.value = index;
+            suggestion.kind === 'history' && showHistoryPreview(suggestion.value, $event);
+          "
+          @mouseleave="hideHistoryPreview"
+        >
+          <span data-condition-history-text class="min-w-0 flex-1 truncate font-mono">{{ suggestion.value }}</span>
+          <button v-if="suggestion.kind === 'history'" type="button" class="ml-2 shrink-0 text-muted-foreground hover:text-foreground" @mousedown.stop.prevent="editor.deleteHistory(suggestion.value)">
+            <X class="h-3 w-3" />
+          </button>
+        </div>
+        <div v-if="editor.suggestions.value.length === 0" class="px-3 py-2 text-xs text-muted-foreground">{{ emptyHistoryText }}</div>
+      </div>
+    </Teleport>
+
+    <Teleport to="body">
+      <div v-if="historyPreview" class="pointer-events-none fixed z-[140] rounded-md bg-foreground shadow-xl" :style="previewStyle">
+        <span class="absolute h-3 w-3 rotate-45 bg-foreground" :class="historyPreview.side === 'left' ? '-left-1.5' : '-right-1.5'" :style="previewArrowStyle" />
+        <div class="max-h-[min(320px,calc(100vh-16px))] overflow-auto rounded-md px-3 py-2 font-mono text-xs leading-relaxed whitespace-pre-wrap break-words text-background">{{ historyPreview.value }}</div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.data-grid-topbar-condition-label {
+  display: inline-flex;
+  flex-shrink: 0;
+  max-width: 5rem;
+  overflow: hidden;
+  white-space: nowrap;
+  font-family: var(--data-grid-condition-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+  user-select: none;
+  opacity: 1;
+  transform: translateX(0);
+  transition:
+    max-width var(--data-grid-topbar-transition-duration, 340ms) var(--data-grid-topbar-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)),
+    opacity 240ms ease 60ms,
+    transform var(--data-grid-topbar-transition-duration, 340ms) var(--data-grid-topbar-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)),
+    color 240ms ease;
+}
+
+.data-grid-topbar-condition-label--where {
+  color: rgb(37 99 235);
+}
+
+.data-grid-topbar-condition-label--order {
+  color: rgb(234 88 12);
+}
+
+:global(.dark) .data-grid-topbar-condition-label--where {
+  color: rgb(96 165 250);
+}
+
+:global(.dark) .data-grid-topbar-condition-label--order {
+  color: rgb(251 146 60);
+}
+
+.data-grid-topbar-condition-label--compact {
+  max-width: 0;
+  opacity: 0;
+  transform: translateX(-4px);
+}
+
+.data-grid-topbar-condition-input {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 0 0.125rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: pre;
+  border: 0;
+  border-radius: 0;
+  appearance: none;
+  scrollbar-width: none;
+  font-family: var(--data-grid-condition-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  font-variant-ligatures: none;
+  font-feature-settings:
+    "liga" 0,
+    "calt" 0;
+}
+
+:global(.dark) .data-grid-topbar-condition-input {
+  color: rgb(244, 244, 245);
+  background-color: transparent !important;
+}
+
+.data-grid-topbar-condition-input::-webkit-scrollbar {
+  display: none;
+}
+
+.data-grid-topbar-condition-icon-control {
+  align-self: center;
+  margin-top: 0;
+}
+
+.data-grid-topbar-condition-floating-controls {
+  top: var(--data-grid-condition-controls-top);
+  will-change: transform;
+}
+
+.data-grid-topbar-condition-pane--expanded {
+  --data-grid-condition-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  position: fixed;
+  z-index: 80;
+  right: auto;
+  bottom: auto;
+  box-sizing: border-box;
+  padding: 0.1875rem 0.5rem;
+  overflow: hidden;
+  background: color-mix(in oklab, var(--background) 96%, var(--muted) 4%);
+  box-shadow:
+    inset 0 -1px 0 var(--border),
+    0 8px 16px rgb(15 23 42 / 8%);
+  transition:
+    height 150ms ease,
+    box-shadow 150ms ease;
+  --data-grid-expanded-scrollbar-offset: 8px;
+  --data-grid-condition-controls-top: 0.125rem;
+  --data-grid-condition-input-top: 0.125rem;
+  --data-grid-condition-prefix-indent: 0px;
+  --data-grid-condition-suffix-width: 0px;
+}
+
+:global(.dark) .data-grid-topbar-condition-pane--expanded {
+  background: rgb(24, 24, 27) !important;
+  color: rgb(244, 244, 245);
+  box-shadow:
+    inset 0 -1px 0 rgb(63, 63, 70),
+    0 8px 16px rgb(0 0 0 / 32%);
+}
+
+.data-grid-topbar-condition-input--expanded {
+  top: var(--data-grid-condition-input-top);
+  right: 0.5rem;
+  bottom: 0.125rem;
+  left: 0.5rem;
+  height: auto;
+  line-height: 1.5rem;
+  margin-left: 0;
+  width: calc(100% - 1rem + var(--data-grid-expanded-scrollbar-offset));
+  max-width: none;
+  margin-right: calc(-1 * var(--data-grid-expanded-scrollbar-offset));
+  padding: 0 calc(var(--data-grid-condition-suffix-width) + 0.5rem) 0.0625rem 0.125rem;
+  text-indent: var(--data-grid-condition-prefix-indent);
+  overflow-x: hidden;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  scrollbar-width: thin;
+}
+
+.data-grid-topbar-condition-input--expanded::-webkit-scrollbar {
+  display: initial;
+  width: 8px;
+}
+
+.data-grid-topbar-condition-input::placeholder {
+  color: transparent;
+  transition: color 240ms ease;
+}
+
+.data-grid-topbar-condition-input--where.data-grid-topbar-condition-input--compact::placeholder {
+  color: rgb(59 130 246 / 70%);
+}
+
+.data-grid-topbar-condition-input--order.data-grid-topbar-condition-input--compact::placeholder {
+  color: rgb(249 115 22 / 70%);
+}
+
+:global(.dark) .data-grid-topbar-condition-input--where.data-grid-topbar-condition-input--compact::placeholder {
+  color: rgb(147 197 253 / 70%);
+}
+
+:global(.dark) .data-grid-topbar-condition-input--order.data-grid-topbar-condition-input--compact::placeholder {
+  color: rgb(253 186 116 / 70%);
+}
+</style>
diff --git a/apps/desktop/src/components/grid/DataGridDetailDialogs.vue b/apps/desktop/src/components/grid/DataGridDetailDialogs.vue
new file mode 100644
index 0000000000..946fceccb8
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridDetailDialogs.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { Copy, ListTree, Search, TableProperties } from "@lucide/vue";
+import { useI18n } from "vue-i18n";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { filterDataGridDetailFields, type DataGridCellDetail, type DataGridColumnDetail, type DataGridRowDetail } from "@/lib/dataGrid/dataGridDetail";
+
+const { t } = useI18n();
+const props = defineProps<{
+  rowDetail: DataGridRowDetail | null;
+  columnDetail: DataGridColumnDetail | null;
+  typeColorClass: (type: string) => string;
+  openImagePreview: (src: string, title: string) => void;
+  copyRowDetailFieldValue: (field: DataGridCellDetail) => void;
+  copyColumnDetailFieldValue: (field: DataGridCellDetail) => void;
+  copyRowDetailJson: () => void;
+  copyRowDetailTsv: () => void;
+  copyColumnDetailJson: () => void;
+  copyColumnDetailTsv: () => void;
+  copyColumnDetailColumnName: () => void;
+}>();
+
+const rowOpen = defineModel<boolean>("rowOpen", { default: false });
+const columnOpen = defineModel<boolean>("columnOpen", { default: false });
+const rowSearch = ref("");
+const columnSearch = ref("");
+const filteredRowFields = computed(() => (props.rowDetail ? filterDataGridDetailFields(props.rowDetail.fields, rowSearch.value) : []));
+const filteredColumnFields = computed(() => (props.columnDetail ? filterDataGridDetailFields(props.columnDetail.fields, columnSearch.value) : []));
+</script>
+
+<template>
+  <Dialog v-model:open="rowOpen">
+    <DialogContent v-if="rowDetail" class="sm:max-w-[960px] max-h-[85vh] flex flex-col overflow-hidden">
+      <DialogHeader class="shrink-0 pr-8">
+        <DialogTitle class="flex min-w-0 items-center gap-2 text-sm"
+          ><ListTree class="h-4 w-4 shrink-0 text-muted-foreground" /><span class="min-w-0 truncate">{{ t("grid.rowDetailsFor", { row: rowDetail.rowNumber }) }}</span></DialogTitle
+        >
+      </DialogHeader>
+      <div class="flex shrink-0 items-center gap-2 text-xs text-muted-foreground">
+        <span class="whitespace-nowrap">{{ t("grid.columnsCount", { count: rowDetail.fields.length }) }}</span>
+        <div class="relative ml-auto w-56 max-w-full"><Search class="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" /><Input v-model="rowSearch" :placeholder="t('grid.detailSearchPlaceholder')" class="h-7 pl-7 text-xs" /></div>
+      </div>
+      <div class="min-h-0 flex-1 overflow-auto rounded border">
+        <table class="w-full min-w-[640px] text-xs">
+          <thead class="sticky top-0 z-10 bg-muted text-muted-foreground">
+            <tr class="border-b">
+              <th class="w-16 px-3 py-2 text-left font-medium">{{ t("grid.fieldIndex") }}</th>
+              <th class="w-56 px-3 py-2 text-left font-medium">{{ t("grid.columnName") }}</th>
+              <th class="px-3 py-2 text-left font-medium">{{ t("grid.cellValue") }}</th>
+              <th class="w-10 px-2 py-2" />
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(field, index) in filteredRowFields" :key="`${field.colIndex}:${field.column}`" class="border-b align-top last:border-b-0">
+              <td class="px-3 py-2 text-muted-foreground tabular-nums">{{ index + 1 }}</td>
+              <td class="px-3 py-2">
+                <div class="font-medium break-words">{{ field.column }}</div>
+                <div :class="field.type ? typeColorClass(field.type) : 'text-muted-foreground'" class="mt-1 text-[11px]">{{ field.type || "-" }}</div>
+                <div v-if="field.comment" class="mt-1 text-[11px] text-muted-foreground whitespace-pre-wrap">{{ field.comment }}</div>
+              </td>
+              <td class="w-full max-w-0 px-3 py-2">
+                <div class="mb-1 text-[11px] text-muted-foreground">{{ field.value === null ? t("grid.nullValue") : t("grid.valueLength") }}: {{ field.value === null ? "true" : field.length }}</div>
+                <a v-if="field.imagePreviewUrl" :href="field.imagePreviewUrl" role="button" class="mb-2 block max-h-48 overflow-hidden rounded border bg-muted/20" @click.prevent="openImagePreview(field.imagePreviewUrl, field.column)"
+                  ><img :src="field.imagePreviewUrl" :alt="field.column" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="max-h-48 w-full object-contain"
+                /></a>
+                <pre class="max-h-44 overflow-auto rounded border bg-muted/20 p-2 font-mono text-xs whitespace-pre-wrap break-words" :class="{ 'italic text-muted-foreground': field.value === null }">{{ field.rawValuePreview }}</pre>
+                <div v-if="field.isValuePreviewTruncated" class="mt-1 text-[11px] text-muted-foreground">{{ t("grid.largeValuePreviewHint", { count: field.rawValuePreview.length }) }}</div>
+                <div v-if="field.formattedJson" class="mt-2 space-y-1">
+                  <div class="text-muted-foreground">{{ t("grid.formattedJson") }}</div>
+                  <pre class="max-h-44 overflow-auto rounded border bg-muted/20 p-2 font-mono text-xs whitespace-pre-wrap break-words">{{ field.formattedJson }}</pre>
+                </div>
+              </td>
+              <td class="px-2 py-2">
+                <Button variant="ghost" size="icon" class="h-6 w-6" :title="t('grid.copyValue')" @click="copyRowDetailFieldValue(field)"><Copy class="h-3 w-3" /></Button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div v-if="rowSearch && !filteredRowFields.length" class="px-3 py-6 text-center text-xs text-muted-foreground">{{ t("grid.detailSearchNoMatch") }}</div>
+      </div>
+      <DialogFooter class="shrink-0 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"
+        ><div class="flex flex-wrap gap-2">
+          <Button variant="outline" size="sm" class="h-7 text-xs" @click="copyRowDetailJson"><Copy class="mr-1.5 h-3 w-3" />{{ t("grid.copyRow") }}</Button
+          ><Button variant="outline" size="sm" class="h-7 text-xs" @click="copyRowDetailTsv"><Copy class="mr-1.5 h-3 w-3" />{{ t("grid.copyRowTsv") }}</Button>
+        </div></DialogFooter
+      >
+    </DialogContent>
+  </Dialog>
+
+  <Dialog v-model:open="columnOpen">
+    <DialogContent v-if="columnDetail" class="sm:max-w-[900px] max-h-[85vh] flex flex-col overflow-hidden">
+      <DialogHeader class="shrink-0 pr-8"
+        ><DialogTitle class="flex min-w-0 items-center gap-2 text-sm"
+          ><TableProperties class="h-4 w-4 shrink-0 text-muted-foreground" /><span class="min-w-0 truncate">{{ t("grid.columnDetailsFor", { column: columnDetail.column }) }}</span></DialogTitle
+        ></DialogHeader
+      >
+      <div class="grid shrink-0 gap-3 rounded border bg-muted/20 p-3 text-xs sm:grid-cols-3">
+        <div>
+          <div class="text-muted-foreground">{{ t("grid.columnName") }}</div>
+          <div class="font-medium break-all">{{ columnDetail.column }}</div>
+        </div>
+        <div>
+          <div class="text-muted-foreground">{{ t("grid.columnType") }}</div>
+          <div :class="columnDetail.type ? typeColorClass(columnDetail.type) : 'text-muted-foreground'">{{ columnDetail.type || "-" }}</div>
+        </div>
+        <div>
+          <div class="text-muted-foreground">{{ t("grid.rowCount") }}</div>
+          <div>{{ columnDetail.fields.length }}</div>
+        </div>
+        <div class="sm:col-span-3">
+          <div class="text-muted-foreground">{{ t("grid.columnComment") }}</div>
+          <div class="whitespace-pre-wrap break-words">{{ columnDetail.comment || t("grid.noComment") }}</div>
+        </div>
+      </div>
+      <div class="flex shrink-0 items-center gap-2 text-xs text-muted-foreground">
+        <span class="whitespace-nowrap">{{ t("grid.rowCount") }}: {{ columnDetail.fields.length }}</span>
+        <div class="relative ml-auto w-56 max-w-full"><Search class="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" /><Input v-model="columnSearch" :placeholder="t('grid.detailSearchPlaceholder')" class="h-7 pl-7 text-xs" /></div>
+      </div>
+      <div class="min-h-0 flex-1 overflow-auto rounded border">
+        <table class="w-full min-w-[500px] text-xs">
+          <thead class="sticky top-0 z-10 bg-muted text-muted-foreground">
+            <tr class="border-b">
+              <th class="w-24 px-3 py-2 text-left font-medium">{{ t("grid.rowNumber") }}</th>
+              <th class="px-3 py-2 text-left font-medium">{{ t("grid.cellValue") }}</th>
+              <th class="w-10 px-2 py-2" />
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="field in filteredColumnFields" :key="`${field.rowId}:${field.colIndex}`" class="border-b align-top last:border-b-0">
+              <td class="px-3 py-2 tabular-nums">{{ field.rowNumber }}</td>
+              <td class="w-full max-w-0 px-3 py-2">
+                <div class="mb-1 text-[11px] text-muted-foreground">{{ field.value === null ? t("grid.nullValue") : t("grid.valueLength") }}: {{ field.value === null ? "true" : field.length }}</div>
+                <a v-if="field.imagePreviewUrl" :href="field.imagePreviewUrl" role="button" class="mb-2 block max-h-40 overflow-hidden rounded border bg-muted/20" @click.prevent="openImagePreview(field.imagePreviewUrl, field.column)"
+                  ><img :src="field.imagePreviewUrl" :alt="field.column" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="max-h-40 w-full object-contain"
+                /></a>
+                <pre class="max-h-36 overflow-auto rounded border bg-muted/20 p-2 font-mono text-xs whitespace-pre-wrap break-words" :class="{ 'italic text-muted-foreground': field.value === null }">{{ field.rawValuePreview }}</pre>
+                <div v-if="field.isValuePreviewTruncated" class="mt-1 text-[11px] text-muted-foreground">{{ t("grid.largeValuePreviewHint", { count: field.rawValuePreview.length }) }}</div>
+                <div v-if="field.formattedJson" class="mt-2 space-y-1">
+                  <div class="text-muted-foreground">{{ t("grid.formattedJson") }}</div>
+                  <pre class="max-h-36 overflow-auto rounded border bg-muted/20 p-2 font-mono text-xs whitespace-pre-wrap break-words">{{ field.formattedJson }}</pre>
+                </div>
+              </td>
+              <td class="px-2 py-2">
+                <Button variant="ghost" size="icon" class="h-6 w-6" :title="t('grid.copyValue')" @click="copyColumnDetailFieldValue(field)"><Copy class="h-3 w-3" /></Button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div v-if="columnSearch && !filteredColumnFields.length" class="px-3 py-6 text-center text-xs text-muted-foreground">{{ t("grid.detailSearchNoMatch") }}</div>
+      </div>
+      <DialogFooter class="shrink-0 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"
+        ><div class="flex flex-wrap gap-2">
+          <Button variant="outline" size="sm" class="h-7 text-xs" @click="copyColumnDetailJson"><Copy class="mr-1.5 h-3 w-3" />{{ t("grid.copyColumnValues") }}</Button
+          ><Button variant="outline" size="sm" class="h-7 text-xs" @click="copyColumnDetailTsv"><Copy class="mr-1.5 h-3 w-3" />{{ t("grid.copyColumnTsv") }}</Button>
+        </div>
+        <Button variant="ghost" size="sm" class="h-7 text-xs" @click="copyColumnDetailColumnName"><Copy class="mr-1.5 h-3 w-3" />{{ t("grid.copyColumnName") }}</Button></DialogFooter
+      >
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/apps/desktop/src/components/grid/DataGridExportMenu.vue b/apps/desktop/src/components/grid/DataGridExportMenu.vue
new file mode 100644
index 0000000000..61b7f14d41
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridExportMenu.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Upload } from "@lucide/vue";
+import LightDropdown, { type LightDropdownItem } from "@/components/ui/LightDropdown.vue";
+
+defineProps<{
+  items: LightDropdownItem[];
+  label: string;
+  onSelect: (value: string) => void;
+}>();
+</script>
+
+<template>
+  <LightDropdown
+    model-value=""
+    :items="items"
+    :aria-label="label"
+    :trigger-icon="Upload"
+    :trigger-label="label"
+    trigger-class="inline-flex h-6 shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-md px-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground"
+    trigger-icon-class="h-3.5 w-3.5"
+    :show-trigger-label="true"
+    :show-chevron="true"
+    :highlight-selected="false"
+    check-position="none"
+    align="end"
+    @update:model-value="onSelect"
+  />
+</template>
diff --git a/apps/desktop/src/components/grid/DataGridFilterBuilder.vue b/apps/desktop/src/components/grid/DataGridFilterBuilder.vue
new file mode 100644
index 0000000000..2a5c5fce90
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridFilterBuilder.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { Eye, EyeOff, Plus, Search, Trash2 } from "@lucide/vue";
+import { useI18n } from "vue-i18n";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { filterModeNeedsValue, filterModeUsesList, filterModeUsesRange } from "@/lib/dataGrid/dataGridColumnFilter";
+import type { DataGridContextFilterMode } from "@/lib/dataGrid/dataGridSql";
+import type { DataGridStructuredFilterRule } from "@/composables/useDataGridFilterBuilder";
+
+const { t } = useI18n();
+const props = defineProps<{
+  rules: DataGridStructuredFilterRule[];
+  columns: string[];
+  filteredColumns: string[];
+  modeOptions: Array<{ value: DataGridContextFilterMode; labelKey: string }>;
+  columnSearch: string;
+  disabled?: boolean;
+  showHeader?: boolean;
+  showFooter?: boolean;
+}>();
+const emit = defineEmits<{
+  add: [];
+  apply: [];
+  reset: [];
+  clear: [];
+  remove: [id: string];
+  updateRule: [id: string, patch: Partial<DataGridStructuredFilterRule>];
+  "update:columnSearch": [value: string];
+}>();
+
+function usesExpandedLayout(mode: DataGridContextFilterMode) {
+  return filterModeUsesList(mode) || filterModeUsesRange(mode);
+}
+
+function updateRuleColumn(id: string, value: unknown) {
+  emit("updateRule", id, { columnName: String(value) });
+  emit("update:columnSearch", "");
+}
+
+function handleColumnSearchKeydown(event: KeyboardEvent) {
+  if (event.isComposing || event.key === "Process") {
+    event.stopPropagation();
+    return;
+  }
+  if (["Escape", "Tab", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown"].includes(event.key)) return;
+  if (!event.ctrlKey && !event.metaKey && !event.altKey && (event.key.length === 1 || event.key === "Backspace" || event.key === "Delete")) event.stopPropagation();
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div v-if="props.showHeader !== false" class="flex items-center justify-between gap-3">
+      <div class="text-xs font-medium text-foreground">{{ t("grid.filter") }}</div>
+      <Button variant="ghost" size="sm" class="h-7 px-2 text-xs" :disabled="props.disabled || !props.columns.length" @click="emit('add')"> <Plus class="mr-1 h-3.5 w-3.5" />{{ t("grid.filterBuilderAddRule") }} </Button>
+    </div>
+
+    <div v-if="props.rules.length" class="space-y-2">
+      <template v-for="(rule, index) in props.rules" :key="rule.id">
+        <div v-if="index > 0" class="flex justify-center">
+          <Button variant="ghost" size="sm" class="h-6 px-2 text-[11px]" @click="emit('updateRule', rule.id, { conjunction: rule.conjunction === 'AND' ? 'OR' : 'AND' })">{{ rule.conjunction }}</Button>
+        </div>
+        <div class="grid items-center gap-2" :class="usesExpandedLayout(rule.mode) ? 'grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)_auto]' : 'grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)_minmax(0,1.2fr)_auto]'">
+          <Select :model-value="rule.columnName" :disabled="rule.disabled" @update:model-value="(value: any) => updateRuleColumn(rule.id, value)">
+            <SelectTrigger class="h-8 min-w-0 text-xs"><SelectValue :placeholder="t('grid.filterBuilderColumn')" /></SelectTrigger>
+            <SelectContent position="popper" class="max-h-72" :hide-scroll-buttons="true">
+              <SelectItem v-for="column in props.filteredColumns" :key="column" :value="column">{{ column }}</SelectItem>
+              <div v-if="!props.filteredColumns.length" class="px-2 py-2 text-xs text-muted-foreground">{{ t("grid.filterBuilderNoMatchingColumns") }}</div>
+              <div class="sticky bottom-0 mt-1 flex items-center gap-1.5 border-t bg-popover px-2 py-1.5">
+                <Search class="h-3.5 w-3.5 text-muted-foreground" />
+                <input
+                  :value="props.columnSearch"
+                  class="h-7 min-w-0 flex-1 bg-transparent text-xs outline-none"
+                  :placeholder="t('grid.filterBuilderSearchColumns')"
+                  @input="emit('update:columnSearch', ($event.target as HTMLInputElement).value)"
+                  @click.stop
+                  @keydown="handleColumnSearchKeydown"
+                  @pointerdown.stop
+                />
+              </div>
+            </SelectContent>
+          </Select>
+          <Select :model-value="rule.mode" :disabled="rule.disabled" @update:model-value="(value: any) => emit('updateRule', rule.id, { mode: value as DataGridContextFilterMode })">
+            <SelectTrigger class="h-8 min-w-0 text-xs"><SelectValue /></SelectTrigger>
+            <SelectContent
+              ><SelectItem v-for="option in props.modeOptions" :key="option.value" :value="option.value">{{ t(option.labelKey) }}</SelectItem></SelectContent
+            >
+          </Select>
+          <div v-if="filterModeUsesRange(rule.mode)" class="col-span-2 flex gap-2">
+            <Input :model-value="rule.rawValue" class="h-8 text-xs" :disabled="rule.disabled" :placeholder="t('grid.filterBuilderRangeStart')" @update:model-value="(value) => emit('updateRule', rule.id, { rawValue: String(value ?? '') })" @keydown.enter.prevent="emit('apply')" />
+            <Input :model-value="rule.rawEndValue" class="h-8 text-xs" :disabled="rule.disabled" :placeholder="t('grid.filterBuilderRangeEnd')" @update:model-value="(value) => emit('updateRule', rule.id, { rawEndValue: String(value ?? '') })" @keydown.enter.prevent="emit('apply')" />
+          </div>
+          <textarea
+            v-else-if="filterModeUsesList(rule.mode)"
+            :value="rule.rawValue"
+            rows="2"
+            class="col-span-2 min-h-14 resize-y rounded-md border bg-transparent px-2.5 py-1 text-xs outline-none"
+            :disabled="rule.disabled"
+            :placeholder="t('grid.filterBuilderValues')"
+            @input="emit('updateRule', rule.id, { rawValue: ($event.target as HTMLTextAreaElement).value })"
+            @keydown.ctrl.enter.prevent="emit('apply')"
+            @keydown.meta.enter.prevent="emit('apply')"
+          />
+          <Input
+            v-else-if="filterModeNeedsValue(rule.mode)"
+            :model-value="rule.rawValue"
+            class="h-8 text-xs"
+            :disabled="rule.disabled"
+            :placeholder="t('grid.filterBuilderValue')"
+            @update:model-value="(value) => emit('updateRule', rule.id, { rawValue: String(value ?? '') })"
+            @keydown.enter.prevent="emit('apply')"
+          />
+          <div v-else class="flex h-8 items-center rounded-md border border-dashed px-2 text-xs text-muted-foreground">{{ t("grid.filterBuilderNoValue") }}</div>
+          <div class="flex items-center gap-1" :class="usesExpandedLayout(rule.mode) ? 'col-start-3 row-start-1 row-span-2' : ''">
+            <Button variant="ghost" size="icon" class="h-8 w-8" @click="emit('updateRule', rule.id, { disabled: !rule.disabled })"><EyeOff v-if="rule.disabled" class="h-3.5 w-3.5" /><Eye v-else class="h-3.5 w-3.5" /></Button>
+            <Button variant="ghost" size="icon" class="h-8 w-8" :disabled="props.rules.length === 1" @click="emit('remove', rule.id)"><Trash2 class="h-3.5 w-3.5" /></Button>
+          </div>
+        </div>
+      </template>
+    </div>
+    <div v-else class="rounded-md border border-dashed px-3 py-4 text-center text-xs text-muted-foreground">{{ t("grid.filterBuilderEmpty") }}</div>
+    <div v-if="props.showFooter !== false" class="flex justify-between gap-2 pt-1">
+      <Button variant="ghost" size="sm" class="h-8 px-2 text-xs" @click="emit('clear')">{{ t("grid.clearFilter") }}</Button>
+      <div class="flex gap-2">
+        <Button variant="ghost" size="sm" class="h-8 px-2 text-xs" @click="emit('reset')">{{ t("grid.resetFilterBuilder") }}</Button
+        ><Button size="sm" class="h-8 px-3 text-xs" :disabled="props.disabled" @click="emit('apply')">{{ t("grid.applyFilter") }}</Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/desktop/src/components/grid/DataGridMongoJsonPreview.vue b/apps/desktop/src/components/grid/DataGridMongoJsonPreview.vue
new file mode 100644
index 0000000000..94a9afbbd8
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridMongoJsonPreview.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { Code2, Copy, X } from "@lucide/vue";
+import { useI18n } from "vue-i18n";
+import { Button } from "@/components/ui/button";
+import { useCellDetailEditor, type UseCellDetailEditorReturn } from "@/composables/useCellDetailEditor";
+import { useTheme } from "@/composables/useTheme";
+import { useSettingsStore } from "@/stores/settingsStore";
+
+const { t } = useI18n();
+const settingsStore = useSettingsStore();
+const { isDark, themePalette } = useTheme();
+
+const props = defineProps<{
+  fullText: string;
+  text: string;
+  usesCodeEditor: boolean;
+  panelStyle?: Record<string, string>;
+  resizing: boolean;
+}>();
+
+const emit = defineEmits<{
+  copy: [];
+  close: [];
+  resizeStart: [event: MouseEvent];
+  contextMenu: [event: MouseEvent];
+}>();
+
+const previewContainer = ref<HTMLElement>();
+let previewEditor: UseCellDetailEditorReturn | null = null;
+
+watch(previewContainer, async (element) => {
+  if (element && !previewEditor) {
+    previewEditor = useCellDetailEditor({
+      language: "json",
+      readOnly: true,
+      editorTheme: () => settingsStore.editorSettings.theme,
+      appAppearance: () => (isDark.value ? "dark" : "light") as import("@/lib/app/appTheme").AppThemeAppearance,
+      appPalette: () => themePalette.value,
+      fontSize: () => settingsStore.editorSettings.fontSize,
+      fontFamily: () => settingsStore.editorSettings.fontFamily,
+    });
+    await previewEditor.create(element, props.text, "json");
+  } else if (!element && previewEditor) {
+    previewEditor.destroy();
+    previewEditor = null;
+  }
+});
+
+watch(
+  () => props.text,
+  (value) => previewEditor?.setValue(value, "json"),
+);
+</script>
+
+<template>
+  <div class="relative col-start-3 row-start-1 flex min-w-0 flex-col border-l bg-background" :class="{ 'detail-drawer-resizing': resizing }" :style="panelStyle" @contextmenu="emit('contextMenu', $event)">
+    <div class="absolute bottom-0 left-0 top-0 z-20 w-1.5 -translate-x-1/2 cursor-col-resize hover:bg-primary/30" @mousedown.prevent="emit('resizeStart', $event)" />
+    <div class="flex h-9 shrink-0 items-center gap-2 border-b bg-muted/20 px-3">
+      <Code2 class="h-3.5 w-3.5 text-muted-foreground" />
+      <span class="min-w-0 flex-1 truncate text-xs font-medium">{{ t("grid.mongoJsonPreview") }}</span>
+      <Button variant="ghost" size="icon" class="h-5 w-5" :disabled="!fullText" :title="t('grid.copyJson')" @click="emit('copy')"><Copy class="h-3 w-3" /></Button>
+      <Button variant="ghost" size="icon" class="h-5 w-5" @click="emit('close')"><X class="h-3 w-3" /></Button>
+    </div>
+    <div v-if="text" class="flex min-h-0 flex-1 flex-col overflow-hidden p-2">
+      <div v-if="usesCodeEditor" ref="previewContainer" data-cell-detail-editor-root class="min-h-0 flex-1 overflow-hidden" />
+      <template v-else>
+        <pre class="min-h-0 flex-1 overflow-auto rounded border bg-muted/20 p-3 font-mono text-xs whitespace-pre-wrap break-words">{{ text }}</pre>
+        <div class="mt-1 text-[11px] text-muted-foreground">{{ t("grid.largeValuePreviewHint", { count: text.length }) }}</div>
+      </template>
+    </div>
+    <div v-else class="flex min-h-0 flex-1 items-center justify-center px-6 text-center text-xs text-muted-foreground">{{ t("grid.mongoJsonPreviewEmpty") }}</div>
+  </div>
+</template>
diff --git a/apps/desktop/src/components/grid/DataGridPagination.vue b/apps/desktop/src/components/grid/DataGridPagination.vue
new file mode 100644
index 0000000000..d480b4f861
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridPagination.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { Check, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Loader2 } from "@lucide/vue";
+import { useI18n } from "vue-i18n";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import LightDropdown, { type LightDropdownItem } from "@/components/ui/LightDropdown.vue";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { MAX_RESULT_PAGE_SIZE, MIN_RESULT_PAGE_SIZE } from "@/lib/dataGrid/paginationPageSize";
+import DataGridExportMenu from "@/components/grid/DataGridExportMenu.vue";
+
+const { t } = useI18n();
+
+defineProps<{
+  selectionSummary: { cellCount: number; rowCount: number } | null;
+  selectionSummarySumText: string;
+  loading: boolean;
+  infiniteScrollEnabled: boolean;
+  infiniteScrollAllLoaded: boolean;
+  pageSize: number;
+  pageSizeMenuItems: LightDropdownItem[];
+  exportMenuItems: LightDropdownItem[];
+  currentPage: number;
+  canGoNextPage: boolean;
+  canJumpLastPage: boolean;
+}>();
+
+const customPageSizeInput = defineModel<string>("customPageSizeInput", { default: "" });
+
+const emit = defineEmits<{
+  selectPageSize: [value: string];
+  applyCustomPageSize: [];
+  firstPage: [];
+  previousPage: [];
+  nextPage: [];
+  lastPage: [];
+  selectExport: [value: string];
+}>();
+</script>
+
+<template>
+  <div class="flex min-w-max items-center justify-end gap-1">
+    <div v-if="selectionSummary" class="flex shrink-0 items-center gap-3 tabular-nums">
+      <span class="shrink-0">{{ t("grid.selectionSum", { value: selectionSummarySumText }) }}</span>
+      <div class="flex shrink-0 items-center gap-1">
+        <span class="shrink-0">{{ t("grid.selectionCells", { count: selectionSummary.cellCount }) }}</span>
+        <span class="shrink-0">{{ t("grid.rows", { count: selectionSummary.rowCount }) }}</span>
+      </div>
+    </div>
+    <Loader2 v-if="loading" class="w-3 h-3 animate-spin text-muted-foreground" />
+    <template v-if="infiniteScrollEnabled">
+      <span v-if="infiniteScrollAllLoaded" class="text-xs text-muted-foreground shrink-0">{{ t("grid.allLoaded") }}</span>
+    </template>
+    <template v-if="!infiniteScrollEnabled">
+      <LightDropdown
+        :model-value="String(pageSize)"
+        :items="pageSizeMenuItems"
+        :trigger-label="`${pageSize}${t('grid.rowsPerPageShort')}`"
+        trigger-class="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded-md px-1.5 text-xs hover:bg-accent hover:text-accent-foreground"
+        content-class="w-36"
+        :highlight-selected="false"
+        check-position="none"
+        align="end"
+        @update:model-value="emit('selectPageSize', $event)"
+      >
+        <div class="bg-border -mx-1 my-1 h-px" />
+        <div class="text-muted-foreground px-1.5 py-1 text-xs">{{ t("grid.customRowsPerPage") }}</div>
+        <div class="flex items-center gap-1 px-1.5 pb-1" @click.stop @keydown.stop>
+          <Input
+            v-model="customPageSizeInput"
+            type="number"
+            inputmode="numeric"
+            :min="MIN_RESULT_PAGE_SIZE"
+            :max="MAX_RESULT_PAGE_SIZE"
+            class="h-6 w-20 px-1.5 text-xs tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+            @keydown.enter.prevent.stop="emit('applyCustomPageSize')"
+          />
+          <Tooltip>
+            <TooltipTrigger as-child
+              ><Button variant="outline" size="icon" class="h-6 w-6 shrink-0" :aria-label="t('grid.applyPageSize')" @click.stop="emit('applyCustomPageSize')"><Check class="h-3 w-3" /></Button
+            ></TooltipTrigger>
+            <TooltipContent side="bottom">{{ t("grid.applyPageSize") }}</TooltipContent>
+          </Tooltip>
+        </div>
+      </LightDropdown>
+      <Button variant="ghost" size="icon" class="h-5 w-5 shrink-0" :disabled="currentPage <= 1" @click="emit('firstPage')"><ChevronsLeft class="h-3 w-3" /></Button>
+      <Button variant="ghost" size="icon" class="h-5 w-5 shrink-0" :disabled="currentPage <= 1" @click="emit('previousPage')"><ChevronLeft class="h-3 w-3" /></Button>
+      <span class="shrink-0 tabular-nums">{{ currentPage }}</span>
+      <Button variant="ghost" size="icon" class="h-5 w-5 shrink-0" :disabled="!canGoNextPage" @click="emit('nextPage')"><ChevronRight class="h-3 w-3" /></Button>
+      <Button variant="ghost" size="icon" class="h-5 w-5 shrink-0" :disabled="!canJumpLastPage" @click="emit('lastPage')"><ChevronsRight class="h-3 w-3" /></Button>
+    </template>
+    <DataGridExportMenu :items="exportMenuItems" :label="t('grid.export')" :on-select="(value) => emit('selectExport', value)" />
+  </div>
+</template>
diff --git a/apps/desktop/src/components/grid/DataGridQueryControls.vue b/apps/desktop/src/components/grid/DataGridQueryControls.vue
new file mode 100644
index 0000000000..df85213893
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridQueryControls.vue
@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref } from "vue";
+import { Filter, Plus, X } from "@lucide/vue";
+import { useI18n } from "vue-i18n";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import DataGridConditionEditor from "@/components/grid/DataGridConditionEditor.vue";
+import DataGridFilterBuilder from "@/components/grid/DataGridFilterBuilder.vue";
+import type { DataGridStructuredFilterRule } from "@/composables/useDataGridFilterBuilder";
+import type { DataGridConditionHistoryScope } from "@/lib/dataGrid/dataGridConditionHistory";
+import type { DataGridContextFilterMode } from "@/lib/dataGrid/dataGridSql";
+import { clampSearchSplitWidth } from "@/lib/dataGrid/dataGridSearchSplit";
+
+type LocalFilterSummary = {
+  columnIndex: number;
+  columnName: string;
+  values: string[];
+  hiddenValueCount: number;
+};
+
+const props = defineProps<{
+  whereInput: string;
+  orderByInput: string;
+  columns: readonly string[];
+  historyScope: DataGridConditionHistoryScope;
+  canUseWhereSearch: boolean;
+  compact: boolean;
+  leadingBorder: boolean;
+  filterBuilderOpen: boolean;
+  filterButtonActive: boolean;
+  filterButtonCount: number;
+  hasLocalColumnFilters: boolean;
+  localFilterCount: number;
+  localFilterSummaries: LocalFilterSummary[];
+  rules: DataGridStructuredFilterRule[];
+  filteredColumns: string[];
+  modeOptions: Array<{ value: DataGridContextFilterMode; labelKey: string }>;
+  columnSearch: string;
+  applyWhere: (value?: string) => void | boolean | Promise<void | boolean>;
+  clearWhere: () => void | Promise<void>;
+  applyOrderBy: (value?: string) => void | boolean | Promise<void | boolean>;
+  clearOrderBy: () => void | Promise<void>;
+}>();
+
+const emit = defineEmits<{
+  "update:whereInput": [value: string];
+  "update:orderByInput": [value: string];
+  "update:filterBuilderOpen": [value: boolean];
+  "update:columnSearch": [value: string];
+  ensureRule: [];
+  addRule: [];
+  applyFilters: [];
+  resetFilters: [];
+  clearFilters: [];
+  removeRule: [id: string];
+  updateRule: [id: string, patch: Partial<DataGridStructuredFilterRule>];
+  clearLocalFilter: [columnIndex?: number];
+}>();
+
+const { t } = useI18n();
+const containerRef = ref<HTMLDivElement>();
+const whereWidth = ref<number | null>(null);
+const resizing = ref(false);
+let resizeStartX = 0;
+let resizeStartWidth = 0;
+
+const wherePaneStyle = computed(() => (whereWidth.value == null ? {} : { flex: `0 0 ${whereWidth.value}px` }));
+
+function containerWidth(): number {
+  return containerRef.value?.getBoundingClientRect().width ?? 0;
+}
+
+function onResizeStart(event: MouseEvent) {
+  const width = containerWidth();
+  if (width <= 0) return;
+  event.preventDefault();
+  resizing.value = true;
+  resizeStartX = event.clientX;
+  resizeStartWidth = clampSearchSplitWidth({ containerWidth: width, desiredWidth: whereWidth.value ?? undefined });
+  whereWidth.value = resizeStartWidth;
+  document.body.classList.add("select-none", "cursor-col-resize");
+  window.addEventListener("mousemove", onResizeMove);
+  window.addEventListener("mouseup", onResizeEnd);
+}
+
+function onResizeMove(event: MouseEvent) {
+  if (!resizing.value) return;
+  const width = containerWidth();
+  if (width <= 0) return;
+  whereWidth.value = clampSearchSplitWidth({ containerWidth: width, desiredWidth: resizeStartWidth + event.clientX - resizeStartX });
+}
+
+function onResizeEnd() {
+  resizing.value = false;
+  document.body.classList.remove("select-none", "cursor-col-resize");
+  window.removeEventListener("mousemove", onResizeMove);
+  window.removeEventListener("mouseup", onResizeEnd);
+}
+
+function resetWidth() {
+  const width = containerWidth();
+  whereWidth.value = width > 0 ? clampSearchSplitWidth({ containerWidth: width }) : null;
+}
+
+function updateRule(id: string, patch: Partial<DataGridStructuredFilterRule>) {
+  emit("updateRule", id, patch);
+}
+
+onUnmounted(onResizeEnd);
+</script>
+
+<template>
+  <div ref="containerRef" class="flex flex-1 min-w-0">
+    <div class="flex flex-1 items-center gap-1 px-2 py-0.5 min-w-0 relative" :class="{ 'border-l': leadingBorder }" :style="wherePaneStyle">
+      <Popover :open="filterBuilderOpen" @update:open="emit('update:filterBuilderOpen', $event)">
+        <PopoverTrigger as-child>
+          <button
+            type="button"
+            class="relative flex h-5 w-5 shrink-0 items-center justify-center rounded border text-[11px] font-medium transition-colors"
+            :class="filterButtonActive ? 'border-primary/40 bg-primary/10 text-primary hover:bg-primary/15' : 'border-border/70 text-muted-foreground hover:bg-accent hover:text-foreground'"
+            :disabled="!canUseWhereSearch"
+            @click="emit('ensureRule')"
+          >
+            <Filter class="h-3 w-3" />
+            <span v-if="filterButtonCount" class="absolute -right-1 -top-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-1 text-[9px] leading-none text-primary-foreground">{{ filterButtonCount }}</span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent align="start" class="w-[380px] max-w-[calc(100vw-24px)] gap-3 p-3">
+          <div class="flex items-center justify-between gap-3">
+            <div class="text-xs font-medium text-foreground">{{ t("grid.filter") }}</div>
+            <Button variant="ghost" size="sm" class="h-7 px-2 text-xs" @click="emit('addRule')"><Plus class="mr-1 h-3.5 w-3.5" />{{ t("grid.filterBuilderAddRule") }}</Button>
+          </div>
+
+          <div v-if="hasLocalColumnFilters" class="space-y-2 rounded-md border border-primary/20 bg-primary/5 px-2.5 py-2">
+            <div class="flex items-center justify-between gap-3">
+              <div class="flex min-w-0 items-center gap-2 text-xs font-medium text-primary">
+                <Filter class="h-3.5 w-3.5 shrink-0" /><span class="truncate">{{ t("grid.localFiltersActive", { count: localFilterCount }) }}</span>
+              </div>
+              <Button variant="ghost" size="sm" class="h-7 shrink-0 px-2 text-xs" @click="emit('clearLocalFilter')"><X class="mr-1 h-3.5 w-3.5" />{{ t("grid.clearLocalFiltersShort") }}</Button>
+            </div>
+            <div class="space-y-1">
+              <div v-for="summary in localFilterSummaries" :key="summary.columnIndex" class="grid grid-cols-[minmax(0,0.9fr)_minmax(0,1.6fr)_auto] items-center gap-2 rounded border border-primary/10 bg-background/70 px-2 py-1 text-xs">
+                <span class="truncate font-medium text-foreground" :title="summary.columnName">{{ summary.columnName }}</span>
+                <span class="min-w-0 truncate font-mono text-muted-foreground">
+                  <template v-for="(value, valueIndex) in summary.values" :key="valueIndex"
+                    ><span v-if="valueIndex > 0">, </span><span>{{ value }}</span></template
+                  >
+                  <span v-if="summary.hiddenValueCount">{{ t("grid.localFilterMoreValues", { count: summary.hiddenValueCount }) }}</span>
+                </span>
+                <Button variant="ghost" size="icon" class="h-6 w-6 text-muted-foreground hover:text-destructive" :title="t('grid.clearFilter')" @click="emit('clearLocalFilter', summary.columnIndex)"><X class="h-3.5 w-3.5" /></Button>
+              </div>
+            </div>
+          </div>
+
+          <DataGridFilterBuilder
+            :rules="rules"
+            :columns="[...columns]"
+            :filtered-columns="filteredColumns"
+            :mode-options="modeOptions"
+            :column-search="columnSearch"
+            :disabled="!canUseWhereSearch"
+            :show-header="false"
+            :show-footer="false"
+            @add="emit('addRule')"
+            @apply="emit('applyFilters')"
+            @reset="emit('resetFilters')"
+            @clear="emit('clearFilters')"
+            @remove="emit('removeRule', $event)"
+            @update-rule="updateRule"
+            @update:column-search="emit('update:columnSearch', $event)"
+          />
+        </PopoverContent>
+      </Popover>
+      <DataGridConditionEditor
+        :model-value="whereInput"
+        kind="where"
+        :columns="columns"
+        :history-scope="historyScope"
+        placeholder="WHERE"
+        :history-empty-text="t('grid.conditionHistoryEmpty')"
+        :history-no-matches-text="t('grid.conditionHistoryNoMatches')"
+        :disabled="!canUseWhereSearch"
+        :compact="compact"
+        :apply="applyWhere"
+        :clear="clearWhere"
+        @update:model-value="emit('update:whereInput', $event)"
+      />
+    </div>
+    <button
+      type="button"
+      class="group relative flex w-2 shrink-0 cursor-col-resize items-center justify-center border-l border-r border-border/80 bg-muted/15 hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
+      aria-label="Resize WHERE and ORDER BY"
+      @mousedown="onResizeStart"
+      @dblclick.stop="resetWidth"
+    >
+      <span class="h-5 w-px bg-border group-hover:bg-primary/60" />
+    </button>
+    <div class="flex flex-1 items-center px-2 py-0.5 border-r min-w-0">
+      <DataGridConditionEditor
+        :model-value="orderByInput"
+        kind="orderBy"
+        :columns="columns"
+        :history-scope="historyScope"
+        placeholder="ORDER BY"
+        :history-empty-text="t('grid.conditionHistoryEmpty')"
+        :history-no-matches-text="t('grid.conditionHistoryNoMatches')"
+        :compact="compact"
+        :apply="applyOrderBy"
+        :clear="clearOrderBy"
+        @update:model-value="emit('update:orderByInput', $event)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/desktop/src/components/grid/DataGridSearchBar.vue b/apps/desktop/src/components/grid/DataGridSearchBar.vue
new file mode 100644
index 0000000000..9e430a1005
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridSearchBar.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { Search, X } from "@lucide/vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  open: boolean;
+  suggestions: string[];
+  suggestionIndex: number;
+  matchCount: number;
+  currentMatchIndex: number;
+  hasDeferredSearchText: boolean;
+}>();
+
+const searchText = defineModel<string>("text", { default: "" });
+const emit = defineEmits<{
+  keydown: [event: KeyboardEvent];
+  close: [];
+  acceptSuggestion: [index: number];
+  hoverSuggestion: [index: number];
+}>();
+
+const searchInput = ref<HTMLInputElement>();
+
+function onSuggestionMouseDown(event: MouseEvent, index: number) {
+  event.preventDefault();
+  emit("acceptSuggestion", index);
+}
+
+defineExpose({
+  focus: (select = false) => {
+    searchInput.value?.focus();
+    if (select) searchInput.value?.select();
+  },
+});
+</script>
+
+<template>
+  <Transition enter-active-class="transition-opacity duration-150" leave-active-class="transition-opacity duration-100" enter-from-class="opacity-0" leave-to-class="opacity-0">
+    <div v-if="props.open" class="absolute top-1 right-2 z-20 flex items-center gap-1 px-2 py-1 bg-background border rounded-md shadow-md">
+      <Search class="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+      <input
+        ref="searchInput"
+        v-model="searchText"
+        type="search"
+        autocapitalize="off"
+        autocomplete="off"
+        autocorrect="off"
+        spellcheck="false"
+        class="w-48 h-5 min-w-0 text-xs bg-transparent outline-none placeholder:text-muted-foreground"
+        :placeholder="t('grid.search')"
+        @keydown="emit('keydown', $event)"
+      />
+      <div v-if="props.suggestions.length > 0" class="absolute top-full right-0 mt-0.5 z-50 min-w-[180px] rounded-md border bg-popover text-popover-foreground shadow-md">
+        <div
+          v-for="(suggestion, index) in props.suggestions"
+          :key="suggestion"
+          class="flex items-center px-3 py-1.5 text-xs cursor-pointer"
+          :class="index === props.suggestionIndex ? 'bg-accent text-accent-foreground' : 'hover:bg-gray-200 dark:hover:bg-gray-800'"
+          @mousedown="onSuggestionMouseDown($event, index)"
+          @mouseenter="emit('hoverSuggestion', index)"
+        >
+          <Search class="w-3 h-3 mr-2 text-muted-foreground shrink-0" />
+          <span>{{ suggestion }}</span>
+        </div>
+      </div>
+      <span v-if="props.matchCount > 0" class="text-xs text-muted-foreground shrink-0">{{ props.currentMatchIndex + 1 }}/{{ props.matchCount }}</span>
+      <span v-else-if="props.hasDeferredSearchText" class="text-xs text-muted-foreground shrink-0">0</span>
+      <button type="button" class="text-muted-foreground hover:text-foreground shrink-0" @click="emit('close')"><X class="w-3.5 h-3.5" /></button>
+    </div>
+  </Transition>
+</template>
diff --git a/apps/desktop/src/components/grid/DataGridToolbar.vue b/apps/desktop/src/components/grid/DataGridToolbar.vue
new file mode 100644
index 0000000000..28328aab82
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridToolbar.vue
@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Check, Eye, Loader2, Plus, RefreshCcw, RotateCcw, Rows3, Save, TableProperties, Timer, Upload } from "@lucide/vue";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+  dataGridToolbarIntervalOptions,
+  isDataGridToolbarCapabilityDisabled,
+  isDataGridToolbarCapabilityVisible,
+  selectDataGridToolbarAutoRefreshInterval,
+  selectDataGridToolbarExportItem,
+  toggleDataGridToolbarAutoRefresh,
+  triggerDataGridToolbarAction,
+  type DataGridToolbarActionCapability,
+  type DataGridToolbarAutoRefreshCapability,
+  type DataGridToolbarExportCapability,
+  type DataGridToolbarSaveCapability,
+} from "@/lib/dataGrid/dataGridToolbar";
+
+const props = defineProps<{
+  compact?: boolean;
+  refresh: DataGridToolbarActionCapability;
+  autoRefresh?: DataGridToolbarAutoRefreshCapability;
+  addRow?: DataGridToolbarActionCapability;
+  exportData?: DataGridToolbarExportCapability;
+  transpose?: DataGridToolbarActionCapability;
+  tableInfo?: DataGridToolbarActionCapability;
+  preview?: DataGridToolbarActionCapability;
+  save?: DataGridToolbarSaveCapability;
+  rollback?: DataGridToolbarActionCapability;
+}>();
+
+const actionButtonClass = computed(() => ["data-grid-topbar-action-button h-5 shrink-0 px-1.5 text-xs", props.compact ? "data-grid-topbar-action-button--compact" : ""]);
+const autoRefreshIntervals = computed(() => (props.autoRefresh ? dataGridToolbarIntervalOptions(props.autoRefresh.intervalOptions, props.autoRefresh.intervalSeconds) : []));
+
+function actionLabelClass() {
+  return { "data-grid-topbar-action-label--compact": props.compact };
+}
+</script>
+
+<template>
+  <div class="flex shrink-0 items-center gap-1 px-1">
+    <slot name="leading" />
+
+    <Tooltip v-if="isDataGridToolbarCapabilityVisible(refresh)">
+      <TooltipTrigger as-child>
+        <Button variant="ghost" size="sm" :class="actionButtonClass" :disabled="isDataGridToolbarCapabilityDisabled(refresh)" @click="void triggerDataGridToolbarAction(refresh)">
+          <Loader2 v-if="refresh.loading" class="data-grid-topbar-action-icon h-3 w-3 animate-spin" />
+          <RefreshCcw v-else class="data-grid-topbar-action-icon h-3 w-3" />
+          <span class="data-grid-topbar-action-label" :class="actionLabelClass()">{{ refresh.label }}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">{{ refresh.tooltip ?? refresh.label }}</TooltipContent>
+    </Tooltip>
+
+    <DropdownMenu v-if="isDataGridToolbarCapabilityVisible(autoRefresh)">
+      <DropdownMenuTrigger as-child>
+        <Button
+          variant="ghost"
+          size="sm"
+          :class="[...actionButtonClass, autoRefresh?.enabled ? 'bg-primary/10 text-primary hover:bg-primary/15' : 'text-muted-foreground hover:text-foreground']"
+          :disabled="isDataGridToolbarCapabilityDisabled(autoRefresh)"
+          :title="autoRefresh?.label"
+          :aria-label="autoRefresh?.label"
+          :aria-pressed="autoRefresh?.enabled"
+        >
+          <Timer class="data-grid-topbar-action-icon h-3 w-3" />
+          <span class="data-grid-topbar-action-label" :class="actionLabelClass()">{{ autoRefresh?.enabled ? `${autoRefresh.intervalSeconds}s` : autoRefresh?.shortLabel }}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" class="w-40">
+        <DropdownMenuItem class="gap-2" :disabled="autoRefresh?.disabled" @select="void toggleDataGridToolbarAutoRefresh(autoRefresh)">
+          <Check v-if="autoRefresh?.enabled" class="h-3.5 w-3.5" />
+          <span v-else class="h-3.5 w-3.5" />
+          {{ autoRefresh?.enabled ? autoRefresh.stopLabel : autoRefresh?.startLabel }}
+        </DropdownMenuItem>
+        <DropdownMenuItem v-for="seconds in autoRefreshIntervals" :key="seconds" class="gap-2" :disabled="autoRefresh?.disabled" @select="void selectDataGridToolbarAutoRefreshInterval(autoRefresh, seconds)">
+          <Check v-if="autoRefresh?.intervalSeconds === seconds" class="h-3.5 w-3.5" />
+          <span v-else class="h-3.5 w-3.5" />
+          {{ autoRefresh?.intervalLabel(seconds) }}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+
+    <slot name="navigation" />
+
+    <Tooltip v-if="isDataGridToolbarCapabilityVisible(addRow)">
+      <TooltipTrigger as-child>
+        <Button variant="ghost" size="sm" :class="actionButtonClass" :disabled="isDataGridToolbarCapabilityDisabled(addRow)" @click="void triggerDataGridToolbarAction(addRow)">
+          <Plus class="data-grid-topbar-action-icon h-3 w-3" />
+          <span class="data-grid-topbar-action-label" :class="actionLabelClass()">{{ addRow?.label }}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">{{ addRow?.tooltip ?? addRow?.label }}</TooltipContent>
+    </Tooltip>
+
+    <DropdownMenu v-if="isDataGridToolbarCapabilityVisible(exportData)">
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <DropdownMenuTrigger as-child>
+            <Button variant="ghost" size="sm" :class="actionButtonClass" :disabled="exportData?.disabled || !exportData?.items.length">
+              <Upload class="data-grid-topbar-action-icon h-3 w-3" />
+              <span class="data-grid-topbar-action-label" :class="actionLabelClass()">{{ exportData?.label }}</span>
+            </Button>
+          </DropdownMenuTrigger>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">{{ exportData?.label }}</TooltipContent>
+      </Tooltip>
+      <DropdownMenuContent align="end" class="min-w-52">
+        <template v-for="item in exportData?.items ?? []" :key="item.value">
+          <DropdownMenuSeparator v-if="item.separatorBefore" />
+          <DropdownMenuItem :disabled="item.disabled" @select="void selectDataGridToolbarExportItem(exportData, item.value)">
+            {{ item.label }}
+          </DropdownMenuItem>
+        </template>
+      </DropdownMenuContent>
+    </DropdownMenu>
+
+    <Tooltip v-if="isDataGridToolbarCapabilityVisible(transpose)">
+      <TooltipTrigger as-child>
+        <Button variant="ghost" size="sm" :class="[...actionButtonClass, transpose?.active ? 'bg-primary/10 text-primary hover:bg-primary/15' : '']" :disabled="isDataGridToolbarCapabilityDisabled(transpose)" :aria-pressed="transpose?.active" @click="void triggerDataGridToolbarAction(transpose)">
+          <Rows3 class="data-grid-topbar-action-icon h-3 w-3" />
+          <span class="data-grid-topbar-action-label" :class="actionLabelClass()">{{ transpose?.label }}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">{{ transpose?.tooltip ?? transpose?.label }}</TooltipContent>
+    </Tooltip>
+
+    <Tooltip v-if="isDataGridToolbarCapabilityVisible(tableInfo)">
+      <TooltipTrigger as-child>
+        <Button variant="ghost" size="sm" :class="[...actionButtonClass, tableInfo?.active ? 'bg-primary/10 text-primary hover:bg-primary/15' : '']" :disabled="isDataGridToolbarCapabilityDisabled(tableInfo)" :aria-pressed="tableInfo?.active" @click="void triggerDataGridToolbarAction(tableInfo)">
+          <TableProperties class="data-grid-topbar-action-icon h-3 w-3" />
+          <span class="data-grid-topbar-action-label" :class="actionLabelClass()">{{ tableInfo?.label }}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">{{ tableInfo?.tooltip ?? tableInfo?.label }}</TooltipContent>
+    </Tooltip>
+
+    <Tooltip v-if="isDataGridToolbarCapabilityVisible(preview)">
+      <TooltipTrigger as-child>
+        <Button variant="ghost" size="sm" :class="[...actionButtonClass, 'text-sky-600 hover:bg-sky-500/10 hover:text-sky-700']" :disabled="isDataGridToolbarCapabilityDisabled(preview)" @click="void triggerDataGridToolbarAction(preview)">
+          <Loader2 v-if="preview?.loading" class="data-grid-topbar-action-icon h-3 w-3 animate-spin" />
+          <Eye v-else class="data-grid-topbar-action-icon h-3 w-3" />
+          <span class="data-grid-topbar-action-label" :class="actionLabelClass()">{{ preview?.label }}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" class="max-w-sm">{{ preview?.tooltip ?? preview?.label }}</TooltipContent>
+    </Tooltip>
+
+    <Tooltip v-if="isDataGridToolbarCapabilityVisible(save)">
+      <TooltipTrigger as-child>
+        <Button variant="default" size="sm" :class="[...actionButtonClass, 'data-grid-topbar-action-button--commit relative']" :disabled="isDataGridToolbarCapabilityDisabled(save)" @click="void triggerDataGridToolbarAction(save)">
+          <Loader2 v-if="save?.loading" class="data-grid-topbar-action-icon h-3 w-3 animate-spin" />
+          <Save v-else-if="compact || !save?.pendingCount" class="data-grid-topbar-action-icon h-3 w-3" />
+          <span
+            v-if="save && save.pendingCount > 0"
+            :class="
+              compact
+                ? 'absolute -right-1 -top-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-300 px-1 text-[9px] font-semibold leading-none text-amber-950 shadow-[0_0_0_1px_rgba(120,53,15,0.16)] dark:bg-amber-400'
+                : 'mr-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-300 px-1 text-[9px] font-semibold leading-none text-amber-950 shadow-[0_0_0_1px_rgba(120,53,15,0.16)] dark:bg-amber-400'
+            "
+          >
+            {{ save.pendingCount }}
+          </span>
+          <span class="data-grid-topbar-action-label" :class="actionLabelClass()">{{ save?.label }}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" class="max-w-sm"
+        >{{ save?.tooltip ?? save?.label }}<template v-if="save?.shortcutLabel"> ({{ save.shortcutLabel }})</template></TooltipContent
+      >
+    </Tooltip>
+
+    <Tooltip v-if="isDataGridToolbarCapabilityVisible(rollback)">
+      <TooltipTrigger as-child>
+        <Button variant="outline" size="sm" :class="actionButtonClass" :disabled="isDataGridToolbarCapabilityDisabled(rollback)" @click="void triggerDataGridToolbarAction(rollback)">
+          <RotateCcw class="data-grid-topbar-action-icon h-3 w-3" />
+          <span class="data-grid-topbar-action-label" :class="actionLabelClass()">{{ rollback?.label }}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">{{ rollback?.tooltip ?? rollback?.label }}</TooltipContent>
+    </Tooltip>
+
+    <slot name="trailing" />
+  </div>
+</template>
+
+<style scoped>
+.data-grid-topbar-action-button {
+  align-items: center;
+  justify-content: center;
+  max-width: 9rem;
+  min-width: 1.25rem;
+  gap: 0;
+  line-height: 1;
+  overflow: hidden;
+  transition:
+    max-width var(--data-grid-topbar-transition-duration, 340ms) var(--data-grid-topbar-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)),
+    min-width var(--data-grid-topbar-transition-duration, 340ms) var(--data-grid-topbar-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)),
+    padding-inline var(--data-grid-topbar-transition-duration, 340ms) var(--data-grid-topbar-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)),
+    color 220ms ease,
+    background-color 220ms ease,
+    border-color 220ms ease;
+}
+
+.data-grid-topbar-action-button--compact {
+  max-width: 1.25rem;
+  min-width: 1.25rem;
+  padding-inline: 0;
+}
+
+.data-grid-topbar-action-button--commit.data-grid-topbar-action-button--compact {
+  overflow: visible;
+}
+
+.data-grid-topbar-action-icon {
+  display: block;
+  align-self: center;
+  flex-shrink: 0;
+  transition:
+    margin-inline-end var(--data-grid-topbar-transition-duration, 340ms) var(--data-grid-topbar-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)),
+    transform var(--data-grid-topbar-transition-duration, 340ms) var(--data-grid-topbar-transition-easing, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.data-grid-topbar-action-button:not(.data-grid-topbar-action-button--compact) .data-grid-topbar-action-icon {
+  margin-inline-end: 0.25rem;
+}
+
+.data-grid-topbar-action-button--compact .data-grid-topbar-action-icon {
+  margin-inline-end: 0;
+  transform: scale(0.96);
+}
+
+.data-grid-topbar-action-label {
+  display: inline-flex;
+  align-items: center;
+  height: 1rem;
+  max-width: 8rem;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: 1;
+  opacity: 1;
+  transform: translateX(0);
+  transition:
+    max-width var(--data-grid-topbar-transition-duration, 340ms) var(--data-grid-topbar-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)),
+    opacity 240ms ease 60ms,
+    transform var(--data-grid-topbar-transition-duration, 340ms) var(--data-grid-topbar-transition-easing, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.data-grid-topbar-action-label--compact {
+  max-width: 0;
+  opacity: 0;
+  transform: translateX(-4px);
+}
+</style>
diff --git a/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts b/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts
new file mode 100644
index 0000000000..b8f83fe147
--- /dev/null
+++ b/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts
@@ -0,0 +1,299 @@
+// @vitest-environment happy-dom
+
+import { nextTick } from "vue";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { dispatch, findAll, findOne, hostText, mountComponent } from "./vueHostHarness";
+import type { DataGridCellDetail } from "@/lib/dataGrid/dataGridDetail";
+
+const mocks = vi.hoisted(() => ({
+  editor: { create: vi.fn(), destroy: vi.fn(), setValue: vi.fn(), openSearch: vi.fn() },
+  updateSettings: vi.fn(),
+  renderWkt: vi.fn(),
+  panelCancel: vi.fn(),
+  panelOpenSearch: vi.fn(),
+}));
+
+vi.mock("vue-i18n", () => ({ useI18n: () => ({ t: (key: string) => key }) }));
+vi.mock("@lucide/vue", async () => {
+  const { createPassthroughStub } = await import("./vueHostHarness");
+  const icon = createPassthroughStub("Icon", "i");
+  return { Check: icon, ChevronLeft: icon, ChevronRight: icon, ChevronsLeft: icon, ChevronsRight: icon, Loader2: icon, Upload: icon, Search: icon, X: icon, Code2: icon, Copy: icon, Eye: icon, EyeOff: icon, Info: icon, Pencil: icon, Plus: icon, Trash2: icon };
+});
+
+vi.mock("@/components/ui/button", async () => ({ Button: (await import("./vueHostHarness")).createPassthroughStub("Button", "button") }));
+vi.mock("@/components/ui/input", async () => ({ Input: (await import("./vueHostHarness")).createPassthroughStub("Input", "input") }));
+vi.mock("@/components/ui/dialog", async () => {
+  const { createPassthroughStub } = await import("./vueHostHarness");
+  return { Dialog: createPassthroughStub("Dialog"), DialogContent: createPassthroughStub("DialogContent"), DialogFooter: createPassthroughStub("DialogFooter"), DialogHeader: createPassthroughStub("DialogHeader"), DialogTitle: createPassthroughStub("DialogTitle") };
+});
+vi.mock("@/components/ui/dropdown-menu", async () => {
+  const { createPassthroughStub } = await import("./vueHostHarness");
+  return { DropdownMenu: createPassthroughStub("DropdownMenu"), DropdownMenuContent: createPassthroughStub("DropdownMenuContent"), DropdownMenuItem: createPassthroughStub("DropdownMenuItem", "button"), DropdownMenuTrigger: createPassthroughStub("DropdownMenuTrigger") };
+});
+vi.mock("@/components/ui/popover", async () => {
+  const { createPassthroughStub } = await import("./vueHostHarness");
+  return { Popover: createPassthroughStub("Popover"), PopoverContent: createPassthroughStub("PopoverContent"), PopoverTrigger: createPassthroughStub("PopoverTrigger") };
+});
+vi.mock("@/components/ui/tooltip", async () => {
+  const { createPassthroughStub } = await import("./vueHostHarness");
+  return { Tooltip: createPassthroughStub("Tooltip"), TooltipContent: createPassthroughStub("TooltipContent"), TooltipTrigger: createPassthroughStub("TooltipTrigger") };
+});
+vi.mock("@/components/ui/select", async () => {
+  const { createPassthroughStub } = await import("./vueHostHarness");
+  return { Select: createPassthroughStub("Select"), SelectContent: createPassthroughStub("SelectContent"), SelectItem: createPassthroughStub("SelectItem"), SelectTrigger: createPassthroughStub("SelectTrigger"), SelectValue: createPassthroughStub("SelectValue") };
+});
+vi.mock("@/components/ui/tabs", async () => ({ TabsContent: (await import("./vueHostHarness")).createPassthroughStub("TabsContent") }));
+vi.mock("@/components/ui/LightDropdown.vue", async () => ({ default: (await import("./vueHostHarness")).createPassthroughStub("LightDropdown") }));
+vi.mock("@/components/ui/LightTooltip.vue", async () => ({ default: (await import("./vueHostHarness")).createPassthroughStub("LightTooltip") }));
+vi.mock("@/components/grid/TemporalCellEditor.vue", async () => ({ default: (await import("./vueHostHarness")).createPassthroughStub("TemporalCellEditor") }));
+vi.mock("@/composables/useCellDetailEditor", () => ({ useCellDetailEditor: () => mocks.editor }));
+vi.mock("@/composables/useTheme", () => ({ useTheme: () => ({ isDark: { value: false }, themePalette: { value: {} } }) }));
+vi.mock("@/stores/settingsStore", () => ({ useSettingsStore: () => ({ editorSettings: { cellDetailJsonFormatted: true, theme: "default", fontSize: 13, fontFamily: "monospace" }, updateEditorSettings: mocks.updateSettings }) }));
+vi.mock("@/lib/dataGrid/geometryPreview", () => ({ isHexGeometry: () => false, renderWktOnCanvas: mocks.renderWkt }));
+vi.mock("@/composables/useDataGridCellDetail", async () => {
+  const { ref } = await import("vue");
+  return {
+    useDataGridCellDetail: ({ onCancel }: { onCancel: () => void }) => {
+      mocks.panelCancel.mockImplementation(onCancel);
+      return { geometryPreviewOpen: ref(false), geometryCanvas: ref(), detailsEditorContainer: ref(), sideJsonPreviewContainer: ref(), openSearch: mocks.panelOpenSearch };
+    },
+  };
+});
+
+import DataGridCellDetailDialog from "@/components/grid/DataGridCellDetailDialog.vue";
+import DataGridCellDetailPanel from "@/components/grid/DataGridCellDetailPanel.vue";
+import DataGridColumnHeader from "@/components/grid/DataGridColumnHeader.vue";
+import DataGridFilterBuilder from "@/components/grid/DataGridFilterBuilder.vue";
+import DataGridPagination from "@/components/grid/DataGridPagination.vue";
+import DataGridSearchBar from "@/components/grid/DataGridSearchBar.vue";
+
+function detail(patch: Partial<DataGridCellDetail> = {}): DataGridCellDetail {
+  return {
+    rowNumber: 1,
+    rowId: 0,
+    colIndex: 0,
+    column: "payload",
+    type: "JSON",
+    comment: "",
+    value: '{"a":1}',
+    rawValue: '{"a":1}',
+    rawValuePreview: '{"a":1}',
+    displayValue: '{"a":1}',
+    displayValuePreview: '{"a":1}',
+    isValuePreviewTruncated: false,
+    imagePreviewUrl: null,
+    length: 7,
+    formattedJson: '{\n  "a": 1\n}',
+    isEditable: true,
+    ...patch,
+  };
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("DataGridSearchBar", () => {
+  it("focuses/selects the input and forwards keyboard and suggestion interactions", () => {
+    const keydown = vi.fn();
+    const acceptSuggestion = vi.fn();
+    const hoverSuggestion = vi.fn();
+    const close = vi.fn();
+    const mounted = mountComponent(DataGridSearchBar, {
+      open: true,
+      text: "pay",
+      suggestions: ["payload"],
+      suggestionIndex: 0,
+      matchCount: 2,
+      currentMatchIndex: 0,
+      hasDeferredSearchText: false,
+      onKeydown: keydown,
+      onAcceptSuggestion: acceptSuggestion,
+      onHoverSuggestion: hoverSuggestion,
+      onClose: close,
+    });
+    const input = findOne(mounted.root, (node) => node.type === "input");
+
+    mounted.exposed.value.focus(true);
+    expect(input.focused).toBe(true);
+    expect(input.selected).toBe(true);
+    dispatch(input, "keydown", { key: "Enter" });
+    expect(keydown).toHaveBeenCalledWith(expect.objectContaining({ key: "Enter" }));
+
+    const suggestion = findOne(mounted.root, (node) => hostText(node) === "payload" && !!node.props.onMousedown);
+    const mouseDown = dispatch(suggestion, "mousedown");
+    expect(mouseDown.defaultPrevented).toBe(true);
+    expect(acceptSuggestion).toHaveBeenCalledWith(0);
+    dispatch(suggestion, "mouseenter");
+    expect(hoverSuggestion).toHaveBeenCalledWith(0);
+
+    const closeButton = findOne(mounted.root, (node) => node.type === "button");
+    dispatch(closeButton, "click");
+    expect(close).toHaveBeenCalledOnce();
+  });
+});
+
+describe("DataGridPagination", () => {
+  it("enforces first/previous/next/last disabled boundaries", async () => {
+    const firstPage = vi.fn();
+    const previousPage = vi.fn();
+    const nextPage = vi.fn();
+    const lastPage = vi.fn();
+    const mounted = mountComponent(DataGridPagination, {
+      selectionSummary: null,
+      selectionSummarySumText: "",
+      loading: false,
+      infiniteScrollEnabled: false,
+      infiniteScrollAllLoaded: false,
+      pageSize: 100,
+      customPageSizeInput: "",
+      pageSizeMenuItems: [],
+      exportMenuItems: [],
+      currentPage: 1,
+      canGoNextPage: false,
+      canJumpLastPage: false,
+      onFirstPage: firstPage,
+      onPreviousPage: previousPage,
+      onNextPage: nextPage,
+      onLastPage: lastPage,
+    });
+    const navigation = findAll(mounted.root, (node) => node.props["data-stub"] === "Button" && node.props.class === "h-5 w-5 shrink-0");
+
+    expect(navigation.map((node) => node.props.disabled)).toEqual([true, true, true, true]);
+    navigation.forEach((node) => dispatch(node, "click"));
+    expect(firstPage).not.toHaveBeenCalled();
+    expect(previousPage).not.toHaveBeenCalled();
+    expect(nextPage).not.toHaveBeenCalled();
+    expect(lastPage).not.toHaveBeenCalled();
+
+    await mounted.setProps({ currentPage: 2, canGoNextPage: true, canJumpLastPage: true });
+    const enabledNavigation = findAll(mounted.root, (node) => node.props["data-stub"] === "Button" && node.props.class === "h-5 w-5 shrink-0");
+    expect(enabledNavigation.map((node) => node.props.disabled)).toEqual([false, false, false, false]);
+    enabledNavigation.forEach((node) => dispatch(node, "click"));
+    expect(firstPage).toHaveBeenCalledOnce();
+    expect(previousPage).toHaveBeenCalledOnce();
+    expect(nextPage).toHaveBeenCalledOnce();
+    expect(lastPage).toHaveBeenCalledOnce();
+  });
+});
+
+describe("DataGridColumnHeader", () => {
+  it("cancels resize-handle clicks without leaking header click events", () => {
+    const click = vi.fn();
+    const clickCapture = vi.fn();
+    const resizeStart = vi.fn();
+    const autoFit = vi.fn();
+    const mounted = mountComponent(DataGridColumnHeader, {
+      name: "id",
+      actualColumnIndex: 0,
+      visibleColumnIndex: 0,
+      dark: true,
+      copyColumnNameLabel: "copy",
+      columnNameLabel: "name",
+      columnTypeLabel: "type",
+      columnCommentLabel: "comment",
+      onClick: click,
+      onClickCapture: clickCapture,
+      onResizeStart: resizeStart,
+      onAutoFit: autoFit,
+    });
+    const handle = findOne(mounted.root, (node) => node.props["data-column-resize-handle"] === "");
+    const header = findOne(mounted.root, (node) => node.props["data-grid-column-index"] === 0);
+    expect(String(header.props.class)).toContain("data-grid-header-cell--dark");
+
+    const down = dispatch(handle, "mousedown");
+    expect(down.propagationStopped).toBe(true);
+    expect(resizeStart).toHaveBeenCalledOnce();
+    const handleClick = dispatch(handle, "click");
+    expect(handleClick.propagationStopped).toBe(true);
+    expect(handleClick.defaultPrevented).toBe(true);
+    expect(click).not.toHaveBeenCalled();
+    expect(clickCapture).not.toHaveBeenCalled();
+    dispatch(handle, "dblclick");
+    expect(autoFit).toHaveBeenCalledOnce();
+  });
+});
+
+describe("DataGridFilterBuilder", () => {
+  it("isolates text-entry keys while preserving popup navigation keys", () => {
+    const mounted = mountComponent(DataGridFilterBuilder, { rules: [{ id: "r1", columnName: "id", mode: "equals", rawValue: "", rawEndValue: "", conjunction: "AND" }], columns: ["id"], filteredColumns: ["id"], modeOptions: [{ value: "equals", labelKey: "equals" }], columnSearch: "" });
+    const searchInput = findOne(mounted.root, (node) => node.type === "input" && node.props.placeholder === "grid.filterBuilderSearchColumns");
+
+    expect(dispatch(searchInput, "keydown", { key: "a" }).propagationStopped).toBe(true);
+    expect(dispatch(searchInput, "keydown", { key: "Backspace" }).propagationStopped).toBe(true);
+    expect(dispatch(searchInput, "keydown", { key: "ArrowDown" }).propagationStopped).toBe(false);
+    expect(dispatch(searchInput, "keydown", { key: "Process", isComposing: true }).propagationStopped).toBe(true);
+  });
+});
+
+describe("cell detail surfaces", () => {
+  it("copies the presented value, emits edit, closes, and replaces the JSON result", async () => {
+    const copyText = vi.fn();
+    const edit = vi.fn();
+    const updateOpen = vi.fn();
+    const mounted = mountComponent(DataGridCellDetailDialog, { open: true, detail: detail(), typeColorClass: () => "", openImagePreview: vi.fn(), copyText, canDownloadBinaryValue: () => false, downloadBinaryValue: vi.fn(), onEdit: edit, "onUpdate:open": updateOpen });
+    await nextTick();
+    await nextTick();
+
+    const copyValue = findOne(mounted.root, (node) => node.props.title === "grid.copyValue");
+    dispatch(copyValue, "click");
+    expect(copyText).toHaveBeenCalledWith('{\n  "a": 1\n}');
+    dispatch(
+      findOne(mounted.root, (node) => node.props.title === "grid.editValue"),
+      "click",
+    );
+    expect(edit).toHaveBeenCalledOnce();
+
+    await mounted.setProps({ detail: detail({ rawValue: '{"b":2}', formattedJson: '{\n  "b": 2\n}' }) });
+    expect(mocks.editor.setValue).toHaveBeenCalledWith('{\n  "b": 2\n}', "json");
+    await mounted.setProps({ detail: detail({ value: null, rawValue: "", formattedJson: "" }) });
+    expect(mocks.editor.destroy).toHaveBeenCalledOnce();
+
+    const dialog = findOne(mounted.root, (node) => node.props["data-stub"] === "Dialog");
+    dialog.props["onUpdate:open"](false);
+    expect(updateOpen).toHaveBeenCalledWith(false);
+  });
+
+  it("forwards panel edit/copy/cancel actions and exposes search", () => {
+    const startEdit = vi.fn();
+    const copyValue = vi.fn();
+    const cancel = vi.fn();
+    const mounted = mountComponent(DataGridCellDetailPanel, {
+      detail: detail({ formattedJson: "" }),
+      panelIsBottom: false,
+      metadataCollapsed: false,
+      valueFillsHeight: false,
+      editing: false,
+      sideJsonView: false,
+      showCompactJson: false,
+      canCompactJson: false,
+      typeColorClass: () => "",
+      canDownloadBinaryValue: () => false,
+      downloadBinaryValue: vi.fn(),
+      openImagePreview: vi.fn(),
+      canCopySqlCondition: () => true,
+      onStartEdit: startEdit,
+      onCopyValue: copyValue,
+      onCancel: cancel,
+    });
+
+    dispatch(
+      findOne(mounted.root, (node) => node.props.title === "grid.editValue"),
+      "click",
+    );
+    dispatch(
+      findOne(mounted.root, (node) => node.props.title === "grid.copyValue"),
+      "click",
+    );
+    dispatch(
+      findOne(mounted.root, (node) => node.type === "pre"),
+      "dblclick",
+    );
+    expect(startEdit).toHaveBeenCalledTimes(2);
+    expect(copyValue).toHaveBeenCalledOnce();
+    mocks.panelCancel();
+    expect(cancel).toHaveBeenCalledOnce();
+    mounted.exposed.value.openSearch();
+    expect(mocks.panelOpenSearch).toHaveBeenCalledOnce();
+  });
+});
diff --git a/apps/desktop/src/components/grid/__tests__/vueHostHarness.ts b/apps/desktop/src/components/grid/__tests__/vueHostHarness.ts
new file mode 100644
index 0000000000..31f83424ae
--- /dev/null
+++ b/apps/desktop/src/components/grid/__tests__/vueHostHarness.ts
@@ -0,0 +1,185 @@
+import { createRenderer, defineComponent, h, nextTick, reactive, ref, type Component } from "vue";
+
+export interface HostNode {
+  type: string;
+  props: Record<string, any>;
+  children: Array<HostNode | string>;
+  parent: HostNode | null;
+  focused: boolean;
+  selected: boolean;
+  value?: unknown;
+  listeners: Map<string, Array<(event: any) => void>>;
+  focus(): void;
+  select(): void;
+  addEventListener(name: string, listener: (event: any) => void): void;
+  removeEventListener(name: string, listener: (event: any) => void): void;
+}
+
+function createHostNode(type: string): HostNode {
+  const node: HostNode = {
+    type,
+    props: {},
+    children: [],
+    parent: null,
+    focused: false,
+    selected: false,
+    listeners: new Map(),
+    focus() {
+      node.focused = true;
+    },
+    select() {
+      node.selected = true;
+    },
+    addEventListener(name, listener) {
+      const listeners = node.listeners.get(name) ?? [];
+      listeners.push(listener);
+      node.listeners.set(name, listeners);
+    },
+    removeEventListener(name, listener) {
+      node.listeners.set(
+        name,
+        (node.listeners.get(name) ?? []).filter((candidate) => candidate !== listener),
+      );
+    },
+  };
+  return node;
+}
+
+function insert(child: HostNode, parent: HostNode, anchor?: HostNode | null) {
+  child.parent = parent;
+  if (!anchor) {
+    parent.children.push(child);
+    return;
+  }
+  const index = parent.children.indexOf(anchor);
+  parent.children.splice(index < 0 ? parent.children.length : index, 0, child);
+}
+
+const renderer = createRenderer<HostNode, HostNode>({
+  patchProp(node, key, _previous, next) {
+    if (next === null || next === undefined) delete node.props[key];
+    else node.props[key] = next;
+    if (key === "value") node.value = next;
+  },
+  insert,
+  remove(node) {
+    if (!node.parent) return;
+    const index = node.parent.children.indexOf(node);
+    if (index >= 0) node.parent.children.splice(index, 1);
+    node.parent = null;
+  },
+  createElement: createHostNode,
+  createText(text) {
+    const node = createHostNode("#text");
+    node.children = [text];
+    return node;
+  },
+  createComment(text) {
+    const node = createHostNode("#comment");
+    node.children = [text];
+    return node;
+  },
+  setText(node, text) {
+    node.children = [text];
+  },
+  setElementText(node, text) {
+    node.children = [text];
+  },
+  parentNode: (node) => node.parent,
+  nextSibling(node) {
+    if (!node.parent) return null;
+    const index = node.parent.children.indexOf(node);
+    return (node.parent.children[index + 1] as HostNode | undefined) ?? null;
+  },
+  setScopeId(node, id) {
+    node.props[id] = "";
+  },
+  cloneNode(node) {
+    return { ...node, props: { ...node.props }, children: [...node.children], parent: null, listeners: new Map(node.listeners) };
+  },
+  insertStaticContent(content, parent, anchor) {
+    const node = createHostNode("#static");
+    node.children = [content];
+    insert(node, parent, anchor);
+    return [node, node];
+  },
+});
+
+export function createPassthroughStub(name: string, tag = "div") {
+  return defineComponent({
+    name,
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+      return () => h(tag, { ...attrs, "data-stub": name }, [slots.default?.(), slots.content?.()]);
+    },
+  });
+}
+
+export function mountComponent(component: Component, initialProps: Record<string, unknown>) {
+  const props = reactive({ ...initialProps });
+  const componentRef = ref<any>();
+  const root = createHostNode("root");
+  const wrapper = defineComponent({
+    setup() {
+      return () => h(component, { ...props, ref: componentRef });
+    },
+  });
+  const app = renderer.createApp(wrapper);
+  app.mount(root);
+  return {
+    root,
+    exposed: componentRef,
+    async setProps(patch: Record<string, unknown>) {
+      Object.assign(props, patch);
+      await nextTick();
+    },
+    unmount() {
+      app.unmount();
+    },
+  };
+}
+
+export function findAll(node: HostNode, predicate: (node: HostNode) => boolean): HostNode[] {
+  const matches: HostNode[] = [];
+  if (predicate(node)) matches.push(node);
+  for (const child of node.children) {
+    if (typeof child !== "string") matches.push(...findAll(child, predicate));
+  }
+  return matches;
+}
+
+export function findOne(node: HostNode, predicate: (node: HostNode) => boolean): HostNode {
+  const match = findAll(node, predicate)[0];
+  if (!match) throw new Error("Expected host node was not rendered");
+  return match;
+}
+
+export function hostText(node: HostNode): string {
+  return node.children.map((child) => (typeof child === "string" ? child : hostText(child))).join("");
+}
+
+function eventPropName(name: string) {
+  return `on${name[0].toUpperCase()}${name.slice(1)}`;
+}
+
+export function dispatch(node: HostNode, name: string, overrides: Record<string, unknown> = {}) {
+  const event = {
+    type: name,
+    target: node,
+    currentTarget: node,
+    defaultPrevented: false,
+    propagationStopped: false,
+    preventDefault() {
+      event.defaultPrevented = true;
+    },
+    stopPropagation() {
+      event.propagationStopped = true;
+    },
+    ...overrides,
+  };
+  if (node.props.disabled) return event;
+  for (const listener of node.listeners.get(name) ?? []) listener(event);
+  const handler = node.props[eventPropName(name)];
+  for (const callback of Array.isArray(handler) ? handler : handler ? [handler] : []) callback(event);
+  return event;
+}
diff --git a/apps/desktop/src/composables/__tests__/useDataGridAsyncSurface.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridAsyncSurface.spec.ts
new file mode 100644
index 0000000000..8f1a7c5369
--- /dev/null
+++ b/apps/desktop/src/composables/__tests__/useDataGridAsyncSurface.spec.ts
@@ -0,0 +1,31 @@
+import { effectScope, nextTick, ref } from "vue";
+import { describe, expect, it } from "vitest";
+import { useDataGridAsyncSurface } from "@/composables/useDataGridAsyncSurface";
+
+describe("useDataGridAsyncSurface", () => {
+  it("defers mounting until first open and keeps the surface mounted afterward", async () => {
+    const open = ref(false);
+    const scope = effectScope();
+    const mounted = scope.run(() => useDataGridAsyncSurface(open))!;
+
+    expect(mounted.value).toBe(false);
+
+    open.value = true;
+    await nextTick();
+    expect(mounted.value).toBe(true);
+
+    open.value = false;
+    await nextTick();
+    expect(mounted.value).toBe(true);
+
+    scope.stop();
+  });
+
+  it("mounts immediately when restored with an already-open surface", () => {
+    const scope = effectScope();
+    const mounted = scope.run(() => useDataGridAsyncSurface(ref(true)))!;
+
+    expect(mounted.value).toBe(true);
+    scope.stop();
+  });
+});
diff --git a/apps/desktop/src/composables/__tests__/useDataGridAutoRefresh.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridAutoRefresh.spec.ts
new file mode 100644
index 0000000000..947136f6fd
--- /dev/null
+++ b/apps/desktop/src/composables/__tests__/useDataGridAutoRefresh.spec.ts
@@ -0,0 +1,32 @@
+import { computed, nextTick } from "vue";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useDataGridAutoRefresh } from "@/composables/useDataGridAutoRefresh";
+
+describe("useDataGridAutoRefresh", () => {
+  afterEach(() => vi.useRealTimers());
+
+  it("refreshes on the configured interval when enabled", async () => {
+    vi.useFakeTimers();
+    const refresh = vi.fn();
+    const autoRefresh = useDataGridAutoRefresh({ canRefresh: computed(() => true), refresh, initialIntervalSeconds: 5 });
+
+    autoRefresh.toggle();
+    vi.advanceTimersByTime(5000);
+    await nextTick();
+
+    expect(refresh).toHaveBeenCalledOnce();
+    autoRefresh.stop();
+  });
+
+  it("does not refresh while the operation is unavailable", () => {
+    vi.useFakeTimers();
+    const refresh = vi.fn();
+    const autoRefresh = useDataGridAutoRefresh({ canRefresh: computed(() => false), refresh, initialIntervalSeconds: 1 });
+
+    autoRefresh.toggle();
+    vi.advanceTimersByTime(1000);
+
+    expect(refresh).not.toHaveBeenCalled();
+    autoRefresh.stop();
+  });
+});
diff --git a/apps/desktop/src/composables/__tests__/useDataGridCanvasRuntime.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridCanvasRuntime.spec.ts
new file mode 100644
index 0000000000..bc74615fc2
--- /dev/null
+++ b/apps/desktop/src/composables/__tests__/useDataGridCanvasRuntime.spec.ts
@@ -0,0 +1,160 @@
+import { effectScope } from "vue";
+import { describe, expect, it, vi } from "vitest";
+import { useDataGridCanvasRuntime, type DataGridAnimationFrameDriver } from "@/composables/useDataGridCanvasRuntime";
+import { useDataGridScrollbars } from "@/composables/useDataGridScrollbars";
+
+function createFrameDriver() {
+  let nextId = 0;
+  const callbacks = new Map<number, FrameRequestCallback>();
+  const driver: DataGridAnimationFrameDriver = {
+    request(callback) {
+      const id = nextId++;
+      callbacks.set(id, callback);
+      return id;
+    },
+    cancel(id) {
+      callbacks.delete(id);
+    },
+  };
+  return { driver, callbacks, run: (id: number) => callbacks.get(id)?.(0) };
+}
+
+function createObserver() {
+  const observe = vi.fn();
+  const disconnect = vi.fn();
+  return { observer: { observe, disconnect } as unknown as ResizeObserver, observe, disconnect };
+}
+
+describe("data grid visual runtimes", () => {
+  it("coalesces canvas frames and cancels all resources on dispose", () => {
+    const frames = createFrameDriver();
+    const resize = createObserver();
+    const draw = vi.fn();
+    const viewport = { children: [] } as unknown as Element;
+    const runtime = useDataGridCanvasRuntime({
+      draw,
+      syncViewport: vi.fn(),
+      getViewport: () => viewport,
+      refreshPixelRatio: vi.fn(),
+      frameDriver: frames.driver,
+      createResizeObserver: () => resize.observer,
+    });
+
+    runtime.observeViewport();
+    runtime.scheduleDraw();
+    runtime.scheduleDraw();
+    runtime.schedulePixelRatioRefresh();
+    expect(frames.callbacks.size).toBe(2);
+
+    runtime.dispose();
+    expect(frames.callbacks.size).toBe(0);
+    expect(resize.disconnect).toHaveBeenCalledOnce();
+    expect(draw).not.toHaveBeenCalled();
+  });
+
+  it("keeps a large scroll burst within one scheduled draw frame", () => {
+    const frames = createFrameDriver();
+    const draw = vi.fn();
+    const runtime = useDataGridCanvasRuntime({
+      draw,
+      syncViewport: vi.fn(),
+      getViewport: () => ({ children: [] }) as unknown as Element,
+      frameDriver: frames.driver,
+    });
+
+    for (let index = 0; index < 10_000; index++) runtime.scheduleDraw();
+
+    expect(frames.callbacks.size).toBe(1);
+    const frameId = [...frames.callbacks.keys()][0];
+    frames.run(frameId);
+    expect(draw).toHaveBeenCalledOnce();
+    runtime.dispose();
+  });
+
+  it("keeps the latest drag coordinate and disconnects observed scroll content", () => {
+    const frames = createFrameDriver();
+    const resize = createObserver();
+    const horizontalDrag = vi.fn();
+    const child = { children: [] } as unknown as Element;
+    const scroller = { children: [child] } as unknown as Element;
+    const runtime = useDataGridScrollbars({
+      update: vi.fn(),
+      getScroller: () => scroller,
+      applyHorizontalDrag: horizontalDrag,
+      applyVerticalDrag: vi.fn(),
+      frameDriver: frames.driver,
+      createResizeObserver: () => resize.observer,
+    });
+
+    runtime.observeScroller();
+    runtime.scheduleHorizontalDrag(10);
+    runtime.scheduleHorizontalDrag(25);
+    runtime.flushHorizontalDrag();
+
+    expect(horizontalDrag).toHaveBeenCalledWith(25);
+    expect(resize.observe).toHaveBeenCalledTimes(2);
+    runtime.dispose();
+    expect(resize.disconnect).toHaveBeenCalledOnce();
+    expect(frames.callbacks.size).toBe(0);
+  });
+
+  it("tears down pending canvas work when its Vue scope stops", () => {
+    const frames = createFrameDriver();
+    const resize = createObserver();
+    const draw = vi.fn();
+    const syncViewport = vi.fn();
+    const scope = effectScope();
+    const runtime = scope.run(() =>
+      useDataGridCanvasRuntime({
+        draw,
+        syncViewport,
+        getViewport: () => ({ children: [] }) as unknown as Element,
+        frameDriver: frames.driver,
+        createResizeObserver: () => resize.observer,
+      }),
+    )!;
+
+    runtime.observeViewport();
+    runtime.scheduleDraw();
+    const lateDraw = [...frames.callbacks.values()][0];
+    scope.stop();
+
+    expect(runtime.disposed).toBe(true);
+    expect(runtime.active).toBe(false);
+    expect(frames.callbacks.size).toBe(0);
+    expect(resize.disconnect).toHaveBeenCalledOnce();
+    lateDraw(0);
+    expect(draw).not.toHaveBeenCalled();
+    expect(syncViewport).toHaveBeenCalledOnce();
+  });
+
+  it("does not revive scroll work after disposal", () => {
+    const frames = createFrameDriver();
+    const resize = createObserver();
+    const update = vi.fn();
+    const verticalDrag = vi.fn();
+    const runtime = useDataGridScrollbars({
+      update,
+      getScroller: () => ({ children: [] }) as unknown as Element,
+      applyHorizontalDrag: vi.fn(),
+      applyVerticalDrag: verticalDrag,
+      frameDriver: frames.driver,
+      createResizeObserver: () => resize.observer,
+    });
+
+    runtime.observeScroller();
+    runtime.scheduleVerticalDrag(42);
+    const lateCallbacks = [...frames.callbacks.values()];
+    runtime.dispose();
+    runtime.resume();
+    runtime.scheduleUpdate();
+    runtime.flushVerticalDrag();
+    lateCallbacks.forEach((callback) => callback(0));
+
+    expect(runtime.disposed).toBe(true);
+    expect(runtime.active).toBe(false);
+    expect(frames.callbacks.size).toBe(0);
+    expect(update).not.toHaveBeenCalled();
+    expect(verticalDrag).not.toHaveBeenCalled();
+  });
+});
diff --git a/apps/desktop/src/composables/__tests__/useDataGridColumnLayout.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridColumnLayout.spec.ts
new file mode 100644
index 0000000000..fca3e9a34b
--- /dev/null
+++ b/apps/desktop/src/composables/__tests__/useDataGridColumnLayout.spec.ts
@@ -0,0 +1,141 @@
+// @vitest-environment happy-dom
+
+import { effectScope, ref } from "vue";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { dataGridColumnOffsets, dataGridHorizontalColumnWindow, useDataGridColumnLayout, useDataGridColumnLayoutState } from "@/composables/useDataGridColumnLayout";
+
+describe("useDataGridColumnLayout", () => {
+  beforeEach(() => localStorage.clear());
+  it("builds cumulative offsets", () => {
+    expect(dataGridColumnOffsets([80, 120, 60])).toEqual([0, 80, 200, 260]);
+  });
+
+  it("windows columns while preserving spacer widths", () => {
+    const widths = [100, 100, 100, 100, 100];
+    const offsets = dataGridColumnOffsets(widths);
+    expect(dataGridHorizontalColumnWindow({ widths, offsets, columnCount: 5, scrollLeft: 250, viewportWidth: 100, rowNumberWidth: 40, bufferPx: 0 })).toEqual({ start: 2, end: 4, beforeWidth: 200, afterWidth: 100 });
+  });
+
+  it("returns an empty window without columns", () => {
+    expect(dataGridHorizontalColumnWindow({ widths: [], offsets: [0], columnCount: 0, scrollLeft: 0, viewportWidth: 0, rowNumberWidth: 40, bufferPx: 900 })).toEqual({
+      start: 0,
+      end: 0,
+      beforeWidth: 0,
+      afterWidth: 0,
+    });
+  });
+
+  it("owns visibility, null-column toggles, and persisted ordering", () => {
+    const scope = effectScope();
+    const state = scope.run(() =>
+      useDataGridColumnLayoutState({
+        columns: ref(["id", "name", "empty"]),
+        sourceColumns: ref(undefined),
+        commentByColumn: ref(new Map()),
+        displayableColumnIndexes: ref([0, 1, 2]),
+        allNullColumnIndexes: ref([2]),
+        columnOrderKeys: ref(["id\0\0", "name\0\0", "empty\0\0"]),
+        layoutScopeKey: ref("test-layout"),
+        tableScopeKey: ref(""),
+      }),
+    )!;
+
+    state.toggleColumnVisibility(1);
+    expect(state.visibleColumnIndexes.value).toEqual([0, 2]);
+    state.toggleAllNullColumns();
+    expect(state.visibleColumnIndexes.value).toEqual([0]);
+    state.showAllColumns();
+    expect(state.visibleColumnIndexes.value).toEqual([0, 1, 2]);
+    state.persistColumnOrder([1, 0, 2]);
+    expect(state.orderedDisplayableColumnIndexes.value).toEqual([1, 0, 2]);
+    scope.stop();
+  });
+
+  it("keeps a new resize active when the previous resize completion frame is pending", () => {
+    const frames = new Map<number, FrameRequestCallback>();
+    let nextFrame = 1;
+    vi.stubGlobal(
+      "requestAnimationFrame",
+      vi.fn((callback: FrameRequestCallback) => {
+        const frame = nextFrame++;
+        frames.set(frame, callback);
+        return frame;
+      }),
+    );
+    vi.stubGlobal(
+      "cancelAnimationFrame",
+      vi.fn((frame: number) => frames.delete(frame)),
+    );
+
+    const scope = effectScope();
+    const layout = scope.run(() =>
+      useDataGridColumnLayout({
+        columnNames: ref(["id"]),
+        visibleColumnIndexes: ref([0]),
+        renderedColumnWidths: ref([100]),
+        scrollLeft: ref(0),
+        viewportWidth: ref(400),
+        rowNumberWidth: 40,
+      }),
+    )!;
+
+    layout.startColumnHeaderResize(0, new MouseEvent("mousedown"));
+    window.dispatchEvent(new MouseEvent("mouseup"));
+    expect(frames.size).toBe(1);
+
+    layout.startColumnHeaderResize(0, new MouseEvent("mousedown"));
+    expect(frames.size).toBe(0);
+    expect(layout.columnHeaderResizeActive.value).toBe(true);
+
+    scope.stop();
+  });
+
+  it("commits column drag order and removes global interaction state on disposal", () => {
+    vi.stubGlobal(
+      "requestAnimationFrame",
+      vi.fn((callback: FrameRequestCallback) => {
+        callback(0);
+        return 1;
+      }),
+    );
+    vi.stubGlobal("cancelAnimationFrame", vi.fn());
+
+    const first = document.createElement("div");
+    first.dataset.visibleColIndex = "0";
+    first.getBoundingClientRect = () => ({ left: 0, width: 100, right: 100, top: 0, bottom: 20, height: 20, x: 0, y: 0, toJSON: () => ({}) });
+    const second = document.createElement("div");
+    second.dataset.visibleColIndex = "1";
+    second.getBoundingClientRect = () => ({ left: 100, width: 100, right: 200, top: 0, bottom: 20, height: 20, x: 100, y: 0, toJSON: () => ({}) });
+    const header = document.createElement("div");
+    header.append(first, second);
+    const persist = vi.fn();
+
+    const scope = effectScope();
+    const layout = scope.run(() =>
+      useDataGridColumnLayout({
+        columnNames: ref(["id", "name"]),
+        visibleColumnIndexes: ref([0, 1]),
+        renderedColumnWidths: ref([100, 100]),
+        scrollLeft: ref(0),
+        viewportWidth: ref(400),
+        rowNumberWidth: 40,
+        headerRef: ref(header),
+        onPersistColumnOrder: persist,
+      }),
+    )!;
+
+    layout.startColumnHeaderDrag(0, new PointerEvent("pointerdown", { button: 0, clientX: 20, clientY: 10 }));
+    window.dispatchEvent(new PointerEvent("pointermove", { clientX: 180, clientY: 10 }));
+    expect(document.body.style.userSelect).toBe("none");
+    window.dispatchEvent(new PointerEvent("pointerup", { clientX: 180, clientY: 10 }));
+    expect(persist).toHaveBeenCalledWith([1, 0]);
+    expect(document.body.style.userSelect).toBe("");
+
+    layout.startColumnHeaderDrag(0, new PointerEvent("pointerdown", { button: 0, clientX: 20, clientY: 10 }));
+    window.dispatchEvent(new PointerEvent("pointermove", { clientX: 180, clientY: 10 }));
+    scope.stop();
+    expect(document.body.style.userSelect).toBe("");
+    window.dispatchEvent(new PointerEvent("pointerup", { clientX: 180, clientY: 10 }));
+    expect(persist).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/apps/desktop/src/composables/__tests__/useDataGridColumnResize.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridColumnResize.spec.ts
index a87f11a4e1..8e274b46ee 100644
--- a/apps/desktop/src/composables/__tests__/useDataGridColumnResize.spec.ts
+++ b/apps/desktop/src/composables/__tests__/useDataGridColumnResize.spec.ts
@@ -1,6 +1,6 @@
 import { computed, nextTick, ref } from "vue";
-import { describe, expect, it, vi } from "vitest";
-import { DATA_GRID_COL_AUTO_FIT_MAX_WIDTH, DATA_GRID_COL_MAX_WIDTH, DATA_GRID_COL_MIN_WIDTH } from "@/lib/dataGrid/dataGridColumnWidth";
+import { describe, expect, it } from "vitest";
+import { DATA_GRID_COL_AUTO_FIT_MAX_WIDTH, DATA_GRID_COL_MIN_WIDTH } from "@/lib/dataGrid/dataGridColumnWidth";
 import { DATA_GRID_ROW_NUM_WIDTH, resizeDataGridColumnWidth, useDataGridColumnResize } from "@/composables/useDataGridColumnResize";
 
 function createResizeState(options: { columns: string[]; rows: Array<Array<string | number | boolean | null>>; columnIndexes?: number[]; density?: "compact" | "standard" | "comfortable"; compactColumnHeaderActions?: boolean }) {
diff --git a/apps/desktop/src/composables/__tests__/useDataGridConditionEditor.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridConditionEditor.spec.ts
new file mode 100644
index 0000000000..699f8f91fc
--- /dev/null
+++ b/apps/desktop/src/composables/__tests__/useDataGridConditionEditor.spec.ts
@@ -0,0 +1,137 @@
+import { effectScope, nextTick, ref } from "vue";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useDataGridConditionEditor } from "@/composables/useDataGridConditionEditor";
+import { rememberDataGridConditionHistory } from "@/lib/dataGrid/dataGridConditionHistory";
+
+const storage = new Map<string, string>();
+vi.stubGlobal("localStorage", {
+  getItem: (key: string) => storage.get(key) ?? null,
+  setItem: (key: string, value: string) => storage.set(key, value),
+  removeItem: (key: string) => storage.delete(key),
+  clear: () => storage.clear(),
+});
+
+function keyboardEvent(key: string) {
+  return { key, shiftKey: false, preventDefault: vi.fn() } as unknown as KeyboardEvent;
+}
+
+describe("useDataGridConditionEditor", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.useRealTimers();
+  });
+
+  it("replaces the active token and supports clamped keyboard navigation", async () => {
+    const value = ref("status = cus");
+    const editor = useDataGridConditionEditor({
+      kind: "where",
+      value,
+      columns: ["customer_id", "customer_name"],
+      historyScope: {},
+    });
+
+    value.value = "status = cust";
+    await nextTick();
+    await vi.waitFor(() => expect(editor.suggestions.value.map((item) => item.value)).toEqual(["customer_id", "customer_name"]));
+    expect(editor.navigate(1)).toBe(true);
+    expect(editor.highlightedIndex.value).toBe(1);
+    expect(editor.navigate(1)).toBe(true);
+    expect(editor.highlightedIndex.value).toBe(1);
+    expect(editor.accept()).toBe(true);
+    expect(value.value).toBe("status = customer_name");
+  });
+
+  it("ignores stale asynchronous suggestion responses", async () => {
+    vi.useFakeTimers();
+    const value = ref("");
+    const resolvers = new Map<string, (values: string[]) => void>();
+    const editor = useDataGridConditionEditor({
+      kind: "where",
+      value,
+      historyScope: {},
+      suggestionProvider: ({ token }) => new Promise((resolve) => resolvers.set(token, resolve)),
+      suggestionDebounceMs: 10,
+    });
+
+    value.value = "cus";
+    await nextTick();
+    vi.advanceTimersByTime(10);
+    await nextTick();
+    value.value = "ord";
+    await nextTick();
+    vi.advanceTimersByTime(10);
+    await nextTick();
+
+    resolvers.get("ord")?.(["order_id"]);
+    await Promise.resolve();
+    expect(editor.suggestions.value.map((item) => item.value)).toEqual(["order_id"]);
+    resolvers.get("cus")?.(["customer_id"]);
+    await Promise.resolve();
+    expect(editor.suggestions.value.map((item) => item.value)).toEqual(["order_id"]);
+  });
+
+  it("loads, filters, accepts, and deletes scoped history", () => {
+    const scope = { connectionId: "connection", database: "db", tableName: "users" };
+    rememberDataGridConditionHistory("where", scope, "status = 'active'");
+    rememberDataGridConditionHistory("where", scope, "customer_id > 10");
+    const value = ref("status");
+    const editor = useDataGridConditionEditor({ kind: "where", value, historyScope: scope });
+
+    editor.openHistory();
+    expect(editor.suggestions.value.map((item) => item.value)).toEqual(["status = 'active'"]);
+    expect(editor.accept(0)).toBe(true);
+    expect(value.value).toBe("status = 'active'");
+
+    editor.openHistory();
+    editor.deleteHistory("status = 'active'");
+    expect(editor.suggestions.value).toEqual([]);
+    expect(editor.historyOpen.value).toBe(true);
+  });
+
+  it("aborts pending suggestion work when its scope is disposed", async () => {
+    vi.useFakeTimers();
+    const value = ref("");
+    const aborted = vi.fn();
+    const scope = effectScope();
+    scope.run(() => {
+      useDataGridConditionEditor({
+        kind: "orderBy",
+        value,
+        historyScope: {},
+        suggestionDebounceMs: 10,
+        suggestionProvider: ({ signal }) => {
+          signal.addEventListener("abort", aborted);
+          return new Promise(() => {});
+        },
+      });
+    });
+
+    value.value = "created";
+    await nextTick();
+    vi.advanceTimersByTime(10);
+    scope.stop();
+    expect(aborted).toHaveBeenCalledOnce();
+  });
+
+  it("maps Enter, Tab, arrows, and Escape without applying stale selections", async () => {
+    const value = ref("");
+    const editor = useDataGridConditionEditor({ kind: "orderBy", value, columns: ["name"], historyScope: {} });
+    value.value = "na";
+    await nextTick();
+    await vi.waitFor(() => expect(editor.suggestions.value).toHaveLength(1));
+
+    const down = keyboardEvent("ArrowDown");
+    expect(editor.handleKeydown(down)).toBe("navigate");
+    expect(down.preventDefault).toHaveBeenCalledOnce();
+    const tab = keyboardEvent("Tab");
+    expect(editor.handleKeydown(tab)).toBe("accept");
+    expect(value.value).toBe("name");
+
+    const enter = keyboardEvent("Enter");
+    expect(editor.handleKeydown(enter)).toBe("apply");
+    editor.openHistory();
+    const escape = keyboardEvent("Escape");
+    expect(editor.handleKeydown(escape)).toBe("dismiss");
+    expect(editor.dropdownOpen.value).toBe(false);
+  });
+});
diff --git a/apps/desktop/src/composables/__tests__/useDataGridFilterBuilder.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridFilterBuilder.spec.ts
new file mode 100644
index 0000000000..730e3bc019
--- /dev/null
+++ b/apps/desktop/src/composables/__tests__/useDataGridFilterBuilder.spec.ts
@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import { buildDataGridStructuredWhere, useDataGridFilterBuilder, type DataGridStructuredFilterRule } from "@/composables/useDataGridFilterBuilder";
+
+describe("useDataGridFilterBuilder", () => {
+  it("normalizes values when modes change", () => {
+    const builder = useDataGridFilterBuilder({ columns: ["id"], createId: () => "rule-1", isComplete: () => true, buildCondition: async () => "id = 1" });
+    builder.ensureRule();
+    builder.updateRule("rule-1", { rawValue: "1", rawEndValue: "2", mode: "is-null" });
+    expect(builder.rules.value[0]).toMatchObject({ rawValue: "", rawEndValue: "" });
+  });
+
+  it("skips disabled rules and applies conjunctions", async () => {
+    let nextId = 0;
+    const builder = useDataGridFilterBuilder({
+      columns: ["id", "name"],
+      createId: () => `rule-${++nextId}`,
+      isComplete: (rule) => !!rule.rawValue,
+      buildCondition: async (rule) => `${rule.columnName} = '${rule.rawValue}'`,
+    });
+    builder.ensureRule();
+    builder.updateRule("rule-1", { rawValue: "1" });
+    builder.addRule();
+    builder.updateRule("rule-2", { columnName: "name", rawValue: "Alice", conjunction: "OR" });
+    expect(await builder.apply()).toBe("(id = '1') OR (name = 'Alice')");
+  });
+
+  it("groups conditions in rule order", () => {
+    const rule = (id: string, conjunction: "AND" | "OR"): DataGridStructuredFilterRule => ({ id, columnName: id, mode: "equals", rawValue: id, rawEndValue: "", conjunction });
+    expect(
+      buildDataGridStructuredWhere([
+        { rule: rule("a", "AND"), condition: "a" },
+        { rule: rule("b", "AND"), condition: "b" },
+        { rule: rule("c", "OR"), condition: "c" },
+      ]),
+    ).toBe("((a) AND (b)) OR (c)");
+  });
+});
diff --git a/apps/desktop/src/composables/__tests__/useDataGridResultLifecycle.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridResultLifecycle.spec.ts
new file mode 100644
index 0000000000..896f8cfe51
--- /dev/null
+++ b/apps/desktop/src/composables/__tests__/useDataGridResultLifecycle.spec.ts
@@ -0,0 +1,28 @@
+import { nextTick, ref } from "vue";
+import { describe, expect, it } from "vitest";
+import { useDataGridResultLifecycle } from "@/composables/useDataGridResultLifecycle";
+
+describe("useDataGridResultLifecycle", () => {
+  it("invalidates operations when the result identity changes", async () => {
+    const result = ref<object>({ id: 1 });
+    const lifecycle = useDataGridResultLifecycle({ resultKey: result });
+    const operation = lifecycle.beginOperation();
+
+    result.value = { id: 2 };
+    await nextTick();
+
+    expect(lifecycle.isCurrent(operation)).toBe(false);
+    lifecycle.cleanup();
+  });
+
+  it("invalidates operations explicitly and cleanup is idempotent", () => {
+    const lifecycle = useDataGridResultLifecycle({ resultKey: ref({ id: 1 }) });
+    const operation = lifecycle.beginOperation();
+
+    lifecycle.invalidate();
+    lifecycle.cleanup();
+    lifecycle.cleanup();
+
+    expect(lifecycle.isCurrent(operation)).toBe(false);
+  });
+});
diff --git a/apps/desktop/src/composables/__tests__/useDataGridSearch.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridSearch.spec.ts
new file mode 100644
index 0000000000..4340ca5f0a
--- /dev/null
+++ b/apps/desktop/src/composables/__tests__/useDataGridSearch.spec.ts
@@ -0,0 +1,27 @@
+import { nextTick, ref } from "vue";
+import { describe, expect, it, vi } from "vitest";
+import { useDataGridSearch } from "@/composables/useDataGridSearch";
+
+describe("useDataGridSearch", () => {
+  it("debounces matching across columns and cells", async () => {
+    vi.useFakeTimers();
+    const search = useDataGridSearch({ columns: ["id", "name"], rows: [[1, "Alice"]], getCellText: (row, column) => String(row[column] ?? "") });
+    search.searchText.value = "ali";
+    await nextTick();
+    expect(search.matches.value).toEqual([]);
+    vi.advanceTimersByTime(150);
+    await nextTick();
+    expect(search.matches.value).toEqual([{ kind: "cell", displayRow: 0, col: 1 }]);
+    vi.useRealTimers();
+  });
+
+  it("suggests columns and replaces only the active token", async () => {
+    const columns = ref(["customer_id", "created_at"]);
+    const search = useDataGridSearch({ columns, rows: [], getCellText: () => "" });
+    search.searchText.value = "status = cus";
+    await nextTick();
+    expect(search.suggestions.value).toEqual(["customer_id"]);
+    expect(search.acceptSuggestion()).toBe(true);
+    expect(search.searchText.value).toBe("status = customer_id");
+  });
+});
diff --git a/apps/desktop/src/composables/__tests__/useDataGridSort.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridSort.spec.ts
new file mode 100644
index 0000000000..9d734b8ae4
--- /dev/null
+++ b/apps/desktop/src/composables/__tests__/useDataGridSort.spec.ts
@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { useDataGridSort } from "@/composables/useDataGridSort";
+
+describe("useDataGridSort", () => {
+  it("stores the selected database or local sort state", () => {
+    const sort = useDataGridSort();
+
+    sort.setSort("name", 2, "desc", "local");
+
+    expect(sort.sortColumn.value).toBe("name");
+    expect(sort.sortColumnIndex.value).toBe(2);
+    expect(sort.sortDirection.value).toBe("desc");
+    expect(sort.sortMode.value).toBe("local");
+  });
+
+  it("resets to the default unsorted state", () => {
+    const sort = useDataGridSort();
+    sort.setSort("name", 2, "desc", "local");
+
+    sort.clearSort();
+
+    expect(sort.sortColumn.value).toBeNull();
+    expect(sort.sortColumnIndex.value).toBeNull();
+    expect(sort.sortDirection.value).toBe("asc");
+    expect(sort.sortMode.value).toBe("database");
+  });
+});
diff --git a/apps/desktop/src/composables/useDataGridAsyncSurface.ts b/apps/desktop/src/composables/useDataGridAsyncSurface.ts
new file mode 100644
index 0000000000..1c392857b7
--- /dev/null
+++ b/apps/desktop/src/composables/useDataGridAsyncSurface.ts
@@ -0,0 +1,16 @@
+import { ref, toValue, watch, type MaybeRefOrGetter } from "vue";
+
+export function useDataGridAsyncSurface(open: MaybeRefOrGetter<boolean>) {
+  const mounted = ref(false);
+
+  watch(
+    () => toValue(open),
+    (value) => {
+      // Preserve the existing dialog instance after its chunk loads so closing it does not reset local UI state.
+      if (value) mounted.value = true;
+    },
+    { immediate: true },
+  );
+
+  return mounted;
+}
diff --git a/apps/desktop/src/composables/useDataGridAutoRefresh.ts b/apps/desktop/src/composables/useDataGridAutoRefresh.ts
new file mode 100644
index 0000000000..1e37b86653
--- /dev/null
+++ b/apps/desktop/src/composables/useDataGridAutoRefresh.ts
@@ -0,0 +1,51 @@
+import { onBeforeUnmount, ref, type ComputedRef } from "vue";
+
+export interface UseDataGridAutoRefreshOptions {
+  canRefresh: ComputedRef<boolean>;
+  refresh: () => void | Promise<void>;
+  initialIntervalSeconds?: number;
+}
+
+export function useDataGridAutoRefresh(options: UseDataGridAutoRefreshOptions) {
+  const intervalSeconds = ref(options.initialIntervalSeconds ?? 10);
+  const enabled = ref(false);
+  let timer: ReturnType<typeof setInterval> | undefined;
+
+  function stop() {
+    if (timer !== undefined) clearInterval(timer);
+    timer = undefined;
+  }
+
+  function tick() {
+    if (!enabled.value || !options.canRefresh.value) return;
+    void options.refresh();
+  }
+
+  function start() {
+    stop();
+    if (!enabled.value) return;
+    timer = setInterval(tick, intervalSeconds.value * 1000);
+  }
+
+  function setIntervalSeconds(seconds: number) {
+    intervalSeconds.value = seconds;
+    if (enabled.value) start();
+  }
+
+  function toggle() {
+    enabled.value = !enabled.value;
+    if (enabled.value) start();
+    else stop();
+  }
+
+  onBeforeUnmount(stop);
+
+  return {
+    intervalSeconds,
+    enabled,
+    start,
+    stop,
+    setIntervalSeconds,
+    toggle,
+  };
+}
diff --git a/apps/desktop/src/composables/useDataGridCanvasRuntime.ts b/apps/desktop/src/composables/useDataGridCanvasRuntime.ts
new file mode 100644
index 0000000000..56619a311c
--- /dev/null
+++ b/apps/desktop/src/composables/useDataGridCanvasRuntime.ts
@@ -0,0 +1,116 @@
+import { getCurrentScope, onScopeDispose } from "vue";
+
+export interface DataGridAnimationFrameDriver {
+  request(callback: FrameRequestCallback): number;
+  cancel(frameId: number): void;
+}
+
+export interface DataGridCanvasRuntimeOptions {
+  draw(): void;
+  syncViewport(): void;
+  getViewport(): Element | null;
+  refreshPixelRatio?: () => void;
+  frameDriver?: DataGridAnimationFrameDriver;
+  createResizeObserver?: (callback: ResizeObserverCallback) => ResizeObserver | null;
+  startPaused?: boolean;
+}
+
+export interface DataGridCanvasRuntime {
+  readonly active: boolean;
+  readonly disposed: boolean;
+  scheduleDraw(): void;
+  drawNow(): void;
+  schedulePixelRatioRefresh(): void;
+  observeViewport(): void;
+  pause(): void;
+  resume(): void;
+  dispose(): void;
+}
+
+function defaultFrameDriver(): DataGridAnimationFrameDriver {
+  return {
+    request: (callback) => requestAnimationFrame(callback),
+    cancel: (frameId) => cancelAnimationFrame(frameId),
+  };
+}
+
+function defaultResizeObserverFactory(callback: ResizeObserverCallback): ResizeObserver | null {
+  return typeof ResizeObserver === "undefined" ? null : new ResizeObserver(callback);
+}
+
+export function useDataGridCanvasRuntime(options: DataGridCanvasRuntimeOptions): DataGridCanvasRuntime {
+  const frameDriver = options.frameDriver ?? defaultFrameDriver();
+  const createResizeObserver = options.createResizeObserver ?? defaultResizeObserverFactory;
+  let active = !options.startPaused;
+  let disposed = false;
+  let drawFrame: number | null = null;
+  let pixelRatioFrame: number | null = null;
+  let resizeObserver: ResizeObserver | null = null;
+
+  const cancelFrames = () => {
+    if (drawFrame !== null) frameDriver.cancel(drawFrame);
+    if (pixelRatioFrame !== null) frameDriver.cancel(pixelRatioFrame);
+    drawFrame = null;
+    pixelRatioFrame = null;
+  };
+
+  const runtime: DataGridCanvasRuntime = {
+    get active() {
+      return active;
+    },
+    get disposed() {
+      return disposed;
+    },
+    scheduleDraw() {
+      if (!active || disposed || drawFrame !== null) return;
+      drawFrame = frameDriver.request(() => {
+        drawFrame = null;
+        if (active && !disposed) options.draw();
+      });
+    },
+    drawNow() {
+      if (!active || disposed) return;
+      if (drawFrame !== null) frameDriver.cancel(drawFrame);
+      drawFrame = null;
+      options.draw();
+    },
+    schedulePixelRatioRefresh() {
+      if (!active || disposed || pixelRatioFrame !== null || !options.refreshPixelRatio) return;
+      pixelRatioFrame = frameDriver.request(() => {
+        pixelRatioFrame = null;
+        if (active && !disposed) options.refreshPixelRatio?.();
+      });
+    },
+    observeViewport() {
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+      if (!active || disposed) return;
+      options.syncViewport();
+      const viewport = options.getViewport();
+      if (!viewport) return;
+      resizeObserver = createResizeObserver(() => {
+        if (active && !disposed) options.syncViewport();
+      });
+      resizeObserver?.observe(viewport);
+    },
+    pause() {
+      active = false;
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+      cancelFrames();
+    },
+    resume() {
+      if (disposed) return;
+      active = true;
+      runtime.observeViewport();
+    },
+    dispose() {
+      if (disposed) return;
+      runtime.pause();
+      disposed = true;
+    },
+  };
+
+  if (getCurrentScope()) onScopeDispose(runtime.dispose);
+  return runtime;
+}
diff --git a/apps/desktop/src/composables/useDataGridCellDetail.ts b/apps/desktop/src/composables/useDataGridCellDetail.ts
new file mode 100644
index 0000000000..9638f8b4a8
--- /dev/null
+++ b/apps/desktop/src/composables/useDataGridCellDetail.ts
@@ -0,0 +1,67 @@
+import { nextTick, ref, watch, type Ref } from "vue";
+import { useCellDetailEditor, type UseCellDetailEditorReturn } from "@/composables/useCellDetailEditor";
+import { useTheme } from "@/composables/useTheme";
+import { useSettingsStore } from "@/stores/settingsStore";
+import { renderWktOnCanvas } from "@/lib/dataGrid/geometryPreview";
+import type { DataGridCellDetail } from "@/lib/dataGrid/dataGridDetail";
+
+export function useDataGridCellDetail(options: { detail: Ref<DataGridCellDetail>; editValue: Ref<string>; onCancel: () => void }) {
+  const settingsStore = useSettingsStore();
+  const { isDark, themePalette } = useTheme();
+  const geometryPreviewOpen = ref(false);
+  const geometryCanvas = ref<HTMLCanvasElement | null>(null);
+  const detailsEditorContainer = ref<HTMLElement>();
+  const sideJsonPreviewContainer = ref<HTMLElement>();
+  let detailsEditor: UseCellDetailEditorReturn | null = null;
+  let sideJsonEditor: UseCellDetailEditorReturn | null = null;
+
+  const editorOptions = () => ({
+    editorTheme: () => settingsStore.editorSettings.theme,
+    appAppearance: () => (isDark.value ? "dark" : "light") as import("@/lib/app/appTheme").AppThemeAppearance,
+    appPalette: () => themePalette.value,
+    fontSize: () => settingsStore.editorSettings.fontSize,
+    fontFamily: () => settingsStore.editorSettings.fontFamily,
+  });
+
+  watch(geometryPreviewOpen, async (open) => {
+    if (!open) return;
+    await nextTick();
+    const canvas = geometryCanvas.value;
+    const detail = options.detail.value;
+    if (canvas && detail.value !== null && detail.value !== undefined) renderWktOnCanvas(canvas, String(detail.value));
+  });
+
+  watch(detailsEditorContainer, async (element) => {
+    if (element && !detailsEditor) {
+      detailsEditor = useCellDetailEditor({ onChange: (value) => (options.editValue.value = value), onEscape: options.onCancel, ...editorOptions() });
+      await detailsEditor.create(element, options.editValue.value, options.detail.value.type);
+    } else if (!element && detailsEditor) {
+      detailsEditor.destroy();
+      detailsEditor = null;
+    }
+  });
+
+  watch(sideJsonPreviewContainer, async (element) => {
+    if (element && !sideJsonEditor) {
+      sideJsonEditor = useCellDetailEditor({ language: "json", readOnly: true, ...editorOptions() });
+      await sideJsonEditor.create(element, options.detail.value.formattedJson ?? "", "json");
+    } else if (!element && sideJsonEditor) {
+      sideJsonEditor.destroy();
+      sideJsonEditor = null;
+    }
+  });
+
+  watch(
+    () => options.detail.value.formattedJson ?? "",
+    (value) => sideJsonEditor?.setValue(value, "json"),
+  );
+  watch(options.editValue, (value) => detailsEditor?.setValue(value, options.detail.value.type));
+
+  return {
+    geometryPreviewOpen,
+    geometryCanvas,
+    detailsEditorContainer,
+    sideJsonPreviewContainer,
+    openSearch: () => detailsEditor?.openSearch() ?? sideJsonEditor?.openSearch() ?? false,
+  };
+}
diff --git a/apps/desktop/src/composables/useDataGridColumnLayout.ts b/apps/desktop/src/composables/useDataGridColumnLayout.ts
new file mode 100644
index 0000000000..3dbcdc4a7e
--- /dev/null
+++ b/apps/desktop/src/composables/useDataGridColumnLayout.ts
@@ -0,0 +1,512 @@
+import { computed, nextTick, onScopeDispose, ref, toValue, watch, type MaybeRefOrGetter } from "vue";
+import { columnOrderKeysForIndexes, isDefaultColumnOrder, moveVisibleColumnIndex, orderedColumnIndexes } from "@/lib/dataGrid/dataGridColumnOrder";
+import { columnHeaderCanvasPointerDisabled, columnHeaderClickShouldBeSuppressed, columnHeaderPreviewOffsetForColumn, columnHeaderTooltipDisabled } from "@/lib/dataGrid/dataGridColumnHeaderInteraction";
+import {
+  loadDataGridColumnOrder,
+  loadTableDataGridColumnOrder,
+  notifyTableDataGridColumnOrderChanged,
+  removeDataGridColumnOrder,
+  removeTableDataGridColumnOrder,
+  saveDataGridColumnOrder,
+  saveTableDataGridColumnOrder,
+  type TableDataGridColumnOrderChangedDetail,
+} from "@/lib/dataGrid/dataGridColumnLayoutStorage";
+import { filterColumnVisibilityOptions, hiddenColumnIndexesWithAllNullColumns, invertedHiddenColumnIndexes, nextHiddenColumnIndexes, removeAutoHiddenColumnIndexes, visibleColumnIndexesForFilter } from "@/lib/dataGrid/dataGridColumnVisibility";
+
+export type RenderedDataGridColumn = {
+  visibleColIdx: number;
+  actualColIdx: number;
+  name: string;
+};
+
+export type DataGridHorizontalColumnWindow = {
+  start: number;
+  end: number;
+  beforeWidth: number;
+  afterWidth: number;
+};
+
+type ColumnHeaderDragState = {
+  sourceVisibleIndex: number;
+  targetVisibleIndex: number;
+  startX: number;
+  startY: number;
+  currentX: number;
+  columnRects: { visibleIndex: number; left: number; width: number }[];
+  dragging: boolean;
+};
+
+export function dataGridColumnOffsets(widths: readonly number[]): number[] {
+  const offsets = Array.from({ length: widths.length + 1 }, () => 0);
+  for (let index = 0; index < widths.length; index++) offsets[index + 1] = offsets[index] + (widths[index] ?? 0);
+  return offsets;
+}
+
+export function dataGridHorizontalColumnWindow(options: { widths: readonly number[]; offsets: readonly number[]; columnCount: number; scrollLeft: number; viewportWidth: number; rowNumberWidth: number; bufferPx: number }): DataGridHorizontalColumnWindow {
+  const { widths, offsets, columnCount } = options;
+  if (columnCount === 0 || widths.length === 0) return { start: 0, end: 0, beforeWidth: 0, afterWidth: 0 };
+
+  const viewportStart = Math.max(0, options.scrollLeft - options.rowNumberWidth - options.bufferPx);
+  const viewportEnd = Math.max(options.viewportWidth, 1) + Math.max(0, options.scrollLeft - options.rowNumberWidth) + options.bufferPx;
+  let low = 0;
+  let high = columnCount - 1;
+  while (low < high) {
+    const mid = Math.floor((low + high) / 2);
+    if ((offsets[mid + 1] ?? 0) < viewportStart) low = mid + 1;
+    else high = mid;
+  }
+  const start = low;
+  let end = start;
+  while (end < columnCount && (offsets[end] ?? 0) < viewportEnd) end++;
+
+  const columnsWidth = offsets[columnCount] ?? 0;
+  const visibleWidth = offsets[end] ?? offsets[start] ?? 0;
+  return { start, end, beforeWidth: offsets[start] ?? 0, afterWidth: Math.max(0, columnsWidth - visibleWidth) };
+}
+
+export function useDataGridColumnLayoutState(options: {
+  columns: MaybeRefOrGetter<readonly string[]>;
+  sourceColumns?: MaybeRefOrGetter<readonly (string | undefined)[] | undefined>;
+  commentByColumn?: MaybeRefOrGetter<ReadonlyMap<string, string>>;
+  displayableColumnIndexes: MaybeRefOrGetter<readonly number[]>;
+  allNullColumnIndexes: MaybeRefOrGetter<readonly number[]>;
+  columnOrderKeys: MaybeRefOrGetter<readonly string[]>;
+  layoutScopeKey: MaybeRefOrGetter<string>;
+  tableScopeKey: MaybeRefOrGetter<string>;
+  onRefreshMetrics?: () => void;
+}) {
+  const hiddenColumnIndexes = ref<Set<number>>(new Set());
+  const nullColumnsHidden = ref(false);
+  const autoHiddenNullColumnIndexes = ref<Set<number>>(new Set());
+  const persistedColumnOrderKeys = ref<string[]>([]);
+  const orderedDisplayableColumnIndexes = computed(() => orderedColumnIndexes({ availableIndexes: toValue(options.displayableColumnIndexes), columnKeys: toValue(options.columnOrderKeys), orderedKeys: persistedColumnOrderKeys.value }));
+  const visibleColumnIndexes = computed(() => visibleColumnIndexesForFilter(orderedDisplayableColumnIndexes.value, hiddenColumnIndexes.value));
+  const displayableColumnCount = computed(() => toValue(options.displayableColumnIndexes).length);
+  const hiddenColumnCount = computed(() => displayableColumnCount.value - visibleColumnIndexes.value.length);
+  const allNullColumnCount = computed(() => toValue(options.allNullColumnIndexes).length);
+  const hasCustomColumnOrder = computed(() => !isDefaultColumnOrder(toValue(options.displayableColumnIndexes), orderedDisplayableColumnIndexes.value));
+  const canToggleAllNullColumns = computed(() => nullColumnsHidden.value || (toValue(options.allNullColumnIndexes).length > 0 && displayableColumnCount.value > 1));
+
+  function filteredColumnVisibilityOptions(query: string) {
+    const displayable = new Set(toValue(options.displayableColumnIndexes));
+    return filterColumnVisibilityOptions(toValue(options.columns), query, { sourceColumns: toValue(options.sourceColumns), commentByColumn: toValue(options.commentByColumn) }).filter((option) => displayable.has(option.index));
+  }
+  function isColumnVisible(columnIndex: number) {
+    return !hiddenColumnIndexes.value.has(columnIndex);
+  }
+  function toggleColumnVisibility(columnIndex: number) {
+    hiddenColumnIndexes.value = nextHiddenColumnIndexes({ columnIndex, hiddenIndexes: hiddenColumnIndexes.value, totalColumns: displayableColumnCount.value });
+  }
+  function showAllColumns() {
+    hiddenColumnIndexes.value = new Set();
+  }
+  function invertColumnVisibility() {
+    hiddenColumnIndexes.value = invertedHiddenColumnIndexes([...toValue(options.displayableColumnIndexes)], hiddenColumnIndexes.value);
+  }
+  function loadColumnOrder() {
+    const tableScopeKey = toValue(options.tableScopeKey);
+    const tableOrder = tableScopeKey ? loadTableDataGridColumnOrder(tableScopeKey) : [];
+    persistedColumnOrderKeys.value = tableOrder.length ? tableOrder : loadDataGridColumnOrder(toValue(options.layoutScopeKey), toValue(options.columnOrderKeys));
+  }
+  function persistColumnOrder(indexes: number[]) {
+    const tableScopeKey = toValue(options.tableScopeKey);
+    if (isDefaultColumnOrder(toValue(options.displayableColumnIndexes), indexes)) {
+      removeDataGridColumnOrder(toValue(options.layoutScopeKey));
+      if (tableScopeKey) {
+        removeTableDataGridColumnOrder(tableScopeKey);
+        notifyTableDataGridColumnOrderChanged(tableScopeKey);
+      }
+      persistedColumnOrderKeys.value = [];
+      return;
+    }
+    const keys = columnOrderKeysForIndexes(indexes, toValue(options.columnOrderKeys));
+    persistedColumnOrderKeys.value = keys;
+    saveDataGridColumnOrder(toValue(options.layoutScopeKey), toValue(options.columnOrderKeys), keys);
+    if (tableScopeKey) {
+      saveTableDataGridColumnOrder(tableScopeKey, keys);
+      notifyTableDataGridColumnOrderChanged(tableScopeKey);
+    }
+  }
+  function resetColumnOrder() {
+    removeDataGridColumnOrder(toValue(options.layoutScopeKey));
+    const tableScopeKey = toValue(options.tableScopeKey);
+    if (tableScopeKey) {
+      removeTableDataGridColumnOrder(tableScopeKey);
+      notifyTableDataGridColumnOrderChanged(tableScopeKey);
+    }
+    persistedColumnOrderKeys.value = [];
+    if (options.onRefreshMetrics) nextTick(options.onRefreshMetrics);
+  }
+  function showAllNullColumns() {
+    hiddenColumnIndexes.value = removeAutoHiddenColumnIndexes(hiddenColumnIndexes.value, autoHiddenNullColumnIndexes.value);
+    autoHiddenNullColumnIndexes.value = new Set();
+    nullColumnsHidden.value = false;
+  }
+  function hideAllNullColumns() {
+    const next = hiddenColumnIndexesWithAllNullColumns({ availableIndexes: [...toValue(options.displayableColumnIndexes)], hiddenIndexes: hiddenColumnIndexes.value, allNullIndexes: new Set(toValue(options.allNullColumnIndexes)) });
+    hiddenColumnIndexes.value = next.hiddenIndexes;
+    autoHiddenNullColumnIndexes.value = next.autoHiddenIndexes;
+    nullColumnsHidden.value = next.autoHiddenIndexes.size > 0;
+  }
+  function toggleAllNullColumns() {
+    if (nullColumnsHidden.value) showAllNullColumns();
+    else hideAllNullColumns();
+  }
+  function onTableDataGridColumnOrderChanged(event: Event) {
+    if (!(event instanceof CustomEvent)) return;
+    const detail = event.detail as TableDataGridColumnOrderChangedDetail | undefined;
+    if (!detail || detail.scopeKey !== toValue(options.tableScopeKey)) return;
+    loadColumnOrder();
+    if (options.onRefreshMetrics) nextTick(options.onRefreshMetrics);
+  }
+
+  function resetColumnVisibility() {
+    hiddenColumnIndexes.value = new Set();
+    autoHiddenNullColumnIndexes.value = new Set();
+    nullColumnsHidden.value = false;
+  }
+
+  watch(
+    () => [...toValue(options.allNullColumnIndexes)],
+    () => {
+      if (!nullColumnsHidden.value) return;
+      hiddenColumnIndexes.value = removeAutoHiddenColumnIndexes(hiddenColumnIndexes.value, autoHiddenNullColumnIndexes.value);
+      autoHiddenNullColumnIndexes.value = new Set();
+      hideAllNullColumns();
+    },
+  );
+  watch([() => toValue(options.layoutScopeKey), () => toValue(options.tableScopeKey)], loadColumnOrder, { immediate: true });
+
+  return {
+    hiddenColumnIndexes,
+    nullColumnsHidden,
+    orderedDisplayableColumnIndexes,
+    visibleColumnIndexes,
+    displayableColumnCount,
+    hiddenColumnCount,
+    allNullColumnCount,
+    hasCustomColumnOrder,
+    canToggleAllNullColumns,
+    filteredColumnVisibilityOptions,
+    isColumnVisible,
+    toggleColumnVisibility,
+    showAllColumns,
+    invertColumnVisibility,
+    persistColumnOrder,
+    resetColumnOrder,
+    toggleAllNullColumns,
+    resetColumnVisibility,
+    onTableDataGridColumnOrderChanged,
+  };
+}
+
+export function useDataGridColumnLayout(options: {
+  columnNames: MaybeRefOrGetter<readonly string[]>;
+  visibleColumnIndexes: MaybeRefOrGetter<readonly number[]>;
+  renderedColumnWidths: MaybeRefOrGetter<readonly number[]>;
+  scrollLeft: MaybeRefOrGetter<number>;
+  viewportWidth: MaybeRefOrGetter<number>;
+  rowNumberWidth: number;
+  bufferPx?: number;
+  headerRef?: MaybeRefOrGetter<HTMLElement | null | undefined>;
+  orderedColumnIndexes?: MaybeRefOrGetter<readonly number[]>;
+  hiddenColumnIndexes?: MaybeRefOrGetter<ReadonlySet<number>>;
+  getIsResizing?: () => boolean;
+  onResizeStart?: (visibleColIdx: number, event: MouseEvent) => void;
+  onCanvasMouseLeave?: () => void;
+  onCanvasDrawSchedule?: () => void;
+  onRefreshMetrics?: () => void;
+  onPersistColumnOrder?: (indexes: number[]) => void;
+}) {
+  const renderedColumnOffsets = computed(() => dataGridColumnOffsets(toValue(options.renderedColumnWidths)));
+  const horizontalColumnWindow = computed(() =>
+    dataGridHorizontalColumnWindow({
+      widths: toValue(options.renderedColumnWidths),
+      offsets: renderedColumnOffsets.value,
+      columnCount: toValue(options.visibleColumnIndexes).length,
+      scrollLeft: toValue(options.scrollLeft),
+      viewportWidth: toValue(options.viewportWidth),
+      rowNumberWidth: options.rowNumberWidth,
+      bufferPx: options.bufferPx ?? 900,
+    }),
+  );
+  const renderedGridColumns = computed<RenderedDataGridColumn[]>(() => {
+    const columnNames = toValue(options.columnNames);
+    const visibleIndexes = toValue(options.visibleColumnIndexes);
+    const window = horizontalColumnWindow.value;
+    return visibleIndexes.slice(window.start, window.end).map((actualColIdx, offset) => ({
+      visibleColIdx: window.start + offset,
+      actualColIdx,
+      name: columnNames[actualColIdx] ?? "",
+    }));
+  });
+
+  function renderedColumnStyle(visibleColIdx: number) {
+    return { width: `var(--col-w-${visibleColIdx})` };
+  }
+
+  function columnContentOffsetLeft(visibleColIdx: number): number {
+    return options.rowNumberWidth + (renderedColumnOffsets.value[visibleColIdx] ?? 0);
+  }
+
+  const columnHeaderDragState = ref<ColumnHeaderDragState | null>(null);
+  const columnHeaderResizeActive = ref(false);
+  let columnHeaderDragClickGuardUntil = 0;
+  let columnHeaderSuppressNextClick = false;
+  let columnHeaderSuppressClickTimer = 0;
+  let columnHeaderDragFrame = 0;
+  let columnHeaderResizeFrame = 0;
+  let columnHeaderPendingClientX = 0;
+  let columnHeaderResizeListenersCleanup: (() => void) | null = null;
+
+  const columnHeaderTooltipsDisabled = computed(() =>
+    columnHeaderTooltipDisabled({
+      columnDragActive: columnHeaderDragState.value !== null,
+      columnResizeActive: columnHeaderResizeActive.value,
+    }),
+  );
+
+  function columnHeaderPointerInteractionActive(): boolean {
+    return columnHeaderCanvasPointerDisabled({
+      columnDragActive: columnHeaderDragState.value !== null,
+      columnResizeActive: columnHeaderResizeActive.value,
+    });
+  }
+
+  function clearColumnHeaderResizeListeners() {
+    columnHeaderResizeListenersCleanup?.();
+    columnHeaderResizeListenersCleanup = null;
+  }
+
+  function clearColumnHeaderClickGuard() {
+    columnHeaderSuppressNextClick = false;
+    columnHeaderDragClickGuardUntil = 0;
+    if (columnHeaderSuppressClickTimer) {
+      window.clearTimeout(columnHeaderSuppressClickTimer);
+      columnHeaderSuppressClickTimer = 0;
+    }
+  }
+
+  function armColumnHeaderClickGuard() {
+    clearColumnHeaderClickGuard();
+    columnHeaderSuppressNextClick = true;
+    columnHeaderDragClickGuardUntil = Date.now() + 800;
+    columnHeaderSuppressClickTimer = window.setTimeout(clearColumnHeaderClickGuard, 800);
+  }
+
+  function finishColumnHeaderResizeInteraction() {
+    clearColumnHeaderResizeListeners();
+    if (columnHeaderResizeFrame) cancelAnimationFrame(columnHeaderResizeFrame);
+    columnHeaderResizeFrame = requestAnimationFrame(() => {
+      columnHeaderResizeFrame = 0;
+      columnHeaderResizeActive.value = false;
+    });
+  }
+
+  function startColumnHeaderResize(visibleColIdx: number, event: MouseEvent) {
+    clearColumnHeaderResizeListeners();
+    if (columnHeaderResizeFrame) {
+      cancelAnimationFrame(columnHeaderResizeFrame);
+      columnHeaderResizeFrame = 0;
+    }
+    columnHeaderResizeActive.value = true;
+    armColumnHeaderClickGuard();
+    options.onCanvasMouseLeave?.();
+    const finishResize = () => {
+      armColumnHeaderClickGuard();
+      finishColumnHeaderResizeInteraction();
+    };
+    columnHeaderResizeListenersCleanup = () => {
+      window.removeEventListener("mouseup", finishResize, true);
+      window.removeEventListener("blur", finishResize, true);
+    };
+    window.addEventListener("mouseup", finishResize, true);
+    window.addEventListener("blur", finishResize, true);
+    options.onResizeStart?.(visibleColIdx, event);
+  }
+
+  function columnHeaderInteractiveTarget(target: EventTarget | null): boolean {
+    return target instanceof HTMLElement && !!target.closest("button, input, textarea, select, [contenteditable='true'], [role='button'], [data-column-resize-handle]");
+  }
+
+  function columnHeaderDropTargetVisibleIndex(clientX: number): number {
+    const state = columnHeaderDragState.value;
+    if (!state || state.columnRects.length === 0) return state?.sourceVisibleIndex ?? 0;
+    for (const rect of state.columnRects) {
+      if (clientX < rect.left + rect.width / 2) return rect.visibleIndex;
+    }
+    return toValue(options.visibleColumnIndexes).length;
+  }
+
+  function applyColumnHeaderDragPreview() {
+    columnHeaderDragFrame = 0;
+    const state = columnHeaderDragState.value;
+    if (!state?.dragging) return;
+    state.currentX = columnHeaderPendingClientX;
+    state.targetVisibleIndex = columnHeaderDropTargetVisibleIndex(columnHeaderPendingClientX);
+    options.onCanvasDrawSchedule?.();
+  }
+
+  function scheduleColumnHeaderDragPreview(clientX: number) {
+    columnHeaderPendingClientX = clientX;
+    if (columnHeaderDragFrame) return;
+    columnHeaderDragFrame = requestAnimationFrame(applyColumnHeaderDragPreview);
+  }
+
+  function flushColumnHeaderDragPreview() {
+    if (columnHeaderDragFrame) cancelAnimationFrame(columnHeaderDragFrame);
+    applyColumnHeaderDragPreview();
+  }
+
+  function cancelColumnHeaderDragPreview() {
+    if (!columnHeaderDragFrame) return;
+    cancelAnimationFrame(columnHeaderDragFrame);
+    columnHeaderDragFrame = 0;
+  }
+
+  function columnHeaderLayoutRects() {
+    const header = toValue(options.headerRef);
+    return Array.from(header?.querySelectorAll<HTMLElement>("[data-visible-col-index]") ?? [])
+      .map((element) => {
+        const rect = element.getBoundingClientRect();
+        return { visibleIndex: Number(element.dataset.visibleColIndex), left: rect.left, width: rect.width };
+      })
+      .filter((rect) => Number.isFinite(rect.visibleIndex));
+  }
+
+  function stopColumnHeaderDrag(commit: boolean) {
+    const state = columnHeaderDragState.value;
+    if (!state) return;
+    const hadCanvasPreview = state.dragging;
+    window.removeEventListener("pointermove", onColumnHeaderPointerMove, true);
+    window.removeEventListener("pointerup", onColumnHeaderPointerUp, true);
+    window.removeEventListener("pointercancel", onColumnHeaderPointerCancel, true);
+    cancelColumnHeaderDragPreview();
+    document.body.style.userSelect = "";
+    columnHeaderDragState.value = null;
+    if (hadCanvasPreview) options.onCanvasDrawSchedule?.();
+    if (state.dragging) armColumnHeaderClickGuard();
+    if (!commit || !state.dragging || state.sourceVisibleIndex === state.targetVisibleIndex) return;
+    const next = moveVisibleColumnIndex({
+      orderedIndexes: toValue(options.orderedColumnIndexes ?? options.visibleColumnIndexes),
+      hiddenIndexes: toValue(options.hiddenColumnIndexes ?? (() => new Set<number>())),
+      fromVisibleIndex: state.sourceVisibleIndex,
+      toVisibleIndex: state.targetVisibleIndex,
+    });
+    options.onPersistColumnOrder?.(next);
+    options.onRefreshMetrics?.();
+  }
+
+  function onColumnHeaderPointerMove(event: PointerEvent) {
+    const state = columnHeaderDragState.value;
+    if (!state) return;
+    const moved = Math.abs(event.clientX - state.startX) > 5 || Math.abs(event.clientY - state.startY) > 5;
+    if (!state.dragging && moved) {
+      state.dragging = true;
+      document.body.style.userSelect = "none";
+      options.onCanvasMouseLeave?.();
+    }
+    if (!state.dragging) return;
+    event.preventDefault();
+    scheduleColumnHeaderDragPreview(event.clientX);
+  }
+
+  function onColumnHeaderPointerUp(event: PointerEvent) {
+    columnHeaderPendingClientX = event.clientX;
+    flushColumnHeaderDragPreview();
+    stopColumnHeaderDrag(true);
+  }
+
+  function onColumnHeaderPointerCancel() {
+    stopColumnHeaderDrag(false);
+  }
+
+  function startColumnHeaderDrag(visibleColIdx: number, event: PointerEvent) {
+    if (event.button !== 0 || options.getIsResizing?.() || columnHeaderInteractiveTarget(event.target)) return;
+    columnHeaderDragState.value = {
+      sourceVisibleIndex: visibleColIdx,
+      targetVisibleIndex: visibleColIdx,
+      startX: event.clientX,
+      startY: event.clientY,
+      currentX: event.clientX,
+      columnRects: columnHeaderLayoutRects(),
+      dragging: false,
+    };
+    columnHeaderPendingClientX = event.clientX;
+    window.addEventListener("pointermove", onColumnHeaderPointerMove, true);
+    window.addEventListener("pointerup", onColumnHeaderPointerUp, true);
+    window.addEventListener("pointercancel", onColumnHeaderPointerCancel, true);
+  }
+
+  function suppressHeaderClickIfNeeded(event: MouseEvent): boolean {
+    if (!columnHeaderClickShouldBeSuppressed({ now: Date.now(), guardUntil: columnHeaderDragClickGuardUntil, suppressNextClick: columnHeaderSuppressNextClick })) return false;
+    clearColumnHeaderClickGuard();
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    return true;
+  }
+
+  function columnHeaderDragClass(visibleColIdx: number) {
+    const state = columnHeaderDragState.value;
+    return { "z-30 shadow-lg ring-1 ring-primary/40 bg-background dark:bg-muted pointer-events-none": state?.dragging && state.sourceVisibleIndex === visibleColIdx };
+  }
+
+  function columnHeaderPreviewOffset(visibleColIdx: number): number {
+    const state = columnHeaderDragState.value;
+    if (!state) return 0;
+    return columnHeaderPreviewOffsetForColumn({
+      columnDragActive: state.dragging,
+      visibleColIdx,
+      sourceVisibleIndex: state.sourceVisibleIndex,
+      targetVisibleIndex: state.targetVisibleIndex,
+      startX: state.startX,
+      currentX: state.currentX,
+      sourceWidth: toValue(options.renderedColumnWidths)[state.sourceVisibleIndex] ?? 0,
+    });
+  }
+
+  function columnHeaderStyle(visibleColIdx: number) {
+    const style = renderedColumnStyle(visibleColIdx);
+    const offset = columnHeaderPreviewOffset(visibleColIdx);
+    if (!offset) return style;
+    return { ...style, transform: `translateX(${offset}px)`, transition: columnHeaderDragState.value?.sourceVisibleIndex === visibleColIdx ? undefined : "transform 120ms ease-out" };
+  }
+
+  const columnHeaderPreviewOffsets = computed(() => toValue(options.renderedColumnWidths).map((_, visibleColIdx) => columnHeaderPreviewOffset(visibleColIdx)));
+  const columnHeaderPreviewSourceVisibleIndex = computed(() => {
+    const state = columnHeaderDragState.value;
+    return state?.dragging ? state.sourceVisibleIndex : null;
+  });
+
+  function disposeColumnHeaderInteractions() {
+    stopColumnHeaderDrag(false);
+    clearColumnHeaderResizeListeners();
+    clearColumnHeaderClickGuard();
+    if (columnHeaderDragFrame) cancelAnimationFrame(columnHeaderDragFrame);
+    if (columnHeaderResizeFrame) cancelAnimationFrame(columnHeaderResizeFrame);
+    columnHeaderResizeFrame = 0;
+    document.body.style.userSelect = "";
+  }
+  onScopeDispose(disposeColumnHeaderInteractions);
+
+  return {
+    renderedColumnOffsets,
+    horizontalColumnWindow,
+    renderedGridColumns,
+    renderedColumnStyle,
+    columnContentOffsetLeft,
+    columnHeaderDragState,
+    columnHeaderResizeActive,
+    columnHeaderTooltipsDisabled,
+    columnHeaderPreviewOffsets,
+    columnHeaderPreviewSourceVisibleIndex,
+    columnHeaderPointerInteractionActive,
+    startColumnHeaderResize,
+    startColumnHeaderDrag,
+    suppressHeaderClickIfNeeded,
+    columnHeaderDragClass,
+    columnHeaderStyle,
+    disposeColumnHeaderInteractions,
+  };
+}
diff --git a/apps/desktop/src/composables/useDataGridConditionEditor.ts b/apps/desktop/src/composables/useDataGridConditionEditor.ts
new file mode 100644
index 0000000000..837e5ddb14
--- /dev/null
+++ b/apps/desktop/src/composables/useDataGridConditionEditor.ts
@@ -0,0 +1,213 @@
+import { computed, getCurrentScope, onScopeDispose, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from "vue";
+import { forgetDataGridConditionHistory, loadDataGridConditionHistory, rememberDataGridConditionHistory, type DataGridConditionHistoryKind, type DataGridConditionHistoryScope } from "@/lib/dataGrid/dataGridConditionHistory";
+
+export type DataGridConditionSuggestionKind = "column" | "history";
+
+export interface DataGridConditionSuggestion {
+  value: string;
+  kind: DataGridConditionSuggestionKind;
+}
+
+export interface DataGridConditionSuggestionContext {
+  kind: DataGridConditionHistoryKind;
+  value: string;
+  token: string;
+  signal: AbortSignal;
+}
+
+export type DataGridConditionSuggestionProvider = (context: DataGridConditionSuggestionContext) => readonly string[] | Promise<readonly string[]>;
+
+export interface UseDataGridConditionEditorOptions {
+  kind: DataGridConditionHistoryKind;
+  value: Ref<string>;
+  columns?: MaybeRefOrGetter<readonly string[] | undefined>;
+  historyScope: MaybeRefOrGetter<DataGridConditionHistoryScope>;
+  suggestionProvider?: DataGridConditionSuggestionProvider;
+  suggestionDebounceMs?: number;
+  suggestionLimit?: number;
+}
+
+const WHERE_TOKEN_PATTERN = /([^\s,()><=!&|]+)$/;
+const ORDER_BY_TOKEN_PATTERN = /([^\s,()]+)$/;
+
+function activeToken(kind: DataGridConditionHistoryKind, value: string): string {
+  return (
+    value
+      .trim()
+      .split(kind === "where" ? /[\s,()><=!&|]+/ : /[\s,()]+/)
+      .pop() ?? ""
+  );
+}
+
+function replaceActiveToken(kind: DataGridConditionHistoryKind, value: string, replacement: string): string {
+  const match = value.match(kind === "where" ? WHERE_TOKEN_PATTERN : ORDER_BY_TOKEN_PATTERN);
+  if (!match) return value;
+  return `${value.slice(0, -match[1].length)}${replacement}`;
+}
+
+export function useDataGridConditionEditor(options: UseDataGridConditionEditorOptions) {
+  const suggestions = ref<DataGridConditionSuggestion[]>([]);
+  const highlightedIndex = ref(-1);
+  const historyOpen = ref(false);
+  const suggestionsLoading = ref(false);
+  let suggestionTimer: ReturnType<typeof setTimeout> | undefined;
+  let suggestionRequestId = 0;
+  let suggestionAbortController: AbortController | undefined;
+  let suppressNextValueSuggestion = false;
+
+  const dropdownOpen = computed(() => suggestions.value.length > 0 || historyOpen.value);
+
+  function cancelSuggestionRequest() {
+    if (suggestionTimer) clearTimeout(suggestionTimer);
+    suggestionTimer = undefined;
+    suggestionRequestId += 1;
+    suggestionAbortController?.abort();
+    suggestionAbortController = undefined;
+    suggestionsLoading.value = false;
+  }
+
+  function dismiss() {
+    cancelSuggestionRequest();
+    suggestions.value = [];
+    highlightedIndex.value = -1;
+    historyOpen.value = false;
+  }
+
+  function defaultSuggestions(token: string): readonly string[] {
+    const normalizedToken = token.toLowerCase();
+    if (!normalizedToken) return [];
+    return (toValue(options.columns) ?? []).filter((column) => column.toLowerCase().startsWith(normalizedToken) && column.toLowerCase() !== normalizedToken);
+  }
+
+  async function loadSuggestions(value: string, requestId: number, controller: AbortController) {
+    const token = activeToken(options.kind, value);
+    if (!token) return;
+    suggestionsLoading.value = true;
+    try {
+      const values = options.suggestionProvider ? await options.suggestionProvider({ kind: options.kind, value, token, signal: controller.signal }) : defaultSuggestions(token);
+      // A slower request must never replace suggestions for a newer editor value.
+      if (controller.signal.aborted || requestId !== suggestionRequestId || options.value.value !== value || historyOpen.value) return;
+      const limit = options.suggestionLimit ?? 8;
+      suggestions.value = [...new Set(values)].slice(0, limit).map((suggestion) => ({ value: suggestion, kind: "column" }));
+      highlightedIndex.value = suggestions.value.length > 0 ? 0 : -1;
+    } catch (error) {
+      if (!controller.signal.aborted && requestId === suggestionRequestId) {
+        suggestions.value = [];
+        highlightedIndex.value = -1;
+        console.warn("[DBX][condition-editor] Failed to load suggestions", error);
+      }
+    } finally {
+      if (requestId === suggestionRequestId) suggestionsLoading.value = false;
+    }
+  }
+
+  function scheduleSuggestions(value: string) {
+    cancelSuggestionRequest();
+    suggestions.value = [];
+    highlightedIndex.value = -1;
+    historyOpen.value = false;
+    if (!value.trim()) return;
+
+    const requestId = suggestionRequestId;
+    const controller = new AbortController();
+    suggestionAbortController = controller;
+    suggestionTimer = setTimeout(() => {
+      suggestionTimer = undefined;
+      void loadSuggestions(value, requestId, controller);
+    }, options.suggestionDebounceMs ?? 0);
+  }
+
+  function openHistory() {
+    cancelSuggestionRequest();
+    if (dropdownOpen.value) {
+      dismiss();
+      return;
+    }
+    historyOpen.value = true;
+    suggestions.value = loadDataGridConditionHistory(options.kind, toValue(options.historyScope), options.value.value).map((value) => ({ value, kind: "history" }));
+    highlightedIndex.value = -1;
+  }
+
+  function deleteHistory(value: string) {
+    const history = forgetDataGridConditionHistory(options.kind, toValue(options.historyScope), value);
+    const query = options.value.value.trim().toLowerCase();
+    suggestions.value = history.filter((item) => !query || item.toLowerCase().includes(query)).map((item) => ({ value: item, kind: "history" }));
+    highlightedIndex.value = suggestions.value.length > 0 ? Math.min(Math.max(highlightedIndex.value, 0), suggestions.value.length - 1) : -1;
+    historyOpen.value = true;
+  }
+
+  function rememberHistory(value = options.value.value) {
+    return rememberDataGridConditionHistory(options.kind, toValue(options.historyScope), value);
+  }
+
+  function navigate(delta: number) {
+    if (suggestions.value.length === 0) return false;
+    if (highlightedIndex.value < 0) {
+      highlightedIndex.value = delta > 0 ? 0 : suggestions.value.length - 1;
+    } else {
+      highlightedIndex.value = Math.min(Math.max(highlightedIndex.value + delta, 0), suggestions.value.length - 1);
+    }
+    return true;
+  }
+
+  function accept(index = highlightedIndex.value) {
+    const suggestion = suggestions.value[index];
+    if (!suggestion) return false;
+    suppressNextValueSuggestion = true;
+    options.value.value = suggestion.kind === "history" ? suggestion.value : replaceActiveToken(options.kind, options.value.value, suggestion.value);
+    dismiss();
+    return true;
+  }
+
+  function handleKeydown(event: KeyboardEvent): "accept" | "apply" | "dismiss" | "navigate" | undefined {
+    if (dropdownOpen.value && event.key === "Escape") {
+      event.preventDefault();
+      dismiss();
+      return "dismiss";
+    }
+    if (suggestions.value.length > 0 && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault();
+      navigate(event.key === "ArrowDown" ? 1 : -1);
+      return "navigate";
+    }
+    if (suggestions.value.length > 0 && event.key === "Tab") {
+      event.preventDefault();
+      accept();
+      return "accept";
+    }
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      if (suggestions.value.length > 0 && highlightedIndex.value >= 0) {
+        accept();
+        return "accept";
+      }
+      return "apply";
+    }
+    return undefined;
+  }
+
+  watch(options.value, (value) => {
+    if (suppressNextValueSuggestion) {
+      suppressNextValueSuggestion = false;
+      return;
+    }
+    scheduleSuggestions(value);
+  });
+  if (getCurrentScope()) onScopeDispose(cancelSuggestionRequest);
+
+  return {
+    suggestions,
+    highlightedIndex,
+    historyOpen,
+    suggestionsLoading,
+    dropdownOpen,
+    scheduleSuggestions,
+    openHistory,
+    deleteHistory,
+    rememberHistory,
+    dismiss,
+    navigate,
+    accept,
+    handleKeydown,
+  };
+}
diff --git a/apps/desktop/src/composables/useDataGridFilterBuilder.ts b/apps/desktop/src/composables/useDataGridFilterBuilder.ts
new file mode 100644
index 0000000000..5f42782264
--- /dev/null
+++ b/apps/desktop/src/composables/useDataGridFilterBuilder.ts
@@ -0,0 +1,93 @@
+import { computed, ref, toValue, watch, type MaybeRefOrGetter } from "vue";
+import { filterModeNeedsValue, filterModeUsesRange } from "@/lib/dataGrid/dataGridColumnFilter";
+import type { DataGridContextFilterMode } from "@/lib/dataGrid/dataGridSql";
+
+export type DataGridStructuredFilterRule = {
+  id: string;
+  columnName: string;
+  mode: DataGridContextFilterMode;
+  rawValue: string;
+  rawEndValue: string;
+  conjunction: "AND" | "OR";
+  disabled?: boolean;
+};
+
+export type UseDataGridFilterBuilderOptions = {
+  columns: MaybeRefOrGetter<readonly string[]>;
+  createId?: () => string;
+  isComplete: (rule: DataGridStructuredFilterRule) => boolean;
+  buildCondition: (rule: DataGridStructuredFilterRule) => Promise<string | undefined>;
+};
+
+export function buildDataGridStructuredWhere(items: Array<{ rule: DataGridStructuredFilterRule; condition: string }>): string {
+  if (!items.length) return "";
+  let result = items[0].condition;
+  for (let index = 1; index < items.length; index++) {
+    result = `(${result}) ${items[index].rule.conjunction} (${items[index].condition})`;
+  }
+  return result;
+}
+
+export function useDataGridFilterBuilder(options: UseDataGridFilterBuilderOptions) {
+  const rules = ref<DataGridStructuredFilterRule[]>([]);
+  const open = ref(false);
+  const columnSearch = ref("");
+  const appliedWhereInput = ref("");
+  const filteredColumns = computed(() => {
+    const query = columnSearch.value.trim().toLowerCase();
+    return query ? toValue(options.columns).filter((column) => column.toLowerCase().includes(query)) : [...toValue(options.columns)];
+  });
+  const activeCount = computed(() => rules.value.filter((rule) => !rule.disabled && rule.columnName && options.isComplete(rule)).length);
+
+  function defaultRule(): DataGridStructuredFilterRule {
+    return { id: options.createId?.() ?? crypto.randomUUID(), columnName: toValue(options.columns)[0] ?? "", mode: "equals", rawValue: "", rawEndValue: "", conjunction: "AND" };
+  }
+  function ensureRule() {
+    if (!rules.value.length && toValue(options.columns).length) rules.value = [defaultRule()];
+  }
+  function addRule() {
+    ensureRule();
+    rules.value = [...rules.value, defaultRule()];
+  }
+  function removeRule(id: string) {
+    rules.value = rules.value.filter((rule) => rule.id !== id);
+    if (!rules.value.length) appliedWhereInput.value = "";
+  }
+  function updateRule(id: string, patch: Partial<DataGridStructuredFilterRule>) {
+    rules.value = rules.value.map((rule) => {
+      if (rule.id !== id) return rule;
+      const next = { ...rule, ...patch };
+      if (!filterModeNeedsValue(next.mode)) next.rawValue = next.rawEndValue = "";
+      else if (!filterModeUsesRange(next.mode)) next.rawEndValue = "";
+      return next;
+    });
+  }
+  function reset() {
+    appliedWhereInput.value = "";
+    rules.value = toValue(options.columns).length ? [defaultRule()] : [];
+  }
+  async function buildWhere() {
+    const items = (await Promise.all(rules.value.map(async (rule) => ({ rule, condition: !rule.disabled && rule.columnName && options.isComplete(rule) ? await options.buildCondition(rule) : undefined })))).filter(
+      (item): item is { rule: DataGridStructuredFilterRule; condition: string } => !!item.condition,
+    );
+    return buildDataGridStructuredWhere(items);
+  }
+  async function apply() {
+    appliedWhereInput.value = await buildWhere();
+    open.value = false;
+    return appliedWhereInput.value;
+  }
+
+  watch(open, (value) => {
+    if (!value) columnSearch.value = "";
+  });
+  watch(
+    () => [...toValue(options.columns)],
+    (columns) => {
+      if (!columns.length) rules.value = [];
+      else rules.value = rules.value.map((rule) => (columns.includes(rule.columnName) ? rule : { ...rule, columnName: columns[0] }));
+    },
+  );
+
+  return { rules, open, columnSearch, appliedWhereInput, filteredColumns, activeCount, defaultRule, ensureRule, addRule, removeRule, updateRule, reset, buildWhere, apply };
+}
diff --git a/apps/desktop/src/composables/useDataGridResultLifecycle.ts b/apps/desktop/src/composables/useDataGridResultLifecycle.ts
new file mode 100644
index 0000000000..f577a5bf10
--- /dev/null
+++ b/apps/desktop/src/composables/useDataGridResultLifecycle.ts
@@ -0,0 +1,38 @@
+import { onUnmounted, watch, type Ref } from "vue";
+import type { DataGridRuntimeScope } from "@/lib/dataGrid/dataGridRuntime";
+
+export interface UseDataGridResultLifecycleOptions {
+  resultKey: Ref<unknown>;
+  runtimeScope?: DataGridRuntimeScope;
+}
+
+export function useDataGridResultLifecycle(options: UseDataGridResultLifecycleOptions) {
+  let version = 0;
+  let disposed = false;
+
+  const invalidate = () => {
+    version += 1;
+  };
+
+  const stopWatchingResult = watch(options.resultKey, invalidate);
+  const cleanup = () => {
+    if (disposed) return;
+    disposed = true;
+    invalidate();
+    stopWatchingResult();
+  };
+
+  if (options.runtimeScope) options.runtimeScope.addCleanup(cleanup);
+  else onUnmounted(cleanup);
+
+  return {
+    beginOperation() {
+      return version;
+    },
+    isCurrent(operationVersion: number) {
+      return !disposed && operationVersion === version;
+    },
+    invalidate,
+    cleanup,
+  };
+}
diff --git a/apps/desktop/src/composables/useDataGridScrollbars.ts b/apps/desktop/src/composables/useDataGridScrollbars.ts
new file mode 100644
index 0000000000..10e945697b
--- /dev/null
+++ b/apps/desktop/src/composables/useDataGridScrollbars.ts
@@ -0,0 +1,126 @@
+import { getCurrentScope, onScopeDispose } from "vue";
+import type { DataGridAnimationFrameDriver } from "./useDataGridCanvasRuntime";
+
+export interface DataGridScrollbarsOptions {
+  update(): void;
+  getScroller(): Element | null;
+  applyHorizontalDrag(clientX: number): void;
+  applyVerticalDrag(clientY: number): void;
+  frameDriver: DataGridAnimationFrameDriver;
+  createResizeObserver?: (callback: ResizeObserverCallback) => ResizeObserver | null;
+  startPaused?: boolean;
+}
+
+export interface DataGridScrollbarsRuntime {
+  readonly active: boolean;
+  readonly disposed: boolean;
+  scheduleUpdate(): void;
+  scheduleHorizontalDrag(clientX: number): void;
+  scheduleVerticalDrag(clientY: number): void;
+  flushHorizontalDrag(): void;
+  flushVerticalDrag(): void;
+  observeScroller(): void;
+  pause(): void;
+  resume(): void;
+  dispose(): void;
+}
+
+function defaultResizeObserverFactory(callback: ResizeObserverCallback): ResizeObserver | null {
+  return typeof ResizeObserver === "undefined" ? null : new ResizeObserver(callback);
+}
+
+export function useDataGridScrollbars(options: DataGridScrollbarsOptions): DataGridScrollbarsRuntime {
+  const createResizeObserver = options.createResizeObserver ?? defaultResizeObserverFactory;
+  let active = !options.startPaused;
+  let disposed = false;
+  let updateFrame: number | null = null;
+  let horizontalFrame: number | null = null;
+  let verticalFrame: number | null = null;
+  let pendingClientX = 0;
+  let pendingClientY = 0;
+  let resizeObserver: ResizeObserver | null = null;
+
+  const cancelFrame = (frame: number | null) => {
+    if (frame !== null) options.frameDriver.cancel(frame);
+  };
+  const runtime: DataGridScrollbarsRuntime = {
+    get active() {
+      return active;
+    },
+    get disposed() {
+      return disposed;
+    },
+    scheduleUpdate() {
+      if (!active || disposed || updateFrame !== null) return;
+      updateFrame = options.frameDriver.request(() => {
+        updateFrame = null;
+        if (active && !disposed) options.update();
+      });
+    },
+    scheduleHorizontalDrag(clientX) {
+      pendingClientX = clientX;
+      if (!active || disposed || horizontalFrame !== null) return;
+      horizontalFrame = options.frameDriver.request(() => {
+        horizontalFrame = null;
+        if (active && !disposed) options.applyHorizontalDrag(pendingClientX);
+      });
+    },
+    scheduleVerticalDrag(clientY) {
+      pendingClientY = clientY;
+      if (!active || disposed || verticalFrame !== null) return;
+      verticalFrame = options.frameDriver.request(() => {
+        verticalFrame = null;
+        if (active && !disposed) options.applyVerticalDrag(pendingClientY);
+      });
+    },
+    flushHorizontalDrag() {
+      if (!active || disposed || horizontalFrame === null) return;
+      options.frameDriver.cancel(horizontalFrame);
+      horizontalFrame = null;
+      options.applyHorizontalDrag(pendingClientX);
+    },
+    flushVerticalDrag() {
+      if (!active || disposed || verticalFrame === null) return;
+      options.frameDriver.cancel(verticalFrame);
+      verticalFrame = null;
+      options.applyVerticalDrag(pendingClientY);
+    },
+    observeScroller() {
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+      if (!active || disposed) return;
+      const scroller = options.getScroller();
+      if (scroller) {
+        resizeObserver = createResizeObserver(runtime.scheduleUpdate);
+        resizeObserver?.observe(scroller);
+        // Child size changes can alter scrollWidth without resizing the scroller itself.
+        for (const child of Array.from(scroller.children)) resizeObserver?.observe(child);
+      }
+      runtime.scheduleUpdate();
+    },
+    pause() {
+      active = false;
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+      cancelFrame(updateFrame);
+      cancelFrame(horizontalFrame);
+      cancelFrame(verticalFrame);
+      updateFrame = null;
+      horizontalFrame = null;
+      verticalFrame = null;
+    },
+    resume() {
+      if (disposed) return;
+      active = true;
+      runtime.observeScroller();
+    },
+    dispose() {
+      if (disposed) return;
+      runtime.pause();
+      disposed = true;
+    },
+  };
+
+  if (getCurrentScope()) onScopeDispose(runtime.dispose);
+  return runtime;
+}
diff --git a/apps/desktop/src/composables/useDataGridSearch.ts b/apps/desktop/src/composables/useDataGridSearch.ts
new file mode 100644
index 0000000000..9fc8480fa7
--- /dev/null
+++ b/apps/desktop/src/composables/useDataGridSearch.ts
@@ -0,0 +1,131 @@
+import { computed, getCurrentScope, nextTick, onScopeDispose, ref, toValue, watch, type MaybeRefOrGetter } from "vue";
+
+export type DataGridSearchMatch = {
+  kind: "cell" | "column";
+  displayRow: number;
+  col: number;
+};
+
+export type UseDataGridSearchOptions<Row> = {
+  columns: MaybeRefOrGetter<readonly string[]>;
+  suggestionColumns?: MaybeRefOrGetter<readonly string[]>;
+  rows: MaybeRefOrGetter<readonly Row[]>;
+  getCellText: (row: Row, columnIndex: number) => string;
+  debounceMs?: number;
+  onNavigate?: (match: DataGridSearchMatch) => void;
+};
+
+const SEARCH_TOKEN_SEPARATOR = /[\s,()><=!&|]+/;
+const SEARCH_TOKEN_SUFFIX = /([^\s,()><=!&|]+)$/;
+const SEARCH_PAIRS: Record<string, string> = { "'": "'", '"': '"', "(": ")" };
+
+export function useDataGridSearch<Row>(options: UseDataGridSearchOptions<Row>) {
+  const searchText = ref("");
+  const deferredSearchText = ref("");
+  const overlayVisible = ref(false);
+  const currentMatchIndex = ref(-1);
+  const suggestions = ref<string[]>([]);
+  const suggestionIndex = ref(-1);
+  let searchTimer: ReturnType<typeof setTimeout> | undefined;
+
+  const matches = computed<DataGridSearchMatch[]>(() => {
+    const query = deferredSearchText.value;
+    if (!query) return [];
+    const result: DataGridSearchMatch[] = [];
+    const columns = toValue(options.columns);
+    columns.forEach((column, col) => {
+      if (column.toLowerCase().includes(query)) result.push({ kind: "column", displayRow: -1, col });
+    });
+    toValue(options.rows).forEach((row, displayRow) => {
+      columns.forEach((_, col) => {
+        if (options.getCellText(row, col).toLowerCase().includes(query)) result.push({ kind: "cell", displayRow, col });
+      });
+    });
+    return result;
+  });
+  const matchSet = computed(() => new Set(matches.value.map((match) => `${match.kind}:${match.displayRow}:${match.col}`)));
+  const currentMatch = computed(() => matches.value[currentMatchIndex.value] ?? null);
+
+  function clearTimer() {
+    if (searchTimer !== undefined) clearTimeout(searchTimer);
+    searchTimer = undefined;
+  }
+
+  watch(searchText, (value) => {
+    clearTimer();
+    const query = value.trim().toLowerCase();
+    if (!query) deferredSearchText.value = "";
+    else searchTimer = setTimeout(() => (deferredSearchText.value = query), options.debounceMs ?? 150);
+
+    const lastToken = value.trim().split(SEARCH_TOKEN_SEPARATOR).pop()?.toLowerCase() ?? "";
+    suggestions.value = lastToken
+      ? toValue(options.suggestionColumns ?? options.columns)
+          .filter((column) => column.toLowerCase().startsWith(lastToken) && column.toLowerCase() !== lastToken)
+          .slice(0, 8)
+      : [];
+    suggestionIndex.value = suggestions.value.length ? 0 : -1;
+  });
+
+  watch(matches, (value) => {
+    currentMatchIndex.value = value.length ? 0 : -1;
+    if (value[0]) nextTick(() => options.onNavigate?.(value[0]));
+  });
+
+  function acceptSuggestion(index = suggestionIndex.value) {
+    const suggestion = suggestions.value[index];
+    if (!suggestion) return false;
+    const token = searchText.value.match(SEARCH_TOKEN_SUFFIX)?.[1];
+    if (token) searchText.value = searchText.value.slice(0, -token.length) + suggestion;
+    suggestions.value = [];
+    suggestionIndex.value = -1;
+    return true;
+  }
+
+  function navigateSuggestion(delta: number) {
+    if (!suggestions.value.length) return;
+    suggestionIndex.value = Math.min(Math.max(suggestionIndex.value + delta, 0), suggestions.value.length - 1);
+  }
+
+  function navigateMatch(delta: number) {
+    if (!matches.value.length) return;
+    currentMatchIndex.value = (currentMatchIndex.value + delta + matches.value.length) % matches.value.length;
+    const match = currentMatch.value;
+    if (match) options.onNavigate?.(match);
+  }
+
+  function close() {
+    clearTimer();
+    overlayVisible.value = false;
+    searchText.value = "";
+    deferredSearchText.value = "";
+    suggestions.value = [];
+  }
+
+  function onKeydown(event: KeyboardEvent) {
+    const pair = SEARCH_PAIRS[event.key];
+    const input = event.target as HTMLInputElement;
+    if (pair && !event.ctrlKey && !event.metaKey && input?.setSelectionRange) {
+      const start = input.selectionStart ?? 0;
+      const end = input.selectionEnd ?? start;
+      event.preventDefault();
+      const selected = searchText.value.slice(start, end);
+      searchText.value = `${searchText.value.slice(0, start)}${event.key}${selected}${pair}${searchText.value.slice(end)}`;
+      nextTick(() => input.setSelectionRange(start + 1 + selected.length, start + 1 + selected.length));
+      return;
+    }
+    if (suggestions.value.length && event.key === "Tab") {
+      event.preventDefault();
+      acceptSuggestion();
+    } else if (suggestions.value.length && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault();
+      navigateSuggestion(event.key === "ArrowDown" ? 1 : -1);
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      navigateMatch(event.shiftKey ? -1 : 1);
+    }
+  }
+
+  if (getCurrentScope()) onScopeDispose(clearTimer);
+
+  return { searchText, deferredSearchText, overlayVisible, currentMatchIndex, suggestions, suggestionIndex, matches, matchSet, currentMatch, acceptSuggestion, navigateSuggestion, navigateMatch, close, onKeydown };
+}
diff --git a/apps/desktop/src/composables/useDataGridSelection.ts b/apps/desktop/src/composables/useDataGridSelection.ts
index af12e3afb8..5d53710535 100644
--- a/apps/desktop/src/composables/useDataGridSelection.ts
+++ b/apps/desktop/src/composables/useDataGridSelection.ts
@@ -1,5 +1,6 @@
 import { ref, computed, getCurrentScope, onScopeDispose, type ComputedRef, type Ref } from "vue";
 import { allCellsSelectionRange, extractColumnsSelection, extractSelection, isCellInSelection, normalizeSelectionRange, normalizeSelectedColumnIndexes, rowSelectionRange, type CellPosition, type CellSelectionRange, type SelectionData } from "@/lib/dataGrid/gridSelection";
+import type { DataGridRuntimeScope } from "@/lib/dataGrid/dataGridRuntime";
 
 type CellValue = string | number | boolean | null;
 
@@ -24,6 +25,7 @@ export interface UseDataGridSelectionOptions {
   gridRef: Ref<HTMLDivElement | undefined>;
   getScrollElement?: () => HTMLElement | null;
   cellFromClientPoint?: (clientX: number, clientY: number) => CellPosition | null;
+  runtimeScope?: DataGridRuntimeScope;
 }
 
 const AUTO_SCROLL_EDGE_SIZE = 40;
@@ -341,7 +343,8 @@ export function useDataGridSelection(options: UseDataGridSelectionOptions) {
     document.addEventListener("mousemove", handleSelectionPointerMove);
   }
 
-  if (getCurrentScope()) onScopeDispose(finishCellSelection);
+  if (options.runtimeScope) options.runtimeScope.addCleanup(finishCellSelection);
+  else if (getCurrentScope()) onScopeDispose(finishCellSelection);
 
   function extendCellSelection(rowIndex: number, colIndex: number) {
     if (!isSelectingCells.value || !selectionAnchor.value) return;
diff --git a/apps/desktop/src/composables/useDataGridSort.ts b/apps/desktop/src/composables/useDataGridSort.ts
new file mode 100644
index 0000000000..b937377d48
--- /dev/null
+++ b/apps/desktop/src/composables/useDataGridSort.ts
@@ -0,0 +1,29 @@
+import { ref } from "vue";
+import type { DataGridSortDirection, DataGridSortMode } from "@/lib/dataGrid/dataGridSort";
+
+export function useDataGridSort() {
+  const sortColumn = ref<string | null>(null);
+  const sortColumnIndex = ref<number | null>(null);
+  const sortDirection = ref<DataGridSortDirection>("asc");
+  const sortMode = ref<DataGridSortMode>("database");
+
+  function setSort(column: string | null, columnIndex: number | null, direction: DataGridSortDirection, mode: DataGridSortMode) {
+    sortColumn.value = column;
+    sortColumnIndex.value = columnIndex;
+    sortDirection.value = direction;
+    sortMode.value = mode;
+  }
+
+  function clearSort() {
+    setSort(null, null, "asc", "database");
+  }
+
+  return {
+    sortColumn,
+    sortColumnIndex,
+    sortDirection,
+    sortMode,
+    setSort,
+    clearSort,
+  };
+}
diff --git a/apps/desktop/src/lib/__tests__/dataGrid/dataGridClipboard.spec.ts b/apps/desktop/src/lib/__tests__/dataGrid/dataGridClipboard.spec.ts
index 5746ad07dd..a0f4fe01df 100644
--- a/apps/desktop/src/lib/__tests__/dataGrid/dataGridClipboard.spec.ts
+++ b/apps/desktop/src/lib/__tests__/dataGrid/dataGridClipboard.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from "vitest";
 
-import { claimDataGridPaste } from "@/lib/dataGrid/dataGridClipboard";
+import { claimDataGridPaste, planDataGridPaste } from "@/lib/dataGrid/dataGridClipboard";
 
 function target(nativeClipboard: boolean): EventTarget {
   return {
@@ -49,3 +49,26 @@ describe("claimDataGridPaste", () => {
     expect(event.stopPropagation).toHaveBeenCalledOnce();
   });
 });
+
+describe("planDataGridPaste", () => {
+  it("flattens a clipboard matrix within grid bounds", () => {
+    expect(
+      planDataGridPaste(
+        [
+          ["a", "b"],
+          ["c", "d"],
+        ],
+        2,
+        1,
+      ),
+    ).toEqual([
+      { rowOffset: 0, columnOffset: 0, value: "a" },
+      { rowOffset: 1, columnOffset: 0, value: "c" },
+    ]);
+  });
+
+  it("returns no cells for empty bounds", () => {
+    expect(planDataGridPaste([["a"]], 0, 1)).toEqual([]);
+    expect(planDataGridPaste([["a"]], 1, 0)).toEqual([]);
+  });
+});
diff --git a/apps/desktop/src/lib/__tests__/dataGrid/dataGridContextMenu.spec.ts b/apps/desktop/src/lib/__tests__/dataGrid/dataGridContextMenu.spec.ts
new file mode 100644
index 0000000000..d04dfa453b
--- /dev/null
+++ b/apps/desktop/src/lib/__tests__/dataGrid/dataGridContextMenu.spec.ts
@@ -0,0 +1,83 @@
+import { describe, expect, it, vi } from "vitest";
+import { createDataGridCellContextMenuItems, createDataGridColumnContextMenuItems, createDataGridCompactColumnActionItems, createDataGridFilterSubmenu, createDataGridRowContextMenuItems, createDataGridSortMenuItems, dataGridSelectedSortMenuValue } from "@/lib/dataGrid/dataGridContextMenu";
+
+const icon = {};
+
+describe("dataGridContextMenu", () => {
+  it("marks only the active sort action and enables clear", () => {
+    const state = { column: "id", columnIndex: 0, direction: "desc" as const, mode: "local" as const };
+    const items = createDataGridSortMenuItems({
+      column: "id",
+      columnIndex: 0,
+      state,
+      labels: { databaseAscending: "db asc", databaseDescending: "db desc", currentPageAscending: "page asc", currentPageDescending: "page desc", clear: "clear" },
+      icons: { database: icon, ascending: icon, descending: icon, clear: icon },
+    });
+    expect(items.map((item) => item.checked)).toEqual([false, false, false, true, undefined]);
+    expect(items.at(-1)?.disabled).toBe(false);
+    expect(dataGridSelectedSortMenuValue(state, "id", 0)).toBe("local-desc");
+  });
+
+  it("omits unavailable server actions and disables unavailable formatter", () => {
+    const items = createDataGridCompactColumnActionItems({
+      labels: { formatter: "formatter", localFilter: "local", serverFilter: "server" },
+      icons: { formatter: icon, filter: icon, database: icon },
+      formatterAvailable: false,
+      serverFilterAvailable: false,
+    });
+    expect(items.map((item) => item.value)).toEqual(["formatter", "localFilter"]);
+    expect(items[0]?.disabled).toBe(true);
+  });
+
+  it("builds typed column, cell, and row capability groups", () => {
+    const action = vi.fn();
+    const filter = createDataGridFilterSubmenu({
+      label: "filter",
+      icon,
+      labels: { equals: "equals", notEquals: "not equals", like: "like", notLike: "not like", lessThan: "less", greaterThan: "greater", isNull: "null", isNotNull: "not null", clear: "clear" },
+      apply: action,
+      clear: action,
+    });
+    const columnItems = createDataGridColumnContextMenuItems({
+      headerColumn: true,
+      contextColumn: true,
+      canCopyAlterSql: true,
+      canFilter: true,
+      hasSort: true,
+      sortMode: "database",
+      labels: { copyName: "copy name", copyNames: "copy names", details: "details", copyAlterSql: "alter", databaseAscending: "db asc", databaseDescending: "db desc", localAscending: "local asc", localDescending: "local desc", clearSort: "clear sort" },
+      icons: { copy: icon, columnDetails: icon, database: icon, ascending: icon, descending: icon, clearSort: icon },
+      actions: { copyName: action, copyNames: action, details: action, copyAlterSql: action, sort: action },
+      filterSubmenu: filter,
+    });
+    expect(columnItems.map((item) => item.label)).toContain("filter");
+
+    const cellItems = createDataGridCellContextMenuItems({
+      hasCell: true,
+      hasColumn: true,
+      headerColumn: false,
+      editable: true,
+      hasCellSelection: true,
+      hasEditableSelection: false,
+      hasSelection: true,
+      labels: { cellDetails: "cell", columnDetails: "column", rowDetails: "row", setNull: "null", bulkEdit: "bulk", transpose: "transpose" },
+      icons: { cellDetails: icon, columnDetails: icon, rowDetails: icon, setNull: icon, bulkEdit: icon, transpose: icon },
+      actions: { cellDetails: action, columnDetails: action, rowDetails: action, setNull: action, bulkEdit: action, transpose: action },
+      copySubmenu: { label: "copy" },
+      selectionSubmenu: { label: "selection" },
+    });
+    expect(cellItems.find((item) => item.label === "bulk")?.disabled).toBe(true);
+
+    const rowItems = createDataGridRowContextMenuItems({
+      editable: true,
+      hasRow: true,
+      canClone: true,
+      deleted: false,
+      canDelete: true,
+      labels: { clone: "clone", restore: "restore", delete: "delete" },
+      icons: { clone: icon, restore: icon, delete: icon },
+      actions: { clone: action, restore: action, delete: action },
+    });
+    expect(rowItems.find((item) => item.label === "delete")?.variant).toBe("destructive");
+  });
+});
diff --git a/apps/desktop/src/lib/__tests__/dataGrid/dataGridEditAdapter.spec.ts b/apps/desktop/src/lib/__tests__/dataGrid/dataGridEditAdapter.spec.ts
new file mode 100644
index 0000000000..ff8ed992a5
--- /dev/null
+++ b/apps/desktop/src/lib/__tests__/dataGrid/dataGridEditAdapter.spec.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { dataGridEditAdapterKind } from "@/lib/dataGrid/dataGridEditAdapter";
+
+describe("dataGridEditAdapter", () => {
+  it("prioritizes custom save handlers", () => {
+    expect(dataGridEditAdapterKind({ databaseType: "mongodb", custom: true, editable: true })).toBe("custom");
+  });
+
+  it("distinguishes document and relational editing", () => {
+    expect(dataGridEditAdapterKind({ databaseType: "mongodb", custom: false, editable: true })).toBe("document");
+    expect(dataGridEditAdapterKind({ databaseType: "postgresql", custom: false, editable: true })).toBe("relational");
+  });
+
+  it("keeps read-only and unknown contexts unsupported", () => {
+    expect(dataGridEditAdapterKind({ databaseType: "postgresql", custom: false, editable: false })).toBe("unsupported");
+    expect(dataGridEditAdapterKind({ custom: false, editable: true })).toBe("unsupported");
+  });
+});
diff --git a/apps/desktop/src/lib/__tests__/dataGrid/dataGridFilterBuilderPersistence.spec.ts b/apps/desktop/src/lib/__tests__/dataGrid/dataGridFilterBuilderPersistence.spec.ts
new file mode 100644
index 0000000000..e5619211b0
--- /dev/null
+++ b/apps/desktop/src/lib/__tests__/dataGrid/dataGridFilterBuilderPersistence.spec.ts
@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { loadDataGridStructuredFilterState, saveDataGridStructuredFilterState } from "@/lib/dataGrid/dataGridFilterBuilderPersistence";
+
+describe("data grid filter builder persistence", () => {
+  it("isolates scopes and returns cloned state", () => {
+    saveDataGridStructuredFilterState("cache", {
+      scopeKey: "scope-a",
+      manualWhereInput: "status = 1",
+      rules: [{ id: "rule-1", columnName: "status", mode: "equals", rawValue: "1", rawEndValue: "", conjunction: "AND" }],
+      appliedWhereInput: '"status" = 1',
+      serverColumnFilters: { 0: { condition: '"status" = 1', keys: ["1"], labels: ["1"] } },
+    });
+
+    expect(loadDataGridStructuredFilterState("cache", "scope-b")).toBeUndefined();
+    const restored = loadDataGridStructuredFilterState("cache", "scope-a")!;
+    restored.rules[0].rawValue = "2";
+    restored.serverColumnFilters[0].keys.push("2");
+
+    expect(loadDataGridStructuredFilterState("cache", "scope-a")).toMatchObject({
+      rules: [{ rawValue: "1" }],
+      serverColumnFilters: { 0: { keys: ["1"] } },
+    });
+  });
+});
diff --git a/apps/desktop/src/lib/__tests__/dataGrid/dataGridNavigation.spec.ts b/apps/desktop/src/lib/__tests__/dataGrid/dataGridNavigation.spec.ts
new file mode 100644
index 0000000000..ca18a427fb
--- /dev/null
+++ b/apps/desktop/src/lib/__tests__/dataGrid/dataGridNavigation.spec.ts
@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { moveDataGridCell, navigateDataGridCell } from "@/lib/dataGrid/dataGridNavigation";
+
+const bounds = { rowCount: 3, visibleColumnCount: 4 };
+
+describe("dataGridNavigation", () => {
+  it("clamps directional movement to grid boundaries", () => {
+    expect(moveDataGridCell({ rowIndex: 0, colIndex: 0 }, -1, -1, bounds)).toEqual({ rowIndex: 0, colIndex: 0 });
+    expect(moveDataGridCell({ rowIndex: 2, colIndex: 3 }, 1, 1, bounds)).toEqual({ rowIndex: 2, colIndex: 3 });
+    expect(moveDataGridCell({ rowIndex: 1, colIndex: 2 }, -1, 1, bounds)).toEqual({ rowIndex: 0, colIndex: 3 });
+  });
+
+  it("supports home and end navigation without changing the row", () => {
+    expect(navigateDataGridCell({ rowIndex: 2, colIndex: 2 }, "home", bounds)).toEqual({ rowIndex: 2, colIndex: 0 });
+    expect(navigateDataGridCell({ rowIndex: 2, colIndex: 0 }, "end", bounds)).toEqual({ rowIndex: 2, colIndex: 3 });
+  });
+
+  it("returns no target for an empty grid", () => {
+    expect(navigateDataGridCell({ rowIndex: 0, colIndex: 0 }, "down", { rowCount: 0, visibleColumnCount: 4 })).toBeNull();
+  });
+});
diff --git a/apps/desktop/src/lib/__tests__/dataGrid/dataGridRuntime.spec.ts b/apps/desktop/src/lib/__tests__/dataGrid/dataGridRuntime.spec.ts
new file mode 100644
index 0000000000..639d1d39ce
--- /dev/null
+++ b/apps/desktop/src/lib/__tests__/dataGrid/dataGridRuntime.spec.ts
@@ -0,0 +1,46 @@
+import { readdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it, vi } from "vitest";
+import { createDataGridRuntimeScope } from "@/lib/dataGrid/dataGridRuntime";
+
+describe("dataGridRuntime", () => {
+  it("disposes registered resources in reverse order and only once", () => {
+    const scope = createDataGridRuntimeScope();
+    const calls: string[] = [];
+    const removeFirst = scope.addCleanup(() => calls.push("first"));
+    scope.addCleanup(() => calls.push("second"));
+
+    removeFirst();
+    scope.dispose();
+    scope.dispose();
+
+    expect(calls).toEqual(["second"]);
+    expect(scope.disposed).toBe(true);
+  });
+
+  it("runs cleanup immediately when registered after disposal", () => {
+    const scope = createDataGridRuntimeScope();
+    const cleanup = vi.fn();
+
+    scope.dispose();
+    const unregister = scope.addCleanup(cleanup);
+
+    unregister();
+    expect(cleanup).toHaveBeenCalledOnce();
+  });
+
+  it("keeps runtime modules independent from the DataGrid component", () => {
+    const sourceRoots = [join(process.cwd(), "apps/desktop/src/lib/dataGrid"), join(process.cwd(), "apps/desktop/src/composables")];
+    const sourceFiles: string[] = [];
+    const visit = (directory: string) => {
+      for (const entry of readdirSync(directory, { withFileTypes: true })) {
+        const path = join(directory, entry.name);
+        if (entry.isDirectory()) visit(path);
+        else if (entry.name.endsWith(".ts") && (!directory.endsWith("/composables") || entry.name.startsWith("useDataGrid"))) sourceFiles.push(path);
+      }
+    };
+    sourceRoots.forEach(visit);
+
+    expect(sourceFiles.filter((path) => readFileSync(path, "utf8").includes("DataGrid.vue"))).toEqual([]);
+  });
+});
diff --git a/apps/desktop/src/lib/__tests__/dataGrid/dataGridToolbar.spec.ts b/apps/desktop/src/lib/__tests__/dataGrid/dataGridToolbar.spec.ts
new file mode 100644
index 0000000000..2c8ca617eb
--- /dev/null
+++ b/apps/desktop/src/lib/__tests__/dataGrid/dataGridToolbar.spec.ts
@@ -0,0 +1,84 @@
+import { describe, expect, it, vi } from "vitest";
+import { dataGridToolbarIntervalOptions, selectDataGridToolbarAutoRefreshInterval, selectDataGridToolbarExportItem, toggleDataGridToolbarAutoRefresh, triggerDataGridToolbarAction, type DataGridToolbarAutoRefreshCapability } from "@/lib/dataGrid/dataGridToolbar";
+
+function autoRefreshCapability(overrides: Partial<DataGridToolbarAutoRefreshCapability> = {}): DataGridToolbarAutoRefreshCapability {
+  return {
+    label: "Auto-refresh",
+    shortLabel: "Auto",
+    startLabel: "Start auto-refresh",
+    stopLabel: "Stop auto-refresh",
+    enabled: false,
+    intervalSeconds: 10,
+    intervalOptions: [5, 10, 30],
+    intervalLabel: (seconds) => `${seconds}s`,
+    onToggle: vi.fn(),
+    onSelectInterval: vi.fn(),
+    ...overrides,
+  };
+}
+
+describe("data grid toolbar capabilities", () => {
+  it("does not invoke hidden or disabled actions", async () => {
+    const onTrigger = vi.fn();
+
+    await expect(triggerDataGridToolbarAction({ label: "Save", visible: false, onTrigger })).resolves.toBe(false);
+    await expect(triggerDataGridToolbarAction({ label: "Save", disabled: true, onTrigger })).resolves.toBe(false);
+    expect(onTrigger).not.toHaveBeenCalled();
+  });
+
+  it("invokes enabled save and rollback callbacks independently", async () => {
+    const save = vi.fn();
+    const rollback = vi.fn();
+
+    await expect(triggerDataGridToolbarAction({ label: "Save", onTrigger: save })).resolves.toBe(true);
+    await expect(triggerDataGridToolbarAction({ label: "Rollback", onTrigger: rollback })).resolves.toBe(true);
+    expect(save).toHaveBeenCalledOnce();
+    expect(rollback).toHaveBeenCalledOnce();
+  });
+
+  it("keeps preset intervals ordered and preserves a persisted custom interval", () => {
+    expect(dataGridToolbarIntervalOptions([30, 5, 10, 10, 0, -1, 2.5], 15)).toEqual([5, 10, 15, 30]);
+  });
+
+  it("toggles auto-refresh and selects valid intervals", async () => {
+    const onToggle = vi.fn();
+    const onSelectInterval = vi.fn();
+    const capability = autoRefreshCapability({ onToggle, onSelectInterval });
+
+    await expect(toggleDataGridToolbarAutoRefresh(capability)).resolves.toBe(true);
+    await expect(selectDataGridToolbarAutoRefreshInterval(capability, 30)).resolves.toBe(true);
+    await expect(selectDataGridToolbarAutoRefreshInterval(capability, 99)).resolves.toBe(false);
+    expect(onToggle).toHaveBeenCalledOnce();
+    expect(onSelectInterval).toHaveBeenCalledOnce();
+    expect(onSelectInterval).toHaveBeenCalledWith(30);
+  });
+
+  it("blocks auto-refresh changes while the capability is disabled", async () => {
+    const onToggle = vi.fn();
+    const onSelectInterval = vi.fn();
+    const capability = autoRefreshCapability({ disabled: true, onToggle, onSelectInterval });
+
+    await expect(toggleDataGridToolbarAutoRefresh(capability)).resolves.toBe(false);
+    await expect(selectDataGridToolbarAutoRefreshInterval(capability, 10)).resolves.toBe(false);
+    expect(onToggle).not.toHaveBeenCalled();
+    expect(onSelectInterval).not.toHaveBeenCalled();
+  });
+
+  it("rejects disabled or unknown export items", async () => {
+    const onSelect = vi.fn();
+    const capability = {
+      label: "Export",
+      items: [
+        { value: "csv", label: "CSV" },
+        { value: "sql", label: "SQL", disabled: true },
+      ],
+      onSelect,
+    };
+
+    await expect(selectDataGridToolbarExportItem(capability, "csv")).resolves.toBe(true);
+    await expect(selectDataGridToolbarExportItem(capability, "sql")).resolves.toBe(false);
+    await expect(selectDataGridToolbarExportItem(capability, "xlsx")).resolves.toBe(false);
+    expect(onSelect).toHaveBeenCalledOnce();
+    expect(onSelect).toHaveBeenCalledWith("csv");
+  });
+});
diff --git a/apps/desktop/src/lib/dataGrid/dataGridClipboard.ts b/apps/desktop/src/lib/dataGrid/dataGridClipboard.ts
index 9e2aa1874c..15d2867e7b 100644
--- a/apps/desktop/src/lib/dataGrid/dataGridClipboard.ts
+++ b/apps/desktop/src/lib/dataGrid/dataGridClipboard.ts
@@ -2,6 +2,12 @@ import { eventTargetUsesNativeClipboard } from "@/lib/common/clipboard";
 
 export type DataGridPasteIntent = "native" | "block" | "paste";
 
+export interface DataGridPasteCell {
+  rowOffset: number;
+  columnOffset: number;
+  value: string;
+}
+
 interface DataGridPasteEvent {
   target?: EventTarget | null;
   preventDefault(): void;
@@ -14,3 +20,14 @@ export function claimDataGridPaste(event: DataGridPasteEvent, editable: boolean,
   event.stopPropagation();
   return editable && hasSelection ? "paste" : "block";
 }
+
+export function planDataGridPaste(rows: readonly (readonly string[])[], maxRows: number, maxColumns: number): DataGridPasteCell[] {
+  if (maxRows <= 0 || maxColumns <= 0) return [];
+  const cells: DataGridPasteCell[] = [];
+  rows.slice(0, maxRows).forEach((row, rowOffset) => {
+    row.slice(0, maxColumns).forEach((value, columnOffset) => {
+      cells.push({ rowOffset, columnOffset, value });
+    });
+  });
+  return cells;
+}
diff --git a/apps/desktop/src/lib/dataGrid/dataGridContextMenu.ts b/apps/desktop/src/lib/dataGrid/dataGridContextMenu.ts
new file mode 100644
index 0000000000..da666cc03e
--- /dev/null
+++ b/apps/desktop/src/lib/dataGrid/dataGridContextMenu.ts
@@ -0,0 +1,216 @@
+import type { Component } from "vue";
+
+export type DataGridColumnMenuItem = {
+  label: string;
+  value: string;
+  icon?: Component;
+  disabled?: boolean;
+  separatorBefore?: boolean;
+  checked?: boolean;
+};
+
+export type DataGridContextMenuItem = {
+  label: string;
+  action?: () => void;
+  disabled?: boolean;
+  separator?: boolean;
+  icon?: Component;
+  iconClass?: string;
+  shortcut?: string;
+  variant?: "default" | "destructive";
+  visible?: boolean;
+  children?: DataGridContextMenuItem[];
+};
+
+export type DataGridContextMenuIcons = {
+  copy: Component;
+  filter: Component;
+  selection: Component;
+  export: Component;
+  database: Component;
+  ascending: Component;
+  descending: Component;
+  clearSort: Component;
+  cellDetails: Component;
+  rowDetails: Component;
+  columnDetails: Component;
+  setNull: Component;
+  bulkEdit: Component;
+  transpose: Component;
+  clone: Component;
+  restore: Component;
+  delete: Component;
+};
+
+export function createDataGridFilterSubmenu(options: {
+  label: string;
+  icon: Component;
+  labels: Record<"equals" | "notEquals" | "like" | "notLike" | "lessThan" | "greaterThan" | "isNull" | "isNotNull" | "clear", string>;
+  apply: (mode: "equals" | "not-equals" | "like" | "not-like" | "less-than" | "greater-than" | "is-null" | "is-not-null") => void;
+  clear: () => void;
+}): DataGridContextMenuItem {
+  const { labels } = options;
+  return {
+    label: options.label,
+    icon: options.icon,
+    children: [
+      { label: labels.equals, action: () => options.apply("equals") },
+      { label: labels.notEquals, action: () => options.apply("not-equals") },
+      { label: labels.like, action: () => options.apply("like") },
+      { label: labels.notLike, action: () => options.apply("not-like") },
+      { label: labels.lessThan, action: () => options.apply("less-than") },
+      { label: labels.greaterThan, action: () => options.apply("greater-than") },
+      { label: "", separator: true },
+      { label: labels.isNull, action: () => options.apply("is-null") },
+      { label: labels.isNotNull, action: () => options.apply("is-not-null") },
+      { label: "", separator: true },
+      { label: labels.clear, action: options.clear },
+    ],
+  };
+}
+
+export function createDataGridColumnContextMenuItems(options: {
+  headerColumn: boolean;
+  contextColumn: boolean;
+  canCopyAlterSql: boolean;
+  canFilter: boolean;
+  hasSort: boolean;
+  sortMode: "database" | "local";
+  labels: Record<"copyName" | "copyNames" | "details" | "copyAlterSql" | "databaseAscending" | "databaseDescending" | "localAscending" | "localDescending" | "clearSort", string>;
+  icons: Pick<DataGridContextMenuIcons, "copy" | "columnDetails" | "database" | "ascending" | "descending" | "clearSort">;
+  actions: { copyName: () => void; copyNames: () => void; details: () => void; copyAlterSql: () => void; sort: (direction: "asc" | "desc" | null, mode: "database" | "local") => void };
+  filterSubmenu: DataGridContextMenuItem;
+}): DataGridContextMenuItem[] {
+  const items: DataGridContextMenuItem[] = [];
+  if (options.headerColumn) {
+    items.push({ label: options.labels.copyName, action: options.actions.copyName, icon: options.icons.copy });
+    items.push({ label: options.labels.copyNames, action: options.actions.copyNames, icon: options.icons.copy });
+    items.push({ label: options.labels.details, action: options.actions.details, icon: options.icons.columnDetails });
+    if (options.canCopyAlterSql) items.push({ label: options.labels.copyAlterSql, action: options.actions.copyAlterSql, icon: options.icons.copy });
+  }
+  if (!options.contextColumn) return items;
+  items.push(
+    { label: options.labels.databaseAscending, action: () => options.actions.sort("asc", "database"), icon: options.icons.database },
+    { label: options.labels.databaseDescending, action: () => options.actions.sort("desc", "database"), icon: options.icons.database },
+    { label: "", separator: true },
+    { label: options.labels.localAscending, action: () => options.actions.sort("asc", "local"), icon: options.icons.ascending },
+    { label: options.labels.localDescending, action: () => options.actions.sort("desc", "local"), icon: options.icons.descending },
+  );
+  if (options.hasSort) items.push({ label: options.labels.clearSort, action: () => options.actions.sort(null, options.sortMode), icon: options.icons.clearSort });
+  if (options.canFilter) items.push({ label: "", separator: true }, options.filterSubmenu);
+  items.push({ label: "", separator: true });
+  return items;
+}
+
+export function createDataGridCellContextMenuItems(options: {
+  hasCell: boolean;
+  hasColumn: boolean;
+  headerColumn: boolean;
+  editable: boolean;
+  hasCellSelection: boolean;
+  hasEditableSelection: boolean;
+  hasSelection: boolean;
+  labels: Record<"cellDetails" | "columnDetails" | "rowDetails" | "setNull" | "bulkEdit" | "transpose", string>;
+  icons: Pick<DataGridContextMenuIcons, "cellDetails" | "columnDetails" | "rowDetails" | "setNull" | "bulkEdit" | "transpose">;
+  actions: Record<"cellDetails" | "columnDetails" | "rowDetails" | "setNull" | "bulkEdit" | "transpose", () => void>;
+  downloadItem?: DataGridContextMenuItem | null;
+  copySubmenu: DataGridContextMenuItem;
+  selectionSubmenu: DataGridContextMenuItem;
+}): DataGridContextMenuItem[] {
+  const items: DataGridContextMenuItem[] = [];
+  if (options.hasCell) {
+    if (options.hasColumn) {
+      items.push({ label: options.labels.cellDetails, action: options.actions.cellDetails, icon: options.icons.cellDetails });
+      if (options.downloadItem) items.push(options.downloadItem);
+      items.push({ label: options.labels.columnDetails, action: options.actions.columnDetails, icon: options.icons.columnDetails });
+    }
+    items.push({ label: options.labels.rowDetails, action: options.actions.rowDetails, icon: options.icons.rowDetails }, { label: "", separator: true });
+  }
+  if (!options.headerColumn) items.push(options.copySubmenu);
+  if (options.editable && options.hasCellSelection) {
+    if (!options.headerColumn) items.push({ label: options.labels.setNull, action: options.actions.setNull, disabled: !options.hasEditableSelection, icon: options.icons.setNull });
+    items.push({ label: options.labels.bulkEdit, action: options.actions.bulkEdit, disabled: !options.hasEditableSelection, icon: options.icons.bulkEdit });
+  }
+  if (options.hasCell) items.push({ label: options.labels.transpose, action: options.actions.transpose, icon: options.icons.transpose });
+  if (options.hasSelection) items.push(options.selectionSubmenu);
+  return items;
+}
+
+export function createDataGridRowContextMenuItems(options: {
+  editable: boolean;
+  hasRow: boolean;
+  canClone: boolean;
+  deleted: boolean;
+  canDelete: boolean;
+  labels: Record<"clone" | "restore" | "delete", string>;
+  icons: Pick<DataGridContextMenuIcons, "clone" | "restore" | "delete">;
+  actions: Record<"clone" | "restore" | "delete", () => void>;
+}): DataGridContextMenuItem[] {
+  if (!options.editable || !options.hasRow) return [];
+  const items: DataGridContextMenuItem[] = [{ label: "", separator: true }];
+  if (options.canClone) items.push({ label: options.labels.clone, action: options.actions.clone, icon: options.icons.clone });
+  if (options.deleted) items.push({ label: options.labels.restore, action: options.actions.restore, icon: options.icons.restore });
+  else if (options.canDelete) items.push({ label: options.labels.delete, action: options.actions.delete, icon: options.icons.delete, variant: "destructive" });
+  items.push({ label: "", separator: true });
+  return items;
+}
+
+export function createDataGridContextMenuItems(...groups: Array<readonly DataGridContextMenuItem[]>): DataGridContextMenuItem[] {
+  return groups.flat();
+}
+
+export type DataGridColumnSortState = {
+  column: string | null;
+  columnIndex: number | null;
+  direction: "asc" | "desc";
+  mode: "database" | "local";
+};
+
+type SortMenuLabels = {
+  databaseAscending: string;
+  databaseDescending: string;
+  currentPageAscending: string;
+  currentPageDescending: string;
+  clear: string;
+};
+
+type SortMenuIcons = {
+  database: Component;
+  ascending: Component;
+  descending: Component;
+  clear: Component;
+};
+
+export function dataGridColumnIsSorted(state: DataGridColumnSortState, column: string, columnIndex: number): boolean {
+  return state.column === column && state.columnIndex === columnIndex;
+}
+
+export function dataGridSelectedSortMenuValue(state: DataGridColumnSortState, column: string, columnIndex: number): string | undefined {
+  return dataGridColumnIsSorted(state, column, columnIndex) ? `${state.mode}-${state.direction}` : undefined;
+}
+
+export function createDataGridSortMenuItems(options: { column: string; columnIndex: number; state: DataGridColumnSortState; labels: SortMenuLabels; icons: SortMenuIcons }): DataGridColumnMenuItem[] {
+  const { column, columnIndex, state, labels, icons } = options;
+  const sorted = dataGridColumnIsSorted(state, column, columnIndex);
+  return [
+    { label: labels.databaseAscending, value: "database-asc", icon: icons.database, checked: sorted && state.direction === "asc" && state.mode === "database" },
+    { label: labels.databaseDescending, value: "database-desc", icon: icons.database, checked: sorted && state.direction === "desc" && state.mode === "database" },
+    { label: labels.currentPageAscending, value: "local-asc", icon: icons.ascending, checked: sorted && state.direction === "asc" && state.mode === "local", separatorBefore: true },
+    { label: labels.currentPageDescending, value: "local-desc", icon: icons.descending, checked: sorted && state.direction === "desc" && state.mode === "local" },
+    { label: labels.clear, value: "clear", icon: icons.clear, disabled: !sorted, separatorBefore: true },
+  ];
+}
+
+export function createDataGridCompactColumnActionItems(options: {
+  labels: { formatter: string; localFilter: string; serverFilter: string };
+  icons: { formatter: Component; filter: Component; database: Component };
+  formatterAvailable: boolean;
+  serverFilterAvailable: boolean;
+}): DataGridColumnMenuItem[] {
+  const { labels, icons } = options;
+  return [
+    { label: labels.formatter, value: "formatter", icon: icons.formatter, disabled: !options.formatterAvailable },
+    { label: labels.localFilter, value: "localFilter", icon: icons.filter },
+    ...(options.serverFilterAvailable ? [{ label: labels.serverFilter, value: "serverFilter", icon: icons.database }] : []),
+  ];
+}
diff --git a/apps/desktop/src/lib/dataGrid/dataGridEditAdapter.ts b/apps/desktop/src/lib/dataGrid/dataGridEditAdapter.ts
new file mode 100644
index 0000000000..0cadb96a7d
--- /dev/null
+++ b/apps/desktop/src/lib/dataGrid/dataGridEditAdapter.ts
@@ -0,0 +1,20 @@
+import type { DatabaseType } from "@/types/database";
+import type { DataGridEditAdapter } from "@/lib/dataGrid/dataGridRuntime";
+
+export type DataGridEditAdapterKind = "relational" | "document" | "custom" | "unsupported";
+
+export interface DataGridEditAdapterContext {
+  databaseType?: DatabaseType;
+  custom: boolean;
+  editable: boolean;
+}
+
+export function dataGridEditAdapterKind(context: DataGridEditAdapterContext): DataGridEditAdapterKind {
+  if (context.custom) return "custom";
+  if (!context.editable) return "unsupported";
+  if (context.databaseType === "mongodb") return "document";
+  if (context.databaseType) return "relational";
+  return "unsupported";
+}
+
+export type { DataGridEditAdapter };
diff --git a/apps/desktop/src/lib/dataGrid/dataGridFilterBuilderPersistence.ts b/apps/desktop/src/lib/dataGrid/dataGridFilterBuilderPersistence.ts
new file mode 100644
index 0000000000..547bbae278
--- /dev/null
+++ b/apps/desktop/src/lib/dataGrid/dataGridFilterBuilderPersistence.ts
@@ -0,0 +1,39 @@
+import type { DataGridStructuredFilterRule } from "@/composables/useDataGridFilterBuilder";
+
+export type DataGridCachedServerColumnFilter = {
+  condition: string;
+  keys: string[];
+  labels: string[];
+};
+
+export type DataGridStructuredFilterCacheState = {
+  scopeKey: string;
+  manualWhereInput: string;
+  rules: DataGridStructuredFilterRule[];
+  appliedWhereInput: string;
+  serverColumnFilters: Record<number, DataGridCachedServerColumnFilter>;
+};
+
+const structuredFilterStateCache = new Map<string, DataGridStructuredFilterCacheState>();
+
+export function cloneDataGridStructuredFilterRules(rules: readonly DataGridStructuredFilterRule[]): DataGridStructuredFilterRule[] {
+  return rules.map((rule) => ({ ...rule }));
+}
+
+export function loadDataGridStructuredFilterState(cacheKey: string, scopeKey: string): DataGridStructuredFilterCacheState | undefined {
+  const cached = structuredFilterStateCache.get(cacheKey);
+  if (!cached || cached.scopeKey !== scopeKey) return undefined;
+  return {
+    ...cached,
+    rules: cloneDataGridStructuredFilterRules(cached.rules),
+    serverColumnFilters: structuredClone(cached.serverColumnFilters),
+  };
+}
+
+export function saveDataGridStructuredFilterState(cacheKey: string, state: DataGridStructuredFilterCacheState) {
+  structuredFilterStateCache.set(cacheKey, {
+    ...state,
+    rules: cloneDataGridStructuredFilterRules(state.rules),
+    serverColumnFilters: structuredClone(state.serverColumnFilters),
+  });
+}
diff --git a/apps/desktop/src/lib/dataGrid/dataGridNavigation.ts b/apps/desktop/src/lib/dataGrid/dataGridNavigation.ts
new file mode 100644
index 0000000000..a9f35e4862
--- /dev/null
+++ b/apps/desktop/src/lib/dataGrid/dataGridNavigation.ts
@@ -0,0 +1,38 @@
+import type { CellPosition } from "@/lib/dataGrid/gridSelection";
+
+export type DataGridNavigationDirection = "up" | "down" | "left" | "right" | "home" | "end";
+
+export interface DataGridNavigationBounds {
+  rowCount: number;
+  visibleColumnCount: number;
+}
+
+function clamp(value: number, minimum: number, maximum: number): number {
+  return Math.max(minimum, Math.min(maximum, value));
+}
+
+export function moveDataGridCell(position: CellPosition, rowDelta: number, columnDelta: number, bounds: DataGridNavigationBounds): CellPosition | null {
+  if (bounds.rowCount <= 0 || bounds.visibleColumnCount <= 0) return null;
+  return {
+    rowIndex: clamp(position.rowIndex + rowDelta, 0, bounds.rowCount - 1),
+    colIndex: clamp(position.colIndex + columnDelta, 0, bounds.visibleColumnCount - 1),
+  };
+}
+
+export function navigateDataGridCell(position: CellPosition, direction: DataGridNavigationDirection, bounds: DataGridNavigationBounds): CellPosition | null {
+  if (bounds.rowCount <= 0 || bounds.visibleColumnCount <= 0) return null;
+  switch (direction) {
+    case "up":
+      return moveDataGridCell(position, -1, 0, bounds);
+    case "down":
+      return moveDataGridCell(position, 1, 0, bounds);
+    case "left":
+      return moveDataGridCell(position, 0, -1, bounds);
+    case "right":
+      return moveDataGridCell(position, 0, 1, bounds);
+    case "home":
+      return { rowIndex: position.rowIndex, colIndex: 0 };
+    case "end":
+      return { rowIndex: position.rowIndex, colIndex: bounds.visibleColumnCount - 1 };
+  }
+}
diff --git a/apps/desktop/src/lib/dataGrid/dataGridRuntime.ts b/apps/desktop/src/lib/dataGrid/dataGridRuntime.ts
new file mode 100644
index 0000000000..0e4abae5e5
--- /dev/null
+++ b/apps/desktop/src/lib/dataGrid/dataGridRuntime.ts
@@ -0,0 +1,84 @@
+import type { CellPosition, CellSelectionRange } from "@/lib/dataGrid/gridSelection";
+
+export type GridCoordinate = CellPosition;
+export type GridRange = CellSelectionRange;
+
+export interface GridEditPatch<Row = unknown, Value = unknown> {
+  rowIndex: number;
+  columnIndex: number;
+  previousValue: Value;
+  nextValue: Value;
+  row: Row;
+}
+
+export interface GridColumnLayout {
+  order: readonly string[];
+  hidden: ReadonlySet<string>;
+  pinned: ReadonlySet<string>;
+  widths: Readonly<Record<string, number>>;
+}
+
+export interface DataGridRuntimeScope {
+  readonly disposed: boolean;
+  addCleanup(cleanup: () => void): () => void;
+  dispose(): void;
+}
+
+export interface DataGridCapability {
+  readonly name: string;
+  dispose?(): void;
+}
+
+export interface DataGridSelectionCapability extends DataGridCapability {
+  getRange(): GridRange | null;
+  setRange(range: GridRange | null): void;
+  isSelected(position: GridCoordinate): boolean;
+}
+
+export interface DataGridNavigationCapability extends DataGridCapability {
+  moveFocus(position: GridCoordinate, direction: "up" | "down" | "left" | "right" | "home" | "end"): GridCoordinate;
+}
+
+export interface DataGridEditAdapter<Row = unknown, Value = unknown, Patch = GridEditPatch<Row, Value>> {
+  canEditCell(row: Row, columnIndex: number): boolean;
+  createPatch(input: GridEditPatch<Row, Value>): Patch | null;
+  applyPatch(patch: Patch): Promise<void> | void;
+}
+
+export interface DataGridRuntimeDependencies<Result = unknown> {
+  readonly result: Result;
+  readonly rowCount: number;
+  readonly columnCount: number;
+  readonly registerCleanup: DataGridRuntimeScope["addCleanup"];
+}
+
+export function createDataGridRuntimeScope(): DataGridRuntimeScope {
+  const cleanups: Array<() => void> = [];
+  let disposed = false;
+
+  return {
+    get disposed() {
+      return disposed;
+    },
+    addCleanup(cleanup) {
+      if (disposed) {
+        cleanup();
+        return () => undefined;
+      }
+
+      cleanups.push(cleanup);
+      let registered = true;
+      return () => {
+        if (!registered) return;
+        registered = false;
+        const index = cleanups.indexOf(cleanup);
+        if (index >= 0) cleanups.splice(index, 1);
+      };
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      for (const cleanup of cleanups.splice(0).reverse()) cleanup();
+    },
+  };
+}
diff --git a/apps/desktop/src/lib/dataGrid/dataGridToolbar.ts b/apps/desktop/src/lib/dataGrid/dataGridToolbar.ts
index 3dd1173193..41ebf166b4 100644
--- a/apps/desktop/src/lib/dataGrid/dataGridToolbar.ts
+++ b/apps/desktop/src/lib/dataGrid/dataGridToolbar.ts
@@ -1,3 +1,88 @@
 export const DATA_GRID_COMPACT_TOPBAR_WIDTH = 900;
 
 export type DataGridReloadIntent = "refresh";
+
+export interface DataGridToolbarActionCapability {
+  label: string;
+  tooltip?: string;
+  visible?: boolean;
+  disabled?: boolean;
+  active?: boolean;
+  loading?: boolean;
+  onTrigger: () => void | Promise<void>;
+}
+
+export interface DataGridToolbarSaveCapability extends DataGridToolbarActionCapability {
+  pendingCount: number;
+  shortcutLabel?: string;
+}
+
+export interface DataGridToolbarMenuItem {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  separatorBefore?: boolean;
+}
+
+export interface DataGridToolbarExportCapability {
+  label: string;
+  visible?: boolean;
+  disabled?: boolean;
+  items: readonly DataGridToolbarMenuItem[];
+  onSelect: (value: string) => void | Promise<void>;
+}
+
+export interface DataGridToolbarAutoRefreshCapability {
+  label: string;
+  shortLabel: string;
+  startLabel: string;
+  stopLabel: string;
+  visible?: boolean;
+  disabled?: boolean;
+  enabled: boolean;
+  intervalSeconds: number;
+  intervalOptions: readonly number[];
+  intervalLabel: (seconds: number) => string;
+  onToggle: () => void | Promise<void>;
+  onSelectInterval: (seconds: number) => void | Promise<void>;
+}
+
+export function isDataGridToolbarCapabilityVisible(capability: { visible?: boolean } | undefined): boolean {
+  return !!capability && capability.visible !== false;
+}
+
+export function isDataGridToolbarCapabilityDisabled(capability: { disabled?: boolean; loading?: boolean } | undefined): boolean {
+  return !capability || capability.disabled === true;
+}
+
+export async function triggerDataGridToolbarAction(capability: DataGridToolbarActionCapability | undefined): Promise<boolean> {
+  if (!capability || !isDataGridToolbarCapabilityVisible(capability) || isDataGridToolbarCapabilityDisabled(capability)) return false;
+  await capability.onTrigger();
+  return true;
+}
+
+export function dataGridToolbarIntervalOptions(intervalOptions: readonly number[], currentIntervalSeconds: number): number[] {
+  // Keep a persisted custom interval selectable even when it is not in today's preset list.
+  return [...new Set([...intervalOptions, currentIntervalSeconds].filter((seconds) => Number.isInteger(seconds) && seconds > 0))].sort((left, right) => left - right);
+}
+
+export async function toggleDataGridToolbarAutoRefresh(capability: DataGridToolbarAutoRefreshCapability | undefined): Promise<boolean> {
+  if (!capability || !isDataGridToolbarCapabilityVisible(capability) || isDataGridToolbarCapabilityDisabled(capability)) return false;
+  await capability.onToggle();
+  return true;
+}
+
+export async function selectDataGridToolbarAutoRefreshInterval(capability: DataGridToolbarAutoRefreshCapability | undefined, seconds: number): Promise<boolean> {
+  if (!capability || !isDataGridToolbarCapabilityVisible(capability) || isDataGridToolbarCapabilityDisabled(capability)) return false;
+  if (!dataGridToolbarIntervalOptions(capability.intervalOptions, capability.intervalSeconds).includes(seconds)) return false;
+  await capability.onSelectInterval(seconds);
+  return true;
+}
+
+export async function selectDataGridToolbarExportItem(capability: DataGridToolbarExportCapability | undefined, value: string): Promise<boolean> {
+  if (!capability || !isDataGridToolbarCapabilityVisible(capability) || capability.disabled) return false;
+  const item = capability.items.find((candidate) => candidate.value === value);
+  if (!item || item.disabled) return false;
+  await capability.onSelect(value);
+  return true;
+}
diff --git a/package.json b/package.json
index f7c78bcfb6..6789e5e880 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,7 @@
     "@types/node": "^25.9.1",
     "@types/splitpanes": "^2.2.6",
     "@vitejs/plugin-vue": "^6.0.7",
+    "happy-dom": "^20.10.6",
     "husky": "^9.1.7",
     "lint-staged": "^16.4.0",
     "oxfmt": "0.53.0",
diff --git a/packages/app-tests/dataGridContextMenu.test.ts b/packages/app-tests/dataGridContextMenu.test.ts
index 1033044a56..49827e2cfa 100644
--- a/packages/app-tests/dataGridContextMenu.test.ts
+++ b/packages/app-tests/dataGridContextMenu.test.ts
@@ -2,6 +2,7 @@ import assert from "node:assert/strict";
 import { readFileSync } from "node:fs";
 import { test } from "vitest";
 import { compileScript, parse } from "vue/compiler-sfc";
+import { createDataGridCellContextMenuItems } from "../../apps/desktop/src/lib/dataGrid/dataGridContextMenu";
 
 const dataGridPath = "apps/desktop/src/components/grid/DataGrid.vue";
 const dataGridSource = readFileSync(dataGridPath, "utf8");
@@ -23,11 +24,29 @@ test("set NULL applies a real null value only to editable selections", () => {
 });
 
 test("editable cell selections expose set NULL before bulk edit", () => {
-  const menuBlock = dataGridSource.match(/if \(props\.editable && hasCellSelection\.value\) \{[^]*?\n  \}/)?.[0] ?? "";
+  const icon = {};
+  const action = () => {};
+  const items = createDataGridCellContextMenuItems({
+    hasCell: false,
+    hasColumn: false,
+    headerColumn: false,
+    editable: true,
+    hasCellSelection: true,
+    hasEditableSelection: false,
+    hasSelection: false,
+    labels: { cellDetails: "cell", columnDetails: "column", rowDetails: "row", setNull: "set null", bulkEdit: "bulk edit", transpose: "transpose" },
+    icons: { cellDetails: icon, columnDetails: icon, rowDetails: icon, setNull: icon, bulkEdit: icon, transpose: icon },
+    actions: { cellDetails: action, columnDetails: action, rowDetails: action, setNull: action, bulkEdit: action, transpose: action },
+    copySubmenu: { label: "copy" },
+    selectionSubmenu: { label: "selection" },
+  });
 
-  assert.match(menuBlock, /const hasEditableSelection = selectionHasEditableCells\(\);/);
-  assert.match(menuBlock, /if \(!contextHeaderColumn\.value\) \{/);
-  assert.match(menuBlock, /label: t\("grid\.setNull"\),\s+action: setSelectionNull,\s+disabled: !hasEditableSelection,\s+icon: X,/);
-  assert.match(menuBlock, /label: t\("grid\.bulkEditSelection"\),\s+action: openBulkEditDialog,\s+disabled: !hasEditableSelection,/);
-  assert.ok(menuBlock.indexOf('t("grid.setNull")') < menuBlock.indexOf('t("grid.bulkEditSelection")'));
+  assert.deepEqual(
+    items.map((item) => ({ label: item.label, disabled: item.disabled })),
+    [
+      { label: "copy", disabled: undefined },
+      { label: "set null", disabled: true },
+      { label: "bulk edit", disabled: true },
+    ],
+  );
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3ea3f57cc1..d32420e3a3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -192,6 +192,9 @@ importers:
       '@vitejs/plugin-vue':
         specifier: ^6.0.7
         version: 6.0.7(vite@8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(stylus@0.57.0)(tsx@4.22.4)(yaml@2.8.4))(vue@3.5.35(typescript@6.0.3))
+      happy-dom:
+        specifier: ^20.10.6
+        version: 20.10.6
       husky:
         specifier: ^9.1.7
         version: 9.1.7
@@ -218,7 +221,7 @@ importers:
         version: 8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(stylus@0.57.0)(tsx@4.22.4)(yaml@2.8.4)
       vitest:
         specifier: ^4.1.8
-        version: 4.1.8(@types/node@25.9.1)(vite@8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(stylus@0.57.0)(tsx@4.22.4)(yaml@2.8.4))
+        version: 4.1.8(@types/node@25.9.1)(happy-dom@20.10.6)(vite@8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(stylus@0.57.0)(tsx@4.22.4)(yaml@2.8.4))
       vue-tsc:
         specifier: ^3.3.3
         version: 3.3.3(typescript@6.0.3)
@@ -1635,6 +1638,12 @@ packages:
   '@types/web-bluetooth@0.0.21':
     resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
+  '@types/whatwg-mimetype@3.0.2':
+    resolution: {integrity: sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==}
+
+  '@types/ws@8.18.1':
+    resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
+
   '@uiw/codemirror-theme-duotone@4.25.10':
     resolution: {integrity: sha512-OQzg73rlUnDQ1NDT2KR4Nt+67oMg5yRWXz60WoSATiLGhNoz8Af8hAKnY1TC+v4P8OmLoFnufFL7DQARX1wqQQ==}
 
@@ -1942,6 +1951,10 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
+  buffer-image-size@0.6.4:
+    resolution: {integrity: sha512-nEh+kZOPY1w+gcCMobZ6ETUp9WfibndnosbpwB1iJk/8Gt5ZF2bhS6+B6bPYz424KtwsR6Rflc3tCz1/ghX2dQ==}
+    engines: {node: '>=4.0'}
+
   buffer@5.7.1:
     resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
 
@@ -2592,6 +2605,10 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  happy-dom@20.10.6:
+    resolution: {integrity: sha512-6QD0ilzDDt93tX44y8tbmZdAcdTRYDhUP+Asgi6pC8Pp5IA3cvaZGyoVN/EGtlq9ziT65iPuBBn3ASLr6hCgVw==}
+    engines: {node: '>=20.0.0'}
+
   has-symbols@1.1.0:
     resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
     engines: {node: '>= 0.4'}
@@ -4058,6 +4075,10 @@ packages:
   web-worker@1.5.0:
     resolution: {integrity: sha512-RiMReJrTAiA+mBjGONMnjVDP2u3p9R1vkcGz6gDIrOMT3oGuYwX2WRMYI9ipkphSuE5XKEhydbhNEJh4NY9mlw==}
 
+  whatwg-mimetype@3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -4084,6 +4105,18 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
+  ws@8.21.1:
+    resolution: {integrity: sha512-+0NTnW77fFN/DjQi6k/Sq/Yvk4Sgajw7urW8V+asjXnRgDs9gyGkdb7EzgfhA4goXsRIZKE28fzIXBHEzhuiWw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   wsl-utils@0.1.0:
     resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
     engines: {node: '>=18'}
@@ -5276,6 +5309,12 @@ snapshots:
 
   '@types/web-bluetooth@0.0.21': {}
 
+  '@types/whatwg-mimetype@3.0.2': {}
+
+  '@types/ws@8.18.1':
+    dependencies:
+      '@types/node': 25.9.1
+
   '@uiw/codemirror-theme-duotone@4.25.10(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.43.0)':
     dependencies:
       '@uiw/codemirror-themes': 4.25.10(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.43.0)
@@ -5682,6 +5721,10 @@ snapshots:
       node-releases: 2.0.50
       update-browserslist-db: 1.2.3(browserslist@4.28.4)
 
+  buffer-image-size@0.6.4:
+    dependencies:
+      '@types/node': 25.9.1
+
   buffer@5.7.1:
     dependencies:
       base64-js: 1.5.1
@@ -6362,6 +6405,19 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
+  happy-dom@20.10.6:
+    dependencies:
+      '@types/node': 25.9.1
+      '@types/whatwg-mimetype': 3.0.2
+      '@types/ws': 8.18.1
+      buffer-image-size: 0.6.4
+      entities: 7.0.1
+      whatwg-mimetype: 3.0.0
+      ws: 8.21.1
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   has-symbols@1.1.0: {}
 
   hasown@2.0.3:
@@ -7716,7 +7772,7 @@ snapshots:
       tsx: 4.22.4
       yaml: 2.8.4
 
-  vitest@4.1.8(@types/node@25.9.1)(vite@8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(stylus@0.57.0)(tsx@4.22.4)(yaml@2.8.4)):
+  vitest@4.1.8(@types/node@25.9.1)(happy-dom@20.10.6)(vite@8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(stylus@0.57.0)(tsx@4.22.4)(yaml@2.8.4)):
     dependencies:
       '@vitest/expect': 4.1.8
       '@vitest/mocker': 4.1.8(vite@8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(stylus@0.57.0)(tsx@4.22.4)(yaml@2.8.4))
@@ -7740,6 +7796,7 @@ snapshots:
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 25.9.1
+      happy-dom: 20.10.6
     transitivePeerDependencies:
       - msw
 
@@ -7829,6 +7886,8 @@ snapshots:
 
   web-worker@1.5.0: {}
 
+  whatwg-mimetype@3.0.0: {}
+
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
@@ -7852,6 +7911,8 @@ snapshots:
 
   wrappy@1.0.2: {}
 
+  ws@8.21.1: {}
+
   wsl-utils@0.1.0:
     dependencies:
       is-wsl: 3.1.1
diff --git a/vitest.config.ts b/vitest.config.ts
index d8687fa9fb..9f878571b9 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,7 +1,9 @@
 import path from "node:path";
+import vue from "@vitejs/plugin-vue";
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
+  plugins: [vue()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "apps/desktop/src"),