feat(01-04): add device CRUD UI — form, POST, DELETE, remove buttons

- Add <form id='add-device-form'> to DEVICES panel with 5 inputs (name, strip_type, led_count, ip, port) and submit button
- Add apiPost() and apiDelete() helper functions to app.js
- Update loadDevices() to render device rows with remove button (.device-remove)
- Add removeDevice(id) function with DELETE /api/devices/{id} + window export for onclick
- Add form submit handler: POST /api/devices, form reset, refresh device list
- Add panel IDs: devices-panel, animations-panel, timeline-panel, transport-panel to index.html

lightsync/frontend/app.js

@@ -4,6 +4,21 @@
 
 const WS_URL = `ws://${location.host}/ws`;
 
+async function apiPost(path, data) {
+    const res = await fetch(path, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+    });
+    if (!res.ok) throw new Error(`POST ${path}: HTTP ${res.status}`);
+    return res.json();
+}
+
+async function apiDelete(path) {
+    const res = await fetch(path, { method: "DELETE" });
+    if (!res.ok && res.status !== 204) throw new Error(`DELETE ${path}: HTTP ${res.status}`);
+}
+
 class LightSyncClient {
     constructor() {
         this.ws = null;
@@ -68,8 +83,11 @@ async function loadDevices() {
         }
         list.innerHTML = devices.map(d =>
             `<div class="device-row">
-                <span class="text-accent">${escapeHtml(d.name)}</span>
-                <span class="text-dim">${escapeHtml(d.strip_type)} / ${d.led_count} LEDs / ${escapeHtml(d.ip)}:${d.port}</span>
+                <div class="device-row-info">
+                    <span class="text-accent">${escapeHtml(d.name)}</span>
+                    <span class="text-dim">${escapeHtml(d.strip_type)} / ${d.led_count} LEDs / ${escapeHtml(d.ip)}:${d.port}</span>
+                </div>
+                <button class="device-remove" onclick="removeDevice('${d.id}')" title="Remove device">&times;</button>
             </div>`
         ).join("");
     } catch (err) {
@@ -79,6 +97,16 @@ async function loadDevices() {
     }
 }
 
+async function removeDevice(id) {
+    try {
+        await apiDelete(`/api/devices/${id}`);
+        await loadDevices();
+    } catch (err) {
+        console.error("[devices] remove failed:", err);
+    }
+}
+window.removeDevice = removeDevice;
+
 function escapeHtml(str) {
     const div = document.createElement("div");
     div.appendChild(document.createTextNode(String(str)));
@@ -86,3 +114,23 @@ function escapeHtml(str) {
 }
 
 loadDevices();
+
+document.getElementById("add-device-form").addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const form = e.target;
+    const data = {
+        name: form.name.value.trim(),
+        strip_type: form.strip_type.value,
+        led_count: parseInt(form.led_count.value, 10),
+        ip: form.ip.value.trim(),
+        port: parseInt(form.port.value, 10),
+    };
+    try {
+        await apiPost("/api/devices", data);
+        form.reset();
+        form.port.value = "21324";
+        await loadDevices();
+    } catch (err) {
+        console.error("[devices] add failed:", err);
+    }
+});