feat(native): realtime debug page + protected-devices array guard

- stores/realtimeDebug.ts: neuer DEV-only Zustand-Store mit connection-state,
  reconnect-counter, token-expiry-countdown, channel-liste, rolling log-buffer
  (last 100 events). Hookt Phoenix-Socket open/close/reconnect + Channel-subscribe.
- _layout.tsx: initRealtimeDebug() im __DEV__-Block beim App-Start.
- debug.tsx: zwei neue Cards (RealtimeStatusCard + RealtimeLogCard) mit
  1s-Tick-Refresh, Copy + Clear Buttons. Settings-Entry 'Realtime connection (DEV)'.
- protectedDevices.ts: Array.isArray-Guard für apiFetch-Response — verhindert
  TypeError 'devices.filter is not a function' wenn Backend Non-Array zurückgibt.

Diagnostik-Tool für Realtime-Disconnect-Bug bei lange eingeloggten Usern.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

apps/rebreak-native/app/_layout.tsx

@@ -17,6 +17,7 @@ import {
 } from '@expo-google-fonts/nunito';
 import { useAuthStore } from '../stores/auth';
 import { useThemeStore } from '../stores/theme';
+import { useRealtimeDebugStore } from '../stores/realtimeDebug';
 import { useColors } from '../lib/theme';
 import { useLanguageStore } from '../stores/language';
 import { useAppLockStore } from '../stores/appLock';
@@ -53,6 +54,7 @@ function RootLayoutInner() {
   const initLanguage = useLanguageStore((s) => s.init);
   const initAppLock = useAppLockStore((s) => s.init);
   const appLockReady = useAppLockStore((s) => s.ready);
+  const initRealtimeDebug = useRealtimeDebugStore((s) => s.init);
   const colors = useColors();
   const [fontsLoaded] = useFonts({
     Nunito_400Regular,
@@ -66,6 +68,7 @@ function RootLayoutInner() {
     initTheme();
     initLanguage();
     initAppLock();
+    if (__DEV__) initRealtimeDebug();
   }, []);
 
   useEffect(() => {

apps/rebreak-native/app/debug.tsx

@@ -1,5 +1,13 @@
 import { useEffect, useState } from 'react';
-import { View, Text, ScrollView, Switch, TouchableOpacity, Alert } from 'react-native';
+import {
+  View,
+  Text,
+  ScrollView,
+  Switch,
+  TouchableOpacity,
+  Alert,
+  Clipboard,
+} from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
@@ -8,6 +16,8 @@ import { useMe, invalidateMe, type Plan } from '../hooks/useMe';
 import { apiFetch } from '../lib/api';
 import { PlanChangeSheet } from '../components/plan/PlanChangeSheet';
 import { getCooldownTestMode, setCooldownTestMode } from '../lib/protection';
+import { useRealtimeDebugStore, type LogEntry } from '../stores/realtimeDebug';
+import { supabase } from '../lib/supabase';
 
 export default function DebugScreen() {
   const router = useRouter();
@@ -98,6 +108,9 @@ export default function DebugScreen() {
 
         <CooldownTestModeToggle />
 
+        <RealtimeStatusCard />
+        <RealtimeLogCard />
+
         <DebugStub
           title="LLM-Provider Toggle"
           subtitle="Phase C: aus app/urge.tsx hierher migrieren"
@@ -118,6 +131,401 @@ export default function DebugScreen() {
   );
 }
 
+// ─── Realtime Status Card ──────────────────────────────────────────────────
+
+function RealtimeStatusCard() {
+  const colors = useColors();
+  const connectionState = useRealtimeDebugStore((s) => s.connectionState);
+  const reconnectCount = useRealtimeDebugStore((s) => s.reconnectCount);
+  const lastEventAt = useRealtimeDebugStore((s) => s.lastEventAt);
+  const tokenExpiresAt = useRealtimeDebugStore((s) => s.tokenExpiresAt);
+  const refreshSnapshot = useRealtimeDebugStore((s) => s.refreshSnapshot);
+
+  const [tick, setTick] = useState(0);
+  const [channels, setChannels] = useState<{ topic: string; state: string }[]>([]);
+
+  // Re-render once per second to keep relative timestamps live
+  useEffect(() => {
+    const t = setInterval(() => setTick((n) => n + 1), 1000);
+    return () => clearInterval(t);
+  }, []);
+
+  // Refresh snapshot + channel list on each tick
+  useEffect(() => {
+    refreshSnapshot();
+    try {
+      const rt = supabase.realtime as any;
+      const raw: { topic?: string; state?: string }[] = rt.channels ?? [];
+      setChannels(
+        raw.map((ch) => ({
+          topic: ch.topic ?? '?',
+          state: ch.state ?? '?',
+        })),
+      );
+    } catch {
+      setChannels([]);
+    }
+  }, [tick, refreshSnapshot]);
+
+  const stateColor = stateAccent(connectionState, colors);
+
+  const tokenSecsLeft =
+    tokenExpiresAt != null ? Math.round(tokenExpiresAt - Date.now() / 1000) : null;
+
+  const lastEventLabel = lastEventAt
+    ? relativeSeconds(Date.now() - lastEventAt)
+    : 'never';
+
+  return (
+    <View
+      style={{
+        backgroundColor: colors.surface,
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: 'rgba(0,0,0,0.05)',
+        padding: 14,
+        marginBottom: 12,
+      }}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, marginBottom: 14 }}>
+        <View
+          style={{
+            width: 36,
+            height: 36,
+            borderRadius: 11,
+            backgroundColor: colors.surfaceElevated,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Ionicons name="wifi-outline" size={18} color={colors.textMuted} />
+        </View>
+        <Text style={{ fontSize: 14, color: colors.text, fontFamily: 'Nunito_700Bold', flex: 1 }}>
+          Realtime Status
+        </Text>
+        <TouchableOpacity
+          onPress={() => refreshSnapshot()}
+          hitSlop={8}
+          activeOpacity={0.6}
+        >
+          <Ionicons name="refresh-outline" size={18} color={colors.textMuted} />
+        </TouchableOpacity>
+      </View>
+
+      <StatusRow
+        label="Connection"
+        value={connectionState}
+        valueColor={stateColor}
+        colors={colors}
+      />
+      <StatusRow
+        label="Reconnects (since launch)"
+        value={String(reconnectCount)}
+        colors={colors}
+      />
+      <StatusRow
+        label="Last event"
+        value={lastEventLabel}
+        colors={colors}
+      />
+      <StatusRow
+        label="Token expires in"
+        value={
+          tokenSecsLeft == null
+            ? 'n/a'
+            : tokenSecsLeft < 0
+              ? 'EXPIRED'
+              : `${tokenSecsLeft}s`
+        }
+        valueColor={
+          tokenSecsLeft != null && tokenSecsLeft < 120 ? colors.error : undefined
+        }
+        colors={colors}
+      />
+
+      {channels.length > 0 ? (
+        <View style={{ marginTop: 12 }}>
+          <Text
+            style={{
+              fontSize: 11,
+              color: colors.textMuted,
+              fontFamily: 'Nunito_600SemiBold',
+              textTransform: 'uppercase',
+              letterSpacing: 0.8,
+              marginBottom: 6,
+            }}
+          >
+            Active channels ({channels.length})
+          </Text>
+          {channels.map((ch) => (
+            <View
+              key={ch.topic}
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                paddingVertical: 5,
+                borderBottomWidth: 1,
+                borderBottomColor: colors.border,
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 11,
+                  color: colors.text,
+                  fontFamily: 'Nunito_400Regular',
+                  flex: 1,
+                }}
+                numberOfLines={1}
+              >
+                {ch.topic}
+              </Text>
+              <Text
+                style={{
+                  fontSize: 11,
+                  color: stateAccent(ch.state, colors),
+                  fontFamily: 'Nunito_600SemiBold',
+                  marginLeft: 8,
+                }}
+              >
+                {ch.state}
+              </Text>
+            </View>
+          ))}
+        </View>
+      ) : (
+        <View style={{ marginTop: 8 }}>
+          <Text
+            style={{
+              fontSize: 12,
+              color: colors.textMuted,
+              fontFamily: 'Nunito_400Regular',
+              fontStyle: 'italic',
+            }}
+          >
+            Keine aktiven Channels
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+function StatusRow({
+  label,
+  value,
+  valueColor,
+  colors,
+}: {
+  label: string;
+  value: string;
+  valueColor?: string;
+  colors: import('../lib/theme').ColorScheme;
+}) {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingVertical: 6,
+        borderBottomWidth: 1,
+        borderBottomColor: colors.border,
+      }}
+    >
+      <Text
+        style={{
+          fontSize: 12,
+          color: colors.textMuted,
+          fontFamily: 'Nunito_400Regular',
+        }}
+      >
+        {label}
+      </Text>
+      <Text
+        style={{
+          fontSize: 12,
+          color: valueColor ?? colors.text,
+          fontFamily: 'Nunito_700Bold',
+        }}
+      >
+        {value}
+      </Text>
+    </View>
+  );
+}
+
+// ─── Realtime Log Card ─────────────────────────────────────────────────────
+
+function RealtimeLogCard() {
+  const colors = useColors();
+  const log = useRealtimeDebugStore((s) => s.log);
+  const clearLog = useRealtimeDebugStore((s) => s.clearLog);
+
+  function copyLog() {
+    const text = log
+      .map((e) => `[${new Date(e.ts).toISOString()}] ${e.text}`)
+      .join('\n');
+    Clipboard.setString(text);
+    Alert.alert('Kopiert', `${log.length} Log-Einträge in Zwischenablage.`);
+  }
+
+  return (
+    <View
+      style={{
+        backgroundColor: colors.surface,
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: 'rgba(0,0,0,0.05)',
+        padding: 14,
+        marginBottom: 12,
+      }}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, marginBottom: 10 }}>
+        <View
+          style={{
+            width: 36,
+            height: 36,
+            borderRadius: 11,
+            backgroundColor: colors.surfaceElevated,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Ionicons name="list-outline" size={18} color={colors.textMuted} />
+        </View>
+        <Text style={{ fontSize: 14, color: colors.text, fontFamily: 'Nunito_700Bold', flex: 1 }}>
+          Realtime Log
+        </Text>
+        <TouchableOpacity onPress={copyLog} hitSlop={8} activeOpacity={0.6} style={{ marginRight: 8 }}>
+          <Ionicons name="copy-outline" size={17} color={colors.textMuted} />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={clearLog} hitSlop={8} activeOpacity={0.6}>
+          <Ionicons name="trash-outline" size={17} color={colors.textMuted} />
+        </TouchableOpacity>
+      </View>
+
+      {log.length === 0 ? (
+        <Text
+          style={{
+            fontSize: 12,
+            color: colors.textMuted,
+            fontFamily: 'Nunito_400Regular',
+            fontStyle: 'italic',
+            paddingVertical: 8,
+          }}
+        >
+          Noch keine Events — warte auf Subscription-Aktivität.
+        </Text>
+      ) : (
+        <View
+          style={{
+            maxHeight: 260,
+            overflow: 'hidden',
+          }}
+        >
+          <ScrollView
+            style={{ flex: 1 }}
+            nestedScrollEnabled
+            showsVerticalScrollIndicator
+          >
+            {log.map((entry) => (
+              <LogLine key={entry.id} entry={entry} colors={colors} />
+            ))}
+          </ScrollView>
+        </View>
+      )}
+
+      <Text
+        style={{
+          fontSize: 10,
+          color: colors.textMuted,
+          fontFamily: 'Nunito_400Regular',
+          marginTop: 8,
+          opacity: 0.6,
+        }}
+      >
+        max 100 Einträge, neueste oben
+      </Text>
+    </View>
+  );
+}
+
+function LogLine({
+  entry,
+  colors,
+}: {
+  entry: LogEntry;
+  colors: import('../lib/theme').ColorScheme;
+}) {
+  const time = new Date(entry.ts);
+  const hms = `${pad(time.getHours())}:${pad(time.getMinutes())}:${pad(time.getSeconds())}`;
+  const isError =
+    entry.text.includes('error') ||
+    entry.text.includes('close') ||
+    entry.text.includes('CLOSED');
+  const isOpen = entry.text.includes('open') || entry.text.includes('joined');
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        gap: 6,
+        paddingVertical: 3,
+        borderBottomWidth: 1,
+        borderBottomColor: 'rgba(0,0,0,0.03)',
+      }}
+    >
+      <Text
+        style={{
+          fontSize: 10,
+          color: colors.textMuted,
+          fontFamily: 'Nunito_400Regular',
+          width: 58,
+          flexShrink: 0,
+        }}
+      >
+        {hms}
+      </Text>
+      <Text
+        style={{
+          fontSize: 10,
+          color: isError ? colors.error : isOpen ? colors.success : colors.text,
+          fontFamily: 'Nunito_400Regular',
+          flex: 1,
+          flexWrap: 'wrap',
+        }}
+      >
+        {entry.text}
+      </Text>
+    </View>
+  );
+}
+
+// ─── Helpers ───────────────────────────────────────────────────────────────
+
+function pad(n: number) {
+  return String(n).padStart(2, '0');
+}
+
+function relativeSeconds(diffMs: number): string {
+  const s = Math.round(diffMs / 1000);
+  if (s < 60) return `vor ${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `vor ${m}m`;
+  return `vor ${Math.floor(m / 60)}h`;
+}
+
+function stateAccent(state: string, colors: import('../lib/theme').ColorScheme): string {
+  const upper = state.toUpperCase();
+  if (upper === 'OPEN' || upper === 'JOINED' || upper === 'SUBSCRIBED') return colors.success;
+  if (upper === 'CLOSED' || upper === 'CHANNEL_ERROR' || upper === 'TIMED_OUT')
+    return colors.error;
+  if (upper === 'CONNECTING' || upper === 'JOINING') return colors.warning;
+  return colors.textMuted;
+}
+
+// ─── Plan Override ─────────────────────────────────────────────────────────
+
 const PLANS: Plan[] = ['free', 'pro', 'legend'];
 
 const PLAN_COLOR: Record<Plan, string> = {
@@ -250,6 +658,8 @@ function PlanOverrideToggle({
   );
 }
 
+// ─── Cooldown Test Mode ────────────────────────────────────────────────────
+
 function CooldownTestModeToggle() {
   const colors = useColors();
   const [enabled, setEnabled] = useState(false);
@@ -317,6 +727,8 @@ function CooldownTestModeToggle() {
   );
 }
 
+// ─── Debug Stub ────────────────────────────────────────────────────────────
+
 function DebugStub({
   title,
   subtitle,

apps/rebreak-native/stores/protectedDevices.ts

@@ -36,8 +36,8 @@ export const useProtectedDevicesStore = create<ProtectedDevicesState>((set, get)
   load: async () => {
     set({ loading: true });
     try {
-      const devices = await apiFetch<ProtectedDevice[]>('/api/devices/protected');
+      const res = await apiFetch<ProtectedDevice[]>('/api/devices/protected');
-      set({ devices });
+      set({ devices: Array.isArray(res) ? res : [] });
     } catch {
       // endpoint might not be ready yet — keep empty state, screen handles it
     } finally {

apps/rebreak-native/stores/realtimeDebug.ts

@@ -0,0 +1,159 @@
+import { create } from 'zustand';
+import { supabase } from '../lib/supabase';
+
+export type LogEntry = {
+  id: number;
+  ts: number;
+  text: string;
+};
+
+type RealtimeDebugState = {
+  connectionState: string;
+  reconnectCount: number;
+  lastEventAt: number | null;
+  tokenExpiresAt: number | null;
+  log: LogEntry[];
+  initialized: boolean;
+
+  appendLog: (text: string) => void;
+  clearLog: () => void;
+  refreshSnapshot: () => Promise<void>;
+  init: () => void;
+};
+
+let logIdSeq = 0;
+
+export const useRealtimeDebugStore = create<RealtimeDebugState>((set, get) => ({
+  connectionState: 'unknown',
+  reconnectCount: 0,
+  lastEventAt: null,
+  tokenExpiresAt: null,
+  log: [],
+  initialized: false,
+
+  appendLog(text) {
+    const entry: LogEntry = { id: logIdSeq++, ts: Date.now(), text };
+    set((s) => ({
+      log: [entry, ...s.log].slice(0, 100),
+      lastEventAt: Date.now(),
+    }));
+  },
+
+  clearLog() {
+    set({ log: [] });
+  },
+
+  async refreshSnapshot() {
+    const rt = supabase.realtime as any;
+
+    // connectionState — Supabase JS v2 exposes this on the internal conn object
+    let connState = 'unknown';
+    try {
+      // supabase.realtime.connectionState() exists in @supabase/realtime-js >= 2.x
+      if (typeof rt.connectionState === 'function') {
+        connState = String(rt.connectionState());
+      } else if (rt.conn?.connectionState) {
+        connState = String(rt.conn.connectionState());
+      }
+    } catch {
+      connState = 'error';
+    }
+
+    const { data } = await supabase.auth.getSession();
+    const tokenExpiresAt = data.session?.expires_at ?? null;
+
+    set({ connectionState: connState, tokenExpiresAt: tokenExpiresAt ?? null });
+  },
+
+  init() {
+    if (get().initialized) return;
+    set({ initialized: true });
+
+    const rt = supabase.realtime as any;
+
+    // Patch socket-level open/close/error — supabase-js internal conn is a Phoenix socket
+    function hookSocket() {
+      const conn = rt.conn;
+      if (!conn) return false;
+
+      const origOnOpen = conn.onOpen?.bind(conn);
+      const origOnClose = conn.onClose?.bind(conn);
+      const origOnError = conn.onError?.bind(conn);
+
+      conn.onOpen(() => {
+        get().appendLog('socket:open');
+        set({ connectionState: 'OPEN' });
+      });
+
+      conn.onClose((event: { code?: number; reason?: string }) => {
+        const reason = event?.reason ? `  reason=${event.reason}` : '';
+        get().appendLog(`socket:close  code=${event?.code ?? '?'}${reason}`);
+        set((s) => ({
+          connectionState: 'CLOSED',
+          reconnectCount: s.reconnectCount + 1,
+        }));
+      });
+
+      conn.onError((error: unknown) => {
+        get().appendLog(`socket:error  ${String(error)}`);
+      });
+
+      // Reconnect attempts — Phoenix socket emits reconnectAttempts counter change
+      // We monkey-patch reconnectTimer to detect attempts
+      const origReconnect = conn.reconnect?.bind(conn);
+      if (typeof origReconnect === 'function') {
+        conn.reconnect = function (...args: unknown[]) {
+          set((s) => ({ reconnectCount: s.reconnectCount + 1 }));
+          get().appendLog(`socket:reconnect-attempt #${get().reconnectCount}`);
+          return origReconnect(...args);
+        };
+      }
+
+      return true;
+    }
+
+    // The socket may not yet exist when init() is called (before first subscription).
+    // Poll briefly then give up — subsequent channel subscriptions will still log via channel listener.
+    let attempts = 0;
+    const socketPollInterval = setInterval(() => {
+      attempts++;
+      if (hookSocket() || attempts > 20) {
+        clearInterval(socketPollInterval);
+      }
+    }, 500);
+
+    // Listen to all channel state changes via supabase.realtime internal channels array
+    // We wrap channel.subscribe to intercept status callbacks
+    // Approach: patch RealtimeChannel.prototype.subscribe so any new channel gets logged
+    try {
+      const RealtimeChannelProto = Object.getPrototypeOf(supabase.channel('__probe__'));
+      supabase.removeAllChannels();
+
+      const origChanSubscribe = RealtimeChannelProto.subscribe;
+      if (typeof origChanSubscribe === 'function' && !RealtimeChannelProto.__debugPatched) {
+        RealtimeChannelProto.__debugPatched = true;
+        RealtimeChannelProto.subscribe = function (
+          callback?: (status: string, err?: unknown) => void,
+          timeout?: number,
+        ) {
+          const channelTopic: string = this.topic ?? '?';
+          return origChanSubscribe.call(
+            this,
+            (status: string, err?: unknown) => {
+              get().appendLog(
+                `channel:${status.toLowerCase()}  ${channelTopic}${err ? `  ${String(err)}` : ''}`,
+              );
+              if (callback) callback(status, err);
+            },
+            timeout,
+          );
+        };
+      }
+    } catch {
+      // Prototype patching failed — not critical, socket-level hooks still work
+    }
+
+    // Initial snapshot
+    get().refreshSnapshot();
+  },
+}));