@dxos/plugin-script 0.8.4-main.c85a9c8dae → 0.8.4-main.dfabb4ec29

package/src/components/TestPanel/TestPanel.tsx

@@ -2,16 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 
 import { log } from '@dxos/log';
 import { Avatar, Icon, Input, ScrollArea, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/ui-theme';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
-type State = 'pending' | 'responding';
+type State = 'pending';
 
 /**
  * Request or response.
@@ -24,200 +24,123 @@ type Message = {
 };
 
 export type TestPanelProps = ThemedClassName<{
-  functionUrl?: string;
+  onInvoke?: (input: unknown) => Promise<unknown>;
 }>;
 
-// TODO(burdon): Need persistent history (currently lost when switching tabs)..
-export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
-  const { t } = useTranslation(meta.id);
+// TODO(burdon): Need persistent history (currently lost when switching tabs).
+export const TestPanel = composable<HTMLDivElement, TestPanelProps>(
+  ({ classNames, onInvoke, ...props }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
 
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [input, setInput] = useState('');
-  const [result, setResult] = useState('');
-  const [state, setState] = useState<State | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [input, setInput] = useState('');
+    const [state, setState] = useState<State | null>(null);
 
-  // TODO(burdon): Persistent history (thread).
-  const [history, setHistory] = useState<Message[]>([]);
+    // TODO(burdon): Persistent history (thread).
+    const [history, setHistory] = useState<Message[]>([]);
 
-  const scrollerRef = useRef<HTMLDivElement>(null);
-  const handleScroll = () => {
-    if (scrollerRef.current) {
-      scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
-    }
-  };
-
-  const controller = useRef<AbortController>(null);
-  useEffect(() => {
-    return () => {
-      handleStop();
+    const scrollerRef = useRef<HTMLDivElement>(null);
+    const handleScroll = () => {
+      if (scrollerRef.current) {
+        scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
+      }
     };
-  }, []);
 
-  const handleStop = () => {
-    controller.current?.abort('stop');
-    controller.current = null;
-  };
-
-  const handleClear = () => {
-    handleStop();
-    setInput('');
-    setResult('');
-    setHistory([]);
-    inputRef.current?.focus();
-  };
+    const handleClear = () => {
+      setInput('');
+      setHistory([]);
+      inputRef.current?.focus();
+    };
 
-  const handleResponse = ({
-    text,
-    data,
-    error,
-  }: {
-    text?: string;
-    data?: any;
-    error?: Error;
-  } = {}) => {
-    controller.current = null;
-    setHistory((history) => [...history, { type: 'response', text, data, error } satisfies Message]);
-    setResult('');
-    setState(null);
-    handleScroll();
-  };
+    const handleResponse = ({
+      text,
+      data,
+      error,
+    }: {
+      text?: string;
+      data?: any;
+      error?: Error;
+    } = {}) => {
+      setHistory((history) => [...history, { type: 'response', text, data, error } satisfies Message]);
+      setState(null);
+      handleScroll();
+    };
 
-  const handleRequest = async (input: string) => {
-    // Returns a promise that resolves when a value has been received.
-    try {
-      setState('pending');
+    const handleRequest = async (input: string) => {
+      if (!onInvoke) {
+        handleResponse({ error: new Error('Function not deployed') });
+        return;
+      }
 
-      let data = null;
-      // Detect JSON input.
+      let data: unknown = input;
+      let displayText = input;
       if (input.charAt(0) === '{') {
         try {
           const validJsonString = input.replace(/'/g, '"').replace(/([{,]\s*)([a-zA-Z0-9_]+)(\s*:)/g, '$1"$2"$3');
           data = JSON.parse(validJsonString);
-          input = JSON.stringify(data, null, 2);
+          displayText = JSON.stringify(data, null, 2);
         } catch (err) {
-          inputRef.current?.focus();
+          handleResponse({ error: new Error('Invalid JSON input') });
           return;
         }
       }
 
-      setInput('');
-      setResult('');
-      setHistory((history) => [...history, { type: 'request', text: input }]);
-      setTimeout(() => {
-        handleScroll();
-      });
-
-      // Throws DOMException when aborted.
-      controller.current = new AbortController();
-      const response = await fetch(functionUrl!, {
-        signal: controller.current.signal,
-        method: 'POST',
-        body: input,
-        headers: {
-          'Content-Type': data ? 'application/json' : 'text/plain',
-        },
-      });
-
-      // Check for error.
-      if (!response.ok) {
-        const text = await response.text();
-        handleResponse({
-          error: new Error(text || response.statusText || String(response.status)),
-        });
-        return;
-      }
+      try {
+        setState('pending');
+        setInput('');
+        setHistory((history) => [...history, { type: 'request', text: displayText }]);
+        setTimeout(handleScroll);
 
-      // Check for JSON.
-      const contentType = response.headers.get('content-type');
-      if (contentType === 'application/json') {
-        const data = await response.json();
-        handleResponse({ data });
-        return;
-      }
+        const result = await onInvoke(data);
 
-      // Text (including streaming).
-      setState('responding');
-      let text = '';
-      const reader = response.body!.getReader();
-      const pump = async ({ done, value }: ReadableStreamReadResult<Uint8Array>): Promise<void> => {
-        text = text + new TextDecoder().decode(value);
-        if (!controller.current || done) {
-          handleResponse({ text });
-          return;
+        if (typeof result === 'string') {
+          handleResponse({ text: result });
+        } else {
+          handleResponse({ data: result });
         }
-
-        setResult(text);
-        setTimeout(() => {
-          handleScroll();
-        });
-
-        return reader.read().then(pump);
-      };
-
-      void reader
-        .read()
-        .then(pump)
-        .catch((err) => {
-          if (err.name !== 'AbortError') {
-            log.catch(err);
-          }
-        });
-    } catch (err: any) {
-      if (err !== 'stop') {
-        const error = err instanceof Error ? err : new Error(err);
+      } catch (err: any) {
+        const error = err instanceof Error ? err : new Error(String(err));
         handleResponse({ error });
         log.catch(err);
-      } else {
-        handleResponse();
       }
-    }
-  };
+    };
 
-  return (
-    <div className={mx('flex flex-col h-full overflow-hidden', classNames)}>
-      {/* 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>
-        <Input.Root>
-          <Input.TextInput
-            ref={inputRef}
-            autoFocus
-            placeholder={t('function request placeholder')}
-            value={input}
-            onChange={(ev) => setInput(ev.target.value)}
-            onKeyDown={(ev) => ev.key === 'Enter' && handleRequest(input)}
-          />
-        </Input.Root>
-        <Toolbar.IconButton
-          icon='ph--play--regular'
-          size={4}
-          label='Execute'
-          iconOnly
-          onClick={() => handleRequest(input)}
-        />
-        <Toolbar.IconButton
-          icon={state ? 'ph--stop--regular' : 'ph--trash--regular'}
-          size={4}
-          label={state ? 'Stop' : 'Clear'}
-          iconOnly
-          onClick={() => (state ? handleStop() : handleClear())}
-        />
-      </Toolbar.Root>
-    </div>
-  );
-};
+    return (
+      <div
+        {...composableProps(props, { classNames: ['flex flex-col h-full overflow-hidden', classNames] })}
+        ref={forwardedRef}
+      >
+        {/* TODO(burdon): Replace with Thread. */}
+        <MessageThread ref={scrollerRef} state={state} history={history} />
+        {/* TODO(burdon): Replace with Form based on the function's input schema. */}
+        <Toolbar.Root>
+          <Input.Root>
+            <Input.TextInput
+              ref={inputRef}
+              autoFocus
+              placeholder={t('function-request.placeholder')}
+              value={input}
+              onChange={(ev) => setInput(ev.target.value)}
+              onKeyDown={(ev) => ev.key === 'Enter' && handleRequest(input)}
+            />
+          </Input.Root>
+          <Toolbar.IconButton icon='ph--play--regular' label='Execute' iconOnly onClick={() => handleRequest(input)} />
+          <Toolbar.IconButton icon='ph--trash--regular' label='Clear' iconOnly onClick={handleClear} />
+        </Toolbar.Root>
+      </div>
+    );
+  },
+);
 
 // TODO(burdon): Replace with thread?
 // TODO(burdon): Button to edit/re-run question.
 type MessageThreadProps = {
   state: State | null;
   history: Message[];
-  result: string;
 };
 
 const MessageThread = forwardRef<HTMLDivElement, MessageThreadProps>(
-  ({ state, history, result }: MessageThreadProps, forwardedRef) => {
+  ({ state, history }: MessageThreadProps, forwardedRef) => {
     return (
       <ScrollArea.Root orientation='vertical' classNames='h-full' ref={forwardedRef}>
         <ScrollArea.Viewport classNames='gap-6 p-2'>
@@ -230,15 +153,10 @@ const MessageThread = forwardRef<HTMLDivElement, MessageThreadProps>(
             </div>
           ))}
 
-          {result?.length > 0 && (
+          {state === 'pending' && (
             <div className='grid grid-cols-[2rem_1fr_2rem]'>
               <div className='p-1'>
-                {(state === 'pending' && <Icon icon='ph--spinner--regular' size={6} classNames='animate-spin' />) || (
-                  <Icon icon='ph--robot--regular' size={6} classNames='animate-[pulse_1s_ease-in-out_infinite]' />
-                )}
-              </div>
-              <div className='overflow-auto'>
-                <MessageItem message={{ type: 'response', text: result }} />
+                <Icon icon='ph--spinner--regular' size={6} classNames='animate-spin' />
               </div>
             </div>
           )}
@@ -261,17 +179,13 @@ const MessageItem = ({ classNames, message }: ThemedClassName<{ message: Message
         </div>
       )}
 
-      {data && (
-        <SyntaxHighlighter language='json' className={mx(wrapper, 'text-xs')}>
-          {JSON.stringify(data, null, 2)}
-        </SyntaxHighlighter>
-      )}
+      {data && <JsonHighlighter data={data} classNames={mx(wrapper, 'text-xs')} />}
     </div>
   );
 };
 
 const RobotAvatar = () => (
   <Avatar.Root>
-    <Avatar.Content size={6} variant='circle' icon='ph--robot--regular' />
+    <Avatar.Content size={6} variant='circle' icon='ph--drone--regular' />
   </Avatar.Root>
 );

package/src/components/TypescriptEditor/TypescriptEditor.stories.tsx

@@ -8,8 +8,8 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { createDocAccessor } from '@dxos/echo-db';
 import { createObject } from '@dxos/react-client/echo';
 import { Panel, Toolbar } from '@dxos/react-ui';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
 import { createDataExtensions } from '@dxos/ui-editor';
 import { trim } from '@dxos/util';
 
@@ -72,9 +72,9 @@ const DefaultStory = (props: TypescriptEditorProps) => {
         </Toolbar.Root>
       </Panel.Toolbar>
       <Panel.Content>
-        <div role='none' className='grid grid-rows-[1fr_min-content] h-full overflow-hidden text-sm'>
+        <div className='grid grid-rows-[1fr_min-content] h-full overflow-hidden text-sm'>
           <TypescriptEditor {...props} initialValue={object.content} extensions={extensions} />
-          <Json data={result} classNames='shrink-0 p-2 border-y border-subdued-separator' />
+          <JsonHighlighter data={result} classNames='shrink-0 p-2 border-y border-subdued-separator' />
         </div>
       </Panel.Content>
     </Panel.Root>
@@ -85,7 +85,7 @@ const meta = {
   title: 'plugins/plugin-script/components/TypescriptEditor',
   component: TypescriptEditor,
   render: DefaultStory,
-  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-prose-max-width' })],
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-document-max-width' })],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -9,23 +9,24 @@ import { lintKeymap } from '@codemirror/lint';
 import { Prec } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
+import { composeRefs } from '@radix-ui/react-compose-refs';
 import { type VirtualTypeScriptEnvironment } from '@typescript/vfs';
 import { continueKeymap } from '@valtown/codemirror-continue';
 import { type HoverInfo, tsAutocomplete, tsFacet, tsHover, tsLinter, tsSync } from '@valtown/codemirror-ts';
-import React, { memo } from 'react';
+import React from 'react';
 
 import { type ThemeMode, type ThemedClassName, useThemeContext } from '@dxos/react-ui';
 import { type UseTextEditorProps, useTextEditor } from '@dxos/react-ui-editor';
 import { Domino } from '@dxos/ui';
 import {
   type BasicExtensionsOptions,
-  type EditorInputMode,
   InputModeExtensions,
   createBasicExtensions,
   createThemeExtensions,
   defaultStyles,
 } from '@dxos/ui-editor';
-import { mx } from '@dxos/ui-theme';
+import { type EditorInputMode } from '@dxos/ui-editor/types';
+import { composable, composableProps } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 export type TypescriptEditorProps = ThemedClassName<
@@ -39,19 +40,23 @@ export type TypescriptEditorProps = ThemedClassName<
   } & Pick<UseTextEditorProps, 'initialValue' | 'extensions' | 'scrollTo' | 'selection'>
 >;
 
-export const TypescriptEditor = memo(
-  ({
-    classNames,
-    id,
-    role = 'article',
-    inputMode = 'vscode',
-    env,
-    options,
-    initialValue,
-    extensions,
-    scrollTo,
-    selection,
-  }: TypescriptEditorProps) => {
+export const TypescriptEditor = composable<HTMLDivElement, TypescriptEditorProps>(
+  (
+    {
+      classNames,
+      id,
+      role = 'article',
+      inputMode = 'vscode',
+      env,
+      options,
+      initialValue,
+      extensions,
+      scrollTo,
+      selection,
+      ...props
+    },
+    forwardedRef,
+  ) => {
     const { themeMode } = useThemeContext();
     const { parentRef, focusAttributes } = useTextEditor(
       () => ({
@@ -98,7 +103,9 @@ export const TypescriptEditor = memo(
       [themeMode, id, extensions, inputMode, selection, scrollTo, env],
     );
 
-    return <div ref={parentRef} className={mx(classNames)} {...focusAttributes} />;
+    return (
+      <div {...composableProps(props, { classNames, ...focusAttributes })} ref={composeRefs(parentRef, forwardedRef)} />
+    );
   },
 );
 
@@ -130,7 +137,7 @@ const createTooltipRenderer = (themeMode: ThemeMode) => {
     return {
       dom: Domino.of('div')
         .classNames('xs:max-w-80 max-w-lg p-1 bg-base-surface rounded-sm border border-separator')
-        .children(...children).root,
+        .append(...children).root,
     };
   };
 };

package/src/components/index.ts

@@ -2,9 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './FrameContainer';
+import { type ComponentType, lazy } from 'react';
+
+export * from './FramePanel';
 export * from './NotebookStack';
 export * from './QueryEditor';
 export * from './ScriptToolbar';
 export * from './TestPanel';
 export * from './TypescriptEditor';
+
+export const ScriptPluginSettings: ComponentType<any> = lazy(() => import('./ScriptPluginSettings'));

package/src/constants.ts

@@ -2,6 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
-import { meta } from './meta';
+import { meta } from '#meta';
 
-export const DEPLOYMENT_DIALOG = `${meta.id}/deployment/dialog`;
+export const DEPLOYMENT_DIALOG = `${meta.id}.deployment.dialog`;

package/src/containers/DeploymentDialog/DeploymentDialog.stories.tsx

@@ -8,12 +8,12 @@ import React, { useMemo } from 'react';
 import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj } from '@dxos/echo';
-import { ClientPlugin } from '@dxos/plugin-client';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
 import { Dialog } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { AccessToken } from '@dxos/types';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
 import { DeploymentDialog } from './DeploymentDialog';
 
@@ -36,7 +36,9 @@ const DeploymentDialogStory = () => {
   );
   return (
     <Dialog.Root defaultOpen={true}>
-      <DeploymentDialog accessToken={accessToken} scriptTemplates={scriptTemplates} />
+      <Dialog.Overlay>
+        <DeploymentDialog accessToken={accessToken} scriptTemplates={scriptTemplates} />
+      </Dialog.Overlay>
     </Dialog.Root>
   );
 };

package/src/containers/DeploymentDialog/DeploymentDialog.tsx

@@ -7,11 +7,12 @@ import React, { useEffect, useMemo } from 'react';
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
 import { getSpace } from '@dxos/react-client/echo';
-import { Button, Dialog, IconButton, useTranslation } from '@dxos/react-ui';
+import { Button, Dialog, useTranslation } from '@dxos/react-ui';
 import { type AccessToken } from '@dxos/types';
 
-import { useCreateAndDeployScriptTemplates } from '../../hooks';
-import { meta } from '../../meta';
+import { useCreateAndDeployScriptTemplates } from '#hooks';
+import { meta } from '#meta';
+
 import { type Template } from '../../templates';
 
 // TODO(ZaymonFC):
@@ -37,40 +38,39 @@ export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDia
     if (status === 'success') {
       // TODO(ZaymonFC): We can probably re-use this toast for normal script deployment.
       void invokePromise(LayoutOperation.AddToast, {
-        id: `${meta.id}/deployment-success`,
+        id: `${meta.id}.deployment-success`,
         icon: 'ph--check--regular',
         duration: Infinity,
-        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 }],
+        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 }],
       });
       void invokePromise(LayoutOperation.UpdateDialog, { state: false });
     }
     if (status === 'error') {
       void invokePromise(LayoutOperation.UpdateDialog, { state: false });
       void invokePromise(LayoutOperation.AddToast, {
-        id: `${meta.id}/deployment-error`,
+        id: `${meta.id}.deployment-error`,
         icon: 'ph--warning--regular',
         duration: Infinity,
-        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 }],
+        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 }],
       });
     }
   }, [status, invokePromise]);
 
   return (
     <Dialog.Content>
-      <div className='flex justify-between items-center'>
-        <Dialog.Title>{t('deployment dialog title')}</Dialog.Title>
+      <Dialog.Header>
+        <Dialog.Title>{t('deployment-dialog.title')}</Dialog.Title>
         <Dialog.Close asChild>
-          <IconButton icon='ph--x--regular' size={4} label='Close' iconOnly density='fine' variant='ghost' />
+          <Dialog.CloseIconButton />
         </Dialog.Close>
-      </div>
-      <div role='none' className='py-4'>
-        {/* TODO: Implement deployment logic and UI. */}
+      </Dialog.Header>
+      <Dialog.Body>
         <p>
-          {t('deployment dialog scripts found message', {
+          {t('deployment-dialog-scripts-found.message', {
             count: scriptTemplates.length,
           })}
         </p>
@@ -79,21 +79,21 @@ export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDia
             return <li key={template.id}>{template.name}</li>;
           })}
         </ul>
-      </div>
-      <div role='none' className='flex flex-row-reverse gap-1'>
+      </Dialog.Body>
+      <Dialog.ActionBar>
+        <Dialog.Close asChild>
+          <Button disabled={status === 'pending'}>{t('deployment-dialog-skip-button.label')}</Button>
+        </Dialog.Close>
         <Button variant='primary' onClick={handleCreateAndDeployScripts} disabled={status === 'pending'}>
           {status === 'pending'
-            ? t('deployment dialog deploy functions pending button label', {
+            ? t('deployment-dialog-deploy-functions-pending-button.label', {
                 count: scriptTemplates.length,
               })
-            : t('deployment dialog deploy functions button label', {
+            : 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.ActionBar>
     </Dialog.Content>
   );
 };

package/src/containers/DeploymentDialog/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { DeploymentDialog } from './DeploymentDialog';
-
-export default DeploymentDialog;
+export { DeploymentDialog as default } from './DeploymentDialog';