@bojackduy/opencode-telescope 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+# opencode-telescope
+
+Telescope-style session conversation search for the OpenCode TUI.
+
+This plugin searches OpenCode's local SQLite session database directly in read-only mode, then opens the selected session with the existing TUI route.
+
+## Installation
+
+Add the plugin to your `opencode.json` (or `tui.json`):
+
+```jsonc
+{
+  "plugin": ["@bojackduy/opencode-telescope"]
+}
+```
+
+> To use it from a local clone:
+>
+> ```jsonc
+> "plugin": ["./path/to/opencode-telescope"]
+> ```
+
+## Usage
+
+Run `/telescope` or shortcut `<lead>+f` in OpenCode to search and jump to any session.

package/components/preview.tsx

@@ -0,0 +1,256 @@
+/** @jsxImportSource @opentui/solid */
+import type { TuiThemeCurrent } from "@opencode-ai/plugin/tui"
+import type { SyntaxStyle } from "@opentui/core"
+import { For, Show, createMemo } from "solid-js"
+import type { ConversationPreviewPart, SearchResult } from "../search.ts"
+import {
+  compactTime,
+  markdownWithMatch,
+  reasoningSummary,
+  roleColor,
+  roleLabel,
+  toolIcon,
+  toolInputSummary,
+  toolLabel,
+  truncate,
+} from "../ui/format.ts"
+
+export const PreviewHeader = (props: { item: SearchResult | undefined; query: string; theme: TuiThemeCurrent }) => (
+  <box
+    paddingLeft={1}
+    paddingRight={1}
+    height={props.query.trim() ? 3 : 2}
+    flexDirection="column"
+    backgroundColor={props.theme.backgroundPanel}
+    flexShrink={0}
+  >
+    <Show when={props.item} fallback={<text fg={props.theme.textMuted}>Select a hit to preview the exact matched message.</text>}>
+      {(item) => (
+        <>
+          <box width="100%" flexShrink={0}>
+            <text fg={props.theme.text} wrapMode="none" overflow="hidden">
+              <span style={{ fg: roleColor(item().role, props.theme), bold: true }}>{roleLabel(item().role)}</span>
+              <span style={{ fg: props.theme.textMuted }}> · {compactTime(item().timeCreated)}</span>
+              <span style={{ fg: props.theme.textMuted }}> · </span>
+              <span>{item().sessionTitle}</span>
+            </text>
+          </box>
+          <Show when={props.query.trim()}>
+            <box width="100%" flexShrink={0}>
+              <text fg={props.theme.textMuted} wrapMode="none" overflow="hidden">match: {props.query.trim()}</text>
+            </box>
+          </Show>
+        </>
+      )}
+    </Show>
+  </box>
+)
+
+export const ConversationPreview = (props: { item: SearchResult; parts: ConversationPreviewPart[]; syntax: SyntaxStyle; theme: TuiThemeCurrent }) => (
+  <box flexDirection="column" paddingTop={1}>
+    <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} />
+        )}
+      </For>
+    </Show>
+  </box>
+)
+
+const PreviewConversationPart = (props: { part: ConversationPreviewPart; item: SearchResult; syntax: SyntaxStyle; theme: TuiThemeCurrent }) => {
+  if (props.part.type === "tool") return <PreviewToolPart part={props.part} theme={props.theme} />
+  if (props.part.type === "reasoning") return <PreviewReasoningPart part={props.part} syntax={props.syntax} theme={props.theme} />
+  if (props.part.role === "assistant") return <PreviewAssistantPart part={props.part} item={props.item} syntax={props.syntax} theme={props.theme} />
+  return <PreviewUserPart part={props.part} item={props.item} theme={props.theme} />
+}
+
+const PreviewUserPart = (props: { part: ConversationPreviewPart; item: SearchResult; theme: TuiThemeCurrent }) => (
+  <box
+    id={props.part.messageID}
+    border={["left"]}
+    borderColor={props.part.target ? props.theme.warning : props.theme.primary}
+    customBorderChars={splitBorderChars}
+    marginTop={1}
+  >
+    <box paddingTop={1} paddingBottom={1} paddingLeft={2} backgroundColor={props.theme.backgroundPanel} flexDirection="column">
+      <text fg={props.theme.textMuted}>you · {compactTime(props.part.timeCreated)}</text>
+      <HighlightedConversationText part={props.part} item={props.item} theme={props.theme} />
+    </box>
+  </box>
+)
+
+const PreviewAssistantPart = (props: { part: ConversationPreviewPart; item: SearchResult; syntax: SyntaxStyle; theme: TuiThemeCurrent }) => (
+  <box id={`text-${props.part.messageID}-${props.part.id}`} paddingLeft={3} marginTop={1} flexShrink={0} flexDirection="column">
+    <Show when={props.part.target}>
+      <TargetMarker part={props.part} item={props.item} role="assistant" time={props.part.timeCreated} theme={props.theme} />
+    </Show>
+    <markdown
+      syntaxStyle={props.syntax}
+      streaming={true}
+      internalBlockMode="top-level"
+      content={conversationMarkdown(props.part, props.item)}
+      tableOptions={{ style: "grid" }}
+      fg={props.theme.markdownText}
+      bg={props.theme.background}
+    />
+  </box>
+)
+
+const PreviewReasoningPart = (props: { part: ConversationPreviewPart; syntax: SyntaxStyle; theme: TuiThemeCurrent }) => {
+  const summary = createMemo(() => reasoningSummary(props.part.text.replace("[REDACTED]", "").trim()))
+  return (
+    <Show when={summary().title || summary().body}>
+      <box id={`text-${props.part.messageID}-${props.part.id}`} paddingLeft={3} marginTop={1} flexDirection="column" flexShrink={0}>
+        <Show when={props.part.target}>
+          <TargetMarker part={props.part} role="thought" time={props.part.timeCreated} theme={props.theme} />
+        </Show>
+        <text fg={props.theme.warning} wrapMode="none">
+          <span>Thought</span>
+          <Show when={summary().title}>
+            <span>: {summary().title}</span>
+          </Show>
+        </text>
+        <Show when={summary().body}>
+          <box paddingLeft={2} marginTop={1}>
+            <markdown
+              syntaxStyle={props.syntax}
+              streaming={true}
+              internalBlockMode="top-level"
+              content={summary().body}
+              tableOptions={{ style: "grid" }}
+              fg={props.theme.textMuted}
+              bg={props.theme.background}
+            />
+          </box>
+        </Show>
+      </box>
+    </Show>
+  )
+}
+
+const PreviewToolPart = (props: { part: ConversationPreviewPart; theme: TuiThemeCurrent }) => {
+  const status = createMemo(() => props.part.state?.status ?? "pending")
+  const failed = createMemo(() => status() === "error")
+  const color = createMemo(() => {
+    if (failed()) return props.theme.error
+    if (status() === "completed") return props.theme.textMuted
+    return props.theme.text
+  })
+  return (
+    <box id={`tool-inline-${props.part.messageID}-${props.part.id}`} paddingLeft={3} marginTop={1} flexDirection="column" flexShrink={0}>
+      <Show when={props.part.target}>
+        <TargetMarker part={props.part} role="tool" time={props.part.timeCreated} theme={props.theme} />
+      </Show>
+      <text fg={color()} wrapMode="none" overflow="hidden">
+        <span style={{ fg: failed() ? props.theme.error : props.theme.textMuted }}>{toolIcon(props.part.tool)} </span>
+        <span>{toolLabel(props.part.tool)}</span>
+        <span style={{ fg: props.theme.textMuted }}> {toolInputSummary(props.part.state?.input)}</span>
+        <span style={{ fg: props.theme.textMuted }}> · {status()}</span>
+      </text>
+      <Show when={props.part.state?.error}>
+        {(error) => <text fg={props.theme.error}>{error()}</text>}
+      </Show>
+      <Show when={failed() ? props.part.state?.output : undefined}>
+        {(output) => <text fg={props.theme.textMuted}>{truncate(output().trim(), 300)}</text>}
+      </Show>
+    </box>
+  )
+}
+
+const TargetMarker = (props: { part: ConversationPreviewPart; item?: SearchResult; role: string; time: number; theme: TuiThemeCurrent }) => (
+  <box flexDirection="column" flexShrink={0}>
+    <text fg={props.theme.warning} wrapMode="none" overflow="hidden">
+      <span>match</span>
+      <span style={{ fg: props.theme.textMuted }}> · {props.role} · {compactTime(props.time)}</span>
+    </text>
+    <Show when={props.item && matchExcerpt(props.part.text, props.item.match)}>
+      {(excerpt) => (
+        <text fg={props.theme.textMuted} wrapMode="none" overflow="hidden">
+          <span>{excerpt().before}</span>
+          <span style={{ fg: props.theme.warning, bold: true }}>{excerpt().match}</span>
+          <span>{excerpt().after}</span>
+        </text>
+      )}
+    </Show>
+  </box>
+)
+
+const HighlightedConversationText = (props: { part: ConversationPreviewPart; item: SearchResult; theme: TuiThemeCurrent }) => {
+  const match = createMemo(() => conversationMatch(props.part, props.item))
+  return (
+    <Show when={match()} fallback={<text fg={props.theme.text}>{props.part.text}</text>}>
+      {(hit) => (
+        <text fg={props.theme.text}>
+          <span>{props.part.text.slice(0, hit().start)}</span>
+          <span style={{ fg: props.theme.warning, bold: true }}>{props.part.text.slice(hit().start, hit().end)}</span>
+          <span>{props.part.text.slice(hit().end)}</span>
+        </text>
+      )}
+    </Show>
+  )
+}
+
+const ConversationFallback = (props: { item: SearchResult; syntax: SyntaxStyle; theme: TuiThemeCurrent }) => (
+  <Show
+    when={props.item.role === "assistant"}
+    fallback={<PreviewUserPart part={searchResultPreviewPart(props.item)} item={props.item} theme={props.theme} />}
+  >
+    <PreviewAssistantPart part={searchResultPreviewPart(props.item)} item={props.item} syntax={props.syntax} theme={props.theme} />
+  </Show>
+)
+
+const splitBorderChars = {
+  topLeft: "",
+  bottomLeft: "",
+  vertical: "┃",
+  topRight: "",
+  bottomRight: "",
+  horizontal: " ",
+  bottomT: "",
+  topT: "",
+  cross: "",
+  leftT: "",
+  rightT: "",
+}
+
+function searchResultPreviewPart(item: SearchResult): ConversationPreviewPart {
+  return {
+    id: item.id,
+    messageID: item.messageID,
+    sessionID: item.sessionID,
+    role: item.role,
+    type: "text",
+    timeCreated: item.timeCreated,
+    text: item.text,
+    target: true,
+  }
+}
+
+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 }
+}
+
+function conversationMarkdown(part: ConversationPreviewPart, item: SearchResult) {
+  const hit = conversationMatch(part, item)
+  if (!hit || !item.previewHighlight) return part.text
+  return markdownWithMatch(part.text.slice(0, hit.start), part.text.slice(hit.start, hit.end), part.text.slice(hit.end), true)
+}
+
+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)
+  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 ? "..." : ""}`,
+  }
+}

package/components/result-list.tsx

@@ -0,0 +1,82 @@
+/** @jsxImportSource @opentui/solid */
+import type { TuiThemeCurrent } from "@opencode-ai/plugin/tui"
+import { Show } from "solid-js"
+import type { SearchResult } from "../search.ts"
+import { compactTime, roleColor, roleLabel, truncate } from "../ui/format.ts"
+
+export const ResultRow = (props: {
+  item: SearchResult
+  active: boolean
+  width: number
+  query: string
+  theme: TuiThemeCurrent
+  onMouseOver: () => void
+  onOpen: () => void
+}) => (
+  <box
+    flexDirection="column"
+    paddingLeft={2}
+    paddingRight={2}
+    paddingTop={0}
+    paddingBottom={1}
+    backgroundColor={props.active ? props.theme.backgroundElement : undefined}
+    onMouseOver={props.onMouseOver}
+    onMouseUp={props.onOpen}
+  >
+    <text wrapMode="none" overflow="hidden">
+      <span style={{ fg: props.active ? props.theme.accent : props.theme.textMuted }}>
+        {props.active ? "› " : "  "}
+      </span>
+      <span style={{ fg: props.active ? props.theme.accent : props.theme.text, bold: true }}>
+        {truncate(props.item.sessionTitle, sessionTitleWidth(props.width))}
+      </span>
+      <Show when={props.width >= 48}>
+        <span style={{ fg: props.theme.textMuted }}>  </span>
+        <span style={{ fg: roleColor(props.item.role, props.theme), bold: true }}>{roleLabel(props.item.role)}</span>
+        <span style={{ fg: props.theme.textMuted }}> · {compactTime(props.item.timeCreated)}</span>
+      </Show>
+    </text>
+    <Show when={props.width < 48}>
+      <text wrapMode="none" overflow="hidden">
+        <span style={{ fg: roleColor(props.item.role, props.theme), bold: true }}>{roleLabel(props.item.role)}</span>
+        <span style={{ fg: props.theme.textMuted }}> · {compactTime(props.item.timeCreated)}</span>
+      </text>
+    </Show>
+    <HighlightedText
+      before={props.item.before}
+      match={props.item.match}
+      after={props.item.after}
+      query={props.query}
+      active={props.active}
+      theme={props.theme}
+    />
+  </box>
+)
+
+export const EmptyState = (props: { query: string; theme: TuiThemeCurrent }) => (
+  <box paddingLeft={1} paddingTop={1}>
+    <text fg={props.theme.textMuted}>{props.query.trim() ? "No matching user/assistant conversation text." : "No recent conversation text found."}</text>
+  </box>
+)
+
+const HighlightedText = (props: {
+  before: string
+  match: string
+  after: string
+  query: string
+  active: boolean
+  theme: TuiThemeCurrent
+}) => (
+  <text wrapMode="none" overflow="hidden">
+    <span style={{ fg: props.theme.textMuted }}>  </span>
+    <span style={{ fg: props.active ? props.theme.text : props.theme.textMuted }}>{props.before}</span>
+    <span style={{ fg: props.theme.warning, bold: true }}>{props.match || props.query}</span>
+    <span style={{ fg: props.active ? props.theme.text : props.theme.textMuted }}>{props.after}</span>
+  </text>
+)
+
+function sessionTitleWidth(width: number) {
+  if (width >= 54) return 28
+  if (width >= 48) return 22
+  return Math.max(18, width - 6)
+}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "name": "@bojackduy/opencode-telescope",
+  "version": "0.1.2",
+  "description": "Telescope-style session conversation search for OpenCode TUI",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Duyyy123/opencode-telescope.git"
+  },
+  "homepage": "https://github.com/Duyyy123/opencode-telescope#readme",
+  "bugs": {
+    "url": "https://github.com/Duyyy123/opencode-telescope/issues"
+  },
+  "keywords": [
+    "opencode",
+    "opencode-plugin",
+    "tui",
+    "telescope",
+    "search"
+  ],
+  "scripts": {
+    "typecheck": "bun tsc -p tsconfig.json --noEmit",
+    "test": "bun test",
+    "prepack": "bun run typecheck && bun test",
+    "release:patch": "bun run typecheck && bun test && npm version patch -m \"chore: release %s\" && git push && git push origin $(git describe --tags --abbrev=0)",
+    "release:minor": "bun run typecheck && bun test && npm version minor -m \"chore: release %s\" && git push && git push origin $(git describe --tags --abbrev=0)",
+    "release:major": "bun run typecheck && bun test && npm version major -m \"chore: release %s\" && git push && git push origin $(git describe --tags --abbrev=0)"
+  },
+  "files": [
+    "README.md",
+    "LICENSE",
+    "tui.tsx",
+    "telescope.tsx",
+    "search.ts",
+    "components",
+    "ui",
+    "tsconfig.json"
+  ],
+  "exports": {
+    ".": {
+      "import": "./tui.tsx"
+    },
+    "./tui": {
+      "import": "./tui.tsx"
+    }
+  },
+  "peerDependencies": {
+    "@opencode-ai/plugin": "*",
+    "@opentui/core": "*",
+    "@opentui/solid": "*",
+    "solid-js": "*"
+  },
+  "devDependencies": {
+    "@opencode-ai/plugin": "^1.14.28",
+    "@opentui/core": "^0.1.105",
+    "@opentui/solid": "^0.1.105",
+    "@types/bun": "^1.3.13",
+    "solid-js": "^1.9.12",
+    "typescript": "^5.9.3"
+  }
+}