@marimo-team/islands 0.23.14-dev6 → 0.23.14-dev61

package/src/components/data-table/__tests__/column-visibility-dropdown.test.tsx

@@ -21,10 +21,17 @@ beforeAll(() => {
 
 type Row = Record<string, unknown>;
 
+// Select, index, and nameless columns are non-hideable in production
+// (see columns.tsx), so the harness mirrors that to keep visibility counts
+// aligned with the real table.
 const TEST_COLUMNS: ColumnDef<Row>[] = [
-  { id: SELECT_COLUMN_ID, accessorKey: SELECT_COLUMN_ID },
-  { id: INDEX_COLUMN_NAME, accessorKey: INDEX_COLUMN_NAME },
-  { id: "__m_column__0", accessorKey: "__m_column__0" },
+  { id: SELECT_COLUMN_ID, accessorKey: SELECT_COLUMN_ID, enableHiding: false },
+  {
+    id: INDEX_COLUMN_NAME,
+    accessorKey: INDEX_COLUMN_NAME,
+    enableHiding: false,
+  },
+  { id: "__m_column__0", accessorKey: "__m_column__0", enableHiding: false },
   {
     id: "customer_name",
     accessorKey: "customer_name",
@@ -101,6 +108,7 @@ describe("ColumnVisibilityDropdown", () => {
     renderAndOpen({ initiallyHidden: ["cust_age"] });
     expect(getOptionTexts()).toEqual([
       "Show all",
+      "Hide all",
       "cust_age",
       "customer_name",
       "order_total",
@@ -117,6 +125,7 @@ describe("ColumnVisibilityDropdown", () => {
 
     expect(getOptionTexts()).toEqual([
       "Show all",
+      "Hide all",
       "cust_age",
       "customer_name",
       "order_total",
@@ -132,6 +141,7 @@ describe("ColumnVisibilityDropdown", () => {
     fireEvent.click(getColumnOption("customer_name"));
     expect(getOptionTexts()).toEqual([
       "Show all",
+      "Hide all",
       "cust_age",
       "customer_name",
       "order_total",
@@ -144,6 +154,7 @@ describe("ColumnVisibilityDropdown", () => {
     // Reopen sorts both hidden columns first, preserving table order.
     expect(getOptionTexts()).toEqual([
       "Show all",
+      "Hide all",
       "customer_name",
       "cust_age",
       "order_total",
@@ -189,6 +200,52 @@ describe("ColumnVisibilityDropdown", () => {
     );
   });
 
+  it("'Hide all' hides every hideable column", () => {
+    renderAndOpen();
+    fireEvent.click(getColumnOption("Hide all"));
+
+    expect(
+      getColumnOption("customer_name").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(
+      getColumnOption("order_total").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(getColumnOption("Hide all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("disables 'Hide all' when every column is already hidden", () => {
+    renderAndOpen({
+      initiallyHidden: ["customer_name", "cust_age", "order_total"],
+    });
+    expect(getColumnOption("Hide all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("'Hide all' leaves non-hideable columns visible", () => {
+    renderAndOpen({ nonHideable: ["customer_name"] });
+    fireEvent.click(getColumnOption("Hide all"));
+
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    const nonHideable = getColumnOption("customer_name");
+    expect(nonHideable).toHaveAttribute("aria-disabled", "true");
+    expect(nonHideable.querySelector(".lucide-eye-off")).toBeNull();
+    // Every hideable column is now hidden, so the action gates off.
+    expect(getColumnOption("Hide all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
   it("hides and shows matching columns via bulk actions while searching", () => {
     renderAndOpen();
     fireEvent.change(getSearchInput(), { target: { value: "cust" } });

package/src/components/data-table/charts/__tests__/altair-generator.test.ts

@@ -85,6 +85,10 @@ const Mocks = {
       type: "arc",
       innerRadius: 100,
     },
+    arcDefault: {
+      type: "arc",
+      innerRadius: undefined,
+    },
   },
 };
 
@@ -128,6 +132,26 @@ describe("generateAltairChart", () => {
     `);
   });
 
+  it("should generate a pie chart when arc has undefined innerRadius", () => {
+    const spec = createSpec({
+      mark: Mocks.marks.arcDefault,
+      encoding: {
+        theta: Mocks.thetaAxis,
+      },
+    });
+    const datasource = "df";
+
+    const result = generateAltairChart(spec, datasource).toCode();
+
+    expect(result).toMatchInlineSnapshot(`
+      "alt.Chart(df)
+      .mark_arc()
+      .encode(theta=alt.Theta(field='theta', axis={
+          'title': 'Theta Axis'
+      }))"
+    `);
+  });
+
   it("should generate a donut chart", () => {
     const spec = createSpec({
       mark: Mocks.marks.arc,

package/src/components/data-table/charts/__tests__/merge-index-fields.test.ts

@@ -0,0 +1,33 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import type { FieldTypesWithExternalType } from "@/components/data-table/types";
+import { mergeIndexFields } from "../charts";
+
+describe("mergeIndexFields", () => {
+  it("appends row-header (index) fields to field types", () => {
+    const fieldTypes: FieldTypesWithExternalType = [["v", ["number", "int64"]]];
+    const rowHeaders: FieldTypesWithExternalType = [
+      ["k", ["string", "object"]],
+    ];
+    expect(mergeIndexFields(fieldTypes, rowHeaders)).toEqual([
+      ["v", ["number", "int64"]],
+      ["k", ["string", "object"]],
+    ]);
+  });
+
+  it("de-dupes when an index name matches a column name", () => {
+    const fieldTypes: FieldTypesWithExternalType = [["k", ["number", "int64"]]];
+    const rowHeaders: FieldTypesWithExternalType = [
+      ["k", ["string", "object"]],
+    ];
+    expect(mergeIndexFields(fieldTypes, rowHeaders)).toEqual([
+      ["k", ["number", "int64"]],
+    ]);
+  });
+
+  it("returns field types unchanged when there are no row headers", () => {
+    const fieldTypes: FieldTypesWithExternalType = [["v", ["number", "int64"]]];
+    expect(mergeIndexFields(fieldTypes, [])).toEqual(fieldTypes);
+  });
+});

package/src/components/data-table/charts/chart-spec/altair-generator.ts

@@ -30,7 +30,10 @@ export function generateAltairChart(
       if (typeof spec.mark === "object" && "type" in spec.mark) {
         markProps = Object.fromEntries(
           Object.entries(spec.mark)
-            .filter(([key]) => key !== "type")
+            .filter(
+              ([key, value]) =>
+                key !== "type" && value !== undefined && value !== null,
+            )
             .map(([key, value]) => [key, new Literal(value)]),
         );
       }

package/src/components/data-table/charts/charts.tsx

@@ -27,6 +27,7 @@ import { useDebouncedCallback } from "@/hooks/useDebounce";
 import type { GetDataUrl } from "@/plugins/impl/DataTablePlugin";
 import { vegaLoadData } from "@/plugins/impl/vega/loader";
 import { useTheme } from "@/theme/useTheme";
+import { uniqueBy } from "@/utils/arrays";
 import { inferFieldTypes } from "../columns";
 import {
   type FieldTypesWithExternalType,
@@ -54,6 +55,22 @@ const CHART_HEIGHT = 290;
 const CHART_MAX_ROWS = 50_000;
 const CHART_MAX_COLUMNS = 50;
 
+/**
+ * Append row-header (index) fields to the chart field list, skipping any whose
+ * name already exists as a data column so the chart builder never offers the
+ * same axis twice.
+ */
+export function mergeIndexFields(
+  fieldTypes: FieldTypesWithExternalType | null | undefined,
+  rowHeaders: FieldTypesWithExternalType | null | undefined,
+): FieldTypesWithExternalType {
+  const base = fieldTypes ?? [];
+  if (!rowHeaders || rowHeaders.length === 0) {
+    return base;
+  }
+  return uniqueBy([...base, ...rowHeaders], (f) => f[0]);
+}
+
 export interface TablePanelProps {
   cellId: CellId | null;
   data: unknown[];
@@ -64,6 +81,7 @@ export interface TablePanelProps {
   onCloseChartBuilder?: () => void;
   getDataUrl?: GetDataUrl;
   fieldTypes?: FieldTypesWithExternalType | null;
+  rowHeaders?: FieldTypesWithExternalType | null;
 }
 
 export const TablePanel: React.FC<TablePanelProps> = ({
@@ -74,6 +92,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
   columns,
   getDataUrl,
   fieldTypes,
+  rowHeaders,
   displayHeader,
   onCloseChartBuilder,
 }) => {
@@ -265,7 +284,10 @@ export const TablePanel: React.FC<TablePanelProps> = ({
               saveChart={saveChart}
               saveChartType={saveChartType}
               getDataUrl={getDataUrl}
-              fieldTypes={fieldTypes ?? inferFieldTypes(dataTable.props.data)}
+              fieldTypes={mergeIndexFields(
+                fieldTypes ?? inferFieldTypes(dataTable.props.data),
+                rowHeaders,
+              )}
               isLargeDataset={isLargeDataset}
             />
           </TabsContent>

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -50,7 +50,10 @@ import {
 import { smartMatch } from "@/utils/smartMatch";
 import type { Column, Table } from "@tanstack/react-table";
 import { cn } from "@/utils/cn";
-import { getColumnCountForDisplay } from "../hooks/use-column-visibility";
+import {
+  getColumnCountForDisplay,
+  getUserColumnVisibilityCounts,
+} from "../hooks/use-column-visibility";
 
 interface ColumnExplorerPanelProps<TData> {
   previewColumn: PreviewColumn;
@@ -90,6 +93,7 @@ export function ColumnExplorerPanel<TData>({
     totalColumns: effectiveTotalColumns,
     hiddenColumns: hiddenColumnCount,
   } = getColumnCountForDisplay(table, totalColumns);
+  const { visible: visibleColumnCount } = getUserColumnVisibilityCounts(table);
 
   const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
     numRows: totalRows,
@@ -108,17 +112,34 @@ export function ColumnExplorerPanel<TData>({
           value={columns?.map(([columnName]) => columnName).join(",\n") || ""}
           className="h-3 w-3"
         />
-        {hiddenColumnCount > 0 && (
-          <Button
-            type="button"
-            variant="link"
-            size="xs"
-            className="h-auto p-0"
-            onClick={() => table.resetColumnVisibility(true)}
-          >
-            Unhide all
-          </Button>
-        )}
+        <div className="ml-auto flex items-center gap-1">
+          <Tooltip content="Show all columns" delayDuration={400}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="xs"
+              className="gap-1"
+              disabled={hiddenColumnCount === 0}
+              onClick={() => table.toggleAllColumnsVisible(true)}
+            >
+              <EyeIcon className="w-3 h-3" />
+              Show all
+            </Button>
+          </Tooltip>
+          <Tooltip content="Hide all columns" delayDuration={400}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="xs"
+              className="gap-1"
+              disabled={visibleColumnCount === 0}
+              onClick={() => table.toggleAllColumnsVisible(false)}
+            >
+              <EyeOffIcon className="w-3 h-3" />
+              Hide all
+            </Button>
+          </Tooltip>
+        </div>
       </div>
       <Command className="h-5/6 bg-background" shouldFilter={false}>
         <CommandInput

package/src/components/data-table/column-visibility-dropdown.tsx

@@ -59,6 +59,12 @@ export const ColumnVisibilityDropdown = <TData,>({
   const hiddenIds = userColumns
     .filter((column) => !column.getIsVisible())
     .map((column) => column.id);
+  const hideableIds = userColumns
+    .filter((column) => column.getCanHide())
+    .map((column) => column.id);
+  const visibleHideableCount = hideableIds.filter(
+    (id) => !hiddenIds.includes(id),
+  ).length;
 
   const applyHidden = (next: string[] | string | null) => {
     const hidden = new Set(Array.isArray(next) ? next : []);
@@ -127,6 +133,15 @@ export const ColumnVisibilityDropdown = <TData,>({
                   <EyeIcon className="w-3 h-3 mr-1.5" />
                   Show all
                 </CommandItem>
+                <CommandItem
+                  value="__hide_all__"
+                  disabled={visibleHideableCount === 0}
+                  onSelect={() => applyHidden(hideableIds)}
+                  className="cursor-pointer"
+                >
+                  <EyeOffIcon className="w-3 h-3 mr-1.5" />
+                  Hide all
+                </CommandItem>
                 <CommandSeparator />
               </>
             ) : (

package/src/components/debugger/debugger-code.tsx

@@ -208,7 +208,7 @@ export const DebuggerControls: React.FC<{
         </Button>
       </Tooltip>
       {onClear && (
-        <Tooltip content="Clear">
+        <Tooltip content="Quit and clear">
           <Button
             variant="text"
             size="icon"
@@ -217,7 +217,12 @@ export const DebuggerControls: React.FC<{
               buttonClasses,
               "text-(--red-11) hover:text-(--red-11) hover:bg-(--red-2) hover:border-(--red-8)",
             )}
-            onClick={onClear}
+            onClick={() => {
+              // Quit the debugger (`q`) before tearing down the console, so
+              // the stdin response targets the still-present pdb prompt.
+              onSubmit("q");
+              onClear();
+            }}
           >
             <TrashIcon fontSize={36} className={iconClasses} />
           </Button>

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

@@ -688,13 +688,13 @@ export function useNotebookActions() {
     {
       divider: true,
       icon: <Home size={14} strokeWidth={1.5} />,
-      label: "Return home",
+      label: "Open home",
       // If file is in the url, then we ran `marimo edit`
       // without a specific file
       hidden: !location.search.includes("file"),
       handle: () => {
         const withoutSearch = document.baseURI.split("?")[0];
-        window.open(withoutSearch, "_self");
+        window.open(withoutSearch, "_blank", "noopener");
       },
     },
 

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

@@ -14,7 +14,7 @@ import { Tooltip } from "../../ui/tooltip";
 
 import "./cell-status.css";
 import { formatDistanceToNow } from "date-fns";
-import { Time } from "@/utils/time";
+import { formatElapsedTime, Time } from "@/utils/time";
 
 export interface CellStatusComponentProps extends Pick<
   CellRuntimeState,
@@ -348,25 +348,6 @@ const LastRanTime = (props: { lastRanTime: number }) => {
   );
 };
 
-export function formatElapsedTime(elapsedTime: number | null) {
-  if (elapsedTime === null) {
-    return "";
-  }
-
-  const milliseconds = elapsedTime;
-  const seconds = milliseconds / 1000;
-
-  if (seconds >= 60) {
-    const minutes = Math.floor(seconds / 60);
-    const remainingSeconds = Math.floor(seconds % 60);
-    return `${minutes}m${remainingSeconds}s`;
-  }
-  if (seconds >= 1) {
-    return `${seconds.toFixed(2).toString()}s`;
-  }
-  return `${milliseconds.toFixed(0).toString()}ms`;
-}
-
 const CellTimer = (props: { startTime: Time }) => {
   const time = useElapsedTime(props.startTime.toMilliseconds());
   return <span>{formatElapsedTime(time)}</span>;

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

@@ -3,12 +3,12 @@
 import { AlertTriangleIcon } from "lucide-react";
 import React from "react";
 import { FocusScope } from "react-aria";
-import { formatElapsedTime } from "@/components/editor/cell/CellStatus";
 import { CellLink } from "@/components/editor/links/cell-link";
 import { Button } from "@/components/ui/button";
 import type { CellId } from "@/core/cells/ids";
 import { usePendingDelete } from "@/core/cells/pending-delete-service";
 import { cn } from "@/utils/cn";
+import { formatElapsedTime } from "@/utils/time";
 
 export const PendingDeleteConfirmation: React.FC<{ cellId: CellId }> = ({
   cellId,

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

@@ -23,7 +23,7 @@ import { toast } from "@/components/ui/use-toast";
 import { useCellData, useCellRuntime } from "@/core/cells/cells";
 import { CellOutputId } from "@/core/cells/ids";
 import { isOutputEmpty } from "@/core/cells/outputs";
-import { goToDefinitionAtCursorPosition } from "@/core/codemirror/go-to-definition/utils";
+import { goToDefinitionWithLspFallback } from "@/core/codemirror/go-to-definition/utils";
 import { sendToPanelManager } from "@/core/vscode/vscode-bindings";
 import { copyImageToClipboard, copyToClipboard } from "@/utils/copy";
 import { getImageExtension } from "@/utils/filenames";
@@ -170,7 +170,7 @@ export const CellActionsContextMenu = ({
           // Only suppress focus restoration when we actually navigated;
           // otherwise let Radix return focus to the trigger cell.
           suppressCloseAutoFocus.current =
-            goToDefinitionAtCursorPosition(editorView);
+            goToDefinitionWithLspFallback(editorView);
         }
       },
     },

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

@@ -31,7 +31,7 @@ import { cn } from "@/utils/cn";
 import { HideInKioskMode } from "../../kiosk-mode";
 import { ContributeSnippetButton } from "../components/contribute-snippet-button";
 import { usePanelOrientation, usePanelSection } from "./panel-context";
-import { getSnippetDisplay } from "./snippet-display";
+import { getReadonlyCodeDisplay } from "@/core/cells/readonly-code-display";
 
 const extensions = [EditorView.lineWrapping];
 
@@ -188,7 +188,7 @@ const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
             return null;
           }
 
-          const { language, value } = getSnippetDisplay(code);
+          const { language, code: displayCode } = getReadonlyCodeDisplay(code);
 
           return (
             <div
@@ -216,7 +216,7 @@ const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
                   language={language}
                   className="cm border rounded overflow-hidden"
                   extensions={extensions}
-                  value={value}
+                  value={displayCode}
                   readOnly={true}
                 />
               </Suspense>

package/src/components/editor/chrome/wrapper/__tests__/useOpenAiAssistant.test.ts

@@ -0,0 +1,36 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const getFeatureFlag = vi.fn<(flag: string) => boolean>();
+
+vi.mock("@/core/config/feature-flag", () => ({
+  getFeatureFlag: (flag: string) => getFeatureFlag(flag),
+}));
+
+const { resolveAiPanelTab } = await import("../useOpenAiAssistant");
+
+describe("resolveAiPanelTab", () => {
+  beforeEach(() => {
+    getFeatureFlag.mockReset();
+  });
+
+  it("honors an explicit panel regardless of the feature flag", () => {
+    getFeatureFlag.mockReturnValue(false);
+    expect(resolveAiPanelTab("agents", "chat")).toBe("agents");
+    expect(resolveAiPanelTab("chat", "agents")).toBe("chat");
+  });
+
+  it("uses the stored tab when external agents are enabled", () => {
+    getFeatureFlag.mockReturnValue(true);
+    expect(resolveAiPanelTab(undefined, "agents")).toBe("agents");
+    expect(resolveAiPanelTab(undefined, "chat")).toBe("chat");
+  });
+
+  it("falls back to chat when external agents are disabled", () => {
+    getFeatureFlag.mockReturnValue(false);
+    // A stale "agents" preference must not strand the prompt.
+    expect(resolveAiPanelTab(undefined, "agents")).toBe("chat");
+    expect(resolveAiPanelTab(undefined, "chat")).toBe("chat");
+  });
+});

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

@@ -1,47 +1,17 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtomValue } from "jotai";
-import { AlertCircleIcon } from "lucide-react";
 import type React from "react";
-import { Spinner } from "@/components/icons/spinner";
-import { Tooltip } from "@/components/ui/tooltip";
-import { wasmInitializationAtom, wasmInitStatusAtom } from "@/core/wasm/state";
+import { RuntimeStatusBadge } from "@/components/lifecycle/RuntimeStatusBadge";
 import { isWasm } from "@/core/wasm/utils";
 
 /**
- * Footer indicator that surfaces Pyodide initialization progress. Mirrors
- * the "Kernel" indicator but tracks the WASM runtime instead of the server
- * connection. Hides itself once Pyodide is ready.
+ * Footer indicator that surfaces Pyodide initialization progress. Thin
+ * wrapper around `<RuntimeStatusBadge>` so the rest of the footer chrome
+ * doesn't need to know about adapters.
  */
 export const PyodideStatus: React.FC = () => {
-  const status = useAtomValue(wasmInitStatusAtom);
-  const message = useAtomValue(wasmInitializationAtom);
-
-  if (!isWasm() || status === "ready") {
+  if (!isWasm()) {
     return null;
   }
-
-  const icon =
-    status === "error" ? (
-      <AlertCircleIcon className="w-4 h-4 text-destructive" />
-    ) : (
-      <Spinner size="small" />
-    );
-
-  const tooltip = status === "error" ? "Pyodide failed to initialize" : message;
-
-  return (
-    <Tooltip
-      content={<div className="text-sm whitespace-pre-line">{tooltip}</div>}
-      data-testid="footer-pyodide-status"
-    >
-      <div
-        className="p-1 hover:bg-accent rounded flex items-center gap-1.5 text-xs text-muted-foreground"
-        data-testid="pyodide-status"
-      >
-        {icon}
-        <span>Pyodide</span>
-      </div>
-    </Tooltip>
-  );
+  return <RuntimeStatusBadge />;
 };

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

@@ -6,7 +6,9 @@ import { jotaiJsonStorage } from "@/utils/storage/jotai";
 
 const AI_PANEL_TAB_KEY = "marimo:chrome:ai-panel-tab";
 
-const aiPanelTabAtom = atomWithStorage<"chat" | "agents">(
+export type AiPanelTab = "chat" | "agents";
+
+export const aiPanelTabAtom = atomWithStorage<AiPanelTab>(
   AI_PANEL_TAB_KEY,
   "chat",
   jotaiJsonStorage,

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

@@ -0,0 +1,88 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useSetAtom, useStore } from "jotai";
+import useEvent from "react-use-event-hook";
+import { agentSessionStateAtom } from "@/components/chat/acp/state";
+import { toast } from "@/components/ui/use-toast";
+import { useModelChange } from "@/core/ai/config";
+import { pendingAiPromptAtom } from "@/core/ai/state";
+import type { CopilotMode } from "@/core/ai/tools/registry";
+import { aiModelConfiguredAtom } from "@/core/config/config";
+import { getFeatureFlag } from "@/core/config/feature-flag";
+import { Logger } from "@/utils/Logger";
+import { useChromeActions } from "../state";
+import { type AiPanelTab, aiPanelTabAtom, useAiPanelTab } from "./useAiPanel";
+
+// Error fixes work best with kernel access, so we default the chat panel to
+// code mode. The agents panel manages its own mode, so this is chat-only.
+const FIX_CHAT_MODE: CopilotMode = "code_mode";
+
+export interface OpenAiAssistantOptions {
+  prompt: string;
+  submit?: boolean;
+  /** Override the user's AI sidebar tab. When omitted, the stored tab is used. */
+  panel?: AiPanelTab;
+}
+
+// Resolve which AI panel to open.
+export function resolveAiPanelTab(
+  panel: AiPanelTab | undefined,
+  storedTab: AiPanelTab,
+): AiPanelTab {
+  if (panel) {
+    return panel;
+  }
+  return getFeatureFlag("external_agents") ? storedTab : "chat";
+}
+
+/**
+ * Opens the AI assistant sidebar panel and delivers a prompt to it.
+ *
+ * If no `panel` is given, the user's configured tab is respected.
+ */
+export function useOpenAiAssistant() {
+  const { openApplication } = useChromeActions();
+  const { setAiPanelTab } = useAiPanelTab();
+  const { saveModeChange } = useModelChange();
+  const setPendingPrompt = useSetAtom(pendingAiPromptAtom);
+  const store = useStore();
+
+  return useEvent(async (opts: OpenAiAssistantOptions) => {
+    const tab = resolveAiPanelTab(opts.panel, store.get(aiPanelTabAtom));
+
+    const chatPanelReady = store.get(aiModelConfiguredAtom);
+    const agentsPanelReady =
+      getFeatureFlag("external_agents") &&
+      store.get(agentSessionStateAtom).sessions.length > 0;
+    const isReady = tab === "agents" ? agentsPanelReady : chatPanelReady;
+
+    if (!isReady) {
+      toast({
+        title: tab === "agents" ? "No agent session" : "AI not configured",
+        description:
+          tab === "agents"
+            ? "Start an agent session or switch to the chat panel."
+            : "Configure an AI provider and chat model to fix with AI.",
+        variant: "danger",
+      });
+      return;
+    }
+
+    if (opts.panel) {
+      setAiPanelTab(opts.panel);
+    }
+
+    if (tab === "chat") {
+      await saveModeChange(FIX_CHAT_MODE).catch(() =>
+        Logger.error("Failed to save mode change"),
+      );
+    }
+
+    setPendingPrompt({
+      prompt: opts.prompt,
+      submit: opts.submit ?? false,
+    });
+
+    openApplication("ai");
+  });
+}