@marimo-team/frontend 0.23.1-dev8 → 0.23.1

package/src/core/islands/worker-factory.ts

@@ -0,0 +1,86 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { getMarimoVersion } from "../meta/globals";
+import workerUrl from "./worker/worker.tsx?worker&url";
+
+/**
+ * Interface for creating Web Workers for islands
+ */
+export interface WorkerFactory {
+  /**
+   * Creates a new worker instance
+   */
+  create(): Worker;
+}
+
+/**
+ * Configuration for the default worker factory
+ */
+export interface DefaultWorkerFactoryConfig {
+  /**
+   * The URL to the worker script
+   * Defaults to the bundled worker
+   */
+  workerUrl?: string;
+
+  /**
+   * The name to give the worker (shows in DevTools)
+   * Defaults to the marimo version
+   */
+  workerName?: string;
+}
+
+/**
+ * Default implementation of WorkerFactory that creates Pyodide workers
+ * for islands mode.
+ */
+export class DefaultWorkerFactory implements WorkerFactory {
+  private readonly url: string;
+  private readonly name: string;
+
+  constructor(config: DefaultWorkerFactoryConfig = {}) {
+    this.url = config.workerUrl || this.getDefaultWorkerUrl();
+    this.name = config.workerName || getMarimoVersion();
+  }
+
+  /**
+   * Creates a new Pyodide worker
+   */
+  create(): Worker {
+    const js = `import ${JSON.stringify(new URL(this.url, import.meta.url))}`;
+    const blob = new Blob([js], { type: "application/javascript" });
+    const objURL = URL.createObjectURL(blob);
+
+    const worker = new Worker(objURL, {
+      type: "module",
+      /* @vite-ignore */
+      name: this.name,
+    });
+
+    // Blob URL can be revoked once the worker has loaded the script
+    URL.revokeObjectURL(objURL);
+
+    return worker;
+  }
+
+  /**
+   * Gets the default worker URL based on environment
+   */
+  private getDefaultWorkerUrl(): string {
+    const url = import.meta.env.DEV
+      ? workerUrl
+      : makeRelativeWorkerUrl(workerUrl);
+    return url;
+  }
+}
+
+/**
+ * Makes worker URLs relative for production builds
+ */
+function makeRelativeWorkerUrl(url: string): string {
+  return url.startsWith("./")
+    ? url
+    : url.startsWith("/")
+      ? `.${url}`
+      : `./${url}`;
+}

package/src/plugins/core/RenderHTML.tsx

@@ -164,11 +164,20 @@ const wrapDocHoverTargets: TransformFn = (
 // Wrap elements with data-tooltip attribute in a Tooltip component.
 // This renders the tooltip in a portal (top layer), fixing clipping inside
 // containers with overflow:hidden (e.g. grid cells).
+//
+// Marimo custom elements (marimo-button, etc.) are skipped — they handle
+// tooltips via the plugin system inside their Shadow DOM. Wrapping them here
+// would create a duplicate tooltip with incorrect positioning and
+// un-decoded JSON content (the data-* value is JSON-encoded by the backend).
 const wrapTooltipTargets: TransformFn = (
   reactNode: ReactNode,
   domNode: DOMNode,
 ): JSX.Element | undefined => {
   if (domNode instanceof Element && domNode.attribs?.["data-tooltip"]) {
+    const tagName = domNode.name?.toLowerCase() ?? "";
+    if (tagName.startsWith("marimo-")) {
+      return undefined;
+    }
     const tooltipContent = domNode.attribs["data-tooltip"];
     return (
       <Tooltip content={tooltipContent}>{reactNode as JSX.Element}</Tooltip>

package/src/plugins/core/__test__/RenderHTML.test.ts

@@ -240,6 +240,33 @@ describe("wrapTooltipTargets", () => {
       </p>
     `);
   });
+
+  test("data-tooltip on marimo custom elements is not wrapped", () => {
+    const html =
+      '<marimo-button data-tooltip="&quot;Run clicky&quot;">click</marimo-button>';
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <marimo-button
+        data-tooltip=""Run clicky""
+      >
+        click
+      </marimo-button>
+    `);
+  });
+
+  test("data-tooltip on non-marimo custom elements is still wrapped", () => {
+    const html = '<my-widget data-tooltip="info">content</my-widget>';
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <Tooltip
+        content="info"
+      >
+        <my-widget
+          data-tooltip="info"
+        >
+          content
+        </my-widget>
+      </Tooltip>
+    `);
+  });
 });
 
 describe("parseHtml with < nad >", () => {

package/src/plugins/core/__test__/trusted-url.test.ts

@@ -0,0 +1,48 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import { isTrustedVirtualFileUrl } from "../trusted-url";
+
+describe("isTrustedVirtualFileUrl", () => {
+  it.each([
+    "./@file/123-mpl.js",
+    "./@file/456-mpl.css",
+    "@file/789-bokeh.js",
+    "/@file/0-empty.txt",
+    "./@file/1234-name.with.dots.js",
+  ])("accepts virtual file path %s", (url) => {
+    expect(isTrustedVirtualFileUrl(url)).toBe(true);
+  });
+
+  it.each([
+    // Attack vector from the vulnerability report
+    "http://127.0.0.1:8820/poc.js",
+    "https://evil.example.com/x.js",
+    // Protocol-relative → takes attacker's origin
+    "//evil.example.com/x.js",
+    // Dangerous schemes
+    "javascript:alert(1)",
+    "data:text/javascript;base64,YWxlcnQoMSk=",
+    "file:///etc/passwd",
+    "blob:http://127.0.0.1/abc",
+    // Almost-but-not virtual file paths
+    "./evil.js",
+    "../@file/x.js",
+    "./malicious/@file/x.js",
+    "@file",
+    "@files/x.js",
+    // Query/fragment smuggling
+    "./@file/x.js?redirect=http://evil.com",
+    "./@file/x.js#http://evil.com",
+    // Empty and non-string
+    "",
+  ])("rejects %s", (url) => {
+    expect(isTrustedVirtualFileUrl(url)).toBe(false);
+  });
+
+  it("rejects non-string input", () => {
+    expect(isTrustedVirtualFileUrl(null)).toBe(false);
+    expect(isTrustedVirtualFileUrl(undefined)).toBe(false);
+    expect(isTrustedVirtualFileUrl(42)).toBe(false);
+    expect(isTrustedVirtualFileUrl({})).toBe(false);
+  });
+});

package/src/plugins/core/registerReactComponent.tsx

@@ -23,6 +23,7 @@ import React, {
 import ReactDOM, { type Root } from "react-dom/client";
 import useEvent from "react-use-event-hook";
 import { type ZodSchema, z } from "zod";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { notebookAtom } from "@/core/cells/cells.ts";
 import { HTMLCellId } from "@/core/cells/ids.ts";
 import { isUninstantiated } from "@/core/cells/utils";
@@ -250,14 +251,16 @@ function PluginSlotInternal<T>(
     <StyleNamespace>
       <div className={`contents ${theme}`}>
         <Suspense fallback={<div />}>
-          {plugin.render({
-            setValue: setValueAndSendInput,
-            value,
-            data: parsedResult.data,
-            children: childNodes,
-            host: hostElement,
-            functions: functionMethods,
-          })}
+          <TooltipProvider>
+            {plugin.render({
+              setValue: setValueAndSendInput,
+              value,
+              data: parsedResult.data,
+              children: childNodes,
+              host: hostElement,
+              functions: functionMethods,
+            })}
+          </TooltipProvider>
         </Suspense>
       </div>
     </StyleNamespace>

package/src/plugins/core/trusted-url.ts

@@ -0,0 +1,20 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/**
+ * Whether a URL can be trusted to point at a marimo-served virtual file.
+ *
+ * Plugins that load remote scripts or stylesheets (e.g. MplInteractive, Panel)
+ * must call this before turning a plugin-supplied URL into a `<script src>` or
+ * `<link href>`. The backend always serializes these URLs as virtual file
+ * paths of the form `./@file/<byte_length>-<filename>` (see
+ * `VirtualFile.create_and_register`). Accepting anything else would let a
+ * maliciously crafted `<marimo-*>` element embedded in markdown load
+ * attacker-controlled JavaScript at same origin, since the HTML sanitizer
+ * lets arbitrary marimo custom elements and attributes through.
+ */
+export function isTrustedVirtualFileUrl(url: unknown): url is string {
+  if (typeof url !== "string" || url.length === 0) {
+    return false;
+  }
+  return /^(\.?\/)?@file\/[^?#]+$/.test(url);
+}

package/src/plugins/impl/ButtonPlugin.tsx

@@ -3,7 +3,7 @@
 import type { JSX } from "react";
 import { z } from "zod";
 import { KeyboardHotkeys } from "@/components/shortcuts/renderShortcut";
-import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
+import { Tooltip } from "@/components/ui/tooltip";
 import { cn } from "@/utils/cn";
 import { Button } from "../../components/ui/button";
 import { renderHTML } from "../core/RenderHTML";
@@ -69,11 +69,9 @@ export class ButtonPlugin implements IPlugin<number, Data> {
 
     if (tooltipContent) {
       return (
-        <TooltipProvider>
-          <Tooltip content={tooltipContent} delayDuration={200}>
-            {button}
-          </Tooltip>
-        </TooltipProvider>
+        <Tooltip content={tooltipContent} delayDuration={200}>
+          {button}
+        </Tooltip>
       );
     }
 

package/src/plugins/impl/CodeEditorPlugin.tsx

@@ -4,7 +4,6 @@ import { EditorView } from "@codemirror/view";
 import { type JSX, useEffect, useMemo, useState } from "react";
 import useEvent from "react-use-event-hook";
 import { z } from "zod";
-import { TooltipProvider } from "@/components/ui/tooltip";
 import { useDebounceControlledState } from "@/hooks/useDebounce";
 import { type Theme, useTheme } from "@/theme/useTheme";
 import type { IPlugin, IPluginProps, Setter } from "../types";
@@ -98,22 +97,20 @@ const CodeEditorComponent = (props: CodeEditorComponentProps) => {
   }, [props.debounce, onBlur]);
 
   return (
-    <TooltipProvider>
-      <Labeled label={props.label} align="top" fullWidth={true}>
-        <LazyAnyLanguageCodeMirror
-          className={`cm *:outline-hidden border rounded overflow-hidden ${finalTheme}`}
-          theme={finalTheme === "dark" ? "dark" : "light"}
-          minHeight={minHeight}
-          maxHeight={maxHeight}
-          placeholder={props.placeholder}
-          editable={!props.disabled}
-          value={localValue}
-          language={props.language}
-          onChange={handleChange}
-          showCopyButton={props.showCopyButton}
-          extensions={extensions}
-        />
-      </Labeled>
-    </TooltipProvider>
+    <Labeled label={props.label} align="top" fullWidth={true}>
+      <LazyAnyLanguageCodeMirror
+        className={`cm *:outline-hidden border rounded overflow-hidden ${finalTheme}`}
+        theme={finalTheme === "dark" ? "dark" : "light"}
+        minHeight={minHeight}
+        maxHeight={maxHeight}
+        placeholder={props.placeholder}
+        editable={!props.disabled}
+        value={localValue}
+        language={props.language}
+        onChange={handleChange}
+        showCopyButton={props.showCopyButton}
+        extensions={extensions}
+      />
+    </Labeled>
   );
 };

package/src/plugins/impl/DataEditorPlugin.tsx

@@ -1,10 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import glideCss from "@glideapps/glide-data-grid/dist/index.css?inline";
-import { Tooltip } from "radix-ui";
-
-const TooltipProvider = Tooltip.Provider;
-
 import React, { useState } from "react";
 import { z } from "zod";
 import { inferFieldTypes } from "@/components/data-table/columns";
@@ -63,16 +59,14 @@ export const DataEditorPlugin = createPlugin<Edits>("marimo-data-editor", {
   .withFunctions({})
   .renderer((props) => {
     return (
-      <TooltipProvider>
-        <LoadingDataEditor
-          data={props.data.data}
-          fieldTypes={props.data.fieldTypes}
-          edits={props.value}
-          onEdits={props.setValue}
-          host={props.host}
-          editableColumns={props.data.editableColumns}
-        />
-      </TooltipProvider>
+      <LoadingDataEditor
+        data={props.data.data}
+        fieldTypes={props.data.fieldTypes}
+        edits={props.value}
+        onEdits={props.setValue}
+        host={props.host}
+        editableColumns={props.data.editableColumns}
+      />
     );
   });
 

package/src/plugins/impl/DataTablePlugin.tsx

@@ -1,9 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { Provider as SlotzProvider } from "@marimo-team/react-slotz";
-import { Tooltip } from "radix-ui";
-
-const TooltipProvider = Tooltip.Provider;
 
 import type {
   ColumnFiltersState,
@@ -71,6 +68,7 @@ import {
 import { slotsController } from "@/core/slots/slots";
 import { store } from "@/core/state/jotai";
 import { isStaticNotebook } from "@/core/static/static-state";
+import { isIslands } from "@/core/islands/utils";
 import { isInVscodeExtension } from "@/core/vscode/is-in-vscode";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
@@ -1009,6 +1007,7 @@ const DataTableComponent = ({
   const canShowColumnExplorer = showColumnExplorer && !!preview_column;
 
   const isInVscode = isInVscodeExtension();
+  const isIslandsMode = isIslands();
 
   return (
     <>
@@ -1094,13 +1093,15 @@ const DataTableComponent = ({
             onCellSelectionChange={handleCellSelectionChange}
             getRowIds={get_row_ids}
             toggleDisplayHeader={toggleDisplayHeader}
-            showChartBuilder={showChartBuilder}
+            showChartBuilder={showChartBuilder && !isIslandsMode}
             isChartBuilderOpen={isChartBuilderOpen}
             showPageSizeSelector={showPageSizeSelector}
-            // Hidden in VSCode (for now) because we don't have a panel to show
+            // Hidden in VSCode and islands because there's no panel to show
             // the table explorer.
             showTableExplorer={
-              (showRowExplorer || canShowColumnExplorer) && !isInVscode
+              (showRowExplorer || canShowColumnExplorer) &&
+              !isInVscode &&
+              !isIslandsMode
             }
             togglePanel={togglePanel}
             isPanelOpen={isPanelOpen}
@@ -1123,9 +1124,7 @@ export const TableProviders: React.FC<{ children: React.ReactNode }> = ({
   return (
     <ErrorBoundary>
       <Provider store={store}>
-        <SlotzProvider controller={slotsController}>
-          <TooltipProvider>{children}</TooltipProvider>
-        </SlotzProvider>
+        <SlotzProvider controller={slotsController}>{children}</SlotzProvider>
       </Provider>
     </ErrorBoundary>
   );

package/src/plugins/impl/FileUploadPlugin.tsx

@@ -4,7 +4,7 @@ import { MousePointerSquareDashedIcon, Upload } from "lucide-react";
 import type { JSX } from "react";
 import { useDropzone } from "react-dropzone";
 import { z } from "zod";
-import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
+import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { cn } from "@/utils/cn";
 import { Logger } from "@/utils/Logger";
@@ -184,42 +184,40 @@ export const FileUpload = (props: FileUploadProps): JSX.Element => {
     //   link button to the hidden input element
     const label = props.label ?? "Upload";
     return (
-      <TooltipProvider>
-        <div className="flex flex-row items-center justify-start gap-2">
-          <button
-            data-testid="marimo-plugin-file-upload-button"
-            {...getRootProps({})}
-            className={buttonVariants({
-              variant: "secondary",
-              size: "xs",
-            })}
-          >
-            {renderHTML({ html: label })}
-            <Upload size={14} className="ml-2" />
-          </button>
-          <input {...getInputProps({})} type="file" />
-          {uploaded ? (
-            <>
-              <Tooltip content={uploadedFiles}>
-                <span className="text-xs text-muted-foreground">
-                  Uploaded{" "}
-                  <span className="underline cursor-pointer">
-                    {value.length} {value.length === 1 ? "file" : "files"}.
-                  </span>
+      <div className="flex flex-row items-center justify-start gap-2">
+        <button
+          data-testid="marimo-plugin-file-upload-button"
+          {...getRootProps({})}
+          className={buttonVariants({
+            variant: "secondary",
+            size: "xs",
+          })}
+        >
+          {renderHTML({ html: label })}
+          <Upload size={14} className="ml-2" />
+        </button>
+        <input {...getInputProps({})} type="file" />
+        {uploaded ? (
+          <>
+            <Tooltip content={uploadedFiles}>
+              <span className="text-xs text-muted-foreground">
+                Uploaded{" "}
+                <span className="underline cursor-pointer">
+                  {value.length} {value.length === 1 ? "file" : "files"}.
                 </span>
-              </Tooltip>
+              </span>
+            </Tooltip>
 
-              <button
-                className={cn("text-xs text-destructive hover:underline")}
-                onClick={() => setValue([])}
-                type="button"
-              >
-                Click to clear files.
-              </button>
-            </>
-          ) : null}
-        </div>
-      </TooltipProvider>
+            <button
+              className={cn("text-xs text-destructive hover:underline")}
+              onClick={() => setValue([])}
+              type="button"
+            >
+              Click to clear files.
+            </button>
+          </>
+        ) : null}
+      </div>
     );
   }
 
@@ -274,14 +272,12 @@ export const FileUpload = (props: FileUploadProps): JSX.Element => {
         {uploaded ? (
           <div className="flex flex-row gap-1">
             <div className="text-xs text-muted-foreground">
-              <TooltipProvider>
-                Uploaded{" "}
-                <Tooltip content={uploadedFiles}>
-                  <span className="underline cursor-pointer">
-                    {value.length} {value.length === 1 ? "file" : "files"}.
-                  </span>
-                </Tooltip>
-              </TooltipProvider>
+              Uploaded{" "}
+              <Tooltip content={uploadedFiles}>
+                <span className="underline cursor-pointer">
+                  {value.length} {value.length === 1 ? "file" : "files"}.
+                </span>
+              </Tooltip>
             </div>
             <span className="text-xs text-destructive hover:underline hover:cursor-pointer">
               <button

package/src/plugins/impl/FormPlugin.tsx

@@ -3,7 +3,7 @@
 import { Loader2Icon } from "lucide-react";
 import { type JSX, useEffect, useRef, useState } from "react";
 import { z } from "zod";
-import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
+import { Tooltip } from "@/components/ui/tooltip";
 import type { UIElementId } from "@/core/cells/ids";
 import {
   MarimoValueInputEvent,
@@ -72,11 +72,7 @@ export const FormPlugin = createPlugin("marimo-form")
       .output(z.string().nullish()),
   })
   .renderer(({ data, functions, ...rest }) => {
-    return (
-      <TooltipProvider>
-        <Form {...data} {...rest} {...functions} />
-      </TooltipProvider>
-    );
+    return <Form {...data} {...rest} {...functions} />;
   });
 
 export interface FormWrapperProps<T>

package/src/plugins/impl/anywidget/__tests__/widget-binding.test.ts

@@ -59,13 +59,39 @@ describe("WidgetDefRegistry", () => {
 
   it("should remove from cache on import failure so retry creates new promise", async () => {
     const promise1 = registry.getModule("http://localhost/a.js", "fail-hash");
-    // The import will fail in Node (http: scheme not supported)
+    // The URL is rejected by the trusted-URL validator.
     await expect(promise1).rejects.toThrow();
     // After failure, cache should be cleared, so next call creates a new promise
     const promise2 = registry.getModule("http://localhost/a.js", "fail-hash");
     expect(promise1).not.toBe(promise2);
     promise2.catch(() => undefined);
   });
+
+  describe("URL validation", () => {
+    it.each([
+      // Attack vector: raw <marimo-anywidget data-js-url=...> in markdown
+      "http://127.0.0.1:8820/poc.mjs",
+      "https://evil.example.com/widget.mjs",
+      "//evil.example.com/widget.mjs",
+      "javascript:alert(1)",
+      "data:text/javascript;base64,YWxlcnQoMSk=",
+      "./@file/x.js?redirect=http://evil.com",
+      "",
+    ])("rejects untrusted URL: %s", async (url) => {
+      await expect(registry.getModule(url, `hash-${url}`)).rejects.toThrow(
+        /untrusted/i,
+      );
+    });
+
+    it("accepts virtual file paths (fails later at import time)", async () => {
+      // The URL passes validation but the import still fails because this
+      // is a Node test environment with no server. We only assert that
+      // the rejection reason is NOT the "untrusted URL" refusal.
+      await expect(
+        registry.getModule("./@file/123-widget.js", "trusted-hash"),
+      ).rejects.not.toThrow(/untrusted/i);
+    });
+  });
 });
 
 describe("WidgetBinding", () => {

package/src/plugins/impl/anywidget/widget-binding.ts

@@ -5,6 +5,7 @@ import type { AnyWidget, Experimental } from "@anywidget/types";
 import { asRemoteURL } from "@/core/runtime/config";
 import { resolveVirtualFileURL } from "@/core/static/files";
 import { isStaticNotebook } from "@/core/static/static-state";
+import { isTrustedVirtualFileUrl } from "@/plugins/core/trusted-url";
 import { Logger } from "@/utils/Logger";
 import type { Model } from "./model";
 import type { ModelState, WidgetModelId } from "./types";
@@ -80,6 +81,18 @@ class WidgetDefRegistry {
   }
 
   async #doImport(jsUrl: string): Promise<any> {
+    // Only trust marimo virtual file paths. Accepting arbitrary URLs
+    // would let a raw `<marimo-anywidget data-js-url=...>` element
+    // embedded in a markdown cell dynamically import attacker-controlled
+    // JavaScript at same origin (the HTML sanitizer allows any marimo-*
+    // custom element with any attribute through to the plugin layer).
+    if (!isTrustedVirtualFileUrl(jsUrl)) {
+      throw new Error(
+        `Refusing to load anywidget module from untrusted URL: ${String(
+          jsUrl,
+        )}`,
+      );
+    }
     let url = asRemoteURL(jsUrl).toString();
     if (isStaticNotebook()) {
       url = resolveVirtualFileURL(url);

package/src/plugins/impl/chat/ChatPlugin.tsx

@@ -3,7 +3,6 @@
 import type { UIMessage } from "ai";
 import React, { Suspense } from "react";
 import { z } from "zod";
-import { TooltipProvider } from "@/components/ui/tooltip";
 import { createPlugin } from "@/plugins/core/builder";
 import { rpc } from "@/plugins/core/rpc";
 import { Arrays } from "@/utils/arrays";
@@ -73,23 +72,21 @@ export const ChatPlugin = createPlugin<{ messages: UIMessage[] }>(
       .output(z.unknown()),
   })
   .renderer((props) => (
-    <TooltipProvider>
-      <Suspense>
-        <LazyChatbot
-          prompts={props.data.prompts}
-          showConfigurationControls={props.data.showConfigurationControls}
-          maxHeight={props.data.maxHeight}
-          allowAttachments={props.data.allowAttachments}
-          disabled={props.data.disabled}
-          config={props.data.config}
-          get_chat_history={props.functions.get_chat_history}
-          delete_chat_history={props.functions.delete_chat_history}
-          delete_chat_message={props.functions.delete_chat_message}
-          send_prompt={props.functions.send_prompt}
-          value={props.value?.messages || Arrays.EMPTY}
-          setValue={(messages) => props.setValue({ messages })}
-          host={props.host}
-        />
-      </Suspense>
-    </TooltipProvider>
+    <Suspense>
+      <LazyChatbot
+        prompts={props.data.prompts}
+        showConfigurationControls={props.data.showConfigurationControls}
+        maxHeight={props.data.maxHeight}
+        allowAttachments={props.data.allowAttachments}
+        disabled={props.data.disabled}
+        config={props.data.config}
+        get_chat_history={props.functions.get_chat_history}
+        delete_chat_history={props.functions.delete_chat_history}
+        delete_chat_message={props.functions.delete_chat_message}
+        send_prompt={props.functions.send_prompt}
+        value={props.value?.messages || Arrays.EMPTY}
+        setValue={(messages) => props.setValue({ messages })}
+        host={props.host}
+      />
+    </Suspense>
   ));