Merge pull request #10 from Tarquinen/dev

Fix TUI keyboard handling

Author: Tarquinen

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-vim",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "repository": {
     "type": "git",
     "url": "https://github.com/Tarquinen/opencode-vim"

src/modules/snippets/view.tsx

@@ -1,7 +1,6 @@
 /** @jsxImportSource @opentui/solid */
 import { spawn } from "node:child_process"
 import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js"
-import { useKeyboard } from "@opentui/solid"
 import { RGBA, type ScrollBoxRenderable } from "@opentui/core"
 import type { TuiPluginApi, TuiPromptRef } from "@opencode-ai/plugin/tui"
 import type { PromptContext } from "../../prompt/types"
@@ -303,7 +302,7 @@ export function SnippetAutocomplete(props: SnippetAutocompleteProps) {
         }, 0)
     })
 
-    useKeyboard((event) => {
+    const offKeyboard = props.ctx.api.keymap.intercept("key", ({ event }) => {
         const ref = props.ctx.prompt()
         const name = event.name?.toLowerCase()
 
@@ -341,6 +340,8 @@ export function SnippetAutocomplete(props: SnippetAutocompleteProps) {
         schedulePromptSync()
     })
 
+    onCleanup(() => offKeyboard())
+
     return (
         <Show when={visible()}>
             <box position="absolute" top={-menuHeight()} left={0} right={0} zIndex={100} borderColor={props.ctx.api.theme.current.border} {...INLINE_BORDER}>

src/modules/vim/index.tsx

@@ -1,6 +1,5 @@
 /** @jsxImportSource @opentui/solid */
 import type { KeyEvent, ParsedKey } from "@opentui/core"
-import { useKeyboard } from "@opentui/solid"
 import { onCleanup } from "solid-js"
 import type { Accessor } from "solid-js"
 import type { PromptContext, PromptModule } from "../../prompt/types"
@@ -31,7 +30,7 @@ export function createVimModule(options?: unknown, enabled: Accessor<boolean> =
             return <VimKeyboard ctx={ctx} config={config} state={state} snippets={snippets} enabled={enabled} log={log} />
         },
         renderRight(ctx) {
-            return <VimStatus mode={state.mode} pending={() => readablePending(state.pending())} enabled={enabled} theme={ctx.api.theme.current} pendingDisplayDelay={config.pendingDisplayDelay} disabled={ctx.disabled} log={log} requestRender={ctx.requestRender} />
+            return <VimStatus mode={state.mode} pending={() => readablePending(state.pending())} subscribe={state.subscribe} enabled={enabled} theme={ctx.api.theme.current} pendingDisplayDelay={config.pendingDisplayDelay} disabled={ctx.disabled} log={log} requestRender={ctx.requestRender} />
         },
     }
 }
@@ -50,7 +49,7 @@ function VimKeyboard(props: { ctx: PromptContext; config: VimConfig; state: Retu
         if (preparePassThroughKey(props.ctx, key, props.state.mode())) preparedEvents.add(event)
     }, { priority: 100 })
 
-    useKeyboard((event) => {
+    const offKeyboard = props.ctx.api.keymap.intercept("key", ({ event }) => {
         props.log("keyboard.event", {
             name: event.name,
             ctrl: event.ctrl,
@@ -96,6 +95,7 @@ function VimKeyboard(props: { ctx: PromptContext; config: VimConfig; state: Retu
     onCleanup(() => {
         props.log("keyboard.cleanup", { kind: props.ctx.kind })
         offKeyIntercept()
+        offKeyboard()
         vimee.cleanup()
         clearInterval(cursorStyleTimer)
     })

src/modules/vim/state.ts

@@ -2,23 +2,37 @@ import { createSignal } from "solid-js"
 import type { VimLog } from "./log"
 
 export type VimMode = "normal" | "insert" | "visual" | "visual-line"
+export type VimStateListener = () => void
 
 export function createVimState(defaultMode: VimMode, log: VimLog = () => {}) {
     const [mode, setMode] = createSignal<VimMode>(defaultMode)
     const [pending, setPending] = createSignal("")
+    const listeners = new Set<VimStateListener>()
 
     log("state.init", { mode: defaultMode })
 
     return {
         mode,
         setMode(next: VimMode) {
-            if (mode() !== next) log("state.mode", { from: mode(), to: next })
+            const changed = mode() !== next
+            if (changed) log("state.mode", { from: mode(), to: next })
             setMode(next)
+            if (changed) notify()
         },
         pending,
         setPending(next: string) {
-            if (pending() !== next) log("state.pending", { from: pending(), to: next })
+            const changed = pending() !== next
+            if (changed) log("state.pending", { from: pending(), to: next })
             setPending(next)
+            if (changed) notify()
         },
+        subscribe(listener: VimStateListener) {
+            listeners.add(listener)
+            return () => listeners.delete(listener)
+        },
+    }
+
+    function notify() {
+        for (const listener of listeners) listener()
     }
 }

src/modules/vim/view.tsx

@@ -1,15 +1,17 @@
 /** @jsxImportSource @opentui/solid */
-import { createSignal, onCleanup } from "solid-js"
+import type { TextRenderable } from "@opentui/core"
+import { onCleanup } from "solid-js"
 import type { Accessor } from "solid-js"
 import type { PromptContext } from "../../prompt/types"
 import type { VimLog } from "./log"
-import type { VimMode } from "./state"
+import type { VimMode, VimStateListener } from "./state"
 
 const STATUS_SYNC_MS = 50
 
 type VimStatusProps = {
     mode: Accessor<VimMode>
     pending: Accessor<string | undefined>
+    subscribe: (listener: VimStateListener) => () => void
     enabled: Accessor<boolean>
     theme: PromptContext["api"]["theme"]["current"]
     pendingDisplayDelay?: number
@@ -19,45 +21,63 @@ type VimStatusProps = {
 }
 
 export function VimStatus(props: VimStatusProps) {
-    const [mode, setMode] = createSignal(props.mode())
-    const [pending, setPending] = createSignal<string | undefined>()
-    const [enabled, setEnabled] = createSignal(props.enabled())
+    let modeText: TextRenderable | undefined
+    let pendingText: TextRenderable | undefined
+    let displayedMode = props.mode()
+    let displayedPending: string | undefined
+    let displayedEnabled = props.enabled()
     let pendingTimer: ReturnType<typeof setTimeout> | undefined
     let scheduledPending: string | undefined
 
     const sync = () => {
         const nextMode = props.mode()
         const nextPending = props.pending()
+        let changed = false
 
-        if (mode() !== nextMode) {
-            props.log?.("status.sync", { fromMode: mode(), toMode: nextMode, fromPending: pending(), toPending: pending() })
-            setMode(nextMode)
-            props.requestRender?.()
+        if (displayedMode !== nextMode) {
+            props.log?.("status.sync", { fromMode: displayedMode, toMode: nextMode, fromPending: displayedPending, toPending: displayedPending })
+            displayedMode = nextMode
+            changed = true
         }
 
         const nextEnabled = props.enabled()
-        if (enabled() !== nextEnabled) {
-            props.log?.("status.enabled", { from: enabled(), to: nextEnabled })
-            setEnabled(nextEnabled)
-            props.requestRender?.()
+        if (displayedEnabled !== nextEnabled) {
+            props.log?.("status.enabled", { from: displayedEnabled, to: nextEnabled })
+            displayedEnabled = nextEnabled
+            changed = true
         }
 
+        if (changed) updateModeText()
         syncPending(nextPending)
+        if (changed) props.requestRender?.()
     }
 
+    const unsubscribe = props.subscribe(sync)
     const timer = setInterval(sync, STATUS_SYNC_MS)
     onCleanup(() => {
+        unsubscribe()
         clearInterval(timer)
         if (pendingTimer) clearTimeout(pendingTimer)
     })
 
     return (
         <box paddingLeft={1} paddingRight={1} flexDirection="row">
-            {enabled() && pending() ? <text fg={props.theme.info}>{pending()} </text> : undefined}
-            {enabled() ? <text fg={props.disabled ? props.theme.textMuted : mode() === "insert" ? props.theme.success : props.theme.warning}>{modeLabel(mode())}</text> : undefined}
+            <text ref={(ref: TextRenderable) => { pendingText = ref; updatePendingText() }} fg={props.theme.info}>{displayedPending ? `${displayedPending} ` : ""}</text>
+            <text ref={(ref: TextRenderable) => { modeText = ref; updateModeText() }} fg={modeColor(displayedMode, displayedEnabled, props.theme, props.disabled)}>{displayedEnabled ? modeLabel(displayedMode) : ""}</text>
         </box>
     )
 
+    function updateModeText() {
+        if (!modeText) return
+        modeText.content = displayedEnabled ? modeLabel(displayedMode) : ""
+        modeText.fg = modeColor(displayedMode, displayedEnabled, props.theme, props.disabled)
+    }
+
+    function updatePendingText() {
+        if (!pendingText) return
+        pendingText.content = displayedEnabled && displayedPending ? `${displayedPending} ` : ""
+    }
+
     function syncPending(nextPending: string | undefined) {
         if (!nextPending) {
             if (pendingTimer) clearTimeout(pendingTimer)
@@ -67,7 +87,7 @@ export function VimStatus(props: VimStatusProps) {
             return
         }
 
-        if (pending() === nextPending) return
+        if (displayedPending === nextPending) return
         if (scheduledPending === nextPending) return
 
         if (pendingTimer) clearTimeout(pendingTimer)
@@ -87,13 +107,20 @@ export function VimStatus(props: VimStatusProps) {
     }
 
     function setDisplayedPending(nextPending: string | undefined) {
-        if (pending() === nextPending) return
-        props.log?.("status.sync", { fromMode: mode(), toMode: mode(), fromPending: pending(), toPending: nextPending })
-        setPending(nextPending)
+        if (displayedPending === nextPending) return
+        props.log?.("status.sync", { fromMode: displayedMode, toMode: displayedMode, fromPending: displayedPending, toPending: nextPending })
+        displayedPending = nextPending
+        updatePendingText()
         props.requestRender?.()
     }
 }
 
+function modeColor(mode: VimMode, enabled: boolean, theme: PromptContext["api"]["theme"]["current"], disabled?: boolean) {
+    if (!enabled) return undefined
+    if (disabled) return theme.textMuted
+    return mode === "insert" ? theme.success : theme.warning
+}
+
 function modeLabel(mode: VimMode) {
     if (mode === "visual") return "VISUAL"
     if (mode === "visual-line") return "VISUAL LINE"