feat: add set gain

2026-07-22 18:17:36 +02:00
parent c2b67d8bb2
commit 9e3f3803a6
41 changed files with 3863 additions and 869 deletions
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "tabWidth": 2
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -7,20 +7,25 @@
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
-    "tauri": "tauri"
+    "tauri": "tauri",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx}\""
  },
  "dependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
    "@tauri-apps/api": "^2",
-    "@tauri-apps/plugin-opener": "^2"
+    "@tauri-apps/plugin-opener": "^2",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
  },
  "devDependencies": {
+    "@tauri-apps/cli": "^2",
    "@types/react": "^19.1.8",
    "@types/react-dom": "^19.1.6",
    "@vitejs/plugin-react": "^4.6.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.6",
+    "prettier": "^3.9.6",
    "typescript": "~5.8.3",
-    "vite": "^7.0.4",
-    "@tauri-apps/cli": "^2"
+    "vite": "^7.0.4"
  }
 }
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@ -796,6 +796,8 @@ dependencies = [
 name = "dsp_thomann"
 version = "0.1.0"
 dependencies = [
+ "serde",
+ "serde_json",
 "strum",
 "strum_macros",
 "thiserror 2.0.19",
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@ -22,4 +22,4 @@ tauri = { version = "2", features = [] }
 tauri-plugin-opener = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
-dsp_thomann = { path = "../../dsp_thomann" }
+dsp_thomann = { path = "../../dsp_thomann", features = ["serialization"] }
--- a/src-tauri/src/commands.rs
+++ b/src-tauri/src/commands.rs
@ -1,14 +1,58 @@
 use tauri::State;
-use crate::state::AppState;
+use crate::state::{AppState, DSPDevice};
 use dsp_thomann::dsp408::DSP408;
 use std::{net::IpAddr, str::FromStr};
+use std::sync::{Arc, Mutex};

-#[tauri::command]
-pub fn device_count(
-    state: State<AppState>
-) -> usize {
-    let devices = state.devices.lock().unwrap();
-    devices.len()
+impl AppState {
+    pub fn with_device_mut<F, R>(
+        &self,
+        id: u64,
+        f: F,
+    ) -> Result<R, String>
+    where
+        F: FnOnce(&mut DSPDevice) -> Result<R, String>,
+    {
+        let device = {
+            let devices = self
+                .devices
+                .lock()
+                .map_err(|e| e.to_string())?;
+
+            devices
+                .get(&id)
+                .cloned()
+                .ok_or_else(|| "DSP not found".to_string())?
+        };
+
+        let mut device = device
+            .lock()
+            .map_err(|e| e.to_string())?;
+
+        f(&mut device)
+    }
+
+    pub fn remove_device(
+        &self,
+        id: u64,
+    ) -> Result<(), String> {
+
+        let device = {
+            let mut devices = self.devices
+                .lock()
+                .map_err(|e| e.to_string())?;
+
+            devices
+                .remove(&id)
+                .ok_or_else(|| format!("DSP {} not found", id))?
+        };
+
+        // Drop happens here.
+        // DSPDevice owns DSP408.
+        drop(device);
+
+        Ok(())
+    }
 }

 #[tauri::command]
@ -17,19 +61,114 @@ pub fn create_dsp408(
    ip: String,
    port: u16,
    device_id: u8,
-) -> Result<usize, String> {
+) -> Result<u64, String> {
+
+    let ip = IpAddr::from_str(&ip)
+        .map_err(|e| e.to_string())?;
+
+    let dsp = DSP408::new(ip, port, device_id)
+        .map_err(|e| e.to_string())?;
+
+    let mut next_id = state
+        .next_id
+        .lock()
+        .map_err(|e| e.to_string())?;
+
+    let id = *next_id;
+    *next_id += 1;
+
+    let device = DSPDevice {
+        dsp,
+    };

    let mut devices = state
        .devices
        .lock()
        .map_err(|e| e.to_string())?;

-    let ip = IpAddr::from_str(&ip).map_err(|e| e.to_string())?;
+    devices.insert(
+        id,
+        Arc::new(Mutex::new(device)),
+    );

-    let dsp = DSP408::new(ip, port, device_id)
-        .map_err(|e| e.to_string())?;
+    Ok(id)
+}

-    devices.push(dsp);
+#[tauri::command]
+pub async fn remove_dsp408(
+    state: State<'_, AppState>,
+    id: u64,
+) -> Result<(), String> {

-    Ok(devices.len())
-}
+    state.with_device_mut(id, |device| {
+
+        if device.dsp.connected() {
+            device.dsp
+                .disconnect()
+                .map_err(|e| e.to_string())?;
+        }
+
+        Ok(())
+    })?;
+
+    state.remove_device(id)?;
+
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn connect_dsp408(
+    state: State<'_, AppState>,
+    id: u64,
+) -> Result<(), String> {
+
+    state.with_device_mut(id, |device| {
+        device.dsp
+            .connect()
+            .map_err(|e| e.to_string())
+    })
+}
+
+#[tauri::command]
+pub async fn disconnect_dsp408(
+    state: State<'_, AppState>,
+    id: u64,
+) -> Result<(), String> {
+
+    state.with_device_mut(id, |device| {
+        device.dsp
+            .disconnect()
+            .map_err(|e| e.to_string())
+    })
+}
+
+#[tauri::command]
+pub async fn get_dsp_state(
+    state: State<'_, AppState>,
+    id: u64,
+) -> Result<dsp_thomann::dsp408::types::DSPState, String> {
+
+    state.with_device_mut(id, |device| {
+        let dsp_state = device.dsp
+            .state()
+            .map_err(|e| e.to_string())?;
+
+        Ok(dsp_state.clone())
+    })
+}
+
+#[tauri::command]
+pub async fn set_channel_gain(
+    state: State<'_, AppState>,
+    id: u64,
+    channel: dsp_thomann::dsp408::types::Channel,
+    db: f32,
+) -> Result<bool, String> {
+    state.with_device_mut(id, |device| {
+        let r = device.dsp
+            .set_channel_gain(channel, db)
+            .map_err(|e| e.to_string())?;
+
+        Ok(r)
+    })
+}
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@ -3,21 +3,18 @@ mod commands;

 use state::AppState;

-// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
-#[tauri::command]
-fn greet(name: &str) -> String {
-    format!("Hello, {}! You've been greeted from Rust!", name)
-}
-
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .manage(AppState::new())
        .invoke_handler(tauri::generate_handler![
-                greet,
-                commands::device_count,
                commands::create_dsp408,
+                commands::connect_dsp408,
+                commands::remove_dsp408,
+                commands::disconnect_dsp408,
+                commands::get_dsp_state,
+                commands::set_channel_gain,
            ]
        )
        .run(tauri::generate_context!())
--- a/src-tauri/src/state.rs
+++ b/src-tauri/src/state.rs
@ -1,14 +1,21 @@
-use std::sync::Mutex;
+use std::sync::{Mutex, Arc};
+use std::collections::HashMap;
 use dsp_thomann::dsp408::DSP408;

+pub struct DSPDevice {
+    pub dsp: DSP408,
+}
+
 pub struct AppState {
-    pub devices: Mutex<Vec<DSP408>>,
+    pub devices: Mutex<HashMap<u64, Arc<Mutex<DSPDevice>>>>,
+    pub next_id: Mutex<u64>,
 }

 impl AppState {
    pub fn new() -> Self {
        Self {
-            devices: Mutex::new(Vec::new()),
+            devices: Mutex::new(HashMap::new()),
+            next_id: Mutex::new(1),
        }
    }
 }
--- a/src/App.css
+++ b/src/App.css
@ -1,479 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
-
-:root {
-  --bg-void: #0d0f12;
-  --bg-panel: #16191d;
-  --bg-raised: #1e2227;
-  --border-hairline: #2a2f36;
-  --text-primary: #e8eaed;
-  --text-muted: #8b92a0;
-  --accent-brand: #5b8def;
-  --accent-live: #3ecf8e;
-  --accent-down: #ff5c5c;
-  --accent-connecting: #f5a623;
-
-  --font-ui: "Inter", -apple-system, "Segoe UI", sans-serif;
-  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body,
-#root {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  background: var(--bg-void);
-  color: var(--text-primary);
-  font-family: var(--font-ui);
-}
-
-.mono {
-  font-family: var(--font-mono);
-}
-
-.app {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-
-/* ---------- Top bar ---------- */
-
-.topbar {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  padding: 0 16px;
-  height: 48px;
-  background: var(--bg-void);
-  border-bottom: 1px solid var(--border-hairline);
-  -webkit-app-region: drag;
-}
-
-.logo-slot {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  aspect-ratio: 1 / 1;
-  width: auto;
-  flex-shrink: 0;
-  overflow: hidden;
-  -webkit-app-region: no-drag;
-}
-
-.logo-slot > * {
-  width: 100%;
-  height: 100%;
-}
-
-.tabstrip {
-  display: flex;
-  align-items: flex-end;
-  gap: 2px;
-  height: 48px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  -webkit-app-region: no-drag;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-hairline) transparent;
-}
-
-.tabstrip::-webkit-scrollbar {
-  height: 6px;
-}
-
-.tabstrip::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.tabstrip::-webkit-scrollbar-thumb {
-  background: var(--border-hairline);
-  border-radius: 6px;
-}
-
-.tabstrip::-webkit-scrollbar-thumb:hover {
-  background: var(--text-muted);
-}
-
-.tab {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 36px;
-  margin-top: 8px;
-  padding: 0 12px;
-  border: 1px solid transparent;
-  border-bottom: none;
-  border-radius: 8px 8px 0 0;
-  background: transparent;
-  color: var(--text-muted);
-  font-family: var(--font-ui);
-  font-size: 13px;
-  cursor: pointer;
-  transition: background 0.12s ease, color 0.12s ease;
-  width: 160px;
-  flex: 0 0 auto;
-}
-
-.tab:hover {
-  background: var(--bg-raised);
-  color: var(--text-primary);
-}
-
-.tab--active {
-  background: var(--bg-panel);
-  border-color: var(--border-hairline);
-  color: var(--text-primary);
-}
-
-.tab--dimmed {
-  opacity: 0.55;
-}
-
-.tab-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.tab-close {
-  margin-left: 2px;
-  font-size: 15px;
-  line-height: 1;
-  color: var(--text-muted);
-  border-radius: 4px;
-  padding: 2px 4px;
-}
-
-.tab-close:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: var(--text-primary);
-}
-
-/* Quiet icon button — used once at least one tab exists */
-.tab-add {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  align-self: flex-end;
-  margin-bottom: 5px; /* (tab height 36 - button height 26) / 2 */
-  margin-left: 6px;
-  border: none;
-  border-radius: 50%;
-  background: transparent;
-  color: var(--text-muted);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: background 0.12s ease, color 0.12s ease;
-}
-
-.tab-add:hover {
-  background: var(--bg-raised);
-  color: var(--text-primary);
-}
-
-.tab-add:active {
-  background: var(--border-hairline);
-}
-
-/* Clearer CTA — used when the bar has nothing else to anchor to */
-.tab-add-empty {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  height: 30px;
-  align-self: flex-end;
-  margin-bottom: 3px; /* (tab height 36 - CTA height 30) / 2 */
-  padding: 0 12px 0 10px;
-  border: 1px dashed var(--border-hairline);
-  border-radius: 999px;
-  background: transparent;
-  color: var(--text-muted);
-  font-family: var(--font-ui);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
-}
-
-.tab-add-empty:hover {
-  background: var(--bg-raised);
-  border-color: var(--accent-brand);
-  border-style: solid;
-  color: var(--text-primary);
-}
-
-/* ---------- LED status dot ---------- */
-
-.led {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  background: var(--accent-down);
-}
-
-.led--connected {
-  background: var(--accent-live);
-  box-shadow: 0 0 6px 1px var(--accent-live);
-}
-
-.led--connecting {
-  background: var(--accent-connecting);
-  box-shadow: 0 0 6px 1px var(--accent-connecting);
-  animation: pulse 1s ease-in-out infinite;
-}
-
-.led--disconnected {
-  background: var(--accent-down);
-  box-shadow: 0 0 4px 0px var(--accent-down);
-}
-
-.led--lg {
-  width: 12px;
-  height: 12px;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-}
-
-/* ---------- Stage / main area ---------- */
-
-.stage {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 24px;
-  background: var(--bg-panel);
-  overflow-y: auto;
-}
-
-.card {
-  width: 100%;
-  max-width: 480px;
-  background: var(--bg-raised);
-  border: 1px solid var(--border-hairline);
-  border-radius: 12px;
-  padding: 28px;
-}
-
-.empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 14px;
-  color: var(--text-muted);
-  text-align: center;
-}
-
-.empty-mark {
-  font-size: 28px;
-  color: var(--border-hairline);
-}
-
-.empty p {
-  margin: 0;
-  font-size: 14px;
-}
-
-/* ---------- DSP panel ---------- */
-
-.panel-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 24px;
-}
-
-.panel-title {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.panel-type {
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--text-muted);
-  font-family: var(--font-mono);
-  letter-spacing: 0.03em;
-}
-
-.status-block {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.status-label {
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.status-label--connected { color: var(--accent-live); }
-.status-label--connecting { color: var(--accent-connecting); }
-.status-label--disconnected { color: var(--text-muted); }
-
-.specs {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin: 0 0 24px;
-  padding: 16px;
-  background: var(--bg-panel);
-  border: 1px solid var(--border-hairline);
-  border-radius: 8px;
-}
-
-.spec {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 13px;
-}
-
-.spec dt {
-  color: var(--text-muted);
-}
-
-.spec dd {
-  margin: 0;
-  color: var(--text-primary);
-}
-
-.panel-actions {
-  display: flex;
-  justify-content: flex-end;
-}
-
-/* ---------- Form ---------- */
-
-.form-header {
-  margin-bottom: 20px;
-}
-
-.form-hint {
-  margin: 6px 0 0;
-  font-size: 13px;
-  color: var(--text-muted);
-}
-
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-bottom: 16px;
-  flex: 1;
-}
-
-.field--grow {
-  flex: 2;
-}
-
-.field--narrow {
-  flex: 1;
-}
-
-.field-row {
-  display: flex;
-  gap: 12px;
-}
-
-.field label {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.field input,
-.field select {
-  height: 36px;
-  padding: 0 10px;
-  background: var(--bg-panel);
-  border: 1px solid var(--border-hairline);
-  border-radius: 6px;
-  color: var(--text-primary);
-  font-family: var(--font-ui);
-  font-size: 13px;
-  outline: none;
-  transition: border-color 0.12s ease;
-}
-
-.field input.mono {
-  font-family: var(--font-mono);
-}
-
-.field input:focus,
-.field select:focus {
-  border-color: var(--accent-brand);
-}
-
-.form-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  margin-top: 8px;
-}
-
-/* ---------- Buttons ---------- */
-
-.btn {
-  height: 36px;
-  padding: 0 16px;
-  border-radius: 6px;
-  font-family: var(--font-ui);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  border: 1px solid transparent;
-  transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
-}
-
-.btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.btn-primary {
-  background: var(--accent-brand);
-  color: #0d0f12;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: #6f9bf2;
-}
-
-.btn-outline {
-  background: transparent;
-  border-color: var(--accent-down);
-  color: var(--accent-down);
-}
-
-.btn-outline:hover {
-  background: rgba(255, 92, 92, 0.1);
-}
-
-.btn-ghost {
-  background: transparent;
-  border-color: var(--border-hairline);
-  color: var(--text-muted);
-}
-
-.btn-ghost:hover {
-  color: var(--text-primary);
-  border-color: var(--text-muted);
-}
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,103 +0,0 @@
-import { invoke } from "@tauri-apps/api/core";
-
-import { useState } from "react";
-import "./App.css";
-import { DSP, DSPStatus } from "./types";
-import TopBar from "./components/TopBar";
-import DSPPanel from "./components/Dsppanel";
-import AddDSPForm from "./components/Adddspform";
-
-function App() {
-  const [dsps, setDsps] = useState<DSP[]>([]);
-  const [selected, setSelected] = useState<string | null>(null);
-  const [showAdd, setShowAdd] = useState(false);
-
-  async function addDSP(dsp: Omit<DSP, "status">) {
-    try {
-      const count = await invoke<number>("create_dsp408", {
-        ip: dsp.ip,
-        port: dsp.port,
-        deviceId: Number(dsp.deviceId),
-      });
-
-      console.log("DSP count:", count);
-
-      const newDsp: DSP = {
-        ...dsp,
-        status: "disconnected",
-      };
-
-      setDsps(prev => [...prev, newDsp]);
-      setSelected(newDsp.id);
-      setShowAdd(false);
-    } catch (err) {
-      console.error("Failed to create DSP:", err);
-      // TODO: Show an error dialog/toast
-    }
-  }
-
-  function removeDSP(id: string) {
-    setDsps(prev => {
-      const next = prev.filter(d => d.id !== id);
-      if (selected === id) {
-        setSelected(next.length ? next[0].id : null);
-      }
-      return next;
-    });
-  }
-
-  function setStatus(id: string, status: DSPStatus) {
-    setDsps(prev => prev.map(d => (d.id === id ? { ...d, status } : d)));
-  }
-
-  function connect(dsp: DSP) {
-    setStatus(dsp.id, "connecting");
-    window.setTimeout(() => {
-      setStatus(dsp.id, "connected");
-    }, 900);
-  }
-
-  function disconnect(dsp: DSP) {
-    setStatus(dsp.id, "disconnected");
-  }
-
-  const activeDsp = dsps.find(d => d.id === selected) ?? null;
-
-  return (
-    <div className="app">
-      <TopBar
-        dsps={dsps}
-        selected={selected}
-        showAdd={showAdd}
-        onSelect={id => {
-          setSelected(id);
-          setShowAdd(false);
-        }}
-        onRemove={removeDSP}
-        onAddClick={() => setShowAdd(true)}
-      />
-
-      <main className="stage">
-        {showAdd ? (
-          <AddDSPForm onCancel={() => setShowAdd(false)} onAdd={addDSP} />
-        ) : activeDsp ? (
-          <DSPPanel
-            dsp={activeDsp}
-            onConnect={() => connect(activeDsp)}
-            onDisconnect={() => disconnect(activeDsp)}
-          />
-        ) : (
-          <div className="empty">
-            <div className="empty-mark">◇</div>
-            <p>No output selected.</p>
-            <button className="btn btn-primary" onClick={() => setShowAdd(true)}>
-              Add a DSP
-            </button>
-          </div>
-        )}
-      </main>
-    </div>
-  );
-}
-
-export default App;
--- a/src/assets/icons/AnimatedLogo.tsx
+++ b/src/assets/icons/AnimatedLogo.tsx
@ -1,59 +1,59 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react';

 // degrees per second
-const DONUT_BASE_SPEED = 360 / 8
-const DONUT_HOVER_SPEED = 360 / 2
-const INNER_BASE_SPEED = 360 / 12
-const INNER_HOVER_SPEED = 360 / 3
+const DONUT_BASE_SPEED = 360 / 8;
+const DONUT_HOVER_SPEED = 360 / 2;
+const INNER_BASE_SPEED = 360 / 12;
+const INNER_HOVER_SPEED = 360 / 3;

 const AnimatedLogo = ({ size = 45, className = '' }) => {
-  const [isHovered, setIsHovered] = useState(false)
-  const isHoveredRef = useRef(false)
-  const donutGroupRef = useRef<SVGGElement | null>(null)
-  const innerGroupRef = useRef<SVGGElement | null>(null)
-  const angleRef = useRef({ donut: 0, inner: 0 })
-  const lastTimeRef = useRef<number | null>(null)
-  const rafIdRef = useRef<number | null>(null)
+  const [isHovered, setIsHovered] = useState(false);
+  const isHoveredRef = useRef(false);
+  const donutGroupRef = useRef<SVGGElement | null>(null);
+  const innerGroupRef = useRef<SVGGElement | null>(null);
+  const angleRef = useRef({ donut: 0, inner: 0 });
+  const lastTimeRef = useRef<number | null>(null);
+  const rafIdRef = useRef<number | null>(null);

  useEffect(() => {
-    isHoveredRef.current = isHovered
-  }, [isHovered])
+    isHoveredRef.current = isHovered;
+  }, [isHovered]);

  useEffect(() => {
    const tick = (time: number) => {
-      if (lastTimeRef.current == null) lastTimeRef.current = time
-      const dt = (time - lastTimeRef.current) / 1000
-      lastTimeRef.current = time
+      if (lastTimeRef.current == null) lastTimeRef.current = time;
+      const dt = (time - lastTimeRef.current) / 1000;
+      lastTimeRef.current = time;

-      const donutSpeed = isHoveredRef.current ? DONUT_HOVER_SPEED : DONUT_BASE_SPEED
-      const innerSpeed = isHoveredRef.current ? INNER_HOVER_SPEED : INNER_BASE_SPEED
+      const donutSpeed = isHoveredRef.current ? DONUT_HOVER_SPEED : DONUT_BASE_SPEED;
+      const innerSpeed = isHoveredRef.current ? INNER_HOVER_SPEED : INNER_BASE_SPEED;

      // Accumulate angle continuously -- speed can change instantly
      // without ever resetting the current rotation.
-      angleRef.current.donut = (angleRef.current.donut + donutSpeed * dt) % 360
-      angleRef.current.inner = (angleRef.current.inner + innerSpeed * dt) % 360
+      angleRef.current.donut = (angleRef.current.donut + donutSpeed * dt) % 360;
+      angleRef.current.inner = (angleRef.current.inner + innerSpeed * dt) % 360;

      if (donutGroupRef.current) {
        donutGroupRef.current.setAttribute(
          'transform',
          `rotate(${angleRef.current.donut} 100 100)`
-        )
+        );
      }
      if (innerGroupRef.current) {
        innerGroupRef.current.setAttribute(
          'transform',
          `rotate(${angleRef.current.inner} 100 100)`
-        )
+        );
      }

-      rafIdRef.current = requestAnimationFrame(tick)
-    }
+      rafIdRef.current = requestAnimationFrame(tick);
+    };

-    rafIdRef.current = requestAnimationFrame(tick)
+    rafIdRef.current = requestAnimationFrame(tick);
    return () => {
-      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current)
-    }
-  }, [])
+      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
+    };
+  }, []);

  return (
    <div
@ -150,13 +150,7 @@ const AnimatedLogo = ({ size = 45, className = '' }) => {
            <stop offset="100%" stopColor="rgba(0,0,0,0.5)" />
          </radialGradient>

-          <linearGradient
-            id="shadowGradient"
-            x1="20%"
-            y1="20%"
-            x2="80%"
-            y2="80%"
-          >
+          <linearGradient id="shadowGradient" x1="20%" y1="20%" x2="80%" y2="80%">
            <stop offset="0%" stopColor="#0f1d42" />
            <stop offset="25%" stopColor="#1f2a5d" />
            <stop offset="45%" stopColor="#332f78" />
@ -203,7 +197,7 @@ const AnimatedLogo = ({ size = 45, className = '' }) => {
        </g>
      </svg>
    </div>
-  )
-}
+  );
+};

-export default AnimatedLogo
+export default AnimatedLogo;
--- a/src/assets/icons/AudioIcons.tsx
+++ b/src/assets/icons/AudioIcons.tsx
@ -0,0 +1,33 @@
+export function InfoIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M12 11V16M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21ZM12.0498 8V8.1L11.9502 8.1002V8H12.0498Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function SlidersIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <circle cx="16" cy="13" r="3" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
+
+      <circle cx="6" cy="22" r="3" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
+
+      <circle cx="26" cy="16" r="3" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
+
+      <path
+        d="M6 29V25M6 16V3M16 7V3M26 10V3M16 29V16M26 29V19"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
--- a/src/assets/icons/ChevronLeftIcon.tsx
+++ b/src/assets/icons/ChevronLeftIcon.tsx
@ -0,0 +1,13 @@
+export function ChevronLeftIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M9 2.5L4.5 7L9 11.5"
+        stroke="currentColor"
+        strokeWidth="1.75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
--- a/src/assets/icons/CloseIcon.tsx
+++ b/src/assets/icons/CloseIcon.tsx
@ -0,0 +1,7 @@
+export function CloseIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor" {...props}>
+      <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+    </svg>
+  );
+}
--- a/src/assets/icons/CrownIcon.tsx
+++ b/src/assets/icons/CrownIcon.tsx
@ -0,0 +1,14 @@
+export function CrownIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M3 7L6.5 10L9 5L12 10L15 5L17.5 10L21 7L19 18H5L3 7Z"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M5 18H19" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+    </svg>
+  );
+}
--- a/src/assets/icons/PlusIcon.tsx
+++ b/src/assets/icons/PlusIcon.tsx
@ -0,0 +1,12 @@
+export function PlusIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M8 2.5V13.5M2.5 8H13.5"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
--- a/src/components/DSPTabs.tsx
+++ b/src/components/DSPTabs.tsx
@ -1,49 +0,0 @@
-import { DSP } from "../types";
-
-type Props = {
-  dsps: DSP[];
-  selected: string | null;
-  showAdd: boolean;
-  onSelect(id: string): void;
-  onRemove(id: string): void;
-  onAdd(): void;
-};
-
-export default function DSPTabs({
-  dsps,
-  onSelect,
-  onRemove,
-  onAdd,
-}: Props) {
-
-return (
-  <div className="tabstrip">
-
-    {dsps.map(dsp => (
-      <button
-        key={dsp.id}
-        className="tab"
-        onClick={() => onSelect(dsp.id)}
-      >
-        <span className={"led led--" + dsp.status}/>
-        {dsp.name}
-
-        <span
-          onClick={(e)=>{
-            e.stopPropagation();
-            onRemove(dsp.id);
-          }}
-        >
-          ×
-        </span>
-
-      </button>
-    ))}
-
-    <button className="tab-add" onClick={onAdd}>
-      +
-    </button>
-
-  </div>
-);
-}
--- a/src/components/Notifications.tsx
+++ b/src/components/Notifications.tsx
@ -0,0 +1,31 @@
+import type { Notification } from '../types/types';
+
+type Props = {
+  notifications: Notification[];
+  onRemove: (id: number) => void;
+};
+
+export default function Notifications({ notifications, onRemove }: Props) {
+  return (
+    <div className="notifications">
+      {notifications.map((n) => (
+        <div
+          key={n.id}
+          className={`notification ${n.type} ${n.removing ? 'notification-out' : ''}`}
+        >
+          <span className="notification-message" title={n.message}>
+            {n.message}
+          </span>
+
+          <button
+            className="tab-close notification-close"
+            onClick={() => onRemove(n.id)}
+            aria-label="Dismiss notification"
+          >
+            ×
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/src/components/Topbar.tsx
+++ b/src/components/Topbar.tsx
@ -1,68 +0,0 @@
-import { DSP } from "../types";
-import Tab from "./Tab";
-import AnimatedLogo from "./AnimatedLogo"; // adjust path to wherever yours lives
-
-function TopBar({
-  dsps,
-  selected,
-  showAdd,
-  onSelect,
-  onRemove,
-  onAddClick,
-}: {
-  dsps: DSP[];
-  selected: string | null;
-  showAdd: boolean;
-  onSelect: (id: string) => void;
-  onRemove: (id: string) => void;
-  onAddClick: () => void;
-}) {
-  const hasTabs = dsps.length > 0;
-
-  return (
-    <header className="topbar">
-      <div className="logo-slot">
-        <AnimatedLogo />
-      </div>
-
-      <div className="tabstrip">
-        {dsps.map(dsp => (
-          <Tab
-            key={dsp.id}
-            dsp={dsp}
-            active={selected === dsp.id && !showAdd}
-            dimmed={showAdd}
-            onSelect={() => onSelect(dsp.id)}
-            onRemove={() => onRemove(dsp.id)}
-          />
-        ))}
-
-        {hasTabs ? (
-          <button className="tab-add" aria-label="Add DSP" onClick={onAddClick}>
-            <PlusIcon />
-          </button>
-        ) : (
-          <button className="tab-add-empty" onClick={onAddClick}>
-            <PlusIcon />
-            <span>Add DSP</span>
-          </button>
-        )}
-      </div>
-    </header>
-  );
-}
-
-function PlusIcon() {
-  return (
-    <svg viewBox="0 0 16 16" width="14" height="14" fill="none">
-      <path
-        d="M8 2.5V13.5M2.5 8H13.5"
-        stroke="currentColor"
-        strokeWidth="1.6"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-export default TopBar;
--- a/src/components/app/AddDspPage.tsx
+++ b/src/components/app/AddDspPage.tsx
@ -1,26 +1,29 @@
-import { useState } from "react";
-import { DSP, DSP_TYPES } from "../types";
+import { useState } from 'react';
+import { DSP, DSP_TYPES } from '../../types/types';

 function AddDSPForm({
  onCancel,
  onAdd,
 }: {
  onCancel: () => void;
-  onAdd: (d: Omit<DSP, "status">) => void;
+  onAdd: (d: Omit<DSP, 'status' | 'id'>) => void;
 }) {
  const [form, setForm] = useState({
-    name: "",
+    name: '',
    type: DSP_TYPES[0].name,
-    ip: "192.168.1.100",
+    ip: '192.168.1.100',
    port: DSP_TYPES[0].defaultPort,
-    deviceId: "",
+    deviceId: '1',
  });

-  const canSubmit = form.name.trim().length > 0 && form.ip.trim().length > 0 && form.deviceId;
+  const canSubmit =
+    form.name.trim().length > 0 && form.ip.trim().length > 0 && form.deviceId.length > 0;

  function submit() {
    if (!canSubmit) return;
-    onAdd({ id: crypto.randomUUID(), ...form });
+    onAdd({
+      ...form,
+    });
  }

  return (
@ -36,7 +39,7 @@ function AddDSPForm({
          id="f-name"
          placeholder="Main Room DSP"
          value={form.name}
-          onChange={e => setForm({ ...form, name: e.target.value })}
+          onChange={(e) => setForm({ ...form, name: e.target.value })}
        />
      </div>

@ -46,41 +49,37 @@ function AddDSPForm({
          <select
            id="f-type"
            value={form.type}
-            onChange={e => {
-                const selected = DSP_TYPES.find(
-                d => d.name === e.target.value
-                );
+            onChange={(e) => {
+              const selected = DSP_TYPES.find((d) => d.name === e.target.value);

-                setForm({
+              setForm({
                ...form,
                type: e.target.value,
                port: selected?.defaultPort ?? form.port,
-                });
+              });
            }}
-            >
-            {DSP_TYPES.map(dsp => (
-                <option key={dsp.name} value={dsp.name}>
+          >
+            {DSP_TYPES.map((dsp) => (
+              <option key={dsp.name} value={dsp.name}>
                {dsp.name}
-                </option>
+              </option>
            ))}
          </select>
        </div>

        <div className="field">
-            <label htmlFor="f-deviceid">Device ID</label>
-            <input
-                id="f-deviceid"
-                className="mono"
-                type="number"
-                min={1}
-                max={255}
-                step={1}
-                placeholder="1"
-                value={form.deviceId}
-                onChange={e =>
-                setForm({ ...form, deviceId: e.target.value })
-                }
-            />
+          <label htmlFor="f-deviceid">Device ID</label>
+          <input
+            id="f-deviceid"
+            className="mono"
+            type="number"
+            min={1}
+            max={255}
+            step={1}
+            placeholder="1"
+            value={form.deviceId}
+            onChange={(e) => setForm({ ...form, deviceId: e.target.value })}
+          />
        </div>
      </div>

@ -91,7 +90,7 @@ function AddDSPForm({
            id="f-ip"
            className="mono"
            value={form.ip}
-            onChange={e => setForm({ ...form, ip: e.target.value })}
+            onChange={(e) => setForm({ ...form, ip: e.target.value })}
          />
        </div>

@ -102,7 +101,7 @@ function AddDSPForm({
            className="mono"
            type="number"
            value={form.port}
-            onChange={e => setForm({ ...form, port: Number(e.target.value) })}
+            onChange={(e) => setForm({ ...form, port: Number(e.target.value) })}
          />
        </div>
      </div>
@ -119,4 +118,4 @@ function AddDSPForm({
  );
 }

-export default AddDSPForm;
+export default AddDSPForm;
--- a/src/components/app/App.tsx
+++ b/src/components/app/App.tsx
@ -0,0 +1,174 @@
+import { invoke } from '@tauri-apps/api/core';
+
+import { useState } from 'react';
+import '../../styles/App.css';
+import { DSP, DSPStatus, AppPage } from '../../types/types';
+import TopBar from '../topbar/Topbar';
+import DSPPage from '../dsp408/DspPage';
+import AddDSPForm from './AddDspPage';
+import { useNotifications } from '../../hooks/useNotifications';
+import Notifications from '../Notifications';
+import { DSPState } from '../../types/dsp408State';
+import CreditsPage from './CreditsPage';
+import HomePage from './HomePage';
+
+function App() {
+  const [dsps, setDsps] = useState<DSP[]>([]);
+  const [selected, setSelected] = useState<number | null>(null);
+  const [page, setPage] = useState<AppPage>('home');
+  const { notifications, notify, removeNotification } = useNotifications();
+
+  async function addDSP(dsp: Omit<DSP, 'id' | 'status'>) {
+    try {
+      const id = await invoke<number>('create_dsp408', {
+        ip: dsp.ip,
+        port: dsp.port,
+        deviceId: Number(dsp.deviceId),
+      });
+
+      const newDsp: DSP = {
+        id,
+        ...dsp,
+        status: 'disconnected',
+      };
+
+      setDsps((prev) => [...prev, newDsp]);
+      setSelected(id);
+      setPage('view-dsp');
+
+      notify('Added successfully', 'success', dsp.name);
+    } catch (err) {
+      notify(`Connection failed: ${String(err)}`, 'error', dsp.name);
+    }
+  }
+
+  async function removeDSP(dsp: DSP) {
+    try {
+      let id = dsp.id;
+      await invoke('remove_dsp408', {
+        id,
+      });
+
+      setDsps((prev) => {
+        const next = prev.filter((d) => d.id !== id);
+
+        if (selected === id) {
+          setSelected(next.length ? next[0].id : null);
+        }
+
+        return next;
+      });
+
+      notify('Removed successfully', 'success', dsp?.name);
+    } catch (err) {
+      notify(`Remove failed: ${String(err)}`, 'error', dsp?.name);
+    }
+  }
+
+  async function connectDSP(dsp: DSP) {
+    setStatus(dsp.id, 'connecting');
+
+    try {
+      await invoke('connect_dsp408', {
+        id: dsp.id,
+      });
+
+      console.log('Connected');
+
+      setStatus(dsp.id, 'connected');
+
+      const state = await getDSPState(dsp);
+
+      console.log(state);
+
+      notify('Connected', 'success', dsp.name);
+    } catch (err) {
+      notify(`Connection failed: ${String(err)}`, 'error', dsp.name);
+
+      setStatus(dsp.id, 'disconnected');
+    }
+  }
+
+  async function disconnectDSP(dsp: DSP) {
+    try {
+      await invoke('disconnect_dsp408', {
+        id: dsp.id,
+      });
+
+      setStatus(dsp.id, 'disconnected');
+
+      notify('Disconnected', 'success', dsp.name);
+    } catch (err) {
+      notify(`Disconnect failed: ${String(err)}`, 'error', dsp.name);
+    }
+  }
+
+  async function getDSPState(dsp: DSP) {
+    try {
+      const state = await invoke<DSPState>('get_dsp_state', {
+        id: dsp.id,
+      });
+
+      return state;
+    } catch (err) {
+      notify(`Failed to get state: ${String(err)}`, 'error', dsp.name);
+
+      return null;
+    }
+  }
+
+  function setStatus(id: number, status: DSPStatus) {
+    setDsps((prev) => prev.map((d) => (d.id === id ? { ...d, status } : d)));
+  }
+
+  const activeDsp = dsps.find((d) => d.id === selected) ?? null;
+  const connectedDspCount = dsps.filter((dsp) => dsp.status === 'connected').length;
+
+  return (
+    <div className="app">
+      <Notifications notifications={notifications} onRemove={removeNotification} />
+
+      <TopBar
+        dsps={dsps}
+        selected={selected}
+        page={page}
+        setPage={setPage}
+        setSelect={setSelected}
+
+        onSelect={(id) => {
+          setSelected(id);
+          setPage('view-dsp');
+        }}
+
+        onRemove={removeDSP}
+
+        onAddClick={() => {
+          setPage('add-dsp');
+        }}
+      />
+
+      <main className="stage">
+        {page === 'credits' ? (
+          <CreditsPage />
+        ) : page === 'add-dsp' ? (
+          <AddDSPForm onCancel={() => setPage('home')} onAdd={addDSP} />
+        ) : activeDsp ? (
+          <DSPPage
+            dsp={activeDsp}
+            onConnect={() => connectDSP(activeDsp)}
+            onDisconnect={() => disconnectDSP(activeDsp)}
+            notify={notify}
+          />
+        ) : (
+          <HomePage
+            onAddDSP={() => setPage('add-dsp')}
+            dspCount={dsps.length}
+            connectedCount={connectedDspCount}
+          />
+        )}
+      </main>
+    </div>
+  );
+}
+
+export default App;
--- a/src/components/app/CreditsPage.tsx
+++ b/src/components/app/CreditsPage.tsx
@ -0,0 +1,35 @@
+function CreditsPage() {
+  return (
+    <div className="card panel">
+      <div className="panel-header">
+        <div>
+          <h1 className="panel-title">Credits</h1>
+          <div className="panel-type">Thank you to everyone supporting the project</div>
+        </div>
+      </div>
+
+      <dl className="specs">
+        <div className="spec">
+          <dt>Developer</dt>
+          <dd>Your Name</dd>
+        </div>
+
+        <div className="spec">
+          <dt>Design</dt>
+          <dd>Open Source Community</dd>
+        </div>
+
+        <div className="spec">
+          <dt>Libraries</dt>
+          <dd className="mono">React · Tauri · TypeScript</dd>
+        </div>
+      </dl>
+
+      <div className="panel-actions">
+        <button className="btn btn-primary">Support the project</button>
+      </div>
+    </div>
+  );
+}
+
+export default CreditsPage;
--- a/src/components/app/HomePage.tsx
+++ b/src/components/app/HomePage.tsx
@ -0,0 +1,37 @@
+function HomePage({
+  dspCount,
+  connectedCount,
+  onAddDSP,
+}: {
+  dspCount: number;
+  connectedCount: number;
+  onAddDSP: () => void;
+}) {
+  return (
+    <div className="card panel">
+      <dl className="specs">
+        <div className="spec">
+          <dt>Connected</dt>
+          <dd>
+            {connectedCount} DSP{connectedCount !== 1 ? 's' : ''}
+          </dd>
+        </div>
+
+        <div className="spec">
+          <dt>Devices</dt>
+          <dd>
+            {dspCount} DSP{dspCount !== 1 ? 's' : ''} configured
+          </dd>
+        </div>
+      </dl>
+
+      <div className="panel-actions">
+        <button className="btn btn-primary" onClick={onAddDSP}>
+          Add a DSP
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default HomePage;
--- a/src/components/dsp408/ConnectionPanel.tsx
+++ b/src/components/dsp408/ConnectionPanel.tsx
@ -1,6 +1,6 @@
-import { DSP } from "../types";
+import { DSP } from '../../types/types';

-function DSPPanel({
+function ConnectionPanel({
  dsp,
  onConnect,
  onDisconnect,
@ -10,11 +10,11 @@ function DSPPanel({
  onDisconnect: () => void;
 }) {
  const statusLabel =
-    dsp.status === "connected"
-      ? "Connected"
-      : dsp.status === "connecting"
-      ? "Connecting…"
-      : "Disconnected";
+    dsp.status === 'connected'
+      ? 'Connected'
+      : dsp.status === 'connecting'
+        ? 'Connecting…'
+        : 'Disconnected';

  return (
    <div className="card panel">
@ -25,10 +25,8 @@ function DSPPanel({
        </div>

        <div className="status-block">
-          <span className={"led led--lg led--" + dsp.status} />
-          <span className={"status-label status-label--" + dsp.status}>
-            {statusLabel}
-          </span>
+          <span className={`led led--lg led--${dsp.status}`} />
+          <span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span>
        </div>
      </div>

@ -37,18 +35,20 @@ function DSPPanel({
          <dt>IP address</dt>
          <dd className="mono">{dsp.ip}</dd>
        </div>
+
        <div className="spec">
          <dt>Port</dt>
          <dd className="mono">{dsp.port}</dd>
        </div>
+
        <div className="spec">
          <dt>Device ID</dt>
-          <dd className="mono">{dsp.deviceId || "—"}</dd>
+          <dd className="mono">{dsp.deviceId || '—'}</dd>
        </div>
      </dl>

      <div className="panel-actions">
-        {dsp.status === "connected" ? (
+        {dsp.status === 'connected' ? (
          <button className="btn btn-outline" onClick={onDisconnect}>
            Disconnect
          </button>
@ -56,9 +56,9 @@ function DSPPanel({
          <button
            className="btn btn-primary"
            onClick={onConnect}
-            disabled={dsp.status === "connecting"}
+            disabled={dsp.status === 'connecting'}
          >
-            {dsp.status === "connecting" ? "Connecting…" : "Connect"}
+            {dsp.status === 'connecting' ? 'Connecting…' : 'Connect'}
          </button>
        )}
      </div>
@ -66,4 +66,4 @@ function DSPPanel({
  );
 }

-export default DSPPanel;
+export default ConnectionPanel;
--- a/src/components/dsp408/DspPage.tsx
+++ b/src/components/dsp408/DspPage.tsx
@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { DSP } from '../../types/types';
+import Sidebar from './Sidebar/Sidebar';
+import { InfoIcon, SlidersIcon } from '../../assets/icons/AudioIcons';
+import ConnectionPanel from './ConnectionPanel';
+import GainPanel from './GainPanel';
+import { NotificationType } from '../../types/types';
+
+function DSPPage({
+  dsp,
+  onConnect,
+  onDisconnect,
+  notify,
+}: {
+  dsp: DSP;
+  onConnect: () => void;
+  onDisconnect: () => void;
+  notify: (message: string, type?: NotificationType, dspName?: string) => void;
+}) {
+  const [activeSidebar, setActiveSidebar] = useState('overview');
+
+  const sidebarItems = [
+    {
+      id: 'overview',
+      label: 'Overview',
+      icon: <InfoIcon />,
+    },
+    {
+      id: 'gain',
+      label: 'Gain',
+      icon: <SlidersIcon />,
+    },
+  ];
+
+  const renderTab = () => {
+    switch (activeSidebar) {
+      case 'overview':
+        return <ConnectionPanel dsp={dsp} onConnect={onConnect} onDisconnect={onDisconnect} />;
+
+      case 'gain':
+        return <GainPanel dsp={dsp} notify={notify} />;
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="dsp-layout">
+      <Sidebar
+        items={sidebarItems}
+        activeId={activeSidebar}
+        onSelect={setActiveSidebar}
+        appName={dsp.name}
+      />
+
+      <div className="dsp-content">{renderTab()}</div>
+    </div>
+  );
+}
+
+export default DSPPage;
--- a/src/components/dsp408/GainPanel.tsx
+++ b/src/components/dsp408/GainPanel.tsx
@ -0,0 +1,56 @@
+import VerticalStack from './VerticalStack/VerticalStack';
+import VerticalSlider from './Slider.tsx/VerticalSlider';
+import { invoke } from '@tauri-apps/api/core';
+import { InputChannel, Channel } from '../../types/dsp408State';
+import { DSP } from '../../types/types';
+import { NotificationType } from '../../types/types';
+
+function GainPanel({
+  dsp,
+  notify,
+}: {
+  dsp: DSP;
+  notify: (message: string, type?: NotificationType, dspName?: string) => void;
+}) {
+  const setGain = async (value: number) => {
+    const channel: Channel = {
+      Input: InputChannel.InA,
+    };
+
+    try {
+      const success = await invoke<boolean>('set_channel_gain', {
+        id: dsp.id,
+        channel,
+        db: value,
+      });
+
+      if (success) {
+        notify(`Input A gain set to ${value} dB`, 'success', dsp.name);
+      } else {
+        notify('Failed to set input gain', 'error', dsp.name);
+      }
+    } catch (err) {
+      notify(`Gain update failed: ${String(err)}`, 'error', dsp.name);
+    }
+  };
+
+  return (
+    <VerticalStack title="In A" titleFontSize={18}>
+      <VerticalSlider
+        min={-60}
+        max={12}
+        step={1}
+        switchStepValue={-10}
+        switchStep={0.1}
+        unit=" dB"
+        onChange={setGain}
+      />
+
+      <button className="btn btn-ghost">Reset</button>
+
+      <button className="btn btn-primary">Apply</button>
+    </VerticalStack>
+  );
+}
+
+export default GainPanel;
--- a/src/components/dsp408/Sidebar/Sidebar.css
+++ b/src/components/dsp408/Sidebar/Sidebar.css
@ -0,0 +1,268 @@
+/* ---------- Label ---------- */
+
+.sidebar-label {
+  opacity: 0;
+  max-width: 0;
+
+  overflow: hidden;
+  white-space: nowrap;
+
+  transition:
+    opacity var(--dur-fast) var(--ease-standard),
+    max-width var(--dur-base) var(--ease-standard);
+}
+
+.sidebar-rail--expanded .sidebar-label {
+  opacity: 1;
+  max-width: 200px;
+}
+
+
+/* ---------- Icon ---------- */
+
+.sidebar-icon {
+  width: var(--sidebar-icon-size, 20px);
+  height: var(--sidebar-icon-size, 20px);
+
+  flex-shrink: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: currentColor;
+}
+
+.sidebar-icon svg {
+  width: 100%;
+  height: 100%;
+
+  display: block;
+
+  stroke: currentColor;
+  fill: none;
+}
+
+
+/* ---------- Item ---------- */
+
+.sidebar-item {
+  width: var(--sidebar-item-size);
+  height: var(--sidebar-item-size);
+
+  margin: 0 auto;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border: var(--border-width) solid transparent;
+  border-radius: var(--radius-lg);
+
+  background: transparent;
+  color: var(--text-muted);
+
+  cursor: pointer;
+
+  transition:
+    width var(--dur-base) var(--ease-standard),
+    background var(--dur-base) var(--ease-standard),
+    color var(--dur-base) var(--ease-standard),
+    border-color var(--dur-base) var(--ease-standard);
+}
+
+
+.sidebar-rail--expanded .sidebar-item {
+  width: calc(100% - var(--space-4));
+  gap: var(--sidebar-item-gap);
+
+  justify-content: flex-start;
+
+  padding-left: var(--sidebar-item-padding);
+}
+
+
+/* ---------- Item States ---------- */
+
+.sidebar-item:hover {
+  background: var(--bg-raised);
+  color: var(--text-primary);
+}
+
+
+.sidebar-item--active {
+  border-color: var(--accent-brand);
+  color: var(--text-primary);
+}
+
+
+/* ---------- Sidebar ---------- */
+
+.sidebar-rail {
+  position: fixed;
+
+  top: var(--header-height);
+  left: 0;
+  bottom: 0;
+
+  width: var(--sidebar-width-collapsed);
+
+  display: flex;
+  flex-direction: column;
+
+  background: var(--bg-void);
+
+  border-right: var(--border-width) solid var(--border-hairline);
+
+  z-index: 30;
+
+  overflow: visible;
+
+  transition:
+    width var(--dur-base) var(--ease-standard);
+}
+
+
+.sidebar-rail--expanded {
+  width: var(--sidebar-width-expanded);
+}
+
+
+/* ---------- App name ---------- */
+
+.sidebar-app-name {
+  position: absolute;
+
+  top: var(--space-3);
+  left: var(--space-4);
+
+  height: var(--sidebar-toggle-size);
+
+  display: flex;
+  align-items: center;
+
+  font-size: var(--font-size-sm, 13px);
+  font-weight: 600;
+  color: var(--text-primary);
+
+  white-space: nowrap;
+  overflow: hidden;
+
+  opacity: 0;
+  pointer-events: none;
+
+  transition: opacity var(--dur-fast) var(--ease-standard);
+
+  z-index: 31;
+}
+
+.sidebar-rail--expanded .sidebar-app-name {
+  opacity: 1;
+  pointer-events: auto;
+  transition-delay: var(--dur-fast);
+}
+
+
+/* ---------- Scroll ---------- */
+
+.sidebar-scroll {
+  flex: 1;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  gap: var(--space-1);
+
+  padding: calc(var(--sidebar-toggle-size) + var(--space-3) * 2) 0 var(--space-3);
+
+  overflow-y: auto;
+}
+
+
+.sidebar-rail--expanded .sidebar-scroll {
+  align-items: stretch;
+}
+
+
+/* ---------- Toggle ---------- */
+
+.sidebar-toggle {
+  position: absolute;
+
+  top: var(--space-3);
+  left: calc((var(--sidebar-width-collapsed) - var(--sidebar-toggle-size)) / 2);
+
+  width: var(--sidebar-toggle-size);
+  height: var(--sidebar-toggle-size);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border: none;
+  border-radius: var(--radius-pill);
+
+  background: var(--bg-void);
+  color: var(--text-muted);
+
+  cursor: pointer;
+  padding: 0;
+
+  box-shadow: none;
+
+  transition:
+    left var(--dur-base) var(--ease-standard),
+    background var(--dur-base) var(--ease-standard),
+    color var(--dur-base) var(--ease-standard),
+    transform var(--dur-fast) var(--ease-standard);
+
+  z-index: 32;
+}
+
+
+.sidebar-rail--expanded .sidebar-toggle {
+  left: calc(var(--sidebar-width-expanded) - var(--sidebar-toggle-size) - var(--space-3));
+}
+
+
+.sidebar-toggle:hover {
+  background: var(--bg-raised);
+
+  color: var(--text-primary);
+
+  border-color: var(--accent-brand);
+}
+
+
+.sidebar-toggle:active {
+  transform: scale(.92);
+}
+
+.sidebar-rail--expanded .sidebar-toggle:active {
+  transform: scale(.92);
+}
+
+
+.sidebar-toggle-icon {
+  width: 14px;
+  height: 14px;
+  
+  transition:
+    transform var(--dur-base) var(--ease-standard);
+}
+
+
+.sidebar-rail--expanded .sidebar-toggle-icon {
+  transform: rotate(180deg);
+}
+
+
+/* ---------- Content ---------- */
+
+.stage--with-sidebar {
+  margin-left: var(--sidebar-width-collapsed);
+
+  transition:
+    margin-left var(--dur-base) var(--ease-standard);
+}
--- a/src/components/dsp408/Sidebar/Sidebar.tsx
+++ b/src/components/dsp408/Sidebar/Sidebar.tsx
@ -0,0 +1,54 @@
+import { useState } from 'react';
+import './Sidebar.css';
+import { ChevronLeftIcon } from '../../../assets/icons/ChevronLeftIcon';
+
+export type SidebarItem = {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+};
+
+export default function Sidebar({
+  items,
+  activeId,
+  onSelect,
+  appName,
+}: {
+  items: SidebarItem[];
+  activeId: string | null;
+  onSelect: (id: string) => void;
+  appName: string;
+}) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <nav className={`sidebar-rail ${expanded ? 'sidebar-rail--expanded' : ''}`}>
+      <span className="sidebar-app-name">{appName}</span>
+
+      <button
+        className="sidebar-toggle"
+        onClick={() => setExpanded((prev) => !prev)}
+        aria-label={expanded ? 'Collapse sidebar' : 'Expand sidebar'}
+        aria-expanded={expanded}
+      >
+        <ChevronLeftIcon className="sidebar-toggle-icon" />
+      </button>
+
+      <div className="sidebar-scroll">
+        {items.map((item) => (
+          <button
+            key={item.id}
+            onClick={() => onSelect(item.id)}
+            title={item.label}
+            aria-label={item.label}
+            aria-current={activeId === item.id ? 'page' : undefined}
+            className={`sidebar-item ${activeId === item.id ? 'sidebar-item--active' : ''}`}
+          >
+            <span className="sidebar-icon">{item.icon}</span>
+            <span className="sidebar-label">{item.label}</span>
+          </button>
+        ))}
+      </div>
+    </nav>
+  );
+}
--- a/src/components/dsp408/Slider.tsx/VerticalSlider.css
+++ b/src/components/dsp408/Slider.tsx/VerticalSlider.css
@ -0,0 +1,164 @@
+.gauge-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    width: 4.375rem;
+
+    padding-top: var(--space-3);
+    margin: var(--space-3);
+
+    box-sizing: border-box;
+
+    container-type: inline-size;
+}
+
+.gauge-track {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 13.125rem;
+}
+
+.slider {
+    position: relative;
+
+    width: 34.3%;
+    height: 100%;
+
+    cursor: pointer;
+    touch-action: none;
+}
+
+.track {
+    position: absolute;
+
+    left: 50%;
+    top: 0;
+
+    transform: translateX(-50%);
+
+    width: 2.86cqw;
+    height: 100%;
+
+    background: var(--border-hairline);
+    border-radius: var(--radius-sm);
+}
+
+.thumb {
+    position: absolute;
+
+    left: 50%;
+
+    width: 75%;
+    aspect-ratio: 1;
+
+    transform: translate(-50%, 50%);
+
+    border-radius: 50%;
+
+    background: var(--bg-panel);
+
+    border: var(--border-width-active) solid var(--accent-brand);
+
+    box-sizing: border-box;
+
+    box-shadow: var(--shadow-sm);
+
+    transition:
+        transform var(--transition-fast) var(--ease-standard),
+        box-shadow var(--transition-fast) var(--ease-standard);
+}
+
+.ticks {
+    position: absolute;
+
+    top: 0;
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    pointer-events: none;
+}
+
+.ticks span {
+    width: 14.3cqw;
+    height: 2.86cqw;
+
+    background: var(--border-hairline);
+
+    border-radius: var(--radius-sm);
+}
+
+.left {
+    left: 11.4%;
+}
+
+.right {
+    right: 11.4%;
+}
+
+.value {
+    margin-top: var(--space-2);
+
+    width: 100%;
+
+    box-sizing: border-box;
+
+    padding: var(--space-2);
+
+    border-radius: var(--radius-md);
+
+    color: var(--accent-brand);
+
+    font-size: var(--value-font-size, 16px);
+
+    font-family: var(--font-ui);
+
+    box-shadow: var(--shadow-sm);
+
+    display: flex;
+
+    justify-content: center;
+    align-items: center;
+
+    gap: 0.25em;
+
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+
+.value input,
+.value-unit {
+    font-size: inherit;
+    line-height: 1;
+
+    font-family: inherit;
+    color: inherit;
+}
+
+
+.value input {
+    height: 1.4em;
+
+    box-sizing: border-box;
+
+    text-align: center;
+
+    flex: 0 1 auto;
+
+    background: transparent;
+
+    border: 1px solid var(--border-hairline);
+
+    border-radius: var(--radius-sm);
+
+    appearance: none;
+}
--- a/src/components/dsp408/Slider.tsx/VerticalSlider.tsx
+++ b/src/components/dsp408/Slider.tsx/VerticalSlider.tsx
@ -0,0 +1,264 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import './VerticalSlider.css';
+
+type VerticalSliderProps = {
+  min: number;
+  max: number;
+  step: number;
+
+  switchStepValue?: number;
+  switchStep?: number;
+
+  value?: number;
+  onChange?: (value: number) => void;
+
+  unit?: string;
+
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+function getDecimals(n: number) {
+  const s = n.toString();
+  const i = s.indexOf('.');
+  return i === -1 ? 0 : s.length - i - 1;
+}
+
+// Measures whatever box the consumer actually rendered — no more
+// assuming the gauge is always 70px wide.
+function useElementSize<T extends HTMLElement>() {
+  const ref = useRef<T>(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new ResizeObserver((entries) => {
+      const { width, height } = entries[0].contentRect;
+      setSize({ width, height });
+    });
+
+    observer.observe(el);
+
+    const rect = el.getBoundingClientRect();
+    setSize({ width: rect.width, height: rect.height });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return [ref, size] as const;
+}
+
+export default function VerticalSlider({
+  min,
+  max,
+  step,
+  switchStepValue,
+  switchStep,
+  value: controlledValue,
+  onChange,
+  unit = '',
+  className,
+  style,
+}: VerticalSliderProps) {
+  const [internalValue, setInternalValue] = useState(min);
+  const value = controlledValue ?? internalValue;
+
+  const [editingText, setEditingText] = useState<string | null>(null);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [containerRef, containerSize] = useElementSize<HTMLDivElement>();
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const isDragging = useRef(false);
+  const lastValue = useRef(value);
+  const keyboardValue = useRef<number | null>(null);
+
+  const currentStep =
+    switchStepValue !== undefined && switchStep !== undefined && value >= switchStepValue
+      ? switchStep
+      : step;
+
+  const decimals = useMemo(
+    () => Math.max(getDecimals(step), switchStep !== undefined ? getDecimals(switchStep) : 0),
+    [step, switchStep]
+  );
+
+  const charWidth = useMemo(
+    () => Math.max(min.toFixed(decimals).length, max.toFixed(decimals).length) + 1,
+    [min, max, decimals]
+  );
+
+  // Same formula as before, just driven by a real measurement
+  // instead of a hardcoded container width.
+  const fontSize = useMemo(() => {
+    if (!containerSize.width) return 18;
+
+    const chars = charWidth + unit.length + 1;
+
+    const available = containerSize.width * 0.9;
+
+    return Math.max(12, Math.min(22, available / chars));
+  }, [containerSize.width, charWidth, unit.length]);
+
+  function normalizeValue(input: number) {
+    const clamped = Math.min(max, Math.max(min, input));
+    const snapped = Math.round(clamped / currentStep) * currentStep;
+    return Number(snapped.toFixed(6));
+  }
+
+  function updateValue(v: number) {
+    const next = normalizeValue(v);
+
+    if (controlledValue === undefined) {
+      setInternalValue(next);
+    }
+
+    lastValue.current = next;
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (
+      e.key !== 'ArrowUp' &&
+      e.key !== 'ArrowDown' &&
+      e.key !== 'ArrowLeft' &&
+      e.key !== 'ArrowRight'
+    ) {
+      return;
+    }
+
+    e.preventDefault();
+
+    let next = value;
+
+    if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
+      next += currentStep;
+    }
+
+    if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
+      next -= currentStep;
+    }
+
+    updateValue(next);
+
+    keyboardValue.current = normalizeValue(next);
+  }
+
+  function handleKeyUp(_e: React.KeyboardEvent<HTMLDivElement>) {
+    if (keyboardValue.current !== null) {
+      onChange?.(keyboardValue.current);
+      keyboardValue.current = null;
+    }
+  }
+
+  function valueFromPointer(clientY: number) {
+    if (!sliderRef.current) return;
+
+    const rect = sliderRef.current.getBoundingClientRect();
+    const trackHeight = rect.height; // measured, not a constant
+
+    let offset = clientY - rect.top;
+    offset = Math.max(0, Math.min(trackHeight, offset));
+
+    const percent = 1 - offset / trackHeight;
+    const raw = min + percent * (max - min);
+
+    updateValue(raw);
+  }
+
+  function startDrag(e: React.PointerEvent<HTMLDivElement>) {
+    isDragging.current = true;
+
+    valueFromPointer(e.clientY);
+
+    const move = (ev: PointerEvent) => {
+      valueFromPointer(ev.clientY);
+    };
+
+    const up = () => {
+      isDragging.current = false;
+
+      onChange?.(lastValue.current);
+
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+    };
+
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  }
+
+  function commitEditing() {
+    if (editingText !== null && editingText !== '' && editingText !== '-') {
+      const parsed = Number(editingText);
+      if (!Number.isNaN(parsed)) updateValue(parsed);
+    }
+    setEditingText(null);
+  }
+
+  const percent = (value - min) / (max - min);
+
+  return (
+    <div
+      className={['gauge-container', className].filter(Boolean).join(' ')}
+      style={style}
+      ref={containerRef}
+    >
+      <div className="gauge-track">
+        <div className="ticks left">
+          {Array.from({ length: 15 }).map((_, i) => (
+            <span key={i} />
+          ))}
+        </div>
+
+        <div
+          className="slider"
+          ref={sliderRef}
+          tabIndex={0}
+          onKeyDown={handleKeyDown}
+          onKeyUp={handleKeyUp}
+          onPointerDown={startDrag}
+        >
+          <div className="track" />
+          <div className="thumb" style={{ bottom: `${percent * 100}%` }} />
+        </div>
+
+        <div className="ticks right">
+          {Array.from({ length: 15 }).map((_, i) => (
+            <span key={i} />
+          ))}
+        </div>
+      </div>
+
+      <div
+        className="value"
+        style={{ '--value-font-size': `${fontSize}px` } as React.CSSProperties}
+      >
+        <input
+          ref={inputRef}
+          type="text"
+          inputMode="decimal"
+          value={editingText ?? value.toFixed(decimals)}
+          style={{
+            width: `${charWidth}ch`,
+          }}
+          onFocus={() => setEditingText(value.toFixed(decimals))}
+          onChange={(e) => setEditingText(e.target.value)}
+          onBlur={commitEditing}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              inputRef.current?.blur();
+            }
+
+            if (e.key === 'Escape') {
+              setEditingText(null);
+              inputRef.current?.blur();
+            }
+          }}
+        />
+        <span className="value-unit">{unit}</span>
+      </div>
+    </div>
+  );
+}
--- a/src/components/dsp408/VerticalStack/VerticalStack.css
+++ b/src/components/dsp408/VerticalStack/VerticalStack.css
@ -0,0 +1,91 @@
+.vertical-stack {
+
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+
+    border: 1px solid var(--border-hairline);
+
+    border-radius: var(--radius-md);
+
+    box-sizing: border-box;
+
+    overflow: hidden;
+}
+
+
+/* header */
+
+.vertical-stack__title {
+
+    flex: 0 0 auto;
+
+    padding: var(--space-2);
+
+    text-align: center;
+
+    font-family: var(--font-ui);
+
+    font-weight: 600;
+
+    color: var(--text-primary);
+
+    border-bottom: 1px solid var(--border-hairline);
+
+    line-height: 1.2;
+}
+
+
+
+/* area containing components */
+
+.vertical-stack__content {
+
+    flex: 1;
+
+    min-height: 0;
+
+    display: flex;
+
+    flex-direction: column;
+
+}
+
+
+
+/* each component slot */
+
+.vertical-stack__item {
+
+    flex: 1;
+
+    min-height: 0;
+
+    display: flex;
+
+    justify-content: center;
+
+    align-items: center;
+
+    overflow: hidden;
+}
+
+
+
+/*
+  The child keeps its natural dimensions.
+  Only horizontal scaling happens.
+*/
+
+.vertical-stack__scale {
+
+    display: flex;
+
+    justify-content: center;
+
+    align-items: center;
+
+    transform-origin: center;
+}
--- a/src/components/dsp408/VerticalStack/VerticalStack.tsx
+++ b/src/components/dsp408/VerticalStack/VerticalStack.tsx
@ -0,0 +1,85 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+
+import './VerticalStack.css';
+
+type VerticalStackProps = {
+  title: string;
+  titleFontSize?: number;
+  children: React.ReactNode;
+};
+
+export default function VerticalStack({ title, titleFontSize = 16, children }: VerticalStackProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const itemRefs = useRef<HTMLDivElement[]>([]);
+
+  const [scales, setScales] = useState<number[]>([]);
+
+  useLayoutEffect(() => {
+    function updateScale() {
+      if (!containerRef.current) {
+        return;
+      }
+
+      const availableWidth = containerRef.current.clientWidth;
+
+      const newScales = itemRefs.current.map((item) => {
+        const child = item.firstElementChild as HTMLElement;
+
+        if (!child) {
+          return 1;
+        }
+
+        const width = child.scrollWidth;
+
+        return Math.min(1, availableWidth / width);
+      });
+
+      setScales(newScales);
+    }
+
+    updateScale();
+
+    const observer = new ResizeObserver(updateScale);
+
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [children]);
+
+  return (
+    <div className="vertical-stack" ref={containerRef}>
+      <div
+        className="vertical-stack__title"
+        style={{
+          fontSize: titleFontSize,
+        }}
+      >
+        {title}
+      </div>
+
+      <div className="vertical-stack__content">
+        {React.Children.map(children, (child, index) => (
+          <div
+            className="vertical-stack__item"
+            ref={(el) => {
+              if (el) {
+                itemRefs.current[index] = el;
+              }
+            }}
+          >
+            <div
+              className="vertical-stack__scale"
+              style={{
+                transform: `scaleX(${scales[index] ?? 1})`,
+              }}
+            >
+              {child}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/src/components/topbar/Tab.tsx
+++ b/src/components/topbar/Tab.tsx
@ -1,4 +1,4 @@
-import { DSP } from "../types";
+import { DSP } from '../../types/types';

 function Tab({
  dsp,
@ -15,28 +15,26 @@ function Tab({
 }) {
  return (
    <button
-      className={
-        "tab" +
-        (active ? " tab--active" : "") +
-        (dimmed ? " tab--dimmed" : "")
-      }
+      className={'tab' + (active ? ' tab--active' : '') + (dimmed ? ' tab--dimmed' : '')}
      onClick={onSelect}
    >
-      <span className={"led led--" + dsp.status} />
-      <span className="tab-name">{dsp.name || "Untitled"}</span>
+      <span className={'led led--' + dsp.status} />
+      <span className="tab-name" title={dsp.name}>
+        {dsp.name}
+      </span>
      <span
        className="tab-close"
        role="button"
        aria-label={`Remove ${dsp.name}`}
-        onClick={e => {
+        onClick={(e) => {
          e.stopPropagation();
          onRemove();
        }}
      >
-        ×
+        x
      </span>
    </button>
  );
 }

-export default Tab;
+export default Tab;
--- a/src/components/topbar/Topbar.tsx
+++ b/src/components/topbar/Topbar.tsx
@ -0,0 +1,95 @@
+import { useEffect, useRef } from 'react';
+import { DSP, AppPage } from '../../types/types';
+import Tab from './Tab';
+import AnimatedLogo from '../../assets/icons/AnimatedLogo';
+import { PlusIcon } from '../../assets/icons/PlusIcon';
+import { CrownIcon } from '../../assets/icons/CrownIcon';
+
+function TopBar({
+  dsps,
+  selected,
+  page,
+  setPage,
+  setSelect,
+  onSelect,
+  onRemove,
+  onAddClick,
+}: {
+  dsps: DSP[];
+  selected: number | null;
+  page: AppPage;
+  setPage: (page: AppPage) => void;
+  setSelect: (select: number | null) => void;
+  onSelect: (id: number) => void;
+  onRemove: (dsp: DSP) => void;
+  onAddClick: () => void;
+}) {
+  const hasTabs = dsps.length > 0;
+  const tabstripRef = useRef<HTMLDivElement>(null);
+  const prevCount = useRef(dsps.length);
+
+  useEffect(() => {
+    if (dsps.length > prevCount.current && tabstripRef.current) {
+      tabstripRef.current.scrollTo({
+        left: tabstripRef.current.scrollWidth,
+        behavior: 'smooth',
+      });
+    }
+    prevCount.current = dsps.length;
+  }, [dsps.length]);
+
+  return (
+    <header className="topbar">
+      <div
+        className="logo-slot"
+        onClick={() => {
+          setSelect(null);
+          setPage('home');
+        }}
+        aria-label="Go to home"
+      >
+        <AnimatedLogo />
+      </div>
+
+      <div className="tabstrip" ref={tabstripRef}>
+        {dsps.map((dsp) => (
+          <Tab
+            key={dsp.id}
+            dsp={dsp}
+            active={selected === dsp.id && !(page == 'add-dsp')}
+            dimmed={page === 'add-dsp'}
+            onSelect={() => onSelect(dsp.id)}
+            onRemove={() => onRemove(dsp)}
+          />
+        ))}
+      </div>
+
+      <div className="tabstrip-actions">
+        {hasTabs ? (
+          <button className="tab-add" aria-label="Add DSP" onClick={onAddClick}>
+            <PlusIcon width={14} height={14} />
+          </button>
+        ) : (
+          <button className="tab-add-empty" onClick={onAddClick}>
+            <PlusIcon width={14} height={14} />
+            <span>Add DSP</span>
+          </button>
+        )}
+      </div>
+
+      <button
+        className="crown-action"
+        title="Credits & Support"
+        aria-label="Credits & Support"
+        onClick={() => {
+          setPage('credits');
+          setSelect(null);
+        }}
+      >
+        <CrownIcon width={18} height={18} />
+      </button>
+    </header>
+  );
+}
+
+export default TopBar;
--- a/src/hooks/useNotifications.tsx
+++ b/src/hooks/useNotifications.tsx
@ -0,0 +1,42 @@
+import { useState, useCallback } from 'react';
+import { NotificationType, Notification } from '../types/types';
+
+export function useNotifications() {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+
+  const notify = useCallback(
+    (message: string, type: NotificationType = 'error', dspName?: string) => {
+      const id = Date.now();
+
+      const fullMessage = dspName ? `${dspName}: ${message}` : message;
+
+      setNotifications((prev) => [
+        ...prev,
+        {
+          id,
+          message: fullMessage,
+          type,
+        },
+      ]);
+
+      setTimeout(() => {
+        setNotifications((prev) => prev.filter((n) => n.id !== id));
+      }, 5000);
+    },
+    []
+  );
+
+  const removeNotification = useCallback((id: number) => {
+    setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, removing: true } : n)));
+
+    setTimeout(() => {
+      setNotifications((prev) => prev.filter((n) => n.id !== id));
+    }, 250);
+  }, []);
+
+  return {
+    notifications,
+    notify,
+    removeNotification,
+  };
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -1,9 +1,9 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './components/app/App';

-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
-  </React.StrictMode>,
+  </React.StrictMode>
 );
--- a/src/styles/App.css
+++ b/src/styles/App.css
@ -0,0 +1,725 @@
+@import "./variables.css";
+
+* {
+  box-sizing: border-box;
+  user-select: none;
+}
+
+input,
+select,
+textarea,
+[contenteditable="true"] {
+  user-select: text;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--bg-void);
+  color: var(--text-primary);
+  font-family: var(--font-ui);
+}
+
+.mono {
+  font-family: var(--font-mono);
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+}
+
+button:focus-visible,
+*:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 1px var(--accent-brand);
+}
+
+/* ---------- Top bar ---------- */
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+  padding: 0 var(--space-4);
+  height: 48px;
+  background: var(--bg-void);
+  border-bottom: 1px solid var(--border-hairline);
+  -webkit-app-region: drag;
+}
+
+.logo-slot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  width: auto;
+  flex-shrink: 0;
+  overflow: hidden;
+  -webkit-app-region: no-drag;
+}
+
+.logo-slot > * {
+  width: 100%;
+  height: 100%;
+}
+
+.tabstrip {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 48px;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-app-region: no-drag;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-hairline) transparent;
+  scroll-behavior: smooth;
+  scroll-padding-inline: var(--space-3);
+}
+
+.crown-action {
+  color: #facc15;
+  background: transparent;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.tabstrip::-webkit-scrollbar {
+  height: 5px;
+}
+
+.tabstrip::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.tabstrip::-webkit-scrollbar-thumb {
+  background: var(--border-hairline);
+  border-radius: var(--radius-pill);
+}
+
+.tabstrip::-webkit-scrollbar-thumb:hover {
+  background: var(--accent-brand);
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: 34px;
+  padding: 0 var(--space-3);
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-muted);
+  font-family: var(--font-ui);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background var(--dur-base) var(--ease-standard),
+    border-color var(--dur-base) var(--ease-standard),
+    color var(--dur-base) var(--ease-standard);
+  width: 160px;
+  flex: 0 0 auto;
+}
+
+.tab:hover {
+  background: var(--bg-raised);
+  border-color: var(--text-muted);
+  color: var(--text-primary);
+}
+
+.tab--active {
+  background: var(--bg-panel);
+  border-color: var(--accent-brand);
+  color: var(--text-primary);
+}
+
+.tab--active:hover {
+  background: var(--bg-panel);
+  border-color: var(--accent-brand);
+}
+
+.tab--dimmed {
+  opacity: 0.55;
+}
+
+.tab-name {
+  overflow: hidden;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1 1 auto;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  mask-image: linear-gradient(to right, black calc(100% - 18px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to right, black calc(100% - 18px), transparent 100%);
+}
+
+.tab-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  margin-left: auto;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--text-muted);
+  border-radius: 4px;
+  transition: background var(--dur-fast) var(--ease-standard),
+    color var(--dur-fast) var(--ease-standard);
+}
+
+.tab-close:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary);
+}
+
+/* Quiet icon button — used once at least one tab exists */
+.tab-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  margin-left: 6px;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background var(--dur-base) var(--ease-standard),
+    color var(--dur-base) var(--ease-standard);
+}
+
+/* Lives outside .tabstrip so it never scrolls out of view */
+.tabstrip-actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  -webkit-app-region: no-drag;
+}
+
+.tab-add:hover {
+  background: var(--bg-raised);
+  color: var(--text-primary);
+}
+
+.tab-add:active {
+  background: var(--border-hairline);
+}
+
+/* Clearer CTA — used when the bar has nothing else to anchor to */
+.tab-add-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  gap: 6px;
+  height: 30px;
+  padding: 0 var(--space-3) 0 10px;
+  border: 1px dashed var(--border-hairline);
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--text-muted);
+  font-family: var(--font-ui);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background var(--dur-base) var(--ease-standard),
+    border-color var(--dur-base) var(--ease-standard),
+    color var(--dur-base) var(--ease-standard);
+}
+
+.tab-add-empty svg,
+.tab-add svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+.tab-add-empty:hover {
+  background: var(--bg-raised);
+  border-color: var(--accent-brand);
+  border-style: solid;
+  color: var(--text-primary);
+}
+
+/* ---------- LED status dot ---------- */
+
+.led {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--accent-down);
+  transition: background var(--dur-base) var(--ease-standard);
+}
+
+.led--connected {
+  background: var(--accent-live);
+  box-shadow: 0 0 6px 1px var(--accent-live);
+}
+
+.led--connecting {
+  background: var(--accent-connecting);
+  box-shadow: 0 0 6px 1px var(--accent-connecting);
+  animation: pulse 1s var(--ease-standard) infinite;
+}
+
+.led--disconnected {
+  background: var(--accent-down);
+  box-shadow: 0 0 4px 0px var(--accent-down);
+}
+
+.led--lg {
+  width: 12px;
+  height: 12px;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* ---------- Stage / main area ---------- */
+
+.stage {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px var(--space-6);
+  background: var(--bg-panel);
+  overflow-y: auto;
+}
+
+.card {
+  width: 100%;
+  max-width: 480px;
+  background: var(--bg-raised);
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-lg);
+  padding: 28px;
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.empty-mark {
+  font-size: 28px;
+  color: var(--border-hairline);
+}
+
+.empty p {
+  margin: 0;
+  font-size: 14px;
+}
+
+/* ---------- DSP panel ---------- */
+
+.panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  margin-bottom: var(--space-6);
+}
+
+.panel-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.panel-type {
+  margin-top: var(--space-1);
+  font-size: 12px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  letter-spacing: 0.03em;
+}
+
+.status-block {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+
+.status-label {
+  font-size: 12px;
+  font-weight: 500;
+  transition: color var(--dur-base) var(--ease-standard);
+}
+
+.status-label--connected { color: var(--accent-live); }
+.status-label--connecting { color: var(--accent-connecting); }
+.status-label--disconnected { color: var(--text-muted); }
+
+.specs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  margin: 0 0 var(--space-6);
+  padding: var(--space-4);
+  background: var(--bg-panel);
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-md);
+}
+
+.spec {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+}
+
+.spec dt {
+  color: var(--text-muted);
+}
+
+.spec dd {
+  margin: 0;
+  color: var(--text-primary);
+}
+
+.panel-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* ---------- Form ---------- */
+
+.form-header {
+  margin-bottom: var(--space-5);
+}
+
+.form-hint {
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: var(--space-4);
+  flex: 1;
+}
+
+.field--grow {
+  flex: 2;
+}
+
+.field--narrow {
+  flex: 1;
+}
+
+.field-row {
+  display: flex;
+  gap: var(--space-3);
+}
+
+.field label {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.field input,
+.field select {
+  height: 36px;
+  padding: 0 10px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-family: var(--font-ui);
+  font-size: 13px;
+  outline: none;
+  transition: border-color var(--dur-base) var(--ease-standard);
+}
+
+.field input.mono {
+  font-family: var(--font-mono);
+}
+
+.field input:focus,
+.field select:focus {
+  border-color: var(--accent-brand);
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: var(--space-2);
+}
+
+/* ---------- Buttons ---------- */
+
+.btn {
+  height: 36px;
+  padding: 0 var(--space-4);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-ui);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background var(--dur-base) var(--ease-standard),
+    border-color var(--dur-base) var(--ease-standard),
+    opacity var(--dur-base) var(--ease-standard);
+}
+
+.btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--accent-brand);
+  color: #0d0f12;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #6f9bf2;
+}
+
+.btn-outline {
+  background: transparent;
+  border-color: var(--accent-down);
+  color: var(--accent-down);
+}
+
+.btn-outline:hover {
+  background: rgba(255, 92, 92, 0.1);
+}
+
+.btn-ghost {
+  background: transparent;
+  border-color: var(--border-hairline);
+  color: var(--text-muted);
+}
+
+.btn-ghost:hover {
+  color: var(--text-primary);
+  border-color: var(--text-muted);
+}
+
+/* ---------- Notifications ---------- */
+
+.notifications {
+  position: fixed;
+  right: var(--space-5);
+  bottom: var(--space-5);
+  z-index: 9999;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+
+  width: 320px;
+  pointer-events: none;
+}
+
+.notification {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+
+  padding: 10px var(--space-3);
+  border-radius: var(--radius-md);
+
+  font-size: 14px;
+
+  box-shadow: var(--shadow-md);
+
+  animation: notification-in var(--dur-slow) var(--ease-out) forwards;
+
+  pointer-events: auto;
+}
+
+.notification-out {
+  animation: notification-out var(--dur-slow) var(--ease-in) forwards;
+}
+
+.notification-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  font-size: 15px;
+  line-height: 1;
+  color: inherit;
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease-standard);
+}
+
+.notification-close:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.notification.error {
+  background: #b42318;
+  color: white;
+}
+
+.notification.success {
+  background: #15803d;
+  color: white;
+}
+
+.notification.warning {
+  background: #ca8a04;
+  color: white;
+}
+
+.notification-message {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@keyframes notification-in {
+  from {
+    transform: translateX(50px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes notification-out {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateX(50px);
+    opacity: 0;
+  }
+}
+
+/* ---------- DSP detail: side rail + content ---------- */
+
+.dsp-detail {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-5);
+  width: 100%;
+  max-width: 720px;
+}
+
+.dsp-subnav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 0 0 168px;
+  padding: var(--space-2);
+  background: var(--bg-panel);
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-md);
+}
+
+.dsp-subnav-item {
+  display: flex;
+  align-items: center;
+  height: 34px;
+  padding: 0 var(--space-3);
+  border: none;
+  border-left: 2px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-muted);
+  font-family: var(--font-ui);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--dur-base) var(--ease-standard),
+    color var(--dur-base) var(--ease-standard),
+    border-color var(--dur-base) var(--ease-standard);
+}
+
+.dsp-subnav-item:hover {
+  background: var(--bg-raised);
+  color: var(--text-primary);
+}
+
+.dsp-subnav-item--active {
+  background: var(--bg-raised);
+  border-left-color: var(--accent-brand);
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.dsp-subnav-content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Let the panel card fill the available width next to the rail,
+   instead of capping out at 480px like it does standalone in .stage */
+.dsp-subnav-content .card {
+  max-width: none;
+  width: 100%;
+}
+
+/* ---------- Add to your :root ---------- */
+:root {
+  --header-height: 48px; /* matches .topbar's existing height */
+  --sidebar-width: 48px; /* matches the old icon rail's w-12 */
+}
+
+/* ---------- Layout wrapper below the topbar ---------- */
+/* .app is already: display:flex; flex-direction:column; height:100vh;
+   this row just needs to fill the remaining space */
+.main-layout {
+  flex: 1;
+  display: flex;
+  min-height: 0; /* lets .stage's own overflow-y:auto do the scrolling */
+}
+
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@ -0,0 +1,64 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
+
+:root {
+  --header-height: 48px; /* matches .topbar's existing height */
+  --sidebar-width-collapsed: 56px;
+  --sidebar-width-expanded: 180px;
+
+  /* ---------- Color ---------- */
+  --bg-void: #0d0f12;
+  --bg-panel: #16191d;
+  --bg-raised: #1e2227;
+  --border-hairline: #2a2f36;
+  --text-primary: #e8eaed;
+  --text-muted: #8b92a0;
+  --accent-brand: #5b8def;
+  --accent-live: #3ecf8e;
+  --accent-down: #ff5c5c;
+  --accent-connecting: #f5a623;
+
+  /* ---------- Type ---------- */
+  --font-ui: "Inter", -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
+
+  /* ---------- Motion ---------- */
+  --dur-fast: 100ms;
+  --dur-base: 180ms;
+  --dur-slow: 300ms;
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+
+  /* ---------- Spacing scale ---------- */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+
+  /* ---------- Radius ---------- */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-pill: 999px;
+
+  /* ---------- Shadow ---------- */
+  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.2);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
+
+  /* ---------- Border ---------- */
+  --border-width: 1px;
+  --border-width-active: 2px;
+
+  /* ---------- Animation ---------- */
+  --transition-fast: 120ms;
+  --transition-base: 180ms;
+
+  /* ---------- Component sizes ---------- */
+  --sidebar-item-size: 32px;
+  --sidebar-item-gap: 10px;
+  --sidebar-item-padding: 8px;
+
+  --sidebar-toggle-size: 24px;
+}
--- a/src/types.ts
+++ b/src/types.ts
@ -1,22 +0,0 @@
-export type DSPStatus = "connected" | "connecting" | "disconnected";
-
-export type DSP = {
-  id: string;
-  name: string;
-  type: string;
-  ip: string;
-  port: number;
-  deviceId: string;
-  status: DSPStatus;
-};
-
-export const DSP_TYPES = [
-  {
-    name: "DSP408",
-    defaultPort: 9761,
-  },
-  {
-    name: "DSP204",
-    defaultPort: 94,
-  },
-];
--- a/src/types/dsp408State.ts
+++ b/src/types/dsp408State.ts
@ -0,0 +1,193 @@
+export enum DelayUnit {
+  Millisecond = 'Millisecond',
+  Meter = 'Meter',
+  Feet = 'Feet',
+}
+
+export enum InputChannel {
+  InA = 'InA',
+  InB = 'InB',
+  InC = 'InC',
+  InD = 'InD',
+}
+
+export enum OutputChannel {
+  Out1 = 'Out1',
+  Out2 = 'Out2',
+  Out3 = 'Out3',
+  Out4 = 'Out4',
+  Out5 = 'Out5',
+  Out6 = 'Out6',
+  Out7 = 'Out7',
+  Out8 = 'Out8',
+}
+
+export type Channel = { Input: InputChannel } | { Output: OutputChannel };
+
+export enum Ratio {
+  Ratio1_1 = 'Ratio1_1',
+  Ratio1_1_1 = 'Ratio1_1_1',
+  Ratio1_1_3 = 'Ratio1_1_3',
+  Ratio1_1_5 = 'Ratio1_1_5',
+  Ratio1_1_7 = 'Ratio1_1_7',
+  Ratio1_2 = 'Ratio1_2',
+  Ratio1_2_5 = 'Ratio1_2_5',
+  Ratio1_3 = 'Ratio1_3',
+  Ratio1_3_5 = 'Ratio1_3_5',
+  Ratio1_4 = 'Ratio1_4',
+  Ratio1_5 = 'Ratio1_5',
+  Ratio1_6 = 'Ratio1_6',
+  Ratio1_8 = 'Ratio1_8',
+  Ratio1_10 = 'Ratio1_10',
+  Ratio1_20 = 'Ratio1_20',
+  Limit = 'Limit',
+}
+
+export enum CrossoverFilter {
+  Bypass = 'Bypass',
+  Bw6 = 'Bw6',
+  Bw12 = 'Bw12',
+  Bw18 = 'Bw18',
+  Bw24 = 'Bw24',
+  Bw30 = 'Bw30',
+  Bw36 = 'Bw36',
+  Bw42 = 'Bw42',
+  Bw48 = 'Bw48',
+  Lk12 = 'Lk12',
+  Lk24 = 'Lk24',
+  Lk36 = 'Lk36',
+  Lk48 = 'Lk48',
+}
+
+export enum PEQFilter {
+  Peak = 'Peak',
+  LowShelf = 'LowShelf',
+  HighShelf = 'HighShelf',
+  Lp6Db = 'Lp6Db',
+  Lp12Db = 'Lp12Db',
+  Hp6Db = 'Hp6Db',
+  Hp12Db = 'Hp12Db',
+  AllPass1 = 'AllPass1',
+  AllPass2 = 'AllPass2',
+}
+
+// ---------------- STATE ----------------
+
+export type Gate = {
+  attack: number;
+  release: number;
+  hold: number;
+  threshold: number;
+};
+
+export type Compressor = {
+  threshold: number;
+  ratio: Ratio;
+  attack: number;
+  release: number;
+  knee: number;
+};
+
+export type Limiter = {
+  threshold: number;
+  attack: number;
+  release: number;
+};
+
+export type GraphicEQ = {
+  gains: number[];
+  bypass: boolean;
+};
+
+export type PEQ = {
+  gain: number;
+  frequency: number;
+  q: number;
+  filter_type: PEQFilter;
+  bypass: boolean;
+};
+
+export type Crossover = {
+  frequency: number;
+  slope: CrossoverFilter;
+};
+
+export type CrossoverFilters = {
+  high_pass: Crossover;
+  low_pass: Crossover;
+};
+
+export type MatrixRoutes = {
+  connected: InputChannel[];
+  gains: number[];
+};
+
+export type PEQChain = {
+  bands: PEQ[];
+  bypass: boolean;
+};
+
+export type PresetBank = {
+  current_index: number;
+  names: string[];
+  modified: boolean[];
+};
+
+export type DeviceFlags = {
+  is_locked: boolean;
+};
+
+export type InputSource = {
+  type: string;
+  frequency: string;
+};
+
+export type InputChannelState = {
+  name: string;
+  gain: number;
+  phase_inverted: boolean;
+  delay: number;
+
+  gate: Gate;
+  geq: GraphicEQ;
+  peq_chain: PEQChain;
+  crossover: CrossoverFilters;
+
+  linked_channels: Channel[];
+
+  mute: boolean;
+};
+
+export type OutputChannelState = {
+  name: string;
+
+  matrix_routes: MatrixRoutes;
+  crossover: CrossoverFilters;
+  peq_chain: PEQChain;
+
+  compressor: Compressor;
+  limiter: Limiter;
+
+  gain: number;
+  phase_inverted: boolean;
+  delay: number;
+
+  linked_channels: Channel[];
+
+  mute: boolean;
+};
+
+export type DSPConfigState = {
+  input_states: Record<InputChannel, InputChannelState>;
+  output_states: Record<OutputChannel, OutputChannelState>;
+
+  input_source: InputSource;
+  delay_unit: DelayUnit;
+};
+
+export type DSPState = {
+  name: string;
+  flags: DeviceFlags;
+  presets: PresetBank;
+  current_config: DSPConfigState;
+};
--- a/src/types/types.ts
+++ b/src/types/types.ts
@ -0,0 +1,33 @@
+export type DSPStatus = 'connected' | 'connecting' | 'disconnected';
+
+export type DSP = {
+  id: number;
+  name: string;
+  type: string;
+  ip: string;
+  port: number;
+  deviceId: string;
+  status: DSPStatus;
+};
+
+export const DSP_TYPES = [
+  {
+    name: 'DSP408',
+    defaultPort: 9761,
+  },
+  {
+    name: 'DSP204',
+    defaultPort: 94,
+  },
+];
+
+export type NotificationType = 'success' | 'error' | 'warning';
+
+export type Notification = {
+  id: number;
+  message: string;
+  type: NotificationType;
+  removing?: boolean;
+};
+
+export type AppPage = 'home' | 'add-dsp' | 'view-dsp' | 'credits';