@amadeus-it-group/ngrx-devtool 0.2.2 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # NgRx DevTool
 
-A development tool for visualizing and debugging NgRx state management in Angular applications. Real-time action monitoring, effect tracking, state visualization, diff viewer, and performance metrics — no browser extensions needed.
+A development tool for visualizing and debugging NgRx state management in Angular applications. Real-time action monitoring, effect tracking, state visualization, diff viewer, and performance metrics. No browser extensions needed.
 
 ## Install
 

package/index.js

@@ -5,11 +5,13 @@ var ws_1 = require("ws");
 var path = require("path");
 var express = require("express");
 var http_1 = require("http");
+var mcp_server_1 = require("./mcp-server");
 var chalk = require('chalk');
 var PORT_WS = 4000;
 var PORT_UI = '3000';
 var wss = new ws_1.WebSocketServer({ port: PORT_WS });
 var clients = [];
+var store = (0, mcp_server_1.createStore)();
 var logo = "\n                                    ***@  +**\n                                  **         ******%\n                               @**   .......-::       ++%\n                         #****%    ...................    *+\n                       **          . .....................   +\n                      #*....         .............:--=- :.     =\n                      # .          ...............:-%*%% %.      =\n                     **           ..................*. *-+@.      =\n                  %***           .......... ** ......    .......   +\n                *#              ....:::#********# ....  .. ....    =:\n               * ..           ...:::****+=@@@@@@@@@@@  .......    #=\n              %* ..:.       ...:: +*+.@@@@@@@@@@@@@@@@@@@@%###%%###*+\n               # ...      ...:::++=@@@@@@@@%%%%%%%%@@@@@@@@@#%%-## **     =\n               *# .      ..:::*++@@@@@@%%%%%%##%%%%%%%%@@@@@@@+###+:** ..\n               **       ..:::=+-@@@@@%%%           ##%%%%@@@@@@*.#@%+# ##..\n              %*       ..:::*=%@@@@%%%%%             ##%%%%%%@@@@+%%%%%*# #. *\n             *#       ..:::.=@@@@@%%%%%%########*     ####%%%%@@@@%*%## ##  .\n             *        .::::+.@@@@%%%%%%%%%%%#####*    @*###%%%%@%@#%%#%-@% #.\n             *  .     :::::=@@%%%%%%%%%%#####%@=       *####%%%%%%*### .%##%.\n             * ..     .::::=@@%%%%%%####               *####%%%%%%%##   %-# .\n             :*       ..:::-@@%%%%####*     @###*#     *####%%%%%%#*    ## -:\n             ..*#*     .:::-%@%%%%####     ######*     *#####%%*##@    @# .:=*\n              =+ +    =..:::%@%%%%####     ######*     *#####%%#*  ..    ..:@+\n              %+ -=    +..-: %%%%%####.                ####%%%% =..    ... @#*\n               *+ =   . + .--%%%%%%####*         %     ##%%%#-....    ... # *-\n               @*:++   : += -:%%%#######******#########%%%%%%%%%%%# =.    #*:*\n                ** **   : ++ =:%%%%##*********####%%%%%%%%%%%%%%@ :::...** :**\n                 ** ** . . .== . ### ++++++***####%%%%%%%%%%+  --:::: #* ::@#-\n                . ** ##       === %**   .::-++*###%% :.+-:::::::::@*% =---##%\n                 . ** *#@        =--==       :=**#%%%%%  :..:....::.====-%**:.\n                     +#@##           *-:        %*###%%%###-  :::==++==@%#%..\n                     +**:*##           .         .......:::::+===++==%%##.:.\n                    .  **#=####             ....:::--------==.-===+%%%#%::.\n                    . .  **#++####      .....:.::::::::-:::-====%%%*#%-:-:\n                      ...  *##-+#####@ .. .::::::.   .:::---%%%%#*#%---::\n                        ..:. **###*######%%@  .. ... @#%%%%%%#*#%.--=::\n                          ....  **##%=*####%%%%%%%%%%%#%****## ---:::\n                             ..... .*****%#%#=+***--####%=-:-:-:::\n                                        ::::====---- ===--=::::\n                                      . .:.:::-:::--:::::::\n                                         .........:\n";
 console.log(chalk.magenta(logo));
 console.log(chalk.dim('─'.repeat(60)));
@@ -18,6 +20,7 @@ console.log(chalk.dim('─'.repeat(60)));
 wss.on('connection', function (socket) {
     clients.push(socket);
     socket.on('message', function (message) {
+        (0, mcp_server_1.captureMessage)(store, message.toString());
         clients.forEach(function (client) {
             if (client !== socket && client.readyState === ws_1.WebSocket.OPEN) {
                 client.send(message);
@@ -26,6 +29,7 @@ wss.on('connection', function (socket) {
     });
 });
 var app = express();
+(0, mcp_server_1.registerMcpEndpoint)(app, express, store);
 app.use(express.static(path.resolve(__dirname, 'ngrx-devtool-ui/browser')));
 app.get('*', function (_req, res) {
     res.sendFile(path.resolve(__dirname, 'ngrx-devtool-ui/browser/index.html'));
@@ -45,6 +49,11 @@ process.on('SIGINT', function () {
 console.log('');
 console.log(chalk.green("  \u2713 WebSocket"), chalk.dim("ws://localhost:".concat(PORT_WS)));
 console.log(chalk.green("  \u2713 UI Server"), chalk.dim("http://localhost:".concat(PORT_UI)));
+console.log(chalk.green("  \u2713 AI / MCP "), chalk.dim("http://localhost:".concat(PORT_UI, "/mcp")));
+console.log('');
+console.log(chalk.dim('  Connect Copilot / Claude / Cursor by adding to .vscode/mcp.json:'));
+console.log(chalk.dim('    { "servers": { "ngrx-devtool": { "type": "http",'));
+console.log(chalk.dim("      \"url\": \"http://localhost:".concat(PORT_UI, "/mcp\" } } }")));
 console.log('');
 console.log(chalk.dim('─'.repeat(60)));
 console.log(chalk.dim('  Press'), chalk.white('Ctrl+C'), chalk.dim('to stop all servers'));

package/mcp-server.js

@@ -0,0 +1,424 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStore = createStore;
+exports.captureMessage = captureMessage;
+exports.registerMcpEndpoint = registerMcpEndpoint;
+var MCP_PROTOCOL_VERSION = '2024-11-05';
+var MAX_ENTRIES = 500;
+function createStore() {
+    return { actions: [], effects: [], timings: [], clearCount: 0 };
+}
+function push(arr, item) {
+    arr.push(item);
+    if (arr.length > MAX_ENTRIES)
+        arr.shift();
+}
+function captureMessage(store, raw) {
+    var _a;
+    var msg;
+    try {
+        msg = typeof raw === 'string' ? JSON.parse(raw) : JSON.parse(String(raw));
+    }
+    catch (_b) {
+        return;
+    }
+    if (!isCapturedMessage(msg))
+        return;
+    if (typeof msg.appName === 'string')
+        store.appName = msg.appName;
+    switch (msg.type) {
+        case 'STATE_CHANGE':
+            // NgRx dispatches @ngrx/store/init exactly once per app bootstrap. Treat
+            // it as the start of a fresh session and drop data from previous runs, so
+            // the MCP view tracks the current app session instead of accumulating
+            // stale actions/effects across reloads (which drifts from the live UI).
+            if (((_a = msg.action) === null || _a === void 0 ? void 0 : _a.type) === '@ngrx/store/init') {
+                store.actions.length = 0;
+                store.effects.length = 0;
+                store.timings.length = 0;
+            }
+            push(store.actions, msg);
+            break;
+        case 'EFFECT_EVENT':
+            push(store.effects, msg);
+            break;
+        case 'RENDER_TIMING':
+            push(store.timings, msg);
+            break;
+        case 'TIMELINE_CLEARED':
+        case 'CLEAR_REQUEST':
+            clearStore(store, 'websocket');
+            break;
+        default:
+            break;
+    }
+}
+function clearStore(store, source) {
+    store.actions.length = 0;
+    store.effects.length = 0;
+    store.timings.length = 0;
+    store.clearCount += 1;
+    store.lastClearedAt = new Date().toISOString();
+    return { clearedAt: store.lastClearedAt, clearCount: store.clearCount, source: source };
+}
+function diffStates(before, after, base, out) {
+    if (base === void 0) { base = ''; }
+    if (out === void 0) { out = []; }
+    if (out.length >= 100)
+        return out;
+    if (before === after)
+        return out;
+    var bothObjects = isIndexable(before) && isIndexable(after) &&
+        !Array.isArray(before) === !Array.isArray(after);
+    if (!bothObjects) {
+        out.push({ path: base || '(root)', before: before, after: after });
+        return out;
+    }
+    var beforeRecord = before;
+    var afterRecord = after;
+    var keys = Object.keys(beforeRecord);
+    for (var _i = 0, _a = Object.keys(afterRecord); _i < _a.length; _i++) {
+        var k = _a[_i];
+        if (!(k in beforeRecord))
+            keys.push(k);
+    }
+    for (var _b = 0, keys_1 = keys; _b < keys_1.length; _b++) {
+        var key = keys_1[_b];
+        var path = base ? "".concat(base, ".").concat(key) : key;
+        if (!(key in beforeRecord)) {
+            out.push({ path: path, before: undefined, after: afterRecord[key] });
+        }
+        else if (!(key in afterRecord)) {
+            out.push({ path: path, before: beforeRecord[key], after: undefined });
+        }
+        else {
+            diffStates(beforeRecord[key], afterRecord[key], path, out);
+        }
+        if (out.length >= 100)
+            break;
+    }
+    return out;
+}
+function actionType(msg) {
+    var _a, _b;
+    return (_b = (_a = msg === null || msg === void 0 ? void 0 : msg.action) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : '[unknown]';
+}
+/**
+ * Raw STATE_CHANGE messages don't know whether an action was dispatched by a
+ * user or emitted by an effect. Reconstruct that link from the EFFECT_EVENT
+ * stream: any action that an effect "emitted" is effect-sourced. Mirrors the
+ * correlation the UI does in `messagesWithPrevState`.
+ */
+function buildEffectActionMap(store) {
+    var _a, _b, _c;
+    var map = new Map();
+    for (var _i = 0, _d = store.effects; _i < _d.length; _i++) {
+        var e = _d[_i];
+        if (((_a = e.effectEvent) === null || _a === void 0 ? void 0 : _a.lifecycle) === 'emitted' && e.action) {
+            map.set(e.action, (_c = (_b = e.effectName) !== null && _b !== void 0 ? _b : e.effectEvent.name) !== null && _c !== void 0 ? _c : 'effect');
+        }
+    }
+    return map;
+}
+function getActionTimeline(store, limit) {
+    var effectMap = buildEffectActionMap(store);
+    var items = store.actions.slice(-limit).map(function (m) {
+        var _a, _b, _c, _d, _e, _f;
+        var type = actionType(m);
+        var effectName = (_a = m.effectName) !== null && _a !== void 0 ? _a : effectMap.get(type);
+        return {
+            type: type,
+            source: m.isEffectResult || effectMap.has(type) ? 'effect' : 'user',
+            effectName: effectName,
+            timestamp: m.timestamp,
+            renderTimeMs: (_c = (_b = m.renderTiming) === null || _b === void 0 ? void 0 : _b.totalTime) !== null && _c !== void 0 ? _c : (_d = m.renderPerformance) === null || _d === void 0 ? void 0 : _d.renderTime,
+            warnings: (_f = (_e = m.performance) === null || _e === void 0 ? void 0 : _e.warnings) === null || _f === void 0 ? void 0 : _f.map(function (w) { return w.message; }),
+        };
+    });
+    return { totalCaptured: store.actions.length, returned: items.length, actions: items };
+}
+function getEffects(store, limit) {
+    var items = store.effects.slice(-limit).map(function (m) {
+        var _a, _b, _c, _d, _e, _f;
+        return ({
+            effect: (_a = m.effectName) !== null && _a !== void 0 ? _a : (_b = m.effectEvent) === null || _b === void 0 ? void 0 : _b.name,
+            lifecycle: (_c = m.effectEvent) === null || _c === void 0 ? void 0 : _c.lifecycle,
+            resultAction: m.action,
+            durationMs: (_d = m.effectEvent) === null || _d === void 0 ? void 0 : _d.duration,
+            dispatch: (_e = m.effectEvent) === null || _e === void 0 ? void 0 : _e.dispatch,
+            timestamp: m.timestamp,
+            errorMessage: (_f = m.effectEvent) === null || _f === void 0 ? void 0 : _f.errorMessage,
+        });
+    });
+    return { totalCaptured: store.effects.length, returned: items.length, effects: items };
+}
+function getEffectErrors(store) {
+    var errors = store.effects
+        .filter(function (m) { var _a; return ((_a = m.effectEvent) === null || _a === void 0 ? void 0 : _a.lifecycle) === 'error'; })
+        .map(function (m) {
+        var _a, _b, _c, _d;
+        return ({
+            effect: (_a = m.effectName) !== null && _a !== void 0 ? _a : (_b = m.effectEvent) === null || _b === void 0 ? void 0 : _b.name,
+            triggerAction: m.action,
+            timestamp: m.timestamp,
+            errorMessage: (_c = m.effectEvent) === null || _c === void 0 ? void 0 : _c.errorMessage,
+            errorStack: (_d = m.effectEvent) === null || _d === void 0 ? void 0 : _d.errorStack,
+        });
+    });
+    return { count: errors.length, errors: errors };
+}
+function getCurrentState(store) {
+    var last = store.actions[store.actions.length - 1];
+    if (!last)
+        return { state: null, note: 'No state captured yet.' };
+    return { afterAction: actionType(last), timestamp: last.timestamp, state: last.nextState };
+}
+function getStateDiff(store, target) {
+    var index = store.actions.length - 1;
+    if (target) {
+        var found = store.actions.map(actionType).lastIndexOf(target);
+        if (found >= 0)
+            index = found;
+        else
+            return { error: "No captured action of type \"".concat(target, "\".") };
+    }
+    if (index < 0)
+        return { error: 'No actions captured yet.' };
+    var current = store.actions[index];
+    var previous = index > 0 ? store.actions[index - 1] : undefined;
+    var changes = diffStates(previous === null || previous === void 0 ? void 0 : previous.nextState, current.nextState);
+    return {
+        action: actionType(current),
+        timestamp: current.timestamp,
+        changedPaths: changes.length,
+        changes: changes,
+    };
+}
+function getPerformanceStats(store) {
+    var times = store.actions
+        .map(function (m) { var _a, _b, _c; return ({ type: actionType(m), ms: (_b = (_a = m.renderTiming) === null || _a === void 0 ? void 0 : _a.totalTime) !== null && _b !== void 0 ? _b : (_c = m.renderPerformance) === null || _c === void 0 ? void 0 : _c.renderTime }); })
+        .filter(function (t) { return typeof t.ms === 'number'; });
+    if (times.length === 0)
+        return { note: 'No render timings captured yet.' };
+    var values = times.map(function (t) { return t.ms; });
+    var avg = values.reduce(function (a, b) { return a + b; }, 0) / values.length;
+    var max = Math.max.apply(Math, values);
+    var slowest = __spreadArray([], times, true).sort(function (a, b) { return b.ms - a.ms; }).slice(0, 5);
+    var overBudget = times.filter(function (t) { return t.ms > 16; }).length;
+    return {
+        measuredActions: times.length,
+        avgRenderMs: Number(avg.toFixed(2)),
+        maxRenderMs: Number(max.toFixed(2)),
+        overFrameBudget16ms: overBudget,
+        slowest: slowest,
+    };
+}
+function getDebugSummary(store) {
+    var errors = getEffectErrors(store);
+    var perf = getPerformanceStats(store);
+    var effectMap = buildEffectActionMap(store);
+    var recent = store.actions.slice(-10).map(function (m) {
+        var _a;
+        var type = actionType(m);
+        var effectName = (_a = m.effectName) !== null && _a !== void 0 ? _a : effectMap.get(type);
+        return effectName ? "".concat(type, " (via ").concat(effectName, ")") : type;
+    });
+    var effectExecutions = store.effects.filter(function (e) { var _a; return ((_a = e.effectEvent) === null || _a === void 0 ? void 0 : _a.lifecycle) === 'emitted'; }).length;
+    return {
+        appName: store.appName,
+        totalActions: store.actions.length,
+        totalEffectEvents: store.effects.length,
+        effectExecutions: effectExecutions,
+        effectErrorCount: errors.errors.length,
+        clearCount: store.clearCount,
+        lastClearedAt: store.lastClearedAt,
+        recentActions: recent,
+        effectErrors: errors.errors,
+        performance: perf,
+        hint: 'Use get_state_diff(actionType) to inspect what changed for a specific action, ' +
+            'get_effects to see the effect chain, and get_current_state for the latest store snapshot.',
+    };
+}
+var TOOLS = [
+    {
+        name: 'get_debug_summary',
+        description: 'High-level health snapshot of the live NgRx session: recent actions, effect errors and render performance. Start here when debugging.',
+        inputSchema: { type: 'object', properties: {} },
+        run: function (store) { return getDebugSummary(store); },
+    },
+    {
+        name: 'get_action_timeline',
+        description: 'Recent dispatched actions with source (user/effect), render time and any performance warnings.',
+        inputSchema: {
+            type: 'object',
+            properties: { limit: { type: 'number', description: 'Max actions to return (default 25).' } },
+        },
+        run: function (store, args) { return getActionTimeline(store, clampLimit(args === null || args === void 0 ? void 0 : args.limit, 25)); },
+    },
+    {
+        name: 'get_effects',
+        description: 'Recent NgRx effect executions (lifecycle, duration, result action).',
+        inputSchema: {
+            type: 'object',
+            properties: { limit: { type: 'number', description: 'Max effect events to return (default 25).' } },
+        },
+        run: function (store, args) { return getEffects(store, clampLimit(args === null || args === void 0 ? void 0 : args.limit, 25)); },
+    },
+    {
+        name: 'get_effect_errors',
+        description: 'All captured effect errors with message and stack trace. Use when an effect is failing.',
+        inputSchema: { type: 'object', properties: {} },
+        run: function (store) { return getEffectErrors(store); },
+    },
+    {
+        name: 'get_state_diff',
+        description: 'What changed in the store for an action. Pass an actionType to target a specific action, or omit for the most recent.',
+        inputSchema: {
+            type: 'object',
+            properties: { actionType: { type: 'string', description: 'Action type to diff (optional).' } },
+        },
+        run: function (store, args) { return getStateDiff(store, typeof (args === null || args === void 0 ? void 0 : args.actionType) === 'string' ? args.actionType : undefined); },
+    },
+    {
+        name: 'get_current_state',
+        description: 'The latest full store snapshot captured by the DevTool.',
+        inputSchema: { type: 'object', properties: {} },
+        run: function (store) { return getCurrentState(store); },
+    },
+    {
+        name: 'get_performance_stats',
+        description: 'Render-timing aggregates: average/max render time and the slowest actions.',
+        inputSchema: { type: 'object', properties: {} },
+        run: function (store) { return getPerformanceStats(store); },
+    },
+    {
+        name: 'clear_debug_session',
+        description: 'Clear the MCP capture history for the current NgRx DevTool session.',
+        inputSchema: { type: 'object', properties: {} },
+        run: function (store) { return clearStore(store, 'mcp-tool'); },
+    },
+];
+function clampLimit(value, fallback) {
+    var n = Number(value);
+    if (!Number.isFinite(n) || n <= 0)
+        return fallback;
+    return Math.min(Math.floor(n), MAX_ENTRIES);
+}
+function rpcResult(id, result) {
+    return { jsonrpc: '2.0', id: id, result: result };
+}
+function rpcError(id, code, message) {
+    return { jsonrpc: '2.0', id: id, error: { code: code, message: message } };
+}
+function handleRpc(rpc, store) {
+    if (!isRpcRequest(rpc)) {
+        return isIndexable(rpc) && isRpcId(rpc.id) ? rpcError(rpc.id, -32600, 'Invalid Request') : null;
+    }
+    var id = rpc.id, method = rpc.method, params = rpc.params;
+    var isNotification = id === undefined || id === null;
+    switch (method) {
+        case 'initialize':
+            return rpcResult(id, {
+                protocolVersion: typeof (params === null || params === void 0 ? void 0 : params.protocolVersion) === 'string' ? params.protocolVersion : MCP_PROTOCOL_VERSION,
+                capabilities: { tools: {} },
+                serverInfo: { name: 'ngrx-devtool', version: '1.0.0' },
+                instructions: 'Query the live NgRx DevTool session. Call get_debug_summary first, then drill in with the other tools.',
+            });
+        case 'notifications/initialized':
+        case 'notifications/cancelled':
+            return null;
+        case 'ping':
+            return isNotification ? null : rpcResult(id, {});
+        case 'tools/list':
+            return rpcResult(id, {
+                tools: TOOLS.map(function (t) { return ({ name: t.name, description: t.description, inputSchema: t.inputSchema }); }),
+            });
+        case 'tools/call': {
+            var tool = TOOLS.find(function (t) { return t.name === (params === null || params === void 0 ? void 0 : params.name); });
+            if (!tool)
+                return rpcError(id, -32602, "Unknown tool: ".concat(params === null || params === void 0 ? void 0 : params.name));
+            try {
+                var args = isIndexable(params === null || params === void 0 ? void 0 : params.arguments) ? params.arguments : {};
+                var data = tool.run(store, args);
+                return rpcResult(id, {
+                    content: [{ type: 'text', text: JSON.stringify(data, null, 2) }],
+                });
+            }
+            catch (err) {
+                return rpcResult(id, {
+                    content: [{ type: 'text', text: "Tool error: ".concat(err instanceof Error ? err.message : String(err)) }],
+                    isError: true,
+                });
+            }
+        }
+        default:
+            return isNotification ? null : rpcError(id, -32601, "Method not found: ".concat(method));
+    }
+}
+function registerMcpEndpoint(app, express, store) {
+    var jsonBody = express.json({ limit: '8mb' });
+    var setCors = function (res) {
+        res.setHeader('Access-Control-Allow-Origin', '*');
+        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, DELETE, OPTIONS');
+        res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Mcp-Session-Id, mcp-protocol-version');
+    };
+    app.options('/mcp', function (_req, res) {
+        setCors(res);
+        res.status(204).end();
+    });
+    app.post('/mcp', jsonBody, function (req, res) {
+        setCors(res);
+        var body = req.body;
+        try {
+            if (Array.isArray(body)) {
+                var responses = body.map(function (rpc) { return handleRpc(rpc, store); }).filter(function (r) { return r !== null; });
+                if (responses.length === 0)
+                    return res.status(202).end();
+                return res.json(responses);
+            }
+            var response = handleRpc(body, store);
+            if (response === null)
+                return res.status(202).end();
+            return res.json(response);
+        }
+        catch (err) {
+            var id = isIndexable(body) && isRpcId(body.id) ? body.id : null;
+            return res.status(500).json(rpcError(id, -32603, err instanceof Error ? err.message : 'Internal error'));
+        }
+    });
+    app.get('/mcp', function (_req, res) {
+        setCors(res);
+        res.setHeader('Allow', 'POST, OPTIONS');
+        res.status(405).json(rpcError(null, -32000, 'Method Not Allowed: this server only supports POST /mcp'));
+    });
+    app.delete('/mcp', function (_req, res) {
+        setCors(res);
+        clearStore(store, 'mcp-delete');
+        res.status(200).end();
+    });
+}
+function isIndexable(value) {
+    return value !== null && typeof value === 'object';
+}
+function isRpcId(value) {
+    return value === null || typeof value === 'string' || typeof value === 'number';
+}
+function isRpcRequest(value) {
+    return (isIndexable(value) &&
+        value.jsonrpc === '2.0' &&
+        typeof value.method === 'string' &&
+        (value.id === undefined || isRpcId(value.id)) &&
+        (value.params === undefined || isIndexable(value.params)));
+}
+function isCapturedMessage(value) {
+    return isIndexable(value) && typeof value.type === 'string';
+}

package/ngrx-devtool/fesm2022/amadeus-it-group-ngrx-devtool.mjs

@@ -336,6 +336,10 @@ class ActionsInterceptorService {
     }
     setupEffectEventForwarding() {
         this.effectTracker.effectEvents$.pipe(takeUntil$1(this.destroy$), tap((event) => {
+            const errorMessage = event.error instanceof Error
+                ? event.error.message
+                : event.error != null ? String(event.error) : undefined;
+            const errorStack = event.error instanceof Error ? event.error.stack : undefined;
             const message = {
                 type: 'EFFECT_EVENT',
                 action: event.action?.type,
@@ -346,6 +350,8 @@ class ActionsInterceptorService {
                     duration: event.duration,
                     executionId: event.executionId,
                     dispatch: event.dispatch,
+                    errorMessage,
+                    errorStack,
                 },
                 timestamp: new Date().toISOString(),
             };
@@ -555,18 +561,23 @@ class PerformanceTrackerService {
     thresholds = DEFAULT_THRESHOLDS;
     firstActionTime = null;
     measureRenderTime(actionType, reducer, callback) {
-        const startTime = performance.now();
+        const renderStartTime = performance.now();
+        const reducerStartTime = performance.now();
         const nextState = reducer();
+        const reducerTime = parseFloat((performance.now() - reducerStartTime).toFixed(2));
+        const stateSize = this.getSerializedSize(nextState);
         if (!this.isBrowser) {
-            callback(0);
+            callback(0, reducerTime, stateSize);
             return nextState;
         }
         afterNextRender(() => {
-            const renderTime = parseFloat((performance.now() - startTime).toFixed(2));
+            const renderTime = parseFloat((performance.now() - renderStartTime).toFixed(2));
             const entry = {
                 actionType,
                 timestamp: Date.now(),
                 renderTime,
+                reducerTime,
+                stateSize,
             };
             this.entries.push(entry);
             if (this.firstActionTime === null) {
@@ -575,7 +586,7 @@ class PerformanceTrackerService {
             if (this.entries.length > ENTRIES_MAX_SIZE) {
                 this.entries = this.entries.slice(-ENTRIES_TRIM_SIZE);
             }
-            callback(renderTime);
+            callback(renderTime, reducerTime, stateSize);
         }, { injector: this.injector });
         return nextState;
     }
@@ -605,17 +616,26 @@ class PerformanceTrackerService {
     getAggregatedStats() {
         const stats = this.getStats();
         const actionTypeStats = this.getActionTypeStats();
+        const reducerTimes = this.entries.map(entry => entry.reducerTime ?? entry.renderTime);
+        const avgReducerTime = reducerTimes.length
+            ? reducerTimes.reduce((total, time) => total + time, 0) / reducerTimes.length
+            : 0;
+        const maxReducerTime = reducerTimes.length ? Math.max(...reducerTimes) : 0;
+        const slowestReducer = this.entries.reduce((slowest, entry) => !slowest || (entry.reducerTime ?? entry.renderTime) > (slowest.reducerTime ?? slowest.renderTime)
+            ? entry
+            : slowest, null);
+        const currentStateSize = this.entries.at(-1)?.stateSize ?? 0;
         const elapsedTime = this.firstActionTime
             ? (Date.now() - this.firstActionTime) / 1000
             : 1;
         return {
             totalActions: stats.totalActions,
-            avgReducerTime: stats.avgRenderTime,
-            maxReducerTime: stats.maxRenderTime,
-            slowestAction: stats.slowestAction,
-            currentStateSize: 0,
+            avgReducerTime,
+            maxReducerTime,
+            slowestAction: slowestReducer?.actionType ?? null,
+            currentStateSize,
             actionsPerSecond: stats.totalActions / Math.max(elapsedTime, 1),
-            performanceScore: this.calculatePerformanceScore(stats),
+            performanceScore: this.calculatePerformanceScore(avgReducerTime, maxReducerTime),
             actionTypeStats,
         };
     }
@@ -659,36 +679,46 @@ class PerformanceTrackerService {
     getActionTypeStats() {
         const statsMap = new Map();
         for (const entry of this.entries) {
+            const reducerTime = entry.reducerTime ?? entry.renderTime;
             const existing = statsMap.get(entry.actionType);
             if (existing) {
                 existing.count++;
-                existing.totalTime += entry.renderTime;
+                existing.totalTime += reducerTime;
                 existing.avgTime = existing.totalTime / existing.count;
-                existing.maxTime = Math.max(existing.maxTime, entry.renderTime);
+                existing.maxTime = Math.max(existing.maxTime, reducerTime);
                 existing.lastExecuted = entry.timestamp;
             }
             else {
                 statsMap.set(entry.actionType, {
                     count: 1,
-                    totalTime: entry.renderTime,
-                    avgTime: entry.renderTime,
-                    maxTime: entry.renderTime,
+                    totalTime: reducerTime,
+                    avgTime: reducerTime,
+                    maxTime: reducerTime,
                     lastExecuted: entry.timestamp,
                 });
             }
         }
         return statsMap;
     }
-    calculatePerformanceScore(stats) {
+    calculatePerformanceScore(avgReducerTime, maxReducerTime) {
         let score = 100;
-        if (stats.avgRenderTime > this.thresholds.maxReducerTime) {
-            score -= Math.min(30, (stats.avgRenderTime - this.thresholds.maxReducerTime) * 2);
+        if (avgReducerTime > this.thresholds.maxReducerTime) {
+            score -= Math.min(30, (avgReducerTime - this.thresholds.maxReducerTime) * 2);
         }
-        if (stats.maxRenderTime > this.thresholds.maxReducerTime * 2) {
-            score -= Math.min(20, (stats.maxRenderTime - this.thresholds.maxReducerTime * 2) / 2);
+        if (maxReducerTime > this.thresholds.maxReducerTime * 2) {
+            score -= Math.min(20, (maxReducerTime - this.thresholds.maxReducerTime * 2) / 2);
         }
         return Math.max(0, Math.round(score));
     }
+    getSerializedSize(value) {
+        try {
+            const serialized = JSON.stringify(value);
+            return serialized === undefined ? 0 : new TextEncoder().encode(serialized).byteLength;
+        }
+        catch {
+            return 0;
+        }
+    }
     maxSeverity(a, b) {
         const order = { low: 0, medium: 1, high: 2 };
         return order[a] >= order[b] ? a : b;
@@ -1324,14 +1354,14 @@ function createDevToolMetaReducer(wsUrlOrConfig = DEFAULT_WS_URL) {
             const timestamp = new Date().toISOString();
             let nextState;
             if (enablePerf) {
-                nextState = performanceTracker.measureRenderTime(action.type, () => reducer(state, action), (renderTime) => {
+                nextState = performanceTracker.measureRenderTime(action.type, () => reducer(state, action), (renderTime, reducerTime, stateSize) => {
                     const message = {
                         type: 'STATE_CHANGE',
                         action,
                         prevState,
                         nextState,
                         timestamp,
-                        renderPerformance: { renderTime }
+                        renderPerformance: { renderTime, reducerTime, stateSize }
                     };
                     webSocketService.send(message);
                 });