Add outbound traffic breakdown to device charts

src/web/features/devices/DevicesPanel.tsx

@@ -79,6 +79,7 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
   const [alias, setAlias] = useState('');
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
   const [trafficScale, setTrafficScale] = useState<'linear' | 'log'>('linear');
+  const [trafficView, setTrafficView] = useState<'outbound' | 'inbound'>('outbound');
   const [copyFeedback, setCopyFeedback] = useState<Record<string, { field: DeviceCopyField; failed: boolean }>>({});
   const [copyAnnouncement, setCopyAnnouncement] = useState<{ id: string; message: string } | null>(null);
   const [pencilAnimationId, setPencilAnimationId] = useState('');
@@ -324,6 +325,10 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
               </button>
               <Tooltip>Сначала {sortDirection === 'desc' ? 'больше' : 'меньше'} трафика</Tooltip>
             </span>
+            <span className="client-devices-scale" role="group" aria-label="Разрез графика трафика">
+              <button type="button" aria-pressed={trafficView === 'outbound'} onClick={() => setTrafficView('outbound')}>Выход</button>
+              <button type="button" aria-pressed={trafficView === 'inbound'} onClick={() => setTrafficView('inbound')}>Вход</button>
+            </span>
             <span className="client-devices-scale" role="group" aria-label="Масштаб графика трафика">
               <button type="button" aria-pressed={trafficScale === 'linear'} onClick={() => setTrafficScale('linear')}>Лин</button>
               <button type="button" aria-pressed={trafficScale === 'log'} onClick={() => setTrafficScale('log')}>Лог</button>
@@ -581,10 +586,11 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
                 <Tooltip>{deprioritized ? 'Вернуть в основной список' : 'Убрать в фон'}</Tooltip>
               </span>
               {!compact && <TrafficChart
-                samples={device.trafficHistory || []}
+                samples={trafficView === 'outbound' ? device.outboundTrafficHistory || [] : device.trafficHistory || []}
                 scale={trafficScale}
                 capacity={snapshot?.trafficHistoryCapacity || device.trafficHistory?.length || 1}
                 routeLabel={device.appliedPolicy === 'direct' ? 'Напрямую' : 'Gateway'}
+                series={trafficView}
                 pinned={showDetails}
                 collapsing={collapsing}
                 onCollapseEnd={() => finishPinCollapse(device.id)}