@bojackduy/opencode-telescope 0.1.2 → 0.1.3

package/README.md

@@ -6,11 +6,11 @@ This plugin searches OpenCode's local SQLite session database directly in read-o
 
 ## 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"],
 }
 ```
 

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,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@bojackduy/opencode-telescope",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Telescope-style session conversation search for OpenCode TUI",
   "type": "module",
   "license": "MIT",

package/search.ts

@@ -67,20 +67,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,9 +94,9 @@ 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
   }
 }
 

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,
@@ -25,6 +25,8 @@ 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)
   let input: InputRenderable | undefined
   let resultScroll: ScrollBoxRenderable | undefined
   let previewScroll: ScrollBoxRenderable | undefined
@@ -36,36 +38,39 @@ 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("")
     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(() => {
+        try {
+          setResults(recentSessionMessages({ limit: 40, dbPath: dbPath(), directory }))
+        } catch (err) {
+          setResults([])
+          setError(err instanceof Error ? err.message : String(err))
+        }
+        setLoading(false)
+        setSelected(0)
+      }, 1)
+      onCleanup(() => clearTimeout(timer))
       return
     }
+    setLoading(true)
     setBusy(true)
     const timer = setTimeout(() => {
       try {
-        setResults(searchSessionMessages(q, { limit: 120, dbPath, directory }))
+        setResults(searchSessionMessages(q, { limit: 120, dbPath: dbPath(), directory }))
         setSelected(0)
       } catch (err) {
         setResults([])
         setError(err instanceof Error ? err.message : String(err))
       } finally {
         setBusy(false)
+        setLoading(false)
       }
     }, 180)
     onCleanup(() => clearTimeout(timer))
@@ -97,7 +102,7 @@ export const Telescope = (props: { api: TuiPluginApi; onClose: () => void }) =>
       return
     }
     try {
-      setPreviewParts(loadConversationWindow(item, { before: 12, after: 24, dbPath }))
+      setPreviewParts(loadConversationWindow(item, { before: 12, after: 24, dbPath: dbPath() }))
     } catch {
       setPreviewParts([])
     }
@@ -124,35 +129,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 +212,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 +241,30 @@ 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>
+                    </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 +282,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>