@marimo-team/islands 0.24.3-dev4 → 0.24.3-dev40

package/src/components/chat/acp/agent-panel.tsx

@@ -902,6 +902,18 @@ const AgentPanel: React.FC = () => {
         return;
       }
 
+      let absoluteFilename: string;
+      try {
+        absoluteFilename = getAbsoluteFilename();
+      } catch {
+        toast({
+          title: "Notebook must be named",
+          description: "Please name the notebook to use the agent",
+          variant: "danger",
+        });
+        return;
+      }
+
       logger.debug("Submitting prompt to agent", {
         sessionId: activeSessionId,
       });
@@ -914,62 +926,51 @@ const AgentPanel: React.FC = () => {
         setSessionState((prev) => updateSessionTitle(prev, prompt));
       }
 
-      let absoluteFilename: string;
       try {
-        absoluteFilename = getAbsoluteFilename();
-      } catch {
-        toast({
-          title: "Notebook must be named",
-          description: "Please name the notebook to use the agent",
-          variant: "danger",
-        });
-        return;
-      }
-
-      const promptBlocks: ContentBlock[] = [{ type: "text", text: prompt }];
+        const promptBlocks: ContentBlock[] = [{ type: "text", text: prompt }];
 
-      // Parse context from the prompt
-      const { contextBlocks, attachmentBlocks } =
-        await parseContextFromPrompt(prompt);
-      promptBlocks.push(...contextBlocks, ...attachmentBlocks);
+        // Parse context from the prompt
+        const { contextBlocks, attachmentBlocks } =
+          await parseContextFromPrompt(prompt);
+        promptBlocks.push(...contextBlocks, ...attachmentBlocks);
 
-      // Add manually uploaded files as resource links
-      if (files && files.length > 0) {
-        const fileResourceLinks = await convertFilesToResourceLinks(files);
-        promptBlocks.push(...fileResourceLinks);
-      }
+        // Add manually uploaded files as resource links
+        if (files && files.length > 0) {
+          const fileResourceLinks = await convertFilesToResourceLinks(files);
+          promptBlocks.push(...fileResourceLinks);
+        }
 
-      const hasGivenRules = notifications.some(
-        (notification) =>
-          notification.type === "session_notification" &&
-          notification.data.update.sessionUpdate === "user_message_chunk",
-      );
-      if (!hasGivenRules) {
-        promptBlocks.push(
-          {
-            type: "resource_link",
-            uri: absoluteFilename,
-            mimeType: "text/x-python",
-            name: absoluteFilename,
-          },
-          {
-            type: "resource",
-            resource: {
-              uri: "marimo_rules.md",
-              mimeType: "text/plain",
-              text: getAgentPrompt(absoluteFilename),
-            },
-          },
+        const hasGivenRules = notifications.some(
+          (notification) =>
+            notification.type === "session_notification" &&
+            notification.data.update.sessionUpdate === "user_message_chunk",
         );
-      }
+        if (!hasGivenRules) {
+          promptBlocks.push(
+            {
+              type: "resource_link",
+              uri: absoluteFilename,
+              mimeType: "text/x-python",
+              name: absoluteFilename,
+            },
+            {
+              type: "resource",
+              resource: {
+                uri: "marimo_rules.md",
+                mimeType: "text/plain",
+                text: getAgentPrompt(absoluteFilename),
+              },
+            },
+          );
+        }
 
-      try {
         await agent.prompt({
           sessionId: activeSessionId,
           prompt: promptBlocks,
         });
       } catch (error) {
         logger.error("Failed to send prompt", { error });
+        setError(error instanceof Error ? error : String(error));
       } finally {
         setIsLoading(false);
       }

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -10,7 +10,7 @@ import {
   EyeIcon,
   EyeOffIcon,
 } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useLocale } from "react-aria";
 import {
   AddDataframeChart,
@@ -98,11 +98,7 @@ export function ColumnExplorerPanel<TData>({
     hiddenColumns: hiddenColumnCount,
   } = getColumnCountForDisplay(table, totalColumns);
   const { visible: visibleColumnCount } = getUserColumnVisibilityCounts(table);
-  const columnVisibility = table.getState().columnVisibility;
-  const showOnlyColumnState = useMemo(
-    () => getShowOnlyColumnState(table),
-    [table, columnVisibility],
-  );
+  const showOnlyColumnState = getShowOnlyColumnState(table);
 
   const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
     numRows: totalRows,

package/src/components/data-table/column-summary/chart-spec-model.tsx

@@ -573,7 +573,7 @@ export class ColumnChartSpecModel<T> {
         };
       }
       case "boolean": {
-        if (!stats?.true || !stats?.false) {
+        if (stats?.true == null || stats?.false == null) {
           return getLegacyBooleanSpec(column, base, MAX_BAR_HEIGHT);
         }
 

package/src/components/data-table/column-visibility-dropdown.tsx

@@ -215,6 +215,11 @@ export const ColumnVisibilityDropdown = <TData,>({
                 index === list.pinnedCount &&
                 list.pinnedCount > 0 &&
                 list.pinnedCount < list.visibleOptions.length;
+              const label = (
+                <span className="truncate" title={option.label}>
+                  {option.label}
+                </span>
+              );
               return (
                 <React.Fragment key={option.value}>
                   {isSectionBoundary && <CommandSeparator />}
@@ -225,15 +230,16 @@ export const ColumnVisibilityDropdown = <TData,>({
                     className="flex items-center gap-1.5 cursor-pointer"
                   >
                     {dataType === undefined ? (
-                      <span>{option.label}</span>
+                      label
                     ) : (
                       <ColumnName
-                        columnName={option.label}
+                        className="min-w-0"
+                        columnName={label}
                         dataType={dataType}
                       />
                     )}
                     {!option.disabled && (
-                      <span className="ml-auto flex items-center gap-0.5">
+                      <span className="ml-auto flex shrink-0 items-center gap-0.5">
                         <ShowOnlyColumnButton
                           table={table}
                           columnIds={[option.value]}

package/src/components/data-table/columns.tsx

@@ -20,7 +20,6 @@ import { Maps } from "@/utils/maps";
 import { maxFractionalDigits } from "@/utils/numbers";
 import { Objects } from "@/utils/objects";
 import { parseContent } from "@/utils/url-parser";
-import { EmotionCacheProvider } from "../editor/output/EmotionCacheProvider";
 import { JsonOutput } from "../editor/output/JsonOutput";
 import { CopyClipboardIcon } from "../icons/copy-icon";
 import { Button } from "../ui/button";
@@ -412,76 +411,74 @@ const PopoutColumn = ({
     : rawStringValue;
 
   return (
-    <EmotionCacheProvider container={null}>
-      <Popover>
-        <PopoverTrigger
-          ref={triggerRef}
-          className={cn(cellStyles, "max-w-fit outline-hidden")}
-          onClick={selectCell}
-          onMouseDown={(e) => {
-            // Prevent cell underneath from being selected
-            e.stopPropagation();
-          }}
-        >
-          <span
-            className={cn(
-              "cursor-pointer hover:text-link",
-              wrapped && COLUMN_WRAPPING_STYLES,
-            )}
-            title={rawStringValue}
-          >
-            {edges ? <WhitespaceMarkers value={edges.leading} /> : null}
-            {displayText}
-            {edges ? <WhitespaceMarkers value={edges.trailing} /> : null}
-          </span>
-        </PopoverTrigger>
-        <PopoverContent
+    <Popover>
+      <PopoverTrigger
+        ref={triggerRef}
+        className={cn(cellStyles, "max-w-fit outline-hidden")}
+        onClick={selectCell}
+        onMouseDown={(e) => {
+          // Prevent cell underneath from being selected
+          e.stopPropagation();
+        }}
+      >
+        <span
           className={cn(
-            contentClassName,
-            scrollable && "flex flex-col overflow-hidden",
+            "cursor-pointer hover:text-link",
+            wrapped && COLUMN_WRAPPING_STYLES,
           )}
-          align="start"
-          alignOffset={10}
-          onInteractOutside={(event) => {
-            // Radix sees the shadow host as the target. Resolve the original
-            // target so pointer-down does not dismiss before click toggles.
-            const target = Events.composedTarget(event.detail.originalEvent);
-            if (triggerRef.current?.contains(target)) {
-              event.preventDefault();
-            }
-          }}
+          title={rawStringValue}
         >
-          <div
-            className={cn(
-              "flex -mt-3 -mr-2",
-              scrollable ? "shrink-0 justify-end" : "float-right",
-            )}
-          >
-            <CopyClipboardIcon
-              value={rawStringValue}
-              className="size-3 hover:text-link"
-              buttonClassName="flex size-5 items-center justify-center"
-              tooltip={false}
-            />
-            <PopoverClose asChild={true}>
-              <Button
-                variant="link"
-                size="xs"
-                className={cn("size-5 p-0", !buttonText && "ml-1.5 mr-1")}
-                aria-label="Close"
-              >
-                {buttonText ?? "Close"}
-              </Button>
-            </PopoverClose>
-          </div>
-          {scrollable ? (
-            <div className="min-h-0 overflow-auto">{children}</div>
-          ) : (
-            children
+          {edges ? <WhitespaceMarkers value={edges.leading} /> : null}
+          {displayText}
+          {edges ? <WhitespaceMarkers value={edges.trailing} /> : null}
+        </span>
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn(
+          contentClassName,
+          scrollable && "flex flex-col overflow-hidden",
+        )}
+        align="start"
+        alignOffset={10}
+        onInteractOutside={(event) => {
+          // Radix sees the shadow host as the target. Resolve the original
+          // target so pointer-down does not dismiss before click toggles.
+          const target = Events.composedTarget(event.detail.originalEvent);
+          if (triggerRef.current?.contains(target)) {
+            event.preventDefault();
+          }
+        }}
+      >
+        <div
+          className={cn(
+            "flex -mt-3 -mr-2",
+            scrollable ? "shrink-0 justify-end" : "float-right",
           )}
-        </PopoverContent>
-      </Popover>
-    </EmotionCacheProvider>
+        >
+          <CopyClipboardIcon
+            value={rawStringValue}
+            className="size-3 hover:text-link"
+            buttonClassName="flex size-5 items-center justify-center"
+            tooltip={false}
+          />
+          <PopoverClose asChild={true}>
+            <Button
+              variant="link"
+              size="xs"
+              className={cn("size-5 p-0", !buttonText && "ml-1.5 mr-1")}
+              aria-label="Close"
+            >
+              {buttonText ?? "Close"}
+            </Button>
+          </PopoverClose>
+        </div>
+        {scrollable ? (
+          <div className="min-h-0 overflow-auto">{children}</div>
+        ) : (
+          children
+        )}
+      </PopoverContent>
+    </Popover>
   );
 };
 

package/src/components/datasources/components.tsx

@@ -101,18 +101,20 @@ export const ColumnPreviewContainer: React.FC<{
 export const ColumnName = ({
   columnName,
   dataType,
+  className,
 }: {
   columnName: React.ReactNode;
   dataType: DataType;
+  className?: string;
 }) => {
   const resolvedDataType = resolveDataType(dataType);
   const Icon = DATA_TYPE_ICON[resolvedDataType];
   const color = getDataTypeColor(resolvedDataType);
 
   return (
-    <div className="flex flex-row items-center gap-1.5">
+    <div className={cn("flex flex-row items-center gap-1.5", className)}>
       <Icon
-        className={`w-4 h-4 p-0.5 rounded-sm stroke-card-foreground ${color}`}
+        className={`w-4 h-4 shrink-0 p-0.5 rounded-sm stroke-card-foreground ${color}`}
       />
       {columnName}
     </div>

package/src/components/editor/RecoveryButton.tsx

@@ -60,6 +60,7 @@ const RecoveryModal = (props: {
   // NB: we use markdown class to have sane styling for list, paragraph
   return (
     <DialogContent className="w-fit">
+      {/* oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Handle Escape from any control within the recovery form. */}
       <form
         onSubmit={(e) => {
           e.preventDefault();

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

@@ -1,76 +1,11 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtomValue } from "jotai";
-import { LoadingEllipsis } from "@/components/icons/loading-ellipsis";
-import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
-import { DelayMount } from "@/components/utils/delay-mount";
-import {
-  isClosedAtom,
-  isConnectingAtom,
-  isNotStartedAtom,
-} from "@/core/network/connection";
+import { isNotStartedAtom } from "@/core/network/connection";
 import { useConnectToRuntime } from "@/core/runtime/config";
-import { Banner } from "@/plugins/impl/common/error-banner";
-import { Tooltip } from "../../ui/tooltip";
 import { FloatingAlert } from "./floating-alert";
 
-const SHORT_DELAY_MS = 1000; // 1 second
-const LONG_DELAY_MS = 5000; // 5 seconds
-
-export const ConnectingAlert: React.FC = () => {
-  const isConnecting = useAtomValue(isConnectingAtom);
-  const isClosed = useAtomValue(isClosedAtom);
-
-  if (isConnecting) {
-    const subtleNotification = (
-      <Tooltip content="Connecting to a marimo runtime">
-        <div className="flex items-center">
-          <LoadingEllipsis size={5} className="text-yellow-500" />
-        </div>
-      </Tooltip>
-    );
-
-    const longNotification = (
-      <Banner
-        kind="info"
-        className="flex flex-col rounded py-2 px-4 animate-in slide-in-from-top w-fit"
-      >
-        <div className="flex flex-col gap-4 justify-between items-start text-muted-foreground text-base">
-          <div className="flex items-center gap-2">
-            <Spinner className="h-4 w-4" />
-            <p>Connecting to a marimo runtime ...</p>
-          </div>
-        </div>
-      </Banner>
-    );
-
-    // This waits for 1 second to show the subtle notification, then shows the long notification after 5 seconds.
-    return (
-      <DelayMount milliseconds={SHORT_DELAY_MS}>
-        <div className="m-0 flex items-center min-h-[28px] fixed top-5 left-1/2 transform -translate-x-1/2 z-200">
-          <DelayMount
-            milliseconds={LONG_DELAY_MS}
-            fallback={subtleNotification}
-          >
-            {longNotification}
-          </DelayMount>
-        </div>
-      </DelayMount>
-    );
-  }
-
-  if (isClosed) {
-    return (
-      <FloatingAlert show={isClosed} kind="danger">
-        <div className="flex items-center gap-2">
-          <p>Failed to connect.</p>
-        </div>
-      </FloatingAlert>
-    );
-  }
-};
-
 export const NotStartedConnectionAlert: React.FC = () => {
   const isNotStarted = useAtomValue(isNotStartedAtom);
   const connectToRuntime = useConnectToRuntime();

package/src/components/editor/alerts/connection-notice.tsx

@@ -0,0 +1,140 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { useAtomValue } from "jotai";
+import { AlertCircleIcon, ArrowRightIcon } from "lucide-react";
+import { useState } from "react";
+import { Spinner } from "@/components/icons/spinner";
+import { Button } from "@/components/ui/button";
+import { hasCellsAtom } from "@/core/cells/cells";
+import type { AppConfig } from "@/core/config/config-schema";
+import { connectionAtom } from "@/core/network/connection";
+import { connectionNoticeAtom } from "@/core/network/connection-notice";
+import { WebSocketState } from "@/core/websocket/types";
+import { useDelayElapsed } from "@/hooks/useDelayElapsed";
+import { useInterval } from "@/hooks/useInterval";
+import { cn } from "@/utils/cn";
+import { SandboxErrorOutput } from "../chrome/panels/sandbox-panel";
+import { chromeAtom, useChromeActions } from "../chrome/state";
+import { VerticalLayoutWrapper } from "../renderers/vertical-layout/vertical-layout-wrapper";
+
+export const ConnectionNotice = ({
+  appConfig,
+  onRetry,
+}: {
+  appConfig: AppConfig;
+  onRetry: () => void;
+}) => {
+  const notice = useAtomValue(connectionNoticeAtom);
+  const connection = useAtomValue(connectionAtom);
+  const hasCells = useAtomValue(hasCellsAtom);
+  const chrome = useAtomValue(chromeAtom);
+  const packagesOpen =
+    (chrome.isSidebarOpen && chrome.selectedPanel === "packages") ||
+    (chrome.isDeveloperPanelOpen &&
+      chrome.selectedDeveloperPanelTab === "packages");
+  const elapsed = useDelayElapsed(notice?.pending ? 500 : 0);
+  const { openApplication } = useChromeActions();
+
+  // Reconnection uses the footer indicator while existing cells stay visible.
+  if (
+    !notice ||
+    !elapsed ||
+    (hasCells &&
+      connection.state === WebSocketState.CONNECTING &&
+      connection.phase === "reconnecting")
+  ) {
+    return null;
+  }
+
+  return (
+    <VerticalLayoutWrapper
+      appConfig={appConfig}
+      className="shrink-0 pb-0 sm:pb-0 print:hidden"
+      innerClassName="pb-0 sm:pb-0 pr-4"
+    >
+      <section
+        aria-label="Notebook startup"
+        className={cn(
+          "text-muted-foreground",
+          hasCells
+            ? "mt-4 mb-8 border rounded-lg px-5 py-5"
+            : "max-w-sm mx-auto mt-16 sm:mt-24 px-4",
+          hasCells && !notice.pending && "border-(--red-7)",
+        )}
+      >
+        <div role="status" className="flex items-center gap-2.5">
+          {notice.pending ? (
+            <Spinner className="size-4 shrink-0" aria-hidden={true} />
+          ) : (
+            <AlertCircleIcon
+              className="size-4 shrink-0 text-(--red-11)"
+              aria-hidden={true}
+            />
+          )}
+          <h2
+            className={cn(
+              "text-base",
+              notice.pending
+                ? "font-normal text-foreground"
+                : "font-medium text-(--red-11)",
+            )}
+          >
+            {notice.title}
+          </h2>
+        </div>
+        <div className="ml-6.5">
+          <p
+            className={cn(
+              "mt-3 text-sm leading-7",
+              !notice.pending && "text-foreground",
+            )}
+          >
+            {notice.description}
+          </p>
+          {!notice.sandbox && notice.error && (
+            <SandboxErrorOutput error={notice.error} />
+          )}
+          <div className="mt-5 flex flex-wrap items-center gap-x-6 gap-y-3">
+            {!packagesOpen && (notice.sandbox || notice.pending) && (
+              <Button
+                variant="text"
+                size="xs"
+                className="h-auto p-0 text-xs gap-1.5"
+                onClick={() => openApplication("packages")}
+              >
+                {notice.pending ? "View setup details" : "Open Packages"}
+                <ArrowRightIcon className="size-3" aria-hidden={true} />
+              </Button>
+            )}
+            {!notice.pending && !notice.sandbox && (
+              <Button variant="outline" size="xs" onClick={onRetry}>
+                Try again
+              </Button>
+            )}
+            {notice.pending && <StartupElapsedTime />}
+          </div>
+        </div>
+      </section>
+    </VerticalLayoutWrapper>
+  );
+};
+
+function StartupElapsedTime() {
+  const [startedAt] = useState(Date.now);
+  const [seconds, setSeconds] = useState(0);
+  useInterval(() => setSeconds(Math.floor((Date.now() - startedAt) / 1000)), {
+    delayMs: 1000,
+    whenVisible: true,
+  });
+  const duration =
+    seconds < 60
+      ? `${seconds}s`
+      : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+  return (
+    <span
+      className="text-xs text-muted-foreground/70 tabular-nums"
+      aria-live="off"
+    >
+      Elapsed {duration}
+    </span>
+  );
+}

package/src/components/editor/app-container.tsx

@@ -4,8 +4,11 @@ import type React from "react";
 import type { PropsWithChildren } from "react";
 import type { AppConfig } from "@/core/config/config-schema";
 import { PyodideLoader } from "@/core/wasm/PyodideLoader";
-import { isAppClosed } from "@/core/websocket/connection-utils";
-import type { ConnectionStatus } from "@/core/websocket/types";
+import {
+  type ConnectionStatus,
+  WebSocketClosedReason,
+  WebSocketState,
+} from "@/core/websocket/types";
 import { cn } from "@/utils/cn";
 import { DynamicFavicon } from "./dynamic-favicon";
 import { StatusOverlay } from "./header/status";
@@ -44,7 +47,10 @@ export const AppContainer: React.FC<PropsWithChildren<Props>> = ({
             data-connection-state={connectionState}
             className={cn(
               "mathjax_ignore",
-              isAppClosed(connectionState) && "disconnected",
+              connection.state === WebSocketState.CLOSED &&
+                connection.code !==
+                  WebSocketClosedReason.KERNEL_STARTUP_ERROR &&
+                "disconnected",
               "bg-background w-full h-full text-textColor",
               "flex flex-col overflow-y-auto",
               width === "full" && "config-width-full",