@dxos/plugin-script 0.6.13 → 0.6.14-main.2b6a0f3

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

@@ -5,20 +5,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import { log } from '@dxos/log';
-import {
-  Avatar,
-  DensityProvider,
-  Icon,
-  Input,
-  type ThemedClassName,
-  Toolbar,
-  useControlledValue,
-  useTranslation,
-} from '@dxos/react-ui';
+import { Avatar, Icon, Input, type ThemedClassName, Toolbar, useControlledValue, useTranslation } from '@dxos/react-ui';
 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';
 
@@ -31,9 +22,16 @@ export type DebugPanelProps = ThemedClassName<{
   functionUrl?: string;
   binding?: string;
   onBindingChange?: (binding: string) => void;
+  showBindingConfig?: boolean;
 }>;
 
-export const DebugPanel = ({ classNames, functionUrl, binding: _binding, onBindingChange }: DebugPanelProps) => {
+export const DebugPanel = ({
+  classNames,
+  functionUrl,
+  binding: _binding,
+  onBindingChange,
+  showBindingConfig = false,
+}: DebugPanelProps) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
 
   const bindingInputRef = useRef<HTMLInputElement>(null);
@@ -47,7 +45,7 @@ export const DebugPanel = ({ classNames, functionUrl, binding: _binding, onBindi
   const [result, setResult] = useState('');
   const [state, setState] = useState<State | null>(null);
 
-  // TODO(burdon): Persistent history (non-space ECHO data?)
+  // TODO(burdon): Persistent history -- at least for session (non-space ECHO data?)
   const [history, setHistory] = useState<Message[]>([]);
 
   const scrollerRef = useRef<HTMLDivElement>(null);
@@ -175,24 +173,24 @@ export const DebugPanel = ({ classNames, functionUrl, binding: _binding, onBindi
   };
 
   return (
-    <DensityProvider density='fine'>
-      <div className={mx('flex flex-col h-full overflow-hidden', classNames)}>
-        {/* TODO(burdon): Replace with Thread? */}
-        <div ref={scrollerRef} className='flex flex-col gap-6 h-full p-4 overflow-x-hidden overflow-y-auto'>
-          <MessageThread state={state} result={result} history={history} />
-        </div>
+    <div className={mx('flex flex-col h-full overflow-hidden', classNames)}>
+      {/* TODO(burdon): Replace with Thread? */}
+      <div ref={scrollerRef} className='flex flex-col gap-6 h-full p-2 overflow-x-hidden overflow-y-auto'>
+        <MessageThread state={state} result={result} history={history} />
+      </div>
 
-        <Toolbar.Root classNames='p-2'>
-          <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.Root classNames='p-2'>
+        <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>
+        {showBindingConfig && (
           <Input.Root>
             <Input.TextInput
               ref={bindingInputRef}
@@ -203,67 +201,74 @@ export const DebugPanel = ({ classNames, functionUrl, binding: _binding, onBindi
               onBlur={handleBlur}
             />
           </Input.Root>
-          <Toolbar.Button onClick={() => handleRequest(input)}>
-            <Icon icon='ph--play--regular' size={4} />
-          </Toolbar.Button>
-          <Toolbar.Button onClick={() => (state ? handleStop() : handleClear())}>
-            <Icon icon={state ? 'ph--stop--regular' : 'ph--trash--regular'} size={4} />
-          </Toolbar.Button>
-        </Toolbar.Root>
-      </div>
-    </DensityProvider>
+        )}
+        <Toolbar.Button onClick={() => handleRequest(input)}>
+          <Icon icon='ph--play--regular' size={4} />
+        </Toolbar.Button>
+        <Toolbar.Button onClick={() => (state ? handleStop() : handleClear())}>
+          <Icon icon={state ? 'ph--stop--regular' : 'ph--trash--regular'} size={4} />
+        </Toolbar.Button>
+      </Toolbar.Root>
+    </div>
   );
 };
 
-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 re-run question.
+// TODO(burdon): Button to edit/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]'>
-          <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 key={i} className='grid grid-cols-[2rem_1fr_2rem]'>
+          <div className='p-1'>{message.type === 'response' && <RobotAvatar />}</div>
+          <div className='overflow-auto'>
+            <MessageItem message={message} />
           </div>
         </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>
-        <div>
-          <span>{result}</span>
+      {result?.length > 0 && (
+        <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 }} />
+          </div>
         </div>
-      </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-[1rem] justify-end' : 'mr-[1rem]', 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>
+      )}
+
+      {data && (
+        <SyntaxHighlighter language='json' className={mx(wrapper, 'px-8 py-2 text-xs')}>
+          {JSON.stringify(data, null, 2)}
+        </SyntaxHighlighter>
+      )}
+    </div>
+  );
+};
+
+const RobotAvatar = () => (
+  <Avatar.Root size={6} variant='circle'>
+    <Avatar.Frame>
+      <Avatar.Icon icon='ph--robot--regular' />
+    </Avatar.Frame>
+  </Avatar.Root>
+);

package/src/components/DebugPanel/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './DebugPanel';

package/src/components/{ScriptBlock/FrameContainer → 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,19 +3,21 @@
 //
 
 import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
 import React, { useEffect, useMemo } from 'react';
 
 import { createSpaceObjectGenerator, TestSchemaType } from '@dxos/echo-generator';
 import { TextType } from '@dxos/plugin-markdown/types';
 import { useClient } from '@dxos/react-client';
-import { create, createEchoObject, useSpaces } from '@dxos/react-client/echo';
+import { create, createObject, 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';",
@@ -29,7 +31,7 @@ const code = [
   '}',
 ].join('\n');
 
-const Story = () => {
+const DefaultStory = () => {
   const client = useClient();
   const spaces = useSpaces();
   console.log(spaces.length);
@@ -44,28 +46,27 @@ const Story = () => {
           [TestSchemaType.organization]: 20,
           [TestSchemaType.contact]: 50,
         })
-        .catch();
+        .catch(() => {});
     } catch (err) {
       console.log(err);
     }
   }, [client]);
 
   // TODO(burdon): Review what's the right way to create automerge-backed objects.
-  const object = useMemo(
-    () => createEchoObject(create(ScriptType, { source: create(TextType, { content: code }) })),
-    [],
-  );
+  const object = useMemo(() => createObject(create(ScriptType, { source: create(TextType, { content: code }) })), []);
 
   // TODO(dmaretskyi): Not sure how to provide `containerUrl` here since the html now lives in composer-app.
   // TODO(burdon): Normalize html/frame.tsx with composer-app to test locally.
   return <ScriptBlock script={object} containerUrl={mainUrl} />;
 };
 
-export default {
-  title: 'plugin-script/ScriptBlock',
+export const Default = {};
+
+const meta: Meta = {
+  title: 'plugins/plugin-script/ScriptBlock',
   component: ScriptBlock,
-  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true }), withClientProvider({ createSpace: true })],
-  render: Story,
+  render: DefaultStory,
+  decorators: [withClientProvider({ createSpace: true }), withTheme, withLayout({ fullscreen: true, tooltips: true })],
 };
 
-export const Default = {};
+export default meta;

package/src/components/ScriptBlock/ScriptBlock.tsx

@@ -2,19 +2,17 @@
 // 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 } from '@dxos/react-ui';
-import { mx, getSize } from '@dxos/react-ui-theme';
+import { Toolbar, Button, Icon } from '@dxos/react-ui';
+import { mx } 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 .
@@ -29,7 +27,6 @@ const PROVIDED_MODULES = [
 
 export type ScriptBlockProps = {
   script: ScriptType;
-  view?: View;
   hideSelector?: boolean;
   classes?: {
     root?: string;
@@ -44,17 +41,8 @@ export type ScriptBlockProps = {
  * @deprecated
  */
 // TODO(burdon): Cache compiled results in context.
-export const ScriptBlock = ({
-  script,
-  view: controlledView,
-  hideSelector,
-  classes,
-  containerUrl,
-}: ScriptBlockProps) => {
+export const ScriptBlock = ({ script, 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: {} }),
@@ -78,16 +66,6 @@ export const ScriptBlock = ({
     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) {
@@ -95,41 +73,35 @@ export const ScriptBlock = ({
       }
       const result = await bundler.bundle(DocAccessor.getValue(source));
       setResult(result);
-      if (auto && view === 'editor') {
-        setView('preview');
-      }
     },
-    [source, view],
+    [source],
   );
 
   return (
     <div className={mx('flex flex-col grow overflow-hidden', classes?.root)}>
       {!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)}>
-                <Check className={mx(getSize(5), 'text-green-500')} />
-              </div>
-            )}
-            {result?.error && (
-              <div title={String(result.error)}>
-                <Warning className={mx(getSize(5), 'text-orange-500')} />
-              </div>
-            )}
-            <Button variant='ghost' onClick={() => handleExec()}>
-              <Play className={getSize(5)} />
-            </Button>
-          </Toolbar.Root>
-        </DensityProvider>
+        <Toolbar.Root classNames={mx('mb-2', classes?.toolbar)}>
+          <div className='grow' />
+          {result?.bundle && !result?.error && (
+            <div title={String(result.error)}>
+              <Icon icon='ph--check--regular' size={5} classNames='text-green-500' />
+            </div>
+          )}
+          {result?.error && (
+            <div title={String(result.error)}>
+              <Icon icon='ph--warning--regular' size={5} classNames='text-orange-500' />
+            </div>
+          )}
+          <Button variant='ghost' onClick={() => handleExec()}>
+            <Icon icon='ph--play--regular' size={5} />
+          </Button>
+        </Toolbar.Root>
       )}
 
-      <Splitter view={view}>
+      <div className='flex'>
         <ScriptEditor script={script} />
         {result && <FrameContainer key={script.id} result={result} containerUrl={containerUrl} />}
-      </Splitter>
+      </div>
     </div>
   );
 };

package/src/components/ScriptContainer.tsx

@@ -0,0 +1,22 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { useAttendableAttributes } from '@dxos/react-ui-attention';
+import { mx } from '@dxos/react-ui-theme';
+
+import { ScriptEditor, type ScriptEditorProps } from './ScriptEditor';
+
+const ScriptContainer = ({ script, ...props }: ScriptEditorProps) => {
+  const attendableAttrs = useAttendableAttributes(fullyQualifiedId(script));
+  return (
+    <div role='none' className={mx('flex row-span-2 w-full overflow-hidden attention-surface')} {...attendableAttrs}>
+      <ScriptEditor {...props} script={script} />
+    </div>
+  );
+};
+
+export default ScriptContainer;

package/src/components/ScriptEditor.tsx

@@ -10,45 +10,39 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import {
-  create,
-  createDocAccessor,
-  Filter,
-  fullyQualifiedId,
-  getMeta,
-  getSpace,
-  useQuery,
-} from '@dxos/react-client/echo';
+import { create, createDocAccessor, Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { useTranslation } from '@dxos/react-ui';
-import { useHasAttention } from '@dxos/react-ui-attention';
+import { useTranslation, type ThemedClassName } from '@dxos/react-ui';
 import { createDataExtensions, listener } from '@dxos/react-ui-editor';
 import { mx } from '@dxos/react-ui-theme';
 
 import { DebugPanel } from './DebugPanel';
-import { Toolbar } from './Toolbar';
+import { type TemplateSelectProps, Toolbar, type ViewType } from './Toolbar';
 import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
 import { Bundler } from '../bundler';
 import {
+  getInvocationUrl,
   getUserFunctionUrlInMetadata,
   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 = {
+export type ScriptEditorProps = ThemedClassName<{
   script: ScriptType;
-  role?: string;
-} & Pick<TypescriptEditorProps, 'env'>;
+}> &
+  Pick<TypescriptEditorProps, 'env'>;
 
-export const ScriptEditor = ({ env, script, role }: ScriptEditorProps) => {
+export const ScriptEditor = ({ classNames, script, env }: ScriptEditorProps) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
-  const hasAttention = useHasAttention(fullyQualifiedId(script));
   const client = useClient();
   const identity = useIdentity();
   const space = getSpace(script);
+  // TODO(dmaretskyi): Parametric query.
   const [fn] = useQuery(
     space,
     Filter.schema(FunctionType, (fn) => fn.source === script),
@@ -73,7 +67,7 @@ export const ScriptEditor = ({ env, script, role }: ScriptEditorProps) => {
     [script, script.source, space, identity],
   );
 
-  const [showPanel, setShowPanel] = useState(false);
+  const [view, setView] = useState<ViewType>('editor');
   const initialValue = useMemo(() => script.source?.content, [script.source]);
   const existingFunctionUrl = fn && getUserFunctionUrlInMetadata(getMeta(fn));
   const [error, setError] = useState<string>();
@@ -103,6 +97,22 @@ export const ScriptEditor = ({ env, script, role }: 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;
@@ -114,11 +124,7 @@ export const ScriptEditor = ({ env, script, role }: 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;
@@ -134,15 +140,18 @@ export const ScriptEditor = ({ env, script, role }: 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);
-      setUserFunctionUrlInMetadata(meta, `/${ownerDid}/${functionId}`);
       script.changed = false;
+      setUserFunctionUrlInMetadata(meta, `/${ownerDid}/${functionId}`);
+      setView('split');
     } catch (err: any) {
       log.catch(err);
       setError(t('upload failed label'));
@@ -154,49 +163,43 @@ export const ScriptEditor = ({ env, script, role }: ScriptEditorProps) => {
       return;
     }
 
-    const baseUrl = new URL('functions/', client.config.values.runtime?.services?.edge?.url);
-
-    // Leading slashes cause the URL to be treated as an absolute path.
-    const relativeUrl = existingFunctionUrl.replace(/^\//, '');
-    const url = new URL(`./${relativeUrl}`, baseUrl.toString());
-    space && url.searchParams.set('spaceId', space.id);
-    url.protocol = 'https';
-    return url.toString();
+    return getInvocationUrl(existingFunctionUrl, client.config.values.runtime?.services?.edge?.url ?? '', {
+      spaceId: space?.id,
+    });
   }, [existingFunctionUrl, space]);
 
   return (
-    <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'
-      />
-
+    <div role='none' className={mx('flex flex-col w-full overflow-hidden divide-y divide-separator', classNames)}>
       <Toolbar
-        classNames='border-t border-separator'
         deployed={Boolean(existingFunctionUrl) && !script.changed}
         functionUrl={functionUrl}
         error={error}
-        showPanel={showPanel}
+        view={view}
+        templates={templates}
         onDeploy={handleDeploy}
         onFormat={handleFormat}
-        onTogglePanel={async () => setShowPanel((showDetails) => !showDetails)}
+        onViewChange={setView}
+        onTemplateSelect={handleTemplateChange}
       />
 
-      {showPanel && (
-        <DebugPanel functionUrl={functionUrl} binding={fn?.binding} onBindingChange={handleBindingChange} />
+      {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' && (
+        <DebugPanel
+          functionUrl={functionUrl}
+          showBindingConfig
+          binding={fn?.binding}
+          onBindingChange={handleBindingChange}
+        />
       )}
     </div>
   );
 };
-
-export default ScriptEditor;