Improve message stream caching and virtualization for large sessions

packages/ui/src/lib/hooks/use-global-cache.ts

@@ -0,0 +1,86 @@
+import { type Accessor, createMemo } from "solid-js"
+import {
+  type CacheEntryParams,
+  getCacheEntry,
+  setCacheEntry,
+  clearCacheScope,
+  clearCacheForSession,
+  clearCacheForInstance,
+} from "../global-cache"
+
+/**
+ * `useGlobalCache` exposes a tiny typed facade over the shared cache helpers.
+ * Callers can pass raw values or accessors for the cache keys; empty identifiers
+ * automatically fall back to the global buckets.
+ */
+export function useGlobalCache(params: UseGlobalCacheParams): GlobalCacheHandle {
+  const resolvedEntry = createMemo<CacheEntryParams>(() => {
+    const instanceId = normalizeId(resolveValue(params.instanceId))
+    const sessionId = normalizeId(resolveValue(params.sessionId))
+    const scope = resolveValue(params.scope)
+    const key = resolveValue(params.key)
+    return { instanceId, sessionId, scope, key }
+  })
+
+  const scopeParams = createMemo(() => {
+    const entry = resolvedEntry()
+    return { instanceId: entry.instanceId, sessionId: entry.sessionId, scope: entry.scope }
+  })
+
+  const sessionParams = createMemo(() => {
+    const entry = resolvedEntry()
+    return { instanceId: entry.instanceId, sessionId: entry.sessionId }
+  })
+
+  return {
+    get<T>() {
+      return getCacheEntry<T>(resolvedEntry())
+    },
+    set<T>(value: T | undefined) {
+      setCacheEntry(resolvedEntry(), value)
+    },
+    clearScope() {
+      clearCacheScope(scopeParams())
+    },
+    clearSession() {
+      const params = sessionParams()
+      clearCacheForSession(params.instanceId, params.sessionId)
+    },
+    clearInstance() {
+      const params = sessionParams()
+      clearCacheForInstance(params.instanceId)
+    },
+    params() {
+      return resolvedEntry()
+    },
+  }
+}
+
+function normalizeId(value?: string): string | undefined {
+  return value && value.length > 0 ? value : undefined
+}
+
+function resolveValue<T>(value: MaybeAccessor<T> | undefined): T {
+  if (typeof value === "function") {
+    return (value as Accessor<T>)()
+  }
+  return value as T
+}
+
+type MaybeAccessor<T> = T | Accessor<T>
+
+interface UseGlobalCacheParams {
+  instanceId?: MaybeAccessor<string | undefined>
+  sessionId?: MaybeAccessor<string | undefined>
+  scope: MaybeAccessor<string>
+  key: MaybeAccessor<string>
+}
+
+interface GlobalCacheHandle {
+  get<T>(): T | undefined
+  set<T>(value: T | undefined): void
+  clearScope(): void
+  clearSession(): void
+  clearInstance(): void
+  params(): CacheEntryParams
+}

packages/ui/src/lib/hooks/use-scroll-cache.ts

@@ -0,0 +1,102 @@
+import { type Accessor, createMemo } from "solid-js"
+import { messageStoreBus } from "../../stores/message-v2/bus"
+import type { ScrollSnapshot } from "../../stores/message-v2/types"
+
+interface UseScrollCacheParams {
+  instanceId: MaybeAccessor<string>
+  sessionId: MaybeAccessor<string>
+  scope: MaybeAccessor<string>
+}
+
+interface PersistScrollOptions {
+  atBottomOffset?: number
+}
+
+interface RestoreScrollOptions {
+  behavior?: ScrollBehavior
+  fallback?: () => void
+  onApplied?: (snapshot: ScrollSnapshot | undefined) => void
+}
+
+interface ScrollCacheHandle {
+  persist: (element: HTMLElement | null | undefined, options?: PersistScrollOptions) => ScrollSnapshot | undefined
+  restore: (element: HTMLElement | null | undefined, options?: RestoreScrollOptions) => void
+}
+
+const DEFAULT_BOTTOM_OFFSET = 48
+
+/**
+ * Wraps the message-store scroll snapshot helpers so components can
+ * persist/restore scroll positions without duplicating requestAnimationFrame
+ * boilerplate.
+ */
+export function useScrollCache(params: UseScrollCacheParams): ScrollCacheHandle {
+  const resolved = createMemo(() => ({
+    instanceId: resolveValue(params.instanceId),
+    sessionId: resolveValue(params.sessionId),
+    scope: resolveValue(params.scope),
+  }))
+
+  const store = createMemo(() => {
+    const { instanceId } = resolved()
+    return messageStoreBus.getOrCreate(instanceId)
+  })
+
+  function persist(element: HTMLElement | null | undefined, options?: PersistScrollOptions) {
+    if (!element) {
+      return undefined
+    }
+    const target = resolved()
+    if (!target.sessionId) {
+      return undefined
+    }
+    const snapshot: Omit<ScrollSnapshot, "updatedAt"> = {
+      scrollTop: element.scrollTop,
+      atBottom: isNearBottom(element, options?.atBottomOffset ?? DEFAULT_BOTTOM_OFFSET),
+    }
+    store().setScrollSnapshot(target.sessionId, target.scope, snapshot)
+    return { ...snapshot, updatedAt: Date.now() }
+  }
+
+  function restore(element: HTMLElement | null | undefined, options?: RestoreScrollOptions) {
+    const target = resolved()
+    if (!element || !target.sessionId) {
+      options?.fallback?.()
+      options?.onApplied?.(undefined)
+      return
+    }
+    const snapshot = store().getScrollSnapshot(target.sessionId, target.scope)
+    requestAnimationFrame(() => {
+      if (!element) {
+        options?.onApplied?.(snapshot)
+        return
+      }
+      if (!snapshot) {
+        options?.fallback?.()
+        options?.onApplied?.(undefined)
+        return
+      }
+      const maxScrollTop = Math.max(element.scrollHeight - element.clientHeight, 0)
+      const nextTop = snapshot.atBottom ? maxScrollTop : Math.min(snapshot.scrollTop, maxScrollTop)
+      const behavior = options?.behavior ?? "auto"
+      element.scrollTo({ top: nextTop, behavior })
+      options?.onApplied?.(snapshot)
+    })
+  }
+
+  return { persist, restore }
+}
+
+function isNearBottom(element: HTMLElement, offset: number) {
+  const { scrollTop, scrollHeight, clientHeight } = element
+  return scrollHeight - (scrollTop + clientHeight) <= offset
+}
+
+function resolveValue<T>(value: MaybeAccessor<T>): T {
+  if (typeof value === "function") {
+    return (value as Accessor<T>)()
+  }
+  return value
+}
+
+type MaybeAccessor<T> = T | Accessor<T>