@cachly-dev/mcp-server 0.10.48 → 0.10.50

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { captureException } from "../lib/sentry";
+
+type State = { hasError: boolean; error: string | null };
+
+export class ErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  State
+> {
+  state: State = { hasError: false, error: null };
+
+  static getDerivedStateFromError(err: Error): State {
+    return { hasError: true, error: err.message };
+  }
+
+  componentDidCatch(err: Error) {
+    captureException(err);
+  }
+
+  reset = () => this.setState({ hasError: false, error: null });
+
+  render() {
+    if (!this.state.hasError) return this.props.children;
+    return (
+      <View style={s.container}>
+        <Text style={s.icon}>⚠️</Text>
+        <Text style={s.title}>Etwas ist schiefgelaufen</Text>
+        <Text style={s.msg}>{this.state.error ?? "Unbekannter Fehler"}</Text>
+        <TouchableOpacity style={s.btn} onPress={this.reset} activeOpacity={0.8}>
+          <Text style={s.btnText}>Neu laden</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+const s = StyleSheet.create({
+  container: { flex: 1, backgroundColor: "#0f0f1a", justifyContent: "center", alignItems: "center", padding: 32 },
+  icon: { fontSize: 48, marginBottom: 16 },
+  title: { fontSize: 20, fontWeight: "800", color: "#fff", marginBottom: 8, textAlign: "center" },
+  msg: { fontSize: 13, color: "#6666aa", textAlign: "center", marginBottom: 32, lineHeight: 20 },
+  btn: { backgroundColor: "#4f46e5", paddingVertical: 14, paddingHorizontal: 32, borderRadius: 12 },
+  btnText: { color: "#fff", fontWeight: "700", fontSize: 15 },
+});

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

@@ -0,0 +1,19 @@
+import { StyleSheet, Text, TouchableOpacity } from "react-native";
+
+type Props = { icon: string; label: string; onPress: () => void; disabled?: boolean };
+
+export default function FileUploadButton({ icon, label, onPress, disabled }: Props) {
+  return (
+    <TouchableOpacity style={[s.btn, disabled && s.btnDisabled]} onPress={onPress} disabled={disabled} activeOpacity={0.8}>
+      <Text style={s.icon}>{icon}</Text>
+      <Text style={s.label}>{label}</Text>
+    </TouchableOpacity>
+  );
+}
+
+const s = StyleSheet.create({
+  btn: { flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 6, backgroundColor: "#0f0f1a", borderRadius: 12, paddingVertical: 12, borderWidth: 1, borderColor: "#2a2a4e" },
+  btnDisabled: { opacity: 0.4 },
+  icon: { fontSize: 18 },
+  label: { color: "#a5b4fc", fontSize: 14, fontWeight: "500" },
+});

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

@@ -0,0 +1,155 @@
+/**
+ * In-app text/email import — paste booking text or email body directly.
+ * Calls /parse/text → saves to inbox or a specific trip.
+ * Sits above the upload bar in the trip detail and as a standalone entry point.
+ */
+import { useState } from "react";
+import {
+  ActivityIndicator,
+  StyleSheet, Text, TextInput, TouchableOpacity, View,
+} from "react-native";
+import BottomSheet from "./BottomSheet";
+import { ApiError, mailApi } from "../lib/api";
+import { haptics } from "../lib/haptics";
+import { useToast } from "./ToastContext";
+
+type Props = {
+  visible: boolean;
+  onClose: () => void;
+  /** If provided, parse result goes directly to this trip. Otherwise → inbox. */
+  tripId?: string;
+  onSuccess: () => void;
+};
+
+export default function ImportSheet({ visible, onClose, tripId, onSuccess }: Props) {
+  const { showToast } = useToast();
+  const [text, setText] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function submit() {
+    if (!text.trim()) return;
+    setLoading(true);
+    setError(null);
+    await haptics.confirm();
+
+    try {
+      await mailApi.import(text.trim(), tripId);
+      await haptics.success();
+      setText("");
+      onClose();
+      onSuccess();
+      showToast("Dokument erfolgreich importiert", "success");
+    } catch (err) {
+      await haptics.error();
+      if (err instanceof ApiError && err.status === 429) {
+        showToast("Tageslimit erreicht (50 Parses/Tag). Upgrade auf Pro.", "warning");
+      } else if (err instanceof ApiError && err.status === 408) {
+        showToast("Timeout — Ollama antwortet nicht. Bitte warte und versuche es erneut.", "error");
+      } else {
+        setError(err instanceof Error ? err.message : "Unbekannter Fehler");
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function handleClose() {
+    setText("");
+    setError(null);
+    onClose();
+  }
+
+  return (
+    <BottomSheet visible={visible} onClose={handleClose} heightFraction={0.75} hasInputs>
+      <View style={{ flex: 1 }}>
+        <Text style={s.title}>Text / E-Mail importieren</Text>
+        <Text style={s.subtitle}>
+          {tripId
+            ? "Buchungsbestätigung, E-Mail-Text oder Ticketinhalt einfügen."
+            : "Inhalt wird in den Chaos Inbox importiert. E-Mail-Header werden automatisch entfernt."}
+        </Text>
+
+        <TextInput
+          style={s.input}
+          placeholder={"Buchungsbestätigung, weitergeleitete E-Mail oder Tickettext hier einfügen…"}
+          placeholderTextColor="#4a4a7a"
+          value={text}
+          onChangeText={setText}
+          multiline
+          numberOfLines={8}
+          autoFocus
+          textAlignVertical="top"
+          accessibilityLabel="Buchungstext eingeben"
+        />
+
+        {error && (
+          <View style={s.errorBox}>
+            <Text style={s.errorText}>⚠️  {error}</Text>
+          </View>
+        )}
+
+        <View style={s.buttons}>
+          <TouchableOpacity
+            style={s.cancelBtn}
+            onPress={handleClose}
+            accessibilityRole="button"
+            accessibilityLabel="Abbrechen"
+          >
+            <Text style={s.cancelText}>Abbrechen</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[s.submitBtn, (!text.trim() || loading) && s.submitDisabled]}
+            onPress={submit}
+            disabled={loading || !text.trim()}
+            accessibilityRole="button"
+            accessibilityLabel="Text mit Ollama analysieren"
+          >
+            {loading
+              ? <ActivityIndicator color="#fff" size="small" />
+              : <Text style={s.submitText}>Analysieren ✨</Text>}
+          </TouchableOpacity>
+        </View>
+      </View>
+    </BottomSheet>
+  );
+}
+
+const s = StyleSheet.create({
+  title: { fontSize: 18, fontWeight: "700", color: "#fff", marginBottom: 4 },
+  subtitle: { fontSize: 13, color: "#6666aa", marginBottom: 12, lineHeight: 18 },
+  input: {
+    flex: 1,
+    backgroundColor: "#0f0f1a",
+    borderRadius: 12,
+    padding: 14,
+    color: "#fff",
+    fontSize: 14,
+    lineHeight: 20,
+    borderWidth: 1,
+    borderColor: "#2a2a4e",
+    marginBottom: 12,
+    minHeight: 120,
+  },
+  errorBox: {
+    backgroundColor: "#ff6b6b18",
+    borderRadius: 10,
+    padding: 10,
+    marginBottom: 10,
+    borderWidth: 1,
+    borderColor: "#ff6b6b33",
+  },
+  errorText: { color: "#ff8888", fontSize: 13 },
+  buttons: { flexDirection: "row", gap: 12, justifyContent: "flex-end" },
+  cancelBtn: {
+    paddingVertical: 12, paddingHorizontal: 20,
+    borderRadius: 10, borderWidth: 1, borderColor: "#2a2a4e",
+  },
+  cancelText: { color: "#8888aa", fontSize: 15 },
+  submitBtn: {
+    flex: 1, paddingVertical: 14, borderRadius: 12,
+    backgroundColor: "#4f46e5", alignItems: "center",
+  },
+  submitDisabled: { opacity: 0.45 },
+  submitText: { color: "#fff", fontWeight: "700", fontSize: 15 },
+});

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

@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from "react";
+import { Animated, AppState, AppStateStatus, StyleSheet, Text } from "react-native";
+import * as Network from "expo-network";
+
+export default function OfflineBadge() {
+  const [offline, setOffline] = useState(false);
+  const opacity = useState(new Animated.Value(0))[0];
+  const appState = useRef<AppStateStatus>(AppState.currentState);
+
+  useEffect(() => {
+    let mounted = true;
+
+    async function check() {
+      const net = await Network.getNetworkStateAsync();
+      if (!mounted) return;
+      const isOffline = !net.isConnected;
+      setOffline(isOffline);
+      Animated.timing(opacity, {
+        toValue: isOffline ? 1 : 0,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    }
+
+    check();
+    // Re-check when app returns to foreground, fall back to 30s interval
+    const appStateSub = AppState.addEventListener("change", (next) => {
+      if (appState.current.match(/inactive|background/) && next === "active") {
+        check();
+      }
+      appState.current = next;
+    });
+    const interval = setInterval(check, 30_000);
+    return () => { mounted = false; appStateSub.remove(); clearInterval(interval); };
+  }, []);
+
+  if (!offline) return null;
+
+  return (
+    <Animated.View style={[s.badge, { opacity }]}>
+      <Text style={s.text}>⚡ Offline — gespeicherte Daten</Text>
+    </Animated.View>
+  );
+}
+
+const s = StyleSheet.create({
+  badge: {
+    backgroundColor: "#7c3aed33",
+    borderBottomWidth: 1,
+    borderBottomColor: "#7c3aed55",
+    paddingVertical: 6,
+    alignItems: "center",
+  },
+  text: { color: "#c4b5fd", fontSize: 12, fontWeight: "500" },
+});

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

@@ -0,0 +1,80 @@
+/**
+ * Shows a QR code for a booking reference — works fully offline.
+ * Uses the booking_ref string to generate the QR locally (no network call).
+ * Install: npm install react-native-qrcode-svg react-native-svg
+ */
+import { ActivityIndicator, Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { useEffect, useState } from "react";
+// @ts-ignore — added in Phase 3 deps
+import QRCode from "react-native-qrcode-svg";
+
+type Props = { bookingRef: string; title?: string };
+
+export default function QRCodeViewer({ bookingRef, title }: Props) {
+  const [visible, setVisible] = useState(false);
+  const [qrReady, setQrReady] = useState(false);
+
+  useEffect(() => {
+    if (visible) {
+      const id = requestAnimationFrame(() => setQrReady(true));
+      return () => { cancelAnimationFrame(id); setQrReady(false); };
+    } else {
+      setQrReady(false);
+    }
+  }, [visible]);
+
+  return (
+    <>
+      <TouchableOpacity style={s.trigger} onPress={() => setVisible(true)}>
+        <Text style={s.triggerText}>QR · {bookingRef}</Text>
+      </TouchableOpacity>
+
+      <Modal visible={visible} transparent animationType="fade">
+        <TouchableOpacity style={s.backdrop} activeOpacity={1} onPress={() => setVisible(false)}>
+          <View style={s.card}>
+            <Text style={s.cardTitle}>{title ?? bookingRef}</Text>
+            <View style={s.qr}>
+              {qrReady
+                ? <QRCode value={bookingRef} size={220} backgroundColor="#fff" color="#0f0f1a" />
+                : <ActivityIndicator color="#4f46e5" size="large" style={{ width: 220, height: 220 }} />}
+            </View>
+            <Text style={s.ref}>{bookingRef}</Text>
+            <Text style={s.hint}>Antippen zum Schließen</Text>
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </>
+  );
+}
+
+const s = StyleSheet.create({
+  trigger: {
+    backgroundColor: "#0f0f1a",
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderWidth: 1,
+    borderColor: "#4f46e555",
+    alignSelf: "flex-start",
+  },
+  triggerText: { color: "#a5b4fc", fontSize: 12, fontWeight: "500" },
+  backdrop: {
+    flex: 1,
+    backgroundColor: "#000000cc",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  card: {
+    backgroundColor: "#1a1a2e",
+    borderRadius: 24,
+    padding: 32,
+    alignItems: "center",
+    gap: 16,
+    borderWidth: 1,
+    borderColor: "#2a2a4e",
+  },
+  cardTitle: { color: "#fff", fontSize: 16, fontWeight: "700" },
+  qr: { backgroundColor: "#fff", padding: 16, borderRadius: 12 },
+  ref: { color: "#6666aa", fontSize: 13, letterSpacing: 1 },
+  hint: { color: "#3a3a5e", fontSize: 12 },
+});

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

@@ -0,0 +1,39 @@
+import { View, Text, StyleSheet } from "react-native";
+// @ts-ignore — react-native-svg is a peer dep of react-native-qrcode-svg
+import Svg, { Circle } from "react-native-svg";
+
+type Props = { score: number; size?: number };
+
+export default function ScoreRing({ score, size = 40 }: Props) {
+  const stroke = 3;
+  const radius = (size - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const filled = (score / 100) * circumference;
+  const gap = circumference - filled;
+
+  const color = score === 100 ? "#10b981" : score >= 50 ? "#4f46e5" : "#3a3a5e";
+
+  return (
+    <View style={[s.wrap, { width: size, height: size }]}>
+      <Svg width={size} height={size}>
+        <Circle
+          cx={size / 2} cy={size / 2} r={radius}
+          stroke="#2a2a4e" strokeWidth={stroke} fill="none"
+        />
+        <Circle
+          cx={size / 2} cy={size / 2} r={radius}
+          stroke={color} strokeWidth={stroke} fill="none"
+          strokeDasharray={`${filled} ${gap}`}
+          strokeLinecap="round"
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+        />
+      </Svg>
+      <Text style={[s.label, { color }]}>{score}</Text>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  wrap: { alignItems: "center", justifyContent: "center", position: "relative" },
+  label: { position: "absolute", fontSize: 10, fontWeight: "700" },
+});

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

@@ -0,0 +1,39 @@
+/**
+ * Mobile-first layout wrapper.
+ * - Handles safe areas (notch, Dynamic Island, home indicator)
+ * - Sets dark status bar across all screens
+ * - Provides consistent screen-level padding
+ */
+import { ReactNode } from "react";
+import { Platform, StatusBar, StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+type Props = {
+  children: ReactNode;
+  noPadding?: boolean;
+};
+
+export default function Screen({ children, noPadding }: Props) {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      style={[
+        s.container,
+        !noPadding && {
+          paddingTop: insets.top,
+          paddingBottom: insets.bottom,
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        },
+      ]}
+    >
+      <StatusBar barStyle="light-content" backgroundColor="#0f0f1a" />
+      {children}
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  container: { flex: 1, backgroundColor: "#0f0f1a" },
+});

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

@@ -0,0 +1,70 @@
+/**
+ * Skeleton loader — animated shimmer placeholder while data loads.
+ * Mirrors the shape of TripCard and TimelineItem so there's no layout jump.
+ */
+import { useEffect, useRef } from "react";
+import { Animated, StyleSheet, View } from "react-native";
+
+function ShimmerBar({ width, height = 14, style }: { width: number | `${number}%`; height?: number; style?: object }) {
+  const anim = useRef(new Animated.Value(0.3)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(anim, { toValue: 1, duration: 900, useNativeDriver: true }),
+        Animated.timing(anim, { toValue: 0.3, duration: 900, useNativeDriver: true }),
+      ])
+    ).start();
+  }, []);
+
+  return (
+    <Animated.View
+      style={[{ width, height, borderRadius: 6, backgroundColor: "#2a2a4e", opacity: anim }, style]}
+    />
+  );
+}
+
+export function TripCardSkeleton() {
+  return (
+    <View style={s.card}>
+      <View style={s.row}>
+        <View style={{ flex: 1, gap: 8 }}>
+          <ShimmerBar width="70%" height={16} />
+          <ShimmerBar width="45%" height={12} />
+        </View>
+        <ShimmerBar width={52} height={22} style={{ borderRadius: 6 }} />
+      </View>
+    </View>
+  );
+}
+
+export function TimelineItemSkeleton() {
+  return (
+    <View style={s.timelineRow}>
+      <View style={s.line}>
+        <ShimmerBar width={12} height={12} style={{ borderRadius: 6 }} />
+      </View>
+      <View style={s.timelineCard}>
+        <View style={s.row}>
+          <ShimmerBar width={28} height={28} style={{ borderRadius: 6 }} />
+          <View style={{ flex: 1, gap: 6 }}>
+            <ShimmerBar width="65%" height={14} />
+            <ShimmerBar width="40%" height={11} />
+          </View>
+        </View>
+        <View style={{ flexDirection: "row", gap: 8, marginTop: 4 }}>
+          <ShimmerBar width={80} height={22} />
+          <ShimmerBar width={70} height={22} />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  card: { backgroundColor: "#1a1a2e", borderRadius: 16, padding: 18, borderWidth: 1, borderColor: "#2a2a4e", gap: 10 },
+  row: { flexDirection: "row", alignItems: "center", gap: 12 },
+  timelineRow: { flexDirection: "row", gap: 12, paddingBottom: 2 },
+  line: { alignItems: "center", width: 24, paddingTop: 18 },
+  timelineCard: { flex: 1, backgroundColor: "#1a1a2e", borderRadius: 14, padding: 14, marginBottom: 8, borderWidth: 1, borderColor: "#2a2a4e", gap: 10 },
+});

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

@@ -0,0 +1,121 @@
+/**
+ * Swipeable inbox row — swipe left to reject, swipe right to assign.
+ * Uses Animated + PanResponder (no extra library needed).
+ * Minimum touch target: 48pt (Apple HIG / Material spec).
+ */
+import { useRef } from "react";
+import {
+  Animated, PanResponder, StyleSheet, Text, TouchableOpacity, View,
+} from "react-native";
+import { InboxItem } from "../lib/api";
+import { haptics } from "../lib/haptics";
+
+const SWIPE_THRESHOLD = 80;
+const ACTION_WIDTH = 72;
+
+type Props = {
+  item: InboxItem;
+  onAssign: () => void;
+  onReject: () => void;
+};
+
+export default function SwipeableInboxItem({ item, onAssign, onReject }: Props) {
+  const translateX = useRef(new Animated.Value(0)).current;
+  const parsed = item.parsed_data as Record<string, unknown> | null;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 8 && Math.abs(g.dy) < 20,
+      onPanResponderMove: (_, g) => {
+        translateX.setValue(Math.max(-ACTION_WIDTH * 1.5, Math.min(ACTION_WIDTH * 1.5, g.dx)));
+      },
+      onPanResponderRelease: async (_, g) => {
+        if (g.dx > SWIPE_THRESHOLD) {
+          await haptics.confirm();
+          snapBack();
+          onAssign();
+        } else if (g.dx < -SWIPE_THRESHOLD) {
+          await haptics.warning();
+          snapBack();
+          onReject();
+        } else {
+          snapBack();
+        }
+      },
+    })
+  ).current;
+
+  function snapBack() {
+    Animated.spring(translateX, { toValue: 0, useNativeDriver: true, damping: 15 }).start();
+  }
+
+  return (
+    <View style={s.wrapper}>
+      {/* Left action — assign (revealed by swipe right) */}
+      <View style={[s.action, s.actionAssign]}>
+        <Text style={s.actionIcon}>✅</Text>
+        <Text style={s.actionLabel}>Zuweisen</Text>
+      </View>
+
+      {/* Right action — reject (revealed by swipe left) */}
+      <View style={[s.action, s.actionReject]}>
+        <Text style={s.actionIcon}>🗑️</Text>
+        <Text style={s.actionLabel}>Ablehnen</Text>
+      </View>
+
+      {/* Card row */}
+      <Animated.View style={[s.card, { transform: [{ translateX }] }]} {...panResponder.panHandlers}>
+        <View style={s.typeCol}>
+          <Text style={s.typeIcon}>{typeIcon(parsed?.type as string)}</Text>
+        </View>
+
+        <View style={s.content}>
+          <Text style={s.title} numberOfLines={1}>
+            {(parsed?.title as string) ?? "Unbekanntes Dokument"}
+          </Text>
+          <Text style={s.sub} numberOfLines={1}>
+            {(parsed?.provider as string) ?? (item.source ?? "Unbekannte Quelle")}
+            {parsed?.booking_ref ? `  ·  #${parsed.booking_ref}` : ""}
+          </Text>
+          {!!parsed?.raw_summary && (
+            <Text style={s.summary} numberOfLines={2}>{parsed.raw_summary as string}</Text>
+          )}
+        </View>
+
+        {/* Explicit buttons as fallback for non-swipe users */}
+        <View style={s.actions}>
+          <TouchableOpacity style={s.btn} onPress={onAssign} hitSlop={{ top: 12, bottom: 12, left: 8, right: 8 }} accessibilityLabel="Zuweisen" accessibilityRole="button">
+            <Text style={s.btnText}>→</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={[s.btn, s.btnDanger]} onPress={onReject} hitSlop={{ top: 12, bottom: 12, left: 8, right: 8 }} accessibilityLabel="Ablehnen" accessibilityRole="button">
+            <Text style={s.btnText}>✕</Text>
+          </TouchableOpacity>
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
+function typeIcon(type?: string): string {
+  return ({ flight: "✈️", train: "🚂", bus: "🚌", hotel: "🏨", rental_car: "🚗", activity: "🎡", transfer: "🚕", document: "📄" } as Record<string, string>)[type ?? ""] ?? "📋";
+}
+
+const s = StyleSheet.create({
+  wrapper: { position: "relative", marginBottom: 10 },
+  action: { position: "absolute", top: 0, bottom: 0, width: ACTION_WIDTH, alignItems: "center", justifyContent: "center", borderRadius: 16, gap: 4 },
+  actionAssign: { left: 0, backgroundColor: "#16a34a33" },
+  actionReject: { right: 0, backgroundColor: "#dc262633" },
+  actionIcon: { fontSize: 22 },
+  actionLabel: { color: "#fff", fontSize: 11, fontWeight: "600" },
+  card: { backgroundColor: "#1a1a2e", borderRadius: 16, padding: 14, flexDirection: "row", alignItems: "center", gap: 12, borderWidth: 1, borderColor: "#2a2a4e", minHeight: 72 },
+  typeCol: { width: 36, alignItems: "center" },
+  typeIcon: { fontSize: 26 },
+  content: { flex: 1, gap: 3 },
+  title: { color: "#fff", fontSize: 15, fontWeight: "600" },
+  sub: { color: "#6666aa", fontSize: 12 },
+  summary: { color: "#8888aa", fontSize: 12, lineHeight: 17, marginTop: 2 },
+  actions: { gap: 6 },
+  btn: { width: 36, height: 36, borderRadius: 10, backgroundColor: "#2a2a4e", alignItems: "center", justifyContent: "center" },
+  btnDanger: { backgroundColor: "#3a1a1a" },
+  btnText: { color: "#fff", fontSize: 16 },
+});