Change:
Inconsistent repro, not sure what triggers it yet. <img width="301" alt="image" src=""
this is caused by the first one or two lines of output to be in one output item and the rest in another. In the case above: While the second output keeps streaming in, it is supposed to be replaced each time, but we were looking in the wrong element for the previous output to be replaced. I don't know why the outputs are split like this and is the first time I've ever noticed it happening.
Another progress with simple ASCII output (previous sample was HTML) (install using )
Some other samples, that seems to be flaky Code
verification steps: run the example that Don provided in a notebook cell only one progress bar should appear and refresh

Discussion:
const scrollTop = outputScrolling ? findScrolledHeight(outputElement) : undefined; <del> const existingContent = outputElement.querySelector(`[output-item-id="${outputInfo.id}"]`) as HTMLElement | null; </del> const previousOutputParent = getPreviousMatchingContentGroup(outputElement); // If the previous output item for the same cell was also a stream, append this output to the previous if (previousOutputParent) { <ins> const existingContent = previousOutputParent.querySelector(`[output-item-id="${outputInfo.id}"]`) as HTMLElement | null; </ins> if (existingContent) { existingContent.replaceWith(newContent);

previousOutputParent.classList.toggle('scrollbar-visible', previousOutputParent.scrollHeight > previousOutputParent.clientHeight); previousOutputParent.scrollTop = scrollTop !== undefined ? scrollTop : previousOutputParent.scrollHeight; } else { <ins> const existingContent = outputElement.querySelector(`[output-item-id="${outputInfo.id}"]`) as HTMLElement | null; </ins> let contentParent = existingContent?.parentElement; if (existingContent && contentParent) { existingContent.replaceWith(newContent);

this.firstOutput = outputElement; } <ins> public get cellElement() { return this.cell; } </ins> public getFirstOuputElement() { return this.firstOutput; }

assert.ok(inserted.innerHTML.indexOf('>third stream content</') > -1, `Content was not added to output element: ${outputElement.innerHTML}`); }); <ins> test(`Consolidated streaming outputs should replace matching outputs correctly`, async () => { const context = createContext({ outputScrolling: false }); const renderer = await activate(context); assert.ok(renderer, 'Renderer not created'); const outputHtml = new OutputHtml(); const outputElement = outputHtml.getFirstOuputElement(); const outputItem1 = createOutputItem('first stream content', stdoutMimeType, '1'); const outputItem2 = createOutputItem('second stream content', stdoutMimeType, '2'); await renderer!.renderOutputItem(outputItem1, outputElement); const secondOutput = outputHtml.appendOutputElement(); await renderer!.renderOutputItem(outputItem2, secondOutput); const newOutputItem1 = createOutputItem('replaced content', stdoutMimeType, '2'); await renderer!.renderOutputItem(newOutputItem1, secondOutput); const inserted = outputElement.firstChild as HTMLElement; assert.ok(inserted, `nothing appended to output element: ${outputElement.innerHTML}`); assert.ok(inserted.innerHTML.indexOf('>first stream content</') > -1, `Content was not added to output element: ${outputHtml.cellElement.innerHTML}`); assert.ok(inserted.innerHTML.indexOf('>replaced content</') > -1, `Content was not added to output element: ${outputHtml.cellElement.innerHTML}`); assert.ok(inserted.innerHTML.indexOf('>second stream content</') === -1, `Content was not replaced in output element: ${outputHtml.cellElement.innerHTML}`); }); test(`Streaming outputs interleaved with other mime types will produce separate outputs`, async () => { const context = createContext({ outputScrolling: false }); const renderer = await activate(context); assert.ok(renderer, 'Renderer not created'); const outputHtml = new OutputHtml(); const firstOutputElement = outputHtml.getFirstOuputElement(); const outputItem1 = createOutputItem('first stream content', stdoutMimeType, '1'); const outputItem2 = createOutputItem(JSON.stringify(error), errorMimeType, '2'); const outputItem3 = createOutputItem('second stream content', stdoutMimeType, '3'); await renderer!.renderOutputItem(outputItem1, firstOutputElement); const secondOutputElement = outputHtml.appendOutputElement(); await renderer!.renderOutputItem(outputItem2, secondOutputElement); const thirdOutputElement = outputHtml.appendOutputElement(); await renderer!.renderOutputItem(outputItem3, thirdOutputElement); assert.ok(firstOutputElement.innerHTML.indexOf('>first stream content</') > -1, `Content was not added to output element: ${outputHtml.cellElement.innerHTML}`); assert.ok(secondOutputElement.innerHTML.indexOf('>NameError</') > -1, `Content was not added to output element: ${outputHtml.cellElement.innerHTML}`); assert.ok(thirdOutputElement.innerHTML.indexOf('>second stream content</') > -1, `Content was not added to output element: ${outputHtml.cellElement.innerHTML}`); }); </ins> test(`Multiple adjacent streaming outputs, rerendering the first should erase the rest`, async () => { const context = createContext(); const renderer = await activate(context);