@marimo-team/frontend 0.18.5-dev168 → 0.18.5-dev171

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

@@ -1,5 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import React, { type PropsWithChildren, Suspense, useEffect } from "react";
+import React, {
+  type PropsWithChildren,
+  Suspense,
+  useEffect,
+  useMemo,
+} from "react";
 import {
   type ImperativePanelHandle,
   Panel,
@@ -10,9 +15,10 @@ import { Footer } from "./footer";
 import { Sidebar } from "./sidebar";
 import "./app-chrome.css";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { useAtomValue } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { XIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { ReorderableList } from "@/components/ui/reorderable-list";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { LazyMount } from "@/components/utils/lazy-mount";
 import { cellErrorCount } from "@/core/cells/cells";
@@ -20,8 +26,9 @@ import { getFeatureFlag } from "@/core/config/feature-flag";
 import { cn } from "@/utils/cn";
 import { ErrorBoundary } from "../../boundary/ErrorBoundary";
 import { ContextAwarePanel } from "../panels/context-aware-panel/context-aware-panel";
-import { useChromeActions, useChromeState } from "../state";
-import { DEVELOPER_PANEL_TABS } from "../types";
+import { PanelSectionProvider } from "../panels/panel-context";
+import { panelLayoutAtom, useChromeActions, useChromeState } from "../state";
+import { PANEL_MAP, PANELS, type PanelDescriptor } from "../types";
 import { BackendConnectionStatus } from "./footer-items/backend-status";
 import { Minimap } from "./minimap";
 import { PanelsWrapper } from "./panels";
@@ -67,11 +74,67 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     setIsSidebarOpen,
     setIsDeveloperPanelOpen,
     setSelectedDeveloperPanelTab,
+    openApplication,
   } = useChromeActions();
   const sidebarRef = React.useRef<ImperativePanelHandle>(null);
   const developerPanelRef = React.useRef<ImperativePanelHandle>(null);
   const { aiPanelTab, setAiPanelTab } = useAiPanelTab();
   const errorCount = useAtomValue(cellErrorCount);
+  const [panelLayout, setPanelLayout] = useAtom(panelLayoutAtom);
+
+  // Convert current developer panel items to PanelDescriptors
+  const devPanelItems = useMemo(() => {
+    return panelLayout.developerPanel.flatMap((id) => {
+      const panel = PANEL_MAP.get(id);
+      return panel ? [panel] : [];
+    });
+  }, [panelLayout.developerPanel]);
+
+  const handleSetDevPanelItems = (items: PanelDescriptor[]) => {
+    setPanelLayout((prev) => ({
+      ...prev,
+      developerPanel: items.map((item) => item.type),
+    }));
+  };
+
+  const handleDevPanelReceive = (item: PanelDescriptor, fromListId: string) => {
+    // Remove from the source list
+    if (fromListId === "sidebar") {
+      setPanelLayout((prev) => ({
+        ...prev,
+        sidebar: prev.sidebar.filter((id) => id !== item.type),
+      }));
+
+      // If the moved item was selected in sidebar, select the first remaining item
+      if (selectedPanel === item.type) {
+        const remainingSidebar = panelLayout.sidebar.filter(
+          (id) => id !== item.type,
+        );
+        if (remainingSidebar.length > 0) {
+          openApplication(remainingSidebar[0]);
+        }
+      }
+    }
+
+    // Select the dropped item in developer panel
+    setSelectedDeveloperPanelTab(item.type);
+  };
+
+  // Get panels available for developer panel context menu
+  // Only show panels that are NOT in the sidebar
+  const availableDevPanels = useMemo(() => {
+    const sidebarIds = new Set(panelLayout.sidebar);
+    return PANELS.filter((p) => {
+      if (p.hidden) {
+        return false;
+      }
+      // Exclude panels that are in the sidebar
+      if (sidebarIds.has(p.type)) {
+        return false;
+      }
+      return true;
+    });
+  }, [panelLayout.sidebar]);
 
   // sync sidebar
   useEffect(() => {
@@ -160,60 +223,74 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
 
   const helpPaneBody = (
     <ErrorBoundary>
-      <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 === "ai" && agentsEnabled ? (
-            <Tabs
-              value={aiPanelTab}
-              onValueChange={(value) => {
-                if (value === "chat" || value === "agents") {
-                  setAiPanelTab(value);
-                }
-              }}
+      <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 === "ai" && agentsEnabled ? (
+              <Tabs
+                value={aiPanelTab}
+                onValueChange={(value) => {
+                  if (value === "chat" || value === "agents") {
+                    setAiPanelTab(value);
+                  }
+                }}
+              >
+                <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"
+                  >
+                    Agents
+                  </TabsTrigger>
+                </TabsList>
+              </Tabs>
+            ) : (
+              <span className="text-sm text-(--slate-11) uppercase tracking-wide font-semibold flex-1">
+                {selectedPanel}
+              </span>
+            )}
+            <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"
-                >
-                  Agents
-                </TabsTrigger>
-              </TabsList>
-            </Tabs>
-          ) : (
-            <span className="text-sm text-(--slate-11) uppercase tracking-wide font-semibold flex-1">
-              {selectedPanel}
-            </span>
-          )}
-          <Button
-            data-testid="close-helper-pane"
-            className="m-0"
-            size="xs"
-            variant="text"
-            onClick={() => setIsSidebarOpen(false)}
-          >
-            <XIcon className="w-4 h-4" />
-          </Button>
+              <XIcon className="w-4 h-4" />
+            </Button>
+          </div>
+          <Suspense>
+            <TooltipProvider>
+              {selectedPanel === "files" && <LazyFileExplorerPanel />}
+              {selectedPanel === "variables" && <LazySessionPanel />}
+              {selectedPanel === "dependencies" && <LazyDependencyGraphPanel />}
+              {selectedPanel === "packages" && <LazyPackagesPanel />}
+              {selectedPanel === "outline" && <LazyOutlinePanel />}
+              {selectedPanel === "documentation" && <LazyDocumentationPanel />}
+              {selectedPanel === "snippets" && <LazySnippetsPanel />}
+              {selectedPanel === "ai" && renderAiPanel()}
+              {selectedPanel === "errors" && <LazyErrorsPanel />}
+              {selectedPanel === "scratchpad" && <LazyScratchpadPanel />}
+              {selectedPanel === "tracing" && <LazyTracingPanel />}
+              {selectedPanel === "secrets" && <LazySecretsPanel />}
+              {selectedPanel === "logs" && <LazyLogsPanel />}
+              {selectedPanel === "terminal" && (
+                <LazyTerminal
+                  visible={isSidebarOpen}
+                  onClose={() => setIsSidebarOpen(false)}
+                />
+              )}
+              {selectedPanel === "cache" && <LazyCachePanel />}
+            </TooltipProvider>
+          </Suspense>
         </div>
-        <Suspense>
-          <TooltipProvider>
-            {selectedPanel === "files" && <LazyFileExplorerPanel />}
-            {selectedPanel === "variables" && <LazySessionPanel />}
-            {selectedPanel === "dependencies" && <LazyDependencyGraphPanel />}
-            {selectedPanel === "packages" && <LazyPackagesPanel />}
-            {selectedPanel === "outline" && <LazyOutlinePanel />}
-            {selectedPanel === "documentation" && <LazyDocumentationPanel />}
-            {selectedPanel === "snippets" && <LazySnippetsPanel />}
-            {selectedPanel === "ai" && renderAiPanel()}
-          </TooltipProvider>
-        </Suspense>
-      </div>
+      </PanelSectionProvider>
     </ErrorBoundary>
   );
 
@@ -281,36 +358,47 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
       <div className="flex flex-col h-full">
         {/* Panel header with tabs */}
         <div className="flex items-center justify-between border-b px-2 h-8 bg-background shrink-0">
-          <Tabs
-            value={selectedDeveloperPanelTab}
-            onValueChange={(v) =>
-              setSelectedDeveloperPanelTab(
-                v as typeof selectedDeveloperPanelTab,
-              )
-            }
-          >
-            <TabsList className="bg-transparent p-0 gap-1">
-              {DEVELOPER_PANEL_TABS.filter((tab) => !tab.hidden).map((tab) => (
-                <TabsTrigger
-                  key={tab.type}
-                  value={tab.type}
-                  className="text-sm gap-2 px-2 pt-1 pb-0.5 items-center leading-none data-[state=active]:bg-muted"
-                >
-                  {/* Color the Errors icon red when there are errors,
-                      so users see it when they open the developer panel */}
-                  <tab.Icon
-                    className={cn(
-                      "w-4 h-4",
-                      tab.type === "errors" &&
-                        errorCount > 0 &&
-                        "text-destructive",
-                    )}
-                  />
-                  {tab.label}
-                </TabsTrigger>
-              ))}
-            </TabsList>
-          </Tabs>
+          <ReorderableList<PanelDescriptor>
+            value={devPanelItems}
+            setValue={handleSetDevPanelItems}
+            getKey={(p) => p.type}
+            availableItems={availableDevPanels}
+            crossListDrag={{
+              dragType: "panels",
+              listId: "developer-panel",
+              onReceive: handleDevPanelReceive,
+            }}
+            getItemLabel={(panel) => (
+              <span className="flex items-center gap-2">
+                <panel.Icon className="w-4 h-4 text-muted-foreground" />
+                {panel.label}
+              </span>
+            )}
+            ariaLabel="Developer panel tabs"
+            className="flex flex-row gap-1"
+            minItems={0}
+            onAction={(panel) => setSelectedDeveloperPanelTab(panel.type)}
+            renderItem={(panel) => (
+              <div
+                className={cn(
+                  "text-sm flex gap-2 px-2 pt-1 pb-0.5 items-center leading-none rounded-sm cursor-pointer",
+                  selectedDeveloperPanelTab === panel.type
+                    ? "bg-muted"
+                    : "hover:bg-muted/50",
+                )}
+              >
+                <panel.Icon
+                  className={cn(
+                    "w-4 h-4",
+                    panel.type === "errors" &&
+                      errorCount > 0 &&
+                      "text-destructive",
+                  )}
+                />
+                {panel.label}
+              </div>
+            )}
+          />
           <div className="border-l border-border h-4 mx-1" />
           <BackendConnectionStatus />
           <div className="flex-1" />
@@ -323,60 +411,49 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
           </Button>
         </div>
         {/* Panel content */}
-        <div className="flex-1 overflow-hidden">
-          {selectedDeveloperPanelTab === "errors" && (
-            <LazyMount isOpen={isDeveloperPanelOpen}>
-              <Suspense fallback={<div />}>
-                <LazyErrorsPanel />
-              </Suspense>
-            </LazyMount>
-          )}
-          {selectedDeveloperPanelTab === "scratchpad" && (
-            <LazyMount isOpen={isDeveloperPanelOpen}>
-              <Suspense fallback={<div />}>
+        <Suspense fallback={<div />}>
+          <PanelSectionProvider value="developer-panel">
+            <div className="flex-1 overflow-hidden">
+              {selectedDeveloperPanelTab === "files" && (
+                <LazyFileExplorerPanel />
+              )}
+              {selectedDeveloperPanelTab === "variables" && (
+                <LazySessionPanel />
+              )}
+              {selectedDeveloperPanelTab === "dependencies" && (
+                <LazyDependencyGraphPanel />
+              )}
+              {selectedDeveloperPanelTab === "packages" && (
+                <LazyPackagesPanel />
+              )}
+              {selectedDeveloperPanelTab === "outline" && <LazyOutlinePanel />}
+              {selectedDeveloperPanelTab === "documentation" && (
+                <LazyDocumentationPanel />
+              )}
+              {selectedDeveloperPanelTab === "snippets" && (
+                <LazySnippetsPanel />
+              )}
+              {selectedDeveloperPanelTab === "ai" && renderAiPanel()}
+              {selectedDeveloperPanelTab === "errors" && <LazyErrorsPanel />}
+              {selectedDeveloperPanelTab === "scratchpad" && (
                 <LazyScratchpadPanel />
-              </Suspense>
-            </LazyMount>
-          )}
-          {selectedDeveloperPanelTab === "tracing" && (
-            <LazyMount isOpen={isDeveloperPanelOpen}>
-              <Suspense fallback={<div />}>
-                <LazyTracingPanel />
-              </Suspense>
-            </LazyMount>
-          )}
-          {selectedDeveloperPanelTab === "secrets" && (
-            <LazyMount isOpen={isDeveloperPanelOpen}>
-              <Suspense fallback={<div />}>
-                <LazySecretsPanel />
-              </Suspense>
-            </LazyMount>
-          )}
-          {selectedDeveloperPanelTab === "logs" && (
-            <LazyMount isOpen={isDeveloperPanelOpen}>
-              <Suspense fallback={<div />}>
-                <LazyLogsPanel />
-              </Suspense>
-            </LazyMount>
-          )}
-          {selectedDeveloperPanelTab === "terminal" && (
-            <LazyMount isOpen={isDeveloperPanelOpen}>
-              <Suspense fallback={<div />}>
-                <LazyTerminal
-                  visible={isDeveloperPanelOpen}
-                  onClose={() => setIsDeveloperPanelOpen(false)}
-                />
-              </Suspense>
-            </LazyMount>
-          )}
-          {selectedDeveloperPanelTab === "cache" && (
-            <LazyMount isOpen={isDeveloperPanelOpen}>
-              <Suspense fallback={<div />}>
-                <LazyCachePanel />
-              </Suspense>
-            </LazyMount>
-          )}
-        </div>
+              )}
+              {selectedDeveloperPanelTab === "tracing" && <LazyTracingPanel />}
+              {selectedDeveloperPanelTab === "secrets" && <LazySecretsPanel />}
+              {selectedDeveloperPanelTab === "logs" && <LazyLogsPanel />}
+              {/* LazyMount needed for Terminal to avoid spurious connection */}
+              {selectedDeveloperPanelTab === "terminal" && (
+                <LazyMount isOpen={isDeveloperPanelOpen}>
+                  <LazyTerminal
+                    visible={isDeveloperPanelOpen}
+                    onClose={() => setIsDeveloperPanelOpen(false)}
+                  />
+                </LazyMount>
+              )}
+              {selectedDeveloperPanelTab === "cache" && <LazyCachePanel />}
+            </div>
+          </PanelSectionProvider>
+        </Suspense>
       </div>
     </Panel>
   );

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

@@ -8,72 +8,105 @@ import { useMemo } from "react";
 import { ReorderableList } from "@/components/ui/reorderable-list";
 import { Tooltip } from "@/components/ui/tooltip";
 import { notebookQueuedOrRunningCountAtom } from "@/core/cells/cells";
-import { snippetsEnabledAtom } from "@/core/config/config";
 import { cn } from "@/utils/cn";
 import { FeedbackButton } from "../components/feedback-button";
-import { sidebarOrderAtom, useChromeActions, useChromeState } from "../state";
+import { panelLayoutAtom, useChromeActions, useChromeState } from "../state";
 import { PANEL_MAP, PANELS, type PanelDescriptor } from "../types";
 
 export const Sidebar: React.FC = () => {
-  const { selectedPanel } = useChromeState();
-  const { toggleApplication } = useChromeActions();
-  const [sidebarOrder, setSidebarOrder] = useAtom(sidebarOrderAtom);
-  const snippetsEnabled = useAtomValue(snippetsEnabledAtom);
+  const { selectedPanel, selectedDeveloperPanelTab } = useChromeState();
+  const { toggleApplication, setSelectedDeveloperPanelTab } =
+    useChromeActions();
+  const [panelLayout, setPanelLayout] = useAtom(panelLayoutAtom);
 
   const renderIcon = ({ Icon }: PanelDescriptor, className?: string) => {
     return <Icon className={cn("h-5 w-5", className)} />;
   };
 
-  // Get all available sidebar panels
-  // Panels with defaultHidden are only available if explicitly enabled (e.g., snippets)
-  const availableSidebarPanels = useMemo(
-    () =>
-      PANELS.filter((p) => {
-        if (p.hidden || p.position !== "sidebar") {
-          return false;
-        }
-        // Show defaultHidden panels only if enabled via config
-        if (p.defaultHidden && p.id === "snippets" && !snippetsEnabled) {
-          return false;
-        }
-        return true;
-      }),
-    [snippetsEnabled],
-  );
+  // Get panels available for sidebar context menu
+  // Only show panels that are NOT in the developer panel
+  const availableSidebarPanels = useMemo(() => {
+    const devPanelIds = new Set(panelLayout.developerPanel);
+    return PANELS.filter((p) => {
+      if (p.hidden) {
+        return false;
+      }
+      // Exclude panels that are in the developer panel
+      if (devPanelIds.has(p.type)) {
+        return false;
+      }
+      return true;
+    });
+  }, [panelLayout.developerPanel]);
+
+  // Convert current sidebar items to PanelDescriptors
+  const sidebarItems = useMemo(() => {
+    return panelLayout.sidebar.flatMap((id) => {
+      const panel = PANEL_MAP.get(id);
+      return panel ? [panel] : [];
+    });
+  }, [panelLayout.sidebar]);
+
+  const handleSetSidebarItems = (items: PanelDescriptor[]) => {
+    setPanelLayout((prev) => ({
+      ...prev,
+      sidebar: items.map((item) => item.type),
+    }));
+  };
+
+  const handleReceive = (item: PanelDescriptor, fromListId: string) => {
+    // Remove from the source list
+    if (fromListId === "developer-panel") {
+      setPanelLayout((prev) => ({
+        ...prev,
+        developerPanel: prev.developerPanel.filter((id) => id !== item.type),
+      }));
 
-  const currentItems = sidebarOrder
-    .map((id) => PANEL_MAP.get(id))
-    .filter(Boolean);
+      // If the moved item was selected in dev panel, select the first remaining item
+      if (selectedDeveloperPanelTab === item.type) {
+        const remainingDevPanels = panelLayout.developerPanel.filter(
+          (id) => id !== item.type,
+        );
+        if (remainingDevPanels.length > 0) {
+          setSelectedDeveloperPanelTab(remainingDevPanels[0]);
+        }
+      }
+    }
 
-  const handleSetValue = (panels: PanelDescriptor[]) => {
-    setSidebarOrder(panels.map((p) => p.id));
+    // Select the dropped item in sidebar
+    toggleApplication(item.type);
   };
 
   return (
     <div className="h-full pt-4 pb-1 px-1 flex flex-col items-start text-muted-foreground text-md select-none no-print text-sm z-50 dark:bg-background print:hidden hide-on-fullscreen">
       <ReorderableList<PanelDescriptor>
-        value={currentItems}
-        setValue={handleSetValue}
+        value={sidebarItems}
+        setValue={handleSetSidebarItems}
+        getKey={(p) => p.type}
         availableItems={availableSidebarPanels}
+        crossListDrag={{
+          dragType: "panels",
+          listId: "sidebar",
+          onReceive: handleReceive,
+        }}
         getItemLabel={(panel) => (
-          <span className="flex items-center gap-2 [">
+          <span className="flex items-center gap-2">
             {renderIcon(panel, "h-4 w-4 text-muted-foreground")}
-            {panel.tooltip}
+            {panel.label}
           </span>
         )}
-        ariaLabel="Reorderable sidebar panels"
+        ariaLabel="Sidebar panels"
         className="flex flex-col gap-0"
-        onAction={(panel) => toggleApplication(panel.id)}
-        renderItem={(panel) => {
-          return (
-            <SidebarItem
-              tooltip={panel.tooltip}
-              selected={selectedPanel === panel.id}
-            >
-              {renderIcon(panel)}
-            </SidebarItem>
-          );
-        }}
+        minItems={0}
+        onAction={(panel) => toggleApplication(panel.type)}
+        renderItem={(panel) => (
+          <SidebarItem
+            tooltip={panel.tooltip}
+            selected={selectedPanel === panel.type}
+          >
+            {renderIcon(panel)}
+          </SidebarItem>
+        )}
       />
       <FeedbackButton>
         <SidebarItem tooltip="Send feedback!" selected={false}>

package/src/components/scratchpad/scratchpad.tsx

@@ -27,6 +27,10 @@ import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
 import { Functions } from "@/utils/functions";
 import { CellEditor } from "../editor/cell/code/cell-editor";
+import {
+  usePanelOrientation,
+  usePanelSection,
+} from "../editor/chrome/panels/panel-context";
 import { HideInKioskMode } from "../editor/kiosk-mode";
 import { OutputArea } from "../editor/Output";
 import { ConsoleOutput } from "../editor/output/console/ConsoleOutput";
@@ -53,6 +57,8 @@ export const ScratchPad: React.FC = () => {
   const lastFocusedCellId = useLastFocusedCellId();
   const { createNewCell, updateCellCode } = useCellActions();
   const { sendRunScratchpad } = useRequestClient();
+  const orientation = usePanelOrientation();
+  const section = usePanelSection();
 
   const cellId = SCRATCH_CELL_ID;
   const cellRuntime = notebookState.cellRuntime[cellId];
@@ -223,13 +229,15 @@ export const ScratchPad: React.FC = () => {
     </div>
   );
 
+  const isVertical = orientation === "vertical";
+
   return (
     <div
       className="flex flex-col h-full overflow-hidden"
       id={HTMLCellId.create(cellId)}
     >
-      <PanelGroup direction="horizontal" className="h-full">
-        {/* Left side: toolbar + editor */}
+      <PanelGroup key={section} direction={orientation} className="h-full">
+        {/* Editor panel */}
         <Panel defaultSize={40} minSize={20} maxSize={70}>
           <div className="h-full flex flex-col overflow-hidden relative">
             {renderToolbar()}
@@ -257,8 +265,13 @@ export const ScratchPad: React.FC = () => {
             {renderHistory()}
           </div>
         </Panel>
-        <PanelResizeHandle className="w-1 bg-border hover:bg-primary/50 transition-colors" />
-        {/* Right side: outputs */}
+        <PanelResizeHandle
+          className={cn(
+            "bg-border hover:bg-primary/50 transition-colors",
+            isVertical ? "h-1" : "w-1",
+          )}
+        />
+        {/* Output panel */}
         <Panel defaultSize={60} minSize={20}>
           <div className="h-full flex flex-col divide-y overflow-hidden">
             <div className="flex-1 overflow-auto">