Improve bandwidth chart UX and log viewer IP resolution

- Show dates on X-axis when chart spans multiple days
- Display both selected range and full totals in historical mode
- Add IP to device name resolution in log viewer

Author: rajsinghtech

frontend/src/lib/components/charts/BandwidthChart.svelte

@@ -134,32 +134,57 @@
 		};
 	});
 
-	// Format time for axis
+	// Format time for axis - include date if range spans multiple days
 	function formatTime(time: Date): string {
+		const { minTime, maxTime } = chartBounds;
+		const rangeMs = maxTime - minTime;
+		const dayMs = 24 * 60 * 60 * 1000;
+
+		if (rangeMs > dayMs) {
+			// Show date + time for multi-day ranges
+			return time.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) +
+				' ' + time.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+		}
 		return time.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
 	}
 
+	// Calculate full totals (all chart data)
+	const fullTotals = $derived.by(() => {
+		const tx = chartData.reduce((sum, d) => sum + d.txBytes, 0);
+		const rx = chartData.reduce((sum, d) => sum + d.rxBytes, 0);
+		return { tx, rx, total: tx + rx };
+	});
+
 	// Calculate totals for selected range only (in historical mode) or all data
 	const totals = $derived.by(() => {
 		const selectedStart = $dataSourceStore.selectedStart;
 		const selectedEnd = $dataSourceStore.selectedEnd;
 		const mode = $dataSourceStore.mode;
 
-		let dataToSum = chartData;
-
-		// In historical mode, only sum data within selected range
-		if (mode === 'historical' && selectedStart && selectedEnd) {
-			dataToSum = chartData.filter((d) => {
-				const t = d.time.getTime();
-				return t >= selectedStart.getTime() && t <= selectedEnd.getTime();
-			});
+		// In live mode or if no selection, use full totals
+		if (mode !== 'historical' || !selectedStart || !selectedEnd) {
+			return fullTotals;
 		}
 
+		// In historical mode, sum data within selected range
+		const dataToSum = chartData.filter((d) => {
+			const t = d.time.getTime();
+			return t >= selectedStart.getTime() && t <= selectedEnd.getTime();
+		});
+
 		const tx = dataToSum.reduce((sum, d) => sum + d.txBytes, 0);
 		const rx = dataToSum.reduce((sum, d) => sum + d.rxBytes, 0);
 		return { tx, rx, total: tx + rx };
 	});
 
+	// Check if we're showing a subset of data
+	const isShowingSubset = $derived(
+		$dataSourceStore.mode === 'historical' &&
+		$dataSourceStore.selectedStart !== null &&
+		$dataSourceStore.selectedEnd !== null &&
+		totals.total !== fullTotals.total
+	);
+
 	// Generate time axis ticks
 	const timeAxisTicks = $derived.by(() => {
 		if (chartData.length === 0) return [];
@@ -193,7 +218,7 @@
 		<div class="flex items-center gap-4">
 			<span class="text-xs font-medium text-muted-foreground">
 				Bandwidth Over Time
-				{#if $dataSourceStore.mode === 'historical'}
+				{#if isShowingSubset}
 					<span class="text-primary/70">(selected range)</span>
 				{/if}
 			</span>
@@ -209,6 +234,11 @@
 				<span class="text-muted-foreground">
 					Total: {formatBytes(totals.total)}
 				</span>
+				{#if isShowingSubset}
+					<span class="text-muted-foreground/60">
+						| All: {formatBytes(fullTotals.total)}
+					</span>
+				{/if}
 			</div>
 		</div>
 		{#if chartData.length > 0}

frontend/src/lib/components/logs/LogViewer.svelte

@@ -1,9 +1,28 @@
 <script lang="ts">
-	import { networkLogs, uiStore, filteredNodes, filteredEdges, filterStore } from '$lib/stores';
+	import { networkLogs, uiStore, filteredNodes, filteredEdges, filterStore, devices } from '$lib/stores';
 	import { formatBytes, formatDate, extractIP, getProtocolName } from '$lib/utils';
 	import { ArrowRight } from 'lucide-svelte';
 	import type { NetworkLog } from '$lib/types';
 
+	// Build IP to device name lookup map
+	const ipToDevice = $derived.by(() => {
+		const map = new Map<string, string>();
+		for (const device of $devices) {
+			const displayName = device.hostname || device.name.split('.')[0];
+			for (const addr of device.addresses) {
+				map.set(addr, displayName);
+			}
+		}
+		return map;
+	});
+
+	// Helper to resolve IP to device name or return the IP
+	function resolveIP(address: string): { ip: string; deviceName?: string } {
+		const ip = extractIP(address);
+		const deviceName = ipToDevice.get(ip);
+		return { ip, deviceName };
+	}
+
 	// Flatten traffic entries for display
 	interface FlatTrafficEntry {
 		logged: string;
@@ -154,6 +173,8 @@
 			</thead>
 			<tbody>
 				{#each flattenedEntries as entry}
+					{@const srcResolved = resolveIP(entry.src)}
+					{@const dstResolved = resolveIP(entry.dst)}
 					<tr class="border-b border-border/50 hover:bg-secondary/50">
 						<td class="whitespace-nowrap px-2 py-1 text-muted-foreground">
 							{formatDate(entry.logged).split(',')[1]?.trim() || formatDate(entry.logged)}
@@ -166,9 +187,21 @@
 						</td>
 						<td class="px-2 py-1">
 							<div class="flex items-center gap-1">
-								<span class="truncate" title={entry.src}>{extractIP(entry.src)}</span>
+								<span class="truncate" title={srcResolved.deviceName ? `${srcResolved.deviceName} (${srcResolved.ip})` : srcResolved.ip}>
+									{#if srcResolved.deviceName}
+										<span class="text-primary">{srcResolved.deviceName}</span>
+									{:else}
+										{srcResolved.ip}
+									{/if}
+								</span>
 								<ArrowRight class="h-3 w-3 shrink-0 text-muted-foreground" />
-								<span class="truncate" title={entry.dst}>{extractIP(entry.dst)}</span>
+								<span class="truncate" title={dstResolved.deviceName ? `${dstResolved.deviceName} (${dstResolved.ip})` : dstResolved.ip}>
+									{#if dstResolved.deviceName}
+										<span class="text-primary">{dstResolved.deviceName}</span>
+									{:else}
+										{dstResolved.ip}
+									{/if}
+								</span>
 							</div>
 						</td>
 						<td class="px-2 py-1">