@aitty/browser 0.1.2 → 0.2.0

package/dist/frontend/browser-terminal-renderer.js

@@ -1,5 +1,5 @@
-import { isWideCodePoint } from "./cell-width.js";
-//#region src/frontend/browser-terminal-renderer.ts
+import { resolveRenderedScrollbackWindow } from "./terminal-scrollback-window.js";
+//#region packages/browser/src/frontend/browser-terminal-renderer.ts
 const DEFAULT_COLOR = 256;
 const FLAG_BOLD = 1;
 const FLAG_DIM = 2;
@@ -8,6 +8,12 @@ const FLAG_UNDERLINE = 8;
 const FLAG_REVERSE = 32;
 const FLAG_INVISIBLE = 64;
 const FLAG_STRIKETHROUGH = 128;
+function terminalCellWidth(columns) {
+	return columns === 1 ? "var(--term-cell-width, 1ch)" : `calc(var(--term-cell-width, 1ch) * ${columns})`;
+}
+function runColumnSpan(cells) {
+	return cells.reduce((total, cell) => total + cell.width, 0);
+}
 function colorToCSS(index) {
 	if (index === DEFAULT_COLOR) return null;
 	if (index < 16) return `var(--term-color-${index})`;
@@ -18,26 +24,48 @@ function colorToCSS(index) {
 	const level = (index - 232) * 10 + 8;
 	return `rgb(${level}, ${level}, ${level})`;
 }
-function resolveColorChannels(fg, bg, flags, override = null) {
-	let resolvedFg = override?.fg ?? colorToCSS(fg);
-	let resolvedBg = override?.bg ?? colorToCSS(bg);
+function rgbToCSS(packed) {
+	return `rgb(${packed >> 16 & 255}, ${packed >> 8 & 255}, ${packed & 255})`;
+}
+function cellColorToCSS(index, rgb) {
+	return rgb === void 0 ? colorToCSS(index) : rgbToCSS(rgb);
+}
+function resolveColorChannels(fg, bg, flags, fgRgb, bgRgb) {
+	let resolvedFg = cellColorToCSS(fg, fgRgb);
+	let resolvedBg = cellColorToCSS(bg, bgRgb);
 	if (flags & FLAG_REVERSE) {
 		[resolvedFg, resolvedBg] = [resolvedBg, resolvedFg];
-		if (resolvedFg === null) resolvedFg = colorToCSS(0);
-		if (resolvedBg === null) resolvedBg = colorToCSS(7);
+		if (resolvedFg === null) resolvedFg = "var(--term-reverse-fg)";
+		if (resolvedBg === null) resolvedBg = "var(--term-reverse-bg)";
 	}
 	return {
 		bg: resolvedBg,
 		fg: resolvedFg
 	};
 }
-function buildCellStyle(fg, bg, flags, override = null) {
-	const colors = resolveColorChannels(fg, bg, flags, override);
+function dimTerminalColor(color) {
+	return `color-mix(in srgb, ${color} 58%, var(--term-dim-mix-target))`;
+}
+function contrastTerminalColor(color) {
+	return `color-mix(in srgb, ${color} var(--term-foreground-mix-weight), var(--term-foreground-mix-target))`;
+}
+function resolveForegroundColor(color, flags, fallback) {
+	const foreground = color ?? fallback;
+	if (!foreground) return null;
+	if (flags & FLAG_DIM) return dimTerminalColor(foreground);
+	if (flags & FLAG_REVERSE) return foreground;
+	return contrastTerminalColor(foreground);
+}
+function buildCellStyle(fg, bg, flags, fgRgb, bgRgb) {
+	const colors = resolveColorChannels(fg, bg, flags, fgRgb, bgRgb);
+	const foreground = resolveForegroundColor(colors.fg, flags, flags & FLAG_DIM ? "var(--term-fg)" : void 0);
 	let style = "";
-	if (colors.fg) style += `color:${colors.fg};`;
-	if (colors.bg) style += `background:${colors.bg};`;
+	if (foreground) style += `color:${foreground};`;
+	if (colors.bg) {
+		style += `background:${colors.bg};`;
+		style += `box-shadow:0 -1px 0 ${colors.bg},0 1px 0 ${colors.bg};`;
+	}
 	if (flags & FLAG_BOLD) style += "font-weight:bold;";
-	if (flags & FLAG_DIM) style += "opacity:0.5;";
 	if (flags & FLAG_ITALIC) style += "font-style:italic;";
 	const decorations = [];
 	if (flags & FLAG_UNDERLINE) decorations.push("underline");
@@ -46,43 +74,77 @@ function buildCellStyle(fg, bg, flags, override = null) {
 	if (flags & FLAG_INVISIBLE) style += "visibility:hidden;";
 	return style;
 }
-function appendRun(parent, text, style, className = "") {
-	const span = document.createElement("span");
-	if (className) span.className = className;
-	if (style) span.style.cssText = style;
-	span.textContent = text;
-	parent.appendChild(span);
-}
-function appendWideCell(parent, text, style, cursor = false) {
-	const span = document.createElement("span");
-	span.className = cursor ? "term-wide term-cursor" : "term-wide";
-	if (style) span.style.cssText = style;
-	span.style.width = "2ch";
-	span.style.minWidth = "2ch";
-	span.style.maxWidth = "2ch";
-	span.style.overflow = "hidden";
-	span.textContent = text;
-	parent.appendChild(span);
+function resolveCellBackground(cell) {
+	return resolveColorChannels(cell.fg, cell.bg, cell.flags, cell.fgRgb, cell.bgRgb).bg ?? "";
 }
-function isWideContinuationCell(cell) {
-	return (cell?.char ?? 0) === 0;
+function resolveTerminalCellColumnSpan(getCell, col, _lineLength) {
+	return getCell(col)?.width === 2 ? 2 : 1;
 }
 function serializeRowText(getCell, lineLength) {
 	let text = "";
 	for (let col = 0; col < lineLength; col += 1) {
-		const codePoint = getCell(col)?.char ?? 0;
-		if (isWideCodePoint(codePoint)) {
-			text += String.fromCodePoint(codePoint);
-			if (col + 1 < lineLength && isWideContinuationCell(getCell(col + 1))) col += 1;
-			continue;
-		}
+		const cell = getCell(col);
+		const codePoint = cell?.char ?? 0;
+		if (cell?.width === 0) continue;
 		text += codePoint >= 32 ? String.fromCodePoint(codePoint) : " ";
+		if (cell?.width === 2) col += 1;
 	}
 	return normalizeRowText(text);
 }
 function normalizeRowText(text) {
 	return text.trimEnd();
 }
+function appendTextRunSegment(segments, text, style, columns, className = "") {
+	segments.push({
+		className,
+		columns: Math.max(1, columns),
+		overflowHidden: false,
+		style,
+		text
+	});
+}
+function appendWideCellSegment(segments, text, style, cursor = false) {
+	segments.push({
+		className: cursor ? "term-wide term-cursor" : "term-wide",
+		columns: 2,
+		overflowHidden: true,
+		style,
+		text
+	});
+}
+function rowSegmentKey(segment) {
+	return [
+		segment.className,
+		segment.columns,
+		segment.overflowHidden ? "1" : "0",
+		segment.style
+	].join("\0");
+}
+function areStringArraysEqual(left, right) {
+	return left?.length === right.length && right.every((value, index) => value === left[index]);
+}
+function createRowSegmentElement(segment) {
+	const span = document.createElement("span");
+	if (segment.className) span.className = segment.className;
+	if (segment.style) span.style.cssText = segment.style;
+	span.style.width = terminalCellWidth(segment.columns);
+	if (segment.overflowHidden) span.style.overflow = "hidden";
+	span.textContent = segment.text;
+	return span;
+}
+function rebuildRowSegments(rowEl, segments) {
+	const fragment = document.createDocumentFragment();
+	rowEl.textContent = "";
+	for (const segment of segments) fragment.appendChild(createRowSegmentElement(segment));
+	rowEl.appendChild(fragment);
+}
+function updateRowSegmentTexts(rowEl, previousTexts, nextTexts) {
+	for (let index = 0; index < nextTexts.length; index += 1) {
+		if (previousTexts?.[index] === nextTexts[index]) continue;
+		const child = rowEl.children[index];
+		if (child instanceof HTMLElement) child.textContent = nextTexts[index];
+	}
+}
 function cloneSnapshotRow(snapshot) {
 	const rowElement = snapshot.element.cloneNode(true);
 	rowElement.className = "term-row term-scrollback-row term-restored-scrollback-row";
@@ -129,11 +191,12 @@ function findRowSequence(rows, sequence, minStart = 0) {
 	}
 	return -1;
 }
-function resolveColors(fg, bg, flags, override = null) {
-	const colors = resolveColorChannels(fg, bg, flags, override);
+function resolveColors(fg, bg, flags, fgRgb, bgRgb) {
+	const colors = resolveColorChannels(fg, bg, flags, fgRgb, bgRgb);
+	const foreground = resolveForegroundColor(colors.fg, flags, "var(--term-fg)");
 	return {
 		bg: colors.bg ?? "var(--term-bg)",
-		fg: colors.fg ?? "var(--term-fg)"
+		fg: foreground ?? "var(--term-fg)"
 	};
 }
 function getBlockBackground(codePoint, fg, bg) {
@@ -249,11 +312,17 @@ var BrowserTerminalRenderer = class {
 	_altScreenMeaningfulScrollbackCount;
 	_altScreenVisibleRowSnapshot;
 	_lastAltScreenState;
+	_lastTotalScrollbackCount;
 	_renderedScrollbackCount;
+	_renderedScrollbackTexts;
 	_restoreSnapshotCount;
+	_rowSegmentKeys;
+	_rowSegmentTexts;
 	_scrollbackRowEls;
 	cols;
 	container;
+	renderedScrollbackLimit;
+	onScrollbackRowsDropped;
 	prevContainerBg;
 	prevCursorCol;
 	prevCursorRow;
@@ -261,14 +330,16 @@ var BrowserTerminalRenderer = class {
 	prevRowBg;
 	rowEls;
 	rows;
-	styleTracker;
-	constructor(container, styleTracker) {
+	constructor(container, options = {}) {
 		this._altScreenVisibleRowSnapshot = [];
 		this._altScreenMeaningfulScrollbackCount = 0;
 		this._lastAltScreenState = false;
+		this._lastTotalScrollbackCount = 0;
 		this._restoreSnapshotCount = 0;
 		this.cols = 0;
 		this.container = container;
+		this.renderedScrollbackLimit = Math.max(1, Math.floor(options.renderedScrollbackLimit ?? 1200));
+		this.onScrollbackRowsDropped = options.onScrollbackRowsDropped ?? (() => {});
 		this.prevContainerBg = "";
 		this.prevCursorCol = -1;
 		this.prevCursorRow = -1;
@@ -276,8 +347,10 @@ var BrowserTerminalRenderer = class {
 		this.prevRowBg = [];
 		this.rowEls = [];
 		this.rows = 0;
-		this.styleTracker = styleTracker;
 		this._renderedScrollbackCount = 0;
+		this._renderedScrollbackTexts = [];
+		this._rowSegmentKeys = [];
+		this._rowSegmentTexts = [];
 		this._scrollbackRowEls = [];
 	}
 	_resolveFirstLiveGridRow() {
@@ -299,12 +372,16 @@ var BrowserTerminalRenderer = class {
 		this.prevRowBg = [];
 		this._scrollbackRowEls = [];
 		this._renderedScrollbackCount = 0;
+		this._renderedScrollbackTexts = [];
 		this.prevCursorVisible = false;
 		this.prevCursorRow = -1;
 		this.prevCursorCol = -1;
+		this._rowSegmentKeys = [];
+		this._rowSegmentTexts = [];
 		this._altScreenVisibleRowSnapshot = [];
 		this._altScreenMeaningfulScrollbackCount = 0;
 		this._lastAltScreenState = false;
+		this._lastTotalScrollbackCount = 0;
 		this._restoreSnapshotCount = 0;
 		const fragment = document.createDocumentFragment();
 		for (let row = 0; row < rows; row += 1) {
@@ -312,92 +389,117 @@ var BrowserTerminalRenderer = class {
 			rowElement.className = "term-row";
 			fragment.appendChild(rowElement);
 			this.rowEls.push(rowElement);
+			this._rowSegmentKeys.push([]);
+			this._rowSegmentTexts.push([]);
 		}
 		this.container.appendChild(fragment);
 	}
-	_buildRowContent(rowEl, getCell, getOverride, lineLen, cursorCol, rowIndex) {
-		if (rowIndex >= 0) rowEl.className = "term-row";
-		rowEl.textContent = "";
-		let runStart = 0;
+	_buildRowContent(rowEl, getCell, lineLen, cursorCol, rowIndex) {
+		const segments = [];
 		let runStyle = "";
-		let runText = "";
-		const flushRun = (endCol) => {
-			if (!runText) return;
-			if (cursorCol >= runStart && cursorCol < endCol) {
-				const offset = cursorCol - runStart;
-				const before = runText.slice(0, offset);
-				const cursorChar = runText[offset];
-				const after = runText.slice(offset + 1);
-				if (before) appendRun(rowEl, before, runStyle);
-				appendRun(rowEl, cursorChar, runStyle, "term-cursor");
-				if (after) appendRun(rowEl, after, runStyle);
-			} else appendRun(rowEl, runText, runStyle);
+		let runCells = [];
+		const flushRun = () => {
+			if (runCells.length === 0) return;
+			const cursorCellIndex = runCells.findIndex((cell) => cursorCol === cell.col);
+			if (cursorCellIndex >= 0) {
+				const before = runCells.slice(0, cursorCellIndex).map((cell) => cell.text).join("");
+				const cursorChar = runCells[cursorCellIndex]?.text ?? " ";
+				const cursorWidth = runCells[cursorCellIndex]?.width ?? 1;
+				const after = runCells.slice(cursorCellIndex + 1).map((cell) => cell.text).join("");
+				if (before) appendTextRunSegment(segments, before, runStyle, runColumnSpan(runCells.slice(0, cursorCellIndex)));
+				appendTextRunSegment(segments, cursorChar, runStyle, cursorWidth, "term-cursor");
+				if (after) appendTextRunSegment(segments, after, runStyle, runColumnSpan(runCells.slice(cursorCellIndex + 1)));
+			} else appendTextRunSegment(segments, runCells.map((cell) => cell.text).join(""), runStyle, runColumnSpan(runCells));
+			runCells = [];
 		};
 		for (let col = 0; col < this.cols; col += 1) {
 			const cell = getCell(col);
 			const inBounds = col < lineLen;
 			const codePoint = inBounds ? cell.char : 0;
-			const override = getOverride(col);
-			if (override?.hidden === true) {
-				flushRun(col);
-				runStart = col + 1;
-				runStyle = "";
-				runText = "";
+			if (inBounds && cell.width === 0) {
+				flushRun();
 				continue;
 			}
-			if (inBounds && isWideCodePoint(codePoint)) {
-				const consumedColumns = (col + 1 < lineLen && isWideContinuationCell(getCell(col + 1)) ? getCell(col + 1) : null) ? 2 : 1;
-				const style = buildCellStyle(cell.fg, cell.bg, cell.flags, override);
-				const cursorOnWideCell = cursorCol === col || consumedColumns === 2 && cursorCol === col + 1 || cursorCol === col + 1 && getOverride(cursorCol)?.hidden === true;
-				flushRun(col);
-				appendWideCell(rowEl, String.fromCodePoint(codePoint), style, cursorOnWideCell);
-				runStart = col + consumedColumns;
+			if (inBounds && cell.width === 2) {
+				const style = buildCellStyle(cell.fg, cell.bg, cell.flags, cell.fgRgb, cell.bgRgb);
+				const cursorOnWideCell = cursorCol === col || cursorCol === col + 1;
+				flushRun();
+				appendWideCellSegment(segments, String.fromCodePoint(codePoint), style, cursorOnWideCell);
 				runStyle = "";
-				runText = "";
-				col += consumedColumns - 1;
+				runCells = [];
+				col += 1;
 				continue;
 			}
 			if (inBounds && codePoint >= 9600 && codePoint <= 9631) {
-				flushRun(col);
-				const colors = resolveColors(cell.fg, cell.bg, cell.flags, override);
-				const span = document.createElement("span");
-				span.className = col === cursorCol ? "term-block term-cursor" : "term-block";
-				span.style.background = getBlockBackground(codePoint, colors.fg, colors.bg);
-				if (cell.flags & FLAG_DIM) span.style.opacity = "0.5";
-				rowEl.appendChild(span);
-				runStart = col + 1;
+				flushRun();
+				const colors = resolveColors(cell.fg, cell.bg, cell.flags, cell.fgRgb, cell.bgRgb);
+				appendTextRunSegment(segments, "", `background:${getBlockBackground(codePoint, colors.fg, colors.bg)};`, 1, col === cursorCol ? "term-block term-cursor" : "term-block");
 				runStyle = "";
-				runText = "";
+				runCells = [];
 				continue;
 			}
 			const character = inBounds && codePoint >= 32 ? String.fromCodePoint(codePoint) : " ";
-			const style = inBounds ? buildCellStyle(cell.fg, cell.bg, cell.flags, override) : "";
+			const style = inBounds ? buildCellStyle(cell.fg, cell.bg, cell.flags, cell.fgRgb, cell.bgRgb) : "";
 			if (style !== runStyle) {
-				flushRun(col);
-				runStart = col;
+				flushRun();
 				runStyle = style;
-				runText = character;
-			} else runText += character;
+				runCells = [{
+					col,
+					text: character,
+					width: 1
+				}];
+			} else runCells.push({
+				col,
+				text: character,
+				width: 1
+			});
 		}
-		flushRun(this.cols);
+		flushRun();
+		const rowBackground = lineLen >= this.cols && this.cols > 0 ? resolveCellBackground(getCell(this.cols - 1)) : "";
+		const rowBoxShadow = rowBackground ? `0 1px 0 ${rowBackground}` : "";
 		if (rowIndex >= 0) {
-			if (this.prevRowBg[rowIndex] !== "") {
-				rowEl.style.background = "";
-				rowEl.style.boxShadow = "";
-				this.prevRowBg[rowIndex] = "";
+			if (rowEl.className !== "term-row") rowEl.className = "term-row";
+			const segmentKeys = segments.map(rowSegmentKey);
+			const segmentTexts = segments.map((segment) => segment.text);
+			const previousKeys = this._rowSegmentKeys[rowIndex];
+			const previousTexts = this._rowSegmentTexts[rowIndex];
+			const sameKeys = areStringArraysEqual(previousKeys, segmentKeys);
+			const sameTexts = areStringArraysEqual(previousTexts, segmentTexts);
+			const sameDomShape = sameKeys && rowEl.children.length === segments.length;
+			if (this.prevRowBg[rowIndex] !== rowBackground) {
+				rowEl.style.background = rowBackground;
+				rowEl.style.boxShadow = rowBoxShadow;
+				this.prevRowBg[rowIndex] = rowBackground;
 			}
+			if (sameDomShape && sameTexts) return;
+			if (sameDomShape) updateRowSegmentTexts(rowEl, previousTexts, segmentTexts);
+			else {
+				rebuildRowSegments(rowEl, segments);
+				this._rowSegmentKeys[rowIndex] = segmentKeys;
+			}
+			this._rowSegmentTexts[rowIndex] = segmentTexts;
 			return;
 		}
-		rowEl.style.background = "";
-		rowEl.style.boxShadow = "";
+		rebuildRowSegments(rowEl, segments);
+		rowEl.style.background = rowBackground;
+		rowEl.style.boxShadow = rowBoxShadow;
 	}
 	_buildScrollbackRowEl(bridge, offset) {
 		const rowElement = document.createElement("div");
 		rowElement.className = "term-row term-scrollback-row";
 		const lineLength = bridge.getScrollbackLineLen(offset);
-		this._buildRowContent(rowElement, (col) => bridge.getScrollbackCell(offset, col), (col) => this.styleTracker.getScrollbackOverride(offset, col), lineLength, -1, -1);
+		this._buildRowContent(rowElement, (col) => bridge.getScrollbackCell(offset, col), lineLength, -1, -1);
 		return rowElement;
 	}
+	_readScrollbackRowTexts(bridge, scrollbackCount = bridge.getScrollbackCount()) {
+		const rowTexts = [];
+		const windowState = resolveRenderedScrollbackWindow({
+			limit: this.renderedScrollbackLimit,
+			totalRows: scrollbackCount
+		});
+		for (let offset = windowState.firstOffset; offset >= 0; offset -= 1) rowTexts.push(this._readScrollbackRowText(bridge, offset));
+		return rowTexts;
+	}
 	_captureVisibleRowSnapshot() {
 		this._altScreenMeaningfulScrollbackCount = this._scrollbackRowEls.reduce((count, rowElement) => count + (normalizeRowText(rowElement.textContent ?? "").length > 0 ? 1 : 0), 0);
 		this._altScreenVisibleRowSnapshot = this.rowEls.map((rowElement) => ({
@@ -425,6 +527,27 @@ var BrowserTerminalRenderer = class {
 	_readScrollbackRowText(bridge, offset) {
 		return serializeRowText((col) => bridge.getScrollbackCell(offset, col), bridge.getScrollbackLineLen(offset));
 	}
+	_isShiftedScrollbackMatch(bridge, shiftCount, scrollbackCount) {
+		for (let previousIndex = shiftCount; previousIndex < this._renderedScrollbackTexts.length; previousIndex += 1) {
+			const currentIndex = previousIndex - shiftCount;
+			const currentOffset = scrollbackCount - 1 - currentIndex;
+			if (this._renderedScrollbackTexts[previousIndex] !== this._readScrollbackRowText(bridge, currentOffset)) return false;
+		}
+		return true;
+	}
+	_resolveShiftedScrollbackCount(bridge, scrollbackCount) {
+		if (scrollbackCount === 0 || this._renderedScrollbackTexts.length !== scrollbackCount) return null;
+		const previousNewestRow = this._renderedScrollbackTexts[scrollbackCount - 1] ?? "";
+		if (this._readScrollbackRowText(bridge, 0) === previousNewestRow) return 0;
+		for (let shiftCount = 1; shiftCount < scrollbackCount; shiftCount += 1) {
+			if (this._readScrollbackRowText(bridge, shiftCount) !== previousNewestRow) continue;
+			if (this._isShiftedScrollbackMatch(bridge, shiftCount, scrollbackCount)) return shiftCount;
+		}
+		return null;
+	}
+	getRenderedScrollbackCount() {
+		return this._renderedScrollbackCount;
+	}
 	_readLiveTranscriptRows(bridge, currentVisibleRows) {
 		const liveRows = [];
 		for (let offset = bridge.getScrollbackCount() - 1; offset >= 0; offset -= 1) {
@@ -464,14 +587,20 @@ var BrowserTerminalRenderer = class {
 	_rebuildScrollback(bridge, restoredSnapshots) {
 		for (const rowElement of this._scrollbackRowEls) rowElement.remove();
 		this._scrollbackRowEls = [];
+		this._renderedScrollbackTexts = [];
 		if (bridge.usingAltScreen()) {
 			this._renderedScrollbackCount = 0;
+			this._lastTotalScrollbackCount = 0;
 			this._restoreSnapshotCount = 0;
 			return;
 		}
 		const scrollbackCount = bridge.getScrollbackCount();
+		const windowState = resolveRenderedScrollbackWindow({
+			limit: this.renderedScrollbackLimit,
+			totalRows: scrollbackCount
+		});
 		const rowElements = [];
-		for (let offset = scrollbackCount - 1; offset >= 0; offset -= 1) rowElements.push(this._buildScrollbackRowEl(bridge, offset));
+		for (let offset = windowState.firstOffset; offset >= 0; offset -= 1) rowElements.push(this._buildScrollbackRowEl(bridge, offset));
 		if (restoredSnapshots.length > 0) {
 			const restoredRowElements = restoredSnapshots.map((snapshot) => cloneSnapshotRow(snapshot));
 			const preservedRowCount = Math.max(0, rowElements.length - restoredRowElements.length);
@@ -481,16 +610,48 @@ var BrowserTerminalRenderer = class {
 		for (const rowElement of rowElements) fragment.appendChild(rowElement);
 		this._insertScrollbackFragment(fragment);
 		this._scrollbackRowEls = rowElements;
-		this._renderedScrollbackCount = scrollbackCount;
+		this._renderedScrollbackTexts = rowElements.map((rowElement) => normalizeRowText(rowElement.textContent ?? ""));
+		this._renderedScrollbackCount = windowState.renderedRows;
+		this._lastTotalScrollbackCount = scrollbackCount;
 		this._restoreSnapshotCount = restoredSnapshots.length;
 	}
 	syncScrollback(bridge, restoredSnapshots = []) {
-		const scrollbackCount = bridge.usingAltScreen() ? 0 : bridge.getScrollbackCount();
+		const totalScrollbackCount = bridge.usingAltScreen() ? 0 : bridge.getScrollbackCount();
+		const scrollbackCount = resolveRenderedScrollbackWindow({
+			limit: this.renderedScrollbackLimit,
+			totalRows: totalScrollbackCount
+		}).renderedRows;
 		if (bridge.usingAltScreen() !== this._lastAltScreenState || restoredSnapshots.length > 0 || this._restoreSnapshotCount > 0) {
 			this._rebuildScrollback(bridge, restoredSnapshots);
 			return;
 		}
-		if (scrollbackCount === this._renderedScrollbackCount) return;
+		if (scrollbackCount === this._renderedScrollbackCount) {
+			const shiftedRows = totalScrollbackCount > this._lastTotalScrollbackCount ? totalScrollbackCount - this._lastTotalScrollbackCount : this._resolveShiftedScrollbackCount(bridge, scrollbackCount);
+			if (shiftedRows === 0) {
+				this._lastTotalScrollbackCount = totalScrollbackCount;
+				return;
+			}
+			if (shiftedRows === null || shiftedRows >= scrollbackCount) {
+				this._rebuildScrollback(bridge, []);
+				return;
+			}
+			const droppedRows = this._renderedScrollbackTexts.slice(0, shiftedRows).filter((row) => row.length > 0);
+			if (droppedRows.length > 0) this.onScrollbackRowsDropped(droppedRows);
+			const fragment = document.createDocumentFragment();
+			const nextTexts = [];
+			for (let offset = shiftedRows - 1; offset >= 0; offset -= 1) {
+				const rowElement = this._buildScrollbackRowEl(bridge, offset);
+				fragment.appendChild(rowElement);
+				this._scrollbackRowEls.push(rowElement);
+				nextTexts.push(this._readScrollbackRowText(bridge, offset));
+			}
+			for (let index = 0; index < shiftedRows; index += 1) this._scrollbackRowEls.shift()?.remove();
+			this._insertScrollbackFragment(fragment);
+			this._renderedScrollbackTexts = [...this._renderedScrollbackTexts.slice(shiftedRows), ...nextTexts];
+			this._renderedScrollbackCount = scrollbackCount;
+			this._lastTotalScrollbackCount = totalScrollbackCount;
+			return;
+		}
 		if (scrollbackCount > this._renderedScrollbackCount) {
 			const newCount = scrollbackCount - this._renderedScrollbackCount;
 			const fragment = document.createDocumentFragment();
@@ -498,13 +659,16 @@ var BrowserTerminalRenderer = class {
 				const rowElement = this._buildScrollbackRowEl(bridge, offset);
 				fragment.appendChild(rowElement);
 				this._scrollbackRowEls.push(rowElement);
+				this._renderedScrollbackTexts.push(this._readScrollbackRowText(bridge, offset));
 			}
 			this._insertScrollbackFragment(fragment);
 		} else {
 			const removeCount = this._renderedScrollbackCount - scrollbackCount;
 			for (let index = 0; index < removeCount; index += 1) this._scrollbackRowEls.shift()?.remove();
+			this._renderedScrollbackTexts.splice(0, removeCount);
 		}
 		this._renderedScrollbackCount = scrollbackCount;
+		this._lastTotalScrollbackCount = totalScrollbackCount;
 	}
 	render(bridge, options = {}) {
 		const rows = bridge.getRows();
@@ -528,7 +692,7 @@ var BrowserTerminalRenderer = class {
 			const hasCursor = row === cursor.row;
 			if (isDirty || hadCursor || hasCursor && needsCursorUpdate) {
 				const cursorCol = hasCursor && cursorVisible ? cursor.col : -1;
-				this._buildRowContent(this.rowEls[row], (col) => bridge.getCell(row, col), (col) => this.styleTracker.getGridOverride(row, col), this.cols, cursorCol, row);
+				this._buildRowContent(this.rowEls[row], (col) => bridge.getCell(row, col), this.cols, cursorCol, row);
 			}
 		}
 		this.prevCursorRow = cursor.row;
@@ -543,4 +707,4 @@ var BrowserTerminalRenderer = class {
 	}
 };
 //#endregion
-export { BrowserTerminalRenderer };
+export { BrowserTerminalRenderer, resolveTerminalCellColumnSpan, serializeRowText };

package/dist/frontend/cell-width.d.ts

@@ -1,4 +1,4 @@
-//#region src/frontend/cell-width.d.ts
+//#region packages/browser/src/frontend/cell-width.d.ts
 declare function isWideCodePoint(codePoint: number): boolean;
 declare function cellWidthForCodePoint(codePoint: number): 1 | 2;
 //#endregion

package/dist/frontend/cell-width.js

@@ -1,4 +1,4 @@
-//#region src/frontend/cell-width.ts
+//#region packages/browser/src/frontend/cell-width.ts
 function isWideCodePoint(codePoint) {
 	return codePoint >= 4352 && (codePoint <= 4447 || codePoint === 9001 || codePoint === 9002 || codePoint >= 11904 && codePoint <= 42191 && codePoint !== 12351 || codePoint >= 44032 && codePoint <= 55203 || codePoint >= 63744 && codePoint <= 64255 || codePoint >= 65040 && codePoint <= 65049 || codePoint >= 65072 && codePoint <= 65135 || codePoint >= 65280 && codePoint <= 65376 || codePoint >= 65504 && codePoint <= 65510 || codePoint >= 127744 && codePoint <= 128591 || codePoint >= 129280 && codePoint <= 129535 || codePoint >= 131072 && codePoint <= 262141);
 }

package/dist/frontend/shell-controls.d.ts

@@ -0,0 +1,24 @@
+import { TerminalConfigPatch, TerminalResolvedConfig } from "./terminal-config.js";
+
+//#region packages/browser/src/frontend/shell-controls.d.ts
+type BrowserWindow = Window & typeof globalThis;
+type ShellControlScrollAnchor = {
+  stickToBottom: boolean;
+};
+type ShellControlOptions<TScrollAnchor extends ShellControlScrollAnchor = ShellControlScrollAnchor> = {
+  captureScrollAnchor(): TScrollAnchor;
+  doc: Document;
+  focusTerminal(): void;
+  getConfig(): TerminalResolvedConfig;
+  onInterrupt(): void;
+  onScrollSurfaceChange?(): void;
+  onStickToBottomChange?(stickToBottom: boolean): void;
+  resetConfig: TerminalResolvedConfig;
+  restoreScrollAnchor(anchor: TScrollAnchor): void;
+  shell: HTMLElement;
+  updateConfig(config: TerminalConfigPatch): TerminalResolvedConfig;
+  windowObject: BrowserWindow;
+};
+declare function installShellControls<TScrollAnchor extends ShellControlScrollAnchor>(options: ShellControlOptions<TScrollAnchor>): () => void;
+//#endregion
+export { ShellControlOptions, ShellControlScrollAnchor, installShellControls };