@marimo-team/islands 0.16.5 → 0.17.0

package/src/components/editor/chrome/types.ts

@@ -5,6 +5,7 @@ import {
   BotMessageSquareIcon,
   BoxIcon,
   DatabaseIcon,
+  DatabaseZapIcon,
   FileTextIcon,
   FolderTreeIcon,
   FunctionSquareIcon,
@@ -13,7 +14,6 @@ import {
   type LucideIcon,
   NetworkIcon,
   NotebookPenIcon,
-  ScrollTextIcon,
   SquareDashedBottomCodeIcon,
   TextSearchIcon,
   XCircleIcon,
@@ -35,6 +35,7 @@ export type PanelType =
   | "scratchpad"
   | "chat"
   | "agents"
+  | "cache"
   | "secrets"
   | "logs";
 
@@ -46,13 +47,29 @@ export interface PanelDescriptor {
   position: "sidebar" | "footer";
 }
 
+/* Panels are ordered in roughly decreasing order of importance as well as
+ * logically grouped.
+ *
+ * 1. Must-have panels first.
+ * 2. Panels that can add cells to the editor.
+ * 3. Nice-to-have observability panels.
+ */
 export const PANELS: PanelDescriptor[] = [
+  // 1. Must-have panels.
+  //
+  // The files panel is at the top to orient
+  // users within their filesystem and give
+  // them a quick glance at their project structure,
+  // without having to leave their editor.
   {
     type: "files",
     Icon: FolderTreeIcon,
     tooltip: "View files",
     position: "sidebar",
   },
+  // Because notebooks uniquely have data in RAM,
+  // it's important to give humans visibility into
+  // what that data is.
   {
     type: "variables",
     Icon: FunctionSquareIcon,
@@ -65,24 +82,18 @@ export const PANELS: PanelDescriptor[] = [
     tooltip: "Explore data sources",
     position: "sidebar",
   },
-  {
-    type: "dependencies",
-    Icon: NetworkIcon,
-    tooltip: "Explore dependencies",
-    position: "sidebar",
-  },
+  // Every notebook has a package environment that must
+  // be managed.
   {
     type: "packages",
     Icon: BoxIcon,
     tooltip: "Manage packages",
     position: "sidebar",
   },
-  {
-    type: "outline",
-    Icon: ScrollTextIcon,
-    tooltip: "View outline",
-    position: "sidebar",
-  },
+  // 2. "Add cells" panels.
+  //
+  // We start with chat because it's the easiest
+  // way to add new cells to the editor.
   {
     type: "chat",
     Icon: BotMessageSquareIcon,
@@ -90,12 +101,38 @@ export const PANELS: PanelDescriptor[] = [
     position: "sidebar",
   },
   {
+    // TODO(akshayka): Consider merging with chat panel
+    // before release.
     type: "agents",
     Icon: HatGlassesIcon,
     tooltip: "Agents",
     position: "sidebar",
     hidden: !getFeatureFlag("external_agents"),
   },
+  // Scratchpad is the only way users can
+  // code without DAG restrictions, so it is
+  // privileged.
+  {
+    type: "scratchpad",
+    Icon: NotebookPenIcon,
+    tooltip: "Scratchpad",
+    position: "sidebar",
+  },
+  {
+    // TODO(akshayka): Consider making snippets default
+    // off, user configuration to enable.
+    type: "snippets",
+    Icon: SquareDashedBottomCodeIcon,
+    tooltip: "Snippets",
+    position: "sidebar",
+  },
+  // 3. Nice-to-have observability panels.
+  //
+  // Utility panels that provide observability
+  // into the state or structure of the notebook. These
+  // observability panels are less crucial than variables
+  // or datasets, so they are positioned at the end of the
+  // sidebar.
   {
     type: "documentation",
     Icon: TextSearchIcon,
@@ -109,15 +146,18 @@ export const PANELS: PanelDescriptor[] = [
     position: "sidebar",
   },
   {
-    type: "tracing",
-    Icon: ActivityIcon,
-    tooltip: "Tracing",
+    // TODO(akshayka): Consider making dependencies
+    // default off; the minimap is a more effective
+    // overview.
+    type: "dependencies",
+    Icon: NetworkIcon,
+    tooltip: "Explore dependencies",
     position: "sidebar",
   },
   {
-    type: "snippets",
-    Icon: SquareDashedBottomCodeIcon,
-    tooltip: "Snippets",
+    type: "tracing",
+    Icon: ActivityIcon,
+    tooltip: "Tracing",
     position: "sidebar",
   },
   {
@@ -128,11 +168,15 @@ export const PANELS: PanelDescriptor[] = [
     hidden: isWasm(),
     position: "sidebar",
   },
+  // TODO(akshayka): The cache panel should not be default shown,
+  // even when it's out of feature flag. (User config to
+  // turn it on.)
   {
-    type: "scratchpad",
-    Icon: NotebookPenIcon,
-    tooltip: "Scratchpad",
+    type: "cache",
+    Icon: DatabaseZapIcon,
+    tooltip: "Manage cache",
     position: "sidebar",
+    hidden: !getFeatureFlag("cache_panel"),
   },
   {
     type: "errors",

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -56,6 +56,7 @@ const LazySecretsPanel = React.lazy(() => import("../panels/secrets-panel"));
 const LazySnippetsPanel = React.lazy(() => import("../panels/snippets-panel"));
 const LazyTracingPanel = React.lazy(() => import("../panels/tracing-panel"));
 const LazyVariablePanel = React.lazy(() => import("../panels/variable-panel"));
+const LazyCachePanel = React.lazy(() => import("../panels/cache-panel"));
 
 export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const { isSidebarOpen, isTerminalOpen, selectedPanel } = useChromeState();
@@ -176,6 +177,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
             {selectedPanel === "logs" && <LazyLogsPanel />}
             {selectedPanel === "tracing" && <LazyTracingPanel />}
             {selectedPanel === "secrets" && <LazySecretsPanel />}
+            {selectedPanel === "cache" && <LazyCachePanel />}
           </TooltipProvider>
         </Suspense>
       </div>

package/src/components/editor/errors/auto-fix.tsx

@@ -1,8 +1,14 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import { useAtomValue, useSetAtom } from "jotai";
-import { WrenchIcon } from "lucide-react";
+import { useAtomValue, useSetAtom, useStore } from "jotai";
+import { ChevronDownIcon, SparklesIcon, WrenchIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Tooltip } from "@/components/ui/tooltip";
 import { aiCompletionCellAtom } from "@/core/ai/state";
 import { notebookAtom, useCellActions } from "@/core/cells/cells";
@@ -10,8 +16,8 @@ import type { CellId } from "@/core/cells/ids";
 import { aiEnabledAtom } from "@/core/config/config";
 import { getAutoFixes } from "@/core/errors/errors";
 import type { MarimoError } from "@/core/kernel/messages";
-import { store } from "@/core/state/jotai";
 import { cn } from "@/utils/cn";
+import { type FixMode, useFixMode } from "./fix-mode";
 
 export const AutoFixButton = ({
   errors,
@@ -22,6 +28,7 @@ export const AutoFixButton = ({
   cellId: CellId;
   className?: string;
 }) => {
+  const store = useStore();
   const { createNewCell } = useCellActions();
   const aiEnabled = useAtomValue(aiEnabledAtom);
   const autoFixes = errors.flatMap((error) =>
@@ -37,35 +44,134 @@ export const AutoFixButton = ({
   // multiple fixes.
   const firstFix = autoFixes[0];
 
+  const handleFix = (triggerFix: boolean) => {
+    const editorView =
+      store.get(notebookAtom).cellHandles[cellId].current?.editorView;
+    firstFix.onFix({
+      addCodeBelow: (code: string) => {
+        createNewCell({
+          cellId: cellId,
+          autoFocus: false,
+          before: false,
+          code: code,
+        });
+      },
+      editor: editorView,
+      cellId: cellId,
+      aiFix: {
+        setAiCompletionCell,
+        triggerFix,
+      },
+    });
+    // Focus the editor
+    editorView?.focus();
+  };
+
+  return (
+    <div className={cn("my-2", className)}>
+      {firstFix.fixType === "ai" ? (
+        <AIFixButton
+          tooltip={firstFix.description}
+          openPrompt={() => handleFix(false)}
+          applyAutofix={() => handleFix(true)}
+        />
+      ) : (
+        <Tooltip content={firstFix.description} align="start">
+          <Button
+            size="xs"
+            variant="outline"
+            className="font-normal"
+            onClick={() => handleFix(false)}
+          >
+            <WrenchIcon className="h-3 w-3 mr-2" />
+            {firstFix.title}
+          </Button>
+        </Tooltip>
+      )}
+    </div>
+  );
+};
+
+const PromptIcon = SparklesIcon;
+const AutofixIcon = WrenchIcon;
+
+const PromptTitle = "Suggest a prompt";
+const AutofixTitle = "Fix with AI";
+
+export const AIFixButton = ({
+  tooltip,
+  openPrompt,
+  applyAutofix,
+}: {
+  tooltip: string;
+  openPrompt: () => void;
+  applyAutofix: () => void;
+}) => {
+  const { fixMode, setFixMode } = useFixMode();
+
+  return (
+    <div className="flex">
+      <Tooltip content={tooltip} align="start">
+        <Button
+          size="xs"
+          variant="outline"
+          className="font-normal rounded-r-none border-r-0"
+          onClick={fixMode === "prompt" ? openPrompt : applyAutofix}
+        >
+          {fixMode === "prompt" ? (
+            <PromptIcon className="h-3 w-3 mr-2 mb-0.5" />
+          ) : (
+            <AutofixIcon className="h-3 w-3 mr-2 mb-0.5" />
+          )}
+          {fixMode === "prompt" ? PromptTitle : AutofixTitle}
+        </Button>
+      </Tooltip>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild={true}>
+          <Button
+            size="xs"
+            variant="outline"
+            className="rounded-l-none px-2"
+            aria-label="Fix options"
+          >
+            <ChevronDownIcon className="h-3 w-3" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56">
+          <DropdownMenuItem
+            className="flex items-center gap-2"
+            onClick={() => {
+              setFixMode(fixMode === "prompt" ? "autofix" : "prompt");
+            }}
+          >
+            <AiModeItem mode={fixMode === "prompt" ? "autofix" : "prompt"} />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+const AiModeItem = ({ mode }: { mode: FixMode }) => {
+  const icon =
+    mode === "prompt" ? (
+      <PromptIcon className="h-4 w-4" />
+    ) : (
+      <AutofixIcon className="h-4 w-4" />
+    );
+  const title = mode === "prompt" ? PromptTitle : AutofixTitle;
+  const description =
+    mode === "prompt"
+      ? "Edit the prompt before applying"
+      : "Apply AI fixes automatically";
+
   return (
-    <Tooltip content={firstFix.description} align="start">
-      <Button
-        size="xs"
-        variant="outline"
-        className={cn("my-2 font-normal", className)}
-        onClick={() => {
-          const editorView =
-            store.get(notebookAtom).cellHandles[cellId].current?.editorView;
-          firstFix.onFix({
-            addCodeBelow: (code: string) => {
-              createNewCell({
-                cellId: cellId,
-                autoFocus: false,
-                before: false,
-                code: code,
-              });
-            },
-            editor: editorView,
-            cellId: cellId,
-            setAiCompletionCell,
-          });
-          // Focus the editor
-          editorView?.focus();
-        }}
-      >
-        <WrenchIcon className="h-3 w-3 mr-2" />
-        {firstFix.title}
-      </Button>
-    </Tooltip>
+    <div className="flex items-center gap-2">
+      {icon}
+      <div className="flex flex-col">
+        <span className="font-medium">{title}</span>
+        <span className="text-xs text-muted-foreground">{description}</span>
+      </div>
+    </div>
   );
 };

package/src/components/editor/errors/fix-mode.ts

@@ -0,0 +1,15 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+
+export type FixMode = "prompt" | "autofix";
+
+const BASE_KEY = "marimo:ai-autofix-mode";
+
+const fixModeAtom = atomWithStorage<FixMode>(BASE_KEY, "autofix");
+
+export function useFixMode() {
+  const [fixMode, setFixMode] = useAtom(fixModeAtom);
+  return { fixMode, setFixMode };
+}

package/src/components/editor/navigation/__tests__/clipboard.test.ts

@@ -178,11 +178,6 @@ describe("useCellClipboard", () => {
         "Failed to copy cells to clipboard",
         expect.any(Error),
       );
-      expect(toast).toHaveBeenCalledWith({
-        title: "Copy failed",
-        description: "Failed to copy cells to clipboard.",
-        variant: "danger",
-      });
     });
 
     it("should filter out non-existent cells", async () => {

package/src/components/editor/navigation/clipboard.ts

@@ -5,6 +5,7 @@ import { z } from "zod";
 import { toast } from "@/components/ui/use-toast";
 import { getNotebook, useCellActions } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
+import { copyToClipboard } from "@/utils/copy";
 import { Logger } from "@/utils/Logger";
 
 // According to MDN, custom mimetypes should start with "web "
@@ -70,7 +71,7 @@ export function useCellClipboard() {
       // Fallback to simple text copy
       try {
         const plainText = cells.map((cell) => cell.code).join("\n\n");
-        await navigator.clipboard.writeText(plainText);
+        await copyToClipboard(plainText);
         toastSuccess(cells.length);
       } catch {
         toastError();

package/src/components/editor/notebook-cell.tsx

@@ -86,7 +86,7 @@ import {
   useTemporarilyShownCode,
   useTemporarilyShownCodeActions,
 } from "./navigation/state";
-import { OutputArea } from "./Output";
+import { type OnRefactorWithAI, OutputArea } from "./Output";
 import { ConsoleOutput } from "./output/ConsoleOutput";
 import { CellDragHandle, SortableCell } from "./SortableCell";
 
@@ -532,9 +532,15 @@ const EditableCellComponent = ({
       isMarkdownCodeHidden && hasOutput && !navigationProps["data-selected"],
   });
 
-  const handleRefactorWithAI = useEvent((opts: { prompt: string }) => {
-    setAiCompletionCell({ cellId, initialPrompt: opts.prompt });
-  });
+  const handleRefactorWithAI: OnRefactorWithAI = useEvent(
+    (opts: { prompt: string; triggerImmediately: boolean }) => {
+      setAiCompletionCell({
+        cellId,
+        initialPrompt: opts.prompt,
+        triggerImmediately: opts.triggerImmediately,
+      });
+    },
+  );
 
   // TODO(akshayka): Move to our own Tooltip component once it's easier
   // to get the tooltip to show next to the cursor ...
@@ -622,6 +628,7 @@ const EditableCellComponent = ({
                 showHiddenCode={showHiddenCode}
                 languageAdapter={languageAdapter}
                 setLanguageAdapter={setLanguageAdapter}
+                outputArea={cellOutput}
               />
               <CellRightSideActions
                 className={cn(
@@ -1027,9 +1034,15 @@ const SetupCellComponent = ({
     },
   );
 
-  const handleRefactorWithAI = useEvent((opts: { prompt: string }) => {
-    setAiCompletionCell({ cellId, initialPrompt: opts.prompt });
-  });
+  const handleRefactorWithAI: OnRefactorWithAI = useEvent(
+    (opts: { prompt: string; triggerImmediately: boolean }) => {
+      setAiCompletionCell({
+        cellId,
+        initialPrompt: opts.prompt,
+        triggerImmediately: opts.triggerImmediately,
+      });
+    },
+  );
 
   // TODO(akshayka): Move to our own Tooltip component once it's easier
   // to get the tooltip to show next to the cursor ...

package/src/components/editor/output/ConsoleOutput.tsx

@@ -1,10 +1,11 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { AnsiUp } from "ansi_up";
-import { ChevronRightIcon, CopyIcon, WrapTextIcon } from "lucide-react";
+import { ChevronRightIcon, WrapTextIcon } from "lucide-react";
 import React, { useLayoutEffect } from "react";
 import { ToggleButton } from "react-aria-components";
 import { DebuggerControls } from "@/components/debugger/debugger-code";
+import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { Input } from "@/components/ui/input";
 import { Tooltip } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
@@ -13,13 +14,12 @@ import type { WithResponse } from "@/core/cells/types";
 import type { OutputMessage } from "@/core/kernel/messages";
 import { useSelectAllContent } from "@/hooks/useSelectAllContent";
 import { cn } from "@/utils/cn";
-import { copyToClipboard } from "@/utils/copy";
 import { ansiToPlainText, parseHtmlContent } from "@/utils/dom";
 import { invariant } from "@/utils/invariant";
 import { Strings } from "@/utils/strings";
 import { NameCellContentEditable } from "../actions/name-cell-input";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
-import { OutputRenderer } from "../Output";
+import { type OnRefactorWithAI, OutputRenderer } from "../Output";
 import { useWrapText } from "./useWrapText";
 
 const ansiUp = new AnsiUp();
@@ -31,7 +31,7 @@ interface Props {
   consoleOutputs: WithResponse<OutputMessage>[];
   stale: boolean;
   debuggerActive: boolean;
-  onRefactorWithAI?: (opts: { prompt: string }) => void;
+  onRefactorWithAI?: OnRefactorWithAI;
   onClear?: () => void;
   onSubmitDebugger: (text: string, index: number) => void;
 }
@@ -112,39 +112,33 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
     (output) => output.channel === "stdin",
   );
 
+  const getOutputString = (): string => {
+    const text = consoleOutputs
+      .filter((output) => output.channel !== "pdb")
+      .map((output) => {
+        if (
+          output.mimetype.startsWith("application/vnd.marimo") ||
+          output.mimetype === "text/html"
+        ) {
+          return parseHtmlContent(Strings.asString(output.data));
+        }
+
+        // Convert ANSI to HTML, then parse as HTML
+        return ansiToPlainText(Strings.asString(output.data));
+      })
+      .join("\n");
+    return text;
+  };
+
   return (
     <div className="relative group">
       {hasOutputs && (
         <div className="absolute top-1 right-5 z-10 opacity-0 group-hover:opacity-100 flex gap-1">
-          <Tooltip content="Copy all">
-            <span>
-              <button
-                aria-label="Copy all console output"
-                className="p-1 rounded bg-transparent text-muted-foreground hover:text-foreground"
-                type="button"
-                onClick={() => {
-                  const text = reversedOutputs
-                    .filter((output) => output.channel !== "pdb")
-                    .map((output) => {
-                      // If starts with `<`, then assume it's HTML
-                      if (
-                        typeof output.data === "string" &&
-                        output.data.startsWith("<")
-                      ) {
-                        return parseHtmlContent(output.data);
-                      }
-
-                      // Otherwise, convert the ANSI to HTML, then parse as HTML
-                      return ansiToPlainText(Strings.asString(output.data));
-                    })
-                    .join("\n");
-                  void copyToClipboard(text);
-                }}
-              >
-                <CopyIcon className="h-4 w-4" />
-              </button>
-            </span>
-          </Tooltip>
+          <CopyClipboardIcon
+            tooltip="Copy console output"
+            value={getOutputString}
+            className="h-4 w-4"
+          />
           <Tooltip content={wrapText ? "Disable wrap text" : "Wrap text"}>
             <span>
               <ToggleButton

package/src/components/editor/output/JsonOutput.tsx

@@ -194,6 +194,7 @@ const LEAF_RENDERERS = {
   "video/": (value: string) => <VideoOutput src={value} />,
   "text/html:": (value: string) => <HtmlOutput html={value} inline={true} />,
   "text/plain+float:": (value: string) => <span>{value}</span>,
+  "text/plain+bigint:": (value: string) => <span>{value}</span>,
   "text/plain+set:": (value: string) => <span>set{value}</span>,
   "text/plain+tuple:": (value: string) => <span>{value}</span>,
   "text/plain:": (value: string) => <CollapsibleTextOutput text={value} />,
@@ -351,6 +352,9 @@ function pythonJsonReplacer(_key: string, value: unknown): unknown {
   if (typeof value === "object") {
     return value;
   }
+  if (typeof value === "bigint") {
+    return `${REPLACE_PREFIX}${value}${REPLACE_SUFFIX}`;
+  }
   if (Array.isArray(value)) {
     return value;
   }
@@ -359,6 +363,11 @@ function pythonJsonReplacer(_key: string, value: unknown): unknown {
     if (value.startsWith("text/plain+float:")) {
       return `${REPLACE_PREFIX}${leafData(value)}${REPLACE_SUFFIX}`;
     }
+    if (value.startsWith("text/plain+bigint:")) {
+      // Use BigInt to avoid precision loss
+      const number = BigInt(leafData(value));
+      return `${REPLACE_PREFIX}${number}${REPLACE_SUFFIX}`;
+    }
     if (value.startsWith("text/plain+tuple:")) {
       // replace first and last characters [] with ()
       return `${REPLACE_PREFIX}(${leafData(value).slice(1, -1)})${REPLACE_SUFFIX}`;

package/src/components/editor/output/MarimoTracebackOutput.tsx

@@ -3,7 +3,6 @@
 import { type DOMNode, Element, Text } from "html-react-parser";
 import { useAtomValue } from "jotai";
 import {
-  BugIcon,
   BugPlayIcon,
   ChevronDown,
   CopyIcon,
@@ -40,12 +39,14 @@ import {
   getTracebackInfo,
 } from "@/utils/traceback";
 import { cn } from "../../../utils/cn";
+import { AIFixButton } from "../errors/auto-fix";
 import { CellLinkTraceback } from "../links/cell-link";
+import type { OnRefactorWithAI } from "../Output";
 
 interface Props {
   cellId: CellId | undefined;
   traceback: string;
-  onRefactorWithAI?: (opts: { prompt: string }) => void;
+  onRefactorWithAI?: OnRefactorWithAI;
 }
 
 const KEY = "item";
@@ -69,9 +70,10 @@ export const MarimoTracebackOutput = ({
   // Get last traceback info
   const tracebackInfo = extractAllTracebackInfo(traceback)?.at(0);
 
-  const handleRefactorWithAI = () => {
+  const handleRefactorWithAI = (triggerImmediately: boolean) => {
     onRefactorWithAI?.({
       prompt: `My code gives the following error:\n\n${lastTracebackLine}`,
+      triggerImmediately,
     });
   };
 
@@ -103,10 +105,11 @@ export const MarimoTracebackOutput = ({
       </Accordion>
       <div className="flex gap-2">
         {onRefactorWithAI && aiEnabled && (
-          <Button size="xs" variant="outline" onClick={handleRefactorWithAI}>
-            <BugIcon className="h-3 w-3 mr-2" />
-            Fix with AI
-          </Button>
+          <AIFixButton
+            tooltip="Fix with AI"
+            openPrompt={() => handleRefactorWithAI(false)}
+            applyAutofix={() => handleRefactorWithAI(true)}
+          />
         )}
         {tracebackInfo && tracebackInfo.kind === "cell" && !isWasm() && (
           <Tooltip content={"Attach pdb to the exception point."}>