Updated themes a tad

CHANGELOG.md

@@ -0,0 +1,25 @@
+## [0.3.0] - 2026-10-08
+
+### 🚀 Features
+
+- Added Auto Labeling to Montior Tab. When sending hosts from the scan tab, it will bring their hostnames over to the label section. When adding a one off host to the montior tab, it will auto query it's hostname. You can also edit labels by double clicking. Closes #3
+- Added Always on Top Toggle. Closes #5
+- Added New Theme
+
+### 🐛 Bug Fixes
+
+- Status Colors on Monitor tab now reflect status of host. Closes #7
+- Removed unused function.
+- Fixed Screen Refresh Bug on Monitor Tab. Now When You Go To Change a Label While the Monitor Is Running. The Page Stops Refreshing Until You’re Done Changing the Name. This Is To Prevent Your Text Box From Being Deselected When the Table Refreshes.
+## [0.2.0] - 2026-09-24
+
+### 🚀 Features
+
+- Added changelog
+- Added Themes
+- Added Virtual Scrolling. This allows us to scan a whole /16 subnet without overloading the UI or using a lot of RAM.
+
+### 🐛 Bug Fixes
+
+- Fixed updater to only check for newer version using proper semver checking. Before it only checked if the current in use version was different than what was available.
+## [0.1.0] - 2026-09-23

LICENSE.md

@@ -625,7 +625,7 @@ state the exclusion of warranty; and each file should have at least
 the "copyright" line and a pointer to where the full notice is found.
 
     Argus, an all in one network utility
-    Copyright (C) 2026  Jamse Brotosky
+    Copyright (C) 2026  James Brotosky
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published

cliff.toml

@@ -0,0 +1,94 @@
+# git-cliff ~ configuration file
+# https://git-cliff.org/docs/configuration
+
+
+[changelog]
+# A Tera template to be rendered for each release in the changelog.
+# See https://keats.github.io/tera/docs/#introduction
+body = """
+{% if version %}\
+    ## [{{ version | trim_start_matches(pat="v") }}] - {{ timestamp | date(format="%Y-%m-%d") }}
+{% else %}\
+    ## [unreleased]
+{% endif %}\
+{% for group, commits in commits | group_by(attribute="group") %}
+    ### {{ group | striptags | trim | upper_first }}
+    {% for commit in commits %}
+        - {% if commit.scope %}*({{ commit.scope }})* {% endif %}\
+            {% if commit.breaking %}[**breaking**] {% endif %}\
+            {{ commit.message | upper_first }}\
+    {% endfor %}
+{% endfor %}
+"""
+# Remove leading and trailing whitespaces from the changelog's body.
+trim = true
+# Render body even when there are no releases to process.
+render_always = true
+# An array of regex based postprocessors to modify the changelog.
+postprocessors = [
+    # Replace the placeholder <REPO> with a URL.
+    #{ pattern = '<REPO>', replace = "https://github.com/orhun/git-cliff" },
+]
+# render body even when there are no releases to process
+# render_always = true
+# output file path
+# output = "test.md"
+
+[git]
+# Parse commits according to the conventional commits specification.
+# See https://www.conventionalcommits.org
+conventional_commits = true
+# Exclude commits that do not match the conventional commits specification.
+filter_unconventional = true
+# Require all commits to be conventional.
+# Takes precedence over filter_unconventional.
+require_conventional = false
+# Split commits on newlines, treating each line as an individual commit.
+split_commits = false
+# An array of regex based parsers to modify commit messages prior to further processing.
+commit_preprocessors = [
+    # Replace issue numbers with link templates to be updated in `changelog.postprocessors`.
+    #{ pattern = '\((\w+\s)?#([0-9]+)\)', replace = "([#${2}](<REPO>/issues/${2}))"},
+    # Check spelling of the commit message using https://github.com/crate-ci/typos.
+    # If the spelling is incorrect, it will be fixed automatically.
+    #{ pattern = '.*', replace_command = 'typos --write-changes -' },
+]
+# Prevent commits that are breaking from being excluded by commit parsers.
+protect_breaking_commits = false
+# An array of regex based parsers for extracting data from the commit message.
+# Assigns commits to groups.
+# Optionally sets the commit's scope and can decide to exclude commits from further processing.
+commit_parsers = [
+    { message = "^feat", group = "<!-- 0 -->🚀 Features" },
+    { message = "^fix", group = "<!-- 1 -->🐛 Bug Fixes" },
+    { message = "^doc", group = "<!-- 3 -->📚 Documentation" },
+    { message = "^perf", group = "<!-- 4 -->⚡ Performance" },
+    { message = "^refactor", group = "<!-- 2 -->🚜 Refactor" },
+    { message = "^style", group = "<!-- 5 -->🎨 Styling" },
+    { message = "^test", group = "<!-- 6 -->🧪 Testing" },
+    { message = "^chore\\(release\\): prepare for", skip = true },
+    { message = "^chore\\(deps.*\\)", skip = true },
+    { message = "^chore\\(pr\\)", skip = true },
+    { message = "^chore\\(pull\\)", skip = true },
+    { message = "^chore|^ci", group = "<!-- 7 -->⚙️ Miscellaneous Tasks" },
+    { body = ".*security", group = "<!-- 8 -->🛡️ Security" },
+    { message = "^revert", group = "<!-- 9 -->◀️ Revert" },
+    { message = ".*", group = "<!-- 10 -->💼 Other" },
+]
+# Exclude commits that are not matched by any commit parser.
+filter_commits = false
+# Fail on a commit that is not matched by any commit parser.
+fail_on_unmatched_commit = false
+# An array of link parsers for extracting external references, and turning them into URLs, using regex.
+link_parsers = []
+# Include only the tags that belong to the current branch.
+use_branch_tags = false
+# Order releases topologically instead of chronologically.
+topo_order = false
+# Order commits topologically instead of chronologically.
+topo_order_commits = true
+# Order of commits in each group/release within the changelog.
+# Allowed values: newest, oldest
+sort_commits = "oldest"
+# Process submodules commits
+recurse_submodules = false

src-tauri/Cargo.lock

@@ -49,7 +49,7 @@ checksum = "330a5ed07fa54e4702c9d6c4174f74427fc0ef6e214bbd677ae50a5099946470"
 
 [[package]]
 name = "argus"
-version = "0.1.0"
+version = "0.3.0"
 dependencies = [
  "csv",
  "dns-lookup",
@@ -58,7 +58,9 @@ dependencies = [
  "libc",
  "open",
  "ping-async",
+ "pulldown-cmark",
  "reqwest 0.12.28",
+ "semver",
  "serde",
  "serde_json",
  "tauri",
@@ -1367,6 +1369,15 @@ dependencies = [
  "version_check",
 ]
 
+[[package]]
+name = "getopts"
+version = "0.2.24"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cfe4fbac503b8d1f88e6676011885f34b7174f46e59956bba534ba83abded4df"
+dependencies = [
+ "unicode-width",
+]
+
 [[package]]
 name = "getrandom"
 version = "0.2.17"
@@ -3006,6 +3017,25 @@ dependencies = [
  "unicode-ident",
 ]
 
+[[package]]
+name = "pulldown-cmark"
+version = "0.13.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e9f068eba8e7071c5f9511831b44f32c740d5adf574e990f946ddb53db2f314e"
+dependencies = [
+ "bitflags 2.13.2",
+ "getopts",
+ "memchr",
+ "pulldown-cmark-escape",
+ "unicase",
+]
+
+[[package]]
+name = "pulldown-cmark-escape"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "007d8adb5ddab6f8e3f491ac63566a7d5002cc7ed73901f72057943fa71ae1ae"
+
 [[package]]
 name = "quick-xml"
 version = "0.42.0"
@@ -4738,6 +4768,12 @@ dependencies = [
  "unic-common",
 ]
 
+[[package]]
+name = "unicase"
+version = "2.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dbc4bc3a9f746d862c45cb89d705aa10f187bb96c76001afab07a0d35ce60142"
+
 [[package]]
 name = "unicode-ident"
 version = "1.0.26"
@@ -4750,6 +4786,12 @@ version = "1.13.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c6f5d3c3b1bf09027a88a6bc961fc00497d651009560b5463668dc81b0fa87a8"
 
+[[package]]
+name = "unicode-width"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b4ac048d71ede7ee76d585517add45da530660ef4390e49b098733c6e897f254"
+
 [[package]]
 name = "untrusted"
 version = "0.9.0"

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "argus"
-version = "0.1.0"
+version = "0.3.0"
 description = "An All in One Network Utility"
 authors = ["James Brotosky <james.brotosky@racooncity.org"]
 edition = "2021"
@@ -33,6 +33,8 @@ csv = "1"
 open = "5.4.4"
 reqwest = { version = "0.12", features = ["json"] }
 libc = "0.2.189"
+pulldown-cmark = { version = "0.13.4", features = ["html"] }
+semver = "1.0.28"
 
 [target.'cfg(windows)'.dependencies]
 is_elevated = "0.1"

src-tauri/capabilities/default.json

@@ -6,6 +6,7 @@
   "permissions": [
     "core:default",
     "opener:default",
-    "dialog:default"
+    "dialog:default",
+    "core:window:allow-set-always-on-top"
   ]
 }

src-tauri/src/commands/changelog.rs

@@ -0,0 +1,16 @@
+use pulldown_cmark::{Options, Parser, html};
+
+const CHANGELOG_MD: &str = include_str!("../../../CHANGELOG.md");
+
+#[tauri::command]
+pub async fn get_changelog() -> Result<String, String> {
+    let options = Options::ENABLE_HEADING_ATTRIBUTES
+        | Options::ENABLE_STRIKETHROUGH
+        | Options::ENABLE_TABLES;
+
+    let parser = Parser::new_ext(CHANGELOG_MD, options);
+    let mut html_output = String::new();
+    html::push_html(&mut html_output, parser);
+
+    Ok(html_output)
+}

src-tauri/src/commands/mod.rs

@@ -1,4 +1,5 @@
 pub mod actions;
+pub mod changelog;
 pub mod export;
 pub mod monitor;
 pub mod nmap;

src-tauri/src/commands/monitor.rs

@@ -180,3 +180,19 @@ pub async fn monitor_stop() -> Result<(), String> {
     }
     Ok(())
 }
+#[tauri::command]
+pub async fn monitor_update_label(ip: String, label: String) -> Result<(), String> {
+    let parsed: IpAddr = ip.parse().map_err(|e| format!("Invalid IP: {}", e))?;
+    let state = get_monitor();
+    let mut guard = state.lock().await;
+    if let Some(entry) = guard.entries.get_mut(&parsed) {
+        entry.label = if label.is_empty() { None } else { Some(label) };
+    }
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn monitor_resolve_host(ip: String) -> Result<Option<String>, String> {
+    let parsed: IpAddr = ip.parse().map_err(|e| format!("Invalid IP: {}", e))?;
+    Ok(crate::net::dns::reverse_lookup(parsed).await)
+}

src-tauri/src/commands/updater.rs

@@ -1,7 +1,8 @@
 use serde::{Deserialize, Serialize};
 use tauri::AppHandle;
 
-const UPDATE_URL: &str = "https://git.racooncity.org/api/v1/repos/mysticmomba/argus/releases/latest";
+const UPDATE_URL: &str =
+    "https://git.racooncity.org/api/v1/repos/mysticmomba/argus/releases/latest";
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct UpdateInfo {
@@ -29,10 +30,7 @@ pub async fn check_for_update(app: AppHandle) -> Result<Option<UpdateInfo>, Stri
         .as_str()
         .ok_or_else(|| "No tag_name in response".to_string())?;
 
-    let html_url = body["html_url"]
-        .as_str()
-        .unwrap_or("")
-        .to_string();
+    let html_url = body["html_url"].as_str().unwrap_or("").to_string();
 
     let notes = body["body"]
         .as_str()
@@ -42,7 +40,12 @@ pub async fn check_for_update(app: AppHandle) -> Result<Option<UpdateInfo>, Stri
     let remote_version = tag.strip_prefix('v').unwrap_or(tag);
     let current = app.package_info().version.to_string();
 
-    if remote_version != current {
+    let remote_semver = semver::Version::parse(remote_version)
+        .map_err(|e| format!("Invalid remote version '{}': {}", remote_version, e))?;
+    let current_semver = semver::Version::parse(&current)
+        .map_err(|e| format!("Invalid current version '{}': {}", current, e))?;
+
+    if remote_semver > current_semver {
         Ok(Some(UpdateInfo {
             version: remote_version.to_string(),
             url: html_url,

src-tauri/src/lib.rs

@@ -31,6 +31,9 @@ pub fn run() {
             commands::monitor::monitor_stop,
             commands::updater::check_for_update,
             commands::actions::check_privileges,
+            commands::changelog::get_changelog,
+            commands::monitor::monitor_update_label,
+            commands::monitor::monitor_resolve_host
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src-tauri/src/net/dns.rs

@@ -1,5 +1,4 @@
 use std::net::IpAddr;
-use tokio::task::JoinSet;
 
 /// Perform reverse DNS lookup on a single IP.
 /// Returns the hostname if found, None otherwise.
@@ -19,32 +18,3 @@ pub async fn reverse_lookup(ip: IpAddr) -> Option<String> {
         _ => None,
     }
 }
-
-/// Perform reverse DNS lookups on a batch of IPs concurrently.
-/// Returns a Vec of (IpAddr, Option<hostname>) pairs.
-pub async fn reverse_lookup_batch(
-    ips: &[IpAddr],
-    max_concurrent: usize,
-) -> Vec<(IpAddr, Option<String>)> {
-    let mut results = Vec::with_capacity(ips.len());
-
-    for chunk in ips.chunks(max_concurrent) {
-        let mut join_set = JoinSet::new();
-
-        for &ip in chunk {
-            join_set.spawn(async move {
-                let hostname = reverse_lookup(ip).await;
-                (ip, hostname)
-            });
-        }
-
-        while let Some(result) = join_set.join_next().await {
-            match result {
-                Ok(pair) => results.push(pair),
-                Err(e) => tracing::warn!("DNS lookup task panicked: {}", e),
-            }
-        }
-    }
-
-    results
-}

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "argus",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "identifier": "io.argus.app",
   "build": {
     "frontendDist": "../src"
@@ -10,7 +10,7 @@
     "withGlobalTauri": true,
     "windows": [
       {
-        "title": "argus",
+        "title": "Argus",
         "width": 800,
         "height": 600
       }
@@ -22,6 +22,7 @@
   "bundle": {
     "active": true,
     "targets": "all",
+    "copyright": "Copyright \u00A9 2026 James Brotosky. Licensed under AGPLv3. All rights reserved.",
     "windows": {
       "webviewInstallMode": {
         "type": "embedBootstrapper"

src/index.html

@@ -199,6 +199,24 @@
   <!-- Status Bar -->
   <div id="status-bar">
     <span class="status-bar-item" id="status-bar-version">Argus</span>
+    <button id="btn-changelog" class="status-bar-btn">Changelog</button>
+    <label class="toggle-label status-bar-toggle">
+      <input type="checkbox" id="chk-always-on-top" />
+      <span>Always on Top</span>
+    </label>
+    <select id="theme-picker" class="theme-picker">
+      <option value="cyber">Cyber</option>
+      <option value="midnight">Midnight</option>
+      <option value="dracula">Dracula</option>
+      <option value="nord">Nord</option>
+      <option value="solarized">Solarized Dark</option>
+      <option value="mocha">Catppuccin Mocha</option>
+      <option value="onedark">One Dark</option>
+      <option value="rosepine">Rosé Pine</option>
+      <option value="rosepine-moon">Rosé Pine Moon</option>
+      <option value="tokyonight">Tokyo Night</option>
+      <option value="iceberg">Iceberg</option>
+    </select>
     <span class="status-bar-item" id="privilege-status">unprivileged</span>
   </div>
 
@@ -212,6 +230,16 @@
       <div id="traceroute-output" class="traceroute-output"></div>
     </div>
   </div>
+  <!-- Changelog Modal -->
+  <div id="changelog-modal" class="modal-overlay">
+    <div class="modal-panel" style="width: 700px;">
+      <div class="modal-header">
+        <span class="modal-title">Changelog</span>
+        <button id="changelog-close" class="modal-close">&times;</button>
+      </div>
+      <div id="changelog-content" class="changelog-content"></div>
+    </div>
+  </div>
   <!-- Context Menu -->
   <div id="context-menu" class="context-menu" hidden>
     <button class="ctx-item" data-action="copy-ip">Copy IP</button>
@@ -225,7 +253,7 @@
     <button class="ctx-item" data-action="send-monitor">Send to Monitor</button>
     <button class="ctx-item" data-action="send-nmap">Send to Nmap</button>
   </div>
-
+  <div id="crt-overlay"></div>
   <script src="main.js"></script>
 </body>
 

src/main.js

@@ -1,12 +1,104 @@
 const { invoke } = window.__TAURI__.core;
 const { listen } = window.__TAURI__.event;
+var theme = (() => {
+  var STORAGE_KEY = 'argus-theme';
+
+  function get() {
+    try {
+      return localStorage.getItem(STORAGE_KEY) || 'cyber';
+    } catch (e) {
+      return 'cyber';
+    }
+  }
+
+  function set(name) {
+    if (name === 'cyber') {
+      document.documentElement.removeAttribute('data-theme');
+    } else {
+      document.documentElement.setAttribute('data-theme', name);
+    }
+    try {
+      localStorage.setItem(STORAGE_KEY, name);
+    } catch (e) { }
+  }
+
+  var HACKER_KEY = 'argus-hacker-unlocked';
+
+  function isHackerUnlocked() {
+    try {
+      return localStorage.getItem(HACKER_KEY) === 'true';
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function unlockHacker() {
+    try {
+      localStorage.setItem(HACKER_KEY, 'true');
+    } catch (e) { }
+    addHackerOption();
+  }
+
+  function addHackerOption() {
+    var picker = document.getElementById('theme-picker');
+    if (!picker.querySelector('option[value="hacker"]')) {
+      var opt = document.createElement('option');
+      opt.value = 'hacker';
+      opt.textContent = '\u2588 H4CK3R';
+      picker.appendChild(opt);
+    }
+  }
+
+  function init() {
+    var saved = get();
+    set(saved);
+
+    // Add hacker option if previously unlocked
+    if (isHackerUnlocked()) {
+      addHackerOption();
+    }
+
+    var picker = document.getElementById('theme-picker');
+    picker.value = saved;
+    picker.addEventListener('change', function () {
+      set(picker.value);
+    });
+
+    // Easter egg: listen on the scan input
+    var scanInput = document.getElementById('ip-range-input');
+    scanInput.addEventListener('input', function () {
+      var val = scanInput.value.toLowerCase().trim();
+      if (val === 'all your base are belong to us') {
+        if (!isHackerUnlocked()) {
+          unlockHacker();
+          set('hacker');
+          picker.value = 'hacker';
+          scanInput.value = '';
+          console.log('%c> ACCESS GRANTED', 'color: #00ff41; font-size: 20px; font-family: monospace;');
+          console.log('%c> HACKER THEME UNLOCKED', 'color: #00ff41; font-size: 14px; font-family: monospace;');
+        }
+      }
+    });
+  }
+
+  // Apply immediately (before DOMContentLoaded) to prevent flash
+  set(get());
+
+  return { init };
+})();
 const table = (() => {
+  var dirty = false;
+  var flushTimer = null;
+  var ipIndex = {};
   let data = [];
   let filtered = [];
   let sortKey = 'ip';
   let sortDir = 'asc';
   let filterText = '';
   let checkedIps = new Set();
+  var ROW_HEIGHT = 32;
+  var BUFFER_ROWS = 20;
+  var scrollContainer = null;
 
   function ipToNum(ip) {
     const parts = String(ip).split('.');
@@ -155,20 +247,61 @@ const table = (() => {
   }
 
   function render() {
-    const tbody = document.getElementById('results-body');
-    const count = document.getElementById('host-count');
+    var tbody = document.getElementById('results-body');
+    var count = document.getElementById('host-count');
     if (!tbody) return;
+
     expandedIp = null;
 
-    const rows = filtered.map((host) => {
-      const ip = host.ip;
-      const status = host.status || 'Unknown';
-      const cls = 'status-' + status.toLowerCase();
-      const rtt = host.ping ? host.ping.rtt_ms.toFixed(1) : '-';
-      const hostname = host.hostname || '-';
+    if (!scrollContainer) {
+      scrollContainer = document.getElementById('results-table-container');
+      scrollContainer.addEventListener('scroll', onScroll);
+    }
 
-      const isChecked = checkedIps.has(ip) ? 'checked' : '';
-      return '<tr data-ip="' + ip + '">'
+    renderVisible();
+
+    if (count) {
+      var up = data.filter(function (h) { return h.status === 'Up'; }).length;
+      count.textContent = up + ' up / ' + data.length + ' total';
+    }
+
+    if (columns && columns.apply) columns.apply();
+  }
+
+  function renderVisible() {
+    var tbody = document.getElementById('results-body');
+    if (!tbody || !scrollContainer) return;
+
+    var totalRows = filtered.length;
+    var viewHeight = scrollContainer.clientHeight;
+    var scrollTop = scrollContainer.scrollTop;
+    var headerHeight = 36;
+
+    var startIdx = Math.max(0, Math.floor((scrollTop - headerHeight) / ROW_HEIGHT) - BUFFER_ROWS);
+    var visibleCount = Math.ceil(viewHeight / ROW_HEIGHT) + (BUFFER_ROWS * 2);
+    var endIdx = Math.min(totalRows, startIdx + visibleCount);
+
+    var topSpace = startIdx * ROW_HEIGHT;
+    var bottomSpace = (totalRows - endIdx) * ROW_HEIGHT;
+
+    var colCount = document.querySelectorAll('#results-table th').length;
+
+    var html = '';
+
+    if (topSpace > 0) {
+      html += '<tr class="virtual-spacer"><td colspan="' + colCount + '" style="height:' + topSpace + 'px"></td></tr>';
+    }
+
+    for (var i = startIdx; i < endIdx; i++) {
+      var host = filtered[i];
+      var ip = host.ip;
+      var status = host.status || 'Unknown';
+      var cls = 'status-' + status.toLowerCase();
+      var rtt = host.ping ? host.ping.rtt_ms.toFixed(1) : '-';
+      var hostname = host.hostname || '-';
+      var isChecked = checkedIps.has(ip) ? 'checked' : '';
+
+      html += '<tr data-ip="' + ip + '">'
         + '<td class="col-check"><input type="checkbox" class="row-check" ' + isChecked + ' /></td>'
         + '<td>' + ip + '</td>'
         + '<td class="' + cls + '">' + status + '</td>'
@@ -176,24 +309,43 @@ const table = (() => {
         + '<td>' + hostname + '</td>'
         + '<td class="ports-cell">' + formatPorts(host) + '</td>'
         + '</tr>';
-    });
-
-    tbody.innerHTML = rows.join('');
-
-    if (count) {
-      const up = data.filter((h) => h.status === 'Up').length;
-      count.textContent = up + ' up / ' + data.length + ' total';
     }
+
+    if (bottomSpace > 0) {
+      html += '<tr class="virtual-spacer"><td colspan="' + colCount + '" style="height:' + bottomSpace + 'px"></td></tr>';
+    }
+
+    tbody.innerHTML = html;
+  }
+
+  var scrollTimeout = null;
+  function onScroll() {
+    if (scrollTimeout) return;
+    scrollTimeout = requestAnimationFrame(function () {
+      scrollTimeout = null;
+      renderVisible();
       if (columns && columns.apply) columns.apply();
+    });
   }
 
   function upsert(host) {
-    const idx = data.findIndex((h) => h.ip === host.ip);
+    var idx = data.findIndex(function (h) { return h.ip === host.ip; });
     if (idx >= 0) {
       data[idx] = host;
     } else {
+      ipIndex[host.ip] = data.length;
       data.push(host);
     }
+    dirty = true;
+    if (!flushTimer) {
+      flushTimer = setTimeout(flush, 200);
+    }
+  }
+
+  function flush() {
+    flushTimer = null;
+    if (!dirty) return;
+    dirty = false;
     refresh();
   }
 
@@ -201,6 +353,7 @@ const table = (() => {
     data = [];
     filtered = [];
     checkedIps.clear();
+    ipIndex = {};
     document.getElementById('check-all').checked = false;
     refresh();
   }
@@ -504,7 +657,7 @@ const sender = (() => {
         if (action.startsWith('nmap')) {
           nmapTab.setTarget(hosts.map((h) => String(h.ip)));
         } else if (action.startsWith('monitor')) {
-          monitorTab.setTargets(hosts.map(function (h) { return String(h.ip); }));
+          monitorTab.setTargets(hosts);
         }
 
         document.querySelectorAll('.send-menu').forEach((m) => m.hidden = true);
@@ -570,7 +723,8 @@ const ctxMenu = (() => {
         traceroute.run(ip);
         break;
       case 'send-monitor':
-        monitorTab.setTargets([ip]);
+        var monHost = table.getAll().find(function (h) { return String(h.ip) === ip; });
+        monitorTab.setTargets(monHost ? [monHost] : [ip]);
         break;
       case 'send-nmap':
         nmapTab.setTarget([ip]);
@@ -821,6 +975,7 @@ const nmapTab = (() => {
 const monitorTab = (() => {
   let running = false;
   let entries = {};
+  var editingLabel = false;
 
   var els = {
     input: () => document.getElementById('monitor-input'),
@@ -847,6 +1002,7 @@ const monitorTab = (() => {
   }
 
   function render() {
+    if (editingLabel) return;
     var body = els.body();
     var ips = Object.keys(entries).sort();
 
@@ -862,7 +1018,7 @@ const monitorTab = (() => {
 
       return '<tr data-ip="' + ip + '">'
         + '<td>' + ip + '</td>'
-        + '<td>' + label + '</td>'
+        + '<td class="editable-label" data-ip="' + ip + '">' + label + '</td>'
         + '<td class="' + statusClass + '">' + e.status + '</td>'
         + '<td>' + lastRtt + '</td>'
         + '<td>' + minRtt + '</td>'
@@ -889,6 +1045,16 @@ const monitorTab = (() => {
 
     try {
       await invoke('monitor_add_hosts', { hosts: hosts });
+
+      for (var i = 0; i < hosts.length; i++) {
+        try {
+          var hostname = await invoke('monitor_resolve_host', { ip: hosts[i].ip });
+          if (hostname) {
+            await invoke('monitor_update_label', { ip: hosts[i].ip, label: hostname });
+          }
+        } catch (e) { }
+      }
+
       var updated = await invoke('monitor_get_entries');
       entries = {};
       updated.forEach(function (e) { entries[e.ip] = e; });
@@ -943,9 +1109,20 @@ const monitorTab = (() => {
     }
   }
 
-  function setTargets(ips) {
-    els.input().value = ips.join(', ');
-    // Switch to monitor tab
+  function setTargets(hosts) {
+    var items = hosts.map(function (h) {
+      if (typeof h === 'string') return { ip: h, label: null };
+      return { ip: String(h.ip), label: h.hostname || null };
+    });
+
+    invoke('monitor_add_hosts', { hosts: items }).then(function () {
+      return invoke('monitor_get_entries');
+    }).then(function (updated) {
+      entries = {};
+      updated.forEach(function (e) { entries[e.ip] = e; });
+      render();
+    });
+
     document.querySelectorAll('.tab').forEach(function (t) { t.classList.remove('active'); });
     document.querySelectorAll('.view').forEach(function (v) { v.classList.remove('active'); });
     document.querySelector('[data-tab="monitor"]').classList.add('active');
@@ -980,6 +1157,41 @@ const monitorTab = (() => {
       var btn = e.target.closest('.btn-remove');
       if (btn) removeHost(btn.dataset.ip);
     });
+    els.body().addEventListener('dblclick', function (e) {
+      var cell = e.target.closest('.editable-label');
+      if (!cell) return;
+      var ip = cell.dataset.ip;
+      var currentLabel = cell.textContent === '-' ? '' : cell.textContent;
+      editingLabel = true;
+      var input = document.createElement('input');
+      input.type = 'text';
+      input.value = currentLabel;
+      input.className = 'label-edit-input';
+      cell.textContent = '';
+      cell.appendChild(input);
+      input.focus();
+      input.select();
+
+      function save() {
+        var newLabel = input.value.trim();
+        editingLabel = false;
+        invoke('monitor_update_label', { ip: ip, label: newLabel }).then(function () {
+          return invoke('monitor_get_entries');
+        }).then(function (updated) {
+          entries = {};
+          updated.forEach(function (e) { entries[e.ip] = e; });
+          render();
+        });
+      }
+
+      input.addEventListener('blur', save);
+      input.addEventListener('keydown', function (ev) {
+        if (ev.key === 'Enter') save();
+        if (ev.key === 'Escape')
+          editingLabel = false;
+        render();
+      });
+    });
 
     setupListeners();
   }
@@ -992,7 +1204,6 @@ var updater = (() => {
     var msg = document.getElementById('update-message');
     var link = document.getElementById('update-link');
     var text = 'Argus v' + info.version + ' is available.';
-    if (info.notes) text += ' ' + info.notes;
     msg.textContent = text;
     link.href = info.url;
     link.addEventListener('click', function (e) {
@@ -1022,6 +1233,42 @@ var updater = (() => {
 
   return { init };
 })();
+var changelog = (() => {
+  var modal = function () { return document.getElementById('changelog-modal'); };
+  var loaded = false;
+
+  async function open() {
+    modal().classList.add('visible');
+    if (!loaded) {
+      try {
+        var html = await invoke('get_changelog');
+        document.getElementById('changelog-content').innerHTML = html;
+        loaded = true;
+      } catch (err) {
+        document.getElementById('changelog-content').textContent = 'Failed to load changelog.';
+      }
+    }
+  }
+
+  function close() {
+    modal().classList.remove('visible');
+  }
+
+  function init() {
+    document.getElementById('btn-changelog').addEventListener('click', open);
+    document.getElementById('changelog-close').addEventListener('click', close);
+
+    modal().addEventListener('click', function (e) {
+      if (e.target === modal()) close();
+    });
+
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape' && modal().classList.contains('visible')) close();
+    });
+  }
+
+  return { init };
+})();
 window.addEventListener('DOMContentLoaded', () => {
   // Tab switching
   document.querySelectorAll('.tab').forEach((tab) => {
@@ -1054,6 +1301,15 @@ window.addEventListener('DOMContentLoaded', () => {
   nmapTab.init();
   monitorTab.init();
   updater.init();
+  changelog.init();
+  theme.init();
+  // Always on top toggle
+  document.getElementById('chk-always-on-top').addEventListener('change', function (e) {
+    if (window.__TAURI__ && window.__TAURI__.window) {
+      var current = window.__TAURI__.window.getCurrentWindow();
+      current.setAlwaysOnTop(e.target.checked);
+    }
+  });
   document.getElementById('btn-export-all').addEventListener('click', exporter.csvAll);
   document.getElementById('btn-export-up').addEventListener('click', exporter.csvUp);
   console.log('[Argus] Ready');

src/styles.css

@@ -409,6 +409,7 @@ body {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  height: 32px;
 }
 
 #results-table tbody tr {
@@ -428,6 +429,15 @@ body {
   box-shadow: inset 3px 0 0 var(--cyan);
 }
 
+.virtual-spacer {
+  border: none !important;
+}
+
+.virtual-spacer td {
+  padding: 0 !important;
+  border: none !important;
+}
+
 /* ===== Status Colors ===== */
 
 .status-up {
@@ -1136,17 +1146,17 @@ body {
   text-shadow: 0 0 6px var(--status-up-glow);
 }
 
-.monitor-status-Down {
+#monitor-table .monitor-status-Down {
   color: var(--status-down);
   text-shadow: 0 0 6px var(--status-down-glow);
 }
 
-.monitor-status-Degraded {
+#monitor-table .monitor-status-Degraded {
   color: var(--status-filtered);
   text-shadow: 0 0 6px var(--status-filtered-glow);
 }
 
-.monitor-status-Unknown {
+#monitor-table .monitor-status-Unknown {
   color: var(--status-unknown);
 }
 
@@ -1260,3 +1270,610 @@ body {
   color: var(--text-muted);
   margin-top: 4px;
 }
+
+/* ===== Changelog ===== */
+
+.changelog-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--text-primary);
+  max-height: 70vh;
+}
+
+.changelog-content h1 {
+  font-size: 20px;
+  color: var(--cyan);
+  margin: 0 0 16px 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+}
+
+.changelog-content h2 {
+  font-size: 16px;
+  color: var(--cyan);
+  margin: 24px 0 12px 0;
+}
+
+.changelog-content h3 {
+  font-size: 14px;
+  color: var(--text-primary);
+  margin: 16px 0 8px 0;
+}
+
+.changelog-content ul {
+  padding-left: 20px;
+  margin: 8px 0;
+}
+
+.changelog-content li {
+  margin: 4px 0;
+  color: var(--text-secondary);
+}
+
+.changelog-content code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 2px 5px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--cyan);
+}
+
+.changelog-content a {
+  color: var(--cyan);
+  text-decoration: none;
+}
+
+.changelog-content a:hover {
+  text-decoration: underline;
+}
+
+.theme-picker {
+  padding: 1px 6px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+  outline: none;
+}
+
+.theme-picker:hover {
+  color: var(--text-secondary);
+  border-color: var(--border-bright);
+}
+
+.theme-picker option {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+/* ===== Theme: Midnight ===== */
+
+:root[data-theme="midnight"] {
+  --bg-primary: #000000;
+  --bg-secondary: #0a0a0a;
+  --bg-tertiary: #141414;
+  --bg-hover: #1e1e1e;
+  --bg-active: #282828;
+  --border: #1a1a1a;
+  --border-bright: #2a2a2a;
+
+  --text-primary: #e0e0e0;
+  --text-secondary: #808080;
+  --text-muted: #4a4a4a;
+
+  --cyan: #00bfff;
+  --cyan-hover: #009ed9;
+  --cyan-dim: rgba(0, 191, 255, 0.08);
+  --cyan-glow: rgba(0, 191, 255, 0.25);
+  --cyan-subtle: rgba(0, 191, 255, 0.03);
+}
+
+/* ===== Theme: Dracula ===== */
+
+:root[data-theme="dracula"] {
+  --bg-primary: #282a36;
+  --bg-secondary: #21222c;
+  --bg-tertiary: #2d2f3d;
+  --bg-hover: #44475a;
+  --bg-active: #4e5166;
+  --border: #44475a;
+  --border-bright: #555869;
+
+  --text-primary: #f8f8f2;
+  --text-secondary: #6272a4;
+  --text-muted: #4d5b86;
+
+  --cyan: #bd93f9;
+  --cyan-hover: #a87cee;
+  --cyan-dim: rgba(189, 147, 249, 0.08);
+  --cyan-glow: rgba(189, 147, 249, 0.25);
+  --cyan-subtle: rgba(189, 147, 249, 0.03);
+
+  --status-up: #50fa7b;
+  --status-up-glow: rgba(80, 250, 123, 0.15);
+  --status-down: #ff5555;
+  --status-down-glow: rgba(255, 85, 85, 0.15);
+  --status-filtered: #f1fa8c;
+  --status-filtered-glow: rgba(241, 250, 140, 0.15);
+  --status-unknown: #6272a4;
+
+  --danger: #ff5555;
+  --danger-hover: #e64545;
+}
+
+/* ===== Theme: Nord ===== */
+
+:root[data-theme="nord"] {
+  --bg-primary: #2e3440;
+  --bg-secondary: #3b4252;
+  --bg-tertiary: #434c5e;
+  --bg-hover: #4c566a;
+  --bg-active: #556070;
+  --border: #3b4252;
+  --border-bright: #4c566a;
+
+  --text-primary: #eceff4;
+  --text-secondary: #d8dee9;
+  --text-muted: #616e88;
+
+  --cyan: #88c0d0;
+  --cyan-hover: #7bb4c4;
+  --cyan-dim: rgba(136, 192, 208, 0.08);
+  --cyan-glow: rgba(136, 192, 208, 0.25);
+  --cyan-subtle: rgba(136, 192, 208, 0.03);
+
+  --status-up: #a3be8c;
+  --status-up-glow: rgba(163, 190, 140, 0.15);
+  --status-down: #bf616a;
+  --status-down-glow: rgba(191, 97, 106, 0.15);
+  --status-filtered: #ebcb8b;
+  --status-filtered-glow: rgba(235, 203, 139, 0.15);
+  --status-unknown: #616e88;
+
+  --danger: #bf616a;
+  --danger-hover: #a9545c;
+}
+
+/* ===== Theme: Solarized Dark ===== */
+
+:root[data-theme="solarized"] {
+  --bg-primary: #002b36;
+  --bg-secondary: #073642;
+  --bg-tertiary: #0a3f4c;
+  --bg-hover: #124a56;
+  --bg-active: #1a5560;
+  --border: #0d4450;
+  --border-bright: #1a5c6a;
+
+  --text-primary: #cb4b16;
+  --text-secondary: #839496;
+  --text-muted: #586e75;
+
+  --cyan: #2aa198;
+  --cyan-hover: #25908a;
+  --cyan-dim: rgba(42, 161, 152, 0.1);
+  --cyan-glow: rgba(42, 161, 152, 0.25);
+  --cyan-subtle: rgba(42, 161, 152, 0.03);
+
+  --status-up: #859900;
+  --status-up-glow: rgba(133, 153, 0, 0.15);
+  --status-down: #dc322f;
+  --status-down-glow: rgba(220, 50, 47, 0.15);
+  --status-filtered: #b58900;
+  --status-filtered-glow: rgba(181, 137, 0, 0.15);
+  --status-unknown: #586e75;
+
+  --danger: #dc322f;
+  --danger-hover: #c62825;
+}
+
+/* ===== Theme: Catppuccin Mocha ===== */
+
+:root[data-theme="mocha"] {
+  --bg-primary: #1e1e2e;
+  --bg-secondary: #181825;
+  --bg-tertiary: #313244;
+  --bg-hover: #45475a;
+  --bg-active: #585b70;
+  --border: #313244;
+  --border-bright: #45475a;
+
+  --text-primary: #94e2d5;
+  --text-secondary: #a6adc8;
+  --text-muted: #6c7086;
+
+  --cyan: #b4befe;
+  --cyan-hover: #7ba4eb;
+  --cyan-dim: rgba(137, 180, 250, 0.08);
+  --cyan-glow: rgba(137, 180, 250, 0.2);
+  --cyan-subtle: rgba(137, 180, 250, 0.03);
+
+  --status-up: #a6e3a1;
+  --status-up-glow: rgba(166, 227, 161, 0.15);
+  --status-down: #f38ba8;
+  --status-down-glow: rgba(243, 139, 168, 0.15);
+  --status-filtered: #f9e2af;
+  --status-filtered-glow: rgba(249, 226, 175, 0.15);
+  --status-unknown: #6c7086;
+
+  --danger: #f38ba8;
+  --danger-hover: #e57a97;
+}
+
+:root[data-theme="mocha"] .toolbar-circuit {
+  filter: hue-rotate(40deg) saturate(0.6) brightness(0.9);
+}
+
+:root[data-theme="mocha"] .port-tag {
+  background: rgba(30, 102, 245, 0.1);
+  border-color: rgba(30, 102, 245, 0.2);
+}
+
+:root[data-theme="mocha"] #privilege-status::before {
+  background: var(--status-up);
+  box-shadow: 0 0 4px rgba(64, 160, 43, 0.3);
+}
+
+:root[data-theme="mocha"] ::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+
+:root[data-theme="mocha"] ::-webkit-scrollbar-thumb {
+  background: var(--border-bright);
+}
+
+/* ===== Theme: One Dark ===== */
+
+:root[data-theme="onedark"] {
+  --bg-primary: #282c34;
+  --bg-secondary: #21252b;
+  --bg-tertiary: #2c313a;
+  --bg-hover: #3e4451;
+  --bg-active: #4b5263;
+  --border: #3e4451;
+  --border-bright: #4b5263;
+
+  --text-primary: #abb2bf;
+  --text-secondary: #848b98;
+  --text-muted: #5c6370;
+
+  --cyan: #61afef;
+  --cyan-hover: #519fdf;
+  --cyan-dim: rgba(97, 175, 239, 0.08);
+  --cyan-glow: rgba(97, 175, 239, 0.2);
+  --cyan-subtle: rgba(97, 175, 239, 0.03);
+
+  --status-up: #98c379;
+  --status-up-glow: rgba(152, 195, 121, 0.15);
+  --status-down: #e06c75;
+  --status-down-glow: rgba(224, 108, 117, 0.15);
+  --status-filtered: #e5c07b;
+  --status-filtered-glow: rgba(229, 192, 123, 0.15);
+  --status-unknown: #5c6370;
+
+  --danger: #e06c75;
+  --danger-hover: #d05f68;
+}
+
+:root[data-theme="onedark"] .toolbar-circuit {
+  filter: hue-rotate(30deg) saturate(0.6);
+}
+
+/* ===== Theme: Rosé Pine ===== */
+
+:root[data-theme="rosepine"] {
+  --bg-primary: #191724;
+  --bg-secondary: #1f1d2e;
+  --bg-tertiary: #26233a;
+  --bg-hover: #403d52;
+  --bg-active: #524f67;
+  --border: #26233a;
+  --border-bright: #403d52;
+
+  --text-primary: #31748f;
+  --text-secondary: #908caa;
+  --text-muted: #6e6a86;
+
+  --cyan: #c4a7e7;
+  --cyan-hover: #b498d7;
+  --cyan-dim: rgba(196, 167, 231, 0.08);
+  --cyan-glow: rgba(196, 167, 231, 0.2);
+  --cyan-subtle: rgba(196, 167, 231, 0.03);
+
+  --status-up: #9ccfd8;
+  --status-up-glow: rgba(156, 207, 216, 0.15);
+  --status-down: #eb6f92;
+  --status-down-glow: rgba(235, 111, 146, 0.15);
+  --status-filtered: #f6c177;
+  --status-filtered-glow: rgba(246, 193, 119, 0.15);
+  --status-unknown: #6e6a86;
+
+  --danger: #eb6f92;
+  --danger-hover: #db5f82;
+}
+
+:root[data-theme="rosepine"] .toolbar-circuit {
+  filter: hue-rotate(80deg) saturate(0.5) brightness(0.8);
+}
+
+/* ===== Theme: Rosé Pine Moon ===== */
+
+:root[data-theme="rosepine-moon"] {
+  --bg-primary: #232136;
+  --bg-secondary: #2a273f;
+  --bg-tertiary: #393552;
+  --bg-hover: #44415a;
+  --bg-active: #56526e;
+  --border: #393552;
+  --border-bright: #44415a;
+
+  --text-primary: #9ccfd8;
+  --text-secondary: #908caa;
+  --text-muted: #6e6a86;
+
+  --cyan: #c4a7e7;
+  --cyan-hover: #b498d7;
+  --cyan-dim: rgba(196, 167, 231, 0.08);
+  --cyan-glow: rgba(196, 167, 231, 0.2);
+  --cyan-subtle: rgba(196, 167, 231, 0.03);
+
+  --status-up: #9ccfd8;
+  --status-up-glow: rgba(156, 207, 216, 0.15);
+  --status-down: #eb6f92;
+  --status-down-glow: rgba(235, 111, 146, 0.15);
+  --status-filtered: #f6c177;
+  --status-filtered-glow: rgba(246, 193, 119, 0.15);
+  --status-unknown: #6e6a86;
+
+  --danger: #eb6f92;
+  --danger-hover: #db5f82;
+}
+
+:root[data-theme="rosepine-moon"] .toolbar-circuit {
+  filter: hue-rotate(80deg) saturate(0.5) brightness(0.8);
+}
+
+/* ===== Theme: Tokyo Night ===== */
+
+:root[data-theme="tokyonight"] {
+  --bg-primary: #1a1b26;
+  --bg-secondary: #16161e;
+  --bg-tertiary: #1f2335;
+  --bg-hover: #292e42;
+  --bg-active: #33384d;
+  --border: #1f2335;
+  --border-bright: #292e42;
+
+  --text-primary: #bb9af7;
+  --text-secondary: #a9b1d6;
+  --text-muted: #565f89;
+
+  --cyan: #7aa2f7;
+  --cyan-hover: #6a92e7;
+  --cyan-dim: rgba(122, 162, 247, 0.08);
+  --cyan-glow: rgba(122, 162, 247, 0.2);
+  --cyan-subtle: rgba(122, 162, 247, 0.03);
+
+  --status-up: #9ece6a;
+  --status-up-glow: rgba(158, 206, 106, 0.15);
+  --status-down: #f7768e;
+  --status-down-glow: rgba(247, 118, 142, 0.15);
+  --status-filtered: #e0af68;
+  --status-filtered-glow: rgba(224, 175, 104, 0.15);
+  --status-unknown: #565f89;
+
+  --danger: #f7768e;
+  --danger-hover: #e7667e;
+}
+
+:root[data-theme="tokyonight"] .toolbar-circuit {
+  filter: hue-rotate(40deg) saturate(0.5);
+}
+
+/* ===== Theme: Iceberg ===== */
+
+:root[data-theme="iceberg"] {
+  --bg-primary: #161821;
+  --bg-secondary: #1e2132;
+  --bg-tertiary: #252837;
+  --bg-hover: #33374c;
+  --bg-active: #3d4259;
+  --border: #252837;
+  --border-bright: #33374c;
+
+  --text-primary: #c6c8d1;
+  --text-secondary: #818596;
+  --text-muted: #444b71;
+
+  --cyan: #84a0c6;
+  --cyan-hover: #7490b6;
+  --cyan-dim: rgba(132, 160, 198, 0.08);
+  --cyan-glow: rgba(132, 160, 198, 0.2);
+  --cyan-subtle: rgba(132, 160, 198, 0.03);
+
+  --status-up: #b4be82;
+  --status-up-glow: rgba(180, 190, 130, 0.15);
+  --status-down: #e27878;
+  --status-down-glow: rgba(226, 120, 120, 0.15);
+  --status-filtered: #e2a478;
+  --status-filtered-glow: rgba(226, 164, 120, 0.15);
+  --status-unknown: #444b71;
+
+  --danger: #e27878;
+  --danger-hover: #d26868;
+}
+
+:root[data-theme="iceberg"] .toolbar-circuit {
+  filter: hue-rotate(30deg) saturate(0.4) brightness(0.9);
+}
+
+/* ===== Theme: Hacker (Easter Egg) ===== */
+
+:root[data-theme="hacker"] {
+  --bg-primary: #000000;
+  --bg-secondary: #0a0a0a;
+  --bg-tertiary: #0d0d0d;
+  --bg-hover: #1a1a1a;
+  --bg-active: #222222;
+  --border: #0a3a0a;
+  --border-bright: #0f4f0f;
+
+  --text-primary: #00ff41;
+  --text-secondary: #00cc33;
+  --text-muted: #006b1d;
+
+  --cyan: #00ff41;
+  --cyan-hover: #00dd38;
+  --cyan-dim: rgba(0, 255, 65, 0.06);
+  --cyan-glow: rgba(0, 255, 65, 0.3);
+  --cyan-subtle: rgba(0, 255, 65, 0.02);
+
+  --status-up: #00ff41;
+  --status-up-glow: rgba(0, 255, 65, 0.2);
+  --status-down: #ff0040;
+  --status-down-glow: rgba(255, 0, 64, 0.2);
+  --status-filtered: #ffff00;
+  --status-filtered-glow: rgba(255, 255, 0, 0.15);
+  --status-unknown: #006b1d;
+
+  --danger: #ff0040;
+  --danger-hover: #dd0038;
+
+  --font-mono: "Courier New", "Lucida Console", monospace;
+  --font-sans: "Courier New", "Lucida Console", monospace;
+}
+
+:root[data-theme="hacker"] .toolbar-circuit {
+  filter: hue-rotate(-60deg) saturate(3) brightness(0.8);
+}
+
+:root[data-theme="hacker"] body {
+  font-family: "Courier New", "Lucida Console", monospace;
+}
+
+:root[data-theme="hacker"] .app-title {
+  letter-spacing: 5px;
+}
+
+:root[data-theme="hacker"] .btn-primary {
+  text-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
+}
+
+:root[data-theme="hacker"] #results-table td,
+:root[data-theme="hacker"] #monitor-table td {
+  text-shadow: 0 0 3px rgba(0, 255, 65, 0.15);
+}
+
+#crt-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+:root[data-theme="hacker"] #crt-overlay {
+  display: block;
+  background:
+    repeating-linear-gradient(0deg,
+      rgba(0, 0, 0, 0.4) 0px,
+      rgba(0, 0, 0, 0.4) 1px,
+      transparent 1px,
+      transparent 4px),
+    linear-gradient(180deg,
+      transparent 0%,
+      rgba(0, 255, 65, 0.03) 50%,
+      transparent 100%);
+  animation: crt-flicker 3s infinite;
+}
+
+@keyframes crt-flicker {
+  0% {
+    opacity: 1;
+  }
+
+  5% {
+    opacity: 0.85;
+  }
+
+  10% {
+    opacity: 1;
+  }
+
+  40% {
+    opacity: 0.95;
+  }
+
+  45% {
+    opacity: 1;
+  }
+
+  80% {
+    opacity: 0.9;
+  }
+
+  85% {
+    opacity: 1;
+  }
+}
+
+/* ===== Circuit art theme tinting ===== */
+
+:root[data-theme="dracula"] .toolbar-circuit {
+  filter: hue-rotate(70deg);
+}
+
+:root[data-theme="nord"] .toolbar-circuit {
+  filter: hue-rotate(20deg) saturate(0.5);
+}
+
+:root[data-theme="solarized"] .toolbar-circuit {
+  filter: hue-rotate(160deg) saturate(0.6);
+}
+
+:root[data-theme="midnight"] .toolbar-circuit {
+  filter: brightness(0.8);
+}
+
+.editable-label {
+  cursor: pointer;
+}
+
+.editable-label:hover {
+  background: var(--cyan-dim);
+}
+
+.label-edit-input {
+  width: 100%;
+  padding: 2px 6px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-primary);
+  background: var(--bg-primary);
+  border: 1px solid var(--cyan);
+  border-radius: var(--radius);
+  outline: none;
+}
+
+.status-bar-toggle {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.status-bar-toggle input:checked+span {
+  color: var(--cyan);
+}