@dxos/plugin-script 0.8.4-main.70d3990 → 0.8.4-main.765dc60934

package/src/containers/ScriptProperties/FunctionBinding.tsx

@@ -0,0 +1,83 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type ChangeEvent, useCallback } from 'react';
+
+import { type Script } from '@dxos/compute';
+import { Operation } from '@dxos/compute';
+import { Filter, Obj, Ref } from '@dxos/echo';
+import { getUserFunctionIdInMetadata } from '@dxos/functions';
+import { getInvocationUrl } from '@dxos/functions-runtime';
+import { useClient } from '@dxos/react-client';
+import { useQuery } from '@dxos/react-client/echo';
+import { Clipboard, Input, useControlledState, useTranslation } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+
+export type FunctionBindingProps = { object: Script.Script };
+
+export const FunctionBinding = ({ object }: FunctionBindingProps) => {
+  const { t } = useTranslation(meta.id);
+  const client = useClient();
+  const db = Obj.getDatabase(object);
+
+  const [fn] = useQuery(db, Filter.type(Operation.PersistentOperation, { source: Ref.make(object) }));
+  const functionId = fn && getUserFunctionIdInMetadata(Obj.getMeta(fn));
+  const functionUrl =
+    functionId &&
+    getInvocationUrl(functionId, client.config.values.runtime?.services?.edge?.url ?? '', {
+      spaceId: db?.spaceId,
+    });
+
+  const [binding, setBinding] = useControlledState(fn?.binding ?? '');
+  const handleBindingChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => setBinding(event.target.value),
+    [setBinding],
+  );
+
+  const handleBindingBlur = useCallback(() => {
+    if (fn) {
+      Obj.update(fn, (fn) => {
+        fn.binding = binding;
+      });
+    }
+  }, [fn, binding]);
+
+  if (!fn) {
+    return null;
+  }
+
+  return (
+    <div className='flex flex-col'>
+      <Form.Section label={t('remote-function-settings.heading')} />
+
+      {functionUrl && (
+        <Input.Root>
+          <Input.Label>{t('function-url.label')}</Input.Label>
+          <Input.TextInput
+            disabled
+            value={functionUrl}
+            onChange={(event) => {
+              Obj.update(fn, (fn) => {
+                fn.name = event.target.value;
+              });
+            }}
+          />
+          <Clipboard.IconButton value={functionUrl} />
+        </Input.Root>
+      )}
+
+      <Input.Root>
+        <Input.Label>{t('function-binding.label')}</Input.Label>
+        <Input.TextInput
+          placeholder={t('function-binding.placeholder')}
+          value={binding}
+          onChange={handleBindingChange}
+          onBlur={handleBindingBlur}
+        />
+      </Input.Root>
+    </div>
+  );
+};

package/src/containers/ScriptProperties/FunctionPublishing.tsx

@@ -0,0 +1,121 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Octokit } from '@octokit/core';
+import React, { useCallback, useState } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { SettingsOperation } from '@dxos/app-toolkit';
+import { type Script } from '@dxos/compute';
+import { Filter, Obj } from '@dxos/echo';
+import { log } from '@dxos/log';
+import { useQuery } from '@dxos/react-client/echo';
+import { Button, Clipboard, Message, useAsyncEffect, useTranslation } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+import { AccessToken } from '@dxos/types';
+import { kebabize } from '@dxos/util';
+
+import { meta } from '#meta';
+
+export type FunctionPublishingProps = { object: Script.Script };
+
+// TODO(burdon): Move to separate tab?
+export const FunctionPublishing = ({ object }: FunctionPublishingProps) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const db = Obj.getDatabase(object);
+
+  const [githubToken] = useQuery(db, Filter.type(AccessToken.AccessToken, { source: 'github.com' }));
+  const gistKey = Obj.getMeta(object).keys.find(({ source }) => source === 'github.com');
+  const [gistUrl, setGistUrl] = useState<string | undefined>();
+
+  useAsyncEffect(async () => {
+    const token = githubToken?.token;
+    const gistId = gistKey?.id;
+    if (!token || !gistId) {
+      setGistUrl(undefined);
+      return;
+    }
+
+    try {
+      const octokit = new Octokit({ auth: githubToken.token });
+      const response = await octokit.request('GET /gists/{gist_id}', {
+        gist_id: gistId,
+      });
+      setGistUrl(response.data.html_url);
+    } catch (err) {
+      log.catch(err);
+      setGistUrl(undefined);
+    }
+  }, [githubToken, gistKey]);
+
+  const handleOpenTokenManager = useCallback(
+    () =>
+      invokePromise(SettingsOperation.Open, {
+        plugin: 'org.dxos.plugin.token-manager',
+      }),
+    [invokePromise],
+  );
+
+  const [publishing, setPublishing] = useState(false);
+  const handlePublish = useCallback(async () => {
+    setPublishing(true);
+    const octokit = new Octokit({ auth: githubToken.token });
+    const source = await object.source.load();
+    const filename = object.name ? kebabize(object.name) : 'composer-script';
+    const files = { [`${filename}.ts`]: { content: source.content } };
+
+    try {
+      // TODO(wittjosiah): Factor out to intent.
+      const meta = Obj.getMeta(object);
+      const githubKey = meta.keys.find(({ source }) => source === 'github.com');
+      const gistId = githubKey?.id;
+      if (gistId) {
+        await octokit.request('PATCH /gists/{gist_id}', {
+          gist_id: gistId,
+          files,
+        });
+      } else {
+        const response = await octokit.request('POST /gists', {
+          public: true,
+          files,
+        });
+        const gistId = response.data.id;
+        if (gistId) {
+          Obj.update(object, (object) => {
+            Obj.getMeta(object).keys.push({ source: 'github.com', id: gistId });
+          });
+        }
+      }
+    } finally {
+      setPublishing(false);
+    }
+  }, [object, githubToken]);
+
+  return (
+    <div className='flex flex-col'>
+      <Form.Section label={t('script-publish-settings.label')} description={t('script-publish-settings.description')} />
+
+      {!githubToken && (
+        <div className='flex flex-col py-form-gap'>
+          <Message.Root valence='info'>
+            <Message.Title>{t('no-github-token.label')}</Message.Title>
+          </Message.Root>
+          <div className='flex pt-form-gap'>
+            <Button onClick={handleOpenTokenManager}>{t('open-token-manager.label')}</Button>
+          </div>
+        </div>
+      )}
+
+      {githubToken && (
+        <div className='flex justify-end gap-2'>
+          {gistUrl && <Clipboard.IconButton value={gistUrl} />}
+          <Button disabled={publishing} onClick={handlePublish}>
+            {t('publish.label')}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/containers/ScriptProperties/ScriptProperties.stories.tsx

@@ -0,0 +1,76 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Blueprint } from '@dxos/compute';
+import { Script } from '@dxos/compute';
+import { Operation } from '@dxos/compute';
+import { Filter } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { ObjectProperties } from '@dxos/react-ui-form';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Text } from '@dxos/schema';
+
+import { createScript } from '#testing';
+import { translations } from '#translations';
+
+import { ScriptProperties } from './ScriptProperties';
+
+type DefaultStoryProps = {};
+
+const DefaultStory = (_: DefaultStoryProps) => {
+  const [space] = useSpaces();
+  const [script] = useQuery(space?.db, Filter.type(Script.Script));
+  if (!script) {
+    return <Loading />;
+  }
+
+  return (
+    <ObjectProperties object={script}>
+      <ScriptProperties role='object-properties' subject={script} />
+    </ObjectProperties>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-script/containers/ScriptProperties',
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Script.Script, Operation.PersistentOperation, Blueprint.Blueprint, Text.Text],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* initializeIdentity(client);
+              const [space] = client.spaces.get();
+              yield* Effect.promise(() => space.waitUntilReady());
+              createScript(space);
+            }),
+        }),
+        StorybookPlugin({}),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<DefaultStoryProps>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/ScriptProperties/ScriptProperties.tsx

@@ -0,0 +1,24 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { type Script } from '@dxos/compute';
+
+import { BlueprintEditor } from './BlueprintEditor';
+import { FunctionBinding } from './FunctionBinding';
+import { FunctionPublishing } from './FunctionPublishing';
+
+export type ScriptPropertiesProps = AppSurface.ObjectPropertiesProps<Script.Script>;
+
+export const ScriptProperties = ({ subject: object }: ScriptPropertiesProps) => {
+  return (
+    <div className='flex flex-col py-form-gap gap-form-section-gap'>
+      <FunctionBinding object={object} />
+      <BlueprintEditor object={object} />
+      <FunctionPublishing object={object} />
+    </div>
+  );
+};

package/src/containers/ScriptProperties/index.ts

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

package/src/containers/TestContainer/TestContainer.tsx

@@ -0,0 +1,44 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { type Script } from '@dxos/compute';
+import { Context } from '@dxos/context';
+import { Obj } from '@dxos/echo';
+import { FunctionsServiceClient } from '@dxos/functions-runtime/edge';
+import { Panel } from '@dxos/react-ui';
+
+import { TestPanel } from '#components';
+import { useDeployDeps } from '#hooks';
+
+export type TestContainerProps = {
+  role: string;
+  script: Script.Script;
+};
+
+export const TestContainer = ({ role, script }: TestContainerProps) => {
+  const { client, fn, existingFunctionId } = useDeployDeps({ script });
+  const spaceId = Obj.getDatabase(script)?.spaceId;
+
+  const functionsClient = useMemo(() => FunctionsServiceClient.fromClient(client), [client]);
+
+  const handleInvoke = useCallback(
+    async (input: unknown) => {
+      if (!fn) {
+        throw new Error('Function not deployed');
+      }
+      return functionsClient.invoke(Context.default(), fn, input, { spaceId });
+    },
+    [fn, functionsClient, spaceId],
+  );
+
+  return (
+    <Panel.Root role={role} className='dx-document'>
+      <Panel.Content asChild>
+        <TestPanel onInvoke={existingFunctionId ? handleInvoke : undefined} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};

package/src/containers/TestContainer/index.ts

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

package/src/containers/index.ts

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

package/src/e2e/ai.test.ts

@@ -0,0 +1,93 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe } from '@effect/vitest';
+import { test } from 'vitest';
+
+import { Client } from '@dxos/client';
+import { type Space } from '@dxos/client-protocol';
+import { Operation } from '@dxos/compute';
+import { configPreset } from '@dxos/config';
+import { Context } from '@dxos/context';
+import { FunctionsServiceClient } from '@dxos/functions-runtime/edge';
+import { bundleFunction } from '@dxos/functions-runtime/native';
+import { FunctionRuntimeKind } from '@dxos/protocols';
+import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
+
+// To heavy to run in CI.
+describe.skip('Function', { tags: ['functions-e2e'] }, () => {
+  const config = configPreset({ edge: 'local' });
+
+  test('bundle anthropic function', { timeout: 120_000 }, async () => {
+    await bundleFunction({
+      entryPoint: new URL('../templates/anthropic.ts', import.meta.url).pathname,
+      verbose: true,
+    });
+  });
+
+  test('deploy empty function', { timeout: 120_000 }, async () => {
+    const { space, functionsServiceClient } = await setup();
+
+    await sync(space);
+    const func = await deployFunction(
+      space,
+      functionsServiceClient,
+      new URL('../templates/ping.ts', import.meta.url).pathname,
+    );
+    console.log(func);
+    throw new Error('test');
+  });
+
+  test('deploy and invoke anthropic function', { timeout: 120_000 }, async () => {
+    const { space, functionsServiceClient } = await setup();
+    await sync(space);
+    const func = await deployFunction(
+      space,
+      functionsServiceClient,
+      new URL('../templates/anthropic.ts', import.meta.url).pathname,
+    );
+
+    const result = await functionsServiceClient.invoke(Context.default(), func, {
+      message: 'Hello, world!',
+    });
+    console.log(result);
+  });
+
+  const setup = async () => {
+    const client = await new Client({ config, types: [Operation.PersistentOperation] }).initialize();
+    await client.halo.createIdentity();
+
+    const space = await client.spaces.create();
+    await space.waitUntilReady();
+    await space.internal.setEdgeReplicationPreference(EdgeReplicationSetting.ENABLED);
+
+    const functionsServiceClient = FunctionsServiceClient.fromClient(client);
+    return { client, space, functionsServiceClient };
+  };
+
+  const sync = async (space: Space) => {
+    await space.db.flush();
+    await space.internal.syncToEdge({
+      onProgress: (state) =>
+        console.log(state ? `${state.unsyncedDocumentCount} documents syncing...` : 'connecting to edge...'),
+    });
+  };
+
+  const deployFunction = async (space: Space, functionsServiceClient: FunctionsServiceClient, entryPoint: string) => {
+    const artifact = await bundleFunction({
+      entryPoint,
+      verbose: true,
+    });
+    const func = await functionsServiceClient.deploy(Context.default(), {
+      version: '0.0.1',
+      ownerPublicKey: space.key,
+      entryPoint: artifact.entryPoint,
+      assets: artifact.assets,
+      runtime: FunctionRuntimeKind.enums.WORKER_LOADER,
+    });
+
+    space.db.add(func);
+    return func;
+  };
+});

package/src/e2e/deploy.test.ts

@@ -0,0 +1,66 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { readFile } from 'node:fs/promises';
+import { describe, expect, test } from 'vitest';
+
+import { Client, type Config } from '@dxos/client';
+import { createEdgeIdentity } from '@dxos/client/edge';
+import { configPreset } from '@dxos/config';
+import { Context } from '@dxos/context';
+import { bundleFunction } from '@dxos/functions-runtime/bundler';
+import { FunctionsServiceClient } from '@dxos/functions-runtime/edge';
+import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+
+// TODO(wittjosiah): Re-enable once @dxos/compute.js is available at the R2 dev bucket
+// (https://pub-5745ae82e450484aa28f75fc6a175935.r2.dev/dev/@dxos/compute.js currently 404s).
+describe.skip('Functions deployment', { tags: ['functions-e2e'] }, () => {
+  test('deploys FOREX (effect) function and invokes it via EDGE (main)', { timeout: 120_000 }, async () => {
+    const config = configPreset({ edge: 'main' });
+    await testDeploy(config);
+  });
+
+  test('deploys FOREX (effect) function and invokes it via EDGE (production)', { timeout: 120_000 }, async () => {
+    const config = configPreset({ edge: 'production' });
+    await testDeploy(config);
+  });
+
+  const testDeploy = async (config: Config) => {
+    await using client = await new Client({ config }).initialize();
+    await client.halo.createIdentity();
+
+    const space = await client.spaces.create();
+    await space.waitUntilReady();
+
+    // Inline echo function source.
+    const source = await readFile(new URL('../templates/forex-effect.ts', import.meta.url), 'utf-8');
+
+    // Bundle and upload.
+    const buildResult = await bundleFunction({ source });
+    if ('error' in buildResult) {
+      throw buildResult.error ?? new Error('Bundle creation failed');
+    }
+    const functionsServiceClient = FunctionsServiceClient.fromClient(client);
+
+    const func = await functionsServiceClient.deploy(Context.default(), {
+      ownerPublicKey: space.key,
+      version: '0.0.1',
+      entryPoint: buildResult.entryPoint,
+      assets: buildResult.assets,
+    });
+
+    // Invoke deployed function via EDGE directly.
+    const edgeClient = client.edge.http;
+    invariant(edgeClient, 'edgeClient is required');
+    edgeClient.setIdentity(createEdgeIdentity(client));
+
+    const input = { from: 'USD', to: 'EUR' };
+    const result = await functionsServiceClient.invoke(Context.default(), func, input);
+    log.info('>>> result', { result, func });
+    const resultNumber = Number(result);
+    expect(resultNumber).toBeGreaterThan(0);
+    expect(resultNumber).toBeLessThan(100);
+  };
+});