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

package/src/containers/DebugObjectPanel/DebugObjectPanel.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { ObjectsTree } from '@dxos/devtools';
+import { Filter, Obj, Query } from '@dxos/echo';
+import type { ObjectId } from '@dxos/keys';
+import { useQuery } from '@dxos/react-client/echo';
+import { Clipboard, Grid, Panel, ScrollArea } from '@dxos/react-ui';
+import { Json } from '@dxos/react-ui-syntax-highlighter';
+
+export type DebugObjectPanelProps = {
+  object: Obj.Unknown;
+};
+
+export const DebugObjectPanel = ({ object }: DebugObjectPanelProps) => {
+  const db = Obj.getDatabase(object);
+
+  const [selectedId, setSelectedId] = useState<ObjectId | null>(null);
+  const [selectedObject] = useQuery(
+    db,
+    Query.select(Filter.id(selectedId ?? object.id)).options({ deleted: 'include' }),
+  );
+
+  return (
+    <Clipboard.Provider>
+      <Panel.Root>
+        <Panel.Content asChild>
+          <Grid rows={db ? 2 : 1} classNames='divide-y divide-separator'>
+            {db && (
+              <ScrollArea.Root>
+                <ScrollArea.Viewport>
+                  <ObjectsTree db={db} root={object} onSelect={(entity) => setSelectedId(entity.id)} />
+                </ScrollArea.Viewport>
+              </ScrollArea.Root>
+            )}
+            <Json data={selectedObject} />
+          </Grid>
+        </Panel.Content>
+      </Panel.Root>
+    </Clipboard.Provider>
+  );
+};

package/src/containers/DebugObjectPanel/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { DebugObjectPanel } from './DebugObjectPanel';
+
+export default DebugObjectPanel;

package/src/{components → containers/DebugSettings}/DebugSettings.tsx

@@ -4,16 +4,17 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { Capabilities, useCapabilities } from '@dxos/app-framework';
+import { useCapabilities } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
 import { type ConfigProto, SaveConfig, Storage, defs } from '@dxos/config';
-import { log } from '@dxos/log';
+import { type LogBuffer, log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { Button, Icon, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { Icon, IconButton, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
+import { Settings } from '@dxos/react-ui-form';
 import { setDeep } from '@dxos/util';
 
-import { meta } from '../meta';
-import { type DebugSettingsProps } from '../types';
+import { meta } from '../../meta';
+import { type DebugSettingsProps } from '../../types';
 
 type Toast = {
   title: string;
@@ -25,14 +26,20 @@ const StorageAdapters = {
   idb: defs.Runtime.Client.Storage.StorageDriver.IDB,
 } as const;
 
-export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) => {
+export type DebugSettingsComponentProps = {
+  settings: DebugSettingsProps;
+  onSettingsChange: (fn: (current: DebugSettingsProps) => DebugSettingsProps) => void;
+  logBuffer: LogBuffer;
+};
+
+export const DebugSettings = ({ settings, onSettingsChange, logBuffer }: DebugSettingsComponentProps) => {
   const { t } = useTranslation(meta.id);
   const [toast, setToast] = useState<Toast>();
   const client = useClient();
   const download = useFileDownload();
   // TODO(mykola): Get updates from other places that change Config.
   const [storageConfig, setStorageConfig] = useState<ConfigProto>({});
-  const [upload] = useCapabilities(Capabilities.FileUploader);
+  const [upload] = useCapabilities(AppCapabilities.FileUploader);
 
   useEffect(() => {
     void Storage().then((config) => setStorageConfig(config));
@@ -46,56 +53,91 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
 
   const handleDownload = async () => {
     const data = await client.diagnostics();
-    const file = new Blob([JSON.stringify(data, undefined, 2)], { type: 'text/plain' });
+    const file = new Blob([JSON.stringify(data, undefined, 2)], {
+      type: 'text/plain',
+    });
     const fileName = `composer-${new Date().toISOString().replace(/\W/g, '-')}.json`;
     download(file, fileName);
 
     if (upload) {
-      const info = await upload(new File([file], fileName), client.spaces.default);
+      const info = await upload(client.spaces.default.db, new File([file], fileName));
       if (!info) {
         log.error('diagnostics failed to upload to IPFS');
         return;
       }
-      handleToast({ title: t('settings uploaded'), description: t('settings uploaded to clipboard') });
+      handleToast({
+        title: t('settings uploaded'),
+        description: t('settings uploaded to clipboard'),
+      });
 
       // TODO(nf): move to IpfsPlugin?
       const url = client.config.values.runtime!.services!.ipfs!.gateway + '/' + info.cid;
       void navigator.clipboard.writeText(url);
-      handleToast({ title: t('settings uploaded'), description: t('settings uploaded to clipboard') });
+      handleToast({
+        title: t('settings uploaded'),
+        description: t('settings uploaded to clipboard'),
+      });
       log.info('diagnostics', { url });
     }
   };
 
+  const handleDownloadLogs = () => {
+    const ndjson = logBuffer.serialize();
+    const file = new Blob([ndjson], { type: 'application/x-ndjson' });
+    const fileName = `composer-logs-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.ndjson`;
+    download(file, fileName);
+  };
+
   const handleRepair = async () => {
     try {
       const info = await client.repair();
       setStorageConfig(await Storage());
-      handleToast({ title: t('settings repair success'), description: JSON.stringify(info, undefined, 2) });
+      handleToast({
+        title: t('settings repair success'),
+        description: JSON.stringify(info, undefined, 2),
+      });
     } catch (err: any) {
-      handleToast({ title: t('settings repair failed'), description: err.message });
+      handleToast({
+        title: t('settings repair failed'),
+        description: err.message,
+      });
     }
   };
 
   return (
-    <ControlPage>
-      <ControlSection title={t('settings title', { ns: meta.id })}>
-        <ControlGroup>
-          <ControlItemInput title={t('settings wireframe')}>
+    <Settings.Root>
+      <Settings.Section title={t('settings title', { ns: meta.id })}>
+        <Settings.Group>
+          <Settings.ItemInput title={t('settings wireframe')}>
             <Input.Switch
               checked={settings.wireframe}
-              onCheckedChange={(checked) => (settings.wireframe = !!checked)}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, wireframe: !!checked }))}
+            />
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings download diagnostics')}>
+            <IconButton
+              icon='ph--download-simple--regular'
+              iconOnly
+              label={t('settings download diagnostics')}
+              onClick={handleDownload}
+            />
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings download logs')}>
+            <IconButton
+              icon='ph--download-simple--regular'
+              iconOnly
+              label={t('settings download logs')}
+              onClick={handleDownloadLogs}
+            />
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings repair')}>
+            <IconButton
+              icon='ph--first-aid-kit--regular'
+              iconOnly
+              label={t('settings repair')}
+              onClick={handleRepair}
             />
-          </ControlItemInput>
-          <ControlItemInput title={t('settings download diagnostics')}>
-            <Button onClick={handleDownload}>
-              <Icon icon='ph--download-simple--regular' size={5} />
-            </Button>
-          </ControlItemInput>
-          <ControlItemInput title={t('settings repair')}>
-            <Button onClick={handleRepair}>
-              <Icon icon='ph--first-aid-kit--regular' size={5} />
-            </Button>
-          </ControlItemInput>
+          </Settings.ItemInput>
 
           {/* TODO(burdon): Move to layout? */}
           {toast && (
@@ -110,11 +152,11 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
             </Toast.Root>
           )}
 
-          <ControlItemInput title={t('settings choose storage adaptor')}>
+          <Settings.ItemInput title={t('settings choose storage adaptor')}>
             <Select.Root
               value={
                 Object.entries(StorageAdapters).find(
-                  ([name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
+                  ([_name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
                 )?.[0]
               }
               onValueChange={(value) => {
@@ -142,10 +184,10 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
                 </Select.Content>
               </Select.Portal>
             </Select.Root>
-          </ControlItemInput>
-        </ControlGroup>
-      </ControlSection>
-    </ControlPage>
+          </Settings.ItemInput>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
   );
 };
 

package/src/containers/DebugSettings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DebugSettings } from './DebugSettings';
+
+export default DebugSettings;

package/src/containers/DebugSpaceObjectsPanel/DebugSpaceObjectsPanel.tsx

@@ -0,0 +1,60 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { useCapability } from '@dxos/app-framework/ui';
+import { useLayout } from '@dxos/app-toolkit/ui';
+import { ObjectsTree } from '@dxos/devtools';
+import { type Database, Filter, Query } from '@dxos/echo';
+import type { ObjectId } from '@dxos/keys';
+import { ClientCapabilities } from '@dxos/plugin-client';
+import { parseId, useQuery } from '@dxos/react-client/echo';
+import { Clipboard, Grid, Input, Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
+import { Json } from '@dxos/react-ui-syntax-highlighter';
+
+export const DebugSpaceObjectsPanel = () => {
+  const layout = useLayout();
+  const client = useCapability(ClientCapabilities.Client);
+  const { spaceId } = parseId(layout.workspace);
+  const space = spaceId ? client.spaces.get(spaceId) : undefined;
+  if (!space) {
+    return null;
+  }
+
+  return <DebugSpaceObjectsPanelMain database={space.db} />;
+};
+
+const DebugSpaceObjectsPanelMain = ({ database }: { database: Database.Database }) => {
+  const [selectedId, setSelectedId] = useState<ObjectId | null>(null);
+
+  const [selectedObject] = useQuery(
+    database,
+    selectedId ? Query.select(Filter.id(selectedId)) : Query.select(Filter.nothing()),
+  );
+
+  return (
+    <Clipboard.Provider>
+      <Panel.Root>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root>
+            <Input.Root>
+              <Input.TextInput disabled placeholder='Search...' />
+            </Input.Root>
+          </Toolbar.Root>
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <Grid rows={2} classNames='divide-y divide-separator'>
+            <ScrollArea.Root>
+              <ScrollArea.Viewport>
+                <ObjectsTree db={database} onSelect={(entity) => setSelectedId(entity.id)} />
+              </ScrollArea.Viewport>
+            </ScrollArea.Root>
+            {selectedObject && <Json classNames='p-1' data={selectedObject} />}
+          </Grid>
+        </Panel.Content>
+      </Panel.Root>
+    </Clipboard.Provider>
+  );
+};

package/src/containers/DebugSpaceObjectsPanel/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { DebugSpaceObjectsPanel } from './DebugSpaceObjectsPanel';
+
+export default DebugSpaceObjectsPanel;

package/src/containers/DebugStatus/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DebugStatus } from './DebugStatus';
+
+export default DebugStatus;

package/src/{components → containers/DevtoolsOverviewContainer}/DevtoolsOverviewContainer.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
 import { StatsPanel, useStats } from '@dxos/devtools';
 
 export const DevtoolsOverviewContainer = () => {
@@ -12,9 +12,7 @@ export const DevtoolsOverviewContainer = () => {
 
   return (
     <StatsPanel stats={stats} onRefresh={refreshStats}>
-      <Surface role='devtools-overview' />
+      <Surface.Surface role='devtools-overview' />
     </StatsPanel>
   );
 };
-
-export default DevtoolsOverviewContainer;

package/src/containers/DevtoolsOverviewContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { DevtoolsOverviewContainer } from './DevtoolsOverviewContainer';
+
+export default DevtoolsOverviewContainer;

package/src/containers/SpaceGenerator/SpaceGenerator.tsx

@@ -0,0 +1,127 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+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 { 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 { Organization, Person, Task } from '@dxos/types';
+import { jsonKeyReplacer, sortKeys } from '@dxos/util';
+
+import { type ObjectGenerator, SchemaTable, createGenerator, generator, staticGenerators } from '../../components';
+
+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)]),
+    );
+
+    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;
+        }
+
+        return map;
+      }, {}),
+    );
+
+    setInfo({
+      schema: {
+        static: staticSchema.length,
+        mutable: echoSchema.length,
+      },
+      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>
+  );
+};

package/src/containers/SpaceGenerator/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { SpaceGenerator } from './SpaceGenerator';
+
+export default SpaceGenerator;

package/src/{components → containers/Wireframe}/Wireframe.tsx

@@ -5,33 +5,32 @@
 import React from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
-import { type Obj } from '@dxos/echo';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
+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 { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 // TODO(burdon): Create generic container with wireframe mode.
 export type WireframeProps = ThemedClassName<{
+  object: Obj.Unknown;
   label?: string;
-  object: Obj.Any;
 }>;
 
 // TODO(burdon): Make focusable and attendable with input.
 export const Wireframe = ({ classNames, label, object }: WireframeProps) => {
-  const attentionAttrs = useAttentionAttributes(fullyQualifiedId(object));
+  const attentionAttrs = useAttentionAttributes(Obj.getDXN(object).toString());
   const { width, height, ref } = useResizeDetector();
 
   return (
-    <div ref={ref} className={mx('relative grow min-bs-96', classNames)} {...attentionAttrs}>
+    <div ref={ref} className={mx('relative grow min-h-96', classNames)} {...attentionAttrs}>
       <div className='absolute inset-2 flex flex-col gap-2 overflow-hidden font-mono'>
         <div className='flex justify-between'>
           <div>{label}</div>
           <div>{`[${width}x${height}]`}</div>
         </div>
         {object && (
-          <SyntaxHighlighter language='json' classNames='text-xs opacity-75 rounded'>
+          <SyntaxHighlighter language='json' classNames='text-xs opacity-75 rounded-sm'>
             {JSON.stringify(object, undefined, 2)}
           </SyntaxHighlighter>
         )}

package/src/containers/Wireframe/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Wireframe } from './Wireframe';
+
+export default Wireframe;

package/src/containers/index.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+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'));

package/src/meta.ts

@@ -2,13 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
-export const meta: PluginMeta = {
+export const meta: Plugin.Meta = {
   id: 'dxos.org/plugin/debug',
   name: 'Debug',
-  description:
-    'The debug plugin is useful for troubleshooting inside of Composer. You can also use the Debug plugin to create test data inside of sheets or tables or explore pre-built automations. Non-technical users will likely not spend much time here, but this plugin is invaluable for developers and technical users.',
+  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.
+  `,
   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'],

package/src/translations.ts

@@ -16,7 +16,8 @@ export const translations = [
         'mutation period': 'Mutation period',
         'open devtools label': 'Open DevTools',
         'devtools label': 'DevTools',
-        'devtools overview label': 'DevTools Stats',
+        'devtools overview label': 'Stats',
+        'space objects label': 'Database',
         'debug label': 'Debug',
         'debug app graph label': 'App Graph',
         'settings show debug panel': 'Show Debug panel.',
@@ -24,6 +25,7 @@ export const translations = [
         'settings wireframe': 'Show wireframes.',
         'settings repair': 'Run repair tool.',
         'settings download diagnostics': 'Download diagnostics.',
+        'settings download logs': 'Download log buffer.',
         'settings uploaded': 'Uploaded to IPFS',
         'settings uploaded to clipboard': 'URL copied to clipboard.',
         'settings repair success': 'Repair succeeded',

package/src/types.ts

@@ -2,11 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type Atom } from '@effect-atom/atom-react';
 import * as Schema from 'effect/Schema';
 import { type Context, createContext } from 'react';
 
+import { Capability } from '@dxos/app-framework';
 import type { TimerCallback, TimerOptions } from '@dxos/async';
 
+import { meta } from './meta';
+
 export type DebugContextType = {
   running: boolean;
   start: (cb: TimerCallback, options: TimerOptions) => void;
@@ -27,6 +31,10 @@ export const DebugSettingsSchema = Schema.mutable(
 
 export interface DebugSettingsProps extends Schema.Schema.Type<typeof DebugSettingsSchema> {}
 
+export namespace DebugCapabilities {
+  export const Settings = Capability.make<Atom.Writable<DebugSettingsProps>>(`${meta.id}/capability/settings`);
+}
+
 export namespace Devtools {
   // TODO(wittjosiah): Cannot use slashes in ids until we have a router which decouples ids from url paths.
   export const id = 'dxos.org.plugin.debug.devtools';

package/dist/lib/browser/DebugGraph-EDOH6R2G.mjs

@@ -1,20 +0,0 @@
-// src/components/DebugGraph.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import React from "react";
-import { Tree } from "@dxos/devtools";
-var DebugGraph = ({ graph, root }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement(Tree, {
-      data: graph.toJSON(root)
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var DebugGraph_default = DebugGraph;
-export {
-  DebugGraph,
-  DebugGraph_default as default
-};
-//# sourceMappingURL=DebugGraph-EDOH6R2G.mjs.map

package/dist/lib/browser/DebugGraph-EDOH6R2G.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/DebugGraph.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type FC } from 'react';\n\nimport { Tree } from '@dxos/devtools';\nimport { type Graph } from '@dxos/plugin-graph';\n\nexport const DebugGraph: FC<{ graph: Graph; root: string }> = ({ graph, root }) => {\n  return <Tree data={graph.toJSON(root)} />;\n};\n\nexport default DebugGraph;\n"],
-  "mappings": ";;AAIA,OAAOA,WAAwB;AAE/B,SAASC,YAAY;AAGd,IAAMC,aAAiD,CAAC,EAAEC,OAAOC,KAAI,MAAE;;;AAC5E,WAAO,sBAAA,cAACC,MAAAA;MAAKC,MAAMH,MAAMI,OAAOH,IAAAA;;;;;AAClC;AAEA,IAAA,qBAAeF;",
-  "names": ["React", "Tree", "DebugGraph", "graph", "root", "Tree", "data", "toJSON"]
-}