@noya-app/noya-multiplayer-react 0.1.70 → 0.1.72

package/src/inspector/StateInspector.tsx

@@ -23,6 +23,7 @@ import {
 import { ActivityEventsSection } from "./sections/ActivityEventsSection";
 import { EventsSection } from "./sections/EventsSection";
 import { HistorySection } from "./sections/HistorySection";
+import { ServerScriptLogsSection } from "./sections/ServerScriptLogsSection";
 import { exportAll, importAll } from "./serialization";
 import { StateInspectorButton } from "./StateInspectorButton";
 import {
@@ -44,6 +45,7 @@ export type StateInspectorAnchor =
 export type StateInspectorOptions = {
   colorScheme?: "light" | "dark";
   anchor?: StateInspectorAnchor;
+  advanced?: boolean;
 };
 
 export const StateInspector = memoGeneric(function StateInspector<
@@ -51,28 +53,31 @@ export const StateInspector = memoGeneric(function StateInspector<
   M extends object,
   E extends object,
   MenuT extends string = string,
+  I extends Record<string, any> = Record<string, unknown>,
 >({
   noyaManager,
   colorScheme = "light",
   anchor = "right",
   unstyled = false,
+  advanced = false,
   ...props
 }: {
-  noyaManager: NoyaManager<S, M, E, MenuT>;
+  noyaManager: NoyaManager<S, M, E, MenuT, I>;
   unstyled?: boolean;
 } & StateInspectorOptions &
   ComponentPropsWithoutRef<"div">) {
   const {
     multiplayerStateManager,
     assetManager,
-    connectedUsersManager,
+    userManager,
     secretManager,
-    ephemeralUserDataManager,
+    sharedConnectionDataManager,
     connectionEventManager,
     taskManager,
     ioManager,
     resourceManager,
     activityEventsManager,
+    logManager,
   } = noyaManager;
 
   const [didMount, setDidMount] = React.useState(false);
@@ -86,6 +91,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 [showInspector, setShowInspector] = useLocalStorageState(
     "noya-multiplayer-react-show-inspector",
@@ -111,8 +117,8 @@ export const StateInspector = memoGeneric(function StateInspector<
     "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(
@@ -139,6 +145,10 @@ export const StateInspector = memoGeneric(function StateInspector<
     "noya-multiplayer-react-show-activity-events",
     false
   );
+  const [showServerLogs, setShowServerLogs] = useLocalStorageState(
+    "noya-multiplayer-react-show-server-logs",
+    false
+  );
 
   const connectionEvents = useObservable(connectionEventManager.events$);
   useEffect(() => {
@@ -147,11 +157,38 @@ export const StateInspector = memoGeneric(function StateInspector<
         eventsContainerRef.current.scrollHeight;
     }
   }, [connectionEvents]);
+  const serverLogs = useObservable(logManager.logs$);
+  const [serverLogsPaused, setServerLogsPaused] = React.useState(false);
+  const [visibleServerLogs, setVisibleServerLogs] = React.useState(
+    serverLogs ?? []
+  );
+
+  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) {
+      serverLogsContainerRef.current.scrollTop =
+        serverLogsContainerRef.current.scrollHeight;
+    }
+  }, [showServerLogs, visibleServerLogs]);
 
   const multipeerStateInitialized = useObservable(
     multiplayerStateManager.isInitialized$
   );
-  const ephemeral = useObservable(ephemeralUserDataManager.data$);
+  const shared = useObservable(sharedConnectionDataManager.data$);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
   const assets = useObservable(assetManager.assets$);
   const resources = useObservable(resourceManager.resources$);
@@ -159,8 +196,8 @@ export const StateInspector = memoGeneric(function StateInspector<
   const assetsInitialized = useObservable(assetManager.isInitialized$);
   const secrets = useObservable(secretManager.secrets$);
   const secretsInitialized = useObservable(secretManager.isInitialized$);
-  const connectedUsers = useObservable(connectedUsersManager.connectedUsers$);
-  const userId = useObservable(connectedUsersManager.currentUserId$);
+  const connectedUsers = useObservable(userManager.connectedUsers$);
+  const connectionId = useObservable(userManager.currentConnectionId$);
   const state = useObservable(multiplayerStateManager.optimisticState$);
   const inputsInitialized = useObservable(ioManager.inputsInitialized$);
   const outputTransformsInitialized = useObservable(
@@ -263,31 +300,36 @@ export const StateInspector = memoGeneric(function StateInspector<
         }
       >
         <StateInspectorDisclosureRowInner style={{ flex: "0 0 auto" }}>
-          {connectedUsers?.map((user) => (
-            <StateInspectorRow
-              key={user.id}
-              colorScheme={colorScheme}
-              variant={user.id === userId ? "up" : undefined}
-            >
-              {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(user.id.toString(), 8, "middle")})
-            </StateInspectorRow>
-          ))}
+          {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 && (
             <div
               style={{
@@ -447,239 +489,249 @@ export const StateInspector = memoGeneric(function StateInspector<
           ))}
         </StateInspectorDisclosureRowInner>
       </StateInspectorDisclosureSection>
-      <StateInspectorDisclosureSection
-        title={
-          <StateInspectorTitleLabel>
-            Resources ({resources.length})
-            <ColoredDot type={resourcesInitialized ? "success" : "error"} />
-          </StateInspectorTitleLabel>
-        }
-        colorScheme={colorScheme}
-        open={showResources}
-        setOpen={setShowResources}
-        right={
-          <span style={{ display: "flex", gap: "10px" }}>
-            <StateInspectorButton
-              theme={theme}
-              onClick={async () => {
-                const ok = confirm(
-                  "Are you sure you want to delete all resources?"
-                );
-                if (!ok) return;
-                await resourceManager.deleteResource(
-                  resources.map((resource) => ({ id: resource.id }))
-                );
-              }}
-            >
-              Delete all
-            </StateInspectorButton>
-            <StateInspectorButton
-              theme={theme}
-              onClick={async () => {
-                const path = prompt("Enter directory path") || uuid();
-                await resourceManager.createResource({
-                  type: "directory",
-                  path,
-                });
-              }}
-            >
-              Create Directory
-            </StateInspectorButton>
+      {advanced && (
+        <StateInspectorDisclosureSection
+          title={
+            <StateInspectorTitleLabel>
+              Resources ({resources.length})
+              <ColoredDot type={resourcesInitialized ? "success" : "error"} />
+            </StateInspectorTitleLabel>
+          }
+          colorScheme={colorScheme}
+          open={showResources}
+          setOpen={setShowResources}
+          right={
+            <span style={{ display: "flex", gap: "10px" }}>
+              <StateInspectorButton
+                theme={theme}
+                onClick={async () => {
+                  const ok = confirm(
+                    "Are you sure you want to delete all resources?"
+                  );
+                  if (!ok) return;
+                  await resourceManager.deleteResource(
+                    resources.map((resource) => ({ id: resource.id }))
+                  );
+                }}
+              >
+                Delete all
+              </StateInspectorButton>
+              <StateInspectorButton
+                theme={theme}
+                onClick={async () => {
+                  const path = prompt("Enter directory path") || uuid();
+                  await resourceManager.createResource({
+                    type: "directory",
+                    path,
+                  });
+                }}
+              >
+                Create Directory
+              </StateInspectorButton>
+              <StateInspectorButton
+                theme={theme}
+                onClick={async () => {
+                  const file = await uploadFile();
+
+                  resourceManager.createResource({
+                    type: "asset",
+                    path: file.name || uuid(),
+                    asset: {
+                      content: Base64.encode(await file.arrayBuffer()),
+                      contentType: file.type,
+                      encoding: "base64",
+                    },
+                  });
+                }}
+              >
+                Create Asset
+              </StateInspectorButton>
+            </span>
+          }
+        >
+          <StateInspectorDisclosureRowInner>
+            {resources?.map((resource) => (
+              <StateInspectorRow key={resource.id} colorScheme={colorScheme}>
+                <ObjectInspector
+                  name={resource.path}
+                  data={resource}
+                  theme={theme}
+                />
+                <div style={{ display: "flex", gap: "4px" }}>
+                  <StateInspectorButton
+                    theme={theme}
+                    onClick={() =>
+                      resourceManager.deleteResource({ id: resource.id })
+                    }
+                  >
+                    Delete
+                  </StateInspectorButton>
+                  <StateInspectorButton
+                    theme={theme}
+                    onClick={() => {
+                      const path = prompt("Enter new path", resource.path);
+                      if (!path) return;
+                      resourceManager.updateResource({ id: resource.id, path });
+                    }}
+                  >
+                    Rename
+                  </StateInspectorButton>
+                </div>
+              </StateInspectorRow>
+            ))}
+          </StateInspectorDisclosureRowInner>
+        </StateInspectorDisclosureSection>
+      )}
+      {advanced && (
+        <StateInspectorDisclosureSection
+          title={
+            <StateInspectorTitleLabel>
+              Secrets
+              <ColoredDot type={secretsInitialized ? "success" : "error"} />
+            </StateInspectorTitleLabel>
+          }
+          colorScheme={colorScheme}
+          open={showSecrets}
+          setOpen={setShowSecrets}
+          right={
             <StateInspectorButton
               theme={theme}
-              onClick={async () => {
-                const file = await uploadFile();
-
-                resourceManager.createResource({
-                  type: "asset",
-                  path: file.name || uuid(),
-                  asset: {
-                    content: Base64.encode(await file.arrayBuffer()),
-                    contentType: file.type,
-                    encoding: "base64",
-                  },
-                });
+              onClick={() => {
+                const name = prompt("Enter secret name");
+                if (!name) return;
+                const value = prompt("Enter secret value");
+                if (!value) return;
+                secretManager.createSecret(null, name, value);
               }}
             >
-              Create Asset
+              Create
             </StateInspectorButton>
-          </span>
-        }
-      >
-        <StateInspectorDisclosureRowInner>
-          {resources?.map((resource) => (
-            <StateInspectorRow key={resource.id} colorScheme={colorScheme}>
-              <ObjectInspector
-                name={resource.path}
-                data={resource}
-                theme={theme}
-              />
-              <div style={{ display: "flex", gap: "4px" }}>
+          }
+        >
+          <StateInspectorDisclosureRowInner>
+            {secrets.map((secret) => (
+              <StateInspectorRow key={secret.id} colorScheme={colorScheme}>
+                <ObjectInspector data={secret} theme={theme} />
                 <StateInspectorButton
                   theme={theme}
-                  onClick={() =>
-                    resourceManager.deleteResource({ id: resource.id })
-                  }
+                  onClick={() => secretManager.deleteSecret(secret.id)}
                 >
                   Delete
                 </StateInspectorButton>
-                <StateInspectorButton
-                  theme={theme}
-                  onClick={() => {
-                    const path = prompt("Enter new path", resource.path);
-                    if (!path) return;
-                    resourceManager.updateResource({ id: resource.id, path });
-                  }}
-                >
-                  Rename
-                </StateInspectorButton>
-              </div>
-            </StateInspectorRow>
-          ))}
-        </StateInspectorDisclosureRowInner>
-      </StateInspectorDisclosureSection>
-      <StateInspectorDisclosureSection
-        title={
-          <StateInspectorTitleLabel>
-            Secrets
-            <ColoredDot type={secretsInitialized ? "success" : "error"} />
-          </StateInspectorTitleLabel>
-        }
-        colorScheme={colorScheme}
-        open={showSecrets}
-        setOpen={setShowSecrets}
-        right={
-          <StateInspectorButton
-            theme={theme}
-            onClick={() => {
-              const name = prompt("Enter secret name");
-              if (!name) return;
-              const value = prompt("Enter secret value");
-              if (!value) return;
-              secretManager.createSecret(null, name, value);
-            }}
-          >
-            Create
-          </StateInspectorButton>
-        }
-      >
-        <StateInspectorDisclosureRowInner>
-          {secrets.map((secret) => (
-            <StateInspectorRow key={secret.id} colorScheme={colorScheme}>
-              <ObjectInspector data={secret} theme={theme} />
-              <StateInspectorButton
-                theme={theme}
-                onClick={() => secretManager.deleteSecret(secret.id)}
+              </StateInspectorRow>
+            ))}
+          </StateInspectorDisclosureRowInner>
+        </StateInspectorDisclosureSection>
+      )}
+      {advanced && (
+        <StateInspectorDisclosureSection
+          open={showInputs}
+          setOpen={setShowInputs}
+          title={
+            <StateInspectorTitleLabel>
+              Inputs
+              <ColoredDot type={inputsInitialized ? "success" : "error"} />
+            </StateInspectorTitleLabel>
+          }
+          colorScheme={colorScheme}
+        >
+          <StateInspectorDisclosureRowInner>
+            {inputs?.map((input: Input) => (
+              <StateInspectorRow key={input.id} colorScheme={colorScheme}>
+                <ObjectInspector data={input} theme={theme} />
+              </StateInspectorRow>
+            ))}
+            {!inputs?.length && (
+              <div
+                style={{
+                  padding: "12px",
+                  fontSize: "12px",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "4px",
+                }}
               >
-                Delete
-              </StateInspectorButton>
-            </StateInspectorRow>
-          ))}
-        </StateInspectorDisclosureRowInner>
-      </StateInspectorDisclosureSection>{" "}
-      <StateInspectorDisclosureSection
-        open={showInputs}
-        setOpen={setShowInputs}
-        title={
-          <StateInspectorTitleLabel>
-            Inputs
-            <ColoredDot type={inputsInitialized ? "success" : "error"} />
-          </StateInspectorTitleLabel>
-        }
-        colorScheme={colorScheme}
-      >
-        <StateInspectorDisclosureRowInner>
-          {inputs?.map((input: Input) => (
-            <StateInspectorRow key={input.id} colorScheme={colorScheme}>
-              <ObjectInspector data={input} theme={theme} />
-            </StateInspectorRow>
-          ))}
-          {!inputs?.length && (
-            <div
-              style={{
-                padding: "12px",
-                fontSize: "12px",
-                display: "flex",
-                flexDirection: "column",
-                gap: "4px",
-              }}
-            >
-              <span>No inputs</span>
-            </div>
-          )}
-        </StateInspectorDisclosureRowInner>
-      </StateInspectorDisclosureSection>
-      <StateInspectorDisclosureSection
-        open={showOutputTransforms}
-        setOpen={setShowOutputTransforms}
-        title={
-          <StateInspectorTitleLabel>
-            Output Transforms
-            <ColoredDot
-              type={outputTransformsInitialized ? "success" : "error"}
-            />
-          </StateInspectorTitleLabel>
-        }
-        colorScheme={colorScheme}
-      >
-        <StateInspectorDisclosureRowInner>
-          {outputTransforms?.map((transform: OutputTransform) => (
-            <StateInspectorRow key={transform.id} colorScheme={colorScheme}>
-              <ObjectInspector data={transform} theme={theme} />
-            </StateInspectorRow>
-          ))}
-          {!outputTransforms?.length && (
-            <div
-              style={{
-                padding: "12px",
-                fontSize: "12px",
-                display: "flex",
-                flexDirection: "column",
-                gap: "4px",
-              }}
-            >
-              <span>No output transforms</span>
-            </div>
-          )}
-        </StateInspectorDisclosureRowInner>
-      </StateInspectorDisclosureSection>
-      <StateInspectorDisclosureSection
-        title="Tasks"
-        colorScheme={colorScheme}
-        open={showTasks}
-        setOpen={setShowTasks}
-      >
-        <StateInspectorDisclosureRowInner>
-          {tasks?.map((task) => (
-            <StateInspectorRow
-              key={task.id}
-              colorScheme={colorScheme}
-              style={{
-                backgroundColor:
-                  task.status === "done"
-                    ? "rgba(0,255,0,0.2)"
-                    : task.status === "error"
-                      ? "rgba(255,0,0,0.2)"
-                      : undefined,
-              }}
-            >
-              <ObjectInspector
-                name={task.name}
-                data={task.payload}
-                theme={theme}
+                <span>No inputs</span>
+              </div>
+            )}
+          </StateInspectorDisclosureRowInner>
+        </StateInspectorDisclosureSection>
+      )}
+      {advanced && (
+        <StateInspectorDisclosureSection
+          open={showOutputTransforms}
+          setOpen={setShowOutputTransforms}
+          title={
+            <StateInspectorTitleLabel>
+              Output Transforms
+              <ColoredDot
+                type={outputTransformsInitialized ? "success" : "error"}
               />
-            </StateInspectorRow>
-          ))}
-        </StateInspectorDisclosureRowInner>
-      </StateInspectorDisclosureSection>
+            </StateInspectorTitleLabel>
+          }
+          colorScheme={colorScheme}
+        >
+          <StateInspectorDisclosureRowInner>
+            {outputTransforms?.map((transform: OutputTransform) => (
+              <StateInspectorRow key={transform.id} colorScheme={colorScheme}>
+                <ObjectInspector data={transform} theme={theme} />
+              </StateInspectorRow>
+            ))}
+            {!outputTransforms?.length && (
+              <div
+                style={{
+                  padding: "12px",
+                  fontSize: "12px",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "4px",
+                }}
+              >
+                <span>No output transforms</span>
+              </div>
+            )}
+          </StateInspectorDisclosureRowInner>
+        </StateInspectorDisclosureSection>
+      )}
+      {advanced && (
+        <StateInspectorDisclosureSection
+          title="Tasks"
+          colorScheme={colorScheme}
+          open={showTasks}
+          setOpen={setShowTasks}
+        >
+          <StateInspectorDisclosureRowInner>
+            {tasks?.map((task) => (
+              <StateInspectorRow
+                key={task.id}
+                colorScheme={colorScheme}
+                style={{
+                  backgroundColor:
+                    task.status === "done"
+                      ? "rgba(0,255,0,0.2)"
+                      : task.status === "error"
+                        ? "rgba(255,0,0,0.2)"
+                        : undefined,
+                }}
+              >
+                <ObjectInspector
+                  name={task.name}
+                  data={task.payload}
+                  theme={theme}
+                />
+              </StateInspectorRow>
+            ))}
+          </StateInspectorDisclosureRowInner>
+        </StateInspectorDisclosureSection>
+      )}
       <StateInspectorDisclosureSection
-        open={showEphemeral}
-        setOpen={setShowEphemeral}
-        title="Ephemeral User Data"
+        open={showShared}
+        setOpen={setShowShared}
+        title="Shared Connection Data"
         colorScheme={colorScheme}
       >
         <StateInspectorDisclosureRowInner>
-          {Object.entries(ephemeral).map(([key, value]) => (
+          {Object.entries(shared).map(([key, value]) => (
             <StateInspectorRow key={key} colorScheme={colorScheme}>
               <ObjectInspector
                 name={key}
@@ -691,13 +743,24 @@ export const StateInspector = memoGeneric(function StateInspector<
           ))}
         </StateInspectorDisclosureRowInner>
       </StateInspectorDisclosureSection>
-      <ActivityEventsSection
+      <ServerScriptLogsSection
         colorScheme={colorScheme}
-        activityEventsContainerRef={activityEventsContainerRef}
-        showEvents={showActivityEvents}
-        setShowEvents={setShowActivityEvents}
-        activityEventsManager={activityEventsManager}
+        showLogs={showServerLogs}
+        setShowLogs={setShowServerLogs}
+        logs={visibleServerLogs}
+        paused={serverLogsPaused}
+        onTogglePaused={toggleServerLogsPaused}
+        containerRef={serverLogsContainerRef}
       />
+      {advanced && (
+        <ActivityEventsSection
+          colorScheme={colorScheme}
+          activityEventsContainerRef={activityEventsContainerRef}
+          showEvents={showActivityEvents}
+          setShowEvents={setShowActivityEvents}
+          activityEventsManager={activityEventsManager}
+        />
+      )}
       <EventsSection<S>
         connectionEvents={connectionEvents}
         colorScheme={colorScheme}