feat: enhance TerminalViewport styling and hide system caret in terminal input

packages/ui/src/components/terminal/TerminalViewport.tsx

@@ -773,7 +773,7 @@ const TerminalViewport = React.forwardRef<TerminalController, TerminalViewportPr
     return (
       <div
         ref={containerRef}
-        className={cn('relative h-full w-full', className)}
+        className={cn('relative h-full w-full terminal-viewport-container', className)}
         style={{ backgroundColor: theme.background }}
         onClick={(event) => {
           if (enableTouchScroll) {
@@ -799,10 +799,14 @@ const TerminalViewport = React.forwardRef<TerminalController, TerminalViewportPr
               top: 0,
               width: 1,
               height: 1,
-              opacity: 0.001,
+              opacity: 0,
               zIndex: 1,
               background: 'transparent',
               color: 'transparent',
+              caretColor: 'transparent',
+              resize: 'none',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
               border: 'none',
               padding: 0,
               margin: 0,

packages/ui/src/index.css

@@ -1518,3 +1518,8 @@ html:not(.dark) .chat-scroll {
   content-visibility: visible !important;
   contain-intrinsic-size: none !important;
 }
+
+/* Hide system caret in terminal - targets both Ghostty internal input and our custom touch input */
+.terminal-viewport-container textarea {
+  caret-color: transparent !important;
+}