@marimo-team/islands 0.18.5-dev184 → 0.18.5-dev187

package/package.json

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

package/src/components/dependency-graph/dependency-graph.tsx

@@ -7,10 +7,9 @@ import { ReactFlowProvider } from "reactflow";
 import type { CellId } from "@/core/cells/ids";
 import type { CellData } from "@/core/cells/types";
 import type { Variables } from "@/core/variables/types";
-import { DependencyGraphMinimap } from "./dependency-graph-minimap";
 import { DependencyGraphTree } from "./dependency-graph-tree";
 import { GraphToolbar } from "./panels";
-import type { GraphLayoutView, GraphSettings } from "./types";
+import type { GraphSettings, LayoutDirection } from "./types";
 
 import "reactflow/dist/style.css";
 import "./dependency-graph.css";
@@ -22,7 +21,7 @@ interface Props {
   children?: React.ReactNode;
 }
 
-const graphViewAtom = atom<GraphLayoutView>("_minimap_");
+const graphViewAtom = atom<LayoutDirection>("TB");
 const graphViewSettings = atom<GraphSettings>({
   hidePureMarkdown: true,
 });
@@ -31,20 +30,8 @@ export const DependencyGraph: React.FC<Props> = (props) => {
   const [layoutDirection, setLayoutDirection] = useAtom(graphViewAtom);
   const [settings, setSettings] = useAtom(graphViewSettings);
 
-  const renderGraph = () => {
-    if (layoutDirection === "_minimap_") {
-      return (
-        <DependencyGraphMinimap {...props}>
-          <GraphToolbar
-            settings={settings}
-            onSettingsChange={setSettings}
-            view={layoutDirection}
-            onChange={setLayoutDirection}
-          />
-        </DependencyGraphMinimap>
-      );
-    }
-    return (
+  return (
+    <ReactFlowProvider key={layoutDirection}>
       <DependencyGraphTree
         {...props}
         settings={settings}
@@ -57,10 +44,6 @@ export const DependencyGraph: React.FC<Props> = (props) => {
           onChange={setLayoutDirection}
         />
       </DependencyGraphTree>
-    );
-  };
-
-  return (
-    <ReactFlowProvider key={layoutDirection}>{renderGraph()}</ReactFlowProvider>
+    </ReactFlowProvider>
   );
 };

package/src/components/{editor/chrome/wrapper/minimap.tsx → dependency-graph/minimap-content.tsx}

@@ -1,9 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtom, useAtomValue } from "jotai";
-import { XIcon } from "lucide-react";
+import { useAtomValue } from "jotai";
 import * as React from "react";
-import { Button } from "@/components/ui/button";
+import {
+  type CellGraph,
+  cellGraphsAtom,
+  isVariableAffectedBySelectedCell,
+} from "@/components/editor/chrome/wrapper/minimap-state";
 import {
   useCellActions,
   useCellData,
@@ -13,14 +16,7 @@ import {
 import { cellFocusAtom, useCellFocusActions } from "@/core/cells/focus";
 import type { CellId } from "@/core/cells/ids";
 import { useVariables } from "@/core/variables/state";
-import { useHotkey } from "@/hooks/useHotkey";
 import { cn } from "@/utils/cn";
-import {
-  type CellGraph,
-  cellGraphsAtom,
-  isVariableAffectedBySelectedCell,
-  minimapOpenAtom,
-} from "./minimap-state";
 
 interface MinimapCellProps {
   cellId: CellId;
@@ -127,72 +123,6 @@ const MinimapCell: React.FC<MinimapCellProps> = (props) => {
   );
 };
 
-const MinimapInternal: React.FC<{
-  open: boolean;
-  setOpen: (update: boolean) => void;
-}> = ({ open, setOpen }) => {
-  const cellIds = useCellIds();
-  const cellPositions: Record<CellId, number> = Object.fromEntries(
-    cellIds.inOrderIds.map((id, idx) => [id, idx]),
-  );
-  const columnBoundaries: number[] = [];
-  let cellCount = 0;
-  for (const [idx, column] of cellIds.getColumns().entries()) {
-    if (idx > 0) {
-      columnBoundaries.push(cellCount);
-    }
-    cellCount += column.inOrderIds.length;
-  }
-  return (
-    <div
-      className={cn(
-        "fixed top-14 right-5 z-50 bg-background/95 backdrop-blur-sm supports-backdrop-filter:bg-background/60 rounded-lg border shadow-lg w-64 flex flex-col max-h-[58vh]",
-        "motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-in-out",
-        open ? "translate-x-0" : "translate-x-[calc(100%+20px)]",
-      )}
-    >
-      <div className="flex items-center justify-between p-4 border-b">
-        <span className="text-sm font-semibold">Minimap</span>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-6 w-6"
-          onClick={() => setOpen(false)}
-        >
-          <XIcon className="h-4 w-4" />
-        </Button>
-      </div>
-      <div className="overflow-y-auto overflow-x-hidden flex-1 scrollbar-none">
-        <div className="py-3 pl-3 pr-4 relative min-h-full">
-          {cellIds.inOrderIds.map((cellId, idx) => {
-            const isColumnBoundary = columnBoundaries.includes(idx);
-            return (
-              <React.Fragment key={cellId}>
-                {/* Subtle visual divider between nodes */}
-                {isColumnBoundary && (
-                  <div
-                    className="absolute left-5 w-[36px] h-px bg-(--gray-4) pointer-events-none"
-                    aria-hidden="true"
-                  />
-                )}
-                <MinimapCell cellId={cellId} cellPositions={cellPositions} />
-              </React.Fragment>
-            );
-          })}
-        </div>
-        {/* Invisible element to prevent SVG overflow from affecting scroll */}
-        <div className="h-0 overflow-hidden" aria-hidden="true" />
-      </div>
-    </div>
-  );
-};
-
-export const Minimap: React.FC = () => {
-  const [open, setOpen] = useAtom(minimapOpenAtom);
-  useHotkey("global.toggleMinimap", () => setOpen((prev) => !prev));
-  return <MinimapInternal open={open} setOpen={setOpen} />;
-};
-
 function codePreview(code: string): string | undefined {
   return code.split("\n")[0].trim() || undefined;
 }
@@ -443,3 +373,46 @@ function isNonReferenceableCell(graph: CellGraph): boolean {
     graph.descendants.size === 0
   );
 }
+
+/**
+ * Minimap content component for display in the dependencies panel.
+ * Shows a scrollable list of cells with dependency visualization.
+ */
+export const MinimapContent: React.FC = () => {
+  const cellIds = useCellIds();
+  const cellPositions: Record<CellId, number> = Object.fromEntries(
+    cellIds.inOrderIds.map((id, idx) => [id, idx]),
+  );
+  const columnBoundaries: number[] = [];
+  let cellCount = 0;
+  for (const [idx, column] of cellIds.getColumns().entries()) {
+    if (idx > 0) {
+      columnBoundaries.push(cellCount);
+    }
+    cellCount += column.inOrderIds.length;
+  }
+
+  return (
+    <div className="overflow-y-auto overflow-x-hidden flex-1 scrollbar-none h-full max-w-80">
+      <div className="py-3 pl-3 pr-4 relative min-h-full">
+        {cellIds.inOrderIds.map((cellId, idx) => {
+          const isColumnBoundary = columnBoundaries.includes(idx);
+          return (
+            <React.Fragment key={cellId}>
+              {/* Subtle visual divider between nodes */}
+              {isColumnBoundary && (
+                <div
+                  className="absolute left-5 w-[36px] h-px bg-(--gray-4) pointer-events-none"
+                  aria-hidden="true"
+                />
+              )}
+              <MinimapCell cellId={cellId} cellPositions={cellPositions} />
+            </React.Fragment>
+          );
+        })}
+      </div>
+      {/* Invisible element to prevent SVG overflow from affecting scroll */}
+      <div className="h-0 overflow-hidden" aria-hidden="true" />
+    </div>
+  );
+};

package/src/components/dependency-graph/panels.tsx

@@ -6,7 +6,6 @@ import {
   ArrowRightToLineIcon,
   MoreVerticalIcon,
   NetworkIcon,
-  Rows3Icon,
   SettingsIcon,
   SquareFunction,
   WorkflowIcon,
@@ -26,11 +25,11 @@ import { Checkbox } from "../ui/checkbox";
 import { Label } from "../ui/label";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { VariableName } from "../variables/common";
-import type { GraphLayoutView, GraphSelection, GraphSettings } from "./types";
+import type { GraphSelection, GraphSettings, LayoutDirection } from "./types";
 
 interface Props {
-  view: GraphLayoutView;
-  onChange: (view: GraphLayoutView) => void;
+  view: LayoutDirection;
+  onChange: (view: LayoutDirection) => void;
   settings: GraphSettings;
   onSettingsChange: (settings: GraphSettings) => void;
 }
@@ -73,16 +72,6 @@ export const GraphToolbar: React.FC<Props> = memo(
     return (
       <Panel position="top-right" className="flex flex-col items-end gap-2">
         <div className="flex gap-2">
-          <Button
-            variant="outline"
-            className="bg-background"
-            aria-selected={view === "_minimap_"}
-            size="xs"
-            onClick={() => onChange("_minimap_")}
-          >
-            <Rows3Icon className="w-4 h-4 mr-1" />
-            Mini Map
-          </Button>
           <Button
             variant="outline"
             className="bg-background"
@@ -104,7 +93,7 @@ export const GraphToolbar: React.FC<Props> = memo(
             Horizontal Tree
           </Button>
         </div>
-        {view !== "_minimap_" && settingsButton}
+        {settingsButton}
       </Panel>
     );
   },

package/src/components/dependency-graph/types.ts

@@ -2,7 +2,6 @@
 import type { CellId } from "@/core/cells/ids";
 
 export type LayoutDirection = "TB" | "LR";
-export type GraphLayoutView = LayoutDirection | "_minimap_";
 
 export type GraphSelection =
   | {

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

@@ -5,19 +5,26 @@ import { useCellDataAtoms, useCellIds } from "@/core/cells/cells";
 import { useVariables } from "@/core/variables/state";
 import { cn } from "@/utils/cn";
 import { DependencyGraph } from "../../../dependency-graph/dependency-graph";
+import { MinimapContent } from "../../../dependency-graph/minimap-content";
+import { useDependencyPanelTab } from "../wrapper/useDependencyPanelTab";
 
 const DependencyGraphPanel: React.FC = () => {
+  const { dependencyPanelTab } = useDependencyPanelTab();
   const variables = useVariables();
   const cellIds = useCellIds();
   const [cells] = useCellDataAtoms();
 
   return (
     <div className={cn("w-full h-full flex-1 mx-auto -mb-4 relative")}>
-      <DependencyGraph
-        cellAtoms={cells}
-        variables={variables}
-        cellIds={cellIds.inOrderIds}
-      />
+      {dependencyPanelTab === "minimap" ? (
+        <MinimapContent />
+      ) : (
+        <DependencyGraph
+          cellAtoms={cells}
+          variables={variables}
+          cellIds={cellIds.inOrderIds}
+        />
+      )}
     </div>
   );
 };

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

@@ -3,10 +3,11 @@
 import { useAtomValue } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import { z } from "zod";
+import { store } from "@/core/state/jotai";
 import { createReducerAndAtoms } from "@/utils/createReducer";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import { ZodLocalStorage } from "@/utils/storage/typed";
-import type { PanelType } from "./types";
+import type { PanelSection, PanelType } from "./types";
 import { isPanelHidden, PANELS } from "./types";
 
 export interface ChromeState {
@@ -41,6 +42,20 @@ export const panelLayoutAtom = atomWithStorage<PanelLayout>(
   { getOnInit: true },
 );
 
+/**
+ * Resolve which section a panel belongs to based on current layout.
+ */
+function resolvePanelLocation(panelType: PanelType): PanelSection | null {
+  const layout = store.get(panelLayoutAtom);
+  if (layout.sidebar.includes(panelType)) {
+    return "sidebar";
+  }
+  if (layout.developerPanel.includes(panelType)) {
+    return "developer-panel";
+  }
+  return null;
+}
+
 const KEY = "marimo:sidebar";
 const storage = new ZodLocalStorage<ChromeState>(
   z.object({
@@ -76,20 +91,52 @@ const {
 } = createReducerAndAtoms(
   () => storage.get(KEY),
   {
-    openApplication: (state, selectedPanel: PanelType) => ({
-      ...state,
-      selectedPanel,
-      isSidebarOpen: true,
-    }),
-    toggleApplication: (state, selectedPanel: PanelType) => ({
-      ...state,
-      selectedPanel,
-      // If it was closed, open it
-      // If it was open, keep it open unless it was the same application
-      isSidebarOpen: state.isSidebarOpen
-        ? state.selectedPanel !== selectedPanel
-        : true,
-    }),
+    openApplication: (state, selectedPanel: PanelType) => {
+      const location = resolvePanelLocation(selectedPanel);
+      if (location === "sidebar") {
+        return {
+          ...state,
+          selectedPanel,
+          isSidebarOpen: true,
+        };
+      }
+      if (location === "developer-panel") {
+        return {
+          ...state,
+          selectedDeveloperPanelTab: selectedPanel,
+          isDeveloperPanelOpen: true,
+        };
+      }
+      // Panel not found in layout, no-op
+      return state;
+    },
+    toggleApplication: (state, selectedPanel: PanelType) => {
+      const location = resolvePanelLocation(selectedPanel);
+      if (location === "sidebar") {
+        return {
+          ...state,
+          selectedPanel,
+          // If it was closed, open it
+          // If it was open, keep it open unless it was the same application
+          isSidebarOpen: state.isSidebarOpen
+            ? state.selectedPanel !== selectedPanel
+            : true,
+        };
+      }
+      if (location === "developer-panel") {
+        return {
+          ...state,
+          selectedDeveloperPanelTab: selectedPanel,
+          // If it was closed, open it
+          // If it was open, keep it open unless it was the same tab
+          isDeveloperPanelOpen: state.isDeveloperPanelOpen
+            ? state.selectedDeveloperPanelTab !== selectedPanel
+            : true,
+        };
+      }
+      // Panel not found in layout, no-op
+      return state;
+    },
     toggleSidebarPanel: (state) => ({
       ...state,
       isSidebarOpen: !state.isSidebarOpen,
@@ -106,15 +153,6 @@ const {
       ...state,
       isDeveloperPanelOpen: isOpen,
     }),
-    setSelectedDeveloperPanelTab: (state, tab: PanelType) => ({
-      ...state,
-      selectedDeveloperPanelTab: tab,
-    }),
-    openDeveloperPanelTab: (state, tab: PanelType) => ({
-      ...state,
-      isDeveloperPanelOpen: true,
-      selectedDeveloperPanelTab: tab,
-    }),
   },
   [(_prevState, newState) => storage.set(KEY, newState)],
 );

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

@@ -35,10 +35,10 @@ import {
   type PanelDescriptor,
 } from "../types";
 import { BackendConnectionStatus } from "./footer-items/backend-status";
-import { Minimap } from "./minimap";
 import { PanelsWrapper } from "./panels";
 import { PendingAICells } from "./pending-ai-cells";
 import { useAiPanelTab } from "./useAiPanel";
+import { useDependencyPanelTab } from "./useDependencyPanelTab";
 import { handleDragging } from "./utils";
 
 const LazyTerminal = React.lazy(() => import("@/components/terminal/terminal"));
@@ -75,15 +75,12 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     selectedPanel,
     selectedDeveloperPanelTab,
   } = useChromeState();
-  const {
-    setIsSidebarOpen,
-    setIsDeveloperPanelOpen,
-    setSelectedDeveloperPanelTab,
-    openApplication,
-  } = useChromeActions();
+  const { setIsSidebarOpen, setIsDeveloperPanelOpen, openApplication } =
+    useChromeActions();
   const sidebarRef = React.useRef<ImperativePanelHandle>(null);
   const developerPanelRef = React.useRef<ImperativePanelHandle>(null);
   const { aiPanelTab, setAiPanelTab } = useAiPanelTab();
+  const { dependencyPanelTab, setDependencyPanelTab } = useDependencyPanelTab();
   const errorCount = useAtomValue(cellErrorCount);
   const [panelLayout, setPanelLayout] = useAtom(panelLayoutAtom);
 
@@ -122,7 +119,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     }
 
     // Select the dropped item in developer panel
-    setSelectedDeveloperPanelTab(item.type);
+    openApplication(item.type);
   };
 
   // Get panels available for developer panel context menu
@@ -231,7 +228,36 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
       <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 ? (
+            {selectedPanel === "dependencies" ? (
+              <div className="flex items-center justify-between flex-1">
+                <span className="text-sm text-(--slate-11) uppercase tracking-wide font-semibold">
+                  Dependencies
+                </span>
+                <Tabs
+                  value={dependencyPanelTab}
+                  onValueChange={(value) => {
+                    if (value === "minimap" || value === "graph") {
+                      setDependencyPanelTab(value);
+                    }
+                  }}
+                >
+                  <TabsList>
+                    <TabsTrigger
+                      value="minimap"
+                      className="py-0.5 text-xs uppercase tracking-wide font-bold"
+                    >
+                      Minimap
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="graph"
+                      className="py-0.5 text-xs uppercase tracking-wide font-bold"
+                    >
+                      Graph
+                    </TabsTrigger>
+                  </TabsList>
+                </Tabs>
+              </div>
+            ) : selectedPanel === "ai" && agentsEnabled ? (
               <Tabs
                 value={aiPanelTab}
                 onValueChange={(value) => {
@@ -382,7 +408,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
             ariaLabel="Developer panel tabs"
             className="flex flex-row gap-1"
             minItems={0}
-            onAction={(panel) => setSelectedDeveloperPanelTab(panel.type)}
+            onAction={(panel) => openApplication(panel.type)}
             renderItem={(panel) => (
               <div
                 className={cn(
@@ -481,7 +507,6 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
         </Panel>
         <ContextAwarePanel />
       </PanelGroup>
-      <Minimap />
       <PendingAICells />
       <ErrorBoundary>
         <TooltipProvider>

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

@@ -125,7 +125,7 @@ export const BackendConnectionStatus: React.FC = () => {
     if (isAppNotStarted(connection)) {
       void connectToRuntime();
     } else {
-      void refetch();
+      refetch();
     }
   };
 

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

@@ -18,13 +18,14 @@ import {
 } from "./footer-items/backend-status";
 import { CopilotStatusIcon } from "./footer-items/copilot-status";
 import { MachineStats } from "./footer-items/machine-stats";
-import { MinimapStatusIcon } from "./footer-items/minimap-status";
 import { RTCStatus } from "./footer-items/rtc-status";
 import { RuntimeSettings } from "./footer-items/runtime-settings";
+import { useSetDependencyPanelTab } from "./useDependencyPanelTab";
 
 export const Footer: React.FC = () => {
   const { isDeveloperPanelOpen } = useChromeState();
-  const { toggleDeveloperPanel } = useChromeActions();
+  const { toggleDeveloperPanel, toggleApplication } = useChromeActions();
+  const setDependencyPanelTab = useSetDependencyPanelTab();
 
   const errorCount = useAtomValue(cellErrorCount);
   const connectionStatus = useAtomValue(connectionStatusAtom);
@@ -39,13 +40,18 @@ export const Footer: React.FC = () => {
   const warningCount = 0;
 
   useHotkey("global.toggleTerminal", () => {
-    toggleDeveloperPanel();
+    toggleApplication("terminal");
   });
 
   useHotkey("global.togglePanel", () => {
     toggleDeveloperPanel();
   });
 
+  useHotkey("global.toggleMinimap", () => {
+    toggleApplication("dependencies");
+    setDependencyPanelTab("minimap");
+  });
+
   return (
     <footer className="h-10 py-1 gap-1 bg-background flex items-center text-muted-foreground text-md pl-2 pr-1 border-t border-border select-none no-print text-sm z-50 print:hidden hide-on-fullscreen overflow-x-auto overflow-y-hidden scrollbar-thin">
       <FooterItem
@@ -92,7 +98,6 @@ export const Footer: React.FC = () => {
 
       <div className="flex items-center shrink-0 min-w-0">
         <MachineStats />
-        <MinimapStatusIcon />
         <AIStatusIcon />
         <CopilotStatusIcon />
         <RTCStatus />

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

@@ -6,8 +6,6 @@ import type { CellId } from "@/core/cells/ids";
 import { variablesAtom } from "@/core/variables/state";
 import type { Variable, VariableName, Variables } from "@/core/variables/types";
 
-export const minimapOpenAtom = atom(false);
-
 export interface CellGraph {
   variables: readonly VariableName[];
 

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

@@ -20,8 +20,7 @@ import {
 
 export const Sidebar: React.FC = () => {
   const { selectedPanel, selectedDeveloperPanelTab } = useChromeState();
-  const { toggleApplication, setSelectedDeveloperPanelTab } =
-    useChromeActions();
+  const { toggleApplication, openApplication } = useChromeActions();
   const [panelLayout, setPanelLayout] = useAtom(panelLayoutAtom);
 
   const renderIcon = ({ Icon }: PanelDescriptor, className?: string) => {
@@ -73,7 +72,7 @@ export const Sidebar: React.FC = () => {
           (id) => id !== item.type,
         );
         if (remainingDevPanels.length > 0) {
-          setSelectedDeveloperPanelTab(remainingDevPanels[0]);
+          openApplication(remainingDevPanels[0]);
         }
       }
     }

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

@@ -0,0 +1,16 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { atom, useAtom, useSetAtom } from "jotai";
+
+export const dependencyPanelTabAtom = atom<"minimap" | "graph">("minimap");
+
+export function useDependencyPanelTab() {
+  const [dependencyPanelTab, setDependencyPanelTab] = useAtom(
+    dependencyPanelTabAtom,
+  );
+  return { dependencyPanelTab, setDependencyPanelTab };
+}
+
+export function useSetDependencyPanelTab() {
+  return useSetAtom(dependencyPanelTabAtom);
+}

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

@@ -142,7 +142,7 @@ export const MarimoErrorOutput = ({
   );
 
   const openScratchpad = () => {
-    chromeActions.openDeveloperPanelTab("scratchpad");
+    chromeActions.openApplication("scratchpad");
   };
 
   const renderMessages = () => {
@@ -186,7 +186,7 @@ export const MarimoErrorOutput = ({
               size="xs"
               variant="outline"
               className="mt-2 font-normal"
-              onClick={() => chromeActions.openDeveloperPanelTab("terminal")}
+              onClick={() => chromeActions.openApplication("terminal")}
             >
               <TerminalIcon className="h-3.5 w-3.5 mr-1.5" />
               <span>Open terminal</span>

package/src/components/terminal/hooks.ts

@@ -25,11 +25,11 @@ import { useTerminalActions } from "./state";
  */
 export function useTerminalCommands() {
   const { addCommand } = useTerminalActions();
-  const { openDeveloperPanelTab } = useChromeActions();
+  const { openApplication } = useChromeActions();
 
   const sendCommand = (text: string) => {
     // First, ensure the terminal is open
-    openDeveloperPanelTab("terminal");
+    openApplication("terminal");
 
     // Add the command to the queue
     addCommand(text);