@dxos/plugin-script 0.6.12-main.ed7cda7 → 0.6.12-staging.0b4bb48

package/src/ScriptPlugin.tsx

@@ -17,9 +17,8 @@ import { loadObjectReferences } from '@dxos/react-client/echo';
 
 import { initializeBundler } from './bundler';
 import { Compiler } from './compiler';
-import { ScriptContainer, ScriptSettings } from './components';
+import { ScriptEditor } from './components';
 import meta, { SCRIPT_PLUGIN } from './meta';
-import { templates } from './templates';
 import translations from './translations';
 import { FunctionType, ScriptType } from './types';
 import { ScriptAction, type ScriptPluginProvides } from './types';
@@ -46,12 +45,12 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
       await initializeBundler({ wasmUrl });
     },
     provides: {
-      settings: {},
       metadata: {
         records: {
           [ScriptType.typename]: {
             placeholder: ['object title placeholder', { ns: SCRIPT_PLUGIN }],
             icon: (props: IconProps) => <Code {...props} />,
+            iconSymbol: 'ph--code--regular',
             // TODO(wittjosiah): Move out of metadata.
             loadReferences: (script: ScriptType) => loadObjectReferences(script, (script) => [script.source]),
           },
@@ -61,12 +60,6 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
       echo: {
         schema: [ScriptType, FunctionType],
       },
-      space: {
-        onSpaceCreate: {
-          label: ['create object label', { ns: SCRIPT_PLUGIN }],
-          action: ScriptAction.CREATE,
-        },
-      },
       graph: {
         builder: (plugins) => {
           const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
@@ -100,7 +93,8 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
                   },
                   properties: {
                     label: ['create object label', { ns: SCRIPT_PLUGIN }],
-                    icon: 'ph--code--regular',
+                    icon: (props: IconProps) => <Code {...props} />,
+                    iconSymbol: 'ph--code--regular',
                     testId: 'scriptPlugin.createObject',
                   },
                 },
@@ -109,19 +103,29 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
           });
         },
       },
+      stack: {
+        creators: [
+          {
+            id: 'create-stack-section-script',
+            testId: 'scriptPlugin.createSection',
+            type: ['plugin name', { ns: SCRIPT_PLUGIN }],
+            label: ['create stack section label', { ns: SCRIPT_PLUGIN }],
+            icon: (props: any) => <Code {...props} />,
+            intent: {
+              plugin: SCRIPT_PLUGIN,
+              action: ScriptAction.CREATE,
+            },
+          },
+        ],
+      },
       surface: {
         component: ({ data, role }) => {
-          switch (role) {
-            case 'settings': {
-              return data.plugin === meta.id ? <ScriptSettings settings={{}} /> : null;
-            }
+          if (role && !['article', 'section'].includes(role)) {
+            return null;
+          }
 
-            case 'article': {
-              if (data.object instanceof ScriptType) {
-                return <ScriptContainer script={data.object} env={compiler.environment} />;
-              }
-              break;
-            }
+          if (data.object instanceof ScriptType) {
+            return <ScriptEditor env={compiler.environment} script={data.object} role={role} />;
           }
 
           return null;
@@ -131,7 +135,7 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
         resolver: (intent) => {
           switch (intent.action) {
             case ScriptAction.CREATE: {
-              return { data: create(ScriptType, { source: create(TextType, { content: templates[0].source }) }) };
+              return { data: create(ScriptType, { source: create(TextType, { content: example }) }) };
             }
           }
         },
@@ -139,3 +143,14 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
     },
   };
 };
+
+// TODO(burdon): Import.
+const example = [
+  'export default async ({ ',
+  '  event: { data: { request } },',
+  '  context: { space, ai } ',
+  '}: any) => {',
+  "  return new Response('Hello DXOS!');",
+  '};',
+  '',
+].join('\n');

package/src/bundler/bundler.test.ts

@@ -2,21 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
-// @ts-ignore
-import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
-import { beforeAll, describe, expect, test } from 'vitest';
+import { describe, expect, test } from 'vitest';
 
-import { isNode } from '@dxos/util';
-
-import { Bundler, initializeBundler } from './bundler';
+import { Bundler } from './bundler';
 
 describe('Bundler', () => {
-  beforeAll(async () => {
-    if (!isNode()) {
-      await initializeBundler({ wasmUrl });
-    }
-  });
-
   test('Basic', async () => {
     const bundler = new Bundler({ platform: 'node', sandboxedModules: [], remoteModules: {} });
     const result = await bundler.bundle('const x = 100'); // TODO(burdon): Test import.

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

@@ -18,7 +18,7 @@ import {
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/react-ui-theme';
 
-import { SCRIPT_PLUGIN } from '../../meta';
+import { SCRIPT_PLUGIN } from '../meta';
 
 type State = 'pending' | 'responding';
 
@@ -47,7 +47,7 @@ export const DebugPanel = ({ classNames, functionUrl, binding: _binding, onBindi
   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 (non-space ECHO data?)
   const [history, setHistory] = useState<Message[]>([]);
 
   const scrollerRef = useRef<HTMLDivElement>(null);
@@ -215,62 +215,55 @@ export const DebugPanel = ({ classNames, functionUrl, binding: _binding, onBindi
   );
 };
 
+const RobotAvatar = () => (
+  <Avatar.Root size={6} variant='circle'>
+    <Avatar.Frame>
+      <Avatar.Icon icon='ph--robot--regular' />
+    </Avatar.Frame>
+  </Avatar.Root>
+);
+
+const MessageItem = ({ classNames, message }: ThemedClassName<{ message: Message }>) => {
+  const { text, data, error } = message;
+  if (error) {
+    return <span className={mx(classNames, 'whitespace-pre text-error')}>{String(error)}</span>;
+  } else if (data) {
+    return (
+      <SyntaxHighlighter language='json' className={mx('text-xs', classNames)}>
+        {JSON.stringify(data, null, 2)}
+      </SyntaxHighlighter>
+    );
+  }
+
+  return <span className={mx(classNames)}>{text || '\u00D8'}</span>;
+};
+
 // TODO(burdon): Replace with thread?
 // TODO(burdon): Button to delete individual messages.
-// TODO(burdon): Button to edit/re-run question.
+// TODO(burdon): Button to re-run question.
 const MessageThread = ({ state, result, history }: { state: State | null; result: string; history: Message[] }) => {
   return (
     <>
       {history.map((message, i) => (
-        <div key={i} className='grid grid-cols-[3rem_1fr_3rem]'>
-          <div className='p-1'>{message.type === 'response' && <RobotAvatar />}</div>
-          <div className='overflow-auto'>
-            <MessageItem message={message} />
+        <div key={i} className='grid grid-cols-[3rem_1fr]'>
+          <div>{message.type === 'response' && <RobotAvatar />}</div>
+          <div className={mx('flex', message.type === 'request' && 'justify-end')}>
+            <MessageItem
+              classNames={[message.type === 'request' && 'p-1 px-2 rounded-lg bg-hoverSurface']}
+              message={message}
+            />
           </div>
         </div>
       ))}
-      {result?.length > 0 && (
-        <div className='grid grid-cols-[3rem_1fr_3rem]'>
-          <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 }} />
-          </div>
+      <div className='grid grid-cols-[3rem_1fr]'>
+        <div>
+          {(state === 'pending' && <Icon icon='ph--spinner--regular' size={6} classNames='animate-spin-slow' />) ||
+            (result.length > 0 && <RobotAvatar />)}
         </div>
-      )}
-    </>
-  );
-};
-
-const MessageItem = ({ classNames, message }: ThemedClassName<{ message: Message }>) => {
-  const { type, text, data, error } = message;
-  const wrapper = 'p-1 px-2 rounded-lg bg-hoverSurface overflow-auto';
-  return (
-    <div className={mx('flex', type === 'request' ? 'ml-[8rem] justify-end' : 'mr-[8rem]', classNames)}>
-      {error && <div className={mx(wrapper, 'whitespace-pre text-error')}>{String(error)}</div>}
-
-      {text !== undefined && (
-        <div className={mx(wrapper, type === 'request' && 'bg-primary-400 dark:bg-primary-600')}>
-          {text || '\u00D8'}
+        <div>
+          <span>{result}</span>
         </div>
-      )}
-
-      {data && (
-        <SyntaxHighlighter language='json' className={mx(wrapper, 'px-8 py-2 text-xs')}>
-          {JSON.stringify(data, null, 2)}
-        </SyntaxHighlighter>
-      )}
-    </div>
+      </div>
+    </>
   );
 };
-
-const RobotAvatar = () => (
-  <Avatar.Root size={6} variant='circle'>
-    <Avatar.Frame>
-      <Avatar.Icon icon='ph--robot--regular' />
-    </Avatar.Frame>
-  </Avatar.Root>
-);

package/src/components/{FrameContainer → ScriptBlock/FrameContainer}/FrameContainer.tsx

@@ -11,7 +11,7 @@ import { baseSurface, mx } from '@dxos/react-ui-theme';
 import { createProtoRpcPeer } from '@dxos/rpc';
 import { createIFramePort } from '@dxos/rpc-tunnel';
 
-import { type BundlerResult } from '../../bundler';
+import { type BundlerResult } from '../../../bundler';
 
 export type FrameContainerProps = {
   containerUrl: string;

package/src/components/ScriptBlock/ScriptBlock.stories.tsx

@@ -3,7 +3,6 @@
 //
 
 import '@dxos-theme';
-
 import React, { useEffect, useMemo } from 'react';
 
 import { createSpaceObjectGenerator, TestSchemaType } from '@dxos/echo-generator';
@@ -13,10 +12,10 @@ import { create, createEchoObject, useSpaces } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
+// @ts-ignore
+import mainUrl from './FrameContainer/frame?url';
 import { ScriptBlock } from './ScriptBlock';
 import { ScriptType } from '../../types';
-// @ts-ignore
-import mainUrl from '../FrameContainer/frame?url';
 
 const code = [
   "import { Filter, useQuery, useSpaces} from '@dxos/react-client/echo';",
@@ -65,7 +64,7 @@ const Story = () => {
 export default {
   title: 'plugin-script/ScriptBlock',
   component: ScriptBlock,
-  decorators: [withClientProvider({ createSpace: true }), withTheme, withLayout({ fullscreen: true, tooltips: true })],
+  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true }), withClientProvider({ createSpace: true })],
   render: Story,
 };
 

package/src/components/ScriptBlock/ScriptBlock.tsx

@@ -2,17 +2,19 @@
 // Copyright 2023 DXOS.org
 //
 
+import { Check, Play, Warning } from '@phosphor-icons/react';
 // @ts-ignore
 import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { createDocAccessor, DocAccessor } from '@dxos/react-client/echo';
-import { DensityProvider, Toolbar, Button, Icon } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { DensityProvider, Toolbar, Button } from '@dxos/react-ui';
+import { mx, getSize } from '@dxos/react-ui-theme';
 
+import { FrameContainer } from './FrameContainer';
+import { Splitter, SplitterSelector, type View } from './Splitter';
 import { Bundler, type BundlerResult, initializeBundler } from '../../bundler';
 import { type ScriptType } from '../../types';
-import { FrameContainer } from '../FrameContainer';
 import { ScriptEditor } from '../ScriptEditor';
 
 // Keep in sync with packages/apps/composer-app/script-frame/main.tsx .
@@ -27,6 +29,7 @@ const PROVIDED_MODULES = [
 
 export type ScriptBlockProps = {
   script: ScriptType;
+  view?: View;
   hideSelector?: boolean;
   classes?: {
     root?: string;
@@ -41,8 +44,17 @@ export type ScriptBlockProps = {
  * @deprecated
  */
 // TODO(burdon): Cache compiled results in context.
-export const ScriptBlock = ({ script, hideSelector, classes, containerUrl }: ScriptBlockProps) => {
+export const ScriptBlock = ({
+  script,
+  view: controlledView,
+  hideSelector,
+  classes,
+  containerUrl,
+}: ScriptBlockProps) => {
   const source = useMemo(() => script.source && createDocAccessor(script.source, ['content']), [script.source]);
+  const [view, setView] = useState<View>(controlledView ?? 'editor');
+  useEffect(() => handleSetView(controlledView ?? 'editor'), [controlledView]);
+
   const [result, setResult] = useState<BundlerResult>();
   const bundler = useMemo(
     () => new Bundler({ platform: 'browser', sandboxedModules: PROVIDED_MODULES, remoteModules: {} }),
@@ -66,6 +78,16 @@ export const ScriptBlock = ({ script, hideSelector, classes, containerUrl }: Scr
     return () => clearTimeout(t);
   }, [source]);
 
+  const handleSetView = useCallback(
+    (view: View) => {
+      setView(view);
+      if (!result && view !== 'editor') {
+        void handleExec(false);
+      }
+    },
+    [result],
+  );
+
   const handleExec = useCallback(
     async (auto = true) => {
       if (!source) {
@@ -73,8 +95,11 @@ export const ScriptBlock = ({ script, hideSelector, classes, containerUrl }: Scr
       }
       const result = await bundler.bundle(DocAccessor.getValue(source));
       setResult(result);
+      if (auto && view === 'editor') {
+        setView('preview');
+      }
     },
-    [source],
+    [source, view],
   );
 
   return (
@@ -82,28 +107,29 @@ export const ScriptBlock = ({ script, hideSelector, classes, containerUrl }: Scr
       {!hideSelector && (
         <DensityProvider density='fine'>
           <Toolbar.Root classNames={mx('mb-2', classes?.toolbar)}>
+            <SplitterSelector view={view} onChange={handleSetView} />
             <div className='grow' />
             {result?.bundle && !result?.error && (
               <div title={String(result.error)}>
-                <Icon icon='ph--check--regular' size={5} classNames='text-green-500' />
+                <Check className={mx(getSize(5), 'text-green-500')} />
               </div>
             )}
             {result?.error && (
               <div title={String(result.error)}>
-                <Icon icon='ph--warning--regular' size={5} classNames='text-orange-500' />
+                <Warning className={mx(getSize(5), 'text-orange-500')} />
               </div>
             )}
             <Button variant='ghost' onClick={() => handleExec()}>
-              <Icon icon='ph--play--regular' size={5} />
+              <Play className={getSize(5)} />
             </Button>
           </Toolbar.Root>
         </DensityProvider>
       )}
 
-      <div className='flex'>
+      <Splitter view={view}>
         <ScriptEditor script={script} />
         {result && <FrameContainer key={script.id} result={result} containerUrl={containerUrl} />}
-      </div>
+      </Splitter>
     </div>
   );
 };

package/src/components/ScriptBlock/Splitter/Splitter.stories.tsx

@@ -0,0 +1,37 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React, { useState } from 'react';
+
+import { DensityProvider } from '@dxos/react-ui';
+
+import { Splitter, SplitterSelector, type View } from './Splitter';
+
+const Story = () => {
+  const [view, setView] = useState<View>();
+  return (
+    <div>
+      <DensityProvider density='fine'>
+        <SplitterSelector view={view} onChange={setView} />
+      </DensityProvider>
+      <Splitter view={view}>
+        <div>1</div>
+        <div>2</div>
+      </Splitter>
+    </div>
+  );
+};
+
+export default {
+  title: 'plugin-script/Splitter',
+  component: Splitter,
+  render: Story,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {};

package/src/components/ScriptBlock/Splitter/Splitter.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Code, SquareSplitHorizontal, Eye } from '@phosphor-icons/react';
+import React, { type ReactNode } from 'react';
+
+import { ToggleGroup, ToggleGroupItem, Toolbar } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+export type View = 'editor' | 'preview' | 'split';
+
+export type SplitterProps = {
+  view?: View;
+  className?: string;
+  children?: ReactNode[];
+};
+
+// TODO(burdon): Surfaces?
+export const Splitter = ({ view = 'split', className, children = [] }: SplitterProps) => {
+  const [left, right] = children;
+  return (
+    <div className={mx('flex overflow-hidden grow', className)}>
+      {left && view !== 'preview' && <div className='flex flex-1 shrink-0 overflow-hidden'>{left}</div>}
+      {right && view !== 'editor' && <div className='flex flex-1 shrink-0 overflow-hidden'>{right}</div>}
+    </div>
+  );
+};
+
+export type SplitterSelectorProps = {
+  view?: View;
+  onChange?: (view: View) => void;
+  className?: string;
+};
+
+export const SplitterSelector = ({ view, onChange, className }: SplitterSelectorProps) => {
+  return (
+    <Toolbar.Root classNames={className}>
+      <ToggleGroup type='single' value={view} onValueChange={(value) => onChange?.(value as View)}>
+        <ToggleGroupItem value='editor'>
+          <Code className={getSize(5)} />
+        </ToggleGroupItem>
+        <ToggleGroupItem value='split'>
+          <SquareSplitHorizontal className={getSize(5)} />
+        </ToggleGroupItem>
+        <ToggleGroupItem value='preview'>
+          <Eye className={getSize(5)} />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </Toolbar.Root>
+  );
+};

package/src/components/{Toolbar → ScriptBlock/Splitter}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './Toolbar';
+export * from './Splitter';

package/src/components/ScriptEditor.tsx

@@ -10,14 +10,23 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { create, createDocAccessor, Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
+import {
+  create,
+  createDocAccessor,
+  Filter,
+  fullyQualifiedId,
+  getMeta,
+  getSpace,
+  useQuery,
+} from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { useTranslation, type ThemedClassName } from '@dxos/react-ui';
+import { useTranslation } from '@dxos/react-ui';
+import { useHasAttention } from '@dxos/react-ui-attention';
 import { createDataExtensions, listener } from '@dxos/react-ui-editor';
 import { mx } from '@dxos/react-ui-theme';
 
 import { DebugPanel } from './DebugPanel';
-import { type TemplateSelectProps, Toolbar, type ViewType } from './Toolbar';
+import { Toolbar } from './Toolbar';
 import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
 import { Bundler } from '../bundler';
 import {
@@ -25,19 +34,18 @@ import {
   publicKeyToDid,
   setUserFunctionUrlInMetadata,
   uploadWorkerFunction,
-  USERFUNCTIONS_PRESET_META_KEY,
 } from '../edge';
 import { SCRIPT_PLUGIN } from '../meta';
-import { templates } from '../templates';
 import { FunctionType, type ScriptType } from '../types';
 
-export type ScriptEditorProps = ThemedClassName<{
+export type ScriptEditorProps = {
   script: ScriptType;
-}> &
-  Pick<TypescriptEditorProps, 'env'>;
+  role?: string;
+} & Pick<TypescriptEditorProps, 'env'>;
 
-export const ScriptEditor = ({ classNames, script, env }: ScriptEditorProps) => {
+export const ScriptEditor = ({ env, script, role }: ScriptEditorProps) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
+  const hasAttention = useHasAttention(fullyQualifiedId(script));
   const client = useClient();
   const identity = useIdentity();
   const space = getSpace(script);
@@ -65,7 +73,7 @@ export const ScriptEditor = ({ classNames, script, env }: ScriptEditorProps) =>
     [script, script.source, space, identity],
   );
 
-  const [view, setView] = useState<ViewType>('editor');
+  const [showPanel, setShowPanel] = useState(false);
   const initialValue = useMemo(() => script.source?.content, [script.source]);
   const existingFunctionUrl = fn && getUserFunctionUrlInMetadata(getMeta(fn));
   const [error, setError] = useState<string>();
@@ -95,22 +103,6 @@ export const ScriptEditor = ({ classNames, script, env }: ScriptEditorProps) =>
     }
   }, [script.source]);
 
-  const handleTemplateChange: TemplateSelectProps['onTemplateSelect'] = (id) => {
-    const template = templates.find((template) => template.id === id);
-    if (template) {
-      script.name = template.name;
-      script.source!.content = template.source;
-      const metaKeys = getMeta(script).keys;
-      const oldPresetIndex = metaKeys.findIndex((key) => key.source === USERFUNCTIONS_PRESET_META_KEY);
-      if (oldPresetIndex >= 0) {
-        metaKeys.splice(oldPresetIndex, 1);
-      }
-      if (template.presetId) {
-        metaKeys.push({ source: USERFUNCTIONS_PRESET_META_KEY, id: template.presetId });
-      }
-    }
-  };
-
   const handleDeploy = useCallback(async () => {
     if (!script.source || !identity || !space) {
       return;
@@ -122,7 +114,11 @@ export const ScriptEditor = ({ classNames, script, env }: ScriptEditorProps) =>
       const existingFunctionId = existingFunctionUrl?.split('/').at(-1);
       const ownerDid = (existingFunctionUrl?.split('/').at(-2) as DID) ?? publicKeyToDid(identity.identityKey);
 
-      const bundler = new Bundler({ platform: 'browser', sandboxedModules: [], remoteModules: {} });
+      const bundler = new Bundler({
+        platform: 'browser',
+        sandboxedModules: [],
+        remoteModules: {},
+      });
       const buildResult = await bundler.bundle(script.source.content);
       if (buildResult.error || !buildResult.bundle) {
         throw buildResult.error;
@@ -138,18 +134,15 @@ export const ScriptEditor = ({ classNames, script, env }: ScriptEditorProps) =>
       if (result !== 'success' || functionId === undefined || functionVersionNumber === undefined) {
         throw new Error(errorMessage);
       }
-
       log.info('function uploaded', { functionId, functionVersionNumber });
       if (fn) {
         fn.version = functionVersionNumber;
       }
-
       const deployedFunction =
         fn ?? space.db.add(create(FunctionType, { version: functionVersionNumber, source: script }));
       const meta = getMeta(deployedFunction);
-      script.changed = false;
       setUserFunctionUrlInMetadata(meta, `/${ownerDid}/${functionId}`);
-      setView('split');
+      script.changed = false;
     } catch (err: any) {
       log.catch(err);
       setError(t('upload failed label'));
@@ -172,32 +165,38 @@ export const ScriptEditor = ({ classNames, script, env }: ScriptEditorProps) =>
   }, [existingFunctionUrl, space]);
 
   return (
-    <div role='none' className={mx('flex flex-col w-full overflow-hidden divide-y divide-separator', classNames)}>
+    <div
+      role='none'
+      className={mx(
+        'flex flex-col is-full bs-full overflow-hidden',
+        role === 'article' && 'row-span-2',
+        hasAttention && 'attention-surface',
+      )}
+    >
+      <TypescriptEditor
+        id={script.id}
+        env={env}
+        initialValue={initialValue}
+        extensions={extensions}
+        className='flex is-full bs-full overflow-hidden ch-focus-ring-inset-over-all'
+      />
+
       <Toolbar
+        classNames='border-t border-separator'
         deployed={Boolean(existingFunctionUrl) && !script.changed}
         functionUrl={functionUrl}
         error={error}
-        view={view}
-        templates={templates}
+        showPanel={showPanel}
         onDeploy={handleDeploy}
         onFormat={handleFormat}
-        onViewChange={setView}
-        onTemplateSelect={handleTemplateChange}
+        onTogglePanel={async () => setShowPanel((showDetails) => !showDetails)}
       />
 
-      {view !== 'preview' && (
-        <TypescriptEditor
-          id={script.id}
-          env={env}
-          initialValue={initialValue}
-          extensions={extensions}
-          className='flex is-full bs-full overflow-hidden ch-focus-ring-inset-over-all'
-        />
-      )}
-
-      {view !== 'editor' && (
+      {showPanel && (
         <DebugPanel functionUrl={functionUrl} binding={fn?.binding} onBindingChange={handleBindingChange} />
       )}
     </div>
   );
 };
+
+export default ScriptEditor;