@dxos/plugin-debug 0.8.4-main.937b3ca → 0.8.4-main.abd8ff62ef

package/src/components/SpaceGenerator/presets.ts

@@ -4,13 +4,12 @@
 
 import * as Schema from 'effect/Schema';
 
-import { Agent, EntityExtraction, ResearchBlueprint } from '@dxos/assistant-toolkit';
-import { Prompt } from '@dxos/blueprints';
+import { AgentPrompt, WebSearchBlueprint } from '@dxos/assistant-toolkit';
+import { Routine, Trigger, Operation } from '@dxos/compute';
 import { type ComputeGraphModel, NODE_INPUT } from '@dxos/conductor';
-import { DXN, Filter, Key, Obj, Query, 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 { invariant } from '@dxos/invariant';
-import { gmail } from '@dxos/plugin-inbox';
+import { InboxOperation } from '@dxos/plugin-inbox/operations';
 import { Mailbox } from '@dxos/plugin-inbox/types';
 import { Markdown } from '@dxos/plugin-markdown/types';
 import { type Space } from '@dxos/react-client/echo';
@@ -20,24 +19,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 +50,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 +72,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.update(doc, (doc) => {
+            Obj.getMeta(doc).tags = [tagDxn];
           });
 
           // space.db.add(
@@ -91,7 +84,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 +115,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();
 
@@ -132,34 +133,16 @@ export const generator = () => ({
           space.db.add(
             Trigger.make({
               enabled: true,
-              spec: {
-                kind: 'timer',
-                cron: '* * * * *', // Every minute.
-              },
-              function: Ref.make(serializeFunction(gmail.sync)),
+              spec: Trigger.specTimer('* * * * *'), // Every minute.
+              function: Ref.make(Operation.serialize(InboxOperation.GoogleMailSync)),
               input: {
-                mailboxId: Obj.getDXN(mailbox).toString(),
-              },
-            }),
-          );
-
-          space.db.add(
-            Trigger.make({
-              enabled: true,
-              // TODO(wittjosiah): Queue trigger doesn't support matching query of the column.
-              spec: {
-                kind: 'queue',
-                queue: mailbox.queue.dxn.toString(),
-              },
-              function: Ref.make(serializeFunction(EntityExtraction.extract)),
-              input: {
-                source: '{{event.item}}',
+                mailbox: Ref.make(mailbox),
               },
             }),
           );
 
           const researchPrompt = space.db.add(
-            Prompt.make({
+            Routine.make({
               name: 'Research',
               description: 'Research organization',
               input: Schema.Struct({
@@ -174,20 +157,15 @@ 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(WebSearchBlueprint.make())],
             }),
           );
 
           space.db.add(
             Trigger.make({
               enabled: true,
-              spec: {
-                kind: 'subscription',
-                query: {
-                  ast: organizationsQuery.ast,
-                },
-              },
-              function: Ref.make(serializeFunction(Agent.prompt)),
+              spec: Trigger.specSubscription(organizationsQuery),
+              function: Ref.make(Operation.serialize(AgentPrompt)),
               input: {
                 prompt: Ref.make(researchPrompt),
                 input: '{{event.subject}}',
@@ -195,31 +173,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 +291,7 @@ export const generator = () => ({
             'subscription',
             (triggerSpec) =>
               (triggerSpec.query = {
-                ast: Query.select(Filter.typename('dxos.org/type/Chess')).ast,
+                ast: Query.select(Filter.typename('org.dxos.type.chess')).ast as Obj.Mutable<QueryAST.Query>,
               }),
             'type',
           );
@@ -398,7 +376,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 +510,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 +593,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({
@@ -712,7 +690,7 @@ export const generator = () => ({
 const createQueueSinkPreset = <SpecType extends Trigger.Kind>(
   space: Space,
   triggerKind: SpecType,
-  initSpec: (spec: Extract<Trigger.Spec, { kind: SpecType }>) => void,
+  initSpec: (spec: Obj.Mutable<Extract<Trigger.Spec, { kind: SpecType }>>) => void,
   triggerOutputName: string,
 ) => {
   const canvasModel = CanvasGraphModel.create<ComputeShape>();
@@ -760,7 +738,9 @@ const createQueueSinkPreset = <SpecType extends Trigger.Kind>(
     functionTrigger = triggerShape.functionTrigger!.target!;
     const triggerSpec = functionTrigger.spec;
     invariant(triggerSpec && triggerSpec.kind === triggerKind, 'No trigger spec.');
-    initSpec(triggerSpec as any);
+    Obj.update(functionTrigger, (functionTrigger) => {
+      initSpec(functionTrigger.spec as any);
+    });
   });
 
   const computeModel = createComputeGraph(canvasModel);
@@ -769,7 +749,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 };
@@ -777,7 +759,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,
@@ -797,7 +779,7 @@ const setupQueue = (
     }),
   );
   const queue = canvasModel.createNode(
-    createQueue(
+    createFeed(
       args?.queuePosition ? rawPosition(args.queuePosition) : position({ x: -3, y: 3, width: 14, height: 10 }),
     ),
   );
@@ -808,9 +790,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.update(functionTrigger, (functionTrigger) => {
+    functionTrigger.function = Ref.make(computeModel.root);
+    functionTrigger.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

@@ -2,14 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type FC } from 'react';
+import React from 'react';
 
 import { Tree } from '@dxos/devtools';
 import { Graph } from '@dxos/plugin-graph';
 
 export type DebugGraphProps = { graph: Graph.Graph; root: string };
-export const DebugGraph: FC<DebugGraphProps> = ({ graph, root }) => {
+
+export const DebugGraph = ({ graph, root }: DebugGraphProps) => {
   return <Tree data={Graph.toJSON(graph, root)} />;
 };
-
-export default DebugGraph;

package/src/containers/DebugGraph/index.ts

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

package/src/containers/DebugObjectPanel/DebugObjectPanel.tsx

@@ -0,0 +1,76 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useMemo, useState } from 'react';
+
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { ObjectsTree } from '@dxos/devtools';
+import { Filter, Json, Obj, Query } from '@dxos/echo';
+import type { ObjectId } from '@dxos/keys';
+import { useQuery } from '@dxos/react-client/echo';
+import { Clipboard, Input, Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
+import { mx } from '@dxos/ui-theme';
+
+export type DebugObjectPanelProps = Pick<
+  AppSurface.ObjectArticleProps<Obj.Unknown, {}, Obj.Unknown>,
+  'role' | 'companionTo'
+>;
+
+export const DebugObjectPanel = ({ role, companionTo }: DebugObjectPanelProps) => {
+  const db = Obj.getDatabase(companionTo);
+  const [selectedId, setSelectedId] = useState<ObjectId | null>(null);
+  const [depth, setDepth] = useState(0);
+  const [selectedObject] = useQuery(
+    db,
+    Query.select(Filter.id(selectedId ?? companionTo.id)).options({ deleted: 'include' }),
+  );
+  const refReplacer = useMemo(() => (db ? Json.createRefReplacer({ db, depth }) : undefined), [db, depth]);
+
+  return (
+    <Clipboard.Provider>
+      <Panel.Root role={role}>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root />
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <div role='none' className={mx('grid divide-y divide-separator', db && 'grid-rows-[1fr_2fr]')}>
+            {db && (
+              <ScrollArea.Root>
+                <ScrollArea.Viewport>
+                  <ObjectsTree db={db} root={companionTo} onSelect={(entity) => setSelectedId(entity.id)} />
+                </ScrollArea.Viewport>
+              </ScrollArea.Root>
+            )}
+            <Syntax.Root data={selectedObject} replacer={refReplacer}>
+              <Panel.Root>
+                <Panel.Toolbar asChild>
+                  <Toolbar.Root classNames='grid grid-cols-[1fr_3rem]'>
+                    <Syntax.Filter />
+                    <Input.Root>
+                      <Input.TextInput
+                        variant='subdued'
+                        type='number'
+                        min={0}
+                        step={1}
+                        aria-label='Ref depth'
+                        value={depth}
+                        onChange={(event) => setDepth(Math.max(0, Number(event.target.value) || 0))}
+                      />
+                    </Input.Root>
+                  </Toolbar.Root>
+                </Panel.Toolbar>
+                <Panel.Content asChild>
+                  <Syntax.Viewport>
+                    <Syntax.Code />
+                  </Syntax.Viewport>
+                </Panel.Content>
+              </Panel.Root>
+            </Syntax.Root>
+          </div>
+        </Panel.Content>
+      </Panel.Root>
+    </Clipboard.Provider>
+  );
+};

package/src/containers/DebugObjectPanel/index.ts

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

package/src/containers/DebugSpaceObjectsPanel/DebugSpaceObjectsPanel.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { ObjectsTree } from '@dxos/devtools';
+import { Filter, Query } from '@dxos/echo';
+import { type ObjectId } from '@dxos/keys';
+import { useQuery } from '@dxos/react-client/echo';
+import { Clipboard, Grid, Input, Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+
+export type DebugSpaceObjectsPanelProps = AppSurface.SpaceArticleProps;
+
+export const DebugSpaceObjectsPanel = ({ space }: DebugSpaceObjectsPanelProps) => {
+  const [selectedId, setSelectedId] = useState<ObjectId | null>(null);
+  const [selectedObject] = useQuery(
+    space.db,
+    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={space.db} onSelect={(entity) => setSelectedId(entity.id)} />
+              </ScrollArea.Viewport>
+            </ScrollArea.Root>
+            {selectedObject && <JsonHighlighter classNames='p-1' data={selectedObject} />}
+          </Grid>
+        </Panel.Content>
+      </Panel.Root>
+    </Clipboard.Provider>
+  );
+};

package/src/containers/DebugSpaceObjectsPanel/index.ts

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

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

@@ -5,11 +5,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import { TimeoutError } from '@dxos/async';
-import { useActiveSpace } from '@dxos/plugin-space';
-import { StatusBar } from '@dxos/plugin-status-bar';
+import { StatusBar } from '@dxos/plugin-status-bar/components';
 import { ConnectionState } from '@dxos/protocols/proto/dxos/client/services';
 import { useNetworkStatus } from '@dxos/react-client/mesh';
-import { Icon } from '@dxos/react-ui';
+import { IconButton } from '@dxos/react-ui';
 
 const styles = {
   success: 'text-sky-300 dark:text-green-700',
@@ -89,14 +88,20 @@ const ErrorIndicator = () => {
 
   if (errorRef.current) {
     return (
-      <StatusBar.Button title={errorRef.current.message} onClick={handleReset}>
-        <Icon icon='ph--warning-circle--duotone' size={4} classNames={styles.error} />
-      </StatusBar.Button>
+      <StatusBar.Item>
+        <IconButton
+          icon='ph--warning-circle--duotone'
+          iconOnly
+          label={errorRef.current.message}
+          classNames={styles.error}
+          onClick={handleReset}
+        />
+      </StatusBar.Item>
     );
   } else {
     return (
-      <StatusBar.Item title='No errors.'>
-        <Icon icon='ph--check--regular' size={4} />
+      <StatusBar.Item>
+        <IconButton variant='ghost' icon='ph--check--regular' iconOnly label='No errors.' />
       </StatusBar.Item>
     );
   }
@@ -114,14 +119,20 @@ const SwarmIndicator = () => {
 
   if (state === 0) {
     return (
-      <StatusBar.Item title='Connected to swarm.'>
-        <Icon icon='ph--lightning--regular' size={4} />
+      <StatusBar.Item>
+        <IconButton variant='ghost' icon='ph--lightning--regular' iconOnly label='Connected to swarm.' />
       </StatusBar.Item>
     );
   } else {
     return (
-      <StatusBar.Item title='Disconnected from swarm.'>
-        <Icon icon='ph--lightning-slash--regular' size={4} classNames={styles.warning} />
+      <StatusBar.Item>
+        <IconButton
+          variant='ghost'
+          icon='ph--lightning-slash--regular'
+          iconOnly
+          label='Disconnected from swarm.'
+          classNames={styles.warning}
+        />
       </StatusBar.Item>
     );
   }
@@ -133,7 +144,6 @@ const SwarmIndicator = () => {
 // TODO(burdon): Merge with SaveStatus.
 const SavingIndicator = () => {
   const [state, _setState] = useState(0);
-  const _space = useActiveSpace();
   // TODO(dmaretskyi): Fix this when we have save status for automerge.
   // useEffect(() => {
   //   if (!space) {
@@ -156,21 +166,33 @@ const SavingIndicator = () => {
   switch (state) {
     case 2:
       return (
-        <StatusBar.Item title='Edit not saved.'>
-          <Icon icon='ph--circle--duotone' size={4} classNames={styles.warning} />
+        <StatusBar.Item>
+          <IconButton
+            variant='ghost'
+            icon='ph--circle--duotone'
+            iconOnly
+            label='Edit not saved.'
+            classNames={styles.warning}
+          />
         </StatusBar.Item>
       );
     case 1:
       return (
-        <StatusBar.Item title='Saving...'>
-          <Icon icon='ph--circle--duotone' size={4} classNames={styles.success} />
+        <StatusBar.Item>
+          <IconButton
+            variant='ghost'
+            icon='ph--circle--duotone'
+            iconOnly
+            label='Saving...'
+            classNames={styles.success}
+          />
         </StatusBar.Item>
       );
     case 0:
     default:
       return (
-        <StatusBar.Item title='Modified indicator.'>
-          <Icon icon='ph--circle--duotone' size={4} />
+        <StatusBar.Item>
+          <IconButton variant='ghost' icon='ph--circle--duotone' iconOnly label='Modified indicator.' />
         </StatusBar.Item>
       );
   }

package/src/containers/DebugStatus/index.ts

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

package/src/containers/DevtoolsOverviewContainer/DevtoolsOverviewContainer.tsx

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Surface } from '@dxos/app-framework/ui';
+import { StatsPanel, useStats } from '@dxos/devtools';
+
+export const DevtoolsOverviewContainer = () => {
+  const [stats, refreshStats] = useStats();
+  const surfaceProfilerStats = Surface.useProfilerStats();
+  const clearSurfaceProfiler = Surface.useProfilerClear();
+
+  return (
+    <StatsPanel
+      stats={stats}
+      surfaceProfilerStats={surfaceProfilerStats}
+      onRefresh={refreshStats}
+      onClearSurfaceProfiler={clearSurfaceProfiler}
+    >
+      <Surface.Surface role='devtools-overview' />
+    </StatsPanel>
+  );
+};

package/src/containers/DevtoolsOverviewContainer/index.ts

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