@bojackduy/opencode-telescope 0.1.2

package/search.ts

@@ -0,0 +1,448 @@
+import { Database } from "bun:sqlite"
+import { existsSync, readdirSync } from "node:fs"
+import { homedir } from "node:os"
+import path from "node:path"
+
+export type SearchResult = {
+  id: string
+  messageID: string
+  sessionID: string
+  sessionTitle: string
+  directory: string
+  role: "user" | "assistant"
+  timeCreated: number
+  snippet: string
+  matchStart: number
+  matchEnd: number
+  before: string
+  match: string
+  after: string
+  excerpt: string
+  previewBefore: string
+  previewMatch: string
+  previewAfter: string
+  previewMode: "markdown" | "text"
+  previewHighlight: boolean
+  text: string
+}
+
+export type ConversationPreviewPart = {
+  id: string
+  messageID: string
+  sessionID: string
+  role: "user" | "assistant"
+  type: "text" | "reasoning" | "tool"
+  timeCreated: number
+  text: string
+  tool?: string
+  state?: ToolState
+  target: boolean
+}
+
+export type ToolState = {
+  status: "pending" | "running" | "completed" | "error"
+  input?: unknown
+  output?: string
+  error?: string
+}
+
+type Row = {
+  id: string
+  message_id: string
+  session_id: string
+  session_title: string | null
+  directory: string
+  role: "user" | "assistant"
+  time_created: number
+  text: string
+}
+
+type ConversationRow = {
+  id: string
+  message_id: string
+  session_id: string
+  role: "user" | "assistant"
+  type: "text" | "reasoning" | "tool"
+  time_created: number
+  data: string
+}
+
+export function resolveDatabasePath() {
+  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_DISABLE_CHANNEL_DB === "1" || process.env.OPENCODE_DISABLE_CHANNEL_DB === "true") {
+    return requireExistingDatabase(["opencode.db"])
+  }
+  const stable = candidateDatabasePaths(["opencode.db"]).find(existsSync)
+  if (stable) return 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
+  }
+  const fallback = candidateDatabasePaths(["opencode.db"])[0] ?? path.join(defaultDataDir(), "opencode.db")
+  try {
+    const discovered = candidateDataDirs()
+      .flatMap((dir) =>
+        readdirSync(dir, { withFileTypes: true })
+          .filter((entry) => entry.isFile() && /^opencode-.+\.db$/.test(entry.name))
+          .map((entry) => path.join(dir, entry.name)),
+      )
+      .at(0)
+    return discovered ?? fallback
+  } catch {
+    return fallback
+  }
+}
+
+export function searchSessionMessages(query: string, options?: { limit?: 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)
+  } finally {
+    db.close()
+  }
+}
+
+export function recentSessionMessages(options?: { limit?: 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(
+      (row) => rowToSearchResult(row, "") ?? [],
+    )
+  } finally {
+    db.close()
+  }
+}
+
+export function loadConversationWindow(result: SearchResult, options?: { before?: number; after?: number; dbPath?: string }) {
+  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) ?? [])
+  } finally {
+    db.close()
+  }
+}
+
+export function rowToSearchResult(row: Row, query: string): SearchResult | undefined {
+  const text = row.text.trim()
+  const match = findMatch(text, query)
+  if (!match) return
+  const preview = focusedPreview(text, match.start, match.end)
+  return {
+    id: row.id,
+    messageID: row.message_id,
+    sessionID: row.session_id,
+    sessionTitle: row.session_title || "Untitled session",
+    directory: row.directory,
+    role: row.role,
+    timeCreated: row.time_created,
+    snippet: makeSnippet(text, query),
+    matchStart: match.start,
+    matchEnd: match.end,
+    before: match.before,
+    match: match.match,
+    after: match.after,
+    excerpt: match.excerpt,
+    previewBefore: preview.before,
+    previewMatch: preview.match,
+    previewAfter: preview.after,
+    previewMode: preview.mode,
+    previewHighlight: preview.highlight,
+    text,
+  }
+}
+
+export function extractSearchText(data: string) {
+  try {
+    return extractFromValue(JSON.parse(data)).replace(/\s+/g, " ").trim()
+  } catch {
+    return data.replace(/\s+/g, " ").trim()
+  }
+}
+
+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)
+  return `${start > 0 ? "..." : ""}${haystack.slice(start, end)}${end < haystack.length ? "..." : ""}`
+}
+
+function findMatch(text: string, query: string, radius = 96) {
+  const needle = query.trim()
+  if (!needle) {
+    const collapsed = text.replace(/\s+/g, " ").trim()
+    const end = Math.min(collapsed.length, radius * 2)
+    return {
+      start: 0,
+      end: 0,
+      before: "",
+      match: "",
+      after: collapsed.slice(0, end),
+      excerpt: collapsed.slice(0, end),
+    }
+  }
+  const start = text.toLowerCase().indexOf(needle.toLowerCase())
+  if (start === -1) return
+  const end = start + needle.length
+  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 lineMatchStart = Math.max(0, start - lineStart)
+  const lineMatchEnd = lineMatchStart + needle.length
+  const excerptStart = Math.max(0, lineMatchStart - radius)
+  const excerptEnd = Math.min(line.length, lineMatchEnd + radius)
+  const before = normalizeSnippetSegment(line.slice(excerptStart, lineMatchStart))
+  const after = normalizeSnippetSegment(line.slice(lineMatchEnd, excerptEnd))
+  return {
+    start,
+    end,
+    before: `${excerptStart > 0 ? "..." : ""}${before}`,
+    match: text.slice(start, end),
+    after: `${after}${excerptEnd < line.length ? "..." : ""}`,
+    excerpt: `${excerptStart > 0 ? "..." : ""}${normalizeSnippetSegment(line.slice(excerptStart, excerptEnd))}${excerptEnd < line.length ? "..." : ""}`,
+  }
+}
+
+function normalizeSnippetSegment(value: string) {
+  return value.replace(/\s+/g, " ")
+}
+
+function focusedPreview(text: string, matchStart: number, matchEnd: number) {
+  if (matchStart === matchEnd) {
+    const preview = text.slice(0, Math.min(text.length, 1400))
+    return { before: preview, match: "", after: "", mode: "markdown" as const, highlight: false }
+  }
+
+  const lineStart = text.lastIndexOf("\n", matchStart - 1) + 1
+  const nextLine = text.indexOf("\n", matchEnd)
+  const lineEnd = nextLine === -1 ? text.length : nextLine
+  const line = text.slice(lineStart, lineEnd)
+
+  if (line.length > 260) {
+    const beforeStart = Math.max(0, matchStart - 180)
+    const afterEnd = Math.min(text.length, matchEnd + 220)
+    return {
+      before: `${beforeStart > 0 ? "..." : ""}${text.slice(beforeStart, matchStart)}`,
+      match: text.slice(matchStart, matchEnd),
+      after: `${text.slice(matchEnd, afterEnd)}${afterEnd < text.length ? "..." : ""}`,
+      mode: "text" as const,
+      highlight: true,
+    }
+  }
+
+  const window = lineWindow(text, matchStart, matchEnd, 40, 80)
+  const windowText = text.slice(window.start, window.end)
+  const relativeStart = matchStart - window.start
+  const relativeEnd = matchEnd - window.start
+
+  const insideCodeFence = isInsideCodeFence(text, matchStart)
+  return {
+    before: `${window.start > 0 ? "...\n" : ""}${windowText.slice(0, relativeStart)}`,
+    match: windowText.slice(relativeStart, relativeEnd),
+    after: `${windowText.slice(relativeEnd)}${window.end < text.length ? "\n..." : ""}`,
+    mode: "markdown" as const,
+    highlight: !insideCodeFence,
+  }
+}
+
+function lineWindow(text: string, matchStart: number, matchEnd: number, before: number, after: number) {
+  const starts = [0]
+  for (let index = text.indexOf("\n"); index !== -1; index = text.indexOf("\n", index + 1)) {
+    starts.push(index + 1)
+  }
+  const matchLine = findLastStartIndex(starts, matchStart)
+  const startLine = Math.max(0, matchLine - before)
+  const endLine = Math.min(starts.length - 1, matchLine + after)
+  const start = starts[startLine] ?? 0
+  const end = starts[endLine + 1] ? starts[endLine + 1] - 1 : text.length
+  return { start, end: Math.max(end, matchEnd) }
+}
+
+function findLastStartIndex(starts: number[], offset: number) {
+  for (let index = starts.length - 1; index >= 0; index--) {
+    if (starts[index]! <= offset) return index
+  }
+  return 0
+}
+
+function isInsideCodeFence(text: string, offset: number) {
+  const before = text.slice(0, offset)
+  const fences = before.match(/^```/gm)
+  return Boolean(fences && fences.length % 2 === 1)
+}
+
+function parseConversationPart(row: ConversationRow, target: boolean): ConversationPreviewPart | undefined {
+  const data = parsePartData(row.data)
+  if (!data) return
+  if (row.type === "tool") {
+    return {
+      id: row.id,
+      messageID: row.message_id,
+      sessionID: row.session_id,
+      role: row.role,
+      type: row.type,
+      timeCreated: row.time_created,
+      text: "",
+      tool: typeof data.tool === "string" ? data.tool : "tool",
+      state: parseToolState(data.state),
+      target,
+    }
+  }
+  const text = typeof data.text === "string" ? data.text.trim() : ""
+  if (!text) return
+  return {
+    id: row.id,
+    messageID: row.message_id,
+    sessionID: row.session_id,
+    role: row.role,
+    type: row.type,
+    timeCreated: row.time_created,
+    text,
+    target,
+  }
+}
+
+function parsePartData(data: string) {
+  try {
+    const value = JSON.parse(data) as unknown
+    if (!value || typeof value !== "object" || Array.isArray(value)) return
+    return value as Record<string, unknown>
+  } catch {
+    return
+  }
+}
+
+function parseToolState(value: unknown): ToolState | undefined {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return
+  const state = value as Record<string, unknown>
+  if (!["pending", "running", "completed", "error"].includes(String(state.status))) return
+  return {
+    status: state.status as ToolState["status"],
+    input: state.input,
+    output: typeof state.output === "string" ? state.output : undefined,
+    error: typeof state.error === "string" ? state.error : undefined,
+  }
+}
+
+function searchRows(db: Database, query: string, limit: number, directory?: string) {
+  if (!tableExists(db, "part") || !tableExists(db, "message")) return []
+  return visibleTextRows(db, limit, query, directory).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)
+  }
+  const input = directory ? [directory, limit] satisfies [string, number] : [limit] satisfies [number]
+  return db
+    .query<Row, [string, number] | [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 = ?" : ""}
+      ORDER BY p.time_created DESC
+      LIMIT ?
+    `)
+    .all(...input)
+}
+
+function tableExists(db: Database, name: string) {
+  return Boolean(db.query<{ name: string }, [string]>("SELECT name FROM sqlite_master WHERE type = 'table' AND name = ?").get(name))
+}
+
+function defaultDataDir() {
+  if (process.env.XDG_DATA_HOME) return path.join(process.env.XDG_DATA_HOME, "opencode")
+  return path.join(homedir(), ".local", "share", "opencode")
+}
+
+function candidateDataDirs() {
+  return [
+    defaultDataDir(),
+    path.join(homedir(), ".local", "share", "opencode"),
+    process.platform === "darwin" ? path.join(homedir(), "Library", "Application Support", "opencode") : undefined,
+    process.platform === "win32" ? path.join(process.env.APPDATA ?? path.join(homedir(), "AppData", "Roaming"), "opencode") : undefined,
+  ].filter((item, index, list): item is string => Boolean(item) && list.indexOf(item) === index)
+}
+
+function candidateDatabasePaths(names: string[]) {
+  return candidateDataDirs().flatMap((dir) => names.map((name) => path.join(dir, name)))
+}
+
+function requireExistingDatabase(names: string[]) {
+  return candidateDatabasePaths(names).find(existsSync) ?? candidateDatabasePaths(names)[0]!
+}
+
+function extractFromValue(value: unknown): string {
+  if (typeof value === "string") return value
+  if (typeof value === "number" || typeof value === "boolean") return String(value)
+  if (!value) return ""
+  if (Array.isArray(value)) return value.map(extractFromValue).filter(Boolean).join("\n")
+  if (typeof value !== "object") return ""
+  return Object.entries(value)
+    .filter(([key]) => !["id", "sessionID", "messageID", "time", "timeCreated", "timeUpdated", "tokens", "cost"].includes(key))
+    .map(([, item]) => extractFromValue(item))
+    .filter(Boolean)
+    .join("\n")
+}
+
+function truncate(value: string, length: number) {
+  if (value.length <= length) return value
+  return `${value.slice(0, length - 3)}...`
+}

package/telescope.tsx

@@ -0,0 +1,256 @@
+/** @jsxImportSource @opentui/solid */
+import type { TuiPluginApi } from "@opencode-ai/plugin/tui"
+import type { InputRenderable, ParsedKey, ScrollBoxRenderable } from "@opentui/core"
+import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
+import { For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
+import { ConversationPreview, PreviewHeader } from "./components/preview.tsx"
+import { EmptyState, ResultRow } from "./components/result-list.tsx"
+import {
+  loadConversationWindow,
+  recentSessionMessages,
+  resolveDatabasePath,
+  searchSessionMessages,
+  type ConversationPreviewPart,
+  type SearchResult,
+} from "./search.ts"
+import { syntaxStyle } from "./ui/format.ts"
+import { isKey, prevent } from "./ui/keyboard.ts"
+import { jumpToRenderedTarget, messageTargetID, previewScrollAmount, scrollPreviewToTarget } from "./ui/render-target.ts"
+
+export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) => {
+  const dimensions = useTerminalDimensions()
+  const [query, setQuery] = createSignal("")
+  const [results, setResults] = createSignal<SearchResult[]>([])
+  const [previewParts, setPreviewParts] = createSignal<ConversationPreviewPart[]>([])
+  const [selected, setSelected] = createSignal(0)
+  const [busy, setBusy] = createSignal(false)
+  const [error, setError] = createSignal("")
+  let input: InputRenderable | undefined
+  let resultScroll: ScrollBoxRenderable | undefined
+  let previewScroll: ScrollBoxRenderable | undefined
+
+  const theme = createMemo(() => props.api.theme.current)
+  const syntax = createMemo(() => syntaxStyle(theme()))
+  const selectedResult = createMemo(() => results()[selected()])
+  const popupWidth = createMemo(() => Math.max(72, Math.min(dimensions().width - 2, Math.floor(dimensions().width * 0.92))))
+  const leftWidth = createMemo(() => Math.max(36, Math.min(64, Math.floor(popupWidth() * 0.36))))
+  const height = createMemo(() => Math.max(18, dimensions().height - 8))
+  const verticalOffset = createMemo(() => Math.floor(dimensions().height / 4 - height() / 2) - 2)
+  const dbPath = resolveDatabasePath()
+  const directory = props.api.state.path.directory
+
+  createEffect(() => {
+    setTimeout(() => input?.focus(), 1)
+  })
+
+  createEffect(() => {
+    const q = query().trim()
+    setError("")
+    if (!q) {
+      try {
+        setResults(recentSessionMessages({ limit: 40, dbPath, directory }))
+      } catch (err) {
+        setResults([])
+        setError(err instanceof Error ? err.message : String(err))
+      }
+      setSelected(0)
+      return
+    }
+    setBusy(true)
+    const timer = setTimeout(() => {
+      try {
+        setResults(searchSessionMessages(q, { limit: 120, dbPath, directory }))
+        setSelected(0)
+      } catch (err) {
+        setResults([])
+        setError(err instanceof Error ? err.message : String(err))
+      } finally {
+        setBusy(false)
+      }
+    }, 180)
+    onCleanup(() => clearTimeout(timer))
+  })
+
+  const move = (delta: number) => {
+    if (results().length === 0) return
+    setSelected((index) => (index + delta + results().length) % results().length)
+  }
+
+  createEffect(() => {
+    const index = selected()
+    const row = resultScroll?.getChildren()[index]
+    if (!resultScroll || !row) return
+    const y = row.y - resultScroll.y
+    if (y < 0) {
+      resultScroll.scrollBy(y)
+      return
+    }
+    if (y + row.height >= resultScroll.height) {
+      resultScroll.scrollBy(y + row.height - resultScroll.height + 1)
+    }
+  })
+
+  createEffect(() => {
+    const item = selectedResult()
+    if (!item) {
+      setPreviewParts([])
+      return
+    }
+    try {
+      setPreviewParts(loadConversationWindow(item, { before: 12, after: 24, dbPath }))
+    } catch {
+      setPreviewParts([])
+    }
+  })
+
+  createEffect(() => {
+    const item = selectedResult()
+    previewParts()
+    if (!item) return
+    setTimeout(() => scrollPreviewToTarget(previewScroll, messageTargetID(item)), 1)
+  })
+
+  const open = () => {
+    const item = selectedResult()
+    if (!item) return
+    const targetID = messageTargetID(item)
+    props.api.ui.dialog.clear()
+    props.api.route.navigate("session", { sessionID: item.sessionID })
+    jumpToRenderedTarget(props.api.renderer.root, targetID)
+  }
+
+  const scrollPreview = (direction: 1 | -1, evt: ParsedKey) => {
+    prevent(evt)
+    previewScroll?.scrollBy(direction * previewScrollAmount(previewScroll))
+  }
+
+  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")) {
+      prevent(evt)
+      open()
+      return
+    }
+    if (evt.ctrl && isKey(evt, "d")) {
+      scrollPreview(1, evt)
+      return
+    }
+    if (evt.ctrl && isKey(evt, "u")) {
+      scrollPreview(-1, evt)
+      return
+    }
+  })
+
+  return (
+    <box width="100%" alignItems="center">
+      <box
+        flexDirection="column"
+        width={popupWidth()}
+        height={height()}
+        marginTop={verticalOffset()}
+        backgroundColor={theme().backgroundPanel}
+      >
+        <box flexDirection="row" flexGrow={1} minHeight={0}>
+          <box width={1} height="100%" backgroundColor={theme().accent} flexShrink={0} />
+          <box flexDirection="column" flexGrow={1} minHeight={0}>
+            <box paddingLeft={4} paddingRight={4} paddingTop={1} paddingBottom={1} gap={1} flexShrink={0}>
+              <box flexDirection="row" justifyContent="space-between" flexShrink={0}>
+                <text fg={theme().text}><span style={{ bold: true }}>Search conversations</span></text>
+                <text fg={theme().textMuted} onMouseUp={props.onClose}>esc</text>
+              </box>
+              <box flexDirection="row" gap={1} flexShrink={0}>
+                <input
+                  ref={(element: InputRenderable) => (input = element)}
+                  placeholder="grep conversations..."
+                  placeholderColor={theme().textMuted}
+                  cursorColor={theme().primary}
+                  focusedTextColor={theme().text}
+                  focusedBackgroundColor={theme().backgroundPanel}
+                  onInput={(value) => setQuery(value)}
+                  onKeyDown={(evt: ParsedKey) => {
+                    if (evt.ctrl && isKey(evt, "d")) {
+                      scrollPreview(1, evt)
+                      return
+                    }
+                    if (evt.ctrl && isKey(evt, "u")) scrollPreview(-1, evt)
+                  }}
+                  flexGrow={1}
+                />
+                <text fg={theme().textMuted}>{busy() ? "searching" : query().trim() ? `${results().length} hits` : `${results().length} recent`}</text>
+              </box>
+            </box>
+
+            <box flexDirection="row" flexGrow={1} minHeight={0}>
+              <box width={leftWidth()} flexDirection="column" minHeight={0} backgroundColor={theme().backgroundPanel}>
+                <scrollbox ref={(element: ScrollBoxRenderable) => (resultScroll = element)} flexGrow={1} minHeight={0} verticalScrollbarOptions={{ visible: false }}>
+                  <Show
+                    when={!error()}
+                    fallback={
+                      <box flexDirection="column" paddingLeft={1} paddingTop={1}>
+                        <text fg={theme().error}>database search failed</text>
+                        <text fg={theme().textMuted}>{error()}</text>
+                      </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>
+                  </Show>
+                </scrollbox>
+              </box>
+
+              <box width={1} backgroundColor={theme().backgroundElement} flexShrink={0} />
+
+              <box flexGrow={1} flexDirection="column" minHeight={0} backgroundColor={theme().background}>
+                <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()} />}
+                  </Show>
+                </scrollbox>
+              </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}>
+                <text fg={theme().textMuted}>enter open</text>
+                <text fg={theme().textMuted}>esc close</text>
+              </box>
+            </box>
+          </box>
+        </box>
+      </box>
+    </box>
+  )
+}