@dxos/plugin-debug 0.7.5-labs.e27f9b9 → 0.7.5-labs.f400bbc

package/src/capabilities/react-context.tsx

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Capabilities, contributes } from '@dxos/app-framework';
+import { DevtoolsContextProvider } from '@dxos/devtools';
+
+import { DEBUG_PLUGIN } from '../meta';
+
+export default () =>
+  contributes(Capabilities.ReactContext, {
+    id: DEBUG_PLUGIN,
+    context: ({ children }) => <DevtoolsContextProvider>{children}</DevtoolsContextProvider>,
+  });

package/src/capabilities/react-surface.tsx

@@ -4,8 +4,39 @@
 
 import React, { useCallback } from 'react';
 
-import { Capabilities, contributes, createIntent, createSurface, type PluginsContext } from '@dxos/app-framework';
-import { Devtools } from '@dxos/devtools';
+import {
+  Capabilities,
+  contributes,
+  createIntent,
+  createSurface,
+  LayoutAction,
+  type PluginsContext,
+} from '@dxos/app-framework';
+import {
+  ConfigPanel,
+  CredentialsPanel,
+  DeviceListPanel,
+  DiagnosticsPanel,
+  FeedsPanel,
+  IdentityPanel,
+  KeyringPanel,
+  LoggingPanel,
+  MembersPanel,
+  MetadataPanel,
+  NetworkPanel,
+  ObjectsPanel,
+  SignalPanel,
+  SpaceInfoPanel,
+  SpaceListPanel,
+  StoragePanel,
+  SwarmPanel,
+  TracingPanel,
+  DashboardPanel,
+  EdgeDashboardPanel,
+  SearchPanel,
+  AutomergePanel,
+  WorkflowPanel,
+} from '@dxos/devtools';
 import { SettingsStore } from '@dxos/local-storage';
 import { Graph } from '@dxos/plugin-graph';
 import { SpaceAction, CollectionType } from '@dxos/plugin-space/types';
@@ -28,7 +59,7 @@ import {
   Wireframe,
 } from '../components';
 import { DEBUG_PLUGIN } from '../meta';
-import { type DebugSettingsProps } from '../types';
+import { type DebugSettingsProps, Devtools } from '../types';
 
 type SpaceDebug = {
   type: string;
@@ -39,8 +70,8 @@ type GraphDebug = {
   graph: Graph;
 };
 
-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;
+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;
 
 export default (context: PluginsContext) =>
   contributes(Capabilities.ReactSurface, [
@@ -51,28 +82,6 @@ export default (context: PluginsContext) =>
         data.subject instanceof SettingsStore && data.subject.prefix === DEBUG_PLUGIN,
       component: ({ data: { subject } }) => <DebugSettings settings={subject.value} />,
     }),
-    createSurface({
-      id: `${DEBUG_PLUGIN}/status`,
-      role: 'status',
-      component: () => <DebugStatus />,
-    }),
-    createSurface({
-      id: `${DEBUG_PLUGIN}/complementary`,
-      role: 'complementary--debug',
-      filter: (data): data is { subject: ReactiveEchoObject<any> } => isEchoObject(data.subject),
-      component: ({ data }) => <DebugObjectPanel object={data.subject} />,
-    }),
-    createSurface({
-      id: `${DEBUG_PLUGIN}/devtools`,
-      role: 'article',
-      filter: (data): data is any => {
-        const settings = context
-          .requestCapability(Capabilities.SettingsStore)
-          .getStore<DebugSettingsProps>(DEBUG_PLUGIN)!.value;
-        return data.subject === 'devtools' && !!settings.devtools;
-      },
-      component: () => <Devtools />,
-    }),
     createSurface({
       id: `${DEBUG_PLUGIN}/space`,
       role: 'article',
@@ -127,4 +136,172 @@ export default (context: PluginsContext) =>
         <Wireframe label={`${role}:${name}`} object={data.subject} classNames='row-span-2 overflow-hidden' />
       ),
     }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/complementary`,
+      role: 'complementary--debug',
+      filter: (data): data is { subject: ReactiveEchoObject<any> } => isEchoObject(data.subject),
+      component: ({ data }) => <DebugObjectPanel object={data.subject} />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/status`,
+      role: 'status',
+      component: () => <DebugStatus />,
+    }),
+
+    //
+    // Devtools
+    //
+
+    createSurface({
+      id: `${DEBUG_PLUGIN}/client/config`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Client.Config,
+      component: () => <ConfigPanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/client/storage`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Client.Storage,
+      component: () => <StoragePanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/client/logs`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Client.Logs,
+      component: () => <LoggingPanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/client/diagnostics`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Client.Diagnostics,
+      component: () => <DiagnosticsPanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/client/tracing`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Client.Tracing,
+      component: () => <TracingPanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/halo/identity`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Halo.Identity,
+      component: () => <IdentityPanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/halo/devices`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Halo.Devices,
+      component: () => <DeviceListPanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/halo/keyring`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Halo.Keyring,
+      component: () => <KeyringPanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/halo/credentials`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Halo.Credentials,
+      component: () => <CredentialsPanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/echo/spaces`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Echo.Spaces,
+      component: () => {
+        const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+        const handleSelect = useCallback(
+          () => dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [Devtools.Echo.Space] })),
+          [dispatch],
+        );
+        return <SpaceListPanel onSelect={handleSelect} />;
+      },
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/echo/space`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Echo.Space,
+      component: () => {
+        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} />;
+      },
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/echo/feeds`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Echo.Feeds,
+      component: () => <FeedsPanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/echo/objects`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Echo.Objects,
+      component: () => <ObjectsPanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/echo/automerge`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Echo.Automerge,
+      component: () => <AutomergePanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/echo/members`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Echo.Members,
+      component: () => <MembersPanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/echo/metadata`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Echo.Metadata,
+      component: () => <MetadataPanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/mesh/signal`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Mesh.Signal,
+      component: () => <SignalPanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/mesh/swarm`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Mesh.Swarm,
+      component: () => <SwarmPanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/mesh/network`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Mesh.Network,
+      component: () => <NetworkPanel />,
+    }),
+    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/search`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Agent.Search,
+      component: () => <SearchPanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/edge/dashboard`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Edge.Dashboard,
+      component: () => <EdgeDashboardPanel />,
+    }),
+    createSurface({
+      id: `${DEBUG_PLUGIN}/edge/workflows`,
+      role: 'article',
+      filter: (data): data is any => data.subject === Devtools.Edge.Workflows,
+      component: () => <WorkflowPanel />,
+    }),
   ]);

package/src/capabilities/settings.ts

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

package/src/components/DebugSettings.tsx

@@ -78,73 +78,68 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
 
   return (
     <DeprecatedFormContainer>
-      <DeprecatedFormContainer>
-        <DeprecatedFormInput label={t('settings show debug panel')}>
-          <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
-        </DeprecatedFormInput>
-        <DeprecatedFormInput label={t('settings show devtools panel')}>
-          <Input.Switch checked={settings.devtools} onCheckedChange={(checked) => (settings.devtools = !!checked)} />
-        </DeprecatedFormInput>
-        <DeprecatedFormInput label={t('settings wireframe')}>
-          <Input.Switch checked={settings.wireframe} onCheckedChange={(checked) => (settings.wireframe = !!checked)} />
-        </DeprecatedFormInput>
-        <DeprecatedFormInput label={t('settings download diagnostics')}>
-          <Button onClick={handleDownload}>
-            <Icon icon='ph--download-simple--regular' size={5} />
-          </Button>
-        </DeprecatedFormInput>
-        <DeprecatedFormInput label={t('settings repair')}>
-          <Button onClick={handleRepair}>
-            <Icon icon='ph--first-aid-kit--regular' size={5} />
-          </Button>
-        </DeprecatedFormInput>
-
-        {/* TODO(burdon): Move to layout? */}
-        {toast && (
-          <Toast.Root>
-            <Toast.Body>
-              <Toast.Title>
-                <Icon icon='ph--gift--duotone' size={5} classNames='inline mr-1' />
-                <span>{toast.title}</span>
-              </Toast.Title>
-              {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
-            </Toast.Body>
-          </Toast.Root>
-        )}
-
-        <DeprecatedFormInput label={t('settings choose storage adaptor')}>
-          <Select.Root
-            value={
-              Object.entries(StorageAdapters).find(
-                ([name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
-              )?.[0]
+      <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>
+      <DeprecatedFormInput label={t('settings download diagnostics')}>
+        <Button onClick={handleDownload}>
+          <Icon icon='ph--download-simple--regular' size={5} />
+        </Button>
+      </DeprecatedFormInput>
+      <DeprecatedFormInput label={t('settings repair')}>
+        <Button onClick={handleRepair}>
+          <Icon icon='ph--first-aid-kit--regular' size={5} />
+        </Button>
+      </DeprecatedFormInput>
+
+      {/* TODO(burdon): Move to layout? */}
+      {toast && (
+        <Toast.Root>
+          <Toast.Body>
+            <Toast.Title>
+              <Icon icon='ph--gift--duotone' size={5} classNames='inline mr-1' />
+              <span>{toast.title}</span>
+            </Toast.Title>
+            {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
+          </Toast.Body>
+        </Toast.Root>
+      )}
+
+      <DeprecatedFormInput label={t('settings choose storage adaptor')}>
+        <Select.Root
+          value={
+            Object.entries(StorageAdapters).find(
+              ([name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
+            )?.[0]
+          }
+          onValueChange={(value) => {
+            if (confirm(t('settings storage adapter changed alert'))) {
+              updateConfig(
+                storageConfig,
+                setStorageConfig,
+                ['runtime', 'client', 'storage', 'dataStore'],
+                StorageAdapters[value as keyof typeof StorageAdapters],
+              );
             }
-            onValueChange={(value) => {
-              if (confirm(t('settings storage adapter changed alert'))) {
-                updateConfig(
-                  storageConfig,
-                  setStorageConfig,
-                  ['runtime', 'client', 'storage', 'dataStore'],
-                  StorageAdapters[value as keyof typeof StorageAdapters],
-                );
-              }
-            }}
-          >
-            <Select.TriggerButton placeholder={t('settings data store label')} />
-            <Select.Portal>
-              <Select.Content>
-                <Select.Viewport>
-                  {Object.keys(StorageAdapters).map((key) => (
-                    <Select.Option key={key} value={key}>
-                      {t(`settings storage adaptor ${key} label`)}
-                    </Select.Option>
-                  ))}
-                </Select.Viewport>
-              </Select.Content>
-            </Select.Portal>
-          </Select.Root>
-        </DeprecatedFormInput>
-      </DeprecatedFormContainer>
+          }}
+        >
+          <Select.TriggerButton placeholder={t('settings data store label')} />
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                {Object.keys(StorageAdapters).map((key) => (
+                  <Select.Option key={key} value={key}>
+                    {t(`settings storage adaptor ${key} label`)}
+                  </Select.Option>
+                ))}
+              </Select.Viewport>
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+      </DeprecatedFormInput>
     </DeprecatedFormContainer>
   );
 };

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -5,7 +5,7 @@
 import { addressToA1Notation } from '@dxos/compute';
 import { ComputeGraph, ComputeGraphModel, DEFAULT_OUTPUT, NODE_INPUT, NODE_OUTPUT } from '@dxos/conductor';
 import { ObjectId, type BaseObject, type TypedObject } from '@dxos/echo-schema';
-import { DXN, SpaceId } from '@dxos/keys';
+import { DXN } from '@dxos/keys';
 import { create, makeRef, type ReactiveObject } from '@dxos/live-object';
 import { DocumentType } from '@dxos/plugin-markdown/types';
 import { createSheet } from '@dxos/plugin-sheet/types';
@@ -120,7 +120,7 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
           .createNode({
             id: 'gpt-QUEUE_ID',
             type: 'constant',
-            value: new DXN(DXN.kind.QUEUE, ['data', SpaceId.random(), ObjectId.random()]).toString(),
+            value: new DXN(DXN.kind.QUEUE, ['data', space.id, ObjectId.random()]).toString(),
           })
           .createNode({ id: 'gpt-APPEND', type: 'append' })
           .createNode({ id: 'gpt-OUTPUT', type: NODE_OUTPUT })

package/src/components/SpaceGenerator/SpaceGenerator.tsx

@@ -4,15 +4,20 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { ComputeGraph } from '@dxos/conductor';
-import { type ReactiveObject } from '@dxos/live-object';
+import { toEffectSchema } from '@dxos/echo-schema';
+import { create, type ReactiveObject } from '@dxos/live-object';
+import { log } from '@dxos/log';
 import { DocumentType } from '@dxos/plugin-markdown/types';
 import { SheetType } from '@dxos/plugin-sheet/types';
 import { DiagramType } from '@dxos/plugin-sketch/types';
+import { SpaceAction } from '@dxos/plugin-space/types';
 import { useClient } from '@dxos/react-client';
 import { getTypename, type Space } from '@dxos/react-client/echo';
 import { IconButton, Input, Toolbar, useAsyncEffect } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { initializeTable, TableType } from '@dxos/react-ui-table';
 import { Testing } from '@dxos/schema/testing';
 import { jsonKeyReplacer, sortKeys } from '@dxos/util';
 
@@ -26,9 +31,16 @@ export type SpaceGeneratorProps = {
 };
 
 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];
+  const mutableTypes = [
+    Testing.OrgType,
+    Testing.ProjectType,
+    Testing.ContactType,
+    Testing.EmailType,
+    Testing.MessageType,
+  ];
   const [count, setCount] = useState(1);
   const [info, setInfo] = useState<any>({});
 
@@ -84,10 +96,64 @@ export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps)
     [typeMap, count],
   );
 
+  // TODO(wittjosiah): Remove. Replace with proper echo import.
+  const handleLoadTables = useCallback(async () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.json';
+
+    input.onchange = async (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (!file) {
+        return;
+      }
+
+      try {
+        const content = await file.text();
+        const data = JSON.parse(content);
+        const schemas = await space.db.schemaRegistry.register(data.schemas.map(toEffectSchema));
+        // TODO(wittjosiah): If the schema is already registered this should skip.
+        await Promise.all(
+          schemas.map(async (schema) => {
+            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 dispatch(createIntent(SpaceAction.AddObject, { target: space, object: table }));
+            return table;
+          }),
+        );
+        // TODO(wittjosiah): This should query the space for schemas.
+        await Promise.all(
+          data.objects.map(async ({ id, '@type': typename, ...fields }: any) => {
+            const schema = schemas.find((s) => `dxn:type:${s.typename}:${s.version}` === typename);
+            if (!schema) {
+              log.warn('Missing schema for object', { id, typename });
+              return;
+            }
+            const object = create(schema, fields);
+            space.db.add(object);
+            return object;
+          }),
+        );
+      } catch (err) {
+        log.catch(err);
+      }
+    };
+
+    input.click();
+  }, []);
+
   return (
     <div role='none' className='flex flex-col divide-y divide-separator'>
       <Toolbar.Root classNames='p-1'>
         <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' onClick={updateInfo} />
+        <IconButton
+          icon='ph--file-arrow-up--regular'
+          iconOnly
+          label='Load tables from JSON'
+          onClick={handleLoadTables}
+        />
         <Toolbar.Separator variant='gap' />
         <div className='flex'>
           <Input.Root>