@marimo-team/islands 0.25.3-dev20 → 0.25.3-dev200

package/src/components/editor/cell/useDeleteCell.tsx

@@ -3,35 +3,22 @@
 import useEvent from "react-use-event-hook";
 import { UndoButton } from "@/components/buttons/undo-button";
 import { toast } from "@/components/ui/use-toast";
-import {
-  hasOnlyOneCellAtom,
-  notebookAtom,
-  useCellActions,
-} from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
+import { notebookAtom } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
-import { useRequestClient } from "@/core/network/requests";
 import { store } from "@/core/state/jotai";
 
 export function useDeleteCellCallback() {
-  const { deleteCell, undoDeleteCell } = useCellActions();
-  const { sendDeleteCell } = useRequestClient();
+  const { deleteCells, undoDeleteCell } = useCellActions();
 
   return useEvent((opts: { cellId: CellId }) => {
-    // Can't delete the last cell
-    if (store.get(hasOnlyOneCellAtom)) {
-      return;
-    }
-
     const { cellId } = opts;
     const notebook = store.get(notebookAtom);
     const isEmptyCell = (notebook.cellData[cellId]?.code ?? "").trim() === "";
 
-    // Optimistic update
-    deleteCell({ cellId });
-    sendDeleteCell({ cellId: cellId }).catch(() => {
-      // Fall back on failure
-      undoDeleteCell();
-    });
+    if (!deleteCells({ cellIds: [cellId] })) {
+      return;
+    }
 
     if (!isEmptyCell) {
       const { dismiss } = toast({
@@ -53,33 +40,20 @@ export function useDeleteCellCallback() {
 }
 
 export function useDeleteManyCellsCallback() {
-  const { deleteCell, undoDeleteCell } = useCellActions();
-  const { sendDeleteCell } = useRequestClient();
+  const { deleteCells, undoDeleteCell } = useCellActions();
 
-  return useEvent(async (opts: { cellIds: CellId[] }) => {
-    // Can't delete the last cell
-    if (store.get(hasOnlyOneCellAtom)) {
+  return useEvent((opts: { cellIds: CellId[] }) => {
+    if (!deleteCells({ cellIds: opts.cellIds })) {
       return;
     }
 
-    const { cellIds } = opts;
-    for (const cellId of cellIds) {
-      await sendDeleteCell({ cellId }).then(() => {
-        deleteCell({ cellId });
-      });
-    }
-
     const { dismiss } = toast({
       title: "Cells deleted",
       action: (
         <UndoButton
           data-testid="undo-delete-button"
           onClick={() => {
-            for (const _cellId of cellIds) {
-              // This function does not take a cellId,
-              // so we just undo the number of cells that were deleted
-              undoDeleteCell();
-            }
+            undoDeleteCell();
             dismiss();
           }}
         />

package/src/components/editor/cell/useRunCells.ts

@@ -3,11 +3,8 @@
 import { closeCompletion } from "@codemirror/autocomplete";
 import { atom, useSetAtom } from "jotai";
 import useEvent from "react-use-event-hook";
-import {
-  getNotebook,
-  type NotebookState,
-  useCellActions,
-} from "@/core/cells/cells";
+import { getNotebook, type NotebookState } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import type { CellId } from "@/core/cells/ids";
 import { enabledCellIds, staleCellIds } from "@/core/cells/utils";
 import { getCurrentLanguageAdapter } from "@/core/codemirror/language/commands";

package/src/components/editor/cell/useShouldShowInterrupt.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { useEffect, useState } from "react";
+import { useDelayElapsed } from "@/hooks/useDelayElapsed";
 
 const DELAY_MS = 200;
 
@@ -10,17 +10,7 @@ const DELAY_MS = 200;
 export function useShouldShowInterrupt(running: boolean) {
   // Start a timer when the run starts.
   // After 200ms, show the interrupt button to avoid flickering.
-  const [hasRunLongEnough, setHasRunLongEnough] = useState(false);
-  useEffect(() => {
-    if (!running) {
-      return;
-    }
-    setHasRunLongEnough(false);
-    const timeout = setTimeout(() => {
-      setHasRunLongEnough(true);
-    }, DELAY_MS);
-    return () => clearTimeout(timeout);
-  }, [running]);
+  const hasRunLongEnough = useDelayElapsed(running ? DELAY_MS : 0);
 
   return running && hasRunLongEnough;
 }

package/src/components/editor/cell/useSplitCell.tsx

@@ -3,23 +3,26 @@
 import useEvent from "react-use-event-hook";
 import { UndoButton } from "@/components/buttons/undo-button";
 import { toast } from "@/components/ui/use-toast";
-import { getCellEditorView, useCellActions } from "@/core/cells/cells";
+import { getCellEditorView } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import type { CellId } from "@/core/cells/ids";
 import { getEditorCodeAsPython } from "@/core/codemirror/language/utils";
 
 export function useSplitCellCallback() {
   const { splitCell, undoSplitCell } = useCellActions();
 
-  return useEvent((opts: { cellId: CellId }) => {
+  return useEvent((opts: { cellId: CellId }): CellId | null => {
     // Save snapshot of code for undo
     const cellEditorView = getCellEditorView(opts.cellId);
     if (!cellEditorView) {
-      return;
+      return null;
     }
     const code = getEditorCodeAsPython(cellEditorView);
 
-    // Optimistic update
-    splitCell(opts);
+    const newCellId = splitCell(opts);
+    if (newCellId === null) {
+      return null;
+    }
 
     const { dismiss } = toast({
       title: "Cell split",
@@ -29,7 +32,7 @@ export function useSplitCellCallback() {
           size="sm"
           variant="outline"
           onClick={() => {
-            undoSplitCell({ ...opts, snapshot: code });
+            undoSplitCell({ ...opts, newCellId, snapshot: code });
             dismiss();
           }}
         >
@@ -37,5 +40,6 @@ export function useSplitCellCallback() {
         </UndoButton>
       ),
     });
+    return newCellId;
   });
 }

package/src/components/editor/chrome/components/__tests__/feedback-button.test.tsx

@@ -14,7 +14,7 @@ import { requestClientAtom } from "@/core/network/requests";
 import type { EnvironmentInfo } from "@/core/network/types";
 import { filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
-import { ConnectionState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/session/types";
 import * as copyModule from "@/utils/copy";
 import { FeedbackModal } from "../feedback-button";
 

package/src/components/editor/chrome/components/feedback-button.tsx

@@ -18,7 +18,6 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Skeleton } from "@/components/ui/skeleton";
-import { notebookAtom } from "@/core/cells/cells";
 import { Constants } from "@/core/constants";
 import {
   buildBugReportUrl,
@@ -39,7 +38,7 @@ import { connectionAtom } from "@/core/network/connection";
 import { requestClientAtom } from "@/core/network/requests";
 import { filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
-import { ConnectionState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/session/types";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { cn } from "@/utils/cn";
@@ -116,13 +115,8 @@ export const FeedbackModal: React.FC<{
     return requestClient.getEnvironmentInfo();
   }, [requestClient]);
 
-  const notebook = useAtomValue(notebookAtom);
   const errors = getCellErrorEntries(store);
-
-  const cells = notebook.cellIds.inOrderIds.map(
-    (cellId) => notebook.cellData[cellId],
-  );
-  const codeAvailable = useNotebookCodeAvailable(cells);
+  const codeAvailable = useNotebookCodeAvailable();
   const filename = useAtomValue(filenameAtom);
   const connection = useAtomValue(connectionAtom);
   const notebookSourceReason = getNotebookSourceUnavailableReason({

package/src/components/editor/chrome/panels/__tests__/packages-panel.test.tsx

@@ -18,11 +18,14 @@ import type {
   DependencyTreeNode,
   DependencyTreeResponse,
 } from "@/core/network/types";
-import { withPackageInvalidation } from "@/core/packages/package-data";
+import {
+  invalidatePackageData,
+  withPackageInvalidation,
+} from "@/core/packages/package-data";
 import { useInstallPackages } from "@/core/packages/useInstallPackage";
 import { sandboxAtom, sandboxSyncAtom } from "@/core/packages/sandbox-state";
 import { store } from "@/core/state/jotai";
-import { ConnectionState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/session/types";
 import PackagesPanel from "../packages-panel";
 import { PanelSectionProvider } from "../panel-context";
 import { RuntimeStatusToggle } from "../runtime-status-toggle";
@@ -143,6 +146,32 @@ describe("PackagesPanel", () => {
     expect(screen.queryByText("cycle")).not.toBeInTheDocument();
   });
 
+  it("collapses expanded nodes when the dependency tree is refreshed", async () => {
+    const { client } = renderPanel(
+      { kind: "sandbox", backend: "pixi" },
+      populatedTree,
+    );
+    fireEvent.click(await screen.findByRole("treeitem", { name: /polars/ }));
+    expect(screen.getByText("already in tree")).toBeInTheDocument();
+
+    vi.mocked(client.getDependencyTree).mockResolvedValue({
+      tree: structuredClone(populatedTree),
+      context: { kind: "sandbox", backend: "pixi" },
+    });
+    act(() => invalidatePackageData());
+
+    await waitFor(() =>
+      expect(client.getDependencyTree).toHaveBeenCalledTimes(2),
+    );
+    await waitFor(() =>
+      expect(screen.queryByText("already in tree")).not.toBeInTheDocument(),
+    );
+    expect(screen.getByRole("treeitem", { name: /polars/ })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+  });
+
   it("keeps the configured package manager changeable outside a sandbox", async () => {
     const { getPackageList } = renderPanel({
       kind: "package-manager",

package/src/components/editor/chrome/panels/__tests__/runtime-details.test.tsx

@@ -11,7 +11,7 @@ import { kernelStartupErrorAtom } from "@/core/errors/state";
 import { connectionAtom, startupProgressAtom } from "@/core/network/connection";
 import { requestClientAtom } from "@/core/network/requests";
 import { sandboxAtom } from "@/core/packages/sandbox-state";
-import { WebSocketClosedReason, ConnectionState } from "@/core/websocket/types";
+import { WebSocketClosedReason, ConnectionState } from "@/core/session/types";
 import PackagesPanel from "../packages-panel";
 import { PanelSectionProvider } from "../panel-context";
 import { RuntimeStatusToggle } from "../runtime-status-toggle";

package/src/components/editor/chrome/panels/__tests__/sandbox-recovery.test.tsx

@@ -24,7 +24,7 @@ import {
 } from "@/core/packages/sandbox-state";
 import { filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
-import { WebSocketClosedReason, ConnectionState } from "@/core/websocket/types";
+import { WebSocketClosedReason, ConnectionState } from "@/core/session/types";
 import { chromeAtom } from "../../state";
 import PackagesPanel from "../packages-panel";
 import { PanelSectionProvider } from "../panel-context";

package/src/components/editor/chrome/panels/cache-panel.tsx

@@ -104,6 +104,7 @@ const CachePanel = () => {
         {/* Header with Refresh Button */}
         <div className="flex items-center justify-end">
           <Button
+            aria-label="Refresh cache"
             variant="ghost"
             size="icon"
             className="h-6 w-6"

package/src/components/editor/chrome/panels/dependency-graph-panel.tsx

@@ -57,7 +57,7 @@ const DependencyGraphPanel: React.FC = () => {
           <DependencyGraph
             cellAtoms={cells}
             variables={variables}
-            cellIds={cellIds.inOrderIds}
+            cellIds={cellIds}
           />
         )}
       </div>

package/src/components/editor/chrome/panels/logs-panel.tsx

@@ -3,7 +3,8 @@
 import { FileTextIcon } from "lucide-react";
 import React from "react";
 import { ClearButton } from "@/components/buttons/clear-button";
-import { useCellActions, useCellLogs } from "@/core/cells/cells";
+import { useCellLogs } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import {
   type CellLog,
   formatLogTimestamp,

package/src/components/editor/chrome/panels/outline/__tests__/outline-keyboard.test.tsx

@@ -0,0 +1,84 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { OutlineItem } from "@/core/cells/outline";
+import { MiniMap, OutlineList } from "../floating-outline";
+import { scrollToOutlineItem } from "../useActiveOutline";
+
+vi.mock("../useActiveOutline", () => ({ scrollToOutlineItem: vi.fn() }));
+
+const items: OutlineItem[] = [
+  { name: "First", level: 1, by: { id: "first" } },
+  { name: "Second", html: "<em>Second</em>", level: 2, by: { id: "second" } },
+];
+
+describe("outline keyboard navigation", () => {
+  it.each([
+    { Component: MiniMap, role: "button" },
+    { Component: OutlineList, role: "link" },
+  ])(
+    "keeps the focused $role when other headings change",
+    ({ Component, role }) => {
+      const duplicate: OutlineItem = {
+        name: "Repeated second",
+        level: 2,
+        by: { id: "second" },
+      };
+      const initial = [...items, duplicate];
+      const props = {
+        activeHeaderId: undefined,
+        activeOccurrences: undefined,
+      };
+      const { rerender } = render(<Component {...props} items={initial} />);
+      const focused = screen.getByRole(role, { name: "Repeated second" });
+      focused.focus();
+
+      for (const by of [{ id: "inserted" }, { path: "second" }]) {
+        const inserted: OutlineItem = { name: "Inserted", level: 1, by };
+        rerender(<Component {...props} items={[inserted, ...initial]} />);
+        expect(screen.getByRole(role, { name: "Repeated second" })).toBe(
+          focused,
+        );
+        expect(focused).toHaveFocus();
+      }
+
+      rerender(
+        <Component {...props} items={[items[1], duplicate, items[0]]} />,
+      );
+      expect(screen.getByRole(role, { name: "Repeated second" })).toBe(focused);
+      expect(focused).toHaveFocus();
+      fireEvent.click(focused);
+      expect(scrollToOutlineItem).toHaveBeenLastCalledWith(duplicate, 1);
+    },
+  );
+
+  it("activates plain and rich headings with Enter", () => {
+    render(
+      <OutlineList
+        items={items}
+        activeHeaderId={undefined}
+        activeOccurrences={undefined}
+      />,
+    );
+    items.forEach((item) => {
+      const link = screen.getByRole("link", { name: item.name });
+      expect(link).toHaveAttribute("tabindex", "0");
+      fireEvent.keyDown(link, { key: "Enter" });
+      expect(scrollToOutlineItem).toHaveBeenLastCalledWith(item, 0);
+    });
+  });
+
+  it("names each minimap button", () => {
+    render(
+      <MiniMap
+        items={items}
+        activeHeaderId={undefined}
+        activeOccurrences={undefined}
+      />,
+    );
+    const button = screen.getByRole("button", { name: "Second" });
+    fireEvent.click(button);
+    expect(scrollToOutlineItem).toHaveBeenLastCalledWith(items[1], 0);
+  });
+});

package/src/components/editor/chrome/panels/outline/floating-outline.tsx

@@ -17,6 +17,8 @@ export const FloatingOutline: React.FC = () => {
     findOutlineElements(items),
   );
   const [isHovered, setIsHovered] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const isVisible = isHovered || isFocused;
 
   // Hide if < 2 items
   // It's kinda useless to have an outline with only one item
@@ -29,6 +31,12 @@ export const FloatingOutline: React.FC = () => {
     <div
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
+      onFocus={() => setIsFocused(true)}
+      onBlur={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          setIsFocused(false);
+        }
+      }}
       className={cn(
         "fixed top-[25vh] right-8 z-10000 print:hidden",
         // Hide on small screens
@@ -36,9 +44,10 @@ export const FloatingOutline: React.FC = () => {
       )}
     >
       <OutlineList
+        inert={!isVisible}
         className={cn(
           "-top-4 max-h-[70vh] bg-background rounded-lg shadow-lg absolute overflow-auto transition-all duration-300 w-[300px] border",
-          isHovered ? "left-[-280px] opacity-100" : "left-[300px] opacity-0",
+          isVisible ? "left-[-280px] opacity-100" : "left-[300px] opacity-0",
         )}
         items={items}
         activeHeaderId={activeHeaderId}
@@ -62,17 +71,20 @@ export const MiniMap: React.FC<{
   const seen = new Map<string, number>();
   return (
     <div className="flex flex-col gap-4 items-end max-h-[70vh] overflow-hidden">
-      {items.map((item, idx) => {
+      {items.map((item) => {
         const identifier = "id" in item.by ? item.by.id : item.by.path;
+        const selector = JSON.stringify(item.by);
         // Keep track of how many times we've seen this selector
-        const occurrences = seen.get(identifier) ?? 0;
-        seen.set(identifier, occurrences + 1);
+        const occurrences = seen.get(selector) ?? 0;
+        seen.set(selector, occurrences + 1);
 
         return (
-          <div
-            key={`${identifier}-${idx}`}
+          <button
+            type="button"
+            aria-label={item.name}
+            key={`${selector}-${occurrences}`}
             className={cn(
-              "h-[2px] bg-muted-foreground/60",
+              "h-[2px] bg-muted-foreground/60 focus-visible:outline focus-visible:outline-ring",
               item.level === 1 && "w-5",
               item.level === 2 && "w-4",
               item.level === 3 && "w-3",
@@ -91,24 +103,31 @@ export const MiniMap: React.FC<{
 
 export const OutlineList: React.FC<{
   className?: string;
+  inert?: boolean;
   items: OutlineItem[];
   activeHeaderId: string | undefined;
   activeOccurrences: number | undefined;
-}> = ({ items, activeHeaderId, activeOccurrences, className }) => {
+}> = ({ items, activeHeaderId, activeOccurrences, className, inert }) => {
   // Map of selector to its occurrences
   const seen = new Map<string, number>();
   return (
-    <div className={cn("flex flex-col overflow-auto py-4 pl-2", className)}>
-      {items.map((item, idx) => {
+    <div
+      inert={inert}
+      className={cn("flex flex-col overflow-auto py-4 pl-2", className)}
+    >
+      {items.map((item) => {
         const identifier = "id" in item.by ? item.by.id : item.by.path;
+        const selector = JSON.stringify(item.by);
         // Keep track of how many times we've seen this selector
-        const occurrences = seen.get(identifier) ?? 0;
-        seen.set(identifier, occurrences + 1);
+        const occurrences = seen.get(selector) ?? 0;
+        seen.set(selector, occurrences + 1);
 
-        const key = `${identifier}-${idx}`;
+        const key = `${selector}-${occurrences}`;
         const sharedProps = {
+          role: "link",
+          tabIndex: 0,
           className: cn(
-            "px-2 py-1 cursor-pointer hover:bg-accent/50 hover:text-accent-foreground rounded-l",
+            "px-2 py-1 cursor-pointer hover:bg-accent/50 hover:text-accent-foreground rounded-l focus-visible:outline focus-visible:outline-ring",
             item.level === 1 && "font-semibold",
             item.level === 2 && "ml-3",
             item.level === 3 && "ml-6",
@@ -118,6 +137,12 @@ export const OutlineList: React.FC<{
               "text-accent-foreground",
           ),
           onClick: () => scrollToOutlineItem(item, occurrences),
+          onKeyDown: (e: React.KeyboardEvent) => {
+            if (e.target === e.currentTarget && e.key === "Enter") {
+              e.preventDefault();
+              scrollToOutlineItem(item, occurrences);
+            }
+          },
         };
 
         if (item.html) {

package/src/components/editor/chrome/panels/outline/useActiveOutline.tsx

@@ -113,9 +113,10 @@ export function findOutlineElements(items: OutlineItem[]) {
   return items
     .map((item) => {
       const identifier = "id" in item.by ? item.by.id : item.by.path;
+      const selector = JSON.stringify(item.by);
       // Keep track of how many times we've seen this selector
-      const occurrences = seen.get(identifier) ?? 0;
-      seen.set(identifier, occurrences + 1);
+      const occurrences = seen.get(selector) ?? 0;
+      seen.set(selector, occurrences + 1);
 
       const el = findOutlineItem(item, occurrences);
       if (!el) {

package/src/components/editor/chrome/panels/packages-panel.tsx

@@ -31,6 +31,7 @@ import { usePackageAction } from "@/core/packages/usePackageAction";
 import { usePackageDependencies } from "@/core/packages/usePackageDependencies";
 import { useInstallPackages } from "@/core/packages/useInstallPackage";
 import { isWasm } from "@/core/wasm/utils";
+import { useStateForKey } from "@/hooks/useStateForKey";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
@@ -440,15 +441,11 @@ const DependencyTree: React.FC<{
   error?: Error | null;
   sandboxBackend: "uv" | "pixi" | null;
 }> = ({ tree, error, sandboxBackend }) => {
-  const [expandedNodes, setExpandedNodes] = React.useState<Set<string>>(
-    new Set(),
+  const [expandedNodes, setExpandedNodes] = useStateForKey(
+    tree,
+    () => new Set<string>(),
   );
 
-  // Reset tree to collapsed state when tree data changes (including refetches)
-  React.useEffect(() => {
-    setExpandedNodes(new Set());
-  }, [tree]);
-
   if (error) {
     return <ErrorBanner error={error} />;
   }

package/src/components/editor/chrome/panels/secrets-panel.tsx

@@ -66,6 +66,7 @@ const SecretsPanel: React.FC = () => {
           <div className="flex justify-start h-8 border-b">
             <button
               type="button"
+              aria-label="Add environment variable"
               className="border-r px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground"
               onClick={() =>
                 openModal(

package/src/components/editor/chrome/panels/session-panel.tsx

@@ -88,7 +88,7 @@ const SessionPanel: React.FC = () => {
               No variables defined
             </div>
           ) : (
-            <VariableTable cellIds={cellIds.inOrderIds} variables={variables} />
+            <VariableTable cellIds={cellIds} variables={variables} />
           )}
         </PanelAccordionContent>
       </PanelAccordionItem>

package/src/components/editor/chrome/panels/snippets-panel.tsx

@@ -22,7 +22,7 @@ import { Suspense } from "react";
 import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
-import { useCellActions } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { useLastFocusedCellId } from "@/core/cells/focus";
 import { useRequestClient } from "@/core/network/requests";
 import { LazyAnyLanguageCodeMirror } from "@/plugins/impl/code/LazyAnyLanguageCodeMirror";
@@ -71,7 +71,11 @@ const SnippetsPanel: React.FC = () => {
                 rootClassName="flex-1 border-r"
               />
               <ContributeSnippetButton>
-                <button className="float-right px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground">
+                <button
+                  type="button"
+                  aria-label="Contribute snippet"
+                  className="float-right px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground"
+                >
                   <PlusIcon className="h-4 w-4" />
                 </button>
               </ContributeSnippetButton>
@@ -121,18 +125,16 @@ const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
   onClose,
 }) => {
   const { theme } = useTheme();
-  const { createNewCell } = useCellActions();
+  const { createCell } = useCellActions();
   const lastFocusedCellId = useLastFocusedCellId();
 
   const handleInsertSnippet = () => {
     // Add below last focused cell in reverse order
     for (const section of snippet.sections.toReversed()) {
       if (section.code) {
-        createNewCell({
+        createCell({
+          after: lastFocusedCellId,
           code: section.code,
-          before: false,
-          cellId: lastFocusedCellId ?? "__end__",
-          // If the code already exists, skip creation
           skipIfCodeExists: true,
         });
       }
@@ -140,11 +142,7 @@ const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
   };
 
   const handleInsertCode = (code: string) => {
-    createNewCell({
-      code,
-      before: false,
-      cellId: lastFocusedCellId ?? "__end__",
-    });
+    createCell({ after: lastFocusedCellId, code });
   };
 
   return (

package/src/components/editor/chrome/panels/variable-panel.tsx

@@ -22,11 +22,7 @@ const VariablePanel: React.FC = () => {
   }
 
   return (
-    <VariableTable
-      className="flex-1"
-      cellIds={cellIds.inOrderIds}
-      variables={variables}
-    />
+    <VariableTable className="flex-1" cellIds={cellIds} variables={variables} />
   );
 };