@dxos/plugin-debug 0.8.4-main.e8ec1fe → 0.8.4-main.effb148878

package/src/capabilities/react-surface.tsx

@@ -2,19 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import * as Function from 'effect/Function';
+import * as Effect from 'effect/Effect';
 import React, { useCallback } from 'react';
 
-import {
-  Capabilities,
-  LayoutAction,
-  type PluginContext,
-  chain,
-  contributes,
-  createIntent,
-  createSurface,
-} from '@dxos/app-framework';
-import { useCapability, useIntentDispatcher } from '@dxos/app-framework/react';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface, useOperationInvoker, useSettingsState } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation, getObjectPathFromObject } from '@dxos/app-toolkit';
+import { AppSurface, useActiveSpace } from '@dxos/app-toolkit/ui';
 import {
   AutomergePanel,
   ConfigPanel,
@@ -39,31 +33,32 @@ import {
   StoragePanel,
   SwarmPanel,
   TestingPanel,
-  TracingPanel,
   WorkflowPanel,
 } from '@dxos/devtools';
-import { Obj } from '@dxos/echo';
-import { SettingsStore } from '@dxos/local-storage';
+import { Collection, Feed, Obj, Type } from '@dxos/echo';
 import { log } from '@dxos/log';
-import { ClientCapabilities } from '@dxos/plugin-client';
-import { Graph } from '@dxos/plugin-graph';
-import { ScriptAction } from '@dxos/plugin-script/types';
-import { SpaceAction } from '@dxos/plugin-space/types';
-import { type Space, SpaceState, isSpace, parseId } from '@dxos/react-client/echo';
-import { StackItem } from '@dxos/react-ui-stack';
-import { Collection } from '@dxos/schema';
+import { type IdbLogStore } from '@dxos/log-store-idb';
+import { type Graph } from '@dxos/plugin-graph';
+import { ScriptOperation } from '@dxos/plugin-script';
+import { SpaceOperation } from '@dxos/plugin-space';
+import { type Space, SpaceState, isSpace } from '@dxos/react-client/echo';
+import { ToolsExplorer } from '@dxos/react-ui-introspect';
 
+import { DebugSettings } from '#components';
 import {
   DebugGraph,
   DebugObjectPanel,
-  DebugSettings,
+  DebugSpaceObjectsPanel,
   DebugStatus,
   DevtoolsOverviewContainer,
   SpaceGenerator,
   Wireframe,
-} from '../components';
-import { meta } from '../meta';
-import { type DebugSettingsProps, Devtools } from '../types';
+} from '#containers';
+import { meta } from '#meta';
+import { DebugCapabilities, type Settings, Devtools } from '#types';
+
+// TODO(burdon): Move to config.
+const MCP_SERVER_URL = 'https://introspect-service-labs.dxos.workers.dev/mcp';
 
 type SpaceDebug = {
   type: string;
@@ -71,348 +66,373 @@ type SpaceDebug = {
 };
 
 type GraphDebug = {
-  graph: Graph;
+  graph: Graph.Graph;
   root: string;
 };
 
-const isSpaceDebug = (data: any): data is SpaceDebug => data?.type === `${meta.id}/space` && isSpace(data.space);
-const isGraphDebug = (data: any): data is GraphDebug => data?.graph instanceof Graph && typeof data?.root === 'string';
+const isSpaceDebug = (data: any): data is SpaceDebug => data?.type === `${meta.id}.space` && isSpace(data.space);
+const isGraphDebug = (data: any): data is GraphDebug => {
+  const graph = data?.graph;
+  return (
+    graph != null && typeof graph === 'object' && typeof graph.json === 'function' && typeof data?.root === 'string'
+  );
+};
 
-// TODO(wittjosiah): Factor out?
-const useCurrentSpace = () => {
-  const layout = useCapability(Capabilities.Layout);
-  const client = useCapability(ClientCapabilities.Client);
-  const { spaceId } = parseId(layout.workspace);
-  const space = spaceId ? client.spaces.get(spaceId) : undefined;
-  return space;
+type ReactSurfaceOptions = {
+  logStore?: IdbLogStore;
 };
 
-export default (context: PluginContext) =>
-  contributes(Capabilities.ReactSurface, [
-    createSurface({
-      id: `${meta.id}/plugin-settings`,
-      role: 'article',
-      filter: (data): data is { subject: SettingsStore<DebugSettingsProps> } =>
-        data.subject instanceof SettingsStore && data.subject.prefix === meta.id,
-      component: ({ data: { subject } }) => <DebugSettings settings={subject.value} />,
-    }),
-    createSurface({
-      id: `${meta.id}/space`,
-      role: 'article',
-      filter: (data): data is { subject: SpaceDebug } => isSpaceDebug(data.subject),
-      component: ({ data }) => {
-        const { dispatchPromise: dispatch } = useIntentDispatcher();
+export default Capability.makeModule(
+  Effect.fnUntraced(function* ({ logStore }: ReactSurfaceOptions) {
+    const capabilities = yield* Capability.Service;
+    const registry = capabilities.get(Capabilities.AtomRegistry);
+    const settingsAtom = capabilities.get(DebugCapabilities.Settings);
+    const fileUploader = capabilities.getAll(AppCapabilities.FileUploader)[0];
+
+    return Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'plugin-settings',
+        filter: AppSurface.settings(AppSurface.Article, meta.id),
+        component: ({ data: { subject } }) => {
+          const { settings, updateSettings } = useSettingsState<Settings.Settings>(subject.atom);
+          return (
+            <DebugSettings
+              settings={settings}
+              onSettingsChange={updateSettings}
+              logStore={logStore}
+              onUpload={fileUploader}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'space',
+        role: 'article',
+        filter: (data): data is { subject: SpaceDebug } => isSpaceDebug(data.subject),
+        component: ({ role, data }) => {
+          const { invokePromise } = useOperationInvoker();
 
-        const handleCreateObject = useCallback(
-          (objects: Obj.Any[]) => {
-            if (!isSpace(data.subject.space)) {
-              return;
-            }
+          const handleCreateObject = useCallback(
+            (objects: Obj.Unknown[]) => {
+              if (!isSpace(data.subject.space)) {
+                return;
+              }
 
-            const collection =
-              data.subject.space.state.get() === SpaceState.SPACE_READY &&
-              data.subject.space.properties[Collection.Collection.typename]?.target;
-            if (!Obj.instanceOf(Collection.Collection, collection)) {
-              return;
-            }
+              const collection =
+                data.subject.space.state.get() === SpaceState.SPACE_READY &&
+                data.subject.space.properties[Type.getTypename(Collection.Collection)]?.target;
+              if (!Obj.instanceOf(Collection.Collection, collection)) {
+                return;
+              }
 
-            objects.forEach((object) => {
-              void dispatch(
-                createIntent(SpaceAction.AddObject, {
+              objects.forEach((object) => {
+                void invokePromise(SpaceOperation.AddObject, {
                   target: collection,
                   object,
-                }),
-              );
-            });
-          },
-          [data.subject.space],
-        );
+                });
+              });
+            },
+            [data.subject.space, invokePromise],
+          );
+
+          return <SpaceGenerator role={role} space={data.subject.space} onCreateObjects={handleCreateObject} />;
+        },
+      }),
+      Surface.create({
+        id: 'app-graph',
+        role: 'article',
+        filter: (data): data is { subject: GraphDebug } => isGraphDebug(data.subject),
+        component: ({ data }) => <DebugGraph graph={data.subject.graph} root={data.subject.root} />,
+      }),
+      Surface.create({
+        id: 'tools-explorer',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.ToolsExplorer),
+        component: () => <ToolsExplorer serverUrl={MCP_SERVER_URL} />,
+      }),
+      Surface.create({
+        id: 'wireframe',
+        // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
+        role: ['article', 'section'],
+        position: 'first',
+        filter: (data): data is { subject: Obj.Unknown } => {
+          const settings = registry.get(settingsAtom);
+          return Obj.isObject(data.subject) && !!settings.wireframe;
+        },
+        component: ({ data, role, name }) => (
+          <Wireframe label={`${role}:${name}`} object={data.subject} classNames='row-span-2 overflow-hidden' />
+        ),
+      }),
+      Surface.create({
+        id: 'object-debug',
+        filter: AppSurface.allOf(
+          AppSurface.literal(AppSurface.Article, 'debug'),
+          AppSurface.companion(AppSurface.Article),
+        ),
+        component: ({ role, data }) => <DebugObjectPanel role={role} companionTo={data.companionTo} />,
+      }),
+      Surface.create({
+        id: 'devtools-overview',
+        filter: AppSurface.literal(Surface.makeType<{ subject: string }>('deck-companion--devtools'), 'devtools'),
+        component: () => <DevtoolsOverviewContainer />,
+      }),
+      Surface.create({
+        id: 'space-objects',
+        filter: AppSurface.literal(
+          Surface.makeType<{ subject: string }>('deck-companion--space-objects'),
+          'space-objects',
+        ),
+        component: () => {
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
+
+          return <DebugSpaceObjectsPanel space={space} />;
+        },
+      }),
+
+      Surface.create({
+        id: 'status',
+        role: 'status-indicator',
+        position: 'first',
+        component: () => <DebugStatus />,
+      }),
+
+      //
+      // Devtools
+      //
+
+      Surface.create({
+        id: 'client.config',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Config),
+        component: () => <ConfigPanel vaultSelector={false} />,
+      }),
+      Surface.create({
+        id: 'client.storage',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Storage),
+        component: () => <StoragePanel />,
+      }),
+      Surface.create({
+        id: 'client.logs',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Logs),
+        component: () => <LoggingPanel />,
+      }),
+      Surface.create({
+        id: 'client.diagnostics',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Diagnostics),
+        component: () => <DiagnosticsPanel />,
+      }),
+      Surface.create({
+        id: 'halo.identity',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Halo.Identity),
+        component: () => <IdentityPanel />,
+      }),
+      Surface.create({
+        id: 'halo.devices',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Halo.Devices),
+        component: () => <DeviceListPanel />,
+      }),
+      Surface.create({
+        id: 'halo.keyring',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Halo.Keyring),
+        component: () => <KeyringPanel />,
+      }),
+      Surface.create({
+        id: 'halo.credentials',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Halo.Credentials),
+        component: () => {
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
+
+          return <CredentialsPanel space={space} />;
+        },
+      }),
+      Surface.create({
+        id: 'echo.spaces',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Spaces),
+        component: () => {
+          const { invokePromise } = useOperationInvoker();
+          const handleSelect = useCallback(
+            () => invokePromise(LayoutOperation.Open, { subject: [Devtools.Echo.Space] }),
+            [invokePromise],
+          );
+          return <SpaceListPanel onSelect={handleSelect} />;
+        },
+      }),
+      Surface.create({
+        id: 'echo.space',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Space),
+        component: () => {
+          const space = useActiveSpace();
+          const { invokePromise } = useOperationInvoker();
+          const handleSelect = useCallback(
+            () => invokePromise(LayoutOperation.Open, { subject: [Devtools.Echo.Feeds] }),
+            [invokePromise],
+          );
+          if (!space) {
+            return null;
+          }
+
+          return <SpaceInfoPanel space={space} onSelectFeed={handleSelect} onSelectPipeline={handleSelect} />;
+        },
+      }),
+      Surface.create({
+        id: 'echo.feeds',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Feeds),
+        component: () => {
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
+
+          return <FeedsPanel space={space} />;
+        },
+      }),
+      Surface.create({
+        id: 'echo.objects',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Objects),
+        component: () => {
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
+
+          return <ObjectsPanel space={space} />;
+        },
+      }),
+      Surface.create({
+        id: 'echo.schema',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Schema),
+        component: () => {
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
+
+          return <SchemaPanel space={space} />;
+        },
+      }),
+      Surface.create({
+        id: 'echo.automerge',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Automerge),
+        component: () => {
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
+
+          return <AutomergePanel space={space} />;
+        },
+      }),
+      Surface.create({
+        id: 'echo.queues',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Queues),
+        component: () => <QueuesPanel />,
+      }),
+      Surface.create({
+        id: 'echo.members',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Members),
+        component: () => {
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
+
+          return <MembersPanel space={space} />;
+        },
+      }),
+      Surface.create({
+        id: 'echo.metadata',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Metadata),
+        component: () => <MetadataPanel />,
+      }),
+      Surface.create({
+        id: 'mesh.signal',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Mesh.Signal),
+        component: () => <SignalPanel />,
+      }),
+      Surface.create({
+        id: 'mesh.swarm',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Mesh.Swarm),
+        component: () => <SwarmPanel />,
+      }),
+      Surface.create({
+        id: 'mesh.network',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Mesh.Network),
+        component: () => {
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
 
-        return (
-          <StackItem.Content>
-            <SpaceGenerator space={data.subject.space} onCreateObjects={handleCreateObject} />
-          </StackItem.Content>
-        );
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/app-graph`,
-      role: 'article',
-      filter: (data): data is { subject: GraphDebug } => isGraphDebug(data.subject),
-      component: ({ data }) => <DebugGraph graph={data.subject.graph} root={data.subject.root} />,
-    }),
-    createSurface({
-      id: `${meta.id}/wireframe`,
-      role: ['article', 'section'],
-      position: 'hoist',
-      filter: (data): data is { subject: Obj.Any } => {
-        const settings = context.getCapability(Capabilities.SettingsStore).getStore<DebugSettingsProps>(meta.id)!.value;
-        return Obj.isObject(data.subject) && !!settings.wireframe;
-      },
-      component: ({ data, role }) => (
-        <Wireframe label={`${role}:${name}`} object={data.subject} classNames='row-span-2 overflow-hidden' />
-      ),
-    }),
-    createSurface({
-      id: `${meta.id}/object-debug`,
-      role: 'article',
-      filter: (data): data is { companionTo: Obj.Any } => data.subject === 'debug' && Obj.isObject(data.companionTo),
-      component: ({ data }) => <DebugObjectPanel object={data.companionTo} />,
-    }),
-    createSurface({
-      id: `${meta.id}/devtools-overview`,
-      role: 'deck-companion--devtools',
-      component: () => <DevtoolsOverviewContainer />,
-    }),
-    createSurface({
-      id: `${meta.id}/status`,
-      role: 'status',
-      component: () => <DebugStatus />,
-    }),
+          return <NetworkPanel space={space} />;
+        },
+      }),
+      Surface.create({
+        id: 'edge.dashboard',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Edge.Dashboard),
+        component: () => <EdgeDashboardPanel />,
+      }),
+      Surface.create({
+        id: 'edge.workflows',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Edge.Workflows),
+        component: () => {
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
 
-    //
-    // Devtools
-    //
+          return <WorkflowPanel space={space} />;
+        },
+      }),
+      Surface.create({
+        id: 'edge.traces',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Edge.Traces),
+        component: () => {
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
 
-    createSurface({
-      id: `${meta.id}/client/config`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Client.Config,
-      component: () => <ConfigPanel vaultSelector={false} />,
-    }),
-    createSurface({
-      id: `${meta.id}/client/storage`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Client.Storage,
-      component: () => <StoragePanel />,
-    }),
-    createSurface({
-      id: `${meta.id}/client/logs`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Client.Logs,
-      component: () => <LoggingPanel />,
-    }),
-    createSurface({
-      id: `${meta.id}/client/diagnostics`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Client.Diagnostics,
-      component: () => <DiagnosticsPanel />,
-    }),
-    createSurface({
-      id: `${meta.id}/client/tracing`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Client.Tracing,
-      component: () => <TracingPanel />,
-    }),
-    createSurface({
-      id: `${meta.id}/halo/identity`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Halo.Identity,
-      component: () => <IdentityPanel />,
-    }),
-    createSurface({
-      id: `${meta.id}/halo/devices`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Halo.Devices,
-      component: () => <DeviceListPanel />,
-    }),
-    createSurface({
-      id: `${meta.id}/halo/keyring`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Halo.Keyring,
-      component: () => <KeyringPanel />,
-    }),
-    createSurface({
-      id: `${meta.id}/halo/credentials`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Halo.Credentials,
-      component: () => {
-        const space = useCurrentSpace();
-        return <CredentialsPanel space={space} />;
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/echo/spaces`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Echo.Spaces,
-      component: () => {
-        const { dispatchPromise: dispatch } = useIntentDispatcher();
-        const handleSelect = useCallback(
-          () =>
-            dispatch(
-              createIntent(LayoutAction.Open, {
-                part: 'main',
-                subject: [Devtools.Echo.Space],
-              }),
-            ),
-          [dispatch],
-        );
-        return <SpaceListPanel onSelect={handleSelect} />;
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/echo/space`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Echo.Space,
-      component: () => {
-        const space = useCurrentSpace();
-        const { dispatchPromise: dispatch } = useIntentDispatcher();
-        const handleSelect = useCallback(
-          () =>
-            dispatch(
-              createIntent(LayoutAction.Open, {
-                part: 'main',
-                subject: [Devtools.Echo.Feeds],
-              }),
-            ),
-          [dispatch],
-        );
-        return <SpaceInfoPanel space={space} onSelectFeed={handleSelect} onSelectPipeline={handleSelect} />;
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/echo/feeds`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Echo.Feeds,
-      component: () => {
-        const space = useCurrentSpace();
-        return <FeedsPanel space={space} />;
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/echo/objects`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Echo.Objects,
-      component: () => {
-        const space = useCurrentSpace();
-        return <ObjectsPanel space={space} />;
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/echo/schema`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Echo.Schema,
-      component: () => {
-        const space = useCurrentSpace();
-        return <SchemaPanel space={space} />;
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/echo/automerge`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Echo.Automerge,
-      component: () => {
-        const space = useCurrentSpace();
-        return <AutomergePanel space={space} />;
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/echo/queues`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Echo.Queues,
-      component: () => <QueuesPanel />,
-    }),
-    createSurface({
-      id: `${meta.id}/echo/members`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Echo.Members,
-      component: () => {
-        const space = useCurrentSpace();
-        return <MembersPanel space={space} />;
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/echo/metadata`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Echo.Metadata,
-      component: () => <MetadataPanel />,
-    }),
-    createSurface({
-      id: `${meta.id}/mesh/signal`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Mesh.Signal,
-      component: () => <SignalPanel />,
-    }),
-    createSurface({
-      id: `${meta.id}/mesh/swarm`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Mesh.Swarm,
-      component: () => <SwarmPanel />,
-    }),
-    createSurface({
-      id: `${meta.id}/mesh/network`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Mesh.Network,
-      component: () => {
-        const space = useCurrentSpace();
-        return <NetworkPanel space={space} />;
-      },
-    }),
-    // TODO(wittjosiah): Remove?
-    // createSurface({
-    //   id: `${meta.id}/agent/dashboard`,
-    //   role: 'article',
-    //   filter: (data): data is any => data.subject === Devtools.Agent.Dashboard,
-    //   component: () => <DashboardPanel />,
-    // }),
-    createSurface({
-      id: `${meta.id}/edge/dashboard`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Edge.Dashboard,
-      component: () => <EdgeDashboardPanel />,
-    }),
-    createSurface({
-      id: `${meta.id}/edge/workflows`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Edge.Workflows,
-      component: () => {
-        const space = useCurrentSpace();
-        return <WorkflowPanel space={space} />;
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/edge/traces`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Edge.Traces,
-      component: () => {
-        const space = useCurrentSpace();
-        return <InvocationTraceContainer space={space} detailAxis='block' />;
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/edge/testing`,
-      role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Edge.Testing,
-      component: () => {
-        const { dispatchPromise: dispatch } = useIntentDispatcher();
-        const onSpaceCreate = useCallback(
-          async (space: Space) => {
-            await space.waitUntilReady();
-            await dispatch(createIntent(SpaceAction.Migrate, { space }));
-            await space.db.flush();
-          },
-          [dispatch],
-        );
-        const onScriptPluginOpen = useCallback(
-          async (space: Space) => {
-            await space.waitUntilReady();
-            const result = await dispatch(
-              Function.pipe(
-                createIntent(ScriptAction.CreateScript, { space }),
-                chain(SpaceAction.AddObject, { target: space }),
-              ),
-            );
-            log.info('script created', { result });
-            await dispatch(
-              createIntent(LayoutAction.Open, {
-                part: 'main',
-                subject: [`${space.id}:${result.data?.object.id}`],
-              }),
-            );
-          },
-          [dispatch],
-        );
-        return <TestingPanel onSpaceCreate={onSpaceCreate} onScriptPluginOpen={onScriptPluginOpen} />;
-      },
-    }),
-  ]);
+          const feed = space.properties.invocationTraceFeed?.target;
+          const feedDXN = feed ? Feed.getQueueUri(feed) : undefined;
+          return <InvocationTraceContainer db={space.db} feedDXN={feedDXN} detailAxis='block' />;
+        },
+      }),
+      Surface.create({
+        id: 'edge.testing',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Edge.Testing),
+        component: () => {
+          const { invokePromise } = useOperationInvoker();
+          const onSpaceCreate = useCallback(
+            async (space: Space) => {
+              await space.waitUntilReady();
+              await invokePromise(SpaceOperation.Migrate, { space });
+              await space.db.flush();
+            },
+            [invokePromise],
+          );
+          const onScriptPluginOpen = useCallback(
+            async (space: Space) => {
+              await space.waitUntilReady();
+              const createResult = await invokePromise(ScriptOperation.CreateScript, { db: space.db });
+              if (createResult.data?.object) {
+                await invokePromise(SpaceOperation.AddObject, { target: space.db, object: createResult.data.object });
+              }
+              log.info('script created', { result: createResult });
+              if (createResult.data?.object) {
+                await invokePromise(LayoutOperation.Open, {
+                  subject: [getObjectPathFromObject(createResult.data.object)],
+                });
+              }
+            },
+            [invokePromise],
+          );
+          return <TestingPanel onSpaceCreate={onSpaceCreate} onScriptPluginOpen={onScriptPluginOpen} />;
+        },
+      }),
+    ]);
+  }),
+);