@marimo-team/islands 0.25.1-dev3 → 0.25.1-dev31

package/src/components/editor/package-alert.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useAtomValue } from "jotai";
 import {
   BoxIcon,
   CheckIcon,
@@ -34,6 +35,7 @@ import {
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import type { PackageOperationStatus } from "@/core/kernel/messages";
 import { useRequestClient } from "@/core/network/requests";
+import { sandboxAtom } from "@/core/packages/sandbox-state";
 import { RESTART_REQUIRED_DESCRIPTION } from "@/core/packages/toast-components";
 import { isWasm } from "@/core/wasm/utils";
 import { usePackageMetadata } from "@/hooks/usePackageMetadata";
@@ -104,6 +106,7 @@ export const PackageAlert: React.FC = () => {
   const { packageAlert } = useAlerts();
   const { clearPackageAlert } = useAlertActions();
   const [userConfig] = useResolvedMarimoConfig();
+  const sandbox = useAtomValue(sandboxAtom);
   const [desiredPackageVersions, setDesiredPackageVersions] = useState<
     Record<string, string>
   >({});
@@ -132,8 +135,14 @@ export const PackageAlert: React.FC = () => {
     return null;
   }
 
+  const sandboxPackageManager =
+    packageAlert.source === "server" ? null : sandbox?.backend;
+  const packageManager =
+    sandboxPackageManager ?? userConfig.package_management.manager;
   const doesSupportVersioning =
-    userConfig.package_management.manager !== "pixi";
+    packageAlert.source === "server" ||
+    sandbox !== null ||
+    packageManager !== "pixi";
 
   if (isMissingPackageAlert(packageAlert)) {
     return (
@@ -207,7 +216,7 @@ export const PackageAlert: React.FC = () => {
               {packageAlert.isolated ? (
                 <>
                   <InstallPackagesButton
-                    manager={userConfig.package_management.manager}
+                    manager={packageManager}
                     packages={packageAlert.packages.map((pkg) => {
                       const parsed = parsePackageSpecifier(pkg);
                       const currentExtras =
@@ -219,10 +228,12 @@ export const PackageAlert: React.FC = () => {
                     source={packageAlert.source}
                   />
 
-                  {!isWasm() && (
+                  {!isWasm() && packageAlert.source !== "server" && (
                     <>
                       <span className="px-2 text-sm">with</span>{" "}
-                      <PackageManagerForm />
+                      <PackageManagerForm
+                        fixedManager={sandboxPackageManager ?? undefined}
+                      />
                     </>
                   )}
                 </>
@@ -449,7 +460,9 @@ const InstallPackagesButton = ({
   );
 };
 
-const PackageManagerForm: React.FC = () => {
+const PackageManagerForm: React.FC<{
+  fixedManager?: PackageManagerName;
+}> = ({ fixedManager }) => {
   const [config, setConfig] = useResolvedMarimoConfig();
   const { saveUserConfig } = useRequestClient();
 
@@ -490,8 +503,8 @@ const PackageManagerForm: React.FC = () => {
                   <NativeSelect
                     data-testid="install-package-manager-select"
                     onChange={(e) => field.onChange(e.target.value)}
-                    value={field.value}
-                    disabled={field.disabled}
+                    value={fixedManager ?? field.value}
+                    disabled={fixedManager !== undefined || field.disabled}
                     className="inline-flex mr-2"
                   >
                     {PackageManagerNames.map((option) => (

package/src/components/home/components.tsx

@@ -170,6 +170,7 @@ export const ResourceLinks: React.FC = () => {
             key={resource.title}
             href={resource.url}
             target="_blank"
+            rel="noreferrer"
             aria-label={`${resource.title}: ${resource.description}`}
             className="flex items-start gap-3 py-3 px-3 rounded-lg border hover:bg-accent/20 transition-colors shadow-xs"
           >

package/src/components/pages/run-page.tsx

@@ -50,6 +50,7 @@ const Watermark = () => {
       <a
         href={Constants.githubPage}
         target="_blank"
+        rel="noreferrer"
         className="text-sm text-(--grass-11) font-bold tracking-wide transition-colors bg-(--grass-4) hover:bg-(--grass-5) border-t border-l border-(--grass-8) px-3 py-1 rounded-tl-md flex items-center gap-2"
       >
         <span>made with marimo</span>

package/src/components/slides/__tests__/minimap-actions.test.tsx

@@ -46,21 +46,21 @@ beforeAll(() => {
     };
   }
   global.IntersectionObserver ??= class {
-    observe() {
+    public observe() {
       /* noop */
     }
-    unobserve() {
+    public unobserve() {
       /* noop */
     }
-    disconnect() {
+    public disconnect() {
       /* noop */
     }
-    takeRecords() {
+    public takeRecords() {
       return [];
     }
-    root = null;
-    rootMargin = "";
-    thresholds = [];
+    public root = null;
+    public rootMargin = "";
+    public thresholds = [];
   } as unknown as typeof IntersectionObserver;
 });
 

package/src/components/slides/__tests__/minimap.test.ts

@@ -42,28 +42,28 @@ describe("useVisibleCellIds", () => {
     mutationObserveSpy = vi.fn();
 
     global.IntersectionObserver = class MockIntersectionObserver {
-      constructor(
+      public constructor(
         callback: IntersectionObserverCallback,
         _options?: IntersectionObserverInit,
       ) {
         intersectionCallback = callback;
       }
-      observe = observeSpy;
-      unobserve = vi.fn();
-      disconnect = intersectionDisconnectSpy;
-      root = null;
-      rootMargin = "";
-      thresholds = [0];
-      takeRecords = vi.fn(() => []);
+      public observe = observeSpy;
+      public unobserve = vi.fn();
+      public disconnect = intersectionDisconnectSpy;
+      public root = null;
+      public rootMargin = "";
+      public thresholds = [0];
+      public takeRecords = vi.fn(() => []);
     } as unknown as typeof IntersectionObserver;
 
     global.MutationObserver = class MockMutationObserver {
-      constructor(callback: MutationCallback) {
+      public constructor(callback: MutationCallback) {
         mutationCallback = callback;
       }
-      observe = mutationObserveSpy;
-      disconnect = mutationDisconnectSpy;
-      takeRecords = vi.fn(() => []);
+      public observe = mutationObserveSpy;
+      public disconnect = mutationDisconnectSpy;
+      public takeRecords = vi.fn(() => []);
     } as unknown as typeof MutationObserver;
   });
 

package/src/components/slides/__tests__/slide-scroll-hint.test.tsx

@@ -76,12 +76,12 @@ describe("SlideScrollContainer", () => {
     vi.stubGlobal(
       "ResizeObserver",
       class MockResizeObserver {
-        callback: ResizeObserverCallback;
-        observe = vi.fn();
-        unobserve = vi.fn();
-        disconnect = vi.fn();
+        public callback: ResizeObserverCallback;
+        public observe = vi.fn();
+        public unobserve = vi.fn();
+        public disconnect = vi.fn();
 
-        constructor(callback: ResizeObserverCallback) {
+        public constructor(callback: ResizeObserverCallback) {
           this.callback = callback;
           resizeObservers.push(this);
         }
@@ -90,9 +90,9 @@ describe("SlideScrollContainer", () => {
     vi.stubGlobal(
       "MutationObserver",
       class MockMutationObserver {
-        observe = vi.fn();
-        disconnect = vi.fn();
-        takeRecords = vi.fn(() => []);
+        public observe = vi.fn();
+        public disconnect = vi.fn();
+        public takeRecords = vi.fn(() => []);
       },
     );
   });

package/src/components/static-html/share-modal.tsx

@@ -74,6 +74,7 @@ export const ShareStaticNotebookModal: React.FC<{
                   <a
                     href={Constants.issuesPage}
                     target="_blank"
+                    rel="noreferrer"
                     className="underline"
                   >
                     GitHub
@@ -102,7 +103,7 @@ export const ShareStaticNotebookModal: React.FC<{
           <DialogDescription>
             You can publish a static, non-interactive version of this notebook
             to the public web. We will create a link for you that lives on{" "}
-            <a href={BASE_URL} target="_blank">
+            <a href={BASE_URL} target="_blank" rel="noreferrer">
               {BASE_URL}
             </a>
             .

package/src/components/static-html/static-banner.tsx

@@ -1,6 +1,4 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* oxlint-disable react/jsx-no-comment-textnodes */
-/* oxlint-disable react/jsx-no-target-blank */
 
 import { useAtomValue } from "jotai";
 import { CopyIcon, DownloadIcon } from "lucide-react";
@@ -49,6 +47,7 @@ export const StaticBanner: React.FC = () => {
         <a
           href={Constants.githubPage}
           target="_blank"
+          rel="noreferrer"
           className="text-(--sky-11) font-medium underline"
         >
           marimo
@@ -93,6 +92,7 @@ const StaticBannerDialog = ({ code }: { code: string }) => {
                 <a
                   href={Constants.githubPage}
                   target="_blank"
+                  rel="noreferrer"
                   className="text-(--sky-11) hover:underline font-medium"
                 >
                   marimo

package/src/components/ui/links.tsx

@@ -21,7 +21,12 @@ export const ExternalLink = ({
   children: React.ReactNode;
 }) => {
   return (
-    <a href={href} target="_blank" className="text-link hover:underline">
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className="text-link hover:underline"
+    >
       {children}
     </a>
   );

package/src/components/ui/typography.tsx

@@ -5,7 +5,7 @@ import { cn } from "@/utils/cn";
 const H1 = React.forwardRef<
   HTMLHeadingElement,
   React.ComponentPropsWithoutRef<"h1">
->(({ className, ...props }, ref) => {
+>(({ className, children, ...props }, ref) => {
   return (
     <h1
       className={cn(
@@ -14,7 +14,9 @@ const H1 = React.forwardRef<
       )}
       ref={ref}
       {...props}
-    />
+    >
+      {children}
+    </h1>
   );
 });
 H1.displayName = "H1";
@@ -22,7 +24,7 @@ H1.displayName = "H1";
 const H2 = React.forwardRef<
   HTMLHeadingElement,
   React.ComponentPropsWithoutRef<"h2">
->(({ className, ...props }, ref) => {
+>(({ className, children, ...props }, ref) => {
   return (
     <h2
       className={cn(
@@ -31,7 +33,9 @@ const H2 = React.forwardRef<
       )}
       ref={ref}
       {...props}
-    />
+    >
+      {children}
+    </h2>
   );
 });
 H2.displayName = "H2";
@@ -39,7 +43,7 @@ H2.displayName = "H2";
 const H3 = React.forwardRef<
   HTMLHeadingElement,
   React.ComponentPropsWithoutRef<"h3">
->(({ className, ...props }, ref) => {
+>(({ className, children, ...props }, ref) => {
   return (
     <h3
       className={cn(
@@ -48,7 +52,9 @@ const H3 = React.forwardRef<
       )}
       ref={ref}
       {...props}
-    />
+    >
+      {children}
+    </h3>
   );
 });
 H3.displayName = "H3";
@@ -56,7 +62,7 @@ H3.displayName = "H3";
 const H4 = React.forwardRef<
   HTMLHeadingElement,
   React.ComponentPropsWithoutRef<"h4">
->(({ className, ...props }, ref) => {
+>(({ className, children, ...props }, ref) => {
   return (
     <h4
       className={cn(
@@ -65,7 +71,9 @@ const H4 = React.forwardRef<
       )}
       ref={ref}
       {...props}
-    />
+    >
+      {children}
+    </h4>
   );
 });
 H4.displayName = "H4";

package/src/core/ai/context/__tests__/registry.test.ts

@@ -44,9 +44,9 @@ const mockAttachment2: FileUIPart = {
 
 // Concrete implementation of AIContextProvider for testing
 class MockContextProvider extends AIContextProvider<MockContextItem> {
-  readonly title = "Mock Items";
-  readonly mentionPrefix = "@";
-  readonly contextType = "mock";
+  public readonly title = "Mock Items";
+  public readonly mentionPrefix = "@";
+  public readonly contextType = "mock";
 
   private items: MockContextItem[] = [
     {
@@ -72,57 +72,60 @@ class MockContextProvider extends AIContextProvider<MockContextItem> {
     },
   ];
 
-  getItems(): MockContextItem[] {
+  public getItems(): MockContextItem[] {
     return this.items;
   }
 
-  formatContext(item: MockContextItem): string {
+  public formatContext(item: MockContextItem): string {
     return `Mock: ${item.name} (${item.data.value})`;
   }
 
-  formatCompletion(item: MockContextItem): Completion {
+  public formatCompletion(item: MockContextItem): Completion {
     return this.createBasicCompletion(item);
   }
 
   // Method to add items for testing
-  addItem(item: MockContextItem): void {
+  public addItem(item: MockContextItem): void {
     this.items.push(item);
   }
 
   // Method to clear items for testing
-  clearItems(): void {
+  public clearItems(): void {
     this.items = [];
   }
 }
 
 // Test provider that supports attachments
 class AttachmentContextProvider extends AIContextProvider<MockContextItem> {
-  readonly title = "Attachment Items";
-  readonly mentionPrefix = "@";
-  readonly contextType = "attachment";
+  public readonly title = "Attachment Items";
+  public readonly mentionPrefix = "@";
+  public readonly contextType = "attachment";
 
   private items: MockContextItem[];
   private attachments: FileUIPart[];
 
-  constructor(items: MockContextItem[] = [], attachments: FileUIPart[] = []) {
+  public constructor(
+    items: MockContextItem[] = [],
+    attachments: FileUIPart[] = [],
+  ) {
     super();
     this.items = items;
     this.attachments = attachments;
   }
 
-  getItems(): MockContextItem[] {
+  public getItems(): MockContextItem[] {
     return this.items;
   }
 
-  formatContext(item: MockContextItem): string {
+  public formatContext(item: MockContextItem): string {
     return `Attachment: ${item.name} (${item.data.value})`;
   }
 
-  formatCompletion(item: MockContextItem): Completion {
+  public formatCompletion(item: MockContextItem): Completion {
     return this.createBasicCompletion(item);
   }
 
-  override async getAttachments(
+  public override async getAttachments(
     items: MockContextItem[],
   ): Promise<FileUIPart[]> {
     // Return attachments for items that need them
@@ -142,9 +145,9 @@ interface FileContextItem extends AIContextItem {
 
 // Another mock provider with different prefix and type
 class FileContextProvider extends AIContextProvider<FileContextItem> {
-  readonly title = "Files";
-  readonly mentionPrefix = "@";
-  readonly contextType = "file";
+  public readonly title = "Files";
+  public readonly mentionPrefix = "@";
+  public readonly contextType = "file";
 
   private items: FileContextItem[] = [
     {
@@ -163,26 +166,26 @@ class FileContextProvider extends AIContextProvider<FileContextItem> {
     },
   ];
 
-  getItems(): FileContextItem[] {
+  public getItems(): FileContextItem[] {
     return this.items;
   }
 
-  formatCompletion(item: FileContextItem): Completion {
+  public formatCompletion(item: FileContextItem): Completion {
     return this.createBasicCompletion(item);
   }
 
-  formatContext(item: FileContextItem): string {
+  public formatContext(item: FileContextItem): string {
     return `File: ${item.uri}\nDescription: ${item.description}`;
   }
 }
 
 // Second mock provider with the same context type as MockContextProvider
 class SecondaryMockProvider extends AIContextProvider<MockContextItem> {
-  readonly title = "Secondary Mock Items";
-  readonly mentionPrefix = "@";
-  readonly contextType = "mock";
+  public readonly title = "Secondary Mock Items";
+  public readonly mentionPrefix = "@";
+  public readonly contextType = "mock";
 
-  getItems(): MockContextItem[] {
+  public getItems(): MockContextItem[] {
     return [
       {
         type: "mock",
@@ -194,11 +197,11 @@ class SecondaryMockProvider extends AIContextProvider<MockContextItem> {
     ];
   }
 
-  formatContext(item: MockContextItem): string {
+  public formatContext(item: MockContextItem): string {
     return `Secondary: ${item.name}`;
   }
 
-  formatCompletion(item: MockContextItem): Completion {
+  public formatCompletion(item: MockContextItem): Completion {
     return this.createBasicCompletion(item);
   }
 }

package/src/core/ai/context/providers/cell-output.ts

@@ -80,16 +80,16 @@ function isMediaMimetype(
 }
 
 export class CellOutputContextProvider extends AIContextProvider<CellOutputContextItem> {
-  readonly title = "Cell Outputs";
-  readonly mentionPrefix = "@";
-  readonly contextType = "cell-output";
+  public readonly title = "Cell Outputs";
+  public readonly mentionPrefix = "@";
+  public readonly contextType = "cell-output";
   private store: JotaiStore;
-  constructor(store: JotaiStore) {
+  public constructor(store: JotaiStore) {
     super();
     this.store = store;
   }
 
-  getItems(): CellOutputContextItem[] {
+  public getItems(): CellOutputContextItem[] {
     const notebook = this.store.get(notebookAtom);
     const items: CellOutputContextItem[] = [];
 
@@ -116,7 +116,7 @@ export class CellOutputContextProvider extends AIContextProvider<CellOutputConte
     return items;
   }
 
-  formatCompletion(item: CellOutputContextItem): Completion {
+  public formatCompletion(item: CellOutputContextItem): Completion {
     const { cellOutput: data, cellName, cellCode } = item.data;
 
     return {
@@ -224,7 +224,7 @@ export class CellOutputContextProvider extends AIContextProvider<CellOutputConte
     };
   }
 
-  formatContext(item: CellOutputContextItem): string {
+  public formatContext(item: CellOutputContextItem): string {
     const { cellOutput: data, cellName, cellId, cellCode } = item.data;
 
     const contextData = {
@@ -253,7 +253,7 @@ export class CellOutputContextProvider extends AIContextProvider<CellOutputConte
   }
 
   /** Get attachments for cell output items that have shouldDownloadImage=true */
-  override async getAttachments(
+  public override async getAttachments(
     items: CellOutputContextItem[],
   ): Promise<FileUIPart[]> {
     const cellId = items[0].data.cellId;

package/src/core/ai/context/providers/datasource.ts

@@ -46,13 +46,16 @@ export interface DatasourceContextItem extends AIContextItem {
 const CONTEXT_TYPE = "datasource";
 
 export class DatasourceContextProvider extends AIContextProvider<DatasourceContextItem> {
-  readonly title = "Datasource";
-  readonly mentionPrefix = "@";
-  readonly contextType = CONTEXT_TYPE;
+  public readonly title = "Datasource";
+  public readonly mentionPrefix = "@";
+  public readonly contextType = CONTEXT_TYPE;
   private connectionsMap: ConnectionsMap;
   private dataframes: DataTable[];
 
-  constructor(connectionsMap: ConnectionsMap, tablesMap: DatasetTablesMap) {
+  public constructor(
+    connectionsMap: ConnectionsMap,
+    tablesMap: DatasetTablesMap,
+  ) {
     super();
     this.connectionsMap = connectionsMap;
     this.dataframes = [...tablesMap.values()].filter(
@@ -60,7 +63,7 @@ export class DatasourceContextProvider extends AIContextProvider<DatasourceConte
     );
   }
 
-  getItems(): DatasourceContextItem[] {
+  public getItems(): DatasourceContextItem[] {
     return [...this.connectionsMap.values()]
       .map((connection): DatasourceContextItem | null => {
         let description = "Database schema.";
@@ -92,7 +95,7 @@ export class DatasourceContextProvider extends AIContextProvider<DatasourceConte
       .filter(Boolean);
   }
 
-  formatContext(item: DatasourceContextItem): string {
+  public formatContext(item: DatasourceContextItem): string {
     const data = item.data;
     // Remove certain fields that are not needed in the context
     const { name, display_name, source, ...filteredDatasource } =
@@ -117,7 +120,7 @@ export class DatasourceContextProvider extends AIContextProvider<DatasourceConte
     });
   }
 
-  formatCompletion(item: DatasourceContextItem): Completion {
+  public formatCompletion(item: DatasourceContextItem): Completion {
     const datasource = item.data;
 
     const dataConnection = datasource.connection;

package/src/core/ai/context/providers/error.ts

@@ -95,17 +95,17 @@ function errorContextName(entry: CellErrorEntry): string {
 
 const errorsTxt = new PluralWord("error", "errors");
 export class ErrorContextProvider extends AIContextProvider<ErrorContextItem> {
-  readonly title = "Errors";
-  readonly mentionPrefix = "@";
-  readonly contextType = "error";
+  public readonly title = "Errors";
+  public readonly mentionPrefix = "@";
+  public readonly contextType = "error";
   private store: JotaiStore;
 
-  constructor(store: JotaiStore) {
+  public constructor(store: JotaiStore) {
     super();
     this.store = store;
   }
 
-  getItems(): ErrorContextItem[] {
+  public getItems(): ErrorContextItem[] {
     const errors = getCellErrorEntries(this.store);
 
     if (errors.length === 0) {
@@ -141,7 +141,7 @@ export class ErrorContextProvider extends AIContextProvider<ErrorContextItem> {
     return items;
   }
 
-  formatCompletion(item: ErrorContextItem): Completion {
+  public formatCompletion(item: ErrorContextItem): Completion {
     if (item.data.type === "all-errors") {
       const errorCount = item.data.errors.length;
       return {
@@ -201,7 +201,7 @@ export class ErrorContextProvider extends AIContextProvider<ErrorContextItem> {
     };
   }
 
-  formatContext(item: ErrorContextItem): string {
+  public formatContext(item: ErrorContextItem): string {
     const entries =
       item.data.type === "all-errors" ? item.data.errors : [item.data.error];
 

package/src/core/ai/context/providers/file.ts

@@ -38,14 +38,14 @@ const DEFAULT_FILE_SEARCH_CONFIG: FileSearchConfig = {
 };
 
 export class FileContextProvider extends AIContextProvider<FileContextItem> {
-  readonly title = "Files";
-  readonly mentionPrefix = "#";
-  readonly contextType = "file";
+  public readonly title = "Files";
+  public readonly mentionPrefix = "#";
+  public readonly contextType = "file";
 
   private apiRequests: EditRequests & RunRequests;
   private config: FileSearchConfig;
 
-  constructor(
+  public constructor(
     apiRequests: EditRequests & RunRequests,
     config: FileSearchConfig = DEFAULT_FILE_SEARCH_CONFIG,
   ) {
@@ -58,7 +58,7 @@ export class FileContextProvider extends AIContextProvider<FileContextItem> {
    * Create a dynamic completion source for file mentions
    * This bypasses the standard registry system to enable dynamic searching
    */
-  createCompletionSource(): CompletionSource {
+  public createCompletionSource(): CompletionSource {
     return async (
       context: CompletionContext,
     ): Promise<CompletionResult | null> => {
@@ -176,13 +176,13 @@ export class FileContextProvider extends AIContextProvider<FileContextItem> {
     }
   }
 
-  getItems(): FileContextItem[] {
+  public getItems(): FileContextItem[] {
     // Files are fetched dynamically, so return empty array
     // This provider relies on dynamic fetching via createCompletionSource()
     return [];
   }
 
-  formatCompletion(item: FileContextItem): Completion {
+  public formatCompletion(item: FileContextItem): Completion {
     const { data, name } = item;
     const icon = data.isDirectory ? "📁" : "📄";
 
@@ -254,7 +254,7 @@ export class FileContextProvider extends AIContextProvider<FileContextItem> {
     };
   }
 
-  formatContext(item: FileContextItem): string {
+  public formatContext(item: FileContextItem): string {
     const { data, name } = item;
     return contextToXml({
       type: this.contextType,