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

package/dist/assets/{useRunCells-BV6nl_Ok.js → useRunCells-ByaWxoIt.js}

@@ -1 +1 @@
-import{f as e,t,u as n}from"./useEvent-BDjgaBtz.js";import{D as r,da as i,dt as a,h as o,ia as s,ri as c}from"./cells-B23_t5uX.js";import{t as l}from"./compiler-runtime-BrajqUja.js";import{g as u}from"./useEventListener-CjDeLqFC.js";import{o as d}from"./dist-qhAY4L2r.js";import{r as f}from"./requests-BIFR-h4M.js";var p=l(),m=e(!1);function h(){let e=(0,p.c)(2),n=v(),r;return e[0]===n?r=e[1]:(r=()=>n(i(o())),e[0]=n,e[1]=r),t(r)}function g(e){let n=(0,p.c)(3),r=v(),i;return n[0]!==e||n[1]!==r?(i=()=>{e!==void 0&&r([e])},n[0]=e,n[1]=r,n[2]=i):i=n[2],t(i)}function _(){let e=(0,p.c)(2),n=v(),r;return e[0]===n?r=e[1]:(r=()=>n(s(o())),e[0]=n,e[1]=r),t(r)}function v(){let e=(0,p.c)(4),{prepareForRun:i}=r(),{sendRun:a}=f(),s=n(m),c;return e[0]!==i||e[1]!==a||e[2]!==s?(c=async e=>{if(e.length===0)return;let t=o();return s(!0),y({cellIds:e,sendRun:a,prepareForRun:i,notebook:t})},e[0]=i,e[1]=a,e[2]=s,e[3]=c):c=e[3],t(c)}async function y({cellIds:e,sendRun:t,prepareForRun:n,notebook:r}){if(e.length===0)return;let{cellHandles:i,cellData:o}=r,s=[];for(let t of e){let e=i[t]?.current?.editorView,r;e?(c(e)!==`markdown`&&d(e),r=a(e)):r=o[t]?.code||``,s.push(r),n({cellId:t})}await t({cellIds:e,codes:s}).catch(e=>{u.error(e)})}export{v as a,g as i,y as n,h as o,_ as r,m as t};
+import{f as e,t,u as n}from"./useEvent-BDjgaBtz.js";import{D as r,da as i,dt as a,h as o,ia as s,ri as c}from"./cells-D_11MjVB.js";import{t as l}from"./compiler-runtime-BrajqUja.js";import{g as u}from"./useEventListener-CjDeLqFC.js";import{o as d}from"./dist-qhAY4L2r.js";import{r as f}from"./requests-BIFR-h4M.js";var p=l(),m=e(!1);function h(){let e=(0,p.c)(2),n=v(),r;return e[0]===n?r=e[1]:(r=()=>n(i(o())),e[0]=n,e[1]=r),t(r)}function g(e){let n=(0,p.c)(3),r=v(),i;return n[0]!==e||n[1]!==r?(i=()=>{e!==void 0&&r([e])},n[0]=e,n[1]=r,n[2]=i):i=n[2],t(i)}function _(){let e=(0,p.c)(2),n=v(),r;return e[0]===n?r=e[1]:(r=()=>n(s(o())),e[0]=n,e[1]=r),t(r)}function v(){let e=(0,p.c)(4),{prepareForRun:i}=r(),{sendRun:a}=f(),s=n(m),c;return e[0]!==i||e[1]!==a||e[2]!==s?(c=async e=>{if(e.length===0)return;let t=o();return s(!0),y({cellIds:e,sendRun:a,prepareForRun:i,notebook:t})},e[0]=i,e[1]=a,e[2]=s,e[3]=c):c=e[3],t(c)}async function y({cellIds:e,sendRun:t,prepareForRun:n,notebook:r}){if(e.length===0)return;let{cellHandles:i,cellData:o}=r,s=[];for(let t of e){let e=i[t]?.current?.editorView,r;e?(c(e)!==`markdown`&&d(e),r=a(e)):r=o[t]?.code||``,s.push(r),n({cellId:t})}await t({cellIds:e,codes:s}).catch(e=>{u.error(e)})}export{v as a,g as i,y as n,h as o,_ as r,m as t};

package/dist/assets/{useSplitCell-Ca364Rrx.js → useSplitCell-YJIystwv.js}

@@ -1 +1 @@
-import{t as e}from"./useEvent-BDjgaBtz.js";import{D as t,dt as n,f as r}from"./cells-B23_t5uX.js";import{t as i}from"./compiler-runtime-BrajqUja.js";import{t as a}from"./jsx-runtime-B74pBk57.js";import{r as o}from"./useDeleteCell-BPQ6Xcbj.js";import{t as s}from"./use-toast-Wu434mLr.js";var c=i(),l=a();function u(){let i=(0,c.c)(3),{splitCell:a,undoSplitCell:u}=t(),d;return i[0]!==a||i[1]!==u?(d=e=>{let t=r(e.cellId);if(!t)return;let i=n(t);a(e);let{dismiss:c}=s({title:`Cell split`,action:(0,l.jsx)(o,{"data-testid":`undo-split-button`,size:`sm`,variant:`outline`,onClick:()=>{u({...e,snapshot:i}),d()},children:`Undo`})}),d=c},i[0]=a,i[1]=u,i[2]=d):d=i[2],e(d)}export{u as t};
+import{t as e}from"./useEvent-BDjgaBtz.js";import{D as t,dt as n,f as r}from"./cells-D_11MjVB.js";import{t as i}from"./compiler-runtime-BrajqUja.js";import{t as a}from"./jsx-runtime-B74pBk57.js";import{r as o}from"./useDeleteCell-BC-MW7d1.js";import{t as s}from"./use-toast-Wu434mLr.js";var c=i(),l=a();function u(){let i=(0,c.c)(3),{splitCell:a,undoSplitCell:u}=t(),d;return i[0]!==a||i[1]!==u?(d=e=>{let t=r(e.cellId);if(!t)return;let i=n(t);a(e);let{dismiss:c}=s({title:`Cell split`,action:(0,l.jsx)(o,{"data-testid":`undo-split-button`,size:`sm`,variant:`outline`,onClick:()=>{u({...e,snapshot:i}),d()},children:`Undo`})}),d=c},i[0]=a,i[1]=u,i[2]=d):d=i[2],e(d)}export{u as t};

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-YQHSwyF3.js"></script>
+    <script type="module" crossorigin src="./assets/index-vCxv6WVQ.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/rolldown-runtime-B0Z9INg1.js">
     <link rel="modulepreload" crossorigin href="./assets/react-DVplv7_D.js">
     <link rel="modulepreload" crossorigin href="./assets/compiler-runtime-BrajqUja.js">
@@ -139,7 +139,7 @@
     <link rel="modulepreload" crossorigin href="./assets/useTheme-BAA27lh7.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-qvoPYHtx.js">
     <link rel="modulepreload" crossorigin href="./assets/purify.es--06brOip.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-B23_t5uX.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-D_11MjVB.js">
     <link rel="modulepreload" crossorigin href="./assets/coerce-DWjFeXOY.js">
     <link rel="modulepreload" crossorigin href="./assets/get-DjNf4SIX.js">
     <link rel="modulepreload" crossorigin href="./assets/_hasPath-BmRQipI0.js">
@@ -154,40 +154,40 @@
     <link rel="modulepreload" crossorigin href="./assets/copy-KlhazlhB.js">
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-D9Dr-k4J.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-YOKDWASO-BIpRENEC.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-C5aIPuRT.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-BWUzqkJM.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-Djr5m5ac.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-icon-8-a5vovc.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-BV6nl_Ok.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-DwolbpuI.js">
-    <link rel="modulepreload" crossorigin href="./assets/blob-CuL-H1JC.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-ByaWxoIt.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-DQvxDDNS.js">
+    <link rel="modulepreload" crossorigin href="./assets/blob-5VcB8K_t.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-pdKBv96t.js">
     <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-wcDq9hYT.js">
     <link rel="modulepreload" crossorigin href="./assets/share-BZW3tzEX.js">
     <link rel="modulepreload" crossorigin href="./assets/events-CbeVJ6OD.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-BRL89qqy.js">
-    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-DBQW23V4.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-Bl9BiY_s.js">
+    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-CAEGdoFW.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-eAtVhbNZ.js">
     <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-DS6umAnH.js">
     <link rel="modulepreload" crossorigin href="./assets/html-to-image-D_0rd3_B.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-Cm3InGht.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-dK52bLxZ.js">
     <link rel="modulepreload" crossorigin href="./assets/switch-DYjBfpNJ.js">
     <link rel="modulepreload" crossorigin href="./assets/tabs-CY8E4r9U.js">
     <link rel="modulepreload" crossorigin href="./assets/table-DG7Ap4H4.js">
     <link rel="modulepreload" crossorigin href="./assets/eye-off-CxVozGAC.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-cw-Qw1f8Jhy.js">
-    <link rel="modulepreload" crossorigin href="./assets/tree-actions-DoPCJTpj.js">
+    <link rel="modulepreload" crossorigin href="./assets/tree-actions-BZNTQ12N.js">
     <link rel="modulepreload" crossorigin href="./assets/ellipsis-63DyBLHQ.js">
     <link rel="modulepreload" crossorigin href="./assets/external-link-UrX9KO36.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-DyNE-o8o.js">
     <link rel="modulepreload" crossorigin href="./assets/message-circle-C3rKm8_a.js">
     <link rel="modulepreload" crossorigin href="./assets/hat-glasses-C8RhSVii.js">
     <link rel="modulepreload" crossorigin href="./assets/package-GSoSTiIK.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-Qo_t5PqI.js">
-    <link rel="modulepreload" crossorigin href="./assets/error-entries-DEkB-8EY.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-deuXnlU-.js">
+    <link rel="modulepreload" crossorigin href="./assets/error-entries-3GVk2KjS.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-DTaqCu_d.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-BoRCcWOg.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-C9tkvy6x.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-DAFgeK_G.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-Dv059B3A.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-C5yYyzuF.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-CgZvP0p0.js">
     <link rel="modulepreload" crossorigin href="./assets/useDateFormatter-DA-62E-Y.js">
     <link rel="modulepreload" crossorigin href="./assets/en-US-Buu61juQ.js">
     <link rel="modulepreload" crossorigin href="./assets/isValid-q_Ad80ug.js">
@@ -207,7 +207,7 @@
     <link rel="modulepreload" crossorigin href="./assets/table-vrvqpuKJ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-Dbe0MrFr.js">
     <link rel="modulepreload" crossorigin href="./assets/useStateForKey-CGMJQT8x.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-nLzWQ-0V.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-CyAKmZDD.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-C4_v6fQW.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-_W_Lo0P4.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-uCpVvaAR.js">
@@ -221,11 +221,11 @@
     <link rel="modulepreload" crossorigin href="./assets/file-icons-CdJgUy-I.js">
     <link rel="modulepreload" crossorigin href="./assets/globe-UdPdIbF7.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-CI_o7NhW.js">
-    <link rel="modulepreload" crossorigin href="./assets/useAddCell-DKb7o70l.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-CVwB1OHZ.js">
+    <link rel="modulepreload" crossorigin href="./assets/useAddCell-Cjuqk2YR.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-RFuQP50v.js">
     <link rel="modulepreload" crossorigin href="./assets/data-grid-types-DgHVN_Zz.js">
     <link rel="modulepreload" crossorigin href="./assets/glide-utils-HFqhvWHI.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-BUQ_YMaE.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-xe533-Cn.js">
     <link rel="modulepreload" crossorigin href="./assets/square-BPmgQFnh.js">
     <link rel="modulepreload" crossorigin href="./assets/triangle-alert-DmIqR8sY.js">
     <link rel="modulepreload" crossorigin href="./assets/prop-types-Djf4O40e.js">
@@ -238,7 +238,7 @@
     <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-B2DVK2De.js">
     <link rel="modulepreload" crossorigin href="./assets/useDelayElapsed-BlsDT4TV.js">
     <link rel="modulepreload" crossorigin href="./assets/pathUtils-DPmlLd-r.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-C7MSAu6q.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-ChmAuvxz.js">
     <link rel="stylesheet" crossorigin href="./assets/cells-0PFKL3SH.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DjIHoF9Z.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-B0GmlMnR.css">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.25.3-dev96",
+  "version": "0.25.3-dev97",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/chat/acp/blocks.tsx

@@ -328,9 +328,9 @@ export const PlansBlock = (props: { data: PlanNotificationEvent[] }) => {
         </span>
       </div>
       <ul className="flex flex-col gap-1">
-        {plans.map((item, index) => (
+        {plans.map((item) => (
           <li
-            key={`${item.status}-${index}`}
+            key={item.content}
             className={`
               flex items-center gap-2 px-2 py-1 rounded
             `}

package/src/components/data-table/charts/__tests__/chart-panel.test.tsx

@@ -10,13 +10,27 @@ import { cellId } from "@/__tests__/branded";
 import { LazyVegaEmbed } from "@/components/charts/lazy";
 import { vegaLoader } from "@/plugins/impl/vega/loader";
 import { ChartPanel, TablePanel, type TablePanelProps } from "../charts";
-import { getChartTabName, tabsStorageAtom } from "../storage";
+import { createTabId, getChartTabName, tabsStorageAtom } from "../storage";
 import { ChartType, NONE_VALUE } from "../types";
+import { TOO_MANY_ROWS } from "../../types";
 
 vi.mock("@/components/charts/lazy", () => ({
   LazyVegaEmbed: vi.fn(() => null),
 }));
 
+vi.mock("../components/chart-items", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../components/chart-items")>()),
+  ChartTypeSelect: ({
+    onValueChange,
+  }: {
+    onValueChange: (value: string) => void;
+  }) => (
+    <button type="button" onClick={() => onValueChange("line")}>
+      Change chart type
+    </button>
+  ),
+}));
+
 beforeAll(() => {
   SetupMocks.resizeObserver();
 });
@@ -38,6 +52,7 @@ describe("ChartPanel", () => {
             id,
             [
               {
+                id: createTabId(),
                 tabName,
                 chartType: ChartType.BAR,
                 config: {
@@ -283,4 +298,62 @@ describe("ChartPanel", () => {
       });
     },
   );
+  it("keeps panel state when a chart type change renames the tab", async () => {
+    const store = createStore();
+    const id = cellId("rename-keeps-state");
+    const tabName = getChartTabName(0, ChartType.BAR);
+    store.set(
+      tabsStorageAtom,
+      new Map([
+        [
+          id,
+          [
+            {
+              id: createTabId(),
+              tabName,
+              chartType: ChartType.BAR,
+              config: {
+                general: {
+                  xColumn: { field: "value", type: "number" },
+                  yColumn: {
+                    field: "value",
+                    type: "integer",
+                    aggregate: NONE_VALUE,
+                  },
+                },
+              },
+            },
+          ],
+        ],
+      ]),
+    );
+    const sample = [{ value: 1 }];
+    const props: TablePanelProps = {
+      cellId: id,
+      data: sample,
+      dataTable: <div />,
+      totalRows: TOO_MANY_ROWS,
+      columns: 1,
+      displayHeader: true,
+      fieldTypes: [["value", ["number", "float64"]]],
+    };
+    const { getByRole, findByRole, queryByRole } = render(
+      <Provider store={store}>
+        <Tooltip.Provider>
+          <TablePanel {...props} />
+        </Tooltip.Provider>
+      </Provider>,
+    );
+    fireEvent.click(getByRole("tab", { name: tabName }));
+    fireEvent.click(await findByRole("button", { name: "Proceed" }));
+    await waitFor(() => {
+      expect(queryByRole("button", { name: "Proceed" })).toBeNull();
+    });
+
+    fireEvent.click(getByRole("button", { name: "Change chart type" }));
+
+    const renamed = getChartTabName(0, ChartType.LINE);
+    await findByRole("tab", { name: renamed });
+    expect(queryByRole("button", { name: "Proceed" })).toBeNull();
+  });
 });

package/src/components/data-table/charts/__tests__/storage.test.ts

@@ -16,7 +16,7 @@ import { cellId } from "@/__tests__/branded";
 import { availableStorage } from "@/utils/storage/storage";
 import { ChartSchema } from "../schemas";
 import type { TabName } from "../storage";
-import { KEY, tabsStorageAtom } from "../storage";
+import { createTabId, KEY, tabsStorageAtom } from "../storage";
 import { ChartType } from "../types";
 
 describe("Chart Transforms Storage", () => {
@@ -39,6 +39,7 @@ describe("Chart Transforms Storage", () => {
       const store = getDefaultStore();
       const cid = cellId("cell-1");
       const tabData = {
+        id: createTabId(),
         tabName: "Tab 1" as TabName,
         chartType: ChartType.LINE,
         config: ChartSchema.parse({
@@ -63,6 +64,7 @@ describe("Chart Transforms Storage", () => {
       const store = getDefaultStore();
       const cid = cellId("cell-1");
       const tabData1 = {
+        id: createTabId(),
         tabName: "Tab 1" as TabName,
         chartType: ChartType.LINE,
         config: ChartSchema.parse({
@@ -73,6 +75,7 @@ describe("Chart Transforms Storage", () => {
         }),
       };
       const tabData2 = {
+        id: createTabId(),
         tabName: "Tab 2" as TabName,
         chartType: ChartType.BAR,
         config: ChartSchema.parse({

package/src/components/data-table/charts/charts.tsx

@@ -48,7 +48,12 @@ import { HeatmapForm } from "./forms/heatmap";
 import { PieForm } from "./forms/pie";
 import { LazyChart } from "./lazy-chart";
 import { ChartSchema, type ChartSchemaType, getChartDefaults } from "./schemas";
-import { getChartTabName, type TabName, tabsStorageAtom } from "./storage";
+import {
+  createTabId,
+  getChartTabName,
+  type TabName,
+  tabsStorageAtom,
+} from "./storage";
 import { ChartType } from "./types";
 
 const NEW_CHART_TYPE = "bar" as ChartType;
@@ -114,7 +119,12 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     const tabName = getChartTabName(0, NEW_CHART_TYPE);
     const newTabs = new Map(tabsMap);
     newTabs.set(cellId, [
-      { tabName, chartType: NEW_CHART_TYPE, config: getChartDefaults() },
+      {
+        id: createTabId(),
+        tabName,
+        chartType: NEW_CHART_TYPE,
+        config: getChartDefaults(),
+      },
     ]);
     saveTabsMap(newTabs);
     setTabCounter(1);
@@ -135,6 +145,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     newTabs.set(cellId, [
       ...tabs,
       {
+        id: createTabId(),
         tabName,
         chartType: NEW_CHART_TYPE,
         config: getChartDefaults(),
@@ -233,9 +244,9 @@ export const TablePanel: React.FC<TablePanelProps> = ({
         >
           Table
         </TabsTrigger>
-        {tabs.map((tab, idx) => (
+        {tabs.map((tab) => (
           <TabsTrigger
-            key={idx}
+            key={tab.id}
             className="text-xs"
             value={tab.tabName}
             onClick={() => setSelectedTab(tab.tabName)}
@@ -263,7 +274,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
       <TabsContent className="mt-1 overflow-hidden" value={DEFAULT_TAB_NAME}>
         {dataTable}
       </TabsContent>
-      {tabs.map((tab, idx) => {
+      {tabs.map((tab) => {
         const saveChart = (formValues: ChartSchemaType) => {
           saveTabChart({
             tabName: tab.tabName,
@@ -275,7 +286,11 @@ export const TablePanel: React.FC<TablePanelProps> = ({
           saveTabChartType(tab.tabName, chartType);
         };
         return (
-          <TabsContent key={idx} value={tab.tabName} className="h-[400px] mt-0">
+          <TabsContent
+            key={tab.id}
+            value={tab.tabName}
+            className="h-[400px] mt-0"
+          >
             <ChartPanel
               tableData={data}
               chartConfig={tab.config}

package/src/components/data-table/charts/storage.ts

@@ -7,13 +7,16 @@ import { Logger } from "@/utils/Logger";
 import { NotebookScopedLocalStorage } from "@/utils/storage/typed";
 import { capitalize } from "@/utils/strings";
 import type { TypedString } from "@/utils/typed";
+import { generateUUID } from "@/utils/uuid";
 import { ChartSchema, type ChartSchemaType } from "./schemas";
 import type { ChartType } from "./types";
 
 export type TabName = TypedString<"TabName">;
+export type TabId = TypedString<"TabId">;
 export const KEY = "marimo:charts:v2";
 
 interface TabStorage {
+  id: TabId;
   tabName: TabName; // unique within cell
   chartType: ChartType;
   config: ChartSchemaType;
@@ -21,11 +24,15 @@ interface TabStorage {
 
 type TabStorageMap = Map<CellId, TabStorage[]>;
 
-const TabStorageSchema = z.object({
-  tabName: z.string().transform((name) => name as TabName),
-  chartType: z.string().transform((type) => type as ChartType),
-  config: ChartSchema,
-});
+const TabStorageSchema = z
+  .object({
+    id: z.string().optional(),
+    tabName: z.string().transform((name) => name as TabName),
+    chartType: z.string().transform((type) => type as ChartType),
+    config: ChartSchema,
+  })
+  // Stored tabs without an id use their name, which is unique within a cell.
+  .transform((tab) => ({ ...tab, id: (tab.id ?? tab.tabName) as TabId }));
 const TabStorageEntriesSchema = z.array(
   z.tuple([
     z.string().transform((name) => name as CellId),
@@ -64,6 +71,10 @@ export const tabsStorageAtom = atomWithStorage<TabStorageMap>(
   mapStorage,
 );
 
+export function createTabId(): TabId {
+  return generateUUID() as TabId;
+}
+
 /**
  * Convenience function to get the tab name for a given tab number and chart type
  */

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;
 };
 
 /**
@@ -369,6 +370,7 @@ export class StatefulOutputMessage implements OutputMessage {
   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;
 
@@ -385,6 +387,7 @@ export class StatefulOutputMessage implements OutputMessage {
       message.timestamp,
       ansiReducer,
       message.code,
+      message.id,
     );
   }
 
@@ -394,11 +397,13 @@ export class StatefulOutputMessage implements OutputMessage {
     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();
   }
@@ -411,6 +416,7 @@ export class StatefulOutputMessage implements OutputMessage {
       this.timestamp,
       this.ansiReducer,
       this.code,
+      this.id,
     );
   }
 

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

@@ -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,
@@ -73,7 +72,7 @@ interface Props {
   cellId: CellId;
   cellName: string;
   className?: string;
-  consoleOutputs: WithResponse<OutputMessage>[];
+  consoleOutputs: ConsoleOutputMessage[];
   stale: boolean;
   interrupted: boolean;
   debuggerActive: boolean;
@@ -241,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}
@@ -268,7 +272,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
 
             return (
               <StdInputWithResponse
-                key={idx}
+                key={key}
                 output={output.data}
                 response={output.response}
                 isPassword={isPassword}
@@ -278,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

@@ -172,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>
@@ -296,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",
@@ -307,7 +307,7 @@ export const PackageAlert: React.FC = () => {
                       status === "failed" &&
                       "text-muted-foreground",
                   )}
-                  key={index}
+                  key={pkg}
                 >
                   <ProgressIcon status={st} />
                   {pkg}

package/src/components/scratchpad/scratchpad.tsx

@@ -135,9 +135,9 @@ export const ScratchPad: React.FC = () => {
     return (
       <div className="absolute inset-0 z-100 bg-background p-3 border-none overflow-auto">
         <div className="overflow-auto flex flex-col gap-3">
-          {history.map((item, index) => (
+          {history.map((item) => (
             <div
-              key={index}
+              key={item}
               className="border rounded-md hover:shadow-sm cursor-pointer hover:border-input overflow-hidden"
               onClick={() => handleSelectHistoryItem(item)}
             >

package/src/components/slides/reveal-component.tsx

@@ -404,13 +404,15 @@ const SubslideView = ({
             if (block.isFragment) {
               const cumulative = cumulativeByBlock.get(i);
               return (
-                <Fragment key={i} as="div">
+                <Fragment key={block.cells[0].id} as="div">
                   {rendered}
                   {cumulative && <NotesAside text={cumulative} />}
                 </Fragment>
               );
             }
-            return <ReactFragment key={i}>{rendered}</ReactFragment>;
+            return (
+              <ReactFragment key={block.cells[0].id}>{rendered}</ReactFragment>
+            );
           })}
         </div>
       </SlideScrollContainer>

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

@@ -139,6 +139,7 @@ exports[`cell reducer > can initialize stdin > second stdin requested 1`] = `
     {
       "channel": "stdin",
       "data": "what is your name?",
+      "id": 2,
       "mimetype": "text/plain",
       "response": "Marimo!",
       "timestamp": 2,
@@ -146,6 +147,7 @@ exports[`cell reducer > can initialize stdin > second stdin requested 1`] = `
     {
       "channel": "stdin",
       "data": "how old are you?",
+      "id": 3,
       "mimetype": "text/plain",
       "timestamp": 3,
     },
@@ -189,6 +191,7 @@ exports[`cell reducer > can initialize stdin > stdin answered 1`] = `
     {
       "channel": "stdin",
       "data": "what is your name?",
+      "id": 2,
       "mimetype": "text/plain",
       "response": "Marimo!",
       "timestamp": 2,
@@ -233,6 +236,7 @@ exports[`cell reducer > can initialize stdin > stdin requested 1`] = `
     {
       "channel": "stdin",
       "data": "what is your name?",
+      "id": 2,
       "mimetype": "text/plain",
       "timestamp": 2,
     },

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([
     {