@marimo-team/islands 0.17.8 → 0.18.0

package/dist/{types-2eTEqSwS.js → types-IRrkdH-H.js}

@@ -3,14 +3,14 @@ import { t as require_react } from "./react-DXQlph6m.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-DTozApu4.js";
 import { t as createLucideIcon } from "./createLucideIcon-ixdBmsqu.js";
 import { t as Check } from "./check-DvmFwGOM.js";
-import { A as upperFirst_default, C as createCollection, I as $b5e257d569688ac6$export$619500959fc48b26, L as X, M as $488c6ddbf4ef74c2$export$cc77c4ff7e8673c5, N as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, R as ChevronUp, S as useDirection, _ as menuLabelVariants, g as menuItemVariants, h as menuControlVariants, j as $a916eb452884faea$export$b7a616150fdb9f44, m as menuControlCheckVariants, p as menuContentCommon, v as menuSeparatorVariants, y as menuSubTriggerVariants, z as ChevronDown } from "./label-D3LNCORf.js";
+import { A as upperFirst_default, C as createCollection, I as $b5e257d569688ac6$export$619500959fc48b26, L as X, M as $488c6ddbf4ef74c2$export$cc77c4ff7e8673c5, N as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, R as ChevronUp, S as useDirection, _ as menuLabelVariants, g as menuItemVariants, h as menuControlVariants, j as $a916eb452884faea$export$b7a616150fdb9f44, m as menuControlCheckVariants, p as menuContentCommon, v as menuSeparatorVariants, y as menuSubTriggerVariants, z as ChevronDown } from "./label-Dsm6T1fr.js";
 import { n as clsx_default } from "./clsx-JH8KOlt9.js";
 import { c as composeRefs, d as cn, l as useComposedRefs, o as createSlot, t as Button, u as Events } from "./button-Hye6-2X8.js";
 import { s as Logger } from "./hotkeys-C3KM59Ph.js";
-import { C as DismissableLayer, E as dispatchDiscreteCustomEvent, O as createContextScope, T as Primitive, _ as Content, c as withSmartCollisionBoundary, f as useControllableState, g as Arrow, h as Anchor, i as useFocusGuards, k as composeEventHandlers, l as StyleNamespace, m as Portal, n as hideOthers, o as MAX_HEIGHT_OFFSET, p as Presence, r as FocusScope, s as withFullScreenAsRoot, t as Combination_default, v as Root2$1, w as useCallbackRef, x as useId, y as createPopperScope } from "./Combination-BH_L276x.js";
+import { A as composeEventHandlers, D as dispatchDiscreteCustomEvent, E as Primitive, S as useId, T as useCallbackRef, _ as Arrow, b as createPopperScope, c as withSmartCollisionBoundary, g as Anchor, h as Portal, i as useFocusGuards, k as createContextScope, m as Presence, n as hideOthers, o as MAX_HEIGHT_OFFSET, p as useControllableState, r as FocusScope, s as withFullScreenAsRoot, t as Combination_default, u as StyleNamespace, v as Content, w as DismissableLayer, y as Root2$1 } from "./Combination-D68fi0fY.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-Duz3IlLt.js";
 import { t as require_react_dom } from "./react-dom-DBPBYhx0.js";
-import { m as useEvent_default } from "./useTheme-B-2frT0L.js";
+import { m as useEvent_default } from "./useTheme-D56Xlrez.js";
 import { t as toString_default } from "./toString-MxUAFb1C.js";
 import { r as debounce_default, t as Constants } from "./constants-CN19buVX.js";
 import { t as memoizeLastValue } from "./once-BdyR-H8C.js";
@@ -3029,10 +3029,10 @@ var CONTENT_NAME$1 = "MenuContent", [MenuContentProvider, useMenuContentContext]
     onDismiss: () => n.onOpenChange(false)
   });
 }), Slot = createSlot("MenuContent.ScrollLock"), MenuContentImpl = import_react.forwardRef((e2, t) => {
-  let { __scopeMenu: n, loop: r = false, trapFocus: i, onOpenAutoFocus: a, onCloseAutoFocus: o, disableOutsidePointerEvents: s, onEntryFocus: c, onEscapeKeyDown: l, onPointerDownOutside: u, onFocusOutside: d, onInteractOutside: f, onDismiss: p, disableOutsideScroll: m, ...h } = e2, g = useMenuContext(CONTENT_NAME$1, n), _ = useMenuRootContext(CONTENT_NAME$1, n), v = usePopperScope(n), y = useRovingFocusGroupScope(n), b = useCollection(n), [x, S] = import_react.useState(null), C = import_react.useRef(null), w = useComposedRefs(t, C, g.onContentChange), E = import_react.useRef(0), D = import_react.useRef(""), O = import_react.useRef(0), k = import_react.useRef(null), j = import_react.useRef("right"), M = import_react.useRef(0), N = m ? Combination_default : import_react.Fragment, F = m ? {
+  let { __scopeMenu: n, loop: r = false, trapFocus: i, onOpenAutoFocus: a, onCloseAutoFocus: o, disableOutsidePointerEvents: s, onEntryFocus: c, onEscapeKeyDown: l, onPointerDownOutside: u, onFocusOutside: d, onInteractOutside: f, onDismiss: p, disableOutsideScroll: m, ...h } = e2, g = useMenuContext(CONTENT_NAME$1, n), _ = useMenuRootContext(CONTENT_NAME$1, n), v = usePopperScope(n), y = useRovingFocusGroupScope(n), b = useCollection(n), [x, S] = import_react.useState(null), C = import_react.useRef(null), w = useComposedRefs(t, C, g.onContentChange), E = import_react.useRef(0), D = import_react.useRef(""), O = import_react.useRef(0), k = import_react.useRef(null), j = import_react.useRef("right"), M = import_react.useRef(0), N = m ? Combination_default : import_react.Fragment, P = m ? {
     as: Slot,
     allowPinchZoom: true
-  } : void 0, I = (e3) => {
+  } : void 0, F = (e3) => {
     var _a, _b;
     let t2 = D.current + e3, n2 = b().filter((e4) => !e4.disabled), r2 = document.activeElement, i2 = (_a = n2.find((e4) => e4.ref.current === r2)) == null ? void 0 : _a.textValue, a2 = getNextMatch(n2.map((e4) => e4.textValue), t2, i2), o2 = (_b = n2.find((e4) => e4.textValue === a2)) == null ? void 0 : _b.ref.current;
     (function e4(t3) {
@@ -3040,7 +3040,7 @@ var CONTENT_NAME$1 = "MenuContent", [MenuContentProvider, useMenuContentContext]
     })(t2), o2 && setTimeout(() => o2.focus());
   };
   import_react.useEffect(() => () => window.clearTimeout(E.current), []), useFocusGuards();
-  let L = import_react.useCallback((e3) => {
+  let I = import_react.useCallback((e3) => {
     var _a, _b;
     return j.current === ((_a = k.current) == null ? void 0 : _a.side) && isPointerInGraceArea(e3, (_b = k.current) == null ? void 0 : _b.area);
   }, []);
@@ -3048,21 +3048,21 @@ var CONTENT_NAME$1 = "MenuContent", [MenuContentProvider, useMenuContentContext]
     scope: n,
     searchRef: D,
     onItemEnter: import_react.useCallback((e3) => {
-      L(e3) && e3.preventDefault();
-    }, [L]),
+      I(e3) && e3.preventDefault();
+    }, [I]),
     onItemLeave: import_react.useCallback((e3) => {
       var _a;
-      L(e3) || ((_a = C.current) == null ? void 0 : _a.focus(), S(null));
-    }, [L]),
+      I(e3) || ((_a = C.current) == null ? void 0 : _a.focus(), S(null));
+    }, [I]),
     onTriggerLeave: import_react.useCallback((e3) => {
-      L(e3) && e3.preventDefault();
-    }, [L]),
+      I(e3) && e3.preventDefault();
+    }, [I]),
     pointerGraceTimerRef: O,
     onPointerGraceIntentChange: import_react.useCallback((e3) => {
       k.current = e3;
     }, []),
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(N, {
-      ...F,
+      ...P,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusScope, {
         asChild: true,
         trapped: i,
@@ -3106,7 +3106,7 @@ var CONTENT_NAME$1 = "MenuContent", [MenuContentProvider, useMenuContentContext]
               },
               onKeyDown: composeEventHandlers(h.onKeyDown, (e3) => {
                 let t2 = e3.target.closest("[data-radix-menu-content]") === e3.currentTarget, n2 = e3.ctrlKey || e3.altKey || e3.metaKey, r2 = e3.key.length === 1;
-                t2 && (e3.key === "Tab" && e3.preventDefault(), !n2 && r2 && I(e3.key));
+                t2 && (e3.key === "Tab" && e3.preventDefault(), !n2 && r2 && F(e3.key));
                 let i2 = C.current;
                 if (e3.target !== i2 || !FIRST_LAST_KEYS.includes(e3.key)) return;
                 e3.preventDefault();

package/dist/{useAsyncData-6gisQ4pR.js → useAsyncData-CsSW6_Zh.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-DgPTj83v.js";
 import { t as require_react } from "./react-DXQlph6m.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-DTozApu4.js";
-import { m as useEvent_default } from "./useTheme-B-2frT0L.js";
+import { m as useEvent_default } from "./useTheme-D56Xlrez.js";
 import { t as invariant } from "./invariant-BEpJUgj9.js";
 var import_compiler_runtime = /* @__PURE__ */ __toESM(require_compiler_runtime(), 1), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useTheme-B-2frT0L.js → useTheme-D56Xlrez.js}

@@ -487,6 +487,7 @@ const UserConfigSchema = looseObject({
       "lazy",
       "autorun"
     ]).prefault("off"),
+    reactive_tests: boolean().prefault(true),
     watcher_on_save: _enum(["lazy", "autorun"]).prefault("lazy"),
     default_sql_output: _enum(VALID_SQL_OUTPUT_FORMATS).prefault("auto"),
     default_auto_download: array(_enum(AUTO_DOWNLOAD_FORMATS)).prefault([])

package/dist/{vega-component-C-bCSv1b.js → vega-component-CLjz4see.js}

@@ -2,15 +2,15 @@ import { s as __toESM } from "./chunk-DgPTj83v.js";
 import { t as require_react } from "./react-DXQlph6m.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-DTozApu4.js";
 import "./createLucideIcon-ixdBmsqu.js";
-import { S as CircleQuestionMark, h as asRemoteURL, i as Alert, n as useDeepCompareMemoize, o as AlertTitle, s as isValid, t as arrow } from "./formats-dvT8nDgH.js";
+import { C as CircleQuestionMark, h as asRemoteURL, i as Alert, n as useDeepCompareMemoize, o as AlertTitle, s as isValid, t as arrow } from "./formats-oddMfm9_.js";
 import "./clsx-JH8KOlt9.js";
 import { u as Events } from "./button-Hye6-2X8.js";
 import { o as Objects, s as Logger } from "./hotkeys-C3KM59Ph.js";
-import "./Combination-BH_L276x.js";
+import "./Combination-D68fi0fY.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-Duz3IlLt.js";
 import "./react-dom-DBPBYhx0.js";
-import { c as Tooltip, n as ErrorBanner } from "./error-banner-BqE1uF21.js";
-import { m as useEvent_default, t as useTheme } from "./useTheme-B-2frT0L.js";
+import { c as Tooltip, n as ErrorBanner } from "./error-banner-CPLhCPHA.js";
+import { m as useEvent_default, t as useTheme } from "./useTheme-D56Xlrez.js";
 import "./isArrayLikeObject-LulrZoeO.js";
 import "./isSymbol-bQx0U8Lk.js";
 import "./toNumber-C6hfsNmF.js";
@@ -24,11 +24,11 @@ import { a as tooltipHandler, n as vegaLoadData } from "./loader-BCInj1Mf.js";
 import { t as uniq_default } from "./uniq-CMMw6UdM.js";
 import "./zod-AnT9BweX.js";
 import "./invariant-BEpJUgj9.js";
-import { t as useAsyncData } from "./useAsyncData-6gisQ4pR.js";
+import { t as useAsyncData } from "./useAsyncData-CsSW6_Zh.js";
 import { n as formats } from "./vega-loader.browser-DQF9pFhs.js";
 import "./precisionRound-vxMVRvgy.js";
 import "./linear-B8XR-NVr.js";
-import { t as j } from "./react-vega-ypEMYp9o.js";
+import { t as j } from "./react-vega-DDXWt_PN.js";
 import "./ordinal-DncHRC0c.js";
 import "./time-DRnNkqSS.js";
 import "./range-CqZlY8CG.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.17.8",
+  "version": "0.18.0",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -168,7 +168,7 @@
     "typescript-memoize": "^1.1.1",
     "use-acp": "0.2.5",
     "use-resize-observer": "^9.1.0",
-    "vega-lite": "6.2.0",
+    "vega-lite": "6.4.0",
     "vega-loader": "^5.1.0",
     "vega-parser": "^7.1.0",
     "vega-tooltip": "^1.1.0",

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

@@ -182,7 +182,7 @@ const ChatMessageDisplay: React.FC<ChatMessageProps> = memo(
       const content = textParts.map((p) => p.text).join("\n");
 
       return (
-        <div className="w-[95%] break-words">
+        <div className="w-[95%] wrap-break-word">
           <div className="absolute right-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity">
             <CopyClipboardIcon className="h-3 w-3" value={content || ""} />
           </div>
@@ -567,9 +567,13 @@ const ChatPanelBody = () => {
           options.messages,
         );
 
+        // Call this here to ensure the value is not stale
+        const chatMode = store.get(aiAtom)?.mode || DEFAULT_MODE;
+        const tools = FRONTEND_TOOL_REGISTRY.getToolSchemas(chatMode);
+
         return {
           body: {
-            tools: FRONTEND_TOOL_REGISTRY.getToolSchemas(),
+            tools,
             ...options,
             ...completionBody,
           },

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

@@ -34,6 +34,7 @@ interface TableActionsProps<TData> {
   toggleDisplayHeader?: () => void;
   showChartBuilder?: boolean;
   showColumnExplorer?: boolean;
+  showRowExplorer?: boolean;
   showPageSizeSelector?: boolean;
   togglePanel?: (panelType: PanelType) => void;
   isPanelOpen?: (panelType: PanelType) => boolean;
@@ -55,6 +56,7 @@ export const TableActions = <TData,>({
   toggleDisplayHeader,
   showChartBuilder,
   showColumnExplorer,
+  showRowExplorer,
   showPageSizeSelector,
   togglePanel,
   isPanelOpen,
@@ -132,20 +134,22 @@ export const TableActions = <TData,>({
       )}
       {togglePanel && isPanelOpen !== undefined && (
         <>
-          <Tooltip content="Toggle row viewer">
-            <Button
-              variant="text"
-              size="xs"
-              onClick={() => togglePanel("row-viewer")}
-            >
-              <PanelRightIcon
-                className={cn(
-                  "w-4 h-4 text-muted-foreground",
-                  isPanelOpen("row-viewer") && "text-primary",
-                )}
-              />
-            </Button>
-          </Tooltip>
+          {showRowExplorer && (
+            <Tooltip content="Toggle row viewer">
+              <Button
+                variant="text"
+                size="xs"
+                onClick={() => togglePanel("row-viewer")}
+              >
+                <PanelRightIcon
+                  className={cn(
+                    "w-4 h-4 text-muted-foreground",
+                    isPanelOpen("row-viewer") && "text-primary",
+                  )}
+                />
+              </Button>
+            </Tooltip>
+          )}
           {showColumnExplorer && (
             <Tooltip content="Toggle column explorer">
               <Button

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

@@ -91,6 +91,7 @@ interface DataTableProps<TData> extends Partial<DownloadActionProps> {
   showChartBuilder?: boolean;
   showPageSizeSelector?: boolean;
   showColumnExplorer?: boolean;
+  showRowExplorer?: boolean;
   togglePanel?: (panelType: PanelType) => void;
   isPanelOpen?: (panelType: PanelType) => boolean;
 }
@@ -133,6 +134,7 @@ const DataTableInternal = <TData,>({
   showChartBuilder,
   showPageSizeSelector,
   showColumnExplorer,
+  showRowExplorer,
   togglePanel,
   isPanelOpen,
   viewedRowIdx,
@@ -337,6 +339,7 @@ const DataTableInternal = <TData,>({
         showChartBuilder={showChartBuilder}
         showPageSizeSelector={showPageSizeSelector}
         showColumnExplorer={showColumnExplorer}
+        showRowExplorer={showRowExplorer}
         togglePanel={togglePanel}
         isPanelOpen={isPanelOpen}
         tableLoading={reloading}

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

@@ -23,6 +23,7 @@ import { toast } from "@/components/ui/use-toast";
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import { useRequestClient } from "@/core/network/requests";
 import type { DependencyTreeNode } from "@/core/network/types";
+import { stripPackageManagerPrefix } from "@/core/packages/package-input-utils";
 import {
   showRemovePackageToast,
   showUpgradePackageToast,
@@ -191,8 +192,9 @@ const InstallPackageForm: React.FC<{
   };
 
   const installPackages = () => {
+    const cleanedInput = stripPackageManagerPrefix(input);
     handleInstallPackages(
-      input.split(",").map((p) => p.trim()),
+      cleanedInput.split(",").map((p) => p.trim()),
       onSuccessInstallPackages,
     );
   };

package/src/components/editor/file-tree/__tests__/file-expolorer.test.ts

@@ -0,0 +1,178 @@
+import { describe, expect, it } from "vitest";
+import type { FileInfo } from "@/core/network/types";
+import { filterHiddenTree, isDirectoryOrFileHidden } from "../file-explorer";
+
+// Helpers to build FileInfo objects for tests
+const file = (name: string, path: string): FileInfo => ({
+  id: path,
+  name,
+  path,
+  isDirectory: false,
+  isMarimoFile: false,
+  children: [],
+});
+
+const dir = (
+  name: string,
+  path: string,
+  children: FileInfo[] = [],
+): FileInfo => ({
+  id: path,
+  name,
+  path,
+  isDirectory: true,
+  isMarimoFile: false,
+  children,
+});
+
+describe("isDirectoryOrFileHidden", () => {
+  it("should return true for files starting with dot", () => {
+    expect(isDirectoryOrFileHidden(".git")).toBe(true);
+    expect(isDirectoryOrFileHidden(".env")).toBe(true);
+    expect(isDirectoryOrFileHidden(".gitignore")).toBe(true);
+  });
+
+  it("should return false for normal files", () => {
+    expect(isDirectoryOrFileHidden("README.md")).toBe(false);
+    expect(isDirectoryOrFileHidden("package.json")).toBe(false);
+    expect(isDirectoryOrFileHidden("index.ts")).toBe(false);
+  });
+
+  it("should return false for files with dots in the middle", () => {
+    expect(isDirectoryOrFileHidden("file.test.ts")).toBe(false);
+    expect(isDirectoryOrFileHidden("my.config.js")).toBe(false);
+  });
+});
+
+describe("filterHiddenTree", () => {
+  it("should return all items when showHidden is true", () => {
+    const list: FileInfo[] = [
+      dir(".git", "/.git", []),
+      file("README.md", "/README.md"),
+      file(".env", "/.env"),
+    ];
+
+    const result = filterHiddenTree(list, true);
+
+    expect(result).toBe(list); // should be the exact same reference
+    expect(result).toHaveLength(3);
+  });
+
+  it("should filter out hidden files when showHidden is false", () => {
+    const list: FileInfo[] = [
+      dir(".git", "/.git"),
+      file("README.md", "/README.md"),
+      file(".env", "/.env"),
+      file("package.json", "/package.json"),
+    ];
+
+    const result = filterHiddenTree(list, false);
+
+    expect(result).toHaveLength(2);
+    expect(result[0].name).toBe("README.md");
+    expect(result[1].name).toBe("package.json");
+  });
+
+  it("should filter hidden directories recursively", () => {
+    const list: FileInfo[] = [
+      dir("src", "/src", [
+        file("index.ts", "/src/index.ts"),
+        file(".DS_Store", "/src/.DS_Store"),
+        file("utils.ts", "/src/utils.ts"),
+      ]),
+      dir(".git", "/.git", [file("config", "/.git/config")]),
+    ];
+
+    const result = filterHiddenTree(list, false);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe("src");
+    expect(result[0].children).toHaveLength(2);
+    expect(result[0].children?.[0].name).toBe("index.ts");
+    expect(result[0].children?.[1].name).toBe("utils.ts");
+  });
+
+  it("should handle nested hidden files", () => {
+    const list: FileInfo[] = [
+      dir("project", "/project", [
+        dir("src", "/project/src", [
+          file("index.ts", "/project/src/index.ts"),
+          file(".backup", "/project/src/.backup"),
+        ]),
+        file(".env", "/project/.env"),
+      ]),
+    ];
+
+    const result = filterHiddenTree(list, false);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].children).toHaveLength(1);
+    expect(result[0].children?.[0].name).toBe("src");
+    expect(result[0].children?.[0].children).toHaveLength(1);
+    expect(result[0].children?.[0].children?.[0].name).toBe("index.ts");
+  });
+
+  it("should preserve directory structure when no children are filtered", () => {
+    const list: FileInfo[] = [
+      dir("src", "/src", [
+        file("index.ts", "/src/index.ts"),
+        file("utils.ts", "/src/utils.ts"),
+      ]),
+    ];
+
+    const result = filterHiddenTree(list, true);
+
+    // Should return the same reference since nothing changed
+    expect(result[0]).toBe(list[0]);
+  });
+
+  it("should create new object only when children are filtered", () => {
+    const list: FileInfo[] = [
+      dir("src", "/src", [
+        file("index.ts", "/src/index.ts"),
+        file(".hidden", "/src/.hidden"),
+      ]),
+    ];
+
+    const result = filterHiddenTree(list, false);
+
+    // Should be a new object since children changed
+    expect(result[0]).not.toBe(list[0]);
+    expect(result[0].children).not.toBe(list[0].children);
+  });
+
+  it("should handle empty list", () => {
+    const result = filterHiddenTree([], false);
+    expect(result).toEqual([]);
+  });
+
+  it("should handle empty children arrays", () => {
+    const list: FileInfo[] = [dir("empty-dir", "/empty-dir", [])];
+
+    const result = filterHiddenTree(list, false);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].children).toEqual([]);
+  });
+
+  it("should handle deeply nested structures", () => {
+    const list: FileInfo[] = [
+      dir("level1", "/level1", [
+        dir("level2", "/level1/level2", [
+          dir("level3", "/level1/level2/level3", [
+            file("file.ts", "/level1/level2/level3/file.ts"),
+            file(".hidden", "/level1/level2/level3/.hidden"),
+          ]),
+        ]),
+        file(".ignore", "/level1/.ignore"),
+      ]),
+    ];
+
+    const result = filterHiddenTree(list, false);
+
+    expect(result[0].children?.[0].children?.[0].children).toHaveLength(1);
+    expect(result[0].children?.[0].children?.[0].children?.[0].name).toBe(
+      "file.ts",
+    );
+  });
+});

package/src/components/editor/file-tree/file-explorer.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
 import {
   ArrowLeftIcon,
   BetweenHorizontalStartIcon,
@@ -12,6 +13,7 @@ import {
   DownloadIcon,
   Edit3Icon,
   ExternalLinkIcon,
+  EyeOffIcon,
   FilePlus2Icon,
   FolderPlusIcon,
   ListTreeIcon,
@@ -56,6 +58,7 @@ import { downloadBlob } from "@/utils/download";
 import { openNotebook } from "@/utils/links";
 import type { FilePath } from "@/utils/paths";
 import { fileSplit } from "@/utils/pathUtils";
+import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import marimoIcon from "../../../assets/icon-32x32.png";
 import { FileViewer } from "./file-viewer";
 import type { RequestingTree } from "./requesting-tree";
@@ -68,6 +71,15 @@ import {
 } from "./types";
 import { useFileExplorerUpload } from "./upload";
 
+const hiddenFilesState = atomWithStorage(
+  "marimo:showHiddenFiles",
+  true,
+  jotaiJsonStorage,
+  {
+    getOnInit: true,
+  },
+);
+
 const RequestingTreeContext = React.createContext<RequestingTree | null>(null);
 
 export const FileExplorer: React.FC<{
@@ -77,6 +89,9 @@ export const FileExplorer: React.FC<{
   const [tree] = useAtom(treeAtom);
   const [data, setData] = useState<FileInfo[]>([]);
   const [openFile, setOpenFile] = useState<FileInfo | null>(null);
+  const [showHiddenFiles, setShowHiddenFiles] =
+    useAtom<boolean>(hiddenFilesState);
+
   const { openPrompt } = useImperativeModal();
   // Keep external state to remember which folders are open
   // when this component is unmounted
@@ -87,6 +102,11 @@ export const FileExplorer: React.FC<{
     tree.refreshAll(Object.keys(openState).filter((id) => openState[id]));
   });
 
+  const handleHiddenFilesToggle = useEvent(() => {
+    const newValue = !showHiddenFiles;
+    setShowHiddenFiles(newValue);
+  });
+
   const handleCreateFolder = useEvent(async () => {
     openPrompt({
       title: "Folder name",
@@ -148,10 +168,15 @@ export const FileExplorer: React.FC<{
     );
   }
 
+  const visibleData = React.useMemo(
+    () => filterHiddenTree(data, showHiddenFiles),
+    [data, showHiddenFiles],
+  );
   return (
     <>
       <Toolbar
         onRefresh={handleRefresh}
+        onHidden={handleHiddenFilesToggle}
         onCreateFile={handleCreateFile}
         onCreateFolder={handleCreateFolder}
         onCollapseAll={handleCollapseAll}
@@ -163,7 +188,7 @@ export const FileExplorer: React.FC<{
           ref={treeRef}
           height={height - 33}
           className="h-full"
-          data={data}
+          data={visibleData}
           initialOpenState={openState}
           openByDefault={false}
           // Hide the drop cursor
@@ -215,6 +240,7 @@ const INDENT_STEP = 15;
 
 interface ToolbarProps {
   onRefresh: () => void;
+  onHidden: () => void;
   onCreateFile: () => void;
   onCreateFolder: () => void;
   onCollapseAll: () => void;
@@ -223,6 +249,7 @@ interface ToolbarProps {
 
 const Toolbar = ({
   onRefresh,
+  onHidden,
   onCreateFile,
   onCreateFolder,
   onCollapseAll,
@@ -277,6 +304,16 @@ const Toolbar = ({
           <RefreshCcwIcon size={16} />
         </Button>
       </Tooltip>
+      <Tooltip content="Toggle hidden files">
+        <Button
+          data-testid="file-explorer-hidden-files-button"
+          onClick={onHidden}
+          variant="text"
+          size="xs"
+        >
+          <EyeOffIcon size={16} />
+        </Button>
+      </Tooltip>
       <Tooltip content="Collapse all folders">
         <Button
           data-testid="file-explorer-collapse-button"
@@ -677,3 +714,35 @@ function openMarimoNotebook(
   event.preventDefault();
   openNotebook(path);
 }
+
+export function filterHiddenTree(
+  list: FileInfo[],
+  showHidden: boolean,
+): FileInfo[] {
+  if (showHidden) {
+    return list;
+  }
+
+  const out: FileInfo[] = [];
+  for (const item of list) {
+    if (isDirectoryOrFileHidden(item.name)) {
+      continue;
+    }
+    let next = item;
+    if (item.children && item.children.length) {
+      const kids = filterHiddenTree(item.children, showHidden);
+      if (kids !== item.children) {
+        next = { ...item, children: kids };
+      }
+    }
+    out.push(next);
+  }
+  return out;
+}
+
+export function isDirectoryOrFileHidden(filename: string): boolean {
+  if (filename.startsWith(".")) {
+    return true;
+  }
+  return false;
+}

package/src/components/pages/home-page.tsx

@@ -195,10 +195,15 @@ const WorkspaceNotebooks: React.FC = () => {
           }
         >
           Workspace
-          <RefreshCcwIcon
-            className="w-4 h-4 ml-1 cursor-pointer opacity-70 hover:opacity-100"
+          <Button
+            variant="text"
+            size="icon"
+            className="w-4 h-4 ml-1 p-0 opacity-70 hover:opacity-100"
             onClick={() => refetch()}
-          />
+            aria-label="Refresh workspace"
+          >
+            <RefreshCcwIcon className="w-4 h-4" />
+          </Button>
           {isFetching && <Spinner size="small" />}
         </Header>
         <div className="flex flex-col divide-y divide-(--slate-3) border rounded overflow-hidden max-h-192 overflow-y-auto shadow-sm bg-background">

package/src/core/ai/tools/__tests__/registry.test.ts

@@ -63,7 +63,7 @@ describe("FrontendToolRegistry", () => {
   it("returns tool schemas with expected shape and memoizes the result", () => {
     const registry = new FrontendToolRegistry([new TestFrontendTool()]);
 
-    const schemas1 = registry.getToolSchemas();
+    const schemas1 = registry.getToolSchemas("ask");
     expect(Array.isArray(schemas1)).toBe(true);
     expect(schemas1.length).toBe(1);
 
@@ -80,7 +80,11 @@ describe("FrontendToolRegistry", () => {
     expect(properties && typeof properties === "object").toBe(true);
     expect("name" in (properties ?? {})).toBe(true);
 
-    const schemas2 = registry.getToolSchemas();
+    const schemas2 = registry.getToolSchemas("ask");
     expect(schemas2).toBe(schemas1);
+
+    // Should not include tools for other modes
+    const schemas3 = registry.getToolSchemas("agent");
+    expect(schemas3.length).toBe(0);
   });
 });

package/src/core/ai/tools/registry.ts

@@ -123,8 +123,11 @@ export class FrontendToolRegistry {
   }
 
   @Memoize()
-  getToolSchemas(): FrontendToolDefinition[] {
-    return [...this.tools.values()].map((tool) => ({
+  getToolSchemas(mode: CopilotMode): FrontendToolDefinition[] {
+    const tools = [...this.tools.values()].filter((tool) =>
+      tool.mode.includes(mode),
+    );
+    return tools.map((tool) => ({
       name: tool.name,
       description: formatToolDescription(tool.description),
       parameters: z.toJSONSchema(tool.schema),