@dxos/plugin-script 0.8.1-staging.5be625a → 0.8.1-staging.97aedb1

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,66 +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; variant: 'logs' | undefined } =>
-        isInstanceOf(ScriptType, data.subject),
+      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;
-        return (
-          <ScriptContainer
-            role={role}
-            script={data.subject}
-            variant={data.variant}
-            settings={settings}
-            env={compiler.environment}
-          />
-        );
+        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',
+      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 }) => {
+      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();
-        useDeployState({ state, script: data.subject });
-        return <DebugPanel functionUrl={state.functionUrl} />;
+        useDeployState({ state, script: data.companionTo });
+        return (
+          <StackItem.Content role={role}>
+            <TestPanel functionUrl={state.functionUrl} />
+          </StackItem.Content>
+        );
       },
     }),
     createSurface({
-      id: `${SCRIPT_PLUGIN}/settings-panel`,
-      role: 'complementary--settings',
-      filter: (data): data is { subject: ScriptType } => isInstanceOf(ScriptType, data.subject),
-      component: ({ data }) => (
-        <Clipboard.Provider>
-          <ScriptSettingsPanel script={data.subject} />
-        </Clipboard.Provider>
-      ),
+      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: 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,30 +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;
-  variant?: 'logs';
-  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,
-  variant,
   settings = { editorInputMode: 'vscode' },
   env,
 }: ScriptEditorProps) => {
   const identity = useIdentity();
   const space = getSpace(script);
+  const state = useToolbarState();
+  useDeployState({ state, script });
 
   const extensions = useMemo(
     () => [
@@ -53,34 +53,21 @@ export const ScriptContainer = ({
         identity,
       }),
     ],
-    [script, script.source.target, space, identity],
+    [identity, space, script, script.source.target],
   );
 
-  const state = useToolbarState();
-  useDeployState({ state, script });
-
-  if (!space) {
-    return null;
-  }
-
   return (
-    <StackItem.Content toolbar={variant !== 'logs'}>
-      {variant === 'logs' ? (
-        <LogsPanel script={script} />
-      ) : (
-        <>
-          <ScriptToolbar state={state} role={role} script={script} />
-          <TypescriptEditor
-            id={script.id}
-            env={env}
-            initialValue={script.source?.target?.content}
-            extensions={extensions}
-            className={mx(stackItemContentEditorClassNames(role), 'grow')}
-            inputMode={settings.editorInputMode}
-            toolbar
-          />
-        </>
-      )}
+    <StackItem.Content toolbar classNames='divide-y divide-separator'>
+      <ScriptToolbar state={state} role={role} script={script} />
+      <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'}>