= ({
onSelect,
selectedHash,
}) => {
+ const formatSrcDst = (srcHash?: string, dstHash?: string, reverse: boolean = false): JSX.Element => {
+ const src = srcHash ? srcHash.slice(0, 8) : '??';
+ const dst = dstHash ? dstHash.slice(0, 8) : '??';
+ return (
+
+ {src} {reverse ? '←' : '→'} {dst}
+
+ );
+ }
+
+ const PayloadTextSummary: React.FC<{ packet: Packet }> = ({ packet }) => {
+ // If the packet contains a decrypted group message, prefer that
+ if (packet.decrypted && packet.payloadType === PayloadType.GROUP_TEXT) {
+ const dg = packet.decrypted as DecryptedGroupMessage;
+ let nick: string | null = null;
+ let message: string | null = null;
+
+ if (typeof dg.message === 'string') {
+ const parts = dg.message.split(':');
+ if (parts.length > 1) {
+ nick = parts.shift()!.trim();
+ message = parts.join(':').trim();
+ } else {
+ message = dg.message;
+ }
+ }
+
+ if (nick && message) {
+ return (
+
+ {dg.group && {dg.group} }
+ {nick}
+ {': '}
+ {message}
+
+ );
+ }
+
+ if (message) {
+ return {message}
;
+ }
+ }
+
+ // Fallback: show channel hash when payload decoded but not decrypted, or raw hex
+ const payload = packet.decodedPayload as GroupTextPayload;
+ return (
+
+ Group message:
+ #{payload.channelHash}
+
+ );
+ };
+
+ const TextPayloadSummary: React.FC<{ packet: Packet }> = ({ packet }) => {
+ const payload = packet.decodedPayload as TextPayload;
+ const dec = packet.decrypted as DecryptedTextMessage | undefined;
+ if (dec && typeof dec.message === 'string') return {dec.message}
;
+ return (
+
+ Text message:
+ {formatSrcDst(payload.srcHash, payload.dstHash)}
+
+ );
+ };
+
+ const RequestPayloadSummary: React.FC<{ packet: Packet }> = ({ packet }) => {
+ const payload = packet.decodedPayload as RequestPayload;
+ const dec = packet.decrypted as DecryptedRequest | undefined;
+ if (dec) {
+ return (
+
+
{`Request type: ${dec.requestType}`}
+
{`Timestamp: ${dec.timestamp.toLocaleString()}`}
+
+ Request:
+ {formatSrcDst(payload.srcHash, payload.dstHash)}
+
+ );
+ };
+
+ const ResponsePayloadSummary: React.FC<{ packet: Packet }> = ({ packet }) => {
+ const payload = packet.decodedPayload as ResponsePayload;
+ const dec = packet.decrypted as DecryptedResponse | undefined;
+ if (dec) {
+ return {`Response tag: ${dec.tag}`}
;
+ }
+ return (
+
+ Response:
+ {formatSrcDst(payload.srcHash, payload.dstHash, true)}
+
+ );
+ };
+
+ const AdvertPayloadSummary: React.FC<{ packet: Packet }> = ({ packet }) => {
+ const payload = packet.decodedPayload as AdvertPayload;
+ return (
+
+ {payload.appdata?.name ? payload.appdata.name : bytesToHex(payload.publicKey)}
+ {(payload.appdata?.latitude !== undefined && payload.appdata?.longitude !== undefined) ? (
+
+
+ {`${payload.appdata.latitude.toFixed(6)}, ${payload.appdata.longitude.toFixed(6)}`}
+
+ ) : (
+
+
+ No location
+
+ )}
+
+ );
+ };
+
+ const PathPayloadSummary: React.FC<{ packet: Packet }> = ({ packet }) => {
+ const payload = packet.decodedPayload as PathPayload;
+ const dec = packet.decrypted as DecryptedPath | undefined;
+ if (dec) {
+ return (
+
+
{`Path (${dec.path.length} hops)`}
+
Path
;
+ };
+
+ const TracePayloadSummary: React.FC<{ packet: Packet }> = ({ packet }) => {
+ const payload = packet.decodedPayload as TracePayload;
+ const nodesBuf = payload.nodes ?? new Uint8Array();
+ const nodes: { id: string; snr: number }[] = [];
+ for (let offset = 0; offset + 1 < nodesBuf.length; offset += 2) {
+ const nodeId = nodesBuf[offset].toString(16).padStart(2, '0');
+ const snr = new Int8Array(nodesBuf.buffer, nodesBuf.byteOffset + offset + 1, 1)[0];
+ nodes.push({ id: nodeId, snr: snr / 4.0}); // SNR is encoded as 1/4 dB steps
+ }
+
+ return (
+
+ {nodes.map((n, i) => (
+
+
+ {`${n.id !== '00' ? n.id : 'origin'} (${n.snr}dB)`}
+
+ {i < nodes.length - 1 && }
+
+ ))}
+
{`Multipart (${payload.data?.length ?? 0} bytes)`}
;
+ };
+
+ const ControlPayloadSummary: React.FC<{ packet: Packet }> = ({ packet }) => {
+ const payload = packet.decodedPayload as ControlPayload;
+ return {`Control flags: 0x${payload.flags.toString(16)}`}
;
+ };
+
+ const AckPayloadSummary: React.FC<{ packet: Packet }> = ({ packet }) => {
+ const payload = packet.decodedPayload as AckPayload;
+ return (
+
+ Acknowledgement: {bytesToHex(payload.checksum)}
+
+ );
+ };
+
+ const GroupDataPayloadSummary: React.FC<{ packet: Packet }> = ({ packet }) => {
+ const payload = packet.decodedPayload as GroupDataPayload;
+ return Encrypted group datagram {`channel: #${payload.channelHash}`}
;
+ };
+
+ const AnonReqPayloadSummary: React.FC<{ packet: Packet }> = ({ packet }) => {
+ const payload = packet.decodedPayload as AnonReqPayload;
+ return (
+
+ Anonymous request to:
+ {payload.dstHash}
+
+ );
+ };
+
+ const RawCustomPayloadSummary: React.FC<{ packet: Packet }> = ({ packet }) => {
+ const payload = packet.decodedPayload as RawCustomPayload;
+ return {`Raw custom payload (${payload.data?.length ?? 0} bytes)`}
;
+ };
+
+ const renderPayloadSummary = (packet: Packet): React.ReactNode => {
+ if (typeof packet.decodedPayload !== 'undefined') {
+ switch (packet.payloadType) {
+ case PayloadType.GROUP_TEXT:
+ return ;
+ case PayloadType.TEXT:
+ return ;
+ case PayloadType.REQUEST:
+ return ;
+ case PayloadType.RESPONSE:
+ return ;
+ case PayloadType.ADVERT:
+ return ;
+ case PayloadType.PATH:
+ return ;
+ case PayloadType.TRACE:
+ return ;
+ case PayloadType.MULTIPART:
+ return ;
+ case PayloadType.CONTROL:
+ return ;
+ case PayloadType.ACK:
+ return ;
+ case PayloadType.GROUP_DATA:
+ return ;
+ case PayloadType.ANON_REQ:
+ return ;
+ case PayloadType.RAW_CUSTOM:
+ return ;
+ }
+ }
+ const hex = bytesToHex(packet.payload ?? new Uint8Array());
+ return {hex.length > 48 ? `${hex.slice(0, 48)}…` : hex};
+ };
return (
<>
{groupedPackets.map((group) => {
@@ -98,14 +347,14 @@ const MeshCorePacketRows: React.FC = ({
if (pathA !== pathB) {
return pathA - pathB;
}
- return b.timestamp.getTime() - a.timestamp.getTime();
+ return b.receivedAt.getTime() - a.receivedAt.getTime();
});
return (
onSelect(packet)}
>
|
@@ -123,42 +372,49 @@ const MeshCorePacketRows: React.FC = ({
)}
|
-
- {packet.timestamp.toLocaleTimeString()}
+ |
+ {packet.receivedAt.toLocaleTimeString()}
{hasDuplicates && (
{' '}×{group.packets.length}
)}
|
- {packet.snr !== undefined ? packet.snr.toFixed(1) : '-'} dB |
+
+ {packet.snr !== undefined && packet.snr !== null ? packet.snr.toFixed(0) + 'dB' : '-'}
+ |
-
+
+ |
+
+
+ {packet.hash()}
+
|
|
- {packet.payloadSummary} |
+ {renderPayloadSummary(packet)} |
{isExpanded && expandedPackets.map((duplicatePacket, index) => (
onSelect(duplicatePacket)}
>
|
- {duplicatePacket.timestamp.toLocaleTimeString()} |
+ {duplicatePacket.receivedAt.toLocaleTimeString()} |
|
|
- {duplicatePacket.snr !== undefined ? duplicatePacket.snr.toFixed(1) : '-'} dB |
+
+
+ |
{getPathInfo(duplicatePacket).prefixes}
|
diff --git a/ui/src/pages/meshcore/MeshCorePacketTable.tsx b/ui/src/pages/meshcore/MeshCorePacketTable.tsx
index 641026c..0486f61 100644
--- a/ui/src/pages/meshcore/MeshCorePacketTable.tsx
+++ b/ui/src/pages/meshcore/MeshCorePacketTable.tsx
@@ -9,7 +9,6 @@ import StreamStatus from '../../components/StreamStatus';
import KeyboardShortcutsModal from '../../components/KeyboardShortcutsModal';
import { useKeyboardListNavigation } from '../../hooks/useKeyboardListNavigation';
import { useRadiosByProtocol } from '../../contexts/RadiosContext';
-import type { MeshCorePacketRecord } from './MeshCoreContext';
import {
payloadUrlByValue,
payloadValueByUrl,
@@ -18,11 +17,12 @@ import {
} from './MeshCoreData';
import MeshCorePacketFilters from './MeshCorePacketFilters';
import MeshCorePacketRows, { type MeshCorePacketGroup } from './MeshCorePacketRows';
+import type { Packet } from '../../protocols/meshcore';
interface MeshCorePacketTableProps {
- packets: MeshCorePacketRecord[];
+ packets: Packet[];
selectedHash: string | null;
- onSelect: (packet: MeshCorePacketRecord) => void;
+ onSelect: (packet: Packet) => void;
onClearSelection: () => void;
streamReady: boolean;
}
@@ -94,30 +94,34 @@ const MeshCorePacketTable: React.FC = ({ packets, sele
}, [packets, radios]);
const groupedPackets = useMemo((): MeshCorePacketGroup[] => {
- const groups = new Map();
+ const groups = new Map();
- packets.forEach((packet) => {
- if (filterPayloadTypes.size > 0 && !filterPayloadTypes.has(packet.payloadType)) return;
- if (filterRouteTypes.size > 0 && !filterRouteTypes.has(packet.routeType)) return;
- if (filterRadios.size > 0 && packet.radioName && !filterRadios.has(packet.radioName)) return;
+ for (const packet of packets) {
+ if (filterPayloadTypes.size > 0 && !filterPayloadTypes.has(packet.payloadType)) continue;
+ if (filterRouteTypes.size > 0 && !filterRouteTypes.has(packet.routeType)) continue;
+ if (filterRadios.size > 0 && packet.radioName && !filterRadios.has(packet.radioName)) continue;
- const existing = groups.get(packet.hash);
+ const hash = packet.hash();
+ const existing = groups.get(hash);
if (existing) {
existing.push(packet);
} else {
- groups.set(packet.hash, [packet]);
+ groups.set(hash, [packet]);
}
- });
+ }
return Array.from(groups.entries())
.map(([hash, grouped]) => ({
hash,
- packets: grouped.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime()),
+ packets: grouped.sort((a, b) => b.receivedAt.getTime() - a.receivedAt.getTime()),
+ leastRecent: grouped.reduce((oldest, packet) => (
+ packet.receivedAt < oldest.receivedAt ? packet : oldest
+ )),
mostRecent: grouped.reduce((latest, packet) => (
- packet.timestamp > latest.timestamp ? packet : latest
+ packet.receivedAt > latest.receivedAt ? packet : latest
)),
}))
- .sort((a, b) => b.mostRecent.timestamp.getTime() - a.mostRecent.timestamp.getTime());
+ .sort((a, b) => b.leastRecent.receivedAt.getTime() - a.leastRecent.receivedAt.getTime());
}, [packets, filterPayloadTypes, filterRouteTypes, filterRadios]);
const handlePayloadTypeToggle = (value: number, isChecked: boolean) => {
@@ -165,7 +169,7 @@ const MeshCorePacketTable: React.FC = ({ packets, sele
if (!selectedHash) {
return null;
}
- const index = navigablePackets.findIndex((packet) => packet.hash === selectedHash);
+ const index = navigablePackets.findIndex((packet) => packet.hash() === selectedHash);
return index >= 0 ? index : null;
}, [navigablePackets, selectedHash]);
@@ -212,11 +216,12 @@ const MeshCorePacketTable: React.FC = ({ packets, sele
- |
- Time |
- SNR |
- Hash |
- Type |
+ |
+ Time |
+ SNR |
+ Quality |
+ Hash |
+ Type |
Info |
diff --git a/ui/src/pages/meshcore/MeshCorePacketsView.tsx b/ui/src/pages/meshcore/MeshCorePacketsView.tsx
index e0acab1..15d6d18 100644
--- a/ui/src/pages/meshcore/MeshCorePacketsView.tsx
+++ b/ui/src/pages/meshcore/MeshCorePacketsView.tsx
@@ -13,7 +13,7 @@ const MeshCorePacketsView: React.FC = () => {
if (!selectedHash) {
return null;
}
- return packets.find((packet) => packet.hash === selectedHash) ?? null;
+ return packets.find((packet) => packet.hash() === selectedHash) ?? null;
}, [packets, selectedHash]);
return (
@@ -23,7 +23,7 @@ const MeshCorePacketsView: React.FC = () => {
setSelectedHash(packet.hash)}
+ onSelect={(packet) => setSelectedHash(packet.hash())}
onClearSelection={() => setSelectedHash(null)}
streamReady={streamReady}
/>
diff --git a/ui/src/pages/meshcore/MeshCoreStatsView.tsx b/ui/src/pages/meshcore/MeshCoreStatsView.tsx
new file mode 100644
index 0000000..0f46dba
--- /dev/null
+++ b/ui/src/pages/meshcore/MeshCoreStatsView.tsx
@@ -0,0 +1,596 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Alert, ButtonGroup, Card, Form, ListGroup, Spinner } from 'react-bootstrap';
+import { ChartContainer } from '@mui/x-charts/ChartContainer';
+import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { BarChart, BarPlot } from '@mui/x-charts/BarChart';
+import { LineChart, LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
+
+import API from '../../services/API';
+import MeshCoreServiceImpl, {
+ type MeshCoreOriginStats,
+ type MeshCorePacketStats,
+} from '../../services/MeshCoreService';
+import { PayloadType } from '../../types/protocol/meshcore.types';
+import VerticalSplit from '../../components/VerticalSplit';
+
+const meshCoreService = new MeshCoreServiceImpl(API);
+
+type MeshCoreStatsView = 'daily' | 'weekly' | 'monthly';
+
+const viewLabelByKey: Record = {
+ daily: 'Daily',
+ weekly: 'Weekly',
+ monthly: 'Monthly',
+};
+
+const descriptionByView: Record = {
+ daily: 'Last 24 hours in 30-minute buckets.',
+ weekly: 'Last 7 days in 4-hour buckets.',
+ monthly: 'Last 30 days in 1-day buckets.',
+};
+
+const originPalette = [
+ '#FF4D4F',
+ '#40A9FF',
+ '#73D13D',
+ '#9254DE',
+ '#13C2C2',
+ '#EB2F96',
+ '#A0D911',
+ '#FA8C16',
+ '#2F54EB',
+ '#36CFC9',
+ '#F759AB',
+ '#FFC53D',
+ '#B37FEB',
+ '#5CDBD3',
+ '#FF7A45',
+];
+
+const payloadTypeNameByCode: Record = Object.entries(PayloadType).reduce(
+ (accumulator, [name, value]) => {
+ accumulator[String(value)] = name.toLowerCase().replace(/_/g, ' ');
+ return accumulator;
+ },
+ {} as Record
+);
+
+const darkenHexColor = (hexColor: string, factor = 0.72): string => {
+ const normalized = hexColor.replace('#', '');
+ const toComponent = (start: number) => Number.parseInt(normalized.slice(start, start + 2), 16);
+
+ const red = Math.max(0, Math.min(255, Math.round(toComponent(0) * factor)));
+ const green = Math.max(0, Math.min(255, Math.round(toComponent(2) * factor)));
+ const blue = Math.max(0, Math.min(255, Math.round(toComponent(4) * factor)));
+
+ const toHex = (value: number) => value.toString(16).padStart(2, '0');
+ return `#${toHex(red)}${toHex(green)}${toHex(blue)}`;
+};
+
+const MeshCoreStatsView: React.FC = () => {
+ const [view, setView] = useState('daily');
+ const [originStats, setOriginStats] = useState(null);
+ const [packetStats, setPacketStats] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ let isMounted = true;
+
+ const load = async () => {
+ setIsLoading(true);
+ setError(null);
+
+ try {
+ const [originResponse, packetResponse] = await Promise.all([
+ meshCoreService.fetchOriginStats(view),
+ meshCoreService.fetchPacketStats(view),
+ ]);
+ if (!isMounted) {
+ return;
+ }
+ setOriginStats(originResponse);
+ setPacketStats(packetResponse);
+ } catch (err) {
+ if (!isMounted) {
+ return;
+ }
+ setError(err instanceof Error ? err.message : 'Failed to load origin statistics');
+ } finally {
+ if (isMounted) {
+ setIsLoading(false);
+ }
+ }
+ };
+
+ void load();
+
+ return () => {
+ isMounted = false;
+ };
+ }, [view]);
+
+ const xValues = useMemo(() => {
+ if (!originStats) {
+ return [] as number[];
+ }
+
+ return originStats.timestamps;
+ }, [originStats]);
+
+ const formatTimestampLabel = (timestamp: number) => {
+ const dateOptions: Intl.DateTimeFormatOptions =
+ view === 'daily'
+ ? { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }
+ : view === 'weekly'
+ ? { month: 'short', day: 'numeric', hour: '2-digit' }
+ : { month: 'short', day: 'numeric' };
+
+ return new Date(timestamp * 1000).toLocaleString(undefined, dateOptions);
+ };
+
+ const origins = useMemo(() => {
+ if (!originStats) {
+ return [] as string[];
+ }
+ return Object.keys(originStats.signal).sort((a, b) => a.localeCompare(b));
+ }, [originStats]);
+
+ const originColorMap = useMemo(() => {
+ const colorMap: Record = {};
+ origins.forEach((origin, index) => {
+ const snrColor = originPalette[index % originPalette.length];
+ colorMap[origin] = {
+ snr: snrColor,
+ rssi: darkenHexColor(snrColor),
+ };
+ });
+ return colorMap;
+ }, [origins]);
+
+ const series = useMemo(() => {
+ if (!originStats) {
+ return [];
+ }
+
+ return origins
+ .map((origin) => ({
+ label: origin || 'unknown',
+ data: originStats.counts[origin],
+ stack: 'count',
+ color: originColorMap[origin]?.snr,
+ }));
+ }, [originStats, origins, originColorMap]);
+
+ const signalSeries = useMemo(() => {
+ if (!originStats) {
+ return [];
+ }
+
+ const entries = origins.map((origin) => [origin, originStats.signal[origin]] as const);
+
+ const snrSeries = entries.map(([origin, data]) => ({
+ label: `SNR · ${origin || 'unknown'}`,
+ data: data.snr,
+ showMark: false,
+ yAxisId: 'snr',
+ color: originColorMap[origin]?.snr,
+ }));
+
+ const rssiSeries = entries.map(([origin, data]) => ({
+ label: `RSSI · ${origin || 'unknown'}`,
+ data: data.rssi,
+ showMark: false,
+ yAxisId: 'rssi',
+ color: originColorMap[origin]?.rssi,
+ }));
+
+ return [...snrSeries, ...rssiSeries];
+ }, [originStats, origins, originColorMap]);
+
+ const totalPackets = useMemo(() => {
+ if (!originStats) {
+ return 0;
+ }
+
+ return Object.values(originStats.counts).reduce((sum, entry) => {
+ return sum + entry.reduce((innerSum, value) => innerSum + value, 0);
+ }, 0);
+ }, [originStats]);
+
+ const routingCombinedSeries = useMemo(() => {
+ if (!packetStats) {
+ return [];
+ }
+
+ const showRoutingBarLabels = xValues.length <= 20;
+
+ return [
+ {
+ id: 'routing-flood',
+ type: 'bar' as const,
+ label: 'Flood',
+ data: packetStats.routing.flood,
+ color: '#40A9FF',
+ stack: 'routing',
+ yAxisId: 'routing',
+ barLabel: showRoutingBarLabels ? ('value' as const) : undefined,
+ barLabelPlacement: 'outside' as const,
+ },
+ {
+ id: 'routing-direct',
+ type: 'bar' as const,
+ label: 'Direct',
+ data: packetStats.routing.direct,
+ color: '#73D13D',
+ stack: 'routing',
+ yAxisId: 'routing',
+ barLabel: showRoutingBarLabels ? ('value' as const) : undefined,
+ barLabelPlacement: 'outside' as const,
+ },
+ {
+ id: 'routing-transport',
+ type: 'line' as const,
+ label: 'Transport codes',
+ data: packetStats.routing.transport,
+ color: '#FAAD14',
+ showMark: xValues.length <= 30,
+ yAxisId: 'transport',
+ },
+ ];
+ }, [packetStats, xValues.length]);
+
+ const routingYAxisMax = useMemo(() => {
+ if (!packetStats) {
+ return 10;
+ }
+
+ const maxValue = Math.max(
+ ...packetStats.routing.flood,
+ ...packetStats.routing.direct,
+ 0
+ );
+
+ return Math.max(10, Math.ceil(maxValue * 1.2));
+ }, [packetStats]);
+
+ const transportYAxisMax = useMemo(() => {
+ if (!packetStats) {
+ return 10;
+ }
+
+ const maxValue = Math.max(...packetStats.routing.transport, 0);
+ return Math.max(10, Math.ceil(maxValue * 1.15));
+ }, [packetStats]);
+
+ const xTickStep = view === 'daily' ? 4 : view === 'weekly' ? 3 : 1;
+ const xTickStyle =
+ view === 'monthly'
+ ? { fontSize: 11 }
+ : { angle: -35, textAnchor: 'end' as const, fontSize: 11 };
+
+ const payloadSeries = useMemo(() => {
+ if (!packetStats) {
+ return [];
+ }
+
+ return Object.entries(packetStats.payload)
+ .sort(([a], [b]) => Number(a) - Number(b))
+ .map(([payloadType, data], idx) => ({
+ label: payloadTypeNameByCode[payloadType] ?? `type ${payloadType}`,
+ data,
+ stack: 'payload',
+ color: originPalette[idx % originPalette.length],
+ }));
+ }, [packetStats]);
+
+ return (
+
+ Origin Stats
+
+
+ Time Window
+ setView(event.target.value as MeshCoreStatsView)}
+ aria-label="Select MeshCore origin stats time window"
+ >
+ {(Object.keys(viewLabelByKey) as MeshCoreStatsView[]).map((key) => (
+
+ ))}
+
+
+
+
+
{descriptionByView[view]}
+
Origins: {originStats ? Object.keys(originStats.signal).length : 0}
+
Buckets: {originStats ? originStats.timestamps.length : 0}
+
Total Packets: {totalPackets}
+
+
+ Loading statistics...
+
+ )}
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+ {(Object.keys(viewLabelByKey) as MeshCoreStatsView[]).map((key) => (
+
+ ))}
+
+
+
+ )}
+ right={(
+
+ Origin & Packet Statistics
+
+ {isLoading ? (
+
+
+ Loading chart...
+
+ ) : null}
+
+ {!isLoading && !error && originStats && packetStats && xValues.length > 0 && signalSeries.length > 0 && series.length > 0 ? (
+
+
+
+
Origin Stats
+
+
+
Average Signal Strength (SNR dB / RSSI dBm)
+
+
+ formatTimestampLabel(Number(value)),
+ tickLabelInterval: (_, index) => index % xTickStep === 0,
+ tickLabelStyle: xTickStyle,
+ },
+ ]}
+ yAxis={[
+ {
+ id: 'snr',
+ width: 56,
+ },
+ {
+ id: 'rssi',
+ position: 'right',
+ width: 56,
+ },
+ ]}
+ series={signalSeries}
+ margin={{ top: 20, right: 16, bottom: 70, left: 16 }}
+ />
+
+
+
+
Legend
+
+ {origins.map((origin) => (
+
+ {origin || 'unknown'}
+
+
+ SNR
+
+ RSSI
+
+
+ ))}
+
+
+
+
+
+
+
Packet Count per Origin
+
+
+ formatTimestampLabel(Number(value)),
+ tickLabelInterval: (_, index) => index % xTickStep === 0,
+ tickLabelStyle: xTickStyle,
+ },
+ ]}
+ yAxis={[
+ {
+ id: 'count',
+ width: 56,
+ },
+ {
+ id: 'count-right-spacer',
+ position: 'right',
+ width: 56,
+ },
+ ]}
+ series={series.map((item) => ({ ...item, yAxisId: 'count' }))}
+ margin={{ top: 20, right: 16, bottom: 82, left: 16 }}
+ />
+
+
+
+
Origins
+
+ {origins.map((origin) => (
+
+
+ {origin || 'unknown'}
+
+ ))}
+
+
+
+
+
+
+
+
Packet Stats
+
+
+
Routing Types (Flood/Direct) with Transport Code Usage
+
+
+ formatTimestampLabel(Number(value)),
+ tickLabelInterval: (_, index) => index % xTickStep === 0,
+ tickLabelStyle: xTickStyle,
+ },
+ ]}
+ yAxis={[
+ {
+ id: 'routing',
+ label: 'Packets',
+ min: 0,
+ max: routingYAxisMax,
+ tickNumber: 6,
+ width: 56,
+ },
+ {
+ id: 'transport',
+ label: 'Transport code',
+ position: 'right',
+ min: 0,
+ max: transportYAxisMax,
+ tickNumber: 6,
+ width: 56,
+ },
+ ]}
+ margin={{ top: 20, right: 16, bottom: 82, left: 16 }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
Routing
+
+
+
+ Flood
+
+
+
+ Direct
+
+
+
+ Transport codes
+
+
+
+
+
+
+
+
Payload Types
+
+
+ formatTimestampLabel(Number(value)),
+ tickLabelInterval: (_, index) => index % xTickStep === 0,
+ tickLabelStyle: xTickStyle,
+ },
+ ]}
+ yAxis={[
+ {
+ id: 'payload',
+ width: 56,
+ },
+ {
+ id: 'payload-right-spacer',
+ position: 'right',
+ width: 56,
+ },
+ ]}
+ series={payloadSeries.map((item) => ({ ...item, yAxisId: 'payload' }))}
+ margin={{ top: 20, right: 16, bottom: 82, left: 16 }}
+ />
+
+
+
+
Payload
+
+ {payloadSeries.map((item) => (
+
+
+ {item.label}
+
+ ))}
+
+
+
+
+
+
+
+ No origin statistics available for this time window.
+
+ ) : null}
+
+
+ )}
+ />
+ );
+};
+
+export default MeshCoreStatsView;
diff --git a/ui/src/pages/meshcore/MeshCoreView.tsx b/ui/src/pages/meshcore/MeshCoreView.tsx
new file mode 100644
index 0000000..447d77b
--- /dev/null
+++ b/ui/src/pages/meshcore/MeshCoreView.tsx
@@ -0,0 +1,516 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Alert, Badge, Card, Spinner } from 'react-bootstrap';
+import { useNavigate } from 'react-router';
+
+import { KPICard } from '../../components/protocol/KPICard';
+import { ProtocolHero } from '../../components/protocol/ProtocolHero';
+import { RadioListItem } from '../../components/protocol/RadioListItem';
+import { StatusPill } from '../../components/protocol/StatusPill';
+import { useRadios } from '../../contexts/RadiosContext';
+import API from '../../services/API';
+import '../../styles/ProtocolBriefing.scss';
+import MeshCoreServiceImpl, {
+ type MeshCoreOriginStats,
+ type MeshCorePacketStats,
+} from '../../services/MeshCoreService';
+import { PayloadType } from '../../types/protocol/meshcore.types';
+
+const meshCoreService = new MeshCoreServiceImpl(API);
+
+const payloadTypeNameByCode: Record = Object.entries(PayloadType).reduce(
+ (accumulator, [name, value]) => {
+ accumulator[String(value)] = name.toLowerCase().replace(/_/g, ' ');
+ return accumulator;
+ },
+ {} as Record
+);
+
+const sumSeries = (values: number[]): number => values.reduce((sum, value) => sum + value, 0);
+
+const getSignalHealth = (avgSnr: number): { label: string; tone: 'success' | 'warning' | 'danger' } => {
+ if (avgSnr >= 8) {
+ return { label: 'Strong', tone: 'success' };
+ }
+ if (avgSnr >= 4) {
+ return { label: 'Moderate', tone: 'warning' };
+ }
+ return { label: 'Weak', tone: 'danger' };
+};
+
+const getRoutingBehavior = (floodPercent: number): { label: string; tone: 'success' | 'warning' | 'danger' } => {
+ if (floodPercent <= 45) {
+ return { label: 'Efficient', tone: 'success' };
+ }
+ if (floodPercent <= 70) {
+ return { label: 'Mixed', tone: 'warning' };
+ }
+ return { label: 'Flood-heavy', tone: 'danger' };
+};
+
+const MeshCoreView: React.FC = () => {
+ const navigate = useNavigate();
+ const { radios, loading: radiosLoading, error: radiosError } = useRadios();
+ const [originStats, setOriginStats] = useState(null);
+ const [packetStats, setPacketStats] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ let isMounted = true;
+
+ const load = async () => {
+ setIsLoading(true);
+ setError(null);
+
+ try {
+ const [originResponse, packetResponse] = await Promise.all([
+ meshCoreService.fetchOriginStats('weekly'),
+ meshCoreService.fetchPacketStats('weekly'),
+ ]);
+
+ if (!isMounted) {
+ return;
+ }
+
+ setOriginStats(originResponse);
+ setPacketStats(packetResponse);
+ } catch (err) {
+ if (!isMounted) {
+ return;
+ }
+ setError(err instanceof Error ? err.message : 'Failed to load MeshCore briefing metrics');
+ } finally {
+ if (isMounted) {
+ setIsLoading(false);
+ }
+ }
+ };
+
+ void load();
+
+ return () => {
+ isMounted = false;
+ };
+ }, []);
+
+ const snapshot = useMemo(() => {
+ if (!originStats || !packetStats) {
+ return null;
+ }
+
+ const originNames = Object.keys(originStats.signal);
+ const originsCount = originNames.length;
+
+ let totalPackets = 0;
+ let snrTotal = 0;
+ let rssiTotal = 0;
+ let signalSamples = 0;
+
+ originNames.forEach((origin) => {
+ totalPackets += sumSeries(originStats.counts[origin] ?? []);
+ const signal = originStats.signal[origin];
+ if (!signal) {
+ return;
+ }
+
+ signal.snr.forEach((value) => {
+ snrTotal += value;
+ signalSamples += 1;
+ });
+
+ signal.rssi.forEach((value) => {
+ rssiTotal += value;
+ });
+ });
+
+ const floodTotal = sumSeries(packetStats.routing.flood);
+ const directTotal = sumSeries(packetStats.routing.direct);
+ const routingTotal = floodTotal + directTotal;
+
+ const payloadTotals = Object.entries(packetStats.payload).map(([payloadType, values]) => ({
+ payloadType,
+ total: sumSeries(values),
+ }));
+
+ payloadTotals.sort((left, right) => right.total - left.total);
+
+ const topPayload = payloadTotals[0];
+
+ return {
+ buckets: originStats.timestamps.length,
+ originsCount,
+ totalPackets,
+ avgSnr: signalSamples > 0 ? snrTotal / signalSamples : 0,
+ avgRssi: signalSamples > 0 ? rssiTotal / signalSamples : 0,
+ floodPercent: routingTotal > 0 ? (floodTotal / routingTotal) * 100 : 0,
+ directPercent: routingTotal > 0 ? (directTotal / routingTotal) * 100 : 0,
+ topPayloadName: topPayload
+ ? (payloadTypeNameByCode[topPayload.payloadType] ?? `type ${topPayload.payloadType}`)
+ : 'unknown',
+ topPayloadTotal: topPayload?.total ?? 0,
+ };
+ }, [originStats, packetStats]);
+
+ const signalHealth = snapshot ? getSignalHealth(snapshot.avgSnr) : null;
+ const routingBehavior = snapshot ? getRoutingBehavior(snapshot.floodPercent) : null;
+
+ const meshCoreRadios = useMemo(() => {
+ return radios
+ .filter((radio) => radio.protocol === 'meshcore')
+ .sort((left, right) => {
+ if (left.is_online !== right.is_online) {
+ return left.is_online ? -1 : 1;
+ }
+ return left.name.localeCompare(right.name, undefined, { sensitivity: 'base' });
+ });
+ }, [radios]);
+
+ const meshCoreOnlineCount = meshCoreRadios.filter((radio) => radio.is_online).length;
+
+ const openRadioPackets = (radioName: string) => {
+ navigate(`/meshcore/packets?radios=${encodeURIComponent(radioName)}`);
+ };
+
+ return (
+
+
+
+ MeshCore is a community-first digital mesh for amateur operators: low power, distributed,
+ and resilient when RF conditions are marginal or fixed infrastructure is unavailable.
+
+
+ Under the hood, links run on LoRa physical-layer radios, trading throughput for robust range
+ and better link margin. This page stays practical: path stability, relay pressure, and airtime behavior.
+ A LoRa modulation deep dive can follow later.
+
+
+ }
+ logoSrc="/image/protocol/meshcore.png"
+ logoAlt="MeshCore"
+ logoLabel="MeshCore Protocol"
+ statusPills={
+ !isLoading && !error && snapshot && signalHealth && routingBehavior ? (
+ <>
+
+
+
+ ) : undefined
+ }
+ />
+
+ {isLoading ? (
+
+
+
+ Loading operator briefing…
+
+
+ ) : null}
+
+ {error ? (
+
+ {error}
+
+ ) : null}
+
+ {!isLoading && !error && snapshot ? (
+ <>
+
+
+
+
+ {snapshot.topPayloadName}}
+ description={`${snapshot.topPayloadTotal.toLocaleString()} packets`}
+ />
+
+
+
+
+ Registered MeshCore Radios
+ {meshCoreOnlineCount}/{meshCoreRadios.length} online
+
+
+ {radiosLoading ? (
+
+
+ Loading radio registry…
+
+ ) : null}
+
+ {!radiosLoading && radiosError ? (
+
+ {radiosError}
+
+ ) : null}
+
+ {!radiosLoading && !radiosError && meshCoreRadios.length === 0 ? (
+ No radios registered for MeshCore.
+ ) : null}
+
+ {!radiosLoading && !radiosError && meshCoreRadios.length > 0 ? (
+
+ {meshCoreRadios.map((radio) => (
+
+ ))}
+
+ ) : null}
+
+
+
+
+
+ How to Read This Network
+
+
+ - Origins: quick proxy for station diversity and net activity spread.
+ - SNR/RSSI: track link margin trends and near-term path stability.
+ - Routing mix: flood-heavy windows can indicate higher relay load or weak direct paths.
+ - Payload profile: shows airtime usage pattern (telemetry, chat, or control traffic).
+
+
+
+
+
+ Routing Snapshot
+
+
+ Flood traffic
+ {snapshot.floodPercent.toFixed(1)}%
+
+
+
+
+
+ Direct traffic
+ {snapshot.directPercent.toFixed(1)}%
+
+
+
+
+
+ Quick interpretation: a balanced split usually indicates stable neighborhood reachability and lower relay pressure.
+
+
+
+
+
+
+ LoRa in This Context
+ Regulatory note: check local rules
+
+
+
+
+
Current RF profile
+
+ 868.618 MHz center frequency, LoRa SF8, CR8, and 62.5 kHz bandwidth.
+
+
+
+
What it gives you
+
+ Long reach, better weak-signal decode behavior, and practical operation at low power.
+
+
+
+
Operational tradeoff
+
+ Lower throughput, so routing efficiency and payload discipline matter when airtime is busy.
+
+
+
+
What to monitor first
+
+ Origin diversity, flood/direct split, and sustained SNR/RSSI drift across the window.
+
+
+
+
ISM frequencies and licensing
+
+ The 868 MHz ISM band is generally intended for license-exempt low-power devices, so unlicensed operators can use
+ compliant LoRa equipment on ISM channels where regional rules permit. Amateur-service operation is separate and still
+ requires an amateur radio license, callsign use, and local band-plan compliance.
+
+
+
+
+ MeshCore behaves like a cooperative RF neighborhood. Instead of one fixed path, packets move hop by hop through nearby nodes,
+ and the network converges toward delivery using direct and flood-style forwarding where needed.
+
+
+ In practice, quality is governed by geometry, channel conditions, and airtime pressure. When conditions are favorable,
+ delivery tends to stay direct. When links degrade or neighborhoods become sparse, forwarding expands and repeater participation
+ becomes more visible in routing statistics.
+
+
+ Known MeshCore Node Types
+
+
+
Chat Node
+
General endpoint for operator traffic such as messaging and routine interactive use.
+
+
+
Repeater
+
Coverage extension node that improves neighborhood reachability across RF gaps.
+
+
+
Room Server
+
Service-oriented node used for room/group coordination and shared interaction points.
+
+
+
Sensor
+
Telemetry-focused node optimized for periodic sensing and lightweight data reporting.
+
+
+ Note on data interpretation: Unknown in packet metadata is a temporary decode/classification state,
+ not a real operational node role.
+
+
+ Packet Journey Across RF
+
+ A source node emits a frame into its local neighborhood. Nearby peers evaluate whether the destination is directly reachable;
+ if yes, the packet stays on the shortest practical RF path. If not, forwarding broadens until connectivity is re-established.
+
+
+ Duplicate suppression prevents runaway retransmission. The practical outcome is convergence: multiple candidate paths may be heard,
+ but the network settles on useful delivery paths as conditions evolve.
+
+
+ Reference topology
+
+ {` [Chat Node A] -> [Repeater N] <=> [Repeater S] -> [Chat Node B]
+ | | |
+ [Sensor] [Room Server] [Sensor]
+
+ direct-dominant window => stronger local geometry, lower forwarding pressure
+ flood-dominant window => weaker links / topology transition / denser RF contention`}
+
+
+
+ Operator cue: if flood ratio climbs while SNR trends downward, treat it as a path-quality event first.
+ If payload volume rises while direct ratio remains stable, that usually indicates a traffic-shape shift more than RF degradation.
+
+
+
+
+
+ MeshCore Protocol Layers vs OSI
+
+
+ MeshCore is not a strict seven-layer OSI implementation, but operators can map its behavior to OSI concepts very effectively.
+ This mapping helps explain where RF ends, where forwarding decisions start, and where application payload meaning appears.
+
+
+ A practical way to read the protocol is as a compact four-layer model (Physical, Link, Network, Application)
+ and then map those functions to their nearest OSI equivalents.
+
+
+
+
+
+
MeshCore Layer
+
Physical Layer (LoRa PHY)
+
+
+ RF modulation and airtime profile: 868.618 MHz, SF8, CR8, 62.5 kHz bandwidth.
+
+
OSI: L1 Physical
+
+
+
+
+ Link Layer (local delivery behavior)
+
+
+ Neighbor-to-neighbor frame exchange, retries, and practical channel access constraints on shared RF.
+
+
OSI: L2 Data Link
+
+
+
+
+ Network Layer (mesh routing)
+
+
+ Route selection and forwarding via `DIRECT` / `FLOOD` with transport modes like `TRANSPORT_DIRECT` and `TRANSPORT_FLOOD`.
+
+
OSI: L3 (+ part of L4 semantics)
+
+
+
+
+ Application Layer (message semantics)
+
+
+ Payload types define meaning: `TEXT`, `GROUP_TEXT`, `CONTROL`, `PATH`, `ACK`, `ADVERT`, etc.
+
+
OSI: L7 (with L5/L6-like data handling)
+
+
Concrete OSI-style Examples
+
+
+
Example A · Group chat message
+
+ A `GROUP_TEXT` payload carries user content (OSI L7 meaning), while route type and transport flags determine whether
+ the frame moves directly or via flood-assisted forwarding (OSI L3/L4 behavior over RF).
+
+
+
+
+
Example B · Path visibility
+
+ A path-bearing packet (`PATH`/routing metadata) is primarily network-layer insight (OSI L3 analogue): it explains
+ how the packet traversed the mesh, independent of the user payload meaning.
+
+
+
+
+
Example C · RF degradation event
+
+ If RSSI/SNR drop (OSI L1 symptoms), you often observe increased flood ratio and fewer stable direct paths (OSI L3/L4
+ adaptation). Application traffic still exists, but efficiency and latency profile change.
+
+
+
{brandText}