@bojackduy/opencode-telescope 0.1.12 → 0.1.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@bojackduy/opencode-telescope",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Fuzzy search across all OpenCode conversations — grep session and chat history, find code snippets, and jump to any chat instantly",
   "type": "module",
   "license": "MIT",

package/search.ts

@@ -40,6 +40,17 @@ export type ConversationPreviewPart = {
   target: boolean
 }
 
+export type ConversationPreviewPage = {
+  parts: ConversationPreviewPart[]
+  hasMoreBefore: boolean
+  hasMoreAfter: boolean
+}
+
+export type ConversationPreviewCursor = {
+  id: string
+  timeCreated: number
+}
+
 export type ToolState = {
   status: "pending" | "running" | "completed" | "error"
   input?: unknown
@@ -132,7 +143,7 @@ export function recentSessionMessages(options?: { limit?: number; offset?: numbe
   )
 }
 
-export function loadConversationWindow(result: SearchResult, options?: { before?: number; after?: number; dbPath?: string }) {
+export function loadConversationAround(result: SearchResult, options?: { before?: number; after?: number; dbPath?: string }): ConversationPreviewPage {
   debug.time("preview:query:total")
   const db = getDb(options?.dbPath)
   const before = options?.before ?? 3
@@ -144,12 +155,19 @@ export function loadConversationWindow(result: SearchResult, options?: { before?
   ).get(result.id)
   debug.timeEnd("preview:query:hit")
   if (!hit) {
+    debug.log("preview:window", {
+      item: result.id,
+      session: result.sessionID,
+      before,
+      after,
+      hit: false,
+    })
     debug.timeEnd("preview:query:total")
-    return []
+    return { parts: [], hasMoreBefore: false, hasMoreAfter: false }
   }
 
-  const fetchBefore = Math.max(before * 4, 30)
-  const fetchAfter = Math.max(after * 4, 50)
+  const fetchBefore = Math.max(before * 4, before + 1, 30)
+  const fetchAfter = Math.max((after + 1) * 4, after + 2, 50)
 
   debug.time("preview:query:before")
   const beforeRows = db.query<ConversationRow, [string, number, number, string, number]>(`
@@ -182,17 +200,108 @@ export function loadConversationWindow(result: SearchResult, options?: { before?
   debug.timeEnd("preview:query:after")
 
   debug.time("preview:query:parse")
-  const isValid = (row: ConversationRow) =>
-    (row.role === "user" || row.role === "assistant") &&
-    (row.type === "text" || row.type === "reasoning" || row.type === "tool")
-
+  const validBefore = beforeRows.filter(isPreviewRow)
+  const validAfter = afterRows.filter(isPreviewRow)
   const parts = [
-    ...beforeRows.filter(isValid).slice(0, before).reverse(),
-    ...afterRows.filter(isValid).slice(0, after + 1),
+    ...validBefore.slice(0, before).reverse(),
+    ...validAfter.slice(0, after + 1),
   ].flatMap((row) => parseConversationPart(row, row.id === result.id) ?? [])
+  const page = {
+    parts,
+    hasMoreBefore: validBefore.length > before,
+    hasMoreAfter: validAfter.length > after + 1,
+  }
+  debug.log("preview:window", {
+    item: result.id,
+    session: result.sessionID,
+    mode: "around",
+    before,
+    after,
+    fetchBefore,
+    fetchAfter,
+    beforeRows: beforeRows.length,
+    afterRows: afterRows.length,
+    parts: parts.length,
+    hasMoreBefore: page.hasMoreBefore,
+    hasMoreAfter: page.hasMoreAfter,
+    first: parts[0]?.id,
+    last: parts.at(-1)?.id,
+  })
   debug.timeEnd("preview:query:parse")
   debug.timeEnd("preview:query:total")
-  return parts
+  return page
+}
+
+export function loadConversationBefore(result: SearchResult, cursor: ConversationPreviewCursor, options?: { limit?: number; dbPath?: string }) {
+  debug.time("preview:query:before-page")
+  const db = getDb(options?.dbPath)
+  const limit = options?.limit ?? 20
+  const fetchLimit = Math.max(limit * 4, limit + 1, 30)
+  const rows = db.query<ConversationRow, [string, number, number, string, number]>(`
+    SELECT p.id, p.message_id, p.session_id,
+           json_extract(m.data, '$.role') AS role,
+           json_extract(p.data, '$.type') AS type,
+           p.time_created, p.data
+    FROM part p
+    JOIN message m ON m.id = p.message_id
+    WHERE p.session_id = ?
+      AND (p.time_created < ? OR (p.time_created = ? AND p.id < ?))
+    ORDER BY p.time_created DESC, p.id DESC
+    LIMIT ?
+  `).all(result.sessionID, cursor.timeCreated, cursor.timeCreated, cursor.id, fetchLimit)
+  const valid = rows.filter(isPreviewRow)
+  const parts = valid.slice(0, limit).reverse().flatMap((row) => parseConversationPart(row, false) ?? [])
+  const page = { parts, hasMoreBefore: valid.length > limit }
+  debug.log("preview:window", {
+    item: result.id,
+    session: result.sessionID,
+    mode: "before",
+    cursor,
+    limit,
+    rows: rows.length,
+    parts: parts.length,
+    hasMoreBefore: page.hasMoreBefore,
+    first: parts[0]?.id,
+    last: parts.at(-1)?.id,
+  })
+  debug.timeEnd("preview:query:before-page")
+  return page
+}
+
+export function loadConversationAfter(result: SearchResult, cursor: ConversationPreviewCursor, options?: { limit?: number; dbPath?: string }) {
+  debug.time("preview:query:after-page")
+  const db = getDb(options?.dbPath)
+  const limit = options?.limit ?? 20
+  const fetchLimit = Math.max(limit * 4, limit + 1, 30)
+  const rows = db.query<ConversationRow, [string, number, number, string, number]>(`
+    SELECT p.id, p.message_id, p.session_id,
+           json_extract(m.data, '$.role') AS role,
+           json_extract(p.data, '$.type') AS type,
+           p.time_created, p.data
+    FROM part p
+    JOIN message m ON m.id = p.message_id
+    WHERE p.session_id = ?
+      AND (p.time_created > ? OR (p.time_created = ? AND p.id > ?))
+    ORDER BY p.time_created ASC, p.id ASC
+    LIMIT ?
+  `).all(result.sessionID, cursor.timeCreated, cursor.timeCreated, cursor.id, fetchLimit)
+  const valid = rows.filter(isPreviewRow)
+  const parts = valid.slice(0, limit).flatMap((row) => parseConversationPart(row, false) ?? [])
+  const page = { parts, hasMoreAfter: valid.length > limit }
+  debug.log("preview:window", {
+    item: result.id,
+    session: result.sessionID,
+    mode: "after",
+    cursor,
+    limit,
+    rows: rows.length,
+    parts: parts.length,
+    hasMoreAfter: page.hasMoreAfter,
+    first: parts[0]?.id,
+    last: parts.at(-1)?.id,
+  })
+  debug.timeEnd("preview:query:after-page")
+  return page
 }
 
 export function rowToSearchResult(row: Row, query: string): SearchResult | undefined {
@@ -399,6 +508,11 @@ function parseConversationPart(row: ConversationRow, target: boolean): Conversat
   }
 }
 
+function isPreviewRow(row: ConversationRow) {
+  return (row.role === "user" || row.role === "assistant") &&
+    (row.type === "text" || row.type === "reasoning" || row.type === "tool")
+}
+
 function parsePartData(data: string) {
   try {
     const value = JSON.parse(data) as unknown

package/telescope.tsx

@@ -6,7 +6,9 @@ import { For, Show, createEffect, createMemo, createSignal, onCleanup } from "so
 import { ConversationPreview, PreviewHeader } from "./components/preview.tsx"
 import { EmptyState, ResultRow, SkeletonRow } from "./components/result-list.tsx"
 import {
-  loadConversationWindow,
+  loadConversationAfter,
+  loadConversationAround,
+  loadConversationBefore,
   recentSessionMessages,
   resolveDatabasePath,
   searchSessionMessages,
@@ -30,12 +32,18 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
   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 [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 MIN_SEARCH_BATCH_SIZE = 25
+  const MIN_RECENT_BATCH_SIZE = 15
+  const RESULT_OVERSCAN_MULTIPLIER = 2
+  const RESULT_PREFETCH_VIEWPORTS = 3
+  const INITIAL_PREVIEW_BEFORE = 20
+  const INITIAL_PREVIEW_AFTER = 30
+  const PREVIEW_PAGE_SIZE = 20
   let input: InputRenderable | undefined
   let resultScroll: ScrollBoxRenderable | undefined
   let previewScroll: ScrollBoxRenderable | undefined
@@ -49,6 +57,47 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
   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 resultPrefetchTimer: ReturnType<typeof setTimeout> | undefined
+  onCleanup(() => {
+    if (resultPrefetchTimer) clearTimeout(resultPrefetchTimer)
+  })
+
+  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() * 2)
+  const recentBatchSize = () => Math.max(MIN_RECENT_BATCH_SIZE, visibleResultRows() * 2)
+  const resultPrefetchThreshold = () => Math.max(visibleResultRows() * RESULT_PREFETCH_VIEWPORTS, searchBatchSize())
+  const resultRenderWindow = createMemo(() => {
+    const total = results().length
+    const visible = visibleResultRows()
+    const overscan = visible * RESULT_OVERSCAN_MULTIPLIER
+    const index = selected()
+    const start = Math.max(0, index - overscan)
+    const end = Math.min(total, index + visible + overscan)
+    return { start, end, items: results().slice(start, end) }
+  })
+
+  let lastResultRenderWindow = ""
+  createEffect(() => {
+    const window = resultRenderWindow()
+    const key = `${window.start}:${window.end}:${results().length}`
+    if (key === lastResultRenderWindow) return
+    lastResultRenderWindow = key
+    debug.log("results:render-window", {
+      selected: selected(),
+      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()
@@ -59,15 +108,18 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
 
     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 })
+          const batch = recentSessionMessages({ limit, offset: 0, dbPath: db, directory: dir })
           setResults(batch)
-          setHasMore(batch.length >= RECENT_BATCH_SIZE)
+          setHasMore(batch.length >= limit)
+          setResultPageInfo({ loadedUntil: batch.length, hasMore: batch.length >= limit, pageSize: limit, lastOffset: 0, lastAdded: batch.length })
           setSelected(0)
         } catch (err) {
           setResults([])
+          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 +131,18 @@ 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 })
+        const batch = searchSessionMessages(q, { limit, offset: 0, dbPath: db, directory: dir })
         setResults(batch)
-        setHasMore(batch.length >= BATCH_SIZE)
+        setHasMore(batch.length >= limit)
+        setResultPageInfo({ loadedUntil: batch.length, hasMore: batch.length >= limit, pageSize: limit, lastOffset: 0, lastAdded: batch.length })
         setSelected(0)
       } catch (err) {
         setResults([])
+        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 +153,67 @@ 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() || prefetchingResults() || busy() || loading()) return
+
+    const total = results().length
+    const q = query().trim()
+    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: total, dbPath: db, directory: dir })
+        : recentSessionMessages({ limit, offset: total, dbPath: db, directory: dir })
+      const nextHasMore = batch.length >= limit
+      const nextLoadedUntil = total + batch.length
+      debug.log("results:prefetch", { offset: total, limit, added: batch.length, totalLoaded: nextLoadedUntil, hasMore: nextHasMore, advance })
+      setResults((prev) => [...prev, ...batch])
+      setResultPageInfo({ loadedUntil: nextLoadedUntil, hasMore: nextHasMore, pageSize: limit, lastOffset: total, lastAdded: batch.length })
+      if (!nextHasMore) setHasMore(false)
+      if (advanceSelectionAfterLoad) {
+        debug.log("results:advance-after-load", { from: selected(), total, added: batch.length })
+        advanceSelectionAfterLoad = false
+        if (batch.length > 0) setSelected(total)
+      }
+    } 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 scheduleResultPrefetch = (advance = false) => {
+    if (advance) advanceSelectionAfterLoad = true
+    if (resultPrefetchTimer || loadingMore() || prefetchingResults()) return
+    debug.log("results:prefetch-scheduled", { advance, pendingAdvance: advanceSelectionAfterLoad, pageInfo: resultPageInfo() })
+    resultPrefetchTimer = setTimeout(() => {
+      resultPrefetchTimer = undefined
+      loadMoreResults(advanceSelectionAfterLoad)
+    }, 1)
+  }
+
   const move = (delta: number) => {
     if (results().length === 0) return
     setSelected((index) => {
       const next = index + delta
       let finalIndex = next
       if (next < 0) finalIndex = results().length - 1
-      else if (next >= results().length) finalIndex = results().length - 1
-      
+      else if (next >= results().length) {
+        if (hasMore()) scheduleResultPrefetch(true)
+        finalIndex = results().length - 1
+      }
+       
       if (finalIndex !== index) debug.time("nav:total")
       return finalIndex
     })
@@ -113,7 +221,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) {
@@ -128,50 +237,107 @@ 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 threshold = resultPrefetchThreshold()
+    if (index < total - threshold) return
+    if (!hasMore() || loadingMore() || prefetchingResults() || busy() || loading()) 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) => {
+    const item = selectedResult()
+    const first = previewParts()[0]
+    if (!item || !first || loadingPreviewMore()) return
+    setLoadingPreviewMore(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,
+        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")
+      setLoadingPreviewMore(false)
+    }
+  }
+
+  const loadPreviewAfter = () => {
+    const item = selectedResult()
+    const last = previewParts().at(-1)
+    if (!item || !last || loadingPreviewMore()) return
+    setLoadingPreviewMore(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,
+        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")
+      setLoadingPreviewMore(false)
+    }
+  }
 
   let lastPreviewItemId = ""
   createEffect(() => {
     const item = selectedResult()
-    const range = previewRange()
     if (!item) {
       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
+    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 +347,30 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
     const item = selectedResult()
     if (!item) return
     const interval = setInterval(() => {
+      if (loadingPreviewMore()) 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 nearTop = scroll.y <= 2
       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 }))
+      if (nearTop || atBottom) {
+        debug.log("preview:scroll-edge", {
+          y: scroll.y,
+          height: scroll.height,
+          contentHeight: totalContentHeight,
+          atTop,
+          nearTop,
+          atBottom,
+          hasMoreBefore: hasMorePreviewBefore(),
+          hasMoreAfter: hasMorePreviewAfter(),
+          children: children.length,
+        })
+      }
+      if (nearTop && hasMorePreviewBefore()) loadPreviewBefore(totalContentHeight, !atTop)
+      if (atBottom && hasMorePreviewAfter()) loadPreviewAfter()
     }, 400)
     onCleanup(() => clearInterval(interval))
   })
@@ -334,18 +514,21 @@ 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}
-                            />
-                          )}
+                        <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()} />

package/ui/debug.ts

@@ -1,6 +1,16 @@
+import { appendFileSync, mkdirSync } from "node:fs"
+import path from "node:path"
+
 const enabled = process.env.OPENCODE_TELESCOPE_DEBUG === "1"
+const logPath = process.env.OPENCODE_TELESCOPE_LOG
+const consoleEnabled = !logPath || process.env.OPENCODE_TELESCOPE_CONSOLE === "1"
 const timers = new Map<string, number>()
 
+if (enabled && logPath) {
+  mkdirSync(path.dirname(logPath), { recursive: true })
+  writeFileLog("session:start", { pid: process.pid })
+}
+
 export const debug = {
   get enabled() {
     return enabled
@@ -14,12 +24,31 @@ export const debug = {
     if (!enabled) return
     const start = timers.get(label)
     if (start !== undefined) {
-      console.log(`[telescope:time] ${label} ${(performance.now() - start).toFixed(2)}ms`)
+      writeLog("time", label, { ms: Number((performance.now() - start).toFixed(2)) })
       timers.delete(label)
     }
   },
 
   log(...args: unknown[]) {
-    if (enabled) console.log("[telescope]", ...args)
+    if (enabled) writeLog("log", String(args[0] ?? "message"), args.length > 1 ? args.slice(1) : undefined)
   },
 }
+
+function writeLog(type: "log" | "time", label: string, payload: unknown) {
+  if (logPath) writeFileLog(label, payload, type)
+  if (consoleEnabled) console.log(type === "time" ? `[telescope:time] ${label}` : "[telescope]", payload ?? "")
+}
+
+function writeFileLog(label: string, payload: unknown, type = "log") {
+  if (!logPath) return
+  appendFileSync(logPath, `${JSON.stringify({ ts: new Date().toISOString(), type, label, payload: safeJson(payload) })}\n`)
+}
+
+function safeJson(value: unknown) {
+  try {
+    JSON.stringify(value)
+    return value
+  } catch {
+    return String(value)
+  }
+}