feat(upload): enhance upload functionality with chunk management and cancellation support

- Updated Upload.vue to include cancelItem functionality in the upload queue.
- Modified UploadQueue.vue to emit cancel events for individual items.
- Enhanced UploadQueueItem.vue to display cancel button for ongoing uploads.
- Added merge.ts for handling manifest creation and S3 operations for chunk uploads.
- Introduced temp.html for testing multi-threaded chunk uploads with progress tracking.
- Created AGENTS.md for comprehensive project documentation and guidelines.

src/routes/upload/components/UploadQueue.vue

@@ -11,9 +11,10 @@ defineProps<{
 
 const emit = defineEmits<{
     removeItem: [id: string];
+    cancelItem: [id: string];
     publish: [];
     startQueue: [];
-}>();
+}>()
 </script>
 
 <template>
@@ -53,7 +54,7 @@ const emit = defineEmits<{
                 </div>
 
                 <UploadQueueItem v-for="item in items" :key="item.id" :item="item"
-                    @remove="emit('removeItem', $event)" />
+                    @remove="emit('removeItem', $event)" @cancel="emit('cancelItem', $event)" />
             </div>
 
             <div class="p-6 border-t border-border shrink-0">

src/routes/upload/components/UploadQueueItem.vue

@@ -10,12 +10,13 @@ const props = defineProps<{
 
 const emit = defineEmits<{
     remove: [id: string];
+    cancel: [id: string];
 }>();
 
 const statusLabel = computed(() => {
     switch (props.item.status) {
         case 'pending': return 'Pending';
-        case 'uploading': return 'Uploading...';
+        case 'uploading': return props.item.activeChunks ? `Uploading (${props.item.activeChunks} threads)` : 'Uploading...';
         case 'processing': return 'Processing...';
         case 'complete': return 'Completed';
         case 'error': return 'Failed';
@@ -32,6 +33,10 @@ const statusColor = computed(() => {
         default: return 'bg-accent';
     }
 });
+
+const canCancel = computed(() => {
+    return props.item.status === 'uploading' || props.item.status === 'pending';
+});
 </script>
 
 <template>
@@ -72,7 +77,16 @@ const statusColor = computed(() => {
                             <span class="w-2 h-2 rounded-full animate-pulse" :class="statusColor"></span>
                             {{ statusLabel }}
                         </span>
-                        <span class="text-accent font-bold">{{ item.progress || 0 }}%</span>
+                        <div class="flex items-center gap-2">
+                            <button 
+                                v-if="canCancel && !minimal" 
+                                @click="emit('cancel', item.id)"
+                                class="text-[10px] px-2 py-0.5 bg-red-50 text-red-500 hover:bg-red-100 rounded transition"
+                            >
+                                Cancel
+                            </button>
+                            <span class="text-accent font-bold">{{ item.progress || 0 }}%</span>
+                        </div>
                     </div>
                     <div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden relative">
                         <div class="absolute inset-0 bg-accent/20 animate-pulse w-full"></div>