@marimo-team/islands 0.17.8 → 0.18.1

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",
@@ -110,6 +130,11 @@ export const FileExplorer: React.FC<{
     setOpenState({});
   });
 
+  const visibleData = React.useMemo(
+    () => filterHiddenTree(data, showHiddenFiles),
+    [data, showHiddenFiles],
+  );
+
   if (isPending) {
     return <Spinner size="medium" centered={true} />;
   }
@@ -152,6 +177,7 @@ export const FileExplorer: React.FC<{
     <>
       <Toolbar
         onRefresh={handleRefresh}
+        onHidden={handleHiddenFilesToggle}
         onCreateFile={handleCreateFile}
         onCreateFolder={handleCreateFolder}
         onCollapseAll={handleCollapseAll}
@@ -163,7 +189,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 +241,7 @@ const INDENT_STEP = 15;
 
 interface ToolbarProps {
   onRefresh: () => void;
+  onHidden: () => void;
   onCreateFile: () => void;
   onCreateFolder: () => void;
   onCollapseAll: () => void;
@@ -223,6 +250,7 @@ interface ToolbarProps {
 
 const Toolbar = ({
   onRefresh,
+  onHidden,
   onCreateFile,
   onCreateFolder,
   onCollapseAll,
@@ -277,6 +305,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 +715,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) {
+      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/editor/notebook-cell.tsx

@@ -489,7 +489,7 @@ const EditableCellComponent = ({
 
   const outputArea = hasOutput && (
     <div className="relative" onDoubleClick={showHiddenCodeIfMarkdown}>
-      <div className="absolute top-5 -left-8 z-10 print:hidden">
+      <div className="absolute top-5 -left-7 z-20 print:hidden">
         <CollapseToggle
           isCollapsed={isCollapsed}
           onClick={() => {
@@ -580,8 +580,13 @@ const EditableCellComponent = ({
             ref={cellContainerRef}
             {...cellDomProps(cellId, cellData.name)}
           >
+            <CellLeftSideActions cellId={cellId} actions={actions} />
             {cellOutput === "above" && outputArea}
-            <div className={cn("tray")} data-hidden={isMarkdownCodeHidden}>
+            <div
+              className={cn("tray")}
+              data-has-output-above={hasOutputAbove}
+              data-hidden={isMarkdownCodeHidden}
+            >
               <StagedAICellBackground cellId={cellId} />
               <div className="absolute right-2 -top-4 z-10">
                 <CellToolbar
@@ -598,17 +603,6 @@ const EditableCellComponent = ({
                   onRun={runCell}
                 />
               </div>
-              <CellLeftSideActions
-                cellId={cellId}
-                className={cn(
-                  isMarkdownCodeHidden && hasOutputAbove && "-top-7",
-                  isMarkdownCodeHidden && hasOutputBelow && "-bottom-8",
-                  isMarkdownCodeHidden &&
-                    isCellButtonsInline &&
-                    "-left-[3.8rem]",
-                )}
-                actions={actions}
-              />
               <CellEditor
                 theme={theme}
                 showPlaceholder={showPlaceholder}
@@ -836,25 +830,33 @@ const CellLeftSideActions = memo(
     );
 
     const isConnected = isAppConnected(connection.state);
+    const oneClickShortcut = "mod";
 
     return (
       <div
         className={cn(
-          "absolute flex flex-col gap-[2px] justify-center h-full left-[-34px] z-20",
+          "absolute flex flex-col justify-center h-full left-[-26px] z-20 border-b-0!",
           className,
         )}
       >
-        <CreateCellButton
-          tooltipContent={renderShortcut("cell.createAbove")}
-          connectionState={connection.state}
-          onClick={isConnected ? createAbove : undefined}
-        />
-        <div className="flex-1" />
-        <CreateCellButton
-          tooltipContent={renderShortcut("cell.createBelow")}
-          connectionState={connection.state}
-          onClick={isConnected ? createBelow : undefined}
-        />
+        <div className="-mt-1 min-h-7">
+          <CreateCellButton
+            tooltipContent={renderShortcut("cell.createAbove")}
+            connectionState={connection.state}
+            onClick={isConnected ? createAbove : undefined}
+            oneClickShortcut={oneClickShortcut}
+          />
+        </div>
+        <div className="flex-1 pointer-events-none w-3" />
+        {/* <div className="flex-1 pointer-events-none bg-border w-px mx-auto hover-action opacity-70" /> */}
+        <div className="-mb-2 min-h-7">
+          <CreateCellButton
+            tooltipContent={renderShortcut("cell.createBelow")}
+            connectionState={connection.state}
+            onClick={isConnected ? createBelow : undefined}
+            oneClickShortcut={oneClickShortcut}
+          />
+        </div>
       </div>
     );
   },

package/src/components/editor/output/__tests__/ansi-reduce.test.ts

@@ -47,6 +47,14 @@ describe("TerminalBuffer", () => {
     `);
   });
 
+  test("control handles tab", () => {
+    const buffer = new TerminalBuffer();
+    buffer.writeChar("a");
+    buffer.control("\t");
+    buffer.writeChar("b");
+    expect(buffer.render()).toMatchInlineSnapshot(`"a	b"`);
+  });
+
   test("control handles carriage return", () => {
     const buffer = new TerminalBuffer();
     buffer.writeChar("a");

package/src/components/editor/output/ansi-reduce.ts

@@ -69,7 +69,7 @@ export class TerminalBuffer {
     this.cursor.col += str.length;
   }
 
-  /** Handle simple control characters (\n, \r). */
+  /** Handle simple control characters (\n, \r, \t). */
   control(ch: string) {
     switch (ch) {
       case "\n":
@@ -80,6 +80,9 @@ export class TerminalBuffer {
       case "\r":
         this.cursor.col = 0;
         break;
+      case "\t":
+        this.writeChar("\t");
+        break;
     }
   }
 
@@ -268,11 +271,11 @@ export class AnsiReducer {
       const ch = text[i];
 
       // Handle control characters
-      if (ch === "\n" || ch === "\r") {
+      if (ch === "\n" || ch === "\r" || ch === "\t") {
         // Write accumulated text before the control character
         if (i > start) {
           const segment = text.slice(start, i);
-          // Filter out characters below space (but we already have \n and \r handled)
+          // Filter out characters below space (but we already have \n, \r, \t handled)
           const filtered = this.filterControlChars(segment);
           if (filtered.length > 0) {
             this.buffer.writeString(filtered);
@@ -302,7 +305,7 @@ export class AnsiReducer {
     }
   }
 
-  /** Filter out control characters below space (except \n and \r which are handled separately). */
+  /** Filter out control characters below space (except \n, \r, \t which are handled separately). */
   private filterControlChars(text: string): string {
     // Fast path: if no control chars, return as-is
     let hasControlChars = false;

package/src/components/editor/renderers/grid-layout/grid-layout.tsx

@@ -249,6 +249,8 @@ export const GridLayoutRenderer: React.FC<Props> = ({
     </ReactGridLayout>
   );
 
+  const notInGrid = cells.filter((cell) => !inGridIds.has(cell.id));
+
   if (isReading) {
     if (layout.bordered) {
       grid = (
@@ -262,10 +264,32 @@ export const GridLayoutRenderer: React.FC<Props> = ({
         </div>
       );
     }
-    return grid;
-  }
 
-  const notInGrid = cells.filter((cell) => !inGridIds.has(cell.id));
+    const sidebarCells = notInGrid.filter((cell) => isSidebarCell(cell));
+
+    return (
+      <>
+        {grid}
+        {/* Render sidebar outputs even if they are not in grid (hidden) */}
+        <div className="hidden">
+          {sidebarCells.map((cell) => {
+            return (
+              <GridCell
+                key={cell.id}
+                code={cell.code}
+                mode={mode}
+                cellId={cell.id}
+                output={cell.output}
+                status={cell.status}
+                isScrollable={false}
+                hidden={false}
+              />
+            );
+          })}
+        </div>
+      </>
+    );
+  }
 
   if (layout.bordered) {
     grid = (
@@ -641,6 +665,14 @@ const GridHoverActions: React.FC<GridHoverActionsProps> = ({
   );
 };
 
+function isSidebarCell(cell: CellRuntimeState) {
+  // False-positives are ok here because we rendering these cells in a hidden div
+  return (
+    typeof cell.output?.data === "string" &&
+    cell.output.data.includes("marimo-sidebar")
+  );
+}
+
 const SIDE_TO_ICON = {
   // We are only showing horizontal sides for now
   // top: AlignHorizontalSpaceAroundIcon,

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/components/ui/table.tsx

@@ -7,7 +7,7 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="w-full overflow-auto flex-1">
+  <div className="w-full overflow-auto scrollbar-thin flex-1">
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}

package/src/core/ai/tools/__tests__/edit-notebook-tool.test.ts

@@ -128,7 +128,7 @@ describe("EditNotebookTool", () => {
         {
           edit: {
             type: "update_cell",
-            cellId: cellId1,
+            position: { type: "relative", cellId: cellId1 },
             code: newCode,
           },
         },
@@ -154,7 +154,7 @@ describe("EditNotebookTool", () => {
         {
           edit: {
             type: "update_cell",
-            cellId: cellId1,
+            position: { type: "relative", cellId: cellId1 },
             code: "x = 3",
           },
         },
@@ -188,7 +188,7 @@ describe("EditNotebookTool", () => {
           {
             edit: {
               type: "update_cell",
-              cellId: "nonexistent" as CellId,
+              position: { cellId: "nonexistent" as CellId },
               code: "x = 2",
             },
           },
@@ -201,7 +201,7 @@ describe("EditNotebookTool", () => {
           {
             edit: {
               type: "update_cell",
-              cellId: "nonexistent" as CellId,
+              position: { cellId: "nonexistent" as CellId },
               code: "x = 2",
             },
           },
@@ -225,7 +225,7 @@ describe("EditNotebookTool", () => {
           {
             edit: {
               type: "update_cell",
-              cellId: cellId1,
+              position: { type: "relative", cellId: cellId1 },
               code: "x = 2",
             },
           },
@@ -233,6 +233,51 @@ describe("EditNotebookTool", () => {
         ),
       ).rejects.toThrow("Cell editor not found");
     });
+
+    it("should throw error when cellId is missing for update_cell", async () => {
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId1]: { code: "x = 1" },
+        },
+      });
+      store.set(notebookAtom, notebook);
+
+      await expect(
+        tool.handler(
+          {
+            edit: {
+              type: "update_cell",
+              position: {},
+              code: "x = 2",
+            },
+          },
+          toolContext as never,
+        ),
+      ).rejects.toThrow("Cell ID is required for update_cell");
+    });
+
+    it("should throw error when code is missing for update_cell", async () => {
+      const editorView = createMockEditorView("x = 1");
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId1]: { code: "x = 1" },
+        },
+      });
+      notebook.cellHandles[cellId1] = { current: { editorView } } as never;
+      store.set(notebookAtom, notebook);
+
+      await expect(
+        tool.handler(
+          {
+            edit: {
+              type: "update_cell",
+              position: { cellId: cellId1 },
+            },
+          },
+          toolContext as never,
+        ),
+      ).rejects.toThrow("Code is required for update_cell");
+    });
   });
 
   describe("add_cell operation", () => {
@@ -404,6 +449,86 @@ describe("EditNotebookTool", () => {
         ),
       ).rejects.toThrow("Column index is out of range");
     });
+
+    it("should throw error when cellId is missing for add_cell with relative position", async () => {
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId1]: { code: "x = 1" },
+        },
+      });
+      store.set(notebookAtom, notebook);
+
+      await expect(
+        tool.handler(
+          {
+            edit: {
+              type: "add_cell",
+              position: {
+                type: "relative",
+                before: true,
+              },
+              code: "y = 2",
+            },
+          },
+          toolContext as never,
+        ),
+      ).rejects.toThrow(
+        "Cell ID is required for add_cell with relative position",
+      );
+    });
+
+    it("should throw error when before is missing for add_cell with relative position", async () => {
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId1]: { code: "x = 1" },
+        },
+      });
+      store.set(notebookAtom, notebook);
+
+      await expect(
+        tool.handler(
+          {
+            edit: {
+              type: "add_cell",
+              position: {
+                type: "relative",
+                cellId: cellId1,
+              },
+              code: "y = 2",
+            },
+          },
+          toolContext as never,
+        ),
+      ).rejects.toThrow(
+        "Before is required for add_cell with relative position",
+      );
+    });
+
+    it("should throw error when columnIndex is missing for add_cell with column_end position", async () => {
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId1]: { code: "x = 1" },
+        },
+      });
+      store.set(notebookAtom, notebook);
+
+      await expect(
+        tool.handler(
+          {
+            edit: {
+              type: "add_cell",
+              position: {
+                type: "column_end",
+              },
+              code: "y = 2",
+            },
+          },
+          toolContext as never,
+        ),
+      ).rejects.toThrow(
+        "Column index is required for add_cell with column_end position",
+      );
+    });
   });
 
   describe("delete_cell operation", () => {
@@ -423,7 +548,7 @@ describe("EditNotebookTool", () => {
         {
           edit: {
             type: "delete_cell",
-            cellId: cellId1,
+            position: { cellId: cellId1 },
           },
         },
         toolContext as never,
@@ -453,7 +578,7 @@ describe("EditNotebookTool", () => {
           {
             edit: {
               type: "delete_cell",
-              cellId: "nonexistent" as CellId,
+              position: { cellId: "nonexistent" as CellId },
             },
           },
           toolContext as never,
@@ -476,13 +601,34 @@ describe("EditNotebookTool", () => {
           {
             edit: {
               type: "delete_cell",
-              cellId: cellId1,
+              position: { cellId: cellId1 },
             },
           },
           toolContext as never,
         ),
       ).rejects.toThrow("Cell editor not found");
     });
+
+    it("should throw error when cellId is missing for delete_cell", async () => {
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId1]: { code: "x = 1" },
+        },
+      });
+      store.set(notebookAtom, notebook);
+
+      await expect(
+        tool.handler(
+          {
+            edit: {
+              type: "delete_cell",
+              position: {},
+            },
+          },
+          toolContext as never,
+        ),
+      ).rejects.toThrow("Cell ID is required for delete_cell");
+    });
   });
 
   describe("validation", () => {
@@ -508,7 +654,7 @@ describe("EditNotebookTool", () => {
           {
             edit: {
               type: "update_cell",
-              cellId: cellId1,
+              position: { cellId: cellId1 },
               code: "y = 1",
             },
           },
@@ -521,7 +667,7 @@ describe("EditNotebookTool", () => {
           {
             edit: {
               type: "update_cell",
-              cellId: cellId3,
+              position: { cellId: cellId3 },
               code: "y = 3",
             },
           },