Various UI improvements

Updated chart stats
More website improvements
2025-12-08 22:07:46 +00:00 · 2025-12-08 19:37:45 +00:00 · 2025-12-08 17:07:39 +00:00 · 2025-12-08 16:42:13 +00:00 · 2025-12-08 16:37:53 +00:00 · 2025-12-08 16:22:08 +00:00
15 changed files with 483 additions and 299 deletions
--- a/src/meshcore_hub/api/routes/advertisements.py
+++ b/src/meshcore_hub/api/routes/advertisements.py
@@ -4,7 +4,7 @@ from datetime import datetime
 from typing import Optional

 from fastapi import APIRouter, HTTPException, Query
-from sqlalchemy import func, select
+from sqlalchemy import func, or_, select
 from sqlalchemy.orm import aliased, selectinload

 from meshcore_hub.api.auth import RequireRead
@@ -89,6 +89,9 @@ def _fetch_receivers_for_events(
 async def list_advertisements(
    _: RequireRead,
    session: DbSession,
+    search: Optional[str] = Query(
+        None, description="Search in name tag, node name, or public key"
+    ),
    public_key: Optional[str] = Query(None, description="Filter by public key"),
    received_by: Optional[str] = Query(
        None, description="Filter by receiver node public key"
@@ -118,6 +121,22 @@ async def list_advertisements(
        .outerjoin(SourceNode, Advertisement.node_id == SourceNode.id)
    )

+    if search:
+        # Search in public key, advertisement name, node name, or name tag
+        search_pattern = f"%{search}%"
+        query = query.where(
+            or_(
+                Advertisement.public_key.ilike(search_pattern),
+                Advertisement.name.ilike(search_pattern),
+                SourceNode.name.ilike(search_pattern),
+                SourceNode.id.in_(
+                    select(NodeTag.node_id).where(
+                        NodeTag.key == "name", NodeTag.value.ilike(search_pattern)
+                    )
+                ),
+            )
+        )
+
    if public_key:
        query = query.where(Advertisement.public_key == public_key)

--- a/src/meshcore_hub/api/routes/dashboard.py
+++ b/src/meshcore_hub/api/routes/dashboard.py
@@ -31,6 +31,7 @@ async def get_stats(
    now = datetime.now(timezone.utc)
    today_start = now.replace(hour=0, minute=0, second=0, microsecond=0)
    yesterday = now - timedelta(days=1)
+    seven_days_ago = now - timedelta(days=7)

    # Total nodes
    total_nodes = session.execute(select(func.count()).select_from(Node)).scalar() or 0
@@ -73,6 +74,26 @@ async def get_stats(
        or 0
    )

+    # Advertisements in last 7 days
+    advertisements_7d = (
+        session.execute(
+            select(func.count())
+            .select_from(Advertisement)
+            .where(Advertisement.received_at >= seven_days_ago)
+        ).scalar()
+        or 0
+    )
+
+    # Messages in last 7 days
+    messages_7d = (
+        session.execute(
+            select(func.count())
+            .select_from(Message)
+            .where(Message.received_at >= seven_days_ago)
+        ).scalar()
+        or 0
+    )
+
    # Recent advertisements (last 10)
    recent_ads = (
        session.execute(
@@ -185,8 +206,10 @@ async def get_stats(
        active_nodes=active_nodes,
        total_messages=total_messages,
        messages_today=messages_today,
+        messages_7d=messages_7d,
        total_advertisements=total_advertisements,
        advertisements_24h=advertisements_24h,
+        advertisements_7d=advertisements_7d,
        recent_advertisements=recent_advertisements,
        channel_message_counts=channel_message_counts,
        channel_messages=channel_messages,
@@ -205,15 +228,15 @@ async def get_activity(
        days: Number of days to include (default 30, max 90)

    Returns:
-        Daily advertisement counts for each day in the period
+        Daily advertisement counts for each day in the period (excluding today)
    """
    # Limit to max 90 days
    days = min(days, 90)

    now = datetime.now(timezone.utc)
-    start_date = (now - timedelta(days=days - 1)).replace(
-        hour=0, minute=0, second=0, microsecond=0
-    )
+    # End at start of today (exclude today's incomplete data)
+    end_date = now.replace(hour=0, minute=0, second=0, microsecond=0)
+    start_date = end_date - timedelta(days=days)

    # Query advertisement counts grouped by date
    # Use SQLite's date() function for grouping (returns string 'YYYY-MM-DD')
@@ -225,6 +248,7 @@ async def get_activity(
            func.count().label("count"),
        )
        .where(Advertisement.received_at >= start_date)
+        .where(Advertisement.received_at < end_date)
        .group_by(date_expr)
        .order_by(date_expr)
    )
@@ -257,14 +281,14 @@ async def get_message_activity(
        days: Number of days to include (default 30, max 90)

    Returns:
-        Daily message counts for each day in the period
+        Daily message counts for each day in the period (excluding today)
    """
    days = min(days, 90)

    now = datetime.now(timezone.utc)
-    start_date = (now - timedelta(days=days - 1)).replace(
-        hour=0, minute=0, second=0, microsecond=0
-    )
+    # End at start of today (exclude today's incomplete data)
+    end_date = now.replace(hour=0, minute=0, second=0, microsecond=0)
+    start_date = end_date - timedelta(days=days)

    # Query message counts grouped by date
    date_expr = func.date(Message.received_at)
@@ -275,6 +299,7 @@ async def get_message_activity(
            func.count().label("count"),
        )
        .where(Message.received_at >= start_date)
+        .where(Message.received_at < end_date)
        .group_by(date_expr)
        .order_by(date_expr)
    )
@@ -308,14 +333,14 @@ async def get_node_count_history(
        days: Number of days to include (default 30, max 90)

    Returns:
-        Cumulative node count for each day in the period
+        Cumulative node count for each day in the period (excluding today)
    """
    days = min(days, 90)

    now = datetime.now(timezone.utc)
-    start_date = (now - timedelta(days=days - 1)).replace(
-        hour=0, minute=0, second=0, microsecond=0
-    )
+    # End at start of today (exclude today's incomplete data)
+    end_date = now.replace(hour=0, minute=0, second=0, microsecond=0)
+    start_date = end_date - timedelta(days=days)

    # Get all nodes with their creation dates
    # Count nodes created on or before each date
--- a/src/meshcore_hub/common/schemas/messages.py
+++ b/src/meshcore_hub/common/schemas/messages.py
@@ -239,10 +239,14 @@ class DashboardStats(BaseModel):
    active_nodes: int = Field(..., description="Nodes active in last 24h")
    total_messages: int = Field(..., description="Total number of messages")
    messages_today: int = Field(..., description="Messages received today")
+    messages_7d: int = Field(default=0, description="Messages received in last 7 days")
    total_advertisements: int = Field(..., description="Total advertisements")
    advertisements_24h: int = Field(
        default=0, description="Advertisements received in last 24h"
    )
+    advertisements_7d: int = Field(
+        default=0, description="Advertisements received in last 7 days"
+    )
    recent_advertisements: list[RecentAdvertisement] = Field(
        default_factory=list, description="Last 10 advertisements"
    )
--- a/src/meshcore_hub/web/routes/advertisements.py
+++ b/src/meshcore_hub/web/routes/advertisements.py
@@ -14,7 +14,7 @@ router = APIRouter()
@router.get("/advertisements", response_class=HTMLResponse)
 async def advertisements_list(
    request: Request,
-    public_key: str | None = Query(None, description="Filter by public key"),
+    search: str | None = Query(None, description="Search term"),
    page: int = Query(1, ge=1, description="Page number"),
    limit: int = Query(50, ge=1, le=100, description="Items per page"),
 ) -> HTMLResponse:
@@ -28,8 +28,8 @@ async def advertisements_list(

    # Build query params
    params: dict[str, int | str] = {"limit": limit, "offset": offset}
-    if public_key:
-        params["public_key"] = public_key
+    if search:
+        params["search"] = search

    # Fetch advertisements from API
    advertisements = []
@@ -57,7 +57,7 @@ async def advertisements_list(
            "page": page,
            "limit": limit,
            "total_pages": total_pages,
-            "public_key": public_key or "",
+            "search": search or "",
        }
    )

--- a/src/meshcore_hub/web/static/js/utils.js
+++ b/src/meshcore_hub/web/static/js/utils.js
@@ -0,0 +1,63 @@
+/**
+ * MeshCore Hub - Common JavaScript Utilities
+ */
+
+/**
+ * Format a timestamp as relative time (e.g., "2m", "1h", "2d")
+ * @param {string|Date} timestamp - ISO timestamp string or Date object
+ * @returns {string} Relative time string, or empty string if invalid
+ */
+function formatRelativeTime(timestamp) {
+    if (!timestamp) return '';
+
+    const date = timestamp instanceof Date ? timestamp : new Date(timestamp);
+    if (isNaN(date.getTime())) return '';
+
+    const now = new Date();
+    const diffMs = now - date;
+    const diffSec = Math.floor(diffMs / 1000);
+    const diffMin = Math.floor(diffSec / 60);
+    const diffHour = Math.floor(diffMin / 60);
+    const diffDay = Math.floor(diffHour / 24);
+
+    if (diffDay > 0) return `${diffDay}d`;
+    if (diffHour > 0) return `${diffHour}h`;
+    if (diffMin > 0) return `${diffMin}m`;
+    return '<1m';
+}
+
+/**
+ * Populate all elements with data-timestamp attribute with relative time
+ */
+function populateRelativeTimestamps() {
+    document.querySelectorAll('[data-timestamp]:not([data-receiver-tooltip])').forEach(el => {
+        const timestamp = el.dataset.timestamp;
+        if (timestamp) {
+            el.textContent = formatRelativeTime(timestamp);
+        }
+    });
+}
+
+/**
+ * Populate receiver tooltip elements with name and relative time
+ */
+function populateReceiverTooltips() {
+    document.querySelectorAll('[data-receiver-tooltip]').forEach(el => {
+        const name = el.dataset.name || '';
+        const timestamp = el.dataset.timestamp;
+        const relTime = timestamp ? formatRelativeTime(timestamp) : '';
+
+        // Build tooltip: "NodeName (2m ago)" or just "NodeName" or just "2m ago"
+        let tooltip = name;
+        if (relTime) {
+            tooltip = name ? `${name} (${relTime} ago)` : `${relTime} ago`;
+        }
+        el.title = tooltip;
+    });
+}
+
+// Auto-populate when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    populateRelativeTimestamps();
+    populateReceiverTooltips();
+});
--- a/src/meshcore_hub/web/templates/advertisements.html
+++ b/src/meshcore_hub/web/templates/advertisements.html
@@ -23,11 +23,11 @@
        <form method="GET" action="/advertisements" class="flex gap-4 flex-wrap items-end">
            <div class="form-control">
                <label class="label py-1">
-                    <span class="label-text">Public Key</span>
+                    <span class="label-text">Search</span>
                </label>
-                <input type="text" name="public_key" value="{{ public_key }}" placeholder="Filter by public key..." class="input input-bordered input-sm w-80" />
+                <input type="text" name="search" value="{{ search }}" placeholder="Search by name, ID, or public key..." class="input input-bordered input-sm w-80" />
            </div>
-            <button type="submit" class="btn btn-primary btn-sm">Filter</button>
+            <button type="submit" class="btn btn-primary btn-sm">Search</button>
            <a href="/advertisements" class="btn btn-ghost btn-sm">Clear</a>
        </form>
    </div>
@@ -39,82 +39,46 @@
        <thead>
            <tr>
                <th>Node</th>
-                <th>Type</th>
-                <th>Received By</th>
                <th>Time</th>
+                <th>Receivers</th>
            </tr>
        </thead>
        <tbody>
            {% for ad in advertisements %}
            <tr class="hover">
                <td>
-                    <a href="/nodes/{{ ad.public_key }}" class="link link-hover">
-                        {% if ad.node_tag_name or ad.node_name or ad.name %}
-                        <div class="font-medium">{{ ad.node_tag_name or ad.node_name or ad.name }}</div>
-                        <div class="text-xs font-mono opacity-70">{{ ad.public_key[:16] }}...</div>
-                        {% else %}
-                        <span class="font-mono text-sm">{{ ad.public_key[:16] }}...</span>
-                        {% endif %}
+                    <a href="/nodes/{{ ad.public_key }}" class="link link-hover flex items-center gap-2">
+                        <span class="text-lg" title="{{ ad.adv_type or 'Unknown' }}">{% if ad.adv_type and ad.adv_type|lower == 'chat' %}💬{% elif ad.adv_type and ad.adv_type|lower == 'repeater' %}📡{% elif ad.adv_type and ad.adv_type|lower == 'room' %}🪧{% else %}📍{% endif %}</span>
+                        <div>
+                            {% if ad.node_tag_name or ad.node_name or ad.name %}
+                            <div class="font-medium">{{ ad.node_tag_name or ad.node_name or ad.name }}</div>
+                            <div class="text-xs font-mono opacity-70">{{ ad.public_key[:16] }}...</div>
+                            {% else %}
+                            <span class="font-mono text-sm">{{ ad.public_key[:16] }}...</span>
+                            {% endif %}
+                        </div>
                    </a>
                </td>
-                <td>
-                    {% if ad.adv_type and ad.adv_type|lower == 'chat' %}
-                    <span title="Chat">💬</span>
-                    {% elif ad.adv_type and ad.adv_type|lower == 'repeater' %}
-                    <span title="Repeater">📡</span>
-                    {% elif ad.adv_type and ad.adv_type|lower == 'room' %}
-                    <span title="Room">🪧</span>
-                    {% elif ad.adv_type %}
-                    <span title="{{ ad.adv_type }}">📍</span>
-                    {% else %}
-                    <span class="opacity-50">-</span>
-                    {% endif %}
-                </td>
-                <td>
-                    {% if ad.receivers and ad.receivers|length > 1 %}
-                    <div class="dropdown dropdown-hover dropdown-end">
-                        <label tabindex="0" class="badge badge-outline badge-sm cursor-pointer">
-                            {{ ad.receivers|length }} receivers
-                        </label>
-                        <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-56">
-                            {% for recv in ad.receivers %}
-                            <li>
-                                <a href="/nodes/{{ recv.public_key }}" class="text-sm">
-                                    {{ recv.tag_name or recv.name or recv.public_key[:12] + '...' }}
-                                </a>
-                            </li>
-                            {% endfor %}
-                        </ul>
-                    </div>
-                    {% elif ad.receivers and ad.receivers|length == 1 %}
-                    <a href="/nodes/{{ ad.receivers[0].public_key }}" class="link link-hover">
-                        {% if ad.receivers[0].tag_name or ad.receivers[0].name %}
-                        <div class="font-medium">{{ ad.receivers[0].tag_name or ad.receivers[0].name }}</div>
-                        <div class="text-xs font-mono opacity-70">{{ ad.receivers[0].public_key[:16] }}...</div>
-                        {% else %}
-                        <span class="font-mono text-sm">{{ ad.receivers[0].public_key[:16] }}...</span>
-                        {% endif %}
-                    </a>
-                    {% elif ad.received_by %}
-                    <a href="/nodes/{{ ad.received_by }}" class="link link-hover">
-                        {% if ad.receiver_tag_name or ad.receiver_name %}
-                        <div class="font-medium">{{ ad.receiver_tag_name or ad.receiver_name }}</div>
-                        <div class="text-xs font-mono opacity-70">{{ ad.received_by[:16] }}...</div>
-                        {% else %}
-                        <span class="font-mono text-sm">{{ ad.received_by[:16] }}...</span>
-                        {% endif %}
-                    </a>
-                    {% else %}
-                    <span class="opacity-50">-</span>
-                    {% endif %}
-                </td>
                <td class="text-sm whitespace-nowrap">
                    {{ ad.received_at[:19].replace('T', ' ') if ad.received_at else '-' }}
                </td>
+                <td>
+                    {% if ad.receivers and ad.receivers|length >= 1 %}
+                    <div class="flex gap-1">
+                        {% for recv in ad.receivers %}
+                        <a href="/nodes/{{ recv.public_key }}" class="text-lg hover:opacity-70" data-receiver-tooltip data-name="{{ recv.tag_name or recv.name or recv.public_key[:12] }}" data-timestamp="{{ recv.received_at }}">📡</a>
+                        {% endfor %}
+                    </div>
+                    {% elif ad.received_by %}
+                    <a href="/nodes/{{ ad.received_by }}" class="text-lg hover:opacity-70" title="{{ ad.receiver_tag_name or ad.receiver_name or ad.received_by[:12] }}">📡</a>
+                    {% else %}
+                    <span class="opacity-50">-</span>
+                    {% endif %}
+                </td>
            </tr>
            {% else %}
            <tr>
-                <td colspan="4" class="text-center py-8 opacity-70">No advertisements found.</td>
+                <td colspan="3" class="text-center py-8 opacity-70">No advertisements found.</td>
            </tr>
            {% endfor %}
        </tbody>
@@ -126,7 +90,7 @@
 <div class="flex justify-center mt-6">
    <div class="join">
        {% if page > 1 %}
-        <a href="?page={{ page - 1 }}&public_key={{ public_key }}&limit={{ limit }}" class="join-item btn btn-sm">Previous</a>
+        <a href="?page={{ page - 1 }}&search={{ search }}&limit={{ limit }}" class="join-item btn btn-sm">Previous</a>
        {% else %}
        <button class="join-item btn btn-sm btn-disabled">Previous</button>
        {% endif %}
@@ -135,14 +99,14 @@
            {% if p == page %}
            <button class="join-item btn btn-sm btn-active">{{ p }}</button>
            {% elif p == 1 or p == total_pages or (p >= page - 2 and p <= page + 2) %}
-            <a href="?page={{ p }}&public_key={{ public_key }}&limit={{ limit }}" class="join-item btn btn-sm">{{ p }}</a>
+            <a href="?page={{ p }}&search={{ search }}&limit={{ limit }}" class="join-item btn btn-sm">{{ p }}</a>
            {% elif p == 2 or p == total_pages - 1 %}
            <button class="join-item btn btn-sm btn-disabled">...</button>
            {% endif %}
        {% endfor %}

        {% if page < total_pages %}
-        <a href="?page={{ page + 1 }}&public_key={{ public_key }}&limit={{ limit }}" class="join-item btn btn-sm">Next</a>
+        <a href="?page={{ page + 1 }}&search={{ search }}&limit={{ limit }}" class="join-item btn btn-sm">Next</a>
        {% else %}
        <button class="join-item btn btn-sm btn-disabled">Next</button>
        {% endif %}
--- a/src/meshcore_hub/web/templates/base.html
+++ b/src/meshcore_hub/web/templates/base.html
@@ -121,6 +121,9 @@
    <!-- Leaflet JS for maps -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

+    <!-- Common utilities -->
+    <script src="/static/js/utils.js"></script>
+
    {% block extra_scripts %}{% endblock %}
 </body>
 </html>
--- a/src/meshcore_hub/web/templates/home.html
+++ b/src/meshcore_hub/web/templates/home.html
@@ -19,25 +19,25 @@
            </p>
            {% endif %}
            <div class="flex gap-4 justify-center flex-wrap">
-                <a href="/network" class="btn btn-primary">
+                <a href="/network" class="btn btn-neutral">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                    </svg>
                    Dashboard
                </a>
-                <a href="/nodes" class="btn btn-secondary">
+                <a href="/nodes" class="btn btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                    </svg>
                    Nodes
                </a>
-                <a href="/advertisements" class="btn btn-accent">
+                <a href="/advertisements" class="btn btn-secondary">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
                    </svg>
                    Advertisements
                </a>
-                <a href="/messages" class="btn btn-info">
+                <a href="/messages" class="btn btn-accent">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                    </svg>
@@ -49,7 +49,7 @@
 </div>

 <!-- Stats Cards -->
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
+<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
    <!-- Total Nodes -->
    <div class="stat bg-base-100 rounded-box shadow">
        <div class="stat-figure text-primary">
@@ -62,7 +62,7 @@
        <div class="stat-desc">All discovered nodes</div>
    </div>

-    <!-- Advertisements (24h) -->
+    <!-- Advertisements (7 days) -->
    <div class="stat bg-base-100 rounded-box shadow">
        <div class="stat-figure text-secondary">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -70,32 +70,20 @@
            </svg>
        </div>
        <div class="stat-title">Advertisements</div>
-        <div class="stat-value text-secondary">{{ stats.advertisements_24h }}</div>
-        <div class="stat-desc">Received in last 24 hours</div>
+        <div class="stat-value text-secondary">{{ stats.advertisements_7d }}</div>
+        <div class="stat-desc">Last 7 days</div>
    </div>

-    <!-- Total Messages -->
+    <!-- Messages (7 days) -->
    <div class="stat bg-base-100 rounded-box shadow">
        <div class="stat-figure text-accent">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
            </svg>
        </div>
-        <div class="stat-title">Total Messages</div>
-        <div class="stat-value text-accent">{{ stats.total_messages }}</div>
-        <div class="stat-desc">All time</div>
-    </div>
-
-    <!-- Messages Today -->
-    <div class="stat bg-base-100 rounded-box shadow">
-        <div class="stat-figure text-info">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-        </div>
-        <div class="stat-title">Messages Today</div>
-        <div class="stat-value text-info">{{ stats.messages_today }}</div>
-        <div class="stat-desc">Last 24 hours</div>
+        <div class="stat-title">Messages</div>
+        <div class="stat-value text-accent">{{ stats.messages_7d }}</div>
+        <div class="stat-desc">Last 7 days</div>
    </div>
 </div>

@@ -239,8 +227,8 @@
                datasets: [{
                    label: 'Advertisements',
                    data: counts,
-                    borderColor: 'oklch(0.7 0.15 250)',
-                    backgroundColor: 'oklch(0.7 0.15 250 / 0.1)',
+                    borderColor: 'oklch(0.7 0.17 330)',
+                    backgroundColor: 'oklch(0.7 0.17 330 / 0.1)',
                    fill: true,
                    tension: 0.3,
                    pointRadius: 2,
--- a/src/meshcore_hub/web/templates/map.html
+++ b/src/meshcore_hub/web/templates/map.html
@@ -52,12 +52,6 @@
                    <!-- Populated dynamically -->
                </select>
            </div>
-            <div class="form-control">
-                <label class="label cursor-pointer gap-2 py-1">
-                    <span class="label-text">Infrastructure Only</span>
-                    <input type="checkbox" id="filter-infra" class="checkbox checkbox-sm checkbox-primary" />
-                </label>
-            </div>
            <button id="clear-filters" class="btn btn-ghost btn-sm">Clear Filters</button>
        </div>
    </div>
@@ -88,14 +82,10 @@
        <span class="text-lg">📍</span>
        <span>Other</span>
    </div>
-    <div class="flex items-center gap-1">
-        <span class="text-lg" style="filter: drop-shadow(0 0 4px gold);">📡</span>
-        <span>Infrastructure (gold glow)</span>
-    </div>
 </div>

 <div class="mt-2 text-sm opacity-70">
-    <p>Nodes are placed on the map based on their <code>lat</code> and <code>lon</code> tags. Infrastructure nodes are tagged with <code>role: infra</code>.</p>
+    <p>Nodes are placed on the map based on their <code>lat</code> and <code>lon</code> tags.</p>
 </div>
 {% endblock %}

@@ -120,23 +110,7 @@
        return type ? type.toLowerCase() : null;
    }

-    // Format relative time (e.g., "2m", "1h", "2d")
-    function formatRelativeTime(lastSeenStr) {
-        if (!lastSeenStr) return null;
-
-        const lastSeen = new Date(lastSeenStr);
-        const now = new Date();
-        const diffMs = now - lastSeen;
-        const diffSec = Math.floor(diffMs / 1000);
-        const diffMin = Math.floor(diffSec / 60);
-        const diffHour = Math.floor(diffMin / 60);
-        const diffDay = Math.floor(diffHour / 24);
-
-        if (diffDay > 0) return `${diffDay}d`;
-        if (diffHour > 0) return `${diffHour}h`;
-        if (diffMin > 0) return `${diffMin}m`;
-        return '<1m';
-    }
+    // formatRelativeTime is provided by /static/js/utils.js

    // Get emoji marker based on node type
    function getNodeEmoji(node) {
@@ -159,14 +133,13 @@
    // Create marker icon for a node
    function createNodeIcon(node) {
        const emoji = getNodeEmoji(node);
-        const infraGlow = node.is_infra ? 'filter: drop-shadow(0 0 4px gold);' : '';
        const displayName = node.name || '';
        const relativeTime = formatRelativeTime(node.last_seen);
        const timeDisplay = relativeTime ? ` (${relativeTime})` : '';
        return L.divIcon({
            className: 'custom-div-icon',
            html: `<div style="display: flex; align-items: center; gap: 2px;">
-                <span style="font-size: 24px; ${infraGlow} text-shadow: 0 0 3px #1a237e, 0 0 6px #1a237e, 0 1px 2px rgba(0,0,0,0.7);">${emoji}</span>
+                <span style="font-size: 24px; text-shadow: 0 0 3px #1a237e, 0 0 6px #1a237e, 0 1px 2px rgba(0,0,0,0.7);">${emoji}</span>
                <span style="font-size: 10px; font-weight: bold; color: #000; background: rgba(255,255,255,0.9); padding: 1px 4px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.3);">${displayName}${timeDisplay}</span>
            </div>`,
            iconSize: [82, 28],
@@ -186,8 +159,7 @@

        let roleHtml = '';
        if (node.role) {
-            const roleClass = node.is_infra ? 'badge-warning' : 'badge-ghost';
-            roleHtml = `<p><span class="opacity-70">Role:</span> <span class="badge badge-xs ${roleClass}">${node.role}</span></p>`;
+            roleHtml = `<p><span class="opacity-70">Role:</span> <span class="badge badge-xs badge-ghost">${node.role}</span></p>`;
        }

        const emoji = getNodeEmoji(node);
@@ -219,16 +191,12 @@
    function applyFiltersCore() {
        const typeFilter = document.getElementById('filter-type').value;
        const ownerFilter = document.getElementById('filter-owner').value;
-        const infraOnly = document.getElementById('filter-infra').checked;

        // Filter nodes
        const filteredNodes = allNodes.filter(node => {
            // Type filter (case-insensitive)
            if (typeFilter && normalizeType(node.adv_type) !== typeFilter) return false;

-            // Infrastructure filter
-            if (infraOnly && !node.is_infra) return false;
-
            // Owner filter
            if (ownerFilter) {
                if (!node.owner || node.owner.public_key !== ownerFilter) return false;
@@ -314,14 +282,12 @@
    function clearFilters() {
        document.getElementById('filter-type').value = '';
        document.getElementById('filter-owner').value = '';
-        document.getElementById('filter-infra').checked = false;
        applyFilters();
    }

    // Event listeners for filters
    document.getElementById('filter-type').addEventListener('change', applyFilters);
    document.getElementById('filter-owner').addEventListener('change', applyFilters);
-    document.getElementById('filter-infra').addEventListener('change', applyFilters);
    document.getElementById('clear-filters').addEventListener('click', clearFilters);

    // Fetch and display nodes
--- a/src/meshcore_hub/web/templates/messages.html
+++ b/src/meshcore_hub/web/templates/messages.html
@@ -57,19 +57,15 @@
                <th>Time</th>
                <th>From/Channel</th>
                <th>Message</th>
-                <th>Receiver</th>
-                <th>SNR</th>
+                <th class="text-center">SNR</th>
+                <th>Receivers</th>
            </tr>
        </thead>
        <tbody>
            {% for msg in messages %}
            <tr class="hover align-top">
-                <td>
-                    {% if msg.message_type == 'channel' %}
-                    <span class="badge badge-info badge-sm">Channel</span>
-                    {% else %}
-                    <span class="badge badge-success badge-sm">Direct</span>
-                    {% endif %}
+                <td class="text-lg" title="{{ msg.message_type|capitalize }}">
+                    {% if msg.message_type == 'channel' %}📻{% else %}👤{% endif %}
                </td>
                <td class="text-sm whitespace-nowrap">
                    {{ msg.received_at[:19].replace('T', ' ') if msg.received_at else '-' }}
@@ -86,47 +82,6 @@
                    {% endif %}
                </td>
                <td class="break-words max-w-md" style="white-space: pre-wrap;">{{ msg.text or '-' }}</td>
-                <td>
-                    {% if msg.receivers and msg.receivers|length > 1 %}
-                    <div class="dropdown dropdown-hover dropdown-end">
-                        <label tabindex="0" class="badge badge-outline badge-sm cursor-pointer">
-                            {{ msg.receivers|length }} receivers
-                        </label>
-                        <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-56">
-                            {% for recv in msg.receivers %}
-                            <li>
-                                <a href="/nodes/{{ recv.public_key }}" class="text-sm">
-                                    <span class="flex-1">{{ recv.tag_name or recv.name or recv.public_key[:12] + '...' }}</span>
-                                    {% if recv.snr is not none %}
-                                    <span class="badge badge-ghost badge-xs">{{ "%.1f"|format(recv.snr) }}</span>
-                                    {% endif %}
-                                </a>
-                            </li>
-                            {% endfor %}
-                        </ul>
-                    </div>
-                    {% elif msg.receivers and msg.receivers|length == 1 %}
-                    <a href="/nodes/{{ msg.receivers[0].public_key }}" class="link link-hover">
-                        {% if msg.receivers[0].tag_name or msg.receivers[0].name %}
-                        <div class="font-medium">{{ msg.receivers[0].tag_name or msg.receivers[0].name }}</div>
-                        <div class="text-xs font-mono opacity-70">{{ msg.receivers[0].public_key[:16] }}...</div>
-                        {% else %}
-                        <span class="font-mono text-sm">{{ msg.receivers[0].public_key[:16] }}...</span>
-                        {% endif %}
-                    </a>
-                    {% elif msg.received_by %}
-                    <a href="/nodes/{{ msg.received_by }}" class="link link-hover">
-                        {% if msg.receiver_tag_name or msg.receiver_name %}
-                        <div class="font-medium">{{ msg.receiver_tag_name or msg.receiver_name }}</div>
-                        <div class="text-xs font-mono opacity-70">{{ msg.received_by[:16] }}...</div>
-                        {% else %}
-                        <span class="font-mono text-sm">{{ msg.received_by[:16] }}...</span>
-                        {% endif %}
-                    </a>
-                    {% else %}
-                    <span class="opacity-50">-</span>
-                    {% endif %}
-                </td>
                <td class="text-center whitespace-nowrap">
                    {% if msg.snr is not none %}
                    <span class="badge badge-ghost badge-sm">{{ "%.1f"|format(msg.snr) }}</span>
@@ -134,6 +89,19 @@
                    -
                    {% endif %}
                </td>
+                <td>
+                    {% if msg.receivers and msg.receivers|length >= 1 %}
+                    <div class="flex gap-1">
+                        {% for recv in msg.receivers %}
+                        <a href="/nodes/{{ recv.public_key }}" class="text-lg hover:opacity-70" data-receiver-tooltip data-name="{{ recv.tag_name or recv.name or recv.public_key[:12] }}" data-timestamp="{{ recv.received_at }}">📡</a>
+                        {% endfor %}
+                    </div>
+                    {% elif msg.received_by %}
+                    <a href="/nodes/{{ msg.received_by }}" class="text-lg hover:opacity-70" title="{{ msg.receiver_tag_name or msg.receiver_name or msg.received_by[:12] }}">📡</a>
+                    {% else %}
+                    <span class="opacity-50">-</span>
+                    {% endif %}
+                </td>
            </tr>
            {% else %}
            <tr>
--- a/src/meshcore_hub/web/templates/network.html
+++ b/src/meshcore_hub/web/templates/network.html
@@ -22,8 +22,63 @@
 </div>
 {% endif %}

+<!-- Stats Cards -->
+<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+    <!-- Total Nodes -->
+    <div class="stat bg-base-100 rounded-box shadow">
+        <div class="stat-figure text-primary">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+            </svg>
+        </div>
+        <div class="stat-title">Total Nodes</div>
+        <div class="stat-value text-primary">{{ stats.total_nodes }}</div>
+        <div class="stat-desc">All discovered nodes</div>
+    </div>
+
+    <!-- Advertisements (7 days) -->
+    <div class="stat bg-base-100 rounded-box shadow">
+        <div class="stat-figure text-secondary">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
+            </svg>
+        </div>
+        <div class="stat-title">Advertisements</div>
+        <div class="stat-value text-secondary">{{ stats.advertisements_7d }}</div>
+        <div class="stat-desc">Last 7 days</div>
+    </div>
+
+    <!-- Messages (7 days) -->
+    <div class="stat bg-base-100 rounded-box shadow">
+        <div class="stat-figure text-accent">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+            </svg>
+        </div>
+        <div class="stat-title">Messages</div>
+        <div class="stat-value text-accent">{{ stats.messages_7d }}</div>
+        <div class="stat-desc">Last 7 days</div>
+    </div>
+</div>
+
 <!-- Activity Charts -->
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+    <!-- Node Count Chart -->
+    <div class="card bg-base-100 shadow-xl">
+        <div class="card-body">
+            <h2 class="card-title text-base">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                </svg>
+                Total Nodes
+            </h2>
+            <p class="text-xs opacity-70">Over time (last 7 days)</p>
+            <div class="h-32">
+                <canvas id="nodeChart"></canvas>
+            </div>
+        </div>
+    </div>
+
    <!-- Advertisements Chart -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
@@ -55,22 +110,6 @@
            </div>
        </div>
    </div>
-
-    <!-- Node Count Chart -->
-    <div class="card bg-base-100 shadow-xl">
-        <div class="card-body">
-            <h2 class="card-title text-base">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-                </svg>
-                Total Nodes
-            </h2>
-            <p class="text-xs opacity-70">Over time (last 7 days)</p>
-            <div class="h-32">
-                <canvas id="nodeChart"></canvas>
-            </div>
-        </div>
-    </div>
 </div>

 <!-- Additional Stats -->
@@ -163,27 +202,6 @@
    {% endif %}
 </div>

-<!-- Quick Actions -->
-<div class="flex gap-4 mt-8 flex-wrap">
-    <a href="/nodes" class="btn btn-primary">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-        </svg>
-        Browse Nodes
-    </a>
-    <a href="/messages" class="btn btn-secondary">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-        </svg>
-        View Messages
-    </a>
-    <a href="/map" class="btn btn-accent">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
-        </svg>
-        View Map
-    </a>
-</div>
 {% endblock %}

 {% block extra_scripts %}
@@ -232,7 +250,7 @@
        });
    }

-    // Advertisements chart
+    // Advertisements chart (secondary color - pink/magenta)
    const advertCtx = document.getElementById('advertChart');
    if (advertCtx && advertData.data && advertData.data.length > 0) {
        new Chart(advertCtx, {
@@ -242,8 +260,8 @@
                datasets: [{
                    label: 'Advertisements',
                    data: advertData.data.map(d => d.count),
-                    borderColor: 'oklch(0.7 0.15 250)',
-                    backgroundColor: 'oklch(0.7 0.15 250 / 0.1)',
+                    borderColor: 'oklch(0.7 0.17 330)',
+                    backgroundColor: 'oklch(0.7 0.17 330 / 0.1)',
                    fill: true,
                    tension: 0.3,
                    pointRadius: 2,
@@ -254,7 +272,7 @@
        });
    }

-    // Messages chart
+    // Messages chart (accent color - teal/cyan)
    const messageCtx = document.getElementById('messageChart');
    if (messageCtx && messageData.data && messageData.data.length > 0) {
        new Chart(messageCtx, {
@@ -264,8 +282,8 @@
                datasets: [{
                    label: 'Messages',
                    data: messageData.data.map(d => d.count),
-                    borderColor: 'oklch(0.7 0.15 160)',
-                    backgroundColor: 'oklch(0.7 0.15 160 / 0.1)',
+                    borderColor: 'oklch(0.75 0.18 180)',
+                    backgroundColor: 'oklch(0.75 0.18 180 / 0.1)',
                    fill: true,
                    tension: 0.3,
                    pointRadius: 2,
@@ -276,7 +294,7 @@
        });
    }

-    // Node count chart
+    // Node count chart (primary color - purple/blue)
    const nodeCtx = document.getElementById('nodeChart');
    if (nodeCtx && nodeData.data && nodeData.data.length > 0) {
        new Chart(nodeCtx, {
@@ -286,8 +304,8 @@
                datasets: [{
                    label: 'Total Nodes',
                    data: nodeData.data.map(d => d.count),
-                    borderColor: 'oklch(0.7 0.15 30)',
-                    backgroundColor: 'oklch(0.7 0.15 30 / 0.1)',
+                    borderColor: 'oklch(0.65 0.24 265)',
+                    backgroundColor: 'oklch(0.65 0.24 265 / 0.1)',
                    fill: true,
                    tension: 0.3,
                    pointRadius: 2,
--- a/src/meshcore_hub/web/templates/node_detail.html
+++ b/src/meshcore_hub/web/templates/node_detail.html
@@ -2,6 +2,22 @@

 {% block title %}{{ network_name }} - Node Details{% endblock %}

+{% block extra_head %}
+<style>
+    #node-map {
+        height: 300px;
+        border-radius: var(--rounded-box);
+    }
+    .leaflet-popup-content-wrapper {
+        background: oklch(var(--b1));
+        color: oklch(var(--bc));
+    }
+    .leaflet-popup-tip {
+        background: oklch(var(--b1));
+    }
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="breadcrumbs text-sm mb-4">
    <ul>
@@ -41,10 +57,18 @@
 <div class="card bg-base-100 shadow-xl mb-6">
    <div class="card-body">
        <h1 class="card-title text-2xl">
-            {{ ns.tag_name or node.name or 'Unnamed Node' }}
            {% if node.adv_type %}
-            <span class="badge badge-secondary">{{ node.adv_type }}</span>
+                {% if node.adv_type|lower == 'chat' %}
+                <span title="Chat">💬</span>
+                {% elif node.adv_type|lower == 'repeater' %}
+                <span title="Repeater">📡</span>
+                {% elif node.adv_type|lower == 'room' %}
+                <span title="Room">🪧</span>
+                {% else %}
+                <span title="{{ node.adv_type }}">📍</span>
+                {% endif %}
            {% endif %}
+            {{ ns.tag_name or node.name or 'Unnamed Node' }}
        </h1>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
@@ -61,32 +85,55 @@
            </div>
        </div>

-        <!-- Tags -->
-        {% if node.tags %}
-        <div class="mt-6">
-            <h3 class="font-semibold opacity-70 mb-2">Tags</h3>
-            <div class="overflow-x-auto">
-                <table class="table table-compact w-full">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Value</th>
-                            <th>Type</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for tag in node.tags %}
-                        <tr>
-                            <td class="font-mono">{{ tag.key }}</td>
-                            <td>{{ tag.value }}</td>
-                            <td class="opacity-70">{{ tag.value_type or 'string' }}</td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
+        <!-- Tags and Map Grid -->
+        {% set ns_map = namespace(lat=none, lon=none) %}
+        {% for tag in node.tags or [] %}
+            {% if tag.key == 'lat' %}
+                {% set ns_map.lat = tag.value %}
+            {% elif tag.key == 'lon' %}
+                {% set ns_map.lon = tag.value %}
+            {% endif %}
+        {% endfor %}
+
+        <div class="grid grid-cols-1 {% if ns_map.lat and ns_map.lon %}lg:grid-cols-2{% endif %} gap-6 mt-6">
+            <!-- Tags -->
+            {% if node.tags %}
+            <div>
+                <h3 class="font-semibold opacity-70 mb-2">Tags</h3>
+                <div class="overflow-x-auto">
+                    <table class="table table-compact w-full">
+                        <thead>
+                            <tr>
+                                <th>Key</th>
+                                <th>Value</th>
+                                <th>Type</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for tag in node.tags %}
+                            <tr>
+                                <td class="font-mono">{{ tag.key }}</td>
+                                <td>{{ tag.value }}</td>
+                                <td class="opacity-70">{{ tag.value_type or 'string' }}</td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
            </div>
+            {% endif %}
+
+            <!-- Location Map -->
+            {% if ns_map.lat and ns_map.lon %}
+            <div>
+                <h3 class="font-semibold opacity-70 mb-2">Location</h3>
+                <div id="node-map" class="mb-2"></div>
+                <div class="text-sm opacity-70">
+                    <p>Coordinates: {{ ns_map.lat }}, {{ ns_map.lon }}</p>
+                </div>
+            </div>
+            {% endif %}
        </div>
-        {% endif %}
    </div>
 </div>

@@ -208,3 +255,67 @@
 <a href="/nodes" class="btn btn-primary mt-4">Back to Nodes</a>
 {% endif %}
 {% endblock %}
+
+{% block extra_scripts %}
+{% if node %}
+{% set ns_map = namespace(lat=none, lon=none, name=none) %}
+{% for tag in node.tags or [] %}
+    {% if tag.key == 'lat' %}
+        {% set ns_map.lat = tag.value %}
+    {% elif tag.key == 'lon' %}
+        {% set ns_map.lon = tag.value %}
+    {% elif tag.key == 'name' %}
+        {% set ns_map.name = tag.value %}
+    {% endif %}
+{% endfor %}
+{% if ns_map.lat and ns_map.lon %}
+<script>
+    // Initialize map centered on the node's location
+    const nodeLat = {{ ns_map.lat }};
+    const nodeLon = {{ ns_map.lon }};
+    const nodeName = {{ (ns_map.name or node.name or 'Unnamed Node') | tojson }};
+    const nodeType = {{ (node.adv_type or '') | tojson }};
+    const publicKey = {{ node.public_key | tojson }};
+
+    const map = L.map('node-map').setView([nodeLat, nodeLon], 15);
+
+    // Add tile layer
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    // Get emoji marker based on node type
+    function getNodeEmoji(type) {
+        const normalizedType = type ? type.toLowerCase() : null;
+        if (normalizedType === 'chat') return '💬';
+        if (normalizedType === 'repeater') return '📡';
+        if (normalizedType === 'room') return '🪧';
+        return '📍';
+    }
+
+    // Create marker icon (just the emoji, no label)
+    const emoji = getNodeEmoji(nodeType);
+    const icon = L.divIcon({
+        className: 'custom-div-icon',
+        html: `<span style="font-size: 32px; text-shadow: 0 0 3px #1a237e, 0 0 6px #1a237e, 0 1px 2px rgba(0,0,0,0.7);">${emoji}</span>`,
+        iconSize: [32, 32],
+        iconAnchor: [16, 16]
+    });
+
+    // Add marker
+    const marker = L.marker([nodeLat, nodeLon], { icon: icon }).addTo(map);
+
+    // Add popup (shown on click, not by default)
+    marker.bindPopup(`
+        <div class="p-2">
+            <h3 class="font-bold text-lg mb-2">${emoji} ${nodeName}</h3>
+            <div class="space-y-1 text-sm">
+                ${nodeType ? `<p><span class="opacity-70">Type:</span> ${nodeType}</p>` : ''}
+                <p><span class="opacity-70">Coordinates:</span> ${nodeLat.toFixed(4)}, ${nodeLon.toFixed(4)}</p>
+            </div>
+        </div>
+    `);
+</script>
+{% endif %}
+{% endif %}
+{% endblock %}
--- a/src/meshcore_hub/web/templates/nodes.html
+++ b/src/meshcore_hub/web/templates/nodes.html
@@ -25,7 +25,7 @@
                <label class="label py-1">
                    <span class="label-text">Search</span>
                </label>
-                <input type="text" name="search" value="{{ search }}" placeholder="Name tag, node name, or public key..." class="input input-bordered input-sm w-64" />
+                <input type="text" name="search" value="{{ search }}" placeholder="Search by name, ID, or public key..." class="input input-bordered input-sm w-80" />
            </div>
            <div class="form-control">
                <label class="label py-1">
@@ -50,7 +50,6 @@
        <thead>
            <tr>
                <th>Node</th>
-                <th>Type</th>
                <th>Last Seen</th>
                <th>Tags</th>
            </tr>
@@ -65,28 +64,18 @@
            {% endfor %}
            <tr class="hover">
                <td>
-                    <a href="/nodes/{{ node.public_key }}" class="link link-hover">
-                        {% if ns.tag_name or node.name %}
-                        <div class="font-medium">{{ ns.tag_name or node.name }}</div>
-                        <div class="text-xs font-mono opacity-70">{{ node.public_key[:16] }}...</div>
-                        {% else %}
-                        <span class="font-mono text-sm">{{ node.public_key[:16] }}...</span>
-                        {% endif %}
+                    <a href="/nodes/{{ node.public_key }}" class="link link-hover flex items-center gap-2">
+                        <span class="text-lg" title="{{ node.adv_type or 'Unknown' }}">{% if node.adv_type and node.adv_type|lower == 'chat' %}💬{% elif node.adv_type and node.adv_type|lower == 'repeater' %}📡{% elif node.adv_type and node.adv_type|lower == 'room' %}🪧{% else %}📍{% endif %}</span>
+                        <div>
+                            {% if ns.tag_name or node.name %}
+                            <div class="font-medium">{{ ns.tag_name or node.name }}</div>
+                            <div class="text-xs font-mono opacity-70">{{ node.public_key[:16] }}...</div>
+                            {% else %}
+                            <span class="font-mono text-sm">{{ node.public_key[:16] }}...</span>
+                            {% endif %}
+                        </div>
                    </a>
                </td>
-                <td>
-                    {% if node.adv_type and node.adv_type|lower == 'chat' %}
-                    <span title="Chat">💬</span>
-                    {% elif node.adv_type and node.adv_type|lower == 'repeater' %}
-                    <span title="Repeater">📡</span>
-                    {% elif node.adv_type and node.adv_type|lower == 'room' %}
-                    <span title="Room">🪧</span>
-                    {% elif node.adv_type %}
-                    <span title="{{ node.adv_type }}">📍</span>
-                    {% else %}
-                    <span class="opacity-50">-</span>
-                    {% endif %}
-                </td>
                <td class="text-sm whitespace-nowrap">
                    {% if node.last_seen %}
                    {{ node.last_seen[:19].replace('T', ' ') }}
@@ -111,7 +100,7 @@
            </tr>
            {% else %}
            <tr>
-                <td colspan="4" class="text-center py-8 opacity-70">No nodes found.</td>
+                <td colspan="3" class="text-center py-8 opacity-70">No nodes found.</td>
            </tr>
            {% endfor %}
        </tbody>
--- a/tests/test_api/test_dashboard.py
+++ b/tests/test_api/test_dashboard.py
@@ -1,5 +1,11 @@
 """Tests for dashboard API routes."""

+from datetime import datetime, timedelta, timezone
+
+import pytest
+
+from meshcore_hub.common.models import Advertisement, Message, Node
+

 class TestDashboardStats:
    """Tests for GET /dashboard/stats endpoint."""
@@ -63,6 +69,21 @@ class TestDashboardHtml:
 class TestDashboardActivity:
    """Tests for GET /dashboard/activity endpoint."""

+    @pytest.fixture
+    def past_advertisement(self, api_db_session):
+        """Create an advertisement from yesterday (since today is excluded)."""
+        yesterday = datetime.now(timezone.utc) - timedelta(days=1)
+        advert = Advertisement(
+            public_key="abc123def456abc123def456abc123de",
+            name="TestNode",
+            adv_type="REPEATER",
+            received_at=yesterday,
+        )
+        api_db_session.add(advert)
+        api_db_session.commit()
+        api_db_session.refresh(advert)
+        return advert
+
    def test_get_activity_empty(self, client_no_auth):
        """Test getting activity with empty database."""
        response = client_no_auth.get("/api/v1/dashboard/activity")
@@ -91,8 +112,12 @@ class TestDashboardActivity:
        assert data["days"] == 90
        assert len(data["data"]) == 90

-    def test_get_activity_with_data(self, client_no_auth, sample_advertisement):
-        """Test getting activity with advertisement in database."""
+    def test_get_activity_with_data(self, client_no_auth, past_advertisement):
+        """Test getting activity with advertisement in database.
+
+        Note: Activity endpoints exclude today's data to avoid showing
+        incomplete stats early in the day.
+        """
        response = client_no_auth.get("/api/v1/dashboard/activity")
        assert response.status_code == 200
        data = response.json()
@@ -104,6 +129,21 @@ class TestDashboardActivity:
 class TestMessageActivity:
    """Tests for GET /dashboard/message-activity endpoint."""

+    @pytest.fixture
+    def past_message(self, api_db_session):
+        """Create a message from yesterday (since today is excluded)."""
+        yesterday = datetime.now(timezone.utc) - timedelta(days=1)
+        message = Message(
+            message_type="direct",
+            pubkey_prefix="abc123",
+            text="Hello World",
+            received_at=yesterday,
+        )
+        api_db_session.add(message)
+        api_db_session.commit()
+        api_db_session.refresh(message)
+        return message
+
    def test_get_message_activity_empty(self, client_no_auth):
        """Test getting message activity with empty database."""
        response = client_no_auth.get("/api/v1/dashboard/message-activity")
@@ -132,8 +172,12 @@ class TestMessageActivity:
        assert data["days"] == 90
        assert len(data["data"]) == 90

-    def test_get_message_activity_with_data(self, client_no_auth, sample_message):
-        """Test getting message activity with message in database."""
+    def test_get_message_activity_with_data(self, client_no_auth, past_message):
+        """Test getting message activity with message in database.
+
+        Note: Activity endpoints exclude today's data to avoid showing
+        incomplete stats early in the day.
+        """
        response = client_no_auth.get("/api/v1/dashboard/message-activity")
        assert response.status_code == 200
        data = response.json()
@@ -145,6 +189,23 @@ class TestMessageActivity:
 class TestNodeCountHistory:
    """Tests for GET /dashboard/node-count endpoint."""

+    @pytest.fixture
+    def past_node(self, api_db_session):
+        """Create a node from yesterday (since today is excluded)."""
+        yesterday = datetime.now(timezone.utc) - timedelta(days=1)
+        node = Node(
+            public_key="abc123def456abc123def456abc123de",
+            name="Test Node",
+            adv_type="REPEATER",
+            first_seen=yesterday,
+            last_seen=yesterday,
+            created_at=yesterday,
+        )
+        api_db_session.add(node)
+        api_db_session.commit()
+        api_db_session.refresh(node)
+        return node
+
    def test_get_node_count_empty(self, client_no_auth):
        """Test getting node count with empty database."""
        response = client_no_auth.get("/api/v1/dashboard/node-count")
@@ -173,8 +234,12 @@ class TestNodeCountHistory:
        assert data["days"] == 90
        assert len(data["data"]) == 90

-    def test_get_node_count_with_data(self, client_no_auth, sample_node):
-        """Test getting node count with node in database."""
+    def test_get_node_count_with_data(self, client_no_auth, past_node):
+        """Test getting node count with node in database.
+
+        Note: Activity endpoints exclude today's data to avoid showing
+        incomplete stats early in the day.
+        """
        response = client_no_auth.get("/api/v1/dashboard/node-count")
        assert response.status_code == 200
        data = response.json()
--- a/tests/test_web/test_nodes.py
+++ b/tests/test_web/test_nodes.py
@@ -91,7 +91,8 @@ class TestNodeDetailPage:
        assert response.status_code == 200
        # Should display node details
        assert "Node One" in response.text
-        assert "REPEATER" in response.text
+        # Node type is shown as emoji with title attribute
+        assert 'title="Repeater"' in response.text

    def test_node_detail_displays_public_key(
        self, client: TestClient, mock_http_client: MockHttpClient
Author	SHA1	Message	Date
Louis King	cd4f0b91dc	Various UI improvements	2025-12-08 22:07:46 +00:00
Louis King	a290db0491	Updated chart stats	2025-12-08 19:37:45 +00:00
Louis King	92b0b883e6	More website improvements	2025-12-08 17:07:39 +00:00
Louis King	9e621c0029	Fixed test	2025-12-08 16:42:13 +00:00
Louis King	a251f3a09f	Added map to node detail page, made title consistent with emoji	2025-12-08 16:37:53 +00:00
Louis King	0fdedfe5ba	Tidied Advert/Node search	2025-12-08 16:22:08 +00:00