@dxos/plugin-debug 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/components/DebugSettings/DebugSettings.tsx

@@ -0,0 +1,228 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { AppCapabilities, getPersonalSpace } from '@dxos/app-toolkit';
+import { type SettingsSurfaceProps } from '@dxos/app-toolkit/ui';
+import { type ConfigProto, SaveConfig, Storage, defs } from '@dxos/config';
+import { type LogBuffer, log } from '@dxos/log';
+import { useClient } from '@dxos/react-client';
+import { Icon, IconButton, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
+import { Settings as SettingsForm } from '@dxos/react-ui-form';
+import { setDeep } from '@dxos/util';
+
+import { meta } from '#meta';
+import { type Settings } from '#types';
+
+type Toast = {
+  title: string;
+  description?: string;
+};
+
+const StorageAdapters = {
+  opfs: defs.Runtime.Client.Storage.StorageDriver.WEBFS,
+  idb: defs.Runtime.Client.Storage.StorageDriver.IDB,
+} as const;
+
+export type DebugSettingsProps = SettingsSurfaceProps<
+  Settings.Settings,
+  {
+    logBuffer: LogBuffer;
+    onUpload?: AppCapabilities.FileUploader;
+  }
+>;
+
+export const DebugSettings = ({ settings, onSettingsChange, logBuffer, onUpload }: DebugSettingsProps) => {
+  const { t } = useTranslation(meta.id);
+  const [toast, setToast] = useState<Toast>();
+  const download = useFileDownload();
+  const [storageConfig, setStorageConfig] = useState<ConfigProto>({});
+  const client = useClient();
+
+  useEffect(() => {
+    void Storage().then((config) => setStorageConfig(config));
+  }, []);
+
+  const handleToast = useCallback(
+    (toast: Toast) => {
+      setToast(toast);
+      const timer = setTimeout(() => setToast(undefined), 5_000);
+      return () => clearTimeout(timer);
+    },
+    [setToast],
+  );
+
+  const handleDownload = useCallback(async () => {
+    const data = await client.diagnostics();
+    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 (onUpload) {
+      const personalSpace = getPersonalSpace(client);
+      if (!personalSpace) {
+        log.error('no personal space available for upload');
+        return;
+      }
+      const info = await onUpload(personalSpace.db, new File([file], fileName));
+      if (!info) {
+        log.error('diagnostics failed to upload to IPFS');
+        return;
+      }
+      handleToast({
+        title: t('settings.uploaded.message'),
+        description: t('settings.uploaded.description'),
+      });
+
+      // 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.message'),
+        description: t('settings.uploaded.description'),
+      });
+      log.info('diagnostics', { url });
+    }
+  }, [client, download, handleToast, onUpload, t]);
+
+  const handleDownloadLogs = useCallback(() => {
+    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);
+  }, [download, logBuffer]);
+
+  const handleRepair = useCallback(async () => {
+    try {
+      const info = await client.repair();
+      setStorageConfig(await Storage());
+      handleToast({
+        title: t('settings.repair-success.message'),
+        description: JSON.stringify(info, undefined, 2),
+      });
+    } catch (err: any) {
+      handleToast({
+        title: t('settings.repair-failed.message'),
+        description: err.message,
+      });
+    }
+  }, [client, handleToast, t]);
+
+  const handleWireframeChange = useCallback(
+    (checked: boolean) => onSettingsChange?.((s) => ({ ...s, wireframe: !!checked })),
+    [onSettingsChange],
+  );
+
+  const handleStorageAdapterChange = useCallback(
+    (value: string) => {
+      if (confirm(t('settings.storage-adapter.changed-alert.message'))) {
+        updateConfig(
+          storageConfig,
+          setStorageConfig,
+          ['runtime', 'client', 'storage', 'dataStore'],
+          StorageAdapters[value as keyof typeof StorageAdapters],
+        );
+      }
+    },
+    [storageConfig, t],
+  );
+
+  return (
+    <SettingsForm.Viewport>
+      <SettingsForm.Section title={t('settings.title', { ns: meta.id })}>
+        <SettingsForm.Item title={t('settings.wireframe.label')} description={t('settings.wireframe.description')}>
+          <Input.Switch
+            disabled={!onSettingsChange}
+            checked={settings.wireframe}
+            onCheckedChange={handleWireframeChange}
+          />
+        </SettingsForm.Item>
+        <SettingsForm.Item
+          title={t('settings.download-diagnostics.label')}
+          description={t('settings.download-diagnostics.description')}
+        >
+          <IconButton
+            icon='ph--download-simple--regular'
+            iconOnly
+            label={t('settings.download-diagnostics.label')}
+            onClick={handleDownload}
+          />
+        </SettingsForm.Item>
+        <SettingsForm.Item
+          title={t('settings.download-logs.label')}
+          description={t('settings.download-logs.description')}
+        >
+          <IconButton
+            icon='ph--download-simple--regular'
+            iconOnly
+            label={t('settings.download-logs.label')}
+            onClick={handleDownloadLogs}
+          />
+        </SettingsForm.Item>
+        <SettingsForm.Item title={t('settings.repair.label')} description={t('settings.repair.description')}>
+          <IconButton
+            icon='ph--first-aid-kit--regular'
+            iconOnly
+            label={t('settings.repair.label')}
+            onClick={handleRepair}
+          />
+        </SettingsForm.Item>
+
+        {/* TODO(burdon): Move to layout? */}
+        {toast && (
+          <Toast.Root>
+            <Toast.Body>
+              <Toast.Title>
+                <Icon icon='ph--gift--duotone' classNames='inline mr-1' />
+                <span>{toast.title}</span>
+              </Toast.Title>
+              {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
+            </Toast.Body>
+          </Toast.Root>
+        )}
+
+        <SettingsForm.Item
+          title={t('settings.choose-storage-adaptor.label')}
+          description={t('settings.choose-storage-adaptor.description')}
+        >
+          <Select.Root
+            disabled={!onSettingsChange}
+            value={
+              Object.entries(StorageAdapters).find(
+                ([_name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
+              )?.[0]
+            }
+            onValueChange={handleStorageAdapterChange}
+          >
+            <Select.TriggerButton disabled={!onSettingsChange} 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.Arrow />
+              </Select.Content>
+            </Select.Portal>
+          </Select.Root>
+        </SettingsForm.Item>
+      </SettingsForm.Section>
+    </SettingsForm.Viewport>
+  );
+};
+
+const updateConfig = (config: ConfigProto, setConfig: (newConfig: ConfigProto) => void, path: string[], value: any) => {
+  const storageConfigCopy = JSON.parse(JSON.stringify(config ?? {}));
+  setDeep(storageConfigCopy, path, value);
+  setConfig(storageConfigCopy);
+  queueMicrotask(async () => {
+    await SaveConfig(storageConfigCopy);
+  });
+};

package/src/components/DebugSettings/index.ts

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

package/src/components/{SpaceGenerator → SchemaTable}/SchemaTable.tsx

@@ -19,8 +19,8 @@ export const SchemaTable = ({ types, objects = {}, label, onClick }: SchemaTable
       <h2 className='p-2'>{label}</h2>
       {types.map((type) => (
         <div key={type.typename} className='grid grid-cols-subgrid col-span-3 items-center'>
-          <div className='pli-2 text-sm font-mono text-subdued'>{type.typename}</div>
-          <div className='pli-2 text-right font-mono'>{objects[type.typename] ?? 0}</div>
+          <div className='px-2 text-sm font-mono text-subdued'>{type.typename}</div>
+          <div className='px-2 text-right font-mono'>{objects[type.typename] ?? 0}</div>
           <IconButton
             variant='ghost'
             icon='ph--plus--regular'

package/src/components/SchemaTable/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './SchemaTable';

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -7,15 +7,16 @@ import type * as Schema from 'effect/Schema';
 import { addressToA1Notation } from '@dxos/compute';
 import { ComputeGraph, ComputeGraphModel, DEFAULT_OUTPUT, NODE_INPUT, NODE_OUTPUT } from '@dxos/conductor';
 import { DXN, Filter, Key, type Type } from '@dxos/echo';
+import { View } from '@dxos/echo';
 import { type OperationInvoker } from '@dxos/operation';
 import { Markdown } from '@dxos/plugin-markdown/types';
 import { Sheet } from '@dxos/plugin-sheet/types';
-import { Diagram } from '@dxos/plugin-sketch/types';
-import { SpaceOperation } from '@dxos/plugin-space/types';
+import { Sketch } from '@dxos/plugin-sketch/types';
+import { SpaceOperation } from '@dxos/plugin-space/operations';
 import { faker } from '@dxos/random';
 import { type Client } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { View, getTypenameFromQuery } from '@dxos/schema';
+import { getTypenameFromQuery } from '@dxos/schema';
 import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
 import { range } from '@dxos/util';
 
@@ -27,7 +28,7 @@ const findViewByTypename = async (views: View.View[], typename: string) => {
 
 export type ObjectGenerator<T> = (space: Space, n: number, cb?: (objects: T[]) => void) => Promise<T[]>;
 
-export const createGenerator = <S extends Type.Obj.Any>(
+export const createGenerator = <S extends Type.AnyObj>(
   client: Client,
   invokePromise: OperationInvoker.OperationInvoker['invokePromise'],
   schema: S,
@@ -41,8 +42,6 @@ export const createGenerator = <S extends Type.Obj.Any>(
     const staticSchema = client?.graph.schemaRegistry.query({ typename }).runSync()[0];
     if (!view && !staticSchema) {
       await invokePromise(SpaceOperation.AddSchema, { db: space.db, schema, show: false });
-    } else if (!view && staticSchema) {
-      await invokePromise(SpaceOperation.UseStaticSchema, { db: space.db, typename, show: false });
     }
 
     // Create objects.
@@ -69,10 +68,10 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
     },
   ],
   [
-    Diagram.Diagram.typename,
+    Sketch.Sketch.typename,
     async (space, n, cb) => {
       const objects = range(n).map(() => {
-        const obj = space.db.add(Diagram.make({ name: faker.commerce.productName() }));
+        const obj = space.db.add(Sketch.make({ name: faker.commerce.productName() }));
         return obj;
       });
 

package/src/components/SpaceGenerator/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-import { SpaceGenerator } from './SpaceGenerator';
-
-export default SpaceGenerator;
+export * from './presets';
+export * from './ObjectGenerator';

package/src/components/SpaceGenerator/presets.ts

@@ -4,13 +4,14 @@
 
 import * as Schema from 'effect/Schema';
 
-import { Agent, EntityExtraction, ResearchBlueprint } from '@dxos/assistant-toolkit';
+import { AgentPrompt, EntityExtraction, ResearchBlueprint } from '@dxos/assistant-toolkit';
 import { Prompt } from '@dxos/blueprints';
 import { type ComputeGraphModel, NODE_INPUT } from '@dxos/conductor';
-import { DXN, Filter, Key, Obj, Query, type QueryAST, Ref, Tag, Type } from '@dxos/echo';
-import { Trigger, serializeFunction } from '@dxos/functions';
+import { DXN, Feed, Filter, JsonSchema, Key, Obj, Query, type QueryAST, Ref, Tag } from '@dxos/echo';
+import { Trigger } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
-import { gmail } from '@dxos/plugin-inbox';
+import { Operation } from '@dxos/operation';
+import { InboxOperation } from '@dxos/plugin-inbox';
 import { Mailbox } from '@dxos/plugin-inbox/types';
 import { Markdown } from '@dxos/plugin-markdown/types';
 import { type Space } from '@dxos/react-client/echo';
@@ -20,24 +21,18 @@ import {
   createChat,
   createComputeGraph,
   createConstant,
+  createFeed,
   createFunction,
   createGpt,
-  createQueue,
   createRandom,
   createSurface,
   createTemplate,
   createText,
   createTrigger,
 } from '@dxos/react-ui-canvas-compute';
-import {
-  CanvasBoardType,
-  CanvasGraphModel,
-  pointMultiply,
-  pointsToRect,
-  rectToPoints,
-} from '@dxos/react-ui-canvas-editor';
-import { View } from '@dxos/schema';
-import { Message, Organization, Person, Project } from '@dxos/types';
+import { CanvasBoard, CanvasGraphModel, pointMultiply, pointsToRect, rectToPoints } from '@dxos/react-ui-canvas-editor';
+import { ViewModel } from '@dxos/schema';
+import { Message, Organization, Person, Pipeline } from '@dxos/types';
 import { range, trim } from '@dxos/util';
 
 import { type ObjectGenerator } from './ObjectGenerator';
@@ -57,7 +52,7 @@ export enum PresetName {
 }
 
 export const generator = () => ({
-  schemas: [CanvasBoardType, Trigger.Trigger] as any[],
+  schemas: [CanvasBoard.CanvasBoard, Trigger.Trigger] as any[],
   types: Object.values(PresetName).map((name) => ({ typename: name })),
   items: [
     [
@@ -79,8 +74,8 @@ export const generator = () => ({
 
           const tag = space.db.add(Tag.make({ label: 'Investor' }));
           const tagDxn = Obj.getDXN(tag).toString();
-          Obj.change(doc, (d) => {
-            Obj.getMeta(d).tags = [tagDxn];
+          Obj.change(doc, (obj) => {
+            Obj.getMeta(obj).tags = [tagDxn];
           });
 
           // space.db.add(
@@ -91,7 +86,9 @@ export const generator = () => ({
           //   }),
           // );
 
-          space.db.add(Obj.make(Person.Person, { fullName: 'Rich', organization: Ref.make(org) }, { tags: [tagDxn] }));
+          space.db.add(
+            Obj.make(Person.Person, { [Obj.Meta]: { tags: [tagDxn] }, fullName: 'Rich', organization: Ref.make(org) }),
+          );
           space.db.add(
             Obj.make(Person.Person, {
               fullName: 'Josiah',
@@ -120,7 +117,13 @@ export const generator = () => ({
     [
       PresetName.ORG_RESEARCH_PROJECT,
       async (space, n, cb) => {
-        const mailbox = await space.db.query(Filter.type(Mailbox.Mailbox)).first();
+        const mailboxes = await space.db.query(Filter.type(Mailbox.Mailbox)).run();
+        const mailbox = mailboxes[0];
+        invariant(mailbox, 'Mailbox not found');
+        const mailboxFeed = await mailbox.feed?.tryLoad();
+        invariant(mailboxFeed, 'Mailbox missing feed reference');
+        const queueDxn = Feed.getQueueDxn(mailboxFeed)?.toString();
+        invariant(queueDxn, 'Mailbox feed missing queue DXN key');
         const tag = await space.db.query(Filter.type(Tag.Tag, { label: 'Investor' })).first();
         const tagDxn = Obj.getDXN(tag).toString();
 
@@ -136,9 +139,9 @@ export const generator = () => ({
                 kind: 'timer',
                 cron: '* * * * *', // Every minute.
               },
-              function: Ref.make(serializeFunction(gmail.sync)),
+              function: Ref.make(Operation.serialize(InboxOperation.GoogleMailSync)),
               input: {
-                mailboxId: Obj.getDXN(mailbox).toString(),
+                mailbox: Ref.make(mailbox),
               },
             }),
           );
@@ -149,9 +152,9 @@ export const generator = () => ({
               // TODO(wittjosiah): Queue trigger doesn't support matching query of the column.
               spec: {
                 kind: 'queue',
-                queue: mailbox.queue.dxn.toString(),
+                queue: queueDxn,
               },
-              function: Ref.make(serializeFunction(EntityExtraction.extract)),
+              function: Ref.make(Operation.serialize(EntityExtraction)),
               input: {
                 source: '{{event.item}}',
               },
@@ -174,7 +177,7 @@ export const generator = () => ({
                 Create a research note for it at the end.
                 NOTE: Do mocked reseach (set mockSearch to true).
               `,
-              blueprints: [Ref.make(ResearchBlueprint)],
+              blueprints: [Ref.make(ResearchBlueprint.make())],
             }),
           );
 
@@ -187,7 +190,7 @@ export const generator = () => ({
                   ast: organizationsQuery.ast,
                 },
               },
-              function: Ref.make(serializeFunction(Agent.prompt)),
+              function: Ref.make(Operation.serialize(AgentPrompt)),
               input: {
                 prompt: Ref.make(researchPrompt),
                 input: '{{event.subject}}',
@@ -195,31 +198,31 @@ export const generator = () => ({
             }),
           );
 
-          const mailboxView = View.make({
+          const mailboxView = ViewModel.make({
             query: Query.select(
               Filter.type(Message.Message, {
                 properties: { labels: Filter.contains('investor') },
               }),
-            ).options({
-              queues: [mailbox.queue.dxn.toString()],
+            ).from({
+              queues: [queueDxn],
             }),
-            jsonSchema: Type.toJsonSchema(Message.Message),
+            jsonSchema: JsonSchema.toJsonSchema(Message.Message),
           });
-          const contactsView = View.make({
+          const contactsView = ViewModel.make({
             query: contactsQuery,
-            jsonSchema: Type.toJsonSchema(Person.Person),
+            jsonSchema: JsonSchema.toJsonSchema(Person.Person),
           });
-          const organizationsView = View.make({
+          const organizationsView = ViewModel.make({
             query: organizationsQuery,
-            jsonSchema: Type.toJsonSchema(Organization.Organization),
+            jsonSchema: JsonSchema.toJsonSchema(Organization.Organization),
           });
-          const notesView = View.make({
+          const notesView = ViewModel.make({
             query: notesQuery,
-            jsonSchema: Type.toJsonSchema(Markdown.Document),
+            jsonSchema: JsonSchema.toJsonSchema(Markdown.Document),
           });
 
           return space.db.add(
-            Project.make({
+            Pipeline.make({
               name: 'Investor Research',
               columns: [
                 {
@@ -313,7 +316,7 @@ export const generator = () => ({
             'subscription',
             (triggerSpec) =>
               (triggerSpec.query = {
-                ast: Query.select(Filter.typename('dxos.org/type/Chess')).ast as Obj.Mutable<QueryAST.Query>,
+                ast: Query.select(Filter.typename('org.dxos.type.chess')).ast as Obj.Mutable<QueryAST.Query>,
               }),
             'type',
           );
@@ -398,7 +401,7 @@ export const generator = () => ({
     //       const templateComputeNode = computeModel.nodes.find((n) => n.id === template.node);
     //       invariant(templateComputeNode, 'Template compute node was not created.');
     //       templateComputeNode.value = templateContent.join('\n');
-    //       templateComputeNode.inputSchema = Type.toJsonSchema(EmailTriggerOutput);
+    //       templateComputeNode.inputSchema = JsonSchema.toJsonSchema(EmailTriggerOutput);
 
     //       attachTrigger(functionTrigger, computeModel);
 
@@ -532,7 +535,7 @@ export const generator = () => ({
     //       invariant(templateComputeNode, 'Template compute node was not created.');
     //       templateComputeNode.value = templateContent.join('\n');
     //       const extendedSchema = Schema.extend(EmailTriggerOutput, Schema.Struct({ text: Schema.String }));
-    //       templateComputeNode.inputSchema = Type.toJsonSchema(extendedSchema);
+    //       templateComputeNode.inputSchema = JsonSchema.toJsonSchema(extendedSchema);
 
     //       attachTrigger(functionTrigger, computeModel);
 
@@ -615,7 +618,7 @@ export const generator = () => ({
             );
             const converter = canvasModel.createNode(createFunction(position({ x: 0, y: 0 })));
             const view = canvasModel.createNode(createText(position({ x: 12, y: 0 })));
-            const queue = canvasModel.createNode(createQueue(position({ x: 0, y: 12 })));
+            const queue = canvasModel.createNode(createFeed(position({ x: 0, y: 12 })));
 
             builder
               .createEdge({
@@ -771,7 +774,9 @@ const createQueueSinkPreset = <SpecType extends Trigger.Kind>(
   invariant(templateComputeNode, 'Template compute node was not created.');
   // NOTE: These are plain object mutations during model construction, not ECHO object mutations.
   templateComputeNode.value = ['{', '  "@type": "{{type}}",', '  "id": "@{{changeId}}"', '}'].join('\n');
-  templateComputeNode.inputSchema = Type.toJsonSchema(Schema.Struct({ type: Schema.String, changeId: Schema.String }));
+  templateComputeNode.inputSchema = JsonSchema.toJsonSchema(
+    Schema.Struct({ type: Schema.String, changeId: Schema.String }),
+  );
   attachTrigger(functionTrigger, computeModel);
 
   return { canvasModel, computeModel };
@@ -779,7 +784,7 @@ const createQueueSinkPreset = <SpecType extends Trigger.Kind>(
 
 const addToSpace = (name: string, space: Space, canvas: CanvasGraphModel, compute: ComputeGraphModel) => {
   return space.db.add(
-    Obj.make(CanvasBoardType, {
+    Obj.make(CanvasBoard.CanvasBoard, {
       name,
       computeGraph: Ref.make(compute.root),
       layout: canvas.graph,
@@ -799,7 +804,7 @@ const setupQueue = (
     }),
   );
   const queue = canvasModel.createNode(
-    createQueue(
+    createFeed(
       args?.queuePosition ? rawPosition(args.queuePosition) : position({ x: -3, y: 3, width: 14, height: 10 }),
     ),
   );
@@ -810,9 +815,9 @@ const setupQueue = (
 const attachTrigger = (functionTrigger: Trigger.Trigger | undefined, computeModel: ComputeGraphModel) => {
   invariant(functionTrigger);
   const inputNode = computeModel.nodes.find((node) => node.type === NODE_INPUT)!;
-  Obj.change(functionTrigger, (t) => {
-    t.function = Ref.make(computeModel.root);
-    t.inputNodeId = inputNode.id;
+  Obj.change(functionTrigger, (obj) => {
+    obj.function = Ref.make(computeModel.root);
+    obj.inputNodeId = inputNode.id;
   });
 };
 

package/src/components/index.ts

@@ -2,16 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-import { type FC } from 'react';
+import { type ComponentType, lazy } from 'react';
 
-import { type DebugGraphProps } from './DebugGraph';
+export const DebugSettings: ComponentType<any> = lazy(() => import('./DebugSettings'));
 
-export const DebugGraph: ReturnType<typeof lazy<FC<DebugGraphProps>>> = lazy(() => import('./DebugGraph'));
-export const DevtoolsOverviewContainer = lazy(() => import('./DevtoolsOverviewContainer'));
-export const SpaceGenerator = lazy(() => import('./SpaceGenerator'));
-
-export * from './DebugObjectPanel';
-export * from './DebugSettings';
-export * from './DebugStatus';
-export * from './Wireframe';
+export * from './SchemaTable';
+export * from './SpaceGenerator';

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

@@ -11,5 +11,3 @@ export type DebugGraphProps = { graph: Graph.Graph; root: string };
 export const DebugGraph: FC<DebugGraphProps> = ({ graph, root }) => {
   return <Tree data={Graph.toJSON(graph, root)} />;
 };
-
-export default DebugGraph;

package/src/containers/DebugGraph/index.ts

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

package/src/containers/DebugObjectPanel/DebugObjectPanel.tsx

@@ -0,0 +1,47 @@
+//
+// 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, Toolbar } 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.Toolbar asChild>
+          <Toolbar.Root />
+        </Panel.Toolbar>
+        <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 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;