@dxos/plugin-devtools 0.12.0-next-2800d0376abcc62d5544afdd744b16b2b960434e → 0.13.0

package/src/capabilities/gen/browser.ts

@@ -0,0 +1,61 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'browser' condition.
+
+import { create } from '@bufbuild/protobuf';
+import * as Effect from 'effect/Effect';
+
+import * as Capability from '@dxos/app-framework/Capability';
+import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
+import * as AppCapability from '@dxos/app-toolkit/AppCapability';
+import { Runtime_Client_StorageSchema } from '@dxos/protocols/buf/dxos/config_pb';
+import { type Client } from '@dxos/react-client';
+
+import { meta } from '#meta';
+import { translations } from '#translations';
+
+import pluginSpec from '../../../PLUGIN.mdl?raw';
+
+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/client-services/testing');
+    const { Storage } = await import('@dxos/client-services');
+    const client: Client = (window as any).dxos.client;
+    const config = client.config;
+    await client.destroy();
+    const { storage } = Storage.createStorageObjects(
+      config.values?.runtime?.client?.storage ?? create(Runtime_Client_StorageSchema, {}),
+    );
+    await changeStorageVersionInMetadata(storage, version);
+    location.pathname = '/';
+  };
+};
+
+export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder.ts'), {
+  requires: [AppCapabilities.AppGraph],
+  environments: ['browser', 'node', 'tauri'],
+});
+
+export const ReactContext = AppCapability.reactContext(() => import('../react-context.tsx'));
+
+export const ReactSurface = AppCapability.surface(() => import('../react-surface.ts'), {
+  roles: ['org.dxos.plugin.debug.surface.page', 'org.dxos.role.deckCompanion.devtoolsOverview'],
+});
+
+export const SetupDevtools = Capability.inlineModule('setup-devtools', { provides: [] }, () =>
+  Effect.sync(() => setupDevtools()),
+);
+
+export const Translations = AppCapability.translations(translations);
+
+export const PluginAsset = AppCapability.pluginAsset({
+  pluginId: meta.profile.key,
+  path: 'PLUGIN.mdl',
+  content: pluginSpec,
+  mimeType: 'application/x-mdl',
+});

package/src/capabilities/gen/node.ts

@@ -21,11 +21,11 @@ const setupDevtools = () => {
   // Used to test how composer handles breaking protocol changes.
   (globalThis as any).composer.changeStorageVersionInMetadata = async (version: number) => {
     const { changeStorageVersionInMetadata } = await import('@dxos/client-services/testing');
-    const { createStorageObjects } = await import('@dxos/client-services');
+    const { Storage } = await import('@dxos/client-services');
     const client: Client = (window as any).dxos.client;
     const config = client.config;
     await client.destroy();
-    const { storage } = createStorageObjects(
+    const { storage } = Storage.createStorageObjects(
       config.values?.runtime?.client?.storage ?? create(Runtime_Client_StorageSchema, {}),
     );
     await changeStorageVersionInMetadata(storage, version);
@@ -33,9 +33,9 @@ const setupDevtools = () => {
   };
 };
 
-export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder'), {
+export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder.ts'), {
   requires: [AppCapabilities.AppGraph],
-  environments: ['node'],
+  environments: ['browser', 'node', 'tauri'],
 });
 
 export const SetupDevtools = Capability.inlineModule('setup-devtools', { provides: [] }, () =>

package/src/capabilities/gen/tauri.ts

@@ -0,0 +1,61 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'tauri' condition.
+
+import { create } from '@bufbuild/protobuf';
+import * as Effect from 'effect/Effect';
+
+import * as Capability from '@dxos/app-framework/Capability';
+import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
+import * as AppCapability from '@dxos/app-toolkit/AppCapability';
+import { Runtime_Client_StorageSchema } from '@dxos/protocols/buf/dxos/config_pb';
+import { type Client } from '@dxos/react-client';
+
+import { meta } from '#meta';
+import { translations } from '#translations';
+
+import pluginSpec from '../../../PLUGIN.mdl?raw';
+
+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/client-services/testing');
+    const { Storage } = await import('@dxos/client-services');
+    const client: Client = (window as any).dxos.client;
+    const config = client.config;
+    await client.destroy();
+    const { storage } = Storage.createStorageObjects(
+      config.values?.runtime?.client?.storage ?? create(Runtime_Client_StorageSchema, {}),
+    );
+    await changeStorageVersionInMetadata(storage, version);
+    location.pathname = '/';
+  };
+};
+
+export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder.ts'), {
+  requires: [AppCapabilities.AppGraph],
+  environments: ['browser', 'node', 'tauri'],
+});
+
+export const ReactContext = AppCapability.reactContext(() => import('../react-context.tsx'));
+
+export const ReactSurface = AppCapability.surface(() => import('../react-surface.ts'), {
+  roles: ['org.dxos.plugin.debug.surface.page', 'org.dxos.role.deckCompanion.devtoolsOverview'],
+});
+
+export const SetupDevtools = Capability.inlineModule('setup-devtools', { provides: [] }, () =>
+  Effect.sync(() => setupDevtools()),
+);
+
+export const Translations = AppCapability.translations(translations);
+
+export const PluginAsset = AppCapability.pluginAsset({
+  pluginId: meta.profile.key,
+  path: 'PLUGIN.mdl',
+  content: pluginSpec,
+  mimeType: 'application/x-mdl',
+});

package/src/capabilities/gen/workerd.ts

@@ -20,11 +20,11 @@ const setupDevtools = () => {
   // Used to test how composer handles breaking protocol changes.
   (globalThis as any).composer.changeStorageVersionInMetadata = async (version: number) => {
     const { changeStorageVersionInMetadata } = await import('@dxos/client-services/testing');
-    const { createStorageObjects } = await import('@dxos/client-services');
+    const { Storage } = await import('@dxos/client-services');
     const client: Client = (window as any).dxos.client;
     const config = client.config;
     await client.destroy();
-    const { storage } = createStorageObjects(
+    const { storage } = Storage.createStorageObjects(
       config.values?.runtime?.client?.storage ?? create(Runtime_Client_StorageSchema, {}),
     );
     await changeStorageVersionInMetadata(storage, version);

package/src/capabilities/index.ts

@@ -17,13 +17,13 @@ import { translations } from '#translations';
 // eslint-disable-next-line import/no-relative-packages
 import pluginSpec from '../../PLUGIN.mdl?raw';
 
-export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('./app-graph-builder'), {
+export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('./app-graph-builder.ts'), {
   requires: [AppCapabilities.AppGraph],
-  environments: ['node'],
+  environments: ['browser', 'node', 'tauri'],
 });
-export const ReactContext = AppCapability.reactContext(() => import('./react-context'));
-export const ReactSurface = AppCapability.surface(() => import('./react-surface'), {
-  roles: ['org.dxos.role.article', 'org.dxos.role.deckCompanion.devtoolsOverview'],
+export const ReactContext = AppCapability.reactContext(() => import('./react-context.tsx'));
+export const ReactSurface = AppCapability.surface(() => import('./react-surface.ts'), {
+  roles: ['org.dxos.plugin.debug.surface.page', 'org.dxos.role.deckCompanion.devtoolsOverview'],
 });
 export const SetupDevtools = Capability.inlineModule('setup-devtools', { provides: [] }, () =>
   Effect.sync(() => setupDevtools()),
@@ -42,11 +42,11 @@ const setupDevtools = () => {
   // Used to test how composer handles breaking protocol changes.
   (globalThis as any).composer.changeStorageVersionInMetadata = async (version: number) => {
     const { changeStorageVersionInMetadata } = await import('@dxos/client-services/testing');
-    const { createStorageObjects } = await import('@dxos/client-services');
+    const { Storage } = await import('@dxos/client-services');
     const client: Client = (window as any).dxos.client;
     const config = client.config;
     await client.destroy();
-    const { storage } = createStorageObjects(
+    const { storage } = Storage.createStorageObjects(
       config.values?.runtime?.client?.storage ?? create(Runtime_Client_StorageSchema, {}),
     );
     await changeStorageVersionInMetadata(storage, version);

package/src/capabilities/react-context.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 import * as Capabilities from '@dxos/app-framework/Capabilities';
 import * as Capability from '@dxos/app-framework/Capability';
-import { Surface } from '@dxos/app-framework/ui';
+import * as Surface from '@dxos/app-framework/Surface';
 import { DevtoolsContextProvider } from '@dxos/devtools';
 
 import { meta } from '#meta';

package/src/capabilities/react-surface.ts

@@ -6,47 +6,67 @@ import * as Effect from 'effect/Effect';
 
 import * as Capabilities from '@dxos/app-framework/Capabilities';
 import * as Capability from '@dxos/app-framework/Capability';
-import { Surface } from '@dxos/app-framework/ui';
+import * as Surface from '@dxos/app-framework/Surface';
 import type * as AppGraph from '@dxos/app-graph/AppGraph';
-import { AppSurface } from '@dxos/app-toolkit/ui';
-import { EDGE_SERVICE_DEFAULTS, EdgeServiceName } from '@dxos/config';
+import * as AppSurface from '@dxos/app-toolkit/AppSurface';
 import {
-  AutomergePanel,
-  ConfigPanel,
-  CredentialsPanel,
-  DeviceListPanel,
-  DiagnosticsPanel,
-  EdgeDashboardPanel,
-  FeedsPanel,
-  IdentityPanel,
-  KeyringPanel,
-  LoggingPanel,
-  MembersPanel,
-  MetadataPanel,
-  NetworkPanel,
-  ObjectsPanel,
-  QueuesPanel,
-  SchemaPanel,
-  SignalPanel,
-  SqlitePanel,
-  StoragePanel,
-  SwarmPanel,
-  WorkflowPanel,
+  AutomergeArticle,
+  ConfigArticle,
+  CredentialsArticle,
+  DatabaseCard,
+  DeviceListArticle,
+  DiagnosticsArticle,
+  EdgeDashboardArticle,
+  FeedsArticle,
+  IdentityArticle,
+  KeyringArticle,
+  LoggingArticle,
+  MembersArticle,
+  MemoryCard,
+  MetadataArticle,
+  NetworkArticle,
+  NetworkCard,
+  ObjectsArticle,
+  PerformanceCard,
+  QueriesArticle,
+  QueuesArticle,
+  ReplicatorCard,
+  ReplicatorMessagesCard,
+  SchemaArticle,
+  SignalArticle,
+  SqliteArticle,
+  StorageArticle,
+  SwarmArticle,
+  TimeSeriesCard,
+  WorkflowArticle,
 } from '@dxos/devtools';
-import { ToolsExplorer } from '@dxos/react-ui-introspect';
+import * as DebugSurface from '@dxos/plugin-debug/DebugSurface';
 
-import { CliPanel, DebugGraph, DevtoolsOverviewContainer, RegistryPanel } from '#containers';
+import {
+  CliArticle,
+  DebugGraph,
+  DevtoolsOverviewContainer,
+  RegistryArticle,
+  ToolsExplorerContainer,
+} from '#containers';
 import { Devtools } from '#types';
 
+import {
+  EdgeCardSurface,
+  IndexerCardSurface,
+  QueriesCardSurface,
+  SurfaceProfilerCardSurface,
+  SwarmTraceCardSurface,
+  SyncCardSurface,
+  devtoolsCard,
+} from './DevtoolsCards.tsx';
 import {
   ActiveSpacePanel,
   EdgeTestingSurface,
   EdgeTracesSurface,
   SpaceInfoSurface,
   SpaceListSurface,
-} from './DevtoolsSurfaces';
-
-const MCP_SERVER_URL = EDGE_SERVICE_DEFAULTS[EdgeServiceName.Introspect];
+} from './DevtoolsSurfaces.tsx';
 
 type GraphDebug = {
   graph: AppGraph.Graph;
@@ -73,25 +93,27 @@ export default Capability.makeModule(
     return Capability.contribute(Capabilities.ReactSurface, [
       Surface.create({
         id: 'appGraph',
-        filter: AppSurface.subject(AppSurface.Article, isGraphDebug),
+        filter: AppSurface.subject(DebugSurface.Page, isGraphDebug),
         component: DebugGraph,
-        props: ({ data: { subject } }) => ({ graph: subject.graph, root: subject.root }),
+        props: ({ role, data: { subject } }) => ({ role, graph: subject.graph, root: subject.root }),
       }),
       Surface.create({
         id: 'toolsExplorer',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.ToolsExplorer),
-        component: ToolsExplorer,
-        props: () => ({ serverUrl: MCP_SERVER_URL }),
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.ToolsExplorer),
+        component: ToolsExplorerContainer,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'cli',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Cli),
-        component: CliPanel,
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Cli),
+        component: CliArticle,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'registry',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Registry),
-        component: RegistryPanel,
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Echo.Registry),
+        component: RegistryArticle,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'devtoolsOverview',
@@ -99,143 +121,259 @@ export default Capability.makeModule(
         component: DevtoolsOverviewContainer,
       }),
 
+      //
+      // Stats cards, in stack order.
+      //
+
+      Surface.create({
+        id: 'card.memory',
+        filter: devtoolsCard,
+        position: 0,
+        component: MemoryCard,
+        props: ({ data: { stats } }) => ({ memory: stats.memory }),
+      }),
+      Surface.create({
+        id: 'card.network',
+        filter: devtoolsCard,
+        position: 1,
+        component: NetworkCard,
+        props: ({ data: { stats } }) => ({ network: stats.network }),
+      }),
+      Surface.create({
+        id: 'card.edge',
+        filter: devtoolsCard,
+        position: 2,
+        component: EdgeCardSurface,
+        props: ({ data: { stats } }) => ({ stats }),
+      }),
+      Surface.create({
+        id: 'card.performance',
+        filter: devtoolsCard,
+        position: 3,
+        component: PerformanceCard,
+        props: ({ data: { stats } }) => ({ entries: stats.performanceEntries }),
+      }),
+      Surface.create({
+        id: 'card.swarmTrace',
+        filter: devtoolsCard,
+        position: 4,
+        component: SwarmTraceCardSurface,
+      }),
+      Surface.create({
+        id: 'card.surfaceProfiler',
+        filter: devtoolsCard,
+        position: 5,
+        component: SurfaceProfilerCardSurface,
+        props: ({ data: { surfaceProfilerStats, onClearSurfaceProfiler } }) => ({
+          surfaceProfilerStats,
+          onClearSurfaceProfiler,
+        }),
+      }),
+      Surface.create({
+        id: 'card.database',
+        filter: devtoolsCard,
+        position: 6,
+        component: DatabaseCard,
+        props: ({ data: { stats } }) => ({ database: stats.database }),
+      }),
+      Surface.create({
+        id: 'card.replicator',
+        filter: devtoolsCard,
+        position: 7,
+        component: ReplicatorCard,
+        props: ({ data: { stats } }) => ({ database: stats.database }),
+      }),
+      Surface.create({
+        id: 'card.replicatorMessages',
+        filter: devtoolsCard,
+        position: 8,
+        component: ReplicatorMessagesCard,
+        props: ({ data: { stats } }) => ({ database: stats.database }),
+      }),
+      Surface.create({
+        id: 'card.queries',
+        filter: devtoolsCard,
+        position: 9,
+        component: QueriesCardSurface,
+      }),
+      Surface.create({
+        id: 'card.sync',
+        filter: devtoolsCard,
+        position: 11,
+        component: SyncCardSurface,
+      }),
+      Surface.create({
+        id: 'card.indexer',
+        filter: devtoolsCard,
+        position: 12,
+        component: IndexerCardSurface,
+      }),
+      Surface.create({
+        id: 'card.timeSeries',
+        filter: devtoolsCard,
+        position: 13,
+        component: TimeSeriesCard,
+      }),
+
       //
       // Devtools
       //
 
       Surface.create({
         id: 'client.config',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Config),
-        component: ConfigPanel,
-        props: () => ({ vaultSelector: false }),
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Client.Config),
+        component: ConfigArticle,
+        props: ({ role }) => ({ role, vaultSelector: false }),
       }),
       Surface.create({
         id: 'client.storage',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Storage),
-        component: StoragePanel,
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Client.Storage),
+        component: StorageArticle,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'client.sqlite',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Sqlite),
-        component: SqlitePanel,
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Client.Sqlite),
+        component: SqliteArticle,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'client.logs',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Logs),
-        component: LoggingPanel,
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Client.Logs),
+        component: LoggingArticle,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'client.diagnostics',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Diagnostics),
-        component: DiagnosticsPanel,
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Client.Diagnostics),
+        component: DiagnosticsArticle,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'halo.identity',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Halo.Identity),
-        component: IdentityPanel,
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Halo.Identity),
+        component: IdentityArticle,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'halo.devices',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Halo.Devices),
-        component: DeviceListPanel,
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Halo.Devices),
+        component: DeviceListArticle,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'halo.keyring',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Halo.Keyring),
-        component: KeyringPanel,
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Halo.Keyring),
+        component: KeyringArticle,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'halo.credentials',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Halo.Credentials),
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Halo.Credentials),
         component: ActiveSpacePanel,
-        props: () => ({ Panel: CredentialsPanel }),
+        props: ({ role }) => ({ role, Panel: CredentialsArticle }),
       }),
       Surface.create({
         id: 'echo.spaces',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Spaces),
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Echo.Spaces),
         component: SpaceListSurface,
+        props: ({ role, data: { onNavigate } }) => ({ role, onNavigate }),
       }),
       Surface.create({
         id: 'echo.space',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Space),
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Echo.Space),
         component: SpaceInfoSurface,
+        props: ({ role, data: { onNavigate } }) => ({ role, onNavigate }),
       }),
       Surface.create({
         id: 'echo.feeds',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Feeds),
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Echo.Feeds),
         component: ActiveSpacePanel,
-        props: () => ({ Panel: FeedsPanel }),
+        props: ({ role }) => ({ role, Panel: FeedsArticle }),
       }),
       Surface.create({
         id: 'echo.objects',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Objects),
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Echo.Objects),
         component: ActiveSpacePanel,
-        props: () => ({ Panel: ObjectsPanel }),
+        props: ({ role }) => ({ role, Panel: ObjectsArticle }),
+      }),
+      Surface.create({
+        id: 'echo.queries',
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Echo.Queries),
+        component: QueriesArticle,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'echo.schema',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Schema),
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Echo.Schema),
         component: ActiveSpacePanel,
-        props: () => ({ Panel: SchemaPanel }),
+        props: ({ role }) => ({ role, Panel: SchemaArticle }),
       }),
       Surface.create({
         id: 'echo.automerge',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Automerge),
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Echo.Automerge),
         component: ActiveSpacePanel,
-        props: () => ({ Panel: AutomergePanel }),
+        props: ({ role }) => ({ role, Panel: AutomergeArticle }),
       }),
       Surface.create({
         id: 'echo.queues',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Queues),
-        component: QueuesPanel,
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Echo.Queues),
+        component: QueuesArticle,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'echo.members',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Members),
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Echo.Members),
         component: ActiveSpacePanel,
-        props: () => ({ Panel: MembersPanel }),
+        props: ({ role }) => ({ role, Panel: MembersArticle }),
       }),
       Surface.create({
         id: 'echo.metadata',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Metadata),
-        component: MetadataPanel,
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Echo.Metadata),
+        component: MetadataArticle,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'mesh.signal',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Mesh.Signal),
-        component: SignalPanel,
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Mesh.Signal),
+        component: SignalArticle,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'mesh.swarm',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Mesh.Swarm),
-        component: SwarmPanel,
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Mesh.Swarm),
+        component: SwarmArticle,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'mesh.network',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Mesh.Network),
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Mesh.Network),
         component: ActiveSpacePanel,
-        props: () => ({ Panel: NetworkPanel }),
+        props: ({ role }) => ({ role, Panel: NetworkArticle }),
       }),
       Surface.create({
         id: 'edge.dashboard',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Edge.Dashboard),
-        component: EdgeDashboardPanel,
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Edge.Dashboard),
+        component: EdgeDashboardArticle,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'edge.workflows',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Edge.Workflows),
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Edge.Workflows),
         component: ActiveSpacePanel,
-        props: () => ({ Panel: WorkflowPanel }),
+        props: ({ role }) => ({ role, Panel: WorkflowArticle }),
       }),
       Surface.create({
         id: 'edge.traces',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Edge.Traces),
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Edge.Traces),
         component: EdgeTracesSurface,
+        props: ({ role }) => ({ role }),
       }),
       Surface.create({
         id: 'edge.testing',
-        filter: AppSurface.literal(AppSurface.Article, Devtools.Edge.Testing),
+        filter: AppSurface.literal(DebugSurface.Page, Devtools.Edge.Testing),
         component: EdgeTestingSurface,
+        props: ({ role }) => ({ role }),
       }),
     ]);
   }),