feat(evidence): paste screenshot directly from clipboard (Ctrl+V)

- Global document paste listener captures image/* items from clipboard
- Auto-generates filename: screenshot-YYYY-MM-DDTHH-MM-SS.png
- Brief cyan pulse animation confirms the paste was detected
- Shows image preview before uploading (max-h 192px, object-contain)
- Drop zone hint now says 'Drag & drop, browse, or Ctrl+V to paste'
- Works with any source: OS screenshot (PrintScreen/Cmd+Shift+4),
  browser Inspect screenshots, any image copied to clipboard

frontend/src/components/EvidenceUpload.tsx

@@ -1,5 +1,5 @@
-import { useState, useCallback, useRef } from "react";
+import { useState, useCallback, useRef, useEffect } from "react";
-import { Upload, Loader2, X, FileIcon } from "lucide-react";
+import { Upload, Loader2, X, FileIcon, ClipboardPaste, ImageIcon } from "lucide-react";
 
 interface EvidenceUploadProps {
   onUpload: (file: File) => Promise<void>;
@@ -9,8 +9,49 @@ interface EvidenceUploadProps {
 export default function EvidenceUpload({ onUpload, isUploading }: EvidenceUploadProps) {
   const [isDragging, setIsDragging] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [pasteHint, setPasteHint] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
+  // ── Clipboard paste handler ─────────────────────────────────────
+  const handlePaste = useCallback(
+    async (e: ClipboardEvent) => {
+      const items = e.clipboardData?.items;
+      if (!items) return;
+
+      for (const item of Array.from(items)) {
+        if (item.type.startsWith("image/")) {
+          e.preventDefault();
+          const blob = item.getAsFile();
+          if (!blob) continue;
+
+          // Generate a timestamped filename for pasted screenshots
+          const ext = item.type.split("/")[1] || "png";
+          const ts = new Date()
+            .toISOString()
+            .replace(/[:.]/g, "-")
+            .slice(0, 19);
+          const file = new File([blob], `screenshot-${ts}.${ext}`, {
+            type: item.type,
+          });
+          setSelectedFile(file);
+          // Brief pulse animation to confirm paste was detected
+          setPasteHint(true);
+          setTimeout(() => setPasteHint(false), 1500);
+          return;
+        }
+      }
+    },
+    [],
+  );
+
+  // Listen for paste on the whole document while this component is mounted
+  useEffect(() => {
+    document.addEventListener("paste", handlePaste);
+    return () => document.removeEventListener("paste", handlePaste);
+  }, [handlePaste]);
+
+  // ── Drag & drop ─────────────────────────────────────────────────
   const handleDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault();
     setIsDragging(true);
@@ -25,33 +66,27 @@ export default function EvidenceUpload({ onUpload, isUploading }: EvidenceUpload
     e.preventDefault();
     setIsDragging(false);
     const file = e.dataTransfer.files[0];
-    if (file) {
+    if (file) setSelectedFile(file);
-      setSelectedFile(file);
-    }
   }, []);
 
+  // ── File picker ─────────────────────────────────────────────────
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
-    if (file) {
+    if (file) setSelectedFile(file);
-      setSelectedFile(file);
-    }
   };
 
+  // ── Upload ───────────────────────────────────────────────────────
   const handleUpload = async () => {
     if (selectedFile) {
       await onUpload(selectedFile);
       setSelectedFile(null);
-      if (fileInputRef.current) {
+      if (fileInputRef.current) fileInputRef.current.value = "";
-        fileInputRef.current.value = "";
-      }
     }
   };
 
   const clearSelection = () => {
     setSelectedFile(null);
-    if (fileInputRef.current) {
+    if (fileInputRef.current) fileInputRef.current.value = "";
-      fileInputRef.current.value = "";
-    }
   };
 
   const formatFileSize = (bytes: number): string => {
@@ -60,16 +95,20 @@ export default function EvidenceUpload({ onUpload, isUploading }: EvidenceUpload
     return (bytes / (1024 * 1024)).toFixed(1) + " MB";
   };
 
+  const isImage = selectedFile?.type.startsWith("image/");
+
   return (
-    <div className="space-y-4">
+    <div className="space-y-3" ref={containerRef}>
       {/* Drop zone */}
       <div
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
         onClick={() => fileInputRef.current?.click()}
-        className={`cursor-pointer rounded-lg border-2 border-dashed p-8 text-center transition-colors ${
+        className={`cursor-pointer rounded-lg border-2 border-dashed p-6 text-center transition-all ${
-          isDragging
+          pasteHint
+            ? "border-cyan-400 bg-cyan-500/15 scale-[1.01]"
+            : isDragging
             ? "border-cyan-500 bg-cyan-500/10"
             : "border-gray-700 bg-gray-800/50 hover:border-gray-600 hover:bg-gray-800"
         }`}
@@ -81,33 +120,70 @@ export default function EvidenceUpload({ onUpload, isUploading }: EvidenceUpload
           className="hidden"
         />
         <Upload
-          className={`mx-auto h-10 w-10 ${isDragging ? "text-cyan-400" : "text-gray-500"}`}
+          className={`mx-auto h-8 w-8 ${
+            pasteHint ? "text-cyan-400" : isDragging ? "text-cyan-400" : "text-gray-500"
+          }`}
         />
         <p className="mt-2 text-sm text-gray-400">
-          {isDragging ? (
+          {pasteHint ? (
+            <span className="text-cyan-400 font-medium">Screenshot detected ✓</span>
+          ) : isDragging ? (
             "Drop file here"
           ) : (
             <>
-              Drag and drop a file, or <span className="text-cyan-400">browse</span>
+              Drag & drop, <span className="text-cyan-400">browse</span>, or{" "}
+              <span className="text-cyan-400">Ctrl+V</span> to paste a screenshot
             </>
           )}
         </p>
-        <p className="mt-1 text-xs text-gray-500">
+        <div className="mt-2 flex items-center justify-center gap-3 text-[10px] text-gray-600">
-          Screenshots, logs, pcap files, etc. (max 50 MB)
+          <span className="flex items-center gap-1">
-        </p>
+            <ClipboardPaste className="h-3 w-3" /> Paste from clipboard
+          </span>
+          <span>·</span>
+          <span className="flex items-center gap-1">
+            <ImageIcon className="h-3 w-3" /> Screenshots, logs, pcap… (max 50 MB)
+          </span>
+        </div>
       </div>
 
       {/* Selected file preview */}
       {selectedFile && (
-        <div className="flex items-center justify-between rounded-lg border border-gray-700 bg-gray-800 p-3">
+        <div className="rounded-lg border border-gray-700 bg-gray-800 overflow-hidden">
-          <div className="flex items-center gap-3">
+          {/* Image preview for pasted screenshots */}
-            <FileIcon className="h-8 w-8 text-gray-400" />
+          {isImage && (
-            <div>
+            <div className="relative max-h-48 overflow-hidden bg-gray-900">
-              <p className="text-sm font-medium text-gray-200">{selectedFile.name}</p>
+              <img
-              <p className="text-xs text-gray-500">{formatFileSize(selectedFile.size)}</p>
+                src={URL.createObjectURL(selectedFile)}
+                alt="Screenshot preview"
+                className="w-full object-contain max-h-48"
+              />
+              <div className="absolute top-1 right-1 rounded bg-black/60 px-1.5 py-0.5 text-[10px] text-gray-300">
+                preview
               </div>
             </div>
-          <div className="flex items-center gap-2">
+          )}
+
+          <div className="flex items-center justify-between p-3">
+            <div className="flex items-center gap-3 min-w-0">
+              {isImage ? (
+                <ImageIcon className="h-7 w-7 shrink-0 text-cyan-400" />
+              ) : (
+                <FileIcon className="h-7 w-7 shrink-0 text-gray-400" />
+              )}
+              <div className="min-w-0">
+                <p className="text-sm font-medium text-gray-200 truncate">
+                  {selectedFile.name}
+                </p>
+                <p className="text-xs text-gray-500">
+                  {formatFileSize(selectedFile.size)}
+                  {isImage && (
+                    <span className="ml-2 text-cyan-500/70">screenshot</span>
+                  )}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2 shrink-0 ml-3">
               <button
                 onClick={clearSelection}
                 disabled={isUploading}
@@ -118,12 +194,12 @@ export default function EvidenceUpload({ onUpload, isUploading }: EvidenceUpload
               <button
                 onClick={handleUpload}
                 disabled={isUploading}
-              className="flex items-center gap-1.5 rounded-lg bg-cyan-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-cyan-500 disabled:opacity-50"
+                className="flex items-center gap-1.5 rounded-lg bg-cyan-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-cyan-500 disabled:opacity-50 transition-colors"
               >
                 {isUploading ? (
                   <>
                     <Loader2 className="h-4 w-4 animate-spin" />
-                  Uploading...
+                    Uploading…
                   </>
                 ) : (
                   <>
@@ -134,6 +210,7 @@ export default function EvidenceUpload({ onUpload, isUploading }: EvidenceUpload
               </button>
             </div>
           </div>
+        </div>
       )}
     </div>
   );