@noya-app/noya-api-client-react 0.1.43 → 0.1.44

package/dist/index.mjs

@@ -7449,22 +7449,16 @@ var jwt;
   jwt2.DEFAULT_HEADER = HEADER;
 })(jwt || (jwt = {}));
 
-// ../state-manager/src/MenuManager.ts
-import { isDeepEqual as isDeepEqual2 } from "@noya-app/noya-utils";
+// ../state-manager/src/LogManager.ts
 import { Observable as Observable7 } from "@noya-app/observable";
 
-// ../state-manager/src/multiplayer.ts
-import { Cache, hash, uuid as uuid4, isDeepEqual as isDeepEqual3 } from "@noya-app/noya-utils";
-import { Observable as Observable9, get as get2, set as set2 } from "@noya-app/observable";
-
-// ../state-manager/src/stateManager.ts
-import {
-  Observable as Observable8,
-  get as getPath2
-} from "@noya-app/observable";
+// ../state-manager/src/MenuManager.ts
+import { isDeepEqual as isDeepEqual2 } from "@noya-app/noya-utils";
+import { Observable as Observable8 } from "@noya-app/observable";
 
 // ../state-manager/src/multiplayer.ts
-var createHash = (value, options) => hash(value, { ...options, ignoreUndefinedProperties: true });
+import { Cache, hash, isDeepEqual as isDeepEqual3, uuid as uuid5 } from "@noya-app/noya-utils";
+import { Observable as Observable10, get as get2, set as set2 } from "@noya-app/observable";
 
 // ../../node_modules/@marcbachmann/cel-js/lib/errors.js
 var ParseError = class extends Error {
@@ -10442,7 +10436,7 @@ var globalEnvironment = new Environment({
 });
 
 // ../state-manager/src/multiplayerPolicies.ts
-import { uuid as uuid5 } from "@noya-app/noya-utils";
+import { uuid as uuid4 } from "@noya-app/noya-utils";
 var celEnvironment = new Environment({
   unlistedVariablesAreDyn: true
 });
@@ -10477,12 +10471,21 @@ celEnvironment.registerFunction("random(): double", () => Math.random()).registe
     const nowValue = typeof nowVariable?.value === "number" ? nowVariable.value : typeof nowVariable?.value === "string" ? Number(nowVariable.value) : Date.now();
     return new Date(nowValue).toISOString();
   }
-).registerFunction("uuid(): string", () => uuid5());
+).registerFunction("uuid(): string", () => uuid4());
 var READ_DENIED = Symbol("readDenied");
 
+// ../state-manager/src/stateManager.ts
+import {
+  Observable as Observable9,
+  get as getPath2
+} from "@noya-app/observable";
+
+// ../state-manager/src/multiplayer.ts
+var createHash = (value, options) => hash(value, { ...options, ignoreUndefinedProperties: true });
+
 // ../state-manager/src/NoyaManager.ts
-import { uuid as uuid9 } from "@noya-app/noya-utils";
-import { Observable as Observable17, set as set3 } from "@noya-app/observable";
+import { uuid as uuid12 } from "@noya-app/noya-utils";
+import { Observable as Observable20, set as set3 } from "@noya-app/observable";
 
 // ../noya-pipeline/src/graphToTasks.ts
 import { get as get3 } from "@noya-app/observable";
@@ -10587,40 +10590,163 @@ var pipelineSchema = Type.Object(
 );
 
 // ../state-manager/src/PipelineManager.ts
-import { Observable as Observable10 } from "@noya-app/observable";
+import { Observable as Observable11 } from "@noya-app/observable";
 
 // ../state-manager/src/PublishingManager.ts
-import { Observable as Observable11 } from "@noya-app/observable";
+import { Observable as Observable12 } from "@noya-app/observable";
 
 // ../state-manager/src/ResourceManager.ts
 import { isDeepEqual as isDeepEqual4, uuid as uuid7 } from "@noya-app/noya-utils";
-import { Observable as Observable12 } from "@noya-app/observable";
+import { Observable as Observable13 } from "@noya-app/observable";
 
 // ../state-manager/src/rpcManager.ts
 import { uuid as uuid8 } from "@noya-app/noya-utils";
-import { Observable as Observable13 } from "@noya-app/observable";
+import { Observable as Observable14 } from "@noya-app/observable";
 
 // ../state-manager/src/SecretManager.ts
-import { Observable as Observable14 } from "@noya-app/observable";
+import { Observable as Observable15 } from "@noya-app/observable";
 
 // ../state-manager/src/TaskManager.ts
-import { Observable as Observable15 } from "@noya-app/observable";
+import { Observable as Observable16 } from "@noya-app/observable";
+
+// ../state-manager/src/TranscriptionManager.ts
+import { Base64 as Base642 } from "@noya-app/noya-utils";
+import { Observable as Observable17 } from "@noya-app/observable";
 
 // ../state-manager/src/UserManager.ts
-import { Observable as Observable16 } from "@noya-app/observable";
+import { Observable as Observable19 } from "@noya-app/observable";
 
-// ../state-manager/src/NoyaManager.ts
-var createMutatorParametersSchema = Type.Object({
-  sourceCode: Type.String({
-    description: "The source code of the mutator function."
-  }),
-  message: Type.String({
-    description: `A message that summarizes the changes made to the document state.`
-  })
-});
+// ../state-manager/src/sync/clientId.ts
+import { uuid as uuid9 } from "@noya-app/noya-utils";
+import { Observable as Observable18 } from "@noya-app/observable";
+
+// ../state-manager/src/sync/defaultNames.ts
+import { upperFirst } from "@noya-app/noya-utils";
+var animals = [
+  "cat",
+  "dog",
+  "owl",
+  "fish",
+  "horse",
+  "rabbit",
+  "snake",
+  "lion",
+  "bear",
+  "wolf",
+  "fox",
+  "elephant",
+  "giraffe",
+  "zebra",
+  "panda",
+  "monkey",
+  "penguin",
+  "koala",
+  "kangaroo",
+  "whale",
+  "shark",
+  "turtle",
+  "crocodile",
+  "hippo"
+];
+var adjectives = [
+  "happy",
+  "sleepy",
+  "hungry",
+  "thirsty",
+  "healthy",
+  "rich",
+  "funky",
+  "cool",
+  "awesome",
+  "amazing",
+  "fantastic",
+  "incredible",
+  "super",
+  "mega",
+  "ultra"
+];
+function randomElement(array) {
+  return array[Math.floor(Math.random() * array.length)];
+}
+function getClientImageUrl(animal) {
+  return `https://avatars.noya.site/animals/animals_${animal}.svg`;
+}
+function randomClientIdentity() {
+  const animal = randomElement(animals);
+  const name = `${upperFirst(randomElement(adjectives))} ${upperFirst(animal)}`;
+  return {
+    name,
+    animal,
+    image: getClientImageUrl(animal)
+  };
+}
+function getClientAnimalFromName(name) {
+  const parts = name.trim().split(/\s+/);
+  const possibleAnimal = parts[parts.length - 1]?.toLowerCase();
+  if (!possibleAnimal) return void 0;
+  return animals.includes(possibleAnimal) ? possibleAnimal : void 0;
+}
+
+// ../state-manager/src/sync/clientId.ts
+var CLIENT_ID_STORAGE_KEY = "noya-client-id";
+var CLIENT_NAME_STORAGE_KEY = "noya-client-name";
+var CLIENT_IMAGE_STORAGE_KEY = "noya-client-image";
+var clientId$ = new Observable18(void 0);
+var clientName$ = new Observable18(void 0);
+var clientImage$ = new Observable18(void 0);
+var safeGetItem = (key) => {
+  try {
+    return typeof localStorage !== "undefined" ? localStorage.getItem(key) : null;
+  } catch {
+    return null;
+  }
+};
+var safeSetItem = (key, value) => {
+  try {
+    if (typeof localStorage !== "undefined") {
+      localStorage.setItem(key, value);
+    }
+  } catch {
+  }
+};
+if (typeof window !== "undefined") {
+  const storedClientId = safeGetItem(CLIENT_ID_STORAGE_KEY);
+  if (storedClientId) {
+    clientId$.set(storedClientId);
+  } else {
+    const newClientId = uuid9();
+    safeSetItem(CLIENT_ID_STORAGE_KEY, newClientId);
+    clientId$.set(newClientId);
+  }
+  let storedClientName = safeGetItem(CLIENT_NAME_STORAGE_KEY) ?? void 0;
+  let storedClientImage = safeGetItem(CLIENT_IMAGE_STORAGE_KEY) ?? void 0;
+  const newIdentity = randomClientIdentity();
+  if (!storedClientName) {
+    storedClientName = newIdentity.name;
+    safeSetItem(CLIENT_NAME_STORAGE_KEY, storedClientName);
+  }
+  if (!storedClientImage) {
+    const animal = (storedClientName && getClientAnimalFromName(storedClientName)) ?? newIdentity.animal;
+    if (animal) {
+      storedClientImage = getClientImageUrl(animal);
+      safeSetItem(CLIENT_IMAGE_STORAGE_KEY, storedClientImage);
+    }
+  }
+  clientName$.set(storedClientName);
+  clientImage$.set(storedClientImage);
+}
+
+// ../state-manager/src/sync/syncUtils.ts
+import { uuid as uuid10 } from "@noya-app/noya-utils";
 
 // ../state-manager/src/sync/localRpcHelpers.ts
-import { Base64 as Base642 } from "@noya-app/noya-utils";
+import { Base64 as Base643 } from "@noya-app/noya-utils";
+
+// ../state-manager/src/sync/localStorageSync.ts
+import { uuid as uuid11 } from "@noya-app/noya-utils";
+
+// ../state-manager/src/serverScripts.ts
+import { uuid as createUuid, isDeepEqual as isDeepEqual5 } from "@noya-app/noya-utils";
 
 // ../noya-keymap/src/hooks.ts
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
@@ -10732,12 +10858,22 @@ var MenuItemTree = (0, import_tree_visit3.defineTree)((node) => {
   return node.type === "submenu" ? node.items : [];
 });
 
+// ../state-manager/src/NoyaManager.ts
+var createMutatorParametersSchema = Type.Object({
+  sourceCode: Type.String({
+    description: "The source code of the mutator function."
+  }),
+  message: Type.String({
+    description: `A message that summarizes the changes made to the document state.`
+  })
+});
+
 // ../noya-multiplayer-react/src/ai.ts
 import { useEffect as useEffect17 } from "react";
 
 // ../noya-multiplayer-react/src/NoyaStateContext.tsx
 import {
-  Observable as Observable18
+  Observable as Observable21
 } from "@noya-app/observable";
 
 // ../noya-react-utils/src/components/AutoSizer.tsx
@@ -10920,7 +11056,7 @@ var FileDropTarget = memoGeneric(function FileDropTarget2({ children, onDropFile
 import { useCallback as useCallback4, useState as useState3 } from "react";
 
 // ../noya-react-utils/src/hooks/useDeepArray.ts
-import { isDeepEqual as isDeepEqual5 } from "@noya-app/noya-utils";
+import { isDeepEqual as isDeepEqual6 } from "@noya-app/noya-utils";
 import { useMemo as useMemo3, useState as useState4 } from "react";
 function useJsonMemo(value) {
   const stringified = useMemo3(
@@ -10935,7 +11071,7 @@ function useJsonMemo(value) {
 }
 
 // ../noya-react-utils/src/hooks/useDeepState.ts
-import { isDeepEqual as isDeepEqual6 } from "@noya-app/noya-utils";
+import { isDeepEqual as isDeepEqual7 } from "@noya-app/noya-utils";
 import { useCallback as useCallback5, useMemo as useMemo4, useState as useState5 } from "react";
 
 // ../noya-react-utils/src/hooks/useFetch.ts
@@ -11044,7 +11180,7 @@ function downloadBlob(...params) {
 }
 
 // ../noya-multiplayer-react/src/NoyaStateContext.tsx
-import React34, {
+import React35, {
   createContext as createContext3,
   useCallback as useCallback14,
   useContext as useContext4,
@@ -11143,12 +11279,12 @@ var ErrorOverlay = React6.memo(function ErrorOverlay2({
 });
 
 // ../noya-multiplayer-react/src/inspector/useStateInspector.tsx
-import React31 from "react";
+import React33 from "react";
 import { createRoot } from "react-dom/client";
 
 // ../noya-multiplayer-react/src/inspector/StateInspector.tsx
-import { Base64 as Base643, memoize as memoize2, uuid as uuid10 } from "@noya-app/noya-utils";
-import React30, {
+import { Base64 as Base644, memoize as memoize2, uuid as uuid13 } from "@noya-app/noya-utils";
+import React31, {
   useCallback as useCallback12,
   useEffect as useEffect13,
   useLayoutEffect as useLayoutEffect4
@@ -13008,6 +13144,105 @@ function HistorySection({
   );
 }
 
+// ../noya-multiplayer-react/src/inspector/sections/ServerScriptLogsSection.tsx
+import React27 from "react";
+var levelColors = {
+  error: "#f87171",
+  warn: "#facc15",
+  log: "#9ca3af"
+};
+function formatTimestamp(timestamp) {
+  return new Date(timestamp).toLocaleTimeString();
+}
+function ServerScriptLogsSection({
+  showLogs,
+  setShowLogs,
+  colorScheme,
+  logs,
+  containerRef,
+  paused,
+  onTogglePaused
+}) {
+  const theme3 = getStateInspectorTheme(colorScheme);
+  return /* @__PURE__ */ React27.createElement(
+    StateInspectorDisclosureSection,
+    {
+      open: showLogs,
+      setOpen: setShowLogs,
+      title: "Server Script Logs",
+      colorScheme,
+      right: /* @__PURE__ */ React27.createElement(StateInspectorButton, { theme: theme3, onClick: onTogglePaused }, paused ? "Resume" : "Pause")
+    },
+    /* @__PURE__ */ React27.createElement(StateInspectorDisclosureRowInner, { ref: containerRef }, paused && /* @__PURE__ */ React27.createElement(
+      "div",
+      {
+        style: {
+          padding: "4px 12px",
+          fontSize: "11px",
+          opacity: 0.7
+        }
+      },
+      "Log streaming paused"
+    ), logs.map((log) => /* @__PURE__ */ React27.createElement(StateInspectorRow, { key: log.id, colorScheme }, /* @__PURE__ */ React27.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: "6px",
+          alignItems: "center",
+          fontSize: "10px",
+          color: "inherit",
+          marginBottom: log.values.length ? "4px" : 0,
+          textTransform: "uppercase"
+        }
+      },
+      /* @__PURE__ */ React27.createElement("span", null, formatTimestamp(log.timestamp)),
+      /* @__PURE__ */ React27.createElement("span", { style: { color: levelColors[log.level] } }, log.level),
+      /* @__PURE__ */ React27.createElement(
+        "span",
+        {
+          style: {
+            fontFamily: "monospace",
+            textTransform: "none",
+            fontSize: "10px"
+          }
+        },
+        log.scriptId
+      )
+    ), /* @__PURE__ */ React27.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px"
+        }
+      },
+      log.values.length > 0 ? log.values.map((value, index) => /* @__PURE__ */ React27.createElement(
+        themedObjectInspector,
+        {
+          key: index,
+          data: value,
+          theme: theme3,
+          expandLevel: 3
+        }
+      )) : /* @__PURE__ */ React27.createElement("span", { style: { fontSize: "11px", opacity: 0.7 } }, "No data")
+    ))), !logs?.length && /* @__PURE__ */ React27.createElement(
+      "div",
+      {
+        style: {
+          padding: "12px",
+          fontSize: "12px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px"
+        }
+      },
+      /* @__PURE__ */ React27.createElement("span", null, "No logs received")
+    ))
+  );
+}
+
 // ../noya-multiplayer-react/src/inspector/zip/crc32.ts
 var CRC_TABLE = (() => {
   const t = new Uint32Array(256);
@@ -13532,15 +13767,15 @@ function decodeAll(buffer) {
 }
 
 // ../noya-multiplayer-react/src/inspector/StateInspectorTitleLabel.tsx
-import React27 from "react";
+import React28 from "react";
 function StateInspectorTitleLabel({
   children
 }) {
-  return /* @__PURE__ */ React27.createElement("span", { style: { display: "flex", alignItems: "center", gap: "4px" } }, children);
+  return /* @__PURE__ */ React28.createElement("span", { style: { display: "flex", alignItems: "center", gap: "4px" } }, children);
 }
 
 // ../noya-multiplayer-react/src/inspector/StateInspectorToggleButton.tsx
-import React28 from "react";
+import React29 from "react";
 function StateInspectorToggleButton({
   showInspector,
   setShowInspector,
@@ -13548,7 +13783,7 @@ function StateInspectorToggleButton({
   anchor
 }) {
   const isRightAnchor = anchor === "right";
-  const rightIcon = /* @__PURE__ */ React28.createElement(
+  const rightIcon = /* @__PURE__ */ React29.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -13558,7 +13793,7 @@ function StateInspectorToggleButton({
       stroke: "currentColor",
       className: "size-6"
     },
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React29.createElement(
       "path",
       {
         strokeLinecap: "round",
@@ -13567,7 +13802,7 @@ function StateInspectorToggleButton({
       }
     )
   );
-  const leftIcon = /* @__PURE__ */ React28.createElement(
+  const leftIcon = /* @__PURE__ */ React29.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -13577,7 +13812,7 @@ function StateInspectorToggleButton({
       stroke: "currentColor",
       className: "size-6"
     },
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React29.createElement(
       "path",
       {
         strokeLinecap: "round",
@@ -13586,7 +13821,7 @@ function StateInspectorToggleButton({
       }
     )
   );
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "span",
     {
       role: "button",
@@ -13607,15 +13842,15 @@ function StateInspectorToggleButton({
         setShowInspector(!showInspector);
       }
     },
-    showInspector ? "Hide Inspector" : /* @__PURE__ */ React28.createElement("span", { style: { width: "12px", height: "12px" } }, isRightAnchor ? rightIcon : leftIcon)
+    showInspector ? "Hide Inspector" : /* @__PURE__ */ React29.createElement("span", { style: { width: "12px", height: "12px" } }, isRightAnchor ? rightIcon : leftIcon)
   );
 }
 
 // ../noya-multiplayer-react/src/inspector/useLocalStorageState.tsx
-import React29 from "react";
+import React30 from "react";
 var localStorage2 = typeof window !== "undefined" ? window.localStorage : null;
 function useLocalStorageState(key, defaultValue) {
-  const [state, setState] = React29.useState(() => {
+  const [state, setState] = React30.useState(() => {
     const value = localStorage2?.getItem(key);
     let result = defaultValue;
     if (value) {
@@ -13648,22 +13883,24 @@ var StateInspector = memoGeneric(function StateInspector2({
     assetManager,
     userManager,
     secretManager,
-    ephemeralUserDataManager,
+    sharedConnectionDataManager,
     connectionEventManager,
     taskManager,
     ioManager,
     resourceManager,
-    activityEventsManager
+    activityEventsManager,
+    logManager
   } = noyaManager;
-  const [didMount, setDidMount] = React30.useState(false);
+  const [didMount, setDidMount] = React31.useState(false);
   const tasks = useObservable2(taskManager.tasks$);
   const inputs = useObservable2(ioManager.inputs$);
   const outputTransforms = useObservable2(ioManager.outputTransforms$);
   useLayoutEffect4(() => {
     setDidMount(true);
   }, []);
-  const eventsContainerRef = React30.useRef(null);
-  const activityEventsContainerRef = React30.useRef(null);
+  const eventsContainerRef = React31.useRef(null);
+  const activityEventsContainerRef = React31.useRef(null);
+  const serverLogsContainerRef = React31.useRef(null);
   const [showInspector, setShowInspector] = useLocalStorageState(
     "noya-multiplayer-react-show-inspector",
     true
@@ -13688,8 +13925,8 @@ var StateInspector = memoGeneric(function StateInspector2({
     "noya-multiplayer-react-show-tasks",
     false
   );
-  const [showEphemeral, setShowEphemeral] = useLocalStorageState(
-    "noya-multiplayer-react-show-ephemeral",
+  const [showShared, setShowShared] = useLocalStorageState(
+    "noya-multiplayer-react-show-shared",
     false
   );
   const [showAssets, setShowAssets] = useLocalStorageState(
@@ -13716,16 +13953,43 @@ var StateInspector = memoGeneric(function StateInspector2({
     "noya-multiplayer-react-show-activity-events",
     false
   );
+  const [showServerLogs, setShowServerLogs] = useLocalStorageState(
+    "noya-multiplayer-react-show-server-logs",
+    false
+  );
   const connectionEvents = useObservable2(connectionEventManager.events$);
   useEffect13(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
     }
   }, [connectionEvents]);
+  const serverLogs = useObservable2(logManager.logs$);
+  const [serverLogsPaused, setServerLogsPaused] = React31.useState(false);
+  const [visibleServerLogs, setVisibleServerLogs] = React31.useState(
+    serverLogs ?? []
+  );
+  const toggleServerLogsPaused = useCallback12(() => {
+    setServerLogsPaused((value) => {
+      if (!value) {
+        setVisibleServerLogs(serverLogs ?? []);
+      }
+      return !value;
+    });
+  }, [serverLogs]);
+  useEffect13(() => {
+    if (serverLogsPaused) return;
+    setVisibleServerLogs(serverLogs ?? []);
+  }, [serverLogs, serverLogsPaused]);
+  useEffect13(() => {
+    if (!showServerLogs) return;
+    if (serverLogsContainerRef.current) {
+      serverLogsContainerRef.current.scrollTop = serverLogsContainerRef.current.scrollHeight;
+    }
+  }, [showServerLogs, visibleServerLogs]);
   const multipeerStateInitialized = useObservable2(
     multiplayerStateManager.isInitialized$
   );
-  const ephemeral = useObservable2(ephemeralUserDataManager.data$);
+  const shared = useObservable2(sharedConnectionDataManager.data$);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
   const assets = useObservable2(assetManager.assets$);
   const resources = useObservable2(resourceManager.resources$);
@@ -13734,7 +13998,7 @@ var StateInspector = memoGeneric(function StateInspector2({
   const secrets = useObservable2(secretManager.secrets$);
   const secretsInitialized = useObservable2(secretManager.isInitialized$);
   const connectedUsers = useObservable2(userManager.connectedUsers$);
-  const userId = useObservable2(userManager.currentUserId$);
+  const connectionId = useObservable2(userManager.currentConnectionId$);
   const state = useObservable2(multiplayerStateManager.optimisticState$);
   const inputsInitialized = useObservable2(ioManager.inputsInitialized$);
   const outputTransformsInitialized = useObservable2(
@@ -13778,7 +14042,7 @@ var StateInspector = memoGeneric(function StateInspector2({
   }, [noyaManager]);
   if (!didMount) return null;
   if (!showInspector) {
-    return /* @__PURE__ */ React30.createElement(
+    return /* @__PURE__ */ React31.createElement(
       "div",
       {
         ...props,
@@ -13790,7 +14054,7 @@ var StateInspector = memoGeneric(function StateInspector2({
         },
         onClick: () => setShowInspector(true)
       },
-      /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React31.createElement(
         StateInspectorToggleButton,
         {
           showInspector,
@@ -13801,7 +14065,7 @@ var StateInspector = memoGeneric(function StateInspector2({
       )
     );
   }
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(
     "div",
     {
       ...props,
@@ -13810,7 +14074,7 @@ var StateInspector = memoGeneric(function StateInspector2({
         ...props.style
       }
     },
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(
       StateInspectorDisclosureSection,
       {
         isFirst: true,
@@ -13822,7 +14086,7 @@ var StateInspector = memoGeneric(function StateInspector2({
           flex: "0 0 auto",
           maxHeight: "200px"
         },
-        right: /* @__PURE__ */ React30.createElement(
+        right: /* @__PURE__ */ React31.createElement(
           StateInspectorToggleButton,
           {
             showInspector,
@@ -13832,36 +14096,39 @@ var StateInspector = memoGeneric(function StateInspector2({
           }
         )
       },
-      /* @__PURE__ */ React30.createElement(StateInspectorDisclosureRowInner, { style: { flex: "0 0 auto" } }, connectedUsers?.map((user, index, array) => /* @__PURE__ */ React30.createElement(
-        StateInspectorRow,
-        {
-          key: user.id,
-          colorScheme,
-          variant: user.id === userId ? "up" : void 0,
-          bordered: index !== array.length - 1
-        },
-        user.image && /* @__PURE__ */ React30.createElement(
-          "img",
+      /* @__PURE__ */ React31.createElement(StateInspectorDisclosureRowInner, { style: { flex: "0 0 auto" } }, connectedUsers?.map((user, index, array) => {
+        const identifier = user.userId ?? user.connectionId;
+        return /* @__PURE__ */ React31.createElement(
+          StateInspectorRow,
           {
-            src: user.image,
-            alt: user.name,
-            style: {
-              width: "13px",
-              height: "13px",
-              borderRadius: "50%",
-              marginRight: "4px",
-              display: "inline-block",
-              position: "relative",
-              background: solidBorderColor,
-              verticalAlign: "middle"
+            key: user.connectionId,
+            colorScheme,
+            variant: user.connectionId === connectionId ? "up" : void 0,
+            bordered: index !== array.length - 1
+          },
+          user.image && /* @__PURE__ */ React31.createElement(
+            "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(user.id.toString(), 8, "middle"),
-        ")"
-      )), !connectedUsers && /* @__PURE__ */ React30.createElement(
+          ),
+          user.name,
+          " (",
+          ellipsis(identifier, 8, "middle"),
+          ")"
+        );
+      }), !connectedUsers && /* @__PURE__ */ React31.createElement(
         "div",
         {
           style: {
@@ -13872,13 +14139,13 @@ var StateInspector = memoGeneric(function StateInspector2({
             gap: "4px"
           }
         },
-        /* @__PURE__ */ React30.createElement("span", null, "No connected users")
+        /* @__PURE__ */ React31.createElement("span", null, "No connected users")
       ))
     ),
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(
       StateInspectorDisclosureSection,
       {
-        title: /* @__PURE__ */ React30.createElement(StateInspectorTitleLabel, null, "Data", /* @__PURE__ */ React30.createElement(
+        title: /* @__PURE__ */ React31.createElement(StateInspectorTitleLabel, null, "Data", /* @__PURE__ */ React31.createElement(
           ColoredDot,
           {
             type: multipeerStateInitialized ? "success" : "error"
@@ -13887,7 +14154,7 @@ var StateInspector = memoGeneric(function StateInspector2({
         colorScheme,
         setOpen: setShowData,
         open: showData,
-        right: /* @__PURE__ */ React30.createElement(
+        right: /* @__PURE__ */ React31.createElement(
           "span",
           {
             style: {
@@ -13895,9 +14162,9 @@ var StateInspector = memoGeneric(function StateInspector2({
               gap: "12px"
             }
           },
-          /* @__PURE__ */ React30.createElement(StateInspectorButton, { theme: theme3, onClick: handleImportAll }, "Import"),
-          /* @__PURE__ */ React30.createElement(StateInspectorButton, { theme: theme3, onClick: handleExportAll }, "Export"),
-          /* @__PURE__ */ React30.createElement(
+          /* @__PURE__ */ React31.createElement(StateInspectorButton, { theme: theme3, onClick: handleImportAll }, "Import"),
+          /* @__PURE__ */ React31.createElement(StateInspectorButton, { theme: theme3, onClick: handleExportAll }, "Export"),
+          /* @__PURE__ */ React31.createElement(
             StateInspectorButton,
             {
               theme: theme3,
@@ -13909,14 +14176,14 @@ var StateInspector = memoGeneric(function StateInspector2({
           )
         )
       },
-      /* @__PURE__ */ React30.createElement(StateInspectorDisclosureRowInner, null, /* @__PURE__ */ React30.createElement(StateInspectorRow, { colorScheme }, /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React31.createElement(StateInspectorDisclosureRowInner, null, /* @__PURE__ */ React31.createElement(StateInspectorRow, { colorScheme }, /* @__PURE__ */ React31.createElement(
         themedObjectInspector,
         {
           name: multiplayerStateManager.schema ? "state" : void 0,
           data: state,
           theme: theme3
         }
-      )), multiplayerStateManager.schema && /* @__PURE__ */ React30.createElement(StateInspectorRow, { colorScheme }, /* @__PURE__ */ React30.createElement(
+      )), multiplayerStateManager.schema && /* @__PURE__ */ React31.createElement(StateInspectorRow, { colorScheme }, /* @__PURE__ */ React31.createElement(
         themedObjectInspector,
         {
           name: "schema",
@@ -13925,7 +14192,7 @@ var StateInspector = memoGeneric(function StateInspector2({
         }
       )))
     ),
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(
       HistorySection,
       {
         showHistory,
@@ -13935,14 +14202,14 @@ var StateInspector = memoGeneric(function StateInspector2({
         multiplayerStateManager
       }
     ),
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(
       StateInspectorDisclosureSection,
       {
         open: showAssets,
         setOpen: setShowAssets,
-        title: /* @__PURE__ */ React30.createElement(StateInspectorTitleLabel, null, "Assets (", assets.length, ")", /* @__PURE__ */ React30.createElement(ColoredDot, { type: assetsInitialized ? "success" : "error" })),
+        title: /* @__PURE__ */ React31.createElement(StateInspectorTitleLabel, null, "Assets (", assets.length, ")", /* @__PURE__ */ React31.createElement(ColoredDot, { type: assetsInitialized ? "success" : "error" })),
         colorScheme,
-        right: /* @__PURE__ */ React30.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React30.createElement(
+        right: /* @__PURE__ */ React31.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React31.createElement(
           StateInspectorButton,
           {
             theme: theme3,
@@ -13957,7 +14224,7 @@ var StateInspector = memoGeneric(function StateInspector2({
             }
           },
           "Delete all"
-        ), /* @__PURE__ */ React30.createElement(
+        ), /* @__PURE__ */ React31.createElement(
           StateInspectorButton,
           {
             theme: theme3,
@@ -13970,7 +14237,7 @@ var StateInspector = memoGeneric(function StateInspector2({
             }
           },
           "Reload"
-        ), /* @__PURE__ */ React30.createElement(
+        ), /* @__PURE__ */ React31.createElement(
           StateInspectorButton,
           {
             theme: theme3,
@@ -13994,14 +14261,14 @@ var StateInspector = memoGeneric(function StateInspector2({
           "Upload"
         ))
       },
-      /* @__PURE__ */ React30.createElement(StateInspectorDisclosureRowInner, null, assets.map((asset) => /* @__PURE__ */ React30.createElement(StateInspectorRow, { key: asset.id, colorScheme }, /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React31.createElement(StateInspectorDisclosureRowInner, null, assets.map((asset) => /* @__PURE__ */ React31.createElement(StateInspectorRow, { key: asset.id, colorScheme }, /* @__PURE__ */ React31.createElement(
         themedObjectInspector,
         {
           name: asset.id,
           data: truncateAsset(asset),
           theme: theme3
         }
-      ), /* @__PURE__ */ React30.createElement(
+      ), /* @__PURE__ */ React31.createElement(
         StateInspectorButton,
         {
           theme: theme3,
@@ -14010,14 +14277,14 @@ var StateInspector = memoGeneric(function StateInspector2({
         "Delete"
       ))))
     ),
-    advanced && /* @__PURE__ */ React30.createElement(
+    advanced && /* @__PURE__ */ React31.createElement(
       StateInspectorDisclosureSection,
       {
-        title: /* @__PURE__ */ React30.createElement(StateInspectorTitleLabel, null, "Resources (", resources.length, ")", /* @__PURE__ */ React30.createElement(ColoredDot, { type: resourcesInitialized ? "success" : "error" })),
+        title: /* @__PURE__ */ React31.createElement(StateInspectorTitleLabel, null, "Resources (", resources.length, ")", /* @__PURE__ */ React31.createElement(ColoredDot, { type: resourcesInitialized ? "success" : "error" })),
         colorScheme,
         open: showResources,
         setOpen: setShowResources,
-        right: /* @__PURE__ */ React30.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React30.createElement(
+        right: /* @__PURE__ */ React31.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React31.createElement(
           StateInspectorButton,
           {
             theme: theme3,
@@ -14032,12 +14299,12 @@ var StateInspector = memoGeneric(function StateInspector2({
             }
           },
           "Delete all"
-        ), /* @__PURE__ */ React30.createElement(
+        ), /* @__PURE__ */ React31.createElement(
           StateInspectorButton,
           {
             theme: theme3,
             onClick: async () => {
-              const path2 = prompt("Enter directory path") || uuid10();
+              const path2 = prompt("Enter directory path") || uuid13();
               await resourceManager.createResource({
                 type: "directory",
                 path: path2
@@ -14045,7 +14312,7 @@ var StateInspector = memoGeneric(function StateInspector2({
             }
           },
           "Create Directory"
-        ), /* @__PURE__ */ React30.createElement(
+        ), /* @__PURE__ */ React31.createElement(
           StateInspectorButton,
           {
             theme: theme3,
@@ -14053,9 +14320,9 @@ var StateInspector = memoGeneric(function StateInspector2({
               const file = await uploadFile();
               resourceManager.createResource({
                 type: "asset",
-                path: file.name || uuid10(),
+                path: file.name || uuid13(),
                 asset: {
-                  content: Base643.encode(await file.arrayBuffer()),
+                  content: Base644.encode(await file.arrayBuffer()),
                   contentType: file.type,
                   encoding: "base64"
                 }
@@ -14065,21 +14332,21 @@ var StateInspector = memoGeneric(function StateInspector2({
           "Create Asset"
         ))
       },
-      /* @__PURE__ */ React30.createElement(StateInspectorDisclosureRowInner, null, resources?.map((resource) => /* @__PURE__ */ React30.createElement(StateInspectorRow, { key: resource.id, colorScheme }, /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React31.createElement(StateInspectorDisclosureRowInner, null, resources?.map((resource) => /* @__PURE__ */ React31.createElement(StateInspectorRow, { key: resource.id, colorScheme }, /* @__PURE__ */ React31.createElement(
         themedObjectInspector,
         {
           name: resource.path,
           data: resource,
           theme: theme3
         }
-      ), /* @__PURE__ */ React30.createElement("div", { style: { display: "flex", gap: "4px" } }, /* @__PURE__ */ React30.createElement(
+      ), /* @__PURE__ */ React31.createElement("div", { style: { display: "flex", gap: "4px" } }, /* @__PURE__ */ React31.createElement(
         StateInspectorButton,
         {
           theme: theme3,
           onClick: () => resourceManager.deleteResource({ id: resource.id })
         },
         "Delete"
-      ), /* @__PURE__ */ React30.createElement(
+      ), /* @__PURE__ */ React31.createElement(
         StateInspectorButton,
         {
           theme: theme3,
@@ -14092,14 +14359,14 @@ var StateInspector = memoGeneric(function StateInspector2({
         "Rename"
       )))))
     ),
-    advanced && /* @__PURE__ */ React30.createElement(
+    advanced && /* @__PURE__ */ React31.createElement(
       StateInspectorDisclosureSection,
       {
-        title: /* @__PURE__ */ React30.createElement(StateInspectorTitleLabel, null, "Secrets", /* @__PURE__ */ React30.createElement(ColoredDot, { type: secretsInitialized ? "success" : "error" })),
+        title: /* @__PURE__ */ React31.createElement(StateInspectorTitleLabel, null, "Secrets", /* @__PURE__ */ React31.createElement(ColoredDot, { type: secretsInitialized ? "success" : "error" })),
         colorScheme,
         open: showSecrets,
         setOpen: setShowSecrets,
-        right: /* @__PURE__ */ React30.createElement(
+        right: /* @__PURE__ */ React31.createElement(
           StateInspectorButton,
           {
             theme: theme3,
@@ -14114,7 +14381,7 @@ var StateInspector = memoGeneric(function StateInspector2({
           "Create"
         )
       },
-      /* @__PURE__ */ React30.createElement(StateInspectorDisclosureRowInner, null, secrets.map((secret) => /* @__PURE__ */ React30.createElement(StateInspectorRow, { key: secret.id, colorScheme }, /* @__PURE__ */ React30.createElement(themedObjectInspector, { data: secret, theme: theme3 }), /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React31.createElement(StateInspectorDisclosureRowInner, null, secrets.map((secret) => /* @__PURE__ */ React31.createElement(StateInspectorRow, { key: secret.id, colorScheme }, /* @__PURE__ */ React31.createElement(themedObjectInspector, { data: secret, theme: theme3 }), /* @__PURE__ */ React31.createElement(
         StateInspectorButton,
         {
           theme: theme3,
@@ -14123,15 +14390,15 @@ var StateInspector = memoGeneric(function StateInspector2({
         "Delete"
       ))))
     ),
-    advanced && /* @__PURE__ */ React30.createElement(
+    advanced && /* @__PURE__ */ React31.createElement(
       StateInspectorDisclosureSection,
       {
         open: showInputs,
         setOpen: setShowInputs,
-        title: /* @__PURE__ */ React30.createElement(StateInspectorTitleLabel, null, "Inputs", /* @__PURE__ */ React30.createElement(ColoredDot, { type: inputsInitialized ? "success" : "error" })),
+        title: /* @__PURE__ */ React31.createElement(StateInspectorTitleLabel, null, "Inputs", /* @__PURE__ */ React31.createElement(ColoredDot, { type: inputsInitialized ? "success" : "error" })),
         colorScheme
       },
-      /* @__PURE__ */ React30.createElement(StateInspectorDisclosureRowInner, null, inputs?.map((input) => /* @__PURE__ */ React30.createElement(StateInspectorRow, { key: input.id, colorScheme }, /* @__PURE__ */ React30.createElement(themedObjectInspector, { data: input, theme: theme3 }))), !inputs?.length && /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React31.createElement(StateInspectorDisclosureRowInner, null, inputs?.map((input) => /* @__PURE__ */ React31.createElement(StateInspectorRow, { key: input.id, colorScheme }, /* @__PURE__ */ React31.createElement(themedObjectInspector, { data: input, theme: theme3 }))), !inputs?.length && /* @__PURE__ */ React31.createElement(
         "div",
         {
           style: {
@@ -14142,15 +14409,15 @@ var StateInspector = memoGeneric(function StateInspector2({
             gap: "4px"
           }
         },
-        /* @__PURE__ */ React30.createElement("span", null, "No inputs")
+        /* @__PURE__ */ React31.createElement("span", null, "No inputs")
       ))
     ),
-    advanced && /* @__PURE__ */ React30.createElement(
+    advanced && /* @__PURE__ */ React31.createElement(
       StateInspectorDisclosureSection,
       {
         open: showOutputTransforms,
         setOpen: setShowOutputTransforms,
-        title: /* @__PURE__ */ React30.createElement(StateInspectorTitleLabel, null, "Output Transforms", /* @__PURE__ */ React30.createElement(
+        title: /* @__PURE__ */ React31.createElement(StateInspectorTitleLabel, null, "Output Transforms", /* @__PURE__ */ React31.createElement(
           ColoredDot,
           {
             type: outputTransformsInitialized ? "success" : "error"
@@ -14158,7 +14425,7 @@ var StateInspector = memoGeneric(function StateInspector2({
         )),
         colorScheme
       },
-      /* @__PURE__ */ React30.createElement(StateInspectorDisclosureRowInner, null, outputTransforms?.map((transform) => /* @__PURE__ */ React30.createElement(StateInspectorRow, { key: transform.id, colorScheme }, /* @__PURE__ */ React30.createElement(themedObjectInspector, { data: transform, theme: theme3 }))), !outputTransforms?.length && /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React31.createElement(StateInspectorDisclosureRowInner, null, outputTransforms?.map((transform) => /* @__PURE__ */ React31.createElement(StateInspectorRow, { key: transform.id, colorScheme }, /* @__PURE__ */ React31.createElement(themedObjectInspector, { data: transform, theme: theme3 }))), !outputTransforms?.length && /* @__PURE__ */ React31.createElement(
         "div",
         {
           style: {
@@ -14169,10 +14436,10 @@ var StateInspector = memoGeneric(function StateInspector2({
             gap: "4px"
           }
         },
-        /* @__PURE__ */ React30.createElement("span", null, "No output transforms")
+        /* @__PURE__ */ React31.createElement("span", null, "No output transforms")
       ))
     ),
-    advanced && /* @__PURE__ */ React30.createElement(
+    advanced && /* @__PURE__ */ React31.createElement(
       StateInspectorDisclosureSection,
       {
         title: "Tasks",
@@ -14180,7 +14447,7 @@ var StateInspector = memoGeneric(function StateInspector2({
         open: showTasks,
         setOpen: setShowTasks
       },
-      /* @__PURE__ */ React30.createElement(StateInspectorDisclosureRowInner, null, tasks?.map((task) => /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React31.createElement(StateInspectorDisclosureRowInner, null, tasks?.map((task) => /* @__PURE__ */ React31.createElement(
         StateInspectorRow,
         {
           key: task.id,
@@ -14189,7 +14456,7 @@ var StateInspector = memoGeneric(function StateInspector2({
             backgroundColor: task.status === "done" ? "rgba(0,255,0,0.2)" : task.status === "error" ? "rgba(255,0,0,0.2)" : void 0
           }
         },
-        /* @__PURE__ */ React30.createElement(
+        /* @__PURE__ */ React31.createElement(
           themedObjectInspector,
           {
             name: task.name,
@@ -14199,15 +14466,15 @@ var StateInspector = memoGeneric(function StateInspector2({
         )
       )))
     ),
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(
       StateInspectorDisclosureSection,
       {
-        open: showEphemeral,
-        setOpen: setShowEphemeral,
-        title: "Ephemeral User Data",
+        open: showShared,
+        setOpen: setShowShared,
+        title: "Shared Connection Data",
         colorScheme
       },
-      /* @__PURE__ */ React30.createElement(StateInspectorDisclosureRowInner, null, Object.entries(ephemeral).map(([key, value]) => /* @__PURE__ */ React30.createElement(StateInspectorRow, { key, colorScheme }, /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React31.createElement(StateInspectorDisclosureRowInner, null, Object.entries(shared).map(([key, value]) => /* @__PURE__ */ React31.createElement(StateInspectorRow, { key, colorScheme }, /* @__PURE__ */ React31.createElement(
         themedObjectInspector,
         {
           name: key,
@@ -14217,7 +14484,19 @@ var StateInspector = memoGeneric(function StateInspector2({
         }
       ))))
     ),
-    advanced && /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(
+      ServerScriptLogsSection,
+      {
+        colorScheme,
+        showLogs: showServerLogs,
+        setShowLogs: setShowServerLogs,
+        logs: visibleServerLogs,
+        paused: serverLogsPaused,
+        onTogglePaused: toggleServerLogsPaused,
+        containerRef: serverLogsContainerRef
+      }
+    ),
+    advanced && /* @__PURE__ */ React31.createElement(
       ActivityEventsSection,
       {
         colorScheme,
@@ -14227,7 +14506,7 @@ var StateInspector = memoGeneric(function StateInspector2({
         activityEventsManager
       }
     ),
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(
       EventsSection,
       {
         connectionEvents,
@@ -14256,7 +14535,7 @@ function useManagedHistory(stateManager) {
 }
 
 // ../noya-multiplayer-react/src/singleton.tsx
-import React33 from "react";
+import React34 from "react";
 
 // ../noya-multiplayer-react/src/NoyaStateContext.tsx
 var AnyNoyaStateContext = createContext3(void 0);
@@ -14278,24 +14557,24 @@ function useActivityEventsForManager(streamFilter, activityEventsManager) {
 }
 
 // ../noya-multiplayer-react/src/components/UserPointersOverlay.tsx
-import { Observable as Observable19 } from "@noya-app/observable";
-import React35, { useEffect as useEffect18, useMemo as useMemo12, useState as useState18 } from "react";
+import { Observable as Observable22 } from "@noya-app/observable";
+import React36, { useEffect as useEffect18, useMemo as useMemo12, useState as useState18 } from "react";
 function shouldShow(hideAfter, updatedAt) {
   return !!updatedAt && Date.now() - updatedAt < hideAfter;
 }
 var UserPointerInternal = memoGeneric(function UserPointerInternal2({
   user,
-  ephemeralUserDataManager,
+  sharedConnectionDataManager,
   hideAfter = 5e3,
   renderUserPointer
 }) {
   const observable = useMemo12(() => {
-    const metadata$ = ephemeralUserDataManager.metadata$.observePath([user.id]).throttle(50);
-    const data$ = ephemeralUserDataManager.data$.observePath([user.id]).throttle(50);
-    return Observable19.combine([metadata$, data$], ([metadata2, data2]) => {
+    const metadata$ = sharedConnectionDataManager.metadata$.observePath([user.connectionId]).throttle(50);
+    const data$ = sharedConnectionDataManager.data$.observePath([user.connectionId]).throttle(50);
+    return Observable22.combine([metadata$, data$], ([metadata2, data2]) => {
       return { metadata: metadata2, data: data2 };
     });
-  }, [ephemeralUserDataManager, user.id]);
+  }, [sharedConnectionDataManager, user.connectionId]);
   const { metadata, data } = useObservable2(observable);
   const [, setForceUpdate] = useState18(0);
   const updatedAt = metadata?.updatedAt ?? 0;
@@ -14309,7 +14588,7 @@ var UserPointerInternal = memoGeneric(function UserPointerInternal2({
   }, [hideAfter, show, updatedAt]);
   if (!data?.pointer) return null;
   return renderUserPointer({
-    userId: user.id,
+    userId: user.connectionId,
     name: user.name,
     point: data.pointer,
     visible: show
@@ -14317,19 +14596,21 @@ var UserPointerInternal = memoGeneric(function UserPointerInternal2({
 });
 var UserPointersOverlay = memoGeneric(function UserPointers({
   userManager,
-  ephemeralUserDataManager,
+  sharedConnectionDataManager,
   renderUserPointer
 }) {
-  const currentUserId = useObservable2(ephemeralUserDataManager.currentUserId$);
+  const currentConnectionId = useObservable2(
+    sharedConnectionDataManager.currentConnectionId$
+  );
   const connectedUsers = useObservable2(userManager.connectedUsers$);
-  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, connectedUsers.map((user) => {
-    if (user.id === currentUserId) return null;
-    return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, connectedUsers.map((user) => {
+    if (user.connectionId === currentConnectionId) return null;
+    return /* @__PURE__ */ React36.createElement(
       UserPointerInternal,
       {
-        key: user.id,
+        key: user.connectionId,
         user,
-        ephemeralUserDataManager,
+        sharedConnectionDataManager,
         renderUserPointer
       }
     );