add types to key

Author: charleslien

cli/src/chat.tsx

@@ -5,6 +5,7 @@ import { routeUserPrompt } from './commands/router'
 import { AgentModeToggle } from './components/agent-mode-toggle'
 import { BuildModeButtons } from './components/build-mode-buttons'
 import { LoginModal } from './components/login-modal'
+import { MessageRenderer } from './components/message-renderer'
 import {
   MultilineInput,
   type MultilineInputHandle,
@@ -20,7 +21,6 @@ import { useElapsedTime } from './hooks/use-elapsed-time'
 import { useInputHistory } from './hooks/use-input-history'
 import { useKeyboardHandlers } from './hooks/use-keyboard-handlers'
 import { useMessageQueue } from './hooks/use-message-queue'
-import { MessageRenderer } from './components/message-renderer'
 import { useChatScrollbox } from './hooks/use-scroll-management'
 import { useSendMessage } from './hooks/use-send-message'
 import { useSuggestionEngine } from './hooks/use-suggestion-engine'
@@ -39,7 +39,7 @@ import { BORDER_CHARS } from './utils/ui-constants'
 import type { SendMessageTimerEvent } from './hooks/use-send-message'
 import type { ContentBlock } from './types/chat'
 import type { SendMessageFn } from './types/contracts/send-message'
-import type { ScrollBoxRenderable } from '@opentui/core'
+import type { KeyEvent, ScrollBoxRenderable } from '@opentui/core'
 
 const MAX_VIRTUALIZED_TOP_LEVEL = 60
 const VIRTUAL_OVERSCAN = 12
@@ -387,14 +387,12 @@ export const Chat = ({
   }, [agentMatches.length, agentSelectedIndex])
 
   const handleSlashMenuKey = useCallback(
-    (
-      key: any,
-    ): boolean => {
+    (key: KeyEvent): boolean => {
       if (!slashContext.active || slashMatches.length === 0) {
         return false
       }
 
-      const hasModifier = Boolean(key.ctrl || key.meta || key.alt || key.option)
+      const hasModifier = Boolean(key.ctrl || key.meta || key.option)
 
       function selectCurrent(): boolean {
         const selected = slashMatches[slashSelectedIndex] ?? slashMatches[0]
@@ -412,7 +410,11 @@ export const Chat = ({
         )
         const replacement = `/${selected.id} `
         const newValue = before + replacement + after
-        setInputValue({text: newValue, cursorPosition: before.length + replacement.length, lastEditDueToNav: false})
+        setInputValue({
+          text: newValue,
+          cursorPosition: before.length + replacement.length,
+          lastEditDueToNav: false,
+        })
         setSlashSelectedIndex(0)
         return true
       }
@@ -468,14 +470,12 @@ export const Chat = ({
   )
 
   const handleAgentMenuKey = useCallback(
-    (
-      key: any,
-    ): boolean => {
+    (key: KeyEvent): boolean => {
       if (!mentionContext.active || agentMatches.length === 0) {
         return false
       }
 
-      const hasModifier = Boolean(key.ctrl || key.meta || key.alt || key.option)
+      const hasModifier = Boolean(key.ctrl || key.meta || key.option)
 
       function selectCurrent(): boolean {
         const selected = agentMatches[agentSelectedIndex] ?? agentMatches[0]
@@ -494,7 +494,8 @@ export const Chat = ({
         )
         const replacement = `@${selected.displayName} `
         const newValue = before + replacement + after
-        setInputValue({text: newValue, 
+        setInputValue({
+          text: newValue,
           cursorPosition: before.length + replacement.length,
           lastEditDueToNav: false,
         })
@@ -553,9 +554,7 @@ export const Chat = ({
   )
 
   const handleSuggestionMenuKey = useCallback(
-    (
-      key: any,
-    ): boolean => {
+    (key: KeyEvent): boolean => {
       if (handleSlashMenuKey(key)) {
         return true
       }
@@ -748,8 +747,6 @@ export const Chat = ({
     topLevelMessages.length - virtualTopLevelMessages.length,
   )
 
-
-
   const virtualizationNotice =
     shouldVirtualize && hiddenTopLevelCount > 0 ? (
       <text

cli/src/components/multiline-input.tsx

@@ -15,7 +15,7 @@ import { useTheme } from '../hooks/use-theme'
 import { computeInputLayoutMetrics } from '../utils/text-layout'
 
 import type { InputValue } from '../state/chat-store'
-import type { PasteEvent, ScrollBoxRenderable } from '@opentui/core'
+import type { KeyEvent, PasteEvent, ScrollBoxRenderable } from '@opentui/core'
 
 // Helper functions for text manipulation
 function findLineStart(text: string, cursor: number): number {
@@ -83,7 +83,7 @@ interface MultilineInputProps {
   value: string
   onChange: (value: InputValue | ((prev: InputValue) => InputValue)) => void
   onSubmit: () => void
-  onKeyIntercept?: (key: any) => boolean
+  onKeyIntercept?: (key: KeyEvent) => boolean
   placeholder?: string
   focused?: boolean
   maxHeight?: number
@@ -196,7 +196,7 @@ export const MultilineInput = forwardRef<
   // Handle all keyboard input with advanced shortcuts
   useKeyboard(
     useCallback(
-      (key: any) => {
+      (key: KeyEvent) => {
         if (!focused) return
 
         if (onKeyIntercept) {
@@ -229,7 +229,6 @@ export const MultilineInput = forwardRef<
           !key.shift &&
           !key.ctrl &&
           !key.meta &&
-          !key.alt &&
           !key.option &&
           !isAltLikeModifier &&
           !hasEscapePrefix &&
@@ -243,7 +242,6 @@ export const MultilineInput = forwardRef<
           key.ctrl &&
           !key.meta &&
           !key.option &&
-          !key.alt &&
           (lowerKeyName === 'j' || isEnterKey)
         const isBackslashEnter = isEnterKey && hasBackslashBeforeCursor
 
@@ -432,7 +430,7 @@ export const MultilineInput = forwardRef<
         }
 
         // Basic Backspace (no modifiers)
-        if (key.name === 'backspace' && !key.ctrl && !key.meta && !key.alt) {
+        if (key.name === 'backspace' && !key.ctrl && !key.meta && !key.option) {
           preventKeyDefault(key)
           if (cursorPosition > 0) {
             const newValue =
@@ -447,7 +445,7 @@ export const MultilineInput = forwardRef<
         }
 
         // Basic Delete (no modifiers)
-        if (key.name === 'delete' && !key.ctrl && !key.meta && !key.alt) {
+        if (key.name === 'delete' && !key.ctrl && !key.meta && !key.option) {
           preventKeyDefault(key)
           if (cursorPosition < value.length) {
             const newValue =
@@ -540,27 +538,27 @@ export const MultilineInput = forwardRef<
         }
 
         // Left arrow (no modifiers)
-        if (key.name === 'left' && !key.ctrl && !key.meta && !key.alt) {
+        if (key.name === 'left' && !key.ctrl && !key.meta && !key.option) {
           preventKeyDefault(key)
           setCursorPosition(Math.max(0, cursorPosition - 1))
           return
         }
 
         // Right arrow (no modifiers)
-        if (key.name === 'right' && !key.ctrl && !key.meta && !key.alt) {
+        if (key.name === 'right' && !key.ctrl && !key.meta && !key.option) {
           preventKeyDefault(key)
           setCursorPosition(Math.min(value.length, cursorPosition + 1))
           return
         }
 
         // Up arrow (no modifiers)
-        if (key.name === 'up' && !key.ctrl && !key.meta && !key.alt) {
+        if (key.name === 'up' && !key.ctrl && !key.meta && !key.option) {
           preventKeyDefault(key)
           setCursorPosition(cursorPosition - getEffectiveCols())
         }
 
         // Down arrow (no modifiers)
-        if (key.name === 'down' && !key.ctrl && !key.meta && !key.alt) {
+        if (key.name === 'down' && !key.ctrl && !key.meta && !key.option) {
           preventKeyDefault(key)
           setCursorPosition(cursorPosition + getEffectiveCols())
         }
@@ -571,7 +569,7 @@ export const MultilineInput = forwardRef<
           key.sequence.length === 1 &&
           !key.ctrl &&
           !key.meta &&
-          !key.alt
+          !key.option
         ) {
           preventKeyDefault(key)
           const newValue =

cli/src/hooks/use-login-keyboard-handlers.ts

@@ -1,6 +1,8 @@
 import { useKeyboard } from '@opentui/react'
 import { useCallback } from 'react'
 
+import type { KeyEvent } from '@opentui/core'
+
 interface UseLoginKeyboardHandlersParams {
   loginUrl: string | null
   hasOpenedBrowser: boolean
@@ -23,7 +25,7 @@ export function useLoginKeyboardHandlers({
 }: UseLoginKeyboardHandlersParams) {
   useKeyboard(
     useCallback(
-      (key: any) => {
+      (key: KeyEvent) => {
         const isEnter =
           (key.name === 'return' || key.name === 'enter') &&
           !key.ctrl &&