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">
+                <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);
+    }
+});

lightsync/frontend/index.html

@@ -20,23 +20,37 @@
         </header>
 
         <aside class="sidebar">
-            <div class="panel" style="flex: 1; min-height: 0;">
+            <div class="panel" id="devices-panel" style="flex: 1; min-height: 0;">
                 <div class="panel-header">DEVICES</div>
                 <div class="panel-content" id="device-list">
                     <span class="text-dim">loading...</span>
                 </div>
+                <form id="add-device-form" class="device-form">
+                    <input type="text" name="name" placeholder="Device name" required>
+                    <select name="strip_type" required>
+                        <option value="sk6812">SK6812</option>
+                        <option value="ws2801">WS2801</option>
+                        <option value="generic">Generic</option>
+                    </select>
+                    <input type="number" name="led_count" placeholder="LED count" min="1" max="1000" required>
+                    <input type="text" name="ip" placeholder="IP address" required>
+                    <input type="number" name="port" placeholder="Port" min="1" max="65535" value="21324" required>
+                    <button type="submit">+ ADD DEVICE</button>
+                </form>
             </div>
-            <div class="panel" style="flex: 0 0 120px;">
+            <div class="panel" id="animations-panel" style="flex: 0 0 120px;">
                 <div class="panel-header">ANIMATIONS</div>
                 <div class="panel-content text-dim">[ PHASE 3+ ]</div>
             </div>
         </aside>
 
         <main class="main-area">
+            <div class="panel" id="timeline-panel" style="flex: 1; display: flex; align-items: center; justify-content: center;">
                 <span>[ TIMELINE &#8212; PHASE 2+ ]</span>
+            </div>
         </main>
 
-        <footer class="transport-bar">
+        <footer class="transport-bar" id="transport-panel">
             <span>[ TRANSPORT &#8212; PHASE 2+ ]</span>
         </footer>