Add noise floor visualizer to statistics. Closes #129.

frontend/src/components/ContactInfoPane.tsx

@@ -1,5 +1,15 @@
 import { type ReactNode, useEffect, useState } from 'react';
 import { Ban, Search, Star } from 'lucide-react';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip as RechartsTooltip,
+  ResponsiveContainer,
+  Legend,
+} from 'recharts';
 import { api } from '../api';
 import { formatTime } from '../utils/messageParser';
 import {
@@ -650,20 +660,18 @@ function ActivityChartsSection({ analytics }: { analytics: ContactAnalytics | nu
       {hasHourlyActivity && (
         <div>
           <SectionLabel>Messages Per Hour</SectionLabel>
-          <ChartLegend
-            items={[
-              { label: 'Last 24h', color: '#2563eb' },
-              { label: '7-day avg', color: '#ea580c' },
-              { label: 'All-time avg', color: '#64748b' },
-            ]}
-          />
           <ActivityLineChart
             ariaLabel="Messages per hour"
             points={analytics.hourly_activity}
             series={[
-              { key: 'last_24h_count', color: '#2563eb' },
-              { key: 'last_week_average', color: '#ea580c' },
-              { key: 'all_time_average', color: '#64748b' },
+              { key: 'last_24h_count', color: '#2563eb', label: 'Last 24h' },
+              { key: 'last_week_average', color: '#ea580c', label: '7-day avg' },
+              { key: 'all_time_average', color: '#64748b', label: 'All-time avg' },
+            ]}
+            legendItems={[
+              { label: 'Last 24h', color: '#2563eb' },
+              { label: '7-day avg', color: '#ea580c' },
+              { label: 'All-time avg', color: '#64748b' },
             ]}
             valueFormatter={(value) => value.toFixed(value % 1 === 0 ? 0 : 1)}
             tickFormatter={(bucket) =>
@@ -683,7 +691,7 @@ function ActivityChartsSection({ analytics }: { analytics: ContactAnalytics | nu
           <ActivityLineChart
             ariaLabel="Messages per week"
             points={analytics.weekly_activity}
-            series={[{ key: 'message_count', color: '#16a34a' }]}
+            series={[{ key: 'message_count', color: '#16a34a', label: 'Messages' }]}
             valueFormatter={(value) => value.toFixed(0)}
             tickFormatter={(bucket) =>
               new Date(bucket.bucket_start * 1000).toLocaleDateString([], {
@@ -705,133 +713,115 @@ function ActivityChartsSection({ analytics }: { analytics: ContactAnalytics | nu
   );
 }
 
-function ChartLegend({ items }: { items: Array<{ label: string; color: string }> }) {
-  return (
-    <div className="flex flex-wrap gap-x-3 gap-y-1 mb-2 text-[11px] text-muted-foreground">
-      {items.map((item) => (
-        <span key={item.label} className="inline-flex items-center gap-1.5">
-          <span
-            className="inline-block h-2 w-2 rounded-full"
-            style={{ backgroundColor: item.color }}
-            aria-hidden="true"
-          />
-          {item.label}
-        </span>
-      ))}
-    </div>
-  );
-}
+const TOOLTIP_STYLE = {
+  contentStyle: {
+    backgroundColor: 'hsl(var(--popover))',
+    border: '1px solid hsl(var(--border))',
+    borderRadius: '6px',
+    fontSize: '11px',
+    color: 'hsl(var(--popover-foreground))',
+  },
+  itemStyle: { color: 'hsl(var(--popover-foreground))' },
+  labelStyle: { color: 'hsl(var(--muted-foreground))' },
+} as const;
 
 function ActivityLineChart<T extends ContactAnalyticsHourlyBucket | ContactAnalyticsWeeklyBucket>({
   ariaLabel,
   points,
   series,
+  legendItems,
   tickFormatter,
   valueFormatter,
 }: {
   ariaLabel: string;
   points: T[];
-  series: Array<{ key: keyof T; color: string }>;
+  series: Array<{ key: keyof T; color: string; label?: string }>;
+  legendItems?: Array<{ label: string; color: string }>;
   tickFormatter: (point: T) => string;
   valueFormatter: (value: number) => string;
 }) {
-  const width = 320;
-  const height = 132;
-  const padding = { top: 8, right: 8, bottom: 24, left: 32 };
-  const plotWidth = width - padding.left - padding.right;
-  const plotHeight = height - padding.top - padding.bottom;
-  const allValues = points.flatMap((point) =>
-    series.map((entry) => {
-      const value = point[entry.key];
-      return typeof value === 'number' ? value : 0;
-    })
-  );
-  const maxValue = Math.max(1, ...allValues);
-  const tickIndices = Array.from(
-    new Set([
-      0,
-      Math.floor((points.length - 1) / 3),
-      Math.floor(((points.length - 1) * 2) / 3),
-      points.length - 1,
-    ])
-  );
+  const data = points.map((point, i) => {
+    const entry: Record<string, string | number> = { idx: i, tick: tickFormatter(point) };
+    for (const s of series) {
+      const raw = point[s.key];
+      entry[String(s.key)] = typeof raw === 'number' ? raw : 0;
+    }
+    return entry;
+  });
 
-  const buildPolyline = (key: keyof T) =>
-    points
-      .map((point, index) => {
-        const rawValue = point[key];
-        const value = typeof rawValue === 'number' ? rawValue : 0;
-        const x =
-          padding.left + (points.length === 1 ? 0 : (index / (points.length - 1)) * plotWidth);
-        const y = padding.top + plotHeight - (value / maxValue) * plotHeight;
-        return `${x},${y}`;
-      })
-      .join(' ');
+  const tickCount = Math.min(5, points.length);
+  const tickIndices: number[] = [];
+  if (points.length > 1) {
+    for (let i = 0; i < tickCount; i++) {
+      tickIndices.push(Math.round((i / (tickCount - 1)) * (points.length - 1)));
+    }
+  }
 
   return (
-    <div>
-      <svg
-        viewBox={`0 0 ${width} ${height}`}
-        className="w-full h-auto"
-        role="img"
-        aria-label={ariaLabel}
-      >
-        {[0, 0.5, 1].map((ratio) => {
-          const y = padding.top + plotHeight - ratio * plotHeight;
-          const value = maxValue * ratio;
-          return (
-            <g key={ratio}>
-              <line
-                x1={padding.left}
-                x2={width - padding.right}
-                y1={y}
-                y2={y}
-                stroke="hsl(var(--border))"
-                strokeWidth="1"
-              />
-              <text
-                x={padding.left - 6}
-                y={y + 4}
-                fontSize="10"
-                textAnchor="end"
-                fill="hsl(var(--muted-foreground))"
-              >
-                {valueFormatter(value)}
-              </text>
-            </g>
-          );
-        })}
-
-        {series.map((entry) => (
-          <polyline
-            key={String(entry.key)}
-            fill="none"
-            stroke={entry.color}
-            strokeWidth="2"
-            strokeLinejoin="round"
-            strokeLinecap="round"
-            points={buildPolyline(entry.key)}
+    <div role="img" aria-label={ariaLabel}>
+      <ResponsiveContainer width="100%" height={140}>
+        <LineChart data={data} margin={{ top: 4, right: 4, bottom: 0, left: -16 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" vertical={false} />
+          <XAxis
+            dataKey="idx"
+            type="number"
+            domain={[0, Math.max(1, points.length - 1)]}
+            tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }}
+            tickLine={false}
+            axisLine={false}
+            ticks={tickIndices}
+            tickFormatter={(idx) => String(data[idx]?.tick ?? '')}
           />
-        ))}
-
-        {tickIndices.map((index) => {
-          const point = points[index];
-          const x =
-            padding.left + (points.length === 1 ? 0 : (index / (points.length - 1)) * plotWidth);
-          return (
-            <text
-              key={`${ariaLabel}-${point.bucket_start}`}
-              x={x}
-              y={height - 6}
-              fontSize="10"
-              textAnchor={index === 0 ? 'start' : index === points.length - 1 ? 'end' : 'middle'}
-              fill="hsl(var(--muted-foreground))"
-            >
-              {tickFormatter(point)}
-            </text>
-          );
-        })}
-      </svg>
+          <YAxis
+            tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }}
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={(v) => valueFormatter(v)}
+            width={40}
+          />
+          <RechartsTooltip
+            {...TOOLTIP_STYLE}
+            cursor={{
+              stroke: 'hsl(var(--muted-foreground))',
+              strokeWidth: 1,
+              strokeDasharray: '3 3',
+            }}
+            labelFormatter={(idx) => String(data[Number(idx)]?.tick ?? '')}
+            formatter={(value, name) => {
+              const match = series.find((s) => String(s.key) === name);
+              return [valueFormatter(Number(value)), match?.label ?? String(name)];
+            }}
+          />
+          {legendItems && (
+            <Legend
+              content={() => (
+                <div className="flex flex-wrap justify-center gap-x-3 gap-y-1 mt-1 text-[11px] text-muted-foreground">
+                  {legendItems.map((item) => (
+                    <span key={item.label} className="inline-flex items-center gap-1.5">
+                      <span
+                        className="inline-block h-2 w-2 rounded-full"
+                        style={{ backgroundColor: item.color }}
+                      />
+                      {item.label}
+                    </span>
+                  ))}
+                </div>
+              )}
+            />
+          )}
+          {series.map((entry) => (
+            <Line
+              key={String(entry.key)}
+              type="linear"
+              dataKey={String(entry.key)}
+              stroke={entry.color}
+              strokeWidth={1.5}
+              dot={false}
+              activeDot={{ r: 4, strokeWidth: 2, stroke: 'hsl(var(--popover))' }}
+            />
+          ))}
+        </LineChart>
+      </ResponsiveContainer>
     </div>
   );
 }

frontend/src/components/RawPacketFeedView.tsx

@@ -1,5 +1,15 @@
 import { useEffect, useMemo, useState } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip as RechartsTooltip,
+  ResponsiveContainer,
+  Cell,
+} from 'recharts';
 
 import { RawPacketList } from './RawPacketList';
 import { RawPacketInspectorDialog } from './RawPacketDetailModal';
@@ -24,6 +34,18 @@ interface RawPacketFeedViewProps {
   channels: Channel[];
 }
 
+const TOOLTIP_STYLE = {
+  contentStyle: {
+    backgroundColor: 'hsl(var(--popover))',
+    border: '1px solid hsl(var(--border))',
+    borderRadius: '6px',
+    fontSize: '11px',
+    color: 'hsl(var(--popover-foreground))',
+  },
+  itemStyle: { color: 'hsl(var(--popover-foreground))' },
+  labelStyle: { color: 'hsl(var(--muted-foreground))' },
+} as const;
+
 const WINDOW_LABELS: Record<RawPacketStatsWindow, string> = {
   '1m': '1 min',
   '5m': '5 min',
@@ -32,13 +54,7 @@ const WINDOW_LABELS: Record<RawPacketStatsWindow, string> = {
   session: 'Session',
 };
 
-const TIMELINE_COLORS = [
-  'bg-sky-500/80',
-  'bg-emerald-500/80',
-  'bg-amber-500/80',
-  'bg-rose-500/80',
-  'bg-violet-500/80',
-];
+const TIMELINE_FILL_COLORS = ['#0ea5e9', '#10b981', '#f59e0b', '#f43f5e', '#8b5cf6'];
 
 function formatTimestamp(timestampMs: number): string {
   return new Date(timestampMs).toLocaleString([], {
@@ -220,7 +236,13 @@ function RankedBars({
   emptyLabel: string;
   formatter?: (item: RankedPacketStat) => string;
 }) {
-  const maxCount = Math.max(...items.map((item) => item.count), 1);
+  const data = items.map((item) => ({
+    name: item.label,
+    value: item.count,
+    detail: formatter
+      ? formatter(item)
+      : `${item.count.toLocaleString()} · ${formatPercent(item.share)}`,
+  }));
 
   return (
     <section className="mb-4 break-inside-avoid rounded-lg border border-border/70 bg-card/70 p-3">
@@ -228,25 +250,36 @@ function RankedBars({
       {items.length === 0 ? (
         <p className="mt-3 text-sm text-muted-foreground">{emptyLabel}</p>
       ) : (
-        <div className="mt-3 space-y-2">
-          {items.map((item) => (
-            <div key={item.label}>
-              <div className="mb-1 flex items-center justify-between gap-3 text-xs">
-                <span className="truncate text-foreground">{item.label}</span>
-                <span className="shrink-0 tabular-nums text-muted-foreground">
-                  {formatter
-                    ? formatter(item)
-                    : `${item.count.toLocaleString()} · ${formatPercent(item.share)}`}
-                </span>
-              </div>
-              <div className="h-2 overflow-hidden rounded-full bg-muted">
-                <div
-                  className="h-full rounded-full bg-primary/80"
-                  style={{ width: `${(item.count / maxCount) * 100}%` }}
-                />
-              </div>
-            </div>
-          ))}
+        <div className="mt-2">
+          <ResponsiveContainer width="100%" height={items.length * 28 + 8}>
+            <BarChart
+              data={data}
+              layout="vertical"
+              margin={{ top: 0, right: 4, bottom: 0, left: 0 }}
+              barCategoryGap="20%"
+            >
+              <XAxis type="number" hide />
+              <YAxis
+                type="category"
+                dataKey="name"
+                tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
+                tickLine={false}
+                axisLine={false}
+                width={80}
+              />
+              <RechartsTooltip
+                {...TOOLTIP_STYLE}
+                cursor={{ fill: 'hsl(var(--muted))', opacity: 0.5 }}
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                formatter={(_v: any, _n: any, props: any) => [props.payload.detail, null]}
+              />
+              <Bar dataKey="value" radius={[0, 4, 4, 0]} maxBarSize={16}>
+                {data.map((_, i) => (
+                  <Cell key={i} fill={TIMELINE_FILL_COLORS[i % TIMELINE_FILL_COLORS.length]} />
+                ))}
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
         </div>
       )}
     </section>
@@ -320,53 +353,66 @@ function NeighborList({
 }
 
 function TimelineChart({ bins }: { bins: PacketTimelineBin[] }) {
-  const maxTotal = Math.max(...bins.map((bin) => bin.total), 1);
   const typeOrder = Array.from(new Set(bins.flatMap((bin) => Object.keys(bin.countsByType)))).slice(
     0,
-    TIMELINE_COLORS.length
+    TIMELINE_FILL_COLORS.length
   );
 
+  const data = bins.map((bin) => {
+    const entry: Record<string, string | number> = { label: bin.label };
+    for (const type of typeOrder) {
+      entry[type] = bin.countsByType[type] ?? 0;
+    }
+    return entry;
+  });
+
   return (
     <section className="mb-4 break-inside-avoid rounded-lg border border-border/70 bg-card/70 p-3">
       <div className="flex items-center justify-between gap-3">
         <h3 className="text-sm font-semibold text-foreground">Traffic Timeline</h3>
         <div className="flex flex-wrap justify-end gap-2 text-[11px] text-muted-foreground">
-          {typeOrder.map((type, index) => (
+          {typeOrder.map((type, i) => (
             <span key={type} className="inline-flex items-center gap-1">
-              <span className={cn('h-2 w-2 rounded-full', TIMELINE_COLORS[index])} />
+              <span
+                className="h-2 w-2 rounded-full"
+                style={{ backgroundColor: TIMELINE_FILL_COLORS[i] }}
+              />
               <span>{type}</span>
             </span>
           ))}
         </div>
       </div>
-
-      <div className="mt-3 flex items-start gap-1">
-        {bins.map((bin, index) => (
-          <div
-            key={`${bin.label}-${index}`}
-            className="flex min-w-0 flex-1 flex-col items-center gap-1"
-          >
-            <div className="flex h-24 w-full items-end overflow-hidden rounded-sm bg-muted/60">
-              <div className="flex h-full w-full flex-col justify-end">
-                {typeOrder.map((type, index) => {
-                  const count = bin.countsByType[type] ?? 0;
-                  if (count === 0) return null;
-                  return (
-                    <div
-                      key={type}
-                      className={cn('w-full', TIMELINE_COLORS[index])}
-                      style={{
-                        height: `${(count / maxTotal) * 100}%`,
-                      }}
-                      title={`${bin.label}: ${type} ${count.toLocaleString()}`}
-                    />
-                  );
-                })}
-              </div>
-            </div>
-            <div className="text-[10px] text-muted-foreground">{bin.label}</div>
-          </div>
-        ))}
+      <div className="mt-2">
+        <ResponsiveContainer width="100%" height={110}>
+          <BarChart data={data} margin={{ top: 4, right: 0, bottom: 0, left: -24 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" vertical={false} />
+            <XAxis
+              dataKey="label"
+              tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }}
+              tickLine={false}
+              axisLine={false}
+            />
+            <YAxis
+              tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }}
+              tickLine={false}
+              axisLine={false}
+              allowDecimals={false}
+            />
+            <RechartsTooltip
+              {...TOOLTIP_STYLE}
+              cursor={{ fill: 'hsl(var(--muted))', opacity: 0.5 }}
+            />
+            {typeOrder.map((type, i) => (
+              <Bar
+                key={type}
+                dataKey={type}
+                stackId="packets"
+                fill={TIMELINE_FILL_COLORS[i]}
+                radius={i === typeOrder.length - 1 ? [2, 2, 0, 0] : undefined}
+              />
+            ))}
+          </BarChart>
+        </ResponsiveContainer>
       </div>
     </section>
   );

frontend/src/components/settings/SettingsStatisticsSection.tsx

@@ -1,4 +1,16 @@
 import { useState, useEffect } from 'react';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip as RechartsTooltip,
+  ResponsiveContainer,
+  AreaChart,
+  Area,
+  Cell,
+} from 'recharts';
 import { Separator } from '../ui/separator';
 import { api } from '../../api';
 import type { StatisticsResponse } from '../../types';
@@ -7,6 +19,94 @@ function formatPercent(value: number): string {
   return `${value.toFixed(1)}%`;
 }
 
+const CHANNEL_BAR_COLORS = ['#0ea5e9', '#10b981', '#f59e0b', '#f43f5e', '#8b5cf6'];
+
+const TOOLTIP_STYLE = {
+  contentStyle: {
+    backgroundColor: 'hsl(var(--popover))',
+    border: '1px solid hsl(var(--border))',
+    borderRadius: '6px',
+    fontSize: '11px',
+    color: 'hsl(var(--popover-foreground))',
+  },
+  itemStyle: { color: 'hsl(var(--popover-foreground))' },
+  labelStyle: { color: 'hsl(var(--muted-foreground))' },
+} as const;
+
+function formatTime(ts: number): string {
+  return new Date(ts * 1000).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  });
+}
+
+function NoiseFloorChart({
+  samples,
+}: {
+  samples: { timestamp: number; noise_floor_dbm: number }[];
+}) {
+  const data = samples.map((s, i) => ({
+    idx: i,
+    time: formatTime(s.timestamp),
+    noise_floor: s.noise_floor_dbm,
+  }));
+
+  const tickCount = Math.min(6, samples.length);
+  const tickIndices: number[] = [];
+  if (samples.length > 1) {
+    for (let i = 0; i < tickCount; i++) {
+      tickIndices.push(Math.round((i / (tickCount - 1)) * (samples.length - 1)));
+    }
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height={120}>
+      <AreaChart data={data} margin={{ top: 4, right: 4, bottom: 0, left: -8 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" vertical={false} />
+        <XAxis
+          dataKey="idx"
+          type="number"
+          domain={[0, samples.length - 1]}
+          tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }}
+          tickLine={false}
+          axisLine={false}
+          ticks={tickIndices}
+          tickFormatter={(idx) => data[idx]?.time ?? ''}
+        />
+        <YAxis
+          tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }}
+          tickLine={false}
+          axisLine={false}
+          domain={['dataMin - 5', 'dataMax + 5']}
+          tickFormatter={(v) => `${v}`}
+        />
+        <RechartsTooltip
+          {...TOOLTIP_STYLE}
+          cursor={{
+            stroke: 'hsl(var(--muted-foreground))',
+            strokeWidth: 1,
+            strokeDasharray: '3 3',
+          }}
+          labelFormatter={(idx) => data[Number(idx)]?.time ?? ''}
+          formatter={(value) => [`${value} dBm`, 'Noise Floor']}
+        />
+        <Area
+          type="linear"
+          dataKey="noise_floor"
+          stroke="#8b5cf6"
+          fill="#8b5cf6"
+          fillOpacity={0.15}
+          strokeWidth={1.5}
+          dot={false}
+          activeDot={{ r: 4, fill: '#8b5cf6', strokeWidth: 2, stroke: 'hsl(var(--popover))' }}
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}
+
 export function SettingsStatisticsSection({ className }: { className?: string }) {
   const [stats, setStats] = useState<StatisticsResponse | null>(null);
   const [statsLoading, setStatsLoading] = useState(false);
@@ -85,60 +185,6 @@ export function SettingsStatisticsSection({ className }: { className?: string })
 
           <Separator />
 
-          {/* Packets */}
-          <div>
-            <h4 className="text-sm font-medium mb-2">Packets</h4>
-            <div className="space-y-2">
-              <div className="flex justify-between items-center">
-                <span className="text-sm text-muted-foreground">Total stored</span>
-                <span className="font-medium">{stats.total_packets}</span>
-              </div>
-              <div className="flex justify-between items-center">
-                <span className="text-sm text-success">Decrypted</span>
-                <span className="font-medium text-success">{stats.decrypted_packets}</span>
-              </div>
-              <div className="flex justify-between items-center">
-                <span className="text-sm text-warning">Undecrypted</span>
-                <span className="font-medium text-warning">{stats.undecrypted_packets}</span>
-              </div>
-            </div>
-          </div>
-
-          <Separator />
-
-          <div>
-            <h4 className="text-sm font-medium mb-2">Path Hash Width (24h)</h4>
-            <div className="mb-2 text-xs text-muted-foreground">
-              Parsed stored raw packets from the last 24 hours:{' '}
-              {stats.path_hash_width_24h.total_packets}
-            </div>
-            <div className="space-y-2">
-              <div className="flex justify-between items-center text-sm">
-                <span>1-byte hops</span>
-                <span className="text-muted-foreground">
-                  {stats.path_hash_width_24h.single_byte} (
-                  {formatPercent(stats.path_hash_width_24h.single_byte_pct)})
-                </span>
-              </div>
-              <div className="flex justify-between items-center text-sm">
-                <span>2-byte hops</span>
-                <span className="text-muted-foreground">
-                  {stats.path_hash_width_24h.double_byte} (
-                  {formatPercent(stats.path_hash_width_24h.double_byte_pct)})
-                </span>
-              </div>
-              <div className="flex justify-between items-center text-sm">
-                <span>3-byte hops</span>
-                <span className="text-muted-foreground">
-                  {stats.path_hash_width_24h.triple_byte} (
-                  {formatPercent(stats.path_hash_width_24h.triple_byte_pct)})
-                </span>
-              </div>
-            </div>
-          </div>
-
-          <Separator />
-
           {/* Activity */}
           <div>
             <h4 className="text-sm font-medium mb-2">Activity</h4>
@@ -174,23 +220,172 @@ export function SettingsStatisticsSection({ className }: { className?: string })
             </table>
           </div>
 
+          <Separator />
+
+          {/* Packets */}
+          <div>
+            <h4 className="text-sm font-medium mb-2">Packets</h4>
+            <div className="space-y-2">
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-muted-foreground">Total stored</span>
+                <span className="font-medium">{stats.total_packets}</span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-success">Decrypted</span>
+                <span className="font-medium text-success">{stats.decrypted_packets}</span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-warning">Undecrypted</span>
+                <span className="font-medium text-warning">{stats.undecrypted_packets}</span>
+              </div>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Path Hash Width */}
+          <div>
+            <h4 className="text-sm font-medium mb-2">Path Hash Width (24h)</h4>
+            <div className="mb-2 text-xs text-muted-foreground">
+              Parsed stored raw packets from the last 24 hours:{' '}
+              {stats.path_hash_width_24h.total_packets}
+            </div>
+            {stats.path_hash_width_24h.total_packets > 0 ? (
+              <ResponsiveContainer width="100%" height={120}>
+                <BarChart
+                  data={[
+                    {
+                      name: '1-byte',
+                      count: stats.path_hash_width_24h.single_byte,
+                      pct: stats.path_hash_width_24h.single_byte_pct,
+                    },
+                    {
+                      name: '2-byte',
+                      count: stats.path_hash_width_24h.double_byte,
+                      pct: stats.path_hash_width_24h.double_byte_pct,
+                    },
+                    {
+                      name: '3-byte',
+                      count: stats.path_hash_width_24h.triple_byte,
+                      pct: stats.path_hash_width_24h.triple_byte_pct,
+                    },
+                  ]}
+                  margin={{ top: 4, right: 4, bottom: 0, left: -16 }}
+                >
+                  <CartesianGrid
+                    strokeDasharray="3 3"
+                    stroke="hsl(var(--border))"
+                    vertical={false}
+                  />
+                  <XAxis
+                    dataKey="name"
+                    tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
+                    tickLine={false}
+                    axisLine={false}
+                  />
+                  <YAxis
+                    tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }}
+                    tickLine={false}
+                    axisLine={false}
+                    allowDecimals={false}
+                  />
+                  <RechartsTooltip
+                    {...TOOLTIP_STYLE}
+                    cursor={{ fill: 'hsl(var(--muted))', opacity: 0.5 }}
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    formatter={(value: any, _: any, props: any) => [
+                      `${Number(value).toLocaleString()} (${formatPercent(props.payload.pct)})`,
+                      'Packets',
+                    ]}
+                  />
+                  <Bar dataKey="count" radius={[4, 4, 0, 0]} maxBarSize={40}>
+                    <Cell fill="#0ea5e9" />
+                    <Cell fill="#10b981" />
+                    <Cell fill="#f59e0b" />
+                  </Bar>
+                </BarChart>
+              </ResponsiveContainer>
+            ) : (
+              <p className="text-sm text-muted-foreground">No path data in the last 24 hours.</p>
+            )}
+          </div>
+
           {/* Busiest Channels */}
           {stats.busiest_channels_24h.length > 0 && (
             <>
               <Separator />
               <div>
                 <h4 className="text-sm font-medium mb-2">Busiest Channels (24h)</h4>
-                <div className="space-y-1">
-                  {stats.busiest_channels_24h.map((ch, i) => (
-                    <div key={ch.channel_key} className="flex justify-between items-center text-sm">
-                      <span>
-                        <span className="text-muted-foreground mr-2">{i + 1}.</span>
-                        {ch.channel_name}
-                      </span>
-                      <span className="text-muted-foreground">{ch.message_count} msgs</span>
-                    </div>
-                  ))}
-                </div>
+                <ResponsiveContainer
+                  width="100%"
+                  height={stats.busiest_channels_24h.length * 28 + 8}
+                >
+                  <BarChart
+                    data={stats.busiest_channels_24h.map((ch) => ({
+                      name: ch.channel_name,
+                      messages: ch.message_count,
+                    }))}
+                    layout="vertical"
+                    margin={{ top: 0, right: 4, bottom: 0, left: 0 }}
+                    barCategoryGap="20%"
+                  >
+                    <XAxis type="number" hide />
+                    <YAxis
+                      type="category"
+                      dataKey="name"
+                      tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
+                      tickLine={false}
+                      axisLine={false}
+                      width={100}
+                    />
+                    <RechartsTooltip
+                      {...TOOLTIP_STYLE}
+                      cursor={{ fill: 'hsl(var(--muted))', opacity: 0.5 }}
+                      formatter={(value) => [`${Number(value).toLocaleString()} messages`, null]}
+                    />
+                    <Bar dataKey="messages" radius={[0, 4, 4, 0]} maxBarSize={16}>
+                      {stats.busiest_channels_24h.map((_, i) => (
+                        <Cell key={i} fill={CHANNEL_BAR_COLORS[i % CHANNEL_BAR_COLORS.length]} />
+                      ))}
+                    </Bar>
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+            </>
+          )}
+
+          {/* Noise Floor */}
+          {stats.noise_floor_24h.supported !== false && (
+            <>
+              <Separator />
+              <div>
+                <h4 className="text-sm font-medium mb-2">Noise Floor (24h)</h4>
+                {stats.noise_floor_24h.latest_noise_floor_dbm != null && (
+                  <div className="mb-2 text-xs text-muted-foreground">
+                    Latest reading: {stats.noise_floor_24h.latest_noise_floor_dbm} dBm
+                    {stats.noise_floor_24h.latest_timestamp != null &&
+                      ` at ${new Date(
+                        stats.noise_floor_24h.latest_timestamp * 1000
+                      ).toLocaleTimeString([], {
+                        hour: '2-digit',
+                        minute: '2-digit',
+                      })}`}
+                  </div>
+                )}
+                {stats.noise_floor_24h.samples.length > 1 ? (
+                  <NoiseFloorChart samples={stats.noise_floor_24h.samples} />
+                ) : stats.noise_floor_24h.samples.length === 0 ? (
+                  <p className="text-sm text-muted-foreground">
+                    No noise floor samples collected yet. Samples are collected every five minutes,
+                    and retained until server restart.
+                  </p>
+                ) : (
+                  <p className="text-sm text-muted-foreground">
+                    Only one sample so far ({stats.noise_floor_24h.samples[0].noise_floor_dbm} dBm).
+                    More data needed for a chart. Samples are collected every five minutes, and
+                    retained until server restart.
+                  </p>
+                )}
               </div>
             </>
           )}

frontend/src/test/settingsModal.test.tsx

@@ -595,6 +595,14 @@ describe('SettingsModal', () => {
         double_byte_pct: 30,
         triple_byte_pct: 20,
       },
+      noise_floor_24h: {
+        sample_interval_seconds: 300,
+        coverage_seconds: 3600,
+        latest_noise_floor_dbm: -105,
+        latest_timestamp: 1711800000,
+        supported: true,
+        samples: [],
+      },
     };
 
     vi.spyOn(globalThis, 'fetch').mockResolvedValue(
@@ -626,17 +634,11 @@ describe('SettingsModal', () => {
     expect(
       screen.getByText(/Parsed stored raw packets from the last 24 hours: 120/)
     ).toBeInTheDocument();
-    expect(screen.getByText('1-byte hops')).toBeInTheDocument();
-    expect(screen.getByText('60 (50.0%)')).toBeInTheDocument();
-    expect(screen.getByText('36 (30.0%)')).toBeInTheDocument();
-    expect(screen.getByText('24 (20.0%)')).toBeInTheDocument();
     expect(screen.getByText('Contacts heard')).toBeInTheDocument();
     expect(screen.getByText('Repeaters heard')).toBeInTheDocument();
     expect(screen.getByText('Known-channels active')).toBeInTheDocument();
-
-    // Busiest channels
-    expect(screen.getByText('general')).toBeInTheDocument();
-    expect(screen.getByText('42 msgs')).toBeInTheDocument();
+    expect(screen.getByText('Busiest Channels (24h)')).toBeInTheDocument();
+    expect(screen.getByText('Noise Floor (24h)')).toBeInTheDocument();
   });
 
   it('fetches statistics when expanded in mobile external-nav mode', async () => {
@@ -663,6 +665,14 @@ describe('SettingsModal', () => {
         double_byte_pct: 30,
         triple_byte_pct: 20,
       },
+      noise_floor_24h: {
+        sample_interval_seconds: 300,
+        coverage_seconds: 0,
+        latest_noise_floor_dbm: null,
+        latest_timestamp: null,
+        supported: null,
+        samples: [],
+      },
     };
 
     const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue(

frontend/src/types.ts

@@ -505,6 +505,20 @@ interface ContactActivityCounts {
   last_week: number;
 }
 
+export interface NoiseFloorSample {
+  timestamp: number;
+  noise_floor_dbm: number;
+}
+
+export interface NoiseFloorHistoryStats {
+  sample_interval_seconds: number;
+  coverage_seconds: number;
+  latest_noise_floor_dbm: number | null;
+  latest_timestamp: number | null;
+  supported: boolean | null;
+  samples: NoiseFloorSample[];
+}
+
 export interface StatisticsResponse {
   busiest_channels_24h: BusyChannel[];
   contact_count: number;
@@ -528,4 +542,5 @@ export interface StatisticsResponse {
     double_byte_pct: number;
     triple_byte_pct: number;
   };
+  noise_floor_24h: NoiseFloorHistoryStats;
 }