@dxos/plugin-assistant 0.8.4-main.c1de068 → 0.8.4-main.c4373fc

package/src/stories/QueryEditor.stories.tsx

@@ -0,0 +1,114 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { Obj, TagInfo, type TagMap } from '@dxos/echo';
+import { QueryBuilder } from '@dxos/echo-query';
+import { D3ForceGraph, useGraphModel } from '@dxos/plugin-explorer';
+import { faker } from '@dxos/random';
+import { Filter, useSpaces } from '@dxos/react-client/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/react-ui/testing';
+import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';
+import { DataType } from '@dxos/schema';
+import { type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
+import { render } from '@dxos/storybook-utils';
+
+import { translations } from '../translations';
+
+faker.seed(1);
+const generator = faker as any as ValueGenerator;
+
+const DefaultStory = ({ value: valueParam }: QueryEditorProps) => {
+  const [query, setQuery] = useState(valueParam);
+  const [space] = useSpaces();
+  const builder = useMemo(() => new QueryBuilder(), []);
+  const [filter, setFilter] = useState<Filter.Any>(Filter.everything());
+  const objects = useQuery(space, filter).sort(Obj.sort(Obj.sortByTypename, Obj.sortByLabel));
+  const model = useGraphModel(space, filter);
+
+  useEffect(() => {
+    if (query) {
+      const filter = builder.build(query);
+      setFilter(filter ?? Filter.everything());
+    } else {
+      setFilter(Filter.everything());
+    }
+  }, [builder, query]);
+
+  return (
+    <div role='none' className='grid grid-cols-2 grow divide-x divide-subduedSeparator overflow-hidden'>
+      <div className='flex flex-col overflow-hidden'>
+        <QueryEditor
+          classNames='p-2 is-full border-b border-subduedSeparator'
+          space={space}
+          value={query}
+          onChange={setQuery}
+        />
+        <div className='bs-full overflow-y-auto'>
+          {objects.map((object) => (
+            <div
+              key={object.id}
+              className='grid grid-cols-3 gap-2 p-2 border-b border-subduedSeparator overflow-hidden'
+            >
+              <span className='truncate text-sm font-mono'>{object.id}</span>
+              <span className='truncate text-sm font-mono'>{Obj.getTypename(object)}</span>
+              <span className='truncate'>{Obj.getLabel(object)}</span>
+            </div>
+          ))}
+        </div>
+        <div className='p-2 text-right text-infoText text-xs'>{objects.length}</div>
+      </div>
+      <D3ForceGraph model={model} />
+    </div>
+  );
+};
+
+const tags: TagMap = {
+  ['tag_1' as const]: TagInfo.make({ label: 'Red' }),
+  ['tag_2' as const]: TagInfo.make({ label: 'Green' }),
+  ['tag_3' as const]: TagInfo.make({ label: 'Blue' }),
+};
+
+const meta: Meta<typeof QueryEditor> = {
+  title: 'plugins/plugin-assistant/QueryEditor',
+  component: QueryEditor,
+  render: render(DefaultStory),
+  decorators: [
+    withTheme,
+    withClientProvider({
+      types: [DataType.Organization, DataType.Person, DataType.Project, DataType.Employer],
+      createIdentity: true,
+      onCreateIdentity: async ({ client }) => {
+        const space = client.spaces.default;
+        const createObjects = createObjectFactory(space.db, generator);
+        const objects = await createObjects([
+          { type: DataType.Organization, count: 30 },
+          { type: DataType.Project, count: 20 },
+          { type: DataType.Person, count: 50 },
+        ]);
+        objects.forEach((obj) => {
+          Obj.getMeta(obj).tags = faker.helpers.uniqueArray(Object.keys(tags), faker.number.int(3));
+        });
+      },
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: '(type:dxos.org/type/Person OR type:dxos.org/type/Organization)',
+  },
+};

package/src/stories/components/BlueprintContainer.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Blueprint } from '@dxos/blueprints';
+import { Filter, Obj } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { Toolbar, useTranslation } from '@dxos/react-ui';
+import { descriptionMessage, mx } from '@dxos/react-ui-theme';
+
+import { TemplateEditor } from '../../components';
+import { meta } from '../../meta';
+
+import { type ComponentProps } from './types';
+
+export const BlueprintContainer = ({ space }: ComponentProps) => {
+  const [blueprint] = useQuery(space, Filter.type(Blueprint.Blueprint));
+  const { t } = useTranslation(meta.id);
+
+  return !blueprint?.instructions ? (
+    <p className={mx(descriptionMessage, 'm-trimLg')}>{t('no blueprint message')}</p>
+  ) : (
+    <div className='flex flex-col h-full'>
+      <Toolbar.Root classNames='density-coarse border-b border-subduedSeparator'>
+        <h2>{Obj.getLabel(blueprint)}</h2>
+        <div className='flex-1' />
+        <Toolbar.IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' />
+      </Toolbar.Root>
+      <TemplateEditor id={blueprint.id} template={blueprint.instructions} />
+    </div>
+  );
+};

package/src/stories/components/ChatContainer.tsx

@@ -0,0 +1,74 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Filter } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { IconButton, Popover } from '@dxos/react-ui';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { Chat, Toolbar } from '../../components';
+import { useBlueprintRegistry, useChatProcessor, useChatServices } from '../../hooks';
+import { useOnline, usePresets } from '../../hooks';
+import { Assistant } from '../../types';
+
+import { ExecutionGraphContainer } from './ExecutionGraphContainer';
+import { type ComponentProps } from './types';
+
+export const ChatContainer = ({ space, onEvent }: ComponentProps) => {
+  const [online, setOnline] = useOnline();
+  const { preset, ...chatProps } = usePresets(online);
+
+  const chats = useQuery(space, Filter.type(Assistant.Chat));
+  const chat = chats.at(-1);
+
+  const blueprintRegistry = useBlueprintRegistry();
+  const services = useChatServices({ space, chat });
+  const processor = useChatProcessor({ chat, preset, services, blueprintRegistry });
+
+  const handleUpdateName = useCallback(() => {
+    if (chat) {
+      void processor?.updateName(chat);
+    }
+  }, [processor, chat]);
+
+  return !chat || !processor ? null : (
+    <StackItem.Content toolbar>
+      <div role='none' className='flex items-center gap-2 pie-2'>
+        <Toolbar classNames='is-min grow' chat={chat} onReset={() => onEvent?.('reset')} />
+        <Popover.Root>
+          <Popover.Trigger asChild>
+            <IconButton icon='ph--sort-ascending--regular' label='Logs' variant='ghost' />
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Content>
+              <ExecutionGraphContainer space={space} />
+              <Popover.Arrow />
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
+        <div className='truncate text-subdued'>{chat.name ?? 'no name'}</div>
+        <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Update name' onClick={handleUpdateName} />
+      </div>
+
+      <div role='none' className='relative'>
+        <Chat.Root chat={chat} processor={processor} classNames='absolute inset-0'>
+          <Chat.Thread />
+          {/* <ChatProgress chat={chat} /> */}
+          <div className='flex justify-center p-4'>
+            <Chat.Prompt
+              {...chatProps}
+              outline
+              classNames='max-is-prose'
+              preset={preset?.id}
+              online={online}
+              onOnlineChange={setOnline}
+            />
+          </div>
+        </Chat.Root>
+      </div>
+    </StackItem.Content>
+  );
+};

package/src/stories/components/ChessContainer.tsx

@@ -0,0 +1,17 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type FC } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { Filter } from '@dxos/echo';
+import { Chess } from '@dxos/plugin-chess';
+import { useQuery } from '@dxos/react-client/echo';
+
+import type { ComponentProps } from './types';
+
+export const ChessContainer: FC<ComponentProps> = ({ space }) => {
+  const chess = useQuery(space, Filter.type(Chess.Game));
+  return <Surface role='section' limit={1} data={{ subject: chess.at(-1) }} />;
+};

package/src/stories/components/CommentsContainer.tsx

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { Filter, useQuery } from '@dxos/react-client/echo';
+
+import { useContextBinder } from '../../hooks';
+import { Assistant } from '../../types';
+
+import { type ComponentProps } from './types';
+
+export const CommentsContainer = ({ space }: ComponentProps) => {
+  const chats = useQuery(space, Filter.type(Assistant.Chat));
+  const binder = useContextBinder(chats.at(-1));
+  const object = binder?.objects.value[0]?.target;
+  const data = useMemo(() => ({ subject: 'comments', companionTo: object }), [object]);
+  if (!object) {
+    return null;
+  }
+
+  return <Surface role='article' data={data} />;
+};

package/src/stories/components/DebugCard.tsx

@@ -0,0 +1,61 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Obj, type Relation } from '@dxos/echo';
+import { type ObjectId } from '@dxos/keys';
+
+interface DebugCardProps {
+  obj: Obj.Any | Relation.Any;
+}
+
+export const DebugCard = ({ obj }: DebugCardProps) => {
+  return (
+    <div className='border border-separator rounded-lg p-4 bg-surface'>
+      <div className='flex items-center justify-between mb-2'>
+        <h3 className='font-medium text-lg'>{Obj.getLabel(obj)}</h3>
+        <p className='flex gap-2 items-center'>
+          <span className='text-sm font-mono dx-text-hue' data-hue={colors[insecureIdHash(obj.id, colors.length)]}>
+            #{obj.id.slice(-6)}
+          </span>
+          <span className='text-sm text-description bg-neutral-800 px-2 py-1 rounded'>{Obj.getTypename(obj)}</span>
+        </p>
+      </div>
+      <details className='group'>
+        <summary className='cursor-pointer text-sm text-primary hover:text-primaryHover'>View JSON</summary>
+        <pre className='mt-2 text-xs p-3 rounded overflow-x-auto'>{JSON.stringify(obj, null, 2)}</pre>
+      </details>
+    </div>
+  );
+};
+
+const insecureIdHash = (id: ObjectId, modulo: number) => {
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) {
+    const num = id.charCodeAt(i);
+    hash = (hash ^ num) | 0;
+  }
+  return Math.abs(hash) % modulo;
+};
+
+const colors = [
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink',
+  'rose',
+];

package/src/stories/components/ExecutionGraphContainer.tsx

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Filter } from '@dxos/echo';
+import { Obj } from '@dxos/echo';
+import { InvocationTraceStartEvent } from '@dxos/functions';
+import { type Queue, useQuery, useQueue } from '@dxos/react-client/echo';
+import { Timeline, useExecutionGraph } from '@dxos/react-ui-components';
+
+import { Assistant } from '../../types';
+
+import { type ComponentProps } from './types';
+
+export const ExecutionGraphContainer = ({ space, traceQueue }: ComponentProps & { traceQueue?: Queue }) => {
+  const chats = useQuery(space, Filter.type(Assistant.Chat));
+  const invocations =
+    useQueue(space.properties?.invocationTraceQueue?.dxn)?.objects.filter(Obj.instanceOf(InvocationTraceStartEvent)) ??
+    [];
+  const queue = traceQueue ?? invocations?.at(-1)?.invocationTraceQueue?.target ?? chats.at(-1)?.traceQueue?.target;
+  const { branches, commits } = useExecutionGraph(queue);
+
+  return (
+    <div className='flex flex-col h-full'>
+      <Timeline branches={branches} commits={commits} />
+    </div>
+  );
+};

package/src/stories/components/GraphContainer.tsx

@@ -0,0 +1,106 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Match from 'effect/Match';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { ResearchGraph } from '@dxos/assistant-testing';
+import { Filter, Query } from '@dxos/echo';
+import { QueryBuilder } from '@dxos/echo-query';
+import { D3ForceGraph, useGraphModel } from '@dxos/plugin-explorer';
+import { useQuery } from '@dxos/react-client/echo';
+import { IconButton, Toolbar } from '@dxos/react-ui';
+import { type ChatEditorProps } from '@dxos/react-ui-chat';
+import { type EditorController, QueryEditor } from '@dxos/react-ui-components';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { mx } from '@dxos/react-ui-theme';
+
+import { useFlush } from '../../hooks';
+
+import { type ComponentProps } from './types';
+
+export const GraphContainer = ({ space }: ComponentProps) => {
+  const [filter, setFilter] = useState<Filter.Any>();
+  const [open, setOpen] = useState(false);
+
+  const [researchGraph] = useQuery(space, Query.type(ResearchGraph));
+  const queue = researchGraph?.queue.target;
+
+  // TODO(burdon): Clean-up API.
+  const model = useGraphModel(space, undefined, undefined, queue);
+  useEffect(() => {
+    model?.setFilter(filter ?? Filter.everything());
+  }, [model, filter]);
+
+  const parser = useMemo(() => new QueryBuilder(), []);
+  const handleSubmit = useCallback<NonNullable<ChatEditorProps['onSubmit']>>(
+    (text) => {
+      // TODO(burdon): Get AST from filter?
+      const filter = parser.build(text);
+      if (filter) {
+        setFilter(filter);
+        setOpen(true);
+      }
+    },
+    [space, parser],
+  );
+
+  return (
+    <div className={mx('relative bs-full grid', open && 'grid-rows-[min-content_1fr]')}>
+      <SearchBar space={space} onSubmit={handleSubmit} />
+      <D3ForceGraph classNames='min-bs-[50vh]' model={model} />
+
+      {/* TODO(burdon): Create component with context state for story. */}
+      {(open && (
+        <div className='absolute left-2 right-2 bottom-2 h-[8rem] flex overflow-hidden bg-baseSurface border border-subduedSeparator'>
+          <SyntaxHighlighter language='json' classNames='text-sm'>
+            {JSON.stringify({ filter }, null, 2)}
+          </SyntaxHighlighter>
+          <div className='absolute bottom-1 right-1'>
+            <IconButton variant='ghost' icon='ph--x--regular' iconOnly label='Close' onClick={() => setOpen(false)} />
+          </div>
+        </div>
+      )) || (
+        <div className='absolute bottom-3 right-3'>
+          <IconButton
+            variant='ghost'
+            icon='ph--arrow-line-up--regular'
+            iconOnly
+            label='Open'
+            onClick={() => setOpen(true)}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const SearchBar = ({ space, onSubmit }: ComponentProps & Pick<ChatEditorProps, 'onSubmit'>) => {
+  const { state: flushState, handleFlush } = useFlush(space);
+  const editorRef = useRef<EditorController>(null);
+
+  return (
+    <Toolbar.Root classNames='density-coarse border-b border-subduedSeparator'>
+      <QueryEditor classNames='p-2 is-full border-b border-subduedSeparator' space={space} onChange={onSubmit} />
+      <Toolbar.IconButton
+        icon='ph--magnifying-glass--regular'
+        iconOnly
+        label='Search'
+        onClick={() => onSubmit?.(editorRef.current?.view?.state.doc.toString() ?? '')}
+      />
+      <Toolbar.IconButton
+        disabled={flushState === 'flushing'}
+        icon={Match.value(flushState).pipe(
+          Match.when('idle', () => 'ph--floppy-disk--regular'),
+          Match.when('flushing', () => 'ph--spinner--regular'),
+          Match.when('flushed', () => 'ph--check--regular'),
+          Match.exhaustive,
+        )}
+        iconOnly
+        label='flush'
+        onClick={handleFlush}
+      />
+    </Toolbar.Root>
+  );
+};

package/src/stories/components/InvocationsContainer.tsx

@@ -0,0 +1,17 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { InvocationTraceContainer } from '@dxos/devtools';
+
+import type { ComponentProps } from './types';
+
+export const InvocationsContainer = ({ space }: ComponentProps) => {
+  return (
+    <div className='flex bs-full min-bs-[20rem] items-center justify-center'>
+      <InvocationTraceContainer space={space} detailAxis='block' />
+    </div>
+  );
+};

package/src/stories/components/MessageContainer.tsx

@@ -0,0 +1,22 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Surface, useCapability } from '@dxos/app-framework';
+import { Filter } from '@dxos/echo';
+import { InboxCapabilities } from '@dxos/plugin-inbox';
+import { Mailbox } from '@dxos/plugin-inbox/types';
+import { fullyQualifiedId, useQuery } from '@dxos/react-client/echo';
+
+import { type ComponentProps } from './types';
+
+export const MessageContainer = ({ space }: ComponentProps) => {
+  const [mailbox] = useQuery(space, Filter.type(Mailbox.Mailbox));
+  const state = useCapability(InboxCapabilities.MailboxState);
+  const message = mailbox && state[fullyQualifiedId(mailbox)];
+  const data = useMemo(() => ({ subject: message ?? 'message', companionTo: mailbox }), [message, mailbox]);
+
+  return <Surface role='section' data={data} limit={1} />;
+};

package/src/stories/components/ProjectContainer.tsx

@@ -0,0 +1,17 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type FC } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { Filter } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { DataType } from '@dxos/schema';
+
+import type { ComponentProps } from './types';
+
+export const ProjectContainer: FC<ComponentProps> = ({ space }) => {
+  const projects = useQuery(space, Filter.type(DataType.Project));
+  return <Surface role='article' limit={1} data={{ subject: projects.at(-1) }} />;
+};

package/src/stories/components/PromptContainer.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Predicate from 'effect/Predicate';
+import React from 'react';
+
+import { Prompt } from '@dxos/blueprints';
+import { Filter } from '@dxos/echo';
+import { type Space, createDocAccessor, useQuery } from '@dxos/react-client/echo';
+import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import {
+  createBasicExtensions,
+  createDataExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+import { mx } from '@dxos/react-ui-theme';
+
+export const PromptContainer = ({ space }: { space: Space }) => {
+  const [prompt] = useQuery(space, Filter.type(Prompt.Prompt));
+  if (!prompt) {
+    return null;
+  }
+  return (
+    <div style={{ minHeight: '300px' }}>
+      <PromptEditor prompt={prompt} />
+    </div>
+  );
+};
+
+const PromptEditor = ({ prompt, classNames }: ThemedClassName<{ prompt: Prompt.Prompt }>) => {
+  const { themeMode } = useThemeContext();
+  const { parentRef } = useTextEditor(() => {
+    return {
+      initialValue: prompt.instructions ?? '',
+      extensions: [
+        createDataExtensions({ id: prompt.id, text: createDocAccessor(prompt, ['instructions']) }),
+        createBasicExtensions({
+          bracketMatching: false,
+          lineNumbers: true,
+          lineWrapping: true,
+        }),
+        createThemeExtensions({ themeMode }),
+        createMarkdownExtensions(),
+      ].filter(Predicate.isTruthy),
+    };
+  }, [themeMode, prompt]);
+
+  return <div ref={parentRef} className={mx('bs-full overflow-hidden', classNames)} />;
+};

package/src/stories/components/ResearchInputStack.tsx

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Filter } from '@dxos/echo';
+import { useQuery, useQueue } from '@dxos/react-client/echo';
+
+import { ResearchInputQueue } from '../testing';
+
+import { DebugCard } from './DebugCard';
+import type { ComponentProps } from './types';
+
+export const ResearchInputStack = ({ space }: ComponentProps) => {
+  const [researchInput] = useQuery(space, Filter.type(ResearchInputQueue));
+  const queue = useQueue(researchInput?.queue.dxn);
+
+  return (
+    <div className='p-4 overflow-y-auto h-full'>
+      <ul className='space-y-4 '>
+        {queue?.objects.map((object) => (
+          <li key={object.id}>
+            <DebugCard obj={object} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/stories/components/ResearchOutputStack.tsx

@@ -0,0 +1,29 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { ResearchGraph } from '@dxos/assistant-testing';
+import { Filter } from '@dxos/echo';
+import { useQuery, useQueue } from '@dxos/react-client/echo';
+
+import type { ComponentProps } from './types';
+
+export const ResearchOutputStack = ({ space }: ComponentProps) => {
+  const [researchGraph] = useQuery(space, Filter.type(ResearchGraph));
+  const queue = useQueue(researchGraph?.queue.dxn);
+
+  return (
+    <div className='p-4 overflow-y-auto h-full'>
+      <ul className='space-y-4 '>
+        {queue?.objects.map((object) => (
+          <li key={object.id}>
+            <Surface role='card' data={{ subject: object }} limit={1} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/stories/components/ScriptContainer.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Capabilities, useCapability } from '@dxos/app-framework';
+import { Filter } from '@dxos/echo';
+import { ScriptType } from '@dxos/functions';
+import { ScriptCapabilities, ScriptContainer as ScriptContainerComponent, meta } from '@dxos/plugin-script';
+import { type ScriptSettings } from '@dxos/plugin-script/types';
+import { useQuery } from '@dxos/react-client/echo';
+
+import { type ComponentProps } from './types';
+
+export const ScriptContainer = ({ space }: ComponentProps) => {
+  const [script] = useQuery(space, Filter.type(ScriptType));
+  const compiler = useCapability(ScriptCapabilities.Compiler);
+  const settings = useCapability(Capabilities.SettingsStore).getStore<ScriptSettings>(meta.id)?.value;
+  if (!script) {
+    return null;
+  }
+  return (
+    <div className='flex is-full bs-[70vh] min-bs-[20rem] overflow-auto'>
+      <ScriptContainerComponent role={'section'} script={script} settings={settings} env={compiler.environment} />
+    </div>
+  );
+};