@bojackduy/opencode-telescope 0.1.17 → 0.1.19

package/components/preview.tsx

@@ -51,7 +51,9 @@ export const ConversationPreview = (props: { item: SearchResult; parts: Conversa
     <Show when={props.parts.length > 0} fallback={<ConversationFallback item={props.item} syntax={props.syntax} theme={props.theme} />}>
       <For each={props.parts}>
         {(part) => (
-          <PreviewConversationPart part={part} item={props.item} syntax={props.syntax} theme={props.theme} />
+          <box id={`preview-part-${part.id}`} flexDirection="column" flexShrink={0}>
+            <PreviewConversationPart part={part} item={props.item} syntax={props.syntax} theme={props.theme} />
+          </box>
         )}
       </For>
     </Show>
@@ -143,8 +145,8 @@ const PreviewToolPart = (props: { part: ConversationPreviewPart; item: SearchRes
       <Show when={props.part.target}>
         <TargetMarker part={props.part} item={props.item} role={props.part.tool ?? "tool"} time={props.part.timeCreated} theme={props.theme} />
       </Show>
-      <Show when={codeTool()} fallback={<CompactToolRow part={props.part} color={color()} failed={failed()} theme={props.theme} />}>
-        <CodeToolPreview part={props.part} syntax={props.syntax} theme={props.theme} />
+      <Show when={codeTool() && props.part.target} fallback={<CompactToolRow part={props.part} color={color()} failed={failed()} theme={props.theme} />}>
+        <CodeToolPreview part={props.part} item={props.item} syntax={props.syntax} theme={props.theme} />
       </Show>
       <Show when={props.part.state?.error}>
         {(error) => <text fg={props.theme.error}>{error()}</text>}
@@ -167,29 +169,37 @@ const CompactToolRow = (props: { part: ConversationPreviewPart; color: any; fail
   </>
 )
 
-const CodeToolPreview = (props: { part: ConversationPreviewPart; syntax: SyntaxStyle; theme: TuiThemeCurrent }) => {
-  if (props.part.tool === "apply_patch") return <ApplyPatchPreview part={props.part} syntax={props.syntax} theme={props.theme} />
-  if (props.part.tool === "edit") return <EditPreview part={props.part} syntax={props.syntax} theme={props.theme} />
-  if (props.part.tool === "write") return <WritePreview part={props.part} syntax={props.syntax} theme={props.theme} />
+const CodeToolPreview = (props: { part: ConversationPreviewPart; item: SearchResult; syntax: SyntaxStyle; theme: TuiThemeCurrent }) => {
+  if (props.part.tool === "apply_patch") return <ApplyPatchPreview part={props.part} item={props.item} syntax={props.syntax} theme={props.theme} />
+  if (props.part.tool === "edit") return <EditPreview part={props.part} item={props.item} syntax={props.syntax} theme={props.theme} />
+  if (props.part.tool === "write") return <WritePreview part={props.part} item={props.item} syntax={props.syntax} theme={props.theme} />
   return <CompactToolRow part={props.part} color={props.theme.textMuted} failed={false} theme={props.theme} />
 }
 
-const ApplyPatchPreview = (props: { part: ConversationPreviewPart; syntax: SyntaxStyle; theme: TuiThemeCurrent }) => {
+const ApplyPatchPreview = (props: { part: ConversationPreviewPart; item: SearchResult; syntax: SyntaxStyle; theme: TuiThemeCurrent }) => {
   const files = createMemo(() => parseApplyPatchFiles(props.part.state?.metadata))
+  const matched = createMemo(() => {
+    const query = props.item.match || props.item.previewMatch
+    return files().find((file) => containsOrderedTokens(file.patch, query)) ?? files()[0]
+  })
   return (
-    <Show when={files().length > 0} fallback={<CompactToolRow part={props.part} color={props.theme.textMuted} failed={false} theme={props.theme} />}>
-      <For each={files()}>
-        {(file) => (
-          <ToolBlock title={patchTitle(file)} theme={props.theme}>
-            <DiffBlock diff={file.patch} filePath={file.filePath} syntax={props.syntax} theme={props.theme} />
+    <Show when={matched()} fallback={<CompactToolRow part={props.part} color={props.theme.textMuted} failed={false} theme={props.theme} />}>
+      {(file) => {
+        const view = createMemo(() => clippedText(file().patch, props.item.match || props.item.previewMatch, 24))
+        return (
+          <ToolBlock title={patchTitle(file())} theme={props.theme}>
+            <Show when={view().clipped}>
+              <text fg={props.theme.textMuted}>showing matched excerpt from large patch</text>
+            </Show>
+            <DiffBlock diff={view().text} filePath={file().filePath} syntax={props.syntax} theme={props.theme} clipped={view().clipped} />
           </ToolBlock>
-        )}
-      </For>
+        )
+      }}
     </Show>
   )
 }
 
-const EditPreview = (props: { part: ConversationPreviewPart; syntax: SyntaxStyle; theme: TuiThemeCurrent }) => {
+const EditPreview = (props: { part: ConversationPreviewPart; item: SearchResult; syntax: SyntaxStyle; theme: TuiThemeCurrent }) => {
   const input = createMemo(() => recordValue(props.part.state?.input))
   const metadata = createMemo(() => recordValue(props.part.state?.metadata))
   const diff = createMemo(() => stringValue(metadata()?.diff) ?? stringValue(recordValue(metadata()?.filediff)?.patch) ?? "")
@@ -198,14 +208,24 @@ const EditPreview = (props: { part: ConversationPreviewPart; syntax: SyntaxStyle
     <Show when={diff()} fallback={<CompactToolRow part={props.part} color={props.theme.textMuted} failed={false} theme={props.theme} />}>
       {(value) => (
         <ToolBlock title={`← Edit ${shortPath(filePath())}`} theme={props.theme}>
-          <DiffBlock diff={value()} filePath={filePath()} syntax={props.syntax} theme={props.theme} />
+          {(() => {
+            const view = createMemo(() => clippedText(value(), props.item.match || props.item.previewMatch, 24))
+            return (
+              <>
+                <Show when={view().clipped}>
+                  <text fg={props.theme.textMuted}>showing matched excerpt from large diff</text>
+                </Show>
+                <DiffBlock diff={view().text} filePath={filePath()} syntax={props.syntax} theme={props.theme} clipped={view().clipped} />
+              </>
+            )
+          })()}
         </ToolBlock>
       )}
     </Show>
   )
 }
 
-const WritePreview = (props: { part: ConversationPreviewPart; syntax: SyntaxStyle; theme: TuiThemeCurrent }) => {
+const WritePreview = (props: { part: ConversationPreviewPart; item: SearchResult; syntax: SyntaxStyle; theme: TuiThemeCurrent }) => {
   const input = createMemo(() => recordValue(props.part.state?.input))
   const filePath = createMemo(() => stringValue(input()?.filePath) ?? "")
   const content = createMemo(() => stringValue(input()?.content) ?? "")
@@ -213,15 +233,25 @@ const WritePreview = (props: { part: ConversationPreviewPart; syntax: SyntaxStyl
     <Show when={content()} fallback={<CompactToolRow part={props.part} color={props.theme.textMuted} failed={false} theme={props.theme} />}>
       {(value) => (
         <ToolBlock title={`# Wrote ${shortPath(filePath())}`} theme={props.theme}>
+          {(() => {
+            const view = createMemo(() => clippedText(value(), props.item.match || props.item.previewMatch, 32))
+            return (
+              <>
+                <Show when={view().clipped}>
+                  <text fg={props.theme.textMuted}>showing matched excerpt from large file</text>
+                </Show>
           <line_number fg={props.theme.textMuted} minWidth={3} paddingRight={1}>
             <code
               conceal={false}
               fg={props.theme.text}
               filetype={filetype(filePath())}
               syntaxStyle={props.syntax}
-              content={value()}
+              content={view().text}
             />
           </line_number>
+              </>
+            )
+          })()}
         </ToolBlock>
       )}
     </Show>
@@ -246,27 +276,29 @@ const ToolBlock = (props: { title: string; children: any; theme: TuiThemeCurrent
   </box>
 )
 
-const DiffBlock = (props: { diff: string; filePath: string; syntax: SyntaxStyle; theme: TuiThemeCurrent }) => (
+const DiffBlock = (props: { diff: string; filePath: string; syntax: SyntaxStyle; theme: TuiThemeCurrent; clipped?: boolean }) => (
   <box paddingLeft={1}>
-    <diff
-      diff={props.diff}
-      view="unified"
-      filetype={filetype(props.filePath)}
-      syntaxStyle={props.syntax}
-      showLineNumbers={true}
-      width="100%"
-      wrapMode="word"
-      fg={props.theme.text}
-      addedBg={props.theme.diffAddedBg}
-      removedBg={props.theme.diffRemovedBg}
-      contextBg={props.theme.diffContextBg}
-      addedSignColor={props.theme.diffHighlightAdded}
-      removedSignColor={props.theme.diffHighlightRemoved}
-      lineNumberFg={props.theme.diffLineNumber}
-      lineNumberBg={props.theme.diffContextBg}
-      addedLineNumberBg={props.theme.diffAddedLineNumberBg}
-      removedLineNumberBg={props.theme.diffRemovedLineNumberBg}
-    />
+    <Show when={!props.clipped} fallback={<code filetype="diff" syntaxStyle={props.syntax} content={props.diff} fg={props.theme.text} />}>
+      <diff
+        diff={props.diff}
+        view="unified"
+        filetype={filetype(props.filePath)}
+        syntaxStyle={props.syntax}
+        showLineNumbers={true}
+        width="100%"
+        wrapMode="word"
+        fg={props.theme.text}
+        addedBg={props.theme.diffAddedBg}
+        removedBg={props.theme.diffRemovedBg}
+        contextBg={props.theme.diffContextBg}
+        addedSignColor={props.theme.diffHighlightAdded}
+        removedSignColor={props.theme.diffHighlightRemoved}
+        lineNumberFg={props.theme.diffLineNumber}
+        lineNumberBg={props.theme.diffContextBg}
+        addedLineNumberBg={props.theme.diffAddedLineNumberBg}
+        removedLineNumberBg={props.theme.diffRemovedLineNumberBg}
+      />
+    </Show>
   </box>
 )
 
@@ -386,6 +418,50 @@ function matchExcerpt(text: string, query: string, radius = 80) {
   }
 }
 
+function clippedText(text: string, query: string, radiusLines: number) {
+  const lines = text.split("\n")
+  const tooLarge = text.length > 30000 || lines.length > 420
+  if (!tooLarge) return { text, clipped: false }
+
+  const matchLine = findOrderedTokenLine(lines, query)
+  if (matchLine === -1) {
+    return { text: lines.slice(0, radiusLines * 2).join("\n"), clipped: true }
+  }
+
+  const start = Math.max(0, matchLine - radiusLines)
+  const end = Math.min(lines.length, matchLine + radiusLines + 1)
+  return {
+    text: [
+      start > 0 ? `... ${start} lines omitted ...` : undefined,
+      ...lines.slice(start, end),
+      end < lines.length ? `... ${lines.length - end} lines omitted ...` : undefined,
+    ].filter(Boolean).join("\n"),
+    clipped: true,
+  }
+}
+
+function findOrderedTokenLine(lines: string[], query: string) {
+  const tokens = query.trim().split(/\s+/).filter(Boolean)
+  if (tokens.length === 0) return -1
+  for (let index = 0; index < lines.length; index++) {
+    if (containsOrderedTokens(lines[index]!, query)) return index
+  }
+  return -1
+}
+
+function containsOrderedTokens(text: string, query: string) {
+  const tokens = query.trim().split(/\s+/).filter(Boolean)
+  if (tokens.length === 0) return false
+  const lower = text.toLowerCase()
+  let searchPos = 0
+  for (const token of tokens) {
+    const index = lower.indexOf(token.toLowerCase(), searchPos)
+    if (index === -1) return false
+    searchPos = index + token.length
+  }
+  return true
+}
+
 function parseApplyPatchFiles(metadata: unknown) {
   const files = recordValue(metadata)?.files
   if (!Array.isArray(files)) return []

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@bojackduy/opencode-telescope",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "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

@@ -95,6 +95,7 @@ let _db: Database | undefined
 let _dbPath: string | undefined
 let _indexDb: Database | undefined
 let _indexDbPath: string | undefined
+const backgroundIndexRebuilds = new Set<string>()
 
 function getDb(dbPath?: string): Database {
   const resolved = dbPath ?? resolveDatabasePath()
@@ -148,8 +149,13 @@ export function searchSessionMessages(query: string, options?: { limit?: number;
 }
 
 export function recentSessionMessages(options?: { limit?: number; offset?: number; dbPath?: string; directory?: string; role?: SearchRole }) {
-  const db = getDb(options?.dbPath)
-  return visibleTextRows(db, options?.limit ?? 40, undefined, options?.directory, options?.offset, options?.role).flatMap(
+  const dbPath = options?.dbPath ?? resolveDatabasePath()
+  const db = getDb(dbPath)
+  const limit = options?.limit ?? 40
+  const indexed = dbPath === ":memory:" ? undefined : indexedRecentRows(db, dbPath, limit, options?.directory, options?.offset, options?.role)
+  if (indexed) return indexed.flatMap((row) => rowToSearchResult(row, "") ?? [])
+  debug.log("query:recent:source-fallback", { limit, offset: options?.offset ?? 0, directory: options?.directory, role: options?.role })
+  return visibleTextRows(db, limit, undefined, options?.directory, options?.offset, options?.role).flatMap(
     (row) => rowToSearchResult(row, "") ?? [],
   )
 }
@@ -231,7 +237,11 @@ export function loadConversationAround(result: SearchResult, options?: { before?
     fetchBefore,
     fetchAfter,
     beforeRows: beforeRows.length,
+    validBefore: validBefore.length,
+    invalidBefore: previewRowBreakdown(beforeRows, validBefore),
     afterRows: afterRows.length,
+    validAfter: validAfter.length,
+    invalidAfter: previewRowBreakdown(afterRows, validAfter),
     parts: parts.length,
     hasMoreBefore: page.hasMoreBefore,
     hasMoreAfter: page.hasMoreAfter,
@@ -262,6 +272,7 @@ export function loadConversationBefore(result: SearchResult, cursor: Conversatio
   `).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 parsedIds = new Set(parts.map((part) => part.id))
   const page = { parts, hasMoreBefore: valid.length > limit }
   debug.log("preview:window", {
     item: result.id,
@@ -270,7 +281,10 @@ export function loadConversationBefore(result: SearchResult, cursor: Conversatio
     cursor,
     limit,
     rows: rows.length,
+    valid: valid.length,
+    invalid: previewRowBreakdown(rows, valid),
     parts: parts.length,
+    unparsedValid: valid.slice(0, limit).filter((row) => !parsedIds.has(row.id)).map((row) => ({ id: row.id, type: row.type, role: row.role })),
     hasMoreBefore: page.hasMoreBefore,
     first: parts[0]?.id,
     last: parts.at(-1)?.id,
@@ -298,6 +312,7 @@ export function loadConversationAfter(result: SearchResult, cursor: Conversation
   `).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 parsedIds = new Set(parts.map((part) => part.id))
   const page = { parts, hasMoreAfter: valid.length > limit }
   debug.log("preview:window", {
     item: result.id,
@@ -306,7 +321,10 @@ export function loadConversationAfter(result: SearchResult, cursor: Conversation
     cursor,
     limit,
     rows: rows.length,
+    valid: valid.length,
+    invalid: previewRowBreakdown(rows, valid),
     parts: parts.length,
+    unparsedValid: valid.slice(0, limit).filter((row) => !parsedIds.has(row.id)).map((row) => ({ id: row.id, type: row.type, role: row.role })),
     hasMoreAfter: page.hasMoreAfter,
     first: parts[0]?.id,
     last: parts.at(-1)?.id,
@@ -501,7 +519,7 @@ function parseConversationPart(row: ConversationRow, target: boolean): Conversat
       role: row.role,
       type: row.type,
       timeCreated: row.time_created,
-      text: extractToolIndexText(data).trim(),
+      text: target ? extractToolIndexText(data).trim() : "",
       tool: typeof data.tool === "string" ? data.tool : "tool",
       state: parseToolState(data.state),
       target,
@@ -526,6 +544,21 @@ function isPreviewRow(row: ConversationRow) {
     (row.type === "text" || row.type === "reasoning" || row.type === "tool")
 }
 
+function previewRowBreakdown(rows: ConversationRow[], validRows: ConversationRow[]) {
+  const valid = new Set(validRows.map((row) => row.id))
+  const invalidRows = rows.filter((row) => !valid.has(row.id))
+  if (invalidRows.length === 0) return undefined
+  const byRole = countBy(invalidRows, (row) => String(row.role ?? "unknown"))
+  const byType = countBy(invalidRows, (row) => String(row.type ?? "unknown"))
+  return { count: invalidRows.length, byRole, byType }
+}
+
+function countBy<T>(items: T[], key: (item: T) => string) {
+  const counts: Record<string, number> = {}
+  for (const item of items) counts[key(item)] = (counts[key(item)] ?? 0) + 1
+  return counts
+}
+
 function parsePartData(data: string) {
   try {
     const value = JSON.parse(data) as unknown
@@ -565,6 +598,7 @@ function indexedTextRows(db: Database, dbPath: string, limit: number, query: str
   if (!match) return []
   try {
     const index = ensureSearchIndex(db, dbPath)
+    if (!index) return []
     const conditions = ["document_fts MATCH ?"]
     const params: (string | number)[] = [match]
     if (role) {
@@ -595,6 +629,46 @@ function indexedTextRows(db: Database, dbPath: string, limit: number, query: str
   }
 }
 
+function indexedRecentRows(db: Database, dbPath: string, limit: number, directory?: string, offset?: number, role?: SearchRole) {
+  try {
+    const index = ensureSearchIndex(db, dbPath, { rebuild: false })
+    if (!index) {
+      scheduleBackgroundIndexRebuild(dbPath)
+      return
+    }
+
+    const conditions: string[] = ["part_type = 'text'"]
+    const params: (string | number)[] = []
+    if (role) {
+      conditions.push("role = ?")
+      params.push(role)
+    }
+    if (directory) {
+      conditions.push("directory = ?")
+      params.push(directory)
+    }
+    params.push(limit)
+    if (offset) params.push(offset)
+
+    const where = conditions.length ? `WHERE ${conditions.join(" AND ")}` : ""
+    const offsetClause = offset ? "OFFSET ?" : ""
+    debug.time("query:recent:index:exec")
+    const rows = index.query<Row, (string | number)[]>(`
+      SELECT id, message_id, session_id, session_title, directory, role, part_type, tool,
+             CAST(time_created AS INTEGER) AS time_created, text
+      FROM document_index
+      ${where}
+      ORDER BY CAST(time_created AS INTEGER) DESC
+      LIMIT ? ${offsetClause}
+    `).all(...params as any[])
+    debug.timeEnd("query:recent:index:exec")
+    return rows
+  } catch (err) {
+    debug.log("recent:index:fallback", err instanceof Error ? err.message : String(err))
+    return
+  }
+}
+
 function visibleTextRows(db: Database, limit: number, query?: string, directory?: string, offset?: number, role?: SearchRole) {
   const offsetClause = offset ? "OFFSET ?" : ""
   const conditions: string[] = [
@@ -637,7 +711,7 @@ function visibleTextRows(db: Database, limit: number, query?: string, directory?
   return rows
 }
 
-function ensureSearchIndex(source: Database, sourcePath: string) {
+function ensureSearchIndex(source: Database, sourcePath: string, options?: { rebuild?: boolean }) {
   const indexPath = searchIndexPath(sourcePath)
   if (!_indexDb || _indexDbPath !== indexPath) {
     _indexDb?.close()
@@ -652,12 +726,32 @@ function ensureSearchIndex(source: Database, sourcePath: string) {
   const currentPath = getMeta(_indexDb, "source_path")
   const currentIndexVersion = getMeta(_indexDb, "index_version")
   if (currentPath !== sourcePath || currentDataVersion !== String(state.dataVersion) || currentMtimeMs !== String(state.mtimeMs) || currentIndexVersion !== SEARCH_INDEX_VERSION) {
+    if (options?.rebuild === false) return
     rebuildSearchIndex(source, _indexDb, sourcePath, state)
   }
   return _indexDb
 }
 
-const SEARCH_INDEX_VERSION = "4"
+function scheduleBackgroundIndexRebuild(dbPath: string) {
+  if (backgroundIndexRebuilds.has(dbPath)) return
+  backgroundIndexRebuilds.add(dbPath)
+  debug.log("fts:rebuild:background-scheduled", { dbPath })
+  const timer = setTimeout(() => {
+    debug.time("fts:rebuild:background")
+    try {
+      const db = getDb(dbPath)
+      ensureSearchIndex(db, dbPath)
+    } catch (err) {
+      debug.log("fts:rebuild:background:error", err instanceof Error ? err.message : String(err))
+    } finally {
+      backgroundIndexRebuilds.delete(dbPath)
+      debug.timeEnd("fts:rebuild:background")
+    }
+  }, 250)
+  ;(timer as { unref?: () => void }).unref?.()
+}
+
+const SEARCH_INDEX_VERSION = "6"
 
 function searchIndexPath(sourcePath: string) {
   const parsed = path.parse(sourcePath)
@@ -683,6 +777,24 @@ function migrateSearchIndex(db: Database) {
       text,
       tokenize='unicode61'
     );
+    CREATE TABLE IF NOT EXISTS document_index(
+      id TEXT PRIMARY KEY,
+      message_id TEXT NOT NULL,
+      session_id TEXT NOT NULL,
+      session_title TEXT NOT NULL,
+      directory TEXT NOT NULL,
+      role TEXT NOT NULL,
+      part_type TEXT NOT NULL,
+      tool TEXT,
+      time_created INTEGER NOT NULL,
+      text TEXT NOT NULL
+    );
+    CREATE INDEX IF NOT EXISTS document_index_recent_idx
+      ON document_index(directory, role, time_created DESC);
+    CREATE INDEX IF NOT EXISTS document_index_recent_text_idx
+      ON document_index(directory, role, part_type, time_created DESC);
+    CREATE INDEX IF NOT EXISTS document_index_time_idx
+      ON document_index(time_created DESC);
   `)
 
   const columns = db.query<{ name: string }, []>("PRAGMA table_info(document_fts)").all().map((column) => column.name)
@@ -704,6 +816,33 @@ function migrateSearchIndex(db: Database) {
       );
     `)
   }
+
+  const indexColumns = db.query<{ name: string }, []>("PRAGMA table_info(document_index)").all().map((column) => column.name)
+  if (!["part_type", "tool", "time_created", "text"].every((name) => indexColumns.includes(name))) {
+    db.exec("DROP TABLE IF EXISTS document_index")
+    db.exec(`
+      CREATE TABLE document_index(
+        id TEXT PRIMARY KEY,
+        message_id TEXT NOT NULL,
+        session_id TEXT NOT NULL,
+        session_title TEXT NOT NULL,
+        directory TEXT NOT NULL,
+        role TEXT NOT NULL,
+        part_type TEXT NOT NULL,
+        tool TEXT,
+        time_created INTEGER NOT NULL,
+        text TEXT NOT NULL
+      );
+    `)
+  }
+  db.exec(`
+    CREATE INDEX IF NOT EXISTS document_index_recent_idx
+      ON document_index(directory, role, time_created DESC);
+    CREATE INDEX IF NOT EXISTS document_index_recent_text_idx
+      ON document_index(directory, role, part_type, time_created DESC);
+    CREATE INDEX IF NOT EXISTS document_index_time_idx
+      ON document_index(time_created DESC);
+  `)
 }
 
 function sourceState(db: Database, sourcePath: string) {
@@ -738,9 +877,14 @@ function rebuildSearchIndex(source: Database, index: Database, sourcePath: strin
     INSERT INTO document_fts(id, message_id, session_id, session_title, directory, role, part_type, tool, time_created, text)
     VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
   `)
+  const insertIndex = index.query<Row, [string, string, string, string, string, string, SearchResult["partType"], string | null, number, string]>(`
+    INSERT INTO document_index(id, message_id, session_id, session_title, directory, role, part_type, tool, time_created, text)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+  `)
   index.exec("BEGIN IMMEDIATE")
   try {
     index.exec("DELETE FROM document_fts")
+    index.exec("DELETE FROM document_index")
     for (const row of rows.flatMap(indexSourceRowToRows)) {
       insert.run(
         row.id,
@@ -754,6 +898,18 @@ function rebuildSearchIndex(source: Database, index: Database, sourcePath: strin
         row.time_created,
         row.text,
       )
+      insertIndex.run(
+        row.id,
+        row.message_id,
+        row.session_id,
+        row.session_title ?? "Untitled session",
+        row.directory,
+        row.role,
+        row.part_type ?? "text",
+        row.tool ?? null,
+        row.time_created,
+        row.text,
+      )
     }
     setMeta(index, "source_path", sourcePath)
     setMeta(index, "source_data_version", String(state.dataVersion))

package/telescope.tsx

@@ -20,7 +20,7 @@ import { debug } from "./ui/debug.ts"
 import { syntaxStyle } from "./ui/format.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"
+import { findRenderableByID, jumpToRenderedTarget, messageTargetID, previewScrollAmount, scrollPreviewToTarget } from "./ui/render-target.ts"
 
 export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; onClose: () => void }) => {
   type OwnerFilter = "all" | SearchRole
@@ -46,11 +46,13 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
   const [loadingPreviewMore, setLoadingPreviewMore] = createSignal(false)
   const [prefetchingPreviewBefore, setPrefetchingPreviewBefore] = createSignal(false)
   const [prefetchingPreviewAfter, setPrefetchingPreviewAfter] = createSignal(false)
+  const [previewWindow, setPreviewWindow] = createSignal({ start: 0, end: 0 })
+  const [previewHeightVersion, setPreviewHeightVersion] = createSignal(0)
   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_PREFETCH_VIEWPORTS = 3
   const RESULT_CACHE_BEHIND_VIEWPORTS = 6
   const INITIAL_PREVIEW_BEFORE = 20
   const INITIAL_PREVIEW_AFTER = 30
@@ -87,12 +89,14 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
   const directory = props.api.state.path.directory
   let advanceSelectionAfterLoad = false
   let advanceSelectionBeforeLoad = false
+  let resultNavigationStarted = 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 previewMeasuredHeights = new Map<string, number>()
   const cancelPreviewPrefetch = () => {
     if (previewBeforeTimer) clearTimeout(previewBeforeTimer)
     if (previewAfterTimer) clearTimeout(previewAfterTimer)
@@ -177,6 +181,7 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
     resultPreviousTimer = undefined
     advanceSelectionAfterLoad = false
     advanceSelectionBeforeLoad = false
+    resultNavigationStarted = false
     setLoadingMore(false)
     setLoadingPreviousResults(false)
     setPrefetchingResults(false)
@@ -187,9 +192,11 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
       setLoading(true)
       const limit = recentBatchSize()
       const timer = setTimeout(() => {
+        debug.log("bootstrap:recent:start", { limit, directory: dir, role })
         debug.time("query:recent")
         try {
           const batch = recentSessionMessages({ limit, offset: 0, dbPath: db, directory: dir, role })
+          debug.log("bootstrap:recent:done", { rows: batch.length, limit })
           solidBatch(() => {
             setResults(batch)
             setResultBaseOffset(0)
@@ -199,6 +206,7 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
             setSelected(0)
           })
         } catch (err) {
+          debug.log("bootstrap:recent:error", err instanceof Error ? err.message : String(err))
           solidBatch(() => {
             setResults([])
             setResultBaseOffset(0)
@@ -220,7 +228,9 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
     const timer = setTimeout(() => {
       debug.time("query:search")
       try {
+        debug.log("bootstrap:search:start", { limit, directory: dir, role, query: q })
         const batch = searchSessionMessages(q, { limit, offset: 0, dbPath: db, directory: dir, role })
+        debug.log("bootstrap:search:done", { rows: batch.length, limit })
         solidBatch(() => {
           setResults(batch)
           setResultBaseOffset(0)
@@ -370,6 +380,7 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
 
   const move = (delta: number) => {
     if (results().length === 0) return
+    resultNavigationStarted = true
     setSelected((index) => {
       const base = resultBaseOffset()
       const cachedEnd = base + results().length
@@ -409,6 +420,8 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
     const state = resultPrefetchState()
     const blockedBy = !hasMore()
       ? "no-more"
+      : !resultNavigationStarted
+        ? "waiting-for-navigation"
       : loadingMore()
         ? "loading-more"
         : loadingPreviousResults()
@@ -431,19 +444,161 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
     onCleanup(() => clearTimeout(timer))
   })
 
-  const previewContentHeight = () => {
-    const children = previewScroll?.getChildren()
+  const estimatePreviewPartHeight = (part: ConversationPreviewPart) => {
+    if (part.type === "tool") {
+      if (!part.target) return 2
+      if (part.tool === "write") return 40
+      if (part.tool === "edit" || part.tool === "apply_patch") return 35
+      return 2
+    }
+    if (part.type === "reasoning") return Math.min(24, Math.max(2, Math.ceil(part.text.length / 120)))
+    return Math.min(90, Math.max(3, Math.ceil(part.text.length / 90)))
+  }
+
+  const previewPartHeight = (part: ConversationPreviewPart) => previewMeasuredHeights.get(part.id) ?? estimatePreviewPartHeight(part)
+
+  const previewVirtualLayout = createMemo(() => {
+    previewHeightVersion()
+    let offset = 0
+    return previewParts().map((part) => {
+      const height = previewPartHeight(part)
+      const row = { part, top: offset, bottom: offset + height, height }
+      offset += height
+      return row
+    })
+  })
+
+  const previewContentHeight = () => previewVirtualLayout().at(-1)?.bottom ?? 0
+
+  const updatePreviewWindow = () => {
+    const scroll = previewScroll
+    const layout = previewVirtualLayout()
+    if (layout.length === 0) {
+      setPreviewWindow({ start: 0, end: 0 })
+      return
+    }
+    if (!scroll) {
+      const next = { start: 0, end: Math.min(layout.length, 20) }
+      const current = previewWindow()
+      if (current.start !== next.start || current.end !== next.end) setPreviewWindow(next)
+      return
+    }
+
+    const overscan = Math.max(scroll.height * 2, 40)
+    const from = Math.max(0, scroll.scrollTop - overscan)
+    const to = scroll.scrollTop + scroll.height + overscan
+    const foundStart = layout.findIndex((row) => row.bottom >= from)
+    const start = foundStart === -1 ? Math.max(0, layout.length - 1) : Math.max(0, foundStart)
+    const foundEnd = layout.findIndex((row) => row.top > to)
+    const end = foundEnd === -1 ? layout.length : foundEnd
+    const next = { start, end: Math.min(layout.length, Math.max(start + 1, end)) }
+    const current = previewWindow()
+    if (current.start !== next.start || current.end !== next.end) setPreviewWindow(next)
+  }
+
+  const previewWindowParts = createMemo(() => {
+    const { start, end } = previewWindow()
+    return previewParts().slice(start, end)
+  })
+
+  const previewTopSpacerHeight = createMemo(() => {
+    const { start } = previewWindow()
+    return previewVirtualLayout()[start]?.top ?? 0
+  })
+
+  const previewBottomSpacerHeight = createMemo(() => {
+    const { end } = previewWindow()
+    const layout = previewVirtualLayout()
+    const total = layout.at(-1)?.bottom ?? 0
+    const renderedBottom = end > 0 ? layout[end - 1]?.bottom ?? 0 : 0
+    return Math.max(0, total - renderedBottom)
+  })
+
+  const previewScrollState = () => {
+    const scroll = previewScroll
+    const children = scroll?.getChildren()
     const lastChild = children?.[children.length - 1] as { y: number; height: number } | undefined
-    return lastChild ? lastChild.y + lastChild.height : 0
+    return {
+      y: scroll?.y,
+      height: scroll?.height,
+      scrollTop: scroll?.scrollTop,
+      scrollHeight: scroll?.scrollHeight,
+      childContentHeight: lastChild ? lastChild.y + lastChild.height : 0,
+      children: children?.length ?? 0,
+      hasMoreBefore: hasMorePreviewBefore(),
+      hasMoreAfter: hasMorePreviewAfter(),
+      loadingMore: loadingPreviewMore(),
+      prefetchingBefore: prefetchingPreviewBefore(),
+      prefetchingAfter: prefetchingPreviewAfter(),
+      timerBefore: Boolean(previewBeforeTimer),
+      timerAfter: Boolean(previewAfterTimer),
+    }
   }
 
+  const measurePreviewWindow = () => {
+    const scroll = previewScroll
+    if (!scroll) return
+
+    let changed = false
+    for (const part of previewWindowParts()) {
+      const node = findRenderableByID(scroll, `preview-part-${part.id}`)
+      const height = node?.height
+      if (!height || height <= 0) continue
+      if (previewMeasuredHeights.get(part.id) !== height) {
+        previewMeasuredHeights.set(part.id, height)
+        changed = true
+      }
+    }
+
+    if (changed) {
+      debug.log("preview:measure", {
+        measured: previewWindowParts().length,
+        totalMeasured: previewMeasuredHeights.size,
+        window: previewWindow(),
+      })
+      setPreviewHeightVersion((value) => value + 1)
+      setTimeout(updatePreviewWindow, 1)
+    }
+  }
+
+  createEffect(() => {
+    previewParts()
+    previewHeightVersion()
+    const timer = setTimeout(updatePreviewWindow, 1)
+    onCleanup(() => clearTimeout(timer))
+  })
+
+  createEffect(() => {
+    previewWindowParts()
+    const timer = setTimeout(measurePreviewWindow, 1)
+    onCleanup(() => clearTimeout(timer))
+  })
+
   const loadPreviewBefore = (previousContentHeight = previewContentHeight(), preserveScroll = true, visibleLoad = false) => {
     const item = selectedResult()
     const first = previewParts()[0]
-    if (!item || !first || loadingPreviewMore() || prefetchingPreviewBefore()) return
+    if (!item || !first || loadingPreviewMore() || prefetchingPreviewBefore()) {
+      debug.log("preview:load-before:skip", {
+        reason: !item ? "no-item" : !first ? "no-first-part" : loadingPreviewMore() ? "loading-preview-more" : "prefetching-before",
+        previousContentHeight,
+        preserveScroll,
+        visibleLoad,
+        state: previewScrollState(),
+      })
+      return
+    }
+    const beforeState = previewScrollState()
     visibleLoad ? setLoadingPreviewMore(true) : setPrefetchingPreviewBefore(true)
     debug.time("preview:load-before")
     try {
+      debug.log("preview:load-before:start", {
+        item: item.id,
+        cursor: { id: first.id, timeCreated: first.timeCreated },
+        previousContentHeight,
+        preserveScroll,
+        visibleLoad,
+        state: beforeState,
+      })
       const page = loadConversationBefore(item, { id: first.id, timeCreated: first.timeCreated }, { limit: PREVIEW_PAGE_SIZE, dbPath: dbPath() })
       debug.log("preview:load-before", {
         item: item.id,
@@ -458,8 +613,27 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
         setPreviewParts((prev) => [...page.parts, ...prev])
         if (preserveScroll) {
           setTimeout(() => {
+            const beforeAdjust = previewScrollState()
             const delta = previewContentHeight() - previousContentHeight
             if (delta > 0) previewScroll?.scrollBy(delta)
+            updatePreviewWindow()
+            debug.log("preview:load-before:adjust", {
+              delta,
+              previousContentHeight,
+              newContentHeight: previewContentHeight(),
+              scrolled: delta > 0,
+              beforeAdjust,
+              afterAdjust: previewScrollState(),
+            })
+          }, 1)
+        } else {
+          setTimeout(() => {
+            updatePreviewWindow()
+            debug.log("preview:load-before:no-adjust", {
+              previousContentHeight,
+              newContentHeight: previewContentHeight(),
+              state: previewScrollState(),
+            })
           }, 1)
         }
       }
@@ -475,7 +649,20 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
   const loadPreviewAfter = (visibleLoad = false) => {
     const item = selectedResult()
     const last = previewParts().at(-1)
-    if (!item || !last || loadingPreviewMore() || prefetchingPreviewAfter()) return
+    if (!item || !last || loadingPreviewMore() || prefetchingPreviewAfter()) {
+      debug.log("preview:load-after:skip", {
+        reason: !item ? "no-item" : !last ? "no-last-part" : loadingPreviewMore() ? "loading-preview-more" : "prefetching-after",
+        visibleLoad,
+        state: previewScrollState(),
+      })
+      return
+    }
+    debug.log("preview:load-after:start", {
+      item: item.id,
+      cursor: { id: last.id, timeCreated: last.timeCreated },
+      visibleLoad,
+      state: previewScrollState(),
+    })
     visibleLoad ? setLoadingPreviewMore(true) : setPrefetchingPreviewAfter(true)
     debug.time("preview:load-after")
     try {
@@ -488,7 +675,10 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
         first: page.parts[0]?.id,
         last: page.parts.at(-1)?.id,
       })
-      if (page.parts.length > 0) setPreviewParts((prev) => [...prev, ...page.parts])
+      if (page.parts.length > 0) {
+        setPreviewParts((prev) => [...prev, ...page.parts])
+        setTimeout(updatePreviewWindow, 1)
+      }
       setHasMorePreviewAfter(page.hasMoreAfter)
     } catch (err) {
       debug.log("preview:load-after:error", err instanceof Error ? err.message : String(err))
@@ -499,16 +689,40 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
   }
 
   const schedulePreviewBefore = (previousContentHeight = previewContentHeight(), preserveScroll = true, visibleLoad = false) => {
-    if (!hasMorePreviewBefore() || loadingPreviewMore() || prefetchingPreviewBefore()) return
+    if (!hasMorePreviewBefore() || loadingPreviewMore() || prefetchingPreviewBefore()) {
+      debug.log("preview:prefetch-before:skip", {
+        reason: !hasMorePreviewBefore() ? "no-more-before" : loadingPreviewMore() ? "loading-preview-more" : "prefetching-before",
+        previousContentHeight,
+        preserveScroll,
+        visibleLoad,
+        state: previewScrollState(),
+      })
+      return
+    }
     if (previewBeforeTimer) {
       if (pendingPreviewBefore) {
+        const previousPending = { ...pendingPreviewBefore }
         pendingPreviewBefore.preserveScroll = pendingPreviewBefore.preserveScroll && preserveScroll
         pendingPreviewBefore.visibleLoad = pendingPreviewBefore.visibleLoad || visibleLoad
+        debug.log("preview:prefetch-before:merge", {
+          previousPending,
+          nextPending: pendingPreviewBefore,
+          requested: { previousContentHeight, preserveScroll, visibleLoad },
+          state: previewScrollState(),
+        })
+      } else {
+        debug.log("preview:prefetch-before:skip", {
+          reason: "timer-already-set",
+          previousContentHeight,
+          preserveScroll,
+          visibleLoad,
+          state: previewScrollState(),
+        })
       }
       return
     }
     pendingPreviewBefore = { previousContentHeight, preserveScroll, visibleLoad }
-    debug.log("preview:prefetch-before-scheduled", { preserveScroll, visibleLoad })
+    debug.log("preview:prefetch-before-scheduled", { previousContentHeight, preserveScroll, visibleLoad, state: previewScrollState() })
     previewBeforeTimer = setTimeout(() => {
       const pending = pendingPreviewBefore
       previewBeforeTimer = undefined
@@ -518,10 +732,20 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
   }
 
   const schedulePreviewAfter = (visibleLoad = false) => {
-    if (!hasMorePreviewAfter() || loadingPreviewMore() || prefetchingPreviewAfter()) return
+    if (!hasMorePreviewAfter() || loadingPreviewMore() || prefetchingPreviewAfter()) {
+      debug.log("preview:prefetch-after:skip", {
+        reason: !hasMorePreviewAfter() ? "no-more-after" : loadingPreviewMore() ? "loading-preview-more" : "prefetching-after",
+        visibleLoad,
+        state: previewScrollState(),
+      })
+      return
+    }
     pendingPreviewAfterVisible = pendingPreviewAfterVisible || visibleLoad
-    if (previewAfterTimer) return
-    debug.log("preview:prefetch-after-scheduled", { visibleLoad })
+    if (previewAfterTimer) {
+      debug.log("preview:prefetch-after:skip", { reason: "timer-already-set", visibleLoad, pendingVisibleLoad: pendingPreviewAfterVisible, state: previewScrollState() })
+      return
+    }
+    debug.log("preview:prefetch-after-scheduled", { visibleLoad, state: previewScrollState() })
     previewAfterTimer = setTimeout(() => {
       const pendingVisibleLoad = pendingPreviewAfterVisible
       previewAfterTimer = undefined
@@ -530,12 +754,32 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
     }, 1)
   }
 
+  const scrollPreviewToEstimatedTarget = (item: SearchResult) => {
+    const scroll = previewScroll
+    if (!scroll) return
+    const targetID = messageTargetID(item)
+    const row = previewVirtualLayout().find((entry) => entry.part.id === item.id)
+    if (!row) {
+      scrollPreviewToTarget(scroll, targetID)
+      return
+    }
+
+    const top = Math.max(0, row.top - Math.max(1, Math.floor(scroll.height / 3)))
+    debug.log("preview:target-scroll:estimated", { targetID, targetTop: row.top, scrollTop: scroll.scrollTop, nextScrollTop: top, window: previewWindow() })
+    scroll.scrollTo(top)
+    updatePreviewWindow()
+    setTimeout(() => scrollPreviewToTarget(scroll, targetID), 1)
+  }
+
   let lastPreviewItemId = ""
   createEffect(() => {
     const item = selectedResult()
     if (!item) {
       cancelPreviewPrefetch()
       setPreviewParts([])
+      previewMeasuredHeights.clear()
+      setPreviewHeightVersion((value) => value + 1)
+      setPreviewWindow({ start: 0, end: 0 })
       setHasMorePreviewBefore(false)
       setHasMorePreviewAfter(false)
       return
@@ -543,6 +787,9 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
     if (item.id === lastPreviewItemId) return
     lastPreviewItemId = item.id
     cancelPreviewPrefetch()
+    previewMeasuredHeights.clear()
+    setPreviewHeightVersion((value) => value + 1)
+    setPreviewWindow({ start: 0, end: 0 })
     debug.log("preview:new-item", item.sessionTitle?.slice(0, 40) ?? item.id.slice(-8))
     const db = dbPath()
     debug.time("preview:load")
@@ -560,6 +807,7 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
       setPreviewParts(page.parts)
       setHasMorePreviewBefore(page.hasMoreBefore)
       setHasMorePreviewAfter(page.hasMoreAfter)
+      setTimeout(() => scrollPreviewToEstimatedTarget(item), 1)
     } catch {}
     debug.timeEnd("nav:total")
     debug.timeEnd("preview:load")
@@ -573,18 +821,19 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
       const scroll = previewScroll
       const children = scroll?.getChildren()
       if (!scroll || !children || children.length === 0) return
-      const lastChild = children[children.length - 1] as { y: number; height: number }
-      const totalContentHeight = lastChild.y + lastChild.height
-      const atTop = scroll.y <= 0
+      const totalContentHeight = previewContentHeight()
+      const atTop = scroll.scrollTop <= 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
-      const nearBottom = scroll.y + scroll.height >= totalContentHeight - prefetchDistance
+      const nearTop = scroll.scrollTop <= prefetchDistance
+      const atBottom = scroll.scrollTop + scroll.height >= totalContentHeight - 1
+      const nearBottom = scroll.scrollTop + scroll.height >= totalContentHeight - prefetchDistance
       if (nearTop || nearBottom) {
         debug.log("preview:scroll-edge", {
           y: scroll.y,
+          scrollTop: scroll.scrollTop,
           height: scroll.height,
           contentHeight: totalContentHeight,
+          childContentHeight: previewScrollState().childContentHeight,
           prefetchDistance,
           atTop,
           nearTop,
@@ -597,7 +846,7 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
           children: children.length,
         })
       }
-      if (atTop && hasMorePreviewBefore()) schedulePreviewBefore(totalContentHeight, false, true)
+      if (atTop && hasMorePreviewBefore()) schedulePreviewBefore(totalContentHeight, true, false)
       if (nearBottom && hasMorePreviewAfter()) schedulePreviewAfter(atBottom)
     }, 400)
     onCleanup(() => clearInterval(interval))
@@ -606,11 +855,11 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
   let scrolledItem = ""
   createEffect(() => {
     const item = selectedResult()
-    previewParts()
+    previewVirtualLayout()
     if (!item) return
     if (item.id === scrolledItem) return
     scrolledItem = item.id
-    const timer = setTimeout(() => scrollPreviewToTarget(previewScroll, messageTargetID(item)), 1)
+    const timer = setTimeout(() => scrollPreviewToEstimatedTarget(item), 1)
     onCleanup(() => clearTimeout(timer))
   })
 
@@ -625,7 +874,32 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
 
   const scrollPreview = (direction: 1 | -1, evt: ParsedKey) => {
     prevent(evt)
-    previewScroll?.scrollBy(direction * previewScrollAmount(previewScroll))
+    const scroll = previewScroll
+    if (!scroll) {
+      debug.log("preview:scroll-key:skip", { reason: "no-scroll", direction })
+      return
+    }
+
+    const beforeState = previewScrollState()
+    debug.log("preview:scroll-key", { direction, state: beforeState })
+
+    if (direction < 0 && scroll.scrollTop <= 0 && hasMorePreviewBefore()) {
+      debug.log("preview:scroll-key:load-before", { direction, state: beforeState })
+      schedulePreviewBefore(previewContentHeight(), true, true)
+      return
+    }
+
+    const totalContentHeight = previewContentHeight()
+    if (direction > 0 && scroll.scrollTop + scroll.height >= totalContentHeight - 1 && hasMorePreviewAfter()) {
+      debug.log("preview:scroll-key:load-after", { direction, totalContentHeight, state: beforeState })
+      schedulePreviewAfter(true)
+      return
+    }
+
+    const amount = direction * previewScrollAmount(scroll)
+    scroll.scrollBy(amount)
+    updatePreviewWindow()
+    debug.log("preview:scroll-key:scroll", { direction, amount, before: beforeState, after: previewScrollState() })
   }
 
   const focusInput = () => {
@@ -793,7 +1067,13 @@ export const Telescope = (props: { api: TuiPluginApi; config: TelescopeConfig; o
                 <PreviewHeader item={selectedResult()} query={query()} theme={theme()} />
                 <scrollbox ref={(element: ScrollBoxRenderable) => (previewScroll = element)} flexGrow={1} minHeight={0} paddingLeft={1} paddingRight={1} verticalScrollbarOptions={{ visible: true }}>
                   <Show when={selectedResult()} fallback={<text fg={theme().textMuted}>Select a hit to preview the exact matched message.</text>}>
-                    {(item) => <ConversationPreview item={item()} parts={previewParts()} syntax={syntax()} theme={theme()} />}
+                    {(item) => (
+                      <box flexDirection="column" flexShrink={0}>
+                        <box height={previewTopSpacerHeight()} flexShrink={0} />
+                        <ConversationPreview item={item()} parts={previewWindowParts()} syntax={syntax()} theme={theme()} />
+                        <box height={previewBottomSpacerHeight()} flexShrink={0} />
+                      </box>
+                    )}
                   </Show>
                 </scrollbox>
               </box>

package/ui/render-target.ts

@@ -1,5 +1,6 @@
 import type { ScrollBoxRenderable } from "@opentui/core"
 import type { SearchResult } from "../search.ts"
+import { debug } from "./debug.ts"
 
 export function previewScrollAmount(scroll: ScrollBoxRenderable | undefined) {
   return Math.max(1, Math.floor((scroll?.height || 10) / 8))
@@ -13,10 +14,35 @@ export function messageTargetID(item: SearchResult) {
 }
 
 export function scrollPreviewToTarget(scroll: ScrollBoxRenderable | undefined, targetID: string) {
-  if (!scroll) return
+  if (!scroll) {
+    debug.log("preview:target-scroll:skip", { reason: "no-scroll", targetID })
+    return
+  }
   const target = findRenderableByID(scroll, targetID)
-  if (!target) return
-  scroll.scrollBy(target.y - scroll.y - Math.max(1, Math.floor(scroll.height / 3)))
+  if (!target) {
+    debug.log("preview:target-scroll:skip", {
+      reason: "target-not-found",
+      targetID,
+      y: scroll.y,
+      scrollTop: scroll.scrollTop,
+      scrollHeight: scroll.scrollHeight,
+      height: scroll.height,
+      children: scroll.getChildren().length,
+    })
+    return
+  }
+  const delta = target.y - scroll.y - Math.max(1, Math.floor(scroll.height / 3))
+  debug.log("preview:target-scroll", {
+    targetID,
+    targetY: target.y,
+    scrollY: scroll.y,
+    scrollTop: scroll.scrollTop,
+    scrollHeight: scroll.height,
+    contentHeight: scroll.scrollHeight,
+    delta,
+  })
+  scroll.scrollBy(delta)
+  debug.log("preview:target-scroll:after", { targetID, scrollY: scroll.y, scrollTop: scroll.scrollTop })
 }
 
 export function jumpToRenderedTarget(root: unknown, targetID: string) {
@@ -33,9 +59,10 @@ export function jumpToRenderedTarget(root: unknown, targetID: string) {
   setTimeout(tick, 50)
 }
 
-type RenderNode = {
+export type RenderNode = {
   id?: string
   y: number
+  height?: number
   getChildren(): unknown[]
 }
 
@@ -68,7 +95,7 @@ function isScrollNode(value: RenderNode): value is ScrollNode {
   return "scrollBy" in value && typeof value.scrollBy === "function"
 }
 
-function findRenderableByID(node: unknown, targetID: string): RenderNode | undefined {
+export function findRenderableByID(node: unknown, targetID: string): RenderNode | undefined {
   if (!isRenderNode(node)) return
   if (node.id === targetID) return node
   for (const child of node.getChildren()) {