@dxos/plugin-script 0.8.4-main.67995b8 → 0.8.4-main.c4373fc

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

@@ -2,38 +2,52 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Obj } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client';
 import { Dialog } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
+import { DataType } from '@dxos/schema';
 
 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) => (
+import { DeploymentDialog, type DeploymentDialogProps } from './DeploymentDialog';
+
+const DefaultStory = (props: DeploymentDialogProps) => {
+  return (
     <Dialog.Root defaultOpen={true}>
-      <DeploymentDialog {...args} />
+      <DeploymentDialog {...props} />
     </Dialog.Root>
-  ),
+  );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-script/DeploymentDialog',
   component: DeploymentDialog,
+  render: DefaultStory,
   parameters: { translations },
-  decorators: [withTheme, withLayout()],
-};
+  // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+  decorators: [withTheme, withPluginManager({ plugins: [IntentPlugin(), ClientPlugin({})] })],
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    accessToken: Obj.make(DataType.AccessToken, {
+      source: 'example.com',
+      token: 'example-token',
+    }),
+    scriptTemplates: [
+      { id: 't-1', name: 'Script 1', source: 'template1' },
+      { id: 't-2', name: 'Script 2', source: 'template2' },
+      { id: 't-3', name: 'Script 3', source: 'template3' },
+    ],
+  },
+};

package/src/components/DeploymentDialog/DeploymentDialog.tsx

@@ -4,29 +4,29 @@
 
 import React, { useEffect, useMemo } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { getSpace } from '@dxos/react-client/echo';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 import { type DataType } from '@dxos/schema';
 
 import { useCreateAndDeployScriptTemplates } from '../../hooks/useCreateAndDeployScriptTemplates';
-import { SCRIPT_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { type Template } from '../../templates';
 
-export const DEPLOYMENT_DIALOG = `${SCRIPT_PLUGIN}/deployment/dialog`;
+export const DEPLOYMENT_DIALOG = `${meta.id}/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.
+//  - 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 = {
+export type DeploymentDialogProps = {
   accessToken: DataType.AccessToken;
   scriptTemplates: Template[];
 };
 
 export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDialogProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const space = useMemo(() => getSpace(accessToken), [accessToken]);
 
   // TODO(ZaymonFC): Thinking further. All of this should get moved to intents to run async in the background.
@@ -41,12 +41,12 @@ export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDia
         createIntent(LayoutAction.AddToast, {
           part: 'toast',
           subject: {
-            id: `${SCRIPT_PLUGIN}/deployment-success`,
+            id: `${meta.id}/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 }],
+            title: ['script deployment toast label', { ns: meta.id, count: scriptTemplates.length }],
+            description: ['script deployment toast description', { ns: meta.id, count: scriptTemplates.length }],
+            closeLabel: ['script deployment toast close label', { ns: meta.id, count: scriptTemplates.length }],
           },
         }),
       );
@@ -58,18 +58,12 @@ export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDia
         createIntent(LayoutAction.AddToast, {
           part: 'toast',
           subject: {
-            id: `${SCRIPT_PLUGIN}/deployment-error`,
+            id: `${meta.id}/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 },
-            ],
+            title: ['script deployment error toast label', { ns: meta.id, count: scriptTemplates.length }],
+            description: ['script deployment error toast description', { ns: meta.id, count: scriptTemplates.length }],
+            closeLabel: ['script deployment error toast close label', { ns: meta.id, count: scriptTemplates.length }],
           },
         }),
       );

package/src/components/DeploymentDialog/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { DeploymentDialog, DEPLOYMENT_DIALOG } from './DeploymentDialog';
+import { DEPLOYMENT_DIALOG, DeploymentDialog } from './DeploymentDialog';
 
 export { DEPLOYMENT_DIALOG };
 

package/src/components/FrameContainer/FrameContainer.tsx

@@ -48,7 +48,8 @@ export const FrameContainer = ({ containerUrl, result, debug = true }: FrameCont
   // 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)}`;
+  const src =
+    'bundle' in result ? `${containerUrl}?ts=${sourceHash}#code=${encodeURIComponent(result.bundle)}` : undefined;
 
   return (
     <>
@@ -68,7 +69,7 @@ export const FrameContainer = ({ containerUrl, result, debug = true }: FrameCont
                 {
                   timestamp: result.timestamp,
                   sourceHash,
-                  error: result.error,
+                  error: 'error' in result ? result.error : undefined,
                   src,
                 },
                 undefined,

package/src/components/NotebookContainer.stories.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { createNotebook } from '../testing';
+import { translations } from '../translations';
+
+import { NotebookContainer } from './NotebookContainer';
+
+const meta = {
+  title: 'plugins/plugin-script/NotebookContainer',
+  component: NotebookContainer,
+  decorators: [withTheme, withClientProvider()],
+  parameters: {
+    layout: {
+      type: 'column',
+      className: 'is-prose',
+    },
+    translations,
+  },
+} satisfies Meta<typeof NotebookContainer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    notebook: createNotebook(),
+  },
+};

package/src/components/NotebookContainer.tsx

@@ -0,0 +1,82 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { Ref } from '@dxos/echo';
+import { Toolbar, useTranslation } from '@dxos/react-ui';
+import { StackItem } from '@dxos/react-ui-stack';
+import { DataType } from '@dxos/schema';
+
+import { meta } from '../meta';
+import { ComputeGraph } from '../notebook';
+import { type Notebook } from '../types';
+
+import { NotebookStack, type NotebookStackProps } from './NotebookStack';
+import { type TypescriptEditorProps } from './TypescriptEditor';
+
+export type NotebookContainerProps = {
+  role?: string;
+  notebook?: Notebook.Notebook;
+} & Pick<TypescriptEditorProps, 'env'>;
+
+export const NotebookContainer = ({ notebook, env }: NotebookContainerProps) => {
+  const { t } = useTranslation(meta.id);
+
+  const graph = useMemo(() => notebook && new ComputeGraph(notebook), [notebook]);
+
+  const handleCompute = useCallback(() => {
+    graph?.evaluate();
+  }, [graph]);
+
+  const handleCellInsert = useCallback<NonNullable<NotebookStackProps['onCellInsert']>>(
+    (after) => {
+      const idx = after ? notebook!.cells.findIndex((cell) => cell.id === after) : notebook!.cells.length;
+      notebook?.cells.splice(idx, 0, {
+        id: crypto.randomUUID(),
+        script: Ref.make(DataType.makeText('\n\n\n')),
+      });
+    },
+    [notebook],
+  );
+
+  const handleCellDelete = useCallback<NonNullable<NotebookStackProps['onCellDelete']>>(
+    (id: string) => {
+      const idx = notebook!.cells.findIndex((cell) => cell.id === id);
+      if (idx !== -1) {
+        notebook!.cells.splice(idx, 1);
+      }
+    },
+    [notebook],
+  );
+
+  return (
+    <StackItem.Content classNames='container-max-width border-l border-r border-subduedSeparator' toolbar>
+      <Toolbar.Root>
+        <Toolbar.IconButton
+          icon='ph--plus--regular'
+          iconOnly
+          label={t('add cell label')}
+          onClick={() => handleCellInsert('')}
+        />
+        <Toolbar.IconButton
+          icon='ph--play--fill'
+          iconOnly
+          label={t('compute label')}
+          classNames='text-green-500'
+          onClick={handleCompute}
+        />
+      </Toolbar.Root>
+      <NotebookStack
+        notebook={notebook}
+        graph={graph}
+        env={env}
+        onCellInsert={handleCellInsert}
+        onCellDelete={handleCellDelete}
+      />
+    </StackItem.Content>
+  );
+};
+
+export default NotebookContainer;

package/src/components/NotebookStack/NotebookStack.stories.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { createNotebook } from '../../testing';
+import { translations } from '../../translations';
+
+import { NotebookStack } from './NotebookStack';
+
+const meta = {
+  title: 'plugins/plugin-script/NotebookStack',
+  component: NotebookStack,
+  decorators: [withTheme, withClientProvider()],
+  parameters: {
+    layout: {
+      type: 'column',
+      className: 'is-prose',
+    },
+    translations,
+  },
+} satisfies Meta<typeof NotebookStack>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    notebook: createNotebook(),
+  },
+};

package/src/components/NotebookStack/NotebookStack.tsx

@@ -0,0 +1,113 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { createDocAccessor } from '@dxos/react-client/echo';
+import { DropdownMenu, Icon, useTranslation } from '@dxos/react-ui';
+import { createDataExtensions } from '@dxos/react-ui-editor';
+import { Stack, StackItem } from '@dxos/react-ui-stack';
+
+import { meta } from '../../meta';
+import { type ComputeGraph } from '../../notebook';
+import { type Notebook } from '../../types';
+import { TypescriptEditor } from '../TypescriptEditor';
+import { type TypescriptEditorProps } from '../TypescriptEditor';
+
+export type NotebookStackProps = {
+  notebook?: Notebook.Notebook;
+} & Pick<NotebookSectionProps, 'graph' | 'onCellInsert' | 'onCellDelete'> &
+  Pick<TypescriptEditorProps, 'env'>;
+
+// TODO(burdon): Option for narrow rail (with compact buttons that align with first button in toolbar).
+export const NotebookStack = ({ notebook, ...props }: NotebookStackProps) => {
+  return (
+    <Stack orientation='vertical' size='contain' rail>
+      {notebook?.cells.map((cell, i) => (
+        <NotebookSection key={i} cell={cell} {...props} />
+      ))}
+    </Stack>
+  );
+};
+
+// TODO(burdon): Support calling named deployed functions (as with sheet).
+// TODO(burdon): Different section types (value, query, expression, prompt).
+// TODO(burdon): Display errors.
+// TODO(burdon): Allow moving cursor between sections (CMD Up/Down).
+
+type NotebookSectionProps = {
+  cell: Notebook.Cell;
+  graph?: ComputeGraph;
+  onCellInsert?: (after: string | undefined) => void;
+  onCellDelete?: (id: string) => void;
+} & Pick<TypescriptEditorProps, 'env'>;
+
+const NotebookSection = ({ cell, graph, env, onCellInsert, onCellDelete }: NotebookSectionProps) => {
+  const { t } = useTranslation(meta.id);
+  const extensions = useMemo(() => {
+    return cell.script.target
+      ? [createDataExtensions({ id: cell.id, text: createDocAccessor(cell.script.target, ['content']) })]
+      : [];
+  }, [cell.script.target]);
+
+  const name = graph?.expressions.value[cell.id]?.name;
+  const value = graph?.values.value[cell.id];
+
+  return (
+    <StackItem.Root role='section' item={cell}>
+      <StackItem.Heading classNames='attention-surface'>
+        <StackItem.HeadingStickyContent>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>
+              <StackItem.SigilButton>
+                <Icon icon='ph--list--regular' size={5} />
+              </StackItem.SigilButton>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Portal>
+              <DropdownMenu.Content>
+                <DropdownMenu.Viewport>
+                  <DropdownMenu.Item onClick={() => onCellInsert?.(cell.id)}>
+                    {t('notebook cell insert label')}
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Item onClick={() => onCellDelete?.(cell.id)}>
+                    {t('notebook cell delete label')}
+                  </DropdownMenu.Item>
+                </DropdownMenu.Viewport>
+                <DropdownMenu.Arrow />
+              </DropdownMenu.Content>
+            </DropdownMenu.Portal>
+          </DropdownMenu.Root>
+        </StackItem.HeadingStickyContent>
+      </StackItem.Heading>
+
+      <StackItem.Content>
+        <TypescriptEditor
+          id={cell.id}
+          role='section'
+          initialValue={cell.script.target?.content}
+          extensions={extensions}
+          env={env}
+          options={{
+            placeholder: t('notebook cell placeholder'),
+            highlightActiveLine: false,
+            lineNumbers: false,
+          }}
+          classNames='p-2 pbs-3'
+        />
+
+        {value != null && (
+          <div className='flex p-2 bg-groupSurface border-t border-subduedSeparator text-description font-mono'>
+            {name && (
+              <>
+                <span className='text-successText'>{name}</span>
+                <span className='text-description'>&nbsp;=&nbsp;</span>
+              </>
+            )}
+            <span>{value}</span>
+          </div>
+        )}
+      </StackItem.Content>
+    </StackItem.Root>
+  );
+};

package/src/components/NotebookStack/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './NotebookStack';

package/src/components/ScriptContainer.tsx

@@ -10,15 +10,16 @@ import { useIdentity } from '@dxos/react-client/halo';
 import { createDataExtensions, listener, stackItemContentEditorClassNames } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
 
+import { useDeployState, useToolbarState } from '../hooks';
+import { type ScriptSettings } from '../types';
+
 import { ScriptToolbar } from './ScriptToolbar';
 import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
-import { useDeployState, useToolbarState } from '../hooks';
-import { type ScriptSettingsProps } from '../types';
 
 export type ScriptEditorProps = {
   role: string;
   script: ScriptType;
-  settings?: ScriptSettingsProps;
+  settings?: ScriptSettings;
 } & Pick<TypescriptEditorProps, 'env'>;
 
 export const ScriptContainer = ({ role, script, settings = { editorInputMode: 'vscode' }, env }: ScriptEditorProps) => {

package/src/components/ScriptToolbar/ScriptToolbar.stories.tsx

@@ -2,29 +2,45 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { type Meta } from '@storybook/react-vite';
+import { IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Obj, Ref } from '@dxos/echo';
+import { ScriptType } from '@dxos/functions';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { withTheme } from '@dxos/react-ui/testing';
+import { DataType } from '@dxos/schema';
 
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { translations } from '../../translations';
 
 import { ScriptToolbar } from './ScriptToolbar';
-import { templates } from '../../templates';
 
-export const Default = {
-  args: {
-    binding: 'example',
-    deployed: true,
-    templates,
-    onFormat: () => console.log('Format'),
-    onTogglePanel: () => {},
-  },
-};
-
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-script/Toolbar',
   component: ScriptToolbar,
-  decorators: [withTheme, withLayout()],
-};
+  // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+  decorators: [withTheme, withPluginManager({ plugins: [IntentPlugin(), ClientPlugin({})] })],
+  parameters: {
+    layout: {
+      type: 'centered',
+      className: 'is-prose',
+    },
+    translations,
+  },
+} satisfies Meta<typeof ScriptToolbar>;
 
 export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    state: {},
+    script: Obj.make(ScriptType, {
+      name: 'test',
+      description: 'test',
+      source: Ref.make(DataType.makeText('test')),
+    }),
+  },
+};

package/src/components/ScriptToolbar/ScriptToolbar.tsx

@@ -7,8 +7,15 @@ import React, { useMemo } from 'react';
 
 import { type ScriptType } from '@dxos/functions';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { ElevationProvider, useTranslation, type ThemedClassName } from '@dxos/react-ui';
-import { createGapSeparator, MenuProvider, rxFromSignal, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
+import { ElevationProvider, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import {
+  type ActionGraphProps,
+  MenuProvider,
+  ToolbarMenu,
+  createGapSeparator,
+  rxFromSignal,
+  useMenuActions,
+} from '@dxos/react-ui-menu';
 
 import {
   type CreateDeployOptions,
@@ -18,23 +25,7 @@ import {
   createTemplateSelect,
   useDeployDeps,
 } from '../../hooks';
-import { SCRIPT_PLUGIN } from '../../meta';
-
-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],
-        };
-      }),
-    ),
-  );
+import { meta } from '../../meta';
 
 export type ScriptToolbarProps = ThemedClassName<{
   role?: string;
@@ -43,16 +34,32 @@ export type ScriptToolbarProps = ThemedClassName<{
 }>;
 
 export const ScriptToolbar = ({ script, role, state, classNames }: ScriptToolbarProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const options = useDeployDeps({ script });
-  const toolbarCreator = useMemo(() => createToolbar({ state, script, t, ...options }), [state, script, options, t]);
-  const menu = useMenuActions(toolbarCreator);
+  const menu = useMemo(() => createToolbarActions({ state, script, t, ...options }), [state, script, options, t]);
+  const actions = useMenuActions(menu);
 
   return (
     <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...menu} attendableId={fullyQualifiedId(script)}>
+      <MenuProvider {...actions} attendableId={fullyQualifiedId(script)}>
         <ToolbarMenu classNames={classNames} />
       </MenuProvider>
     </ElevationProvider>
   );
 };
+
+const createToolbarActions = ({ state, script, ...options }: CreateDeployOptions): Rx.Rx<ActionGraphProps> =>
+  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],
+        };
+      }),
+    ),
+  );