opencode-vim 0.0.20 → 0.0.22

package/README.md

@@ -1,40 +1,81 @@
 # opencode-vim
 
-Adds Vim-style insert and normal mode editing to the OpenCode prompt.
+Vim-style editing for the OpenCode 2 prompt and dialog search fields.
 
-![Demo](./assets/demo2.gif)
+This branch supports normal, insert, visual, and visual-line editing, custom
+keymaps, prompt history, command dispatch, cursor styles, and `/vim` toggling.
+The mode indicator appears before the working directory in the prompt footer.
+Pending key sequences stay hidden so they do not shift the footer layout.
 
-## Installation
+Configure the local plugin in OpenCode 2's `cli.json`:
 
-Install from the CLI:
+```json
+{
+  "plugins": [
+    "opencode-vim@file:/home/dan/src/opencode-config/plugin/opencode-vim"
+  ]
+}
+```
+
+Options use the V2 object form:
 
-```bash
-opencode plugin opencode-vim@latest --global
+```json
+{
+  "package": "opencode-vim@file:/home/dan/src/opencode-config/plugin/opencode-vim",
+  "options": {
+    "vim": {
+      "defaultMode": "insert",
+      "keymapTimeout": 500,
+      "keymaps": {
+        "insert": { "kj": "normal" },
+        "normal": { "Y": "y$" }
+      }
+    }
+  }
+}
 ```
 
-## Supported Keys
+OpenCode 2 does not yet expose its prompt ref or low-level key interceptor to
+plugins. This adapter uses the public renderer in the V2 plugin context to
+bridge those capabilities to the existing Vim engine.
 
-| Key | Behavior |
-| --- | --- |
-| `<Esc>`, `<C-[>` | Enter normal mode |
-| `i`, `a`, `A`, `o`, `O` | Return to insert mode |
-| `h`, `j`, `k`, `l`, `w`, `b`, `e`, `$`, `0` | Move through the prompt |
-| `x`, `d`, `c`, `y`, `p`, `u`, `<C-r>` | Edit, yank, paste, undo, redo |
-| `v`, `V` | Visual and visual-line selection |
-| `3w`, `diw`, `ci"`, `yiq`, `dip`, `yib` | Counts and text objects |
-| `k`, `j` on an empty prompt | Browse previous and next prompts |
-| `<CR>` in normal mode | Submit the prompt (configurable) |
-| `/vim` | Toggle Vim mode on or off |
+## Dialogs
 
-## Custom Keymaps
+Searchable dialogs such as `/models`, the `Ctrl+P` command palette, and Settings
+support Vim editing in their search fields. Each new dialog starts in your
+configured `defaultMode`.
 
-Keymaps can change modes, submit the prompt, run Vim key sequences, or dispatch active OpenCode commands with the `command:` prefix.
+- In insert mode, type to filter. `Esc` (or your `kj` mapping) enters normal mode.
+- In normal mode, `j`/`k` move the selected list item. `h`/`l`, `x`, `dw`, `u`,
+  and other editing commands act on the search text. `i` returns to insert mode.
+- `Enter` selects the highlighted item; `Esc` in idle normal mode closes or goes
+  back. Arrows, Tab, Home/End, and Page Up/Down keep their dialog behavior.
+- Dialog editing has separate mode and undo state from the main prompt.
 
-```jsonc
-"normal": {
-  "Y": "y$",
-  "q": "command:session.new"
-}
+Normal-mode custom mappings take precedence over the dialog `j`/`k` defaults.
+
+## Development and testing
+
+```sh
+npm install
+npm test
+npm run typecheck
+npm run bench
+```
+
+Tests use Bun and OpenTUI's native headless renderer: real textarea input,
+cursor movement, selection, wrapping, attachment extmarks, and the mounted
+plugin footer. They do not contact an OpenCode server or a model. When `nvim`
+is installed, additional tests compare text and cursor results against headless
+Neovim with user configuration disabled.
+
+With an OpenCode source checkout and its dependencies installed, you can also
+test against its real dialog component and keyboard routing:
+
+```sh
+OPENCODE_SOURCE=/path/to/opencode npm test -- test/opencode-dialog.test.tsx
 ```
 
-See [Keymap Actions](./docs/keymap-actions.md) for available actions and commands, or [Configuration](./docs/configuration.md) for all options.
+The benchmark measures wrap mapping and normal-mode navigation on prompts of
+1,000, 5,000, and 10,000 characters. Wrapping follows the textarea's visual
+lines; those cases are tested separately from Neovim's logical-line behavior.

package/package.json

@@ -1,39 +1,41 @@
 {
+  "$schema": "https://json.schemastore.org/package.json",
   "name": "opencode-vim",
-  "version": "0.0.20",
+  "version": "0.0.22",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/Tarquinen/opencode-vim"
   },
   "exports": {
-    "./tui": {
-      "import": "./tui.tsx"
-    }
+    "./tui": "./tui.tsx"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "bun test --conditions=browser --preload @opentui/solid/preload",
+    "bench": "bun test/benchmark.ts"
   },
   "dependencies": {
     "@vimee/core": "^0.3.0"
   },
   "peerDependencies": {
-    "@opencode-ai/plugin": ">=1.4.3",
-    "@opentui/core": "^0.4.2",
-    "@opentui/keymap": "^0.4.2",
-    "@opentui/solid": "^0.4.2",
-    "solid-js": "^1.9.12"
+    "@opencode/plugin": "2.0.10",
+    "@opentui/core": ">=0.5.10",
+    "@opentui/solid": ">=0.5.10",
+    "solid-js": ">=1.9.0"
   },
   "devDependencies": {
-    "@opencode-ai/plugin": "1.14.44",
-    "@opentui/core": "^0.4.2",
-    "@opentui/keymap": "^0.4.2",
-    "@opentui/solid": "^0.4.2",
+    "@opencode/theme": "2.0.10",
     "@types/bun": "^1.3.14",
-    "solid-js": "^1.9.12"
+    "@types/node": "^24.0.0",
+    "typescript": "^5.9.0"
   },
   "files": [
     "assets/",
     "docs/",
     "src/",
     "README.md",
-    "tui.json.example",
-    "tui.tsx"
+    "tui.tsx",
+    "view.tsx"
   ]
 }

package/src/modules/vim/actions.ts

@@ -1,14 +1,38 @@
-import type { RGBA } from "@opentui/core"
-import type { TuiPromptInfo, TuiPromptRef } from "@opencode-ai/plugin/tui"
-import type { PromptContext } from "../../prompt/types"
+import type { CursorStyleOptions, LineInfo, RGBA } from "@opentui/core"
 import type { VimCursorStyle } from "./config"
 
+type PromptInfo = {
+    input: string
+    mode: string
+    parts: unknown[]
+}
+
+type PromptRef = {
+    current: PromptInfo
+    set: (value: PromptInfo) => void
+    submit: () => void
+    blur: () => void
+}
+
+export type PromptContext = {
+    api: {
+        renderer: { currentFocusedRenderable?: unknown }
+        keymap: { dispatchCommand: (command: string) => { ok: boolean } }
+        theme: { current: { warning: RGBA; info: RGBA; background: RGBA } }
+    }
+    prompt: () => PromptRef | undefined
+    requestRender: () => void
+}
+
 export type EditBufferLike = {
+    isDestroyed?: boolean
+    width?: number
+    wrapMode?: string
     cursorOffset?: number
     plainText?: string
     visualCursor?: VisualCursorLike
-    editorView?: { getVisualEOL?: () => VisualCursorLike | undefined; setSelection?: (start: number, end: number, bgColor?: RGBA, fgColor?: RGBA) => void; resetSelection?: () => void }
-    cursorStyle?: VimCursorStyle
+    editorView?: { getLogicalLineInfo?: () => LineInfo; getVisualEOL?: () => VisualCursorLike | undefined; setSelection?: (start: number, end: number, bgColor?: RGBA, fgColor?: RGBA) => void; resetSelection?: () => void }
+    cursorStyle?: CursorStyleOptions
     selectionBg?: RGBA
     selectionFg?: RGBA
     moveCursorLeft?: () => boolean
@@ -16,6 +40,7 @@ export type EditBufferLike = {
     moveCursorUp?: () => boolean
     moveCursorDown?: () => boolean
     setSelection?: (start: number, end: number) => void
+    insertText?: (text: string) => void
     setSelectionInclusive?: (start: number, end: number) => void
     clearSelection?: () => void
     gotoVisualLineEnd?: () => boolean
@@ -43,7 +68,7 @@ export function focusedInput(ctx: PromptContext): EditBufferLike | undefined {
     return focused
 }
 
-export function setInput(ref: TuiPromptRef, input: string) {
+export function setInput(ref: PromptRef, input: string) {
     ref.set(toPromptInfo(ref, input))
 }
 
@@ -51,7 +76,7 @@ function hasEditBufferMethods(input: EditBufferLike) {
     return typeof input.moveCursorLeft === "function" || typeof input.moveCursorRight === "function" || typeof input.moveCursorUp === "function" || typeof input.moveCursorDown === "function" || typeof input.gotoLineEnd === "function"
 }
 
-function toPromptInfo(ref: TuiPromptRef, input: string): TuiPromptInfo {
+function toPromptInfo(ref: PromptRef, input: string): PromptInfo {
     return {
         input,
         mode: ref.current.mode,

package/src/modules/vim/edit.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, test } from "bun:test"
+import { editInput } from "./edit"
+
+describe("editInput", () => {
+    test("inserts without replacing unchanged placeholders", () => {
+        const fixture = createFixture("[Image 1] after")
+
+        editInput(fixture.input, "[Image 1] kafter")
+
+        expect(fixture.calls).toEqual([["cursor", 10], ["insert", "k"]])
+    })
+
+    test("uses display offsets for a minimal deletion", () => {
+        const fixture = createFixture("中 [Image 1] abc")
+
+        editInput(fixture.input, "中 [Image 1] ac")
+
+        expect(fixture.calls).toEqual([["selection", 14, 15], ["insert", ""]])
+    })
+
+    test("does not split graphemes", () => {
+        const fixture = createFixture("a👩‍💻b")
+
+        editInput(fixture.input, "axb")
+
+        expect(fixture.calls).toEqual([["selection", 1, 3], ["insert", "x"]])
+    })
+})
+
+function createFixture(plainText: string) {
+    const calls: Array<["cursor", number] | ["selection", number, number] | ["insert", string]> = []
+    let cursorOffset = 0
+    const input = {
+        plainText,
+        clearSelection() {},
+        get cursorOffset() {
+            return cursorOffset
+        },
+        set cursorOffset(value: number) {
+            cursorOffset = value
+            calls.push(["cursor", value])
+        },
+        setSelection(start: number, end: number) {
+            calls.push(["selection", start, end])
+        },
+        insertText(text: string) {
+            calls.push(["insert", text])
+        },
+    }
+    return { input, calls }
+}

package/src/modules/vim/edit.ts

@@ -0,0 +1,33 @@
+import { charToDisplay } from "./map"
+
+const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" })
+
+type Input = {
+    plainText: string
+    cursorOffset: number
+    setSelection: (start: number, end: number) => void
+    insertText: (text: string) => void
+    clearSelection: () => unknown
+}
+
+export function editInput(input: Input, value: string) {
+    if (input.plainText === value) return
+    input.clearSelection()
+
+    const before = [...graphemes.segment(input.plainText)]
+    const after = [...graphemes.segment(value)]
+    let prefix = 0
+    while (prefix < before.length && prefix < after.length && before[prefix].segment === after[prefix].segment) prefix++
+
+    let suffix = 0
+    while (suffix + prefix < before.length && suffix + prefix < after.length && before[before.length - suffix - 1].segment === after[after.length - suffix - 1].segment) suffix++
+
+    const start = before[prefix]?.index ?? input.plainText.length
+    const end = suffix ? before[before.length - suffix].index : input.plainText.length
+    const valueEnd = suffix ? after[after.length - suffix].index : value.length
+    const startOffset = charToDisplay(input.plainText, start)
+
+    if (start === end) input.cursorOffset = startOffset
+    else input.setSelection(startOffset, charToDisplay(input.plainText, end))
+    input.insertText(value.slice(start, valueEnd))
+}

package/src/modules/vim/graphemes.ts

@@ -0,0 +1,38 @@
+const segments = new Intl.Segmenter(undefined, { granularity: "grapheme" })
+
+// Vimee indexes JavaScript strings by UTF-16 code unit. Give each multi-unit
+// grapheme one private-use character so motions, operators and registers cannot
+// split it. The dictionary lives with the adapter, including its undo history.
+export function createGraphemeCodec() {
+    const encoded = new Map<string, string>()
+    const decoded = new Map<string, string>()
+    let next = 0xe000
+    return {
+        encode(text: string) {
+            let result = ""
+            for (const { segment } of segments.segment(text)) {
+                const code = segment.charCodeAt(0)
+                if (segment.length === 1 && (code < 0xe000 || code > 0xf8ff)) {
+                    result += segment
+                    continue
+                }
+                let token = encoded.get(segment)
+                if (!token) {
+                    if (next > 0xf8ff) throw new Error("Vim grapheme dictionary is full")
+                    token = String.fromCharCode(next++)
+                    encoded.set(segment, token)
+                    decoded.set(token, segment)
+                }
+                result += token
+            }
+            return result
+        },
+        decode(text: string) {
+            let result = ""
+            for (const token of text) result += decoded.get(token) ?? token
+            return result
+        },
+    }
+}
+
+export type GraphemeCodec = ReturnType<typeof createGraphemeCodec>

package/src/modules/vim/keys.ts

@@ -1,5 +1,7 @@
 import type { KeyEvent } from "@opentui/core"
 
+const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" })
+
 const NAMED_KEYS: Record<string, string> = {
     escape: "<Esc>",
     esc: "<Esc>",
@@ -15,6 +17,8 @@ const NAMED_KEYS: Record<string, string> = {
     right: "<Right>",
     home: "<Home>",
     end: "<End>",
+    pageup: "<PageUp>",
+    pagedown: "<PageDown>",
 }
 
 export function keyNotation(event: KeyEvent) {
@@ -23,7 +27,7 @@ export function keyNotation(event: KeyEvent) {
 
     if (event.ctrl) return `<C-${ctrlKey(name)}>`
     if (event.meta) return `<M-${name}>`
-    if (name.length === 1) return event.shift ? name.toUpperCase() : name
+    if ([...graphemes.segment(name)].length === 1) return event.shift ? name.toUpperCase() : name
     return NAMED_KEYS[name] ?? `<${name}>`
 }
 

package/src/modules/vim/map.ts

@@ -1,10 +1,13 @@
 import type { CursorPosition } from "@vimee/core"
 import type { EditBufferLike } from "./actions"
+import { createGraphemeCodec, type GraphemeCodec } from "./graphemes"
 
 const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" })
 
 function graphemeWidth(value: string) {
     // Textarea offsets count newlines as one position; Bun.stringWidth counts them as zero.
+    // OpenTUI's edit buffer gives tabs a fixed two-column width by default.
+    if (value === "\t") return 2
     return value === "\n" ? 1 : Bun.stringWidth(value)
 }
 
@@ -33,14 +36,15 @@ export function displayWidth(text: string): number {
 }
 
 export type PromptMap = {
+    codec: GraphemeCodec
     hostText: string
     vimText: string
     hostToVim: number[]
     vimToHost: Array<number | undefined>
 }
 
-export function createPromptMap(hostText: string, input?: EditBufferLike): PromptMap {
-    return buildPromptMap(hostText, input ? visualWrapOffsets(input, hostText) : [])
+export function createPromptMap(hostText: string, input?: EditBufferLike, codec = createGraphemeCodec()): PromptMap {
+    return buildPromptMap(hostText, input ? visualWrapOffsets(input, hostText) : [], codec)
 }
 
 export function derivePromptMap(map: PromptMap, vimText: string): PromptMap {
@@ -57,10 +61,10 @@ export function derivePromptMap(map: PromptMap, vimText: string): PromptMap {
             continue
         }
 
-        hostText += vimText[vimOffset]
+        hostText += map.codec.decode(vimText[vimOffset])
     }
 
-    return buildPromptMapFromSynthetic(hostText, vimText, synthetic)
+    return buildPromptMapFromSynthetic(hostText, vimText, synthetic, map.codec)
 }
 
 function preserveSynthetic(vimOffset: number, prefix: number, suffix: number, vimLength: number, inserted: string) {
@@ -78,30 +82,30 @@ export function hostOffset(map: PromptMap, position: CursorPosition, bias: "prev
     return charToDisplay(map.hostText, charIdx)
 }
 
-function buildPromptMap(hostText: string, wraps: number[]): PromptMap {
+function buildPromptMap(hostText: string, wraps: number[], codec: GraphemeCodec): PromptMap {
     const hostToVim: number[] = []
     const vimToHost: Array<number | undefined> = []
     const wrapOffsets = new Set(wraps.filter((offset) => offset > 0 && offset < hostText.length && hostText[offset - 1] !== "\n"))
     let vimText = ""
     let vimOffset = 0
 
-    for (let hostOffset = 0; hostOffset < hostText.length; hostOffset++) {
+    for (const { index: hostOffset, segment } of graphemes.segment(hostText)) {
         if (wrapOffsets.has(hostOffset)) {
             vimText += "\n"
             vimToHost[vimOffset] = undefined
             vimOffset++
         }
-        hostToVim[hostOffset] = vimOffset
-        vimText += hostText[hostOffset]
+        for (let index = hostOffset; index < hostOffset + segment.length; index++) hostToVim[index] = vimOffset
+        vimText += codec.encode(segment)
         vimToHost[vimOffset] = hostOffset
         vimOffset++
     }
 
     hostToVim[hostText.length] = vimOffset
-    return { hostText, vimText, hostToVim, vimToHost }
+    return { hostText, vimText, hostToVim, vimToHost, codec }
 }
 
-function buildPromptMapFromSynthetic(hostText: string, vimText: string, synthetic: Set<number>): PromptMap {
+function buildPromptMapFromSynthetic(hostText: string, vimText: string, synthetic: Set<number>, codec: GraphemeCodec): PromptMap {
     const hostToVim: number[] = []
     const vimToHost: Array<number | undefined> = []
     let hostOffset = 0
@@ -112,13 +116,13 @@ function buildPromptMapFromSynthetic(hostText: string, vimText: string, syntheti
             continue
         }
 
-        hostToVim[hostOffset] = vimOffset
         vimToHost[vimOffset] = hostOffset
-        hostOffset++
+        const length = codec.decode(vimText[vimOffset]).length
+        for (let index = 0; index < length; index++) hostToVim[hostOffset++] = vimOffset
     }
 
     hostToVim[hostText.length] = vimText.length
-    return { hostText, vimText, hostToVim, vimToHost }
+    return { hostText, vimText, hostToVim, vimToHost, codec }
 }
 
 function previousOffset(map: PromptMap, vimOffset: number, vimLength: number, prefix: number, suffix: number) {
@@ -128,22 +132,18 @@ function previousOffset(map: PromptMap, vimOffset: number, vimLength: number, pr
 }
 
 function visualWrapOffsets(input: EditBufferLike, text: string) {
-    const original = input.cursorOffset
     const wraps: number[] = []
-    let previousRow: number | undefined
-
-    for (let charIdx = 0; charIdx <= text.length; charIdx++) {
-        input.cursorOffset = charToDisplay(text, charIdx)
-        const row = input.visualCursor?.visualRow
-        if (row === undefined) {
-            wraps.length = 0
-            break
+    const lines = input.editorView?.getLogicalLineInfo?.()
+    if (!lines) return wraps
+    let line = 1
+    let offset = 0
+    for (const part of graphemes.segment(text)) {
+        while (line < lines.lineStartCols.length && lines.lineStartCols[line] <= offset) {
+            if (lines.lineWraps[line] > 0) wraps.push(part.index)
+            line++
         }
-        if (previousRow !== undefined && row > previousRow && text[charIdx - 1] !== "\n") wraps.push(charIdx)
-        previousRow = row
+        offset += graphemeWidth(part.segment)
     }
-
-    input.cursorOffset = original
     return wraps
 }
 

package/src/modules/vim/{state.ts → state.tsx}

@@ -1,3 +1,5 @@
+// Keep this module as TSX so OpenCode's plugin loader rewrites its Solid import
+// to the host runtime shared by the footer and cursor effects.
 import { createSignal } from "solid-js"
 import type { VimLog } from "./log"
 

package/src/modules/vim/vimee.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import type { KeyEvent } from "@opentui/core"
-import type { PromptContext } from "../../prompt/types"
+import type { PromptContext } from "./actions"
 import { createVimConfig } from "./config"
 import type { VimLog } from "./log"
 import { createVimState, type VimMode } from "./state"