perf(ui): virtualize nested session list (NeuralNomadsAI#586)

## Summary
- flatten expanded session trees into a stable pre-order row projection
- render only the viewport and buffer with the existing Solid virtua
integration
- preserve nested connectors, dynamic heights, search expansion, focus,
active-session scrolling, and loading sentinel behavior

## Why
Large or deeply expanded session trees currently mount every visible
row. Status updates then affect a large DOM tree even when most sessions
are far outside the sidebar viewport. This PR bounds mounted rows while
leaving selection, deletion, filtering, and store semantics unchanged.

## Validation
- UI TypeScript typecheck
- 47 focused session-tree, pagination, and virtual-scroll tests
- 1,000-session projection regression test
- production Vite build
- git diff whitespace check
- final focused regression review
- manual test

Author: pascalandr

packages/ui/src/components/session-list.tsx

@@ -1,4 +1,5 @@
-import { Component, For, Show, createSignal, createMemo, createEffect, JSX, onCleanup } from "solid-js"
+import { Component, Show, createSignal, createMemo, createEffect, JSX, on, onCleanup } from "solid-js"
+import { Virtualizer, type VirtualizerHandle } from "virtua/solid"
 import type { SessionStatus } from "../types/session"
 import type { SessionThread } from "../stores/session-state"
 import { getRetrySeconds, getSessionIdleFadeClass, getSessionRetry, getSessionStatus, shouldShowSessionStatus } from "../stores/session-status"
@@ -32,7 +33,7 @@ import {
   isSessionSearchLoading,
 } from "../stores/sessions"
 import { getGitRepoStatus, getWorktreeSlugForParentSession } from "../stores/worktrees"
-import { collectSessionThreadIds, findSessionThread, sortSessionIdsDeepestFirst } from "../stores/session-tree"
+import { collectSessionThreadIds, findSessionThread, flattenVisibleSessionThreads, sortSessionIdsDeepestFirst } from "../stores/session-tree"
 import { getLogger } from "../lib/logger"
 import { copyToClipboard } from "../lib/clipboard"
 import { useConfig } from "../stores/preferences"
@@ -69,6 +70,9 @@ const SessionList: Component<SessionListProps> = (props) => {
   const [selectedSessionIds, setSelectedSessionIds] = createSignal<Set<string>>(new Set())
   const [reloadingSessionIds, setReloadingSessionIds] = createSignal<Set<string>>(new Set())
   const [now, setNow] = createSignal(Date.now())
+  const [listEl, setListEl] = createSignal<HTMLDivElement>()
+  const [virtualizerHandle, setVirtualizerHandle] = createSignal<VirtualizerHandle>()
+  const [focusedSessionId, setFocusedSessionId] = createSignal<string>()
 
   createEffect(() => {
     if (typeof window === "undefined") return
@@ -107,7 +111,7 @@ const SessionList: Component<SessionListProps> = (props) => {
           })
         }
       },
-      { root: el.parentElement ?? null, rootMargin: "0px 0px 200px 0px" }
+      { root: listEl() ?? null, rootMargin: "0px 0px 200px 0px" }
     )
 
     observer.observe(el)
@@ -189,6 +193,29 @@ const SessionList: Component<SessionListProps> = (props) => {
     return result
   })
 
+  const visibleProjection = createMemo(() => {
+    const expandAll = Boolean(normalizedQuery())
+    const rows = flattenVisibleSessionThreads(
+      filteredThreads(),
+      (sessionId) => expandAll || isSessionExpanded(props.instanceId, sessionId),
+    )
+    const ids: string[] = []
+    const rowsById = new Map<string, (typeof rows)[number]>()
+    const indexById = new Map<string, number>()
+    rows.forEach((row, index) => {
+      ids.push(row.sessionId)
+      rowsById.set(row.sessionId, row)
+      indexById.set(row.sessionId, index)
+    })
+    return { ids, rowsById, indexById }
+  })
+  const keptMountedIndexes = createMemo(() => {
+    const sessionId = focusedSessionId()
+    if (!sessionId) return undefined
+    const index = visibleProjection().indexById.get(sessionId)
+    return index === undefined ? undefined : [index]
+  })
+
   const allMatchingSessionIds = createMemo<string[]>(() => {
     const ids: string[] = []
     const collectIds = (threads: SessionThread[]) => {
@@ -472,6 +499,7 @@ const SessionList: Component<SessionListProps> = (props) => {
     isLastChild: boolean
     hasChildren: boolean
     expanded?: boolean
+    isLastRow: boolean
     onToggleExpand?: () => void
   }> = (rowProps) => {
     const sessionId = () => rowProps.session.id
@@ -574,7 +602,7 @@ const SessionList: Component<SessionListProps> = (props) => {
     }
 
     return (
-      <div class="session-list-item group">
+      <div class={`session-list-item group ${rowProps.isLastRow ? "session-list-item-last" : ""}`}>
         <button
           class={`session-item-base ${isChild() ? "session-item-nested" : ""} ${isChild() && rowProps.isLastChild ? "session-item-child-last" : ""} ${isChild() ? "session-item-border-assistant session-item-kind-assistant" : "session-item-border-user session-item-kind-user"} ${isActive() ? "session-item-active" : "session-item-inactive"}`}
           style={nestedStyle()}
@@ -718,40 +746,6 @@ const SessionList: Component<SessionListProps> = (props) => {
     )
   }
 
-  // Recursive component for rendering a thread and its children
-  const SessionThreadRow: Component<{
-    thread: SessionThread
-    depth?: number
-    isLastChild?: boolean
-  }> = (rowProps) => {
-    const depth = () => rowProps.depth ?? 0
-    const expanded = () => normalizedQuery() ? true : isSessionExpanded(props.instanceId, rowProps.thread.session.id)
-
-    return (
-      <>
-        <SessionRow
-          session={rowProps.thread.session}
-          depth={depth()}
-          hasChildren={rowProps.thread.hasChildren}
-          expanded={expanded()}
-          onToggleExpand={() => toggleSessionExpanded(props.instanceId, rowProps.thread.session.id)}
-          isLastChild={Boolean(rowProps.isLastChild)}
-        />
-        <Show when={expanded() && rowProps.thread.children.length > 0}>
-          <For each={rowProps.thread.children}>
-            {(childThread, index) => (
-              <SessionThreadRow
-                thread={childThread}
-                depth={depth() + 1}
-                isLastChild={index() === rowProps.thread.children.length - 1}
-              />
-            )}
-          </For>
-        </Show>
-      </>
-    )
-  }
-
   createEffect(() => {
     const activeId = props.activeSessionId
     if (!activeId || activeId === "info") return
@@ -760,52 +754,24 @@ const SessionList: Component<SessionListProps> = (props) => {
     ensureSessionAncestorsExpanded(props.instanceId, activeId)
   })
 
-  const listEl = createSignal<HTMLElement | null>(null)
-
-  const escapeCss = (value: string) => {
-    if (typeof CSS !== "undefined" && typeof (CSS as any).escape === "function") {
-      return (CSS as any).escape(value)
-    }
-    return value.replace(/\\/g, "\\\\").replace(/"/g, "\\\"")
-  }
-
-  const scrollActiveIntoView = (sessionId: string) => {
-    const root = listEl[0]()
-    if (!root) return
-
-    const selector = `[data-session-id="${escapeCss(sessionId)}"]`
-
-    const scrollNow = () => {
-      const target = root.querySelector(selector) as HTMLElement | null
-      if (!target) return
-      target.scrollIntoView({ block: "nearest", inline: "nearest" })
-    }
-
-    if (typeof requestAnimationFrame === "undefined") {
-      scrollNow()
-      return
-    }
-
-    // Wait a couple frames so expand/collapse DOM settles.
-    let raf1 = 0
-    let raf2 = 0
-    raf1 = requestAnimationFrame(() => {
-      raf2 = requestAnimationFrame(() => {
-        scrollNow()
-      })
-    })
-
-    onCleanup(() => {
-      if (raf1) cancelAnimationFrame(raf1)
-      if (raf2) cancelAnimationFrame(raf2)
-    })
-  }
+  createEffect(on(
+    () => [props.activeSessionId, virtualizerHandle()] as const,
+    ([activeId, handle]) => {
+      if (!activeId || activeId === "info" || !handle) return
+
+      const scroll = () => {
+        const index = visibleProjection().indexById.get(activeId)
+        if (index !== undefined) handle.scrollToIndex(index, { align: "nearest" })
+      }
+      if (typeof requestAnimationFrame === "undefined") {
+        scroll()
+        return
+      }
 
-  createEffect(() => {
-    const activeId = props.activeSessionId
-    if (!activeId || activeId === "info") return
-    scrollActiveIntoView(activeId)
-  })
+      const frame = requestAnimationFrame(scroll)
+      onCleanup(() => cancelAnimationFrame(frame))
+    },
+  ))
 
   return (
     <div
@@ -883,7 +849,21 @@ const SessionList: Component<SessionListProps> = (props) => {
         </div>
       </Show>
 
-       <div class="session-list flex-1 overflow-y-auto" ref={(el) => listEl[1](el)}>
+       <div
+         class="session-list flex-1 overflow-y-auto"
+         ref={setListEl}
+         onFocusIn={(event) => {
+           const target = event.target
+           if (!(target instanceof Element)) return
+           const row = target.closest<HTMLElement>("[data-session-id]")
+           setFocusedSessionId(row?.dataset.sessionId)
+         }}
+         onFocusOut={(event) => {
+           const nextTarget = event.relatedTarget
+           if (nextTarget instanceof Node && listEl()?.contains(nextTarget)) return
+           setFocusedSessionId(undefined)
+         }}
+       >
 
           <Show when={sessionListError()}>
             {(error) => (
@@ -897,23 +877,42 @@ const SessionList: Component<SessionListProps> = (props) => {
             )}
           </Show>
 
-          <Show when={!sessionListError() && isFetchingSessions() && filteredThreads().length === 0}>
+          <Show when={!sessionListError() && isFetchingSessions() && visibleProjection().ids.length === 0}>
             <div class="flex items-center justify-center p-4 text-xs text-muted" role="status">
               <span class="animate-pulse">{t("sessionList.loading.initial")}</span>
             </div>
           </Show>
 
-          <Show when={filteredThreads().length > 0}>
-            <div class="session-section">
-              <For each={filteredThreads()}>
-                {(thread, index) => (
-                  <SessionThreadRow
-                    thread={thread}
-                    depth={0}
-                    isLastChild={index() === filteredThreads().length - 1}
-                  />
-                )}
-              </For>
+          <Show when={visibleProjection().ids.length > 0 || hasMore() || isFetchingSessions()}>
+           <div class="session-section">
+             <Show when={visibleProjection().ids.length > 0}>
+               <Virtualizer
+                 ref={setVirtualizerHandle}
+                 data={visibleProjection().ids}
+                 scrollRef={listEl()}
+                 bufferSize={400}
+                 keepMounted={keptMountedIndexes()}
+               >
+                 {(sessionId, index) => {
+                   const row = createMemo(() => visibleProjection().rowsById.get(sessionId))
+                   return (
+                     <Show when={row()}>
+                       {(current) => (
+                         <SessionRow
+                           session={current().thread.session}
+                           depth={current().depth}
+                           hasChildren={current().hasChildren}
+                           expanded={current().expanded}
+                           onToggleExpand={() => toggleSessionExpanded(props.instanceId, sessionId)}
+                           isLastChild={current().isLastChild}
+                           isLastRow={index() === visibleProjection().ids.length - 1 && !hasMore() && !isFetchingSessions()}
+                         />
+                       )}
+                     </Show>
+                   )
+                 }}
+               </Virtualizer>
+             </Show>
              <Show when={hasMore() || isFetchingSessions()}>
                <div
                  ref={(el) => setSentinelEl(el)}

packages/ui/src/stores/session-tree.test.ts

@@ -6,6 +6,7 @@ import {
   buildSessionThreadsFromMap,
   collectSessionThreadIds,
   collectVisibleSessionIds,
+  flattenVisibleSessionThreads,
   findSessionThread,
   getDescendantSessionsFromMap,
   getSessionAncestorIdsFromMap,
@@ -64,6 +65,76 @@ describe("session tree", () => {
     assert.deepEqual(collectVisibleSessionIds(threads, new Set(["root", "child"])), ["root", "child", "grandchild"])
   })
 
+  it("flattens visible nested rows in pre-order with sibling metadata", () => {
+    const sessions = sessionMap([
+      ["root", null, 100],
+      ["child", "root", 400],
+      ["grandchild", "child", 300],
+      ["sibling", "root", 200],
+      ["other-root", null, 50],
+    ])
+    const threads = buildSessionThreadsFromMap(sessions, ["root", "other-root"])
+    const expanded = new Set(["root", "child"])
+    const rows = flattenVisibleSessionThreads(threads, (id) => expanded.has(id))
+
+    assert.deepEqual(rows.map((row) => row.sessionId), ["root", "child", "grandchild", "sibling", "other-root"])
+    assert.deepEqual(rows.map((row) => row.depth), [0, 1, 2, 1, 0])
+    assert.deepEqual(rows.map((row) => row.isLastChild), [false, false, true, true, true])
+    assert.deepEqual(rows.map((row) => row.expanded), [true, true, false, false, false])
+  })
+
+  it("does not expose descendants through a collapsed ancestor", () => {
+    const sessions = sessionMap([
+      ["root", null, 100],
+      ["child", "root", 200],
+      ["grandchild", "child", 300],
+    ])
+    const threads = buildSessionThreadsFromMap(sessions, ["root"])
+    const rows = flattenVisibleSessionThreads(threads, (id) => id === "child")
+
+    assert.deepEqual(rows.map((row) => row.sessionId), ["root"])
+  })
+
+  it("matches the existing visible-id traversal for expansion sets", () => {
+    const sessions = sessionMap([
+      ["root", null, 100],
+      ["child", "root", 200],
+      ["grandchild", "child", 300],
+      ["sibling", "root", 400],
+    ])
+    const threads = buildSessionThreadsFromMap(sessions, ["root"])
+
+    for (const expanded of [new Set<string>(), new Set(["root"]), new Set(["root", "child"])]) {
+      assert.deepEqual(
+        flattenVisibleSessionThreads(threads, (id) => expanded.has(id)).map((row) => row.sessionId),
+        collectVisibleSessionIds(threads, expanded),
+      )
+    }
+  })
+
+  it("derives children from the projected filtered tree", () => {
+    const sessions = sessionMap([
+      ["root", null, 100],
+      ["child", "root", 200],
+    ])
+    const [filteredRoot] = buildSessionThreadsFromMap(sessions, ["root"], new Set())
+    const [row] = flattenVisibleSessionThreads([filteredRoot], () => true)
+
+    assert.equal(row.hasChildren, false)
+    assert.equal(row.expanded, false)
+  })
+
+  it("projects large root lists without dropping or duplicating sessions", () => {
+    const definitions: Array<[string, string | null, number]> = []
+    for (let index = 0; index < 1_000; index += 1) definitions.push([`session-${index}`, null, index])
+    const sessions = sessionMap(definitions)
+    const threads = buildSessionThreadsFromMap(sessions, definitions.map(([id]) => id))
+    const rows = flattenVisibleSessionThreads(threads, () => false)
+
+    assert.equal(rows.length, 1_000)
+    assert.equal(new Set(rows.map((row) => row.sessionId)).size, 1_000)
+  })
+
   it("resolves roots and ancestors across arbitrary depth", () => {
     const sessions = sessionMap([
       ["root", null, 100],