feat: E2E media encryption, file attachments, UX fixes

## E2E Media Encryption
- Upload: client encrypts image binary (AES-256-CTR) before uploading to R2
- Display: MediaPreview fetches ciphertext, decrypts client-side, renders via object URL
- Plugin: decrypts downloaded media with e2eKey before passing to OpenClaw vision
- Context derivation: uses "{messageId}:media" — no extra DB column needed
- Added encryptMedia/decryptMedia to E2eService (wraps encryptBytes/decryptBytes)

## File Attachment Support
- Upload endpoint now accepts PDF, TXT, CSV, JSON, ZIP, audio, video (not just images)
- Web file picker accepts expanded types; drag-drop accepts all files
- Non-image files show filename preview instead of blank thumbnail
- cacheExternalMedia in DO supports non-image media types

## UX Fixes
- Session naming: fixed stale closure in handleCreate (sessions missing from useCallback deps)
- Upload icon: larger paperclip icon (w-5) with better contrast (--text-secondary)
- Mobile send button: no longer disabled by transient WS disconnects during file picker
- E2E messageId: encrypt() preserves existing messageId instead of overwriting
- Channel creation: INSERT OR IGNORE for duplicate session_key edge case

Author: Daniel-Robbins

packages/plugin/src/channel.ts

@@ -9,7 +9,7 @@ import { getBotsChatRuntime } from "./runtime.js";
 import type { BotsChatChannelConfig, CloudInbound, ResolvedBotsChatAccount } from "./types.js";
 import { BotsChatCloudClient } from "./ws-client.js";
 import crypto from "crypto";
-import { encryptText, decryptText, toBase64, fromBase64 } from "./e2e-crypto.js";
+import { encryptText, decryptText, decryptBytes, toBase64, fromBase64 } from "./e2e-crypto.js";
 
 // ---------------------------------------------------------------------------
 // A2UI message-tool hints — injected via agentPrompt.messageToolHints so
@@ -496,8 +496,21 @@ async function handleCloudMessage(
             ctx.log?.info(`[${ctx.accountId}] Downloading media from ${resolvedUrl}`);
             const resp = await fetch(resolvedUrl);
             if (resp.ok) {
-              const buffer = Buffer.from(await resp.arrayBuffer());
+              let buffer = Buffer.from(await resp.arrayBuffer());
               const contentType = resp.headers.get("content-type") || "image/png";
+
+              // E2E: decrypt media if the message was encrypted
+              if ((msg as any).encrypted && client?.e2eKey && msg.messageId) {
+                try {
+                  const mediaCtx = `${msg.messageId}:media`;
+                  const decrypted = await decryptBytes(client.e2eKey, new Uint8Array(buffer), mediaCtx);
+                  buffer = Buffer.from(decrypted);
+                  ctx.log?.info(`[${ctx.accountId}] E2E decrypted media (${buffer.length} bytes, ctx=${mediaCtx.slice(0, 12)}…)`);
+                } catch (e2eErr) {
+                  ctx.log?.warn?.(`[${ctx.accountId}] E2E media decryption failed (using raw): ${e2eErr}`);
+                }
+              }
+
               const extMap: Record<string, string> = { "image/png": ".png", "image/jpeg": ".jpg", "image/gif": ".gif", "image/webp": ".webp" };
               const ext = extMap[contentType] || ".png";
               const fileName = `botschat-${Date.now()}-${Math.random().toString(36).slice(2, 8)}${ext}`;

packages/web/src/components/ChatWindow.tsx

@@ -7,6 +7,7 @@ import { SessionTabs } from "./SessionTabs";
 import { useIsMobile } from "../hooks/useIsMobile";
 import { dlog } from "../debug-log";
 import { randomUUID } from "../utils/uuid";
+import { E2eService } from "../e2e";
 
 type ChatWindowProps = {
   sendMessage: (msg: WSMessage) => void;
@@ -282,11 +283,26 @@ export function ChatWindow({ sendMessage }: ChatWindowProps) {
     }
   }, [pendingImage]);
 
-  const uploadImage = useCallback(async (file: File): Promise<string | null> => {
-    const formData = new FormData();
-    formData.append("file", file);
+  /**
+   * Upload a file — if E2E is enabled, encrypts the binary before uploading.
+   * Returns { url, mediaContextId? } or null on failure.
+   */
+  const uploadFile = useCallback(async (file: File, mediaContextId?: string): Promise<{ url: string } | null> => {
     const token = localStorage.getItem("botschat_token");
     try {
+      let uploadBlob: Blob = file;
+
+      // E2E: encrypt file content before uploading
+      if (E2eService.hasKey() && mediaContextId) {
+        const arrayBuf = await file.arrayBuffer();
+        const plainBytes = new Uint8Array(arrayBuf);
+        const { encrypted } = await E2eService.encryptMedia(plainBytes, mediaContextId);
+        uploadBlob = new Blob([encrypted.buffer.slice(0) as ArrayBuffer], { type: file.type });
+        dlog.info("E2E", `Encrypted media (${plainBytes.length} bytes, ctx=${mediaContextId.slice(0, 8)}…)`);
+      }
+
+      const formData = new FormData();
+      formData.append("file", uploadBlob, file.name);
       const res = await fetch("/api/upload", {
         method: "POST",
         headers: token ? { Authorization: `Bearer ${token}` } : {},
@@ -297,13 +313,12 @@ export function ChatWindow({ sendMessage }: ChatWindowProps) {
         throw new Error((err as { error?: string }).error ?? `HTTP ${res.status}`);
       }
       const data = await res.json() as { url: string };
-      // Return absolute URL so OpenClaw on mini.local can fetch the image
       const absoluteUrl = data.url.startsWith("/")
         ? `${window.location.origin}${data.url}`
         : data.url;
-      return absoluteUrl;
+      return { url: absoluteUrl };
     } catch (err) {
-      dlog.error("Upload", `Image upload failed: ${err}`);
+      dlog.error("Upload", `File upload failed: ${err}`);
       return null;
     }
   }, []);
@@ -366,6 +381,11 @@ export function ChatWindow({ sendMessage }: ChatWindowProps) {
   const handleSend = async () => {
     if ((!input.trim() && !pendingImage) || !sessionKey) return;
 
+    // Warn if OpenClaw is offline (but don't block — connection may recover)
+    if (!state.openclawConnected) {
+      dlog.warn("Chat", "Sending while OpenClaw appears offline — message will be delivered when reconnected");
+    }
+
     // Prepend quoted message as Markdown blockquote
     const rawTrimmed = input.trim();
     const trimmed = quotedMessage
@@ -381,19 +401,23 @@ export function ChatWindow({ sendMessage }: ChatWindowProps) {
       setSkillVersion((v) => v + 1);
     }
 
-    // Upload image if present
+    // Generate message ID upfront so we can use it as E2E context for both text and media
+    const msgId = randomUUID();
+
+    // Upload file if present
     let mediaUrl: string | undefined;
     if (pendingImage) {
       setImageUploading(true);
-      const url = await uploadImage(pendingImage.file);
+      // Use "{msgId}:media" as E2E context for the binary — distinct from text context
+      const result = await uploadFile(pendingImage.file, `${msgId}:media`);
       setImageUploading(false);
-      if (!url) return; // Upload failed
-      mediaUrl = url;
+      if (!result) return; // Upload failed
+      mediaUrl = result.url;
       clearPendingImage();
     }
 
     const msg: ChatMessage = {
-      id: randomUUID(),
+      id: msgId,
       sender: "user",
       text: trimmed,
       timestamp: Date.now(),
@@ -810,14 +834,14 @@ export function ChatWindow({ sendMessage }: ChatWindowProps) {
               />
               <button
                 onClick={() => fileInputRef.current?.click()}
-                className="p-1.5 rounded hover:bg-[--bg-hover] transition-colors"
-                style={{ color: "var(--text-muted)" }}
-                title="Upload image"
-                aria-label="Upload image"
+                className="p-1.5 rounded hover:bg-[--bg-hover] transition-colors flex items-center gap-1"
+                style={{ color: "var(--text-secondary)" }}
+                title="Attach file"
+                aria-label="Attach file"
                 disabled={!state.openclawConnected}
               >
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v13.5A1.5 1.5 0 003.75 21zm14.25-15.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" />
                 </svg>
               </button>
             </div>
@@ -842,7 +866,7 @@ export function ChatWindow({ sendMessage }: ChatWindowProps) {
             ) : (
               <button
                 onClick={handleSend}
-                disabled={(!input.trim() && !pendingImage) || !state.openclawConnected}
+                disabled={!input.trim() && !pendingImage}
                 className="px-3 py-1.5 rounded-sm text-caption font-bold text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                 style={{ background: "var(--bg-active)" }}
               >
@@ -954,6 +978,8 @@ function MessageRow({
           <MessageContent
             text={msg.text}
             mediaUrl={msg.mediaUrl}
+            messageId={msg.id}
+            encrypted={!!msg.mediaUrl && E2eService.hasKey()}
             a2ui={msg.a2ui}
             isStreaming={msg.isStreaming}
             onAction={onAction}

packages/web/src/components/MessageContent.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useCallback, useMemo } from "react";
+import React, { useState, useCallback, useMemo, useEffect } from "react";
+import { E2eService } from "../e2e";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
@@ -25,6 +26,10 @@ type ParsedAction = {
 type MessageContentProps = {
   text: string;
   mediaUrl?: string;
+  /** Message ID — used to derive E2E decryption context as "{messageId}:media" */
+  messageId?: string;
+  /** Whether this message was E2E encrypted (media binary may also be encrypted) */
+  encrypted?: boolean;
   a2ui?: string;
   className?: string;
   isStreaming?: boolean;
@@ -938,6 +943,8 @@ function ActionBlockPlaceholder() {
 export function MessageContent({
   text,
   mediaUrl,
+  messageId,
+  encrypted,
   a2ui,
   className = "",
   isStreaming,
@@ -965,7 +972,7 @@ export function MessageContent({
       {/* Media preview */}
       {mediaUrl && (
         <div className="mb-2">
-          <MediaPreview url={mediaUrl} />
+          <MediaPreview url={mediaUrl} mediaContextId={encrypted && messageId ? `${messageId}:media` : undefined} />
         </div>
       )}
 
@@ -1009,9 +1016,62 @@ export function MessageContent({
 // Media preview — handles images, audio, video, and file downloads
 // ---------------------------------------------------------------------------
 
-function MediaPreview({ url }: { url: string }) {
+/**
+ * MediaPreview — renders images, audio, video, and files.
+ * If mediaContextId is provided and E2E key is available, fetches the media,
+ * decrypts it client-side, and renders a local object URL.
+ */
+function MediaPreview({ url, mediaContextId }: { url: string; mediaContextId?: string }) {
+  const [decryptedUrl, setDecryptedUrl] = useState<string | null>(null);
+  const [decrypting, setDecrypting] = useState(false);
+
+  useEffect(() => {
+    if (!mediaContextId || !E2eService.hasKey()) {
+      setDecryptedUrl(null);
+      return;
+    }
+
+    let cancelled = false;
+    setDecrypting(true);
+
+    (async () => {
+      try {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const encrypted = new Uint8Array(await res.arrayBuffer());
+        const decrypted = await E2eService.decryptMedia(encrypted, mediaContextId);
+        if (!cancelled) {
+          const blob = new Blob([decrypted.buffer.slice(0) as ArrayBuffer]);
+          setDecryptedUrl(URL.createObjectURL(blob));
+        }
+      } catch (err) {
+        console.warn("[E2E] Media decryption failed, falling back to direct URL:", err);
+        if (!cancelled) setDecryptedUrl(null);
+      } finally {
+        if (!cancelled) setDecrypting(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (decryptedUrl) URL.revokeObjectURL(decryptedUrl);
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url, mediaContextId]);
+
+  // Use decrypted URL if available, otherwise fall back to direct URL
+  const effectiveUrl = decryptedUrl || url;
   const ext = url.split(".").pop()?.toLowerCase().split("?")[0] ?? "";
 
+  if (decrypting) {
+    return (
+      <div className="flex items-center gap-2 px-3 py-2 rounded-md max-w-[360px]"
+        style={{ background: "var(--bg-hover)", border: "1px solid var(--border)" }}>
+        <span className="text-caption" style={{ color: "var(--text-muted)" }}>Decrypting media...</span>
+      </div>
+    );
+  }
+
   // Audio
   if (["mp3", "wav", "ogg", "m4a", "aac", "webm"].includes(ext)) {
     return (
@@ -1023,7 +1083,7 @@ function MediaPreview({ url }: { url: string }) {
           <path strokeLinecap="round" strokeLinejoin="round" d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z" />
         </svg>
         <audio controls className="flex-1 h-8" style={{ maxWidth: 280 }}>
-          <source src={url} />
+          <source src={effectiveUrl} />
         </audio>
       </div>
     );
@@ -1037,7 +1097,7 @@ function MediaPreview({ url }: { url: string }) {
         className="max-w-[360px] max-h-64 rounded-md"
         style={{ border: "1px solid var(--border)" }}
       >
-        <source src={url} />
+        <source src={effectiveUrl} />
       </video>
     );
   }
@@ -1047,7 +1107,7 @@ function MediaPreview({ url }: { url: string }) {
     const filename = url.split("/").pop()?.split("?")[0] ?? "file";
     return (
       <a
-        href={url}
+        href={effectiveUrl}
         target="_blank"
         rel="noopener noreferrer"
         className="flex items-center gap-3 px-3 py-2.5 rounded-md max-w-[360px] hover:opacity-90 transition-opacity"
@@ -1074,11 +1134,11 @@ function MediaPreview({ url }: { url: string }) {
   // Default: image
   return (
     <img
-      src={url}
+      src={effectiveUrl}
       alt=""
       className="max-w-[360px] max-h-64 rounded-md object-contain cursor-pointer hover:opacity-90 transition-opacity"
       style={{ border: "1px solid var(--border)" }}
-      onClick={() => window.open(url, "_blank")}
+      onClick={() => window.open(effectiveUrl, "_blank")}
     />
   );
 }

packages/web/src/components/SessionTabs.tsx

@@ -182,7 +182,7 @@ export function SessionTabs({ channelId }: SessionTabsProps) {
     } catch (err) {
       dlog.error("Session", `Failed to create session: ${err}`);
     }
-  }, [channelId, dispatch]);
+  }, [channelId, sessions, dispatch]);
 
   const handleDelete = useCallback(
     async (sessionId: string) => {

packages/web/src/e2e.ts

@@ -1,4 +1,4 @@
-import { deriveKey, encryptText, decryptText, toBase64, fromBase64 } from "e2e-crypto";
+import { deriveKey, encryptText, decryptText, encryptBytes, decryptBytes, toBase64, fromBase64 } from "e2e-crypto";
 
 const STORAGE_KEY = "botschat_e2e_pwd_cache";
 const KEY_CACHE_KEY = "botschat_e2e_key_cache"; // base64-encoded derived key
@@ -135,10 +135,30 @@ export const E2eService = {
     return currentPassword;
   },
 
+  /**
+   * Encrypt raw binary data (e.g., an image file).
+   * Returns { encrypted: Uint8Array, contextId: string }.
+   * The encrypted data is the same length as the input (AES-CTR, no padding).
+   */
+  async encryptMedia(data: Uint8Array, contextId?: string): Promise<{ encrypted: Uint8Array; contextId: string }> {
+    if (!currentKey) throw new Error("E2E key not set");
+    const cid = contextId || crypto.randomUUID();
+    const encrypted = await encryptBytes(currentKey, data, cid);
+    return { encrypted, contextId: cid };
+  },
+
+  /**
+   * Decrypt raw binary data (e.g., an encrypted image).
+   */
+  async decryptMedia(encrypted: Uint8Array, contextId: string): Promise<Uint8Array> {
+    if (!currentKey) throw new Error("E2E key not set");
+    return decryptBytes(currentKey, encrypted, contextId);
+  },
+
   /**
    * Decrypt bytes (base64) -> Uint8Array.
    */
-  async decryptBytes(ciphertextBase64: string, messageId: string): Promise<Uint8Array> {
+  async decryptBytesLegacy(ciphertextBase64: string, messageId: string): Promise<Uint8Array> {
     if (!currentKey) throw new Error("E2E key not set");
     const ciphertext = fromBase64(ciphertextBase64);
     const plainStr = await decryptText(currentKey, ciphertext, messageId);