@bojackduy/opencode-telescope 0.1.2 → 0.1.4

package/README.md

@@ -1,16 +1,30 @@
 # opencode-telescope
 
-Telescope-style session conversation search for the OpenCode TUI.
+Fuzzy search across all your OpenCode conversations — grep through session and chat history, find code snippets, and jump to any chat instantly.
 
-This plugin searches OpenCode's local SQLite session database directly in read-only mode, then opens the selected session with the existing TUI route.
+> Inspired by [telescope.nvim](https://github.com/nvim-telescope/telescope.nvim) — a fuzzy finder for your conversation history.
+
+## Use cases
+
+- **"I know I discussed this somewhere"** — grep all your sessions by keyword
+- **"Find that code snippet"** — search for code you saw in a past LLM response
+- **"Revisit a decision"** — find the conversation where you chose approach X
+- **"Session journal"** — browse your entire conversation history like a timeline
+
+## Features
+
+- **Fuzzy grep** — search across all session messages by text
+- **Live preview** — preview the matched conversation result before opening
+- **Find & jump** — select any result and jump straight to that session
+- **Neovim Telescope-style UX** — familiar `<leader>f` keybind and `/telescope` command
 
 ## Installation
 
-Add the plugin to your `opencode.json` (or `tui.json`):
+Add the plugin to your `tui.json`:
 
 ```jsonc
 {
-  "plugin": ["@bojackduy/opencode-telescope"]
+  "plugin": ["@bojackduy/opencode-telescope"],
 }
 ```
 
@@ -22,4 +36,14 @@ Add the plugin to your `opencode.json` (or `tui.json`):
 
 ## Usage
 
-Run `/telescope` or shortcut `<lead>+f` in OpenCode to search and jump to any session.
+| Action | Key / Command |
+|--------|--------------|
+| Open search | `<leader>f` or `/telescope` |
+| Type to filter | Fuzzy match against conversation text |
+| Navigate results | `↑` / `↓` or `Ctrl+j` / `Ctrl+k` |
+| Preview | Select a result to see the conversation preview |
+| Open | Press `Enter` to jump to the selected session |
+
+## How it works
+
+Reads the OpenCode local SQLite session database in read-only mode, parses conversations into searchable text, and opens the selected session through the existing TUI route.

package/components/preview.tsx

@@ -228,10 +228,20 @@ function searchResultPreviewPart(item: SearchResult): ConversationPreviewPart {
 }
 
 function conversationMatch(part: ConversationPreviewPart, item: SearchResult) {
-  if (!part.target) return
-  const index = part.text.toLowerCase().indexOf(item.match.toLowerCase())
-  if (index === -1 || !item.match) return
-  return { start: index, end: index + item.match.length }
+  if (!part.target || !item.match) return
+  const tokens = item.match.split(/\s+/)
+  const lowerText = part.text.toLowerCase()
+  let searchPos = 0
+  let firstStart = -1
+  let lastEnd = -1
+  for (const token of tokens) {
+    const index = lowerText.indexOf(token.toLowerCase(), searchPos)
+    if (index === -1) return
+    if (firstStart === -1) firstStart = index
+    searchPos = index + token.length
+    lastEnd = searchPos
+  }
+  return { start: firstStart, end: lastEnd }
 }
 
 function conversationMarkdown(part: ConversationPreviewPart, item: SearchResult) {
@@ -243,14 +253,23 @@ function conversationMarkdown(part: ConversationPreviewPart, item: SearchResult)
 function matchExcerpt(text: string, query: string, radius = 80) {
   const needle = query.trim()
   if (!needle) return
-  const start = text.toLowerCase().indexOf(needle.toLowerCase())
-  if (start === -1) return
-  const end = start + needle.length
-  const beforeStart = Math.max(0, start - radius)
-  const afterEnd = Math.min(text.length, end + radius)
+  const tokens = needle.split(/\s+/)
+  const lowerText = text.toLowerCase()
+  let searchPos = 0
+  let firstStart = -1
+  let lastEnd = -1
+  for (const token of tokens) {
+    const start = lowerText.indexOf(token.toLowerCase(), searchPos)
+    if (start === -1) return
+    if (firstStart === -1) firstStart = start
+    searchPos = start + token.length
+    lastEnd = searchPos
+  }
+  const beforeStart = Math.max(0, firstStart - radius)
+  const afterEnd = Math.min(text.length, lastEnd + radius)
   return {
-    before: `${beforeStart > 0 ? "..." : ""}${text.slice(beforeStart, start).replace(/\s+/g, " ")}`,
-    match: text.slice(start, end),
-    after: `${text.slice(end, afterEnd).replace(/\s+/g, " ")}${afterEnd < text.length ? "..." : ""}`,
+    before: `${beforeStart > 0 ? "..." : ""}${text.slice(beforeStart, firstStart).replace(/\s+/g, " ")}`,
+    match: text.slice(firstStart, lastEnd),
+    after: `${text.slice(lastEnd, afterEnd).replace(/\s+/g, " ")}${afterEnd < text.length ? "..." : ""}`,
   }
 }

package/components/result-list.tsx

@@ -59,6 +59,28 @@ export const EmptyState = (props: { query: string; theme: TuiThemeCurrent }) =>
   </box>
 )
 
+export const SkeletonRow = (props: { theme: TuiThemeCurrent }) => (
+  <box
+    flexDirection="column"
+    paddingLeft={2}
+    paddingRight={2}
+    paddingTop={0}
+    paddingBottom={1}
+  >
+    <text wrapMode="none" overflow="hidden">
+      <span style={{ fg: props.theme.textMuted }}>  </span>
+      <span style={{ fg: props.theme.textMuted }}>────────────────────</span>
+      <span style={{ fg: props.theme.textMuted }}>  </span>
+      <span style={{ fg: props.theme.textMuted }}>you</span>
+      <span style={{ fg: props.theme.textMuted }}> · -- --- --:--</span>
+    </text>
+    <text wrapMode="none" overflow="hidden">
+      <span style={{ fg: props.theme.textMuted }}>  </span>
+      <span style={{ fg: props.theme.textMuted }}>∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙</span>
+    </text>
+  </box>
+)
+
 const HighlightedText = (props: {
   before: string
   match: string

package/package.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@bojackduy/opencode-telescope",
-  "version": "0.1.2",
-  "description": "Telescope-style session conversation search for OpenCode TUI",
+  "version": "0.1.4",
+  "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",
   "repository": {
@@ -18,7 +18,16 @@
     "opencode-plugin",
     "tui",
     "telescope",
-    "search"
+    "search",
+    "session",
+    "conversation",
+    "history",
+    "fuzzy",
+    "fuzzy-finder",
+    "grep",
+    "finder",
+    "neovim",
+    "chat-history"
   ],
   "scripts": {
     "typecheck": "bun tsc -p tsconfig.json --noEmit",

package/search.ts

@@ -2,6 +2,7 @@ import { Database } from "bun:sqlite"
 import { existsSync, readdirSync } from "node:fs"
 import { homedir } from "node:os"
 import path from "node:path"
+import { debug } from "./ui/debug.ts"
 
 export type SearchResult = {
   id: string
@@ -67,20 +68,23 @@ type ConversationRow = {
   data: string
 }
 
+let cachedDbPath: string | undefined
+
 export function resolveDatabasePath() {
+  if (cachedDbPath) return cachedDbPath
   if (process.env.OPENCODE_DB) {
-    if (process.env.OPENCODE_DB === ":memory:" || path.isAbsolute(process.env.OPENCODE_DB)) return process.env.OPENCODE_DB
-    return path.join(candidateDataDirs()[0] ?? defaultDataDir(), process.env.OPENCODE_DB)
+    if (process.env.OPENCODE_DB === ":memory:" || path.isAbsolute(process.env.OPENCODE_DB)) return cachedDbPath = process.env.OPENCODE_DB
+    return cachedDbPath = path.join(candidateDataDirs()[0] ?? defaultDataDir(), process.env.OPENCODE_DB)
   }
   if (process.env.OPENCODE_DISABLE_CHANNEL_DB === "1" || process.env.OPENCODE_DISABLE_CHANNEL_DB === "true") {
-    return requireExistingDatabase(["opencode.db"])
+    return cachedDbPath = requireExistingDatabase(["opencode.db"])
   }
   const stable = candidateDatabasePaths(["opencode.db"]).find(existsSync)
-  if (stable) return stable
+  if (stable) return cachedDbPath = stable
   if (process.env.OPENCODE_CHANNEL) {
     const channel = process.env.OPENCODE_CHANNEL.replace(/[^a-zA-Z0-9._-]/g, "-")
     const candidate = candidateDatabasePaths([`opencode-${channel}.db`]).find(existsSync)
-    if (candidate) return candidate
+    if (candidate) return cachedDbPath = candidate
   }
   const fallback = candidateDatabasePaths(["opencode.db"])[0] ?? path.join(defaultDataDir(), "opencode.db")
   try {
@@ -91,28 +95,28 @@ export function resolveDatabasePath() {
           .map((entry) => path.join(dir, entry.name)),
       )
       .at(0)
-    return discovered ?? fallback
+    return cachedDbPath = discovered ?? fallback
   } catch {
-    return fallback
+    return cachedDbPath = fallback
   }
 }
 
-export function searchSessionMessages(query: string, options?: { limit?: number; dbPath?: string; directory?: string }) {
+export function searchSessionMessages(query: string, options?: { limit?: number; offset?: number; dbPath?: string; directory?: string }) {
   const term = query.trim()
   if (!term) return []
   if (options?.dbPath === ":memory:") return []
   const db = new Database(options?.dbPath ?? resolveDatabasePath(), { readonly: true })
   try {
-    return searchRows(db, term, options?.limit ?? 80, options?.directory)
+    return searchRows(db, term, options?.limit ?? 80, options?.directory, options?.offset)
   } finally {
     db.close()
   }
 }
 
-export function recentSessionMessages(options?: { limit?: number; dbPath?: string; directory?: string }) {
+export function recentSessionMessages(options?: { limit?: number; offset?: number; dbPath?: string; directory?: string }) {
   const db = new Database(options?.dbPath ?? resolveDatabasePath(), { readonly: true })
   try {
-    return visibleTextRows(db, options?.limit ?? 40, undefined, options?.directory).flatMap(
+    return visibleTextRows(db, options?.limit ?? 40, undefined, options?.directory, options?.offset).flatMap(
       (row) => rowToSearchResult(row, "") ?? [],
     )
   } finally {
@@ -121,34 +125,67 @@ export function recentSessionMessages(options?: { limit?: number; dbPath?: strin
 }
 
 export function loadConversationWindow(result: SearchResult, options?: { before?: number; after?: number; dbPath?: string }) {
+  debug.time("preview:query:total")
   const db = new Database(options?.dbPath ?? resolveDatabasePath(), { readonly: true })
   try {
-    return db
-      .query<ConversationRow, [string, string, number, number]>(`
-        WITH visible AS (
-          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,
-                 row_number() OVER (ORDER BY p.time_created ASC, p.id ASC) AS rn
-          FROM part p
-          JOIN message m ON m.id = p.message_id
-          WHERE p.session_id = ?
-            AND json_extract(p.data, '$.type') IN ('text', 'reasoning', 'tool')
-            AND json_extract(m.data, '$.role') IN ('user', 'assistant')
-        ), hit AS (
-          SELECT rn FROM visible WHERE id = ?
-        )
-        SELECT id, message_id, session_id, role, type, time_created, data
-        FROM visible
-        WHERE rn BETWEEN (SELECT rn FROM hit) - ? AND (SELECT rn FROM hit) + ?
-        ORDER BY time_created ASC, id ASC
-      `)
-      .all(result.sessionID, result.id, options?.before ?? 12, options?.after ?? 24)
-      .flatMap((row) => parseConversationPart(row, row.id === result.id) ?? [])
+    const before = options?.before ?? 3
+    const after = options?.after ?? 6
+
+    debug.time("preview:query:hit")
+    const hit = db.query<{ time_created: number }, [string]>(
+      "SELECT time_created FROM part WHERE id = ?",
+    ).get(result.id)
+    debug.timeEnd("preview:query:hit")
+    if (!hit) {
+      debug.timeEnd("preview:query:total")
+      return []
+    }
+
+    const fetchBefore = Math.max(before * 4, 30)
+    const fetchAfter = Math.max(after * 4, 50)
+
+    debug.time("preview:query:before")
+    const beforeRows = 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, hit.time_created, hit.time_created, result.id, fetchBefore)
+    debug.timeEnd("preview:query:before")
+
+    debug.time("preview:query:after")
+    const afterRows = 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, hit.time_created, hit.time_created, result.id, fetchAfter)
+    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 parts = [
+      ...beforeRows.filter(isValid).slice(0, before).reverse(),
+      ...afterRows.filter(isValid).slice(0, after + 1),
+    ].flatMap((row) => parseConversationPart(row, row.id === result.id) ?? [])
+    debug.timeEnd("preview:query:parse")
+    debug.timeEnd("preview:query:total")
+    return parts
   } finally {
     db.close()
   }
@@ -193,10 +230,20 @@ export function extractSearchText(data: string) {
 
 export function makeSnippet(text: string, query: string, radius = 72) {
   const haystack = text.replace(/\s+/g, " ").trim()
-  const index = haystack.toLowerCase().indexOf(query.trim().toLowerCase())
-  if (index === -1) return truncate(haystack, radius * 2)
-  const start = Math.max(0, index - radius)
-  const end = Math.min(haystack.length, index + query.length + radius)
+  const tokens = query.trim().split(/\s+/)
+  const lower = haystack.toLowerCase()
+  let searchPos = 0
+  let firstIndex = -1
+  let lastEnd = 0
+  for (const token of tokens) {
+    const index = lower.indexOf(token.toLowerCase(), searchPos)
+    if (index === -1) return truncate(haystack, radius * 2)
+    if (firstIndex === -1) firstIndex = index
+    searchPos = index + token.length
+    lastEnd = searchPos
+  }
+  const start = Math.max(0, firstIndex - radius)
+  const end = Math.min(haystack.length, lastEnd + radius)
   return `${start > 0 ? "..." : ""}${haystack.slice(start, end)}${end < haystack.length ? "..." : ""}`
 }
 
@@ -214,15 +261,27 @@ function findMatch(text: string, query: string, radius = 96) {
       excerpt: collapsed.slice(0, end),
     }
   }
-  const start = text.toLowerCase().indexOf(needle.toLowerCase())
-  if (start === -1) return
-  const end = start + needle.length
+  const tokens = needle.split(/\s+/)
+  const lowerText = text.toLowerCase()
+  let searchPos = 0
+  let firstStart = -1
+  let lastEnd = -1
+  for (const token of tokens) {
+    const pos = lowerText.indexOf(token.toLowerCase(), searchPos)
+    if (pos === -1) return
+    if (firstStart === -1) firstStart = pos
+    searchPos = pos + token.length
+    lastEnd = searchPos
+  }
+  const start = firstStart
+  const end = lastEnd
   const lineStart = text.lastIndexOf("\n", start - 1) + 1
   const nextLine = text.indexOf("\n", end)
   const lineEnd = nextLine === -1 ? text.length : nextLine
   const line = text.slice(lineStart, lineEnd)
+  const matchLen = end - start
   const lineMatchStart = Math.max(0, start - lineStart)
-  const lineMatchEnd = lineMatchStart + needle.length
+  const lineMatchEnd = lineMatchStart + matchLen
   const excerptStart = Math.max(0, lineMatchStart - radius)
   const excerptEnd = Math.min(line.length, lineMatchEnd + radius)
   const before = normalizeSnippetSegment(line.slice(excerptStart, lineMatchStart))
@@ -358,35 +417,35 @@ function parseToolState(value: unknown): ToolState | undefined {
   }
 }
 
-function searchRows(db: Database, query: string, limit: number, directory?: string) {
+function searchRows(db: Database, query: string, limit: number, directory?: string, offset?: number) {
   if (!tableExists(db, "part") || !tableExists(db, "message")) return []
-  return visibleTextRows(db, limit, query, directory).flatMap((row) => rowToSearchResult(row, query) ?? [])
+  return visibleTextRows(db, limit, query, directory, offset).flatMap((row) => rowToSearchResult(row, query) ?? [])
 }
 
-function visibleTextRows(db: Database, limit: number, query?: string, directory?: string) {
-  if (query) {
-    const input = directory ? [directory, `%${query}%`, limit] satisfies [string, string, number] : [`%${query}%`, limit] satisfies [string, number]
-    return db
-      .query<Row, [string, string, number] | [string, number]>(`
-        SELECT p.id, p.message_id, p.session_id, s.title AS session_title, s.directory,
-               json_extract(m.data, '$.role') AS role,
-               p.time_created,
-               json_extract(p.data, '$.text') AS text
-        FROM part p
-        JOIN message m ON m.id = p.message_id
-        JOIN session s ON s.id = p.session_id
-        WHERE json_extract(p.data, '$.type') = 'text'
-          AND json_extract(m.data, '$.role') IN ('user', 'assistant')
-          ${directory ? "AND s.directory = ?" : ""}
-          AND json_extract(p.data, '$.text') LIKE ?
-        ORDER BY p.time_created DESC
-        LIMIT ?
-      `)
-      .all(...input)
+function visibleTextRows(db: Database, limit: number, query?: string, directory?: string, offset?: number) {
+  const offsetClause = offset ? "OFFSET ?" : ""
+  const conditions: string[] = [
+    "json_extract(p.data, '$.type') = 'text'",
+    "json_extract(m.data, '$.role') IN ('user', 'assistant')",
+  ]
+  const params: (string | number)[] = []
+
+  if (directory) {
+    conditions.push("s.directory = ?")
+    params.push(directory)
   }
-  const input = directory ? [directory, limit] satisfies [string, number] : [limit] satisfies [number]
+
+  const tokens = query ? query.trim().split(/\s+/).filter(Boolean) : []
+  for (const token of tokens) {
+    conditions.push("json_extract(p.data, '$.text') LIKE ?")
+    params.push(`%${token}%`)
+  }
+
+  params.push(limit)
+  if (offset) params.push(offset)
+
   return db
-    .query<Row, [string, number] | [number]>(`
+    .query<Row, (string | number)[]>(`
       SELECT p.id, p.message_id, p.session_id, s.title AS session_title, s.directory,
              json_extract(m.data, '$.role') AS role,
              p.time_created,
@@ -394,13 +453,11 @@ function visibleTextRows(db: Database, limit: number, query?: string, directory?
       FROM part p
       JOIN message m ON m.id = p.message_id
       JOIN session s ON s.id = p.session_id
-      WHERE json_extract(p.data, '$.type') = 'text'
-        AND json_extract(m.data, '$.role') IN ('user', 'assistant')
-        ${directory ? "AND s.directory = ?" : ""}
+      WHERE ${conditions.join(" AND ")}
       ORDER BY p.time_created DESC
-      LIMIT ?
+      LIMIT ? ${offsetClause}
     `)
-    .all(...input)
+    .all(...params as any[])
 }
 
 function tableExists(db: Database, name: string) {

package/telescope.tsx

@@ -4,7 +4,7 @@ import type { InputRenderable, ParsedKey, ScrollBoxRenderable } from "@opentui/c
 import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
 import { For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 import { ConversationPreview, PreviewHeader } from "./components/preview.tsx"
-import { EmptyState, ResultRow } from "./components/result-list.tsx"
+import { EmptyState, ResultRow, SkeletonRow } from "./components/result-list.tsx"
 import {
   loadConversationWindow,
   recentSessionMessages,
@@ -13,6 +13,7 @@ import {
   type ConversationPreviewPart,
   type SearchResult,
 } from "./search.ts"
+import { debug } from "./ui/debug.ts"
 import { syntaxStyle } from "./ui/format.ts"
 import { isKey, prevent } from "./ui/keyboard.ts"
 import { jumpToRenderedTarget, messageTargetID, previewScrollAmount, scrollPreviewToTarget } from "./ui/render-target.ts"
@@ -25,6 +26,16 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
   const [selected, setSelected] = 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 })
   let input: InputRenderable | undefined
   let resultScroll: ScrollBoxRenderable | undefined
   let previewScroll: ScrollBoxRenderable | undefined
@@ -36,36 +47,52 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
   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 = resolveDatabasePath()
+  const dbPath = createMemo(() => resolveDatabasePath())
   const directory = props.api.state.path.directory
 
-  createEffect(() => {
-    setTimeout(() => input?.focus(), 1)
-  })
-
   createEffect(() => {
     const q = query().trim()
     setError("")
+    setHasMore(true)
+    const db = dbPath()
+    const dir = directory
+
     if (!q) {
-      try {
-        setResults(recentSessionMessages({ limit: 40, dbPath, directory }))
-      } catch (err) {
-        setResults([])
-        setError(err instanceof Error ? err.message : String(err))
-      }
-      setSelected(0)
+      setLoading(true)
+      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)
+        } catch (err) {
+          setResults([])
+          setError(err instanceof Error ? err.message : String(err))
+        }
+        debug.timeEnd("query:recent")
+        setLoading(false)
+      }, 1)
+      onCleanup(() => clearTimeout(timer))
       return
     }
+
+    setLoading(true)
     setBusy(true)
     const timer = setTimeout(() => {
+      debug.time("query:search")
       try {
-        setResults(searchSessionMessages(q, { limit: 120, dbPath, directory }))
+        const batch = searchSessionMessages(q, { limit: BATCH_SIZE, offset: 0, dbPath: db, directory: dir })
+        setResults(batch)
+        setHasMore(batch.length >= BATCH_SIZE)
         setSelected(0)
       } catch (err) {
         setResults([])
         setError(err instanceof Error ? err.message : String(err))
       } finally {
+        debug.timeEnd("query:search")
         setBusy(false)
+        setLoading(false)
       }
     }, 180)
     onCleanup(() => clearTimeout(timer))
@@ -73,6 +100,7 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
 
   const move = (delta: number) => {
     if (results().length === 0) return
+    debug.time("nav:total")
     setSelected((index) => (index + delta + results().length) % results().length)
   }
 
@@ -90,24 +118,82 @@ 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 q = query().trim()
+    const db = dbPath()
+    const dir = directory
+
+    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)
+      }
+    }, 100)
+    onCleanup(() => clearTimeout(timer))
+  })
+
+  let lastPreviewItemId = ""
   createEffect(() => {
     const item = selectedResult()
+    const range = previewRange()
     if (!item) {
       setPreviewParts([])
       return
     }
-    try {
-      setPreviewParts(loadConversationWindow(item, { before: 12, after: 24, dbPath }))
-    } catch {
-      setPreviewParts([])
+    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
     }
+    const db = dbPath()
+    debug.time("preview:load")
+    try {
+      setPreviewParts(loadConversationWindow(item, { before: range.before, after: range.after, dbPath: db }))
+    } catch {}
+    debug.timeEnd("nav:total")
+    debug.timeEnd("preview:load")
+  })
+
+  createEffect(() => {
+    const item = selectedResult()
+    if (!item) return
+    const interval = setInterval(() => {
+      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 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 }))
+    }, 400)
+    onCleanup(() => clearInterval(interval))
   })
 
   createEffect(() => {
     const item = selectedResult()
     previewParts()
     if (!item) return
-    setTimeout(() => scrollPreviewToTarget(previewScroll, messageTargetID(item)), 1)
+    const timer = setTimeout(() => scrollPreviewToTarget(previewScroll, messageTargetID(item)), 1)
+    onCleanup(() => clearTimeout(timer))
   })
 
   const open = () => {
@@ -124,35 +210,59 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
     previewScroll?.scrollBy(direction * previewScrollAmount(previewScroll))
   }
 
+  const focusInput = () => {
+    input?.focus()
+  }
+
+  const blurInput = () => {
+    const el = input as (InputRenderable & { blur?: () => void }) | undefined
+    el?.blur?.()
+  }
+
   useKeyboard((evt) => {
     if (!props.api.ui.dialog.open) return
-    if (isKey(evt, "escape", "esc") || (evt.ctrl && isKey(evt, "c"))) {
-      prevent(evt)
-      props.onClose()
-      return
-    }
-    if (isKey(evt, "down") || (evt.ctrl && isKey(evt, "j"))) {
-      prevent(evt)
-      move(1)
-      return
-    }
-    if (isKey(evt, "up") || (evt.ctrl && isKey(evt, "k"))) {
-      prevent(evt)
-      move(-1)
-      return
-    }
-    if (isKey(evt, "enter", "return")) {
+
+    if (isKey(evt, "down") || isKey(evt, "up")) {
       prevent(evt)
-      open()
-      return
-    }
-    if (evt.ctrl && isKey(evt, "d")) {
-      scrollPreview(1, evt)
+      isKey(evt, "down") ? move(1) : move(-1)
       return
     }
-    if (evt.ctrl && isKey(evt, "u")) {
-      scrollPreview(-1, evt)
-      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
+      }
     }
   })
 
@@ -183,15 +293,20 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
                   focusedBackgroundColor={theme().backgroundPanel}
                   onInput={(value) => setQuery(value)}
                   onKeyDown={(evt: ParsedKey) => {
-                    if (evt.ctrl && isKey(evt, "d")) {
-                      scrollPreview(1, evt)
+                    if (isKey(evt, "down") || isKey(evt, "up")) {
+                      prevent(evt)
+                      isKey(evt, "down") ? move(1) : move(-1)
                       return
                     }
-                    if (evt.ctrl && isKey(evt, "u")) scrollPreview(-1, evt)
+                    if (evt.ctrl && isKey(evt, "q")) {
+                      prevent(evt)
+                      setMode("normal")
+                      blurInput()
+                    }
                   }}
                   flexGrow={1}
                 />
-                <text fg={theme().textMuted}>{busy() ? "searching" : query().trim() ? `${results().length} hits` : `${results().length} recent`}</text>
+                <text fg={theme().textMuted}>{busy() ? "searching" : loading() ? "loading..." : query().trim() ? `${results().length} hits` : `${results().length} recent`}</text>
               </box>
             </box>
 
@@ -207,20 +322,36 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
                       </box>
                     }
                   >
-                    <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>
+                    <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>
+                        <Show when={loadingMore()}>
+                          <SkeletonRow theme={theme()} />
+                        </Show>
+                        <Show when={!hasMore() && results().length > 0}>
+                          <text fg={theme().textMuted}>  no more results</text>
+                        </Show>
+                      </Show>
+                    </Show>
+                    <Show when={loading()}>
+                      <SkeletonRow theme={theme()} />
+                      <SkeletonRow theme={theme()} />
+                      <SkeletonRow theme={theme()} />
+                      <SkeletonRow theme={theme()} />
+                      <SkeletonRow theme={theme()} />
+                      <SkeletonRow theme={theme()} />
                     </Show>
                   </Show>
                 </scrollbox>
@@ -238,16 +369,29 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
               </box>
             </box>
 
-            <box paddingLeft={4} paddingRight={4} flexDirection="row" justifyContent="space-between" backgroundColor={theme().backgroundElement}>
-              <box flexDirection="row" gap={2}>
-                <text fg={theme().textMuted}>^J/^K move</text>
-                <text fg={theme().textMuted}>^D/^U preview</text>
-              </box>
-              <box flexDirection="row" gap={2}>
+            <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}>esc close</text>
+                <text fg={theme().textMuted}>·</text>
+                <text fg={theme().text}>q close</text>
               </box>
-            </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>
+              </box>
+            </Show>
+
           </box>
         </box>
       </box>

package/tsconfig.json

@@ -13,5 +13,6 @@
     "skipLibCheck": true,
     "types": ["bun"]
   },
-  "include": ["**/*.ts", "**/*.tsx"]
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["opencode-smart-session-picker/**"]
 }

package/ui/debug.ts

@@ -0,0 +1,25 @@
+const enabled = process.env.OPENCODE_TELESCOPE_DEBUG === "1"
+const timers = new Map<string, number>()
+
+export const debug = {
+  get enabled() {
+    return enabled
+  },
+
+  time(label: string) {
+    if (enabled) timers.set(label, performance.now())
+  },
+
+  timeEnd(label: string) {
+    if (!enabled) return
+    const start = timers.get(label)
+    if (start !== undefined) {
+      console.log(`[telescope:time] ${label} ${(performance.now() - start).toFixed(2)}ms`)
+      timers.delete(label)
+    }
+  },
+
+  log(...args: unknown[]) {
+    if (enabled) console.log("[telescope]", ...args)
+  },
+}