Function PacketLossIndicator

frontend/src/components/robot-header.tsx:962–987

()

// Packet loss indicator
function PacketLossIndicator() {
  const networkMetrics = useNetworkMetrics(1000);
  const packetLoss = networkMetrics.packetLoss;

  // Color based on packet loss levels
  const getPacketLossColor = () => {
    if (packetLoss === 0) return 'text-green-600 dark:text-green-400';
    if (packetLoss < 1) return 'text-green-600 dark:text-green-400';
    if (packetLoss < 5) return 'text-yellow-600 dark:text-yellow-400';
    return 'text-red-600 dark:text-red-400';
  };

  const getQualityText = () => {
    if (packetLoss === 0) return 'No loss';
    if (packetLoss < 1) return 'Minimal';
    if (packetLoss < 5) return 'Acceptable';
    return 'High loss';
  };

  return (
    <div className="text-right">
      <div className={`text-sm font-medium ${getPacketLossColor()}`}>{packetLoss}%</div>
      <div className="text-xs text-gray-500 dark:text-gray-400">{getQualityText()}</div>
    </div>
  );
}

// Connection quality warning component
function ConnectionQualityWarning() {