@dxos/plugin-script 0.6.10 → 0.6.11-staging.9c4dc38

package/dist/types/src/components/TypescriptEditor.stories.d.ts

@@ -2,11 +2,8 @@ import '@dxos-theme';
 import React from 'react';
 declare const _default: {
     title: string;
-    component: ({ id, extensions, env, initialValue, scrollTo, selection, className, scrollPastEnd, }: import("./TypescriptEditor").TypescriptEditorProps) => React.JSX.Element;
+    component: ({ id, scrollPastEnd, env, className, initialValue, extensions, scrollTo, selection, }: import("./TypescriptEditor").TypescriptEditorProps) => React.JSX.Element;
     render: () => React.JSX.Element;
-    parameters: {
-        layout: string;
-    };
 };
 export default _default;
 export declare const Default: {};

package/dist/types/src/components/TypescriptEditor.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypescriptEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/TypescriptEditor.stories.tsx"],"names":[],"mappings":"AAeA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAkB,MAAM,OAAO,CAAC;;;;;;;;;AAoCvC,wBAOE;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}
+{"version":3,"file":"TypescriptEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/TypescriptEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAkB,MAAM,OAAO,CAAC;;;;;;AA+CvC,wBAIE;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}

package/dist/types/src/components/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const ScriptEditor: React.LazyExoticComponent<({ env, script, role }: import("./ScriptEditor").ScriptEditorProps) => React.JSX.Element>;
-export declare const TypescriptEditor: React.LazyExoticComponent<({ id, extensions, env, initialValue, scrollTo, selection, className, scrollPastEnd, }: import("./TypescriptEditor").TypescriptEditorProps) => React.JSX.Element>;
+export declare const TypescriptEditor: React.LazyExoticComponent<({ id, scrollPastEnd, env, className, initialValue, extensions, scrollTo, selection, }: import("./TypescriptEditor").TypescriptEditorProps) => React.JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/types/script.d.ts

@@ -6,11 +6,13 @@ declare const ScriptType_base: import("@dxos/echo-schema").AbstractTypedObject<{
     } & {
         id: string;
     }>;
+    description?: string | undefined;
     changed?: boolean | undefined;
 } & {
     id: string;
 }, S.Struct.Encoded<{
     name: S.optional<typeof S.String>;
+    description: S.optional<typeof S.String>;
     source: ref<{
         content: string;
     } & {
@@ -18,9 +20,13 @@ declare const ScriptType_base: import("@dxos/echo-schema").AbstractTypedObject<{
     }>;
     changed: S.optional<typeof S.Boolean>;
 }>>;
+/**
+ * Source script.
+ */
 export declare class ScriptType extends ScriptType_base {
 }
 declare const FunctionType_base: import("@dxos/echo-schema").AbstractTypedObject<{
+    name?: string | undefined;
     version: number;
     source?: import("@dxos/echo-schema").Ref<{
         name?: string | undefined;
@@ -29,6 +35,7 @@ declare const FunctionType_base: import("@dxos/echo-schema").AbstractTypedObject
         } & {
             id: string;
         }>;
+        description?: string | undefined;
         changed?: boolean | undefined;
     } & {
         id: string;
@@ -37,6 +44,7 @@ declare const FunctionType_base: import("@dxos/echo-schema").AbstractTypedObject
 } & {
     id: string;
 }, S.Struct.Encoded<{
+    name: S.optional<typeof S.String>;
     version: typeof S.Number;
     binding: S.optional<typeof S.String>;
     source: S.optional<ref<{
@@ -46,11 +54,15 @@ declare const FunctionType_base: import("@dxos/echo-schema").AbstractTypedObject
         } & {
             id: string;
         }>;
+        description?: string | undefined;
         changed?: boolean | undefined;
     } & {
         id: string;
     }>>;
 }>>;
+/**
+ * Function deployment.
+ */
 export declare class FunctionType extends FunctionType_base {
 }
 export {};

package/dist/types/src/types/script.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"script.d.ts","sourceRoot":"","sources":["../../../../src/types/script.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,GAAG,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;;;AAGxD,qBAAa,UAAW,SAAQ,eAK9B;CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEL,qBAAa,YAAa,SAAQ,iBAMhC;CAAG"}
+{"version":3,"file":"script.d.ts","sourceRoot":"","sources":["../../../../src/types/script.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,GAAG,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;;;;;AAKxD;;GAEG;AACH,qBAAa,UAAW,SAAQ,eAQ9B;CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEL;;GAEG;AACH,qBAAa,YAAa,SAAQ,iBAQhC;CAAG"}

package/dist/types/src/types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,EACvB,eAAe,EACf,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIxD,oBAAY,YAAY;IACtB,MAAM,kCAA4B;CACnC;AAED,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAChD,sBAAsB,GACtB,oBAAoB,GACpB,uBAAuB,GACvB,oBAAoB,GACpB,cAAc,GACd,aAAa,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,EACvB,eAAe,EACf,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIxD,oBAAY,YAAY;IACtB,MAAM,kCAA4B;CACnC;AAED,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAChD,sBAAsB,GACtB,oBAAoB,GACpB,uBAAuB,GACvB,oBAAoB,GACpB,cAAc,GACd,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-script",
-  "version": "0.6.10",
+  "version": "0.6.11-staging.9c4dc38",
   "description": "Braneframe notebook plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -71,30 +71,33 @@
     "iso-did": "^1.6.0",
     "lodash.get": "^4.4.2",
     "prettier": "^3.2.4",
+    "react-syntax-highlighter": "^15.5.0",
     "typescript": "^5.5.4",
-    "@dxos/app-framework": "0.6.10",
-    "@dxos/async": "0.6.10",
-    "@dxos/crypto": "0.6.10",
-    "@dxos/client-protocol": "0.6.10",
-    "@dxos/debug": "0.6.10",
-    "@dxos/client": "0.6.10",
-    "@dxos/echo-schema": "0.6.10",
-    "@dxos/keys": "0.6.10",
-    "@dxos/invariant": "0.6.10",
-    "@dxos/plugin-client": "0.6.10",
-    "@dxos/plugin-explorer": "0.6.10",
-    "@dxos/plugin-graph": "0.6.10",
-    "@dxos/log": "0.6.10",
-    "@dxos/plugin-markdown": "0.6.10",
-    "@dxos/plugin-space": "0.6.10",
-    "@dxos/plugin-stack": "0.6.10",
-    "@dxos/plugin-theme": "0.6.10",
-    "@dxos/protocols": "0.6.10",
-    "@dxos/react-client": "0.6.10",
-    "@dxos/react-ui-editor": "0.6.10",
-    "@dxos/rpc": "0.6.10",
-    "@dxos/rpc-tunnel": "0.6.10",
-    "@dxos/util": "0.6.10"
+    "@dxos/app-framework": "0.6.11-staging.9c4dc38",
+    "@dxos/async": "0.6.11-staging.9c4dc38",
+    "@dxos/client-protocol": "0.6.11-staging.9c4dc38",
+    "@dxos/crypto": "0.6.11-staging.9c4dc38",
+    "@dxos/client": "0.6.11-staging.9c4dc38",
+    "@dxos/debug": "0.6.11-staging.9c4dc38",
+    "@dxos/invariant": "0.6.11-staging.9c4dc38",
+    "@dxos/echo-schema": "0.6.11-staging.9c4dc38",
+    "@dxos/keys": "0.6.11-staging.9c4dc38",
+    "@dxos/plugin-client": "0.6.11-staging.9c4dc38",
+    "@dxos/plugin-explorer": "0.6.11-staging.9c4dc38",
+    "@dxos/plugin-graph": "0.6.11-staging.9c4dc38",
+    "@dxos/plugin-markdown": "0.6.11-staging.9c4dc38",
+    "@dxos/log": "0.6.11-staging.9c4dc38",
+    "@dxos/plugin-space": "0.6.11-staging.9c4dc38",
+    "@dxos/plugin-stack": "0.6.11-staging.9c4dc38",
+    "@dxos/plugin-theme": "0.6.11-staging.9c4dc38",
+    "@dxos/protocols": "0.6.11-staging.9c4dc38",
+    "@dxos/react-client": "0.6.11-staging.9c4dc38",
+    "@dxos/react-ui-attention": "0.6.11-staging.9c4dc38",
+    "@dxos/react-ui-syntax-highlighter": "0.6.11-staging.9c4dc38",
+    "@dxos/rpc": "0.6.11-staging.9c4dc38",
+    "@dxos/react-ui-editor": "0.6.11-staging.9c4dc38",
+    "@dxos/rpc-tunnel": "0.6.11-staging.9c4dc38",
+    "@dxos/util": "0.6.11-staging.9c4dc38"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -104,20 +107,20 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "^5.3.4",
-    "@dxos/random": "0.6.10",
-    "@dxos/echo-generator": "0.6.10",
-    "@dxos/react-ui": "0.6.10",
-    "@dxos/storybook-utils": "0.6.10",
-    "@dxos/react-ui-mosaic": "0.6.10",
-    "@dxos/react-ui-theme": "0.6.10"
+    "@dxos/random": "0.6.11-staging.9c4dc38",
+    "@dxos/react-ui": "0.6.11-staging.9c4dc38",
+    "@dxos/react-ui-mosaic": "0.6.11-staging.9c4dc38",
+    "@dxos/echo-generator": "0.6.11-staging.9c4dc38",
+    "@dxos/react-ui-theme": "0.6.11-staging.9c4dc38",
+    "@dxos/storybook-utils": "0.6.11-staging.9c4dc38"
   },
   "optionalDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@dxos/react-ui": "0.6.10",
-    "@dxos/react-ui-mosaic": "0.6.10",
-    "@dxos/react-ui-theme": "0.6.10"
+    "@dxos/react-ui": "0.6.11-staging.9c4dc38",
+    "@dxos/react-ui-mosaic": "0.6.11-staging.9c4dc38",
+    "@dxos/react-ui-theme": "0.6.11-staging.9c4dc38"
   },
   "publishConfig": {
     "access": "public"

package/src/ScriptPlugin.tsx

@@ -107,11 +107,14 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
         creators: [
           {
             id: 'create-stack-section-script',
-            testId: 'scriptPlugin.createSectionSpaceScript',
+            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 },
+            intent: {
+              plugin: SCRIPT_PLUGIN,
+              action: ScriptAction.CREATE,
+            },
           },
         ],
       },
@@ -146,8 +149,8 @@ const example = [
   'export default async ({ ',
   '  event: { data: { request } },',
   '  context: { space, ai } ',
-  '}) => {',
-  "  return new Response('Hello World, from ScriptPlugin!');",
+  '}: any) => {',
+  "  return new Response('Hello DXOS!');",
   '};',
   '',
 ].join('\n');

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

@@ -13,24 +13,27 @@ import {
   type ThemedClassName,
   Toolbar,
   useControlledValue,
-  useDynamicRef,
   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';
 
 type State = 'pending' | 'responding';
 
-type Item = { type: 'request' | 'response'; text: string };
+/**
+ * Request or response.
+ */
+type Message = { type: 'request' | 'response'; text?: string; data?: any; error?: Error };
 
-export type DetailsPanelProps = ThemedClassName<{
+export type DebugPanelProps = ThemedClassName<{
   functionUrl?: string;
   binding?: string;
   onBindingChange?: (binding: string) => void;
 }>;
 
-export const DetailsPanel = ({ classNames, functionUrl, binding: _binding, onBindingChange }: DetailsPanelProps) => {
+export const DebugPanel = ({ classNames, functionUrl, binding: _binding, onBindingChange }: DebugPanelProps) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
 
   const bindingInputRef = useRef<HTMLInputElement>(null);
@@ -42,11 +45,10 @@ export const DetailsPanel = ({ classNames, functionUrl, binding: _binding, onBin
   const inputRef = useRef<HTMLInputElement>(null);
   const [input, setInput] = useState('');
   const [result, setResult] = useState('');
-  const resultRef = useDynamicRef(result);
   const [state, setState] = useState<State | null>(null);
 
   // TODO(burdon): Persistent history (non-space ECHO data?)
-  const [history, setHistory] = useState<Item[]>([]);
+  const [history, setHistory] = useState<Message[]>([]);
 
   const scrollerRef = useRef<HTMLDivElement>(null);
   const handleScroll = () => {
@@ -67,7 +69,6 @@ export const DetailsPanel = ({ classNames, functionUrl, binding: _binding, onBin
     controller.current = undefined;
   };
 
-  // TODO(burdon): Halt streaming request?
   const handleClear = () => {
     handleStop();
     setInput('');
@@ -76,52 +77,81 @@ export const DetailsPanel = ({ classNames, functionUrl, binding: _binding, onBin
     inputRef.current?.focus();
   };
 
-  const handleDone = () => {
+  const handleResponse = ({ text, data, error }: { text?: string; data?: any; error?: Error } = {}) => {
     controller.current = undefined;
-    setHistory((history) => [...history, { type: 'response', text: resultRef.current }]);
+    setHistory((history) => [...history, { type: 'response', text, data, error } satisfies Message]);
     setResult('');
     setState(null);
     handleScroll();
   };
 
-  const handleRun = async (input: string) => {
-    if (input.trim().length === 0) {
-      inputRef.current?.focus();
-      return;
-    }
-
-    setHistory((history) => [...history, { type: 'request', text: input }]);
-    setInput('');
-    setResult('');
-
+  const handleRequest = async (input: string) => {
     // Returns a promise that resolves when a value has been received.
     try {
       setState('pending');
 
+      let data = null;
+      // Detect JSON 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);
+        } catch (err) {
+          inputRef.current?.focus();
+          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',
+        },
       });
 
-      // TODO(burdon): Error handling.
+      // Check for error.
       if (!response.ok) {
-        setState(null);
+        const text = await response.text();
+        handleResponse({ error: new Error(text || response.statusText || String(response.status)) });
+        return;
+      }
+
+      // Check for JSON.
+      const contentType = response.headers.get('content-type');
+      if (contentType === 'application/json') {
+        const data = await response.json();
+        handleResponse({ data });
         return;
       }
 
+      // Text (including streaming).
       setState('responding');
+      let text = '';
       const reader = response.body!.getReader();
       const pump = async ({ done, value }: ReadableStreamReadResult<Uint8Array>): Promise<void> => {
-        setResult((result) => result + new TextDecoder().decode(value));
-        handleScroll();
+        text = text + new TextDecoder().decode(value);
         if (!controller.current || done) {
-          handleDone();
+          handleResponse({ text });
           return;
         }
 
+        setResult(text);
+        setTimeout(() => {
+          handleScroll();
+        });
+
         return reader.read().then(pump);
       };
 
@@ -133,10 +163,13 @@ export const DetailsPanel = ({ classNames, functionUrl, binding: _binding, onBin
             log.catch(err);
           }
         });
-    } catch (err) {
-      setState(null);
+    } catch (err: any) {
       if (err !== 'stop') {
+        const error = err instanceof Error ? err : new Error(err);
+        handleResponse({ error });
         log.catch(err);
+      } else {
+        handleResponse();
       }
     }
   };
@@ -157,7 +190,7 @@ export const DetailsPanel = ({ classNames, functionUrl, binding: _binding, onBin
               placeholder={t('function request placeholder')}
               value={input}
               onChange={(ev) => setInput(ev.target.value)}
-              onKeyDown={(ev) => ev.key === 'Enter' && handleRun(input)}
+              onKeyDown={(ev) => ev.key === 'Enter' && handleRequest(input)}
             />
           </Input.Root>
           <Input.Root>
@@ -170,7 +203,7 @@ export const DetailsPanel = ({ classNames, functionUrl, binding: _binding, onBin
               onBlur={handleBlur}
             />
           </Input.Root>
-          <Toolbar.Button onClick={() => handleRun(input)}>
+          <Toolbar.Button onClick={() => handleRequest(input)}>
             <Icon icon='ph--play--regular' size={4} />
           </Toolbar.Button>
           <Toolbar.Button onClick={() => (state ? handleStop() : handleClear())}>
@@ -190,17 +223,35 @@ const RobotAvatar = () => (
   </Avatar.Root>
 );
 
-// TODO(burdon): Replace with thread.
-// TODO(burdon): Delete individual messages.
-// TODO(burdon): Re-run question.
-const MessageThread = ({ state, result, history }: { state: State | null; result: string; history: Item[] }) => {
+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.
+const MessageThread = ({ state, result, history }: { state: State | null; result: string; history: Message[] }) => {
   return (
     <>
-      {history.map(({ type, text }, i) => (
+      {history.map((message, i) => (
         <div key={i} className='grid grid-cols-[3rem_1fr]'>
-          <div>{type === 'response' && <RobotAvatar />}</div>
-          <div className={mx('flex', type === 'request' && 'justify-end')}>
-            <span className={mx(type === 'request' && 'p-1 px-2 rounded-lg bg-hoverSurface')}>{text}</span>
+          <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>
       ))}

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

@@ -3,15 +3,14 @@
 //
 
 import '@dxos-theme';
-
 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, createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
-import { ClientRepeater } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/storybook-utils';
+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';
@@ -32,33 +31,41 @@ const code = [
 
 const Story = () => {
   const client = useClient();
-  // TODO(dmaretskyi): Review what's the right way to create automerge-backed objects.
+  const spaces = useSpaces();
+  console.log(spaces.length);
+
+  useEffect(() => {
+    try {
+      // TODO(burdon): Default not set.
+      const generator = createSpaceObjectGenerator(client.spaces.default);
+      generator.addSchemas();
+      void generator
+        .createObjects({
+          [TestSchemaType.organization]: 20,
+          [TestSchemaType.contact]: 50,
+        })
+        .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 }) })),
-    [code],
+    [],
   );
-  const accessor = useMemo(() => createDocAccessor(object, ['content']), [object]);
-  useEffect(() => {
-    const generator = createSpaceObjectGenerator(client.spaces.default);
-    generator.addSchemas();
-    void generator.createObjects({ [TestSchemaType.organization]: 20, [TestSchemaType.contact]: 50 }).catch();
-  }, []);
 
   // 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 (
-    <div className={'flex fixed inset-0'}>{accessor && <ScriptBlock script={object} containerUrl={mainUrl} />}</div>
-  );
+  return <ScriptBlock script={object} containerUrl={mainUrl} />;
 };
 
 export default {
   title: 'plugin-script/ScriptBlock',
   component: ScriptBlock,
-  render: () => <ClientRepeater component={Story} createSpace />,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true }), withClientProvider({ createSpace: true })],
+  render: Story,
 };
 
 export const Default = {};

package/src/components/ScriptEditor.tsx

@@ -10,13 +10,22 @@ 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 } 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 { DetailsPanel } from './DetailsPanel';
+import { DebugPanel } from './DebugPanel';
 import { Toolbar } from './Toolbar';
 import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
 import { Bundler } from '../bundler';
@@ -36,6 +45,7 @@ export type 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);
@@ -157,17 +167,22 @@ export const ScriptEditor = ({ env, script, role }: ScriptEditorProps) => {
   return (
     <div
       role='none'
-      className={mx(role === 'article' && 'row-span-2', 'flex flex-col is-full bs-full overflow-hidden')}
+      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 border-b border-separator'
+        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}
@@ -178,7 +193,7 @@ export const ScriptEditor = ({ env, script, role }: ScriptEditorProps) => {
       />
 
       {showPanel && (
-        <DetailsPanel functionUrl={functionUrl} binding={fn?.binding} onBindingChange={handleBindingChange} />
+        <DebugPanel functionUrl={functionUrl} binding={fn?.binding} onBindingChange={handleBindingChange} />
       )}
     </div>
   );

package/src/components/Toolbar.stories.tsx

@@ -4,16 +4,14 @@
 
 import '@dxos-theme';
 
-// import React from 'react';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './Toolbar';
 
 export default {
   title: 'plugin-script/Toolbar',
   component: Toolbar,
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [withTheme, withLayout({ tooltips: true })],
 };
 
 export const Default = { args: { binding: 'example', deployed: true } };