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

package/src/capabilities/artifact-definition.ts

@@ -2,15 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Schema } from 'effect';
+
+import { createTool, ToolResult } from '@dxos/ai';
 import { Capabilities, contributes, createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
-import { defineArtifact, defineTool, ToolResult } from '@dxos/artifact';
+import { ArtifactId, defineArtifact } from '@dxos/artifact';
 import { createArtifactElement } from '@dxos/assistant';
-import { ObjectId, S } from '@dxos/echo-schema';
-import { ScriptType } from '@dxos/functions/types';
+import { ScriptType } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
 import { SpaceAction } from '@dxos/plugin-space/types';
-import { create, makeRef, type Space } from '@dxos/react-client/echo';
-import { TextType } from '@dxos/schema';
+import { Filter, live, makeRef, type Space } from '@dxos/react-client/echo';
+import { DataType } from '@dxos/schema';
 
 import { meta } from '../meta';
 // TODO(burdon): Factor out.
@@ -71,28 +73,28 @@ export default () => {
       <apis>
         export function defineFunction(params: { 
           description: string, 
-          inputSchema: S.Schema, 
-          outputSchema: S.Schema, 
+          inputSchema: Schema.Schema, 
+          outputSchema: Schema.Schema, 
           handler: (params: { event: { data: TInput } }) => Promise<TOutput> 
         }): FunctionDefinition
         /**
          * Effect Schema
          */
-        export const S; 
+        export const Schema; 
 
         // Examples: 
 
-        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.String
+        Schema.Number
+        Schema.Boolean
+        Schema.Struct({
+          from: Schema.String.annotations({ description: 'The source currency' }),
+          to: Schema.String.annotations({ description: 'The target currency' }),
         })
-        S.Array(S.String)
-        S.Union(S.String, S.Number)
-        S.optional(S.String)
-        S.String.annotations({ description: 'The source currency' })
+        Schema.Array(Schema.String)
+        Schema.Union(Schema.String, Schema.Number)
+        Schema.optional(Schema.String)
+        Schema.String.annotations({ description: 'The source currency' })
       </apis>
 
       <handler_function>
@@ -113,13 +115,13 @@ export default () => {
         export default defineFunction({
           description: 'Returns the exchange rate between two currencies.',
 
-          inputSchema: S.Struct({
-            from: S.String.annotations({ description: 'The source currency' }),
-            to: S.String.annotations({ description: 'The target currency' }),
+          inputSchema: Schema.Struct({
+            from: Schema.String.annotations({ description: 'The source currency' }),
+            to: Schema.String.annotations({ description: 'The target currency' }),
           }),
 
-          outputSchema: S.Struct({
-            rate: S.String.annotations({ description: 'The exchange rate' }),
+          outputSchema: Schema.Struct({
+            rate: Schema.String.annotations({ description: 'The exchange rate' }),
           }),
 
           handler: async ({
@@ -139,23 +141,23 @@ export default () => {
   `,
     schema: ScriptType,
     tools: [
-      defineTool(meta.id, {
+      createTool(meta.id, {
         name: 'create',
         description: 'Create a new script. Returns the artifact definition for the script',
         caption: 'Creating script...',
-        schema: S.Struct({
-          name: S.String.annotations({ description: 'The name of the script' }),
-          code: S.String.annotations({
+        schema: Schema.Struct({
+          name: Schema.String.annotations({ description: 'The name of the script' }),
+          code: Schema.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 = create(ScriptType, {
+          const script = live(ScriptType, {
             name,
             source: makeRef(
-              create(TextType, {
+              live(DataType.Text, {
                 content: code,
               }),
             ),
@@ -172,17 +174,17 @@ export default () => {
           return ToolResult.Success(createArtifactElement(script.id));
         },
       }),
-      defineTool(meta.id, {
+      createTool(meta.id, {
         name: 'inspect',
         description: 'Inspect a script. Returns the artifact definition for the script',
         caption: 'Inspecting script...',
-        schema: S.Struct({
-          id: ObjectId,
+        schema: Schema.Struct({
+          id: ArtifactId,
         }),
         execute: async ({ id }, { extensions }) => {
           invariant(extensions?.space, 'No space');
 
-          const script = (await extensions.space.db.query({ id }).first()) as ScriptType;
+          const script = (await extensions.space.db.query(Filter.ids(id)).first()) as ScriptType;
           const { content } = await script.source.load();
 
           return ToolResult.Success({
@@ -191,20 +193,20 @@ export default () => {
           });
         },
       }),
-      defineTool(meta.id, {
+      createTool(meta.id, {
         name: 'update',
         description: 'Update a script. Returns the artifact definition for the script',
         caption: 'Updating script...',
-        schema: S.Struct({
-          id: ObjectId,
-          code: S.String.annotations({
+        schema: Schema.Struct({
+          id: ArtifactId,
+          code: Schema.String.annotations({
             description: 'The full code of the script in JavaScript or TypeScript. Must be valid executable code.',
           }),
         }),
         execute: async ({ id, code }, { extensions }) => {
           invariant(extensions?.space, 'No space');
 
-          const script = (await extensions.space.db.query({ id }).first()) as ScriptType;
+          const script = (await extensions.space.db.query(Filter.ids(id)).first()) as ScriptType;
           const source = await script.source.load();
           if (!source) {
             return ToolResult.Error('Script not found');

package/src/capabilities/intent-resolver.ts

@@ -3,13 +3,13 @@
 //
 
 import { Octokit } from '@octokit/core';
-import { isNotNullable } from 'effect/Predicate';
+import { Predicate } from 'effect';
 
 import { contributes, Capabilities, createResolver, createIntent, LayoutAction } from '@dxos/app-framework';
-import { ScriptType } from '@dxos/functions/types';
-import { create, makeRef } from '@dxos/live-object';
+import { ScriptType } from '@dxos/functions';
+import { live, makeRef } from '@dxos/live-object';
 import { TokenManagerAction } from '@dxos/plugin-token-manager/types';
-import { TextType } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
 
 import { DEPLOYMENT_DIALOG } from '../components';
 import { defaultScriptsForIntegration } from '../meta';
@@ -47,9 +47,9 @@ export default () =>
 
         return {
           data: {
-            object: create(ScriptType, {
+            object: live(ScriptType, {
               name,
-              source: makeRef(create(TextType, { content })),
+              source: makeRef(live(DataType.Text, { content })),
             }),
           },
         };
@@ -60,7 +60,7 @@ export default () =>
       resolve: async ({ accessToken }) => {
         const scriptTemplates = (defaultScriptsForIntegration[accessToken.source] ?? [])
           .map((id) => templates.find((t) => t.id === id))
-          .filter(isNotNullable);
+          .filter(Predicate.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 { InvocationTracePanel } from '@dxos/devtools';
+import { InvocationTraceContainer } from '@dxos/devtools';
 import { isInstanceOf } from '@dxos/echo-schema';
-import { ScriptType } from '@dxos/functions/types';
+import { ScriptType } from '@dxos/functions';
 import { SettingsStore } from '@dxos/local-storage';
 import { getSpace } from '@dxos/react-client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
-import { type AccessTokenType } from '@dxos/schema';
+import { type DataType } from '@dxos/schema';
 
 import { ScriptCapabilities } from './capabilities';
 import {
@@ -84,7 +84,7 @@ export default () =>
         const space = getSpace(data.companionTo);
         return (
           <StackItem.Content role={role}>
-            <InvocationTracePanel space={space} script={data.companionTo} detailAxis='block' />
+            <InvocationTraceContainer 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: AccessTokenType; scriptTemplates: any } } =>
+      filter: (data): data is { props: { accessToken: DataType.AccessToken; 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 { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 
 import { meta } from '../meta';
 import { ScriptSettingsSchema } from '../types';
 
 export default () => {
-  const settings = create(ScriptSettingsSchema, { editorInputMode: 'vscode' });
+  const settings = live(ScriptSettingsSchema, { editorInputMode: 'vscode' });
   return contributes(Capabilities.Settings, { schema: ScriptSettingsSchema, prefix: meta.id, value: settings });
 };

package/src/compiler/compiler.ts

@@ -23,7 +23,7 @@ export class Compiler {
 
   constructor(private readonly _options: ts.CompilerOptions = defaultOptions) {}
 
-  async initialize() {
+  async initialize(): Promise<void> {
     if (this._env) {
       return;
     }
@@ -40,12 +40,12 @@ export class Compiler {
     return this._env;
   }
 
-  setFile(fileName: string, content: string) {
+  setFile(fileName: string, content: string): void {
     invariant(this._fsMap, 'File system map not initialized.');
     this.environment.createFile(fileName, content);
   }
 
-  compile(fileName: string) {
+  compile(fileName: string): ts.EmitOutput {
     return this.environment.languageService.getEmitOutput(fileName);
   }
 }

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({ tooltips: true })],
+  decorators: [withTheme, withLayout()],
 };
 
 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 AccessTokenType } from '@dxos/schema';
+import { type DataType } 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: AccessTokenType;
+  accessToken: DataType.AccessToken;
   scriptTemplates: Template[];
 };
 

package/src/components/ScriptContainer.tsx

@@ -4,7 +4,7 @@
 
 import React, { useMemo } from 'react';
 
-import { type ScriptType } from '@dxos/functions/types';
+import { type ScriptType } from '@dxos/functions';
 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 classNames='divide-y divide-separator'>
+    <StackItem.Content toolbar>
       <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({ tooltips: true })],
+  decorators: [withTheme, withLayout()],
 };
 
 export default meta;

package/src/components/ScriptToolbar/ScriptToolbar.tsx

@@ -2,21 +2,24 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import { Rx } from '@effect-rx/rx-react';
+import React, { useMemo } from 'react';
 
-import { type ScriptType } from '@dxos/functions/types';
+import { type ScriptType } from '@dxos/functions';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { ElevationProvider, type ThemedClassName } from '@dxos/react-ui';
+import { ElevationProvider, useTranslation, type ThemedClassName } from '@dxos/react-ui';
 import { stackItemContentToolbarClassNames } from '@dxos/react-ui-editor';
-import { createGapSeparator, MenuProvider, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
+import { createGapSeparator, MenuProvider, rxFromSignal, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
 
 import {
+  type CreateDeployOptions,
   type ScriptToolbarState,
   createDeploy,
   createFormat,
   createTemplateSelect,
-  useToolbarAction,
+  useDeployDeps,
 } from '../../hooks';
+import { SCRIPT_PLUGIN } from '../../meta';
 
 export type ScriptToolbarProps = ThemedClassName<{
   role?: string;
@@ -24,26 +27,32 @@ export type ScriptToolbarProps = ThemedClassName<{
   state: ScriptToolbarState;
 }>;
 
-const createToolbar = (state: ScriptToolbarState) => {
-  const templateSelect = createTemplateSelect();
-  const format = createFormat();
-  const gap = createGapSeparator();
-  const deploy = createDeploy(state);
-  return {
-    nodes: [...templateSelect.nodes, ...format.nodes, ...gap.nodes, ...deploy.nodes],
-    edges: [...templateSelect.edges, ...format.edges, ...gap.edges, ...deploy.edges],
-  };
-};
+const createToolbar = ({ state, script, ...options }: CreateDeployOptions) =>
+  Rx.make((get) =>
+    get(
+      rxFromSignal(() => {
+        const templateSelect = createTemplateSelect(script);
+        const format = createFormat(script);
+        const gap = createGapSeparator();
+        const deploy = createDeploy({ state, script, ...options });
+        return {
+          nodes: [...templateSelect.nodes, ...format.nodes, ...gap.nodes, ...deploy.nodes],
+          edges: [...templateSelect.edges, ...format.edges, ...gap.edges, ...deploy.edges],
+        };
+      }),
+    ),
+  );
 
 export const ScriptToolbar = ({ script, role, state, classNames }: ScriptToolbarProps) => {
-  const handleAction = useToolbarAction({ state, script });
-  const toolbarCreator = useCallback(() => createToolbar(state), [state]);
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const options = useDeployDeps({ script });
+  const toolbarCreator = useMemo(() => createToolbar({ state, script, t, ...options }), [state, script, options, t]);
   const menu = useMenuActions(toolbarCreator);
 
   return (
     <div role='none' className={stackItemContentToolbarClassNames(role)}>
       <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-        <MenuProvider {...menu} onAction={handleAction} attendableId={fullyQualifiedId(script)}>
+        <MenuProvider {...menu} 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/types';
+import { FunctionType, type ScriptType, getInvocationUrl, getUserFunctionUrlInMetadata } from '@dxos/functions';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
+import { Filter, getMeta, getSpace, Ref, useQuery } from '@dxos/react-client/echo';
 import { Button, Clipboard, Input, useControlledState, useTranslation } from '@dxos/react-ui';
-import { AccessTokenType } from '@dxos/schema';
+import { DataType } 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.schema(FunctionType, { source: object }));
+  const [fn] = useQuery(space, Filter.type(FunctionType, { source: Ref.make(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.schema(AccessTokenType, { source: 'github.com' }));
+  const [githubToken] = useQuery(space, Filter.type(DataType.AccessToken, { source: 'github.com' }));
   const gistKey = getMeta(object).keys.find(({ source }) => source === 'github.com');
   const [gistUrl, setGistUrl] = useState<string | undefined>();
 

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -18,7 +18,6 @@ import {
   autocomplete,
   createBasicExtensions,
   createThemeExtensions,
-  editorFullWidth,
   type EditorInputMode,
   editorMonospace,
   EditorView,
@@ -64,15 +63,10 @@ export const TypescriptEditor = ({
         createThemeExtensions({
           themeMode,
           syntaxHighlighting: true,
-          slots: {
-            content: { className: editorFullWidth },
-          },
         }),
         // NOTE: Not using default editor gutter because folding for code works best right beside text.
         EditorView.theme({
           '.cm-gutters': {
-            // Match margin from content.
-            marginTop: '16px',
             background: 'var(--dx-baseSurface)',
           },
         }),

package/src/hooks/deploy.ts

@@ -2,13 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useCallback, useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { FunctionType, type ScriptType, getUserFunctionUrlInMetadata } from '@dxos/functions';
 import { log } from '@dxos/log';
-import { useClient } from '@dxos/react-client';
-import { Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
-import { useTranslation } from '@dxos/react-ui';
+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 { createMenuAction } from '@dxos/react-ui-menu';
 import { errorMessageColors } from '@dxos/react-ui-theme';
 
@@ -24,28 +24,68 @@ export type DeployState = {
   error: string;
 };
 
-export const createDeploy = (state: Partial<DeployState>) => {
-  const errorItem = createMenuAction('error', {
+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', () => {}, {
     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', {
-    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,
-  });
+  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,
+    },
+  );
 
   return {
     nodes: [errorItem, deployAction, copyAction],
@@ -78,42 +118,8 @@ export const useDeployState = ({ state, script }: { state: Partial<DeployState>;
 
 export const useDeployDeps = ({ script }: { script: ScriptType }) => {
   const space = getSpace(script);
-  const [fn] = useQuery(space, Filter.schema(FunctionType, { source: script }));
+  const [fn] = useQuery(space, Query.type(FunctionType, { source: Ref.make(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]);