Add blinking cursor and keyboard shortcuts to feedback modal

- Extract cursor to reusable InputCursor component with idle blink
animation - Implement 500ms blink cycle (visible/invisible) after idle
detection - Add Ctrl+C handler: clear input first, close modal if
already empty - Add Escape key to immediately close modal - Refactor
MultilineInput to use new InputCursor component

Author: brandonkachen

cli/src/components/feedback-modal.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState } from 'react'
-import { useRenderer } from '@opentui/react'
+import { useRenderer, useKeyboard } from '@opentui/react'
 
 import { MultilineInput, type MultilineInputHandle } from './multiline-input'
 import { Button } from './button'
@@ -38,6 +38,40 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({ open, onClose, onS
     setCategory('other')
   }, [onSubmit, feedbackText, category])
 
+  // Handle Ctrl+C: clear input first, then close if already empty
+  // Handle Escape: close modal directly
+  useKeyboard(
+    useCallback(
+      (key) => {
+        if (!open) return
+
+        const isCtrlC = key.ctrl && key.name === 'c'
+        const isEscape = key.name === 'escape'
+
+        if (!isCtrlC && !isEscape) return
+
+        if ('preventDefault' in key && typeof key.preventDefault === 'function') {
+          key.preventDefault()
+        }
+
+        if (isEscape) {
+          // Escape always closes the modal
+          onClose()
+        } else if (isCtrlC) {
+          if (feedbackText.length === 0) {
+            // Input is already empty, close the modal
+            onClose()
+          } else {
+            // Clear the input
+            setFeedbackText('')
+            setFeedbackCursor(0)
+          }
+        }
+      },
+      [open, feedbackText, onClose]
+    )
+  )
+
   if (!open) return null
 
   const categoryOptions = [
@@ -170,7 +204,7 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({ open, onClose, onS
           }}
         >
           <text style={{ wrapMode: 'none' }}>
-            <span fg={canSubmit ? theme.foreground : theme.muted}>{'< SUBMIT'}</span>
+            <span fg={canSubmit ? theme.foreground : theme.muted}>{'SUBMIT'}</span>
           </text>
         </Button>
       </box>

cli/src/components/input-cursor.tsx

@@ -0,0 +1,78 @@
+import { TextAttributes } from '@opentui/core'
+import React, { useEffect, useRef, useState } from 'react'
+import { useTheme } from '../hooks/use-theme'
+
+interface InputCursorProps {
+  visible: boolean
+  focused: boolean
+  char?: string
+  color?: string
+  dimColor?: string
+  blinkDelay?: number
+  blinkInterval?: number
+  bold?: boolean
+}
+
+export const InputCursor: React.FC<InputCursorProps> = ({
+  visible,
+  focused,
+  char = '▍',
+  color,
+  dimColor,
+  blinkDelay = 500,
+  blinkInterval = 500,  // Faster blinking
+  bold = true,
+}) => {
+  const theme = useTheme()
+  // false = normal/visible, true = invisible
+  const [isInvisible, setIsInvisible] = useState(false)
+  const blinkIntervalRef = useRef<NodeJS.Timeout | null>(null)
+
+  // Handle blinking (toggle visible/invisible) when idle
+  useEffect(() => {
+    // Clear any existing interval
+    if (blinkIntervalRef.current) {
+      clearInterval(blinkIntervalRef.current)
+      blinkIntervalRef.current = null
+    }
+
+    // Reset cursor to visible
+    setIsInvisible(false)
+
+    if (!focused || !visible) return
+
+    // Set up idle detection
+    const idleTimer = setTimeout(() => {
+      // Start blinking interval (toggle between visible and invisible)
+      blinkIntervalRef.current = setInterval(() => {
+        setIsInvisible((prev) => !prev)
+      }, blinkInterval)
+    }, blinkDelay)
+
+    return () => {
+      clearTimeout(idleTimer)
+      if (blinkIntervalRef.current) {
+        clearInterval(blinkIntervalRef.current)
+        blinkIntervalRef.current = null
+      }
+    }
+  }, [visible, focused, blinkDelay, blinkInterval])
+
+  if (!visible || !focused) {
+    return null
+  }
+
+  // When invisible, return a space to maintain layout
+  if (isInvisible) {
+    return <span> </span>
+  }
+
+  return (
+    <span
+      {...(color ? { fg: color } : undefined)}
+      {...(bold ? { attributes: TextAttributes.BOLD } : undefined)}
+    >
+      {char}
+    </span>
+  )
+}

cli/src/components/multiline-input.tsx

@@ -12,6 +12,7 @@ import {
 
 import { useOpentuiPaste } from '../hooks/use-opentui-paste'
 import { useTheme } from '../hooks/use-theme'
+import { InputCursor } from './input-cursor'
 import { clamp } from '../utils/math'
 import { computeInputLayoutMetrics } from '../utils/text-layout'
 import { calculateNewCursorPosition } from '../utils/word-wrap-utils'
@@ -126,6 +127,13 @@ export const MultilineInput = forwardRef<
   const theme = useTheme()
   const scrollBoxRef = useRef<ScrollBoxRenderable | null>(null)
   const [measuredCols, setMeasuredCols] = useState<number | null>(null)
+  const [lastActivity, setLastActivity] = useState(Date.now())
+
+  // Update last activity on value or cursor changes
+  useEffect(() => {
+    setLastActivity(Date.now())
+  }, [value, cursorPosition])
+
   const getEffectiveCols = useCallback(() => {
     // Prefer measured viewport columns; fallback to a conservative
     // estimate: outer width minus border(2) minus padding(2) = 4.
@@ -787,12 +795,12 @@ export const MultilineInput = forwardRef<
                 {activeChar === ' ' ? '\u00a0' : activeChar}
               </span>
             ) : (
-              <span
-                {...(cursorFg ? { fg: cursorFg } : undefined)}
-                attributes={TextAttributes.BOLD}
-              >
-                {CURSOR_CHAR}
-              </span>
+              <InputCursor
+                visible={true}
+                focused={focused}
+                color={cursorFg}
+                key={lastActivity}
+              />
             )}
             {shouldHighlight
               ? afterCursor.length > 0