fix(ui): Worker slot preflight checklist and fingerprint hover

- Fix fingerprint tooltip to use actual API field names (browserName, deviceCategory, detectedTimezone)
- Show real preflight steps: HTTP Preflight, Geo Session, Pool Ready
- Checkmarks appear as each step completes, spinners while in progress

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Kelly
2025-12-14 03:38:46 -07:00
parent f5cb17e1d4
commit 83e9718d78

View File

@@ -688,21 +688,41 @@ function WorkerSlot({
const maxTasks = worker?.max_concurrent_tasks || 3;
const isOverloaded = (worker?.active_task_count || 0) >= maxTasks;
// Build fingerprint tooltip
// Build fingerprint tooltip - use actual API field names
const fp = fingerprint as any; // API returns different shape than interface
const fingerprintTooltip = [
'=== FINGERPRINT ===',
fingerprint?.browser ? `Browser: ${fingerprint.browser}` : 'Browser: Unknown',
fingerprint?.platform ? `Platform: ${fingerprint.platform}` : '',
fingerprint?.timezone ? `Timezone: ${fingerprint.timezone}` : '',
'═══ FINGERPRINT ═══',
fp?.browserName ? `Browser: ${fp.browserName}` : 'Browser: Unknown',
fp?.deviceCategory ? `Device: ${fp.deviceCategory}` : '',
fp?.userAgent ? `UA: ${fp.userAgent.slice(0, 50)}...` : '',
'',
'=== BOT DETECTION ===',
fingerprint?.botDetection ? `Webdriver: ${fingerprint.botDetection.webdriver ? '⚠️ DETECTED' : '✓ Hidden'}` : '',
fingerprint?.botDetection ? `Automation: ${fingerprint.botDetection.automationControlled ? '⚠️ DETECTED' : '✓ Hidden'}` : '',
'═══ LOCATION ═══',
fp?.detectedLocation?.city ? `City: ${fp.detectedLocation.city}` : '',
fp?.detectedLocation?.region ? `State: ${fp.detectedLocation.region}` : '',
fp?.detectedTimezone ? `Timezone: ${fp.detectedTimezone}` : '',
'',
'=== PRODUCTS ===',
fingerprint?.productsReturned !== undefined ? `Products returned: ${fingerprint.productsReturned}` : '',
'═══ PROXY ═══',
httpIp ? `IP: ${httpIp}` : '',
fp?.productsReturned !== undefined ? `Test Products: ${fp.productsReturned}` : '',
].filter(Boolean).join('\n');
// Preflight status helpers
const httpStatus = worker?.preflight_http_status;
const curlStatus = worker?.preflight_curl_status;
const getStatusIcon = (status: string | undefined, label: string) => {
if (status === 'passed') return <CheckCircle className="w-3 h-3 text-emerald-500" />;
if (status === 'failed') return <XCircle className="w-3 h-3 text-red-500" />;
if (status === 'skipped') return <span className="w-3 h-3 text-gray-400"></span>;
return <RefreshCw className="w-3 h-3 text-yellow-500 animate-spin" />;
};
const getStatusColor = (status: string | undefined) => {
if (status === 'passed') return 'text-emerald-600';
if (status === 'failed') return 'text-red-600';
return 'text-yellow-600';
};
// Slot is idle (no task)
if (!task) {
// Show preflight checklist if not yet qualified
@@ -713,34 +733,39 @@ function WorkerSlot({
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<div className="text-xs font-semibold text-gray-500 mb-2">Slot {slotIndex + 1}</div>
<div className="text-xs font-semibold text-gray-500 mb-2">Slot {slotIndex + 1} - Starting</div>
<div className="space-y-1">
{/* HTTP Preflight */}
<div className="flex items-center gap-2 text-xs">
{isOverloaded ? (
<XCircle className="w-3 h-3 text-red-500" />
) : (
<CheckCircle className="w-3 h-3 text-emerald-500" />
)}
<span className={isOverloaded ? 'text-red-600' : 'text-gray-600'}>Overload?</span>
{getStatusIcon(httpStatus, 'HTTP')}
<span className={getStatusColor(httpStatus)}>
HTTP Preflight {httpStatus === 'passed' ? '✓' : httpStatus === 'failed' ? '✗' : '...'}
</span>
</div>
{/* Geo Session */}
<div className="flex items-center gap-2 text-xs">
{isDecommissioning ? (
<XCircle className="w-3 h-3 text-orange-500" />
) : (
{hasGeo ? (
<CheckCircle className="w-3 h-3 text-emerald-500" />
) : httpStatus === 'passed' ? (
<RefreshCw className="w-3 h-3 text-yellow-500 animate-spin" />
) : (
<Clock className="w-3 h-3 text-gray-300" />
)}
<span className={isDecommissioning ? 'text-orange-600' : 'text-gray-600'}>Terminating?</span>
<span className={hasGeo ? 'text-emerald-600' : 'text-gray-500'}>
Geo Session {hasGeo ? '✓' : httpStatus === 'passed' ? '...' : ''}
</span>
</div>
{/* Pool Ready */}
<div className="flex items-center gap-2 text-xs">
{!poolOpen ? (
<Clock className="w-3 h-3 text-yellow-500" />
{isQualified ? (
<CheckCircle className="w-3 h-3 text-emerald-500" />
) : hasGeo ? (
<CheckCircle className="w-3 h-3 text-emerald-500" />
<RefreshCw className="w-3 h-3 text-yellow-500 animate-spin" />
) : (
<Clock className="w-3 h-3 text-yellow-500 animate-pulse" />
<Clock className="w-3 h-3 text-gray-300" />
)}
<span className={!poolOpen || !hasGeo ? 'text-yellow-600' : 'text-gray-600'}>
Pool Query?
<span className={isQualified ? 'text-emerald-600' : 'text-gray-500'}>
Pool Ready {isQualified ? '✓' : hasGeo ? '...' : ''}
</span>
</div>
</div>