@dxos/plugin-script 0.8.4-main.3eb6e50203 → 0.8.4-main.4a85c3132b

package/src/components/TestPanel/TestPanel.tsx

@@ -7,7 +7,7 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { log } from '@dxos/log';
 import { Avatar, Icon, Input, ScrollArea, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { errorText, mx } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
 
@@ -174,7 +174,7 @@ export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
   };
 
   return (
-    <div className={mx('flex flex-col bs-full overflow-hidden', classNames)}>
+    <div className={mx('flex flex-col h-full overflow-hidden', classNames)}>
       {/* TODO(burdon): Replace with Thread. */}
       <MessageThread ref={scrollerRef} state={state} result={result} history={history} />
       {/* TODO(burdon): Replace with Form based on the function's input schema. */}
@@ -219,7 +219,7 @@ type MessageThreadProps = {
 const MessageThread = forwardRef<HTMLDivElement, MessageThreadProps>(
   ({ state, history, result }: MessageThreadProps, forwardedRef) => {
     return (
-      <ScrollArea.Root orientation='vertical' classNames='bs-full' ref={forwardedRef}>
+      <ScrollArea.Root orientation='vertical' classNames='h-full' ref={forwardedRef}>
         <ScrollArea.Viewport classNames='gap-6 p-2'>
           {history.map((message, i) => (
             <div key={i} className='grid grid-cols-[2rem_1fr_2rem]'>
@@ -250,13 +250,13 @@ const MessageThread = forwardRef<HTMLDivElement, MessageThreadProps>(
 
 const MessageItem = ({ classNames, message }: ThemedClassName<{ message: Message }>) => {
   const { type, text, data, error } = message;
-  const wrapper = 'p-1 pli-2 rounded-md bg-hoverSurface overflow-auto';
+  const wrapper = 'p-1 px-2 rounded-md bg-hover-surface overflow-auto';
   return (
     <div className={mx('flex', type === 'request' ? 'ml-[1rem] justify-end' : 'mr-[1rem]', classNames)}>
-      {error && <div className={mx(wrapper, 'whitespace-pre', errorText)}>{String(error)}</div>}
+      {error && <div className={mx(wrapper, 'whitespace-pre text-error-text')}>{String(error)}</div>}
 
       {text !== undefined && (
-        <div className={mx(wrapper, type === 'request' && 'bg-primary-400 dark:bg-primary-600')}>
+        <div className={mx(wrapper, type === 'request' && 'bg-primary-500 dark:bg-primary-600')}>
           {text || '\u00D8'}
         </div>
       )}

package/src/components/TestPanel/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './TestContainer';
 export * from './TestPanel';

package/src/components/TypescriptEditor/TypescriptEditor.stories.tsx

@@ -7,8 +7,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import { createDocAccessor } from '@dxos/echo-db';
 import { createObject } from '@dxos/react-client/echo';
-import { Toolbar } from '@dxos/react-ui';
-import { Layout } from '@dxos/react-ui';
+import { Panel, Toolbar } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Json } from '@dxos/react-ui-syntax-highlighter';
 import { createDataExtensions } from '@dxos/ui-editor';
@@ -66,24 +65,27 @@ const DefaultStory = (props: TypescriptEditorProps) => {
   }, [object]);
 
   return (
-    <Layout.Main toolbar>
-      {/* <ScriptToolbar script={script} state={{}} /> */}
-      <Toolbar.Root>
-        <Toolbar.Button onClick={handleRun}>Run</Toolbar.Button>
-      </Toolbar.Root>
-      <div role='none' className='grid grid-rows-[1fr_min-content] bs-full overflow-hidden text-sm'>
-        <TypescriptEditor {...props} initialValue={object.content} extensions={extensions} />
-        <Json data={result} classNames='shrink-0 p-2 border-bs border-subduedSeparator' />
-      </div>
-    </Layout.Main>
+    <Panel.Root>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root>
+          <Toolbar.Button onClick={handleRun}>Run</Toolbar.Button>
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content>
+        <div role='none' className='grid grid-rows-[1fr_min-content] h-full overflow-hidden text-sm'>
+          <TypescriptEditor {...props} initialValue={object.content} extensions={extensions} />
+          <Json data={result} classNames='shrink-0 p-2 border-y border-subdued-separator' />
+        </div>
+      </Panel.Content>
+    </Panel.Root>
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-script/TypescriptEditor',
+  title: 'plugins/plugin-script/components/TypescriptEditor',
   component: TypescriptEditor,
   render: DefaultStory,
-  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'is-proseMaxWidth' })],
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-prose-max-width' })],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -129,7 +129,7 @@ const createTooltipRenderer = (themeMode: ThemeMode) => {
       ) ?? [];
     return {
       dom: Domino.of('div')
-        .classNames('xs:max-is-80 max-is-lg p-1 bg-baseSurface rounded border border-separator')
+        .classNames('xs:max-w-80 max-w-lg p-1 bg-base-surface rounded-sm border border-separator')
         .children(...children).root,
     };
   };

package/src/components/index.ts

@@ -2,14 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-
+export * from './FrameContainer';
 export * from './NotebookStack';
-export * from './Settings';
+export * from './QueryEditor';
+export * from './ScriptToolbar';
 export * from './TestPanel';
-
-export { DEPLOYMENT_DIALOG } from './DeploymentDialog';
-
-export const ScriptContainer = lazy(() => import('./ScriptContainer'));
-export const DeploymentDialog = lazy(() => import('./DeploymentDialog'));
-export const NotebookContainer = lazy(() => import('./NotebookContainer'));
+export * from './TypescriptEditor';

package/src/constants.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { meta } from './meta';
+
+export const DEPLOYMENT_DIALOG = `${meta.id}/deployment/dialog`;

package/src/{components → containers}/DeploymentDialog/DeploymentDialog.stories.tsx

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
-import { OperationPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj } from '@dxos/echo';
 import { ClientPlugin } from '@dxos/plugin-client';
@@ -17,7 +17,6 @@ import { translations } from '../../translations';
 
 import { DeploymentDialog } from './DeploymentDialog';
 
-// TODO(wittjosiah): ECHO objects don't work when passed via Storybook args.
 const DeploymentDialogStory = () => {
   const accessToken = useMemo(
     () =>
@@ -43,14 +42,14 @@ const DeploymentDialogStory = () => {
 };
 
 const meta = {
-  title: 'plugins/plugin-script/DeploymentDialog',
+  title: 'plugins/plugin-script/containers/DeploymentDialog',
   component: DeploymentDialogStory,
   parameters: { translations },
   // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
   decorators: [
     withTheme(),
     withPluginManager({
-      plugins: [OperationPlugin(), ClientPlugin({})],
+      plugins: [OperationPlugin(), RuntimePlugin(), ClientPlugin({})],
     }),
   ],
 } satisfies Meta<typeof DeploymentDialogStory>;

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

@@ -14,8 +14,6 @@ import { useCreateAndDeployScriptTemplates } from '../../hooks';
 import { meta } from '../../meta';
 import { type Template } from '../../templates';
 
-export const DEPLOYMENT_DIALOG = `${meta.id}/deployment/dialog`;
-
 // TODO(ZaymonFC):
 //  - Show activity and feedback to the user.
 //  - Only take an array of templateIds and get the name from the data.
@@ -69,14 +67,14 @@ export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDia
           <IconButton icon='ph--x--regular' size={4} label='Close' iconOnly density='fine' variant='ghost' />
         </Dialog.Close>
       </div>
-      <div role='none' className='plb-4'>
+      <div role='none' className='py-4'>
         {/* TODO: Implement deployment logic and UI. */}
         <p>
           {t('deployment dialog scripts found message', {
             count: scriptTemplates.length,
           })}
         </p>
-        <ul className='pbs-2'>
+        <ul className='pt-2'>
           {scriptTemplates.map((template) => {
             return <li key={template.id}>{template.name}</li>;
           })}
@@ -99,5 +97,3 @@ export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDia
     </Dialog.Content>
   );
 };
-
-export default DeploymentDialog;

package/src/containers/DeploymentDialog/index.ts

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

package/src/{components → containers/NotebookContainer}/NotebookContainer.stories.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 
 import { SERVICES_CONFIG } from '@dxos/ai/testing';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Agent } from '@dxos/assistant-toolkit';
+import { AgentFunctions } from '@dxos/assistant-toolkit';
 import { Filter } from '@dxos/echo';
 import { Function, serializeFunction } from '@dxos/functions';
 import { AssistantPlugin } from '@dxos/plugin-assistant';
@@ -22,14 +22,14 @@ import { useQuery } from '@dxos/react-client/echo';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { DataTypes } from '@dxos/schema';
 
-import { createNotebook } from '../testing';
-import { translations } from '../translations';
-import { Notebook } from '../types';
+import { createNotebook } from '../../testing';
+import { translations } from '../../translations';
+import { Notebook } from '../../types';
 
 import { NotebookContainer } from './NotebookContainer';
 
 const meta: Meta<typeof NotebookContainer> = {
-  title: 'plugins/plugin-script/NotebookContainer',
+  title: 'plugins/plugin-script/containers/NotebookContainer',
   component: NotebookContainer,
   render: (args) => {
     const client = useClient();
@@ -39,7 +39,7 @@ const meta: Meta<typeof NotebookContainer> = {
   },
   decorators: [
     withTheme(),
-    withLayout({ layout: 'column', classNames: 'is-proseMaxWidth' }),
+    withLayout({ layout: 'column', classNames: 'w-prose-max-width' }),
     withPluginManager({
       plugins: [
         ...corePlugins(),
@@ -60,7 +60,7 @@ const meta: Meta<typeof NotebookContainer> = {
 
               space.db.add(createNotebook());
               space.db.add(Markdown.make({ content: '# Hello World' }));
-              space.db.add(serializeFunction(Agent.prompt));
+              space.db.add(serializeFunction(AgentFunctions.Prompt));
             }),
         }),
         AssistantPlugin(),

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

@@ -10,7 +10,7 @@ import type * as Types from 'effect/Types';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 
 import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
-import { Agent } from '@dxos/assistant-toolkit';
+import { AgentFunctions } from '@dxos/assistant-toolkit';
 import { Blueprint, Prompt } from '@dxos/blueprints';
 import { Filter, Obj, Query, Ref } from '@dxos/echo';
 import { QueryBuilder } from '@dxos/echo-query';
@@ -19,20 +19,21 @@ import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { useComputeRuntimeCallback } from '@dxos/plugin-automation';
 import { Graph } from '@dxos/plugin-explorer/types';
-import { DropdownMenu, IconButton, Toolbar, useTranslation } from '@dxos/react-ui';
-import { Layout } from '@dxos/react-ui';
+import { DropdownMenu, IconButton, Panel, Toolbar, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { Text, View } from '@dxos/schema';
+import { Text, ViewModel } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { meta } from '../meta';
-import { ComputeGraph } from '../notebook';
-import { type Notebook } from '../types';
+import { NotebookMenu, NotebookStack, type NotebookStackProps, type TypescriptEditorProps } from '../../components';
+import { meta } from '../../meta';
+import { ComputeGraph } from '../../notebook';
+import { type Notebook } from '../../types';
 
-import { NotebookMenu, NotebookStack, type NotebookStackProps } from './NotebookStack';
-import { type TypescriptEditorProps } from './TypescriptEditor';
-
-const INCLUDE_BLUEPRINTS = ['dxos.org/blueprint/assistant', 'dxos.org/blueprint/markdown'];
+const INCLUDE_BLUEPRINTS = [
+  'dxos.org/blueprint/assistant',
+  'dxos.org/blueprint/database',
+  'dxos.org/blueprint/markdown',
+];
 
 // TODO(burdon): Support calling named deployed functions (as with sheet).
 
@@ -63,7 +64,7 @@ export const NotebookContainer = ({ role, subject: notebook, env }: NotebookCont
             const ast = Query.select(filter).ast;
             const graph = cell.graph?.target;
             if (!graph) {
-              const { view } = await View.makeFromDatabase({ db });
+              const { view } = await ViewModel.makeFromDatabase({ db });
               const newGraph = Graph.make({ query: { ast }, view });
               Obj.change(notebook!, (n) => {
                 const c = n.cells.find((c) => c.id === cell.id);
@@ -189,25 +190,26 @@ export const NotebookContainer = ({ role, subject: notebook, env }: NotebookCont
   );
 
   return (
-    <Layout.Main role={role} toolbar>
-      <Toolbar.Root disabled={!hasAttention} textBlockWidth>
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger asChild>
-            <IconButton icon='ph--plus--regular' iconOnly label={t('notebook cell insert label')} />
-          </DropdownMenu.Trigger>
-          <NotebookMenu onCellInsert={handleCellInsert} />
-        </DropdownMenu.Root>
-        <Toolbar.IconButton
-          icon='ph--play--fill'
-          iconOnly
-          label={t('compute label')}
-          classNames='text-green-500'
-          onClick={handleCompute}
-        />
-      </Toolbar.Root>
-      <div role='none' className='flex bs-full overflow-hidden -mis-[1px] -mie-[1px]'>
+    <Panel.Root role={role} className='dx-article'>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root disabled={!hasAttention} textBlockWidth>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>
+              <IconButton icon='ph--plus--regular' iconOnly label={t('notebook cell insert label')} />
+            </DropdownMenu.Trigger>
+            <NotebookMenu onCellInsert={handleCellInsert} />
+          </DropdownMenu.Root>
+          <Toolbar.IconButton
+            icon='ph--play--fill'
+            iconOnly
+            label={t('compute label')}
+            classNames='text-green-500'
+            onClick={handleCompute}
+          />
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content asChild>
         <NotebookStack
-          classNames='container-max-width border-l border-r border-subduedSeparator'
           db={db}
           notebook={notebook}
           graph={graph}
@@ -217,13 +219,11 @@ export const NotebookContainer = ({ role, subject: notebook, env }: NotebookCont
           onCellInsert={handleCellInsert}
           onCellDelete={handleCellDelete}
         />
-      </div>
-    </Layout.Main>
+      </Panel.Content>
+    </Panel.Root>
   );
 };
 
-export default NotebookContainer;
-
 // TODO(wittjosiah): Factor out. Copied from PromptArticle in plugin-assistant.
 const runPrompt = Effect.fn(function* ({
   prompt,
@@ -234,10 +234,7 @@ const runPrompt = Effect.fn(function* ({
   input: Record<string, any>;
   onResult: (result: string) => void;
 }) {
-  const inputData: FunctionDefinition.Input<typeof Agent.prompt> = {
-    prompt,
-    input,
-  };
+  const inputData: FunctionDefinition.Input<typeof AgentFunctions.Prompt> = { prompt, input };
   const tracer = yield* TracingService;
   const trace = yield* tracer.traceInvocationStart({
     target: undefined,
@@ -247,7 +244,7 @@ const runPrompt = Effect.fn(function* ({
   });
 
   // Invoke the function.
-  const result = yield* FunctionInvocationService.invokeFunction(Agent.prompt, inputData).pipe(
+  const result = yield* FunctionInvocationService.invokeFunction(AgentFunctions.Prompt, inputData).pipe(
     Effect.provide(trace.invocationTraceQueue ? TracingService.layerInvocation(trace) : TracingService.layerNoop),
     Effect.exit,
   );

package/src/containers/NotebookContainer/index.ts

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

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

@@ -10,14 +10,12 @@ import { createDocAccessor } from '@dxos/echo-db';
 import { type Script } from '@dxos/functions';
 import { getSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { Layout } from '@dxos/react-ui';
+import { Panel } from '@dxos/react-ui';
 import { createDataExtensions, listener, stackItemContentEditorClassNames } from '@dxos/ui-editor';
 
-import { useDeployState, useToolbarState } from '../hooks';
-import { type ScriptSettings } from '../types';
-
-import { ScriptToolbar } from './ScriptToolbar';
-import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
+import { ScriptToolbar, TypescriptEditor, type TypescriptEditorProps } from '../../components';
+import { useDeployState, useToolbarState } from '../../hooks';
+import { type ScriptSettings } from '../../types';
 
 export type ScriptEditorProps = SurfaceComponentProps<
   Script.Script,
@@ -66,19 +64,21 @@ export const ScriptContainer = ({
   }
 
   return (
-    <Layout.Main role={role} toolbar>
-      <ScriptToolbar state={state} role={role} script={script} />
-      <TypescriptEditor
-        id={script.id}
-        env={env}
-        initialValue={script.source?.target?.content}
-        extensions={extensions}
-        classNames={stackItemContentEditorClassNames(role)}
-        inputMode={settings.editorInputMode}
-        toolbar
-      />
-    </Layout.Main>
+    <Panel.Root role={role} className='dx-article'>
+      <Panel.Toolbar asChild>
+        <ScriptToolbar state={state} role={role} script={script} />
+      </Panel.Toolbar>
+      <Panel.Content asChild>
+        <TypescriptEditor
+          id={script.id}
+          env={env}
+          initialValue={script.source?.target?.content}
+          extensions={extensions}
+          classNames={stackItemContentEditorClassNames(role)}
+          inputMode={settings.editorInputMode}
+          toolbar
+        />
+      </Panel.Content>
+    </Panel.Root>
   );
 };
-
-export default ScriptContainer;

package/src/containers/ScriptContainer/index.ts

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

package/src/{components/Settings → containers/ScriptObjectSettings}/ScriptObjectSettings.tsx

@@ -35,24 +35,6 @@ export const ScriptObjectSettings = ({ object }: ScriptObjectSettingsProps) => {
   );
 };
 
-export const ScriptProperties = ({ object }: ScriptObjectSettingsProps) => {
-  const { t } = useTranslation(meta.id);
-  return (
-    <Input.Root>
-      <Input.Label>{t('description label')}</Input.Label>
-      <Input.TextInput
-        placeholder={t('description placeholder')}
-        value={object.description ?? ''}
-        onChange={(event) => {
-          Obj.change(object, (o) => {
-            o.description = event.target.value;
-          });
-        }}
-      />
-    </Input.Root>
-  );
-};
-
 const BlueprintEditor = ({ object }: ScriptObjectSettingsProps) => {
   const { t } = useTranslation(meta.id);
   const db = Obj.getDatabase(object);
@@ -111,7 +93,7 @@ const BlueprintEditor = ({ object }: ScriptObjectSettingsProps) => {
   }, [db, existingBlueprint, fn, blueprintKey, object.name, instructions]);
 
   return (
-    <div className='flex flex-col gap-4 mlb-cardSpacingBlock'>
+    <div className='flex flex-col gap-4 my-form-padding'>
       <div>
         <h2>{t('blueprint editor label', { default: 'Blueprint' })}</h2>
         <p className='text-description text-sm'>
@@ -178,7 +160,7 @@ const Binding = ({ object }: ScriptObjectSettingsProps) => {
 
   // TODO(burdon): Use form.
   return (
-    <div role='form' className='flex flex-col gap-2 mlb-cardSpacingBlock'>
+    <div role='form' className='flex flex-col gap-2 my-form-padding'>
       <h2>{t('remote function settings heading')}</h2>
       <Input.Root>
         <div role='none' className='flex flex-col gap-1'>
@@ -285,7 +267,7 @@ const Publishing = ({ object }: ScriptObjectSettingsProps) => {
   }, [object, githubToken]);
 
   return (
-    <div className='flex flex-col gap-4 mlb-cardSpacingBlock'>
+    <div className='flex flex-col gap-4 my-form-padding'>
       <div>
         <h2>{t('script publish settings label')}</h2>
         <p className='text-description text-sm'>{t('script publish settings description')}</p>

package/src/containers/ScriptObjectSettings/index.ts

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

package/src/containers/ScriptPluginSettings/index.ts

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

package/src/containers/ScriptProperties/ScriptProperties.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { Obj } from '@dxos/echo';
+import { type Script } from '@dxos/functions';
+import { Input, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '../../meta';
+
+export type ScriptPropertiesProps = {
+  object: Script.Script;
+};
+
+export const ScriptProperties = ({ object }: ScriptPropertiesProps) => {
+  const { t } = useTranslation(meta.id);
+  return (
+    <Input.Root>
+      <Input.Label>{t('description label')}</Input.Label>
+      <Input.TextInput
+        placeholder={t('description placeholder')}
+        value={object.description ?? ''}
+        onChange={(event) => {
+          Obj.change(object, (o) => {
+            o.description = event.target.value;
+          });
+        }}
+      />
+    </Input.Root>
+  );
+};

package/src/containers/ScriptProperties/index.ts

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

package/src/{components/TestPanel → containers/TestContainer}/TestContainer.tsx

@@ -5,12 +5,11 @@
 import React from 'react';
 
 import { type Script } from '@dxos/functions';
-import { Layout } from '@dxos/react-ui';
+import { Panel } from '@dxos/react-ui';
 
+import { TestPanel } from '../../components';
 import { useDeployState, useToolbarState } from '../../hooks';
 
-import { TestPanel } from './TestPanel';
-
 export type TestContainerProps = {
   role: string;
   script: Script.Script;
@@ -20,8 +19,10 @@ export const TestContainer = ({ role, script }: TestContainerProps) => {
   const state = useToolbarState();
   useDeployState({ state, script });
   return (
-    <Layout.Main role={role}>
-      <TestPanel functionUrl={state.value.functionUrl} />
-    </Layout.Main>
+    <Panel.Root role={role} className='dx-article'>
+      <Panel.Content asChild>
+        <TestPanel functionUrl={state.value.functionUrl} />
+      </Panel.Content>
+    </Panel.Root>
   );
 };

package/src/containers/TestContainer/index.ts

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

package/src/containers/index.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export const DeploymentDialog: ComponentType<any> = lazy(() => import('./DeploymentDialog'));
+export const NotebookContainer: ComponentType<any> = lazy(() => import('./NotebookContainer'));
+export const ScriptContainer: ComponentType<any> = lazy(() => import('./ScriptContainer'));
+export const ScriptObjectSettings: ComponentType<any> = lazy(() => import('./ScriptObjectSettings'));
+export const ScriptPluginSettings: ComponentType<any> = lazy(() => import('./ScriptPluginSettings'));
+export const ScriptProperties: ComponentType<any> = lazy(() => import('./ScriptProperties'));
+export const TestContainer: ComponentType<any> = lazy(() => import('./TestContainer'));

package/src/e2e/deploy.test.ts

@@ -50,7 +50,7 @@ describe.runIf(process.env.DX_TEST_TAGS?.includes('functions-e2e'))('Functions d
     });
 
     // Invoke deployed function via EDGE directly.
-    const edgeClient = client.edge;
+    const edgeClient = client.edge.http;
     invariant(edgeClient, 'edgeClient is required');
     edgeClient.setIdentity(createEdgeIdentity(client));