@cachly-dev/mcp-server 0.10.56 → 0.10.58

package/apps/travel-chaos-organizer/frontend/components/SwipeableTimelineItem.tsx

@@ -0,0 +1,70 @@
+/**
+ * Timeline item with swipe-left-to-delete gesture.
+ * Mirrors SwipeableInboxItem pattern for consistent UX.
+ */
+import { useRef } from "react";
+import { Animated, PanResponder, StyleSheet, Text, View } from "react-native";
+import { TripItem } from "../lib/api";
+import TimelineItem from "./TimelineItem";
+import { haptics } from "../lib/haptics";
+
+const SWIPE_THRESHOLD = 80;
+const ACTION_WIDTH = 72;
+
+type Props = {
+  item: TripItem;
+  onDelete: () => void;
+};
+
+export default function SwipeableTimelineItem({ item, onDelete }: Props) {
+  const translateX = useRef(new Animated.Value(0)).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 8 && Math.abs(g.dy) < 20,
+      onPanResponderMove: (_, g) => {
+        // Only allow swipe left (negative dx)
+        const clamped = Math.min(0, Math.max(-ACTION_WIDTH * 1.5, g.dx));
+        translateX.setValue(clamped);
+      },
+      onPanResponderRelease: async (_, g) => {
+        if (g.dx < -SWIPE_THRESHOLD) {
+          await haptics.warning();
+          snapBack();
+          onDelete();
+        } else {
+          snapBack();
+        }
+      },
+    })
+  ).current;
+
+  function snapBack() {
+    Animated.spring(translateX, { toValue: 0, useNativeDriver: true, damping: 15 }).start();
+  }
+
+  return (
+    <View style={s.wrapper}>
+      {/* Right action — delete (revealed by swipe left) */}
+      <View style={s.deleteAction}>
+        <Text style={s.deleteIcon}>🗑️</Text>
+        <Text style={s.deleteLabel}>Löschen</Text>
+      </View>
+
+      <Animated.View style={{ transform: [{ translateX }] }} {...panResponder.panHandlers}>
+        <TimelineItem item={item} />
+      </Animated.View>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  wrapper: { position: "relative" },
+  deleteAction: {
+    position: "absolute", top: 0, bottom: 8, right: 0,
+    width: ACTION_WIDTH, alignItems: "center", justifyContent: "center",
+    backgroundColor: "#dc262633", borderRadius: 14, gap: 4,
+  },
+  deleteIcon: { fontSize: 20 },
+  deleteLabel: { color: "#fff", fontSize: 11, fontWeight: "600" },
+});

package/apps/travel-chaos-organizer/frontend/components/TimelineItem.tsx

@@ -0,0 +1,73 @@
+import { StyleSheet, Text, View } from "react-native";
+import { format, parseISO } from "date-fns";
+import { de } from "date-fns/locale";
+import { TripItem } from "../lib/api";
+import QRCodeViewer from "./QRCodeViewer";
+
+const TYPE_ICONS: Record<string, string> = {
+  flight: "✈️", train: "🚂", bus: "🚌", hotel: "🏨",
+  rental_car: "🚗", activity: "🎡", transfer: "🚕", document: "📄", other: "📋",
+};
+
+const TYPE_COLORS: Record<string, string> = {
+  flight: "#4f46e5", train: "#0891b2", bus: "#059669", hotel: "#d97706",
+  rental_car: "#7c3aed", activity: "#db2777", transfer: "#6366f1", document: "#64748b", other: "#475569",
+};
+
+type Props = { item: TripItem };
+
+export default function TimelineItem({ item }: Props) {
+  const color = TYPE_COLORS[item.type] ?? TYPE_COLORS.other;
+  const icon = TYPE_ICONS[item.type] ?? TYPE_ICONS.other;
+  const parsed = item.parsed_data as Record<string, unknown> | null;
+
+  return (
+    <View style={s.row}>
+      <View style={s.line}>
+        <View style={[s.dot, { backgroundColor: color }]} />
+        <View style={s.connector} />
+      </View>
+
+      <View style={s.card}>
+        <View style={s.cardTop}>
+          <Text style={s.icon}>{icon}</Text>
+          <View style={s.cardMeta}>
+            <Text style={s.title} numberOfLines={2}>{item.title}</Text>
+            {item.event_at && (
+              <Text style={s.time}>
+                {format(parseISO(item.event_at), "EEE dd. MMM, HH:mm", { locale: de })}
+              </Text>
+            )}
+          </View>
+        </View>
+
+        <View style={s.details}>
+          {!!parsed?.origin && !!parsed?.destination && (
+            <Text style={s.route}>{parsed.origin as string} → {parsed.destination as string}</Text>
+          )}
+          {item.provider && <Text style={s.chip}>{item.provider}</Text>}
+          {item.booking_ref && (
+            <QRCodeViewer bookingRef={item.booking_ref} title={item.title} />
+          )}
+          {!!parsed?.price && <Text style={s.chip}>{parsed.price as string}</Text>}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  row: { flexDirection: "row", gap: 12, paddingBottom: 2 },
+  line: { alignItems: "center", width: 24 },
+  dot: { width: 12, height: 12, borderRadius: 6, marginTop: 18 },
+  connector: { flex: 1, width: 2, backgroundColor: "#2a2a4e", marginTop: 2 },
+  card: { flex: 1, backgroundColor: "#1a1a2e", borderRadius: 14, padding: 14, marginBottom: 8, borderWidth: 1, borderColor: "#2a2a4e", gap: 8 },
+  cardTop: { flexDirection: "row", gap: 10, alignItems: "flex-start" },
+  icon: { fontSize: 22, marginTop: 2 },
+  cardMeta: { flex: 1, gap: 2 },
+  title: { color: "#fff", fontSize: 15, fontWeight: "600", lineHeight: 20 },
+  time: { color: "#6666aa", fontSize: 12 },
+  details: { flexDirection: "row", flexWrap: "wrap", gap: 6 },
+  route: { color: "#a5b4fc", fontSize: 13, width: "100%" },
+  chip: { backgroundColor: "#0f0f1a", borderRadius: 6, paddingHorizontal: 8, paddingVertical: 3, color: "#8888aa", fontSize: 12 },
+});

package/apps/travel-chaos-organizer/frontend/components/TimelineItemDetail.tsx

@@ -0,0 +1,130 @@
+/**
+ * Full-detail bottom sheet for a timeline item.
+ * Shows all parsed fields: route, passengers, price, raw_summary, booking_ref.
+ */
+import { ScrollView, StyleSheet, Text, View } from "react-native";
+import { format, parseISO } from "date-fns";
+import { de } from "date-fns/locale";
+import BottomSheet from "./BottomSheet";
+import QRCodeViewer from "./QRCodeViewer";
+import { TripItem } from "../lib/api";
+
+const TYPE_LABELS: Record<string, string> = {
+  flight: "Flug", train: "Zug", bus: "Bus", hotel: "Hotel",
+  rental_car: "Mietwagen", activity: "Aktivität", transfer: "Transfer",
+  document: "Dokument", other: "Sonstiges",
+};
+
+type Props = {
+  item: TripItem | null;
+  onClose: () => void;
+};
+
+function eventLabels(type: string): { start: string; end: string } {
+  const map: Record<string, { start: string; end: string }> = {
+    flight:     { start: "Abflug",   end: "Ankunft" },
+    train:      { start: "Abfahrt",  end: "Ankunft" },
+    bus:        { start: "Abfahrt",  end: "Ankunft" },
+    hotel:      { start: "Check-in", end: "Check-out" },
+    rental_car: { start: "Abholung", end: "Rückgabe" },
+    activity:   { start: "Beginn",   end: "Ende" },
+    transfer:   { start: "Abholung", end: "Ankunft" },
+  };
+  return map[type] ?? { start: "Beginn", end: "Ende" };
+}
+
+export default function TimelineItemDetail({ item, onClose }: Props) {
+  if (!item) return null;
+  const parsed = item.parsed_data as Record<string, unknown> | null;
+
+  function fmtDate(iso: string | null | undefined): string {
+    if (!iso) return "—";
+    try {
+      return format(parseISO(iso), "EEE dd. MMM yyyy, HH:mm", { locale: de });
+    } catch {
+      return iso;
+    }
+  }
+
+  return (
+    <BottomSheet visible={!!item} onClose={onClose} heightFraction={0.75}>
+      <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
+        {/* Header */}
+        <View style={s.header}>
+          <View style={s.typePill}>
+            <Text style={s.typeText}>{TYPE_LABELS[item.type] ?? item.type}</Text>
+          </View>
+          {item.provider && <Text style={s.provider}>{item.provider}</Text>}
+        </View>
+
+        <Text style={s.title}>{item.title}</Text>
+
+        {/* Core details */}
+        <View style={s.section}>
+          {item.event_at && <DetailRow label={eventLabels(item.type).start} value={fmtDate(item.event_at)} />}
+          {item.event_end_at && <DetailRow label={eventLabels(item.type).end} value={fmtDate(item.event_end_at)} />}
+          {!!parsed?.origin && !!parsed?.destination && (
+            <DetailRow label="Route" value={`${parsed.origin as string} → ${parsed.destination as string}`} />
+          )}
+          {item.booking_ref && <DetailRow label="Buchungsnr." value={item.booking_ref} mono />}
+          {!!parsed?.confirmation_number && (
+            <DetailRow label="Bestätigungsnr." value={parsed.confirmation_number as string} mono />
+          )}
+          {!!parsed?.price && <DetailRow label="Preis" value={parsed.price as string} />}
+          {!!parsed?.passengers && Array.isArray(parsed.passengers) && parsed.passengers.length > 0 && (
+            <DetailRow label="Passagiere" value={(parsed.passengers as string[]).join(", ")} />
+          )}
+        </View>
+
+        {/* Summary */}
+        {!!parsed?.raw_summary && (
+          <View style={s.summaryBox}>
+            <Text style={s.summaryLabel}>Zusammenfassung</Text>
+            <Text style={s.summaryText}>{parsed.raw_summary as string}</Text>
+          </View>
+        )}
+
+        {/* QR code */}
+        {item.booking_ref && (
+          <View style={s.qrRow}>
+            <QRCodeViewer bookingRef={item.booking_ref} title={item.title} />
+          </View>
+        )}
+
+        {/* Confidence */}
+        {typeof parsed?.confidence === "number" && (
+          <Text style={s.confidence}>
+            KI-Konfidenz: {Math.round((parsed.confidence as number) * 100)}%
+          </Text>
+        )}
+      </ScrollView>
+    </BottomSheet>
+  );
+}
+
+function DetailRow({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
+  return (
+    <View style={s.row}>
+      <Text style={s.rowLabel}>{label}</Text>
+      <Text style={[s.rowValue, mono && s.mono]} numberOfLines={2}>{value}</Text>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  header: { flexDirection: "row", alignItems: "center", gap: 8, marginBottom: 8 },
+  typePill: { backgroundColor: "#4f46e522", borderRadius: 6, paddingHorizontal: 8, paddingVertical: 3, borderWidth: 1, borderColor: "#4f46e544" },
+  typeText: { color: "#a5b4fc", fontSize: 12, fontWeight: "600" },
+  provider: { color: "#6666aa", fontSize: 13 },
+  title: { fontSize: 18, fontWeight: "700", color: "#fff", marginBottom: 16, lineHeight: 24 },
+  section: { backgroundColor: "#0f0f1a", borderRadius: 12, padding: 4, marginBottom: 14, borderWidth: 1, borderColor: "#2a2a4e" },
+  row: { flexDirection: "row", justifyContent: "space-between", alignItems: "flex-start", paddingVertical: 10, paddingHorizontal: 12, gap: 12 },
+  rowLabel: { color: "#6666aa", fontSize: 13, flex: 1 },
+  rowValue: { color: "#e2e8f0", fontSize: 13, flex: 2, textAlign: "right" },
+  mono: { fontFamily: "monospace", color: "#a5b4fc" },
+  summaryBox: { backgroundColor: "#1a1a2e", borderRadius: 12, padding: 14, marginBottom: 14, borderWidth: 1, borderColor: "#2a2a4e" },
+  summaryLabel: { color: "#6666aa", fontSize: 11, fontWeight: "600", letterSpacing: 0.5, textTransform: "uppercase", marginBottom: 6 },
+  summaryText: { color: "#c4b5fd", fontSize: 13, lineHeight: 20 },
+  qrRow: { alignItems: "flex-start", marginBottom: 14 },
+  confidence: { color: "#3a3a5e", fontSize: 11, textAlign: "right", marginBottom: 8 },
+});

package/apps/travel-chaos-organizer/frontend/components/Toast.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useRef } from "react";
+import { Animated, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ToastItem } from "./ToastContext";
+
+// exported so ToastContext can import the type
+export type { ToastItem };
+
+const ICONS = { success: "✓", error: "✗", warning: "⚠", info: "ℹ" };
+const COLORS = {
+  success: { border: "#34d399", bg: "#34d39915", text: "#34d399" },
+  error:   { border: "#f87171", bg: "#f8717115", text: "#f87171" },
+  warning: { border: "#fbbf24", bg: "#fbbf2415", text: "#fbbf24" },
+  info:    { border: "#60a5fa", bg: "#60a5fa15", text: "#60a5fa" },
+};
+
+function SingleToast({ toast, onDone }: { toast: ToastItem; onDone: (id: string) => void }) {
+  const translateY = useRef(new Animated.Value(-72)).current;
+  const opacity    = useRef(new Animated.Value(0)).current;
+  const c = COLORS[toast.type];
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.spring(translateY, { toValue: 0, useNativeDriver: true, damping: 20, stiffness: 220 }),
+      Animated.timing(opacity,    { toValue: 1, duration: 180, useNativeDriver: true }),
+    ]).start();
+
+    const timer = setTimeout(() => {
+      Animated.parallel([
+        Animated.timing(translateY, { toValue: -72, duration: 220, useNativeDriver: true }),
+        Animated.timing(opacity,    { toValue: 0,   duration: 200, useNativeDriver: true }),
+      ]).start(() => onDone(toast.id));
+    }, toast.duration ?? 3500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <Animated.View style={[s.toast, { borderColor: c.border, backgroundColor: c.bg, opacity, transform: [{ translateY }] }]}>
+      <Text style={[s.icon, { color: c.text }]}>{ICONS[toast.type]}</Text>
+      <Text style={[s.msg, { color: c.text }]} numberOfLines={3}>{toast.message}</Text>
+    </Animated.View>
+  );
+}
+
+export default function ToastRenderer({ toasts, remove }: { toasts: ToastItem[]; remove: (id: string) => void }) {
+  const insets = useSafeAreaInsets();
+  return (
+    <View style={[s.container, { top: insets.top + 12 }]} pointerEvents="none">
+      {toasts.slice(0, 3).map(t => <SingleToast key={t.id} toast={t} onDone={remove} />)}
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  container: { position: "absolute", left: 16, right: 16, zIndex: 9999, gap: 8 },
+  toast: { flexDirection: "row", alignItems: "center", gap: 10, padding: 14, borderRadius: 12, borderWidth: 1 },
+  icon: { fontSize: 16, fontWeight: "700", flexShrink: 0 },
+  msg:  { fontSize: 14, flex: 1, fontWeight: "500", lineHeight: 19 },
+});

package/apps/travel-chaos-organizer/frontend/components/ToastContext.tsx

@@ -0,0 +1,42 @@
+import { createContext, ReactNode, useCallback, useContext, useRef, useState } from "react";
+import ToastRenderer from "./Toast";
+
+export type ToastType = "success" | "error" | "warning" | "info";
+export interface ToastItem {
+  id: string;
+  message: string;
+  type: ToastType;
+  duration?: number;
+}
+
+interface ToastCtx {
+  showToast: (message: string, type?: ToastType, duration?: number) => void;
+}
+
+const Ctx = createContext<ToastCtx>({ showToast: () => {} });
+
+let _counter = 0;
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+
+  const showToast = useCallback((message: string, type: ToastType = "info", duration?: number) => {
+    const id = String(++_counter);
+    setToasts(prev => [...prev, { id, message, type, duration }]);
+  }, []);
+
+  const remove = useCallback((id: string) => {
+    setToasts(prev => prev.filter(t => t.id !== id));
+  }, []);
+
+  return (
+    <Ctx.Provider value={{ showToast }}>
+      {children}
+      <ToastRenderer toasts={toasts} remove={remove} />
+    </Ctx.Provider>
+  );
+}
+
+export function useToast() {
+  return useContext(Ctx);
+}

package/apps/travel-chaos-organizer/frontend/components/TripCard.tsx

@@ -0,0 +1,146 @@
+import { useEffect, useRef } from "react";
+import { Animated, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { format, parseISO, differenceInDays } from "date-fns";
+import { de } from "date-fns/locale";
+import { Trip } from "../lib/api";
+import { haptics } from "../lib/haptics";
+import ScoreRing from "./ScoreRing";
+
+type Props = {
+  trip: Trip;
+  onPress: () => void;
+  onLongPress?: () => void;
+  score?: number;
+};
+
+export default function TripCard({ trip, onPress, onLongPress, score }: Props) {
+  const start = trip.start_date ? parseISO(trip.start_date) : null;
+  const end = trip.end_date ? parseISO(trip.end_date) : null;
+  const duration = start && end ? differenceInDays(end, start) : null;
+  const today = new Date();
+  const isActive = start && end && start <= today && today <= end;
+  const daysUntil = start && start > today ? differenceInDays(start, today) : null;
+  const isUpcoming = start && start > today;
+  const isPast = end && end < today;
+
+  const pulseAnim = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (isActive) {
+      const loop = Animated.loop(
+        Animated.sequence([
+          Animated.timing(pulseAnim, { toValue: 0.4, duration: 800, useNativeDriver: true }),
+          Animated.timing(pulseAnim, { toValue: 1, duration: 800, useNativeDriver: true }),
+        ])
+      );
+      loop.start();
+      return () => loop.stop();
+    }
+  }, [isActive]);
+
+  async function handleLongPress() {
+    if (onLongPress) {
+      await haptics.confirm();
+      onLongPress();
+    }
+  }
+
+  function getBadgeText(): string {
+    if (isActive) return "✈️ Jetzt auf Reise";
+    if (daysUntil !== null) {
+      if (daysUntil === 0) return "🚀 Heute!";
+      if (daysUntil === 1) return "✈️ Morgen!";
+      if (daysUntil <= 7) return `✈️ in ${daysUntil} Tagen`;
+      if (daysUntil <= 30) return `🗓️ in ${daysUntil} Tagen`;
+    }
+    if (isUpcoming) return "Geplant";
+    if (isPast) return "Vorbei";
+    return "Aktuell";
+  }
+
+  const badgeText = getBadgeText();
+  const isCloseCountdown = daysUntil !== null && daysUntil <= 7;
+
+  return (
+    <TouchableOpacity
+      style={[s.card, isActive && s.cardActive]}
+      onPress={onPress}
+      onLongPress={handleLongPress}
+      activeOpacity={0.8}
+      accessibilityLabel={`Trip: ${trip.name}`}
+      accessibilityRole="button"
+      accessibilityHint={onLongPress ? "Gedrückt halten zum Bearbeiten" : undefined}
+    >
+      <View style={s.row}>
+        <View style={s.info}>
+          <Text style={s.name} numberOfLines={1}>{trip.name}</Text>
+          {start && (
+            <Text style={s.dates}>
+              {format(start, "dd. MMM", { locale: de })}
+              {end ? ` → ${format(end, "dd. MMM yyyy", { locale: de })}` : ""}
+              {duration !== null ? `  ·  ${duration} Tage` : ""}
+            </Text>
+          )}
+          {!start && <Text style={s.dates}>Kein Datum gesetzt</Text>}
+        </View>
+        <View style={s.badgeRow}>
+          {isActive && (
+            <Animated.View style={[s.pulseDot, { opacity: pulseAnim }]} />
+          )}
+          <View style={[
+            s.badge,
+            isActive && s.badgeActive,
+            isUpcoming && !isActive && s.badgeUpcoming,
+            isPast && s.badgePast,
+          ]}>
+            <Text style={[
+              s.badgeText,
+              isActive && s.badgeTextActive,
+              isCloseCountdown && s.badgeTextCountdown,
+            ]}>
+              {badgeText}
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View style={s.footer}>
+        <View style={s.footerLeft}>
+          {trip.description
+            ? <Text style={s.desc} numberOfLines={1}>{trip.description}</Text>
+            : null}
+          {onLongPress && <Text style={s.editHint}>Gedrückt halten zum Bearbeiten</Text>}
+        </View>
+        {score !== undefined && (
+          <View style={s.scoreWrap}>
+            <ScoreRing score={score} size={38} />
+            {score === 100 && <Text style={s.scoreComplete}>✓</Text>}
+          </View>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const s = StyleSheet.create({
+  card: { backgroundColor: "#1a1a2e", borderRadius: 16, padding: 18, borderWidth: 1, borderColor: "#2a2a4e", gap: 6 },
+  cardActive: { borderLeftWidth: 4, borderLeftColor: "#4f46e5" },
+  row: { flexDirection: "row", alignItems: "flex-start", gap: 12 },
+  info: { flex: 1, gap: 4 },
+  name: { color: "#fff", fontSize: 17, fontWeight: "700" },
+  dates: { color: "#6666aa", fontSize: 13 },
+  desc: { color: "#8888aa", fontSize: 13 },
+  badgeRow: { flexDirection: "row", alignItems: "center", gap: 6 },
+  pulseDot: { width: 8, height: 8, borderRadius: 4, backgroundColor: "#a5b4fc" },
+  badge: { backgroundColor: "#2a2a4e", borderRadius: 6, paddingHorizontal: 8, paddingVertical: 3 },
+  badgeActive: { backgroundColor: "#4f46e5" },
+  badgeUpcoming: { backgroundColor: "#4f46e522", borderWidth: 1, borderColor: "#4f46e5" },
+  badgePast: { backgroundColor: "#1a1a1a" },
+  badgeText: { color: "#a5b4fc", fontSize: 12, fontWeight: "500" },
+  badgeTextActive: { color: "#fff" },
+  badgeTextCountdown: { color: "#a5b4fc", fontWeight: "700" },
+  editHint: { color: "#3a3a5e", fontSize: 11 },
+  footer: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8 },
+  footerLeft: { flex: 1, gap: 2 },
+  scoreWrap: { alignItems: "center", justifyContent: "center" },
+  scoreComplete: { position: "absolute", color: "#10b981", fontSize: 14, fontWeight: "800" },
+});

package/apps/travel-chaos-organizer/frontend/components/TripQRModal.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from "react";
+import {
+  Modal, StyleSheet, Text, TouchableOpacity, View, Share, ActivityIndicator,
+} from "react-native";
+// @ts-ignore — added in Phase 3 deps
+import QRCode from "react-native-qrcode-svg";
+
+type Props = {
+  tripId: string;
+  tripName: string;
+  visible: boolean;
+  onClose: () => void;
+};
+
+export function TripQRModal({ tripId, tripName, visible, onClose }: Props) {
+  const deepLink = `tco://trips/${tripId}`;
+  const [qrReady, setQrReady] = useState(false);
+
+  useEffect(() => {
+    if (visible) {
+      // Defer QR generation until after the modal animation frame
+      const id = requestAnimationFrame(() => setQrReady(true));
+      return () => { cancelAnimationFrame(id); setQrReady(false); };
+    } else {
+      setQrReady(false);
+    }
+  }, [visible]);
+
+  async function handleShare() {
+    await Share.share({
+      message: `Mein Trip "${tripName}" in Travel Chaos Organizer: ${deepLink}`,
+    });
+  }
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
+      <View style={s.overlay}>
+        <View style={s.card}>
+          <Text style={s.title}>{tripName}</Text>
+          <Text style={s.sub}>QR-Code zum Teilen</Text>
+          <View style={s.qrBox}>
+            {qrReady
+              ? <QRCode value={deepLink} size={180} color="#fff" backgroundColor="#1a1a2e" />
+              : <ActivityIndicator color="#4f46e5" size="large" style={{ width: 180, height: 180 }} />}
+          </View>
+          <Text style={s.link}>{deepLink}</Text>
+          <TouchableOpacity style={s.shareBtn} onPress={handleShare} activeOpacity={0.8} accessibilityLabel="Teilen" accessibilityRole="button">
+            <Text style={s.shareBtnText}>Teilen</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={s.closeBtn} onPress={onClose} accessibilityLabel="Schließen" accessibilityRole="button">
+            <Text style={s.closeBtnText}>Schließen</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const s = StyleSheet.create({
+  overlay: { flex: 1, backgroundColor: "#000000aa", justifyContent: "center", alignItems: "center" },
+  card: { backgroundColor: "#1a1a2e", borderRadius: 24, padding: 28, alignItems: "center", width: 300, gap: 12 },
+  title: { fontSize: 18, fontWeight: "800", color: "#fff", textAlign: "center" },
+  sub: { fontSize: 12, color: "#6666aa" },
+  qrBox: { backgroundColor: "#1a1a2e", padding: 16, borderRadius: 16, borderWidth: 1, borderColor: "#2a2a4a" },
+  link: { fontSize: 11, color: "#6666aa", fontFamily: "monospace" },
+  shareBtn: { backgroundColor: "#4f46e5", paddingVertical: 12, paddingHorizontal: 32, borderRadius: 12, width: "100%", alignItems: "center" },
+  shareBtnText: { color: "#fff", fontWeight: "700", fontSize: 15 },
+  closeBtn: { paddingVertical: 8 },
+  closeBtnText: { color: "#6666aa", fontSize: 14 },
+});

package/apps/travel-chaos-organizer/frontend/components/UpgradeBanner.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity, View, Linking } from "react-native";
+import { useQuota } from "../lib/quota";
+
+export function UpgradeBanner() {
+  const { plan, isPro } = useQuota();
+  if (isPro || !plan) return null;
+
+  return (
+    <View style={s.banner}>
+      <Text style={s.text}>
+        Free Plan · {plan.free_daily_parses} Parses/Tag · {plan.free_max_trips} Trips
+      </Text>
+      <TouchableOpacity
+        style={s.btn}
+        onPress={() => Linking.openURL(process.env.EXPO_PUBLIC_UPGRADE_URL ?? "https://tco.app/upgrade")}
+        activeOpacity={0.8}
+      >
+        <Text style={s.btnText}>Pro ✦</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  banner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: "#1a1a2e",
+    borderBottomWidth: 1,
+    borderBottomColor: "#2a2a4a",
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  text: { color: "#6666aa", fontSize: 12 },
+  btn: {
+    backgroundColor: "#4f46e5",
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 8,
+  },
+  btnText: { color: "#fff", fontSize: 12, fontWeight: "700" },
+});

package/apps/travel-chaos-organizer/frontend/eas.json

@@ -0,0 +1,22 @@
+{
+  "cli": {
+    "version": ">= 7.0.0"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal",
+      "channel": "preview"
+    },
+    "production": {
+      "channel": "production",
+      "autoIncrement": true
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}