@dxos/plugin-debug 0.8.1-main.ae460ac → 0.8.1-staging.31c3ee1

package/src/capabilities/react-surface.tsx

@@ -2,14 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
+import { pipe } from 'effect';
 import React, { useCallback } from 'react';
 
 import {
   Capabilities,
+  chain,
   contributes,
   createIntent,
   createSurface,
   LayoutAction,
+  useCapability,
   type PluginsContext,
 } from '@dxos/app-framework';
 import {
@@ -31,15 +34,18 @@ import {
   StoragePanel,
   SwarmPanel,
   TracingPanel,
-  DashboardPanel,
   EdgeDashboardPanel,
-  SearchPanel,
   AutomergePanel,
   WorkflowPanel,
   QueuesPanel,
+  InvocationTracePanel,
+  TestingPanel,
 } from '@dxos/devtools';
 import { SettingsStore } from '@dxos/local-storage';
+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, CollectionType } from '@dxos/plugin-space/types';
 import {
   SpaceState,
@@ -48,17 +54,10 @@ import {
   type ReactiveEchoObject,
   type ReactiveObject,
   type Space,
+  parseId,
 } from '@dxos/react-client/echo';
 
-import {
-  DebugApp,
-  DebugObjectPanel,
-  DebugSettings,
-  DebugSpace,
-  DebugStatus,
-  SpaceGenerator,
-  Wireframe,
-} from '../components';
+import { DebugApp, DebugObjectPanel, DebugSettings, DebugStatus, SpaceGenerator, Wireframe } from '../components';
 import { DEBUG_PLUGIN } from '../meta';
 import { type DebugSettingsProps, Devtools } from '../types';
 
@@ -74,10 +73,19 @@ type GraphDebug = {
 const isSpaceDebug = (data: any): data is SpaceDebug => data?.type === `${DEBUG_PLUGIN}/space` && isSpace(data.space);
 const isGraphDebug = (data: any): data is GraphDebug => data?.graph instanceof Graph;
 
+// 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;
+};
+
 export default (context: PluginsContext) =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: `${DEBUG_PLUGIN}/settings`,
+      id: `${DEBUG_PLUGIN}/plugin-settings`,
       role: 'article',
       filter: (data): data is { subject: SettingsStore<DebugSettingsProps> } =>
         data.subject instanceof SettingsStore && data.subject.prefix === DEBUG_PLUGIN,
@@ -109,12 +117,7 @@ export default (context: PluginsContext) =>
           [data.subject.space],
         );
 
-        const deprecated = false;
-        return deprecated ? (
-          <DebugSpace space={data.subject.space} onAddObjects={handleCreateObject} />
-        ) : (
-          <SpaceGenerator space={data.subject.space} onCreateObjects={handleCreateObject} />
-        );
+        return <SpaceGenerator space={data.subject.space} onCreateObjects={handleCreateObject} />;
       },
     }),
     createSurface({
@@ -138,10 +141,11 @@ export default (context: PluginsContext) =>
       ),
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/complementary`,
-      role: 'complementary--debug',
-      filter: (data): data is { subject: ReactiveEchoObject<any> } => isEchoObject(data.subject),
-      component: ({ data }) => <DebugObjectPanel object={data.subject} />,
+      id: `${DEBUG_PLUGIN}/object-debug`,
+      role: 'article',
+      filter: (data): data is { companionTo: ReactiveEchoObject<any> } =>
+        data.subject === 'debug' && isEchoObject(data.companionTo),
+      component: ({ data }) => <DebugObjectPanel object={data.companionTo} />,
     }),
     createSurface({
       id: `${DEBUG_PLUGIN}/status`,
@@ -157,7 +161,7 @@ export default (context: PluginsContext) =>
       id: `${DEBUG_PLUGIN}/client/config`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Client.Config,
-      component: () => <ConfigPanel />,
+      component: () => <ConfigPanel vaultSelector={false} />,
     }),
     createSurface({
       id: `${DEBUG_PLUGIN}/client/storage`,
@@ -205,7 +209,10 @@ export default (context: PluginsContext) =>
       id: `${DEBUG_PLUGIN}/halo/credentials`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Halo.Credentials,
-      component: () => <CredentialsPanel />,
+      component: () => {
+        const space = useCurrentSpace();
+        return <CredentialsPanel space={space} />;
+      },
     }),
     createSurface({
       id: `${DEBUG_PLUGIN}/echo/spaces`,
@@ -225,31 +232,41 @@ export default (context: PluginsContext) =>
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Space,
       component: () => {
+        const space = useCurrentSpace();
         const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
         const handleSelect = useCallback(
           () => dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [Devtools.Echo.Feeds] })),
           [dispatch],
         );
-        return <SpaceInfoPanel onSelectFeed={handleSelect} onSelectPipeline={handleSelect} />;
+        return <SpaceInfoPanel space={space} onSelectFeed={handleSelect} onSelectPipeline={handleSelect} />;
       },
     }),
     createSurface({
       id: `${DEBUG_PLUGIN}/echo/feeds`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Feeds,
-      component: () => <FeedsPanel />,
+      component: () => {
+        const space = useCurrentSpace();
+        return <FeedsPanel space={space} />;
+      },
     }),
     createSurface({
       id: `${DEBUG_PLUGIN}/echo/objects`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Objects,
-      component: () => <ObjectsPanel />,
+      component: () => {
+        const space = useCurrentSpace();
+        return <ObjectsPanel space={space} />;
+      },
     }),
     createSurface({
       id: `${DEBUG_PLUGIN}/echo/automerge`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Automerge,
-      component: () => <AutomergePanel />,
+      component: () => {
+        const space = useCurrentSpace();
+        return <AutomergePanel space={space} />;
+      },
     }),
     createSurface({
       id: `${DEBUG_PLUGIN}/echo/queues`,
@@ -261,7 +278,10 @@ export default (context: PluginsContext) =>
       id: `${DEBUG_PLUGIN}/echo/members`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Members,
-      component: () => <MembersPanel />,
+      component: () => {
+        const space = useCurrentSpace();
+        return <MembersPanel space={space} />;
+      },
     }),
     createSurface({
       id: `${DEBUG_PLUGIN}/echo/metadata`,
@@ -285,30 +305,70 @@ export default (context: PluginsContext) =>
       id: `${DEBUG_PLUGIN}/mesh/network`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Mesh.Network,
-      component: () => <NetworkPanel />,
+      component: () => {
+        const space = useCurrentSpace();
+        return <NetworkPanel space={space} />;
+      },
     }),
+    // TODO(wittjosiah): Remove?
+    // createSurface({
+    //   id: `${DEBUG_PLUGIN}/agent/dashboard`,
+    //   role: 'article',
+    //   filter: (data): data is any => data.subject === Devtools.Agent.Dashboard,
+    //   component: () => <DashboardPanel />,
+    // }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/agent/dashboard`,
+      id: `${DEBUG_PLUGIN}/edge/dashboard`,
       role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Agent.Dashboard,
-      component: () => <DashboardPanel />,
+      filter: (data): data is any => data.subject === Devtools.Edge.Dashboard,
+      component: () => <EdgeDashboardPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/agent/search`,
+      id: `${DEBUG_PLUGIN}/edge/workflows`,
       role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Agent.Search,
-      component: () => <SearchPanel />,
+      filter: (data): data is any => data.subject === Devtools.Edge.Workflows,
+      component: () => {
+        const space = useCurrentSpace();
+        return <WorkflowPanel space={space} />;
+      },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/edge/dashboard`,
+      id: `${DEBUG_PLUGIN}/edge/traces`,
       role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Edge.Dashboard,
-      component: () => <EdgeDashboardPanel />,
+      filter: (data): data is any => data.subject === Devtools.Edge.Traces,
+      component: () => {
+        const space = useCurrentSpace();
+        return <InvocationTracePanel space={space} />;
+      },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/edge/workflows`,
+      id: `${DEBUG_PLUGIN}/edge/testing`,
       role: 'article',
-      filter: (data): data is any => data.subject === Devtools.Edge.Workflows,
-      component: () => <WorkflowPanel />,
+      filter: (data): data is any => data.subject === Devtools.Edge.Testing,
+      component: () => {
+        const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+        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(
+              pipe(createIntent(ScriptAction.Create, { 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} />;
+      },
     }),
   ]);

package/src/capabilities/settings.ts

@@ -9,9 +9,7 @@ import { DEBUG_PLUGIN } from '../meta';
 import { type DebugSettingsProps, DebugSettingsSchema } from '../types';
 
 export default () => {
-  const settings = create<DebugSettingsProps>({
-    debug: true,
-  });
+  const settings = create<DebugSettingsProps>({});
 
   return contributes(Capabilities.Settings, { schema: DebugSettingsSchema, prefix: DEBUG_PLUGIN, value: settings });
 };

package/src/components/DebugSettings.tsx

@@ -78,9 +78,6 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
 
   return (
     <DeprecatedFormContainer>
-      <DeprecatedFormInput label={t('settings show debug panel')}>
-        <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
-      </DeprecatedFormInput>
       <DeprecatedFormInput label={t('settings wireframe')}>
         <Input.Switch checked={settings.wireframe} onCheckedChange={(checked) => (settings.wireframe = !!checked)} />
       </DeprecatedFormInput>

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -150,7 +150,7 @@ export const createGenerator = <T extends BaseObject>(type: TypedObject<T>): Obj
       (await space.db.schemaRegistry.register([type]))[0];
 
     // Create objects.
-    const generate = createAsyncGenerator(generator, schema.getSchemaSnapshot(), { db: space.db });
+    const generate = createAsyncGenerator(generator, schema.snapshot, { db: space.db });
     const objects = await generate.createObjects(n);
 
     // Find or create table and view.

package/src/components/SpaceGenerator/SchemaTable.tsx

@@ -15,7 +15,7 @@ export type SchemaTableProps = {
 
 export const SchemaTable = ({ types, objects = {}, label, onClick }: SchemaTableProps) => {
   return (
-    <div className='grid grid-cols-[1fr_80px_40px] gap-1 overflow-hidden'>
+    <div className='grid grid-cols-[1fr_80px_40px] gap-1 overflow-none'>
       <div className='grid grid-cols-subgrid col-span-3'>
         <div className='px-2 text-sm text-primary-500'>{label}</div>
         <div className='px-2 text-xs text-subdued text-right'>count</div>

package/src/components/SpaceGenerator/SpaceGenerator.tsx

@@ -34,13 +34,7 @@ export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps)
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const client = useClient();
   const staticTypes = [DocumentType, DiagramType, SheetType, ComputeGraph]; // TODO(burdon): Make extensible.
-  const mutableTypes = [
-    Testing.OrgType,
-    Testing.ProjectType,
-    Testing.ContactType,
-    Testing.EmailType,
-    Testing.MessageType,
-  ];
+  const mutableTypes = [Testing.Org, Testing.Project, Testing.Contact, Testing.Message];
   const [count, setCount] = useState(1);
   const [info, setInfo] = useState<any>({});
 
@@ -118,7 +112,7 @@ export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps)
             const parts = schema.typename.split('/');
             const name = parts[parts.length - 1];
             const table = create(TableType, { name, threads: [] });
-            await initializeTable({ space, table, initialSchema: schema.typename });
+            await initializeTable({ client, space, table, typename: schema.typename });
             await dispatch(createIntent(SpaceAction.AddObject, { target: space, object: table }));
             return table;
           }),
@@ -145,7 +139,7 @@ export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps)
   }, []);
 
   return (
-    <div role='none' className='flex flex-col divide-y divide-separator'>
+    <div role='none' className='flex flex-col divide-y divide-separator overflow-y-auto'>
       <Toolbar.Root classNames='p-1'>
         <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' onClick={updateInfo} />
         <IconButton

package/src/components/index.ts

@@ -5,7 +5,6 @@
 import { lazy } from 'react';
 
 export const DebugApp = lazy(() => import('./DebugApp'));
-export const DebugSpace = lazy(() => import('./DebugSpace'));
 export const SpaceGenerator = lazy(() => import('./SpaceGenerator'));
 
 export * from './DebugObjectPanel';

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type PluginMeta } from '@dxos/app-framework';
 
 export const DEBUG_PLUGIN = 'dxos.org/plugin/debug';
 
-export const meta = {
+export const meta: PluginMeta = {
   id: DEBUG_PLUGIN,
   name: 'Debug',
   description:
@@ -15,4 +15,4 @@ export const meta = {
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-debug',
   tags: ['experimental'],
   screenshots: ['https://dxos.network/plugin-details-debug-dark.png'],
-} satisfies PluginMeta;
+};

package/src/translations.ts

@@ -51,15 +51,17 @@ export default [
         'queues label': 'Queues',
         'members label': 'Members',
         'metadata label': 'Metadata',
-        'mesh label': 'Mesh',
+        'mesh label': 'MESH',
         'signal label': 'Signal',
         'swarm label': 'Swarm',
         'network label': 'Network',
         'agent label': 'Agent',
         'dashboard label': 'Dashboard',
         'search label': 'Search',
-        'edge label': 'Edge',
+        'edge label': 'EDGE',
         'workflows label': 'Workflows',
+        'traces label': 'Traces',
+        'testing label': 'Testing',
       },
     },
   },

package/src/types.ts

@@ -21,7 +21,6 @@ export const DebugContext: Context<DebugContextType> = createContext<DebugContex
 
 export const DebugSettingsSchema = S.mutable(
   S.Struct({
-    debug: S.optional(S.Boolean),
     wireframe: S.optional(S.Boolean),
   }),
 );
@@ -78,5 +77,7 @@ export namespace Devtools {
     export const id = `${Devtools.id}.edge`;
     export const Dashboard = `${Devtools.Edge.id}.dashboard`;
     export const Workflows = `${Devtools.Edge.id}.workflows`;
+    export const Traces = `${Devtools.Edge.id}.traces`;
+    export const Testing = `${Devtools.Edge.id}.testing`;
   }
 }