opencode-vim 0.0.22 → 0.0.23

package/src/session.tsx

@@ -0,0 +1,291 @@
+/** @jsxImportSource @opentui/solid */
+import type { Context } from "@opencode/plugin/tui/context"
+import { type KeyEvent, type TextareaRenderable } from "@opentui/core"
+import { useTerminalDimensions } from "@opentui/solid"
+import { createEffect, createSignal, onCleanup, onMount, untrack } from "solid-js"
+import type { PromptContext } from "./modules/vim/actions"
+import type { VimConfig } from "./modules/vim/config"
+import { keyNotation } from "./modules/vim/keys"
+import { displayWidth } from "./modules/vim/map"
+import { createVimState } from "./modules/vim/state"
+import { createVimeeAdapter, YANK_FLASH_MS } from "./modules/vim/vimee"
+import { createTranscriptSelection } from "./transcript"
+import type { TranscriptItem } from "./transcript-items"
+import type { VimClipboard } from "./clipboard"
+
+export const SESSION_MODE = "opencode-vim.session"
+
+export function createSessionMode(context: Context, config: VimConfig, clipboard: VimClipboard) {
+  const [active, setActive] = createSignal(false)
+  const [reading, setReading] = createSignal<TranscriptItem>()
+  const [notice, setNotice] = createSignal("")
+  const positions = new Map<string, number>()
+  let sessionID = ""
+  let selectedID: string | undefined
+  let prompt: Context["renderer"]["currentFocusedEditor"] = null
+  let transcript: ReturnType<typeof createTranscriptSelection> | undefined
+  let popMode: (() => void) | undefined
+  let prefix = ""
+  let count = ""
+  let disposed = false
+  let noticeTimer: ReturnType<typeof setTimeout> | undefined
+  let yankTimer: ReturnType<typeof setTimeout> | undefined
+  let yankID: string | undefined
+
+  function selected() {
+    return transcript?.get(selectedID)
+  }
+
+  function clearYankFlash() {
+    if (yankTimer) clearTimeout(yankTimer)
+    yankTimer = undefined
+    if (!yankID) return
+    yankID = undefined
+    context.renderer.requestRender()
+  }
+
+  function close() {
+    if (!active()) return
+    clearYankFlash()
+    const wasReading = Boolean(reading())
+    if (wasReading) context.ui.dialog.clear()
+    setActive(false)
+    context.renderer.removePostProcessFn(draw)
+    popMode?.()
+    popMode = undefined
+    transcript = undefined
+    const savedPrompt = prompt
+    const savedSessionID = sessionID
+    function restorePrompt() {
+      const route = context.ui.router.current()
+      if (!active() && context.keymap.mode.current() === "base" && route.type === "session"
+        && route.sessionID === savedSessionID && savedPrompt && !savedPrompt.isDestroyed) savedPrompt.focus()
+    }
+    restorePrompt()
+    // Restore after the dialog's deferred refocus, or it steals focus back.
+    if (wasReading) setTimeout(restorePrompt, 1)
+    prompt = null
+    context.renderer.requestRender()
+  }
+
+  function enter() {
+    const route = context.ui.router.current()
+    if (route.type !== "session") return false
+    sessionID = route.sessionID
+    prompt = context.renderer.currentFocusedEditor
+    prefix = count = ""
+    positions.clear()
+    setNotice("")
+    popMode = context.keymap.mode.push(SESSION_MODE)
+    transcript = createTranscriptSelection(context, sessionID, (id) => {
+      selectedID = id
+    })
+    setActive(true)
+    prompt?.blur()
+    transcript.focus()
+    transcript.latest()
+    context.renderer.addPostProcessFn(draw)
+    context.renderer.requestRender()
+    return true
+  }
+
+  const draw: Parameters<Context["renderer"]["addPostProcessFn"]>[0] = (buffer) => {
+    if (active() && !reading() && context.keymap.mode.current() === SESSION_MODE) transcript?.draw(buffer, yankID)
+  }
+
+  async function copy(text: string) {
+    const copied = await clipboard.write(text)
+    if (disposed) return
+    if (noticeTimer) clearTimeout(noticeTimer)
+    setNotice(copied ? "Copied" : "Yanked · clipboard unavailable")
+    noticeTimer = setTimeout(() => setNotice(""), 1500)
+  }
+
+  function openMessage(message: TranscriptItem) {
+    transcript?.focus()
+    setReading(message)
+    context.ui.dialog.show(() => (
+      <MessageReader context={context} config={config} message={message} offset={positions.get(message.id) ?? 0}
+        copy={copy} notice={notice} remember={(offset) => positions.set(message.id, offset)}
+        back={() => context.ui.dialog.clear()} close={close} />
+    ), () => {
+      setReading(undefined)
+      setNotice("")
+    })
+  }
+
+  const onKey = (event: KeyEvent) => {
+    if (!active() || reading()) return
+    const key = readerKey(context, event, config.sessionKey)
+    if (!key) return
+    event.preventDefault()
+    event.stopPropagation()
+    clearYankFlash()
+    setNotice("")
+    if (key === config.sessionKey || key === "<Esc>" || key === "<C-[>") { close(); return }
+    if (/^[0-9]$/.test(key) && (count || key !== "0")) { count = (count + key).slice(0, 6); return }
+    const amount = Number(count) || 1
+    count = ""
+    const previous = prefix
+    prefix = ""
+    let command = pageCommand(key)
+    if (key === "j" || key === "<Down>") { transcript?.move("next", amount); return }
+    else if (key === "k" || key === "<Up>") { transcript?.move("previous", amount); return }
+    else if (key === "G") { transcript?.latest(); return }
+    else if (key === "g" && previous === "g") command = "session.first"
+    else if (key === "y" && previous === "y") {
+      const message = selected()
+      if (message) {
+        yankID = message.id
+        yankTimer = setTimeout(clearYankFlash, YANK_FLASH_MS)
+        context.renderer.requestRender()
+        void copy(message.text)
+      }
+    } else if (key === "g" || key === "y") prefix = key
+    else if (key === "<CR>") {
+      transcript?.sync()
+      if (transcript?.toggle()) return
+      const message = selected()
+      if (message) openMessage(message)
+    }
+    if (command) {
+      transcript?.followViewport()
+      for (let index = 0; index < amount; index++) context.keymap.dispatch(command)
+    }
+  }
+
+  createEffect(() => {
+    const route = context.ui.router.current()
+    if (active() && (route.type !== "session" || route.sessionID !== sessionID)) untrack(close)
+  })
+  onMount(() => context.renderer.keyInput.prependListener("keypress", onKey))
+  onCleanup(() => {
+    disposed = true
+    close()
+    if (noticeTimer) clearTimeout(noticeTimer)
+    context.renderer.keyInput.off("keypress", onKey)
+  })
+
+  return {
+    active, enter, close,
+    Status() {
+      return <text fg={context.theme.text.feedback.info.base}>
+        {notice() || `SESSION · Enter open · yy copy · ${config.sessionKey} prompt`}
+      </text>
+    },
+  }
+}
+
+function MessageReader(props: {
+  context: Context
+  config: VimConfig
+  message: TranscriptItem
+  offset: number
+  copy: (text: string) => void
+  notice: () => string
+  remember: (offset: number) => void
+  back: () => void
+  close: () => void
+}) {
+  const context = props.context
+  context.ui.dialog.set({ size: "large", centered: true })
+  const dimensions = useTerminalDimensions()
+  const theme = () => context.theme.surface("dialog")
+  const background = () => theme().background.raised.high
+  const state = createVimState("normal")
+  const [line, setLine] = createSignal(1)
+  let input!: TextareaRenderable
+  const adapter = createVimeeAdapter(state, props.config, () => {}, { readOnly: true, onYank: props.copy })
+  const editorContext: PromptContext = {
+    api: {
+      renderer: { get currentFocusedRenderable() { return input } },
+      keymap: { dispatchCommand: () => ({ ok: false }) },
+      theme: { get current() { return {
+        warning: theme().text.feedback.warning.base,
+        info: theme().text.feedback.info.base,
+        background: background(),
+      } } },
+    },
+    prompt: () => ({
+      get current() { return { input: input.plainText, mode: "normal", parts: [] } },
+      set() {}, submit() {}, blur() {},
+    }),
+    requestRender: () => context.renderer.requestRender(),
+  }
+  const onKey = (event: KeyEvent) => {
+    if (context.renderer.currentFocusedEditor !== input) return
+    const key = readerKey(context, event, props.config.sessionKey, "modal")
+    if (!key) return
+    event.preventDefault()
+    event.stopPropagation()
+    if (key === props.config.sessionKey && state.mode() === "normal" && !adapter.isPending()) { props.close(); return }
+    // The host's Ctrl+C clears the editor unless we intercept it.
+    if (key === "<C-c>") { props.back(); return }
+    if ((key === "<Esc>" || key === "<C-[>") && state.mode() === "normal" && !adapter.isPending()) {
+      props.back()
+      return
+    }
+    if (pageCommand(key)) {
+      const down = key === "<C-d>" || key === "<C-f>" || key === "<PageDown>"
+      const half = key === "<C-d>" || key === "<C-u>"
+      const rows = Math.max(1, Math.floor(input.height / (half ? 2 : 1)))
+      for (let row = 0; row < rows; row++) adapter.handle({ ...event, ctrl: false } as KeyEvent, down ? "j" : "k", editorContext)
+    } else adapter.handle(event, key, editorContext)
+    setLine(input.logicalCursor.row + 1)
+  }
+  onMount(() => {
+    input.cursorOffset = Math.min(props.offset, displayWidth(input.plainText))
+    adapter.attach(editorContext)
+    setLine(input.logicalCursor.row + 1)
+    input.focus()
+    context.renderer.keyInput.prependListener("keypress", onKey)
+  })
+  onCleanup(() => {
+    props.remember(input.cursorOffset)
+    context.renderer.keyInput.off("keypress", onKey)
+    adapter.cleanup()
+  })
+
+  function modeLabel() {
+    if (state.mode() === "visual") return "VISUAL"
+    if (state.mode() === "visual-line") return "VISUAL LINE"
+    return "MESSAGE"
+  }
+  return (
+    <box id="vim-message-reader" gap={1}>
+      <box paddingLeft={2} paddingRight={2} flexDirection="row" justifyContent="space-between">
+        <text fg={theme().text.base}><b>{props.message.author}</b></text>
+        <text id="vim-message-close" fg={theme().text.muted} onMouseUp={props.back}>esc</text>
+      </box>
+      <box paddingLeft={2} paddingRight={2} paddingTop={1} paddingBottom={1} backgroundColor={background()}>
+        <textarea id="vim-session-message" ref={(value: TextareaRenderable) => {
+          input = value
+          input.handleKeyPress = () => true
+          input.handlePaste = () => {}
+        }} initialValue={props.message.text} minHeight={1} maxHeight={Math.max(1, Math.min(20, dimensions().height - 10))}
+          wrapMode="word" showCursor cursorStyle={props.config.cursorStyles.normal} textColor={theme().text.base}
+          backgroundColor={background()} focusedBackgroundColor={background()} focusedTextColor={theme().text.base} />
+      </box>
+      <box paddingLeft={2} paddingRight={2} paddingBottom={1} flexDirection="row" flexWrap="wrap" columnGap={3}>
+        <text fg={theme().text.muted}>{modeLabel()} · {line()}/{input?.lineCount ?? 1}</text>
+        <text fg={theme().text.muted}>
+          {props.notice() || (state.mode() !== "normal" ? "y copy · Esc cancel" : `v select · V lines · ${props.config.sessionKey} prompt`)}
+        </text>
+      </box>
+    </box>
+  )
+}
+
+function readerKey(context: Context, event: KeyEvent, sessionKey: string, mode = SESSION_MODE) {
+  if (event.defaultPrevented || context.keymap.mode.current() !== mode) return
+  if (context.keymap.pending().length || event.super || event.meta) return
+  const key = keyNotation(event)
+  if (key && (key === sessionKey || !event.ctrl || key === "<C-[>" || pageCommand(key) || (mode === "modal" && key === "<C-c>"))) return key
+}
+
+function pageCommand(key: string) {
+  if (key === "<C-d>") return "session.half.page.down"
+  if (key === "<C-u>") return "session.half.page.up"
+  if (key === "<C-f>" || key === "<PageDown>") return "session.page.down"
+  if (key === "<C-b>" || key === "<PageUp>") return "session.page.up"
+}

package/src/transcript-items.tsx

@@ -0,0 +1,168 @@
+// Mirrors OpenCode's routes/session/{rows,group-view,anchor-view}.tsx.
+// TSX keeps OpenTUI classes shared with the host under the runtime loader.
+import type { Context } from "@opencode/plugin/tui/context"
+import { MarkdownRenderable, TextBufferRenderable, type Renderable } from "@opentui/core"
+
+type Message = ReturnType<Context["data"]["session"]["message"]["list"]>[number]
+type GroupKind = "reasoning" | "exploration" | "activity" | "instructions"
+export type TranscriptItem = { id: string; author: string; text: string }
+export type TranscriptRange = TranscriptItem & {
+  node: Renderable
+  top: number
+  bottom: number
+  toggle?: Renderable
+  parentID?: string
+}
+
+type Part = TranscriptItem & { messageID: string; kind: string; group?: GroupKind }
+
+function parts(messages: Message[]) {
+  const result: Part[] = []
+  for (const message of messages) {
+    if (message.type === "assistant") {
+      const ordinal = { text: 0, reasoning: 0 }
+      for (const part of message.content) {
+        const partID = part.type === "tool" ? part.id : `${part.type}:${ordinal[part.type]++}`
+        let text = part.type === "tool" ? "" : part.text
+        if (part.type === "reasoning") text = text.replace("[REDACTED]", "")
+        if (part.type !== "tool" && !text.trim()) continue
+        result.push({ id: `session-part:${message.id}:${partID}`, messageID: message.id, kind: part.type,
+          author: part.type === "text" ? "Assistant" : part.type === "reasoning" ? "Reasoning" : part.name,
+          text,
+          group: part.type === "reasoning" ? "reasoning"
+            : part.type === "tool" && ["read", "glob", "grep", "webfetch", "websearch"].includes(part.name.toLowerCase())
+              ? "exploration" : undefined })
+      }
+      // Turn footers prevent groups from spanning into the next assistant turn.
+      if ((message.finish && message.finish !== "tool-calls" && message.finish !== "unknown") || message.error || message.retry) {
+        result.push({ id: `footer:${message.id}`, messageID: message.id, kind: "footer", author: "", text: "" })
+      }
+    } else {
+      result.push({ id: message.id, messageID: message.id, kind: "message", author: message.type === "user" ? "You" : message.type,
+        text: message.type === "user" ? message.text : "" })
+    }
+  }
+  return result
+}
+
+function textOf(node: Renderable): string {
+  if (!node.visible) return ""
+  if (node instanceof MarkdownRenderable) return node.content
+  if (node instanceof TextBufferRenderable) return node.plainText
+  let text = ""
+  let previous: Renderable | undefined
+  for (const child of node.getChildren()) {
+    const value = textOf(child)
+    if (!value) continue
+    if (text) text += previous?.y === child.y ? " " : "\n"
+    text += value
+    previous = child
+  }
+  return text
+}
+
+export function groupAt(node: Renderable) {
+  const header = node.getChildren()[0]
+  if (!header) return
+  const body = header.getChildren()[0]
+  let label: string
+  if (body instanceof TextBufferRenderable) {
+    if (!body.plainText.startsWith("⋯ ")) return
+    label = body.plainText.slice(2).trim()
+  } else {
+    const cells = body?.getChildren() ?? []
+    if (cells.length < 2 || !cells.slice(1).every((cell) => cell instanceof TextBufferRenderable)) return
+    label = cells.slice(1).map((cell) => (cell as TextBufferRenderable).plainText).join(" ").trim()
+  }
+  let kind: GroupKind
+  if (/^(Thought|Thinking)(?:$|[: ·…])/.test(label)) kind = "reasoning"
+  else if (/^Explor(?:ed|ing):/.test(label)) kind = "exploration"
+  else if (/^Instructions:/.test(label)) kind = "instructions"
+  else if (/^(?:\d+ (?:commands?|edits?|thoughts?|reads?|tools?|instructions?)(?:, |$))+$/.test(label)
+    || /^(?:Running|Preparing) .+…$/.test(label)) kind = "activity"
+  else return
+  return { header, kind, label, children: node.getChildren().slice(1) }
+}
+
+export function transcriptItems(rows: Renderable[], messages: Message[]) {
+  const sources = parts(messages)
+  const ranges: TranscriptRange[] = []
+  let cursor = 0
+  let lastSource = -1
+
+  function add(node: Renderable, source?: Part, parentID?: string) {
+    const text = source?.text || textOf(node)
+    if (!text.trim()) return
+    ranges.push({ id: source?.id ?? node.id, author: source?.author ?? "Tool", text, node,
+      top: node.y, bottom: node.y + node.height, parentID })
+  }
+
+  function group(node: Renderable, parentID?: string): boolean {
+    const info = groupAt(node)
+    if (!info) return false
+    const id = node.id
+    ranges.push({ id, author: info.label, text: info.label, node: info.header,
+      top: info.header.y, bottom: info.header.y + info.header.height, toggle: info.header, parentID })
+    let children = info.children
+    // Only exploration groups have EntryAnchors directly under GroupAnchor.
+    if (info.kind !== "exploration" && children.length) {
+      children = [...children[0].getChildren(), ...children.slice(1)]
+    }
+    for (const child of children) {
+      if (!child.visible || !child.height) continue
+      if (!group(child, id)) add(child, undefined, id)
+    }
+    return true
+  }
+
+  for (const row of rows) {
+    if (row.id === "session-navigation-slack") break
+    if (!row.visible || !row.height) continue
+    const anchor = row.getChildren()[0]
+    const info = anchor && groupAt(anchor)
+    // Groups can consume a message's first parts without claiming its row ID.
+    let index = sources.findIndex((part) => part.id === row.id)
+    if (index === -1) {
+      index = sources.findIndex((part, position) => position >= cursor && part.messageID === row.id)
+      if (index !== -1 && !info) {
+        const text = textOf(row).trim()
+        const match = sources.findIndex((part, position) => position >= cursor && part.messageID === row.id && part.text.trim() === text)
+        if (text && match !== -1) index = match
+      }
+    }
+    if (index !== -1) cursor = index
+    if (!info && index === -1 && sources[cursor]?.kind === "footer") {
+      lastSource = cursor++
+      continue
+    }
+    const container = anchor && !(anchor instanceof TextBufferRenderable) && !(anchor instanceof MarkdownRenderable)
+    if (index === -1 && !info && sources[cursor]?.group && container) index = cursor
+    if (anchor && info) {
+      group(anchor)
+      // Track grouped sources to detect newer cached rows that aren't mounted yet.
+      while (cursor < sources.length) {
+        const part = sources[cursor]
+        if (info.kind === "activity" ? part.kind !== "tool" && part.kind !== "reasoning" : part.group !== info.kind) break
+        lastSource = cursor++
+      }
+    } else if (index !== -1) {
+      const source = sources[index]
+      if (source.kind === "footer") {
+        lastSource = cursor++
+      } else if (source.group && container && anchor.getChildren().length) {
+        // With grouping disabled, the GroupAnchor holds individual EntryAnchors.
+        for (const child of anchor.getChildren()) {
+          add(child, sources[cursor])
+          cursor++
+        }
+        lastSource = cursor - 1
+      } else {
+        add(row, source)
+        lastSource = cursor++
+      }
+    }
+  }
+  let last = sources.length - 1
+  while (last >= 0 && (sources[last].kind === "message" || sources[last].kind === "footer") && !sources[last].text) last--
+  return { ranges, hasLatest: lastSource >= last }
+}

package/src/transcript.tsx

@@ -0,0 +1,179 @@
+// TSX ensures the plugin loader shares the host's OpenTUI classes.
+import type { Context } from "@opencode/plugin/tui/context"
+import { MouseEvent, ScrollBoxRenderable, type OptimizedBuffer, type Renderable } from "@opentui/core"
+import { groupAt, transcriptItems, type TranscriptRange } from "./transcript-items"
+
+export function createTranscriptSelection(context: Context, sessionID: string, select: (id: string | undefined) => void) {
+  let scroll: ScrollBoxRenderable | undefined
+  let requestedID: string | undefined
+  let selectedParents: string[] = []
+  let navigation: {
+    from: string | undefined
+    offset: number
+    latest?: boolean
+    loading?: { key: string; frame: number; up: boolean; height: number }
+  } | undefined
+
+  function choose(range: TranscriptRange, view: NonNullable<ReturnType<typeof inspect>>) {
+    requestedID = range.id
+    select(requestedID)
+    let delta = 0
+    if (range.bottom <= view.top) delta = range.top - view.top
+    else if (range.top >= view.bottom) {
+      delta = range.top - view.top - Math.max(0, view.bottom - view.top - (range.bottom - range.top))
+    }
+    if (delta) {
+      const slack = view.scroll.getRenderable("session-navigation-slack")?.height ?? 0
+      const maximum = Math.max(0, view.scroll.scrollHeight - slack - view.scroll.viewport.height)
+      const position = Math.max(0, Math.min(maximum, view.scroll.scrollTop + delta))
+      if (slack) context.keymap.dispatch(delta < 0 ? "session.line.up" : "session.line.down")
+      view.scroll.scrollTo(position)
+    }
+    context.renderer.requestRender()
+  }
+
+  function advance() {
+    if (!navigation) return
+    const view = inspect()
+    const ranges = view?.ranges ?? []
+    const from = navigation.from ? ranges.findIndex((range) => range.id === navigation!.from) : ranges.length
+    if (navigation.from && from === -1) { navigation = undefined; return }
+    const target = navigation.latest ? ranges.length - 1 : from + navigation.offset
+    const loading = navigation.loading
+    // OpenCode compensates for prepended rows after two animation frames.
+    if (loading && context.renderer.frameId < loading.frame) {
+      context.renderer.requestRender()
+      return
+    }
+    if (view && loading?.up && view.scroll.scrollHeight > loading.height) {
+      const maximum = Math.max(0, view.scroll.scrollHeight - view.scroll.viewport.height)
+      const compensated = Math.max(0, Math.min(maximum, view.scroll.scrollHeight - loading.height - 1))
+      if (view.scroll.scrollTop < compensated) return
+    }
+    if (view && target >= 0 && target < ranges.length && (!navigation.latest || view.hasLatest)) {
+      navigation = undefined
+      choose(ranges[target], view)
+      return
+    }
+    const up = !navigation.latest && target < 0
+    const messages = context.data.session.message.list(sessionID)
+    const key = `${messages[0]?.id}:${messages.length}:${ranges[0]?.id}:${ranges.at(-1)?.id}:${view?.scroll.scrollHeight}`
+    if (loading?.key === key) return
+    navigation.loading = { key, frame: context.renderer.frameId + 2, up, height: view?.scroll.scrollHeight ?? 0 }
+    view?.scroll.scrollTo(up ? 0 : view.scroll.scrollHeight)
+    context.keymap.dispatch(up ? "session.line.up" : "session.line.down")
+    context.renderer.requestRender()
+  }
+
+  function latest() {
+    if (!context.data.session.message.list(sessionID).length) {
+      navigation = undefined
+      requestedID = undefined
+      select(undefined)
+      return
+    }
+    navigation = { from: undefined, offset: 0, latest: true }
+    advance()
+  }
+
+  function move(direction: "next" | "previous", count: number) {
+    if (navigation && (navigation.latest || (navigation.offset < 0 && direction === "next") || (navigation.offset > 0 && direction === "previous"))) {
+      navigation = undefined
+    }
+    navigation ??= { from: requestedID ?? inspect()?.selected?.id, offset: 0 }
+    navigation.offset += direction === "next" ? count : -count
+    if (navigation.loading) navigation.loading.key = ""
+    advance()
+  }
+
+  function inspect() {
+    const messages = context.data.session.message.list(sessionID)
+    const ids = new Set(messages.map((message) => message.id))
+    function isRow(node: Renderable) {
+      if (ids.has(node.id) || (node.id?.startsWith("session-part:") && ids.has(node.id.split(":")[1]))) return true
+      const anchor = node.getChildren()[0]
+      return Boolean(anchor && groupAt(anchor))
+    }
+    function findScroll(node: Renderable): ScrollBoxRenderable | undefined {
+      if (!node.visible) return
+      if (node instanceof ScrollBoxRenderable && node.getChildren().some(isRow)) return node
+      for (const child of node.getChildren()) {
+        const found = findScroll(child)
+        if (found) return found
+      }
+    }
+    if (!scroll || scroll.isDestroyed) scroll = findScroll(context.renderer.root)
+    if (!scroll) { select(undefined); return }
+    const { ranges, hasLatest } = transcriptItems(scroll.getChildren(), messages)
+    const top = scroll.viewport.y
+    const bottom = top + scroll.viewport.height
+    let selected = ranges.find((range) => range.id === requestedID)
+    if (!selected && requestedID) {
+      for (const id of selectedParents) {
+        selected = ranges.find((range) => range.id === id)
+        if (selected) { requestedID = id; break }
+      }
+      if (!selected) requestedID = undefined
+    }
+    selected ??= ranges.find((range) => range.top <= top + 1 && range.bottom > top + 1)
+      ?? ranges.find((range) => range.bottom > top && range.top < bottom)
+    selectedParents = []
+    let parent = selected?.parentID
+    while (parent) {
+      selectedParents.push(parent)
+      parent = ranges.find((range) => range.id === parent)?.parentID
+    }
+    select(selected?.id)
+    return { scroll, selected, ranges, hasLatest, top, bottom }
+  }
+
+  return {
+    latest, move,
+    get(id: string | undefined) {
+      if (!scroll || scroll.isDestroyed) return
+      return transcriptItems(scroll.getChildren(), context.data.session.message.list(sessionID)).ranges.find((range) => range.id === id)
+    },
+    toggle() {
+      const range = inspect()?.selected
+      if (!range?.toggle) return false
+      navigation = undefined
+      requestedID = range.id
+      const node = range.toggle
+      node.processMouseEvent(new MouseEvent(node, { type: "up", button: 0, x: node.x, y: node.y,
+        modifiers: { shift: false, alt: false, ctrl: false } }))
+      context.renderer.requestRender()
+      return true
+    },
+    followViewport() { navigation = undefined; requestedID = undefined; selectedParents = [] },
+    focus() { inspect()?.scroll.focus() },
+    sync() { advance(); navigation = undefined; return inspect() },
+    draw(buffer: OptimizedBuffer, yankID?: string) {
+      advance()
+      const view = inspect()
+      if (!view?.selected) return
+      const top = Math.max(0, view.top, view.selected.top)
+      const bottom = Math.min(buffer.height, view.bottom, view.selected.bottom)
+      if (view.selected.id === yankID) {
+        const node = view.selected.node
+        const left = Math.max(0, view.scroll.viewport.x, node.x)
+        const right = Math.min(buffer.width, view.scroll.viewport.x + view.scroll.viewport.width, node.x + node.width)
+        const foreground = context.theme.background.base.buffer
+        const background = context.theme.text.feedback.info.base.buffer
+        const colors = buffer.buffers
+        // Change only colors to preserve wide-character continuation cells.
+        for (let y = top; y < bottom; y++) {
+          for (let x = left; x < right; x++) {
+            const offset = (y * buffer.width + x) * 4
+            colors.fg.set(foreground, offset)
+            colors.bg.set(background, offset)
+          }
+        }
+      }
+      const x = view.scroll.x - 1
+      if (x < 0) return
+      for (let y = top; y < bottom; y++) {
+        buffer.drawText("▎", x, y, context.theme.text.feedback.info.base, context.theme.background.base)
+      }
+    },
+  }
+}