feat(e2e): enhance end-to-end encryption logging and key management

- Added detailed logging for message forwarding and encryption status in the connection and plugin components.
- Implemented eager loading of Node.js crypto modules to improve performance and avoid dynamic import issues.
- Updated E2E service to cache derived keys and manage password storage more effectively.
- Introduced UI enhancements for password visibility in onboarding and settings components.
- Added a test script for end-to-end chat functionality to validate encryption and decryption processes.

Author: Daniel-Robbins

packages/api/src/do/connection-do.ts

@@ -290,6 +290,9 @@ export class ConnectionDO implements DurableObject {
     }
 
     // Forward all messages to browser clients
+    if (msg.type === "agent.text") {
+      console.log(`[DO] Forwarding agent.text to browsers: encrypted=${msg.encrypted}, messageId=${msg.messageId}, textLen=${typeof msg.text === "string" ? msg.text.length : "?"}`);
+    }
     this.broadcastToBrowsers(JSON.stringify(msg));
   }
 

packages/e2e-crypto/e2e-crypto.ts

@@ -130,16 +130,37 @@ async function decryptWeb(
 }
 
 // ---------------------------------------------------------------------------
-// Node.js implementation
+// Node.js implementation — use static imports resolved at load time.
+// Dynamic `await import("node:crypto")` hangs in some extension loaders
+// (e.g. OpenClaw gateway), so we resolve the modules eagerly when isNode.
 // ---------------------------------------------------------------------------
 
+// Node.js crypto modules — loaded eagerly.
+// We use a global cache keyed by "__e2e_crypto" to avoid re-importing
+// in environments where the module may be loaded multiple times.
+let _nodeCrypto: typeof import("node:crypto") | null = null;
+let _nodeUtil: typeof import("node:util") | null = null;
+
+const _g = globalThis as Record<string, unknown>;
+if (isNode && _g.__e2e_nodeCrypto) {
+  _nodeCrypto = _g.__e2e_nodeCrypto as typeof import("node:crypto");
+  _nodeUtil = _g.__e2e_nodeUtil as typeof import("node:util");
+}
+
+async function ensureNodeModules(): Promise<void> {
+  if (_nodeCrypto && _nodeUtil) return;
+  _nodeCrypto = await import("node:crypto");
+  _nodeUtil = await import("node:util");
+  _g.__e2e_nodeCrypto = _nodeCrypto;
+  _g.__e2e_nodeUtil = _nodeUtil;
+}
+
 async function deriveKeyNode(
   password: string,
   userId: string,
 ): Promise<Uint8Array> {
-  const { pbkdf2 } = await import("node:crypto");
-  const { promisify } = await import("node:util");
-  const pbkdf2Async = promisify(pbkdf2);
+  await ensureNodeModules();
+  const pbkdf2Async = _nodeUtil!.promisify(_nodeCrypto!.pbkdf2);
   const salt = SALT_PREFIX + userId;
   const buf = await pbkdf2Async(password, salt, PBKDF2_ITERATIONS, KEY_LENGTH, "sha256");
   return new Uint8Array(buf);
@@ -149,12 +170,12 @@ async function hkdfNonceNode(
   key: Uint8Array,
   contextId: string,
 ): Promise<Uint8Array> {
-  const { createHmac } = await import("node:crypto");
+  await ensureNodeModules();
   const info = utf8Encode("nonce-" + contextId);
   const input = new Uint8Array(info.length + 1);
   input.set(info);
   input[info.length] = 0x01;
-  const hmac = createHmac("sha256", Buffer.from(key));
+  const hmac = _nodeCrypto!.createHmac("sha256", Buffer.from(key));
   hmac.update(Buffer.from(input));
   const full = hmac.digest();
   return new Uint8Array(full.buffer, full.byteOffset, NONCE_LENGTH);
@@ -165,9 +186,9 @@ async function encryptNode(
   plaintext: Uint8Array,
   contextId: string,
 ): Promise<Uint8Array> {
-  const { createCipheriv } = await import("node:crypto");
+  await ensureNodeModules();
   const iv = await hkdfNonceNode(key, contextId);
-  const cipher = createCipheriv(
+  const cipher = _nodeCrypto!.createCipheriv(
     "aes-256-ctr",
     Buffer.from(key),
     Buffer.from(iv),
@@ -181,9 +202,9 @@ async function decryptNode(
   ciphertext: Uint8Array,
   contextId: string,
 ): Promise<Uint8Array> {
-  const { createDecipheriv } = await import("node:crypto");
+  await ensureNodeModules();
   const iv = await hkdfNonceNode(key, contextId);
-  const decipher = createDecipheriv(
+  const decipher = _nodeCrypto!.createDecipheriv(
     "aes-256-ctr",
     Buffer.from(key),
     Buffer.from(iv),

packages/plugin/src/channel.ts

@@ -126,14 +126,17 @@ export const botschatPlugin = {
       let text = ctx.text;
       let encrypted = false;
 
+      console.log(`[botschat][sendText] e2eKey=${!!client.e2eKey}, textLen=${text.length}`);
+
       if (client.e2eKey) {
         try {
           // Encrypt text using messageId as contextId
           const ciphertext = await encryptText(client.e2eKey, text, messageId);
           text = toBase64(ciphertext);
           encrypted = true;
+          console.log(`[botschat][sendText] encrypted OK, ctLen=${text.length}`);
         } catch (err) {
-            // Log error but proceed? Or fail? The user expects encryption.
+            console.error(`[botschat][sendText] Encryption FAILED:`, err);
             return { ok: false, error: new Error(`Encryption failed: ${err}`) };
         }
       }
@@ -147,6 +150,7 @@ export const botschatPlugin = {
         messageId,
         encrypted,
       });
+      console.log(`[botschat][sendText] sent agent.text, encrypted=${encrypted}`);
       return { ok: true };
     },
 
@@ -439,10 +443,10 @@ async function handleCloudMessage(
         // pass through the command-auth pipeline instead of being silently
         // dropped (the default is false / deny).
         const msgCtx: Record<string, unknown> = {
-          Body: msg.text,
-          RawBody: msg.text,
-          CommandBody: msg.text,
-          BodyForCommands: msg.text,
+          Body: text,
+          RawBody: text,
+          CommandBody: text,
+          BodyForCommands: text,
           From: `botschat:${msg.userId}`,
           To: msg.sessionKey,
           SessionKey: msg.sessionKey,
@@ -477,22 +481,48 @@ async function handleCloudMessage(
 
       // Create a reply dispatcher that sends responses back through the cloud WSS
       const client = getCloudClient(ctx.accountId);
+      console.log(`[botschat] client for accountId=${ctx.accountId}: connected=${client?.connected}`);
       const deliver = async (payload: { text?: string; mediaUrl?: string }) => {
-        if (!client?.connected) return;
+        console.log(`[botschat][deliver] called, connected=${client?.connected}, hasKey=${!!client?.e2eKey}, textLen=${(payload.text || "").length}`);
+        if (!client?.connected) { console.log("[botschat][deliver] SKIP - not connected"); return; }
+        const messageId = crypto.randomUUID();
+        let text = payload.text ?? "";
+        let caption = payload.text ?? "";
+        let encrypted = false;
+
+        if (client.e2eKey && text) {
+          try {
+            const ct = await encryptText(client.e2eKey, text, messageId);
+            text = toBase64(ct);
+            caption = text;
+            encrypted = true;
+            console.log(`[botschat][deliver] encrypted OK: msgId=${messageId}, ctLen=${text.length}, encrypted=${encrypted}`);
+          } catch (err) {
+            console.error("[botschat][deliver] E2E encrypt failed:", err);
+          }
+        } else {
+          console.log(`[botschat][deliver] no encryption: hasKey=${!!client.e2eKey}, textLen=${text.length}`);
+        }
+
+        console.log(`[botschat][deliver] sending: type=${payload.mediaUrl ? "agent.media" : "agent.text"}, encrypted=${encrypted}, messageId=${messageId}`);
         if (payload.mediaUrl) {
           client.send({
             type: "agent.media",
             sessionKey: msg.sessionKey,
             mediaUrl: payload.mediaUrl,
-            caption: payload.text,
+            caption: encrypted ? caption : payload.text,
             threadId,
+            messageId,
+            encrypted,
           });
         } else if (payload.text) {
           client.send({
             type: "agent.text",
             sessionKey: msg.sessionKey,
-            text: payload.text,
+            text,
             threadId,
+            messageId,
+            encrypted,
           });
           // Detect model-change confirmations and emit model.changed
           // Handles both formats:

packages/plugin/src/ws-client.ts

@@ -135,17 +135,21 @@ export class BotsChatCloudClient {
     switch (msg.type) {
       case "auth.ok":
         this.log("info", `Authenticated with BotsChat cloud (userId=${msg.userId}, hasE2ePwd=${!!this.opts.e2ePassword})`);
+        // Mark connected FIRST so that subsequent messages (task.scan.request,
+        // models.request) arriving while deriveKey is running can be processed.
+        this.backoffMs = MIN_BACKOFF_MS;
+        this.setConnected(true);
+        this.startPing();
+        // Derive E2E key AFTER marking connected (PBKDF2 is slow ~1-2s).
         if (msg.userId && this.opts.e2ePassword) {
             this.log("info", `Deriving E2E key for userId: ${msg.userId}`);
             try {
                 this.e2eKey = await deriveKey(this.opts.e2ePassword, msg.userId);
+                this.log("info", "E2E key derived successfully");
             } catch (err) {
                 this.log("error", `Failed to derive E2E key: ${err}`);
             }
         }
-        this.backoffMs = MIN_BACKOFF_MS;
-        this.setConnected(true);
-        this.startPing();
         break;
       case "auth.fail":
         this.log("error", `Authentication failed: ${msg.reason}`);

packages/web/src/App.tsx

@@ -52,6 +52,12 @@ export default function App() {
   // Track whether the initial channels fetch has completed (prevents onboarding flash)
   const [channelsLoadedOnce, setChannelsLoadedOnce] = useState(false);
 
+  // Track E2E key readiness — when key becomes available, re-decrypt messages
+  const [e2eReady, setE2eReady] = useState(E2eService.hasKey());
+  useEffect(() => {
+    return E2eService.subscribe(() => setE2eReady(E2eService.hasKey()));
+  }, []);
+
   // Responsive layout hooks (must be called unconditionally)
   const isMobile = useIsMobile();
   const mainLayout = useDefaultLayout({ id: "botschat-main" });
@@ -395,7 +401,7 @@ export default function App() {
         console.error("Failed to load message history:", err);
       });
     return () => { stale = true; };
-  }, [state.user, state.selectedSessionKey]);
+  }, [state.user, state.selectedSessionKey, e2eReady]);
 
   // Keep a ref to state for use in WS handler (avoids stale closures)
   const stateRef = useRef(state);

packages/web/src/components/E2ESettings.tsx

@@ -9,6 +9,7 @@ export function E2ESettings() {
   const [remember, setRemember] = useState(false);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [showPassword, setShowPassword] = useState(false);
 
   // Subscribe to E2eService changes
   useEffect(() => {
@@ -63,7 +64,7 @@ export function E2ESettings() {
              )}
           </span>
           {hasKey && (
-              <button onClick={handleLock} className="text-caption font-bold text-red-500 hover:underline">
+              <button onClick={handleLock} className="text-caption font-bold hover:underline" style={{ color: "var(--accent-red, #e53e3e)" }}>
                   Lock / Clear Key
               </button>
           )}
@@ -73,14 +74,37 @@ export function E2ESettings() {
             <div className="space-y-4">
                 <div>
                     <label className="block text-caption font-bold mb-1" style={{ color: "var(--text-secondary)" }}>E2E Password</label>
-                    <input 
-                        type="password" 
-                        value={password}
-                        onChange={e => setPassword(e.target.value)}
-                        className="w-full px-3 py-2 rounded border"
-                        style={{ background: "var(--bg-input)", borderColor: "var(--border)", color: "var(--text-primary)" }}
-                        placeholder="Enter your encryption password"
-                    />
+                    <div className="relative">
+                        <input 
+                            type={showPassword ? "text" : "password"}
+                            value={password}
+                            onChange={e => setPassword(e.target.value)}
+                            className="w-full px-3 py-2 pr-10 rounded border"
+                            style={{ background: "var(--bg-input)", borderColor: "var(--border)", color: "var(--text-primary)" }}
+                            placeholder="Enter your encryption password"
+                        />
+                        <button
+                            type="button"
+                            onClick={() => setShowPassword(!showPassword)}
+                            className="absolute right-2 top-1/2 -translate-y-1/2 p-1"
+                            style={{ color: "var(--text-muted)" }}
+                            tabIndex={-1}
+                        >
+                            {showPassword ? (
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
+                                    <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
+                                    <path d="M14.12 14.12a3 3 0 1 1-4.24-4.24"/>
+                                    <line x1="1" y1="1" x2="23" y2="23"/>
+                                </svg>
+                            ) : (
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                                    <circle cx="12" cy="12" r="3"/>
+                                </svg>
+                            )}
+                        </button>
+                    </div>
                 </div>
 
                 <div className="flex items-center gap-2">
@@ -100,8 +124,8 @@ export function E2ESettings() {
                 <button 
                     onClick={handleUnlock}
                     disabled={!password || busy}
-                    className="px-4 py-2 rounded font-bold text-white w-full"
-                    style={{ background: "var(--primary)", opacity: (!password || busy) ? 0.5 : 1 }}
+                    className="px-4 py-2 rounded font-bold w-full"
+                    style={{ background: "var(--bg-active, #6366f1)", color: "#fff", opacity: (!password || busy) ? 0.5 : 1 }}
                 >
                     {busy ? "Deriving Key..." : "Unlock / Set Password"}
                 </button>