feat(dashboard): add node badge to Recent Alerts for remote node alerts (#423)

Alerts from remote nodes now display a node name badge in the Recent
Alerts card, matching the existing badge style in the notification
panel. This helps users identify which node generated each alert.

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+* **dashboard:** show remote node badge on Recent Alerts card, matching the notification panel style, so users can identify which node generated each alert.
+
 ## [0.40.0](https://github.com/AnsoCode/Sencho/compare/v0.39.6...v0.40.0) (2026-04-07)
 
 

frontend/src/components/HomeDashboard.tsx

@@ -16,7 +16,7 @@ interface HomeDashboardProps {
 }
 
 export default function HomeDashboard({ onNavigateToStack, notifications, onClearNotifications }: HomeDashboardProps) {
-  const { activeNode } = useNodes();
+  const { activeNode, nodes } = useNodes();
   const data = useDashboardData();
 
   return (
@@ -48,6 +48,7 @@ export default function HomeDashboard({ onNavigateToStack, notifications, onClea
 
       <RecentAlerts
         notifications={notifications}
+        nodes={nodes}
         onCleared={onClearNotifications}
       />
     </div>

frontend/src/components/dashboard/RecentAlerts.tsx

@@ -1,12 +1,15 @@
 import { useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
 import { Info, AlertTriangle, AlertOctagon, CheckCircle2, Trash2, ChevronLeft, ChevronRight } from 'lucide-react';
 import { toast } from '@/components/ui/toast-store';
 import type { NotificationItem } from './types';
+import type { Node } from '@/context/NodeContext';
 
 interface RecentAlertsProps {
   notifications: NotificationItem[];
+  nodes?: Node[];
   onCleared?: () => void | Promise<void>;
 }
 
@@ -28,7 +31,7 @@ function formatRelativeTime(timestamp: number): string {
   return `${Math.floor(hours / 24)}d`;
 }
 
-export function RecentAlerts({ notifications, onCleared }: RecentAlertsProps) {
+export function RecentAlerts({ notifications, nodes, onCleared }: RecentAlertsProps) {
   const [clearing, setClearing] = useState(false);
   const [page, setPage] = useState(0);
 
@@ -103,6 +106,11 @@ export function RecentAlerts({ notifications, onCleared }: RecentAlertsProps) {
                     className="flex items-center gap-2.5 py-1.5 px-1 rounded-sm hover:bg-accent/5"
                   >
                     <Icon className={`h-3.5 w-3.5 shrink-0 ${config.className}`} strokeWidth={1.5} />
+                    {n.nodeName && nodes?.find(nd => nd.id === n.nodeId)?.type === 'remote' && (
+                      <Badge variant="outline" className="text-[10px] font-normal shrink-0 py-0 px-1.5">
+                        {n.nodeName}
+                      </Badge>
+                    )}
                     <span className={`text-xs flex-1 truncate ${n.is_read ? 'text-stat-subtitle' : 'text-stat-value'}`}>
                       {n.message}
                     </span>