@dxos/plugin-debug 0.6.13 → 0.6.14-main.69511f5

package/dist/lib/browser/index.mjs

@@ -1,40 +1,55 @@
 import {
   DebugAction,
-  DebugContext
-} from "./chunk-RYK3J66D.mjs";
+  DebugContext,
+  DebugSettingsSchema
+} from "./chunk-NHHLZV45.mjs";
 import {
   DEBUG_PLUGIN,
   meta_default
-} from "./chunk-WEGYHXMB.mjs";
+} from "./chunk-2HTS7SNO.mjs";
 
-// packages/plugins/experimental/plugin-debug/src/DebugPlugin.tsx
-import { Bug, Hammer } from "@phosphor-icons/react";
+// packages/plugins/plugin-debug/src/DebugPlugin.tsx
 import React5, { useEffect as useEffect3, useState as useState3 } from "react";
-import { getPlugin, parseGraphPlugin as parseGraphPlugin2, parseIntentPlugin, resolvePlugin } from "@dxos/app-framework";
+import { definePlugin, parseGraphPlugin as parseGraphPlugin2, parseIntentPlugin, parseMetadataResolverPlugin, parseSettingsPlugin, resolvePlugin } from "@dxos/app-framework";
 import { Timer } from "@dxos/async";
-import { LocalStorageStore } from "@dxos/local-storage";
-import { createExtension, Graph } from "@dxos/plugin-graph";
+import { Devtools } from "@dxos/devtools";
+import { invariant } from "@dxos/invariant";
+import { parseClientPlugin } from "@dxos/plugin-client";
+import { createExtension, Graph, toSignal } from "@dxos/plugin-graph";
 import { SpaceAction } from "@dxos/plugin-space";
 import { CollectionType } from "@dxos/plugin-space/types";
-import { SpaceState, isSpace } from "@dxos/react-client/echo";
+import { create, getTypename, isEchoObject, isSpace, parseId, SpaceState } from "@dxos/react-client/echo";
 import { Main } from "@dxos/react-ui";
-import { baseSurface, topbarBlockPaddingStart, fixedInsetFlexLayout, bottombarBlockPaddingEnd } from "@dxos/react-ui-theme";
+import { baseSurface, bottombarBlockPaddingEnd, fixedInsetFlexLayout, topbarBlockPaddingStart } from "@dxos/react-ui-theme";
 
-// packages/plugins/experimental/plugin-debug/src/components/index.ts
-import React4 from "react";
+// packages/plugins/plugin-debug/src/components/index.ts
+import { lazy } from "react";
+
+// packages/plugins/plugin-debug/src/components/DebugObjectPanel.tsx
+import React from "react";
+import { SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
+var DebugObjectPanel = ({ object }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "form",
+    className: "flex flex-col"
+  }, /* @__PURE__ */ React.createElement(SyntaxHighlighter, {
+    classNames: "flex text-xs",
+    language: "json"
+  }, JSON.stringify(object, null, 2)));
+};
 
-// packages/plugins/experimental/plugin-debug/src/components/DebugSettings.tsx
+// packages/plugins/plugin-debug/src/components/DebugSettings.tsx
 import { Gift, DownloadSimple, FirstAidKit } from "@phosphor-icons/react";
-import React, { useEffect, useState } from "react";
+import React2, { useEffect, useState } from "react";
 import { parseFileManagerPlugin, useResolvePlugin } from "@dxos/app-framework";
 import { defs, SaveConfig, Storage } from "@dxos/config";
 import { log } from "@dxos/log";
-import { SettingsValue } from "@dxos/plugin-settings";
 import { useClient } from "@dxos/react-client";
 import { useTranslation, Button, Toast, Input, useFileDownload, Select } from "@dxos/react-ui";
+import { FormInput } from "@dxos/react-ui-data";
 import { getSize, mx } from "@dxos/react-ui-theme";
 import { setDeep } from "@dxos/util";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-debug/src/components/DebugSettings.tsx";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-debug/src/components/DebugSettings.tsx";
 var StorageAdapters = {
   opfs: defs.Runtime.Client.Storage.StorageDriver.WEBFS,
   idb: defs.Runtime.Client.Storage.StorageDriver.IDB
@@ -111,39 +126,39 @@ var DebugSettings = ({ settings }) => {
       });
     }
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SettingsValue, {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(FormInput, {
     label: t("settings show debug panel")
-  }, /* @__PURE__ */ React.createElement(Input.Switch, {
+  }, /* @__PURE__ */ React2.createElement(Input.Switch, {
     checked: settings.debug,
     onCheckedChange: (checked) => settings.debug = !!checked
-  })), /* @__PURE__ */ React.createElement(SettingsValue, {
+  })), /* @__PURE__ */ React2.createElement(FormInput, {
     label: t("settings show devtools panel")
-  }, /* @__PURE__ */ React.createElement(Input.Switch, {
+  }, /* @__PURE__ */ React2.createElement(Input.Switch, {
     checked: settings.devtools,
     onCheckedChange: (checked) => settings.devtools = !!checked
-  })), /* @__PURE__ */ React.createElement(SettingsValue, {
+  })), /* @__PURE__ */ React2.createElement(FormInput, {
     label: t("settings wireframe")
-  }, /* @__PURE__ */ React.createElement(Input.Switch, {
+  }, /* @__PURE__ */ React2.createElement(Input.Switch, {
     checked: settings.wireframe,
     onCheckedChange: (checked) => settings.wireframe = !!checked
-  })), /* @__PURE__ */ React.createElement(SettingsValue, {
+  })), /* @__PURE__ */ React2.createElement(FormInput, {
     label: t("settings download diagnostics")
-  }, /* @__PURE__ */ React.createElement(Button, {
+  }, /* @__PURE__ */ React2.createElement(Button, {
     onClick: handleDownload
-  }, /* @__PURE__ */ React.createElement(DownloadSimple, {
+  }, /* @__PURE__ */ React2.createElement(DownloadSimple, {
     className: getSize(5)
-  }))), /* @__PURE__ */ React.createElement(SettingsValue, {
+  }))), /* @__PURE__ */ React2.createElement(FormInput, {
     label: t("settings repair")
-  }, /* @__PURE__ */ React.createElement(Button, {
+  }, /* @__PURE__ */ React2.createElement(Button, {
     onClick: handleRepair
-  }, /* @__PURE__ */ React.createElement(FirstAidKit, {
+  }, /* @__PURE__ */ React2.createElement(FirstAidKit, {
     className: getSize(5)
-  }))), toast && /* @__PURE__ */ React.createElement(Toast.Root, null, /* @__PURE__ */ React.createElement(Toast.Body, null, /* @__PURE__ */ React.createElement(Toast.Title, null, /* @__PURE__ */ React.createElement(Gift, {
+  }))), toast && /* @__PURE__ */ React2.createElement(Toast.Root, null, /* @__PURE__ */ React2.createElement(Toast.Body, null, /* @__PURE__ */ React2.createElement(Toast.Title, null, /* @__PURE__ */ React2.createElement(Gift, {
     className: mx(getSize(5), "inline mr-1"),
     weight: "duotone"
-  }), /* @__PURE__ */ React.createElement("span", null, toast.title)), toast.description && /* @__PURE__ */ React.createElement(Toast.Description, null, toast.description))), /* @__PURE__ */ React.createElement(SettingsValue, {
+  }), /* @__PURE__ */ React2.createElement("span", null, toast.title)), toast.description && /* @__PURE__ */ React2.createElement(Toast.Description, null, toast.description))), /* @__PURE__ */ React2.createElement(FormInput, {
     label: t("settings choose storage adaptor")
-  }, /* @__PURE__ */ React.createElement(Select.Root, {
+  }, /* @__PURE__ */ React2.createElement(Select.Root, {
     value: Object.entries(StorageAdapters).find(([name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore)?.[0],
     onValueChange: (value) => {
       if (confirm(t("settings storage adapter changed alert"))) {
@@ -155,9 +170,9 @@ var DebugSettings = ({ settings }) => {
         ], StorageAdapters[value]);
       }
     }
-  }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
+  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
     placeholder: t("settings data store label")
-  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, Object.keys(StorageAdapters).map((key) => /* @__PURE__ */ React.createElement(Select.Option, {
+  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, Object.keys(StorageAdapters).map((key) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key,
     value: key
   }, t(`settings storage adaptor ${key} label`)))))))));
@@ -171,9 +186,8 @@ var updateConfig = (config, setConfig, path, value) => {
   });
 };
 
-// packages/plugins/experimental/plugin-debug/src/components/DebugStatus.tsx
-import { ChartBar, Circle, Lightning, LightningSlash } from "@phosphor-icons/react";
-import React2, { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+// packages/plugins/plugin-debug/src/components/DebugStatus.tsx
+import React3, { useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import { firstIdInPart, parseGraphPlugin, parseNavigationPlugin, useResolvePlugin as useResolvePlugin2 } from "@dxos/app-framework";
 import { TimeoutError } from "@dxos/async";
 import { StatsPanel, useStats } from "@dxos/devtools";
@@ -182,8 +196,9 @@ import { getActiveSpace } from "@dxos/plugin-space";
 import { StatusBar } from "@dxos/plugin-status-bar";
 import { ConnectionState } from "@dxos/protocols/proto/dxos/client/services";
 import { useNetworkStatus } from "@dxos/react-client/mesh";
-import { getSize as getSize2, mx as mx2 } from "@dxos/react-ui-theme";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-debug/src/components/DebugStatus.tsx";
+import { Icon } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-debug/src/components/DebugStatus.tsx";
 var styles = {
   success: "text-sky-300 dark:text-green-700",
   warning: "text-orange-300 dark:text-orange-600",
@@ -220,19 +235,20 @@ var ErrorIndicator = () => {
     forceUpdate({});
   };
   if (errorRef.current) {
-    return /* @__PURE__ */ React2.createElement(StatusBar.Button, {
+    return /* @__PURE__ */ React3.createElement(StatusBar.Button, {
       title: errorRef.current.message,
       onClick: handleReset
-    }, /* @__PURE__ */ React2.createElement(Circle, {
-      weight: "fill",
-      className: mx2(styles.error, getSize2(3))
+    }, /* @__PURE__ */ React3.createElement(Icon, {
+      icon: "ph--warning-circle--duotone",
+      size: 4,
+      classNames: styles.error
     }));
   } else {
-    return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+    return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
       title: "No errors."
-    }, /* @__PURE__ */ React2.createElement(Circle, {
-      weight: "fill",
-      className: getSize2(3)
+    }, /* @__PURE__ */ React3.createElement(Icon, {
+      icon: "ph--check--regular",
+      size: 4
     }));
   }
 };
@@ -245,16 +261,19 @@ var SwarmIndicator = () => {
     swarm
   ]);
   if (state === 0) {
-    return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+    return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
       title: "Connected to swarm."
-    }, /* @__PURE__ */ React2.createElement(Lightning, {
-      className: getSize2(4)
+    }, /* @__PURE__ */ React3.createElement(Icon, {
+      icon: "ph--lightning--regular",
+      size: 4
     }));
   } else {
-    return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+    return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
       title: "Disconnected from swarm."
-    }, /* @__PURE__ */ React2.createElement(LightningSlash, {
-      className: mx2(styles.warning, getSize2(4))
+    }, /* @__PURE__ */ React3.createElement(Icon, {
+      icon: "ph--lightning-slash--regular",
+      size: 4,
+      classNames: styles.warning
     }));
   }
 };
@@ -267,92 +286,98 @@ var SavingIndicator = () => {
   const _space = location2 && graph ? getActiveSpace(graph, firstIdInPart(location2.active, "main")) : void 0;
   switch (state) {
     case 2:
-      return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+      return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
         title: "Edit not saved."
-      }, /* @__PURE__ */ React2.createElement(Circle, {
-        weight: "fill",
-        className: mx2(styles.warning, getSize2(3))
+      }, /* @__PURE__ */ React3.createElement(Icon, {
+        icon: "ph--circle--duotone",
+        size: 4,
+        classNames: styles.warning
       }));
     case 1:
-      return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+      return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
         title: "Saving..."
-      }, /* @__PURE__ */ React2.createElement(Circle, {
-        weight: "fill",
-        className: mx2(styles.success, getSize2(3))
+      }, /* @__PURE__ */ React3.createElement(Icon, {
+        icon: "ph--circle--duotone",
+        size: 4,
+        classNames: styles.success
       }));
     case 0:
     default:
-      return /* @__PURE__ */ React2.createElement(StatusBar.Item, {
+      return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
         title: "Modified indicator."
-      }, /* @__PURE__ */ React2.createElement(Circle, {
-        weight: "fill",
-        className: getSize2(3)
+      }, /* @__PURE__ */ React3.createElement(Icon, {
+        icon: "ph--circle--duotone",
+        size: 4
       }));
   }
 };
 var PerformanceIndicator = () => {
   const [visible, setVisible] = useState2(false);
   const [stats, refreshStats] = useStats();
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StatusBar.Button, {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(StatusBar.Button, {
     onClick: () => setVisible((visible2) => !visible2),
     title: "Performance panels"
-  }, /* @__PURE__ */ React2.createElement(ChartBar, null)), visible && /* @__PURE__ */ React2.createElement("div", {
-    className: "z-20 absolute bottom-[24px] w-[450px] border-l border-y border-separator"
-  }, /* @__PURE__ */ React2.createElement(StatsPanel, {
+  }, /* @__PURE__ */ React3.createElement(Icon, {
+    icon: "ph--chart-bar--regular",
+    size: 4
+  })), visible && /* @__PURE__ */ React3.createElement("div", {
+    className: mx2("z-20 absolute bottom-[--statusbar-size] right-4 w-[450px]", "overflow-x-hidden overflow-y-auto scrollbar-thin", "border-x border-y border-separator")
+  }, /* @__PURE__ */ React3.createElement(StatsPanel, {
     stats,
     onRefresh: refreshStats
   })));
 };
 var indicators = [
-  PerformanceIndicator,
   SavingIndicator,
-  ErrorIndicator,
-  SwarmIndicator
+  SwarmIndicator,
+  PerformanceIndicator,
+  ErrorIndicator
 ];
 var DebugStatus = () => {
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, indicators.map((Indicator) => /* @__PURE__ */ React2.createElement(Indicator, {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, indicators.map((Indicator) => /* @__PURE__ */ React3.createElement(Indicator, {
     key: Indicator.name
   })));
 };
 
-// packages/plugins/experimental/plugin-debug/src/components/Wireframe.tsx
-import React3 from "react";
+// packages/plugins/plugin-debug/src/components/Wireframe.tsx
+import React4 from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { createAttendableAttributes } from "@dxos/react-ui-attention";
+import { fullyQualifiedId } from "@dxos/react-client/echo";
+import { useAttendableAttributes } from "@dxos/react-ui-attention";
+import { SyntaxHighlighter as SyntaxHighlighter2 } from "@dxos/react-ui-syntax-highlighter";
 import { mx as mx3 } from "@dxos/react-ui-theme";
-var Wireframe = ({ label, data, className }) => {
-  const attendableAttrs = createAttendableAttributes(data);
+var Wireframe = ({ classNames, label, object }) => {
+  const attendableAttrs = useAttendableAttributes(fullyQualifiedId(object));
   const { width, height, ref } = useResizeDetector();
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     ref,
-    className: mx3("relative grow min-bs-96", className),
+    className: mx3("relative grow min-bs-96", classNames),
     ...attendableAttrs
-  }, /* @__PURE__ */ React3.createElement("div", {
-    className: "absolute inset-2 flex flex-col overflow-hidden font-mono"
-  }, /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: "absolute inset-2 flex flex-col gap-2 overflow-hidden font-mono"
+  }, /* @__PURE__ */ React4.createElement("div", {
     className: "flex justify-between"
-  }, /* @__PURE__ */ React3.createElement("div", null, label), /* @__PURE__ */ React3.createElement("div", null, `[${width}x${height}]`)), /* @__PURE__ */ React3.createElement("div", {
-    className: "flex grow overflow-auto"
-  }, data && /* @__PURE__ */ React3.createElement("pre", {
-    className: "text-neutral-500 text-sm whitespace-pre-line"
-  }, JSON.stringify(data, void 0, 1)))), /* @__PURE__ */ React3.createElement("svg", {
+  }, /* @__PURE__ */ React4.createElement("div", null, label), /* @__PURE__ */ React4.createElement("div", null, `[${width}x${height}]`)), object && /* @__PURE__ */ React4.createElement(SyntaxHighlighter2, {
+    language: "json",
+    classNames: "flex w-full text-xs opacity-75 rounded"
+  }, JSON.stringify(object, void 0, 2))), /* @__PURE__ */ React4.createElement("svg", {
     width,
     height,
-    className: "bg-transparent [&>*]:stroke-neutral-500"
-  }, /* @__PURE__ */ React3.createElement("rect", {
+    className: "bg-transparent [&>*]:text-subdued"
+  }, /* @__PURE__ */ React4.createElement("rect", {
     x: 0,
     y: 0,
     width,
     height,
     strokeWidth: 1,
     fill: "none"
-  }), /* @__PURE__ */ React3.createElement("line", {
+  }), /* @__PURE__ */ React4.createElement("line", {
     x1: 0,
     y1: 0,
     x2: width,
     y2: height,
     strokeWidth: 1
-  }), /* @__PURE__ */ React3.createElement("line", {
+  }), /* @__PURE__ */ React4.createElement("line", {
     x1: 0,
     y1: height,
     x2: width,
@@ -361,12 +386,11 @@ var Wireframe = ({ label, data, className }) => {
   })));
 };
 
-// packages/plugins/experimental/plugin-debug/src/components/index.ts
-var DebugGlobal = React4.lazy(() => import("./DebugGlobal-H56M2VL4.mjs"));
-var DebugSpace = React4.lazy(() => import("./DebugSpace-NHPMLATA.mjs"));
-var DevtoolsMain = React4.lazy(() => import("./DevtoolsMain-RWT3FLJ6.mjs"));
+// packages/plugins/plugin-debug/src/components/index.ts
+var DebugGlobal = lazy(() => import("./DebugGlobal-ZTCBF3XR.mjs"));
+var DebugSpace = lazy(() => import("./DebugSpace-I6BNZKI2.mjs"));
 
-// packages/plugins/experimental/plugin-debug/src/translations.ts
+// packages/plugins/plugin-debug/src/translations.ts
 var translations_default = [
   {
     "en-US": {
@@ -397,33 +421,21 @@ var translations_default = [
   }
 ];
 
-// packages/plugins/experimental/plugin-debug/src/DebugPlugin.tsx
-var SETTINGS_KEY = DEBUG_PLUGIN + "/settings";
-var DebugPlugin = () => {
-  const settings = new LocalStorageStore(DEBUG_PLUGIN, {
+// packages/plugins/plugin-debug/src/DebugPlugin.tsx
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-debug/src/DebugPlugin.tsx";
+var DebugPlugin = definePlugin((context) => {
+  const settings = create({
     debug: true,
     devtools: true
   });
-  let intentPlugin;
   return {
     meta: meta_default,
     ready: async (plugins) => {
-      intentPlugin = resolvePlugin(plugins, parseIntentPlugin);
-      settings.prop({
-        key: "debug",
-        type: LocalStorageStore.bool({
-          allowUndefined: true
-        })
-      }).prop({
-        key: "devtools",
-        type: LocalStorageStore.bool({
-          allowUndefined: true
-        })
-      }).prop({
-        key: "wireframe",
-        type: LocalStorageStore.bool({
-          allowUndefined: true
-        })
+      context.init(plugins);
+      context.resolvePlugin(parseSettingsPlugin).provides.settingsStore.createStore({
+        schema: DebugSettingsSchema,
+        prefix: DEBUG_PLUGIN,
+        value: settings
       });
       const composer = window.composer;
       composer.changeStorageVersionInMetadata = async (version) => {
@@ -438,10 +450,10 @@ var DebugPlugin = () => {
       };
     },
     unload: async () => {
-      settings.close();
+      context.dispose();
     },
     provides: {
-      settings: settings.values,
+      settings,
       translations: translations_default,
       context: ({ children }) => {
         const [timer, setTimer] = useState3();
@@ -464,12 +476,34 @@ var DebugPlugin = () => {
       },
       graph: {
         builder: (plugins) => {
+          const clientPlugin = resolvePlugin(plugins, parseClientPlugin);
+          const metadataPlugin = resolvePlugin(plugins, parseMetadataResolverPlugin);
           const graphPlugin = resolvePlugin(plugins, parseGraphPlugin2);
+          const resolve = metadataPlugin?.provides.metadata.resolver;
+          const client = clientPlugin?.provides.client;
+          invariant(resolve, void 0, {
+            F: __dxlog_file3,
+            L: 108,
+            S: void 0,
+            A: [
+              "resolve",
+              ""
+            ]
+          });
+          invariant(client, void 0, {
+            F: __dxlog_file3,
+            L: 109,
+            S: void 0,
+            A: [
+              "client",
+              ""
+            ]
+          });
           return [
             // Devtools node.
             createExtension({
               id: "dxos.org/plugin/debug/devtools",
-              filter: (node) => !!settings.values.devtools && node.id === "root",
+              filter: (node) => !!settings.devtools && node.id === "root",
               connector: () => [
                 {
                   // TODO(zan): Removed `/` because it breaks deck layout reload. Fix?
@@ -483,8 +517,7 @@ var DebugPlugin = () => {
                         ns: DEBUG_PLUGIN
                       }
                     ],
-                    icon: (props) => /* @__PURE__ */ React5.createElement(Hammer, props),
-                    iconSymbol: "ph--hammer--regular"
+                    icon: "ph--hammer--regular"
                   }
                 }
               ]
@@ -492,7 +525,7 @@ var DebugPlugin = () => {
             // Debug node.
             createExtension({
               id: "dxos.org/plugin/debug/debug",
-              filter: (node) => !!settings.values.debug && node.id === "root",
+              filter: (node) => !!settings.debug && node.id === "root",
               connector: () => [
                 {
                   id: "dxos.org/plugin/debug/debug",
@@ -507,8 +540,7 @@ var DebugPlugin = () => {
                         ns: DEBUG_PLUGIN
                       }
                     ],
-                    icon: (props) => /* @__PURE__ */ React5.createElement(Bug, props),
-                    iconSymbol: "ph--bug--regular"
+                    icon: "ph--bug--regular"
                   }
                 }
               ]
@@ -516,7 +548,7 @@ var DebugPlugin = () => {
             // Space debug nodes.
             createExtension({
               id: "dxos.org/plugin/debug/spaces",
-              filter: (node) => !!settings.values.debug && isSpace(node.data),
+              filter: (node) => !!settings.debug && isSpace(node.data),
               connector: ({ node }) => {
                 const space = node.data;
                 return [
@@ -533,11 +565,76 @@ var DebugPlugin = () => {
                           ns: DEBUG_PLUGIN
                         }
                       ],
-                      icon: (props) => /* @__PURE__ */ React5.createElement(Bug, props),
-                      iconSymbol: "ph--bug--regular"
+                      icon: "ph--bug--regular"
+                    }
+                  }
+                ];
+              }
+            }),
+            // Create nodes for debug sidebar.
+            createExtension({
+              id: `${DEBUG_PLUGIN}/debug-for-subject`,
+              resolver: ({ id }) => {
+                if (!id.endsWith("~debug")) {
+                  return;
+                }
+                const type = "orphan-settings-for-subject";
+                const icon = "ph--bug--regular";
+                const [subjectId] = id.split("~");
+                const { spaceId, objectId } = parseId(subjectId);
+                const space = client.spaces.get().find((space2) => space2.id === spaceId);
+                if (!objectId) {
+                  const label2 = space ? space.properties.name || [
+                    "unnamed space label",
+                    {
+                      ns: DEBUG_PLUGIN
                     }
+                  ] : [
+                    "unnamed object settings label",
+                    {
+                      ns: DEBUG_PLUGIN
+                    }
+                  ];
+                  return {
+                    id,
+                    type,
+                    data: null,
+                    properties: {
+                      icon,
+                      label: label2,
+                      showResolvedThreads: false,
+                      object: null,
+                      space
+                    }
+                  };
+                }
+                const object = toSignal((onChange) => {
+                  const timeout = setTimeout(async () => {
+                    await space?.db.loadObjectById(objectId);
+                    onChange();
+                  });
+                  return () => clearTimeout(timeout);
+                }, () => space?.db.getObjectById(objectId), subjectId);
+                if (!object || !subjectId) {
+                  return;
+                }
+                const meta = resolve(getTypename(object) ?? "");
+                const label = meta.label?.(object) || object.name || meta.placeholder || [
+                  "unnamed object settings label",
+                  {
+                    ns: DEBUG_PLUGIN
                   }
                 ];
+                return {
+                  id,
+                  type,
+                  data: null,
+                  properties: {
+                    icon,
+                    label,
+                    object
+                  }
+                };
               }
             })
           ];
@@ -547,7 +644,7 @@ var DebugPlugin = () => {
         resolver: async (intent, plugins) => {
           switch (intent.action) {
             case DebugAction.OPEN_DEVTOOLS: {
-              const clientPlugin = getPlugin(plugins, "dxos.org/plugin/client");
+              const clientPlugin = context.getPlugin("dxos.org/plugin/client");
               const client = clientPlugin.provides.client;
               const vaultUrl = client.config.values?.runtime?.client?.remoteSource ?? "https://halo.dxos.org";
               let devtoolsUrl = "http://localhost:5174";
@@ -570,17 +667,21 @@ var DebugPlugin = () => {
           switch (role) {
             case "settings":
               return data.plugin === meta_default.id ? /* @__PURE__ */ React5.createElement(DebugSettings, {
-                settings: settings.values
+                settings
               }) : null;
             case "status":
               return /* @__PURE__ */ React5.createElement(DebugStatus, null);
+            case "complementary--debug":
+              return isEchoObject(data.subject) ? /* @__PURE__ */ React5.createElement(DebugObjectPanel, {
+                object: data.subject
+              }) : null;
           }
           const primary = data.active ?? data.object;
           let component;
           if (role === "main" || role === "article") {
-            if (primary === "devtools" && settings.values.devtools) {
-              component = /* @__PURE__ */ React5.createElement(DevtoolsMain, null);
-            } else if (!primary || typeof primary !== "object" || !settings.values.debug) {
+            if (primary === "devtools" && settings.devtools) {
+              component = /* @__PURE__ */ React5.createElement(Devtools, null);
+            } else if (!primary || typeof primary !== "object" || !settings.debug) {
               component = null;
             } else if ("space" in primary && isSpace(primary.space)) {
               component = /* @__PURE__ */ React5.createElement(DebugSpace, {
@@ -593,7 +694,7 @@ var DebugPlugin = () => {
                   if (!(collection instanceof CollectionType)) {
                     return;
                   }
-                  void intentPlugin?.provides.intent.dispatch(objects.map((object) => ({
+                  void context.resolvePlugin(parseIntentPlugin).provides.intent.dispatch(objects.map((object) => ({
                     action: SpaceAction.ADD_OBJECT,
                     data: {
                       target: collection,
@@ -611,15 +712,19 @@ var DebugPlugin = () => {
             }
           }
           if (!component) {
-            if (settings.values.wireframe) {
+            if (settings.wireframe) {
               if (role === "main" || role === "article" || role === "section") {
                 const primary2 = data.active ?? data.object;
-                if (!(primary2 instanceof CollectionType)) {
-                  return /* @__PURE__ */ React5.createElement(Wireframe, {
-                    label: role,
-                    data,
-                    className: "row-span-2 overflow-hidden"
-                  });
+                const isCollection = primary2 instanceof CollectionType;
+                if (!isCollection) {
+                  return {
+                    node: /* @__PURE__ */ React5.createElement(Wireframe, {
+                      label: `${role}:${name}`,
+                      object: primary2,
+                      classNames: "row-span-2 overflow-hidden"
+                    }),
+                    disposition: "hoist"
+                  };
                 }
               }
             }
@@ -646,13 +751,12 @@ var DebugPlugin = () => {
       }
     }
   };
-};
+});
 
-// packages/plugins/experimental/plugin-debug/src/index.ts
+// packages/plugins/plugin-debug/src/index.ts
 var src_default = DebugPlugin;
 export {
   DebugPlugin,
-  SETTINGS_KEY,
   src_default as default
 };
 //# sourceMappingURL=index.mjs.map