fix: render error on input

README.md

@@ -9,9 +9,9 @@ This template should help get you started developing with Tauri, React and Types
 # TODO
 - Move meters polling logic outside dsp state because it causes re-render of everything tied to dsp constantly
 - Check render to improve perfoormances
-- Dont draw geq/peq on gain if bypass
+- Check in meter if clip bool is limit instead
-- Diplay windows on reset geq, peq
+- On close disconenct all ds^p
-- Preset change dont reset
+- Ma-trix gain block sometimes
-- Disbale slider on peq when filter dont use it
+- Q out of range
 
 - Check end to end behavioour

src-tauri/Cargo.lock

@@ -175,7 +175,7 @@ checksum = "ae36dc4177970ef04fde5178d3e2429882def40e57a451f919c098f72baa6cec"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 3.0.2",
+ "syn 3.0.6",
 ]
 
 [[package]]
@@ -225,6 +225,12 @@ version = "0.22.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
 
+[[package]]
+name = "base64"
+version = "0.23.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ac07cdecf99051d9a5238b80f35af32cdeba5b336e55d957b318b50137e18da5"
+
 [[package]]
 name = "bit-set"
 version = "0.8.0"
@@ -397,7 +403,7 @@ dependencies = [
  "semver",
  "serde",
  "serde_json",
- "thiserror 2.0.20",
+ "thiserror 2.0.21",
 ]
 
 [[package]]
@@ -453,6 +459,17 @@ version = "1.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9330f8b2ff13f34540b44e946ef35111825727b38d33286ef986142615121801"
 
+[[package]]
+name = "chacha20"
+version = "0.10.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "65c35e4b699c7e15ccbe7ee35c005e4fc0a278d22238a2857e6ce2dadeda1b06"
+dependencies = [
+ "cfg-if",
+ "cpufeatures 0.3.1",
+ "rand_core",
+]
+
 [[package]]
 name = "chrono"
 version = "0.4.45"
@@ -543,6 +560,15 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "cpufeatures"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5ca28b0ae3115b884660db4118d803791fd6756b6e88f39c0f3f7859060d7566"
+dependencies = [
+ "libc",
+]
+
 [[package]]
 name = "crc32fast"
 version = "1.5.0"
@@ -618,9 +644,9 @@ checksum = "52560adf09603e58c9a7ee1fe1dcb95a16927b17c127f0ac02d6e768a0e25bc1"
 
 [[package]]
 name = "darling"
-version = "0.23.0"
+version = "0.24.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "25ae13da2f202d56bd7f91c25fba009e7717a1e4a1cc98a76d844b65ae912e9d"
+checksum = "ed17f5901b6630b993ca003def43f2f8ef4014fc13b047b57aad617ff32bc2ec"
 dependencies = [
  "darling_core",
  "darling_macro",
@@ -628,26 +654,26 @@ dependencies = [
 
 [[package]]
 name = "darling_core"
-version = "0.23.0"
+version = "0.24.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9865a50f7c335f53564bb694ef660825eb8610e0a53d3e11bf1b0d3df31e03b0"
+checksum = "6837e2cf7485aaae18f86181d2f0e9a7ed297a025e220aeabf63fdebd3a2ddff"
 dependencies = [
  "ident_case",
  "proc-macro2",
  "quote",
  "strsim",
- "syn 2.0.119",
+ "syn 3.0.6",
 ]
 
 [[package]]
 name = "darling_macro"
-version = "0.23.0"
+version = "0.24.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ac3984ec7bd6cfa798e62b4a642426a5be0e68f9401cfc2a01e3fa9ea2fcdb8d"
+checksum = "2ac7135c3ef02b2f7833bbeb1be5ba7f966dcde8a87c6b87f65a778d71a02785"
 dependencies = [
  "darling_core",
  "quote",
- "syn 2.0.119",
+ "syn 3.0.6",
 ]
 
 [[package]]
@@ -661,6 +687,37 @@ dependencies = [
  "windows-sys 0.61.2",
 ]
 
+[[package]]
+name = "defmt"
+version = "1.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e2953bfe4f93bbd20cc71198842756f77d161884c99ebbabc41d80231ded88d1"
+dependencies = [
+ "bitflags 1.3.2",
+ "defmt-macros",
+]
+
+[[package]]
+name = "defmt-macros"
+version = "1.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bad9c72e7ca2137e0dc3813245a0d282fd6daad32fd800af018306a9169b5fe8"
+dependencies = [
+ "defmt-parser",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.119",
+]
+
+[[package]]
+name = "defmt-parser"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "10d60334b3b2e7c9d91ef8150abfb6fa4c1c39ebbcf4a81c2e346aad939fee3e"
+dependencies = [
+ "thiserror 2.0.21",
+]
+
 [[package]]
 name = "deranged"
 version = "0.5.8"
@@ -796,12 +853,13 @@ dependencies = [
 name = "dsp_thomann"
 version = "0.1.0"
 dependencies = [
+ "rand",
  "serde",
  "serde_json",
  "serde_with",
  "strum",
  "strum_macros",
- "thiserror 2.0.20",
+ "thiserror 2.0.21",
 ]
 
 [[package]]
@@ -1255,6 +1313,7 @@ dependencies = [
  "cfg-if",
  "libc",
  "r-efi 6.0.0",
+ "rand_core",
 ]
 
 [[package]]
@@ -1762,6 +1821,60 @@ dependencies = [
  "system-deps",
 ]
 
+[[package]]
+name = "jiff"
+version = "0.2.37"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0ab1baf72f08796de0260609515130699b890ac25f30e610ad894bc5856cafdb"
+dependencies = [
+ "defmt",
+ "jiff-core",
+ "jiff-static",
+ "jiff-tzdb-platform",
+ "log",
+ "portable-atomic",
+ "portable-atomic-util",
+ "serde_core",
+ "windows-link 0.2.1",
+]
+
+[[package]]
+name = "jiff-core"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5e52fe76043ccecc9005d2305ebaadf7d7fc0cc89ca6baa10a94d6bc68c7128c"
+dependencies = [
+ "defmt",
+ "log",
+]
+
+[[package]]
+name = "jiff-static"
+version = "0.2.37"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "378268a1116ad67ae6228701118ac9f491d78fda38a40a1f1a9e1348de6f7212"
+dependencies = [
+ "jiff-core",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.119",
+]
+
+[[package]]
+name = "jiff-tzdb"
+version = "0.1.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "142bd39932ad231f10513df9ab62661fead8719872150b7ad02a2df79f4e141e"
+
+[[package]]
+name = "jiff-tzdb-platform"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "875a5a69ac2bab1a891711cf5eccbec1ce0341ea805560dcd90b7a2e925132e8"
+dependencies = [
+ "jiff-tzdb",
+]
+
 [[package]]
 name = "jni"
 version = "0.21.1"
@@ -2005,7 +2118,7 @@ dependencies = [
  "once_cell",
  "png 0.18.1",
  "serde",
- "thiserror 2.0.20",
+ "thiserror 2.0.21",
  "windows-sys 0.61.2",
 ]
 
@@ -2493,6 +2606,21 @@ dependencies = [
  "windows-sys 0.61.2",
 ]
 
+[[package]]
+name = "portable-atomic"
+version = "1.15.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "05c8b63e8d9609db387f0324918f81d68fe27748f084ef092fb35954d0539a85"
+
+[[package]]
+name = "portable-atomic-util"
+version = "0.2.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "10ab3eb7f3becc3a1cbc4f2c6f20267996cfc1a6467a873763411b136a122715"
+dependencies = [
+ "portable-atomic",
+]
+
 [[package]]
 name = "potential_utf"
 version = "0.1.5"
@@ -2606,6 +2734,23 @@ version = "6.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f8dcc9c7d52a811697d2151c701e0d08956f92b0e24136cf4cf27b57a6a0d9bf"
 
+[[package]]
+name = "rand"
+version = "0.10.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "65c9fb96cbc91e3478eaae79a69fcd3f1ae4ad052e471fe6732fff548984b4af"
+dependencies = [
+ "chacha20",
+ "getrandom 0.4.3",
+ "rand_core",
+]
+
+[[package]]
+name = "rand_core"
+version = "0.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "63b8176103e19a2643978565ca18b50549f6101881c443590420e4dc998a3c69"
+
 [[package]]
 name = "raw-window-handle"
 version = "0.6.2"
@@ -2629,7 +2774,7 @@ checksum = "a4e608c6638b9c18977b00b475ac1f28d14e84b27d8d42f70e0bf1e3dec127ac"
 dependencies = [
  "getrandom 0.2.17",
  "libredox",
- "thiserror 2.0.20",
+ "thiserror 2.0.21",
 ]
 
 [[package]]
@@ -2649,7 +2794,7 @@ checksum = "2c9283685feec7d69af75fb0e858d5e7378f33fe4fc699383b2916ab9273e03c"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 3.0.2",
+ "syn 3.0.6",
 ]
 
 [[package]]
@@ -2883,7 +3028,7 @@ checksum = "e7a5d71263a5a7d47b41f6b3f06ba276f10cc18b0931f1799f710578e2309348"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 3.0.2",
+ "syn 3.0.6",
 ]
 
 [[package]]
@@ -2918,7 +3063,7 @@ checksum = "8d3b1629de253c70a0508c3899572da79ca359fdab27c7920ff00406df418906"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 3.0.2",
+ "syn 3.0.6",
 ]
 
 [[package]]
@@ -2941,16 +3086,17 @@ dependencies = [
 
 [[package]]
 name = "serde_with"
-version = "3.21.0"
+version = "3.24.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "76a5c54c7310e7b8b9577c286d7e399ddd876c3e12b3ed917a8aabc4b96e9e8c"
+checksum = "df9adc193c780ef8f159aee8b61e2d5801aaa555e6eb0947fe45530ec506296f"
 dependencies = [
- "base64 0.22.1",
+ "base64 0.23.1",
  "bs58",
  "chrono",
  "hex",
  "indexmap 1.9.3",
  "indexmap 2.14.0",
+ "jiff",
  "schemars 0.9.0",
  "schemars 1.2.1",
  "serde_core",
@@ -2961,14 +3107,14 @@ dependencies = [
 
 [[package]]
 name = "serde_with_macros"
-version = "3.21.0"
+version = "3.24.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "84d57bc0c8b9a17920c178daa6bb924850d54a9c97ab45194bb8c17ad66bb660"
+checksum = "3e17bbc68e28663bbbb90df47e058aa7eda4fb445b89fe70457bb94fbccf6e49"
 dependencies = [
  "darling",
  "proc-macro2",
  "quote",
- "syn 2.0.119",
+ "syn 3.0.6",
 ]
 
 [[package]]
@@ -3009,7 +3155,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a7507d819769d01a365ab707794a4084392c824f54a7a6a7862f8c3d0892b283"
 dependencies = [
  "cfg-if",
- "cpufeatures",
+ "cpufeatures 0.2.17",
  "digest",
 ]
 
@@ -3199,9 +3345,9 @@ dependencies = [
 
 [[package]]
 name = "syn"
-version = "3.0.2"
+version = "3.0.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a207d6d6a2b7fc470b80443726053f18a2481b7e1eee970597051596567987a3"
+checksum = "8593e8e72159ed2257d083c7a454a85cbf854f37a0966d8d483aff8c8a3ebcee"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -3339,7 +3485,7 @@ dependencies = [
  "tauri-runtime",
  "tauri-runtime-wry",
  "tauri-utils",
- "thiserror 2.0.20",
+ "thiserror 2.0.21",
  "tokio",
  "tray-icon",
  "url",
@@ -3390,7 +3536,7 @@ dependencies = [
  "sha2",
  "syn 2.0.119",
  "tauri-utils",
- "thiserror 2.0.20",
+ "thiserror 2.0.21",
  "time",
  "url",
  "uuid",
@@ -3443,7 +3589,7 @@ dependencies = [
  "serde_json",
  "tauri",
  "tauri-plugin",
- "thiserror 2.0.20",
+ "thiserror 2.0.21",
  "url",
  "windows",
  "zbus",
@@ -3467,7 +3613,7 @@ dependencies = [
  "serde",
  "serde_json",
  "tauri-utils",
- "thiserror 2.0.20",
+ "thiserror 2.0.21",
  "url",
  "webkit2gtk",
  "webview2-com",
@@ -3530,7 +3676,7 @@ dependencies = [
  "serde_json",
  "serde_with",
  "swift-rs",
- "thiserror 2.0.20",
+ "thiserror 2.0.21",
  "toml 1.1.3+spec-1.1.0",
  "url",
  "urlpattern",
@@ -3582,11 +3728,11 @@ dependencies = [
 
 [[package]]
 name = "thiserror"
-version = "2.0.20"
+version = "2.0.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ec86235f5fcc2a73650310756d2ac5b138a5780bbbdfae3eeccec992c435ba4f"
+checksum = "09e52cb86a36cede5cb101bf8908837b3e4c6e5e59fe7fd85c23fb56200d189e"
 dependencies = [
- "thiserror-impl 2.0.20",
+ "thiserror-impl 2.0.21",
 ]
 
 [[package]]
@@ -3602,13 +3748,13 @@ dependencies = [
 
 [[package]]
 name = "thiserror-impl"
-version = "2.0.20"
+version = "2.0.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bc04cd3e1236dd4a98afca4569f2deb3f120e5422a4023be2cb683f8486292af"
+checksum = "fe5197923287db20a58125f0bc85c062f7f2c892de97b18c356f9efb14b28524"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 3.0.2",
+ "syn 3.0.6",
 ]
 
 [[package]]
@@ -3919,7 +4065,7 @@ dependencies = [
  "once_cell",
  "png 0.18.1",
  "serde",
- "thiserror 2.0.20",
+ "thiserror 2.0.21",
  "windows-sys 0.61.2",
 ]
 
@@ -4279,7 +4425,7 @@ version = "0.38.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "381336cfffd772377d291702245447a5251a2ffa5bad679c99e61bc48bacbf9c"
 dependencies = [
- "thiserror 2.0.20",
+ "thiserror 2.0.21",
  "windows",
  "windows-core 0.61.2",
 ]
@@ -4714,7 +4860,7 @@ dependencies = [
  "sha2",
  "soup3",
  "tao-macros",
- "thiserror 2.0.20",
+ "thiserror 2.0.21",
  "url",
  "webkit2gtk",
  "webkit2gtk-sys",

src-tauri/src/commands.rs

@@ -46,7 +46,6 @@ pub struct DSP408Snapshot {
     pub state: types::DSPState,
     pub input_meters: types::InputMeters,
     pub output_meters: types::OutputMeters,
-    pub mode: types::DSPMode,
 }
 
 #[tauri::command]
@@ -104,7 +103,6 @@ pub async fn get_dsp_snapshot(
             state: device.dsp.state().clone(),
             input_meters: device.dsp.input_meters().clone(),
             output_meters: device.dsp.output_meters().clone(),
-            mode: device.dsp.mode(),
         })
     })
 }
@@ -430,7 +428,7 @@ pub async fn set_matrix_routing(
     })
 }
 
-// Command `0x3B` -- TODO
+// Command `0x3B`
 #[tauri::command]
 pub async fn link_channels(
     state: State<'_, AppState>,

src/App.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
 import './App.css';
-import { DSP, AppPage } from './types';
+import { DSP, AppPage, isConnected } from './types';
 import TopBar from './components/Topbar/Topbar';
 import DSPPage from './pages/DspPage/DspPage';
 import AddDSPForm from './pages/AddDspPage/AddDspPage';
@@ -17,7 +17,7 @@ function App() {
   const [selected, setSelected] = useState<number | null>(null);
   const [page, setPage] = useState<AppPage>('home');
   const { notifications, notify, removeNotification, hoverNotification } = useNotifications();
-  const connectedDspCount = dsps.filter((dsp) => dsp.status === 'connected').length;
+  const connectedDspCount = dsps.filter((dsp) => isConnected(dsp)).length;
 
   const activeDsp = dsps.find((d) => d.id === selected) ?? null;
   const activeInstance = activeDsp ? createDSPInstance(activeDsp, setDsps, notify) : null;

src/assets/icons/AudioIcons.tsx

@@ -113,25 +113,14 @@ export function BoltIcon(props: React.SVGProps<SVGSVGElement>) {
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-      <circle
+      <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="2" />
-        cx="12"
-        cy="12"
-        r="4"
-        stroke="currentColor"
-        strokeWidth="2"
-      />
     </svg>
   );
 }
 
 export function GainIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
       <path
         d="M3 12H7M17 12H21"
         stroke="currentColor"
@@ -152,12 +141,7 @@ export function GainIcon(props: React.SVGProps<SVGSVGElement>) {
 
 export function GateIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
       <path
         d="M3 3V21H21"
         stroke="currentColor"
@@ -179,12 +163,7 @@ export function GateIcon(props: React.SVGProps<SVGSVGElement>) {
 
 export function CompressorIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
       <path
         d="M3 3V21H21"
         stroke="currentColor"
@@ -206,12 +185,7 @@ export function CompressorIcon(props: React.SVGProps<SVGSVGElement>) {
 
 export function LimiterIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
       <path
         d="M3 3V21H21"
         stroke="currentColor"
@@ -233,12 +207,7 @@ export function LimiterIcon(props: React.SVGProps<SVGSVGElement>) {
 
 export function DelayIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
       <path
         d="M4 5V19M12 8.5V15.5M20 11V13"
         stroke="currentColor"
@@ -252,12 +221,7 @@ export function DelayIcon(props: React.SVGProps<SVGSVGElement>) {
 
 export function MatrixIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
       <path d="M3 7C11 7 11 4 21 4" />
       <path d="M3 7C11 7 11 20 21 20" />
       <path d="M3 17C11 17 11 12 21 12" />

src/components/ChoiceSelect/ChoiceSelect.tsx

@@ -68,7 +68,7 @@ function ChoiceSelect<T extends string>({
       document.removeEventListener('mousedown', handleMouseDown);
       document.removeEventListener('click', handleClickCapture, true);
     };
-}, [open]);
+  }, [open]);
 
   // Re-check placement/position on scroll/resize while open — the trigger's
   // position can change (e.g. inside a scrollable panel), and since the
@@ -113,7 +113,7 @@ function ChoiceSelect<T extends string>({
       width: rect.width,
       fontSize,
     });
-}
+  }
 
   function openList() {
     if (disabled) return;

src/components/ChoiceStepper/ChoiceStepper.css

@@ -78,9 +78,15 @@
 }
 
 .choice-stepper[data-disabled] {
-  opacity: 0.5;
+  opacity: 0.45;
+  filter: grayscale(1);
 }
 
 .choice-stepper__input:disabled {
   cursor: not-allowed;
 }
+
+.choice-stepper[data-disabled] .choice-stepper__input,
+.choice-stepper[data-disabled] .choice-stepper__arrow-btn {
+  color: var(--border-hairline);
+}

src/components/Sidebar/Sidebar.css

@@ -365,3 +365,54 @@
 .app-root--sidebar-expanded .stage--with-sidebar {
   margin-left: var(--sidebar-width-expanded);
 }
+
+/* ---------- Item (editing state) ---------- */
+
+.sidebar-item--editing {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sidebar-item-gap);
+
+  aspect-ratio: 1;
+  height: calc(var(--header-height) * 0.7);
+
+  border: none;
+
+  background: transparent;
+  padding: 0;
+}
+
+.sidebar-item-input {
+  width: 0;
+  flex: 1 1 auto;
+  min-width: 0;
+
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  border: none;
+  outline: none;
+  box-shadow: none;
+
+  text-align: center;
+
+  color: var(--text-primary);
+  font-family: var(--font-ui);
+  font-size: var(--font-sm);
+  font-weight: var(--font-weight-semibold);
+
+  opacity: 0;
+  max-width: 0;
+
+  transition:
+    opacity var(--dur-fast) var(--ease-standard),
+    max-width var(--dur-base) var(--ease-standard);
+}
+
+.sidebar-rail--expanded .sidebar-item-input {
+  width: auto;
+  opacity: 1;
+  max-width: 200px;
+  border: none;
+}

src/components/Sidebar/Sidebar.tsx

@@ -6,6 +6,7 @@ export type SidebarItem<T extends string = string> = {
   id: T;
   label: string;
   icon: React.ReactNode;
+  editable?: boolean;
 };
 
 export type SidebarAppOption = {
@@ -17,11 +18,75 @@ function SidebarButton<T extends string>({
   item,
   active,
   onSelect,
+  onRename,
 }: {
   item: SidebarItem<T>;
   active: boolean;
   onSelect: () => void;
+  onRename?: (name: string) => void;
 }) {
+  const [editing, setEditing] = useState(false);
+  const [inputValue, setInputValue] = useState(item.label);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!editing) setInputValue(item.label);
+  }, [item.label, editing]);
+
+  function startEditing(e: React.MouseEvent) {
+    e.stopPropagation();
+    if (!onRename) return;
+
+    setInputValue(item.label);
+    setEditing(true);
+
+    requestAnimationFrame(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    });
+  }
+
+  function commitRename() {
+    setEditing(false);
+
+    const trimmed = inputValue.trim();
+
+    if (!trimmed || trimmed === item.label) {
+      setInputValue(item.label);
+      return;
+    }
+
+    onRename?.(trimmed);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === 'Enter') inputRef.current?.blur();
+
+    if (e.key === 'Escape') {
+      setInputValue(item.label);
+      setEditing(false);
+    }
+  }
+
+  if (editing) {
+    return (
+      <div className="sidebar-item sidebar-item--editing">
+        <span className="sidebar-icon">{item.icon}</span>
+
+        <input
+          ref={inputRef}
+          className="sidebar-item-input"
+          value={inputValue}
+          maxLength={8}
+          onChange={(e) => setInputValue(e.target.value.slice(0, 8))}
+          onBlur={commitRename}
+          onKeyDown={handleKeyDown}
+          aria-label="Rename channel"
+        />
+      </div>
+    );
+  }
+
   return (
     <button
       onClick={onSelect}
@@ -31,7 +96,14 @@ function SidebarButton<T extends string>({
       className={'sidebar-item' + (active ? ' sidebar-item--active' : '')}
     >
       <span className="sidebar-icon">{item.icon}</span>
-      <span className="sidebar-label">{item.label}</span>
+
+      <span
+        className="sidebar-label"
+        onDoubleClick={onRename ? startEditing : undefined}
+        title={onRename ? `${item.label} (double click to rename)` : undefined}
+      >
+        {item.label}
+      </span>
     </button>
   );
 }
@@ -230,6 +302,7 @@ export function Sidebar<T extends string>({
   selectedAppId,
   onAppChange,
   onAppRename,
+  onItemRename,
   expanded,
   onToggle,
 }: {
@@ -241,6 +314,7 @@ export function Sidebar<T extends string>({
   selectedAppId?: string;
   onAppChange: (id: string) => void;
   onAppRename: (name: string) => void;
+  onItemRename?: (id: T, name: string) => void;
   expanded: boolean;
   onToggle: () => void;
 }) {
@@ -298,6 +372,9 @@ export function Sidebar<T extends string>({
             item={item}
             active={activeId === item.id}
             onSelect={() => onSelect(item.id)}
+            onRename={
+              item.editable && onItemRename ? (name) => onItemRename(item.id, name) : undefined
+            }
           />
         ))}
       </div>

src/components/Topbar/Topbar.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { DSP, AppPage } from '../../types';
+import { DSP, AppPage, isConnected } from '../../types';
 import AnimatedLogo from '../../assets/icons/AnimatedLogo';
 import { PlusIcon } from '../../assets/icons/PlusIcon';
 import { CrownIcon } from '../../assets/icons/CrownIcon';
@@ -36,7 +36,7 @@ function Tab({
   onDisconnect: (dsp: DSP) => void;
   actions?: React.ReactNode;
 }) {
-  const isConnected = dsp.status === 'connected';
+  const isDspConnected = isConnected(dsp);
 
   const handleTabKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
     if (e.key === 'Enter' || e.key === ' ') {
@@ -60,18 +60,28 @@ function Tab({
       <button
         type="button"
         className="tab-led"
-        aria-label={isConnected ? `Disconnect ${dsp.name}` : `Connect ${dsp.name}`}
+        aria-label={isDspConnected ? `Disconnect ${dsp.name}` : `Connect ${dsp.name}`}
         onClick={(e) => {
           e.stopPropagation();
 
-          if (isConnected) {
+          onSelect();
+
+          if (isDspConnected) {
             onDisconnect(dsp);
           } else {
             onConnect(dsp);
           }
         }}
       >
-        <Led status={dsp.status} />
+        <Led
+          status={
+            dsp.isConnecting
+              ? 'connecting'
+              : isConnected(dsp)
+                ? 'connected'
+                : 'disconnected'
+          }
+        />
       </button>
 
       <span className="tab-name" title={dsp.name}>

src/components/VerticalSlider/VerticalSlider.css

@@ -146,3 +146,26 @@
   font-family: inherit;
   color: inherit;
 }
+
+.gauge-viewport.is-disabled {
+  opacity: 0.45;
+  filter: grayscale(1);
+}
+
+.gauge-viewport.is-disabled .slider {
+  cursor: not-allowed;
+}
+
+.gauge-viewport.is-disabled .thumb {
+  border-color: var(--border-hairline);
+  box-shadow: none;
+}
+
+.gauge-viewport.is-disabled .value {
+  color: var(--border-hairline);
+  box-shadow: none;
+}
+
+.value input:disabled {
+  cursor: not-allowed;
+}

src/components/VerticalSlider/VerticalSlider.tsx

@@ -38,6 +38,9 @@ type VerticalSliderProps = {
 
   className?: string;
   style?: React.CSSProperties;
+
+  /** Greys out the slider and blocks all interaction. */
+  disabled?: boolean;
 };
 
 const defaultStep: StepFn = () => 0.1;
@@ -174,6 +177,7 @@ export default function VerticalSlider({
   formatValue,
   showTicks = true,
   scale = 'linear',
+  disabled = false,
   className,
   style,
 }: VerticalSliderProps) {
@@ -240,6 +244,26 @@ export default function VerticalSlider({
     return () => observer.disconnect();
   }, []);
 
+  useEffect(() => {
+    if (!disabled) return;
+
+    dragging.current = false;
+    keyboardEditing.current = false;
+    keyboardValue.current = null;
+    wheelEditing.current = false;
+    wheelValue.current = null;
+    if (wheelCommitTimeout.current) {
+      clearTimeout(wheelCommitTimeout.current);
+      wheelCommitTimeout.current = null;
+    }
+
+    setEditingText(null);
+    setDisplayValue(value);
+    dragValue.current = value;
+    onInput?.(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled]);
+
   const decimals = useMemo(() => {
     if (listValues) return Math.min(3, getDecimals(displayValue));
     return Math.min(3, getDecimals(step(displayValue)));
@@ -273,6 +297,8 @@ export default function VerticalSlider({
   }
 
   function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (disabled) return;
+
     if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
       return;
     }
@@ -307,6 +333,8 @@ export default function VerticalSlider({
   }
 
   async function handleKeyUp() {
+    if (disabled) return;
+
     if (keyboardValue.current == null) return;
 
     const next = keyboardValue.current;
@@ -323,6 +351,7 @@ export default function VerticalSlider({
   }
 
   function handleWheel(e: WheelEvent) {
+    if (disabled) return;
     e.preventDefault();
 
     wheelEditing.current = true;
@@ -393,6 +422,8 @@ export default function VerticalSlider({
   }
 
   function startDrag(e: React.PointerEvent<HTMLDivElement>) {
+    if (disabled) return;
+
     const target = e.currentTarget;
     dragging.current = true;
     target.setPointerCapture(e.pointerId);
@@ -427,6 +458,11 @@ export default function VerticalSlider({
   }
 
   async function commitEditing() {
+    if (disabled) {
+      setEditingText(null);
+      return;
+    }
+
     if (editingText !== null && editingText !== '' && editingText !== '-') {
       const parsed = Number(editingText);
 
@@ -452,7 +488,10 @@ export default function VerticalSlider({
   const percent = valueToPercent(displayValue, min, max, scale, listValues);
 
   return (
-    <div className={['gauge-viewport', className].filter(Boolean).join(' ')} style={style}>
+    <div
+      className={['gauge-viewport', disabled && 'is-disabled', className].filter(Boolean).join(' ')}
+      style={style}
+    >
       <div
         className={['gauge-track', !showTicks && 'no-ticks'].filter(Boolean).join(' ')}
         ref={trackRef}
@@ -468,7 +507,12 @@ export default function VerticalSlider({
         <div
           className="slider"
           ref={sliderRef}
-          tabIndex={0}
+          role="slider"
+          aria-disabled={disabled}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={displayValue}
+          tabIndex={disabled ? -1 : 0}
           onKeyDown={handleKeyDown}
           onKeyUp={handleKeyUp}
           onPointerDown={startDrag}
@@ -494,6 +538,7 @@ export default function VerticalSlider({
           ref={inputRef}
           type="text"
           inputMode="decimal"
+          disabled={disabled}
           value={editingText ?? formattedValue}
           style={{ width: '100%' }}
           onFocus={() => setEditingText(value.toFixed(decimals))} // plain number while editing

src/features/dsp408/components/ChannelSection/ChannelSection.tsx

@@ -11,12 +11,14 @@ import {
   PEQ_FILTERS_LABEL,
   PEQ_Q_RANGES,
   PEAK_Q_VALUES,
+  PEQ_Q_UNUSED,
+  PEQ_GAIN_USED,
 } from '../../constants';
 import { Channel, PEQBand, PEQFilter, PEQ, Crossover } from '../../types';
 import { DSP408 as DSP } from '../../../../types';
 import { CrossoverFilter } from '../../types';
 import { LinearGraph, LinearGraphHandle } from '../../../../components/LinearGraph/LinearGraph';
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import './ChannelSection.css';
 import ChannelGroup from '../../../../components/ChannelGroup/ChannelGroup';
 import Button from '../../../../components/Button/Button';
@@ -128,6 +130,8 @@ function PeqPanelSliders({
   onLiveValue: (value: PEQ) => void;
 }) {
   const [qMin, qMax] = PEQ_Q_RANGES[peq.filter_type];
+  const qDisabled = PEQ_Q_UNUSED.has(peq.filter_type);
+  const gainDisabled = !PEQ_GAIN_USED.has(peq.filter_type);
 
   const commit = (overrides: Partial<PEQ>) => {
     const next = { ...peq, ...overrides };
@@ -168,6 +172,7 @@ function PeqPanelSliders({
             value={peq.q}
             onChange={(value) => commit({ q: value })}
             onInput={(value) => onLiveValue({ ...peq, q: value })}
+            disabled={qDisabled}
             style={{ width: '100%', flex: '1 1 auto' }}
           />
 
@@ -184,6 +189,7 @@ function PeqPanelSliders({
             formatValue={(v, d) => (v > 0 ? `+${v.toFixed(d)}` : v.toFixed(d))}
             onChange={(value) => commit({ gain: value })}
             onInput={(value) => onLiveValue({ ...peq, gain: value })}
+            disabled={gainDisabled}
             style={{ width: '100%', flex: '1 1 auto' }}
           />
 
@@ -335,6 +341,9 @@ function PeqBandList({
         const [qMin, qMax] = PEQ_Q_RANGES[peq.filter_type];
         const qValues = PEAK_Q_VALUES.filter((q) => q >= qMin && q <= qMax);
 
+        const qDisabled = PEQ_Q_UNUSED.has(peq.filter_type);
+        const gainDisabled = !PEQ_GAIN_USED.has(peq.filter_type);
+
         return (
           <div
             className={`peq-band-list__row${isActive ? ' peq-band-list__row--active' : ''}`}
@@ -370,6 +379,7 @@ function PeqBandList({
               value={peq.q}
               values={qValues}
               formatLabel={(v) => v.toFixed(2)}
+              disabled={qDisabled}
               onChange={(value) => commit(band, { q: value })}
             />
 
@@ -380,6 +390,7 @@ function PeqBandList({
               max={12}
               step={0.1}
               formatLabel={(v) => `${v > 0 ? '+' : ''}${v.toFixed(1)} dB`}
+              disabled={gainDisabled}
               onChange={(value) => commit(band, { gain: value })}
             />
 
@@ -441,6 +452,7 @@ function ChannelSection({
   const [activeBand, setActiveBand] = useState<PEQBand>(PEQBand.B1);
   const [graphView, setGraphView] = useState<GraphView>('both');
   const [resetting, setResetting] = useState(false);
+  const [isResetConfirmOpen, setIsResetConfirmOpen] = useState(false);
 
   // Live values
   const [liveHpFreq, setLiveHpFreq] = useState<number>(FREQUENCY_MIN);
@@ -461,6 +473,23 @@ function ChannelSection({
 
   const bandsOrder = isInput ? PEQ_BANDS_ORDER.slice(0, -1) : PEQ_BANDS_ORDER;
 
+  useEffect(() => {
+    if (!isResetConfirmOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsResetConfirmOpen(false);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isResetConfirmOpen]);
+
+  const handleResetClick = () => {
+    setIsResetConfirmOpen(true);
+  };
+
   const handleResetPeq = async () => {
     if (resetting) return;
     setResetting(true);
@@ -476,6 +505,11 @@ function ChannelSection({
     setResetting(false);
   };
 
+  const confirmResetPeq = async () => {
+    setIsResetConfirmOpen(false);
+    await handleResetPeq();
+  };
+
   const handleBypassClick = () => {
     setPeqBypass(channel, !ActivePeq.bypass);
   };
@@ -681,11 +715,32 @@ function ChannelSection({
               bypass={ActivePeq.bypass}
               resetting={resetting}
               onBypass={handleBypassClick}
-              onReset={handleResetPeq}
+              onReset={handleResetClick}
             />
           </ChannelGroup>
         </div>
       </div>
+
+      {isResetConfirmOpen && (
+        <div className="confirm-modal-overlay" onClick={() => setIsResetConfirmOpen(false)}>
+          <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
+            <h3>Reset {activeChannelState.name} PEQ?</h3>
+            <p>
+              This will set all PEQ bands on {activeChannelState.name} back to flat (0 dB, Peak).
+              This action cannot be undone.
+            </p>
+
+            <div className="confirm-modal__actions">
+              <Button variant="outline" onClick={() => setIsResetConfirmOpen(false)}>
+                Cancel
+              </Button>
+              <Button variant="primary" onClick={confirmResetPeq}>
+                Reset
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
     </>
   );
 }

src/features/dsp408/components/ConnectionSection/ConnectionSection.tsx

@@ -1,4 +1,4 @@
-import { DSP } from '../../../../types';
+import { DSP, isConnected } from '../../../../types';
 import Button from '../../../../components/Button/Button';
 import Card from '../../../../components/Card/Card';
 import Led from '../../../../components/Led/Led';
@@ -14,10 +14,11 @@ function ConnectionPanel({
   onConnect: () => void;
   onDisconnect: () => void;
 }) {
+
     const statusLabel =
-    dsp.status === 'connected'
+      isConnected(dsp)
         ? 'Connected'
-      : dsp.status === 'connecting'
+        : dsp.isConnecting
           ? 'Connecting…'
           : 'Disconnected';
           
@@ -35,10 +36,10 @@ function ConnectionPanel({
 
           <div className="connection-panel__status">
             <span className="connection-panel__led">
-              <Led status={dsp.status} />
+              <Led status={dsp.isConnecting ? "connecting" : isConnected(dsp) ? "connected" : "disconnected"} />
             </span>
 
-            <span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span>
+            <span>{statusLabel}</span>
           </div>
         </div>
 
@@ -64,13 +65,13 @@ function ConnectionPanel({
         </dl>
 
         <div className="connection-panel__actions">
-          {dsp.status === 'connected' ? (
+          {isConnected(dsp) ? (
             <Button variant="outline" onClick={onDisconnect}>
               Disconnect
             </Button>
           ) : (
-            <Button variant="primary" onClick={onConnect} disabled={dsp.status === 'connecting'}>
+            <Button variant="primary" onClick={onConnect} disabled={dsp.isConnecting}>
-              {dsp.status === 'connecting' ? 'Connecting…' : 'Connect'}
+              {dsp.isConnecting ? 'Connecting…' : 'Connect'}
             </Button>
           )}
         </div>

src/features/dsp408/components/DSP408Panel/DSP408Panel.css

@@ -29,3 +29,9 @@
 .app-root:has(.sidebar-rail--expanded) .dsp-loading-overlay {
   left: var(--sidebar-width-expanded);
 }
+
+.app-root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

src/features/dsp408/components/DSP408Panel/DSP408Panel.tsx

@@ -1,6 +1,17 @@
-import { useState } from 'react';
+import { useEffect, useState, type SetStateAction } from 'react';
 import { Sidebar, SidebarItem } from '../../../../components/Sidebar/Sidebar';
-import { BoltIcon, CompressorIcon, DelayIcon, GainIcon, GateIcon, InfoIcon, LimiterIcon, MatrixIcon, SlidersVerticalIcon, TextIcon } from '../../../../assets/icons/AudioIcons';
+import {
+  BoltIcon,
+  CompressorIcon,
+  DelayIcon,
+  GainIcon,
+  GateIcon,
+  InfoIcon,
+  LimiterIcon,
+  MatrixIcon,
+  SlidersVerticalIcon,
+  TextIcon,
+} from '../../../../assets/icons/AudioIcons';
 import ConnectionPanel from '../ConnectionSection/ConnectionSection';
 import GainSection from '../GainSection/GainSection';
 import CompressorSection from '../CompressorSection/CompressorSection';
@@ -17,11 +28,13 @@ import { DSP408 } from '../../../../types';
 import { SidebarId } from '../../constants';
 import './DSP408Panel.css';
 import MiscellaneousPanel from '../MiscellaneousSection/MiscellaneousSection';
+import { PasswordDialog } from '../PasswordDialog/PasswordDialog';
+
+const activeSidebarByDsp = new Map<number, SidebarId>();
 
 function DSP408Panel({ dsp, api }: { dsp: DSP408; api: DSP408Api }) {
-  const [activeSidebar, setActiveSidebar] = useState<SidebarId>('overview');
   const [sidebarExpanded, setSidebarExpanded] = useState(false);
-  const [selectedPreset, setSelectedPreset] = useState(dsp.state?.presets.current_index ?? 0);
+  const [selectedPreset, setSelectedPreset] = useState(dsp.state.presets.current_index);
   const [presetLoading, setPresetLoading] = useState(false);
 
   const inputStates = dsp.state.current_config.input_states;
@@ -36,85 +49,52 @@ function DSP408Panel({ dsp, api }: { dsp: DSP408; api: DSP408Api }) {
     { id: 'delay', label: 'Delay', icon: <DelayIcon /> },
     { id: 'matrix', label: 'Matrix', icon: <MatrixIcon /> },
     { id: 'geq', label: 'Graphic Equalizer', icon: <SlidersVerticalIcon /> },
-    {
+    { id: 'ina', label: inputStates[InputChannel.InA].name, icon: <TextIcon>In A</TextIcon>, editable: true },
-      id: 'ina',
+    { id: 'inb', label: inputStates[InputChannel.InB].name, icon: <TextIcon>In B</TextIcon>, editable: true },
-      label: inputStates[InputChannel.InA].name,
+    { id: 'inc', label: inputStates[InputChannel.InC].name, icon: <TextIcon>In C</TextIcon>, editable: true },
-      icon: <TextIcon>In A</TextIcon>,
+    { id: 'ind', label: inputStates[InputChannel.InD].name, icon: <TextIcon>In D</TextIcon>, editable: true },
-    },
+    { id: 'out1', label: outputStates[OutputChannel.Out1].name, icon: <TextIcon>Out 1</TextIcon>, editable: true },
-    {
+    { id: 'out2', label: outputStates[OutputChannel.Out2].name, icon: <TextIcon>Out 2</TextIcon>, editable: true },
-      id: 'inb',
+    { id: 'out3', label: outputStates[OutputChannel.Out3].name, icon: <TextIcon>Out 3</TextIcon>, editable: true },
-      label: inputStates[InputChannel.InB].name,
+    { id: 'out4', label: outputStates[OutputChannel.Out4].name, icon: <TextIcon>Out 4</TextIcon>, editable: true },
-      icon: <TextIcon>In B</TextIcon>,
+    { id: 'out5', label: outputStates[OutputChannel.Out5].name, icon: <TextIcon>Out 5</TextIcon>, editable: true },
-    },
+    { id: 'out6', label: outputStates[OutputChannel.Out6].name, icon: <TextIcon>Out 6</TextIcon>, editable: true },
-    {
+    { id: 'out7', label: outputStates[OutputChannel.Out7].name, icon: <TextIcon>Out 7</TextIcon>, editable: true },
-      id: 'inc',
+    { id: 'out8', label: outputStates[OutputChannel.Out8].name, icon: <TextIcon>Out 8</TextIcon>, editable: true },
-      label: inputStates[InputChannel.InC].name,
-      icon: <TextIcon>In C</TextIcon>,
-    },
-    {
-      id: 'ind',
-      label: inputStates[InputChannel.InD].name,
-      icon: <TextIcon>In D</TextIcon>,
-    },
-    {
-      id: 'out1',
-      label: outputStates[OutputChannel.Out1].name,
-      icon: <TextIcon>Out 1</TextIcon>,
-    },
-    {
-      id: 'out2',
-      label: outputStates[OutputChannel.Out2].name,
-      icon: <TextIcon>Out 2</TextIcon>,
-    },
-    {
-      id: 'out3',
-      label: outputStates[OutputChannel.Out3].name,
-      icon: <TextIcon>Out 3</TextIcon>,
-    },
-    {
-      id: 'out4',
-      label: outputStates[OutputChannel.Out4].name,
-      icon: <TextIcon>Out 4</TextIcon>,
-    },
-    {
-      id: 'out5',
-      label: outputStates[OutputChannel.Out5].name,
-      icon: <TextIcon>Out 5</TextIcon>,
-    },
-    {
-      id: 'out6',
-      label: outputStates[OutputChannel.Out6].name,
-      icon: <TextIcon>Out 6</TextIcon>,
-    },
-    {
-      id: 'out7',
-      label: outputStates[OutputChannel.Out7].name,
-      icon: <TextIcon>Out 7</TextIcon>,
-    },
-    {
-      id: 'out8',
-      label: outputStates[OutputChannel.Out8].name,
-      icon: <TextIcon>Out 8</TextIcon>,
-    },
     { id: 'miscellaneous', label: 'Miscellaneous', icon: <BoltIcon /> },
   ];
 
-  const presets = dsp.state.presets.names
+  const presets = [
-    ? [
     { id: 'f00', name: 'Factory Preset' },
-        ...dsp.state.presets.names.map((name, index) => ({
+    ...(dsp.state.presets.names.map((name, index) => ({
       id: `u${String(index + 1).padStart(2, '0')}`,
       name,
-        })),
+    })) ??
-      ]
+      Array.from({ length: 20 }, (_, index) => ({
-    : [
-        { id: 'f00', name: 'Factory Preset' },
-        ...Array.from({ length: 20 }, (_, index) => ({
         id: `u${String(index + 1).padStart(2, '0')}`,
         name: 'Default Preset',
-        })),
+      }))),
   ];
 
+  const [activeSidebar, setActiveSidebarState] = useState<SidebarId>(
+    () => activeSidebarByDsp.get(dsp.id) ?? 'overview'
+  );
+
+  useEffect(() => {
+    const saved = activeSidebarByDsp.get(dsp.id) ?? 'overview';
+    setActiveSidebarState(saved);
+  }, [dsp.id]);
+
+  const setActiveSidebar = (value: SetStateAction<SidebarId>) => {
+    setActiveSidebarState(prev => {
+      const next = typeof value === 'function' ? value(prev) : value;
+
+      activeSidebarByDsp.set(dsp.id, next);
+
+      return next;
+    });
+  };
+
   const onAppChange = async (id: string) => {
     const presetIndex = presets.findIndex((preset) => preset.id === id);
     if (presetIndex === -1) return;
@@ -125,6 +105,14 @@ function DSP408Panel({ dsp, api }: { dsp: DSP408; api: DSP408Api }) {
     setPresetLoading(false);
   };
 
+  const onItemRename = async (id: SidebarId, name: string) => {
+    const channel = channelMap[id];
+    if (!channel) return;
+
+    const padded = name.slice(0, 8).padEnd(8, '\0');
+    await api.setChannelName(channel, padded);
+  };
+
   const renderChannel = (channel: { Input: InputChannel } | { Output: OutputChannel }) => (
     <ChannelSection
       dsp={dsp}
@@ -225,6 +213,7 @@ function DSP408Panel({ dsp, api }: { dsp: DSP408; api: DSP408Api }) {
           selectedAppId={presets[selectedPreset]?.id}
           onAppChange={onAppChange}
           onAppRename={api.setCurrentPresetName}
+          onItemRename={onItemRename}
           expanded={sidebarExpanded}
           onToggle={() => setSidebarExpanded((v) => !v)}
         />
@@ -236,6 +225,15 @@ function DSP408Panel({ dsp, api }: { dsp: DSP408; api: DSP408Api }) {
         >
           <div className="dsp-content">{renderTab()}</div>
         </LoadingOverlay>
+
+
+      {dsp.passwordRequired && (
+        <PasswordDialog
+          name={dsp.name}
+          onSubmit={(pw: string) => api.connectWithPassword(pw)}
+          onCancel={() => api.cancelPassword()}
+        />
+      )}
     </div>
   );
 }

src/features/dsp408/components/GainSection/GainSection.tsx

@@ -1,5 +1,5 @@
 import VerticalSlider from '../../../../components/VerticalSlider/VerticalSlider';
-import { InputChannel, Channel, OutputChannel } from '../../types';
+import { InputChannel, Channel, OutputChannel, CrossoverFilter, PEQBand, PEQ } from '../../types';
 import { DSP408 as DSP } from '../../../../types';
 import Button from '../../../../components/Button/Button';
 import ChannelGroup from '../../../../components/ChannelGroup/ChannelGroup';
@@ -58,23 +58,33 @@ function getGainCurvePoints(freqs: number[], gainDb: number): CurvePoint[] {
 
 function getPeqCrossoverPoints(
   freqs: number[],
-  peqChain: { bands: Record<string, unknown> },
+  peqChain: {
+    bypass: boolean;
+    bands: Record<PEQBand, PEQ>;
+  },
   crossover: {
-    high_pass: { frequency: number; slope: unknown };
+    high_pass: { frequency: number; slope: CrossoverFilter };
-    low_pass: { frequency: number; slope: unknown };
+    low_pass: { frequency: number; slope: CrossoverFilter };
   }
 ) {
   return sumCurvePoints([
-    getPeqCurvePoints({ freqs, bands: peqChain.bands as any }),
+    ...(peqChain.bypass
+      ? []
+      : [
+          getPeqCurvePoints({
+            freqs,
+            bands: peqChain.bands,
+          }),
+        ]),
     getCrossoverCurvePoints({
       freqs,
       highPass: {
         frequency: crossover.high_pass.frequency,
-        filter_type: crossover.high_pass.slope as any,
+        filter_type: crossover.high_pass.slope,
       },
       lowPass: {
         frequency: crossover.low_pass.frequency,
-        filter_type: crossover.low_pass.slope as any,
+        filter_type: crossover.low_pass.slope,
       },
     }),
   ]);
@@ -86,9 +96,19 @@ function getInputChannelCurves(
   liveGain: number | undefined
 ): ChannelCurves {
   const gain = liveGain ?? state.gain;
+
   const geqValues = GEQ_BANDS_LABEL.map(({ frequency }) => state.geq.gains[frequency] ?? 0);
-  const geq = getGeqCurvePoints({ freqs, values: geqValues, q: GEQ_CURVE_Q });
+
+  const geq = state.geq.bypass
+    ? []
+    : getGeqCurvePoints({
+        freqs,
+        values: geqValues,
+        q: GEQ_CURVE_Q,
+      });
+
   const peqCrossover = getPeqCrossoverPoints(freqs, state.peq_chain, state.crossover);
+
   const total = sumCurvePoints([geq, peqCrossover, getGainCurvePoints(freqs, gain)]);
 
   return { geq, peqCrossover, total };

src/features/dsp408/components/GeqSection/GeqSection.tsx

@@ -17,7 +17,7 @@ import {
   GEQ_BANDS_LABEL,
   GEQ_CURVE_Q,
 } from '../../constants';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import './GeqSection.css';
 import { getGeqCurvePoints } from '../../utils/graph/geq';
 import { logSpace } from '../../utils/graph/curve';
@@ -175,7 +175,7 @@ function GeqActions({
     <div className="geq-channel-selector">
       <Button
         variant="toggle"
-        className={bypass ? 'active-info' : ''}
+        className={bypass ? 'active-warning' : ''}
         onClick={onBypass}
         style={{
           width: '100%',
@@ -201,7 +201,7 @@ function GeqActions({
           minHeight: 0,
         }}
       >
-        {resetting ? 'Resetting…' : 'Reset'} {/* NEW */}
+        {resetting ? 'Resetting…' : 'Reset'}
       </Button>
     </div>
   );
@@ -219,6 +219,20 @@ function GeqSection({
   const [activeChannel, setActiveChannel] = useState<InputChannel>(INPUT_ORDER[0]);
   const [liveGeq, setLiveGeq] = useState<Partial<Record<InputChannel, LiveBands>>>({});
   const [resetting, setResetting] = useState(false);
+  const [isResetConfirmOpen, setIsResetConfirmOpen] = useState(false);
+
+  useEffect(() => {
+    if (!isResetConfirmOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsResetConfirmOpen(false);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isResetConfirmOpen]);
 
   const handleLiveValue = (channel: InputChannel, band: DiscreteFrequency, value: number) => {
     setLiveGeq((prev) => ({
@@ -245,6 +259,10 @@ function GeqSection({
     setGeqBypass(activeChannel, !activeGeq.bypass);
   };
 
+  const handleResetClick = () => {
+    setIsResetConfirmOpen(true);
+  };
+
   // Sequential per-band reset, since hardware has no bulk reset command.
   const handleReset = async (channel: InputChannel) => {
     if (resetting) return;
@@ -261,6 +279,11 @@ function GeqSection({
     setResetting(false);
   };
 
+  const confirmReset = async () => {
+    setIsResetConfirmOpen(false);
+    await handleReset(activeChannel);
+  };
+
   const activeInputState = dsp.state.current_config.input_states[activeChannel];
   const activeGeq = activeInputState.geq;
   const activeLiveBands = liveGeq[activeChannel];
@@ -306,12 +329,33 @@ function GeqSection({
                 bypass={activeGeq.bypass}
                 resetting={resetting}
                 onBypass={handleBypassClick}
-                onReset={() => handleReset(activeChannel)}
+                onReset={handleResetClick}
               />
             </ChannelGroup>
           </div>
         </div>
       </div>
+
+      {isResetConfirmOpen && (
+        <div className="confirm-modal-overlay" onClick={() => setIsResetConfirmOpen(false)}>
+          <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
+            <h3>Reset {activeInputState.name} GEQ?</h3>
+            <p>
+              This will set all GEQ bands on {activeInputState.name} back to 0 dB. This action
+              cannot be undone.
+            </p>
+
+            <div className="confirm-modal__actions">
+              <Button variant="outline" onClick={() => setIsResetConfirmOpen(false)}>
+                Cancel
+              </Button>
+              <Button variant="primary" onClick={confirmReset}>
+                Reset
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
     </>
   );
 }

src/features/dsp408/components/MiscellaneousSection/MiscellaneousSection.css

@@ -9,31 +9,13 @@
 .miscellaneous-panel {
   width: 100%;
   max-width: 720px;
-  /* margin: 0 auto; */
-}
-
-.miscellaneous-panel__header {
-  margin-bottom: var(--space-6);
-}
-
-.miscellaneous-panel__title {
-  margin: 0;
-  font-size: var(--font-lg);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
-}
-
-.miscellaneous-panel__hint {
-  margin: var(--space-2) 0 0;
-  font-size: var(--font-sm);
-  color: var(--text-muted);
 }
 
 /* Sections */
 
 .miscellaneous-panel__section {
-  padding-top: var(--space-5);
+  padding-top: var(--space-2);
-  margin-top: var(--space-5);
+  margin-top: var(--space-2);
 
   border-top: var(--border-width) solid var(--border-hairline);
 }
@@ -45,7 +27,9 @@
 }
 
 .miscellaneous-panel__section-header {
-  margin-bottom: var(--space-4);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .miscellaneous-panel__section-header h2 {
@@ -57,7 +41,7 @@
 }
 
 .miscellaneous-panel__section-header p {
-  margin: var(--space-1) 0 0;
+  margin: 0;
 
   font-size: var(--font-sm);
   line-height: 1.4;
@@ -74,10 +58,12 @@
 .miscellaneous-panel__field {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
+  gap: 0;
 
   flex: 1;
   min-width: 0;
+
+  font-family: var(--font-mono);
 }
 
 .miscellaneous-panel__field label {
@@ -122,12 +108,12 @@
 
 /* Stepper */
 
-.miscellaneous-panel__field .choice-stepper__input {
+.miscellaneous-panel__choice-select {
-  border: none;
+  height: var(--card-control-height);
-  background: transparent;
+  min-height: var(--card-control-height);
-  font-family: var(--font-mono);
+  max-height: var(--card-control-height);
-  font-weight: var(--font-weight-normal);
+  box-sizing: border-box;
-  text-align: left;
+  flex-shrink: 0;
 }
 
 /* Actions */
@@ -138,19 +124,62 @@
   align-items: center;
   gap: var(--space-3);
 
-  margin-top: var(--space-4);
+  margin-top: var(--space-2);
 }
 
 /* Danger */
 
 .miscellaneous-panel__section--danger {
-  padding-top: var(--space-5);
+  padding-top: var(--space-2);
 }
 
 .miscellaneous-panel__section--danger .miscellaneous-panel__section-header p {
   max-width: 560px;
 }
 
+/* Password Input */
+
+.miscellaneous-panel__password-wrap {
+  position: relative;
+  width: 100%;
+}
+
+.miscellaneous-panel__password-wrap input {
+  width: 100%;
+}
+
+.miscellaneous-panel__password-toggle {
+  position: absolute;
+  top: 50%;
+  right: 3%;
+  transform: translateY(-50%);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: auto;
+  height: 100%;
+
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--accent-brand);
+
+  cursor: pointer;
+}
+
+.miscellaneous-panel__password-toggle:hover {
+  color: var(--text-muted);
+}
+
+.miscellaneous-panel__password-toggle svg {
+  width: auto;
+  height: 65%;
+}
+
+
+
 /* Mobile */
 
 @media (max-width: 600px) {
@@ -218,43 +247,4 @@
   margin-top: var(--space-5);
 }
 
-/* Password Input */
 
-.miscellaneous-panel__password-wrap {
-  position: relative;
-  width: 100%;
-}
-
-.miscellaneous-panel__password-wrap input {
-  width: 100%;
-}
-
-.miscellaneous-panel__password-toggle {
-  position: absolute;
-  top: 50%;
-  right: 3%;
-  transform: translateY(-50%);
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: auto;
-  height: 100%;
-
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--accent-brand);
-
-  cursor: pointer;
-}
-
-.miscellaneous-panel__password-toggle:hover {
-  color: var(--text-muted);
-}
-
-.miscellaneous-panel__password-toggle svg {
-  width: auto;
-  height: 65%;
-}

src/features/dsp408/components/MiscellaneousSection/MiscellaneousSection.tsx

@@ -109,10 +109,11 @@ function MiscellaneousPanel({
 
               <ChoiceSelect<InputType>
                 id="misc-input-type"
+                className='miscellaneous-panel__choice-select'
                 value={inputSource.type}
                 options={INPUT_TYPES}
                 onChange={handleInputTypeChange}
-                style={{color: 'var(--font-primary)'}}
+                style={{ color: 'var(--font-primary)' }}
               />
             </div>
 
@@ -122,6 +123,7 @@ function MiscellaneousPanel({
 
                 <ChoiceSelect<DiscreteFrequency>
                   id="misc-frequency"
+                  className='miscellaneous-panel__choice-select'
                   value={inputSource.frequency}
                   options={DISCRETE_FREQUENCIES}
                   formatLabel={(frequency) => {
@@ -132,7 +134,7 @@ function MiscellaneousPanel({
                     return `${frequency.slice(1)} Hz`;
                   }}
                   onChange={handleFrequencyChange}
-                  style={{color: 'var(--font-primary)'}}
+                  style={{ color: 'var(--font-primary)' }}
                 />
               </div>
             )}

src/features/dsp408/components/PasswordDialog/PasswordDialog.css

@@ -0,0 +1,204 @@
+.password-dialog-overlay {
+  position: fixed;
+  inset: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: var(--space-4);
+
+  background: rgba(0, 0, 0, 0.55);
+
+  z-index: 1000;
+
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.password-dialog {
+  width: 340px;
+  max-width: 100%;
+
+  display: flex;
+  flex-direction: column;
+
+  animation: password-dialog-enter 120ms ease-out;
+}
+
+/* Header */
+
+.password-dialog__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  gap: var(--space-3);
+
+  min-width: 0;
+}
+
+.password-dialog__header-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.password-dialog__title {
+  margin: 0;
+
+  font-size: var(--font-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.password-dialog__type {
+  margin-top: var(--space-1);
+
+  font-size: var(--font-sm);
+  color: var(--text-muted);
+
+  font-family: var(--font-mono);
+  letter-spacing: 0.03em;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Content */
+
+.password-dialog__content {
+  margin-top: var(--space-5);
+}
+
+.password-dialog__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.password-dialog__field label {
+  font-size: var(--font-sm);
+  color: var(--text-muted);
+}
+
+/* Password */
+
+.password-dialog__password-wrap {
+  position: relative;
+  width: 100%;
+}
+
+.password-dialog__password-wrap input {
+  width: 100%;
+  height: var(--card-control-height);
+
+  box-sizing: border-box;
+
+  padding: 0 var(--space-3);
+
+  padding-right: calc(var(--space-3) + 28px);
+
+  background: var(--bg-panel);
+  color: var(--text-primary);
+
+  border: var(--border-width) solid var(--border-hairline);
+  border-radius: var(--radius-sm);
+
+  font-family: var(--font-mono);
+  font-size: var(--font-sm);
+
+  outline: none;
+
+  appearance: none;
+  -webkit-appearance: none;
+
+  transition:
+    border-color var(--dur-base) var(--ease-standard),
+    box-shadow var(--dur-base) var(--ease-standard);
+}
+
+.password-dialog__password-wrap input:focus {
+  border-color: var(--accent-brand);
+
+  box-shadow:
+    0 0 0 2px
+    color-mix(in srgb, var(--accent-brand) 20%, transparent);
+}
+
+.password-dialog__password-wrap input::placeholder {
+  color: var(--text-muted);
+  opacity: 0.5;
+}
+
+.password-dialog__password-toggle {
+  position: absolute;
+  top: 50%;
+  right: var(--space-2);
+
+  transform: translateY(-50%);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 28px;
+  height: 28px;
+
+  padding: 0;
+
+  border: none;
+  background: transparent;
+
+  color: var(--accent-brand);
+
+  cursor: pointer;
+}
+
+.password-dialog__password-toggle:hover {
+  color: var(--text-muted);
+}
+
+.password-dialog__password-toggle svg {
+  width: auto;
+  height: 65%;
+}
+
+/* Actions */
+
+.password-dialog__actions {
+  margin-top: var(--space-5);
+
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  gap: var(--space-3);
+}
+
+/* Animation */
+
+@keyframes password-dialog-enter {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.password-dialog__password-wrap input::-ms-reveal,
+.password-dialog__password-wrap input::-ms-clear {
+  display: none;
+}
+
+.password-dialog__password-wrap input::-webkit-credentials-auto-fill-button {
+  display: none;
+}

src/features/dsp408/components/PasswordDialog/PasswordDialog.tsx

@@ -0,0 +1,116 @@
+import { useState } from 'react';
+
+import Button from '../../../../components/Button/Button';
+import Card from '../../../../components/Card/Card';
+import { EyeIcon, EyeOffIcon } from '../../../../assets/icons/EyesIcons';
+
+import './PasswordDialog.css';
+
+export function PasswordDialog({
+  name,
+  onSubmit,
+  onCancel,
+}: {
+  name: string;
+  onSubmit: (password: string) => void;
+  onCancel: () => void;
+}) {
+  const [password, setPassword] = useState('');
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+  const handleSubmit = () => {
+    if (password.length === 4) {
+      onSubmit(password);
+    }
+  };
+
+  const handlePasswordChange = (value: string) => {
+    if (/^[\x20-\x7E]*$/.test(value) && value.length <= 4) {
+      setPassword(value);
+    }
+  };
+
+  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      onCancel();
+    }
+  };
+
+  return (
+    <div
+      className="password-dialog-overlay"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="password-dialog-title"
+      onMouseDown={handleOverlayClick}
+    >
+      <div className="password-dialog-wrapper">
+        <Card className="password-dialog">
+          <div className="password-dialog__header">
+            <div className="password-dialog__header-text">
+              <h1 id="password-dialog-title" className="password-dialog__title">
+                Device Locked
+              </h1>
+
+              <div className="password-dialog__type" title={name}>
+                {name}
+              </div>
+            </div>
+          </div>
+
+          <div className="password-dialog__content">
+            <div className="password-dialog__field">
+              <label htmlFor="device-password">Password</label>
+
+              <div className="password-dialog__password-wrap">
+                <input
+                  id="device-password"
+                  type={isPasswordVisible ? 'text' : 'password'}
+                  value={password}
+                  maxLength={4}
+                  autoFocus
+                  autoComplete="off"
+                  onChange={(e) => handlePasswordChange(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && password.length === 4) {
+                      handleSubmit();
+                    }
+
+                    if (e.key === 'Escape') {
+                      onCancel();
+                    }
+                  }}
+                />
+
+                <button
+                  type="button"
+                  className="password-dialog__password-toggle"
+                  onClick={() => setIsPasswordVisible((visible) => !visible)}
+                  aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
+                  aria-pressed={isPasswordVisible}
+                  tabIndex={-1}
+                >
+                  {isPasswordVisible ? <EyeOffIcon /> : <EyeIcon />}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className="password-dialog__actions">
+            <Button variant="outline" onClick={onCancel}>
+              Cancel
+            </Button>
+
+            <Button
+              variant="primary"
+              disabled={password.length !== 4}
+              onClick={handleSubmit}
+            >
+              Unlock
+            </Button>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

src/features/dsp408/constants.ts

@@ -225,6 +225,20 @@ export const PEQ_FILTERS_LABEL: { value: PEQFilter; label: string }[] = [
   { value: PEQFilter.AllPass2, label: 'All Pass 2' },
 ];
 
+/** Filter types that ignore Q (first-order filters). */
+export const PEQ_Q_UNUSED = new Set<PEQFilter>([
+  PEQFilter.Lp6Db,
+  PEQFilter.Hp6Db,
+  PEQFilter.AllPass1,
+]);
+
+/** Filter types that ignore gain (everything except Peak and the shelves). */
+export const PEQ_GAIN_USED = new Set<PEQFilter>([
+  PEQFilter.Peak,
+  PEQFilter.LowShelf,
+  PEQFilter.HighShelf,
+]);
+
 export const FREQUENCY_MIN = 19.7;
 export const FREQUENCY_MAX = 20160;
 export const FREQUENCY_QUANTIZATION = 300;

src/features/dsp408/dsp408.ts

@@ -12,6 +12,7 @@ import {
   PEQBand,
   InputSource,
   DSP408Snapshot,
+  DSPMode,
 } from './types';
 import { SetDsps, NotifyFn, updateDSP, setPollingPaused } from '../../dsp/dspShared';
 import { registerPollStopper } from '../../dsp/pollRegistry';
@@ -25,7 +26,7 @@ export type DSP408Api = ReturnType<typeof forDSP408>;
 const selectedIds = new Set<number>();
 const pollIntervals = new Map<number, ReturnType<typeof setInterval>>();
 
-const ACTIVE_POLL_INTERVAL_MS = 1000;
+const ACTIVE_POLL_INTERVAL_MS = 100;
 const BACKGROUND_POLL_INTERVAL_MS = 5000;
 
 function pollIntervalFor(id: number): number {
@@ -117,8 +118,8 @@ export async function create(params: {
     ip: params.ip,
     port: params.port,
     deviceId: params.deviceId,
-    mode: snapshot.mode,
+    mode: params.demo ? DSPMode.Demo: DSPMode.Normal,
-    status: 'disconnected',
+    isConnecting: false,
     pollingPaused: true,
     state: snapshot.state,
     input_meters: snapshot.input_meters,
@@ -127,16 +128,61 @@ export async function create(params: {
 }
 
 export function forDSP408(dsp: DSP408, setDsps: SetDsps, notify: NotifyFn) {
-  async function updateDSPState(): Promise<void> {
+  async function updateDSPState(): Promise<DSP408['state']> {
     try {
       const state = await invoke<DSP408['state']>('get_dsp_state', { id: dsp.id });
+
       updateDSP(setDsps, dsp.id, (d) => ({ ...d, state }) as DSP408);
+
+      return state;
     } catch (err) {
       notify(`Failed to fetch state: ${String(err)}`, 'error', dsp.name);
       throw err;
     }
   }
 
+  const isLocked = (s: DSP408['state']) => s.flags.is_locked;
+
+  async function abortLocked() {
+    await invoke('disconnect_dsp408', { id: dsp.id }).catch(() => {});
+    
+    updateDSPState();
+    updateDSP(setDsps, dsp.id, (d) => ({ ...d, isConnecting: false, passwordRequired: true }));
+  }
+
+  async function connectInternal(password?: string) {
+    updateDSP(setDsps, dsp.id, (d) => ({ ...d, isConnecting: true, passwordRequired: false }));
+    try {
+      await invoke('connect_dsp408', { id: dsp.id });
+
+      let state = await updateDSPState();
+
+      if (isLocked(state)) {
+        if (password === undefined) {
+          await abortLocked();
+          return;
+        }
+
+        await invoke('unlock_device', { id: dsp.id, password });
+
+        state = await updateDSPState();
+
+        if (isLocked(state)) {
+          await abortLocked();
+          notify('Wrong password', 'error', dsp.name);
+          return;
+        }
+      }
+
+      updateDSP(setDsps, dsp.id, (d) => ({ ...d, isConnecting: false, pollingPaused: false }));
+      notify('Connected', 'success', dsp.name);
+      startPolling(dsp, setDsps);
+    } catch (err) {
+      updateDSP(setDsps, dsp.id, (d) => ({ ...d, isConnecting: false }));
+      notify(`Connection failed: ${String(err)}`, 'error', dsp.name);
+    }
+  }
+
   return {
     type: 'DSP408' as const,
 
@@ -155,22 +201,10 @@ export function forDSP408(dsp: DSP408, setDsps: SetDsps, notify: NotifyFn) {
 
     updateDSPState,
 
-    async connect() {
+    connect: () => connectInternal(),
-      updateDSP(setDsps, dsp.id, (d) => ({ ...d, status: 'connecting' }));
+    connectWithPassword: (password: string) => connectInternal(password),
-      try {
+    cancelPassword() {
-        await invoke('connect_dsp408', { id: dsp.id });
+      updateDSP(setDsps, dsp.id, (d) => ({ ...d, passwordRequired: false }));
-
-        await updateDSPState();
-
-        updateDSP(setDsps, dsp.id, (d) => ({ ...d, status: 'connected', pollingPaused: false }));
-
-        notify('Connected', 'success', dsp.name);
-
-        startPolling(dsp, setDsps);
-      } catch (err) {
-        updateDSP(setDsps, dsp.id, (d) => ({ ...d, status: 'disconnected' }));
-        notify(`Connection failed: ${String(err)}`, 'error', dsp.name);
-      }
     },
 
     async disconnect() {
@@ -181,9 +215,10 @@ export function forDSP408(dsp: DSP408, setDsps: SetDsps, notify: NotifyFn) {
           await invoke('disconnect_dsp408', { id: dsp.id });
         });
 
+        await updateDSPState();
+
         updateDSP(setDsps, dsp.id, (d) => ({
           ...d,
-          status: 'disconnected',
           pollingPaused: true,
         }));
 
@@ -773,7 +808,7 @@ export function forDSP408(dsp: DSP408, setDsps: SetDsps, notify: NotifyFn) {
 
           await updateDSPState();
 
-          notify('Channels copied successfully', 'success', dsp.name)
+          notify('Channels copied successfully', 'success', dsp.name);
 
           return true;
         } catch (err) {

src/features/dsp408/types.ts

@@ -243,15 +243,23 @@ export type DSPState = {
   flags: DeviceFlags;
   presets: PresetBank;
   current_config: DSPConfigState;
+  connection: ConnectionStatus,
 };
 
-export type DSPMode = 'demo' | 'disconnected' | 'connected';
+export enum ConnectionStatus {
+  Connected = 'Connected',
+  Disconnected = 'Disconnected',
+}
+
+export enum DSPMode {
+    Demo = 'Demo',
+    Normal = 'Normal',
+}
 
 export type DSP408Snapshot = {
   state: DSPState;
   input_meters: DSP408InputMeters;
   output_meters: DSP408OutputMeters;
-  mode: DSPMode;
 };
 
 export interface Meter {

src/features/dsp408/utils/graph/peq.ts

@@ -139,16 +139,14 @@ function peqBandResponseDb(
 /** Sum of all bands' contributions at a given frequency. */
 function peqTotalCurveDb(
   freq: number,
-  bands: Record<PEQBand, PEQ>,
+  bands: Partial<Record<PEQBand, PEQ>>,
   sampleRate: number = DEFAULT_SAMPLE_RATE
 ): number {
-  let sum = 0;
+  return Object.values(bands).reduce(
-
+    (sum, band) =>
-  for (const band of Object.values(PEQBand)) {
+      band ? sum + peqBandResponseDb(freq, band, sampleRate) : sum,
-    sum += peqBandResponseDb(freq, bands[band], sampleRate);
+    0
-  }
+  );
-
-  return sum;
 }
 
 /**
@@ -307,16 +305,14 @@ function peqBandPhaseDeg(
 
 function peqTotalPhaseDeg(
   freq: number,
-  bands: Record<PEQBand, PEQ>,
+  bands: Partial<Record<PEQBand, PEQ>>,
   sampleRate: number = DEFAULT_SAMPLE_RATE
 ): number {
-  let sum = 0;
+  return Object.values(bands).reduce(
-
+    (sum, band) =>
-  for (const band of Object.values(PEQBand)) {
+      band ? sum + peqBandPhaseDeg(freq, band, sampleRate) : sum,
-    sum += peqBandPhaseDeg(freq, bands[band], sampleRate);
+    0
-  }
+  );
-
-  return sum;
 }
 
 export function getPeqPhasePoints({

src/types.ts

@@ -3,10 +3,9 @@ import {
   DSPMode,
   DSP408OutputMeters,
   DSP408InputMeters,
+  ConnectionStatus,
 } from './features/dsp408/types';
 
-export type DSPStatus = 'connected' | 'connecting' | 'disconnected';
-
 export type NotificationType = 'success' | 'error' | 'warning';
 export type Notification = {
   id: number;
@@ -38,11 +37,16 @@ interface DSPBase {
   deviceId: number;
   mode: DSPMode;
 
-  status: DSPStatus;
+  passwordRequired?: boolean;
-
+  isConnecting: boolean;
   pollingPaused: boolean;
 }
 
+export function isConnected(dsp: DSP): boolean {
+  return dsp.type === 'DSP408'
+    && dsp.state.connection === ConnectionStatus.Connected;
+}
+
 export type DSP408 = DSPBase & {
   type: 'DSP408';
   state: DSP408State;