@dxos/plugin-script 0.8.1-staging.391c573 → 0.8.1-staging.9eaf14f

package/src/capabilities/app-graph-builder.ts

@@ -0,0 +1,47 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { isInstanceOf } from '@dxos/echo-schema';
+import { ScriptType } from '@dxos/functions';
+import { PLANK_COMPANION_TYPE, ATTENDABLE_PATH_SEPARATOR } from '@dxos/plugin-deck/types';
+import { createExtension, type Node } from '@dxos/plugin-graph';
+
+import { meta } from '../meta';
+
+export default (context: PluginsContext) =>
+  contributes(Capabilities.AppGraphBuilder, [
+    createExtension({
+      id: `${meta.id}/execute`,
+      filter: (node): node is Node<ScriptType> => isInstanceOf(ScriptType, node.data),
+      connector: ({ node }) => [
+        {
+          id: [node.id, 'execute'].join(ATTENDABLE_PATH_SEPARATOR),
+          type: PLANK_COMPANION_TYPE,
+          data: 'execute',
+          properties: {
+            label: ['script test label', { ns: meta.id }],
+            icon: 'ph--terminal--regular',
+            disposition: 'hidden',
+          },
+        },
+      ],
+    }),
+    createExtension({
+      id: `${meta.id}/logs`,
+      filter: (node): node is Node<ScriptType> => isInstanceOf(ScriptType, node.data),
+      connector: ({ node }) => [
+        {
+          id: [node.id, 'logs'].join(ATTENDABLE_PATH_SEPARATOR),
+          type: PLANK_COMPANION_TYPE,
+          data: 'logs',
+          properties: {
+            label: ['script logs label', { ns: meta.id }],
+            icon: 'ph--clock-countdown--regular',
+            disposition: 'hidden',
+          },
+        },
+      ],
+    }),
+  ]);

package/src/capabilities/artifact-definition.ts

@@ -23,7 +23,7 @@ declare global {
 
 export default () => {
   const definition = defineArtifact({
-    id: meta.id,
+    id: `artifact:${meta.id}`,
     name: meta.name,
     // TODO(dmaretskyi): Since writing scripts requires a lot of domain knowledge,
     //  we should offload the work of synthesizing the code to a separate model.
@@ -31,6 +31,7 @@ export default () => {
     instructions: `
       If the user explicitly requests you to write a script, you can create one.
       If the user requests you to change one of the existing script, you can update it.
+      You must not create a script unless the user explicitly requests it.
       Scripts are short code pieces of executable code that can be used to perform computations, integrate with external systems, and perform automated tasks.
       Each script must follow as strict shape for the definition but the body can contain any valid executable code.
       Scripts are written in JavaScript or TypeScript.

package/src/capabilities/capabilities.ts

@@ -5,8 +5,8 @@
 import { defineCapability } from '@dxos/app-framework';
 
 import { type Compiler } from '../compiler';
-import { SCRIPT_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 export namespace ScriptCapabilities {
-  export const Compiler = defineCapability<Compiler>(`${SCRIPT_PLUGIN}/capability/compiler`);
+  export const Compiler = defineCapability<Compiler>(`${meta.id}/capability/compiler`);
 }

package/src/capabilities/index.ts

@@ -4,10 +4,11 @@
 
 import { lazy } from '@dxos/app-framework';
 
+export const AppGraphBuilder = lazy(() => import('./app-graph-builder'));
+export const ArtifactDefinition = lazy(() => import('./artifact-definition'));
 export const Compiler = lazy(() => import('./compiler'));
 export const IntentResolver = lazy(() => import('./intent-resolver'));
 export const ReactSurface = lazy(() => import('./react-surface'));
 export const ScriptSettings = lazy(() => import('./settings'));
-export const ArtifactDefinition = lazy(() => import('./artifact-definition'));
 
 export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -3,22 +3,26 @@
 //
 
 import { Octokit } from '@octokit/core';
+import { isNotNullable } from 'effect/Predicate';
 
-import { contributes, Capabilities, createResolver } from '@dxos/app-framework';
+import { contributes, Capabilities, createResolver, createIntent, LayoutAction } from '@dxos/app-framework';
 import { ScriptType } from '@dxos/functions/types';
 import { create, makeRef } from '@dxos/live-object';
+import { TokenManagerAction } from '@dxos/plugin-token-manager/types';
 import { TextType } from '@dxos/schema';
 
+import { DEPLOYMENT_DIALOG } from '../components';
+import { defaultScriptsForIntegration } from '../meta';
 import { templates } from '../templates';
 import { ScriptAction } from '../types';
 
 export default () =>
-  contributes(
-    Capabilities.IntentResolver,
+  contributes(Capabilities.IntentResolver, [
     createResolver({
       intent: ScriptAction.Create,
-      resolve: async ({ name, gistUrl }) => {
+      resolve: async ({ name, gistUrl, initialTemplateId }) => {
         let content = templates[0].source;
+
         const gistId = gistUrl?.split('/').at(-1);
         if (gistId) {
           // TODO(wittjosiah): Capability which contributes Octokit?
@@ -33,6 +37,14 @@ export default () =>
           }
         }
 
+        if (initialTemplateId) {
+          const template = templates.find((template) => template.id === initialTemplateId);
+          if (template) {
+            content = template.source;
+            name = template.name;
+          }
+        }
+
         return {
           data: {
             object: create(ScriptType, {
@@ -43,4 +55,26 @@ export default () =>
         };
       },
     }),
-  );
+    createResolver({
+      intent: TokenManagerAction.AccessTokenCreated,
+      resolve: async ({ accessToken }) => {
+        const scriptTemplates = (defaultScriptsForIntegration[accessToken.source] ?? [])
+          .map((id) => templates.find((t) => t.id === id))
+          .filter(isNotNullable);
+
+        if (scriptTemplates.length > 0) {
+          return {
+            intents: [
+              createIntent(LayoutAction.UpdateDialog, {
+                part: 'dialog',
+                subject: DEPLOYMENT_DIALOG,
+                options: { blockAlign: 'start', state: true, props: { accessToken, scriptTemplates } },
+              }),
+            ],
+          };
+        }
+
+        return { data: undefined };
+      },
+    }),
+  ]);

package/src/capabilities/react-surface.tsx

@@ -5,56 +5,95 @@
 import React from 'react';
 
 import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { InvocationTracePanel } from '@dxos/devtools';
+import { isInstanceOf } from '@dxos/echo-schema';
 import { ScriptType } from '@dxos/functions/types';
 import { SettingsStore } from '@dxos/local-storage';
-import { Clipboard } from '@dxos/react-ui';
+import { getSpace } from '@dxos/react-client/echo';
+import { StackItem } from '@dxos/react-ui-stack';
+import { type AccessTokenType } from '@dxos/schema';
 
 import { ScriptCapabilities } from './capabilities';
-import { DebugPanel, ScriptSettings, ScriptContainer, ScriptSettingsPanel } from '../components';
+import {
+  ScriptContainer,
+  ScriptPluginSettings,
+  ScriptObjectSettings,
+  TestPanel,
+  ScriptProperties,
+  DeploymentDialog,
+  DEPLOYMENT_DIALOG,
+} from '../components';
 import { useDeployState, useToolbarState } from '../hooks';
-import { SCRIPT_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { type ScriptSettingsProps } from '../types';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: `${SCRIPT_PLUGIN}/settings`,
+      id: `${meta.id}/plugin-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} />,
+        data.subject instanceof SettingsStore && data.subject.prefix === meta.id,
+      component: ({ data: { subject } }) => <ScriptPluginSettings settings={subject.value} />,
     }),
     createSurface({
-      id: `${SCRIPT_PLUGIN}/article`,
+      id: `${meta.id}/article`,
       role: 'article',
-      filter: (data): data is { subject: ScriptType } => data.subject instanceof ScriptType,
+      filter: (data): data is { subject: ScriptType } => isInstanceOf(ScriptType, data.subject),
       component: ({ data, role }) => {
         const compiler = useCapability(ScriptCapabilities.Compiler);
         // 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;
+        const settings = useCapability(Capabilities.SettingsStore).getStore<ScriptSettingsProps>(meta.id)?.value;
         return <ScriptContainer role={role} script={data.subject} settings={settings} env={compiler.environment} />;
       },
     }),
     createSurface({
-      id: `${SCRIPT_PLUGIN}/automation`,
-      role: 'complementary--function',
-      position: 'hoist',
-      filter: (data): data is { subject: ScriptType } => data.subject instanceof ScriptType,
-      component: ({ data }) => {
+      id: `${meta.id}/companion/base-settings`,
+      role: 'base-object-settings',
+      filter: (data): data is { subject: ScriptType } => isInstanceOf(ScriptType, data.subject),
+      component: ({ data }) => <ScriptProperties object={data.subject} />,
+    }),
+    createSurface({
+      id: `${meta.id}/companion/settings`,
+      role: 'object-settings',
+      filter: (data): data is { subject: ScriptType } => isInstanceOf(ScriptType, data.subject),
+      component: ({ data }) => <ScriptObjectSettings object={data.subject} />,
+    }),
+    createSurface({
+      id: `${meta.id}/companion/execute`,
+      role: 'article',
+      filter: (data): data is { companionTo: ScriptType } =>
+        isInstanceOf(ScriptType, data.companionTo) && data.subject === 'execute',
+      component: ({ data, role }) => {
         // TODO(wittjosiah): Decouple hooks from toolbar state.
-        const state = useToolbarState({ view: 'editor' });
-        useDeployState({ state, script: data.subject });
-        return <DebugPanel functionUrl={state.functionUrl} />;
+        const state = useToolbarState();
+        useDeployState({ state, script: data.companionTo });
+        return (
+          <StackItem.Content role={role}>
+            <TestPanel functionUrl={state.functionUrl} />
+          </StackItem.Content>
+        );
+      },
+    }),
+    createSurface({
+      id: `${meta.id}/companion/logs`,
+      role: 'article',
+      filter: (data): data is { companionTo: ScriptType } =>
+        isInstanceOf(ScriptType, data.companionTo) && data.subject === 'logs',
+      component: ({ data, role }) => {
+        const space = getSpace(data.companionTo);
+        return (
+          <StackItem.Content role={role}>
+            <InvocationTracePanel space={space} script={data.companionTo} detailAxis='block' />
+          </StackItem.Content>
+        );
       },
     }),
     createSurface({
-      id: `${SCRIPT_PLUGIN}/settings-panel`,
-      role: 'complementary--settings',
-      filter: (data): data is { subject: ScriptType } => data.subject instanceof ScriptType,
-      component: ({ data }) => (
-        <Clipboard.Provider>
-          <ScriptSettingsPanel script={data.subject} />
-        </Clipboard.Provider>
-      ),
+      id: DEPLOYMENT_DIALOG,
+      role: 'dialog',
+      filter: (data): data is { props: { accessToken: AccessTokenType; scriptTemplates: any } } =>
+        data.component === DEPLOYMENT_DIALOG,
+      component: ({ data }) => <DeploymentDialog {...data.props} />,
     }),
   ]);

package/src/capabilities/settings.ts

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

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

@@ -0,0 +1,39 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React from 'react';
+
+import { Dialog } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import translations from '../../translations';
+import { DeploymentDialog } from '../DeploymentDialog/DeploymentDialog';
+
+export const Default = {
+  args: {
+    accessToken: { value: 'example-token' },
+    scripts: [
+      { label: 'Script 1', templateId: 'template1' },
+      { label: 'Script 2', templateId: 'template2' },
+      { label: 'Script 3', templateId: 'template3' },
+    ],
+  },
+  render: (args: any) => (
+    <Dialog.Root defaultOpen={true}>
+      <DeploymentDialog {...args} />
+    </Dialog.Root>
+  ),
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-script/DeploymentDialog',
+  component: DeploymentDialog,
+  parameters: { translations },
+  decorators: [withTheme, withLayout({ tooltips: true })],
+};
+
+export default meta;

package/src/components/DeploymentDialog/DeploymentDialog.tsx

@@ -0,0 +1,112 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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 { useCreateAndDeployScriptTemplates } from '../../hooks/useCreateAndDeployScriptTemplates';
+import { SCRIPT_PLUGIN } from '../../meta';
+import { type Template } from '../../templates';
+
+export const DEPLOYMENT_DIALOG = `${SCRIPT_PLUGIN}/deployment/dialog`;
+
+// TODO(ZaymonFC):
+//   - Show activity and feedback to the user.
+//   - Only take an array of templateIds and get the name from the data.
+//   - Pending / onError states.
+
+type DeploymentDialogProps = {
+  accessToken: AccessTokenType;
+  scriptTemplates: Template[];
+};
+
+export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDialogProps) => {
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const space = useMemo(() => getSpace(accessToken), [accessToken]);
+
+  // TODO(ZaymonFC): Thinking further. All of this should get moved to intents to run async in the background.
+  //   Deployment shouldn't be tied to the lifecycle of the dialogue component.
+  const { handleCreateAndDeployScripts, status } = useCreateAndDeployScriptTemplates(space, scriptTemplates);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+
+  useEffect(() => {
+    if (status === 'success') {
+      // TODO(ZaymonFC): We can probably re-use this toast for normal script deployment.
+      void dispatch(
+        createIntent(LayoutAction.AddToast, {
+          part: 'toast',
+          subject: {
+            id: `${SCRIPT_PLUGIN}/deployment-success`,
+            icon: 'ph--check--regular',
+            duration: Infinity,
+            title: ['script deployment toast label', { ns: SCRIPT_PLUGIN, count: scriptTemplates.length }],
+            description: ['script deployment toast description', { ns: SCRIPT_PLUGIN, count: scriptTemplates.length }],
+            closeLabel: ['script deployment toast close label', { ns: SCRIPT_PLUGIN, count: scriptTemplates.length }],
+          },
+        }),
+      );
+      void dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
+    }
+    if (status === 'error') {
+      void dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
+      void dispatch(
+        createIntent(LayoutAction.AddToast, {
+          part: 'toast',
+          subject: {
+            id: `${SCRIPT_PLUGIN}/deployment-error`,
+            icon: 'ph--warning--regular',
+            duration: Infinity,
+            title: ['script deployment error toast label', { ns: SCRIPT_PLUGIN, count: scriptTemplates.length }],
+            description: [
+              'script deployment error toast description',
+              { ns: SCRIPT_PLUGIN, count: scriptTemplates.length },
+            ],
+            closeLabel: [
+              'script deployment error toast close label',
+              { ns: SCRIPT_PLUGIN, count: scriptTemplates.length },
+            ],
+          },
+        }),
+      );
+    }
+  }, [status, dispatch]);
+
+  return (
+    <Dialog.Content>
+      <div className='flex justify-between items-center'>
+        <Dialog.Title>{t('deployment dialog title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Button density='fine' variant='ghost'>
+            <Icon icon='ph--x--regular' size={4} />
+          </Button>
+        </Dialog.Close>
+      </div>
+      <div role='none' className='plb-4'>
+        {/* TODO: Implement deployment logic and UI. */}
+        <p>{t('deployment dialog scripts found message', { count: scriptTemplates.length })}</p>
+        <ul className='pbs-2'>
+          {scriptTemplates.map((template) => {
+            return <li key={template.id}>{template.name}</li>;
+          })}
+        </ul>
+      </div>
+      <div role='none' className='flex flex-row-reverse gap-1'>
+        <Button variant='primary' onClick={handleCreateAndDeployScripts} disabled={status === 'pending'}>
+          {status === 'pending'
+            ? t('deployment dialog deploy functions pending button label', { count: scriptTemplates.length })
+            : t('deployment dialog deploy functions button label', { count: scriptTemplates.length })}
+        </Button>
+        <Dialog.Close asChild disabled={status === 'pending'}>
+          <Button disabled={status === 'pending'}>{t('deployment dialog skip button label')}</Button>
+        </Dialog.Close>
+      </div>
+    </Dialog.Content>
+  );
+};
+
+export default DeploymentDialog;

package/src/components/DeploymentDialog/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { DeploymentDialog, DEPLOYMENT_DIALOG } from './DeploymentDialog';
+
+export { DEPLOYMENT_DIALOG };
+
+export default DeploymentDialog;

package/src/components/ScriptContainer.tsx

@@ -12,28 +12,30 @@ import { createDataExtensions, listener, stackItemContentEditorClassNames } from
 import { StackItem } from '@dxos/react-ui-stack';
 import { mx } from '@dxos/react-ui-theme';
 
-import { LogsPanel } from './LogsPanel';
 import { ScriptToolbar } from './ScriptToolbar';
 import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
 import { useDeployState, useToolbarState } from '../hooks';
 import { type ScriptSettingsProps } from '../types';
 
-export type ScriptEditorProps = ThemedClassName<{
-  script: ScriptType;
-  settings?: ScriptSettingsProps;
-  role?: string;
-}> &
-  Pick<TypescriptEditorProps, 'env'>;
+export type ScriptEditorProps = ThemedClassName<
+  {
+    role?: string;
+    script: ScriptType;
+    settings?: ScriptSettingsProps;
+  } & Pick<TypescriptEditorProps, 'env'>
+>;
 
 export const ScriptContainer = ({
-  role,
   classNames,
+  role,
   script,
   settings = { editorInputMode: 'vscode' },
   env,
 }: ScriptEditorProps) => {
   const identity = useIdentity();
   const space = getSpace(script);
+  const state = useToolbarState();
+  useDeployState({ state, script });
 
   const extensions = useMemo(
     () => [
@@ -51,34 +53,21 @@ export const ScriptContainer = ({
         identity,
       }),
     ],
-    [script, script.source.target, space, identity],
+    [identity, space, script, script.source.target],
   );
 
-  const state = useToolbarState({ view: 'editor' });
-  useDeployState({ state, script });
-
-  if (!space) {
-    return null;
-  }
-
   return (
-    <StackItem.Content toolbar>
+    <StackItem.Content toolbar classNames='divide-y divide-separator'>
       <ScriptToolbar state={state} role={role} script={script} />
-      <div role='none' className={mx('flex flex-col w-full overflow-hidden divide-y divide-separator', classNames)}>
-        {state.view !== 'logs' && (
-          <TypescriptEditor
-            id={script.id}
-            env={env}
-            initialValue={script.source?.target?.content}
-            extensions={extensions}
-            className={mx(stackItemContentEditorClassNames(role), 'grow')}
-            inputMode={settings.editorInputMode}
-            toolbar
-          />
-        )}
-
-        {state.view !== 'editor' && <LogsPanel script={script} classNames='grow' />}
-      </div>
+      <TypescriptEditor
+        id={script.id}
+        env={env}
+        initialValue={script.source?.target?.content}
+        extensions={extensions}
+        className={mx(stackItemContentEditorClassNames(role))}
+        inputMode={settings.editorInputMode}
+        toolbar
+      />
     </StackItem.Content>
   );
 };

package/src/components/ScriptToolbar/ScriptToolbar.tsx

@@ -15,7 +15,6 @@ import {
   createDeploy,
   createFormat,
   createTemplateSelect,
-  createView,
   useToolbarAction,
 } from '../../hooks';
 
@@ -30,10 +29,9 @@ const createToolbar = (state: ScriptToolbarState) => {
   const format = createFormat();
   const gap = createGapSeparator();
   const deploy = createDeploy(state);
-  const view = createView(state);
   return {
-    nodes: [...templateSelect.nodes, ...format.nodes, ...gap.nodes, ...deploy.nodes, ...view.nodes],
-    edges: [...templateSelect.edges, ...format.edges, ...gap.edges, ...deploy.edges, ...view.edges],
+    nodes: [...templateSelect.nodes, ...format.nodes, ...gap.nodes, ...deploy.nodes],
+    edges: [...templateSelect.edges, ...format.edges, ...gap.edges, ...deploy.edges],
   };
 };
 
@@ -41,6 +39,7 @@ export const ScriptToolbar = ({ script, role, state, classNames }: ScriptToolbar
   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'}>