fix(mail/oauth): drop User.Read scope — MS rejects multi-resource at /token

Microsoft V2.0 OAuth-Spezifikation: ein einzelner /token-Exchange darf nur
Scopes EINES Resource-Servers enthalten. Unsere bisherige Scope-Liste
mischte:

  https://outlook.office.com/IMAP.AccessAsUser.All  (outlook.office.com)
  User.Read                                          (graph.microsoft.com)

Im /authorize akzeptiert MS das (Multi-Consent-Screen), aber beim Token-
Exchange wirft MS AADSTS70011:
  "The provided value for the input parameter 'scope' is not valid.
   One or more scopes [...] are not compatible with each other."

Fix: User.Read raus. Display-Name in der App entfällt vorerst — Email
kommt sauber aus id_token.preferred_username (bei Consumer-MS-Accounts
typisch die Login-Email). Falls Display-Name künftig gebraucht wird →
separater Graph-Token-Exchange via On-Behalf-Of-Pattern.

Plus: ConnectMailSheet zeigt jetzt im roten Error-Banner den echten
Backend-Error (API-Status + Body) statt nur generischen Text — sonst
würden wir solche MS-Spezifika nie auf dem Device sehen.

Hans-Müller-Memo Section 3.1 (Datenkategorien) + Section 4.1
(Datenschutzerklärung) müssen entsprechend zurückgerollt werden — siehe
separater DSB-Update-Stream.

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

apps/rebreak-native/app/(app)/mail.tsx

@@ -275,20 +275,24 @@ export default function MailScreen() {
           <MailEmptyState onConnectPress={handleAddPress} />
         ) : (
           <View>
-            {accounts.map((account, idx) => (
+            {accounts.map((account, idx) => {
-              <View key={account.id} style={{ marginTop: idx === 0 ? 0 : 10 }}>
+              const connStat = blockedByConnection.find((c) => c.connectionId === account.id);
-                <MailAccountCard
+              return (
-                  account={account}
+                <View key={account.id} style={{ marginTop: idx === 0 ? 0 : 10 }}>
-                  plan={plan}
+                  <MailAccountCard
-                  expanded={expandedAccount === account.id}
+                    account={account}
-                  onToggle={() => toggleAccount(account.id)}
+                    plan={plan}
-                  onDisconnect={handleDisconnect}
+                    expanded={expandedAccount === account.id}
-                  onIntervalChanged={refresh}
+                    onToggle={() => toggleAccount(account.id)}
-                  onEditSuccess={handleConnectSuccess}
+                    onDisconnect={handleDisconnect}
-                  disconnecting={disconnectingId === account.id && disconnecting}
+                    onIntervalChanged={refresh}
-                />
+                    onEditSuccess={handleConnectSuccess}
-              </View>
+                    disconnecting={disconnectingId === account.id && disconnecting}
-            ))}
+                    blockedLast30d={connStat?.count}
+                  />
+                </View>
+              );
+            })}
           </View>
         )}
 

apps/rebreak-native/components/mail/ConnectMailSheet.tsx

@@ -190,6 +190,7 @@ export function ConnectMailSheet({ visible, onClose, onSuccess }: Props) {
         'rebreak://auth/mail-oauth-callback'
       );
 
+      console.log('[oauth] WebBrowser result.type=', result.type);
       if (result.type !== 'success') {
         setOauthError(t('mail.oauth.error_aborted'));
         setView('oauth_warning');
@@ -197,9 +198,23 @@ export function ConnectMailSheet({ visible, onClose, onSuccess }: Props) {
         return;
       }
 
-      const url = new URL(result.url);
+      console.log('[oauth] result.url=', (result as any).url);
+      const url = new URL((result as any).url);
       const code = url.searchParams.get('code');
       const state = url.searchParams.get('state');
+      const msError = url.searchParams.get('error');
+      const msErrorDescription = url.searchParams.get('error_description');
+      console.log('[oauth] code?=', !!code, 'state?=', !!state, 'msError=', msError, 'desc=', msErrorDescription);
+
+      if (msError) {
+        // Microsoft hat einen expliziten Error im Redirect zurückgegeben (z.B.
+        // access_denied wenn User Consent abbricht, invalid_redirect_uri wenn
+        // Azure-App-Config nicht stimmt). Zeig dem User den echten Grund.
+        setOauthError(`Microsoft: ${msError}${msErrorDescription ? ` — ${msErrorDescription}` : ''}`);
+        setView('oauth_warning');
+        setOauthRunning(false);
+        return;
+      }
 
       if (!code || !state) {
         setOauthError(t('mail.oauth.error_no_code'));
@@ -218,7 +233,12 @@ export function ConnectMailSheet({ visible, onClose, onSuccess }: Props) {
       handleClose();
       onSuccess();
     } catch (e: any) {
-      setOauthError(t('mail.oauth.error_callback_failed'));
+      // Den echten Backend-Fehler sichtbar machen statt nur generischen Text
+      // (apiFetch wirft `Error("API <status>: <body>")` — Status + Body landen
+      // dann sowohl in Metro-Logs als auch im UI-Banner).
+      const detail = (e?.message ?? String(e)) || 'unknown';
+      console.log('[oauth] callback API call failed — error=', detail);
+      setOauthError(`${t('mail.oauth.error_callback_failed')}\n${detail}`);
       setView('oauth_warning');
       setOauthRunning(false);
     }

apps/rebreak-native/components/mail/MailAccountCard.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import {
-  ActivityIndicator,
   LayoutAnimation,
   Linking,
   Modal,
@@ -15,8 +14,10 @@ import { useTranslation } from 'react-i18next';
 import { ConfirmAlert } from '../ConfirmAlert';
 import { EditMailAccountSheet } from './EditMailAccountSheet';
 import { EditMailTitleSheet } from './EditMailTitleSheet';
-import { useMailInterval } from '../../hooks/useMailInterval';
+import { MailAccountSettingsSheet } from './MailAccountSettingsSheet';
+import { MailBlockedByDayChart } from './MailBlockedByDayChart';
 import type { MailAccount } from '../../hooks/useMailStatus';
+import type { BlockedByDayEntry } from '../../hooks/useMailStats';
 
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
@@ -31,300 +32,10 @@ type Props = {
   onIntervalChanged: () => void;
   onEditSuccess: () => void;
   disconnecting?: boolean;
+  blockedLast30d?: number;
+  connectionBlockedByDay?: BlockedByDayEntry[];
 };
 
-function PausedBadge({ t }: { t: (k: string) => string }) {
-  return (
-    <View
-      style={{
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 5,
-        backgroundColor: 'rgba(115,115,115,0.1)',
-        alignSelf: 'flex-start',
-        marginTop: 3,
-      }}
-    >
-      <Text style={{ fontSize: 10, color: '#737373', fontFamily: 'Nunito_600SemiBold' }}>
-        {t('plan_limit.mail_account_paused')}
-      </Text>
-    </View>
-  );
-}
-
-function resolveProviderIcon(provider: string): {
-  icon: React.ComponentProps<typeof Ionicons>['name'];
-  color: string;
-} {
-  const p = provider.toLowerCase();
-  if (p.includes('gmail') || p.includes('google')) return { icon: 'mail', color: '#EA4335' };
-  if (p.includes('icloud') || p.includes('apple')) return { icon: 'cloud', color: '#007AFF' };
-  if (p.includes('outlook') || p.includes('hotmail') || p.includes('microsoft'))
-    return { icon: 'mail-open', color: '#0078D4' };
-  if (p.includes('yahoo')) return { icon: 'at', color: '#7C3AED' };
-  if (p.includes('gmx') || p.includes('web.de'))
-    return { icon: 'mail-unread', color: '#E87A22' };
-  return { icon: 'server', color: '#737373' };
-}
-
-function isOAuthProvider(provider: string): boolean {
-  return provider === 'outlook_oauth';
-}
-
-const STALE_THRESHOLD_MS = 5 * 60 * 1_000;
-const IDLE_HEARTBEAT_STALE_MS = STALE_THRESHOLD_MS;
-const NO_NEW_MAIL_THRESHOLD_MS = 60 * 60_000;
-
-function formatRelativeAbsolute(ts: Date): string {
-  const min = Math.floor((Date.now() - ts.getTime()) / 60_000);
-  const todayStr = new Date().toDateString();
-  const yesterdayStr = new Date(Date.now() - 86_400_000).toDateString();
-
-  const hh = ts.getHours().toString().padStart(2, '0');
-  const mm = ts.getMinutes().toString().padStart(2, '0');
-
-  let dayLabel: string;
-  if (ts.toDateString() === todayStr) dayLabel = 'heute';
-  else if (ts.toDateString() === yesterdayStr) dayLabel = 'gestern';
-  else dayLabel = ts.toLocaleDateString('de', { day: '2-digit', month: '2-digit' });
-
-  let rel: string;
-  if (min < 1) rel = 'gerade eben';
-  else if (min < 60) rel = `vor ${min} min`;
-  else if (min < 1440) rel = `vor ${Math.floor(min / 60)}h`;
-  else rel = `vor ${Math.floor(min / 1440)}d`;
-
-  return `${rel} (${dayLabel} ${hh}:${mm})`;
-}
-
-function idleHeartbeatAlive(lastIdleHeartbeatAt: string | null | undefined): boolean {
-  if (!lastIdleHeartbeatAt) return false;
-  return Date.now() - new Date(lastIdleHeartbeatAt).getTime() < IDLE_HEARTBEAT_STALE_MS;
-}
-
-function StatusBadgeRow({
-  account,
-  isLegend,
-  t,
-}: {
-  account: MailAccount;
-  isLegend: boolean;
-  t: (k: string, opts?: Record<string, string | number>) => string;
-}) {
-  if (account.lastConnectError) {
-    const isAuthError =
-      account.lastConnectError.toLowerCase().includes('invalid credentials') ||
-      account.lastConnectError.toLowerCase().includes('authentication failed');
-    const errorLabel = isAuthError ? t('mail.status_auth_error') : t('mail.status_connect_error');
-    const since = account.lastConnectErrorAt
-      ? formatRelativeAbsolute(new Date(account.lastConnectErrorAt))
-      : null;
-    return (
-      <View style={{ marginTop: 3 }}>
-        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          <Ionicons name="lock-closed" size={11} color="#dc2626" style={{ marginRight: 4 }} />
-          <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#dc2626' }}>
-            {errorLabel}
-          </Text>
-          <Text
-            style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginLeft: 4 }}
-          >
-            · {t('mail.status_error_tap_hint')}
-          </Text>
-        </View>
-        {since ? (
-          <Text
-            style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
-          >
-            {since}
-          </Text>
-        ) : null}
-      </View>
-    );
-  }
-
-  if (!account.lastScannedAt) {
-    return (
-      <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 3 }}>
-        <View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#a3a3a3', marginRight: 5 }} />
-        <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#a3a3a3' }}>
-          {t('mail.status_waiting_first_connect')}
-        </Text>
-      </View>
-    );
-  }
-
-  const heartbeatAlive = idleHeartbeatAlive(account.lastIdleHeartbeatAt);
-  const lastScannedTs = new Date(account.lastScannedAt);
-  const scannedAgo = Date.now() - lastScannedTs.getTime();
-  const scannedRelAbs = formatRelativeAbsolute(lastScannedTs);
-
-  if (!heartbeatAlive && scannedAgo > STALE_THRESHOLD_MS) {
-    return (
-      <View style={{ marginTop: 3 }}>
-        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          <View
-            style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#d97706', marginRight: 5 }}
-          />
-          <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#d97706' }}>
-            {t('mail.status_stale')}
-          </Text>
-        </View>
-        <Text
-          style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
-          numberOfLines={1}
-        >
-          {t('mail.status_stale_last_scan', { rel: scannedRelAbs })}
-        </Text>
-      </View>
-    );
-  }
-
-  if (heartbeatAlive) {
-    const heartbeatTs = new Date(account.lastIdleHeartbeatAt!);
-    const heartbeatMin = Math.floor((Date.now() - heartbeatTs.getTime()) / 60_000);
-    const idleSince = heartbeatMin < 1 ? 'gerade eben' : `${heartbeatMin} min`;
-
-    if (scannedAgo > NO_NEW_MAIL_THRESHOLD_MS) {
-      return (
-        <View style={{ marginTop: 3 }}>
-          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-            <View
-              style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#16a34a', marginRight: 5 }}
-            />
-            <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}>
-              {isLegend ? t('mail.live') : t('mail.account_active')}
-            </Text>
-          </View>
-          <Text
-            style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
-            numberOfLines={1}
-          >
-            {t('mail.status_live_no_new_mail', { rel: scannedRelAbs })}
-          </Text>
-        </View>
-      );
-    }
-
-    return (
-      <View style={{ marginTop: 3 }}>
-        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          <View
-            style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#16a34a', marginRight: 5 }}
-          />
-          <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}>
-            {isLegend ? t('mail.live') : t('mail.account_active')}
-          </Text>
-        </View>
-        <Text
-          style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
-          numberOfLines={1}
-        >
-          {t('mail.status_live_idle', { rel: idleSince })}
-        </Text>
-      </View>
-    );
-  }
-
-  return (
-    <View style={{ marginTop: 3 }}>
-      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-        <View
-          style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#16a34a', marginRight: 5 }}
-        />
-        <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}>
-          {isLegend ? t('mail.live') : t('mail.account_active')}
-        </Text>
-      </View>
-      <Text
-        style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
-        numberOfLines={1}
-      >
-        {formatRelativeAbsolute(new Date(account.lastScannedAt!))}
-      </Text>
-    </View>
-  );
-}
-
-const INTERVAL_OPTIONS_BY_PLAN: Record<'free' | 'pro' | 'legend', number[]> = {
-  free: [4],
-  pro: [1, 4, 8],
-  legend: [1, 4, 8],
-};
-
-function maskEmail(email: string): string {
-  const [local, domain] = email.split('@');
-  if (!local || !domain) return email;
-  if (local.length <= 3) return `${local[0]}***@${domain}`;
-  return `${local.slice(0, 3)}***@${domain}`;
-}
-
-function domainFromEmail(email: string): string {
-  return email.split('@')[1] ?? email;
-}
-
-function SettingsRow({
-  icon,
-  label,
-  value,
-  onPress,
-  destructive,
-}: {
-  icon: React.ComponentProps<typeof Ionicons>['name'];
-  label: string;
-  value?: string;
-  onPress?: () => void;
-  destructive?: boolean;
-}) {
-  const color = destructive ? '#dc2626' : '#0a0a0a';
-  const Wrapper = onPress ? TouchableOpacity : View;
-  const wrapperProps = onPress
-    ? { activeOpacity: 0.7, onPress }
-    : {};
-
-  return (
-    <Wrapper
-      {...wrapperProps}
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingVertical: 12,
-        paddingHorizontal: 14,
-        borderTopWidth: 1,
-        borderTopColor: '#f5f5f5',
-      }}
-    >
-      <Ionicons name={icon} size={16} color={destructive ? '#dc2626' : '#737373'} style={{ marginRight: 12, width: 20 }} />
-      <Text
-        style={{
-          flex: 1,
-          fontSize: 14,
-          fontFamily: 'Nunito_600SemiBold',
-          color,
-        }}
-      >
-        {label}
-      </Text>
-      {value !== undefined && (
-        <Text
-          style={{
-            fontSize: 13,
-            fontFamily: 'Nunito_400Regular',
-            color: '#a3a3a3',
-            marginRight: onPress ? 4 : 0,
-          }}
-          numberOfLines={1}
-        >
-          {value}
-        </Text>
-      )}
-      {onPress && !destructive && (
-        <Ionicons name="chevron-forward" size={14} color="#d4d4d4" />
-      )}
-    </Wrapper>
-  );
-}
-
 function OAuthDisconnectHintModal({
   visible,
   onClose,
@@ -440,6 +151,97 @@ function OAuthDisconnectHintModal({
   );
 }
 
+function resolveProviderIcon(provider: string): {
+  icon: React.ComponentProps<typeof Ionicons>['name'];
+  color: string;
+} {
+  const p = provider.toLowerCase();
+  if (p.includes('gmail') || p.includes('google')) return { icon: 'mail', color: '#EA4335' };
+  if (p.includes('icloud') || p.includes('apple')) return { icon: 'cloud', color: '#007AFF' };
+  if (p.includes('outlook') || p.includes('hotmail') || p.includes('microsoft'))
+    return { icon: 'mail-open', color: '#0078D4' };
+  if (p.includes('yahoo')) return { icon: 'at', color: '#7C3AED' };
+  if (p.includes('gmx') || p.includes('web.de'))
+    return { icon: 'mail-unread', color: '#E87A22' };
+  return { icon: 'server', color: '#737373' };
+}
+
+function isOAuthProvider(provider: string): boolean {
+  return provider === 'outlook_oauth';
+}
+
+const STALE_THRESHOLD_MS = 5 * 60 * 1_000;
+const IDLE_HEARTBEAT_STALE_MS = STALE_THRESHOLD_MS;
+
+function idleHeartbeatAlive(lastIdleHeartbeatAt: string | null | undefined): boolean {
+  if (!lastIdleHeartbeatAt) return false;
+  return Date.now() - new Date(lastIdleHeartbeatAt).getTime() < IDLE_HEARTBEAT_STALE_MS;
+}
+
+function domainFromEmail(email: string): string {
+  return email.split('@')[1] ?? email;
+}
+
+type StatusDot = 'live' | 'stale' | 'error' | 'waiting';
+
+function resolveStatusDot(account: MailAccount): StatusDot {
+  if (account.lastConnectError) return 'error';
+  if (!account.lastScannedAt) return 'waiting';
+  const heartbeatAlive = idleHeartbeatAlive(account.lastIdleHeartbeatAt);
+  const scannedAgo = Date.now() - new Date(account.lastScannedAt).getTime();
+  if (!heartbeatAlive && scannedAgo > STALE_THRESHOLD_MS) return 'stale';
+  return 'live';
+}
+
+function StatusDotRow({
+  account,
+  isLegend,
+  blockedLast30d,
+  t,
+}: {
+  account: MailAccount;
+  isLegend: boolean;
+  blockedLast30d: number | undefined;
+  t: (k: string) => string;
+}) {
+  const dot = resolveStatusDot(account);
+
+  const dotColor =
+    dot === 'live' ? '#16a34a' :
+    dot === 'stale' ? '#d97706' :
+    dot === 'error' ? '#dc2626' :
+    '#a3a3a3';
+
+  const label =
+    dot === 'live' ? (isLegend ? t('mail.live') : t('mail.account_active')) :
+    dot === 'stale' ? t('mail.status_stale') :
+    dot === 'error' ? t('mail.status_auth_error') :
+    t('mail.status_waiting_first_connect');
+
+  const blockedLabel =
+    blockedLast30d !== undefined
+      ? `${blockedLast30d}`
+      : account.totalBlocked > 0
+        ? `${account.totalBlocked}`
+        : '0';
+
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 3 }}>
+      <View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: dotColor, marginRight: 5 }} />
+      <Text
+        style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: dotColor, flex: 1 }}
+        numberOfLines={1}
+      >
+        {label}
+      </Text>
+      <Text style={{ fontSize: 12, fontFamily: 'Nunito_700Bold', color: '#525252', marginRight: 6 }}>
+        {blockedLabel}
+      </Text>
+      <Ionicons name="shield-checkmark" size={11} color="#a3a3a3" />
+    </View>
+  );
+}
+
 export function MailAccountCard({
   account,
   plan,
@@ -449,26 +251,27 @@ export function MailAccountCard({
   onIntervalChanged,
   onEditSuccess,
   disconnecting,
+  blockedLast30d,
+  connectionBlockedByDay,
 }: Props) {
   const { t } = useTranslation();
-  const [confirmVisible, setConfirmVisible] = useState(false);
+  const [settingsVisible, setSettingsVisible] = useState(false);
   const [editPasswordVisible, setEditPasswordVisible] = useState(false);
   const [editTitleVisible, setEditTitleVisible] = useState(false);
+  const [confirmVisible, setConfirmVisible] = useState(false);
   const [oauthDisconnectHintVisible, setOauthDisconnectHintVisible] = useState(false);
   const [localTitle, setLocalTitle] = useState<string | null>(account.title ?? null);
-  const { setInterval, updating } = useMailInterval();
   const { icon, color } = resolveProviderIcon(account.provider);
 
   const isOAuth = isOAuthProvider(account.provider);
   const isLegend = plan === 'legend';
   const isPaused = account.paused === true;
-  const intervalOptions = INTERVAL_OPTIONS_BY_PLAN[plan];
+  const hasError = !!account.lastConnectError;
 
   const displayTitle = localTitle ?? domainFromEmail(account.email);
-  const subEmail = maskEmail(account.email);
 
   function handleToggle() {
-    if (account.lastConnectError) {
+    if (hasError) {
       setEditPasswordVisible(true);
       return;
     }
@@ -476,11 +279,6 @@ export function MailAccountCard({
     onToggle();
   }
 
-  async function handleSetInterval(value: number) {
-    const res = await setInterval(account.id, value);
-    if (res.ok) onIntervalChanged();
-  }
-
   function handleTitleSaved(newTitle: string | null) {
     setLocalTitle(newTitle);
     onEditSuccess();
@@ -493,25 +291,25 @@ export function MailAccountCard({
           backgroundColor: isPaused ? '#fafafa' : '#fff',
           borderRadius: 16,
           borderWidth: 1,
-          borderColor: account.lastConnectError ? '#fecaca' : isPaused ? '#d4d4d4' : '#e5e5e5',
+          borderColor: hasError ? '#fecaca' : isPaused ? '#d4d4d4' : '#e5e5e5',
           overflow: 'hidden',
           opacity: isPaused ? 0.75 : 1,
         }}
       >
-        {/* Header — always visible, tap to expand settings */}
+        {/* Header */}
         <TouchableOpacity onPress={handleToggle} activeOpacity={0.85}>
           <View
             style={{
               flexDirection: 'row',
               alignItems: 'center',
               paddingHorizontal: 14,
-              paddingVertical: 14,
+              paddingVertical: 13,
             }}
           >
             <View
               style={{
-                width: 40,
+                width: 38,
-                height: 40,
+                height: 38,
                 borderRadius: 10,
                 backgroundColor: color + '18',
                 alignItems: 'center',
@@ -519,11 +317,10 @@ export function MailAccountCard({
                 marginRight: 12,
               }}
             >
-              <Ionicons name={icon} size={19} color={color} />
+              <Ionicons name={icon} size={18} color={color} />
             </View>
 
-            <View style={{ flex: 1, minWidth: 0, marginRight: 8 }}>
+            <View style={{ flex: 1, minWidth: 0 }}>
-              {/* Title — prominent */}
               <Text
                 style={{
                   fontSize: 15,
@@ -534,240 +331,102 @@ export function MailAccountCard({
               >
                 {displayTitle}
               </Text>
-              {/* Email — small sub-label */}
+              {isPaused ? (
-              <Text
+                <View style={{ marginTop: 3 }}>
-                style={{
+                  <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#737373' }}>
-                  fontSize: 11,
+                    {t('plan_limit.mail_account_paused')}
-                  fontFamily: 'Nunito_400Regular',
+                  </Text>
-                  color: '#a3a3a3',
+                </View>
-                  marginTop: 1,
+              ) : (
-                }}
+                <StatusDotRow
-                numberOfLines={1}
+                  account={account}
-              >
+                  isLegend={isLegend}
-                {subEmail}
+                  blockedLast30d={blockedLast30d}
-              </Text>
+                  t={t}
-              {isPaused
+                />
-                ? <PausedBadge t={t} />
+              )}
-                : <StatusBadgeRow account={account} isLegend={isLegend} t={t} />
-              }
             </View>
 
             <Ionicons
               name={expanded ? 'chevron-up' : 'chevron-down'}
               size={18}
               color="#a3a3a3"
+              style={{ marginLeft: 8 }}
             />
           </View>
         </TouchableOpacity>
 
-        {/* Collapsible: Settings section */}
+        {/* Expanded body */}
         {expanded && (
           <View style={{ borderTopWidth: 1, borderTopColor: '#f5f5f5' }}>
-            {/* Stats banner */}
+            {/* Per-connection bar chart */}
-            <View
+            <View style={{ paddingHorizontal: 14, paddingTop: 14, paddingBottom: 4 }}>
-              style={{
+              {connectionBlockedByDay && connectionBlockedByDay.length > 0 ? (
-                flexDirection: 'row',
+                <MailBlockedByDayChart data={connectionBlockedByDay} />
-                alignItems: 'center',
+              ) : (
-                backgroundColor: '#fef2f2',
+                <View
-                marginHorizontal: 14,
-                marginTop: 14,
-                borderRadius: 12,
-                paddingHorizontal: 14,
-                paddingVertical: 12,
-                marginBottom: 12,
-              }}
-            >
-              <Ionicons name="shield-checkmark" size={20} color="#dc2626" style={{ marginRight: 10 }} />
-              <View style={{ flex: 1 }}>
-                <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#dc2626' }}>
-                  {t('mail.account_stat_blocked')}
-                </Text>
-                <Text
                   style={{
-                    fontSize: 22,
+                    borderRadius: 12,
-                    fontFamily: 'Nunito_800ExtraBold',
+                    backgroundColor: '#f9fafb',
-                    color: '#dc2626',
+                    borderWidth: 1,
-                    marginTop: 1,
+                    borderColor: '#e5e5e5',
+                    paddingHorizontal: 14,
+                    paddingVertical: 16,
+                    alignItems: 'center',
                   }}
                 >
-                  {account.totalBlocked.toLocaleString()}
+                  <Text style={{ fontSize: 12, fontFamily: 'Nunito_400Regular', color: '#a3a3a3' }}>
-                </Text>
+                    {t('mail.account_chart_unavailable')}
-              </View>
-              <Text style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: '#737373' }}>
-                {t('mail.account_of_scanned', {
-                  scanned: account.totalScanned.toLocaleString(),
-                })}
-              </Text>
-            </View>
-
-            {/* Scan interval (non-legend) */}
-            {isLegend ? (
-              <View
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  backgroundColor: '#f0fdf4',
-                  borderRadius: 10,
-                  marginHorizontal: 14,
-                  paddingHorizontal: 12,
-                  paddingVertical: 10,
-                  marginBottom: 12,
-                }}
-              >
-                <Ionicons name="flash" size={14} color="#16a34a" style={{ marginRight: 8 }} />
-                <Text
-                  style={{
-                    flex: 1,
-                    fontSize: 12,
-                    fontFamily: 'Nunito_600SemiBold',
-                    color: '#16a34a',
-                  }}
-                >
-                  {t('mail.realtime_desc')}
-                </Text>
-              </View>
-            ) : (
-              <View style={{ marginHorizontal: 14, marginBottom: 12 }}>
-                <Text
-                  style={{
-                    fontSize: 11,
-                    fontFamily: 'Nunito_600SemiBold',
-                    color: '#737373',
-                    textTransform: 'uppercase',
-                    letterSpacing: 0.6,
-                    marginBottom: 6,
-                  }}
-                >
-                  {t('mail.scan_interval_label')}
-                </Text>
-                <View style={{ flexDirection: 'row' }}>
-                  {intervalOptions.map((opt, idx) => {
-                    const active = account.scanInterval === opt;
-                    const disabled = plan === 'free' || updating === account.id;
-                    return (
-                      <TouchableOpacity
-                        key={opt}
-                        activeOpacity={0.7}
-                        disabled={disabled}
-                        onPress={() => handleSetInterval(opt)}
-                        style={{
-                          flex: 1,
-                          paddingVertical: 9,
-                          borderRadius: 10,
-                          alignItems: 'center',
-                          backgroundColor: active ? '#007AFF' : '#f5f5f5',
-                          marginLeft: idx === 0 ? 0 : 6,
-                          opacity: disabled && !active ? 0.5 : 1,
-                        }}
-                      >
-                        <Text
-                          style={{
-                            fontSize: 13,
-                            fontFamily: 'Nunito_700Bold',
-                            color: active ? '#fff' : '#525252',
-                          }}
-                        >
-                          {opt}h
-                        </Text>
-                      </TouchableOpacity>
-                    );
-                  })}
-                </View>
-                {plan === 'free' && (
-                  <Text
-                    style={{
-                      fontSize: 10,
-                      fontFamily: 'Nunito_400Regular',
-                      color: '#a3a3a3',
-                      marginTop: 6,
-                    }}
-                  >
-                    {t('mail.free_scan_interval_hint')}
                   </Text>
-                )}
+                </View>
-              </View>
+              )}
-            )}
-
-            {/* Settings separator label */}
-            <View
-              style={{
-                paddingHorizontal: 14,
-                paddingBottom: 4,
-                borderTopWidth: 1,
-                borderTopColor: '#f5f5f5',
-                paddingTop: 10,
-              }}
-            >
-              <Text
-                style={{
-                  fontSize: 11,
-                  fontFamily: 'Nunito_700Bold',
-                  color: '#a3a3a3',
-                  textTransform: 'uppercase',
-                  letterSpacing: 0.6,
-                }}
-              >
-                {t('mail.settings_section_label')}
-              </Text>
             </View>
 
-            {/* Settings rows */}
+            {/* Einstellungen tap-row */}
-            <SettingsRow
-              icon="pencil-outline"
-              label={t('mail.row_title')}
-              value={localTitle ?? '—'}
-              onPress={() => setEditTitleVisible(true)}
-            />
-
-            <SettingsRow
-              icon="mail-outline"
-              label={t('mail.row_email')}
-              value={account.email}
-            />
-
-            {!isOAuth && (
-              <SettingsRow
-                icon="key-outline"
-                label={t('mail.row_password')}
-                value="••••••••"
-                onPress={() => setEditPasswordVisible(true)}
-              />
-            )}
-
             <TouchableOpacity
               activeOpacity={0.7}
-              onPress={() => setConfirmVisible(true)}
+              onPress={() => setSettingsVisible(true)}
-              disabled={disconnecting}
               style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                paddingVertical: 12,
                 paddingHorizontal: 14,
+                paddingVertical: 13,
                 borderTopWidth: 1,
                 borderTopColor: '#f5f5f5',
-                opacity: disconnecting ? 0.5 : 1,
+                marginTop: 8,
               }}
             >
-              {disconnecting ? (
-                <ActivityIndicator size="small" color="#dc2626" style={{ marginRight: 12, width: 20 }} />
-              ) : (
-                <Ionicons name="trash-outline" size={16} color="#dc2626" style={{ marginRight: 12, width: 20 }} />
-              )}
               <Text
                 style={{
                   flex: 1,
                   fontSize: 14,
                   fontFamily: 'Nunito_600SemiBold',
-                  color: '#dc2626',
+                  color: '#0a0a0a',
                 }}
               >
-                {t('mail.row_disconnect')}
+                {t('mail.settings_section_label')}
               </Text>
+              <Ionicons name="chevron-forward" size={16} color="#a3a3a3" />
             </TouchableOpacity>
           </View>
         )}
       </View>
 
+      {/* Settings sub-sheet */}
+      <MailAccountSettingsSheet
+        visible={settingsVisible}
+        account={account}
+        localTitle={localTitle}
+        isOAuth={isOAuth}
+        plan={plan}
+        disconnecting={disconnecting}
+        onClose={() => setSettingsVisible(false)}
+        onEditTitle={() => { setSettingsVisible(false); setEditTitleVisible(true); }}
+        onEditPassword={() => { setSettingsVisible(false); setEditPasswordVisible(true); }}
+        onDisconnectRequest={() => { setSettingsVisible(false); setConfirmVisible(true); }}
+        onIntervalChanged={onIntervalChanged}
+      />
+
       <ConfirmAlert
         visible={confirmVisible}
         title={t('mail.disconnect_confirm_title')}

apps/rebreak-native/components/mail/MailAccountSettingsSheet.tsx

@@ -0,0 +1,274 @@
+import { Text, TouchableOpacity, View } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useTranslation } from 'react-i18next';
+import { FormSheet } from '../FormSheet';
+import { useMailInterval } from '../../hooks/useMailInterval';
+import type { MailAccount } from '../../hooks/useMailStatus';
+
+type Props = {
+  visible: boolean;
+  account: MailAccount;
+  localTitle: string | null;
+  isOAuth: boolean;
+  plan: 'free' | 'pro' | 'legend';
+  disconnecting?: boolean;
+  onClose: () => void;
+  onEditTitle: () => void;
+  onEditPassword: () => void;
+  onDisconnectRequest: () => void;
+  onIntervalChanged: () => void;
+};
+
+const INTERVAL_OPTIONS_BY_PLAN: Record<'free' | 'pro' | 'legend', number[]> = {
+  free: [4],
+  pro: [1, 4, 8],
+  legend: [1, 4, 8],
+};
+
+function domainFromEmail(email: string): string {
+  return email.split('@')[1] ?? email;
+}
+
+function SettingsRow({
+  icon,
+  label,
+  value,
+  onPress,
+  destructive,
+}: {
+  icon: React.ComponentProps<typeof Ionicons>['name'];
+  label: string;
+  value?: string;
+  onPress?: () => void;
+  destructive?: boolean;
+}) {
+  const labelColor = destructive ? '#dc2626' : '#0a0a0a';
+  const Wrapper = onPress ? TouchableOpacity : View;
+  const wrapperProps = onPress ? { activeOpacity: 0.7 as const, onPress } : {};
+
+  return (
+    <Wrapper
+      {...(wrapperProps as any)}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 13,
+        paddingHorizontal: 16,
+        borderBottomWidth: 1,
+        borderBottomColor: '#f5f5f5',
+      }}
+    >
+      <Ionicons
+        name={icon}
+        size={16}
+        color={destructive ? '#dc2626' : '#737373'}
+        style={{ marginRight: 12, width: 20 }}
+      />
+      <Text
+        style={{ flex: 1, fontSize: 14, fontFamily: 'Nunito_600SemiBold', color: labelColor }}
+      >
+        {label}
+      </Text>
+      {value !== undefined && (
+        <Text
+          style={{
+            fontSize: 13,
+            fontFamily: 'Nunito_400Regular',
+            color: '#a3a3a3',
+            marginRight: onPress && !destructive ? 4 : 0,
+            maxWidth: 160,
+          }}
+          numberOfLines={1}
+        >
+          {value}
+        </Text>
+      )}
+      {onPress && !destructive && (
+        <Ionicons name="chevron-forward" size={14} color="#d4d4d4" />
+      )}
+    </Wrapper>
+  );
+}
+
+export function MailAccountSettingsSheet({
+  visible,
+  account,
+  localTitle,
+  isOAuth,
+  plan,
+  disconnecting,
+  onClose,
+  onEditTitle,
+  onEditPassword,
+  onDisconnectRequest,
+  onIntervalChanged,
+}: Props) {
+  const { t } = useTranslation();
+  const { setInterval, updating } = useMailInterval();
+  const isLegend = plan === 'legend';
+  const intervalOptions = INTERVAL_OPTIONS_BY_PLAN[plan];
+
+  const displayTitle = localTitle ?? domainFromEmail(account.email);
+
+  async function handleSetInterval(value: number) {
+    const res = await setInterval(account.id, value);
+    if (res.ok) onIntervalChanged();
+  }
+
+  return (
+    <FormSheet
+      visible={visible}
+      onClose={onClose}
+      title={displayTitle}
+      initialHeightPct={0.55}
+      growWithKeyboard={false}
+    >
+      <View style={{ paddingTop: 8 }}>
+        {/* Bezeichnung */}
+        <SettingsRow
+          icon="pencil-outline"
+          label={t('mail.row_title')}
+          value={localTitle ?? '—'}
+          onPress={onEditTitle}
+        />
+
+        {/* E-Mail (read-only) */}
+        <SettingsRow
+          icon="mail-outline"
+          label={t('mail.row_email')}
+          value={account.email}
+        />
+
+        {/* Passwort — nur für IMAP-Accounts */}
+        {!isOAuth && (
+          <SettingsRow
+            icon="key-outline"
+            label={t('mail.row_password')}
+            value="••••••••"
+            onPress={onEditPassword}
+          />
+        )}
+
+        {/* Scan-Intervall */}
+        {!isLegend ? (
+          <View
+            style={{
+              paddingHorizontal: 16,
+              paddingVertical: 14,
+              borderBottomWidth: 1,
+              borderBottomColor: '#f5f5f5',
+            }}
+          >
+            <Text
+              style={{
+                fontSize: 11,
+                fontFamily: 'Nunito_600SemiBold',
+                color: '#737373',
+                textTransform: 'uppercase',
+                letterSpacing: 0.6,
+                marginBottom: 8,
+              }}
+            >
+              {t('mail.scan_interval_label')}
+            </Text>
+            <View style={{ flexDirection: 'row', gap: 6 }}>
+              {intervalOptions.map((opt) => {
+                const active = account.scanInterval === opt;
+                const disabled = plan === 'free' || updating === account.id;
+                return (
+                  <TouchableOpacity
+                    key={opt}
+                    activeOpacity={0.7}
+                    disabled={disabled}
+                    onPress={() => handleSetInterval(opt)}
+                    style={{
+                      flex: 1,
+                      paddingVertical: 9,
+                      borderRadius: 10,
+                      alignItems: 'center',
+                      backgroundColor: active ? '#007AFF' : '#f5f5f5',
+                      opacity: disabled && !active ? 0.5 : 1,
+                    }}
+                  >
+                    <Text
+                      style={{
+                        fontSize: 13,
+                        fontFamily: 'Nunito_700Bold',
+                        color: active ? '#fff' : '#525252',
+                      }}
+                    >
+                      {opt}h
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+            {plan === 'free' && (
+              <Text
+                style={{
+                  fontSize: 10,
+                  fontFamily: 'Nunito_400Regular',
+                  color: '#a3a3a3',
+                  marginTop: 6,
+                }}
+              >
+                {t('mail.free_scan_interval_hint')}
+              </Text>
+            )}
+          </View>
+        ) : (
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              backgroundColor: '#f0fdf4',
+              marginHorizontal: 16,
+              marginVertical: 10,
+              borderRadius: 10,
+              paddingHorizontal: 12,
+              paddingVertical: 10,
+            }}
+          >
+            <Ionicons name="flash" size={14} color="#16a34a" style={{ marginRight: 8 }} />
+            <Text
+              style={{ flex: 1, fontSize: 12, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}
+            >
+              {t('mail.realtime_desc')}
+            </Text>
+          </View>
+        )}
+
+        {/* Separator */}
+        <View style={{ height: 20 }} />
+
+        {/* Verbindung trennen */}
+        <TouchableOpacity
+          activeOpacity={0.7}
+          onPress={onDisconnectRequest}
+          disabled={disconnecting}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingVertical: 13,
+            paddingHorizontal: 16,
+            borderTopWidth: 1,
+            borderTopColor: '#f5f5f5',
+            opacity: disconnecting ? 0.5 : 1,
+          }}
+        >
+          <Ionicons
+            name="trash-outline"
+            size={16}
+            color="#dc2626"
+            style={{ marginRight: 12, width: 20 }}
+          />
+          <Text
+            style={{ flex: 1, fontSize: 14, fontFamily: 'Nunito_600SemiBold', color: '#dc2626' }}
+          >
+            {t('mail.row_disconnect')}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </FormSheet>
+  );
+}

apps/rebreak-native/components/mail/MailDistributionChart.tsx

@@ -14,10 +14,16 @@ const OTHER_COLOR = '#a3a3a3';
 const MAX_SLICES = 5;
 
 const R_OUTER = 54;
-const R_INNER = 32;
+const R_INNER = 34;
 const CX = 64;
 const CY = 64;
 
+// Half-donut renders the UPPER semicircle (flat edge at bottom).
+// CY=64 places the center at the bottom of the 68px-tall viewBox.
+// angleDeg=0 → top (12 o'clock), angleDeg=-90 → left, angleDeg=90 → right.
+// Slices sweep from -90° (left) to +90° (right) = 180° total.
+const HALF_DONUT_START_DEG = -90;
+
 function domainFromEmail(email: string): string {
   return email.split('@')[1] ?? email;
 }
@@ -42,12 +48,11 @@ function arcPath(
   startDeg: number,
   endDeg: number,
 ): string {
-  const clampedEnd = Math.min(endDeg, startDeg + 179.99);
   const outerStart = polarToXY(cx, cy, rOuter, startDeg);
-  const outerEnd = polarToXY(cx, cy, rOuter, clampedEnd);
+  const outerEnd = polarToXY(cx, cy, rOuter, endDeg);
-  const innerEnd = polarToXY(cx, cy, rInner, clampedEnd);
+  const innerEnd = polarToXY(cx, cy, rInner, endDeg);
   const innerStart = polarToXY(cx, cy, rInner, startDeg);
-  const large = clampedEnd - startDeg > 90 ? 1 : 0;
+  const large = endDeg - startDeg > 180 ? 1 : 0;
 
   return [
     `M ${outerStart.x} ${outerStart.y}`,
@@ -90,7 +95,7 @@ export function MailDistributionChart({ data }: Props) {
 
   if (data.length <= 1 || total === 0) return null;
 
-  let cursor = 0;
+  let cursor = HALF_DONUT_START_DEG;
 
   return (
     <View
@@ -118,7 +123,7 @@ export function MailDistributionChart({ data }: Props) {
       </Text>
 
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
-        {/* Half-donut — upper half of a donut ring, 180° arc from left to right */}
+        {/* Half-donut — upper semicircle, center pinned at bottom of viewBox */}
         <Svg width={128} height={68} viewBox="0 0 128 68">
           {slices.map((slice) => {
             const sweep = (slice.count / total) * 180;
@@ -132,7 +137,7 @@ export function MailDistributionChart({ data }: Props) {
               />
             );
           })}
-          {/* Center circle to keep donut look consistent */}
+          {/* Inner fill to enforce donut shape */}
           <Circle cx={CX} cy={CY} r={R_INNER - 1} fill={colors.surface} />
         </Svg>
 

apps/rebreak-native/locales/de.json

@@ -449,6 +449,7 @@
     "row_email": "E-Mail",
     "row_password": "Passwort",
     "row_disconnect": "Verbindung trennen",
+    "account_chart_unavailable": "Tages-Verlauf wird geladen …",
     "disconnect_confirm_title": "Verbindung trennen?",
     "disconnect_confirm_body": "%{email} wird getrennt und alle Scan-Daten gelöscht.",
     "stats": {

apps/rebreak-native/locales/en.json

@@ -449,6 +449,7 @@
     "row_email": "Email",
     "row_password": "Password",
     "row_disconnect": "Disconnect",
+    "account_chart_unavailable": "Daily chart loading …",
     "disconnect_confirm_title": "Disconnect mailbox?",
     "disconnect_confirm_body": "%{email} will be disconnected and all scan data deleted.",
     "stats": {

backend/server/utils/ms-oauth.ts

@@ -19,14 +19,20 @@ export const MS_AUTH_BASE = `https://login.microsoftonline.com/${MS_TENANT}/oaut
 /**
  * OAuth scopes requested.
  * Matches the DSGVO-Memo Section 4.3 (Datenminimierung).
- * User.Read is included per User decision (email extraction from ID-token).
+ *
- * Hans-Müller-Memo will document this in the next revision.
+ * Single-resource constraint: Microsoft V2.0 erlaubt im /token-Exchange nur
+ * Scopes EINES Resource-Servers. IMAP.AccessAsUser.All zielt auf
+ * outlook.office.com, User.Read auf graph.microsoft.com — die Kombination
+ * wirft `AADSTS70011: scopes are not compatible with each other`.
+ *
+ * Daher: KEIN User.Read. Email-Adresse kommt aus dem id_token-Claim
+ * `preferred_username` (openid-Scope reicht). Falls künftig der Display-Name
+ * gebraucht wird → separater Microsoft-Graph-Token-Exchange (OBO-Pattern).
  */
 export const MS_OAUTH_SCOPES = [
   "https://outlook.office.com/IMAP.AccessAsUser.All",
   "offline_access",
   "openid",
-  "User.Read",
 ].join(" ");
 
 /**