[XState] Enable XState inspector conditionally (#237503)

## 📓 Summary

This PR addresses the issue of noisy XState console logging in
development mode by introducing runtime toggling functionality.
Previously, the XState inspector logged all state machine events
directly to the console, which interfered with debugging other
application features.


https://github.com/user-attachments/assets/1412afef-2eae-4329-aabd-0c877f54cd9b

## 🎯 Problem

As discussed in [the team
thread](https://elastic.slack.com/archives/C081J8HAZ50/p1757590000481899),
the XState console inspector was always active in dev mode, causing
excessive console noise. The original implementation used:

```typescript
const log = console.info.bind(console);
```

This meant all XState state machine events, transitions, and snapshots
were logged unconditionally, making it difficult for developers to debug
non-XState-related issues when the console was cluttered with state
machine information.

**Context from discussion:**
- XState v5 no longer supports the Redux DevTools extension, requiring a
custom observable inspector
- The console inspector was created as a replacement, but lacked
conditional control
- Developers needed a way to enable/disable logging without code changes
- Browser-side toggling was preferred over environment variables (which
are harder to forward to the browser)

## 🔧 Solution & Usage

**To enable XState logging:**
1. Open your browser's DevTools console
2. Run: `toggleXstateInspector()`
3. You'll see: `ℹ️ XState inspector enabled`
4. All XState events will now be logged to the console

**To disable XState logging:**
1. Run `toggleXstateInspector()` again
2. You'll see: `ℹ️ XState inspector disabled`
3. Console logging stops immediately

**On page load:**
- You'll see a one-time help message: `ℹ️ To toggle the XState
inspector, for advanced debugging, run toggleXstateInspector() on your
browser console.`
- XState logging is **disabled by default**
- The console remains clean unless you explicitly enable it

## 💡 Technical Notes

- **Opt-in by default:** Logging is disabled on initialization, keeping
the console clean
- **Dev mode only:** The inspector is only available when `isDevMode()`
returns `true`
- **Persistence:** The toggle state is persisted across page reloads
- **No code changes needed:** Developers can enable/disable logging at
runtime without modifying source code or rebuilding

Author: tonyghiani

src/platform/packages/shared/kbn-xstate-utils/src/console_inspector.ts

@@ -7,6 +7,10 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+/* eslint-disable no-console */
+
+/* eslint-disable no-var */
+
 import type {
   ActorRefLike,
   AnyActorRef,
@@ -17,13 +21,47 @@ import type {
 } from 'xstate5';
 import { isDevMode } from './dev_tools';
 
+declare global {
+  var __XSTATE_LOGGER_ENABLED__: boolean;
+  var toggleXstateInspector: () => void;
+}
+
+let isHelpMessageLogged = false;
+const setupDevToolsInspector = () => {
+  if (!isHelpMessageLogged) {
+    console.info(
+      `ℹ️ To toggle the XState inspector, for advanced debugging, run toggleXstateInspector() on your browser console.`
+    );
+    isHelpMessageLogged = true;
+
+    const isEnabled = localStorage.getItem('__XSTATE_LOGGER_ENABLED__') === 'true';
+
+    globalThis.__XSTATE_LOGGER_ENABLED__ = isEnabled;
+    globalThis.toggleXstateInspector = toggleXstateInspector;
+  }
+};
+
+const toggleXstateInspector = () => {
+  globalThis.__XSTATE_LOGGER_ENABLED__ = !globalThis.__XSTATE_LOGGER_ENABLED__;
+  localStorage.setItem(
+    '__XSTATE_LOGGER_ENABLED__',
+    globalThis.__XSTATE_LOGGER_ENABLED__.toString()
+  );
+
+  console.info(
+    `ℹ️ XState inspector ${globalThis.__XSTATE_LOGGER_ENABLED__ ? 'enabled' : 'disabled'}`
+  );
+};
+
 export const createConsoleInspector = () => {
   if (!isDevMode()) {
     return () => {};
   }
 
-  // eslint-disable-next-line no-console
-  const log = console.info.bind(console);
+  setupDevToolsInspector();
+
+  const log = (...args: Parameters<typeof console.info>) =>
+    globalThis.__XSTATE_LOGGER_ENABLED__ ? console.info(...args) : undefined;
 
   const logActorEvent = (actorEvent: InspectedActorEvent) => {
     if (isActorRef(actorEvent.actorRef)) {