@adaptabletools/adaptable 24.0.0-canary.5 → 24.0.0-canary.7

package/src/setupDevTools.js

@@ -1,12 +1,22 @@
 import { AG_GRID_VERSION } from './agGrid/AgGridModulesAdapter';
 import { ADAPTABLE_VERSION } from './EnvVars';
-import Emitter from './Utilities/Emitter';
+import { resolveVisibleSettingsPanelNavigationGroups } from './Utilities/Helpers/SettingsPanelHelper';
+import { isTransientReduxAction } from './Redux/Store/isTransientReduxAction';
+import { isPivotLayout } from './Utilities/Helpers/Layouts/LayoutHelper';
 import { debug } from '@infinite-table/infinite-react';
+import { colorSchemeDark, colorSchemeLight, themeQuartz } from 'ag-grid-enterprise';
 import { warnOnce } from './agGrid/AdaptableLogger';
 let DEV_TOOLS_LISTENING_STARTED = false;
 let DEV_TOOLS_READY = false;
-const __ADAPTABLE_DEVTOOLS_EMITTER = new Emitter();
 const LOG_LEVELS = ['info', 'success', 'warn', 'error', 'perf'];
+const LOG_CHANNEL_BASES = ['Adaptable', 'LayoutManager'];
+const MAX_LOG_ENTRIES_PER_INSTANCE = 500;
+const MAX_ACTION_ENTRIES_PER_INSTANCE = 200;
+const DEFAULT_LOG_LIMIT = 100;
+const DEFAULT_ACTION_LIMIT = 50;
+const DEVTOOLS_GLOBAL_NAME = '__ADAPTABLE_DEVTOOLS__';
+const PROFILE_TRACKS_STORAGE_KEY = 'adaptableProfileTracks';
+const DEBUG_STORAGE_KEY = 'debug';
 function serializeForPostMessage(value) {
     try {
         const json = JSON.stringify(value);
@@ -17,8 +27,9 @@ function serializeForPostMessage(value) {
         const seen = new WeakSet();
         const json = JSON.stringify(value, (_key, val) => {
             if (typeof val === 'object' && val !== null) {
-                if (seen.has(val))
+                if (seen.has(val)) {
                     return undefined;
+                }
                 seen.add(val);
             }
             return val;
@@ -34,7 +45,9 @@ function serializeAdaptableStateForPostMessage(state, parentKey) {
         }
         try {
             const json = JSON.stringify(value);
-            acc[key] = json === undefined ? String(value) : JSON.parse(json);
+            if (json !== undefined) {
+                acc[key] = JSON.parse(json);
+            }
         }
         catch (_error) {
             warnOnce(`Adaptable DevTools: skipping serializing state key "${parentKey ? `${parentKey}.` : ''}${key}"`);
@@ -66,23 +79,88 @@ function isMessageFromDevToolsContentScript(data) {
         data.target === 'adaptable-page' &&
         data.source.startsWith('adaptable-devtools-contentscript'));
 }
-function ensureDevToolsReady() {
-    if (DEV_TOOLS_READY) {
-        return Promise.resolve();
+const INSTANCE_REGISTRATIONS = new Map();
+const LOG_BUFFERS = new Map();
+const pendingGridRuntimeUpdates = new Map();
+const GRID_RUNTIME_FALLBACK_DELAY_MS = 100;
+function getRegistration(adaptableId) {
+    const registration = INSTANCE_REGISTRATIONS.get(adaptableId);
+    if (!registration || registration.instance?.isDestroyed) {
+        return undefined;
     }
-    DEV_TOOLS_READY = true;
-    console.log('Adaptable DevTools is listening for messages!');
+    return registration;
+}
+function getRegisteredApi(adaptableId) {
+    return getRegistration(adaptableId)?.api;
+}
+function describeMountedInstances() {
+    const ids = [...INSTANCE_REGISTRATIONS.keys()];
+    return ids.length ? `Mounted instances: ${ids.map((id) => `"${id}"`).join(', ')}.` : 'No AdapTable instance is mounted.';
+}
+function resolveRegistration(adaptableId) {
+    if (adaptableId != null) {
+        const registration = getRegistration(adaptableId);
+        if (!registration) {
+            throw new Error(`Adaptable DevTools: no mounted AdapTable instance with adaptableId "${adaptableId}". ${describeMountedInstances()}`);
+        }
+        return registration;
+    }
+    const ids = [...INSTANCE_REGISTRATIONS.keys()];
+    if (ids.length === 1) {
+        return INSTANCE_REGISTRATIONS.get(ids[0]);
+    }
+    if (!ids.length) {
+        throw new Error('Adaptable DevTools: no AdapTable instance is mounted yet (wait for the grid to be ready, then retry).');
+    }
+    throw new Error(`Adaptable DevTools: ${ids.length} AdapTable instances are mounted; pass an adaptableId. ${describeMountedInstances()}`);
+}
+let LOG_INTENT_LISTENING_STARTED = false;
+function parseLogChannel(channel) {
+    const channelParts = channel.split(':');
+    const [channelBase, adaptableId] = channelParts;
+    if (!LOG_CHANNEL_BASES.includes(channelBase)) {
+        return null;
+    }
+    if (channelBase === 'LayoutManager' && adaptableId === 'Diffing') {
+        return null;
+    }
+    if (!adaptableId) {
+        return null;
+    }
+    const level = channelParts.find((part) => LOG_LEVELS.includes(part));
+    return { adaptableId, level: level ?? 'info' };
+}
+function bufferLogEntry(entry) {
+    let buffer = LOG_BUFFERS.get(entry.adaptableId);
+    if (!buffer) {
+        buffer = [];
+        LOG_BUFFERS.set(entry.adaptableId, buffer);
+    }
+    buffer.push(entry);
+    if (buffer.length > MAX_LOG_ENTRIES_PER_INSTANCE) {
+        buffer.splice(0, buffer.length - MAX_LOG_ENTRIES_PER_INSTANCE);
+    }
+}
+function ensureLogIntentListening() {
+    if (LOG_INTENT_LISTENING_STARTED) {
+        return;
+    }
+    LOG_INTENT_LISTENING_STARTED = true;
     debug.onLogIntent('*', (logOptions) => {
         const { channel, color, timestamp, args } = logOptions;
-        const channelParts = channel.split(':');
-        const [channelBase, adaptableId] = channelParts;
-        if (!['Adaptable', 'LayoutManager'].includes(channelBase)) {
+        const parsed = parseLogChannel(channel);
+        if (!parsed) {
             return;
         }
-        if (channelBase === 'LayoutManager' && adaptableId === 'Diffing') {
-            return;
-        }
-        if (!adaptableId) {
+        const formattedArgs = args.map((arg) => formatLogArgForPostMessage(arg));
+        bufferLogEntry({
+            timestamp,
+            adaptableId: parsed.adaptableId,
+            channel,
+            level: parsed.level,
+            args: formattedArgs,
+        });
+        if (!DEV_TOOLS_READY) {
             return;
         }
         window.postMessage({
@@ -90,16 +168,29 @@ function ensureDevToolsReady() {
             url: getPageUrlOfWindow(),
             type: 'log',
             payload: {
-                adaptableId,
+                adaptableId: parsed.adaptableId,
                 channel,
                 color,
-                level: channelParts.find((part) => LOG_LEVELS.includes(part)) ?? 'info',
+                level: parsed.level,
                 timestamp,
-                args: args.map((arg) => serializeForPostMessage(formatLogArgForPostMessage(arg))),
+                args: formattedArgs.map((arg) => serializeForPostMessage(arg)),
             },
         });
     });
-    return __ADAPTABLE_DEVTOOLS_EMITTER.emit('ready');
+}
+function ensureDevToolsReady() {
+    if (DEV_TOOLS_READY) {
+        return;
+    }
+    DEV_TOOLS_READY = true;
+    console.log('Adaptable DevTools is listening for messages!');
+    for (const [adaptableId, registration] of INSTANCE_REGISTRATIONS) {
+        if (registration.instance?.isDestroyed) {
+            continue;
+        }
+        postMountMessage(adaptableId, registration.api);
+        postStateChangeMessage(adaptableId, { api: registration.api });
+    }
 }
 function handleOpenSettingsPanelMessage(payload) {
     const { adaptableId, moduleName } = payload ?? {};
@@ -107,52 +198,199 @@ function handleOpenSettingsPanelMessage(payload) {
         console.warn('Adaptable DevTools: open-settings-panel message missing adaptableId');
         return;
     }
-    const instance = REGISTERED_ADAPTABLE_INSTANCES.get(adaptableId);
-    if (instance?.isDestroyed) {
-        console.warn(`Adaptable DevTools: instance "${adaptableId}" is destroyed; cannot open settings panel`);
-        return;
+    try {
+        openSettingsPanel(adaptableId, moduleName);
     }
-    const api = instance?.api ?? REGISTERED_ADAPTABLE_APIS.get(adaptableId);
-    const settingsPanelApi = api?.settingsPanelApi;
-    if (!settingsPanelApi) {
-        console.warn(`Adaptable DevTools: settings panel is not available for "${adaptableId}" (instance not ready or destroyed)`);
-        return;
+    catch (error) {
+        console.warn(error.message);
     }
-    settingsPanelApi.openSettingsPanel(moduleName);
 }
-function applyThemeToDocumentElement(payload) {
-    const style = document.documentElement.style;
+const THEME_PREVIEW_ATTR = 'data-ab-devtools-theme-preview';
+function clearInlineAbVars(el) {
+    const style = el.style;
     for (let i = style.length - 1; i >= 0; i--) {
         const prop = style[i];
-        if (prop.startsWith('--ab-')) {
+        if (prop?.startsWith('--ab-') && !prop.startsWith('--ab-qs-')) {
             style.removeProperty(prop);
         }
     }
+}
+let themeAliasMaps = null;
+let themeAliasSheetCount = -1;
+function collectThemeAliases() {
+    const sheetCount = document.styleSheets.length;
+    if (themeAliasMaps && themeAliasSheetCount === sheetCount) {
+        return themeAliasMaps;
+    }
+    const root = new Map();
+    const dark = new Map();
+    const visit = (rules) => {
+        for (let index = 0; index < rules.length; index++) {
+            const rule = rules[index];
+            const group = rule;
+            if (group.cssRules) {
+                visit(group.cssRules);
+            }
+            const styleRule = rule;
+            if (!styleRule.style || !styleRule.selectorText) {
+                continue;
+            }
+            const selector = styleRule.selectorText;
+            const isDark = selector.includes('ab--theme-dark');
+            const isRoot = selector.includes(':root') ||
+                selector.includes('ab--theme-light') ||
+                /(^|[^\w-])html([^\w-]|$)/.test(selector);
+            if (!isDark && !isRoot) {
+                continue;
+            }
+            const target = isDark ? dark : root;
+            for (let i = 0; i < styleRule.style.length; i++) {
+                const prop = styleRule.style[i];
+                if (!prop?.startsWith('--')) {
+                    continue;
+                }
+                const value = styleRule.style.getPropertyValue(prop).trim();
+                if (value.includes('var(')) {
+                    target.set(prop, value);
+                }
+            }
+        }
+    };
+    for (let index = 0; index < document.styleSheets.length; index++) {
+        const sheet = document.styleSheets[index];
+        try {
+            visit(sheet.cssRules);
+        }
+        catch {
+        }
+    }
+    themeAliasMaps = { root, dark };
+    themeAliasSheetCount = sheetCount;
+    return themeAliasMaps;
+}
+let darkThemeProbe = null;
+function themeDefaultStyle(variant) {
+    if (variant === 'light') {
+        return getComputedStyle(document.documentElement);
+    }
+    if (!darkThemeProbe) {
+        darkThemeProbe = document.createElement('div');
+        darkThemeProbe.className = 'ab--theme-dark';
+        darkThemeProbe.setAttribute('data-ab-devtools-theme-probe', '');
+        darkThemeProbe.style.cssText =
+            'position:absolute;width:0;height:0;overflow:hidden;pointer-events:none';
+        document.body.appendChild(darkThemeProbe);
+    }
+    return getComputedStyle(darkThemeProbe);
+}
+function installLiveAliases(el, variant) {
+    const { root, dark } = collectThemeAliases();
+    const defaults = themeDefaultStyle(variant);
+    const aliases = variant === 'dark' ? new Map([...root, ...dark]) : root;
+    for (const [name, raw] of aliases) {
+        const inline = el.style.getPropertyValue(name).trim();
+        const fallback = defaults.getPropertyValue(name).trim();
+        if (!inline || inline === raw || inline === fallback) {
+            el.style.setProperty(name, raw);
+        }
+    }
+}
+function clearDocumentThemePreview() {
+    clearInlineAbVars(document.documentElement);
+}
+function getInstanceThemeElements(adaptableId) {
+    const instance = getRegistration(adaptableId)?.instance;
+    if (!instance) {
+        return [];
+    }
+    const elements = [
+        instance.getAdaptableContainerElement(),
+        instance.getAgGridContainerElement(),
+    ].filter((el) => el instanceof HTMLElement);
+    return [...new Set(elements)];
+}
+const originalAgGridThemes = new Map();
+function applyAgGridPreviewTheme(adaptableId, variant) {
+    const instance = getRegistration(adaptableId)?.instance;
+    const gridApi = instance?.agGridAdapter.getAgGridApi();
+    if (!instance || instance.isDestroyed || !gridApi || gridApi.isDestroyed()) {
+        return;
+    }
+    if (instance.agGridThemeAdapter.getAgGridThemeMode() === 'legacy') {
+        return;
+    }
+    if (!originalAgGridThemes.has(adaptableId)) {
+        originalAgGridThemes.set(adaptableId, gridApi.getGridOption('theme'));
+    }
+    const original = originalAgGridThemes.get(adaptableId);
+    const base = original && original !== 'legacy' && typeof original.withPart === 'function'
+        ? original
+        : themeQuartz;
+    gridApi.setGridOption('theme', base.withPart(variant === 'dark' ? colorSchemeDark : colorSchemeLight));
+}
+function syncAgGridPreviewThemes(activeId, variant) {
+    applyAgGridPreviewTheme(activeId, variant);
+}
+function applyThemeVars(el, payload) {
+    clearInlineAbVars(el);
     for (const [name, value] of Object.entries(payload.light)) {
         if (value != null && value !== '') {
-            style.setProperty(name, String(value));
+            el.style.setProperty(name, String(value));
         }
     }
     if (payload.variant === 'dark') {
         for (const [name, value] of Object.entries(payload.dark)) {
             if (value != null && value !== '') {
-                style.setProperty(name, String(value));
+                el.style.setProperty(name, String(value));
             }
         }
+        el.classList.add('ab--theme-dark');
+    }
+    else if (el.getAttribute(THEME_PREVIEW_ATTR) === 'dark') {
+        el.classList.remove('ab--theme-dark');
     }
+    el.setAttribute(THEME_PREVIEW_ATTR, payload.variant);
+    installLiveAliases(el, payload.variant);
 }
 function handleThemeVarChangeMessage(payload) {
-    const { name, value } = payload ?? {};
-    if (!name) {
+    const { name, value, adaptableId } = payload ?? {};
+    if (!name || !adaptableId) {
         return;
     }
-    document.documentElement.style.setProperty(name, String(value ?? ''));
+    const targets = getInstanceThemeElements(adaptableId);
+    if (targets.length === 0) {
+        console.warn(`Adaptable DevTools: no theme container for "${adaptableId}"`);
+        return;
+    }
+    const variant = payload.variant === 'dark' ? 'dark' : 'light';
+    clearDocumentThemePreview();
+    for (const el of targets) {
+        if (!el.hasAttribute(THEME_PREVIEW_ATTR)) {
+            el.setAttribute(THEME_PREVIEW_ATTR, variant);
+        }
+        installLiveAliases(el, variant);
+        el.style.setProperty(name, String(value ?? ''));
+    }
 }
 function handleApplyThemeMessage(payload) {
     if (!payload || (payload.variant !== 'light' && payload.variant !== 'dark')) {
         return;
     }
-    applyThemeToDocumentElement(payload);
+    const { adaptableId } = payload;
+    if (!adaptableId) {
+        console.warn('Adaptable DevTools: apply-theme message missing adaptableId');
+        return;
+    }
+    const targets = getInstanceThemeElements(adaptableId);
+    if (targets.length === 0) {
+        console.warn(`Adaptable DevTools: no theme container for "${adaptableId}"`);
+        return;
+    }
+    clearDocumentThemePreview();
+    for (const el of targets) {
+        applyThemeVars(el, payload);
+    }
+    syncAgGridPreviewThemes(adaptableId, payload.variant);
 }
 function handleLoadVariantMessage(payload) {
     const { adaptableId, variant } = payload ?? {};
@@ -160,7 +398,7 @@ function handleLoadVariantMessage(payload) {
         console.warn('Adaptable DevTools: load-variant message missing adaptableId or variant');
         return;
     }
-    const api = REGISTERED_ADAPTABLE_APIS.get(adaptableId);
+    const api = getRegisteredApi(adaptableId);
     if (!api) {
         console.warn(`Adaptable DevTools: no registered instance for "${adaptableId}"`);
         return;
@@ -179,23 +417,279 @@ function handleRestoreStateMessage(payload) {
         console.warn('Adaptable DevTools: restore-state message missing adaptableId or state');
         return;
     }
-    const api = REGISTERED_ADAPTABLE_APIS.get(adaptableId);
-    if (!api) {
-        console.warn(`Adaptable DevTools: no registered instance for "${adaptableId}"`);
-        return;
-    }
-    void api.stateApi.internalApi.restoreState(state).catch((error) => {
+    void restoreState(adaptableId, state).catch((error) => {
         console.error(`Adaptable DevTools: failed to restore state for "${adaptableId}"`, error);
     });
 }
+function openSettingsPanel(adaptableId, moduleName) {
+    const { api } = resolveRegistration(adaptableId);
+    const settingsPanelApi = api?.settingsPanelApi;
+    if (!settingsPanelApi) {
+        throw new Error(`Adaptable DevTools: settings panel is not available for "${adaptableId}" (instance not ready or destroyed)`);
+    }
+    settingsPanelApi.openSettingsPanel(moduleName);
+}
+function restoreState(adaptableId, state) {
+    if (!state || typeof state !== 'object') {
+        return Promise.reject(new Error('Adaptable DevTools: restoreState needs a state object'));
+    }
+    const { api } = resolveRegistration(adaptableId);
+    return api.stateApi.internalApi.restoreState(state);
+}
+function buildGridRuntime(api) {
+    const selectedRowInfo = api.gridApi.getSelectedRowInfo();
+    return {
+        allRowsCount: api.gridApi.getRowCount(),
+        visibleRowsCount: api.gridApi.getVisibleRowCount(),
+        selectedRowsCount: selectedRowInfo?.gridRows?.length ?? 0,
+    };
+}
+function buildInstanceSummary(api) {
+    const options = api.optionsApi.getAdaptableOptions();
+    const globalObject = typeof globalThis !== 'undefined' ? globalThis : window;
+    const licenseKey = globalObject.ADAPTABLE_LICENSE_KEY ||
+        options.licenseKey;
+    return {
+        licenseKey: licenseKey || undefined,
+        userName: api.optionsApi.getUserName(),
+        primaryKey: api.optionsApi.getPrimaryKey(),
+    };
+}
+function buildInstanceInfo(adaptableId, api) {
+    const { userName, primaryKey } = buildInstanceSummary(api);
+    return {
+        adaptableId,
+        adaptableVersion: ADAPTABLE_VERSION,
+        agGridVersion: AG_GRID_VERSION,
+        adaptableStateKey: api.optionsApi.getAdaptableStateKey(),
+        primaryKey,
+        userName,
+        gridRuntime: buildGridRuntime(api),
+    };
+}
+function getStateSnapshot(api) {
+    return api.stateApi.internalApi.getAllStateForDevTools
+        ? api.stateApi.internalApi.getAllStateForDevTools()
+        : api.stateApi.getAllState();
+}
+function buildColumns(api) {
+    const calculated = new Set(api.calculatedColumnApi.getCalculatedColumns().map((c) => c.ColumnId));
+    const freeText = new Set(api.freeTextColumnApi.getFreeTextColumns().map((c) => c.ColumnId));
+    const action = new Set(api.actionColumnApi.getActionColumns().map((c) => c.columnId));
+    const visible = new Set(api.columnApi.getVisibleColumns().map((c) => c.columnId));
+    return api.columnApi.getColumns().map((column) => ({
+        id: column.columnId,
+        friendlyName: column.friendlyName,
+        dataType: column.dataType,
+        field: column.field,
+        columnTypes: column.columnTypes,
+        visible: visible.has(column.columnId),
+        readOnly: column.readOnly,
+        isPrimaryKey: column.isPrimaryKey,
+        isGrouped: column.isGrouped,
+        pinned: column.pinned,
+        isGeneratedRowGroupColumn: column.isGeneratedRowGroupColumn,
+        isGeneratedPivotResultColumn: column.isGeneratedPivotResultColumn,
+        isCalculatedColumn: calculated.has(column.columnId),
+        isFreeTextColumn: freeText.has(column.columnId),
+        isActionColumn: action.has(column.columnId),
+    }));
+}
+function buildGridInfo(adaptableId, api) {
+    const { licenseKey, userName, primaryKey } = buildInstanceSummary(api);
+    const currentLayout = api.layoutApi.getCurrentLayout();
+    const isPivot = isPivotLayout(currentLayout);
+    const selectedRowInfo = api.gridApi.getSelectedRowInfo();
+    const available = [];
+    const unavailable = [];
+    api.internalApi.getModules().forEach((module, moduleName) => {
+        (module.isModuleAvailable() ? available : unavailable).push(moduleName);
+    });
+    return {
+        adaptableId,
+        adaptableVersion: ADAPTABLE_VERSION,
+        agGridVersion: AG_GRID_VERSION,
+        adaptableStateKey: api.optionsApi.getAdaptableStateKey(),
+        userName,
+        primaryKey,
+        isAutogeneratedPrimaryKey: api.optionsApi.isAutogeneratePrimaryKey(),
+        licenseKey,
+        layout: {
+            name: api.layoutApi.getCurrentLayoutName(),
+            type: isPivot ? 'Pivot' : 'Table',
+            rowGroups: api.layoutApi.getCurrentRowGroupsColumnIds() ?? [],
+            pivotColumns: isPivot ? (currentLayout.PivotColumns ?? []) : [],
+            sorts: (api.gridApi.getColumnSorts() ?? []).map((sort) => ({
+                columnId: sort.ColumnId,
+                sortOrder: sort.SortOrder,
+            })),
+        },
+        columnFilters: api.filterApi.columnFilterApi.columnFiltersToString(api.filterApi.columnFilterApi.getColumnFilters()),
+        gridFilter: api.filterApi.gridFilterApi.getCurrentGridFilterExpression() || undefined,
+        rows: {
+            all: api.gridApi.getRowCount(),
+            visible: api.gridApi.getVisibleRowCount(),
+            selected: selectedRowInfo?.gridRows?.length ?? 0,
+        },
+        columns: {
+            all: api.gridApi.getColumnCount(),
+            visible: api.gridApi.getVisibleColumnCount(),
+            calculated: api.calculatedColumnApi.getCalculatedColumns().map((c) => c.ColumnId),
+            freeText: api.freeTextColumnApi.getFreeTextColumns().map((c) => c.ColumnId),
+            action: api.actionColumnApi.getActionColumns().map((c) => c.columnId),
+        },
+        modules: { available, unavailable },
+    };
+}
+function getLocalStorage() {
+    try {
+        return typeof localStorage !== 'undefined' ? localStorage : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+const DEVTOOLS_HELP = `AdapTable DevTools in-page API (window.${DEVTOOLS_GLOBAL_NAME}). Every method returns plain JSON unless noted.
+Omit adaptableId when one instance is mounted.
+
+  listInstances()                        -> [{ adaptableId, adaptableVersion, agGridVersion, primaryKey, userName, gridRuntime }]
+  getGridInfo(id?)                       -> versions, layout, filters, row/column counts, modules (the Settings Panel "Grid Info" facts)
+  getState(id?, section?)                -> full AdapTable State, or one section such as 'Layout' or 'FormatColumn'
+  getPersistentState(id?)                -> the user state AdapTable persists; pass it to the MCP check_state / migrate_state tools
+  getColumns(id?)                        -> [{ id, friendlyName, dataType, visible, ... }]; { id, dataType } is the MCP "columns" input
+  getLogs(id?, { level?, channel?, limit? }) -> recent AdapTable log messages, buffered without localStorage.debug
+  getRecentActions(id?, limit?)          -> recent state-changing actions
+  restoreState(id, state)                -> Promise; restores a snapshot from getState()/getPersistentState()
+  openSettingsPanel(id?, moduleName?)    -> opens the Settings Panel (e.g. 'Layout', 'FormatColumn')
+  setLogging(pattern | null)             -> sets localStorage.debug (e.g. 'Adaptable:<id>:*'); returns the previous value
+  enableProfiling(enabled?)              -> toggles localStorage.adaptableProfileTracks
+  getApi(id?)                            -> the live AdaptableApi (not serializable)
+
+Docs: https://www.adaptabletools.com/docs/dev-guide-support-devtools`;
+function createDevToolsGlobal() {
+    return {
+        help() {
+            return DEVTOOLS_HELP;
+        },
+        listInstances() {
+            const result = [];
+            for (const [adaptableId, registration] of INSTANCE_REGISTRATIONS) {
+                if (registration.instance?.isDestroyed) {
+                    continue;
+                }
+                result.push(buildInstanceInfo(adaptableId, registration.api));
+            }
+            return result;
+        },
+        getState(adaptableId, section) {
+            const { api } = resolveRegistration(adaptableId);
+            const state = serializeAdaptableStateForPostMessage(getStateSnapshot(api));
+            if (section == null) {
+                return state;
+            }
+            if (!(section in state)) {
+                throw new Error(`Adaptable DevTools: unknown state section "${String(section)}". Sections: ${Object.keys(state).join(', ')}`);
+            }
+            return state[section];
+        },
+        getPersistentState(adaptableId) {
+            const { api } = resolveRegistration(adaptableId);
+            return serializeForPostMessage(api.stateApi.getPersistentState());
+        },
+        getColumns(adaptableId) {
+            const { api } = resolveRegistration(adaptableId);
+            return serializeForPostMessage(buildColumns(api));
+        },
+        getGridInfo(adaptableId) {
+            const registration = resolveRegistration(adaptableId);
+            const id = adaptableId ?? registration.api.optionsApi.getAdaptableId();
+            return serializeForPostMessage(buildGridInfo(id, registration.api));
+        },
+        getLogs(adaptableId, options) {
+            const registration = resolveRegistration(adaptableId);
+            const id = adaptableId ?? registration.api.optionsApi.getAdaptableId();
+            const { level, channel, limit = DEFAULT_LOG_LIMIT } = options ?? {};
+            const levels = level == null ? null : new Set(Array.isArray(level) ? level : [level]);
+            const entries = (LOG_BUFFERS.get(id) ?? []).filter((entry) => (!levels || levels.has(entry.level)) && (!channel || entry.channel.includes(channel)));
+            return entries.slice(Math.max(0, entries.length - limit)).map((entry) => ({ ...entry }));
+        },
+        getRecentActions(adaptableId, limit = DEFAULT_ACTION_LIMIT) {
+            const { actions } = resolveRegistration(adaptableId);
+            return actions.slice(Math.max(0, actions.length - limit)).map((entry) => ({ ...entry }));
+        },
+        restoreState(adaptableId, state) {
+            return restoreState(adaptableId, state);
+        },
+        openSettingsPanel(adaptableId, moduleName) {
+            openSettingsPanel(adaptableId, moduleName);
+        },
+        setLogging(pattern) {
+            const storage = getLocalStorage();
+            if (!storage) {
+                throw new Error('Adaptable DevTools: localStorage is not available');
+            }
+            const previous = storage.getItem(DEBUG_STORAGE_KEY);
+            if (pattern == null || pattern === '') {
+                storage.removeItem(DEBUG_STORAGE_KEY);
+            }
+            else {
+                storage.setItem(DEBUG_STORAGE_KEY, pattern);
+            }
+            return previous;
+        },
+        enableProfiling(enabled = true) {
+            const storage = getLocalStorage();
+            if (!storage) {
+                throw new Error('Adaptable DevTools: localStorage is not available');
+            }
+            if (enabled) {
+                storage.setItem(PROFILE_TRACKS_STORAGE_KEY, 'true');
+            }
+            else {
+                storage.removeItem(PROFILE_TRACKS_STORAGE_KEY);
+            }
+        },
+        getApi(adaptableId) {
+            return resolveRegistration(adaptableId).api;
+        },
+    };
+}
+function ensureDevToolsGlobal() {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    if (!window[DEVTOOLS_GLOBAL_NAME]) {
+        Object.defineProperty(window, DEVTOOLS_GLOBAL_NAME, {
+            value: createDevToolsGlobal(),
+            writable: false,
+            configurable: true,
+            enumerable: false,
+        });
+    }
+}
+function setupDevToolsOnLoad() {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    ensureDevToolsGlobal();
+    ensureLogIntentListening();
+}
+setupDevToolsOnLoad();
 export function listenForDevTools(adaptableInstance) {
-    if (typeof window !== 'undefined' && !DEV_TOOLS_LISTENING_STARTED) {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    setupDevToolsOnLoad();
+    if (!DEV_TOOLS_LISTENING_STARTED) {
         DEV_TOOLS_LISTENING_STARTED = true;
         window.addEventListener('message', (event) => {
+            if (event.source !== window) {
+                return;
+            }
             if (!isMessageFromDevToolsContentScript(event.data)) {
                 return;
             }
-            void ensureDevToolsReady();
+            ensureDevToolsReady();
             const handlers = {
                 'restore-state': handleRestoreStateMessage,
                 'open-settings-panel': handleOpenSettingsPanelMessage,
@@ -206,28 +700,12 @@ export function listenForDevTools(adaptableInstance) {
             handlers[event.data.type]?.(event.data.payload);
         });
     }
-    __ADAPTABLE_DEVTOOLS_EMITTER.onIncludeFiredOnce('ready').then(() => {
-        const { api, adaptableOptions } = adaptableInstance;
-        if (!api || !adaptableOptions) {
-            console.error('Cannot register Adaptable instance in DevTools because it is not ready', adaptableInstance);
-            return;
-        }
-        registerAdaptableInstanceInDevTools(adaptableOptions.adaptableId, { api }, adaptableInstance);
-    });
-}
-const REGISTERED_ADAPTABLE_IDS = new Set();
-const REGISTERED_ADAPTABLE_APIS = new Map();
-const REGISTERED_ADAPTABLE_INSTANCES = new Map();
-const pendingGridRuntimeUpdates = new Map();
-const GRID_RUNTIME_FALLBACK_DELAY_MS = 100;
-const INSTANCE_REGISTRATIONS = new Map();
-function buildGridRuntime(api) {
-    const selectedRowInfo = api.gridApi.getSelectedRowInfo();
-    return {
-        allRowsCount: api.gridApi.getRowCount(),
-        visibleRowsCount: api.gridApi.getVisibleRowCount(),
-        selectedRowsCount: selectedRowInfo?.gridRows?.length ?? 0,
-    };
+    const { api, adaptableOptions } = adaptableInstance;
+    if (!api || !adaptableOptions) {
+        console.error('Cannot register Adaptable instance in DevTools because it is not ready', adaptableInstance);
+        return;
+    }
+    registerAdaptableInstanceInDevTools(adaptableOptions.adaptableId, api, adaptableInstance);
 }
 function postMountMessage(adaptableId, api) {
     window.postMessage(buildMessageForExtension({
@@ -235,7 +713,8 @@ function postMountMessage(adaptableId, api) {
         adaptableId,
         adaptableVersion: ADAPTABLE_VERSION,
         agGridVersion: AG_GRID_VERSION,
-        licenseKey: api.optionsApi.getAdaptableOptions().licenseKey,
+        ...buildInstanceSummary(api),
+        settingsPanelNavigation: resolveVisibleSettingsPanelNavigationGroups(api),
     }));
 }
 function cancelScheduledGridRuntimeUpdate(adaptableId) {
@@ -253,28 +732,31 @@ function scheduleGridRuntimeUpdate(adaptableId, api, delayMs = GRID_RUNTIME_FALL
     }, delayMs));
 }
 function postStateChangeMessage(adaptableId, options) {
-    const api = options?.api ?? REGISTERED_ADAPTABLE_APIS.get(adaptableId);
+    const api = options?.api ?? getRegisteredApi(adaptableId);
     if (!api) {
         return;
     }
-    const state = api.stateApi.internalApi.getAllStateForDevTools
-        ? api.stateApi.internalApi.getAllStateForDevTools()
-        : api.stateApi.getAllState();
     window.postMessage(buildMessageForExtension({
         type: 'state-change',
         adaptableId,
-        state: serializeAdaptableStateForPostMessage(state),
+        state: serializeAdaptableStateForPostMessage(getStateSnapshot(api)),
         actionName: options?.actionName,
+        ...buildInstanceSummary(api),
+        settingsPanelNavigation: resolveVisibleSettingsPanelNavigationGroups(api),
     }));
     if (options?.api) {
         scheduleGridRuntimeUpdate(adaptableId, options.api);
     }
 }
 function postGridRuntimeUpdate(adaptableId, api) {
+    if (!DEV_TOOLS_READY) {
+        return;
+    }
     window.postMessage(buildMessageForExtension({
         type: 'state-change',
         adaptableId,
         gridRuntime: buildGridRuntime(api),
+        ...buildInstanceSummary(api),
     }));
 }
 function detachAdaptableInstanceListeners(adaptableId) {
@@ -284,13 +766,13 @@ function detachAdaptableInstanceListeners(adaptableId) {
         registration.unsubscribe();
         INSTANCE_REGISTRATIONS.delete(adaptableId);
     }
-    REGISTERED_ADAPTABLE_IDS.delete(adaptableId);
-    REGISTERED_ADAPTABLE_APIS.delete(adaptableId);
-    REGISTERED_ADAPTABLE_INSTANCES.delete(adaptableId);
 }
 function unregisterAdaptableInstanceFromDevTools(adaptableId) {
     detachAdaptableInstanceListeners(adaptableId);
-    window.postMessage(buildMessageForExtension({ type: 'unmount', adaptableId }));
+    LOG_BUFFERS.delete(adaptableId);
+    if (DEV_TOOLS_READY) {
+        window.postMessage(buildMessageForExtension({ type: 'unmount', adaptableId }));
+    }
 }
 const messageBase = {
     source: 'adaptable-page',
@@ -324,6 +806,9 @@ function buildMessageForExtension(params) {
                 adaptableVersion: payload?.adaptableVersion,
                 agGridVersion: payload?.agGridVersion,
                 licenseKey: payload?.licenseKey,
+                userName: payload?.userName,
+                primaryKey: payload?.primaryKey,
+                settingsPanelNavigation: payload?.settingsPanelNavigation,
             },
         };
     }
@@ -337,6 +822,10 @@ function buildMessageForExtension(params) {
                 state: payload?.state,
                 actionName: payload?.actionName,
                 gridRuntime: payload?.gridRuntime,
+                licenseKey: payload?.licenseKey,
+                userName: payload?.userName,
+                primaryKey: payload?.primaryKey,
+                settingsPanelNavigation: payload?.settingsPanelNavigation,
             },
         };
     }
@@ -351,30 +840,34 @@ function buildMessageForExtension(params) {
     };
     return message;
 }
-function publishStateSnapshot(adaptableId) {
-    const api = REGISTERED_ADAPTABLE_APIS.get(adaptableId);
-    if (!api) {
-        return;
+function recordAction(registration, actionName) {
+    registration.actions.push({ timestamp: Date.now(), actionName });
+    if (registration.actions.length > MAX_ACTION_ENTRIES_PER_INSTANCE) {
+        registration.actions.splice(0, registration.actions.length - MAX_ACTION_ENTRIES_PER_INSTANCE);
     }
-    postStateChangeMessage(adaptableId, { api });
 }
-function registerAdaptableInstanceInDevTools(adaptableId, options, adaptableInstance) {
-    const { api } = options;
+function registerAdaptableInstanceInDevTools(adaptableId, api, adaptableInstance) {
     detachAdaptableInstanceListeners(adaptableId);
-    console.log(`Registering instance "${adaptableId}" into Adaptable DevTools`);
-    REGISTERED_ADAPTABLE_IDS.add(adaptableId);
-    REGISTERED_ADAPTABLE_APIS.set(adaptableId, api);
-    if (adaptableInstance) {
-        REGISTERED_ADAPTABLE_INSTANCES.set(adaptableId, adaptableInstance);
-    }
+    const registration = {
+        api,
+        instance: adaptableInstance,
+        actions: [],
+        unsubscribe: () => { },
+    };
     const onStateChange = (info) => {
-        postStateChangeMessage(adaptableId, { actionName: info.actionName, api });
+        if (isTransientReduxAction(info.actionName)) {
+            return;
+        }
+        recordAction(registration, info.actionName);
+        if (DEV_TOOLS_READY) {
+            postStateChangeMessage(adaptableId, { actionName: info.actionName, api });
+        }
     };
     const onStateReloaded = () => {
-        postStateChangeMessage(adaptableId, {
-            actionName: 'AdaptableStateReloaded',
-            api,
-        });
+        recordAction(registration, 'AdaptableStateReloaded');
+        if (DEV_TOOLS_READY) {
+            postStateChangeMessage(adaptableId, { actionName: 'AdaptableStateReloaded', api });
+        }
     };
     const unsubscribeStateChanged = api.eventApi.on('AdaptableStateChanged', onStateChange);
     const unsubscribeStateReloaded = api.eventApi.on('AdaptableStateReloaded', onStateReloaded);
@@ -384,21 +877,21 @@ function registerAdaptableInstanceInDevTools(adaptableId, options, adaptableInst
     const unsubscribeDestroy = api.eventApi.on('AdaptableDestroy', () => {
         unregisterAdaptableInstanceFromDevTools(adaptableId);
     });
-    const adaptableGrid = adaptableInstance ?? REGISTERED_ADAPTABLE_INSTANCES.get(adaptableId);
-    const unsubscribeFiltersApplied = adaptableGrid?._on('AdapTableFiltersApplied', () => {
+    const unsubscribeFiltersApplied = adaptableInstance._on('AdapTableFiltersApplied', () => {
         cancelScheduledGridRuntimeUpdate(adaptableId);
         postGridRuntimeUpdate(adaptableId, api);
     });
-    INSTANCE_REGISTRATIONS.set(adaptableId, {
-        api,
-        unsubscribe: () => {
-            unsubscribeStateChanged();
-            unsubscribeStateReloaded();
-            unsubscribeRowSelectionChanged();
-            unsubscribeFiltersApplied?.();
-            unsubscribeDestroy();
-        },
-    });
-    postMountMessage(adaptableId, api);
-    publishStateSnapshot(adaptableId);
+    registration.unsubscribe = () => {
+        unsubscribeStateChanged();
+        unsubscribeStateReloaded();
+        unsubscribeRowSelectionChanged();
+        unsubscribeFiltersApplied?.();
+        unsubscribeDestroy();
+    };
+    INSTANCE_REGISTRATIONS.set(adaptableId, registration);
+    if (DEV_TOOLS_READY) {
+        console.log(`Registering instance "${adaptableId}" into Adaptable DevTools`);
+        postMountMessage(adaptableId, api);
+        postStateChangeMessage(adaptableId, { api });
+    }
 }