@dxos/plugin-debug 0.8.4-main.5ea62a8 → 0.8.4-main.ae835ea

package/src/capabilities/react-surface.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
+import * as Function from 'effect/Function';
 import React, { useCallback } from 'react';
 
 import {
@@ -63,7 +63,7 @@ import {
   SpaceGenerator,
   Wireframe,
 } from '../components';
-import { DEBUG_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { type DebugSettingsProps, Devtools } from '../types';
 
 type SpaceDebug = {
@@ -76,7 +76,7 @@ type GraphDebug = {
   root: string;
 };
 
-const isSpaceDebug = (data: any): data is SpaceDebug => data?.type === `${DEBUG_PLUGIN}/space` && isSpace(data.space);
+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';
 
 // TODO(wittjosiah): Factor out?
@@ -91,14 +91,14 @@ const useCurrentSpace = () => {
 export default (context: PluginContext) =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: `${DEBUG_PLUGIN}/plugin-settings`,
+      id: `${meta.id}/plugin-settings`,
       role: 'article',
       filter: (data): data is { subject: SettingsStore<DebugSettingsProps> } =>
-        data.subject instanceof SettingsStore && data.subject.prefix === DEBUG_PLUGIN,
+        data.subject instanceof SettingsStore && data.subject.prefix === meta.id,
       component: ({ data: { subject } }) => <DebugSettings settings={subject.value} />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/space`,
+      id: `${meta.id}/space`,
       role: 'article',
       filter: (data): data is { subject: SpaceDebug } => isSpaceDebug(data.subject),
       component: ({ data }) => {
@@ -132,19 +132,17 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/graph`,
+      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: `${DEBUG_PLUGIN}/wireframe`,
+      id: `${meta.id}/wireframe`,
       role: ['article', 'section'],
       position: 'hoist',
       filter: (data): data is { subject: Obj.Any } => {
-        const settings = context
-          .getCapability(Capabilities.SettingsStore)
-          .getStore<DebugSettingsProps>(DEBUG_PLUGIN)!.value;
+        const settings = context.getCapability(Capabilities.SettingsStore).getStore<DebugSettingsProps>(meta.id)!.value;
         return Obj.isObject(data.subject) && !!settings.wireframe;
       },
       component: ({ data, role }) => (
@@ -152,18 +150,18 @@ export default (context: PluginContext) =>
       ),
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/object-debug`,
+      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: `${DEBUG_PLUGIN}/devtools-overview`,
+      id: `${meta.id}/devtools-overview`,
       role: 'deck-companion--devtools',
       component: () => <DevtoolsOverviewContainer />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/status`,
+      id: `${meta.id}/status`,
       role: 'status',
       component: () => <DebugStatus />,
     }),
@@ -173,55 +171,55 @@ export default (context: PluginContext) =>
     //
 
     createSurface({
-      id: `${DEBUG_PLUGIN}/client/config`,
+      id: `${meta.id}/client/config`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Client.Config,
       component: () => <ConfigPanel vaultSelector={false} />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/client/storage`,
+      id: `${meta.id}/client/storage`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Client.Storage,
       component: () => <StoragePanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/client/logs`,
+      id: `${meta.id}/client/logs`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Client.Logs,
       component: () => <LoggingPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/client/diagnostics`,
+      id: `${meta.id}/client/diagnostics`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Client.Diagnostics,
       component: () => <DiagnosticsPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/client/tracing`,
+      id: `${meta.id}/client/tracing`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Client.Tracing,
       component: () => <TracingPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/halo/identity`,
+      id: `${meta.id}/halo/identity`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Halo.Identity,
       component: () => <IdentityPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/halo/devices`,
+      id: `${meta.id}/halo/devices`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Halo.Devices,
       component: () => <DeviceListPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/halo/keyring`,
+      id: `${meta.id}/halo/keyring`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Halo.Keyring,
       component: () => <KeyringPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/halo/credentials`,
+      id: `${meta.id}/halo/credentials`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Halo.Credentials,
       component: () => {
@@ -230,7 +228,7 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/spaces`,
+      id: `${meta.id}/echo/spaces`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Spaces,
       component: () => {
@@ -243,7 +241,7 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/space`,
+      id: `${meta.id}/echo/space`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Space,
       component: () => {
@@ -257,7 +255,7 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/feeds`,
+      id: `${meta.id}/echo/feeds`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Feeds,
       component: () => {
@@ -266,7 +264,7 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/objects`,
+      id: `${meta.id}/echo/objects`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Objects,
       component: () => {
@@ -275,7 +273,7 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/schema`,
+      id: `${meta.id}/echo/schema`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Schema,
       component: () => {
@@ -284,7 +282,7 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/automerge`,
+      id: `${meta.id}/echo/automerge`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Automerge,
       component: () => {
@@ -293,13 +291,13 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/queues`,
+      id: `${meta.id}/echo/queues`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Queues,
       component: () => <QueuesPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/members`,
+      id: `${meta.id}/echo/members`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Members,
       component: () => {
@@ -308,25 +306,25 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/metadata`,
+      id: `${meta.id}/echo/metadata`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Metadata,
       component: () => <MetadataPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/mesh/signal`,
+      id: `${meta.id}/mesh/signal`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Mesh.Signal,
       component: () => <SignalPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/mesh/swarm`,
+      id: `${meta.id}/mesh/swarm`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Mesh.Swarm,
       component: () => <SwarmPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/mesh/network`,
+      id: `${meta.id}/mesh/network`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Mesh.Network,
       component: () => {
@@ -336,19 +334,19 @@ export default (context: PluginContext) =>
     }),
     // TODO(wittjosiah): Remove?
     // createSurface({
-    //   id: `${DEBUG_PLUGIN}/agent/dashboard`,
+    //   id: `${meta.id}/agent/dashboard`,
     //   role: 'article',
     //   filter: (data): data is any => data.subject === Devtools.Agent.Dashboard,
     //   component: () => <DashboardPanel />,
     // }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/edge/dashboard`,
+      id: `${meta.id}/edge/dashboard`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Edge.Dashboard,
       component: () => <EdgeDashboardPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/edge/workflows`,
+      id: `${meta.id}/edge/workflows`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Edge.Workflows,
       component: () => {
@@ -357,7 +355,7 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/edge/traces`,
+      id: `${meta.id}/edge/traces`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Edge.Traces,
       component: () => {
@@ -366,7 +364,7 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/edge/testing`,
+      id: `${meta.id}/edge/testing`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Edge.Testing,
       component: () => {
@@ -383,7 +381,10 @@ export default (context: PluginContext) =>
           async (space: Space) => {
             await space.waitUntilReady();
             const result = await dispatch(
-              pipe(createIntent(ScriptAction.Create, { space }), chain(SpaceAction.AddObject, { target: space })),
+              Function.pipe(
+                createIntent(ScriptAction.CreateScript, { space }),
+                chain(SpaceAction.AddObject, { target: space }),
+              ),
             );
             log.info('script created', { result });
             await dispatch(

package/src/components/DebugObjectPanel.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { type Obj } from '@dxos/echo';
 import { Clipboard, Input, Toolbar } from '@dxos/react-ui';
 import { StackItem } from '@dxos/react-ui-stack';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { Json } from '@dxos/react-ui-syntax-highlighter';
 
 export type DebugObjectPanelProps = {
   object: Obj.Any;
@@ -26,9 +26,7 @@ export const DebugObjectPanel = ({ object }: DebugObjectPanelProps) => {
             <Clipboard.IconButton value={dxn} />
           </Input.Root>
         </Toolbar.Root>
-        <SyntaxHighlighter classNames='flex text-xs' language='json'>
-          {JSON.stringify(object, null, 2)}
-        </SyntaxHighlighter>
+        <Json data={object} />
       </StackItem.Content>
     </Clipboard.Provider>
   );

package/src/components/DebugSettings.tsx

@@ -12,7 +12,7 @@ import { Button, Icon, Input, Select, Toast, useFileDownload, useTranslation } f
 import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 import { setDeep } from '@dxos/util';
 
-import { DEBUG_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { type DebugSettingsProps } from '../types';
 
 type Toast = {
@@ -26,7 +26,7 @@ const StorageAdapters = {
 } as const;
 
 export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) => {
-  const { t } = useTranslation(DEBUG_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const [toast, setToast] = useState<Toast>();
   const client = useClient();
   const download = useFileDownload();
@@ -51,7 +51,7 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
     download(file, fileName);
 
     if (upload) {
-      const info = await upload(new File([file], fileName), client.spaces.default);
+      const info = await upload(client.spaces.default, new File([file], fileName));
       if (!info) {
         log.error('diagnostics failed to upload to IPFS');
         return;
@@ -78,7 +78,7 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
 
   return (
     <ControlPage>
-      <ControlSection title={t('settings title', { ns: DEBUG_PLUGIN })}>
+      <ControlSection title={t('settings title', { ns: meta.id })}>
         <ControlGroup>
           <ControlItemInput title={t('settings wireframe')}>
             <Input.Switch

package/src/components/DebugStatus.tsx

@@ -59,7 +59,7 @@ const _timer = (cb: (err?: Error) => void, options?: { min?: number; max?: numbe
 // TODO(burdon): Integrate with Sentry?
 const ErrorIndicator = () => {
   const [, forceUpdate] = useState({});
-  const errorRef = useRef<Error>();
+  const errorRef = useRef<Error>(null);
   useEffect(() => {
     const errorListener = (event: any) => {
       const error: Error = event.error ?? event.reason;
@@ -83,7 +83,7 @@ const ErrorIndicator = () => {
   }, []);
 
   const handleReset = () => {
-    errorRef.current = undefined;
+    errorRef.current = null;
     forceUpdate({});
   };
 

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -5,34 +5,33 @@
 import { type PromiseIntentDispatcher, createIntent } from '@dxos/app-framework';
 import { addressToA1Notation } from '@dxos/compute';
 import { ComputeGraph, ComputeGraphModel, DEFAULT_OUTPUT, NODE_INPUT, NODE_OUTPUT } from '@dxos/conductor';
-import { DXN, Filter, Key, Obj, Ref, Type } from '@dxos/echo';
-import { type TypedObject } from '@dxos/echo-schema';
+import { DXN, Filter, Key, type Obj, Type } from '@dxos/echo';
+import { type TypedObject } from '@dxos/echo/internal';
 import { Markdown } from '@dxos/plugin-markdown/types';
-import { createSheet } from '@dxos/plugin-sheet/types';
-import { type CellValue, SheetType } from '@dxos/plugin-sheet/types';
-import { CanvasType, DiagramType } from '@dxos/plugin-sketch/types';
+import { Sheet } from '@dxos/plugin-sheet/types';
+import { Diagram } from '@dxos/plugin-sketch/types';
 import { SpaceAction } from '@dxos/plugin-space/types';
 import { faker } from '@dxos/random';
 import { type Client } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { DataType } from '@dxos/schema';
+import { DataType, getTypenameFromQuery } from '@dxos/schema';
 import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
 import { range } from '@dxos/util';
 
 const generator: ValueGenerator = faker as any;
 
-export type ObjectGenerator<T extends Obj.Any> = (space: Space, n: number, cb?: (objects: T[]) => void) => Promise<T[]>;
-
 const findViewByTypename = async (views: DataType.View[], typename: string) => {
-  return views.find((view) => view.query.typename === typename);
+  return views.find((view) => getTypenameFromQuery(view.query.ast) === typename);
 };
 
+export type ObjectGenerator<T extends Obj.Any> = (space: Space, n: number, cb?: (objects: T[]) => void) => Promise<T[]>;
+
 export const createGenerator = <T extends Obj.Any>(
   client: Client,
   dispatch: PromiseIntentDispatcher,
   schema: TypedObject<T>,
 ): ObjectGenerator<T> => {
-  return async (space: Space, n: number, cb?: (objects: T[]) => void): Promise<T[]> => {
+  return async (space: Space, n: number): Promise<T[]> => {
     const typename = schema.typename;
 
     // Find or create table and view.
@@ -40,9 +39,9 @@ export const createGenerator = <T extends Obj.Any>(
     const view = await findViewByTypename(views, typename);
     const staticSchema = client?.graph.schemaRegistry.schemas.find((schema) => Type.getTypename(schema) === typename);
     if (!view && !staticSchema) {
-      await dispatch(createIntent(SpaceAction.AddSchema, { space, schema }));
+      await dispatch(createIntent(SpaceAction.AddSchema, { space, schema, show: false }));
     } else if (!view && staticSchema) {
-      await dispatch(createIntent(SpaceAction.UseStaticSchema, { space, typename }));
+      await dispatch(createIntent(SpaceAction.UseStaticSchema, { space, typename, show: false }));
     }
 
     // Create objects.
@@ -69,16 +68,11 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
     },
   ],
   [
-    DiagramType.typename,
+    Diagram.Diagram.typename,
     async (space, n, cb) => {
       const objects = range(n).map(() => {
         // TODO(burdon): Generate diagram.
-        const obj = space.db.add(
-          Obj.make(DiagramType, {
-            name: faker.commerce.productName(),
-            canvas: Ref.make(Obj.make(CanvasType, { content: {} })),
-          }),
-        );
+        const obj = space.db.add(Diagram.make({ name: faker.commerce.productName() }));
 
         return obj;
       });
@@ -89,10 +83,10 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
   ],
   // TODO(burdon): Create unit tests.
   [
-    SheetType.typename,
+    Sheet.Sheet.typename,
     async (space, n, cb) => {
       const objects = range(n).map(() => {
-        const cells: Record<string, CellValue> = {};
+        const cells: Record<string, Sheet.CellValue> = {};
         const year = new Date().getFullYear();
         const cols = 4;
         const rows = 16;
@@ -114,7 +108,7 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
         // TODO(burdon): Set width.
         // TODO(burdon): Set formatting for columns.
         return space.db.add(
-          createSheet({
+          Sheet.make({
             name: faker.commerce.productName(),
             cells,
           }),

package/src/components/SpaceGenerator/SpaceGenerator.stories.tsx

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
@@ -11,7 +9,8 @@ import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { useSpaces } from '@dxos/react-client/echo';
-import { render, withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
+import { render } from '@dxos/storybook-utils';
 
 import { SpaceGenerator } from './SpaceGenerator';
 
@@ -29,6 +28,7 @@ const meta = {
   component: SpaceGenerator as any,
   render: render(DefaultStory),
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [
         ClientPlugin({
@@ -39,8 +39,6 @@ const meta = {
         IntentPlugin(),
       ],
     }),
-    withLayout(),
-    withTheme,
   ],
   parameters: {
     layout: 'fullscreen',

package/src/components/SpaceGenerator/SpaceGenerator.tsx

@@ -8,8 +8,8 @@ import { useIntentDispatcher } from '@dxos/app-framework';
 import { ComputeGraph } from '@dxos/conductor';
 import { Filter, type Obj } from '@dxos/echo';
 import { Markdown } from '@dxos/plugin-markdown/types';
-import { SheetType } from '@dxos/plugin-sheet/types';
-import { DiagramType } from '@dxos/plugin-sketch/types';
+import { Sheet } from '@dxos/plugin-sheet/types';
+import { Diagram } from '@dxos/plugin-sketch/types';
 import { useClient } from '@dxos/react-client';
 import { type Space, getTypename } from '@dxos/react-client/echo';
 import { IconButton, Input, Toolbar, useAsyncEffect } from '@dxos/react-ui';
@@ -29,7 +29,7 @@ export type SpaceGeneratorProps = {
 export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const client = useClient();
-  const staticTypes = [Markdown.Document, DiagramType, SheetType, ComputeGraph]; // TODO(burdon): Make extensible.
+  const staticTypes = [Markdown.Document, Diagram.Diagram, Sheet.Sheet, ComputeGraph]; // TODO(burdon): Make extensible.
   const recordTypes = [DataType.Organization, DataType.Person, DataType.Task];
   const [count, setCount] = useState(1);
   const [info, setInfo] = useState<any>({});
@@ -112,7 +112,7 @@ export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps)
         <SchemaTable types={presets.types} objects={info.objects} label='Presets' onClick={handleCreateData} />
 
         <div>
-          <SyntaxHighlighter classNames='flex text-xs' language='json'>
+          <SyntaxHighlighter language='json' classNames='text-xs'>
             {JSON.stringify({ space, ...info }, jsonKeyReplacer({ truncate: true }), 2)}
           </SyntaxHighlighter>
         </div>

package/src/components/SpaceGenerator/draw-util.ts

@@ -16,7 +16,7 @@ import {
 import { type Editor, type SerializedStore, type TLRecord, createBindingId, createShapeId } from '@tldraw/tldraw';
 
 import { faker } from '@dxos/random';
-import { isNotFalsy, range } from '@dxos/util';
+import { isTruthy, range } from '@dxos/util';
 
 // TODO(burdon): Graph layout:
 //  - https://www.npmjs.com/package/@antv/layout (uses d3)
@@ -67,7 +67,7 @@ export const generateGraph = (): Graph<PlainObject, PlainObject> => {
         }
         return target;
       })
-      .filter(isNotFalsy);
+      .filter(isTruthy);
 
     for (const target of targets) {
       traverse(target);