@dxos/plugin-script 0.7.4-staging.f7e8224 → 0.7.5-labs.071a3e2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-script",
-  "version": "0.7.4-staging.f7e8224",
+  "version": "0.7.5-labs.071a3e2",
   "description": "Braneframe notebook plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,21 +8,11 @@
   "author": "DXOS.org",
   "sideEffects": true,
   "exports": {
-    "./edge": {
-      "types": "./dist/types/src/edge/index.d.ts",
-      "browser": "./dist/lib/browser/edge/index.mjs",
-      "node": "./dist/lib/node-esm/edge/index.mjs"
-    },
     ".": {
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
-    "./meta": {
-      "types": "./dist/types/src/meta.d.ts",
-      "browser": "./dist/lib/browser/meta.mjs",
-      "node": "./dist/lib/node-esm/meta.mjs"
-    },
     "./types": {
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
@@ -32,12 +22,6 @@
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
     "*": {
-      "edge": [
-        "dist/types/src/edge/index.d.ts"
-      ],
-      "meta": [
-        "dist/types/src/meta.d.ts"
-      ],
       "types": [
         "dist/types/src/types/index.d.ts"
       ]
@@ -57,44 +41,51 @@
     "@codemirror/view": "^6.34.1",
     "@effect/schema": "^0.75.5",
     "@lezer/common": "^1.2.2",
+    "@lezer/highlight": "^1.2.1",
+    "@octokit/core": "^4.0.4",
     "@preact/signals-core": "^1.6.0",
     "@typescript/vfs": "^1.6.0",
+    "@valtown/codemirror-continue": "^2.3.1",
     "@valtown/codemirror-ts": "^2.2.0",
     "codemirror": "^6.0.1",
     "esbuild-wasm": "^0.16.14",
-    "iso-did": "^1.6.0",
     "lodash.get": "^4.4.2",
     "prettier": "^3.2.4",
     "react-syntax-highlighter": "^15.5.0",
-    "typescript": "^5.6.2",
-    "@dxos/app-framework": "0.7.4-staging.f7e8224",
-    "@dxos/client-protocol": "0.7.4-staging.f7e8224",
-    "@dxos/async": "0.7.4-staging.f7e8224",
-    "@dxos/crypto": "0.7.4-staging.f7e8224",
-    "@dxos/debug": "0.7.4-staging.f7e8224",
-    "@dxos/echo-schema": "0.7.4-staging.f7e8224",
-    "@dxos/client": "0.7.4-staging.f7e8224",
-    "@dxos/edge-client": "0.7.4-staging.f7e8224",
-    "@dxos/keys": "0.7.4-staging.f7e8224",
-    "@dxos/invariant": "0.7.4-staging.f7e8224",
-    "@dxos/live-object": "0.7.4-staging.f7e8224",
-    "@dxos/log": "0.7.4-staging.f7e8224",
-    "@dxos/plugin-client": "0.7.4-staging.f7e8224",
-    "@dxos/plugin-explorer": "0.7.4-staging.f7e8224",
-    "@dxos/plugin-graph": "0.7.4-staging.f7e8224",
-    "@dxos/plugin-markdown": "0.7.4-staging.f7e8224",
-    "@dxos/plugin-space": "0.7.4-staging.f7e8224",
-    "@dxos/plugin-stack": "0.7.4-staging.f7e8224",
-    "@dxos/protocols": "0.7.4-staging.f7e8224",
-    "@dxos/react-client": "0.7.4-staging.f7e8224",
-    "@dxos/plugin-theme": "0.7.4-staging.f7e8224",
-    "@dxos/react-ui-editor": "0.7.4-staging.f7e8224",
-    "@dxos/react-ui-form": "0.7.4-staging.f7e8224",
-    "@dxos/react-ui-attention": "0.7.4-staging.f7e8224",
-    "@dxos/react-ui-syntax-highlighter": "0.7.4-staging.f7e8224",
-    "@dxos/rpc-tunnel": "0.7.4-staging.f7e8224",
-    "@dxos/rpc": "0.7.4-staging.f7e8224",
-    "@dxos/util": "0.7.4-staging.f7e8224"
+    "typescript": "^5.7.2",
+    "@dxos/app-framework": "0.7.5-labs.071a3e2",
+    "@dxos/client": "0.7.5-labs.071a3e2",
+    "@dxos/async": "0.7.5-labs.071a3e2",
+    "@dxos/compute": "0.7.5-labs.071a3e2",
+    "@dxos/client-protocol": "0.7.5-labs.071a3e2",
+    "@dxos/crypto": "0.7.5-labs.071a3e2",
+    "@dxos/debug": "0.7.5-labs.071a3e2",
+    "@dxos/functions": "0.7.5-labs.071a3e2",
+    "@dxos/invariant": "0.7.5-labs.071a3e2",
+    "@dxos/keys": "0.7.5-labs.071a3e2",
+    "@dxos/echo-schema": "0.7.5-labs.071a3e2",
+    "@dxos/live-object": "0.7.5-labs.071a3e2",
+    "@dxos/log": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-explorer": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-client": "0.7.5-labs.071a3e2",
+    "@dxos/local-storage": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-markdown": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-graph": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-space": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-stack": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-theme": "0.7.5-labs.071a3e2",
+    "@dxos/react-client": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-attention": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-editor": "0.7.5-labs.071a3e2",
+    "@dxos/protocols": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-form": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-menu": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-stack": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-syntax-highlighter": "0.7.5-labs.071a3e2",
+    "@dxos/rpc": "0.7.5-labs.071a3e2",
+    "@dxos/rpc-tunnel": "0.7.5-labs.071a3e2",
+    "@dxos/schema": "0.7.5-labs.071a3e2",
+    "@dxos/util": "0.7.5-labs.071a3e2"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -104,19 +95,19 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.7.4-staging.f7e8224",
-    "@dxos/random": "0.7.4-staging.f7e8224",
-    "@dxos/react-ui-mosaic": "0.7.4-staging.f7e8224",
-    "@dxos/storybook-utils": "0.7.4-staging.f7e8224",
-    "@dxos/react-ui-theme": "0.7.4-staging.f7e8224"
+    "@dxos/random": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-mosaic": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2",
+    "@dxos/storybook-utils": "0.7.5-labs.071a3e2"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.7.4-staging.f7e8224",
-    "@dxos/react-ui-mosaic": "0.7.4-staging.f7e8224",
-    "@dxos/react-ui": "0.7.4-staging.f7e8224"
+    "@dxos/react-ui": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-mosaic": "0.7.5-labs.071a3e2"
   },
   "publishConfig": {
     "access": "public"

package/src/ScriptPlugin.tsx

@@ -3,156 +3,68 @@
 //
 
 // @ts-ignore
-import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
-import React from 'react';
 
-import { NavigationAction, parseIntentPlugin, type PluginDefinition, resolvePlugin } from '@dxos/app-framework';
-import { create } from '@dxos/live-object';
-import { parseClientPlugin } from '@dxos/plugin-client';
-import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
-import { TextType } from '@dxos/plugin-markdown/types';
-import { SpaceAction } from '@dxos/plugin-space';
-import { loadObjectReferences } from '@dxos/react-client/echo';
+import { Capabilities, contributes, createIntent, defineModule, definePlugin, Events } from '@dxos/app-framework';
+import { type Space } from '@dxos/client/echo';
+import { FunctionType, ScriptType } from '@dxos/functions';
+import { RefArray } from '@dxos/live-object';
+import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
 
-import { initializeBundler } from './bundler';
-import { Compiler } from './compiler';
-import { AutomationPanel, ScriptContainer, ScriptSettings, ScriptSettingsPanel } from './components';
-import meta, { SCRIPT_PLUGIN } from './meta';
-import { templates } from './templates';
+import { Compiler, IntentResolver, ReactSurface, ScriptSettings } from './capabilities';
+import { meta, SCRIPT_PLUGIN } from './meta';
 import translations from './translations';
-import { FunctionType, ScriptAction, type ScriptPluginProvides, ScriptType } from './types';
+import { ScriptAction } from './types';
 
-export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
-  const compiler = new Compiler();
-
-  return {
-    meta,
-    initialize: async () => {
-      await compiler.initialize();
-      // TODO(wittjosiah): Fetch types for https modules.
-      compiler.setFile('/src/typings.d.ts', "declare module 'https://*';");
-      // TODO(wittjosiah): Proper function handler types.
-      // TODO(wittjosiah): Remove.
-      compiler.setFile(
-        '/src/runtime.ts',
-        `
-        export const Filter: any = {};
-        export type FunctionHandler = ({ event, context }: { event: any; context: any }) => Promise<Response>;
-        export const functionHandler = (handler: FunctionHandler) => handler;
-      `,
-      );
-      await initializeBundler({ wasmUrl });
-    },
-    provides: {
-      settings: {},
-      metadata: {
-        records: {
-          [ScriptType.typename]: {
-            createObject: ScriptAction.CREATE,
+export const ScriptPlugin = () =>
+  definePlugin(meta, [
+    defineModule({
+      id: `${meta.id}/module/settings`,
+      activatesOn: Events.SetupSettings,
+      activate: ScriptSettings,
+    }),
+    defineModule({
+      id: `${meta.id}/module/compiler`,
+      activatesOn: Events.Startup,
+      activate: Compiler,
+    }),
+    defineModule({
+      id: `${meta.id}/module/translations`,
+      activatesOn: Events.SetupTranslations,
+      activate: () => contributes(Capabilities.Translations, translations),
+    }),
+    defineModule({
+      id: `${meta.id}/module/metadata`,
+      activatesOn: Events.SetupMetadata,
+      activate: () =>
+        contributes(Capabilities.Metadata, {
+          id: ScriptType.typename,
+          metadata: {
+            creationSchema: ScriptAction.CreateScriptSchema,
+            createObject: (props: ScriptAction.CreateScriptProps, { space }: { space: Space }) =>
+              createIntent(ScriptAction.Create, { ...props, space }),
             placeholder: ['object title placeholder', { ns: SCRIPT_PLUGIN }],
             icon: 'ph--code--regular',
             // TODO(wittjosiah): Move out of metadata.
-            loadReferences: (script: ScriptType) => loadObjectReferences(script, (script) => [script.source]),
+            loadReferences: async (script: ScriptType) => await RefArray.loadAll([script.source]),
           },
-        },
-      },
-      translations,
-      echo: {
-        schema: [ScriptType],
-        system: [FunctionType],
-      },
-      graph: {
-        builder: (plugins) => {
-          const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
-          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
-          if (!client || !dispatch) {
-            return [];
-          }
-
-          return createExtension({
-            id: ScriptAction.CREATE,
-            filter: (node): node is ActionGroup => isActionGroup(node) && node.id.startsWith(SpaceAction.ADD_OBJECT),
-            actions: ({ node }) => {
-              const id = node.id.split('/').at(-1);
-              const [spaceId, objectId] = id?.split(':') ?? [];
-              const space = client.spaces.get().find((space) => space.id === spaceId);
-              const object = objectId && space?.db.getObjectById(objectId);
-              const target = objectId ? object : space;
-              if (!target) {
-                return;
-              }
-
-              return [
-                {
-                  id: `${SCRIPT_PLUGIN}/create/${node.id}`,
-                  data: async () => {
-                    await dispatch([
-                      { plugin: SCRIPT_PLUGIN, action: ScriptAction.CREATE },
-                      { action: SpaceAction.ADD_OBJECT, data: { target } },
-                      { action: NavigationAction.OPEN },
-                    ]);
-                  },
-                  properties: {
-                    label: ['create object label', { ns: SCRIPT_PLUGIN }],
-                    icon: 'ph--code--regular',
-                    testId: 'scriptPlugin.createObject',
-                  },
-                },
-              ];
-            },
-          });
-        },
-      },
-      surface: {
-        component: ({ data, role }) => {
-          switch (role) {
-            case 'settings': {
-              return data.plugin === meta.id ? <ScriptSettings settings={{}} /> : null;
-            }
-
-            case 'article': {
-              if (data.object instanceof ScriptType) {
-                return <ScriptContainer script={data.object} env={compiler.environment} />;
-              }
-              break;
-            }
-
-            case 'complementary--automation': {
-              if (data.subject instanceof ScriptType) {
-                return {
-                  node: <AutomationPanel subject={data.subject as any} />,
-                  disposition: 'hoist',
-                };
-              }
-              break;
-            }
-
-            case 'complementary--settings': {
-              if (data.subject instanceof ScriptType) {
-                return <ScriptSettingsPanel script={data.subject} />;
-              }
-              break;
-            }
-          }
-
-          return null;
-        },
-      },
-      intent: {
-        resolver: (intent) => {
-          switch (intent.action) {
-            case ScriptAction.CREATE: {
-              return {
-                data: create(ScriptType, {
-                  source: create(TextType, {
-                    content: templates[0].source,
-                  }),
-                }),
-              };
-            }
-          }
-        },
-      },
-    },
-  };
-};
+        }),
+    }),
+    defineModule({
+      id: `${meta.id}/module/schema`,
+      activatesOn: ClientEvents.SetupSchema,
+      activate: () => [
+        contributes(ClientCapabilities.SystemSchema, [FunctionType]),
+        contributes(ClientCapabilities.Schema, [ScriptType]),
+      ],
+    }),
+    defineModule({
+      id: `${meta.id}/module/react-surface`,
+      activatesOn: Events.SetupSurfaces,
+      activate: ReactSurface,
+    }),
+    defineModule({
+      id: `${meta.id}/module/intent-resolver`,
+      activatesOn: Events.SetupIntents,
+      activate: IntentResolver,
+    }),
+  ]);

package/src/bundler/bundler.test.ts

@@ -35,11 +35,12 @@ describe('Bundler', () => {
     expect(result.error).to.not.exist;
   });
 
-  test('HTTPS Import', async () => {
+  // TODO(dmaretskyi): Flaky on CI: https://cloud.nx.app/runs/Hjcifa8Ccq/task/plugin-script%3Atest
+  test.skip('HTTPS Import', async () => {
     const bundler = new Bundler({ platform: 'node', sandboxedModules: [], remoteModules: {} });
     const result = await bundler.bundle(`
-      import { Octokit } from 'https://esm.sh/octokit';
-      const octokit = new Octokit();
+      import { invariant } from 'https://esm.sh/@dxos/invariant';
+      invariant(true);
     `);
     expect(result.bundle).to.exist;
     expect(result.error).to.not.exist;

package/src/capabilities/capabilities.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { defineCapability } from '@dxos/app-framework';
+
+import { type Compiler } from '../compiler';
+import { SCRIPT_PLUGIN } from '../meta';
+
+export namespace ScriptCapabilities {
+  export const Compiler = defineCapability<Compiler>(`${SCRIPT_PLUGIN}/capability/compiler`);
+}

package/src/capabilities/compiler.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// @ts-ignore
+import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
+
+import { contributes } from '@dxos/app-framework';
+
+import { ScriptCapabilities } from './capabilities';
+import { initializeBundler } from '../bundler';
+import { Compiler } from '../compiler';
+
+export default async () => {
+  const compiler = new Compiler();
+
+  await compiler.initialize();
+  // TODO(wittjosiah): Fetch types for https modules.
+  compiler.setFile('/src/typings.d.ts', "declare module 'https://*';");
+  // TODO(wittjosiah): Proper function handler types.
+  // TODO(wittjosiah): Remove.
+  compiler.setFile(
+    '/src/runtime.ts',
+    `
+        export const Filter: any = {};
+        export type FunctionHandler = ({ event, context }: { event: any; context: any }) => Promise<Response>;
+        export const functionHandler = (handler: FunctionHandler) => handler;
+      `,
+  );
+  await initializeBundler({ wasmUrl });
+
+  return contributes(ScriptCapabilities.Compiler, compiler);
+};

package/src/capabilities/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { lazy } from '@dxos/app-framework';
+
+export const Compiler = lazy(() => import('./compiler'));
+export const IntentResolver = lazy(() => import('./intent-resolver'));
+export const ReactSurface = lazy(() => import('./react-surface'));
+export const ScriptSettings = lazy(() => import('./settings'));
+
+export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Octokit } from '@octokit/core';
+
+import { contributes, Capabilities, createResolver } from '@dxos/app-framework';
+import { ScriptType } from '@dxos/functions';
+import { create, makeRef } from '@dxos/live-object';
+import { TextType } from '@dxos/schema';
+
+import { templates } from '../templates';
+import { ScriptAction } from '../types';
+
+export default () =>
+  contributes(
+    Capabilities.IntentResolver,
+    createResolver({
+      intent: ScriptAction.Create,
+      resolve: async ({ name, gistUrl }) => {
+        let content = templates[0].source;
+        const gistId = gistUrl?.split('/').at(-1);
+        if (gistId) {
+          // TODO(wittjosiah): Capability which contributes Octokit?
+          // NOTE: AccessToken not needed to read public gists.
+          const octokit = new Octokit();
+          const response = await octokit.request('GET /gists/{gist_id}', {
+            gist_id: gistId,
+          });
+          const gistContent = Object.values(response.data.files ?? {})[0]?.content;
+          if (gistContent) {
+            content = gistContent;
+          }
+        }
+
+        return {
+          data: {
+            object: create(ScriptType, {
+              name,
+              source: makeRef(create(TextType, { content })),
+            }),
+          },
+        };
+      },
+    }),
+  );

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,54 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { ScriptType } from '@dxos/functions';
+import { SettingsStore } from '@dxos/local-storage';
+import { Clipboard } from '@dxos/react-ui';
+
+import { ScriptCapabilities } from './capabilities';
+import { AutomationPanel, ScriptSettings, ScriptContainer, ScriptSettingsPanel } from '../components';
+import { SCRIPT_PLUGIN } from '../meta';
+import { type ScriptSettingsProps } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: `${SCRIPT_PLUGIN}/settings`,
+      role: 'article',
+      filter: (data): data is { subject: SettingsStore<ScriptSettingsProps> } =>
+        data.subject instanceof SettingsStore && data.subject.prefix === SCRIPT_PLUGIN,
+      component: ({ data: { subject } }) => <ScriptSettings settings={subject.value} />,
+    }),
+    createSurface({
+      id: `${SCRIPT_PLUGIN}/article`,
+      role: 'article',
+      filter: (data): data is { subject: ScriptType } => data.subject instanceof ScriptType,
+      component: ({ data, role }) => {
+        const compiler = useCapability(ScriptCapabilities.Compiler);
+        // TODO(dmaretskyi): Since settings store is not reactive, this would break on the script plugin being enabled without a page reload.
+        const settings = useCapability(Capabilities.SettingsStore).getStore<ScriptSettingsProps>(SCRIPT_PLUGIN)?.value;
+        return <ScriptContainer role={role} script={data.subject} settings={settings} env={compiler.environment} />;
+      },
+    }),
+    createSurface({
+      id: `${SCRIPT_PLUGIN}/automation`,
+      role: 'complementary--automation',
+      position: 'hoist',
+      filter: (data): data is { subject: ScriptType } => data.subject instanceof ScriptType,
+      component: ({ data }) => <AutomationPanel subject={data.subject} />,
+    }),
+    createSurface({
+      id: `${SCRIPT_PLUGIN}/settings-panel`,
+      role: 'complementary--settings',
+      filter: (data): data is { subject: ScriptType } => data.subject instanceof ScriptType,
+      component: ({ data }) => (
+        <Clipboard.Provider>
+          <ScriptSettingsPanel script={data.subject} />
+        </Clipboard.Provider>
+      ),
+    }),
+  ]);

package/src/capabilities/settings.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes } from '@dxos/app-framework';
+import { create } from '@dxos/live-object';
+
+import { SCRIPT_PLUGIN } from '../meta';
+import { ScriptSettingsSchema } from '../types';
+
+export default () => {
+  const settings = create(ScriptSettingsSchema, { editorInputMode: 'vscode' });
+  return contributes(Capabilities.Settings, { schema: ScriptSettingsSchema, prefix: SCRIPT_PLUGIN, value: settings });
+};

package/src/compiler/compiler.browser.test.ts

@@ -12,7 +12,7 @@ describe('Compiler', () => {
     await compiler.initialize();
     compiler.setFile('/src/x.ts', 'export const x = 100');
     compiler.setFile('/src/y.ts', 'import { x } from "./x"; export const y = x + 100;');
-    const result = await compiler.compile('/src/y.ts');
+    const result = compiler.compile('/src/y.ts');
     expect(result).to.exist;
   });
 });

package/src/components/AutomationPanel/AutomationPanel.tsx

@@ -4,15 +4,13 @@
 
 import React, { useMemo, useState } from 'react';
 
-import { type ReactiveEchoObject } from '@dxos/client/echo';
 import { failUndefined } from '@dxos/debug';
+import { FunctionType, ScriptType, getInvocationUrl, getUserFunctionUrlInMetadata } from '@dxos/functions';
 import { useClient } from '@dxos/react-client';
-import { Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
+import { Filter, getMeta, getSpace, type ReactiveEchoObject, useQuery } from '@dxos/react-client/echo';
 import { Select, useTranslation } from '@dxos/react-ui';
 
-import { getInvocationUrl, getUserFunctionUrlInMetadata } from '../../edge';
 import { SCRIPT_PLUGIN } from '../../meta';
-import { FunctionType, ScriptType } from '../../types';
 import { DebugPanel } from '../DebugPanel';
 
 export interface AutomationPanelProps {

package/src/components/FrameContainer/FrameContainer.tsx

@@ -59,7 +59,7 @@ export const FrameContainer = ({ containerUrl, result, debug = true }: FrameCont
             className={mx(
               baseSurface,
               'flex absolute right-2 bottom-2 w-[400px] h-[200px] ring rounded',
-              'z-[100] overflow-x-hidden overflow-y-auto',
+              'z-20 overflow-x-hidden overflow-y-auto',
             )}
           >
             <pre className='text-xs whitespace-break-spaces break-all p-2'>