feat: Workspace-Umbau Schritt 7 — VNC-Live-Desktop durch RVS getunnelt

QEMU-VNC erscheint live in der App-Desktop-Kachel, komplett ueber RVS:
- Bridge: TCP↔RVS-VNC-Bruecke. vnc_open oeffnet asyncio-Verbindung zu
  host.docker.internal:5901, Reader-Loop streamt RFB-Bytes als vnc_data;
  vnc_input schreibt zurueck; vnc_close raeumt auf. check_desktop probt den
  Port und meldet desktop_status. Base64-in-JSON, kein websockify/noVNC auf
  dem Host noetig.
- App: novncHtml.ts laedt noVNC (CDN) und ersetzt window.WebSocket durch einen
  Shim, der RFB-Bytes per postMessage ueber RVS brueckt (server-speaks-first →
  timing-robust). VncTile mountet die WebView nur im Fokus, oeffnet bei 'ready'
  den Tunnel (desktop.openVnc), speist Server-Bytes ein und schickt Eingaben
  als vnc_input; beim Verlassen wird der Tunnel geschlossen (VM laeuft weiter).

tsc/py clean.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

android/src/workspace/tiles/VncTile.tsx

@@ -1,31 +1,105 @@
 /**
  * VncTile — Live-Desktop der QEMU-VM (noVNC in einer WebView, RFB durch RVS).
- * Platzhalter fuer Commit 4; der noVNC-Tunnel folgt in Commit 7.
+ *
+ * Nur im Fokus aktiv: dann wird die WebView gemountet, bei 'ready' der
+ * RVS-VNC-Tunnel geoeffnet (desktop.openVnc). Server-Bytes (vnc_data) werden in
+ * die WebView injiziert, RFB-Bytes der WebView (vnc_send) gehen als vnc_input
+ * zurueck. Verlaesst man die Kachel, wird der Tunnel geschlossen (die VM laeuft
+ * auf dem Host weiter).
  */
 
-import React from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import desktop from '../../services/desktop';
+import { NOVNC_HTML } from '../assets/novncHtml';
 
 interface Props {
   projectId: string;
   focused: boolean;
 }
 
-const VncTile: React.FC<Props> = () => {
+const VncTile: React.FC<Props> = ({ projectId, focused }) => {
+  const webRef = useRef<WebView>(null);
+  const [status, setStatus] = useState<'idle' | 'connecting' | 'connected' | 'disconnected'>('idle');
+  const unsubDataRef = useRef<null | (() => void)>(null);
+
+  // Aufraeumen: Tunnel zu + Daten-Abo weg.
+  const teardown = useCallback(() => {
+    if (unsubDataRef.current) { unsubDataRef.current(); unsubDataRef.current = null; }
+    desktop.closeVnc();
+  }, []);
+
+  // Fokus verloren / Unmount → Tunnel schliessen.
+  useEffect(() => {
+    if (!focused) { teardown(); setStatus('idle'); }
+    return () => teardown();
+  }, [focused, teardown]);
+
+  const onMessage = useCallback((e: WebViewMessageEvent) => {
+    let m: any;
+    try { m = JSON.parse(e.nativeEvent.data); } catch { return; }
+    if (m.event === 'ready') {
+      // WebView + RFB bereit → Tunnel oeffnen und Server-Bytes einspeisen.
+      setStatus('connecting');
+      unsubDataRef.current = desktop.onVncData((b64) => {
+        const js = `window.ariaVnc && window.ariaVnc.onData(${JSON.stringify(b64)}); true;`;
+        webRef.current?.injectJavaScript(js);
+      });
+      desktop.openVnc(projectId);
+    } else if (m.event === 'vnc_send') {
+      desktop.sendInput(m.b64);
+    } else if (m.event === 'vnc_close') {
+      desktop.closeVnc();
+    } else if (m.event === 'vnc_state') {
+      if (m.state === 'connected') setStatus('connected');
+      else if (m.state === 'disconnected') setStatus('disconnected');
+    }
+  }, [projectId]);
+
+  if (!focused) {
+    return (
+      <View style={styles.placeholder}>
+        <Text style={styles.icon}>🖥️</Text>
+        <Text style={styles.text}>Desktop</Text>
+        <Text style={styles.sub}>Antippen zum Verbinden</Text>
+      </View>
+    );
+  }
+
   return (
     <View style={styles.container}>
-      <Text style={styles.icon}>🖥️</Text>
-      <Text style={styles.text}>Desktop</Text>
-      <Text style={styles.sub}>Kein Desktop verbunden</Text>
+      <WebView
+        ref={webRef}
+        style={styles.web}
+        originWhitelist={['*']}
+        source={{ html: NOVNC_HTML, baseUrl: 'https://aria-vnc.local/' }}
+        onMessage={onMessage}
+        javaScriptEnabled
+        domStorageEnabled
+        mixedContentMode="always"
+        androidLayerType="hardware"
+      />
+      {status !== 'connected' && (
+        <View style={styles.overlay} pointerEvents="none">
+          <Text style={styles.overlayText}>
+            {status === 'connecting' ? 'Verbinde …' : status === 'disconnected' ? 'Getrennt' : ''}
+          </Text>
+        </View>
+      )}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: '#000000', alignItems: 'center', justifyContent: 'center' },
+  container: { flex: 1, backgroundColor: '#000000' },
+  web: { flex: 1, backgroundColor: '#000000' },
+  placeholder: { flex: 1, backgroundColor: '#000000', alignItems: 'center', justifyContent: 'center' },
   icon: { fontSize: 64, marginBottom: 16 },
   text: { color: '#FFFFFF', fontSize: 18, fontWeight: '700' },
   sub: { color: '#9090B0', fontSize: 14, marginTop: 8 },
+  overlay: { position: 'absolute', top: 10, left: 0, right: 0, alignItems: 'center' },
+  overlayText: { color: '#9090B0', fontSize: 12, backgroundColor: 'rgba(0,0,0,0.6)', paddingHorizontal: 10, paddingVertical: 4, borderRadius: 10, overflow: 'hidden' },
 });
 
 export default VncTile;