Initial commit

2026-07-21 16:30:52 +02:00
commit c2b67d8bb2
46 changed files with 8518 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,7 @@
+# Tauri + React + Typescript
+
+This template should help get you started developing with Tauri, React and Typescript in Vite.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tauri + React + Typescript</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,26 @@
+{
+  "name": "thomann-dsp-app",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@tauri-apps/api": "^2",
+    "@tauri-apps/plugin-opener": "^2"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "typescript": "~5.8.3",
+    "vite": "^7.0.4",
+    "@tauri-apps/cli": "^2"
+  }
+}
--- a/src-tauri/.gitignore
+++ b/src-tauri/.gitignore
@ -0,0 +1,7 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# Generated by Tauri
+# will have schema files for capabilities auto-completion
+/gen/schemas
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@ -0,0 +1,25 @@
+[package]
+name = "thomann-dsp-app"
+version = "0.1.0"
+description = "A Tauri App"
+authors = ["you"]
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[lib]
+# The `_lib` suffix may seem redundant but it is necessary
+# to make the lib name unique and wouldn't conflict with the bin name.
+# This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519
+name = "thomann_dsp_app_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = [] }
+tauri-plugin-opener = "2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+dsp_thomann = { path = "../../dsp_thomann" }
--- a/src-tauri/build.rs
+++ b/src-tauri/build.rs
@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@ -0,0 +1,10 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "Capability for the main window",
+  "windows": ["main"],
+  "permissions": [
+    "core:default",
+    "opener:default"
+  ]
+}
--- a/src-tauri/icons/128x128.png
+++ b/src-tauri/icons/128x128.png
--- a/src-tauri/icons/128x128@2x.png
+++ b/src-tauri/icons/128x128@2x.png
--- a/src-tauri/icons/32x32.png
+++ b/src-tauri/icons/32x32.png
--- a/src-tauri/icons/Square107x107Logo.png
+++ b/src-tauri/icons/Square107x107Logo.png
--- a/src-tauri/icons/Square142x142Logo.png
+++ b/src-tauri/icons/Square142x142Logo.png
--- a/src-tauri/icons/Square150x150Logo.png
+++ b/src-tauri/icons/Square150x150Logo.png
--- a/src-tauri/icons/Square284x284Logo.png
+++ b/src-tauri/icons/Square284x284Logo.png
--- a/src-tauri/icons/Square30x30Logo.png
+++ b/src-tauri/icons/Square30x30Logo.png
--- a/src-tauri/icons/Square310x310Logo.png
+++ b/src-tauri/icons/Square310x310Logo.png
--- a/src-tauri/icons/Square44x44Logo.png
+++ b/src-tauri/icons/Square44x44Logo.png
--- a/src-tauri/icons/Square71x71Logo.png
+++ b/src-tauri/icons/Square71x71Logo.png
--- a/src-tauri/icons/Square89x89Logo.png
+++ b/src-tauri/icons/Square89x89Logo.png
--- a/src-tauri/icons/StoreLogo.png
+++ b/src-tauri/icons/StoreLogo.png
--- a/src-tauri/icons/icon.icns
+++ b/src-tauri/icons/icon.icns
--- a/src-tauri/icons/icon.ico
+++ b/src-tauri/icons/icon.ico
--- a/src-tauri/icons/icon.png
+++ b/src-tauri/icons/icon.png
--- a/src-tauri/src/commands.rs
+++ b/src-tauri/src/commands.rs
@ -0,0 +1,35 @@
+use tauri::State;
+use crate::state::AppState;
+use dsp_thomann::dsp408::DSP408;
+use std::{net::IpAddr, str::FromStr};
+
+#[tauri::command]
+pub fn device_count(
+    state: State<AppState>
+) -> usize {
+    let devices = state.devices.lock().unwrap();
+    devices.len()
+}
+
+#[tauri::command]
+pub fn create_dsp408(
+    state: State<AppState>,
+    ip: String,
+    port: u16,
+    device_id: u8,
+) -> Result<usize, String> {
+
+    let mut devices = state
+        .devices
+        .lock()
+        .map_err(|e| e.to_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())?;
+
+    devices.push(dsp);
+
+    Ok(devices.len())
+}
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@ -0,0 +1,25 @@
+mod state;
+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,
+            ]
+        )
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@ -0,0 +1,6 @@
+// Prevents additional console window on Windows in release, DO NOT REMOVE!!
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    thomann_dsp_app_lib::run()
+}
--- a/src-tauri/src/state.rs
+++ b/src-tauri/src/state.rs
@ -0,0 +1,14 @@
+use std::sync::Mutex;
+use dsp_thomann::dsp408::DSP408;
+
+pub struct AppState {
+    pub devices: Mutex<Vec<DSP408>>,
+}
+
+impl AppState {
+    pub fn new() -> Self {
+        Self {
+            devices: Mutex::new(Vec::new()),
+        }
+    }
+}
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@ -0,0 +1,35 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "thomann-dsp-app",
+  "version": "0.1.0",
+  "identifier": "com.lucas.thomann-dsp-app",
+  "build": {
+    "beforeDevCommand": "npm run dev",
+    "devUrl": "http://localhost:1420",
+    "beforeBuildCommand": "npm run build",
+    "frontendDist": "../dist"
+  },
+  "app": {
+    "windows": [
+      {
+        "title": "thomann-dsp-app",
+        "width": 800,
+        "height": 600
+      }
+    ],
+    "security": {
+      "csp": null
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ]
+  }
+}
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,479 @@
+@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
@ -0,0 +1,103 @@
+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/components/Adddspform.tsx
+++ b/src/components/Adddspform.tsx
@ -0,0 +1,122 @@
+import { useState } from "react";
+import { DSP, DSP_TYPES } from "../types";
+
+function AddDSPForm({
+  onCancel,
+  onAdd,
+}: {
+  onCancel: () => void;
+  onAdd: (d: Omit<DSP, "status">) => void;
+}) {
+  const [form, setForm] = useState({
+    name: "",
+    type: DSP_TYPES[0].name,
+    ip: "192.168.1.100",
+    port: DSP_TYPES[0].defaultPort,
+    deviceId: "",
+  });
+
+  const canSubmit = form.name.trim().length > 0 && form.ip.trim().length > 0 && form.deviceId;
+
+  function submit() {
+    if (!canSubmit) return;
+    onAdd({ id: crypto.randomUUID(), ...form });
+  }
+
+  return (
+    <div className="card form-card">
+      <div className="form-header">
+        <h1 className="panel-title">Add DSP</h1>
+        <p className="form-hint">Register a new device to control from this app.</p>
+      </div>
+
+      <div className="field">
+        <label htmlFor="f-name">Name</label>
+        <input
+          id="f-name"
+          placeholder="Main Room DSP"
+          value={form.name}
+          onChange={e => setForm({ ...form, name: e.target.value })}
+        />
+      </div>
+
+      <div className="field-row">
+        <div className="field">
+          <label htmlFor="f-type">Model</label>
+          <select
+            id="f-type"
+            value={form.type}
+            onChange={e => {
+                const selected = DSP_TYPES.find(
+                d => d.name === e.target.value
+                );
+
+                setForm({
+                ...form,
+                type: e.target.value,
+                port: selected?.defaultPort ?? form.port,
+                });
+            }}
+            >
+            {DSP_TYPES.map(dsp => (
+                <option key={dsp.name} value={dsp.name}>
+                {dsp.name}
+                </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 })
+                }
+            />
+        </div>
+      </div>
+
+      <div className="field-row">
+        <div className="field field--grow">
+          <label htmlFor="f-ip">IP address</label>
+          <input
+            id="f-ip"
+            className="mono"
+            value={form.ip}
+            onChange={e => setForm({ ...form, ip: e.target.value })}
+          />
+        </div>
+
+        <div className="field field--narrow">
+          <label htmlFor="f-port">Port</label>
+          <input
+            id="f-port"
+            className="mono"
+            type="number"
+            value={form.port}
+            onChange={e => setForm({ ...form, port: Number(e.target.value) })}
+          />
+        </div>
+      </div>
+
+      <div className="form-actions">
+        <button className="btn btn-ghost" onClick={onCancel}>
+          Cancel
+        </button>
+        <button className="btn btn-primary" onClick={submit} disabled={!canSubmit}>
+          Add DSP
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default AddDSPForm;
--- a/src/components/AnimatedLogo.tsx
+++ b/src/components/AnimatedLogo.tsx
@ -0,0 +1,209 @@
+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 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)
+
+  useEffect(() => {
+    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
+
+      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
+
+      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)
+    return () => {
+      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current)
+    }
+  }, [])
+
+  return (
+    <div
+      className={`animated-logo ${className}`}
+      style={{ width: size, height: size }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 200 200"
+        xmlns="http://www.w3.org/2000/svg"
+        style={{ display: 'block' }}
+      >
+        <style>
+          {`
+            .animated-logo {
+              transition: transform 0.3s ease;
+            }
+
+            .animated-logo:hover {
+              transform: scale(1.1);
+            }
+
+            .richGradient stop:nth-child(1) {
+              stop-color: #1e3a8a;
+              animation: pulse-primary 3s ease-in-out infinite;
+            }
+
+            .richGradient stop:nth-child(6) {
+              stop-color: #ea437a;
+              animation: pulse-secondary 3s ease-in-out infinite;
+            }
+
+            .darkening-overlay {
+              animation: breathe 6s ease-in-out infinite;
+            }
+
+            @keyframes pulse-primary {
+              0%, 100% { stop-opacity: 1; }
+              50% { stop-opacity: 0.8; }
+            }
+
+            @keyframes pulse-secondary {
+              0%, 100% { stop-opacity: 1; }
+              50% { stop-opacity: 0.9; }
+            }
+
+            @keyframes breathe {
+              0%, 100% { opacity: 0.6; }
+              50% { opacity: 0.3; }
+            }
+
+            @keyframes logo-entrance {
+              0% {
+                opacity: 0;
+                transform: scale(0.8) rotate(-10deg);
+              }
+              50% {
+                opacity: 0.7;
+                transform: scale(1.05) rotate(5deg);
+              }
+              100% {
+                opacity: 1;
+                transform: scale(1) rotate(0deg);
+              }
+            }
+          `}
+        </style>
+
+        <defs>
+          <linearGradient
+            id="richGradient"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+            className="richGradient"
+          >
+            <stop offset="0%" stopColor="#1e3a8a" />
+            <stop offset="25%" stopColor="#2d3485" />
+            <stop offset="45%" stopColor="#4c2e7f" />
+            <stop offset="60%" stopColor="#6b2878" />
+            <stop offset="80%" stopColor="#b9326e" />
+            <stop offset="100%" stopColor="#ea437a" />
+          </linearGradient>
+
+          <radialGradient id="darkenGradient" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" stopColor="rgba(255,255,255,0.3)" />
+            <stop offset="30%" stopColor="rgba(255,255,255,0.1)" />
+            <stop offset="60%" stopColor="rgba(0,0,0,0)" />
+            <stop offset="80%" stopColor="rgba(0,0,0,0.2)" />
+            <stop offset="100%" stopColor="rgba(0,0,0,0.5)" />
+          </radialGradient>
+
+          <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" />
+            <stop offset="60%" stopColor="#5f3458" />
+            <stop offset="80%" stopColor="#7a2250" />
+            <stop offset="100%" stopColor="#a50d57" />
+          </linearGradient>
+        </defs>
+
+        {/* Donut base -- rotation driven by JS so speed can change on hover
+            without resetting the current angle */}
+        <g ref={donutGroupRef}>
+          <path
+            d="M100,20
+               A80,80 0 1,1 99.9,20
+               M100,60
+               A40,40 0 1,0 100.1,60"
+            fill="url(#richGradient)"
+            fillRule="evenodd"
+          />
+        </g>
+
+        {/* Darkening overlay with breathing effect (opacity only, no rotation) */}
+        <path
+          className="darkening-overlay"
+          d="M100,20
+             A80,80 0 1,1 99.9,20
+             M100,60
+             A40,40 0 1,0 100.1,60"
+          fill="url(#darkenGradient)"
+          fillRule="evenodd"
+        />
+
+        {/* Inner shadow -- also JS-driven rotation, independent speed/direction */}
+        <g ref={innerGroupRef}>
+          <path
+            d="M100,60
+               A40,40 0 1,0 100.1,60
+               M100,75
+               A25,25 0 1,1 99.9,75"
+            fill="url(#shadowGradient)"
+            fillRule="evenodd"
+          />
+        </g>
+      </svg>
+    </div>
+  )
+}
+
+export default AnimatedLogo
--- a/src/components/DSPTabs.tsx
+++ b/src/components/DSPTabs.tsx
@ -0,0 +1,49 @@
+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/Dsppanel.tsx
+++ b/src/components/Dsppanel.tsx
@ -0,0 +1,69 @@
+import { DSP } from "../types";
+
+function DSPPanel({
+  dsp,
+  onConnect,
+  onDisconnect,
+}: {
+  dsp: DSP;
+  onConnect: () => void;
+  onDisconnect: () => void;
+}) {
+  const statusLabel =
+    dsp.status === "connected"
+      ? "Connected"
+      : dsp.status === "connecting"
+      ? "Connecting…"
+      : "Disconnected";
+
+  return (
+    <div className="card panel">
+      <div className="panel-header">
+        <div>
+          <h1 className="panel-title">{dsp.name}</h1>
+          <div className="panel-type">{dsp.type}</div>
+        </div>
+
+        <div className="status-block">
+          <span className={"led led--lg led--" + dsp.status} />
+          <span className={"status-label status-label--" + dsp.status}>
+            {statusLabel}
+          </span>
+        </div>
+      </div>
+
+      <dl className="specs">
+        <div className="spec">
+          <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>
+        </div>
+      </dl>
+
+      <div className="panel-actions">
+        {dsp.status === "connected" ? (
+          <button className="btn btn-outline" onClick={onDisconnect}>
+            Disconnect
+          </button>
+        ) : (
+          <button
+            className="btn btn-primary"
+            onClick={onConnect}
+            disabled={dsp.status === "connecting"}
+          >
+            {dsp.status === "connecting" ? "Connecting…" : "Connect"}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default DSPPanel;
--- a/src/components/Tab.tsx
+++ b/src/components/Tab.tsx
@ -0,0 +1,42 @@
+import { DSP } from "../types";
+
+function Tab({
+  dsp,
+  active,
+  dimmed,
+  onSelect,
+  onRemove,
+}: {
+  dsp: DSP;
+  active: boolean;
+  dimmed: boolean;
+  onSelect: () => void;
+  onRemove: () => void;
+}) {
+  return (
+    <button
+      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="tab-close"
+        role="button"
+        aria-label={`Remove ${dsp.name}`}
+        onClick={e => {
+          e.stopPropagation();
+          onRemove();
+        }}
+      >
+        ×
+      </span>
+    </button>
+  );
+}
+
+export default Tab;
--- a/src/components/Topbar.tsx
+++ b/src/components/Topbar.tsx
@ -0,0 +1,68 @@
+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/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
--- a/src/types.ts
+++ b/src/types.ts
@ -0,0 +1,22 @@
+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/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,32 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// @ts-expect-error process is a nodejs global
+const host = process.env.TAURI_DEV_HOST;
+
+// https://vite.dev/config/
+export default defineConfig(async () => ({
+  plugins: [react()],
+
+  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
+  //
+  // 1. prevent Vite from obscuring rust errors
+  clearScreen: false,
+  // 2. tauri expects a fixed port, fail if that port is not available
+  server: {
+    port: 1420,
+    strictPort: true,
+    host: host || false,
+    hmr: host
+      ? {
+          protocol: "ws",
+          host,
+          port: 1421,
+        }
+      : undefined,
+    watch: {
+      // 3. tell Vite to ignore watching `src-tauri`
+      ignored: ["**/src-tauri/**"],
+    },
+  },
+}));