@marimo-team/frontend 0.23.15-dev7 → 0.23.15-dev71

package/src/components/editor/ai/ai-completion-editor.tsx

@@ -194,9 +194,12 @@ export const AiCompletionEditor: React.FC<Props> = ({
     setCompletion("");
   };
 
+  // Reject discards the suggestion but keeps the prompt open for refinement.
   const handleDeclineCompletion = () => {
-    declineChange();
+    stop();
     setCompletion("");
+    setShowInputPrompt(true);
+    inputRef.current?.view?.focus();
   };
 
   const showCompletionBanner =

package/src/components/editor/cell/cell-context-menu.tsx

@@ -39,12 +39,18 @@ interface Props extends Pick<
   "cellId" | "getEditorView"
 > {
   children: React.ReactNode;
+  /**
+   * If true, the custom context menu is disabled and the native one is used
+   * (e.g. while presenting).
+   */
+  disabled?: boolean;
 }
 
 export const CellActionsContextMenu = ({
   children,
   cellId,
   getEditorView,
+  disabled,
 }: Props) => {
   const cellData = useCellData(cellId);
   const cellRuntime = useCellRuntime(cellId);
@@ -187,6 +193,7 @@ export const CellActionsContextMenu = ({
   return (
     <ContextMenu>
       <ContextMenuTrigger
+        disabled={disabled}
         onContextMenu={(evt) => {
           if (evt.target instanceof HTMLImageElement) {
             setImageRightClicked(evt.target);

package/src/components/editor/chrome/components/__tests__/feedback-button.test.tsx

@@ -0,0 +1,221 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { Provider } from "jotai";
+import type React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { Dialog } from "@/components/ui/dialog";
+import { Constants } from "@/core/constants";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { viewStateAtom } from "@/core/mode";
+import { connectionAtom } from "@/core/network/connection";
+import { requestClientAtom } from "@/core/network/requests";
+import type { EnvironmentInfo } from "@/core/network/types";
+import { filenameAtom } from "@/core/saving/file-state";
+import { store } from "@/core/state/jotai";
+import { WebSocketState } from "@/core/websocket/types";
+import * as copyModule from "@/utils/copy";
+import { FeedbackModal } from "../feedback-button";
+
+vi.mock("@/utils/copy", () => ({
+  copyToClipboard: vi.fn().mockResolvedValue(undefined),
+}));
+
+const environment: EnvironmentInfo = {
+  marimo: "1.2.3",
+  editable: false,
+  location: "~/.venv/site-packages/marimo",
+  OS: "Darwin",
+  "OS Version": "25.0",
+  Processor: "arm",
+  "Python Version": "3.12.9",
+  Locale: "en_US",
+  Binaries: { Browser: "chrome 140", Node: "v22", uv: "0.11" },
+  Dependencies: { click: "8.4.2" },
+  "Optional Dependencies": { pandas: "3.0.0" },
+  "Experimental Flags": {},
+};
+
+function wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Provider store={store}>
+      <TooltipProvider>
+        <Dialog open={true}>{children}</Dialog>
+      </TooltipProvider>
+    </Provider>
+  );
+}
+
+describe("FeedbackModal issue reporting", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    store.set(requestClientAtom, MockRequestClient.create());
+    store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
+    store.set(connectionAtom, { state: WebSocketState.OPEN });
+    store.set(filenameAtom, "/project/example.py");
+  });
+
+  it("loads and previews issue environment details", async () => {
+    store.set(
+      requestClientAtom,
+      MockRequestClient.create({
+        getEnvironmentInfo: vi.fn().mockResolvedValue(environment),
+      }),
+    );
+    render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
+
+    expect(screen.getByText("Loading environment details…")).toBeVisible();
+    await screen.findByText("Environment details");
+    expect(screen.getByText(/"marimo": "1.2.3"/)).toBeInTheDocument();
+  });
+
+  it("toggles the environment preview between show more and show less", async () => {
+    store.set(
+      requestClientAtom,
+      MockRequestClient.create({
+        getEnvironmentInfo: vi.fn().mockResolvedValue(environment),
+      }),
+    );
+    render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
+    await screen.findByText("Environment details");
+
+    const toggle = screen.getByRole("button", { name: "Show more" });
+    fireEvent.click(toggle);
+    expect(
+      screen.getByRole("button", { name: "Show less" }),
+    ).toBeInTheDocument();
+  });
+
+  it("copies partial details when the environment request fails", async () => {
+    store.set(
+      requestClientAtom,
+      MockRequestClient.create({
+        getEnvironmentInfo: vi.fn().mockRejectedValue(new Error("offline")),
+      }),
+    );
+    render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
+
+    await screen.findByText("Server environment information unavailable");
+    fireEvent.click(screen.getByRole("button", { name: "Copy issue details" }));
+    await waitFor(() =>
+      expect(copyModule.copyToClipboard).toHaveBeenCalledWith(
+        expect.stringContaining("Environment Collection Error"),
+      ),
+    );
+  });
+
+  it("copies raw environment JSON", async () => {
+    store.set(
+      requestClientAtom,
+      MockRequestClient.create({
+        getEnvironmentInfo: vi.fn().mockResolvedValue(environment),
+      }),
+    );
+    render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
+    await screen.findByText("Environment details");
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Copy environment JSON" }),
+    );
+    await waitFor(() =>
+      expect(copyModule.copyToClipboard).toHaveBeenCalledWith(
+        expect.stringContaining('"marimo": "1.2.3"'),
+      ),
+    );
+  });
+
+  it("includes notebook source only after explicit opt-in", async () => {
+    const readCode = vi.fn().mockResolvedValue({
+      contents: "secret = 'review before posting'",
+    });
+    store.set(
+      requestClientAtom,
+      MockRequestClient.create({
+        getEnvironmentInfo: vi.fn().mockResolvedValue(environment),
+        readCode,
+      }),
+    );
+    render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
+    await screen.findByText("Environment details");
+
+    expect(readCode).not.toHaveBeenCalled();
+    fireEvent.click(
+      screen.getByRole("checkbox", { name: "Include full notebook source" }),
+    );
+    await waitFor(() => expect(readCode).toHaveBeenCalledOnce());
+
+    fireEvent.click(screen.getByRole("button", { name: "Copy issue details" }));
+    await waitFor(() =>
+      expect(copyModule.copyToClipboard).toHaveBeenCalledWith(
+        expect.stringContaining("Notebook source: example.py"),
+      ),
+    );
+  });
+
+  it("discards notebook source after unchecking", async () => {
+    const readCode = vi.fn().mockResolvedValue({ contents: "x = 1" });
+    store.set(
+      requestClientAtom,
+      MockRequestClient.create({
+        getEnvironmentInfo: vi.fn().mockResolvedValue(environment),
+        readCode,
+      }),
+    );
+    render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
+    await screen.findByText("Environment details");
+
+    const checkbox = screen.getByRole("checkbox", {
+      name: "Include full notebook source",
+    });
+    fireEvent.click(checkbox);
+    await waitFor(() => expect(readCode).toHaveBeenCalledOnce());
+    fireEvent.click(checkbox);
+
+    fireEvent.click(screen.getByRole("button", { name: "Copy issue details" }));
+    await waitFor(() =>
+      expect(copyModule.copyToClipboard).toHaveBeenCalledWith(
+        expect.not.stringContaining("Notebook source"),
+      ),
+    );
+  });
+
+  it("disables the notebook option and explains why when disconnected", async () => {
+    store.set(connectionAtom, { state: WebSocketState.CONNECTING });
+    store.set(
+      requestClientAtom,
+      MockRequestClient.create({
+        getEnvironmentInfo: vi.fn().mockResolvedValue(environment),
+      }),
+    );
+    render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
+    await screen.findByText("Environment details");
+
+    expect(
+      screen.getByRole("checkbox", { name: "Include full notebook source" }),
+    ).toBeDisabled();
+    expect(
+      screen.getByText("Connect the notebook to include its source."),
+    ).toBeInTheDocument();
+  });
+
+  it("prefills the GitHub issue link with the environment once loaded", async () => {
+    store.set(
+      requestClientAtom,
+      MockRequestClient.create({
+        getEnvironmentInfo: vi.fn().mockResolvedValue(environment),
+      }),
+    );
+    render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
+
+    const link = screen.getByRole("link", { name: "Open GitHub issue" });
+    expect(link).toHaveAttribute("href", Constants.bugReportUrl);
+
+    await screen.findByText("Environment details");
+    await waitFor(() => {
+      const href = link.getAttribute("href") ?? "";
+      expect(href).toContain("&env=");
+      expect(href).toContain(encodeURIComponent('"marimo": "1.2.3"'));
+    });
+  });
+});

package/src/components/editor/chrome/components/feedback-button.tsx

@@ -4,16 +4,75 @@ import { Slot as SlotPrimitive } from "radix-ui";
 
 const Slot = SlotPrimitive.Slot;
 
-import React, { type PropsWithChildren } from "react";
+import { useAtomValue } from "jotai";
+import { CheckIcon, ExternalLinkIcon, TriangleAlertIcon } from "lucide-react";
+import React, { type PropsWithChildren, useMemo, useState } from "react";
+import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { Skeleton } from "@/components/ui/skeleton";
 import { toast } from "@/components/ui/use-toast";
+import { notebookAtom } from "@/core/cells/cells";
 import { Constants } from "@/core/constants";
+import {
+  buildBugReportUrl,
+  buildIssueDetails,
+  createPartialEnvironment,
+  type EnvironmentDiagnostics,
+  enrichEnvironment,
+  type NotebookSource,
+} from "@/core/diagnostics/issue-details";
+import {
+  formatCellError,
+  getCellErrorEntries,
+} from "@/core/errors/error-entries";
+import { useNotebookCodeAvailable } from "@/core/meta/code-visibility";
+import { getMarimoVersion } from "@/core/meta/globals";
+import { connectionAtom } from "@/core/network/connection";
+import { useRequestClient } from "@/core/network/requests";
+import { filenameAtom } from "@/core/saving/file-state";
+import { store } from "@/core/state/jotai";
+import { WebSocketState } from "@/core/websocket/types";
+import { useAsyncData } from "@/hooks/useAsyncData";
+import { cn } from "@/utils/cn";
+import { copyToClipboard } from "@/utils/copy";
+
+const CollapsiblePreview: React.FC<{ content: string }> = ({ content }) => {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="relative">
+        <pre
+          className={cn(
+            "text-xs bg-muted rounded p-2 overflow-x-auto whitespace-pre-wrap",
+            !expanded && "max-h-24 overflow-hidden",
+          )}
+        >
+          {content}
+        </pre>
+        {!expanded && (
+          <div className="pointer-events-none absolute inset-x-0 bottom-0 h-10 rounded-b bg-gradient-to-b from-transparent to-muted" />
+        )}
+      </div>
+      <Button
+        type="button"
+        variant="link"
+        size="xs"
+        className="self-start"
+        onClick={() => setExpanded((value) => !value)}
+      >
+        {expanded ? "Show less" : "Show more"}
+      </Button>
+    </div>
+  );
+};
 
 export const FeedbackButton: React.FC<PropsWithChildren> = ({ children }) => {
   const { openModal, closeModal } = useImperativeModal();
@@ -25,84 +84,256 @@ export const FeedbackButton: React.FC<PropsWithChildren> = ({ children }) => {
   );
 };
 
-const FeedbackModal: React.FC<{
+export const FeedbackModal: React.FC<{
   onClose: () => void;
-}> = ({ onClose }) => {
+}> = () => {
+  const { getEnvironmentInfo, readCode } = useRequestClient();
+  const environmentRequest = useAsyncData(
+    async () => getEnvironmentInfo(),
+    [getEnvironmentInfo],
+  );
+
+  const notebook = useAtomValue(notebookAtom);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: recompute when the notebook changes
+  const errors = useMemo(() => getCellErrorEntries(store), [notebook]);
+
+  const cells = notebook.cellIds.inOrderIds.map(
+    (cellId) => notebook.cellData[cellId],
+  );
+  const codeAvailable = useNotebookCodeAvailable(cells);
+  const filename = useAtomValue(filenameAtom);
+  const connection = useAtomValue(connectionAtom);
+  const notebookSourceAvailable =
+    filename !== null &&
+    codeAvailable &&
+    connection.state === WebSocketState.OPEN;
+
+  const [includeNotebook, setIncludeNotebook] = useState(false);
+
+  const notebookSourceReason = notebookSourceAvailable
+    ? undefined
+    : filename === null
+      ? "Save the notebook first."
+      : !codeAvailable
+        ? "Notebook source is hidden in this view."
+        : "Connect the notebook to include its source.";
+
+  const notebookSourceRequest = useAsyncData(async () => {
+    if (!includeNotebook || !notebookSourceAvailable || filename === null) {
+      return undefined;
+    }
+    const { contents } = await readCode();
+    return { filename, contents } satisfies NotebookSource;
+  }, [includeNotebook, notebookSourceAvailable, filename, readCode]);
+
+  const environment: EnvironmentDiagnostics | undefined =
+    environmentRequest.data
+      ? enrichEnvironment(environmentRequest.data, navigator.userAgent)
+      : environmentRequest.status === "error"
+        ? createPartialEnvironment(
+            getMarimoVersion(),
+            navigator.userAgent,
+            navigator.language,
+            "Server environment information unavailable",
+          )
+        : undefined;
+
+  const [issueDetailsCopied, setIssueDetailsCopied] = useState(false);
+
+  const githubIssueUrl = useMemo(() => {
+    if (!environment) {
+      return Constants.bugReportUrl;
+    }
+    return buildBugReportUrl(
+      Constants.bugReportUrl,
+      buildIssueDetails({ environment, errors }),
+    );
+  }, [environment, errors]);
+
+  const copyIssueDetails = async () => {
+    if (!environment) {
+      return;
+    }
+    const notebookForReport = includeNotebook
+      ? notebookSourceRequest.data
+      : undefined;
+    await copyToClipboard(
+      buildIssueDetails({ environment, errors, notebook: notebookForReport }),
+    );
+    setIssueDetailsCopied(true);
+    setTimeout(() => setIssueDetailsCopied(false), 2000);
+    toast({
+      title:
+        environmentRequest.status === "error"
+          ? "Partial issue details copied"
+          : "Issue details copied",
+    });
+  };
+
   return (
-    <DialogContent className="w-fit">
-      <form
-        onSubmit={async (e) => {
-          e.preventDefault();
-
-          const formData = new FormData(e.target as HTMLFormElement);
-          const rating = formData.get("rating");
-          const message = formData.get("message");
-
-          // Fire-and-forget we don't care about the response
-          void fetch("https://marimo.io/api/feedback", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              rating: rating,
-              message,
-            }),
-          });
-          onClose();
-          toast({
-            title: "Feedback sent!",
-            description: "Thank you for your feedback!",
-          });
-        }}
-      >
-        <DialogHeader>
-          <DialogTitle>Send Feedback</DialogTitle>
-          <DialogDescription>
-            <p className="my-2 prose dark:prose-invert">
-              We want to hear from you — from minor bug reports to wishlist
-              features and everything in between. Here are some ways you can get
-              in touch:
-            </p>
-            <ul className="list-disc ml-8 my-2 prose dark:prose-invert">
-              <li className="my-0">
-                Take our{" "}
-                <a
-                  href={Constants.feedbackForm}
-                  target="_blank"
-                  className="underline"
-                >
-                  two-minute survey.
-                </a>
-              </li>
-              <li className="my-0">
-                File a{" "}
-                <a
-                  href={Constants.issuesPage}
-                  target="_blank"
-                  className="underline"
-                >
-                  GitHub issue.
-                </a>
-              </li>
-              <li className="my-0">
-                Chat with us on{" "}
-                <a
-                  href={Constants.discordLink}
-                  target="_blank"
-                  className="underline"
-                >
-                  Discord.
-                </a>
-              </li>
-            </ul>
-            <p className="my-2 prose dark:prose-invert">
-              We're excited you're here as we build the future of Python data
-              tooling. Thanks for being part of our community!
-            </p>
-          </DialogDescription>
-        </DialogHeader>
-      </form>
+    <DialogContent className="w-[540px] max-w-[90vw]">
+      <DialogHeader>
+        <DialogTitle>Report an issue</DialogTitle>
+        <DialogDescription>
+          Copy your environment and any current errors to include in a GitHub
+          bug report. Nothing is uploaded automatically; review the details
+          before posting.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="flex flex-col gap-4 max-h-[60vh] overflow-y-auto">
+        <div className="flex flex-wrap gap-2">
+          <Button
+            type="button"
+            variant="default"
+            size="xs"
+            disabled={
+              !environment ||
+              (includeNotebook && notebookSourceRequest.isFetching)
+            }
+            onClick={copyIssueDetails}
+          >
+            {issueDetailsCopied && (
+              <CheckIcon
+                className="w-4 h-4 mr-2 text-(--grass-11)"
+                color="white"
+              />
+            )}
+            {issueDetailsCopied ? "Copied!" : "Copy issue details"}
+          </Button>
+          <Button type="button" variant="outline" size="xs" asChild={true}>
+            <a href={githubIssueUrl} target="_blank" rel="noreferrer">
+              <ExternalLinkIcon className="w-4 h-4 mr-2" />
+              Open GitHub issue
+            </a>
+          </Button>
+        </div>
+
+        {includeNotebook && (
+          <p className="text-xs text-muted-foreground">
+            The GitHub link prefills your environment only. Use Copy issue
+            details to include the full notebook source.
+          </p>
+        )}
+
+        {environmentRequest.status === "pending" && (
+          <div className="flex flex-col gap-2">
+            <span className="text-sm text-muted-foreground">
+              Loading environment details…
+            </span>
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-3/4" />
+            <Skeleton className="h-4 w-1/2" />
+          </div>
+        )}
+
+        {environmentRequest.status === "error" && (
+          <div className="flex items-center gap-2 text-sm">
+            <TriangleAlertIcon className="w-4 h-4 text-(--yellow-11) shrink-0" />
+            <span>Server environment information unavailable</span>
+            <Button
+              type="button"
+              variant="link"
+              size="xs"
+              onClick={() => environmentRequest.refetch()}
+            >
+              Retry
+            </Button>
+          </div>
+        )}
+
+        {environment && (
+          <div className="flex flex-col gap-1">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Environment details</span>
+              <CopyClipboardIcon
+                className="w-3.5 h-3.5"
+                value={JSON.stringify(environment, null, 2)}
+                ariaLabel="Copy environment JSON"
+                toastTitle="Environment details copied"
+              />
+            </div>
+            <CollapsiblePreview
+              content={JSON.stringify(environment, null, 2)}
+            />
+          </div>
+        )}
+
+        {environment && errors.length > 0 && (
+          <div className="flex flex-col gap-1">
+            <span className="text-sm font-medium">Current errors</span>
+            <CollapsiblePreview
+              content={errors.map(formatCellError).join("\n\n---\n\n")}
+            />
+          </div>
+        )}
+
+        {environment && errors.length === 0 && (
+          <span className="text-sm text-muted-foreground">
+            No current errors detected.
+          </span>
+        )}
+
+        <div className="flex flex-col gap-1">
+          <div className="flex items-start gap-2 text-sm">
+            <Checkbox
+              id="issue-include-notebook"
+              className="mt-0.5"
+              checked={includeNotebook}
+              disabled={!notebookSourceAvailable}
+              onCheckedChange={(checked) =>
+                setIncludeNotebook(checked === true)
+              }
+              aria-label="Include full notebook source"
+            />
+            <label htmlFor="issue-include-notebook">
+              Include full notebook source
+            </label>
+          </div>
+          <p className="text-xs text-muted-foreground ml-6">
+            Copies the entire saved Python source, including comments, literal
+            data, embedded credentials, and package metadata. Outputs and
+            external files are not included. Review it before posting.{" "}
+            <span className="font-bold">
+              For private notebooks, paste a minimal reproduction instead.
+            </span>
+          </p>
+          {notebookSourceReason && (
+            <span className="text-xs text-muted-foreground ml-6">
+              {notebookSourceReason}
+            </span>
+          )}
+          {includeNotebook && notebookSourceRequest.status === "error" && (
+            <span className="text-xs text-(--red-11) ml-6">
+              Notebook source could not be loaded.
+            </span>
+          )}
+        </div>
+
+        <div className="border-t pt-3">
+          <p className="text-sm text-muted-foreground">
+            Other feedback? Take our{" "}
+            <a
+              href={Constants.feedbackForm}
+              target="_blank"
+              rel="noreferrer"
+              className="underline"
+            >
+              two-minute survey
+            </a>{" "}
+            or chat with us on{" "}
+            <a
+              href={Constants.discordLink}
+              target="_blank"
+              rel="noreferrer"
+              className="underline"
+            >
+              Discord
+            </a>
+            .
+          </p>
+        </div>
+      </div>
     </DialogContent>
   );
 };