@dxos/plugin-debug 0.8.4-main.7996785055 → 0.8.4-main.8baae0fced

package/src/capabilities/{react-surface/react-surface.tsx → react-surface.tsx}

@@ -8,7 +8,7 @@ import React, { useCallback } from '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,
@@ -33,33 +33,32 @@ import {
   StoragePanel,
   SwarmPanel,
   TestingPanel,
-  TracingPanel,
   WorkflowPanel,
 } from '@dxos/devtools';
-import { Obj } from '@dxos/echo';
-import { Collection } from '@dxos/echo';
-import { type LogBuffer } from '@dxos/log';
+import { Collection, Feed, Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
-
+import { type IdbLogStore } from '@dxos/log-store-idb';
 import { type Graph } from '@dxos/plugin-graph';
-import { ScriptOperation } from '@dxos/plugin-script/operations';
-import { SpaceOperation } from '@dxos/plugin-space/operations';
-import { useActiveSpace } from '@dxos/plugin-space';
+import { ScriptOperation } from '@dxos/plugin-script';
+import { SpaceOperation } from '@dxos/plugin-space';
 import { type Space, SpaceState, isSpace } from '@dxos/react-client/echo';
-import { Panel } from '@dxos/react-ui';
+import { ToolsExplorer } from '@dxos/react-ui-introspect';
 
+import { DebugSettings } from '#components';
 import {
   DebugGraph,
   DebugObjectPanel,
-  DebugSettings,
   DebugSpaceObjectsPanel,
   DebugStatus,
   DevtoolsOverviewContainer,
   SpaceGenerator,
   Wireframe,
-} from '../../containers';
-import { meta } from '../../meta';
-import { DebugCapabilities, 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;
@@ -79,31 +78,35 @@ const isGraphDebug = (data: any): data is GraphDebug => {
   );
 };
 
-const useCurrentSpace = useActiveSpace;
-
 type ReactSurfaceOptions = {
-  logBuffer: LogBuffer;
+  logStore?: IdbLogStore;
 };
 
 export default Capability.makeModule(
-  Effect.fnUntraced(function* ({ logBuffer }: ReactSurfaceOptions) {
+  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: `${meta.id}.plugin-settings`,
-        role: 'article',
-        filter: (data): data is { subject: AppCapabilities.Settings } =>
-          AppCapabilities.isSettings(data.subject) && data.subject.prefix === meta.id,
+        id: 'plugin-settings',
+        filter: AppSurface.settings(AppSurface.Article, meta.id),
         component: ({ data: { subject } }) => {
-          const { settings, updateSettings } = useSettingsState<DebugSettingsProps>(subject.atom);
-          return <DebugSettings settings={settings} onSettingsChange={updateSettings} logBuffer={logBuffer} />;
+          const { settings, updateSettings } = useSettingsState<Settings.Settings>(subject.atom);
+          return (
+            <DebugSettings
+              settings={settings}
+              onSettingsChange={updateSettings}
+              logStore={logStore}
+              onUpload={fileUploader}
+            />
+          );
         },
       }),
       Surface.create({
-        id: `${meta.id}.space`,
+        id: 'space',
         role: 'article',
         filter: (data): data is { subject: SpaceDebug } => isSpaceDebug(data.subject),
         component: ({ role, data }) => {
@@ -132,25 +135,25 @@ export default Capability.makeModule(
             [data.subject.space, invokePromise],
           );
 
-          return (
-            <Panel.Root role={role} className='dx-document'>
-              <Panel.Content asChild>
-                <SpaceGenerator space={data.subject.space} onCreateObjects={handleCreateObject} />
-              </Panel.Content>
-            </Panel.Root>
-          );
+          return <SpaceGenerator role={role} space={data.subject.space} onCreateObjects={handleCreateObject} />;
         },
       }),
       Surface.create({
-        id: `${meta.id}.app-graph`,
+        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: `${meta.id}.wireframe`,
+        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: 'hoist',
+        position: 'first',
         filter: (data): data is { subject: Obj.Unknown } => {
           const settings = registry.get(settingsAtom);
           return Obj.isObject(data.subject) && !!settings.wireframe;
@@ -160,96 +163,95 @@ export default Capability.makeModule(
         ),
       }),
       Surface.create({
-        id: `${meta.id}.object-debug`,
-        role: 'article',
-        filter: (data): data is { companionTo: Obj.Unknown } =>
-          data.subject === 'debug' && Obj.isObject(data.companionTo),
-        component: ({ data }) => <DebugObjectPanel object={data.companionTo} />,
+        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: `${meta.id}.devtools-overview`,
-        role: 'deck-companion--devtools',
-        filter: (data): data is { subject: 'devtools' } => data.subject === 'devtools',
+        id: 'devtools-overview',
+        filter: AppSurface.literal(Surface.makeType<{ subject: string }>('deck-companion--devtools'), 'devtools'),
         component: () => <DevtoolsOverviewContainer />,
       }),
       Surface.create({
-        id: `${meta.id}.space-objects`,
-        role: 'deck-companion--space-objects',
-        filter: (data): data is { subject: 'space-objects' } => data.subject === 'space-objects',
-        component: () => <DebugSpaceObjectsPanel />,
+        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: `${meta.id}.status`,
+        id: 'status',
         role: 'status-indicator',
-        position: 'hoist',
+        position: 'first',
         component: () => <DebugStatus />,
       }),
+
       //
       // Devtools
       //
 
       Surface.create({
-        id: `${meta.id}.client.config`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Client.Config,
+        id: 'client.config',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Config),
         component: () => <ConfigPanel vaultSelector={false} />,
       }),
       Surface.create({
-        id: `${meta.id}.client.storage`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Client.Storage,
+        id: 'client.storage',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Storage),
         component: () => <StoragePanel />,
       }),
       Surface.create({
-        id: `${meta.id}.client.logs`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Client.Logs,
+        id: 'client.logs',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Logs),
         component: () => <LoggingPanel />,
       }),
       Surface.create({
-        id: `${meta.id}.client.diagnostics`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Client.Diagnostics,
+        id: 'client.diagnostics',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Diagnostics),
         component: () => <DiagnosticsPanel />,
       }),
       Surface.create({
-        id: `${meta.id}.client.tracing`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Client.Tracing,
-        component: () => <TracingPanel />,
-      }),
-      Surface.create({
-        id: `${meta.id}.halo.identity`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Halo.Identity,
+        id: 'halo.identity',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Halo.Identity),
         component: () => <IdentityPanel />,
       }),
       Surface.create({
-        id: `${meta.id}.halo.devices`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Halo.Devices,
+        id: 'halo.devices',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Halo.Devices),
         component: () => <DeviceListPanel />,
       }),
       Surface.create({
-        id: `${meta.id}.halo.keyring`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Halo.Keyring,
+        id: 'halo.keyring',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Halo.Keyring),
         component: () => <KeyringPanel />,
       }),
       Surface.create({
-        id: `${meta.id}.halo.credentials`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Halo.Credentials,
+        id: 'halo.credentials',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Halo.Credentials),
         component: () => {
-          const space = useCurrentSpace();
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
+
           return <CredentialsPanel space={space} />;
         },
       }),
       Surface.create({
-        id: `${meta.id}.echo.spaces`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Spaces,
+        id: 'echo.spaces',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Spaces),
         component: () => {
           const { invokePromise } = useOperationInvoker();
           const handleSelect = useCallback(
@@ -260,126 +262,148 @@ export default Capability.makeModule(
         },
       }),
       Surface.create({
-        id: `${meta.id}.echo.space`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Space,
+        id: 'echo.space',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Space),
         component: () => {
-          const space = useCurrentSpace();
+          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: `${meta.id}.echo.feeds`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Feeds,
+        id: 'echo.feeds',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Feeds),
         component: () => {
-          const space = useCurrentSpace();
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
+
           return <FeedsPanel space={space} />;
         },
       }),
       Surface.create({
-        id: `${meta.id}.echo.objects`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Objects,
+        id: 'echo.objects',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Objects),
         component: () => {
-          const space = useCurrentSpace();
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
+
           return <ObjectsPanel space={space} />;
         },
       }),
       Surface.create({
-        id: `${meta.id}.echo.schema`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Schema,
+        id: 'echo.schema',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Schema),
         component: () => {
-          const space = useCurrentSpace();
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
+
           return <SchemaPanel space={space} />;
         },
       }),
       Surface.create({
-        id: `${meta.id}.echo.automerge`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Automerge,
+        id: 'echo.automerge',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Automerge),
         component: () => {
-          const space = useCurrentSpace();
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
+
           return <AutomergePanel space={space} />;
         },
       }),
       Surface.create({
-        id: `${meta.id}.echo.queues`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Queues,
+        id: 'echo.queues',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Queues),
         component: () => <QueuesPanel />,
       }),
       Surface.create({
-        id: `${meta.id}.echo.members`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Members,
+        id: 'echo.members',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Members),
         component: () => {
-          const space = useCurrentSpace();
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
+
           return <MembersPanel space={space} />;
         },
       }),
       Surface.create({
-        id: `${meta.id}.echo.metadata`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Metadata,
+        id: 'echo.metadata',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Metadata),
         component: () => <MetadataPanel />,
       }),
       Surface.create({
-        id: `${meta.id}.mesh.signal`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Mesh.Signal,
+        id: 'mesh.signal',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Mesh.Signal),
         component: () => <SignalPanel />,
       }),
       Surface.create({
-        id: `${meta.id}.mesh.swarm`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Mesh.Swarm,
+        id: 'mesh.swarm',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Mesh.Swarm),
         component: () => <SwarmPanel />,
       }),
       Surface.create({
-        id: `${meta.id}.mesh.network`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Mesh.Network,
+        id: 'mesh.network',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Mesh.Network),
         component: () => {
-          const space = useCurrentSpace();
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
+
           return <NetworkPanel space={space} />;
         },
       }),
       Surface.create({
-        id: `${meta.id}.edge.dashboard`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Edge.Dashboard,
+        id: 'edge.dashboard',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Edge.Dashboard),
         component: () => <EdgeDashboardPanel />,
       }),
       Surface.create({
-        id: `${meta.id}.edge.workflows`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Edge.Workflows,
+        id: 'edge.workflows',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Edge.Workflows),
         component: () => {
-          const space = useCurrentSpace();
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
+
           return <WorkflowPanel space={space} />;
         },
       }),
       Surface.create({
-        id: `${meta.id}.edge.traces`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Edge.Traces,
+        id: 'edge.traces',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Edge.Traces),
         component: () => {
-          const space = useCurrentSpace();
-          const queueDxn = space?.properties.invocationTraceQueue?.dxn;
-          return <InvocationTraceContainer db={space?.db} queueDxn={queueDxn} detailAxis='block' />;
+          const space = useActiveSpace();
+          if (!space) {
+            return null;
+          }
+
+          const feed = space.properties.invocationTraceFeed?.target;
+          const feedDXN = feed ? Feed.getQueueDxn(feed) : undefined;
+          return <InvocationTraceContainer db={space.db} feedDXN={feedDXN} detailAxis='block' />;
         },
       }),
       Surface.create({
-        id: `${meta.id}.edge.testing`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Edge.Testing,
+        id: 'edge.testing',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Edge.Testing),
         component: () => {
           const { invokePromise } = useOperationInvoker();
           const onSpaceCreate = useCallback(

package/src/capabilities/{settings/settings.ts → settings.ts}

@@ -8,14 +8,14 @@ import { Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
 import { createKvsStore } from '@dxos/effect';
 
-import { meta } from '../../meta';
-import { DebugCapabilities, DebugSettingsSchema } from '../../types';
+import { meta } from '#meta';
+import { DebugCapabilities, Settings } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.sync(() => {
     const settingsAtom = createKvsStore({
       key: meta.id,
-      schema: DebugSettingsSchema,
+      schema: Settings.Settings,
       defaultValue: () => ({}),
     });
 
@@ -23,7 +23,7 @@ export default Capability.makeModule(() =>
       Capability.contributes(DebugCapabilities.Settings, settingsAtom),
       Capability.contributes(AppCapabilities.Settings, {
         prefix: meta.id,
-        schema: DebugSettingsSchema,
+        schema: Settings.Settings,
         atom: settingsAtom,
       }),
     ];

package/src/components/DebugSettings/DebugSettings.stories.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { DebugSettings } from './DebugSettings';
+
+const meta = {
+  title: 'plugins/plugin-debug/components/DebugSettings',
+  component: DebugSettings,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withClientProvider({ createIdentity: true })],
+  tags: ['settings'],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DebugSettings>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    settings: {
+      wireframe: false,
+    },
+    logStore: { export: async () => '' } as any,
+  },
+};