@marimo-team/islands 0.25.3-dev250 → 0.25.3-dev251

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

@@ -4,6 +4,7 @@ import React, {
   Suspense,
   useEffect,
   useMemo,
+  useState,
 } from "react";
 import {
   type ImperativePanelHandle,
@@ -33,6 +34,7 @@ import { cn } from "@/utils/cn";
 import { ErrorBoundary } from "../../boundary/ErrorBoundary";
 import { raf2 } from "../../navigation/focus-utils";
 import { ContextAwarePanel } from "../panels/context-aware-panel/context-aware-panel";
+import { PanelHeaderActionsContext } from "../panels/panel-header";
 import { PanelSectionProvider } from "../panels/panel-context";
 import { RuntimeStatusToggle } from "../panels/runtime-status-toggle";
 import { useTheme } from "@/theme/useTheme";
@@ -327,99 +329,114 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     cache: <LazyCachePanel.Component />,
   };
 
+  const [headerActionsTarget, setHeaderActionsTarget] =
+    useState<HTMLDivElement | null>(null);
+
   const helpPaneBody = (
     <ErrorBoundary>
       <PanelSectionProvider value="sidebar">
-        <div className="flex flex-col h-full flex-1 overflow-hidden mr-[-4px]">
-          <div className="p-3 border-b flex justify-between items-center">
-            {selectedPanel === "dependencies" ? (
-              <div className="flex items-center justify-between flex-1">
-                <span className="text-sm text-(--slate-11) uppercase tracking-wide font-semibold">
-                  Dependencies
-                </span>
+        <PanelHeaderActionsContext.Provider
+          value={
+            selectedPanel === "ai" && (!agentsEnabled || aiPanelTab === "chat")
+              ? headerActionsTarget
+              : null
+          }
+        >
+          <div className="@container flex flex-col h-full flex-1 overflow-hidden mr-[-4px]">
+            <div className="p-3 border-b flex shrink-0 flex-wrap justify-between items-center gap-y-1">
+              {selectedPanel === "dependencies" ? (
+                <div className="flex items-center justify-between flex-1">
+                  <span className="text-sm text-(--slate-11) uppercase tracking-wide font-semibold">
+                    Dependencies
+                  </span>
+                  <Tabs
+                    value={dependencyPanelTab}
+                    onValueChange={(value) => {
+                      if (value === "minimap" || value === "graph") {
+                        setDependencyPanelTab(value);
+                      }
+                    }}
+                  >
+                    <TabsList>
+                      <TabsTrigger
+                        value="minimap"
+                        className="py-0.5 text-xs uppercase tracking-wide font-bold"
+                      >
+                        Minimap
+                      </TabsTrigger>
+                      <TabsTrigger
+                        value="graph"
+                        className="py-0.5 text-xs uppercase tracking-wide font-bold"
+                      >
+                        Graph
+                      </TabsTrigger>
+                    </TabsList>
+                  </Tabs>
+                </div>
+              ) : selectedPanel === "ai" && agentsEnabled ? (
                 <Tabs
-                  value={dependencyPanelTab}
+                  value={aiPanelTab}
                   onValueChange={(value) => {
-                    if (value === "minimap" || value === "graph") {
-                      setDependencyPanelTab(value);
+                    if (value === "chat" || value === "agents") {
+                      setAiPanelTab(value);
                     }
                   }}
                 >
                   <TabsList>
                     <TabsTrigger
-                      value="minimap"
+                      value="chat"
                       className="py-0.5 text-xs uppercase tracking-wide font-bold"
                     >
-                      Minimap
+                      Chat
                     </TabsTrigger>
                     <TabsTrigger
-                      value="graph"
+                      value="agents"
                       className="py-0.5 text-xs uppercase tracking-wide font-bold"
                     >
-                      Graph
+                      Agents
                     </TabsTrigger>
                   </TabsList>
                 </Tabs>
-              </div>
-            ) : selectedPanel === "ai" && agentsEnabled ? (
-              <Tabs
-                value={aiPanelTab}
-                onValueChange={(value) => {
-                  if (value === "chat" || value === "agents") {
-                    setAiPanelTab(value);
-                  }
-                }}
+              ) : (
+                <span className="text-sm text-(--slate-11) uppercase tracking-wide font-semibold flex-1">
+                  {selectedPanel === "ai" ? "Chat" : selectedPanel}
+                </span>
+              )}
+              <div
+                ref={setHeaderActionsTarget}
+                className="sidebar-panel-actions ml-auto min-w-0"
+              />
+              {selectedPanel === "packages" && (
+                <RuntimeStatusToggle section="sidebar" />
+              )}
+              <Button
+                data-testid="close-helper-pane"
+                className="m-0"
+                size="xs"
+                variant="text"
+                onClick={() => setIsSidebarOpen(false)}
               >
-                <TabsList>
-                  <TabsTrigger
-                    value="chat"
-                    className="py-0.5 text-xs uppercase tracking-wide font-bold"
-                  >
-                    Chat
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="agents"
-                    className="py-0.5 text-xs uppercase tracking-wide font-bold"
+                <XIcon className="w-4 h-4" />
+              </Button>
+            </div>
+            <Suspense>
+              <TooltipProvider>
+                {Object.entries(SIDEBAR_PANELS).map(([key, Panel]) => (
+                  <LazyActivity
+                    key={key}
+                    mode={
+                      isSidebarOpen && selectedPanel === key
+                        ? "visible"
+                        : "hidden"
+                    }
                   >
-                    Agents
-                  </TabsTrigger>
-                </TabsList>
-              </Tabs>
-            ) : (
-              <span className="text-sm text-(--slate-11) uppercase tracking-wide font-semibold flex-1">
-                {selectedPanel}
-              </span>
-            )}
-            {selectedPanel === "packages" && (
-              <RuntimeStatusToggle section="sidebar" />
-            )}
-            <Button
-              data-testid="close-helper-pane"
-              className="m-0"
-              size="xs"
-              variant="text"
-              onClick={() => setIsSidebarOpen(false)}
-            >
-              <XIcon className="w-4 h-4" />
-            </Button>
+                    {Panel}
+                  </LazyActivity>
+                ))}
+              </TooltipProvider>
+            </Suspense>
           </div>
-          <Suspense>
-            <TooltipProvider>
-              {Object.entries(SIDEBAR_PANELS).map(([key, Panel]) => (
-                <LazyActivity
-                  key={key}
-                  mode={
-                    isSidebarOpen && selectedPanel === key
-                      ? "visible"
-                      : "hidden"
-                  }
-                >
-                  {Panel}
-                </LazyActivity>
-              ))}
-            </TooltipProvider>
-          </Suspense>
-        </div>
+        </PanelHeaderActionsContext.Provider>
       </PanelSectionProvider>
     </ErrorBoundary>
   );
@@ -562,7 +579,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
         {/* Panel content */}
         <Suspense fallback={<div />}>
           <PanelSectionProvider value="developer-panel">
-            <div className="flex-1 overflow-hidden">
+            <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
               {Object.entries(DEVELOPER_PANELS).map(([key, Panel]) => (
                 <LazyActivity
                   key={key}

package/src/components/editor/chrome/wrapper/pending-ai-cells.tsx

@@ -4,11 +4,8 @@ import { useAtomValue, useStore } from "jotai";
 import { ChevronDown, ChevronUp, SparklesIcon } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import {
-  stagedAICellsAtom,
-  stagedGenerationInProgressAtom,
-  useStagedCells,
-} from "@/core/ai/staged-cells";
+import { stagedAICellsAtom, useStagedCells } from "@/core/ai/staged-cells";
+import { chatGenerationInProgressAtom } from "@/core/ai/state";
 import type { CellId } from "@/core/cells/ids";
 import { getNextIndex } from "@/utils/arrays";
 import { cn } from "@/utils/cn";
@@ -24,7 +21,7 @@ export const PendingAICells: React.FC = () => {
   const [currentIndex, setCurrentIndex] = useState<number | null>(null);
 
   const stagedAiCells = useAtomValue(stagedAICellsAtom);
-  const generationInProgress = useAtomValue(stagedGenerationInProgressAtom);
+  const isGenerating = useAtomValue(chatGenerationInProgressAtom);
   const listStagedCells = [...stagedAiCells.keys()];
   const store = useStore();
   const { deleteStagedCell, removeStagedCell } = useStagedCells(store);
@@ -108,7 +105,7 @@ export const PendingAICells: React.FC = () => {
         <AcceptCompletionButton
           multipleCompletions={true}
           onAccept={acceptAllCompletions}
-          isLoading={generationInProgress}
+          isLoading={isGenerating}
           label="Keep all"
           size="xs"
           buttonStyles="h-6.5"
@@ -118,7 +115,7 @@ export const PendingAICells: React.FC = () => {
         <RejectCompletionButton
           multipleCompletions={true}
           onDecline={rejectAllCompletions}
-          disabled={generationInProgress}
+          disabled={isGenerating}
           size="xs"
           label="Discard all"
           className="h-6.5"

package/src/components/editor/chrome/wrapper/useAskAiAboutCell.ts

@@ -0,0 +1,36 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useSetAtom, useStore } from "jotai";
+import useEvent from "react-use-event-hook";
+import { useAIConfigActions } from "@/core/ai/config";
+import { CellContextProvider } from "@/core/ai/context/providers/cell";
+import { pendingAiPromptAtom } from "@/core/ai/state";
+import type { CellId } from "@/core/cells/ids";
+import { aiAtom } from "@/core/config/config";
+import { Logger } from "@/utils/Logger";
+import { useChromeActions } from "../state";
+import { aiPanelTabAtom } from "./useAiPanel";
+
+export function useAskAiAboutCell() {
+  const store = useStore();
+  const { openApplication } = useChromeActions();
+  const setAiPanelTab = useSetAtom(aiPanelTabAtom);
+  const { saveModeChange } = useAIConfigActions();
+  const setPendingPrompt = useSetAtom(pendingAiPromptAtom);
+
+  return useEvent(async (cellId: CellId) => {
+    const mode = store.get(aiAtom)?.mode;
+    if (mode !== "agent" && mode !== "code_mode") {
+      await saveModeChange("agent").catch(() =>
+        Logger.error("Failed to save mode change"),
+      );
+    }
+    setPendingPrompt({
+      prompt: `@${new CellContextProvider(store).asURI(cellId)} `,
+      submit: false,
+      append: true,
+    });
+    setAiPanelTab("chat");
+    openApplication("ai");
+  });
+}

package/src/components/editor/renderers/__tests__/add-cell-buttons.test.tsx

@@ -0,0 +1,18 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { expect, it } from "vitest";
+import type { CellColumnId } from "@/core/cells/layout";
+import { AddCellButtons } from "../cell-array";
+
+it("offers only cell languages in the add-cell tray", () => {
+  render(
+    <Provider store={createStore()}>
+      <AddCellButtons columnId={"column-1" as CellColumnId} />
+    </Provider>,
+  );
+  expect(
+    screen.getAllByRole("button").map((button) => button.textContent),
+  ).toEqual(["Python", "Markdown", "SQL"]);
+});

package/src/components/editor/renderers/cell-array.tsx

@@ -6,27 +6,18 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { useAtomValue } from "jotai";
-import {
-  DatabaseIcon,
-  SparklesIcon,
-  SquareCodeIcon,
-  SquareMIcon,
-} from "lucide-react";
+import { DatabaseIcon, SquareCodeIcon, SquareMIcon } from "lucide-react";
 import { useEffect } from "react";
-import { useOpenSettingsToTab } from "@/components/app-config/state";
 import { StartupLogsAlert } from "@/components/editor/alerts/startup-logs-alert";
 import { Cell } from "@/components/editor/notebook-cell";
 import { PackageAlert } from "@/components/editor/package-alert";
 import { SortableCellsProvider } from "@/components/sort/SortableCellsProvider";
 import { Button } from "@/components/ui/button";
-import { Tooltip } from "@/components/ui/tooltip";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { SETUP_CELL_ID } from "@/core/cells/ids";
 import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
 import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
-import { aiEnabledAtom, aiFeaturesEnabledAtom } from "@/core/config/config";
 import { canInteractWithAppAtom } from "@/core/network/connection";
-import { useBoolean } from "@/hooks/useBoolean";
 import { cn } from "@/utils/cn";
 import { Functions } from "@/utils/functions";
 import { type CellColumnId, findColumn, useLayout } from "@/core/cells/layout";
@@ -38,7 +29,6 @@ import type { AppConfig, UserConfig } from "../../../core/config/config-schema";
 import type { AppMode } from "../../../core/mode";
 import { useHotkey } from "../../../hooks/useHotkey";
 import { type Theme, useTheme } from "../../../theme/useTheme";
-import { AddCellWithAI } from "../ai/add-cell-with-ai";
 import { NotStartedConnectionAlert } from "../alerts/connecting-alert";
 import { FloatingOutline } from "../chrome/panels/outline/floating-outline";
 import { useChromeActions } from "../chrome/state";
@@ -259,29 +249,26 @@ const CellColumn: React.FC<{
   );
 };
 
-const AddCellButtons: React.FC<{
+export const AddCellButtons: React.FC<{
   columnId: CellColumnId;
   className?: string;
 }> = ({ columnId, className }) => {
   const { createCell } = useCellActions();
-  const [isAiButtonOpen, isAiButtonOpenActions] = useBoolean(false);
-  const aiEnabled = useAtomValue(aiEnabledAtom);
-  const aiFeaturesEnabled = useAtomValue(aiFeaturesEnabledAtom);
   const canInteractWithApp = useAtomValue(canInteractWithAppAtom);
-  const { handleClick } = useOpenSettingsToTab();
 
   const buttonClass = cn(
     "mb-0 rounded-none sm:px-4 md:px-5 lg:px-8 tracking-wide no-wrap whitespace-nowrap",
     "font-semibold opacity-70 hover:opacity-90 uppercase text-xs",
   );
 
-  const renderBody = () => {
-    if (aiEnabled && isAiButtonOpen) {
-      return <AddCellWithAI onClose={isAiButtonOpenActions.toggle} />;
-    }
-
-    return (
-      <>
+  return (
+    <div className="flex justify-center mt-4 pt-6 pb-32 group gap-4 w-full print:hidden">
+      <div
+        className={cn(
+          "border border-border rounded transition-all duration-200 overflow-hidden divide-x divide-border flex w-fit shadow-sm-solid-shade",
+          className,
+        )}
+      >
         <Button
           className={buttonClass}
           variant="text"
@@ -327,50 +314,6 @@ const AddCellButtons: React.FC<{
           <DatabaseIcon className="mr-2 size-4 shrink-0" />
           SQL
         </Button>
-        {aiEnabled && (
-          <Tooltip
-            content={
-              aiFeaturesEnabled ? null : (
-                <span>AI provider not found or Edit model not selected</span>
-              )
-            }
-            delayDuration={100}
-            asChild={false}
-          >
-            <Button
-              className={buttonClass}
-              variant="text"
-              size="sm"
-              disabled={!canInteractWithApp}
-              onClick={
-                aiFeaturesEnabled
-                  ? isAiButtonOpenActions.toggle
-                  : () => handleClick("ai", "ai-providers")
-              }
-            >
-              <SparklesIcon className="mr-2 size-4 shrink-0" />
-              Generate with AI
-            </Button>
-          </Tooltip>
-        )}
-      </>
-    );
-  };
-
-  return (
-    <div className="flex justify-center mt-4 pt-6 pb-32 group gap-4 w-full print:hidden">
-      <div
-        className={cn(
-          "border border-border rounded transition-all duration-200 overflow-hidden divide-x divide-border flex",
-          !isAiButtonOpen && "w-fit shadow-sm-solid-shade",
-          isAiButtonOpen &&
-            "w-full max-w-4xl shadow-md-solid-shade shadow-(color:--blue-3)",
-          className,
-          // Always show the AI input when it's open
-          isAiButtonOpen && "opacity-100",
-        )}
-      >
-        {renderBody()}
       </div>
     </div>
   );

package/src/components/markdown/markdown-renderer.tsx

@@ -2,8 +2,7 @@
 
 import { EditorView } from "@codemirror/view";
 import { useAtomValue } from "jotai";
-import { BetweenHorizontalStartIcon } from "lucide-react";
-import { memo, Suspense, useState } from "react";
+import { createContext, memo, Suspense, useContext, useState } from "react";
 import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import {
   defaultRehypePlugins,
@@ -25,6 +24,8 @@ import "./markdown-renderer.css";
 
 const extensions = [EditorView.lineWrapping];
 
+const NotebookInsertionContext = createContext(true);
+
 interface CodeBlockProps {
   code: string;
   language: string | undefined;
@@ -91,13 +92,13 @@ const InsertCodeBlockButton = ({ code, language }: CodeBlockProps) => {
   return (
     <Button size="xs" variant="outline" onClick={handleInsertCode}>
       Add to Notebook
-      <BetweenHorizontalStartIcon className="ml-2 h-4 w-4" />
     </Button>
   );
 };
 
 const CodeBlock = ({ code, language }: CodeBlockProps) => {
   const { theme } = useTheme();
+  const allowNotebookInsertion = useContext(NotebookInsertionContext);
   const [value, setValue] = useState(code);
 
   if (value !== code) {
@@ -122,11 +123,13 @@ const CodeBlock = ({ code, language }: CodeBlockProps) => {
           onChange={setValue}
         />
       </Suspense>
-      <div className="flex justify-end mt-2 space-x-2">
+      <div className="flex justify-end mt-3 gap-2">
         <CopyButton size="xs" variant="outline" onClick={handleCopyCode}>
           Copy
         </CopyButton>
-        <InsertCodeBlockButton code={value} language={language} />
+        {allowNotebookInsertion && (
+          <InsertCodeBlockButton code={value} language={language} />
+        )}
       </div>
     </div>
   );
@@ -174,8 +177,10 @@ const COMPONENTS: Components = {
     if (language && typeof children === "string") {
       const code = children.trim();
       return (
-        <div>
-          <div className="text-xs text-muted-foreground pl-1">{language}</div>
+        <div className="my-4">
+          <div className="mb-1 text-xs text-muted-foreground pl-1">
+            {language}
+          </div>
           <CodeBlock code={code} language={language} />
         </div>
       );
@@ -199,17 +204,27 @@ const useMathPlugin = () => {
   return plugins;
 };
 
-export const MarkdownRenderer = memo(({ content }: { content: string }) => {
-  const plugins = useMathPlugin();
-  return (
-    <Streamdown
-      components={COMPONENTS}
-      plugins={plugins}
-      rehypePlugins={REHYPE_PLUGINS}
-      className="mo-markdown-renderer"
-    >
-      {content}
-    </Streamdown>
-  );
-});
+export const MarkdownRenderer = memo(
+  ({
+    content,
+    allowNotebookInsertion = true,
+  }: {
+    content: string;
+    allowNotebookInsertion?: boolean;
+  }) => {
+    const plugins = useMathPlugin();
+    return (
+      <NotebookInsertionContext.Provider value={allowNotebookInsertion}>
+        <Streamdown
+          components={COMPONENTS}
+          plugins={plugins}
+          rehypePlugins={REHYPE_PLUGINS}
+          className="mo-markdown-renderer"
+        >
+          {content}
+        </Streamdown>
+      </NotebookInsertionContext.Provider>
+    );
+  },
+);
 MarkdownRenderer.displayName = "MarkdownRenderer";

package/src/components/mcp/mcp-status-indicator.tsx

@@ -11,7 +11,7 @@ import { useMCPStatus } from "./hooks";
 
 /**
  * MCP Status indicator component
- * Shows a small icon with status color and a popover with detailed information
+ * Shows connection details and highlights states that need attention
  */
 export const MCPStatusIndicator: React.FC = () => {
   const { data: status, refetch, isFetching } = useMCPStatus();
@@ -41,13 +41,17 @@ export const MCPStatusIndicator: React.FC = () => {
     <Popover>
       <Tooltip content="MCP Status">
         <PopoverTrigger asChild={true}>
-          <Button aria-label="MCP status" variant="text" size="icon">
+          <Button
+            className="chat-control"
+            aria-label="MCP status"
+            variant="text"
+            size="icon"
+          >
             <PlugIcon
               className={cn(
-                "h-4 w-4",
-                status?.status === "ok" && "text-green-500",
-                status?.status === "partial" && "text-yellow-500",
-                status?.status === "error" && hasServers && "text-red-500",
+                "h-4 w-4 text-muted-foreground",
+                status?.status === "partial" && "text-(--amber-11)",
+                status?.status === "error" && hasServers && "text-destructive",
               )}
             />
           </Button>
@@ -79,7 +83,7 @@ export const MCPStatusIndicator: React.FC = () => {
                 </div>
               )}
               {status.error && (
-                <div className="text-xs text-red-500 bg-red-50 dark:bg-red-950/20 p-2 rounded">
+                <div className="text-xs text-destructive bg-destructive/10 p-2 rounded">
                   {status.error}
                 </div>
               )}
@@ -129,13 +133,13 @@ export const McpStatusText: React.FC<{
     <span
       className={cn(
         "text-xs font-medium",
-        status === "ok" && "text-green-500",
-        status === "partial" && "text-yellow-500",
-        status === "error" && "text-red-500",
-        status === "failed" && "text-red-500",
-        status === "disconnected" && "text-gray-500",
-        status === "pending" && "text-yellow-500",
-        status === "connected" && "text-green-500",
+        status === "ok" && "text-muted-foreground",
+        status === "partial" && "text-(--amber-11)",
+        status === "error" && "text-destructive",
+        status === "failed" && "text-destructive",
+        status === "disconnected" && "text-muted-foreground",
+        status === "pending" && "text-(--amber-11)",
+        status === "connected" && "text-muted-foreground",
       )}
     >
       {status}