@marimo-team/frontend 0.24.3-dev1 → 0.24.3-dev13

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-4n22QjCD.js"></script>
+    <script type="module" crossorigin src="./assets/index-C2Qgy_xA.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/rolldown-runtime-B0Z9INg1.js">
     <link rel="modulepreload" crossorigin href="./assets/react-CBDbhulC.js">
     <link rel="modulepreload" crossorigin href="./assets/compiler-runtime-CYIjoINj.js">
@@ -88,21 +88,22 @@
     <link rel="modulepreload" crossorigin href="./assets/constants-BDbGiS7O.js">
     <link rel="modulepreload" crossorigin href="./assets/Deferred-CrTnjj37.js">
     <link rel="modulepreload" crossorigin href="./assets/session-Sz5nSFku.js">
-    <link rel="modulepreload" crossorigin href="./assets/config-BlNM0caL.js">
+    <link rel="modulepreload" crossorigin href="./assets/config-BuGkUPaK.js">
     <link rel="modulepreload" crossorigin href="./assets/clsx-DB0hHKMi.js">
     <link rel="modulepreload" crossorigin href="./assets/cn-ldLVeaqm.js">
     <link rel="modulepreload" crossorigin href="./assets/fullscreen-BH2jz-F4.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-DzCQtGkt.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-CLXTUtr2.js">
     <link rel="modulepreload" crossorigin href="./assets/menu-items-BSRA2YI9.js">
     <link rel="modulepreload" crossorigin href="./assets/button-Dh8EwhsF.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-dialog-CA-2mBs3.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-0lSCnrrf.js">
     <link rel="modulepreload" crossorigin href="./assets/createLucideIcon-B7HeEoG2.js">
     <link rel="modulepreload" crossorigin href="./assets/check-BoA6XBpj.js">
     <link rel="modulepreload" crossorigin href="./assets/context-Do8M9TDF.js">
     <link rel="modulepreload" crossorigin href="./assets/useNumberFormatter-DHJ9s6Vk.js">
-    <link rel="modulepreload" crossorigin href="./assets/select-nLt2y0Sw.js">
+    <link rel="modulepreload" crossorigin href="./assets/select-C1IYgK48.js">
     <link rel="modulepreload" crossorigin href="./assets/circle-ByJdIf5p.js">
-    <link rel="modulepreload" crossorigin href="./assets/tooltip-BUtPzKB4.js">
+    <link rel="modulepreload" crossorigin href="./assets/tooltip-BvU0ko_d.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-BtC9ym6k.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-CZNULd6Z.js">
     <link rel="modulepreload" crossorigin href="./assets/arrays-BqUx5USx.js">
@@ -115,6 +116,7 @@
     <link rel="modulepreload" crossorigin href="./assets/strings-CReV1AYG.js">
     <link rel="modulepreload" crossorigin href="./assets/requests-C6_IaFh7.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-B8pdsUrS.js">
+    <link rel="modulepreload" crossorigin href="./assets/paths-ClYq6Exe.js">
     <link rel="modulepreload" crossorigin href="./assets/useLifecycle-BUaJcygz.js">
     <link rel="modulepreload" crossorigin href="./assets/toDate-hGYJX0Ha.js">
     <link rel="modulepreload" crossorigin href="./assets/database-zap-CloO6gbw.js">
@@ -123,7 +125,7 @@
     <link rel="modulepreload" crossorigin href="./assets/input-DEbY281O.js">
     <link rel="modulepreload" crossorigin href="./assets/uuid-k9DpjH68.js">
     <link rel="modulepreload" crossorigin href="./assets/use-toast-DpWHUGuF.js">
-    <link rel="modulepreload" crossorigin href="./assets/write-secret-modal-D6zoZgLY.js">
+    <link rel="modulepreload" crossorigin href="./assets/write-secret-modal-CSWlDX_Z.js">
     <link rel="modulepreload" crossorigin href="./assets/plus-C4J9gIE1.js">
     <link rel="modulepreload" crossorigin href="./assets/trash-2-D_HX-0qx.js">
     <link rel="modulepreload" crossorigin href="./assets/badge-BSgtkC2e.js">
@@ -134,59 +136,58 @@
     <link rel="modulepreload" crossorigin href="./assets/dist-Cx4BE7jC.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-CKUpxYGQ.js">
     <link rel="modulepreload" crossorigin href="./assets/stex-Dc5bKD4z.js">
-    <link rel="modulepreload" crossorigin href="./assets/paths-zcL04qUW.js">
     <link rel="modulepreload" crossorigin href="./assets/useTheme-C-ri8BtY.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-Buhk-UgR.js">
     <link rel="modulepreload" crossorigin href="./assets/purify.es-DrVcFY1Q.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-Cp-G34Rz.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-CMLP1Dld.js">
     <link rel="modulepreload" crossorigin href="./assets/get-DjNf4SIX.js">
     <link rel="modulepreload" crossorigin href="./assets/_hasPath-BmRQipI0.js">
     <link rel="modulepreload" crossorigin href="./assets/hasIn-yw4sIeJR.js">
     <link rel="modulepreload" crossorigin href="./assets/_baseSet-gX6o3Pih.js">
     <link rel="modulepreload" crossorigin href="./assets/pick-Bs4cJfJU.js">
     <link rel="modulepreload" crossorigin href="./assets/errors-DzO-nXy-.js">
-    <link rel="modulepreload" crossorigin href="./assets/switch-DjXr9Y9D.js">
+    <link rel="modulepreload" crossorigin href="./assets/switch-DhPDzMo3.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-BMXKNElG.js">
     <link rel="modulepreload" crossorigin href="./assets/eye-off-CFuPxa9F.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-DlEomWzI.js">
     <link rel="modulepreload" crossorigin href="./assets/extends-CvVTau-c.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-BHMOvJzM.js">
-    <link rel="modulepreload" crossorigin href="./assets/useAddCell-DdB_uBif.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-DpIyjHqY.js">
-    <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-LboTfNDv.js">
+    <link rel="modulepreload" crossorigin href="./assets/useAddCell-4vmbxGw5.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-Cvz_-5Jh.js">
+    <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-C_cwGmDg.js">
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-D9Dr-k4J.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-5FQGJX7Z-CRg4xQWg.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-BZKlbm2Q.js">
-    <link rel="modulepreload" crossorigin href="./assets/copy-icon-z8fuTE3w.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-CX7oW5zy.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-DwhMAd9l.js">
-    <link rel="modulepreload" crossorigin href="./assets/blob-B2d_dHwI.js">
-    <link rel="modulepreload" crossorigin href="./assets/share-CPtBiNgr.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-C_dn-F0h.js">
+    <link rel="modulepreload" crossorigin href="./assets/copy-icon-BUOcnUgJ.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-C2e26LhV.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-B73ExmWb.js">
+    <link rel="modulepreload" crossorigin href="./assets/blob-B6ayJpoQ.js">
+    <link rel="modulepreload" crossorigin href="./assets/kbd-Cwh96ZBE.js">
+    <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-Cr0TevQm.js">
+    <link rel="modulepreload" crossorigin href="./assets/share-BZW3tzEX.js">
     <link rel="modulepreload" crossorigin href="./assets/events-CbeVJ6OD.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-Di9TbuV9.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-DuyHh3Fk.js">
     <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-CDVGFYfr.js">
     <link rel="modulepreload" crossorigin href="./assets/config-B-r81uZ6.js">
     <link rel="modulepreload" crossorigin href="./assets/tabs-Cy1qXLzH.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-CKA5zVsM.js">
-    <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-C40jM9o4.js">
+    <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-DnvwbPho.js">
     <link rel="modulepreload" crossorigin href="./assets/html-to-image-D6GUC5q6.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-DMxOzI7b.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-BRrPmrl5.js">
     <link rel="modulepreload" crossorigin href="./assets/table-CUK1W5bI.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-cw-Bf-rx_aV.js">
-    <link rel="modulepreload" crossorigin href="./assets/tree-actions-CG5g7aUQ.js">
+    <link rel="modulepreload" crossorigin href="./assets/tree-actions-5rg4Zqxe.js">
     <link rel="modulepreload" crossorigin href="./assets/ellipsis-Dfik_tuW.js">
     <link rel="modulepreload" crossorigin href="./assets/external-link-Bp3BxyRA.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-Ck-Hgfvj.js">
     <link rel="modulepreload" crossorigin href="./assets/message-circle-BQB1AIAg.js">
     <link rel="modulepreload" crossorigin href="./assets/hat-glasses-C8LSY3HT.js">
     <link rel="modulepreload" crossorigin href="./assets/package-DPlscLzt.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-DrODSIs0.js">
-    <link rel="modulepreload" crossorigin href="./assets/kbd-Cwh96ZBE.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-DDYaCFxh.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-dmKwNsrp.js">
-    <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-DsD08SLK.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-B6AklCzD.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-6burT2XF.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-DqpoYOvw.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-CJnYkzhz.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-B7ZVGcSl.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-DwGwWsxV.js">
     <link rel="modulepreload" crossorigin href="./assets/VisuallyHidden-CBMDmozt.js">
     <link rel="modulepreload" crossorigin href="./assets/useDateFormatter-BiqAQ-zI.js">
     <link rel="modulepreload" crossorigin href="./assets/en-US-yTIMUO13.js">
@@ -205,33 +206,33 @@
     <link rel="modulepreload" crossorigin href="./assets/formats-C6s96nu2.js">
     <link rel="modulepreload" crossorigin href="./assets/table-DmqOOjfe.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-BSRAHC4P.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-CzIGPEZQ.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-DCgOfk7t.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-ChZdjJhj.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-DkZweMAs.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-DKsAmLTi.js">
     <link rel="modulepreload" crossorigin href="./assets/semaphore-BjoL5P0h.js">
     <link rel="modulepreload" crossorigin href="./assets/fileToBase64-NhpNrK5l.js">
-    <link rel="modulepreload" crossorigin href="./assets/useBoolean-BXC4CItZ.js">
+    <link rel="modulepreload" crossorigin href="./assets/useBoolean-zcg-oxnj.js">
     <link rel="modulepreload" crossorigin href="./assets/code-xml-B7x62Eeh.js">
     <link rel="modulepreload" crossorigin href="./assets/file-headphone-rFCxFRI8.js">
     <link rel="modulepreload" crossorigin href="./assets/file-DF8n85RA.js">
     <link rel="modulepreload" crossorigin href="./assets/image-ab13yGv4.js">
-    <link rel="modulepreload" crossorigin href="./assets/file-icons-DdGYuADJ.js">
+    <link rel="modulepreload" crossorigin href="./assets/file-icons-wArFRwmS.js">
     <link rel="modulepreload" crossorigin href="./assets/globe-BQf75qV_.js">
     <link rel="modulepreload" crossorigin href="./assets/markdown-export-0rLbaq8b.js">
     <link rel="modulepreload" crossorigin href="./assets/data-grid-types-DgHVN_Zz.js">
     <link rel="modulepreload" crossorigin href="./assets/glide-utils-UGsrRHYj.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-riSXbYe_.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-oex3TMfq.js">
     <link rel="modulepreload" crossorigin href="./assets/square-B58Ib8Ir.js">
     <link rel="modulepreload" crossorigin href="./assets/triangle-alert-MihykDYG.js">
     <link rel="modulepreload" crossorigin href="./assets/prop-types-Djf4O40e.js">
     <link rel="modulepreload" crossorigin href="./assets/es-CrFhA96G.js">
-    <link rel="modulepreload" crossorigin href="./assets/renderShortcut-X-CJUSM8.js">
+    <link rel="modulepreload" crossorigin href="./assets/renderShortcut-BE8QI9Yi.js">
     <link rel="modulepreload" crossorigin href="./assets/bundle.esm-DzY74mzC.js">
     <link rel="modulepreload" crossorigin href="./assets/icons-CjLa9BiH.js">
     <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-CLytDdMl.js">
-    <link rel="modulepreload" crossorigin href="./assets/pathUtils-Cryrlpma.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-DaUHnl_e.js">
+    <link rel="modulepreload" crossorigin href="./assets/pathUtils-D7lk2rYQ.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-CG-zTB22.js">
     <link rel="stylesheet" crossorigin href="./assets/cells-D-c15Ks-.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-B7zTpxjS.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-BQtz7-np.css">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.24.3-dev1",
+  "version": "0.24.3-dev13",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/__mocks__/requests.ts

@@ -136,8 +136,13 @@ export const MockRequestClient = {
       updateCellOutputs: vi.fn().mockResolvedValue({}),
       addPackage: vi.fn().mockResolvedValue({}),
       removePackage: vi.fn().mockResolvedValue({}),
-      getPackageList: vi.fn().mockResolvedValue({ packages: [] }),
-      getDependencyTree: vi.fn().mockResolvedValue({}),
+      getPackageList: vi.fn().mockResolvedValue({
+        packages: [],
+      }),
+      getDependencyTree: vi.fn().mockResolvedValue({
+        tree: null,
+        context: { kind: "package-manager", name: "pip" },
+      }),
       listSecretKeys: vi.fn().mockResolvedValue({ keys: [] }),
       writeSecret: vi.fn().mockResolvedValue({}),
       invokeAiTool: vi.fn().mockResolvedValue({}),

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

@@ -10,7 +10,7 @@ import {
   EyeIcon,
   EyeOffIcon,
 } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useLocale } from "react-aria";
 import {
   AddDataframeChart,
@@ -98,11 +98,7 @@ export function ColumnExplorerPanel<TData>({
     hiddenColumns: hiddenColumnCount,
   } = getColumnCountForDisplay(table, totalColumns);
   const { visible: visibleColumnCount } = getUserColumnVisibilityCounts(table);
-  const columnVisibility = table.getState().columnVisibility;
-  const showOnlyColumnState = useMemo(
-    () => getShowOnlyColumnState(table),
-    [table, columnVisibility],
-  );
+  const showOnlyColumnState = getShowOnlyColumnState(table);
 
   const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
     numRows: totalRows,

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

@@ -215,6 +215,11 @@ export const ColumnVisibilityDropdown = <TData,>({
                 index === list.pinnedCount &&
                 list.pinnedCount > 0 &&
                 list.pinnedCount < list.visibleOptions.length;
+              const label = (
+                <span className="truncate" title={option.label}>
+                  {option.label}
+                </span>
+              );
               return (
                 <React.Fragment key={option.value}>
                   {isSectionBoundary && <CommandSeparator />}
@@ -225,15 +230,16 @@ export const ColumnVisibilityDropdown = <TData,>({
                     className="flex items-center gap-1.5 cursor-pointer"
                   >
                     {dataType === undefined ? (
-                      <span>{option.label}</span>
+                      label
                     ) : (
                       <ColumnName
-                        columnName={option.label}
+                        className="min-w-0"
+                        columnName={label}
                         dataType={dataType}
                       />
                     )}
                     {!option.disabled && (
-                      <span className="ml-auto flex items-center gap-0.5">
+                      <span className="ml-auto flex shrink-0 items-center gap-0.5">
                         <ShowOnlyColumnButton
                           table={table}
                           columnIds={[option.value]}

package/src/components/datasources/components.tsx

@@ -101,18 +101,20 @@ export const ColumnPreviewContainer: React.FC<{
 export const ColumnName = ({
   columnName,
   dataType,
+  className,
 }: {
   columnName: React.ReactNode;
   dataType: DataType;
+  className?: string;
 }) => {
   const resolvedDataType = resolveDataType(dataType);
   const Icon = DATA_TYPE_ICON[resolvedDataType];
   const color = getDataTypeColor(resolvedDataType);
 
   return (
-    <div className="flex flex-row items-center gap-1.5">
+    <div className={cn("flex flex-row items-center gap-1.5", className)}>
       <Icon
-        className={`w-4 h-4 p-0.5 rounded-sm stroke-card-foreground ${color}`}
+        className={`w-4 h-4 shrink-0 p-0.5 rounded-sm stroke-card-foreground ${color}`}
       />
       {columnName}
     </div>

package/src/components/editor/chrome/components/feedback-button.tsx

@@ -6,7 +6,7 @@ const Slot = SlotPrimitive.Slot;
 
 import { useAtomValue } from "jotai";
 import { ExternalLinkIcon, TriangleAlertIcon } from "lucide-react";
-import React, { type PropsWithChildren, useMemo, useState } from "react";
+import React, { type PropsWithChildren, useState } from "react";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { Button } from "@/components/ui/button";
@@ -94,8 +94,7 @@ export const FeedbackModal: React.FC<{
   );
 
   const notebook = useAtomValue(notebookAtom);
-  // biome-ignore lint/correctness/useExhaustiveDependencies: recompute when the notebook changes
-  const errors = useMemo(() => getCellErrorEntries(store), [notebook]);
+  const errors = getCellErrorEntries(store);
 
   const cells = notebook.cellIds.inOrderIds.map(
     (cellId) => notebook.cellData[cellId],
@@ -145,10 +144,9 @@ export const FeedbackModal: React.FC<{
     return contents;
   }, [includeCode, notebookSourceAvailable, readCode]);
 
-  const { url: githubIssueUrl, omitted } = useMemo(() => {
-    if (!environment) {
-      return { url: Constants.bugReportUrl, omitted: [] as string[] };
-    }
+  let githubIssueUrl = Constants.bugReportUrl;
+  let omitted: string[] = [];
+  if (environment) {
     const fields: Record<string, string> = {
       env: formatEnvironmentSection(environment),
     };
@@ -158,8 +156,11 @@ export const FeedbackModal: React.FC<{
     if (includeCode && codeRequest.data) {
       fields["reproduction-code"] = formatCodeSection(codeRequest.data);
     }
-    return buildBugReportUrl(Constants.bugReportUrl, fields);
-  }, [environment, errors, includeErrors, includeCode, codeRequest.data]);
+    ({ url: githubIssueUrl, omitted } = buildBugReportUrl(
+      Constants.bugReportUrl,
+      fields,
+    ));
+  }
 
   const omittedLabels = omitted
     .map((field) =>

package/src/components/editor/chrome/panels/__tests__/packages-panel.test.tsx

@@ -0,0 +1,143 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Provider } from "jotai";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { requestClientAtom } from "@/core/network/requests";
+import type {
+  DependencyTreeNode,
+  DependencyTreeResponse,
+} from "@/core/network/types";
+import { store } from "@/core/state/jotai";
+import PackagesPanel from "../packages-panel";
+
+const { openSettings } = vi.hoisted(() => ({
+  openSettings: vi.fn(),
+}));
+
+vi.mock("@/components/app-config/state", () => ({
+  useOpenSettingsToTab: () => ({ handleClick: openSettings }),
+}));
+
+const emptyTree: DependencyTreeNode = {
+  name: "<root>",
+  version: null,
+  tags: [],
+  dependencies: [],
+};
+
+const populatedTree: DependencyTreeNode = {
+  ...emptyTree,
+  dependencies: [
+    {
+      name: "polars",
+      version: "1.44.1",
+      tags: [],
+      dependencies: [
+        {
+          name: "numpy",
+          version: "2.5.2",
+          tags: [{ kind: "dedupe", value: "true" }],
+          dependencies: [],
+        },
+      ],
+    },
+  ],
+};
+
+function renderPanel(
+  context: DependencyTreeResponse["context"],
+  tree: DependencyTreeNode = emptyTree,
+) {
+  const getPackageList = vi.fn().mockResolvedValue({ packages: [] });
+  store.set(
+    requestClientAtom,
+    MockRequestClient.create({
+      getPackageList,
+      getDependencyTree: vi.fn().mockResolvedValue({ tree, context }),
+    }),
+  );
+
+  return {
+    getPackageList,
+    ...render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <PackagesPanel />
+        </TooltipProvider>
+      </Provider>,
+    ),
+  };
+}
+
+describe("PackagesPanel", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it.each(["pixi", "uv"] as const)(
+    "shows the effective %s sandbox backend as a fixed context",
+    async (backend) => {
+      const { getPackageList } = renderPanel({ kind: "sandbox", backend });
+
+      expect(
+        await screen.findByPlaceholderText(
+          `Add packages to ${backend} sandbox...`,
+        ),
+      ).toBeInTheDocument();
+      expect(screen.getByText(`${backend} sandbox`)).toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: "Change package manager" }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: "List" }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: "Tree" }),
+      ).not.toBeInTheDocument();
+      expect(getPackageList).not.toHaveBeenCalled();
+    },
+  );
+
+  it("explains the filtered empty state for a Pixi sandbox", async () => {
+    renderPanel({ kind: "sandbox", backend: "pixi" });
+
+    expect(await screen.findByText("No PyPI dependencies")).toBeInTheDocument();
+    expect(
+      screen.getByText("Conda dependencies are not shown in this panel."),
+    ).toBeInTheDocument();
+  });
+
+  it("labels a dependency whose subtree was already displayed", async () => {
+    renderPanel({ kind: "sandbox", backend: "pixi" }, populatedTree);
+
+    fireEvent.click(await screen.findByRole("treeitem", { name: /polars/ }));
+
+    expect(screen.getByText("already in tree")).toBeInTheDocument();
+    expect(screen.queryByText("cycle")).not.toBeInTheDocument();
+  });
+
+  it("keeps the configured package manager changeable outside a sandbox", async () => {
+    const { getPackageList } = renderPanel({
+      kind: "package-manager",
+      name: "pip",
+    });
+
+    expect(
+      await screen.findByPlaceholderText("Install packages with pip..."),
+    ).toBeInTheDocument();
+    const changeManager = screen.getByRole("button", {
+      name: "Change package manager",
+    });
+
+    fireEvent.click(changeManager);
+
+    expect(openSettings).toHaveBeenCalledWith("packageManagementAndData");
+    expect(screen.getByText("environment")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "List" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Tree" })).toBeInTheDocument();
+    expect(getPackageList).toHaveBeenCalledOnce();
+  });
+});