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

package/dist/{number-overlay-editor-DdzFRhUf.js → number-overlay-editor-CDufNBLN.js}

@@ -1,6 +1,6 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-sHtZdjeP.js";
-import { a as n } from "./glide-data-editor-D2mdZ_2N.js";
+import { a as n } from "./glide-data-editor-BBDo3Rj6.js";
 //#region ../node_modules/.pnpm/@glideapps+glide-data-grid@6.0.4-alpha24_lodash@4.17.21_marked@15.0.12_react-dom@19.3.0_27cffe7f1bc30287d59ac27db3240c5b/node_modules/@glideapps/glide-data-grid/dist/esm/internal/data-grid-overlay-editor/private/number-overlay-editor-style.js
 var r = /* @__PURE__ */ e(t()), i = /*#__PURE__*/ n("div")({
 	name: "NumberOverlayEditorStyle",

package/dist/{process-output-ByXe3l6a.js → process-output-DD-oSvZk.js}

@@ -1,6 +1,6 @@
-import { O as e } from "./html-to-image-D00_TX1M.js";
+import { O as e } from "./html-to-image-CWdayGZU.js";
 import { h as t } from "./tooltip-CKO1pHJo.js";
-import { C as n, w as r } from "./error-entries-Cq0m-sO5.js";
+import { C as n, w as r } from "./error-entries-TAO6kEhF.js";
 import { b as i } from "./select-B0LRDH0g.js";
 import { n as a } from "./semaphore-89jsoHtS.js";
 var o = t("file", [["path", {

package/dist/{reveal-component-ClNTWzdK.js → reveal-component-BTMViKBQ.js}

@@ -3,15 +3,15 @@ import { c as t, g as n, h as r, m as i, t as a } from "./button-BxB3RDjN.js";
 import { t as o } from "./react-sHtZdjeP.js";
 import { t as s } from "./compiler-runtime-CldRdSsv.js";
 import { h as c, t as l } from "./tooltip-CKO1pHJo.js";
-import { O as u } from "./error-entries-Cq0m-sO5.js";
-import { Q as d, X as f, Z as p, an as m, cn as h, i as g, in as _, l as v, n as y, r as b, t as x, u as S } from "./common-Dwl0aTge.js";
+import { O as u } from "./error-entries-TAO6kEhF.js";
+import { Q as d, X as f, Z as p, an as m, cn as h, i as g, in as _, l as v, n as y, r as b, t as x, u as S } from "./common-B3KZnxiH.js";
 import { M as C } from "./select-B0LRDH0g.js";
 import { q as ee } from "./dropdown-menu-B_7xD2X4.js";
 import { _ as w } from "./toDate-DKH0_kMo.js";
 import { t as T } from "./jsx-runtime-3BD1kT0s.js";
 import { q as E } from "./use-restore-focus-DBCITLeF.js";
 import { A as D, C as O, b as k } from "./useTheme-CfeaVw5D.js";
-import { a as A, n as te, t as ne } from "./code-visibility-BqP2qZal.js";
+import { a as A, n as te, t as ne } from "./code-visibility-gnf5rA6s.js";
 /* empty css                */
 var j = c("sticky-note", [["path", {
 	d: "M21 9a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z",
@@ -6516,13 +6516,13 @@ var ia = (e) => {
 		c = K, s = tr, u = m ? "mo-slide-content flex flex-col gap-3" : "mo-slide-content", d = o, f = n.blocks.map((e, t) => {
 			let n = e.cells.map((e) => r(e.id) ? i ? /* @__PURE__ */ (0, G.jsx)(cr, { cell: e }, e.id) : /* @__PURE__ */ (0, G.jsx)(lr, { cell: e }, e.id) : /* @__PURE__ */ (0, G.jsx)(ia, { cell: e }, e.id));
 			if (e.isFragment) {
-				let e = p.get(t);
+				let r = p.get(t);
 				return /* @__PURE__ */ (0, G.jsxs)(Jn, {
 					as: "div",
-					children: [n, e && /* @__PURE__ */ (0, G.jsx)(Qi, { text: e })]
-				}, t);
+					children: [n, r && /* @__PURE__ */ (0, G.jsx)(Qi, { text: r })]
+				}, e.cells[0].id);
 			}
-			return /* @__PURE__ */ (0, G.jsx)(M.Fragment, { children: n }, t);
+			return /* @__PURE__ */ (0, G.jsx)(M.Fragment, { children: n }, e.cells[0].id);
 		}), t[0] = o, t[1] = i, t[2] = r, t[3] = a, t[4] = n, t[5] = s, t[6] = c, t[7] = l, t[8] = u, t[9] = d, t[10] = f;
 	} else s = t[5], c = t[6], l = t[7], u = t[8], d = t[9], f = t[10];
 	let p;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.25.3-dev96",
+  "version": "0.25.3-dev98",
   "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([
     {

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[] = [