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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-multiplayer-react",
-  "version": "0.1.74",
+  "version": "0.1.76",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -11,7 +11,7 @@
     "dev": "npm run build -- --watch"
   },
   "dependencies": {
-    "@noya-app/state-manager": "0.1.59",
+    "@noya-app/state-manager": "0.1.61",
     "@noya-app/emitter": "0.1.0",
     "@noya-app/observable": "0.1.12",
     "@noya-app/task-runner": "0.1.6",

package/src/NoyaStateContext.tsx

@@ -26,6 +26,7 @@ import {
   AssetTranscriptionResult,
   CreateParams,
   ExtractRequestBody,
+  findNoyaUser,
   MultiplayerPatchMetadata,
   MultiplayerStateManager,
   NoyaManager,
@@ -318,39 +319,47 @@ export function usePipelineManager() {
   return noyaManager.pipelineManager;
 }
 
-export function useUserManager() {
+export function useNoyaUserManager() {
   const { noyaManager } = useAnyNoyaStateContext();
   return noyaManager.userManager;
 }
 
-export function useConnectedUsers() {
-  const userManager = useUserManager();
-  return useObservable(userManager?.connectedUsers$);
+export function useNoyaUsers() {
+  const userManager = useNoyaUserManager();
+  return useObservable(userManager?.allUsers$);
 }
 
-export function useConnectedUser(userId?: string | null) {
-  const userManager = useUserManager();
+export function useNoyaUser(id?: string) {
+  const userManager = useNoyaUserManager();
+
   return useObservable(
-    userManager?.connectedUsers$,
-    useCallback(
-      (users) => {
-        return users.find((user) => {
-          const prefix = user.connectionId.slice(0, 8);
-          return userId?.includes(prefix);
-        });
-      },
-      [userId]
-    )
+    userManager?.allUsers$,
+    useCallback((users) => findNoyaUser(users, id), [id])
   );
 }
 
+export function useNoyaActiveUsers() {
+  const userManager = useNoyaUserManager();
+  return useObservable(userManager?.connectedUsers$);
+}
+
+export function useNoyaCurrentUser() {
+  const userManager = useNoyaUserManager();
+  return useObservable(userManager?.currentUser$);
+}
+
+export function useNoyaCurrentUserId() {
+  const userManager = useNoyaUserManager();
+  return useObservable(userManager?.currentId$);
+}
+
 export function useAnySharedConnectionData() {
   const { noyaManager } = useAnyNoyaStateContext();
   return noyaManager.sharedConnectionDataManager;
 }
 
 export function useEnqueueInput<
-  I extends Record<string, any> = Record<string, unknown>
+  I extends Record<string, any> = Record<string, unknown>,
 >() {
   const { noyaManager } = useAnyNoyaStateContext();
   return noyaManager.enqueueInput as NoyaManager<
@@ -362,31 +371,6 @@ export function useEnqueueInput<
   >["enqueueInput"];
 }
 
-export function useNoyaUser() {
-  const userManager = useUserManager();
-  return useObservable(userManager?.currentUser$);
-}
-
-export function useNoyaId() {
-  const userManager = useUserManager();
-  return useObservable(userManager?.currentId$);
-}
-
-export function useNoyaUserId() {
-  const userManager = useUserManager();
-  return useObservable(userManager?.currentUserId$);
-}
-
-export function useNoyaConnectionId() {
-  const userManager = useUserManager();
-  return useObservable(userManager?.currentConnectionId$);
-}
-
-export function useNoyaClientId() {
-  const userManager = useUserManager();
-  return useObservable(userManager?.currentClientId$);
-}
-
 export function useIsProcessing() {
   const { noyaManager } = useAnyNoyaStateContext();
   return useObservable(noyaManager.isProcessing$);

package/src/inspector/StateInspector.tsx

@@ -34,6 +34,7 @@ import { StateInspectorRow } from "./StateInspectorRow";
 import { StateInspectorTitleLabel } from "./StateInspectorTitleLabel";
 import { StateInspectorToggleButton } from "./StateInspectorToggleButton";
 import { useLocalStorageState } from "./useLocalStorageState";
+import { usePausedStream } from "./usePausedStream";
 import { ellipsis, uploadFile } from "./utils";
 
 export type StateInspectorAnchor =
@@ -92,6 +93,7 @@ export const StateInspector = memoGeneric(function StateInspector<
   const eventsContainerRef = React.useRef<HTMLDivElement>(null);
   const activityEventsContainerRef = React.useRef<HTMLDivElement>(null);
   const serverLogsContainerRef = React.useRef<HTMLDivElement>(null);
+  const serverSimulationLogsContainerRef = React.useRef<HTMLDivElement>(null);
 
   const [showInspector, setShowInspector] = useLocalStorageState(
     "noya-multiplayer-react-show-inspector",
@@ -153,34 +155,45 @@ export const StateInspector = 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$);
+  const {
+    visibleItems: visibleConnectionEvents,
+    paused: connectionEventsPaused,
+    togglePaused: toggleConnectionEventsPaused,
+  } = usePausedStream(connectionEvents);
+
   useEffect(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop =
         eventsContainerRef.current.scrollHeight;
     }
-  }, [connectionEvents]);
+  }, [visibleConnectionEvents]);
+
   const serverLogs = useObservable(logManager.logs$);
-  const [serverLogsPaused, setServerLogsPaused] = React.useState(false);
-  const [visibleServerLogs, setVisibleServerLogs] = React.useState(
-    serverLogs ?? []
+  const {
+    visibleItems: visibleServerLogs,
+    paused: serverLogsPaused,
+    togglePaused: toggleServerLogsPaused,
+  } = usePausedStream(serverLogs);
+  const serverSimulationLogs = useObservable(
+    multiplayerStateManager.serverSimulationLogs$
   );
+  const {
+    visibleItems: visibleServerSimulationLogs,
+    paused: serverSimulationLogsPaused,
+    togglePaused: toggleServerSimulationLogsPaused,
+  } = usePausedStream(serverSimulationLogs);
 
-  const toggleServerLogsPaused = useCallback(() => {
-    setServerLogsPaused((value) => {
-      if (!value) {
-        setVisibleServerLogs(serverLogs ?? []);
-      }
-      return !value;
-    });
-  }, [serverLogs]);
-
-  useEffect(() => {
-    if (serverLogsPaused) return;
-
-    setVisibleServerLogs(serverLogs ?? []);
-  }, [serverLogs, serverLogsPaused]);
   useEffect(() => {
     if (!showServerLogs) return;
     if (serverLogsContainerRef.current) {
@@ -188,6 +201,13 @@ export const StateInspector = memoGeneric(function StateInspector<
         serverLogsContainerRef.current.scrollHeight;
     }
   }, [showServerLogs, visibleServerLogs]);
+  useEffect(() => {
+    if (!showServerSimulationLogs) return;
+    if (serverSimulationLogsContainerRef.current) {
+      serverSimulationLogsContainerRef.current.scrollTop =
+        serverSimulationLogsContainerRef.current.scrollHeight;
+    }
+  }, [showServerSimulationLogs, visibleServerSimulationLogs]);
 
   const multipeerStateInitialized = useObservable(
     multiplayerStateManager.isInitialized$
@@ -200,8 +220,13 @@ export const StateInspector = 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(
@@ -313,38 +338,45 @@ export const StateInspector = memoGeneric(function StateInspector<
         }
       >
         <StateInspectorDisclosureRowInner style={{ flex: "0 0 auto" }}>
-          {connectedUsers?.map((user, index, array) => {
-            return (
-              <StateInspectorRow
-                key={user.connectionId}
-                colorScheme={colorScheme}
-                variant={user.connectionId === connectionId ? "up" : undefined}
-                bordered={index !== array.length - 1}
-              >
-                {user.image && (
-                  <img
-                    src={user.image}
-                    alt={user.name}
-                    style={{
-                      width: "13px",
-                      height: "13px",
-                      borderRadius: "50%",
-                      marginRight: "4px",
-                      display: "inline-block",
-                      position: "relative",
-                      background: solidBorderColor,
-                      verticalAlign: "middle",
-                    }}
-                  />
-                )}
-                {showUserDetails ? (
-                  <ObjectInspector data={user} theme={theme} />
-                ) : (
-                  user.name
-                )}
-              </StateInspectorRow>
-            );
-          })}
+          {connectedUsers
+            ?.filter((user) => showUserDetails || !user.inactive)
+            .map((user, index, array) => {
+              return (
+                <StateInspectorRow
+                  key={user.connectionId}
+                  colorScheme={colorScheme}
+                  variant={
+                    user.connectionId === connectionId ? "up" : undefined
+                  }
+                  bordered={index !== array.length - 1}
+                  style={{
+                    opacity: user.inactive ? 0.5 : 1,
+                  }}
+                >
+                  {user.image && (
+                    <img
+                      src={user.image}
+                      alt={user.name}
+                      style={{
+                        width: "13px",
+                        height: "13px",
+                        borderRadius: "50%",
+                        marginRight: "4px",
+                        display: "inline-block",
+                        position: "relative",
+                        background: solidBorderColor,
+                        verticalAlign: "middle",
+                      }}
+                    />
+                  )}
+                  {showUserDetails ? (
+                    <ObjectInspector data={user} theme={theme} />
+                  ) : (
+                    user.name
+                  )}
+                </StateInspectorRow>
+              );
+            })}
           {!connectedUsers && (
             <div
               style={{
@@ -767,6 +799,43 @@ export const StateInspector = memoGeneric(function StateInspector<
         onTogglePaused={toggleServerLogsPaused}
         containerRef={serverLogsContainerRef}
       />
+      {showSimulationLogsSection && (
+        <ServerScriptLogsSection
+          title="Server Script Simulation Logs"
+          colorScheme={colorScheme}
+          showLogs={showServerSimulationLogs}
+          setShowLogs={setShowServerSimulationLogs}
+          logs={visibleServerSimulationLogs}
+          paused={serverSimulationLogsPaused}
+          onTogglePaused={toggleServerSimulationLogsPaused}
+          containerRef={serverSimulationLogsContainerRef}
+        />
+      )}
+      <StateInspectorDisclosureSection
+        open={showSimulation}
+        setOpen={setShowSimulation}
+        title="Server Simulation"
+        colorScheme={colorScheme}
+      >
+        <StateInspectorDisclosureRowInner>
+          <StateInspectorRow colorScheme={colorScheme}>
+            <ObjectInspector
+              name="status"
+              data={
+                simulationDiagnostics ?? {
+                  simulateLocally: false,
+                  simulatorActive: false,
+                  clockSkewMs: 0,
+                  invocations: [],
+                  pendingPredictions: [],
+                }
+              }
+              theme={theme}
+              expandLevel={2}
+            />
+          </StateInspectorRow>
+        </StateInspectorDisclosureRowInner>
+      </StateInspectorDisclosureSection>
       {advanced && (
         <ActivityEventsSection
           colorScheme={colorScheme}
@@ -777,7 +846,9 @@ export const StateInspector = memoGeneric(function StateInspector<
         />
       )}
       <EventsSection<S>
-        connectionEvents={connectionEvents}
+        connectionEvents={visibleConnectionEvents}
+        paused={connectionEventsPaused}
+        onTogglePaused={toggleConnectionEventsPaused}
         colorScheme={colorScheme}
         eventsContainerRef={eventsContainerRef}
         showEvents={showEvents}

package/src/inspector/sections/EventsSection.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { ObjectInspector, ObjectLabel } from "react-inspector";
 import { getStateInspectorTheme } from "../inspectorTheme";
 import { ObjectRootLabel } from "../ObjectRootLabel";
+import { StateInspectorButton } from "../StateInspectorButton";
 import {
   StateInspectorDisclosureRowInner,
   StateInspectorDisclosureSection,
@@ -15,12 +16,16 @@ export function EventsSection<S>({
   colorScheme,
   eventsContainerRef,
   connectionEvents,
+  paused,
+  onTogglePaused,
 }: {
   showEvents: boolean;
   setShowEvents: (value: boolean) => void;
   colorScheme: "light" | "dark";
   eventsContainerRef: React.RefObject<HTMLDivElement | null>;
   connectionEvents: ConnectionEvent<S>[];
+  paused: boolean;
+  onTogglePaused: () => void;
 }) {
   const theme = getStateInspectorTheme(colorScheme);
 
@@ -30,8 +35,24 @@ export function EventsSection<S>({
       setOpen={setShowEvents}
       title="Events"
       colorScheme={colorScheme}
+      right={
+        <StateInspectorButton theme={theme} onClick={onTogglePaused}>
+          {paused ? "Resume" : "Pause"}
+        </StateInspectorButton>
+      }
     >
       <StateInspectorDisclosureRowInner ref={eventsContainerRef}>
+        {paused && (
+          <div
+            style={{
+              padding: "4px 12px",
+              fontSize: "11px",
+              opacity: 0.7,
+            }}
+          >
+            Event streaming paused
+          </div>
+        )}
         {connectionEvents?.map((event, index) =>
           event.type === "stateChange" ? (
             <StateInspectorRow key={index} colorScheme={colorScheme}>
@@ -70,7 +91,7 @@ export function EventsSection<S>({
             </StateInspectorRow>
           )
         )}
-        {!connectionEvents && (
+        {!connectionEvents?.length && (
           <div
             style={{
               padding: "12px",

package/src/inspector/sections/ServerScriptLogsSection.tsx

@@ -27,6 +27,7 @@ export function ServerScriptLogsSection({
   containerRef,
   paused,
   onTogglePaused,
+  title = "Server Script Logs",
 }: {
   showLogs: boolean;
   setShowLogs: (value: boolean) => void;
@@ -35,6 +36,7 @@ export function ServerScriptLogsSection({
   containerRef: React.RefObject<HTMLDivElement | null>;
   paused: boolean;
   onTogglePaused: () => void;
+  title?: string;
 }) {
   const theme = getStateInspectorTheme(colorScheme);
 
@@ -42,7 +44,7 @@ export function ServerScriptLogsSection({
     <StateInspectorDisclosureSection
       open={showLogs}
       setOpen={setShowLogs}
-      title="Server Script Logs"
+      title={title}
       colorScheme={colorScheme}
       right={
         <StateInspectorButton theme={theme} onClick={onTogglePaused}>
@@ -77,6 +79,20 @@ export function ServerScriptLogsSection({
             >
               <span>{formatTimestamp(log.timestamp)}</span>
               <span style={{ color: levelColors[log.level] }}>{log.level}</span>
+              {(log.origin || log.target || log.mode) && (
+                <span
+                  style={{
+                    fontFamily: "monospace",
+                    textTransform: "none",
+                    fontSize: "10px",
+                    opacity: 0.75,
+                  }}
+                >
+                  {[log.origin ?? log.target, log.mode]
+                    .filter(Boolean)
+                    .join(" / ")}
+                </span>
+              )}
               <span
                 style={{
                   fontFamily: "monospace",
@@ -100,7 +116,7 @@ export function ServerScriptLogsSection({
                     key={index}
                     data={value}
                     theme={theme}
-                    expandLevel={3}
+                    // expandLevel={3}
                   />
                 ))
               ) : (

package/src/inspector/usePausedStream.ts

@@ -0,0 +1,33 @@
+"use client";
+
+import React from "react";
+
+/**
+ * Keeps a snapshot of items while paused, resuming updates when unpaused.
+ */
+export function usePausedStream<T>(items: T[] | undefined) {
+  const [paused, setPaused] = React.useState(false);
+  const [visibleItems, setVisibleItems] = React.useState(items ?? []);
+
+  const togglePaused = React.useCallback(() => {
+    setPaused((value) => {
+      if (!value) {
+        setVisibleItems(items ?? []);
+      }
+      return !value;
+    });
+  }, [items]);
+
+  React.useEffect(() => {
+    if (paused) return;
+
+    setVisibleItems(items ?? []);
+  }, [items, paused]);
+
+  return {
+    paused,
+    setPaused,
+    togglePaused,
+    visibleItems,
+  };
+}

package/src/singleton.tsx

@@ -67,9 +67,8 @@ export function initializeNoyaSingleton<
     viewType,
     offlineStorageKey,
     multiplayerUrl,
-    serverScripts,
     ...managerOptions
-  } = (options ?? {}) as AnyNoyaSingletonOptions<S, M, E, MenuT, I>;
+  } = options ?? {};
 
   const appData = getAppData<S>(
     (initialState ?? null) as S | (() => S),
@@ -106,7 +105,7 @@ export function initializeNoyaSingleton<
       multiplayerUrl: multiplayerUrl ?? appData.multiplayerUrl,
       offlineStorageKey,
       debug: managerOptions?.debug,
-      serverScripts,
+      serverScripts: managerOptions?.serverScripts,
       policyAuthContext,
     });