Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-04-24 06:40:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

Refactor timeline as reusable ActivityTimeline component

Browse Source 
- Extract signal-timeline into configurable activity-timeline.js
- Add visual modes: compact, enriched, summary
- Create data adapters for RF, Bluetooth, WiFi normalization
- Integrate timeline into Listening Post, Bluetooth, WiFi modes
- Preserve backward compatibility for existing TSCM code
- Add mode-specific configuration presets via adapters

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-01-20 22:46:16 +00:00
parent 2cb62d5f34
commit 3f38742dbe
8 changed files with 2956 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

696
static/css/components/activity-timeline.css Normal file
View File

@@ -0,0 +1,696 @@
/**
* Activity Timeline Component
* Reusable, configuration-driven timeline visualization
* Supports visual modes: compact, enriched, summary
*/
/* ============================================
CSS VARIABLES (with fallbacks)
============================================ */
.activity-timeline {
--timeline-bg: var(--bg-card, #1a1a1a);
--timeline-border: var(--border-color, #333);
--timeline-bg-secondary: var(--bg-secondary, #252525);
--timeline-bg-elevated: var(--bg-elevated, #2a2a2a);
--timeline-text-primary: var(--text-primary, #fff);
--timeline-text-secondary: var(--text-secondary, #888);
--timeline-text-dim: var(--text-dim, #666);
--timeline-accent: var(--accent-cyan, #4a9eff);
--timeline-status-new: var(--signal-new, #3b82f6);
--timeline-status-baseline: var(--signal-baseline, #6b7280);
--timeline-status-burst: var(--signal-burst, #f59e0b);
--timeline-status-flagged: var(--signal-emergency, #ef4444);
--timeline-status-gone: var(--text-dim, #666);
}
/* ============================================
TIMELINE CONTAINER
============================================ */
.activity-timeline {
background: var(--timeline-bg);
border: 1px solid var(--timeline-border);
border-radius: 6px;
font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
font-size: 11px;
}
.activity-timeline.collapsed .activity-timeline-body {
display: none;
}
.activity-timeline.collapsed .activity-timeline-header {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 10px;
}
.activity-timeline.collapsed .activity-timeline-collapse-icon {
transform: rotate(-90deg);
}
/* ============================================
HEADER
============================================ */
.activity-timeline-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
cursor: pointer;
user-select: none;
transition: background 0.15s ease;
}
.activity-timeline-header:hover {
background: rgba(255, 255, 255, 0.02);
}
.activity-timeline-collapse-icon {
margin-right: 8px;
font-size: 10px;
transition: transform 0.2s ease;
color: var(--timeline-text-dim);
}
.activity-timeline-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--timeline-text-secondary);
}
.activity-timeline-header-stats {
display: flex;
gap: 12px;
font-size: 10px;
color: var(--timeline-text-dim);
}
.activity-timeline-header-stat {
display: flex;
align-items: center;
gap: 4px;
}
.activity-timeline-header-stat .stat-value {
color: var(--timeline-text-primary);
font-weight: 500;
}
/* ============================================
BODY
============================================ */
.activity-timeline-body {
padding: 0 12px 12px 12px;
border-top: 1px solid var(--timeline-border);
}
/* ============================================
CONTROLS
============================================ */
.activity-timeline-controls {
display: flex;
gap: 6px;
align-items: center;
padding: 8px 0;
flex-wrap: wrap;
}
.activity-timeline-btn {
background: var(--timeline-bg-secondary);
border: 1px solid var(--timeline-border);
color: var(--timeline-text-secondary);
font-size: 9px;
padding: 4px 8px;
border-radius: 3px;
cursor: pointer;
transition: all 0.15s ease;
font-family: inherit;
}
.activity-timeline-btn:hover {
background: var(--timeline-bg-elevated);
color: var(--timeline-text-primary);
}
.activity-timeline-btn.active {
background: var(--timeline-accent);
color: #000;
border-color: var(--timeline-accent);
}
.activity-timeline-window {
display: flex;
align-items: center;
gap: 4px;
font-size: 9px;
color: var(--timeline-text-dim);
margin-left: auto;
}
.activity-timeline-window-select {
background: var(--timeline-bg-secondary);
border: 1px solid var(--timeline-border);
color: var(--timeline-text-primary);
font-size: 9px;
padding: 3px 6px;
border-radius: 3px;
font-family: inherit;
}
/* ============================================
TIME AXIS
============================================ */
.activity-timeline-axis {
display: flex;
justify-content: space-between;
padding: 0 50px 0 140px;
margin-bottom: 6px;
font-size: 9px;
color: var(--timeline-text-dim);
}
.activity-timeline-axis-label {
position: relative;
}
.activity-timeline-axis-label::before {
content: '';
position: absolute;
top: -4px;
left: 50%;
width: 1px;
height: 4px;
background: var(--timeline-border);
}
/* ============================================
LANES CONTAINER
============================================ */
.activity-timeline-lanes {
display: flex;
flex-direction: column;
gap: 3px;
max-height: 180px;
overflow-y: auto;
margin-top: 6px;
}
.activity-timeline-lanes::-webkit-scrollbar {
width: 6px;
}
.activity-timeline-lanes::-webkit-scrollbar-track {
background: var(--timeline-bg-secondary);
border-radius: 3px;
}
.activity-timeline-lanes::-webkit-scrollbar-thumb {
background: var(--timeline-border);
border-radius: 3px;
}
.activity-timeline-lanes::-webkit-scrollbar-thumb:hover {
background: var(--timeline-text-dim);
}
/* ============================================
INDIVIDUAL LANE
============================================ */
.activity-timeline-lane {
display: flex;
align-items: stretch;
min-height: 32px;
background: var(--timeline-bg-secondary);
border-radius: 3px;
overflow: hidden;
cursor: pointer;
transition: background 0.15s ease;
}
.activity-timeline-lane:hover {
background: var(--timeline-bg-elevated);
}
.activity-timeline-lane.expanded {
min-height: auto;
}
.activity-timeline-lane.baseline {
opacity: 0.5;
}
.activity-timeline-lane.baseline:hover {
opacity: 0.8;
}
/* Status indicator strip */
.activity-timeline-status {
width: 4px;
min-width: 4px;
flex-shrink: 0;
}
.activity-timeline-status[data-status="new"] {
background: var(--timeline-status-new);
}
.activity-timeline-status[data-status="baseline"] {
background: var(--timeline-status-baseline);
}
.activity-timeline-status[data-status="burst"] {
background: var(--timeline-status-burst);
}
.activity-timeline-status[data-status="flagged"] {
background: var(--timeline-status-flagged);
}
.activity-timeline-status[data-status="gone"] {
background: var(--timeline-status-gone);
}
/* Label section */
.activity-timeline-label {
width: 130px;
min-width: 130px;
padding: 6px 8px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
border-right: 1px solid var(--timeline-border);
overflow: hidden;
}
.activity-timeline-id {
color: var(--timeline-text-primary);
font-size: 11px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.activity-timeline-name {
color: var(--timeline-text-dim);
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
/* ============================================
TRACK (where bars are drawn)
============================================ */
.activity-timeline-track {
flex: 1;
position: relative;
height: 100%;
min-height: 32px;
padding: 4px 8px;
}
.activity-timeline-track-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
}
/* ============================================
SIGNAL BARS
============================================ */
.activity-timeline-bar {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 14px;
min-width: 2px;
border-radius: 2px;
transition: opacity 0.15s ease;
}
/* Strength variants */
.activity-timeline-bar[data-strength="1"] { height: 5px; }
.activity-timeline-bar[data-strength="2"] { height: 9px; }
.activity-timeline-bar[data-strength="3"] { height: 13px; }
.activity-timeline-bar[data-strength="4"] { height: 17px; }
.activity-timeline-bar[data-strength="5"] { height: 21px; }
/* Status colors */
.activity-timeline-bar[data-status="new"],
.activity-timeline-bar[data-status="repeated"] {
background: var(--timeline-status-new);
box-shadow: 0 0 4px rgba(59, 130, 246, 0.3);
}
.activity-timeline-bar[data-status="baseline"] {
background: var(--timeline-status-baseline);
}
.activity-timeline-bar[data-status="burst"] {
background: var(--timeline-status-burst);
box-shadow: 0 0 5px rgba(245, 158, 11, 0.4);
}
.activity-timeline-bar[data-status="flagged"] {
background: var(--timeline-status-flagged);
box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
animation: timeline-flagged-pulse 2s ease-in-out infinite;
}
@keyframes timeline-flagged-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.activity-timeline-lane:hover .activity-timeline-bar {
opacity: 0.9;
}
/* ============================================
EXPANDED VIEW (tick marks)
============================================ */
.activity-timeline-ticks {
display: none;
position: relative;
height: 24px;
margin-top: 4px;
border-top: 1px solid var(--timeline-border);
padding-top: 4px;
}
.activity-timeline-lane.expanded .activity-timeline-ticks {
display: block;
}
.activity-timeline-tick {
position: absolute;
bottom: 0;
width: 1px;
background: var(--timeline-accent);
}
.activity-timeline-tick[data-strength="1"] { height: 4px; }
.activity-timeline-tick[data-strength="2"] { height: 8px; }
.activity-timeline-tick[data-strength="3"] { height: 12px; }
.activity-timeline-tick[data-strength="4"] { height: 16px; }
.activity-timeline-tick[data-strength="5"] { height: 20px; }
/* ============================================
STATS COLUMN
============================================ */
.activity-timeline-stats {
width: 45px;
min-width: 45px;
padding: 4px 6px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
font-size: 9px;
color: var(--timeline-text-dim);
border-left: 1px solid var(--timeline-border);
}
.activity-timeline-stat-count {
color: var(--timeline-text-primary);
font-weight: 500;
}
.activity-timeline-stat-label {
font-size: 8px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* ============================================
ANNOTATIONS
============================================ */
.activity-timeline-annotations {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--timeline-border);
max-height: 80px;
overflow-y: auto;
}
.activity-timeline-annotation {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
font-size: 10px;
color: var(--timeline-text-secondary);
background: var(--timeline-bg-secondary);
border-radius: 3px;
margin-bottom: 4px;
}
.activity-timeline-annotation-icon {
font-size: 10px;
width: 14px;
text-align: center;
}
.activity-timeline-annotation[data-type="new"] {
border-left: 2px solid var(--timeline-status-new);
}
.activity-timeline-annotation[data-type="burst"] {
border-left: 2px solid var(--timeline-status-burst);
}
.activity-timeline-annotation[data-type="pattern"] {
border-left: 2px solid var(--timeline-accent);
}
.activity-timeline-annotation[data-type="flagged"] {
border-left: 2px solid var(--timeline-status-flagged);
color: var(--timeline-status-flagged);
}
.activity-timeline-annotation[data-type="gone"] {
border-left: 2px solid var(--timeline-status-gone);
}
/* ============================================
TOOLTIP
============================================ */
.activity-timeline-tooltip {
position: fixed;
z-index: 10000;
background: var(--timeline-bg-elevated);
border: 1px solid var(--timeline-border);
border-radius: 4px;
padding: 8px 10px;
font-size: 10px;
color: var(--timeline-text-primary);
pointer-events: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
max-width: 240px;
font-family: 'JetBrains Mono', monospace;
}
.activity-timeline-tooltip-header {
font-weight: 600;
margin-bottom: 4px;
color: var(--timeline-accent);
}
.activity-timeline-tooltip-row {
display: flex;
justify-content: space-between;
gap: 12px;
color: var(--timeline-text-secondary);
line-height: 1.5;
}
.activity-timeline-tooltip-row span:last-child {
color: var(--timeline-text-primary);
}
/* ============================================
LEGEND
============================================ */
.activity-timeline-legend {
display: flex;
gap: 12px;
padding-top: 8px;
margin-top: 8px;
border-top: 1px solid var(--timeline-border);
font-size: 9px;
color: var(--timeline-text-dim);
}
.activity-timeline-legend-item {
display: flex;
align-items: center;
gap: 4px;
}
.activity-timeline-legend-dot {
width: 6px;
height: 6px;
border-radius: 2px;
}
.activity-timeline-legend-dot.new { background: var(--timeline-status-new); }
.activity-timeline-legend-dot.baseline { background: var(--timeline-status-baseline); }
.activity-timeline-legend-dot.burst { background: var(--timeline-status-burst); }
.activity-timeline-legend-dot.flagged { background: var(--timeline-status-flagged); }
/* ============================================
EMPTY STATE
============================================ */
.activity-timeline-empty {
text-align: center;
padding: 24px 16px;
color: var(--timeline-text-dim);
font-size: 11px;
}
.activity-timeline-empty-icon {
font-size: 20px;
margin-bottom: 8px;
opacity: 0.4;
}
/* More indicator */
.activity-timeline-more {
text-align: center;
padding: 8px;
font-size: 10px;
color: var(--timeline-text-dim);
}
/* ============================================
VISUAL MODE: COMPACT
============================================ */
.activity-timeline--compact .activity-timeline-lanes {
max-height: 140px;
}
.activity-timeline--compact .activity-timeline-lane {
min-height: 26px;
}
.activity-timeline--compact .activity-timeline-label {
width: 100px;
min-width: 100px;
padding: 4px 6px;
}
.activity-timeline--compact .activity-timeline-id {
display: none;
}
.activity-timeline--compact .activity-timeline-name {
font-size: 10px;
color: var(--timeline-text-secondary);
}
.activity-timeline--compact .activity-timeline-track {
min-height: 26px;
}
.activity-timeline--compact .activity-timeline-bar {
height: 10px !important;
}
.activity-timeline--compact .activity-timeline-bar[data-strength="1"] { height: 4px !important; }
.activity-timeline--compact .activity-timeline-bar[data-strength="2"] { height: 6px !important; }
.activity-timeline--compact .activity-timeline-bar[data-strength="3"] { height: 8px !important; }
.activity-timeline--compact .activity-timeline-bar[data-strength="4"] { height: 10px !important; }
.activity-timeline--compact .activity-timeline-bar[data-strength="5"] { height: 12px !important; }
.activity-timeline--compact .activity-timeline-stats {
width: 30px;
min-width: 30px;
}
.activity-timeline--compact .activity-timeline-stat-label {
display: none;
}
.activity-timeline--compact .activity-timeline-legend {
display: none;
}
.activity-timeline--compact .activity-timeline-axis {
padding-left: 110px;
padding-right: 40px;
}
/* ============================================
VISUAL MODE: SUMMARY
============================================ */
.activity-timeline--summary .activity-timeline-lanes {
max-height: 100px;
}
.activity-timeline--summary .activity-timeline-lane {
min-height: 20px;
}
.activity-timeline--summary .activity-timeline-label {
width: 80px;
min-width: 80px;
padding: 3px 6px;
}
.activity-timeline--summary .activity-timeline-id,
.activity-timeline--summary .activity-timeline-name {
font-size: 9px;
}
.activity-timeline--summary .activity-timeline-status {
width: 3px;
min-width: 3px;
}
.activity-timeline--summary .activity-timeline-track {
min-height: 20px;
}
.activity-timeline--summary .activity-timeline-bar {
height: 8px !important;
border-radius: 1px;
}
.activity-timeline--summary .activity-timeline-stats {
display: none;
}
.activity-timeline--summary .activity-timeline-ticks {
display: none !important;
}
.activity-timeline--summary .activity-timeline-annotations {
display: none;
}
.activity-timeline--summary .activity-timeline-legend {
display: none;
}
.activity-timeline--summary .activity-timeline-axis {
padding-left: 90px;
padding-right: 10px;
font-size: 8px;
}
/* ============================================
BACKWARD COMPATIBILITY NOTE
The old signal-timeline.css is still loaded
for existing TSCM code that uses those classes.
New code should use activity-timeline classes.
============================================ */

1233
static/js/components/activity-timeline.js Normal file
View File

File diff suppressed because it is too large Load Diff

288
static/js/components/timeline-adapters/bluetooth-adapter.js Normal file
View File

@@ -0,0 +1,288 @@
/**
* Bluetooth Timeline Adapter
* Normalizes Bluetooth device data for the Activity Timeline component
* Used by: Bluetooth mode, TSCM (Bluetooth detections)
*/
const BluetoothTimelineAdapter = (function() {
'use strict';
/**
* RSSI to strength category mapping for Bluetooth
* Bluetooth RSSI typically ranges from -30 (very close) to -100 (far)
*/
const RSSI_THRESHOLDS = {
VERY_STRONG: -45, // 5 - device likely within 1m
STRONG: -60, // 4 - device likely within 3m
MODERATE: -75, // 3 - device likely within 10m
WEAK: -90, // 2 - device at edge of range
MINIMAL: -100 // 1 - barely detectable
};
/**
* Known device type patterns
*/
const DEVICE_PATTERNS = {
// Apple devices
AIRPODS: /airpods/i,
IPHONE: /iphone/i,
IPAD: /ipad/i,
MACBOOK: /macbook|mac\s*pro|imac/i,
APPLE_WATCH: /apple\s*watch/i,
AIRTAG: /airtag/i,
// Trackers
TILE: /tile/i,
CHIPOLO: /chipolo/i,
SAMSUNG_TAG: /smarttag|galaxy\s*tag/i,
// Audio
HEADPHONES: /headphone|earphone|earbud|bose|sony|beats|jabra|sennheiser/i,
SPEAKER: /speaker|soundbar|echo|homepod|sonos/i,
// Wearables
FITBIT: /fitbit/i,
GARMIN: /garmin/i,
SMARTWATCH: /watch|band|mi\s*band|galaxy\s*fit/i,
// Input devices
KEYBOARD: /keyboard/i,
MOUSE: /mouse|trackpad|magic/i,
CONTROLLER: /controller|gamepad|xbox|playstation|dualshock/i,
// Vehicles
CAR: /car\s*kit|handsfree|obd|vehicle|toyota|honda|ford|bmw|mercedes/i
};
/**
* Convert RSSI to strength category
*/
function rssiToStrength(rssi) {
if (rssi === null || rssi === undefined) return 3;
const r = parseFloat(rssi);
if (isNaN(r)) return 3;
if (r > RSSI_THRESHOLDS.VERY_STRONG) return 5;
if (r > RSSI_THRESHOLDS.STRONG) return 4;
if (r > RSSI_THRESHOLDS.MODERATE) return 3;
if (r > RSSI_THRESHOLDS.WEAK) return 2;
return 1;
}
/**
* Classify device type from name
*/
function classifyDevice(name) {
if (!name) return { type: 'unknown', category: 'device' };
for (const [pattern, regex] of Object.entries(DEVICE_PATTERNS)) {
if (regex.test(name)) {
return {
type: pattern.toLowerCase(),
category: getCategoryForType(pattern)
};
}
}
return { type: 'unknown', category: 'device' };
}
/**
* Get category for device type
*/
function getCategoryForType(type) {
const categories = {
AIRPODS: 'audio',
IPHONE: 'phone',
IPAD: 'tablet',
MACBOOK: 'computer',
APPLE_WATCH: 'wearable',
AIRTAG: 'tracker',
TILE: 'tracker',
CHIPOLO: 'tracker',
SAMSUNG_TAG: 'tracker',
HEADPHONES: 'audio',
SPEAKER: 'audio',
FITBIT: 'wearable',
GARMIN: 'wearable',
SMARTWATCH: 'wearable',
KEYBOARD: 'input',
MOUSE: 'input',
CONTROLLER: 'input',
CAR: 'vehicle'
};
return categories[type] || 'device';
}
/**
* Format MAC address for display (truncated)
*/
function formatMac(mac, full = false) {
if (!mac) return 'Unknown';
if (full) return mac.toUpperCase();
return mac.substring(0, 8).toUpperCase() + '...';
}
/**
* Determine if device is a tracker type
*/
function isTracker(device) {
if (device.is_tracker) return true;
const name = device.name || '';
return /airtag|tile|chipolo|smarttag|tracker/i.test(name);
}
/**
* Normalize a Bluetooth device detection for the timeline
*/
function normalizeDevice(device) {
const mac = device.mac || device.address || device.id;
const name = device.name || device.device_name || formatMac(mac);
const classification = classifyDevice(name);
const tags = [device.type || 'ble'];
tags.push(classification.category);
if (isTracker(device)) tags.push('tracker');
if (device.is_beacon) tags.push('beacon');
if (device.is_connectable) tags.push('connectable');
if (device.manufacturer) tags.push('identified');
return {
id: mac,
label: name,
strength: rssiToStrength(device.rssi),
duration: device.scan_duration || device.duration || 1000,
type: classification.type,
tags: tags,
metadata: {
mac: mac,
rssi: device.rssi,
device_type: device.type,
manufacturer: device.manufacturer,
services: device.services,
is_tracker: isTracker(device),
classification: classification
}
};
}
/**
* Normalize for TSCM context (includes threat assessment)
*/
function normalizeTscmDevice(device) {
const normalized = normalizeDevice(device);
// Add TSCM-specific tags
if (device.is_new) normalized.tags.push('new');
if (device.threat_level) normalized.tags.push(`threat-${device.threat_level}`);
if (device.baseline_known === false) normalized.tags.push('unknown');
normalized.metadata.threat_level = device.threat_level;
normalized.metadata.first_seen = device.first_seen;
normalized.metadata.appearance_count = device.appearance_count;
return normalized;
}
/**
* Batch normalize multiple devices
*/
function normalizeDevices(devices, context = 'scan') {
const normalizer = context === 'tscm' ? normalizeTscmDevice : normalizeDevice;
return devices.map(normalizer);
}
/**
* Create timeline configuration for Bluetooth mode
*/
function getBluetoothConfig() {
return {
title: 'Device Activity',
mode: 'bluetooth',
visualMode: 'enriched',
collapsed: false,
showAnnotations: true,
showLegend: true,
defaultWindow: '15m',
availableWindows: ['5m', '15m', '30m', '1h'],
filters: {
hideBaseline: { enabled: true, label: 'Hide Known', default: false },
showOnlyNew: { enabled: true, label: 'New Only', default: false },
showOnlyBurst: { enabled: false, label: 'Bursts', default: false }
},
customFilters: [
{
key: 'showOnlyTrackers',
label: 'Trackers Only',
default: false,
predicate: (item) => item.tags.includes('tracker')
},
{
key: 'hideWearables',
label: 'Hide Wearables',
default: false,
predicate: (item) => !item.tags.includes('wearable')
}
],
maxItems: 75,
maxDisplayedLanes: 12,
labelGenerator: (id) => formatMac(id)
};
}
/**
* Create compact timeline configuration (for sidebar use)
*/
function getCompactConfig() {
return {
title: 'BT Devices',
mode: 'bluetooth',
visualMode: 'compact',
collapsed: false,
showAnnotations: false,
showLegend: false,
defaultWindow: '15m',
availableWindows: ['5m', '15m', '30m'],
filters: {
hideBaseline: { enabled: false },
showOnlyNew: { enabled: true, label: 'New', default: false },
showOnlyBurst: { enabled: false }
},
customFilters: [],
maxItems: 30,
maxDisplayedLanes: 8
};
}
// Public API
return {
// Normalization
normalizeDevice: normalizeDevice,
normalizeTscmDevice: normalizeTscmDevice,
normalizeDevices: normalizeDevices,
// Utilities
rssiToStrength: rssiToStrength,
classifyDevice: classifyDevice,
formatMac: formatMac,
isTracker: isTracker,
// Configuration presets
getBluetoothConfig: getBluetoothConfig,
getCompactConfig: getCompactConfig,
// Constants
RSSI_THRESHOLDS: RSSI_THRESHOLDS,
DEVICE_PATTERNS: DEVICE_PATTERNS
};
})();
// Export for module systems
if (typeof module !== 'undefined' && module.exports) {
module.exports = BluetoothTimelineAdapter;
}
window.BluetoothTimelineAdapter = BluetoothTimelineAdapter;

241
static/js/components/timeline-adapters/rf-adapter.js Normal file
View File

@@ -0,0 +1,241 @@
/**
* RF Signal Timeline Adapter
* Normalizes RF signal data for the Activity Timeline component
* Used by: Listening Post, TSCM
*/
const RFTimelineAdapter = (function() {
'use strict';
/**
* RSSI to strength category mapping
* Uses confidence-safe thresholds
*/
const RSSI_THRESHOLDS = {
VERY_STRONG: -40, // 5 - indicates likely nearby source
STRONG: -55, // 4 - probable close proximity
MODERATE: -70, // 3 - likely in proximity
WEAK: -85, // 2 - potentially distant or obstructed
MINIMAL: -100 // 1 - may be ambient noise or distant source
};
/**
* Frequency band categorization
*/
const FREQUENCY_BANDS = [
{ min: 2400, max: 2500, label: 'Wi-Fi 2.4GHz', type: 'wifi' },
{ min: 5150, max: 5850, label: 'Wi-Fi 5GHz', type: 'wifi' },
{ min: 5925, max: 7125, label: 'Wi-Fi 6E', type: 'wifi' },
{ min: 2402, max: 2480, label: 'Bluetooth', type: 'bluetooth' },
{ min: 433, max: 434, label: '433MHz ISM', type: 'ism' },
{ min: 868, max: 869, label: '868MHz ISM', type: 'ism' },
{ min: 902, max: 928, label: '915MHz ISM', type: 'ism' },
{ min: 315, max: 316, label: '315MHz', type: 'keyfob' },
{ min: 144, max: 148, label: 'VHF Ham', type: 'amateur' },
{ min: 420, max: 450, label: 'UHF Ham', type: 'amateur' },
{ min: 462.5625, max: 467.7125, label: 'FRS/GMRS', type: 'personal' },
{ min: 151, max: 159, label: 'VHF Business', type: 'commercial' },
{ min: 450, max: 470, label: 'UHF Business', type: 'commercial' },
{ min: 88, max: 108, label: 'FM Broadcast', type: 'broadcast' },
{ min: 118, max: 137, label: 'Airband', type: 'aviation' },
{ min: 156, max: 162, label: 'Marine VHF', type: 'marine' }
];
/**
* Convert RSSI (dBm) to strength category (1-5)
*/
function rssiToStrength(rssi) {
if (rssi === null || rssi === undefined) return 3;
const r = parseFloat(rssi);
if (isNaN(r)) return 3;
if (r > RSSI_THRESHOLDS.VERY_STRONG) return 5;
if (r > RSSI_THRESHOLDS.STRONG) return 4;
if (r > RSSI_THRESHOLDS.MODERATE) return 3;
if (r > RSSI_THRESHOLDS.WEAK) return 2;
return 1;
}
/**
* Categorize frequency into human-readable band name
*/
function categorizeFrequency(freqMHz) {
const f = parseFloat(freqMHz);
if (isNaN(f)) return { label: String(freqMHz), type: 'unknown' };
for (const band of FREQUENCY_BANDS) {
if (f >= band.min && f <= band.max) {
return { label: band.label, type: band.type };
}
}
// Generic labeling by range
if (f < 30) return { label: `${f.toFixed(3)} MHz HF`, type: 'hf' };
if (f < 300) return { label: `${f.toFixed(3)} MHz VHF`, type: 'vhf' };
if (f < 3000) return { label: `${f.toFixed(3)} MHz UHF`, type: 'uhf' };
return { label: `${f.toFixed(3)} MHz`, type: 'unknown' };
}
/**
* Normalize a scanner signal detection for the timeline
*/
function normalizeSignal(signalData) {
const freq = signalData.frequency || signalData.freq;
const category = categorizeFrequency(freq);
return {
id: String(freq),
label: signalData.name || category.label,
strength: rssiToStrength(signalData.rssi || signalData.signal_strength),
duration: signalData.duration || 1000,
type: category.type,
tags: buildTags(signalData, category),
metadata: {
frequency: freq,
rssi: signalData.rssi,
modulation: signalData.modulation,
bandwidth: signalData.bandwidth
}
};
}
/**
* Normalize a TSCM RF detection
*/
function normalizeTscmSignal(detection) {
const freq = detection.frequency;
const category = categorizeFrequency(freq);
const tags = buildTags(detection, category);
// Add TSCM-specific tags
if (detection.is_new) tags.push('new');
if (detection.baseline_deviation) tags.push('deviation');
if (detection.threat_level) tags.push(`threat-${detection.threat_level}`);
return {
id: String(freq),
label: detection.name || category.label,
strength: rssiToStrength(detection.rssi),
duration: detection.duration || 1000,
type: category.type,
tags: tags,
metadata: {
frequency: freq,
rssi: detection.rssi,
threat_level: detection.threat_level,
source: detection.source
}
};
}
/**
* Build tags array from signal data
*/
function buildTags(data, category) {
const tags = [];
if (category.type) tags.push(category.type);
if (data.modulation) {
tags.push(data.modulation.toLowerCase());
}
if (data.is_burst) tags.push('burst');
if (data.is_continuous) tags.push('continuous');
if (data.is_periodic) tags.push('periodic');
return tags;
}
/**
* Batch normalize multiple signals
*/
function normalizeSignals(signals, type = 'scanner') {
const normalizer = type === 'tscm' ? normalizeTscmSignal : normalizeSignal;
return signals.map(normalizer);
}
/**
* Create timeline configuration for Listening Post mode
*/
function getListeningPostConfig() {
return {
title: 'Signal Activity',
mode: 'listening-post',
visualMode: 'enriched',
collapsed: false,
showAnnotations: true,
showLegend: true,
defaultWindow: '15m',
availableWindows: ['5m', '15m', '30m', '1h'],
filters: {
hideBaseline: { enabled: true, label: 'Hide Known', default: false },
showOnlyNew: { enabled: true, label: 'New Only', default: false },
showOnlyBurst: { enabled: true, label: 'Bursts', default: false }
},
customFilters: [
{
key: 'hideIsm',
label: 'Hide ISM',
default: false,
predicate: (item) => !item.tags.includes('ism')
}
],
maxItems: 50,
maxDisplayedLanes: 12
};
}
/**
* Create timeline configuration for TSCM mode
*/
function getTscmConfig() {
return {
title: 'Signal Activity Timeline',
mode: 'tscm',
visualMode: 'enriched',
collapsed: true,
showAnnotations: true,
showLegend: true,
defaultWindow: '30m',
availableWindows: ['5m', '15m', '30m', '1h', '2h'],
filters: {
hideBaseline: { enabled: true, label: 'Hide Known', default: false },
showOnlyNew: { enabled: true, label: 'New Only', default: false },
showOnlyBurst: { enabled: true, label: 'Bursts', default: false }
},
customFilters: [],
maxItems: 100,
maxDisplayedLanes: 15
};
}
// Public API
return {
// Normalization
normalizeSignal: normalizeSignal,
normalizeTscmSignal: normalizeTscmSignal,
normalizeSignals: normalizeSignals,
// Utilities
rssiToStrength: rssiToStrength,
categorizeFrequency: categorizeFrequency,
// Configuration presets
getListeningPostConfig: getListeningPostConfig,
getTscmConfig: getTscmConfig,
// Constants
RSSI_THRESHOLDS: RSSI_THRESHOLDS,
FREQUENCY_BANDS: FREQUENCY_BANDS
};
})();
// Export for module systems
if (typeof module !== 'undefined' && module.exports) {
module.exports = RFTimelineAdapter;
}
window.RFTimelineAdapter = RFTimelineAdapter;

319
static/js/components/timeline-adapters/wifi-adapter.js Normal file
View File

@@ -0,0 +1,319 @@
/**
* WiFi Timeline Adapter
* Normalizes WiFi network data for the Activity Timeline component
* Used by: WiFi mode, TSCM (WiFi detections)
*/
const WiFiTimelineAdapter = (function() {
'use strict';
/**
* RSSI to strength category mapping for WiFi
*/
const RSSI_THRESHOLDS = {
EXCELLENT: -50, // 5 - excellent signal
GOOD: -60, // 4 - good signal
FAIR: -70, // 3 - fair signal
WEAK: -80, // 2 - weak signal
POOR: -90 // 1 - very weak
};
/**
* WiFi channel to frequency band mapping
*/
const CHANNEL_BANDS = {
// 2.4 GHz (channels 1-14)
'2.4GHz': { min: 1, max: 14 },
// 5 GHz (channels 32-177)
'5GHz': { min: 32, max: 177 },
// 6 GHz (channels 1-233, WiFi 6E)
'6GHz': { min: 1, max: 233, is6e: true }
};
/**
* Security type classifications
*/
const SECURITY_TYPES = {
OPEN: 'open',
WEP: 'wep',
WPA: 'wpa',
WPA2: 'wpa2',
WPA3: 'wpa3',
ENTERPRISE: 'enterprise'
};
/**
* Convert RSSI to strength category
*/
function rssiToStrength(rssi) {
if (rssi === null || rssi === undefined) return 3;
const r = parseFloat(rssi);
if (isNaN(r)) return 3;
if (r > RSSI_THRESHOLDS.EXCELLENT) return 5;
if (r > RSSI_THRESHOLDS.GOOD) return 4;
if (r > RSSI_THRESHOLDS.FAIR) return 3;
if (r > RSSI_THRESHOLDS.WEAK) return 2;
return 1;
}
/**
* Determine frequency band from channel
*/
function getBandFromChannel(channel, frequency) {
if (frequency) {
const f = parseFloat(frequency);
if (f >= 5925) return '6GHz';
if (f >= 5000) return '5GHz';
if (f >= 2400) return '2.4GHz';
}
const ch = parseInt(channel);
if (isNaN(ch)) return 'unknown';
// This is simplified - in practice 6GHz also uses channels 1+
// but typically reported with frequency
if (ch <= 14) return '2.4GHz';
if (ch >= 32 && ch <= 177) return '5GHz';
return 'unknown';
}
/**
* Classify security type
*/
function classifySecurity(network) {
const security = (network.security || network.encryption || '').toLowerCase();
const auth = (network.auth || '').toLowerCase();
if (!security || security === 'none' || security === 'open') {
return SECURITY_TYPES.OPEN;
}
if (security.includes('wep')) return SECURITY_TYPES.WEP;
if (security.includes('wpa3')) return SECURITY_TYPES.WPA3;
if (security.includes('wpa2') || security.includes('rsn')) {
if (auth.includes('eap') || auth.includes('802.1x') || auth.includes('enterprise')) {
return SECURITY_TYPES.ENTERPRISE;
}
return SECURITY_TYPES.WPA2;
}
if (security.includes('wpa')) return SECURITY_TYPES.WPA;
return 'unknown';
}
/**
* Truncate SSID for display
*/
function formatSsid(ssid, maxLength = 20) {
if (!ssid) return '[Hidden]';
if (ssid.length <= maxLength) return ssid;
return ssid.substring(0, maxLength - 3) + '...';
}
/**
* Identify potentially interesting network characteristics
*/
function identifyCharacteristics(network) {
const characteristics = [];
const ssid = (network.ssid || '').toLowerCase();
// Hidden network
if (!network.ssid || network.is_hidden) {
characteristics.push('hidden');
}
// Open network
if (classifySecurity(network) === SECURITY_TYPES.OPEN) {
characteristics.push('open');
}
// Weak security
if (classifySecurity(network) === SECURITY_TYPES.WEP) {
characteristics.push('weak-security');
}
// Potential hotspot
if (/hotspot|mobile|tether|android|iphone/i.test(ssid)) {
characteristics.push('hotspot');
}
// Guest network
if (/guest|visitor|public/i.test(ssid)) {
characteristics.push('guest');
}
// IoT device
if (/ring|nest|ecobee|smartthings|wyze|arlo|hue|lifx/i.test(ssid)) {
characteristics.push('iot');
}
return characteristics;
}
/**
* Normalize a WiFi network detection for the timeline
*/
function normalizeNetwork(network) {
const ssid = network.ssid || network.essid || '';
const bssid = network.bssid || network.mac || '';
const band = getBandFromChannel(network.channel, network.frequency);
const security = classifySecurity(network);
const characteristics = identifyCharacteristics(network);
const tags = [band, security, ...characteristics];
return {
id: bssid || ssid,
label: formatSsid(ssid) || formatMac(bssid),
strength: rssiToStrength(network.rssi || network.signal),
duration: network.duration || 1000,
type: 'wifi',
tags: tags.filter(Boolean),
metadata: {
ssid: ssid,
bssid: bssid,
channel: network.channel,
frequency: network.frequency,
rssi: network.rssi || network.signal,
security: security,
band: band,
characteristics: characteristics
}
};
}
/**
* Normalize for TSCM context
*/
function normalizeTscmNetwork(network) {
const normalized = normalizeNetwork(network);
// Add TSCM-specific tags
if (network.is_new) normalized.tags.push('new');
if (network.threat_level) normalized.tags.push(`threat-${network.threat_level}`);
if (network.is_rogue) normalized.tags.push('rogue');
if (network.is_deauth_target) normalized.tags.push('targeted');
normalized.metadata.threat_level = network.threat_level;
normalized.metadata.first_seen = network.first_seen;
normalized.metadata.client_count = network.client_count;
return normalized;
}
/**
* Format MAC/BSSID for display
*/
function formatMac(mac) {
if (!mac) return 'Unknown';
return mac.toUpperCase();
}
/**
* Batch normalize multiple networks
*/
function normalizeNetworks(networks, context = 'scan') {
const normalizer = context === 'tscm' ? normalizeTscmNetwork : normalizeNetwork;
return networks.map(normalizer);
}
/**
* Create timeline configuration for WiFi mode
*/
function getWiFiConfig() {
return {
title: 'Network Activity',
mode: 'wifi',
visualMode: 'enriched',
collapsed: false,
showAnnotations: true,
showLegend: true,
defaultWindow: '15m',
availableWindows: ['5m', '15m', '30m', '1h'],
filters: {
hideBaseline: { enabled: true, label: 'Hide Known', default: false },
showOnlyNew: { enabled: true, label: 'New Only', default: false },
showOnlyBurst: { enabled: false, label: 'Bursts', default: false }
},
customFilters: [
{
key: 'showOnlyOpen',
label: 'Open Only',
default: false,
predicate: (item) => item.tags.includes('open')
},
{
key: 'hideHidden',
label: 'Hide Hidden',
default: false,
predicate: (item) => !item.tags.includes('hidden')
},
{
key: 'show5GHz',
label: '5GHz Only',
default: false,
predicate: (item) => item.tags.includes('5GHz')
}
],
maxItems: 100,
maxDisplayedLanes: 15,
labelGenerator: (id) => formatSsid(id)
};
}
/**
* Create compact configuration for sidebar
*/
function getCompactConfig() {
return {
title: 'Networks',
mode: 'wifi',
visualMode: 'compact',
collapsed: false,
showAnnotations: false,
showLegend: false,
defaultWindow: '15m',
availableWindows: ['5m', '15m', '30m'],
filters: {
hideBaseline: { enabled: false },
showOnlyNew: { enabled: true, label: 'New', default: false },
showOnlyBurst: { enabled: false }
},
customFilters: [],
maxItems: 30,
maxDisplayedLanes: 8
};
}
// Public API
return {
// Normalization
normalizeNetwork: normalizeNetwork,
normalizeTscmNetwork: normalizeTscmNetwork,
normalizeNetworks: normalizeNetworks,
// Utilities
rssiToStrength: rssiToStrength,
getBandFromChannel: getBandFromChannel,
classifySecurity: classifySecurity,
formatSsid: formatSsid,
identifyCharacteristics: identifyCharacteristics,
// Configuration presets
getWiFiConfig: getWiFiConfig,
getCompactConfig: getCompactConfig,
// Constants
RSSI_THRESHOLDS: RSSI_THRESHOLDS,
SECURITY_TYPES: SECURITY_TYPES
};
})();
// Export for module systems
if (typeof module !== 'undefined' && module.exports) {
module.exports = WiFiTimelineAdapter;
}
window.WiFiTimelineAdapter = WiFiTimelineAdapter;

25
static/js/modes/listening-post.js
View File

@@ -691,6 +691,25 @@ function addSignalHit(data) {
const hitCount = document.getElementById('scannerHitCount');
if (hitCount) hitCount.textContent = `${tbody.children.length} signals found`;
// Feed to activity timeline if available
if (typeof addTimelineEvent === 'function') {
const normalized = typeof RFTimelineAdapter !== 'undefined'
? RFTimelineAdapter.normalizeSignal({
frequency: data.frequency,
rssi: data.rssi || data.signal_strength,
duration: data.duration || 2000,
modulation: data.modulation
})
: {
id: String(data.frequency),
label: `${data.frequency.toFixed(3)} MHz`,
strength: 3,
duration: 2000,
type: 'rf'
};
addTimelineEvent('listening', normalized);
}
}
function clearScannerLog() {
@@ -700,6 +719,12 @@ function clearScannerLog() {
scannerCycles = 0;
recentSignalHits.clear();
// Clear the timeline if available
const timeline = typeof getTimeline === 'function' ? getTimeline('listening') : null;
if (timeline) {
timeline.clear();
}
const signalCount = document.getElementById('scannerSignalCount');
if (signalCount) signalCount.textContent = '0';

139
templates/index.html
View File

@@ -18,6 +18,7 @@
<link rel="stylesheet" href="{{ url_for('static', filename='css/modes/tscm.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/components/signal-cards.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/components/signal-timeline.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/components/activity-timeline.css') }}">
</head>
<body>
@@ -790,6 +791,10 @@
<div style="color: var(--text-dim);">Waiting for client probe requests...</div>
</div>
</div>
<!-- Network Activity Timeline -->
<div class="wifi-visual-panel" style="grid-column: span 2;">
<div id="wifiTimelineContainer"></div>
</div>
</div>
<!-- Right: WiFi Device Cards -->
<div class="wifi-device-list" id="wifiDeviceList">
@@ -870,6 +875,10 @@
FindMy-compatible devices...</div>
</div>
</div>
<!-- Device Activity Timeline -->
<div class="wifi-visual-panel" style="grid-column: span 2;">
<div id="bluetoothTimelineContainer"></div>
</div>
</div>
<!-- Right: Bluetooth Device Cards -->
<div class="wifi-device-list bt-device-list" id="btDeviceListPanel">
@@ -1345,6 +1354,11 @@
<div class="scanner-log-entry" style="color: var(--text-muted);">Ready</div>
</div>
</div>
<!-- SIGNAL ACTIVITY TIMELINE -->
<div class="radio-module-box" style="grid-column: span 4; padding: 10px;">
<div id="listeningPostTimelineContainer"></div>
</div>
</div>
<!-- Satellite Dashboard (Embedded) -->
@@ -1577,9 +1591,93 @@
<script src="{{ url_for('static', filename='js/components/radio-knob.js') }}"></script>
<script src="{{ url_for('static', filename='js/components/signal-cards.js') }}"></script>
<script src="{{ url_for('static', filename='js/components/signal-timeline.js') }}"></script>
<script src="{{ url_for('static', filename='js/components/activity-timeline.js') }}"></script>
<script src="{{ url_for('static', filename='js/components/timeline-adapters/rf-adapter.js') }}"></script>
<script src="{{ url_for('static', filename='js/components/timeline-adapters/bluetooth-adapter.js') }}"></script>
<script src="{{ url_for('static', filename='js/components/timeline-adapters/wifi-adapter.js') }}"></script>
<script src="{{ url_for('static', filename='js/modes/listening-post.js') }}"></script>
<script>
// ============================================
// ACTIVITY TIMELINE MANAGEMENT
// ============================================
const modeTimelines = {};
/**
* Initialize timeline for a specific mode
*/
function initializeModeTimeline(mode) {
// Skip if already initialized
if (modeTimelines[mode]) return;
const configs = {
'tscm': {
container: 'tscmTimelineContainer',
config: typeof RFTimelineAdapter !== 'undefined' ? RFTimelineAdapter.getTscmConfig() : {
title: 'Signal Activity Timeline',
mode: 'tscm',
visualMode: 'enriched',
collapsed: true
}
},
'listening': {
container: 'listeningPostTimelineContainer',
config: typeof RFTimelineAdapter !== 'undefined' ? RFTimelineAdapter.getListeningPostConfig() : {
title: 'Signal Activity',
mode: 'listening-post',
visualMode: 'enriched',
collapsed: false
}
},
'bluetooth': {
container: 'bluetoothTimelineContainer',
config: typeof BluetoothTimelineAdapter !== 'undefined' ? BluetoothTimelineAdapter.getBluetoothConfig() : {
title: 'Device Activity',
mode: 'bluetooth',
visualMode: 'enriched',
collapsed: false
}
},
'wifi': {
container: 'wifiTimelineContainer',
config: typeof WiFiTimelineAdapter !== 'undefined' ? WiFiTimelineAdapter.getWiFiConfig() : {
title: 'Network Activity',
mode: 'wifi',
visualMode: 'enriched',
collapsed: false
}
}
};
const modeConfig = configs[mode];
if (!modeConfig) return;
const container = document.getElementById(modeConfig.container);
if (!container) return;
// Create timeline using new ActivityTimeline
if (typeof ActivityTimeline !== 'undefined') {
modeTimelines[mode] = ActivityTimeline.create(modeConfig.container, modeConfig.config);
}
}
/**
* Add event to a mode's timeline
*/
function addTimelineEvent(mode, eventData) {
const timeline = modeTimelines[mode];
if (timeline) {
timeline.addEvent(eventData);
}
}
/**
* Get timeline instance for a mode
*/
function getTimeline(mode) {
return modeTimelines[mode] || null;
}
// Selected mode from welcome screen
let selectedStartMode = 'pager';
@@ -2042,14 +2140,13 @@
};
document.getElementById('outputTitle').textContent = titles[mode] || 'Signal Monitor';
// Initialize mode-specific timelines
initializeModeTimeline(mode);
// Initialize TSCM mode when selected
if (mode === 'tscm') {
loadTscmBaselines();
refreshTscmDevices();
// Initialize signal timeline if not already created
if (!document.getElementById('signalTimeline')) {
SignalTimeline.create('tscmTimelineContainer');
}
}
// Show/hide Device Intelligence for modes that use it (not for satellite/aircraft/tscm)
@@ -5079,6 +5176,26 @@
`;
if (autoScroll) output.scrollTop = 0;
// Feed to activity timeline if it's a new network
if (isNew && typeof addTimelineEvent === 'function') {
const normalized = typeof WiFiTimelineAdapter !== 'undefined'
? WiFiTimelineAdapter.normalizeNetwork({
ssid: net.essid,
bssid: net.bssid,
channel: net.channel,
rssi: signalStrength,
security: net.privacy
})
: {
id: net.bssid,
label: net.essid || '[Hidden]',
strength: signalBars || 3,
duration: 1500,
type: 'wifi'
};
addTimelineEvent('wifi', normalized);
}
}
// Add WiFi client card to device list
@@ -6345,6 +6462,20 @@
// Update statistics panels
updateBtStatsPanels();
// Feed to activity timeline if it's a new detection
if (isNew && typeof addTimelineEvent === 'function') {
const normalized = typeof BluetoothTimelineAdapter !== 'undefined'
? BluetoothTimelineAdapter.normalizeDevice(device)
: {
id: device.mac,
label: device.name || device.mac.substring(0, 8) + '...',
strength: device.rssi ? Math.min(5, Math.max(1, Math.ceil((device.rssi + 100) / 20))) : 3,
duration: 1500,
type: 'bluetooth'
};
addTimelineEvent('bluetooth', normalized);
}
}
// Select a Bluetooth device

40
templates/partials/modes/tscm.html
View File

@@ -24,40 +24,38 @@
</div>
<div class="form-group">
<div style="display: flex; align-items: center; gap: 8px;">
<input type="checkbox" id="tscmVerboseResults" style="margin: 0;">
<label for="tscmVerboseResults" style="flex: 1; margin: 0; font-size: 12px;">
Verbose results (store full device details)
</label>
</div>
<label class="inline-checkbox">
<input type="checkbox" id="tscmVerboseResults">
Verbose results (store full device details)
</label>
</div>
<div style="border-top: 1px solid var(--border-color); padding-top: 12px; margin-top: 12px;">
<label style="display: block; font-size: 11px; font-weight: 600; margin-bottom: 8px; color: var(--text-secondary);">Scan Sources</label>
<div class="form-group" style="margin-bottom: 8px;">
<div style="display: flex; align-items: center; gap: 8px;">
<input type="checkbox" id="tscmWifiEnabled" checked style="margin: 0;">
<label for="tscmWifiEnabled" style="flex: 1; margin: 0; font-size: 12px;">WiFi</label>
</div>
<select id="tscmWifiInterface" style="width: 100%; margin-top: 4px; font-size: 11px;">
<label class="inline-checkbox">
<input type="checkbox" id="tscmWifiEnabled" checked>
WiFi
</label>
<select id="tscmWifiInterface" style="margin-top: 4px;">
<option value="">Select WiFi interface...</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 8px;">
<div style="display: flex; align-items: center; gap: 8px;">
<input type="checkbox" id="tscmBtEnabled" checked style="margin: 0;">
<label for="tscmBtEnabled" style="flex: 1; margin: 0; font-size: 12px;">Bluetooth</label>
</div>
<select id="tscmBtInterface" style="width: 100%; margin-top: 4px; font-size: 11px;">
<label class="inline-checkbox">
<input type="checkbox" id="tscmBtEnabled" checked>
Bluetooth
</label>
<select id="tscmBtInterface" style="margin-top: 4px;">
<option value="">Select Bluetooth adapter...</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 8px;">
<div style="display: flex; align-items: center; gap: 8px;">
<input type="checkbox" id="tscmRfEnabled" style="margin: 0;">
<label for="tscmRfEnabled" style="flex: 1; margin: 0; font-size: 12px;">RF/SDR</label>
</div>
<select id="tscmSdrDevice" style="width: 100%; margin-top: 4px; font-size: 11px;">
<label class="inline-checkbox">
<input type="checkbox" id="tscmRfEnabled">
RF/SDR
</label>
<select id="tscmSdrDevice" style="margin-top: 4px;">
<option value="">Select SDR device...</option>
</select>
</div>