chore: Add XState inspector back (#4268)

site/src/Main.tsx

@@ -1,7 +1,21 @@
+import { inspect } from "@xstate/inspect"
 import { createRoot } from "react-dom/client"
+import { Interpreter } from "xstate"
 import { App } from "./app"
 import "./i18n"
 
+// if this is a development build and the developer wants to inspect
+// helpful to see realtime changes on the services
+if (process.env.NODE_ENV === "development" && process.env.INSPECT_XSTATE === "true") {
+  // configure the XState inspector to open in a new tab
+  inspect({
+    url: "https://stately.ai/viz?inspect",
+    iframe: false,
+  })
+  // configure all XServices to use the inspector
+  Interpreter.defaultOptions.devTools = true
+}
+
 // This is the entry point for the app - where everything start.
 // In the future, we'll likely bring in more bootstrapping logic -
 // like: https://github.com/coder/m/blob/50898bd4803df7639bd181e484c74ac5d84da474/product/coder/site/pages/_app.tsx#L32

site/vite.config.ts

@@ -13,6 +13,7 @@ export default defineConfig({
   define: {
     "process.env": {
       NODE_ENV: process.env.NODE_ENV,
+      INSPECT_XSTATE: process.env.INSPECT_XSTATE,
     },
   },
   server: {