diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000000000..298aa7585765f
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+.eslintrc.js
+jest.config.ts
diff --git a/.eslintrc.js b/.eslintrc.js
index d8a5b12f00f24..e9434574a73f2 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -54,6 +54,7 @@ module.exports = {
         'compat',
         'posthog',
         'simple-import-sort',
+        'import',
     ],
     rules: {
         'no-console': ['error', { allow: ['warn', 'error'] }],
@@ -261,6 +262,19 @@ module.exports = {
         'no-constant-condition': 'off',
         'no-prototype-builtins': 'off',
         'no-irregular-whitespace': 'off',
+        'import/no-restricted-paths': [
+            'error',
+            {
+                zones: [
+                    {
+                        target: './frontend/**',
+                        from: './ee/frontend/**',
+                        message:
+                            "EE licensed TypeScript should only be accessed via the posthogEE objects. Use `import posthogEE from '@posthog/ee/exports'`",
+                    },
+                ],
+            },
+        ],
     },
     overrides: [
         {
diff --git a/.github/workflows/ci-e2e.yml b/.github/workflows/ci-e2e.yml
index f97a6f4bb85cc..ca6ad9d5dcfa0 100644
--- a/.github/workflows/ci-e2e.yml
+++ b/.github/workflows/ci-e2e.yml
@@ -171,7 +171,7 @@ jobs:
               if: needs.changes.outputs.shouldTriggerCypress == 'true'
               uses: depot/pull-action@v1
               with:
-                  build-id: ${{ needs.container.outputs.build-id }} # TODO: Use unit-build-id when the Unit image works
+                  build-id: ${{ needs.container.outputs.unit-build-id }}
                   tags: ${{ needs.container.outputs.tag }}
 
             - name: Write .env # This step intentionally has no if, so that GH always considers the action as having run
@@ -196,6 +196,7 @@ jobs:
                   OBJECT_STORAGE_ACCESS_KEY_ID=object_storage_root_user
                   OBJECT_STORAGE_SECRET_ACCESS_KEY=object_storage_root_password
                   GITHUB_ACTION_RUN_URL="${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}"
+                  CELERY_METRICS_PORT=8999
                   EOT
 
             - name: Start PostHog
diff --git a/.github/workflows/ci-frontend.yml b/.github/workflows/ci-frontend.yml
index c586598152fd6..7d49cd5c23cf6 100644
--- a/.github/workflows/ci-frontend.yml
+++ b/.github/workflows/ci-frontend.yml
@@ -107,6 +107,10 @@ jobs:
               if: needs.changes.outputs.frontend == 'true'
               run: pnpm schema:build:json && git diff --exit-code
 
+            - name: Check if mobile replay "schema.json" is up to date
+              if: needs.changes.outputs.frontend == 'true'
+              run: pnpm mobile-replay:schema:build:json && git diff --exit-code
+
             - name: Check toolbar bundle size
               if: needs.changes.outputs.frontend == 'true'
               uses: preactjs/compressed-size-action@v2
diff --git a/.run/PostHog.run.xml b/.run/PostHog.run.xml
index df41d468add82..b36e0c48a93dc 100644
--- a/.run/PostHog.run.xml
+++ b/.run/PostHog.run.xml
@@ -17,7 +17,7 @@
       <env name="PYTHONUNBUFFERED" value="1" />
       <env name="SESSION_RECORDING_KAFKA_COMPRESSION" value="gzip" />
       <env name="SESSION_RECORDING_KAFKA_HOSTS" value="localhost" />
-      <env name="SESSION_RECORDING_KAFKA_MAX_REQUEST_SIZE_BYTES" value="524288" />
+      <env name="SESSION_RECORDING_KAFKA_MAX_REQUEST_SIZE_BYTES" value="20971520" />
       <env name="SKIP_SERVICE_VERSION_REQUIREMENTS" value="1" />
       <env name="REPLAY_EVENTS_NEW_CONSUMER_RATIO" value="1" />
     </envs>
@@ -48,4 +48,4 @@
     <option name="customRunCommand" value="" />
     <method v="2" />
   </configuration>
-</component>
\ No newline at end of file
+</component>
diff --git a/ee/frontend/exports.ts b/ee/frontend/exports.ts
index 29d80016d730c..d973463019b7f 100644
--- a/ee/frontend/exports.ts
+++ b/ee/frontend/exports.ts
@@ -1,13 +1,12 @@
 import { PostHogEE } from '@posthog/ee/types'
 
-const myTestCode = (): void => {
-    // eslint-disable-next-line no-console
-    console.log('it works!')
-}
+import { transformEventToWeb, transformToWeb } from './mobile-replay'
 
-const postHogEE: PostHogEE = {
-    enabled: true,
-    myTestCode,
-}
-
-export default postHogEE
+export default async (): Promise<PostHogEE> =>
+    Promise.resolve({
+        enabled: true,
+        mobileReplay: {
+            transformEventToWeb,
+            transformToWeb,
+        },
+    })
diff --git a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap
new file mode 100644
index 0000000000000..0d5adb4440b23
--- /dev/null
+++ b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap
@@ -0,0 +1,429 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`replay/transform transform can convert images 1`] = `
+[
+  {
+    "data": {
+      "height": 600,
+      "href": "",
+      "width": 300,
+    },
+    "timestamp": 1,
+    "type": 4,
+  },
+  {
+    "data": {
+      "initialOffset": {
+        "left": 0,
+        "top": 0,
+      },
+      "node": {
+        "childNodes": [
+          {
+            "id": 2,
+            "name": "html",
+            "publicId": "",
+            "systemId": "",
+            "type": 1,
+          },
+          {
+            "attributes": {},
+            "childNodes": [
+              {
+                "attributes": {},
+                "childNodes": [],
+                "id": 4,
+                "tagName": "head",
+                "type": 2,
+              },
+              {
+                "attributes": {},
+                "childNodes": [
+                  {
+                    "attributes": {},
+                    "childNodes": [
+                      {
+                        "attributes": {
+                          "style": "color: #ffffff;width: 100px;height: 30px;position: absolute;left: 11px;top: 12px;overflow:hidden;white-space:nowrap;",
+                        },
+                        "childNodes": [
+                          {
+                            "id": 12345,
+                            "textContent": "Ⱏ遲䩞㡛쓯잘ጫ䵤㥦鷁끞鈅毅┌빯湌Თ",
+                            "type": 3,
+                          },
+                        ],
+                        "id": 102,
+                        "tagName": "div",
+                        "type": 2,
+                      },
+                      {
+                        "attributes": {
+                          "height": 30,
+                          "src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=",
+                          "style": "width: 100px;height: 30px;position: absolute;left: 25px;top: 42px;",
+                          "width": 100,
+                        },
+                        "childNodes": [],
+                        "id": 12345,
+                        "tagName": "img",
+                        "type": 2,
+                      },
+                    ],
+                    "id": 101,
+                    "tagName": "div",
+                    "type": 2,
+                  },
+                ],
+                "id": 5,
+                "tagName": "body",
+                "type": 2,
+              },
+            ],
+            "id": 3,
+            "tagName": "html",
+            "type": 2,
+          },
+        ],
+        "id": 1,
+        "type": 0,
+      },
+    },
+    "timestamp": 1,
+    "type": 2,
+  },
+]
+`;
+
+exports[`replay/transform transform can convert rect with text 1`] = `
+[
+  {
+    "data": {
+      "height": 600,
+      "href": "",
+      "width": 300,
+    },
+    "timestamp": 1,
+    "type": 4,
+  },
+  {
+    "data": {
+      "initialOffset": {
+        "left": 0,
+        "top": 0,
+      },
+      "node": {
+        "childNodes": [
+          {
+            "id": 2,
+            "name": "html",
+            "publicId": "",
+            "systemId": "",
+            "type": 1,
+          },
+          {
+            "attributes": {},
+            "childNodes": [
+              {
+                "attributes": {},
+                "childNodes": [],
+                "id": 4,
+                "tagName": "head",
+                "type": 2,
+              },
+              {
+                "attributes": {},
+                "childNodes": [
+                  {
+                    "attributes": {},
+                    "childNodes": [
+                      {
+                        "attributes": {
+                          "style": "width: 100px;height: 30px;position: absolute;left: 11px;top: 12px;",
+                          "viewBox": "0 0 100 30",
+                        },
+                        "childNodes": [
+                          {
+                            "attributes": {
+                              "fill": "transparent",
+                              "height": 30,
+                              "rx": "10px",
+                              "stroke": "#ee3ee4",
+                              "stroke-width": "4",
+                              "width": 100,
+                              "x": 0,
+                              "y": 0,
+                            },
+                            "childNodes": [],
+                            "id": 104,
+                            "tagName": "rect",
+                            "type": 2,
+                          },
+                        ],
+                        "id": 12345,
+                        "tagName": "svg",
+                        "type": 2,
+                      },
+                      {
+                        "attributes": {
+                          "style": "width: 100px;height: 30px;position: absolute;left: 13px;top: 17px;overflow:hidden;white-space:nowrap;",
+                        },
+                        "childNodes": [
+                          {
+                            "id": 12345,
+                            "textContent": "i am in the box",
+                            "type": 3,
+                          },
+                        ],
+                        "id": 105,
+                        "tagName": "div",
+                        "type": 2,
+                      },
+                    ],
+                    "id": 103,
+                    "tagName": "div",
+                    "type": 2,
+                  },
+                ],
+                "id": 5,
+                "tagName": "body",
+                "type": 2,
+              },
+            ],
+            "id": 3,
+            "tagName": "html",
+            "type": 2,
+          },
+        ],
+        "id": 1,
+        "type": 0,
+      },
+    },
+    "timestamp": 1,
+    "type": 2,
+  },
+]
+`;
+
+exports[`replay/transform transform can ignore unknown wireframe types 1`] = `
+[
+  {
+    "data": {
+      "height": 600,
+      "href": "",
+      "width": 300,
+    },
+    "timestamp": 1,
+    "type": 4,
+  },
+  {
+    "data": {
+      "initialOffset": {
+        "left": 0,
+        "top": 0,
+      },
+      "node": {
+        "childNodes": [
+          {
+            "id": 2,
+            "name": "html",
+            "publicId": "",
+            "systemId": "",
+            "type": 1,
+          },
+          {
+            "attributes": {},
+            "childNodes": [
+              {
+                "attributes": {},
+                "childNodes": [],
+                "id": 4,
+                "tagName": "head",
+                "type": 2,
+              },
+              {
+                "attributes": {},
+                "childNodes": [
+                  {
+                    "attributes": {},
+                    "childNodes": [],
+                    "id": 100,
+                    "tagName": "div",
+                    "type": 2,
+                  },
+                ],
+                "id": 5,
+                "tagName": "body",
+                "type": 2,
+              },
+            ],
+            "id": 3,
+            "tagName": "html",
+            "type": 2,
+          },
+        ],
+        "id": 1,
+        "type": 0,
+      },
+    },
+    "timestamp": 1,
+    "type": 2,
+  },
+]
+`;
+
+exports[`replay/transform transform can short-circuit non-mobile full snapshot 1`] = `
+[
+  {
+    "data": {
+      "height": 600,
+      "href": "https://my-awesome.site",
+      "width": 300,
+    },
+    "timestamp": 1,
+    "type": 4,
+  },
+  {
+    "data": {
+      "node": {
+        "the": "payload",
+      },
+    },
+    "timestamp": 1,
+    "type": 2,
+  },
+]
+`;
+
+exports[`replay/transform transform child wireframes are processed 1`] = `
+[
+  {
+    "data": {
+      "height": 600,
+      "href": "",
+      "width": 300,
+    },
+    "timestamp": 1,
+    "type": 4,
+  },
+  {
+    "data": {
+      "initialOffset": {
+        "left": 0,
+        "top": 0,
+      },
+      "node": {
+        "childNodes": [
+          {
+            "id": 2,
+            "name": "html",
+            "publicId": "",
+            "systemId": "",
+            "type": 1,
+          },
+          {
+            "attributes": {},
+            "childNodes": [
+              {
+                "attributes": {},
+                "childNodes": [],
+                "id": 4,
+                "tagName": "head",
+                "type": 2,
+              },
+              {
+                "attributes": {},
+                "childNodes": [
+                  {
+                    "attributes": {},
+                    "childNodes": [
+                      {
+                        "attributes": {
+                          "style": "overflow:hidden;white-space:nowrap;",
+                        },
+                        "childNodes": [
+                          {
+                            "attributes": {
+                              "style": "overflow:hidden;white-space:nowrap;",
+                            },
+                            "childNodes": [
+                              {
+                                "attributes": {
+                                  "style": "color: #ffffff;background-color: #000000;border-width: 4px;border-radius: 10px;border-color: #000ddd;border-style: solid;width: 100px;height: 30px;position: absolute;left: 11px;top: 12px;overflow:hidden;white-space:nowrap;",
+                                },
+                                "childNodes": [
+                                  {
+                                    "id": 12345,
+                                    "textContent": "first nested",
+                                    "type": 3,
+                                  },
+                                ],
+                                "id": 107,
+                                "tagName": "div",
+                                "type": 2,
+                              },
+                              {
+                                "attributes": {
+                                  "style": "color: #ffffff;background-color: #000000;border-width: 4px;border-radius: 10px;border-color: #000ddd;border-style: solid;width: 100px;height: 30px;position: absolute;left: 11px;top: 12px;overflow:hidden;white-space:nowrap;",
+                                },
+                                "childNodes": [
+                                  {
+                                    "id": 12345,
+                                    "textContent": "second nested",
+                                    "type": 3,
+                                  },
+                                ],
+                                "id": 108,
+                                "tagName": "div",
+                                "type": 2,
+                              },
+                            ],
+                            "id": 98765,
+                            "tagName": "div",
+                            "type": 2,
+                          },
+                          {
+                            "attributes": {
+                              "style": "color: #ffffff;background-color: #000000;border-width: 4px;border-radius: 10px;border-color: #000ddd;border-style: solid;width: 100px;height: 30px;position: absolute;left: 11px;top: 12px;overflow:hidden;white-space:nowrap;",
+                            },
+                            "childNodes": [
+                              {
+                                "id": 12345,
+                                "textContent": "third (different level) nested",
+                                "type": 3,
+                              },
+                            ],
+                            "id": 109,
+                            "tagName": "div",
+                            "type": 2,
+                          },
+                        ],
+                        "id": 123456789,
+                        "tagName": "div",
+                        "type": 2,
+                      },
+                    ],
+                    "id": 106,
+                    "tagName": "div",
+                    "type": 2,
+                  },
+                ],
+                "id": 5,
+                "tagName": "body",
+                "type": 2,
+              },
+            ],
+            "id": 3,
+            "tagName": "html",
+            "type": 2,
+          },
+        ],
+        "id": 1,
+        "type": 0,
+      },
+    },
+    "timestamp": 1,
+    "type": 2,
+  },
+]
+`;
diff --git a/ee/frontend/mobile-replay/index.ts b/ee/frontend/mobile-replay/index.ts
new file mode 100644
index 0000000000000..25fa125265ef4
--- /dev/null
+++ b/ee/frontend/mobile-replay/index.ts
@@ -0,0 +1,73 @@
+import { eventWithTime } from '@rrweb/types'
+import Ajv, { ErrorObject } from 'ajv'
+
+import { mobileEventWithTime } from './mobile.types'
+import mobileSchema from './schema/mobile/rr-mobile-schema.json'
+import webSchema from './schema/web/rr-web-schema.json'
+import { makeFullEvent, makeMetaEvent } from './transformers'
+
+const ajv = new Ajv({
+    allowUnionTypes: true,
+}) // options can be passed, e.g. {allErrors: true}
+
+const transformers: Record<number, (x: any) => eventWithTime> = {
+    4: makeMetaEvent,
+    2: makeFullEvent,
+}
+
+const mobileSchemaValidator = ajv.compile(mobileSchema)
+
+export function validateFromMobile(data: unknown): {
+    isValid: boolean
+    errors: ErrorObject[] | null | undefined
+} {
+    const isValid = mobileSchemaValidator(data)
+    return {
+        isValid,
+        errors: isValid ? null : mobileSchemaValidator.errors,
+    }
+}
+
+const webSchemaValidator = ajv.compile(webSchema)
+
+function couldBeEventWithTime(x: unknown): x is eventWithTime | mobileEventWithTime {
+    return typeof x === 'object' && x !== null && 'type' in x && 'timestamp' in x
+}
+
+export function transformEventToWeb(event: unknown): eventWithTime | null {
+    if (!couldBeEventWithTime(event)) {
+        console.warn(`No type in event: ${JSON.stringify(event)}`)
+        return null
+    }
+
+    const transformer = transformers[event.type]
+    if (transformer) {
+        const transformed = transformer(event)
+        validateAgainstWebSchema(transformed)
+        return transformed
+    } else {
+        console.warn(`No transformer for event type ${event.type}`)
+        return event as eventWithTime
+    }
+}
+
+export function transformToWeb(mobileData: (eventWithTime | mobileEventWithTime)[]): eventWithTime[] {
+    return mobileData.reduce((acc, event) => {
+        const transformed = transformEventToWeb(event)
+        if (transformed) {
+            acc.push(transformed)
+        }
+        return acc
+    }, [] as eventWithTime[])
+}
+
+export function validateAgainstWebSchema(data: unknown): boolean {
+    const validationResult = webSchemaValidator(data)
+    if (!validationResult) {
+        // we are passing all data through this validation now and don't know how safe the schema is
+        // TODO would we ever want to reject here?
+        console.error(webSchemaValidator.errors)
+    }
+
+    return validationResult
+}
diff --git a/ee/frontend/mobile-replay/mobile.types.ts b/ee/frontend/mobile-replay/mobile.types.ts
new file mode 100644
index 0000000000000..a6c0958efe5b6
--- /dev/null
+++ b/ee/frontend/mobile-replay/mobile.types.ts
@@ -0,0 +1,172 @@
+// copied from rrweb-snapshot, not included in rrweb types
+import { customEvent, EventType } from '@rrweb/types'
+
+export enum NodeType {
+    Document = 0,
+    DocumentType = 1,
+    Element = 2,
+    Text = 3,
+    CDATA = 4,
+    Comment = 5,
+}
+
+export type documentNode = {
+    type: NodeType.Document
+    childNodes: serializedNodeWithId[]
+    compatMode?: string
+}
+
+export type documentTypeNode = {
+    type: NodeType.DocumentType
+    name: string
+    publicId: string
+    systemId: string
+}
+
+export type attributes = {
+    [key: string]: string | number | true | null
+}
+
+export type elementNode = {
+    type: NodeType.Element
+    tagName: string
+    attributes: attributes
+    childNodes: serializedNodeWithId[]
+    isSVG?: true
+    needBlock?: boolean
+    // This is a custom element or not.
+    isCustom?: true
+}
+
+export type textNode = {
+    type: NodeType.Text
+    textContent: string
+    isStyle?: true
+}
+
+export type cdataNode = {
+    type: NodeType.CDATA
+    textContent: ''
+}
+
+export type commentNode = {
+    type: NodeType.Comment
+    textContent: string
+}
+
+export type serializedNode = (documentNode | documentTypeNode | elementNode | textNode | cdataNode | commentNode) & {
+    rootId?: number
+    isShadowHost?: boolean
+    isShadow?: boolean
+}
+
+export type serializedNodeWithId = serializedNode & { id: number }
+
+// end copied section
+
+export type MobileNodeType = 'text' | 'image' | 'rectangle' | 'div'
+
+export type MobileStyles = {
+    /**
+     * @description maps to CSS color. Accepts any valid CSS color value. Expects a #RGB value e.g. #000 or #000000
+     */
+    color?: string
+    /**
+     * @description maps to CSS background-color. Accepts any valid CSS color value. Expects a #RGB value e.g. #000 or #000000
+     */
+    backgroundColor?: string
+    /**
+     * @description if borderWidth is present, then border style is assumed to be solid
+     */
+    borderWidth?: string | number
+    /**
+     * @description if borderRadius is present, then border style is assumed to be solid
+     */
+    borderRadius?: string | number
+    /**
+     * @description if borderColor is present, then border style is assumed to be solid
+     */
+    borderColor?: string
+    /**
+     * @description vertical alignment with respect to its parent
+     */
+    verticalAlign?: 'top' | 'bottom' | 'center'
+    /**
+     * @description horizontal alignment with respect to its parent
+     */
+    horizontalAlign?: 'left' | 'right' | 'center'
+}
+
+type wireframeBase = {
+    id: number
+    /**
+     * @description x and y are the top left corner of the element, if they are present then the element is absolutely positioned, if they are not present this is equivalent to setting them to 0
+     */
+    x: number
+    y: number
+    /*
+     * @description width and height are the dimensions of the element, the only accepted units is pixels. You can omit the unit.
+     */
+    width: number
+    height: number
+    childWireframes?: wireframe[]
+    type: MobileNodeType
+    style?: MobileStyles
+}
+
+export type wireframeText = wireframeBase & {
+    type: 'text'
+    text: string
+}
+
+export type wireframeImage = wireframeBase & {
+    type: 'image'
+    /**
+     * @description this will be used as base64 encoded image source, with no other attributes it is assumed to be a PNG
+     */
+    base64: string
+}
+
+export type wireframeRectangle = wireframeBase & {
+    type: 'rectangle'
+}
+
+export type wireframeDiv = wireframeBase & {
+    /*
+     * @description this is the default type, if no type is specified then it is assumed to be a div
+     */
+    type: 'div'
+}
+
+export type wireframe = wireframeText | wireframeImage | wireframeRectangle | wireframeDiv
+
+// the rrweb full snapshot event type, but it contains wireframes not html
+export type fullSnapshotEvent = {
+    type: EventType.FullSnapshot
+    data: {
+        /**
+         * @description This mimics the RRWeb full snapshot event type, except instead of reporting a serialized DOM it reports a wireframe representation of the screen.
+         */
+        wireframes: wireframe[]
+        initialOffset: {
+            top: number
+            left: number
+        }
+    }
+}
+
+export type metaEvent = {
+    type: EventType.Meta
+    data: {
+        href?: string
+        width: number
+        height: number
+    }
+}
+
+export type mobileEvent = fullSnapshotEvent | metaEvent | customEvent
+
+export type mobileEventWithTime = mobileEvent & {
+    timestamp: number
+    delay?: number
+}
diff --git a/ee/frontend/mobile-replay/schema/mobile/rr-mobile-schema.json b/ee/frontend/mobile-replay/schema/mobile/rr-mobile-schema.json
new file mode 100644
index 0000000000000..c345ce7f4e293
--- /dev/null
+++ b/ee/frontend/mobile-replay/schema/mobile/rr-mobile-schema.json
@@ -0,0 +1,324 @@
+{
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "anyOf": [
+        {
+            "additionalProperties": false,
+            "properties": {
+                "data": {
+                    "additionalProperties": false,
+                    "properties": {
+                        "initialOffset": {
+                            "additionalProperties": false,
+                            "properties": {
+                                "left": {
+                                    "type": "number"
+                                },
+                                "top": {
+                                    "type": "number"
+                                }
+                            },
+                            "required": ["top", "left"],
+                            "type": "object"
+                        },
+                        "wireframes": {
+                            "description": "This mimics the RRWeb full snapshot event type, except instead of reporting a serialized DOM it reports a wireframe representation of the screen.",
+                            "items": {
+                                "$ref": "#/definitions/wireframe"
+                            },
+                            "type": "array"
+                        }
+                    },
+                    "required": ["wireframes", "initialOffset"],
+                    "type": "object"
+                },
+                "delay": {
+                    "type": "number"
+                },
+                "timestamp": {
+                    "type": "number"
+                },
+                "type": {
+                    "$ref": "#/definitions/EventType.FullSnapshot"
+                }
+            },
+            "required": ["data", "timestamp", "type"],
+            "type": "object"
+        },
+        {
+            "additionalProperties": false,
+            "properties": {
+                "data": {
+                    "additionalProperties": false,
+                    "properties": {
+                        "height": {
+                            "type": "number"
+                        },
+                        "href": {
+                            "type": "string"
+                        },
+                        "width": {
+                            "type": "number"
+                        }
+                    },
+                    "required": ["width", "height"],
+                    "type": "object"
+                },
+                "delay": {
+                    "type": "number"
+                },
+                "timestamp": {
+                    "type": "number"
+                },
+                "type": {
+                    "$ref": "#/definitions/EventType.Meta"
+                }
+            },
+            "required": ["data", "timestamp", "type"],
+            "type": "object"
+        },
+        {
+            "additionalProperties": false,
+            "properties": {
+                "data": {
+                    "additionalProperties": false,
+                    "properties": {
+                        "payload": {},
+                        "tag": {
+                            "type": "string"
+                        }
+                    },
+                    "required": ["tag", "payload"],
+                    "type": "object"
+                },
+                "delay": {
+                    "type": "number"
+                },
+                "timestamp": {
+                    "type": "number"
+                },
+                "type": {
+                    "$ref": "#/definitions/EventType.Custom"
+                }
+            },
+            "required": ["data", "timestamp", "type"],
+            "type": "object"
+        }
+    ],
+    "definitions": {
+        "EventType.Custom": {
+            "const": 5,
+            "type": "number"
+        },
+        "EventType.FullSnapshot": {
+            "const": 2,
+            "type": "number"
+        },
+        "EventType.Meta": {
+            "const": 4,
+            "type": "number"
+        },
+        "MobileNodeType": {
+            "enum": ["text", "image", "rectangle", "div"],
+            "type": "string"
+        },
+        "MobileStyles": {
+            "additionalProperties": false,
+            "properties": {
+                "backgroundColor": {
+                    "description": "maps to CSS background-color. Accepts any valid CSS color value. Expects a #RGB value e.g. #000 or #000000",
+                    "type": "string"
+                },
+                "borderColor": {
+                    "description": "if borderColor is present, then border style is assumed to be solid",
+                    "type": "string"
+                },
+                "borderRadius": {
+                    "description": "if borderRadius is present, then border style is assumed to be solid",
+                    "type": ["string", "number"]
+                },
+                "borderWidth": {
+                    "description": "if borderWidth is present, then border style is assumed to be solid",
+                    "type": ["string", "number"]
+                },
+                "color": {
+                    "description": "maps to CSS color. Accepts any valid CSS color value. Expects a #RGB value e.g. #000 or #000000",
+                    "type": "string"
+                },
+                "horizontalAlign": {
+                    "description": "horizontal alignment with respect to its parent",
+                    "enum": ["left", "right", "center"],
+                    "type": "string"
+                },
+                "verticalAlign": {
+                    "description": "vertical alignment with respect to its parent",
+                    "enum": ["top", "bottom", "center"],
+                    "type": "string"
+                }
+            },
+            "type": "object"
+        },
+        "wireframe": {
+            "anyOf": [
+                {
+                    "$ref": "#/definitions/wireframeText"
+                },
+                {
+                    "$ref": "#/definitions/wireframeImage"
+                },
+                {
+                    "$ref": "#/definitions/wireframeRectangle"
+                },
+                {
+                    "$ref": "#/definitions/wireframeDiv"
+                }
+            ]
+        },
+        "wireframeDiv": {
+            "additionalProperties": false,
+            "properties": {
+                "childWireframes": {
+                    "items": {
+                        "$ref": "#/definitions/wireframe"
+                    },
+                    "type": "array"
+                },
+                "height": {
+                    "type": "number"
+                },
+                "id": {
+                    "type": "number"
+                },
+                "style": {
+                    "$ref": "#/definitions/MobileStyles"
+                },
+                "type": {
+                    "$ref": "#/definitions/MobileNodeType"
+                },
+                "width": {
+                    "type": "number"
+                },
+                "x": {
+                    "description": "x and y are the top left corner of the element, if they are present then the element is absolutely positioned, if they are not present this is equivalent to setting them to 0",
+                    "type": "number"
+                },
+                "y": {
+                    "type": "number"
+                }
+            },
+            "required": ["height", "id", "type", "width", "x", "y"],
+            "type": "object"
+        },
+        "wireframeImage": {
+            "additionalProperties": false,
+            "properties": {
+                "base64": {
+                    "description": "this will be used as base64 encoded image source, with no other attributes it is assumed to be a PNG",
+                    "type": "string"
+                },
+                "childWireframes": {
+                    "items": {
+                        "$ref": "#/definitions/wireframe"
+                    },
+                    "type": "array"
+                },
+                "height": {
+                    "type": "number"
+                },
+                "id": {
+                    "type": "number"
+                },
+                "style": {
+                    "$ref": "#/definitions/MobileStyles"
+                },
+                "type": {
+                    "$ref": "#/definitions/MobileNodeType"
+                },
+                "width": {
+                    "type": "number"
+                },
+                "x": {
+                    "description": "x and y are the top left corner of the element, if they are present then the element is absolutely positioned, if they are not present this is equivalent to setting them to 0",
+                    "type": "number"
+                },
+                "y": {
+                    "type": "number"
+                }
+            },
+            "required": ["base64", "height", "id", "type", "width", "x", "y"],
+            "type": "object"
+        },
+        "wireframeRectangle": {
+            "additionalProperties": false,
+            "properties": {
+                "childWireframes": {
+                    "items": {
+                        "$ref": "#/definitions/wireframe"
+                    },
+                    "type": "array"
+                },
+                "height": {
+                    "type": "number"
+                },
+                "id": {
+                    "type": "number"
+                },
+                "style": {
+                    "$ref": "#/definitions/MobileStyles"
+                },
+                "type": {
+                    "$ref": "#/definitions/MobileNodeType"
+                },
+                "width": {
+                    "type": "number"
+                },
+                "x": {
+                    "description": "x and y are the top left corner of the element, if they are present then the element is absolutely positioned, if they are not present this is equivalent to setting them to 0",
+                    "type": "number"
+                },
+                "y": {
+                    "type": "number"
+                }
+            },
+            "required": ["height", "id", "type", "width", "x", "y"],
+            "type": "object"
+        },
+        "wireframeText": {
+            "additionalProperties": false,
+            "properties": {
+                "childWireframes": {
+                    "items": {
+                        "$ref": "#/definitions/wireframe"
+                    },
+                    "type": "array"
+                },
+                "height": {
+                    "type": "number"
+                },
+                "id": {
+                    "type": "number"
+                },
+                "style": {
+                    "$ref": "#/definitions/MobileStyles"
+                },
+                "text": {
+                    "type": "string"
+                },
+                "type": {
+                    "$ref": "#/definitions/MobileNodeType"
+                },
+                "width": {
+                    "type": "number"
+                },
+                "x": {
+                    "description": "x and y are the top left corner of the element, if they are present then the element is absolutely positioned, if they are not present this is equivalent to setting them to 0",
+                    "type": "number"
+                },
+                "y": {
+                    "type": "number"
+                }
+            },
+            "required": ["height", "id", "text", "type", "width", "x", "y"],
+            "type": "object"
+        }
+    }
+}
diff --git a/ee/frontend/mobile-replay/schema/web/rr-web-schema.json b/ee/frontend/mobile-replay/schema/web/rr-web-schema.json
new file mode 100644
index 0000000000000..26f0f34428b0f
--- /dev/null
+++ b/ee/frontend/mobile-replay/schema/web/rr-web-schema.json
@@ -0,0 +1,951 @@
+{
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "anyOf": [
+        {
+            "additionalProperties": false,
+            "properties": {
+                "data": {},
+                "delay": {
+                    "type": "number"
+                },
+                "timestamp": {
+                    "type": "number"
+                },
+                "type": {
+                    "$ref": "#/definitions/EventType.DomContentLoaded"
+                }
+            },
+            "required": ["data", "timestamp", "type"],
+            "type": "object"
+        },
+        {
+            "additionalProperties": false,
+            "properties": {
+                "data": {},
+                "delay": {
+                    "type": "number"
+                },
+                "timestamp": {
+                    "type": "number"
+                },
+                "type": {
+                    "$ref": "#/definitions/EventType.Load"
+                }
+            },
+            "required": ["data", "timestamp", "type"],
+            "type": "object"
+        },
+        {
+            "additionalProperties": false,
+            "properties": {
+                "data": {
+                    "additionalProperties": false,
+                    "properties": {
+                        "initialOffset": {
+                            "additionalProperties": false,
+                            "properties": {
+                                "left": {
+                                    "type": "number"
+                                },
+                                "top": {
+                                    "type": "number"
+                                }
+                            },
+                            "required": ["top", "left"],
+                            "type": "object"
+                        },
+                        "node": {}
+                    },
+                    "required": ["node", "initialOffset"],
+                    "type": "object"
+                },
+                "delay": {
+                    "type": "number"
+                },
+                "timestamp": {
+                    "type": "number"
+                },
+                "type": {
+                    "$ref": "#/definitions/EventType.FullSnapshot"
+                }
+            },
+            "required": ["data", "timestamp", "type"],
+            "type": "object"
+        },
+        {
+            "additionalProperties": false,
+            "properties": {
+                "data": {
+                    "$ref": "#/definitions/incrementalData"
+                },
+                "delay": {
+                    "type": "number"
+                },
+                "timestamp": {
+                    "type": "number"
+                },
+                "type": {
+                    "$ref": "#/definitions/EventType.IncrementalSnapshot"
+                }
+            },
+            "required": ["data", "timestamp", "type"],
+            "type": "object"
+        },
+        {
+            "additionalProperties": false,
+            "properties": {
+                "data": {
+                    "additionalProperties": false,
+                    "properties": {
+                        "height": {
+                            "type": "number"
+                        },
+                        "href": {
+                            "type": "string"
+                        },
+                        "width": {
+                            "type": "number"
+                        }
+                    },
+                    "required": ["href", "width", "height"],
+                    "type": "object"
+                },
+                "delay": {
+                    "type": "number"
+                },
+                "timestamp": {
+                    "type": "number"
+                },
+                "type": {
+                    "$ref": "#/definitions/EventType.Meta"
+                }
+            },
+            "required": ["data", "timestamp", "type"],
+            "type": "object"
+        },
+        {
+            "additionalProperties": false,
+            "properties": {
+                "data": {
+                    "additionalProperties": false,
+                    "properties": {
+                        "payload": {},
+                        "tag": {
+                            "type": "string"
+                        }
+                    },
+                    "required": ["tag", "payload"],
+                    "type": "object"
+                },
+                "delay": {
+                    "type": "number"
+                },
+                "timestamp": {
+                    "type": "number"
+                },
+                "type": {
+                    "$ref": "#/definitions/EventType.Custom"
+                }
+            },
+            "required": ["data", "timestamp", "type"],
+            "type": "object"
+        },
+        {
+            "additionalProperties": false,
+            "properties": {
+                "data": {
+                    "additionalProperties": false,
+                    "properties": {
+                        "payload": {},
+                        "plugin": {
+                            "type": "string"
+                        }
+                    },
+                    "required": ["plugin", "payload"],
+                    "type": "object"
+                },
+                "delay": {
+                    "type": "number"
+                },
+                "timestamp": {
+                    "type": "number"
+                },
+                "type": {
+                    "$ref": "#/definitions/EventType.Plugin"
+                }
+            },
+            "required": ["data", "timestamp", "type"],
+            "type": "object"
+        }
+    ],
+    "definitions": {
+        "CanvasContext": {
+            "enum": [0, 1, 2],
+            "type": "number"
+        },
+        "EventType.Custom": {
+            "const": 5,
+            "type": "number"
+        },
+        "EventType.DomContentLoaded": {
+            "const": 0,
+            "type": "number"
+        },
+        "EventType.FullSnapshot": {
+            "const": 2,
+            "type": "number"
+        },
+        "EventType.IncrementalSnapshot": {
+            "const": 3,
+            "type": "number"
+        },
+        "EventType.Load": {
+            "const": 1,
+            "type": "number"
+        },
+        "EventType.Meta": {
+            "const": 4,
+            "type": "number"
+        },
+        "EventType.Plugin": {
+            "const": 6,
+            "type": "number"
+        },
+        "FontDisplay": {
+            "enum": ["auto", "block", "fallback", "optional", "swap"],
+            "type": "string"
+        },
+        "FontFaceDescriptors": {
+            "additionalProperties": false,
+            "properties": {
+                "ascentOverride": {
+                    "type": "string"
+                },
+                "descentOverride": {
+                    "type": "string"
+                },
+                "display": {
+                    "$ref": "#/definitions/FontDisplay"
+                },
+                "featureSettings": {
+                    "type": "string"
+                },
+                "lineGapOverride": {
+                    "type": "string"
+                },
+                "stretch": {
+                    "type": "string"
+                },
+                "style": {
+                    "type": "string"
+                },
+                "unicodeRange": {
+                    "type": "string"
+                },
+                "variant": {
+                    "type": "string"
+                },
+                "weight": {
+                    "type": "string"
+                }
+            },
+            "type": "object"
+        },
+        "IncrementalSource.AdoptedStyleSheet": {
+            "const": 15,
+            "type": "number"
+        },
+        "IncrementalSource.CanvasMutation": {
+            "const": 9,
+            "type": "number"
+        },
+        "IncrementalSource.Drag": {
+            "const": 12,
+            "type": "number"
+        },
+        "IncrementalSource.Font": {
+            "const": 10,
+            "type": "number"
+        },
+        "IncrementalSource.Input": {
+            "const": 5,
+            "type": "number"
+        },
+        "IncrementalSource.MediaInteraction": {
+            "const": 7,
+            "type": "number"
+        },
+        "IncrementalSource.MouseInteraction": {
+            "const": 2,
+            "type": "number"
+        },
+        "IncrementalSource.MouseMove": {
+            "const": 1,
+            "type": "number"
+        },
+        "IncrementalSource.Mutation": {
+            "const": 0,
+            "type": "number"
+        },
+        "IncrementalSource.Scroll": {
+            "const": 3,
+            "type": "number"
+        },
+        "IncrementalSource.Selection": {
+            "const": 14,
+            "type": "number"
+        },
+        "IncrementalSource.StyleDeclaration": {
+            "const": 13,
+            "type": "number"
+        },
+        "IncrementalSource.StyleSheetRule": {
+            "const": 8,
+            "type": "number"
+        },
+        "IncrementalSource.TouchMove": {
+            "const": 6,
+            "type": "number"
+        },
+        "IncrementalSource.ViewportResize": {
+            "const": 4,
+            "type": "number"
+        },
+        "MediaInteractions": {
+            "enum": [0, 1, 2, 3, 4],
+            "type": "number"
+        },
+        "MouseInteractions": {
+            "enum": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+            "type": "number"
+        },
+        "PointerTypes": {
+            "enum": [0, 1, 2],
+            "type": "number"
+        },
+        "SelectionRange": {
+            "additionalProperties": false,
+            "properties": {
+                "end": {
+                    "type": "number"
+                },
+                "endOffset": {
+                    "type": "number"
+                },
+                "start": {
+                    "type": "number"
+                },
+                "startOffset": {
+                    "type": "number"
+                }
+            },
+            "required": ["start", "startOffset", "end", "endOffset"],
+            "type": "object"
+        },
+        "addedNodeMutation": {
+            "additionalProperties": false,
+            "properties": {
+                "nextId": {
+                    "type": ["number", "null"]
+                },
+                "node": {},
+                "parentId": {
+                    "type": "number"
+                },
+                "previousId": {
+                    "type": ["number", "null"]
+                }
+            },
+            "required": ["parentId", "nextId", "node"],
+            "type": "object"
+        },
+        "adoptedStyleSheetData": {
+            "additionalProperties": false,
+            "properties": {
+                "id": {
+                    "type": "number"
+                },
+                "source": {
+                    "$ref": "#/definitions/IncrementalSource.AdoptedStyleSheet"
+                },
+                "styleIds": {
+                    "items": {
+                        "type": "number"
+                    },
+                    "type": "array"
+                },
+                "styles": {
+                    "items": {
+                        "additionalProperties": false,
+                        "properties": {
+                            "rules": {
+                                "items": {
+                                    "$ref": "#/definitions/styleSheetAddRule"
+                                },
+                                "type": "array"
+                            },
+                            "styleId": {
+                                "type": "number"
+                            }
+                        },
+                        "required": ["styleId", "rules"],
+                        "type": "object"
+                    },
+                    "type": "array"
+                }
+            },
+            "required": ["id", "source", "styleIds"],
+            "type": "object"
+        },
+        "attributeMutation": {
+            "additionalProperties": false,
+            "properties": {
+                "attributes": {
+                    "additionalProperties": {
+                        "anyOf": [
+                            {
+                                "type": "string"
+                            },
+                            {
+                                "$ref": "#/definitions/styleOMValue"
+                            },
+                            {
+                                "type": "null"
+                            }
+                        ]
+                    },
+                    "type": "object"
+                },
+                "id": {
+                    "type": "number"
+                }
+            },
+            "required": ["id", "attributes"],
+            "type": "object"
+        },
+        "canvasMutationCommand": {
+            "additionalProperties": false,
+            "properties": {
+                "args": {
+                    "items": {},
+                    "type": "array"
+                },
+                "property": {
+                    "type": "string"
+                },
+                "setter": {
+                    "const": true,
+                    "type": "boolean"
+                }
+            },
+            "required": ["property", "args"],
+            "type": "object"
+        },
+        "canvasMutationData": {
+            "anyOf": [
+                {
+                    "additionalProperties": false,
+                    "properties": {
+                        "commands": {
+                            "items": {
+                                "$ref": "#/definitions/canvasMutationCommand"
+                            },
+                            "type": "array"
+                        },
+                        "id": {
+                            "type": "number"
+                        },
+                        "source": {
+                            "$ref": "#/definitions/IncrementalSource.CanvasMutation"
+                        },
+                        "type": {
+                            "$ref": "#/definitions/CanvasContext"
+                        }
+                    },
+                    "required": ["commands", "id", "source", "type"],
+                    "type": "object"
+                },
+                {
+                    "additionalProperties": false,
+                    "properties": {
+                        "args": {
+                            "items": {},
+                            "type": "array"
+                        },
+                        "id": {
+                            "type": "number"
+                        },
+                        "property": {
+                            "type": "string"
+                        },
+                        "setter": {
+                            "const": true,
+                            "type": "boolean"
+                        },
+                        "source": {
+                            "$ref": "#/definitions/IncrementalSource.CanvasMutation"
+                        },
+                        "type": {
+                            "$ref": "#/definitions/CanvasContext"
+                        }
+                    },
+                    "required": ["args", "id", "property", "source", "type"],
+                    "type": "object"
+                }
+            ]
+        },
+        "fontData": {
+            "additionalProperties": false,
+            "properties": {
+                "buffer": {
+                    "type": "boolean"
+                },
+                "descriptors": {
+                    "$ref": "#/definitions/FontFaceDescriptors"
+                },
+                "family": {
+                    "type": "string"
+                },
+                "fontSource": {
+                    "type": "string"
+                },
+                "source": {
+                    "$ref": "#/definitions/IncrementalSource.Font"
+                }
+            },
+            "required": ["buffer", "family", "fontSource", "source"],
+            "type": "object"
+        },
+        "incrementalData": {
+            "anyOf": [
+                {
+                    "$ref": "#/definitions/mutationData"
+                },
+                {
+                    "$ref": "#/definitions/mousemoveData"
+                },
+                {
+                    "$ref": "#/definitions/mouseInteractionData"
+                },
+                {
+                    "$ref": "#/definitions/scrollData"
+                },
+                {
+                    "$ref": "#/definitions/viewportResizeData"
+                },
+                {
+                    "$ref": "#/definitions/inputData"
+                },
+                {
+                    "$ref": "#/definitions/mediaInteractionData"
+                },
+                {
+                    "$ref": "#/definitions/styleSheetRuleData"
+                },
+                {
+                    "$ref": "#/definitions/canvasMutationData"
+                },
+                {
+                    "$ref": "#/definitions/fontData"
+                },
+                {
+                    "$ref": "#/definitions/selectionData"
+                },
+                {
+                    "$ref": "#/definitions/styleDeclarationData"
+                },
+                {
+                    "$ref": "#/definitions/adoptedStyleSheetData"
+                }
+            ]
+        },
+        "inputData": {
+            "additionalProperties": false,
+            "properties": {
+                "id": {
+                    "type": "number"
+                },
+                "isChecked": {
+                    "type": "boolean"
+                },
+                "source": {
+                    "$ref": "#/definitions/IncrementalSource.Input"
+                },
+                "text": {
+                    "type": "string"
+                },
+                "userTriggered": {
+                    "type": "boolean"
+                }
+            },
+            "required": ["id", "isChecked", "source", "text"],
+            "type": "object"
+        },
+        "mediaInteractionData": {
+            "additionalProperties": false,
+            "properties": {
+                "currentTime": {
+                    "type": "number"
+                },
+                "id": {
+                    "type": "number"
+                },
+                "muted": {
+                    "type": "boolean"
+                },
+                "playbackRate": {
+                    "type": "number"
+                },
+                "source": {
+                    "$ref": "#/definitions/IncrementalSource.MediaInteraction"
+                },
+                "type": {
+                    "$ref": "#/definitions/MediaInteractions"
+                },
+                "volume": {
+                    "type": "number"
+                }
+            },
+            "required": ["id", "source", "type"],
+            "type": "object"
+        },
+        "mouseInteractionData": {
+            "additionalProperties": false,
+            "properties": {
+                "id": {
+                    "type": "number"
+                },
+                "pointerType": {
+                    "$ref": "#/definitions/PointerTypes"
+                },
+                "source": {
+                    "$ref": "#/definitions/IncrementalSource.MouseInteraction"
+                },
+                "type": {
+                    "$ref": "#/definitions/MouseInteractions"
+                },
+                "x": {
+                    "type": "number"
+                },
+                "y": {
+                    "type": "number"
+                }
+            },
+            "required": ["id", "source", "type", "x", "y"],
+            "type": "object"
+        },
+        "mousePosition": {
+            "additionalProperties": false,
+            "properties": {
+                "id": {
+                    "type": "number"
+                },
+                "timeOffset": {
+                    "type": "number"
+                },
+                "x": {
+                    "type": "number"
+                },
+                "y": {
+                    "type": "number"
+                }
+            },
+            "required": ["x", "y", "id", "timeOffset"],
+            "type": "object"
+        },
+        "mousemoveData": {
+            "additionalProperties": false,
+            "properties": {
+                "positions": {
+                    "items": {
+                        "$ref": "#/definitions/mousePosition"
+                    },
+                    "type": "array"
+                },
+                "source": {
+                    "anyOf": [
+                        {
+                            "$ref": "#/definitions/IncrementalSource.MouseMove"
+                        },
+                        {
+                            "$ref": "#/definitions/IncrementalSource.TouchMove"
+                        },
+                        {
+                            "$ref": "#/definitions/IncrementalSource.Drag"
+                        }
+                    ]
+                }
+            },
+            "required": ["source", "positions"],
+            "type": "object"
+        },
+        "mutationData": {
+            "additionalProperties": false,
+            "properties": {
+                "adds": {
+                    "items": {
+                        "$ref": "#/definitions/addedNodeMutation"
+                    },
+                    "type": "array"
+                },
+                "attributes": {
+                    "items": {
+                        "$ref": "#/definitions/attributeMutation"
+                    },
+                    "type": "array"
+                },
+                "isAttachIframe": {
+                    "const": true,
+                    "type": "boolean"
+                },
+                "removes": {
+                    "items": {
+                        "$ref": "#/definitions/removedNodeMutation"
+                    },
+                    "type": "array"
+                },
+                "source": {
+                    "$ref": "#/definitions/IncrementalSource.Mutation"
+                },
+                "texts": {
+                    "items": {
+                        "$ref": "#/definitions/textMutation"
+                    },
+                    "type": "array"
+                }
+            },
+            "required": ["adds", "attributes", "removes", "source", "texts"],
+            "type": "object"
+        },
+        "removedNodeMutation": {
+            "additionalProperties": false,
+            "properties": {
+                "id": {
+                    "type": "number"
+                },
+                "isShadow": {
+                    "type": "boolean"
+                },
+                "parentId": {
+                    "type": "number"
+                }
+            },
+            "required": ["parentId", "id"],
+            "type": "object"
+        },
+        "scrollData": {
+            "additionalProperties": false,
+            "properties": {
+                "id": {
+                    "type": "number"
+                },
+                "source": {
+                    "$ref": "#/definitions/IncrementalSource.Scroll"
+                },
+                "x": {
+                    "type": "number"
+                },
+                "y": {
+                    "type": "number"
+                }
+            },
+            "required": ["id", "source", "x", "y"],
+            "type": "object"
+        },
+        "selectionData": {
+            "additionalProperties": false,
+            "properties": {
+                "ranges": {
+                    "items": {
+                        "$ref": "#/definitions/SelectionRange"
+                    },
+                    "type": "array"
+                },
+                "source": {
+                    "$ref": "#/definitions/IncrementalSource.Selection"
+                }
+            },
+            "required": ["ranges", "source"],
+            "type": "object"
+        },
+        "styleDeclarationData": {
+            "additionalProperties": false,
+            "properties": {
+                "id": {
+                    "type": "number"
+                },
+                "index": {
+                    "items": {
+                        "type": "number"
+                    },
+                    "type": "array"
+                },
+                "remove": {
+                    "additionalProperties": false,
+                    "properties": {
+                        "property": {
+                            "type": "string"
+                        }
+                    },
+                    "required": ["property"],
+                    "type": "object"
+                },
+                "set": {
+                    "additionalProperties": false,
+                    "properties": {
+                        "priority": {
+                            "type": "string"
+                        },
+                        "property": {
+                            "type": "string"
+                        },
+                        "value": {
+                            "type": ["string", "null"]
+                        }
+                    },
+                    "required": ["property", "value"],
+                    "type": "object"
+                },
+                "source": {
+                    "$ref": "#/definitions/IncrementalSource.StyleDeclaration"
+                },
+                "styleId": {
+                    "type": "number"
+                }
+            },
+            "required": ["index", "source"],
+            "type": "object"
+        },
+        "styleOMValue": {
+            "additionalProperties": {
+                "anyOf": [
+                    {
+                        "$ref": "#/definitions/styleValueWithPriority"
+                    },
+                    {
+                        "type": "string"
+                    },
+                    {
+                        "const": false,
+                        "type": "boolean"
+                    }
+                ]
+            },
+            "type": "object"
+        },
+        "styleSheetAddRule": {
+            "additionalProperties": false,
+            "properties": {
+                "index": {
+                    "anyOf": [
+                        {
+                            "type": "number"
+                        },
+                        {
+                            "items": {
+                                "type": "number"
+                            },
+                            "type": "array"
+                        }
+                    ]
+                },
+                "rule": {
+                    "type": "string"
+                }
+            },
+            "required": ["rule"],
+            "type": "object"
+        },
+        "styleSheetDeleteRule": {
+            "additionalProperties": false,
+            "properties": {
+                "index": {
+                    "anyOf": [
+                        {
+                            "type": "number"
+                        },
+                        {
+                            "items": {
+                                "type": "number"
+                            },
+                            "type": "array"
+                        }
+                    ]
+                }
+            },
+            "required": ["index"],
+            "type": "object"
+        },
+        "styleSheetRuleData": {
+            "additionalProperties": false,
+            "properties": {
+                "adds": {
+                    "items": {
+                        "$ref": "#/definitions/styleSheetAddRule"
+                    },
+                    "type": "array"
+                },
+                "id": {
+                    "type": "number"
+                },
+                "removes": {
+                    "items": {
+                        "$ref": "#/definitions/styleSheetDeleteRule"
+                    },
+                    "type": "array"
+                },
+                "replace": {
+                    "type": "string"
+                },
+                "replaceSync": {
+                    "type": "string"
+                },
+                "source": {
+                    "$ref": "#/definitions/IncrementalSource.StyleSheetRule"
+                },
+                "styleId": {
+                    "type": "number"
+                }
+            },
+            "required": ["source"],
+            "type": "object"
+        },
+        "styleValueWithPriority": {
+            "items": {
+                "type": "string"
+            },
+            "maxItems": 2,
+            "minItems": 2,
+            "type": "array"
+        },
+        "textMutation": {
+            "additionalProperties": false,
+            "properties": {
+                "id": {
+                    "type": "number"
+                },
+                "value": {
+                    "type": ["string", "null"]
+                }
+            },
+            "required": ["id", "value"],
+            "type": "object"
+        },
+        "viewportResizeData": {
+            "additionalProperties": false,
+            "properties": {
+                "height": {
+                    "type": "number"
+                },
+                "source": {
+                    "$ref": "#/definitions/IncrementalSource.ViewportResize"
+                },
+                "width": {
+                    "type": "number"
+                }
+            },
+            "required": ["height", "source", "width"],
+            "type": "object"
+        }
+    }
+}
diff --git a/ee/frontend/mobile-replay/transform.test.ts b/ee/frontend/mobile-replay/transform.test.ts
new file mode 100644
index 0000000000000..a130efddad483
--- /dev/null
+++ b/ee/frontend/mobile-replay/transform.test.ts
@@ -0,0 +1,301 @@
+import posthogEE from '@posthog/ee/exports'
+import { EventType } from '@rrweb/types'
+import { ifEeDescribe } from 'lib/ee.test'
+
+import { PostHogEE } from '../../../frontend/@posthog/ee/types'
+import { validateAgainstWebSchema, validateFromMobile } from './index'
+
+const heartEyesEmojiURL =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII='
+
+describe('replay/transform', () => {
+    describe('validation', () => {
+        test('example of validating incoming _invalid_ data', () => {
+            const invalidData = {
+                foo: 'abc',
+                bar: 'abc',
+            }
+
+            expect(validateFromMobile(invalidData).isValid).toBe(false)
+        })
+
+        test('example of validating mobile meta event', () => {
+            const validData = {
+                data: { width: 1, height: 1 },
+                timestamp: 1,
+                type: EventType.Meta,
+            }
+
+            expect(validateFromMobile(validData)).toStrictEqual({
+                isValid: true,
+                errors: null,
+            })
+        })
+
+        describe('validate web schema', () => {
+            test('does not block when invalid', () => {
+                expect(validateAgainstWebSchema({})).toBeFalsy()
+            })
+
+            test('should be valid when...', () => {
+                expect(validateAgainstWebSchema({ data: {}, timestamp: 12345, type: 0 })).toBeTruthy()
+            })
+        })
+    })
+
+    ifEeDescribe('transform', () => {
+        let posthogEEModule: PostHogEE
+        beforeEach(async () => {
+            posthogEEModule = await posthogEE()
+        })
+        test('can ignore unknown types', () => {
+            expect(
+                posthogEEModule.mobileReplay?.transformToWeb([
+                    {
+                        data: { width: 300, height: 600 },
+                        timestamp: 1,
+                        type: 4,
+                    },
+                    {
+                        data: { href: 'included when present', width: 300, height: 600 },
+                        timestamp: 1,
+                        type: 4,
+                    },
+                    { type: 9999 },
+                ])
+            ).toStrictEqual([
+                { type: 4, data: { href: '', width: 300, height: 600 }, timestamp: 1 },
+                { type: 4, data: { href: 'included when present', width: 300, height: 600 }, timestamp: 1 },
+            ])
+        })
+
+        test('can ignore unknown wireframe types', () => {
+            const unexpectedWireframeType = posthogEEModule.mobileReplay?.transformToWeb([
+                {
+                    data: { screen: 'App Home Page', width: 300, height: 600 },
+                    timestamp: 1,
+                    type: 4,
+                },
+                {
+                    type: 2,
+                    data: {
+                        wireframes: [
+                            {
+                                id: 12345,
+                                x: 11,
+                                y: 12,
+                                width: 100,
+                                height: 30,
+                                type: 'something in the SDK but not yet the transformer',
+                            },
+                        ],
+                    },
+                    timestamp: 1,
+                },
+            ])
+            expect(unexpectedWireframeType).toMatchSnapshot()
+        })
+
+        test('can short-circuit non-mobile full snapshot', () => {
+            const allWeb = posthogEEModule.mobileReplay?.transformToWeb([
+                {
+                    data: { href: 'https://my-awesome.site', width: 300, height: 600 },
+                    timestamp: 1,
+                    type: 4,
+                },
+                {
+                    type: 2,
+                    data: {
+                        node: { the: 'payload' },
+                    },
+                    timestamp: 1,
+                },
+            ])
+            expect(allWeb).toMatchSnapshot()
+        })
+
+        test('can convert images', () => {
+            const exampleWithImage = posthogEEModule.mobileReplay?.transformToWeb([
+                {
+                    data: {
+                        screen: 'App Home Page',
+                        width: 300,
+                        height: 600,
+                    },
+                    timestamp: 1,
+                    type: 4,
+                },
+                {
+                    type: 2,
+                    data: {
+                        wireframes: [
+                            {
+                                id: 12345,
+                                x: 11,
+                                y: 12,
+                                width: 100,
+                                height: 30,
+                                // clip: {
+                                //   bottom: 83,
+                                //   right: 44,
+                                // },
+                                type: 'text',
+                                text: 'Ⱏ遲䩞㡛쓯잘ጫ䵤㥦鷁끞鈅毅┌빯湌Თ',
+                                style: {
+                                    // family: '疴ꖻ䖭㋑⁃⻋ꑧٹ㧕Ⓖ',
+                                    // size: 4220431756569966319,
+                                    color: '#ffffff',
+                                },
+                            },
+                            {
+                                id: 12345,
+                                x: 25,
+                                y: 42,
+                                width: 100,
+                                height: 30,
+                                // clip: {
+                                //   bottom: 83,
+                                //   right: 44,
+                                // },
+                                type: 'image',
+                                base64: heartEyesEmojiURL,
+                            },
+                        ],
+                    },
+                    timestamp: 1,
+                },
+            ])
+            expect(exampleWithImage).toMatchSnapshot()
+        })
+
+        test('can convert rect with text', () => {
+            const exampleWithRectAndText = posthogEEModule.mobileReplay?.transformToWeb([
+                {
+                    data: {
+                        width: 300,
+                        height: 600,
+                    },
+                    timestamp: 1,
+                    type: 4,
+                },
+                {
+                    type: 2,
+                    data: {
+                        wireframes: [
+                            {
+                                id: 12345,
+                                x: 11,
+                                y: 12,
+                                width: 100,
+                                height: 30,
+                                type: 'rectangle',
+                                style: {
+                                    color: '#ee3ee4',
+                                    borderColor: '#ee3ee4',
+                                    borderWidth: '4',
+                                    borderRadius: '10px',
+                                },
+                            },
+                            {
+                                id: 12345,
+                                x: 13,
+                                y: 17,
+                                width: 100,
+                                height: 30,
+                                verticalAlign: 'top',
+                                horizontalAlign: 'right',
+                                type: 'text',
+                                text: 'i am in the box',
+                            },
+                        ],
+                    },
+                    timestamp: 1,
+                },
+            ])
+            expect(exampleWithRectAndText).toMatchSnapshot()
+        })
+
+        test('child wireframes are processed', () => {
+            const textEvent = posthogEEModule.mobileReplay?.transformToWeb([
+                {
+                    data: { screen: 'App Home Page', width: 300, height: 600 },
+                    timestamp: 1,
+                    type: 4,
+                },
+                {
+                    type: 2,
+                    data: {
+                        wireframes: [
+                            {
+                                id: 123456789,
+                                childWireframes: [
+                                    {
+                                        id: 98765,
+                                        childWireframes: [
+                                            {
+                                                id: 12345,
+                                                x: 11,
+                                                y: 12,
+                                                width: 100,
+                                                height: 30,
+                                                type: 'text',
+                                                text: 'first nested',
+                                                style: {
+                                                    color: '#ffffff',
+                                                    backgroundColor: '#000000',
+                                                    borderWidth: '4px',
+                                                    borderColor: '#000ddd',
+                                                    borderRadius: '10px',
+                                                },
+                                            },
+                                            {
+                                                id: 12345,
+                                                x: 11,
+                                                y: 12,
+                                                width: 100,
+                                                height: 30,
+                                                type: 'text',
+                                                text: 'second nested',
+                                                style: {
+                                                    color: '#ffffff',
+                                                    backgroundColor: '#000000',
+                                                    borderWidth: '4px',
+                                                    borderColor: '#000ddd',
+                                                    borderRadius: '10px',
+                                                },
+                                            },
+                                        ],
+                                    },
+                                    {
+                                        id: 12345,
+                                        x: 11,
+                                        y: 12,
+                                        width: 100,
+                                        height: 30,
+                                        // clip: {
+                                        //   bottom: 83,
+                                        //   right: 44,
+                                        // },
+                                        type: 'text',
+                                        text: 'third (different level) nested',
+                                        style: {
+                                            // family: '疴ꖻ䖭㋑⁃⻋ꑧٹ㧕Ⓖ',
+                                            // size: 4220431756569966319,
+                                            color: '#ffffff',
+                                            backgroundColor: '#000000',
+                                            borderWidth: '4px',
+                                            borderColor: '#000ddd',
+                                            borderRadius: '10', // you can omit the pixels
+                                        },
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                    timestamp: 1,
+                },
+            ])
+            expect(textEvent).toMatchSnapshot()
+        })
+    })
+})
diff --git a/ee/frontend/mobile-replay/transformers.ts b/ee/frontend/mobile-replay/transformers.ts
new file mode 100644
index 0000000000000..10042c934685d
--- /dev/null
+++ b/ee/frontend/mobile-replay/transformers.ts
@@ -0,0 +1,269 @@
+import { EventType, fullSnapshotEvent, metaEvent } from '@rrweb/types'
+
+import {
+    fullSnapshotEvent as MobileFullSnapshotEvent,
+    metaEvent as MobileMetaEvent,
+    NodeType,
+    serializedNodeWithId,
+    wireframe,
+    wireframeDiv,
+    wireframeImage,
+    wireframeRectangle,
+    wireframeText,
+} from './mobile.types'
+import { makePositionStyles, makeStylesString, makeSvgBorder } from './wireframeStyle'
+
+/**
+ * generates a sequence of ids
+ * from 100 to 9,999,999
+ * the transformer reserves ids in the range 0 to 9,999,999
+ * we reserve a range of ids because we need nodes to have stable ids across snapshots
+ * in order for incremental snapshots to work
+ * some mobile elements have to be wrapped in other elements in order to be styled correctly
+ * which means the web version of a mobile replay will use ids that don't exist in the mobile replay,
+ * and we need to ensure they don't clash
+ * -----
+ * id is typed as a number in rrweb
+ * and there's a few places in their code where rrweb uses a check for `id === -1` to bail out of processing
+ * so, it's safest to assume that id is expected to be a positive integer
+ */
+function* ids(): Generator<number> {
+    let i = 100
+    while (i < 9999999) {
+        yield i++
+    }
+}
+const idSequence = ids()
+
+export const makeMetaEvent = (
+    mobileMetaEvent: MobileMetaEvent & {
+        timestamp: number
+    }
+): metaEvent & {
+    timestamp: number
+    delay?: number
+} => ({
+    type: EventType.Meta,
+    data: {
+        href: mobileMetaEvent.data.href || '', // the replay doesn't use the href, so we safely ignore any absence
+        // mostly we need width and height in order to size the viewport
+        width: mobileMetaEvent.data.width,
+        height: mobileMetaEvent.data.height,
+    },
+    timestamp: mobileMetaEvent.timestamp,
+})
+
+function _isPositiveInteger(id: unknown): boolean {
+    return typeof id === 'number' && id > 0 && id % 1 === 0
+}
+
+function makeDivElement(wireframe: wireframeDiv, children: serializedNodeWithId[]): serializedNodeWithId | null {
+    const _id = _isPositiveInteger(wireframe.id) ? wireframe.id : idSequence.next().value
+    return {
+        type: NodeType.Element,
+        tagName: 'div',
+        attributes: {
+            style: makeStylesString(wireframe) + 'overflow:hidden;white-space:nowrap;',
+        },
+        id: _id,
+        childNodes: children,
+    }
+}
+
+function makeTextElement(wireframe: wireframeText, children: serializedNodeWithId[]): serializedNodeWithId | null {
+    if (wireframe.type !== 'text') {
+        console.error('Passed incorrect wireframe type to makeTextElement')
+        return null
+    }
+
+    // because we might have to style the text, we always wrap it in a div
+    // and apply styles to that
+    return {
+        type: NodeType.Element,
+        tagName: 'div',
+        attributes: {
+            style: makeStylesString(wireframe) + 'overflow:hidden;white-space:nowrap;',
+        },
+        id: idSequence.next().value,
+        childNodes: [
+            {
+                type: NodeType.Text,
+                textContent: wireframe.text,
+                id: wireframe.id,
+            },
+            ...children,
+        ],
+    }
+}
+
+function makeImageElement(wireframe: wireframeImage, children: serializedNodeWithId[]): serializedNodeWithId | null {
+    let src = wireframe.base64
+    if (!src.startsWith('data:image/')) {
+        src = 'data:image/png;base64,' + src
+    }
+    return {
+        type: NodeType.Element,
+        tagName: 'img',
+        attributes: {
+            src: src,
+            width: wireframe.width,
+            height: wireframe.height,
+            style: makeStylesString(wireframe),
+        },
+        id: wireframe.id,
+        childNodes: children,
+    }
+}
+
+function makeRectangleElement(
+    wireframe: wireframeRectangle,
+    children: serializedNodeWithId[]
+): serializedNodeWithId | null {
+    return {
+        type: NodeType.Element,
+        tagName: 'svg',
+        attributes: {
+            style: makePositionStyles(wireframe),
+            viewBox: `0 0 ${wireframe.width} ${wireframe.height}`,
+        },
+        id: wireframe.id,
+        childNodes: [
+            {
+                type: NodeType.Element,
+                tagName: 'rect',
+                attributes: {
+                    x: 0,
+                    y: 0,
+                    width: wireframe.width,
+                    height: wireframe.height,
+                    fill: wireframe.style?.backgroundColor || 'transparent',
+                    ...makeSvgBorder(wireframe.style),
+                },
+                id: idSequence.next().value,
+                childNodes: children,
+            },
+        ],
+    }
+}
+
+function chooseConverter<T extends wireframe>(
+    wireframe: T
+): (wireframe: T, children: serializedNodeWithId[]) => serializedNodeWithId | null {
+    // in theory type is always present
+    // but since this is coming over the wire we can't really be sure
+    // and so we default to div
+    const converterType = wireframe.type || 'div'
+    switch (converterType) {
+        case 'text':
+            return makeTextElement as unknown as (
+                wireframe: T,
+                children: serializedNodeWithId[]
+            ) => serializedNodeWithId | null
+        case 'image':
+            return makeImageElement as unknown as (
+                wireframe: T,
+                children: serializedNodeWithId[]
+            ) => serializedNodeWithId | null
+        case 'rectangle':
+            return makeRectangleElement as unknown as (
+                wireframe: T,
+                children: serializedNodeWithId[]
+            ) => serializedNodeWithId | null
+        case 'div':
+            return makeDivElement as unknown as (
+                wireframe: T,
+                children: serializedNodeWithId[]
+            ) => serializedNodeWithId | null
+    }
+}
+
+function convertWireframesFor(wireframes: wireframe[] | undefined): serializedNodeWithId[] {
+    if (!wireframes) {
+        return []
+    }
+
+    return wireframes.reduce((acc, wireframe) => {
+        const children = convertWireframesFor(wireframe.childWireframes)
+        const converter = chooseConverter(wireframe)
+        if (!converter) {
+            console.error(`No converter for wireframe type ${wireframe.type}`)
+            return acc
+        }
+        const convertedEl = converter(wireframe, children)
+        if (convertedEl !== null) {
+            acc.push(convertedEl)
+        }
+        return acc
+    }, [] as serializedNodeWithId[])
+}
+
+export const makeFullEvent = (
+    mobileEvent: MobileFullSnapshotEvent & {
+        timestamp: number
+        delay?: number
+    }
+): fullSnapshotEvent & {
+    timestamp: number
+    delay?: number
+} => {
+    if (!('wireframes' in mobileEvent.data)) {
+        return mobileEvent as unknown as fullSnapshotEvent & {
+            timestamp: number
+            delay?: number
+        }
+    }
+
+    return {
+        type: EventType.FullSnapshot,
+        timestamp: mobileEvent.timestamp,
+        data: {
+            node: {
+                type: NodeType.Document,
+                childNodes: [
+                    {
+                        type: NodeType.DocumentType,
+                        name: 'html',
+                        publicId: '',
+                        systemId: '',
+                        id: 2,
+                    },
+                    {
+                        type: NodeType.Element,
+                        tagName: 'html',
+                        attributes: {},
+                        id: 3,
+                        childNodes: [
+                            {
+                                type: NodeType.Element,
+                                tagName: 'head',
+                                attributes: {},
+                                id: 4,
+                                childNodes: [],
+                            },
+                            {
+                                type: NodeType.Element,
+                                tagName: 'body',
+                                attributes: {},
+                                id: 5,
+                                childNodes: [
+                                    {
+                                        type: NodeType.Element,
+                                        tagName: 'div',
+                                        attributes: {},
+                                        id: idSequence.next().value,
+                                        childNodes: convertWireframesFor(mobileEvent.data.wireframes),
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+                id: 1,
+            },
+            initialOffset: {
+                top: 0,
+                left: 0,
+            },
+        },
+    }
+}
diff --git a/ee/frontend/mobile-replay/wireframeStyle.ts b/ee/frontend/mobile-replay/wireframeStyle.ts
new file mode 100644
index 0000000000000..312e728bdbcc3
--- /dev/null
+++ b/ee/frontend/mobile-replay/wireframeStyle.ts
@@ -0,0 +1,95 @@
+import { MobileStyles, wireframe } from './mobile.types'
+
+function ensureUnit(value: string | number): string {
+    return typeof value === 'number' ? `${value}px` : value.replace(/px$/g, '') + 'px'
+}
+
+function makeBorderStyles(wireframe: wireframe): string {
+    let styles = ''
+
+    if (wireframe.style?.borderWidth) {
+        const borderWidth = ensureUnit(wireframe.style.borderWidth)
+        styles += `border-width: ${borderWidth};`
+    }
+    if (wireframe.style?.borderRadius) {
+        const borderRadius = ensureUnit(wireframe.style.borderRadius)
+        styles += `border-radius: ${borderRadius};`
+    }
+    if (wireframe.style?.borderColor) {
+        styles += `border-color: ${wireframe.style.borderColor};`
+    }
+
+    if (styles.length > 0) {
+        styles += `border-style: solid;`
+    }
+
+    return styles
+}
+
+export function makeSvgBorder(style: MobileStyles | undefined): Record<string, string> {
+    const svgBorderStyles: Record<string, string> = {}
+
+    if (style?.borderWidth) {
+        svgBorderStyles['stroke-width'] = style.borderWidth.toString()
+    }
+    if (style?.borderColor) {
+        svgBorderStyles.stroke = style.borderColor
+    }
+    if (style?.borderRadius) {
+        svgBorderStyles.rx = ensureUnit(style.borderRadius)
+    }
+
+    return svgBorderStyles
+}
+
+export function makePositionStyles(wireframe: wireframe): string {
+    let styles = ''
+    if (wireframe.width) {
+        styles += `width: ${ensureUnit(wireframe.width)};`
+    }
+    if (wireframe.height) {
+        styles += `height: ${ensureUnit(wireframe.height)};`
+    }
+    if (wireframe.x || wireframe.y) {
+        styles += `position: absolute;`
+        if (wireframe.x) {
+            styles += `left: ${ensureUnit(wireframe.x)};`
+        }
+        if (wireframe.y) {
+            styles += `top: ${ensureUnit(wireframe.y)};`
+        }
+    }
+    return styles
+}
+
+function makeLayoutStyles(wireframe: wireframe): string {
+    let styles = ''
+    if (wireframe.style?.verticalAlign) {
+        styles += `align-items: ${
+            { top: 'flex-start', center: 'center', bottom: 'flex-end' }[wireframe.style.verticalAlign]
+        };`
+    }
+    if (wireframe.style?.horizontalAlign) {
+        styles += `justify-content: ${
+            { left: 'flex-start', center: 'center', right: 'flex-end' }[wireframe.style.horizontalAlign]
+        };`
+    }
+    if (styles.length) {
+        styles += `display: flex;`
+    }
+    return styles
+}
+
+export function makeStylesString(wireframe: wireframe): string {
+    let styles = ''
+    if (wireframe.style?.color) {
+        styles += `color: ${wireframe.style.color};`
+    }
+    if (wireframe.style?.backgroundColor) {
+        styles += `background-color: ${wireframe.style.backgroundColor};`
+    }
+    styles += makeBorderStyles(wireframe)
+    styles += makePositionStyles(wireframe)
+    styles += makeLayoutStyles(wireframe)
+    return styles
+}
diff --git a/frontend/@posthog/ee/exports.ts b/frontend/@posthog/ee/exports.ts
index 96d7dc5a5e93d..2cfb28326e908 100644
--- a/frontend/@posthog/ee/exports.ts
+++ b/frontend/@posthog/ee/exports.ts
@@ -1,7 +1,14 @@
 import { PostHogEE } from './types'
 
-const posthogEE: PostHogEE = {
-    enabled: false,
+export default async (): Promise<PostHogEE> => {
+    // eslint-disable-next-line import/no-restricted-paths
+    return import('../../../ee/frontend/exports')
+        .then((ee) => {
+            return ee.default()
+        })
+        .catch(() => {
+            return {
+                enabled: false,
+            }
+        })
 }
-
-export default posthogEE
diff --git a/frontend/@posthog/ee/types.ts b/frontend/@posthog/ee/types.ts
index 7270631c7c78f..ceed593cb13ff 100644
--- a/frontend/@posthog/ee/types.ts
+++ b/frontend/@posthog/ee/types.ts
@@ -1,5 +1,12 @@
 // NOTE: All exported items from the EE module _must_ be optionally defined to ensure we work well with FOSS
+
+import { eventWithTime } from '@rrweb/types'
+
 export type PostHogEE = {
     enabled: boolean
-    myTestCode?: () => void
+    mobileReplay?: {
+        // defined as unknown while the mobileEventWithTime type is in the ee folder
+        transformEventToWeb(x: unknown): eventWithTime | null
+        transformToWeb(x: unknown[]): eventWithTime[]
+    }
 }
diff --git a/frontend/__snapshots__/components-command-bar--actions--dark.png b/frontend/__snapshots__/components-command-bar--actions--dark.png
new file mode 100644
index 0000000000000..3d45834389514
Binary files /dev/null and b/frontend/__snapshots__/components-command-bar--actions--dark.png differ
diff --git a/frontend/__snapshots__/components-command-bar--actions--light.png b/frontend/__snapshots__/components-command-bar--actions--light.png
new file mode 100644
index 0000000000000..c7ee7dc2c235f
Binary files /dev/null and b/frontend/__snapshots__/components-command-bar--actions--light.png differ
diff --git a/frontend/__snapshots__/components-command-bar--search--dark.png b/frontend/__snapshots__/components-command-bar--search--dark.png
new file mode 100644
index 0000000000000..af6d59ab69347
Binary files /dev/null and b/frontend/__snapshots__/components-command-bar--search--dark.png differ
diff --git a/frontend/__snapshots__/components-command-bar--search--light.png b/frontend/__snapshots__/components-command-bar--search--light.png
new file mode 100644
index 0000000000000..9cf309b9e9386
Binary files /dev/null and b/frontend/__snapshots__/components-command-bar--search--light.png differ
diff --git a/frontend/__snapshots__/components-command-bar--search.png b/frontend/__snapshots__/components-command-bar--search.png
index d155d92fac149..16a258d97ca00 100644
Binary files a/frontend/__snapshots__/components-command-bar--search.png and b/frontend/__snapshots__/components-command-bar--search.png differ
diff --git a/frontend/__snapshots__/components-command-bar--shortcuts--dark.png b/frontend/__snapshots__/components-command-bar--shortcuts--dark.png
new file mode 100644
index 0000000000000..fec057699fba5
Binary files /dev/null and b/frontend/__snapshots__/components-command-bar--shortcuts--dark.png differ
diff --git a/frontend/__snapshots__/components-command-bar--shortcuts--light.png b/frontend/__snapshots__/components-command-bar--shortcuts--light.png
new file mode 100644
index 0000000000000..bb844456a7e6d
Binary files /dev/null and b/frontend/__snapshots__/components-command-bar--shortcuts--light.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--funnel-time-to-convert-insight.png b/frontend/__snapshots__/exporter-exporter--funnel-time-to-convert-insight.png
index e97ac272bc3b5..132f11783c137 100644
Binary files a/frontend/__snapshots__/exporter-exporter--funnel-time-to-convert-insight.png and b/frontend/__snapshots__/exporter-exporter--funnel-time-to-convert-insight.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-banner--error.png b/frontend/__snapshots__/lemon-ui-lemon-banner--error.png
index 9389cfa4ea1b2..0d67c6d4a1b3f 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-banner--error.png and b/frontend/__snapshots__/lemon-ui-lemon-banner--error.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-banner--small-with-buttons.png b/frontend/__snapshots__/lemon-ui-lemon-banner--small-with-buttons.png
new file mode 100644
index 0000000000000..4e04a032ef073
Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-banner--small-with-buttons.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-banner--small.png b/frontend/__snapshots__/lemon-ui-lemon-banner--small.png
new file mode 100644
index 0000000000000..8fbb4710897b0
Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-banner--small.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-banner--success.png b/frontend/__snapshots__/lemon-ui-lemon-banner--success.png
index f3b58cb98363a..911bef83bbe88 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-banner--success.png and b/frontend/__snapshots__/lemon-ui-lemon-banner--success.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--as-links--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--as-links--dark.png
index 8e0e51d495afb..fd8eb2e05ba08 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--as-links--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--as-links--dark.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--as-links--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--as-links--light.png
index db4eb5d6684a6..4d8afc2142022 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--as-links--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--as-links--light.png differ
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png
index 9c4e289199783..e18b0bd34c5fb 100644
Binary files a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png and b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png differ
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png
index bbe83bd44e310..f481f17b769a5 100644
Binary files a/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png and b/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png differ
diff --git a/frontend/__snapshots__/scenes-app-apps--installed.png b/frontend/__snapshots__/scenes-app-apps--installed.png
index ca7fff9f98e95..31d7de616c9c1 100644
Binary files a/frontend/__snapshots__/scenes-app-apps--installed.png and b/frontend/__snapshots__/scenes-app-apps--installed.png differ
diff --git a/frontend/__snapshots__/scenes-app-notebooks--notebooks-list.png b/frontend/__snapshots__/scenes-app-notebooks--notebooks-list.png
index 04209a125f40b..88062650f05f4 100644
Binary files a/frontend/__snapshots__/scenes-app-notebooks--notebooks-list.png and b/frontend/__snapshots__/scenes-app-notebooks--notebooks-list.png differ
diff --git a/frontend/__snapshots__/scenes-app-saved-insights--card-view.png b/frontend/__snapshots__/scenes-app-saved-insights--card-view.png
index 3d4b4bd0647be..745d2a5a744da 100644
Binary files a/frontend/__snapshots__/scenes-app-saved-insights--card-view.png and b/frontend/__snapshots__/scenes-app-saved-insights--card-view.png differ
diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-activation.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-activation.png
new file mode 100644
index 0000000000000..ff5e1453ba095
Binary files /dev/null and b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-activation.png differ
diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-docs.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-docs.png
new file mode 100644
index 0000000000000..cb63608d2c237
Binary files /dev/null and b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-docs.png differ
diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-notebooks.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-notebooks.png
new file mode 100644
index 0000000000000..925a2fc86cd82
Binary files /dev/null and b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-notebooks.png differ
diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png
new file mode 100644
index 0000000000000..e50ae6316c22f
Binary files /dev/null and b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png differ
diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section.png b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section.png
index 59181dae85038..99f004ff819fd 100644
Binary files a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section.png and b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section.png differ
diff --git a/frontend/__snapshots__/scenes-app-surveys--surveys-list.png b/frontend/__snapshots__/scenes-app-surveys--surveys-list.png
index f3872ff9c188e..60da5cf713cb3 100644
Binary files a/frontend/__snapshots__/scenes-app-surveys--surveys-list.png and b/frontend/__snapshots__/scenes-app-surveys--surveys-list.png differ
diff --git a/frontend/__snapshots__/scenes-other-login--sso-error.png b/frontend/__snapshots__/scenes-other-login--sso-error.png
index 37309681cfb75..21fc2d3cdb660 100644
Binary files a/frontend/__snapshots__/scenes-other-login--sso-error.png and b/frontend/__snapshots__/scenes-other-login--sso-error.png differ
diff --git a/frontend/__snapshots__/scenes-other-settings--settings-organization.png b/frontend/__snapshots__/scenes-other-settings--settings-organization.png
index 0e5752e576d8b..c75fb864cdf6c 100644
Binary files a/frontend/__snapshots__/scenes-other-settings--settings-organization.png and b/frontend/__snapshots__/scenes-other-settings--settings-organization.png differ
diff --git a/frontend/__snapshots__/scenes-other-settings--settings-project.png b/frontend/__snapshots__/scenes-other-settings--settings-project.png
index 227e1bac41f89..d126091ba0da5 100644
Binary files a/frontend/__snapshots__/scenes-other-settings--settings-project.png and b/frontend/__snapshots__/scenes-other-settings--settings-project.png differ
diff --git a/frontend/src/exporter/Exporter.scss b/frontend/src/exporter/Exporter.scss
index 0493c0f1eeb17..ff33d1000546f 100644
--- a/frontend/src/exporter/Exporter.scss
+++ b/frontend/src/exporter/Exporter.scss
@@ -1,5 +1,11 @@
 @import '../styles/mixins';
 
+body.ExporterBody {
+    &.posthog-3000 {
+        overflow: initial;
+    }
+}
+
 .Exporter {
     display: flex;
     flex-direction: column;
diff --git a/frontend/src/exporter/Exporter.tsx b/frontend/src/exporter/Exporter.tsx
index 0ba873c570fe1..dbc43c689b9fe 100644
--- a/frontend/src/exporter/Exporter.tsx
+++ b/frontend/src/exporter/Exporter.tsx
@@ -3,6 +3,7 @@ import './Exporter.scss'
 
 import clsx from 'clsx'
 import { useValues } from 'kea'
+import { use3000Body } from 'lib/hooks/use3000Body'
 import { useResizeObserver } from 'lib/hooks/useResizeObserver'
 import { Link } from 'lib/lemon-ui/Link'
 import { useEffect } from 'react'
@@ -33,6 +34,8 @@ export function Exporter(props: ExportedData): JSX.Element {
         window.parent?.postMessage({ event: 'posthog:dimensions', name: window.name, height, width }, '*')
     }, [height, width])
 
+    use3000Body()
+
     return (
         <div
             className={clsx('Exporter', {
diff --git a/frontend/src/exporter/index.html b/frontend/src/exporter/index.html
index 938d308ecb8ce..c00218d312b3b 100644
--- a/frontend/src/exporter/index.html
+++ b/frontend/src/exporter/index.html
@@ -1,38 +1,39 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-  <head>
-    <meta name="robots" content="noindex">
-    <script>
-      window.POSTHOG_EXPORTED_DATA = {{exported_data|safe}}
-      if (window.POSTHOG_EXPORTED_DATA.type) {
-        var root = document.documentElement
-        root.className += ' export-type-' + window.POSTHOG_EXPORTED_DATA.type
-      }
-    </script>
-    {% include "head.html" %}
-      {% if add_og_tags %}
-          <meta property="og:title" content="{{ asset_title }}">
-          <meta property="og:type" content="website">
-          <meta property="og:description" content="{{ asset_description }}">
-          <meta property="og:url" content="{{ request.build_absolute_uri }}">
-          <meta property="og:image" content="{{ asset_opengraph_image_url }}">
-          <meta property="og:image:alt" content="A screenshot of the PostHog asset">
-          <meta name="twitter:card" content="summary_large_image">
-      {% endif %}
-  </head>
-  <body>
-    <script>
-        if (typeof Object.entries === 'undefined') {
-            var div = document.createElement("div");
-            div.style.color='#fef6f6'; div.style.background='#920c0c'; div.style.padding='5px 10px';
-            div.innerHTML = "You are using a really old browser. Please upgrade to fully enjoy PostHog!"
-            document.body.prepend(div);
-        }
-        if (!window.process) {
-            // see https://github.com/remarkjs/react-markdown/issues/339
-            window.process = { cwd: () => '' };
-        }
-    </script>
-    <div id="root"></div>
-  </body>
+    <head>
+        <meta name="robots" content="noindex" />
+        <script>
+            window.POSTHOG_EXPORTED_DATA = {{exported_data|safe}}
+            if (window.POSTHOG_EXPORTED_DATA.type) {
+              var root = document.documentElement
+              root.className += ' export-type-' + window.POSTHOG_EXPORTED_DATA.type
+            }
+        </script>
+        {% include "head.html" %} {% if add_og_tags %}
+        <meta property="og:title" content="{{ asset_title }}" />
+        <meta property="og:type" content="website" />
+        <meta property="og:description" content="{{ asset_description }}" />
+        <meta property="og:url" content="{{ request.build_absolute_uri }}" />
+        <meta property="og:image" content="{{ asset_opengraph_image_url }}" />
+        <meta property="og:image:alt" content="A screenshot of the PostHog asset" />
+        <meta name="twitter:card" content="summary_large_image" />
+        {% endif %}
+    </head>
+    <body class="ExporterBody">
+        <script>
+            if (typeof Object.entries === 'undefined') {
+                var div = document.createElement('div')
+                div.style.color = '#fef6f6'
+                div.style.background = '#920c0c'
+                div.style.padding = '5px 10px'
+                div.innerHTML = 'You are using a really old browser. Please upgrade to fully enjoy PostHog!'
+                document.body.prepend(div)
+            }
+            if (!window.process) {
+                // see https://github.com/remarkjs/react-markdown/issues/339
+                window.process = { cwd: () => '' }
+            }
+        </script>
+        <div id="root"></div>
+    </body>
 </html>
diff --git a/frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.tsx b/frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.tsx
index 5899f59b82d47..0a2667b2fd14a 100644
--- a/frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.tsx
+++ b/frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.tsx
@@ -4,6 +4,7 @@ import { useActions, useAsyncActions, useValues } from 'kea'
 import { SpinnerOverlay } from 'lib/lemon-ui/Spinner'
 import { useLayoutEffect, useState } from 'react'
 
+import { sidePanelStateLogic } from '../navigation-3000/sidepanel/sidePanelStateLogic'
 import { EnrichedEarlyAccessFeature, featurePreviewsLogic } from './featurePreviewsLogic'
 
 export function FeaturePreviewsModal({
@@ -11,13 +12,17 @@ export function FeaturePreviewsModal({
 }: {
     /** @deprecated This is only for Storybook. */
     inline?: boolean
-}): JSX.Element {
-    const { featurePreviewsModalVisible, earlyAccessFeatures, rawEarlyAccessFeaturesLoading } =
-        useValues(featurePreviewsLogic)
+}): JSX.Element | null {
+    const { featurePreviewsModalVisible } = useValues(featurePreviewsLogic)
     const { hideFeaturePreviewsModal, loadEarlyAccessFeatures } = useActions(featurePreviewsLogic)
+    const { sidePanelAvailable } = useValues(sidePanelStateLogic)
 
     useLayoutEffect(() => loadEarlyAccessFeatures(), [])
 
+    if (sidePanelAvailable) {
+        return null
+    }
+
     return (
         <LemonModal
             isOpen={inline || featurePreviewsModalVisible}
@@ -27,37 +32,48 @@ export function FeaturePreviewsModal({
             width={528}
             inline={inline}
         >
-            <div
-                className={clsx(
-                    'flex flex-col relative min-h-24',
-                    earlyAccessFeatures.length === 0 && 'items-center justify-center'
-                )}
-            >
-                {earlyAccessFeatures.map((feature, i) => {
-                    if (!feature.flagKey) {
-                        return false
-                    }
-                    return (
-                        <div key={feature.flagKey}>
-                            {i > 0 && <LemonDivider className="my-4" />}
-                            <FeaturePreview key={feature.flagKey} feature={feature} />
-                        </div>
-                    )
-                })}
-                {rawEarlyAccessFeaturesLoading ? (
-                    <SpinnerOverlay />
-                ) : earlyAccessFeatures.length === 0 ? (
-                    <i className="text-center">
-                        No feature previews currently available.
-                        <br />
-                        Check back later!
-                    </i>
-                ) : null}
-            </div>
+            <FeaturePreviews />
         </LemonModal>
     )
 }
 
+export function FeaturePreviews(): JSX.Element {
+    const { earlyAccessFeatures, rawEarlyAccessFeaturesLoading } = useValues(featurePreviewsLogic)
+    const { loadEarlyAccessFeatures } = useActions(featurePreviewsLogic)
+
+    useLayoutEffect(() => loadEarlyAccessFeatures(), [])
+
+    return (
+        <div
+            className={clsx(
+                'flex flex-col relative min-h-24',
+                earlyAccessFeatures.length === 0 && 'items-center justify-center'
+            )}
+        >
+            {earlyAccessFeatures.map((feature, i) => {
+                if (!feature.flagKey) {
+                    return false
+                }
+                return (
+                    <div key={feature.flagKey}>
+                        {i > 0 && <LemonDivider className="my-4" />}
+                        <FeaturePreview key={feature.flagKey} feature={feature} />
+                    </div>
+                )
+            })}
+            {rawEarlyAccessFeaturesLoading ? (
+                <SpinnerOverlay />
+            ) : earlyAccessFeatures.length === 0 ? (
+                <i className="text-center">
+                    No feature previews currently available.
+                    <br />
+                    Check back later!
+                </i>
+            ) : null}
+        </div>
+    )
+}
+
 function FeaturePreview({ feature }: { feature: EnrichedEarlyAccessFeature }): JSX.Element {
     const { activeFeedbackFlagKey, activeFeedbackFlagKeyLoading } = useValues(featurePreviewsLogic)
     const { beginEarlyAccessFeatureFeedback, cancelEarlyAccessFeatureFeedback, updateEarlyAccessFeatureEnrollment } =
@@ -80,18 +96,9 @@ function FeaturePreview({ feature }: { feature: EnrichedEarlyAccessFeature }): J
             </div>
             <p className="my-2">{description || <i>No description.</i>}</p>
             <div>
-                <Link
-                    onClick={() => {
-                        if (!isFeedbackActive) {
-                            beginEarlyAccessFeatureFeedback(flagKey)
-                        } else {
-                            cancelEarlyAccessFeatureFeedback()
-                            setFeedback('')
-                        }
-                    }}
-                >
-                    {!isFeedbackActive ? 'Give' : 'Cancel'} feedback
-                </Link>
+                {!isFeedbackActive ? (
+                    <Link onClick={() => beginEarlyAccessFeatureFeedback(flagKey)}>Give feedback</Link>
+                ) : null}
                 {documentationUrl && (
                     <>
                         {' • '}
@@ -119,19 +126,31 @@ function FeaturePreview({ feature }: { feature: EnrichedEarlyAccessFeature }): J
                             }
                         }}
                     />
-                    <LemonButton
-                        type="primary"
-                        onClick={() => {
-                            void submitEarlyAccessFeatureFeedback(feedback).then(() => {
+                    <div className="flex items-center gap-2">
+                        <LemonButton
+                            type="secondary"
+                            onClick={() => {
+                                cancelEarlyAccessFeatureFeedback()
                                 setFeedback('')
-                            })
-                        }}
-                        loading={activeFeedbackFlagKeyLoading}
-                        fullWidth
-                        center
-                    >
-                        Submit feedback
-                    </LemonButton>
+                            }}
+                        >
+                            Cancel
+                        </LemonButton>
+
+                        <LemonButton
+                            type="primary"
+                            onClick={() => {
+                                void submitEarlyAccessFeatureFeedback(feedback).then(() => {
+                                    setFeedback('')
+                                })
+                            }}
+                            loading={activeFeedbackFlagKeyLoading}
+                            className="flex-1"
+                            center
+                        >
+                            Submit feedback
+                        </LemonButton>
+                    </div>
                 </div>
             )}
         </div>
diff --git a/frontend/src/layout/navigation-3000/components/Navbar.tsx b/frontend/src/layout/navigation-3000/components/Navbar.tsx
index c356f209e5684..d74ba8e029fab 100644
--- a/frontend/src/layout/navigation-3000/components/Navbar.tsx
+++ b/frontend/src/layout/navigation-3000/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import { IconAsterisk, IconDay, IconGear, IconNight, IconSearch } from '@posthog/icons'
+import { IconAsterisk, IconDay, IconGear, IconNight, IconSearch, IconToolbar } from '@posthog/icons'
 import { LemonBadge } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
@@ -93,6 +93,12 @@ export function Navbar(): JSX.Element {
                                 onClick={toggleSearchBar}
                                 keyboardShortcut={{ command: true, k: true }}
                             />
+                            <NavbarButton
+                                icon={<IconToolbar />}
+                                identifier={Scene.ToolbarLaunch}
+                                title="Toolbar"
+                                to={urls.toolbarLaunch()}
+                            />
                             <NavbarButton
                                 icon={<ThemeIcon />}
                                 identifier="theme-button"
@@ -113,7 +119,7 @@ export function Navbar(): JSX.Element {
                             <NavbarButton
                                 icon={<IconGear />}
                                 identifier={Scene.Settings}
-                                title="Project settings"
+                                title="Settings"
                                 to={urls.settings('project')}
                             />
 
diff --git a/frontend/src/layout/navigation-3000/navigationLogic.tsx b/frontend/src/layout/navigation-3000/navigationLogic.tsx
index 859da6313baf7..2b1579e7f2816 100644
--- a/frontend/src/layout/navigation-3000/navigationLogic.tsx
+++ b/frontend/src/layout/navigation-3000/navigationLogic.tsx
@@ -1,8 +1,8 @@
 import {
-    IconApps,
     IconChat,
     IconDashboard,
     IconDatabase,
+    IconDecisionTree,
     IconGraph,
     IconHome,
     IconLive,
@@ -14,7 +14,6 @@ import {
     IconServer,
     IconTestTube,
     IconToggle,
-    IconToolbar,
 } from '@posthog/icons'
 import { lemonToast } from '@posthog/lemon-ui'
 import { captureException } from '@sentry/react'
@@ -37,7 +36,6 @@ import { experimentsSidebarLogic } from './sidebars/experiments'
 import { featureFlagsSidebarLogic } from './sidebars/featureFlags'
 import { insightsSidebarLogic } from './sidebars/insights'
 import { personsAndGroupsSidebarLogic } from './sidebars/personsAndGroups'
-import { toolbarSidebarLogic } from './sidebars/toolbar'
 import { BasicListItem, ExtendedListItem, NavbarItem, SidebarNavbarItem } from './types'
 
 /** Multi-segment item keys are joined using this separator for easy comparisons. */
@@ -376,26 +374,12 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                                   tag: 'beta' as const,
                               }
                             : null,
-                        {
-                            identifier: Scene.DataWarehouse,
-                            label: 'Data warehouse',
-                            icon: <IconServer />,
-                            to: urls.dataWarehouse(),
-                            featureFlag: FEATURE_FLAGS.DATA_WAREHOUSE,
-                            tag: 'beta' as const,
-                        },
                         {
                             identifier: Scene.Replay,
                             label: 'Session replay',
                             icon: <IconRewindPlay />,
                             to: urls.replay(),
                         },
-                        {
-                            identifier: Scene.Surveys,
-                            label: 'Surveys',
-                            icon: <IconChat />,
-                            to: urls.surveys(),
-                        },
                         {
                             identifier: Scene.FeatureFlags,
                             label: 'Feature flags',
@@ -410,28 +394,33 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             logic: isUsingSidebar ? experimentsSidebarLogic : undefined,
                             to: isUsingSidebar ? undefined : urls.experiments(),
                         },
+                        {
+                            identifier: Scene.Surveys,
+                            label: 'Surveys',
+                            icon: <IconChat />,
+                            to: urls.surveys(),
+                        },
                         {
                             identifier: Scene.EarlyAccessFeatures,
                             label: 'Early access features',
                             icon: <IconRocket />,
                             to: urls.earlyAccessFeatures(),
                         },
-                    ].filter(isNotNil),
-                    [
                         {
-                            identifier: Scene.Apps,
-                            label: 'Apps',
-                            icon: <IconApps />,
-                            to: urls.projectApps(),
+                            identifier: Scene.DataWarehouse,
+                            label: 'Data warehouse',
+                            icon: <IconServer />,
+                            to: urls.dataWarehouse(),
+                            featureFlag: FEATURE_FLAGS.DATA_WAREHOUSE,
+                            tag: 'beta' as const,
                         },
                         {
-                            identifier: Scene.ToolbarLaunch,
-                            label: 'Toolbar',
-                            icon: <IconToolbar />,
-                            logic: isUsingSidebar ? toolbarSidebarLogic : undefined,
-                            to: isUsingSidebar ? undefined : urls.toolbarLaunch(),
+                            identifier: Scene.Apps,
+                            label: 'Data pipeline',
+                            icon: <IconDecisionTree />,
+                            to: urls.projectApps(),
                         },
-                    ],
+                    ].filter(isNotNil),
                 ]
             },
         ],
diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss
index 9bfc3610cb018..1bd256dfe3cce 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss
+++ b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss
@@ -1,4 +1,6 @@
 .SidePanel3000 {
+    --side-panel-bar-width: 3rem;
+
     position: relative;
     z-index: var(--z-main-nav);
     box-sizing: content-box;
@@ -19,7 +21,7 @@
             position: fixed;
             top: 0;
             right: 0;
-            max-width: calc(100vw - 3rem);
+            max-width: calc(100vw - var(--side-panel-bar-width));
             box-shadow: 0 0 30px rgb(0 0 0 / 20%);
 
             [theme='dark'] & {
@@ -36,15 +38,31 @@
     .SidePanel3000__bar {
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
-        width: 3rem;
+        align-items: center;
+        width: var(--side-panel-bar-width);
         height: 100vh;
-        overflow-y: auto;
+        overflow: hidden;
         user-select: none;
         border-left-width: 1px;
 
-        .LemonButton {
-            min-height: 2.25rem !important; // Reduce minimum height
+        .SidePanel3000__tabs {
+            flex: 1;
+            width: var(--side-panel-bar-width);
+            overflow: hidden auto;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            .SidePanel3000__tabsrotation {
+                display: flex;
+                gap: 0.25rem;
+                align-items: center;
+                height: var(--side-panel-bar-width);
+                margin-top: calc(calc(var(--side-panel-bar-width) - 0.25rem) * -1);
+                transform: rotate(90deg);
+                transform-origin: bottom left;
+            }
         }
     }
 
diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.stories.tsx b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.stories.tsx
new file mode 100644
index 0000000000000..f7d7bdc8a9479
--- /dev/null
+++ b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.stories.tsx
@@ -0,0 +1,49 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { useActions } from 'kea'
+import { router } from 'kea-router'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { useEffect } from 'react'
+import { App } from 'scenes/App'
+import { urls } from 'scenes/urls'
+
+import { setFeatureFlags } from '~/mocks/browser'
+import { SidePanelTab } from '~/types'
+
+import { sidePanelStateLogic } from './sidePanelStateLogic'
+
+const meta: Meta = {
+    title: 'Scenes-App/SidePanels',
+    parameters: {
+        layout: 'fullscreen',
+        viewMode: 'story',
+        mockDate: '2023-07-04', // To stabilize relative dates
+    },
+}
+export default meta
+
+const BaseTemplate = (props: { panel: SidePanelTab }): JSX.Element => {
+    const { openSidePanel } = useActions(sidePanelStateLogic)
+    setFeatureFlags([FEATURE_FLAGS.POSTHOG_3000])
+    useEffect(() => {
+        router.actions.push(urls.dashboards())
+        openSidePanel(props.panel)
+    }, [])
+
+    return <App />
+}
+
+export const SidePanelDocs: StoryFn = () => {
+    return <BaseTemplate panel={SidePanelTab.Docs} />
+}
+
+export const SidePanelSettings: StoryFn = () => {
+    return <BaseTemplate panel={SidePanelTab.Settings} />
+}
+
+export const SidePanelActivation: StoryFn = () => {
+    return <BaseTemplate panel={SidePanelTab.Activation} />
+}
+
+export const SidePanelNotebooks: StoryFn = () => {
+    return <BaseTemplate panel={SidePanelTab.Notebooks} />
+}
diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx
index 55542da65ce43..35215a4acce6e 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx
@@ -1,7 +1,15 @@
 import './SidePanel.scss'
 
-import { IconGear, IconInfo, IconNotebook, IconSupport } from '@posthog/icons'
-import { LemonButton } from '@posthog/lemon-ui'
+import {
+    IconEllipsis,
+    IconFeatures,
+    IconGear,
+    IconInfo,
+    IconNotebook,
+    IconNotification,
+    IconSupport,
+} from '@posthog/icons'
+import { LemonButton, LemonMenu, LemonMenuItems } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { Resizer } from 'lib/components/Resizer/Resizer'
@@ -11,8 +19,10 @@ import { NotebookPanel } from 'scenes/notebooks/NotebookPanel/NotebookPanel'
 
 import { SidePanelTab } from '~/types'
 
+import { SidePanelActivity } from './panels/activity/SidePanelActivity'
 import { SidePanelActivation, SidePanelActivationIcon } from './panels/SidePanelActivation'
 import { SidePanelDocs } from './panels/SidePanelDocs'
+import { SidePanelFeaturePreviews } from './panels/SidePanelFeaturePreviews'
 import { SidePanelSettings } from './panels/SidePanelSettings'
 import { SidePanelSupport } from './panels/SidePanelSupport'
 import { sidePanelLogic } from './sidePanelLogic'
@@ -45,10 +55,20 @@ export const SidePanelTabs: Record<SidePanelTab, { label: string; Icon: any; Con
         Icon: IconGear,
         Content: SidePanelSettings,
     },
+    [SidePanelTab.FeaturePreviews]: {
+        label: 'Previews',
+        Icon: IconFeatures,
+        Content: SidePanelFeaturePreviews,
+    },
+    [SidePanelTab.Activity]: {
+        label: 'Activity',
+        Icon: IconNotification,
+        Content: SidePanelActivity,
+    },
 }
 
 export function SidePanel(): JSX.Element | null {
-    const { visibleTabs } = useValues(sidePanelLogic)
+    const { visibleTabs, extraTabs } = useValues(sidePanelLogic)
     const { selectedTab, sidePanelOpen } = useValues(sidePanelStateLogic)
     const { openSidePanel, closeSidePanel, setSidePanelAvailable } = useActions(sidePanelStateLogic)
 
@@ -81,41 +101,69 @@ export function SidePanel(): JSX.Element | null {
         return null
     }
 
+    const sidePanelOpenAndAvailable = selectedTab && sidePanelOpen && visibleTabs.includes(selectedTab)
+
+    const menuOptions: LemonMenuItems | undefined = extraTabs
+        ? [
+              {
+                  title: 'Open in side panel',
+                  items: extraTabs.map((tab) => {
+                      const { Icon, label } = SidePanelTabs[tab]
+
+                      return {
+                          label: label,
+                          icon: <Icon />,
+                          onClick: () => openSidePanel(tab),
+                      }
+                  }),
+              },
+          ]
+        : undefined
+
     return (
         <div
             className={clsx(
                 'SidePanel3000',
-                sidePanelOpen && 'SidePanel3000--open',
+                sidePanelOpenAndAvailable && 'SidePanel3000--open',
                 isResizeInProgress && 'SidePanel3000--resizing'
             )}
             ref={ref}
             // eslint-disable-next-line react/forbid-dom-props
             style={{
-                width: sidePanelOpen ? desiredWidth ?? undefined : undefined,
+                width: sidePanelOpenAndAvailable ? desiredWidth ?? undefined : undefined,
             }}
         >
             <Resizer {...resizerLogicProps} />
             <div className="SidePanel3000__bar">
-                <div className="rotate-90 flex items-center gap-1 px-2">
-                    {visibleTabs.map((tab: SidePanelTab) => {
-                        const { Icon, label } = SidePanelTabs[tab]
-                        return (
-                            <LemonButton
-                                key={tab}
-                                icon={<Icon className="rotate-270 w-6" />}
-                                onClick={() =>
-                                    activeTab === tab ? closeSidePanel() : openSidePanel(tab as SidePanelTab)
-                                }
-                                data-attr={`sidepanel-tab-${tab}`}
-                                active={activeTab === tab}
-                                type="secondary"
-                                stealth={true}
-                            >
-                                {label}
-                            </LemonButton>
-                        )
-                    })}
+                <div className="SidePanel3000__tabs">
+                    <div className="SidePanel3000__tabsrotation">
+                        {visibleTabs.map((tab: SidePanelTab) => {
+                            const { Icon, label } = SidePanelTabs[tab]
+                            return (
+                                <LemonButton
+                                    key={tab}
+                                    icon={<Icon className="rotate-270 w-6" />}
+                                    onClick={() =>
+                                        activeTab === tab ? closeSidePanel() : openSidePanel(tab as SidePanelTab)
+                                    }
+                                    data-attr={`sidepanel-tab-${tab}`}
+                                    active={activeTab === tab}
+                                    type="secondary"
+                                    stealth={true}
+                                >
+                                    {label}
+                                </LemonButton>
+                            )
+                        })}
+                    </div>
                 </div>
+                {menuOptions ? (
+                    <div className="shrink-0 flex items-center m-2">
+                        <LemonMenu items={menuOptions}>
+                            <LemonButton size="small" status="stealth" icon={<IconEllipsis />} />
+                        </LemonMenu>
+                    </div>
+                ) : null}
             </div>
             <Resizer {...resizerLogicProps} offset={'3rem'} />
 
diff --git a/frontend/src/layout/navigation-3000/sidepanel/components/SidePanelPaneHeader.tsx b/frontend/src/layout/navigation-3000/sidepanel/components/SidePanelPaneHeader.tsx
index 4e133060965d3..effad4a601e8b 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/components/SidePanelPaneHeader.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/components/SidePanelPaneHeader.tsx
@@ -5,7 +5,7 @@ import { IconClose } from 'lib/lemon-ui/icons'
 import { sidePanelStateLogic } from '../sidePanelStateLogic'
 
 export type SidePanelPaneHeaderProps = {
-    title?: string
+    title?: string | JSX.Element
     children?: React.ReactNode
 }
 
@@ -13,8 +13,10 @@ export function SidePanelPaneHeader({ children, title }: SidePanelPaneHeaderProp
     const { closeSidePanel } = useActions(sidePanelStateLogic)
 
     return (
-        <header className="border-b flex-0 p-1 flex items-center justify-end gap-1 h-10">
-            {title ? <h4 className="flex-1 font-semibold px-2 mb-0 truncate">{title}</h4> : null}
+        <header className="border-b shrink-0 p-1 flex items-center justify-end gap-1 h-10">
+            {title ? (
+                <h4 className="flex-1 flex items-center gap-1 font-semibold px-2 mb-0 truncate">{title}</h4>
+            ) : null}
             {children}
             <Tooltip placement="bottomRight" title="Close this side panel">
                 <LemonButton size="small" sideIcon={<IconClose />} onClick={() => closeSidePanel()} />
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelActivation.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelActivation.tsx
index 5cae81b23ae69..f67c4ef6274ca 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelActivation.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelActivation.tsx
@@ -51,8 +51,8 @@ export const SidePanelActivationIcon = ({ className }: { className: LemonIconPro
     const { activeTasks, completionPercent } = useValues(activationLogic)
 
     return (
-        <LemonProgressCircle progress={completionPercent / 100} size={20} className={className}>
-            <span className="text-xs font-bold">{activeTasks.length}</span>
+        <LemonProgressCircle progress={completionPercent / 100} strokePercentage={0.15} size={20} className={className}>
+            <span className="text-xs font-semibold">{activeTasks.length}</span>
         </LemonProgressCircle>
     )
 }
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelDocs.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelDocs.tsx
index edb6723ca71d4..97996e828271f 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelDocs.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelDocs.tsx
@@ -145,7 +145,7 @@ export const SidePanelDocs = (): JSX.Element => {
                     Open in new tab
                 </LemonButton>
             </SidePanelPaneHeader>
-            <div className="relative flex-1">
+            <div className="relative flex-1 overflow-hidden">
                 <iframe src={iframeSrc} title="Docs" className={clsx('w-full h-full', !ready && 'hidden')} ref={ref} />
 
                 {!ready && <SidePanelDocsSkeleton />}
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelFeaturePreviews.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelFeaturePreviews.tsx
new file mode 100644
index 0000000000000..a0be65ed4ceb7
--- /dev/null
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelFeaturePreviews.tsx
@@ -0,0 +1,19 @@
+import { LemonBanner } from '@posthog/lemon-ui'
+
+import { FeaturePreviews } from '~/layout/FeaturePreviews/FeaturePreviewsModal'
+
+import { SidePanelPaneHeader } from '../components/SidePanelPaneHeader'
+
+export const SidePanelFeaturePreviews = (): JSX.Element => {
+    return (
+        <div className="flex flex-col overflow-hidden">
+            <SidePanelPaneHeader title="Feature previews" />
+            <div className="flex-1 p-4 overflow-y-auto space-y-4">
+                <LemonBanner type="info">
+                    Get early access to these upcoming features. Let us know what you think!
+                </LemonBanner>
+                <FeaturePreviews />
+            </div>
+        </div>
+    )
+}
diff --git a/frontend/src/layout/navigation/TopBar/NotificationBell.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/activity/NotificationBell.tsx
similarity index 94%
rename from frontend/src/layout/navigation/TopBar/NotificationBell.tsx
rename to frontend/src/layout/navigation-3000/sidepanel/panels/activity/NotificationBell.tsx
index 206086bfafc47..16b395e5ae3b2 100644
--- a/frontend/src/layout/navigation/TopBar/NotificationBell.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/activity/NotificationBell.tsx
@@ -11,7 +11,7 @@ import { Link } from 'lib/lemon-ui/Link'
 import { Popover } from 'lib/lemon-ui/Popover/Popover'
 import { urls } from 'scenes/urls'
 
-import { notificationsLogic } from '~/layout/navigation/TopBar/notificationsLogic'
+import { notificationsLogic } from '~/layout/navigation-3000/sidepanel/panels/activity/notificationsLogic'
 
 export function NotificationBell(): JSX.Element {
     const { unreadCount, hasNotifications, notifications, isNotificationPopoverOpen, hasUnread } =
@@ -27,7 +27,7 @@ export function NotificationBell(): JSX.Element {
             visible={isNotificationPopoverOpen}
             onClickOutside={() => (isNotificationPopoverOpen ? toggleNotificationsPopover() : null)}
             overlay={
-                <div className="activity-log notifications-menu">
+                <div className="ActivityLog notifications-menu">
                     <h5>
                         Notifications{' '}
                         <LemonTag type="warning" className="ml-1">
diff --git a/frontend/src/layout/navigation/TopBar/NotificationsBell.scss b/frontend/src/layout/navigation-3000/sidepanel/panels/activity/NotificationsBell.scss
similarity index 100%
rename from frontend/src/layout/navigation/TopBar/NotificationsBell.scss
rename to frontend/src/layout/navigation-3000/sidepanel/panels/activity/NotificationsBell.scss
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/activity/SidePanelActivity.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/activity/SidePanelActivity.tsx
new file mode 100644
index 0000000000000..8fec932f720c9
--- /dev/null
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/activity/SidePanelActivity.tsx
@@ -0,0 +1,150 @@
+import { LemonBanner, LemonButton, LemonSkeleton, LemonTabs, Link, Spinner } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { ActivityLogRow } from 'lib/components/ActivityLog/ActivityLog'
+import { usePageVisibility } from 'lib/hooks/usePageVisibility'
+import { useEffect, useRef } from 'react'
+import { urls } from 'scenes/urls'
+
+import {
+    notificationsLogic,
+    SidePanelActivityTab,
+} from '~/layout/navigation-3000/sidepanel/panels/activity/notificationsLogic'
+
+import { SidePanelPaneHeader } from '../../components/SidePanelPaneHeader'
+
+const SCROLL_TRIGGER_OFFSET = 100
+
+export const SidePanelActivity = (): JSX.Element => {
+    const {
+        hasNotifications,
+        notifications,
+        activeTab,
+        allActivity,
+        allActivityResponseLoading,
+        allActivityHasNext,
+        importantChangesLoading,
+        hasUnread,
+    } = useValues(notificationsLogic)
+    const { togglePolling, setActiveTab, maybeLoadOlderActivity, markAllAsRead, loadImportantChanges } =
+        useActions(notificationsLogic)
+
+    usePageVisibility((pageIsVisible) => {
+        togglePolling(pageIsVisible)
+    })
+
+    useEffect(() => {
+        loadImportantChanges(false)
+        return () => {
+            markAllAsRead()
+            togglePolling(false)
+        }
+    }, [])
+
+    const lastScrollPositionRef = useRef(0)
+    const contentRef = useRef<HTMLDivElement | null>(null)
+
+    const handleScroll = (e: React.UIEvent<HTMLDivElement>): void => {
+        // If we are scrolling down then check if we are at the bottom of the list
+        if (e.currentTarget.scrollTop > lastScrollPositionRef.current) {
+            const scrollPosition = e.currentTarget.scrollTop + e.currentTarget.clientHeight
+            if (e.currentTarget.scrollHeight - scrollPosition < SCROLL_TRIGGER_OFFSET) {
+                maybeLoadOlderActivity()
+            }
+        }
+
+        lastScrollPositionRef.current = e.currentTarget.scrollTop
+    }
+
+    return (
+        <div className="flex flex-col overflow-hidden">
+            <SidePanelPaneHeader title="Activity" />
+            <div className="flex flex-col overflow-hidden">
+                <div className="shrink-0 mx-2">
+                    <LemonTabs
+                        activeKey={activeTab as SidePanelActivityTab}
+                        onChange={(key) => setActiveTab(key)}
+                        tabs={[
+                            {
+                                key: SidePanelActivityTab.Unread,
+                                label: 'My notifications',
+                            },
+                            {
+                                key: SidePanelActivityTab.All,
+                                label: 'All activity',
+                            },
+                        ]}
+                    />
+                </div>
+
+                <div className="flex-1 overflow-y-auto px-2">
+                    {activeTab === SidePanelActivityTab.Unread ? (
+                        <div className="flex-1 overflow-y-auto space-y-px">
+                            <LemonBanner type="info" className="mb-2">
+                                Notifications shows you changes others make to{' '}
+                                <Link to={urls.savedInsights('history')}>Insights</Link> and{' '}
+                                <Link to={urls.featureFlags('history')}>Feature Flags</Link> that you created. Come join{' '}
+                                <Link to={'https://posthog.com/community'}>our community forum</Link> and tell us what
+                                else should be here!
+                            </LemonBanner>
+
+                            {hasUnread ? (
+                                <div className="flex justify-end mb-2">
+                                    <LemonButton
+                                        type="secondary"
+                                        onClick={() => markAllAsRead()}
+                                        loading={importantChangesLoading}
+                                    >
+                                        Mark all as read
+                                    </LemonButton>
+                                </div>
+                            ) : null}
+
+                            {importantChangesLoading && !hasNotifications ? (
+                                <LemonSkeleton className="my-2 h-12" repeat={10} fade />
+                            ) : hasNotifications ? (
+                                notifications.map((logItem, index) => (
+                                    <ActivityLogRow logItem={logItem} key={index} showExtendedDescription={false} />
+                                ))
+                            ) : (
+                                <p>You're all caught up!</p>
+                            )}
+                        </div>
+                    ) : (
+                        <div className="flex-1 overflow-y-auto space-y-px" ref={contentRef} onScroll={handleScroll}>
+                            {allActivityResponseLoading && !allActivity.length ? (
+                                <LemonSkeleton className="my-2 h-12" repeat={10} fade />
+                            ) : allActivity.length ? (
+                                <>
+                                    {allActivity.map((logItem, index) => (
+                                        <ActivityLogRow logItem={logItem} key={index} showExtendedDescription={false} />
+                                    ))}
+
+                                    <div className="m-4 h-10 flex items-center justify-center gap-2 text-muted-alt">
+                                        {allActivityResponseLoading ? (
+                                            <>
+                                                <Spinner textColored /> Loading older activity
+                                            </>
+                                        ) : allActivityHasNext ? (
+                                            <LemonButton
+                                                type="secondary"
+                                                fullWidth
+                                                center
+                                                onClick={() => maybeLoadOlderActivity()}
+                                            >
+                                                Load more
+                                            </LemonButton>
+                                        ) : (
+                                            'No more results'
+                                        )}
+                                    </div>
+                                </>
+                            ) : (
+                                <p>You're all caught up!</p>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/frontend/src/layout/navigation/TopBar/notificationsLogic.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/activity/notificationsLogic.tsx
similarity index 64%
rename from frontend/src/layout/navigation/TopBar/notificationsLogic.tsx
rename to frontend/src/layout/navigation-3000/sidepanel/panels/activity/notificationsLogic.tsx
index 1dcf216b92566..7c812e2da8275 100644
--- a/frontend/src/layout/navigation/TopBar/notificationsLogic.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/activity/notificationsLogic.tsx
@@ -5,13 +5,13 @@ import { describerFor } from 'lib/components/ActivityLog/activityLogLogic'
 import { ActivityLogItem, humanize, HumanizedActivityLogItem } from 'lib/components/ActivityLog/humanizeActivity'
 import { dayjs } from 'lib/dayjs'
 import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
+import { toParams } from 'lib/utils'
 import posthog from 'posthog-js'
 import { teamLogic } from 'scenes/teamLogic'
 
 import type { notificationsLogicType } from './notificationsLogicType'
 
 const POLL_TIMEOUT = 5 * 60 * 1000
-const MARK_READ_TIMEOUT = 2500
 
 export interface ChangelogFlagPayload {
     notificationDate: dayjs.Dayjs
@@ -20,44 +20,71 @@ export interface ChangelogFlagPayload {
 
 export interface ChangesResponse {
     results: ActivityLogItem[]
+    next: string | null
     last_read: string
 }
 
+export enum SidePanelActivityTab {
+    Unread = 'unread',
+    All = 'all',
+}
+
 export const notificationsLogic = kea<notificationsLogicType>([
     path(['layout', 'navigation', 'TopBar', 'notificationsLogic']),
     actions({
         toggleNotificationsPopover: true,
         togglePolling: (pageIsVisible: boolean) => ({ pageIsVisible }),
-        setPollTimeout: (pollTimeout: number) => ({ pollTimeout }),
-        setMarkReadTimeout: (markReadTimeout: number) => ({ markReadTimeout }),
         incrementErrorCount: true,
         clearErrorCount: true,
-        markAllAsRead: (bookmarkDate: string) => ({ bookmarkDate }),
+        markAllAsRead: true,
+        setActiveTab: (tab: SidePanelActivityTab) => ({ tab }),
+        loadAllActivity: true,
+        loadOlderActivity: true,
+        maybeLoadOlderActivity: true,
+        loadImportantChanges: (onlyUnread = true) => ({ onlyUnread }),
     }),
-    loaders(({ actions, values }) => ({
+    loaders(({ actions, values, cache }) => ({
         importantChanges: [
             null as ChangesResponse | null,
             {
-                markAllAsRead: ({ bookmarkDate }) => {
+                markAllAsRead: async () => {
                     const current = values.importantChanges
                     if (!current) {
                         return null
                     }
 
+                    const latestNotification = values.notifications.reduce((a, b) =>
+                        a.created_at.isAfter(b.created_at) ? a : b
+                    )
+
+                    if (!latestNotification.unread) {
+                        return current
+                    }
+
+                    await api.create(
+                        `api/projects/${teamLogic.values.currentTeamId}/activity_log/bookmark_activity_notification`,
+                        {
+                            bookmark: latestNotification.created_at.toISOString(),
+                        }
+                    )
+
                     return {
-                        last_read: bookmarkDate,
+                        last_read: latestNotification.created_at.toISOString(),
+                        next: current.next,
                         results: current.results.map((ic) => ({ ...ic, unread: false })),
                     }
                 },
-                loadImportantChanges: async (_, breakpoint) => {
+                loadImportantChanges: async ({ onlyUnread }, breakpoint) => {
                     await breakpoint(1)
 
-                    clearTimeout(values.pollTimeout)
+                    clearTimeout(cache.pollTimeout)
 
                     try {
                         const response = await api.get<ChangesResponse>(
-                            `api/projects/${teamLogic.values.currentTeamId}/activity_log/important_changes`
+                            `api/projects/${teamLogic.values.currentTeamId}/activity_log/important_changes?` +
+                                toParams({ unread: onlyUnread })
                         )
+
                         // we can't rely on automatic success action here because we swallow errors so always succeed
                         actions.clearErrorCount()
                         return response
@@ -70,14 +97,46 @@ export const notificationsLogic = kea<notificationsLogicType>([
                         const pollTimeoutMilliseconds = values.errorCounter
                             ? POLL_TIMEOUT * values.errorCounter
                             : POLL_TIMEOUT
-                        const timeout = window.setTimeout(actions.loadImportantChanges, pollTimeoutMilliseconds)
-                        actions.setPollTimeout(timeout)
+                        cache.pollTimeout = window.setTimeout(actions.loadImportantChanges, pollTimeoutMilliseconds)
                     }
                 },
             },
         ],
+        allActivityResponse: [
+            null as ChangesResponse | null,
+            {
+                loadAllActivity: async (_, breakpoint) => {
+                    await breakpoint(1)
+
+                    const response = await api.get<ChangesResponse>(
+                        `api/projects/${teamLogic.values.currentTeamId}/activity_log`
+                    )
+                    return response
+                },
+
+                loadOlderActivity: async (_, breakpoint) => {
+                    await breakpoint(1)
+
+                    if (!values.allActivityResponse?.next) {
+                        return values.allActivityResponse
+                    }
+
+                    const response = await api.get<ChangesResponse>(values.allActivityResponse.next)
+
+                    response.results = [...values.allActivityResponse.results, ...response.results]
+
+                    return response
+                },
+            },
+        ],
     })),
     reducers({
+        activeTab: [
+            SidePanelActivityTab.Unread as SidePanelActivityTab,
+            {
+                setActiveTab: (_, { tab }) => tab,
+            },
+        ],
         errorCounter: [
             0,
             {
@@ -91,48 +150,33 @@ export const notificationsLogic = kea<notificationsLogicType>([
                 toggleNotificationsPopover: (state) => !state,
             },
         ],
-        isPolling: [true, { togglePolling: (_, { pageIsVisible }) => pageIsVisible }],
-        pollTimeout: [
-            0,
-            {
-                setPollTimeout: (_, payload) => payload.pollTimeout,
-            },
-        ],
-        markReadTimeout: [
-            0,
-            {
-                setMarkReadTimeout: (_, payload) => payload.markReadTimeout,
-            },
-        ],
     }),
     listeners(({ values, actions }) => ({
         toggleNotificationsPopover: () => {
             if (!values.isNotificationPopoverOpen) {
-                clearTimeout(values.markReadTimeout)
-            } else {
-                if (values.notifications?.[0]) {
-                    const bookmarkDate = values.notifications.reduce((a, b) =>
-                        a.created_at.isAfter(b.created_at) ? a : b
-                    ).created_at
-                    actions.setMarkReadTimeout(
-                        window.setTimeout(() => {
-                            void api
-                                .create(
-                                    `api/projects/${teamLogic.values.currentTeamId}/activity_log/bookmark_activity_notification`,
-                                    {
-                                        bookmark: bookmarkDate.toISOString(),
-                                    }
-                                )
-                                .then(() => {
-                                    actions.markAllAsRead(bookmarkDate.toISOString())
-                                })
-                        }, MARK_READ_TIMEOUT)
-                    )
-                }
+                actions.markAllAsRead()
+            }
+        },
+        setActiveTab: ({ tab }) => {
+            if (tab === SidePanelActivityTab.All && !values.allActivityResponseLoading) {
+                actions.loadAllActivity()
+            }
+        },
+
+        maybeLoadOlderActivity: () => {
+            if (!values.allActivityResponseLoading && values.allActivityResponse?.next) {
+                actions.loadOlderActivity()
             }
         },
     })),
     selectors({
+        allActivity: [
+            (s) => [s.allActivityResponse],
+            (allActivityResponse): HumanizedActivityLogItem[] => {
+                return humanize(allActivityResponse?.results || [], describerFor, true)
+            },
+        ],
+        allActivityHasNext: [(s) => [s.allActivityResponse], (allActivityResponse) => !!allActivityResponse?.next],
         notifications: [
             (s) => [s.importantChanges],
             (importantChanges): HumanizedActivityLogItem[] => {
@@ -183,6 +227,7 @@ export const notificationsLogic = kea<notificationsLogicType>([
                 }
             },
         ],
+
         hasNotifications: [(s) => [s.notifications], (notifications) => !!notifications.length],
         unread: [
             (s) => [s.notifications],
@@ -191,11 +236,10 @@ export const notificationsLogic = kea<notificationsLogicType>([
         unreadCount: [(s) => [s.unread], (unread) => (unread || []).length],
         hasUnread: [(s) => [s.unreadCount], (unreadCount) => unreadCount > 0],
     }),
-    events(({ actions, values }) => ({
-        afterMount: () => actions.loadImportantChanges(null),
+    events(({ actions, cache }) => ({
+        afterMount: () => actions.loadImportantChanges(),
         beforeUnmount: () => {
-            clearTimeout(values.pollTimeout)
-            clearTimeout(values.markReadTimeout)
+            clearTimeout(cache.pollTimeout)
         },
     })),
 ])
diff --git a/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx b/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx
index fb2a667d7a906..e0ec4f75bfbae 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx
@@ -6,9 +6,12 @@ import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 
 import { SidePanelTab } from '~/types'
 
+import { notificationsLogic } from './panels/activity/notificationsLogic'
 import type { sidePanelLogicType } from './sidePanelLogicType'
 import { sidePanelStateLogic } from './sidePanelStateLogic'
 
+const ALWAYS_EXTRA_TABS = [SidePanelTab.Settings, SidePanelTab.FeaturePreviews, SidePanelTab.Activity]
+
 export const sidePanelLogic = kea<sidePanelLogicType>([
     path(['scenes', 'navigation', 'sidepanel', 'sidePanelLogic']),
     connect({
@@ -21,6 +24,9 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
             ['isReady', 'hasCompletedAllTasks'],
             sidePanelStateLogic,
             ['selectedTab', 'sidePanelOpen'],
+            // We need to mount this to ensure that marking as read works when the panel closes
+            notificationsLogic,
+            ['unreadCount'],
         ],
     }),
 
@@ -41,6 +47,11 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
                 tabs.push(SidePanelTab.Docs)
                 tabs.push(SidePanelTab.Settings)
                 tabs.push(SidePanelTab.Activation)
+                tabs.push(SidePanelTab.Activity)
+
+                if (featureFlags[FEATURE_FLAGS.EARLY_ACCESS_FEATURE_SITE_BUTTON]) {
+                    tabs.push(SidePanelTab.FeaturePreviews)
+                }
 
                 return tabs
             },
@@ -55,7 +66,7 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
                     }
 
                     // Hide certain tabs unless they are selected
-                    if ([SidePanelTab.Settings].includes(tab)) {
+                    if (ALWAYS_EXTRA_TABS.includes(tab)) {
                         return false
                     }
 
@@ -67,5 +78,12 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
                 })
             },
         ],
+
+        extraTabs: [
+            (s) => [s.enabledTabs, s.visibleTabs],
+            (enabledTabs, visibleTabs): SidePanelTab[] => {
+                return enabledTabs.filter((tab: any) => !visibleTabs.includes(tab))
+            },
+        ],
     }),
 ])
diff --git a/frontend/src/layout/navigation-3000/themeLogic.ts b/frontend/src/layout/navigation-3000/themeLogic.ts
index d8997a18c20a0..de89486714137 100644
--- a/frontend/src/layout/navigation-3000/themeLogic.ts
+++ b/frontend/src/layout/navigation-3000/themeLogic.ts
@@ -1,5 +1,4 @@
 import { actions, connect, events, kea, path, reducers, selectors } from 'kea'
-import { subscriptions } from 'kea-subscriptions'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { sceneLogic } from 'scenes/sceneLogic'
@@ -65,11 +64,6 @@ export const themeLogic = kea<themeLogicType>([
             },
         ],
     }),
-    subscriptions({
-        isDarkModeOn: (isDarkModeOn) => {
-            document.body.setAttribute('theme', isDarkModeOn ? 'dark' : 'light')
-        },
-    }),
     events(({ cache, actions }) => ({
         afterMount() {
             cache.prefersColorSchemeMedia = window.matchMedia('(prefers-color-scheme: dark)')
diff --git a/frontend/src/layout/navigation/TopBar/SitePopover.tsx b/frontend/src/layout/navigation/TopBar/SitePopover.tsx
index 4a5e4ee0e9f58..777ac1d0a4ae6 100644
--- a/frontend/src/layout/navigation/TopBar/SitePopover.tsx
+++ b/frontend/src/layout/navigation/TopBar/SitePopover.tsx
@@ -1,4 +1,4 @@
-import { IconLive } from '@posthog/icons'
+import { IconFeatures, IconLive } from '@posthog/icons'
 import { LemonButtonPropsBase } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
@@ -14,7 +14,6 @@ import {
     IconLogout,
     IconOffline,
     IconPlus,
-    IconRedeem,
     IconSettings,
     IconUpdate,
 } from 'lib/lemon-ui/icons'
@@ -218,7 +217,7 @@ function FeaturePreviewsButton(): JSX.Element {
                 }
             }}
             data-attr={isUsingSiteApp ? 'early-access-feature-button' : undefined}
-            icon={<IconRedeem />}
+            icon={<IconFeatures />}
             fullWidth
         >
             Feature previews
diff --git a/frontend/src/layout/navigation/TopBar/TopBar.tsx b/frontend/src/layout/navigation/TopBar/TopBar.tsx
index 73252e825e95e..51600db592a1e 100644
--- a/frontend/src/layout/navigation/TopBar/TopBar.tsx
+++ b/frontend/src/layout/navigation/TopBar/TopBar.tsx
@@ -14,7 +14,7 @@ import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { organizationLogic } from 'scenes/organizationLogic'
 
 import { NotebookButton } from '~/layout/navigation/TopBar/NotebookButton'
-import { NotificationBell } from '~/layout/navigation/TopBar/NotificationBell'
+import { NotificationBell } from '~/layout/navigation-3000/sidepanel/panels/activity/NotificationBell'
 import { groupsModel } from '~/models/groupsModel'
 import { Logo } from '~/toolbar/assets/Logo'
 
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 6e3ce2cb92e6c..2f88e8429b99a 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -52,6 +52,8 @@ import {
     RoleMemberType,
     RolesListParams,
     RoleType,
+    SearchListParams,
+    SearchResponse,
     SessionRecordingPlaylistType,
     SessionRecordingSnapshotResponse,
     SessionRecordingsResponse,
@@ -461,6 +463,11 @@ class ApiRequest {
         return this.persons().addPathComponent('activity')
     }
 
+    // # Search
+    public search(teamId?: TeamType['id']): ApiRequest {
+        return this.projectsDetail(teamId).addPathComponent('search')
+    }
+
     // # Annotations
     public annotations(teamId?: TeamType['id']): ApiRequest {
         return this.projectsDetail(teamId).addPathComponent('annotations')
@@ -1226,6 +1233,12 @@ const api = {
         },
     },
 
+    search: {
+        async list(params: SearchListParams): Promise<SearchResponse> {
+            return await new ApiRequest().search().withQueryString(toParams(params, true)).get()
+        },
+    },
+
     sharing: {
         async get({
             dashboardId,
diff --git a/frontend/src/lib/components/ActivityLog/ActivityLog.scss b/frontend/src/lib/components/ActivityLog/ActivityLog.scss
index 420d9bf8f2235..8aa6345f19035 100644
--- a/frontend/src/lib/components/ActivityLog/ActivityLog.scss
+++ b/frontend/src/lib/components/ActivityLog/ActivityLog.scss
@@ -1,10 +1,11 @@
-.activity-log {
+.ActivityLog {
     &.notifications-menu {
         max-width: 25rem;
     }
 
-    .summary-card {
+    .ActivityDescription {
         padding: 1rem;
+        background: var(--bg-light);
         border: 1px solid var(--border);
         border-radius: var(--radius);
 
@@ -22,47 +23,43 @@
         }
     }
 
-    .activity-log-row {
-        display: flex;
-        gap: 0.5rem;
+    .page-caption {
         max-width: 50rem;
-        padding: 0.5rem;
-        margin-top: 0.5rem;
-        line-height: 24px;
-        overflow-wrap: anywhere;
+    }
+}
 
-        &.unread {
-            background-color: var(--primary-highlight);
-        }
+.ActivityLogRow {
+    display: flex;
+    gap: 0.5rem;
+    max-width: 50rem;
+    padding: 0.5rem;
+    line-height: 24px;
+    overflow-wrap: anywhere;
 
-        &:first-of-type {
-            margin-top: 0.5rem;
-        }
+    &--unread {
+        background-color: var(--primary-3000-highlight);
+        border-radius: var(--radius);
+    }
 
-        .ProfilePicture {
-            flex-grow: 0;
-        }
+    .ProfilePicture {
+        flex-grow: 0;
+    }
 
-        .details {
-            flex-grow: 1;
+    .ActivityLogRow__details {
+        flex-grow: 1;
 
-            .highlighted-activity {
-                display: inline;
-                background-color: var(--mark);
+        .highlighted-activity {
+            display: inline;
+            background-color: var(--mark);
 
-                & > .PersonDisplay {
-                    min-width: 5.5rem;
-                }
+            & > .PersonDisplay {
+                min-width: 5.5rem;
             }
         }
     }
 
-    .activity-description-extended {
+    .ActivityLogRow__description__extended {
         margin-top: 0.5rem;
         margin-bottom: 0.5rem;
     }
-
-    .page-caption {
-        max-width: 50rem;
-    }
 }
diff --git a/frontend/src/lib/components/ActivityLog/ActivityLog.tsx b/frontend/src/lib/components/ActivityLog/ActivityLog.tsx
index 336f831dd0ea0..52834f7479876 100644
--- a/frontend/src/lib/components/ActivityLog/ActivityLog.tsx
+++ b/frontend/src/lib/components/ActivityLog/ActivityLog.tsx
@@ -39,7 +39,7 @@ const Empty = ({ scope }: { scope: string }): JSX.Element => {
 
 const SkeletonLog = (): JSX.Element => {
     return (
-        <div className="activity-log-row items-start">
+        <div className="ActivityLogRow items-start">
             <LemonSkeleton.Circle />
             <div className="details space-y-4 mt-2">
                 <LemonSkeleton className="w-1/2 h-4" />
@@ -70,7 +70,7 @@ export const ActivityLogRow = ({
     renderSideAction?: ActivityLogProps['renderSideAction']
 }): JSX.Element => {
     return (
-        <div className={clsx('activity-log-row', logItem.unread && 'unread')}>
+        <div className={clsx('ActivityLogRow', logItem.unread && 'ActivityLogRow--unread')}>
             <ProfilePicture
                 showName={false}
                 name={logItem.isSystem ? logItem.name : undefined}
@@ -78,10 +78,10 @@ export const ActivityLogRow = ({
                 email={logItem.email ?? undefined}
                 size={'xl'}
             />
-            <div className="details">
-                <div className="activity-description">{logItem.description}</div>
+            <div className="ActivityLogRow__details">
+                <div className="ActivityLogRow__description">{logItem.description}</div>
                 {showExtendedDescription && logItem.extendedDescription && (
-                    <div className="activity-description-extended">{logItem.extendedDescription}</div>
+                    <div className="ActivityLogRow__description__extended">{logItem.extendedDescription}</div>
                 )}
                 <div className={'text-muted'}>
                     <TZLabel time={logItem.created_at} />
@@ -105,7 +105,7 @@ export const ActivityLog = ({
     const paginationState = usePagination(humanizedActivity || [], pagination)
 
     return (
-        <div className="activity-log">
+        <div className="ActivityLog">
             {caption && <div className="page-caption">{caption}</div>}
             {activityLoading && humanizedActivity.length === 0 ? (
                 <Loading />
@@ -113,14 +113,16 @@ export const ActivityLog = ({
                 <Empty scope={scope} />
             ) : (
                 <>
-                    {humanizedActivity.map((logItem, index) => (
-                        <ActivityLogRow
-                            key={index}
-                            logItem={logItem}
-                            showExtendedDescription={true}
-                            renderSideAction={renderSideAction}
-                        />
-                    ))}
+                    <div className="space-y-2">
+                        {humanizedActivity.map((logItem, index) => (
+                            <ActivityLogRow
+                                key={index}
+                                logItem={logItem}
+                                showExtendedDescription={true}
+                                renderSideAction={renderSideAction}
+                            />
+                        ))}
+                    </div>
                     <LemonDivider />
                     <PaginationControl {...paginationState} nouns={['activity', 'activities']} />
                 </>
diff --git a/frontend/src/lib/components/ActivityLog/humanizeActivity.tsx b/frontend/src/lib/components/ActivityLog/humanizeActivity.tsx
index cd8ef8a39e0fd..e1dc145a86a8b 100644
--- a/frontend/src/lib/components/ActivityLog/humanizeActivity.tsx
+++ b/frontend/src/lib/components/ActivityLog/humanizeActivity.tsx
@@ -51,7 +51,7 @@ export enum ActivityScope {
 }
 
 export type ActivityLogItem = {
-    user: ActivityUser
+    user?: ActivityUser
     activity: string
     created_at: string
     scope: ActivityScope
@@ -109,9 +109,9 @@ export function humanize(
 
         if (description !== null) {
             logLines.push({
-                email: logItem.user.email,
-                name: logItem.user.first_name,
-                isSystem: logItem.user.is_system,
+                email: logItem.user?.email,
+                name: logItem.user?.first_name,
+                isSystem: logItem.is_system,
                 description,
                 extendedDescription,
                 created_at: dayjs(logItem.created_at),
@@ -121,3 +121,10 @@ export function humanize(
     }
     return logLines
 }
+
+export function userNameForLogItem(logItem: ActivityLogItem): string {
+    if (logItem.is_system) {
+        return 'PostHog'
+    }
+    return logItem.user?.first_name ?? 'A user'
+}
diff --git a/frontend/src/lib/components/CommandBar/CommandBar.stories.tsx b/frontend/src/lib/components/CommandBar/CommandBar.stories.tsx
index 898e3bc1de0c4..67fc3cb657868 100644
--- a/frontend/src/lib/components/CommandBar/CommandBar.stories.tsx
+++ b/frontend/src/lib/components/CommandBar/CommandBar.stories.tsx
@@ -12,37 +12,128 @@ const SEARCH_RESULT = {
     results: [
         {
             type: 'insight',
-            result_id: '3b7NrJXF',
+            result_id: 'NmLsyopa',
             extra_fields: {
                 name: '',
+                query: null,
+                filters: {
+                    events: [
+                        {
+                            id: '$pageview',
+                            math: 'total',
+                            name: '$pageview',
+                            type: 'events',
+                            order: 0,
+                        },
+                    ],
+                    display: 'ActionsLineGraph',
+                    insight: 'TRENDS',
+                    interval: 'day',
+                    entity_type: 'events',
+                    filter_test_accounts: true,
+                },
                 description: '',
-                derived_name: 'SQL query',
             },
         },
         {
             type: 'insight',
-            result_id: 'U2W7bAq1',
+            result_id: 'QcCPEk7d',
+            extra_fields: {
+                name: 'Daily unique visitors over time',
+                query: null,
+                filters: {
+                    events: [
+                        {
+                            id: '$pageview',
+                            math: 'dau',
+                            type: 'events',
+                            order: 0,
+                        },
+                        {
+                            id: null,
+                            math: 'total',
+                            type: 'events',
+                            order: 1,
+                        },
+                    ],
+                    date_to: null,
+                    display: 'ActionsLineGraph',
+                    insight: 'TRENDS',
+                    interval: 'day',
+                    date_from: '-6m',
+                    entity_type: 'events',
+                },
+                description: null,
+            },
+        },
+        {
+            type: 'insight',
+            result_id: '38EAleI9',
             extra_fields: {
                 name: '',
+                query: {
+                    full: true,
+                    kind: 'DataTableNode',
+                    source: {
+                        kind: 'HogQLQuery',
+                        query: '   select event,\n          person.properties.email,\n          properties.$browser,\n          count()\n     from events\n    where {filters} -- replaced with global date and property filters\n      and person.properties.email is not null\n group by event,\n          properties.$browser,\n          person.properties.email\n order by count() desc\n    limit 100',
+                        filters: {
+                            dateRange: {
+                                date_from: '-24h',
+                            },
+                        },
+                    },
+                },
+                filters: {},
                 description: '',
-                derived_name: 'All events → All events user conversion rate',
             },
         },
         {
-            type: 'feature_flag',
-            result_id: '120',
+            type: 'insight',
+            result_id: 'zi5MCnjs',
             extra_fields: {
-                key: 'person-on-events-enabled',
-                name: 'person-on-events-enabled',
+                name: 'Feature Flag Called Total Volume',
+                query: null,
+                filters: {
+                    events: [
+                        {
+                            id: '$feature_flag_called',
+                            name: '$feature_flag_called',
+                            type: 'events',
+                        },
+                    ],
+                    display: 'ActionsLineGraph',
+                    insight: 'TRENDS',
+                    interval: 'day',
+                    breakdown: '$feature_flag_response',
+                    date_from: '-30d',
+                    properties: {
+                        type: 'AND',
+                        values: [
+                            {
+                                type: 'AND',
+                                values: [
+                                    {
+                                        key: '$feature_flag',
+                                        type: 'event',
+                                        value: 'notebooks',
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                    breakdown_type: 'event',
+                    filter_test_accounts: false,
+                },
+                description: 'Shows the number of total calls made on feature flag with key: notebooks',
             },
         },
         {
-            type: 'insight',
-            result_id: '44fpCyF7',
+            type: 'feature_flag',
+            result_id: '120',
             extra_fields: {
-                name: '',
-                description: '',
-                derived_name: 'User lifecycle based on Pageview',
+                key: 'person-on-events-enabled',
+                name: 'person-on-events-enabled',
             },
         },
         {
@@ -61,44 +152,6 @@ const SEARCH_RESULT = {
                 text_content: 'Notes 27/09\nasd\nas\nda\ns\nd\nlalala',
             },
         },
-        {
-            type: 'insight',
-            result_id: 'Ap5YYl2H',
-            extra_fields: {
-                name: '',
-                description: '',
-                derived_name:
-                    'Pageview count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count',
-            },
-        },
-        {
-            type: 'insight',
-            result_id: '4Xaltnro',
-            extra_fields: {
-                name: '',
-                description: '',
-                derived_name: 'User paths based on page views and custom events',
-            },
-        },
-        {
-            type: 'insight',
-            result_id: 'HUkkq7Au',
-            extra_fields: {
-                name: '',
-                description: '',
-                derived_name:
-                    'Pageview count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count',
-            },
-        },
-        {
-            type: 'insight',
-            result_id: 'hF5z02Iw',
-            extra_fields: {
-                name: '',
-                description: '',
-                derived_name: 'Pageview count & All events count',
-            },
-        },
         {
             type: 'feature_flag',
             result_id: '143',
@@ -115,6 +168,28 @@ const SEARCH_RESULT = {
                 name: 'onboarding-v2-demo',
             },
         },
+        {
+            type: 'insight',
+            result_id: 'miwdcAAu',
+            extra_fields: {
+                name: '',
+                query: {
+                    full: true,
+                    kind: 'DataTableNode',
+                    source: {
+                        kind: 'HogQLQuery',
+                        query: '   select event,\n          person.properties.email,\n          properties.$browser,\n          count()\n     from events\n    where {filters} -- replaced with global date and property filters\n      and person.properties.email is not null\n group by event,\n          properties.$browser,\n          person.properties.email\n order by count() desc\n    limit 100',
+                        filters: {
+                            dateRange: {
+                                date_from: '-24h',
+                            },
+                        },
+                    },
+                },
+                filters: {},
+                description: '',
+            },
+        },
         {
             type: 'feature_flag',
             result_id: '142',
@@ -124,12 +199,11 @@ const SEARCH_RESULT = {
             },
         },
         {
-            type: 'insight',
-            result_id: '94r9bOyB',
+            type: 'notebook',
+            result_id: 'eq4n8PQY',
             extra_fields: {
-                name: '',
-                description: '',
-                derived_name: 'Pageview count & All events count',
+                title: 'asd',
+                text_content: 'asd',
             },
         },
         {
@@ -140,21 +214,61 @@ const SEARCH_RESULT = {
                 description: 'Company overview.',
             },
         },
-        {
-            type: 'notebook',
-            result_id: 'eq4n8PQY',
-            extra_fields: {
-                title: 'asd',
-                text_content: 'asd',
-            },
-        },
         {
             type: 'insight',
-            result_id: 'QcCPEk7d',
+            result_id: 'YZjAFWBU',
             extra_fields: {
-                name: 'Daily unique visitors over time',
+                name: 'Homepage view to signup conversion',
+                query: null,
+                filters: {
+                    events: [
+                        {
+                            id: '$pageview',
+                            name: '$pageview',
+                            type: 'events',
+                            order: 0,
+                            properties: [
+                                {
+                                    key: '$current_url',
+                                    type: 'event',
+                                    value: 'https://hedgebox.net/',
+                                    operator: 'exact',
+                                },
+                            ],
+                            custom_name: 'Viewed homepage',
+                        },
+                        {
+                            id: '$pageview',
+                            name: '$pageview',
+                            type: 'events',
+                            order: 1,
+                            properties: [
+                                {
+                                    key: '$current_url',
+                                    type: 'event',
+                                    value: 'https://hedgebox.net/signup/',
+                                    operator: 'regex',
+                                },
+                            ],
+                            custom_name: 'Viewed signup page',
+                        },
+                        {
+                            id: 'signed_up',
+                            name: 'signed_up',
+                            type: 'events',
+                            order: 2,
+                            custom_name: 'Signed up',
+                        },
+                    ],
+                    actions: [],
+                    display: 'FunnelViz',
+                    insight: 'FUNNELS',
+                    interval: 'day',
+                    date_from: '-1m',
+                    funnel_viz_type: 'steps',
+                    filter_test_accounts: true,
+                },
                 description: null,
-                derived_name: '$pageview unique users & All events count',
             },
         },
         {
@@ -167,21 +281,50 @@ const SEARCH_RESULT = {
         },
         {
             type: 'insight',
-            result_id: 'PWwez0ma',
-            extra_fields: {
-                name: 'Most popular pages',
-                description: null,
-                derived_name: null,
-            },
-        },
-        {
-            type: 'insight',
-            result_id: 'HKTERZ40',
+            result_id: 'xK9vs4D2',
             extra_fields: {
-                name: 'Feature Flag calls made by unique users per variant',
-                description:
-                    'Shows the number of unique user calls made on feature flag per variant with key: notebooks',
-                derived_name: null,
+                name: '',
+                query: null,
+                filters: {
+                    events: [
+                        {
+                            id: '$pageview',
+                            math: 'total',
+                            name: '$pageview',
+                            type: 'events',
+                            order: 0,
+                        },
+                        {
+                            id: null,
+                            math: 'total',
+                            type: 'events',
+                            order: 1,
+                        },
+                        {
+                            id: null,
+                            math: 'total',
+                            type: 'events',
+                            order: 2,
+                        },
+                    ],
+                    insight: 'FUNNELS',
+                    interval: 'day',
+                    date_from: '-7d',
+                    exclusions: [
+                        {
+                            id: '$pageview',
+                            name: '$pageview',
+                            type: 'events',
+                            uuid: '40e0f8a9-1297-41e4-b7ca-54d00a9c1d82',
+                            order: 0,
+                            funnel_to_step: 1,
+                            funnel_from_step: 0,
+                        },
+                    ],
+                    entity_type: 'events',
+                    funnel_viz_type: 'steps',
+                },
+                description: '',
             },
         },
         {
@@ -202,11 +345,26 @@ const SEARCH_RESULT = {
         },
         {
             type: 'insight',
-            result_id: 'uE7xieYc',
+            result_id: 'vLbs5bhA',
             extra_fields: {
                 name: '',
+                query: null,
+                filters: {
+                    events: [
+                        {
+                            id: '$pageview',
+                            math: 'total',
+                            name: '$pageview',
+                            type: 'events',
+                            order: 0,
+                        },
+                    ],
+                    insight: 'LIFECYCLE',
+                    shown_as: 'Lifecycle',
+                    entity_type: 'events',
+                    filter_test_accounts: false,
+                },
                 description: '',
-                derived_name: 'Pageview count',
             },
         },
         {
@@ -217,22 +375,117 @@ const SEARCH_RESULT = {
                 name: 'surveys-multiple-questions',
             },
         },
+        {
+            type: 'action',
+            result_id: '3',
+            extra_fields: {
+                name: 'typed into search',
+                description: '',
+            },
+        },
         {
             type: 'insight',
-            result_id: 'AVPsaax4',
+            result_id: 'QYrl34sX',
             extra_fields: {
-                name: 'Monthly app revenue',
-                description: null,
-                derived_name: null,
+                name: 'Feature Flag calls made by unique users per variant',
+                query: null,
+                filters: {
+                    events: [
+                        {
+                            id: '$feature_flag_called',
+                            math: 'dau',
+                            name: '$feature_flag_called',
+                            type: 'events',
+                        },
+                    ],
+                    display: 'ActionsTable',
+                    insight: 'TRENDS',
+                    interval: 'day',
+                    breakdown: '$feature_flag_response',
+                    date_from: '-30d',
+                    properties: {
+                        type: 'AND',
+                        values: [
+                            {
+                                type: 'AND',
+                                values: [
+                                    {
+                                        key: '$feature_flag',
+                                        type: 'event',
+                                        value: 'cmd-k-search',
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                    breakdown_type: 'event',
+                    filter_test_accounts: false,
+                },
+                description:
+                    'Shows the number of unique user calls made on feature flag per variant with key: cmd-k-search',
+            },
+        },
+        {
+            type: 'insight',
+            result_id: '4Xaltnro',
+            extra_fields: {
+                name: '',
+                query: null,
+                filters: {
+                    insight: 'PATHS',
+                    step_limit: 5,
+                    entity_type: 'events',
+                    funnel_paths: 'funnel_path_before_step',
+                    funnel_filter: {
+                        events: [
+                            {
+                                id: '$pageview',
+                                math: 'total',
+                                name: '$pageview',
+                                type: 'events',
+                                order: 0,
+                            },
+                            {
+                                id: null,
+                                math: 'total',
+                                type: 'events',
+                                order: 1,
+                            },
+                        ],
+                        insight: 'FUNNELS',
+                        exclusions: [],
+                        funnel_step: 2,
+                        funnel_viz_type: 'steps',
+                        filter_test_accounts: true,
+                    },
+                    include_event_types: ['$pageview', 'custom_event'],
+                },
+                description: '',
+            },
+        },
+        {
+            type: 'feature_flag',
+            result_id: '148',
+            extra_fields: {
+                key: 'show-product-intro-existing-products',
+                name: 'show-product-intro-existing-products',
+            },
+        },
+        {
+            type: 'feature_flag',
+            result_id: '4',
+            extra_fields: {
+                key: 'notebooks',
+                name: '',
             },
         },
     ],
     counts: {
-        insight: 80,
+        insight: 89,
         dashboard: 14,
         experiment: 1,
         feature_flag: 66,
-        notebook: 2,
+        notebook: 5,
         action: 4,
         cohort: 3,
     },
@@ -252,6 +505,7 @@ const meta: Meta<typeof CommandBar> = {
         layout: 'fullscreen',
         testOptions: {
             snapshotTargetSelector: '[data-attr="command-bar"]',
+            include3000: true,
         },
         viewMode: 'story',
     },
diff --git a/frontend/src/lib/components/CommandBar/SearchBarTab.tsx b/frontend/src/lib/components/CommandBar/SearchBarTab.tsx
index e71cda427e5bd..d23504286798d 100644
--- a/frontend/src/lib/components/CommandBar/SearchBarTab.tsx
+++ b/frontend/src/lib/components/CommandBar/SearchBarTab.tsx
@@ -2,50 +2,52 @@ import { useActions, useValues } from 'kea'
 import { Spinner } from 'lib/lemon-ui/Spinner'
 import { RefObject } from 'react'
 
-import { resultTypeToName } from './constants'
+import { Tab, tabToName } from './constants'
 import { searchBarLogic } from './searchBarLogic'
-import { ResultTypeWithAll } from './types'
 
 type SearchBarTabProps = {
-    type: ResultTypeWithAll
-    active: boolean
-    count?: number | null
+    tab: Tab
     inputRef: RefObject<HTMLInputElement>
 }
 
-export const SearchBarTab = ({ type, active, count, inputRef }: SearchBarTabProps): JSX.Element => {
+export const SearchBarTab = ({ tab, inputRef }: SearchBarTabProps): JSX.Element => {
+    const { activeTab } = useValues(searchBarLogic)
     const { setActiveTab } = useActions(searchBarLogic)
+
+    const isActive = tab === activeTab
+
     return (
         <div
             className={`SearchBarTab flex items-center px-4 py-2 cursor-pointer text-xs whitespace-nowrap border-t-2 ${
-                active ? 'SearchBarTab__active font-bold border-primary-3000' : 'border-transparent'
+                isActive ? 'SearchBarTab__active font-bold border-primary-3000' : 'border-transparent'
             }`}
             onClick={() => {
-                setActiveTab(type)
+                setActiveTab(tab)
                 inputRef.current?.focus()
             }}
         >
-            {resultTypeToName[type]}
-            <Count type={type} active={active} count={count} />
+            {tabToName[tab]}
+            <Count tab={tab} />
         </div>
     )
 }
 
 type CountProps = {
-    type: ResultTypeWithAll
-    active: boolean
-    count?: number | null
+    tab: Tab
 }
 
-const Count = ({ type, active, count }: CountProps): JSX.Element | null => {
-    const { searchResponseLoading } = useValues(searchBarLogic)
+const Count = ({ tab }: CountProps): JSX.Element | null => {
+    const { activeTab, tabsCount, tabsLoading } = useValues(searchBarLogic)
+
+    // TODO: replace todo with condition that time since search start > 1s
+    const isActive = tab === activeTab || true
 
-    if (type === 'all') {
+    if (tab === Tab.All) {
         return null
-    } else if (active && searchResponseLoading) {
+    } else if (isActive && tabsLoading.includes(tab)) {
         return <Spinner className="ml-0.5" />
-    } else if (count != null) {
-        return <span className="ml-1 text-xxs text-muted-3000">{count}</span>
+    } else if (tabsCount[tab] != null) {
+        return <span className="ml-1 text-xxs text-muted-3000">{tabsCount[tab]}</span>
     } else {
         return <span className="ml-1 text-xxs text-muted-3000">&mdash;</span>
     }
diff --git a/frontend/src/lib/components/CommandBar/SearchResult.tsx b/frontend/src/lib/components/CommandBar/SearchResult.tsx
index 2c7d3d091358c..945720851378d 100644
--- a/frontend/src/lib/components/CommandBar/SearchResult.tsx
+++ b/frontend/src/lib/components/CommandBar/SearchResult.tsx
@@ -11,12 +11,12 @@ import { groupsModel } from '~/models/groupsModel'
 import { Node } from '~/queries/schema'
 import { FilterType } from '~/types'
 
-import { resultTypeToName } from './constants'
+import { tabToName } from './constants'
 import { searchBarLogic, urlForResult } from './searchBarLogic'
-import { SearchResult as SearchResultType } from './types'
+import { SearchResult as ResultType } from './types'
 
 type SearchResultProps = {
-    result: SearchResultType
+    result: ResultType
     resultIndex: number
     focused: boolean
     keyboardFocused: boolean
@@ -69,7 +69,7 @@ export const SearchResult = ({ result, resultIndex, focused, keyboardFocused }:
             ref={ref}
         >
             <div className="px-2 py-3 w-full space-y-0.5 flex flex-col items-start">
-                <span className="text-muted-3000 text-xs">{resultTypeToName[result.type]}</span>
+                <span className="text-muted-3000 text-xs">{tabToName[result.type]}</span>
                 <span className="text-text-3000 font-bold">
                     <ResultName result={result} />
                 </span>
@@ -91,7 +91,7 @@ export const SearchResultSkeleton = (): JSX.Element => (
 )
 
 type ResultNameProps = {
-    result: SearchResultType
+    result: ResultType
 }
 
 export const ResultName = ({ result }: ResultNameProps): JSX.Element | null => {
@@ -139,6 +139,6 @@ export const ResultDescription = ({ result }: ResultNameProps): JSX.Element | nu
             />
         )
     } else {
-        return extra_fields.description ? <span>{extra_fields.description}</span> : <i>No description.</i>
+        return 'description' in extra_fields ? <span>{extra_fields.description}</span> : <i>No description.</i>
     }
 }
diff --git a/frontend/src/lib/components/CommandBar/SearchResultPreview.tsx b/frontend/src/lib/components/CommandBar/SearchResultPreview.tsx
index 57bd498e353ea..e79de19baaa3b 100644
--- a/frontend/src/lib/components/CommandBar/SearchResultPreview.tsx
+++ b/frontend/src/lib/components/CommandBar/SearchResultPreview.tsx
@@ -1,21 +1,21 @@
 import { useValues } from 'kea'
 import { ResultDescription, ResultName } from 'lib/components/CommandBar/SearchResult'
 
-import { resultTypeToName } from './constants'
+import { tabToName } from './constants'
 import { searchBarLogic } from './searchBarLogic'
 
 export const SearchResultPreview = (): JSX.Element | null => {
-    const { activeResultIndex, filterSearchResults } = useValues(searchBarLogic)
+    const { activeResultIndex, combinedSearchResults } = useValues(searchBarLogic)
 
-    if (!filterSearchResults || filterSearchResults.length === 0) {
+    if (!combinedSearchResults || combinedSearchResults.length === 0) {
         return null
     }
 
-    const result = filterSearchResults[activeResultIndex]
+    const result = combinedSearchResults[activeResultIndex]
 
     return (
         <div className="border bg-bg-light rounded p-6">
-            <div>{resultTypeToName[result.type]}</div>
+            <div>{tabToName[result.type]}</div>
             <div className="text-text-3000 font-bold text-lg">
                 <ResultName result={result} />
             </div>
diff --git a/frontend/src/lib/components/CommandBar/SearchResults.tsx b/frontend/src/lib/components/CommandBar/SearchResults.tsx
index 0217f5dc1c6e2..b77ed70363c79 100644
--- a/frontend/src/lib/components/CommandBar/SearchResults.tsx
+++ b/frontend/src/lib/components/CommandBar/SearchResults.tsx
@@ -6,28 +6,28 @@ import { SearchResult, SearchResultSkeleton } from './SearchResult'
 import { SearchResultPreview } from './SearchResultPreview'
 
 export const SearchResults = (): JSX.Element => {
-    const { filterSearchResults, searchResponseLoading, activeResultIndex, keyboardResultIndex } =
+    const { combinedSearchResults, combinedSearchLoading, activeResultIndex, keyboardResultIndex } =
         useValues(searchBarLogic)
 
     return (
         <div className="flex grow overflow-hidden">
             <div className="w-1/2 overscroll-none overflow-y-auto border-r bg-bg-light">
-                {searchResponseLoading && (
+                {combinedSearchLoading && (
                     <>
                         <SearchResultSkeleton />
                         <SearchResultSkeleton />
                         <SearchResultSkeleton />
                     </>
                 )}
-                {!searchResponseLoading && filterSearchResults?.length === 0 && (
+                {!combinedSearchLoading && combinedSearchResults?.length === 0 && (
                     <div className="h-full flex flex-col items-center justify-center p-3">
                         <h3 className="mb-0 text-xl">No results</h3>
                         <p className="opacity-75 mb-0">This doesn't happen often, but we're stumped!</p>
                         <DetectiveHog height={150} width={150} />
                     </div>
                 )}
-                {!searchResponseLoading &&
-                    filterSearchResults?.map((result, index) => (
+                {!combinedSearchLoading &&
+                    combinedSearchResults?.map((result, index) => (
                         <SearchResult
                             key={`${result.type}_${result.result_id}`}
                             result={result}
diff --git a/frontend/src/lib/components/CommandBar/SearchTabs.tsx b/frontend/src/lib/components/CommandBar/SearchTabs.tsx
index 4e3d65c29cadd..82f45cee917f9 100644
--- a/frontend/src/lib/components/CommandBar/SearchTabs.tsx
+++ b/frontend/src/lib/components/CommandBar/SearchTabs.tsx
@@ -1,33 +1,16 @@
-import { useValues } from 'kea'
 import { RefObject } from 'react'
 
-import { searchBarLogic } from './searchBarLogic'
+import { Tab } from './constants'
 import { SearchBarTab } from './SearchBarTab'
-import { ResultType } from './types'
 
 type SearchTabsProps = {
     inputRef: RefObject<HTMLInputElement>
 }
 
-export const SearchTabs = ({ inputRef }: SearchTabsProps): JSX.Element | null => {
-    const { searchResponse, activeTab } = useValues(searchBarLogic)
-
-    if (!searchResponse) {
-        return null
-    }
-
-    return (
-        <div className="flex items-center border-t shrink-0 overflow-x-auto bg-bg-light">
-            <SearchBarTab type="all" active={activeTab === 'all'} inputRef={inputRef} />
-            {Object.entries(searchResponse.counts).map(([type, count]) => (
-                <SearchBarTab
-                    key={type}
-                    type={type as ResultType}
-                    count={count}
-                    active={activeTab === type}
-                    inputRef={inputRef}
-                />
-            ))}
-        </div>
-    )
-}
+export const SearchTabs = ({ inputRef }: SearchTabsProps): JSX.Element | null => (
+    <div className="flex items-center border-t shrink-0 overflow-x-auto bg-bg-light">
+        {Object.values(Tab).map((tab) => (
+            <SearchBarTab key={tab} tab={tab} inputRef={inputRef} />
+        ))}
+    </div>
+)
diff --git a/frontend/src/lib/components/CommandBar/commandBarLogic.ts b/frontend/src/lib/components/CommandBar/commandBarLogic.ts
index ba1d9f30ba955..41da175927c2f 100644
--- a/frontend/src/lib/components/CommandBar/commandBarLogic.ts
+++ b/frontend/src/lib/components/CommandBar/commandBarLogic.ts
@@ -20,13 +20,9 @@ export const commandBarLogic = kea<commandBarLogicType>([
                 setCommandBar: (_, { status }) => status,
                 hideCommandBar: () => BarStatus.HIDDEN,
                 toggleSearchBar: (previousState) =>
-                    [BarStatus.HIDDEN, BarStatus.SHOW_SHORTCUTS].includes(previousState)
-                        ? BarStatus.SHOW_SEARCH
-                        : BarStatus.HIDDEN,
+                    previousState === BarStatus.SHOW_SEARCH ? BarStatus.HIDDEN : BarStatus.SHOW_SEARCH,
                 toggleActionsBar: (previousState) =>
-                    [BarStatus.HIDDEN, BarStatus.SHOW_SHORTCUTS].includes(previousState)
-                        ? BarStatus.SHOW_ACTIONS
-                        : BarStatus.HIDDEN,
+                    previousState === BarStatus.SHOW_ACTIONS ? BarStatus.HIDDEN : BarStatus.SHOW_ACTIONS,
                 toggleShortcutOverview: (previousState) =>
                     previousState === BarStatus.HIDDEN ? BarStatus.SHOW_SHORTCUTS : previousState,
             },
diff --git a/frontend/src/lib/components/CommandBar/constants.ts b/frontend/src/lib/components/CommandBar/constants.ts
index 14396bb019f20..136f066123ac6 100644
--- a/frontend/src/lib/components/CommandBar/constants.ts
+++ b/frontend/src/lib/components/CommandBar/constants.ts
@@ -1,17 +1,28 @@
-import { ResultTypeWithAll } from './types'
-
-export const resultTypeToName: Record<ResultTypeWithAll, string> = {
-    all: 'All',
-    action: 'Actions',
-    cohort: 'Cohorts',
-    dashboard: 'Dashboards',
-    experiment: 'Experiments',
-    feature_flag: 'Feature flags',
-    insight: 'Insights',
-    notebook: 'Notebooks',
-}
-
 export const actionScopeToName: Record<string, string> = {
     global: 'Global',
     insights: 'Insights',
 }
+
+export enum Tab {
+    All = 'all',
+    Action = 'action',
+    Cohort = 'cohort',
+    Dashboard = 'dashboard',
+    Experiment = 'experiment',
+    FeatureFlag = 'feature_flag',
+    Insight = 'insight',
+    Notebook = 'notebook',
+    Person = 'person',
+}
+
+export const tabToName: Record<Tab, string> = {
+    [Tab.All]: 'All',
+    [Tab.Action]: 'Actions',
+    [Tab.Cohort]: 'Cohorts',
+    [Tab.Dashboard]: 'Dashboards',
+    [Tab.Experiment]: 'Experiments',
+    [Tab.FeatureFlag]: 'Feature flags',
+    [Tab.Insight]: 'Insights',
+    [Tab.Notebook]: 'Notebooks',
+    [Tab.Person]: 'Persons',
+}
diff --git a/frontend/src/lib/components/CommandBar/searchBarLogic.ts b/frontend/src/lib/components/CommandBar/searchBarLogic.ts
index 2f3b04715c598..0890298f99f27 100644
--- a/frontend/src/lib/components/CommandBar/searchBarLogic.ts
+++ b/frontend/src/lib/components/CommandBar/searchBarLogic.ts
@@ -1,14 +1,30 @@
 import { actions, afterMount, beforeUnmount, connect, kea, listeners, path, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
 import { router } from 'kea-router'
-import api from 'lib/api'
+import api, { CountedPaginatedResponse } from 'lib/api'
 import { urls } from 'scenes/urls'
 
-import { InsightShortId } from '~/types'
+import { InsightShortId, PersonType, SearchableEntity, SearchResponse } from '~/types'
 
 import { commandBarLogic } from './commandBarLogic'
+import { Tab } from './constants'
 import type { searchBarLogicType } from './searchBarLogicType'
-import { BarStatus, ResultTypeWithAll, SearchResponse, SearchResult } from './types'
+import { BarStatus, PersonResult, SearchResult } from './types'
+
+const DEBOUNCE_MS = 300
+
+function rankPersons(persons: PersonType[], query: string): PersonResult[] {
+    // We know each person matches the query. To rank them
+    // between the other results, we rank them higher, when the
+    // query is longer.
+    const personsRank = query.length / (query.length + 2.0)
+    return persons.map((person) => ({
+        type: 'person',
+        result_id: person.distinct_ids[0],
+        extra_fields: { ...person },
+        rank: personsRank,
+    }))
+}
 
 export const searchBarLogic = kea<searchBarLogicType>([
     path(['lib', 'components', 'CommandBar', 'searchBarLogic']),
@@ -16,8 +32,9 @@ export const searchBarLogic = kea<searchBarLogicType>([
         actions: [commandBarLogic, ['hideCommandBar', 'setCommandBar']],
     }),
     actions({
+        search: true,
         setSearchQuery: (query: string) => ({ query }),
-        setActiveTab: (tab: ResultTypeWithAll) => ({ tab }),
+        setActiveTab: (tab: Tab) => ({ tab }),
         onArrowUp: (activeIndex: number, maxIndex: number) => ({ activeIndex, maxIndex }),
         onArrowDown: (activeIndex: number, maxIndex: number) => ({ activeIndex, maxIndex }),
         onMouseEnterResult: (index: number) => ({ index }),
@@ -26,24 +43,48 @@ export const searchBarLogic = kea<searchBarLogicType>([
         openResult: (index: number) => ({ index }),
     }),
     loaders(({ values }) => ({
-        searchResponse: [
+        rawSearchResponse: [
             null as SearchResponse | null,
             {
                 loadSearchResponse: async (_, breakpoint) => {
-                    await breakpoint(300)
-                    if (values.activeTab === 'all') {
-                        return await api.get(`api/projects/@current/search?q=${values.searchQuery}`)
+                    await breakpoint(DEBOUNCE_MS)
+
+                    if (values.activeTab === Tab.All) {
+                        return await api.search.list({ q: values.searchQuery })
                     } else {
-                        return await api.get(
-                            `api/projects/@current/search?q=${values.searchQuery}&entities=${values.activeTab}`
-                        )
+                        return await api.search.list({
+                            q: values.searchQuery,
+                            entities: [values.activeTab.toLowerCase() as SearchableEntity],
+                        })
                     }
                 },
             },
         ],
+        rawPersonsResponse: [
+            null as CountedPaginatedResponse<PersonType> | null,
+            {
+                loadPersonsResponse: async (_, breakpoint) => {
+                    await breakpoint(DEBOUNCE_MS)
+
+                    return await api.persons.list({ search: values.searchQuery })
+                },
+            },
+        ],
     })),
     reducers({
         searchQuery: ['', { setSearchQuery: (_, { query }) => query }],
+        rawSearchResponse: [
+            null as SearchResponse | null,
+            {
+                search: () => null,
+            },
+        ],
+        rawPersonsResponse: [
+            null as CountedPaginatedResponse<PersonType> | null,
+            {
+                search: () => null,
+            },
+        ],
         keyboardResultIndex: [
             0,
             {
@@ -66,7 +107,7 @@ export const searchBarLogic = kea<searchBarLogicType>([
             },
         ],
         activeTab: [
-            'all' as ResultTypeWithAll,
+            Tab.All as Tab,
             {
                 setActiveTab: (_, { tab }) => tab,
             },
@@ -74,35 +115,85 @@ export const searchBarLogic = kea<searchBarLogicType>([
         isAutoScrolling: [false, { setIsAutoScrolling: (_, { scrolling }) => scrolling }],
     }),
     selectors({
-        searchResults: [(s) => [s.searchResponse], (searchResponse) => searchResponse?.results],
-        searchCounts: [(s) => [s.searchResponse], (searchResponse) => searchResponse?.counts],
-        filterSearchResults: [
-            (s) => [s.searchResults, s.activeTab],
-            (searchResults, activeTab) => {
-                if (activeTab === 'all') {
-                    return searchResults
+        combinedSearchResults: [
+            (s) => [s.rawSearchResponse, s.rawPersonsResponse, s.searchQuery],
+            (searchResponse, personsResponse, query) => {
+                if (!searchResponse && !personsResponse) {
+                    return null
+                }
+
+                return [
+                    ...(searchResponse ? searchResponse.results : []),
+                    ...(personsResponse ? rankPersons(personsResponse.results, query) : []),
+                ].sort((a, b) => (a.rank && b.rank ? a.rank - b.rank : 1))
+            },
+        ],
+        combinedSearchLoading: [
+            (s) => [s.rawSearchResponseLoading, s.rawPersonsResponseLoading],
+            (searchLoading, personsLoading) => searchLoading && personsLoading,
+        ],
+        tabsCount: [
+            (s) => [s.rawSearchResponse, s.rawPersonsResponse],
+            (searchResponse, personsResponse): Record<Tab, string | null> => {
+                const counts = {}
+                const personsResults = personsResponse?.results
+
+                Object.values(Tab).forEach((tab) => {
+                    counts[tab] = searchResponse?.counts[tab]?.toString() || null
+                })
+
+                if (personsResults !== undefined) {
+                    counts[Tab.Person] = personsResults.length === 100 ? '>=100' : personsResults.length.toString()
                 }
-                return searchResults?.filter((r) => r.type === activeTab)
+
+                return counts as Record<Tab, string | null>
             },
         ],
-        maxIndex: [(s) => [s.filterSearchResults], (searchResults) => (searchResults ? searchResults.length - 1 : 0)],
+        tabsLoading: [
+            (s) => [s.rawSearchResponseLoading, s.rawPersonsResponseLoading, s.activeTab],
+            (searchLoading, personsLoading, activeTab): Tab[] => {
+                const tabs: Tab[] = []
+
+                if (searchLoading) {
+                    if (activeTab === Tab.All) {
+                        tabs.push(...Object.values(Tab).filter((tab) => ![Tab.All, Tab.Person].includes(tab)))
+                    } else {
+                        tabs.push(activeTab)
+                    }
+                }
+
+                if (personsLoading) {
+                    tabs.push(Tab.Person)
+                }
+
+                return tabs
+            },
+        ],
+        maxIndex: [
+            (s) => [s.combinedSearchResults],
+            (combinedResults) => (combinedResults ? combinedResults.length - 1 : 0),
+        ],
         activeResultIndex: [
             (s) => [s.keyboardResultIndex, s.hoverResultIndex],
             (keyboardResultIndex: number, hoverResultIndex: number | null) => hoverResultIndex || keyboardResultIndex,
         ],
-        tabs: [
-            (s) => [s.searchCounts],
-            (counts): ResultTypeWithAll[] => ['all', ...(Object.keys(counts || {}) as ResultTypeWithAll[])],
-        ],
     }),
     listeners(({ values, actions }) => ({
+        setSearchQuery: actions.search,
+        setActiveTab: actions.search,
+        search: (_) => {
+            if (values.activeTab === Tab.All || values.activeTab !== Tab.Person) {
+                actions.loadSearchResponse(_)
+            }
+            if (values.activeTab === Tab.All || values.activeTab === Tab.Person) {
+                actions.loadPersonsResponse(_)
+            }
+        },
         openResult: ({ index }) => {
-            const result = values.searchResults![index]
+            const result = values.combinedSearchResults![index]
             router.actions.push(urlForResult(result))
             actions.hideCommandBar()
         },
-        setSearchQuery: actions.loadSearchResponse,
-        setActiveTab: actions.loadSearchResponse,
     })),
     afterMount(({ actions, values, cache }) => {
         // load initial results
@@ -139,13 +230,14 @@ export const searchBarLogic = kea<searchBarLogicType>([
                 }
             } else if (event.key === 'Tab') {
                 event.preventDefault()
-                const currentIndex = values.tabs.findIndex((tab) => tab === values.activeTab)
+                const tabs = Object.values(Tab)
+                const currentIndex = tabs.findIndex((tab) => tab === values.activeTab)
                 if (event.shiftKey) {
-                    const prevIndex = currentIndex === 0 ? values.tabs.length - 1 : currentIndex - 1
-                    actions.setActiveTab(values.tabs[prevIndex])
+                    const prevIndex = currentIndex === 0 ? tabs.length - 1 : currentIndex - 1
+                    actions.setActiveTab(tabs[prevIndex])
                 } else {
-                    const nextIndex = currentIndex === values.tabs.length - 1 ? 0 : currentIndex + 1
-                    actions.setActiveTab(values.tabs[nextIndex])
+                    const nextIndex = currentIndex === tabs.length - 1 ? 0 : currentIndex + 1
+                    actions.setActiveTab(tabs[nextIndex])
                 }
             }
         }
@@ -173,7 +265,10 @@ export const urlForResult = (result: SearchResult): string => {
             return urls.insightView(result.result_id as InsightShortId)
         case 'notebook':
             return urls.notebook(result.result_id)
+        case 'person':
+            return urls.personByDistinctId(result.result_id)
         default:
-            throw new Error(`No action for type '${result.type}' defined.`)
+            // @ts-expect-error
+            throw new Error(`No action for type '${result?.type}' defined.`)
     }
 }
diff --git a/frontend/src/lib/components/CommandBar/types.ts b/frontend/src/lib/components/CommandBar/types.ts
index 3a6a482c26453..5b6d18733be61 100644
--- a/frontend/src/lib/components/CommandBar/types.ts
+++ b/frontend/src/lib/components/CommandBar/types.ts
@@ -1,3 +1,5 @@
+import { PersonType, SearchableEntity, SearchResultType } from '~/types'
+
 export enum BarStatus {
     HIDDEN = 'hidden',
     SHOW_SEARCH = 'show_search',
@@ -5,18 +7,13 @@ export enum BarStatus {
     SHOW_SHORTCUTS = 'show_shortcuts',
 }
 
-export type ResultType = 'action' | 'cohort' | 'insight' | 'dashboard' | 'experiment' | 'feature_flag' | 'notebook'
-
-export type ResultTypeWithAll = ResultType | 'all'
+export type ResultType = SearchableEntity | 'person'
 
-export type SearchResult = {
+export type PersonResult = {
+    type: 'person'
     result_id: string
-    type: ResultType
-    name: string | null
-    extra_fields: Record<string, unknown>
+    extra_fields: PersonType
+    rank: number
 }
 
-export type SearchResponse = {
-    results: SearchResult[]
-    counts: Record<ResultType, number | null>
-}
+export type SearchResult = SearchResultType | PersonResult
diff --git a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx
index 0c3b7173e9782..e3823bb3c813c 100644
--- a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx
+++ b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx
@@ -102,10 +102,10 @@ export function TaxonomicFilter({
                                         <>
                                             You can easily navigate between tabs with your keyboard.{' '}
                                             <div>
-                                                Use <b>tab</b> or <b>right arrow</b> to move to the next tab.
+                                                Use <b>tab</b> to move to the next tab.
                                             </div>
                                             <div>
-                                                Use <b>shift + tab</b> or <b>left arrow</b> to move to the previous tab.
+                                                Use <b>shift + tab</b> to move to the previous tab.
                                             </div>
                                         </>
                                     }
diff --git a/frontend/src/lib/ee.test.ts b/frontend/src/lib/ee.test.ts
index e5cddf9ec2436..ef9dcb35f639d 100644
--- a/frontend/src/lib/ee.test.ts
+++ b/frontend/src/lib/ee.test.ts
@@ -3,15 +3,24 @@ import fs from 'fs'
 const eeFolderExists = fs.existsSync('ee/frontend/exports.ts')
 export const ifEeIt = eeFolderExists ? it : it.skip
 export const ifFossIt = !eeFolderExists ? it : it.skip
+export const ifEeDescribe = eeFolderExists ? describe : describe.skip
+export const ifFossDescribe = !eeFolderExists ? describe : describe.skip
 
 import posthogEE from '@posthog/ee/exports'
 
+import { PostHogEE } from '../../@posthog/ee/types'
+
 describe('ee importing', () => {
+    let posthogEEModule: PostHogEE
+
+    beforeEach(async () => {
+        posthogEEModule = await posthogEE()
+    })
     ifEeIt('should import actual ee code', () => {
-        expect(posthogEE.enabled).toBe(true)
+        expect(posthogEEModule.enabled).toBe(true)
     })
 
     ifFossIt('should import actual ee code', () => {
-        expect(posthogEE.enabled).toBe(false)
+        expect(posthogEEModule.enabled).toBe(false)
     })
 })
diff --git a/frontend/src/lib/hooks/use3000Body.ts b/frontend/src/lib/hooks/use3000Body.ts
new file mode 100644
index 0000000000000..2b7ba96747d70
--- /dev/null
+++ b/frontend/src/lib/hooks/use3000Body.ts
@@ -0,0 +1,20 @@
+import { useValues } from 'kea'
+import { useEffect } from 'react'
+
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
+
+import { useFeatureFlag } from './useFeatureFlag'
+
+export function use3000Body(): void {
+    const is3000 = !!useFeatureFlag('POSTHOG_3000')
+    const { isDarkModeOn } = useValues(themeLogic)
+
+    useEffect(() => {
+        if (is3000) {
+            document.body.setAttribute('theme', isDarkModeOn ? 'dark' : 'light')
+            document.body.classList.add('posthog-3000')
+        } else {
+            document.body.classList.remove('posthog-3000')
+        }
+    }, [is3000, isDarkModeOn])
+}
diff --git a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss
index b57eca87452ef..dde07eacf974b 100644
--- a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss
+++ b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss
@@ -10,6 +10,11 @@
     border: solid 1px var(--border-3000);
     border-radius: var(--radius);
 
+    &.LemonBanner--compact {
+        flex-direction: column;
+        padding: 0.5rem;
+    }
+
     &.LemonBanner--info {
         background-color: var(--primary-alt-highlight);
     }
@@ -29,13 +34,13 @@
         background-color: var(--success-highlight);
     }
 
-    p {
-        margin-bottom: 0.25em;
-    }
-
-    > .LemonIcon {
+    .LemonBanner__icon {
         flex-shrink: 0;
         font-size: 1.5rem;
         line-height: 0;
     }
+
+    p {
+        margin-bottom: 0.25em;
+    }
 }
diff --git a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.stories.tsx b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.stories.tsx
index 4276607b0dc72..96c88f50e9736 100644
--- a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.stories.tsx
@@ -45,3 +45,22 @@ Dismissable.args = {
     dismissKey: 'storybook-banner',
     onClose: () => alert('👋'),
 }
+
+export const Small: Story = Template.bind({})
+Small.args = {
+    type: 'info',
+    children: 'This is a one-time message. Acknowledge it and move on with your life.',
+    className: 'w-50 resize-x overflow-hidden',
+}
+
+export const SmallWithButtons: Story = Template.bind({})
+SmallWithButtons.args = {
+    type: 'info',
+    children: 'This is a one-time message. Acknowledge it and move on with your life.',
+    onClose: () => alert('👋'),
+    action: {
+        children: 'Acknowledge',
+        onClick: () => alert('👋'),
+    },
+    className: 'w-50 resize-x overflow-hidden',
+}
diff --git a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx
index 69e0da9f467af..44e4d14afbf06 100644
--- a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx
+++ b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx
@@ -2,6 +2,7 @@ import './LemonBanner.scss'
 
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
+import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
 import { IconClose, IconInfo, IconWarning } from 'lib/lemon-ui/icons'
 import { LemonButton, SideAction } from 'lib/lemon-ui/LemonButton'
 import { LemonButtonPropsBase } from 'lib/lemon-ui/LemonButton/LemonButton'
@@ -35,6 +36,11 @@ export function LemonBanner({
     const { dismiss } = useActions(logic)
     const showCloseButton = dismissKey || onClose
 
+    const { ref: wrapperRef, size } = useResizeBreakpoints({
+        0: 'compact',
+        400: 'normal',
+    })
+
     const _onClose = (): void => {
         if (dismissKey) {
             dismiss()
@@ -46,20 +52,34 @@ export function LemonBanner({
         return <></>
     }
 
+    const isCompact = size === 'compact'
+
     return (
-        <div className={clsx('LemonBanner', `LemonBanner--${type}`, className)}>
-            {type === 'warning' || type === 'error' ? <IconWarning /> : <IconInfo />}
-            <div className="flex-1">{children}</div>
-            {action && <LemonButton type="secondary" {...action} />}
-            {showCloseButton && (
-                <LemonButton
-                    status="primary-alt"
-                    size="small"
-                    icon={<IconClose />}
-                    onClick={_onClose}
-                    aria-label="close"
-                />
-            )}
+        <div
+            className={clsx('LemonBanner', `LemonBanner--${type}`, isCompact && 'LemonBanner--compact', className)}
+            ref={wrapperRef}
+        >
+            <div className="flex items-center gap-2 grow">
+                {!isCompact ? (
+                    type === 'warning' || type === 'error' ? (
+                        <IconWarning className="LemonBanner__icon" />
+                    ) : (
+                        <IconInfo className="LemonBanner__icon" />
+                    )
+                ) : null}
+                <div className="grow">{children}</div>
+                {!isCompact && action && <LemonButton type="secondary" {...action} />}
+                {showCloseButton && (
+                    <LemonButton
+                        status="primary-alt"
+                        size="small"
+                        icon={<IconClose />}
+                        onClick={_onClose}
+                        aria-label="close"
+                    />
+                )}
+            </div>
+            {isCompact && action && <LemonButton type="secondary" fullWidth {...action} />}
         </div>
     )
 }
diff --git a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
index 5b20638a5e72e..21d86a69c33b3 100644
--- a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
+++ b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
@@ -31,7 +31,7 @@
         border-color: var(--primary-3000);
 
         .posthog-3000 & {
-            border-color: var(--border-bold);
+            border-color: var(--border-active);
         }
     }
 
diff --git a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss
index 728dc4ccaab79..3c24f908503e9 100644
--- a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss
+++ b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss
@@ -18,6 +18,10 @@
 
     &:not(:disabled):hover {
         border: 1px solid var(--primary-3000-hover);
+
+        .posthog-3000 & {
+            border-color: var(--border-bold);
+        }
     }
 
     &:disabled {
@@ -27,6 +31,10 @@
 
     &:focus:not(:disabled) {
         border: 1px solid var(--primary-3000);
+
+        .posthog-3000 & {
+            border-color: var(--border-active);
+        }
     }
 
     .Field--error & {
diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.scss b/frontend/src/lib/lemon-ui/Popover/Popover.scss
index 01779d797acdd..e4ae40e777722 100644
--- a/frontend/src/lib/lemon-ui/Popover/Popover.scss
+++ b/frontend/src/lib/lemon-ui/Popover/Popover.scss
@@ -111,28 +111,48 @@
     background: var(--bg-3000);
     transform: rotate(45deg);
 
+    .posthog-3000 & {
+        background: var(--bg-light);
+    }
+
     [data-placement^='bottom'] & {
         top: -0.25rem;
         border-top: 1px solid var(--border);
         border-left: 1px solid var(--border);
+
+        .posthog-3000 & {
+            top: -0.3rem;
+        }
     }
 
     [data-placement^='top'] & {
         bottom: -0.25rem;
         border-right: 1px solid var(--border);
         border-bottom: 1px solid var(--border);
+
+        .posthog-3000 & {
+            bottom: -0.3rem;
+        }
     }
 
     [data-placement^='left'] & {
         right: -0.25rem;
         border-top: 1px solid var(--border);
         border-right: 1px solid var(--border);
+
+        .posthog-3000 & {
+            right: -0.3rem;
+        }
     }
 
     [data-placement^='right'] & {
         left: -0.25rem;
         border-bottom: 1px solid var(--border);
         border-left: 1px solid var(--border);
+
+        .posthog-3000 & {
+            left: -0.3rem;
+        }
     }
 
     .Popover--actionable & {
diff --git a/frontend/src/scenes/App.tsx b/frontend/src/scenes/App.tsx
index 1bc924fbc7bfc..a12a690e5fb53 100644
--- a/frontend/src/scenes/App.tsx
+++ b/frontend/src/scenes/App.tsx
@@ -1,10 +1,10 @@
 import { actions, BindLogic, connect, events, kea, path, reducers, selectors, useMountedLogic, useValues } from 'kea'
 import { FEATURE_FLAGS } from 'lib/constants'
+import { use3000Body } from 'lib/hooks/use3000Body'
 import { ToastCloseButton } from 'lib/lemon-ui/lemonToast'
 import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { inAppPromptLogic } from 'lib/logic/inAppPrompt/inAppPromptLogic'
-import { useEffect } from 'react'
 import { Slide, ToastContainer } from 'react-toastify'
 import { frontendAppsLogic } from 'scenes/apps/frontendAppsLogic'
 import { appScenes } from 'scenes/appScenes'
@@ -70,16 +70,8 @@ export const appLogic = kea<appLogicType>([
 
 export function App(): JSX.Element | null {
     const { showApp, showingDelayedSpinner } = useValues(appLogic)
-    const { featureFlags } = useValues(featureFlagLogic)
     useMountedLogic(sceneLogic({ scenes: appScenes }))
-
-    useEffect(() => {
-        if (featureFlags[FEATURE_FLAGS.POSTHOG_3000]) {
-            document.body.classList.add('posthog-3000')
-        } else {
-            document.body.classList.remove('posthog-3000')
-        }
-    }, [featureFlags])
+    use3000Body()
 
     if (showApp) {
         return (
diff --git a/frontend/src/scenes/apps/appMetricsSceneLogic.ts b/frontend/src/scenes/apps/appMetricsSceneLogic.ts
index ca4b4239691c5..1c51aa7e45cb0 100644
--- a/frontend/src/scenes/apps/appMetricsSceneLogic.ts
+++ b/frontend/src/scenes/apps/appMetricsSceneLogic.ts
@@ -184,7 +184,7 @@ export const appMetricsSceneLogic = kea<appMetricsSceneLogicType>([
             (pluginConfig, pluginConfigId: number): Breadcrumb[] => [
                 {
                     key: Scene.Apps,
-                    name: 'Apps',
+                    name: 'Data pipeline',
                     path: urls.projectApps(),
                 },
                 {
diff --git a/frontend/src/scenes/data-management/dataManagementDescribers.tsx b/frontend/src/scenes/data-management/dataManagementDescribers.tsx
index c1c2672619fdd..ddc80d6ca4be9 100644
--- a/frontend/src/scenes/data-management/dataManagementDescribers.tsx
+++ b/frontend/src/scenes/data-management/dataManagementDescribers.tsx
@@ -6,6 +6,7 @@ import {
     Description,
     detectBoolean,
     HumanizedChange,
+    userNameForLogItem,
 } from 'lib/components/ActivityLog/humanizeActivity'
 import { SentenceList } from 'lib/components/ActivityLog/SentenceList'
 import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
@@ -129,7 +130,7 @@ export function dataManagementActivityDescriber(logItem: ActivityLogItem): Human
                 description: (
                     <SentenceList
                         listParts={changes}
-                        prefix={<strong>{logItem.user.first_name}</strong>}
+                        prefix={<strong>{userNameForLogItem(logItem)}</strong>}
                         suffix={changeSuffix}
                     />
                 ),
@@ -141,7 +142,7 @@ export function dataManagementActivityDescriber(logItem: ActivityLogItem): Human
         return {
             description: (
                 <>
-                    <strong>{logItem.user.first_name}</strong> deleted <DescribeType logItem={logItem} />{' '}
+                    <strong>{userNameForLogItem(logItem)}</strong> deleted <DescribeType logItem={logItem} />{' '}
                     {nameAndLink(logItem)}
                 </>
             ),
diff --git a/frontend/src/scenes/events/Events.tsx b/frontend/src/scenes/events/Events.tsx
index cadea16300bca..af4caa3bd67b6 100644
--- a/frontend/src/scenes/events/Events.tsx
+++ b/frontend/src/scenes/events/Events.tsx
@@ -2,13 +2,11 @@ import { PageHeader } from 'lib/components/PageHeader'
 import { EventsScene } from 'scenes/events/EventsScene'
 import { SceneExport } from 'scenes/sceneTypes'
 
+import { eventsSceneLogic } from './eventsSceneLogic'
+
 export const scene: SceneExport = {
     component: Events,
-    // TODO!
-    // NOTE: Removing the lines below because turbo mode messes up having two separate versions of this scene.
-    //       It's a small price to pay. Put this back when the flag is removed.
-    // logic: eventsTableLogic,
-    // paramsToProps: ({ params: { fixedFilters } }) => ({ fixedFilters, key: 'EventsTable', sceneUrl: urls.events() }),
+    logic: eventsSceneLogic,
 }
 
 export function Events(): JSX.Element {
diff --git a/frontend/src/scenes/experiments/Experiment.scss b/frontend/src/scenes/experiments/Experiment.scss
index d2dcd3723da97..85059e647fa48 100644
--- a/frontend/src/scenes/experiments/Experiment.scss
+++ b/frontend/src/scenes/experiments/Experiment.scss
@@ -23,7 +23,7 @@
             }
 
             .ant-slider-rail {
-                background-color: var(--primary-highlight);
+                background-color: var(--primary-3000-highlight);
             }
         }
     }
diff --git a/frontend/src/scenes/experiments/ExperimentPreview.tsx b/frontend/src/scenes/experiments/ExperimentPreview.tsx
index 9d7585e944e77..ed4a4ef9e442e 100644
--- a/frontend/src/scenes/experiments/ExperimentPreview.tsx
+++ b/frontend/src/scenes/experiments/ExperimentPreview.tsx
@@ -123,8 +123,8 @@ export function ExperimentPreview({
                                     value={minimumDetectableChange}
                                     min={1}
                                     max={sliderMaxValue}
-                                    trackStyle={{ background: 'var(--primary)' }}
-                                    handleStyle={{ background: 'var(--primary)' }}
+                                    trackStyle={{ background: 'var(--primary-3000)' }}
+                                    handleStyle={{ background: 'var(--primary-3000)' }}
                                     onChange={(value) => {
                                         setExperiment({
                                             parameters: {
diff --git a/frontend/src/scenes/feature-flags/activityDescriptions.tsx b/frontend/src/scenes/feature-flags/activityDescriptions.tsx
index d2b3b754aaf50..0c3361d5d154c 100644
--- a/frontend/src/scenes/feature-flags/activityDescriptions.tsx
+++ b/frontend/src/scenes/feature-flags/activityDescriptions.tsx
@@ -5,6 +5,7 @@ import {
     Description,
     detectBoolean,
     HumanizedChange,
+    userNameForLogItem,
 } from 'lib/components/ActivityLog/humanizeActivity'
 import { SentenceList } from 'lib/components/ActivityLog/SentenceList'
 import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
@@ -308,7 +309,7 @@ export function flagActivityDescriber(logItem: ActivityLogItem, asNotification?:
                         listParts={changes}
                         prefix={
                             <>
-                                <strong>{logItem.user.first_name}</strong>
+                                <strong>{userNameForLogItem(logItem)}</strong>
                             </>
                         }
                         suffix={changeSuffix}
diff --git a/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.tsx b/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.tsx
index a1f1fae053850..a93859f812f13 100644
--- a/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.tsx
+++ b/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { FEATURE_FLAGS } from 'lib/constants'
+import { useKeyHeld } from 'lib/hooks/useKeyHeld'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import React, { useState } from 'react'
 
@@ -16,6 +17,7 @@ export type DraggableToNotebookBaseProps = {
     href?: string
     node?: NotebookNodeType
     properties?: Record<string, any>
+    onlyWithModifierKey?: boolean
 }
 
 export type DraggableToNotebookProps = DraggableToNotebookBaseProps & {
@@ -23,8 +25,9 @@ export type DraggableToNotebookProps = DraggableToNotebookBaseProps & {
     className?: string
 }
 
-export function useNotebookDrag({ href, node, properties }: DraggableToNotebookBaseProps): {
+export function useNotebookDrag({ href, node, properties, onlyWithModifierKey }: DraggableToNotebookBaseProps): {
     isDragging: boolean
+    draggable: boolean
     elementProps: Pick<React.HTMLAttributes<HTMLElement>, 'onDragStart' | 'onDragEnd'>
 } {
     const { startDropMode, endDropMode } = useActions(notebookPanelLogic)
@@ -36,15 +39,20 @@ export function useNotebookDrag({ href, node, properties }: DraggableToNotebookB
     const isInNotebook = useNotebookNode()
     const hasDragOptions = !!(href || node)
 
-    if (!hasDragOptions || isInNotebook || !notebooksEnabled) {
+    const altKeyHeld = useKeyHeld('Alt')
+    const dragModeActive = onlyWithModifierKey ? altKeyHeld : true
+
+    if (!hasDragOptions || isInNotebook || !notebooksEnabled || !dragModeActive) {
         return {
             isDragging: false,
+            draggable: false,
             elementProps: {},
         }
     }
 
     return {
         isDragging,
+        draggable: true,
         elementProps: {
             onDragStart: (e: any) => {
                 setIsDragging(true)
@@ -71,8 +79,9 @@ export function DraggableToNotebook({
     properties,
     href,
     className,
+    onlyWithModifierKey,
 }: DraggableToNotebookProps): JSX.Element {
-    const { isDragging, elementProps } = useNotebookDrag({ href, node, properties })
+    const { isDragging, draggable, elementProps } = useNotebookDrag({ href, node, properties, onlyWithModifierKey })
 
     if (!node && !properties && !href) {
         return <>{children}</>
@@ -83,7 +92,7 @@ export function DraggableToNotebook({
             <FlaggedFeature flag={FEATURE_FLAGS.NOTEBOOKS} fallback={children}>
                 <span
                     className={clsx('DraggableToNotebook', className, isDragging && 'DraggableToNotebook--dragging')}
-                    draggable={elementProps.onDragEnd ? true : false}
+                    draggable={draggable}
                     {...elementProps}
                 >
                     {children}
diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookHistory.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookHistory.tsx
index 2ce11249bf535..702182c5a05fe 100644
--- a/frontend/src/scenes/notebooks/Notebook/NotebookHistory.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/NotebookHistory.tsx
@@ -12,7 +12,7 @@ import {
 import { JSONContent } from '@tiptap/core'
 import { useActions, useValues } from 'kea'
 import { activityLogLogic } from 'lib/components/ActivityLog/activityLogLogic'
-import { ActivityLogItem, ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
+import { ActivityLogItem, ActivityScope, userNameForLogItem } from 'lib/components/ActivityLog/humanizeActivity'
 import { useMemo } from 'react'
 
 import { notebookLogic } from './notebookLogic'
@@ -43,7 +43,7 @@ function NotebookHistoryList({ onItemClick }: { onItemClick: (logItem: ActivityL
                     </div>
                 ) : (
                     activityWithChangedContent?.map((logItem: ActivityLogItem) => {
-                        const name = logItem.user.is_system ? 'System' : logItem.user.first_name
+                        const name = userNameForLogItem(logItem)
                         const isCurrent = getFieldChange(logItem, 'version') === notebook?.version
                         const changedContent = getFieldChange(logItem, 'content')
                         const isButton = changedContent && !isCurrent
@@ -51,9 +51,9 @@ function NotebookHistoryList({ onItemClick }: { onItemClick: (logItem: ActivityL
                         const buttonContent = (
                             <span className="flex flex-1 gap-2 items-center p-2">
                                 <ProfilePicture
-                                    name={logItem.user.is_system ? logItem.user.first_name : undefined}
-                                    type={logItem.user.is_system ? 'system' : 'person'}
-                                    email={logItem.user.email ?? undefined}
+                                    name={logItem.is_system ? name : undefined}
+                                    type={logItem.is_system ? 'system' : 'person'}
+                                    email={logItem.user?.email ?? undefined}
                                     size={'md'}
                                 />
                                 <span className="flex-1">
diff --git a/frontend/src/scenes/notebooks/Notebook/notebookActivityDescriber.tsx b/frontend/src/scenes/notebooks/Notebook/notebookActivityDescriber.tsx
index 49c246ecae026..a1eeb50ace70f 100644
--- a/frontend/src/scenes/notebooks/Notebook/notebookActivityDescriber.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/notebookActivityDescriber.tsx
@@ -5,6 +5,7 @@ import {
     ChangeMapping,
     Description,
     HumanizedChange,
+    userNameForLogItem,
 } from 'lib/components/ActivityLog/humanizeActivity'
 import { SentenceList } from 'lib/components/ActivityLog/SentenceList'
 import { Link } from 'lib/lemon-ui/Link'
@@ -68,7 +69,7 @@ export function notebookActivityDescriber(logItem: ActivityLogItem): HumanizedCh
                 description: (
                     <SentenceList
                         listParts={changes}
-                        prefix={<strong>{logItem.user.first_name}</strong>}
+                        prefix={<strong>{userNameForLogItem(logItem)}</strong>}
                         suffix={changeSuffix}
                     />
                 ),
@@ -80,7 +81,7 @@ export function notebookActivityDescriber(logItem: ActivityLogItem): HumanizedCh
         return {
             description: (
                 <>
-                    <strong>{logItem.user.first_name}</strong> created {nameAndLink(logItem)}
+                    <strong>{userNameForLogItem(logItem)}</strong> created {nameAndLink(logItem)}
                 </>
             ),
         }
@@ -90,7 +91,7 @@ export function notebookActivityDescriber(logItem: ActivityLogItem): HumanizedCh
         return {
             description: (
                 <>
-                    <strong>{logItem.user.first_name}</strong> deleted {nameAndLink(logItem)}
+                    <strong>{userNameForLogItem(logItem)}</strong> deleted {nameAndLink(logItem)}
                 </>
             ),
         }
diff --git a/frontend/src/scenes/persons/PersonDisplay.tsx b/frontend/src/scenes/persons/PersonDisplay.tsx
index 3d2cb1d9b758c..98b349859b245 100644
--- a/frontend/src/scenes/persons/PersonDisplay.tsx
+++ b/frontend/src/scenes/persons/PersonDisplay.tsx
@@ -104,6 +104,7 @@ export function PersonDisplay({
                             return
                         }
                     }}
+                    subtle
                     data-attr={`goto-person-email-${person?.distinct_id || person?.distinct_ids?.[0]}`}
                 >
                     {content}
diff --git a/frontend/src/scenes/persons/activityDescriptions.tsx b/frontend/src/scenes/persons/activityDescriptions.tsx
index ffca0f970d702..743f290a4afa3 100644
--- a/frontend/src/scenes/persons/activityDescriptions.tsx
+++ b/frontend/src/scenes/persons/activityDescriptions.tsx
@@ -1,4 +1,4 @@
-import { ActivityLogItem, HumanizedChange } from 'lib/components/ActivityLog/humanizeActivity'
+import { ActivityLogItem, HumanizedChange, userNameForLogItem } from 'lib/components/ActivityLog/humanizeActivity'
 import { SentenceList } from 'lib/components/ActivityLog/SentenceList'
 import { Link } from 'lib/lemon-ui/Link'
 import { PersonDisplay } from 'scenes/persons/PersonDisplay'
@@ -14,7 +14,7 @@ export function personActivityDescriber(logItem: ActivityLogItem): HumanizedChan
         return {
             description: (
                 <>
-                    <strong>{logItem.user.first_name}</strong> deleted the person: {logItem.detail.name}
+                    <strong>{userNameForLogItem(logItem)}</strong> deleted the person: {logItem.detail.name}
                 </>
             ),
         }
@@ -28,7 +28,7 @@ export function personActivityDescriber(logItem: ActivityLogItem): HumanizedChan
         return {
             description: (
                 <>
-                    <strong>{logItem.user.first_name}</strong> edited this person's properties
+                    <strong>{userNameForLogItem(logItem)}</strong> edited this person's properties
                 </>
             ),
         }
@@ -40,7 +40,7 @@ export function personActivityDescriber(logItem: ActivityLogItem): HumanizedChan
                     <SentenceList
                         prefix={
                             <>
-                                <strong>{logItem.user.first_name}</strong> merged
+                                <strong>{userNameForLogItem(logItem)}</strong> merged
                             </>
                         }
                         listParts={logItem.detail.merge.source.flatMap((di) => (
@@ -63,7 +63,7 @@ export function personActivityDescriber(logItem: ActivityLogItem): HumanizedChan
                     <SentenceList
                         prefix={
                             <>
-                                <strong>{logItem.user.first_name}</strong> split this person into
+                                <strong>{userNameForLogItem(logItem)}</strong> split this person into
                             </>
                         }
                         listParts={distinctIds.map((di) => (
diff --git a/frontend/src/scenes/plugins/AppsScene.tsx b/frontend/src/scenes/plugins/AppsScene.tsx
index 54d476409bb0d..4bd07fb5dc10f 100644
--- a/frontend/src/scenes/plugins/AppsScene.tsx
+++ b/frontend/src/scenes/plugins/AppsScene.tsx
@@ -65,7 +65,7 @@ export function AppsScene(): JSX.Element | null {
                     },
                     canGloballyManagePlugins(user?.organization) && {
                         key: PluginTab.AppsManagement,
-                        label: 'Apps Management',
+                        label: 'Manage apps',
                         content: <AppsManagementTab />,
                     },
                 ]}
diff --git a/frontend/src/scenes/plugins/pluginActivityDescriptions.tsx b/frontend/src/scenes/plugins/pluginActivityDescriptions.tsx
index d80f656067f67..da79b95a14129 100644
--- a/frontend/src/scenes/plugins/pluginActivityDescriptions.tsx
+++ b/frontend/src/scenes/plugins/pluginActivityDescriptions.tsx
@@ -1,4 +1,9 @@
-import { ActivityLogItem, ActivityScope, HumanizedChange } from 'lib/components/ActivityLog/humanizeActivity'
+import {
+    ActivityLogItem,
+    ActivityScope,
+    HumanizedChange,
+    userNameForLogItem,
+} from 'lib/components/ActivityLog/humanizeActivity'
 import { SentenceList } from 'lib/components/ActivityLog/SentenceList'
 import { dayjs } from 'lib/dayjs'
 
@@ -14,7 +19,7 @@ export function pluginActivityDescriber(logItem: ActivityLogItem): HumanizedChan
         return {
             description: (
                 <>
-                    <strong>{logItem.user.first_name}</strong> installed the app: <b>{logItem.detail.name}</b>
+                    <strong>{userNameForLogItem(logItem)}</strong> installed the app: <b>{logItem.detail.name}</b>
                 </>
             ),
         }
@@ -24,7 +29,7 @@ export function pluginActivityDescriber(logItem: ActivityLogItem): HumanizedChan
         return {
             description: (
                 <>
-                    <strong>{logItem.user.first_name}</strong> uninstalled the app: <b>{logItem.detail.name}</b>
+                    <strong>{userNameForLogItem(logItem)}</strong> uninstalled the app: <b>{logItem.detail.name}</b>
                 </>
             ),
         }
@@ -46,7 +51,7 @@ export function pluginActivityDescriber(logItem: ActivityLogItem): HumanizedChan
                     listParts={changes}
                     prefix={
                         <>
-                            <strong>{logItem.user.first_name}</strong> enabled the app: <b>{logItem.detail.name}</b>{' '}
+                            <strong>{userNameForLogItem(logItem)}</strong> enabled the app: <b>{logItem.detail.name}</b>{' '}
                             with config ID {logItem.item_id}
                             {changes.length > 0 ? ', with' : '.'}
                         </>
@@ -60,7 +65,7 @@ export function pluginActivityDescriber(logItem: ActivityLogItem): HumanizedChan
         return {
             description: (
                 <>
-                    <strong>{logItem.user.first_name}</strong> disabled the app: <b>{logItem.detail.name}</b> with
+                    <strong>{userNameForLogItem(logItem)}</strong> disabled the app: <b>{logItem.detail.name}</b> with
                     config ID {logItem.item_id}.
                 </>
             ),
@@ -72,8 +77,8 @@ export function pluginActivityDescriber(logItem: ActivityLogItem): HumanizedChan
         return {
             description: (
                 <>
-                    <strong>{logItem.user.first_name}</strong> started exporting historical events between {startDate}{' '}
-                    and {endDate} (inclusive).
+                    <strong>{userNameForLogItem(logItem)}</strong> started exporting historical events between{' '}
+                    {startDate} and {endDate} (inclusive).
                 </>
             ),
         }
@@ -83,7 +88,7 @@ export function pluginActivityDescriber(logItem: ActivityLogItem): HumanizedChan
         return {
             description: (
                 <>
-                    <strong>{logItem.user.first_name}</strong> triggered job:{' '}
+                    <strong>{userNameForLogItem(logItem)}</strong> triggered job:{' '}
                     <code>{logItem.detail.trigger.job_type}</code> with config ID {logItem.item_id}.
                 </>
             ),
@@ -157,7 +162,7 @@ export function pluginActivityDescriber(logItem: ActivityLogItem): HumanizedChan
         return {
             description: (
                 <SentenceList
-                    prefix={<strong>{logItem.user.first_name}</strong>}
+                    prefix={<strong>{userNameForLogItem(logItem)}</strong>}
                     listParts={changes}
                     suffix={
                         <>
@@ -205,8 +210,8 @@ export function pluginActivityDescriber(logItem: ActivityLogItem): HumanizedChan
             return {
                 description: (
                     <>
-                        <strong>{logItem.user.first_name}</strong> {changeWording} on app: <b>{logItem.detail.name}</b>{' '}
-                        with config ID {logItem.item_id}
+                        <strong>{userNameForLogItem(logItem)}</strong> {changeWording} on app:{' '}
+                        <b>{logItem.detail.name}</b> with config ID {logItem.item_id}
                     </>
                 ),
             }
diff --git a/frontend/src/scenes/plugins/source/formatSource.ts b/frontend/src/scenes/plugins/source/formatSource.ts
index ab046a4916ae0..97b0c73971e0d 100644
--- a/frontend/src/scenes/plugins/source/formatSource.ts
+++ b/frontend/src/scenes/plugins/source/formatSource.ts
@@ -1,6 +1,8 @@
 export async function formatSource(filename: string, source: string): Promise<string> {
     // Lazy-load prettier, as it's pretty big and its only use is formatting app source code
+    // @ts-expect-error
     const prettier = (await import('prettier/standalone')).default
+    // @ts-expect-error
     const parserTypeScript = (await import('prettier/parser-typescript')).default
 
     if (filename.endsWith('.json')) {
diff --git a/frontend/src/scenes/plugins/tabs/apps/AppsTab.tsx b/frontend/src/scenes/plugins/tabs/apps/AppsTab.tsx
index 384d8d697d63b..41618c280503c 100644
--- a/frontend/src/scenes/plugins/tabs/apps/AppsTab.tsx
+++ b/frontend/src/scenes/plugins/tabs/apps/AppsTab.tsx
@@ -29,13 +29,13 @@ export function AppsTab(): JSX.Element {
                 <BatchExportsAlternativeWarning />
 
                 <AppsTable
-                    title="Enabled Apps"
+                    title="Enabled apps"
                     plugins={[...sortableEnabledPlugins, ...unsortableEnabledPlugins]}
                     loading={loading}
                     renderfn={renderfn}
                 />
                 <AppsTable
-                    title="Available Apps"
+                    title="Available apps"
                     plugins={filteredDisabledPlugins}
                     loading={loading}
                     renderfn={renderfn}
diff --git a/frontend/src/scenes/saved-insights/activityDescriptions.tsx b/frontend/src/scenes/saved-insights/activityDescriptions.tsx
index 1ab0fb0e218c2..8699a76078348 100644
--- a/frontend/src/scenes/saved-insights/activityDescriptions.tsx
+++ b/frontend/src/scenes/saved-insights/activityDescriptions.tsx
@@ -8,6 +8,7 @@ import {
     Description,
     detectBoolean,
     HumanizedChange,
+    userNameForLogItem,
 } from 'lib/components/ActivityLog/humanizeActivity'
 import { SentenceList } from 'lib/components/ActivityLog/SentenceList'
 import { BreakdownSummary, FiltersSummary, QuerySummary } from 'lib/components/Cards/InsightCard/InsightDetails'
@@ -233,7 +234,7 @@ function summarizeChanges(filtersAfter: Partial<FilterType>): ChangeMapping | nu
     return {
         description: ['changed query definition'],
         extendedDescription: (
-            <div className="summary-card">
+            <div className="ActivityDescription">
                 <QuerySummary filters={filtersAfter} />
                 <FiltersSummary filters={filtersAfter} />
                 {filtersAfter.breakdown_type && <BreakdownSummary filters={filtersAfter} />}
@@ -252,7 +253,7 @@ export function insightActivityDescriber(logItem: ActivityLogItem, asNotificatio
         return {
             description: (
                 <>
-                    <strong>{logItem.user.first_name}</strong> created the insight:{' '}
+                    <strong>{userNameForLogItem(logItem)}</strong> created the insight:{' '}
                     {nameOrLinkToInsight(logItem?.detail.short_id, logItem?.detail.name)}
                 </>
             ),
@@ -263,7 +264,7 @@ export function insightActivityDescriber(logItem: ActivityLogItem, asNotificatio
         return {
             description: (
                 <>
-                    <strong>{logItem.user.first_name}</strong> deleted {asNotification ? 'your' : 'the'} insight:{' '}
+                    <strong>{userNameForLogItem(logItem)}</strong> deleted {asNotification ? 'your' : 'the'} insight:{' '}
                     {logItem.detail.name}
                 </>
             ),
@@ -285,7 +286,7 @@ export function insightActivityDescriber(logItem: ActivityLogItem, asNotificatio
         return {
             description: (
                 <>
-                    <strong>{logItem.user.first_name}</strong> shared {asNotification ? 'your' : 'the'} insight:{' '}
+                    <strong>{userNameForLogItem(logItem)}</strong> shared {asNotification ? 'your' : 'the'} insight:{' '}
                     {logItem.detail.name}.
                 </>
             ),
@@ -296,8 +297,8 @@ export function insightActivityDescriber(logItem: ActivityLogItem, asNotificatio
         return {
             description: (
                 <>
-                    <strong>{logItem.user.first_name}</strong> deleted shared link for {asNotification ? 'your' : 'the'}{' '}
-                    insight: {logItem.detail.name}.
+                    <strong>{userNameForLogItem(logItem)}</strong> deleted shared link for{' '}
+                    {asNotification ? 'your' : 'the'} insight: {logItem.detail.name}.
                 </>
             ),
         }
@@ -346,7 +347,7 @@ export function insightActivityDescriber(logItem: ActivityLogItem, asNotificatio
                 description: (
                     <SentenceList
                         listParts={changes}
-                        prefix={<strong>{logItem.user.first_name}</strong>}
+                        prefix={<strong>{userNameForLogItem(logItem)}</strong>}
                         suffix={changeSuffix}
                     />
                 ),
@@ -364,7 +365,7 @@ export function insightActivityDescriber(logItem: ActivityLogItem, asNotificatio
         return {
             description: (
                 <>
-                    <strong>{logItem.user.first_name}</strong> exported{' '}
+                    <strong>{userNameForLogItem(logItem)}</strong> exported{' '}
                     {nameOrLinkToInsight(logItem?.detail.short_id, logItem?.detail.name)} as a {exportType}
                 </>
             ),
diff --git a/frontend/src/scenes/session-recordings/__mocks__/recording_snapshots.ts b/frontend/src/scenes/session-recordings/__mocks__/recording_snapshots.ts
index e2e5a8ec6dd59..61a0263ee5680 100644
--- a/frontend/src/scenes/session-recordings/__mocks__/recording_snapshots.ts
+++ b/frontend/src/scenes/session-recordings/__mocks__/recording_snapshots.ts
@@ -1,3 +1,6 @@
+import { eventWithTime } from '@rrweb/types'
+import { prepareRecordingSnapshots } from 'scenes/session-recordings/player/sessionRecordingDataLogic'
+
 import { RecordingSnapshot } from '~/types'
 
 const lineOne =
@@ -7,6 +10,23 @@ const lineTwo =
 
 export const snapshotsAsJSONLines = (): string => `${lineOne}\n${lineTwo}\n`
 
+export const convertSnapshotsByWindowId = (snapshotsByWindowId: {
+    [key: string]: eventWithTime[]
+}): RecordingSnapshot[] =>
+    Object.entries(snapshotsByWindowId).flatMap(([windowId, snapshots]) => {
+        return snapshots.map((snapshot) => ({
+            ...snapshot,
+            windowId,
+        }))
+    })
+
+export const convertSnapshotsResponse = (
+    snapshotsByWindowId: { [key: string]: eventWithTime[] },
+    existingSnapshots?: RecordingSnapshot[]
+): RecordingSnapshot[] => {
+    return prepareRecordingSnapshots(convertSnapshotsByWindowId(snapshotsByWindowId), existingSnapshots)
+}
+
 export const sortedRecordingSnapshots = (): { snapshot_data_by_window_id: Record<string, RecordingSnapshot[]> } => {
     const sortedRecordingSnapshotsJson = { snapshot_data_by_window_id: {} }
 
diff --git a/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx b/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx
index 354dd801ba128..a333d76178e6a 100644
--- a/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx
+++ b/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx
@@ -148,7 +148,7 @@ export function PlayerMeta(): JSX.Element {
     }
 
     return (
-        <DraggableToNotebook href={urls.replaySingle(logicProps.sessionRecordingId)}>
+        <DraggableToNotebook href={urls.replaySingle(logicProps.sessionRecordingId)} onlyWithModifierKey>
             <div
                 ref={ref}
                 className={clsx('PlayerMeta', {
diff --git a/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx b/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx
index 092213dd4ea4d..75928e86b211d 100644
--- a/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx
+++ b/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx
@@ -7,11 +7,13 @@ import { usePageVisibility } from 'lib/hooks/usePageVisibility'
 import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { useMemo, useRef, useState } from 'react'
+import { useNotebookDrag } from 'scenes/notebooks/AddToNotebook/DraggableToNotebook'
 import { PlayerController } from 'scenes/session-recordings/player/controller/PlayerController'
 import { PlayerInspector } from 'scenes/session-recordings/player/inspector/PlayerInspector'
 import { PlayerFrame } from 'scenes/session-recordings/player/PlayerFrame'
 import { RecordingNotFound } from 'scenes/session-recordings/player/RecordingNotFound'
 import { MatchingEventsMatchType } from 'scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic'
+import { urls } from 'scenes/urls'
 
 import { PlayerFrameOverlay } from './PlayerFrameOverlay'
 import { PlayerMeta } from './PlayerMeta'
@@ -146,6 +148,8 @@ export function SessionRecordingPlayer(props: SessionRecordingPlayerProps): JSX.
         )
     }
 
+    const { draggable, elementProps } = useNotebookDrag({ href: urls.replaySingle(sessionRecordingId) })
+
     return (
         <BindLogic logic={sessionRecordingPlayerLogic} props={logicProps}>
             <div
@@ -166,7 +170,8 @@ export function SessionRecordingPlayer(props: SessionRecordingPlayerProps): JSX.
                     <>
                         <div className="SessionRecordingPlayer__main">
                             {(!noMeta || isFullScreen) && size !== 'tiny' ? <PlayerMeta /> : null}
-                            <div className="SessionRecordingPlayer__body">
+
+                            <div className="SessionRecordingPlayer__body" draggable={draggable} {...elementProps}>
                                 <PlayerFrame />
                                 <PlayerFrameOverlay />
                             </div>
diff --git a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.tsx b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.tsx
index dcebd362ee685..fbd4199237c55 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.tsx
+++ b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.tsx
@@ -21,7 +21,12 @@ import { PlayerInspectorListItem } from './components/PlayerInspectorListItem'
 import { playerInspectorLogic } from './playerInspectorLogic'
 
 function isLocalhost(url: string | null | undefined): boolean {
-    return !!url && ['localhost', '127.0.0.1'].includes(new URL(url).hostname)
+    try {
+        return !!url && ['localhost', '127.0.0.1'].includes(new URL(url).hostname)
+    } catch (e) {
+        // for e.g. mobile doesn't have a URL, so we can swallow this and move on
+        return false
+    }
 }
 
 function EmptyNetworkTab({
diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.test.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.test.ts
index 14ad52c0a62c4..adf0e836d4549 100644
--- a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.test.ts
+++ b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.test.ts
@@ -1,8 +1,8 @@
 import { expectLogic } from 'kea-test-utils'
 import { api, MOCK_TEAM_ID } from 'lib/api.mock'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { convertSnapshotsByWindowId } from 'scenes/session-recordings/__mocks__/recording_snapshots'
 import {
-    convertSnapshotsByWindowId,
     prepareRecordingSnapshots,
     sessionRecordingDataLogic,
 } from 'scenes/session-recordings/player/sessionRecordingDataLogic'
diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts
index 623a902ae428e..c360a172388c6 100644
--- a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts
+++ b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts
@@ -1,3 +1,4 @@
+import posthogEE from '@posthog/ee/exports'
 import { EventType, eventWithTime } from '@rrweb/types'
 import { captureException } from '@sentry/react'
 import { actions, connect, defaults, kea, key, listeners, path, props, reducers, selectors } from 'kea'
@@ -29,22 +30,35 @@ import {
     SessionRecordingUsageType,
 } from '~/types'
 
+import { PostHogEE } from '../../../../@posthog/ee/types'
 import type { sessionRecordingDataLogicType } from './sessionRecordingDataLogicType'
 import { createSegments, mapSnapshotsToWindowId } from './utils/segmenter'
 
 const IS_TEST_MODE = process.env.NODE_ENV === 'test'
 const BUFFER_MS = 60000 // +- before and after start and end of a recording to query for.
 
-const parseEncodedSnapshots = (items: (EncodedRecordingSnapshot | string)[], sessionId: string): RecordingSnapshot[] =>
-    items.flatMap((l) => {
+let postHogEEModule: PostHogEE
+
+const parseEncodedSnapshots = async (
+    items: (EncodedRecordingSnapshot | string)[],
+    sessionId: string
+): Promise<RecordingSnapshot[]> => {
+    if (!postHogEEModule) {
+        postHogEEModule = await posthogEE()
+    }
+    return items.flatMap((l) => {
         try {
             const snapshotLine = typeof l === 'string' ? (JSON.parse(l) as EncodedRecordingSnapshot) : l
             const snapshotData = snapshotLine['data']
 
-            return snapshotData.map((d: any) => ({
-                windowId: snapshotLine['window_id'],
-                ...d,
-            }))
+            // TODO can we type this better and still have mobileEventWithTime in ee folder?
+            return snapshotData.map((d: unknown) => {
+                const snap = postHogEEModule?.mobileReplay?.transformEventToWeb(d) || (d as eventWithTime)
+                return {
+                    windowId: snapshotLine['window_id'],
+                    ...(snap || (d as eventWithTime)),
+                }
+            })
         } catch (e) {
             posthog.capture('session recording had unparseable line', {
                 sessionId,
@@ -54,6 +68,7 @@ const parseEncodedSnapshots = (items: (EncodedRecordingSnapshot | string)[], ses
             return []
         }
     })
+}
 
 const getHrefFromSnapshot = (snapshot: RecordingSnapshot): string | undefined => {
     return (snapshot.data as any)?.href || (snapshot.data as any)?.payload?.href
@@ -65,7 +80,7 @@ export const prepareRecordingSnapshots = (
 ): RecordingSnapshot[] => {
     const seenHashes: Record<string, (RecordingSnapshot | string)[]> = {}
 
-    const prepared = (newSnapshots || [])
+    return (newSnapshots || [])
         .concat(existingSnapshots ? existingSnapshots ?? [] : [])
         .filter((snapshot) => {
             // For a multitude of reasons, there can be duplicate snapshots in the same recording.
@@ -89,27 +104,6 @@ export const prepareRecordingSnapshots = (
             return true
         })
         .sort((a, b) => a.timestamp - b.timestamp)
-
-    return prepared
-}
-
-export const convertSnapshotsByWindowId = (snapshotsByWindowId: {
-    [key: string]: eventWithTime[]
-}): RecordingSnapshot[] => {
-    return Object.entries(snapshotsByWindowId).flatMap(([windowId, snapshots]) => {
-        return snapshots.map((snapshot) => ({
-            ...snapshot,
-            windowId,
-        }))
-    })
-}
-
-// Until we change the API to return a simple list of snapshots, we need to convert this ourselves
-export const convertSnapshotsResponse = (
-    snapshotsByWindowId: { [key: string]: eventWithTime[] },
-    existingSnapshots?: RecordingSnapshot[]
-): RecordingSnapshot[] => {
-    return prepareRecordingSnapshots(convertSnapshotsByWindowId(snapshotsByWindowId), existingSnapshots)
 }
 
 const generateRecordingReportDurations = (
@@ -346,8 +340,9 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
                             props.sessionRecordingId,
                             source.blob_key
                         )
+
                         data.snapshots = prepareRecordingSnapshots(
-                            parseEncodedSnapshots(encodedResponse, props.sessionRecordingId),
+                            await parseEncodedSnapshots(encodedResponse, props.sessionRecordingId),
                             values.sessionPlayerSnapshotData?.snapshots ?? []
                         )
                     } else {
@@ -359,7 +354,7 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
                         const response = await api.recordings.listSnapshots(props.sessionRecordingId, params)
                         if (response.snapshots) {
                             data.snapshots = prepareRecordingSnapshots(
-                                parseEncodedSnapshots(response.snapshots, props.sessionRecordingId),
+                                await parseEncodedSnapshots(response.snapshots, props.sessionRecordingId),
                                 values.sessionPlayerSnapshotData?.snapshots ?? []
                             )
                         }
diff --git a/frontend/src/scenes/session-recordings/player/utils/segmenter.test.ts b/frontend/src/scenes/session-recordings/player/utils/segmenter.test.ts
index e08cedf8f036f..1b9c17602ad87 100644
--- a/frontend/src/scenes/session-recordings/player/utils/segmenter.test.ts
+++ b/frontend/src/scenes/session-recordings/player/utils/segmenter.test.ts
@@ -1,10 +1,12 @@
 import { dayjs } from 'lib/dayjs'
 import recordingMetaJson from 'scenes/session-recordings/__mocks__/recording_meta.json'
-import { sortedRecordingSnapshots } from 'scenes/session-recordings/__mocks__/recording_snapshots'
+import {
+    convertSnapshotsResponse,
+    sortedRecordingSnapshots,
+} from 'scenes/session-recordings/__mocks__/recording_snapshots'
 
 import { RecordingSnapshot } from '~/types'
 
-import { convertSnapshotsResponse } from '../sessionRecordingDataLogic'
 import { createSegments } from './segmenter'
 
 describe('segmenter', () => {
diff --git a/frontend/src/toolbar/actions/SelectorCount.tsx b/frontend/src/toolbar/actions/SelectorCount.tsx
index 205620c655d5c..4c53f898f6923 100644
--- a/frontend/src/toolbar/actions/SelectorCount.tsx
+++ b/frontend/src/toolbar/actions/SelectorCount.tsx
@@ -2,10 +2,10 @@ import { querySelectorAllDeep } from 'query-selector-shadow-dom'
 import { useMemo } from 'react'
 
 interface SelectorCountProps {
-    selector: string
+    selector: string | null
 }
 
-export function SelectorCount({ selector }: SelectorCountProps): JSX.Element {
+export function SelectorCount({ selector }: SelectorCountProps): JSX.Element | null {
     const [matches, selectorError] = useMemo(() => {
         let _selectorError = false
         let _matches = 0
@@ -19,7 +19,7 @@ export function SelectorCount({ selector }: SelectorCountProps): JSX.Element {
         return [_matches, _selectorError]
     }, [selector])
 
-    return (
+    return selector === null ? null : (
         <small className={`float-right ${selectorError && 'text-danger'}`}>
             {selectorError ? 'Invalid selector' : `Matches ${matches} element${matches === 1 ? '' : 's'}`}
         </small>
diff --git a/frontend/src/toolbar/actions/StepField.tsx b/frontend/src/toolbar/actions/StepField.tsx
index 42729674f99c9..a6504be939295 100644
--- a/frontend/src/toolbar/actions/StepField.tsx
+++ b/frontend/src/toolbar/actions/StepField.tsx
@@ -18,6 +18,27 @@ interface StepFieldProps {
     caption?: string | JSX.Element
 }
 
+function hrefSelector(step: ActionStepForm): string | null {
+    if (!step.href) {
+        return null
+    }
+    // see https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#links
+    const matchOperator = {
+        // Link whose value is exactly step.href.
+        [StringMatching.Exact]: '=',
+        // Links with step.href anywhere in the URL
+        [StringMatching.Contains]: '*=',
+        // CSS selector can't match on regex
+        [StringMatching.Regex]: null,
+    }[step.href_matching || StringMatching.Exact]
+
+    if (!matchOperator) {
+        return null
+    }
+
+    return `a[href${matchOperator}"${cssEscape(step.href)}"]`
+}
+
 export function StepField({ step, item, label, caption }: StepFieldProps): JSX.Element {
     const selected = step && step[`${item}_selected`]
 
@@ -25,7 +46,7 @@ export function StepField({ step, item, label, caption }: StepFieldProps): JSX.E
         <>
             <div className={clsx('action-field my-1', selected && 'action-field-selected')}>
                 <div>
-                    {item === 'href' && step?.href && <SelectorCount selector={`a[href="${cssEscape(step.href)}"]`} />}
+                    {item === 'href' && step?.href && <SelectorCount selector={hrefSelector(step)} />}
                     {item === 'selector' && step?.selector && <SelectorCount selector={step.selector} />}
                     <Field name={`${item}_selected`} noStyle>
                         {({ onChange, value }) => <LemonCheckbox label={label} onChange={onChange} checked={value} />}
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index d82012f00ef12..03390eb21c0ea 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -831,6 +831,29 @@ export interface PersonListParams {
     include_total?: boolean // PostHog 3000-only
 }
 
+export type SearchableEntity =
+    | 'action'
+    | 'cohort'
+    | 'insight'
+    | 'dashboard'
+    | 'experiment'
+    | 'feature_flag'
+    | 'notebook'
+
+export type SearchListParams = { q: string; entities?: SearchableEntity[] }
+
+export type SearchResultType = {
+    result_id: string
+    type: SearchableEntity
+    rank: number | null
+    extra_fields: Record<string, unknown>
+}
+
+export type SearchResponse = {
+    results: SearchResultType[]
+    counts: Record<SearchableEntity, number | null>
+}
+
 export interface MatchedRecordingEvent {
     uuid: string
 }
@@ -3449,4 +3472,6 @@ export enum SidePanelTab {
     Docs = 'docs',
     Activation = 'activation',
     Settings = 'settings',
+    FeaturePreviews = 'feature-previews',
+    Activity = 'activity',
 }
diff --git a/frontend/utils.mjs b/frontend/utils.mjs
index ba5a901bf577d..d0204981fbc56 100644
--- a/frontend/utils.mjs
+++ b/frontend/utils.mjs
@@ -309,7 +309,7 @@ export async function buildOrWatch(config) {
 
     if (isDev) {
         chokidar
-            .watch(path.resolve(absWorkingDir, 'src'), {
+            .watch([path.resolve(absWorkingDir, 'src'), path.resolve(absWorkingDir, '../ee/frontend')], {
                 ignored: /.*(Type|\.test\.stories)\.[tj]sx$/,
                 ignoreInitial: true,
             })
diff --git a/jest.config.ts b/jest.config.ts
index 3ff4eeff1d470..7316923cd3408 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -1,4 +1,5 @@
 import type { Config } from 'jest'
+import fs from 'fs'
 
 process.env.TZ = process.env.TZ || 'UTC'
 
@@ -8,6 +9,14 @@ process.env.TZ = process.env.TZ || 'UTC'
  */
 
 const esmModules = ['query-selector-shadow-dom', 'react-syntax-highlighter', '@react-hook', '@medv']
+const eeFolderExists = fs.existsSync('ee/frontend/exports.ts')
+function rootDirectories() {
+    const rootDirectories = ['<rootDir>/frontend/src']
+    if (eeFolderExists) {
+        rootDirectories.push('<rootDir>/ee/frontend')
+    }
+    return rootDirectories
+}
 
 const config: Config = {
     // All imported modules in your tests should be mocked automatically
@@ -85,16 +94,16 @@ const config: Config = {
 
     // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
     moduleNameMapper: {
-        '^.+\\.(css|less|scss|svg|png|lottie)$': '<rootDir>/test/mocks/styleMock.js',
-        '^~/(.*)$': '<rootDir>/$1',
-        '^@posthog/lemon-ui(|/.*)$': '<rootDir>/../@posthog/lemon-ui/src/$1',
-        '^@posthog/apps-common(|/.*)$': '<rootDir>/../@posthog/apps-common/src/$1',
-        '^@posthog/ee/exports': ['<rootDir>/../../ee/frontend/exports', '<rootDir>/../@posthog/ee/exports'],
-        '^lib/(.*)$': '<rootDir>/lib/$1',
-        '^scenes/(.*)$': '<rootDir>/scenes/$1',
+        '^.+\\.(css|less|scss|svg|png|lottie)$': '<rootDir>/frontend/src/test/mocks/styleMock.js',
+        '^~/(.*)$': '<rootDir>/frontend/src/$1',
+        '^@posthog/lemon-ui(|/.*)$': '<rootDir>/frontend/@posthog/lemon-ui/src/$1',
+        '^@posthog/apps-common(|/.*)$': '<rootDir>/frontend/@posthog/apps-common/src/$1',
+        '^@posthog/ee/exports': ['<rootDir>/ee/frontend/exports', '<rootDir>/frontend/@posthog/ee/exports'],
+        '^lib/(.*)$': '<rootDir>/frontend/src/lib/$1',
+        '^scenes/(.*)$': '<rootDir>/frontend/src/scenes/$1',
         '^antd/es/(.*)$': 'antd/lib/$1',
         '^react-virtualized/dist/es/(.*)$': 'react-virtualized/dist/commonjs/$1',
-        d3: '<rootDir>/../../node_modules/d3/dist/d3.min.js',
+        d3: '<rootDir>/node_modules/d3/dist/d3.min.js',
         '^d3-(.*)$': `d3-$1/dist/d3-$1`,
     },
 
@@ -129,22 +138,19 @@ const config: Config = {
     // restoreMocks: false,
 
     // The root directory that Jest should scan for tests and modules within
-    rootDir: 'frontend/src',
     modulePaths: ['<rootDir>/'],
 
     // A list of paths to directories that Jest should use to search for files in
-    // roots: [
-    //   "<rootDir>"
-    // ],
+    roots: rootDirectories(),
 
     // Allows you to use a custom runner instead of Jest's default test runner
     // runner: "jest-runner",
 
     // The paths to modules that run some code to configure or set up the testing environment before each test
-    setupFiles: ['../../jest.setup.ts'],
+    setupFiles: ['<rootDir>/jest.setup.ts'],
 
     // A list of paths to modules that run some code to configure or set up the testing framework before each test
-    setupFilesAfterEnv: ['../../jest.setupAfterEnv.ts', 'givens/setup', './mocks/jest.ts'],
+    setupFilesAfterEnv: ['<rootDir>/jest.setupAfterEnv.ts', 'givens/setup', '<rootDir>/frontend/src/mocks/jest.ts'],
 
     // The number of seconds after which a test is considered as slow and reported as such in the results.
     // slowTestThreshold: 5,
diff --git a/package.json b/package.json
index 8c17019f5d25a..48bf5eeb00972 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,10 @@
         "build-storybook": "storybook build",
         "dev:migrate:postgres": "export DEBUG=1 && source env/bin/activate && python manage.py migrate",
         "dev:migrate:clickhouse": "export DEBUG=1 && source env/bin/activate && python manage.py migrate_clickhouse",
-        "prepare": "husky install"
+        "prepare": "husky install",
+        "mobile-replay:web:schema:build:json": "ts-json-schema-generator -f tsconfig.json --path 'node_modules/@rrweb/types/dist/index.d.ts' --type 'eventWithTime' --expose all --no-top-ref --out ee/frontend/mobile-replay/schema/web/rr-web-schema.json && prettier --write ee/frontend/mobile-replay/schema/web/rr-web-schema.json",
+        "mobile-replay:mobile:schema:build:json": "ts-json-schema-generator -f tsconfig.json --path 'ee/frontend/mobile-replay/mobile.types.ts' --type 'mobileEventWithTime' --expose all --no-top-ref --out ee/frontend/mobile-replay/schema/mobile/rr-mobile-schema.json && prettier --write ee/frontend/mobile-replay/schema/mobile/rr-mobile-schema.json",
+        "mobile-replay:schema:build:json": "pnpm mobile-replay:web:schema:build:json && pnpm mobile-replay:mobile:schema:build:json"
     },
     "dependencies": {
         "@ant-design/icons": "^4.7.0",
@@ -95,6 +98,7 @@
         "@types/md5": "^2.3.0",
         "@types/react-transition-group": "^4.4.5",
         "@types/react-virtualized": "^9.21.23",
+        "ajv": "^8.12.0",
         "antd": "^4.17.1",
         "antd-dayjs-webpack-plugin": "^1.0.6",
         "babel-preset-nano-react-app": "^0.1.0",
@@ -246,6 +250,7 @@
         "eslint-plugin-compat": "^4.2.0",
         "eslint-plugin-cypress": "^2.15.1",
         "eslint-plugin-eslint-comments": "^3.2.0",
+        "eslint-plugin-import": "^2.29.0",
         "eslint-plugin-jest": "^27.4.3",
         "eslint-plugin-no-only-tests": "^3.1.0",
         "eslint-plugin-posthog": "link:./eslint-rules",
@@ -258,7 +263,7 @@
         "history": "^5.0.1",
         "html-webpack-harddisk-plugin": "^2.0.0",
         "html-webpack-plugin": "^5.5.3",
-        "jest": "^29.3.1",
+        "jest": "^29.7.0",
         "jest-canvas-mock": "^2.4.0",
         "jest-environment-jsdom": "^29.3.1",
         "jest-image-snapshot": "^6.1.0",
@@ -286,7 +291,7 @@
         "stylelint-order": "^6.0.3",
         "sucrase": "^3.29.0",
         "timekeeper": "^2.2.0",
-        "ts-json-schema-generator": "^1.2.0",
+        "ts-json-schema-generator": "^1.4.0",
         "ts-node": "^10.9.1",
         "typescript": "~4.9.5",
         "webpack": "^5.88.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ff43d2900d170..b003dd8c877f1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -95,6 +95,9 @@ dependencies:
   '@types/react-virtualized':
     specifier: ^9.21.23
     version: 9.21.26
+  ajv:
+    specifier: ^8.12.0
+    version: 8.12.0
   antd:
     specifier: ^4.17.1
     version: 4.17.1(react-dom@18.2.0)(react@18.2.0)
@@ -413,7 +416,7 @@ devDependencies:
     version: 7.5.1
   '@sucrase/jest-plugin':
     specifier: ^3.0.0
-    version: 3.0.0(jest@29.3.1)(sucrase@3.29.0)
+    version: 3.0.0(jest@29.7.0)(sucrase@3.29.0)
   '@testing-library/jest-dom':
     specifier: ^5.16.2
     version: 5.16.5
@@ -540,9 +543,12 @@ devDependencies:
   eslint-plugin-eslint-comments:
     specifier: ^3.2.0
     version: 3.2.0(eslint@8.52.0)
+  eslint-plugin-import:
+    specifier: ^2.29.0
+    version: 2.29.0(@typescript-eslint/parser@6.9.0)(eslint@8.52.0)
   eslint-plugin-jest:
     specifier: ^27.4.3
-    version: 27.4.3(@typescript-eslint/eslint-plugin@6.9.0)(eslint@8.52.0)(jest@29.3.1)(typescript@4.9.5)
+    version: 27.4.3(@typescript-eslint/eslint-plugin@6.9.0)(eslint@8.52.0)(jest@29.7.0)(typescript@4.9.5)
   eslint-plugin-no-only-tests:
     specifier: ^3.1.0
     version: 3.1.0
@@ -577,8 +583,8 @@ devDependencies:
     specifier: ^5.5.3
     version: 5.5.3(webpack@5.88.2)
   jest:
-    specifier: ^29.3.1
-    version: 29.3.1(@types/node@18.11.9)(ts-node@10.9.1)
+    specifier: ^29.7.0
+    version: 29.7.0(@types/node@18.11.9)(ts-node@10.9.1)
   jest-canvas-mock:
     specifier: ^2.4.0
     version: 2.4.0
@@ -587,7 +593,7 @@ devDependencies:
     version: 29.3.1
   jest-image-snapshot:
     specifier: ^6.1.0
-    version: 6.1.0(jest@29.3.1)
+    version: 6.1.0(jest@29.7.0)
   kea-typegen:
     specifier: ^3.3.0
     version: 3.3.0(typescript@4.9.5)
@@ -661,8 +667,8 @@ devDependencies:
     specifier: ^2.2.0
     version: 2.2.0
   ts-json-schema-generator:
-    specifier: ^1.2.0
-    version: 1.2.0
+    specifier: ^1.4.0
+    version: 1.4.1
   ts-node:
     specifier: ^10.9.1
     version: 10.9.1(@swc/core@1.3.93)(@types/node@18.11.9)(typescript@4.9.5)
@@ -2844,18 +2850,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /@jest/console@29.3.1:
-    resolution: {integrity: sha512-IRE6GD47KwcqA09RIWrabKdHPiKDGgtAL31xDxbi/RjQMsr+lY+ppxmHwY0dUEV3qvvxZzoe5Hl0RXZJOjQNUg==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@jest/types': 29.6.3
-      '@types/node': 18.18.4
-      chalk: 4.1.2
-      jest-message-util: 29.7.0
-      jest-util: 29.7.0
-      slash: 3.0.0
-    dev: true
-
   /@jest/console@29.7.0:
     resolution: {integrity: sha512-5Ni4CU7XHQi32IJ398EEP4RrB8eV09sXP2ROqD4bksHrnTree52PsxvX8tpL8LvTZ3pFzXyPbNQReSN41CAhOg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -2868,49 +2862,6 @@ packages:
       slash: 3.0.0
     dev: true
 
-  /@jest/core@29.3.1(ts-node@10.9.1):
-    resolution: {integrity: sha512-0ohVjjRex985w5MmO5L3u5GR1O30DexhBSpuwx2P+9ftyqHdJXnk7IUWiP80oHMvt7ubHCJHxV0a0vlKVuZirw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
-    peerDependenciesMeta:
-      node-notifier:
-        optional: true
-    dependencies:
-      '@jest/console': 29.3.1
-      '@jest/reporters': 29.3.1
-      '@jest/test-result': 29.3.1
-      '@jest/transform': 29.3.1
-      '@jest/types': 29.3.1
-      '@types/node': 18.18.4
-      ansi-escapes: 4.3.2
-      chalk: 4.1.2
-      ci-info: 3.5.0
-      exit: 0.1.2
-      graceful-fs: 4.2.11
-      jest-changed-files: 29.2.0
-      jest-config: 29.3.1(@types/node@18.18.4)(ts-node@10.9.1)
-      jest-haste-map: 29.3.1
-      jest-message-util: 29.3.1
-      jest-regex-util: 29.2.0
-      jest-resolve: 29.3.1
-      jest-resolve-dependencies: 29.3.1
-      jest-runner: 29.3.1
-      jest-runtime: 29.3.1
-      jest-snapshot: 29.3.1
-      jest-util: 29.3.1
-      jest-validate: 29.3.1
-      jest-watcher: 29.3.1
-      micromatch: 4.0.5
-      pretty-format: 29.3.1
-      slash: 3.0.0
-      strip-ansi: 6.0.1
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-    dev: true
-
   /@jest/core@29.7.0(ts-node@10.9.1):
     resolution: {integrity: sha512-n7aeXWKMnGtDA48y8TLWJPJmLmmZ642Ceo78cYWEpiD7FzDgmNDV/GCVRorPABdXLJZ/9wzzgZAlHjXjxDHGsg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -3029,18 +2980,6 @@ packages:
       jest-util: 29.7.0
     dev: true
 
-  /@jest/globals@29.3.1:
-    resolution: {integrity: sha512-cTicd134vOcwO59OPaB6AmdHQMCtWOe+/DitpTZVxWgMJ+YvXL1HNAmPyiGbSHmF/mXVBkvlm8YYtQhyHPnV6Q==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@jest/environment': 29.7.0
-      '@jest/expect': 29.7.0
-      '@jest/types': 29.6.3
-      jest-mock: 29.7.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@jest/globals@29.7.0:
     resolution: {integrity: sha512-mpiz3dutLbkW2MNFubUGUEVLkTGiqW6yLVTA+JbP6fI6J5iL9Y0Nlg8k95pcF8ctKwCS7WVxteBs29hhfAotzQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -3053,43 +2992,6 @@ packages:
       - supports-color
     dev: true
 
-  /@jest/reporters@29.3.1:
-    resolution: {integrity: sha512-GhBu3YFuDrcAYW/UESz1JphEAbvUjaY2vShRZRoRY1mxpCMB3yGSJ4j9n0GxVlEOdCf7qjvUfBCrTUUqhVfbRA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
-    peerDependenciesMeta:
-      node-notifier:
-        optional: true
-    dependencies:
-      '@bcoe/v8-coverage': 0.2.3
-      '@jest/console': 29.3.1
-      '@jest/test-result': 29.7.0
-      '@jest/transform': 29.3.1
-      '@jest/types': 29.6.3
-      '@jridgewell/trace-mapping': 0.3.20
-      '@types/node': 18.18.4
-      chalk: 4.1.2
-      collect-v8-coverage: 1.0.1
-      exit: 0.1.2
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      istanbul-lib-coverage: 3.2.0
-      istanbul-lib-instrument: 5.2.1
-      istanbul-lib-report: 3.0.0
-      istanbul-lib-source-maps: 4.0.1
-      istanbul-reports: 3.1.5
-      jest-message-util: 29.7.0
-      jest-util: 29.7.0
-      jest-worker: 29.3.1
-      slash: 3.0.0
-      string-length: 4.0.2
-      strip-ansi: 6.0.1
-      v8-to-istanbul: 9.0.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@jest/reporters@29.7.0:
     resolution: {integrity: sha512-DApq0KJbJOEzAFYjHADNNxAE3KbhxQB1y5Kplb5Waqw6zVbuWatSnMjE5gs8FUgEPmNsnZA3NCWl9NG0ia04Pg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -3141,15 +3043,6 @@ packages:
       '@sinclair/typebox': 0.27.8
     dev: true
 
-  /@jest/source-map@29.2.0:
-    resolution: {integrity: sha512-1NX9/7zzI0nqa6+kgpSdKPK+WU1p+SJk3TloWZf5MzPbxri9UEeXX5bWZAPCzbQcyuAzubcdUHA7hcNznmRqWQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.20
-      callsites: 3.1.0
-      graceful-fs: 4.2.11
-    dev: true
-
   /@jest/source-map@29.6.3:
     resolution: {integrity: sha512-MHjT95QuipcPrpLM+8JMSzFx6eHp5Bm+4XeFDJlwsvVBjmKNiIAvasGK2fxz2WbGRlnvqehFbh07MMa7n3YJnw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -3159,16 +3052,6 @@ packages:
       graceful-fs: 4.2.11
     dev: true
 
-  /@jest/test-result@29.3.1:
-    resolution: {integrity: sha512-qeLa6qc0ddB0kuOZyZIhfN5q0e2htngokyTWsGriedsDhItisW7SDYZ7ceOe57Ii03sL988/03wAcBh3TChMGw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@jest/console': 29.3.1
-      '@jest/types': 29.6.3
-      '@types/istanbul-lib-coverage': 2.0.4
-      collect-v8-coverage: 1.0.1
-    dev: true
-
   /@jest/test-result@29.7.0:
     resolution: {integrity: sha512-Fdx+tv6x1zlkJPcWXmMDAG2HBnaR9XPSd5aDWQVsfrZmLVT3lU1cwyxLgRmXR9yrq4NBoEm9BMsfgFzTQAbJYA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -3179,16 +3062,6 @@ packages:
       collect-v8-coverage: 1.0.1
     dev: true
 
-  /@jest/test-sequencer@29.3.1:
-    resolution: {integrity: sha512-IqYvLbieTv20ArgKoAMyhLHNrVHJfzO6ARZAbQRlY4UGWfdDnLlZEF0BvKOMd77uIiIjSZRwq3Jb3Fa3I8+2UA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@jest/test-result': 29.7.0
-      graceful-fs: 4.2.11
-      jest-haste-map: 29.7.0
-      slash: 3.0.0
-    dev: true
-
   /@jest/test-sequencer@29.7.0:
     resolution: {integrity: sha512-GQwJ5WZVrKnOJuiYiAF52UNUJXgTZx1NHjFSEB0qEMmSZKAkdMoIzw/Cj6x6NF4AvV23AUqDpFzQkN/eYCYTxw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -5546,13 +5419,13 @@ packages:
       file-system-cache: 2.3.0
     dev: true
 
-  /@sucrase/jest-plugin@3.0.0(jest@29.3.1)(sucrase@3.29.0):
+  /@sucrase/jest-plugin@3.0.0(jest@29.7.0)(sucrase@3.29.0):
     resolution: {integrity: sha512-VRY6YKYImVWiRg1H3Yu24hwB1UPJDSDR62R/n+lOHR3+yDrfHEIAoddJivblMYN6U3vD+ndfTSrecZ9Jl+iGNw==}
     peerDependencies:
       jest: '>=27'
       sucrase: '>=3.25.0'
     dependencies:
-      jest: 29.3.1(@types/node@18.11.9)(ts-node@10.9.1)
+      jest: 29.7.0(@types/node@18.11.9)(ts-node@10.9.1)
       sucrase: 3.29.0
     dev: true
 
@@ -6563,6 +6436,10 @@ packages:
     resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
     dev: true
 
+  /@types/json5@0.0.29:
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+    dev: true
+
   /@types/less@3.0.6:
     resolution: {integrity: sha512-PecSzorDGdabF57OBeQO/xFbAkYWo88g4Xvnsx7LRwqLC17I7OoKtA3bQB9uXkY6UkMWCOsA8HSVpaoitscdXw==}
     dev: false
@@ -6682,10 +6559,6 @@ packages:
       '@types/node': 18.18.4
     dev: true
 
-  /@types/prettier@2.7.1:
-    resolution: {integrity: sha512-ri0UmynRRvZiiUJdiz38MmIblKK+oH30MztdBVR95dv/Ubw6neWSb8u1XpRb72L4qsZOhz+L+z9JD40SJmfWow==}
-    dev: true
-
   /@types/pretty-hrtime@1.0.1:
     resolution: {integrity: sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==}
     dev: true
@@ -7363,7 +7236,7 @@ packages:
       indent-string: 4.0.0
     dev: true
 
-  /ajv-formats@2.1.1(ajv@8.11.0):
+  /ajv-formats@2.1.1(ajv@8.12.0):
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
     peerDependencies:
       ajv: ^8.0.0
@@ -7371,7 +7244,7 @@ packages:
       ajv:
         optional: true
     dependencies:
-      ajv: 8.11.0
+      ajv: 8.12.0
     dev: true
 
   /ajv-keywords@3.5.2(ajv@6.12.6):
@@ -7382,12 +7255,12 @@ packages:
       ajv: 6.12.6
     dev: true
 
-  /ajv-keywords@5.1.0(ajv@8.11.0):
+  /ajv-keywords@5.1.0(ajv@8.12.0):
     resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
     peerDependencies:
       ajv: ^8.8.2
     dependencies:
-      ajv: 8.11.0
+      ajv: 8.12.0
       fast-deep-equal: 3.1.3
     dev: true
 
@@ -7400,14 +7273,13 @@ packages:
       uri-js: 4.4.1
     dev: true
 
-  /ajv@8.11.0:
-    resolution: {integrity: sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==}
+  /ajv@8.12.0:
+    resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
     dependencies:
       fast-deep-equal: 3.1.3
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
       uri-js: 4.4.1
-    dev: true
 
   /alphanum-sort@1.0.2:
     resolution: {integrity: sha512-0FcBfdcmaumGPQ0qPn7Q5qTgz/ooXgIyp1rf8ik5bGX8mpE2YHjC0P/eyQvxu1GURYQgq9ozf2mteQ5ZD9YiyQ==}
@@ -7621,6 +7493,17 @@ packages:
       is-string: 1.0.7
     dev: true
 
+  /array-includes@3.1.7:
+    resolution: {integrity: sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      get-intrinsic: 1.2.2
+      is-string: 1.0.7
+    dev: true
+
   /array-tree-filter@2.1.0:
     resolution: {integrity: sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==}
     dev: false
@@ -7630,6 +7513,27 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /array.prototype.findlastindex@1.2.3:
+    resolution: {integrity: sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-shim-unscopables: 1.0.0
+      get-intrinsic: 1.2.2
+    dev: true
+
+  /array.prototype.flat@1.3.2:
+    resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-shim-unscopables: 1.0.0
+    dev: true
+
   /array.prototype.flatmap@1.3.1:
     resolution: {integrity: sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==}
     engines: {node: '>= 0.4'}
@@ -7640,6 +7544,16 @@ packages:
       es-shim-unscopables: 1.0.0
     dev: true
 
+  /array.prototype.flatmap@1.3.2:
+    resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-shim-unscopables: 1.0.0
+    dev: true
+
   /array.prototype.reduce@1.0.5:
     resolution: {integrity: sha512-kDdugMl7id9COE8R7MHF5jWk7Dqt/fs4Pv+JXoICnYwqpjjjbUurz6w5fT5IG6brLdJhv6/VoHB0H7oyIBXd+Q==}
     engines: {node: '>= 0.4'}
@@ -7815,24 +7729,6 @@ packages:
       '@babel/core': 7.22.10
     dev: true
 
-  /babel-jest@29.3.1(@babel/core@7.22.10):
-    resolution: {integrity: sha512-aard+xnMoxgjwV70t0L6wkW/3HQQtV+O0PEimxKgzNqCJnbYmroPojdP2tqKSOAt8QAKV/uSZU8851M7B5+fcA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      '@babel/core': ^7.8.0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@jest/transform': 29.7.0
-      '@types/babel__core': 7.20.4
-      babel-plugin-istanbul: 6.1.1
-      babel-preset-jest: 29.2.0(@babel/core@7.22.10)
-      chalk: 4.1.2
-      graceful-fs: 4.2.11
-      slash: 3.0.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /babel-jest@29.7.0(@babel/core@7.22.10):
     resolution: {integrity: sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -7902,16 +7798,6 @@ packages:
       - supports-color
     dev: true
 
-  /babel-plugin-jest-hoist@29.2.0:
-    resolution: {integrity: sha512-TnspP2WNiR3GLfCsUNHqeXw0RoQ2f9U5hQ5L3XFpwuO8htQmSrhh8qsB6vi5Yi8+kuynN1yjDjQsPfkebmB6ZA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@babel/template': 7.22.15
-      '@babel/types': 7.23.4
-      '@types/babel__core': 7.20.4
-      '@types/babel__traverse': 7.20.4
-    dev: true
-
   /babel-plugin-jest-hoist@29.6.3:
     resolution: {integrity: sha512-ESAc/RJvGTFEzRwOTT4+lNDk/GNHMkKbNzsvT0qKRfDyyYTskxB5rnU2njIDYVxXCBHHEI1c0YwHob3WaYujOg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -7989,17 +7875,6 @@ packages:
       '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.22.10)
     dev: true
 
-  /babel-preset-jest@29.2.0(@babel/core@7.22.10):
-    resolution: {integrity: sha512-z9JmMJppMxNv8N7fNRHvhMg9cvIkMxQBXgFkane3yKVEvEOP+kB50lk8DFRvF9PGqbyXxlmebKWhuDORO8RgdA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.22.10
-      babel-plugin-jest-hoist: 29.2.0
-      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.22.10)
-    dev: true
-
   /babel-preset-jest@29.6.3(@babel/core@7.22.10):
     resolution: {integrity: sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -8655,6 +8530,11 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
+  /commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+    dev: true
+
   /commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
     dev: true
@@ -10355,6 +10235,45 @@ packages:
       eslint: 8.52.0
     dev: true
 
+  /eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+    dependencies:
+      debug: 3.2.7(supports-color@8.1.1)
+      is-core-module: 2.13.1
+      resolve: 1.22.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.9.0)(eslint-import-resolver-node@0.3.9)(eslint@8.52.0):
+    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 6.9.0(eslint@8.52.0)(typescript@4.9.5)
+      debug: 3.2.7(supports-color@8.1.1)
+      eslint: 8.52.0
+      eslint-import-resolver-node: 0.3.9
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /eslint-plugin-compat@4.2.0(eslint@8.52.0):
     resolution: {integrity: sha512-RDKSYD0maWy5r7zb5cWQS+uSPc26mgOzdORJ8hxILmWM7S/Ncwky7BcAtXVY5iRbKjBdHsWU8Yg7hfoZjtkv7w==}
     engines: {node: '>=14.x'}
@@ -10391,7 +10310,42 @@ packages:
       ignore: 5.2.4
     dev: true
 
-  /eslint-plugin-jest@27.4.3(@typescript-eslint/eslint-plugin@6.9.0)(eslint@8.52.0)(jest@29.3.1)(typescript@4.9.5):
+  /eslint-plugin-import@2.29.0(@typescript-eslint/parser@6.9.0)(eslint@8.52.0):
+    resolution: {integrity: sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 6.9.0(eslint@8.52.0)(typescript@4.9.5)
+      array-includes: 3.1.7
+      array.prototype.findlastindex: 1.2.3
+      array.prototype.flat: 1.3.2
+      array.prototype.flatmap: 1.3.2
+      debug: 3.2.7(supports-color@8.1.1)
+      doctrine: 2.1.0
+      eslint: 8.52.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.9.0)(eslint-import-resolver-node@0.3.9)(eslint@8.52.0)
+      hasown: 2.0.0
+      is-core-module: 2.13.1
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.fromentries: 2.0.7
+      object.groupby: 1.0.1
+      object.values: 1.1.7
+      semver: 6.3.1
+      tsconfig-paths: 3.14.2
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
+  /eslint-plugin-jest@27.4.3(@typescript-eslint/eslint-plugin@6.9.0)(eslint@8.52.0)(jest@29.7.0)(typescript@4.9.5):
     resolution: {integrity: sha512-7S6SmmsHsgIm06BAGCAxL+ABd9/IB3MWkz2pudj6Qqor2y1qQpWPfuFU4SG9pWj4xDjF0e+D7Llh5useuSzAZw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
@@ -10407,7 +10361,7 @@ packages:
       '@typescript-eslint/eslint-plugin': 6.9.0(@typescript-eslint/parser@6.9.0)(eslint@8.52.0)(typescript@4.9.5)
       '@typescript-eslint/utils': 5.55.0(eslint@8.52.0)(typescript@4.9.5)
       eslint: 8.52.0
-      jest: 29.3.1(@types/node@18.11.9)(ts-node@10.9.1)
+      jest: 29.7.0(@types/node@18.11.9)(ts-node@10.9.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -12634,14 +12588,6 @@ packages:
       moo-color: 1.0.3
     dev: true
 
-  /jest-changed-files@29.2.0:
-    resolution: {integrity: sha512-qPVmLLyBmvF5HJrY7krDisx6Voi8DmlV3GZYX0aFNbaQsZeoz1hfxcCMbqDGuQCxU1dJy9eYc2xscE8QrCCYaA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      execa: 5.1.1
-      p-limit: 3.1.0
-    dev: true
-
   /jest-changed-files@29.7.0:
     resolution: {integrity: sha512-fEArFiwf1BpQ+4bXSprcDc3/x4HSzL4al2tozwVpDFpsxALjLYdyiIK4e5Vz66GQJIbXJ82+35PtysofptNX2w==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -12680,35 +12626,6 @@ packages:
       - supports-color
     dev: true
 
-  /jest-cli@29.3.1(@types/node@18.11.9)(ts-node@10.9.1):
-    resolution: {integrity: sha512-TO/ewvwyvPOiBBuWZ0gm04z3WWP8TIK8acgPzE4IxgsLKQgb377NYGrQLc3Wl/7ndWzIH2CDNNsUjGxwLL43VQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    hasBin: true
-    peerDependencies:
-      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
-    peerDependenciesMeta:
-      node-notifier:
-        optional: true
-    dependencies:
-      '@jest/core': 29.3.1(ts-node@10.9.1)
-      '@jest/test-result': 29.3.1
-      '@jest/types': 29.3.1
-      chalk: 4.1.2
-      exit: 0.1.2
-      graceful-fs: 4.2.11
-      import-local: 3.1.0
-      jest-config: 29.3.1(@types/node@18.11.9)(ts-node@10.9.1)
-      jest-util: 29.3.1
-      jest-validate: 29.3.1
-      prompts: 2.4.2
-      yargs: 17.6.2
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-    dev: true
-
   /jest-cli@29.7.0(@types/node@18.11.9)(ts-node@10.9.1):
     resolution: {integrity: sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -12737,8 +12654,8 @@ packages:
       - ts-node
     dev: true
 
-  /jest-config@29.3.1(@types/node@18.11.9)(ts-node@10.9.1):
-    resolution: {integrity: sha512-y0tFHdj2WnTEhxmGUK1T7fgLen7YK4RtfvpLFBXfQkh2eMJAQq24Vx9472lvn5wg0MAO6B+iPfJfzdR9hJYalg==}
+  /jest-config@29.7.0(@types/node@18.11.9)(ts-node@10.9.1):
+    resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
       '@types/node': '*'
@@ -12750,89 +12667,7 @@ packages:
         optional: true
     dependencies:
       '@babel/core': 7.22.10
-      '@jest/test-sequencer': 29.3.1
-      '@jest/types': 29.6.3
-      '@types/node': 18.11.9
-      babel-jest: 29.3.1(@babel/core@7.22.10)
-      chalk: 4.1.2
-      ci-info: 3.5.0
-      deepmerge: 4.2.2
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      jest-circus: 29.7.0
-      jest-environment-node: 29.7.0
-      jest-get-type: 29.2.0
-      jest-regex-util: 29.2.0
-      jest-resolve: 29.3.1
-      jest-runner: 29.7.0
-      jest-util: 29.7.0
-      jest-validate: 29.3.1
-      micromatch: 4.0.5
-      parse-json: 5.2.0
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      strip-json-comments: 3.1.1
-      ts-node: 10.9.1(@swc/core@1.3.93)(@types/node@18.11.9)(typescript@4.9.5)
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-    dev: true
-
-  /jest-config@29.3.1(@types/node@18.18.4)(ts-node@10.9.1):
-    resolution: {integrity: sha512-y0tFHdj2WnTEhxmGUK1T7fgLen7YK4RtfvpLFBXfQkh2eMJAQq24Vx9472lvn5wg0MAO6B+iPfJfzdR9hJYalg==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      '@types/node': '*'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      ts-node:
-        optional: true
-    dependencies:
-      '@babel/core': 7.22.10
-      '@jest/test-sequencer': 29.3.1
-      '@jest/types': 29.6.3
-      '@types/node': 18.18.4
-      babel-jest: 29.3.1(@babel/core@7.22.10)
-      chalk: 4.1.2
-      ci-info: 3.5.0
-      deepmerge: 4.2.2
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      jest-circus: 29.7.0
-      jest-environment-node: 29.7.0
-      jest-get-type: 29.2.0
-      jest-regex-util: 29.2.0
-      jest-resolve: 29.3.1
-      jest-runner: 29.7.0
-      jest-util: 29.7.0
-      jest-validate: 29.3.1
-      micromatch: 4.0.5
-      parse-json: 5.2.0
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      strip-json-comments: 3.1.1
-      ts-node: 10.9.1(@swc/core@1.3.93)(@types/node@18.11.9)(typescript@4.9.5)
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-    dev: true
-
-  /jest-config@29.7.0(@types/node@18.11.9)(ts-node@10.9.1):
-    resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      '@types/node': '*'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      ts-node:
-        optional: true
-    dependencies:
-      '@babel/core': 7.22.10
-      '@jest/test-sequencer': 29.7.0
+      '@jest/test-sequencer': 29.7.0
       '@jest/types': 29.6.3
       '@types/node': 18.11.9
       babel-jest: 29.7.0(@babel/core@7.22.10)
@@ -12921,13 +12756,6 @@ packages:
       pretty-format: 29.7.0
     dev: true
 
-  /jest-docblock@29.2.0:
-    resolution: {integrity: sha512-bkxUsxTgWQGbXV5IENmfiIuqZhJcyvF7tU4zJ/7ioTutdz4ToB5Yx6JOFBpgI+TphRY4lhOyCWGNH/QFQh5T6A==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      detect-newline: 3.1.0
-    dev: true
-
   /jest-docblock@29.7.0:
     resolution: {integrity: sha512-q617Auw3A612guyaFgsbFeYpNP5t2aoUNLwBUbc/0kD1R4t9ixDbyFTHd1nok4epoVFpr7PmeWHrhvuV3XaJ4g==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -13029,7 +12857,7 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /jest-image-snapshot@6.1.0(jest@29.3.1):
+  /jest-image-snapshot@6.1.0(jest@29.7.0):
     resolution: {integrity: sha512-LZYoks6V1HAkYqyi80gUjMWVsa++Oy0fckAGMLBQseVweZT9AmJNKAINwHLqX1fpeMy2hTG5CCEe4IUX2N3Nmg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
@@ -13038,7 +12866,7 @@ packages:
       chalk: 4.1.2
       get-stdin: 5.0.1
       glur: 1.1.2
-      jest: 29.3.1(@types/node@18.11.9)(ts-node@10.9.1)
+      jest: 29.7.0(@types/node@18.11.9)(ts-node@10.9.1)
       lodash: 4.17.21
       mkdirp: 0.5.6
       pixelmatch: 5.3.0
@@ -13057,14 +12885,6 @@ packages:
       xml: 1.0.1
     dev: true
 
-  /jest-leak-detector@29.3.1:
-    resolution: {integrity: sha512-3DA/VVXj4zFOPagGkuqHnSQf1GZBmmlagpguxEERO6Pla2g84Q1MaVIB3YMxgUaFIaYag8ZnTyQgiZ35YEqAQA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      jest-get-type: 29.6.3
-      pretty-format: 29.7.0
-    dev: true
-
   /jest-leak-detector@29.7.0:
     resolution: {integrity: sha512-kYA8IJcSYtST2BY9I+SMC32nDpBT3J2NvWJx8+JCuCdl/CR1I4EKUJROiP8XtCcxqgTTBGJNdbB1A8XRKbTetw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -13164,18 +12984,6 @@ packages:
       - supports-color
     dev: true
 
-  /jest-pnp-resolver@1.2.2(jest-resolve@29.3.1):
-    resolution: {integrity: sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==}
-    engines: {node: '>=6'}
-    peerDependencies:
-      jest-resolve: '*'
-    peerDependenciesMeta:
-      jest-resolve:
-        optional: true
-    dependencies:
-      jest-resolve: 29.3.1
-    dev: true
-
   /jest-pnp-resolver@1.2.2(jest-resolve@29.7.0):
     resolution: {integrity: sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==}
     engines: {node: '>=6'}
@@ -13216,16 +13024,6 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dev: true
 
-  /jest-resolve-dependencies@29.3.1:
-    resolution: {integrity: sha512-Vk0cYq0byRw2WluNmNWGqPeRnZ3p3hHmjJMp2dyyZeYIfiBskwq4rpiuGFR6QGAdbj58WC7HN4hQHjf2mpvrLA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      jest-regex-util: 29.2.0
-      jest-snapshot: 29.7.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /jest-resolve-dependencies@29.7.0:
     resolution: {integrity: sha512-un0zD/6qxJ+S0et7WxeI3H5XSe9lTBBR7bOHCHXkKR6luG5mwDDlIzVQ0V5cZCuoTgEdcdwzTghYkTWfubi+nA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -13236,21 +13034,6 @@ packages:
       - supports-color
     dev: true
 
-  /jest-resolve@29.3.1:
-    resolution: {integrity: sha512-amXJgH/Ng712w3Uz5gqzFBBjxV8WFLSmNjoreBGMqxgCz5cH7swmBZzgBaCIOsvb0NbpJ0vgaSFdJqMdT+rADw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      chalk: 4.1.2
-      graceful-fs: 4.2.11
-      jest-haste-map: 29.3.1
-      jest-pnp-resolver: 1.2.2(jest-resolve@29.3.1)
-      jest-util: 29.7.0
-      jest-validate: 29.3.1
-      resolve: 1.22.8
-      resolve.exports: 1.1.0
-      slash: 3.0.0
-    dev: true
-
   /jest-resolve@29.7.0:
     resolution: {integrity: sha512-IOVhZSrg+UvVAshDSDtHyFCCBUl/Q3AAJv8iZ6ZjnZ74xzvwuzLXid9IIIPgTnY62SJjfuupMKZsZQRsCvxEgA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -13266,35 +13049,6 @@ packages:
       slash: 3.0.0
     dev: true
 
-  /jest-runner@29.3.1:
-    resolution: {integrity: sha512-oFvcwRNrKMtE6u9+AQPMATxFcTySyKfLhvso7Sdk/rNpbhg4g2GAGCopiInk1OP4q6gz3n6MajW4+fnHWlU3bA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@jest/console': 29.3.1
-      '@jest/environment': 29.7.0
-      '@jest/test-result': 29.7.0
-      '@jest/transform': 29.3.1
-      '@jest/types': 29.6.3
-      '@types/node': 18.18.4
-      chalk: 4.1.2
-      emittery: 0.13.1
-      graceful-fs: 4.2.11
-      jest-docblock: 29.2.0
-      jest-environment-node: 29.7.0
-      jest-haste-map: 29.3.1
-      jest-leak-detector: 29.3.1
-      jest-message-util: 29.7.0
-      jest-resolve: 29.3.1
-      jest-runtime: 29.7.0
-      jest-util: 29.7.0
-      jest-watcher: 29.3.1
-      jest-worker: 29.3.1
-      p-limit: 3.1.0
-      source-map-support: 0.5.13
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /jest-runner@29.7.0:
     resolution: {integrity: sha512-fsc4N6cPCAahybGBfTRcq5wFR6fpLznMg47sY5aDpsoejOcVYFb07AHuSnR0liMcPTgBsA3ZJL6kFOjPdoNipQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -13324,36 +13078,6 @@ packages:
       - supports-color
     dev: true
 
-  /jest-runtime@29.3.1:
-    resolution: {integrity: sha512-jLzkIxIqXwBEOZx7wx9OO9sxoZmgT2NhmQKzHQm1xwR1kNW/dn0OjxR424VwHHf1SPN6Qwlb5pp1oGCeFTQ62A==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@jest/environment': 29.7.0
-      '@jest/fake-timers': 29.7.0
-      '@jest/globals': 29.3.1
-      '@jest/source-map': 29.2.0
-      '@jest/test-result': 29.7.0
-      '@jest/transform': 29.3.1
-      '@jest/types': 29.6.3
-      '@types/node': 18.18.4
-      chalk: 4.1.2
-      cjs-module-lexer: 1.2.2
-      collect-v8-coverage: 1.0.1
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      jest-haste-map: 29.3.1
-      jest-message-util: 29.7.0
-      jest-mock: 29.7.0
-      jest-regex-util: 29.2.0
-      jest-resolve: 29.3.1
-      jest-snapshot: 29.7.0
-      jest-util: 29.7.0
-      slash: 3.0.0
-      strip-bom: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /jest-runtime@29.7.0:
     resolution: {integrity: sha512-gUnLjgwdGqW7B4LvOIkbKs9WGbn+QLqRQQ9juC6HndeDiezIwhDP+mhMwHWCEcfQ5RUXa6OPnFF8BJh5xegwwQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -13390,38 +13114,6 @@ packages:
       diffable-html: 4.1.0
     dev: true
 
-  /jest-snapshot@29.3.1:
-    resolution: {integrity: sha512-+3JOc+s28upYLI2OJM4PWRGK9AgpsMs/ekNryUV0yMBClT9B1DF2u2qay8YxcQd338PPYSFNb0lsar1B49sLDA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/generator': 7.23.0
-      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.22.10)
-      '@babel/traverse': 7.23.2
-      '@babel/types': 7.23.4
-      '@jest/expect-utils': 29.3.1
-      '@jest/transform': 29.3.1
-      '@jest/types': 29.6.3
-      '@types/babel__traverse': 7.20.3
-      '@types/prettier': 2.7.1
-      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.22.10)
-      chalk: 4.1.2
-      expect: 29.3.1
-      graceful-fs: 4.2.11
-      jest-diff: 29.3.1
-      jest-get-type: 29.2.0
-      jest-haste-map: 29.3.1
-      jest-matcher-utils: 29.7.0
-      jest-message-util: 29.7.0
-      jest-util: 29.7.0
-      natural-compare: 1.4.0
-      pretty-format: 29.7.0
-      semver: 7.5.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /jest-snapshot@29.7.0:
     resolution: {integrity: sha512-Rm0BMWtxBcioHr1/OX5YCP8Uov4riHvKPknOGs804Zg9JGZgmIBkbtlxJC/7Z4msKYVbIJtfU+tKb8xlYNfdkw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -13474,18 +13166,6 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /jest-validate@29.3.1:
-    resolution: {integrity: sha512-N9Lr3oYR2Mpzuelp1F8negJR3YE+L1ebk1rYA5qYo9TTY3f9OWdptLoNSPP9itOCBIRBqjt/S5XHlzYglLN67g==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@jest/types': 29.6.3
-      camelcase: 6.3.0
-      chalk: 4.1.2
-      jest-get-type: 29.2.0
-      leven: 3.1.0
-      pretty-format: 29.7.0
-    dev: true
-
   /jest-validate@29.7.0:
     resolution: {integrity: sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -13514,20 +13194,6 @@ packages:
       strip-ansi: 7.0.1
     dev: true
 
-  /jest-watcher@29.3.1:
-    resolution: {integrity: sha512-RspXG2BQFDsZSRKGCT/NiNa8RkQ1iKAjrO0//soTMWx/QUt+OcxMqMSBxz23PYGqUuWm2+m2mNNsmj0eIoOaFg==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@jest/test-result': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/node': 18.18.4
-      ansi-escapes: 4.3.2
-      chalk: 4.1.2
-      emittery: 0.13.1
-      jest-util: 29.7.0
-      string-length: 4.0.2
-    dev: true
-
   /jest-watcher@29.7.0:
     resolution: {integrity: sha512-49Fg7WXkU3Vl2h6LbLtMQ/HyB6rXSIX7SqvBLQmssRBGN9I0PNvPmAmCWSOY6SOvrjhI/F7/bGAv9RtnsPA03g==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -13571,27 +13237,6 @@ packages:
       supports-color: 8.1.1
     dev: true
 
-  /jest@29.3.1(@types/node@18.11.9)(ts-node@10.9.1):
-    resolution: {integrity: sha512-6iWfL5DTT0Np6UYs/y5Niu7WIfNv/wRTtN5RSXt2DIEft3dx3zPuw/3WJQBCJfmEzvDiEKwoqMbGD9n49+qLSA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    hasBin: true
-    peerDependencies:
-      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
-    peerDependenciesMeta:
-      node-notifier:
-        optional: true
-    dependencies:
-      '@jest/core': 29.3.1(ts-node@10.9.1)
-      '@jest/types': 29.3.1
-      import-local: 3.1.0
-      jest-cli: 29.3.1(@types/node@18.11.9)(ts-node@10.9.1)
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-    dev: true
-
   /jest@29.7.0(@types/node@18.11.9)(ts-node@10.9.1):
     resolution: {integrity: sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -13749,7 +13394,6 @@ packages:
 
   /json-schema-traverse@1.0.0:
     resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
-    dev: true
 
   /json-schema@0.4.0:
     resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
@@ -13779,6 +13423,13 @@ packages:
       minimist: 1.2.8
     dev: true
 
+  /json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.8
+    dev: true
+
   /json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
@@ -14918,6 +14569,15 @@ packages:
       es-abstract: 1.20.4
     dev: true
 
+  /object.fromentries@2.0.7:
+    resolution: {integrity: sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+    dev: true
+
   /object.getownpropertydescriptors@2.1.4:
     resolution: {integrity: sha512-sccv3L/pMModT6dJAYF3fzGMVcb38ysQ0tEE6ixv2yXJDtEIPph268OlAdJj5/qZMZDq2g/jqvwppt36uS/uQQ==}
     engines: {node: '>= 0.8'}
@@ -14928,6 +14588,15 @@ packages:
       es-abstract: 1.22.3
     dev: true
 
+  /object.groupby@1.0.1:
+    resolution: {integrity: sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      get-intrinsic: 1.2.2
+    dev: true
+
   /object.hasown@1.1.2:
     resolution: {integrity: sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==}
     dependencies:
@@ -14958,6 +14627,15 @@ packages:
       es-abstract: 1.20.4
     dev: true
 
+  /object.values@1.1.7:
+    resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+    dev: true
+
   /objectorarray@1.0.5:
     resolution: {integrity: sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==}
     dev: true
@@ -16159,7 +15837,6 @@ packages:
   /punycode@2.1.1:
     resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
     engines: {node: '>=6'}
-    dev: true
 
   /puppeteer-core@2.1.1:
     resolution: {integrity: sha512-n13AWriBMPYxnpbb6bnaY5YoY6rGj8vPLrz6CZF3o0qJNEwlcfJVxBzYZ0NJsQ21UbdJoijPCDrM++SUVEz7+w==}
@@ -17436,11 +17113,6 @@ packages:
       protocol-buffers-schema: 3.6.0
     dev: false
 
-  /resolve.exports@1.1.0:
-    resolution: {integrity: sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==}
-    engines: {node: '>=10'}
-    dev: true
-
   /resolve.exports@2.0.2:
     resolution: {integrity: sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==}
     engines: {node: '>=10'}
@@ -17609,8 +17281,8 @@ packages:
       is-regex: 1.1.4
     dev: true
 
-  /safe-stable-stringify@2.4.1:
-    resolution: {integrity: sha512-dVHE6bMtS/bnL2mwualjc6IxEv1F+OCUpA46pKUj6F8uDbUM0jCCulPqRNPSnWwGNKx5etqMjZYdXtrm5KJZGA==}
+  /safe-stable-stringify@2.4.3:
+    resolution: {integrity: sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g==}
     engines: {node: '>=10'}
     dev: true
 
@@ -17689,9 +17361,9 @@ packages:
     engines: {node: '>= 12.13.0'}
     dependencies:
       '@types/json-schema': 7.0.12
-      ajv: 8.11.0
-      ajv-formats: 2.1.1(ajv@8.11.0)
-      ajv-keywords: 5.1.0(ajv@8.11.0)
+      ajv: 8.12.0
+      ajv-formats: 2.1.1(ajv@8.12.0)
+      ajv-keywords: 5.1.0(ajv@8.12.0)
     dev: true
 
   /scroll-into-view-if-needed@2.2.26:
@@ -18239,6 +17911,11 @@ packages:
       ansi-regex: 6.0.1
     dev: true
 
+  /strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+    dev: true
+
   /strip-bom@4.0.0:
     resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
     engines: {node: '>=8'}
@@ -18553,7 +18230,7 @@ packages:
     resolution: {integrity: sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==}
     engines: {node: '>=10.0.0'}
     dependencies:
-      ajv: 8.11.0
+      ajv: 8.12.0
       lodash.truncate: 4.4.2
       slice-ansi: 4.0.0
       string-width: 4.2.3
@@ -18843,18 +18520,18 @@ packages:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: true
 
-  /ts-json-schema-generator@1.2.0:
-    resolution: {integrity: sha512-tUMeO3ZvA12d3HHh7T/AK8W5hmUhDRNtqWRHSMN3ZRbUFt+UmV0oX8k1RK4SA+a+BKNHpmW2v06MS49e8Fi3Yg==}
+  /ts-json-schema-generator@1.4.1:
+    resolution: {integrity: sha512-wnhPMtskk9KvsTuU8AYx0TNdm1YrLVUEontT22+jL12JIPqPXdaoxPgsYBhlqDXsR9R9Nm2bJgH5r4IrTMbTSg==}
     engines: {node: '>=10.0.0'}
     hasBin: true
     dependencies:
       '@types/json-schema': 7.0.12
-      commander: 9.4.1
+      commander: 11.1.0
       glob: 8.0.3
       json5: 2.2.3
       normalize-path: 3.0.0
-      safe-stable-stringify: 2.4.1
-      typescript: 4.9.5
+      safe-stable-stringify: 2.4.3
+      typescript: 5.3.2
     dev: true
 
   /ts-node@10.9.1(@swc/core@1.3.93)(@types/node@18.11.9)(typescript@4.9.5):
@@ -18889,6 +18566,15 @@ packages:
       yn: 3.1.1
     dev: true
 
+  /tsconfig-paths@3.14.2:
+    resolution: {integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==}
+    dependencies:
+      '@types/json5': 0.0.29
+      json5: 1.0.2
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+    dev: true
+
   /tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
 
@@ -19034,6 +18720,12 @@ packages:
     hasBin: true
     dev: true
 
+  /typescript@5.3.2:
+    resolution: {integrity: sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+    dev: true
+
   /typewise-core@1.2.0:
     resolution: {integrity: sha512-2SCC/WLzj2SbUwzFOzqMCkz5amXLlxtJqDKTICqg30x+2DZxcfZN2MvQZmGfXWKNWaKK9pBPsvkcwv8bF/gxKg==}
     dev: false
@@ -19200,7 +18892,6 @@ packages:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
       punycode: 2.1.1
-    dev: true
 
   /url-parse@1.5.10:
     resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
diff --git a/posthog/api/activity_log.py b/posthog/api/activity_log.py
index 31df6adefb586..09d3bec7a3de9 100644
--- a/posthog/api/activity_log.py
+++ b/posthog/api/activity_log.py
@@ -1,7 +1,8 @@
 from typing import Any, Optional
 
 from django.db.models import Q, QuerySet
-from rest_framework import serializers, status, viewsets, pagination
+
+from rest_framework import serializers, status, viewsets, pagination, mixins
 from rest_framework.decorators import action
 from rest_framework.exceptions import ValidationError
 from rest_framework.request import Request
@@ -23,6 +24,9 @@ class Meta:
 
     def get_unread(self, obj: ActivityLog) -> bool:
         """is the date of this log item newer than the user's bookmark"""
+        if "user" not in self.context:
+            return False
+
         user_bookmark: Optional[NotificationViewed] = NotificationViewed.objects.filter(
             user=self.context["user"]
         ).first()
@@ -35,11 +39,12 @@ def get_unread(self, obj: ActivityLog) -> bool:
             return bookmark_date < obj.created_at.replace(microsecond=obj.created_at.microsecond // 1000 * 1000)
 
 
-class ActivityLogPagination(pagination.LimitOffsetPagination):
-    default_limit = 500
+class ActivityLogPagination(pagination.CursorPagination):
+    ordering = "-created_at"
+    page_size = 100
 
 
-class ActivityLogViewSet(StructuredViewSetMixin, viewsets.GenericViewSet):
+class ActivityLogViewSet(StructuredViewSetMixin, viewsets.GenericViewSet, mixins.ListModelMixin):
     queryset = ActivityLog.objects.all()
     serializer_class = ActivityLogSerializer
     pagination_class = ActivityLogPagination
@@ -48,9 +53,20 @@ def filter_queryset_by_parents_lookups(self, queryset) -> QuerySet:
         team = self.team
         return queryset.filter(Q(organization_id=team.organization_id) | Q(team_id=team.id))
 
+    def get_queryset(self) -> QuerySet:
+        queryset = super().get_queryset()
+        params = self.request.GET.dict()
+
+        if params.get("user"):
+            queryset = queryset.filter(user=params.get("user"))
+
+        return queryset
+
     @action(methods=["GET"], detail=False)
     def important_changes(self, request: Request, *args: Any, **kwargs: Any) -> Response:
         user = self.request.user
+        params = self.request.GET.dict()
+
         if not isinstance(user, User):
             # this is for mypy
             return Response(status=status.HTTP_401_UNAUTHORIZED)
@@ -105,7 +121,8 @@ def important_changes(self, request: Request, *args: Any, **kwargs: Any) -> Resp
 
         last_read_date = NotificationViewed.objects.filter(user=user).first()
         last_read_filter = ""
-        if last_read_date:
+
+        if last_read_date and params.get("unread") == "true":
             last_read_filter = f"AND created_at > '{last_read_date.last_viewed_activity_date.isoformat()}'"
 
         # before we filter to include only the important changes, we need to deduplicate too frequent changes
@@ -154,7 +171,7 @@ def important_changes(self, request: Request, *args: Any, **kwargs: Any) -> Resp
             .order_by("-created_at")
         )
 
-        if last_read_date:
+        if last_read_date and params.get("unread") == "true":
             other_peoples_changes = other_peoples_changes.filter(
                 created_at__gt=last_read_date.last_viewed_activity_date
             )
diff --git a/posthog/api/search.py b/posthog/api/search.py
index 54bae3609ab63..e01298fdccf6b 100644
--- a/posthog/api/search.py
+++ b/posthog/api/search.py
@@ -156,6 +156,7 @@ def class_queryset(
         )
         qs = qs.filter(rank__gt=0.05)
         values.append("rank")
+        qs.annotate(rank=F("rank"))
 
     # specify fields to fetch
     qs = qs.values(*values)
diff --git a/posthog/api/test/test_activity_log.py b/posthog/api/test/test_activity_log.py
index a59a9e2736de0..a7573f10cabd3 100644
--- a/posthog/api/test/test_activity_log.py
+++ b/posthog/api/test/test_activity_log.py
@@ -235,7 +235,7 @@ def test_can_get_top_ten_important_changes_including_my_edits(self) -> None:
     def test_reading_notifications_marks_them_unread(self):
         self.client.force_login(self.user)
 
-        changes = self.client.get(f"/api/projects/{self.team.id}/activity_log/important_changes")
+        changes = self.client.get(f"/api/projects/{self.team.id}/activity_log/important_changes?unread=true")
         assert changes.status_code == status.HTTP_200_OK
         assert len(changes.json()["results"]) == 10
         assert changes.json()["last_read"] is None
@@ -262,7 +262,7 @@ def test_reading_notifications_marks_them_unread(self):
         )
         assert bookmark_response.status_code == status.HTTP_204_NO_CONTENT
 
-        changes = self.client.get(f"/api/projects/{self.team.id}/activity_log/important_changes")
+        changes = self.client.get(f"/api/projects/{self.team.id}/activity_log/important_changes?unread=true")
         assert changes.status_code == status.HTTP_200_OK
         assert changes.json()["last_read"] == "2023-08-17T04:24:25Z"
         assert [c["unread"] for c in changes.json()["results"]] == [True, True]
diff --git a/posthog/celery.py b/posthog/celery.py
index 0eaa13fdc5fd4..de7c7a2c34b73 100644
--- a/posthog/celery.py
+++ b/posthog/celery.py
@@ -101,7 +101,7 @@ def on_worker_start(**kwargs) -> None:
     from posthog.settings import sentry_init
 
     sentry_init()
-    start_http_server(8001)
+    start_http_server(int(os.getenv("CELERY_METRICS_PORT", "8001")))
 
 
 def add_periodic_task_with_expiry(
diff --git a/posthog/demo/matrix/matrix.py b/posthog/demo/matrix/matrix.py
index d94988bc4210d..c2d3a5f2eb4f4 100644
--- a/posthog/demo/matrix/matrix.py
+++ b/posthog/demo/matrix/matrix.py
@@ -66,7 +66,7 @@ def __init__(self, *, index: int, matrix: "Matrix") -> None:
         self.datetime_provider = matrix.datetime_provider
         self.finance_provider = matrix.finance_provider
         self.file_provider = matrix.file_provider
-        self.start = matrix.start + (matrix.end - matrix.start) * self.initation_distribution()
+        self.start = matrix.start + (matrix.end - matrix.start) * self.initiation_distribution()
         self.now = matrix.now
         self.end = matrix.end
         self.radius = int(self.MIN_RADIUS + self.radius_distribution() * (self.MAX_RADIUS - self.MIN_RADIUS))
@@ -94,7 +94,7 @@ def radius_distribution(self) -> float:
         """Return a value between 0 and 1 signifying where the radius should fall between MIN_RADIUS and MAX_RADIUS."""
         return self.random.uniform(self.MIN_RADIUS, self.MAX_RADIUS)
 
-    def initation_distribution(self) -> float:
+    def initiation_distribution(self) -> float:
         """Return a value between 0 and 1 determining how far into the overall simulation should this cluster be initiated."""
         return self.random.random()
 
diff --git a/posthog/demo/products/hedgebox/matrix.py b/posthog/demo/products/hedgebox/matrix.py
index 5c169ad0afd28..719d7541356e9 100644
--- a/posthog/demo/products/hedgebox/matrix.py
+++ b/posthog/demo/products/hedgebox/matrix.py
@@ -30,7 +30,7 @@
 
 
 @dataclass
-class HedgdboxCompany:
+class HedgeboxCompany:
     name: str
     industry: Industry
 
@@ -42,7 +42,7 @@ class HedgeboxCluster(Cluster):
     MAX_RADIUS: int = 6
 
     # Properties
-    company: Optional[HedgdboxCompany]  # None means the cluster is a social circle instead of a company
+    company: Optional[HedgeboxCompany]  # None means the cluster is a social circle instead of a company
 
     # Internal state - plain
     _business_account: Optional[HedgeboxAccount]  # In social circle clusters the person-level account is used
@@ -51,7 +51,7 @@ def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         is_company = self.random.random() < COMPANY_CLUSTERS_PROPORTION
         if is_company:
-            self.company = HedgdboxCompany(
+            self.company = HedgeboxCompany(
                 name=self.finance_provider.company(),
                 industry=self.properties_provider.industry(),
             )
@@ -65,7 +65,7 @@ def __str__(self) -> str:
     def radius_distribution(self) -> float:
         return self.random.betavariate(1.5, 5)
 
-    def initation_distribution(self) -> float:
+    def initiation_distribution(self) -> float:
         return self.random.betavariate(1.8, 1)
 
 
diff --git a/posthog/demo/test/test_matrix_manager.py b/posthog/demo/test/test_matrix_manager.py
index edc015c7b5aa9..2a600f1fd255f 100644
--- a/posthog/demo/test/test_matrix_manager.py
+++ b/posthog/demo/test/test_matrix_manager.py
@@ -33,7 +33,7 @@ class DummyCluster(Cluster):
     MIN_RADIUS = 0
     MAX_RADIUS = 0
 
-    def initation_distribution(self) -> float:
+    def initiation_distribution(self) -> float:
         return 0  # Start every cluster at the same time
 
 
diff --git a/requirements.in b/requirements.in
index 574ff57900d39..b122d7f213286 100644
--- a/requirements.in
+++ b/requirements.in
@@ -4,7 +4,7 @@
 # - `pip-compile --rebuild requirements.in`
 # - `pip-compile --rebuild requirements-dev.in`
 #
-aiohttp>=3.8.4
+aiohttp>=3.9.0
 aioboto3==11.1
 aiokafka>=0.8
 antlr4-python3-runtime==4.13.1
diff --git a/requirements.txt b/requirements.txt
index 752fd3e600466..ad791565c4896 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -4,13 +4,11 @@
 #
 #    pip-compile requirements.in
 #
-aioboto3==11.1.0
+aioboto3==11.1
     # via -r requirements.in
 aiobotocore[boto3]==2.5.0
-    # via
-    #   aioboto3
-    #   aiobotocore
-aiohttp==3.8.6
+    # via aioboto3
+aiohttp==3.9.0
     # via
     #   -r requirements.in
     #   aiobotocore
@@ -92,7 +90,6 @@ chardet==5.1.0
     # via prance
 charset-normalizer==2.1.0
     # via
-    #   aiohttp
     #   requests
     #   snowflake-connector-python
 click==8.1.7
@@ -225,7 +222,6 @@ geoip2==4.6.0
     # via -r requirements.in
 google-api-core[grpc]==2.11.1
     # via
-    #   google-api-core
     #   google-cloud-bigquery
     #   google-cloud-core
 google-auth==2.22.0
diff --git a/tsconfig.json b/tsconfig.json
index ef6815e5be0d8..29058e0c156ae 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -31,8 +31,10 @@
         "noUnusedParameters": true, // Report errors on unused parameters
         "experimentalDecorators": true, // Enables experimental support for ES decorators
         "noFallthroughCasesInSwitch": true, // Report errors for fallthrough cases in switch statement
+        // TODO this will be deprecated in TS 5. and we have _many_ of these
         "suppressImplicitAnyIndexErrors": true, // Index objects by number
-        "lib": ["dom", "es2019"]
+        "lib": ["dom", "es2019"],
+        "ignoreDeprecations": "5.0"
     },
     "include": ["frontend/**/*", ".storybook/**/*", "ee/frontend/**/*"],
     "exclude": ["frontend/dist/**/*"],