salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve session cache eviction

Browse Source
This commit is contained in:
Shantur Rathore
2025-12-09 14:05:10 +00:00
parent e54f80f20e
commit 8204143810
10 changed files with 319 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
packages/ui/src/components/instance/instance-shell.tsx
View File

@@ -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>
}
>

4
packages/ui/src/components/message-block.tsx
View File

@@ -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)

68
packages/ui/src/components/message-section.tsx
View File

@@ -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()}>

26
packages/ui/src/components/session/session-view.tsx
View File

@@ -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}

4
packages/ui/src/components/virtual-item.tsx
View File

@@ -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()
})

24
packages/ui/src/stores/message-v2/bus.ts
View File

@@ -8,17 +8,39 @@ const log = getLogger("session")
class MessageStoreBus {
private stores = new Map<string, InstanceMessageStore>()
private teardownHandlers = new Set<(instanceId: string) => void>()
private sessionClearHandlers = new Set<(instanceId: string, sessionId: string) => void>()
registerInstance(instanceId: string, store?: InstanceMessageStore): InstanceMessageStore {
if (this.stores.has(instanceId)) {
return this.stores.get(instanceId) as InstanceMessageStore
}
const resolved = store ?? createInstanceMessageStore(instanceId)
const resolved =
store ??
createInstanceMessageStore(instanceId, {
onSessionCleared: (id, sessionId) => this.notifySessionCleared(id, sessionId),
})
this.stores.set(instanceId, resolved)
return resolved
}
onSessionCleared(handler: (instanceId: string, sessionId: string) => void): () => void {
this.sessionClearHandlers.add(handler)
return () => {
this.sessionClearHandlers.delete(handler)
}
}
private notifySessionCleared(instanceId: string, sessionId: string) {
for (const handler of this.sessionClearHandlers) {
try {
handler(instanceId, sessionId)
} catch (error) {
log.error("Failed to run session clear handler", error)
}
}
}
getInstance(instanceId: string): InstanceMessageStore | undefined {
return this.stores.get(instanceId)
}

136
packages/ui/src/stores/message-v2/instance-store.ts
View File

@@ -1,7 +1,9 @@
import { batch } from "solid-js"
import { createStore, produce, reconcile } from "solid-js/store"
import type { SetStoreFunction } from "solid-js/store"
import { getLogger } from "../../lib/logger"
import type { ClientPart, MessageInfo } from "../../types/message"
import { clearRecordDisplayCacheForMessages } from "./record-display-cache"
import type {
InstanceMessageState,
MessageRecord,
@@ -17,6 +19,12 @@ import type {
UsageEntry,
} from "./types"
const storeLog = getLogger("session")
interface MessageStoreHooks {
onSessionCleared?: (instanceId: string, sessionId: string) => void
}
function createInitialState(instanceId: string): InstanceMessageState {
return {
instanceId,
@@ -202,7 +210,7 @@ export interface InstanceMessageStore {
clearInstance: () => void
}
export function createInstanceMessageStore(instanceId: string): InstanceMessageStore {
export function createInstanceMessageStore(instanceId: string, hooks?: MessageStoreHooks): InstanceMessageStore {
const [state, setState] = createStore<InstanceMessageState>(createInitialState(instanceId))
@@ -696,80 +704,92 @@ export function createInstanceMessageStore(instanceId: string): InstanceMessageS
function clearSession(sessionId: string) {
if (!sessionId) return
const messageIds = Object.values(state.messages)
.filter((record) => record.sessionId === sessionId)
.map((record) => record.id)
const messageIds = Object.values(state.messages)
.filter((record) => record.sessionId === sessionId)
.map((record) => record.id)
storeLog.info("Clearing session data", { instanceId, sessionId, messageCount: messageIds.length })
clearRecordDisplayCacheForMessages(instanceId, messageIds)
batch(() => {
setState("messages", (prev) => {
const next = { ...prev }
messageIds.forEach((id) => delete next[id])
return next
})
// Remove message-level data
setState("messages", (prev) => {
const next = { ...prev }
messageIds.forEach((id) => delete next[id])
return next
})
setState("messageInfoVersion", (prev) => {
const next = { ...prev }
messageIds.forEach((id) => delete next[id])
return next
})
setState("messageInfoVersion", (prev) => {
const next = { ...prev }
messageIds.forEach((id) => delete next[id])
return next
})
messageIds.forEach((id) => messageInfoCache.delete(id))
messageIds.forEach((id) => messageInfoCache.delete(id))
setState("pendingParts", (prev) => {
const next = { ...prev }
messageIds.forEach((id) => {
if (next[id]) delete next[id]
})
return next
})
setState("pendingParts", (prev) => {
const next = { ...prev }
messageIds.forEach((id) => {
if (next[id]) delete next[id]
})
return next
})
setState("permissions", "byMessage", (prev) => {
const next = { ...prev }
messageIds.forEach((id) => {
if (next[id]) delete next[id]
})
return next
})
setState("permissions", "byMessage", (prev) => {
const next = { ...prev }
messageIds.forEach((id) => {
if (next[id]) delete next[id]
})
return next
})
setState("usage", (prev) => {
const next = { ...prev }
delete next[sessionId]
return next
})
// Remove session-level data
setState("usage", (prev) => {
const next = { ...prev }
delete next[sessionId]
return next
})
setState("sessionRevisions", (prev) => {
const next = { ...prev }
delete next[sessionId]
return next
})
setState("sessionRevisions", (prev) => {
const next = { ...prev }
delete next[sessionId]
return next
})
setState("scrollState", (prev) => {
const next = { ...prev }
const prefix = `${sessionId}:`
Object.keys(next).forEach((key) => {
if (key.startsWith(prefix)) {
delete next[key]
}
})
return next
})
setState("scrollState", (prev) => {
const next = { ...prev }
const prefix = `${sessionId}:`
Object.keys(next).forEach((key) => {
if (key.startsWith(prefix)) {
delete next[key]
}
})
return next
})
setState("sessions", sessionId, (current) => {
if (!current) return current
return { ...current, messageIds: [] }
})
setState("sessions", (prev) => {
const next = { ...prev }
delete next[sessionId]
return next
})
setState("sessions", (prev) => {
const next = { ...prev }
delete next[sessionId]
return next
})
setState("sessionOrder", (ids) => ids.filter((id) => id !== sessionId))
}
setState("sessionOrder", (ids) => ids.filter((id) => id !== sessionId))
})
hooks?.onSessionCleared?.(instanceId, sessionId)
}
function clearInstance() {
messageInfoCache.clear()
setState(reconcile(createInitialState(instanceId)))
}
return {
instanceId,
state,
setState,

7
packages/ui/src/stores/message-v2/record-display-cache.ts
View File

@@ -44,3 +44,10 @@ export function clearRecordDisplayCacheForInstance(instanceId: string) {
}
}
}
export function clearRecordDisplayCacheForMessages(instanceId: string, messageIds: Iterable<string>) {
for (const messageId of messageIds) {
if (typeof messageId !== "string" || messageId.length === 0) continue
recordDisplayCache.delete(makeCacheKey(instanceId, messageId))
}
}

27
packages/ui/src/stores/session-state.ts
View File

@@ -39,7 +39,31 @@ const [loading, setLoading] = createSignal({
const [messagesLoaded, setMessagesLoaded] = createSignal<Map<string, Set<string>>>(new Map())
const [sessionInfoByInstance, setSessionInfoByInstance] = createSignal<Map<string, Map<string, SessionInfo>>>(new Map())
function clearLoadedFlag(instanceId: string, sessionId: string) {
if (!instanceId || !sessionId) return
setMessagesLoaded((prev) => {
const existing = prev.get(instanceId)
if (!existing || !existing.has(sessionId)) {
return prev
}
const next = new Map(prev)
const updated = new Set(existing)
updated.delete(sessionId)
if (updated.size === 0) {
next.delete(instanceId)
} else {
next.set(instanceId, updated)
}
return next
})
}
messageStoreBus.onSessionCleared((instanceId, sessionId) => {
clearLoadedFlag(instanceId, sessionId)
})
function getDraftKey(instanceId: string, sessionId: string): string {
return `${instanceId}:${sessionId}`
}
@@ -357,8 +381,9 @@ export {
setSessionCompactionState,
setSessionPendingPermission,
setActiveSession,
setActiveParentSession,
clearActiveParentSession,
getActiveSession,
getActiveParentSession,

3
packages/ui/src/stores/sessions.ts
View File

@@ -26,7 +26,8 @@ import {
setActiveParentSession,
setActiveSession,
setSessionDraftPrompt,
} from "./session-state"
} from "./session-state"
import { getDefaultModel } from "./session-models"
import {
createSession,