@dxos/plugin-script 0.8.1-staging.391c573 → 0.8.1-staging.97aedb1

package/src/components/{ScriptSettingsPanel.tsx → Settings/ScriptObjectSettings.tsx}

@@ -10,27 +10,110 @@ import { FunctionType, type ScriptType, getInvocationUrl, getUserFunctionUrlInMe
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
-import { Button, Clipboard, Input, Separator, useControlledState, useTranslation } from '@dxos/react-ui';
+import { Button, Clipboard, Input, useControlledState, useTranslation } from '@dxos/react-ui';
 import { AccessTokenType } from '@dxos/schema';
 
-import { SCRIPT_PLUGIN } from '../meta';
+import { SCRIPT_PLUGIN } from '../../meta';
 
-// 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());
+export type ScriptObjectSettingsProps = {
+  object: ScriptType;
+};
 
-export type ScriptSettingsPanelProps = {
-  script: ScriptType;
+export const ScriptObjectSettings = ({ object }: ScriptObjectSettingsProps) => {
+  return (
+    <>
+      <Binding object={object} />
+      <Publishing object={object} />
+    </>
+  );
 };
 
-export const ScriptSettingsPanel = ({ script }: ScriptSettingsPanelProps) => {
+export const ScriptProperties = ({ object }: ScriptObjectSettingsProps) => {
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+  return (
+    <Input.Root>
+      <Input.Label>{t('description label')}</Input.Label>
+      <Input.TextInput
+        placeholder={t('description placeholder')}
+        value={object.description ?? ''}
+        onChange={(event) => {
+          object.description = event.target.value;
+        }}
+      />
+    </Input.Root>
+  );
+};
+
+const Binding = ({ object }: ScriptObjectSettingsProps) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const client = useClient();
-  const space = getSpace(script);
-  const [fn] = useQuery(space, Filter.schema(FunctionType, { source: script }));
+  const space = getSpace(object);
+  const [fn] = useQuery(space, Filter.schema(FunctionType, { source: object }));
+
+  const functionPath = fn && getUserFunctionUrlInMetadata(getMeta(fn));
+  const functionUrl =
+    functionPath &&
+    getInvocationUrl(functionPath, client.config.values.runtime?.services?.edge?.url ?? '', {
+      spaceId: space?.id,
+    });
+
+  const [binding, setBinding] = useControlledState(fn?.binding ?? '');
+  const handleBindingChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setBinding(event.target.value);
+    },
+    [setBinding],
+  );
+
+  const handleBindingBlur = useCallback(() => {
+    fn.binding = binding;
+  }, [fn, binding]);
+
+  if (!fn || !functionUrl) {
+    return null;
+  }
+
+  // TODO(burdon): Use form.
+  return (
+    <div role='form' className='flex flex-col p-2 gap-2'>
+      <h2>{t('remote function settings heading')}</h2>
+      <Input.Root>
+        <div role='none' className='flex flex-col gap-1'>
+          <Input.Label>{t('function url label')}</Input.Label>
+          <div role='none' className='flex gap-1'>
+            <Input.TextInput
+              disabled
+              value={functionUrl}
+              onChange={(event) => {
+                fn.name = event.target.value;
+              }}
+            />
+            <Clipboard.IconButton value={functionUrl} />
+          </div>
+        </div>
+      </Input.Root>
+      <Input.Root>
+        <div role='none' className='flex flex-col gap-1'>
+          <Input.Label>{t('function binding label')}</Input.Label>
+          <Input.TextInput
+            placeholder={t('function binding placeholder')}
+            value={binding}
+            onChange={handleBindingChange}
+            onBlur={handleBindingBlur}
+          />
+        </div>
+      </Input.Root>
+    </div>
+  );
+};
+
+// TODO(burdon): Move to separate tab?
+const Publishing = ({ object }: ScriptObjectSettingsProps) => {
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const space = getSpace(object);
   const [githubToken] = useQuery(space, Filter.schema(AccessTokenType, { source: 'github.com' }));
-  const gistKey = getMeta(script).keys.find(({ source }) => source === 'github.com');
+  const gistKey = getMeta(object).keys.find(({ source }) => source === 'github.com');
   const [gistUrl, setGistUrl] = useState<string | undefined>();
 
   useEffect(() => {
@@ -57,24 +140,6 @@ export const ScriptSettingsPanel = ({ script }: ScriptSettingsPanelProps) => {
     return () => clearTimeout(timeout);
   }, [githubToken, gistKey]);
 
-  const [binding, setBinding] = useControlledState(fn?.binding ?? '');
-  const handleBindingChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      setBinding(event.target.value);
-    },
-    [setBinding],
-  );
-  const handleBindingBlur = useCallback(() => {
-    fn.binding = binding;
-  }, [fn, binding]);
-
-  const functionPath = fn && getUserFunctionUrlInMetadata(getMeta(fn));
-  const functionUrl =
-    functionPath &&
-    getInvocationUrl(functionPath, client.config.values.runtime?.services?.edge?.url ?? '', {
-      spaceId: space?.id,
-    });
-
   const handleOpenTokenManager = useCallback(
     () => dispatch(createIntent(SettingsAction.Open, { plugin: 'dxos.org/plugin/token-manager' })),
     [],
@@ -84,13 +149,13 @@ export const ScriptSettingsPanel = ({ script }: ScriptSettingsPanelProps) => {
   const handlePublish = useCallback(async () => {
     setPublishing(true);
     const octokit = new Octokit({ auth: githubToken.token });
-    const source = await script.source.load();
-    const filename = script.name ? kebabize(script.name) : 'composer-script';
+    const source = await object.source.load();
+    const filename = object.name ? kebabize(object.name) : 'composer-script';
     const files = { [`${filename}.ts`]: { content: source.content } };
 
     try {
       // TODO(wittjosiah): Factor out to intent.
-      const meta = getMeta(script);
+      const meta = getMeta(object);
       const githubKey = meta.keys.find(({ source }) => source === 'github.com');
       const gistId = githubKey?.id;
       if (gistId) {
@@ -110,79 +175,32 @@ export const ScriptSettingsPanel = ({ script }: ScriptSettingsPanelProps) => {
     } finally {
       setPublishing(false);
     }
-  }, [script, githubToken]);
+  }, [object, githubToken]);
 
   return (
-    <>
-      <div role='form' className='flex flex-col w-full p-2 gap-4'>
-        <Input.Root>
-          <div role='none' className='flex flex-col gap-1'>
-            <Input.Label>{t('description label')}</Input.Label>
-            <Input.TextInput
-              placeholder={t('description placeholder')}
-              value={script.description ?? ''}
-              onChange={(event) => {
-                script.description = event.target.value;
-              }}
-            />
-          </div>
-        </Input.Root>
+    <div className='flex flex-col p-2 gap-4'>
+      <div>
+        <h2>{t('script publish settings label')}</h2>
+        <p className='text-description text-sm'>{t('script publish settings description')}</p>
       </div>
-      {fn && functionUrl && (
-        <>
-          <Separator />
-          <div role='form' className='flex flex-col w-full p-2 gap-4'>
-            <h2>{t('remote function settings heading')}</h2>
-            <Input.Root>
-              <div role='none' className='flex flex-col gap-1'>
-                <Input.Label>{t('function url label')}</Input.Label>
-                <div role='none' className='flex gap-1'>
-                  <Input.TextInput
-                    disabled
-                    value={functionUrl}
-                    onChange={(event) => {
-                      fn.name = event.target.value;
-                    }}
-                  />
-                  <Clipboard.IconButton value={functionUrl} />
-                </div>
-              </div>
-            </Input.Root>
-            <Input.Root>
-              <div role='none' className='flex flex-col gap-1'>
-                <Input.Label>{t('function binding label')}</Input.Label>
-                <Input.TextInput
-                  placeholder={t('function binding placeholder')}
-                  value={binding}
-                  onChange={handleBindingChange}
-                  onBlur={handleBindingBlur}
-                />
-              </div>
-            </Input.Root>
-          </div>
-        </>
+      {!githubToken && (
+        <div className='flex flex-col gap-2'>
+          <span>{t('no github token label')}</span>
+          <Button onClick={handleOpenTokenManager}>{t('open token manager label')}</Button>
+        </div>
       )}
-      <Separator />
-      <div className='flex flex-col w-full p-2 gap-4'>
-        <div>
-          <h2>{t('script publish settings label')}</h2>
-          <p className='text-description text-sm'>{t('script publish settings description')}</p>
+      {githubToken && (
+        <div className='flex justify-end gap-2'>
+          {gistUrl && <Clipboard.IconButton value={gistUrl} />}
+          <Button disabled={publishing} onClick={handlePublish}>
+            {t(publishing ? 'publishing label' : 'publish label')}
+          </Button>
         </div>
-        {!githubToken && (
-          <div className='flex flex-col items-center justify-center gap-2'>
-            <span>{t('no github token label')}</span>
-            <Button onClick={handleOpenTokenManager}>{t('open token manager label')}</Button>
-          </div>
-        )}
-        {githubToken && (
-          <div className='flex justify-end gap-2'>
-            {gistUrl && <Clipboard.IconButton value={gistUrl} />}
-            <Button disabled={publishing} onClick={handlePublish}>
-              {t(publishing ? 'publishing label' : 'publish label')}
-            </Button>
-          </div>
-        )}
-      </div>
-    </>
+      )}
+    </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/{ScriptSettings/ScriptSettings.tsx → Settings/ScriptPluginSettings.tsx}

@@ -10,11 +10,11 @@ import { Button, Select, useTranslation } from '@dxos/react-ui';
 import { type EditorInputMode, EditorInputModes } from '@dxos/react-ui-editor';
 import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 
-import { SCRIPT_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { type ScriptSettingsProps } from '../../types';
 
-export const ScriptSettings = ({ settings }: { settings: ScriptSettingsProps }) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
+export const ScriptPluginSettings = ({ settings }: { settings: ScriptSettingsProps }) => {
+  const { t } = useTranslation(meta.id);
   const client = useClient();
 
   // TODO(burdon): Check token.

package/src/components/Settings/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './ScriptObjectSettings';
+export * from './ScriptPluginSettings';

package/src/components/{DebugPanel/DebugPanel.tsx → TestPanel/TestPanel.tsx}

@@ -18,11 +18,12 @@ type State = 'pending' | 'responding';
  */
 type Message = { type: 'request' | 'response'; text?: string; data?: any; error?: Error };
 
-export type DebugPanelProps = ThemedClassName<{
+export type TestPanelProps = ThemedClassName<{
   functionUrl?: string;
 }>;
 
-export const DebugPanel = ({ classNames, functionUrl }: DebugPanelProps) => {
+// TODO(burdon): Need persistent history (currently lost when switching tabs)..
+export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
 
   const inputRef = useRef<HTMLInputElement>(null);
@@ -30,7 +31,7 @@ export const DebugPanel = ({ classNames, functionUrl }: DebugPanelProps) => {
   const [result, setResult] = useState('');
   const [state, setState] = useState<State | null>(null);
 
-  // TODO(burdon): Persistent history -- at least for session (non-space ECHO data?)
+  // TODO(burdon): Persistent history (thread).
   const [history, setHistory] = useState<Message[]>([]);
 
   const scrollerRef = useRef<HTMLDivElement>(null);
@@ -161,8 +162,8 @@ export const DebugPanel = ({ classNames, functionUrl }: DebugPanelProps) => {
     <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} />
-
-      <Toolbar.Root classNames='p-1'>
+      {/* TODO(burdon): Replace with Form based on the function's input schema. */}
+      <Toolbar.Root classNames='p-2'>
         <Input.Root>
           <Input.TextInput
             ref={inputRef}
@@ -185,7 +186,6 @@ export const DebugPanel = ({ classNames, functionUrl }: DebugPanelProps) => {
 };
 
 // TODO(burdon): Replace with thread?
-// TODO(burdon): Button to delete individual messages.
 // TODO(burdon): Button to edit/re-run question.
 type MessageThreadProps = {
   state: State | null;
@@ -195,10 +195,6 @@ type MessageThreadProps = {
 
 const MessageThread = forwardRef<HTMLDivElement, MessageThreadProps>(
   ({ state, history, result }: MessageThreadProps, forwardedRef) => {
-    if (!history.length && !result.length) {
-      return null;
-    }
-
     return (
       <div ref={forwardedRef} className='flex flex-col gap-6 h-full p-2 overflow-x-hidden overflow-y-auto'>
         {history.map((message, i) => (
@@ -250,9 +246,7 @@ const MessageItem = ({ classNames, message }: ThemedClassName<{ message: Message
 };
 
 const RobotAvatar = () => (
-  <Avatar.Root size={6} variant='circle'>
-    <Avatar.Frame>
-      <Avatar.Icon icon='ph--robot--regular' />
-    </Avatar.Frame>
+  <Avatar.Root>
+    <Avatar.Content size={6} variant='circle' icon='ph--robot--regular' />
   </Avatar.Root>
 );

package/src/components/{LogsPanel → TestPanel}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './LogsPanel';
+export * from './TestPanel';

package/src/components/index.ts

@@ -4,9 +4,9 @@
 
 import { lazy } from 'react';
 
-export * from './DebugPanel';
-export * from './LogsPanel';
-export * from './ScriptSettings';
-export * from './ScriptSettingsPanel';
+export * from './Settings';
+export * from './TestPanel';
+export { DEPLOYMENT_DIALOG } from './DeploymentDialog';
 
 export const ScriptContainer = lazy(() => import('./ScriptContainer'));
+export const DeploymentDialog = lazy(() => import('./DeploymentDialog'));

package/src/hooks/deploy.ts

@@ -4,28 +4,20 @@
 
 import { useCallback, useEffect, useMemo } from 'react';
 
-import {
-  FunctionType,
-  type ScriptType,
-  getInvocationUrl,
-  getUserFunctionUrlInMetadata,
-  incrementSemverPatch,
-  setUserFunctionUrlInMetadata,
-  uploadWorkerFunction,
-} from '@dxos/functions';
-import { Bundler } from '@dxos/functions/bundler';
+import { FunctionType, type ScriptType, getUserFunctionUrlInMetadata } from '@dxos/functions';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { Filter, create, getMeta, getSpace, makeRef, useQuery } from '@dxos/react-client/echo';
+import { Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { createMenuAction } from '@dxos/react-ui-menu';
+import { errorMessageColors } from '@dxos/react-ui-theme';
 
-import { type ViewState } from './view';
 import { SCRIPT_PLUGIN } from '../meta';
+import { deployScript, getFunctionUrl, isScriptDeployed } from '../util';
 
 export type DeployActionProperties = { type: 'deploy' } | { type: 'copy' };
 
-export type DeployState = ViewState & {
+export type DeployState = {
   deploying: boolean;
   deployed: boolean;
   functionUrl: string;
@@ -37,6 +29,7 @@ export const createDeploy = (state: Partial<DeployState>) => {
     label: state.error ?? ['no error label', { ns: SCRIPT_PLUGIN }],
     icon: 'ph--warning-circle--regular',
     hidden: !state.error,
+    classNames: state.error && errorMessageColors,
   });
 
   const deployAction = createMenuAction<DeployActionProperties>('deploy', {
@@ -64,31 +57,36 @@ export const createDeploy = (state: Partial<DeployState>) => {
   };
 };
 
-export const useDeployDeps = ({ script }: { script: ScriptType }) => {
-  const space = getSpace(script);
-  const [fn] = useQuery(space, Filter.schema(FunctionType, { source: script }));
-  const client = useClient();
-  const existingFunctionUrl = useMemo(() => fn && getUserFunctionUrlInMetadata(getMeta(fn)), [fn]);
-  return { space, fn, client, existingFunctionUrl };
-};
-
 export const useDeployState = ({ state, script }: { state: Partial<DeployState>; script: ScriptType }) => {
-  const { space, client, existingFunctionUrl } = useDeployDeps({ script });
+  const { space, client, fn, existingFunctionUrl } = useDeployDeps({ script });
   useEffect(() => {
     if (!existingFunctionUrl) {
       return;
     }
 
-    state.functionUrl = getInvocationUrl(existingFunctionUrl, client.config.values.runtime?.services?.edge?.url ?? '', {
-      spaceId: space?.id,
+    state.functionUrl = getFunctionUrl({
+      script,
+      fn,
+      edgeUrl: client.config.values.runtime?.services?.edge?.url ?? '',
     });
-  }, [existingFunctionUrl, space]);
+  }, [existingFunctionUrl, space, fn, script, client.config.values.runtime?.services?.edge?.url]);
 
   useEffect(() => {
-    state.deployed = Boolean(existingFunctionUrl) && !script.changed;
-  }, [script.changed, existingFunctionUrl]);
+    state.deployed = isScriptDeployed({ script, fn });
+  }, [script.changed, existingFunctionUrl, fn, script]);
+};
+
+export const useDeployDeps = ({ script }: { script: ScriptType }) => {
+  const space = getSpace(script);
+  const [fn] = useQuery(space, Filter.schema(FunctionType, { source: script }));
+  const client = useClient();
+  const existingFunctionUrl = useMemo(() => fn && getUserFunctionUrlInMetadata(getMeta(fn)), [fn]);
+  return { space, fn, client, existingFunctionUrl };
 };
 
+/**
+ * Manage EDGE function deployment.
+ */
 export const useDeployHandler = ({ state, script }: { state: Partial<DeployState>; script: ScriptType }) => {
   const { space, fn, client, existingFunctionUrl } = useDeployDeps({ script });
   const { t } = useTranslation(SCRIPT_PLUGIN);
@@ -101,62 +99,15 @@ export const useDeployHandler = ({ state, script }: { state: Partial<DeployState
     state.error = undefined;
     state.deploying = true;
 
-    try {
-      const existingFunctionId = existingFunctionUrl?.split('/').at(-1);
-
-      const bundler = new Bundler({ platform: 'browser', sandboxedModules: [], remoteModules: {} });
-      const buildResult = await bundler.bundle({ source: script.source.target!.content });
-      if (buildResult.error || !buildResult.bundle) {
-        throw buildResult.error;
-      }
-
-      const { functionId, version, meta } = await uploadWorkerFunction({
-        client,
-        spaceId: space.id,
-        version: fn ? incrementSemverPatch(fn.version) : '0.0.1',
-        functionId: existingFunctionId,
-        source: buildResult.bundle,
-      });
-      if (functionId === undefined || version === undefined) {
-        throw new Error(`Upload didn't return expected data: functionId=${functionId}, version=${version}`);
-      }
-
-      log.info('function uploaded', { functionId, version });
-      if (fn) {
-        fn.version = version;
-      }
-
-      const deployedFunction =
-        fn ?? space.db.add(create(FunctionType, { name: functionId, version, source: makeRef(script) }));
-
-      script.changed = false;
-      if (script.description !== undefined && script.description.trim() !== '') {
-        deployedFunction.description = script.description;
-      } else if (meta.description) {
-        deployedFunction.description = meta.description;
-      } else {
-        log.verbose('no description in function metadata', { functionId });
-      }
-
-      if (meta.inputSchema) {
-        deployedFunction.inputSchema = meta.inputSchema;
-      } else {
-        log.verbose('no input schema in function metadata', { functionId });
-      }
-
-      if (meta.outputSchema) {
-        deployedFunction.outputSchema = meta.outputSchema;
-      } else {
-        log.verbose('no output schema in function metadata', { functionId });
-      }
-
-      setUserFunctionUrlInMetadata(getMeta(deployedFunction), `/${space.id}/${functionId}`);
-    } catch (err: any) {
-      log.catch(err);
+    const result = await deployScript({ script, client, space, fn, existingFunctionUrl });
+
+    if (!result.success) {
+      log.catch(result.error);
       state.error = t('upload failed label');
     }
+
     state.deploying = false;
-  }, [fn, client, t, existingFunctionUrl, script, script.name, script.source, space?.id ?? null]);
+  }, [fn, client, t, existingFunctionUrl, script, space]);
 };
 
 export const useCopyHandler = ({ state }: { state: Partial<DeployState> }) =>

package/src/hooks/index.ts

@@ -5,7 +5,7 @@
 export * from './deploy';
 export * from './format';
 export * from './template';
-export * from './view';
 
+export * from './useCreateAndDeployScriptTemplates';
 export * from './useToolbarAction';
 export * from './useToolbarState';

package/src/hooks/useCreateAndDeployScriptTemplates.ts

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { pipe } from 'effect/Function';
+import { useCallback, useState } from 'react';
+
+import { chain, createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { isInstanceOf } from '@dxos/echo-schema';
+import { ScriptType } from '@dxos/functions';
+import { invariant } from '@dxos/invariant';
+import { SpaceAction } from '@dxos/plugin-space/types';
+import { useClient } from '@dxos/react-client';
+import { type Space } from '@dxos/react-client/echo';
+
+import { type Template } from '../templates';
+import { ScriptAction } from '../types';
+import { deployScript } from '../util';
+
+type DeploymentStatus = 'idle' | 'pending' | 'success' | 'error';
+
+/**
+ * Hook for creating and deploying multiple script templates concurrently.
+ *
+ * Takes a space and an array of script template IDs, then provides a callback
+ * function that creates each script from its template and deploys it to the space.
+ * All creation / deployment operations run concurrently for improved performance.
+ */
+export const useCreateAndDeployScriptTemplates = (space: Space | undefined, scriptTemplates: Template[]) => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const client = useClient();
+  const [status, setStatus] = useState<DeploymentStatus>('idle');
+  const [error, setError] = useState<Error | undefined>(undefined);
+
+  const handleCreateAndDeployScripts = useCallback(async () => {
+    invariant(space);
+    setStatus('pending');
+    setError(undefined);
+
+    const deploymentResults = await Promise.all(
+      scriptTemplates.map(async (template) => {
+        const result = await dispatch(
+          pipe(
+            createIntent(ScriptAction.Create, { space, initialTemplateId: template.id }),
+            chain(SpaceAction.AddObject, { target: space }),
+          ),
+        );
+        invariant(isInstanceOf(ScriptType, result.data?.object));
+
+        return deployScript({ space, client, script: result.data.object });
+      }),
+    );
+
+    const hasErrors = deploymentResults.some((result) => !result.success);
+    setStatus(hasErrors ? 'error' : 'success');
+  }, [space, dispatch, client, scriptTemplates]);
+
+  return { handleCreateAndDeployScripts, status, error };
+};

package/src/hooks/useToolbarAction.ts

@@ -12,30 +12,26 @@ import { type DeployActionProperties, useDeployHandler, useCopyHandler } from '.
 import { type FormatActionProperties, useFormatHandler } from './format';
 import { type TemplateActionProperties, useTemplateSelectHandler } from './template';
 import { type ScriptToolbarState } from './useToolbarState';
-import { type ViewActionProperties } from './view';
 
-export type ScriptToolbarActionProperties =
-  | TemplateActionProperties
-  | ViewActionProperties
-  | FormatActionProperties
-  | DeployActionProperties;
+export type ScriptToolbarActionProperties = TemplateActionProperties | FormatActionProperties | DeployActionProperties;
 
 export type ScriptToolbarAction = MenuAction<ScriptToolbarActionProperties>;
 
-export const useToolbarAction = (props: { state: ScriptToolbarState; script: ScriptType }) => {
+export const useToolbarAction = (props: {
+  state: ScriptToolbarState;
+  script: ScriptType;
+}): MenuActionHandler<ScriptToolbarAction> => {
   const handleTemplateSelect = useTemplateSelectHandler(props);
   const handleFormat = useFormatHandler(props);
   const handleDeploy = useDeployHandler(props);
   const handleCopy = useCopyHandler(props);
-  return useCallback(
-    ((action: ScriptToolbarAction) => {
+
+  return useCallback<MenuActionHandler<ScriptToolbarAction>>(
+    (action: ScriptToolbarAction) => {
       switch (action.properties.type) {
         case 'template':
           handleTemplateSelect(action.properties.value);
           break;
-        case 'view':
-          props.state.view = action.properties.value;
-          break;
         case 'format':
           void handleFormat();
           break;
@@ -48,7 +44,7 @@ export const useToolbarAction = (props: { state: ScriptToolbarState; script: Scr
         default:
           log.error('Unknown action type', action);
       }
-    }) as MenuActionHandler,
+    },
     [handleTemplateSelect, handleFormat, handleDeploy, handleCopy],
   );
 };

package/src/hooks/useToolbarState.ts

@@ -7,9 +7,8 @@ import { useMemo } from 'react';
 import { create } from '@dxos/live-object';
 
 import { type DeployState } from './deploy';
-import { type ViewState } from './view';
 
-export type ScriptToolbarState = Partial<DeployState & ViewState>;
+export type ScriptToolbarState = Partial<DeployState>;
 
 // TODO(burdon): Replace with context provider?
 export const useToolbarState = (initialState: ScriptToolbarState = {}) => {