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

package/src/components/NotebookStack/NotebookCell.tsx

@@ -0,0 +1,208 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
+import { TemplateEditor } from '@dxos/plugin-assistant';
+import { createDocAccessor } from '@dxos/react-client/echo';
+import { type Space } from '@dxos/react-client/echo';
+import { useThemeContext, useTranslation } from '@dxos/react-ui';
+import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';
+import {
+  type BasicExtensionsOptions,
+  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;
+  promptResults?: Record<string, string>;
+} & (Pick<NotebookMenuProps, 'onCellInsert' | 'onCellDelete'> & Pick<TypescriptEditorProps, 'env'>);
+
+// TODO(burdon): Show evaluation errors.
+export const NotebookCell = ({ space, graph, dragging, cell, promptResults, env }: NotebookCellProps) => {
+  const { t } = useTranslation(meta.id);
+
+  const extensions = useMemo(() => {
+    return cell.source?.target
+      ? [createDataExtensions({ id: cell.id, text: createDocAccessor(cell.source.target, ['content']) })].filter(
+          isNonNullable,
+        )
+      : [];
+  }, [cell.source?.target]);
+
+  const view = cell.view?.target;
+
+  const handleQueryChange = useCallback<NonNullable<QueryEditorProps['onChange']>>(
+    (value: string) => {
+      invariant(cell.source?.target);
+      cell.source.target.content = value;
+    },
+    [cell],
+  );
+
+  switch (cell.type) {
+    case 'markdown':
+      if (!cell.source?.target) {
+        return null;
+      }
+
+      return (
+        <NotebookTextEditor
+          id={cell.id}
+          classNames={editorStyles}
+          initialValue={cell.source.target.content}
+          extensions={extensions}
+        />
+      );
+
+    case 'script':
+      if (!cell.source?.target) {
+        return null;
+      }
+
+      return (
+        <>
+          <TypescriptEditor
+            id={cell.id}
+            role='section'
+            classNames={editorStyles}
+            initialValue={cell.source.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.source?.target) {
+        return null;
+      }
+
+      // TODO(burdon): Remove app-framework deps (via render prop).
+      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.source.target.content}
+            onChange={handleQueryChange}
+          />
+          {view && !dragging && <Surface role='section' limit={1} data={{ subject: view }} />}
+        </div>
+      );
+
+    // TODO(burdon): Use streaming response from Chat.
+    case 'prompt':
+      if (!cell.prompt?.target) {
+        return null;
+      }
+
+      return (
+        <>
+          <TemplateEditor
+            id={cell.id}
+            template={cell.prompt.target.instructions}
+            lineNumbers={false}
+            classNames={editorStyles}
+          />
+          <NotebookPromptResult cell={cell} promptResults={promptResults} />
+        </>
+      );
+
+    default:
+      return null;
+  }
+};
+
+const NotebookCellValue = ({ cell, graph }: NotebookCellProps) => {
+  const name = graph?.expressions.value[cell.id]?.name;
+  const value = graph?.getValue(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 NotebookPromptResult = ({ cell, promptResults }: NotebookCellProps) => {
+  if (!cell.prompt) {
+    return null;
+  }
+
+  const value = promptResults?.[cell.prompt.dxn.toString()];
+  if (value == null) {
+    return null;
+  }
+
+  return (
+    <div className={mx('flex is-full bg-groupSurface text-description border-t border-subduedSeparator', valueStyles)}>
+      <NotebookTextEditor readOnly value={value} />
+    </div>
+  );
+};
+
+const NotebookTextEditor = ({
+  extensions: extensionsParam,
+  readOnly,
+  ...props
+}: EditorProps & Pick<BasicExtensionsOptions, 'readOnly'>) => {
+  const { t } = useTranslation(meta.id);
+  const { themeMode } = useThemeContext();
+  const extensions = useMemo(() => {
+    return [
+      createBasicExtensions({ placeholder: t('notebook markdown placeholder'), readOnly }),
+      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,54 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AutomationPlugin } from '@dxos/plugin-automation';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { SpacePlugin } from '@dxos/plugin-space';
+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' }),
+    // TODO(burdon): Factor out Surface to avoid dependency on app-framework.
+    withPluginManager({
+      plugins: [
+        ClientPlugin({
+          onClientInitialized: async ({ client }) => {
+            await client.halo.createIdentity();
+            await client.spaces.waitUntilReady();
+          },
+        }),
+        SpacePlugin({}),
+        SettingsPlugin(),
+        IntentPlugin(),
+        AutomationPlugin(),
+      ],
+    }),
+  ],
+  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,86 @@
+//
+// 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' | 'promptResults' | '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,
+  promptResults,
+  onCellInsert,
+  onCellDelete,
+  ...props
+}: NotebookSectionProps) => {
+  const { t } = useTranslation(meta.id);
+  const resizable = cell.type === 'query';
+
+  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} promptResults={promptResults} {...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

@@ -4,21 +4,22 @@
 
 import React, { useMemo } from 'react';
 
-import { type ScriptType } from '@dxos/functions';
+import { type Script } from '@dxos/functions';
 import { createDocAccessor, getSpace } from '@dxos/react-client/echo';
 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;
+  script: Script.Script;
+  settings?: ScriptSettings;
 } & Pick<TypescriptEditorProps, 'env'>;
 
 export const ScriptContainer = ({ role, script, settings = { editorInputMode: 'vscode' }, env }: ScriptEditorProps) => {
@@ -32,7 +33,7 @@ export const ScriptContainer = ({ role, script, settings = { editorInputMode: 'v
       script.source.target
         ? [
             listener({
-              onChange: (text) => {
+              onChange: ({ text }) => {
                 if (script.source.target?.content !== text) {
                   script.changed = true;
                 }

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

@@ -2,29 +2,46 @@
 // 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 { Script } from '@dxos/functions';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-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,
+    withLayout({ classNames: 'is-prose' }),
+    withPluginManager({
+      plugins: [IntentPlugin(), ClientPlugin({})],
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof ScriptToolbar>;
 
 export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    state: {},
+    script: Script.make({
+      name: 'test',
+      description: 'test',
+      source: 'test',
+    }),
+  },
+};

package/src/components/ScriptToolbar/ScriptToolbar.tsx

@@ -5,10 +5,17 @@
 import { Rx } from '@effect-rx/rx-react';
 import React, { useMemo } from 'react';
 
-import { type ScriptType } from '@dxos/functions';
+import { type Script } 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, useTranslation } from '@dxos/react-ui';
+import {
+  type ActionGraphProps,
+  MenuProvider,
+  ToolbarMenu,
+  createGapSeparator,
+  rxFromSignal,
+  useMenuActions,
+} from '@dxos/react-ui-menu';
 
 import {
   type CreateDeployOptions,
@@ -18,9 +25,30 @@ import {
   createTemplateSelect,
   useDeployDeps,
 } from '../../hooks';
-import { SCRIPT_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
+
+export type ScriptToolbarProps = {
+  role?: string;
+  script: Script.Script;
+  state: ScriptToolbarState;
+};
+
+export const ScriptToolbar = ({ script, role, state }: ScriptToolbarProps) => {
+  const { t } = useTranslation(meta.id);
+  const options = useDeployDeps({ script });
+  const menu = useMemo(() => createToolbarActions({ state, script, t, ...options }), [state, script, options, t]);
+  const actions = useMenuActions(menu);
+
+  return (
+    <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
+      <MenuProvider {...actions} attendableId={fullyQualifiedId(script)}>
+        <ToolbarMenu />
+      </MenuProvider>
+    </ElevationProvider>
+  );
+};
 
-const createToolbar = ({ state, script, ...options }: CreateDeployOptions) =>
+const createToolbarActions = ({ state, script, ...options }: CreateDeployOptions): Rx.Rx<ActionGraphProps> =>
   Rx.make((get) =>
     get(
       rxFromSignal(() => {
@@ -35,24 +63,3 @@ const createToolbar = ({ state, script, ...options }: CreateDeployOptions) =>
       }),
     ),
   );
-
-export type ScriptToolbarProps = ThemedClassName<{
-  role?: string;
-  script: ScriptType;
-  state: ScriptToolbarState;
-}>;
-
-export const ScriptToolbar = ({ script, role, state, classNames }: ScriptToolbarProps) => {
-  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 (
-    <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...menu} attendableId={fullyQualifiedId(script)}>
-        <ToolbarMenu classNames={classNames} />
-      </MenuProvider>
-    </ElevationProvider>
-  );
-};