@marimo-team/islands 0.20.3-dev88 → 0.20.3-dev90

package/dist/main.js

@@ -68637,7 +68637,11 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       if (isDataPart(d2)) return Logger.debug("Found data part", d2), null;
       switch (d2.type) {
         case "text":
-          return (0, import_jsx_runtime.jsx)(MarkdownRenderer, {
+          return d2.text.includes("<marimo-") ? (0, import_jsx_runtime.jsx)(import_react.Fragment, {
+            children: renderHTML({
+              html: d2.text
+            })
+          }, f) : (0, import_jsx_runtime.jsx)(MarkdownRenderer, {
             content: d2.text
           }, f);
         case "reasoning":
@@ -70347,7 +70351,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.20.3-dev88"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.20.3-dev90"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$88 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {
@@ -99662,26 +99666,31 @@ ${c}
     }), r[0] = e, r[1] = c), c;
   };
   var ConsoleOutputInternal = (e) => {
-    let r = (0, import_compiler_runtime$4.c)(58), c = import_react.useRef(null), { wrapText: d, setWrapText: f } = useWrapText(), [_, v] = useExpandedConsoleOutput(e.cellId), { consoleOutputs: y, stale: S, cellName: w, cellId: E, onSubmitDebugger: O, onClear: M, onRefactorWithAI: I, className: z } = e, G = y.length > 0, q = useSelectAllContent(G), IY = useOverflowDetection(c, G), LY;
-    if (r[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (LY = () => {
+    let r = (0, import_compiler_runtime$4.c)(62), c = import_react.useRef(null), { wrapText: d, setWrapText: f } = useWrapText(), [_, v] = useExpandedConsoleOutput(e.cellId), [y, S] = import_react.useState(""), w;
+    r[0] === y ? w = r[1] : (w = {
+      value: y,
+      setValue: S
+    }, r[0] = y, r[1] = w);
+    let E = useInputHistory(w), { consoleOutputs: O, stale: M, cellName: I, cellId: z, onSubmitDebugger: G, onClear: q, onRefactorWithAI: IY, className: LY } = e, RY = O.length > 0, zY = useSelectAllContent(RY), BY = useOverflowDetection(c, RY), VY;
+    if (r[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (VY = () => {
       let e2 = c.current;
       if (!e2) return;
       let r2 = e2.scrollHeight - e2.clientHeight;
       r2 - e2.scrollTop < 120 && (e2.scrollTop = r2);
-    }, r[0] = LY) : LY = r[0], (0, import_react.useLayoutEffect)(LY), !G && isInternalCellName(w)) return null;
-    let RY, zY, BY, VY, HY, UY, WY, GY, KY, qY;
-    if (r[1] !== E || r[2] !== z || r[3] !== y || r[4] !== G || r[5] !== _ || r[6] !== IY || r[7] !== M || r[8] !== I || r[9] !== O || r[10] !== q || r[11] !== v || r[12] !== f || r[13] !== S || r[14] !== d) {
+    }, r[2] = VY) : VY = r[2], (0, import_react.useLayoutEffect)(VY), !RY && isInternalCellName(I)) return null;
+    let HY, UY, WY, GY, KY, qY, JY, YY, XY, ZY;
+    if (r[3] !== z || r[4] !== LY || r[5] !== O || r[6] !== RY || r[7] !== E || r[8] !== _ || r[9] !== BY || r[10] !== q || r[11] !== IY || r[12] !== G || r[13] !== zY || r[14] !== v || r[15] !== f || r[16] !== M || r[17] !== y || r[18] !== d) {
       let e2 = [
-        ...y
-      ].reverse(), w2 = e2.some(_temp$2), LY2 = e2.findIndex(_temp2$2), JY2;
-      r[25] === y ? JY2 = r[26] : (JY2 = () => y.filter(_temp3$1).map(_temp4$1).join("\n"), r[25] = y, r[26] = JY2);
-      let YY2 = JY2;
-      qY = "relative group", r[27] !== YY2 || r[28] !== G || r[29] !== _ || r[30] !== IY || r[31] !== v || r[32] !== f || r[33] !== d ? (zY = G && (0, import_jsx_runtime.jsxs)("div", {
+        ...O
+      ].reverse(), w2 = e2.some(_temp$2), I2 = e2.findIndex(_temp2$2), VY2;
+      r[29] === O ? VY2 = r[30] : (VY2 = () => O.filter(_temp3$1).map(_temp4$1).join("\n"), r[29] = O, r[30] = VY2);
+      let QY2 = VY2;
+      HY = "relative group", r[31] !== QY2 || r[32] !== RY || r[33] !== _ || r[34] !== BY || r[35] !== v || r[36] !== f || r[37] !== d ? (UY = RY && (0, import_jsx_runtime.jsxs)("div", {
         className: "absolute top-1 right-4 z-10 opacity-0 group-hover:opacity-100 flex items-center gap-1 print:hidden",
         children: [
           (0, import_jsx_runtime.jsx)(CopyClipboardIcon, {
             tooltip: "Copy console output",
-            value: YY2,
+            value: QY2,
             className: "h-4 w-4"
           }),
           (0, import_jsx_runtime.jsx)(Tooltip, {
@@ -99698,7 +99707,7 @@ ${c}
               })
             })
           }),
-          (IY || _) && (0, import_jsx_runtime.jsx)(Button, {
+          (BY || _) && (0, import_jsx_runtime.jsx)(Button, {
             "aria-label": _ ? "Collapse output" : "Expand output",
             className: "p-0 mb-px",
             onClick: () => v(!_),
@@ -99717,21 +99726,24 @@ ${c}
             })
           })
         ]
-      }), r[27] = YY2, r[28] = G, r[29] = _, r[30] = IY, r[31] = v, r[32] = f, r[33] = d, r[34] = zY) : zY = r[34], RY = S ? "This console output is stale" : void 0, BY = "console-output-area", VY = c, HY = q, UY = 0;
-      let XY2 = S && "marimo-output-stale", ZY = G ? "p-5" : "p-3";
-      r[35] !== z || r[36] !== XY2 || r[37] !== ZY ? (WY = cn("console-output-area overflow-hidden rounded-b-lg flex flex-col-reverse w-full gap-1 focus:outline-hidden", XY2, ZY, z), r[35] = z, r[36] = XY2, r[37] = ZY, r[38] = WY) : WY = r[38], r[39] === _ ? GY = r[40] : (GY = _ ? {
+      }), r[31] = QY2, r[32] = RY, r[33] = _, r[34] = BY, r[35] = v, r[36] = f, r[37] = d, r[38] = UY) : UY = r[38], WY = M ? "This console output is stale" : void 0, GY = "console-output-area", KY = c, qY = zY, JY = 0;
+      let $Y2 = M && "marimo-output-stale", eX2 = RY ? "p-5" : "p-3";
+      r[39] !== LY || r[40] !== $Y2 || r[41] !== eX2 ? (YY = cn("console-output-area overflow-hidden rounded-b-lg flex flex-col-reverse w-full gap-1 focus:outline-hidden", $Y2, eX2, LY), r[39] = LY, r[40] = $Y2, r[41] = eX2, r[42] = YY) : YY = r[42], r[43] === _ ? XY = r[44] : (XY = _ ? {
         maxHeight: "none"
-      } : void 0, r[39] = _, r[40] = GY), KY = e2.map((e3, r2) => {
+      } : void 0, r[43] = _, r[44] = XY), ZY = e2.map((e3, r2) => {
         if (e3.channel === "pdb") return null;
         if (e3.channel === "stdin") {
           invariant(typeof e3.data == "string", "Expected data to be a string");
-          let c2 = y.length - r2 - 1, d2 = e3.mimetype === "text/password";
-          return e3.response == null && LY2 === r2 ? (0, import_jsx_runtime.jsx)(StdInput, {
+          let c2 = O.length - r2 - 1, d2 = e3.mimetype === "text/password";
+          return e3.response == null && I2 === r2 ? (0, import_jsx_runtime.jsx)(StdInput, {
             output: e3.data,
             isPdb: w2,
             isPassword: d2,
-            onSubmit: (e4) => O(e4, c2),
-            onClear: M
+            onSubmit: (e4) => G(e4, c2),
+            onClear: q,
+            value: y,
+            setValue: S,
+            inputHistory: E
           }, r2) : (0, import_jsx_runtime.jsx)(StdInputWithResponse, {
             output: e3.data,
             response: e3.response,
@@ -99740,94 +99752,91 @@ ${c}
         }
         return (0, import_jsx_runtime.jsx)(import_react.Fragment, {
           children: (0, import_jsx_runtime.jsx)(OutputRenderer, {
-            cellId: E,
-            onRefactorWithAI: I,
+            cellId: z,
+            onRefactorWithAI: IY,
             message: e3,
             wrapText: d
           })
         }, r2);
-      }), r[1] = E, r[2] = z, r[3] = y, r[4] = G, r[5] = _, r[6] = IY, r[7] = M, r[8] = I, r[9] = O, r[10] = q, r[11] = v, r[12] = f, r[13] = S, r[14] = d, r[15] = RY, r[16] = zY, r[17] = BY, r[18] = VY, r[19] = HY, r[20] = UY, r[21] = WY, r[22] = GY, r[23] = KY, r[24] = qY;
-    } else RY = r[15], zY = r[16], BY = r[17], VY = r[18], HY = r[19], UY = r[20], WY = r[21], GY = r[22], KY = r[23], qY = r[24];
-    let JY;
-    r[41] !== E || r[42] !== w ? (JY = (0, import_jsx_runtime.jsx)(NameCellContentEditable, {
-      value: w,
-      cellId: E,
+      }), r[3] = z, r[4] = LY, r[5] = O, r[6] = RY, r[7] = E, r[8] = _, r[9] = BY, r[10] = q, r[11] = IY, r[12] = G, r[13] = zY, r[14] = v, r[15] = f, r[16] = M, r[17] = y, r[18] = d, r[19] = HY, r[20] = UY, r[21] = WY, r[22] = GY, r[23] = KY, r[24] = qY, r[25] = JY, r[26] = YY, r[27] = XY, r[28] = ZY;
+    } else HY = r[19], UY = r[20], WY = r[21], GY = r[22], KY = r[23], qY = r[24], JY = r[25], YY = r[26], XY = r[27], ZY = r[28];
+    let QY;
+    r[45] !== z || r[46] !== I ? (QY = (0, import_jsx_runtime.jsx)(NameCellContentEditable, {
+      value: I,
+      cellId: z,
       className: "bg-(--slate-4) border-(--slate-4) hover:bg-(--slate-5) dark:border-(--sky-5) dark:bg-(--sky-6) dark:text-(--sky-12) text-(--slate-12) rounded-l rounded-br-lg absolute right-0 bottom-0 text-xs px-1.5 py-0.5 font-mono max-w-[75%] whitespace-nowrap overflow-hidden"
-    }), r[41] = E, r[42] = w, r[43] = JY) : JY = r[43];
-    let YY;
-    r[44] !== RY || r[45] !== JY || r[46] !== BY || r[47] !== VY || r[48] !== HY || r[49] !== UY || r[50] !== WY || r[51] !== GY || r[52] !== KY ? (YY = (0, import_jsx_runtime.jsxs)("div", {
-      title: RY,
-      "data-testid": BY,
-      ref: VY,
-      ...HY,
-      tabIndex: UY,
-      className: WY,
-      style: GY,
+    }), r[45] = z, r[46] = I, r[47] = QY) : QY = r[47];
+    let $Y;
+    r[48] !== QY || r[49] !== WY || r[50] !== GY || r[51] !== KY || r[52] !== qY || r[53] !== JY || r[54] !== YY || r[55] !== XY || r[56] !== ZY ? ($Y = (0, import_jsx_runtime.jsxs)("div", {
+      title: WY,
+      "data-testid": GY,
+      ref: KY,
+      ...qY,
+      tabIndex: JY,
+      className: YY,
+      style: XY,
       children: [
-        KY,
-        JY
+        ZY,
+        QY
       ]
-    }), r[44] = RY, r[45] = JY, r[46] = BY, r[47] = VY, r[48] = HY, r[49] = UY, r[50] = WY, r[51] = GY, r[52] = KY, r[53] = YY) : YY = r[53];
-    let XY;
-    return r[54] !== zY || r[55] !== YY || r[56] !== qY ? (XY = (0, import_jsx_runtime.jsxs)("div", {
-      className: qY,
+    }), r[48] = QY, r[49] = WY, r[50] = GY, r[51] = KY, r[52] = qY, r[53] = JY, r[54] = YY, r[55] = XY, r[56] = ZY, r[57] = $Y) : $Y = r[57];
+    let eX;
+    return r[58] !== HY || r[59] !== UY || r[60] !== $Y ? (eX = (0, import_jsx_runtime.jsxs)("div", {
+      className: HY,
       children: [
-        zY,
-        YY
+        UY,
+        $Y
       ]
-    }), r[54] = zY, r[55] = YY, r[56] = qY, r[57] = XY) : XY = r[57], XY;
+    }), r[58] = HY, r[59] = UY, r[60] = $Y, r[61] = eX) : eX = r[61], eX;
   }, StdInput = (e) => {
-    let r = (0, import_compiler_runtime$4.c)(24), [c, d] = import_react.useState(""), f;
-    r[0] === c ? f = r[1] : (f = {
-      value: c,
-      setValue: d
-    }, r[0] = c, r[1] = f);
-    let { navigateUp: _, navigateDown: v, addToHistory: y } = useInputHistory(f), S;
-    r[2] === e.output ? S = r[3] : (S = renderText(e.output), r[2] = e.output, r[3] = S);
-    let w = e.isPassword ? "password" : "text", E, O;
-    r[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (E = (e2) => d(e2.target.value), O = (0, import_jsx_runtime.jsx)(ChevronRight, {
+    let r = (0, import_compiler_runtime$4.c)(25), { value: c, setValue: d, inputHistory: f, output: _, isPassword: v, isPdb: y, onSubmit: S, onClear: w } = e, { navigateUp: E, navigateDown: O, addToHistory: M } = f, I;
+    r[0] === _ ? I = r[1] : (I = renderText(_), r[0] = _, r[1] = I);
+    let z = v ? "password" : "text", G;
+    r[2] === d ? G = r[3] : (G = (e2) => d(e2.target.value), r[2] = d, r[3] = G);
+    let q;
+    r[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (q = (0, import_jsx_runtime.jsx)(ChevronRight, {
       className: "w-5 h-5"
-    }), r[4] = E, r[5] = O) : (E = r[4], O = r[5]);
-    let M;
-    r[6] !== y || r[7] !== v || r[8] !== _ || r[9] !== e || r[10] !== c ? (M = (r2) => {
-      if (r2.key === "ArrowUp") {
-        _(), r2.preventDefault();
+    }), r[4] = q) : q = r[4];
+    let IY;
+    r[5] !== M || r[6] !== O || r[7] !== E || r[8] !== S || r[9] !== d || r[10] !== c ? (IY = (e2) => {
+      if (e2.key === "ArrowUp") {
+        E(), e2.preventDefault();
         return;
       }
-      if (r2.key === "ArrowDown") {
-        v(), r2.preventDefault();
+      if (e2.key === "ArrowDown") {
+        O(), e2.preventDefault();
         return;
       }
-      r2.key === "Enter" && !r2.shiftKey && (c && (y(c), e.onSubmit(c), d("")), r2.preventDefault(), r2.stopPropagation()), r2.key === "Enter" && r2.metaKey && (r2.preventDefault(), r2.stopPropagation());
-    }, r[6] = y, r[7] = v, r[8] = _, r[9] = e, r[10] = c, r[11] = M) : M = r[11];
-    let I;
-    r[12] !== w || r[13] !== M || r[14] !== c ? (I = (0, import_jsx_runtime.jsx)(Input, {
+      e2.key === "Enter" && !e2.shiftKey && (c && (M(c), S(c), d("")), e2.preventDefault(), e2.stopPropagation()), e2.key === "Enter" && e2.metaKey && (e2.preventDefault(), e2.stopPropagation());
+    }, r[5] = M, r[6] = O, r[7] = E, r[8] = S, r[9] = d, r[10] = c, r[11] = IY) : IY = r[11];
+    let LY;
+    r[12] !== z || r[13] !== G || r[14] !== IY || r[15] !== c ? (LY = (0, import_jsx_runtime.jsx)(Input, {
       "data-testid": "console-input",
       "data-stdin-blocking": true,
-      type: w,
+      type: z,
       autoComplete: "off",
       autoFocus: true,
       value: c,
-      onChange: E,
-      icon: O,
+      onChange: G,
+      icon: q,
       className: "m-0 h-8 focus-visible:shadow-xs-solid",
       placeholder: "stdin",
-      onKeyDownCapture: M
-    }), r[12] = w, r[13] = M, r[14] = c, r[15] = I) : I = r[15];
-    let z;
-    r[16] !== e.isPdb || r[17] !== e.onClear || r[18] !== e.onSubmit ? (z = e.isPdb && (0, import_jsx_runtime.jsx)(DebuggerControls, {
-      onSubmit: e.onSubmit,
-      onClear: e.onClear
-    }), r[16] = e.isPdb, r[17] = e.onClear, r[18] = e.onSubmit, r[19] = z) : z = r[19];
-    let G;
-    return r[20] !== S || r[21] !== I || r[22] !== z ? (G = (0, import_jsx_runtime.jsxs)("div", {
+      onKeyDownCapture: IY
+    }), r[12] = z, r[13] = G, r[14] = IY, r[15] = c, r[16] = LY) : LY = r[16];
+    let RY;
+    r[17] !== y || r[18] !== w || r[19] !== S ? (RY = y && (0, import_jsx_runtime.jsx)(DebuggerControls, {
+      onSubmit: S,
+      onClear: w
+    }), r[17] = y, r[18] = w, r[19] = S, r[20] = RY) : RY = r[20];
+    let zY;
+    return r[21] !== I || r[22] !== LY || r[23] !== RY ? (zY = (0, import_jsx_runtime.jsxs)("div", {
       className: "flex gap-2 items-center pt-2",
       children: [
-        S,
         I,
-        z
+        LY,
+        RY
       ]
-    }), r[20] = S, r[21] = I, r[22] = z, r[23] = G) : G = r[23], G;
+    }), r[21] = I, r[22] = LY, r[23] = RY, r[24] = zY) : zY = r[24], zY;
   }, StdInputWithResponse = (e) => {
     let r = (0, import_compiler_runtime$4.c)(8), c;
     r[0] === e.output ? c = r[1] : (c = renderText(e.output), r[0] = e.output, r[1] = c);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.20.3-dev88",
+  "version": "0.20.3-dev90",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/chat/chat-display.tsx

@@ -1,6 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { DataUIPart, ToolUIPart, UIMessage } from "ai";
+import React from "react";
+import { renderHTML } from "@/plugins/core/RenderHTML";
 import { logNever } from "@/utils/assertNever";
 import { Logger } from "@/utils/Logger";
 import { MarkdownRenderer } from "../markdown/markdown-renderer";
@@ -46,6 +48,17 @@ export const renderUIMessage = ({
 
     switch (part.type) {
       case "text":
+        // Streamdown sanitizes the HTML which strips out marimo elements
+        // So instead, we render the HTML with our custom renderer.
+        if (part.text.includes("<marimo-")) {
+          return (
+            <React.Fragment key={index}>
+              {renderHTML({
+                html: part.text,
+              })}
+            </React.Fragment>
+          );
+        }
         return <MarkdownRenderer key={index} content={part.text} />;
       case "reasoning":
         return (

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

@@ -18,7 +18,10 @@ 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 { useInputHistory } from "@/hooks/useInputHistory";
+import {
+  type UseInputHistoryReturn,
+  useInputHistory,
+} from "@/hooks/useInputHistory";
 import { useOverflowDetection } from "@/hooks/useOverflowDetection";
 import { useSelectAllContent } from "@/hooks/useSelectAllContent";
 import { cn } from "@/utils/cn";
@@ -54,6 +57,11 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
   const ref = React.useRef<HTMLDivElement>(null);
   const { wrapText, setWrapText } = useWrapText();
   const [isExpanded, setIsExpanded] = useExpandedConsoleOutput(props.cellId);
+  const [stdinValue, setStdinValue] = React.useState("");
+  const inputHistory = useInputHistory({
+    value: stdinValue,
+    setValue: setStdinValue,
+  });
   const {
     consoleOutputs,
     stale,
@@ -210,6 +218,9 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
                   isPassword={isPassword}
                   onSubmit={(text) => onSubmitDebugger(text, originalIdx)}
                   onClear={onClear}
+                  value={stdinValue}
+                  setValue={setStdinValue}
+                  inputHistory={inputHistory}
                 />
               );
             }
@@ -249,25 +260,32 @@ const StdInput = (props: {
   onSubmit: (text: string) => void;
   onClear?: () => void;
   output: string;
-  response?: string;
   isPdb: boolean;
   isPassword?: boolean;
+  value: string;
+  setValue: (value: string) => void;
+  inputHistory: UseInputHistoryReturn;
 }) => {
-  const [value, setValue] = React.useState("");
-
-  const { navigateUp, navigateDown, addToHistory } = useInputHistory({
+  const {
     value,
     setValue,
-  });
+    inputHistory,
+    output,
+    isPassword,
+    isPdb,
+    onSubmit,
+    onClear,
+  } = props;
+  const { navigateUp, navigateDown, addToHistory } = inputHistory;
 
   return (
     <div className="flex gap-2 items-center pt-2">
-      {renderText(props.output)}
+      {renderText(output)}
       <Input
         data-testid="console-input"
         // This is used in <StdinBlockingAlert> to find the input
         data-stdin-blocking={true}
-        type={props.isPassword ? "password" : "text"}
+        type={isPassword ? "password" : "text"}
         autoComplete="off"
         autoFocus={true}
         value={value}
@@ -292,7 +310,7 @@ const StdInput = (props: {
           if (e.key === "Enter" && !e.shiftKey) {
             if (value) {
               addToHistory(value);
-              props.onSubmit(value);
+              onSubmit(value);
               setValue("");
             }
             e.preventDefault();
@@ -306,9 +324,7 @@ const StdInput = (props: {
           }
         }}
       />
-      {props.isPdb && (
-        <DebuggerControls onSubmit={props.onSubmit} onClear={props.onClear} />
-      )}
+      {isPdb && <DebuggerControls onSubmit={onSubmit} onClear={onClear} />}
     </div>
   );
 };

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

@@ -1,9 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
+import type { WithResponse } from "@/core/cells/types";
 import type { OutputMessage } from "@/core/kernel/messages";
 import { ConsoleOutput } from "../ConsoleOutput";
 
@@ -20,6 +21,10 @@ global.ResizeObserver = class ResizeObserver {
   }
 };
 
+const renderWithProvider = (ui: React.ReactElement) => {
+  return render(<TooltipProvider>{ui}</TooltipProvider>);
+};
+
 describe("ConsoleOutput integration", () => {
   const createOutput = (data: string, channel = "stdout"): OutputMessage => ({
     channel: channel as "stdout" | "stderr",
@@ -31,7 +36,7 @@ describe("ConsoleOutput integration", () => {
   const defaultProps = {
     cellId: "cell-1" as CellId,
     cellName: "test_cell",
-    consoleOutputs: [],
+    consoleOutputs: [] as WithResponse<OutputMessage>[],
     stale: false,
     debuggerActive: false,
     onSubmitDebugger: () => {
@@ -50,14 +55,151 @@ describe("ConsoleOutput integration", () => {
       ],
     };
 
-    render(
-      <TooltipProvider>
-        <ConsoleOutput {...props} />
-      </TooltipProvider>,
-    );
+    renderWithProvider(<ConsoleOutput {...props} />);
 
     const link = screen.getByRole("link", { name: "https://marimo.io" });
     expect(link).toBeInTheDocument();
     expect(link).toHaveAttribute("href", "https://marimo.io");
   });
 });
+
+describe("ConsoleOutput pdb history", () => {
+  const defaultProps = {
+    cellId: "cell-1" as CellId,
+    cellName: "test_cell",
+    consoleOutputs: [] as WithResponse<OutputMessage>[],
+    stale: false,
+    debuggerActive: false,
+    onSubmitDebugger: vi.fn(),
+  };
+
+  const stdinPrompt = (
+    data: string,
+    response?: string,
+  ): WithResponse<OutputMessage> => ({
+    channel: "stdin" as const,
+    mimetype: "text/plain",
+    data,
+    timestamp: 0,
+    response,
+  });
+
+  it("should persist command history across StdInput remounts", () => {
+    // Initial state: pdb prompt waiting for input
+    const outputs1: WithResponse<OutputMessage>[] = [stdinPrompt("(Pdb) ")];
+
+    const onSubmitDebugger = vi.fn();
+    const { rerender } = renderWithProvider(
+      <ConsoleOutput
+        {...defaultProps}
+        consoleOutputs={outputs1}
+        onSubmitDebugger={onSubmitDebugger}
+      />,
+    );
+
+    const input = screen.getByTestId("console-input");
+
+    // Type "next" and submit
+    fireEvent.change(input, { target: { value: "next" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    expect(onSubmitDebugger).toHaveBeenCalledWith("next", 0);
+
+    // Simulate server response: old stdin gets a response, new stdin prompt appears
+    const outputs2: WithResponse<OutputMessage>[] = [
+      stdinPrompt("(Pdb) ", "next"),
+      stdinPrompt("(Pdb) "),
+    ];
+
+    rerender(
+      <TooltipProvider>
+        <ConsoleOutput
+          {...defaultProps}
+          consoleOutputs={outputs2}
+          onSubmitDebugger={onSubmitDebugger}
+        />
+      </TooltipProvider>,
+    );
+
+    // New StdInput mounted — press ArrowUp to recall previous command
+    const newInput = screen.getByTestId("console-input");
+    fireEvent.keyDown(newInput, { key: "ArrowUp" });
+
+    expect(newInput).toHaveValue("next");
+  });
+
+  it("should navigate through multiple history entries across remounts", () => {
+    const onSubmitDebugger = vi.fn();
+
+    // First prompt
+    const outputs1: WithResponse<OutputMessage>[] = [stdinPrompt("(Pdb) ")];
+
+    const { rerender } = renderWithProvider(
+      <ConsoleOutput
+        {...defaultProps}
+        consoleOutputs={outputs1}
+        onSubmitDebugger={onSubmitDebugger}
+      />,
+    );
+
+    // Submit "step"
+    let input = screen.getByTestId("console-input");
+    fireEvent.change(input, { target: { value: "step" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    // Second prompt
+    const outputs2: WithResponse<OutputMessage>[] = [
+      stdinPrompt("(Pdb) ", "step"),
+      stdinPrompt("(Pdb) "),
+    ];
+
+    rerender(
+      <TooltipProvider>
+        <ConsoleOutput
+          {...defaultProps}
+          consoleOutputs={outputs2}
+          onSubmitDebugger={onSubmitDebugger}
+        />
+      </TooltipProvider>,
+    );
+
+    // Submit "print(x)"
+    input = screen.getByTestId("console-input");
+    fireEvent.change(input, { target: { value: "print(x)" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    // Third prompt
+    const outputs3: WithResponse<OutputMessage>[] = [
+      stdinPrompt("(Pdb) ", "step"),
+      stdinPrompt("(Pdb) ", "print(x)"),
+      stdinPrompt("(Pdb) "),
+    ];
+
+    rerender(
+      <TooltipProvider>
+        <ConsoleOutput
+          {...defaultProps}
+          consoleOutputs={outputs3}
+          onSubmitDebugger={onSubmitDebugger}
+        />
+      </TooltipProvider>,
+    );
+
+    // ArrowUp should show most recent command first
+    input = screen.getByTestId("console-input");
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    expect(input).toHaveValue("print(x)");
+
+    // ArrowUp again should show older command
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    expect(input).toHaveValue("step");
+
+    // ArrowDown should go back to "print(x)"
+    fireEvent.keyDown(input, { key: "ArrowDown" });
+    expect(input).toHaveValue("print(x)");
+
+    // ArrowDown again should return to empty input
+    fireEvent.keyDown(input, { key: "ArrowDown" });
+    expect(input).toHaveValue("");
+  });
+});

package/src/hooks/useInputHistory.ts

@@ -8,7 +8,7 @@ interface UseInputHistoryOptions {
   setValue: (value: string) => void;
 }
 
-interface UseInputHistoryReturn {
+export interface UseInputHistoryReturn {
   /** Command history array */
   history: string[];
   /** Navigate to previous command (ArrowUp) */