@marimo-team/frontend 0.25.3-dev95 → 0.25.3-dev97

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

@@ -219,6 +219,45 @@ describe("transitionCell serialization", () => {
   });
 });
 
+describe("transitionCell console output ids", () => {
+  const output = (
+    data: string,
+    channel: OutputMessage["channel"] = "stdout",
+  ): OutputMessage => ({
+    channel,
+    mimetype: "text/plain",
+    data,
+    timestamp: 0,
+  });
+
+  it("assigns increasing ids to appended outputs", () => {
+    let cell = createCellRuntimeState({ status: "running" });
+    cell = transitionCell(cell, { console: output("a") } as CellMessage);
+    cell = transitionCell(cell, {
+      console: output("b", "stderr"),
+    } as CellMessage);
+    expect(cell.consoleOutputs.map((o) => o.id)).toEqual([1, 2]);
+  });
+
+  it("continues from the surviving maximum after a collapse", () => {
+    let cell = createCellRuntimeState({ status: "running" });
+    cell = transitionCell(cell, { console: output("a") } as CellMessage);
+    cell = transitionCell(cell, { console: output("b") } as CellMessage);
+    expect(cell.consoleOutputs.map((o) => o.id)).toEqual([1]);
+    cell = transitionCell(cell, {
+      console: output("c", "stderr"),
+    } as CellMessage);
+    expect(cell.consoleOutputs.map((o) => o.id)).toEqual([1, 2]);
+  });
+
+  it("assigns ids when the kernel replaces the whole console", () => {
+    const cell = transitionCell(createCellRuntimeState({ status: "running" }), {
+      console: [output("a"), output("b", "stderr")],
+    } as CellMessage);
+    expect(cell.consoleOutputs.map((o) => o.id)).toEqual([1, 2]);
+  });
+});
+
 describe("transitionCell stdin resolution", () => {
   describe.each([
     {

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/core/codemirror/language/panel/panel.tsx

@@ -101,6 +101,7 @@ export const LanguagePanelComponent: React.FC<{
           {metadata.engine === DUCKDB_ENGINE && <SQLModeSelect />}
           <Tooltip content="Format SQL">
             <Button
+              aria-label="Format SQL"
               variant="text"
               size="icon"
               onClick={async () => {

package/src/plugins/impl/RefreshPlugin.tsx

@@ -119,6 +119,7 @@ const RefreshComponent = ({ setValue, data }: IPluginProps<Value, Data>) => {
     <Labeled label={data.label}>
       <span className="inline-flex items-center text-secondary-foreground rounded shadow-sm-solid">
         <Button
+          aria-label="Refresh"
           data-testid="marimo-plugin-refresh-button"
           variant="secondary"
           size="icon"

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

@@ -441,6 +441,7 @@ export const Chatbot: React.FC<Props> = (props) => {
     >
       <div className="absolute top-0 right-0 flex justify-end z-10 border border-(--slate-6) bg-inherit rounded-bl-lg">
         <Button
+          aria-label="Reset chat"
           variant="text"
           size="icon"
           disabled={messages.length === 0}
@@ -471,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/src/stories/button.stories.tsx

@@ -78,6 +78,7 @@ export const Loading = {
 export const TrashIcon = {
   render: () => (
     <Button
+      aria-label="Delete"
       variant="ghost"
       size="icon"
       className="hover:bg-transparent hover:border-input"

package/dist/assets/column-preview-DXM8SqGY.js

@@ -1 +0,0 @@
-import{a as e}from"./rolldown-runtime-B0Z9INg1.js";import{l as t}from"./useEvent-BDjgaBtz.js";import{t as n}from"./react-DVplv7_D.js";import{D as r,Gi as i,Rt as a,Xi as o,Yi as s,zt as c}from"./cells-yOs72eZm.js";import{t as l}from"./compiler-runtime-BrajqUja.js";import{s as u}from"./config-DpY86_Yq.js";import{t as d}from"./jsx-runtime-B74pBk57.js";import{l as f,p,vt as m}from"./JsonOutput-Csbov8Fx.js";import{t as h}from"./tooltip-CkGm8X7m.js";import{r as g,t as _}from"./button-D8gVKwe-.js";import{t as v}from"./createLucideIcon-DfJ2oMlA.js";import{t as y}from"./useLifecycle-Mq4gc5kS.js";import{t as b}from"./spinner-DyNE-o8o.js";import{t as x}from"./copy-icon-8-a5vovc.js";import{r as S}from"./requests-BIFR-h4M.js";import{r as C}from"./useTheme-BAA27lh7.js";import{t as w}from"./I18nProvider-Cg2I_s1_.js";import{i as T}from"./numbers-CsZVw3Dc.js";var E=v(`square-plus`,[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,key:`afitv7`}],[`path`,{d:`M8 12h8`,key:`1wcyev`}],[`path`,{d:`M12 8v8`,key:`napkw2`}]]),D=l(),O=e(n(),1),k=d(),A=e=>{let t=(0,D.c)(53),{table:n,column:r,preview:i,onAddColumnChart:a,sqlTableContext:c}=e,{theme:l}=C(),{previewDatasetColumn:u}=S(),{locale:d}=w(),f;t[0]!==r.name||t[1]!==u||t[2]!==c||t[3]!==n.name||t[4]!==n.source||t[5]!==n.source_type?(f=()=>{u({source:n.source,tableName:n.name,columnName:r.name,sourceType:n.source_type,fullyQualifiedTableName:o(c,n.name)})},t[0]=r.name,t[1]=u,t[2]=c,t[3]=n.name,t[4]=n.source,t[5]=n.source_type,t[6]=f):f=t[6];let m=f,v;if(t[7]!==i||t[8]!==m||t[9]!==n.source_type?(v=()=>{i||n.source_type!==`connection`&&n.source_type!==`catalog`&&m()},t[7]=i,t[8]=m,t[9]=n.source_type,t[10]=v):v=t[10],y(v),n.source_type===`connection`){let e=r.name,i=r.external_type,o;t[11]!==r.name||t[12]!==a||t[13]!==c||t[14]!==n?(o=g.stopPropagation(()=>{a(s({table:n,columnName:r.name,sqlTableContext:c}))}),t[11]=r.name,t[12]=a,t[13]=c,t[14]=n,t[15]=o):o=t[15];let l;t[16]===Symbol.for(`react.memo_cache_sentinel`)?(l=(0,k.jsx)(E,{className:`h-3 w-3 mr-1`}),t[16]=l):l=t[16];let u;t[17]===o?u=t[18]:(u=(0,k.jsxs)(_,{variant:`outline`,size:`xs`,onClick:o,children:[l,` Add SQL cell`]}),t[17]=o,t[18]=u);let d;return t[19]!==r.external_type||t[20]!==r.name||t[21]!==u?(d=(0,k.jsxs)(`span`,{className:`text-xs text-muted-foreground gap-2 flex items-center justify-between pl-7`,children:[e,` (`,i,`)`,u]}),t[19]=r.external_type,t[20]=r.name,t[21]=u,t[22]=d):d=t[22],d}if(n.source_type===`catalog`){let e;return t[23]!==r.external_type||t[24]!==r.name?(e=(0,k.jsxs)(`span`,{className:`text-xs text-muted-foreground gap-2 flex items-center justify-between pl-7`,children:[r.name,` (`,r.external_type,`)`]}),t[23]=r.external_type,t[24]=r.name,t[25]=e):e=t[25],e}if(!i){let e;return t[26]===Symbol.for(`react.memo_cache_sentinel`)?(e=(0,k.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:`Loading...`}),t[26]=e):e=t[26],e}let b;t[27]!==i.error||t[28]!==i.missing_packages||t[29]!==m?(b=i.error&&j({error:i.error,missingPackages:i.missing_packages,refetchPreview:m}),t[27]=i.error,t[28]=i.missing_packages,t[29]=m,t[30]=b):b=t[30];let x=b,T;t[31]!==r.type||t[32]!==d||t[33]!==i.stats?(T=i.stats&&M({stats:i.stats,dataType:r.type,locale:d}),t[31]=r.type,t[32]=d,t[33]=i.stats,t[34]=T):T=t[34];let O=T,A;t[35]!==i.chart_spec||t[36]!==l?(A=i.chart_spec&&P(i.chart_spec,l),t[35]=i.chart_spec,t[36]=l,t[37]=A):A=t[37];let N=A,I;t[38]!==i.chart_code||t[39]!==n.source_type?(I=i.chart_code&&n.source_type===`local`&&(0,k.jsx)(F,{chartCode:i.chart_code}),t[38]=i.chart_code,t[39]=n.source_type,t[40]=I):I=t[40];let L=I,R;t[41]!==r.name||t[42]!==a||t[43]!==c||t[44]!==n?(R=n.source_type===`duckdb`&&(0,k.jsx)(h,{content:`Add SQL cell`,delayDuration:400,children:(0,k.jsx)(_,{variant:`outline`,size:`icon`,className:`z-10 bg-background absolute right-1 -top-1`,onClick:g.stopPropagation(()=>{a(s({table:n,columnName:r.name,sqlTableContext:c}))}),children:(0,k.jsx)(E,{className:`h-3 w-3`})})}),t[41]=r.name,t[42]=a,t[43]=c,t[44]=n,t[45]=R):R=t[45];let z=R;if(!x&&!O&&!N){let e;return t[46]===Symbol.for(`react.memo_cache_sentinel`)?(e=(0,k.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:`No data`}),t[46]=e):e=t[46],e}let B;return t[47]!==L||t[48]!==z||t[49]!==N||t[50]!==x||t[51]!==O?(B=(0,k.jsxs)(p,{children:[x,L,z,N,O]}),t[47]=L,t[48]=z,t[49]=N,t[50]=x,t[51]=O,t[52]=B):B=t[52],B};function j({error:e,missingPackages:t,refetchPreview:n}){return(0,k.jsxs)(`div`,{className:`text-xs text-muted-foreground p-2 border border-border rounded flex items-center justify-between`,children:[(0,k.jsx)(`span`,{children:e}),t&&(0,k.jsx)(f,{packages:t,showMaxPackages:1,className:`w-32`,onInstall:n})]})}function M({stats:e,dataType:t,locale:n}){return(0,k.jsx)(`div`,{className:`gap-x-16 gap-y-1 grid grid-cols-2-fit border rounded p-2 empty:hidden`,children:Object.entries(e).map(([e,r])=>r==null?null:(0,k.jsxs)(`div`,{className:`flex items-center gap-1 group`,children:[(0,k.jsx)(`span`,{className:`text-xs min-w-[60px] capitalize`,children:i(e,t)}),(0,k.jsx)(`span`,{className:`text-xs font-bold text-muted-foreground tracking-wide`,children:T(r,n)}),(0,k.jsx)(x,{className:`h-3 w-3 invisible group-hover:visible`,value:String(r)})]},e))})}var N=(0,k.jsx)(`div`,{className:`flex justify-center`,children:(0,k.jsx)(b,{className:`size-4`})});function P(e,t){return(0,k.jsx)(O.Suspense,{fallback:N,children:(0,k.jsx)(m,{"data-container-width":`container`,spec:(e=>({...e,background:`transparent`,config:{...e.config,background:`transparent`}}))(JSON.parse(e)),options:{theme:t===`dark`?`dark`:`vox`,height:100,width:`container`,actions:!1,renderer:`canvas`}})})}var F=e=>{let n=(0,D.c)(10),{chartCode:i}=e,o=t(u),s=a(),{createNewCell:l}=r(),d;n[0]!==o||n[1]!==l||n[2]!==s?(d=e=>{e.includes(`alt`)&&c({autoInstantiate:o,createNewCell:l,fromCellId:s}),l({code:e,before:!1,cellId:s??`__end__`})},n[0]=o,n[1]=l,n[2]=s,n[3]=d):d=n[3];let f=d,p;n[4]!==i||n[5]!==f?(p=g.stopPropagation(()=>f(i)),n[4]=i,n[5]=f,n[6]=p):p=n[6];let m;n[7]===Symbol.for(`react.memo_cache_sentinel`)?(m=(0,k.jsx)(E,{className:`h-3 w-3`}),n[7]=m):m=n[7];let v;return n[8]===p?v=n[9]:(v=(0,k.jsx)(h,{content:`Add chart to notebook`,delayDuration:400,children:(0,k.jsx)(_,{variant:`outline`,size:`icon`,className:`z-10 bg-background absolute right-1 -top-0.5`,onClick:p,children:m})}),n[8]=p,n[9]=v),v};export{M as a,j as i,A as n,E as o,P as r,F as t};

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

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