fix: use transparent textarea pattern for command highlighting

- Move typography (font-size, font-family) to wrapper container
- Overlay inherits all styles via 'font: inherit', no duplication
- Make textarea text transparent when command prefix exists
- Overlay positioned behind textarea, shows through transparent text
- Caret remains visible via caret-color
- Background moved to wrapper so overlay renders correctly
- CommandPrefixText accepts className for font override when needed

Author: ammar-agent

src/browser/components/CommandHighlightOverlay.tsx

@@ -34,37 +34,50 @@ export function extractCommandPrefix(input: string): string | null {
   return commandLine;
 }
 
+interface CommandPrefixTextProps {
+  children: React.ReactNode;
+  /** Additional className - use to add font-mono when not inheriting from parent */
+  className?: string;
+}
+
 /**
  * Shared styling for command prefix text (e.g., "/compact" or "/skill-name").
  * Used in both the chat input overlay and sent message display.
+ *
+ * Font-family is inherited by default. When used outside of VimTextArea
+ * (e.g., in UserMessageContent), pass className="font-mono" explicitly.
  */
-export const CommandPrefixText: React.FC<{ children: React.ReactNode }> = (props) => (
-  <span className="font-mono text-[13px] font-medium text-[var(--color-plan-mode-light)]">
+export const CommandPrefixText: React.FC<CommandPrefixTextProps> = (props) => (
+  <span className={`font-medium text-[var(--color-plan-mode-light)] ${props.className ?? ""}`}>
     {props.children}
   </span>
 );
 
 interface CommandHighlightOverlayProps {
   /** The current input text value */
   value: string;
-  /** Whether vim mode is enabled (affects font) */
-  vimEnabled?: boolean;
   /** Additional className for the container */
   className?: string;
+  /** Whether there's a command prefix (controls visibility) */
+  hasCommand: boolean;
 }
 
 /**
  * Renders a highlight overlay for slash command prefixes.
- * This component should be positioned absolutely ABOVE the textarea,
- * showing the highlighted command text while keeping the rest transparent
- * so the original textarea text shows through.
  *
- * The overlay mirrors the textarea's text layout exactly.
+ * Uses the "transparent textarea text" pattern:
+ * - Overlay is positioned BEHIND the textarea
+ * - Textarea text is made transparent (via parent) so overlay shows through
+ * - Caret remains visible via caret-color on textarea
+ *
+ * All typography is inherited from the parent wrapper container,
+ * eliminating duplication and ensuring perfect alignment.
  */
 export const CommandHighlightOverlay: React.FC<CommandHighlightOverlayProps> = (props) => {
   const commandPrefix = extractCommandPrefix(props.value);
 
-  if (!commandPrefix) {
+  // Don't render if no command or parent says no command
+  if (!props.hasCommand || !commandPrefix) {
     return null;
   }
 
@@ -75,10 +88,10 @@ export const CommandHighlightOverlay: React.FC<CommandHighlightOverlayProps> = (
     <div
       className={props.className}
       style={{
-        // Match textarea exactly - these match VimTextArea's styling
-        padding: "6px 8px", // py-1.5 px-2
-        fontSize: "13px",
-        lineHeight: "1.5",
+        // Inherit ALL typography from parent container
+        font: "inherit",
+        letterSpacing: "inherit",
+        // Text handling - match textarea behavior
         whiteSpace: "pre-wrap",
         wordWrap: "break-word",
         overflowWrap: "break-word",
@@ -90,8 +103,8 @@ export const CommandHighlightOverlay: React.FC<CommandHighlightOverlayProps> = (
     >
       {/* Command prefix in highlight color */}
       <CommandPrefixText>{commandPrefix}</CommandPrefixText>
-      {/* Rest of text is transparent so textarea text shows through */}
-      <span style={{ color: "transparent" }}>{rest}</span>
+      {/* Rest of text in normal color - textarea is transparent so this shows */}
+      <span className="text-light">{rest}</span>
     </div>
   );
 };

src/browser/components/Messages/UserMessageContent.tsx

@@ -129,7 +129,7 @@ export const UserMessageContent: React.FC<UserMessageContentProps> = (props) =>
     // Space after prefix: inline layout (prefix + content on same line)
     return (
       <div className={hasNewlineAfterPrefix ? "" : "flex flex-wrap items-baseline"}>
-        <CommandPrefixText>{shouldHighlightPrefix}</CommandPrefixText>
+        <CommandPrefixText className="font-mono">{shouldHighlightPrefix}</CommandPrefixText>
         {hasSpaceAfterPrefix && <span>&nbsp;</span>}
         {remainingContent.trim() && (
           <MarkdownRenderer

src/browser/components/VimTextArea.tsx

@@ -8,7 +8,7 @@ import { stopKeyboardPropagation } from "@/browser/utils/events";
 import { cn } from "@/common/lib/utils";
 import { usePersistedState } from "@/browser/hooks/usePersistedState";
 import { VIM_ENABLED_KEY } from "@/common/constants/storage";
-import { CommandHighlightOverlay } from "./CommandHighlightOverlay";
+import { CommandHighlightOverlay, extractCommandPrefix } from "./CommandHighlightOverlay";
 
 /**
  * VimTextArea – minimal Vim-like editing for a textarea.
@@ -183,6 +183,9 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
     const pendingCommand = showVimMode ? vim.formatPendingCommand(pendingOp) : "";
     const showFocusHint = !isFocused && !isVscodeWebview();
 
+    // Check if there's a command prefix to highlight
+    const hasCommandPrefix = extractCommandPrefix(value) !== null;
+
     return (
       <div style={{ width: "100%" }} data-component="VimTextAreaContainer">
         <div
@@ -228,7 +231,30 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
             </div>
           )}
         </div>
-        <div style={{ position: "relative" }} data-component="VimTextAreaWrapper">
+        {/* 
+          Wrapper owns ALL shared typography (font, size, line-height).
+          Both textarea and highlight overlay inherit from here.
+          This ensures pixel-perfect alignment without duplicating styles.
+          Background is on wrapper so overlay (behind textarea) shows correctly.
+        */}
+        <div
+          className={cn(
+            "relative rounded text-[13px]",
+            vimEnabled ? "font-monospace" : "font-sans",
+            isEditing ? "bg-editing-mode-alpha" : "bg-dark"
+          )}
+          data-component="VimTextAreaWrapper"
+        >
+          {/* 
+            Command highlight overlay - positioned BEHIND textarea.
+            Uses transparent textarea text pattern: overlay shows through
+            the transparent textarea, caret remains visible via caret-color.
+          */}
+          <CommandHighlightOverlay
+            value={value}
+            hasCommand={hasCommandPrefix}
+            className="absolute inset-0 overflow-hidden rounded border border-transparent px-2 py-1.5"
+          />
           <textarea
             ref={textareaRef}
             value={value}
@@ -249,32 +275,42 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
                 ...(trailingAction ? { scrollbarGutter: "stable both-edges" } : {}),
                 // Focus border color from agent definition
                 "--focus-border-color": !isEditing ? focusBorderColor : undefined,
+                // Transparent text pattern: when command is present, make textarea
+                // text invisible so the highlight overlay shows through.
+                // The caret remains visible via caret-color below.
+                WebkitTextFillColor: hasCommandPrefix ? "transparent" : undefined,
               } as React.CSSProperties
             }
             className={cn(
-              "w-full border text-light py-1.5 px-2 rounded text-[13px] resize-none min-h-8 max-h-[50vh] overflow-y-auto",
-              vimEnabled ? "font-monospace" : "font-sans",
+              // Layout & sizing
+              "relative w-full py-1.5 px-2 rounded resize-none min-h-8 max-h-[50vh] overflow-y-auto",
+              // Typography inherited from wrapper, but explicitly set color for non-command state
+              "text-light",
+              // Font inherited from wrapper via `font: inherit` - but we need to repeat for
+              // the CSS cascade since className comes after style inheritance
+              "font-[inherit]",
+              // Border
+              "border",
+              // Background - always transparent so overlay can show through
+              "bg-transparent",
+              // Placeholder
               "placeholder:text-placeholder",
+              // Focus
               "focus:outline-none",
+              // Trailing action padding
               trailingAction && "pr-10",
+              // Border colors based on state
               isEditing
-                ? "bg-editing-mode-alpha border-editing-mode focus:border-editing-mode"
-                : "bg-dark border-border-light focus:border-[var(--focus-border-color)]",
+                ? "border-editing-mode focus:border-editing-mode"
+                : "border-border-light focus:border-[var(--focus-border-color)]",
+              // Caret: always visible (the highlight overlay handles text color)
+              // In vim normal mode, hide caret and show block selection
               vimMode === "normal"
                 ? "caret-transparent selection:bg-white/50"
-                : "caret-current selection:bg-selection",
+                : "caret-light selection:bg-selection",
               rest.className
             )}
           />
-          {/* Command highlight overlay - positioned on top of textarea, pointer-events: none allows clicks through */}
-          <CommandHighlightOverlay
-            value={value}
-            vimEnabled={vimEnabled}
-            className={cn(
-              "absolute inset-0 overflow-hidden rounded border border-transparent",
-              vimEnabled ? "font-monospace" : "font-sans"
-            )}
-          />
           {trailingAction && (
             <div className="pointer-events-none absolute right-3.5 bottom-2.5 flex items-center">
               <div className="pointer-events-auto">{trailingAction}</div>