'use client' import { useCallback, useEffect, useState } from 'react' import { useNavigate } from '@tanstack/react-router' import { HugeiconsIcon } from '@hugeicons/react' import { CheckListIcon, Clock01Icon, RefreshIcon, Wifi01Icon, WifiOffIcon, } from '@hugeicons/core-free-icons' import { cn } from '@/lib/utils' import { useCrewStatus, getOnlineStatus, type CrewMember, type CrewOnlineStatus, } from '@/hooks/use-crew-status' // ── Helpers ───────────────────────────────────────────────────────── function formatNumber(n: number): string { if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M` if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K` return String(n) } function formatTokens(n: number): string { if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M` if (n >= 1_000) return `${(n / 1_000).toFixed(0)}K` return String(n) } function formatCost(n: number | null): string { if (n === null) return '—' return `$${n.toFixed(2)}` } function formatRelativeTime(unixSeconds: number | null): string { if (!unixSeconds) return 'Never' const diffMs = Date.now() - unixSeconds * 1000 const diffMins = Math.floor(diffMs / 60_000) if (diffMins < 1) return 'Just now' if (diffMins < 60) return `${diffMins}m ago` const diffHours = Math.floor(diffMins / 60) if (diffHours < 24) return `${diffHours}h ago` const diffDays = Math.floor(diffHours / 24) return `${diffDays}d ago` } function formatUpdatedAgo(fetchedAt: number | null): string { if (!fetchedAt) return '' const diffSec = Math.floor((Date.now() - fetchedAt) / 1000) if (diffSec < 5) return 'just now' if (diffSec < 60) return `${diffSec}s ago` return `${Math.floor(diffSec / 60)}m ago` } // ── Status dot ────────────────────────────────────────────────────── function StatusDot({ status }: { status: CrewOnlineStatus }) { return (
{status}
) } // ── Skeleton card ─────────────────────────────────────────────────── function SkeletonCard() { return (
{[0,1,2].map(i => (
))}
) } // ── Agent card ────────────────────────────────────────────────────── function AgentCard({ member }: { member: CrewMember }) { const navigate = useNavigate() const status = getOnlineStatus(member) const telegramPlatform = member.platforms.telegram const borderColor = status === 'online' ? '#B87333' : status === 'offline' ? '#ef4444' : '#6b7280' const handleViewTasks = () => { void navigate({ to: '/tasks', search: { assignee: member.id } }) } const handleViewJobs = () => { void navigate({ to: '/jobs', search: { agent: member.id } }) } return (
{/* Top row: status dot + role */}
{member.role}
{/* Agent name + model */}

{member.displayName || member.id}

{member.model} · {member.provider}

{telegramPlatform && (
Telegram: {telegramPlatform.state}
)}
{/* Last active */}

Last active: {formatRelativeTime(member.lastSessionAt)}

{member.lastSessionTitle && (

"{member.lastSessionTitle}"

)}
{/* Stats grid */}
{[ { label: 'Sessions', value: formatNumber(member.sessionCount) }, { label: 'Messages', value: formatNumber(member.messageCount) }, { label: 'Tools', value: formatNumber(member.toolCallCount) }, ].map(({ label, value }) => (
{value}
{label}
))}
{/* Tokens + cost */}
Tokens: {formatTokens(member.totalTokens)} Est. cost: {formatCost(member.estimatedCostUsd)}
{/* Cron + tasks */}
Crons: {member.cronJobCount} Tasks: {member.assignedTaskCount} assigned
{/* Divider */}
{/* Footer actions */}
) } // ── Ticker for "Updated X ago" ─────────────────────────────────────── function useUpdatedAgo(fetchedAt: number | null): string { const [label, setLabel] = useState(formatUpdatedAgo(fetchedAt)) useEffect(() => { setLabel(formatUpdatedAgo(fetchedAt)) const interval = setInterval(() => { setLabel(formatUpdatedAgo(fetchedAt)) }, 5_000) return () => clearInterval(interval) }, [fetchedAt]) return label } // ── Main screen ───────────────────────────────────────────────────── export function CrewScreen() { const { crew, lastUpdated, isLoading, isError, refetch } = useCrewStatus() const updatedAgo = useUpdatedAgo(lastUpdated) const displayCrew = [...crew].sort((a, b) => { const rank = (member: CrewMember) => { const status = getOnlineStatus(member) if (status === 'online') return 0 if (status === 'offline') return 1 return 2 } const rankDiff = rank(a) - rank(b) if (rankDiff !== 0) return rankDiff return (a.displayName || a.id).localeCompare(b.displayName || b.id) }) const onlineCount = displayCrew.filter(m => getOnlineStatus(m) === 'online').length const assignedTaskCount = displayCrew.reduce((sum, member) => sum + member.assignedTaskCount, 0) const runningCronCount = displayCrew.reduce((sum, member) => sum + member.cronJobCount, 0) const handleRefresh = useCallback(() => { void refetch() }, [refetch]) return (
{/* ── Header ── */}

Crew Status

Live agent health across profiles, recent session activity, assigned tasks, and cron coverage.

{displayCrew.length} crew {onlineCount} online {assignedTaskCount} assigned tasks {runningCronCount} cron jobs {updatedAgo ? ( Updated {updatedAgo} ) : null}
{/* ── Error state ── */} {isError && !isLoading && (
Failed to load crew status.{' '}
)} {/* ── Card grid ── */}
{isLoading ? Array.from({ length: 5 }, (_, i) => ) : displayCrew.map(member => ) }
) }