diff --git a/package-lock.json b/package-lock.json
index c162e3efe67..aadba96f00d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -104,7 +104,7 @@
         "@storybook/react": "^6.4.21",
         "@tailwindcss/forms": "^0.5.0",
         "@testing-library/jest-dom": "^5.16.3",
-        "@testing-library/react": "^12.1.4",
+        "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^14.1.0",
         "@trunkio/launcher": "^1.0.5",
         "@types/classnames": "^2.2.11",
@@ -21743,21 +21743,30 @@
       }
     },
     "node_modules/@testing-library/react": {
-      "version": "12.1.4",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.1.4.tgz",
-      "integrity": "sha512-jiPKOm7vyUw311Hn/HlNQ9P8/lHNtArAx0PisXyFixDDvfl8DbD6EUdbshK5eqauvBSvzZd19itqQ9j3nferJA==",
+      "version": "13.3.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.3.0.tgz",
+      "integrity": "sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@testing-library/dom": "^8.0.0",
-        "@types/react-dom": "*"
+        "@testing-library/dom": "^8.5.0",
+        "@types/react-dom": "^18.0.0"
       },
       "engines": {
         "node": ">=12"
       },
       "peerDependencies": {
-        "react": "*",
-        "react-dom": "*"
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@testing-library/react/node_modules/@types/react-dom": {
+      "version": "18.0.5",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.5.tgz",
+      "integrity": "sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
       }
     },
     "node_modules/@testing-library/user-event": {
@@ -22762,6 +22771,7 @@
       "version": "5.1.25",
       "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.25.tgz",
       "integrity": "sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==",
+      "dev": true,
       "dependencies": {
         "@types/hoist-non-react-statics": "*",
         "@types/react": "*",
@@ -24822,7 +24832,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/asynckit": {
       "version": "0.4.0",
@@ -25283,7 +25293,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
       "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/bail": {
       "version": "1.0.5",
@@ -25866,7 +25876,7 @@
     },
     "node_modules/bufferutil": {
       "version": "4.0.6",
-      "devOptional": true,
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -25881,6 +25891,10 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/bvaughn-architecture-demo": {
+      "resolved": "packages/bvaughn-architecture-demo",
+      "link": true
+    },
     "node_modules/byline": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/byline/-/byline-5.0.0.tgz",
@@ -29751,7 +29765,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
       "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/events": {
       "version": "3.3.0",
@@ -31619,6 +31633,7 @@
       "version": "15.8.0",
       "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.8.0.tgz",
       "integrity": "sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw==",
+      "dev": true,
       "engines": {
         "node": ">= 10.x"
       }
@@ -31835,7 +31850,7 @@
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-5.6.3.tgz",
       "integrity": "sha512-ZolWOi6bzI35ovGROCZROB9nDbwZiJdIsaPdzW/jkICCGNb3qL/33IONY/yQiBa+Je2uA11HfY4Uxse4+/ePYA==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -34223,7 +34238,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.3.0.tgz",
       "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/iterate-iterator": {
       "version": "1.0.2",
@@ -39499,7 +39514,7 @@
     },
     "node_modules/node-gyp-build": {
       "version": "4.3.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "bin": {
         "node-gyp-build": "bin.js",
@@ -44765,7 +44780,7 @@
       "resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.18.tgz",
       "integrity": "sha512-tztzcBTNoEbuErsVQpTN2xUNN/efAZXyCyL5m3x4t6SKrEiTL2N8SaKWBFWM4u56pL79ULif3zjyeq+oV+nOaA==",
       "deprecated": "The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "backo2": "^1.0.2",
         "eventemitter3": "^3.1.0",
@@ -44781,7 +44796,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
       "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -44790,7 +44805,7 @@
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.3.tgz",
       "integrity": "sha512-jZArVERrMsKUatIdnLzqvcfydI85dvd/Fp1u/VOpfdDWQ4c9qWXe+VIeAbQ5FrDwciAkr+lzofXLz3Kuf26AOA==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "async-limiter": "~1.0.0"
       }
@@ -46442,7 +46457,7 @@
     },
     "node_modules/utf-8-validate": {
       "version": "5.0.8",
-      "devOptional": true,
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -47743,6 +47758,12 @@
       },
       "devDependencies": {}
     },
+    "packages/bvaughn-architecture-demo": {
+      "version": "0.1.0",
+      "dependencies": {
+        "protocol": "file:../protocol"
+      }
+    },
     "packages/docs": {
       "version": "0.0.0"
     },
@@ -47807,8 +47828,7 @@
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/@apollographql/apollo-tools/-/apollo-tools-0.5.3.tgz",
       "integrity": "sha512-VcsXHfTFoCodDAgJZxN04GdFK1kqOhZQnQY/9Fa147P+I8xfvOSz5d+lKAPB+hwSgBNyd7ncAKGIs4+utbL+yA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@apollographql/graphql-language-service-interface": {
       "version": "2.0.2",
@@ -47834,8 +47854,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@apollographql/graphql-language-service-types/-/graphql-language-service-types-2.0.2.tgz",
       "integrity": "sha512-vE+Dz8pG+Xa1Z2nMl82LoO66lQ6JqBUjaXqLDvS3eMjvA3N4hf+YUDOWfPdNZ0zjhHhHXzUIIZCkax6bXfFbzQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@apollographql/graphql-language-service-utils": {
       "version": "2.0.2",
@@ -49341,8 +49360,7 @@
               "version": "7.5.7",
               "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz",
               "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==",
-              "dev": true,
-              "requires": {}
+              "dev": true
             }
           }
         },
@@ -49362,8 +49380,7 @@
           "version": "8.5.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
           "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         }
       }
     },
@@ -49406,18 +49423,15 @@
       }
     },
     "@graphql-typed-document-node/core": {
-      "version": "3.1.0",
-      "requires": {}
+      "version": "3.1.0"
     },
     "@headlessui/react": {
-      "version": "1.5.0",
-      "requires": {}
+      "version": "1.5.0"
     },
     "@heroicons/react": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.6.tgz",
-      "integrity": "sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==",
-      "requires": {}
+      "integrity": "sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ=="
     },
     "@humanwhocodes/config-array": {
       "version": "0.9.2",
@@ -50567,8 +50581,7 @@
           "version": "1.6.22",
           "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz",
           "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "loader-utils": {
           "version": "2.0.0",
@@ -50703,8 +50716,7 @@
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@n1ru4l/graphql-live-query/-/graphql-live-query-0.9.0.tgz",
       "integrity": "sha512-BTpWy1e+FxN82RnLz4x1+JcEewVdfmUhV1C6/XYD5AjS7PQp9QFF7K8bCD6gzPTr2l+prvqOyVueQhFJxB1vfg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@next/env": {
       "version": "12.1.6",
@@ -53425,8 +53437,7 @@
               "version": "1.6.22",
               "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz",
               "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==",
-              "dev": true,
-              "requires": {}
+              "dev": true
             },
             "@storybook/builder-webpack4": {
               "version": "6.4.20",
@@ -56429,8 +56440,7 @@
           "version": "8.5.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
           "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "yallist": {
           "version": "3.1.1",
@@ -58658,8 +58668,7 @@
         },
         "postcss-modules-extract-imports": {
           "version": "3.0.0",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "postcss-modules-local-by-default": {
           "version": "4.0.0",
@@ -60484,8 +60493,7 @@
           "version": "8.6.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.6.0.tgz",
           "integrity": "sha512-AzmM3aH3gk0aX7/rZLYvjdvZooofDu3fFOzGqcSnQ1tOcTWwhM/o+q++E8mAyVVIyUdajrkzWUGftaVSDLn1bw==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         }
       }
     },
@@ -62502,8 +62510,7 @@
         },
         "postcss-modules-extract-imports": {
           "version": "3.0.0",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "postcss-modules-local-by-default": {
           "version": "4.0.0",
@@ -63358,36 +63365,28 @@
       "integrity": "sha512-4R1vC75yKaCVFARW3bhelf9+dKt4NP4iZY/sIjGK7AAMBVvZ47eG74NvsAIUdUnhOXSWFMjdFWqv+etk5BDW4g=="
     },
     "@svgr/babel-plugin-add-jsx-attribute": {
-      "version": "6.0.0",
-      "requires": {}
+      "version": "6.0.0"
     },
     "@svgr/babel-plugin-remove-jsx-attribute": {
-      "version": "6.0.0",
-      "requires": {}
+      "version": "6.0.0"
     },
     "@svgr/babel-plugin-remove-jsx-empty-expression": {
-      "version": "6.0.0",
-      "requires": {}
+      "version": "6.0.0"
     },
     "@svgr/babel-plugin-replace-jsx-attribute-value": {
-      "version": "6.0.0",
-      "requires": {}
+      "version": "6.0.0"
     },
     "@svgr/babel-plugin-svg-dynamic-title": {
-      "version": "6.0.0",
-      "requires": {}
+      "version": "6.0.0"
     },
     "@svgr/babel-plugin-svg-em-dimensions": {
-      "version": "6.0.0",
-      "requires": {}
+      "version": "6.0.0"
     },
     "@svgr/babel-plugin-transform-react-native-svg": {
-      "version": "6.0.0",
-      "requires": {}
+      "version": "6.0.0"
     },
     "@svgr/babel-plugin-transform-svg-component": {
-      "version": "6.2.0",
-      "requires": {}
+      "version": "6.2.0"
     },
     "@svgr/babel-preset": {
       "version": "6.2.0",
@@ -63614,22 +63613,32 @@
       }
     },
     "@testing-library/react": {
-      "version": "12.1.4",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.1.4.tgz",
-      "integrity": "sha512-jiPKOm7vyUw311Hn/HlNQ9P8/lHNtArAx0PisXyFixDDvfl8DbD6EUdbshK5eqauvBSvzZd19itqQ9j3nferJA==",
+      "version": "13.3.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.3.0.tgz",
+      "integrity": "sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.12.5",
-        "@testing-library/dom": "^8.0.0",
-        "@types/react-dom": "*"
+        "@testing-library/dom": "^8.5.0",
+        "@types/react-dom": "^18.0.0"
+      },
+      "dependencies": {
+        "@types/react-dom": {
+          "version": "18.0.5",
+          "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.5.tgz",
+          "integrity": "sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==",
+          "dev": true,
+          "requires": {
+            "@types/react": "*"
+          }
+        }
       }
     },
     "@testing-library/user-event": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.1.0.tgz",
       "integrity": "sha512-+CGfMXlVM+OwREHDEsfTGsXIMI+rjr3a7YBUSutq7soELht+8kQrM5k46xa/WLfHdtX/wqsDIleL6bi4i+xz0w==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@tiptap/core": {
       "version": "2.0.0-beta.174",
@@ -63651,12 +63660,10 @@
       }
     },
     "@tiptap/extension-blockquote": {
-      "version": "2.0.0-beta.26",
-      "requires": {}
+      "version": "2.0.0-beta.26"
     },
     "@tiptap/extension-bold": {
-      "version": "2.0.0-beta.26",
-      "requires": {}
+      "version": "2.0.0-beta.26"
     },
     "@tiptap/extension-bubble-menu": {
       "version": "2.0.0-beta.55",
@@ -63667,12 +63674,10 @@
       }
     },
     "@tiptap/extension-bullet-list": {
-      "version": "2.0.0-beta.26",
-      "requires": {}
+      "version": "2.0.0-beta.26"
     },
     "@tiptap/extension-code": {
-      "version": "2.0.0-beta.26",
-      "requires": {}
+      "version": "2.0.0-beta.26"
     },
     "@tiptap/extension-code-block": {
       "version": "2.0.0-beta.37",
@@ -63681,8 +63686,7 @@
       }
     },
     "@tiptap/extension-document": {
-      "version": "2.0.0-beta.15",
-      "requires": {}
+      "version": "2.0.0-beta.15"
     },
     "@tiptap/extension-dropcursor": {
       "version": "2.0.0-beta.25",
@@ -63707,12 +63711,10 @@
       }
     },
     "@tiptap/extension-hard-break": {
-      "version": "2.0.0-beta.30",
-      "requires": {}
+      "version": "2.0.0-beta.30"
     },
     "@tiptap/extension-heading": {
-      "version": "2.0.0-beta.26",
-      "requires": {}
+      "version": "2.0.0-beta.26"
     },
     "@tiptap/extension-history": {
       "version": "2.0.0-beta.21",
@@ -63728,12 +63730,10 @@
       }
     },
     "@tiptap/extension-italic": {
-      "version": "2.0.0-beta.26",
-      "requires": {}
+      "version": "2.0.0-beta.26"
     },
     "@tiptap/extension-list-item": {
-      "version": "2.0.0-beta.20",
-      "requires": {}
+      "version": "2.0.0-beta.20"
     },
     "@tiptap/extension-mention": {
       "version": "2.0.0-beta.95",
@@ -63744,12 +63744,10 @@
       }
     },
     "@tiptap/extension-ordered-list": {
-      "version": "2.0.0-beta.27",
-      "requires": {}
+      "version": "2.0.0-beta.27"
     },
     "@tiptap/extension-paragraph": {
-      "version": "2.0.0-beta.23",
-      "requires": {}
+      "version": "2.0.0-beta.23"
     },
     "@tiptap/extension-placeholder": {
       "version": "2.0.0-beta.48",
@@ -63760,12 +63758,10 @@
       }
     },
     "@tiptap/extension-strike": {
-      "version": "2.0.0-beta.27",
-      "requires": {}
+      "version": "2.0.0-beta.27"
     },
     "@tiptap/extension-text": {
-      "version": "2.0.0-beta.15",
-      "requires": {}
+      "version": "2.0.0-beta.15"
     },
     "@tiptap/react": {
       "version": "2.0.0-beta.108",
@@ -64364,6 +64360,7 @@
       "version": "5.1.25",
       "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.25.tgz",
       "integrity": "sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==",
+      "dev": true,
       "requires": {
         "@types/hoist-non-react-statics": "*",
         "@types/react": "*",
@@ -64876,8 +64873,7 @@
     },
     "@webpack-cli/configtest": {
       "version": "1.1.1",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@webpack-cli/info": {
       "version": "1.4.1",
@@ -64888,8 +64884,7 @@
     },
     "@webpack-cli/serve": {
       "version": "1.6.1",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@wry/context": {
       "version": "0.6.1",
@@ -64982,13 +64977,11 @@
     },
     "acorn-import-assertions": {
       "version": "1.8.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "acorn-jsx": {
       "version": "5.3.2",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "acorn-node": {
       "version": "1.8.2",
@@ -65062,8 +65055,7 @@
     },
     "ajv-errors": {
       "version": "1.0.1",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ajv-formats": {
       "version": "2.1.1",
@@ -65090,8 +65082,7 @@
     },
     "ajv-keywords": {
       "version": "3.5.2",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "anser": {
       "version": "2.1.1",
@@ -65190,7 +65181,7 @@
         "git-url-parse": "11.5.0",
         "glob": "7.2.0",
         "global-agent": "2.2.0",
-        "graphql": "15.8.0",
+        "graphql": "14.0.2 - 14.2.0 || ^14.3.1 || ^15.0.0",
         "graphql-tag": "2.12.4",
         "listr": "0.14.3",
         "lodash.identity": "3.0.0",
@@ -65480,7 +65471,7 @@
         "cosmiconfig": "^5.0.6",
         "dotenv": "^8.0.0",
         "glob": "^7.1.3",
-        "graphql": "15.8.0",
+        "graphql": "14.0.2 - 14.2.0 || ^14.3.1 || ^15.0.0",
         "graphql-tag": "^2.10.1",
         "lodash.debounce": "^4.0.8",
         "lodash.merge": "^4.6.1",
@@ -65671,8 +65662,7 @@
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/apollo-server-errors/-/apollo-server-errors-2.5.0.tgz",
       "integrity": "sha512-lO5oTjgiC3vlVg2RKr3RiXIIQ5pGXBFxYGGUkKDhTud3jMIhs+gel8L8zsEjKaKxkjHhCQAA/bcEfYiKkGQIvA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "apollo-utilities": {
       "version": "1.3.4",
@@ -65887,7 +65877,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
-      "devOptional": true
+      "dev": true
     },
     "asynckit": {
       "version": "0.4.0",
@@ -66207,7 +66197,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
       "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=",
-      "devOptional": true
+      "dev": true
     },
     "bail": {
       "version": "1.0.5",
@@ -66599,7 +66589,7 @@
     },
     "bufferutil": {
       "version": "4.0.6",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "node-gyp-build": "^4.3.0"
       }
@@ -66608,6 +66598,12 @@
       "version": "3.0.0",
       "dev": true
     },
+    "bvaughn-architecture-demo": {
+      "version": "file:packages/bvaughn-architecture-demo",
+      "requires": {
+        "protocol": "file:../protocol"
+      }
+    },
     "byline": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/byline/-/byline-5.0.0.tgz",
@@ -66989,8 +66985,7 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/circular-dependency-plugin/-/circular-dependency-plugin-5.2.2.tgz",
       "integrity": "sha512-g38K9Cm5WRwlaH6g03B9OEz/0qRizI+2I7n+Gz+L5DxXJAPAiWQvwlYNm1V1jkdpUv95bOe/ASm2vfi/G560jQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "cjs-module-lexer": {
       "version": "1.2.2",
@@ -67975,8 +67970,7 @@
       "dependencies": {
         "postcss-modules-extract-imports": {
           "version": "3.0.0",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "postcss-modules-local-by-default": {
           "version": "4.0.0",
@@ -69063,8 +69057,7 @@
       "version": "8.5.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
       "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "eslint-import-resolver-node": {
       "version": "0.3.6",
@@ -69230,8 +69223,7 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.4.0.tgz",
       "integrity": "sha512-U3RVIfdzJaeKDQKEJbz5p3NW8/L80PCATJAfuojwbaEL+gBjfGdhUcGde+WGUW46Q5sr/NgxevsIiDtNXrvZaQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "eslint-plugin-sort-keys-fix": {
       "version": "1.1.2",
@@ -69364,7 +69356,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
       "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==",
-      "devOptional": true
+      "dev": true
     },
     "events": {
       "version": "3.3.0",
@@ -70695,7 +70687,8 @@
     "graphql": {
       "version": "15.8.0",
       "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.8.0.tgz",
-      "integrity": "sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw=="
+      "integrity": "sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw==",
+      "dev": true
     },
     "graphql-config": {
       "version": "4.1.0",
@@ -70763,8 +70756,7 @@
       "version": "0.0.19",
       "resolved": "https://registry.npmjs.org/graphql-executor/-/graphql-executor-0.0.19.tgz",
       "integrity": "sha512-AFOcsk/yMtl9jcO/f/0Our7unWxJ5m3FS5HjWfsXRHCyjjaubXpSHiOZO/hSYv6brayIrupDoVAzCuJpBc3elg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "graphql-language-service-interface": {
       "version": "2.10.2",
@@ -70839,8 +70831,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/graphql-sse/-/graphql-sse-1.1.0.tgz",
       "integrity": "sha512-xE8AGPJa5X+g7iFmRQw/8H+7lXIDJvSkW6lou/XSSq17opPQl+dbKOMiqraHMx52VrDgS061ZVx90OSuqS6ykA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "graphql-tag": {
       "version": "2.12.6",
@@ -70857,8 +70848,7 @@
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-5.6.3.tgz",
       "integrity": "sha512-ZolWOi6bzI35ovGROCZROB9nDbwZiJdIsaPdzW/jkICCGNb3qL/33IONY/yQiBa+Je2uA11HfY4Uxse4+/ePYA==",
-      "devOptional": true,
-      "requires": {}
+      "dev": true
     },
     "graphqurl": {
       "version": "1.0.1",
@@ -70872,7 +70862,7 @@
         "@oclif/plugin-help": "3.2.1",
         "cli-ux": "^4.7.3",
         "express": "4.16.3",
-        "graphql": "15.8.0",
+        "graphql": "15.4.0",
         "graphql-language-service-interface": "^2.8.2",
         "graphql-language-service-utils": "2.5.1",
         "isomorphic-fetch": "3.0.0",
@@ -71363,8 +71353,7 @@
           "version": "7.4.2",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.2.tgz",
           "integrity": "sha512-T4tewALS3+qsrpGI/8dqNMLIVdq/g/85U98HPMa6F0m6xTbvhXU6RCQLqPH3+SlomNV/LdY6RXEbBpMH6EOJnA==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         }
       }
     },
@@ -71863,8 +71852,7 @@
     },
     "icss-utils": {
       "version": "5.1.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "identity-obj-proxy": {
       "version": "3.0.0",
@@ -72434,8 +72422,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz",
       "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "istanbul-lib-coverage": {
       "version": "3.2.0",
@@ -72505,7 +72492,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.3.0.tgz",
       "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==",
-      "devOptional": true
+      "dev": true
     },
     "iterate-iterator": {
       "version": "1.0.2",
@@ -73714,8 +73701,7 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
       "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "jest-resolve": {
       "version": "28.0.2",
@@ -74812,8 +74798,7 @@
           "version": "8.5.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
           "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         }
       }
     },
@@ -75538,8 +75523,7 @@
       "integrity": "sha512-yf+iaZNuB13RjNFHzEWvj76G5nVzpl1u6p0wOnWOyLbOJflJJEIMBO81VEOtDUawFYeus8Xprsdfofb+KRqoCQ=="
     },
     "logrocket-react": {
-      "version": "5.0.1",
-      "requires": {}
+      "version": "5.0.1"
     },
     "loose-envify": {
       "version": "1.4.0",
@@ -75654,8 +75638,7 @@
     },
     "markdown-to-jsx": {
       "version": "7.1.3",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "matcher": {
       "version": "3.0.0",
@@ -75932,8 +75915,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/meros/-/meros-1.2.0.tgz",
       "integrity": "sha512-3QRZIS707pZQnijHdhbttXRWwrHhZJ/gzolneoxKVz9N/xmsvY/7Ls8lpnI9gxbgxjcHsAVEW3mgwiZCo6kkJQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "methods": {
       "version": "1.1.2",
@@ -76364,8 +76346,7 @@
         "styled-jsx": {
           "version": "5.0.2",
           "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.2.tgz",
-          "integrity": "sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==",
-          "requires": {}
+          "integrity": "sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ=="
         }
       }
     },
@@ -76442,7 +76423,7 @@
     },
     "node-gyp-build": {
       "version": "4.3.0",
-      "devOptional": true
+      "dev": true
     },
     "node-int64": {
       "version": "0.4.0",
@@ -77597,8 +77578,7 @@
     },
     "prettier-plugin-tailwindcss": {
       "version": "0.1.7",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "pretty-error": {
       "version": "4.0.0",
@@ -78071,17 +78051,14 @@
       }
     },
     "react-circular-progressbar": {
-      "version": "2.0.4",
-      "requires": {}
+      "version": "2.0.4"
     },
     "react-codemirror2": {
-      "version": "7.2.1",
-      "requires": {}
+      "version": "7.2.1"
     },
     "react-colorful": {
       "version": "5.5.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "react-devtools-inline": {
       "version": "4.24.5",
@@ -78130,8 +78107,7 @@
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz",
       "integrity": "sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "react-dom": {
       "version": "0.0.0-experimental-e7d0053e6-20220325",
@@ -78204,8 +78180,7 @@
     "react-icons": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
-      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
-      "requires": {}
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ=="
     },
     "react-inspector": {
       "version": "5.1.1",
@@ -78238,8 +78213,7 @@
       }
     },
     "react-lazyload": {
-      "version": "3.2.0",
-      "requires": {}
+      "version": "3.2.0"
     },
     "react-lifecycles-compat": {
       "version": "3.0.4"
@@ -78342,8 +78316,7 @@
       }
     },
     "react-table": {
-      "version": "7.7.0",
-      "requires": {}
+      "version": "7.7.0"
     },
     "react-textarea-autosize": {
       "version": "8.3.3",
@@ -78375,8 +78348,7 @@
       }
     },
     "react-virtualized-auto-sizer": {
-      "version": "1.0.6",
-      "requires": {}
+      "version": "1.0.6"
     },
     "react-window": {
       "version": "1.8.6",
@@ -78386,8 +78358,7 @@
       }
     },
     "reactjs-popup": {
-      "version": "2.0.5",
-      "requires": {}
+      "version": "2.0.5"
     },
     "read-pkg": {
       "version": "5.2.0",
@@ -78580,12 +78551,10 @@
     "redux-persist": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz",
-      "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==",
-      "requires": {}
+      "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ=="
     },
     "redux-thunk": {
-      "version": "2.4.1",
-      "requires": {}
+      "version": "2.4.1"
     },
     "refractor": {
       "version": "3.6.0",
@@ -80081,8 +80050,7 @@
     },
     "style-loader": {
       "version": "3.3.1",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "style-to-object": {
       "version": "0.3.0",
@@ -80139,7 +80107,7 @@
       "version": "0.9.18",
       "resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.18.tgz",
       "integrity": "sha512-tztzcBTNoEbuErsVQpTN2xUNN/efAZXyCyL5m3x4t6SKrEiTL2N8SaKWBFWM4u56pL79ULif3zjyeq+oV+nOaA==",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "backo2": "^1.0.2",
         "eventemitter3": "^3.1.0",
@@ -80152,13 +80120,13 @@
           "version": "1.2.0",
           "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
           "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
-          "devOptional": true
+          "dev": true
         },
         "ws": {
           "version": "5.2.3",
           "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.3.tgz",
           "integrity": "sha512-jZArVERrMsKUatIdnLzqvcfydI85dvd/Fp1u/VOpfdDWQ4c9qWXe+VIeAbQ5FrDwciAkr+lzofXLz3Kuf26AOA==",
-          "devOptional": true,
+          "dev": true,
           "requires": {
             "async-limiter": "~1.0.0"
           }
@@ -81265,8 +81233,7 @@
       }
     },
     "use-isomorphic-layout-effect": {
-      "version": "1.1.1",
-      "requires": {}
+      "version": "1.1.1"
     },
     "use-latest": {
       "version": "1.2.0",
@@ -81276,7 +81243,7 @@
     },
     "utf-8-validate": {
       "version": "5.0.8",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "node-gyp-build": "^4.3.0"
       }
@@ -81772,8 +81739,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/webpack-filter-warnings-plugin/-/webpack-filter-warnings-plugin-1.2.1.tgz",
       "integrity": "sha512-Ez6ytc9IseDMLPo0qCuNNYzgtUl8NovOqjIq4uAU8LTD4uoa1w1KpZyyzFtLTEMZpkkOkLfL9eN+KGYdk1Qtwg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "webpack-hot-middleware": {
       "version": "2.25.1",
@@ -82049,8 +82015,7 @@
       }
     },
     "ws": {
-      "version": "7.5.5",
-      "requires": {}
+      "version": "7.5.5"
     },
     "x-default-browser": {
       "version": "0.4.0",
diff --git a/package.json b/package.json
index 706d689bcfc..c29fa4f4389 100644
--- a/package.json
+++ b/package.json
@@ -124,7 +124,7 @@
     "@storybook/react": "^6.4.21",
     "@tailwindcss/forms": "^0.5.0",
     "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^12.1.4",
+    "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.1.0",
     "@trunkio/launcher": "^1.0.5",
     "@types/classnames": "^2.2.11",
diff --git a/packages/bvaughn-architecture-demo/components/ErrorBoundary.module.css b/packages/bvaughn-architecture-demo/components/ErrorBoundary.module.css
new file mode 100644
index 00000000000..5a52f1b728b
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/components/ErrorBoundary.module.css
@@ -0,0 +1,6 @@
+.Error {
+  background-color: var(--color-red-light);
+  color: var(--color-red-dark);
+  padding: 1rem;
+  margin: 0;
+}
diff --git a/packages/bvaughn-architecture-demo/components/ErrorBoundary.tsx b/packages/bvaughn-architecture-demo/components/ErrorBoundary.tsx
new file mode 100644
index 00000000000..2bd871a705b
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/components/ErrorBoundary.tsx
@@ -0,0 +1,23 @@
+import React, { Component, PropsWithChildren } from "react";
+
+import styles from "./ErrorBoundary.module.css";
+
+type ErrorBoundaryState = { error: Error | null };
+
+export default class ErrorBoundary extends Component<PropsWithChildren<{}>, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { error };
+  }
+
+  render() {
+    const { error } = this.state;
+
+    if (error !== null) {
+      return <pre className={styles.Error}>{error.stack}</pre>;
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/packages/bvaughn-architecture-demo/components/Initializer.tsx b/packages/bvaughn-architecture-demo/components/Initializer.tsx
new file mode 100644
index 00000000000..3b43d9841eb
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/components/Initializer.tsx
@@ -0,0 +1,62 @@
+// This file is not really part of the architectural demo.
+// It's just a bootstrap for things like auth that I didn't want to spend time actually implementing.
+
+import { ReactNode, useContext, useEffect, useRef, useState } from "react";
+
+import { ReplayClientContext, SessionContext } from "../src/contexts";
+
+// HACK Hack around the fact that the initSocket() function is side effectful
+// and writes to an "app" global on the window object.
+if (typeof window !== "undefined") {
+  (window as any).app = {
+    prefs: {},
+  };
+}
+
+type ContextType = { duration: number; endPoint: string; recordingId: string; sessionId: string };
+
+export default function Initializer({ children }: { children: ReactNode }) {
+  const client = useContext(ReplayClientContext);
+  const [context, setContext] = useState<ContextType | null>(null);
+  const didInitializeRef = useRef<boolean>(false);
+
+  useEffect(() => {
+    // The WebSocket and session/authentication are global.
+    // We only need to initialize them once.
+    if (!didInitializeRef.current) {
+      const asyncInitialize = async () => {
+        // Read some of the hard-coded values from query params.
+        // (This is just a prototype; no sense building a full authentication flow.)
+        const url = new URL(window.location.href);
+        const accessToken = url.searchParams.get("accessToken");
+        const recordingId = url.searchParams.get("recordingId");
+        if (!recordingId) {
+          throw Error(`Must specify "recordingId" parameter.`);
+        }
+
+        const sessionId = await client.initialize(recordingId, accessToken);
+        const endpoint = await client.getSessionEndpoint(sessionId);
+
+        // The demo doesn't use these directly, but the client throws if they aren't loaded.
+        await client.findSources();
+
+        setContext({
+          duration: endpoint.time,
+          endPoint: endpoint.point,
+          recordingId,
+          sessionId,
+        });
+      };
+
+      asyncInitialize();
+    }
+
+    didInitializeRef.current = true;
+  }, [client]);
+
+  if (context === null) {
+    return null;
+  }
+
+  return <SessionContext.Provider value={context}>{children}</SessionContext.Provider>;
+}
diff --git a/packages/bvaughn-architecture-demo/components/Loader.module.css b/packages/bvaughn-architecture-demo/components/Loader.module.css
new file mode 100644
index 00000000000..38e0d2a3808
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/components/Loader.module.css
@@ -0,0 +1,3 @@
+.Loader {
+  padding: 0.25rem;
+}
diff --git a/packages/bvaughn-architecture-demo/components/Loader.tsx b/packages/bvaughn-architecture-demo/components/Loader.tsx
new file mode 100644
index 00000000000..5b7b2dbd35f
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/components/Loader.tsx
@@ -0,0 +1,5 @@
+import styles from "./Loader.module.css";
+
+export default function Loader() {
+  return <div className={styles.Loader}>Loading...</div>;
+}
diff --git a/packages/bvaughn-architecture-demo/components/console/Filters.module.css b/packages/bvaughn-architecture-demo/components/console/Filters.module.css
new file mode 100644
index 00000000000..594f36b6913
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/components/console/Filters.module.css
@@ -0,0 +1,23 @@
+.FilterToggles {
+  padding: 0.25rem 1ch;
+  flex: 0 0 auto;
+  display: flex;
+  gap: 1ch;
+  border-right: 1px solid var(--color-gray-2);
+  border-bottom: 1px solid var(--color-gray-2);
+}
+
+.FilterInput {
+  flex: 1;
+  height: 100%;
+  background-color: var(--color-white);
+  padding: 0 1ch;
+  border: none;
+  outline: none;
+  border-bottom: 1px solid var(--color-gray-2);
+}
+
+.FilterLabel {
+  display: flex;
+  align-items: center;
+}
diff --git a/packages/bvaughn-architecture-demo/components/console/Filters.tsx b/packages/bvaughn-architecture-demo/components/console/Filters.tsx
new file mode 100644
index 00000000000..7528e7db571
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/components/console/Filters.tsx
@@ -0,0 +1,58 @@
+import React, { useContext } from "react";
+import { ConsoleFiltersContext } from "../../src/contexts";
+
+import styles from "./Filters.module.css";
+
+export default function Filters() {
+  const { filterByDisplayText, levelFlags, update } = useContext(ConsoleFiltersContext);
+
+  return (
+    <>
+      <div className={styles.FilterToggles}>
+        <label className={styles.FilterLabel}>
+          <input
+            type="checkbox"
+            checked={levelFlags.showLogs}
+            onChange={event =>
+              update(filterByDisplayText, { ...levelFlags, showLogs: event.currentTarget.checked })
+            }
+          />
+          Logs?
+        </label>
+        <label className={styles.FilterLabel}>
+          <input
+            type="checkbox"
+            checked={levelFlags.showWarnings}
+            onChange={event =>
+              update(filterByDisplayText, {
+                ...levelFlags,
+                showWarnings: event.currentTarget.checked,
+              })
+            }
+          />
+          Warnings?
+        </label>
+        <label className={styles.FilterLabel}>
+          <input
+            type="checkbox"
+            checked={levelFlags.showErrors}
+            onChange={event =>
+              update(filterByDisplayText, {
+                ...levelFlags,
+                showErrors: event.currentTarget.checked,
+              })
+            }
+          />
+          Errors?
+        </label>
+      </div>
+      <input
+        className={styles.FilterInput}
+        name="filter messages"
+        value={filterByDisplayText}
+        onChange={event => update(event.currentTarget.value, levelFlags)}
+        placeholder="Filter output"
+      />
+    </>
+  );
+}
diff --git a/packages/bvaughn-architecture-demo/components/console/Focuser.module.css b/packages/bvaughn-architecture-demo/components/console/Focuser.module.css
new file mode 100644
index 00000000000..cd1c3514e6f
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/components/console/Focuser.module.css
@@ -0,0 +1,66 @@
+.FocusRegionRowOff,
+.FocusRegionRowOn {
+  padding: 1ch;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  gap: 1ch;
+  align-items: center;
+}
+.FocusRegionRowOn {
+  background-color: var(--color-blue);
+}
+
+.FocusToggleButton {
+  width: 10ch;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  border: none;
+  padding: 0.25rem;
+}
+
+.RangeSlider {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.RangeTrackFocused {
+  background-color: rgba(0, 0, 0, 0.25);
+  height: 4px;
+}
+.RangeTrackUnfocused {
+  height: 2px;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.FocusedRange {
+  background-color: red;
+}
+
+.RangeStartThumb,
+.RangeEndThumb {
+  position: absolute;
+  cursor: grab;
+  width: 1px;
+  height: 20px;
+  width: 6px;
+}
+.RangeStartThumb {
+  background-color: var(--color-gray-3);
+  border-radius: 4px 0px 0px 4px;
+}
+.RangeEndThumb {
+  background-color: var(--color-gray-3);
+  border-radius: 0px 4px 4px 0px;
+}
+
+.FocusTimeStamps {
+  white-space: nowrap;
+  font-size: 12px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 4px;
+  padding: 2px 4px;
+}
diff --git a/packages/bvaughn-architecture-demo/components/console/Focuser.test.tsx b/packages/bvaughn-architecture-demo/components/console/Focuser.test.tsx
new file mode 100644
index 00000000000..971881c9540
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/components/console/Focuser.test.tsx
@@ -0,0 +1,57 @@
+import { fireEvent, screen } from "@testing-library/react";
+
+import { renderFocused } from "../../src/utils/testing";
+
+import Focuser from "./Focuser";
+
+describe("Focuser", () => {
+  it("should render the with no focus region", async () => {
+    await renderFocused(<Focuser />, {
+      focusContext: {
+        range: null,
+        rangeForDisplay: null,
+      },
+      sessionContext: {
+        duration: 60_000,
+      },
+    });
+
+    expect(await screen.queryByText("Focus off")).toBeInTheDocument();
+    expect(await screen.queryByText("0:00 – 1:00")).toBeInTheDocument();
+  });
+
+  it("should render the current focus region", async () => {
+    await renderFocused(<Focuser />, {
+      focusContext: {
+        range: [0, 30_000],
+        rangeForDisplay: [0, 30_000],
+      },
+      sessionContext: {
+        duration: 60_000,
+      },
+    });
+
+    expect(await screen.queryByText("Focus on")).toBeInTheDocument();
+    expect(await screen.queryByText("0:00 – 0:30")).toBeInTheDocument();
+  });
+
+  it("should allow the focus region to be toggled on and off", async () => {
+    const {
+      focusContext: { update },
+    } = await renderFocused(<Focuser />, {
+      focusContext: {
+        range: null,
+        rangeForDisplay: null,
+      },
+      sessionContext: {
+        duration: 60_000,
+      },
+    });
+
+    expect(update).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByText("Focus off"));
+
+    expect(update).toHaveBeenCalledWith([0, 60_000], false);
+  });
+});
diff --git a/packages/bvaughn-architecture-demo/components/console/Focuser.tsx b/packages/bvaughn-architecture-demo/components/console/Focuser.tsx
new file mode 100644
index 00000000000..fd9a4c09a9e
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/components/console/Focuser.tsx
@@ -0,0 +1,187 @@
+import React, { MutableRefObject, useContext, useEffect, useRef, useState } from "react";
+
+import { FocusContext, SessionContext } from "../../src/contexts";
+import { formatTimestamp } from "../../src/utils/time";
+
+import styles from "./Focuser.module.css";
+
+export default function Focuser() {
+  const { duration } = useContext(SessionContext);
+  const { rangeForDisplay: range, update } = useContext(FocusContext);
+
+  const start = range === null ? 0 : range[0] / duration;
+  const end = range === null ? 1 : range[1] / duration;
+
+  const toggleFocus = () => {
+    if (range === null) {
+      update([start * duration, end * duration], false);
+    } else {
+      update(null, false);
+    }
+  };
+
+  const onSliderChange = (newStart: number, newEnd: number) => {
+    update([newStart * duration, newEnd * duration], true);
+  };
+
+  return (
+    <div className={range === null ? styles.FocusRegionRowOff : styles.FocusRegionRowOn}>
+      <button className={styles.FocusToggleButton} onClick={toggleFocus}>
+        Focus {range === null ? "off" : "on"}
+      </button>
+      <RangeSlider
+        duration={duration}
+        enabled={focus !== null}
+        end={end}
+        onChange={onSliderChange}
+        start={start}
+      />
+    </div>
+  );
+}
+
+function RangeSlider({
+  duration,
+  enabled,
+  end,
+  onChange,
+  start,
+}: {
+  duration: number;
+  enabled: boolean;
+  end: number;
+  onChange: (start: number, end: number) => void;
+  start: number;
+}) {
+  const ref = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;
+
+  return (
+    <>
+      <div ref={ref} className={styles.RangeSlider}>
+        <div
+          className={styles.RangeTrackUnfocused}
+          style={{
+            left: 0,
+            width: `${start * 100}%`,
+          }}
+        />
+        <div
+          className={styles.RangeTrackFocused}
+          style={{
+            left: `${start * 100}%`,
+            width: `${(end - start) * 100}%`,
+          }}
+        />
+        <div
+          className={styles.RangeTrackUnfocused}
+          style={{
+            left: `${end * 100}%`,
+            width: `${(1 - end) * 100}%`,
+          }}
+        />
+
+        <div className={styles.FocusedRange} />
+
+        <SliderThumb
+          className={styles.RangeStartThumb}
+          enabled={enabled}
+          maximumValue={end}
+          minimumValue={0}
+          onChange={newStart => onChange(newStart, end)}
+          parentRef={ref}
+          value={start}
+        />
+        <SliderThumb
+          className={styles.RangeEndThumb}
+          enabled={enabled}
+          maximumValue={1}
+          minimumValue={start}
+          onChange={newEnd => onChange(start, newEnd)}
+          parentRef={ref}
+          value={end}
+        />
+      </div>
+      <div className={styles.FocusTimeStamps}>
+        {formatTimestamp(start * duration)} – {formatTimestamp(end * duration)}
+      </div>
+    </>
+  );
+}
+
+function SliderThumb({
+  className,
+  enabled,
+  maximumValue,
+  minimumValue,
+  onChange,
+  parentRef,
+  value,
+}: {
+  className: string;
+  enabled: boolean;
+  maximumValue: number;
+  minimumValue: number;
+  onChange: (value: number) => void;
+  parentRef: MutableRefObject<HTMLDivElement>;
+  value: number;
+}) {
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    const parent = parentRef.current;
+
+    if (!enabled || !isDragging || parent === null) {
+      return;
+    }
+
+    // Move events happen very frequently and rarely reflect final intent.
+    // We don't want to flood the backend with requests that won't even be used,
+    // so we wait until the drag action has completed before applying the new range.
+    const processDragUpdate = (event: MouseEvent) => {
+      const { movementX, pageX } = event;
+      if (movementX !== 0) {
+        const bounds = parent.getBoundingClientRect();
+        const relativeX = pageX - bounds.left;
+
+        const clampedValue = Math.max(
+          minimumValue,
+          Math.min(maximumValue, relativeX / bounds.width)
+        );
+
+        onChange(clampedValue);
+      }
+    };
+
+    const stopDrag = () => {
+      setIsDragging(false);
+    };
+
+    window.addEventListener("mouseleave", stopDrag);
+    window.addEventListener("mousemove", processDragUpdate);
+    window.addEventListener("mouseup", stopDrag);
+
+    return () => {
+      window.removeEventListener("mouseleave", stopDrag);
+      window.removeEventListener("mousemove", processDragUpdate);
+      window.removeEventListener("mouseup", stopDrag);
+    };
+  });
+
+  const onMouseDown = () => {
+    if (enabled) {
+      setIsDragging(true);
+    }
+  };
+
+  return (
+    <div
+      className={className}
+      onMouseDown={onMouseDown}
+      style={{
+        left: `${value * 100}%`,
+        cursor: isDragging ? "grabbing" : "grab",
+        pointerEvents: enabled ? "auto" : "none",
+      }}
+    />
+  );
+}
diff --git a/packages/bvaughn-architecture-demo/components/console/MessageRenderer.module.css b/packages/bvaughn-architecture-demo/components/console/MessageRenderer.module.css
new file mode 100644
index 00000000000..77c4939e958
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/components/console/MessageRenderer.module.css
@@ -0,0 +1,26 @@
+.MessageRow,
+.MessageRowError,
+.MessageRowWarning {
+  display: flex;
+  flex-direction: row;
+  gap: 1ch;
+  padding: 0.25rem;
+  font-family: monospace;
+  font-size: 10px;
+  border-bottom: 1px solid var(--color-gray-1);
+}
+.MessageRow {
+  background-color: var(--color-white);
+}
+.MessageRowError {
+  background-color: var(--color-red-light);
+  color: var(--color-red-dark);
+}
+.MessageRowWarning {
+  background-color: var(--color-yellow-light);
+  color: var(--color-yellow-dark);
+}
+
+.Time {
+  color: var(--color-blue);
+}
diff --git a/packages/bvaughn-architecture-demo/components/console/MessageRenderer.tsx b/packages/bvaughn-architecture-demo/components/console/MessageRenderer.tsx
new file mode 100644
index 00000000000..7bdd2eae0ae
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/components/console/MessageRenderer.tsx
@@ -0,0 +1,64 @@
+// This component only exists to demo the architectural changes.
+// It's not really meant for review.
+
+import { Message } from "@replayio/protocol";
+import { Pause, ThreadFront, ValueFront } from "protocol/thread";
+import { memo, useMemo } from "react";
+
+import { formatTimestamp } from "../../src/utils/time";
+
+import styles from "./MessageRenderer.module.css";
+
+// This is a crappy approximation of the console; the UI isn't meant to be the focus of this branch.
+// It would be nice to re-implement the whole Console UI though and re-write all of the legacy object inspector code.
+function MessageRenderer({ message }: { message: Message }) {
+  const { point, text } = message;
+
+  // TODO This logic should be moved out of the view.
+  // It should probably be backed by its own Suspense cache which can just-in-time load ValueFronts, e.g. loadIfNecessary()
+  // Do messages have some sort of stable ID that we could use for a Suspense cache key? Maybe pauseId?
+  const valueFronts = useMemo<ValueFront[]>(() => {
+    if (message.argumentValues == null) {
+      return [];
+    }
+
+    const pause = new Pause(ThreadFront);
+    pause.instantiate(
+      message.pauseId,
+      message.point.point,
+      message.point.time,
+      !!message.point.frame,
+      message.data
+    );
+
+    return message.argumentValues.map(value => new ValueFront(pause, value));
+  }, [message]);
+
+  let className = styles.MessageRow;
+  switch (message.level) {
+    case "warning": {
+      className = styles.MessageRowWarning;
+      break;
+    }
+    case "error": {
+      className = styles.MessageRowError;
+      break;
+    }
+  }
+
+  return (
+    <div className={className}>
+      <div className={styles.Time}>{formatTimestamp(point.time)}</div>
+      {text}
+      {valueFronts.map((argumentValue: any, index: number) => {
+        if (argumentValue.isPrimitive()) {
+          return <span key={index}>{argumentValue.primitive()}</span>;
+        } else {
+          return <span key={index}>Unsupported argument type</span>;
+        }
+      })}
+    </div>
+  );
+}
+
+export default memo(MessageRenderer);
diff --git a/packages/bvaughn-architecture-demo/components/console/MessagesList.module.css b/packages/bvaughn-architecture-demo/components/console/MessagesList.module.css
new file mode 100644
index 00000000000..c90b9ea2008
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/components/console/MessagesList.module.css
@@ -0,0 +1,24 @@
+.Container,
+.ContainerPending {
+  position: relative;
+  overflow: auto;
+  height: 100%;
+}
+.ContainerPending {
+  opacity: 0.5;
+}
+
+.CountRow,
+.NoMessagesRow,
+.OverflowRow {
+  padding: 0.25rem;
+}
+
+.OverflowRow {
+  background-color: var(--color-red-dark);
+  color: var(--color-white);
+}
+
+.CountRow {
+  background-color: var(--color-gray-1);
+}
diff --git a/packages/bvaughn-architecture-demo/components/console/MessagesList.tsx b/packages/bvaughn-architecture-demo/components/console/MessagesList.tsx
new file mode 100644
index 00000000000..beefc6cd081
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/components/console/MessagesList.tsx
@@ -0,0 +1,80 @@
+import { Message } from "@replayio/protocol";
+import { useContext } from "react";
+
+import { ConsoleFiltersContext, FocusContext, ReplayClientContext } from "../../src/contexts";
+import useFilteredMessages from "../../src/hooks/useFilteredMessages";
+import { getMessages } from "../../src/suspense/MessagesCache";
+import { getClosestPointForTime } from "../../src/suspense/PointsCache";
+
+import MessageRenderer from "./MessageRenderer";
+import styles from "./MessagesList.module.css";
+
+// This is a crappy approximation of the console; the UI isn't meant to be the focus of this branch.
+// The primary purpose of this component is to showcase:
+// 1. The getMessages() Suspense cache for just-in-time loading of console data
+// 2. The memoized useFilteredMessages() selector for computing derived (merged, sorted, and filtered) data
+//
+// Note that the props passed from the parent component would more likely be exposed through Context in a real app.
+// We're passing them as props in this case since the parent and child are right beside each other in the tree.
+export default function MessagesList() {
+  const replayClient = useContext(ReplayClientContext);
+
+  const { filterByText, levelFlags } = useContext(ConsoleFiltersContext);
+  const { range, isTransitionPending: isFocusTransitionPending } = useContext(FocusContext);
+
+  let focusRange = null;
+  if (range !== null) {
+    const [startTime, endTime] = range;
+
+    const startPoint = getClosestPointForTime(replayClient, startTime);
+    const endPoint = getClosestPointForTime(replayClient, endTime);
+
+    focusRange = {
+      begin: {
+        point: startPoint,
+        time: startTime,
+      },
+      end: {
+        point: endPoint,
+        time: endTime,
+      },
+    };
+  }
+
+  const { countAfter, countBefore, didOverflow, messages } = getMessages(replayClient, focusRange);
+
+  // Memoized selector that joins log points and messages and filters by criteria (e.g. type)
+  // Note that we are intentionally not storing derived values like this in state.
+  const filteredMessages = useFilteredMessages(messages, {
+    ...levelFlags,
+    filterByText,
+  });
+
+  // This component only needs to render a pending UI when a focus changes,
+  // because this might require an async backend request.
+  // Filter text changes are always processed synchronously by useFilteredMessages(),
+  // so dimming the UI would just cause a short flicker which we can avoid.
+  const isTransitionPending = isFocusTransitionPending;
+
+  return (
+    <div className={isTransitionPending ? styles.ContainerPending : styles.Container}>
+      {didOverflow && (
+        <div className={styles.OverflowRow}>There were too many messages to fetch them all</div>
+      )}
+      {countBefore > 0 && (
+        <div className={styles.CountRow}>
+          {countBefore} messages filtered before the focus range
+        </div>
+      )}
+      {filteredMessages.length === 0 && (
+        <div className={styles.NoMessagesRow}>No messages found.</div>
+      )}
+      {filteredMessages.map((message: Message, index: number) => (
+        <MessageRenderer key={index} message={message} />
+      ))}
+      {countAfter > 0 && (
+        <div className={styles.CountRow}>{countAfter} messages filtered after the focus range</div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/bvaughn-architecture-demo/next.config.js b/packages/bvaughn-architecture-demo/next.config.js
new file mode 100644
index 00000000000..e26851c8b16
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/next.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  reactStrictMode: true,
+
+  // This setting allows the Next app to import code from e.g. "packages/protocol"
+  experimental: {
+    externalDir: true,
+  },
+};
diff --git a/packages/bvaughn-architecture-demo/package-lock.json b/packages/bvaughn-architecture-demo/package-lock.json
new file mode 100644
index 00000000000..1c2796bbbba
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/package-lock.json
@@ -0,0 +1,28 @@
+{
+  "name": "bvaughn-architecture-demo",
+  "version": "0.1.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "bvaughn-architecture-demo",
+      "version": "0.1.0",
+      "dependencies": {
+        "protocol": "file:../protocol"
+      }
+    },
+    "../protocol": {
+      "version": "0.0.0",
+      "devDependencies": {}
+    },
+    "node_modules/protocol": {
+      "resolved": "../protocol",
+      "link": true
+    }
+  },
+  "dependencies": {
+    "protocol": {
+      "version": "file:../protocol"
+    }
+  }
+}
diff --git a/packages/bvaughn-architecture-demo/package.json b/packages/bvaughn-architecture-demo/package.json
new file mode 100644
index 00000000000..4e5110a8efc
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "bvaughn-architecture-demo",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "protocol": "file:../protocol"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  }
+}
diff --git a/packages/bvaughn-architecture-demo/pages/_app.tsx b/packages/bvaughn-architecture-demo/pages/_app.tsx
new file mode 100644
index 00000000000..bf890a83881
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/pages/_app.tsx
@@ -0,0 +1,56 @@
+import Head from "next/head";
+import type { AppContext, AppProps } from "next/app";
+import NextApp from "next/app";
+import React from "react";
+
+import ErrorBoundary from "../components/ErrorBoundary";
+import Initializer from "../components/Initializer";
+import Loader from "../components/Loader";
+
+import "./global.css";
+
+interface AuthProps {
+  apiKey?: string;
+}
+
+function Routing({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <Head>
+        <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
+        <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+        <title>Replay</title>
+      </Head>
+      <ErrorBoundary>
+        <Initializer>
+          <React.Suspense fallback={<Loader />}>
+            <Component {...pageProps} />
+          </React.Suspense>
+        </Initializer>
+      </ErrorBoundary>
+    </>
+  );
+}
+
+const App = ({ apiKey, ...props }: AppProps & AuthProps) => {
+  return <Routing {...props} />;
+};
+
+App.getInitialProps = (appContext: AppContext) => {
+  const props = NextApp.getInitialProps(appContext);
+  const authHeader = appContext.ctx.req?.headers.authorization;
+  const authProps: AuthProps = { apiKey: undefined };
+
+  if (authHeader) {
+    const [scheme, token] = authHeader.split(" ", 2);
+    if (!token || !/^Bearer$/i.test(scheme)) {
+      console.error("Format is Authorization: Bearer [token]");
+    } else {
+      authProps.apiKey = token;
+    }
+  }
+
+  return { ...props, ...authProps };
+};
+
+export default App;
diff --git a/packages/bvaughn-architecture-demo/pages/global.css b/packages/bvaughn-architecture-demo/pages/global.css
new file mode 100644
index 00000000000..1d6c9d3e3aa
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/pages/global.css
@@ -0,0 +1,23 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --color-blue: #0a84ff;
+  --color-gray-1: #d0d5dc;
+  --color-gray-2: #9ca3af;
+  --color-gray-3: #234;
+  --color-red-dark: #ff0000;
+  --color-red-light: #ffd3d3;
+  --color-yellow-dark: #6c5914;
+  --color-yellow-light: #fffac8;
+  --color-white: #fff;
+}
diff --git a/packages/bvaughn-architecture-demo/pages/index.module.css b/packages/bvaughn-architecture-demo/pages/index.module.css
new file mode 100644
index 00000000000..11762631e3e
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/pages/index.module.css
@@ -0,0 +1,108 @@
+.Container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.ContentArea {
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+.Row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--color-gray-1);
+}
+
+.FilterToggles {
+  padding: 0.25rem 1ch;
+  flex: 0 0 auto;
+  display: flex;
+  gap: 1ch;
+  border-right: 1px solid var(--color-gray-2);
+  border-bottom: 1px solid var(--color-gray-2);
+}
+
+.FilterInput {
+  flex: 1;
+  height: 100%;
+  background-color: var(--color-white);
+  padding: 0 1ch;
+  border: none;
+  outline: none;
+  border-bottom: 1px solid var(--color-gray-2);
+}
+
+.FilterLabel {
+  display: flex;
+  align-items: center;
+}
+
+.FocusRegionRowOff,
+.FocusRegionRowOn {
+  padding: 1ch;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  gap: 1ch;
+  align-items: center;
+}
+.FocusRegionRowOn {
+  background-color: var(--color-blue);
+}
+
+.FocusToggleButton {
+  width: 10ch;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  border: none;
+  padding: 0.25rem;
+}
+
+.RangeSlider {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.RangeTrackFocused {
+  background-color: rgba(0, 0, 0, 0.25);
+  height: 4px;
+}
+.RangeTrackUnfocused {
+  height: 2px;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.FocusedRange {
+  background-color: red;
+}
+
+.RangeStartThumb,
+.RangeEndThumb {
+  position: absolute;
+  cursor: grab;
+  width: 1px;
+  height: 20px;
+  width: 6px;
+}
+.RangeStartThumb {
+  background-color: var(--color-gray-3);
+  border-radius: 4px 0px 0px 4px;
+}
+.RangeEndThumb {
+  background-color: var(--color-gray-3);
+  border-radius: 0px 4px 4px 0px;
+}
+
+.FocusTimeStamps {
+  white-space: nowrap;
+  font-size: 12px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 4px;
+  padding: 2px 4px;
+}
diff --git a/packages/bvaughn-architecture-demo/pages/index.test.tsx b/packages/bvaughn-architecture-demo/pages/index.test.tsx
new file mode 100644
index 00000000000..ba75b139244
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/pages/index.test.tsx
@@ -0,0 +1,37 @@
+import { screen } from "@testing-library/react";
+import { createConsoleMessage } from "shared/utils/testing";
+
+import { render } from "../src/utils/testing";
+
+import HomePage from "./index";
+
+describe("MessageList", () => {
+  it("should render the console app", async () => {
+    await render(<HomePage />, {
+      replayClient: {
+        findMessages: async () =>
+          Promise.resolve({
+            messages: [
+              createConsoleMessage({
+                text: "This is a message",
+              })[1],
+            ],
+            overflow: true,
+          }),
+      },
+    });
+
+    // Verify that our message was rendered.
+    expect(screen.getByText("This is a message")).toBeInTheDocument();
+
+    // Basic message filters
+    expect(screen.getByRole("checkbox", { name: "Errors?" })).toBeInTheDocument();
+    expect(screen.getByRole("checkbox", { name: "Logs?" })).toBeInTheDocument();
+    expect(screen.getByRole("checkbox", { name: "Warnings?" })).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Filter output")).toBeInTheDocument();
+
+    // // Basic focus range UI should be rendered
+    expect(await screen.queryByText("Focus off")).toBeInTheDocument();
+    expect(await screen.queryByText("0:00 – 0:01")).toBeInTheDocument();
+  });
+});
diff --git a/packages/bvaughn-architecture-demo/pages/index.tsx b/packages/bvaughn-architecture-demo/pages/index.tsx
new file mode 100644
index 00000000000..21307ae55b6
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/pages/index.tsx
@@ -0,0 +1,129 @@
+import React, { Suspense, useCallback, useMemo, useState, useTransition } from "react";
+
+import ErrorBoundary from "../components/ErrorBoundary";
+import ConsoleFilters from "../components/console/Filters";
+import Focuser from "../components/console/Focuser";
+import ConsoleMessages from "../components/console/MessagesList";
+import Loader from "../components/Loader";
+import {
+  ConsoleFiltersContext,
+  ConsoleFiltersContextType,
+  ConsoleLevelFlags,
+  FocusContext,
+  FocusContextType,
+} from "../src/contexts";
+import useDebouncedCallback from "../src/hooks/useDebouncedCallback";
+import { Range } from "../src/types";
+
+import styles from "./index.module.css";
+
+// TODO There's a potential hot loop in this code when an error happens (e.g. Linker too old to support Console.findMessagesInRange)
+// where React keeps quickly retrying after an error is thrown, rather than rendering an error boundary.
+// Filed https://github.com/facebook/react/issues/24634
+
+const FOCUS_DEBOUNCE_DURATION = 250;
+
+export default function HomePage() {
+  const [levelFlags, setLevelFlags] = useState<ConsoleLevelFlags>({
+    showErrors: true,
+    showLogs: true,
+    showWarnings: true,
+  });
+
+  // Filter input changes quickly while a user types, but re-filtering can be slow.
+  // We can use the deferred value hook to allow React to update the visible filter text quickly (at a high priority)
+  // and then re-filter the list after a small delay (at a lower priority).
+  const [filterByText, setFilterByText] = useState<string>("");
+  const [deferredFilterByText, setDeferredFilterByText] = useState<string>("");
+
+  // Changing the focus range may cause us to suspend (while fetching new info from the backend).
+  // Wrapping it in a transition enables us to show the older set of messages (in a pending state) while new data loads.
+  // This is less jarring than the alternative of unmounting all messages and rendering a fallback loader.
+  const [range, setRange] = useState<Range | null>(null);
+  const [deferredRange, setDeferredRange] = useState<Range | null>(null);
+
+  // Using a deferred values enables the focus UI to update quickly,
+  // and the slower operation of Suspending to load points to be deferred.
+  //
+  // It also allows us to update the UI slightly, before we suspend to fetch new data,
+  // to indicate that what's currently being showed is stale.
+  const [isTransitionPending, startTransition] = useTransition();
+
+  const debouncedSetDeferredRange = useDebouncedCallback((newRange: Range | null) => {
+    startTransition(() => {
+      setDeferredRange(newRange);
+    });
+  }, FOCUS_DEBOUNCE_DURATION);
+
+  const updateFocusRange = useCallback(
+    (newRange: Range | null, debounce: boolean) => {
+      setRange(newRange);
+
+      // Focus values may change rapidly (e.g. during a click-and-drag)
+      // In this case, React's default high/low priority split is helpful, but we can do more.
+      // Debouncing a little before starting the transition helps avoid sending a lot of unused requests to the backend.
+      if (debounce) {
+        debouncedSetDeferredRange(newRange);
+      } else {
+        startTransition(() => {
+          setDeferredRange(newRange);
+        });
+      }
+    },
+    [debouncedSetDeferredRange]
+  );
+
+  const focusContext = useMemo<FocusContextType>(
+    () => ({
+      isTransitionPending,
+      rangeForDisplay: range,
+      range: deferredRange,
+      update: updateFocusRange,
+    }),
+    [deferredRange, isTransitionPending, range, updateFocusRange]
+  );
+
+  const updateFilters = useCallback((newFilterByText: string, newLevelFlags: ConsoleLevelFlags) => {
+    setLevelFlags(newLevelFlags);
+    setFilterByText(newFilterByText);
+    startTransition(() => {
+      setDeferredFilterByText(newFilterByText);
+    });
+  }, []);
+
+  const consoleFiltersContext = useMemo<ConsoleFiltersContextType>(
+    () => ({
+      filterByDisplayText: filterByText,
+      filterByText: deferredFilterByText,
+      isTransitionPending,
+      levelFlags,
+      update: updateFilters,
+    }),
+    [deferredFilterByText, filterByText, isTransitionPending, levelFlags, updateFilters]
+  );
+
+  // TODO Once we have a client implementation to interface with Replay backend,
+  // the app can inject a wrapper one that also reports cache hits and misses to this UI in a debug panel.
+
+  return (
+    <FocusContext.Provider value={focusContext}>
+      <ConsoleFiltersContext.Provider value={consoleFiltersContext}>
+        <div className={styles.Container}>
+          <div className={styles.Row}>
+            <ConsoleFilters />
+          </div>
+          <div className={styles.ContentArea}>
+            <ErrorBoundary>
+              <Suspense fallback={<Loader />}>
+                <ConsoleMessages />
+              </Suspense>
+            </ErrorBoundary>
+          </div>
+          <div className={styles.Row}>
+            <Focuser />
+          </div>
+        </div>
+      </ConsoleFiltersContext.Provider>
+    </FocusContext.Provider>
+  );
+}
diff --git a/packages/bvaughn-architecture-demo/src/ReplayClient.ts b/packages/bvaughn-architecture-demo/src/ReplayClient.ts
new file mode 100644
index 00000000000..1ac91f0830f
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/src/ReplayClient.ts
@@ -0,0 +1,140 @@
+import {
+  ExecutionPoint,
+  Message,
+  SessionId,
+  TimeStampedPoint,
+  TimeStampedPointRange,
+} from "@replayio/protocol";
+import { client, initSocket } from "protocol/socket";
+import type { ThreadFront } from "protocol/thread";
+import { compareNumericStrings } from "protocol/utils";
+
+// TODO How should the client handle concurrent requests?
+// Should we force serialization?
+// Should we cancel in-flight requests and start new ones?
+
+export interface ReplayClientInterface {
+  initialize(recordingId: string, accessToken: string | null): Promise<SessionId>;
+  findMessages(focusRange: TimeStampedPointRange | null): Promise<{
+    messages: Message[];
+    overflow: boolean;
+  }>;
+  findSources(): Promise<void>;
+  getPointNearTime(time: number): Promise<TimeStampedPoint>;
+  getSessionEndpoint(sessionId: SessionId): Promise<TimeStampedPoint>;
+}
+
+export class ReplayClient implements ReplayClient {
+  private _sessionId: SessionId | null = null;
+  private _threadFront: typeof ThreadFront;
+
+  constructor(dispatchURL: string, threadFront: typeof ThreadFront) {
+    this._threadFront = threadFront;
+
+    if (typeof window !== "undefined") {
+      initSocket(dispatchURL);
+    }
+  }
+
+  private getSessionIdThrows(): SessionId {
+    const sessionId = this._sessionId;
+    if (sessionId === null) {
+      throw Error("Invalid session");
+    }
+    return sessionId;
+  }
+
+  async initialize(recordingId: string, accessToken: string | null): Promise<SessionId> {
+    if (accessToken != null) {
+      await client.Authentication.setAccessToken({ accessToken });
+    }
+
+    const { sessionId } = await client.Recording.createSession({ recordingId });
+
+    this._sessionId = sessionId;
+    this._threadFront.setSessionId(sessionId);
+
+    return sessionId;
+  }
+
+  async findMessages(focusRange: TimeStampedPointRange | null): Promise<{
+    messages: Message[];
+    overflow: boolean;
+  }> {
+    const sessionId = this.getSessionIdThrows();
+
+    if (focusRange !== null) {
+      const response = await client.Console.findMessagesInRange(
+        { range: { begin: focusRange.begin.point, end: focusRange.end.point } },
+        sessionId
+      );
+
+      // Messages aren't guaranteed to arrive sorted, but unsorted messages aren't that useful to work with.
+      // So sort them before returning.
+      const sortedMessages = response.messages.sort((messageA: Message, messageB: Message) => {
+        const pointA = messageA.point.point;
+        const pointB = messageB.point.point;
+        return compareNumericStrings(pointA, pointB);
+      });
+
+      return {
+        messages: sortedMessages,
+        overflow: response.overflow == true,
+      };
+    } else {
+      const sortedMessages: Message[] = [];
+
+      // TOOD This won't work if there are every overlapping requests.
+      // Do we need to implement some kind of locking mechanism to ensure only one read is going at a time?
+      client.Console.addNewMessageListener(({ message }) => {
+        const newMessagePoint = message.point.point;
+
+        // Messages may arrive out of order so let's sort them as we get them.
+        let lowIndex = 0;
+        let highIndex = sortedMessages.length;
+        while (lowIndex < highIndex) {
+          let middleIndex = (lowIndex + highIndex) >>> 1;
+          const message = sortedMessages[middleIndex];
+
+          if (compareNumericStrings(message.point.point, newMessagePoint)) {
+            lowIndex = middleIndex + 1;
+          } else {
+            highIndex = middleIndex;
+          }
+        }
+
+        const insertAtIndex = lowIndex;
+
+        sortedMessages.splice(insertAtIndex, 0, message);
+      });
+
+      const response = await client.Console.findMessages({}, sessionId);
+
+      client.Console.removeNewMessageListener();
+
+      return {
+        messages: sortedMessages,
+        overflow: response.overflow == true,
+      };
+    }
+  }
+
+  async findSources(): Promise<void> {
+    await this._threadFront.findSources(() => {
+      // The demo doesn't use these directly, but the client throws if they aren't loaded.
+    });
+  }
+
+  async getPointNearTime(time: number): Promise<TimeStampedPoint> {
+    const sessionId = this.getSessionIdThrows();
+    const { point } = await client.Session.getPointNearTime({ time: time }, sessionId);
+
+    return point;
+  }
+
+  async getSessionEndpoint(sessionId: SessionId): Promise<TimeStampedPoint> {
+    const { endpoint } = await client.Session.getEndpoint({}, sessionId);
+
+    return endpoint;
+  }
+}
diff --git a/packages/bvaughn-architecture-demo/src/contexts.ts b/packages/bvaughn-architecture-demo/src/contexts.ts
new file mode 100644
index 00000000000..35e27aa8bb6
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/src/contexts.ts
@@ -0,0 +1,59 @@
+import { ExecutionPoint } from "@replayio/protocol";
+import { ThreadFront } from "protocol/thread";
+import { createContext } from "react";
+import { ReplayClient, ReplayClientInterface } from "./ReplayClient";
+
+import { Range } from "./types";
+
+export type ConsoleLevelFlags = {
+  showErrors: boolean;
+  showLogs: boolean;
+  showWarnings: boolean;
+};
+
+export type ConsoleFiltersContextType = {
+  // Filter text to display in the UI.
+  // This value is updated at React's default, higher priority.
+  filterByDisplayText: string;
+
+  // Text to filter console messages by.
+  // This value is updated at a lower, transition priority.
+  filterByText: string;
+
+  // Filter by text is about to be updated as part of a transition;
+  // UI that consumes the focus for Suspense purposes may wish want reflect the temporary pending state.
+  isTransitionPending: boolean;
+
+  // Types of console messages to include (or filter out).
+  levelFlags: ConsoleLevelFlags;
+
+  update: (filterByText: string, levelFlags: ConsoleLevelFlags) => void;
+};
+export const ConsoleFiltersContext = createContext<ConsoleFiltersContextType>(null as any);
+
+export type FocusContextType = {
+  // Focus is about to be updated as part of a transition;
+  // UI that consumes the focus for Suspense purposes may wish want reflect the temporary pending state.
+  isTransitionPending: boolean;
+  range: Range | null;
+  rangeForDisplay: Range | null;
+  update: (value: Range | null, debounce: boolean) => void;
+};
+export const FocusContext = createContext<FocusContextType>(null as any);
+
+export type SessionContextType = {
+  duration: number;
+  endPoint: ExecutionPoint;
+  recordingId: string;
+  sessionId: string;
+};
+export const SessionContext = createContext<SessionContextType>(null as any);
+
+export type ReplayClientContextType = ReplayClientInterface;
+
+// By default, this context wires the app up to use real Replay backend APIs.
+// We can leverage this when writing tests (or UI demos) by injecting a stub client.
+const DISPATCH_URL = "wss://dispatch.replay.io";
+export const ReplayClientContext = createContext<ReplayClientContextType>(
+  new ReplayClient(DISPATCH_URL, ThreadFront)
+);
diff --git a/packages/bvaughn-architecture-demo/src/hooks/useDebouncedCallback.ts b/packages/bvaughn-architecture-demo/src/hooks/useDebouncedCallback.ts
new file mode 100644
index 00000000000..a6b6dfb9012
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/src/hooks/useDebouncedCallback.ts
@@ -0,0 +1,23 @@
+import { useRef } from "react";
+
+export default function useDebouncedCallback<T extends (...args: any[]) => void>(
+  callback: T,
+  duration: number
+): T {
+  const timeoutIdRef = useRef<NodeJS.Timeout | null>(null);
+
+  // @ts-ignore I don't know how to make TypeScript happy with the inner function signature.
+  const debouncedCallback = useRef<T>((...args: any[]) => {
+    if (timeoutIdRef.current !== null) {
+      clearTimeout(timeoutIdRef.current);
+    }
+
+    timeoutIdRef.current = setTimeout(() => {
+      timeoutIdRef.current = null;
+
+      callback(...args);
+    }, duration);
+  });
+
+  return debouncedCallback.current;
+}
diff --git a/packages/bvaughn-architecture-demo/src/hooks/useFilteredMessages.ts b/packages/bvaughn-architecture-demo/src/hooks/useFilteredMessages.ts
new file mode 100644
index 00000000000..45f3a2a2a9f
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/src/hooks/useFilteredMessages.ts
@@ -0,0 +1,68 @@
+import { Message } from "@replayio/protocol";
+import { useMemo } from "react";
+
+// TODO Should this method returned WiredMessage[] or Message[]
+export default function useFilteredMessages(
+  messages: Message[],
+  options: {
+    filterByText: string;
+    showErrors: boolean;
+    showLogs: boolean;
+    showWarnings: boolean;
+  }
+): Message[] {
+  const { filterByText, showErrors, showLogs, showWarnings } = options;
+
+  const filteredMessages = useMemo(() => {
+    if (showErrors && showLogs && showWarnings && filterByText === "") {
+      return messages;
+    } else {
+      const filterByTextLowercase = filterByText.toLowerCase();
+
+      return messages.filter(message => {
+        switch (message.level) {
+          case "warning": {
+            if (!showWarnings) {
+              return false;
+            }
+            break;
+          }
+          case "error": {
+            if (!showErrors) {
+              return false;
+            }
+            break;
+          }
+          default: {
+            if (!showLogs) {
+              return false;
+            }
+            break;
+          }
+        }
+
+        if (filterByTextLowercase !== "") {
+          // TODO This is a hacky partial implementation of filter by text.
+          if (message.text && message.text.toLowerCase().includes(filterByTextLowercase)) {
+            return true;
+          } else {
+            if (message.argumentValues) {
+              return message.argumentValues.find(argumentValue => {
+                if (
+                  argumentValue.value &&
+                  `${argumentValue.value}`.toLowerCase().includes(filterByTextLowercase)
+                ) {
+                  return true;
+                }
+              });
+            }
+          }
+        }
+
+        return true;
+      });
+    }
+  }, [filterByText, messages, showErrors, showLogs, showWarnings]);
+
+  return filteredMessages;
+}
diff --git a/packages/bvaughn-architecture-demo/src/react.d.ts b/packages/bvaughn-architecture-demo/src/react.d.ts
new file mode 100644
index 00000000000..782bbafae1e
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/src/react.d.ts
@@ -0,0 +1,12 @@
+import "react";
+
+declare module "react" {
+  type Callback = () => void;
+
+  // The following hooks are only available in the experimental react release.
+  export function useDeferredValue(value: T): T;
+  export function useTransition(): [isPending: boolean, startTransition: (Callback) => void];
+
+  // Unstable Suspense cache API
+  export function unstable_getCacheForType<T>(resourceType: () => T): T;
+}
diff --git a/packages/bvaughn-architecture-demo/src/suspense/MessagesCache.ts b/packages/bvaughn-architecture-demo/src/suspense/MessagesCache.ts
new file mode 100644
index 00000000000..0c8f83a97fb
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/src/suspense/MessagesCache.ts
@@ -0,0 +1,176 @@
+import { Message, TimeStampedPointRange } from "@replayio/protocol";
+
+import { ReplayClientInterface } from "../ReplayClient";
+import { Wakeable } from "../types";
+import { compareNumericStrings } from "../utils/string";
+import { createWakeable } from "../utils/suspense";
+import { formatTimestamp, isRangeEqual, isRangeSubset } from "../utils/time";
+
+// TODO Should I use React's Suspense cache APIs here?
+// It's tempting to think that I don't need to, because the recording session data is global,
+// but could this cause problems if React wants to render a high-priority update while a lower one is suspended?
+
+let inFlightWakeable: Wakeable | null = null;
+let inFlightFocusRange: TimeStampedPointRange | null = null;
+
+let lastFetchDidOverflow: boolean = false;
+let lastFetchedFocusRange: TimeStampedPointRange | null = null;
+let lastFetchedMessages: Message[] | null = null;
+
+let lastFilteredFocusRange: TimeStampedPointRange | null = null;
+let lastFilteredMessages: Message[] | null = null;
+let lastFilteredCountAfter: number = 0;
+let lastFilteredCountBefore: number = 0;
+
+type getMessagesResponse = {
+  countAfter: number;
+  countBefore: number;
+  didOverflow: boolean;
+  messages: Message[];
+};
+
+// Synchronously returns an array of filtered Messages,
+// or throws a Wakeable to be resolved once messages have been fetched.
+//
+// This method is Suspense friend; it is meant to be called from a React component during render.
+export function getMessages(
+  client: ReplayClientInterface,
+  focusRange: TimeStampedPointRange | null
+): getMessagesResponse {
+  if (focusRange !== null && focusRange.begin.point === focusRange.end.point) {
+    // Edge case scenario handling.
+    // The backend throws if both points in a range are the same.
+    // Arguably it should handle this more gracefully by just returning an empty array but...
+    return {
+      countAfter: -1,
+      countBefore: -1,
+      didOverflow: false,
+      messages: [],
+    };
+  }
+
+  if (inFlightWakeable !== null) {
+    // If we're already fetching this data, rethrow the same Wakeable (for Suspense reasons).
+    // We check equality here rather than subset because it's possible a larger range might overflow.
+    if (isRangeEqual(inFlightFocusRange, focusRange)) {
+      throw inFlightWakeable;
+    }
+  }
+
+  // We only need to refetch data if one of the following conditions is true.
+  let shouldFetch = false;
+  if (lastFetchedMessages === null) {
+    // We have not yet fetched it at all.
+    shouldFetch = true;
+  } else if (lastFetchDidOverflow && !isRangeEqual(lastFetchedFocusRange, focusRange)) {
+    // The most recent time we fetched it "overflowed" (too many messages to send them all),
+    // and we're trying to fetch a different region.
+    //
+    // There are two things to note about this case.
+    // 1. When devtools is first opened, there is no focused region.
+    //    This is equivalent to focusing on the entire timeline, so we often won't need to refetch messages when focusing for the first time.
+    // 2. We shouldn't compare the new focus region to the most recent focus region,
+    //    but rather to the most recent focus region that we fetched messages for (the entire timeline in many cases).
+    //    If we don't need to refetch after zooming in, then we won't need to refetch after zooming back out either,
+    //    (unless our fetches have overflowed at some point).
+    shouldFetch = true;
+  } else if (!isRangeSubset(lastFetchedFocusRange, focusRange)) {
+    // The new focus region is outside of the most recent region we fetched messages for.
+    shouldFetch = true;
+  }
+
+  if (shouldFetch) {
+    inFlightFocusRange = focusRange;
+
+    const wakeable = (inFlightWakeable = createWakeable());
+
+    fetchMessages(client, focusRange, wakeable);
+
+    throw inFlightWakeable;
+  }
+
+  // At this point, messages have been fetched but we may still need to filter them.
+  // For performance reasons (both in this function and on things that consume the filtered list)
+  // it's best if we memoize this operation (by comparing ranges) to avoid recreating the filtered array.
+  if (lastFilteredMessages === null || !isRangeEqual(lastFilteredFocusRange, focusRange)) {
+    if (focusRange === null) {
+      lastFilteredFocusRange = null;
+      lastFilteredCountAfter = 0;
+      lastFilteredCountBefore = 0;
+      lastFilteredMessages = lastFetchedMessages;
+    } else {
+      const begin = focusRange.begin.time;
+      const end = focusRange.end.time;
+
+      lastFilteredFocusRange = focusRange;
+      lastFilteredCountAfter = 0;
+      lastFilteredCountBefore = 0;
+      lastFilteredMessages = lastFetchedMessages!.filter(message => {
+        const time = message.point.time;
+        if (time < begin) {
+          lastFilteredCountBefore++;
+          return false;
+        } else if (time > end) {
+          lastFilteredCountAfter++;
+          return false;
+        } else {
+          return true;
+        }
+      });
+    }
+  }
+
+  // Note that the only time when it's safe for us to specify the number of trimmed messages
+  // is when we are trimming from the complete set of messages (aka no focus region).
+  // Otherwise even if we do trim some messages locally, the number isn't meaningful.
+  return {
+    countAfter: lastFetchedFocusRange === null ? lastFilteredCountAfter : -1,
+    countBefore: lastFetchedFocusRange === null ? lastFilteredCountBefore : -1,
+    didOverflow: lastFetchDidOverflow,
+    messages: lastFilteredMessages!,
+  };
+}
+
+async function fetchMessages(
+  client: ReplayClientInterface,
+  focusRange: TimeStampedPointRange | null,
+  wakeable: Wakeable
+) {
+  try {
+    const { messages, overflow } = await client.findMessages(focusRange);
+
+    // Only update cached values if this request hasn't been superceded by a newer one.
+    //
+    // TODO In the future we could merge new messages over time (assuming no overflow)
+    // to avoid re-fetching previously fetched ranges if a user scrubs around with the focus UI.
+    // We'd have to be careful though to only merge data from overlapping points,
+    // so that we didn't omit messages that happened between points.
+    // I'm still a little unclear on the exact relationship between time and point.
+    if (inFlightWakeable === wakeable) {
+      inFlightWakeable = null;
+
+      lastFetchDidOverflow = overflow;
+      lastFetchedFocusRange = focusRange;
+      lastFetchedMessages = messages;
+    }
+
+    wakeable.resolve();
+  } catch (error) {
+    inFlightFocusRange = null;
+    inFlightWakeable = null;
+
+    console.error("getMessage() Error for range", printFocusRange(focusRange), error);
+
+    wakeable.reject(error);
+  }
+}
+
+function printFocusRange(focusRange: TimeStampedPointRange | null): string {
+  if (focusRange === null) {
+    return "null";
+  } else {
+    return `${formatTimestamp(focusRange.begin.time)} - ${formatTimestamp(focusRange.end.time)} (${
+      focusRange.begin.point
+    }:${focusRange.end.point})`;
+  }
+}
diff --git a/packages/bvaughn-architecture-demo/src/suspense/PointsCache.ts b/packages/bvaughn-architecture-demo/src/suspense/PointsCache.ts
new file mode 100644
index 00000000000..d91c0f288ea
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/src/suspense/PointsCache.ts
@@ -0,0 +1,66 @@
+import { ExecutionPoint, SessionId } from "@replayio/protocol";
+import { unstable_getCacheForType as getCacheForType } from "react";
+import { ReplayClientInterface } from "../ReplayClient";
+
+import { Record, STATUS_PENDING, STATUS_REJECTED, STATUS_RESOLVED, Wakeable } from "../types";
+import { createWakeable } from "../utils/suspense";
+
+// TODO We could add some way for external code (in the client adapter) to pre-populate this cache with known points.
+// For example, when we get Paints they have a corresponding point (and time) which could be pre-loaded here.
+
+type TimeToRecordMap = Map<number, Record<ExecutionPoint>>;
+
+function createMap(): TimeToRecordMap {
+  return new Map();
+}
+
+function getRecordMap(): TimeToRecordMap {
+  return getCacheForType(createMap);
+}
+
+export function getClosestPointForTime(
+  client: ReplayClientInterface,
+  time: number
+): ExecutionPoint {
+  const map = getRecordMap();
+  let record = map.get(time);
+  if (record == null) {
+    const wakeable = createWakeable();
+
+    record = {
+      status: STATUS_PENDING,
+      value: wakeable,
+    };
+
+    map.set(time, record);
+
+    fetchPoint(client, time, record, wakeable);
+  }
+
+  if (record.status === STATUS_RESOLVED) {
+    return record.value;
+  } else {
+    throw record.value;
+  }
+}
+
+async function fetchPoint(
+  client: ReplayClientInterface,
+  time: number,
+  record: Record<ExecutionPoint>,
+  wakeable: Wakeable
+) {
+  try {
+    const point = await client.getPointNearTime(time);
+
+    record.status = STATUS_RESOLVED;
+    record.value = point.point;
+
+    wakeable.resolve();
+  } catch (error) {
+    record.status = STATUS_REJECTED;
+    record.value = error;
+
+    wakeable.reject(error);
+  }
+}
diff --git a/packages/bvaughn-architecture-demo/src/types.ts b/packages/bvaughn-architecture-demo/src/types.ts
new file mode 100644
index 00000000000..51de180624f
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/src/types.ts
@@ -0,0 +1,34 @@
+export type Range = [number, number];
+
+export const STATUS_PENDING = 0;
+export const STATUS_RESOLVED = 1;
+export const STATUS_REJECTED = 2;
+
+export type PendingRecord = {
+  status: 0;
+  value: Wakeable;
+};
+
+export type ResolvedRecord<T> = {
+  status: 1;
+  value: T;
+};
+
+export type RejectedRecord = {
+  status: 2;
+  value: any;
+};
+
+export type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
+
+// This type defines the subset of the Promise API that React uses (the .then method to add success/error callbacks).
+// You can use a Promise for this, but Promises have a downside (the microtask queue).
+// You can also create your own "thennable" if you want to support synchronous resolution/rejection.
+export interface Thennable {
+  then(onFulfill: () => any, onReject: () => any): void | Thennable;
+}
+
+export interface Wakeable extends Thennable {
+  reject(error: any): void;
+  resolve(): void;
+}
diff --git a/packages/bvaughn-architecture-demo/src/utils/string.ts b/packages/bvaughn-architecture-demo/src/utils/string.ts
new file mode 100644
index 00000000000..b3d2f97d9a7
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/src/utils/string.ts
@@ -0,0 +1,3 @@
+export function compareNumericStrings(a: string, b: string): number {
+  return a.length < b.length ? -1 : a.length > b.length ? 1 : a < b ? -1 : a > b ? 1 : 0;
+}
diff --git a/packages/bvaughn-architecture-demo/src/utils/suspense.ts b/packages/bvaughn-architecture-demo/src/utils/suspense.ts
new file mode 100644
index 00000000000..0ad1ae5f453
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/src/utils/suspense.ts
@@ -0,0 +1,68 @@
+import { Wakeable } from "../types";
+
+// A "thennable" is a subset of the Promise API.
+// We could use a Promise as thennable, but Promises have a downside: they use the microtask queue.
+// An advantage to creating a custom thennable is synchronous resolution (or rejection).
+//
+// A "wakeable" is a "thennable" that has convenience resolve/reject methods.
+export function createWakeable(): Wakeable {
+  const resolveCallbacks: Set<() => void> = new Set();
+  const rejectCallbacks: Set<(error: Error) => void> = new Set();
+
+  const wakeable: Wakeable = {
+    then(resolveCallback: () => void, rejectCallback: (error: Error) => void) {
+      resolveCallbacks.add(resolveCallback);
+      rejectCallbacks.add(rejectCallback);
+    },
+    reject(error: Error) {
+      rejectCallbacks.forEach(rejectCallback => {
+        let thrownValue = null;
+
+        try {
+          rejectCallback(error);
+        } catch (error) {
+          thrownValue = error;
+        }
+
+        if (thrownValue !== null) {
+          throw thrownValue;
+        }
+      });
+    },
+    resolve() {
+      resolveCallbacks.forEach(resolveCallback => {
+        let thrownValue = null;
+
+        try {
+          resolveCallback();
+        } catch (error) {
+          thrownValue = error;
+        }
+
+        if (thrownValue !== null) {
+          throw thrownValue;
+        }
+      });
+    },
+  };
+
+  return wakeable;
+}
+
+// Helper function to read from multiple Suspense caches in parallel.
+// This method will re-throw any thrown value, but only after also calling subsequent caches.
+export function suspendInParallel(callbacks: Function[]): void {
+  let thrownValue = null;
+
+  callbacks.forEach(callback => {
+    try {
+      callback();
+    } catch (error) {
+      thrownValue = error;
+    }
+  });
+
+  if (thrownValue !== null) {
+    throw thrownValue;
+  }
+}
diff --git a/packages/bvaughn-architecture-demo/src/utils/testing.tsx b/packages/bvaughn-architecture-demo/src/utils/testing.tsx
new file mode 100644
index 00000000000..96e977777f1
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/src/utils/testing.tsx
@@ -0,0 +1,131 @@
+import { act, render as rtlRender, RenderResult } from "@testing-library/react";
+import { ReactNode } from "react";
+
+import {
+  ConsoleFiltersContext,
+  ConsoleFiltersContextType,
+  FocusContext,
+  FocusContextType,
+  ReplayClientContext,
+  SessionContext,
+  SessionContextType,
+} from "../contexts";
+import { ReplayClient, ReplayClientInterface } from "../ReplayClient";
+
+// This particular method is written to enable testing the entire client.
+// The only context values it stubs out are the ReplayClient (ReplayClientContext).
+export async function render(
+  children: ReactNode,
+  options?: {
+    replayClient?: Partial<ReplayClientInterface>;
+    sessionContext?: Partial<SessionContextType>;
+  }
+): Promise<{
+  renderResult: RenderResult;
+  replayClient: ReplayClientInterface;
+  sessionContext: SessionContextType;
+}> {
+  const replayClient: ReplayClientInterface = {
+    ...MockReplayClient,
+    ...options?.replayClient,
+  };
+
+  const sessionContext: SessionContextType = {
+    duration: 1000,
+    endPoint: "1000",
+    recordingId: "fakeRecordingId",
+    sessionId: "fakeSessionId",
+    ...options?.sessionContext,
+  };
+
+  let renderResult: RenderResult = null as any;
+  await act(async () => {
+    const result = rtlRender(
+      <ReplayClientContext.Provider value={replayClient}>
+        <SessionContext.Provider value={sessionContext}>{children}</SessionContext.Provider>
+      </ReplayClientContext.Provider>
+    );
+
+    renderResult = result;
+  });
+
+  return {
+    renderResult,
+    replayClient,
+    sessionContext,
+  };
+}
+
+// We could render the entire app and let it inject the "real" contexts,
+// or we can render our own contexts to control the values being shown (and what we're testing).
+// The only thing we NEED to override in all cases is the ReplayClient (ReplayClientContext).
+//
+// This particular method is written to enable focused component testing.
+// In other words, it stubs out all of the contexts any component in the app may need.
+export async function renderFocused(
+  children: ReactNode,
+  options?: {
+    consoleFiltersContext?: Partial<ConsoleFiltersContextType>;
+    focusContext?: Partial<FocusContextType>;
+    replayClient?: Partial<ReplayClientInterface>;
+    sessionContext?: Partial<SessionContextType>;
+  }
+): Promise<{
+  consoleFiltersContext: ConsoleFiltersContextType;
+  focusContext: FocusContextType;
+  renderResult: RenderResult;
+  replayClient: ReplayClientInterface;
+  sessionContext: SessionContextType;
+}> {
+  const consoleFiltersContext: ConsoleFiltersContextType = {
+    filterByDisplayText: "",
+    filterByText: "",
+    isTransitionPending: false,
+    levelFlags: {
+      showErrors: true,
+      showLogs: true,
+      showWarnings: true,
+    },
+    update: jest.fn(),
+    ...options?.consoleFiltersContext,
+  };
+
+  const focusContext: FocusContextType = {
+    isTransitionPending: false,
+    range: null,
+    rangeForDisplay: null,
+    update: jest.fn(),
+    ...options?.focusContext,
+  };
+
+  const renderResponse = await render(
+    <FocusContext.Provider value={focusContext}>
+      <ConsoleFiltersContext.Provider value={consoleFiltersContext}>
+        {children}
+      </ConsoleFiltersContext.Provider>
+    </FocusContext.Provider>,
+    {
+      replayClient: options?.replayClient,
+      sessionContext: options?.sessionContext,
+    }
+  );
+
+  return {
+    ...renderResponse,
+    consoleFiltersContext,
+    focusContext,
+  };
+}
+
+// This mock client is mostly useless by itself,
+// but its methods can be overridden individually (or observed/inspected) by test code.
+const MockReplayClient = {
+  initialize: jest.fn().mockImplementation(async () => {}),
+  findMessages: jest.fn().mockImplementation(async () => ({ messages: [], overflow: false })),
+  findSources: jest.fn().mockImplementation(async () => {}),
+  getPointNearTime: jest.fn().mockImplementation(async () => ({ point: "0", time: 0 })),
+  getSessionEndpoint: jest.fn().mockImplementation(async () => ({
+    point: "1000",
+    time: 1000,
+  })),
+};
diff --git a/packages/bvaughn-architecture-demo/src/utils/time.ts b/packages/bvaughn-architecture-demo/src/utils/time.ts
new file mode 100644
index 00000000000..e7b77a7d529
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/src/utils/time.ts
@@ -0,0 +1,46 @@
+import { TimeStampedPointRange } from "@replayio/protocol";
+import { padStart } from "lodash";
+import prettyMilliseconds from "pretty-ms";
+
+export function formatDuration(ms: number) {
+  return prettyMilliseconds(ms, { millisecondsDecimalDigits: 1 });
+}
+
+export function formatTimestamp(ms: number) {
+  const seconds = Math.round(ms / 1000.0);
+  return `${Math.floor(seconds / 60)}:${padStart(String(seconds % 60), 2, "0")}`;
+}
+
+export function isRangeEqual(
+  prevRange: TimeStampedPointRange | null,
+  nextRange: TimeStampedPointRange | null
+): boolean {
+  if (prevRange === null && nextRange === null) {
+    return true;
+  } else if (prevRange !== null && nextRange !== null) {
+    return (
+      nextRange.begin.time === prevRange.begin.time && nextRange.end.time === prevRange.end.time
+    );
+  } else {
+    return false;
+  }
+}
+
+export function isRangeSubset(
+  prevRange: TimeStampedPointRange | null,
+  nextRange: TimeStampedPointRange | null
+): boolean {
+  if (prevRange === null && nextRange === null) {
+    return true;
+  } else if (prevRange === null) {
+    // There was no previous range constraint.
+    // No matter what the new range is, it will be a subset.
+    return true;
+  } else if (nextRange === null) {
+    // There is no new range constraint.
+    // No matter what the previous range was, the new one is not a subset.
+    return false;
+  } else {
+    return nextRange.begin.time >= prevRange.begin.time && nextRange.end.time <= prevRange.end.time;
+  }
+}
diff --git a/packages/bvaughn-architecture-demo/tailwind.config.js b/packages/bvaughn-architecture-demo/tailwind.config.js
new file mode 100644
index 00000000000..4403510c4a9
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/tailwind.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/packages/bvaughn-architecture-demo/tsconfig.json b/packages/bvaughn-architecture-demo/tsconfig.json
new file mode 100644
index 00000000000..f9afafc60e7
--- /dev/null
+++ b/packages/bvaughn-architecture-demo/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "paths": {
+      "components/*": ["components/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/shared/utils/testing.ts b/packages/shared/utils/testing.ts
new file mode 100644
index 00000000000..403c9e8beae
--- /dev/null
+++ b/packages/shared/utils/testing.ts
@@ -0,0 +1,187 @@
+import type {
+  CallStack,
+  loadedRegions,
+  Location,
+  MappedLocation,
+  Message,
+  MessageLevel,
+  MessageSource,
+  newSource,
+  ObjectId,
+  PauseData,
+  PauseId,
+  PointDescription,
+  SourceId,
+  SourceKind,
+  TimeStampedPoint,
+  TimeStampedPointRange,
+  Value,
+} from "@replayio/protocol";
+
+export const DEFAULT_SOURCE_ID = "fake-source-id";
+export const DEFAULT_SOURCE_URL = "fake-source-url";
+
+let uidCounter = 0;
+
+export type MessageTuple = ["Console.newMessage", Message];
+
+export function createConsoleMessage({
+  argumentValues = [],
+  column = 0,
+  data = {},
+  level = "info",
+  line = 1,
+  pauseId = `${uidCounter++}`,
+  point = createPointDescription({}),
+  source = "ConsoleAPI",
+  sourceId,
+  stack = [],
+  text = "",
+  url,
+}: {
+  argumentValues?: Value[];
+  column?: number;
+  data?: PauseData;
+  level?: MessageLevel;
+  line?: number;
+  pauseId?: PauseId;
+  point?: PointDescription;
+  source?: MessageSource;
+  sourceId?: SourceId;
+  stack?: CallStack;
+  text?: string;
+  url?: string;
+} = {}): MessageTuple {
+  const value: Message = {
+    argumentValues,
+    column,
+    data,
+    level,
+    line,
+    pauseId,
+    point,
+    source,
+    sourceId,
+    stack,
+    text,
+    url,
+  };
+
+  return ["Console.newMessage", value];
+}
+
+export type LoadedRegionsTuple = ["Session.loadedRegions", loadedRegions];
+
+export function createLoadedRegions({
+  beginPoint,
+  beginTime = 0,
+  endPoint,
+  endTime,
+  isIndexed = true,
+  isLoaded = true,
+}: {
+  beginPoint?: string;
+  beginTime?: number;
+  endPoint?: string;
+  endTime: number;
+  isIndexed?: boolean;
+  isLoaded?: boolean;
+}): LoadedRegionsTuple {
+  const timeRange: TimeStampedPointRange = {
+    begin: createTimeStampedPoint({ point: beginPoint, time: beginTime }),
+    end: createTimeStampedPoint({ point: endPoint, time: endTime }),
+  };
+
+  const value: loadedRegions = {
+    indexed: isIndexed ? [timeRange] : [],
+    loaded: isLoaded ? [timeRange] : [],
+    loading: [timeRange],
+  };
+
+  return ["Session.loadedRegions", value];
+}
+
+export function createLocation({
+  column = 0,
+  line = 0,
+  sourceId = DEFAULT_SOURCE_ID,
+}: {
+  column?: number;
+  line?: number;
+  sourceId?: SourceId;
+}): Location {
+  return { column, line, sourceId };
+}
+
+export function createPointDescription({
+  frame = [createLocation({})],
+  point,
+  time = 0,
+}: {
+  frame?: MappedLocation;
+  point?: string;
+  time?: number;
+}): PointDescription {
+  return { frame, point: point || `${time}`, time };
+}
+
+export type SourceTuple = ["Debugger.newSource", newSource];
+
+export function createSource({
+  generatedSourceIds,
+  kind,
+  sourceId = DEFAULT_SOURCE_ID,
+  url = DEFAULT_SOURCE_URL,
+}: {
+  generatedSourceIds?: SourceId[];
+  kind: SourceKind;
+  sourceId?: SourceId;
+  url?: string;
+}): SourceTuple {
+  const value: newSource = {
+    generatedSourceIds,
+    kind,
+    sourceId,
+    url,
+  };
+
+  return ["Debugger.newSource", value];
+}
+
+export function createTimeStampedPoint({
+  point,
+  time = 0,
+}: {
+  point?: string;
+  time?: number;
+}): TimeStampedPoint {
+  return { point: point || `${time}`, time };
+}
+
+export function createValue({
+  bigint,
+  object,
+  symbol,
+  unavailable,
+  uninitialized,
+  unserializableNumber,
+  value,
+}: {
+  bigint?: string;
+  object?: ObjectId;
+  symbol?: string;
+  unavailable?: boolean;
+  uninitialized?: boolean;
+  unserializableNumber?: string;
+  value?: any;
+}): Value {
+  return {
+    bigint,
+    object,
+    symbol,
+    unavailable,
+    uninitialized,
+    unserializableNumber,
+    value,
+  };
+}
diff --git a/src/devtools/client/shared/react.d.ts b/src/devtools/client/shared/react.d.ts
index 1bfe808d82e..782bbafae1e 100644
--- a/src/devtools/client/shared/react.d.ts
+++ b/src/devtools/client/shared/react.d.ts
@@ -6,4 +6,7 @@ declare module "react" {
   // The following hooks are only available in the experimental react release.
   export function useDeferredValue(value: T): T;
   export function useTransition(): [isPending: boolean, startTransition: (Callback) => void];
+
+  // Unstable Suspense cache API
+  export function unstable_getCacheForType<T>(resourceType: () => T): T;
 }
diff --git a/src/devtools/client/webconsole/components/Search/useConsoleSearch.test.tsx b/src/devtools/client/webconsole/components/Search/useConsoleSearch.test.tsx
index 9f39a1e8728..e0ebb1a914f 100644
--- a/src/devtools/client/webconsole/components/Search/useConsoleSearch.test.tsx
+++ b/src/devtools/client/webconsole/components/Search/useConsoleSearch.test.tsx
@@ -2,13 +2,12 @@ import { ThreadFront, ValueFront } from "protocol/thread";
 import React from "react";
 import { act } from "react-dom/test-utils";
 import {
-  DEFAULT_SESSION_ID,
   createConsoleMessage,
   createLoadedRegions,
   createSource,
   createValue,
-  sendValuesToMockEnvironment,
-} from "test/testFixtureUtils";
+} from "shared/utils/testing";
+import { DEFAULT_SESSION_ID, sendValuesToMockEnvironment } from "test/testFixtureUtils";
 import {
   createTestStore,
   filterCommonTestWarnings,
diff --git a/src/test/testFixtureUtils.tsx b/src/test/testFixtureUtils.tsx
index ab7fa148289..e45b2b82df7 100644
--- a/src/test/testFixtureUtils.tsx
+++ b/src/test/testFixtureUtils.tsx
@@ -1,202 +1,17 @@
 import { readFileSync } from "fs";
 
 import { gql } from "@apollo/client";
-import type {
-  CallStack,
-  loadedRegions,
-  Location,
-  MappedLocation,
-  Message,
-  MessageLevel,
-  MessageSource,
-  newSource,
-  ObjectId,
-  PauseData,
-  PauseId,
-  PointDescription,
-  SourceId,
-  SourceKind,
-  TimeStampedPoint,
-  TimeStampedPointRange,
-  Value,
-} from "@replayio/protocol";
 import { ThreadFront } from "protocol/thread";
+import { LoadedRegionsTuple, MessageTuple, SourceTuple } from "shared/utils/testing";
 import { UIStore } from "ui/actions";
+import { getMockEnvironmentForTesting } from "ui/utils/environment";
 import { convertRecording } from "ui/hooks/recordings";
 import { Recording } from "ui/types";
 
 import { createTestStore } from "./testUtils";
-import { getMockEnvironmentForTesting } from "ui/utils/environment";
 
-export const DEFAULT_SOURCE_ID = "fake-source-id";
-export const DEFAULT_SOURCE_URL = "fake-source-url";
 export const DEFAULT_SESSION_ID = "fake-session-id";
 
-let uidCounter = 0;
-
-type MessageTuple = ["Console.newMessage", Message];
-
-export function createConsoleMessage({
-  argumentValues = [],
-  column = 0,
-  data = {},
-  level = "info",
-  line = 1,
-  pauseId = `${uidCounter++}`,
-  point = createPointDescription({}),
-  source = "ConsoleAPI",
-  sourceId,
-  stack = [],
-  text = "",
-  url,
-}: {
-  argumentValues?: Value[];
-  column?: number;
-  data?: PauseData;
-  level?: MessageLevel;
-  line?: number;
-  pauseId?: PauseId;
-  point?: PointDescription;
-  source?: MessageSource;
-  sourceId?: SourceId;
-  stack?: CallStack;
-  text?: string;
-  url?: string;
-}): MessageTuple {
-  const value: Message = {
-    argumentValues,
-    column,
-    data,
-    level,
-    line,
-    pauseId,
-    point,
-    source,
-    sourceId,
-    stack,
-    text,
-    url,
-  };
-
-  return ["Console.newMessage", value];
-}
-
-type LoadedRegionsTuple = ["Session.loadedRegions", loadedRegions];
-
-export function createLoadedRegions({
-  beginPoint,
-  beginTime = 0,
-  endPoint,
-  endTime,
-  isIndexed = true,
-  isLoaded = true,
-}: {
-  beginPoint?: string;
-  beginTime?: number;
-  endPoint?: string;
-  endTime: number;
-  isIndexed?: boolean;
-  isLoaded?: boolean;
-}): LoadedRegionsTuple {
-  const timeRange: TimeStampedPointRange = {
-    begin: createTimeStampedPoint({ point: beginPoint, time: beginTime }),
-    end: createTimeStampedPoint({ point: endPoint, time: endTime }),
-  };
-
-  const value: loadedRegions = {
-    indexed: isIndexed ? [timeRange] : [],
-    loaded: isLoaded ? [timeRange] : [],
-    loading: [timeRange],
-  };
-
-  return ["Session.loadedRegions", value];
-}
-
-export function createLocation({
-  column = 0,
-  line = 0,
-  sourceId = DEFAULT_SOURCE_ID,
-}: {
-  column?: number;
-  line?: number;
-  sourceId?: SourceId;
-}): Location {
-  return { column, line, sourceId };
-}
-
-export function createPointDescription({
-  frame = [createLocation({})],
-  point,
-  time = 0,
-}: {
-  frame?: MappedLocation;
-  point?: string;
-  time?: number;
-}): PointDescription {
-  return { frame, point: point || `${time}`, time };
-}
-
-type SourceTuple = ["Debugger.newSource", newSource];
-
-export function createSource({
-  generatedSourceIds,
-  kind,
-  sourceId = DEFAULT_SOURCE_ID,
-  url = DEFAULT_SOURCE_URL,
-}: {
-  generatedSourceIds?: SourceId[];
-  kind: SourceKind;
-  sourceId?: SourceId;
-  url?: string;
-}): SourceTuple {
-  const value: newSource = {
-    generatedSourceIds,
-    kind,
-    sourceId,
-    url,
-  };
-
-  return ["Debugger.newSource", value];
-}
-
-export function createTimeStampedPoint({
-  point,
-  time = 0,
-}: {
-  point?: string;
-  time?: number;
-}): TimeStampedPoint {
-  return { point: point || `${time}`, time };
-}
-
-export function createValue({
-  bigint,
-  object,
-  symbol,
-  unavailable,
-  uninitialized,
-  unserializableNumber,
-  value,
-}: {
-  bigint?: string;
-  object?: ObjectId;
-  symbol?: string;
-  unavailable?: boolean;
-  uninitialized?: boolean;
-  unserializableNumber?: string;
-  value?: any;
-}): Value {
-  return {
-    bigint,
-    object,
-    symbol,
-    unavailable,
-    uninitialized,
-    unserializableNumber,
-    value,
-  };
-}
-
 export async function loadFixtureData(
   testName: string
 ): Promise<{ graphqlMocks: any[]; recording: Recording; sessionId: string; store: UIStore }> {