@marimo-team/islands 0.17.0 → 0.17.2

package/src/components/editor/chrome/wrapper/pending-ai-cells.tsx

@@ -0,0 +1,108 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useAtomValue, useStore } from "jotai";
+import { ChevronDown, ChevronUp, SparklesIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { stagedAICellsAtom, useStagedCells } from "@/core/ai/staged-cells";
+import type { CellId } from "@/core/cells/ids";
+import { getNextIndex } from "@/utils/arrays";
+import { cn } from "@/utils/cn";
+import {
+  AcceptCompletionButton,
+  RejectCompletionButton,
+} from "../../ai/completion-handlers";
+import { acceptStagedCell, rejectStagedCell } from "../../cell/StagedAICell";
+import { useRunCells } from "../../cell/useRunCells";
+import { scrollAndHighlightCell } from "../../links/cell-link";
+
+export const PendingAICells: React.FC = () => {
+  const [currentIndex, setCurrentIndex] = useState<number | null>(null);
+
+  const stagedAiCells = useAtomValue(stagedAICellsAtom);
+  const listStagedCells = [...stagedAiCells.keys()];
+  const store = useStore();
+  const { deleteStagedCell, removeStagedCell } = useStagedCells(store);
+  const runCell = useRunCells();
+
+  if (stagedAiCells.size === 0) {
+    return null;
+  }
+
+  const scrollToCell = (cellId: CellId) => {
+    scrollAndHighlightCell(cellId, "focus");
+  };
+
+  const clickNext = (direction: "up" | "down") => {
+    const newIndex = getNextIndex(
+      currentIndex,
+      listStagedCells.length,
+      direction,
+    );
+    setCurrentIndex(newIndex);
+    scrollToCell(listStagedCells[newIndex]);
+  };
+
+  const acceptAllCompletions = () => {
+    for (const [cellId, edit] of stagedAiCells) {
+      acceptStagedCell(cellId, edit, removeStagedCell, deleteStagedCell);
+    }
+  };
+
+  const rejectAllCompletions = () => {
+    for (const [cellId, edit] of stagedAiCells) {
+      rejectStagedCell(cellId, edit, removeStagedCell, deleteStagedCell);
+    }
+  };
+
+  const runAllCells = () => {
+    runCell(listStagedCells);
+  };
+
+  const cyanShadow = "shadow-[0_0_6px_0_#00A2C733]";
+
+  return (
+    <div
+      className={cn(
+        "fixed bottom-16 left-1/2 transform -translate-x-1/2 z-50 bg-background/95 backdrop-blur-sm supports-backdrop-filter:bg-background/80 border border-border rounded-lg px-3 py-2 flex items-center justify-between gap-2.5 w-100",
+        cyanShadow,
+      )}
+    >
+      <SparklesIcon className="h-4 w-4 text-primary" />
+
+      <div className="flex items-center">
+        <Button variant="ghost" size="icon" onClick={() => clickNext("up")}>
+          <ChevronUp className="h-3.5 w-3.5" />
+        </Button>
+        <span className="text-xs font-mono min-w-[3.5rem] text-center">
+          {currentIndex === null
+            ? `${listStagedCells.length} pending`
+            : `${currentIndex + 1} / ${listStagedCells.length}`}
+        </span>
+        <Button variant="ghost" size="icon" onClick={() => clickNext("down")}>
+          <ChevronDown className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+
+      <div className="h-5 w-px bg-border" />
+
+      <div className="flex items-center gap-1.5">
+        <AcceptCompletionButton
+          multipleCompletions={true}
+          onAccept={acceptAllCompletions}
+          isLoading={false}
+          size="xs"
+          buttonStyles="h-6.5"
+          playButtonStyles="h-6.5"
+          runCell={runAllCells}
+        />
+        <RejectCompletionButton
+          multipleCompletions={true}
+          onDecline={rejectAllCompletions}
+          size="xs"
+          className="h-6.5"
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/editor/chrome/wrapper/sidebar.tsx

@@ -86,7 +86,7 @@ const SidebarItem: React.FC<
     <Tooltip content={tooltip} side="right" delayDuration={200}>
       <button
         className={cn(
-          "flex items-center p-2 text-sm mx-px shadow-inset font-mono cursor-pointer rounded",
+          "flex items-center p-2 text-sm mx-px shadow-inset font-mono rounded",
           !selected && "hover:bg-(--sage-3)",
           selected && "bg-(--sage-4)",
           className,

package/src/components/editor/code/readonly-diff.tsx

@@ -0,0 +1,49 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { unifiedMergeView } from "@codemirror/merge";
+import { EditorView } from "@codemirror/view";
+import CodeMirror from "@uiw/react-codemirror";
+import { memo, useMemo } from "react";
+import { useTheme } from "@/theme/useTheme";
+
+export const ReadonlyDiff = memo(
+  (props: { original: string; modified: string }) => {
+    const { theme } = useTheme();
+
+    const extensions = useMemo(() => {
+      return [
+        EditorView.lineWrapping,
+        unifiedMergeView({
+          original: props.original,
+          mergeControls: false,
+        }),
+      ];
+    }, [props.original, props.modified, theme]);
+
+    return (
+      <CodeMirror
+        className="cm font-mono"
+        style={
+          {
+            "--marimo-code-editor-font-size": "10px",
+          } as React.CSSProperties
+        }
+        extensions={extensions}
+        readOnly={true}
+        basicSetup={{
+          lineNumbers: false,
+          foldGutter: false,
+          dropCursor: false,
+          highlightActiveLineGutter: false,
+          allowMultipleSelections: false,
+          indentOnInput: false,
+          bracketMatching: false,
+          closeBrackets: false,
+          autocompletion: false,
+        }}
+        theme={theme === "dark" ? "dark" : "light"}
+        value={props.modified}
+      />
+    );
+  },
+);
+ReadonlyDiff.displayName = "ReadonlyDiff";

package/src/components/editor/columns/storage.ts

@@ -2,7 +2,7 @@
 
 import { z } from "zod";
 import { arrayMove } from "@/utils/arrays";
-import { NotebookScopedLocalStorage } from "@/utils/localStorage";
+import { NotebookScopedLocalStorage } from "@/utils/storage/typed";
 
 const BASE_KEY = "marimo:notebook-col-sizes";
 

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

@@ -2,12 +2,17 @@
 
 import { useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
+import { jotaiJsonStorage } from "@/utils/storage/jotai";
 
 export type FixMode = "prompt" | "autofix";
 
 const BASE_KEY = "marimo:ai-autofix-mode";
 
-const fixModeAtom = atomWithStorage<FixMode>(BASE_KEY, "autofix");
+const fixModeAtom = atomWithStorage<FixMode>(
+  BASE_KEY,
+  "autofix",
+  jotaiJsonStorage,
+);
 
 export function useFixMode() {
   const [fixMode, setFixMode] = useAtom(fixModeAtom);

package/src/components/editor/inputs/Inputs.styles.ts

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 import "./Inputs.css";
 
 export const button = cva(
-  "flex items-center justify-center m-0 leading-none font-medium border border-foreground/10 shadow-xs-solid hover:cursor-pointer active:shadow-none dark:border-border text-sm",
+  "flex items-center justify-center m-0 leading-none font-medium border border-foreground/10 shadow-xs-solid active:shadow-none dark:border-border text-sm",
   {
     variants: {
       color: {

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

@@ -12,7 +12,7 @@ interface Props {
 export const CalloutOutput: React.FC<Props> = memo(({ html, kind }) => {
   return (
     <div className={calloutStyles({ kind })}>
-      <HtmlOutput html={html} />
+      <HtmlOutput html={html} alwaysSanitizeHtml={true} />
     </div>
   );
 });

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

@@ -5,19 +5,20 @@ import { cn } from "../../../utils/cn";
 
 interface Props {
   html: string;
+  alwaysSanitizeHtml: boolean;
   inline?: boolean;
   className?: string;
 }
 
 export const HtmlOutput: React.FC<Props> = memo(
-  ({ html, inline = false, className }) => {
+  ({ html, inline = false, className, alwaysSanitizeHtml }) => {
     if (!html) {
       return null;
     }
 
     return (
       <div className={cn(className, { "inline-flex": inline, block: !inline })}>
-        {renderHTML({ html })}
+        {renderHTML({ html, alwaysSanitizeHtml })}
       </div>
     );
   },

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

@@ -192,7 +192,12 @@ const CollapsibleTextOutput = (props: { text: string }) => {
 const LEAF_RENDERERS = {
   "image/": (value: string) => <ImageOutput src={value} />,
   "video/": (value: string) => <VideoOutput src={value} />,
-  "text/html:": (value: string) => <HtmlOutput html={value} inline={true} />,
+  "text/html:": (value: string) => (
+    <HtmlOutput html={value} inline={true} alwaysSanitizeHtml={false} />
+  ),
+  "text/markdown:": (value: string) => (
+    <HtmlOutput html={value} inline={true} alwaysSanitizeHtml={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>,

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

@@ -30,6 +30,7 @@ import type { CellId } from "@/core/cells/ids";
 import { insertDebuggerAtLine } from "@/core/codemirror/editing/debugging";
 import { aiEnabledAtom } from "@/core/config/config";
 import { getRequestClient } from "@/core/network/requests";
+import { isStaticNotebook } from "@/core/static/static-state";
 import { isWasm } from "@/core/wasm/utils";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { copyToClipboard } from "@/utils/copy";
@@ -70,6 +71,17 @@ export const MarimoTracebackOutput = ({
   // Get last traceback info
   const tracebackInfo = extractAllTracebackInfo(traceback)?.at(0);
 
+  // Don't show in wasm or static notebooks
+  const showDebugger =
+    tracebackInfo &&
+    tracebackInfo.kind === "cell" &&
+    !isWasm() &&
+    !isStaticNotebook();
+
+  const showAIFix = onRefactorWithAI && aiEnabled && !isStaticNotebook();
+
+  const showSearch = !isStaticNotebook();
+
   const handleRefactorWithAI = (triggerImmediately: boolean) => {
     onRefactorWithAI?.({
       prompt: `My code gives the following error:\n\n${lastTracebackLine}`,
@@ -104,14 +116,14 @@ export const MarimoTracebackOutput = ({
         </AccordionItem>
       </Accordion>
       <div className="flex gap-2">
-        {onRefactorWithAI && aiEnabled && (
+        {showAIFix && (
           <AIFixButton
             tooltip="Fix with AI"
             openPrompt={() => handleRefactorWithAI(false)}
             applyAutofix={() => handleRefactorWithAI(true)}
           />
         )}
-        {tracebackInfo && tracebackInfo.kind === "cell" && !isWasm() && (
+        {showDebugger && (
           <Tooltip content={"Attach pdb to the exception point."}>
             <Button
               size="xs"
@@ -125,50 +137,52 @@ export const MarimoTracebackOutput = ({
             </Button>
           </Tooltip>
         )}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild={true}>
-            <Button size="xs" variant="text">
-              Get help
-              <ChevronDown className="h-3 w-3 ml-1" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-56">
-            <DropdownMenuItem asChild={true}>
-              <a
-                target="_blank"
-                href={`https://www.google.com/search?q=${encodeURIComponent(lastTracebackLine)}`}
-                rel="noreferrer"
-              >
-                <SearchIcon className="h-4 w-4 mr-2" />
-                Search on Google
-                <ExternalLinkIcon className="h-3 w-3 ml-auto" />
-              </a>
-            </DropdownMenuItem>
-            <DropdownMenuItem asChild={true}>
-              <a
-                target="_blank"
-                href="https://marimo.io/discord?ref=notebook"
-                rel="noopener"
+        {showSearch && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild={true}>
+              <Button size="xs" variant="text">
+                Get help
+                <ChevronDown className="h-3 w-3 ml-1" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+              <DropdownMenuItem asChild={true}>
+                <a
+                  target="_blank"
+                  href={`https://www.google.com/search?q=${encodeURIComponent(lastTracebackLine)}`}
+                  rel="noreferrer"
+                >
+                  <SearchIcon className="h-4 w-4 mr-2" />
+                  Search on Google
+                  <ExternalLinkIcon className="h-3 w-3 ml-auto" />
+                </a>
+              </DropdownMenuItem>
+              <DropdownMenuItem asChild={true}>
+                <a
+                  target="_blank"
+                  href="https://marimo.io/discord?ref=notebook"
+                  rel="noopener"
+                >
+                  <MessageCircleIcon className="h-4 w-4 mr-2" />
+                  Ask in Discord
+                  <ExternalLinkIcon className="h-3 w-3 ml-auto" />
+                </a>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => {
+                  // Strip HTML from the traceback
+                  const div = document.createElement("div");
+                  div.innerHTML = traceback;
+                  const textContent = div.textContent || "";
+                  copyToClipboard(textContent);
+                }}
               >
-                <MessageCircleIcon className="h-4 w-4 mr-2" />
-                Ask in Discord
-                <ExternalLinkIcon className="h-3 w-3 ml-auto" />
-              </a>
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() => {
-                // Strip HTML from the traceback
-                const div = document.createElement("div");
-                div.innerHTML = traceback;
-                const textContent = div.textContent || "";
-                copyToClipboard(textContent);
-              }}
-            >
-              <CopyIcon className="h-4 w-4 mr-2" />
-              Copy to clipboard
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+                <CopyIcon className="h-4 w-4 mr-2" />
+                Copy to clipboard
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
       </div>
     </div>
   );

package/src/components/editor/output/__tests__/HtmlOutput.test.tsx

@@ -0,0 +1,134 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { render } from "@testing-library/react";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { HtmlOutput } from "../HtmlOutput";
+
+// Mock only the useSanitizeHtml hook, use real sanitizeHtml
+vi.mock("@/plugins/core/sanitize", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@/plugins/core/sanitize")>();
+  return {
+    ...actual,
+    useSanitizeHtml: vi.fn(() => false),
+  };
+});
+
+describe("HtmlOutput", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("renders HTML content", () => {
+    const result = render(
+      <HtmlOutput html="<p>Hello World</p>" alwaysSanitizeHtml={false} />,
+    );
+    expect(result.container.firstChild).toMatchInlineSnapshot(`
+      <div
+        class="block"
+      >
+        <p>
+          Hello World
+        </p>
+      </div>
+    `);
+  });
+
+  test("renders inline when inline prop is true", () => {
+    const result = render(
+      <HtmlOutput
+        html="<span>Inline</span>"
+        inline={true}
+        alwaysSanitizeHtml={false}
+      />,
+    );
+    expect(result.container.firstChild).toMatchInlineSnapshot(`
+      <div
+        class="inline-flex"
+      >
+        <span>
+          Inline
+        </span>
+      </div>
+    `);
+  });
+
+  test("renders block by default", () => {
+    const result = render(
+      <HtmlOutput html="<p>Block</p>" alwaysSanitizeHtml={false} />,
+    );
+    expect(result.container.firstChild).toMatchInlineSnapshot(`
+      <div
+        class="block"
+      >
+        <p>
+          Block
+        </p>
+      </div>
+    `);
+  });
+
+  test("applies custom className", () => {
+    const result = render(
+      <HtmlOutput
+        html="<p>Test</p>"
+        className="custom-class"
+        alwaysSanitizeHtml={false}
+      />,
+    );
+    expect(result.container.firstChild).toMatchInlineSnapshot(`
+      <div
+        class="custom-class block"
+      >
+        <p>
+          Test
+        </p>
+      </div>
+    `);
+  });
+
+  test("handles empty html", () => {
+    const { container } = render(
+      <HtmlOutput html="" alwaysSanitizeHtml={false} />,
+    );
+    expect(container.textContent).toBe("");
+  });
+
+  test("alwaysSanitizeHtml=true sanitizes content", () => {
+    const result = render(
+      <HtmlOutput
+        html="<p>Content</p><script>alert('test')</script>"
+        alwaysSanitizeHtml={true}
+      />,
+    );
+    expect(result.container.firstChild).toMatchInlineSnapshot(`
+      <div
+        class="block"
+      >
+        <p>
+          Content
+        </p>
+      </div>
+    `);
+  });
+
+  test("alwaysSanitizeHtml=false allows scripts when useSanitizeHtml=false", () => {
+    const result = render(
+      <HtmlOutput
+        html="<p>Content</p><script>alert('test')</script>"
+        alwaysSanitizeHtml={false}
+      />,
+    );
+    expect(result.container.firstChild).toMatchInlineSnapshot(`
+      <div
+        class="block"
+      >
+        <p>
+          Content
+        </p>
+        <script>
+          alert('test')
+        </script>
+      </div>
+    `);
+  });
+});

package/src/components/editor/output/__tests__/traceback.test.tsx

@@ -1,10 +1,12 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { render } from "@testing-library/react";
-import { beforeEach, describe, expect, test, vi } from "vitest";
+import { beforeAll, beforeEach, describe, expect, test, vi } from "vitest";
 import { Tracebacks } from "@/__mocks__/tracebacks";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
+import { initialModeAtom } from "@/core/mode";
+import { store } from "@/core/state/jotai";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import {
   MarimoTracebackOutput,
@@ -17,6 +19,7 @@ const cellId = "1" as CellId;
 describe("traceback component", () => {
   beforeEach(() => {
     vi.resetAllMocks();
+    store.set(initialModeAtom, "edit");
   });
 
   test("extracts cell-link", () => {
@@ -58,6 +61,10 @@ describe("traceback component", () => {
 });
 
 describe("traceback replacement", () => {
+  beforeAll(() => {
+    store.set(initialModeAtom, "edit");
+  });
+
   test("replaces File with Cell", () => {
     const traceback = renderHTML({
       html: Tracebacks.assertion,

package/src/components/editor/output/useWrapText.ts

@@ -2,11 +2,16 @@
 
 import { useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
+import { jotaiJsonStorage } from "@/utils/storage/jotai";
 
 const WRAP_TEXT_KEY = "marimo:console:wrapText";
 
 // Atom for storing wrap text preference - shared across all console outputs
-const wrapTextAtom = atomWithStorage<boolean>(WRAP_TEXT_KEY, false);
+const wrapTextAtom = atomWithStorage<boolean>(
+  WRAP_TEXT_KEY,
+  false,
+  jotaiJsonStorage,
+);
 
 export function useWrapText() {
   const [wrapText, setWrapText] = useAtom(wrapTextAtom);

package/src/components/editor/package-alert.tsx

@@ -118,44 +118,46 @@ export const PackageAlert: React.FC = () => {
             <div>
               <p>The following packages were not found:</p>
               <table className="list-disc ml-2 mt-1">
-                {packageAlert.packages.map((pkg, index) => {
-                  const parsed = parsePackageSpecifier(pkg);
-                  const currentExtras = selectedExtras[pkg] || parsed.extras;
-
-                  return (
-                    <tr className="font-mono text-sm" key={index}>
-                      <td className="pr-2 py-1 align-middle">
-                        <BoxIcon size="1rem" />
-                      </td>
-                      <td className="pr-2 py-1 align-middle">
-                        <ExtrasSelector
-                          packageName={parsed.name}
-                          selectedExtras={currentExtras}
-                          onExtrasChange={(extras) =>
-                            setSelectedExtras((prev) => ({
-                              ...prev,
-                              [pkg]: extras,
-                            }))
-                          }
-                        />
-                      </td>
-                      {doesSupportVersioning && (
+                <tbody>
+                  {packageAlert.packages.map((pkg, index) => {
+                    const parsed = parsePackageSpecifier(pkg);
+                    const currentExtras = selectedExtras[pkg] || parsed.extras;
+
+                    return (
+                      <tr className="font-mono text-sm" key={index}>
+                        <td className="pr-2 py-1 align-middle">
+                          <BoxIcon size="1rem" />
+                        </td>
                         <td className="pr-2 py-1 align-middle">
-                          <PackageVersionSelect
-                            value={desiredPackageVersions[pkg] ?? "latest"}
-                            onChange={(value) =>
-                              setDesiredPackageVersions((prev) => ({
+                          <ExtrasSelector
+                            packageName={parsed.name}
+                            selectedExtras={currentExtras}
+                            onExtrasChange={(extras) =>
+                              setSelectedExtras((prev) => ({
                                 ...prev,
-                                [pkg]: value,
+                                [pkg]: extras,
                               }))
                             }
-                            packageName={parsed.name}
                           />
                         </td>
-                      )}
-                    </tr>
-                  );
-                })}
+                        {doesSupportVersioning && (
+                          <td className="pr-2 py-1 align-middle">
+                            <PackageVersionSelect
+                              value={desiredPackageVersions[pkg] ?? "latest"}
+                              onChange={(value) =>
+                                setDesiredPackageVersions((prev) => ({
+                                  ...prev,
+                                  [pkg]: value,
+                                }))
+                              }
+                              packageName={parsed.name}
+                            />
+                          </td>
+                        )}
+                      </tr>
+                    );
+                  })}
+                </tbody>
               </table>
             </div>
             <div className="ml-auto flex flex-row items-baseline">