@dxos/plugin-debug 0.8.1 → 0.8.2-main.f081794

package/dist/types/src/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBA6DE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBA8DE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-debug",
-  "version": "0.8.1",
+  "version": "0.8.2-main.f081794",
   "description": "DXOS Surface plugin for testing.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -33,48 +33,50 @@
     "react-json-tree": "^0.18.0",
     "react-resize-detector": "^11.0.1",
     "workerize-loader": "^2.0.2",
-    "@dxos/async": "0.8.1",
-    "@dxos/app-framework": "0.8.1",
-    "@dxos/automerge": "0.8.1",
-    "@dxos/client-services": "0.8.1",
-    "@dxos/conductor": "0.8.1",
-    "@dxos/compute": "0.8.1",
-    "@dxos/config": "0.8.1",
-    "@dxos/devtools": "0.8.1",
-    "@dxos/echo-generator": "0.8.1",
-    "@dxos/echo-pipeline": "0.8.1",
-    "@dxos/echo-schema": "0.8.1",
-    "@dxos/functions": "0.8.1",
-    "@dxos/invariant": "0.8.1",
-    "@dxos/local-storage": "0.8.1",
-    "@dxos/keys": "0.8.1",
-    "@dxos/live-object": "0.8.1",
-    "@dxos/plugin-client": "0.8.1",
-    "@dxos/plugin-graph": "0.8.1",
-    "@dxos/plugin-deck": "0.8.1",
-    "@dxos/plugin-markdown": "0.8.1",
-    "@dxos/log": "0.8.1",
-    "@dxos/plugin-sheet": "0.8.1",
-    "@dxos/plugin-script": "0.8.1",
-    "@dxos/plugin-sketch": "0.8.1",
-    "@dxos/plugin-status-bar": "0.8.1",
-    "@dxos/plugin-space": "0.8.1",
-    "@dxos/plugin-table": "0.8.1",
-    "@dxos/plugin-theme": "0.8.1",
-    "@dxos/protocols": "0.8.1",
-    "@dxos/random": "0.8.1",
-    "@dxos/react-hooks": "0.8.1",
-    "@dxos/react-ui-attention": "0.8.1",
-    "@dxos/react-ui-canvas-compute": "0.8.1",
-    "@dxos/react-client": "0.8.1",
-    "@dxos/react-ui-canvas-editor": "0.8.1",
-    "@dxos/react-ui-form": "0.8.1",
-    "@dxos/react-ui-stack": "0.8.1",
-    "@dxos/react-ui-kanban": "0.8.1",
-    "@dxos/react-ui-syntax-highlighter": "0.8.1",
-    "@dxos/react-ui-table": "0.8.1",
-    "@dxos/schema": "0.8.1",
-    "@dxos/util": "0.8.1"
+    "@dxos/app-framework": "0.8.2-main.f081794",
+    "@dxos/async": "0.8.2-main.f081794",
+    "@dxos/client-services": "0.8.2-main.f081794",
+    "@dxos/automerge": "0.8.2-main.f081794",
+    "@dxos/compute": "0.8.2-main.f081794",
+    "@dxos/config": "0.8.2-main.f081794",
+    "@dxos/context": "0.8.2-main.f081794",
+    "@dxos/conductor": "0.8.2-main.f081794",
+    "@dxos/devtools": "0.8.2-main.f081794",
+    "@dxos/echo-pipeline": "0.8.2-main.f081794",
+    "@dxos/echo-generator": "0.8.2-main.f081794",
+    "@dxos/functions": "0.8.2-main.f081794",
+    "@dxos/invariant": "0.8.2-main.f081794",
+    "@dxos/echo-schema": "0.8.2-main.f081794",
+    "@dxos/live-object": "0.8.2-main.f081794",
+    "@dxos/local-storage": "0.8.2-main.f081794",
+    "@dxos/log": "0.8.2-main.f081794",
+    "@dxos/keys": "0.8.2-main.f081794",
+    "@dxos/plugin-client": "0.8.2-main.f081794",
+    "@dxos/plugin-graph": "0.8.2-main.f081794",
+    "@dxos/plugin-meeting": "0.8.2-main.f081794",
+    "@dxos/plugin-deck": "0.8.2-main.f081794",
+    "@dxos/plugin-markdown": "0.8.2-main.f081794",
+    "@dxos/plugin-script": "0.8.2-main.f081794",
+    "@dxos/plugin-sheet": "0.8.2-main.f081794",
+    "@dxos/plugin-sketch": "0.8.2-main.f081794",
+    "@dxos/plugin-space": "0.8.2-main.f081794",
+    "@dxos/plugin-status-bar": "0.8.2-main.f081794",
+    "@dxos/plugin-theme": "0.8.2-main.f081794",
+    "@dxos/random": "0.8.2-main.f081794",
+    "@dxos/plugin-table": "0.8.2-main.f081794",
+    "@dxos/react-hooks": "0.8.2-main.f081794",
+    "@dxos/protocols": "0.8.2-main.f081794",
+    "@dxos/react-client": "0.8.2-main.f081794",
+    "@dxos/react-ui-canvas-compute": "0.8.2-main.f081794",
+    "@dxos/react-ui-attention": "0.8.2-main.f081794",
+    "@dxos/react-ui-canvas-editor": "0.8.2-main.f081794",
+    "@dxos/react-ui-form": "0.8.2-main.f081794",
+    "@dxos/react-ui-stack": "0.8.2-main.f081794",
+    "@dxos/react-ui-kanban": "0.8.2-main.f081794",
+    "@dxos/react-ui-syntax-highlighter": "0.8.2-main.f081794",
+    "@dxos/react-ui-table": "0.8.2-main.f081794",
+    "@dxos/schema": "0.8.2-main.f081794",
+    "@dxos/util": "0.8.2-main.f081794"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -84,17 +86,17 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui-theme": "0.8.1",
-    "@dxos/storybook-utils": "0.8.1",
-    "@dxos/react-ui": "0.8.1"
+    "@dxos/react-ui": "0.8.2-main.f081794",
+    "@dxos/react-ui-theme": "0.8.2-main.f081794",
+    "@dxos/storybook-utils": "0.8.2-main.f081794"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/random": "0.8.1",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/react-ui": "0.8.2-main.f081794",
+    "@dxos/random": "0.8.2-main.f081794",
+    "@dxos/react-ui-theme": "0.8.2-main.f081794"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/app-graph-builder.ts

@@ -3,10 +3,11 @@
 //
 
 import { contributes, Capabilities, type PluginsContext } from '@dxos/app-framework';
-import { ATTENDABLE_PATH_SEPARATOR, PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
-import { createExtension, toSignal, type Node } from '@dxos/plugin-graph';
-import { CollectionType } from '@dxos/plugin-space/types';
-import { isEchoObject, isSpace, type ReactiveEchoObject, SpaceState, type Space } from '@dxos/react-client/echo';
+import { ClientCapabilities } from '@dxos/plugin-client';
+import { ATTENDABLE_PATH_SEPARATOR, DECK_COMPANION_TYPE, PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
+import { createExtension, type Node } from '@dxos/plugin-graph';
+import { SPACE_PLUGIN } from '@dxos/plugin-space';
+import { isEchoObject, type ReactiveEchoObject, parseId } from '@dxos/react-client/echo';
 
 import { DEBUG_PLUGIN } from '../meta';
 import { Devtools } from '../types';
@@ -18,43 +19,31 @@ export default (context: PluginsContext) =>
     // Devtools node.
     createExtension({
       id: 'dxos.org/plugin/debug/devtools',
-      filter: (node): node is Node<null | Space> => node.id === 'root' || isSpace(node.data),
+      filter: (node): node is Node<null> => node.id === 'root' || node.type === `${SPACE_PLUGIN}/settings`,
       connector: ({ node }) => {
-        const space = node.data;
-        const state = toSignal(
-          (onChange) => space?.state.subscribe(() => onChange()).unsubscribe ?? (() => {}),
-          () => space?.state.get(),
-          space?.id,
-        );
-        if (node.id !== 'root' && state !== SpaceState.SPACE_READY) {
-          return;
-        }
-
-        // Not adding the debug node until the root collection is available aligns the behaviour of this
-        // extension with that of the space plugin adding objects. This ensures that the debug node is added at
-        // the same time as objects and prevents order from changing as the nodes are added.
-        const collection = space?.properties[CollectionType.typename]?.target as CollectionType | undefined;
-        if (node.id !== 'root' && !collection) {
-          return;
-        }
+        const layout = context.requestCapability(Capabilities.Layout);
+        const client = context.requestCapability(ClientCapabilities.Client);
+        const { spaceId } = parseId(layout.workspace);
+        const space = spaceId && client.spaces.get(spaceId);
 
         return [
           {
-            id: `${node.id}-${Devtools.id}`,
+            id: `${Devtools.id}-${node.id}`,
             data: null,
             type: DEVTOOLS_TYPE,
             properties: {
               label: ['devtools label', { ns: DEBUG_PLUGIN }],
-              disposition: 'workspace',
               icon: 'ph--hammer--regular',
+              disposition: 'workspace',
+              position: 'fallback',
             },
             nodes: [
-              ...(isSpace(node.data)
+              ...(space
                 ? [
                     {
-                      id: `${node.data.id}-debug`,
+                      id: `debug-${node.id}`,
                       type: 'dxos.org/plugin/debug/space',
-                      data: { space: node.data, type: 'dxos.org/plugin/debug/space' },
+                      data: { space, type: 'dxos.org/plugin/debug/space' },
                       properties: {
                         label: ['debug label', { ns: DEBUG_PLUGIN }],
                         icon: 'ph--bug--regular',
@@ -63,7 +52,7 @@ export default (context: PluginsContext) =>
                   ]
                 : []),
               {
-                id: `${node.id}-${Devtools.Client.id}`,
+                id: `${Devtools.Client.id}-${node.id}`,
                 data: null,
                 type: DEVTOOLS_TYPE,
                 properties: {
@@ -72,7 +61,7 @@ export default (context: PluginsContext) =>
                 },
                 nodes: [
                   {
-                    id: `${node.id}-${Devtools.Client.Config}`,
+                    id: `${Devtools.Client.Config}-${node.id}`,
                     data: Devtools.Client.Config,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -81,7 +70,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Client.Storage}`,
+                    id: `${Devtools.Client.Storage}-${node.id}`,
                     data: Devtools.Client.Storage,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -90,7 +79,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Client.Logs}`,
+                    id: `${Devtools.Client.Logs}-${node.id}`,
                     data: Devtools.Client.Logs,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -99,7 +88,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Client.Diagnostics}`,
+                    id: `${Devtools.Client.Diagnostics}-${node.id}`,
                     data: Devtools.Client.Diagnostics,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -108,7 +97,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Client.Tracing}`,
+                    id: `${Devtools.Client.Tracing}-${node.id}`,
                     data: Devtools.Client.Tracing,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -119,7 +108,7 @@ export default (context: PluginsContext) =>
                 ],
               },
               {
-                id: `${node.id}-${Devtools.Halo.id}`,
+                id: `${Devtools.Halo.id}-${node.id}`,
                 data: null,
                 type: DEVTOOLS_TYPE,
                 properties: {
@@ -128,7 +117,7 @@ export default (context: PluginsContext) =>
                 },
                 nodes: [
                   {
-                    id: `${node.id}-${Devtools.Halo.Identity}`,
+                    id: `${Devtools.Halo.Identity}-${node.id}`,
                     data: Devtools.Halo.Identity,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -137,7 +126,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Halo.Devices}`,
+                    id: `${Devtools.Halo.Devices}-${node.id}`,
                     data: Devtools.Halo.Devices,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -146,7 +135,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Halo.Keyring}`,
+                    id: `${Devtools.Halo.Keyring}-${node.id}`,
                     data: Devtools.Halo.Keyring,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -155,7 +144,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Halo.Credentials}`,
+                    id: `${Devtools.Halo.Credentials}-${node.id}`,
                     data: Devtools.Halo.Credentials,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -166,7 +155,7 @@ export default (context: PluginsContext) =>
                 ],
               },
               {
-                id: `${node.id}-${Devtools.Echo.id}`,
+                id: `${Devtools.Echo.id}-${node.id}`,
                 data: null,
                 type: DEVTOOLS_TYPE,
                 properties: {
@@ -175,7 +164,7 @@ export default (context: PluginsContext) =>
                 },
                 nodes: [
                   {
-                    id: `${node.id}-${Devtools.Echo.Spaces}`,
+                    id: `${Devtools.Echo.Spaces}-${node.id}`,
                     data: Devtools.Echo.Spaces,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -184,7 +173,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Echo.Space}`,
+                    id: `${Devtools.Echo.Space}-${node.id}`,
                     data: Devtools.Echo.Space,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -193,7 +182,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Echo.Feeds}`,
+                    id: `${Devtools.Echo.Feeds}-${node.id}`,
                     data: Devtools.Echo.Feeds,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -202,7 +191,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Echo.Objects}`,
+                    id: `${Devtools.Echo.Objects}-${node.id}`,
                     data: Devtools.Echo.Objects,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -211,7 +200,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Echo.Automerge}`,
+                    id: `${Devtools.Echo.Automerge}-${node.id}`,
                     data: Devtools.Echo.Automerge,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -220,7 +209,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Echo.Queues}`,
+                    id: `${Devtools.Echo.Queues}-${node.id}`,
                     data: Devtools.Echo.Queues,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -229,7 +218,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Echo.Members}`,
+                    id: `${Devtools.Echo.Members}-${node.id}`,
                     data: Devtools.Echo.Members,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -238,7 +227,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Echo.Metadata}`,
+                    id: `${Devtools.Echo.Metadata}-${node.id}`,
                     data: Devtools.Echo.Metadata,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -249,7 +238,7 @@ export default (context: PluginsContext) =>
                 ],
               },
               {
-                id: `${node.id}-${Devtools.Mesh.id}`,
+                id: `${Devtools.Mesh.id}-${node.id}`,
                 data: null,
                 type: DEVTOOLS_TYPE,
                 properties: {
@@ -258,7 +247,7 @@ export default (context: PluginsContext) =>
                 },
                 nodes: [
                   {
-                    id: `${node.id}-${Devtools.Mesh.Signal}`,
+                    id: `${Devtools.Mesh.Signal}-${node.id}`,
                     data: Devtools.Mesh.Signal,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -267,7 +256,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Mesh.Swarm}`,
+                    id: `${Devtools.Mesh.Swarm}-${node.id}`,
                     data: Devtools.Mesh.Swarm,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -276,7 +265,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Mesh.Network}`,
+                    id: `${Devtools.Mesh.Network}-${node.id}`,
                     data: Devtools.Mesh.Network,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -288,7 +277,7 @@ export default (context: PluginsContext) =>
               },
               // TODO(wittjosiah): Remove?
               // {
-              //   id: `${node.id}-${Devtools.Agent.id}`,
+              //   id: `${prefix}-${Devtools.Agent.id}`,
               //   data: null,
               //   type: DEVTOOLS_TYPE,
               //   properties: {
@@ -297,7 +286,7 @@ export default (context: PluginsContext) =>
               //   },
               //   nodes: [
               //     {
-              //       id: `${node.id}-${Devtools.Agent.Dashboard}`,
+              //       id: `${prefix}-${Devtools.Agent.Dashboard}`,
               //       data: Devtools.Agent.Dashboard,
               //       type: DEVTOOLS_TYPE,
               //       properties: {
@@ -308,7 +297,7 @@ export default (context: PluginsContext) =>
               //   ],
               // },
               {
-                id: `${node.id}-${Devtools.Edge.id}`,
+                id: `${Devtools.Edge.id}-${node.id}`,
                 data: null,
                 type: DEVTOOLS_TYPE,
                 properties: {
@@ -317,7 +306,7 @@ export default (context: PluginsContext) =>
                 },
                 nodes: [
                   {
-                    id: `${node.id}-${Devtools.Edge.Dashboard}`,
+                    id: `${Devtools.Edge.Dashboard}-${node.id}`,
                     data: Devtools.Edge.Dashboard,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -326,7 +315,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Edge.Workflows}`,
+                    id: `${Devtools.Edge.Workflows}-${node.id}`,
                     data: Devtools.Edge.Workflows,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -335,7 +324,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Edge.Traces}`,
+                    id: `${Devtools.Edge.Traces}-${node.id}`,
                     data: Devtools.Edge.Traces,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -344,7 +333,7 @@ export default (context: PluginsContext) =>
                     },
                   },
                   {
-                    id: `${node.id}-${Devtools.Edge.Testing}`,
+                    id: `${Devtools.Edge.Testing}-${node.id}`,
                     data: Devtools.Edge.Testing,
                     type: DEVTOOLS_TYPE,
                     properties: {
@@ -410,4 +399,23 @@ export default (context: PluginsContext) =>
         },
       ],
     }),
+
+    // Devtools deck companion.
+    createExtension({
+      id: `${DEBUG_PLUGIN}/devtools-overview`,
+      filter: (node): node is Node<null> => node.id === 'root',
+      connector: ({ node }) => [
+        {
+          id: [node.id, 'devtools'].join(ATTENDABLE_PATH_SEPARATOR),
+          type: DECK_COMPANION_TYPE,
+          data: null,
+          properties: {
+            label: ['devtools overview label', { ns: DEBUG_PLUGIN }],
+            icon: 'ph--hammer--regular',
+            disposition: 'hidden',
+            position: 'fallback',
+          },
+        },
+      ],
+    }),
   ]);

package/src/capabilities/react-surface.tsx

@@ -16,30 +16,30 @@ import {
   type PluginsContext,
 } from '@dxos/app-framework';
 import {
+  AutomergePanel,
   ConfigPanel,
   CredentialsPanel,
   DeviceListPanel,
   DiagnosticsPanel,
+  EdgeDashboardPanel,
   FeedsPanel,
   IdentityPanel,
+  InvocationTracePanel,
   KeyringPanel,
   LoggingPanel,
   MembersPanel,
   MetadataPanel,
   NetworkPanel,
   ObjectsPanel,
+  QueuesPanel,
   SignalPanel,
   SpaceInfoPanel,
   SpaceListPanel,
   StoragePanel,
   SwarmPanel,
+  TestingPanel,
   TracingPanel,
-  EdgeDashboardPanel,
-  AutomergePanel,
   WorkflowPanel,
-  QueuesPanel,
-  InvocationTracePanel,
-  TestingPanel,
 } from '@dxos/devtools';
 import { SettingsStore } from '@dxos/local-storage';
 import { log } from '@dxos/log';
@@ -52,12 +52,20 @@ import {
   isSpace,
   isEchoObject,
   type ReactiveEchoObject,
-  type ReactiveObject,
+  type Live,
   type Space,
   parseId,
 } from '@dxos/react-client/echo';
 
-import { DebugApp, DebugObjectPanel, DebugSettings, DebugStatus, SpaceGenerator, Wireframe } from '../components';
+import {
+  DebugApp,
+  DebugObjectPanel,
+  DebugSettings,
+  DebugStatus,
+  DevtoolsOverviewContainer,
+  SpaceGenerator,
+  Wireframe,
+} from '../components';
 import { DEBUG_PLUGIN } from '../meta';
 import { type DebugSettingsProps, Devtools } from '../types';
 
@@ -97,7 +105,7 @@ export default (context: PluginsContext) =>
       filter: (data): data is { subject: SpaceDebug } => isSpaceDebug(data.subject),
       component: ({ data }) => {
         const handleCreateObject = useCallback(
-          (objects: ReactiveObject<any>[]) => {
+          (objects: Live<any>[]) => {
             if (!isSpace(data.subject.space)) {
               return;
             }
@@ -147,6 +155,11 @@ export default (context: PluginsContext) =>
         data.subject === 'debug' && isEchoObject(data.companionTo),
       component: ({ data }) => <DebugObjectPanel object={data.companionTo} />,
     }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/devtools-overview`,
+      role: 'deck-companion--devtools',
+      component: () => <DevtoolsOverviewContainer />,
+    }),
     createSurface({
       id: `${DEBUG_PLUGIN}/status`,
       role: 'status',

package/src/capabilities/settings.ts

@@ -3,13 +3,13 @@
 //
 
 import { Capabilities, contributes } from '@dxos/app-framework';
-import { create } from '@dxos/react-client/echo';
+import { live } from '@dxos/react-client/echo';
 
 import { DEBUG_PLUGIN } from '../meta';
 import { type DebugSettingsProps, DebugSettingsSchema } from '../types';
 
 export default () => {
-  const settings = create<DebugSettingsProps>({});
+  const settings = live<DebugSettingsProps>({});
 
   return contributes(Capabilities.Settings, { schema: DebugSettingsSchema, prefix: DEBUG_PLUGIN, value: settings });
 };

package/src/components/DebugStatus.tsx

@@ -6,12 +6,11 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { useAppGraph, useLayout } from '@dxos/app-framework';
 import { TimeoutError } from '@dxos/async';
-import { StatsPanel, useStats } from '@dxos/devtools';
 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 { Icon, Popover } from '@dxos/react-ui';
+import { Icon } from '@dxos/react-ui';
 
 const styles = {
   success: 'text-sky-300 dark:text-green-700',
@@ -180,28 +179,7 @@ const SavingIndicator = () => {
   }
 };
 
-const PerformanceIndicator = () => {
-  const [visible, setVisible] = useState(false);
-  const [stats, refreshStats] = useStats();
-
-  return (
-    <Popover.Root open={visible} onOpenChange={setVisible}>
-      <Popover.Trigger asChild>
-        <StatusBar.Button onClick={() => setVisible((visible) => !visible)} title='Performance panels'>
-          <Icon icon='ph--chart-bar--regular' size={4} />
-        </StatusBar.Button>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content classNames='max-is-[min(var(--radix-popover-content-available-width),300px)] max-bs-[--radix-popover-content-available-height]'>
-          <StatsPanel stats={stats} onRefresh={refreshStats} />
-          <Popover.Arrow />
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-};
-
-const indicators = [SavingIndicator, SwarmIndicator, PerformanceIndicator, ErrorIndicator];
+const indicators = [SavingIndicator, SwarmIndicator, ErrorIndicator];
 
 export const DebugStatus = () => {
   return (

package/src/components/DevtoolsOverviewContainer.tsx

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { StatsPanel, useStats } from '@dxos/devtools';
+
+export const DevtoolsOverviewContainer = () => {
+  const [stats, refreshStats] = useStats();
+
+  return (
+    <StatsPanel stats={stats} onRefresh={refreshStats}>
+      <Surface role='devtools-overview' />
+    </StatsPanel>
+  );
+};
+
+export default DevtoolsOverviewContainer;