[Frontend] Refactor useTaskMonitor Hook: Decompose into WebSocket, NodeState, Payments, and Outputs Hooks

[Clement-coder]

🎯 Objective

Decompose the monolithic 228-line useTaskMonitor hook into focused, testable sub-hooks following the Single Responsibility Principle.

✅ Changes Made

Files Created

• frontend/src/hooks/useTaskWebSocket.ts - WebSocket connection management with exponential backoff reconnection
• frontend/src/hooks/useNodeState.ts - Node state machine handling transitions (pending → running → completed/failed)
• frontend/src/hooks/useTaskPayments.ts - Payment status tracking per node, payment history, and total cost calculation
• frontend/src/hooks/useTaskOutputs.ts - Output aggregation from completed nodes and final merged result

Test Files Created

• frontend/src/hooks/useTaskWebSocket.test.ts - WebSocket hook tests (9 tests)
• frontend/src/hooks/useNodeState.test.ts - Node state hook tests (14 tests)
• frontend/src/hooks/useTaskPayments.test.ts - Payments hook tests (15 tests)
• frontend/src/hooks/useTaskOutputs.test.ts - Outputs hook tests (15 tests)

Files Modified

• frontend/src/hooks/useTaskMonitor.ts - Refactored from 228 lines to ~80 lines by composing the 4 sub-hooks

🏗️ Architecture Benefits

1. Single Responsibility: Each hook has one clear purpose
2. Testability: Each sub-hook can be tested independently
3. Reusability: Sub-hooks can be reused in other components
4. Maintainability: Easier to debug and modify specific functionality
5. Composition: Main hook cleanly composes sub-hooks via event handling

🧪 Testing

• Build: ✅ npm run build - No TypeScript errors
• Tests: ✅ npm test - All 116 tests pass (53 new tests added)
• API Compatibility: ✅ TaskDetailPage still works with same API

📋 Key Features Implemented

WebSocket Hook (useTaskWebSocket)

• Connection management with automatic reconnection
• Exponential backoff (1s, 2s, 4s, 8s, 16s) with max 5 attempts
• Proper cleanup and connection state tracking

Node State Hook (useNodeState)

• State machine for node status transitions
• Helper methods: getNodeStatus, getCompletedNodes, getRunningNodes, getFailedNodes
• Event-driven updates from DAGEvents

Payments Hook (useTaskPayments)

• Payment amount calculation based on agent type
• Locked vs released payment tracking
• Total cost calculation and payment history management

Outputs Hook (useTaskOutputs)

• Output extraction from different payload formats
• Final result aggregation with formatted headers
• Helper methods for output management

🔄 Migration

The refactored hook maintains the same public API, so no changes are needed in TaskDetailPage.tsx. The decomposition is purely internal.

Closes #167

[vercel]

@Clement-coder is attempting to deploy a commit to the Jaja's projects Team on Vercel.

A member of the Team first needs to authorize it.