@dxos/plugin-script 0.8.4-main.72ec0f3 → 0.8.4-main.7996785055

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -9,23 +9,24 @@ import { lintKeymap } from '@codemirror/lint';
 import { Prec } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
+import { composeRefs } from '@radix-ui/react-compose-refs';
 import { type VirtualTypeScriptEnvironment } from '@typescript/vfs';
 import { continueKeymap } from '@valtown/codemirror-continue';
 import { type HoverInfo, tsAutocomplete, tsFacet, tsHover, tsLinter, tsSync } from '@valtown/codemirror-ts';
 import React from 'react';
 
-import { Domino, type ThemeMode, type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import { type ThemeMode, type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import { type UseTextEditorProps, useTextEditor } from '@dxos/react-ui-editor';
+import { Domino } from '@dxos/ui';
 import {
   type BasicExtensionsOptions,
   type EditorInputMode,
   InputModeExtensions,
-  type UseTextEditorProps,
   createBasicExtensions,
   createThemeExtensions,
   defaultStyles,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+} from '@dxos/ui-editor';
+import { composable, composableProps } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 export type TypescriptEditorProps = ThemedClassName<
@@ -39,66 +40,74 @@ export type TypescriptEditorProps = ThemedClassName<
   } & Pick<UseTextEditorProps, 'initialValue' | 'extensions' | 'scrollTo' | 'selection'>
 >;
 
-export const TypescriptEditor = ({
-  classNames,
-  id,
-  role = 'article',
-  inputMode = 'vscode',
-  env,
-  options,
-  initialValue,
-  extensions,
-  scrollTo,
-  selection,
-}: TypescriptEditorProps) => {
-  const { themeMode } = useThemeContext();
-  const { parentRef, focusAttributes } = useTextEditor(
-    () => ({
+export const TypescriptEditor = composable<HTMLDivElement, TypescriptEditorProps>(
+  (
+    {
+      classNames,
       id,
+      role = 'article',
+      inputMode = 'vscode',
+      env,
+      options,
       initialValue,
-      selection,
+      extensions,
       scrollTo,
-      extensions: [
-        extensions,
-        createBasicExtensions({
-          highlightActiveLine: true,
-          indentWithTab: true,
-          lineNumbers: true,
-          lineWrapping: false,
-          scrollPastEnd: role !== 'section',
-          search: true,
-          ...options,
-        }),
-        createThemeExtensions({
-          monospace: true,
-          themeMode,
-          syntaxHighlighting: true,
-        }),
-        InputModeExtensions[inputMode],
+      selection,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const { themeMode } = useThemeContext();
+    const { parentRef, focusAttributes } = useTextEditor(
+      () => ({
+        id,
+        initialValue,
+        selection,
+        scrollTo,
+        extensions: [
+          extensions,
+          createBasicExtensions({
+            highlightActiveLine: true,
+            indentWithTab: true,
+            lineNumbers: true,
+            lineWrapping: false,
+            scrollPastEnd: role !== 'section',
+            search: true,
+            ...options,
+          }),
+          createThemeExtensions({
+            monospace: true,
+            themeMode,
+            syntaxHighlighting: true,
+          }),
 
-        javascript({ typescript: true }),
-        autocompletion({ override: env ? [tsAutocomplete()] : undefined }),
+          InputModeExtensions[inputMode],
+          javascript({ typescript: true }),
+          autocompletion({ override: env ? [tsAutocomplete()] : undefined }),
 
-        // Continues block comments when pressing Enter.
-        Prec.high(keymap.of(continueKeymap)),
-        keymap.of(completionKeymap),
-        keymap.of(lintKeymap),
+          // Continues block comments when pressing Enter.
+          Prec.high(keymap.of(continueKeymap)),
+          keymap.of(completionKeymap),
+          keymap.of(lintKeymap),
 
-        // https://github.com/val-town/codemirror-ts
-        env && [
-          tsFacet.of({ env, path: `/src/${id}.ts` }),
-          tsSync(),
-          tsLinter(),
-          tsHover({ renderTooltip: createTooltipRenderer(themeMode) }),
-        ],
-      ].filter(isNonNullable),
-    }),
-    [id, extensions, themeMode, inputMode, selection, scrollTo],
-  );
+          // https://github.com/val-town/codemirror-ts
+          env && [
+            // TODO(burdon): Fix type.
+            tsFacet.of({ env: env as any, path: `./src/${id}.ts` }),
+            tsSync(),
+            tsLinter(),
+            tsHover({ renderTooltip: createTooltipRenderer(themeMode) }),
+          ],
+        ].filter(isNonNullable),
+      }),
+      [themeMode, id, extensions, inputMode, selection, scrollTo, env],
+    );
 
-  // TODO(brudon): Use react-ui-editor's Editor component.
-  return <div ref={parentRef} className={mx(classNames)} {...focusAttributes} />;
-};
+    return (
+      <div {...composableProps(props, { classNames, ...focusAttributes })} ref={composeRefs(parentRef, forwardedRef)} />
+    );
+  },
+);
 
 // TODO(burdon): Factor out (react-ui-editor).
 const createTooltipRenderer = (themeMode: ThemeMode) => {
@@ -121,15 +130,14 @@ const createTooltipRenderer = (themeMode: ThemeMode) => {
   };
 
   return (info: HoverInfo) => {
+    const children =
+      info.quickInfo?.displayParts?.map(({ kind, text }) =>
+        Domino.of('span').classNames(classFromKind(kind)).text(text),
+      ) ?? [];
     return {
       dom: Domino.of('div')
-        .classNames('xs:max-is-80 max-is-lg p-1 bg-baseSurface rounded border border-separator')
-        .children(
-          ...(info.quickInfo?.displayParts?.map(({ kind, text }) =>
-            Domino.of('span').classNames(classFromKind(kind)).text(text),
-          ) ?? []),
-        )
-        .build(),
+        .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 './FramePanel';
 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

@@ -3,9 +3,9 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { IntentPlugin } 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';
@@ -15,44 +15,49 @@ import { AccessToken } from '@dxos/types';
 
 import { translations } from '../../translations';
 
-import { DeploymentDialog, type DeploymentDialogProps } from './DeploymentDialog';
+import { DeploymentDialog } from './DeploymentDialog';
 
-const DefaultStory = (props: DeploymentDialogProps) => {
+const DeploymentDialogStory = () => {
+  const accessToken = useMemo(
+    () =>
+      Obj.make(AccessToken.AccessToken, {
+        source: 'example.com',
+        token: 'example-token',
+      }),
+    [],
+  );
+  const scriptTemplates = useMemo(
+    () => [
+      { id: 't-1', name: 'Script 1', source: 'template1' },
+      { id: 't-2', name: 'Script 2', source: 'template2' },
+      { id: 't-3', name: 'Script 3', source: 'template3' },
+    ],
+    [],
+  );
   return (
     <Dialog.Root defaultOpen={true}>
-      <DeploymentDialog {...props} />
+      <Dialog.Overlay>
+        <DeploymentDialog accessToken={accessToken} scriptTemplates={scriptTemplates} />
+      </Dialog.Overlay>
     </Dialog.Root>
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-script/DeploymentDialog',
-  component: DeploymentDialog,
-  render: DefaultStory,
+  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,
+    withTheme(),
     withPluginManager({
-      plugins: [IntentPlugin(), ClientPlugin({})],
+      plugins: [OperationPlugin(), RuntimePlugin(), ClientPlugin({})],
     }),
   ],
-} satisfies Meta<typeof DefaultStory>;
+} satisfies Meta<typeof DeploymentDialogStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {
-    accessToken: Obj.make(AccessToken.AccessToken, {
-      source: 'example.com',
-      token: 'example-token',
-    }),
-    scriptTemplates: [
-      { id: 't-1', name: 'Script 1', source: 'template1' },
-      { id: 't-2', name: 'Script 2', source: 'template2' },
-      { id: 't-3', name: 'Script 3', source: 'template3' },
-    ],
-  },
-};
+export const Default: Story = {};

package/src/containers/DeploymentDialog/DeploymentDialog.tsx

@@ -0,0 +1,98 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useEffect, useMemo } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { getSpace } from '@dxos/react-client/echo';
+import { Button, Dialog, useTranslation } from '@dxos/react-ui';
+import { type AccessToken } from '@dxos/types';
+
+import { useCreateAndDeployScriptTemplates } from '../../hooks';
+import { meta } from '../../meta';
+import { type Template } from '../../templates';
+
+// TODO(ZaymonFC):
+//  - Show activity and feedback to the user.
+//  - Only take an array of templateIds and get the name from the data.
+//  - Pending / onError states.
+
+export type DeploymentDialogProps = {
+  accessToken: AccessToken.AccessToken;
+  scriptTemplates: Template[];
+};
+
+export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDialogProps) => {
+  const { t } = useTranslation(meta.id);
+  const space = useMemo(() => getSpace(accessToken), [accessToken]);
+
+  // TODO(ZaymonFC): Thinking further. All of this should get moved to intents to run async in the background.
+  //   Deployment shouldn't be tied to the lifecycle of the dialogue component.
+  const { handleCreateAndDeployScripts, status } = useCreateAndDeployScriptTemplates(space, scriptTemplates);
+  const { invokePromise } = useOperationInvoker();
+
+  useEffect(() => {
+    if (status === 'success') {
+      // TODO(ZaymonFC): We can probably re-use this toast for normal script deployment.
+      void invokePromise(LayoutOperation.AddToast, {
+        id: `${meta.id}.deployment-success`,
+        icon: 'ph--check--regular',
+        duration: Infinity,
+        title: ['script deployment toast label', { ns: meta.id, count: scriptTemplates.length }],
+        description: ['script deployment toast description', { ns: meta.id, count: scriptTemplates.length }],
+        closeLabel: ['script deployment toast close label', { ns: meta.id, count: scriptTemplates.length }],
+      });
+      void invokePromise(LayoutOperation.UpdateDialog, { state: false });
+    }
+    if (status === 'error') {
+      void invokePromise(LayoutOperation.UpdateDialog, { state: false });
+      void invokePromise(LayoutOperation.AddToast, {
+        id: `${meta.id}.deployment-error`,
+        icon: 'ph--warning--regular',
+        duration: Infinity,
+        title: ['script deployment error toast label', { ns: meta.id, count: scriptTemplates.length }],
+        description: ['script deployment error toast description', { ns: meta.id, count: scriptTemplates.length }],
+        closeLabel: ['script deployment error toast close label', { ns: meta.id, count: scriptTemplates.length }],
+      });
+    }
+  }, [status, invokePromise]);
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('deployment dialog title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.CloseIconButton />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Dialog.Body>
+        <p>
+          {t('deployment dialog scripts found message', {
+            count: scriptTemplates.length,
+          })}
+        </p>
+        <ul className='pt-2'>
+          {scriptTemplates.map((template) => {
+            return <li key={template.id}>{template.name}</li>;
+          })}
+        </ul>
+      </Dialog.Body>
+      <Dialog.ActionBar>
+        <Dialog.Close asChild>
+          <Button disabled={status === 'pending'}>{t('deployment dialog skip button label')}</Button>
+        </Dialog.Close>
+        <Button variant='primary' onClick={handleCreateAndDeployScripts} disabled={status === 'pending'}>
+          {status === 'pending'
+            ? t('deployment dialog deploy functions pending button label', {
+                count: scriptTemplates.length,
+              })
+            : t('deployment dialog deploy functions button label', {
+                count: scriptTemplates.length,
+              })}
+        </Button>
+      </Dialog.ActionBar>
+    </Dialog.Content>
+  );
+};

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

@@ -3,45 +3,46 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 import React from 'react';
 
 import { SERVICES_CONFIG } from '@dxos/ai/testing';
-import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Agent } from '@dxos/assistant-toolkit';
+import { AgentPrompt } from '@dxos/assistant-toolkit';
 import { Filter } from '@dxos/echo';
-import { Function, serializeFunction } from '@dxos/functions';
+import { Operation } from '@dxos/operation';
 import { AssistantPlugin } from '@dxos/plugin-assistant';
 import { AutomationPlugin } from '@dxos/plugin-automation';
 import { ClientPlugin } from '@dxos/plugin-client';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
 import { ExplorerPlugin } from '@dxos/plugin-explorer';
 import { Markdown, MarkdownPlugin } from '@dxos/plugin-markdown';
-import { SpacePlugin } from '@dxos/plugin-space';
+import { corePlugins } from '@dxos/plugin-testing';
 import { Config, useClient } from '@dxos/react-client';
 import { useQuery } from '@dxos/react-client/echo';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { withLayout } 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 = {
-  title: 'plugins/plugin-script/NotebookContainer',
+const meta: Meta<typeof NotebookContainer> = {
+  title: 'plugins/plugin-script/containers/NotebookContainer',
   component: NotebookContainer,
   render: (args) => {
     const client = useClient();
-    const space = client.spaces.default;
+    const space = client.spaces.get()[0];
     const notebooks = useQuery(space?.db, Filter.type(Notebook.Notebook));
-    return <NotebookContainer {...args} notebook={notebooks[0]} />;
+    return <NotebookContainer {...args} subject={notebooks[0]} attendableId='test' />;
   },
   decorators: [
-    withTheme,
-    withLayout({ container: 'column', classNames: 'is-prose' }),
+    withLayout({ layout: 'column', classNames: 'w-document-max-width' }),
     withPluginManager({
       plugins: [
+        ...corePlugins(),
         ClientPlugin({
           // TODO(wittjosiah): ComputeRuntime requires edge to be configured or it will throw.
           config: new Config({
@@ -49,21 +50,16 @@ const meta = {
               services: SERVICES_CONFIG.REMOTE,
             },
           }),
-          types: [...DataTypes, Notebook.Notebook, Function.Function, Markdown.Document],
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-            await client.spaces.waitUntilReady();
-            const space = client.spaces.default;
-            await space.waitUntilReady();
+          types: [...DataTypes, Notebook.Notebook, Operation.PersistentOperation, Markdown.Document],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              const { personalSpace } = yield* initializeIdentity(client);
 
-            space.db.add(createNotebook());
-            space.db.add(Markdown.make({ content: '# Hello World' }));
-            space.db.add(serializeFunction(Agent.prompt));
-          },
+              personalSpace.db.add(createNotebook());
+              personalSpace.db.add(Markdown.make({ content: '# Hello World' }));
+              personalSpace.db.add(Operation.serialize(AgentPrompt));
+            }),
         }),
-        SpacePlugin({}),
-        SettingsPlugin(),
-        IntentPlugin(),
         AssistantPlugin(),
         AutomationPlugin(),
         ExplorerPlugin(),
@@ -74,10 +70,15 @@ const meta = {
   parameters: {
     translations,
   },
-} satisfies Meta<typeof NotebookContainer>;
+};
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    role: 'article',
+    subject: undefined as any,
+  },
+};