@dxos/plugin-script 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/capabilities/artifact-definition.ts

@@ -2,16 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
-
 import { Capabilities, contributes, createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
 import { defineArtifact, defineTool, ToolResult } from '@dxos/artifact';
 import { createArtifactElement } from '@dxos/assistant';
-import { ScriptType } from '@dxos/functions';
+import { ObjectId, S } from '@dxos/echo-schema';
+import { ScriptType } from '@dxos/functions/types';
 import { invariant } from '@dxos/invariant';
 import { SpaceAction } from '@dxos/plugin-space/types';
-import { live, makeRef, type Space } from '@dxos/react-client/echo';
-import { DataType } from '@dxos/schema';
+import { create, makeRef, type Space } from '@dxos/react-client/echo';
+import { TextType } from '@dxos/schema';
 
 import { meta } from '../meta';
 // TODO(burdon): Factor out.
@@ -72,28 +71,28 @@ export default () => {
       <apis>
         export function defineFunction(params: { 
           description: string, 
-          inputSchema: Schema.Schema, 
-          outputSchema: Schema.Schema, 
+          inputSchema: S.Schema, 
+          outputSchema: S.Schema, 
           handler: (params: { event: { data: TInput } }) => Promise<TOutput> 
         }): FunctionDefinition
         /**
          * Effect Schema
          */
-        export const Schema; 
+        export const S; 
 
         // Examples: 
 
-        Schema.String
-        Schema.Number
-        Schema.Boolean
-        Schema.Struct({
-          from: Schema.String.annotations({ description: 'The source currency' }),
-          to: Schema.String.annotations({ description: 'The target currency' }),
+        S.String
+        S.Number
+        S.Boolean
+        S.Struct({
+          from: S.String.annotations({ description: 'The source currency' }),
+          to: S.String.annotations({ description: 'The target currency' }),
         })
-        Schema.Array(Schema.String)
-        Schema.Union(Schema.String, Schema.Number)
-        Schema.optional(Schema.String)
-        Schema.String.annotations({ description: 'The source currency' })
+        S.Array(S.String)
+        S.Union(S.String, S.Number)
+        S.optional(S.String)
+        S.String.annotations({ description: 'The source currency' })
       </apis>
 
       <handler_function>
@@ -114,13 +113,13 @@ export default () => {
         export default defineFunction({
           description: 'Returns the exchange rate between two currencies.',
 
-          inputSchema: Schema.Struct({
-            from: Schema.String.annotations({ description: 'The source currency' }),
-            to: Schema.String.annotations({ description: 'The target currency' }),
+          inputSchema: S.Struct({
+            from: S.String.annotations({ description: 'The source currency' }),
+            to: S.String.annotations({ description: 'The target currency' }),
           }),
 
-          outputSchema: Schema.Struct({
-            rate: Schema.String.annotations({ description: 'The exchange rate' }),
+          outputSchema: S.Struct({
+            rate: S.String.annotations({ description: 'The exchange rate' }),
           }),
 
           handler: async ({
@@ -144,19 +143,19 @@ export default () => {
         name: 'create',
         description: 'Create a new script. Returns the artifact definition for the script',
         caption: 'Creating script...',
-        schema: Schema.Struct({
-          name: Schema.String.annotations({ description: 'The name of the script' }),
-          code: Schema.String.annotations({
+        schema: S.Struct({
+          name: S.String.annotations({ description: 'The name of the script' }),
+          code: S.String.annotations({
             description: 'The full code of the script in JavaScript or TypeScript. Must be valid executable code.',
           }),
         }),
         execute: async ({ name, code }, { extensions }) => {
           invariant(extensions?.space, 'No space');
           invariant(extensions?.dispatch, 'No intent dispatcher');
-          const script = live(ScriptType, {
+          const script = create(ScriptType, {
             name,
             source: makeRef(
-              live(DataType.Text, {
+              create(TextType, {
                 content: code,
               }),
             ),
@@ -177,9 +176,8 @@ export default () => {
         name: 'inspect',
         description: 'Inspect a script. Returns the artifact definition for the script',
         caption: 'Inspecting script...',
-        schema: Schema.Struct({
-          // TODO(wittjosiah): ObjectId schema should be used here but it's not working.
-          id: Schema.String.annotations({ description: 'The ID of the script' }),
+        schema: S.Struct({
+          id: ObjectId,
         }),
         execute: async ({ id }, { extensions }) => {
           invariant(extensions?.space, 'No space');
@@ -197,10 +195,9 @@ export default () => {
         name: 'update',
         description: 'Update a script. Returns the artifact definition for the script',
         caption: 'Updating script...',
-        schema: Schema.Struct({
-          // TODO(wittjosiah): ObjectId schema should be used here but it's not working.
-          id: Schema.String.annotations({ description: 'The ID of the script to update' }),
-          code: Schema.String.annotations({
+        schema: S.Struct({
+          id: ObjectId,
+          code: S.String.annotations({
             description: 'The full code of the script in JavaScript or TypeScript. Must be valid executable code.',
           }),
         }),

package/src/capabilities/intent-resolver.ts

@@ -3,13 +3,13 @@
 //
 
 import { Octokit } from '@octokit/core';
-import { Predicate } from 'effect';
+import { isNotNullable } from 'effect/Predicate';
 
 import { contributes, Capabilities, createResolver, createIntent, LayoutAction } from '@dxos/app-framework';
-import { ScriptType } from '@dxos/functions';
-import { live, makeRef } from '@dxos/live-object';
+import { ScriptType } from '@dxos/functions/types';
+import { create, makeRef } from '@dxos/live-object';
 import { TokenManagerAction } from '@dxos/plugin-token-manager/types';
-import { DataType } from '@dxos/schema';
+import { TextType } from '@dxos/schema';
 
 import { DEPLOYMENT_DIALOG } from '../components';
 import { defaultScriptsForIntegration } from '../meta';
@@ -47,9 +47,9 @@ export default () =>
 
         return {
           data: {
-            object: live(ScriptType, {
+            object: create(ScriptType, {
               name,
-              source: makeRef(live(DataType.Text, { content })),
+              source: makeRef(create(TextType, { content })),
             }),
           },
         };
@@ -60,7 +60,7 @@ export default () =>
       resolve: async ({ accessToken }) => {
         const scriptTemplates = (defaultScriptsForIntegration[accessToken.source] ?? [])
           .map((id) => templates.find((t) => t.id === id))
-          .filter(Predicate.isNotNullable);
+          .filter(isNotNullable);
 
         if (scriptTemplates.length > 0) {
           return {

package/src/capabilities/react-surface.tsx

@@ -5,13 +5,13 @@
 import React from 'react';
 
 import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
-import { InvocationTraceContainer } from '@dxos/devtools';
+import { InvocationTracePanel } from '@dxos/devtools';
 import { isInstanceOf } from '@dxos/echo-schema';
-import { ScriptType } from '@dxos/functions';
+import { ScriptType } from '@dxos/functions/types';
 import { SettingsStore } from '@dxos/local-storage';
 import { getSpace } from '@dxos/react-client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
-import { type DataType } from '@dxos/schema';
+import { type AccessTokenType } from '@dxos/schema';
 
 import { ScriptCapabilities } from './capabilities';
 import {
@@ -84,7 +84,7 @@ export default () =>
         const space = getSpace(data.companionTo);
         return (
           <StackItem.Content role={role}>
-            <InvocationTraceContainer space={space} script={data.companionTo} detailAxis='block' />
+            <InvocationTracePanel space={space} script={data.companionTo} detailAxis='block' />
           </StackItem.Content>
         );
       },
@@ -92,7 +92,7 @@ export default () =>
     createSurface({
       id: DEPLOYMENT_DIALOG,
       role: 'dialog',
-      filter: (data): data is { props: { accessToken: DataType.AccessToken; scriptTemplates: any } } =>
+      filter: (data): data is { props: { accessToken: AccessTokenType; scriptTemplates: any } } =>
         data.component === DEPLOYMENT_DIALOG,
       component: ({ data }) => <DeploymentDialog {...data.props} />,
     }),

package/src/capabilities/settings.ts

@@ -3,12 +3,12 @@
 //
 
 import { Capabilities, contributes } from '@dxos/app-framework';
-import { live } from '@dxos/live-object';
+import { create } from '@dxos/live-object';
 
 import { meta } from '../meta';
 import { ScriptSettingsSchema } from '../types';
 
 export default () => {
-  const settings = live(ScriptSettingsSchema, { editorInputMode: 'vscode' });
+  const settings = create(ScriptSettingsSchema, { editorInputMode: 'vscode' });
   return contributes(Capabilities.Settings, { schema: ScriptSettingsSchema, prefix: meta.id, value: settings });
 };

package/src/components/DeploymentDialog/DeploymentDialog.stories.tsx

@@ -33,7 +33,7 @@ const meta: Meta = {
   title: 'plugins/plugin-script/DeploymentDialog',
   component: DeploymentDialog,
   parameters: { translations },
-  decorators: [withTheme, withLayout()],
+  decorators: [withTheme, withLayout({ tooltips: true })],
 };
 
 export default meta;

package/src/components/DeploymentDialog/DeploymentDialog.tsx

@@ -7,7 +7,7 @@ import React, { useEffect, useMemo } from 'react';
 import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { getSpace } from '@dxos/react-client/echo';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
-import { type DataType } from '@dxos/schema';
+import { type AccessTokenType } from '@dxos/schema';
 
 import { useCreateAndDeployScriptTemplates } from '../../hooks/useCreateAndDeployScriptTemplates';
 import { SCRIPT_PLUGIN } from '../../meta';
@@ -21,7 +21,7 @@ export const DEPLOYMENT_DIALOG = `${SCRIPT_PLUGIN}/deployment/dialog`;
 //   - Pending / onError states.
 
 type DeploymentDialogProps = {
-  accessToken: DataType.AccessToken;
+  accessToken: AccessTokenType;
   scriptTemplates: Template[];
 };
 

package/src/components/ScriptContainer.tsx

@@ -4,7 +4,7 @@
 
 import React, { useMemo } from 'react';
 
-import { type ScriptType } from '@dxos/functions';
+import { type ScriptType } from '@dxos/functions/types';
 import { createDocAccessor, getSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { type ThemedClassName } from '@dxos/react-ui';
@@ -57,7 +57,7 @@ export const ScriptContainer = ({
   );
 
   return (
-    <StackItem.Content toolbar>
+    <StackItem.Content toolbar classNames='divide-y divide-separator'>
       <ScriptToolbar state={state} role={role} script={script} />
       <TypescriptEditor
         id={script.id}

package/src/components/ScriptToolbar/ScriptToolbar.stories.tsx

@@ -24,7 +24,7 @@ export const Default = {
 const meta: Meta = {
   title: 'plugins/plugin-script/Toolbar',
   component: ScriptToolbar,
-  decorators: [withTheme, withLayout()],
+  decorators: [withTheme, withLayout({ tooltips: true })],
 };
 
 export default meta;

package/src/components/ScriptToolbar/ScriptToolbar.tsx

@@ -4,21 +4,19 @@
 
 import React, { useCallback } from 'react';
 
-import { type ScriptType } from '@dxos/functions';
+import { type ScriptType } from '@dxos/functions/types';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { ElevationProvider, useTranslation, type ThemedClassName } from '@dxos/react-ui';
+import { ElevationProvider, type ThemedClassName } from '@dxos/react-ui';
 import { stackItemContentToolbarClassNames } from '@dxos/react-ui-editor';
 import { createGapSeparator, MenuProvider, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
 
 import {
-  type CreateDeployOptions,
   type ScriptToolbarState,
   createDeploy,
   createFormat,
   createTemplateSelect,
-  useDeployDeps,
+  useToolbarAction,
 } from '../../hooks';
-import { SCRIPT_PLUGIN } from '../../meta';
 
 export type ScriptToolbarProps = ThemedClassName<{
   role?: string;
@@ -26,11 +24,11 @@ export type ScriptToolbarProps = ThemedClassName<{
   state: ScriptToolbarState;
 }>;
 
-const createToolbar = ({ state, script, ...options }: CreateDeployOptions) => {
-  const templateSelect = createTemplateSelect(script);
-  const format = createFormat(script);
+const createToolbar = (state: ScriptToolbarState) => {
+  const templateSelect = createTemplateSelect();
+  const format = createFormat();
   const gap = createGapSeparator();
-  const deploy = createDeploy({ state, script, ...options });
+  const deploy = createDeploy(state);
   return {
     nodes: [...templateSelect.nodes, ...format.nodes, ...gap.nodes, ...deploy.nodes],
     edges: [...templateSelect.edges, ...format.edges, ...gap.edges, ...deploy.edges],
@@ -38,18 +36,14 @@ const createToolbar = ({ state, script, ...options }: CreateDeployOptions) => {
 };
 
 export const ScriptToolbar = ({ script, role, state, classNames }: ScriptToolbarProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
-  const options = useDeployDeps({ script });
-  const toolbarCreator = useCallback(
-    () => createToolbar({ state, script, t, ...options }),
-    [state, script, options, t],
-  );
+  const handleAction = useToolbarAction({ state, script });
+  const toolbarCreator = useCallback(() => createToolbar(state), [state]);
   const menu = useMenuActions(toolbarCreator);
 
   return (
     <div role='none' className={stackItemContentToolbarClassNames(role)}>
       <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-        <MenuProvider {...menu} attendableId={fullyQualifiedId(script)}>
+        <MenuProvider {...menu} onAction={handleAction} attendableId={fullyQualifiedId(script)}>
           <ToolbarMenu classNames={classNames} />
         </MenuProvider>
       </ElevationProvider>

package/src/components/Settings/ScriptObjectSettings.tsx

@@ -6,12 +6,12 @@ import { Octokit } from '@octokit/core';
 import React, { type ChangeEvent, useCallback, useEffect, useState } from 'react';
 
 import { createIntent, SettingsAction, useIntentDispatcher } from '@dxos/app-framework';
-import { FunctionType, type ScriptType, getInvocationUrl, getUserFunctionUrlInMetadata } from '@dxos/functions';
+import { FunctionType, type ScriptType, getInvocationUrl, getUserFunctionUrlInMetadata } from '@dxos/functions/types';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { Filter, getMeta, getSpace, Ref, useQuery } from '@dxos/react-client/echo';
+import { Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
 import { Button, Clipboard, Input, useControlledState, useTranslation } from '@dxos/react-ui';
-import { DataType } from '@dxos/schema';
+import { AccessTokenType } from '@dxos/schema';
 
 import { SCRIPT_PLUGIN } from '../../meta';
 
@@ -48,7 +48,7 @@ const Binding = ({ object }: ScriptObjectSettingsProps) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
   const client = useClient();
   const space = getSpace(object);
-  const [fn] = useQuery(space, Filter.type(FunctionType, { source: Ref.make(object) }));
+  const [fn] = useQuery(space, Filter.schema(FunctionType, { source: object }));
 
   const functionPath = fn && getUserFunctionUrlInMetadata(getMeta(fn));
   const functionUrl =
@@ -112,7 +112,7 @@ const Publishing = ({ object }: ScriptObjectSettingsProps) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const space = getSpace(object);
-  const [githubToken] = useQuery(space, Filter.type(DataType.AccessToken, { source: 'github.com' }));
+  const [githubToken] = useQuery(space, Filter.schema(AccessTokenType, { source: 'github.com' }));
   const gistKey = getMeta(object).keys.find(({ source }) => source === 'github.com');
   const [gistUrl, setGistUrl] = useState<string | undefined>();
 

package/src/hooks/deploy.ts

@@ -2,13 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 
 import { FunctionType, type ScriptType, getUserFunctionUrlInMetadata } from '@dxos/functions';
 import { log } from '@dxos/log';
-import { type Client, useClient } from '@dxos/react-client';
-import { getMeta, getSpace, Query, Ref, type Space, useQuery } from '@dxos/react-client/echo';
-import { type TFunction } from '@dxos/react-ui';
+import { useClient } from '@dxos/react-client';
+import { Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
+import { useTranslation } from '@dxos/react-ui';
 import { createMenuAction } from '@dxos/react-ui-menu';
 import { errorMessageColors } from '@dxos/react-ui-theme';
 
@@ -24,68 +24,28 @@ export type DeployState = {
   error: string;
 };
 
-export type CreateDeployOptions = {
-  state: Partial<DeployState>;
-  script: ScriptType;
-  fn: FunctionType;
-  space?: Space;
-  existingFunctionUrl?: string;
-  client: Client;
-  t: TFunction;
-};
-
-export const createDeploy = ({ state, script, space, fn, client, existingFunctionUrl, t }: CreateDeployOptions) => {
-  // TODO(wittjosiah): Should this be an action?
-  const errorItem = createMenuAction('error', () => {}, {
+export const createDeploy = (state: Partial<DeployState>) => {
+  const errorItem = createMenuAction('error', {
     label: state.error ?? ['no error label', { ns: SCRIPT_PLUGIN }],
     icon: 'ph--warning-circle--regular',
     hidden: !state.error,
     classNames: state.error && errorMessageColors,
   });
 
-  const deployAction = createMenuAction<DeployActionProperties>(
-    'deploy',
-    async () => {
-      if (!script.source || !space) {
-        return;
-      }
-
-      state.error = undefined;
-      state.deploying = true;
-
-      const result = await deployScript({ script, client, space, fn, existingFunctionUrl });
-
-      if (!result.success) {
-        log.catch(result.error);
-        state.error = t('upload failed label');
-      }
-
-      state.deploying = false;
-    },
-    {
-      type: 'deploy',
-      label: [state.deploying ? 'pending label' : 'deploy label', { ns: SCRIPT_PLUGIN }],
-      icon: state.deploying ? 'ph--spinner-gap--regular' : 'ph--cloud-arrow-up--regular',
-      disabled: state.deploying,
-      classNames: state.deploying ? '[&_svg]:animate-spin' : '',
-    },
-  );
-
-  const copyAction = createMenuAction<DeployActionProperties>(
-    'copy',
-    async () => {
-      if (!state.functionUrl) {
-        return;
-      }
-      await navigator.clipboard.writeText(state.functionUrl);
-    },
-    {
-      type: 'copy',
-      label: ['copy link label', { ns: SCRIPT_PLUGIN }],
-      icon: 'ph--link--regular',
-      disabled: !state.functionUrl,
-    },
-  );
+  const deployAction = createMenuAction<DeployActionProperties>('deploy', {
+    type: 'deploy',
+    label: [state.deploying ? 'pending label' : 'deploy label', { ns: SCRIPT_PLUGIN }],
+    icon: state.deploying ? 'ph--spinner-gap--regular' : 'ph--cloud-arrow-up--regular',
+    disabled: state.deploying,
+    classNames: state.deploying ? '[&_svg]:animate-spin' : '',
+  });
+
+  const copyAction = createMenuAction<DeployActionProperties>('copy', {
+    type: 'copy',
+    label: ['copy link label', { ns: SCRIPT_PLUGIN }],
+    icon: 'ph--link--regular',
+    disabled: !state.functionUrl,
+  });
 
   return {
     nodes: [errorItem, deployAction, copyAction],
@@ -118,8 +78,42 @@ export const useDeployState = ({ state, script }: { state: Partial<DeployState>;
 
 export const useDeployDeps = ({ script }: { script: ScriptType }) => {
   const space = getSpace(script);
-  const [fn] = useQuery(space, Query.type(FunctionType, { source: Ref.make(script) }));
+  const [fn] = useQuery(space, Filter.schema(FunctionType, { source: script }));
   const client = useClient();
   const existingFunctionUrl = useMemo(() => fn && getUserFunctionUrlInMetadata(getMeta(fn)), [fn]);
   return { space, fn, client, existingFunctionUrl };
 };
+
+/**
+ * Manage EDGE function deployment.
+ */
+export const useDeployHandler = ({ state, script }: { state: Partial<DeployState>; script: ScriptType }) => {
+  const { space, fn, client, existingFunctionUrl } = useDeployDeps({ script });
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+
+  return useCallback(async () => {
+    if (!script.source || !space) {
+      return;
+    }
+
+    state.error = undefined;
+    state.deploying = true;
+
+    const result = await deployScript({ script, client, space, fn, existingFunctionUrl });
+
+    if (!result.success) {
+      log.catch(result.error);
+      state.error = t('upload failed label');
+    }
+
+    state.deploying = false;
+  }, [fn, client, t, existingFunctionUrl, script, space]);
+};
+
+export const useCopyHandler = ({ state }: { state: Partial<DeployState> }) =>
+  useCallback(async () => {
+    if (!state.functionUrl) {
+      return;
+    }
+    await navigator.clipboard.writeText(state.functionUrl);
+  }, [state.functionUrl]);

package/src/hooks/format.ts

@@ -5,8 +5,9 @@
 import { format } from 'prettier';
 import prettierPluginEstree from 'prettier/plugins/estree';
 import prettierPluginTypescript from 'prettier/plugins/typescript';
+import { useCallback } from 'react';
 
-import { type ScriptType } from '@dxos/functions';
+import { type ScriptType } from '@dxos/functions/types';
 import { log } from '@dxos/log';
 import { createMenuAction } from '@dxos/react-ui-menu';
 
@@ -14,34 +15,33 @@ import { SCRIPT_PLUGIN } from '../meta';
 
 export type FormatActionProperties = { type: 'format' };
 
-export const createFormat = (script: ScriptType) => {
-  const formatAction = createMenuAction(
-    'format',
-    async () => {
-      if (!script.source) {
-        return;
-      }
-
-      try {
-        script.source.target!.content = await format(script.source.target!.content, {
-          parser: 'typescript',
-          plugins: [prettierPluginEstree, prettierPluginTypescript],
-          semi: true,
-          singleQuote: true,
-        });
-      } catch (err: any) {
-        // TODO(wittjosiah): Show error in UI.
-        log.catch(err);
-      }
-    },
-    {
-      label: ['format label', { ns: SCRIPT_PLUGIN }],
-      icon: 'ph--magic-wand--regular',
-    },
-  );
+export const createFormat = () => {
+  const formatAction = createMenuAction('format', {
+    label: ['format label', { ns: SCRIPT_PLUGIN }],
+    icon: 'ph--magic-wand--regular',
+  });
 
   return {
     nodes: [formatAction],
     edges: [{ source: 'root', target: 'format' }],
   };
 };
+
+export const useFormatHandler = ({ script }: { script: ScriptType }) =>
+  useCallback(async () => {
+    if (!script.source) {
+      return;
+    }
+
+    try {
+      script.source.target!.content = await format(script.source.target!.content, {
+        parser: 'typescript',
+        plugins: [prettierPluginEstree, prettierPluginTypescript],
+        semi: true,
+        singleQuote: true,
+      });
+    } catch (err: any) {
+      // TODO(wittjosiah): Show error in UI.
+      log.catch(err);
+    }
+  }, [script.source]);

package/src/hooks/index.ts

@@ -7,4 +7,5 @@ export * from './format';
 export * from './template';
 
 export * from './useCreateAndDeployScriptTemplates';
+export * from './useToolbarAction';
 export * from './useToolbarState';