@dxos/plugin-script 0.8.4-main.dedc0f3 → 0.8.4-main.ead640a

package/src/components/Settings/ScriptObjectSettings.tsx

@@ -5,15 +5,18 @@
 import { Octokit } from '@octokit/core';
 import React, { type ChangeEvent, useCallback, useState } from 'react';
 
+import { ToolId } from '@dxos/ai';
 import { SettingsAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { Blueprint, Template } from '@dxos/blueprints';
 import { FunctionType, type ScriptType, getInvocationUrl, getUserFunctionIdInMetadata } from '@dxos/functions';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { Filter, Ref, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
 import { Button, Clipboard, Input, useAsyncEffect, useControlledState, useTranslation } from '@dxos/react-ui';
 import { DataType } from '@dxos/schema';
+import { kebabize } from '@dxos/util';
 
-import { SCRIPT_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
 export type ScriptObjectSettingsProps = {
   object: ScriptType;
@@ -23,13 +26,14 @@ export const ScriptObjectSettings = ({ object }: ScriptObjectSettingsProps) => {
   return (
     <>
       <Binding object={object} />
+      <BlueprintEditor object={object} />
       <Publishing object={object} />
     </>
   );
 };
 
 export const ScriptProperties = ({ object }: ScriptObjectSettingsProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   return (
     <Input.Root>
       <Input.Label>{t('description label')}</Input.Label>
@@ -44,8 +48,92 @@ export const ScriptProperties = ({ object }: ScriptObjectSettingsProps) => {
   );
 };
 
+const BlueprintEditor = ({ object }: ScriptObjectSettingsProps) => {
+  const { t } = useTranslation(meta.id);
+  const space = getSpace(object);
+  const [fn] = useQuery(space, Filter.type(FunctionType, { source: Ref.make(object) }));
+  const blueprints = useQuery(space, Filter.type(Blueprint.Blueprint));
+
+  const [creating, setCreating] = useState(false);
+  const [instructions, setInstructions] = useState<string>(`You can run the script "${object.name ?? 'script'}".`);
+  const blueprintKey = `dxos.org/blueprint/${kebabize(object.name ?? 'script')}`;
+  const existingBlueprint = blueprints.find((bp) => bp.key === blueprintKey);
+
+  useAsyncEffect(async () => {
+    if (!existingBlueprint) {
+      return;
+    }
+    const source = await existingBlueprint.instructions.source.load();
+    setInstructions(source.content ?? '');
+  }, [existingBlueprint]);
+
+  const handleSave = useCallback(async () => {
+    if (!space) {
+      return;
+    }
+
+    setCreating(true);
+    try {
+      if (existingBlueprint) {
+        const text = await existingBlueprint.instructions.source.load();
+        text.content = instructions;
+        if (fn?.key) {
+          const toolId = ToolId.make(fn.key);
+          if (!existingBlueprint.tools?.includes(toolId)) {
+            existingBlueprint.tools = [...(existingBlueprint.tools ?? []), toolId];
+          }
+        }
+      } else if (fn?.key) {
+        space.db.add(
+          Blueprint.make({
+            key: blueprintKey,
+            name: object.name ?? 'Script',
+            instructions: Template.make({
+              source: instructions,
+            }),
+            tools: [ToolId.make(fn.key)],
+          }),
+        );
+      }
+      await space.db.flush();
+    } finally {
+      setCreating(false);
+    }
+  }, [space, existingBlueprint, fn, blueprintKey, object.name, instructions]);
+
+  return (
+    <div className='flex flex-col gap-4 mlb-cardSpacingBlock'>
+      <div>
+        <h2>{t('blueprint editor label', { default: 'Blueprint' })}</h2>
+        <p className='text-description text-sm'>
+          {t('blueprint editor description', { default: 'Create a blueprint that exposes this script as a tool.' })}
+        </p>
+      </div>
+      <Input.Root>
+        <div role='none' className='flex flex-col gap-1'>
+          <Input.Label>{t('blueprint instructions label', { default: 'Instructions' })}</Input.Label>
+          <Input.TextArea
+            placeholder={t('blueprint instructions placeholder', { default: 'Describe how this tool should be used.' })}
+            rows={6}
+            value={instructions}
+            onChange={(event) => setInstructions(event.target.value)}
+            classNames='resize-y'
+          />
+        </div>
+      </Input.Root>
+      <div className='flex justify-end gap-2'>
+        <Button disabled={(!existingBlueprint && !fn?.key) || creating} onClick={handleSave}>
+          {t(creating ? 'creating label' : 'create blueprint label', {
+            default: creating ? 'Creating…' : 'Create blueprint',
+          })}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
 const Binding = ({ object }: ScriptObjectSettingsProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const client = useClient();
   const space = getSpace(object);
   const [fn] = useQuery(space, Filter.type(FunctionType, { source: Ref.make(object) }));
@@ -109,7 +197,7 @@ const Binding = ({ object }: ScriptObjectSettingsProps) => {
 
 // TODO(burdon): Move to separate tab?
 const Publishing = ({ object }: ScriptObjectSettingsProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const space = getSpace(object);
   const [githubToken] = useQuery(space, Filter.type(DataType.AccessToken, { source: 'github.com' }));
@@ -196,7 +284,3 @@ const Publishing = ({ object }: ScriptObjectSettingsProps) => {
     </div>
   );
 };
-
-// TODO(wittjosiah): Factor out.
-// From https://stackoverflow.com/a/67243723/2804332
-const kebabize = (str: string) => str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());

package/src/components/Settings/ScriptPluginSettings.tsx

@@ -4,38 +4,23 @@
 
 import React from 'react';
 
-import { type Credential } from '@dxos/protocols/proto/dxos/halo/credentials';
 import { useClient } from '@dxos/react-client';
 import { Button, Select, useTranslation } from '@dxos/react-ui';
 import { type EditorInputMode, EditorInputModes } from '@dxos/react-ui-editor';
 import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 
 import { meta } from '../../meta';
-import { type ScriptSettingsProps } from '../../types';
+import { type ScriptSettings } from '../../types';
+import { getAccessCredential } from '../../util';
 
-export const ScriptPluginSettings = ({ settings }: { settings: ScriptSettingsProps }) => {
+export const ScriptPluginSettings = ({ settings }: { settings: ScriptSettings }) => {
   const { t } = useTranslation(meta.id);
   const client = useClient();
 
   // TODO(burdon): Check token.
   const handleAuthenticate = async () => {
     const { identityKey } = client.halo.identity.get()!;
-    await client.halo.writeCredentials([
-      {
-        issuer: identityKey,
-        issuanceDate: new Date(),
-        subject: {
-          id: identityKey,
-          assertion: {
-            '@type': 'dxos.halo.credentials.ServiceAccess',
-            serverName: 'hub.dxos.network',
-            serverKey: identityKey,
-            identityKey,
-            capabilities: ['composer:beta'],
-          },
-        },
-      } satisfies Credential,
-    ]);
+    await client.halo.writeCredentials([getAccessCredential(identityKey)]);
   };
 
   return (

package/src/components/TestPanel/TestPanel.tsx

@@ -9,7 +9,7 @@ import { Avatar, Icon, Input, type ThemedClassName, Toolbar, useTranslation } fr
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { errorText, mx } from '@dxos/react-ui-theme';
 
-import { SCRIPT_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
 type State = 'pending' | 'responding';
 
@@ -24,7 +24,7 @@ export type TestPanelProps = ThemedClassName<{
 
 // TODO(burdon): Need persistent history (currently lost when switching tabs)..
 export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   const inputRef = useRef<HTMLInputElement>(null);
   const [input, setInput] = useState('');
@@ -41,7 +41,7 @@ export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
     }
   };
 
-  const controller = useRef<AbortController>();
+  const controller = useRef<AbortController>(null);
   useEffect(() => {
     return () => {
       handleStop();
@@ -50,7 +50,7 @@ export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
 
   const handleStop = () => {
     controller.current?.abort('stop');
-    controller.current = undefined;
+    controller.current = null;
   };
 
   const handleClear = () => {
@@ -62,7 +62,7 @@ export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
   };
 
   const handleResponse = ({ text, data, error }: { text?: string; data?: any; error?: Error } = {}) => {
-    controller.current = undefined;
+    controller.current = null;
     setHistory((history) => [...history, { type: 'response', text, data, error } satisfies Message]);
     setResult('');
     setState(null);

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

@@ -2,36 +2,91 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
-import { createDocAccessor, createObject } from '@dxos/react-client/echo';
+import { createDocAccessor } from '@dxos/react-client/echo';
+import { createObject } from '@dxos/react-client/echo';
+import { Toolbar } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { createDataExtensions } from '@dxos/react-ui-editor';
-import { withTheme } from '@dxos/storybook-utils';
+import { StackItem } from '@dxos/react-ui-stack';
+import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { trim } from '@dxos/util';
+
+import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
+
+const SCRIPT = trim`
+  x * 2
+`;
+
+const DefaultStory = (props: TypescriptEditorProps) => {
+  const object = useMemo(() => createObject({ content: SCRIPT }), []);
+  const [result, setResult] = useState<object | undefined>({});
 
-import { templates } from '../../templates';
+  // TODO(burdon): Make this work.
+  // const object = useMemo(() => DataType.makeText(templates[1].source), []);
+  // const script = useMemo(
+  //   () =>
+  //     Obj.make(ScriptType, {
+  //       source: Ref.make(createObject({ content: templates[0].source })),
+  //     }),
+  //   [object],
+  // );
 
-import { TypescriptEditor } from './TypescriptEditor';
+  const extensions = useMemo(
+    () => [createDataExtensions({ id: object.id, text: createDocAccessor(object, ['content']) })],
+    [],
+  );
 
-const DefaultStory = () => {
-  const object = useMemo(() => createObject({ content: templates[0].source }), []);
-  const initialValue = useMemo(() => object.content, [object]);
-  const accessor = useMemo(() => createDocAccessor(object, ['content']), [object]);
-  const extensions = useMemo(() => [createDataExtensions({ id: object.id, text: accessor })], [object.id, accessor]);
-  return <TypescriptEditor id='test' initialValue={initialValue} extensions={extensions} />;
+  const handleRun = useCallback(async () => {
+    try {
+      const definitions: [string, any][] = [['x', 100]];
+
+      // eslint-disable-next-line @typescript-eslint/no-implied-eval
+      const result = new Function(...definitions.map(([name]) => name), `return ${object.content.trim()}`)(
+        ...definitions.map(([, value]) => value),
+      );
+
+      setResult({
+        timestamp: Date.now(),
+        result,
+      });
+    } catch (err) {
+      setResult({
+        timestamp: Date.now(),
+        error: String(err),
+      });
+    }
+  }, [object]);
+
+  return (
+    <StackItem.Content 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-t border-subduedSeparator' />
+      </div>
+    </StackItem.Content>
+  );
 };
 
 const meta = {
   title: 'plugins/plugin-script/TypescriptEditor',
-  component: TypescriptEditor as any,
+  component: TypescriptEditor,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme, withLayout({ container: 'column', classNames: 'is-prose' })],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    id: 'test',
+  },
+};

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -4,10 +4,9 @@
 
 import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
 import { javascript } from '@codemirror/lang-javascript';
-import { defaultHighlightStyle } from '@codemirror/language';
+import { HighlightStyle } from '@codemirror/language';
 import { lintKeymap } from '@codemirror/lint';
 import { Prec } from '@codemirror/state';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import { keymap } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
 import { type VirtualTypeScriptEnvironment } from '@typescript/vfs';
@@ -15,14 +14,15 @@ import { continueKeymap } from '@valtown/codemirror-continue';
 import { type HoverInfo, tsAutocomplete, tsFacet, tsHover, tsLinter, tsSync } from '@valtown/codemirror-ts';
 import React from 'react';
 
-import { type ThemeMode, type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import { Domino, type ThemeMode, type ThemedClassName, useThemeContext } from '@dxos/react-ui';
 import {
+  type BasicExtensionsOptions,
   type EditorInputMode,
   InputModeExtensions,
   type UseTextEditorProps,
   createBasicExtensions,
   createThemeExtensions,
-  folding,
+  defaultStyles,
   useTextEditor,
 } from '@dxos/react-ui-editor';
 import { mx } from '@dxos/react-ui-theme';
@@ -31,18 +31,22 @@ import { isNonNullable } from '@dxos/util';
 export type TypescriptEditorProps = ThemedClassName<
   {
     id: string;
+    role?: string;
     inputMode?: EditorInputMode;
     toolbar?: boolean;
     env?: VirtualTypeScriptEnvironment;
+    options?: BasicExtensionsOptions;
   } & Pick<UseTextEditorProps, 'initialValue' | 'extensions' | 'scrollTo' | 'selection'>
 >;
 
 export const TypescriptEditor = ({
   classNames,
   id,
+  role = 'article',
   inputMode = 'vscode',
   toolbar,
   env,
+  options,
   initialValue,
   extensions,
   scrollTo,
@@ -63,21 +67,22 @@ export const TypescriptEditor = ({
           lineNumbers: true,
           lineWrapping: false,
           monospace: true,
-          scrollPastEnd: true,
+          scrollPastEnd: role !== 'section',
           search: true,
+          ...options,
         }),
         createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         InputModeExtensions[inputMode],
-        folding(),
-        // Continues block comments when pressing Enter.
-        Prec.high(keymap.of(continueKeymap)),
 
-        // TODO(burdon): Factor out.
         javascript({ typescript: true }),
-        // https://github.com/val-town/codemirror-ts
-        keymap.of(completionKeymap),
         autocompletion({ override: env ? [tsAutocomplete()] : undefined }),
+
+        // 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(),
@@ -89,6 +94,7 @@ export const TypescriptEditor = ({
     [id, extensions, themeMode, inputMode, selection, scrollTo],
   );
 
+  // TODO(brudon): Use react-ui-editor's Editor component.
   return (
     <div
       ref={parentRef}
@@ -99,8 +105,9 @@ export const TypescriptEditor = ({
   );
 };
 
+// TODO(burdon): Factor out (react-ui-editor).
 const createTooltipRenderer = (themeMode: ThemeMode) => {
-  const theme = themeMode === 'dark' ? oneDarkHighlightStyle : defaultHighlightStyle;
+  const theme = HighlightStyle.define(themeMode === 'dark' ? defaultStyles.dark : defaultStyles.light);
 
   const classFromKind = (_kind: string) => {
     // E.g., localName, methodName, parameterName, etc.
@@ -119,18 +126,16 @@ const createTooltipRenderer = (themeMode: ThemeMode) => {
   };
 
   return (info: HoverInfo) => {
-    const div = document.createElement('div');
-    div.className = 'p-1 rounded border border-separator bg-baseSurface xs:max-w-80 max-w-lg';
-
-    if (info.quickInfo?.displayParts) {
-      for (const part of info.quickInfo.displayParts) {
-        const span = div.appendChild(document.createElement('span'));
-        span.className = classFromKind(part.kind);
-        span.innerText = part.text;
-      }
-    }
-
-    return { dom: div };
+    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(),
+    };
   };
 };
 

package/src/components/index.ts

@@ -4,9 +4,12 @@
 
 import { lazy } from 'react';
 
+export * from './NotebookStack';
 export * from './Settings';
 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'));

package/src/events.ts

@@ -4,8 +4,8 @@
 
 import { defineEvent } from '@dxos/app-framework';
 
-import { SCRIPT_PLUGIN } from './meta';
+import { meta } from './meta';
 
 export namespace ScriptEvents {
-  export const SetupCompiler = defineEvent(`${SCRIPT_PLUGIN}/event/setup-compiler`);
+  export const SetupCompiler = defineEvent(`${meta.id}/event/setup-compiler`);
 }

package/src/hooks/deploy.ts

@@ -12,7 +12,7 @@ import { type TFunction } from '@dxos/react-ui';
 import { createMenuAction } from '@dxos/react-ui-menu';
 import { errorMessageColors } from '@dxos/react-ui-theme';
 
-import { SCRIPT_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { deployScript, getFunctionUrl, isScriptDeployed } from '../util';
 
 export type DeployActionProperties = { type: 'deploy' } | { type: 'copy' };
@@ -37,7 +37,7 @@ export type CreateDeployOptions = {
 export const createDeploy = ({ state, script, space, fn, client, existingFunctionId, t }: CreateDeployOptions) => {
   // TODO(wittjosiah): Should this be an action?
   const errorItem = createMenuAction('error', () => {}, {
-    label: state.error ?? ['no error label', { ns: SCRIPT_PLUGIN }],
+    label: state.error ?? ['no error label', { ns: meta.id }],
     icon: 'ph--warning-circle--regular',
     hidden: !state.error,
     classNames: state.error && errorMessageColors,
@@ -64,7 +64,7 @@ export const createDeploy = ({ state, script, space, fn, client, existingFunctio
     },
     {
       type: 'deploy',
-      label: [state.deploying ? 'pending label' : 'deploy label', { ns: SCRIPT_PLUGIN }],
+      label: [state.deploying ? 'publishing label' : 'deploy label', { ns: meta.id }],
       icon: state.deploying ? 'ph--spinner-gap--regular' : 'ph--cloud-arrow-up--regular',
       disabled: state.deploying,
       classNames: state.deploying ? '[&_svg]:animate-spin' : '',
@@ -74,14 +74,13 @@ export const createDeploy = ({ state, script, space, fn, client, existingFunctio
   const copyAction = createMenuAction<DeployActionProperties>(
     'copy',
     async () => {
-      if (!state.functionUrl) {
-        return;
+      if (state.functionUrl) {
+        await navigator.clipboard.writeText(state.functionUrl);
       }
-      await navigator.clipboard.writeText(state.functionUrl);
     },
     {
       type: 'copy',
-      label: ['copy link label', { ns: SCRIPT_PLUGIN }],
+      label: ['copy link label', { ns: meta.id }],
       icon: 'ph--link--regular',
       disabled: !state.functionUrl,
     },
@@ -117,9 +116,9 @@ export const useDeployState = ({ state, script }: { state: Partial<DeployState>;
 };
 
 export const useDeployDeps = ({ script }: { script: ScriptType }) => {
+  const client = useClient();
   const space = getSpace(script);
   const [fn] = useQuery(space, Query.type(FunctionType, { source: Ref.make(script) }));
-  const client = useClient();
   const existingFunctionId = useMemo(() => fn && getUserFunctionIdInMetadata(getMeta(fn)), [fn]);
-  return { space, fn, client, existingFunctionId };
+  return { client, space, fn, existingFunctionId };
 };

package/src/hooks/format.ts

@@ -10,7 +10,7 @@ import { type ScriptType } from '@dxos/functions';
 import { log } from '@dxos/log';
 import { createMenuAction } from '@dxos/react-ui-menu';
 
-import { SCRIPT_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 export type FormatActionProperties = { type: 'format' };
 
@@ -35,7 +35,7 @@ export const createFormat = (script: ScriptType) => {
       }
     },
     {
-      label: ['format label', { ns: SCRIPT_PLUGIN }],
+      label: ['format label', { ns: meta.id }],
       icon: 'ph--magic-wand--regular',
     },
   );

package/src/hooks/template.ts

@@ -6,14 +6,15 @@ import { Obj } from '@dxos/echo';
 import { FUNCTIONS_PRESET_META_KEY, type ScriptType } from '@dxos/functions';
 import { createMenuAction, createMenuItemGroup } from '@dxos/react-ui-menu';
 
-import { SCRIPT_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { templates } from '../templates';
 
 export type TemplateActionProperties = { type: 'template'; value: string };
 
 const createTemplateSelectGroup = () => {
+  // TODO(burdon): This should not be in the toolbar (move to create Object dialog).
   return createMenuItemGroup('template-select', {
-    label: ['template select group label', { ns: SCRIPT_PLUGIN }],
+    label: ['template select group label', { ns: meta.id }],
     variant: 'dropdownMenu',
   });
 };
@@ -30,7 +31,7 @@ const createTemplateSelectActions = (script: ScriptType) => {
         if (oldPresetIndex >= 0) {
           metaKeys.splice(oldPresetIndex, 1);
         }
-        if (template.presetId) {
+        if ('presetId' in template) {
           metaKeys.push({ source: FUNCTIONS_PRESET_META_KEY, id: template.presetId });
         }
       },

package/src/hooks/useCreateAndDeployScriptTemplates.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect/Function';
+import * as Function from 'effect/Function';
 import { useCallback, useState } from 'react';
 
 import { chain, createIntent, useIntentDispatcher } from '@dxos/app-framework';
@@ -40,8 +40,8 @@ export const useCreateAndDeployScriptTemplates = (space: Space | undefined, scri
     const deploymentResults = await Promise.all(
       scriptTemplates.map(async (template) => {
         const result = await dispatch(
-          pipe(
-            createIntent(ScriptAction.Create, { space, initialTemplateId: template.id }),
+          Function.pipe(
+            createIntent(ScriptAction.CreateScript, { space, initialTemplateId: template.id as any }),
             chain(SpaceAction.AddObject, { target: space }),
           ),
         );

package/src/index.ts

@@ -5,5 +5,6 @@
 export { ScriptCapabilities } from './capabilities';
 export * from './components';
 export * from './meta';
+export * from './util';
 
 export * from './ScriptPlugin';

package/src/meta.ts

@@ -4,13 +4,11 @@
 
 import { type PluginMeta } from '@dxos/app-framework';
 
-export const SCRIPT_PLUGIN = 'dxos.org/plugin/script';
-
 export const meta: PluginMeta = {
-  id: SCRIPT_PLUGIN,
+  id: 'dxos.org/plugin/script',
   name: 'Scripts',
   description:
-    'Scripts in Composer allow you to deploy custom functions that run on the edge. These functions can be referenced by your AI agent and called inside of cells in any Sheet. Use scripts to interact with API’s or external data inside of Composer.',
+    'Scripts enable you to deploy custom functions that run on the edge. These functions can be referenced by your AI agent and called inside of cells in any Sheet. Use scripts to interact with API’s or external data inside of Composer.',
   icon: 'ph--code--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-explorer',
   tags: ['labs'],