Add collapsible Import section

Move the Import UI to the top of the left panel and add a collapsible Import section with help, bulk-import controls, session tools, and export output.

Add CSS for section layout, collapse behavior, and styling (.section-title-row, .section-actions, .import-section-top, .collapse-btn).
Update app.js to manage importSectionCollapsed state, render/toggle the collapsed view, and persist the setting in saved sessions (loadState/buildStatePayload); ensure loadExample resets the section to expanded.

Update ARCHITECTURE.md to document the top-of-panel Import section, subnet mapping export script, collapse behavior, and add a Phase M: Testing note.

Author: safesploit

ARCHITECTURE.md

@@ -30,7 +30,8 @@ openwrt-firewall-visualiser/
 ├── README.md          # Placeholder project documentation
 ├── ARCHITECTURE.md    # This architecture guide
 ├── scripts/
-│   └── openwrt_export_hosts.sh
+│   ├── openwrt_export_hosts.sh
+│   └── openwrt_export_subnet_mappings.sh
 └── public/
     ├── index.html     # Application markup and external asset references
     └── assets/
@@ -484,7 +485,7 @@ Objective: allow users to populate devices from existing network inventories ins
 
 Requirements:
 
-- Add a clearly labelled "Import" section with a "Bulk Import Hosts" subsection.
+- Add a clearly labelled, top-of-panel "Import" section with a "Bulk Import Hosts" subsection.
 - Support device inventory exports.
 - Support host lists.
 - Support DHCP exports.
@@ -518,6 +519,7 @@ Supported Linux neighbour table format:
 Implemented details:
 
 - Import controls are grouped separately from manual Devices and Subnet Mappings controls.
+- The Import section can be collapsed when the user is done with first-run setup or file imports.
 - `renderImportChecklist()` shows first-time users which setup/import steps are currently populated.
 - `importBulkHosts()` imports the textarea content.
 - `parseBulkHosts()` parses host data line-by-line.
@@ -569,6 +571,7 @@ Implemented details:
 
 - The `subnetMappings` textarea stores subnet-to-zone mappings.
 - The Subnet Mappings help box explains when the mappings are used, the manual `CIDR zone` format, and the exact UCI output expected by the UCI import field.
+- The Subnet Mappings help box links to `scripts/openwrt_export_subnet_mappings.sh`, which exports the matching OpenWrt UCI lines from a router.
 - `parseSubnetMappings()` parses CIDR mappings.
 - `inferZoneForIp()` assigns zones during import when a host line has no explicit zone.
 - Unresolved imported hosts are counted in the import result panel.
@@ -652,6 +655,7 @@ Implemented improvements:
 - Export Session uses a distinct positive-action button.
 - Import Session / Devices is a dedicated file-import control.
 - Import status is persisted with saved sessions so the checklist reflects restored state.
+- Import section collapsed/expanded state is persisted with saved sessions.
 
 ### Phase L: Usability
 
@@ -660,12 +664,19 @@ Status: implemented.
 Implementation improvements:
 
 - Loading the example now prompts before replacing the current state.
-- Devices, Subnet Mappings, and Import are separate left-panel sections.
+- Import, Devices, and Subnet Mappings are separate left-panel sections.
+- Import is positioned before manual configuration entry so first-time users can start from existing exports.
 - Subnet Mappings has its own help button, with less ambiguous guidance about when subnet mappings are used.
 - Graph Visualiser has an expand/collapse button.
 - Export Graph PNG moved into the Graph Visualiser toolbar.
 - Device Relationship Map shows the first 15 relationships by default and adds a show-all/show-fewer control when needed.
 
+## Phase M: Testing
+
+Phase M provides unit testing for CI/CD
+
+
+
 ## Development Notes
 
 The current implementation is intentionally simple:

public/assets/css/styles.css

@@ -138,13 +138,35 @@ input {
 	margin-bottom: 0.5rem;
 }
 
+.section-title-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.75rem;
+	margin-bottom: 0.5rem;
+}
+
+.section-title-row h2 {
+	margin: 0;
+}
+
+.section-actions {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
 .help-btn {
 	width: 1.8rem;
 	height: 1.8rem;
 	padding: 0;
 	border-radius: 999px;
 }
 
+.collapse-btn {
+	min-width: 5.25rem;
+}
+
 .help-box {
 	margin: 0.75rem 0;
 	padding: 0.75rem;
@@ -329,6 +351,19 @@ pre {
 	border-top-color: rgba(56, 189, 248, 0.55);
 }
 
+.import-section-top {
+	margin-top: 0;
+	margin-bottom: 1rem;
+	padding-top: 0;
+	padding-bottom: 1rem;
+	border-top: 0;
+	border-bottom: 1px solid rgba(56, 189, 248, 0.55);
+}
+
+.import-section.collapsed .collapsible-body {
+	display: none;
+}
+
 .checklist {
 	display: grid;
 	gap: 0.45rem;

public/assets/js/app.js

@@ -100,6 +100,7 @@ let relationshipMapExpanded = false;
 let hostImportHasRun = false;
 let subnetImportHasRun = false;
 let sessionImportHasRun = false;
+let importSectionCollapsed = false;
 let storageAvailable = true;
 
 const autoParse = debounce(() => {
@@ -110,6 +111,7 @@ function main() {
 	setCurrentYear();
 	loadState();
 	bindReactiveControls();
+	renderImportSectionCollapsed();
 	renderDeviceInputs();
 	renderSubnetMappings();
 	renderPathCriteria();
@@ -128,6 +130,26 @@ function toggleImportHelp() {
 	document.getElementById("importHelpBox").classList.toggle("hidden");
 }
 
+function toggleImportSectionCollapsed() {
+	importSectionCollapsed = !importSectionCollapsed;
+	renderImportSectionCollapsed();
+	saveState();
+}
+
+function renderImportSectionCollapsed() {
+	const section = document.getElementById("importSection");
+	const button = document.getElementById("importCollapseButton");
+
+	if (section) {
+		section.classList.toggle("collapsed", importSectionCollapsed);
+	}
+
+	if (button) {
+		button.textContent = importSectionCollapsed ? "Expand" : "Collapse";
+		button.setAttribute("aria-expanded", String(!importSectionCollapsed));
+	}
+}
+
 function loadExample() {
 	if (!confirm("Load the example config and reset devices? Current unsaved page state will be replaced.")) {
 		return;
@@ -142,6 +164,8 @@ function loadExample() {
 	hostImportHasRun = false;
 	subnetImportHasRun = false;
 	sessionImportHasRun = false;
+	importSectionCollapsed = false;
+	renderImportSectionCollapsed();
 	renderDeviceInputs();
 	renderSubnetMappings();
 	renderPathCriteria();
@@ -400,6 +424,7 @@ function loadState() {
 	hostImportHasRun = Boolean(savedState.importState?.hostImportHasRun);
 	subnetImportHasRun = Boolean(savedState.importState?.subnetImportHasRun);
 	sessionImportHasRun = Boolean(savedState.importState?.sessionImportHasRun);
+	importSectionCollapsed = Boolean(savedState.uiState?.importSectionCollapsed);
 	graphPathHighlightRequested = false;
 
 	if (graphFilter) {
@@ -898,6 +923,9 @@ function buildStatePayload() {
 			hostImportHasRun,
 			subnetImportHasRun,
 			sessionImportHasRun
+		},
+		uiState: {
+			importSectionCollapsed
 		}
 	};
 }

public/index.html

@@ -18,6 +18,51 @@ <h1>🔥 OpenWrt Firewall Relationship Visualiser</h1>
 
 	<main>
 		<section class="panel">
+			<section id="importSection" class="tool-section import-section import-section-top">
+				<div class="section-title-row">
+					<h2>📥 Import</h2>
+					<div class="section-actions">
+						<button class="help-btn" type="button" onclick="toggleImportHelp()">?</button>
+						<button id="importCollapseButton" class="collapse-btn" type="button" aria-expanded="true" onclick="toggleImportSectionCollapsed()">Collapse</button>
+					</div>
+				</div>
+				<div id="importHelpBox" class="help-box hidden">
+					<p><strong>Supported inputs:</strong> host lists, <code>ip neighbour</code>, <code>arp -a</code>, <code>cat /tmp/dhcp.leases</code>, and CSV from <a href="https://github.com/safesploitOrg/openwrt-firewall-visualiser/blob/main/scripts/openwrt_export_hosts.sh" target="_blank" rel="noopener noreferrer">scripts/openwrt_export_hosts.sh</a>.</p>
+					<pre>scp scripts/openwrt_export_hosts.sh root@172.16.0.1:/tmp/
+ssh root@172.16.0.1 sh /tmp/openwrt_export_hosts.sh</pre>
+					<p class="small">The script output format is <code>ip,hostname,zone,mac</code>.</p>
+				</div>
+				<div id="importSectionBody" class="collapsible-body">
+					<div id="importChecklist" class="checklist"></div>
+					<h3>Bulk Import Hosts</h3>
+					<select id="bulkImportFormat">
+						<option value="auto">Auto detect</option>
+						<option value="host-list">Host list</option>
+						<option value="neighbour">Neighbour / ARP table</option>
+						<option value="dhcp">OpenWrt DHCP leases</option>
+						<option value="openwrt-export">OpenWrt export CSV</option>
+					</select>
+					<textarea id="bulkHostsInput" class="compact-textarea" spellcheck="false" placeholder="Host list: 172.16.20.10 Alexa-Kitchen iot&#10;Neighbour: 172.16.20.10 dev br-iot lladdr aa:bb:cc:dd:ee:ff REACHABLE&#10;DHCP: 1710000000 aa:bb:cc:dd:ee:ff 172.16.20.10 Alexa-Kitchen *&#10;Export CSV: ip,hostname,zone,mac"></textarea>
+					<div class="controls">
+						<button onclick="importBulkHosts()">Import Hosts</button>
+						<button onclick="clearBulkImport()">Clear Import</button>
+					</div>
+					<div id="bulkImportResult" class="result small import-result">No hosts imported yet.</div>
+
+					<h3>Session Tools</h3>
+					<div class="controls">
+						<button onclick="exportDevicesJson()">Export Devices JSON</button>
+						<button onclick="exportDevicesCsv()">Export Devices CSV</button>
+						<button class="button-warn" onclick="exportSessionJson()">Export Full Session JSON</button>
+						<label class="file-label">
+							Import Session / Devices
+							<input type="file" accept=".json,.csv,.txt" onchange="importDataFile(event)" />
+						</label>
+					</div>
+					<textarea id="exportOutput" class="compact-textarea export-output" spellcheck="false" readonly></textarea>
+				</div>
+			</section>
+
 			<div class="help-row">
 				<h2>📥 Firewall Config</h2>
 				<button class="help-btn" type="button" onclick="toggleHelp()">?</button>
@@ -54,7 +99,7 @@ <h2>📥 Firewall Config</h2>
 
 			<h2>📡 Devices</h2>
 			<p class="small">
-				Map real devices to firewall zones, or use the import section below to populate them in bulk.
+				Map real devices to firewall zones, or use the import section above to populate them in bulk.
 			</p>
 
 			<div class="controls">
@@ -79,6 +124,10 @@ <h2>🧭 Subnet Mappings</h2>
 					<p>For OpenWrt UCI import, paste the output of these commands into the UCI box:</p>
 					<pre>uci show firewall | grep -E "\.(name|network)="
 uci show network | grep -E "\.(ipaddr|netmask)="</pre>
+					<p>Helper script:</p>
+					<pre>scp scripts/openwrt_export_subnet_mappings.sh root@172.16.0.1:/tmp/
+ssh root@172.16.0.1 sh /tmp/openwrt_export_subnet_mappings.sh</pre>
+					<p class="small">Script source: <a href="https://github.com/safesploitOrg/openwrt-firewall-visualiser/blob/main/scripts/openwrt_export_subnet_mappings.sh" target="_blank" rel="noopener noreferrer">scripts/openwrt_export_subnet_mappings.sh</a>.</p>
 					<p class="small">This is separate from the firewall config parser. The main firewall box still expects <code>/etc/config/firewall</code>.</p>
 				</div>
 				<textarea id="subnetMappings" class="compact-textarea" spellcheck="false" onchange="handleSubnetMappingsChange()"></textarea>
@@ -90,47 +139,6 @@ <h2>🧭 Subnet Mappings</h2>
 				<div id="uciSubnetResult" class="result small import-result">No UCI subnet import run yet.</div>
 			</section>
 
-			<!-- Import Section -->
-			 <!-- Maybe move this to the top with a collapse button -->
-			<section class="tool-section import-section">
-				<div class="help-row">
-					<h2>📥 Import</h2>
-					<button class="help-btn" type="button" onclick="toggleImportHelp()">?</button>
-				</div>
-				<div id="importHelpBox" class="help-box hidden">
-					<p><strong>Supported inputs:</strong> host lists, <code>ip neighbour</code>, <code>arp -a</code>, <code>cat /tmp/dhcp.leases</code>, and CSV from <a href="https://github.com/safesploitOrg/openwrt-firewall-visualiser/blob/main/scripts/openwrt_export_hosts.sh" target="_blank" rel="noopener noreferrer">scripts/openwrt_export_hosts.sh</a>.</p>
-					<pre>scp scripts/openwrt_export_hosts.sh root@172.16.0.1:/tmp/
-ssh root@172.16.0.1 sh /tmp/openwrt_export_hosts.sh</pre>
-					<p class="small">The script output format is <code>ip,hostname,zone,mac</code>.</p>
-				</div>
-				<div id="importChecklist" class="checklist"></div>
-				<h3>Bulk Import Hosts</h3>
-				<select id="bulkImportFormat">
-					<option value="auto">Auto detect</option>
-					<option value="host-list">Host list</option>
-					<option value="neighbour">Neighbour / ARP table</option>
-					<option value="dhcp">OpenWrt DHCP leases</option>
-					<option value="openwrt-export">OpenWrt export CSV</option>
-				</select>
-				<textarea id="bulkHostsInput" class="compact-textarea" spellcheck="false" placeholder="Host list: 172.16.20.10 Alexa-Kitchen iot&#10;Neighbour: 172.16.20.10 dev br-iot lladdr aa:bb:cc:dd:ee:ff REACHABLE&#10;DHCP: 1710000000 aa:bb:cc:dd:ee:ff 172.16.20.10 Alexa-Kitchen *&#10;Export CSV: ip,hostname,zone,mac"></textarea>
-				<div class="controls">
-					<button onclick="importBulkHosts()">Import Hosts</button>
-					<button onclick="clearBulkImport()">Clear Import</button>
-				</div>
-				<div id="bulkImportResult" class="result small import-result">No hosts imported yet.</div>
-
-				<h3>Session Tools</h3>
-				<div class="controls">
-					<button onclick="exportDevicesJson()">Export Devices JSON</button>
-					<button onclick="exportDevicesCsv()">Export Devices CSV</button>
-					<button class="button-warn" onclick="exportSessionJson()">Export Full Session JSON</button>
-					<label class="file-label">
-						Import Session / Devices
-						<input type="file" accept=".json,.csv,.txt" onchange="importDataFile(event)" />
-					</label>
-				</div>
-				<textarea id="exportOutput" class="compact-textarea export-output" spellcheck="false" readonly></textarea>
-			</section>
 		</section>
 
 		<section class="panel">