Support latest react-window version

page/package-lock.json

@@ -22,7 +22,6 @@
         "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-tooltip": "^1.2.8",
         "@tailwindcss/vite": "^4.1.12",
-        "@types/react-window": "^1.8.8",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "flatbuffers": "^25.2.10",
@@ -3622,6 +3621,7 @@
       "version": "19.1.12",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
       "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -3647,15 +3647,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-window": {
-      "version": "1.8.8",
-      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
-      "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/shell-quote": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/@types/shell-quote/-/shell-quote-1.7.5.tgz",
@@ -4249,6 +4240,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/debug": {

page/package.json

@@ -24,7 +24,6 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/vite": "^4.1.12",
-    "@types/react-window": "^1.8.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "flatbuffers": "^25.2.10",

page/src/components/output.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { FixedSizeList as List } from "react-window";
+import {
+  List,
+  ListImperativeAPI,
+  useListRef,
+  type RowComponentProps,
+} from "react-window";
 
 interface OutputProps {}
 
@@ -156,9 +161,26 @@ class OutputGrouper {
   }
 }
 
+function LogLineRow({
+  index,
+  lines,
+  style,
+}: RowComponentProps<{
+  lines: LogLine[];
+}>) {
+  {
+    const line = lines[index];
+    return (
+      <span className={line.classNames} style={style}>
+        {line.text}
+      </span>
+    );
+  }
+}
+
 export class Output extends React.Component<OutputProps, FullOutputState> {
   private outputRef: React.RefObject<HTMLDivElement | null>;
-  private listRef: React.RefObject<List | null>;
+  private listRef: React.RefObject<ListImperativeAPI | null>;
   private resizeObserver: ResizeObserver;
 
   constructor(props: OutputProps) {
@@ -201,13 +223,14 @@ export class Output extends React.Component<OutputProps, FullOutputState> {
 
   componentDidUpdate(_: OutputProps, prevState: FullOutputState) {
     if (
-      prevState.lines.length == this.state.lines.length ||
-      !this.listRef.current
+      !this.listRef.current ||
+      this.state.lines.length == 0 ||
+      prevState.lines.length == this.state.lines.length
     ) {
       return;
     }
 
-    this.listRef.current.scrollToItem(this.state.lines.length - 1);
+    this.listRef.current.scrollToRow({ index: this.state.lines.length - 1 });
   }
 
   clear() {
@@ -261,21 +284,14 @@ export class Output extends React.Component<OutputProps, FullOutputState> {
     return (
       <div className="terminal-output" ref={this.outputRef}>
         <List
-          ref={this.listRef}
-          width={this.state.width}
-          height={this.state.height}
-          itemCount={this.state.lines.length}
-          itemSize={20}
-        >
-          {({ index, style }) => {
-            const line = this.state.lines[index];
-            return (
-              <span className={line.classNames} style={style}>
-                {line.text}
-              </span>
-            );
-          }}
-        </List>
+          listRef={this.listRef}
+          overscanCount={30}
+          rowComponent={LogLineRow}
+          rowCount={this.state.lines.length}
+          rowProps={{ lines: this.state.lines }}
+          rowHeight={20}
+          style={{ height: this.state.height, width: this.state.width }}
+        />
       </div>
     );
   }