From 0302e5b21aec7470940296edb0127bb2801df636 Mon Sep 17 00:00:00 2001
From: Mondo Diaz <armando.m.diaz@boeing.com>
Date: Wed, 7 Jan 2026 14:24:44 -0600
Subject: [PATCH] Add offline detection, chunked uploads, and security tests
 (#9, #10, #12, #15)

- Add offline detection with navigator.onLine and auto-pause/resume
- Implement chunked upload for files >100MB with localStorage persistence
- Add download by artifact ID input field in PackagePage
- Add 10 security tests for path traversal and malformed requests
- Fix test setup globalThis reference
---
 .../integration/test_upload_download_api.py   | 207 +++++++++
 frontend/src/components/DragDropUpload.css    |  40 ++
 frontend/src/components/DragDropUpload.tsx    | 396 ++++++++++++++++--
 frontend/src/pages/PackagePage.css            |  52 +++
 frontend/src/pages/PackagePage.tsx            |  29 ++
 frontend/src/test/setup.ts                    |   2 +-
 6 files changed, 689 insertions(+), 37 deletions(-)

diff --git a/backend/tests/integration/test_upload_download_api.py b/backend/tests/integration/test_upload_download_api.py
index dfa25f9..8b83e02 100644
--- a/backend/tests/integration/test_upload_download_api.py
+++ b/backend/tests/integration/test_upload_download_api.py
@@ -500,3 +500,210 @@ class TestS3StorageVerification:
         artifact = response.json()
         assert artifact["id"] == expected_hash
         assert artifact["ref_count"] == 3
+
+
+class TestSecurityPathTraversal:
+    """Tests for path traversal attack prevention.
+
+    Note: Orchard uses content-addressable storage where files are stored by
+    SHA256 hash, not filename. Filenames are metadata only and never used in
+    file path construction, so path traversal in filenames is not a security
+    vulnerability. These tests verify the system handles unusual inputs safely.
+    """
+
+    @pytest.mark.integration
+    def test_path_traversal_in_filename_stored_safely(
+        self, integration_client, test_package
+    ):
+        """Test filenames with path traversal are stored safely (as metadata only)."""
+        project, package = test_package
+        content = b"path traversal test content"
+        expected_hash = compute_sha256(content)
+
+        files = {
+            "file": (
+                "../../../etc/passwd",
+                io.BytesIO(content),
+                "application/octet-stream",
+            )
+        }
+        response = integration_client.post(
+            f"/api/v1/project/{project}/{package}/upload",
+            files=files,
+            data={"tag": "traversal-test"},
+        )
+        assert response.status_code == 200
+        result = response.json()
+        assert result["artifact_id"] == expected_hash
+        s3_objects = list_s3_objects_by_hash(expected_hash)
+        assert len(s3_objects) == 1
+        assert ".." not in s3_objects[0]
+
+    @pytest.mark.integration
+    def test_path_traversal_in_package_name(self, integration_client, test_project):
+        """Test package names with path traversal sequences are rejected."""
+        response = integration_client.get(
+            f"/api/v1/project/{test_project}/packages/../../../etc/passwd"
+        )
+        assert response.status_code in [400, 404, 422]
+
+    @pytest.mark.integration
+    def test_path_traversal_in_tag_name(self, integration_client, test_package):
+        """Test tag names with path traversal are handled safely."""
+        project, package = test_package
+        content = b"tag traversal test"
+
+        files = {"file": ("test.bin", io.BytesIO(content), "application/octet-stream")}
+        response = integration_client.post(
+            f"/api/v1/project/{project}/{package}/upload",
+            files=files,
+            data={"tag": "../../../etc/passwd"},
+        )
+        assert response.status_code in [200, 400, 422]
+
+    @pytest.mark.integration
+    def test_download_path_traversal_in_ref(self, integration_client, test_package):
+        """Test download ref with path traversal is rejected."""
+        project, package = test_package
+
+        response = integration_client.get(
+            f"/api/v1/project/{project}/{package}/+/../../../etc/passwd"
+        )
+        assert response.status_code in [400, 404, 422]
+
+    @pytest.mark.integration
+    def test_path_traversal_in_package_name(self, integration_client, test_project):
+        """Test package names with path traversal sequences are rejected."""
+        response = integration_client.get(
+            f"/api/v1/project/{test_project}/packages/../../../etc/passwd"
+        )
+        assert response.status_code in [400, 404, 422]
+
+    @pytest.mark.integration
+    def test_path_traversal_in_tag_name(self, integration_client, test_package):
+        """Test tag names with path traversal are rejected or handled safely."""
+        project, package = test_package
+        content = b"tag traversal test"
+
+        files = {"file": ("test.bin", io.BytesIO(content), "application/octet-stream")}
+        response = integration_client.post(
+            f"/api/v1/project/{project}/{package}/upload",
+            files=files,
+            data={"tag": "../../../etc/passwd"},
+        )
+        assert response.status_code in [200, 400, 422]
+
+    @pytest.mark.integration
+    def test_download_path_traversal_in_ref(self, integration_client, test_package):
+        """Test download ref with path traversal is rejected."""
+        project, package = test_package
+
+        response = integration_client.get(
+            f"/api/v1/project/{project}/{package}/+/../../../etc/passwd"
+        )
+        assert response.status_code in [400, 404, 422]
+
+
+class TestSecurityMalformedRequests:
+    """Tests for malformed request handling."""
+
+    @pytest.mark.integration
+    def test_upload_missing_file_field(self, integration_client, test_package):
+        """Test upload without file field returns appropriate error."""
+        project, package = test_package
+
+        response = integration_client.post(
+            f"/api/v1/project/{project}/{package}/upload",
+            data={"tag": "no-file"},
+        )
+        assert response.status_code == 422
+
+    @pytest.mark.integration
+    def test_upload_null_bytes_in_filename(self, integration_client, test_package):
+        """Test filename with null bytes is handled safely."""
+        project, package = test_package
+        content = b"null byte test"
+
+        files = {
+            "file": ("test\x00.bin", io.BytesIO(content), "application/octet-stream")
+        }
+        response = integration_client.post(
+            f"/api/v1/project/{project}/{package}/upload",
+            files=files,
+        )
+        assert response.status_code in [200, 400, 422]
+
+    @pytest.mark.integration
+    def test_upload_very_long_filename(self, integration_client, test_package):
+        """Test very long filename is handled (truncated or rejected)."""
+        project, package = test_package
+        content = b"long filename test"
+        long_filename = "a" * 1000 + ".bin"
+
+        files = {
+            "file": (long_filename, io.BytesIO(content), "application/octet-stream")
+        }
+        response = integration_client.post(
+            f"/api/v1/project/{project}/{package}/upload",
+            files=files,
+        )
+        assert response.status_code in [200, 400, 413, 422]
+
+    @pytest.mark.integration
+    def test_upload_special_characters_in_filename(
+        self, integration_client, test_package
+    ):
+        """Test filenames with special characters are handled safely."""
+        project, package = test_package
+        content = b"special char test"
+
+        special_filenames = [
+            "test<script>.bin",
+            'test"quote.bin',
+            "test'apostrophe.bin",
+            "test;semicolon.bin",
+            "test|pipe.bin",
+        ]
+
+        for filename in special_filenames:
+            files = {
+                "file": (filename, io.BytesIO(content), "application/octet-stream")
+            }
+            response = integration_client.post(
+                f"/api/v1/project/{project}/{package}/upload",
+                files=files,
+            )
+            assert response.status_code in [200, 400, 422], (
+                f"Unexpected status {response.status_code} for filename: {filename}"
+            )
+
+    @pytest.mark.integration
+    def test_invalid_checksum_header_format(self, integration_client, test_package):
+        """Test invalid X-Checksum-SHA256 header format is rejected."""
+        project, package = test_package
+        content = b"checksum test"
+
+        files = {"file": ("test.bin", io.BytesIO(content), "application/octet-stream")}
+        response = integration_client.post(
+            f"/api/v1/project/{project}/{package}/upload",
+            files=files,
+            headers={"X-Checksum-SHA256": "not-a-valid-hash"},
+        )
+        assert response.status_code == 400
+        assert "Invalid" in response.json().get("detail", "")
+
+    @pytest.mark.integration
+    def test_checksum_mismatch_rejected(self, integration_client, test_package):
+        """Test upload with wrong checksum is rejected."""
+        project, package = test_package
+        content = b"checksum mismatch test"
+        wrong_hash = "0" * 64
+
+        files = {"file": ("test.bin", io.BytesIO(content), "application/octet-stream")}
+        response = integration_client.post(
+            f"/api/v1/project/{project}/{package}/upload",
+            files=files,
+            headers={"X-Checksum-SHA256": wrong_hash},
+        )
+        assert response.status_code == 422
+        assert "verification failed" in response.json().get("detail", "").lower()
diff --git a/frontend/src/components/DragDropUpload.css b/frontend/src/components/DragDropUpload.css
index 4f2be22..55b3467 100644
--- a/frontend/src/components/DragDropUpload.css
+++ b/frontend/src/components/DragDropUpload.css
@@ -2,6 +2,24 @@
   width: 100%;
 }
 
+/* Offline Banner */
+.offline-banner {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--warning-bg, #fff3cd);
+  border: 1px solid var(--warning-border, #ffc107);
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  color: var(--warning-text, #856404);
+  font-size: 0.875rem;
+}
+
+.offline-banner svg {
+  flex-shrink: 0;
+}
+
 /* Drop Zone */
 .drop-zone {
   border: 2px dashed var(--border-color, #ddd);
@@ -160,6 +178,23 @@
   color: var(--accent-color, #007bff);
 }
 
+.upload-item--paused .upload-item__icon {
+  color: var(--warning-color, #ffc107);
+}
+
+.upload-item--validating .upload-item__icon {
+  color: var(--accent-color, #007bff);
+}
+
+.spinner-icon {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 .upload-item__info {
   flex: 1;
   min-width: 0;
@@ -207,6 +242,11 @@
   color: var(--warning-color, #ffc107);
 }
 
+.upload-item__validating {
+  color: var(--accent-color, #007bff);
+  font-style: italic;
+}
+
 .upload-item__actions {
   display: flex;
   gap: 0.25rem;
diff --git a/frontend/src/components/DragDropUpload.tsx b/frontend/src/components/DragDropUpload.tsx
index 9acfc54..a2b65c8 100644
--- a/frontend/src/components/DragDropUpload.tsx
+++ b/frontend/src/components/DragDropUpload.tsx
@@ -1,8 +1,63 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import './DragDropUpload.css';
 
+const CHUNK_SIZE = 10 * 1024 * 1024;
+const CHUNKED_UPLOAD_THRESHOLD = 100 * 1024 * 1024;
+const UPLOAD_STATE_PREFIX = 'orchard_upload_';
+
+interface StoredUploadState {
+  uploadId: string;
+  fileHash: string;
+  filename: string;
+  fileSize: number;
+  completedParts: number[];
+  project: string;
+  package: string;
+  tag?: string;
+  createdAt: number;
+}
+
+function getUploadStateKey(project: string, pkg: string, fileHash: string): string {
+  return `${UPLOAD_STATE_PREFIX}${project}_${pkg}_${fileHash}`;
+}
+
+function saveUploadState(state: StoredUploadState): void {
+  try {
+    const key = getUploadStateKey(state.project, state.package, state.fileHash);
+    localStorage.setItem(key, JSON.stringify(state));
+  } catch {
+    // localStorage might be full or unavailable
+  }
+}
+
+function loadUploadState(project: string, pkg: string, fileHash: string): StoredUploadState | null {
+  try {
+    const key = getUploadStateKey(project, pkg, fileHash);
+    const stored = localStorage.getItem(key);
+    if (!stored) return null;
+    const state = JSON.parse(stored) as StoredUploadState;
+    const oneDay = 24 * 60 * 60 * 1000;
+    if (Date.now() - state.createdAt > oneDay) {
+      localStorage.removeItem(key);
+      return null;
+    }
+    return state;
+  } catch {
+    return null;
+  }
+}
+
+function clearUploadState(project: string, pkg: string, fileHash: string): void {
+  try {
+    const key = getUploadStateKey(project, pkg, fileHash);
+    localStorage.removeItem(key);
+  } catch {
+    // ignore
+  }
+}
+
 // Types
-export type UploadStatus = 'pending' | 'uploading' | 'complete' | 'failed' | 'validating';
+export type UploadStatus = 'pending' | 'uploading' | 'complete' | 'failed' | 'validating' | 'paused';
 
 export interface UploadItem {
   id: string;
@@ -61,7 +116,6 @@ function formatTimeRemaining(seconds: number): string {
 }
 
 function getFileExtension(filename: string): string {
-  // Handle compound extensions like .tar.gz
   const parts = filename.toLowerCase().split('.');
   if (parts.length >= 3 && parts[parts.length - 2] === 'tar') {
     return `.${parts.slice(-2).join('.')}`;
@@ -69,6 +123,13 @@ function getFileExtension(filename: string): string {
   return parts.length > 1 ? `.${parts[parts.length - 1]}` : '';
 }
 
+async function computeSHA256(file: File): Promise<string> {
+  const buffer = await file.arrayBuffer();
+  const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+}
+
 // Icons
 function UploadIcon() {
   return (
@@ -125,6 +186,38 @@ function FileIcon() {
   );
 }
 
+function PauseIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <rect x="6" y="4" width="4" height="16" />
+      <rect x="14" y="4" width="4" height="16" />
+    </svg>
+  );
+}
+
+function WifiOffIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <line x1="1" y1="1" x2="23" y2="23" />
+      <path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55" />
+      <path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39" />
+      <path d="M10.71 5.05A16 16 0 0 1 22.58 9" />
+      <path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88" />
+      <path d="M8.53 16.11a6 6 0 0 1 6.95 0" />
+      <line x1="12" y1="20" x2="12.01" y2="20" />
+    </svg>
+  );
+}
+
+function SpinnerIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="spinner-icon">
+      <circle cx="12" cy="12" r="10" strokeOpacity="0.25" />
+      <path d="M12 2a10 10 0 0 1 10 10" />
+    </svg>
+  );
+}
+
 export function DragDropUpload({
   projectName,
   packageName,
@@ -140,9 +233,52 @@ export function DragDropUpload({
 }: DragDropUploadProps) {
   const [isDragOver, setIsDragOver] = useState(false);
   const [uploadQueue, setUploadQueue] = useState<UploadItem[]>([]);
+  const [isOnline, setIsOnline] = useState(navigator.onLine);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const dragCounterRef = useRef(0);
   const activeUploadsRef = useRef(0);
+  const xhrMapRef = useRef<Map<string, XMLHttpRequest>>(new Map());
+
+  // Online/Offline detection
+  useEffect(() => {
+    const handleOnline = () => {
+      setIsOnline(true);
+      // Resume paused uploads
+      setUploadQueue(prev => prev.map(item => 
+        item.status === 'paused' 
+          ? { ...item, status: 'pending' as UploadStatus, error: undefined }
+          : item
+      ));
+    };
+
+    const handleOffline = () => {
+      setIsOnline(false);
+      // Pause uploading items and cancel their XHR requests
+      setUploadQueue(prev => prev.map(item => {
+        if (item.status === 'uploading') {
+          // Abort the XHR request
+          const xhr = xhrMapRef.current.get(item.id);
+          if (xhr) {
+            xhr.abort();
+            xhrMapRef.current.delete(item.id);
+          }
+          return { ...item, status: 'paused' as UploadStatus, error: 'Network offline - will resume when connection is restored', progress: 0 };
+        }
+        if (item.status === 'pending') {
+          return { ...item, status: 'paused' as UploadStatus, error: 'Network offline - waiting for connection' };
+        }
+        return item;
+      }));
+    };
+
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
 
   // Validate a single file
   const validateFile = useCallback((file: File): string | null => {
@@ -185,10 +321,163 @@ export function DragDropUpload({
     setUploadQueue(prev => [...prev, ...newItems]);
   }, [validateFile]);
 
-  // Upload a single file with progress tracking
-  const uploadFile = useCallback((item: UploadItem): Promise<UploadResult> => {
+  const uploadFileChunked = useCallback(async (item: UploadItem): Promise<UploadResult> => {
+    setUploadQueue(prev => prev.map(u => 
+      u.id === item.id 
+        ? { ...u, status: 'validating' as UploadStatus, startTime: Date.now() }
+        : u
+    ));
+
+    const fileHash = await computeSHA256(item.file);
+    
+    const storedState = loadUploadState(projectName, packageName, fileHash);
+    let uploadId: string;
+    let completedParts: number[] = [];
+
+    if (storedState && storedState.fileSize === item.file.size && storedState.filename === item.file.name) {
+      try {
+        const statusResponse = await fetch(
+          `/api/v1/project/${projectName}/${packageName}/upload/${storedState.uploadId}/status`
+        );
+        if (statusResponse.ok) {
+          const statusData = await statusResponse.json();
+          uploadId = storedState.uploadId;
+          completedParts = statusData.uploaded_parts || [];
+        } else {
+          throw new Error('Stored upload no longer valid');
+        }
+      } catch {
+        clearUploadState(projectName, packageName, fileHash);
+        uploadId = await initNewUpload();
+      }
+    } else {
+      uploadId = await initNewUpload();
+    }
+
+    async function initNewUpload(): Promise<string> {
+      const initResponse = await fetch(
+        `/api/v1/project/${projectName}/${packageName}/upload/init`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            expected_hash: fileHash,
+            filename: item.file.name,
+            size: item.file.size,
+            tag: tag || undefined,
+          }),
+        }
+      );
+
+      if (!initResponse.ok) {
+        const error = await initResponse.json().catch(() => ({}));
+        throw new Error(error.detail || `Init failed: ${initResponse.status}`);
+      }
+
+      const initData = await initResponse.json();
+
+      if (initData.already_exists) {
+        throw { deduplicated: true, artifact_id: initData.artifact_id };
+      }
+
+      saveUploadState({
+        uploadId: initData.upload_id,
+        fileHash,
+        filename: item.file.name,
+        fileSize: item.file.size,
+        completedParts: [],
+        project: projectName,
+        package: packageName,
+        tag: tag || undefined,
+        createdAt: Date.now(),
+      });
+
+      return initData.upload_id;
+    }
+
+    const totalChunks = Math.ceil(item.file.size / CHUNK_SIZE);
+    let uploadedBytes = completedParts.length * CHUNK_SIZE;
+    if (uploadedBytes > item.file.size) uploadedBytes = item.file.size - (item.file.size % CHUNK_SIZE);
+    const startTime = Date.now();
+
+    for (let partNumber = 1; partNumber <= totalChunks; partNumber++) {
+      if (completedParts.includes(partNumber)) {
+        continue;
+      }
+
+      if (!isOnline) {
+        throw new Error('Network offline');
+      }
+
+      const start = (partNumber - 1) * CHUNK_SIZE;
+      const end = Math.min(start + CHUNK_SIZE, item.file.size);
+      const chunk = item.file.slice(start, end);
+
+      const partResponse = await fetch(
+        `/api/v1/project/${projectName}/${packageName}/upload/${uploadId}/part/${partNumber}`,
+        {
+          method: 'PUT',
+          body: chunk,
+        }
+      );
+
+      if (!partResponse.ok) {
+        throw new Error(`Part ${partNumber} upload failed: ${partResponse.status}`);
+      }
+
+      completedParts.push(partNumber);
+      saveUploadState({
+        uploadId,
+        fileHash,
+        filename: item.file.name,
+        fileSize: item.file.size,
+        completedParts,
+        project: projectName,
+        package: packageName,
+        tag: tag || undefined,
+        createdAt: Date.now(),
+      });
+
+      uploadedBytes += chunk.size;
+      const elapsed = (Date.now() - startTime) / 1000;
+      const speed = elapsed > 0 ? uploadedBytes / elapsed : 0;
+      const progress = Math.round((uploadedBytes / item.file.size) * 100);
+
+      setUploadQueue(prev => prev.map(u => 
+        u.id === item.id 
+          ? { ...u, progress, speed, status: 'uploading' as UploadStatus }
+          : u
+      ));
+    }
+
+    const completeResponse = await fetch(
+      `/api/v1/project/${projectName}/${packageName}/upload/${uploadId}/complete`,
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ tag: tag || undefined }),
+      }
+    );
+
+    if (!completeResponse.ok) {
+      throw new Error(`Complete failed: ${completeResponse.status}`);
+    }
+
+    clearUploadState(projectName, packageName, fileHash);
+
+    const completeData = await completeResponse.json();
+    return {
+      artifact_id: completeData.artifact_id,
+      size: completeData.size,
+      deduplicated: false,
+    };
+  }, [projectName, packageName, tag, isOnline]);
+
+  const uploadFileSimple = useCallback((item: UploadItem): Promise<UploadResult> => {
     return new Promise((resolve, reject) => {
       const xhr = new XMLHttpRequest();
+      xhrMapRef.current.set(item.id, xhr);
+      
       const formData = new FormData();
       formData.append('file', item.file);
       if (tag) {
@@ -219,6 +508,7 @@ export function DragDropUpload({
       });
 
       xhr.addEventListener('load', () => {
+        xhrMapRef.current.delete(item.id);
         if (xhr.status >= 200 && xhr.status < 300) {
           try {
             const result = JSON.parse(xhr.responseText) as UploadResult;
@@ -237,18 +527,24 @@ export function DragDropUpload({
       });
 
       xhr.addEventListener('error', () => {
+        xhrMapRef.current.delete(item.id);
         reject(new Error('Network error - check your connection'));
       });
 
       xhr.addEventListener('timeout', () => {
+        xhrMapRef.current.delete(item.id);
         reject(new Error('Upload timed out'));
       });
 
+      xhr.addEventListener('abort', () => {
+        xhrMapRef.current.delete(item.id);
+        reject(new Error('Upload cancelled'));
+      });
+
       xhr.open('POST', `/api/v1/project/${projectName}/${packageName}/upload`);
-      xhr.timeout = 300000; // 5 minute timeout
+      xhr.timeout = 300000;
       xhr.send(formData);
 
-      // Store xhr for potential cancellation
       setUploadQueue(prev => prev.map(u => 
         u.id === item.id 
           ? { ...u, status: 'uploading' as UploadStatus, startTime: Date.now() }
@@ -257,8 +553,16 @@ export function DragDropUpload({
     });
   }, [projectName, packageName, tag]);
 
-  // Process upload queue
+  const uploadFile = useCallback((item: UploadItem): Promise<UploadResult> => {
+    if (item.file.size >= CHUNKED_UPLOAD_THRESHOLD) {
+      return uploadFileChunked(item);
+    }
+    return uploadFileSimple(item);
+  }, [uploadFileChunked, uploadFileSimple]);
+
   const processQueue = useCallback(async () => {
+    if (!isOnline) return;
+    
     const pendingItems = uploadQueue.filter(item => item.status === 'pending');
     
     for (const item of pendingItems) {
@@ -281,43 +585,49 @@ export function DragDropUpload({
             ? { ...u, status: 'complete' as UploadStatus, progress: 100, artifactId: result.artifact_id }
             : u
         ));
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : 'Upload failed';
-        const shouldRetry = item.retryCount < maxRetries && 
-          (errorMessage.includes('Network') || errorMessage.includes('timeout'));
-
-        if (shouldRetry) {
-          // Exponential backoff retry
-          const delay = Math.pow(2, item.retryCount) * 1000;
-          setTimeout(() => {
-            setUploadQueue(prev => prev.map(u => 
-              u.id === item.id 
-                ? { ...u, status: 'pending' as UploadStatus, retryCount: u.retryCount + 1, progress: 0 }
-                : u
-            ));
-          }, delay);
-        } else {
+      } catch (err: unknown) {
+        const dedupErr = err as { deduplicated?: boolean; artifact_id?: string };
+        if (dedupErr.deduplicated && dedupErr.artifact_id) {
           setUploadQueue(prev => prev.map(u => 
             u.id === item.id 
-              ? { ...u, status: 'failed' as UploadStatus, error: errorMessage }
+              ? { ...u, status: 'complete' as UploadStatus, progress: 100, artifactId: dedupErr.artifact_id }
               : u
           ));
-          onUploadError?.(errorMessage);
+        } else {
+          const errorMessage = err instanceof Error ? err.message : 'Upload failed';
+          const shouldRetry = item.retryCount < maxRetries && 
+            (errorMessage.includes('Network') || errorMessage.includes('timeout'));
+
+          if (shouldRetry) {
+            const delay = Math.pow(2, item.retryCount) * 1000;
+            setTimeout(() => {
+              setUploadQueue(prev => prev.map(u => 
+                u.id === item.id 
+                  ? { ...u, status: 'pending' as UploadStatus, retryCount: u.retryCount + 1, progress: 0 }
+                  : u
+              ));
+            }, delay);
+          } else {
+            setUploadQueue(prev => prev.map(u => 
+              u.id === item.id 
+                ? { ...u, status: 'failed' as UploadStatus, error: errorMessage }
+                : u
+            ));
+            onUploadError?.(errorMessage);
+          }
         }
       } finally {
         activeUploadsRef.current--;
       }
     }
-  }, [uploadQueue, maxConcurrentUploads, maxRetries, uploadFile, onUploadError]);
+  }, [uploadQueue, maxConcurrentUploads, maxRetries, uploadFile, onUploadError, isOnline]);
 
-  // Process queue when items are added or status changes
   useEffect(() => {
     const hasPending = uploadQueue.some(item => item.status === 'pending');
-    if (hasPending && activeUploadsRef.current < maxConcurrentUploads) {
+    if (hasPending && activeUploadsRef.current < maxConcurrentUploads && isOnline) {
       processQueue();
     }
 
-    // Notify when all uploads complete
     const allComplete = uploadQueue.length > 0 && 
       uploadQueue.every(item => item.status === 'complete' || item.status === 'failed');
     
@@ -333,7 +643,7 @@ export function DragDropUpload({
         onUploadComplete?.(completedResults);
       }
     }
-  }, [uploadQueue, maxConcurrentUploads, processQueue, onUploadComplete]);
+  }, [uploadQueue, maxConcurrentUploads, processQueue, onUploadComplete, isOnline]);
 
   // Drag event handlers
   const handleDragEnter = useCallback((e: React.DragEvent) => {
@@ -416,10 +726,17 @@ export function DragDropUpload({
   const completedCount = uploadQueue.filter(item => item.status === 'complete').length;
   const failedCount = uploadQueue.filter(item => item.status === 'failed').length;
   const uploadingCount = uploadQueue.filter(item => item.status === 'uploading').length;
+  const pausedCount = uploadQueue.filter(item => item.status === 'paused').length;
 
   return (
     <div className={`drag-drop-upload ${className}`}>
-      {/* Drop Zone */}
+      {!isOnline && (
+        <div className="offline-banner">
+          <WifiOffIcon />
+          <span>You're offline. Uploads will resume when connection is restored.</span>
+        </div>
+      )}
+
       <div
         className={`drop-zone ${isDragOver ? 'drop-zone--active' : ''}`}
         onDragEnter={handleDragEnter}
@@ -456,9 +773,11 @@ export function DragDropUpload({
         <div className="upload-queue">
           <div className="upload-queue__header">
             <span className="upload-queue__title">
-              {uploadingCount > 0 
-                ? `Uploading ${uploadingCount} of ${uploadQueue.length} files`
-                : `${completedCount} of ${uploadQueue.length} files uploaded`
+              {pausedCount > 0 && !isOnline
+                ? `${pausedCount} uploads paused (offline)`
+                : uploadingCount > 0 
+                  ? `Uploading ${uploadingCount} of ${uploadQueue.length} files`
+                  : `${completedCount} of ${uploadQueue.length} files uploaded`
               }
               {failedCount > 0 && ` (${failedCount} failed)`}
             </span>
@@ -493,6 +812,8 @@ export function DragDropUpload({
                 <div className="upload-item__icon">
                   {item.status === 'complete' ? <CheckIcon /> : 
                    item.status === 'failed' ? <ErrorIcon /> : 
+                   item.status === 'paused' ? <PauseIcon /> :
+                   item.status === 'validating' ? <SpinnerIcon /> :
                    <FileIcon />}
                 </div>
                 
@@ -525,6 +846,9 @@ export function DragDropUpload({
                     {item.retryCount > 0 && item.status === 'uploading' && (
                       <span className="upload-item__retry-count">Retry {item.retryCount}</span>
                     )}
+                    {item.status === 'validating' && (
+                      <span className="upload-item__validating">Computing hash...</span>
+                    )}
                   </div>
                   
                   {item.status === 'uploading' && (
@@ -538,7 +862,7 @@ export function DragDropUpload({
                 </div>
 
                 <div className="upload-item__actions">
-                  {item.status === 'failed' && (
+                  {(item.status === 'failed' || (item.status === 'paused' && isOnline)) && (
                     <button 
                       className="upload-item__btn upload-item__btn--retry"
                       onClick={() => retryItem(item.id)}
@@ -548,7 +872,7 @@ export function DragDropUpload({
                       <RetryIcon />
                     </button>
                   )}
-                  {(item.status === 'complete' || item.status === 'failed' || item.status === 'pending') && (
+                  {(item.status === 'complete' || item.status === 'failed' || item.status === 'pending' || item.status === 'paused') && (
                     <button 
                       className="upload-item__btn upload-item__btn--remove"
                       onClick={() => removeItem(item.id)}
diff --git a/frontend/src/pages/PackagePage.css b/frontend/src/pages/PackagePage.css
index b7e4782..e4edb78 100644
--- a/frontend/src/pages/PackagePage.css
+++ b/frontend/src/pages/PackagePage.css
@@ -127,6 +127,58 @@ h2 {
   font-size: 0.75rem;
 }
 
+/* Download by Artifact ID Section */
+.download-by-id-section {
+  margin-top: 32px;
+  background: var(--bg-secondary);
+}
+
+.download-by-id-section h3 {
+  margin-bottom: 12px;
+  color: var(--text-primary);
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.download-by-id-form {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.artifact-id-input {
+  flex: 1;
+  padding: 10px 16px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 0.8125rem;
+  color: var(--text-primary);
+}
+
+.artifact-id-input::placeholder {
+  color: var(--text-muted);
+}
+
+.artifact-id-input:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+}
+
+.btn-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.validation-hint {
+  margin-top: 8px;
+  margin-bottom: 0;
+  font-size: 0.75rem;
+  color: var(--warning-color, #f59e0b);
+}
+
 /* Usage Section */
 .usage-section {
   margin-top: 32px;
diff --git a/frontend/src/pages/PackagePage.tsx b/frontend/src/pages/PackagePage.tsx
index 1997aa5..a2e41b3 100644
--- a/frontend/src/pages/PackagePage.tsx
+++ b/frontend/src/pages/PackagePage.tsx
@@ -64,6 +64,7 @@ function PackagePage() {
   const [error, setError] = useState<string | null>(null);
   const [uploadTag, setUploadTag] = useState('');
   const [uploadSuccess, setUploadSuccess] = useState<string | null>(null);
+  const [artifactIdInput, setArtifactIdInput] = useState('');
 
   // Get params from URL
   const page = parseInt(searchParams.get('page') || '1', 10);
@@ -358,6 +359,34 @@ function PackagePage() {
         />
       )}
 
+      <div className="download-by-id-section card">
+        <h3>Download by Artifact ID</h3>
+        <div className="download-by-id-form">
+          <input
+            type="text"
+            value={artifactIdInput}
+            onChange={(e) => setArtifactIdInput(e.target.value)}
+            placeholder="Enter SHA256 artifact ID (64 hex characters)"
+            className="artifact-id-input"
+          />
+          <a
+            href={artifactIdInput.length === 64 ? getDownloadUrl(projectName!, packageName!, `artifact:${artifactIdInput}`) : '#'}
+            className={`btn btn-primary ${artifactIdInput.length !== 64 ? 'btn-disabled' : ''}`}
+            download
+            onClick={(e) => {
+              if (artifactIdInput.length !== 64) {
+                e.preventDefault();
+              }
+            }}
+          >
+            Download
+          </a>
+        </div>
+        {artifactIdInput.length > 0 && artifactIdInput.length !== 64 && (
+          <p className="validation-hint">Artifact ID must be exactly 64 hex characters</p>
+        )}
+      </div>
+
       <div className="usage-section card">
         <h3>Usage</h3>
         <p>Download artifacts using:</p>
diff --git a/frontend/src/test/setup.ts b/frontend/src/test/setup.ts
index a1e2857..9ca9a21 100644
--- a/frontend/src/test/setup.ts
+++ b/frontend/src/test/setup.ts
@@ -18,7 +18,7 @@ class MockDataTransfer implements DataTransfer {
   setDragImage(): void {}
 }
 
-Object.defineProperty(global, 'DataTransfer', {
+Object.defineProperty(globalThis, 'DataTransfer', {
   value: MockDataTransfer,
 });