@marimo-team/islands 0.25.3-dev28 → 0.25.3-dev281

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";
@@ -66,7 +68,7 @@ import {
 import { BackendConnectionStatus } from "./footer-items/backend-status";
 import { LspStatus } from "./footer-items/lsp-status";
 import { PanelsWrapper } from "./panels";
-import { PendingAICells } from "./pending-ai-cells";
+import { PendingAIChangesBadge } from "./pending-ai-changes-badge";
 import { useAiPanelTab } from "./useAiPanel";
 import { useDependencyPanelTab } from "./useDependencyPanelTab";
 import { handleDragging } from "./utils";
@@ -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>
   );
@@ -541,6 +558,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
                   )}
                 />
                 {panel.label}
+                {panel.type === "ai" && <PendingAIChangesBadge />}
               </div>
             )}
           />
@@ -562,7 +580,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}
@@ -601,7 +619,6 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
         </Panel>
         <ContextAwarePanel />
       </PanelGroup>
-      <PendingAICells />
       <ErrorBoundary>
         <TooltipProvider>
           <Footer />

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

@@ -17,10 +17,10 @@ import {
 } from "@/components/ui/popover";
 import {
   type Attachment,
-  agentAttachmentsAtom,
   attachmentLabel,
-} from "@/core/attachments/state";
-import { agentToast } from "@/core/attachments/toast";
+  useNotebookAttachments,
+} from "@/core/notebook";
+import { agentToast } from "@/components/editor/agent-toast";
 import { pairConfigAtom } from "@/core/config/pair";
 import { stableSessionIdAtom } from "@/core/kernel/session";
 import { API } from "@/core/network/api";
@@ -29,7 +29,7 @@ import { FooterItem } from "../footer-item";
 
 export function AttachmentStatus() {
   const hostEnabled = useAtomValue(pairConfigAtom)?.hostEnabled;
-  const agents = useAtomValue(agentAttachmentsAtom);
+  const agents = useNotebookAttachments("agent");
   const [open, setOpen] = useState(false);
   const previous = useRef(new Set<string>());
   const automatic = useRef(false);

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

@@ -14,7 +14,7 @@ import {
   isAppConnected,
   isAppConnecting,
   isAppNotStarted,
-} from "@/core/websocket/connection-utils";
+} from "@/core/session/connection-utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInterval } from "@/hooks/useInterval";
 import { Strings } from "@/utils/strings";

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

@@ -0,0 +1,54 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { atom, useAtomValue } from "jotai";
+import { AlertCircleIcon } from "lucide-react";
+import type React from "react";
+import { activeDocumentModelAtom } from "@/core/session/active-notebook";
+import { FooterItem } from "../footer-item";
+
+/** The active notebook's document sync status, or null without a model. */
+const syncStatusAtom = atom((get) => {
+  const model = get(activeDocumentModelAtom);
+  return model === null ? null : get(model.syncStatusAtom);
+});
+
+/**
+ * Shown when this client's edits stop reaching the server.
+ *
+ * Typing keeps working locally and Run still uses the editor's code, but
+ * other clients stop seeing the edits and Save fails until they are
+ * through. A rejected edit is retried on click.
+ */
+export const DocumentSyncStatus: React.FC = () => {
+  const model = useAtomValue(activeDocumentModelAtom);
+  const status = useAtomValue(syncStatusAtom);
+  if (model === null || status === null || status.status !== "error") {
+    return null;
+  }
+  const retry = status.retryable
+    ? () => {
+        // The status shows the outcome, so a failed retry needs no handling.
+        model.retry().catch(() => undefined);
+      }
+    : undefined;
+  const detail = status.problem?.detail ?? status.error.message;
+  return (
+    <FooterItem
+      tooltip={
+        <div className="w-[260px] space-y-1">
+          <div>Edits are not reaching the server.</div>
+          <div className="text-muted-foreground">{detail}</div>
+          <div>
+            {retry ? "Click to retry." : "Reload the page to continue."}
+          </div>
+        </div>
+      }
+      selected={false}
+      onClick={retry}
+      aria-label="Edits are not reaching the server"
+      data-testid="footer-document-sync"
+    >
+      <AlertCircleIcon className="w-4 h-4 text-destructive" />
+    </FooterItem>
+  );
+};

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

@@ -14,7 +14,7 @@ import type {
   LspRestartResponse,
 } from "@/core/network/types";
 import { isWasm } from "@/core/wasm/utils";
-import { isAppConnected } from "@/core/websocket/connection-utils";
+import { isAppConnected } from "@/core/session/connection-utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInterval } from "@/hooks/useInterval";
 

package/src/components/editor/chrome/wrapper/footer-items/machine-stats.tsx

@@ -10,7 +10,7 @@ import { connectionAtom } from "@/core/network/connection";
 import { useRequestClient } from "@/core/network/requests";
 import type { UsageResponse } from "@/core/network/types";
 import { isWasm } from "@/core/wasm/utils";
-import { ConnectionState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/session/types";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInterval } from "@/hooks/useInterval";
 import { cn } from "@/utils/cn";

package/src/components/editor/chrome/wrapper/footer-items/runtime-settings.tsx

@@ -26,13 +26,7 @@ import { isWasm } from "@/core/wasm/utils";
 import { cn } from "@/utils/cn";
 import { FooterItem } from "../footer-item";
 
-interface RuntimeSettingsProps {
-  className?: string;
-}
-
-export const RuntimeSettings: React.FC<RuntimeSettingsProps> = ({
-  className,
-}) => {
+export const RuntimeSettings: React.FC = () => {
   const { saveUserConfig } = useRequestClient();
   const [config, setUserConfig] = useResolvedMarimoConfig();
 

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

@@ -18,9 +18,9 @@ import {
   connectionStatusAtom,
 } from "./footer-items/backend-status";
 import { CopilotStatusIcon } from "./footer-items/copilot-status";
+import { DocumentSyncStatus } from "./footer-items/document-sync-status";
 import { MachineStats } from "./footer-items/machine-stats";
 import { PyodideStatus } from "./footer-items/pyodide-status";
-import { RTCStatus } from "./footer-items/rtc-status";
 import { RuntimeSettings } from "./footer-items/runtime-settings";
 import { useSetDependencyPanelTab } from "./useDependencyPanelTab";
 
@@ -107,11 +107,11 @@ export const Footer: React.FC = () => {
       </ShowInKioskMode>
 
       <div className="flex items-center shrink-0 min-w-0">
+        <DocumentSyncStatus />
         <MachineStats />
         <AttachmentStatus />
         <AIStatusIcon />
         <CopilotStatusIcon />
-        <RTCStatus />
       </div>
     </footer>
   );

package/src/components/editor/chrome/wrapper/minimap-state.ts

@@ -104,7 +104,7 @@ export function buildCellGraph(
 export const cellGraphsAtom = atom((get) => {
   const cellIds = get(cellIdsAtom);
   const variables = get(variablesAtom);
-  return buildCellGraph(cellIds.inOrderIds, variables);
+  return buildCellGraph(cellIds, variables);
 });
 
 /**

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

@@ -1,41 +1,47 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtomValue, useStore } from "jotai";
-import { ChevronDown, ChevronUp, SparklesIcon } from "lucide-react";
-import { useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
+  type Edit,
   stagedAICellsAtom,
-  stagedGenerationInProgressAtom,
   useStagedCells,
 } from "@/core/ai/staged-cells";
-import type { CellId } from "@/core/cells/ids";
+import { chatGenerationInProgressAtom } from "@/core/ai/state";
+import { type CellId, HTMLCellId } from "@/core/cells/ids";
+import { scrollToCell } from "@/core/cells/scrollCellIntoView";
 import { getNextIndex } from "@/utils/arrays";
-import { cn } from "@/utils/cn";
-import {
-  AcceptCompletionButton,
-  RejectCompletionButton,
-} from "../../ai/completion-handlers";
-import { acceptStagedCell, rejectStagedCell } from "../../cell/StagedAICell";
-import { useRunCells } from "../../cell/useRunCells";
-import { scrollAndHighlightCell } from "../../links/cell-link";
+
+const REVIEW_LABELS: Record<Edit["type"], { accept: string; reject: string }> =
+  {
+    add_cell: { accept: "Keep", reject: "Discard" },
+    update_cell: { accept: "Keep", reject: "Discard" },
+    delete_cell: { accept: "Delete cell", reject: "Keep cell" },
+  };
 
 export const PendingAICells: React.FC = () => {
-  const [currentIndex, setCurrentIndex] = useState<number | null>(null);
+  const [selectedCellId, setSelectedCellId] = useState<CellId | null>(null);
 
   const stagedAiCells = useAtomValue(stagedAICellsAtom);
-  const generationInProgress = useAtomValue(stagedGenerationInProgressAtom);
+  const isGenerating = useAtomValue(chatGenerationInProgressAtom);
   const listStagedCells = [...stagedAiCells.keys()];
+  const selectedIndex =
+    selectedCellId === null ? -1 : listStagedCells.indexOf(selectedCellId);
+  const currentIndex = Math.max(0, selectedIndex);
   const store = useStore();
-  const { deleteStagedCell, removeStagedCell } = useStagedCells(store);
-  const runCell = useRunCells();
+  const { acceptStagedCell, rejectStagedCell } = useStagedCells();
+  const reviewedCellId = selectedIndex === -1 ? null : selectedCellId;
+  useReviewedCellMarker(reviewedCellId);
 
   if (stagedAiCells.size === 0) {
     return null;
   }
 
-  const scrollToCell = (cellId: CellId) => {
-    scrollAndHighlightCell(cellId, "focus");
+  const selectCell = (cellId: CellId) => {
+    setSelectedCellId(cellId);
+    scrollToCell(cellId);
   };
 
   const clickNext = (direction: "up" | "down") => {
@@ -44,76 +50,141 @@ export const PendingAICells: React.FC = () => {
       listStagedCells.length,
       direction,
     );
-    setCurrentIndex(newIndex);
-    scrollToCell(listStagedCells[newIndex]);
+    selectCell(listStagedCells[newIndex]);
   };
 
   const acceptAllCompletions = () => {
     for (const [cellId, edit] of stagedAiCells) {
-      acceptStagedCell(cellId, edit, removeStagedCell, deleteStagedCell);
+      acceptStagedCell(cellId, edit);
     }
   };
 
   const rejectAllCompletions = () => {
     for (const [cellId, edit] of stagedAiCells) {
-      rejectStagedCell(cellId, edit, removeStagedCell, deleteStagedCell);
+      rejectStagedCell(cellId, edit);
     }
   };
 
-  const runAllCells = () => {
-    const cellsToRun = listStagedCells.filter(
-      (cellId) => stagedAiCells.get(cellId)?.type !== "delete_cell",
-    );
-    runCell(cellsToRun);
-  };
+  const selectedCell = listStagedCells[currentIndex];
+  const selectedEdit = stagedAiCells.get(selectedCell);
+  const hasMultipleCells = listStagedCells.length > 1;
 
-  const cyanShadow = "shadow-[0_0_6px_0_#00A2C733]";
+  const resolveSelected = (decision: "accept" | "reject") => {
+    if (!selectedEdit || store.get(chatGenerationInProgressAtom)) {
+      return;
+    }
+    if (decision === "accept") {
+      acceptStagedCell(selectedCell, selectedEdit);
+    } else {
+      rejectStagedCell(selectedCell, selectedEdit);
+    }
+    if (hasMultipleCells) {
+      clickNext("up");
+    } else {
+      setSelectedCellId(null);
+    }
+  };
 
   return (
-    <div
-      className={cn(
-        "fixed bottom-16 left-1/2 transform -translate-x-1/2 z-50 bg-background/95 backdrop-blur-sm supports-backdrop-filter:bg-background/80 border border-border rounded-lg px-3 py-2 flex items-center justify-between gap-2.5 w-100",
-        cyanShadow,
-      )}
+    <section
+      aria-label="Review AI changes"
+      className="@container/review shrink-0 border-t border-border bg-background px-3 py-2 text-sm"
     >
-      <SparklesIcon className="h-4 w-4 text-primary" />
-
-      <div className="flex items-center">
-        <Button variant="ghost" size="icon" onClick={() => clickNext("up")}>
-          <ChevronUp className="h-3.5 w-3.5" />
-        </Button>
-        <span className="text-xs font-mono min-w-14 text-center">
-          {currentIndex === null
-            ? `${listStagedCells.length} pending`
-            : `${currentIndex + 1} / ${listStagedCells.length}`}
-        </span>
-        <Button variant="ghost" size="icon" onClick={() => clickNext("down")}>
-          <ChevronDown className="h-3.5 w-3.5" />
-        </Button>
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+        {hasMultipleCells && (
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="whitespace-nowrap text-muted-foreground">
+              {listStagedCells.length} cells changed
+            </span>
+            <Button
+              variant="outline"
+              size="sm"
+              className="chat-control chat-selector h-7 px-2 rounded-sm font-normal"
+              onClick={acceptAllCompletions}
+              disabled={isGenerating}
+            >
+              Keep all
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className="chat-control chat-selector h-7 px-2 rounded-sm font-normal"
+              onClick={rejectAllCompletions}
+              disabled={isGenerating}
+            >
+              Discard all
+            </Button>
+          </div>
+        )}
+        <div className="flex flex-wrap items-center gap-2">
+          {hasMultipleCells && (
+            <span
+              aria-hidden="true"
+              className="hidden h-4 w-px bg-border @min-[600px]/review:block"
+            />
+          )}
+          <div className="flex h-7 w-fit items-center">
+            {hasMultipleCells && (
+              <Button
+                aria-label="Previous pending AI cell"
+                variant="ghost"
+                size="icon"
+                className="chat-control size-6 rounded-sm"
+                onClick={() => clickNext("down")}
+              >
+                <ChevronLeft className="size-4" />
+              </Button>
+            )}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="chat-control h-6 px-1 rounded-sm font-normal tabular-nums whitespace-nowrap"
+              onClick={() => selectCell(selectedCell)}
+            >
+              <span aria-live="polite">
+                {hasMultipleCells
+                  ? `Cell ${currentIndex + 1} of ${listStagedCells.length}`
+                  : "1 cell changed"}
+              </span>
+            </Button>
+            {hasMultipleCells && (
+              <Button
+                aria-label="Next pending AI cell"
+                variant="ghost"
+                size="icon"
+                className="chat-control size-6 rounded-sm"
+                onClick={() => clickNext("up")}
+              >
+                <ChevronRight className="size-4" />
+              </Button>
+            )}
+          </div>
+          {selectedEdit &&
+            (["accept", "reject"] as const).map((decision) => (
+              <Button
+                key={decision}
+                variant="outline"
+                size="sm"
+                className="chat-control chat-selector h-7 px-2 rounded-sm font-normal"
+                disabled={isGenerating}
+                onClick={() => resolveSelected(decision)}
+              >
+                {REVIEW_LABELS[selectedEdit.type][decision]}
+              </Button>
+            ))}
+        </div>
       </div>
-
-      <div className="h-5 w-px bg-border" />
-
-      <div className="flex items-center gap-1.5">
-        <AcceptCompletionButton
-          multipleCompletions={true}
-          onAccept={acceptAllCompletions}
-          isLoading={generationInProgress}
-          label="Keep all"
-          size="xs"
-          buttonStyles="h-6.5"
-          playButtonStyles="h-6.5"
-          runCell={runAllCells}
-        />
-        <RejectCompletionButton
-          multipleCompletions={true}
-          onDecline={rejectAllCompletions}
-          disabled={generationInProgress}
-          size="xs"
-          label="Discard all"
-          className="h-6.5"
-        />
-      </div>
-    </div>
+    </section>
   );
 };
+
+function useReviewedCellMarker(cellId: CellId | null) {
+  useEffect(() => {
+    if (cellId === null) {
+      return;
+    }
+    const cell = document.getElementById(HTMLCellId.create(cellId));
+    cell?.setAttribute("data-ai-review-selected", "");
+    return () => cell?.removeAttribute("data-ai-review-selected");
+  }, [cellId]);
+}