diff --git a/frontend/app/treeview/treeview.test.ts b/frontend/app/treeview/treeview.test.ts
new file mode 100644
index 0000000000..c286be7a49
--- /dev/null
+++ b/frontend/app/treeview/treeview.test.ts
@@ -0,0 +1,46 @@
+// Copyright 2026, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { buildVisibleRows, TreeNodeData } from "@/app/treeview/treeview";
+import { describe, expect, it } from "vitest";
+
+function makeNodes(entries: TreeNodeData[]): Map<string, TreeNodeData> {
+    return new Map(entries.map((entry) => [entry.id, entry]));
+}
+
+describe("treeview visible rows", () => {
+    it("sorts directories before files and alphabetically", () => {
+        const nodes = makeNodes([
+            {
+                id: "root",
+                isDirectory: true,
+                childrenStatus: "loaded",
+                childrenIds: ["c", "a", "b"],
+            },
+            { id: "a", parentId: "root", isDirectory: false, label: "z-last.txt" },
+            { id: "b", parentId: "root", isDirectory: true, label: "docs", childrenStatus: "loaded", childrenIds: [] },
+            { id: "c", parentId: "root", isDirectory: false, label: "a-first.txt" },
+        ]);
+        const rows = buildVisibleRows(nodes, ["root"], new Set(["root"]));
+        expect(rows.map((row) => row.id)).toEqual(["root", "b", "c", "a"]);
+    });
+
+    it("renders loading and capped synthetic rows", () => {
+        const nodes = makeNodes([
+            { id: "root", isDirectory: true, childrenStatus: "loading" },
+            {
+                id: "dir",
+                isDirectory: true,
+                childrenStatus: "capped",
+                childrenIds: ["f1"],
+                capInfo: { max: 1 },
+            },
+            { id: "f1", parentId: "dir", isDirectory: false, label: "one.txt" },
+        ]);
+        const loadingRows = buildVisibleRows(nodes, ["root"], new Set(["root"]));
+        expect(loadingRows.map((row) => row.kind)).toEqual(["node", "loading"]);
+
+        const cappedRows = buildVisibleRows(nodes, ["dir"], new Set(["dir"]));
+        expect(cappedRows.map((row) => row.kind)).toEqual(["node", "node", "capped"]);
+    });
+});
diff --git a/frontend/app/treeview/treeview.tsx b/frontend/app/treeview/treeview.tsx
new file mode 100644
index 0000000000..4481d2c68f
--- /dev/null
+++ b/frontend/app/treeview/treeview.tsx
@@ -0,0 +1,522 @@
+// Copyright 2026, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { makeIconClass } from "@/util/util";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import clsx from "clsx";
+import React, {
+    CSSProperties,
+    KeyboardEvent,
+    MouseEvent,
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useMemo,
+    useRef,
+    useState,
+} from "react";
+
+type TreeNodeChildrenStatus = "unloaded" | "loading" | "loaded" | "error" | "capped";
+
+export interface TreeNodeData {
+    id: string;
+    parentId?: string;
+    label?: string;
+    path?: string;
+    isDirectory: boolean;
+    mimeType?: string;
+    icon?: string;
+    isReadonly?: boolean;
+    notfound?: boolean;
+    staterror?: string;
+    childrenStatus?: TreeNodeChildrenStatus;
+    childrenIds?: string[];
+    capInfo?: { max: number; totalKnown?: number };
+}
+
+interface FetchDirResult {
+    nodes: TreeNodeData[];
+    capped?: boolean;
+    totalKnown?: number;
+}
+
+export interface TreeViewVisibleRow {
+    id: string;
+    parentId?: string;
+    depth: number;
+    kind: "node" | "loading" | "error" | "capped";
+    label: string;
+    isDirectory?: boolean;
+    isExpanded?: boolean;
+    hasChildren?: boolean;
+    icon?: string;
+    node?: TreeNodeData;
+}
+
+export interface TreeViewProps {
+    rootIds: string[];
+    initialNodes: Record<string, TreeNodeData>;
+    fetchDir?: (id: string, limit: number) => Promise<FetchDirResult>;
+    maxDirEntries?: number;
+    rowHeight?: number;
+    indentWidth?: number;
+    overscan?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    onOpenFile?: (id: string, node: TreeNodeData) => void;
+    onSelectionChange?: (id: string, node: TreeNodeData) => void;
+}
+
+export interface TreeViewRef {
+    scrollToId: (id: string) => void;
+}
+
+const DefaultRowHeight = 24;
+const DefaultIndentWidth = 16;
+const DefaultOverscan = 10;
+const ChevronWidth = 16;
+
+function normalizeLabel(node: TreeNodeData): string {
+    if (node.label?.trim()) {
+        return node.label;
+    }
+    const path = node.path ?? node.id;
+    const chunks = path.split("/").filter(Boolean);
+    return chunks[chunks.length - 1] ?? path;
+}
+
+function sortIdsByNode(nodesById: Map<string, TreeNodeData>, ids: string[]): string[] {
+    return [...ids].sort((leftId, rightId) => {
+        const left = nodesById.get(leftId);
+        const right = nodesById.get(rightId);
+        const leftDir = left?.isDirectory ? 0 : 1;
+        const rightDir = right?.isDirectory ? 0 : 1;
+        if (leftDir !== rightDir) {
+            return leftDir - rightDir;
+        }
+        const leftLabel = normalizeLabel(left ?? { id: leftId, isDirectory: false }).toLocaleLowerCase();
+        const rightLabel = normalizeLabel(right ?? { id: rightId, isDirectory: false }).toLocaleLowerCase();
+        if (leftLabel !== rightLabel) {
+            return leftLabel.localeCompare(rightLabel);
+        }
+        return leftId.localeCompare(rightId);
+    });
+}
+
+export function buildVisibleRows(
+    nodesById: Map<string, TreeNodeData>,
+    rootIds: string[],
+    expandedIds: Set<string>
+): TreeViewVisibleRow[] {
+    const rows: TreeViewVisibleRow[] = [];
+
+    const appendNode = (id: string, depth: number) => {
+        const node = nodesById.get(id);
+        if (node == null) {
+            return;
+        }
+        const childIds = node.childrenIds ?? [];
+        const hasChildren = node.isDirectory && (childIds.length > 0 || node.childrenStatus !== "loaded");
+        const isExpanded = expandedIds.has(id);
+        rows.push({
+            id,
+            parentId: node.parentId,
+            depth,
+            kind: "node",
+            label: normalizeLabel(node),
+            isDirectory: node.isDirectory,
+            isExpanded,
+            hasChildren,
+            icon: node.icon,
+            node,
+        });
+        if (!isExpanded || !node.isDirectory) {
+            return;
+        }
+        const status = node.childrenStatus ?? "unloaded";
+        if (status === "loading") {
+            rows.push({
+                id: `${id}::__loading`,
+                parentId: id,
+                depth: depth + 1,
+                kind: "loading",
+                label: "Loading…",
+            });
+            return;
+        }
+        if (status === "error") {
+            rows.push({
+                id: `${id}::__error`,
+                parentId: id,
+                depth: depth + 1,
+                kind: "error",
+                label: node.staterror ? `Error: ${node.staterror}` : "Unable to load directory",
+            });
+            return;
+        }
+
+        const sortedChildren = sortIdsByNode(nodesById, childIds);
+        sortedChildren.forEach((childId) => appendNode(childId, depth + 1));
+        if (status === "capped") {
+            const capMax = node.capInfo?.max ?? childIds.length;
+            rows.push({
+                id: `${id}::__capped`,
+                parentId: id,
+                depth: depth + 1,
+                kind: "capped",
+                label: `Showing first ${capMax} entries`,
+            });
+        }
+    };
+
+    sortIdsByNode(nodesById, rootIds).forEach((id) => appendNode(id, 0));
+    return rows;
+}
+
+function getNodeIcon(node: TreeNodeData, isExpanded: boolean): string {
+    if (node.notfound || node.staterror) {
+        return "triangle-exclamation";
+    }
+    if (node.icon) {
+        return node.icon;
+    }
+    if (node.isDirectory) {
+        return isExpanded ? "folder-open" : "folder";
+    }
+    const mime = node.mimeType ?? "";
+    if (mime.startsWith("image/")) {
+        return "image";
+    }
+    if (mime === "application/pdf") {
+        return "file-pdf";
+    }
+    const extension = normalizeLabel(node).split(".").pop()?.toLocaleLowerCase();
+    if (["js", "jsx", "ts", "tsx", "go", "py", "java", "c", "cpp", "h", "hpp", "json", "yaml", "yml"].includes(extension)) {
+        return "file-code";
+    }
+    if (["md", "txt", "log"].includes(extension)) {
+        return "file-lines";
+    }
+    return "file";
+}
+
+export const TreeView = forwardRef<TreeViewRef, TreeViewProps>((props, ref) => {
+    const {
+        rootIds,
+        initialNodes,
+        fetchDir,
+        maxDirEntries = 500,
+        rowHeight = DefaultRowHeight,
+        indentWidth = DefaultIndentWidth,
+        overscan = DefaultOverscan,
+        minWidth = 100,
+        maxWidth = 400,
+        width = "100%",
+        height = 360,
+        className,
+        onOpenFile,
+        onSelectionChange,
+    } = props;
+    const [nodesById, setNodesById] = useState<Map<string, TreeNodeData>>(
+        () =>
+            new Map(
+                Object.entries(initialNodes).map(([id, node]) => [id, { ...node, childrenStatus: node.childrenStatus ?? "unloaded" }])
+            )
+    );
+    const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+    const [selectedId, setSelectedId] = useState<string>(rootIds[0]);
+    const scrollRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        setNodesById(
+            new Map(
+                Object.entries(initialNodes).map(([id, node]) => [
+                    id,
+                    {
+                        ...node,
+                        childrenStatus: node.childrenStatus ?? "unloaded",
+                    },
+                ])
+            )
+        );
+    }, [initialNodes]);
+
+    const visibleRows = useMemo(() => buildVisibleRows(nodesById, rootIds, expandedIds), [nodesById, rootIds, expandedIds]);
+    const idToIndex = useMemo(
+        () => new Map(visibleRows.map((row, index) => [row.id, index])),
+        [visibleRows]
+    );
+    const virtualizer = useVirtualizer({
+        count: visibleRows.length,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: () => rowHeight,
+        overscan,
+    });
+
+    const commitSelection = (id: string) => {
+        const node = nodesById.get(id);
+        if (node == null) {
+            return;
+        }
+        setSelectedId(id);
+        onSelectionChange?.(id, node);
+    };
+
+    const scrollToId = (id: string) => {
+        const index = idToIndex.get(id);
+        if (index == null) {
+            return;
+        }
+        virtualizer.scrollToIndex(index, { align: "auto" });
+    };
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            scrollToId,
+        }),
+        [idToIndex, virtualizer]
+    );
+
+    const loadChildren = async (id: string) => {
+        const currentNode = nodesById.get(id);
+        if (currentNode == null || !currentNode.isDirectory || currentNode.notfound || currentNode.staterror || fetchDir == null) {
+            return;
+        }
+        const status = currentNode.childrenStatus ?? "unloaded";
+        if (status !== "unloaded") {
+            return;
+        }
+        setNodesById((prev) => {
+            const next = new Map(prev);
+            next.set(id, { ...currentNode, childrenStatus: "loading" });
+            return next;
+        });
+        try {
+            const result = await fetchDir(id, maxDirEntries);
+            setNodesById((prev) => {
+                const next = new Map(prev);
+                result.nodes.forEach((node) => {
+                    const merged: TreeNodeData = {
+                        ...node,
+                        parentId: node.parentId ?? id,
+                        childrenStatus: node.childrenStatus ?? (node.isDirectory ? "unloaded" : "loaded"),
+                    };
+                    next.set(merged.id, merged);
+                });
+                const childrenIds = sortIdsByNode(
+                    next,
+                    result.nodes.map((entry) => entry.id)
+                );
+                const source = next.get(id) ?? currentNode;
+                next.set(id, {
+                    ...source,
+                    childrenIds,
+                    childrenStatus: result.capped ? "capped" : "loaded",
+                    capInfo: result.capped ? { max: maxDirEntries, totalKnown: result.totalKnown } : undefined,
+                });
+                return next;
+            });
+        } catch (error) {
+            setNodesById((prev) => {
+                const next = new Map(prev);
+                const source = next.get(id) ?? currentNode;
+                next.set(id, {
+                    ...source,
+                    childrenStatus: "error",
+                    staterror: error instanceof Error ? error.message : "Unknown error",
+                });
+                return next;
+            });
+        }
+    };
+
+    const toggleExpand = (id: string) => {
+        const node = nodesById.get(id);
+        if (node == null || !node.isDirectory || node.notfound || node.staterror) {
+            return;
+        }
+        const expanded = expandedIds.has(id);
+        if (!expanded) {
+            loadChildren(id);
+        }
+        setExpandedIds((prev) => {
+            const next = new Set(prev);
+            if (expanded) {
+                next.delete(id);
+            } else {
+                next.add(id);
+            }
+            return next;
+        });
+        scrollToId(id);
+    };
+
+    const selectVisibleNodeAt = (index: number) => {
+        if (index < 0 || index >= visibleRows.length) {
+            return;
+        }
+        const row = visibleRows[index];
+        if (row.kind !== "node") {
+            return;
+        }
+        commitSelection(row.id);
+        scrollToId(row.id);
+    };
+
+    const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+        const selectedIndex = selectedId != null ? idToIndex.get(selectedId) : undefined;
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            const nextIndex = (selectedIndex ?? -1) + 1;
+            for (let idx = nextIndex; idx < visibleRows.length; idx++) {
+                if (visibleRows[idx].kind === "node") {
+                    selectVisibleNodeAt(idx);
+                    break;
+                }
+            }
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            const previousIndex = (selectedIndex ?? visibleRows.length) - 1;
+            for (let idx = previousIndex; idx >= 0; idx--) {
+                if (visibleRows[idx].kind === "node") {
+                    selectVisibleNodeAt(idx);
+                    break;
+                }
+            }
+            return;
+        }
+        const node = selectedId ? nodesById.get(selectedId) : null;
+        if (node == null) {
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            if (node.isDirectory && expandedIds.has(node.id)) {
+                toggleExpand(node.id);
+                return;
+            }
+            if (node.parentId != null) {
+                commitSelection(node.parentId);
+                scrollToId(node.parentId);
+            }
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            if (node.isDirectory && !expandedIds.has(node.id)) {
+                toggleExpand(node.id);
+                return;
+            }
+            if (node.isDirectory && expandedIds.has(node.id) && node.childrenIds?.[0]) {
+                commitSelection(node.childrenIds[0]);
+                scrollToId(node.childrenIds[0]);
+            }
+        }
+    };
+
+    const containerStyle: CSSProperties = {
+        width,
+        minWidth,
+        maxWidth,
+        height,
+    };
+
+    return (
+        <div
+            className={clsx("rounded-md border border-border bg-panel", className)}
+            style={containerStyle}
+            tabIndex={0}
+            onKeyDown={onKeyDown}
+        >
+            <div ref={scrollRef} className="h-full overflow-auto">
+                <div className="relative w-max min-w-full" style={{ height: virtualizer.getTotalSize() }}>
+                    {virtualizer.getVirtualItems().map((virtualRow) => {
+                        const row = visibleRows[virtualRow.index];
+                        if (row.kind === "node" && row.node == null) {
+                            return null;
+                        }
+                        const selected = row.id === selectedId;
+                        return (
+                            <div
+                                key={row.id}
+                                className={clsx(
+                                    "absolute left-0 right-0 flex items-center whitespace-nowrap text-sm",
+                                    row.kind === "node" ? "cursor-pointer" : "text-muted",
+                                    selected ? "bg-accent/25 text-foreground" : "text-foreground hover:bg-muted/50"
+                                )}
+                                style={{
+                                    top: 0,
+                                    height: rowHeight,
+                                    transform: `translateY(${virtualRow.start}px)`,
+                                }}
+                                onClick={() => row.kind === "node" && commitSelection(row.id)}
+                                onDoubleClick={() => {
+                                    if (row.kind !== "node") {
+                                        return;
+                                    }
+                                    if (row.isDirectory) {
+                                        toggleExpand(row.id);
+                                        return;
+                                    }
+                                    if (row.node != null) {
+                                        onOpenFile?.(row.id, row.node);
+                                    }
+                                }}
+                            >
+                                <div
+                                    className="flex items-center"
+                                    style={{ paddingLeft: row.depth * indentWidth, width: ChevronWidth + row.depth * indentWidth }}
+                                >
+                                    {row.kind === "node" && row.isDirectory && row.hasChildren ? (
+                                        <button
+                                            className="h-4 w-4 rounded text-muted hover:text-foreground cursor-pointer"
+                                            onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                                                event.stopPropagation();
+                                                toggleExpand(row.id);
+                                            }}
+                                        >
+                                            <i
+                                                className={clsx(
+                                                    "fa-sharp fa-solid text-[11px]",
+                                                    row.isExpanded ? "fa-chevron-down" : "fa-chevron-right"
+                                                )}
+                                            />
+                                        </button>
+                                    ) : (
+                                        <span className="inline-block h-4 w-4" />
+                                    )}
+                                </div>
+                                {row.kind === "node" ? (
+                                    <>
+                                        <i
+                                            className={makeIconClass(getNodeIcon(row.node, row.isExpanded), true)}
+                                            style={{
+                                                color: row.node.notfound || row.node.staterror ? "var(--color-error)" : "inherit",
+                                            }}
+                                        />
+                                        <span
+                                            className={clsx("ml-2 pr-3", row.node.isReadonly && "text-muted")}
+                                            title={row.label}
+                                        >
+                                            {row.label}
+                                        </span>
+                                    </>
+                                ) : (
+                                    <span className="ml-6 pr-3 text-xs">{row.label}</span>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+});
+
+TreeView.displayName = "TreeView";
diff --git a/frontend/preview/previews/treeview.preview.tsx b/frontend/preview/previews/treeview.preview.tsx
new file mode 100644
index 0000000000..65043ddda4
--- /dev/null
+++ b/frontend/preview/previews/treeview.preview.tsx
@@ -0,0 +1,97 @@
+// Copyright 2026, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { TreeNodeData, TreeView } from "@/app/treeview/treeview";
+import { useMemo, useState } from "react";
+
+const RootId = "workspace:/";
+const RootNode: TreeNodeData = {
+    id: RootId,
+    path: RootId,
+    label: "workspace",
+    isDirectory: true,
+    childrenStatus: "unloaded",
+};
+
+const DirectoryData: Record<string, TreeNodeData[]> = {
+    [RootId]: [
+        { id: "workspace:/src", path: "workspace:/src", label: "src", parentId: RootId, isDirectory: true },
+        { id: "workspace:/docs", path: "workspace:/docs", label: "docs", parentId: RootId, isDirectory: true },
+        { id: "workspace:/README.md", path: "workspace:/README.md", label: "README.md", parentId: RootId, isDirectory: false, mimeType: "text/markdown" },
+        { id: "workspace:/package.json", path: "workspace:/package.json", label: "package.json", parentId: RootId, isDirectory: false, mimeType: "application/json" },
+    ],
+    "workspace:/src": [
+        { id: "workspace:/src/app", path: "workspace:/src/app", label: "app", parentId: "workspace:/src", isDirectory: true },
+        { id: "workspace:/src/styles", path: "workspace:/src/styles", label: "styles", parentId: "workspace:/src", isDirectory: true },
+        ...Array.from({ length: 200 }).map((_, idx) => ({
+            id: `workspace:/src/file-${idx.toString().padStart(3, "0")}.tsx`,
+            path: `workspace:/src/file-${idx.toString().padStart(3, "0")}.tsx`,
+            label: `file-${idx.toString().padStart(3, "0")}.tsx`,
+            parentId: "workspace:/src",
+            isDirectory: false,
+            mimeType: "text/typescript",
+        })),
+    ],
+    "workspace:/src/app": [
+        { id: "workspace:/src/app/main.tsx", path: "workspace:/src/app/main.tsx", label: "main.tsx", parentId: "workspace:/src/app", isDirectory: false, mimeType: "text/typescript" },
+        { id: "workspace:/src/app/router.ts", path: "workspace:/src/app/router.ts", label: "router.ts", parentId: "workspace:/src/app", isDirectory: false, mimeType: "text/typescript" },
+    ],
+    "workspace:/src/styles": [
+        { id: "workspace:/src/styles/app.css", path: "workspace:/src/styles/app.css", label: "app.css", parentId: "workspace:/src/styles", isDirectory: false, mimeType: "text/css" },
+    ],
+    "workspace:/docs": Array.from({ length: 25 }).map((_, idx) => ({
+        id: `workspace:/docs/page-${idx + 1}.md`,
+        path: `workspace:/docs/page-${idx + 1}.md`,
+        label: `page-${idx + 1}.md`,
+        parentId: "workspace:/docs",
+        isDirectory: false,
+        mimeType: "text/markdown",
+    })),
+};
+
+export function TreeViewPreview() {
+    const [width, setWidth] = useState(260);
+    const [selection, setSelection] = useState<string>(RootId);
+    const initialNodes = useMemo(() => ({ [RootId]: RootNode }), []);
+
+    return (
+        <div className="w-full max-w-[900px] px-6">
+            <div className="mb-4 rounded-md border border-border bg-panel p-4">
+                <div className="text-xs text-muted">Tree width: {width}px</div>
+                <input
+                    type="range"
+                    min={100}
+                    max={400}
+                    value={width}
+                    onChange={(event) => setWidth(Number(event.target.value))}
+                    className="mt-2 w-full cursor-pointer"
+                />
+                <div className="mt-3 text-xs text-muted">Selection: {selection}</div>
+            </div>
+            <TreeView
+                rootIds={[RootId]}
+                initialNodes={initialNodes}
+                width={width}
+                minWidth={100}
+                maxWidth={400}
+                height={420}
+                maxDirEntries={120}
+                fetchDir={async (id, limit) => {
+                    await new Promise((resolve) => setTimeout(resolve, 220));
+                    const entries = DirectoryData[id] ?? [];
+                    return {
+                        nodes: entries.slice(0, limit),
+                        capped: entries.length > limit,
+                        totalKnown: entries.length,
+                    };
+                }}
+                onOpenFile={(id) => {
+                    setSelection(`open:${id}`);
+                }}
+                onSelectionChange={(id) => {
+                    setSelection(id);
+                }}
+            />
+        </div>
+    );
+}
diff --git a/package-lock.json b/package-lock.json
index 269181d32a..2c6a94218c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "waveterm",
-    "version": "0.14.1-beta.1",
+    "version": "0.14.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "waveterm",
-            "version": "0.14.1-beta.1",
+            "version": "0.14.1",
             "hasInstallScript": true,
             "license": "Apache-2.0",
             "workspaces": [
@@ -21,6 +21,7 @@
                 "@table-nav/core": "^0.0.7",
                 "@table-nav/react": "^0.0.7",
                 "@tanstack/react-table": "^8.21.3",
+                "@tanstack/react-virtual": "^3.13.19",
                 "@xterm/addon-fit": "^0.10.0",
                 "@xterm/addon-search": "^0.15.0",
                 "@xterm/addon-serialize": "^0.13.0",
@@ -9047,6 +9048,23 @@
                 "react-dom": ">=16.8"
             }
         },
+        "node_modules/@tanstack/react-virtual": {
+            "version": "3.13.19",
+            "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.19.tgz",
+            "integrity": "sha512-KzwmU1IbE0IvCZSm6OXkS+kRdrgW2c2P3Ho3NC+zZXWK6oObv/L+lcV/2VuJ+snVESRlMJ+w/fg4WXI/JzoNGQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@tanstack/virtual-core": "3.13.19"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
         "node_modules/@tanstack/table-core": {
             "version": "8.21.3",
             "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
@@ -9060,6 +9078,16 @@
                 "url": "https://github.com/sponsors/tannerlinsley"
             }
         },
+        "node_modules/@tanstack/virtual-core": {
+            "version": "3.13.19",
+            "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.19.tgz",
+            "integrity": "sha512-/BMP7kNhzKOd7wnDeB8NrIRNLwkf5AhCYCvtfZV2GXWbBieFm/el0n6LOAXlTi6ZwHICSNnQcIxRCWHrLzDY+g==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            }
+        },
         "node_modules/@trysound/sax": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
diff --git a/package.json b/package.json
index b21f8eee1a..cd75ae81d2 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
         "@table-nav/core": "^0.0.7",
         "@table-nav/react": "^0.0.7",
         "@tanstack/react-table": "^8.21.3",
+        "@tanstack/react-virtual": "^3.13.19",
         "@xterm/addon-fit": "^0.10.0",
         "@xterm/addon-search": "^0.15.0",
         "@xterm/addon-serialize": "^0.13.0",