@marimo-team/islands 0.23.15-dev49 → 0.23.15-dev50

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>
   );
 };

package/src/core/ai/context/providers/error.ts

@@ -1,13 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { Completion } from "@codemirror/autocomplete";
-import { notebookAtom } from "@/core/cells/cells";
-import type { CellId } from "@/core/cells/ids";
-import { displayCellName } from "@/core/cells/names";
-import type { MarimoError, OutputMessage } from "@/core/kernel/messages";
-import { isErrorMime, isMarimoErrorsMime, isTracebackMime } from "@/core/mime";
+import {
+  type CellErrorEntry,
+  describeError,
+  formatSingleError,
+  getCellErrorEntries,
+} from "@/core/errors/error-entries";
 import type { JotaiStore } from "@/core/state/jotai";
-import { logNever } from "@/utils/assertNever";
 import { parseHtmlContent } from "@/utils/dom";
 import { PluralWord } from "@/utils/pluralize";
 import { type AIContextItem, AIContextProvider } from "../registry";
@@ -15,14 +15,6 @@ import { contextToXml } from "../utils";
 import { Sections } from "./common";
 import { formatDatasourceContextForCell } from "./datasource";
 
-export interface CellErrorEntry {
-  cellId: CellId;
-  cellName: string;
-  cellCode: string;
-  errorData: MarimoError[];
-  tracebackHtml?: string;
-}
-
 export type ErrorContextItemData =
   | {
       type: "all-errors";
@@ -38,150 +30,6 @@ export interface ErrorContextItem extends AIContextItem {
   data: ErrorContextItemData;
 }
 
-function parseCellErrorOutput(
-  output: OutputMessage,
-): Pick<CellErrorEntry, "errorData" | "tracebackHtml"> | null {
-  if (isMarimoErrorsMime(output.mimetype)) {
-    if (!Array.isArray(output.data)) {
-      return null;
-    }
-    const errorData = output.data.filter(
-      (error) => !error.type.includes("ancestor"),
-    );
-    if (errorData.length === 0) {
-      return null;
-    }
-    return { errorData };
-  }
-
-  if (isTracebackMime(output.mimetype)) {
-    if (typeof output.data !== "string" || output.data.length === 0) {
-      return null;
-    }
-    return { errorData: [], tracebackHtml: output.data };
-  }
-
-  return null;
-}
-
-function errorDataHasTraceback(errorData: MarimoError[]): boolean {
-  return errorData.some((error) => "traceback" in error && error.traceback);
-}
-
-function getTracebackFromConsole(
-  consoleOutputs: OutputMessage[] | undefined,
-): string | undefined {
-  const tracebackOutput = consoleOutputs?.find((output) =>
-    isTracebackMime(output.mimetype),
-  );
-  if (
-    !tracebackOutput ||
-    typeof tracebackOutput.data !== "string" ||
-    tracebackOutput.data.length === 0
-  ) {
-    return undefined;
-  }
-  return tracebackOutput.data;
-}
-
-function resolveTracebackHtml(
-  parsed: Pick<CellErrorEntry, "errorData" | "tracebackHtml">,
-  consoleOutputs: OutputMessage[] | undefined,
-): string | undefined {
-  if (parsed.tracebackHtml) {
-    return parsed.tracebackHtml;
-  }
-  if (errorDataHasTraceback(parsed.errorData)) {
-    return undefined;
-  }
-  return getTracebackFromConsole(consoleOutputs);
-}
-
-export function getCellErrorEntries(store: JotaiStore): CellErrorEntry[] {
-  const { cellIds, cellRuntime, cellData } = store.get(notebookAtom);
-  const entries: CellErrorEntry[] = [];
-
-  for (const [cellIndex, cellId] of cellIds.inOrderIds.entries()) {
-    const cell = cellRuntime[cellId];
-    const output = cell.output;
-    if (!output || !isErrorMime(output.mimetype)) {
-      continue;
-    }
-
-    const parsed = parseCellErrorOutput(output);
-    if (!parsed) {
-      continue;
-    }
-
-    const cellName = displayCellName(cellData[cellId].name, cellIndex);
-    // Prefer the code from the last execution: runtime errors correspond to
-    // the previous run, while `code` may already contain unsaved edits.
-    const cellCode = cellData[cellId].lastCodeRun ?? cellData[cellId].code;
-
-    entries.push({
-      cellId,
-      cellName,
-      cellCode,
-      errorData: parsed.errorData,
-      tracebackHtml: resolveTracebackHtml(parsed, cell.consoleOutputs),
-    });
-  }
-
-  return entries;
-}
-
-function describeError(error: MarimoError): string {
-  if (error.type === "setup-refs") {
-    return "The setup cell cannot have references";
-  }
-  if (error.type === "cycle") {
-    return "This cell is in a cycle";
-  }
-  if (error.type === "multiple-defs") {
-    return `The variable '${error.name}' was defined by another cell`;
-  }
-  if (error.type === "import-star") {
-    return error.msg;
-  }
-  if (error.type === "ancestor-stopped") {
-    return error.msg;
-  }
-  if (error.type === "ancestor-prevented") {
-    return error.msg;
-  }
-  if (error.type === "exception") {
-    return error.msg;
-  }
-  if (error.type === "strict-exception") {
-    return error.msg;
-  }
-  if (error.type === "interruption") {
-    return "This cell was interrupted and needs to be re-run";
-  }
-  if (error.type === "syntax") {
-    return error.msg;
-  }
-  if (error.type === "unknown") {
-    return error.msg;
-  }
-  if (error.type === "sql-error") {
-    return error.msg;
-  }
-  if (error.type === "internal") {
-    return error.msg || "An internal error occurred";
-  }
-  logNever(error);
-  return "Unknown error";
-}
-
-function formatSingleError(error: MarimoError): string {
-  let text = describeError(error);
-  if ("traceback" in error && error.traceback) {
-    text += `\n\nTraceback:\n${parseHtmlContent(error.traceback)}`;
-  }
-  return text;
-}
-
 function formatCellErrorDetails(
   entry: CellErrorEntry,
   store: JotaiStore,

package/src/core/constants.ts

@@ -3,6 +3,8 @@ export const Constants = {
   githubPage: "https://github.com/marimo-team/marimo",
   releasesPage: "https://github.com/marimo-team/marimo/releases",
   issuesPage: "https://github.com/marimo-team/marimo/issues",
+  bugReportUrl:
+    "https://github.com/marimo-team/marimo/issues/new?template=bug_report.yaml",
   feedbackForm: "https://marimo.io/feedback",
   discordLink: "https://marimo.io/discord?ref=notebook",
   docsPage: "https://docs.marimo.io",