@marimo-team/islands 0.24.3-dev9 → 0.25.0

package/src/components/editor/alerts/startup-output.tsx

@@ -0,0 +1,173 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { ArrowDownIcon, ChevronUpIcon } from "lucide-react";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { CopyClipboardIcon } from "@/components/icons/copy-icon";
+import { useEventListener } from "@/hooks/useEventListener";
+import { cn } from "@/utils/cn";
+
+function hasSelection(element: HTMLElement) {
+  const selection = element.ownerDocument.getSelection();
+  return (
+    selection && !selection.isCollapsed && selection.containsNode(element, true)
+  );
+}
+
+export type StartupOutputState = "running" | "succeeded" | "failed";
+
+export function StartupOutput({
+  logs,
+  label,
+  state = "running",
+}: {
+  logs: string;
+  label: string;
+  /** Running keeps the newest line bright; failed keeps all of it bright. */
+  state?: StartupOutputState;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [following, setFollowing] = useState(true);
+  const outputRef = useRef<HTMLPreElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const outputId = useId();
+  const lines = logs.trimEnd().split(/\r?\n/);
+  const emphasis =
+    state === "failed"
+      ? "text-foreground"
+      : state === "running"
+        ? "last:text-foreground"
+        : undefined;
+
+  useEventListener(outputRef, "keydown", (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setExpanded(false);
+      toggleRef.current?.focus();
+    }
+  });
+
+  useEventListener(document, "selectionchange", () => {
+    if (outputRef.current && hasSelection(outputRef.current)) {
+      setFollowing(false);
+    }
+  });
+
+  useLayoutEffect(() => {
+    const output = outputRef.current;
+    if (!output) {
+      return;
+    }
+    const previous = output.textContent ?? "";
+    // Append without replacing selected text nodes as more output arrives.
+    if (logs.startsWith(previous)) {
+      if (logs.length > previous.length) {
+        output.append(document.createTextNode(logs.slice(previous.length)));
+      }
+    } else {
+      output.textContent = logs;
+    }
+    if (expanded && following && !hasSelection(output)) {
+      output.scrollTop = output.scrollHeight;
+    }
+  }, [logs, expanded, following]);
+
+  if (!logs.trim()) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "relative mt-2.5 min-w-0 contain-inline-size rounded text-muted-foreground",
+        // One surface: it washes on hover and the wash stays while open.
+        expanded ? "bg-muted/40" : "hover:bg-muted/40",
+      )}
+    >
+      <div className={cn(expanded && "flex items-center pr-1")}>
+        <button
+          ref={toggleRef}
+          type="button"
+          aria-label={`${expanded ? "Collapse" : "Expand"} ${label}`}
+          aria-expanded={expanded}
+          aria-controls={outputId}
+          title={expanded ? "Collapse output" : "Expand output"}
+          className={cn(
+            "flex w-full min-w-0 rounded px-2.5 py-1 text-left focus-visible:outline-2 focus-visible:outline-ring",
+            expanded &&
+              "items-center justify-between gap-2 text-xs hover:text-foreground",
+          )}
+          onClick={() => {
+            setExpanded(!expanded);
+            setFollowing(true);
+          }}
+        >
+          {expanded ? (
+            <>
+              <span className="leading-5">Logs</span>
+              <ChevronUpIcon className="size-3.5 shrink-0" aria-hidden={true} />
+            </>
+          ) : (
+            <span
+              className={cn(
+                "min-w-0 flex-1 font-mono text-[11px] leading-5",
+                // Fade the top of the tail so it reads as a stream, not as
+                // greyed-out prose.
+                lines.length > 1 &&
+                  "[mask-image:linear-gradient(to_bottom,transparent,#000_70%)]",
+              )}
+              aria-hidden={true}
+            >
+              {lines.slice(-3).map((line, index) => (
+                <span key={index} className={cn("block truncate", emphasis)}>
+                  {line || "\u00A0"}
+                </span>
+              ))}
+            </span>
+          )}
+        </button>
+        {expanded && (
+          <CopyClipboardIcon
+            value={logs}
+            ariaLabel={`Copy ${label}`}
+            tooltip="Copy output"
+            className="size-3.5"
+            buttonClassName="size-6 shrink-0 flex items-center justify-center rounded hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring"
+          />
+        )}
+      </div>
+      <pre
+        id={outputId}
+        ref={outputRef}
+        hidden={!expanded}
+        tabIndex={0}
+        aria-label={label}
+        className="max-h-48 overflow-auto overscroll-contain whitespace-pre px-2.5 pb-2.5 font-mono text-[11px] leading-5 scrollbar-thin focus-visible:outline-2 focus-visible:outline-ring"
+        onScroll={(event) => {
+          const output = event.currentTarget;
+          setFollowing(
+            !hasSelection(output) &&
+              output.scrollHeight - output.scrollTop - output.clientHeight < 12,
+          );
+        }}
+      />
+      {expanded && !following && (
+        <button
+          type="button"
+          className="absolute bottom-2 left-1/2 -translate-x-1/2 flex items-center gap-1 whitespace-nowrap rounded-full border bg-background px-2 py-1 text-xs shadow-xs hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring"
+          onClick={() => {
+            const output = outputRef.current;
+            if (output) {
+              if (hasSelection(output)) {
+                output.ownerDocument.getSelection()?.removeAllRanges();
+              }
+              output.focus({ preventScroll: true });
+            }
+            setFollowing(true);
+          }}
+        >
+          <ArrowDownIcon className="size-3" aria-hidden={true} />
+          Jump to latest
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/editor/alerts/startup-progress.tsx

@@ -0,0 +1,204 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { useAtomValue } from "jotai";
+import { AlertCircleIcon, CheckIcon, CircleIcon } from "lucide-react";
+import { Spinner } from "@/components/icons/spinner";
+import { preparationAtom } from "@/core/packages/sandbox-state";
+import { startupProgressAtom } from "@/core/network/connection";
+import type { DisplayConnectionNotice } from "@/core/network/useConnectionNotice";
+import { cn } from "@/utils/cn";
+import { StartupOutput, type StartupOutputState } from "./startup-output";
+
+const STEPS = [
+  {
+    phase: "preparing-environment",
+    titles: {
+      complete: "Environment prepared",
+      failed: "Environment setup failed",
+      pending: "Preparing environment",
+      waiting: "Prepare environment",
+    },
+    descriptions: {
+      complete: "Python and dependencies are available.",
+      failed: "Setup could not finish.",
+      pending: "Set up Python and dependencies.",
+      waiting: "Set up Python and dependencies.",
+    },
+  },
+  {
+    phase: "starting-kernel",
+    titles: {
+      complete: "Kernel started",
+      failed: "Kernel failed to start",
+      pending: "Starting kernel",
+      waiting: "Start kernel",
+    },
+    descriptions: {
+      complete: "The notebook is ready to run.",
+      failed: "The kernel could not connect.",
+      pending: "Connecting to this notebook.",
+      waiting: "After the environment is ready.",
+    },
+  },
+] as const;
+
+interface StartupProgressProps {
+  notice: DisplayConnectionNotice;
+  surface: "notebook" | "sidebar";
+}
+
+function StartupStepOutput({
+  phase,
+  state,
+}: {
+  phase: (typeof STEPS)[number]["phase"];
+  state: StartupOutputState;
+}) {
+  const preparation = useAtomValue(preparationAtom);
+  const progress = useAtomValue(startupProgressAtom);
+  const preparing = phase === "preparing-environment";
+  const logs = preparing
+    ? (preparation?.logs.environment ?? "")
+    : progress?.phase === phase
+      ? progress.logs
+      : "";
+
+  return (
+    <StartupOutput
+      key={preparation?.operation_id}
+      logs={logs}
+      state={state}
+      label={
+        preparing ? "environment preparation output" : "kernel startup output"
+      }
+    />
+  );
+}
+
+function StartupSummary({ notice }: { notice: DisplayConnectionNotice }) {
+  return (
+    <header>
+      <output className="sr-only">{notice.title}</output>
+      <h2 className="text-foreground font-heading text-2xl leading-8 tracking-tight font-normal">
+        {notice.ready
+          ? "Your notebook is ready"
+          : "Getting your notebook ready"}
+      </h2>
+      <p className="text-muted-foreground mt-3 text-sm leading-6">
+        {notice.ready
+          ? "Your environment and kernel are ready."
+          : notice.pending
+            ? "Preparing Python and dependencies for this notebook."
+            : "Review the setup details below to continue."}
+      </p>
+    </header>
+  );
+}
+
+export function ConnectionStatusIcon({
+  notice,
+}: {
+  notice: DisplayConnectionNotice;
+}) {
+  if (notice.ready) {
+    return (
+      <CheckIcon
+        className="size-4 shrink-0 text-(--grass-11)"
+        aria-hidden={true}
+      />
+    );
+  }
+  if (notice.pending) {
+    return (
+      <Spinner
+        className="size-4 shrink-0 motion-reduce:animate-none"
+        aria-hidden={true}
+      />
+    );
+  }
+  return (
+    <AlertCircleIcon
+      className="size-4 shrink-0 text-(--red-11)"
+      aria-hidden={true}
+    />
+  );
+}
+
+export function StartupProgress({ notice, surface }: StartupProgressProps) {
+  return (
+    <>
+      {surface === "notebook" && <StartupSummary notice={notice} />}
+      <ol
+        className={cn("space-y-6", surface === "notebook" && "mt-8")}
+        aria-label="Notebook startup stages"
+      >
+        {STEPS.map(({ phase, titles, descriptions }, index) => {
+          const complete =
+            notice.ready || (index === 0 && notice.phase === "starting-kernel");
+          const active = !notice.ready && notice.phase === phase;
+          const failed = active && !notice.pending;
+          const state = complete
+            ? "complete"
+            : failed
+              ? "failed"
+              : active
+                ? "pending"
+                : "waiting";
+          return (
+            <li
+              key={phase}
+              aria-current={active ? "step" : undefined}
+              className="relative flex items-start gap-3"
+            >
+              {index === 0 && (
+                <span
+                  aria-hidden={true}
+                  className="absolute left-2 top-6 -bottom-4 border-l border-border"
+                />
+              )}
+              <span
+                className={cn(
+                  "mt-0.5",
+                  complete ? "text-(--grass-11)" : "text-muted-foreground",
+                )}
+              >
+                {complete ? (
+                  <CheckIcon className="size-4" aria-hidden={true} />
+                ) : active ? (
+                  <ConnectionStatusIcon notice={notice} />
+                ) : (
+                  <CircleIcon
+                    className="size-4 text-muted-foreground/50"
+                    aria-hidden={true}
+                  />
+                )}
+              </span>
+              <div className="min-w-0 flex-1">
+                <div
+                  className={cn(
+                    "text-sm",
+                    failed
+                      ? "text-(--red-11)"
+                      : complete || active
+                        ? "text-foreground"
+                        : "text-muted-foreground",
+                  )}
+                >
+                  {titles[state]}
+                </div>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {descriptions[state]}
+                </p>
+                {surface === "sidebar" && (
+                  <StartupStepOutput
+                    phase={phase}
+                    state={failed ? "failed" : active ? "running" : "succeeded"}
+                  />
+                )}
+              </div>
+            </li>
+          );
+        })}
+      </ol>
+    </>
+  );
+}

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",

package/src/components/editor/boundary/ErrorBoundary.tsx

@@ -1,11 +1,21 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import type { PropsWithChildren } from "react";
+import { Provider } from "jotai";
+import { type PropsWithChildren, lazy, Suspense, useState } from "react";
 import {
   type FallbackProps,
   ErrorBoundary as ReactErrorBoundary,
 } from "react-error-boundary";
-import { Constants } from "@/core/constants";
+import { store } from "@/core/state/jotai";
 import { Button } from "../../ui/button";
+import { Dialog, DialogTrigger } from "../../ui/dialog";
+import { Toaster } from "../../ui/toaster";
+import { TooltipProvider } from "../../ui/tooltip";
+
+const FeedbackModal = lazy(() =>
+  import("../chrome/components/feedback-button").then((mod) => ({
+    default: mod.FeedbackModal,
+  })),
+);
 
 export const ErrorBoundary: React.FC<PropsWithChildren> = (props) => {
   return (
@@ -16,26 +26,38 @@ export const ErrorBoundary: React.FC<PropsWithChildren> = (props) => {
 };
 
 const FallbackComponent: React.FC<FallbackProps> = (props) => {
+  const [open, setOpen] = useState(false);
+
   return (
-    <div className="flex-1 flex items-center justify-center flex-col space-y-4 max-w-2xl mx-auto px-6">
+    <div className="flex-1 flex items-center justify-center flex-col space-y-4 max-w-2xl mx-auto px-6 pb-6">
       <h1 className="text-2xl font-bold">Something went wrong</h1>
       <pre className="text-xs bg-muted/40 border rounded-md p-4 max-w-[80%] whitespace-normal">
         {props.error?.message}
       </pre>
-      <div>
-        If this is an issue with marimo, please report it on{" "}
-        <a href={Constants.issuesPage} target="_blank" className="underline">
-          GitHub
-        </a>
-        .
+      <div className="flex flex-wrap items-center justify-center gap-2">
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild={true}>
+            <Button variant="outline">Report an issue</Button>
+          </DialogTrigger>
+          {open && (
+            <Provider store={store}>
+              <TooltipProvider>
+                <Suspense fallback={null}>
+                  <FeedbackModal />
+                </Suspense>
+                <Toaster />
+              </TooltipProvider>
+            </Provider>
+          )}
+        </Dialog>
+        <Button
+          data-testid="reset-error-boundary-button"
+          onClick={props.resetErrorBoundary}
+          variant="outline"
+        >
+          Try again
+        </Button>
       </div>
-      <Button
-        data-testid="reset-error-boundary-button"
-        onClick={props.resetErrorBoundary}
-        variant="outline"
-      >
-        Try again
-      </Button>
     </div>
   );
 };