fix: lift modifier state to MobileTerminalWrapper for virtual keyboard integration

- Remove useSpecialKeys hook state, export pure utility functions instead
- MobileTerminalWrapper now owns activeModifier state
- SpecialKeysStrip and SpecialKeysPanel receive modifier via props
- TerminalComponent applies modifier to virtual keyboard input via activeModifier prop
- Modifier now works with both special keys AND virtual keyboard input
- Modifier clears after any key press (special or virtual keyboard)

apps/web/src/components/mobile-terminal-wrapper.tsx

@@ -6,6 +6,7 @@ import { SpecialKeysPanel } from "./special-keys-panel";
 import { useMobileViewport } from "../hooks/use-mobile-viewport";
 import { useVirtualKeyboard } from "../hooks/use-virtual-keyboard";
 import { useAutoHide } from "../hooks/use-auto-hide";
+import type { ModifierKey } from "../hooks/use-special-keys";
 
 interface MobileTerminalWrapperProps {
   instanceId: string;
@@ -26,6 +27,7 @@ export const MobileTerminalWrapper: React.FC<MobileTerminalWrapperProps> = ({
   const { isOpen: isKeyboardOpen, height: keyboardHeight } =
     useVirtualKeyboard();
   const [showPanel, setShowPanel] = useState(false);
+  const [activeModifier, setActiveModifier] = useState<ModifierKey | null>(null);
   const [terminalRef, setTerminalRef] = useState<{
     sendData: (data: string) => void;
     connectionStatus: "connecting" | "connected" | "disconnected" | "error";
@@ -84,6 +86,8 @@ export const MobileTerminalWrapper: React.FC<MobileTerminalWrapperProps> = ({
           instanceId={instanceId}
           onClose={onClose}
           isMobile={true}
+          activeModifier={activeModifier}
+          onModifierChange={setActiveModifier}
           onTerminalReady={handleTerminalReady}
         />
       </div>
@@ -93,6 +97,8 @@ export const MobileTerminalWrapper: React.FC<MobileTerminalWrapperProps> = ({
         isVisible={!showPanel}
         onMoreClick={() => setShowPanel(true)}
         onKeepFocus={() => terminalRef?.focusInput()}
+        activeModifier={activeModifier}
+        onModifierChange={setActiveModifier}
       />
 
       <SpecialKeysPanel
@@ -100,6 +106,8 @@ export const MobileTerminalWrapper: React.FC<MobileTerminalWrapperProps> = ({
         isOpen={showPanel}
         onClose={() => setShowPanel(false)}
         onKeepFocus={() => terminalRef?.focusInput()}
+        activeModifier={activeModifier}
+        onModifierChange={setActiveModifier}
       />
     </div>
   );