@marimo-team/islands 0.23.7-dev9 → 0.23.7

package/src/components/dependency-graph/minimap-content.tsx

@@ -21,6 +21,7 @@ import { extractCellPreview } from "./utils/cell-preview";
 
 interface MinimapCellProps {
   cellId: CellId;
+  index: number;
   cellPositions: Readonly<Record<CellId, number>>;
 }
 
@@ -67,7 +68,7 @@ const MinimapCell: React.FC<MinimapCellProps> = (props) => {
       className={cn(
         "group bg-transparent text-left w-full flex relative justify-between items-center",
         "border-none rounded cursor-pointer",
-        "h-[21px] pl-[51px] font-inherit",
+        "h-[21px] pl-[59px] font-inherit",
         isSelected
           ? "text-primary-foreground"
           : "text-(--gray-8) hover:text-(--gray-9)",
@@ -78,6 +79,12 @@ const MinimapCell: React.FC<MinimapCellProps> = (props) => {
       // transitions from current cell -> null -> new cell.
       onMouseDown={(e) => e.preventDefault()}
     >
+      <span
+        className="absolute left-0 top-0 h-full w-5 flex items-center justify-end pr-1.5 text-[10px] tabular-nums pointer-events-none select-none text-(--gray-9)"
+        aria-hidden="true"
+      >
+        {props.index}
+      </span>
       <div
         className={cn(
           "group-hover:bg-(--gray-2) flex h-full w-full px-0.5 items-center rounded",
@@ -99,7 +106,7 @@ const MinimapCell: React.FC<MinimapCellProps> = (props) => {
       </div>
       <svg
         className={cn(
-          "absolute overflow-visible top-[10.5px] left-[calc(var(--spacing-extra-small,8px)+17px)] pointer-events-none",
+          "absolute overflow-visible top-[10.5px] left-[calc(var(--spacing-extra-small,8px)+25px)] pointer-events-none",
           isSelected ? "z-[1]" : "z-0",
           getTextColor({ cell, selectedCell }),
         )}
@@ -404,7 +411,11 @@ export const MinimapContent: React.FC = () => {
                   aria-hidden="true"
                 />
               )}
-              <MinimapCell cellId={cellId} cellPositions={cellPositions} />
+              <MinimapCell
+                cellId={cellId}
+                index={idx}
+                cellPositions={cellPositions}
+              />
             </React.Fragment>
           );
         })}

package/src/components/editor/actions/pair-with-agent-modal.tsx

@@ -18,14 +18,16 @@ import { assertNever } from "@/utils/assertNever";
 import { asRemoteURL, useRuntimeManager } from "@/core/runtime/config";
 import { API } from "@/core/network/api";
 
-type AgentTab = "claude" | "codex" | "opencode";
+type AgentTab = "claude" | "codex" | "opencode" | "prompt";
+
+const TERMINAL_TABS = ["claude", "codex", "opencode"] as const;
 
 function getMarimoCommand(): string {
   return import.meta.env.DEV ? "uv run marimo" : "uvx marimo@latest";
 }
 
-function getPromptCommand(
-  agent: AgentTab,
+function getTerminalCommand(
+  agent: Exclude<AgentTab, "prompt">,
   url: string,
   withToken: boolean,
 ): string {
@@ -43,6 +45,21 @@ function getPromptCommand(
   }
 }
 
+function getRawPrompt(url: string, token: string | null): string {
+  const tokenHint = token
+    ? `\n\nUse this auth token when calling \`execute-code.sh\`: \`execute-code.sh --url '${url}' --token '${token}'\`.`
+    : "";
+  return [
+    "Use the /marimo-pair skill to pair-program on a running marimo notebook.",
+    "",
+    `Connect to the notebook at: ${url}`,
+    "",
+    `Use \`execute-code.sh --url ${url}\` from the marimo-pair skill to execute code in the notebook.${tokenHint}`,
+    "",
+    "Once you are connected, send a fun toast (mo.status.toast(...)) to the user inside marimo letting them know you're ready to pair.",
+  ].join("\n");
+}
+
 function maskToken(token: string): string {
   if (token.length <= 4) {
     return "****";
@@ -52,6 +69,13 @@ function maskToken(token: string): string {
 
 const SKILL_INSTALL = "npx skills add marimo-team/marimo-pair";
 
+const AGENT_LABELS: Record<AgentTab, string> = {
+  claude: "Claude",
+  codex: "Codex",
+  opencode: "OpenCode",
+  prompt: "Prompt",
+};
+
 function useAuthToken(): string | null {
   const [token, setToken] = useState<string | null>(null);
   useEffect(() => {
@@ -75,10 +99,9 @@ export const PairWithAgentModal: React.FC<{
   const authToken = useAuthToken();
   const hasToken = Boolean(authToken);
   const remoteUrl = runtimeManager.httpURL.toString();
-  const promptCommand = getPromptCommand(activeTab, remoteUrl, hasToken);
 
   return (
-    <DialogContent className="sm:max-w-lg">
+    <DialogContent className="sm:max-w-2xl">
       <DialogHeader>
         <DialogTitle>Pair with an agent</DialogTitle>
         <DialogDescription>
@@ -96,49 +119,75 @@ export const PairWithAgentModal: React.FC<{
       </DialogHeader>
 
       <div className="flex flex-col gap-4 py-2">
-        <div className="flex flex-col gap-2">
-          <span className="text-sm font-medium">1. Install the skill</span>
-          <CommandBlock command={SKILL_INSTALL} />
-        </div>
-
-        <div className="flex flex-col gap-2">
-          <span className="text-sm font-medium">2. Run in your terminal</span>
-          <Tabs
-            value={activeTab}
-            onValueChange={(v) => setActiveTab(v as AgentTab)}
-          >
-            <TabsList className="w-full">
-              <TabsTrigger value="claude" className="flex-1">
-                Claude
-              </TabsTrigger>
-              <TabsTrigger value="codex" className="flex-1">
-                Codex
+        <Tabs
+          value={activeTab}
+          onValueChange={(v) => setActiveTab(v as AgentTab)}
+        >
+          <TabsList className="w-full">
+            {(["claude", "codex", "opencode", "prompt"] as const).map((tab) => (
+              <TabsTrigger key={tab} value={tab} className="flex-1">
+                {AGENT_LABELS[tab]}
               </TabsTrigger>
-              <TabsTrigger value="opencode" className="flex-1">
-                OpenCode
-              </TabsTrigger>
-            </TabsList>
+            ))}
+          </TabsList>
 
-            <TabsContent value="claude" className="mt-3">
-              <CommandBlock command={promptCommand} />
-            </TabsContent>
-            <TabsContent value="codex" className="mt-3">
-              <CommandBlock command={promptCommand} />
+          {TERMINAL_TABS.map((tab) => (
+            <TabsContent
+              key={tab}
+              value={tab}
+              className="mt-4 flex flex-col gap-4"
+            >
+              <Step
+                index={1}
+                title="Install the skill"
+                hint="Run once per machine."
+              >
+                <CommandBlock command={SKILL_INSTALL} />
+              </Step>
+              <Step index={2} title="Run in your terminal">
+                <CommandBlock
+                  command={getTerminalCommand(tab, remoteUrl, hasToken)}
+                />
+              </Step>
+              {hasToken && authToken && (
+                <Step index={3} title="Paste when prompted for a token">
+                  <CommandBlock
+                    command={authToken}
+                    display={maskToken(authToken)}
+                  />
+                </Step>
+              )}
             </TabsContent>
-            <TabsContent value="opencode" className="mt-3">
-              <CommandBlock command={promptCommand} />
-            </TabsContent>
-          </Tabs>
-        </div>
-
-        {hasToken && authToken && (
-          <div className="flex flex-col gap-2">
-            <span className="text-sm font-medium">
-              3. Paste when prompted for token
-            </span>
-            <CommandBlock command={authToken} display={maskToken(authToken)} />
-          </div>
-        )}
+          ))}
+
+          <TabsContent value="prompt" className="mt-4 flex flex-col gap-4">
+            <Step
+              index={1}
+              title="Make sure the marimo-pair skill is available to your agent"
+              hint="Skip if your agent already has it."
+            >
+              <CommandBlock command={SKILL_INSTALL} />
+            </Step>
+            <Step
+              index={2}
+              title="Copy this prompt into your agent"
+              hint={
+                hasToken
+                  ? "Includes your auth token — keep it private."
+                  : undefined
+              }
+            >
+              <CommandBlock
+                command={getRawPrompt(remoteUrl, authToken)}
+                display={getRawPrompt(
+                  remoteUrl,
+                  authToken ? maskToken(authToken) : null,
+                )}
+                multiline={true}
+              />
+            </Step>
+          </TabsContent>
+        </Tabs>
       </div>
 
       <DialogFooter>
@@ -150,10 +199,28 @@ export const PairWithAgentModal: React.FC<{
   );
 };
 
-const CommandBlock: React.FC<{ command: string; display?: string }> = ({
-  command,
-  display,
-}) => {
+const Step: React.FC<{
+  index: number;
+  title: string;
+  hint?: string;
+  children: React.ReactNode;
+}> = ({ index, title, hint, children }) => (
+  <div className="flex flex-col gap-2">
+    <div className="flex items-baseline gap-2">
+      <span className="text-sm font-medium">
+        {index}. {title}
+      </span>
+      {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
+    </div>
+    {children}
+  </div>
+);
+
+const CommandBlock: React.FC<{
+  command: string;
+  display?: string;
+  multiline?: boolean;
+}> = ({ command, display, multiline = false }) => {
   const [copied, setCopied] = useState(false);
 
   const copy = Events.stopPropagation(async (e) => {
@@ -163,6 +230,30 @@ const CommandBlock: React.FC<{ command: string; display?: string }> = ({
     setTimeout(() => setCopied(false), 2000);
   });
 
+  if (multiline) {
+    return (
+      <div className="relative rounded-md bg-muted">
+        <pre className="max-h-64 overflow-auto whitespace-pre-wrap break-words px-3 py-2 pr-10 font-mono text-xs select-all">
+          {display ?? command}
+        </pre>
+        <Tooltip content="Copied!" open={copied}>
+          <Button
+            onClick={copy}
+            size="xs"
+            variant="ghost"
+            className="absolute right-1 top-1"
+          >
+            {copied ? (
+              <CheckIcon size={14} strokeWidth={1.5} />
+            ) : (
+              <CopyIcon size={14} strokeWidth={1.5} />
+            )}
+          </Button>
+        </Tooltip>
+      </div>
+    );
+  }
+
   return (
     <div className="flex items-center gap-2 rounded-md bg-muted px-3 py-2 font-mono text-xs">
       <code className="flex-1 select-all break-words">

package/src/components/editor/actions/useNotebookActions.tsx

@@ -53,6 +53,7 @@ import {
   canUndoDeletesAtom,
   getNotebook,
   hasDisabledCellsAtom,
+  undoLabelAtom,
   useCellActions,
 } from "@/core/cells/cells";
 import { disabledCellIds } from "@/core/cells/utils";
@@ -137,6 +138,7 @@ export function useNotebookActions() {
 
   const hasDisabledCells = useAtomValue(hasDisabledCellsAtom);
   const canUndoDeletes = useAtomValue(canUndoDeletesAtom);
+  const undoLabel = useAtomValue(undoLabelAtom);
   const { selectedLayout } = useLayoutState();
   const { setLayoutView } = useLayoutActions();
   const togglePresenting = useTogglePresenting();
@@ -525,7 +527,7 @@ export function useNotebookActions() {
     },
     {
       icon: <Undo2Icon size={14} strokeWidth={1.5} />,
-      label: "Undo cell deletion",
+      label: undoLabel,
       hidden: !canUndoDeletes || kioskMode,
       handle: () => {
         undoDeleteCell();

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

@@ -15,6 +15,7 @@ interface Props {
   connection: ConnectionStatus;
   isRunning: boolean;
   width: AppConfig["width"];
+  onReconnect?: () => void;
 }
 
 export const AppContainer: React.FC<PropsWithChildren<Props>> = ({
@@ -22,13 +23,18 @@ export const AppContainer: React.FC<PropsWithChildren<Props>> = ({
   connection,
   isRunning,
   children,
+  onReconnect,
 }) => {
   const connectionState = connection.state;
 
   return (
     <>
       <DynamicFavicon isRunning={isRunning} />
-      <StatusOverlay connection={connection} isRunning={isRunning} />
+      <StatusOverlay
+        connection={connection}
+        isRunning={isRunning}
+        onReconnect={onReconnect}
+      />
       <PyodideLoader>
         <WrappedWithSidebar>
           {/** oxlint-ignore-next-line -- ID is used by other components to grab the DOM element */}

package/src/components/editor/chrome/panels/context-aware-panel/context-aware-panel.tsx

@@ -133,7 +133,12 @@ export const ContextAwarePanel: React.FC = () => {
         onDragging={handleDragging}
         className="resize-handle border-border z-20 print:hidden border-l"
       />
-      <Panel defaultSize={25} minSize={25} maxSize={80}>
+      <Panel
+        data-testid="chrome-context-aware-panel"
+        defaultSize={25}
+        minSize={25}
+        maxSize={80}
+      >
         {renderBody()}
       </Panel>
     </>
@@ -167,7 +172,10 @@ const ResizableComponent = ({ children }: ResizableComponentProps) => {
   });
 
   return (
-    <div className="absolute z-40 right-0 h-full bg-background flex flex-row">
+    <div
+      data-testid="chrome-context-aware-panel"
+      className="absolute z-40 right-0 h-full bg-background flex flex-row"
+    >
       <div
         ref={handleRefs.left}
         className="w-1 h-full cursor-col-resize border-l"

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -537,6 +537,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
         {helperPanel}
         <Panel
           id="app-chrome-body"
+          data-testid="chrome-body"
           className={cn(isDeveloperPanelOpen && !isSidebarOpen && "border-l")}
         >
           <PanelGroup autoSaveId="marimo:chrome:v1:l1" direction="vertical">

package/src/components/editor/chrome/wrapper/footer-items/backend-status.tsx

@@ -57,7 +57,7 @@ export const BackendConnectionStatus: React.FC = () => {
     }
 
     try {
-      const isHealthy = await runtime.isHealthy();
+      const isHealthy = await runtime.probeHealth();
       setConnectionStatus(isHealthy ? "healthy" : "unhealthy");
       return {
         isHealthy,

package/src/components/editor/chrome/wrapper/footer.tsx

@@ -58,7 +58,10 @@ export const Footer: React.FC = () => {
   });
 
   return (
-    <footer className="h-10 py-1 gap-1 bg-background flex items-center text-muted-foreground text-md pl-2 pr-1 border-t border-border select-none print:hidden text-sm z-50 hide-on-fullscreen overflow-x-auto overflow-y-hidden scrollbar-thin">
+    <footer
+      data-testid="chrome-footer"
+      className="h-10 py-1 gap-1 bg-background flex items-center text-muted-foreground text-md pl-2 pr-1 border-t border-border select-none print:hidden text-sm z-50 hide-on-fullscreen overflow-x-auto overflow-y-hidden scrollbar-thin"
+    >
       <FooterItem
         className="h-full"
         tooltip={

package/src/components/editor/chrome/wrapper/panels.tsx

@@ -3,7 +3,10 @@ import type { PropsWithChildren } from "react";
 
 export const PanelsWrapper: React.FC<PropsWithChildren> = ({ children }) => {
   return (
-    <div className="flex flex-col flex-1 overflow-hidden absolute inset-0 print:relative">
+    <div
+      data-testid="chrome-wrapper"
+      className="flex flex-col flex-1 overflow-hidden absolute inset-0 print:relative"
+    >
       {children}
     </div>
   );

package/src/components/editor/chrome/wrapper/sidebar.tsx

@@ -115,7 +115,10 @@ export const Sidebar: React.FC = () => {
   ]);
 
   return (
-    <div className="h-full pt-4 pb-1 px-1 flex flex-col items-start text-muted-foreground text-md select-none text-sm z-50 dark:bg-background print:hidden hide-on-fullscreen">
+    <div
+      data-testid="chrome-sidebar"
+      className="h-full pt-4 pb-1 px-1 flex flex-col items-start text-muted-foreground text-md select-none text-sm z-50 dark:bg-background print:hidden hide-on-fullscreen"
+    >
       <ReorderableList<PanelDescriptor>
         value={sidebarItems}
         setValue={handleSetSidebarItems}

package/src/components/editor/controls/Controls.tsx

@@ -27,6 +27,7 @@ import { Functions } from "@/utils/functions";
 import {
   canUndoDeletesAtom,
   needsRunAtom,
+  undoLabelAtom,
   useCellActions,
 } from "../../../core/cells/cells";
 import { ConfigButton } from "../../app-config/app-config-button";
@@ -56,6 +57,7 @@ export const Controls = ({
   running,
 }: ControlsProps): JSX.Element => {
   const undoAvailable = useAtomValue(canUndoDeletesAtom);
+  const undoLabel = useAtomValue(undoLabelAtom);
   const needsRun = useAtomValue(needsRunAtom);
   const { undoDeleteCell } = useCellActions();
   const closed = connectionState === WebSocketState.CLOSED;
@@ -63,7 +65,7 @@ export const Controls = ({
   let undoControl: JSX.Element | null = null;
   if (!closed && undoAvailable) {
     undoControl = (
-      <Tooltip content="Undo cell deletion">
+      <Tooltip content={undoLabel}>
         <Button
           data-testid="undo-delete-cell"
           size="medium"
@@ -86,7 +88,10 @@ export const Controls = ({
       {!presenting && <FindReplace />}
 
       {!closed && (
-        <div className={topRightControls}>
+        <div
+          data-testid="chrome-controls-top-right"
+          className={topRightControls}
+        >
           {presenting && <LayoutSelect />}
           <NotebookMenuDropdown
             disabled={disabled}
@@ -101,7 +106,10 @@ export const Controls = ({
         </div>
       )}
 
-      <div className={cn(bottomRightControls)}>
+      <div
+        data-testid="chrome-controls-bottom-right"
+        className={cn(bottomRightControls)}
+      >
         <HideInKioskMode>
           <SaveComponent kioskMode={false} />
         </HideInKioskMode>

package/src/components/editor/file-tree/file-explorer.tsx

@@ -9,6 +9,7 @@ import {
   CopyMinusIcon,
   DownloadIcon,
   ExternalLinkIcon,
+  EyeIcon,
   EyeOffIcon,
   FilePlus2Icon,
   FolderPlusIcon,
@@ -198,6 +199,7 @@ export const FileExplorer: React.FC<{
       <Toolbar
         onRefresh={handleRefresh}
         onHidden={handleHiddenFilesToggle}
+        showHiddenFiles={showHiddenFiles}
         onCreateFile={handleCreateFile}
         onCreateNotebook={handleCreateNotebook}
         onCreateFolder={handleCreateFolder}
@@ -265,6 +267,7 @@ const INDENT_STEP = 15;
 interface ToolbarProps {
   onRefresh: () => void;
   onHidden: () => void;
+  showHiddenFiles: boolean;
   onCreateFile: () => void;
   onCreateNotebook: () => void;
   onCreateFolder: () => void;
@@ -275,6 +278,7 @@ interface ToolbarProps {
 const Toolbar = ({
   onRefresh,
   onHidden,
+  showHiddenFiles,
   onCreateFile,
   onCreateNotebook,
   onCreateFolder,
@@ -334,14 +338,20 @@ const Toolbar = ({
         data-testid="file-explorer-refresh-button"
         onClick={onRefresh}
       />
-      <Tooltip content="Toggle hidden files">
+      <Tooltip
+        content={showHiddenFiles ? "Hide hidden files" : "Show hidden files"}
+      >
         <Button
           data-testid="file-explorer-hidden-files-button"
           onClick={onHidden}
           variant="text"
           size="xs"
         >
-          <EyeOffIcon size={16} />
+          {showHiddenFiles ? (
+            <EyeIcon size={16} className="text-primary" />
+          ) : (
+            <EyeOffIcon size={16} />
+          )}
         </Button>
       </Tooltip>
       <Tooltip content="Collapse all folders">

package/src/components/editor/header/__tests__/status.test.tsx

@@ -0,0 +1,108 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+// @vitest-environment jsdom
+
+import { fireEvent, render } from "@testing-library/react";
+import { createStore, Provider as JotaiProvider } from "jotai";
+import type React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { viewStateAtom } from "@/core/mode";
+import {
+  type ConnectionStatus,
+  WebSocketClosedReason,
+  WebSocketState,
+} from "@/core/websocket/types";
+import { StatusOverlay } from "../status";
+
+function renderOverlay(
+  connection: ConnectionStatus,
+  onReconnect?: () => void,
+): ReturnType<typeof render> {
+  const store = createStore();
+  store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
+  const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+    <JotaiProvider store={store}>
+      <TooltipProvider>{children}</TooltipProvider>
+    </JotaiProvider>
+  );
+  return render(
+    <StatusOverlay
+      connection={connection}
+      isRunning={false}
+      onReconnect={onReconnect}
+    />,
+    { wrapper },
+  );
+}
+
+describe("StatusOverlay disconnect indicator", () => {
+  it("invokes onReconnect when the disconnect icon is clicked", () => {
+    const onReconnect = vi.fn();
+    const { getByTestId } = renderOverlay(
+      {
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+        reason: "kernel not found",
+      },
+      onReconnect,
+    );
+
+    const icon = getByTestId("disconnected-indicator") as HTMLButtonElement;
+    expect(icon.tagName).toBe("BUTTON");
+    expect(icon.disabled).toBe(false);
+    expect(icon.getAttribute("aria-label")).toBe("Reconnect to app");
+    fireEvent.click(icon);
+    expect(onReconnect).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders a disabled button when no onReconnect is provided", () => {
+    const { getByTestId } = renderOverlay({
+      state: WebSocketState.CLOSED,
+      code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+      reason: "kernel not found",
+    });
+
+    const button = getByTestId("disconnected-indicator");
+    expect((button as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it.each([
+    [
+      WebSocketClosedReason.MALFORMED_QUERY,
+      "the kernel did not recognize a request; please file a bug with marimo",
+    ],
+    [
+      WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+      "Failed to start kernel sandbox",
+    ],
+  ])(
+    "renders a disabled button for non-recoverable close reason %s",
+    (code, reason) => {
+      const onReconnect = vi.fn();
+      const { getByTestId } = renderOverlay(
+        { state: WebSocketState.CLOSED, code, reason },
+        onReconnect,
+      );
+
+      const button = getByTestId("disconnected-indicator") as HTMLButtonElement;
+      expect(button.disabled).toBe(true);
+      fireEvent.click(button);
+      expect(onReconnect).not.toHaveBeenCalled();
+    },
+  );
+
+  it("does not render the disconnect icon when another tab has taken over", () => {
+    const onReconnect = vi.fn();
+    const { queryByTestId } = renderOverlay(
+      {
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.ALREADY_RUNNING,
+        reason: "another browser tab is already connected to the kernel",
+        canTakeover: true,
+      },
+      onReconnect,
+    );
+
+    expect(queryByTestId("disconnected-indicator")).toBeNull();
+  });
+});