@noya-app/noya-multiplayer-react 0.1.74 → 0.1.76

package/dist/index.js

@@ -1532,8 +1532,6 @@ __export(src_exports, {
   useBindNoyaManager: () => useBindNoyaManager,
   useCallableAITools: () => useCallableAITools,
   useColorScheme: () => useColorScheme,
-  useConnectedUser: () => useConnectedUser,
-  useConnectedUsers: () => useConnectedUsers,
   useEnqueueInput: () => useEnqueueInput,
   useFileName: () => useFileName,
   useFilePropertyManager: () => useFilePropertyManager,
@@ -1544,14 +1542,15 @@ __export(src_exports, {
   useManagedHistory: () => useManagedHistory,
   useManagedState: () => useManagedState,
   useMultiplayerState: () => useMultiplayerState,
+  useNoyaActiveUsers: () => useNoyaActiveUsers,
   useNoyaAssetTranscription: () => useNoyaAssetTranscription,
-  useNoyaClientId: () => useNoyaClientId,
-  useNoyaConnectionId: () => useNoyaConnectionId,
-  useNoyaId: () => useNoyaId,
+  useNoyaCurrentUser: () => useNoyaCurrentUser,
+  useNoyaCurrentUserId: () => useNoyaCurrentUserId,
   useNoyaStateInternal: () => useNoyaStateInternal,
   useNoyaTranscriptionManager: () => useNoyaTranscriptionManager,
   useNoyaUser: () => useNoyaUser,
-  useNoyaUserId: () => useNoyaUserId,
+  useNoyaUserManager: () => useNoyaUserManager,
+  useNoyaUsers: () => useNoyaUsers,
   useObservable: () => useObservable,
   useOutputTransforms: () => useOutputTransforms,
   usePipelineManager: () => usePipelineManager,
@@ -1564,14 +1563,13 @@ __export(src_exports, {
   useSecrets: () => useSecrets,
   useSetFileNameState: () => useSetFileNameState,
   useStateInspector: () => useStateInspector,
-  useUserManager: () => useUserManager,
   useViewType: () => useViewType
 });
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("@noya-app/state-manager"), module.exports);
 
 // src/ai.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // ../../node_modules/@sinclair/typebox/build/esm/type/symbols/symbols.mjs
 var TransformKind = Symbol.for("TypeBox.Transform");
@@ -2101,7 +2099,7 @@ function Literal(value, options = {}) {
 }
 
 // ../../node_modules/@sinclair/typebox/build/esm/type/boolean/boolean.mjs
-function Boolean(options = {}) {
+function Boolean2(options = {}) {
   return {
     ...options,
     [Kind]: "Boolean",
@@ -2135,7 +2133,7 @@ function String2(options = {}) {
 // ../../node_modules/@sinclair/typebox/build/esm/type/template-literal/syntax.mjs
 function* FromUnion(syntax) {
   const trim = syntax.trim().replace(/"|'/g, "");
-  return trim === "boolean" ? yield Boolean() : trim === "number" ? yield Number2() : trim === "bigint" ? yield BigInt2() : trim === "string" ? yield String2() : yield (() => {
+  return trim === "boolean" ? yield Boolean2() : trim === "number" ? yield Number2() : trim === "bigint" ? yield BigInt2() : trim === "string" ? yield String2() : yield (() => {
     const literals = trim.split("|").map((literal) => Literal(literal.trim()));
     return literals.length === 0 ? Never() : literals.length === 1 ? literals[0] : UnionEvaluated(literals);
   })();
@@ -3927,7 +3925,7 @@ __export(type_exports3, {
   AsyncIterator: () => AsyncIterator,
   Awaited: () => Awaited,
   BigInt: () => BigInt2,
-  Boolean: () => Boolean,
+  Boolean: () => Boolean2,
   Capitalize: () => Capitalize,
   Composite: () => Composite,
   Const: () => Const,
@@ -4688,15 +4686,16 @@ format_exports.Set("uuid", validateUUID);
 // src/NoyaStateContext.tsx
 var import_observable = require("@noya-app/observable");
 var import_react_utils3 = require("@noya-app/react-utils");
-var import_react20 = __toESM(require("react"));
+var import_state_manager5 = require("@noya-app/state-manager");
+var import_react21 = __toESM(require("react"));
 
 // src/noyaApp.ts
 var import_state_manager3 = require("@noya-app/state-manager");
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/hooks.ts
 var import_state_manager2 = require("@noya-app/state-manager");
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_client2 = require("react-dom/client");
 
 // src/components/ErrorOverlay.tsx
@@ -4774,7 +4773,7 @@ var ErrorOverlay = React.memo(function ErrorOverlay2({
 });
 
 // src/inspector/useStateInspector.tsx
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var import_client = require("react-dom/client");
 var import_react_utils2 = require("@noya-app/react-utils");
 
@@ -4908,7 +4907,7 @@ function uuid() {
 
 // src/inspector/StateInspector.tsx
 var import_react_utils = require("@noya-app/react-utils");
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_react_inspector7 = require("react-inspector");
 
 // src/useObservable.ts
@@ -5302,7 +5301,9 @@ function EventsSection({
   setShowEvents,
   colorScheme,
   eventsContainerRef,
-  connectionEvents
+  connectionEvents,
+  paused,
+  onTogglePaused
 }) {
   const theme = getStateInspectorTheme(colorScheme);
   return /* @__PURE__ */ import_react9.default.createElement(
@@ -5311,9 +5312,20 @@ function EventsSection({
       open: showEvents,
       setOpen: setShowEvents,
       title: "Events",
-      colorScheme
+      colorScheme,
+      right: /* @__PURE__ */ import_react9.default.createElement(StateInspectorButton, { theme, onClick: onTogglePaused }, paused ? "Resume" : "Pause")
     },
-    /* @__PURE__ */ import_react9.default.createElement(StateInspectorDisclosureRowInner, { ref: eventsContainerRef }, connectionEvents?.map(
+    /* @__PURE__ */ import_react9.default.createElement(StateInspectorDisclosureRowInner, { ref: eventsContainerRef }, paused && /* @__PURE__ */ import_react9.default.createElement(
+      "div",
+      {
+        style: {
+          padding: "4px 12px",
+          fontSize: "11px",
+          opacity: 0.7
+        }
+      },
+      "Event streaming paused"
+    ), connectionEvents?.map(
       (event, index) => event.type === "stateChange" ? /* @__PURE__ */ import_react9.default.createElement(StateInspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ import_react9.default.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ import_react9.default.createElement(
         StateInspectorRow,
         {
@@ -5344,7 +5356,7 @@ function EventsSection({
           }
         )
       )
-    ), !connectionEvents && /* @__PURE__ */ import_react9.default.createElement(
+    ), !connectionEvents?.length && /* @__PURE__ */ import_react9.default.createElement(
       "div",
       {
         style: {
@@ -5598,7 +5610,8 @@ function ServerScriptLogsSection({
   logs,
   containerRef,
   paused,
-  onTogglePaused
+  onTogglePaused,
+  title = "Server Script Logs"
 }) {
   const theme = getStateInspectorTheme(colorScheme);
   return /* @__PURE__ */ import_react11.default.createElement(
@@ -5606,7 +5619,7 @@ function ServerScriptLogsSection({
     {
       open: showLogs,
       setOpen: setShowLogs,
-      title: "Server Script Logs",
+      title,
       colorScheme,
       right: /* @__PURE__ */ import_react11.default.createElement(StateInspectorButton, { theme, onClick: onTogglePaused }, paused ? "Resume" : "Pause")
     },
@@ -5635,6 +5648,18 @@ function ServerScriptLogsSection({
       },
       /* @__PURE__ */ import_react11.default.createElement("span", null, formatTimestamp(log.timestamp)),
       /* @__PURE__ */ import_react11.default.createElement("span", { style: { color: levelColors[log.level] } }, log.level),
+      (log.origin || log.target || log.mode) && /* @__PURE__ */ import_react11.default.createElement(
+        "span",
+        {
+          style: {
+            fontFamily: "monospace",
+            textTransform: "none",
+            fontSize: "10px",
+            opacity: 0.75
+          }
+        },
+        [log.origin ?? log.target, log.mode].filter(Boolean).join(" / ")
+      ),
       /* @__PURE__ */ import_react11.default.createElement(
         "span",
         {
@@ -5660,8 +5685,7 @@ function ServerScriptLogsSection({
         {
           key: index,
           data: value,
-          theme,
-          expandLevel: 3
+          theme
         }
       )) : /* @__PURE__ */ import_react11.default.createElement("span", { style: { fontSize: "11px", opacity: 0.7 } }, "No data")
     ))), !logs?.length && /* @__PURE__ */ import_react11.default.createElement(
@@ -6330,6 +6354,31 @@ function useLocalStorageState(key, defaultValue) {
   return [state, setLocalStorageState];
 }
 
+// src/inspector/usePausedStream.ts
+var import_react15 = __toESM(require("react"));
+function usePausedStream(items) {
+  const [paused, setPaused] = import_react15.default.useState(false);
+  const [visibleItems, setVisibleItems] = import_react15.default.useState(items ?? []);
+  const togglePaused = import_react15.default.useCallback(() => {
+    setPaused((value) => {
+      if (!value) {
+        setVisibleItems(items ?? []);
+      }
+      return !value;
+    });
+  }, [items]);
+  import_react15.default.useEffect(() => {
+    if (paused) return;
+    setVisibleItems(items ?? []);
+  }, [items, paused]);
+  return {
+    paused,
+    setPaused,
+    togglePaused,
+    visibleItems
+  };
+}
+
 // src/inspector/StateInspector.tsx
 var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector2({
   noyaManager,
@@ -6352,16 +6401,17 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
     activityEventsManager,
     logManager
   } = noyaManager;
-  const [didMount, setDidMount] = import_react15.default.useState(false);
+  const [didMount, setDidMount] = import_react16.default.useState(false);
   const tasks = useObservable(taskManager.tasks$);
   const inputs = useObservable(ioManager.inputs$);
   const outputTransforms = useObservable(ioManager.outputTransforms$);
-  (0, import_react15.useLayoutEffect)(() => {
+  (0, import_react16.useLayoutEffect)(() => {
     setDidMount(true);
   }, []);
-  const eventsContainerRef = import_react15.default.useRef(null);
-  const activityEventsContainerRef = import_react15.default.useRef(null);
-  const serverLogsContainerRef = import_react15.default.useRef(null);
+  const eventsContainerRef = import_react16.default.useRef(null);
+  const activityEventsContainerRef = import_react16.default.useRef(null);
+  const serverLogsContainerRef = import_react16.default.useRef(null);
+  const serverSimulationLogsContainerRef = import_react16.default.useRef(null);
   const [showInspector, setShowInspector] = useLocalStorageState(
     "noya-multiplayer-react-show-inspector",
     true
@@ -6422,35 +6472,51 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
     "noya-multiplayer-react-show-server-logs",
     false
   );
+  const [showServerSimulationLogs, setShowServerSimulationLogs] = useLocalStorageState(
+    "noya-multiplayer-react-show-server-simulation-logs",
+    false
+  );
+  const [showSimulation, setShowSimulation] = useLocalStorageState(
+    "noya-multiplayer-react-show-simulation",
+    false
+  );
   const connectionEvents = useObservable(connectionEventManager.events$);
-  (0, import_react15.useEffect)(() => {
+  const {
+    visibleItems: visibleConnectionEvents,
+    paused: connectionEventsPaused,
+    togglePaused: toggleConnectionEventsPaused
+  } = usePausedStream(connectionEvents);
+  (0, import_react16.useEffect)(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
     }
-  }, [connectionEvents]);
+  }, [visibleConnectionEvents]);
   const serverLogs = useObservable(logManager.logs$);
-  const [serverLogsPaused, setServerLogsPaused] = import_react15.default.useState(false);
-  const [visibleServerLogs, setVisibleServerLogs] = import_react15.default.useState(
-    serverLogs ?? []
+  const {
+    visibleItems: visibleServerLogs,
+    paused: serverLogsPaused,
+    togglePaused: toggleServerLogsPaused
+  } = usePausedStream(serverLogs);
+  const serverSimulationLogs = useObservable(
+    multiplayerStateManager.serverSimulationLogs$
   );
-  const toggleServerLogsPaused = (0, import_react15.useCallback)(() => {
-    setServerLogsPaused((value) => {
-      if (!value) {
-        setVisibleServerLogs(serverLogs ?? []);
-      }
-      return !value;
-    });
-  }, [serverLogs]);
-  (0, import_react15.useEffect)(() => {
-    if (serverLogsPaused) return;
-    setVisibleServerLogs(serverLogs ?? []);
-  }, [serverLogs, serverLogsPaused]);
-  (0, import_react15.useEffect)(() => {
+  const {
+    visibleItems: visibleServerSimulationLogs,
+    paused: serverSimulationLogsPaused,
+    togglePaused: toggleServerSimulationLogsPaused
+  } = usePausedStream(serverSimulationLogs);
+  (0, import_react16.useEffect)(() => {
     if (!showServerLogs) return;
     if (serverLogsContainerRef.current) {
       serverLogsContainerRef.current.scrollTop = serverLogsContainerRef.current.scrollHeight;
     }
   }, [showServerLogs, visibleServerLogs]);
+  (0, import_react16.useEffect)(() => {
+    if (!showServerSimulationLogs) return;
+    if (serverSimulationLogsContainerRef.current) {
+      serverSimulationLogsContainerRef.current.scrollTop = serverSimulationLogsContainerRef.current.scrollHeight;
+    }
+  }, [showServerSimulationLogs, visibleServerSimulationLogs]);
   const multipeerStateInitialized = useObservable(
     multiplayerStateManager.isInitialized$
   );
@@ -6462,8 +6528,10 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
   const assetsInitialized = useObservable(assetManager.isInitialized$);
   const secrets = useObservable(secretManager.secrets$);
   const secretsInitialized = useObservable(secretManager.isInitialized$);
-  const connectedUsers = useObservable(userManager.connectedUsers$);
+  const connectedUsers = useObservable(userManager.allUsers$);
   const connectionId = useObservable(userManager.currentConnectionId$);
+  const simulationDiagnostics = multiplayerStateManager.getServerSimulationDiagnostics?.() ?? null;
+  const showSimulationLogsSection = (simulationDiagnostics?.simulateLocally ?? false) || visibleServerSimulationLogs.length > 0;
   const state = useObservable(multiplayerStateManager.optimisticState$);
   const inputsInitialized = useObservable(ioManager.inputsInitialized$);
   const outputTransformsInitialized = useObservable(
@@ -6490,11 +6558,11 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
     zIndex: 9999,
     lineHeight: "13px"
   };
-  const handleExportAll = (0, import_react15.useCallback)(async () => {
+  const handleExportAll = (0, import_react16.useCallback)(async () => {
     const buffer = await exportAll(noyaManager);
     (0, import_react_utils.downloadBlob)(new Blob([buffer]), "state.zip");
   }, [noyaManager]);
-  const handleImportAll = (0, import_react15.useCallback)(async () => {
+  const handleImportAll = (0, import_react16.useCallback)(async () => {
     const file = await uploadFile();
     const buffer = await file.arrayBuffer();
     importAll(buffer, noyaManager, {
@@ -6507,7 +6575,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
   }, [noyaManager]);
   if (!didMount) return null;
   if (!showInspector) {
-    return /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(
       "div",
       {
         ...props,
@@ -6519,7 +6587,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         },
         onClick: () => setShowInspector(true)
       },
-      /* @__PURE__ */ import_react15.default.createElement(
+      /* @__PURE__ */ import_react16.default.createElement(
         StateInspectorToggleButton,
         {
           showInspector,
@@ -6530,7 +6598,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
       )
     );
   }
-  return /* @__PURE__ */ import_react15.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "div",
     {
       ...props,
@@ -6539,7 +6607,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         ...props.style
       }
     },
-    /* @__PURE__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       StateInspectorDisclosureSection,
       {
         isFirst: true,
@@ -6552,14 +6620,14 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
           maxHeight: "50%",
           overflowY: "auto"
         },
-        right: /* @__PURE__ */ import_react15.default.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react15.default.createElement(
+        right: /* @__PURE__ */ import_react16.default.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react16.default.createElement(
           StateInspectorButton,
           {
             theme,
             onClick: () => setShowUserDetails(!showUserDetails)
           },
           "Toggle details"
-        ), /* @__PURE__ */ import_react15.default.createElement(
+        ), /* @__PURE__ */ import_react16.default.createElement(
           StateInspectorToggleButton,
           {
             showInspector,
@@ -6569,16 +6637,19 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
           }
         ))
       },
-      /* @__PURE__ */ import_react15.default.createElement(StateInspectorDisclosureRowInner, { style: { flex: "0 0 auto" } }, connectedUsers?.map((user, index, array) => {
-        return /* @__PURE__ */ import_react15.default.createElement(
+      /* @__PURE__ */ import_react16.default.createElement(StateInspectorDisclosureRowInner, { style: { flex: "0 0 auto" } }, connectedUsers?.filter((user) => showUserDetails || !user.inactive).map((user, index, array) => {
+        return /* @__PURE__ */ import_react16.default.createElement(
           StateInspectorRow,
           {
             key: user.connectionId,
             colorScheme,
             variant: user.connectionId === connectionId ? "up" : void 0,
-            bordered: index !== array.length - 1
+            bordered: index !== array.length - 1,
+            style: {
+              opacity: user.inactive ? 0.5 : 1
+            }
           },
-          user.image && /* @__PURE__ */ import_react15.default.createElement(
+          user.image && /* @__PURE__ */ import_react16.default.createElement(
             "img",
             {
               src: user.image,
@@ -6595,9 +6666,9 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
               }
             }
           ),
-          showUserDetails ? /* @__PURE__ */ import_react15.default.createElement(import_react_inspector7.ObjectInspector, { data: user, theme }) : user.name
+          showUserDetails ? /* @__PURE__ */ import_react16.default.createElement(import_react_inspector7.ObjectInspector, { data: user, theme }) : user.name
         );
-      }), !connectedUsers && /* @__PURE__ */ import_react15.default.createElement(
+      }), !connectedUsers && /* @__PURE__ */ import_react16.default.createElement(
         "div",
         {
           style: {
@@ -6608,13 +6679,13 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react15.default.createElement("span", null, "No connected users")
+        /* @__PURE__ */ import_react16.default.createElement("span", null, "No connected users")
       ))
     ),
-    /* @__PURE__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       StateInspectorDisclosureSection,
       {
-        title: /* @__PURE__ */ import_react15.default.createElement(StateInspectorTitleLabel, null, "Data", /* @__PURE__ */ import_react15.default.createElement(
+        title: /* @__PURE__ */ import_react16.default.createElement(StateInspectorTitleLabel, null, "Data", /* @__PURE__ */ import_react16.default.createElement(
           ColoredDot,
           {
             type: multipeerStateInitialized ? "success" : "error"
@@ -6623,7 +6694,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         colorScheme,
         setOpen: setShowData,
         open: showData,
-        right: /* @__PURE__ */ import_react15.default.createElement(
+        right: /* @__PURE__ */ import_react16.default.createElement(
           "span",
           {
             style: {
@@ -6631,9 +6702,9 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
               gap: "12px"
             }
           },
-          /* @__PURE__ */ import_react15.default.createElement(StateInspectorButton, { theme, onClick: handleImportAll }, "Import"),
-          /* @__PURE__ */ import_react15.default.createElement(StateInspectorButton, { theme, onClick: handleExportAll }, "Export"),
-          /* @__PURE__ */ import_react15.default.createElement(
+          /* @__PURE__ */ import_react16.default.createElement(StateInspectorButton, { theme, onClick: handleImportAll }, "Import"),
+          /* @__PURE__ */ import_react16.default.createElement(StateInspectorButton, { theme, onClick: handleExportAll }, "Export"),
+          /* @__PURE__ */ import_react16.default.createElement(
             StateInspectorButton,
             {
               theme,
@@ -6645,14 +6716,14 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
           )
         )
       },
-      /* @__PURE__ */ import_react15.default.createElement(StateInspectorDisclosureRowInner, null, /* @__PURE__ */ import_react15.default.createElement(StateInspectorRow, { colorScheme }, /* @__PURE__ */ import_react15.default.createElement(
+      /* @__PURE__ */ import_react16.default.createElement(StateInspectorDisclosureRowInner, null, /* @__PURE__ */ import_react16.default.createElement(StateInspectorRow, { colorScheme }, /* @__PURE__ */ import_react16.default.createElement(
         import_react_inspector7.ObjectInspector,
         {
           name: multiplayerStateManager.schema ? "state" : void 0,
           data: state,
           theme
         }
-      )), multiplayerStateManager.schema && /* @__PURE__ */ import_react15.default.createElement(StateInspectorRow, { colorScheme }, /* @__PURE__ */ import_react15.default.createElement(
+      )), multiplayerStateManager.schema && /* @__PURE__ */ import_react16.default.createElement(StateInspectorRow, { colorScheme }, /* @__PURE__ */ import_react16.default.createElement(
         import_react_inspector7.ObjectInspector,
         {
           name: "schema",
@@ -6661,7 +6732,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         }
       )))
     ),
-    /* @__PURE__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       HistorySection,
       {
         showHistory,
@@ -6671,14 +6742,14 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         multiplayerStateManager
       }
     ),
-    /* @__PURE__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       StateInspectorDisclosureSection,
       {
         open: showAssets,
         setOpen: setShowAssets,
-        title: /* @__PURE__ */ import_react15.default.createElement(StateInspectorTitleLabel, null, "Assets (", assets.length, ")", /* @__PURE__ */ import_react15.default.createElement(ColoredDot, { type: assetsInitialized ? "success" : "error" })),
+        title: /* @__PURE__ */ import_react16.default.createElement(StateInspectorTitleLabel, null, "Assets (", assets.length, ")", /* @__PURE__ */ import_react16.default.createElement(ColoredDot, { type: assetsInitialized ? "success" : "error" })),
         colorScheme,
-        right: /* @__PURE__ */ import_react15.default.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react15.default.createElement(
+        right: /* @__PURE__ */ import_react16.default.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react16.default.createElement(
           StateInspectorButton,
           {
             theme,
@@ -6693,7 +6764,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             }
           },
           "Delete all"
-        ), /* @__PURE__ */ import_react15.default.createElement(
+        ), /* @__PURE__ */ import_react16.default.createElement(
           StateInspectorButton,
           {
             theme,
@@ -6706,7 +6777,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             }
           },
           "Reload"
-        ), /* @__PURE__ */ import_react15.default.createElement(
+        ), /* @__PURE__ */ import_react16.default.createElement(
           StateInspectorButton,
           {
             theme,
@@ -6730,14 +6801,14 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
           "Upload"
         ))
       },
-      /* @__PURE__ */ import_react15.default.createElement(StateInspectorDisclosureRowInner, null, assets.map((asset) => /* @__PURE__ */ import_react15.default.createElement(StateInspectorRow, { key: asset.id, colorScheme }, /* @__PURE__ */ import_react15.default.createElement(
+      /* @__PURE__ */ import_react16.default.createElement(StateInspectorDisclosureRowInner, null, assets.map((asset) => /* @__PURE__ */ import_react16.default.createElement(StateInspectorRow, { key: asset.id, colorScheme }, /* @__PURE__ */ import_react16.default.createElement(
         import_react_inspector7.ObjectInspector,
         {
           name: asset.id,
           data: truncateAsset(asset),
           theme
         }
-      ), /* @__PURE__ */ import_react15.default.createElement(
+      ), /* @__PURE__ */ import_react16.default.createElement(
         StateInspectorButton,
         {
           theme,
@@ -6746,14 +6817,14 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         "Delete"
       ))))
     ),
-    advanced && /* @__PURE__ */ import_react15.default.createElement(
+    advanced && /* @__PURE__ */ import_react16.default.createElement(
       StateInspectorDisclosureSection,
       {
-        title: /* @__PURE__ */ import_react15.default.createElement(StateInspectorTitleLabel, null, "Resources (", resources.length, ")", /* @__PURE__ */ import_react15.default.createElement(ColoredDot, { type: resourcesInitialized ? "success" : "error" })),
+        title: /* @__PURE__ */ import_react16.default.createElement(StateInspectorTitleLabel, null, "Resources (", resources.length, ")", /* @__PURE__ */ import_react16.default.createElement(ColoredDot, { type: resourcesInitialized ? "success" : "error" })),
         colorScheme,
         open: showResources,
         setOpen: setShowResources,
-        right: /* @__PURE__ */ import_react15.default.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react15.default.createElement(
+        right: /* @__PURE__ */ import_react16.default.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react16.default.createElement(
           StateInspectorButton,
           {
             theme,
@@ -6768,7 +6839,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             }
           },
           "Delete all"
-        ), /* @__PURE__ */ import_react15.default.createElement(
+        ), /* @__PURE__ */ import_react16.default.createElement(
           StateInspectorButton,
           {
             theme,
@@ -6781,7 +6852,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             }
           },
           "Create Directory"
-        ), /* @__PURE__ */ import_react15.default.createElement(
+        ), /* @__PURE__ */ import_react16.default.createElement(
           StateInspectorButton,
           {
             theme,
@@ -6801,21 +6872,21 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
           "Create Asset"
         ))
       },
-      /* @__PURE__ */ import_react15.default.createElement(StateInspectorDisclosureRowInner, null, resources?.map((resource) => /* @__PURE__ */ import_react15.default.createElement(StateInspectorRow, { key: resource.id, colorScheme }, /* @__PURE__ */ import_react15.default.createElement(
+      /* @__PURE__ */ import_react16.default.createElement(StateInspectorDisclosureRowInner, null, resources?.map((resource) => /* @__PURE__ */ import_react16.default.createElement(StateInspectorRow, { key: resource.id, colorScheme }, /* @__PURE__ */ import_react16.default.createElement(
         import_react_inspector7.ObjectInspector,
         {
           name: resource.path,
           data: resource,
           theme
         }
-      ), /* @__PURE__ */ import_react15.default.createElement("div", { style: { display: "flex", gap: "4px" } }, /* @__PURE__ */ import_react15.default.createElement(
+      ), /* @__PURE__ */ import_react16.default.createElement("div", { style: { display: "flex", gap: "4px" } }, /* @__PURE__ */ import_react16.default.createElement(
         StateInspectorButton,
         {
           theme,
           onClick: () => resourceManager.deleteResource({ id: resource.id })
         },
         "Delete"
-      ), /* @__PURE__ */ import_react15.default.createElement(
+      ), /* @__PURE__ */ import_react16.default.createElement(
         StateInspectorButton,
         {
           theme,
@@ -6828,14 +6899,14 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         "Rename"
       )))))
     ),
-    advanced && /* @__PURE__ */ import_react15.default.createElement(
+    advanced && /* @__PURE__ */ import_react16.default.createElement(
       StateInspectorDisclosureSection,
       {
-        title: /* @__PURE__ */ import_react15.default.createElement(StateInspectorTitleLabel, null, "Secrets", /* @__PURE__ */ import_react15.default.createElement(ColoredDot, { type: secretsInitialized ? "success" : "error" })),
+        title: /* @__PURE__ */ import_react16.default.createElement(StateInspectorTitleLabel, null, "Secrets", /* @__PURE__ */ import_react16.default.createElement(ColoredDot, { type: secretsInitialized ? "success" : "error" })),
         colorScheme,
         open: showSecrets,
         setOpen: setShowSecrets,
-        right: /* @__PURE__ */ import_react15.default.createElement(
+        right: /* @__PURE__ */ import_react16.default.createElement(
           StateInspectorButton,
           {
             theme,
@@ -6850,7 +6921,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
           "Create"
         )
       },
-      /* @__PURE__ */ import_react15.default.createElement(StateInspectorDisclosureRowInner, null, secrets.map((secret) => /* @__PURE__ */ import_react15.default.createElement(StateInspectorRow, { key: secret.id, colorScheme }, /* @__PURE__ */ import_react15.default.createElement(import_react_inspector7.ObjectInspector, { data: secret, theme }), /* @__PURE__ */ import_react15.default.createElement(
+      /* @__PURE__ */ import_react16.default.createElement(StateInspectorDisclosureRowInner, null, secrets.map((secret) => /* @__PURE__ */ import_react16.default.createElement(StateInspectorRow, { key: secret.id, colorScheme }, /* @__PURE__ */ import_react16.default.createElement(import_react_inspector7.ObjectInspector, { data: secret, theme }), /* @__PURE__ */ import_react16.default.createElement(
         StateInspectorButton,
         {
           theme,
@@ -6859,15 +6930,15 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         "Delete"
       ))))
     ),
-    advanced && /* @__PURE__ */ import_react15.default.createElement(
+    advanced && /* @__PURE__ */ import_react16.default.createElement(
       StateInspectorDisclosureSection,
       {
         open: showInputs,
         setOpen: setShowInputs,
-        title: /* @__PURE__ */ import_react15.default.createElement(StateInspectorTitleLabel, null, "Inputs", /* @__PURE__ */ import_react15.default.createElement(ColoredDot, { type: inputsInitialized ? "success" : "error" })),
+        title: /* @__PURE__ */ import_react16.default.createElement(StateInspectorTitleLabel, null, "Inputs", /* @__PURE__ */ import_react16.default.createElement(ColoredDot, { type: inputsInitialized ? "success" : "error" })),
         colorScheme
       },
-      /* @__PURE__ */ import_react15.default.createElement(StateInspectorDisclosureRowInner, null, inputs?.map((input) => /* @__PURE__ */ import_react15.default.createElement(StateInspectorRow, { key: input.id, colorScheme }, /* @__PURE__ */ import_react15.default.createElement(import_react_inspector7.ObjectInspector, { data: input, theme }))), !inputs?.length && /* @__PURE__ */ import_react15.default.createElement(
+      /* @__PURE__ */ import_react16.default.createElement(StateInspectorDisclosureRowInner, null, inputs?.map((input) => /* @__PURE__ */ import_react16.default.createElement(StateInspectorRow, { key: input.id, colorScheme }, /* @__PURE__ */ import_react16.default.createElement(import_react_inspector7.ObjectInspector, { data: input, theme }))), !inputs?.length && /* @__PURE__ */ import_react16.default.createElement(
         "div",
         {
           style: {
@@ -6878,15 +6949,15 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react15.default.createElement("span", null, "No inputs")
+        /* @__PURE__ */ import_react16.default.createElement("span", null, "No inputs")
       ))
     ),
-    advanced && /* @__PURE__ */ import_react15.default.createElement(
+    advanced && /* @__PURE__ */ import_react16.default.createElement(
       StateInspectorDisclosureSection,
       {
         open: showOutputTransforms,
         setOpen: setShowOutputTransforms,
-        title: /* @__PURE__ */ import_react15.default.createElement(StateInspectorTitleLabel, null, "Output Transforms", /* @__PURE__ */ import_react15.default.createElement(
+        title: /* @__PURE__ */ import_react16.default.createElement(StateInspectorTitleLabel, null, "Output Transforms", /* @__PURE__ */ import_react16.default.createElement(
           ColoredDot,
           {
             type: outputTransformsInitialized ? "success" : "error"
@@ -6894,7 +6965,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         )),
         colorScheme
       },
-      /* @__PURE__ */ import_react15.default.createElement(StateInspectorDisclosureRowInner, null, outputTransforms?.map((transform) => /* @__PURE__ */ import_react15.default.createElement(StateInspectorRow, { key: transform.id, colorScheme }, /* @__PURE__ */ import_react15.default.createElement(import_react_inspector7.ObjectInspector, { data: transform, theme }))), !outputTransforms?.length && /* @__PURE__ */ import_react15.default.createElement(
+      /* @__PURE__ */ import_react16.default.createElement(StateInspectorDisclosureRowInner, null, outputTransforms?.map((transform) => /* @__PURE__ */ import_react16.default.createElement(StateInspectorRow, { key: transform.id, colorScheme }, /* @__PURE__ */ import_react16.default.createElement(import_react_inspector7.ObjectInspector, { data: transform, theme }))), !outputTransforms?.length && /* @__PURE__ */ import_react16.default.createElement(
         "div",
         {
           style: {
@@ -6905,10 +6976,10 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react15.default.createElement("span", null, "No output transforms")
+        /* @__PURE__ */ import_react16.default.createElement("span", null, "No output transforms")
       ))
     ),
-    advanced && /* @__PURE__ */ import_react15.default.createElement(
+    advanced && /* @__PURE__ */ import_react16.default.createElement(
       StateInspectorDisclosureSection,
       {
         title: "Tasks",
@@ -6916,7 +6987,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         open: showTasks,
         setOpen: setShowTasks
       },
-      /* @__PURE__ */ import_react15.default.createElement(StateInspectorDisclosureRowInner, null, tasks?.map((task) => /* @__PURE__ */ import_react15.default.createElement(
+      /* @__PURE__ */ import_react16.default.createElement(StateInspectorDisclosureRowInner, null, tasks?.map((task) => /* @__PURE__ */ import_react16.default.createElement(
         StateInspectorRow,
         {
           key: task.id,
@@ -6925,7 +6996,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             backgroundColor: task.status === "done" ? "rgba(0,255,0,0.2)" : task.status === "error" ? "rgba(255,0,0,0.2)" : void 0
           }
         },
-        /* @__PURE__ */ import_react15.default.createElement(
+        /* @__PURE__ */ import_react16.default.createElement(
           import_react_inspector7.ObjectInspector,
           {
             name: task.name,
@@ -6935,7 +7006,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         )
       )))
     ),
-    /* @__PURE__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       StateInspectorDisclosureSection,
       {
         open: showShared,
@@ -6943,7 +7014,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         title: "Shared Connection Data",
         colorScheme
       },
-      /* @__PURE__ */ import_react15.default.createElement(StateInspectorDisclosureRowInner, null, Object.entries(shared).map(([key, value]) => /* @__PURE__ */ import_react15.default.createElement(StateInspectorRow, { key, colorScheme }, /* @__PURE__ */ import_react15.default.createElement(
+      /* @__PURE__ */ import_react16.default.createElement(StateInspectorDisclosureRowInner, null, Object.entries(shared).map(([key, value]) => /* @__PURE__ */ import_react16.default.createElement(StateInspectorRow, { key, colorScheme }, /* @__PURE__ */ import_react16.default.createElement(
         import_react_inspector7.ObjectInspector,
         {
           name: key,
@@ -6953,7 +7024,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         }
       ))))
     ),
-    /* @__PURE__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       ServerScriptLogsSection,
       {
         colorScheme,
@@ -6965,7 +7036,44 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         containerRef: serverLogsContainerRef
       }
     ),
-    advanced && /* @__PURE__ */ import_react15.default.createElement(
+    showSimulationLogsSection && /* @__PURE__ */ import_react16.default.createElement(
+      ServerScriptLogsSection,
+      {
+        title: "Server Script Simulation Logs",
+        colorScheme,
+        showLogs: showServerSimulationLogs,
+        setShowLogs: setShowServerSimulationLogs,
+        logs: visibleServerSimulationLogs,
+        paused: serverSimulationLogsPaused,
+        onTogglePaused: toggleServerSimulationLogsPaused,
+        containerRef: serverSimulationLogsContainerRef
+      }
+    ),
+    /* @__PURE__ */ import_react16.default.createElement(
+      StateInspectorDisclosureSection,
+      {
+        open: showSimulation,
+        setOpen: setShowSimulation,
+        title: "Server Simulation",
+        colorScheme
+      },
+      /* @__PURE__ */ import_react16.default.createElement(StateInspectorDisclosureRowInner, null, /* @__PURE__ */ import_react16.default.createElement(StateInspectorRow, { colorScheme }, /* @__PURE__ */ import_react16.default.createElement(
+        import_react_inspector7.ObjectInspector,
+        {
+          name: "status",
+          data: simulationDiagnostics ?? {
+            simulateLocally: false,
+            simulatorActive: false,
+            clockSkewMs: 0,
+            invocations: [],
+            pendingPredictions: []
+          },
+          theme,
+          expandLevel: 2
+        }
+      )))
+    ),
+    advanced && /* @__PURE__ */ import_react16.default.createElement(
       ActivityEventsSection,
       {
         colorScheme,
@@ -6975,10 +7083,12 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         activityEventsManager
       }
     ),
-    /* @__PURE__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       EventsSection,
       {
-        connectionEvents,
+        connectionEvents: visibleConnectionEvents,
+        paused: connectionEventsPaused,
+        onTogglePaused: toggleConnectionEventsPaused,
         colorScheme,
         eventsContainerRef,
         showEvents,
@@ -7021,7 +7131,7 @@ function useStateInspector({
   colorScheme,
   anchor
 }) {
-  const [root, setRoot] = import_react16.default.useState(null);
+  const [root, setRoot] = import_react17.default.useState(null);
   (0, import_react_utils2.useIsomorphicLayoutEffect)(() => {
     if (disabled) return;
     const { root: root2, unmount } = createStateInspectorRoot();
@@ -7031,7 +7141,7 @@ function useStateInspector({
   (0, import_react_utils2.useIsomorphicLayoutEffect)(() => {
     if (!root) return;
     root.render(
-      /* @__PURE__ */ import_react16.default.createElement(
+      /* @__PURE__ */ import_react17.default.createElement(
         StateInspector,
         {
           colorScheme,
@@ -7046,18 +7156,18 @@ function useStateInspector({
 
 // src/hooks.ts
 function useManagedState(createInitialState, options) {
-  const [stateManager] = (0, import_react17.useState)(
+  const [stateManager] = (0, import_react18.useState)(
     () => new import_state_manager2.StateManager(createInitialState(), options)
   );
-  const getSnapshot = (0, import_react17.useCallback)(() => {
+  const getSnapshot = (0, import_react18.useCallback)(() => {
     return stateManager.getState();
   }, [stateManager]);
-  const state = (0, import_react17.useSyncExternalStore)(
+  const state = (0, import_react18.useSyncExternalStore)(
     stateManager.addListener,
     getSnapshot,
     getSnapshot
   );
-  const setState = (0, import_react17.useCallback)(
+  const setState = (0, import_react18.useCallback)(
     (...args) => {
       const [metadata, action] = args.length === 1 ? [void 0, args[0]] : args;
       if (metadata === void 0) {
@@ -7093,7 +7203,7 @@ function useManagedState(createInitialState, options) {
   return [state, setState, stateManager];
 }
 function useManagedHistory(stateManager) {
-  return (0, import_react17.useSyncExternalStore)(
+  return (0, import_react18.useSyncExternalStore)(
     stateManager.historyEmittor.addListener,
     stateManager.getHistorySnapshot,
     stateManager.getHistorySnapshot
@@ -7104,7 +7214,7 @@ function useBindNoyaManager(noyaManager, options) {
     noyaManager.multiplayerStateManager.optimisticState$
   );
   const assets = useObservable(noyaManager.assetManager.assets$);
-  const extras = (0, import_react17.useMemo)(() => {
+  const extras = (0, import_react18.useMemo)(() => {
     return {
       noyaManager,
       taskManager: noyaManager.taskManager,
@@ -7123,8 +7233,8 @@ function useBindNoyaManager(noyaManager, options) {
       assets
     };
   }, [noyaManager, assets]);
-  const syncRef = (0, import_react17.useRef)(options?.sync);
-  (0, import_react17.useEffect)(() => {
+  const syncRef = (0, import_react18.useRef)(options?.sync);
+  (0, import_react18.useEffect)(() => {
     if (syncRef.current) {
       return syncRef.current({ noyaManager });
     }
@@ -7144,7 +7254,7 @@ function useMultiplayerState(initialState, options) {
     inspector,
     ...rest
   } = options ?? {};
-  const [noyaManager] = (0, import_react17.useState)(
+  const [noyaManager] = (0, import_react18.useState)(
     () => new import_state_manager2.NoyaManager(initialState, rest)
   );
   return useBindNoyaManager(noyaManager, {
@@ -7154,13 +7264,13 @@ function useMultiplayerState(initialState, options) {
 }
 function useErrorOverlay(noyaManager) {
   const unrecoverableError = useObservable(noyaManager.unrecoverableError);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!unrecoverableError) return;
     const el = document.createElement("div");
     el.id = "noya-multiplayer-react-error-overlay";
     document.body.appendChild(el);
     const root = (0, import_client2.createRoot)(el);
-    root.render((0, import_react17.createElement)(ErrorOverlay, { error: unrecoverableError }));
+    root.render((0, import_react18.createElement)(ErrorOverlay, { error: unrecoverableError }));
     return () => {
       root.unmount();
       el.remove();
@@ -7250,12 +7360,12 @@ function useNoyaStateInternal(...args) {
       isDemo,
       access
     }
-  ] = (0, import_react18.useState)(() => {
+  ] = (0, import_react19.useState)(() => {
     return getAppData(initialState, options?.schema, {
       overrideExistingState: options?.overrideExistingState
     });
   });
-  const basePolicyAuthContext = (0, import_react18.useMemo)(() => {
+  const basePolicyAuthContext = (0, import_react19.useMemo)(() => {
     if (!access && userId === void 0) return void 0;
     const context = {};
     if (access) {
@@ -7266,7 +7376,7 @@ function useNoyaStateInternal(...args) {
     }
     return context;
   }, [access, userId]);
-  const sync = (0, import_react18.useMemo)(() => {
+  const sync = (0, import_react19.useMemo)(() => {
     return getSyncAdapter({
       multiplayerUrl,
       offlineStorageKey: options?.offlineStorageKey,
@@ -7279,16 +7389,16 @@ function useNoyaStateInternal(...args) {
     options?.debug,
     basePolicyAuthContext
   ]);
-  const [noyaManager] = (0, import_react18.useState)(
+  const [noyaManager] = (0, import_react19.useState)(
     () => new import_state_manager3.NoyaManager(noyaAppInitialState, options)
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!userId) return;
     noyaManager.sharedConnectionDataManager.setCurrentConnectionId(userId);
     noyaManager.userManager.setCurrentConnectionId(userId);
     noyaManager.userManager.setCurrentUserId(userId);
   }, [noyaManager, userId]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!basePolicyAuthContext) return;
     noyaManager.multiplayerStateManager.setPolicyAuthContext(
       basePolicyAuthContext
@@ -7299,7 +7409,7 @@ function useNoyaStateInternal(...args) {
     sync: options?.sync ?? sync
   });
   const [, , extras] = result;
-  const mergedExtras = (0, import_react18.useMemo)(() => {
+  const mergedExtras = (0, import_react19.useMemo)(() => {
     return { ...extras, theme, viewType, isDemo };
   }, [extras, theme, viewType, isDemo]);
   return [result[0], result[1], mergedExtras];
@@ -7307,7 +7417,7 @@ function useNoyaStateInternal(...args) {
 
 // src/singleton.tsx
 var import_state_manager4 = require("@noya-app/state-manager");
-var import_react19 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var noyaManagerSingleton;
 var noyaSingletonBindings;
 function initializeNoyaSingleton(options) {
@@ -7324,7 +7434,6 @@ function initializeNoyaSingleton(options) {
     viewType,
     offlineStorageKey,
     multiplayerUrl,
-    serverScripts,
     ...managerOptions
   } = options ?? {};
   const appData = getAppData(
@@ -7351,7 +7460,7 @@ function initializeNoyaSingleton(options) {
     multiplayerUrl: multiplayerUrl ?? appData.multiplayerUrl,
     offlineStorageKey,
     debug: managerOptions?.debug,
-    serverScripts,
+    serverScripts: managerOptions?.serverScripts,
     policyAuthContext
   });
   try {
@@ -7365,7 +7474,7 @@ function initializeNoyaSingleton(options) {
   if (resolvedInspector) {
     const { root } = createStateInspectorRoot();
     root.render(
-      /* @__PURE__ */ import_react19.default.createElement(
+      /* @__PURE__ */ import_react20.default.createElement(
         StateInspector,
         {
           noyaManager: noyaManagerSingleton,
@@ -7466,9 +7575,9 @@ function buildResourcePatchPayload({
   }
   return patch;
 }
-var AnyNoyaStateContext = (0, import_react20.createContext)(void 0);
+var AnyNoyaStateContext = (0, import_react21.createContext)(void 0);
 function useAnyNoyaStateContext() {
-  const value = (0, import_react20.useContext)(AnyNoyaStateContext);
+  const value = (0, import_react21.useContext)(AnyNoyaStateContext);
   if (!value) {
     const bindings = getNoyaSingletonBindings();
     if (bindings) {
@@ -7502,7 +7611,7 @@ function useAssets() {
 }
 function useAsset(id) {
   const { noyaManager } = useAnyNoyaStateContext();
-  const observable = (0, import_react20.useMemo)(
+  const observable = (0, import_react21.useMemo)(
     () => noyaManager.assetManager.assets$.map(
       (assets) => assets.find((a) => a.stableId === id) ?? assets.find((a) => a.id === id)
     ),
@@ -7513,7 +7622,7 @@ function useAsset(id) {
 function useAssetManager() {
   const { noyaManager } = useAnyNoyaStateContext();
   const isInitialized = useObservable(noyaManager.assetManager.isInitialized$);
-  return (0, import_react20.useMemo)(
+  return (0, import_react21.useMemo)(
     () => ({
       create: noyaManager.assetManager.create,
       delete: noyaManager.assetManager.delete,
@@ -7538,7 +7647,7 @@ function useSecret(name) {
   const { noyaManager } = useAnyNoyaStateContext();
   return useObservable(
     noyaManager.secretManager.secrets$,
-    (0, import_react20.useCallback)((secrets) => secrets.find((s) => s.name === name), [name])
+    (0, import_react21.useCallback)((secrets) => secrets.find((s) => s.name === name), [name])
   );
 }
 function useInputs() {
@@ -7556,7 +7665,7 @@ function useIOManager() {
 function usePublish(callback) {
   const { noyaManager } = useAnyNoyaStateContext();
   const stableCallback = (0, import_react_utils3.useStableCallback)(callback);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     noyaManager.publishingManager.setPublishingEnabled(true);
     noyaManager.publishingManager.getFilesToPublish = stableCallback;
     return () => {
@@ -7567,7 +7676,7 @@ function usePublish(callback) {
 }
 function useIsInitialized() {
   const { noyaManager, viewType } = useAnyNoyaStateContext();
-  const isInitializedObservable = (0, import_react20.useMemo)(
+  const isInitializedObservable = (0, import_react21.useMemo)(
     () => import_observable.Observable.combine(
       [
         ...viewType === "preview" ? [] : [noyaManager.multiplayerStateManager.isInitialized$],
@@ -7584,29 +7693,33 @@ function usePipelineManager() {
   const { noyaManager } = useAnyNoyaStateContext();
   return noyaManager.pipelineManager;
 }
-function useUserManager() {
+function useNoyaUserManager() {
   const { noyaManager } = useAnyNoyaStateContext();
   return noyaManager.userManager;
 }
-function useConnectedUsers() {
-  const userManager = useUserManager();
-  return useObservable(userManager?.connectedUsers$);
+function useNoyaUsers() {
+  const userManager = useNoyaUserManager();
+  return useObservable(userManager?.allUsers$);
 }
-function useConnectedUser(userId) {
-  const userManager = useUserManager();
+function useNoyaUser(id) {
+  const userManager = useNoyaUserManager();
   return useObservable(
-    userManager?.connectedUsers$,
-    (0, import_react20.useCallback)(
-      (users) => {
-        return users.find((user) => {
-          const prefix = user.connectionId.slice(0, 8);
-          return userId?.includes(prefix);
-        });
-      },
-      [userId]
-    )
+    userManager?.allUsers$,
+    (0, import_react21.useCallback)((users) => (0, import_state_manager5.findNoyaUser)(users, id), [id])
   );
 }
+function useNoyaActiveUsers() {
+  const userManager = useNoyaUserManager();
+  return useObservable(userManager?.connectedUsers$);
+}
+function useNoyaCurrentUser() {
+  const userManager = useNoyaUserManager();
+  return useObservable(userManager?.currentUser$);
+}
+function useNoyaCurrentUserId() {
+  const userManager = useNoyaUserManager();
+  return useObservable(userManager?.currentId$);
+}
 function useAnySharedConnectionData() {
   const { noyaManager } = useAnyNoyaStateContext();
   return noyaManager.sharedConnectionDataManager;
@@ -7615,26 +7728,6 @@ function useEnqueueInput() {
   const { noyaManager } = useAnyNoyaStateContext();
   return noyaManager.enqueueInput;
 }
-function useNoyaUser() {
-  const userManager = useUserManager();
-  return useObservable(userManager?.currentUser$);
-}
-function useNoyaId() {
-  const userManager = useUserManager();
-  return useObservable(userManager?.currentId$);
-}
-function useNoyaUserId() {
-  const userManager = useUserManager();
-  return useObservable(userManager?.currentUserId$);
-}
-function useNoyaConnectionId() {
-  const userManager = useUserManager();
-  return useObservable(userManager?.currentConnectionId$);
-}
-function useNoyaClientId() {
-  const userManager = useUserManager();
-  return useObservable(userManager?.currentClientId$);
-}
 function useIsProcessing() {
   const { noyaManager } = useAnyNoyaStateContext();
   return useObservable(noyaManager.isProcessing$);
@@ -7662,7 +7755,7 @@ function useNoyaTranscriptionManager() {
 }
 function useNoyaAssetTranscription(assetId, options) {
   const transcriptionManager = useNoyaTranscriptionManager();
-  const observable = (0, import_react20.useMemo)(() => {
+  const observable = (0, import_react21.useMemo)(() => {
     if (!assetId) return void 0;
     return transcriptionManager.getAssetTranscription$(assetId, {
       endpoint: options?.endpoint,
@@ -7688,13 +7781,13 @@ function useResources({
   const assetManager = useAssetManager();
   const resourceMap = useObservable(
     resourceManager.optimisticResources$,
-    (0, import_react20.useCallback)((resources) => {
+    (0, import_react21.useCallback)((resources) => {
       return Object.fromEntries(
         resources.map((resource) => [resource.path, resource])
       );
     }, [])
   );
-  const setResourceMap = (0, import_react20.useCallback)(
+  const setResourceMap = (0, import_react21.useCallback)(
     async (action) => {
       const newResourceMap = action instanceof Function ? action(resourceMap) : action;
       const { addedResources, removedResources, modifiedResources } = diffResourceMaps(resourceMap, newResourceMap, "id");
@@ -7728,9 +7821,9 @@ function useActivityEvents(streamFilter) {
   );
 }
 function useActivityEventsForManager(streamFilter, activityEventsManager) {
-  const [streamId, setStreamId] = (0, import_react20.useState)(void 0);
+  const [streamId, setStreamId] = (0, import_react21.useState)(void 0);
   const stableStreamFilter = (0, import_react_utils3.useJsonMemo)(streamFilter);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!stableStreamFilter) return;
     const streamId2 = activityEventsManager.subscribe(stableStreamFilter);
     setStreamId(streamId2);
@@ -7761,7 +7854,7 @@ function createNoyaContext({
     children,
     contextValue
   }) {
-    return /* @__PURE__ */ import_react20.default.createElement(AnyNoyaStateContext.Provider, { value: contextValue }, children);
+    return /* @__PURE__ */ import_react21.default.createElement(AnyNoyaStateContext.Provider, { value: contextValue }, children);
   }
   function NoyaStateProvider({
     children,
@@ -7776,7 +7869,7 @@ function createNoyaContext({
       safeEval,
       ...options
     });
-    const contextValue = (0, import_react20.useMemo)(
+    const contextValue = (0, import_react21.useMemo)(
       () => ({
         noyaManager,
         theme,
@@ -7784,12 +7877,12 @@ function createNoyaContext({
       }),
       [noyaManager, theme, viewType]
     );
-    return /* @__PURE__ */ import_react20.default.createElement(NoyaContextProvider, { contextValue }, options.fallback !== void 0 ? /* @__PURE__ */ import_react20.default.createElement(FallbackUntilInitialized, { fallback: options.fallback }, children) : children);
+    return /* @__PURE__ */ import_react21.default.createElement(NoyaContextProvider, { contextValue }, options.fallback !== void 0 ? /* @__PURE__ */ import_react21.default.createElement(FallbackUntilInitialized, { fallback: options.fallback }, children) : children);
   }
   function useValue(path2, options) {
     const { noyaManager } = useAnyNoyaStateContext();
     let actualPath = typeof path2 === "function" || !path2 ? "" : path2;
-    const mappedObservable = (0, import_react20.useMemo)(() => {
+    const mappedObservable = (0, import_react21.useMemo)(() => {
       if (typeof path2 === "function") {
         return noyaManager.multiplayerStateManager.optimisticState$.map(path2, {
           isEqual: options?.isEqual
@@ -7802,7 +7895,7 @@ function createNoyaContext({
   }
   function useSetValue(path2) {
     const { noyaManager } = useAnyNoyaStateContext();
-    const setValue = (0, import_react20.useCallback)(
+    const setValue = (0, import_react21.useCallback)(
       (...args) => {
         const [metadata, value] = args.length === 2 ? args : [{}, args[0]];
         noyaManager.multiplayerStateManager.setStateAtPath(
@@ -7838,7 +7931,7 @@ function createNoyaContext({
   }
   function useSetLeftMenuItems(leftMenuItems) {
     const { menuManager } = useNoyaManager();
-    (0, import_react20.useEffect)(() => {
+    (0, import_react21.useEffect)(() => {
       if (leftMenuItems) {
         menuManager.setLeftMenuItems(leftMenuItems);
       }
@@ -7850,7 +7943,7 @@ function createNoyaContext({
   }
   function useSetRightMenuItems(rightMenuItems) {
     const { menuManager } = useNoyaManager();
-    (0, import_react20.useEffect)(() => {
+    (0, import_react21.useEffect)(() => {
       if (rightMenuItems) {
         menuManager.setRightMenuItems(rightMenuItems);
       }
@@ -7858,19 +7951,19 @@ function createNoyaContext({
   }
   function useHandleMenuItem(callback) {
     const { menuManager } = useNoyaManager();
-    (0, import_react20.useEffect)(() => {
+    (0, import_react21.useEffect)(() => {
       return menuManager.addListener(callback);
     }, [menuManager, callback]);
   }
   function useOnSelectMenuItemCallback() {
     const { menuManager } = useNoyaManager();
-    return (0, import_react20.useCallback)((type) => menuManager.emit(type), [menuManager]);
+    return (0, import_react21.useCallback)((type) => menuManager.emit(type), [menuManager]);
   }
   function useMenu(options) {
     const { leftMenuItems, rightMenuItems, onSelectMenuItem } = options;
     useSetLeftMenuItems(leftMenuItems);
     useSetRightMenuItems(rightMenuItems);
-    const noop = (0, import_react20.useCallback)(() => {
+    const noop = (0, import_react21.useCallback)(() => {
     }, []);
     useHandleMenuItem(onSelectMenuItem ?? noop);
   }
@@ -7897,7 +7990,7 @@ function createNoyaContext({
 // src/ai.ts
 function useRegisterAITool(tool) {
   const aiManager = useAIManager();
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     return aiManager.registerTool(tool);
   }, [aiManager, tool]);
 }
@@ -7909,7 +8002,7 @@ function useCallableAITools() {
 // src/components/UserPointersOverlay.tsx
 var import_observable2 = require("@noya-app/observable");
 var import_react_utils4 = require("@noya-app/react-utils");
-var import_react22 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 function shouldShow(hideAfter, updatedAt) {
   return !!updatedAt && Date.now() - updatedAt < hideAfter;
 }
@@ -7919,7 +8012,7 @@ var UserPointerInternal = (0, import_react_utils4.memoGeneric)(function UserPoin
   hideAfter = 5e3,
   renderUserPointer
 }) {
-  const observable = (0, import_react22.useMemo)(() => {
+  const observable = (0, import_react23.useMemo)(() => {
     const metadata$ = sharedConnectionDataManager.metadata$.observePath([user.connectionId]).throttle(50);
     const data$ = sharedConnectionDataManager.data$.observePath([user.connectionId]).throttle(50);
     return import_observable2.Observable.combine([metadata$, data$], ([metadata2, data2]) => {
@@ -7927,10 +8020,10 @@ var UserPointerInternal = (0, import_react_utils4.memoGeneric)(function UserPoin
     });
   }, [sharedConnectionDataManager, user.connectionId]);
   const { metadata, data } = useObservable(observable);
-  const [, setForceUpdate] = (0, import_react22.useState)(0);
+  const [, setForceUpdate] = (0, import_react23.useState)(0);
   const updatedAt = metadata?.updatedAt ?? 0;
   const show = shouldShow(hideAfter, updatedAt);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!show) return;
     const timeoutId = setTimeout(() => {
       setForceUpdate((prev) => prev + 1);
@@ -7954,9 +8047,9 @@ var UserPointersOverlay = (0, import_react_utils4.memoGeneric)(function UserPoin
     sharedConnectionDataManager.currentConnectionId$
   );
   const connectedUsers = useObservable(userManager.connectedUsers$);
-  return /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, connectedUsers.map((user) => {
+  return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, connectedUsers.map((user) => {
     if (user.connectionId === currentConnectionId) return null;
-    return /* @__PURE__ */ import_react22.default.createElement(
+    return /* @__PURE__ */ import_react23.default.createElement(
       UserPointerInternal,
       {
         key: user.connectionId,
@@ -7969,17 +8062,17 @@ var UserPointersOverlay = (0, import_react_utils4.memoGeneric)(function UserPoin
 });
 
 // src/WebSocketConnection.ts
-var import_state_manager5 = require("@noya-app/state-manager");
+var import_state_manager6 = require("@noya-app/state-manager");
 var WebSocketConnection = class {
   constructor(url, options = {}) {
     this.url = url;
     this.options = options;
-    this.ws = new import_state_manager5.ReconnectingWebSocket({
+    this.ws = new import_state_manager6.ReconnectingWebSocket({
       debug: options.debug,
       onopen: this.handleOpen,
       onmessage: this.handleMessage,
       onclose: this.handleClose,
-      activityDetector: new import_state_manager5.UserActivityDetector()
+      activityDetector: new import_state_manager6.UserActivityDetector()
     });
   }
   ws;
@@ -8084,8 +8177,6 @@ var WebSocketConnection = class {
   useBindNoyaManager,
   useCallableAITools,
   useColorScheme,
-  useConnectedUser,
-  useConnectedUsers,
   useEnqueueInput,
   useFileName,
   useFilePropertyManager,
@@ -8096,14 +8187,15 @@ var WebSocketConnection = class {
   useManagedHistory,
   useManagedState,
   useMultiplayerState,
+  useNoyaActiveUsers,
   useNoyaAssetTranscription,
-  useNoyaClientId,
-  useNoyaConnectionId,
-  useNoyaId,
+  useNoyaCurrentUser,
+  useNoyaCurrentUserId,
   useNoyaStateInternal,
   useNoyaTranscriptionManager,
   useNoyaUser,
-  useNoyaUserId,
+  useNoyaUserManager,
+  useNoyaUsers,
   useObservable,
   useOutputTransforms,
   usePipelineManager,
@@ -8116,7 +8208,6 @@ var WebSocketConnection = class {
   useSecrets,
   useSetFileNameState,
   useStateInspector,
-  useUserManager,
   useViewType,
   ...require("@noya-app/state-manager")
 });