@dxos/plugin-script 0.8.4-main.ead640a → 0.8.4-main.effb148878

package/src/capabilities/compiler.ts

@@ -2,33 +2,110 @@
 // Copyright 2025 DXOS.org
 //
 
-// @ts-ignore
+import * as FetchHttpClient from '@effect/platform/FetchHttpClient';
+import * as HttpClient from '@effect/platform/HttpClient';
+import * as Effect from 'effect/Effect';
+import * as Schedule from 'effect/Schedule';
+import * as Schema from 'effect/Schema';
 import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
+import * as ts from 'typescript';
 
-import { contributes } from '@dxos/app-framework';
-import { initializeBundler } from '@dxos/functions/bundler';
+import { Capability } from '@dxos/app-framework';
+import { initializeBundler } from '@dxos/functions-runtime/bundler';
+import { log } from '@dxos/log';
+import { trim } from '@dxos/util';
+
+import { ScriptCapabilities } from '#types';
 
 import { Compiler } from '../compiler';
 
-import { ScriptCapabilities } from './capabilities';
-
-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;
-      `,
+// TODO(burdon): Document.
+const SCRIPT_PACKAGES_BUCKET = 'https://pub-5745ae82e450484aa28f75fc6a175935.r2.dev/dev/';
+const DECLARATION_EXTS = ['.d.ts', '.d.mts'];
+const NO_TYPES = true; // Types temopararly disabled due to compiler erorrs.
+
+export default Capability.makeModule(() =>
+  Effect.gen(function* () {
+    yield* Effect.tryPromise({
+      try: () => initializeBundler({ wasmUrl }),
+      catch: (error) => new Error(`Failed to initialize bundler: ${error}`),
+    });
+
+    const runtimeModules = yield* fetchRuntimeModules().pipe(Effect.provide(FetchHttpClient.layer));
+
+    const compiler = new Compiler({
+      target: ts.ScriptTarget.ES2022,
+      lib: ['lib.es2022.d.ts', 'lib.dom.d.ts'],
+      skipLibCheck: true,
+      moduleResolution: ts.ModuleResolutionKind.Bundler,
+      allowImportingTsExtensions: true,
+      noEmit: true,
+      strict: true,
+      esModuleInterop: true,
+      paths: Object.fromEntries(runtimeModules.map((mod: any) => [mod.moduleName, [`./src/${mod.filename}`]])),
+    });
+
+    yield* Effect.tryPromise({
+      try: () =>
+        compiler.initialize(trim`
+        declare module 'https://*';
+        ${NO_TYPES ? '' : 'declare module "*";'}
+      `),
+      catch: (error) => new Error(`Failed to initialize compiler: ${error}`),
+    });
+    if (!NO_TYPES) {
+      for (const mod of runtimeModules) {
+        compiler.setFile(`/src/${mod.filename}`, mod.content);
+      }
+    }
+
+    return Capability.contributes(ScriptCapabilities.Compiler, compiler);
+  }),
+);
+
+const fetchRuntimeModules = Effect.fnUntraced(function* () {
+  // { key, size, contentType }
+  const manifest = yield* HttpClient.get(new URL('manifest.json', SCRIPT_PACKAGES_BUCKET)).pipe(
+    Effect.flatMap((_) => _.json),
+    Effect.flatMap(
+      Schema.decodeUnknown(
+        Schema.Struct({
+          files: Schema.Array(
+            Schema.Struct({
+              key: Schema.String,
+            }),
+          ),
+        }),
+      ),
+    ),
+    Effect.map((manifest) => ({ ...manifest, files: manifest.files.map((f) => f.key) })),
+  );
+
+  const declarationFiles = manifest.files.filter((file) => DECLARATION_EXTS.some((ext) => file.endsWith(ext)));
+
+  let fetched = 0;
+  const modules = yield* Effect.forEach(
+    declarationFiles,
+    Effect.fnUntraced(
+      function* (filename) {
+        const response = yield* HttpClient.get(new URL(filename, SCRIPT_PACKAGES_BUCKET)).pipe(
+          Effect.retry(Schedule.exponential(1_000).pipe(Schedule.compose(Schedule.recurs(3)))),
+        );
+        const content = yield* response.text;
+        const moduleName = filename.replace(/\.d\.(ts|mts)$/, '');
+        fetched++;
+
+        return {
+          moduleName,
+          filename,
+          content,
+        };
+      },
+      Effect.retry(Schedule.exponential(1_000).pipe(Schedule.compose(Schedule.recurs(3)))),
+    ),
+    { concurrency: 20 },
   );
-  await initializeBundler({ wasmUrl });
 
-  return contributes(ScriptCapabilities.Compiler, compiler);
-};
+  log.info('runtime modules', { manifest: manifest.files.length, files: declarationFiles.length, fetched });
+  return modules;
+});

package/src/capabilities/create-object.ts

@@ -0,0 +1,49 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { Operation, Script } from '@dxos/compute';
+import { Type } from '@dxos/echo';
+import { SpaceOperation } from '@dxos/plugin-space';
+import { SpaceCapabilities } from '@dxos/plugin-space';
+
+import { ScriptOperation } from '#types';
+import { Notebook } from '#types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return [
+      Capability.contributes(SpaceCapabilities.CreateObjectEntry, {
+        id: Type.getTypename(Script.Script),
+        inputSchema: ScriptOperation.ScriptProps,
+        createObject: (props, options) =>
+          Effect.gen(function* () {
+            const { object } = yield* Operation.invoke(ScriptOperation.CreateScript, props);
+            return yield* Operation.invoke(SpaceOperation.AddObject, {
+              object,
+              target: options.target,
+              hidden: true,
+              targetNodeId: options.targetNodeId,
+            });
+          }),
+      }),
+      Capability.contributes(SpaceCapabilities.CreateObjectEntry, {
+        id: Type.getTypename(Notebook.Notebook),
+        inputSchema: ScriptOperation.NotebookProps,
+        createObject: (props, options) =>
+          Effect.gen(function* () {
+            const object = Notebook.make(props);
+            return yield* Operation.invoke(SpaceOperation.AddObject, {
+              object,
+              target: options.target,
+              hidden: true,
+              targetNodeId: options.targetNodeId,
+            });
+          }),
+      }),
+    ];
+  }),
+);

package/src/capabilities/index.ts

@@ -2,13 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import { lazy } from '@dxos/app-framework';
+import { Capability } from '@dxos/app-framework';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Blueprint, OperationHandlerSet } from '@dxos/compute';
 
-export const AppGraphBuilder = lazy(() => import('./app-graph-builder'));
-export const BlueprintDefinition = lazy(() => import('./blueprint-definition'));
-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';
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
+export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));
+export const CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));
+export const Compiler = Capability.lazy('Compiler', () => import('./compiler'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
+export const ScriptSettings = Capability.lazy('ScriptSettings', () => import('./settings'));

package/src/capabilities/node.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Blueprint, OperationHandlerSet } from '@dxos/compute';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
+export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));
+export const CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));
+export const Compiler = Capability.lazy('Compiler', () => import('./compiler'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);

package/src/capabilities/operation-handler.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { OperationHandlerSet } from '@dxos/compute';
+
+import { ScriptOperationHandlerSet } from '#operations';
+
+import { ScriptHandlers } from '../blueprints/functions';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(
+      Capabilities.OperationHandler,
+      OperationHandlerSet.merge(ScriptOperationHandlerSet, ScriptHandlers),
+    );
+  }),
+);

package/src/capabilities/react-surface.tsx

@@ -2,101 +2,129 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import * as Effect from 'effect/Effect';
+import React, { type ComponentProps } from 'react';
 
-import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface, useAtomCapability, useSettingsState } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { Script } from '@dxos/compute';
 import { InvocationTraceContainer } from '@dxos/devtools';
-import { Obj } from '@dxos/echo';
-import { ScriptType } from '@dxos/functions';
-import { SettingsStore } from '@dxos/local-storage';
+import { Feed } from '@dxos/echo';
+import { useClient } from '@dxos/react-client';
 import { getSpace } from '@dxos/react-client/echo';
-import { StackItem } from '@dxos/react-ui-stack';
-import { type DataType } from '@dxos/schema';
+import { Panel } from '@dxos/react-ui';
 
-import {
-  DEPLOYMENT_DIALOG,
-  DeploymentDialog,
-  NotebookContainer,
-  ScriptContainer,
-  ScriptObjectSettings,
-  ScriptPluginSettings,
-  ScriptProperties,
-  TestContainer,
-} from '../components';
-import { meta } from '../meta';
-import { Notebook, type ScriptSettings } from '../types';
+import { ScriptPluginSettings } from '#components';
+import { DeploymentDialog, NotebookArticle, ScriptArticle, ScriptProperties, TestContainer } from '#containers';
+import { useCompiler } from '#hooks';
+import { meta } from '#meta';
+import { Notebook, ScriptCapabilities, type Settings } from '#types';
 
-import { ScriptCapabilities } from './capabilities';
+import { DEPLOYMENT_DIALOG } from '../constants';
+import { getAccessCredential } from '../util';
 
-export default () =>
-  contributes(Capabilities.ReactSurface, [
-    createSurface({
-      id: `${meta.id}/plugin-settings`,
-      role: 'article',
-      filter: (data): data is { subject: SettingsStore<ScriptSettings> } =>
-        data.subject instanceof SettingsStore && data.subject.prefix === meta.id,
-      component: ({ data: { subject } }) => <ScriptPluginSettings settings={subject.value} />,
-    }),
-    createSurface({
-      id: `${meta.id}/script/article`,
-      role: ['article', 'section'],
-      filter: (data): data is { subject: ScriptType } => Obj.instanceOf(ScriptType, data.subject),
-      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<ScriptSettings>(meta.id)?.value;
-        return <ScriptContainer role={role} script={data.subject} settings={settings} env={compiler.environment} />;
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/notebook/article`,
-      role: 'article',
-      filter: (data): data is { subject: Notebook.Notebook } => Obj.instanceOf(Notebook.Notebook, data.subject),
-      component: ({ data, role }) => {
-        const compiler = useCapability(ScriptCapabilities.Compiler);
-        return <NotebookContainer role={role} notebook={data.subject} env={compiler.environment} />;
-      },
-    }),
-    // TODO(burdon): Standardize PluginSettings vs ObjectSettings.
-    // TODO(burdon): Why is ScriptProperties different from ScriptObjectSettings?
-    createSurface({
-      id: `${meta.id}/companion/base-settings`,
-      role: 'base-object-settings',
-      filter: (data): data is { subject: ScriptType } => Obj.instanceOf(ScriptType, data.subject),
-      component: ({ data }) => <ScriptProperties object={data.subject} />,
-    }),
-    createSurface({
-      id: `${meta.id}/companion/settings`,
-      role: 'object-settings',
-      filter: (data): data is { subject: ScriptType } => Obj.instanceOf(ScriptType, data.subject),
-      component: ({ data }) => <ScriptObjectSettings object={data.subject} />,
-    }),
-    createSurface({
-      id: `${meta.id}/companion/execute`,
-      role: 'article',
-      filter: (data): data is { companionTo: ScriptType } =>
-        Obj.instanceOf(ScriptType, data.companionTo) && data.subject === 'execute',
-      component: ({ data, role }) => <TestContainer script={data.companionTo} role={role} />,
-    }),
-    createSurface({
-      id: `${meta.id}/companion/logs`,
-      role: 'article',
-      filter: (data): data is { companionTo: ScriptType } =>
-        Obj.instanceOf(ScriptType, data.companionTo) && data.subject === 'logs',
-      component: ({ data, role }) => {
-        const space = getSpace(data.companionTo);
-        return (
-          <StackItem.Content>
-            <InvocationTraceContainer space={space} target={data.companionTo} detailAxis='block' />
-          </StackItem.Content>
-        );
-      },
-    }),
-    createSurface({
-      id: DEPLOYMENT_DIALOG,
-      role: 'dialog',
-      filter: (data): data is { props: { accessToken: DataType.AccessToken; scriptTemplates: any } } =>
-        data.component === DEPLOYMENT_DIALOG,
-      component: ({ data }) => <DeploymentDialog {...data.props} />,
-    }),
-  ]);
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'plugin-settings',
+        filter: AppSurface.settings(AppSurface.Article, meta.id),
+        component: ({ data: { subject } }) => {
+          const { settings, updateSettings } = useSettingsState<Settings.Settings>(subject.atom);
+          const client = useClient();
+          // TODO(burdon): Check token.
+          const handleAuthenticate = async () => {
+            const { identityKey } = client.halo.identity.get()!;
+            await client.halo.writeCredentials([getAccessCredential(identityKey)]);
+          };
+          return (
+            <ScriptPluginSettings
+              settings={settings}
+              onSettingsChange={updateSettings}
+              onAuthenticate={handleAuthenticate}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'script.article',
+        // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
+        filter: AppSurface.oneOf(
+          AppSurface.object(AppSurface.Article, Script.Script),
+          AppSurface.object(AppSurface.Section, Script.Script),
+        ),
+        component: ({ data, role }) => {
+          const compiler = useCompiler();
+          const settings = useAtomCapability(ScriptCapabilities.Settings);
+          return (
+            <ScriptArticle
+              role={role}
+              subject={data.subject}
+              attendableId={data.attendableId}
+              settings={settings}
+              env={compiler?.environment}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'notebook.article',
+        filter: AppSurface.object(AppSurface.Article, Notebook.Notebook),
+        component: ({ data, role }) => {
+          const compiler = useCompiler();
+          return (
+            <NotebookArticle
+              role={role}
+              subject={data.subject}
+              attendableId={data.attendableId}
+              env={compiler?.environment}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'properties',
+        filter: AppSurface.object(AppSurface.ObjectProperties, Script.Script),
+        component: ({ data, role }) => <ScriptProperties role={role} subject={data.subject} />,
+      }),
+      Surface.create({
+        id: 'companion.execute',
+        filter: AppSurface.allOf(
+          AppSurface.literal(AppSurface.Article, 'execute'),
+          AppSurface.companion(AppSurface.Article, Script.Script),
+        ),
+        component: ({ data, role }) => <TestContainer script={data.companionTo} role={role} />,
+      }),
+      Surface.create({
+        id: 'companion.logs',
+        filter: AppSurface.allOf(
+          AppSurface.literal(AppSurface.Article, 'logs'),
+          AppSurface.companion(AppSurface.Article, Script.Script),
+        ),
+        component: ({ data, role }) => {
+          const space = getSpace(data.companionTo);
+          const feed = space?.properties.invocationTraceFeed?.target;
+          const feedDXN = feed ? Feed.getQueueUri(feed) : undefined;
+          return (
+            <Panel.Root role={role}>
+              <Panel.Content>
+                <InvocationTraceContainer
+                  db={space?.db}
+                  feedDXN={feedDXN}
+                  target={data.companionTo}
+                  detailAxis='block'
+                />
+              </Panel.Content>
+            </Panel.Root>
+          );
+        },
+      }),
+      Surface.create({
+        id: DEPLOYMENT_DIALOG,
+        filter: AppSurface.component<ComponentProps<typeof DeploymentDialog>>(AppSurface.Dialog, DEPLOYMENT_DIALOG),
+        component: ({ data }) => <DeploymentDialog {...data.props} />,
+      }),
+    ]),
+  ),
+);

package/src/capabilities/settings.ts

@@ -2,20 +2,32 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes } from '@dxos/app-framework';
-import { live } from '@dxos/live-object';
+import * as Effect from 'effect/Effect';
 
-import { meta } from '../meta';
-import { ScriptSettings } from '../types';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { createKvsStore } from '@dxos/effect';
 
-export default () => {
-  const settings = live<ScriptSettings>({
-    editorInputMode: 'vscode',
-  });
+import { meta } from '#meta';
+import { ScriptCapabilities, Settings } from '#types';
 
-  return contributes(Capabilities.Settings, {
-    prefix: meta.id,
-    schema: ScriptSettings,
-    value: settings,
-  });
-};
+export default Capability.makeModule(() =>
+  Effect.sync(() => {
+    const settingsAtom = createKvsStore({
+      key: meta.id,
+      schema: Settings.Settings,
+      defaultValue: () => ({
+        editorInputMode: 'vscode' as const,
+      }),
+    });
+
+    return [
+      Capability.contributes(ScriptCapabilities.Settings, settingsAtom),
+      Capability.contributes(AppCapabilities.Settings, {
+        prefix: meta.id,
+        schema: Settings.Settings,
+        atom: settingsAtom,
+      }),
+    ];
+  }),
+);

package/src/compiler/compiler.ts

@@ -12,9 +12,22 @@ import ts from 'typescript';
 
 import { invariant } from '@dxos/invariant';
 
+const GLOBALS = 'globals.d.ts';
+
+/** TS version hosted on playgroundcdn.typescriptlang.org used to fetch lib .d.ts files.
+ * Pinned to 5.6.3 because 5.7+ removed lib.es2022.sharedmemory.d.ts from the CDN.
+ * The remaining 404s (lib.core.d.ts, lib.core.es6/7.d.ts, lib.es7.d.ts) are phantom
+ * entries in @typescript/vfs's hardcoded file list and are harmlessly caught.
+ */
+const CDN_TS_VERSION = '5.6.3';
+
 const defaultOptions: ts.CompilerOptions = {
   lib: ['DOM', 'es2022'],
   target: ts.ScriptTarget.ES2022,
+  // Override `@typescript/vfs`'s default of `NodeJs` (== deprecated `node10`).
+  // TypeScript 6 throws on that as a `getCompilerOptionsDiagnostics()` error,
+  // which surfaces as an unhandled rejection inside the storybook task.
+  moduleResolution: ts.ModuleResolutionKind.Bundler,
 };
 
 export class Compiler {
@@ -23,16 +36,21 @@ export class Compiler {
 
   constructor(private readonly _options: ts.CompilerOptions = defaultOptions) {}
 
-  async initialize(): Promise<void> {
+  async initialize(globals?: string): Promise<void> {
     if (this._env) {
       return;
     }
 
     // TODO(wittjosiah): Figure out how to get workers working in plugin packages.
     //   https://github.com/val-town/codemirror-ts?tab=readme-ov-file#setup-worker
-    this._fsMap = await createDefaultMapFromCDN(this._options, '5.5.4', true, ts);
+    this._fsMap = await createDefaultMapFromCDN(this._options, CDN_TS_VERSION, true, ts);
+    if (globals) {
+      this._fsMap.set(GLOBALS, globals);
+    }
+
+    const rootFiles = globals ? [GLOBALS] : [];
     const system = createSystem(this._fsMap);
-    this._env = createVirtualTypeScriptEnvironment(system, [], ts, this._options);
+    this._env = createVirtualTypeScriptEnvironment(system, rootFiles, ts, this._options);
   }
 
   get environment() {

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

@@ -5,15 +5,15 @@
 import React, { useEffect, useRef } from 'react';
 
 import { clientServiceBundle } from '@dxos/client-protocol';
-import { type BundleResult } from '@dxos/functions/bundler';
+import { type BundleResult } from '@dxos/functions-runtime/bundler';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { baseSurface, mx } from '@dxos/react-ui-theme';
 import { createProtoRpcPeer } from '@dxos/rpc';
 import { createIFramePort } from '@dxos/rpc-tunnel';
+import { mx } from '@dxos/ui-theme';
 
-export type FrameContainerProps = {
+export type FramePanelProps = {
   containerUrl: string;
   result: BundleResult;
   debug?: boolean;
@@ -22,7 +22,7 @@ export type FrameContainerProps = {
 /**
  * IFrame container for the compiled script.
  */
-export const FrameContainer = ({ containerUrl, result, debug = true }: FrameContainerProps) => {
+export const FramePanel = ({ containerUrl, result, debug = true }: FramePanelProps) => {
   const client = useClient();
   const iframeRef = useRef<HTMLIFrameElement>(null);
   useEffect(() => {
@@ -49,7 +49,9 @@ export const FrameContainer = ({ containerUrl, result, debug = true }: FrameCont
   invariant(result.sourceHash, 'Source hash is required.');
   const sourceHash = Buffer.from(result.sourceHash).toString('hex');
   const src =
-    'bundle' in result ? `${containerUrl}?ts=${sourceHash}#code=${encodeURIComponent(result.bundle)}` : undefined;
+    'bundle' in result
+      ? `${containerUrl}?ts=${sourceHash}#code=${encodeURIComponent(new TextDecoder().decode(Object.values(result.bundle as any)[0] as Uint8Array))}`
+      : undefined;
 
   return (
     <>
@@ -59,8 +61,7 @@ export const FrameContainer = ({ containerUrl, result, debug = true }: FrameCont
         <div className='relative'>
           <div
             className={mx(
-              baseSurface,
-              'flex absolute right-2 bottom-2 w-[30rem] h-[200px] ring rounded',
+              'flex absolute right-2 bottom-2 w-[30rem] h-[200px] bg-base-surface ring rounded-sm',
               'z-20 overflow-x-hidden overflow-y-auto',
             )}
           >

package/src/components/{FrameContainer → FramePanel}/index.ts

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