@marimo-team/frontend 0.23.9-dev9 → 0.23.10-dev0

package/src/components/datasources/__tests__/utils.test.ts

@@ -313,6 +313,26 @@ describe("sqlCode", () => {
       );
     });
 
+    it("should preserve dots inside quoted schema names", () => {
+      const sqlTableContext: SQLTableContext = {
+        engine: "postgres",
+        schema: "analytics.events",
+        defaultSchema: "public",
+        defaultDatabase: "mydb",
+        database: "remote",
+        dialect: "postgres",
+      };
+
+      const result = sqlCode({
+        table: mockTable,
+        columnName: mockColumn.name,
+        sqlTableContext,
+      });
+      expect(result).toBe(
+        '_df = mo.sql(f"""\nSELECT "email" FROM "remote"."analytics.events"."users" LIMIT 100\n""", engine=postgres)',
+      );
+    });
+
     it("should not quote * column name", () => {
       const sqlTableContext: SQLTableContext = {
         engine: "postgres",
@@ -334,6 +354,68 @@ describe("sqlCode", () => {
     });
   });
 
+  describe("Dremio dialect", () => {
+    it("should quote reserved column names and table path parts", () => {
+      const sqlTableContext: SQLTableContext = {
+        engine: "dremio_conn",
+        schema: "operations",
+        defaultSchema: "",
+        defaultDatabase: "",
+        database: "lakehouse",
+        dialect: "dremio",
+      };
+
+      const result = sqlCode({
+        table: { ...mockTable, name: "shipments" as const },
+        columnName: "order",
+        sqlTableContext,
+      });
+      expect(result).toBe(
+        '_df = mo.sql(f"""\nSELECT "order" FROM "lakehouse"."operations"."shipments" LIMIT 100\n""", engine=dremio_conn)',
+      );
+    });
+
+    it("should not quote * column name", () => {
+      const sqlTableContext: SQLTableContext = {
+        engine: "dremio_conn",
+        schema: "operations",
+        defaultSchema: "",
+        defaultDatabase: "",
+        database: "lakehouse",
+        dialect: "dremio",
+      };
+
+      const result = sqlCode({
+        table: { ...mockTable, name: "customers" as const },
+        columnName: "*",
+        sqlTableContext,
+      });
+      expect(result).toBe(
+        '_df = mo.sql(f"""\nSELECT * FROM "lakehouse"."operations"."customers" LIMIT 100\n""", engine=dremio_conn)',
+      );
+    });
+
+    it("should preserve dots inside quoted schema names", () => {
+      const sqlTableContext: SQLTableContext = {
+        engine: "dremio_conn",
+        schema: "samples.dremio.com",
+        defaultSchema: "",
+        defaultDatabase: "",
+        database: "Samples",
+        dialect: "dremio",
+      };
+
+      const result = sqlCode({
+        table: { ...mockTable, name: "airlines" as const },
+        columnName: "*",
+        sqlTableContext,
+      });
+      expect(result).toBe(
+        '_df = mo.sql(f"""\nSELECT * FROM "Samples"."samples.dremio.com"."airlines" LIMIT 100\n""", engine=dremio_conn)',
+      );
+    });
+  });
+
   describe("fallback behavior", () => {
     it("should use default formatter for unknown dialect", () => {
       const sqlTableContext: SQLTableContext = {

package/src/components/datasources/utils.ts

@@ -15,9 +15,9 @@ export function isSchemaless(schemaName: string) {
 
 interface SqlCodeFormatter {
   /**
-   * Format the table name based on dialect-specific rules
+   * Format the table path based on dialect-specific rules
    */
-  formatTableName: (tableName: string) => string;
+  formatTablePath: (tablePath: string[]) => string;
   /**
    * Format the SELECT clause
    */
@@ -25,7 +25,7 @@ interface SqlCodeFormatter {
 }
 
 const defaultFormatter: SqlCodeFormatter = {
-  formatTableName: (tableName: string) => tableName,
+  formatTablePath: (tablePath: string[]) => tablePath.join("."),
   formatSelectClause: (columnName: string, tableName: string) =>
     `SELECT ${columnName} FROM ${tableName} LIMIT 100`,
 };
@@ -41,7 +41,8 @@ function getFormatter(dialect: string): SqlCodeFormatter {
       const quote = BigQueryDialect.spec.identifierQuotes;
       return {
         // BigQuery uses backticks for identifiers
-        formatTableName: (tableName: string) => `${quote}${tableName}${quote}`,
+        formatTablePath: (tablePath: string[]) =>
+          `${quote}${tablePath.join(".")}${quote}`,
         formatSelectClause: defaultFormatter.formatSelectClause,
       };
     }
@@ -49,7 +50,7 @@ function getFormatter(dialect: string): SqlCodeFormatter {
     case "sqlserver":
     case "microsoft sql server":
       return {
-        formatTableName: defaultFormatter.formatTableName,
+        formatTablePath: defaultFormatter.formatTablePath,
         formatSelectClause: (columnName: string, tableName: string) =>
           `SELECT TOP 100 ${columnName} FROM ${tableName}`,
       };
@@ -57,12 +58,11 @@ function getFormatter(dialect: string): SqlCodeFormatter {
     case "postgres":
     case "postgresql":
     case "duckdb":
+    case "dremio":
       // Quote column and table names to avoid raising errors on weird characters
       return {
-        formatTableName: (tableName: string) => {
-          const parts = tableName.split(".");
-          return parts.map((part) => `"${part}"`).join(".");
-        },
+        formatTablePath: (tablePath: string[]) =>
+          tablePath.map((part) => `"${part}"`).join("."),
         formatSelectClause: (columnName: string, tableName: string) =>
           `SELECT ${columnName === "*" ? "*" : `"${columnName}"`} FROM ${tableName} LIMIT 100`,
       };
@@ -114,26 +114,27 @@ export function sqlCode({
       database,
       dialect,
     } = sqlTableContext;
-    let tableName = table.name;
+    const tablePath = [table.name];
 
     // Set the fully qualified table name based on schema and database
     if (isSchemaless(schema)) {
-      tableName =
-        database === defaultDatabase ? tableName : `${database}.${tableName}`;
+      if (database !== defaultDatabase) {
+        tablePath.unshift(database);
+      }
     } else {
       // Include schema if it's not the default schema
       if (schema !== defaultSchema) {
-        tableName = `${schema}.${tableName}`;
+        tablePath.unshift(schema);
       }
 
       // Include database if it's not the default database
       if (database !== defaultDatabase) {
-        tableName = `${database}.${tableName}`;
+        tablePath.unshift(database);
       }
     }
 
     const formatter = getFormatter(dialect);
-    const formattedTableName = formatter.formatTableName(tableName);
+    const formattedTableName = formatter.formatTablePath(tablePath);
     const selectClause = formatter.formatSelectClause(
       columnName,
       formattedTableName,

package/src/components/editor/Disconnected.tsx

@@ -1,69 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { ArrowRightSquareIcon } from "lucide-react";
-import { API } from "@/core/network/api";
-import { Banner } from "@/plugins/impl/common/error-banner";
-import { prettyError } from "@/utils/errors";
-import { reloadSafe } from "@/utils/reload-safe";
-import { Button } from "../ui/button";
-import { toast } from "../ui/use-toast";
-
 interface DisconnectedProps {
   reason: string;
-  canTakeover: boolean | undefined;
 }
 
-export const Disconnected = ({
-  reason,
-  canTakeover = false,
-}: DisconnectedProps) => {
-  const handleTakeover = async () => {
-    try {
-      const searchParams = new URL(window.location.href).searchParams;
-      await API.post(`/kernel/takeover?${searchParams.toString()}`, {});
-
-      // Refresh the page to reconnect
-      reloadSafe();
-    } catch (error) {
-      toast({
-        title: "Failed to take over session",
-        description: prettyError(error),
-        variant: "danger",
-      });
-    }
-  };
-
-  if (canTakeover) {
-    return (
-      <div className="flex justify-center">
-        <Banner
-          kind="info"
-          className="mt-10 flex flex-col rounded p-3 max-w-[800px] mx-4"
-        >
-          <div className="flex justify-between">
-            <span className="font-bold text-xl flex items-center mb-2">
-              Notebook already connected
-            </span>
-          </div>
-          <div className="flex justify-between items-end text-base gap-20">
-            <span>{reason}</span>
-            {canTakeover && (
-              <Button
-                onClick={handleTakeover}
-                variant="outline"
-                data-testid="takeover-button"
-                className="shrink-0"
-              >
-                <ArrowRightSquareIcon className="w-4 h-4 mr-2" />
-                Take over session
-              </Button>
-            )}
-          </div>
-        </Banner>
-      </div>
-    );
-  }
-
+export const Disconnected = ({ reason }: DisconnectedProps) => {
   return (
     <div className="font-mono text-center text-base text-(--red-11)">
       <p>{reason}</p>

package/src/components/editor/__tests__/viewer-banner.test.tsx

@@ -0,0 +1,89 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { layoutStateAtom } from "@/core/layout/layout";
+import { kioskModeAtom, viewStateAtom } from "@/core/mode";
+import { API } from "@/core/network/api";
+import { ViewerBanner } from "../viewer-banner";
+
+describe("ViewerBanner", () => {
+  it("renders nothing when not in kiosk mode", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, false);
+    const { container } = render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <ViewerBanner />
+        </TooltipProvider>
+      </Provider>,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders nothing for an intentional kiosk client (?kiosk=true)", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, true);
+    window.history.pushState({}, "", "/?kiosk=true");
+    try {
+      const { container } = render(
+        <Provider store={store}>
+          <TooltipProvider>
+            <ViewerBanner />
+          </TooltipProvider>
+        </Provider>,
+      );
+      expect(container).toBeEmptyDOMElement();
+    } finally {
+      window.history.pushState({}, "", "/");
+    }
+  });
+
+  it("renders nothing in a non-vertical layout (grid/slides)", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, true);
+    store.set(layoutStateAtom, { selectedLayout: "grid", layoutData: {} });
+    const { container } = render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <ViewerBanner />
+        </TooltipProvider>
+      </Provider>,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders nothing in present mode", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, true);
+    store.set(viewStateAtom, { mode: "present", cellAnchor: null });
+    const { container } = render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <ViewerBanner />
+        </TooltipProvider>
+      </Provider>,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("shows take over and posts without reload when viewing", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, true);
+    const post = vi.spyOn(API, "post").mockResolvedValue({} as never);
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <ViewerBanner />
+        </TooltipProvider>
+      </Provider>,
+    );
+    const button = screen.getByTestId("takeover-button");
+    button.click();
+    expect(post).toHaveBeenCalledWith(
+      expect.stringContaining("/kernel/takeover"),
+      {},
+    );
+  });
+});

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

@@ -113,6 +113,7 @@ export const PairWithAgentModal: React.FC<{
             className="underline"
           >
             Learn more
+            <span className="sr-only"> about pairing marimo with an agent</span>
           </a>
           .
         </DialogDescription>

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

@@ -48,7 +48,7 @@ import {
 import { switchLanguage } from "@/core/codemirror/language/extension";
 import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
 import {
-  aiEnabledAtom,
+  aiFeaturesEnabledAtom,
   appWidthAtom,
   autoInstantiateAtom,
 } from "@/core/config/config";
@@ -100,7 +100,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
   const deleteCell = useDeleteCellCallback();
   const { openModal } = useImperativeModal();
   const setAiCompletionCell = useSetAtom(aiCompletionCellAtom);
-  const aiEnabled = useAtomValue(aiEnabledAtom);
+  const aiFeaturesEnabled = useAtomValue(aiFeaturesEnabledAtom);
   const autoInstantiate = useAtomValue(autoInstantiateAtom);
   const kioskMode = useAtomValue(kioskModeAtom);
   const appWidth = useAtomValue(appWidthAtom);
@@ -162,7 +162,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
       {
         icon: <SparklesIcon size={13} strokeWidth={1.5} />,
         label: "Refactor with AI",
-        hidden: !aiEnabled,
+        hidden: !aiFeaturesEnabled,
         handle: () => {
           setAiCompletionCell((current) =>
             current?.cellId === cellId ? null : { cellId },

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

@@ -142,9 +142,10 @@ export function useNotebookActions() {
   const { selectedLayout } = useLayoutState();
   const { setLayoutView } = useLayoutActions();
   const togglePresenting = useTogglePresenting();
-  // Fallback: if sharing is undefined, both are enabled by default
+  // Fallback: if sharing is undefined, all options are enabled by default
   const sharingHtmlEnabled = resolvedConfig.sharing?.html ?? true;
   const sharingWasmEnabled = resolvedConfig.sharing?.wasm ?? true;
+  const sharingMolabEnabled = resolvedConfig.sharing?.molab ?? true;
 
   // Server-side PDF export is always available outside WASM.
   // Browser print fallback is used in WASM.
@@ -360,7 +361,8 @@ export function useNotebookActions() {
       icon: <Share2Icon size={14} strokeWidth={1.5} />,
       label: "Share",
       handle: NOOP_HANDLER,
-      hidden: !sharingHtmlEnabled && !sharingWasmEnabled,
+      hidden:
+        !sharingHtmlEnabled && !sharingWasmEnabled && !sharingMolabEnabled,
       dropdown: [
         {
           icon: <GlobeIcon size={14} strokeWidth={1.5} />,
@@ -387,6 +389,7 @@ export function useNotebookActions() {
         {
           icon: <MarimoPlusIcon size={14} strokeWidth={1.5} />,
           label: "Create molab notebook",
+          hidden: !sharingMolabEnabled,
           handle: async () => {
             const code = await readCode();
             const url = createShareableLink({

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

@@ -26,7 +26,7 @@ import {
   connectedDocAtom,
   realTimeCollaboration,
 } from "@/core/codemirror/rtc/extension";
-import { autoInstantiateAtom, isAiEnabled } from "@/core/config/config";
+import { autoInstantiateAtom, isAiFeatureEnabled } from "@/core/config/config";
 import type { UserConfig } from "@/core/config/config-schema";
 import { OverridingHotkeyProvider } from "@/core/hotkeys/hotkeys";
 import { connectionAtom } from "@/core/network/connection";
@@ -65,6 +65,11 @@ export interface CellEditorProps
   hasOutput?: boolean;
   languageAdapter: LanguageAdapterType | undefined;
   showLanguageToggles?: boolean;
+  /**
+   * Override for the inline "Edit with AI" tooltip. Defaults to the user's
+   * `ai.inline_tooltip` config. Set to `false` to force-disable it.
+   */
+  inlineAiTooltip?: boolean;
   setLanguageAdapter: React.Dispatch<
     React.SetStateAction<LanguageAdapterType | undefined>
   >;
@@ -73,6 +78,12 @@ export interface CellEditorProps
   editorViewParentRef?: React.RefObject<HTMLDivElement | null>;
   showHiddenCode: (opts?: { focus?: boolean }) => void;
   outputArea?: "above" | "below";
+  /**
+   * CSS selector for the element that editor tooltips (completions, hover,
+   * signature help) are appended to. Useful for fullscreen/dialog containers;
+   * defaults to `#App`.
+   */
+  tooltipParentSelector?: string;
 }
 
 const CellEditorInternal = ({
@@ -94,7 +105,9 @@ const CellEditorInternal = ({
   languageAdapter,
   setLanguageAdapter,
   showLanguageToggles = true,
+  inlineAiTooltip,
   outputArea,
+  tooltipParentSelector,
 }: CellEditorProps) => {
   const [aiCompletionCell, setAiCompletionCell] = useAtom(aiCompletionCellAtom);
   const deleteCell = useDeleteCellCallback();
@@ -173,13 +186,13 @@ const CellEditorInternal = ({
     });
   });
 
-  const aiEnabled = isAiEnabled(userConfig);
+  const aiFeaturesEnabled = isAiFeatureEnabled(userConfig);
 
   const extensions = useMemo(() => {
     const extensions = setupCodeMirror({
       cellId,
       showPlaceholder,
-      enableAI: aiEnabled,
+      enableAI: aiFeaturesEnabled,
       cellActions: {
         ...cellActions,
         afterToggleMarkdown,
@@ -201,6 +214,9 @@ const CellEditorInternal = ({
         splitCell,
         toggleHideCode,
         aiCellCompletion: () => {
+          if (!aiFeaturesEnabled) {
+            return false;
+          }
           let closed = false;
           setAiCompletionCell((v) => {
             // Toggle close
@@ -221,7 +237,9 @@ const CellEditorInternal = ({
       hotkeys: new OverridingHotkeyProvider(userConfig.keymap.overrides ?? {}),
       diagnosticsConfig: userConfig.diagnostics,
       displayConfig: userConfig.display,
-      inlineAiTooltip: userConfig.ai?.inline_tooltip ?? false,
+      inlineAiTooltip:
+        inlineAiTooltip ?? userConfig.ai?.inline_tooltip ?? false,
+      tooltipParentSelector,
     });
 
     extensions.push(
@@ -271,7 +289,9 @@ const CellEditorInternal = ({
     userConfig.display,
     userConfig.diagnostics,
     userConfig.ai?.inline_tooltip,
-    aiEnabled,
+    inlineAiTooltip,
+    tooltipParentSelector,
+    aiFeaturesEnabled,
     theme,
     showPlaceholder,
     cellActions,

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

@@ -201,16 +201,23 @@ export const PANEL_MAP = new Map<PanelType, PanelDescriptor>(
 );
 
 /**
- * Check if a panel should be hidden based on its `hidden` property
- * and `requiredCapability`.
+ * Check if a panel should be hidden based on its descriptor and runtime state.
  */
-export function isPanelHidden(
-  panel: PanelDescriptor,
-  capabilities: Capabilities,
-): boolean {
+export function isPanelHidden({
+  panel,
+  capabilities,
+  aiEnabled,
+}: {
+  panel: PanelDescriptor;
+  capabilities: Capabilities;
+  aiEnabled: boolean;
+}): boolean {
   if (panel.hidden) {
     return true;
   }
+  if (panel.type === "ai" && !aiEnabled) {
+    return true;
+  }
   if (panel.requiredCapability && !capabilities[panel.requiredCapability]) {
     return true;
   }

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

@@ -27,6 +27,7 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { LazyActivity } from "@/components/utils/lazy-mount";
 import { cellErrorCount } from "@/core/cells/cells";
 import { capabilitiesAtom } from "@/core/config/capabilities";
+import { aiEnabledAtom } from "@/core/config/config";
 import { getFeatureFlag } from "@/core/config/feature-flag";
 import { cn } from "@/utils/cn";
 import { ErrorBoundary } from "../../boundary/ErrorBoundary";
@@ -93,18 +94,19 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const [panelLayout, setPanelLayout] = useAtom(panelLayoutAtom);
   // Subscribe to capabilities to re-render when they change (e.g., terminal capability)
   const capabilities = useAtomValue(capabilitiesAtom);
+  const aiEnabled = useAtomValue(aiEnabledAtom);
 
   // Convert current developer panel items to PanelDescriptors
   // Filter out hidden panels (e.g., terminal when capability is not available)
   const devPanelItems = useMemo(() => {
     return panelLayout.developerPanel.flatMap((id) => {
       const panel = PANEL_MAP.get(id);
-      if (!panel || isPanelHidden(panel, capabilities)) {
+      if (!panel || isPanelHidden({ panel, capabilities, aiEnabled })) {
         return [];
       }
       return [panel];
     });
-  }, [panelLayout.developerPanel, capabilities]);
+  }, [panelLayout.developerPanel, capabilities, aiEnabled]);
 
   const handleSetDevPanelItems = (items: PanelDescriptor[]) => {
     setPanelLayout((prev) => ({
@@ -141,7 +143,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const availableDevPanels = useMemo(() => {
     const sidebarIds = new Set(panelLayout.sidebar);
     return PANELS.filter((p) => {
-      if (isPanelHidden(p, capabilities)) {
+      if (isPanelHidden({ panel: p, capabilities, aiEnabled })) {
         return false;
       }
       // Exclude panels that are in the sidebar
@@ -150,7 +152,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
       }
       return true;
     });
-  }, [panelLayout.sidebar, capabilities]);
+  }, [panelLayout.sidebar, capabilities, aiEnabled]);
 
   const emitResizeEvent = useEvent(() => {
     // HACK: Unfortunately, we have to do this twice to make sure the

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

@@ -4,18 +4,27 @@ import { useAtomValue } from "jotai";
 import { SparklesIcon } from "lucide-react";
 import React from "react";
 import { useOpenSettingsToTab } from "@/components/app-config/state";
-import { aiAtom, aiEnabledAtom } from "@/core/config/config";
+import {
+  aiAtom,
+  aiEnabledAtom,
+  aiModelConfiguredAtom,
+} from "@/core/config/config";
 import { DEFAULT_AI_MODEL } from "@/core/config/config-schema";
 import { FooterItem } from "../footer-item";
 
 export const AIStatusIcon: React.FC = () => {
   const ai = useAtomValue(aiAtom);
   const aiEnabled = useAtomValue(aiEnabledAtom);
+  const aiModelConfigured = useAtomValue(aiModelConfiguredAtom);
   const chatModel = ai?.models?.chat_model || DEFAULT_AI_MODEL;
   const editModel = ai?.models?.edit_model || chatModel;
   const { handleClick } = useOpenSettingsToTab();
 
   if (!aiEnabled) {
+    return null;
+  }
+
+  if (!aiModelConfigured) {
     return (
       <FooterItem
         tooltip="Assist is disabled"

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

@@ -12,6 +12,7 @@ import {
   notebookQueuedOrRunningCountAtom,
 } from "@/core/cells/cells";
 import { capabilitiesAtom } from "@/core/config/capabilities";
+import { aiEnabledAtom } from "@/core/config/config";
 import { cn } from "@/utils/cn";
 import { FeedbackButton } from "../components/feedback-button";
 import { panelLayoutAtom, useChromeActions, useChromeState } from "../state";
@@ -30,6 +31,7 @@ export const Sidebar: React.FC = () => {
   const [panelLayout, setPanelLayout] = useAtom(panelLayoutAtom);
   // Subscribe to capabilities to re-render when they change
   const capabilities = useAtomValue(capabilitiesAtom);
+  const aiEnabled = useAtomValue(aiEnabledAtom);
 
   const renderIcon = ({ Icon }: PanelDescriptor, className?: string) => {
     return <Icon className={cn("h-5 w-5", className)} />;
@@ -40,7 +42,7 @@ export const Sidebar: React.FC = () => {
   const availableSidebarPanels = useMemo(() => {
     const devPanelIds = new Set(panelLayout.developerPanel);
     return PANELS.filter((p) => {
-      if (isPanelHidden(p, capabilities)) {
+      if (isPanelHidden({ panel: p, capabilities, aiEnabled })) {
         return false;
       }
       // Exclude panels that are in the developer panel
@@ -49,19 +51,19 @@ export const Sidebar: React.FC = () => {
       }
       return true;
     });
-  }, [panelLayout.developerPanel, capabilities]);
+  }, [panelLayout.developerPanel, capabilities, aiEnabled]);
 
   // Convert current sidebar items to PanelDescriptors
   // Filter out hidden panels (e.g., when capability is not available)
   const sidebarItems = useMemo(() => {
     return panelLayout.sidebar.flatMap((id) => {
       const panel = PANEL_MAP.get(id);
-      if (!panel || isPanelHidden(panel, capabilities)) {
+      if (!panel || isPanelHidden({ panel, capabilities, aiEnabled })) {
         return [];
       }
       return [panel];
     });
-  }, [panelLayout.sidebar, capabilities]);
+  }, [panelLayout.sidebar, capabilities, aiEnabled]);
 
   const handleSetSidebarItems = (items: PanelDescriptor[]) => {
     setPanelLayout((prev) => ({
@@ -218,7 +220,7 @@ const SidebarItem: React.FC<
   // Render as div when not clickable (e.g., inside ReorderableList)
   // This avoids nested interactive elements which break react-aria's drag behavior
   const content = onClick ? (
-    <button className={itemClassName} onClick={onClick}>
+    <button type="button" className={itemClassName} onClick={onClick}>
       {children}
     </button>
   ) : (