enhance entering and exiting copy mode

Author: BrettKulp

README.md

@@ -83,12 +83,18 @@ Works similarly to tmux copy mode within opencode tui.
 
 <img src=".github/demo-copy-mode.gif" style="border: 1px solid #555; border-radius: 4px;" />
 
-- Enter copy mode with `<leader>v`.
+- Enter copy mode with `<leader>v` or `Ctr + w + k` to enter copy mode without
+scrolling the chat history to the bottom.
 - Navigate with `h` `j` `k` `l` or arrow keys (`Left` `Down` `Up` `Right`).
 - Press `v` / `V` to start character-wise or line-wise selection.
 - `y` yanks to the vim register.
 - `Enter` copies to the system clipboard.
 - `Escape` exits visual mode, `q` exits copy mode.
+- `i` exits copy mode without scrolling the chat history to the bottom and
+enters insert mode
+- `Ctrl + w + j` exits copy mode without scrolling the chat history to the
+bottom
+- 
 - `z` `zt` `zz` `zb` adjust copy-mode scroll positioning.
 - `H` / `M` / `L` jump to the top / middle / bottom of the viewport.
 

packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx

@@ -89,7 +89,7 @@ export type PromptProps = {
   }
   copy?: {
     enter: () => void
-    exit: () => void
+    exit: (scrollToBottom?: boolean) => void
     visual: (mode: "char" | "line") => void
     yank: () => { text: string; linewise: boolean } | null
     copy: () => Promise<void> | void
@@ -366,12 +366,28 @@ export function Prompt(props: PromptProps) {
   }
 
   function handleNavigation(action: "up" | "down"){
-    if (action === "up"){
-      // TODO
+    if (!props.copy) return
+
+    if (vimState.isCopy()) {
+      const skipExit = vimState.skipExitOnModeChange()
+      const scrollToBottom = vimState.exitScrollToBottom()
+      vimState.setSkipExitOnModeChange(false)
+      vimState.setExitScrollToBottom(true)
+      vimState.setMode("normal")
+      if (!skipExit) {
+        props.copy.exit(scrollToBottom)
+      }
+      return
+    }
+
+    vimState.setMode("copy")
+    props.copy.enter()
 
+    if (action === "up"){
+      props.copy.move("up")
     }
     if (action === "down"){
-      // TODO
+      props.copy.move("down")
     }
   }
 
@@ -439,6 +455,9 @@ export function Prompt(props: PromptProps) {
     copyExitVisual() {
       props.copy?.exitVisual()
     },
+    copyExit(scrollToBottom = true) {
+      props.copy?.exit(scrollToBottom)
+    },
     copyYank() {
       const reg = props.copy?.yank()
       if (reg) vimState.setRegister(reg)
@@ -1403,7 +1422,13 @@ export function Prompt(props: PromptProps) {
                   if (vimState.isCopy()) {
                     const active = vimState.isCopy()
                     vim.handleKey(e)
-                    if (active && !vimState.isCopy()) props.copy?.exit()
+                    if (active && !vimState.isCopy()) {
+                      const skipExit = vimState.skipExitOnModeChange()
+                      const scrollToBottom = vimState.exitScrollToBottom()
+                      vimState.setSkipExitOnModeChange(false)
+                      vimState.setExitScrollToBottom(true)
+                      if (!skipExit) props.copy?.exit(scrollToBottom)
+                    }
                     if (!e.defaultPrevented) e.preventDefault()
                     return
                   }

packages/opencode/src/cli/cmd/tui/component/vim/vim-handler.ts

@@ -3,7 +3,7 @@ import type { createVimState, VimSnapshot } from "./vim-state"
 import type { TextareaRenderable } from "@opentui/core"
 import { vimScroll, type VimScroll } from "./vim-scroll"
 import { vimJump, type VimJump } from "./vim-motion-jump"
-import { vimWindowNavigation, type VimWindowNavigation } from "./vim-motion-window-navigation.ts";
+import { vimWindowNavigation, type VimWindowNavigation } from "./vim-motion-window-navigation.ts"
 import {
   appendAfterCursor,
   appendLineEnd,
@@ -72,6 +72,7 @@ export function createVimHandler(input: {
   copy?: (action: VimCopyMove) => void
   copyVisual?: (mode: "char" | "line") => void
   copyExitVisual?: () => void
+  copyExit?: (scrollToBottom?: boolean) => void
   copyYank?: () => void
   copyCopy?: () => void
   copyIsVisual?: () => boolean
@@ -760,6 +761,40 @@ export function createVimHandler(input: {
       return true
     }
 
+    if (key === "i") {
+      if (input.copyIsVisual?.()) {
+        input.copyExitVisual?.()
+        event.preventDefault()
+        return true
+      }
+      input.state.setSkipExitOnModeChange(true)
+      input.state.setExitScrollToBottom(false)
+      input.state.setMode("insert")
+      event.preventDefault()
+      input.copyExit?.(false)
+      return true
+    }
+
+    if (event.ctrl && input.state.pending() === "w" && key === "j") {
+      if (input.copyIsVisual?.()) {
+        input.copyExitVisual?.()
+        event.preventDefault()
+        return true
+      }
+      input.state.setSkipExitOnModeChange(true)
+      input.state.setExitScrollToBottom(false)
+      input.state.setMode("normal")
+      event.preventDefault()
+      input.copyExit?.(false)
+      return true
+    }
+
+    if (key === "w" && hasModifier(event)) {
+      input.state.setPending("w")
+      event.preventDefault()
+      return true
+    }
+
     const scroll = vimScroll(event)
     if (scroll) {
       input.scroll(scroll)

packages/opencode/src/cli/cmd/tui/component/vim/vim-state.ts

@@ -22,6 +22,8 @@ export function createVimState(input: { enabled: Accessor<boolean>; initial?: Ac
   const [undos, setUndos] = createSignal<VimHistory[]>([])
   const [redos, setRedos] = createSignal<VimSnapshot[]>([])
   const [edit, setEdit] = createSignal<VimSnapshot | null>(null)
+  const [skipExitOnModeChange, setSkipExitOnModeChange] = createSignal(false)
+  const [exitScrollToBottom, setExitScrollToBottom] = createSignal(true)
 
   function clearPending() {
     if (pending()) setPending("")
@@ -81,6 +83,10 @@ export function createVimState(input: { enabled: Accessor<boolean>; initial?: Ac
     setReplace,
     typed,
     setTyped,
+    skipExitOnModeChange,
+    setSkipExitOnModeChange,
+    exitScrollToBottom,
+    setExitScrollToBottom,
     beginEdit(snapshot: VimSnapshot) {
       setEdit(snapshot)
     },

packages/opencode/src/cli/cmd/tui/routes/session/copy-mode.ts

@@ -53,6 +53,8 @@ export function createCopyMode(input: {
   toBottom: () => void
 }) {
   const [state, setState] = createSignal<CopyState>({ ...empty })
+  let skipSyncOnce = false
+  let lastIdx = -1
 
   // --- row building ---
 
@@ -282,7 +284,18 @@ export function createCopyMode(input: {
 
   // --- navigation ---
 
-  function sync(next: number) {
+  function sync(next: number, scrollToVisible = true) {
+    if (skipSyncOnce) {
+      skipSyncOnce = false
+      return
+    }
+    const s = state()
+    if (s.idx === next && !s.active) {
+      return
+    }
+    if (s.idx === next && s.active) {
+      return
+    }
     const scroll = input.scroll()
     const list = rows()
     if (!list.length) {
@@ -292,10 +305,10 @@ export function createCopyMode(input: {
     const idx = Math.max(0, Math.min(next, list.length - 1))
     setState((s) => ({ ...s, active: true, idx }))
     const row = list[idx]
-    if (!row) return
+    if (!row || !scrollToVisible) return
     const y = row.y
     const top = scroll.y
-    const bottom = scroll.y + scroll.height - 1
+    const bottom = scroll.y + scroll.height + 1
     if (y < top) {
       scroll.scrollBy(y - top)
       return
@@ -307,13 +320,33 @@ export function createCopyMode(input: {
 
   function enter() {
     const init = () => {
+      const scroll = input.scroll()
       const list = rows()
       if (!list.length) return false
-      const idx = list.findLastIndex((x) => x.role === "assistant")
-      const target = idx >= 0 ? idx : list.length - 1
-      const row = list[target]
-      setState((s) => ({ ...s, col: copyMin(row), stick: "first" as const }))
-      sync(target)
+
+      const top = scroll.y
+      const bottom = scroll.y + scroll.height - 1
+      const visibleRows = list.filter((x) => x.role === "assistant" && x.y >= top && x.y <= bottom)
+
+      const savedIdx = lastIdx >= 0 ? lastIdx : state().idx
+      const savedRow = savedIdx >= 0 && savedIdx < list.length ? list[savedIdx] : undefined
+      const savedVisible = savedRow && savedRow.y >= top && savedRow.y <= bottom
+
+      const visibleIdx = list.findLastIndex((x) => x.role === "assistant" && x.y >= top && x.y <= bottom)
+      const lastAssistantIdx = list.findLastIndex((x) => x.role === "assistant")
+
+      let target: number
+      if (savedIdx >= 0) {
+        target = savedIdx
+      } else if (visibleIdx >= 0) {
+        target = visibleIdx
+      } else {
+        target = lastAssistantIdx
+      }
+      const finalTarget = target >= 0 ? target : 0
+      const row = list[finalTarget]
+      setState((s) => ({ ...s, active: true, idx: finalTarget, col: copyMin(row), stick: "first" as const }))
+      skipSyncOnce = true
       return true
     }
     if (init()) return
@@ -322,15 +355,23 @@ export function createCopyMode(input: {
     }, 0)
   }
 
-  function exit() {
-    setState({ ...empty })
-    input.toBottom()
+  function exit(scrollToBottom?: boolean) {
+    if (scrollToBottom) {
+      lastIdx = -1
+      input.toBottom()
+      setState({ ...empty })
+    } else{
+      lastIdx = state().idx
+      setState(s => ({ ...s, active: false, visual: undefined, anchor: undefined }))
+    }
   }
 
   function move(action: "up" | "down" | "left" | "right") {
     const scroll = input.scroll()
     const s = state()
     if (!s.active) return
+      // want to detect if we just entered copy mode and put cursor into a message
+      // that is currently visible in the chat
     if (action === "up" || action === "down") {
       sync(s.idx + (action === "up" ? -1 : 1))
       const row = rows()[state().idx]
@@ -525,21 +566,28 @@ export function createCopyMode(input: {
 
   createEffect((prev: string | undefined) => {
     const id = input.session()
-    if (prev !== undefined && prev !== id) exit()
+    if (prev !== undefined && prev !== id) {
+      exit()
+    }
     return id
   })
 
-  createEffect(() => {
+
+  createEffect((prev: { active: boolean; idx: number } | undefined) => {
     const s = state()
+
+    if (prev && prev.active === s.active) return prev
+
     const list = rows()
-    if (!s.active) return
+    if (!s.active) return { active: s.active, idx: s.idx }
     if (!list.length) {
       exit()
-      return
+      return { active: s.active, idx: s.idx }
     }
     if (s.idx >= list.length) {
       sync(list.length - 1)
     }
+    return { active: s.active, idx: s.idx }
   })
 
   // --- derived ---
@@ -552,7 +600,7 @@ export function createCopyMode(input: {
 
   const highlights = createMemo(() => {
     const s = state()
-    if (!s.visual || !s.anchor) return new Map<string, CopyHighlight[]>()
+    if (!s.active || !s.visual || !s.anchor) return new Map<string, CopyHighlight[]>()
     const list = rows()
     const cache = new Map(
       input
@@ -590,7 +638,7 @@ export function createCopyMode(input: {
   return {
     prompt: {
       enter,
-      exit,
+      exit: (scrollToBottom = true) => exit(scrollToBottom),
       visual,
       yank,
       copy,

packages/opencode/test/cli/tui/vim-motions.test.ts

@@ -168,6 +168,8 @@ function createHandler(
   const [editState, setEditState] = createSignal<{ text: string; cursor: number } | null>(null)
   const [copyCol, setCopyCol] = createSignal(options?.copy?.col ?? 0)
   const [copyIdx, setCopyIdx] = createSignal(options?.copy?.idx ?? 0)
+  const [skipExitOnModeChange, setSkipExitOnModeChange] = createSignal(false)
+  const [exitScrollToBottom, setExitScrollToBottom] = createSignal(true)
   const copyRows = options?.copy?.rows
   const scrollCalls: VimScroll[] = []
   const jumpCalls: VimJump[] = []
@@ -179,6 +181,7 @@ function createHandler(
   let copyYanks = 0
   let copyCopies = 0
   let copyExitVisuals = 0
+  let copyExitCalls: boolean[] = []
 
   function clearPending() {
     setPending("")
@@ -268,6 +271,10 @@ function createHandler(
     isVisual: () => mode() === "visual" || mode() === "visual-line",
     isVisualLine: () => mode() === "visual-line",
     isCopy: () => mode() === "copy",
+    skipExitOnModeChange,
+    setSkipExitOnModeChange,
+    exitScrollToBottom,
+    setExitScrollToBottom,
   } as ReturnType<typeof createVimState>
   const handler = createVimHandler({
     enabled,
@@ -294,6 +301,9 @@ function createHandler(
       copyExitVisuals++
       setCopyVisual(undefined)
     },
+    copyExit(scrollToBottom) {
+      copyExitCalls.push(scrollToBottom ?? true)
+    },
     copyYank() {
       copyYanks++
       state.setRegister({ text: options?.copy?.text ?? "picked", linewise: false })
@@ -364,6 +374,7 @@ function createHandler(
     copyYanks: () => copyYanks,
     copyCopies: () => copyCopies,
     copyExitVisuals: () => copyExitVisuals,
+    copyExitCalls: () => copyExitCalls,
     copyCol,
     copyIdx,
     meta,
@@ -2659,6 +2670,26 @@ describe("copy mode", () => {
     expect(ctx.state.mode()).toBe("normal")
   })
 
+  test("i in copy mode exits copy mode to insert mode without scrolling", () => {
+    const ctx = createHandler("abc", { mode: "copy" })
+
+    const evt = createEvent("i")
+    expect(ctx.handler.handleKey(evt.event)).toBe(true)
+    expect(evt.prevented()).toBe(true)
+    expect(ctx.state.mode()).toBe("insert")
+    expect(ctx.copyExitCalls()).toEqual([false])
+  })
+
+  test("i in copy mode visual exits visual and stays in copy mode", () => {
+    const ctx = createHandler("abc", { mode: "copy", copy: { isVisual: true } })
+
+    const evt = createEvent("i")
+    expect(ctx.handler.handleKey(evt.event)).toBe(true)
+    expect(evt.prevented()).toBe(true)
+    expect(ctx.copyExitVisuals()).toBe(1)
+    expect(ctx.state.mode()).toBe("copy")
+  })
+
   test("hjkl route to copy movement callbacks", () => {
     const ctx = createHandler("abc", { mode: "copy" })