@marimo-team/frontend 0.25.3-dev96 → 0.25.3-dev98

package/src/core/cells/__tests__/cells.test.ts

@@ -1579,7 +1579,9 @@ describe("cell reducer", () => {
       response: secret,
     });
 
-    expect(cells[0].consoleOutputs).toEqual([{ ...prompt, response: "" }]);
+    expect(cells[0].consoleOutputs).toEqual([
+      { ...prompt, id: 1, response: "" },
+    ]);
     expect(JSON.stringify(cells[0].consoleOutputs)).not.toContain(secret);
   });
 

package/src/core/cells/__tests__/collapseConsoleOutputs.test.ts

@@ -2,6 +2,7 @@
 
 import { describe, expect, it } from "vitest";
 import { StatefulOutputMessage } from "@/components/editor/output/ansi-reduce";
+import type { ConsoleOutputMessage } from "@/core/cells/types";
 import type { OutputMessage } from "@/core/kernel/messages";
 import {
   collapseConsoleOutputs,
@@ -279,6 +280,59 @@ describe("collapseConsoleOutputs", () => {
     expect(result[0].data).toContain("Streaming output truncated");
   });
 
+  it("keeps the first id when collapsing outputs", () => {
+    const consoleOutputs = [
+      {
+        mimetype: "text/plain",
+        channel: "output",
+        data: "Hello ",
+        timestamp: 0,
+        id: 7,
+      },
+      {
+        mimetype: "text/plain",
+        channel: "output",
+        data: "World",
+        timestamp: 0,
+        id: 8,
+      },
+    ] satisfies ConsoleOutputMessage[];
+    const result = collapseConsoleOutputs(consoleOutputs);
+    expect(result).toHaveLength(1);
+    expect(result[0].data).toBe("Hello World");
+    expect((result[0] as ConsoleOutputMessage).id).toBe(7);
+  });
+
+  it("keeps ids on outputs that survive truncation", () => {
+    const consoleOutputs = [
+      {
+        mimetype: "text/plain",
+        channel: "output",
+        data: "one\ntwo",
+        timestamp: 0,
+        id: 1,
+      },
+      {
+        mimetype: "text/plain",
+        channel: "stderr",
+        data: "three\nfour",
+        timestamp: 0,
+        id: 2,
+      },
+      {
+        mimetype: "text/plain",
+        channel: "output",
+        data: "five",
+        timestamp: 0,
+        id: 3,
+      },
+    ] satisfies ConsoleOutputMessage[];
+    const result = collapseConsoleOutputs(consoleOutputs, 3);
+    const ids = result.map((output) => (output as ConsoleOutputMessage).id);
+    expect(result[0].data).toContain("Streaming output truncated");
+    expect(ids).toEqual([undefined, 2, 3]);
+  });
+
   describe("ANSI escape sequences", () => {
     it("should handle cursor movement with collapse", () => {
       const consoleOutputs: OutputMessage[] = [

package/src/core/cells/cell.ts

@@ -7,7 +7,12 @@ import { parseOutline } from "../dom/outline";
 import type { CellMessage, OutputMessage } from "../kernel/messages";
 import type { RuntimeState } from "../network/types";
 import { collapseConsoleOutputs } from "./collapseConsoleOutputs";
-import type { CellRuntimeState } from "./types";
+import type { CellRuntimeState, ConsoleOutputMessage } from "./types";
+
+// Ids increase with position, so the last output holds the maximum.
+function nextConsoleOutputId(outputs: ConsoleOutputMessage[]): number {
+  return (outputs.at(-1)?.id ?? 0) + 1;
+}
 
 export function transitionCell(
   cell: CellRuntimeState,
@@ -133,6 +138,7 @@ export function transitionCell(
           mimetype: output.mimetype,
           data: output.data,
           timestamp: output.timestamp,
+          id: output.id,
           response: output.response ?? "",
         };
       }
@@ -146,8 +152,13 @@ export function transitionCell(
     // messageConsole is an output that needs to be appended to the
     // existing console outputs.
     consoleOutputs = Array.isArray(messageConsole)
-      ? collapseConsoleOutputs(messageConsole)
-      : collapseConsoleOutputs([...consoleOutputs, messageConsole]);
+      ? collapseConsoleOutputs(
+          messageConsole.map((output, i) => ({ ...output, id: i + 1 })),
+        )
+      : collapseConsoleOutputs([
+          ...consoleOutputs,
+          { ...messageConsole, id: nextConsoleOutputId(consoleOutputs) },
+        ]);
   }
   nextCell.consoleOutputs = consoleOutputs;
   // Derive outline from output

package/src/core/cells/cells.ts

@@ -1114,6 +1114,7 @@ const {
           mimetype: stdinOutput.mimetype,
           data: stdinOutput.data,
           timestamp: stdinOutput.timestamp,
+          id: stdinOutput.id,
           // An empty response resolves the prompt without retaining the secret.
           response: stdinOutput.mimetype === "text/password" ? "" : response,
         };

package/src/core/cells/types.ts

@@ -95,7 +95,7 @@ export interface CellRuntimeState {
   /** TOC outline */
   outline: Outline | null;
   /** messages encoding the cell's console outputs. */
-  consoleOutputs: WithResponse<OutputMessage>[];
+  consoleOutputs: ConsoleOutputMessage[];
   /** current status of the cell */
   status: RuntimeState;
   /** whether the cell has stale inputs*/
@@ -130,3 +130,12 @@ export type WithResponse<T> = T & {
    */
   response?: string;
 };
+
+/**
+ * A console output as held by the frontend. The id is assigned when the
+ * output arrives and never changes, so it can identify the output while
+ * neighboring outputs collapse, truncate, or receive a stdin response.
+ */
+export type ConsoleOutputMessage = WithResponse<OutputMessage> & {
+  id?: number;
+};

package/src/plugins/impl/chat/chat-ui.tsx

@@ -472,7 +472,7 @@ export const Chatbot: React.FC<Props> = (props) => {
 
           return (
             <div
-              key={`${message.id}-${index}`}
+              key={message.id}
               className={cn(
                 "flex flex-col group gap-2",
                 message.role === "user" ? "items-end" : "items-start",

package/dist/assets/feedback-button-Cz9BdS49.js

@@ -1 +0,0 @@
-import{n as e}from"./feedback-button-sC38i-D1.js";export{e as FeedbackModal};

package/dist/assets/scratchpad-panel--SxH2dnk.js

@@ -1 +0,0 @@
-import{a as e}from"./rolldown-runtime-B0Z9INg1.js";import{c as t,f as n,l as ee,t as r,u as te}from"./useEvent-BDjgaBtz.js";import{t as i}from"./react-DVplv7_D.js";import{D as ne,I as re,Qr as a,Rt as ie,So as o,xo as ae}from"./cells-B23_t5uX.js";import{t as s}from"./compiler-runtime-BrajqUja.js";import{C as oe}from"./config-DpY86_Yq.js";import{_ as se}from"./useEventListener-CjDeLqFC.js";import{n as ce}from"./utils-B4K466FK.js";import{O as c}from"./config-CD1IuZFJ.js";import{t as le}from"./cn-ldLVeaqm.js";import{t as l}from"./jsx-runtime-B74pBk57.js";import{n as ue}from"./JsonOutput-nLzWQ-0V.js";import{t as u}from"./tooltip-CkGm8X7m.js";import{t as d}from"./button-D8gVKwe-.js";import{t as f}from"./createLucideIcon-DfJ2oMlA.js";import{l as de}from"./layout-DEFRD3k3.js";import{n as fe,t as pe}from"./LazyAnyLanguageCodeMirror-BPYE76jR.js";import{s as me}from"./toDate-DOj9Q6uC.js";import{t as he}from"./cell-editor-C6QIY1Q-.js";import{t as ge}from"./spinner-DyNE-o8o.js";import{i as _e}from"./useDeleteCell-BPQ6Xcbj.js";import{r as ve}from"./requests-BIFR-h4M.js";import{r as ye}from"./useTheme-BAA27lh7.js";import{n as be,r as xe,t as Se}from"./react-resizable-panels.browser.esm-Dbe0MrFr.js";import{a as Ce}from"./renderShortcut-rUwGqKgC.js";import{n as we,r as Te}from"./panel-context-C2QXpKfx.js";import{t as Ee}from"./kiosk-mode-DFS6HopF.js";var De=f(`eraser`,[[`path`,{d:`M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21`,key:`g5wo59`}],[`path`,{d:`m5.082 11.09 8.828 8.828`,key:`1wx5vj`}]]),Oe=f(`history`,[[`path`,{d:`M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8`,key:`1357e3`}],[`path`,{d:`M3 3v5h5`,key:`1xhq8a`}],[`path`,{d:`M12 7v5l4 2`,key:`1fdv2h`}]]),p=e(i(),1),ke=s(),m=15,h=c(`marimo:scratchpadHistory:v1`,[],a),Ae=n(!1),je=n(null,(e,t,n)=>{if(n=n.trim(),!n)return;let ee=e(h);t(h,[n,...ee.filter(e=>e!==n)].slice(0,m))}),g=l(),Me={hide_code:!1,disabled:!1},_=()=>{let e=(0,ke.c)(60),n=re(),[i]=oe(),{theme:a}=ye(),s=(0,p.useRef)(null),c=ie(),{createNewCell:l,updateCellCode:f}=ne(),{sendRunScratchpad:m}=ve(),_=we(),v=Te(),y=n.cellRuntime[o],b=y?.output,x=y?.status,S=y?.consoleOutputs,C=n.cellData.__scratch__?.code??``,w=te(je),[T,E]=t(Ae),D=ee(h),O;e[0]!==w||e[1]!==C||e[2]!==m?(O=()=>{m({code:C}),w(C)},e[0]=w,e[1]=C,e[2]=m,e[3]=O):O=e[3];let k=r(O),A;e[4]!==C||e[5]!==l||e[6]!==c?(A=()=>{C.trim()&&l({code:C,before:!1,cellId:c??`__end__`})},e[4]=C,e[5]=l,e[6]=c,e[7]=A):A=e[7];let j=r(A),M;e[8]!==m||e[9]!==f?(M=()=>{f({cellId:o,code:``,formattingChange:!1}),m({code:``});let e=s.current;e&&e.dispatch({changes:{from:0,to:e.state.doc.length,insert:``}})},e[8]=m,e[9]=f,e[10]=M):M=e[10];let N=r(M),P;e[11]!==E||e[12]!==f?(P=e=>{E(!1),f({cellId:o,code:e,formattingChange:!1});let t=s.current;t&&t.dispatch({changes:{from:0,to:t.state.doc.length,insert:e}})},e[11]=E,e[12]=f,e[13]=P):P=e[13];let F=r(P),[I,Ne]=(0,p.useState)(),L;e[14]!==F||e[15]!==D||e[16]!==T||e[17]!==a?(L=()=>T?(0,g.jsx)(`div`,{className:`absolute inset-0 z-100 bg-background p-3 border-none overflow-auto`,children:(0,g.jsx)(`div`,{className:`overflow-auto flex flex-col gap-3`,children:D.map((e,t)=>(0,g.jsx)(`div`,{className:`border rounded-md hover:shadow-sm cursor-pointer hover:border-input overflow-hidden`,onClick:()=>F(e),children:(0,g.jsx)(p.Suspense,{children:(0,g.jsx)(pe,{language:`python`,theme:a,basicSetup:{highlightActiveLine:!1,highlightActiveLineGutter:!1},value:e.trim(),editable:!1,readOnly:!0})})},t))})}):null,e[14]=F,e[15]=D,e[16]=T,e[17]=a,e[18]=L):L=e[18];let R=L,z;e[19]!==N||e[20]!==j||e[21]!==k||e[22]!==D.length||e[23]!==T||e[24]!==E||e[25]!==x?(z=()=>(0,g.jsxs)(`div`,{className:`flex items-center shrink-0 border-b`,children:[(0,g.jsx)(u,{content:Ce(`cell.run`),children:(0,g.jsx)(d,{"data-testid":`scratchpad-run-button`,onClick:k,disabled:T,variant:`text`,size:`xs`,children:(0,g.jsx)(_e,{color:`var(--grass-11)`,size:16})})}),(0,g.jsx)(u,{content:`Clear code and outputs`,children:(0,g.jsx)(d,{disabled:T,size:`xs`,variant:`text`,onClick:N,children:(0,g.jsx)(De,{size:16})})}),(0,g.jsx)(Ee,{children:(0,g.jsx)(u,{content:`Insert code`,children:(0,g.jsx)(d,{disabled:T,size:`xs`,variant:`text`,onClick:j,children:(0,g.jsx)(fe,{size:16})})})}),(x===`running`||x===`queued`)&&(0,g.jsx)(ge,{className:`inline`,size:`small`}),(0,g.jsx)(`div`,{className:`flex-1`}),(0,g.jsx)(u,{content:`Toggle history`,children:(0,g.jsx)(d,{size:`xs`,variant:`text`,className:le(T&&`bg-(--sky-3) rounded-none`),onClick:()=>E(!T),disabled:D.length===0,children:(0,g.jsx)(Oe,{size:16})})}),(0,g.jsx)(u,{content:(0,g.jsx)(`span`,{className:`block max-w-prose`,children:`Use this scratchpad to experiment with code without restrictions on variable names. Variables defined here aren't saved to notebook memory, and the code is not saved in the notebook file.`}),children:(0,g.jsx)(d,{size:`xs`,variant:`text`,children:(0,g.jsx)(me,{size:16})})})]}),e[19]=N,e[20]=j,e[21]=k,e[22]=D.length,e[23]=T,e[24]=E,e[25]=x,e[26]=z):z=e[26];let B=z,Pe=_===`vertical`,V;e[27]===Symbol.for(`react.memo_cache_sentinel`)?(V=ae.create(o),e[27]=V):V=e[27];let H;e[28]===B?H=e[29]:(H=B(),e[28]=B,e[29]=H);let U;e[30]===Symbol.for(`react.memo_cache_sentinel`)?(U=e=>{s.current=e},e[30]=U):U=e[30];let W;e[31]!==C||e[32]!==k||e[33]!==I||e[34]!==a||e[35]!==i?(W=(0,g.jsx)(`div`,{className:`flex-1 overflow-auto`,children:(0,g.jsx)(he,{theme:a,showPlaceholder:!1,id:o,code:C,config:Me,status:`idle`,serializedEditorState:null,runCell:k,userConfig:i,editorViewRef:s,setEditorView:U,hidden:!1,showHiddenCode:se.NOOP,languageAdapter:I,setLanguageAdapter:Ne})}),e[31]=C,e[32]=k,e[33]=I,e[34]=a,e[35]=i,e[36]=W):W=e[36];let G;e[37]===R?G=e[38]:(G=R(),e[37]=R,e[38]=G);let K;e[39]!==G||e[40]!==H||e[41]!==W?(K=(0,g.jsx)(Se,{defaultSize:40,minSize:20,maxSize:70,children:(0,g.jsxs)(`div`,{className:`h-full flex flex-col overflow-hidden relative`,children:[H,W,G]})}),e[39]=G,e[40]=H,e[41]=W,e[42]=K):K=e[42];let q=Pe?`h-1`:`w-1`,J;e[43]===q?J=e[44]:(J=le(`bg-border hover:bg-primary/50 transition-colors`,q),e[43]=q,e[44]=J);let Y;e[45]===J?Y=e[46]:(Y=(0,g.jsx)(xe,{className:J}),e[45]=J,e[46]=Y);let X;e[47]===b?X=e[48]:(X=(0,g.jsx)(`div`,{className:`flex-1 overflow-auto`,children:(0,g.jsx)(ue,{allowExpand:!1,output:b,className:ce.outputArea,cellId:o,stale:!1,loading:!1})}),e[47]=b,e[48]=X);let Z;e[49]===S?Z=e[50]:(Z=(0,g.jsx)(`div`,{className:`overflow-auto shrink-0 max-h-[50%]`,children:(0,g.jsx)(de,{consoleOutputs:S,className:`overflow-auto`,stale:!1,interrupted:!1,cellName:`_`,onSubmitDebugger:se.NOOP,cellId:o,debuggerActive:!1})}),e[49]=S,e[50]=Z);let Q;e[51]!==X||e[52]!==Z?(Q=(0,g.jsx)(Se,{defaultSize:60,minSize:20,children:(0,g.jsxs)(`div`,{className:`h-full flex flex-col divide-y overflow-hidden`,children:[X,Z]})}),e[51]=X,e[52]=Z,e[53]=Q):Q=e[53];let $;return e[54]!==_||e[55]!==v||e[56]!==K||e[57]!==Y||e[58]!==Q?($=(0,g.jsx)(`div`,{className:`flex flex-col h-full overflow-hidden`,id:V,children:(0,g.jsxs)(be,{direction:_,className:`h-full`,children:[K,Y,Q]},v)}),e[54]=_,e[55]=v,e[56]=K,e[57]=Y,e[58]=Q,e[59]=$):$=e[59],$},v=()=>{let e=(0,ke.c)(1),t;return e[0]===Symbol.for(`react.memo_cache_sentinel`)?(t=(0,g.jsx)(_,{}),e[0]=t):t=e[0],t};export{v as default};