@dxos/plugin-debug 0.8.4-main.c85a9c8dae → 0.8.4-main.d9fc60f731

package/src/containers/RegistryPanel/RegistryPanel.tsx

@@ -0,0 +1,150 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { Operation } from '@dxos/compute';
+import { JsonView, PanelContainer, Placeholder, Searchbar } from '@dxos/devtools';
+import { Entity, Format, Obj, Type } from '@dxos/echo';
+import { useClient } from '@dxos/react-client';
+import { Toolbar } from '@dxos/react-ui';
+import { DynamicTable, type TableFeatures } from '@dxos/react-ui-table';
+import { mx } from '@dxos/ui-theme';
+
+type RegistryRow = {
+  id: string;
+  kind: string;
+  label: string;
+  _entity: Entity.Unknown;
+};
+
+const textFilter = (text?: string) => {
+  if (!text) {
+    return () => true;
+  }
+
+  const matcher = new RegExp(text, 'i');
+  return (entity: Entity.Unknown) => {
+    const typename = Entity.getTypename(entity) ?? '';
+    const metaKey = Obj.isObject(entity) ? (Obj.getMeta(entity).key ?? '') : '';
+    const uri = Type.isType(entity) ? (Type.getURI(entity)?.toString() ?? '') : '';
+    const operationKey =
+      Obj.isObject(entity) && Obj.instanceOf(Operation.PersistentOperation, entity)
+        ? (Operation.getKey(entity) ?? '')
+        : '';
+    const name = Obj.isObject(entity) && Obj.instanceOf(Operation.PersistentOperation, entity) ? entity.name : '';
+    return [typename, metaKey, uri, operationKey, name, getEntityId(entity)].some((value) => value.match(matcher));
+  };
+};
+
+const getEntityId = (entity: Entity.Unknown): string => {
+  if (entity.id) {
+    return entity.id;
+  }
+  if (Type.isType(entity)) {
+    return Type.getURI(entity)?.toString() ?? Type.getTypename(entity) ?? 'unknown-type';
+  }
+  return Entity.getTypename(entity) ?? 'unknown';
+};
+
+const getKind = (entity: Entity.Unknown): string => {
+  if (Type.isType(entity)) {
+    return 'type';
+  }
+  if (Obj.isObject(entity) && Obj.instanceOf(Operation.PersistentOperation, entity)) {
+    return 'operation';
+  }
+  return 'other';
+};
+
+const getLabel = (entity: Entity.Unknown): string => {
+  if (Obj.isObject(entity) && Obj.instanceOf(Operation.PersistentOperation, entity)) {
+    return entity.name || Operation.getKey(entity) || getEntityId(entity);
+  }
+  if (Type.isType(entity)) {
+    return Type.getTypename(entity) ?? getEntityId(entity);
+  }
+  return getEntityId(entity);
+};
+
+const toDetailJson = (entity: Entity.Unknown): object => {
+  if (Type.isType(entity)) {
+    return {
+      id: getEntityId(entity),
+      typename: Type.getTypename(entity),
+      uri: Type.getURI(entity)?.toString(),
+      version: Type.getVersion(entity),
+      jsonSchema: entity.jsonSchema,
+    };
+  }
+  if (Obj.isObject(entity)) {
+    return Obj.toJSON(entity);
+  }
+  return { id: getEntityId(entity), typename: Entity.getTypename(entity) };
+};
+
+export const RegistryPanel = () => {
+  const client = useClient();
+  const [entities, setEntities] = useState<Entity.Unknown[]>([]);
+  const [filter, setFilter] = useState('');
+  const [selected, setSelected] = useState<Entity.Unknown>();
+
+  useEffect(() => {
+    const registry = client.graph.registry;
+    const refresh = () => setEntities([...registry.list()]);
+    refresh();
+    return registry.changed.on(refresh);
+  }, [client]);
+
+  const properties = useMemo(
+    () => [
+      { name: 'kind', format: Format.TypeFormat.String, size: 100 },
+      { name: 'label', format: Format.TypeFormat.String },
+      { name: 'id', format: Format.TypeFormat.String, size: 280 },
+    ],
+    [],
+  );
+
+  const rows = useMemo((): RegistryRow[] => {
+    return entities
+      .filter(textFilter(filter))
+      .map((entity) => ({
+        id: getEntityId(entity),
+        kind: getKind(entity),
+        label: getLabel(entity),
+        _entity: entity,
+      }))
+      .toSorted((left, right) => left.label.localeCompare(right.label));
+  }, [entities, filter]);
+
+  const handleRowClicked = useCallback((row: RegistryRow | undefined) => {
+    if (!row?._entity) {
+      return;
+    }
+    setSelected(row._entity);
+  }, []);
+
+  const detailJson = useMemo(() => (selected ? toDetailJson(selected) : undefined), [selected]);
+
+  const features: Partial<TableFeatures> = useMemo(() => ({ selection: { enabled: true, mode: 'single' } }), []);
+
+  return (
+    <PanelContainer
+      toolbar={
+        <Toolbar.Root>
+          <Searchbar placeholder='Filter...' onChange={setFilter} />
+        </Toolbar.Root>
+      }
+    >
+      <div className={mx('h-full grid grid-cols-[2fr_1fr] overflow-hidden')}>
+        <div className={mx('flex flex-col min-h-0 overflow-hidden')}>
+          <DynamicTable properties={properties} rows={rows} features={features} onRowClick={handleRowClicked} />
+        </div>
+        <div className={mx('min-h-0 h-full overflow-auto border-s border-separator text-sm')}>
+          {detailJson ? <JsonView data={detailJson} /> : <Placeholder label='Details' />}
+        </div>
+      </div>
+    </PanelContainer>
+  );
+};

package/src/containers/RegistryPanel/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { RegistryPanel as default, RegistryPanel } from './RegistryPanel';

package/src/containers/SpaceGenerator/SpaceGenerator.tsx

@@ -6,122 +6,122 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { ComputeGraph } from '@dxos/conductor';
-import { Filter, Obj, type Type } from '@dxos/echo';
-import { Markdown } from '@dxos/plugin-markdown/types';
-import { Sheet } from '@dxos/plugin-sheet/types';
-import { Diagram } from '@dxos/plugin-sketch/types';
+import { Filter, Obj, Type } from '@dxos/echo';
+import { Markdown } from '@dxos/plugin-markdown';
+import { Sheet } from '@dxos/plugin-sheet';
+import { Sketch } from '@dxos/plugin-sketch';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 import { IconButton, Input, Panel, ScrollArea, Toolbar, useAsyncEffect } from '@dxos/react-ui';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { composable, composableProps } from '@dxos/react-ui';
 import { Organization, Person, Task } from '@dxos/types';
-import { jsonKeyReplacer, sortKeys } from '@dxos/util';
+import { sortKeys } from '@dxos/util';
 
-import { type ObjectGenerator, SchemaTable, createGenerator, generator, staticGenerators } from '../../components';
+import { type ObjectGenerator, SchemaTable, createGenerator, generator, staticGenerators } from '#components';
+
+// TODO(burdon): Make extensible.
+const staticTypes = [Markdown.Document, Sketch.Sketch, Sheet.Sheet, ComputeGraph];
+const recordTypes: Type.AnyObj[] = [Organization.Organization, Person.Person, Task.Task];
 
 export type SpaceGeneratorProps = {
   space: Space;
   onCreateObjects?: (objects: Obj.Unknown[]) => void;
 };
 
-export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps) => {
-  const { invokePromise } = useOperationInvoker();
-  const client = useClient();
-  const staticTypes = [Markdown.Document, Diagram.Diagram, Sheet.Sheet, ComputeGraph]; // TODO(burdon): Make extensible.
-  const recordTypes: Type.AnyObj[] = [Organization.Organization, Person.Person, Task.Task];
-  const [count, setCount] = useState(1);
-  const [info, setInfo] = useState<any>({});
-  const presets = useMemo(() => generator(), []);
-
-  // Register types.
-  useAsyncEffect(async () => {
-    await client.addTypes([...staticTypes, ...recordTypes, ...presets.schemas]);
-  }, [client]);
-
-  // Create type generators.
-  const typeMap = useMemo(() => {
-    const recordGenerators = new Map<string, ObjectGenerator<any>>(
-      recordTypes.map((type) => [type.typename, createGenerator(client, invokePromise, type)]),
-    );
+export const SpaceGenerator = composable<HTMLDivElement, SpaceGeneratorProps>(
+  ({ space, onCreateObjects, children, ...props }, forwardedRef) => {
+    const { invokePromise } = useOperationInvoker();
+    const client = useClient();
+    const [count, setCount] = useState(1);
+    const [info, setInfo] = useState<any>({});
+    const presets = useMemo(() => generator(), []);
 
-    return new Map([...staticGenerators, ...presets.items, ...recordGenerators]);
-  }, [client, recordTypes, invokePromise]);
-
-  // Query space to get info.
-  const updateInfo = async () => {
-    // Create schema map.
-    const echoSchema = await space.db.schemaRegistry.query().run();
-    const staticSchema = await space.db.graph.schemaRegistry.query().run();
-
-    // Create object map.
-    const objects = await space.db.query(Filter.everything()).run();
-    const objectMap = sortKeys(
-      objects.reduce<Record<string, number>>((map, obj) => {
-        const type = Obj.getTypename(obj);
-        if (type) {
-          const count = map[type] ?? 0;
-          map[type] = count + 1;
-        }
+    // Register types.
+    useAsyncEffect(async () => {
+      await client.addTypes([...staticTypes, ...recordTypes, ...presets.schemas]);
+    }, [client, presets]);
 
-        return map;
-      }, {}),
-    );
+    // Create type generators.
+    const typeMap = useMemo(() => {
+      const recordGenerators = new Map<string, ObjectGenerator<any>>(
+        recordTypes.map((type) => [Type.getTypename(type), createGenerator(client, invokePromise, type)]),
+      );
+
+      return new Map([...staticGenerators, ...presets.items, ...recordGenerators]);
+    }, [client, invokePromise, presets]);
+
+    // Query space to get info.
+    const updateInfo = useCallback(async () => {
+      const allSchema = [...space.db.graph.registry.list().filter(Type.isType)];
+      const echoSchema = allSchema.filter((t) => Type.isTypeKind(t));
+      const staticSchema = allSchema.filter((t) => !Type.isTypeKind(t));
+
+      const objects = await space.db.query(Filter.everything()).run();
+      const objectMap = sortKeys(
+        objects.reduce<Record<string, number>>((map, obj) => {
+          const type = Obj.getTypename(obj);
+          if (type) {
+            const count = map[type] ?? 0;
+            map[type] = count + 1;
+          }
+
+          return map;
+        }, {}),
+      );
 
-    setInfo({
-      schema: {
-        static: staticSchema.length,
-        mutable: echoSchema.length,
+      setInfo({
+        schema: {
+          static: staticSchema.length,
+          mutable: echoSchema.length,
+        },
+        objects: objectMap,
+      });
+    }, [space]);
+
+    useAsyncEffect(updateInfo, [updateInfo]);
+
+    const handleCreateData = useCallback(
+      async (typename: string) => {
+        const constructor = typeMap.get(typename);
+        if (constructor) {
+          // TODO(burdon): Input to specify number of objects.
+          await constructor(space, count, onCreateObjects);
+          await updateInfo();
+        }
       },
-      objects: objectMap,
-    });
-  };
-
-  useAsyncEffect(updateInfo, [space]);
-
-  const handleCreateData = useCallback(
-    async (typename: string) => {
-      const constructor = typeMap.get(typename);
-      if (constructor) {
-        // TODO(burdon): Input to specify number of objects.
-        await constructor(space, count, onCreateObjects);
-        await updateInfo();
-      }
-    },
-    [typeMap, count],
-  );
-
-  return (
-    <Panel.Root>
-      <Panel.Toolbar asChild>
-        <Toolbar.Root>
-          <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' onClick={updateInfo} />
-          <Toolbar.Separator />
-          <Input.Root>
-            <Input.TextInput
-              type='number'
-              placeholder='Count'
-              classNames='w-[4rem] text-right'
-              min={1}
-              max={100}
-              size={8}
-              value={count}
-              onChange={(event) => setCount(parseInt(event.target.value))}
-            />
-          </Input.Root>
-        </Toolbar.Root>
-      </Panel.Toolbar>
-      <Panel.Content asChild>
-        <ScrollArea.Root thin orientation='vertical'>
-          <ScrollArea.Viewport classNames='gap-4 divide-y divide-subdued-separator'>
-            <SchemaTable types={staticTypes} objects={info.objects} label='Static Types' onClick={handleCreateData} />
-            <SchemaTable types={recordTypes} objects={info.objects} label='Record Types' onClick={handleCreateData} />
-            <SchemaTable types={presets.types} objects={info.objects} label='Presets' onClick={handleCreateData} />
-            <SyntaxHighlighter language='json' classNames='text-xs'>
-              {JSON.stringify({ space, ...info }, jsonKeyReplacer({ truncate: true }), 2)}
-            </SyntaxHighlighter>
-          </ScrollArea.Viewport>
-        </ScrollArea.Root>
-      </Panel.Content>
-    </Panel.Root>
-  );
-};
+      [typeMap, count, space, onCreateObjects, updateInfo],
+    );
+
+    return (
+      <Panel.Root {...composableProps(props)} ref={forwardedRef}>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root>
+            <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' onClick={updateInfo} />
+            <Toolbar.Separator />
+            <Input.Root>
+              <Input.TextInput
+                type='number'
+                placeholder='Count'
+                classNames='w-[4rem] text-right'
+                min={1}
+                max={100}
+                size={8}
+                value={count}
+                onChange={(event) => setCount(parseInt(event.target.value))}
+              />
+            </Input.Root>
+          </Toolbar.Root>
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <ScrollArea.Root thin orientation='vertical'>
+            <ScrollArea.Viewport classNames='dx-document gap-4 divide-y divide-subdued-separator'>
+              <SchemaTable types={staticTypes} objects={info.objects} label='Static Types' onClick={handleCreateData} />
+              <SchemaTable types={recordTypes} objects={info.objects} label='Record Types' onClick={handleCreateData} />
+              <SchemaTable types={presets.types} objects={info.objects} label='Presets' onClick={handleCreateData} />
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Panel.Content>
+      </Panel.Root>
+    );
+  },
+);

package/src/containers/SpaceGenerator/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { SpaceGenerator } from './SpaceGenerator';
-
-export default SpaceGenerator;
+export { SpaceGenerator as default } from './SpaceGenerator';

package/src/containers/Wireframe/Wireframe.tsx

@@ -8,7 +8,7 @@ import { useResizeDetector } from 'react-resize-detector';
 import { Obj } from '@dxos/echo';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/ui-theme';
 
 // TODO(burdon): Create generic container with wireframe mode.
@@ -19,7 +19,7 @@ export type WireframeProps = ThemedClassName<{
 
 // TODO(burdon): Make focusable and attendable with input.
 export const Wireframe = ({ classNames, label, object }: WireframeProps) => {
-  const attentionAttrs = useAttentionAttributes(Obj.getDXN(object).toString());
+  const attentionAttrs = useAttentionAttributes(Obj.getURI(object));
   const { width, height, ref } = useResizeDetector();
 
   return (
@@ -29,11 +29,7 @@ export const Wireframe = ({ classNames, label, object }: WireframeProps) => {
           <div>{label}</div>
           <div>{`[${width}x${height}]`}</div>
         </div>
-        {object && (
-          <SyntaxHighlighter language='json' classNames='text-xs opacity-75 rounded-sm'>
-            {JSON.stringify(object, undefined, 2)}
-          </SyntaxHighlighter>
-        )}
+        {object && <JsonHighlighter data={object} classNames='text-xs opacity-75 rounded-sm' />}
       </div>
       <svg width={width} height={height} className='bg-transparent *:text-subdued'>
         <rect x={0} y={0} width={width} height={height} strokeWidth={1} fill='none' />

package/src/containers/Wireframe/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Wireframe } from './Wireframe';
-
-export default Wireframe;
+export { Wireframe as default } from './Wireframe';

package/src/containers/index.ts

@@ -6,9 +6,10 @@ import { type ComponentType, lazy } from 'react';
 
 export const DebugGraph: ComponentType<any> = lazy(() => import('./DebugGraph'));
 export const DebugObjectPanel: ComponentType<any> = lazy(() => import('./DebugObjectPanel'));
-export const DebugSettings: ComponentType<any> = lazy(() => import('./DebugSettings'));
 export const DebugStatus: ComponentType<any> = lazy(() => import('./DebugStatus'));
 export const DevtoolsOverviewContainer: ComponentType<any> = lazy(() => import('./DevtoolsOverviewContainer'));
 export const SpaceGenerator: ComponentType<any> = lazy(() => import('./SpaceGenerator'));
 export const Wireframe: ComponentType<any> = lazy(() => import('./Wireframe'));
 export const DebugSpaceObjectsPanel: ComponentType<any> = lazy(() => import('./DebugSpaceObjectsPanel'));
+export const GithubPanel: ComponentType<any> = lazy(() => import('./GithubPanel'));
+export const RegistryPanel: ComponentType<any> = lazy(() => import('./RegistryPanel'));

package/src/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './DebugPlugin';
 export * from './meta';
+export * from './types';

package/src/meta.ts

@@ -2,17 +2,37 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Plugin } from '@dxos/app-framework';
+import { Plugin } from '@dxos/app-framework';
+import { DXN } from '@dxos/keys';
 import { trim } from '@dxos/util';
 
-export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/debug',
+export const meta = Plugin.makeMeta({
+  key: DXN.make('org.dxos.plugin.debug'),
   name: 'Debug',
+  author: 'DXOS',
+  spec: 'PLUGIN.mdl',
   description: trim`
-    Comprehensive developer toolkit for troubleshooting applications, generating test data, and exploring automation capabilities.
-    Inspect objects, monitor events, and debug plugin behavior in real-time.
+    DebugPlugin is the developer toolkit for DXOS Composer. It adds a structured Devtools node
+    to the navigation graph — grouped into Client, HALO, ECHO, Mesh, and EDGE sub-sections —
+    exposing panel views for config, storage, logs, diagnostics, identity, devices, feeds,
+    objects, schemas, automerge internals, network topology, EDGE workflows, and invocation
+    traces, all driven by the @dxos/devtools component library.
+
+    The plugin contributes a Debug companion tab to every ECHO object in the deck so developers
+    can inspect raw field values and DXNs inline, and a Space Objects companion panel that lists
+    all objects in the active space with live reactive updates.
+
+    Test-data generation is available via a SpaceGenerator article surface: developers can
+    create configurable batches of synthetic ECHO objects into any space collection, with a
+    status indicator showing when generation is running.
+
+    Additional utilities include a wireframe overlay mode that draws labelled borders around
+    every article and section surface, a log-capture and download facility backed by an
+    IdbLogStore, a ToolsExplorer connected to the DXOS MCP introspect service, and a
+    globalThis helper for manual storage-version testing.
   `,
   icon: 'ph--bug--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-debug',
   screenshots: ['https://dxos.network/plugin-details-debug-dark.png'],
-};
+  tags: ['labs'],
+});

package/src/plugin.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export const DebugPlugin = Plugin.lazy(meta, () => import('#plugin'));
+export type { DebugPluginOptions } from '#types';