Fix Remote Desktop: img → canvas rendering

Canvas approach with drawImage avoids broken-img alt-text issue
and renders JPEG frames correctly. Added minHeight to container.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/pages/AgentDetailPage.jsx

@@ -296,7 +296,7 @@ function RemoteDesktop({ agentId, agentHostname }) {
     const [error, setError] = useState('');
     const [fps, setFps] = useState(0);
     const [resolution, setResolution] = useState('');
-    const imgRef = useRef(null);
+    const canvasRef = useRef(null);
     const wsRef = useRef(null);
     const fpsCounterRef = useRef({ count: 0, last: Date.now() });
 
@@ -321,8 +321,14 @@ function RemoteDesktop({ agentId, agentHostname }) {
         ws.onmessage = (e) => {
             try {
                 const msg = JSON.parse(e.data);
-                if (msg.type === 'rdp_frame' && imgRef.current) {
+                if (msg.type === 'rdp_frame') {
-                    imgRef.current.src = 'data:image/jpeg;base64,' + msg.data;
+                    const img = new window.Image();
+                    img.onload = () => {
+                        const canvas = canvasRef.current;
+                        if (!canvas) return;
+                        if (canvas.width !== img.naturalWidth) canvas.width = img.naturalWidth;
+                        if (canvas.height !== img.naturalHeight) canvas.height = img.naturalHeight;
+                        canvas.getContext('2d').drawImage(img, 0, 0);
                         if (msg.w && msg.h) setResolution(`${msg.w}×${msg.h}`);
                         // FPS-Counter
                         const now = Date.now();
@@ -331,6 +337,8 @@ function RemoteDesktop({ agentId, agentHostname }) {
                             setFps(fpsCounterRef.current.count);
                             fpsCounterRef.current = { count: 0, last: now };
                         }
+                    };
+                    img.src = 'data:image/jpeg;base64,' + msg.data;
                 } else if (msg.type === 'rdp_disconnected') {
                     setStatus('idle');
                     setError('Agent hat die Verbindung getrennt');
@@ -348,7 +356,8 @@ function RemoteDesktop({ agentId, agentHostname }) {
             wsRef.current.close();
         }
         wsRef.current = null;
-        if (imgRef.current) imgRef.current.src = '';
+        const canvas = canvasRef.current;
+        if (canvas) canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
         setStatus('idle');
         setFps(0);
         setResolution('');
@@ -397,14 +406,13 @@ function RemoteDesktop({ agentId, agentHostname }) {
                     </div>
                 </div>
             ) : (
-                <div style={{ background: '#000', lineHeight: 0, position: 'relative' }}>
+                <div style={{ background: '#000', lineHeight: 0, position: 'relative', minHeight: 400 }}>
-                    <img
+                    <canvas
-                        ref={imgRef}
+                        ref={canvasRef}
-                        alt="Remote Desktop"
+                        style={{ width: '100%', height: 'auto', display: 'block' }}
-                        style={{ width: '100%', display: 'block', maxHeight: 640, objectFit: 'contain' }}
                     />
                     {status === 'connecting' && (
-                        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.7)', color: '#fff', fontSize: 14 }}>
+                        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.85)', color: '#fff', fontSize: 14 }}>
                             Verbinde…
                         </div>
                     )}