release: bump version to 0.1.1.9

Neue ZoomableImage-Komponente — reine RN-Implementation mit
PanResponder + Animated, ohne extra Dependency.

- 2-Finger-Pinch: Zoom 1x..5x, Focal-Point folgt der Geste
- 1-Finger-Pan: nur aktiv wenn gezoomt, mit Bounds-Clamping
- Doppel-Tap: Toggle 1x ↔ 2.5x

Vollbild-Modal ersetzt das simple <Image> durch ZoomableImage fuer
JPEG/PNG/etc. SVGs bleiben non-zoomable (SvgUri-Limitation), Tap
schliesst sie. Plus dedicated ✕-Close-Button oben rechts da Tap-to-
Close mit PanResponder kollidiert.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

android/android/app/build.gradle

@@ -79,8 +79,8 @@ android {
         applicationId "com.ariacockpit"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 10108
+        versionCode 10109
-        versionName "0.1.1.8"
+        versionName "0.1.1.9"
         // Fallback fuer Libraries mit Product Flavors
         missingDimensionStrategy 'react-native-camera', 'general'
     }

android/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aria-cockpit",
-  "version": "0.1.1.8",
+  "version": "0.1.1.9",
   "private": true,
   "scripts": {
     "android": "react-native run-android",

android/src/components/ZoomableImage.tsx

@@ -0,0 +1,142 @@
+/**
+ * ZoomableImage — Pinch-to-Zoom + Pan fuer das Vollbild-Modal.
+ *
+ * Reine React-Native-Implementation ohne externe Lib:
+ * - 1 Finger: Pan wenn schon gezoomt
+ * - 2 Finger: Pinch fuer Zoom + Pan
+ * - Doppel-Tap: Toggle 1x ↔ 2.5x Zoom
+ *
+ * Scale wird auf [1, 5] gecapped, Translation auf das verfuegbare
+ * Image-Volumen (kein Out-of-bounds-Pan).
+ */
+
+import React, { useRef } from 'react';
+import { Animated, PanResponder, View, StyleSheet, ImageStyle, StyleProp } from 'react-native';
+
+interface Props {
+  uri: string;
+  containerWidth: number;
+  containerHeight: number;
+  style?: StyleProp<ImageStyle>;
+}
+
+const ZoomableImage: React.FC<Props> = ({ uri, containerWidth, containerHeight, style }) => {
+  const scale = useRef(new Animated.Value(1)).current;
+  const translateX = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(new Animated.Value(0)).current;
+
+  // Aktuelle Werte (Animated.Value lesen ist async, wir tracken parallel)
+  const current = useRef({ scale: 1, x: 0, y: 0 }).current;
+  // State beim Geste-Start (touchStart-Snapshot)
+  const start = useRef({ scale: 1, x: 0, y: 0, distance: 0, focalX: 0, focalY: 0 }).current;
+  // Doppel-Tap-Erkennung
+  const lastTapAt = useRef(0);
+
+  const distance = (touches: any[]) => {
+    const [a, b] = touches;
+    return Math.hypot(a.pageX - b.pageX, a.pageY - b.pageY);
+  };
+
+  const focal = (touches: any[]) => {
+    const [a, b] = touches;
+    return { x: (a.pageX + b.pageX) / 2, y: (a.pageY + b.pageY) / 2 };
+  };
+
+  const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v));
+
+  const applyAndClamp = (newScale: number, newX: number, newY: number) => {
+    const s = clamp(newScale, 1, 5);
+    // Maximal-Translation: (imgSize * scale - imgSize) / 2
+    const maxX = Math.max(0, (containerWidth * s - containerWidth) / 2);
+    const maxY = Math.max(0, (containerHeight * s - containerHeight) / 2);
+    const x = clamp(newX, -maxX, maxX);
+    const y = clamp(newY, -maxY, maxY);
+    current.scale = s;
+    current.x = x;
+    current.y = y;
+    scale.setValue(s);
+    translateX.setValue(x);
+    translateY.setValue(y);
+  };
+
+  const responder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: (_e, gestureState) => {
+        const touches = gestureState as any;
+        const t = touches.numberActiveTouches || 1;
+        // Doppel-Tap-Erkennung (nur bei 1 Finger)
+        if (t === 1) {
+          const now = Date.now();
+          if (now - lastTapAt.current < 280) {
+            // Doppel-Tap → Zoom-Toggle
+            if (current.scale > 1.1) {
+              applyAndClamp(1, 0, 0);
+            } else {
+              applyAndClamp(2.5, 0, 0);
+            }
+            lastTapAt.current = 0;
+            return;
+          }
+          lastTapAt.current = now;
+        }
+        start.scale = current.scale;
+        start.x = current.x;
+        start.y = current.y;
+      },
+      onPanResponderMove: (e, gestureState) => {
+        const touches = e.nativeEvent.touches;
+        if (touches.length >= 2) {
+          // Pinch + Pan
+          if (start.distance === 0) {
+            // Initialisiere die Pinch-Referenz beim Uebergang 1→2 Finger
+            start.distance = distance(touches);
+            const f = focal(touches);
+            start.focalX = f.x;
+            start.focalY = f.y;
+            start.scale = current.scale;
+            start.x = current.x;
+            start.y = current.y;
+            return;
+          }
+          const newDistance = distance(touches);
+          const newFocal = focal(touches);
+          const scaleFactor = newDistance / start.distance;
+          const newScale = clamp(start.scale * scaleFactor, 1, 5);
+          // Pan-Anteil aus Focal-Bewegung
+          const newX = start.x + (newFocal.x - start.focalX);
+          const newY = start.y + (newFocal.y - start.focalY);
+          applyAndClamp(newScale, newX, newY);
+        } else if (touches.length === 1 && current.scale > 1.05) {
+          // Single-Finger-Pan nur wenn gezoomt
+          start.distance = 0; // Reset Pinch-Tracking
+          applyAndClamp(current.scale, start.x + gestureState.dx, start.y + gestureState.dy);
+        }
+      },
+      onPanResponderRelease: () => { start.distance = 0; },
+      onPanResponderTerminate: () => { start.distance = 0; },
+    }),
+  ).current;
+
+  return (
+    <View style={StyleSheet.absoluteFill} {...responder.panHandlers}>
+      <Animated.Image
+        source={{ uri }}
+        style={[
+          style,
+          {
+            transform: [
+              { translateX },
+              { translateY },
+              { scale },
+            ],
+          },
+        ]}
+        resizeMode="contain"
+      />
+    </View>
+  );
+};
+
+export default ZoomableImage;

android/src/screens/ChatScreen.tsx

@@ -26,6 +26,8 @@ import {
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import RNFS from 'react-native-fs';
 import { SvgUri } from 'react-native-svg';
+import { Dimensions } from 'react-native';
+import ZoomableImage from '../components/ZoomableImage';
 import rvs, { RVSMessage, ConnectionState } from '../services/rvs';
 import audioService from '../services/audio';
 import wakeWordService from '../services/wakeword';
@@ -1378,25 +1380,32 @@ const ChatScreen: React.FC = () => {
 
       {/* Bild-Vollbild Modal */}
       <Modal visible={!!fullscreenImage} transparent animationType="fade" onRequestClose={() => setFullscreenImage(null)}>
-        <TouchableOpacity
+        <View style={styles.fullscreenOverlay}>
-          style={styles.fullscreenOverlay}
-          activeOpacity={1}
-          onPress={() => setFullscreenImage(null)}
-        >
           {fullscreenImage && (
             /\.svg(?:\?|$)/i.test(fullscreenImage) ? (
-              <View style={styles.fullscreenImage}>
+              // SVG: bisher keine Pinch-Zoom — Tap zum Schliessen
+              <TouchableOpacity style={styles.fullscreenImage} activeOpacity={1} onPress={() => setFullscreenImage(null)}>
                 <SvgUri uri={fullscreenImage} width="100%" height="100%" preserveAspectRatio="xMidYMid meet" />
-              </View>
+              </TouchableOpacity>
             ) : (
-              <Image
+              // Pixel-Bild: Pinch-Zoom + Pan ueber ZoomableImage
-                source={{ uri: fullscreenImage }}
+              <ZoomableImage
+                uri={fullscreenImage}
+                containerWidth={Dimensions.get('window').width}
+                containerHeight={Dimensions.get('window').height}
                 style={styles.fullscreenImage}
-                resizeMode="contain"
               />
             )
           )}
+          {/* Close-Button oben rechts — die TouchableOpacity-uebergreifend funktioniert
+              wegen ZoomableImage-PanResponder nicht zuverlaessig fuer Tap-to-Close */}
+          <TouchableOpacity
+            style={{ position: 'absolute', top: 32, right: 16, padding: 12, backgroundColor: 'rgba(0,0,0,0.5)', borderRadius: 24 }}
+            onPress={() => setFullscreenImage(null)}
+          >
+            <Text style={{ color: '#FFF', fontSize: 22 }}>{'✕'}</Text>
           </TouchableOpacity>
+        </View>
       </Modal>
 
       {/* Datei-Upload Modal */}

diagnostic/index.html

@@ -1098,10 +1098,23 @@
           chatBox.innerHTML = '';
           if (msg.messages && msg.messages.length > 0) {
             for (const m of msg.messages) {
+              if (m.type === 'aria_file') {
+                // ARIA-Datei-Bubble rekonstruieren (statt addAriaFile damit
+                // kein Auto-Scroll-Race waehrend des Bulk-Loads)
+                addAriaFile({ serverPath: m.serverPath, name: m.name, mimeType: m.mimeType, size: m.size });
+                continue;
+              }
               const el = document.createElement('div');
               el.className = `chat-msg ${m.type}`;
-              const escaped = escapeHtml(m.text);
+              // [FILE: ...]-Marker rausfiltern (gleicher Filter wie addChat)
-              const linked = linkifyText(escaped);
+              const cleaned = (m.text || '').replace(/\[FILE:\s*\/shared\/uploads\/[^\]]+\]/gi, '').replace(/\n{3,}/g, '\n\n').trim();
+              const escaped = escapeHtml(cleaned);
+              let linked = linkifyText(escaped);
+              // /shared/uploads/-Bildpfade auch im History inline rendern
+              // (gleicher Replace wie in addChat — sonst sieht man nach F5 nur Text-Pfade)
+              linked = linked.replace(/\/shared\/uploads\/[^\s<"]+\.(jpg|jpeg|png|gif|webp|svg|bmp)/gi, (match) => {
+                return `<a href="${match}" target="_blank">${match}</a><img src="${match}" class="chat-media" onclick="openLightbox('image','${match}')" onerror="this.style.display='none'">`;
+              });
               const time = m.ts ? new Date(m.ts).toLocaleTimeString('de-DE') : '?';
               el.innerHTML = `${linked}<div class="meta">${escapeHtml(m.meta)} — ${time}</div>`;
               chatBox.appendChild(el);

diagnostic/server.js

@@ -2231,7 +2231,35 @@ async function handleLoadChatHistory(clientWs) {
         } else if (role === "assistant") {
           // Reply-Prefix entfernen: "[[reply_to_current]] "
           text = text.replace(/^\[\[reply_to_\w+\]\]\s*/g, "").trim();
-          if (text) chatMessages.push({ type: "received", text, meta: "chat:final", ts: msg.timestamp || obj.timestamp || 0 });
+          const ts = msg.timestamp || obj.timestamp || 0;
+          // ARIA-File-Marker aus dem Text parsen — pro existierender Datei
+          // eine separate file_from_aria-aehnliche Message einfuegen damit die
+          // Anhang-Bubble nach Browser-Refresh wieder erscheint.
+          const fileRe = /\[FILE:\s*(\/shared\/uploads\/[^\]]+?)\s*\]/gi;
+          let m;
+          while ((m = fileRe.exec(text)) !== null) {
+            const p = m[1].trim();
+            try {
+              if (fs.existsSync(p)) {
+                const st = fs.statSync(p);
+                const ext = path.extname(p).toLowerCase();
+                const mimeMap = { ".jpg": "image/jpeg", ".jpeg": "image/jpeg", ".png": "image/png", ".gif": "image/gif",
+                                  ".webp": "image/webp", ".svg": "image/svg+xml", ".pdf": "application/pdf",
+                                  ".mp3": "audio/mpeg", ".mid": "audio/midi", ".midi": "audio/midi",
+                                  ".wav": "audio/wav", ".txt": "text/plain", ".md": "text/markdown",
+                                  ".json": "application/json", ".zip": "application/zip" };
+                chatMessages.push({
+                  type: "aria_file",
+                  serverPath: p,
+                  name: path.basename(p),
+                  mimeType: mimeMap[ext] || "application/octet-stream",
+                  size: st.size,
+                  ts,
+                });
+              }
+            } catch {}
+          }
+          if (text) chatMessages.push({ type: "received", text, meta: "chat:final", ts });
         }
       } catch {}
     }