Telemetry UI

apps/web/package.json

@@ -65,6 +65,7 @@
     "@tanstack/router-cli": "^1.167.18",
     "@tanstack/router-devtools": "^1.167.0",
     "@turf/turf": "^7.3.5",
+    "@types/d3": "^7.4.3",
     "@types/node": "^26.1.0",
     "@types/web-bluetooth": "^0.0.21",
     "base64-js": "^1.5.1",
@@ -73,6 +74,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "crypto-random-string": "^5.0.0",
+    "d3": "^7.9.0",
     "i18next": "^26.3.4",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^4.0.0",

apps/web/src/components/PageComponents/Telemetry/Battery.tsx

@@ -0,0 +1,87 @@
+import { useWaitForConfig } from "@app/core/hooks/useWaitForConfig";
+import {
+  type BluetoothValidation,
+  BluetoothValidationSchema,
+} from "@app/validation/config/bluetooth.ts";
+import {
+  DynamicForm,
+  type DynamicFormFormInit,
+} from "@components/Form/DynamicForm.tsx";
+import { useDevice } from "@core/stores";
+import { Protobuf } from "@meshtastic/sdk";
+import { useConfigEditor, useSignal } from "@meshtastic/sdk-react";
+import { useTranslation } from "react-i18next";
+
+interface BluetoothConfigProps {
+  onFormInit: DynamicFormFormInit<BluetoothValidation>;
+}
+
+const EMPTY_RADIO_SIGNAL = {
+  value: {} as { bluetooth?: Protobuf.Config.Config_BluetoothConfig },
+  peek: () => ({}) as { bluetooth?: Protobuf.Config.Config_BluetoothConfig },
+  subscribe: () => () => {},
+} as const;
+
+export const Bluetooth = ({ onFormInit }: BluetoothConfigProps) => {
+  useWaitForConfig({ configCase: "bluetooth" });
+
+  const { config, getEffectiveConfig } = useDevice();
+  const editor = useConfigEditor();
+  const radio = useSignal(editor?.radio ?? EMPTY_RADIO_SIGNAL);
+  const effective =
+    radio.bluetooth ??
+    (getEffectiveConfig("bluetooth") as
+      | Protobuf.Config.Config_BluetoothConfig
+      | undefined);
+
+  const { t } = useTranslation("config");
+
+  const onSubmit = (data: BluetoothValidation) => {
+    if (!editor) return;
+    editor.setRadioSection(
+      "bluetooth",
+      data as unknown as Protobuf.Config.Config_BluetoothConfig,
+    );
+  };
+
+  return (
+    <DynamicForm<BluetoothValidation>
+      onSubmit={onSubmit}
+      onFormInit={onFormInit}
+      validationSchema={BluetoothValidationSchema}
+      defaultValues={config.bluetooth}
+      values={effective}
+      fieldGroups={[
+        {
+          label: t("bluetooth.bluetoothConfig.label"),
+          description: t("bluetooth.bluetoothConfig.description"),
+          notes: t("bluetooth.note"),
+          fields: [
+            {
+              type: "toggle",
+              name: "enabled",
+              label: t("bluetooth.enabled.label"),
+              description: t("bluetooth.enabled.description"),
+            },
+            {
+              type: "select",
+              name: "mode",
+              label: t("bluetooth.pairingMode.label"),
+              description: t("bluetooth.pairingMode.description"),
+              properties: {
+                enumValue: Protobuf.Config.Config_BluetoothConfig_PairingMode,
+                formatEnumName: true,
+              },
+            },
+            {
+              type: "number",
+              name: "fixedPin",
+              label: t("bluetooth.pin.label"),
+              description: t("bluetooth.pin.description"),
+            },
+          ],
+        },
+      ]}
+    />
+  );
+};

apps/web/src/components/Sidebar.tsx

@@ -25,6 +25,7 @@ import {
   MessageSquareIcon,
   SettingsIcon,
   UsersIcon,
+  ChartNoAxesCombinedIcon,
 } from "lucide-react";
 import type React from "react";
 import { useEffect, useState, useTransition } from "react";
@@ -121,17 +122,26 @@ export const Sidebar = ({ children }: SidebarProps) => {
       page: "messages",
       count: numUnread ? numUnread : undefined,
     },
-    { name: t("navigation.map"), icon: MapIcon, page: "map" },
     {
-      name: t("navigation.settings"),
-      icon: SettingsIcon,
-      page: "settings",
+      name: t("navigation.map"),
+      icon: MapIcon,
+      page: "map",
     },
     {
       name: `${t("navigation.nodes")} (${displayedNodeCount})`,
       icon: UsersIcon,
       page: "nodes",
     },
+    {
+      name: "Telemetry",
+      icon: ChartNoAxesCombinedIcon,
+      page: "telemetry",
+    },
+    {
+      name: t("navigation.settings"),
+      icon: SettingsIcon,
+      page: "settings",
+    },
   ];
 
   return (

apps/web/src/core/connections/nodeMetricsRecorder.ts

@@ -0,0 +1,95 @@
+import { createLogger, type MeshClient } from "@meshtastic/sdk";
+import type {
+  NodeMetricSample,
+  NodeMetricsRetentionPolicy,
+  SqlocalNodeMetricsRepository,
+} from "@meshtastic/sdk-storage-sqlocal/nodeMetrics";
+
+const log = createLogger("nodeMetricsRecorder");
+
+export interface NodeMetricsRecorderOptions {
+  retention?: NodeMetricsRetentionPolicy;
+  /** Run a prune pass after roughly this many appended samples. */
+  pruneEvery?: number;
+}
+
+/**
+ * Records per-node metrics (SNR, hops away, last heard) — the node-level
+ * values shown on the Nodes page that Telemetry packets don't carry — into the
+ * given repository, so the Telemetry page can chart them for every node.
+ *
+ * SNR is sampled from every inbound mesh packet (dense signal history); hops
+ * away / last heard come from NodeInfo broadcasts. Returns a teardown that
+ * detaches the subscriptions.
+ */
+export function attachNodeMetricsRecorder(
+  client: MeshClient,
+  repo: SqlocalNodeMetricsRepository,
+  options: NodeMetricsRecorderOptions = {},
+): () => void {
+  const retention = options.retention;
+  const pruneEvery = options.pruneEvery ?? 128;
+  let sincePrune = 0;
+
+  const record = (samples: NodeMetricSample[]): void => {
+    if (samples.length === 0) return;
+    repo
+      .appendBatch(samples)
+      .then(() => {
+        sincePrune += samples.length;
+        if (retention && sincePrune >= pruneEvery) {
+          sincePrune = 0;
+          return repo.prune(retention);
+        }
+      })
+      .catch((e: unknown) => {
+        log.warn("node metric persist failed", {
+          error: (e as Error)?.message,
+        });
+      });
+  };
+
+  const unsubMesh = client.events.onMeshPacket.subscribe((packet) => {
+    if (!packet.from) return;
+    const time =
+      packet.rxTime > 0 ? new Date(packet.rxTime * 1000) : new Date();
+    if (Number.isFinite(packet.rxSnr)) {
+      record([
+        { nodeNum: packet.from, metric: "snr", time, value: packet.rxSnr },
+      ]);
+    }
+  });
+
+  const unsubNodeInfo = client.events.onNodeInfoPacket.subscribe((info) => {
+    if (!info.num) return;
+    const time =
+      info.lastHeard > 0 ? new Date(info.lastHeard * 1000) : new Date();
+    const samples: NodeMetricSample[] = [];
+    // NodeInfo.snr is 0 when unset; only record a genuine measurement.
+    if (Number.isFinite(info.snr) && info.snr !== 0) {
+      samples.push({ nodeNum: info.num, metric: "snr", time, value: info.snr });
+    }
+    if (typeof info.hopsAway === "number") {
+      samples.push({
+        nodeNum: info.num,
+        metric: "hopsAway",
+        time,
+        value: info.hopsAway,
+      });
+    }
+    if (info.lastHeard > 0) {
+      samples.push({
+        nodeNum: info.num,
+        metric: "lastHeard",
+        time,
+        value: info.lastHeard,
+      });
+    }
+    record(samples);
+  });
+
+  return () => {
+    unsubMesh();
+    unsubNodeInfo();
+  };
+}

apps/web/src/core/connections/sdkClient.ts

@@ -1,12 +1,14 @@
 import { coordinator, getStorageDb } from "@core/sdkStorage.ts";
 import type { ConnectionId } from "@core/stores/deviceStore/types";
-import { createLogger, MeshDevice } from "@meshtastic/sdk";
+import { createLogger, DeviceStatusEnum, MeshDevice } from "@meshtastic/sdk";
 import {
   SqlocalDraftRepository,
   SqlocalMessageRepository,
 } from "@meshtastic/sdk-storage-sqlocal/chat";
 import { SqlocalNodesRepository } from "@meshtastic/sdk-storage-sqlocal/nodes";
 import { SqlocalTelemetryRepository } from "@meshtastic/sdk-storage-sqlocal/telemetry";
+import { SqlocalNodeMetricsRepository } from "@meshtastic/sdk-storage-sqlocal/nodeMetrics";
+import { attachNodeMetricsRecorder } from "./nodeMetricsRecorder.ts";
 import type { TransportHTTP } from "@meshtastic/transport-http";
 import type { TransportWebBluetooth } from "@meshtastic/transport-web-bluetooth";
 import type { TransportWebSerial } from "@meshtastic/transport-web-serial";
@@ -26,6 +28,10 @@ const TELEMETRY_RETENTION = {
   maxPerNode: 500,
   olderThanMs: 1000 * 60 * 60 * 24 * 30,
 } as const;
+const NODE_METRICS_RETENTION = {
+  maxPerMetric: 1000,
+  olderThanMs: 1000 * 60 * 60 * 24 * 30,
+} as const;
 const STORAGE_OPEN_TIMEOUT_MS = 5000;
 
 /**
@@ -45,6 +51,7 @@ export async function buildMeshDevice(
   let draftRepository: SqlocalDraftRepository | undefined;
   let nodesRepository: SqlocalNodesRepository | undefined;
   let telemetryRepository: SqlocalTelemetryRepository | undefined;
+  let nodeMetricsRepository: SqlocalNodeMetricsRepository | undefined;
   try {
     const t0 = Date.now();
     const db = await Promise.race([
@@ -75,6 +82,9 @@ export async function buildMeshDevice(
     telemetryRepository = new SqlocalTelemetryRepository(db, {
       deviceId: connectionId,
     });
+    nodeMetricsRepository = new SqlocalNodeMetricsRepository(db, {
+      deviceId: connectionId,
+    });
     log.debug("buildMeshDevice: repositories opened");
   } catch (err) {
     const e = err as Error;
@@ -87,7 +97,7 @@ export async function buildMeshDevice(
     );
   }
 
-  return new MeshDevice(transport, {
+  const meshDevice = new MeshDevice(transport, {
     configId: deviceId,
     chat:
       chatRepository || draftRepository
@@ -102,4 +112,19 @@ export async function buildMeshDevice(
       ? { repository: telemetryRepository, retention: TELEMETRY_RETENTION }
       : undefined,
   });
+
+  // The node-metrics recorder has no SDK client of its own — it subscribes to
+  // the mesh client's event bus and persists directly. Detached on disconnect.
+  if (nodeMetricsRepository) {
+    const detach = attachNodeMetricsRecorder(
+      meshDevice.meshClient,
+      nodeMetricsRepository,
+      { retention: NODE_METRICS_RETENTION },
+    );
+    meshDevice.meshClient.events.onDeviceStatus.subscribe((status) => {
+      if (status === DeviceStatusEnum.DeviceDisconnected) detach();
+    });
+  }
+
+  return meshDevice;
 }

apps/web/src/core/stores/deviceStore/types.ts

@@ -31,7 +31,13 @@ interface Dialogs {
 
 type DialogVariant = keyof Dialogs;
 
-type Page = "messages" | "map" | "settings" | "channels" | "nodes";
+type Page =
+  | "messages"
+  | "map"
+  | "settings"
+  | "channels"
+  | "nodes"
+  | "telemetry";
 
 export type ConnectionId = number;
 export type ConnectionType = "http" | "bluetooth" | "serial";