botschat 0.1.10 → 0.1.13

package/packages/web/src/components/CronSidebar.tsx

@@ -1,5 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { useAppState, useAppDispatch } from "../store";
+import { tasksApi, channelsApi } from "../api";
+import { dlog } from "../debug-log";
 
 function relativeTime(ts: number): string {
   const now = Date.now() / 1000;
@@ -10,49 +12,112 @@ function relativeTime(ts: number): string {
   return `${Math.floor(diff / 86400)}d ago`;
 }
 
-export function CronSidebar() {
+export function CronSidebar({ onNavigate }: { onNavigate?: () => void } = {}) {
   const state = useAppState();
   const dispatch = useAppDispatch();
+  const [showCreate, setShowCreate] = useState(false);
+  const [newName, setNewName] = useState("");
 
   const handleSelect = (taskId: string) => {
+    // Ensure activeView is "automations" so cron data loads correctly
+    if (state.activeView !== "automations") {
+      dispatch({ type: "SET_ACTIVE_VIEW", view: "automations" });
+    }
     dispatch({ type: "SELECT_CRON_TASK", taskId });
+    onNavigate?.();
+  };
+
+  const handleCreateTask = async () => {
+    if (!newName.trim()) return;
+    // Find a suitable channel — prefer "Default", then first available
+    let channelId = state.channels.find((c) => c.name === "Default")?.id
+      ?? state.channels[0]?.id;
+    if (!channelId) {
+      // Auto-create a "Default" channel if none exist
+      try {
+        const ch = await channelsApi.create({ name: "Default" });
+        channelId = ch.id;
+        const { channels } = await channelsApi.list();
+        dispatch({ type: "SET_CHANNELS", channels });
+      } catch (err) {
+        dlog.error("Cron", `Failed to create default channel: ${err}`);
+        return;
+      }
+    }
+    try {
+      const task = await tasksApi.create(channelId, { name: newName.trim(), kind: "background" });
+      dlog.info("Cron", `Created automation: ${task.name} (${task.id})`);
+      // Reload cron tasks
+      const { tasks } = await tasksApi.listAll("background");
+      dispatch({ type: "SET_CRON_TASKS", cronTasks: tasks });
+      dispatch({ type: "SELECT_CRON_TASK", taskId: task.id });
+      setShowCreate(false);
+      setNewName("");
+      onNavigate?.();
+    } catch (err) {
+      dlog.error("Cron", `Failed to create automation: ${err}`);
+    }
   };
 
   return (
     <div
-      className="flex flex-col h-full"
+      className="flex flex-col"
       style={{ background: "var(--bg-secondary)" }}
     >
-      {/* Header */}
-      <div className="px-4 py-3 flex items-center gap-2">
-        <span className="text-[--text-sidebar-active] font-bold text-h2 truncate flex-1">
+      {/* Header with + button */}
+      <div className="w-full flex items-center px-4 py-1.5">
+        <button
+          className="flex items-center gap-1 text-tiny uppercase tracking-wider text-[--text-sidebar] hover:text-[--text-sidebar-active] transition-colors"
+        >
           Automations
+        </button>
+        <span className="ml-1.5 text-tiny text-[--text-muted]">
+          {state.cronTasks.length > 0 && `${state.cronTasks.length}`}
         </span>
+        <button
+          onClick={() => setShowCreate(!showCreate)}
+          className="ml-auto p-0.5 rounded transition-colors text-[--text-sidebar] hover:text-[--text-sidebar-active] hover:bg-[--sidebar-hover]"
+          title="New automation"
+        >
+          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+          </svg>
+        </button>
       </div>
 
-      {/* Connection status */}
-      <div className="px-4 pb-2">
-        <div className="flex items-center gap-1.5">
-          <div
-            className="w-2 h-2 rounded-full"
-            style={{ background: state.openclawConnected ? "var(--accent-green)" : "var(--accent-red)" }}
+      {/* Inline create automation form */}
+      {showCreate && (
+        <div className="px-4 py-2 space-y-2">
+          <input
+            type="text"
+            placeholder="Automation name"
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && !e.nativeEvent.isComposing && handleCreateTask()}
+            className="w-full px-2 py-1.5 text-caption text-[--text-sidebar] rounded-sm focus:outline-none placeholder:text-[--text-muted]"
+            style={{ background: "var(--sidebar-hover)", border: "1px solid var(--sidebar-border)" }}
+            autoFocus
           />
-          <span className="text-tiny text-[--text-muted]">
-            {state.openclawConnected ? "OpenClaw connected" : "OpenClaw offline"}
-          </span>
+          <div className="flex gap-2">
+            <button
+              onClick={handleCreateTask}
+              className="flex-1 px-3 py-1.5 text-caption bg-[--bg-active] text-white rounded-sm font-bold hover:brightness-110"
+            >
+              Create
+            </button>
+            <button
+              onClick={() => { setShowCreate(false); setNewName(""); }}
+              className="px-3 py-1.5 text-caption text-[--text-muted] hover:text-[--text-sidebar]"
+            >
+              Cancel
+            </button>
+          </div>
         </div>
-      </div>
-
-      {/* Task count */}
-      <div className="px-4 pb-2">
-        <span className="text-tiny text-[--text-muted]">
-          {state.cronTasks.length} cron job{state.cronTasks.length !== 1 ? "s" : ""}
-        </span>
-      </div>
+      )}
 
       {/* Job list */}
       <div className="flex-1 overflow-y-auto sidebar-scroll">
-        {state.cronTasks.length === 0 ? (
+        {state.cronTasks.length === 0 && !showCreate ? (
           <div className="px-4 py-8 text-center">
             <svg
               className="w-10 h-10 mx-auto mb-3"

package/packages/web/src/components/DataConsentModal.tsx

@@ -0,0 +1,249 @@
+import React, { useState, useEffect } from "react";
+
+interface DataConsentModalProps {
+  onAccept: () => void;
+}
+
+export function DataConsentModal({ onAccept }: DataConsentModalProps) {
+  const [scrolledToBottom, setScrolledToBottom] = useState(false);
+  const [timerElapsed, setTimerElapsed] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setTimerElapsed(true), 3000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const canAccept = scrolledToBottom || timerElapsed;
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const el = e.currentTarget;
+    if (el.scrollHeight - el.scrollTop - el.clientHeight < 20) {
+      setScrolledToBottom(true);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 flex items-center justify-center z-50 p-4"
+      style={{ background: "var(--bg-secondary)" }}
+    >
+      <div
+        className="w-full max-w-lg flex flex-col rounded-md"
+        style={{
+          background: "var(--bg-surface)",
+          boxShadow: "var(--shadow-lg)",
+          maxHeight: "90vh",
+        }}
+      >
+        {/* Header */}
+        <div className="px-6 pt-6 pb-4 shrink-0">
+          <div className="flex items-center gap-3 mb-1">
+            <svg className="w-6 h-6 shrink-0" viewBox="0 0 24 24" fill="none" stroke="var(--bg-active)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg>
+            <h1 className="text-h1 font-bold" style={{ color: "var(--text-primary)" }}>
+              How Your Data Works in BotsChat
+            </h1>
+          </div>
+          <p className="text-caption" style={{ color: "var(--text-muted)" }}>
+            Please review before continuing
+          </p>
+        </div>
+
+        {/* Scrollable content */}
+        <div
+          className="flex-1 min-h-0 overflow-y-auto px-6"
+          onScroll={handleScroll}
+        >
+          <div className="space-y-5 pb-2">
+            {/* Message Relay */}
+            <Section
+              icon={
+                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                </svg>
+              }
+              title="Message Relay"
+            >
+              BotsChat acts as a WebSocket relay between your browser and your own
+              OpenClaw AI gateway. Messages you send are transmitted through
+              BotsChat Cloud to reach your gateway.
+            </Section>
+
+            {/* E2E Encryption */}
+            <Section
+              icon={
+                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                  <path d="M7 11V7a5 5 0 0110 0v4" />
+                </svg>
+              }
+              title="End-to-End Encryption"
+            >
+              When E2E encryption is enabled, the server only stores ciphertext
+              it cannot read. Your encryption key never leaves your device.
+            </Section>
+
+            {/* AI Processing */}
+            <Section
+              icon={
+                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <rect x="4" y="4" width="16" height="16" rx="2" ry="2" />
+                  <rect x="9" y="9" width="6" height="6" />
+                  <line x1="9" y1="1" x2="9" y2="4" />
+                  <line x1="15" y1="1" x2="15" y2="4" />
+                  <line x1="9" y1="20" x2="9" y2="23" />
+                  <line x1="15" y1="20" x2="15" y2="23" />
+                  <line x1="20" y1="9" x2="23" y2="9" />
+                  <line x1="20" y1="14" x2="23" y2="14" />
+                  <line x1="1" y1="9" x2="4" y2="9" />
+                  <line x1="1" y1="14" x2="4" y2="14" />
+                </svg>
+              }
+              title="AI Processing"
+            >
+              AI processing happens on your OpenClaw gateway using AI services
+              you configure (such as OpenAI, Anthropic, Google, Azure, etc.).
+              BotsChat does not choose or control which AI service processes your
+              data.
+            </Section>
+
+            {/* Your API Keys */}
+            <Section
+              icon={
+                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
+                </svg>
+              }
+              title="Your API Keys"
+            >
+              Your API keys are stored on your OpenClaw gateway machine and never
+              pass through BotsChat Cloud.
+            </Section>
+
+            {/* Third-Party Services */}
+            <Section
+              icon={
+                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="2" y1="12" x2="22" y2="12" />
+                  <path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" />
+                </svg>
+              }
+              title="Third-Party Services"
+            >
+              BotsChat Cloud uses Cloudflare for hosting, database, and media
+              storage. Authentication is provided by Google and GitHub OAuth. No
+              data is sold or shared with advertisers.
+            </Section>
+
+            {/* What You Agree To */}
+            <div
+              className="rounded-md p-4"
+              style={{ background: "var(--bg-secondary)", border: "1px solid var(--border)" }}
+            >
+              <h3 className="text-body font-bold mb-3" style={{ color: "var(--text-primary)" }}>
+                What You Agree To
+              </h3>
+              <ul className="space-y-2">
+                <AgreementItem>
+                  Messages sent through BotsChat may be processed by third-party
+                  AI services configured in your OpenClaw gateway
+                </AgreementItem>
+                <AgreementItem>
+                  Your chat data is stored on Cloudflare infrastructure
+                </AgreementItem>
+                <AgreementItem>
+                  You can enable E2E encryption for additional privacy
+                </AgreementItem>
+                <AgreementItem>
+                  You can delete your account and all data at any time
+                </AgreementItem>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div
+          className="px-6 py-4 shrink-0"
+          style={{ borderTop: "1px solid var(--border)" }}
+        >
+          <button
+            onClick={onAccept}
+            disabled={!canAccept}
+            className="w-full py-2.5 font-bold text-body text-white rounded-sm transition-all"
+            style={{
+              background: canAccept ? "var(--bg-active)" : "var(--bg-hover, #3a3d41)",
+              cursor: canAccept ? "pointer" : "not-allowed",
+              opacity: canAccept ? 1 : 0.5,
+            }}
+          >
+            I Understand &amp; Accept
+          </button>
+          <div className="flex items-center justify-center gap-2 mt-3">
+            <a
+              href="https://botschat.app/privacy.html"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-tiny hover:underline"
+              style={{ color: "var(--text-muted)" }}
+            >
+              Privacy Policy
+            </a>
+            <span className="text-tiny" style={{ color: "var(--text-muted)" }}>·</span>
+            <a
+              href="https://botschat.app/terms.html"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-tiny hover:underline"
+              style={{ color: "var(--text-muted)" }}
+            >
+              Terms of Service
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Section({ icon, title, children }: { icon: React.ReactNode; title: string; children: React.ReactNode }) {
+  return (
+    <div className="flex gap-3">
+      <div
+        className="shrink-0 w-8 h-8 rounded-md flex items-center justify-center mt-0.5"
+        style={{ background: "var(--bg-secondary)", color: "var(--text-secondary)" }}
+      >
+        {icon}
+      </div>
+      <div className="min-w-0">
+        <h3 className="text-body font-bold mb-1" style={{ color: "var(--text-primary)" }}>
+          {title}
+        </h3>
+        <p className="text-caption" style={{ color: "var(--text-secondary)", lineHeight: 1.6 }}>
+          {children}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function AgreementItem({ children }: { children: React.ReactNode }) {
+  return (
+    <li className="flex gap-2 text-caption" style={{ color: "var(--text-secondary)" }}>
+      <svg
+        className="w-4 h-4 shrink-0 mt-0.5"
+        viewBox="0 0 20 20"
+        fill="var(--bg-active)"
+      >
+        <path
+          fillRule="evenodd"
+          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+          clipRule="evenodd"
+        />
+      </svg>
+      <span style={{ lineHeight: 1.5 }}>{children}</span>
+    </li>
+  );
+}

package/packages/web/src/components/LoginPage.tsx

@@ -3,7 +3,7 @@ import { authApi, setToken, setRefreshToken } from "../api";
 import type { AuthConfig } from "../api";
 import { useAppDispatch } from "../store";
 import { dlog } from "../debug-log";
-import { isFirebaseConfigured, signInWithGoogle, signInWithGitHub } from "../firebase";
+import { isFirebaseConfigured, signInWithGoogle, signInWithGitHub, signInWithApple } from "../firebase";
 
 /** Google "G" logo SVG */
 function GoogleIcon() {
@@ -26,6 +26,15 @@ function GitHubIcon() {
   );
 }
 
+/** Apple logo SVG */
+function AppleIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style={{ flexShrink: 0 }}>
+      <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
+    </svg>
+  );
+}
+
 export function LoginPage() {
   const dispatch = useAppDispatch();
   const [isRegister, setIsRegister] = useState(false);
@@ -34,7 +43,7 @@ export function LoginPage() {
   const [displayName, setDisplayName] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
-  const [oauthLoading, setOauthLoading] = useState<"google" | "github" | null>(null);
+  const [oauthLoading, setOauthLoading] = useState<"google" | "github" | "apple" | null>(null);
   const [authConfig, setAuthConfig] = useState<AuthConfig | null>(null);
 
   const firebaseEnabled = isFirebaseConfigured();
@@ -44,11 +53,12 @@ export function LoginPage() {
   useEffect(() => {
     authApi.config().then(setAuthConfig).catch(() => {
       // Fallback: assume email enabled (local dev) if config endpoint fails
-      setAuthConfig({ emailEnabled: true, googleEnabled: firebaseEnabled, githubEnabled: firebaseEnabled });
+      setAuthConfig({ emailEnabled: true, googleEnabled: firebaseEnabled, githubEnabled: firebaseEnabled, appleEnabled: firebaseEnabled });
     });
   }, [firebaseEnabled]);
 
-  const emailEnabled = authConfig?.emailEnabled ?? true;
+  // Email/password login is permanently disabled — only OAuth (Google/GitHub) is allowed.
+  const emailEnabled = false;
   const configLoaded = authConfig !== null;
   const hasAnyLoginMethod = configLoaded && (firebaseEnabled || emailEnabled);
 
@@ -89,20 +99,24 @@ export function LoginPage() {
     }
   };
 
-  const handleOAuthSignIn = async (provider: "google" | "github") => {
+  const handleOAuthSignIn = async (provider: "google" | "github" | "apple") => {
     setError("");
     setOauthLoading(provider);
 
+    const timeoutMs = provider === "apple" ? 120000 : 30000;
+    const timeout = setTimeout(() => {
+      setOauthLoading(null);
+    }, timeoutMs);
+
     try {
       dlog.info("Auth", `Starting ${provider} sign-in`);
-      const signInFn = provider === "google" ? signInWithGoogle : signInWithGitHub;
+      const signInFn = provider === "google" ? signInWithGoogle : provider === "github" ? signInWithGitHub : signInWithApple;
       const { idToken } = await signInFn();
       dlog.info("Auth", `Got Firebase ID token from ${provider}, verifying with backend`);
       const res = await authApi.firebase(idToken);
       dlog.info("Auth", `${provider} sign-in success — user ${res.id} (${res.email})`);
       handleAuthSuccess(res);
     } catch (err) {
-      // Don't show error for user-cancelled popup
       if (err instanceof Error && (
         err.message.includes("popup-closed-by-user") ||
         err.message.includes("cancelled")
@@ -114,6 +128,7 @@ export function LoginPage() {
         setError(message);
       }
     } finally {
+      clearTimeout(timeout);
       setOauthLoading(null);
     }
   };
@@ -171,6 +186,28 @@ export function LoginPage() {
           {configLoaded && firebaseEnabled && (
             <>
               <div className="space-y-3">
+                {/* Apple — listed first per Apple HIG */}
+                <button
+                  type="button"
+                  onClick={() => handleOAuthSignIn("apple")}
+                  disabled={anyLoading}
+                  className="w-full flex items-center justify-center gap-3 py-2.5 px-4 font-medium text-body rounded-sm disabled:opacity-50 transition-colors hover:brightness-95"
+                  style={{
+                    background: "var(--bg-surface)",
+                    color: "var(--text-primary)",
+                    border: "1px solid var(--border)",
+                  }}
+                >
+                  {oauthLoading === "apple" ? (
+                    <span>Signing in...</span>
+                  ) : (
+                    <>
+                      <AppleIcon />
+                      <span>Continue with Apple</span>
+                    </>
+                  )}
+                </button>
+
                 {/* Google */}
                 <button
                   type="button"
@@ -331,6 +368,17 @@ export function LoginPage() {
               </div>
             </>
           )}
+
+          {/* Privacy & Terms links */}
+          <div className="mt-6 text-center">
+            <a href="https://botschat.app/privacy.html" target="_blank" rel="noopener noreferrer" className="text-tiny hover:underline" style={{ color: "var(--text-muted)" }}>
+              Privacy Policy
+            </a>
+            <span className="mx-2 text-tiny" style={{ color: "var(--text-muted)" }}>·</span>
+            <a href="https://botschat.app/terms.html" target="_blank" rel="noopener noreferrer" className="text-tiny hover:underline" style={{ color: "var(--text-muted)" }}>
+              Terms of Service
+            </a>
+          </div>
         </div>
       </div>
     </div>

package/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,16 +972,18 @@ export function MessageContent({
       {/* Media preview */}
       {mediaUrl && (
         <div className="mb-2">
-          <MediaPreview url={mediaUrl} />
+          <MediaPreview url={mediaUrl} mediaContextId={encrypted && messageId ? `${messageId}:media` : undefined} />
         </div>
       )}
 
       {/* Markdown text with enhanced rendering */}
       {processedText ? (
         <div
-          className="prose prose-sm max-w-none prose-p:my-1 prose-ul:my-1 prose-ol:my-1 prose-pre:my-0 prose-code:before:content-none prose-code:after:content-none prose-headings:my-2"
+          className="prose prose-sm max-w-none overflow-hidden prose-p:my-1 prose-ul:my-1 prose-ol:my-1 prose-pre:my-0 prose-code:before:content-none prose-code:after:content-none prose-headings:my-2"
           style={{
             color: "var(--text-primary)",
+            overflowWrap: "break-word",
+            wordBreak: "break-word",
             "--tw-prose-headings": "var(--text-primary)",
             "--tw-prose-bold": "var(--text-primary)",
             "--tw-prose-code": "var(--code-text)",
@@ -1007,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 (
@@ -1021,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>
     );
@@ -1035,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>
     );
   }
@@ -1045,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"
@@ -1072,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")}
     />
   );
 }