@noya-app/noya-multiplayer-react 0.1.61 → 0.1.63

package/src/inspector/StateInspector.tsx

@@ -1,246 +1,35 @@
 "use client";
 
 import { Input, OutputTransform } from "@noya-app/noya-schemas";
-import { memoGeneric } from "@noya-app/react-utils";
-import { ExtendedPathKey, NoyaManager } from "@noya-app/state-manager";
+import { downloadBlob, memoGeneric } from "@noya-app/react-utils";
+import { NoyaManager } from "@noya-app/state-manager";
 import React, {
   CSSProperties,
   ComponentPropsWithoutRef,
-  FC,
+  useCallback,
   useEffect,
   useLayoutEffect,
 } from "react";
-import {
-  ObjectInspector,
-  ObjectLabel,
-  ObjectName,
-  ObjectPreview,
-  chromeDark,
-  chromeLight,
-} from "react-inspector";
+import { ObjectInspector } from "react-inspector";
 import { useManagedHistory } from "../hooks";
 import { useObservable } from "../useObservable";
+import { ColoredDot } from "./ColoredDot";
+import {
+  getStateInspectorBorderColor,
+  getStateInspectorTheme,
+} from "./inspectorTheme";
+import { EventsSection } from "./sections/EventsSection";
+import { HistorySection } from "./sections/HistorySection";
+import { exportAll, importAll } from "./serialization";
+import { StateInspectorButton } from "./StateInspectorButton";
+import {
+  StateInspectorDisclosureRowInner,
+  StateInspectorDisclosureSection,
+} from "./StateInspectorDisclosureSection";
+import { StateInspectorRow } from "./StateInspectorRow";
+import { StateInspectorToggleButton } from "./StateInspectorToggleButton";
 import { useLocalStorageState } from "./useLocalStorageState";
-
-const lightTheme = {
-  ...chromeLight,
-  BASE_BACKGROUND_COLOR: "transparent",
-  OBJECT_NAME_COLOR: "rgba(0,0,0,0.7)",
-} as any;
-
-const darkTheme = {
-  ...chromeDark,
-  BASE_BACKGROUND_COLOR: "transparent",
-  OBJECT_NAME_COLOR: "rgba(255,255,255,0.7)",
-} as any;
-
-const styles = {
-  sectionInner: {
-    flex: "1 1 0",
-    overflowY: "auto",
-    overflowX: "hidden",
-    display: "flex",
-    flexDirection: "column",
-  },
-} as const;
-
-function ToggleButton({
-  showInspector,
-  setShowInspector,
-  theme,
-  anchor,
-}: {
-  showInspector: boolean;
-  setShowInspector: (value: boolean) => void;
-  theme: typeof chromeLight;
-  anchor: StateInspectorAnchor;
-}) {
-  const isRightAnchor = anchor === "right";
-
-  const rightIcon = (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="size-6"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
-      />
-    </svg>
-  );
-
-  const leftIcon = (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="size-6"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"
-      />
-    </svg>
-  );
-
-  return (
-    <span
-      role="button"
-      style={{
-        flex: "0",
-        appearance: "none",
-        color: theme.BASE_COLOR,
-        border: "none",
-        fontSize: "12px",
-        whiteSpace: "nowrap",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "2px 0",
-      }}
-      onClick={(event) => {
-        event.stopPropagation();
-
-        setShowInspector(!showInspector);
-      }}
-    >
-      {showInspector ? (
-        "Hide Inspector"
-      ) : (
-        <span style={{ width: "12px", height: "12px" }}>
-          {isRightAnchor ? rightIcon : leftIcon}
-        </span>
-      )}
-    </span>
-  );
-}
-
-function DisclosureSection({
-  open,
-  setOpen,
-  title,
-  right,
-  children,
-  colorScheme,
-  isFirst,
-  style,
-}: {
-  open: boolean;
-  setOpen?: (value: boolean) => void;
-  title: React.ReactNode;
-  right?: React.ReactNode;
-  children: React.ReactNode;
-  colorScheme: "light" | "dark";
-  isFirst?: boolean;
-  style?: CSSProperties;
-}) {
-  const theme = colorScheme === "light" ? lightTheme : darkTheme;
-
-  const borderColor =
-    colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
-
-  return (
-    <div
-      style={{
-        flex: open ? "1 1 0" : "0",
-        display: "flex",
-        flexDirection: "column",
-        ...style,
-      }}
-    >
-      <div
-        onClick={() => setOpen?.(!open)}
-        style={{
-          cursor: "default",
-          fontSize: "12px",
-          padding: "4px 10px",
-          display: "flex",
-          alignItems: "center",
-          ...(!isFirst && { borderTop: `1px solid ${borderColor}` }),
-          ...(open && { borderBottom: `1px solid ${borderColor}` }),
-        }}
-      >
-        {setOpen && (
-          <Arrow
-            expanded={open}
-            style={{
-              fontSize: theme.ARROW_FONT_SIZE,
-              marginRight: theme.ARROW_MARGIN_RIGHT + 1,
-              color: theme.ARROW_COLOR,
-            }}
-          />
-        )}
-        <span style={{ flex: "1 1 0", userSelect: "none" }}>{title}</span>
-        {right}
-      </div>
-      {open && children}
-    </div>
-  );
-}
-
-function InspectorRow({
-  children,
-  colorScheme,
-  selected,
-  style,
-  variant,
-}: {
-  children: React.ReactNode;
-  colorScheme: "light" | "dark";
-  selected?: boolean;
-  style?: CSSProperties;
-  variant?: "up" | "down";
-}) {
-  const solidBorderColor =
-    colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
-
-  return (
-    <div
-      style={{
-        borderBottom: `1px solid ${solidBorderColor}`,
-        fontSize: "12px",
-        fontFamily: "Menlo, monospace",
-        padding: "2px 12px 1px",
-        display: "flex",
-        alignItems: "center",
-        background:
-          variant === "up"
-            ? "rgba(0,255,0,0.1)"
-            : variant === "down"
-              ? "transparent"
-              : selected
-                ? "rgb(59 130 246 / 15%)"
-                : undefined,
-        // background:
-        //   colorScheme === "light"
-        //     ? "rgba(0,0,0,0.05)"
-        //     : "rgba(255,255,255,0.05)",
-        ...style,
-      }}
-    >
-      <span
-        style={{
-          fontFamily: "Menlo, monospace",
-          fontSize: "11px",
-          borderRadius: 4,
-          display: "inline-block",
-        }}
-      >
-        {children}
-      </span>
-    </div>
-  );
-}
-
-const HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
+import { ellipsis, uploadFile } from "./utils";
 
 export type StateInspectorAnchor =
   | "left"
@@ -290,7 +79,6 @@ export const StateInspector = memoGeneric(function StateInspector<
   }, []);
 
   const eventsContainerRef = React.useRef<HTMLDivElement>(null);
-  const historyContainerRef = React.useRef<HTMLDivElement>(null);
 
   const [showInspector, setShowInspector] = useLocalStorageState(
     "noya-multiplayer-react-show-inspector",
@@ -363,34 +151,8 @@ export const StateInspector = memoGeneric(function StateInspector<
     ioManager.outputTransformsInitialized$
   );
 
-  useEffect(() => {
-    if (historyContainerRef.current) {
-      historyContainerRef.current.scrollTop =
-        historyContainerRef.current.scrollHeight;
-    }
-  }, [historySnapshot]);
-
-  // If history index changes, scroll to the new history entry into view
-  useEffect(() => {
-    if (!historyContainerRef.current) return;
-
-    const historyEntry = historyContainerRef.current.querySelector(
-      `#${HISTORY_ELEMENT_PREFIX}${historySnapshot.historyIndex}`
-    );
-
-    if (historyEntry) {
-      historyEntry.scrollIntoView({
-        block: "nearest",
-        inline: "nearest",
-      });
-    }
-  }, [historySnapshot.historyIndex]);
-
-  const theme = colorScheme === "light" ? lightTheme : darkTheme;
-  // const borderColor =
-  //   colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
-  const solidBorderColor =
-    colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
+  const theme = getStateInspectorTheme(colorScheme);
+  const solidBorderColor = getStateInspectorBorderColor(colorScheme);
 
   const baseStyle: CSSProperties = {
     position: "fixed",
@@ -413,6 +175,25 @@ export const StateInspector = memoGeneric(function StateInspector<
     lineHeight: "13px",
   };
 
+  const handleExportAll = useCallback(async () => {
+    const buffer = await exportAll(noyaManager);
+
+    downloadBlob(new Blob([buffer]), "state.zip");
+  }, [noyaManager]);
+
+  const handleImportAll = useCallback(async () => {
+    const file = await uploadFile();
+    const buffer = await file.arrayBuffer();
+
+    importAll(buffer, noyaManager, {
+      shouldAllowSchemaChange: () => {
+        return confirm(
+          `The imported state uses a different schema than the schema this app expects. Do you want to continue?`
+        );
+      },
+    });
+  }, [noyaManager]);
+
   if (!didMount) return null;
 
   if (!showInspector) {
@@ -429,7 +210,7 @@ export const StateInspector = memoGeneric(function StateInspector<
         }}
         onClick={() => setShowInspector(true)}
       >
-        <ToggleButton
+        <StateInspectorToggleButton
           showInspector={showInspector}
           setShowInspector={setShowInspector}
           theme={theme}
@@ -447,7 +228,7 @@ export const StateInspector = memoGeneric(function StateInspector<
         ...props.style,
       }}
     >
-      <DisclosureSection
+      <StateInspectorDisclosureSection
         isFirst
         open={showUsers}
         setOpen={setShowUsers}
@@ -458,7 +239,7 @@ export const StateInspector = memoGeneric(function StateInspector<
           maxHeight: "200px",
         }}
         right={
-          <ToggleButton
+          <StateInspectorToggleButton
             showInspector={showInspector}
             setShowInspector={setShowInspector}
             theme={theme}
@@ -466,9 +247,9 @@ export const StateInspector = memoGeneric(function StateInspector<
           />
         }
       >
-        <div style={{ ...styles.sectionInner, flex: "0 0 auto" }}>
+        <StateInspectorDisclosureRowInner style={{ flex: "0 0 auto" }}>
           {connectedUsers?.map((user) => (
-            <InspectorRow
+            <StateInspectorRow
               key={user.id}
               colorScheme={colorScheme}
               variant={user.id === userId ? "up" : undefined}
@@ -490,7 +271,7 @@ export const StateInspector = memoGeneric(function StateInspector<
                 />
               )}
               {user.name} ({ellipsis(user.id.toString(), 8, "middle")})
-            </InspectorRow>
+            </StateInspectorRow>
           ))}
           {!connectedUsers && (
             <div
@@ -505,9 +286,9 @@ export const StateInspector = memoGeneric(function StateInspector<
               <span>No connected users</span>
             </div>
           )}
-        </div>
-      </DisclosureSection>
-      <DisclosureSection
+        </StateInspectorDisclosureRowInner>
+      </StateInspectorDisclosureSection>
+      <StateInspectorDisclosureSection
         title={
           <TitleLabel>
             Data
@@ -523,10 +304,16 @@ export const StateInspector = memoGeneric(function StateInspector<
           <span
             style={{
               display: "flex",
-              gap: "4px",
+              gap: "12px",
             }}
           >
-            <SmallButton
+            <StateInspectorButton theme={theme} onClick={handleImportAll}>
+              Import
+            </StateInspectorButton>
+            <StateInspectorButton theme={theme} onClick={handleExportAll}>
+              Export
+            </StateInspectorButton>
+            <StateInspectorButton
               // disabled={!historySnapshot.canUndo}
               theme={theme}
               onClick={() => {
@@ -534,207 +321,49 @@ export const StateInspector = memoGeneric(function StateInspector<
               }}
             >
               Reset
-            </SmallButton>
+            </StateInspectorButton>
           </span>
         }
       >
-        <div style={styles.sectionInner}>
-          <InspectorRow colorScheme={colorScheme}>
+        <StateInspectorDisclosureRowInner>
+          <StateInspectorRow colorScheme={colorScheme}>
             <ObjectInspector
               name={multiplayerStateManager.schema ? "state" : undefined}
               data={state}
               theme={theme}
             />
-          </InspectorRow>
+          </StateInspectorRow>
           {multiplayerStateManager.schema && (
-            <InspectorRow colorScheme={colorScheme}>
+            <StateInspectorRow colorScheme={colorScheme}>
               <ObjectInspector
                 name="schema"
                 data={multiplayerStateManager.schema}
                 theme={theme}
               />
-            </InspectorRow>
+            </StateInspectorRow>
           )}
-        </div>
-      </DisclosureSection>
-      <DisclosureSection
-        open={showHistory}
-        setOpen={setShowHistory}
-        title="History"
+        </StateInspectorDisclosureRowInner>
+      </StateInspectorDisclosureSection>
+      <HistorySection
+        showHistory={showHistory}
+        setShowHistory={setShowHistory}
         colorScheme={colorScheme}
-        right={
-          <span
-            style={{
-              display: "flex",
-              gap: "4px",
-            }}
-          >
-            <SmallButton
-              disabled={!historySnapshot.canUndo}
-              theme={theme}
-              onClick={() => {
-                multiplayerStateManager.undo();
-              }}
-            >
-              <span style={{ width: "12px", height: "12px" }}>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="1em"
-                  height="1em"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M12 5H7V2L1 6l6 4V7h5c2.2 0 4 1.8 4 4s-1.8 4-4 4H7v2h5c3.3 0 6-2.7 6-6s-2.7-6-6-6"
-                  />
-                </svg>
-              </span>
-            </SmallButton>
-            <SmallButton
-              disabled={!historySnapshot.canRedo}
-              theme={theme}
-              onClick={() => {
-                multiplayerStateManager.redo();
-              }}
-            >
-              <span style={{ width: "12px", height: "12px" }}>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="1em"
-                  height="1em"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M8 5h5V2l6 4l-6 4V7H8c-2.2 0-4 1.8-4 4s1.8 4 4 4h5v2H8c-3.3 0-6-2.7-6-6s2.7-6 6-6"
-                  />
-                </svg>
-              </span>
-            </SmallButton>
-          </span>
-        }
-      >
-        <div ref={historyContainerRef} style={styles.sectionInner}>
-          <div
-            id={`${HISTORY_ELEMENT_PREFIX}0`}
-            style={{
-              borderBottom: `1px solid ${solidBorderColor}`,
-              fontSize: "12px",
-              fontFamily: "Menlo, monospace",
-              padding: "2px 12px 1px",
-              display: "flex",
-              alignItems: "center",
-              background:
-                historySnapshot.historyIndex === 0
-                  ? "rgb(59 130 246 / 15%)"
-                  : undefined,
-            }}
-          >
-            <span
-              style={{
-                fontFamily: "Menlo, monospace",
-                fontSize: "11px",
-                borderRadius: 4,
-                display: "inline-block",
-              }}
-            >
-              Initial state
-            </span>
-          </div>
-          {historySnapshot.history.map((entry, index) => (
-            <div
-              id={`${HISTORY_ELEMENT_PREFIX}${index + 1}`}
-              key={index}
-              style={{
-                padding: "0px 12px 1px",
-                borderBottom: `1px solid ${solidBorderColor}`,
-                background:
-                  index + 1 === historySnapshot.historyIndex
-                    ? "rgb(59 130 246 / 15%)"
-                    : undefined,
-              }}
-            >
-              {"name" in entry.metadata &&
-                typeof entry.metadata.name === "string" && (
-                  <pre
-                    style={{
-                      fontSize: "11px",
-                      display: "flex",
-                      flexWrap: "wrap",
-                      margin: 0,
-                    }}
-                  >
-                    {entry.metadata.name}
-                  </pre>
-                )}
-              {entry.redoPatches?.map((patch, j) => (
-                <pre
-                  key={j}
-                  style={{
-                    fontSize: "11px",
-                    display: "flex",
-                    flexWrap: "wrap",
-                    margin: 0,
-                  }}
-                >
-                  {patch.op === "add" && (
-                    <>
-                      <span style={{ fontStyle: "italic" }}>
-                        {pathToString(patch.path)}
-                      </span>
-                      {" = "}
-                      <ObjectInspector data={patch.value} theme={theme} />
-                    </>
-                  )}
-                  {patch.op === "replace" && (
-                    <>
-                      <span style={{ fontStyle: "italic" }}>
-                        {pathToString(patch.path)}
-                      </span>
-                      {" = "}
-                      <ObjectInspector data={patch.value} theme={theme} />
-                    </>
-                  )}
-                  {patch.op === "remove" && (
-                    <>
-                      <span style={{ color: theme.OBJECT_VALUE_STRING_COLOR }}>
-                        delete{" "}
-                      </span>
-                      <span style={{ fontStyle: "italic" }}>
-                        {pathToString(patch.path)}
-                      </span>
-                    </>
-                  )}
-                  {patch.op === "move" && (
-                    <>
-                      <span style={{ fontStyle: "italic" }}>
-                        {pathToString(patch.from!)}
-                      </span>
-                      {" -> "}
-                      <span style={{ fontStyle: "italic" }}>
-                        {pathToString(patch.path)}
-                      </span>
-                    </>
-                  )}
-                </pre>
-              ))}
-            </div>
-          ))}
-        </div>
-      </DisclosureSection>
-      <DisclosureSection
+        historySnapshot={historySnapshot}
+        multiplayerStateManager={multiplayerStateManager}
+      />
+      <StateInspectorDisclosureSection
         open={showAssets}
         setOpen={setShowAssets}
         title={
           <TitleLabel>
-            Assets
+            Assets ({assets.length})
             <ColoredDot type={assetsInitialized ? "success" : "error"} />
           </TitleLabel>
         }
         colorScheme={colorScheme}
         right={
           <span style={{ display: "flex", gap: "10px" }}>
-            <SmallButton
+            <StateInspectorButton
               theme={theme}
               onClick={() => {
                 console.info(
@@ -745,8 +374,8 @@ export const StateInspector = memoGeneric(function StateInspector<
               }}
             >
               Reload
-            </SmallButton>
-            <SmallButton
+            </StateInspectorButton>
+            <StateInspectorButton
               theme={theme}
               onClick={() => {
                 // get file input
@@ -767,25 +396,25 @@ export const StateInspector = memoGeneric(function StateInspector<
               }}
             >
               Upload
-            </SmallButton>
+            </StateInspectorButton>
           </span>
         }
       >
-        <div style={styles.sectionInner}>
+        <StateInspectorDisclosureRowInner>
           {assets.map((asset) => (
-            <InspectorRow key={asset.id} colorScheme={colorScheme}>
+            <StateInspectorRow key={asset.id} colorScheme={colorScheme}>
               <ObjectInspector name={asset.id} data={asset} theme={theme} />
-              <SmallButton
+              <StateInspectorButton
                 theme={theme}
                 onClick={() => assetManager.delete(asset.id)}
               >
                 Delete
-              </SmallButton>
-            </InspectorRow>
+              </StateInspectorButton>
+            </StateInspectorRow>
           ))}
-        </div>
-      </DisclosureSection>
-      <DisclosureSection
+        </StateInspectorDisclosureRowInner>
+      </StateInspectorDisclosureSection>
+      <StateInspectorDisclosureSection
         title={
           <TitleLabel>
             Secrets
@@ -796,7 +425,7 @@ export const StateInspector = memoGeneric(function StateInspector<
         open={showSecrets}
         setOpen={setShowSecrets}
         right={
-          <SmallButton
+          <StateInspectorButton
             theme={theme}
             onClick={() => {
               const name = prompt("Enter secret name");
@@ -807,24 +436,24 @@ export const StateInspector = memoGeneric(function StateInspector<
             }}
           >
             Create
-          </SmallButton>
+          </StateInspectorButton>
         }
       >
-        <div style={styles.sectionInner}>
+        <StateInspectorDisclosureRowInner>
           {secrets.map((secret) => (
-            <InspectorRow key={secret.id} colorScheme={colorScheme}>
+            <StateInspectorRow key={secret.id} colorScheme={colorScheme}>
               <ObjectInspector data={secret} theme={theme} />
-              <SmallButton
+              <StateInspectorButton
                 theme={theme}
                 onClick={() => secretManager.deleteSecret(secret.id)}
               >
                 Delete
-              </SmallButton>
-            </InspectorRow>
+              </StateInspectorButton>
+            </StateInspectorRow>
           ))}
-        </div>
-      </DisclosureSection>{" "}
-      <DisclosureSection
+        </StateInspectorDisclosureRowInner>
+      </StateInspectorDisclosureSection>{" "}
+      <StateInspectorDisclosureSection
         open={showInputs}
         setOpen={setShowInputs}
         title={
@@ -835,11 +464,11 @@ export const StateInspector = memoGeneric(function StateInspector<
         }
         colorScheme={colorScheme}
       >
-        <div style={styles.sectionInner}>
+        <StateInspectorDisclosureRowInner>
           {inputs?.map((input: Input) => (
-            <InspectorRow key={input.id} colorScheme={colorScheme}>
+            <StateInspectorRow key={input.id} colorScheme={colorScheme}>
               <ObjectInspector data={input} theme={theme} />
-            </InspectorRow>
+            </StateInspectorRow>
           ))}
           {!inputs?.length && (
             <div
@@ -854,9 +483,9 @@ export const StateInspector = memoGeneric(function StateInspector<
               <span>No inputs</span>
             </div>
           )}
-        </div>
-      </DisclosureSection>
-      <DisclosureSection
+        </StateInspectorDisclosureRowInner>
+      </StateInspectorDisclosureSection>
+      <StateInspectorDisclosureSection
         open={showOutputTransforms}
         setOpen={setShowOutputTransforms}
         title={
@@ -869,11 +498,11 @@ export const StateInspector = memoGeneric(function StateInspector<
         }
         colorScheme={colorScheme}
       >
-        <div style={styles.sectionInner}>
+        <StateInspectorDisclosureRowInner>
           {outputTransforms?.map((transform: OutputTransform) => (
-            <InspectorRow key={transform.id} colorScheme={colorScheme}>
+            <StateInspectorRow key={transform.id} colorScheme={colorScheme}>
               <ObjectInspector data={transform} theme={theme} />
-            </InspectorRow>
+            </StateInspectorRow>
           ))}
           {!outputTransforms?.length && (
             <div
@@ -888,17 +517,17 @@ export const StateInspector = memoGeneric(function StateInspector<
               <span>No output transforms</span>
             </div>
           )}
-        </div>
-      </DisclosureSection>
-      <DisclosureSection
+        </StateInspectorDisclosureRowInner>
+      </StateInspectorDisclosureSection>
+      <StateInspectorDisclosureSection
         title="Tasks"
         colorScheme={colorScheme}
         open={showTasks}
         setOpen={setShowTasks}
       >
-        <div style={styles.sectionInner}>
+        <StateInspectorDisclosureRowInner>
           {tasks?.map((task) => (
-            <InspectorRow
+            <StateInspectorRow
               key={task.id}
               colorScheme={colorScheme}
               style={{
@@ -915,265 +544,40 @@ export const StateInspector = memoGeneric(function StateInspector<
                 data={task.payload}
                 theme={theme}
               />
-            </InspectorRow>
+            </StateInspectorRow>
           ))}
-        </div>
-      </DisclosureSection>
-      <DisclosureSection
+        </StateInspectorDisclosureRowInner>
+      </StateInspectorDisclosureSection>
+      <StateInspectorDisclosureSection
         open={showEphemeral}
         setOpen={setShowEphemeral}
         title="Ephemeral User Data"
         colorScheme={colorScheme}
       >
-        <div style={styles.sectionInner}>
+        <StateInspectorDisclosureRowInner>
           {Object.entries(ephemeral).map(([key, value]) => (
-            <InspectorRow key={key} colorScheme={colorScheme}>
+            <StateInspectorRow key={key} colorScheme={colorScheme}>
               <ObjectInspector
                 name={key}
                 data={value}
                 theme={theme}
                 expandLevel={10}
               />
-            </InspectorRow>
+            </StateInspectorRow>
           ))}
-        </div>
-      </DisclosureSection>
-      <DisclosureSection
-        open={showEvents}
-        setOpen={setShowEvents}
-        title="Events"
+        </StateInspectorDisclosureRowInner>
+      </StateInspectorDisclosureSection>
+      <EventsSection<S>
+        connectionEvents={connectionEvents}
         colorScheme={colorScheme}
-      >
-        <div ref={eventsContainerRef} style={styles.sectionInner}>
-          {connectionEvents?.map((event, index) =>
-            event.type === "stateChange" ? (
-              <InspectorRow key={index} colorScheme={colorScheme}>
-                connection:{" "}
-                <span style={{ fontStyle: "italic" }}>
-                  {event.state.toLowerCase()}
-                </span>
-              </InspectorRow>
-            ) : (
-              <InspectorRow
-                key={index}
-                colorScheme={colorScheme}
-                variant={event.type === "send" ? "up" : "down"}
-                style={{
-                  padding: "0px 12px 1px",
-                }}
-              >
-                <ObjectInspector
-                  data={event.type === "error" ? event.error : event.message}
-                  theme={theme}
-                  nodeRenderer={({
-                    depth,
-                    name,
-                    data,
-                    isNonenumerable,
-                  }: any) => {
-                    const direction = event.type === "send" ? "up" : "down";
-
-                    return depth === 0 ? (
-                      <ObjectRootLabel direction={direction} data={data} />
-                    ) : (
-                      <ObjectLabel
-                        direction={direction}
-                        name={name}
-                        data={data}
-                        isNonenumerable={isNonenumerable}
-                      />
-                    );
-                  }}
-                />
-              </InspectorRow>
-            )
-          )}
-          {!connectionEvents && (
-            <div
-              style={{
-                padding: "12px",
-                fontSize: "12px",
-                display: "flex",
-                flexDirection: "column",
-                gap: "4px",
-              }}
-            >
-              <span>No recorded events</span>
-            </div>
-          )}
-        </div>
-      </DisclosureSection>
+        eventsContainerRef={eventsContainerRef}
+        showEvents={showEvents}
+        setShowEvents={setShowEvents}
+      />
     </div>
   );
 });
 
-type MessageDirection = "up" | "down";
-
-const ObjectRootLabel: FC<{
-  name?: string;
-  data: any;
-  direction?: MessageDirection;
-}> = ({ name, data, direction }) => {
-  if (typeof name === "string") {
-    return (
-      <span>
-        <ObjectName name={name} />
-        <span>: </span>
-        <ObjectPreview data={data} />
-      </span>
-    );
-  }
-  if (direction === "up" || direction === "down") {
-    const arrow = direction === "up" ? "↑" : "↓";
-
-    return (
-      <span>
-        <span
-          style={{
-            background:
-              direction === "up" ? "rgba(0,255,0,0.2)" : "rgba(255,0,0,0.2)",
-            // color: "white",
-            width: 12,
-            height: 12,
-            borderRadius: 2,
-            display: "inline-flex",
-            justifyContent: "center",
-            alignItems: "center",
-            marginRight: 4,
-            lineHeight: "12px",
-          }}
-        >
-          {arrow}
-        </span>
-        <ObjectPreview data={data} />
-      </span>
-    );
-  } else {
-    return <ObjectPreview data={data} />;
-  }
-};
-
-// Rotates ▶️ or ▼ based on expanded state
-function Arrow({
-  expanded,
-  onClick,
-  style,
-}: {
-  expanded: boolean;
-  onClick?: () => void;
-  style?: CSSProperties;
-}) {
-  return (
-    <span
-      role="button"
-      onClick={onClick}
-      style={{
-        display: "inline-block",
-        textAlign: "center",
-        transform: expanded ? "rotate(0deg)" : "rotate(-90deg)",
-        fontFamily: "Menlo, monospace",
-        ...style,
-      }}
-    >
-      {"▼"}
-    </span>
-  );
-}
-
-function pathToString(extendedPath: ExtendedPathKey[]) {
-  return extendedPath
-    .map((key) =>
-      typeof key === "object"
-        ? `:${ellipsis(key.id.toString(), 8, "middle")}`
-        : key
-    )
-    .map((key, index) =>
-      index === 0 || (typeof key === "string" && key.startsWith(":"))
-        ? key
-        : `.${key}`
-    )
-    .join("");
-}
-
-type EllipsisPosition = "start" | "middle" | "end";
-
-function ellipsis(
-  str: string,
-  maxLength: number,
-  position: EllipsisPosition = "end"
-) {
-  if (str.length <= maxLength) return str;
-
-  switch (position) {
-    case "start":
-      return `…${str.slice(str.length - maxLength)}`;
-    case "middle":
-      const halfLength = Math.floor(maxLength / 2);
-      return `${str.slice(0, halfLength)}…${str.slice(str.length - halfLength)}`;
-    case "end":
-      return `${str.slice(0, maxLength)}…`;
-  }
-}
-
-function SmallButton({
-  children,
-  onClick,
-  style,
-  theme,
-  disabled,
-}: {
-  children: React.ReactNode;
-  onClick: () => void;
-  style?: CSSProperties;
-  theme: typeof chromeLight;
-  disabled?: boolean;
-}) {
-  return (
-    <button
-      type="button"
-      disabled={disabled}
-      onClick={(event) => {
-        event.stopPropagation();
-        onClick();
-      }}
-      style={{
-        flex: "0",
-        appearance: "none",
-        background: "none",
-        color: theme.BASE_COLOR,
-        opacity: disabled ? 0.25 : 1,
-        border: "none",
-        fontSize: "12px",
-        whiteSpace: "nowrap",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "0",
-        cursor: "pointer",
-        ...style,
-      }}
-    >
-      {children}
-    </button>
-  );
-}
-
-function ColoredDot({ type }: { type: "success" | "error" }) {
-  return (
-    <span
-      style={{
-        display: "inline-block",
-        width: 6,
-        height: 6,
-        background:
-          type === "success" ? "rgba(0,200,0,0.8)" : "rgba(200,0,0,0.8)",
-        borderRadius: "50%",
-        verticalAlign: "middle",
-      }}
-    />
-  );
-}
-
 function TitleLabel({ children }: { children: React.ReactNode }) {
   return (
     <span style={{ display: "flex", alignItems: "center", gap: "4px" }}>