feat: image/file sharing in chat with drive grouping by contact

- Attach button in chat sends encrypted files via conversation key
- Images render inline; other files show a download button
- Shared files stored on server with conversation_id for access control
- Drive groups files by conversation partner name (sender view)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/src/routes/files.ts

@@ -57,8 +57,15 @@ router.post('/upload', upload.single('file'), async (req: AuthRequest, res) => {
 
 router.get('/files', async (req: AuthRequest, res) => {
   const result = await db.query(
-    `SELECT id, encrypted_name, mime_type, size_bytes, encrypted_file_key, uploaded_at
+    `SELECT f.id, f.encrypted_name, f.mime_type, f.size_bytes, f.encrypted_file_key,
-     FROM files WHERE owner_id = $1 AND deleted_at IS NULL ORDER BY uploaded_at DESC`,
+            f.uploaded_at, f.conversation_id,
+            u.username AS shared_with_username
+     FROM files f
+     LEFT JOIN conversation_members cm
+       ON cm.conversation_id = f.conversation_id AND cm.user_id != $1
+     LEFT JOIN users u ON u.id = cm.user_id
+     WHERE f.owner_id = $1 AND f.deleted_at IS NULL
+     ORDER BY f.uploaded_at DESC`,
     [req.userId]
   );
   res.json(result.rows);

frontend/src/pages/DrivePage.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useCallback } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { Upload, File, Trash2, Download, Lock } from 'lucide-react';
+import { Upload, File, Trash2, Download, Lock, MessageSquare } from 'lucide-react';
 import { formatDistanceToNow } from 'date-fns';
 import api from '../lib/api';
 import { useAuthStore } from '../lib/store';
@@ -21,6 +21,8 @@ interface DriveFile {
   size_bytes: number;
   encrypted_file_key: string;
   uploaded_at: string;
+  conversation_id: string | null;
+  shared_with_username: string | null;
 }
 
 function formatBytes(bytes: number) {
@@ -157,41 +159,86 @@ export default function DrivePage() {
             <p>No files yet — drag &amp; drop or click Upload</p>
           </div>
         ) : (
-          <div className="grid grid-cols-1 gap-2">
+          <FileGroups files={files} decryptedNames={decryptedNames}
-            {files.map((f) => (
+            onDownload={handleDownload} onDelete={handleDelete} />
-              <div
-                key={f.id}
-                className="flex items-center gap-4 bg-surface-1 rounded-lg px-4 py-3 border border-slate-700"
-              >
-                <File className="w-5 h-5 text-accent shrink-0" />
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium truncate">
-                    {decryptedNames[f.id] ?? '…'}
-                  </p>
-                  <p className="text-xs text-slate-500">
-                    {formatBytes(f.size_bytes)} ·{' '}
-                    {formatDistanceToNow(new Date(f.uploaded_at), { addSuffix: true })}
-                  </p>
-                </div>
-                <button
-                  onClick={() => handleDownload(f)}
-                  className="p-1.5 text-slate-400 hover:text-white transition-colors"
-                  title="Download"
-                >
-                  <Download className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => handleDelete(f.id)}
-                  className="p-1.5 text-slate-400 hover:text-red-400 transition-colors"
-                  title="Delete"
-                >
-                  <Trash2 className="w-4 h-4" />
-                </button>
-              </div>
-            ))}
-          </div>
         )}
       </div>
     </div>
   );
 }
+
+function FileRow({ f, name, onDownload, onDelete }: {
+  f: DriveFile; name: string;
+  onDownload: (f: DriveFile) => void; onDelete: (id: string) => void;
+}) {
+  return (
+    <div className="flex items-center gap-4 bg-surface-1 rounded-lg px-4 py-3 border border-slate-700">
+      <File className="w-5 h-5 text-accent shrink-0" />
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium truncate">{name}</p>
+        <p className="text-xs text-slate-500">
+          {formatBytes(f.size_bytes)} · {formatDistanceToNow(new Date(f.uploaded_at), { addSuffix: true })}
+        </p>
+      </div>
+      <button onClick={() => onDownload(f)} className="p-1.5 text-slate-400 hover:text-white transition-colors" title="Download">
+        <Download className="w-4 h-4" />
+      </button>
+      <button onClick={() => onDelete(f.id)} className="p-1.5 text-slate-400 hover:text-red-400 transition-colors" title="Delete">
+        <Trash2 className="w-4 h-4" />
+      </button>
+    </div>
+  );
+}
+
+function FileGroups({ files, decryptedNames, onDownload, onDelete }: {
+  files: DriveFile[];
+  decryptedNames: Record<string, string>;
+  onDownload: (f: DriveFile) => void;
+  onDelete: (id: string) => void;
+}) {
+  const personal = files.filter((f) => !f.conversation_id);
+  const byPerson = files
+    .filter((f) => f.conversation_id && f.shared_with_username)
+    .reduce<Record<string, DriveFile[]>>((acc, f) => {
+      const name = f.shared_with_username!;
+      if (!acc[name]) acc[name] = [];
+      acc[name].push(f);
+      return acc;
+    }, {});
+
+  return (
+    <div className="space-y-6">
+      {Object.entries(byPerson).map(([person, personFiles]) => (
+        <div key={person}>
+          <div className="flex items-center gap-2 mb-2">
+            <MessageSquare className="w-4 h-4 text-slate-500" />
+            <h2 className="text-sm font-semibold text-slate-400">{person}</h2>
+          </div>
+          <div className="grid grid-cols-1 gap-2">
+            {personFiles.map((f) => (
+              <FileRow key={f.id} f={f} name={decryptedNames[f.id] ?? '…'}
+                onDownload={onDownload} onDelete={onDelete} />
+            ))}
+          </div>
+        </div>
+      ))}
+
+      {personal.length > 0 && (
+        <div>
+          {Object.keys(byPerson).length > 0 && (
+            <div className="flex items-center gap-2 mb-2">
+              <File className="w-4 h-4 text-slate-500" />
+              <h2 className="text-sm font-semibold text-slate-400">Personal</h2>
+            </div>
+          )}
+          <div className="grid grid-cols-1 gap-2">
+            {personal.map((f) => (
+              <FileRow key={f.id} f={f} name={decryptedNames[f.id] ?? '…'}
+                onDownload={onDownload} onDelete={onDelete} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/MessagesPage.tsx

@@ -1,7 +1,7 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { Send, Plus, Search, ArrowLeft } from 'lucide-react';
+import { Send, Plus, Search, ArrowLeft, Paperclip, Download, ImageIcon } from 'lucide-react';
 import { formatDistanceToNow } from 'date-fns';
 import api from '../lib/api';
 import { useAuthStore, useCryptoStore } from '../lib/store';
@@ -13,6 +13,12 @@ import {
   sealConvKey,
   openSealedConvKey,
   importConvKey,
+  encryptFile,
+  decryptFile,
+  generateFileKey,
+  encryptFileKey,
+  bufToB64,
+  b64ToBuf,
 } from '../crypto';
 
 interface Conversation {
@@ -28,15 +34,98 @@ interface Message {
   sender_username: string;
   ciphertext: string;
   sent_at: string;
+  file_id?: string;
   plaintext?: string;
 }
 
+interface ParsedMessage {
+  type: 'text' | 'file';
+  text?: string;
+  fileId?: string;
+  fileKeyB64?: string;
+  fileName?: string;
+  mimeType?: string;
+}
+
 interface UserResult {
   id: string;
   username: string;
   public_key: string;
 }
 
+function parsePlaintext(plain: string): ParsedMessage {
+  try {
+    const obj = JSON.parse(plain);
+    if (obj.type === 'file' && obj.fileId) return obj as ParsedMessage;
+  } catch {}
+  return { type: 'text', text: plain };
+}
+
+function FileMessage({ msg, fileKeyB64, fileName, mimeType, isMine }: {
+  msg: Message; fileKeyB64: string; fileName: string; mimeType: string; isMine: boolean;
+}) {
+  const [src, setSrc] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const isImage = mimeType.startsWith('image/');
+
+  useEffect(() => {
+    if (!isImage || !msg.file_id) return;
+    let url: string;
+    setLoading(true);
+    api.get(`/files/${msg.file_id}/download`, { responseType: 'blob' })
+      .then(async (res) => {
+        const fileKey = await importConvKey(b64ToBuf(fileKeyB64));
+        const decrypted = await decryptFile(res.data, fileKey);
+        url = URL.createObjectURL(new Blob([decrypted], { type: mimeType }));
+        setSrc(url);
+      })
+      .catch(() => setSrc(null))
+      .finally(() => setLoading(false));
+    return () => { if (url) URL.revokeObjectURL(url); };
+  }, [msg.file_id, fileKeyB64, mimeType, isImage]);
+
+  async function download() {
+    if (!msg.file_id) return;
+    const res = await api.get(`/files/${msg.file_id}/download`, { responseType: 'blob' });
+    const fileKey = await importConvKey(b64ToBuf(fileKeyB64));
+    const decrypted = await decryptFile(res.data, fileKey);
+    const url = URL.createObjectURL(new Blob([decrypted], { type: mimeType }));
+    const a = document.createElement('a');
+    a.href = url; a.download = fileName; a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  return (
+    <div className={`max-w-xs lg:max-w-sm rounded-2xl overflow-hidden text-sm ${
+      isMine ? 'bg-accent text-white rounded-br-sm' : 'bg-surface-1 text-slate-100 rounded-bl-sm'
+    }`}>
+      {isImage ? (
+        loading ? (
+          <div className="w-48 h-32 flex items-center justify-center bg-slate-700">
+            <ImageIcon className="w-6 h-6 text-slate-500 animate-pulse" />
+          </div>
+        ) : src ? (
+          <img src={src} alt={fileName} className="max-w-full max-h-64 object-contain cursor-pointer"
+            onClick={download} />
+        ) : (
+          <div className="w-48 h-32 flex items-center justify-center bg-slate-700 text-slate-400 text-xs">
+            Failed to load
+          </div>
+        )
+      ) : null}
+      <div className="px-3 py-2 flex items-center gap-2">
+        <button onClick={download} className="flex items-center gap-1.5 flex-1 min-w-0 hover:opacity-80">
+          <Download className="w-4 h-4 shrink-0" />
+          <span className="truncate text-xs">{fileName}</span>
+        </button>
+      </div>
+      <p className={`text-xs px-3 pb-2 ${isMine ? 'text-indigo-200' : 'text-slate-500'}`}>
+        {msg.sent_at ? formatDistanceToNow(new Date(msg.sent_at), { addSuffix: true }) : 'just now'}
+      </p>
+    </div>
+  );
+}
+
 export default function MessagesPage() {
   const { id: activeId } = useParams();
   const navigate = useNavigate();
@@ -47,24 +136,23 @@ export default function MessagesPage() {
   const [messages, setMessages] = useState<Message[]>([]);
   const [newUserSearch, setNewUserSearch] = useState('');
   const [searchResults, setSearchResults] = useState<UserResult[]>([]);
+  const [uploading, setUploading] = useState(false);
   const bottomRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const { data: conversations = [] } = useQuery<Conversation[]>({
     queryKey: ['conversations'],
     queryFn: () => api.get('/conversations').then((r) => r.data),
   });
 
-  // Load + decrypt messages when active conversation changes
   useEffect(() => {
     if (!activeId || !publicKey || !privateKey) return;
-
     async function load() {
       const conv = conversations.find((c) => c.id === activeId);
       if (!conv) return;
 
       let convKey = getConvKey(activeId!);
       if (!convKey) {
-        // Decrypt the conversation key that was sealed for us with our X25519 public key
         const raw = await openSealedConvKey(conv.encrypted_key, privateKey!);
         convKey = await importConvKey(raw);
         setConvKey(activeId!, convKey);
@@ -79,16 +167,14 @@ export default function MessagesPage() {
       );
       setMessages(decrypted);
     }
-
     load();
   }, [activeId, conversations.length]);
 
-  // WebSocket: decrypt incoming messages in real time (skip own — already shown optimistically)
   useEffect(() => {
     return socket.on(async (raw) => {
       const msg = raw as any;
       if (msg.type !== 'message' || msg.conversationId !== activeId) return;
-      if (msg.senderId === userId) return; // Own message already added optimistically
+      if (msg.senderId === userId) return;
 
       const convKey = getConvKey(activeId!);
       if (!convKey) return;
@@ -96,7 +182,13 @@ export default function MessagesPage() {
       const plaintext = await decryptMessage(msg.ciphertext, convKey).catch(() => '[encrypted]');
       setMessages((prev) => [
         ...prev,
-        { ...msg, sender_username: msg.senderUsername ?? msg.senderId, plaintext, sent_at: msg.sentAt ?? new Date().toISOString() },
+        {
+          ...msg,
+          sender_username: msg.senderUsername ?? msg.senderId,
+          plaintext,
+          file_id: msg.fileId ?? undefined,
+          sent_at: msg.sentAt ?? new Date().toISOString(),
+        },
       ]);
     });
   }, [activeId, userId]);
@@ -111,11 +203,9 @@ export default function MessagesPage() {
     if (!convKey) return;
 
     const plaintext = text.trim();
-    setText(''); // Clear immediately for responsiveness
+    setText('');
 
     const ciphertext = await encryptMessage(plaintext, convKey);
-
-    // Optimistic update — show in UI before server confirms
     setMessages((prev) => [...prev, {
       id: `pending-${Date.now()}`,
       sender_id: userId!,
@@ -128,31 +218,64 @@ export default function MessagesPage() {
     socket.send({ type: 'message', conversationId: activeId, ciphertext });
   }
 
+  const sendFile = useCallback(async (file: File) => {
+    if (!activeId) return;
+    const convKey = getConvKey(activeId);
+    if (!convKey) return;
+    setUploading(true);
+
+    try {
+      const fileKey = await generateFileKey();
+      const encryptedBlob = await encryptFile(file, fileKey);
+      const encryptedFileKey = await encryptFileKey(fileKey, useAuthStore.getState().masterKey!);
+      const encryptedName = await encryptMessage(file.name, fileKey);
+
+      const rawFileKey = await crypto.subtle.exportKey('raw', fileKey);
+      const fileKeyB64 = bufToB64(rawFileKey);
+
+      const form = new FormData();
+      form.append('file', encryptedBlob, 'blob');
+      form.append('encryptedName', encryptedName);
+      form.append('encryptedFileKey', encryptedFileKey);
+      form.append('mimeType', file.type || 'application/octet-stream');
+      form.append('conversationId', activeId);
+
+      const uploadRes = await api.post('/upload', form, { headers: { 'Content-Type': 'multipart/form-data' } });
+      const fileId = uploadRes.data.id;
+
+      const payload = JSON.stringify({ type: 'file', fileId, fileKeyB64, fileName: file.name, mimeType: file.type });
+      const ciphertext = await encryptMessage(payload, convKey);
+
+      setMessages((prev) => [...prev, {
+        id: `pending-${Date.now()}`,
+        sender_id: userId!,
+        sender_username: useAuthStore.getState().username || userId!,
+        ciphertext,
+        plaintext: payload,
+        file_id: fileId,
+        sent_at: new Date().toISOString(),
+      }]);
+
+      socket.send({ type: 'message', conversationId: activeId, ciphertext, fileId });
+      qc.invalidateQueries({ queryKey: ['files'] });
+    } finally {
+      setUploading(false);
+    }
+  }, [activeId, getConvKey, userId, qc]);
+
   async function startConversation(recipient: UserResult) {
     if (!publicKey || !privateKey) return;
-
-    // Generate random conversation key
     const convKeyRaw = generateConvKeyRaw();
-
-    // Seal a copy for each participant using their X25519 public key
-    // Each party can only open their own copy
     const [myEncKey, recipientEncKey] = await Promise.all([
       sealConvKey(convKeyRaw, publicKey),
       sealConvKey(convKeyRaw, recipient.public_key),
     ]);
-
     const res = await api.post('/conversations', {
       recipientId: recipient.id,
-      encryptedKeys: {
+      encryptedKeys: { [userId!]: myEncKey, [recipient.id]: recipientEncKey },
-        [userId!]: myEncKey,
-        [recipient.id]: recipientEncKey,
-      },
     });
-
-    // Cache the decrypted key in memory for immediate use
     const convKey = await importConvKey(convKeyRaw);
     setConvKey(res.data.conversationId, convKey);
-
     qc.invalidateQueries({ queryKey: ['conversations'] });
     setNewUserSearch('');
     setSearchResults([]);
@@ -171,7 +294,7 @@ export default function MessagesPage() {
 
   return (
     <div className="flex h-full">
-      {/* Conversation list — full screen on mobile when no chat open, sidebar on desktop */}
+      {/* Conversation list */}
       <aside className={`${activeId ? 'hidden md:flex' : 'flex'} w-full md:w-64 border-r border-slate-700 flex-col bg-surface-1 shrink-0`}>
         <div className="p-3 border-b border-slate-700">
           <div className="relative">
@@ -186,11 +309,8 @@ export default function MessagesPage() {
           {searchResults.length > 0 && (
             <div className="mt-1 bg-surface-2 rounded-lg border border-slate-600 overflow-hidden">
               {searchResults.map((u) => (
-                <button
+                <button key={u.id} onClick={() => startConversation(u)}
-                  key={u.id}
+                  className="w-full text-left px-3 py-2 text-sm hover:bg-slate-600 transition-colors">
-                  onClick={() => startConversation(u)}
-                  className="w-full text-left px-3 py-2 text-sm hover:bg-slate-600 transition-colors"
-                >
                   {u.username}
                 </button>
               ))}
@@ -202,13 +322,10 @@ export default function MessagesPage() {
           {conversations.map((conv) => {
             const other = conv.members.find((m) => m.id !== userId);
             return (
-              <Link
+              <Link key={conv.id} to={`/messages/${conv.id}`}
-                key={conv.id}
-                to={`/messages/${conv.id}`}
                 className={`flex items-center gap-3 px-3 py-3 border-b border-slate-700/50 hover:bg-surface-2 transition-colors ${
                   activeId === conv.id ? 'bg-surface-2' : ''
-                }`}
+                }`}>
-              >
                 <div className="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-xs font-bold shrink-0">
                   {other?.username[0]?.toUpperCase() ?? '?'}
                 </div>
@@ -226,15 +343,12 @@ export default function MessagesPage() {
         </div>
       </aside>
 
-      {/* Chat area — hidden on mobile when no chat open */}
+      {/* Chat area */}
       <div className={`${activeId ? 'flex' : 'hidden md:flex'} flex-1 flex-col`}>
         {activeId ? (
           <>
             <header className="px-4 py-3 border-b border-slate-700 bg-surface-1 flex items-center gap-3">
-              <button
+              <button onClick={() => navigate('/messages')} className="md:hidden p-1 -ml-1 text-slate-400 hover:text-white">
-                onClick={() => navigate('/messages')}
-                className="md:hidden p-1 -ml-1 text-slate-400 hover:text-white"
-              >
                 <ArrowLeft className="w-5 h-5" />
               </button>
               <div className="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-sm font-bold shrink-0">
@@ -250,20 +364,27 @@ export default function MessagesPage() {
             <div className="flex-1 overflow-y-auto px-4 py-4 space-y-3">
               {messages.map((m) => {
                 const mine = m.sender_id === userId;
+                const parsed = parsePlaintext(m.plaintext ?? '');
                 return (
                   <div key={m.id} className={`flex ${mine ? 'justify-end' : 'justify-start'}`}>
-                    <div
+                    {parsed.type === 'file' && parsed.fileId ? (
-                      className={`max-w-xs lg:max-w-md px-4 py-2 rounded-2xl text-sm ${
+                      <FileMessage
-                        mine
+                        msg={{ ...m, file_id: parsed.fileId }}
-                          ? 'bg-accent text-white rounded-br-sm'
+                        fileKeyB64={parsed.fileKeyB64!}
-                          : 'bg-surface-1 text-slate-100 rounded-bl-sm'
+                        fileName={parsed.fileName ?? 'file'}
-                      }`}
+                        mimeType={parsed.mimeType ?? 'application/octet-stream'}
-                    >
+                        isMine={mine}
-                      <p>{m.plaintext}</p>
+                      />
-                      <p className={`text-xs mt-1 ${mine ? 'text-indigo-200' : 'text-slate-500'}`}>
+                    ) : (
-                        {m.sent_at ? formatDistanceToNow(new Date(m.sent_at), { addSuffix: true }) : 'just now'}
+                      <div className={`max-w-xs lg:max-w-md px-4 py-2 rounded-2xl text-sm ${
-                      </p>
+                        mine ? 'bg-accent text-white rounded-br-sm' : 'bg-surface-1 text-slate-100 rounded-bl-sm'
-                    </div>
+                      }`}>
+                        <p>{parsed.text}</p>
+                        <p className={`text-xs mt-1 ${mine ? 'text-indigo-200' : 'text-slate-500'}`}>
+                          {m.sent_at ? formatDistanceToNow(new Date(m.sent_at), { addSuffix: true }) : 'just now'}
+                        </p>
+                      </div>
+                    )}
                   </div>
                 );
               })}
@@ -271,14 +392,21 @@ export default function MessagesPage() {
             </div>
 
             <div className="px-4 py-3 border-t border-slate-700 flex gap-2">
+              <input ref={fileInputRef} type="file" accept="image/*,*/*" className="hidden"
+                onChange={(e) => { const f = e.target.files?.[0]; if (f) sendFile(f); e.target.value = ''; }} />
+              <button onClick={() => fileInputRef.current?.click()} disabled={uploading}
+                className="p-2 text-slate-400 hover:text-white transition-colors" title="Attach file">
+                <Paperclip className="w-5 h-5" />
+              </button>
               <input
                 className="input flex-1"
-                placeholder="Message…"
+                placeholder={uploading ? 'Uploading…' : 'Message…'}
                 value={text}
+                disabled={uploading}
                 onChange={(e) => setText(e.target.value)}
                 onKeyDown={(e) => e.key === 'Enter' && !e.shiftKey && sendMessage()}
               />
-              <button onClick={sendMessage} className="btn-primary px-4">
+              <button onClick={sendMessage} disabled={uploading} className="btn-primary px-4">
                 <Send className="w-4 h-4" />
               </button>
             </div>