@dxos/plugin-script 0.7.5-labs.a279d8c → 0.7.5-labs.d453967

package/src/capabilities/react-surface.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 
 import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
 import { ScriptType } from '@dxos/functions';
+import { SettingsStore } from '@dxos/local-storage';
 import { Clipboard } from '@dxos/react-ui';
 
 import { ScriptCapabilities } from './capabilities';
@@ -17,12 +18,10 @@ export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
       id: `${SCRIPT_PLUGIN}/settings`,
-      role: 'settings',
-      filter: (data): data is any => data.subject === SCRIPT_PLUGIN,
-      component: () => {
-        const settings = useCapability(Capabilities.SettingsStore).getStore<ScriptSettingsProps>(SCRIPT_PLUGIN)!.value;
-        return <ScriptSettings settings={settings} />;
-      },
+      role: 'article',
+      filter: (data): data is { subject: SettingsStore<ScriptSettingsProps> } =>
+        data.subject instanceof SettingsStore && data.subject.prefix === SCRIPT_PLUGIN,
+      component: ({ data: { subject } }) => <ScriptSettings settings={subject.value} />,
     }),
     createSurface({
       id: `${SCRIPT_PLUGIN}/article`,
@@ -30,14 +29,15 @@ export default () =>
       filter: (data): data is { subject: ScriptType } => data.subject instanceof ScriptType,
       component: ({ data, role }) => {
         const compiler = useCapability(ScriptCapabilities.Compiler);
-        const settings = useCapability(Capabilities.SettingsStore).getStore<ScriptSettingsProps>(SCRIPT_PLUGIN)!.value;
+        // TODO(dmaretskyi): Since settings store is not reactive, this would break on the script plugin being enabled without a page reload.
+        const settings = useCapability(Capabilities.SettingsStore).getStore<ScriptSettingsProps>(SCRIPT_PLUGIN)?.value;
         return <ScriptContainer role={role} script={data.subject} settings={settings} env={compiler.environment} />;
       },
     }),
     createSurface({
       id: `${SCRIPT_PLUGIN}/automation`,
       role: 'complementary--automation',
-      disposition: 'hoist',
+      position: 'hoist',
       filter: (data): data is { subject: ScriptType } => data.subject instanceof ScriptType,
       component: ({ data }) => <AutomationPanel subject={data.subject} />,
     }),

package/src/components/FrameContainer/FrameContainer.tsx

@@ -5,17 +5,17 @@
 import React, { useEffect, useRef } from 'react';
 
 import { clientServiceBundle } from '@dxos/client-protocol';
+import { type BundleResult } from '@dxos/functions/bundler';
+import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { baseSurface, mx } from '@dxos/react-ui-theme';
 import { createProtoRpcPeer } from '@dxos/rpc';
 import { createIFramePort } from '@dxos/rpc-tunnel';
 
-import { type BundlerResult } from '../../bundler';
-
 export type FrameContainerProps = {
   containerUrl: string;
-  result: BundlerResult;
+  result: BundleResult;
   debug?: boolean;
 };
 
@@ -46,6 +46,7 @@ export const FrameContainer = ({ containerUrl, result, debug = true }: FrameCont
   }, [iframeRef]);
 
   // Encodes compiled code via URL.
+  invariant(result.sourceHash, 'Source hash is required.');
   const sourceHash = Buffer.from(result.sourceHash).toString('hex');
   const src = result.bundle && `${containerUrl}?ts=${sourceHash}#code=${encodeURIComponent(result.bundle)}`;
 

package/src/components/ScriptContainer.tsx

@@ -14,19 +14,24 @@ import { mx } from '@dxos/react-ui-theme';
 
 import { DebugPanel } from './DebugPanel';
 import { ScriptToolbar } from './ScriptToolbar';
-import { useDeployState } from './ScriptToolbar/deploy';
-import { useToolbarState } from './ScriptToolbar/useToolbarState';
 import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
+import { useDeployState, useToolbarState } from '../hooks';
 import { type ScriptSettingsProps } from '../types';
 
 export type ScriptEditorProps = ThemedClassName<{
   script: ScriptType;
-  settings: ScriptSettingsProps;
+  settings?: ScriptSettingsProps;
   role?: string;
 }> &
   Pick<TypescriptEditorProps, 'env'>;
 
-export const ScriptContainer = ({ role, classNames, script, settings, env }: ScriptEditorProps) => {
+export const ScriptContainer = ({
+  role,
+  classNames,
+  script,
+  settings = { editorInputMode: 'vscode' },
+  env,
+}: ScriptEditorProps) => {
   const identity = useIdentity();
   const space = getSpace(script);
 
@@ -49,7 +54,7 @@ export const ScriptContainer = ({ role, classNames, script, settings, env }: Scr
     [script, script.source.target, space, identity],
   );
 
-  const state = useToolbarState({ view: 'split' });
+  const state = useToolbarState({ view: 'editor' });
   useDeployState({ state, script });
 
   return (

package/src/components/ScriptSettings/ScriptSettings.tsx

@@ -8,7 +8,7 @@ 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 { DeprecatedFormInput } from '@dxos/react-ui-form';
+import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 
 import { SCRIPT_PLUGIN } from '../../meta';
 import { type ScriptSettingsProps } from '../../types';
@@ -39,7 +39,7 @@ export const ScriptSettings = ({ settings }: { settings: ScriptSettingsProps })
   };
 
   return (
-    <>
+    <DeprecatedFormContainer>
       {/* TODO(wittjosiah): Hide outside of dev environments. */}
       <DeprecatedFormInput label={t('authenticate action label')}>
         <Button onClick={handleAuthenticate}>{t('authenticate button label')}</Button>
@@ -66,6 +66,6 @@ export const ScriptSettings = ({ settings }: { settings: ScriptSettingsProps })
           </Select.Portal>
         </Select.Root>
       </DeprecatedFormInput>
-    </>
+    </DeprecatedFormContainer>
   );
 };

package/src/components/ScriptSettingsPanel.tsx

@@ -10,7 +10,7 @@ import { FunctionType, type ScriptType, getInvocationUrl, getUserFunctionUrlInMe
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
-import { Button, Clipboard, Input, Separator, useControlledValue, useTranslation } from '@dxos/react-ui';
+import { Button, Clipboard, Input, Separator, useControlledState, useTranslation } from '@dxos/react-ui';
 import { AccessTokenType } from '@dxos/schema';
 
 import { SCRIPT_PLUGIN } from '../meta';
@@ -57,7 +57,7 @@ export const ScriptSettingsPanel = ({ script }: ScriptSettingsPanelProps) => {
     return () => clearTimeout(timeout);
   }, [githubToken, gistKey]);
 
-  const [binding, setBinding] = useControlledValue(fn?.binding ?? '');
+  const [binding, setBinding] = useControlledState(fn?.binding ?? '');
   const handleBindingChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
       setBinding(event.target.value);
@@ -114,6 +114,20 @@ export const ScriptSettingsPanel = ({ script }: ScriptSettingsPanelProps) => {
 
   return (
     <>
+      <div role='form' className='flex flex-col w-full p-2 gap-4'>
+        <Input.Root>
+          <div role='none' className='flex flex-col gap-1'>
+            <Input.Label>{t('description label')}</Input.Label>
+            <Input.TextInput
+              placeholder={t('description placeholder')}
+              value={script.description ?? ''}
+              onChange={(event) => {
+                script.description = event.target.value;
+              }}
+            />
+          </div>
+        </Input.Root>
+      </div>
       {fn && functionUrl && (
         <>
           <Separator />

package/src/components/ScriptToolbar/ScriptToolbar.tsx

@@ -10,12 +10,14 @@ 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 { createDeploy } from './deploy';
-import { createFormat } from './format';
-import { createTemplateSelect } from './templateSelect';
-import { useToolbarAction } from './useToolbarAction';
-import { type ScriptToolbarState } from './useToolbarState';
-import { createView } from './view';
+import {
+  type ScriptToolbarState,
+  createDeploy,
+  createFormat,
+  createTemplateSelect,
+  createView,
+  useToolbarAction,
+} from '../../hooks';
 
 export type ScriptToolbarProps = ThemedClassName<{
   role?: string;

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -27,7 +27,7 @@ import {
   useTextEditor,
   type UseTextEditorProps,
 } from '@dxos/react-ui-editor';
-import { nonNullable } from '@dxos/util';
+import { isNonNullable } from '@dxos/util';
 
 export type TypescriptEditorProps = {
   id: string;
@@ -94,7 +94,7 @@ export const TypescriptEditor = ({
               ]
             : [],
         ],
-      ].filter(nonNullable),
+      ].filter(isNonNullable),
       selection,
       scrollTo,
     }),
@@ -127,7 +127,7 @@ const createTooltipRenderer = (themeMode: ThemeMode) => {
 
   return (info: HoverInfo) => {
     const div = document.createElement('div');
-    div.className = 'p-1 rounded border border-separator bg-base xs:max-w-80 max-w-lg';
+    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) {

package/src/{components/ScriptToolbar → hooks}/deploy.ts

@@ -6,13 +6,14 @@ import { useCallback, useEffect, useMemo } from 'react';
 
 import {
   FunctionType,
+  type ScriptType,
   getInvocationUrl,
   getUserFunctionUrlInMetadata,
   incrementSemverPatch,
-  type ScriptType,
   setUserFunctionUrlInMetadata,
   uploadWorkerFunction,
 } from '@dxos/functions';
+import { Bundler } from '@dxos/functions/bundler';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { Filter, create, getMeta, getSpace, makeRef, useQuery } from '@dxos/react-client/echo';
@@ -20,8 +21,7 @@ import { useTranslation } from '@dxos/react-ui';
 import { createMenuAction } from '@dxos/react-ui-menu';
 
 import { type ViewState } from './view';
-import { Bundler } from '../../bundler';
-import { SCRIPT_PLUGIN } from '../../meta';
+import { SCRIPT_PLUGIN } from '../meta';
 
 export type DeployActionProperties = { type: 'deploy' } | { type: 'copy' };
 
@@ -105,7 +105,7 @@ export const useDeployHandler = ({ state, script }: { state: Partial<DeployState
       const existingFunctionId = existingFunctionUrl?.split('/').at(-1);
 
       const bundler = new Bundler({ platform: 'browser', sandboxedModules: [], remoteModules: {} });
-      const buildResult = await bundler.bundle(script.source.target!.content);
+      const buildResult = await bundler.bundle({ source: script.source.target!.content });
       if (buildResult.error || !buildResult.bundle) {
         throw buildResult.error;
       }
@@ -130,12 +130,24 @@ export const useDeployHandler = ({ state, script }: { state: Partial<DeployState
         fn ?? space.db.add(create(FunctionType, { name: functionId, version, source: makeRef(script) }));
 
       script.changed = false;
+      if (script.description !== undefined && script.description.trim() !== '') {
+        deployedFunction.description = script.description;
+      } else if (meta.description) {
+        deployedFunction.description = meta.description;
+      } else {
+        log.verbose('no description in function metadata', { functionId });
+      }
 
       if (meta.inputSchema) {
         deployedFunction.inputSchema = meta.inputSchema;
       } else {
         log.verbose('no input schema in function metadata', { functionId });
       }
+      if (meta.outputSchema) {
+        deployedFunction.outputSchema = meta.outputSchema;
+      } else {
+        log.verbose('no output schema in function metadata', { functionId });
+      }
 
       setUserFunctionUrlInMetadata(getMeta(deployedFunction), `/${space.id}/${functionId}`);
 

package/src/{components/ScriptToolbar → hooks}/format.ts

@@ -11,7 +11,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 { SCRIPT_PLUGIN } from '../meta';
 
 export type FormatActionProperties = { type: 'format' };
 

package/src/hooks/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './deploy';
+export * from './format';
+export * from './template';
+export * from './view';
+
+export * from './useToolbarAction';
+export * from './useToolbarState';

package/src/{components/ScriptToolbar/templateSelect.ts → hooks/template.ts}

@@ -8,8 +8,8 @@ import { FUNCTIONS_PRESET_META_KEY, type ScriptType } from '@dxos/functions';
 import { getMeta } from '@dxos/live-object';
 import { createMenuItemGroup, createMenuAction } from '@dxos/react-ui-menu';
 
-import { SCRIPT_PLUGIN } from '../../meta';
-import { templates } from '../../templates';
+import { SCRIPT_PLUGIN } from '../meta';
+import { templates } from '../templates';
 
 export type TemplateActionProperties = { type: 'template'; value: string };
 

package/src/{components/ScriptToolbar → hooks}/useToolbarAction.ts

@@ -10,7 +10,7 @@ import { type MenuAction, type MenuActionHandler } from '@dxos/react-ui-menu';
 
 import { type DeployActionProperties, useDeployHandler, useCopyHandler } from './deploy';
 import { type FormatActionProperties, useFormatHandler } from './format';
-import { type TemplateActionProperties, useTemplateSelectHandler } from './templateSelect';
+import { type TemplateActionProperties, useTemplateSelectHandler } from './template';
 import { type ScriptToolbarState } from './useToolbarState';
 import { type ViewActionProperties } from './view';
 

package/src/{components/ScriptToolbar → hooks}/view.ts

@@ -4,7 +4,7 @@
 
 import { createMenuAction, createMenuItemGroup } from '@dxos/react-ui-menu';
 
-import { SCRIPT_PLUGIN } from '../../meta';
+import { SCRIPT_PLUGIN } from '../meta';
 
 export type ViewType = 'editor' | 'split' | 'debug';
 

package/src/index.ts

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './bundler';
 export { ScriptCapabilities } from './capabilities';
 export * from './components';
 export * from './meta';

package/src/meta.ts

@@ -9,8 +9,10 @@ export const SCRIPT_PLUGIN = 'dxos.org/plugin/script';
 export const meta = {
   id: SCRIPT_PLUGIN,
   name: 'Scripts',
-  description: 'Distributed functions.',
+  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.',
   icon: 'ph--code--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/experimental/plugin-explorer',
   tags: ['experimental'],
+  screenshots: ['https://dxos.network/plugin-details-scripts-dark.png'],
 } satisfies PluginMeta;

package/src/templates/discord.ts

@@ -0,0 +1,88 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// @ts-ignore
+import { createStatic, EchoObject, defineFunction, DXN, Filter, ObjectId, S } from 'dxos:functions';
+import {
+  FetchHttpClient,
+  // @ts-ignore
+} from 'https://esm.sh/@effect/platform@0.77.2?deps=effect@3.13.3';
+// @ts-ignore
+import { DiscordConfig, DiscordREST, DiscordRESTMemoryLive } from 'https://esm.sh/dfx@0.113.0?deps=effect@3.13.3';
+// @ts-ignore
+import { Effect, Config, Redacted } from 'https://esm.sh/effect@3.13.3';
+
+const MessageSchema = S.Struct({
+  id: S.String,
+  foreignId: S.Number,
+  content: S.String,
+}).pipe(EchoObject('example.com/type/Message', '0.1.0'));
+
+export default defineFunction({
+  inputSchema: S.Struct({
+    // TODO(wittjosiah): Remove. This is used to provide a terminal for a cron trigger.
+    tick: S.optional(S.String),
+    channelId: S.String,
+    pageSize: S.optional(S.Number),
+    queueId: S.String,
+  }),
+
+  outputSchema: S.Struct({
+    newMessages: S.Number,
+  }),
+
+  handler: ({
+    event: {
+      data: { channelId, queueId, pageSize = 5 },
+    },
+    context: { space },
+  }: any) =>
+    Effect.gen(function* () {
+      const { token } = yield* Effect.tryPromise(() =>
+        space.db.query(Filter.typename('dxos.org/type/AccessToken', { source: 'discord.com' })).first(),
+      );
+
+      const enqueueMessages = Effect.gen(function* () {
+        const rest = yield* DiscordREST;
+        const { objects } = yield* Effect.tryPromise(() => space.queues.queryQueue(DXN.parse(queueId)));
+
+        let newMessages = 0;
+        let lastMessage = objects.at(-1);
+        while (true) {
+          // NOTE: If `after` is specified, the specified message is included in the results.
+          const messages = yield* rest
+            .getChannelMessages(channelId, { after: lastMessage?.foreignId, limit: pageSize })
+            .pipe((res: any) => res.json);
+          if (messages.length === 1) {
+            break;
+          }
+          const queueMessages = messages
+            .map((message: any) =>
+              createStatic(MessageSchema, {
+                id: ObjectId.random(),
+                foreignId: parseInt(message.id),
+                content: message.content,
+              }),
+            )
+            .slice(lastMessage ? 1 : 0)
+            .toReversed();
+          yield* Effect.tryPromise(() => space.queues.insertIntoQueue(DXN.parse(queueId), queueMessages));
+          newMessages += queueMessages.length;
+          lastMessage = queueMessages.at(-1);
+        }
+
+        return { newMessages };
+      }).pipe(
+        Effect.provide(DiscordRESTMemoryLive),
+        Effect.provide(
+          DiscordConfig.layerConfig({
+            token: Config.succeed(Redacted.make(token)),
+          }),
+        ),
+        Effect.provide(FetchHttpClient.layer),
+      );
+
+      return yield* enqueueMessages;
+    }),
+});

package/src/templates/echo.ts

@@ -11,5 +11,9 @@ export default async ({
   },
 }: any) => {
   const data = await request.json();
-  return new Response(JSON.stringify(data ?? {}), { headers: { 'Content-Type': 'application/json' } });
+  return new Response(JSON.stringify(data ?? {}), {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
 };

package/src/templates/forex-effect.ts

@@ -0,0 +1,44 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// @ts-ignore
+import { defineFunction, S } from 'dxos:functions';
+import {
+  HttpClient,
+  HttpClientRequest,
+  FetchHttpClient,
+  // @ts-ignore
+} from 'https://esm.sh/@effect/platform@0.77.2?deps=effect@3.13.3';
+// @ts-ignore
+import { Effect, Schedule } from 'https://esm.sh/effect@3.13.3';
+
+/**
+ * Returns the exchange rate between two currencies.
+ */
+export default defineFunction({
+  inputSchema: S.Struct({
+    from: S.String.annotations({ description: 'The source currency' }),
+    to: S.String.annotations({ description: 'The target currency' }),
+  }),
+
+  outputSchema: S.Struct({
+    rate: S.Number,
+  }),
+
+  handler: async ({
+    event: {
+      data: { from, to },
+    },
+  }: any) =>
+    Effect.gen(function* () {
+      const res = yield* HttpClientRequest.get(`https://free.ratesdb.com/v1/rates?from=${from}&to=${to}`).pipe(
+        HttpClient.execute,
+        Effect.flatMap((res: any) => res.json),
+        Effect.timeout('1 second'),
+        Effect.retry(Schedule.exponential(1000).pipe(Schedule.compose(Schedule.recurs(3)))),
+        Effect.scoped,
+      );
+      return { rate: res.data.rates[to].toString() };
+    }).pipe(Effect.provide(FetchHttpClient.layer)),
+});

package/src/templates/forex.ts

@@ -1,21 +1,29 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
+// @ts-ignore
+import { defineFunction, S } from 'dxos:functions';
+
 /**
  * Returns the exchange rate between two currencies.
  */
-export default async ({
-  event: {
-    data: { request },
-  },
-}: any) => {
-  const { args: [from = 'EUR', to = 'USD'] = [] } = await request.json();
+export default defineFunction({
+  inputSchema: S.Struct({
+    from: S.String.annotations({ description: 'The source currency' }),
+    to: S.String.annotations({ description: 'The target currency' }),
+  }),
 
-  const res = await fetch(`https://free.ratesdb.com/v1/rates?from=${from}&to=${to}`);
-  const {
-    data: { rates },
-  } = await res.json();
+  handler: async ({
+    event: {
+      data: { from, to },
+    },
+  }: any) => {
+    const res = await fetch(`https://free.ratesdb.com/v1/rates?from=${from}&to=${to}`);
+    const {
+      data: { rates },
+    } = await res.json();
 
-  return new Response(rates[to].toString());
-};
+    return rates[to].toString();
+  },
+});

package/src/templates/index.ts

@@ -7,10 +7,14 @@ import chat from './chat.ts?raw';
 // @ts-ignore
 import chess from './chess.ts?raw';
 // @ts-ignore
+import discord from './discord.ts?raw';
+// @ts-ignore
 import echo from './echo.ts?raw';
 // @ts-ignore
 import email from './email.ts?raw';
 // @ts-ignore
+import forexEffect from './forex-effect.ts?raw';
+// @ts-ignore
 import forex from './forex.ts?raw';
 
 const removeHeader = (str: string) => str.split('\n').slice(4).join('\n');
@@ -33,6 +37,11 @@ export const templates: Template[] = [
     name: 'Forex',
     source: removeHeader(forex),
   },
+  {
+    id: 'dxos.org/script/forex-effect',
+    name: 'Forex (Effect)',
+    source: removeHeader(forexEffect),
+  },
   {
     id: 'dxos.org/script/gpt',
     name: 'Gpt',
@@ -51,4 +60,10 @@ export const templates: Template[] = [
     source: removeHeader(email),
     presetId: 'dxos.org/function/email',
   },
+  {
+    id: 'dxos.org/script/discord',
+    name: 'Discord',
+    source: removeHeader(discord),
+    presetId: 'dxos.org/function/discord',
+  },
 ];

package/src/translations.ts

@@ -17,6 +17,8 @@ export default [
         'object title placeholder': 'New script',
         'create object label': 'Create script',
         'create stack section label': 'Create script',
+        'description label': 'Description',
+        'description placeholder': 'Describe what the script does.',
         'binding placeholder': 'Function name',
         'function request placeholder': 'Function request',
         'deploy label': 'Deploy',