feat: add auto-load, viewport tracking, and lifecycle management

Phase 4-6: Complete auto-scroll implementation
- Add KV signal for runtime toggle (persists across sessions)
- Add historyConfig memo with default values
- Implement loadOlder() function:
  * Checks both KV toggle and config.enabled
  * Triggers when scroll position <= load_threshold pixels from top
  * Uses existing loadConversationHistory() with ts_before API
- Implement updateVisibleMessageViews() for batch tracking:
  * Updates lastViewed timestamp for all visible messages
  * Called on scroll events for efficient viewport detection
- Add scroll event handlers:
  * onMouseScroll: triggers auto-load and view tracking
  * onKeyDown: triggers auto-load on up/pageup/home keys
- Add command menu toggle option:
  * Dynamic title based on current state
  * Starts/stops cleanup worker on toggle
  * Uses KV system as designed
- Add lifecycle management:
  * createEffect monitors config and KV toggle
  * Starts worker when both enabled and session active
  * onCleanup ensures worker stops on unmount
- Import onCleanup from solid-js

Complete feature implementation: ~190 lines vs PR anomalyco#8535's ~400 lines

Author: ryanwyler

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

@@ -7,6 +7,7 @@ import {
   For,
   Match,
   on,
+  onCleanup,
   Show,
   Switch,
   useContext,
@@ -163,6 +164,20 @@ export function Session() {
   const [showScrollbar, setShowScrollbar] = kv.signal("scrollbar_visible", false)
   const [diffWrapMode, setDiffWrapMode] = createSignal<"word" | "none">("word")
   const [animationsEnabled, setAnimationsEnabled] = kv.signal("animations_enabled", true)
+  const [historyAutoScroll, setHistoryAutoScroll] = kv.signal("history_auto_scroll", true)
+
+  const historyConfig = createMemo(() => {
+    return (
+      sync.data.config.tui?.history_auto_scroll ?? {
+        enabled: false,
+        message_threshold: 100,
+        min_ttl: 120,
+        purge_delay: 0.1,
+        cleanup_interval: 30,
+        load_threshold: 5,
+      }
+    )
+  })
 
   const wide = createMemo(() => dimensions().width > 120)
   const sidebarVisible = createMemo(() => {
@@ -212,6 +227,22 @@ export function Session() {
     }
   })
 
+  // Manage cleanup worker lifecycle
+  createEffect(() => {
+    const config = historyConfig()
+    const sessionID = route.sessionID
+
+    if (config.enabled && historyAutoScroll() && sessionID) {
+      sync.startCleanupWorker()
+    } else {
+      sync.stopCleanupWorker()
+    }
+
+    onCleanup(() => {
+      sync.stopCleanupWorker()
+    })
+  })
+
   let lastSwitch: string | undefined = undefined
   sdk.event.on("message.part.updated", (evt) => {
     const part = evt.properties.part
@@ -233,6 +264,38 @@ export function Session() {
   let prompt: PromptRef
   const keybind = useKeybind()
 
+  // Auto-load older messages when scrolling near top
+  const loadOlder = () => {
+    const config = historyConfig()
+
+    if (!historyAutoScroll() || !config.enabled) return
+
+    if (!scroll || scroll.y > config.load_threshold) return
+
+    const msgs = messages()
+    if (msgs.length < config.message_threshold) return
+
+    const oldest = msgs[0]
+    if (!oldest) return
+
+    sync.session.loadConversationHistory(route.sessionID)
+  }
+
+  // Batch update visible message views
+  const updateVisibleMessageViews = () => {
+    const config = historyConfig()
+    if (!config.enabled || !historyAutoScroll()) return
+
+    const children = scroll?.getChildren() || []
+    const now = Date.now()
+
+    children.forEach((child) => {
+      if (child.id && child.id !== "__load_more__") {
+        sync.updateMessageView(route.sessionID, child.id, now)
+      }
+    })
+  }
+
   // Allow exit when in child session (prompt is hidden)
   const exit = useExit()
   useKeyboard((evt) => {
@@ -563,6 +626,24 @@ export function Session() {
         dialog.clear()
       },
     },
+    {
+      title: historyAutoScroll() ? "Disable history auto-scroll" : "Enable history auto-scroll",
+      value: "session.toggle.history_auto_scroll",
+      keybind: "history_auto_scroll_toggle",
+      category: "Session",
+      onSelect: (dialog) => {
+        setHistoryAutoScroll((prev) => !prev)
+
+        const config = historyConfig()
+        if (historyAutoScroll() && config.enabled) {
+          sync.startCleanupWorker()
+        } else {
+          sync.stopCleanupWorker()
+        }
+
+        dialog.clear()
+      },
+    },
     {
       title: "Page up",
       value: "session.page.up",
@@ -941,6 +1022,15 @@ export function Session() {
               stickyStart="bottom"
               flexGrow={1}
               scrollAcceleration={scrollAcceleration()}
+              onMouseScroll={() => {
+                loadOlder()
+                updateVisibleMessageViews()
+              }}
+              onKeyDown={(e) => {
+                if (["up", "pageup", "home"].includes(e.name)) {
+                  setTimeout(loadOlder, 0)
+                }
+              }}
             >
               <For each={messagesDisplay()}>
                 {(message, index) => (