Add drag-and-drop upload component with chunked uploads and offline support

frontend/package.json

@@ -6,18 +6,33 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.3"
+    "react-router-dom": "6.28.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.2.1",
+    "jsdom": "^24.0.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.12"
+    "vite": "^5.0.12",
+    "vitest": "^1.3.1"
+  },
+  "overrides": {
+    "ws": "8.18.0",
+    "ufo": "1.5.4",
+    "rollup": "4.52.4",
+    "caniuse-lite": "1.0.30001692",
+    "baseline-browser-mapping": "2.9.5"
   }
 }

frontend/src/components/DragDropUpload.css

@@ -0,0 +1,321 @@
+.drag-drop-upload {
+  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);
+  border-radius: 8px;
+  padding: 2rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: var(--bg-secondary, #f9f9f9);
+}
+
+.drop-zone:hover {
+  border-color: var(--accent-color, #007bff);
+  background: var(--bg-hover, #f0f7ff);
+}
+
+.drop-zone--active {
+  border-color: var(--accent-color, #007bff);
+  background: var(--bg-active, #e6f0ff);
+  border-style: solid;
+}
+
+.drop-zone__input {
+  display: none;
+}
+
+.drop-zone__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--text-secondary, #666);
+}
+
+.drop-zone__content svg {
+  opacity: 0.5;
+}
+
+.drop-zone--active .drop-zone__content svg {
+  opacity: 1;
+  color: var(--accent-color, #007bff);
+}
+
+.drop-zone__text {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.drop-zone__text strong {
+  color: var(--text-primary, #333);
+}
+
+.drop-zone__hint {
+  margin: 0;
+  font-size: 0.8rem;
+  opacity: 0.7;
+}
+
+/* Upload Queue */
+.upload-queue {
+  margin-top: 1rem;
+  border: 1px solid var(--border-color, #ddd);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.upload-queue__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: var(--bg-secondary, #f9f9f9);
+  border-bottom: 1px solid var(--border-color, #ddd);
+}
+
+.upload-queue__title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary, #333);
+}
+
+.upload-queue__clear {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  border: none;
+  background: none;
+  color: var(--accent-color, #007bff);
+  cursor: pointer;
+}
+
+.upload-queue__clear:hover {
+  text-decoration: underline;
+}
+
+.upload-queue__overall {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  background: var(--bg-secondary, #f9f9f9);
+  border-bottom: 1px solid var(--border-color, #ddd);
+}
+
+.upload-queue__overall .progress-bar {
+  flex: 1;
+}
+
+.upload-queue__overall .progress-bar__text {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-secondary, #666);
+  min-width: 3rem;
+  text-align: right;
+}
+
+.upload-queue__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+/* Upload Item */
+.upload-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color-light, #eee);
+}
+
+.upload-item:last-child {
+  border-bottom: none;
+}
+
+.upload-item__icon {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary, #666);
+}
+
+.upload-item--complete .upload-item__icon {
+  color: var(--success-color, #28a745);
+}
+
+.upload-item--failed .upload-item__icon {
+  color: var(--error-color, #dc3545);
+}
+
+.upload-item--uploading .upload-item__icon {
+  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;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.upload-item__name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary, #333);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.upload-item__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary, #666);
+}
+
+.upload-item__size {
+  color: var(--text-secondary, #666);
+}
+
+.upload-item__speed,
+.upload-item__eta {
+  color: var(--accent-color, #007bff);
+}
+
+.upload-item__artifact {
+  color: var(--success-color, #28a745);
+  font-family: monospace;
+}
+
+.upload-item__error {
+  color: var(--error-color, #dc3545);
+}
+
+.upload-item__retry-count {
+  color: var(--warning-color, #ffc107);
+}
+
+.upload-item__validating {
+  color: var(--accent-color, #007bff);
+  font-style: italic;
+}
+
+.upload-item__actions {
+  display: flex;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+.upload-item__btn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary, #666);
+  transition: all 0.15s ease;
+}
+
+.upload-item__btn:hover {
+  background: var(--bg-hover, #f0f0f0);
+}
+
+.upload-item__btn--retry:hover {
+  color: var(--accent-color, #007bff);
+}
+
+.upload-item__btn--remove:hover {
+  color: var(--error-color, #dc3545);
+}
+
+/* Progress Bar */
+.progress-bar {
+  height: 8px;
+  background: var(--border-color, #ddd);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-bar--small {
+  height: 4px;
+  margin-top: 0.25rem;
+}
+
+.progress-bar__fill {
+  height: 100%;
+  background: var(--accent-color, #007bff);
+  border-radius: 4px;
+  transition: width 0.2s ease;
+}
+
+.upload-item--complete .progress-bar__fill {
+  background: var(--success-color, #28a745);
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+  .drop-zone {
+    padding: 1.5rem 1rem;
+  }
+
+  .upload-item__meta {
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .upload-item__speed,
+  .upload-item__eta {
+    display: none;
+  }
+}

frontend/src/components/DragDropUpload.test.tsx

@@ -0,0 +1,545 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DragDropUpload } from './DragDropUpload';
+
+function createMockFile(name: string, size: number, type: string): File {
+  const content = new Array(size).fill('a').join('');
+  return new File([content], name, { type });
+}
+
+function createMockXHR(options: {
+  status?: number;
+  response?: object;
+  progressEvents?: { loaded: number; total: number }[];
+  shouldError?: boolean;
+  shouldTimeout?: boolean;
+} = {}) {
+  const {
+    status = 200,
+    response = { artifact_id: 'abc123', size: 100 },
+    progressEvents = [],
+    shouldError = false,
+    shouldTimeout = false,
+  } = options;
+
+  return class MockXHR {
+    status = status;
+    responseText = JSON.stringify(response);
+    timeout = 0;
+    upload = {
+      addEventListener: vi.fn((event: string, handler: (e: ProgressEvent) => void) => {
+        if (event === 'progress') {
+          progressEvents.forEach((p, i) => {
+            setTimeout(() => {
+              handler({ lengthComputable: true, loaded: p.loaded, total: p.total } as ProgressEvent);
+            }, i * 10);
+          });
+        }
+      }),
+    };
+    addEventListener = vi.fn((event: string, handler: () => void) => {
+      if (event === 'load' && !shouldError && !shouldTimeout) {
+        setTimeout(handler, progressEvents.length * 10 + 10);
+      }
+      if (event === 'error' && shouldError) {
+        setTimeout(handler, 10);
+      }
+      if (event === 'timeout' && shouldTimeout) {
+        setTimeout(handler, 10);
+      }
+    });
+    open = vi.fn();
+    send = vi.fn();
+  };
+}
+
+describe('DragDropUpload', () => {
+  const defaultProps = {
+    projectName: 'test-project',
+    packageName: 'test-package',
+  };
+
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders drop zone with instructional text', () => {
+      render(<DragDropUpload {...defaultProps} />);
+      
+      expect(screen.getByText(/drag files here/i)).toBeInTheDocument();
+      expect(screen.getByText(/click to browse/i)).toBeInTheDocument();
+    });
+
+    it('renders hidden file input', () => {
+      render(<DragDropUpload {...defaultProps} />);
+      
+      const input = document.querySelector('input[type="file"]');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveClass('drop-zone__input');
+    });
+
+    it('shows max file size hint when provided', () => {
+      render(<DragDropUpload {...defaultProps} maxFileSize={1024 * 1024} />);
+      
+      expect(screen.getByText(/max file size: 1 mb/i)).toBeInTheDocument();
+    });
+
+    it('shows allowed types hint when provided', () => {
+      render(<DragDropUpload {...defaultProps} allowedTypes={['.zip', '.tar.gz']} allowAllTypes={false} />);
+      
+      expect(screen.getByText(/\.zip, \.tar\.gz/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Click to Browse', () => {
+    it('opens file picker when drop zone is clicked', async () => {
+      render(<DragDropUpload {...defaultProps} />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const clickSpy = vi.spyOn(input, 'click');
+      
+      const dropZone = screen.getByRole('button');
+      await userEvent.click(dropZone);
+      
+      expect(clickSpy).toHaveBeenCalled();
+    });
+
+    it('opens file picker on Enter key', () => {
+      render(<DragDropUpload {...defaultProps} />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const clickSpy = vi.spyOn(input, 'click');
+      
+      const dropZone = screen.getByRole('button');
+      fireEvent.keyDown(dropZone, { key: 'Enter' });
+      
+      expect(clickSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Drag and Drop Events', () => {
+    it('shows visual feedback on drag over', () => {
+      render(<DragDropUpload {...defaultProps} />);
+      
+      const dropZone = screen.getByRole('button');
+      
+      fireEvent.dragEnter(dropZone, {
+        dataTransfer: { items: [{}] },
+      });
+      
+      expect(dropZone).toHaveClass('drop-zone--active');
+    });
+
+    it('removes visual feedback on drag leave', () => {
+      render(<DragDropUpload {...defaultProps} />);
+      
+      const dropZone = screen.getByRole('button');
+      
+      fireEvent.dragEnter(dropZone, { dataTransfer: { items: [{}] } });
+      expect(dropZone).toHaveClass('drop-zone--active');
+      
+      fireEvent.dragLeave(dropZone);
+      expect(dropZone).not.toHaveClass('drop-zone--active');
+    });
+
+    it('accepts dropped files', async () => {
+      const MockXHR = createMockXHR();
+      vi.stubGlobal('XMLHttpRequest', MockXHR);
+      
+      render(<DragDropUpload {...defaultProps} />);
+      
+      const dropZone = screen.getByRole('button');
+      const file = createMockFile('test.txt', 100, 'text/plain');
+      
+      const dataTransfer = new DataTransfer();
+      Object.defineProperty(dataTransfer, 'files', {
+        value: Object.assign([file], { item: (i: number) => [file][i] }),
+      });
+      
+      fireEvent.drop(dropZone, { dataTransfer });
+      
+      await waitFor(() => {
+        expect(screen.getByText('test.txt')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('File Validation', () => {
+    it('rejects files exceeding max size', async () => {
+      render(<DragDropUpload {...defaultProps} maxFileSize={100} />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const file = createMockFile('large.txt', 200, 'text/plain');
+      
+      Object.defineProperty(input, 'files', {
+        value: Object.assign([file], { item: (i: number) => [file][i] }),
+      });
+      
+      fireEvent.change(input);
+      
+      await waitFor(() => {
+        expect(screen.getByText(/exceeds.*limit/i)).toBeInTheDocument();
+      });
+    });
+
+    it('rejects files with invalid type when allowAllTypes is false', async () => {
+      render(<DragDropUpload {...defaultProps} allowedTypes={['.zip']} allowAllTypes={false} />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const file = createMockFile('test.txt', 100, 'text/plain');
+      
+      Object.defineProperty(input, 'files', {
+        value: Object.assign([file], { item: (i: number) => [file][i] }),
+      });
+      
+      fireEvent.change(input);
+      
+      await waitFor(() => {
+        expect(screen.getByText(/not allowed/i)).toBeInTheDocument();
+      });
+    });
+
+    it('rejects empty files', async () => {
+      render(<DragDropUpload {...defaultProps} />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const file = createMockFile('empty.txt', 0, 'text/plain');
+      
+      Object.defineProperty(input, 'files', {
+        value: Object.assign([file], { item: (i: number) => [file][i] }),
+      });
+      
+      fireEvent.change(input);
+      
+      await waitFor(() => {
+        expect(screen.getByText(/empty file/i)).toBeInTheDocument();
+      });
+    });
+
+    it('accepts valid files when allowAllTypes is true', async () => {
+      const MockXHR = createMockXHR();
+      vi.stubGlobal('XMLHttpRequest', MockXHR);
+      
+      render(<DragDropUpload {...defaultProps} allowAllTypes={true} />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const file = createMockFile('test.txt', 100, 'text/plain');
+      
+      Object.defineProperty(input, 'files', {
+        value: Object.assign([file], { item: (i: number) => [file][i] }),
+      });
+      
+      fireEvent.change(input);
+      
+      await waitFor(() => {
+        expect(screen.getByText('test.txt')).toBeInTheDocument();
+        expect(screen.queryByText(/not allowed/i)).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Upload Queue', () => {
+    it('shows file in queue after selection', async () => {
+      const MockXHR = createMockXHR();
+      vi.stubGlobal('XMLHttpRequest', MockXHR);
+      
+      render(<DragDropUpload {...defaultProps} />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const file = createMockFile('document.pdf', 1024, 'application/pdf');
+      
+      Object.defineProperty(input, 'files', {
+        value: Object.assign([file], { item: (i: number) => [file][i] }),
+      });
+      
+      fireEvent.change(input);
+      
+      await waitFor(() => {
+        expect(screen.getByText('document.pdf')).toBeInTheDocument();
+        expect(screen.getByText('1 KB')).toBeInTheDocument();
+      });
+    });
+
+    it('handles multiple files', async () => {
+      const MockXHR = createMockXHR();
+      vi.stubGlobal('XMLHttpRequest', MockXHR);
+      
+      render(<DragDropUpload {...defaultProps} />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const files = [
+        createMockFile('file1.txt', 100, 'text/plain'),
+        createMockFile('file2.txt', 200, 'text/plain'),
+        createMockFile('file3.txt', 300, 'text/plain'),
+      ];
+      
+      Object.defineProperty(input, 'files', {
+        value: Object.assign(files, { item: (i: number) => files[i] }),
+      });
+      
+      fireEvent.change(input);
+      
+      await waitFor(() => {
+        expect(screen.getByText('file1.txt')).toBeInTheDocument();
+        expect(screen.getByText('file2.txt')).toBeInTheDocument();
+        expect(screen.getByText('file3.txt')).toBeInTheDocument();
+      });
+    });
+
+    it('shows overall progress for multiple files', async () => {
+      const MockXHR = createMockXHR();
+      vi.stubGlobal('XMLHttpRequest', MockXHR);
+      
+      render(<DragDropUpload {...defaultProps} />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const files = [
+        createMockFile('file1.txt', 100, 'text/plain'),
+        createMockFile('file2.txt', 100, 'text/plain'),
+      ];
+      
+      Object.defineProperty(input, 'files', {
+        value: Object.assign(files, { item: (i: number) => files[i] }),
+      });
+      
+      fireEvent.change(input);
+      
+      await waitFor(() => {
+        expect(screen.getByText(/uploading.*of.*files/i)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Upload Progress', () => {
+    it('shows progress bar during upload', async () => {
+      const MockXHR = createMockXHR({
+        progressEvents: [
+          { loaded: 50, total: 100 },
+        ],
+      });
+      vi.stubGlobal('XMLHttpRequest', MockXHR);
+      
+      render(<DragDropUpload {...defaultProps} />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const file = createMockFile('test.txt', 100, 'text/plain');
+      
+      Object.defineProperty(input, 'files', {
+        value: Object.assign([file], { item: (i: number) => [file][i] }),
+      });
+      
+      fireEvent.change(input);
+      
+      await waitFor(() => {
+        const progressBar = document.querySelector('.progress-bar__fill');
+        expect(progressBar).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Upload Completion', () => {
+    it('shows success state when upload completes', async () => {
+      const MockXHR = createMockXHR({
+        response: { artifact_id: 'abc123def456', size: 100 },
+      });
+      vi.stubGlobal('XMLHttpRequest', MockXHR);
+      
+      const onComplete = vi.fn();
+      render(<DragDropUpload {...defaultProps} onUploadComplete={onComplete} />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const file = createMockFile('test.txt', 100, 'text/plain');
+      
+      Object.defineProperty(input, 'files', {
+        value: Object.assign([file], { item: (i: number) => [file][i] }),
+      });
+      
+      fireEvent.change(input);
+      
+      await vi.advanceTimersByTimeAsync(100);
+      
+      await waitFor(() => {
+        expect(screen.getByText(/abc123def456/i)).toBeInTheDocument();
+      });
+    });
+
+    it('calls onUploadComplete callback with results', async () => {
+      const MockXHR = createMockXHR({
+        response: { artifact_id: 'test-artifact-id', size: 100 },
+      });
+      vi.stubGlobal('XMLHttpRequest', MockXHR);
+      
+      const onComplete = vi.fn();
+      render(<DragDropUpload {...defaultProps} onUploadComplete={onComplete} />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const file = createMockFile('test.txt', 100, 'text/plain');
+      
+      Object.defineProperty(input, 'files', {
+        value: Object.assign([file], { item: (i: number) => [file][i] }),
+      });
+      
+      fireEvent.change(input);
+      
+      await vi.advanceTimersByTimeAsync(100);
+      
+      await waitFor(() => {
+        expect(onComplete).toHaveBeenCalledWith([
+          expect.objectContaining({ artifact_id: 'test-artifact-id' }),
+        ]);
+      });
+    });
+  });
+
+  describe('Upload Errors', () => {
+    it('shows error state when upload fails after retries exhausted', async () => {
+      const MockXHR = createMockXHR({
+        status: 500,
+        response: { detail: 'Server error' },
+        shouldError: true,
+      });
+      vi.stubGlobal('XMLHttpRequest', MockXHR);
+      
+      render(<DragDropUpload {...defaultProps} maxRetries={0} />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const file = createMockFile('test.txt', 100, 'text/plain');
+      
+      Object.defineProperty(input, 'files', {
+        value: Object.assign([file], { item: (i: number) => [file][i] }),
+      });
+      
+      fireEvent.change(input);
+      
+      await vi.advanceTimersByTimeAsync(100);
+      
+      await waitFor(() => {
+        expect(screen.getByText(/network error/i)).toBeInTheDocument();
+      });
+    });
+
+    it('calls onUploadError callback when retries exhausted', async () => {
+      const MockXHR = createMockXHR({ shouldError: true });
+      vi.stubGlobal('XMLHttpRequest', MockXHR);
+      
+      const onError = vi.fn();
+      render(<DragDropUpload {...defaultProps} maxRetries={0} onUploadError={onError} />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const file = createMockFile('test.txt', 100, 'text/plain');
+      
+      Object.defineProperty(input, 'files', {
+        value: Object.assign([file], { item: (i: number) => [file][i] }),
+      });
+      
+      fireEvent.change(input);
+      
+      await vi.advanceTimersByTimeAsync(100);
+      
+      await waitFor(() => {
+        expect(onError).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Queue Actions', () => {
+    it('removes item from queue when remove button clicked', async () => {
+      const MockXHR = createMockXHR();
+      vi.stubGlobal('XMLHttpRequest', MockXHR);
+      
+      render(<DragDropUpload {...defaultProps} />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const file = createMockFile('test.txt', 100, 'text/plain');
+      
+      Object.defineProperty(input, 'files', {
+        value: Object.assign([file], { item: (i: number) => [file][i] }),
+      });
+      
+      fireEvent.change(input);
+      
+      await vi.advanceTimersByTimeAsync(100);
+      
+      await waitFor(() => {
+        expect(screen.getByText('test.txt')).toBeInTheDocument();
+      });
+      
+      const removeButton = screen.getByTitle('Remove');
+      fireEvent.click(removeButton);
+      
+      await waitFor(() => {
+        expect(screen.queryByText('test.txt')).not.toBeInTheDocument();
+      });
+    });
+
+    it('clears completed items when clear button clicked', async () => {
+      const MockXHR = createMockXHR();
+      vi.stubGlobal('XMLHttpRequest', MockXHR);
+      
+      render(<DragDropUpload {...defaultProps} />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const file = createMockFile('test.txt', 100, 'text/plain');
+      
+      Object.defineProperty(input, 'files', {
+        value: Object.assign([file], { item: (i: number) => [file][i] }),
+      });
+      
+      fireEvent.change(input);
+      
+      await vi.advanceTimersByTimeAsync(100);
+      
+      await waitFor(() => {
+        const clearButton = screen.queryByText(/clear finished/i);
+        if (clearButton) {
+          fireEvent.click(clearButton);
+        }
+      });
+    });
+  });
+
+  describe('Tag Support', () => {
+    it('includes tag in upload request', async () => {
+      let capturedFormData: FormData | null = null;
+      
+      class MockXHR {
+        status = 200;
+        responseText = JSON.stringify({ artifact_id: 'abc123', size: 100 });
+        timeout = 0;
+        upload = { addEventListener: vi.fn() };
+        addEventListener = vi.fn((event: string, handler: () => void) => {
+          if (event === 'load') setTimeout(handler, 10);
+        });
+        open = vi.fn();
+        send = vi.fn((data: FormData) => {
+          capturedFormData = data;
+        });
+      }
+      vi.stubGlobal('XMLHttpRequest', MockXHR);
+      
+      render(<DragDropUpload {...defaultProps} tag="v1.0.0" />);
+      
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const file = createMockFile('test.txt', 100, 'text/plain');
+      
+      Object.defineProperty(input, 'files', {
+        value: Object.assign([file], { item: (i: number) => [file][i] }),
+      });
+      
+      fireEvent.change(input);
+      
+      await vi.advanceTimersByTimeAsync(100);
+      
+      await waitFor(() => {
+        expect(capturedFormData?.get('tag')).toBe('v1.0.0');
+      });
+    });
+  });
+});

frontend/src/components/DragDropUpload.tsx

@@ -0,0 +1,893 @@
+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' | 'paused';
+
+export interface UploadItem {
+  id: string;
+  file: File;
+  status: UploadStatus;
+  progress: number;
+  speed: number; // bytes per second
+  error?: string;
+  artifactId?: string;
+  retryCount: number;
+  startTime?: number;
+}
+
+export interface UploadResult {
+  artifact_id: string;
+  size: number;
+  deduplicated?: boolean;
+}
+
+export interface DragDropUploadProps {
+  projectName: string;
+  packageName: string;
+  onUploadComplete?: (results: UploadResult[]) => void;
+  onUploadError?: (error: string) => void;
+  allowedTypes?: string[]; // e.g., ['.tar.gz', '.zip', '.deb']
+  allowAllTypes?: boolean;
+  maxFileSize?: number; // in bytes
+  maxConcurrentUploads?: number;
+  maxRetries?: number;
+  tag?: string;
+  className?: string;
+}
+
+// Utility functions
+function generateId(): string {
+  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+}
+
+function formatSpeed(bytesPerSecond: number): string {
+  return `${formatBytes(bytesPerSecond)}/s`;
+}
+
+function formatTimeRemaining(seconds: number): string {
+  if (!isFinite(seconds) || seconds < 0) return '--:--';
+  if (seconds < 60) return `${Math.round(seconds)}s`;
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${Math.round(seconds % 60)}s`;
+  return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m`;
+}
+
+function getFileExtension(filename: string): string {
+  const parts = filename.toLowerCase().split('.');
+  if (parts.length >= 3 && parts[parts.length - 2] === 'tar') {
+    return `.${parts.slice(-2).join('.')}`;
+  }
+  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 (
+    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="17 8 12 3 7 8" />
+      <line x1="12" y1="3" x2="12" y2="15" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+function ErrorIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="15" y1="9" x2="9" y2="15" />
+      <line x1="9" y1="9" x2="15" y2="15" />
+    </svg>
+  );
+}
+
+function RetryIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <polyline points="23 4 23 10 17 10" />
+      <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+    </svg>
+  );
+}
+
+function RemoveIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}
+
+function FileIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+    </svg>
+  );
+}
+
+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,
+  onUploadComplete,
+  onUploadError,
+  allowedTypes,
+  allowAllTypes = true,
+  maxFileSize,
+  maxConcurrentUploads = 3,
+  maxRetries = 3,
+  tag,
+  className = '',
+}: 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 => {
+    // Check file size
+    if (maxFileSize && file.size > maxFileSize) {
+      return `File exceeds ${formatBytes(maxFileSize)} limit`;
+    }
+
+    // Check file type if not allowing all types
+    if (!allowAllTypes && allowedTypes && allowedTypes.length > 0) {
+      const ext = getFileExtension(file.name);
+      if (!allowedTypes.some(t => t.toLowerCase() === ext)) {
+        return `File type ${ext || 'unknown'} not allowed. Accepted: ${allowedTypes.join(', ')}`;
+      }
+    }
+
+    // Check for empty file
+    if (file.size === 0) {
+      return 'Cannot upload empty file';
+    }
+
+    return null;
+  }, [allowedTypes, allowAllTypes, maxFileSize]);
+
+  // Add files to queue
+  const addFiles = useCallback((files: FileList | File[]) => {
+    const newItems: UploadItem[] = Array.from(files).map(file => {
+      const validationError = validateFile(file);
+      return {
+        id: generateId(),
+        file,
+        status: validationError ? 'failed' : 'pending',
+        progress: 0,
+        speed: 0,
+        error: validationError || undefined,
+        retryCount: 0,
+      };
+    });
+
+    setUploadQueue(prev => [...prev, ...newItems]);
+  }, [validateFile]);
+
+  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) {
+        formData.append('tag', tag);
+      }
+
+      let lastLoaded = 0;
+      let lastTime = Date.now();
+
+      xhr.upload.addEventListener('progress', (e) => {
+        if (e.lengthComputable) {
+          const now = Date.now();
+          const timeDiff = (now - lastTime) / 1000;
+          const loadedDiff = e.loaded - lastLoaded;
+          
+          const speed = timeDiff > 0 ? loadedDiff / timeDiff : 0;
+          const progress = Math.round((e.loaded / e.total) * 100);
+
+          setUploadQueue(prev => prev.map(u => 
+            u.id === item.id 
+              ? { ...u, progress, speed, status: 'uploading' as UploadStatus }
+              : u
+          ));
+
+          lastLoaded = e.loaded;
+          lastTime = now;
+        }
+      });
+
+      xhr.addEventListener('load', () => {
+        xhrMapRef.current.delete(item.id);
+        if (xhr.status >= 200 && xhr.status < 300) {
+          try {
+            const result = JSON.parse(xhr.responseText) as UploadResult;
+            resolve(result);
+          } catch {
+            reject(new Error('Invalid response from server'));
+          }
+        } else {
+          try {
+            const error = JSON.parse(xhr.responseText);
+            reject(new Error(error.detail || `Upload failed: ${xhr.status}`));
+          } catch {
+            reject(new Error(`Upload failed: ${xhr.status}`));
+          }
+        }
+      });
+
+      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;
+      xhr.send(formData);
+
+      setUploadQueue(prev => prev.map(u => 
+        u.id === item.id 
+          ? { ...u, status: 'uploading' as UploadStatus, startTime: Date.now() }
+          : u
+      ));
+    });
+  }, [projectName, packageName, tag]);
+
+  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) {
+      if (activeUploadsRef.current >= maxConcurrentUploads) {
+        break;
+      }
+
+      activeUploadsRef.current++;
+
+      // Start upload
+      setUploadQueue(prev => prev.map(u => 
+        u.id === item.id ? { ...u, status: 'uploading' as UploadStatus } : u
+      ));
+
+      try {
+        const result = await uploadFile(item);
+        
+        setUploadQueue(prev => prev.map(u => 
+          u.id === item.id 
+            ? { ...u, status: 'complete' as UploadStatus, progress: 100, artifactId: result.artifact_id }
+            : u
+        ));
+      } 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: 'complete' as UploadStatus, progress: 100, artifactId: dedupErr.artifact_id }
+              : u
+          ));
+        } 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, isOnline]);
+
+  useEffect(() => {
+    const hasPending = uploadQueue.some(item => item.status === 'pending');
+    if (hasPending && activeUploadsRef.current < maxConcurrentUploads && isOnline) {
+      processQueue();
+    }
+
+    const allComplete = uploadQueue.length > 0 && 
+      uploadQueue.every(item => item.status === 'complete' || item.status === 'failed');
+    
+    if (allComplete) {
+      const completedResults = uploadQueue
+        .filter(item => item.status === 'complete' && item.artifactId)
+        .map(item => ({
+          artifact_id: item.artifactId!,
+          size: item.file.size,
+        }));
+      
+      if (completedResults.length > 0) {
+        onUploadComplete?.(completedResults);
+      }
+    }
+  }, [uploadQueue, maxConcurrentUploads, processQueue, onUploadComplete, isOnline]);
+
+  // Drag event handlers
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+      setIsDragOver(true);
+    }
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) {
+      setIsDragOver(false);
+    }
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    dragCounterRef.current = 0;
+
+    const files = e.dataTransfer.files;
+    if (files && files.length > 0) {
+      addFiles(files);
+    }
+  }, [addFiles]);
+
+  // Click to browse
+  const handleClick = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
+  const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      addFiles(files);
+    }
+    // Reset input so same file can be selected again
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  }, [addFiles]);
+
+  // Remove item from queue
+  const removeItem = useCallback((id: string) => {
+    setUploadQueue(prev => prev.filter(item => item.id !== id));
+  }, []);
+
+  // Retry failed upload
+  const retryItem = useCallback((id: string) => {
+    setUploadQueue(prev => prev.map(item => 
+      item.id === id 
+        ? { ...item, status: 'pending' as UploadStatus, error: undefined, progress: 0, retryCount: 0 }
+        : item
+    ));
+  }, []);
+
+  // Clear completed/failed items
+  const clearCompleted = useCallback(() => {
+    setUploadQueue(prev => prev.filter(item => 
+      item.status !== 'complete' && item.status !== 'failed'
+    ));
+  }, []);
+
+  // Calculate overall progress
+  const overallProgress = uploadQueue.length > 0
+    ? Math.round(uploadQueue.reduce((sum, item) => sum + item.progress, 0) / uploadQueue.length)
+    : 0;
+
+  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}`}>
+      {!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}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+        onClick={handleClick}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => e.key === 'Enter' && handleClick()}
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          onChange={handleFileChange}
+          className="drop-zone__input"
+          accept={!allowAllTypes && allowedTypes ? allowedTypes.join(',') : undefined}
+        />
+        <div className="drop-zone__content">
+          <UploadIcon />
+          <p className="drop-zone__text">
+            <strong>Drag files here</strong> or click to browse
+          </p>
+          <p className="drop-zone__hint">
+            {maxFileSize && `Max file size: ${formatBytes(maxFileSize)}`}
+            {!allowAllTypes && allowedTypes && ` • Accepted: ${allowedTypes.join(', ')}`}
+          </p>
+        </div>
+      </div>
+
+      {/* Upload Queue */}
+      {uploadQueue.length > 0 && (
+        <div className="upload-queue">
+          <div className="upload-queue__header">
+            <span className="upload-queue__title">
+              {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>
+            {(completedCount > 0 || failedCount > 0) && (
+              <button 
+                className="upload-queue__clear" 
+                onClick={clearCompleted}
+                type="button"
+              >
+                Clear finished
+              </button>
+            )}
+          </div>
+
+          {/* Overall progress bar */}
+          {uploadingCount > 0 && (
+            <div className="upload-queue__overall">
+              <div className="progress-bar">
+                <div 
+                  className="progress-bar__fill" 
+                  style={{ width: `${overallProgress}%` }}
+                />
+              </div>
+              <span className="progress-bar__text">{overallProgress}%</span>
+            </div>
+          )}
+
+          {/* Individual file items */}
+          <ul className="upload-queue__list">
+            {uploadQueue.map(item => (
+              <li key={item.id} className={`upload-item upload-item--${item.status}`}>
+                <div className="upload-item__icon">
+                  {item.status === 'complete' ? <CheckIcon /> : 
+                   item.status === 'failed' ? <ErrorIcon /> : 
+                   item.status === 'paused' ? <PauseIcon /> :
+                   item.status === 'validating' ? <SpinnerIcon /> :
+                   <FileIcon />}
+                </div>
+                
+                <div className="upload-item__info">
+                  <div className="upload-item__name" title={item.file.name}>
+                    {item.file.name}
+                  </div>
+                  <div className="upload-item__meta">
+                    <span className="upload-item__size">{formatBytes(item.file.size)}</span>
+                    {item.status === 'uploading' && item.speed > 0 && (
+                      <>
+                        <span className="upload-item__speed">{formatSpeed(item.speed)}</span>
+                        {item.startTime && (
+                          <span className="upload-item__eta">
+                            {formatTimeRemaining(
+                              (item.file.size - (item.file.size * item.progress / 100)) / item.speed
+                            )} remaining
+                          </span>
+                        )}
+                      </>
+                    )}
+                    {item.status === 'complete' && item.artifactId && (
+                      <span className="upload-item__artifact">
+                        ID: {item.artifactId.substring(0, 12)}...
+                      </span>
+                    )}
+                    {item.error && (
+                      <span className="upload-item__error">{item.error}</span>
+                    )}
+                    {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' && (
+                    <div className="progress-bar progress-bar--small">
+                      <div 
+                        className="progress-bar__fill" 
+                        style={{ width: `${item.progress}%` }}
+                      />
+                    </div>
+                  )}
+                </div>
+
+                <div className="upload-item__actions">
+                  {(item.status === 'failed' || (item.status === 'paused' && isOnline)) && (
+                    <button 
+                      className="upload-item__btn upload-item__btn--retry"
+                      onClick={() => retryItem(item.id)}
+                      title="Retry upload"
+                      type="button"
+                    >
+                      <RetryIcon />
+                    </button>
+                  )}
+                  {(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)}
+                      title="Remove"
+                      type="button"
+                    >
+                      <RemoveIcon />
+                    </button>
+                  )}
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/index.ts

@@ -10,3 +10,5 @@ export { FilterChip, FilterChipGroup } from './FilterChip';
 export { DataTable } from './DataTable';
 export { Pagination } from './Pagination';
 export { GlobalSearch } from './GlobalSearch';
+export { DragDropUpload } from './DragDropUpload';
+export type { DragDropUploadProps, UploadItem, UploadResult, UploadStatus } from './DragDropUpload';

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;

frontend/src/pages/PackagePage.tsx

@@ -1,7 +1,7 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useParams, useSearchParams, useNavigate } from 'react-router-dom';
 import { TagDetail, Package, PaginatedResponse } from '../types';
-import { listTags, uploadArtifact, getDownloadUrl, getPackage } from '../api';
+import { listTags, getDownloadUrl, getPackage } from '../api';
 import { Breadcrumb } from '../components/Breadcrumb';
 import { Badge } from '../components/Badge';
 import { SearchInput } from '../components/SearchInput';
@@ -9,6 +9,7 @@ import { SortDropdown, SortOption } from '../components/SortDropdown';
 import { FilterChip, FilterChipGroup } from '../components/FilterChip';
 import { DataTable } from '../components/DataTable';
 import { Pagination } from '../components/Pagination';
+import { DragDropUpload, UploadResult } from '../components/DragDropUpload';
 import './Home.css';
 import './PackagePage.css';
 
@@ -61,10 +62,9 @@ function PackagePage() {
   const [tagsData, setTagsData] = useState<PaginatedResponse<TagDetail> | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [uploading, setUploading] = useState(false);
-  const [uploadResult, setUploadResult] = useState<string | null>(null);
-  const [tag, setTag] = useState('');
-  const fileInputRef = useRef<HTMLInputElement>(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);
@@ -122,30 +122,22 @@ function PackagePage() {
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [navigate, projectName]);
 
-  async function handleUpload(e: React.FormEvent) {
-    e.preventDefault();
-    const file = fileInputRef.current?.files?.[0];
-    if (!file) {
-      setError('Please select a file');
-      return;
-    }
+  const handleUploadComplete = useCallback((results: UploadResult[]) => {
+    const count = results.length;
+    const message = count === 1 
+      ? `Uploaded successfully! Artifact ID: ${results[0].artifact_id}`
+      : `${count} files uploaded successfully!`;
+    setUploadSuccess(message);
+    setUploadTag('');
+    loadData();
+    
+    // Auto-dismiss success message after 5 seconds
+    setTimeout(() => setUploadSuccess(null), 5000);
+  }, [loadData]);
 
-    try {
-      setUploading(true);
-      setError(null);
-      const result = await uploadArtifact(projectName!, packageName!, file, tag || undefined);
-      setUploadResult(`Uploaded successfully! Artifact ID: ${result.artifact_id}`);
-      setTag('');
-      if (fileInputRef.current) {
-        fileInputRef.current.value = '';
-      }
-      loadData();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Upload failed');
-    } finally {
-      setUploading(false);
-    }
-  }
+  const handleUploadError = useCallback((errorMsg: string) => {
+    setError(errorMsg);
+  }, []);
 
   const handleSearchChange = (value: string) => {
     updateParams({ search: value, page: '1' });
@@ -292,29 +284,29 @@ function PackagePage() {
       </div>
 
       {error && <div className="error-message">{error}</div>}
-      {uploadResult && <div className="success-message">{uploadResult}</div>}
+      {uploadSuccess && <div className="success-message">{uploadSuccess}</div>}
 
       <div className="upload-section card">
         <h3>Upload Artifact</h3>
-        <form onSubmit={handleUpload} className="upload-form">
+        <div className="upload-form">
           <div className="form-group">
-            <label htmlFor="file">File</label>
-            <input id="file" type="file" ref={fileInputRef} required />
-          </div>
-          <div className="form-group">
-            <label htmlFor="tag">Tag (optional)</label>
+            <label htmlFor="upload-tag">Tag (optional)</label>
             <input
-              id="tag"
+              id="upload-tag"
               type="text"
-              value={tag}
-              onChange={(e) => setTag(e.target.value)}
+              value={uploadTag}
+              onChange={(e) => setUploadTag(e.target.value)}
               placeholder="v1.0.0, latest, stable..."
             />
           </div>
-          <button type="submit" className="btn btn-primary" disabled={uploading}>
-            {uploading ? 'Uploading...' : 'Upload'}
-          </button>
-        </form>
+          <DragDropUpload
+            projectName={projectName!}
+            packageName={packageName!}
+            tag={uploadTag || undefined}
+            onUploadComplete={handleUploadComplete}
+            onUploadError={handleUploadError}
+          />
+        </div>
       </div>
 
       <div className="section-header">
@@ -367,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.toLowerCase().replace(/[^a-f0-9]/g, '').slice(0, 64))}
+            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 ({artifactIdInput.length}/64)</p>
+        )}
+      </div>
+
       <div className="usage-section card">
         <h3>Usage</h3>
         <p>Download artifacts using:</p>

frontend/src/test/setup.ts

@@ -0,0 +1,37 @@
+import '@testing-library/jest-dom';
+
+class MockDataTransfer implements DataTransfer {
+  dropEffect: DataTransfer['dropEffect'] = 'none';
+  effectAllowed: DataTransfer['effectAllowed'] = 'all';
+  files: FileList = Object.assign([], { item: (i: number) => this.files[i] || null });
+  items: DataTransferItemList = Object.assign([], {
+    add: () => null,
+    remove: () => {},
+    clear: () => {},
+    item: () => null,
+  }) as unknown as DataTransferItemList;
+  types: readonly string[] = [];
+
+  clearData(): void {}
+  getData(): string { return ''; }
+  setData(): void {}
+  setDragImage(): void {}
+}
+
+Object.defineProperty(globalThis, 'DataTransfer', {
+  value: MockDataTransfer,
+});
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }),
+});

frontend/vite.config.ts

@@ -1,3 +1,4 @@
+/// <reference types="vitest" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
@@ -9,5 +10,11 @@ export default defineConfig({
       '/health': 'http://localhost:8080',
       '/project': 'http://localhost:8080',
     }
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.ts',
+    css: true,
   }
 })