feat: implement tracked IP management panel with tracking actions and UI updates

src/templates/jinja2/dashboard/index.html

@@ -59,7 +59,8 @@
         <a class="tab-button" :class="{ active: tab === 'ip-insight', disabled: !insightIp }" @click.prevent="insightIp && switchToIpInsight()" href="#ip-insight">
             IP Insight<span x-show="insightIp" x-text="' (' + insightIp + ')'"></span>
         </a>
-        <a class="tab-button tab-right" :class="{ active: tab === 'banlist' }" x-show="authenticated" x-cloak @click.prevent="switchToBanlist()" href="#banlist">IP Banlist</a>
+        <a class="tab-button tab-right" :class="{ active: tab === 'tracked-ips' }" x-show="authenticated" x-cloak @click.prevent="switchToTrackedIps()" href="#tracked-ips">Tracked IPs</a>
+        <a class="tab-button" :class="{ active: tab === 'banlist' }" x-show="authenticated" x-cloak @click.prevent="switchToBanlist()" href="#banlist">IP Banlist</a>
         {# Lock icon (not authenticated) #}
         <a class="tab-button tab-lock-btn" :class="{ 'tab-right': !authenticated }" @click.prevent="promptAuth()" x-show="!authenticated" href="#" title="Unlock protected panels">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
@@ -197,6 +198,11 @@
         </div>
     </div>
 
+    {# ==================== TRACKED IPS TAB (protected, loaded via HTMX with server-side auth) ==================== #}
+    <div x-show="tab === 'tracked-ips'" x-cloak>
+        <div id="tracked-ips-htmx-container"></div>
+    </div>
+
     {# ==================== IP BANLIST TAB (protected, loaded via HTMX with server-side auth) ==================== #}
     <div x-show="tab === 'banlist'" x-cloak>
         <div id="banlist-htmx-container"></div>

src/templates/jinja2/dashboard/partials/_ip_detail.html

@@ -12,7 +12,7 @@
             </span>
             {% endif %}
         </h1>
-        {# Ban/Unban actions — visible only when authenticated #}
+        {# Ban/Unban + Track/Untrack actions — visible only when authenticated #}
         <span class="ip-ban-actions" style="display: none; gap: 4px;">
             {% if stats.category and stats.category | lower == 'attacker' %}
             <button class="ban-icon-btn ban-icon-unban" onclick="ipBanAction('{{ ip_address | e }}', 'unban')" title="Unban">
@@ -25,6 +25,17 @@
                 <span class="ban-icon-tooltip">Add to banlist</span>
             </button>
             {% endif %}
+            {% if is_tracked %}
+            <button class="ban-icon-btn track-icon-untrack" onclick="ipTrackAction('{{ ip_address | e }}', 'untrack')" title="Untrack IP">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>
+                <span class="ban-icon-tooltip">Untrack</span>
+            </button>
+            {% else %}
+            <button class="ban-icon-btn track-icon-track" onclick="ipTrackAction('{{ ip_address | e }}', 'track')" title="Track IP">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
+                <span class="ban-icon-tooltip">Track</span>
+            </button>
+            {% endif %}
         </span>
     </div>
     {% if stats.city or stats.country %}

src/templates/jinja2/dashboard/partials/tracked_ips_panel.html

@@ -0,0 +1,89 @@
+{# IP Tracking management panel #}
+<div x-data="trackManagement()" x-init="init()">
+
+    {# Track IP form #}
+    <div class="table-container" style="margin-bottom: 20px;">
+        <h2>Tracked IPs</h2>
+        <p style="color: #8b949e; font-size: 14px; margin-bottom: 16px;">
+            Track an IP address to monitor its activity. You can also track IPs from the IP Insight page.
+        </p>
+        <form @submit.prevent="trackIp()" style="display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;">
+            <div style="flex: 1; min-width: 200px;">
+                <label style="display: block; color: #8b949e; font-size: 12px; margin-bottom: 4px;">IP Address</label>
+                <input type="text"
+                       x-model="newTrackIp"
+                       placeholder="e.g. 192.168.1.100"
+                       class="auth-modal-input"
+                       style="width: 100%;" />
+            </div>
+            <button type="submit" class="track-form-btn" :disabled="!newTrackIp || trackLoading">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
+                <span x-text="trackLoading ? 'Tracking...' : 'Track IP'"></span>
+            </button>
+        </form>
+        <p x-show="trackMessage" x-text="trackMessage" :style="{ color: trackSuccess ? '#3fb950' : '#f85149' }" style="margin-top: 10px; font-size: 13px;" x-cloak></p>
+    </div>
+
+    {# Tracked IPs list #}
+    <div class="table-container">
+        <h2>Currently Tracked</h2>
+        <div id="tracked-ips-container"
+             class="htmx-container"
+             hx-get="{{ dashboard_path }}/htmx/tracked-ips/list?page=1"
+             hx-trigger="load"
+             hx-swap="innerHTML">
+            <div class="htmx-indicator">Loading...</div>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('alpine:init', () => {
+    Alpine.data('trackManagement', () => ({
+        newTrackIp: '',
+        trackLoading: false,
+        trackMessage: '',
+        trackSuccess: false,
+
+        init() {},
+
+        async trackIp() {
+            if (!this.newTrackIp) return;
+            this.trackLoading = true;
+            this.trackMessage = '';
+            try {
+                const resp = await fetch(`${window.__DASHBOARD_PATH__}/api/track-ip`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    credentials: 'same-origin',
+                    body: JSON.stringify({ ip: this.newTrackIp, action: 'track' }),
+                });
+                const data = await resp.json();
+                if (resp.ok) {
+                    this.trackSuccess = true;
+                    this.trackMessage = `IP ${this.newTrackIp} is now being tracked`;
+                    this.newTrackIp = '';
+                    this.refreshList();
+                } else {
+                    this.trackSuccess = false;
+                    this.trackMessage = data.error || 'Failed to track IP';
+                }
+            } catch {
+                this.trackSuccess = false;
+                this.trackMessage = 'Request failed';
+            }
+            this.trackLoading = false;
+        },
+
+        refreshList() {
+            const container = document.getElementById('tracked-ips-container');
+            if (container && typeof htmx !== 'undefined') {
+                htmx.ajax('GET', `${window.__DASHBOARD_PATH__}/htmx/tracked-ips/list?page=1`, {
+                    target: '#tracked-ips-container',
+                    swap: 'innerHTML'
+                });
+            }
+        },
+    }));
+});
+</script>

src/templates/jinja2/dashboard/partials/tracked_ips_table.html

@@ -0,0 +1,55 @@
+{# HTMX fragment: Tracked IPs list #}
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+    <span class="pagination-info">Page {{ pagination.page }}/{{ pagination.total_pages }} &mdash; {{ pagination.total }} tracked</span>
+    <div style="display: flex; gap: 8px;">
+        <button class="pagination-btn"
+                hx-get="{{ dashboard_path }}/htmx/tracked-ips/list?page={{ pagination.page - 1 }}"
+                hx-target="closest .htmx-container"
+                hx-swap="innerHTML"
+                {% if pagination.page <= 1 %}disabled{% endif %}>Prev</button>
+        <button class="pagination-btn"
+                hx-get="{{ dashboard_path }}/htmx/tracked-ips/list?page={{ pagination.page + 1 }}"
+                hx-target="closest .htmx-container"
+                hx-swap="innerHTML"
+                {% if pagination.page >= pagination.total_pages %}disabled{% endif %}>Next</button>
+    </div>
+</div>
+<table class="ip-stats-table">
+    <thead>
+        <tr>
+            <th>#</th>
+            <th>IP Address</th>
+            <th>Category</th>
+            <th>Total Requests</th>
+            <th>Location</th>
+            <th>Last Seen</th>
+            <th>Tracked Since</th>
+            <th style="width: 80px;"></th>
+        </tr>
+    </thead>
+    <tbody>
+        {% for ip in items %}
+        <tr>
+            <td class="rank">{{ loop.index + (pagination.page - 1) * pagination.page_size }}</td>
+            <td>{{ ip.ip | e }}</td>
+            <td><span class="category-badge category-{{ ip.category | default('unknown') | replace('_', '-') }}">{{ ip.category | default('unknown') | replace('_', ' ') | title }}</span></td>
+            <td>{{ ip.total_requests }}</td>
+            <td>{{ ip.city | default('') | e }}{% if ip.city and ip.country_code %}, {% endif %}{{ ip.country_code | default('N/A') | e }}</td>
+            <td>{{ ip.last_seen | format_ts }}</td>
+            <td>{{ ip.tracked_since | format_ts }}</td>
+            <td style="display: flex; gap: 4px;">
+                <button class="ban-icon-btn track-icon-inspect" onclick="openIpInsight('{{ ip.ip | e }}')" title="Inspect">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"/></svg>
+                    <span class="ban-icon-tooltip">Inspect</span>
+                </button>
+                <button class="ban-icon-btn track-icon-untrack" onclick="ipTrackAction('{{ ip.ip | e }}', 'untrack')" title="Untrack">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>
+                    <span class="ban-icon-tooltip">Untrack</span>
+                </button>
+            </td>
+        </tr>
+        {% else %}
+        <tr><td colspan="8" class="empty-state">No tracked IPs</td></tr>
+        {% endfor %}
+    </tbody>
+</table>

src/templates/static/css/dashboard.css

@@ -1338,7 +1338,7 @@ tbody {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 4px;
+    padding: 6px;
     background: none;
     border: none;
     border-radius: 4px;
@@ -1346,12 +1346,12 @@ tbody {
     transition: color 0.2s, background 0.2s;
 }
 .ban-icon-btn svg {
-    width: 18px;
-    height: 18px;
+    width: 24px;
+    height: 24px;
     fill: currentColor;
 }
 .ban-icon-btn .material-symbols-outlined {
-    font-size: 20px;
+    font-size: 26px;
 }
 .ban-icon-unban {
     color: #3fb950;
@@ -1392,6 +1392,53 @@ tbody {
     opacity: 1;
 }
 
+/* IP Tracking buttons */
+.track-form-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 10px 18px;
+    background: rgba(88, 166, 255, 0.15);
+    color: #58a6ff;
+    border: 1px solid rgba(88, 166, 255, 0.3);
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+}
+.track-form-btn:hover:not(:disabled) {
+    background: rgba(88, 166, 255, 0.3);
+    border-color: rgba(88, 166, 255, 0.5);
+}
+.track-form-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+.track-form-btn .material-symbols-outlined {
+    font-size: 18px;
+}
+.track-icon-track {
+    color: #58a6ff;
+}
+.track-icon-track:hover {
+    background: rgba(88, 166, 255, 0.15);
+}
+.track-icon-untrack {
+    color: #8b949e;
+}
+.track-icon-untrack:hover {
+    color: #c9d1d9;
+    background: rgba(139, 148, 158, 0.15);
+}
+.track-icon-inspect {
+    color: #d2a8ff;
+}
+.track-icon-inspect:hover {
+    background: rgba(210, 168, 255, 0.15);
+}
+
 /* Custom confirm/alert modal */
 .krawl-modal-overlay {
     position: fixed;

src/templates/static/js/dashboard.js

@@ -48,6 +48,8 @@ document.addEventListener('alpine:init', () => {
                     this.switchToAttacks();
                 } else if (h === 'banlist') {
                     if (this.authenticated) this.switchToBanlist();
+                } else if (h === 'tracked-ips') {
+                    if (this.authenticated) this.switchToTrackedIps();
                 } else if (h !== 'ip-insight') {
                     if (this.tab !== 'ip-insight') {
                         this.switchToOverview();
@@ -91,6 +93,21 @@ document.addEventListener('alpine:init', () => {
             });
         },
 
+        switchToTrackedIps() {
+            if (!this.authenticated) return;
+            this.tab = 'tracked-ips';
+            window.location.hash = '#tracked-ips';
+            this.$nextTick(() => {
+                const container = document.getElementById('tracked-ips-htmx-container');
+                if (container && typeof htmx !== 'undefined') {
+                    htmx.ajax('GET', `${this.dashboardPath}/htmx/tracked-ips`, {
+                        target: '#tracked-ips-htmx-container',
+                        swap: 'innerHTML'
+                    });
+                }
+            });
+        },
+
         async logout() {
             try {
                 await fetch(`${this.dashboardPath}/api/auth/logout`, {
@@ -99,7 +116,7 @@ document.addEventListener('alpine:init', () => {
                 });
             } catch {}
             this.authenticated = false;
-            if (this.tab === 'banlist') this.switchToOverview();
+            if (this.tab === 'banlist' || this.tab === 'tracked-ips') this.switchToOverview();
         },
 
         promptAuth() {
@@ -357,6 +374,43 @@ window.ipBanAction = async function(ip, action) {
     }
 };
 
+// Global track action for IP insight page (auth-gated)
+window.ipTrackAction = async function(ip, action) {
+    const data = getAlpineData('[x-data="dashboardApp()"]');
+    if (!data || !data.authenticated) {
+        if (data && typeof data.promptAuth === 'function') data.promptAuth();
+        return;
+    }
+    const safeIp = escapeHtml(ip);
+    const label = action === 'track' ? 'track' : 'untrack';
+    const confirmed = await krawlModal.confirm(`Are you sure you want to ${label} IP <strong>${safeIp}</strong>?`);
+    if (!confirmed) return;
+    try {
+        const resp = await fetch(`${window.__DASHBOARD_PATH__}/api/track-ip`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'same-origin',
+            body: JSON.stringify({ ip, action }),
+        });
+        const result = await resp.json().catch(() => ({}));
+        if (resp.ok) {
+            krawlModal.success(escapeHtml(result.message || `${label} successful for ${ip}`));
+            // Refresh tracked IPs list if visible
+            const container = document.getElementById('tracked-ips-container');
+            if (container && typeof htmx !== 'undefined') {
+                htmx.ajax('GET', `${window.__DASHBOARD_PATH__}/htmx/tracked-ips/list?page=1`, {
+                    target: '#tracked-ips-container',
+                    swap: 'innerHTML'
+                });
+            }
+        } else {
+            krawlModal.error(escapeHtml(result.error || `Failed to ${label} IP ${ip}`));
+        }
+    } catch {
+        krawlModal.error('Request failed');
+    }
+};
+
 // Show/hide ban action buttons based on auth state
 function updateBanActionVisibility(authenticated) {
     document.querySelectorAll('.ip-ban-actions').forEach(el => {