feat: improve foreground detection and message decryption in ThreadPanel

- Enhanced foreground detection to support re-sending state after WebSocket authentication.
- Updated setupForegroundDetection to return a handle with cleanup and resend functions.
- Integrated message decryption in ThreadPanel for encrypted messages, ensuring proper handling based on encryption status.
- Improved logging for message loading and decryption errors.

Author: Daniel-Robbins

packages/web/src/App.tsx

@@ -886,6 +886,8 @@ export default function App() {
 
     const sessionId = randomUUID();
     dlog.info("WS", `Connecting WebSocket (session=${sessionId.slice(0, 8)}...)`);
+    let fgResend: (() => void) | null = null;
+
     const client = new BotsChatWSClient({
       userId: state.user.id,
       sessionId,
@@ -896,6 +898,10 @@ export default function App() {
       onStatusChange: (connected) => {
         dlog.info("WS", connected ? "WebSocket connected" : "WebSocket disconnected");
         dispatch({ type: "SET_WS_CONNECTED", connected });
+        // After auth succeeds, re-send foreground state so the DO knows about us.
+        // The initial send in setupForegroundDetection fires before the socket
+        // is open, so this is the first one that actually reaches the server.
+        if (connected) fgResend?.();
       },
     });
 
@@ -911,14 +917,15 @@ export default function App() {
       .catch((err) => {
         dlog.warn("Push", `Push init failed: ${err}`);
       });
-    const cleanupForeground = setupForegroundDetection({
+    const fg = setupForegroundDetection({
       wsClient: client,
       getActiveSessionKey: () => stateRef.current.selectedSessionKey,
       onResume: () => setForegroundResumeCount((c) => c + 1),
     });
+    fgResend = fg.resend;
 
     return () => {
-      cleanupForeground();
+      fg.cleanup();
       client.disconnect();
       wsClientRef.current = null;
     };

packages/web/src/components/ThreadPanel.tsx

@@ -3,6 +3,7 @@ import { useAppState, useAppDispatch, type ChatMessage } from "../store";
 import { messagesApi } from "../api";
 import type { WSMessage } from "../ws";
 import { MessageContent } from "./MessageContent";
+import { E2eService } from "../e2e";
 import { dlog } from "../debug-log";
 import { randomUUID } from "../utils/uuid";
 import { formatMessageTime, formatFullDateTime } from "../utils/time";
@@ -33,10 +34,24 @@ export function ThreadPanel({ sendMessage }: ThreadPanelProps) {
     dlog.info("Thread", `Loading history for thread ${state.activeThreadId}`);
     messagesApi
       .list(state.user.id, threadSessionKey, state.activeThreadId)
-      .then(({ messages }) => {
+      .then(async ({ messages }) => {
         dlog.info("Thread", `Loaded ${messages.length} thread messages`);
         if (messages.length > 0) {
-          dispatch({ type: "OPEN_THREAD", threadId: state.activeThreadId!, messages });
+          const decrypted = await Promise.all(messages.map(async (m) => {
+            if (m.encrypted && E2eService.hasKey()) {
+              try {
+                const plaintext = await E2eService.decrypt(m.text, m.id);
+                return { ...m, text: plaintext, isEncryptedLocked: false };
+              } catch (err) {
+                dlog.warn("Thread", `Failed to decrypt message ${m.id}`, err);
+                return { ...m, isEncryptedLocked: true };
+              }
+            } else if (m.encrypted) {
+              return { ...m, isEncryptedLocked: true };
+            }
+            return m;
+          }));
+          dispatch({ type: "OPEN_THREAD", threadId: state.activeThreadId!, messages: decrypted });
         }
       })
       .catch((err) => {

packages/web/src/foreground.ts

@@ -15,6 +15,12 @@ export interface ForegroundOptions {
   onResume?: () => void;
 }
 
+export interface ForegroundHandle {
+  cleanup: () => void;
+  /** Re-send the current foreground/background state. Call after WS auth succeeds. */
+  resend: () => void;
+}
+
 /**
  * Send a focus.update message when the user switches channels/sessions
  * while already in the foreground.
@@ -27,7 +33,7 @@ export function sendFocusUpdate(
   dlog.info("Foreground", `Focus updated: ${sessionKey ?? "(none)"}`);
 }
 
-export function setupForegroundDetection(opts: ForegroundOptions): () => void {
+export function setupForegroundDetection(opts: ForegroundOptions): ForegroundHandle {
   const { wsClient, getActiveSessionKey, onResume } = opts;
 
   const notifyForeground = () => {
@@ -43,19 +49,23 @@ export function setupForegroundDetection(opts: ForegroundOptions): () => void {
 
   if (Capacitor.isNativePlatform()) {
     let cleanup: (() => void) | null = null;
+    let nativeIsActive = true;
 
     import("@capacitor/app").then(({ App }) => {
       const handle = App.addListener("appStateChange", ({ isActive }) => {
+        nativeIsActive = isActive;
         if (isActive) notifyForeground();
         else notifyBackground();
       });
       cleanup = () => handle.then((h) => h.remove());
     });
 
-    // Report initial foreground state once WS is connected
     notifyForeground();
 
-    return () => cleanup?.();
+    return {
+      cleanup: () => cleanup?.(),
+      resend: () => { if (nativeIsActive) notifyForeground(); else notifyBackground(); },
+    };
   }
 
   // Web: Use Page Visibility API
@@ -68,7 +78,8 @@ export function setupForegroundDetection(opts: ForegroundOptions): () => void {
 
   if (!document.hidden) notifyForeground();
 
-  return () => {
-    document.removeEventListener("visibilitychange", handleVisibilityChange);
+  return {
+    cleanup: () => document.removeEventListener("visibilitychange", handleVisibilityChange),
+    resend: () => { if (!document.hidden) notifyForeground(); else notifyBackground(); },
   };
 }