@bojackduy/opencode-telescope 0.1.12 → 0.1.14

package/telescope.tsx

@@ -2,72 +2,209 @@
 import type { TuiPluginApi } from "@opencode-ai/plugin/tui"
 import type { InputRenderable, ParsedKey, ScrollBoxRenderable } from "@opentui/core"
 import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
-import { For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
+import { For, Show, batch as solidBatch, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 import { ConversationPreview, PreviewHeader } from "./components/preview.tsx"
 import { EmptyState, ResultRow, SkeletonRow } from "./components/result-list.tsx"
 import {
-  loadConversationWindow,
+  loadConversationAfter,
+  loadConversationAround,
+  loadConversationBefore,
   recentSessionMessages,
   resolveDatabasePath,
   searchSessionMessages,
   type ConversationPreviewPart,
   type SearchResult,
+  type SearchRole,
 } from "./search.ts"
 import { debug } from "./ui/debug.ts"
 import { syntaxStyle } from "./ui/format.ts"
-import { isKey, prevent } from "./ui/keyboard.ts"
+import type { TelescopeConfig } from "./ui/config.ts"
+import { inputSafeKeys, keyListLabel, matchesKey, prevent } from "./ui/keyboard.ts"
 import { jumpToRenderedTarget, messageTargetID, previewScrollAmount, scrollPreviewToTarget } from "./ui/render-target.ts"
 
-export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) => {
+export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; onClose: () => void }) => {
+  type OwnerFilter = "all" | SearchRole
   const dimensions = useTerminalDimensions()
   const [query, setQuery] = createSignal("")
+  const [ownerFilter, setOwnerFilter] = createSignal<OwnerFilter>("all")
   const [results, setResults] = createSignal<SearchResult[]>([])
   const [previewParts, setPreviewParts] = createSignal<ConversationPreviewPart[]>([])
   const [selected, setSelected] = createSignal(0)
+  const [resultBaseOffset, setResultBaseOffset] = createSignal(0)
+  const [nextResultOffset, setNextResultOffset] = createSignal(0)
   const [busy, setBusy] = createSignal(false)
   const [error, setError] = createSignal("")
   const [mode, setMode] = createSignal<"normal" | "insert">("normal")
   const [loading, setLoading] = createSignal(true)
   const [hasMore, setHasMore] = createSignal(true)
   const [loadingMore, setLoadingMore] = createSignal(false)
-  const BATCH_SIZE = 25
-  const RECENT_BATCH_SIZE = 15
-  const INITIAL_PREVIEW_BEFORE = 3
-  const INITIAL_PREVIEW_AFTER = 6
-  const PREVIEW_EXPAND_STEP = 5
-  const [previewRange, setPreviewRange] = createSignal({ before: INITIAL_PREVIEW_BEFORE, after: INITIAL_PREVIEW_AFTER })
+  const [loadingPreviousResults, setLoadingPreviousResults] = createSignal(false)
+  const [prefetchingResults, setPrefetchingResults] = createSignal(false)
+  const [resultPageInfo, setResultPageInfo] = createSignal({ loadedUntil: 0, hasMore: true, pageSize: 0, lastOffset: 0, lastAdded: 0 })
+  const [hasMorePreviewBefore, setHasMorePreviewBefore] = createSignal(false)
+  const [hasMorePreviewAfter, setHasMorePreviewAfter] = createSignal(false)
+  const [loadingPreviewMore, setLoadingPreviewMore] = createSignal(false)
+  const [prefetchingPreviewBefore, setPrefetchingPreviewBefore] = createSignal(false)
+  const [prefetchingPreviewAfter, setPrefetchingPreviewAfter] = createSignal(false)
+  const MIN_SEARCH_BATCH_SIZE = 25
+  const MIN_RECENT_BATCH_SIZE = 15
+  const RESULT_OVERSCAN_MULTIPLIER = 2
+  const RESULT_BATCH_VIEWPORTS = 4
+  const RESULT_PREFETCH_VIEWPORTS = 10
+  const RESULT_CACHE_BEHIND_VIEWPORTS = 6
+  const INITIAL_PREVIEW_BEFORE = 20
+  const INITIAL_PREVIEW_AFTER = 30
+  const PREVIEW_PAGE_SIZE = 20
+  const PREVIEW_PREFETCH_VIEWPORTS = 0.5
   let input: InputRenderable | undefined
   let resultScroll: ScrollBoxRenderable | undefined
   let previewScroll: ScrollBoxRenderable | undefined
 
   const theme = createMemo(() => props.api.theme.current)
   const syntax = createMemo(() => syntaxStyle(theme()))
-  const selectedResult = createMemo(() => results()[selected()])
+  const ownerRole = createMemo(() => ownerFilter() === "all" ? undefined : ownerFilter() as SearchRole)
+  const ownerLabel = createMemo(() => ownerFilter() === "user" ? "you" : ownerFilter())
+  const inputKeys = createMemo(() => ({
+    moveDown: inputSafeKeys(props.config.keys.moveDown),
+    moveUp: inputSafeKeys(props.config.keys.moveUp),
+    open: inputSafeKeys(props.config.keys.open),
+    normalMode: inputSafeKeys(props.config.keys.normalMode),
+  }))
+  const normalHelpItems = createMemo(() => [
+    `${keyListLabel(props.config.keys.moveUp)}/${keyListLabel(props.config.keys.moveDown)} move`,
+    `${keyListLabel(props.config.keys.scrollPreviewDown)}/${keyListLabel(props.config.keys.scrollPreviewUp)} scroll`,
+    `${keyListLabel(props.config.keys.toggleOwner)} owner`,
+    `${keyListLabel(props.config.keys.insertMode)} search`,
+    `${keyListLabel(props.config.keys.open)} open`,
+    `${keyListLabel(props.config.keys.close)} close`,
+  ])
+  const selectedResult = createMemo(() => results()[selected() - resultBaseOffset()])
   const popupWidth = createMemo(() => Math.max(72, Math.min(dimensions().width - 2, Math.floor(dimensions().width * 0.92))))
   const leftWidth = createMemo(() => Math.max(36, Math.min(64, Math.floor(popupWidth() * 0.36))))
   const height = createMemo(() => Math.max(18, dimensions().height - 8))
   const verticalOffset = createMemo(() => Math.floor(dimensions().height / 4 - height() / 2) - 2)
   const dbPath = createMemo(() => resolveDatabasePath())
   const directory = props.api.state.path.directory
+  let advanceSelectionAfterLoad = false
+  let advanceSelectionBeforeLoad = false
+  let resultPrefetchTimer: ReturnType<typeof setTimeout> | undefined
+  let resultPreviousTimer: ReturnType<typeof setTimeout> | undefined
+  let previewBeforeTimer: ReturnType<typeof setTimeout> | undefined
+  let previewAfterTimer: ReturnType<typeof setTimeout> | undefined
+  let pendingPreviewBefore: { previousContentHeight: number; preserveScroll: boolean; visibleLoad: boolean } | undefined
+  let pendingPreviewAfterVisible = false
+  const cancelPreviewPrefetch = () => {
+    if (previewBeforeTimer) clearTimeout(previewBeforeTimer)
+    if (previewAfterTimer) clearTimeout(previewAfterTimer)
+    previewBeforeTimer = undefined
+    previewAfterTimer = undefined
+    pendingPreviewBefore = undefined
+    pendingPreviewAfterVisible = false
+    setPrefetchingPreviewBefore(false)
+    setPrefetchingPreviewAfter(false)
+    setLoadingPreviewMore(false)
+  }
+  onCleanup(() => {
+    if (resultPrefetchTimer) clearTimeout(resultPrefetchTimer)
+    if (resultPreviousTimer) clearTimeout(resultPreviousTimer)
+    cancelPreviewPrefetch()
+  })
+
+  const resultRowHeight = createMemo(() => leftWidth() >= 48 ? 3 : 4)
+  const visibleResultRows = () => {
+    const viewportHeight = resultScroll?.height || Math.max(8, height() - 7)
+    return Math.max(5, Math.floor(viewportHeight / resultRowHeight()))
+  }
+  const searchBatchSize = () => Math.max(MIN_SEARCH_BATCH_SIZE, visibleResultRows() * RESULT_BATCH_VIEWPORTS)
+  const recentBatchSize = () => Math.max(MIN_RECENT_BATCH_SIZE, visibleResultRows() * RESULT_BATCH_VIEWPORTS)
+  const resultPrefetchThreshold = () => visibleResultRows() * RESULT_PREFETCH_VIEWPORTS
+  const resultPrefetchState = () => {
+    const cachedEnd = resultBaseOffset() + results().length
+    const rowsAhead = Math.max(0, cachedEnd - selected() - 1)
+    const threshold = resultPrefetchThreshold()
+    return { cachedEnd, rowsAhead, threshold, shouldPrefetch: rowsAhead <= threshold }
+  }
+  const trimResultCache = (items: SearchResult[], anchorIndex: number) => {
+    const base = resultBaseOffset()
+    const keepBehind = visibleResultRows() * RESULT_CACHE_BEHIND_VIEWPORTS
+    const minOffset = Math.max(0, anchorIndex - keepBehind)
+    const drop = Math.min(Math.max(0, minOffset - base), Math.max(0, items.length - 1))
+    if (drop === 0) return { base, items }
+
+    const nextBase = base + drop
+    debug.log("results:evict", { fromBase: base, toBase: nextBase, dropped: drop, kept: items.length - drop, anchorIndex })
+    return { base: nextBase, items: items.slice(drop) }
+  }
+  const resultRenderWindow = createMemo(() => {
+    const base = resultBaseOffset()
+    const cached = results()
+    const visible = visibleResultRows()
+    const overscan = visible * RESULT_OVERSCAN_MULTIPLIER
+    const index = selected()
+    const cachedStart = Math.max(0, index - overscan - base)
+    const cachedEnd = Math.min(cached.length, index + visible + overscan - base)
+    return { start: base + cachedStart, end: base + cachedEnd, items: cached.slice(cachedStart, cachedEnd) }
+  })
+
+  let lastResultRenderWindow = ""
+  createEffect(() => {
+    const window = resultRenderWindow()
+    const key = `${window.start}:${window.end}:${resultBaseOffset()}:${nextResultOffset()}:${results().length}`
+    if (key === lastResultRenderWindow) return
+    lastResultRenderWindow = key
+    debug.log("results:render-window", {
+      selected: selected(),
+      baseOffset: resultBaseOffset(),
+      nextOffset: nextResultOffset(),
+      totalLoaded: results().length,
+      start: window.start,
+      end: window.end,
+      rendered: window.items.length,
+      visibleRows: visibleResultRows(),
+      overscanRows: visibleResultRows() * RESULT_OVERSCAN_MULTIPLIER,
+      pageInfo: resultPageInfo(),
+    })
+  })
 
   createEffect(() => {
     const q = query().trim()
+    const role = ownerRole()
     setError("")
     setHasMore(true)
+    if (resultPrefetchTimer) clearTimeout(resultPrefetchTimer)
+    if (resultPreviousTimer) clearTimeout(resultPreviousTimer)
+    resultPrefetchTimer = undefined
+    resultPreviousTimer = undefined
+    advanceSelectionAfterLoad = false
+    advanceSelectionBeforeLoad = false
+    setLoadingMore(false)
+    setLoadingPreviousResults(false)
+    setPrefetchingResults(false)
     const db = dbPath()
     const dir = directory
 
     if (!q) {
       setLoading(true)
+      const limit = recentBatchSize()
       const timer = setTimeout(() => {
         debug.time("query:recent")
         try {
-          const batch = recentSessionMessages({ limit: RECENT_BATCH_SIZE, offset: 0, dbPath: db, directory: dir })
-          setResults(batch)
-          setHasMore(batch.length >= RECENT_BATCH_SIZE)
-          setSelected(0)
+          const batch = recentSessionMessages({ limit, offset: 0, dbPath: db, directory: dir, role })
+          solidBatch(() => {
+            setResults(batch)
+            setResultBaseOffset(0)
+            setNextResultOffset(batch.length)
+            setHasMore(batch.length >= limit)
+            setResultPageInfo({ loadedUntil: batch.length, hasMore: batch.length >= limit, pageSize: limit, lastOffset: 0, lastAdded: batch.length })
+            setSelected(0)
+          })
         } catch (err) {
-          setResults([])
+          solidBatch(() => {
+            setResults([])
+            setResultBaseOffset(0)
+            setNextResultOffset(0)
+            setResultPageInfo({ loadedUntil: 0, hasMore: false, pageSize: limit, lastOffset: 0, lastAdded: 0 })
+          })
           setError(err instanceof Error ? err.message : String(err))
         }
         debug.timeEnd("query:recent")
@@ -79,15 +216,26 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
 
     setLoading(true)
     setBusy(true)
+    const limit = searchBatchSize()
     const timer = setTimeout(() => {
       debug.time("query:search")
       try {
-        const batch = searchSessionMessages(q, { limit: BATCH_SIZE, offset: 0, dbPath: db, directory: dir })
-        setResults(batch)
-        setHasMore(batch.length >= BATCH_SIZE)
-        setSelected(0)
+        const batch = searchSessionMessages(q, { limit, offset: 0, dbPath: db, directory: dir, role })
+        solidBatch(() => {
+          setResults(batch)
+          setResultBaseOffset(0)
+          setNextResultOffset(batch.length)
+          setHasMore(batch.length >= limit)
+          setResultPageInfo({ loadedUntil: batch.length, hasMore: batch.length >= limit, pageSize: limit, lastOffset: 0, lastAdded: batch.length })
+          setSelected(0)
+        })
       } catch (err) {
-        setResults([])
+        solidBatch(() => {
+          setResults([])
+          setResultBaseOffset(0)
+          setNextResultOffset(0)
+          setResultPageInfo({ loadedUntil: 0, hasMore: false, pageSize: limit, lastOffset: 0, lastAdded: 0 })
+        })
         setError(err instanceof Error ? err.message : String(err))
       } finally {
         debug.timeEnd("query:search")
@@ -98,14 +246,145 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
     onCleanup(() => clearTimeout(timer))
   })
 
+  const loadMoreResults = (advance = false) => {
+    if (advance) advanceSelectionAfterLoad = true
+    if (!hasMore()) {
+      advanceSelectionAfterLoad = false
+      return
+    }
+    if (loadingMore() || loadingPreviousResults() || prefetchingResults() || busy() || loading()) return
+
+    const offset = nextResultOffset()
+    const q = query().trim()
+    const role = ownerRole()
+    const db = dbPath()
+    const dir = directory
+    const limit = q ? searchBatchSize() : recentBatchSize()
+
+    advance ? setLoadingMore(true) : setPrefetchingResults(true)
+    debug.time("query:load-more")
+    try {
+      const batch = q
+        ? searchSessionMessages(q, { limit, offset, dbPath: db, directory: dir, role })
+        : recentSessionMessages({ limit, offset, dbPath: db, directory: dir, role })
+      const nextHasMore = batch.length >= limit
+      const nextLoadedUntil = offset + batch.length
+      const previousSelected = selected()
+      const nextSelected = advanceSelectionAfterLoad && batch.length > 0 ? offset : selected()
+      const nextCache = trimResultCache([...results(), ...batch], nextSelected)
+      debug.log("results:prefetch", {
+        offset,
+        limit,
+        added: batch.length,
+        baseOffset: nextCache.base,
+        cached: nextCache.items.length,
+        totalLoaded: nextLoadedUntil,
+        hasMore: nextHasMore,
+        advance,
+      })
+      const shouldAdvance = advanceSelectionAfterLoad
+      solidBatch(() => {
+        setResultBaseOffset(nextCache.base)
+        setNextResultOffset(nextLoadedUntil)
+        setResults(nextCache.items)
+        setResultPageInfo({ loadedUntil: nextLoadedUntil, hasMore: nextHasMore, pageSize: limit, lastOffset: offset, lastAdded: batch.length })
+        if (!nextHasMore) setHasMore(false)
+        if (shouldAdvance && batch.length > 0) setSelected(offset)
+      })
+      if (shouldAdvance) {
+        debug.log("results:advance-after-load", { from: previousSelected, offset, added: batch.length })
+        advanceSelectionAfterLoad = false
+      }
+    } catch (err) {
+      debug.log("results:load-more:error", err instanceof Error ? err.message : String(err))
+      advanceSelectionAfterLoad = false
+    } finally {
+      debug.timeEnd("query:load-more")
+      advance ? setLoadingMore(false) : setPrefetchingResults(false)
+    }
+  }
+
+  const loadPreviousResults = (advance = false) => {
+    if (advance) advanceSelectionBeforeLoad = true
+    const base = resultBaseOffset()
+    if (base <= 0) {
+      advanceSelectionBeforeLoad = false
+      return
+    }
+    if (loadingMore() || loadingPreviousResults() || prefetchingResults() || busy() || loading()) return
+
+    const q = query().trim()
+    const role = ownerRole()
+    const db = dbPath()
+    const dir = directory
+    const pageSize = q ? searchBatchSize() : recentBatchSize()
+    const offset = Math.max(0, base - pageSize)
+    const limit = base - offset
+
+    setLoadingPreviousResults(true)
+    debug.time("query:load-before")
+    try {
+      const batch = q
+        ? searchSessionMessages(q, { limit, offset, dbPath: db, directory: dir, role })
+        : recentSessionMessages({ limit, offset, dbPath: db, directory: dir, role })
+      const nextSelected = advanceSelectionBeforeLoad && batch.length > 0 ? base - 1 : selected()
+      debug.log("results:load-before", { offset, limit, added: batch.length, fromBase: base, toBase: offset, cached: results().length + batch.length, advance })
+      const shouldAdvance = advanceSelectionBeforeLoad
+      solidBatch(() => {
+        setResultBaseOffset(offset)
+        setResults([...batch, ...results()])
+        setResultPageInfo({ loadedUntil: nextResultOffset(), hasMore: hasMore(), pageSize, lastOffset: offset, lastAdded: batch.length })
+        if (shouldAdvance && batch.length > 0) setSelected(nextSelected)
+      })
+      if (shouldAdvance) advanceSelectionBeforeLoad = false
+    } catch (err) {
+      debug.log("results:load-before:error", err instanceof Error ? err.message : String(err))
+      advanceSelectionBeforeLoad = false
+    } finally {
+      debug.timeEnd("query:load-before")
+      setLoadingPreviousResults(false)
+    }
+  }
+
+  const scheduleResultPrefetch = (advance = false) => {
+    if (advance) advanceSelectionAfterLoad = true
+    if (resultPrefetchTimer || loadingMore() || loadingPreviousResults() || prefetchingResults()) return
+    debug.log("results:prefetch-scheduled", { advance, pendingAdvance: advanceSelectionAfterLoad, pageInfo: resultPageInfo() })
+    resultPrefetchTimer = setTimeout(() => {
+      resultPrefetchTimer = undefined
+      loadMoreResults(advanceSelectionAfterLoad)
+    }, 1)
+  }
+
+  const schedulePreviousResultsLoad = (advance = false) => {
+    if (advance) advanceSelectionBeforeLoad = true
+    if (resultPreviousTimer || loadingMore() || loadingPreviousResults() || prefetchingResults()) return
+    debug.log("results:load-before-scheduled", { advance, pendingAdvance: advanceSelectionBeforeLoad, baseOffset: resultBaseOffset(), pageInfo: resultPageInfo() })
+    resultPreviousTimer = setTimeout(() => {
+      resultPreviousTimer = undefined
+      loadPreviousResults(advanceSelectionBeforeLoad)
+    }, 1)
+  }
+
+  let lastResultPrefetchDecision = ""
+
   const move = (delta: number) => {
     if (results().length === 0) return
     setSelected((index) => {
+      const base = resultBaseOffset()
+      const cachedEnd = base + results().length
       const next = index + delta
       let finalIndex = next
-      if (next < 0) finalIndex = results().length - 1
-      else if (next >= results().length) finalIndex = results().length - 1
-      
+      if (next < 0) finalIndex = cachedEnd - 1
+      else if (next < base) {
+        schedulePreviousResultsLoad(true)
+        finalIndex = base
+      }
+      else if (next >= cachedEnd) {
+        if (hasMore()) scheduleResultPrefetch(true)
+        finalIndex = cachedEnd - 1
+      }
+       
       if (finalIndex !== index) debug.time("nav:total")
       return finalIndex
     })
@@ -113,7 +392,8 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
 
   createEffect(() => {
     const index = selected()
-    const row = resultScroll?.getChildren()[index]
+    const window = resultRenderWindow()
+    const row = resultScroll?.getChildren()[index - window.start]
     if (!resultScroll || !row) return
     const y = row.y - resultScroll.y
     if (y < 0) {
@@ -126,52 +406,160 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
   })
 
   createEffect(() => {
-    const index = selected()
-    const total = results().length
-    if (index < total - 3) return
-    if (!hasMore() || loadingMore() || busy() || loading()) return
+    const state = resultPrefetchState()
+    const blockedBy = !hasMore()
+      ? "no-more"
+      : loadingMore()
+        ? "loading-more"
+        : loadingPreviousResults()
+          ? "loading-before"
+          : prefetchingResults()
+            ? "prefetching"
+            : busy()
+              ? "busy"
+              : loading()
+                ? "loading"
+                : ""
+    const decisionKey = `${selected()}:${state.cachedEnd}:${state.rowsAhead}:${state.threshold}:${blockedBy}:${state.shouldPrefetch}`
+    if (decisionKey !== lastResultPrefetchDecision) {
+      lastResultPrefetchDecision = decisionKey
+      debug.log("results:prefetch-decision", { selected: selected(), ...state, blockedBy: blockedBy || undefined })
+    }
+    if (!state.shouldPrefetch || blockedBy) return
 
-    const q = query().trim()
-    const db = dbPath()
-    const dir = directory
+    const timer = setTimeout(() => scheduleResultPrefetch(false), 100)
+    onCleanup(() => clearTimeout(timer))
+  })
 
-    setLoadingMore(true)
-    const timer = setTimeout(() => {
-      debug.time("query:load-more")
-      try {
-        const batch = q
-          ? searchSessionMessages(q, { limit: BATCH_SIZE, offset: total, dbPath: db, directory: dir })
-          : recentSessionMessages({ limit: RECENT_BATCH_SIZE, offset: total, dbPath: db, directory: dir })
-        setResults((prev) => [...prev, ...batch])
-        if (batch.length < (q ? BATCH_SIZE : RECENT_BATCH_SIZE)) setHasMore(false)
-      } catch {
-        // keep existing results on error
-      } finally {
-        debug.timeEnd("query:load-more")
-        setLoadingMore(false)
+  const previewContentHeight = () => {
+    const children = previewScroll?.getChildren()
+    const lastChild = children?.[children.length - 1] as { y: number; height: number } | undefined
+    return lastChild ? lastChild.y + lastChild.height : 0
+  }
+
+  const loadPreviewBefore = (previousContentHeight = previewContentHeight(), preserveScroll = true, visibleLoad = false) => {
+    const item = selectedResult()
+    const first = previewParts()[0]
+    if (!item || !first || loadingPreviewMore() || prefetchingPreviewBefore()) return
+    visibleLoad ? setLoadingPreviewMore(true) : setPrefetchingPreviewBefore(true)
+    debug.time("preview:load-before")
+    try {
+      const page = loadConversationBefore(item, { id: first.id, timeCreated: first.timeCreated }, { limit: PREVIEW_PAGE_SIZE, dbPath: dbPath() })
+      debug.log("preview:load-before", {
+        item: item.id,
+        added: page.parts.length,
+        hasMoreBefore: page.hasMoreBefore,
+        preserveScroll,
+        visibleLoad,
+        first: page.parts[0]?.id,
+        last: page.parts.at(-1)?.id,
+      })
+      if (page.parts.length > 0) {
+        setPreviewParts((prev) => [...page.parts, ...prev])
+        if (preserveScroll) {
+          setTimeout(() => {
+            const delta = previewContentHeight() - previousContentHeight
+            if (delta > 0) previewScroll?.scrollBy(delta)
+          }, 1)
+        }
       }
-    }, 100)
-    onCleanup(() => { clearTimeout(timer); setLoadingMore(false) })
-  })
+      setHasMorePreviewBefore(page.hasMoreBefore)
+    } catch (err) {
+      debug.log("preview:load-before:error", err instanceof Error ? err.message : String(err))
+    } finally {
+      debug.timeEnd("preview:load-before")
+      visibleLoad ? setLoadingPreviewMore(false) : setPrefetchingPreviewBefore(false)
+    }
+  }
+
+  const loadPreviewAfter = (visibleLoad = false) => {
+    const item = selectedResult()
+    const last = previewParts().at(-1)
+    if (!item || !last || loadingPreviewMore() || prefetchingPreviewAfter()) return
+    visibleLoad ? setLoadingPreviewMore(true) : setPrefetchingPreviewAfter(true)
+    debug.time("preview:load-after")
+    try {
+      const page = loadConversationAfter(item, { id: last.id, timeCreated: last.timeCreated }, { limit: PREVIEW_PAGE_SIZE, dbPath: dbPath() })
+      debug.log("preview:load-after", {
+        item: item.id,
+        added: page.parts.length,
+        hasMoreAfter: page.hasMoreAfter,
+        visibleLoad,
+        first: page.parts[0]?.id,
+        last: page.parts.at(-1)?.id,
+      })
+      if (page.parts.length > 0) setPreviewParts((prev) => [...prev, ...page.parts])
+      setHasMorePreviewAfter(page.hasMoreAfter)
+    } catch (err) {
+      debug.log("preview:load-after:error", err instanceof Error ? err.message : String(err))
+    } finally {
+      debug.timeEnd("preview:load-after")
+      visibleLoad ? setLoadingPreviewMore(false) : setPrefetchingPreviewAfter(false)
+    }
+  }
+
+  const schedulePreviewBefore = (previousContentHeight = previewContentHeight(), preserveScroll = true, visibleLoad = false) => {
+    if (!hasMorePreviewBefore() || loadingPreviewMore() || prefetchingPreviewBefore()) return
+    if (previewBeforeTimer) {
+      if (pendingPreviewBefore) {
+        pendingPreviewBefore.preserveScroll = pendingPreviewBefore.preserveScroll && preserveScroll
+        pendingPreviewBefore.visibleLoad = pendingPreviewBefore.visibleLoad || visibleLoad
+      }
+      return
+    }
+    pendingPreviewBefore = { previousContentHeight, preserveScroll, visibleLoad }
+    debug.log("preview:prefetch-before-scheduled", { preserveScroll, visibleLoad })
+    previewBeforeTimer = setTimeout(() => {
+      const pending = pendingPreviewBefore
+      previewBeforeTimer = undefined
+      pendingPreviewBefore = undefined
+      if (pending) loadPreviewBefore(pending.previousContentHeight, pending.preserveScroll, pending.visibleLoad)
+    }, 1)
+  }
+
+  const schedulePreviewAfter = (visibleLoad = false) => {
+    if (!hasMorePreviewAfter() || loadingPreviewMore() || prefetchingPreviewAfter()) return
+    pendingPreviewAfterVisible = pendingPreviewAfterVisible || visibleLoad
+    if (previewAfterTimer) return
+    debug.log("preview:prefetch-after-scheduled", { visibleLoad })
+    previewAfterTimer = setTimeout(() => {
+      const pendingVisibleLoad = pendingPreviewAfterVisible
+      previewAfterTimer = undefined
+      pendingPreviewAfterVisible = false
+      loadPreviewAfter(pendingVisibleLoad)
+    }, 1)
+  }
 
   let lastPreviewItemId = ""
   createEffect(() => {
     const item = selectedResult()
-    const range = previewRange()
     if (!item) {
+      cancelPreviewPrefetch()
       setPreviewParts([])
+      setHasMorePreviewBefore(false)
+      setHasMorePreviewAfter(false)
       return
     }
-    if (item.id !== lastPreviewItemId) {
-      lastPreviewItemId = item.id
-      debug.log("preview:new-item", item.sessionTitle?.slice(0, 40) ?? item.id.slice(-8))
-      setPreviewRange({ before: INITIAL_PREVIEW_BEFORE, after: INITIAL_PREVIEW_AFTER })
-      return
-    }
+    if (item.id === lastPreviewItemId) return
+    lastPreviewItemId = item.id
+    cancelPreviewPrefetch()
+    debug.log("preview:new-item", item.sessionTitle?.slice(0, 40) ?? item.id.slice(-8))
     const db = dbPath()
     debug.time("preview:load")
     try {
-      setPreviewParts(loadConversationWindow(item, { before: range.before, after: range.after, dbPath: db }))
+      const page = loadConversationAround(item, { before: INITIAL_PREVIEW_BEFORE, after: INITIAL_PREVIEW_AFTER, dbPath: db })
+      debug.log("preview:init", {
+        item: item.id,
+        session: item.sessionID,
+        parts: page.parts.length,
+        hasMoreBefore: page.hasMoreBefore,
+        hasMoreAfter: page.hasMoreAfter,
+        first: page.parts[0]?.id,
+        last: page.parts.at(-1)?.id,
+      })
+      setPreviewParts(page.parts)
+      setHasMorePreviewBefore(page.hasMoreBefore)
+      setHasMorePreviewAfter(page.hasMoreAfter)
     } catch {}
     debug.timeEnd("nav:total")
     debug.timeEnd("preview:load")
@@ -181,16 +569,36 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
     const item = selectedResult()
     if (!item) return
     const interval = setInterval(() => {
+      if (loadingPreviewMore() || prefetchingPreviewBefore() || prefetchingPreviewAfter()) return
       const scroll = previewScroll
       const children = scroll?.getChildren()
       if (!scroll || !children || children.length === 0) return
-      const range = previewRange()
       const lastChild = children[children.length - 1] as { y: number; height: number }
       const totalContentHeight = lastChild.y + lastChild.height
-      const atTop = scroll.y <= 0 && range.before > 0
+      const atTop = scroll.y <= 0
+      const prefetchDistance = Math.max(2, Math.floor(scroll.height * PREVIEW_PREFETCH_VIEWPORTS))
+      const nearTop = scroll.y <= prefetchDistance
       const atBottom = scroll.y + scroll.height >= totalContentHeight - 1
-      if (atTop) setPreviewRange((prev) => ({ ...prev, before: prev.before + PREVIEW_EXPAND_STEP }))
-      if (atBottom) setPreviewRange((prev) => ({ ...prev, after: prev.after + PREVIEW_EXPAND_STEP }))
+      const nearBottom = scroll.y + scroll.height >= totalContentHeight - prefetchDistance
+      if (nearTop || nearBottom) {
+        debug.log("preview:scroll-edge", {
+          y: scroll.y,
+          height: scroll.height,
+          contentHeight: totalContentHeight,
+          prefetchDistance,
+          atTop,
+          nearTop,
+          atBottom,
+          nearBottom,
+          hasMoreBefore: hasMorePreviewBefore(),
+          hasMoreAfter: hasMorePreviewAfter(),
+          prefetchingBefore: prefetchingPreviewBefore(),
+          prefetchingAfter: prefetchingPreviewAfter(),
+          children: children.length,
+        })
+      }
+      if (atTop && hasMorePreviewBefore()) schedulePreviewBefore(totalContentHeight, false, true)
+      if (nearBottom && hasMorePreviewAfter()) schedulePreviewAfter(atBottom)
     }, 400)
     onCleanup(() => clearInterval(interval))
   })
@@ -229,50 +637,54 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
     el?.blur?.()
   }
 
+  const toggleOwnerFilter = () => {
+    setOwnerFilter((filter) => filter === "all" ? "user" : filter === "user" ? "assistant" : "all")
+  }
+
   useKeyboard((evt) => {
     if (!props.api.ui.dialog.open) return
 
-    if (isKey(evt, "down") || isKey(evt, "up")) {
+    if (mode() !== "normal") return
+
+    if (matchesKey(evt, props.config.keys.moveDown) || matchesKey(evt, props.config.keys.moveUp)) {
       prevent(evt)
-      isKey(evt, "down") ? move(1) : move(-1)
+      matchesKey(evt, props.config.keys.moveDown) ? move(1) : move(-1)
       return
     }
 
-    if (mode() === "normal") {
-      if (isKey(evt, "j")) {
-        prevent(evt)
-        move(1)
-        return
-      }
-      if (isKey(evt, "k")) {
-        prevent(evt)
-        move(-1)
-        return
-      }
-      if (isKey(evt, "q")) {
-        prevent(evt)
-        props.onClose()
-        return
-      }
-      if (isKey(evt, "d")) {
-        scrollPreview(1, evt)
-        return
-      }
-      if (isKey(evt, "u")) {
-        scrollPreview(-1, evt)
-        return
-      }
-      if (isKey(evt, "/")) {
-        prevent(evt)
-        setMode("insert")
-        focusInput()
-        return
-      }
-      if (isKey(evt, "enter", "return")) {
-        prevent(evt)
-        open()
-        return
-      }
+    if (matchesKey(evt, props.config.keys.open)) {
+      prevent(evt)
+      open()
+      return
+    }
+
+    if (matchesKey(evt, props.config.keys.close)) {
+      prevent(evt)
+      props.onClose()
+      return
+    }
+
+    if (matchesKey(evt, props.config.keys.scrollPreviewDown)) {
+      scrollPreview(1, evt)
+      return
+    }
+
+    if (matchesKey(evt, props.config.keys.scrollPreviewUp)) {
+      scrollPreview(-1, evt)
+      return
+    }
+
+    if (matchesKey(evt, props.config.keys.toggleOwner)) {
+      prevent(evt)
+      toggleOwnerFilter()
+      return
+    }
+
+    if (matchesKey(evt, props.config.keys.insertMode)) {
+      prevent(evt)
+      setMode("insert")
+      focusInput()
+      return
     }
   })
 
@@ -303,12 +715,17 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
                   focusedBackgroundColor={theme().backgroundPanel}
                   onInput={(value) => setQuery(value)}
                   onKeyDown={(evt: ParsedKey) => {
-                    if (isKey(evt, "down") || isKey(evt, "up")) {
+                    if (matchesKey(evt, inputKeys().moveDown) || matchesKey(evt, inputKeys().moveUp)) {
                       prevent(evt)
-                      isKey(evt, "down") ? move(1) : move(-1)
+                      matchesKey(evt, inputKeys().moveDown) ? move(1) : move(-1)
                       return
                     }
-                    if (evt.ctrl && isKey(evt, "q")) {
+                    if (matchesKey(evt, inputKeys().open)) {
+                      prevent(evt)
+                      open()
+                      return
+                    }
+                    if (matchesKey(evt, inputKeys().normalMode)) {
                       prevent(evt)
                       setMode("normal")
                       blurInput()
@@ -316,13 +733,13 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
                   }}
                   flexGrow={1}
                 />
-                <text fg={theme().textMuted}>{busy() ? "searching" : loading() ? "loading..." : query().trim() ? (results().length > 0 ? `${selected() + 1}/${results().length} hits` : "0 hits") : (results().length > 0 ? `${selected() + 1}/${results().length} recent` : "0 recent")}</text>
+                <text fg={theme().textMuted}>{busy() ? `searching ${ownerLabel()}` : loading() ? `loading ${ownerLabel()}` : query().trim() ? (results().length > 0 ? `${ownerLabel()} ${selected() + 1}/${nextResultOffset()} hits` : `${ownerLabel()} 0 hits`) : (results().length > 0 ? `${ownerLabel()} ${selected() + 1}/${nextResultOffset()} recent` : `${ownerLabel()} 0 recent`)}</text>
               </box>
             </box>
 
             <box flexDirection="row" flexGrow={1} minHeight={0}>
               <box width={leftWidth()} flexDirection="column" minHeight={0} backgroundColor={theme().backgroundPanel}>
-                <scrollbox ref={(element: ScrollBoxRenderable) => (resultScroll = element)} flexGrow={1} minHeight={0} verticalScrollbarOptions={{ visible: false }}>
+                <scrollbox ref={(element: ScrollBoxRenderable) => (resultScroll = element)} flexGrow={1} minHeight={0} verticalScrollbarOptions={{ visible: true }}>
                   <Show
                     when={!error()}
                     fallback={
@@ -333,19 +750,22 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
                     }
                   >
                     <Show when={!loading()}>
-                      <Show when={results().length > 0} fallback={<EmptyState query={query()} theme={theme()} />}>
-                        <For each={results()}>
-                          {(item, index) => (
-                            <ResultRow
-                              item={item}
-                              active={index() === selected()}
-                              width={leftWidth()}
-                              query={query()}
-                              theme={theme()}
-                              onMouseOver={() => setSelected(index())}
-                              onOpen={open}
-                            />
-                          )}
+                      <Show when={results().length > 0} fallback={<EmptyState query={query()} owner={ownerLabel()} theme={theme()} />}>
+                        <For each={resultRenderWindow().items}>
+                          {(item, index) => {
+                            const absoluteIndex = () => resultRenderWindow().start + index()
+                            return (
+                              <ResultRow
+                                item={item}
+                                active={absoluteIndex() === selected()}
+                                width={leftWidth()}
+                                query={query()}
+                                theme={theme()}
+                                onMouseOver={() => setSelected(absoluteIndex())}
+                                onOpen={open}
+                              />
+                            )
+                          }}
                         </For>
                         <Show when={loadingMore()}>
                           <SkeletonRow theme={theme()} />
@@ -382,23 +802,21 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
             <Show when={mode() === "normal"}>
               <box paddingLeft={4} paddingRight={4} flexDirection="row" backgroundColor={theme().backgroundElement} gap={2}>
                 <text fg={theme().accent}><span style={{ bold: true }}>NORMAL</span></text>
-                <text fg={theme().textMuted}>·</text>
-                <text fg={theme().text}>j/k move</text>
-                <text fg={theme().textMuted}>·</text>
-                <text fg={theme().textMuted}>d/u scroll</text>
-                <text fg={theme().textMuted}>·</text>
-                <text fg={theme().text}>/ search</text>
-                <text fg={theme().textMuted}>·</text>
-                <text fg={theme().textMuted}>enter open</text>
-                <text fg={theme().textMuted}>·</text>
-                <text fg={theme().text}>q close</text>
+                <For each={normalHelpItems()}>
+                  {(item, index) => (
+                    <>
+                      <text fg={theme().textMuted}>·</text>
+                      <text fg={index() % 2 === 0 ? theme().text : theme().textMuted}>{item}</text>
+                    </>
+                  )}
+                </For>
               </box>
             </Show>
             <Show when={mode() === "insert"}>
               <box paddingLeft={4} paddingRight={4} flexDirection="row" backgroundColor={theme().backgroundElement} gap={2}>
                 <text fg={theme().warning}><span style={{ bold: true }}>INSERT</span></text>
                 <text fg={theme().textMuted}>·</text>
-                <text fg={theme().textMuted}>↑/↓ move · ^Q normal</text>
+                <text fg={theme().textMuted}>{keyListLabel(inputKeys().moveUp)}/{keyListLabel(inputKeys().moveDown)} move · {keyListLabel(inputKeys().normalMode)} normal</text>
               </box>
             </Show>