feat(traffic): protocol breakdown layout + inbound packets chart + flow source health (v0.15.0-beta)

- Traffic by Application: donut + legend side-by-side, larger donut with
  center total label, percentage in tooltip; card now sizes to its content
- New Inbound Packets area chart below the throughput chart (packets field
  now summed per direction in /traffic/timeseries)
- New Flow Sources & Data Health card: collector listening state, packets
  received, flows attributed, attribution rate, per-exporter flow/packet
  counts and last-seen; low-attribution hint for NAT-in-path exporters
- /traffic/apps now returns per-app packets alongside bytes
- Restructured bottom row: Top Talkers (left) | Application + Data Health
  stacked (right) for alignment
- Tightened Top Talkers row spacing

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mikrotik-manager-frontend",
-  "version": "0.14.1-beta",
+  "version": "0.15.0-beta",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mikrotik-manager-frontend",
-      "version": "0.14.1-beta",
+      "version": "0.15.0-beta",
       "dependencies": {
         "@tanstack/react-query": "^5.17.1",
         "@types/leaflet": "^1.9.21",

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mikrotik-manager-frontend",
-  "version": "0.14.1-beta",
+  "version": "0.15.0-beta",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/pages/TrafficAnalyticsPage.tsx

@@ -6,8 +6,8 @@ import {
   AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
   PieChart, Pie, Cell, Legend,
 } from 'recharts';
-import { Activity, ArrowDown, ArrowUp, BarChart3, Settings2 } from 'lucide-react';
-import { format, parseISO } from 'date-fns';
+import { Activity, ArrowDown, ArrowUp, BarChart3, Router as RouterIcon, Settings2, AlertTriangle } from 'lucide-react';
+import { format, parseISO, formatDistanceToNow } from 'date-fns';
 import clsx from 'clsx';
 import { trafficApi } from '../services/api';
 
@@ -28,6 +28,13 @@ function formatBytes(bytes: number): string {
   return `${(bytes / 1024 ** 4).toFixed(2)} TB`;
 }
 
+function formatCount(n: number): string {
+  if (n < 1000) return `${n}`;
+  if (n < 1_000_000) return `${(n / 1000).toFixed(1)}K`;
+  if (n < 1_000_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  return `${(n / 1_000_000_000).toFixed(2)}B`;
+}
+
 function timeFormatter(range: Range) {
   return (t: string) => {
     try {
@@ -67,6 +74,12 @@ export default function TrafficAnalyticsPage() {
     refetchInterval: 60_000,
   });
 
+  const { data: status } = useQuery({
+    queryKey: ['traffic-status'],
+    queryFn: () => trafficApi.status().then(r => r.data),
+    refetchInterval: 30_000,
+  });
+
   const isLoading = seriesLoading || clientsLoading || appsLoading;
   const hasData = series.length > 0 || topClients.length > 0 || apps.length > 0;
 
@@ -75,6 +88,12 @@ export default function TrafficAnalyticsPage() {
   const totalAppBytes = apps.reduce((s, a) => s + a.bytes, 0);
   const maxClientBytes = topClients[0]?.total_bytes || 1;
 
+  // Collector data-health: how much of the received traffic we could attribute
+  const exporters = [...(status?.exporters || [])].sort((a, b) => b.flows - a.flows);
+  const pktReceived = status?.packetsReceived || 0;
+  const pktUnattributed = status?.packetsFromUnknownExporter || 0;
+  const attributionRate = pktReceived > 0 ? ((pktReceived - pktUnattributed) / pktReceived) * 100 : 0;
+
   // Donut: top 8 categories, rest folded into "Other"
   const donutData = (() => {
     const top = apps.slice(0, 8);
@@ -178,7 +197,30 @@ export default function TrafficAnalyticsPage() {
             </ResponsiveContainer>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Inbound packets chart */}
+          <div className="card p-5">
+            <h2 className="text-sm font-semibold text-gray-700 dark:text-slate-200 mb-4">Inbound Packets</h2>
+            <ResponsiveContainer width="100%" height={220}>
+              <AreaChart data={series}>
+                <defs>
+                  <linearGradient id="pktIn" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="#10b981" stopOpacity={0.35} />
+                    <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" className="stroke-gray-200 dark:stroke-slate-700" />
+                <XAxis dataKey="time" tickFormatter={timeFormatter(range)} tick={{ fontSize: 11 }} stroke="currentColor" />
+                <YAxis tickFormatter={v => formatCount(v)} tick={{ fontSize: 11 }} width={55} stroke="currentColor" />
+                <Tooltip
+                  labelFormatter={t => { try { return format(parseISO(String(t)), 'MMM d, HH:mm'); } catch { return String(t); } }}
+                  formatter={(value: number) => [`${formatCount(value)} pkts`, 'Inbound']}
+                />
+                <Area type="monotone" dataKey="downloadPackets" stroke="#10b981" fill="url(#pktIn)" strokeWidth={2} />
+              </AreaChart>
+            </ResponsiveContainer>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
             {/* Top talkers */}
             <div className="card overflow-hidden">
               <div className="px-5 py-3 border-b border-gray-200 dark:border-slate-700 flex items-center gap-2">
@@ -194,8 +236,8 @@ export default function TrafficAnalyticsPage() {
                       return (
                         <div key={c.mac}
                           onClick={() => isReal && navigate(`/clients/${encodeURIComponent(c.mac)}`)}
-                          className={clsx('px-5 py-3', isReal && 'cursor-pointer hover:bg-blue-50 dark:hover:bg-slate-700/40 transition-colors')}>
-                          <div className="flex items-center justify-between mb-1.5">
+                          className={clsx('px-5 py-2', isReal && 'cursor-pointer hover:bg-blue-50 dark:hover:bg-slate-700/40 transition-colors')}>
+                          <div className="flex items-center justify-between mb-1">
                             <div className="min-w-0">
                               <span className="text-sm font-medium text-gray-900 dark:text-white truncate">{clientLabel(c)}</span>
                               {isReal && (
@@ -207,7 +249,7 @@ export default function TrafficAnalyticsPage() {
                           <div className="h-1.5 rounded-full bg-gray-100 dark:bg-slate-700 overflow-hidden">
                             <div className="h-full rounded-full bg-blue-500" style={{ width: `${Math.max(2, (c.total_bytes / maxClientBytes) * 100)}%` }} />
                           </div>
-                          <div className="mt-1 flex gap-3 text-xs text-gray-400 dark:text-slate-500">
+                          <div className="mt-0.5 flex gap-3 text-xs text-gray-400 dark:text-slate-500">
                             <span className="inline-flex items-center gap-0.5"><ArrowDown className="w-3 h-3" />{formatBytes(c.download_bytes)}</span>
                             <span className="inline-flex items-center gap-0.5"><ArrowUp className="w-3 h-3" />{formatBytes(c.upload_bytes)}</span>
                           </div>
@@ -218,6 +260,8 @@ export default function TrafficAnalyticsPage() {
                 )}
             </div>
 
+            {/* Right column: protocol breakdown + data health, stacked to align with Top Talkers */}
+            <div className="space-y-6">
             {/* App categories */}
             <div className="card overflow-hidden">
               <div className="px-5 py-3 border-b border-gray-200 dark:border-slate-700 flex items-center gap-2">
@@ -227,23 +271,37 @@ export default function TrafficAnalyticsPage() {
               {apps.length === 0
                 ? <div className="p-6 text-center text-sm text-gray-400 dark:text-slate-500">No application data recorded.</div>
                 : (
-                  <div className="p-5">
-                    <ResponsiveContainer width="100%" height={220}>
-                      <PieChart>
-                        <Pie data={donutData} dataKey="bytes" nameKey="app" innerRadius={55} outerRadius={85} paddingAngle={2}>
-                          {donutData.map((entry, i) => (
-                            <Cell key={entry.app} fill={APP_COLORS[i % APP_COLORS.length]} />
-                          ))}
-                        </Pie>
-                        <Tooltip formatter={(value: number, name: string) => [formatBytes(value), name]} />
-                      </PieChart>
-                    </ResponsiveContainer>
-                    <div className="mt-2 space-y-1.5">
-                      {apps.slice(0, 10).map((a, i) => (
+                  <div className="p-5 flex flex-col sm:flex-row sm:items-center gap-5">
+                    {/* Donut — grows to fill the available space */}
+                    <div className="relative w-full sm:w-1/2 flex-shrink-0">
+                      <ResponsiveContainer width="100%" height={260}>
+                        <PieChart>
+                          <Pie data={donutData} dataKey="bytes" nameKey="app" innerRadius="58%" outerRadius="92%" paddingAngle={1.5} stroke="none">
+                            {donutData.map((entry, i) => (
+                              <Cell key={entry.app} fill={APP_COLORS[i % APP_COLORS.length]} />
+                            ))}
+                          </Pie>
+                          <Tooltip
+                            formatter={(value: number, name: string) => [
+                              `${formatBytes(value)}${totalAppBytes > 0 ? ` · ${((value / totalAppBytes) * 100).toFixed(1)}%` : ''}`,
+                              name,
+                            ]}
+                          />
+                        </PieChart>
+                      </ResponsiveContainer>
+                      {/* Center label */}
+                      <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+                        <span className="text-[11px] uppercase tracking-wide text-gray-400 dark:text-slate-500">Total</span>
+                        <span className="text-base font-bold text-gray-900 dark:text-white">{formatBytes(totalAppBytes)}</span>
+                      </div>
+                    </div>
+                    {/* Legend — uses the vertical space beside the donut */}
+                    <div className="flex-1 min-w-0 space-y-1.5">
+                      {apps.slice(0, 12).map((a, i) => (
                         <div key={a.app} className="flex items-center gap-2 text-sm">
                           <span className="w-2.5 h-2.5 rounded-sm flex-shrink-0" style={{ backgroundColor: APP_COLORS[i % APP_COLORS.length] }} />
                           <span className="text-gray-700 dark:text-slate-300 flex-1 truncate">{a.app}</span>
-                          <span className="text-gray-500 dark:text-slate-400 text-xs">
+                          <span className="text-gray-500 dark:text-slate-400 text-xs w-12 text-right">
                             {totalAppBytes > 0 ? `${((a.bytes / totalAppBytes) * 100).toFixed(1)}%` : ''}
                           </span>
                           <span className="font-medium text-gray-900 dark:text-white w-20 text-right">{formatBytes(a.bytes)}</span>
@@ -253,6 +311,84 @@ export default function TrafficAnalyticsPage() {
                   </div>
                 )}
             </div>
+
+            {/* Flow sources & data health */}
+            <div className="card overflow-hidden">
+            <div className="px-5 py-3 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between gap-2">
+              <div className="flex items-center gap-2">
+                <RouterIcon className="w-4 h-4 text-cyan-500" />
+                <h2 className="text-sm font-semibold text-gray-700 dark:text-slate-200">Flow Sources &amp; Data Health</h2>
+              </div>
+              <span className={clsx('inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium',
+                status?.listening
+                  ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
+                  : 'bg-gray-100 text-gray-500 dark:bg-slate-700 dark:text-slate-400')}>
+                <span className={clsx('w-1.5 h-1.5 rounded-full', status?.listening ? 'bg-emerald-500' : 'bg-gray-400')} />
+                {status?.listening ? `Listening :${status.port}` : 'Collector stopped'}
+              </span>
+            </div>
+            <div className="p-5 space-y-4">
+              {/* Health summary */}
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+                <div>
+                  <div className="text-xs text-gray-400 dark:text-slate-500">Packets received</div>
+                  <div className="text-base font-bold text-gray-900 dark:text-white">{formatCount(pktReceived)}</div>
+                </div>
+                <div>
+                  <div className="text-xs text-gray-400 dark:text-slate-500">Flows attributed</div>
+                  <div className="text-base font-bold text-gray-900 dark:text-white">{formatCount(status?.flowsAttributed || 0)}</div>
+                </div>
+                <div>
+                  <div className="text-xs text-gray-400 dark:text-slate-500">Attribution rate</div>
+                  <div className={clsx('text-base font-bold',
+                    attributionRate >= 90 ? 'text-emerald-600 dark:text-emerald-400'
+                      : attributionRate >= 60 ? 'text-amber-600 dark:text-amber-400'
+                        : 'text-red-600 dark:text-red-400')}>
+                    {pktReceived > 0 ? `${attributionRate.toFixed(0)}%` : '—'}
+                  </div>
+                </div>
+                <div>
+                  <div className="text-xs text-gray-400 dark:text-slate-500">Exporting devices</div>
+                  <div className="text-base font-bold text-gray-900 dark:text-white">{exporters.length}</div>
+                </div>
+              </div>
+
+              {/* Low-attribution hint */}
+              {pktReceived > 0 && attributionRate < 90 && (
+                <div className="flex items-start gap-2 text-xs text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 rounded-lg px-3 py-2">
+                  <AlertTriangle className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
+                  <span>
+                    {formatCount(pktUnattributed)} packets came from an unrecognized exporter (often NAT in the path).
+                    Their traffic is still counted but may not map to the right device.
+                  </span>
+                </div>
+              )}
+
+              {/* Per-exporter rows */}
+              {exporters.length === 0
+                ? <div className="text-sm text-gray-400 dark:text-slate-500">No routers have exported flows yet. <Link to="/network-services/netflow" className="text-blue-600 dark:text-blue-400 hover:underline">Configure NetFlow export →</Link></div>
+                : (
+                  <div className="divide-y divide-gray-100 dark:divide-slate-800 -mb-1">
+                    {exporters.map(e => (
+                      <div key={e.deviceId} className="flex items-center justify-between py-2 gap-3">
+                        <div className="min-w-0 flex items-center gap-2">
+                          <RouterIcon className="w-3.5 h-3.5 text-gray-400 dark:text-slate-500 flex-shrink-0" />
+                          <span className="text-sm text-gray-700 dark:text-slate-200 truncate">{e.deviceName}</span>
+                        </div>
+                        <div className="flex items-center gap-4 flex-shrink-0 text-xs text-gray-500 dark:text-slate-400">
+                          <span>{formatCount(e.flows)} flows</span>
+                          <span>{formatCount(e.packets)} pkts</span>
+                          <span className="w-24 text-right text-gray-400 dark:text-slate-500">
+                            {e.lastSeen ? `${formatDistanceToNow(parseISO(e.lastSeen))} ago` : 'never'}
+                          </span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+            </div>
+            </div>
+            </div>
           </div>
         </>
       )}

frontend/src/services/api.ts

@@ -849,7 +849,7 @@ export interface NetflowDeviceState {
 
 // ─── Traffic Analytics (NetFlow) ──────────────────────────────────────────────
 
-export interface ClientTrafficPoint { time: string; upload: number; download: number }
+export interface ClientTrafficPoint { time: string; upload: number; download: number; uploadPackets?: number; downloadPackets?: number }
 export interface TrafficTopClient {
   mac: string;
   upload_bytes: number;
@@ -860,7 +860,7 @@ export interface TrafficTopClient {
   vendor: string | null;
   ip_address: string | null;
 }
-export interface TrafficApp { app: string; bytes: number }
+export interface TrafficApp { app: string; bytes: number; packets?: number }
 export interface TrafficCollectorStats {
   listening: boolean;
   port: number;

frontend/src/version.ts

@@ -1 +1 @@
-export const APP_VERSION = 'v0.14.1 Beta';
+export const APP_VERSION = 'v0.15.0 Beta';