@cachly-dev/mcp-server 0.10.56 → 0.10.57

package/apps/travel-chaos-organizer/frontend/app/(app)/inbox.tsx

@@ -0,0 +1,166 @@
+import { useRef, useState } from "react";
+import {
+  ActivityIndicator, FlatList, ScrollView, StyleSheet, Text,
+  TouchableOpacity, View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTrips } from "../../hooks/useTrips";
+import { ApiError, inboxApi, InboxItem } from "../../lib/api";
+import { useInbox } from "../../hooks/useInbox";
+import SwipeableInboxItem from "../../components/SwipeableInboxItem";
+import BottomSheet from "../../components/BottomSheet";
+import { haptics } from "../../lib/haptics";
+import { TripCardSkeleton } from "../../components/Skeleton";
+import { useToast } from "../../components/ToastContext";
+import { scheduleItemReminder } from "../../lib/notifications";
+
+export default function InboxScreen() {
+  const { showToast } = useToast();
+  const insets = useSafeAreaInsets();
+  const { items, loading, refresh } = useInbox();
+  const { trips } = useTrips();
+  const [selected, setSelected] = useState<InboxItem | null>(null);
+  const [assigning, setAssigning] = useState(false);
+  const assigningRef = useRef<boolean>(false);
+
+  async function openAssign(item: InboxItem) {
+    await haptics.tap();
+    setSelected(item);
+  }
+
+  async function assign(tripId: string) {
+    if (!selected) return;
+    if (assigningRef.current) return;
+    assigningRef.current = true;
+    setAssigning(true);
+    try {
+      const result = await inboxApi.assign(selected.id, tripId, (selected.parsed_data?.type as string) ?? "other");
+      await haptics.success();
+      // Schedule a reminder for the newly assigned item if it has a date.
+      // Find the trip name for a meaningful notification text.
+      if (result.event_at) {
+        const tripName = trips.find((t) => t.id === tripId)?.name ?? "Dein Trip";
+        await scheduleItemReminder(tripId, tripName, result.trip_item_id, result.title, result.event_at);
+      }
+      showToast("Dem Trip zugeordnet ✓", "success");
+      setSelected(null);
+      await refresh();
+    } catch (err) {
+      await haptics.error();
+      if (err instanceof ApiError && err.status === 429) {
+        showToast("Tageslimit erreicht (50 Parses). Upgrade auf Pro.", "warning");
+      } else {
+        showToast("Zuordnung fehlgeschlagen", "error");
+      }
+      setSelected(null);
+    } finally {
+      setAssigning(false);
+      assigningRef.current = false;
+    }
+  }
+
+  async function reject(id: string) {
+    await haptics.warning();
+    try {
+      await inboxApi.reject(id);
+      showToast("Eintrag abgelehnt", "warning");
+      await refresh();
+    } catch {
+      showToast("Ablehnen fehlgeschlagen", "error");
+    }
+  }
+
+  if (loading && items.length === 0) {
+    return (
+      <View style={s.container}>
+        <View style={{ padding: 16, gap: 10 }}>
+          {[1, 2, 3].map((k) => <TripCardSkeleton key={k} />)}
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={s.container}>
+      <FlatList
+        data={items}
+        keyExtractor={(i) => i.id}
+        contentContainerStyle={[
+          s.list,
+          { paddingBottom: insets.bottom + 24 },
+          items.length === 0 && s.emptyFlex,
+        ]}
+        refreshing={loading}
+        onRefresh={refresh}
+        ListHeaderComponent={
+          items.length > 0
+            ? <Text style={s.hint}>→ Wischen zum Zuweisen · Ablehnen ←</Text>
+            : null
+        }
+        ListEmptyComponent={
+          <View style={s.empty}>
+            <Text style={s.emptyIcon}>🎉</Text>
+            <Text style={s.emptyTitle}>Inbox leer!</Text>
+            <Text style={s.emptySub}>Alle Dokumente sind sortiert.</Text>
+          </View>
+        }
+        renderItem={({ item }) => (
+          <SwipeableInboxItem
+            item={item}
+            onAssign={() => openAssign(item)}
+            onReject={() => reject(item.id)}
+          />
+        )}
+      />
+
+      <BottomSheet visible={!!selected} onClose={() => setSelected(null)} heightFraction={0.55}>
+        <Text style={s.sheetTitle}>Welchem Trip zuweisen?</Text>
+
+        {trips.length === 0 ? (
+          <Text style={s.noTrips}>Noch keine Trips vorhanden.</Text>
+        ) : (
+          <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
+            {trips.map((trip) => (
+              <TouchableOpacity
+                key={trip.id}
+                style={[s.tripRow, { opacity: assigning ? 0.5 : 1 }]}
+                onPress={() => assign(trip.id)}
+                disabled={assigning}
+                activeOpacity={0.7}
+              >
+                <View style={s.tripRowInner}>
+                  <Text style={s.tripName}>{trip.name}</Text>
+                  {trip.start_date && <Text style={s.tripDate}>{trip.start_date}</Text>}
+                </View>
+                {assigning ? <ActivityIndicator color="#4f46e5" /> : <Text style={s.arrow}>›</Text>}
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+        )}
+      </BottomSheet>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  container: { flex: 1, backgroundColor: "#0f0f1a" },
+  list: { padding: 16, gap: 0 },
+  emptyFlex: { flex: 1 },
+  hint: { color: "#3a3a5e", fontSize: 12, textAlign: "center", marginBottom: 12 },
+  empty: { flex: 1, alignItems: "center", justifyContent: "center", padding: 48, gap: 12 },
+  emptyIcon: { fontSize: 64 },
+  emptyTitle: { fontSize: 22, fontWeight: "700", color: "#fff" },
+  emptySub: { fontSize: 15, color: "#6666aa" },
+  sheetTitle: { fontSize: 18, fontWeight: "700", color: "#fff", marginBottom: 16 },
+  noTrips: { color: "#6666aa", fontSize: 14, textAlign: "center", padding: 24 },
+  tripRow: {
+    flexDirection: "row", alignItems: "center",
+    paddingVertical: 16, paddingHorizontal: 4,
+    borderBottomWidth: 1, borderBottomColor: "#2a2a4e",
+    minHeight: 56,
+  },
+  tripRowInner: { flex: 1, gap: 2 },
+  tripName: { color: "#fff", fontSize: 16, fontWeight: "500" },
+  tripDate: { color: "#6666aa", fontSize: 13 },
+  arrow: { color: "#4f46e5", fontSize: 22, fontWeight: "300" },
+});

package/apps/travel-chaos-organizer/frontend/app/(app)/search.tsx

@@ -0,0 +1,130 @@
+import { useRef, useState } from "react";
+import {
+  FlatList, StyleSheet, Text, TextInput, TouchableOpacity, View,
+} from "react-native";
+import { useRouter } from "expo-router";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { getLocalTrips, getLocalItems } from "../../lib/db";
+import { TripItem } from "../../lib/api";
+import TimelineItem from "../../components/TimelineItem";
+import { haptics } from "../../lib/haptics";
+
+type Result = TripItem & { trip_name: string };
+
+export default function SearchScreen() {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<Result[]>([]);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  function onQueryChange(text: string) {
+    setQuery(text);
+
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      if (text.trim().length < 2) {
+        setResults([]);
+        return;
+      }
+      const q = text.toLowerCase();
+      const trips = getLocalTrips();
+      const matched: Result[] = [];
+
+      for (const trip of trips) {
+        const items = getLocalItems(trip.id);
+        for (const item of items) {
+          const searchable = [
+            item.title,
+            item.booking_ref,
+            item.provider,
+            item.raw_text,
+            JSON.stringify(item.parsed_data),
+          ].filter(Boolean).join(" ").toLowerCase();
+
+          if (searchable.includes(q)) {
+            matched.push({ ...item, trip_name: trip.name });
+          }
+        }
+      }
+      setResults(matched);
+    }, 250);
+  }
+
+  const showResults = query.trim().length >= 2;
+
+  return (
+    <View style={[s.container, { paddingTop: insets.top > 0 ? 0 : 8 }]}>
+      <View style={s.searchBar}>
+        <Text style={s.searchIcon} accessibilityElementsHidden>🔍</Text>
+        <TextInput
+          style={s.input}
+          placeholder="Buchungsref, Airline, Hotel…"
+          placeholderTextColor="#4a4a7a"
+          value={query}
+          onChangeText={onQueryChange}
+          autoFocus
+          returnKeyType="search"
+          clearButtonMode="while-editing"
+          accessibilityLabel="Suche"
+          accessibilityHint="Mindestens 2 Zeichen eingeben"
+        />
+      </View>
+
+      {showResults && results.length > 0 && (
+        <Text style={s.resultCount}>{results.length} Ergebnis{results.length !== 1 ? "se" : ""}</Text>
+      )}
+
+      <FlatList
+        data={results}
+        keyExtractor={(i) => i.id}
+        contentContainerStyle={results.length === 0 ? s.emptyContainer : s.list}
+        keyboardShouldPersistTaps="handled"
+        ListEmptyComponent={
+          showResults
+            ? <View style={s.empty}><Text style={s.emptyText}>Keine Ergebnisse für „{query}"</Text></View>
+            : <View style={s.empty}>
+                <Text style={s.emptyHint}>Tippe mindestens 2 Zeichen{"\n"}um in deinen Trips zu suchen</Text>
+              </View>
+        }
+        renderItem={({ item }) => (
+          <TouchableOpacity
+            onPress={async () => {
+              await haptics.tap();
+              router.push(`/(app)/trips/${item.trip_id}`);
+            }}
+            activeOpacity={0.75}
+            accessibilityLabel={`${item.title} in Trip ${item.trip_name}`}
+            accessibilityRole="button"
+          >
+            <View style={s.tripLabelRow}>
+              <Text style={s.tripLabel}>🗺️  {item.trip_name}</Text>
+            </View>
+            <TimelineItem item={item} />
+          </TouchableOpacity>
+        )}
+      />
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  container: { flex: 1, backgroundColor: "#0f0f1a" },
+  searchBar: {
+    flexDirection: "row", alignItems: "center", gap: 10,
+    margin: 16, marginBottom: 8,
+    backgroundColor: "#1a1a2e", borderRadius: 14,
+    paddingHorizontal: 14, paddingVertical: 2,
+    borderWidth: 1, borderColor: "#2a2a4e",
+  },
+  searchIcon: { fontSize: 16 },
+  input: { flex: 1, color: "#fff", fontSize: 16, paddingVertical: 12 },
+  resultCount: { color: "#4f46e5", fontSize: 12, fontWeight: "600", paddingHorizontal: 20, marginBottom: 4 },
+  list: { paddingHorizontal: 16, paddingBottom: 32 },
+  emptyContainer: { flex: 1 },
+  empty: { flex: 1, alignItems: "center", justifyContent: "center", padding: 48 },
+  emptyText: { color: "#6666aa", fontSize: 15, textAlign: "center" },
+  emptyHint: { color: "#3a3a5e", fontSize: 14, textAlign: "center", lineHeight: 22 },
+  tripLabelRow: { flexDirection: "row", alignItems: "center", marginTop: 12, marginBottom: 4, paddingHorizontal: 4 },
+  tripLabel: { color: "#4f46e5", fontSize: 12, fontWeight: "600" },
+});

package/apps/travel-chaos-organizer/frontend/app/(app)/settings.tsx

@@ -0,0 +1,381 @@
+import { useState, useEffect } from "react";
+import {
+  ActivityIndicator, Linking, ScrollView, StyleSheet, Text,
+  TouchableOpacity, View,
+} from "react-native";import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useRouter } from "expo-router";
+import { logout } from "../../lib/auth";
+import { clearCache, cacheSizeBytes } from "../../lib/fileCache";
+import { purgeFailed, getPending } from "../../lib/offlineQueue";
+import { haptics } from "../../lib/haptics";
+import { useQuota } from "../../lib/quota";
+import { usersApi, cacheApi, type CacheStats } from "../../lib/api";
+import { useToast } from "../../components/ToastContext";
+import ConfirmDialog from "../../components/ConfirmDialog";
+
+export default function SettingsScreen() {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const { plan, isPro } = useQuota();
+  const { showToast } = useToast();
+  const [cacheSize, setCacheSize] = useState(0);
+  const [queueSize, setQueueSize] = useState(0);
+  const [loggingOut, setLoggingOut] = useState(false);
+  const [dialog, setDialog] = useState<{ title: string; message?: string; onConfirm: () => void } | null>(null);
+  const [telegramPin, setTelegramPin] = useState<string | null>(null);
+  const [generatingPin, setGeneratingPin] = useState(false);
+  const [cachlyStats, setCachlyStats] = useState<CacheStats | null>(null);
+
+  async function handleGeneratePin() {
+    setGeneratingPin(true);
+    try {
+      const { pin } = await usersApi.telegramPin();
+      setTelegramPin(pin);
+      setTimeout(() => setTelegramPin(null), 600_000);
+    } catch {
+      showToast('Fehler beim Generieren des PINs', 'error');
+    } finally {
+      setGeneratingPin(false);
+    }
+  }
+
+  useEffect(() => {
+    cacheSizeBytes().then(setCacheSize);
+    setQueueSize(getPending().length);
+    cacheApi.stats().then(setCachlyStats).catch(() => {});
+  }, []);
+
+  async function handleClearCache() {
+    await haptics.warning();
+    setDialog({
+      title: "Cache leeren?",
+      message: "Alle lokal gespeicherten Tickets und PDFs werden gelöscht.",
+      onConfirm: async () => {
+        await clearCache();
+        setCacheSize(0);
+        await haptics.success();
+      },
+    });
+  }
+
+  async function handlePurgeQueue() {
+    purgeFailed(0);
+    setQueueSize(0);
+    await haptics.confirm();
+  }
+
+  function handleLogout() {
+    setDialog({
+      title: "Abmelden",
+      message: "Wirklich abmelden?",
+      onConfirm: async () => {
+        setLoggingOut(true);
+        await haptics.tap();
+        try {
+          await logout();
+          router.replace("/(auth)/login");
+        } catch {
+          setLoggingOut(false);
+          showToast("Abmelden fehlgeschlagen", "error");
+        }
+      },
+    });
+  }
+
+  return (
+    <ScrollView
+      style={s.container}
+      contentContainerStyle={[s.content, { paddingBottom: insets.bottom + 32 }]}
+    >
+      {/* Plan section */}
+      <Text style={s.sectionTitle}>Mein Plan</Text>
+      <View style={s.planCard}>
+        <View style={s.planRow}>
+          <Text style={s.planName}>{isPro ? "✦ Pro" : "Free"}</Text>
+          {plan?.plan_expires_at && (
+            <Text style={s.planExpiry}>
+              bis {new Date(plan.plan_expires_at).toLocaleDateString("de")}
+            </Text>
+          )}
+        </View>
+        {!isPro && (
+          <View style={s.limits}>
+            <Text style={s.limitText}>
+              {plan?.free_daily_parses ?? 50} KI-Parses / Tag
+            </Text>
+            <Text style={s.limitText}>
+              max. {plan?.free_max_trips ?? 3} Trips
+            </Text>
+          </View>
+        )}
+        {!isPro && (
+          <TouchableOpacity
+            style={s.upgradeBtn}
+            onPress={() => Linking.openURL(process.env.EXPO_PUBLIC_UPGRADE_URL ?? "https://tco.app/upgrade")}
+            activeOpacity={0.8}
+          >
+            <Text style={s.upgradeBtnText}>Auf Pro upgraden ✦</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      <Text style={s.sectionTitle}>KI Modell</Text>
+      <View style={s.card}>
+        <View style={s.infoRow}>
+          <Text style={s.rowText}>Aktives Modell</Text>
+          <Text style={s.rowValue}>{process.env.EXPO_PUBLIC_OLLAMA_MODEL ?? "llama3.2-vision"}</Text>
+        </View>
+        <Text style={s.hint}>
+          Das Modell wird auf dem Server konfiguriert (OLLAMA_MODEL).{"\n"}
+          Für Screenshot-Parsing wird ein Vision-Modell benötigt.
+        </Text>
+      </View>
+
+      <Text style={s.sectionTitle}>Telegram</Text>
+      <View style={s.card}>
+        {/* Linked status badge */}
+        <View style={s.infoRow}>
+          <Text style={s.rowText}>Status</Text>
+          <Text style={[s.rowValue, plan?.telegram_linked ? s.telegramLinked : s.telegramUnlinked]}>
+            {plan?.telegram_linked ? "● Verknüpft" : "○ Nicht verknüpft"}
+          </Text>
+        </View>
+
+        {telegramPin ? (
+          <View style={s.pinBox}>
+            <Text style={s.pinLabel}>Dein PIN (gültig 10 Min.)</Text>
+            <Text style={s.pinCode}>{telegramPin}</Text>
+            <Text style={s.pinHint}>Sende diesen PIN an @TCOBot:{"\n"}/link {telegramPin}</Text>
+          </View>
+        ) : plan?.telegram_linked ? (
+          <>
+            <View style={s.infoRow}>
+              <Text style={[s.rowText, { color: "#6666aa" }]}>Bot</Text>
+              <Text style={s.rowValue}>@TCOBot</Text>
+            </View>
+            <TouchableOpacity
+              style={[s.row, { borderBottomWidth: 0 }]}
+              onPress={() => setDialog({
+                title: "Telegram trennen?",
+                message: "Du erhältst dann keine Bot-Nachrichten mehr.",
+                onConfirm: async () => {
+                  try {
+                    await usersApi.telegramUnlink();
+                    showToast("Telegram-Verknüpfung aufgehoben", "success");
+                  } catch {
+                    showToast("Trennen fehlgeschlagen", "error");
+                  }
+                },
+              })}
+              accessibilityRole="button"
+            >
+              <Text style={[s.rowText, s.danger]}>Telegram trennen</Text>
+            </TouchableOpacity>
+          </>
+        ) : (
+          <TouchableOpacity
+            style={[s.row, { borderBottomWidth: 0 }]}
+            onPress={handleGeneratePin}
+            accessibilityRole="button"
+          >
+            <Text style={s.rowText}>Mit Telegram verknüpfen</Text>
+            {generatingPin ? <ActivityIndicator size="small" color="#4f46e5" /> : <Text style={s.rowChevron}>›</Text>}
+          </TouchableOpacity>
+        )}
+      </View>
+
+      <Text style={s.sectionTitle}>Offline & Cache</Text>
+      <View style={s.card}>
+        <View style={s.infoRow}>
+          <Text style={s.rowText}>Cache-Größe</Text>
+          <Text style={s.rowValue}>{(cacheSize / 1024 / 1024).toFixed(1)} MB</Text>
+        </View>
+        <TouchableOpacity
+          style={s.row}
+          onPress={handleClearCache}
+          accessibilityLabel="Cache leeren"
+          accessibilityRole="button"
+        >
+          <Text style={[s.rowText, s.danger]}>Cache leeren</Text>
+        </TouchableOpacity>
+
+        <View style={[s.infoRow, { marginTop: 0 }]}>
+          <Text style={s.rowText}>Offline Queue</Text>
+          <Text style={s.rowValue}>{queueSize} Einträge</Text>
+        </View>
+        {queueSize > 0 && (
+          <TouchableOpacity
+            style={s.row}
+            onPress={handlePurgeQueue}
+            accessibilityLabel="Offline-Queue zurücksetzen"
+            accessibilityRole="button"
+          >
+            <Text style={[s.rowText, s.danger]}>Queue zurücksetzen</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {/* Links section */}
+      <Text style={s.sectionTitle}>Info</Text>
+      <View style={s.card}>
+        <TouchableOpacity
+          style={s.row}
+          onPress={() => Linking.openURL(process.env.EXPO_PUBLIC_PRIVACY_URL ?? "https://tco.app/privacy")}
+          accessibilityRole="link"
+        >
+          <Text style={s.rowText}>Datenschutz</Text>
+          <Text style={s.rowChevron}>›</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={s.row}
+          onPress={() => Linking.openURL(process.env.EXPO_PUBLIC_TERMS_URL ?? "https://tco.app/terms")}
+          accessibilityRole="link"
+        >
+          <Text style={s.rowText}>Nutzungsbedingungen</Text>
+          <Text style={s.rowChevron}>›</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[s.row, { borderBottomWidth: 0 }]}
+          onPress={() => Linking.openURL(`mailto:${process.env.EXPO_PUBLIC_SUPPORT_EMAIL ?? "hello@tco.app"}`)}
+          accessibilityRole="link"
+        >
+          <Text style={s.rowText}>Support kontaktieren</Text>
+          <Text style={s.rowChevron}>›</Text>
+        </TouchableOpacity>
+      </View>
+
+      <Text style={s.sectionTitle}>Account</Text>
+      <View style={s.card}>
+        <TouchableOpacity
+          style={[s.row, s.dangerRow, { borderBottomWidth: 0 }]}
+          onPress={handleLogout}
+          disabled={loggingOut}
+          accessibilityLabel="Abmelden"
+          accessibilityRole="button"
+        >
+          <Text style={s.dangerText}>Abmelden</Text>
+        </TouchableOpacity>
+      </View>
+
+      {/* Cachly badge — cross-promotion + live stats */}
+      <TouchableOpacity
+        style={s.cachlyBadge}
+        onPress={() => Linking.openURL("https://cachly.dev")}
+        activeOpacity={0.75}
+        accessibilityLabel="Powered by Cachly — cachly.dev besuchen"
+        accessibilityRole="link"
+      >
+        <View style={s.cachlyInner}>
+          <View style={[s.cachlyDot, cachlyStats?.configured ? s.cachlyDotActive : s.cachlyDotOff]} />
+          <Text style={s.cachlyText}>Powered by</Text>
+          <Text style={s.cachlyBrand}>Cachly</Text>
+          <Text style={[s.cachlyStatus, cachlyStats?.configured ? s.cachlyStatusOn : s.cachlyStatusOff]}>
+            {cachlyStats ? (cachlyStats.configured ? "● aktiv" : "○ nicht verbunden") : ""}
+          </Text>
+        </View>
+        {cachlyStats?.configured ? (
+          <View style={s.cachlyStatsRow}>
+            <View style={s.cachlyStatCell}>
+              <Text style={s.cachlyStatValue}>{cachlyStats.hits}</Text>
+              <Text style={s.cachlyStatLabel}>Cache Hits</Text>
+            </View>
+            <View style={s.cachlyStatDivider} />
+            <View style={s.cachlyStatCell}>
+              <Text style={s.cachlyStatValue}>{Math.round(cachlyStats.hit_rate * 100)}%</Text>
+              <Text style={s.cachlyStatLabel}>Hit Rate</Text>
+            </View>
+            <View style={s.cachlyStatDivider} />
+            <View style={s.cachlyStatCell}>
+              <Text style={s.cachlyStatValue}>{cachlyStats.key_count}</Text>
+              <Text style={s.cachlyStatLabel}>Gecacht</Text>
+            </View>
+          </View>
+        ) : (
+          <Text style={s.cachlySubtext}>
+            KI-Ergebnisse werden per Cachly Redis gecacht —{"\n"}
+            kein zweiter AI-Call für dasselbe Dokument.
+          </Text>
+        )}
+      </TouchableOpacity>
+
+      <Text style={s.version}>Travel Chaos Organizer v0.1.0</Text>
+
+      <ConfirmDialog
+        visible={!!dialog}
+        title={dialog?.title ?? ""}
+        message={dialog?.message}
+        actions={[
+          { label: "Ja", style: "destructive", onPress: () => { setDialog(null); dialog?.onConfirm(); } },
+          { label: "Abbrechen", style: "cancel", onPress: () => setDialog(null) },
+        ]}
+      />
+    </ScrollView>
+  );
+}
+
+const s = StyleSheet.create({
+  container: { flex: 1, backgroundColor: "#0f0f1a" },
+  content: { padding: 20, gap: 8 },
+  sectionTitle: {
+    color: "#6666aa", fontSize: 12, fontWeight: "600",
+    letterSpacing: 0.8, textTransform: "uppercase",
+    marginTop: 16, marginBottom: 4, paddingHorizontal: 4,
+  },
+  planCard: { backgroundColor: "#1a1a2e", borderRadius: 16, padding: 20, gap: 12, borderWidth: 1, borderColor: "#2a2a4e" },
+  planRow: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
+  planName: { fontSize: 22, fontWeight: "800", color: "#fff" },
+  planExpiry: { fontSize: 12, color: "#6666aa" },
+  limits: { gap: 4 },
+  limitText: { fontSize: 13, color: "#6666aa" },
+  upgradeBtn: { backgroundColor: "#4f46e5", paddingVertical: 14, borderRadius: 12, alignItems: "center", marginTop: 4 },
+  upgradeBtnText: { color: "#fff", fontWeight: "700", fontSize: 15 },
+  card: { backgroundColor: "#1a1a2e", borderRadius: 16, borderWidth: 1, borderColor: "#2a2a4e", overflow: "hidden" },
+  row: { paddingVertical: 14, paddingHorizontal: 18, borderBottomWidth: 1, borderBottomColor: "#2a2a4e", flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
+  infoRow: {
+    paddingVertical: 14, paddingHorizontal: 18,
+    flexDirection: "row", justifyContent: "space-between", alignItems: "center",
+    borderBottomWidth: 1, borderBottomColor: "#2a2a4e",
+  },
+  rowText: { color: "#e2e8f0", fontSize: 15 },
+  rowValue: { color: "#6666aa", fontSize: 14 },
+  rowChevron: { color: "#6666aa", fontSize: 18 },
+  check: { color: "#4f46e5", fontSize: 16, fontWeight: "700" },
+  danger: { color: "#f87171" },
+  dangerRow: { borderWidth: 1, borderColor: "#ff6b6b22", backgroundColor: "#ff6b6b11" },
+  dangerText: { color: "#ff8888", fontSize: 15, fontWeight: "600" },
+  hint: { color: "#4a4a7a", fontSize: 12, padding: 16, lineHeight: 18 },
+  pinBox: { padding: 18, alignItems: 'center', gap: 8 },
+  pinLabel: { color: '#6666aa', fontSize: 12 },
+  pinCode: { color: '#fff', fontSize: 40, fontWeight: '800', letterSpacing: 8 },
+  pinHint: { color: '#3a3a5e', fontSize: 12, textAlign: 'center' },
+  telegramLinked: { color: '#10b981', fontWeight: '600' },
+  telegramUnlinked: { color: '#3a3a5e' },
+
+  // Cachly badge
+  cachlyBadge: {
+    marginTop: 32,
+    backgroundColor: "#1a1a2e",
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: "#4f46e533",
+    padding: 16,
+    gap: 8,
+  },
+  cachlyInner: { flexDirection: "row", alignItems: "center", gap: 8 },
+  cachlyDot: { width: 8, height: 8, borderRadius: 4, backgroundColor: "#4f46e5" },
+  cachlyDotActive: { backgroundColor: "#10b981" },
+  cachlyDotOff: { backgroundColor: "#3a3a5e" },
+  cachlyText: { color: "#6666aa", fontSize: 13 },
+  cachlyBrand: { color: "#a5b4fc", fontSize: 14, fontWeight: "700" },
+  cachlyStatus: { fontSize: 11, marginLeft: "auto" as const },
+  cachlyStatusOn: { color: "#10b981" },
+  cachlyStatusOff: { color: "#3a3a5e" },
+  cachlySubtext: { color: "#3a3a5e", fontSize: 12, lineHeight: 18 },
+  cachlyStatsRow: { flexDirection: "row", alignItems: "center", marginTop: 4 },
+  cachlyStatCell: { flex: 1, alignItems: "center", gap: 2 },
+  cachlyStatValue: { color: "#a5b4fc", fontSize: 20, fontWeight: "800" },
+  cachlyStatLabel: { color: "#3a3a5e", fontSize: 11 },
+  cachlyStatDivider: { width: 1, height: 32, backgroundColor: "#2a2a4e" },
+
+  version: { color: "#3a3a5e", fontSize: 12, textAlign: "center", marginTop: 20 },
+});