@dxos/plugin-script 0.8.4-main.5ea62a8 → 0.8.4-main.ae835ea

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,22 +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 ScriptSettingsProps } from '../types';
+import { type ScriptSettings } from '../types';
 
 import { ScriptToolbar } from './ScriptToolbar';
 import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
 
 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) => {
@@ -33,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,21 +2,33 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { Obj, Ref } from '@dxos/echo';
-import { ScriptType } from '@dxos/functions';
-import { DataType } from '@dxos/schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+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 { 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: {
-    script: Obj.make(ScriptType, {
+    state: {},
+    script: Script.make({
       name: 'test',
       description: 'test',
-      source: Ref.make(DataType.makeText('test')),
+      source: 'test',
     }),
-    state: {},
   },
 };

package/src/components/ScriptToolbar/ScriptToolbar.tsx

@@ -5,9 +5,9 @@
 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, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { ElevationProvider, useTranslation } from '@dxos/react-ui';
 import {
   type ActionGraphProps,
   MenuProvider,
@@ -25,7 +25,28 @@ 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 createToolbarActions = ({ state, script, ...options }: CreateDeployOptions): Rx.Rx<ActionGraphProps> =>
   Rx.make((get) =>
@@ -42,27 +63,3 @@ const createToolbarActions = ({ 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(
-    () => createToolbarActions({ 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>
-  );
-};

package/src/components/Settings/ScriptObjectSettings.tsx

@@ -5,31 +5,35 @@
 import { Octokit } from '@octokit/core';
 import React, { type ChangeEvent, useCallback, useState } from 'react';
 
+import { ToolId } from '@dxos/ai';
 import { SettingsAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { FunctionType, type ScriptType, getInvocationUrl, getUserFunctionIdInMetadata } from '@dxos/functions';
+import { Blueprint, Template } from '@dxos/blueprints';
+import { Function, type Script, getInvocationUrl, getUserFunctionIdInMetadata } from '@dxos/functions';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { Filter, Ref, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
 import { Button, Clipboard, Input, useAsyncEffect, useControlledState, useTranslation } from '@dxos/react-ui';
 import { DataType } from '@dxos/schema';
+import { kebabize } from '@dxos/util';
 
-import { SCRIPT_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
 export type ScriptObjectSettingsProps = {
-  object: ScriptType;
+  object: Script.Script;
 };
 
 export const ScriptObjectSettings = ({ object }: ScriptObjectSettingsProps) => {
   return (
     <>
       <Binding object={object} />
+      <BlueprintEditor object={object} />
       <Publishing object={object} />
     </>
   );
 };
 
 export const ScriptProperties = ({ object }: ScriptObjectSettingsProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   return (
     <Input.Root>
       <Input.Label>{t('description label')}</Input.Label>
@@ -44,11 +48,95 @@ export const ScriptProperties = ({ object }: ScriptObjectSettingsProps) => {
   );
 };
 
+const BlueprintEditor = ({ object }: ScriptObjectSettingsProps) => {
+  const { t } = useTranslation(meta.id);
+  const space = getSpace(object);
+  const [fn] = useQuery(space, Filter.type(Function.Function, { source: Ref.make(object) }));
+  const blueprints = useQuery(space, Filter.type(Blueprint.Blueprint));
+
+  const [creating, setCreating] = useState(false);
+  const [instructions, setInstructions] = useState<string>(`You can run the script "${object.name ?? 'script'}".`);
+  const blueprintKey = `dxos.org/blueprint/${kebabize(object.name ?? 'script')}`;
+  const existingBlueprint = blueprints.find((bp) => bp.key === blueprintKey);
+
+  useAsyncEffect(async () => {
+    if (!existingBlueprint) {
+      return;
+    }
+    const source = await existingBlueprint.instructions.source.load();
+    setInstructions(source.content ?? '');
+  }, [existingBlueprint]);
+
+  const handleSave = useCallback(async () => {
+    if (!space) {
+      return;
+    }
+
+    setCreating(true);
+    try {
+      if (existingBlueprint) {
+        const text = await existingBlueprint.instructions.source.load();
+        text.content = instructions;
+        if (fn?.key) {
+          const toolId = ToolId.make(fn.key);
+          if (!existingBlueprint.tools?.includes(toolId)) {
+            existingBlueprint.tools = [...(existingBlueprint.tools ?? []), toolId];
+          }
+        }
+      } else if (fn?.key) {
+        space.db.add(
+          Blueprint.make({
+            key: blueprintKey,
+            name: object.name ?? 'Script',
+            instructions: Template.make({
+              source: instructions,
+            }),
+            tools: [ToolId.make(fn.key)],
+          }),
+        );
+      }
+      await space.db.flush();
+    } finally {
+      setCreating(false);
+    }
+  }, [space, existingBlueprint, fn, blueprintKey, object.name, instructions]);
+
+  return (
+    <div className='flex flex-col gap-4 mlb-cardSpacingBlock'>
+      <div>
+        <h2>{t('blueprint editor label', { default: 'Blueprint' })}</h2>
+        <p className='text-description text-sm'>
+          {t('blueprint editor description', { default: 'Create a blueprint that exposes this script as a tool.' })}
+        </p>
+      </div>
+      <Input.Root>
+        <div role='none' className='flex flex-col gap-1'>
+          <Input.Label>{t('blueprint instructions label', { default: 'Instructions' })}</Input.Label>
+          <Input.TextArea
+            placeholder={t('blueprint instructions placeholder', { default: 'Describe how this tool should be used.' })}
+            rows={6}
+            value={instructions}
+            onChange={(event) => setInstructions(event.target.value)}
+            classNames='resize-y'
+          />
+        </div>
+      </Input.Root>
+      <div className='flex justify-end gap-2'>
+        <Button disabled={(!existingBlueprint && !fn?.key) || creating} onClick={handleSave}>
+          {t(creating ? 'creating label' : 'create blueprint label', {
+            default: creating ? 'Creating…' : 'Create blueprint',
+          })}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
 const Binding = ({ object }: ScriptObjectSettingsProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const client = useClient();
   const space = getSpace(object);
-  const [fn] = useQuery(space, Filter.type(FunctionType, { source: Ref.make(object) }));
+  const [fn] = useQuery(space, Filter.type(Function.Function, { source: Ref.make(object) }));
 
   const functionId = fn && getUserFunctionIdInMetadata(getMeta(fn));
   const functionUrl =
@@ -109,7 +197,7 @@ const Binding = ({ object }: ScriptObjectSettingsProps) => {
 
 // TODO(burdon): Move to separate tab?
 const Publishing = ({ object }: ScriptObjectSettingsProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const space = getSpace(object);
   const [githubToken] = useQuery(space, Filter.type(DataType.AccessToken, { source: 'github.com' }));
@@ -196,7 +284,3 @@ const Publishing = ({ object }: ScriptObjectSettingsProps) => {
     </div>
   );
 };
-
-// TODO(wittjosiah): Factor out.
-// From https://stackoverflow.com/a/67243723/2804332
-const kebabize = (str: string) => str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());

package/src/components/Settings/ScriptPluginSettings.tsx

@@ -4,38 +4,23 @@
 
 import React from 'react';
 
-import { type Credential } from '@dxos/protocols/proto/dxos/halo/credentials';
 import { useClient } from '@dxos/react-client';
 import { Button, Select, useTranslation } from '@dxos/react-ui';
 import { type EditorInputMode, EditorInputModes } from '@dxos/react-ui-editor';
 import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 
 import { meta } from '../../meta';
-import { type ScriptSettingsProps } from '../../types';
+import { type ScriptSettings } from '../../types';
+import { getAccessCredential } from '../../util';
 
-export const ScriptPluginSettings = ({ settings }: { settings: ScriptSettingsProps }) => {
+export const ScriptPluginSettings = ({ settings }: { settings: ScriptSettings }) => {
   const { t } = useTranslation(meta.id);
   const client = useClient();
 
   // TODO(burdon): Check token.
   const handleAuthenticate = async () => {
     const { identityKey } = client.halo.identity.get()!;
-    await client.halo.writeCredentials([
-      {
-        issuer: identityKey,
-        issuanceDate: new Date(),
-        subject: {
-          id: identityKey,
-          assertion: {
-            '@type': 'dxos.halo.credentials.ServiceAccess',
-            serverName: 'hub.dxos.network',
-            serverKey: identityKey,
-            identityKey,
-            capabilities: ['composer:beta'],
-          },
-        },
-      } satisfies Credential,
-    ]);
+    await client.halo.writeCredentials([getAccessCredential(identityKey)]);
   };
 
   return (

package/src/components/TestPanel/TestContainer.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { type ScriptType } from '@dxos/functions';
+import { type Script } from '@dxos/functions';
 import { StackItem } from '@dxos/react-ui-stack';
 
 import { useDeployState, useToolbarState } from '../../hooks';
@@ -13,7 +13,7 @@ import { TestPanel } from './TestPanel';
 
 export type TestContainerProps = {
   role: string;
-  script: ScriptType;
+  script: Script.Script;
 };
 
 export const TestContainer = ({ script }: TestContainerProps) => {

package/src/components/TestPanel/TestPanel.tsx

@@ -9,7 +9,7 @@ import { Avatar, Icon, Input, type ThemedClassName, Toolbar, useTranslation } fr
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { errorText, mx } from '@dxos/react-ui-theme';
 
-import { SCRIPT_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
 type State = 'pending' | 'responding';
 
@@ -24,7 +24,7 @@ export type TestPanelProps = ThemedClassName<{
 
 // TODO(burdon): Need persistent history (currently lost when switching tabs)..
 export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   const inputRef = useRef<HTMLInputElement>(null);
   const [input, setInput] = useState('');
@@ -41,7 +41,7 @@ export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
     }
   };
 
-  const controller = useRef<AbortController>();
+  const controller = useRef<AbortController>(null);
   useEffect(() => {
     return () => {
       handleStop();
@@ -50,7 +50,7 @@ export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
 
   const handleStop = () => {
     controller.current?.abort('stop');
-    controller.current = undefined;
+    controller.current = null;
   };
 
   const handleClear = () => {
@@ -62,7 +62,7 @@ export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
   };
 
   const handleResponse = ({ text, data, error }: { text?: string; data?: any; error?: Error } = {}) => {
-    controller.current = undefined;
+    controller.current = null;
     setHistory((history) => [...history, { type: 'response', text, data, error } satisfies Message]);
     setResult('');
     setState(null);
@@ -163,7 +163,7 @@ export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
       {/* TODO(burdon): Replace with Thread. */}
       <MessageThread ref={scrollerRef} state={state} result={result} history={history} />
       {/* TODO(burdon): Replace with Form based on the function's input schema. */}
-      <Toolbar.Root classNames='p-2'>
+      <Toolbar.Root>
         <Input.Root>
           <Input.TextInput
             ref={inputRef}
@@ -237,7 +237,7 @@ const MessageItem = ({ classNames, message }: ThemedClassName<{ message: Message
       )}
 
       {data && (
-        <SyntaxHighlighter language='json' className={mx(wrapper, 'px-8 py-2 text-xs')}>
+        <SyntaxHighlighter language='json' className={mx(wrapper, 'text-xs')}>
           {JSON.stringify(data, null, 2)}
         </SyntaxHighlighter>
       )}