@noya-app/noya-multiplayer-react 0.1.73 → 0.1.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-multiplayer-react",
-  "version": "0.1.73",
+  "version": "0.1.75",
   "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.58",
+    "@noya-app/state-manager": "0.1.60",
     "@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/__tests__/noyaApp.test.ts

@@ -1,4 +1,12 @@
 import { expect, it } from "bun:test";
+import {
+  clientId$,
+  clientImage$,
+  clientName$,
+  setClientId,
+  setClientImage,
+  setClientName,
+} from "@noya-app/state-manager";
 import { Type } from "..";
 import { createDefaultAppData, getAppData } from "../noyaApp";
 
@@ -100,6 +108,38 @@ it("preserves userId from data param", () => {
   expect(data.isDemo).toBe(true);
 });
 
+it("applies client identity from data param", () => {
+  setClientId(undefined);
+  setClientName(undefined);
+  setClientImage(undefined);
+
+  const existing = {
+    theme: "light",
+    viewType: "editable",
+    initialState: { foo: "bar" },
+    inspector: false,
+    clientId: "parent-client-id",
+    clientName: "Parent Name",
+    clientImage: "https://example.com/avatar.svg",
+  };
+
+  getAppData(null as unknown, undefined, {
+    window: {
+      location: {
+        hash: `#data=${encodeURIComponent(JSON.stringify(existing))}`,
+      },
+    },
+  });
+
+  expect(clientId$.get()).toBe("parent-client-id");
+  expect(clientName$.get()).toBe("Parent Name");
+  expect(clientImage$.get()).toBe("https://example.com/avatar.svg");
+
+  setClientId(undefined);
+  setClientName(undefined);
+  setClientImage(undefined);
+});
+
 // it("enforces schema on data param", () => {
 //   const schema = Type.Object({
 //     foo: Type.String({ default: "bar" }),

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",
@@ -109,6 +111,10 @@ export const StateInspector = memoGeneric(function StateInspector<
     "noya-multiplayer-react-show-users",
     true
   );
+  const [showUserDetails, setShowUserDetails] = useLocalStorageState(
+    "noya-multiplayer-react-show-user-details",
+    false
+  );
   const [showData, setShowData] = useLocalStorageState(
     "noya-multiplayer-react-show-data",
     true
@@ -149,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) {
@@ -184,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$
@@ -196,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(
@@ -288,48 +317,66 @@ export const StateInspector = memoGeneric(function StateInspector<
         colorScheme={colorScheme}
         style={{
           flex: "0 0 auto",
-          maxHeight: "200px",
+          maxHeight: "50%",
+          overflowY: "auto",
         }}
         right={
-          <StateInspectorToggleButton
-            showInspector={showInspector}
-            setShowInspector={setShowInspector}
-            theme={theme}
-            anchor={anchor}
-          />
+          <span style={{ display: "flex", gap: "10px" }}>
+            <StateInspectorButton
+              theme={theme}
+              onClick={() => setShowUserDetails(!showUserDetails)}
+            >
+              Toggle details
+            </StateInspectorButton>
+            <StateInspectorToggleButton
+              showInspector={showInspector}
+              setShowInspector={setShowInspector}
+              theme={theme}
+              anchor={anchor}
+            />
+          </span>
         }
       >
         <StateInspectorDisclosureRowInner style={{ flex: "0 0 auto" }}>
-          {connectedUsers?.map((user, index, array) => {
-            const identifier = user.userId ?? user.connectionId;
-
-            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",
-                    }}
-                  />
-                )}
-                {user.name} ({ellipsis(identifier, 8, "middle")})
-              </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={{
@@ -752,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}
@@ -762,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/noyaApp.ts

@@ -10,6 +10,9 @@ import {
   NoyaManager,
   parentFrameSync,
   PolicyAuthContext,
+  setClientId,
+  setClientImage,
+  setClientName,
   Static,
   stubSync,
   SyncAdapter,
@@ -34,6 +37,9 @@ export type AppData<State> = {
   userId?: string;
   isDemo: boolean;
   access?: AccessType;
+  clientId?: string;
+  clientName?: string;
+  clientImage?: string;
 };
 
 export function createDefaultAppData<State>(
@@ -84,6 +90,24 @@ export function parseAppDataParameter(
   }
 }
 
+function applyClientIdentityFromAppData(appData: {
+  clientId?: string;
+  clientName?: string;
+  clientImage?: string;
+}) {
+  if (appData.clientId !== undefined) {
+    setClientId(appData.clientId);
+  }
+
+  if (appData.clientName !== undefined) {
+    setClientName(appData.clientName);
+  }
+
+  if (appData.clientImage !== undefined) {
+    setClientImage(appData.clientImage);
+  }
+}
+
 export function getAppData<State>(
   initialState: State | (() => State),
   schema?: TSchema,
@@ -106,6 +130,10 @@ export function getAppData<State>(
     appData.viewType === "editable" ? "write" : "read";
   appData.access = appData.access ?? fallbackAccess;
 
+  // If the parent frame provided a client identity (embedded mode), make sure
+  // this frame adopts it so the clientId/name/image observables stay in sync.
+  applyClientIdentityFromAppData(appData);
+
   return appData as AppData<State>;
 }
 

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,
     });