@marimo-team/frontend 0.25.2 → 0.25.3-dev100

package/src/components/editor/file-tree/file-explorer.tsx

@@ -201,11 +201,16 @@ export const FileExplorer: React.FC<{
     () => filterHiddenTree(data, showHiddenFiles),
     [data, showHiddenFiles],
   );
-  React.useEffect(() => {
-    if (selectedFolder && !treeContainsId(visibleData, selectedFolder.id)) {
-      setSelectedFolder(null);
-    }
-  }, [selectedFolder, visibleData]);
+  const selectedFolderId = selectedFolder?.id;
+  const selectedFolderVisible = React.useMemo(
+    () =>
+      selectedFolderId === undefined ||
+      treeContainsId(visibleData, selectedFolderId),
+    [visibleData, selectedFolderId],
+  );
+  if (!selectedFolderVisible) {
+    setSelectedFolder(null);
+  }
   const contextValue = React.useMemo<FileExplorerContextValue>(
     () => ({
       tree,

package/src/components/editor/file-tree/file-viewer.tsx

@@ -9,7 +9,7 @@ import {
   SaveIcon,
 } from "lucide-react";
 import type React from "react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { renderShortcut } from "@/components/shortcuts/renderShortcut";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
@@ -82,7 +82,9 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   // carry no draft to preserve.
   // We use a ref for internalValue so we don't call this effect on each keystroke
   const internalValueRef = useRef<string>(internalValue);
-  internalValueRef.current = internalValue;
+  useLayoutEffect(() => {
+    internalValueRef.current = internalValue;
+  }, [internalValue]);
   useEffect(() => {
     return () => {
       if (

package/src/components/editor/file-tree/use-file-search.ts

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRequestClient } from "@/core/network/requests";
 import { useDebounce } from "@/hooks/useDebounce";
 import {
@@ -34,20 +34,29 @@ export function useFileSearch({
 }): { state: FileSearchState; refetch: () => void } {
   const { sendSearchFiles } = useRequestClient();
   const debouncedQuery = useDebounce(query, 300);
-  const pending = useRef<Promise<void>>(Promise.resolve());
+  // Nullable so the ref is not built on every render
+  const pending = useRef<Promise<void> | null>(null);
   const [revision, setRevision] = useState(0);
   const refetch = useCallback(() => setRevision((value) => value + 1), []);
-  const [result, setResult] = useState<FileSearchState>({ status: "idle" });
+  const requestIdentity = useMemo(
+    () => ({ query, tree, showHiddenFiles, revision, sendSearchFiles }),
+    [query, tree, showHiddenFiles, revision, sendSearchFiles],
+  );
+  const [result, setResult] = useState<{
+    requestIdentity: typeof requestIdentity;
+    state: FileSearchState;
+  }>();
 
   useEffect(() => {
+    // Read inputs through requestIdentity so it alone drives new requests
+    const { query, tree, showHiddenFiles, sendSearchFiles } = requestIdentity;
     let cancelled = false;
     if (!query || query !== debouncedQuery) {
       return;
     }
-    setResult({ status: "loading", query });
     // Let the in-flight server scan finish before starting another. Superseded
     // queued queries and remaining roots are skipped, keeping scan work bounded.
-    const request = pending.current.then(async () => {
+    const request = (pending.current ?? Promise.resolve()).then(async () => {
       const filesByPath = new Map<string, FileTreeNode>();
       let rootLimitReached = false;
       let failedRootCount = 0;
@@ -88,9 +97,12 @@ export function useFileSearch({
       if (!cancelled) {
         if (roots.length > 0 && failedRootCount === roots.length) {
           setResult({
-            status: "error",
-            query,
-            error: new Error("Could not search any root"),
+            requestIdentity,
+            state: {
+              status: "error",
+              query,
+              error: new Error("Could not search any root"),
+            },
           });
           return;
         }
@@ -110,33 +122,35 @@ export function useFileSearch({
             rank(left) - rank(right) || left.name.localeCompare(right.name),
         );
         setResult({
-          status: "success",
-          isPartial: failedRootCount > 0,
-          query,
-          files: sortedFiles.slice(0, RESULT_LIMIT),
-          hasMore: rootLimitReached || sortedFiles.length > RESULT_LIMIT,
+          requestIdentity,
+          state: {
+            status: "success",
+            isPartial: failedRootCount > 0,
+            query,
+            files: sortedFiles.slice(0, RESULT_LIMIT),
+            hasMore: rootLimitReached || sortedFiles.length > RESULT_LIMIT,
+          },
         });
       }
     });
     pending.current = request.catch((error: unknown) => {
       if (!cancelled) {
-        setResult({ status: "error", query, error });
+        setResult({
+          requestIdentity,
+          state: { status: "error", query, error },
+        });
       }
     });
     return () => {
       cancelled = true;
     };
-  }, [query, debouncedQuery, tree, showHiddenFiles, revision, sendSearchFiles]);
+  }, [debouncedQuery, requestIdentity]);
 
   if (!query) {
     return { state: { status: "idle" }, refetch };
   }
-  if (
-    query !== debouncedQuery ||
-    result.status === "idle" ||
-    result.query !== query
-  ) {
+  if (query !== debouncedQuery || result?.requestIdentity !== requestIdentity) {
     return { state: { status: "loading", query }, refetch };
   }
-  return { state: result, refetch };
+  return { state: result.state, refetch };
 }

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

@@ -41,6 +41,7 @@ export const NotebookBanner: React.FC<Props> = ({ width }) => {
               {banner.title}
             </span>
             <Button
+              aria-label={`Dismiss ${banner.title}`}
               data-testid="remove-banner-button"
               variant="text"
               size="icon"

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

@@ -21,8 +21,10 @@ import { Button } from "@/components/ui/button";
 import { Kbd } from "@/components/ui/kbd";
 import { ExternalLink } from "@/components/ui/links";
 import { Tooltip } from "@/components/ui/tooltip";
+import { buildErrorReport } from "@/core/cells/error-report";
 import type { CellId } from "@/core/cells/ids";
 import { resolvedMarimoConfigAtom } from "@/core/config/config";
+import { viewStateAtom } from "@/core/mode";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { splitMangledLocals } from "@/utils/local-variables";
 import type { MarimoError } from "../../../core/kernel/messages";
@@ -32,6 +34,7 @@ import { openPackageManager } from "../chrome/panels/packages-utils";
 import { useChromeActions } from "../chrome/state";
 import { AutoFixButton } from "../errors/auto-fix";
 import { MangledSegments } from "../errors/mangled-local-chip";
+import { SendErrorReportButton } from "../errors/send-error-report-button";
 import { CellLinkError } from "../links/cell-link";
 import { processTextForUrls } from "./console/text-rendering";
 
@@ -93,6 +96,7 @@ const Tip = (props: {
 interface Props {
   cellId: CellId | undefined;
   errors: MarimoError[];
+  code?: string;
   className?: string;
 }
 
@@ -102,6 +106,7 @@ interface Props {
 export const MarimoErrorOutput = ({
   errors,
   cellId,
+  code,
   className,
 }: Props): JSX.Element => {
   const chromeActions = useChromeActions();
@@ -111,6 +116,9 @@ export const MarimoErrorOutput = ({
   // only helpful when outputs are displayed above the editor.
   const showConsoleHint =
     useAtomValue(resolvedMarimoConfigAtom).display.cell_output === "above";
+  // The editor shows tracebacks in the console area, so the inline copy is
+  // for views without a console: published apps and present mode.
+  const showInlineTraceback = useAtomValue(viewStateAtom).mode !== "edit";
 
   let titleContents: string | null =
     "This cell wasn't run because it has errors";
@@ -208,7 +216,6 @@ export const MarimoErrorOutput = ({
     (e): e is Extract<MarimoError, { type: "sql-error" }> =>
       e.type === "sql-error",
   );
-
   const openScratchpad = () => {
     chromeActions.openApplication("scratchpad");
   };
@@ -558,7 +565,9 @@ export const MarimoErrorOutput = ({
                     <p className="text-muted-foreground">
                       {processTextForUrls(error.msg, `exception-${idx}`)}
                     </p>
-                    {"traceback" in error && error.traceback ? (
+                    {showInlineTraceback &&
+                    "traceback" in error &&
+                    error.traceback ? (
                       <CollapsibleTraceback traceback={error.traceback} />
                     ) : (
                       showConsoleHint && (
@@ -572,9 +581,11 @@ export const MarimoErrorOutput = ({
                   <div>
                     {processTextForUrls(error.msg, `exception-${idx}`)}
                     <CellLinkError cellId={error.raising_cell} />
-                    {"traceback" in error && error.traceback && (
-                      <CollapsibleTraceback traceback={error.traceback} />
-                    )}
+                    {showInlineTraceback &&
+                      "traceback" in error &&
+                      error.traceback && (
+                        <CollapsibleTraceback traceback={error.traceback} />
+                      )}
                   </div>
                 )}
               </li>
@@ -728,6 +739,11 @@ export const MarimoErrorOutput = ({
     >
       {title}
       <div className="flex flex-col gap-4">{renderMessages()}</div>
+      {cellId && errors.length > 0 && (
+        <SendErrorReportButton
+          getContent={() => buildErrorReport(cellId, { code, errors })}
+        />
+      )}
     </Alert>
   );
 };

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

@@ -22,6 +22,7 @@ import {
 import { Kbd } from "@/components/ui/kbd";
 import { Tooltip } from "@/components/ui/tooltip";
 import { getCellEditorView } from "@/core/cells/cells";
+import { buildErrorReport } from "@/core/cells/error-report";
 import type { CellId } from "@/core/cells/ids";
 import { SCRATCH_CELL_ID } from "@/core/cells/ids";
 import { toggleBreakpoint } from "@/core/codemirror/cells/debugger-state";
@@ -34,6 +35,7 @@ import { isWasm } from "@/core/wasm/utils";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { sanitizeHtml } from "@/plugins/core/sanitize-html";
 import { copyToClipboard } from "@/utils/copy";
+import { parseHtmlContent } from "@/utils/dom";
 import {
   containsMangledLocal,
   splitMangledLocals,
@@ -46,33 +48,45 @@ import {
 import { useOpenAiAssistant } from "../chrome/wrapper/useOpenAiAssistant";
 import { AIFixButton, buildFixInChatPrompt } from "../errors/auto-fix";
 import { MangledSegments } from "../errors/mangled-local-chip";
+import { SendErrorReportButton } from "../errors/send-error-report-button";
 import { CellLinkTraceback } from "../links/cell-link";
 import type { OnRefactorWithAI } from "../Output";
 
 interface Props {
   cellId: CellId | undefined;
   traceback: string;
+  tracebackFormat?: "html" | "text";
+  code?: string;
   onRefactorWithAI?: OnRefactorWithAI;
 }
 
-/**
- * List of errors due to violations of Marimo semantics.
- */
+/** Render a traceback and actions for its captured execution. */
 export const MarimoTracebackOutput = ({
   onRefactorWithAI,
   traceback,
+  tracebackFormat = "html",
   cellId,
+  code,
 }: Props): JSX.Element => {
-  const htmlTraceback = renderHTML({
-    html: traceback,
-    additionalReplacements: [
-      replaceTracebackFilenames,
-      replaceTracebackPrefix,
-      replaceMangledLocal,
-    ],
-  });
+  const htmlTraceback =
+    tracebackFormat === "text" ? (
+      <pre>{traceback}</pre>
+    ) : (
+      renderHTML({
+        html: traceback,
+        additionalReplacements: [
+          replaceTracebackFilenames,
+          replaceTracebackPrefix,
+          replaceMangledLocal,
+        ],
+      })
+    );
 
-  const lastTracebackLine = lastLine(traceback);
+  const textTraceback =
+    tracebackFormat === "html"
+      ? parseHtmlContent(sanitizeHtml(traceback))
+      : traceback;
+  const lastTracebackLine = lastLine(textTraceback);
   const aiFeaturesEnabled = useAtomValue(aiFeaturesEnabledAtom);
   const openAiAssistant = useOpenAiAssistant();
 
@@ -131,6 +145,13 @@ export const MarimoTracebackOutput = ({
         </div>
       )}
       <div className="flex gap-2">
+        {cellId && lastTracebackLine && (
+          <SendErrorReportButton
+            getContent={() =>
+              buildErrorReport(cellId, { code, traceback, tracebackFormat })
+            }
+          />
+        )}
         {showAIFix && (
           <AIFixButton
             tooltip="Fix with AI"
@@ -186,11 +207,7 @@ export const MarimoTracebackOutput = ({
               </DropdownMenuItem>
               <DropdownMenuItem
                 onClick={() => {
-                  // Strip HTML from the traceback (sanitize first to prevent XSS)
-                  const div = document.createElement("div");
-                  div.innerHTML = sanitizeHtml(traceback);
-                  const textContent = div.textContent || "";
-                  copyToClipboard(textContent);
+                  copyToClipboard(textTraceback);
                 }}
               >
                 <CopyIcon className="h-4 w-4 mr-2" />
@@ -205,9 +222,7 @@ export const MarimoTracebackOutput = ({
 };
 
 function lastLine(text: string): string {
-  const el = document.createElement("div");
-  el.innerHTML = sanitizeHtml(text);
-  const lines = el.textContent?.split("\n").filter(Boolean);
+  const lines = text.split("\n").filter(Boolean);
   return lines?.at(-1) || "";
 }
 
@@ -233,7 +248,7 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
             <Tooltip content={tooltipContent}>
               <button
                 type="button"
-                className="ml-1 p-1 rounded-sm hover:bg-muted transition-all inline"
+                className="ml-1 p-1 rounded-sm hover:bg-muted transition-colors inline"
               >
                 <BugPlayIcon
                   onClick={() => {
@@ -259,7 +274,7 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
     return (
       <div
         className="inline-block cursor-pointer text-destructive hover:underline"
-        onClick={(_) => {
+        onClick={() => {
           getRequestClient().openFile({
             path: info.filePath,
             lineNumber: info.lineNumber,

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

@@ -7,6 +7,24 @@ import {
   TerminalBuffer,
 } from "../ansi-reduce";
 
+test("preserves source evidence through stateful output and serialization", () => {
+  const output = StatefulOutputMessage.create({
+    channel: "stderr",
+    mimetype: "application/vnd.marimo+traceback",
+    timestamp: 1,
+    data: "<pre>ValueError:",
+    code: "raise ValueError('failed code')",
+  }).appendData(" failed code</pre>");
+  expect(output.code).toBe("raise ValueError('failed code')");
+  expect(output.toJSON()).toEqual({
+    channel: "stderr",
+    mimetype: "application/vnd.marimo+traceback",
+    timestamp: 1,
+    data: "<pre>ValueError: failed code</pre>",
+    code: "raise ValueError('failed code')",
+  });
+});
+
 describe("TerminalBuffer", () => {
   test("writeChar writes single character", () => {
     const buffer = new TerminalBuffer();

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

@@ -358,6 +358,7 @@ export class AnsiReducer {
 
 export type StringOutputMessage = Omit<OutputMessage, "data"> & {
   data: string;
+  id?: number;
 };
 
 /**
@@ -368,6 +369,8 @@ export class StatefulOutputMessage implements OutputMessage {
   public readonly mimetype: OutputMessage["mimetype"];
   public readonly channel: OutputMessage["channel"];
   public readonly timestamp: OutputMessage["timestamp"];
+  public readonly code: OutputMessage["code"];
+  public readonly id: StringOutputMessage["id"];
   private ansiReducer = new AnsiReducer();
   private _data: string;
 
@@ -383,6 +386,8 @@ export class StatefulOutputMessage implements OutputMessage {
       message.channel,
       message.timestamp,
       ansiReducer,
+      message.code,
+      message.id,
     );
   }
 
@@ -391,10 +396,14 @@ export class StatefulOutputMessage implements OutputMessage {
     channel: OutputMessage["channel"],
     timestamp: OutputMessage["timestamp"],
     ansiReducer: AnsiReducer,
+    code: OutputMessage["code"],
+    id: StringOutputMessage["id"],
   ) {
     this.mimetype = mimetype;
     this.channel = channel;
     this.timestamp = timestamp;
+    this.code = code;
+    this.id = id;
     this.ansiReducer = ansiReducer;
     this._data = this.ansiReducer.render();
   }
@@ -406,6 +415,8 @@ export class StatefulOutputMessage implements OutputMessage {
       this.channel,
       this.timestamp,
       this.ansiReducer,
+      this.code,
+      this.id,
     );
   }
 
@@ -415,6 +426,7 @@ export class StatefulOutputMessage implements OutputMessage {
       channel: this.channel,
       timestamp: this.timestamp,
       data: this.data,
+      ...(this.code === undefined ? {} : { code: this.code }),
     };
   }
 }

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

@@ -6,7 +6,7 @@ import {
   ChevronsUpDownIcon,
   WrapTextIcon,
 } from "lucide-react";
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useState } from "react";
 import { ToggleButton } from "react-aria-components";
 import { DebuggerControls } from "@/components/debugger/debugger-code";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
@@ -16,8 +16,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
 import { isInternalCellName } from "@/core/cells/names";
 import { useExpandedConsoleOutput } from "@/core/cells/outputs";
-import type { WithResponse } from "@/core/cells/types";
-import type { OutputMessage } from "@/core/kernel/messages";
+import type { ConsoleOutputMessage } from "@/core/cells/types";
 import {
   type UseInputHistoryReturn,
   useInputHistory,
@@ -49,31 +48,21 @@ export const CONSOLE_CLEAR_DEBOUNCE_MS = 200;
  */
 function useDebouncedConsoleOutputs<T>(outputs: T[]): T[] {
   const [debouncedOutputs, setDebouncedOutputs] = useState(outputs);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // Non-empty outputs: apply immediately and cancel any pending clear
+  // Non-empty outputs: apply immediately. Effect cleanup cancels pending clears.
   if (outputs.length > 0 && debouncedOutputs !== outputs) {
-    if (timerRef.current !== null) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
     setDebouncedOutputs(outputs);
   }
 
   // Empty outputs: delay the clear so new outputs can arrive first
   useEffect(() => {
-    if (outputs.length === 0 && timerRef.current === null) {
-      timerRef.current = setTimeout(() => {
-        timerRef.current = null;
-        setDebouncedOutputs([]);
-      }, CONSOLE_CLEAR_DEBOUNCE_MS);
+    if (outputs.length > 0) {
+      return;
     }
-    return () => {
-      if (timerRef.current !== null) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-    };
+    const timer = setTimeout(() => {
+      setDebouncedOutputs([]);
+    }, CONSOLE_CLEAR_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
   }, [outputs]);
 
   return debouncedOutputs;
@@ -83,7 +72,7 @@ interface Props {
   cellId: CellId;
   cellName: string;
   className?: string;
-  consoleOutputs: WithResponse<OutputMessage>[];
+  consoleOutputs: ConsoleOutputMessage[];
   stale: boolean;
   interrupted: boolean;
   debuggerActive: boolean;
@@ -251,19 +240,24 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
             return null;
           }
 
+          const originalIdx = consoleOutputs.length - idx - 1;
+          // Outputs render in reverse, so the reversed index shifts on every
+          // new line. The assigned id survives collapse and truncation. The
+          // original position is the fallback for outputs without one.
+          const key = output.id ?? `position-${originalIdx}`;
+
           if (output.channel === "stdin") {
             invariant(
               typeof output.data === "string",
               "Expected data to be a string",
             );
 
-            const originalIdx = consoleOutputs.length - idx - 1;
             const isPassword = output.mimetype === "text/password";
 
             if (output.response == null && lastStdInputIdx === idx) {
               return (
                 <StdInput
-                  key={idx}
+                  key={key}
                   output={output.data}
                   isPdb={isPdb}
                   isPassword={isPassword}
@@ -278,7 +272,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
 
             return (
               <StdInputWithResponse
-                key={idx}
+                key={key}
                 output={output.data}
                 response={output.response}
                 isPassword={isPassword}
@@ -288,7 +282,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
           }
 
           return (
-            <React.Fragment key={idx}>
+            <React.Fragment key={key}>
               <OutputRenderer
                 cellId={cellId}
                 onRefactorWithAI={onRefactorWithAI}

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

@@ -158,6 +158,7 @@ export const PackageAlert: React.FC = () => {
               <SourceBadge source={packageAlert.source} />
             </span>
             <Button
+              aria-label="Dismiss missing packages alert"
               variant="text"
               data-testid="remove-banner-button"
               size="icon"
@@ -171,12 +172,12 @@ export const PackageAlert: React.FC = () => {
               <p>The following packages were not found:</p>
               <table className="list-disc ml-2 mt-1">
                 <tbody>
-                  {packageAlert.packages.map((pkg, index) => {
+                  {packageAlert.packages.map((pkg) => {
                     const parsed = parsePackageSpecifier(pkg);
                     const currentExtras = selectedExtras[pkg] || parsed.extras;
 
                     return (
-                      <tr className="font-mono text-sm" key={index}>
+                      <tr className="font-mono text-sm" key={pkg}>
                         <td className="pr-2 py-1 align-middle">
                           <BoxIcon size="1rem" />
                         </td>
@@ -270,6 +271,7 @@ export const PackageAlert: React.FC = () => {
               <SourceBadge source={packageAlert.source} />
             </span>
             <Button
+              aria-label={`Dismiss ${title}`}
               variant="text"
               data-testid="remove-banner-button"
               size="icon"
@@ -294,7 +296,7 @@ export const PackageAlert: React.FC = () => {
               </>
             )}
             <ul className="list-disc ml-2 mt-1">
-              {Object.entries(packageAlert.packages).map(([pkg, st], index) => (
+              {Object.entries(packageAlert.packages).map(([pkg, st]) => (
                 <li
                   className={cn(
                     "flex items-center gap-1 font-mono text-sm",
@@ -305,7 +307,7 @@ export const PackageAlert: React.FC = () => {
                       status === "failed" &&
                       "text-muted-foreground",
                   )}
-                  key={index}
+                  key={pkg}
                 >
                   <ProgressIcon status={st} />
                   {pkg}

package/src/components/editor/renderers/vertical-layout/sidebar/toggle.tsx

@@ -12,7 +12,13 @@ interface SidebarToggleProps {
 export const SidebarToggle = ({ isOpen, toggle }: SidebarToggleProps) => {
   return (
     <div className="invisible lg:visible absolute top-[12px] right-[16px] z-20">
-      <Button onClick={toggle} className="w-10 h-8" variant="ghost" size="icon">
+      <Button
+        aria-label={isOpen ? "Collapse sidebar" : "Expand sidebar"}
+        onClick={toggle}
+        className="w-10 h-8"
+        variant="ghost"
+        size="icon"
+      >
         <ChevronLeft
           className={cn(
             "h-5 w-5 transition-transform ease-in-out duration-700",