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

package/src/components/SpaceGenerator/presets.ts

@@ -4,13 +4,13 @@
 
 import * as Schema from 'effect/Schema';
 
-import { Agent, EntityExtraction, ResearchBlueprint } from '@dxos/assistant-toolkit';
+import { AgentFunctions, EntityExtractionFunctions, 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 { DXN, Feed, Filter, JsonSchema, Key, Obj, Query, type QueryAST, Ref, Tag } from '@dxos/echo';
 import { Trigger, serializeFunction } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
-import { gmail } from '@dxos/plugin-inbox';
+import { GmailFunctions } 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';
@@ -29,15 +29,9 @@ import {
   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 +51,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: [
     [
@@ -91,7 +85,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 +116,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 +138,9 @@ export const generator = () => ({
                 kind: 'timer',
                 cron: '* * * * *', // Every minute.
               },
-              function: Ref.make(serializeFunction(gmail.sync)),
+              function: Ref.make(serializeFunction(GmailFunctions.Sync)),
               input: {
-                mailboxId: Obj.getDXN(mailbox).toString(),
+                mailbox: Ref.make(mailbox),
               },
             }),
           );
@@ -149,9 +151,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(serializeFunction(EntityExtractionFunctions.Extract)),
               input: {
                 source: '{{event.item}}',
               },
@@ -174,7 +176,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 +189,7 @@ export const generator = () => ({
                   ast: organizationsQuery.ast,
                 },
               },
-              function: Ref.make(serializeFunction(Agent.prompt)),
+              function: Ref.make(serializeFunction(AgentFunctions.Prompt)),
               input: {
                 prompt: Ref.make(researchPrompt),
                 input: '{{event.subject}}',
@@ -195,31 +197,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 +315,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 +400,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 +534,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);
 
@@ -771,7 +773,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 +783,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,

package/src/components/index.ts

@@ -2,16 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-import { type FC } from 'react';
-
-import { type DebugGraphProps } from './DebugGraph';
-
-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={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,17 +4,17 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useCapabilities } from '@dxos/app-framework/react';
+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 { Icon, IconButton, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
+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;
@@ -29,16 +29,17 @@ const StorageAdapters = {
 export type DebugSettingsComponentProps = {
   settings: DebugSettingsProps;
   onSettingsChange: (fn: (current: DebugSettingsProps) => DebugSettingsProps) => void;
+  logBuffer: LogBuffer;
 };
 
-export const DebugSettings = ({ settings, onSettingsChange }: DebugSettingsComponentProps) => {
+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(Common.Capability.FileUploader);
+  const [upload] = useCapabilities(AppCapabilities.FileUploader);
 
   useEffect(() => {
     void Storage().then((config) => setStorageConfig(config));
@@ -80,6 +81,13 @@ export const DebugSettings = ({ settings, onSettingsChange }: DebugSettingsCompo
     }
   };
 
+  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();
@@ -97,31 +105,39 @@ export const DebugSettings = ({ settings, onSettingsChange }: DebugSettingsCompo
   };
 
   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) => onSettingsChange((s) => ({ ...s, wireframe: !!checked }))}
             />
-          </ControlItemInput>
-          <ControlItemInput title={t('settings download diagnostics')}>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings download diagnostics')}>
             <IconButton
               icon='ph--download-simple--regular'
               iconOnly
               label={t('settings download diagnostics')}
               onClick={handleDownload}
             />
-          </ControlItemInput>
-          <ControlItemInput title={t('settings repair')}>
+          </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>
+          </Settings.ItemInput>
 
           {/* TODO(burdon): Move to layout? */}
           {toast && (
@@ -136,7 +152,7 @@ export const DebugSettings = ({ settings, onSettingsChange }: DebugSettingsCompo
             </Toast.Root>
           )}
 
-          <ControlItemInput title={t('settings choose storage adaptor')}>
+          <Settings.ItemInput title={t('settings choose storage adaptor')}>
             <Select.Root
               value={
                 Object.entries(StorageAdapters).find(
@@ -168,10 +184,10 @@ export const DebugSettings = ({ settings, onSettingsChange }: DebugSettingsCompo
                 </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,55 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { ObjectsTree } from '@dxos/devtools';
+import { type Database, Filter, Query } from '@dxos/echo';
+import type { ObjectId } from '@dxos/keys';
+import { useActiveSpace } from '@dxos/plugin-space';
+import { 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 space = useActiveSpace();
+  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/react';
+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/{components → containers}/SpaceGenerator/SpaceGenerator.tsx

@@ -4,22 +4,20 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { useOperationInvoker } from '@dxos/app-framework/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 { Sketch } from '@dxos/plugin-sketch/types';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { IconButton, Input, Toolbar, useAsyncEffect } from '@dxos/react-ui';
+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, createGenerator, staticGenerators } from './ObjectGenerator';
-import { generator } from './presets';
-import { SchemaTable } from './SchemaTable';
+import { type ObjectGenerator, SchemaTable, createGenerator, generator, staticGenerators } from '../../components';
 
 export type SpaceGeneratorProps = {
   space: Space;
@@ -29,8 +27,8 @@ export type SpaceGeneratorProps = {
 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.Obj.Any[] = [Organization.Organization, Person.Person, Task.Task];
+  const staticTypes = [Markdown.Document, Sketch.Sketch, 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(), []);
@@ -93,35 +91,37 @@ export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps)
   );
 
   return (
-    <div role='none' className='flex flex-col grow overflow-hidden'>
-      <Toolbar.Root classNames='border-be border-subduedSeparator'>
-        <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' onClick={updateInfo} />
-        <Toolbar.Separator variant='gap' />
-        <Input.Root>
-          <Input.TextInput
-            type='number'
-            min={1}
-            max={100}
-            placeholder={'Count'}
-            classNames='!w-[4rem] !text-right'
-            size={8}
-            value={count}
-            onChange={(ev) => setCount(parseInt(ev.target.value))}
-          />
-        </Input.Root>
-      </Toolbar.Root>
-
-      <div className='flex flex-col overflow-y-auto divide-y divide-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} />
-
-        <div>
-          <SyntaxHighlighter language='json' classNames='text-xs'>
-            {JSON.stringify({ space, ...info }, jsonKeyReplacer({ truncate: true }), 2)}
-          </SyntaxHighlighter>
-        </div>
-      </div>
-    </div>
+    <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;