Improve session cache eviction

2025-12-09 14:05:10 +00:00
parent e54f80f20e
commit 8204143810
10 changed files with 319 additions and 100 deletions
--- a/packages/ui/src/components/instance/instance-shell.tsx
+++ b/packages/ui/src/components/instance/instance-shell.tsx
@@ -1,9 +1,11 @@
-import { Show, createMemo, createSignal, onCleanup, onMount, type Component } from "solid-js"
+import { For, Show, createEffect, createMemo, createSignal, onCleanup, onMount, type Component } from "solid-js"
 import type { Accessor } from "solid-js"
 import type { Instance } from "../../types/instance"
 import type { Command } from "../../lib/commands"
 import { activeParentSessionId, activeSessionId as activeSessionMap, getSessionFamily, setActiveSession } from "../../stores/sessions"
 import { keyboardRegistry, type KeyboardShortcut } from "../../lib/keyboard-registry"
+import { messageStoreBus } from "../../stores/message-v2/bus"
+import { clearSessionRenderCache } from "../message-block"
 import { buildCustomCommandEntries } from "../../lib/command-utils"
 import { getCommands as getInstanceCommands } from "../../stores/commands"
 import { isOpen as isCommandPaletteOpen, hideCommandPalette } from "../../stores/command-palette"
@@ -34,11 +36,14 @@ interface InstanceShellProps {

 const DEFAULT_SESSION_SIDEBAR_WIDTH = 350
 const MOBILE_SIDEBAR_BREAKPOINT = 1024
+const SESSION_CACHE_LIMIT = 2

 const InstanceShell: Component<InstanceShellProps> = (props) => {
  const [sessionSidebarWidth, setSessionSidebarWidth] = createSignal(DEFAULT_SESSION_SIDEBAR_WIDTH)
  const [isCompactLayout, setIsCompactLayout] = createSignal(false)
  const [isSidebarOpen, setIsSidebarOpen] = createSignal(true)
+  const [cachedSessionIds, setCachedSessionIds] = createSignal<string[]>([])
+  const [pendingEvictions, setPendingEvictions] = createSignal<string[]>([])
  const sidebarId = `session-sidebar-${props.instance.id}`
  let previousIsCompact = false

@@ -77,12 +82,17 @@ const InstanceShell: Component<InstanceShellProps> = (props) => {
    return activeSessionMap().get(props.instance.id) || null
  })

+  const parentSessionIdForInstance = createMemo(() => {
+    return activeParentSessionId().get(props.instance.id) || null
+  })
+ 
  const activeSessionForInstance = createMemo(() => {
    const sessionId = activeSessionIdForInstance()
    if (!sessionId || sessionId === "info") return null
    return activeSessions().get(sessionId) ?? null
  })

+
  const customCommands = createMemo(() => buildCustomCommandEntries(props.instance.id, getInstanceCommands(props.instance.id)))
  const instancePaletteCommands = createMemo(() => [...props.paletteCommands(), ...customCommands()])
  const paletteOpen = createMemo(() => isCommandPaletteOpen(props.instance.id))
@@ -97,6 +107,74 @@ const InstanceShell: Component<InstanceShellProps> = (props) => {
    setActiveSession(props.instance.id, sessionId)
  }

+  const evictSession = (sessionId: string) => {
+    if (!sessionId) return
+    log.info("Evicting cached session", { instanceId: props.instance.id, sessionId })
+    const store = messageStoreBus.getInstance(props.instance.id)
+    store?.clearSession(sessionId)
+    clearSessionRenderCache(props.instance.id, sessionId)
+  }
+
+  const scheduleEvictions = (ids: string[]) => {
+    if (!ids.length) return
+    setPendingEvictions((current) => {
+      const existing = new Set(current)
+      const next = [...current]
+      ids.forEach((id) => {
+        if (!existing.has(id)) {
+          next.push(id)
+          existing.add(id)
+        }
+      })
+      return next
+    })
+  }
+
+  createEffect(() => {
+    const pending = pendingEvictions()
+    if (!pending.length) return
+    const cached = new Set(cachedSessionIds())
+    const remaining: string[] = []
+    pending.forEach((id) => {
+      if (cached.has(id)) {
+        remaining.push(id)
+      } else {
+        evictSession(id)
+      }
+    })
+    if (remaining.length !== pending.length) {
+      setPendingEvictions(remaining)
+    }
+  })
+
+  createEffect(() => {
+    const sessionsMap = activeSessions()
+    const parentId = parentSessionIdForInstance()
+    const activeId = activeSessionIdForInstance()
+    setCachedSessionIds((current) => {
+      const next: string[] = []
+      const append = (id: string | null) => {
+        if (!id || id === "info") return
+        if (!sessionsMap.has(id)) return
+        if (next.includes(id)) return
+        next.push(id)
+      }
+
+      append(parentId)
+      append(activeId)
+      current.forEach((id) => append(id))
+
+      const limit = parentId ? SESSION_CACHE_LIMIT + 1 : SESSION_CACHE_LIMIT
+      const trimmed = next.length > limit ? next.slice(0, limit) : next
+      const trimmedSet = new Set(trimmed)
+      const removed = current.filter((id) => !trimmedSet.has(id))
+      if (removed.length) {
+        scheduleEvictions(removed)
+      }
+      return trimmed
+    })
+  })
+
  return (
    <>
      <Show when={activeSessions().size > 0} fallback={<InstanceWelcomeView instance={props.instance} />}>
@@ -212,8 +290,7 @@ const InstanceShell: Component<InstanceShellProps> = (props) => {
              when={activeSessionIdForInstance() === "info"}
              fallback={
                <Show
-                  when={activeSessionIdForInstance()}
-                  keyed
+                  when={cachedSessionIds().length > 0 && activeSessionIdForInstance()}
                  fallback={
                    <div class="flex items-center justify-center h-full">
                      <div class="text-center text-gray-500 dark:text-gray-400">
@@ -223,18 +300,31 @@ const InstanceShell: Component<InstanceShellProps> = (props) => {
                    </div>
                  }
                >
-                  {(sessionId) => (
-                    <SessionView
-                      sessionId={sessionId}
-                      activeSessions={activeSessions()}
-                      instanceId={props.instance.id}
-                      instanceFolder={props.instance.folder}
-                      escapeInDebounce={props.escapeInDebounce}
-                      showSidebarToggle={shouldShowSidebarToggle()}
-                      onSidebarToggle={() => setIsSidebarOpen(true)}
-                      forceCompactStatusLayout={shouldShowSidebarToggle()}
-                    />
-                  )}
+                  <For each={cachedSessionIds()}>
+                    {(sessionId) => {
+                      const isActive = () => activeSessionIdForInstance() === sessionId
+                      return (
+                        <div
+                          class="session-cache-pane flex flex-col flex-1 min-h-0"
+                          style={{ display: isActive() ? "flex" : "none" }}
+                          data-session-id={sessionId}
+                          aria-hidden={!isActive()}
+                        >
+                          <SessionView
+                            sessionId={sessionId}
+                            activeSessions={activeSessions()}
+                            instanceId={props.instance.id}
+                            instanceFolder={props.instance.folder}
+                            escapeInDebounce={props.escapeInDebounce}
+                            showSidebarToggle={shouldShowSidebarToggle()}
+                            onSidebarToggle={() => setIsSidebarOpen(true)}
+                            forceCompactStatusLayout={shouldShowSidebarToggle()}
+                            isActive={isActive()}
+                          />
+                        </div>
+                      )
+                    }}
+                  </For>
                </Show>
              }
            >
--- a/packages/ui/src/components/message-block.tsx
+++ b/packages/ui/src/components/message-block.tsx
@@ -125,6 +125,10 @@ function makeSessionCacheKey(instanceId: string, sessionId: string) {
  return `${instanceId}:${sessionId}`
 }

+export function clearSessionRenderCache(instanceId: string, sessionId: string) {
+  renderCaches.delete(makeSessionCacheKey(instanceId, sessionId))
+}
+
 function getSessionRenderCache(instanceId: string, sessionId: string): SessionRenderCache {
  const key = makeSessionCacheKey(instanceId, sessionId)
  let cache = renderCaches.get(key)
--- a/packages/ui/src/components/message-section.tsx
+++ b/packages/ui/src/components/message-section.tsx
@@ -30,6 +30,8 @@ export interface MessageSectionProps {
  onRevert?: (messageId: string) => void
  onFork?: (messageId?: string) => void
  registerScrollToBottom?: (fn: () => void) => void
+  requestScrollToBottom?: () => void
+  isActive: boolean
  showSidebarToggle?: boolean
  onSidebarToggle?: () => void
  forceCompactStatusLayout?: boolean
@@ -134,7 +136,12 @@ export default function MessageSection(props: MessageSectionProps) {

  const [scrollElement, setScrollElement] = createSignal<HTMLDivElement | undefined>()
  const [topSentinel, setTopSentinel] = createSignal<HTMLDivElement | null>(null)
-  const [bottomSentinel, setBottomSentinel] = createSignal<HTMLDivElement | null>(null)
+  const [bottomSentinelSignal, setBottomSentinelSignal] = createSignal<HTMLDivElement | null>(null)
+  const bottomSentinel = () => bottomSentinelSignal()
+  const setBottomSentinel = (element: HTMLDivElement | null) => {
+    setBottomSentinelSignal(element)
+  }
+  const [scrollToBottomRequest, setScrollToBottomRequest] = createSignal(false)
  const [autoScroll, setAutoScroll] = createSignal(true)
  const [showScrollTopButton, setShowScrollTopButton] = createSignal(false)
  const [showScrollBottomButton, setShowScrollBottomButton] = createSignal(false)
@@ -190,6 +197,9 @@ export default function MessageSection(props: MessageSectionProps) {

  function setContainerRef(element: HTMLDivElement | null) {
    containerRef = element || undefined
+    if (import.meta.env?.DEV) {
+      console.debug("[MessageSection] setContainerRef", props.sessionId, Boolean(containerRef))
+    }
    setScrollElement(containerRef)
    attachScrollIntentListeners(containerRef)
    if (!containerRef) {
@@ -207,8 +217,13 @@ export default function MessageSection(props: MessageSectionProps) {
  function updateScrollIndicatorsFromVisibility() {

    const hasItems = messageIds().length > 0
-    setShowScrollBottomButton(hasItems && !bottomSentinelVisible())
-    setShowScrollTopButton(hasItems && !topSentinelVisible())
+    const bottomVisible = bottomSentinelVisible()
+    const topVisible = topSentinelVisible()
+    if (import.meta.env?.DEV) {
+      console.debug("[MessageSection] sentinel visibility", props.sessionId, { bottomVisible, topVisible })
+    }
+    setShowScrollBottomButton(hasItems && !bottomVisible)
+    setShowScrollTopButton(hasItems && !topVisible)
  }

  function scheduleScrollPersist() {
@@ -216,13 +231,20 @@ export default function MessageSection(props: MessageSectionProps) {
    pendingScrollPersist = requestAnimationFrame(() => {
      pendingScrollPersist = null
      if (!containerRef) return
-      scrollCache.persist(containerRef, { atBottomOffset: SCROLL_SENTINEL_MARGIN_PX })
+      // scrollCache.persist(containerRef, { atBottomOffset: SCROLL_SENTINEL_MARGIN_PX })
    })
  }
 
  function scrollToBottom(immediate = false) {
    if (!containerRef) return
    const sentinel = bottomSentinel()
+    if (import.meta.env?.DEV) {
+      console.debug("[MessageSection] scrollToBottom", props.sessionId, {
+        immediate,
+        hasSentinel: Boolean(sentinel),
+        bottomVisible: bottomSentinelVisible(),
+      })
+    }
    const behavior = immediate ? "auto" : "smooth"
    if (!immediate) {
      suppressAutoScrollOnce = true
@@ -235,6 +257,9 @@ export default function MessageSection(props: MessageSectionProps) {
  function scrollToTop(immediate = false) {
    if (!containerRef) return
    const behavior = immediate ? "auto" : "smooth"
+    if (import.meta.env?.DEV) {
+      console.debug("[MessageSection] scrollToTop", props.sessionId, { immediate })
+    }
    setAutoScroll(false)
    topSentinel()?.scrollIntoView({ block: "start", inline: "nearest", behavior })
    scheduleScrollPersist()
@@ -357,6 +382,17 @@ export default function MessageSection(props: MessageSectionProps) {
    }
  })

+  createEffect(() => {
+    const active = props.isActive
+    const container = containerRef
+    if (!container) return
+    if (active) {
+      requestAnimationFrame(() => requestAnimationFrame(() => scrollToBottom(true)))
+    } else {
+      requestAnimationFrame(() => container.scrollTo({ top: 0, behavior: "auto" }))
+    }
+  })
+
  createEffect(() => {
    if (!props.onQuoteSelection) {
      clearQuoteSelection()
@@ -392,16 +428,16 @@ export default function MessageSection(props: MessageSectionProps) {
    if (!target || loading || hasRestoredScroll) return


-    scrollCache.restore(target, {
-      onApplied: (snapshot) => {
-        if (snapshot) {
-          setAutoScroll(snapshot.atBottom)
-        } else {
-          setAutoScroll(bottomSentinelVisible())
-        }
-        updateScrollIndicatorsFromVisibility()
-      },
-    })
+    // scrollCache.restore(target, {
+    //   onApplied: (snapshot) => {
+    //     if (snapshot) {
+    //       setAutoScroll(snapshot.atBottom)
+    //     } else {
+    //       setAutoScroll(bottomSentinelVisible())
+    //     }
+    //     updateScrollIndicatorsFromVisibility()
+    //   },
+    // })

    hasRestoredScroll = true
  })
@@ -522,7 +558,7 @@ export default function MessageSection(props: MessageSectionProps) {
      detachScrollIntentListeners()
    }
    if (containerRef) {
-      scrollCache.persist(containerRef, { atBottomOffset: SCROLL_SENTINEL_MARGIN_PX })
+      // scrollCache.persist(containerRef, { atBottomOffset: SCROLL_SENTINEL_MARGIN_PX })
    }
    clearQuoteSelection()
  })
@@ -591,6 +627,8 @@ export default function MessageSection(props: MessageSectionProps) {
              onContentRendered={handleContentRendered}
              setBottomSentinel={setBottomSentinel}
            />
+
+
          </div>
 
          <Show when={showScrollTopButton() || showScrollBottomButton()}>
--- a/packages/ui/src/components/session/session-view.tsx
+++ b/packages/ui/src/components/session/session-view.tsx
@@ -1,4 +1,4 @@
-import { Show, createMemo, createEffect, type Component } from "solid-js"
+import { Show, createMemo, createEffect, createSignal, type Component } from "solid-js"
 import type { Session } from "../../types/session"
 import type { Attachment } from "../../types/attachment"
 import type { ClientPart } from "../../types/message"
@@ -26,18 +26,25 @@ interface SessionViewProps {
  showSidebarToggle?: boolean
  onSidebarToggle?: () => void
  forceCompactStatusLayout?: boolean
+  isActive: boolean
 }

 export const SessionView: Component<SessionViewProps> = (props) => {
  const session = () => props.activeSessions.get(props.sessionId)
  const messagesLoading = createMemo(() => isSessionMessagesLoading(props.instanceId, props.sessionId))
  const messageStore = createMemo(() => messageStoreBus.getOrCreate(props.instanceId))
+  const [scrollToBottomHandle, setScrollToBottomHandle] = createSignal<(() => void) | null>(null)
+  createEffect(() => {
+    if (!props.isActive) return
+    const handler = scrollToBottomHandle()
+    if (!handler) return
+    requestAnimationFrame(() => requestAnimationFrame(() => handler()))
+  })
  const sessionBusy = createMemo(() => {
    const currentSession = session()
    if (!currentSession) return false
    return getSessionBusyStatus(props.instanceId, currentSession.id)
  })
-  let scrollToBottomHandle: (() => void) | undefined
  let quoteHandler: ((text: string, mode: "quote" | "code") => void) | null = null
 
  createEffect(() => {
@@ -63,9 +70,9 @@ export const SessionView: Component<SessionViewProps> = (props) => {
  }
 
  async function handleSendMessage(prompt: string, attachments: Attachment[]) {
-
-    if (scrollToBottomHandle) {
-      scrollToBottomHandle()
+    const handler = scrollToBottomHandle()
+    if (handler) {
+      handler()
    }
    await sendMessage(props.instanceId, props.sessionId, prompt, attachments)
  }
@@ -193,9 +200,16 @@ export const SessionView: Component<SessionViewProps> = (props) => {
               loading={messagesLoading()}
               onRevert={handleRevert}
               onFork={handleFork}
+               isActive={props.isActive}
               registerScrollToBottom={(fn) => {
-                 scrollToBottomHandle = fn
+                 setScrollToBottomHandle(() => fn)
+                 if (props.isActive) {
+                   requestAnimationFrame(() => requestAnimationFrame(() => fn()))
+                 }
               }}
+
+
+
               showSidebarToggle={props.showSidebarToggle}
               onSidebarToggle={props.onSidebarToggle}
               forceCompactStatusLayout={props.forceCompactStatusLayout}
--- a/packages/ui/src/components/virtual-item.tsx
+++ b/packages/ui/src/components/virtual-item.tsx
@@ -227,6 +227,7 @@ export default function VirtualItem(props: VirtualItemProps) {
      cleanupResizeObserver()
    }
  }
+
 
  createEffect(() => {
    if (shouldHideContent()) {
@@ -283,9 +284,6 @@ export default function VirtualItem(props: VirtualItemProps) {
  const placeholderClass = () => ["virtual-item-placeholder", props.placeholderClass].filter(Boolean).join(" ")
  const lazyContent = createMemo<JSX.Element | null>(() => {
    if (shouldHideContent()) return null
-    if (import.meta.env?.DEV) {
-      console.debug("rendering virtual item", props.cacheKey)
-    }
    return resolved()
  })