@dxos/plugin-devtools 0.10.0

package/dx.config.ts

@@ -0,0 +1,28 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Config2 } from '@dxos/app-framework/config';
+import { trim } from '@dxos/util';
+
+export default Config2.make({
+  plugin: {
+    key: 'org.dxos.plugin.devtools',
+    name: 'Devtools',
+    author: 'DXOS',
+    description: trim`
+      DevtoolsPlugin is the developer inspector for DXOS Composer. It adds a structured Devtools node
+      to the navigation graph — grouped into Client, HALO, ECHO, Mesh, and EDGE sub-sections —
+      exposing panel views for config, storage, logs, diagnostics, identity, devices, feeds,
+      objects, schemas, automerge internals, network topology, EDGE workflows, and invocation
+      traces, all driven by the @dxos/devtools component library.
+
+      Additional utilities include an app-graph inspector, a ToolsExplorer connected to the DXOS MCP
+      introspect service, and a globalThis helper for manual storage-version testing.
+    `,
+    source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-devtools',
+    icon: { key: 'ph--toolbox--regular' },
+    spec: 'PLUGIN.mdl',
+    tags: ['labs'],
+  },
+});

package/package.json

@@ -0,0 +1,153 @@
+{
+  "name": "@dxos/plugin-devtools",
+  "version": "0.10.0",
+  "description": "DXOS developer inspector plugin.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
+  "author": "DXOS.org",
+  "sideEffects": true,
+  "type": "module",
+  "imports": {
+    "#capabilities": {
+      "source": "./src/capabilities/index.ts",
+      "types": "./dist/types/src/capabilities/index.d.ts",
+      "default": "./dist/lib/neutral/capabilities/index.mjs"
+    },
+    "#containers": {
+      "source": "./src/containers/index.ts",
+      "types": "./dist/types/src/containers/index.d.ts",
+      "default": "./dist/lib/neutral/containers/index.mjs"
+    },
+    "#meta": {
+      "source": "./src/meta.ts",
+      "types": "./dist/types/src/meta.d.ts",
+      "default": "./dist/lib/neutral/meta.mjs"
+    },
+    "#plugin": {
+      "source": {
+        "workerd": "./src/DevtoolsPlugin.workerd.ts",
+        "node": "./src/DevtoolsPlugin.node.ts",
+        "default": "./src/DevtoolsPlugin.tsx"
+      },
+      "types": "./dist/types/src/DevtoolsPlugin.d.ts",
+      "workerd": "./dist/lib/neutral/DevtoolsPlugin.workerd.mjs",
+      "node": "./dist/lib/neutral/DevtoolsPlugin.node.mjs",
+      "default": "./dist/lib/neutral/DevtoolsPlugin.mjs"
+    },
+    "#translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.mjs"
+    },
+    "#types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "default": "./dist/lib/neutral/types/index.mjs"
+    }
+  },
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts",
+      "default": "./dist/lib/neutral/index.mjs"
+    },
+    "./assets/PLUGIN.mdl": "./PLUGIN.mdl",
+    "./plugin": {
+      "source": "./src/plugin.ts",
+      "types": "./dist/types/src/plugin.d.ts",
+      "default": "./dist/lib/neutral/plugin.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "dx.config.ts",
+    "src",
+    "PLUGIN.mdl"
+  ],
+  "dependencies": {
+    "@antv/graphlib": "catalog:",
+    "@antv/layout": "catalog:",
+    "@dxos/app-framework": "workspace:*",
+    "@dxos/app-toolkit": "workspace:*",
+    "@dxos/assistant-toolkit": "workspace:*",
+    "@dxos/async": "workspace:*",
+    "@dxos/client-services": "workspace:*",
+    "@dxos/compute": "workspace:*",
+    "@dxos/compute-hyperformula": "workspace:*",
+    "@dxos/conductor": "workspace:*",
+    "@dxos/config": "workspace:*",
+    "@dxos/devtools": "workspace:*",
+    "@dxos/echo": "workspace:*",
+    "@dxos/echo-host": "workspace:*",
+    "@dxos/effect": "workspace:*",
+    "@dxos/invariant": "workspace:*",
+    "@dxos/keys": "workspace:*",
+    "@dxos/log": "workspace:*",
+    "@dxos/log-store-idb": "workspace:*",
+    "@dxos/operation": "workspace:*",
+    "@dxos/plugin-client": "workspace:*",
+    "@dxos/plugin-graph": "workspace:*",
+    "@dxos/plugin-inbox": "workspace:*",
+    "@dxos/plugin-markdown": "workspace:*",
+    "@dxos/plugin-script": "workspace:*",
+    "@dxos/plugin-sheet": "workspace:*",
+    "@dxos/plugin-sketch": "workspace:*",
+    "@dxos/plugin-space": "workspace:*",
+    "@dxos/plugin-status-bar": "workspace:*",
+    "@dxos/protocols": "workspace:*",
+    "@dxos/random": "workspace:*",
+    "@dxos/react-client": "workspace:*",
+    "@dxos/react-ui-attention": "workspace:*",
+    "@dxos/react-ui-canvas-compute": "workspace:*",
+    "@dxos/react-ui-canvas-editor": "workspace:*",
+    "@dxos/react-ui-form": "workspace:*",
+    "@dxos/react-ui-introspect": "workspace:*",
+    "@dxos/react-ui-syntax-highlighter": "workspace:*",
+    "@dxos/react-ui-table": "workspace:*",
+    "@dxos/schema": "workspace:*",
+    "@dxos/tracing": "workspace:*",
+    "@dxos/types": "workspace:*",
+    "@dxos/util": "workspace:*",
+    "@effect-atom/atom-react": "catalog:",
+    "@tldraw/tldraw": "catalog:",
+    "react-resize-detector": "catalog:"
+  },
+  "devDependencies": {
+    "@dxos/plugin-testing": "workspace:*",
+    "@dxos/react-ui": "workspace:*",
+    "@dxos/storybook-utils": "workspace:*",
+    "@dxos/ui-theme": "workspace:*",
+    "@effect-atom/atom-react": "catalog:",
+    "@effect/platform": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "effect": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "vite": "catalog:"
+  },
+  "peerDependencies": {
+    "@dxos/random": "workspace:*",
+    "@dxos/react-ui": "workspace:*",
+    "@dxos/ui-theme": "workspace:*",
+    "@effect-atom/atom-react": "catalog:",
+    "@effect/platform": "catalog:",
+    "effect": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/DevtoolsPlugin.node.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+
+import { AppGraphBuilder } from '#capabilities';
+import { meta } from '#meta';
+
+export const DevtoolsPlugin = Plugin.define(meta).pipe(
+  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  Plugin.make,
+);
+
+export default DevtoolsPlugin;

package/src/DevtoolsPlugin.test.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { createComposerTestApp } from '@dxos/plugin-testing/harness';
+
+import { DevtoolsPlugin } from '#plugin';
+
+import { meta } from './meta';
+
+const moduleId = (name: string) => `${meta.profile.key}.module.${name}`;
+
+describe('DevtoolsPlugin', () => {
+  test('modules activate on the expected events', async ({ expect }) => {
+    await using harness = await createComposerTestApp({
+      plugins: [DevtoolsPlugin()],
+    });
+
+    // AppGraphBuilder auto-cascades from Startup (SetupAppGraph).
+    expect(harness.manager.getActive()).toContain(moduleId('AppGraphBuilder'));
+  });
+});

package/src/DevtoolsPlugin.tsx

@@ -0,0 +1,54 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { ActivationEvents, Capability, Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+import { type Client } from '@dxos/react-client';
+
+import { AppGraphBuilder, ReactContext, ReactSurface } from '#capabilities';
+import { meta } from '#meta';
+import { translations } from '#translations';
+
+// eslint-disable-next-line import/no-relative-packages
+import pluginSpec from '../PLUGIN.mdl?raw';
+
+export const DevtoolsPlugin = Plugin.define(meta).pipe(
+  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addReactContextModule({ activate: ReactContext }),
+  Plugin.addModule({
+    id: Capability.getModuleTag(ReactSurface) ?? 'surfaces',
+    activatesOn: ActivationEvents.SetupReactSurface,
+    activate: () => ReactSurface(),
+  }),
+  AppPlugin.addTranslationsModule({ translations }),
+  Plugin.addModule({
+    id: 'setup-devtools',
+    activatesOn: ActivationEvents.Startup,
+    activate: () => Effect.sync(() => setupDevtools()),
+  }),
+  AppPlugin.addPluginAssetModule({
+    asset: { pluginId: meta.profile.key, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
+  }),
+  Plugin.make,
+);
+
+const setupDevtools = () => {
+  (globalThis as any).composer ??= {};
+
+  // Used to test how composer handles breaking protocol changes.
+  (globalThis as any).composer.changeStorageVersionInMetadata = async (version: number) => {
+    const { changeStorageVersionInMetadata } = await import('@dxos/echo-host/testing');
+    const { createStorageObjects } = await import('@dxos/client-services');
+    const client: Client = (window as any).dxos.client;
+    const config = client.config;
+    await client.destroy();
+    const { storage } = createStorageObjects(config.values?.runtime?.client?.storage ?? {});
+    await changeStorageVersionInMetadata(storage, version);
+    location.pathname = '/';
+  };
+};
+
+export default DevtoolsPlugin;

package/src/DevtoolsPlugin.workerd.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from '#meta';
+
+export const DevtoolsPlugin = Plugin.define(meta).pipe(Plugin.make);
+
+export default DevtoolsPlugin;

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

@@ -0,0 +1,388 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities, AppNode, AppNodeMatcher, Paths } from '@dxos/app-toolkit';
+import { GraphBuilder, Node, NodeMatcher } from '@dxos/plugin-graph';
+import { type Space } from '@dxos/react-client/echo';
+import { Position } from '@dxos/util';
+
+import { meta } from '#meta';
+import { Devtools } from '#types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const extensions = yield* Effect.all([
+      GraphBuilder.createExtension({
+        id: 'root',
+        match: NodeMatcher.whenRoot,
+        actions: () =>
+          Effect.succeed([
+            Node.makeAction({
+              id: 'resetData',
+              data: () =>
+                Effect.sync(() => {
+                  window.location.href = '/reset.html#continue';
+                }),
+              properties: {
+                label: ['reset-data.label', { ns: meta.profile.key }],
+                icon: 'ph--warning--regular',
+              },
+            }),
+          ]),
+      }),
+
+      GraphBuilder.createExtension({
+        id: 'devtools',
+        match: NodeMatcher.whenAny(NodeMatcher.whenRoot, AppNodeMatcher.whenNavTreeGroup(Paths.GroupTypes.system)),
+        connector: (_nodeOrSpace: Node.Node | Space, get) =>
+          Effect.gen(function* () {
+            const [graph] = get(yield* Capability.atom(AppCapabilities.AppGraph));
+
+            return [
+              Node.make({
+                id: Devtools.nodeId(Devtools.id),
+                data: null,
+                type: Devtools.id,
+                properties: {
+                  label: ['devtools.label', { ns: meta.profile.key }],
+                  icon: 'ph--toolbox--regular',
+                  position: Position.last,
+                },
+                nodes: [
+                  Node.make({
+                    id: Devtools.nodeId(Devtools.AppGraph),
+                    type: `${meta.profile.key}.app-graph`,
+                    data: { graph: graph?.graph, root: Node.RootId },
+                    properties: {
+                      label: ['debug-app-graph.label', { ns: meta.profile.key }],
+                      icon: 'ph--graph--regular',
+                    },
+                  }),
+                  Node.make({
+                    id: Devtools.nodeId(Devtools.ToolsExplorer),
+                    data: Devtools.ToolsExplorer,
+                    type: Devtools.id,
+                    properties: {
+                      label: ['debug-tools-explorer.label', { ns: meta.profile.key }],
+                      icon: 'ph--toolbox--regular',
+                    },
+                  }),
+                  Node.make({
+                    id: Devtools.nodeId(Devtools.Client.id),
+                    data: null,
+                    type: Devtools.id,
+                    properties: {
+                      label: ['client.label', { ns: meta.profile.key }],
+                      icon: 'ph--users--regular',
+                    },
+                    nodes: [
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Client.Config),
+                        data: Devtools.Client.Config,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['config.label', { ns: meta.profile.key }],
+                          icon: 'ph--gear--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Client.Storage),
+                        data: Devtools.Client.Storage,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['storage.label', { ns: meta.profile.key }],
+                          icon: 'ph--hard-drives--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Client.Sqlite),
+                        data: Devtools.Client.Sqlite,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['sqlite.label', { ns: meta.profile.key }],
+                          icon: 'ph--database--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Client.Logs),
+                        data: Devtools.Client.Logs,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['logs.label', { ns: meta.profile.key }],
+                          icon: 'ph--file-text--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Client.Diagnostics),
+                        data: Devtools.Client.Diagnostics,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['diagnostics.label', { ns: meta.profile.key }],
+                          icon: 'ph--chart-line--regular',
+                        },
+                      }),
+                    ],
+                  }),
+                  Node.make({
+                    id: Devtools.nodeId(Devtools.Halo.id),
+                    data: null,
+                    type: Devtools.id,
+                    properties: {
+                      label: ['halo.label', { ns: meta.profile.key }],
+                      icon: 'ph--identification-badge--regular',
+                    },
+                    nodes: [
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Halo.Identity),
+                        data: Devtools.Halo.Identity,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['identity.label', { ns: meta.profile.key }],
+                          icon: 'ph--identification-badge--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Halo.Devices),
+                        data: Devtools.Halo.Devices,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['devices.label', { ns: meta.profile.key }],
+                          icon: 'ph--devices--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Halo.Keyring),
+                        data: Devtools.Halo.Keyring,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['keyring.label', { ns: meta.profile.key }],
+                          icon: 'ph--key--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Halo.Credentials),
+                        data: Devtools.Halo.Credentials,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['credentials.label', { ns: meta.profile.key }],
+                          icon: 'ph--credit-card--regular',
+                        },
+                      }),
+                    ],
+                  }),
+                  Node.make({
+                    id: Devtools.nodeId(Devtools.Echo.id),
+                    data: null,
+                    type: Devtools.id,
+                    properties: {
+                      label: ['echo.label', { ns: meta.profile.key }],
+                      icon: 'ph--database--regular',
+                    },
+                    nodes: [
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Echo.Spaces),
+                        data: Devtools.Echo.Spaces,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['spaces.label', { ns: meta.profile.key }],
+                          icon: 'ph--graph--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Echo.Space),
+                        data: Devtools.Echo.Space,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['space.label', { ns: meta.profile.key }],
+                          icon: 'ph--planet--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Echo.Feeds),
+                        data: Devtools.Echo.Feeds,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['feeds.label', { ns: meta.profile.key }],
+                          icon: 'ph--list-bullets--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Echo.Objects),
+                        data: Devtools.Echo.Objects,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['objects.label', { ns: meta.profile.key }],
+                          icon: 'ph--cube--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Echo.Schema),
+                        data: Devtools.Echo.Schema,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['schema.label', { ns: meta.profile.key }],
+                          icon: 'ph--database--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Echo.Registry),
+                        data: Devtools.Echo.Registry,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['registry.label', { ns: meta.profile.key }],
+                          icon: 'ph--books--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Echo.Automerge),
+                        data: Devtools.Echo.Automerge,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['automerge.label', { ns: meta.profile.key }],
+                          icon: 'ph--gear-six--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Echo.Queues),
+                        data: Devtools.Echo.Queues,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['queues.label', { ns: meta.profile.key }],
+                          icon: 'ph--queue--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Echo.Members),
+                        data: Devtools.Echo.Members,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['members.label', { ns: meta.profile.key }],
+                          icon: 'ph--users--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Echo.Metadata),
+                        data: Devtools.Echo.Metadata,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['metadata.label', { ns: meta.profile.key }],
+                          icon: 'ph--hard-drive--regular',
+                        },
+                      }),
+                    ],
+                  }),
+                  Node.make({
+                    id: Devtools.nodeId(Devtools.Mesh.id),
+                    data: null,
+                    type: Devtools.id,
+                    properties: {
+                      label: ['mesh.label', { ns: meta.profile.key }],
+                      icon: 'ph--graph--regular',
+                    },
+                    nodes: [
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Mesh.Signal),
+                        data: Devtools.Mesh.Signal,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['signal.label', { ns: meta.profile.key }],
+                          icon: 'ph--wifi-high--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Mesh.Swarm),
+                        data: Devtools.Mesh.Swarm,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['swarm.label', { ns: meta.profile.key }],
+                          icon: 'ph--users-three--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Mesh.Network),
+                        data: Devtools.Mesh.Network,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['network.label', { ns: meta.profile.key }],
+                          icon: 'ph--polygon--regular',
+                        },
+                      }),
+                    ],
+                  }),
+                  Node.make({
+                    id: Devtools.nodeId(Devtools.Edge.id),
+                    data: null,
+                    type: Devtools.id,
+                    properties: {
+                      label: ['edge.label', { ns: meta.profile.key }],
+                      icon: 'ph--cloud--regular',
+                    },
+                    nodes: [
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Edge.Dashboard),
+                        data: Devtools.Edge.Dashboard,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['dashboard.label', { ns: meta.profile.key }],
+                          icon: 'ph--computer-tower--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Edge.Workflows),
+                        data: Devtools.Edge.Workflows,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['workflows.label', { ns: meta.profile.key }],
+                          icon: 'ph--function--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Edge.Traces),
+                        data: Devtools.Edge.Traces,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['traces.label', { ns: meta.profile.key }],
+                          icon: 'ph--line-segments--regular',
+                        },
+                      }),
+                      Node.make({
+                        id: Devtools.nodeId(Devtools.Edge.Testing),
+                        data: Devtools.Edge.Testing,
+                        type: Devtools.id,
+                        properties: {
+                          label: ['testing.label', { ns: meta.profile.key }],
+                          icon: 'ph--flask--regular',
+                        },
+                      }),
+                    ],
+                  }),
+                ],
+              }),
+            ];
+          }),
+      }),
+
+      // Devtools deck companion.
+      GraphBuilder.createExtension({
+        id: 'devtoolsOverview',
+        match: NodeMatcher.whenRoot,
+        connector: () =>
+          Effect.succeed([
+            AppNode.makeDeckCompanion({
+              id: 'devtoolsOverview',
+              label: ['devtools-overview.label', { ns: meta.profile.key }],
+              icon: 'ph--equalizer--regular',
+              data: 'devtoolsOverview' as const,
+              position: Position.last,
+            }),
+          ]),
+      }),
+    ]);
+
+    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
+  }),
+);