@dxos/plugin-script 0.8.4-main.e098934 → 0.8.4-main.ead640a

package/src/components/NotebookContainer.tsx

@@ -0,0 +1,124 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { Ref } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+import { Assistant } from '@dxos/plugin-assistant';
+import { getSpace } from '@dxos/react-client/echo';
+import { DropdownMenu, IconButton, 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 { NotebookMenu, NotebookStack, type NotebookStackProps } from './NotebookStack';
+import { type TypescriptEditorProps } from './TypescriptEditor';
+
+// TODO(burdon): Support calling named deployed functions (as with sheet).
+
+export type NotebookContainerProps = {
+  role?: string;
+  notebook?: Notebook.Notebook;
+} & Pick<TypescriptEditorProps, 'env'>;
+
+export const NotebookContainer = ({ notebook, env }: NotebookContainerProps) => {
+  const { t } = useTranslation(meta.id);
+  const space = getSpace(notebook);
+  const graph = useMemo(() => notebook && new ComputeGraph(notebook), [notebook]);
+
+  // TODO(burdon): Cache values in context (preserve when switched).
+  const handleCompute = useCallback(() => {
+    graph?.evaluate();
+  }, [graph]);
+
+  const handleRearrange = useCallback<NonNullable<NotebookStackProps['onRearrange']>>(
+    (source, target) => {
+      invariant(notebook);
+      const from = notebook.cells.findIndex((cell) => cell.id === source.id);
+      const to = notebook.cells.findIndex((cell) => cell.id === target.id);
+      if (from != null && to != null) {
+        const cell = notebook.cells.splice(from, 1)[0];
+        if (cell) {
+          notebook.cells.splice(to, 0, cell);
+        }
+      }
+    },
+    [notebook],
+  );
+
+  const handleCellInsert = useCallback<NonNullable<NotebookStackProps['onCellInsert']>>(
+    (type, after) => {
+      invariant(notebook);
+      const cell: Notebook.Cell = { id: crypto.randomUUID(), type };
+      switch (type) {
+        case 'markdown':
+        case 'script':
+        case 'query': {
+          cell.script = Ref.make(DataType.makeText());
+          break;
+        }
+
+        case 'prompt': {
+          if (space) {
+            cell.chat = Ref.make(Assistant.makeChat({ queue: space.queues.create() }));
+          }
+          break;
+        }
+      }
+
+      const idx = after ? notebook.cells.findIndex((cell) => cell.id === after) : notebook.cells.length;
+      notebook.cells.splice(idx, 0, cell);
+    },
+    [space, notebook],
+  );
+
+  const handleCellDelete = useCallback<NonNullable<NotebookStackProps['onCellDelete']>>(
+    (id) => {
+      invariant(notebook);
+      const idx = notebook.cells.findIndex((cell) => cell.id === id);
+      if (idx !== -1) {
+        notebook.cells.splice(idx, 1);
+      }
+    },
+    [notebook],
+  );
+
+  return (
+    <StackItem.Content toolbar>
+      <Toolbar.Root textBlockWidth>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild>
+            <IconButton icon='ph--plus--regular' iconOnly label={t('notebook cell insert label')} />
+          </DropdownMenu.Trigger>
+          <NotebookMenu onCellInsert={handleCellInsert} />
+        </DropdownMenu.Root>
+        <Toolbar.IconButton
+          icon='ph--play--fill'
+          iconOnly
+          label={t('compute label')}
+          classNames='text-green-500'
+          onClick={handleCompute}
+        />
+      </Toolbar.Root>
+      <div role='none' className='flex bs-full overflow-hidden -mis-[1px] -mie-[1px]'>
+        <NotebookStack
+          classNames='container-max-width border-l border-r border-subduedSeparator'
+          space={space}
+          notebook={notebook}
+          graph={graph}
+          env={env}
+          onRearrange={handleRearrange}
+          onCellInsert={handleCellInsert}
+          onCellDelete={handleCellDelete}
+        />
+      </div>
+    </StackItem.Content>
+  );
+};
+
+export default NotebookContainer;

package/src/components/NotebookStack/NotebookCell.tsx

@@ -0,0 +1,217 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { Query, Ref } from '@dxos/echo';
+import { QueryBuilder } from '@dxos/echo-query';
+import { invariant } from '@dxos/invariant';
+import { useChatProcessor, useChatServices } from '@dxos/plugin-assistant';
+import { Chat } from '@dxos/plugin-assistant';
+import { Graph } from '@dxos/plugin-explorer/types';
+import { createDocAccessor } from '@dxos/react-client/echo';
+import { type Space } from '@dxos/react-client/echo';
+import { useAsyncEffect, useThemeContext, useTranslation } from '@dxos/react-ui';
+import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';
+import {
+  Editor,
+  type EditorProps,
+  createBasicExtensions,
+  createDataExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+} from '@dxos/react-ui-editor';
+import { mx } from '@dxos/react-ui-theme';
+import { isNonNullable } from '@dxos/util';
+
+import { meta } from '../../meta';
+import { type ComputeGraph } from '../../notebook';
+import { type Notebook } from '../../types';
+import { TypescriptEditor, type TypescriptEditorProps } from '../TypescriptEditor';
+
+import { type NotebookMenuProps } from './NotebookMenu';
+
+const editorStyles = 'p-2 pis-3';
+const valueStyles = 'p-1 pis-3';
+
+export type NotebookCellProps = {
+  space?: Space;
+  graph?: ComputeGraph;
+  dragging?: boolean;
+  cell: Notebook.Cell;
+} & (Pick<NotebookMenuProps, 'onCellInsert' | 'onCellDelete'> & Pick<TypescriptEditorProps, 'env'>);
+
+// TODO(burdon): Display errors.
+export const NotebookCell = ({ space, graph, dragging, cell, env }: NotebookCellProps) => {
+  const { t } = useTranslation(meta.id);
+
+  //
+  // Common.
+  //
+  const extensions = useMemo(() => {
+    return cell.script?.target
+      ? [createDataExtensions({ id: cell.id, text: createDocAccessor(cell.script.target, ['content']) })].filter(
+          isNonNullable,
+        )
+      : [];
+  }, [cell.script?.target]);
+
+  //
+  // Query.
+  //
+  const view = cell.view?.target;
+  const builder = useMemo(() => new QueryBuilder(), []);
+  useAsyncEffect(async () => {
+    if (!space || !cell.script?.target) {
+      return;
+    }
+
+    if (cell.type === 'query') {
+      const query = cell.script.target.content;
+      const filter = builder.build(query);
+      if (filter) {
+        const ast = Query.select(filter).ast;
+        const view = cell.view?.target;
+        if (!view) {
+          const graph = Graph.make({ query: { ast } });
+          const { view } = await Graph.makeView({ space, presentation: graph });
+          cell.view = Ref.make(view);
+        } else {
+          view.query.ast = ast;
+        }
+      }
+    }
+  }, [space, builder, cell, cell.script?.target?.content]);
+
+  const handleQueryChange = useCallback<NonNullable<QueryEditorProps['onChange']>>(
+    (value: string) => {
+      invariant(cell.script?.target);
+      cell.script.target.content = value;
+    },
+    [cell],
+  );
+
+  //
+  // Prompt.
+  // TODO(burdon): Add values to context or system message (via blueprint?).
+  //
+  const services = useChatServices({ space, chat: cell.chat?.target });
+  const processor = useChatProcessor({ chat: cell.chat?.target, services });
+
+  switch (cell.type) {
+    case 'markdown':
+      if (!cell.script?.target) {
+        return null;
+      }
+
+      return (
+        <MarkdownEditor
+          id={cell.id}
+          classNames={editorStyles}
+          initialValue={cell.script.target.content}
+          extensions={extensions}
+        />
+      );
+
+    case 'script':
+      if (!cell.script?.target) {
+        return null;
+      }
+
+      return (
+        <>
+          <TypescriptEditor
+            id={cell.id}
+            role='section'
+            classNames={editorStyles}
+            initialValue={cell.script.target.content}
+            extensions={extensions}
+            env={env}
+            options={{
+              placeholder: t('notebook cell placeholder'),
+              highlightActiveLine: false,
+              lineNumbers: false,
+            }}
+          />
+          <NotebookCellValue cell={cell} graph={graph} />
+        </>
+      );
+
+    case 'query':
+      if (!cell.script?.target) {
+        return null;
+      }
+
+      return (
+        <div className={mx('bs-full overflow-hidden grid', view && !dragging && 'grid-rows-[min-content_1fr]')}>
+          <QueryEditor
+            id={cell.id}
+            classNames={[editorStyles, 'border-b border-subduedSeparator']}
+            db={space?.db}
+            value={cell.script.target.content}
+            onChange={handleQueryChange}
+          />
+          {view && !dragging && <Surface role='section' limit={1} data={{ subject: view }} />}
+        </div>
+      );
+
+    case 'prompt':
+      if (!cell.chat?.target || !processor) {
+        return null;
+      }
+
+      return (
+        <Chat.Root chat={cell.chat.target} processor={processor}>
+          <Chat.Thread overscroll={0} />
+          <Chat.Prompt settings={false} classNames='p-2 border-t border-subduedSeparator' />
+        </Chat.Root>
+      );
+
+    default:
+      return null;
+  }
+};
+
+const NotebookCellValue = ({ cell, graph }: NotebookCellProps) => {
+  const name = graph?.expressions.value[cell.id]?.name;
+  const value = graph?.values.value[cell.id];
+  if (value == null) {
+    return null;
+  }
+
+  return (
+    <div
+      className={mx(
+        'flex is-full bg-groupSurface border-t border-subduedSeparator text-description font-mono',
+        valueStyles,
+      )}
+    >
+      {name && (
+        <>
+          <span className='text-successText'>{name}</span>
+          <span className='text-description'>&nbsp;=&nbsp;</span>
+        </>
+      )}
+      <span>{value}</span>
+    </div>
+  );
+};
+
+const MarkdownEditor = ({ extensions: extensionsParam, ...props }: EditorProps) => {
+  const { t } = useTranslation(meta.id);
+  const { themeMode } = useThemeContext();
+  const extensions = useMemo(() => {
+    return [
+      createBasicExtensions({ placeholder: t('notebook markdown placeholder') }),
+      createThemeExtensions({ themeMode, syntaxHighlighting: true }),
+      createMarkdownExtensions(),
+      decorateMarkdown(),
+      extensionsParam,
+    ].filter(isNonNullable);
+  }, [extensionsParam]);
+
+  return <Editor {...props} extensions={extensions} moveToEnd />;
+};

package/src/components/NotebookStack/NotebookMenu.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { DropdownMenu, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '../../meta';
+import { type Notebook } from '../../types';
+
+export type NotebookMenuProps = {
+  cell?: Notebook.Cell;
+  onCellInsert?: (type: Notebook.CellType, after: string | undefined) => void;
+  onCellDelete?: (id: string) => void;
+};
+
+// TODO(burdon): Better way to organize menu?
+export const NotebookMenu = ({ cell, onCellInsert, onCellDelete }: NotebookMenuProps) => {
+  const { t } = useTranslation(meta.id);
+  return (
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content>
+        <DropdownMenu.Viewport>
+          <DropdownMenu.Item onClick={() => onCellInsert?.('script', cell?.id)}>
+            {t('notebook cell insert script label')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item onClick={() => onCellInsert?.('prompt', cell?.id)}>
+            {t('notebook cell insert prompt label')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item onClick={() => onCellInsert?.('query', cell?.id)}>
+            {t('notebook cell insert query label')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item onClick={() => onCellInsert?.('markdown', cell?.id)}>
+            {t('notebook cell insert markdown label')}
+          </DropdownMenu.Item>
+          {cell && onCellDelete && (
+            <DropdownMenu.Item onClick={() => onCellDelete?.(cell.id)}>
+              {t('notebook cell delete label')}
+            </DropdownMenu.Item>
+          )}
+        </DropdownMenu.Viewport>
+        <DropdownMenu.Arrow />
+      </DropdownMenu.Content>
+    </DropdownMenu.Portal>
+  );
+};

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

@@ -0,0 +1,32 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withLayout, 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, withLayout({ container: 'column', classNames: 'is-prose' }), withClientProvider()],
+  parameters: {
+    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,79 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { DropdownMenu, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Stack, StackItem, type StackProps } from '@dxos/react-ui-stack';
+
+import { meta } from '../../meta';
+import { type Notebook } from '../../types';
+import { type TypescriptEditorProps } from '../TypescriptEditor';
+
+import { NotebookCell, type NotebookCellProps } from './NotebookCell';
+import { NotebookMenu } from './NotebookMenu';
+
+const minSectionHeight = 'min-bs-[16rem]';
+
+export type NotebookStackProps = ThemedClassName<
+  {
+    notebook?: Notebook.Notebook;
+    onRearrange?: StackProps['onRearrange'];
+  } & (Pick<NotebookSectionProps, 'space' | '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 = ({ classNames, notebook, onRearrange, ...props }: NotebookStackProps) => {
+  return (
+    <Stack classNames={classNames} orientation='vertical' size='contain' rail onRearrange={onRearrange}>
+      {notebook?.cells.map((cell, i) => (
+        <NotebookSection key={i} cell={cell} {...props} />
+      ))}
+    </Stack>
+  );
+};
+
+type NotebookSectionProps = NotebookCellProps;
+
+const NotebookSection = ({ cell, space, env, onCellInsert, onCellDelete, ...props }: NotebookSectionProps) => {
+  const { t } = useTranslation(meta.id);
+  const resizable = cell.type === 'query' || cell.type === 'prompt';
+
+  // TOOD(burdon): Set size if no extrinsic size (provider).
+  return (
+    <StackItem.Root role='section' item={cell} draggable classNames={resizable && minSectionHeight}>
+      <StackItem.Heading classNames='bs-full p-1 justify-between attention-surface'>
+        <StackItem.DragHandle asChild>
+          <IconButton variant='ghost' icon='ph--dots-six-vertical--regular' iconOnly label='Drag handle' />
+        </StackItem.DragHandle>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild>
+            <IconButton
+              variant='ghost'
+              icon='ph--dots-three--regular'
+              iconOnly
+              label={t('notebook cell insert label')}
+            />
+          </DropdownMenu.Trigger>
+          <NotebookMenu cell={cell} onCellInsert={onCellInsert} onCellDelete={onCellDelete} />
+        </DropdownMenu.Root>
+        {resizable && <StackItem.ResizeHandle />}
+      </StackItem.Heading>
+
+      {/* TODO(burdon): Move drag preview to outer stack (uniformly). */}
+      <StackItem.DragPreview>
+        {({ item: cell }) => (
+          <StackItem.Content classNames='overflow-visible bg-groupSurface border border-subduedSeparator'>
+            <NotebookCell space={space} cell={cell} env={env} dragging />
+          </StackItem.Content>
+        )}
+      </StackItem.DragPreview>
+
+      <StackItem.Content classNames='overflow-visible'>
+        <NotebookCell space={space} cell={cell} env={env} {...props} />
+      </StackItem.Content>
+    </StackItem.Root>
+  );
+};

package/src/components/NotebookStack/index.ts

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

package/src/components/ScriptContainer.tsx

@@ -11,7 +11,7 @@ import { createDataExtensions, listener, stackItemContentEditorClassNames } from
 import { StackItem } from '@dxos/react-ui-stack';
 
 import { useDeployState, useToolbarState } from '../hooks';
-import { type ScriptSettingsProps } from '../types';
+import { type ScriptSettings } from '../types';
 
 import { ScriptToolbar } from './ScriptToolbar';
 import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
@@ -19,7 +19,7 @@ import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor
 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,21 +2,33 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } 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 { withLayout, 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';
 
 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,
+    withLayout({ classNames: 'is-prose' }),
+    withPluginManager({ plugins: [IntentPlugin(), ClientPlugin({})] }),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
 } satisfies Meta<typeof ScriptToolbar>;
 
 export default meta;
@@ -25,11 +37,11 @@ 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')),
     }),
-    state: {},
   },
 };

package/src/components/ScriptToolbar/ScriptToolbar.tsx

@@ -25,23 +25,7 @@ import {
   createTemplateSelect,
   useDeployDeps,
 } from '../../hooks';
-import { SCRIPT_PLUGIN } from '../../meta';
-
-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],
-        };
-      }),
-    ),
-  );
+import { meta } from '../../meta';
 
 export type ScriptToolbarProps = ThemedClassName<{
   role?: string;
@@ -50,19 +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(
-    () => createToolbarActions({ 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],
+        };
+      }),
+    ),
+  );