From 5047fee43133b07025648241ae6822347beddb07 Mon Sep 17 00:00:00 2001
From: Smittix <jamessmith1@outlook.com>
Date: Fri, 16 Jan 2026 17:01:29 +0000
Subject: [PATCH] Simplify TSCM menu for better UX

Redesign the sidebar to be more minimal with collapsible sections
for Settings and Advanced options. Primary sweep action is now
prominently displayed, with tool buttons condensed to compact icons.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 static/css/modes/tscm.css          |  45 +++++
 templates/index.html               |  17 ++
 templates/partials/modes/tscm.html | 260 +++++++++++++++--------------
 3 files changed, 194 insertions(+), 128 deletions(-)

diff --git a/static/css/modes/tscm.css b/static/css/modes/tscm.css
index 550672e..b6b7e91 100644
--- a/static/css/modes/tscm.css
+++ b/static/css/modes/tscm.css
@@ -1,5 +1,50 @@
 /* TSCM Styles */
 
+/* TSCM Collapsible Sections */
+.tscm-collapsible {
+    padding: 0 !important;
+    overflow: hidden;
+}
+.tscm-collapsible-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 12px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    transition: background 0.2s;
+}
+.tscm-collapsible-header:hover {
+    background: rgba(255, 255, 255, 0.03);
+}
+.tscm-collapse-icon {
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--text-muted);
+    transition: transform 0.2s;
+}
+.tscm-collapsible-content {
+    padding: 0 12px 12px 12px;
+}
+.tscm-collapsible.expanded .tscm-collapse-icon {
+    transform: rotate(45deg);
+}
+
+/* TSCM Tool Buttons */
+.tscm-tool-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    min-width: 0;
+}
+.tscm-tool-btn:hover {
+    background: rgba(74, 158, 255, 0.15);
+}
+
 /* TSCM Threat Cards */
 .threat-card {
     display: flex;
diff --git a/templates/index.html b/templates/index.html
index e2b1a14..e7b66b8 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7530,6 +7530,23 @@
             }
         }
 
+        // TSCM collapsible section toggle
+        function toggleTscmSection(contentId) {
+            const content = document.getElementById(contentId);
+            const icon = document.getElementById(contentId + 'Icon');
+            const section = content.closest('.tscm-collapsible');
+
+            if (content.style.display === 'none') {
+                content.style.display = 'block';
+                icon.textContent = '-';
+                section.classList.add('expanded');
+            } else {
+                content.style.display = 'none';
+                icon.textContent = '+';
+                section.classList.remove('expanded');
+            }
+        }
+
         async function startTscmSweep() {
             const sweepType = document.getElementById('tscmSweepType').value;
             const baselineId = document.getElementById('tscmBaselineSelect').value || null;
diff --git a/templates/partials/modes/tscm.html b/templates/partials/modes/tscm.html
index 8ee6071..313d1c4 100644
--- a/templates/partials/modes/tscm.html
+++ b/templates/partials/modes/tscm.html
@@ -1,137 +1,25 @@
 <!-- TSCM MODE (Counter-Surveillance) -->
                 <div id="tscmMode" class="mode-content">
+                    <!-- Primary Action Area -->
                     <div class="section">
-                        <h3 style="display: flex; align-items: center; gap: 8px;">TSCM Sweep <span style="font-size: 9px; font-weight: normal; background: var(--accent-orange); color: #000; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px;">Alpha</span></h3>
-                        <div class="form-group">
-                            <label>Sweep Type</label>
-                            <select id="tscmSweepType">
-                                <option value="quick">Quick Scan (2 min)</option>
-                                <option value="standard" selected>Standard (5 min)</option>
-                                <option value="full">Full Sweep (15 min)</option>
-                                <option value="wireless_cameras">Wireless Cameras</option>
-                                <option value="body_worn">Body-Worn Devices</option>
-                                <option value="gps_trackers">GPS Trackers</option>
-                            </select>
+                        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
+                            <h3 style="margin: 0;">TSCM Sweep</h3>
+                            <span style="font-size: 9px; background: var(--accent-orange); color: #000; padding: 2px 6px; border-radius: 3px; text-transform: uppercase;">Alpha</span>
                         </div>
-                        <div class="form-group">
-                            <label>Compare Against</label>
-                            <select id="tscmBaselineSelect">
-                                <option value="">No Baseline</option>
-                            </select>
-                        </div>
-                    </div>
-
-                    <div class="section">
-                        <h3>Scan Sources</h3>
-                        <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;">WiFi Networks</label>
-                            </div>
-                            <select id="tscmWifiInterface" style="width: 100%; margin-top: 4px; font-size: 11px;">
-                                <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;">Bluetooth Devices</label>
-                            </div>
-                            <select id="tscmBtInterface" style="width: 100%; margin-top: 4px; font-size: 11px;">
-                                <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;">RF Signals</label>
-                            </div>
-                            <select id="tscmSdrDevice" style="width: 100%; margin-top: 4px; font-size: 11px;">
-                                <option value="">Select SDR device...</option>
-                            </select>
-                        </div>
-                        <button class="preset-btn" onclick="refreshTscmDevices()" style="width: 100%; margin-top: 8px; font-size: 10px;">
-                            🔄 Refresh Devices
+                        <select id="tscmSweepType" style="width: 100%; margin-bottom: 12px;">
+                            <option value="quick">Quick Scan (2 min)</option>
+                            <option value="standard" selected>Standard (5 min)</option>
+                            <option value="full">Full Sweep (15 min)</option>
+                            <option value="wireless_cameras">Wireless Cameras</option>
+                            <option value="body_worn">Body-Worn Devices</option>
+                            <option value="gps_trackers">GPS Trackers</option>
+                        </select>
+                        <button class="run-btn" id="startTscmBtn" onclick="startTscmSweep()" style="width: 100%;">
+                            Start Sweep
                         </button>
-                    </div>
-
-                    <div class="section">
-                        <h3>Baseline Management</h3>
-                        <div class="form-group">
-                            <input type="text" id="tscmBaselineName" placeholder="Baseline name...">
-                        </div>
-                        <button class="run-btn" id="tscmRecordBaselineBtn" onclick="tscmRecordBaseline()" style="width: 100%; padding: 8px;">
-                            Record New Baseline
+                        <button class="stop-btn" id="stopTscmBtn" onclick="stopTscmSweep()" style="display: none; width: 100%;">
+                            Stop Sweep
                         </button>
-                        <button class="stop-btn" id="tscmStopBaselineBtn" onclick="tscmStopBaseline()" style="width: 100%; padding: 8px; display: none;">
-                            Stop Recording
-                        </button>
-                        <div id="tscmBaselineStatus" style="margin-top: 8px; font-size: 11px; color: var(--text-muted);"></div>
-                    </div>
-
-                    <button class="run-btn" id="startTscmBtn" onclick="startTscmSweep()">
-                        Start Sweep
-                    </button>
-                    <button class="stop-btn" id="stopTscmBtn" onclick="stopTscmSweep()" style="display: none;">
-                        Stop Sweep
-                    </button>
-                    <button class="preset-btn" id="tscmReportBtn" onclick="generateTscmReport()" style="display: none; width: 100%; margin-top: 8px; background: var(--accent-cyan); color: #000; font-weight: 600;">
-                        📄 Generate Report
-                    </button>
-
-                    <!-- Meeting Window Control -->
-                    <div class="section" id="tscmMeetingSection" style="margin-top: 12px;">
-                        <h3>Meeting Window</h3>
-                        <div id="tscmMeetingStatus" style="font-size: 11px; color: var(--text-muted); margin-bottom: 8px;">
-                            No active meeting
-                        </div>
-                        <div class="form-group">
-                            <input type="text" id="tscmMeetingName" placeholder="Meeting name (optional)">
-                        </div>
-                        <button class="run-btn" id="tscmStartMeetingBtn" onclick="tscmStartMeeting()" style="width: 100%; padding: 8px;">
-                            🎯 Start Meeting Window
-                        </button>
-                        <button class="stop-btn" id="tscmEndMeetingBtn" onclick="tscmEndMeeting()" style="width: 100%; padding: 8px; display: none;">
-                            ⏹ End Meeting Window
-                        </button>
-                        <div style="font-size: 9px; color: var(--text-muted); margin-top: 4px;">
-                            Devices detected during meetings get flagged
-                        </div>
-                    </div>
-
-                    <!-- Quick Actions -->
-                    <div class="section" style="margin-top: 12px;">
-                        <h3>Quick Actions</h3>
-                        <div style="display: flex; flex-direction: column; gap: 6px;">
-                            <button class="preset-btn" onclick="tscmShowCapabilities()" style="width: 100%; font-size: 10px;">
-                                ⚙️ View Capabilities
-                            </button>
-                            <button class="preset-btn" onclick="tscmShowKnownDevices()" style="width: 100%; font-size: 10px;">
-                                ✅ Known Devices
-                            </button>
-                            <button class="preset-btn" onclick="tscmShowCases()" style="width: 100%; font-size: 10px;">
-                                📁 Cases
-                            </button>
-                            <button class="preset-btn" onclick="tscmShowPlaybooks()" style="width: 100%; font-size: 10px;">
-                                📋 Playbooks
-                            </button>
-                        </div>
-                    </div>
-
-                    <!-- Export Options -->
-                    <div class="section" id="tscmExportSection" style="margin-top: 12px; display: none;">
-                        <h3>Export Report</h3>
-                        <div style="display: flex; gap: 6px;">
-                            <button class="preset-btn" onclick="tscmDownloadPdf()" style="flex: 1; font-size: 10px;">
-                                📄 PDF
-                            </button>
-                            <button class="preset-btn" onclick="tscmDownloadAnnex('json')" style="flex: 1; font-size: 10px;">
-                                📊 JSON
-                            </button>
-                            <button class="preset-btn" onclick="tscmDownloadAnnex('csv')" style="flex: 1; font-size: 10px;">
-                                📈 CSV
-                            </button>
-                        </div>
                     </div>
 
                     <!-- Futuristic Scanner Progress -->
@@ -156,6 +44,122 @@
                         </div>
                     </div>
 
+                    <!-- Report Button (shown after scan) -->
+                    <button class="preset-btn" id="tscmReportBtn" onclick="generateTscmReport()" style="display: none; width: 100%; margin-top: 8px; background: var(--accent-cyan); color: #000; font-weight: 600;">
+                        Generate Report
+                    </button>
+
+                    <!-- Export Options (shown after scan) -->
+                    <div id="tscmExportSection" style="display: none; margin-top: 8px;">
+                        <div style="display: flex; gap: 6px;">
+                            <button class="preset-btn" onclick="tscmDownloadPdf()" style="flex: 1; font-size: 10px;">PDF</button>
+                            <button class="preset-btn" onclick="tscmDownloadAnnex('json')" style="flex: 1; font-size: 10px;">JSON</button>
+                            <button class="preset-btn" onclick="tscmDownloadAnnex('csv')" style="flex: 1; font-size: 10px;">CSV</button>
+                        </div>
+                    </div>
+
+                    <!-- Collapsible Settings -->
+                    <div class="section tscm-collapsible" style="margin-top: 12px;">
+                        <div class="tscm-collapsible-header" onclick="toggleTscmSection('tscmSettingsContent')">
+                            <span>Settings</span>
+                            <span class="tscm-collapse-icon" id="tscmSettingsContentIcon">+</span>
+                        </div>
+                        <div class="tscm-collapsible-content" id="tscmSettingsContent" style="display: none;">
+                            <!-- Scan Sources -->
+                            <div style="margin-bottom: 12px;">
+                                <div style="font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px;">Scan Sources</div>
+                                <div style="display: flex; flex-direction: column; gap: 6px;">
+                                    <label style="display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer;">
+                                        <input type="checkbox" id="tscmWifiEnabled" checked style="margin: 0;">
+                                        <span>WiFi</span>
+                                        <select id="tscmWifiInterface" style="margin-left: auto; font-size: 10px; padding: 2px 4px; max-width: 120px;">
+                                            <option value="">Auto</option>
+                                        </select>
+                                    </label>
+                                    <label style="display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer;">
+                                        <input type="checkbox" id="tscmBtEnabled" checked style="margin: 0;">
+                                        <span>Bluetooth</span>
+                                        <select id="tscmBtInterface" style="margin-left: auto; font-size: 10px; padding: 2px 4px; max-width: 120px;">
+                                            <option value="">Auto</option>
+                                        </select>
+                                    </label>
+                                    <label style="display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer;">
+                                        <input type="checkbox" id="tscmRfEnabled" style="margin: 0;">
+                                        <span>RF/SDR</span>
+                                        <select id="tscmSdrDevice" style="margin-left: auto; font-size: 10px; padding: 2px 4px; max-width: 120px;">
+                                            <option value="">Select...</option>
+                                        </select>
+                                    </label>
+                                </div>
+                                <button class="preset-btn" onclick="refreshTscmDevices()" style="width: 100%; margin-top: 8px; font-size: 10px; padding: 4px;">
+                                    Refresh Devices
+                                </button>
+                            </div>
+                            <!-- Baseline Comparison -->
+                            <div>
+                                <div style="font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px;">Compare Against</div>
+                                <select id="tscmBaselineSelect" style="width: 100%;">
+                                    <option value="">No Baseline</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Collapsible Advanced -->
+                    <div class="section tscm-collapsible" style="margin-top: 8px;">
+                        <div class="tscm-collapsible-header" onclick="toggleTscmSection('tscmAdvancedContent')">
+                            <span>Advanced</span>
+                            <span class="tscm-collapse-icon" id="tscmAdvancedContentIcon">+</span>
+                        </div>
+                        <div class="tscm-collapsible-content" id="tscmAdvancedContent" style="display: none;">
+                            <!-- Baseline Recording -->
+                            <div style="margin-bottom: 12px;">
+                                <div style="font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px;">Record Baseline</div>
+                                <input type="text" id="tscmBaselineName" placeholder="Baseline name..." style="width: 100%; margin-bottom: 6px;">
+                                <button class="preset-btn" id="tscmRecordBaselineBtn" onclick="tscmRecordBaseline()" style="width: 100%; font-size: 11px;">
+                                    Record New Baseline
+                                </button>
+                                <button class="stop-btn" id="tscmStopBaselineBtn" onclick="tscmStopBaseline()" style="width: 100%; display: none; font-size: 11px;">
+                                    Stop Recording
+                                </button>
+                                <div id="tscmBaselineStatus" style="margin-top: 6px; font-size: 10px; color: var(--text-muted);"></div>
+                            </div>
+                            <!-- Meeting Window -->
+                            <div id="tscmMeetingSection">
+                                <div style="font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px;">Meeting Window</div>
+                                <div id="tscmMeetingStatus" style="font-size: 10px; color: var(--text-secondary); margin-bottom: 6px;">
+                                    No active meeting
+                                </div>
+                                <input type="text" id="tscmMeetingName" placeholder="Meeting name (optional)" style="width: 100%; margin-bottom: 6px;">
+                                <button class="preset-btn" id="tscmStartMeetingBtn" onclick="tscmStartMeeting()" style="width: 100%; font-size: 11px;">
+                                    Start Meeting Window
+                                </button>
+                                <button class="stop-btn" id="tscmEndMeetingBtn" onclick="tscmEndMeeting()" style="width: 100%; display: none; font-size: 11px;">
+                                    End Meeting Window
+                                </button>
+                                <div style="font-size: 9px; color: var(--text-muted); margin-top: 4px;">
+                                    Devices detected during meetings get flagged
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Compact Tools Row -->
+                    <div style="display: flex; gap: 6px; margin-top: 12px;">
+                        <button class="preset-btn tscm-tool-btn" onclick="tscmShowCapabilities()" title="Capabilities">
+                            <span style="font-size: 14px;">⚙️</span>
+                        </button>
+                        <button class="preset-btn tscm-tool-btn" onclick="tscmShowKnownDevices()" title="Known Devices">
+                            <span style="font-size: 14px;">✅</span>
+                        </button>
+                        <button class="preset-btn tscm-tool-btn" onclick="tscmShowCases()" title="Cases">
+                            <span style="font-size: 14px;">📁</span>
+                        </button>
+                        <button class="preset-btn tscm-tool-btn" onclick="tscmShowPlaybooks()" title="Playbooks">
+                            <span style="font-size: 14px;">📋</span>
+                        </button>
+                    </div>
+
                     <!-- Device Warnings -->
                     <div id="tscmDeviceWarnings" style="display: none; margin-top: 8px; padding: 8px; background: rgba(255,153,51,0.1); border: 1px solid rgba(255,153,51,0.3); border-radius: 4px;"></div>
                 </div>