@marimo-team/islands 0.18.5-dev168 → 0.18.5-dev169

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.18.5-dev168",
+  "version": "0.18.5-dev169",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -269,7 +269,7 @@ export function useNotebookActions() {
       label: "Helper panel",
       redundant: true,
       handle: NOOP_HANDLER,
-      dropdown: PANELS.flatMap(({ id, Icon, hidden }) => {
+      dropdown: PANELS.flatMap(({ type: id, Icon, hidden }) => {
         if (hidden) {
           return [];
         }

package/src/components/editor/chrome/state.ts

@@ -6,16 +6,41 @@ import { z } from "zod";
 import { createReducerAndAtoms } from "@/utils/createReducer";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import { ZodLocalStorage } from "@/utils/storage/typed";
-import type { DeveloperPanelTabType, PanelType } from "./types";
+import type { PanelType } from "./types";
 import { PANELS } from "./types";
 
 export interface ChromeState {
   selectedPanel: PanelType | undefined;
   isSidebarOpen: boolean;
   isDeveloperPanelOpen: boolean;
-  selectedDeveloperPanelTab: DeveloperPanelTabType;
+  selectedDeveloperPanelTab: PanelType;
 }
 
+/**
+ * Layout configuration for panels in sidebar and developer panel.
+ * Each array contains the ordered list of visible panel IDs for that section.
+ */
+export interface PanelLayout {
+  sidebar: PanelType[];
+  developerPanel: PanelType[];
+}
+
+const DEFAULT_PANEL_LAYOUT: PanelLayout = {
+  sidebar: PANELS.filter(
+    (p) => !p.hidden && p.defaultSection === "sidebar",
+  ).map((p) => p.type),
+  developerPanel: PANELS.filter(
+    (p) => !p.hidden && p.defaultSection === "developer-panel",
+  ).map((p) => p.type),
+};
+
+export const panelLayoutAtom = atomWithStorage<PanelLayout>(
+  "marimo:panel-layout",
+  DEFAULT_PANEL_LAYOUT,
+  jotaiJsonStorage,
+  { getOnInit: true },
+);
+
 const KEY = "marimo:sidebar";
 const storage = new ZodLocalStorage<ChromeState>(
   z.object({
@@ -29,7 +54,7 @@ const storage = new ZodLocalStorage<ChromeState>(
       .string()
       .optional()
       .default("terminal")
-      .transform((v) => v as DeveloperPanelTabType),
+      .transform((v) => v as PanelType),
   }),
   initialState,
 );
@@ -81,11 +106,11 @@ const {
       ...state,
       isDeveloperPanelOpen: isOpen,
     }),
-    setSelectedDeveloperPanelTab: (state, tab: DeveloperPanelTabType) => ({
+    setSelectedDeveloperPanelTab: (state, tab: PanelType) => ({
       ...state,
       selectedDeveloperPanelTab: tab,
     }),
-    openDeveloperPanelTab: (state, tab: DeveloperPanelTabType) => ({
+    openDeveloperPanelTab: (state, tab: PanelType) => ({
       ...state,
       isDeveloperPanelOpen: true,
       selectedDeveloperPanelTab: tab,
@@ -119,13 +144,3 @@ export const exportedForTesting = {
   createActions,
   initialState,
 };
-
-// TODO: probably merge this with the chrome state
-export const sidebarOrderAtom = atomWithStorage<PanelType[]>(
-  "marimo:sidebar-order",
-  PANELS.filter(
-    (p) => !p.hidden && !p.defaultHidden && p.position === "sidebar",
-  ).map((p) => p.id),
-  jotaiJsonStorage,
-  { getOnInit: true },
-);

package/src/components/editor/chrome/types.ts

@@ -21,7 +21,11 @@ import {
 import { getFeatureFlag } from "@/core/config/feature-flag";
 import { isWasm } from "@/core/wasm/utils";
 
+/**
+ * Unified panel ID for all panels in sidebar and developer panel
+ */
 export type PanelType =
+  // Sidebar defaults
   | "files"
   | "variables"
   | "outline"
@@ -30,160 +34,146 @@ export type PanelType =
   | "documentation"
   | "snippets"
   | "ai"
+  // Developer panel defaults
+  | "errors"
+  | "scratchpad"
+  | "tracing"
+  | "secrets"
+  | "logs"
+  | "terminal"
   | "cache";
 
+export type PanelSection = "sidebar" | "developer-panel";
+
 export interface PanelDescriptor {
-  id: PanelType;
+  type: PanelType;
   Icon: LucideIcon;
+  /** Short label for developer panel tabs */
+  label: string;
+  /** Descriptive tooltip for sidebar icons */
+  tooltip: string;
   /** If true, the panel is completely unavailable */
   hidden?: boolean;
-  /** If true, the panel is available but not shown by default */
-  defaultHidden?: boolean;
-  tooltip: string;
-  position: "sidebar" | "footer";
+  /** Which section this panel belongs to by default */
+  defaultSection: PanelSection;
 }
 
-/* Panels are ordered in roughly decreasing order of importance as well as
- * logically grouped.
- *
- * 1. Must-have panels first.
- * 2. Panels that can add cells to the editor.
- * 3. Nice-to-have observability panels.
+/**
+ * All panels in the application.
+ * Panels can be in either sidebar or developer panel, configurable by user.
  */
 export const PANELS: PanelDescriptor[] = [
-  // 1. Must-have panels.
-  //
-  // The files panel is at the top to orient
-  // users within their filesystem and give
-  // them a quick glance at their project structure,
-  // without having to leave their editor.
+  // Sidebar defaults
   {
-    id: "files",
+    type: "files",
     Icon: FolderTreeIcon,
+    label: "Files",
     tooltip: "View files",
-    position: "sidebar",
+    defaultSection: "sidebar",
   },
-  // Because notebooks uniquely have data in RAM,
-  // it's important to give humans visibility into
-  // what that data is.
   {
-    id: "variables",
+    type: "variables",
     Icon: VariableIcon,
+    label: "Variables",
     tooltip: "Explore variables and data sources",
-    position: "sidebar",
+    defaultSection: "sidebar",
   },
-  // Every notebook has a package environment that must
-  // be managed.
   {
-    id: "packages",
+    type: "packages",
     Icon: BoxIcon,
+    label: "Packages",
     tooltip: "Manage packages",
-    position: "sidebar",
+    defaultSection: "sidebar",
   },
-  // 2. "AI" panel.
-  //
-  // The AI panel holds both agents and in-editor chat.
   {
-    id: "ai",
+    type: "ai",
     Icon: BotIcon,
+    label: "AI",
     tooltip: "Chat & Agents",
-    position: "sidebar",
+    defaultSection: "sidebar",
   },
   {
-    id: "snippets",
+    type: "snippets",
     Icon: SquareDashedBottomCodeIcon,
+    label: "Snippets",
     tooltip: "Snippets",
-    position: "sidebar",
-    defaultHidden: true,
+    defaultSection: "developer-panel",
   },
-  // 3. Nice-to-have observability panels.
-  //
-  // Utility panels that provide observability
-  // into the state or structure of the notebook. These
-  // observability panels are less crucial than variables
-  // or datasets, so they are positioned at the end of the
-  // sidebar.
   {
-    id: "outline",
+    type: "outline",
     Icon: ScrollTextIcon,
+    label: "Outline",
     tooltip: "View outline",
-    position: "sidebar",
+    defaultSection: "sidebar",
   },
   {
-    id: "documentation",
+    type: "documentation",
     Icon: TextSearchIcon,
+    label: "Docs",
     tooltip: "View live docs",
-    position: "sidebar",
+    defaultSection: "sidebar",
   },
   {
-    // TODO(akshayka): Consider making dependencies
-    // default off; the minimap is a more effective
-    // overview.
-    id: "dependencies",
+    type: "dependencies",
     Icon: NetworkIcon,
+    label: "Dependencies",
     tooltip: "Explore dependencies",
-    position: "sidebar",
+    defaultSection: "sidebar",
   },
-];
-
-export const PANEL_MAP = new Map<PanelType, PanelDescriptor>(
-  PANELS.map((p) => [p.id, p]),
-);
-
-export type DeveloperPanelTabType =
-  | "errors"
-  | "scratchpad"
-  | "tracing"
-  | "secrets"
-  | "logs"
-  | "terminal"
-  | "cache";
-
-export interface DeveloperPanelTabDescriptor {
-  type: DeveloperPanelTabType;
-  Icon: LucideIcon;
-  label: string;
-  hidden?: boolean;
-}
-
-export const DEVELOPER_PANEL_TABS: DeveloperPanelTabDescriptor[] = [
+  // Developer panel defaults
   {
     type: "errors",
     Icon: XCircleIcon,
     label: "Errors",
+    tooltip: "View errors",
+    defaultSection: "developer-panel",
   },
   {
     type: "scratchpad",
     Icon: NotebookPenIcon,
     label: "Scratchpad",
+    tooltip: "Scratchpad",
+    defaultSection: "developer-panel",
   },
   {
     type: "tracing",
     Icon: ActivityIcon,
     label: "Tracing",
+    tooltip: "View tracing",
+    defaultSection: "developer-panel",
   },
   {
     type: "secrets",
     Icon: KeyRoundIcon,
     label: "Secrets",
+    tooltip: "Manage secrets",
+    defaultSection: "developer-panel",
     hidden: isWasm(),
   },
   {
     type: "logs",
     Icon: FileTextIcon,
     label: "Logs",
+    tooltip: "View logs",
+    defaultSection: "developer-panel",
   },
   {
     type: "terminal",
     Icon: TerminalSquareIcon,
     label: "Terminal",
+    tooltip: "Terminal",
+    defaultSection: "developer-panel",
   },
-  // TODO(akshayka): The cache panel should not be default shown,
-  // even when it's out of feature flag. (User config to turn it on.)
   {
     type: "cache",
     Icon: DatabaseZapIcon,
     label: "Cache",
+    tooltip: "View cache",
+    defaultSection: "developer-panel",
     hidden: !getFeatureFlag("cache_panel"),
   },
 ];
+
+export const PANEL_MAP = new Map<PanelType, PanelDescriptor>(
+  PANELS.map((p) => [p.type, p]),
+);

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,8 @@ 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 { 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 +73,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(() => {
@@ -211,6 +273,18 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
             {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>
@@ -281,36 +355,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 +408,39 @@ 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 />}>
-                <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 />}>
+        <Suspense fallback={<div />}>
+          <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 />
+            )}
+            {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)}
                 />
-              </Suspense>
-            </LazyMount>
-          )}
-          {selectedDeveloperPanelTab === "cache" && (
-            <LazyMount isOpen={isDeveloperPanelOpen}>
-              <Suspense fallback={<div />}>
-                <LazyCachePanel />
-              </Suspense>
-            </LazyMount>
-          )}
-        </div>
+              </LazyMount>
+            )}
+            {selectedDeveloperPanelTab === "cache" && <LazyCachePanel />}
+          </div>
+        </Suspense>
       </div>
     </Panel>
   );