@marimo-team/frontend 0.24.1-dev41 → 0.24.1-dev43

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-CrsPwq0f.js"></script>
+    <script type="module" crossorigin src="./assets/index-BBPHmHdW.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">
@@ -95,10 +95,13 @@
     <link rel="modulepreload" crossorigin href="./assets/dist-BgL43w5r.js">
     <link rel="modulepreload" crossorigin href="./assets/menu-items-BSVrMleU.js">
     <link rel="modulepreload" crossorigin href="./assets/button-BMBznEru.js">
+    <link rel="modulepreload" crossorigin href="./assets/alert-dialog-DBoy-FMx.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/x-BgkoSHM-.js">
-    <link rel="modulepreload" crossorigin href="./assets/select-DwqnFsyg.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-BUEX2Vfl.js">
+    <link rel="modulepreload" crossorigin href="./assets/circle--ysFeW9z.js">
     <link rel="modulepreload" crossorigin href="./assets/tooltip-D7dq6bnc.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-PIe1xcZo.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-CbQrIaPV.js">
@@ -115,8 +118,14 @@
     <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">
+    <link rel="modulepreload" crossorigin href="./assets/numbers-DKurV_vq.js">
+    <link rel="modulepreload" crossorigin href="./assets/useDebounce-Dulm61-t.js">
+    <link rel="modulepreload" crossorigin href="./assets/input-DeyycFtq.js">
     <link rel="modulepreload" crossorigin href="./assets/uuid-k9DpjH68.js">
-    <link rel="modulepreload" crossorigin href="./assets/DeferredRequestRegistry-C-SpvRCH.js">
+    <link rel="modulepreload" crossorigin href="./assets/use-toast-DpWHUGuF.js">
+    <link rel="modulepreload" crossorigin href="./assets/write-secret-modal-BG_B6y1P.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-D_-uqy2N.js">
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-HclGiUj8.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-BO5c5n_b.js">
@@ -125,66 +134,64 @@
     <link rel="modulepreload" crossorigin href="./assets/dist-DCc0VfiO.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-DzAWvPVK.js">
     <link rel="modulepreload" crossorigin href="./assets/stex-Dc5bKD4z.js">
-    <link rel="modulepreload" crossorigin href="./assets/use-toast-DpWHUGuF.js">
     <link rel="modulepreload" crossorigin href="./assets/paths-zcL04qUW.js">
     <link rel="modulepreload" crossorigin href="./assets/useTheme-BRnykVDX.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-BdoPd1mK.js">
-    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-TUuUdxHz.js">
-    <link rel="modulepreload" crossorigin href="./assets/chevron-right-CKA5zVsM.js">
-    <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-BpI5klSq.js">
-    <link rel="modulepreload" crossorigin href="./assets/popover-CgOo22ko.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-B1S_6FG3.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/html-to-image-Bt7Ld74W.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-CxzOE8FX.js">
-    <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-YVX2AZaI.js">
-    <link rel="modulepreload" crossorigin href="./assets/table-CUK1W5bI.js">
+    <link rel="modulepreload" crossorigin href="./assets/switch-CBR-ykv3.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/refresh-cw-Bf-rx_aV.js">
-    <link rel="modulepreload" crossorigin href="./assets/tree-actions-Ctf5W0DR.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-Cg05mM3C.js">
+    <link rel="modulepreload" crossorigin href="./assets/extends-CvVTau-c.js">
+    <link rel="modulepreload" crossorigin href="./assets/esm-Dw0vvSg2.js">
+    <link rel="modulepreload" crossorigin href="./assets/useAddCell-DIdbaU70.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-De0vvuWh.js">
+    <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-YVX2AZaI.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/focus-DgNLvj0o.js">
-    <link rel="modulepreload" crossorigin href="./assets/useAsyncData-Buhk-UgR.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-C8IbrNw3.js">
-    <link rel="modulepreload" crossorigin href="./assets/copy-BMXKNElG.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-DIXiKP4m.js">
+    <link rel="modulepreload" crossorigin href="./assets/copy-icon-LPQzn7_f.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-DHnbXALT.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-COTZYPO7.js">
+    <link rel="modulepreload" crossorigin href="./assets/blob-BBiZd3vX.js">
+    <link rel="modulepreload" crossorigin href="./assets/share-C2MPy_VX.js">
+    <link rel="modulepreload" crossorigin href="./assets/events-CbeVJ6OD.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-MlBpc9qi.js">
+    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-TUuUdxHz.js">
+    <link rel="modulepreload" crossorigin href="./assets/config-DcB2swfZ.js">
+    <link rel="modulepreload" crossorigin href="./assets/tabs-c6mpccpH.js">
+    <link rel="modulepreload" crossorigin href="./assets/chevron-right-CKA5zVsM.js">
+    <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-CqNabM1f.js">
+    <link rel="modulepreload" crossorigin href="./assets/html-to-image-DMn_7CCA.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-CIdXYNHv.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-CrWpuExP.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/plus-C4J9gIE1.js">
-    <link rel="modulepreload" crossorigin href="./assets/SSRProvider-C_WMmqnS.js">
-    <link rel="modulepreload" crossorigin href="./assets/usePress-CwOqeEX3.js">
-    <link rel="modulepreload" crossorigin href="./assets/context-Bf2wPdef.js">
-    <link rel="modulepreload" crossorigin href="./assets/useNumberFormatter-BmUQe2Pf.js">
-    <link rel="modulepreload" crossorigin href="./assets/useDebounce-Dulm61-t.js">
-    <link rel="modulepreload" crossorigin href="./assets/numbers-DKurV_vq.js">
-    <link rel="modulepreload" crossorigin href="./assets/input-BuOxQ3Wy.js">
-    <link rel="modulepreload" crossorigin href="./assets/config-xlrIxOZJ.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/sparkles-30wHhAF5.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-C0_eJO-0.js">
-    <link rel="modulepreload" crossorigin href="./assets/copy-icon-LPQzn7_f.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-DP6cAHq0.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-BUuDW4yZ.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-BrSYgi6C.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-Cwh96ZBE.js">
-    <link rel="modulepreload" crossorigin href="./assets/links-C7oaxPJK.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-dmKwNsrp.js">
     <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-Bq7SlWgN.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-N_csMEH1.js">
-    <link rel="modulepreload" crossorigin href="./assets/alert-dialog-DBoy-FMx.js">
-    <link rel="modulepreload" crossorigin href="./assets/dialog-EjSc4yoH.js">
-    <link rel="modulepreload" crossorigin href="./assets/ImperativeModal-68zj0lxy.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-D9d1y67_.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-b7bFhjgD.js">
-    <link rel="modulepreload" crossorigin href="./assets/trash-2-D_HX-0qx.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-llVv0lIh.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-BbAJokoX.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-BXh29HCp.js">
+    <link rel="modulepreload" crossorigin href="./assets/VisuallyHidden-DurJ_JBW.js">
+    <link rel="modulepreload" crossorigin href="./assets/useDateFormatter-BiqAQ-zI.js">
     <link rel="modulepreload" crossorigin href="./assets/en-US-yTIMUO13.js">
     <link rel="modulepreload" crossorigin href="./assets/isValid-nQ3Iam8J.js">
     <link rel="modulepreload" crossorigin href="./assets/dates-DK5JikJo.js">
-    <link rel="modulepreload" crossorigin href="./assets/RSPContexts-D2JcYZo2.js">
-    <link rel="modulepreload" crossorigin href="./assets/useDateFormatter-CfPcCT-J.js">
     <link rel="modulepreload" crossorigin href="./assets/defaultLocale-CNPGWpMu.js">
     <link rel="modulepreload" crossorigin href="./assets/precisionRound-Bq_nmf5u.js">
     <link rel="modulepreload" crossorigin href="./assets/defaultLocale-Dm4DaIgg.js">
@@ -192,34 +199,13 @@
     <link rel="modulepreload" crossorigin href="./assets/tooltip-Cwltdez8.js">
     <link rel="modulepreload" crossorigin href="./assets/react-icons.esm-hr79-MCS.js">
     <link rel="modulepreload" crossorigin href="./assets/emotion-is-prop-valid.esm-nLO-SoUf.js">
-    <link rel="modulepreload" crossorigin href="./assets/extends-CvVTau-c.js">
     <link rel="modulepreload" crossorigin href="./assets/useIframeCapabilities-DEpTCh1Q.js">
     <link rel="modulepreload" crossorigin href="./assets/error-banner-B3KYUlCX.js">
     <link rel="modulepreload" crossorigin href="./assets/utils-49LGK4zG.js">
     <link rel="modulepreload" crossorigin href="./assets/formats-DSzGCKeO.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/command-Cvmdzx0n.js">
-    <link rel="modulepreload" crossorigin href="./assets/field-YoG_gQAY.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-pCdkYz4X.js">
-    <link rel="modulepreload" crossorigin href="./assets/label-B67m1YH7.js">
-    <link rel="modulepreload" crossorigin href="./assets/radio-group-DZoEgN7k.js">
-    <link rel="modulepreload" crossorigin href="./assets/refresh-ccw-DrVG5f2L.js">
-    <link rel="modulepreload" crossorigin href="./assets/form-GIq5QCAI.js">
-    <link rel="modulepreload" crossorigin href="./assets/textarea-mD3C73jw.js">
-    <link rel="modulepreload" crossorigin href="./assets/form-CD2uATFu.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/switch-VzdUoXkf.js">
-    <link rel="modulepreload" crossorigin href="./assets/esm-Dw0vvSg2.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-CyfabMFb.js">
-    <link rel="modulepreload" crossorigin href="./assets/blob-ChElOQvm.js">
-    <link rel="modulepreload" crossorigin href="./assets/share-C2MPy_VX.js">
-    <link rel="modulepreload" crossorigin href="./assets/events-CbeVJ6OD.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-WVnIPIsw.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-BI2qFHVr.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-CUFquO6R.js">
@@ -230,25 +216,25 @@
     <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-DxXY84Jn.js">
+    <link rel="modulepreload" crossorigin href="./assets/file-icons-Bo1Ewf1W.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/types-BflGgckY.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-fku2dKeP.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-D6cIOnWQ.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-BuMFDpR4.js">
-    <link rel="modulepreload" crossorigin href="./assets/renderShortcut-Dj3NbkoC.js">
+    <link rel="modulepreload" crossorigin href="./assets/renderShortcut-D9XYVNe3.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-gjfcwmyU.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-CNsG18LK.js">
     <link rel="stylesheet" crossorigin href="./assets/cells-D-c15Ks-.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-CU2Wa_Bt.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-BQtz7-np.css">
-    <link rel="stylesheet" crossorigin href="./assets/index-H2TMW127.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-0VrRpta0.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

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

package/src/components/chat/acp/agent-panel.tsx

@@ -334,12 +334,10 @@ const PromptArea = memo<PromptAreaProps>(
       // sentence has to begin with '/' to trigger autocomplete
       return {
         triggerCompletionRegex: /^\/(\w+)?/,
-        completions: commands.map(
-          (prompt): Completion => ({
-            label: `/${prompt.name}`,
-            info: prompt.description,
-          }),
-        ),
+        completions: commands.map((prompt): Completion => ({
+          label: `/${prompt.name}`,
+          info: prompt.description,
+        })),
       };
     }, [commands]);
 

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

@@ -196,150 +196,148 @@ export function generateColumns<T>({
     columnKeys.splice(indexColumnIdx, 1);
   }
 
-  const columns = columnKeys.map(
-    (key, idx): ColumnDef<T> => ({
-      id: key || `${NAMELESS_COLUMN_PREFIX}${idx}`,
-      // Use an accessorFn instead of an accessorKey because column names
-      // may have periods in them ...
-      // https://github.com/TanStack/table/issues/1671
-      accessorFn: (row) => {
-        return row[key as keyof T];
-      },
-      enableHiding: !rowHeadersSet.has(key) && key !== "",
-      header: ({ column, table }) => {
-        const stats = chartSpecModel?.getColumnStats(key);
-        const dtype = column.columnDef.meta?.dtype;
-        const headerTitle = headerTooltip?.[key];
-        const headerJustify = textJustifyColumns?.[key];
-
-        const dtypeHeader =
-          showDataTypes && dtype ? (
-            <div
-              className={cn(
-                "flex flex-row gap-1",
-                headerJustify === "center" && "justify-center",
-                headerJustify === "right" && "justify-end",
-              )}
-            >
-              <span className="text-xs text-muted-foreground">{dtype}</span>
-              {stats && typeof stats.nulls === "number" && stats.nulls > 0 && (
-                <span className="text-xs text-muted-foreground">
-                  (nulls: {stats.nulls})
-                </span>
-              )}
-            </div>
-          ) : null;
-
-        const headerName = (
-          <span
+  const columns = columnKeys.map((key, idx): ColumnDef<T> => ({
+    id: key || `${NAMELESS_COLUMN_PREFIX}${idx}`,
+    // Use an accessorFn instead of an accessorKey because column names
+    // may have periods in them ...
+    // https://github.com/TanStack/table/issues/1671
+    accessorFn: (row) => {
+      return row[key as keyof T];
+    },
+    enableHiding: !rowHeadersSet.has(key) && key !== "",
+    header: ({ column, table }) => {
+      const stats = chartSpecModel?.getColumnStats(key);
+      const dtype = column.columnDef.meta?.dtype;
+      const headerTitle = headerTooltip?.[key];
+      const headerJustify = textJustifyColumns?.[key];
+
+      const dtypeHeader =
+        showDataTypes && dtype ? (
+          <div
             className={cn(
-              "font-bold",
-              headerTitle && "underline decoration-dotted",
+              "flex flex-row gap-1",
+              headerJustify === "center" && "justify-center",
+              headerJustify === "right" && "justify-end",
             )}
           >
-            {key === "" ? " " : key}
-          </span>
-        );
+            <span className="text-xs text-muted-foreground">{dtype}</span>
+            {stats && typeof stats.nulls === "number" && stats.nulls > 0 && (
+              <span className="text-xs text-muted-foreground">
+                (nulls: {stats.nulls})
+              </span>
+            )}
+          </div>
+        ) : null;
 
-        const headerWithTooltip = headerTitle ? (
-          <Tooltip content={headerTitle} delayDuration={300}>
-            {headerName}
-          </Tooltip>
-        ) : (
-          headerName
-        );
+      const headerName = (
+        <span
+          className={cn(
+            "font-bold",
+            headerTitle && "underline decoration-dotted",
+          )}
+        >
+          {key === "" ? " " : key}
+        </span>
+      );
 
-        const dataTableColumnHeader = (
-          <DataTableColumnHeader
-            header={headerWithTooltip}
-            subheader={dtypeHeader}
-            column={column}
-            justify={headerJustify}
-            calculateTopKRows={calculateTopKRows}
-            table={table}
-          />
-        );
+      const headerWithTooltip = headerTitle ? (
+        <Tooltip content={headerTitle} delayDuration={300}>
+          {headerName}
+        </Tooltip>
+      ) : (
+        headerName
+      );
 
-        // Row headers have no summaries
-        if (rowHeadersSet.has(key)) {
-          return dataTableColumnHeader;
-        }
+      const dataTableColumnHeader = (
+        <DataTableColumnHeader
+          header={headerWithTooltip}
+          subheader={dtypeHeader}
+          column={column}
+          justify={headerJustify}
+          calculateTopKRows={calculateTopKRows}
+          table={table}
+        />
+      );
 
-        return (
-          <div
-            className={cn(
-              "flex flex-col h-full pt-0.5 pb-3 justify-between items-start",
-              headerJustify === "center" && "items-center",
-              headerJustify === "right" && "items-end",
-            )}
-          >
-            {dataTableColumnHeader}
-            <TableColumnSummary columnId={key} />
-          </div>
-        );
-      },
+      // Row headers have no summaries
+      if (rowHeadersSet.has(key)) {
+        return dataTableColumnHeader;
+      }
 
-      cell: ({ column, renderValue, getValue, cell }) => {
-        function selectCell() {
-          if (selection !== "single-cell" && selection !== "multi-cell") {
-            return;
-          }
+      return (
+        <div
+          className={cn(
+            "flex flex-col h-full pt-0.5 pb-3 justify-between items-start",
+            headerJustify === "center" && "items-center",
+            headerJustify === "right" && "items-end",
+          )}
+        >
+          {dataTableColumnHeader}
+          <TableColumnSummary columnId={key} />
+        </div>
+      );
+    },
 
-          cell.toggleSelected?.();
+    cell: ({ column, renderValue, getValue, cell }) => {
+      function selectCell() {
+        if (selection !== "single-cell" && selection !== "multi-cell") {
+          return;
         }
 
-        const justify = getJustify(key);
-        const wrapped = wrappedColumns?.includes(key);
-        const isCellSelected = cell?.getIsSelected?.() || false;
-        const canSelectCell =
-          (selection === "single-cell" || selection === "multi-cell") &&
-          !isCellSelected;
-
-        const dataType = column.columnDef.meta?.dataType;
-        const isNumeric = isNumericType(dataType);
-        const cellStyles = getCellStyleClass({
-          justify,
-          wrapped,
-          canSelectCell,
-          isSelected: isCellSelected,
-          isNumeric,
-        });
-
-        const renderedCell = renderCellValue({
-          column,
-          renderValue,
-          getValue,
-          selectCell,
-          cellStyles,
-        });
-
-        // Row headers are bold
-        if (rowHeadersSet.has(key)) {
-          return <b>{renderedCell}</b>;
-        }
+        cell.toggleSelected?.();
+      }
 
-        return renderedCell;
-      },
-      // Remove any default filtering
-      filterFn: undefined,
-      // Unnamed index columns and geometry columns are not sortable
-      enableSorting: !!key && getMeta(key).dataType !== "geometry",
-      meta: {
-        ...getMeta(key),
-        width: columnWidths?.[key],
-      },
-      // size seeds the width before measurement; minSize/maxSize pin
-      // getSize() to the fixed width so the per-paint measurement writeback
-      // cannot drift the header width or sticky-pin offsets.
-      ...(columnWidths?.[key] !== undefined
-        ? {
-            size: columnWidths[key],
-            minSize: columnWidths[key],
-            maxSize: columnWidths[key],
-          }
-        : {}),
-    }),
-  );
+      const justify = getJustify(key);
+      const wrapped = wrappedColumns?.includes(key);
+      const isCellSelected = cell?.getIsSelected?.() || false;
+      const canSelectCell =
+        (selection === "single-cell" || selection === "multi-cell") &&
+        !isCellSelected;
+
+      const dataType = column.columnDef.meta?.dataType;
+      const isNumeric = isNumericType(dataType);
+      const cellStyles = getCellStyleClass({
+        justify,
+        wrapped,
+        canSelectCell,
+        isSelected: isCellSelected,
+        isNumeric,
+      });
+
+      const renderedCell = renderCellValue({
+        column,
+        renderValue,
+        getValue,
+        selectCell,
+        cellStyles,
+      });
+
+      // Row headers are bold
+      if (rowHeadersSet.has(key)) {
+        return <b>{renderedCell}</b>;
+      }
+
+      return renderedCell;
+    },
+    // Remove any default filtering
+    filterFn: undefined,
+    // Unnamed index columns and geometry columns are not sortable
+    enableSorting: !!key && getMeta(key).dataType !== "geometry",
+    meta: {
+      ...getMeta(key),
+      width: columnWidths?.[key],
+    },
+    // size seeds the width before measurement; minSize/maxSize pin
+    // getSize() to the fixed width so the per-paint measurement writeback
+    // cannot drift the header width or sticky-pin offsets.
+    ...(columnWidths?.[key] !== undefined
+      ? {
+          size: columnWidths[key],
+          minSize: columnWidths[key],
+          maxSize: columnWidths[key],
+        }
+      : {}),
+  }));
 
   if (selection === "single" || selection === "multi") {
     columns.unshift({

package/src/components/datasources/datasources.tsx

@@ -3,7 +3,7 @@
 import { CommandList } from "cmdk";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
-import { PlusIcon, PlusSquareIcon, XIcon } from "lucide-react";
+import { PlusSquareIcon, XIcon } from "lucide-react";
 import React from "react";
 import { dbDisplayName } from "@/components/databases/display";
 import { EngineVariable } from "@/components/databases/engine-variable";
@@ -64,7 +64,7 @@ import { ErrorBoundary } from "../editor/boundary/ErrorBoundary";
 import { PythonIcon } from "../editor/cell/code/icons";
 import { useAddCodeToNewCell } from "../editor/cell/useAddCell";
 import { PanelEmptyState } from "../editor/chrome/panels/empty-state";
-import { AddConnectionDialog } from "../editor/connections/add-connection-dialog";
+import { AddConnectionButton } from "../editor/connections/add-connection-button";
 import { DatasetColumnPreview } from "./column-preview";
 import {
   ColumnName,
@@ -250,12 +250,12 @@ export const DataSources: React.FC = () => {
         title="No tables found"
         description="Any datasets/dataframes in the global scope will be shown here."
         action={
-          <AddConnectionDialog>
-            <Button variant="outline" size="sm">
-              Add database or catalog
-              <PlusIcon className="h-4 w-4 ml-2" />
-            </Button>
-          </AddConnectionDialog>
+          <AddConnectionButton
+            group="database"
+            label="Add database or catalog"
+            variant="outline"
+            size="sm"
+          />
         }
         icon={<DatabaseIcon />}
       />
@@ -301,15 +301,14 @@ export const DataSources: React.FC = () => {
           className="px-2 rounded-none focus-visible:outline-hidden"
         />
 
-        <AddConnectionDialog>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="px-2 rounded-none focus-visible:outline-hidden"
-          >
-            <PlusIcon className="h-4 w-4" />
-          </Button>
-        </AddConnectionDialog>
+        <AddConnectionButton
+          group="database"
+          label="Add database or catalog"
+          compact={true}
+          variant="ghost"
+          size="sm"
+          className="px-2 rounded-none focus-visible:outline-hidden"
+        />
       </div>
 
       <CommandList className="flex flex-col">