@marimo-team/frontend 0.22.1-dev9 → 0.22.2-dev50

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

@@ -0,0 +1,179 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { CheckIcon, CopyIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { copyToClipboard } from "@/utils/copy";
+import { Events } from "@/utils/events";
+import { Tooltip } from "@/components/ui/tooltip";
+import { assertNever } from "@/utils/assertNever";
+import { asRemoteURL, useRuntimeManager } from "@/core/runtime/config";
+
+type AgentTab = "claude" | "codex" | "opencode";
+
+function getMarimoCommand(): string {
+  return import.meta.env.DEV ? "uv run marimo" : "uvx marimo@latest";
+}
+
+function getPromptCommand(
+  agent: AgentTab,
+  url: string,
+  withToken: boolean,
+): string {
+  const tokenFlag = withToken ? " --with-token" : "";
+  const base = `${getMarimoCommand()} pair prompt --url '${url}'${tokenFlag}`;
+  switch (agent) {
+    case "claude":
+      return `claude "$(${base} --claude)"`;
+    case "codex":
+      return `codex "$(${base} --codex)"`;
+    case "opencode":
+      return `opencode "$(${base} --opencode)"`;
+    default:
+      assertNever(agent);
+  }
+}
+
+function maskToken(token: string): string {
+  if (token.length <= 4) {
+    return "****";
+  }
+  return `${"*".repeat(Math.min(token.length - 4, 8))}${token.slice(-4)}`;
+}
+
+const SKILL_INSTALL = "npx skills add marimo-team/marimo-pair";
+
+function useAuthToken(): string | null {
+  const [token, setToken] = useState<string | null>(null);
+  useEffect(() => {
+    fetch(asRemoteURL("/auth/token").href, { credentials: "include" })
+      .then((res) =>
+        res.ok ? (res.json() as Promise<{ token: string | null }>) : null,
+      )
+      .then((data) => setToken(data?.token ?? null))
+      .catch(() => setToken(null));
+  }, []);
+  return token;
+}
+
+export const PairWithAgentModal: React.FC<{
+  onClose: () => void;
+}> = ({ onClose }) => {
+  const [activeTab, setActiveTab] = useState<AgentTab>("claude");
+  const runtimeManager = useRuntimeManager();
+  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">
+      <DialogHeader>
+        <DialogTitle>Pair with an agent</DialogTitle>
+        <DialogDescription>
+          Use an AI coding agent to pair-program on this notebook.{" "}
+          <a
+            href="https://links.marimo.app/marimo-pair"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline"
+          >
+            Learn more
+          </a>
+          .
+        </DialogDescription>
+      </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
+              </TabsTrigger>
+              <TabsTrigger value="opencode" className="flex-1">
+                OpenCode
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="claude" className="mt-3">
+              <CommandBlock command={promptCommand} />
+            </TabsContent>
+            <TabsContent value="codex" className="mt-3">
+              <CommandBlock command={promptCommand} />
+            </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>
+        )}
+      </div>
+
+      <DialogFooter>
+        <Button variant="secondary" onClick={onClose}>
+          Close
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  );
+};
+
+const CommandBlock: React.FC<{ command: string; display?: string }> = ({
+  command,
+  display,
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  const copy = Events.stopPropagation(async (e) => {
+    e.preventDefault();
+    await copyToClipboard(command);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  });
+
+  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">
+        {display ?? command}
+      </code>
+      <Tooltip content="Copied!" open={copied}>
+        <Button onClick={copy} size="xs" variant="ghost">
+          {copied ? (
+            <CheckIcon size={14} strokeWidth={1.5} />
+          ) : (
+            <CopyIcon size={14} strokeWidth={1.5} />
+          )}
+        </Button>
+      </Tooltip>
+    </div>
+  );
+};

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

@@ -65,8 +65,10 @@ import { useSplitCellCallback } from "../cell/useSplitCell";
 import { NameCellInput } from "./name-cell-input";
 import type { ActionButton } from "./types";
 
-export interface CellActionButtonProps
-  extends Pick<CellData, "name" | "config"> {
+export interface CellActionButtonProps extends Pick<
+  CellData,
+  "name" | "config"
+> {
   cellId: CellId;
   status: RuntimeState;
   hasOutput: boolean;

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

@@ -36,6 +36,7 @@ import {
   PresentationIcon,
   SettingsIcon,
   Share2Icon,
+  SparklesIcon,
   Undo2Icon,
   XCircleIcon,
   YoutubeIcon,
@@ -45,6 +46,7 @@ import { settingDialogAtom } from "@/components/app-config/state";
 import { MarkdownIcon } from "@/components/editor/cell/code/icons";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { renderShortcut } from "@/components/shortcuts/renderShortcut";
+import { PairWithAgentModal } from "@/components/editor/actions/pair-with-agent-modal";
 import { ShareStaticNotebookModal } from "@/components/static-html/share-modal";
 import { toast } from "@/components/ui/use-toast";
 import {
@@ -343,6 +345,14 @@ export function useNotebookActions() {
       ],
     },
 
+    {
+      icon: <SparklesIcon size={14} strokeWidth={1.5} />,
+      label: "Pair with an agent",
+      handle: async () => {
+        openModal(<PairWithAgentModal onClose={closeModal} />);
+      },
+    },
+
     {
       icon: <Share2Icon size={14} strokeWidth={1.5} />,
       label: "Share",

package/src/components/editor/ai/add-cell-with-ai.tsx

@@ -122,7 +122,7 @@ export const AddCellWithAI: React.FC<{
     transport: new StreamingChunkTransport(
       {
         api: runtimeManager.getAiURL("completion").toString(),
-        headers: runtimeManager.headers(),
+        headers: () => runtimeManager.headers(),
         prepareSendMessagesRequest: async (options) => {
           const completionBody = await buildCompletionRequestBody(
             options.messages,
@@ -136,6 +136,7 @@ export const AddCellWithAI: React.FC<{
           };
 
           return {
+            api: runtimeManager.getAiURL("completion").toString(),
             body: body,
           };
         },

package/src/components/editor/ai/ai-completion-editor.tsx

@@ -156,7 +156,7 @@ export const AiCompletionEditor: React.FC<Props> = ({
       // Use complete to pass the prompt directly, else input might be empty
       complete(initialPrompt);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, [triggerImmediately]);
 
   // Focus the input

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

@@ -31,7 +31,7 @@ export const AppContainer: React.FC<PropsWithChildren<Props>> = ({
       <StatusOverlay connection={connection} isRunning={isRunning} />
       <PyodideLoader>
         <WrappedWithSidebar>
-          {/** biome-ignore lint/correctness/useUniqueElementIds: ID is used by other components to grab the DOM element */}
+          {/** oxlint-ignore-next-line -- ID is used by other components to grab the DOM element */}
           <div
             id="App"
             data-config-width={width}

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

@@ -16,11 +16,10 @@ import "./cell-status.css";
 import { formatDistanceToNow } from "date-fns";
 import { Time } from "@/utils/time";
 
-export interface CellStatusComponentProps
-  extends Pick<
-    CellRuntimeState,
-    "status" | "runStartTimestamp" | "interrupted" | "lastRunStartTimestamp"
-  > {
+export interface CellStatusComponentProps extends Pick<
+  CellRuntimeState,
+  "status" | "runStartTimestamp" | "interrupted" | "lastRunStartTimestamp"
+> {
   editing: boolean;
   edited: boolean;
   disabled: boolean;

package/src/components/editor/cell/cell-context-menu.tsx

@@ -34,8 +34,10 @@ import {
   useCellActionButtons,
 } from "../actions/useCellActionButton";
 
-interface Props
-  extends Pick<CellActionButtonProps, "cellId" | "getEditorView"> {
+interface Props extends Pick<
+  CellActionButtonProps,
+  "cellId" | "getEditorView"
+> {
   children: React.ReactNode;
 }
 

package/src/components/editor/cell/code/cell-editor.tsx

@@ -47,7 +47,8 @@ import { useSplitCellCallback } from "../useSplitCell";
 import { LanguageToggles } from "./language-toggle";
 
 export interface CellEditorProps
-  extends Pick<CellRuntimeState, "status">,
+  extends
+    Pick<CellRuntimeState, "status">,
     Pick<CellData, "id" | "code" | "serializedEditorState" | "config"> {
   runCell: () => void;
   theme: Theme;
@@ -185,7 +186,7 @@ const CellEditorInternal = ({
         deleteCell: handleDelete,
         saveNotebook: saveOrNameNotebook,
         createManyBelow: (cells) => {
-          for (const code of [...cells].reverse()) {
+          for (const code of cells.toReversed()) {
             cellActions.createNewCell({
               code,
               before: false,

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

@@ -27,7 +27,8 @@ const toolbarItemVariants = cva(
 );
 
 interface ToolbarItemProps
-  extends VariantProps<typeof toolbarItemVariants>,
+  extends
+    VariantProps<typeof toolbarItemVariants>,
     React.HTMLAttributes<HTMLButtonElement> {
   tooltip: React.ReactNode;
   disabled?: boolean;

package/src/components/editor/chrome/components/contribute-snippet-button.tsx

@@ -1,6 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { Slot } from "@radix-ui/react-slot";
+import { Slot as SlotPrimitive } from "radix-ui";
+
+const Slot = SlotPrimitive.Slot;
+
 import React, { type PropsWithChildren } from "react";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { Button } from "@/components/ui/button";

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

@@ -1,6 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { Slot } from "@radix-ui/react-slot";
+import { Slot as SlotPrimitive } from "radix-ui";
+
+const Slot = SlotPrimitive.Slot;
+
 import React, { type PropsWithChildren } from "react";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import {

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

@@ -101,7 +101,7 @@ export const ContextAwarePanel: React.FC = () => {
   const renderBody = () => {
     return (
       <div className="pb-7 mb-4 h-full overflow-auto">
-        <div className="p-3 border-b flex justify-between items-center">
+        <div className="px-3 py-2 border-b flex justify-between items-center">
           {renderModeToggle()}
           <Slot name={SlotNames.CONTEXT_AWARE_PANEL_HEADER} />
           <Button

package/src/components/editor/chrome/panels/empty-state.tsx

@@ -18,6 +18,7 @@ export const PanelEmptyState = ({
     <div className="mx-6 my-6 flex flex-col gap-2">
       <div className="flex flex-row gap-2 items-center">
         {icon &&
+          // oxlint-disable-next-line react/no-clone-element
           React.cloneElement(icon, {
             className: "text-accent-foreground flex-shrink-0",
           })}

package/src/components/editor/chrome/panels/file-explorer-panel.tsx

@@ -7,7 +7,6 @@ import React, { useCallback, useMemo } from "react";
 import useResizeObserver from "use-resize-observer";
 import { StorageInspector } from "@/components/storage/storage-inspector";
 import { Accordion } from "@/components/ui/accordion";
-import { getFeatureFlag } from "@/core/config/feature-flag";
 import { storageNamespacesAtom } from "@/core/storage/state";
 import { cn } from "@/utils/cn";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
@@ -103,15 +102,6 @@ const FileExplorerPanel: React.FC = () => {
     bothOpen ? availableContent - storageMaxHeight : availableContent,
   );
 
-  const storageInspectorEnabled = getFeatureFlag("storage_inspector");
-  if (!storageInspectorEnabled) {
-    return (
-      <div ref={panelRef} className="h-full overflow-auto">
-        <FileExplorerComponent height={panelHeight} />
-      </div>
-    );
-  }
-
   return (
     <div ref={panelRef} className="h-full overflow-auto">
       <Accordion

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

@@ -125,7 +125,7 @@ const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
 
   const handleInsertSnippet = () => {
     // Add below last focused cell in reverse order
-    for (const section of [...snippet.sections].reverse()) {
+    for (const section of snippet.sections.toReversed()) {
       if (section.code) {
         createNewCell({
           code: section.code,

package/src/components/editor/chrome/panels/write-secret-modal.tsx

@@ -25,7 +25,7 @@ import type { ListSecretKeysResponse } from "@/core/network/types";
 
 // dotenv providers should be at the top
 export function sortProviders(providers: ListSecretKeysResponse["keys"]) {
-  return providers.sort((a, b) => {
+  return providers.toSorted((a, b) => {
     if (a.provider === "env") {
       return 1;
     }

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

@@ -14,7 +14,10 @@ import {
 import { Footer } from "./footer";
 import { Sidebar } from "./sidebar";
 import "./app-chrome.css";
-import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { Tooltip } from "radix-ui";
+
+const TooltipProvider = Tooltip.Provider;
+
 import { useAtom, useAtomValue } from "jotai";
 import { XIcon } from "lucide-react";
 import useEvent from "react-use-event-hook";

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

@@ -13,6 +13,7 @@ import type {
   LspRestartRequest,
   LspRestartResponse,
 } from "@/core/network/types";
+import { isWasm } from "@/core/wasm/utils";
 import { isAppConnected } from "@/core/websocket/connection-utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInterval } from "@/hooks/useInterval";
@@ -26,7 +27,7 @@ export const LspStatus: React.FC = () => {
   const setLspHealth = useSetAtom(lspHealthAtom);
 
   const { isFetching, data, refetch } = useAsyncData(async () => {
-    if (!isAppConnected(connection)) {
+    if (isWasm() || !isAppConnected(connection)) {
       return null;
     }
 

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

@@ -28,7 +28,7 @@ export function createStorage(location: "left" | "bottom"): PanelGroupStorage {
         const parsed = schema.parse(JSON.parse(storedValue));
         return JSON.stringify(
           Objects.mapValues(parsed, (value) => {
-            return value.reverse();
+            return value.toReversed();
           }),
         );
       } catch {
@@ -42,7 +42,7 @@ export function createStorage(location: "left" | "bottom"): PanelGroupStorage {
           const parsed = schema.parse(JSON.parse(value));
           value = JSON.stringify(
             Objects.mapValues(parsed, (value) => {
-              return value.reverse();
+              return value.toReversed();
             }),
           );
         } catch {

package/src/components/editor/connections/database/as-code.ts

@@ -964,7 +964,7 @@ export function generateDatabaseCode(
     ...generator.imports,
   ]);
 
-  const lines = [...imports].sort();
+  const lines = [...imports].toSorted();
   lines.push("");
   const secrets = secretsContainer.formatSecrets();
   if (secrets) {

package/src/components/editor/connections/form-renderers.tsx

@@ -72,7 +72,7 @@ export const SecretsProvider = ({ children }: SecretsProviderProps) => {
       .map((provider) => provider.name);
 
     return {
-      secretKeys: result.secrets.flatMap((secret) => secret.keys).sort(),
+      secretKeys: result.secrets.flatMap((secret) => secret.keys).toSorted(),
       providerNames: providerNames,
     };
   }, []);

package/src/components/editor/connections/storage/as-code.ts

@@ -214,7 +214,7 @@ export function generateStorageCode(
   }
 
   const allImports = new Set([...secrets.imports, ...result.imports]);
-  const lines = [...allImports].sort();
+  const lines = [...allImports].toSorted();
   lines.push("");
   const secretsStr = secrets.formatSecrets();
   if (secretsStr) {

package/src/components/editor/controls/keyboard-shortcuts.tsx

@@ -90,7 +90,7 @@ export const KeyboardShortcuts: React.FC = () => {
       },
     };
 
-    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    // oxlint-disable-next-line typescript/no-dynamic-delete
     delete newConfig.keymap.overrides[editingShortcut];
 
     setEditingShortcut(null);

package/src/components/editor/header/filename-input.tsx

@@ -1,6 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { PopoverAnchor } from "@radix-ui/react-popover";
+import { Popover as PopoverPrimitive } from "radix-ui";
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
 import { FilePenIcon } from "lucide-react";
 import { type JSX, useEffect, useRef, useState } from "react";
 import {

package/src/components/editor/links/cell-link-list.tsx

@@ -24,7 +24,7 @@ export const CellLinkList: React.FC<Props> = ({
   skipScroll,
 }) => {
   const cellIndex = useCellIds();
-  const sortedCellIds = [...cellIds].sort((a, b) => {
+  const sortedCellIds = cellIds.toSorted((a, b) => {
     return cellIndex.inOrderIds.indexOf(a) - cellIndex.inOrderIds.indexOf(b);
   });
 

package/src/components/editor/navigation/__tests__/navigation.test.ts

@@ -134,7 +134,7 @@ const mockRequestClient = MockRequestClient.create();
 // Helper to setup selection
 const setupSelection = () => {
   const { reducer, cellSelectionAtom } = selectionTesting;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   const dispatch = (action: any) => {
     store.set(cellSelectionAtom, (prev: CellSelectionState) =>
       reducer(prev, action),

package/src/components/editor/navigation/clipboard.ts

@@ -106,7 +106,7 @@ export function useCellClipboard() {
 
             // Create new cells with the copied data before/after the current cell
             const currentCellId = cellId;
-            const reversedCells = clipboardData.cells.reverse();
+            const reversedCells = clipboardData.cells.toReversed();
             for (const cell of reversedCells) {
               actions.createNewCell({
                 cellId: currentCellId,

package/src/components/editor/navigation/multi-cell-action-toolbar.tsx

@@ -167,7 +167,7 @@ export function useMultiCellActionButtons(cellIds: CellId[]) {
       }
 
       // Move cells in the appropriate order to maintain relative positions
-      const sortedCells = direction === "up" ? cellIds : [...cellIds].reverse();
+      const sortedCells = direction === "up" ? cellIds : cellIds.toReversed();
       sortedCells.forEach((cellId) => {
         moveCell({ cellId, before: direction === "up" });
       });
@@ -176,7 +176,7 @@ export function useMultiCellActionButtons(cellIds: CellId[]) {
 
   const sendSelectedCellsToTop = useEvent((cellIds: CellId[]) => {
     // Send in reverse order to maintain relative positions
-    [...cellIds].reverse().forEach((cellId) => {
+    cellIds.toReversed().forEach((cellId) => {
       sendToTop({ cellId });
     });
   });

package/src/components/editor/navigation/navigation.ts

@@ -401,7 +401,7 @@ export function useCellNavigationProps(
           }
 
           // Move cells in the appropriate order to maintain relative positions
-          [...cellIds].reverse().forEach((cellId) => {
+          cellIds.toReversed().forEach((cellId) => {
             actions.moveCell({ cellId, before: false });
           });
           return true;
@@ -480,7 +480,7 @@ export function useCellNavigationProps(
         }),
         "cell.sendToTop": addSingleHandler((cellIds) => {
           // Send in reverse order to maintain relative positions
-          [...cellIds].reverse().forEach((cellId) => {
+          cellIds.toReversed().forEach((cellId) => {
             actions.sendToTop({ cellId });
           });
           return true;
@@ -614,7 +614,7 @@ export function useCellNavigationProps(
         if (isShortcutPressed(shortcut as HotkeyAction, evt)) {
           // If the handler is a function, it's a single-cell handler
           // and we only operate on the currently focused cell.
-          if (handler instanceof Function) {
+          if (typeof handler === "function") {
             const success = handler(cellId);
             if (success) {
               evt.preventDefault();

package/src/components/editor/notebook-cell.tsx

@@ -704,7 +704,7 @@ const EditableCellComponent = ({
                     <a
                       href="https://links.marimo.app/reusable-definitions"
                       target="_blank"
-                      rel="noopener"
+                      rel="noreferrer"
                     >
                       <SquareFunctionIcon
                         size={16}

package/src/components/editor/output/JsonOutput.tsx

@@ -46,7 +46,7 @@ interface Props {
   valueTypes?: "json" | "python";
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 const CopyButton: React.FC<DataItemProps<any>> = ({ value }) => {
   const skipCopy =
     typeof value === "string" &&
@@ -83,13 +83,13 @@ const CopyButton: React.FC<DataItemProps<any>> = ({ value }) => {
   );
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 const JSONCopyButton: React.FC<DataItemProps<any>> = (props) => {
   // if
   return <CopyButton {...props} value={JSON.stringify(props.value, null, 2)} />;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 const PyCopyButton: React.FC<DataItemProps<any>> = (props) => {
   return <CopyButton {...props} value={getCopyValue(props.value)} />;
 };
@@ -233,7 +233,7 @@ const LEAF_RENDERERS: Record<string, LeafRenderer> = {
   },
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 const MIME_TYPES: DataType<any>[] = Object.entries(LEAF_RENDERERS).map(
   ([leafType, render]) => ({
     is: (value) => typeof value === "string" && value.startsWith(leafType),
@@ -329,7 +329,7 @@ const PYTHON_VALUE_TYPES = [
   URL_TYPE,
   OBJECT_TYPE,
   FALLBACK_RENDERER,
-].reverse();
+].toReversed();
 // Last one wins, so we reverse the array.
 
 const JSON_VALUE_TYPES = [
@@ -339,7 +339,7 @@ const JSON_VALUE_TYPES = [
   JSON_NONE_TYPE,
   JSON_OBJECT_TYPE,
   JSON_FALLBACK_RENDERER,
-].reverse();
+].toReversed();
 
 function leafData(leaf: string): string {
   return leafDataAndMimeType(leaf)[0];