diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..19b0e4ffd
Binary files /dev/null and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
index 2d9daf0c0..1b03cd092 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,7 @@ backend/sessions
 backend/node_modules
 backend/logs
 backend/coverage
+logs/
 
 # ignore build files
 dist/
@@ -47,4 +48,4 @@ utils/rpcs/moodleAPI/moodle_api/__pycache__
 *.pyc 
 email-mappings.py
 gitleaks-clean.sh
-.mailmap
\ No newline at end of file
+.mailmap.DS_Store
diff --git a/backend/db/migrations/20260322000001-extend-nav-socket-profiler.js b/backend/db/migrations/20260322000001-extend-nav-socket-profiler.js
new file mode 100644
index 000000000..8373b85e6
--- /dev/null
+++ b/backend/db/migrations/20260322000001-extend-nav-socket-profiler.js
@@ -0,0 +1,50 @@
+'use strict';
+
+const navElements = [
+  {
+    name: "Socket Profiler",
+    groupId: "Admin",
+    icon: "record-circle",
+    order: 16,
+    admin: true,
+    path: "Socket_Profiler",
+    component: "SocketProfiler",
+  }
+];
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.bulkInsert(
+      "nav_element",
+      await Promise.all(
+        navElements.map(async (t) => {
+          const groupId = await queryInterface.rawSelect(
+            "nav_group",
+            {
+              where: { name: t.groupId },
+            },
+            ["id"]
+          );
+
+          t["createdAt"] = new Date();
+          t["updatedAt"] = new Date();
+          t["groupId"] = groupId;
+
+          return t;
+        }),
+        {}
+      )
+    );
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.bulkDelete(
+      "nav_element",
+      {
+        name: navElements.map((t) => t.name),
+      },
+      {}
+    );
+  },
+};
\ No newline at end of file
diff --git a/backend/db/migrations/20260412231117-create-recording.js b/backend/db/migrations/20260412231117-create-recording.js
new file mode 100644
index 000000000..0b0b1e0a6
--- /dev/null
+++ b/backend/db/migrations/20260412231117-create-recording.js
@@ -0,0 +1,82 @@
+'use strict';
+
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('recording', {
+      id: {
+        type: Sequelize.INTEGER,
+        primaryKey: true,
+        autoIncrement: true,
+        allowNull: false,
+      },
+      name: {
+        type: Sequelize.STRING,
+        allowNull: true,
+      },
+      status: {
+        type: Sequelize.STRING,
+        allowNull: false,
+        defaultValue: 'recording',
+      },
+      startTime: {
+        type: Sequelize.DATE,
+        allowNull: true,
+        defaultValue: null,
+      },
+      endTime: {
+        type: Sequelize.DATE,
+        allowNull: true,
+        defaultValue: null,
+      },
+      userId: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'user',
+          key: 'id',
+        },
+        onDelete: 'CASCADE',
+        onUpdate: 'CASCADE',
+      },
+      participantUserIds: {
+        type: Sequelize.JSONB,
+        allowNull: true,
+        defaultValue: null,
+      },
+      participantSocketIds: {
+        type: Sequelize.JSONB,
+        allowNull: true,
+        defaultValue: null,
+      },
+      excludeEvents: {
+        type: Sequelize.JSONB,
+        allowNull: true,
+        defaultValue: null,
+      },
+      deleted: {
+        type: Sequelize.BOOLEAN,
+        allowNull: false,
+        defaultValue: false,
+      },
+      deletedAt: {
+        type: Sequelize.DATE,
+        allowNull: true,
+        defaultValue: null,
+      },
+      createdAt: {
+        type: Sequelize.DATE,
+        allowNull: false,
+        defaultValue: Sequelize.fn('NOW'),
+      },
+      updatedAt: {
+        type: Sequelize.DATE,
+        allowNull: false,
+        defaultValue: Sequelize.fn('NOW'),
+      },
+    });
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('recording');
+  },
+};
\ No newline at end of file
diff --git a/backend/db/migrations/20260412231119-create-trace.js b/backend/db/migrations/20260412231119-create-trace.js
new file mode 100644
index 000000000..91688d59c
--- /dev/null
+++ b/backend/db/migrations/20260412231119-create-trace.js
@@ -0,0 +1,86 @@
+'use strict';
+
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('trace', {
+      id: {
+        type: Sequelize.INTEGER,
+        primaryKey: true,
+        autoIncrement: true,
+        allowNull: false,
+      },
+      recordingId: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: 'recording',
+          key: 'id',
+        },
+        onDelete: 'CASCADE',
+        onUpdate: 'CASCADE',
+      },
+      userId: {
+        type: Sequelize.INTEGER,
+        allowNull: true,
+        references: {
+          model: 'user',
+          key: 'id',
+        },
+        onDelete: 'SET NULL',
+        onUpdate: 'CASCADE',
+      },
+      socketId: {
+        type: Sequelize.STRING,
+        allowNull: true,
+      },
+      action: {
+        type: Sequelize.STRING,
+        allowNull: false,
+      },
+      payload: {
+        type: Sequelize.JSONB,
+        allowNull: true,
+      },
+      direction: {
+        type: Sequelize.BOOLEAN,
+        allowNull: false,
+      },
+      startTime: {
+        type: Sequelize.DATE,
+        allowNull: true,
+      },
+      endTime: {
+        type: Sequelize.DATE,
+        allowNull: true,
+      },
+      deleted: {
+        type: Sequelize.BOOLEAN,
+        allowNull: false,
+        defaultValue: false,
+      },
+      deletedAt: {
+        type: Sequelize.DATE,
+        allowNull: true,
+        defaultValue: null,
+      },
+      createdAt: {
+        type: Sequelize.DATE,
+        allowNull: false,
+        defaultValue: Sequelize.fn('NOW'),
+      },
+      updatedAt: {
+        type: Sequelize.DATE,
+        allowNull: false,
+        defaultValue: Sequelize.fn('NOW'),
+      },
+    });
+
+    await queryInterface.addIndex('trace', ['socketId'], {
+      name: 'trace_socketId_idx',
+    });
+  },
+
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('trace');
+  },
+};
\ No newline at end of file
diff --git a/backend/db/migrations/20260506220447-move-socket-profiler-to-manage.js b/backend/db/migrations/20260506220447-move-socket-profiler-to-manage.js
new file mode 100644
index 000000000..ec0fe7d73
--- /dev/null
+++ b/backend/db/migrations/20260506220447-move-socket-profiler-to-manage.js
@@ -0,0 +1,51 @@
+'use strict';
+
+/**
+ * Move Socket Profiler nav element into the Manage group.
+ *
+ * The original `extend-nav-socket-profiler` migration (March 22, 2026)
+ * inserted Socket Profiler into groupId 2 (Admin). The later
+ * `restructure-nav_group` migration (April 25, 2026) replaced the old
+ * Admin-centric layout with category-based groups (Home, Study, Manage,
+ * Settings, AI), but didn't touch Socket Profiler because it lived on
+ * a separate feature branch at the time.
+ *
+ * After merge, Socket Profiler ends up stranded in the legacy Admin group.
+ * This migration relocates it into Manage, alongside other admin
+ * operational tools like Users.
+ */
+module.exports = {
+    async up(queryInterface, Sequelize) {
+        // Look up Manage group's id by name (don't hard-code 5; safer if IDs ever shift).
+        const [groups] = await queryInterface.sequelize.query(
+            `SELECT id FROM nav_group WHERE name = 'Manage' LIMIT 1`
+        );
+        if (!groups || groups.length === 0) {
+            // Manage group missing — bail out silently rather than failing migration.
+            return;
+        }
+        const manageId = groups[0].id;
+
+        await queryInterface.sequelize.query(
+            `UPDATE nav_element SET "groupId" = :manageId, "updatedAt" = NOW()
+             WHERE name = 'Socket Profiler'`,
+            { replacements: { manageId } }
+        );
+    },
+
+    async down(queryInterface, Sequelize) {
+        // Revert to the legacy Admin group (id 2 in the pre-restructure schema).
+        // If Admin no longer exists for any reason, do nothing.
+        const [groups] = await queryInterface.sequelize.query(
+            `SELECT id FROM nav_group WHERE name = 'Admin' LIMIT 1`
+        );
+        if (!groups || groups.length === 0) return;
+        const adminId = groups[0].id;
+
+        await queryInterface.sequelize.query(
+            `UPDATE nav_element SET "groupId" = :adminId, "updatedAt" = NOW()
+             WHERE name = 'Socket Profiler'`,
+            { replacements: { adminId } }
+        );
+    },
+};
\ No newline at end of file
diff --git a/backend/db/models/recording.js b/backend/db/models/recording.js
new file mode 100644
index 000000000..b7d0f355d
--- /dev/null
+++ b/backend/db/models/recording.js
@@ -0,0 +1,45 @@
+"use strict";
+const MetaModel = require("../MetaModel.js");
+
+module.exports = (sequelize, DataTypes) => {
+    class Recording extends MetaModel {
+        static autoTable = true;
+        static fields = [];
+        static publicTable = true;
+
+        static associate(models) {
+            Recording.belongsTo(models["user"], {
+                foreignKey: "userId",
+                as: "user",
+            });
+            Recording.hasMany(models["trace"], {
+                foreignKey: "recordingId",
+                as: "traces",
+            });
+        }
+    }
+
+    Recording.init(
+        {
+            name: DataTypes.STRING,
+            status: DataTypes.STRING,
+            startTime: DataTypes.DATE,
+            endTime: DataTypes.DATE,
+            userId: DataTypes.INTEGER,
+            participantUserIds: DataTypes.JSONB,
+            participantSocketIds: DataTypes.JSONB,
+            excludeEvents: DataTypes.JSONB,
+            deleted: DataTypes.BOOLEAN,
+            deletedAt: DataTypes.DATE,
+            createdAt: DataTypes.DATE,
+            updatedAt: DataTypes.DATE,
+        },
+        {
+            sequelize,
+            modelName: "recording",
+            tableName: "recording",
+        }
+    );
+
+    return Recording;
+};
\ No newline at end of file
diff --git a/backend/db/models/trace.js b/backend/db/models/trace.js
new file mode 100644
index 000000000..8492a94c0
--- /dev/null
+++ b/backend/db/models/trace.js
@@ -0,0 +1,45 @@
+"use strict";
+const MetaModel = require("../MetaModel.js");
+
+module.exports = (sequelize, DataTypes) => {
+    class Trace extends MetaModel {
+        static autoTable = true;
+        static fields = [];
+        static publicTable = false;
+
+        static associate(models) {
+            Trace.belongsTo(models["recording"], {
+                foreignKey: "recordingId",
+                as: "recording",
+            });
+            Trace.belongsTo(models["user"], {
+                foreignKey: "userId",
+                as: "user",
+            });
+        }
+    }
+
+    Trace.init(
+        {
+            recordingId: DataTypes.INTEGER,
+            userId: DataTypes.INTEGER,
+            socketId: DataTypes.STRING,
+            action: DataTypes.STRING,
+            payload: DataTypes.JSONB,
+            direction: DataTypes.BOOLEAN,
+            startTime: DataTypes.DATE,
+            endTime: DataTypes.DATE,
+            deleted: DataTypes.BOOLEAN,
+            deletedAt: DataTypes.DATE,
+            createdAt: DataTypes.DATE,
+            updatedAt: DataTypes.DATE,
+        },
+        {
+            sequelize,
+            modelName: "trace",
+            tableName: "trace",
+        }
+    );
+
+    return Trace;
+};
\ No newline at end of file
diff --git a/backend/package-lock.json b/backend/package-lock.json
index c8ac72d58..e10abd5fa 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -56,7 +56,8 @@
       },
       "devDependencies": {
         "cross-env": "^10.1.0",
-        "jest": "^30.2.0"
+        "jest": "^30.2.0",
+        "nodemon": "^3.1.10"
       },
       "engines": {
         "node": ">=18.0.0"
@@ -2451,6 +2452,19 @@
       "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==",
       "license": "MIT"
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -2496,6 +2510,19 @@
         "balanced-match": "^1.0.0"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.28.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
@@ -2706,6 +2733,31 @@
         "node": "*"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/ci-info": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
@@ -3848,6 +3900,19 @@
         "moment": "^2.29.1"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/finalhandler": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
@@ -4143,6 +4208,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -4289,6 +4367,13 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
@@ -4382,6 +4467,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -4403,6 +4501,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -4422,6 +4530,29 @@
         "node": ">=6"
       }
     },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-promise": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
@@ -5792,6 +5923,110 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/nodemon": {
+      "version": "3.1.14",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.14.tgz",
+      "integrity": "sha512-jakjZi93UtB3jHMWsXL68FXSAosbLfY0In5gtKq3niLSkrWznrVBzXFNOEMJUfc9+Ke7SHWoAZsiMkNP3vq6Jw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.5.2",
+        "debug": "^4",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^10.2.1",
+        "pstree.remy": "^1.1.8",
+        "semver": "^7.5.3",
+        "simple-update-notifier": "^2.0.0",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/nodemon/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/nodemon/node_modules/brace-expansion": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
+      "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/nodemon/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/nodemon/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.5"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/nodemon/node_modules/semver": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.0.tgz",
+      "integrity": "sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/nodemon/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/nopt": {
       "version": "7.2.1",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
@@ -6498,6 +6733,13 @@
         "node": ">=10"
       }
     },
+    "node_modules/pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/pure-rand": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-7.0.1.tgz",
@@ -6619,6 +6861,32 @@
         "node": ">=10"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/readdirp/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -7213,6 +7481,32 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/simple-update-notifier/node_modules/semver": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.0.tgz",
+      "integrity": "sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -7806,6 +8100,19 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -7821,6 +8128,16 @@
       "integrity": "sha512-OsLcGGbYF3rMjPUf8oKktyvCiUxSbqMMS39m33MAjLTC1DVIH6x3WSt63/M77ihI09+Sdfk1AXvfhCEeUmC7mg==",
       "license": "MIT"
     },
+    "node_modules/touch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
+      "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "nodetouch": "bin/nodetouch.js"
+      }
+    },
     "node_modules/triple-beam": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/triple-beam/-/triple-beam-1.4.1.tgz",
@@ -7914,6 +8231,13 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/undefsafe": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/undici-types": {
       "version": "7.19.2",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.19.2.tgz",
diff --git a/backend/webserver/Server.js b/backend/webserver/Server.js
index 1459e014a..e80206e39 100644
--- a/backend/webserver/Server.js
+++ b/backend/webserver/Server.js
@@ -376,6 +376,23 @@ module.exports = class Server {
                 await this.availSockets[socket.id][socketName].init();
             })
 
+            // If a recording is in progress and this new connection isn't in the
+            // participant list, notify the recording's owner that the activity
+            // won't be captured.
+            if (this.activeRecordingId && this.activeRecordingOwnerSocketId) {
+                const participants = this.activeParticipantSocketIds || [];
+                if (!participants.includes(socket.id)) {
+                    const ownerSocket = this.io.sockets.sockets.get(this.activeRecordingOwnerSocketId);
+                    if (ownerSocket) {
+                        ownerSocket.emit("toast", {
+                            title: "Uncaptured connection",
+                            message: "Uncaptured connection detected — not part of this recording",
+                            variant: "warning",
+                        });
+                    }
+                }
+            }
+
             socket.on("disconnect", async (reason) => {
                 try {
                     this.logger.debug("Socket disconnected: " + reason);
@@ -483,6 +500,10 @@ module.exports = class Server {
         } catch (e) {
             this.logger.warn('Failed to start DB stats scheduler: ' + e.message);
         }
+        // Recover any recordings interrupted by the previous server shutdown
+        this.recoverInterruptedRecordings().catch((e) => {
+            this.logger.warn("recoverInterruptedRecordings failed: " + e);
+        });
         return this.http;
     }
 
@@ -499,8 +520,8 @@ module.exports = class Server {
         }
         if (this._statsScheduler) {
             this._statsScheduler.stop(this.logger);
-            }
         }
+    }
 
     /**
      * Flush statistics buffers for all connected sockets.
@@ -522,5 +543,31 @@ module.exports = class Server {
             this.logger.error("flushAllStats encountered an error: " + e);
         }
     }
+    /**
+     * Mark any recordings still in "recording" status as "interrupted".
+     * These are recordings whose server died mid-capture — the in-memory
+     * activeRecordingId is gone but the DB row was never closed out.
+     */
+    async recoverInterruptedRecordings() {
+        try {
+            const stale = await this.db.models["recording"].findAll({
+                where: { status: "recording", deleted: false },
+            });
+            for (const rec of stale) {
+                await this.db.models["recording"].updateById(rec.id, {
+                    status: "interrupted",
+                    endTime: rec.endTime || new Date(),
+                });
+                this.logger.warn(
+                    `Marked recording ${rec.id} as interrupted (server was not running cleanly when stopped)`
+                );
+            }
+            if (stale.length > 0) {
+                this.logger.info(`Recovered ${stale.length} interrupted recording(s) on startup`);
+            }
+        } catch (e) {
+            this.logger.error("Failed to recover interrupted recordings: " + e);
+        }
+    }
 
 }
diff --git a/backend/webserver/replay/auth.js b/backend/webserver/replay/auth.js
new file mode 100644
index 000000000..495d0aab4
--- /dev/null
+++ b/backend/webserver/replay/auth.js
@@ -0,0 +1,124 @@
+'use strict';
+
+const crypto = require('crypto');
+const { io: SocketIOClient } = require('socket.io-client');
+// Delay between a replay client connecting and being handed off for replay.
+// Gives the server time to finish its asynchronous per-socket handler init
+// (see Server.js connection handler) so the first trace doesn't race setup.
+const WARMUP_DELAY_MS = 500;
+
+/**
+ * Sign a session ID using the express-session HMAC-SHA256 scheme.
+ * @param {string} sid - Raw session identifier
+ * @param {string} secret - Session secret from server config
+ * @returns {string} Signed session ID in format s:<sid>.<signature>
+ */
+function signSessionId(sid, secret) {
+    const signature = crypto
+        .createHmac('sha256', secret)
+        .update(sid)
+        .digest('base64')
+        .replace(/=+$/, '');
+    return `s:${sid}.${signature}`;
+}
+
+/**
+ * Create an authenticated socket.io-client by writing a Passport
+ * session directly to the session store.
+ * @param {Object} server - CARE server instance
+ * @param {Object} user - User row from DB
+ * @param {string} serverUrl - Target server URL
+ * @returns {Promise<import("socket.io-client").Socket>} Connected client
+ * @throws {Error} If the client fails to connect
+ */
+async function createAuthenticatedClient(server, user, serverUrl) {
+    const sid = crypto.randomBytes(18).toString('hex');
+
+    const sessionData = JSON.stringify({
+        cookie: {
+            originalMaxAge: null,
+            expires: null,
+            httpOnly: true,
+            path: '/',
+        },
+        passport: {
+            user: {
+                id: user.id,
+                firstName: user.firstName,
+                lastName: user.lastName,
+                userName: user.userName,
+                email: user.email,
+                rolesUpdatedAt: user.rolesUpdatedAt || null,
+            },
+        },
+    });
+
+    const expires = new Date(Date.now() + 24 * 60 * 60 * 1000);
+    await server.db.sequelize.query(
+        `INSERT INTO "Sessions" ("sid", "expires", "data", "createdAt", "updatedAt")
+         VALUES (:sid, :expires, :data, :now, :now)`,
+        {
+            replacements: {
+                sid,
+                expires: expires.toISOString(),
+                data: sessionData,
+                now: new Date().toISOString(),
+            },
+            type: server.db.sequelize.QueryTypes.INSERT,
+        }
+    );
+    // NOTE: This must match the express-session secret in Server.js (#initSessionManagement).
+    // Replay clients mint their own session cookies using this HMAC secret so that the
+    // session middleware accepts them as valid logged-in sessions. When the session secret
+    // is moved to an env var (see GitHub issue on hardcoded session secret), this literal
+    // must be updated to read from the same env var — otherwise replay auth will break.
+    const secret = 'secretString';
+    const signedSid = signSessionId(sid, secret);
+    const cookie = `connect.sid=${encodeURIComponent(signedSid)}`;
+
+    const client = SocketIOClient(serverUrl, {
+        extraHeaders: { cookie },
+        reconnection: false,
+        timeout: 10000,
+    });
+
+    return new Promise((resolve, reject) => {
+        client.on('connect', () => {
+            // The server finishes registering this socket's handlers (StatisticSocket,
+            // UserSocket, etc.) asynchronously after the connect event fires. Firing a
+            // trace before that init completes races the handler setup and the first
+            // event times out. A short warm-up delay lets the server finish wiring up
+            // the socket before we start replaying.
+            setTimeout(() => resolve(client), WARMUP_DELAY_MS);
+        });
+        client.on('connect_error', (err) => {
+            reject(new Error(`Replay auth failed for user ${user.id}: ${err.message}`));
+        });
+    });
+}
+
+/**
+ * Disconnect a replay client and remove its session from the store.
+ * @param {Object} server - CARE server instance
+ * @param {import("socket.io-client").Socket} client - The replay client to clean up
+ */
+async function cleanupSession(server, client) {
+    try {
+        const cookie = client.io.opts.extraHeaders?.cookie || '';
+        const match = cookie.match(/connect\.sid=s%3A([^.]+)\./);
+        if (match) {
+            await server.db.sequelize.query(
+                `DELETE FROM "Sessions" WHERE "sid" = :sid`,
+                { replacements: { sid: match[1] } }
+            );
+        }
+        client.disconnect();
+    } catch (err) {
+        // best-effort cleanup
+    }
+}
+
+module.exports = {
+    createAuthenticatedClient,
+    cleanupSession,
+};
\ No newline at end of file
diff --git a/backend/webserver/replay/worker.js b/backend/webserver/replay/worker.js
new file mode 100644
index 000000000..586c24a79
--- /dev/null
+++ b/backend/webserver/replay/worker.js
@@ -0,0 +1,135 @@
+'use strict';
+
+const { createAuthenticatedClient, cleanupSession } = require('./auth');
+
+/**
+ * Emit a socket event and wait for the server acknowledgement.
+ * @param {import("socket.io-client").Socket} client - Connected socket client
+ * @param {string} action - Event name to emit
+ * @param {Object} payload - Event payload
+ * @param {number} timeoutMs - Max wait time for ack
+ * @returns {Promise<Object>} Server response
+ * @throws {Error} If no ack received within timeout
+ */
+function emitWithTimeout(client, action, payload, timeoutMs) {
+    return new Promise((resolve) => {
+        const timer = setTimeout(() => {
+            resolve({ success: false, timedOut: true, message: `No ack within ${timeoutMs}ms` });
+        }, timeoutMs);
+
+        client.emit(action, payload || {}, (response) => {
+            clearTimeout(timer);
+            resolve(response);
+        });
+    });
+}
+
+/**
+ * Replay a single user's traces through an authenticated socket connection.
+ * @param {Object} server - CARE server instance
+ * @param {Object} user - User row from DB
+ * @param {Array<Object>} traces - Trace rows (direction: true only), sorted by startTime
+ * @param {string} serverUrl - Target server URL
+ * @param {string} timingMode - "realtime" to preserve original delays, "fast" to skip them
+ * @param {number} ackTimeout - Max wait time in ms for the server to ack each trace (default 2000)
+ * @returns {Promise<Object>} Results with pass/fail counts, errors, latencies, and DB changes
+ */
+async function replayUserTraces(server, user, traces, serverUrl, timingMode, ackTimeout = 2000) {
+    const results = {
+        userId: user.id,
+        userName: user.userName,
+        total: traces.length,
+        passed: 0,
+        failed: 0,
+        errors: [],
+        latencies: [],
+    };
+
+    let client;
+    try {
+        client = await createAuthenticatedClient(server, user, serverUrl);
+    } catch (err) {
+        results.failed = traces.length;
+        results.errors.push({ action: 'connect', message: err.message });
+        return results;
+    }
+
+    try {
+        let pendingDbChanges = [];
+
+        client.onAny((eventName, ...args) => {
+            if (eventName.endsWith('Refresh')) {
+                const records = Array.isArray(args[0]) ? args[0] : [args[0]];
+                pendingDbChanges.push({
+                    table: eventName.replace('Refresh', ''),
+                    recordCount: records.length,
+                    records: records.map(r => ({
+                        id: r?.id,
+                        fields: r ? Object.keys(r).filter(k => k !== 'id') : [],
+                    })),
+                });
+            }
+        });
+
+        let prevTime = traces.length > 0 ? new Date(traces[0].startTime).getTime() : 0;
+
+        for (const trace of traces) {
+            if (timingMode === 'realtime') {
+                const traceTime = new Date(trace.startTime).getTime();
+                const delay = traceTime - prevTime;
+                if (delay > 0) {
+                    await new Promise(resolve => setTimeout(resolve, delay));
+                }
+                prevTime = traceTime;
+            }
+
+            pendingDbChanges = [];
+
+            try {
+                const start = Date.now();
+                const ack = await emitWithTimeout(client, trace.action, trace.payload, ackTimeout);
+                const latency = Date.now() - start;
+
+                // Small delay to let any remaining Refresh events arrive
+                await new Promise(resolve => setTimeout(resolve, 50));
+                const dbChanges = [...pendingDbChanges];
+
+                
+
+                if (ack && ack.success === false) {
+                    results.failed++;
+                    results.errors.push({
+                        traceId: trace.id,
+                        action: trace.action,
+                        message: ack.message || 'Server returned success: false',
+                        dbChanges,
+                    });
+                } else {
+                    results.passed++;
+                    results.latencies.push({
+                        traceId: trace.id,
+                        action: trace.action,
+                        latency,
+                        dbChanges,
+                    });
+                }
+            } catch (err) {
+                results.failed++;
+                results.errors.push({
+                    traceId: trace.id,
+                    action: trace.action,
+                    message: err.message,
+                    dbChanges: [],
+                });
+            }
+        }
+    } finally {
+        await cleanupSession(server, client);
+    }
+
+    return results;
+}
+
+module.exports = {
+    replayUserTraces,
+};
\ No newline at end of file
diff --git a/backend/webserver/sockets/recorder.js b/backend/webserver/sockets/recorder.js
new file mode 100644
index 000000000..db1765545
--- /dev/null
+++ b/backend/webserver/sockets/recorder.js
@@ -0,0 +1,243 @@
+const Socket = require("../Socket.js");
+
+/**
+ * Recorder Socket
+ *
+ * Captures WebSocket events across connected sockets for stress-test replay.
+ * Recording is a server-wide toggle — admin chooses which active sessions
+ * (sockets) to include. Pure session-based selection: only the listed
+ * socketIds are recorded. New connections during a recording are NOT
+ * automatically captured (a warning toast goes to the recording owner).
+ */
+class RecorderSocket extends Socket {
+
+    constructor(server, io, socket) {
+        super(server, io, socket);
+        this.incomingHandler = null;
+        this.outgoingHandler = null;
+    }
+
+    /**
+     * Returns true if this socket should be recorded under the current configuration.
+     */
+    isSessionIncluded(socketId) {
+        const participants = this.server.activeParticipantSocketIds;
+        if (!participants || participants.length === 0) {
+            return false;
+        }
+        return participants.includes(socketId);
+    }
+
+    attachListeners() {
+        if (this.incomingHandler || this.outgoingHandler) return;
+
+        this.incomingHandler = async (eventName, ...args) => {
+            const recordingId = this.server.activeRecordingId;
+            if (!recordingId) return;
+            const excludes = this.server.activeExcludeEvents;
+            if (excludes && excludes.includes(eventName)) return;
+            try {
+                await this.models["trace"].add({
+                    recordingId,
+                    userId: this.userId,
+                    socketId: this.socket.id,
+                    action: eventName,
+                    payload: args[0] || null,
+                    direction: true,
+                    startTime: new Date(),
+                    endTime: new Date(),
+                });
+            } catch (err) {
+                this.logger.error("Failed to save trace: " + err.message);
+            }
+        };
+
+        this.outgoingHandler = async (eventName, ...args) => {
+            const recordingId = this.server.activeRecordingId;
+            if (!recordingId) return;
+            const excludes = this.server.activeExcludeEvents;
+            if (excludes && excludes.includes(eventName)) return;
+            try {
+                await this.models["trace"].add({
+                    recordingId,
+                    userId: this.userId,
+                    socketId: this.socket.id,
+                    action: eventName,
+                    payload: args[0] || null,
+                    direction: false,
+                    startTime: new Date(),
+                    endTime: new Date(),
+                });
+            } catch (err) {
+                this.logger.error("Failed to save trace: " + err.message);
+            }
+        };
+
+        this.socket.onAny(this.incomingHandler);
+        this.socket.onAnyOutgoing(this.outgoingHandler);
+    }
+
+    detachListeners() {
+        if (this.incomingHandler) {
+            this.socket.offAny(this.incomingHandler);
+            this.incomingHandler = null;
+        }
+        if (this.outgoingHandler) {
+            this.socket.offAnyOutgoing(this.outgoingHandler);
+            this.outgoingHandler = null;
+        }
+    }
+
+    async startRecording(data, options) {
+        if (this.server.activeRecordingId) {
+            throw new Error("A recording is already in progress");
+        }
+
+        const participantSocketIds = Array.isArray(data?.participantSocketIds) && data.participantSocketIds.length > 0
+            ? data.participantSocketIds
+            : null;
+
+        if (!participantSocketIds) {
+            throw new Error("At least one session must be selected");
+        }
+
+        const excludeEvents = Array.isArray(data?.excludeEvents) && data.excludeEvents.length > 0
+            ? data.excludeEvents
+            : null;
+
+        const recording = await this.models["recording"].add({
+            name: data.name || "Recording " + new Date().toLocaleString(),
+            status: "recording",
+            startTime: new Date(),
+            userId: this.userId,
+            participantSocketIds,
+            excludeEvents,
+        }, options);
+
+        this.server.activeRecordingId = recording.id;
+        this.server.activeParticipantSocketIds = participantSocketIds;
+        this.server.activeRecordingOwnerSocketId = this.socket.id;
+        this.server.activeExcludeEvents = excludeEvents;
+
+
+        for (const socketId of Object.keys(this.server.availSockets)) {
+            const recorder = this.server.availSockets[socketId]["RecorderSocket"];
+            const included = recorder ? recorder.isSessionIncluded(recorder.socket.id) : "no recorder";
+            if (recorder && recorder.isSessionIncluded(recorder.socket.id)) {
+                recorder.attachListeners();
+            }
+        }
+    }
+
+    async stopRecording(data, options) {
+        const recordingId = this.server.activeRecordingId || (data && data.id);
+        if (!recordingId) {
+            throw new Error("No active recording");
+        }
+
+        for (const socketId of Object.keys(this.server.availSockets)) {
+            const recorder = this.server.availSockets[socketId]["RecorderSocket"];
+            if (recorder) recorder.detachListeners();
+        }
+
+        await this.models["recording"].updateById(
+            recordingId,
+            { status: "finished", endTime: new Date() },
+            options
+        );
+
+        this.server.activeRecordingId = null;
+        this.server.activeParticipantSocketIds = null;
+        this.server.activeRecordingOwnerSocketId = null;
+        this.server.activeExcludeEvents = null;
+
+        const traces = await this.models["trace"].findAll({
+            where: { recordingId },
+            order: [["id", "ASC"]],
+        });
+
+        return {
+            id: recordingId,
+            traces: traces.map(t => ({
+                id: t.id,
+                recordingId: t.recordingId,
+                userId: t.userId,
+                socketId: t.socketId,
+                action: t.action,
+                direction: t.direction,
+                startTime: t.startTime,
+                endTime: t.endTime,
+            })),
+        };
+    }
+
+    async getTraces(data, options) {
+        if (!data || !data.id) throw new Error("Recording ID required");
+        const traces = await this.models["trace"].findAll({
+            where: { recordingId: data.id, deleted: false },
+            order: [["id", "ASC"]],
+        });
+        return traces.map(t => ({
+            id: t.id,
+            recordingId: t.recordingId,
+            userId: t.userId,
+            socketId: t.socketId,
+            action: t.action,
+            direction: t.direction,
+            startTime: t.startTime,
+            endTime: t.endTime,
+        }));
+    }
+
+    /**
+     * Returns one entry per active socket connection (= session).
+     * Used by the Start Recording modal to populate the session selection table.
+     * Offline users have no sessions and are not returned.
+     */
+    async getOnlineSessions(data, options) {
+        const userIds = new Set();
+        const sessions = [];
+        for (const socketId of Object.keys(this.server.availSockets)) {
+            const bucket = this.server.availSockets[socketId];
+            const userSocket = bucket["UserSocket"];
+            if (userSocket && userSocket.userId) {
+                userIds.add(userSocket.userId);
+                sessions.push({
+                    socketId,
+                    userId: userSocket.userId,
+                    connectedAt: userSocket.connectedAt || null,
+                });
+            }
+        }
+
+        // Resolve userNames in one query
+        const userMap = {};
+        if (userIds.size > 0) {
+            const users = await this.models["user"].findAll({
+                where: { id: Array.from(userIds) },
+            });
+            for (const u of users) {
+                userMap[u.id] = u.userName;
+            }
+        }
+
+        return sessions.map(s => ({
+            ...s,
+            userName: userMap[s.userId] || "Unknown",
+        }));
+
+    }
+
+    init() {
+        this.createSocket("recorderStart", this.startRecording, {}, true);
+        this.createSocket("recorderStop", this.stopRecording, {}, false);
+        this.createSocket("recordingGetTraces", this.getTraces, {}, false);
+        this.createSocket("recordingGetOnlineSessions", this.getOnlineSessions, {}, false);
+
+        if (this.server.activeRecordingId && this.isSessionIncluded(this.socket.id)) {
+            this.attachListeners();
+        }
+    }
+}
+
+module.exports = RecorderSocket;
\ No newline at end of file
diff --git a/backend/webserver/sockets/replayer.js b/backend/webserver/sockets/replayer.js
new file mode 100644
index 000000000..75c99dadf
--- /dev/null
+++ b/backend/webserver/sockets/replayer.js
@@ -0,0 +1,200 @@
+'use strict';
+
+const Socket = require('../Socket.js');
+const { replayUserTraces } = require('../replay/worker');
+
+/**
+ * Handles replaying recorded socket events for stress testing.
+ *
+ * Scaling mode (pooled): all selected recordings' sessions are combined
+ * into one pool of N sessions. Iteration K runs K * N parallel sockets,
+ * cycling through the pool with wraparound (linear add per iteration).
+ *
+ * Example: recording A=[a1, a2], recording B=[b3], maxIterations=3
+ *   Iteration 1: [a1, a2, b3]                              (3 sockets)
+ *   Iteration 2: [a1, a2, b3, a1, a2, b3]                  (6 sockets)
+ *   Iteration 3: [a1, a2, b3, a1, a2, b3, a1, a2, b3]      (9 sockets)
+ *
+ * @type {ReplayerSocket}
+ * @class ReplayerSocket
+ */
+class ReplayerSocket extends Socket {
+
+    /**
+     * Pool sessions from all selected recordings and run a single scaling test
+     * across the combined pool.
+     * @param {Object} data - Input data from the frontend
+     * @param {Array<number>} data.recordingIds - IDs of recordings whose sessions get pooled
+     * @param {string} data.timingMode - "realtime" or "fast"
+     * @param {boolean} data.continueOnFailure - If true, scaling continues past failed iterations
+     * @param {number} data.maxIterations - How many scaling iterations to run (required, > 0)
+     * @param {Object} options - Additional configuration parameter
+     * @returns {Promise<Array<Object>>} Iteration results
+     * @throws {Error} If recordingIds is missing/empty, maxIterations invalid, or pool is empty
+     */
+    async replayRun(data, options) {
+        const {
+            recordingIds,
+            timingMode = 'fast',
+            continueOnFailure = false,
+            maxIterations,
+            ackTimeout = 2000,
+        } = data;
+
+        if (!Array.isArray(recordingIds) || recordingIds.length === 0) {
+            throw new Error('recordingIds must be a non-empty array');
+        }
+        if (!Number.isInteger(maxIterations) || maxIterations < 1) {
+            throw new Error('maxIterations must be a positive integer');
+        }
+
+        // Pool sessions from every selected recording
+        const pool = await this.buildSessionPool(recordingIds);
+
+        if (pool.sessions.length === 0) {
+            throw new Error('No replayable sessions found in selected recordings');
+        }
+
+        const serverUrl = `http://localhost:${process.env.CONTENT_SERVER_PORT || 3001}`;
+
+        const iterations = await this.runScalingTest(
+            pool, serverUrl, timingMode, continueOnFailure, maxIterations, ackTimeout
+        );
+
+        return iterations;
+    }
+
+    /**
+     * Load all selected recordings' traces and combine them into one pool of
+     * sessions. Each session keeps a reference to its source recording so we
+     * can label results with the recording name.
+     *
+     * @param {Array<number>} recordingIds - Recordings to pool
+     * @returns {Promise<{sessions: Array, userMap: Map}>} Pooled sessions and the user lookup needed for replay
+     */
+    async buildSessionPool(recordingIds) {
+        const sessions = [];
+        const userIdSet = new Set();
+
+        for (const recordingId of recordingIds) {
+            const recording = await this.models['recording'].findByPk(recordingId);
+            if (!recording) continue;
+
+            const traces = await this.models['trace'].findAll({
+                where: { recordingId, direction: true, deleted: false },
+                order: [['startTime', 'ASC']],
+            });
+            if (traces.length === 0) continue;
+
+            const sessionMap = this.groupTracesBySocket(traces);
+            for (const [key, session] of sessionMap) {
+                sessions.push({
+                    sessionKey: key,
+                    userId: session.userId,
+                    traces: session.traces,
+                    recordingId,
+                    recordingName: recording.name,
+                });
+                userIdSet.add(session.userId);
+            }
+        }
+
+        const users = await this.models['user'].findAll({
+            where: { id: Array.from(userIdSet) },
+        });
+        const userMap = new Map(users.map(u => [u.id, u]));
+
+        return { sessions, userMap };
+    }
+
+    /**
+     * Group trace rows by socketId, falling back to "user-{userId}" when
+     * socketId is null (older recordings captured before per-session
+     * tracking was added).
+     * @param {Array<Object>} traces - Trace rows sorted by startTime
+     * @returns {Map<string, {userId: number, traces: Array<Object>}>} Map of session key to its traces and owning user
+     */
+    groupTracesBySocket(traces) {
+        const map = new Map();
+        for (const t of traces) {
+            if (!t.userId) continue;
+            const key = t.socketId || `user-${t.userId}`;
+            if (!map.has(key)) {
+                map.set(key, { userId: t.userId, traces: [] });
+            }
+            map.get(key).traces.push(t);
+        }
+        return map;
+    }
+
+    /**
+     * Execute the scaling-correctness loop on the pooled session list.
+     * Iteration K runs K * N parallel sockets, cycling through the pool
+     * with wraparound (linear add: each iteration adds one full copy of
+     * the pool to the previous iteration's count).
+     *
+     * Stops at first failure unless continueOnFailure is true.
+     *
+     * @param {{sessions: Array, userMap: Map}} pool - Combined session pool from buildSessionPool
+     * @param {string} serverUrl - Target server URL
+     * @param {string} timingMode - "realtime" or "fast"
+     * @param {boolean} continueOnFailure - If true, scaling continues past failed iterations
+     * @param {number} maxIterations - Number of iterations to run
+     * @returns {Promise<Array<Object>>} Iteration results
+     */
+    async runScalingTest(pool, serverUrl, timingMode, continueOnFailure, maxIterations, ackTimeout) {
+        const allResults = [];
+        const N = pool.sessions.length;
+
+        for (let level = 1; level <= maxIterations; level++) {
+            // Iteration K runs K full copies of the pool. Total sockets = K * N.
+            // Sessions are picked with wraparound, so iteration K's list is
+            // pool[0], pool[1], ..., pool[N-1], pool[0], pool[1], ... (K times).
+            const totalSockets = level * N;
+            const activeSessions = [];
+            for (let i = 0; i < totalSockets; i++) {
+                activeSessions.push(pool.sessions[i % N]);
+            }
+
+            this.sendToast(
+                `Iteration ${level}/${maxIterations}: ${totalSockets} parallel session(s)`,
+                'Replay',
+                'info'
+            );
+
+            const levelResults = await Promise.all(
+                activeSessions.map(session => {
+                    const user = pool.userMap.get(session.userId);
+                    return replayUserTraces(this.server, user, session.traces, serverUrl, timingMode, ackTimeout)
+                        .then(result => ({
+                            ...result,
+                            sessionKey: session.sessionKey,
+                            recordingId: session.recordingId,
+                            recordingName: session.recordingName,
+                        }));
+                })
+            );
+
+            const levelFailed = levelResults.some(r => r.failed > 0);
+            allResults.push({
+                level,
+                sessions: totalSockets,
+                results: levelResults,
+                passed: !levelFailed,
+            });
+
+            if (levelFailed && !continueOnFailure) {
+                this.sendToast(`Replay stopped at iteration ${level}`, 'Replay', 'danger');
+                break;
+            }
+        }
+
+        return allResults;
+    }
+
+    init() {
+        this.createSocket('replayRun', this.replayRun, {}, false);
+    }
+}
+
+module.exports = ReplayerSocket;
\ No newline at end of file
diff --git a/docs/.DS_Store b/docs/.DS_Store
new file mode 100644
index 000000000..ce7e51cd5
Binary files /dev/null and b/docs/.DS_Store differ
diff --git a/frontend/src/basic/navigation/Topbar.vue b/frontend/src/basic/navigation/Topbar.vue
index c4889116e..9f1df9118 100644
--- a/frontend/src/basic/navigation/Topbar.vue
+++ b/frontend/src/basic/navigation/Topbar.vue
@@ -26,13 +26,30 @@
             :height="30"
           />
         </a>
-        <div id="topbarCustomPlaceholder"/>   
-        <div id="topbarCenterPlaceholder"/> 
+        <div id="topbarCustomPlaceholder"/>
+        <div id="topbarCenterPlaceholder"/>
         <ul
           id="topBarNavItems"
           class="navbar-nav ms-auto mt-2 mt-lg-0"
-        />   
+        />
         <ul class="navbar-nav">
+          <li
+            v-if="showRecordingIcon"
+            class="nav-item me-3 d-flex align-items-center"
+          >
+            <span
+              class="recording-icon d-flex align-items-center gap-2"
+              :class="{ 'cursor-pointer': isAdmin }"
+              :title="recordingTooltip"
+              @click="onRecordingIconClick"
+            >
+              <LoadIcon
+                name="record-circle"
+                :size="18"
+              />
+              <span v-if="recordingElapsed" class="recording-timer">{{ recordingElapsed }}</span>
+            </span>
+          </li>
           <li class="nav-item me-3">
             <div
               v-if="!isProjectButtonHidden && isInDashboard"
@@ -90,14 +107,14 @@
                 <a class="dropdown-item display-username">
                   Signed in as {{ username }}
                 </a>
-                <a 
+                <a
                   class="dropdown-item"
                   href="#"
                   @click="$refs.twoFactorSettingsModal.open()"
                 >
                   Configure 2FA
                 </a>
-                <a 
+                <a
                   v-if="consentEnabled"
                   class="dropdown-item"
                   href="#"
@@ -105,7 +122,7 @@
                 >
                   Update consent
                 </a>
-                <a 
+                <a
                   class="dropdown-item"
                   href="#"
                   @click="$refs.passwordModal.open(userId)"
@@ -154,10 +171,14 @@ export default {
   data() {
     return {
       showProjectDropdown: false,
+      now: Date.now(),
+      tickHandle: null,
     }
   },
   subscribeTable: [{
     table: 'project',
+  }, {
+    table: 'recording',
   }],
   computed: {
     allProjects() {
@@ -187,12 +208,58 @@ export default {
     consentEnabled() {
       return this.$store.getters["settings/getValue"]("app.config.consent.enabled") === "true";
     },
+    isAdmin() {
+      return this.$store.getters["auth/isAdmin"];
+    },
+    activeRecording() {
+      const recordings = this.$store.getters["table/recording/getAll"] || [];
+      return recordings.find(r => r.status === "recording") || null;
+    },
+    isParticipant() {
+      const rec = this.activeRecording;
+      if (!rec || !this.$socket?.id) return false;
+      const sockets = rec.participantSocketIds || [];
+      return sockets.includes(this.$socket.id);
+    },
+    showRecordingIcon() {
+      if (!this.activeRecording) return false;
+      // Admins always see the icon during a recording.
+      // Non-admins see it only if their socket is in the participant list.
+      return this.isAdmin || this.isParticipant;
+    },
+    recordingElapsed() {
+      const rec = this.activeRecording;
+      if (!rec || !rec.startTime) return null;
+      const ms = this.now - new Date(rec.startTime).getTime();
+      if (ms < 0) return "00:00:00";
+      const totalSeconds = Math.floor(ms / 1000);
+      const hours = Math.floor(totalSeconds / 3600);
+      const minutes = Math.floor((totalSeconds % 3600) / 60);
+      const seconds = totalSeconds % 60;
+      const pad = (n) => String(n).padStart(2, '0');
+      return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+    },
+    recordingTooltip() {
+      if (this.isAdmin) {
+        return "Recording in progress — open Socket Profiler to stop";
+      }
+      return "You're being recorded for testing purposes";
+    },
   },
   mounted() {
     this.$refs.topbar.addEventListener('click', this.handleClickOutside);
+    // Tick once a second so the recording-elapsed display next to the
+    // recording icon stays current. Cheap because it just updates a number.
+    this.tickHandle = setInterval(() => {
+      this.now = Date.now();
+    }, 1000);
   },
   beforeUnmount() {
     this.$refs.topbar.removeEventListener('click', this.handleClickOutside);
+    if (this.tickHandle) {
+      clearInterval(this.tickHandle);
+      this.tickHandle = null;
+    }
   },
   methods: {
     selectProject(projectId) {
@@ -221,6 +288,13 @@ export default {
         await this.$router.push('/dashboard');
       }
     },
+    onRecordingIconClick() {
+      // Admins jump to the Socket Profiler dashboard. Non-admin participants
+      // can't go there (ifpage is admin-gated), so the click is a no-op for them.
+      if (this.isAdmin) {
+        this.$router.push('/dashboard/Socket_Profiler');
+      }
+    },
     toggleProfileDropdown() {
       const dropdown = document.getElementById('dropdown-show');
       var close = false;
@@ -312,4 +386,26 @@ body.sidebar-exists #backButton {
   color: white;
 }
 
-</style>
+.recording-icon {
+  display: inline-flex;
+  align-items: center;
+  color: #dc3545;
+  animation: recording-pulse 1.6s ease-in-out infinite;
+}
+
+.recording-timer {
+  font-variant-numeric: tabular-nums;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.recording-icon.cursor-pointer {
+  cursor: pointer;
+}
+
+@keyframes recording-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Dashboard.vue b/frontend/src/components/Dashboard.vue
index 0b1bbd7e7..38d7dec30 100644
--- a/frontend/src/components/Dashboard.vue
+++ b/frontend/src/components/Dashboard.vue
@@ -14,10 +14,11 @@
           class="col border mh-100 justify-content-center p-3"
           style="overflow-y: scroll"
         >
+         
           <component
             :is="currentComponent"
             :key="$route.path"
-          />
+          />  
         </div>
       </div>
     </div>
@@ -38,6 +39,7 @@ import { defineAsyncComponent } from "vue";
 import Loading from "@/basic/Loading.vue";
 import NotFoundPage from "@/auth/NotFound.vue";
 
+
 const dashboardModules = import.meta.glob("./dashboard/*.vue");
 
 export default {
diff --git a/frontend/src/components/dashboard/SocketProfiler.vue b/frontend/src/components/dashboard/SocketProfiler.vue
new file mode 100644
index 000000000..956410d0d
--- /dev/null
+++ b/frontend/src/components/dashboard/SocketProfiler.vue
@@ -0,0 +1,359 @@
+<template>
+  <Card title="Socket Profiler">
+    <template #headerElements>
+      <div class="btn-group gap-2">
+        <BasicButton
+            class="btn-primary btn-sm"
+            text="Start Recording"
+            title="Start Recording"
+            icon="record-circle"
+            :disabled="isRecording"
+            @click="openStartModal"
+        />
+        <BasicButton
+            class="btn-danger btn-sm"
+            text="Stop Recording"
+            title="Stop Recording"
+            icon="stop-circle"
+            :disabled="!isRecording"
+            @click="stopActiveRecording"
+        />
+        <BasicButton
+            class="btn-outline-info btn-sm"
+            text="Import"
+            title="Import recording from JSON"
+            icon="upload"
+            @click="openImportModal"
+        />
+      </div>
+    </template>
+    <template #body>
+      <BasicTable
+          :columns="tableColumns"
+          :data="recordings"
+          :options="tableOptions"
+          :buttons="tableButtons"
+          :max-table-height="'65vh'"
+          @action="action"
+      />
+    </template>
+  </Card>
+  <StartRecordingModal ref="startRecordingModal" />
+  <StartReplayModal ref="startReplayModal" @replay-start="onReplayStart" />
+  <RecordingModal ref="recordingModal" />
+  <ReplayResultsModal ref="replayResultsModal" />
+  <ImportRecordingModal ref="importRecordingModal" />
+</template>
+
+<script>
+import Card from "@/basic/dashboard/card/Card.vue";
+import BasicTable from "@/basic/Table.vue";
+import BasicButton from "@/basic/Button.vue";
+import RecordingModal from "./socketprofiler/RecordingModal.vue";
+import StartRecordingModal from "./socketprofiler/StartRecordingModal.vue";
+import StartReplayModal from "./socketprofiler/StartReplayModal.vue";
+import ReplayResultsModal from "./socketprofiler/ReplayResultsModal.vue";
+import { downloadObjectsAs } from "@/assets/utils";
+import ImportRecordingModal from "./socketprofiler/ImportRecordingModal.vue";
+
+export default {
+  name: "DashboardSocketProfiler",
+  subscribeTable: [
+    {
+      table: "recording",
+    },
+  ],
+  components: {
+    Card,
+    BasicTable,
+    BasicButton,
+    RecordingModal,
+    StartRecordingModal,
+    StartReplayModal,
+    ReplayResultsModal,
+    ImportRecordingModal,
+  },
+  data() {
+    return {
+      tableOptions: {
+        striped: true,
+        hover: true,
+        bordered: false,
+        borderless: false,
+        small: false,
+        pagination: 10,
+        search: true,
+      },
+      tableColumns: [
+        {name: "ID", key: "id"},
+        {name: "Name", key: "name"},
+        {name: "Status", key: "status"},
+        {name: "Start Time", key: "startTime"},
+        {name: "End Time", key: "endTime"},
+        {name: "Created At", key: "createdAt"},
+      ],
+      tableButtons: [
+        {
+          icon: "play-circle",
+          options: {
+            iconOnly: true,
+            specifiers: {
+              "btn-outline-success": true,
+            },
+          },
+          title: "Replay recording",
+          action: "replayRecording",
+        },
+        {
+          icon: "download",
+          options: {
+            iconOnly: true,
+            specifiers: {
+              "btn-outline-info": true,
+            },
+          },
+          title: "Export recording",
+          action: "exportRecording",
+        },
+        {
+          icon: "pencil",
+          options: {
+            iconOnly: true,
+            specifiers: {
+              "btn-outline-primary": true,
+            },
+          },
+          title: "Edit recording",
+          action: "editRecording",
+        },
+        {
+          icon: "trash",
+          options: {
+            iconOnly: true,
+            specifiers: {
+              "btn-outline-secondary": true,
+            },
+          },
+          title: "Delete recording",
+          action: "deleteRecording",
+        },
+      ],
+    };
+  },
+  computed: {
+    recordings() {
+      return this.$store.getters["table/recording/getAll"].map(r => ({
+        ...r,
+        startTime: r.startTime ? new Date(r.startTime).toLocaleString() : "-",
+        endTime: r.endTime ? new Date(r.endTime).toLocaleString() : "-",
+        createdAt: r.createdAt ? new Date(r.createdAt).toLocaleString() : "-",
+      }));
+    },
+    isRecording() {
+      return this.recordings.some(r => r.status === "recording");
+    },
+    activeRecordingId() {
+      const active = this.recordings.find(r => r.status === "recording");
+      return active ? active.id : null;
+    },
+  },
+  methods: {
+    action(data) {
+      switch (data.action) {
+        case "replayRecording":
+          this.openReplayModal(data.params);
+          break;
+        case "exportRecording":
+          this.exportRecording(data.params);
+          break;
+        case "editRecording":
+          this.editRecording(data.params);
+          break;
+        case "deleteRecording":
+          this.deleteRecording(data.params);
+          break;
+      }
+    },
+    openStartModal() {
+      this.$refs.startRecordingModal.open();
+    },
+    openImportModal() {
+      this.$refs.importRecordingModal.open();
+    },
+    stopActiveRecording() {
+      const id = this.activeRecordingId;
+      if (!id) return;
+
+      this.$socket.emit("recorderStop", { id }, (res) => {
+        if (res.success) {
+          const payload = res.data || res;
+          const recordingId = payload.id ?? id;
+          const traces = payload.traces || [];
+          this.$refs.recordingModal.open(recordingId, traces);
+        } else {
+          this.eventBus.emit("toast", {
+            title: "Failed to stop recording",
+            message: res.message,
+            variant: "danger",
+          });
+        }
+      });
+    },
+    exportRecording(row) {
+      this.$socket.emit("recordingGetTraces", { id: row.id }, (res) => {
+        if (!res.success) {
+          this.eventBus.emit("toast", {
+            title: "Export failed",
+            message: res.message,
+            variant: "danger",
+          });
+          return;
+        }
+
+        // Pull the full recording row from the store and strip DB-managed
+        // and environment-specific fields that shouldn't travel with an export.
+        const recordingRow = this.$store.getters["table/recording/getAll"]
+          .find(r => r.id === row.id);
+        if (!recordingRow) {
+          this.eventBus.emit("toast", {
+            title: "Export failed",
+            message: "Recording not found in store",
+            variant: "danger",
+          });
+          return;
+        }
+
+        const stripFields = ["id", "createdAt", "updatedAt", "deleted", "deletedAt", "creator_name"];
+        const strip = (obj) => Object.fromEntries(
+          Object.entries(obj).filter(([key]) => !stripFields.includes(key))
+        );
+
+        const traces = (res.data || []).map(strip);
+
+        const payload = {
+          schemaVersion: 1,
+          exportedAt: new Date().toISOString(),
+          recording: strip(recordingRow),
+          traces,
+        };
+
+        downloadObjectsAs(payload, `recording_${row.id}_${Date.now()}`, "json");
+        this.eventBus.emit("toast", {
+          title: "Export successful",
+          message: `Recording exported with ${traces.length} trace(s)`,
+          variant: "success",
+        });
+      });
+    },
+    editRecording(row) {
+      this.$socket.emit("recordingGetTraces", { id: row.id }, (res) => {
+        if (res.success) {
+          const traces = res.data || [];
+          this.$refs.recordingModal.openForEdit(row.id, row.name, traces);
+        } else {
+          this.eventBus.emit("toast", {
+            title: "Failed to load traces",
+            message: res.message,
+            variant: "danger",
+          });
+        }
+      });
+    },
+    openReplayModal(row) {
+      this.$refs.startReplayModal.open(row.id);
+    },
+    onReplayStart({ recordingIds, timingMode, continueOnFailure, maxIterations, ackTimeout }) {
+      this.eventBus.emit("toast", {
+        title: "Replay started",
+        message: `Replaying ${recordingIds.length} recording(s)`,
+        variant: "info",
+      });
+      const runConfig = { recordingIds, timingMode, continueOnFailure, maxIterations, ackTimeout };
+      this.$socket.emit("replayRun", runConfig, (res) => {
+        if (res.success) {
+          this.downloadReplayResults(res.data, runConfig);
+          this.$refs.replayResultsModal.open(res.data);
+        } else {
+          this.eventBus.emit("toast", {
+            title: "Replay failed",
+            message: res.message,
+            variant: "danger",
+          });
+        }
+      });
+    },
+    /**
+     * Auto-download the replay run as a JSON file. The file captures both the
+     * full iteration results and the input configuration that produced them,
+     * so a saved run can be reviewed later without having to remember which
+     * settings were used.
+     */
+    downloadReplayResults(results, runConfig) {
+      const allRecordings = this.$store.getters["table/recording/getAll"] || [];
+      const recordingNames = runConfig.recordingIds.map((id) => {
+        const r = allRecordings.find((rec) => rec.id === id);
+        return r ? r.name : `recording_${id}`;
+      });
+
+      // Build a filesystem-safe slug from the recording names; if there's
+      // more than one recording, summarise as "N-recordings" so the filename
+      // doesn't balloon.
+      const slug = recordingNames.length === 1
+        ? recordingNames[0].replace(/[^a-zA-Z0-9_-]+/g, "_").slice(0, 60)
+        : `${recordingNames.length}-recordings`;
+
+      const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
+      const filename = `replay_results_${timestamp}_${slug}`;
+
+      // Strip per-trace dbChanges from the exported file they bloat the JSON
+      // and aren't needed for offline review. The in-app results modal keeps
+      // them for live inspection.
+      const stripDbChanges = (results || []).map((iteration) => ({
+        ...iteration,
+        results: (iteration.results || []).map((session) => ({
+          ...session,
+          latencies: (session.latencies || []).map(({ dbChanges, ...rest }) => rest),
+          errors: (session.errors || []).map(({ dbChanges, ...rest }) => rest),
+        })),
+      }));
+
+      const payload = {
+        schemaVersion: 1,
+        completedAt: new Date().toISOString(),
+        runConfig: {
+          ...runConfig,
+          recordingNames,
+        },
+        results: stripDbChanges,
+      };
+      downloadObjectsAs(payload, filename, "json");
+    },
+    deleteRecording(row) {
+      this.$socket.emit("appDataUpdate", {
+        table: "recording",
+        data: { id: row.id, deleted: true }
+      }, (res) => {
+        if (res.success) {
+          this.eventBus.emit("toast", {
+            title: "Recording deleted",
+            message: "Recording has been deleted",
+            variant: "success",
+          });
+        } else {
+          this.eventBus.emit("toast", {
+            title: "Failed to delete recording",
+            message: res.message,
+            variant: "danger",
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.card .card-body {
+  padding: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/navigation/RecordingBar.vue b/frontend/src/components/dashboard/navigation/RecordingBar.vue
new file mode 100644
index 000000000..3dd429f43
--- /dev/null
+++ b/frontend/src/components/dashboard/navigation/RecordingBar.vue
@@ -0,0 +1,96 @@
+<template>
+  <div v-if="isRecording" class="recording-bar d-flex align-items-center justify-content-between px-4 py-2">
+    <div class="d-flex align-items-center gap-2">
+      <span class="recording-dot"></span>
+      <span class="recording-text">Recording in progress...</span>
+    </div>
+    <div class="d-flex gap-2">
+      <BasicButton
+        class="btn-danger btn-sm"
+        text="Stop"
+        icon="stop-circle"
+        @click="stopRecording"
+      />
+    </div>
+  </div>
+  <RecordingModal ref="recordingModal" />
+</template>
+
+<script>
+import BasicButton from "@/basic/Button.vue";
+import RecordingModal from "@/components/dashboard/socketprofiler/RecordingModal.vue";
+
+export default {
+  name: "RecordingBar",
+  subscribeTable: [
+    { table: "recording" }
+  ],
+  components: { BasicButton, RecordingModal },
+  computed: {
+    isRecording() {
+      return this.$store.getters["table/recording/getAll"].some(r => r.status === "recording");
+    },
+    activeRecordingId() {
+      const active = this.$store.getters["table/recording/getAll"].find(r => r.status === "recording");
+      return active ? active.id : null;
+    },
+  },
+  mounted() {
+    // Allow other components (e.g. SocketProfiler header button) to trigger the stop flow
+    this.eventBus.on("recording:stop", this.stopRecording);
+  },
+  beforeUnmount() {
+    this.eventBus.off("recording:stop", this.stopRecording);
+  },
+  methods: {
+    stopRecording() {
+      const id = this.activeRecordingId;
+      if (!id) return;
+
+      this.$socket.emit("recorderStop", { id }, (res) => {
+        if (res.success) {
+          const payload = res.data || res;
+          const recordingId = payload.id ?? id;
+          const traces = payload.traces || [];
+          this.$refs.recordingModal.open(recordingId, traces);
+        } else {
+          this.eventBus.emit("toast", {
+            title: "Failed to stop recording",
+            message: res.message,
+            variant: "danger",
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.recording-bar {
+  background-color: #1a1a1a;
+  color: white;
+  width: 100%;
+  z-index: 100;
+}
+
+.recording-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #ff4444;
+  animation: pulse 1.5s infinite;
+  display: inline-block;
+}
+
+@keyframes pulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.3; }
+  100% { opacity: 1; }
+}
+
+.recording-text {
+  font-size: 14px;
+  font-weight: 500;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/socketprofiler/ImportRecordingModal.vue b/frontend/src/components/dashboard/socketprofiler/ImportRecordingModal.vue
new file mode 100644
index 000000000..56ff8d7a5
--- /dev/null
+++ b/frontend/src/components/dashboard/socketprofiler/ImportRecordingModal.vue
@@ -0,0 +1,292 @@
+<template>
+  <StepperModal
+    ref="stepper"
+    :steps="steps"
+    :validation="stepValid"
+    size="lg"
+    @submit="importRecording"
+    @hide="reset"
+  >
+    <template #title>
+      <h5 class="modal-title">Import Recording</h5>
+    </template>
+
+    <!-- Step 1: File picker -->
+    <template #step-1>
+      <div class="form-field d-flex flex-column">
+        <label class="form-label w-100 text-start mb-2">
+          Select recording file (JSON):
+        </label>
+        <div class="w-100">
+          <input
+            ref="fileInput"
+            class="form-control"
+            type="file"
+            accept=".json,application/json"
+            @change="handleFileSelect"
+          />
+        </div>
+      </div>
+      <div v-if="selectedFile" class="mt-2">
+        <small class="text-muted">Selected: {{ selectedFile.name }}</small>
+      </div>
+      <div v-if="parseError" class="mt-2 text-danger">
+        <small>{{ parseError }}</small>
+      </div>
+    </template>
+
+    <!-- Step 2: Preview -->
+    <template #step-2>
+      <p class="text-muted mb-3">
+        Import the following recording from <strong>{{ selectedFile && selectedFile.name }}</strong>?
+      </p>
+      <table v-if="parsed" class="table table-sm">
+        <tbody>
+          <tr>
+            <th style="width: 200px">Name</th>
+            <td>{{ parsed.recording.name }}</td>
+          </tr>
+          <tr>
+            <th>Status</th>
+            <td>{{ parsed.recording.status }}</td>
+          </tr>
+          <tr>
+            <th>Start Time</th>
+            <td>{{ formatTime(parsed.recording.startTime) }}</td>
+          </tr>
+          <tr>
+            <th>End Time</th>
+            <td>{{ formatTime(parsed.recording.endTime) }}</td>
+          </tr>
+          <tr>
+            <th>Trace Count</th>
+            <td>{{ parsed.traces.length }}</td>
+          </tr>
+          <tr>
+            <th>Exported At</th>
+            <td>{{ formatTime(parsed.exportedAt) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </template>
+
+    <!-- Step 3: Confirmation -->
+    <template #step-3>
+      <p>The recording will be created under your user account. IDs and socket references from the source machine will not be carried over.</p>
+      <p>Importing <strong>{{ parsed && parsed.traces.length }}</strong> trace(s) one at a time can take a few seconds for large recordings.</p>
+    </template>
+  </StepperModal>
+</template>
+
+<script>
+import StepperModal from "@/basic/modal/StepperModal.vue";
+
+/**
+ * Stepper modal for importing a recording from a JSON file produced by
+ * the export feature. Re-creates the recording row and all of its traces
+ * under the current user's account.
+ *
+ * Pattern modeled on Karim Ouf's ImportFormatModal for workflows.
+ *
+ * Note: traces are re-created one at a time via appDataUpdate. I think this is fine
+ * for typical recording sizes; can be swapped to a bulk handler if imports
+ * become slow.
+ */
+export default {
+  name: "ImportRecordingModal",
+  components: { StepperModal },
+  data() {
+    return {
+      selectedFile: null,
+      parsed: null,
+      parseError: null,
+    };
+  },
+  computed: {
+    userId() {
+      return this.$store.getters["auth/getUserId"];
+    },
+    steps() {
+      return [
+        { title: "File Selection" },
+        { title: "Preview" },
+        { title: "Confirmation" },
+      ];
+    },
+    stepValid() {
+      return [
+        !!this.parsed,
+        !!this.parsed,
+        true,
+      ];
+    },
+  },
+  methods: {
+    open() {
+      this.reset();
+      this.$refs.stepper.open();
+    },
+    close() {
+      this.$refs.stepper.close();
+    },
+    reset() {
+      this.selectedFile = null;
+      this.parsed = null;
+      this.parseError = null;
+      if (this.$refs.fileInput) {
+        this.$refs.fileInput.value = "";
+      }
+    },
+    formatTime(ts) {
+      if (!ts) return "-";
+      return new Date(ts).toLocaleString();
+    },
+    handleFileSelect(event) {
+      const file = event.target.files[0];
+      if (!file) return;
+      this.selectedFile = file;
+      this.parsed = null;
+      this.parseError = null;
+      this.processFile(file);
+    },
+    async processFile(file) {
+      try {
+        const content = await this.readFile(file);
+        const parsed = JSON.parse(content);
+        this.validatePayload(parsed);
+        this.parsed = parsed;
+      } catch (error) {
+        this.parseError = `Failed to parse file: ${error.message}`;
+        this.selectedFile = null;
+        this.parsed = null;
+      }
+    },
+    readFile(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => resolve(e.target.result);
+        reader.onerror = () => reject(new Error("Failed to read file"));
+        reader.readAsText(file);
+      });
+    },
+    /**
+     * Validate the parsed import payload. Throws on any issue.
+     */
+    validatePayload(p) {
+      if (!p || typeof p !== "object") throw new Error("Not a valid JSON object");
+      if (p.schemaVersion !== 1) {
+        throw new Error(`Unsupported schemaVersion: ${p.schemaVersion}. Expected 1.`);
+      }
+      if (!p.recording || typeof p.recording !== "object") {
+        throw new Error("Missing 'recording' object");
+      }
+      if (!Array.isArray(p.traces)) {
+        throw new Error("Missing 'traces' array");
+      }
+    },
+    async importRecording() {
+      if (!this.parsed) return;
+      this.$refs.stepper.setWaiting(true);
+
+      const { recording, traces } = this.parsed;
+
+      // Create the recording row, owned by the current user. Drop the
+      // original userId and socket references they're meaningless on
+      // this machine.
+      const recordingResult = await new Promise((resolve) => {
+        this.$socket.emit(
+          "appDataUpdate",
+          {
+            table: "recording",
+            data: {
+              name: recording.name ? `${recording.name} (imported)` : `Imported recording ${Date.now()}`,
+              status: recording.status || "finished",
+              startTime: recording.startTime,
+              endTime: recording.endTime,
+              userId: this.userId,
+              excludeEvents: recording.excludeEvents || null,
+              participantUserIds: null,
+              participantSocketIds: null,
+            },
+          },
+          (r) => resolve(r)
+        );
+      });
+
+      if (!recordingResult.success) {
+        this.$refs.stepper.setWaiting(false);
+        this.eventBus.emit("toast", {
+          title: "Import failed",
+          message: `Failed to create recording: ${recordingResult.message}`,
+          variant: "danger",
+        });
+        return;
+      }
+
+      const newRecordingId = recordingResult.data;
+      let successCount = 0;
+      let failCount = 0;
+
+      // Re-create each trace under the new recording ID.
+      for (const trace of traces) {
+        const traceResult = await new Promise((resolve) => {
+          this.$socket.emit(
+            "appDataUpdate",
+            {
+              table: "trace",
+              data: {
+                recordingId: newRecordingId,
+                userId: this.userId,
+                socketId: trace.socketId || null,
+                action: trace.action,
+                payload: trace.payload || null,
+                direction: trace.direction,
+                startTime: trace.startTime,
+                endTime: trace.endTime,
+              },
+            },
+            (r) => resolve(r)
+          );
+        });
+
+        if (traceResult.success) {
+          successCount++;
+        } else {
+          failCount++;
+        }
+      }
+
+      this.$refs.stepper.setWaiting(false);
+
+      if (failCount === 0) {
+        this.eventBus.emit("toast", {
+          title: "Import successful",
+          message: `Imported recording with ${successCount} trace(s)`,
+          variant: "success",
+        });
+      } else {
+        this.eventBus.emit("toast", {
+          title: "Import partial",
+          message: `Imported ${successCount} trace(s), ${failCount} failed`,
+          variant: "warning",
+        });
+      }
+      this.close();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.form-field {
+  display: flex;
+  align-items: center;
+  margin: 15px 0;
+}
+.form-field .form-label {
+  flex-shrink: 0;
+  margin-bottom: 0;
+  margin-right: 0.5rem;
+  min-width: 160px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/socketprofiler/RecordingModal.vue b/frontend/src/components/dashboard/socketprofiler/RecordingModal.vue
new file mode 100644
index 000000000..0f7797c0f
--- /dev/null
+++ b/frontend/src/components/dashboard/socketprofiler/RecordingModal.vue
@@ -0,0 +1,213 @@
+<template>
+  <BasicModal
+    ref="modal"
+    name="recordingModal"
+    size="lg"
+  >
+    <template #title>
+      Save Recording
+    </template>
+    <template #body>
+      <div class="mb-3">
+        <label class="form-label fw-bold">Recording Name</label>
+        <input
+          v-model="recordingName"
+          type="text"
+          class="form-control"
+          placeholder="Enter a name for this recording"
+        />
+      </div>
+      <div class="mb-3">
+        <label class="form-label fw-bold">Trace Events</label>
+        <p class="text-muted small">Select events you want to remove. Unselected events will be kept.</p>
+        <BasicTable
+          v-model="tracesToDelete"
+          :columns="traceColumns"
+          :data="traceTable"
+          :options="traceTableOptions"
+          :max-table-height="300"
+        />
+      </div>
+    </template>
+    <template #footer>
+      <BasicButton
+        class="btn-outline-danger me-auto"
+        text="Discard Recording"
+        @click="discard"
+      />
+      <BasicButton
+        class="btn-secondary"
+        text="Cancel"
+        @click="abort"
+      />
+      <BasicButton
+        class="btn-primary"
+        text="Save Recording"
+        @click="confirm"
+      />
+    </template>
+  </BasicModal>
+</template>
+
+<script>
+import BasicModal from "@/basic/Modal.vue";
+import BasicButton from "@/basic/Button.vue";
+import BasicTable from "@/basic/Table.vue";
+
+export default {
+  name: "RecordingModal",
+  components: { BasicModal, BasicButton, BasicTable },
+  data() {
+    return {
+      recordingId: null,
+      recordingName: "",
+      allTraces: [],
+      tracesToDelete: [],
+      traceTableOptions: {
+        striped: true,
+        hover: true,
+        bordered: false,
+        borderless: false,
+        small: true,
+        selectableRows: true,
+        onlyOneRowSelectable: false,
+        search: true,
+        pagination: 20,
+      },
+      traceColumns: [
+        { name: "Action", key: "action", sortable: true },
+        { name: "Direction", key: "directionLabel" },
+        { name: "Time", key: "timeDisplay", sortable: true },
+        { name: "Elapsed", key: "elapsedDisplay", sortable: true },
+      ],
+    };
+  },
+  computed: {
+    /**
+     * Look up the current recording row from the Vuex store so we can
+     * read its startTime. The row is kept reactively up to date by the
+     * `recording` table subscription on SocketProfiler.vue.
+     */
+    recording() {
+      if (!this.recordingId) return null;
+      const recordings = this.$store.getters["table/recording/getAll"] || [];
+      return recordings.find(r => r.id === this.recordingId) || null;
+    },
+    recordingStartMs() {
+      const rec = this.recording;
+      if (!rec || !rec.startTime) return null;
+      return new Date(rec.startTime).getTime();
+    },
+    traceTable() {
+      const startMs = this.recordingStartMs;
+      return this.allTraces.map(t => ({
+        ...t,
+        directionLabel: t.direction ? '→ backend' : '← frontend',
+        timeDisplay: this.formatAbsoluteTime(t.startTime),
+        elapsedDisplay: this.formatElapsed(t.startTime, startMs),
+      }));
+    },
+  },
+  methods: {
+    /**
+     * Format an absolute timestamp as HH:MM:SS in the user's local timezone.
+     */
+    formatAbsoluteTime(ts) {
+      if (!ts) return '-';
+      const d = new Date(ts);
+      const pad = (n) => String(n).padStart(2, '0');
+      return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+    },
+    /**
+     * Format a trace's offset from the recording start as +HH:MM:SS.
+     * Returns '-' if either timestamp is missing.
+     */
+    formatElapsed(traceTs, startMs) {
+      if (!traceTs || startMs === null) return '-';
+      const ms = new Date(traceTs).getTime() - startMs;
+      if (ms < 0) return '+00:00:00';
+      const totalSeconds = Math.floor(ms / 1000);
+      const hours = Math.floor(totalSeconds / 3600);
+      const minutes = Math.floor((totalSeconds % 3600) / 60);
+      const seconds = totalSeconds % 60;
+      const pad = (n) => String(n).padStart(2, '0');
+      return `+${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+    },
+    open(recordingId, traces) {
+      this.recordingId = recordingId;
+      this.recordingName = "Recording " + new Date().toLocaleString();
+      this.allTraces = traces;
+      this.tracesToDelete = [];
+      this.$refs.modal.open();
+    },
+    openForEdit(recordingId, currentName, traces) {
+      this.recordingId = recordingId;
+      this.recordingName = currentName || "";
+      this.allTraces = traces;
+      this.tracesToDelete = [];
+      this.$refs.modal.open();
+    },
+    abort() {
+      this.$refs.modal.close();
+    },
+    discard() {
+      this.$socket.emit("appDataUpdate", {
+        table: "recording",
+        data: { id: this.recordingId, deleted: true }
+      }, (res) => {
+        if (res.success) {
+          this.$refs.modal.close();
+          this.eventBus.emit("toast", {
+            title: "Recording discarded",
+            message: "Recording has been deleted",
+            variant: "warning",
+          });
+        } else {
+          this.eventBus.emit("toast", {
+            title: "Failed to discard recording",
+            message: res.message,
+            variant: "danger",
+          });
+        }
+      });
+    },
+    confirm() {
+      const tracesToDeleteCount = this.tracesToDelete.length;
+      let pendingOps = 1 + tracesToDeleteCount; // 1 for the rename, plus N trace deletions
+      let failed = false;
+
+      const onOpComplete = (res, opName) => {
+        pendingOps--;
+        if (!res.success && !failed) {
+          failed = true;
+          this.eventBus.emit("toast", {
+            title: "Failed to save recording",
+            message: `${opName}: ${res.message}`,
+            variant: "danger",
+          });
+        }
+        if (pendingOps === 0 && !failed) {
+          this.$refs.modal.close();
+          this.eventBus.emit("toast", {
+            title: "Recording saved",
+            message: "Recording has been saved successfully",
+            variant: "success",
+          });
+        }
+      };
+
+      this.$socket.emit("appDataUpdate", {
+        table: "recording",
+        data: { id: this.recordingId, name: this.recordingName }
+      }, (res) => onOpComplete(res, "rename"));
+
+      this.tracesToDelete.forEach(t => {
+        this.$socket.emit("appDataUpdate", {
+          table: "trace",
+          data: { id: t.id, deleted: true }
+        }, (res) => onOpComplete(res, `delete trace ${t.id}`));
+      });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/socketprofiler/ReplayResultsModal.vue b/frontend/src/components/dashboard/socketprofiler/ReplayResultsModal.vue
new file mode 100644
index 000000000..e25f3ddde
--- /dev/null
+++ b/frontend/src/components/dashboard/socketprofiler/ReplayResultsModal.vue
@@ -0,0 +1,246 @@
+<template>
+  <BasicModal
+    ref="modal"
+    name="replayResultsModal"
+    size="xl"
+  >
+    <template #title>
+      Replay Results
+    </template>
+    <template #body>
+      <!-- Top-level summary -->
+      <div class="d-flex gap-4 mb-3">
+        <div>
+          <span class="fw-bold">Iterations:</span> {{ summary.iterations }}
+        </div>
+        <div>
+          <span class="fw-bold">Total Traces:</span> {{ summary.total }}
+        </div>
+        <div>
+          <span class="fw-bold text-success">Passed:</span> {{ summary.passed }}
+        </div>
+        <div>
+          <span class="fw-bold text-danger">Failed:</span> {{ summary.failed }}
+        </div>
+      </div>
+
+      <!-- One section per iteration -->
+      <div v-for="iteration in results" :key="iteration.level" class="iteration-section mb-3 p-3">
+        <h5 :class="iteration.passed ? 'text-success' : 'text-danger'">
+          Iteration {{ iteration.level }} — {{ iteration.sessions }} parallel session(s) — {{ iteration.passed ? 'PASSED' : 'FAILED' }}
+        </h5>
+
+        <div v-for="(sessionResult, idx) in iteration.results" :key="idx" class="mb-3">
+          <p class="mb-1 fw-bold">
+            {{ sessionResult.userName }} (User ID: {{ sessionResult.userId }})
+            <span class="text-muted small">— from {{ sessionResult.recordingName || 'Recording ' + sessionResult.recordingId }}</span>
+            — {{ sessionResult.passed }}/{{ sessionResult.total }} passed
+          </p>
+          <BasicTable
+            :columns="traceColumns"
+            :data="mergeTraces(sessionResult, iteration.level, idx)"
+            :options="traceTableOptions"
+            :buttons="traceButtons"
+            :max-table-height="300"
+            @action="handleTraceAction"
+          />
+          <div
+            v-if="selectedTrace
+                  && selectedTraceLevel === iteration.level
+                  && selectedTraceSessionIdx === idx"
+            class="db-changes-panel mt-2 p-3"
+          >
+            <div class="d-flex justify-content-between align-items-center mb-2">
+              <span class="fw-bold">
+                DB Changes for: <code>{{ selectedTrace.action }}</code>
+              </span>
+              <BasicButton
+                class="btn-outline-secondary btn-sm"
+                text="Close"
+                icon="x"
+                @click="clearSelection"
+              />
+            </div>
+            <div v-if="selectedTrace.dbChanges && selectedTrace.dbChanges.length > 0">
+              <BasicTable
+                :columns="dbChangeColumns"
+                :data="selectedTrace.dbChanges.map((c, i) => ({
+                  id: i,
+                  table: c.table,
+                  recordIds: c.records ? c.records.map(r => r.id).join(', ') : '-',
+                  fields: c.records && c.records[0] ? c.records[0].fields.join(', ') : '-',
+                  recordCount: c.recordCount,
+                }))"
+                :options="dbChangeTableOptions"
+                :max-table-height="150"
+              />
+            </div>
+            <p v-else class="text-muted mb-0">No database changes for this trace.</p>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <BasicButton
+        class="btn-secondary"
+        text="Close"
+        @click="close"
+      />
+    </template>
+  </BasicModal>
+</template>
+
+<script>
+import BasicModal from "@/basic/Modal.vue";
+import BasicButton from "@/basic/Button.vue";
+import BasicTable from "@/basic/Table.vue";
+
+export default {
+  name: "ReplayResultsModal",
+  components: { BasicModal, BasicButton, BasicTable },
+  data() {
+    return {
+      results: [],
+      selectedTrace: null,
+      selectedTraceLevel: null,
+      selectedTraceSessionIdx: null,
+      traceTableOptions: {
+        striped: true,
+        hover: true,
+        bordered: false,
+        borderless: false,
+        small: true,
+        pagination: 20,
+        search: true,
+      },
+      traceColumns: [
+        { name: "#", key: "seq", sortable: true },
+        { name: "Action", key: "action", sortable: true },
+        {
+          name: "Status",
+          key: "status",
+          sortable: true,
+          filter: [
+            { key: "passed", name: "Passed" },
+            { key: "failed", name: "Failed" },
+          ],
+        },
+        { name: "Latency (ms)", key: "latencyDisplay", sortable: true },
+        { name: "Details", key: "message" },
+        { name: "DB", key: "hasDbChanges" },
+      ],
+      traceButtons: [
+        {
+          icon: "database",
+          options: {
+            iconOnly: true,
+            specifiers: {
+              "btn-outline-info": true,
+            },
+          },
+          title: "View DB changes",
+          action: "viewDbChanges",
+        },
+      ],
+      dbChangeColumns: [
+        { name: "Table", key: "table", sortable: true },
+        { name: "Record IDs", key: "recordIds" },
+        { name: "Fields Modified", key: "fields" },
+        { name: "Records", key: "recordCount", sortable: true },
+      ],
+      dbChangeTableOptions: {
+        striped: true,
+        hover: true,
+        bordered: false,
+        borderless: false,
+        small: true,
+      },
+    };
+  },
+  computed: {
+    summary() {
+      let total = 0;
+      let passed = 0;
+      let failed = 0;
+      for (const iteration of this.results) {
+        for (const r of (iteration.results || [])) {
+          total += r.total;
+          passed += r.passed;
+          failed += r.failed;
+        }
+      }
+      return { iterations: this.results.length, total, passed, failed };
+    },
+  },
+  methods: {
+    open(results) {
+      this.results = results || [];
+      this.selectedTrace = null;
+      this.selectedTraceLevel = null;
+      this.selectedTraceSessionIdx = null;
+      this.$refs.modal.open();
+    },
+    close() {
+      this.$refs.modal.close();
+    },
+    clearSelection() {
+      this.selectedTrace = null;
+      this.selectedTraceLevel = null;
+      this.selectedTraceSessionIdx = null;
+    },
+    handleTraceAction(data) {
+      if (data.action === "viewDbChanges") {
+        this.selectedTrace = data.params;
+        this.selectedTraceLevel = data.params.level;
+        this.selectedTraceSessionIdx = data.params.sessionIdx;
+      }
+    },
+    mergeTraces(sessionResult, level, sessionIdx) {
+      const all = [];
+      for (const l of (sessionResult.latencies || [])) {
+        all.push({
+          id: l.traceId,
+          action: l.action,
+          status: "passed",
+          latencyDisplay: l.latency + "ms",
+          message: "",
+          dbChanges: l.dbChanges || [],
+          hasDbChanges: (l.dbChanges && l.dbChanges.length > 0) ? "Yes" : "",
+          level,
+          sessionIdx,
+        });
+      }
+      for (const e of (sessionResult.errors || [])) {
+        all.push({
+          id: e.traceId || 0,
+          action: e.action,
+          status: "failed",
+          latencyDisplay: "-",
+          message: e.message,
+          dbChanges: e.dbChanges || [],
+          hasDbChanges: (e.dbChanges && e.dbChanges.length > 0) ? "Yes" : "",
+          level,
+          sessionIdx,
+        });
+      }
+      all.sort((a, b) => a.id - b.id);
+      all.forEach((t, i) => { t.seq = i + 1; });
+      return all;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.db-changes-panel {
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+}
+
+.iteration-section {
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  background-color: #fafafa;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/socketprofiler/StartRecordingModal.vue b/frontend/src/components/dashboard/socketprofiler/StartRecordingModal.vue
new file mode 100644
index 000000000..bc05c61c1
--- /dev/null
+++ b/frontend/src/components/dashboard/socketprofiler/StartRecordingModal.vue
@@ -0,0 +1,228 @@
+<template>
+  <BasicModal
+    ref="modal"
+    name="startRecordingModal"
+    size="lg"
+  >
+    <template #title>
+      Start Recording
+    </template>
+    <template #body>
+      
+      <div class="mb-3">
+        <label class="form-label fw-bold">Select Sessions to Record</label>
+        <p class="text-muted small">
+          Each row is one active connection. Only the selected sessions will be recorded.
+          New connections that appear during recording are not auto-included.
+        </p>
+        <BasicTable
+          v-model="selectedSessions"
+          :columns="sessionTableColumns"
+          :data="sessionTable"
+          :options="sessionTableOptions"
+          :max-table-height="250"
+        />
+      </div>
+      <div class="mb-3">
+        <label class="form-label fw-bold">Exclude Events</label>
+        <p class="text-muted small">
+          Checked events will not be recorded. Uncheck to include them.
+        </p>
+        <div class="exclude-list">
+          <div
+            v-for="event in defaultExcludeEvents"
+            :key="event"
+            class="form-check py-1"
+          >
+            <input
+              :id="'exclude-' + event"
+              v-model="excludeEvents"
+              :value="event"
+              type="checkbox"
+              class="form-check-input"
+            />
+            <label class="form-check-label" :for="'exclude-' + event">
+              <code>{{ event }}</code>
+            </label>
+          </div>
+        </div>
+        <div class="mt-2 d-flex gap-2">
+          <input
+            v-model="customExcludeEvent"
+            type="text"
+            class="form-control form-control-sm"
+            placeholder="Add custom event name to exclude"
+            @keyup.enter="addCustomExclude"
+          />
+          <BasicButton
+            class="btn-outline-secondary btn-sm"
+            text="Add"
+            @click="addCustomExclude"
+          />
+        </div>
+        <div v-if="customExcludes.length > 0" class="mt-2">
+          <span
+            v-for="event in customExcludes"
+            :key="event"
+            class="badge bg-secondary me-1"
+          >
+            {{ event }}
+            <span class="ms-1 cursor-pointer" @click="removeCustomExclude(event)">×</span>
+          </span>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <BasicButton
+        class="btn-secondary"
+        text="Cancel"
+        @click="abort"
+      />
+      <BasicButton
+        class="btn-primary"
+        :text="startButtonText"
+        :disabled="selectedSessions.length === 0"
+        @click="confirm"
+      />
+    </template>
+  </BasicModal>
+</template>
+
+<script>
+import BasicModal from "@/basic/Modal.vue";
+import BasicButton from "@/basic/Button.vue";
+import BasicTable from "@/basic/Table.vue";
+
+export default {
+  name: "StartRecordingModal",
+  components: { BasicModal, BasicButton, BasicTable },
+  data() {
+    return {
+      selectedSessions: [],
+      onlineSessions: [], // [{socketId, userId, userName, connectedAt}]
+      excludeEvents: ["stats", "subscribeAppData", "unsubscribeAppData"],
+      customExcludeEvent: "",
+      customExcludes: [],
+      defaultExcludeEvents: [
+        "stats",
+        "subscribeAppData",
+        "unsubscribeAppData",
+      ],
+      sessionTableOptions: {
+        striped: true,
+        hover: true,
+        bordered: false,
+        borderless: false,
+        small: false,
+        selectableRows: true,
+        onlyOneRowSelectable: false,
+        search: true,
+      },
+    };
+  },
+  computed: {
+    currentUserId() {
+      return this.$store.getters["auth/getUserId"];
+    },
+    currentSocketId() {
+      return this.$socket.id;
+    },
+    sessionTable() {
+      return this.onlineSessions.map(s => ({
+        ...s,
+        // BasicTable likely needs a unique `id` field for selection tracking
+        id: s.socketId,
+        socketIdShort: s.socketId ? s.socketId.substring(0, 8) + "…" : "",
+        connectedAtDisplay: s.connectedAt ? new Date(s.connectedAt).toLocaleTimeString() : "—",
+        isCurrent: s.socketId === this.currentSocketId ? "(this tab)" : "",
+      }));
+    },
+    sessionTableColumns() {
+      return [
+        { name: "User ID", key: "userId", sortable: true },
+        { name: "Username", key: "userName", sortable: true },
+        { name: "Session", key: "socketIdShort" },
+        { name: "Connected", key: "connectedAtDisplay" },
+        { name: "", key: "isCurrent" },
+      ];
+    },
+    startButtonText() {
+      return "Record " + this.selectedSessions.length + " Session(s)";
+    },
+    allExcludeEvents() {
+      return [...this.excludeEvents, ...this.customExcludes];
+    },
+  },
+  methods: {
+    open() {
+      this.selectedSessions = [];
+      this.onlineSessions = [];
+      this.excludeEvents = ["stats", "subscribeAppData", "unsubscribeAppData"];
+      this.customExcludeEvent = "";
+      this.customExcludes = [];
+
+      this.$socket.emit("recordingGetOnlineSessions", {}, (res) => {
+        if (res.success) {
+          this.onlineSessions = res.data || [];
+        }
+        // Pre-select the current tab's session AFTER onlineSessions is set,
+        // so sessionTable is stable and the object reference matches.
+        const ownRow = this.sessionTable.find(s => s.socketId === this.currentSocketId);
+        if (ownRow) {
+          this.selectedSessions = [ownRow];
+        }
+      });
+
+      this.$refs.modal.open();
+    },
+    abort() {
+      this.$refs.modal.close();
+    },
+    addCustomExclude() {
+      const event = this.customExcludeEvent.trim();
+      if (event && !this.customExcludes.includes(event) && !this.defaultExcludeEvents.includes(event)) {
+        this.customExcludes.push(event);
+      }
+      this.customExcludeEvent = "";
+    },
+    removeCustomExclude(event) {
+      this.customExcludes = this.customExcludes.filter(e => e !== event);
+    },
+    confirm() {
+      const participantSocketIds = this.selectedSessions.map(s => s.socketId);
+
+      this.$socket.emit("recorderStart", {
+        participantSocketIds,
+        excludeEvents: this.allExcludeEvents,
+      }, (res) => {
+        if (res.success) {
+          this.$refs.modal.close();
+          this.eventBus.emit("toast", {
+            title: "Recording started",
+            message: "Recording " + this.selectedSessions.length + " session(s), excluding " + this.allExcludeEvents.length + " event type(s)",
+            variant: "success",
+          });
+        } else {
+          this.eventBus.emit("toast", {
+            title: "Failed to start recording",
+            message: res.message,
+            variant: "danger",
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.exclude-list {
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/socketprofiler/StartReplayModal.vue b/frontend/src/components/dashboard/socketprofiler/StartReplayModal.vue
new file mode 100644
index 000000000..877dca848
--- /dev/null
+++ b/frontend/src/components/dashboard/socketprofiler/StartReplayModal.vue
@@ -0,0 +1,231 @@
+<template>
+  <BasicModal
+    ref="modal"
+    name="startReplayModal"
+    size="lg"
+  >
+    <template #title>
+      Start Replay
+    </template>
+    <template #body>
+      <BasicForm
+        v-model="config"
+        :fields="configFields"
+      />
+
+      <div v-if="loadEstimate" class="text-muted small mt-1 mb-3">
+        Pool size: <span class="fw-bold">{{ loadEstimate.poolSize }}</span> session(s).
+        Peak: <span class="fw-bold">{{ loadEstimate.peak }}</span> parallel socket(s) at iteration {{ config.maxIterations }}.
+        Cumulative: <span class="fw-bold">{{ loadEstimate.cumulative }}</span> total socket-runs across the whole replay.
+      </div>
+      <div v-else-if="config.maxIterations !== null && config.maxIterations !== ''" class="text-danger small mt-1 mb-3">
+        Enter a positive integer for max iterations.
+      </div>
+
+      <div class="mb-3">
+        <label class="form-label fw-bold">Recordings to replay</label>
+        <p class="text-muted small">
+          The recording you clicked is pre-selected. Selected recordings' sessions are
+          combined into one pool — iteration K runs K full copies of that pool in parallel.
+        </p>
+        <BasicTable
+          v-model="selectedRecordings"
+          :columns="recordingTableColumns"
+          :data="recordingTable"
+          :options="recordingTableOptions"
+          :max-table-height="220"
+        />
+      </div>
+    </template>
+    <template #footer>
+      <BasicButton
+        class="btn-secondary"
+        text="Cancel"
+        @click="abort"
+      />
+      <BasicButton
+        class="btn-primary"
+        :text="startButtonText"
+        :disabled="!canStart"
+        @click="confirm"
+      />
+    </template>
+  </BasicModal>
+</template>
+
+<script>
+import BasicModal from "@/basic/Modal.vue";
+import BasicButton from "@/basic/Button.vue";
+import BasicTable from "@/basic/Table.vue";
+import BasicForm from "@/basic/Form.vue";
+
+export default {
+  name: "StartReplayModal",
+  components: { BasicModal, BasicButton, BasicTable, BasicForm },
+  emits: ["replay-start"],
+  data() {
+    return {
+      config: {
+        mode: "scaling",
+        timingMode: "fast",
+        maxIterations: null,
+        ackTimeout: 2000,
+        continueOnFailure: false,
+      },
+      selectedRecordings: [],
+      initialRecordingId: null,
+      recordingTableOptions: {
+        striped: true,
+        hover: true,
+        bordered: false,
+        borderless: false,
+        small: false,
+        selectableRows: true,
+        onlyOneRowSelectable: false,
+        search: true,
+      },
+    };
+  },
+  computed: {
+    configFields() {
+      return [
+        {
+          key: "mode",
+          label: "Mode",
+          type: "select",
+          default: "scaling",
+          options: [
+            { value: "scaling", name: "Scaling — pool sessions, add one full pool per iteration" },
+            { value: "load", name: "Load mode (coming soon)", disabled: true },
+          ],
+        },
+        {
+          key: "timingMode",
+          label: "Speed",
+          type: "select",
+          default: "fast",
+          options: [
+            { value: "fast", name: "Fast — no delays between traces" },
+            { value: "realtime", name: "Realtime — preserve original timing within each session" },
+          ],
+        },
+        {
+          key: "maxIterations",
+          label: "Max iterations",
+          type: "number",
+          min: 1,
+          required: true,
+          placeholder: "Enter a positive integer (required)",
+        },
+        {
+          key: "ackTimeout",
+          label: "Ack timeout (ms)",
+          type: "number",
+          min: 100,
+          default: 2000,
+        },
+        {
+          key: "continueOnFailure",
+          label: "Continue past failures",
+          type: "switch",
+          default: false,
+        },
+      ];
+    },
+    allRecordings() {
+      return this.$store.getters["table/recording/getAll"] || [];
+    },
+    finishedRecordings() {
+      return this.allRecordings.filter(r => r.status === "finished" && !r.deleted);
+    },
+    recordingTable() {
+      return this.finishedRecordings.map(r => ({
+        ...r,
+        startTimeDisplay: r.startTime ? new Date(r.startTime).toLocaleString() : "-",
+        endTimeDisplay: r.endTime ? new Date(r.endTime).toLocaleString() : "-",
+        sessionCount: Array.isArray(r.participantSocketIds) ? r.participantSocketIds.length : 0,
+      }));
+    },
+    recordingTableColumns() {
+      return [
+        { name: "ID", key: "id", sortable: true },
+        { name: "Name", key: "name", sortable: true },
+        { name: "Sessions", key: "sessionCount", sortable: true },
+        { name: "Start Time", key: "startTimeDisplay" },
+        { name: "End Time", key: "endTimeDisplay" },
+      ];
+    },
+    isMaxIterationsValid() {
+      return Number.isInteger(this.config.maxIterations) && this.config.maxIterations >= 1;
+    },
+    isAckTimeoutValid() {
+      return Number.isInteger(this.config.ackTimeout)
+        && this.config.ackTimeout >= 100
+        && this.config.ackTimeout <= 30000;
+    },
+    canStart() {
+      return this.selectedRecordings.length > 0
+        && this.isMaxIterationsValid
+        && this.isAckTimeoutValid;
+    },
+    /**
+     * Pooled scaling math.
+     * N = total session count across all selected recordings.
+     * Iteration K runs K * N parallel sockets.
+     * Peak = M * N (final iteration). Cumulative = N * M(M+1)/2.
+     * Returns null if input isn't valid yet.
+     */
+    loadEstimate() {
+      if (!this.isMaxIterationsValid) return null;
+      if (this.selectedRecordings.length === 0) return null;
+      const M = this.config.maxIterations;
+      const N = this.selectedRecordings.reduce((acc, r) => acc + (r.sessionCount || 0), 0);
+      if (N === 0) return null;
+      return {
+        poolSize: N,
+        peak: M * N,
+        cumulative: N * M * (M + 1) / 2,
+      };
+    },
+    startButtonText() {
+      const n = this.selectedRecordings.length;
+      return n <= 1 ? "Start Replay" : `Start Replay (${n} recordings)`;
+    },
+  },
+  methods: {
+    open(recordingId) {
+      this.config = {
+        mode: "scaling",
+        timingMode: "fast",
+        maxIterations: null,
+        ackTimeout: 2000,
+        continueOnFailure: false,
+      };
+      this.initialRecordingId = recordingId;
+
+      // Pre-select the clicked recording once the table has rendered so the
+      // row reference matches what BasicTable holds.
+      this.$nextTick(() => {
+        const initial = this.recordingTable.find(r => r.id === recordingId);
+        this.selectedRecordings = initial ? [initial] : [];
+      });
+
+      this.$refs.modal.open();
+    },
+    abort() {
+      this.$refs.modal.close();
+    },
+    confirm() {
+      const recordingIds = this.selectedRecordings.map(r => r.id);
+      this.$emit("replay-start", {
+        recordingIds,
+        timingMode: this.config.timingMode,
+        continueOnFailure: this.config.continueOnFailure,
+        maxIterations: this.config.maxIterations,
+        ackTimeout: this.config.ackTimeout,
+      });
+      this.$refs.modal.close();
+    },
+  },
+};
+</script>
\ No newline at end of file