Improve ESP-NOW messaging and tab defaults

- Use shared ESPNOW payload limit and message splitting
- Expand default tab names and add flash/build artifacts.

Made-with: Cursor

.cursor/debug.log

@@ -0,0 +1,116 @@
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434706543}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434706552}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434707852}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434707860}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434708466}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434708474}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768434709765}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768434709787}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768434717888}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":201,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768434717903}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434717904}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434717913}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434738084}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434738093}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434739031}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434739040}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434746453}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434746496}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768434748859}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768434748866}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768434773921}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":201,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768434773931}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434773931}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434773940}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768434810105}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768434810119}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768434816383}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":201,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768434816399}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434816400}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434816414}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434944656}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434944756}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434945369}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434945427}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434946108}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434946162}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434946680}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434946736}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768434947640}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768434947656}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768434953064}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":201,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768434953079}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434953080}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434953093}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435103720}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435103776}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435104593}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435104647}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435105158}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435105253}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435275247}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435275315}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435276178}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435276278}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435276945}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435276998}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768435278150}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768435278162}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768435281966}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":400,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768435281988}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435387623}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435387680}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435388399}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435388454}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768435389910}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768435389922}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768435393213}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768435393231}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435393233}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435393245}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/12/content-fragment","targetId":"tab-content"},"timestamp":1768435395729}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/12/content-fragment","targetId":"tab-content"},"timestamp":1768435395748}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/13/content-fragment","targetId":"tab-content"},"timestamp":1768435396771}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/13/content-fragment","targetId":"tab-content"},"timestamp":1768435396788}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/12/content-fragment","targetId":"tab-content"},"timestamp":1768435398656}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/12/content-fragment","targetId":"tab-content"},"timestamp":1768435398674}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/13/content-fragment","targetId":"tab-content"},"timestamp":1768435399748}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/13/content-fragment","targetId":"tab-content"},"timestamp":1768435399774}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435668310}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":false,"hasPaletteContainer":false,"hasLightingController":false},"timestamp":1768435668311}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435668355}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435669841}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":false,"hasPaletteContainer":false,"hasLightingController":false},"timestamp":1768435669842}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435669852}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435672686}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435673713}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435674316}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435674560}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435680419}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435680897}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435814285}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":true,"hasPaletteContainer":false,"hasLightingController":false},"timestamp":1768435814287}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H3","location":"src/static/color_palette.js:DOMContentLoaded","message":"palette script loaded","data":{"hasButton":true,"hasModal":true,"hasClose":true},"timestamp":1768435814287}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435814350}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435815080}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H3","location":"src/static/color_palette.js:DOMContentLoaded","message":"palette script loaded","data":{"hasButton":true,"hasModal":true,"hasClose":true},"timestamp":1768435815081}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":true,"hasPaletteContainer":false,"hasLightingController":false},"timestamp":1768435815082}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435815135}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435815724}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H3","location":"src/static/color_palette.js:DOMContentLoaded","message":"palette script loaded","data":{"hasButton":true,"hasModal":true,"hasClose":true},"timestamp":1768435815725}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":true,"hasPaletteContainer":false,"hasLightingController":false},"timestamp":1768435815725}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435815778}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H4","location":"src/static/color_palette.js:openModal","message":"palette modal opened","data":{"active":true},"timestamp":1768435817104}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":true,"modalActive":true},"timestamp":1768435817105}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H4","location":"src/static/color_palette.js:closeModal","message":"palette modal closed","data":{"active":false},"timestamp":1768435820180}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435931118}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":true,"hasPaletteContainer":true,"hasLightingController":false},"timestamp":1768435931120}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H3","location":"src/static/color_palette.js:DOMContentLoaded","message":"palette script loaded","data":{"hasButton":true,"hasModal":true,"hasClose":true,"hasContainer":true,"hasAddButton":true},"timestamp":1768435931119}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435931173}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435931791}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":true,"hasPaletteContainer":true,"hasLightingController":false},"timestamp":1768435931793}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H3","location":"src/static/color_palette.js:DOMContentLoaded","message":"palette script loaded","data":{"hasButton":true,"hasModal":true,"hasClose":true,"hasContainer":true,"hasAddButton":true},"timestamp":1768435931793}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435931895}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":true,"modalActive":true},"timestamp":1768435933111}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H4","location":"src/static/color_palette.js:openModal","message":"palette modal opened","data":{"active":true},"timestamp":1768435933110}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H4","location":"src/static/color_palette.js:closeModal","message":"palette modal closed","data":{"active":false},"timestamp":1768435943332}

.gitignore

@@ -0,0 +1,29 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+
+# Virtual environments
+venv/
+env/
+ENV/
+.venv
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Project specific
+*.log
+*.db
+*.sqlite
+

Pipfile

@@ -7,8 +7,18 @@ name = "pypi"
 mpremote = "*"
 pyserial = "*"
 esptool = "*"
+pyjwt = "*"
+watchfiles = "*"
+requests = "*"
+selenium = "*"
+adafruit-ampy = "*"
 
 [dev-packages]
 
 [requires]
 python_version = "3.12"
+
+[scripts]
+web = "python /home/pi/led-controller/tests/web.py"
+watch = "python -m watchfiles 'python tests/web.py' src tests"
+install = "pipenv install"

build_static/styles.css

@@ -0,0 +1,37 @@
+/* General tab styles */
+.tabs {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+.tab {
+    padding: 10px 20px;
+    margin: 0 10px;
+    cursor: pointer;
+    background-color: #f1f1f1;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    transition: background-color 0.3s ease;
+}
+
+.tab:hover {
+    background-color: #ddd;
+}
+
+.tab.active {
+    background-color: #ccc;
+}
+
+.tab-content {
+    display: flex;
+    justify-content: center;
+}
+
+.tab-pane {
+    display: none;
+}
+
+.tab-pane.active {
+    display: block;
+}

clear-debug-log.sh

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+rm -f /home/pi/led-controller/.cursor/debug.log

db/group.json

@@ -0,0 +1,17 @@
+{
+    "1": {
+        "name": "Main Group",
+        "devices": [
+            "1",
+            "2",
+            "3"
+        ]
+    },
+    "2": {
+        "name": "Accent Group",
+        "devices": [
+            "4",
+            "5"
+        ]
+    }
+}

db/palette.json

@@ -0,0 +1,12 @@
+{
+  "1": [
+      "#FF0000",
+      "#00FF00",
+      "#0000FF",
+      "#FFFF00",
+      "#FF00FF",
+      "#00FFFF",
+      "#FFFFFF",
+      "#000000"
+    ]
+}

db/pattern.json

@@ -0,0 +1,54 @@
+{
+    "on": {
+            "min_delay": 10,
+            "max_delay": 10000,
+            "max_colors": 1
+        },
+    "off": {
+        "min_delay": 10,
+        "max_delay": 10000,
+        "max_colors": 0
+    },
+    "rainbow": {
+        "n1": "Step Rate",
+        "min_delay": 10,
+        "max_delay": 10000,
+        "max_colors": 0
+    },
+    "transition": {
+        "min_delay": 10,
+        "max_delay": 10000,
+        "max_colors": 10
+    },
+    "chase": {
+        "n1": "Colour 1 Length",
+        "n2": "Colour 2 Length",
+        "n3": "Step 1",
+        "n4": "Step 2",
+        "min_delay": 10,
+        "max_delay": 10000,
+        "max_colors": 2
+    },
+    "pulse": {
+        "n1": "Attack",
+        "n2": "Hold",
+        "n3": "Decay",
+        "min_delay": 10,
+        "max_delay": 10000,
+        "max_colors": 10
+    },
+    "circle": {
+        "n1": "Head Rate",
+        "n2": "Max Length",
+        "n3": "Tail Rate",
+        "n4": "Min Length",
+        "min_delay": 10,
+        "max_delay": 10000,
+        "max_colors": 2
+    },
+    "blink": {
+        "min_delay": 10,
+        "max_delay": 10000,
+        "max_colors": 10
+    }
+}

db/preset.json

@@ -0,0 +1,276 @@
+{
+  "1": {
+    "name": "on",
+    "pattern": "on",
+    "colors": [
+      "#FFFFFF"
+    ],
+    "brightness": 255,
+    "delay": 100,
+    "auto": true,
+    "n1": 0,
+    "n2": 0,
+    "n3": 0,
+    "n4": 0,
+    "n5": 0,
+    "n6": 0,
+    "n7": 0,
+    "n8": 0,
+    "profile_id": "1"
+  },
+  "2": {
+    "name": "off",
+    "pattern": "off",
+    "colors": [],
+    "brightness": 0,
+    "delay": 100,
+    "auto": true,
+    "n1": 0,
+    "n2": 0,
+    "n3": 0,
+    "n4": 0,
+    "n5": 0,
+    "n6": 0,
+    "n7": 0,
+    "n8": 0,
+    "profile_id": "1"
+  },
+  "3": {
+    "name": "rainbow",
+    "pattern": "rainbow",
+    "colors": [],
+    "brightness": 255,
+    "delay": 100,
+    "auto": true,
+    "n1": 2,
+    "n2": 0,
+    "n3": 0,
+    "n4": 0,
+    "n5": 0,
+    "n6": 0,
+    "n7": 0,
+    "n8": 0,
+    "profile_id": "1"
+  },
+  "4": {
+    "name": "transition",
+    "pattern": "transition",
+    "colors": [
+      "#FF0000",
+      "#00FF00",
+      "#0000FF"
+    ],
+    "brightness": 255,
+    "delay": 500,
+    "auto": true,
+    "n1": 0,
+    "n2": 0,
+    "n3": 0,
+    "n4": 0,
+    "n5": 0,
+    "n6": 0,
+    "n7": 0,
+    "n8": 0,
+    "profile_id": "1"
+  },
+  "5": {
+    "name": "chase",
+    "pattern": "chase",
+    "colors": [
+      "#FF0000",
+      "#0000FF"
+    ],
+    "brightness": 255,
+    "delay": 200,
+    "auto": true,
+    "n1": 5,
+    "n2": 5,
+    "n3": 1,
+    "n4": 1,
+    "n5": 0,
+    "n6": 0,
+    "n7": 0,
+    "n8": 0,
+    "profile_id": "1"
+  },
+  "6": {
+    "name": "pulse",
+    "pattern": "pulse",
+    "colors": [
+      "#00FF00"
+    ],
+    "brightness": 255,
+    "delay": 500,
+    "auto": true,
+    "n1": 1000,
+    "n2": 500,
+    "n3": 1000,
+    "n4": 0,
+    "n5": 0,
+    "n6": 0,
+    "n7": 0,
+    "n8": 0,
+    "profile_id": "1"
+  },
+  "7": {
+    "name": "circle",
+    "pattern": "circle",
+    "colors": [
+      "#FFA500",
+      "#800080"
+    ],
+    "brightness": 255,
+    "delay": 200,
+    "auto": true,
+    "n1": 2,
+    "n2": 10,
+    "n3": 2,
+    "n4": 5,
+    "n5": 0,
+    "n6": 0,
+    "n7": 0,
+    "n8": 0,
+    "profile_id": "1"
+  },
+  "8": {
+    "name": "blink",
+    "pattern": "blink",
+    "colors": [
+      "#FF0000",
+      "#00FF00",
+      "#0000FF",
+      "#FFFF00"
+    ],
+    "brightness": 255,
+    "delay": 1000,
+    "auto": true,
+    "n1": 0,
+    "n2": 0,
+    "n3": 0,
+    "n4": 0,
+    "n5": 0,
+    "n6": 0,
+    "n7": 0,
+    "n8": 0,
+    "profile_id": "1"
+  },
+  "9": {
+    "name": "warm white",
+    "pattern": "on",
+    "colors": ["#FFF5E6"],
+    "brightness": 200,
+    "delay": 100,
+    "auto": true,
+    "n1": 0,
+    "n2": 0,
+    "n3": 0,
+    "n4": 0,
+    "n5": 0,
+    "n6": 0,
+    "n7": 0,
+    "n8": 0,
+    "profile_id": "1"
+  },
+  "10": {
+    "name": "cool white",
+    "pattern": "on",
+    "colors": ["#E6F2FF"],
+    "brightness": 200,
+    "delay": 100,
+    "auto": true,
+    "n1": 0,
+    "n2": 0,
+    "n3": 0,
+    "n4": 0,
+    "n5": 0,
+    "n6": 0,
+    "n7": 0,
+    "n8": 0,
+    "profile_id": "1"
+  },
+  "11": {
+    "name": "red",
+    "pattern": "on",
+    "colors": ["#FF0000"],
+    "brightness": 255,
+    "delay": 100,
+    "auto": true,
+    "n1": 0,
+    "n2": 0,
+    "n3": 0,
+    "n4": 0,
+    "n5": 0,
+    "n6": 0,
+    "n7": 0,
+    "n8": 0,
+    "profile_id": "1"
+  },
+  "12": {
+    "name": "blue",
+    "pattern": "on",
+    "colors": ["#0000FF"],
+    "brightness": 255,
+    "delay": 100,
+    "auto": true,
+    "n1": 0,
+    "n2": 0,
+    "n3": 0,
+    "n4": 0,
+    "n5": 0,
+    "n6": 0,
+    "n7": 0,
+    "n8": 0,
+    "profile_id": "1"
+  },
+  "13": {
+    "name": "rainbow slow",
+    "pattern": "rainbow",
+    "colors": [],
+    "brightness": 255,
+    "delay": 150,
+    "auto": true,
+    "n1": 1,
+    "n2": 0,
+    "n3": 0,
+    "n4": 0,
+    "n5": 0,
+    "n6": 0,
+    "n7": 0,
+    "n8": 0,
+    "profile_id": "1"
+  },
+  "14": {
+    "name": "pulse slow",
+    "pattern": "pulse",
+    "colors": ["#FF6600"],
+    "brightness": 255,
+    "delay": 800,
+    "auto": true,
+    "n1": 2000,
+    "n2": 1000,
+    "n3": 2000,
+    "n4": 0,
+    "n5": 0,
+    "n6": 0,
+    "n7": 0,
+    "n8": 0,
+    "profile_id": "1"
+  },
+  "15": {
+    "name": "blink red green",
+    "pattern": "blink",
+    "colors": ["#FF0000", "#00FF00"],
+    "brightness": 255,
+    "delay": 500,
+    "auto": true,
+    "n1": 0,
+    "n2": 0,
+    "n3": 0,
+    "n4": 0,
+    "n5": 0,
+    "n6": 0,
+    "n7": 0,
+    "n8": 0,
+    "profile_id": "1"
+  }
+}

db/profile.json

@@ -0,0 +1,11 @@
+{
+  "1": {
+    "name": "default",
+    "type": "tabs",
+    "tabs": [
+      "1"
+    ],
+    "scenes": [],
+    "palette_id": "1"
+  }
+}

db/scene.json

@@ -0,0 +1,22 @@
+{
+    "1": {
+        "name": "Default Scene",
+        "sequences": [
+            "1"
+        ],
+        "groups": [
+            "1"
+        ]
+    },
+    "2": {
+        "name": "Party Mode",
+        "sequences": [
+            "1",
+            "2"
+        ],
+        "groups": [
+            "1",
+            "2"
+        ]
+    }
+}

db/sequence.json

@@ -0,0 +1,30 @@
+{
+    "1": {
+        "group_name": "Main Group",
+        "presets": [
+            "1",
+            "2"
+        ],
+        "sequence_duration": 3000,
+        "sequence_transition": 500,
+        "sequence_loop": true,
+        "sequence_repeat_count": 0,
+        "sequence_active": false,
+        "sequence_index": 0,
+        "sequence_start_time": 0
+    },
+    "2": {
+        "group_name": "Accent Group",
+        "presets": [
+            "2",
+            "3"
+        ],
+        "sequence_duration": 2000,
+        "sequence_transition": 300,
+        "sequence_loop": true,
+        "sequence_repeat_count": 0,
+        "sequence_active": false,
+        "sequence_index": 0,
+        "sequence_start_time": 0
+    }
+}

db/tab.json

@@ -0,0 +1,27 @@
+{
+  "1": {
+    "name": "default",
+    "names": [
+      "a","b","c","d","e","f","g","h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
+    ],
+    "presets": [
+      [
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "9",
+        "10",
+        "11",
+        "12",
+        "13",
+        "14",
+        "15"
+      ]
+    ]
+  }
+}

dev.py

@@ -6,28 +6,48 @@ import sys
 
 print(sys.argv)
 
-port = sys.argv[1]
+# Extract port (first arg if it's not a command)
+commands = ["src", "lib", "ls", "reset", "follow", "db"]
+port = None
+if len(sys.argv) > 1 and sys.argv[1] not in commands:
+    port = sys.argv[1]
 
-cmd = sys.argv[1]
 
 for cmd in sys.argv[1:]:
     print(cmd)
     match cmd:
         case "src":
-            subprocess.call(["mpremote", "connect", port, "fs", "cp", "-r", ".", ":" ], cwd="src")
+            if port:
+                subprocess.call(["mpremote", "connect", port, "fs", "cp", "-r", ".", ":" ], cwd="src")
+            else:
+                print("Error: Port required for 'src' command")
         case "lib":
-            subprocess.call(["mpremote", "connect", port, "fs", "cp", "-r", "lib", ":" ])
+            if port:
+                subprocess.call(["mpremote", "connect", port, "fs", "cp", "-r", "lib", ":" ])
+            else:
+                print("Error: Port required for 'lib' command")
         case "ls":
-            subprocess.call(["mpremote", "connect", port, "fs", "ls", ":" ])
+            if port:
+                subprocess.call(["mpremote", "connect", port, "fs", "ls", ":" ])
+            else:
+                print("Error: Port required for 'ls' command")
         case "reset":
-            with serial.Serial(port, baudrate=115200) as ser:
-                ser.write(b'\x03\x03\x04')
+            if port:
+                with serial.Serial(port, baudrate=115200) as ser:
+                    ser.write(b'\x03\x03\x04')
+            else:
+                print("Error: Port required for 'reset' command")
         case "follow":
-            with serial.Serial(port, baudrate=115200) as ser:
-                while True:
-                    if ser.in_waiting > 0:  # Check if there is data in the buffer
-                        data = ser.readline().decode('utf-8').strip()  # Read and decode the data
-                        print(data)
-
-
-
+            if port:
+                with serial.Serial(port, baudrate=115200) as ser:
+                    while True:
+                        if ser.in_waiting > 0:  # Check if there is data in the buffer
+                            data = ser.readline().decode('utf-8').strip()  # Read and decode the data
+                            print(data)
+            else:
+                print("Error: Port required for 'follow' command")
+        case "db":
+            if port:
+                subprocess.call(["mpremote", "connect", port, "fs", "cp", "-r", "db", ":" ])
+            else:
+                print("Error: Port required for 'db' command")

docs/API.md

@@ -1,504 +1,263 @@
-# LED Controller API Specification
+# LED Driver ESPNow API Documentation
 
-**Base URL:** `http://device-ip/` or `http://192.168.4.1/` (when in AP mode)  
-**Protocol:** HTTP/1.1  
-**Content-Type:** `application/json`
+This document describes the ESPNow message format for controlling LED driver devices.
 
-## Presets API
+## Message Format
 
-### GET /presets
+All messages are JSON objects sent via ESPNow with the following structure:
 
-List all presets.
-
-**Response:** `200 OK`
 ```json
 {
-  "preset1": {
-    "name": "preset1",
-    "pattern": "on",
-    "colors": [[255, 0, 0]],
-    "delay": 100,
-    "n1": 0,
-    "n2": 0,
-    "n3": 0,
-    "n4": 0,
-    "n5": 0,
-    "n6": 0,
-    "n7": 0,
-    "n8": 0
+  "v": "1",
+  "presets": { ... },
+  "select": { ... }
+}
+```
+
+### Version Field
+
+- **`v`** (required): Message version, must be `"1"`. Messages with other versions are ignored.
+
+## Presets
+
+Presets define LED patterns with their configuration. Each preset has a name and contains pattern-specific settings.
+
+### Preset Structure
+
+```json
+{
+  "presets": {
+    "preset_name": {
+      "pattern": "pattern_type",
+      "colors": ["#RRGGBB", ...],
+      "delay": 100,
+      "brightness": 127,
+      "auto": true,
+      "n1": 0,
+      "n2": 0,
+      "n3": 0,
+      "n4": 0,
+      "n5": 0,
+      "n6": 0
+    }
   }
 }
 ```
 
-### GET /presets/{name}
+### Preset Fields
 
-Get a specific preset by name.
+- **`pattern`** (required): Pattern type. Options:
+  - `"off"` - Turn off all LEDs
+  - `"on"` - Solid color
+  - `"blink"` - Blinking pattern
+  - `"rainbow"` - Rainbow color cycle
+  - `"pulse"` - Pulse/fade pattern
+  - `"transition"` - Color transition
+  - `"chase"` - Chasing pattern
+  - `"circle"` - Circle loading pattern
+
+- **`colors`** (optional): Array of hex color strings (e.g., `"#FF0000"` for red). Default: `["#FFFFFF"]`
+  - Colors are automatically converted from hex to RGB and reordered based on device color order setting
+  - Supports multiple colors for patterns that use them
+
+- **`delay`** (optional): Delay in milliseconds between pattern updates. Default: `100`
+
+- **`brightness`** (optional): Brightness level (0-255). Default: `127`
+
+- **`auto`** (optional): Auto mode flag. Default: `true`
+  - `true`: Pattern runs continuously
+  - `false`: Pattern advances one step per beat (manual mode)
+
+- **`n1` through `n6`** (optional): Pattern-specific numeric parameters. Default: `0`
+  - See pattern-specific documentation below
+
+### Pattern-Specific Parameters
+
+#### Rainbow
+- **`n1`**: Step increment (how many color wheel positions to advance per update). Default: `1`
+
+#### Pulse
+- **`n1`**: Attack time in milliseconds (fade in)
+- **`n2`**: Hold time in milliseconds (full brightness)
+- **`n3`**: Decay time in milliseconds (fade out)
+- **`delay`**: Delay time in milliseconds (off between pulses)
+
+#### Transition
+- **`delay`**: Transition duration in milliseconds
+
+#### Chase
+- **`n1`**: Number of LEDs with first color
+- **`n2`**: Number of LEDs with second color
+- **`n3`**: Movement amount on even steps (can be negative)
+- **`n4`**: Movement amount on odd steps (can be negative)
+
+#### Circle
+- **`n1`**: Head movement rate (LEDs per second)
+- **`n2`**: Maximum length
+- **`n3`**: Tail movement rate (LEDs per second)
+- **`n4`**: Minimum length
+
+## Select Messages
+
+Select messages control which preset is active on which device. The format uses a list to support step synchronization.
+
+### Select Format
 
-**Response:** `200 OK`
 ```json
 {
-  "name": "preset1",
-  "pattern": "on",
-  "colors": [[255, 0, 0]],
-  "delay": 100,
-  "n1": 0,
-  "n2": 0,
-  "n3": 0,
-  "n4": 0,
-  "n5": 0,
-  "n6": 0,
-  "n7": 0,
-  "n8": 0
-}
-```
-
-**Response:** `404 Not Found`
-```json
-{
-  "error": "Preset not found"
-}
-```
-
-### POST /presets
-
-Create a new preset.
-
-**Request Body:**
-```json
-{
-  "name": "preset1",
-  "pattern": "on",
-  "colors": [[255, 0, 0]],
-  "delay": 100,
-  "n1": 0,
-  "n2": 0,
-  "n3": 0,
-  "n4": 0,
-  "n5": 0,
-  "n6": 0,
-  "n7": 0,
-  "n8": 0
-}
-```
-
-**Response:** `201 Created` - Returns the created preset
-
-**Response:** `400 Bad Request`
-```json
-{
-  "error": "Name is required"
-}
-```
-
-**Response:** `409 Conflict`
-```json
-{
-  "error": "Preset already exists"
-}
-```
-
-### PUT /presets/{name}
-
-Update an existing preset.
-
-**Request Body:**
-```json
-{
-  "delay": 200,
-  "colors": [[0, 255, 0]]
-}
-```
-
-**Response:** `200 OK` - Returns the updated preset
-
-**Response:** `404 Not Found`
-```json
-{
-  "error": "Preset not found"
-}
-```
-
-### DELETE /presets/{name}
-
-Delete a preset.
-
-**Response:** `200 OK`
-```json
-{
-  "message": "Preset deleted successfully"
-}
-```
-
-**Response:** `404 Not Found`
-```json
-{
-  "error": "Preset not found"
-}
-```
-
-## Profiles API
-
-### GET /profiles
-
-List all profiles.
-
-**Response:** `200 OK`
-```json
-{
-  "profile1": {
-    "name": "profile1",
-    "description": "Profile description",
-    "scenes": []
+  "select": {
+    "device_name": ["preset_name"],
+    "device_name2": ["preset_name2", step_value]
   }
 }
 ```
 
-### GET /profiles/{name}
+### Select Fields
 
-Get a specific profile by name.
+- **`select`**: Object mapping device names to selection lists
+  - **Key**: Device name (as configured in device settings)
+  - **Value**: List with one or two elements:
+    - `["preset_name"]` - Select preset (uses default step behavior)
+    - `["preset_name", step]` - Select preset with explicit step value (for synchronization)
 
-**Response:** `200 OK`
+### Step Synchronization
+
+The step value allows precise synchronization across multiple devices:
+
+- **Without step**: `["preset_name"]`
+  - If switching to different preset: step resets to 0
+  - If selecting "off" pattern: step resets to 0
+  - If selecting same preset (beat): step is preserved, pattern restarts
+
+- **With step**: `["preset_name", 10]`
+  - Explicitly sets step to the specified value
+  - Useful for synchronizing multiple devices to the same step
+
+### Beat Functionality
+
+Calling `select()` again with the same preset name acts as a "beat" - it restarts the pattern generator:
+
+- **Single-tick patterns** (rainbow, chase in manual mode): Advance one step per beat
+- **Multi-tick patterns** (pulse in manual mode): Run through full cycle per beat
+
+Example beat sequence:
 ```json
-{
-  "name": "profile1",
-  "description": "Profile description",
-  "scenes": []
-}
+// Beat 1
+{"select": {"device1": ["rainbow_preset"]}}
+
+// Beat 2 (same preset = beat)
+{"select": {"device1": ["rainbow_preset"]}}
+
+// Beat 3
+{"select": {"device1": ["rainbow_preset"]}}
 ```
 
-**Response:** `404 Not Found`
+## Synchronization
+
+### Using "off" Pattern
+
+Selecting the "off" pattern resets the step counter to 0, providing a synchronization point:
+
 ```json
 {
-  "error": "Profile not found"
-}
-```
-
-### POST /profiles
-
-Create a new profile.
-
-**Request Body:**
-```json
-{
-  "name": "profile1",
-  "description": "Profile description",
-  "scenes": []
-}
-```
-
-**Response:** `201 Created` - Returns the created profile
-
-**Response:** `400 Bad Request`
-```json
-{
-  "error": "Name is required"
-}
-```
-
-**Response:** `409 Conflict`
-```json
-{
-  "error": "Profile already exists"
-}
-```
-
-### PUT /profiles/{name}
-
-Update an existing profile.
-
-**Request Body:**
-```json
-{
-  "description": "Updated description"
-}
-```
-
-**Response:** `200 OK` - Returns the updated profile
-
-**Response:** `404 Not Found`
-```json
-{
-  "error": "Profile not found"
-}
-```
-
-### DELETE /profiles/{name}
-
-Delete a profile.
-
-**Response:** `200 OK`
-```json
-{
-  "message": "Profile deleted successfully"
-}
-```
-
-**Response:** `404 Not Found`
-```json
-{
-  "error": "Profile not found"
-}
-```
-
-## Scenes API
-
-### GET /scenes
-
-List all scenes. Optionally filter by profile using query parameter.
-
-**Query Parameters:**
-- `profile` (optional): Filter scenes by profile name
-
-**Example:** `GET /scenes?profile=profile1`
-
-**Response:** `200 OK`
-```json
-{
-  "profile1:scene1": {
-    "name": "scene1",
-    "profile_name": "profile1",
-    "description": "Scene description",
-    "transition_time": 0,
-    "devices": [
-      {"device_name": "device1", "preset_name": "preset1"},
-      {"device_name": "device2", "preset_name": "preset2"}
-    ]
+  "select": {
+    "device1": ["off"],
+    "device2": ["off"]
   }
 }
 ```
 
-### GET /scenes/{profile_name}/{scene_name}
+After all devices are "off", switching to a pattern ensures they all start from step 0:
 
-Get a specific scene.
-
-**Response:** `200 OK`
 ```json
 {
-  "name": "scene1",
-  "profile_name": "profile1",
-  "description": "Scene description",
-  "transition_time": 0,
-  "devices": [
-    {"device_name": "device1", "preset_name": "preset1"},
-    {"device_name": "device2", "preset_name": "preset2"}
-  ]
+  "select": {
+    "device1": ["rainbow_preset"],
+    "device2": ["rainbow_preset"]
+  }
 }
 ```
 
-**Response:** `404 Not Found`
+### Using Step Parameter
+
+For precise synchronization, use the step parameter:
+
 ```json
 {
-  "error": "Scene not found"
+  "select": {
+    "device1": ["rainbow_preset", 10],
+    "device2": ["rainbow_preset", 10],
+    "device3": ["rainbow_preset", 10]
+  }
 }
 ```
 
-### POST /scenes
+All devices will start at step 10 and advance together on subsequent beats.
 
-Create a new scene.
+## Complete Example
 
-**Request Body:**
 ```json
 {
-  "name": "scene1",
-  "profile_name": "profile1",
-  "description": "Scene description",
-  "transition_time": 0,
-  "devices": [
-    {"device_name": "device1", "preset_name": "preset1"},
-    {"device_name": "device2", "preset_name": "preset2"}
-  ]
+  "v": "1",
+  "presets": {
+    "red_blink": {
+      "pattern": "blink",
+      "colors": ["#FF0000"],
+      "delay": 200,
+      "brightness": 255,
+      "auto": true
+    },
+    "rainbow_manual": {
+      "pattern": "rainbow",
+      "delay": 100,
+      "n1": 2,
+      "auto": false
+    },
+    "pulse_slow": {
+      "pattern": "pulse",
+      "colors": ["#00FF00"],
+      "delay": 500,
+      "n1": 1000,
+      "n2": 500,
+      "n3": 1000,
+      "auto": false
+    }
+  },
+  "select": {
+    "device1": ["red_blink"],
+    "device2": ["rainbow_manual", 0],
+    "device3": ["pulse_slow"]
+  }
 }
 ```
 
-**Response:** `201 Created` - Returns the created scene
+## Message Processing
 
-**Response:** `400 Bad Request`
-```json
-{
-  "error": "Name is required"
-}
-```
-or
-```json
-{
-  "error": "Profile name is required"
-}
-```
+1. **Version Check**: Messages with `v != "1"` are rejected
+2. **Preset Processing**: Presets are created or updated (upsert behavior)
+3. **Color Conversion**: Hex colors are converted to RGB tuples and reordered based on device color order
+4. **Selection**: Devices select their assigned preset, optionally with step value
 
-**Response:** `409 Conflict`
-```json
-{
-  "error": "Scene already exists"
-}
-```
+## Best Practices
 
-### PUT /scenes/{profile_name}/{scene_name}
+1. **Always include version**: Set `"v": "1"` in all messages
+2. **Use "off" for sync**: Select "off" pattern to synchronize devices before starting patterns
+3. **Beats for manual mode**: Send select messages repeatedly with same preset name to advance manual patterns
+4. **Step for precision**: Use step parameter when exact synchronization is required
+5. **Color format**: Always use hex strings (`"#RRGGBB"`), conversion is automatic
 
-Update an existing scene.
+## Error Handling
 
-**Request Body:**
-```json
-{
-  "transition_time": 500,
-  "description": "Updated description"
-}
-```
+- Invalid version: Message is ignored
+- Missing preset: Selection fails, device keeps current preset
+- Invalid pattern: Selection fails, device keeps current preset
+- Missing colors: Pattern uses default white color
+- Invalid step: Step value is used as-is (may cause unexpected behavior)
 
-**Response:** `200 OK` - Returns the updated scene
+## Notes
 
-**Response:** `404 Not Found`
-```json
-{
-  "error": "Scene not found"
-}
-```
-
-### DELETE /scenes/{profile_name}/{scene_name}
-
-Delete a scene.
-
-**Response:** `200 OK`
-```json
-{
-  "message": "Scene deleted successfully"
-}
-```
-
-**Response:** `404 Not Found`
-```json
-{
-  "error": "Scene not found"
-}
-```
-
-### POST /scenes/{profile_name}/{scene_name}/devices
-
-Add a device assignment to a scene.
-
-**Request Body:**
-```json
-{
-  "device_name": "device1",
-  "preset_name": "preset1"
-}
-```
-
-**Response:** `200 OK` - Returns the updated scene
-
-**Response:** `400 Bad Request`
-```json
-{
-  "error": "Device name and preset name are required"
-}
-```
-
-**Response:** `404 Not Found`
-```json
-{
-  "error": "Scene not found"
-}
-```
-
-### DELETE /scenes/{profile_name}/{scene_name}/devices/{device_name}
-
-Remove a device assignment from a scene.
-
-**Response:** `200 OK` - Returns the updated scene
-
-**Response:** `404 Not Found`
-```json
-{
-  "error": "Scene not found"
-}
-```
-
-## Patterns API
-
-### GET /patterns
-
-Get the list of available pattern names.
-
-**Response:** `200 OK`
-```json
-["on", "bl", "cl", "rb", "sb", "o"]
-```
-
-### POST /patterns
-
-Add a new pattern name to the list.
-
-**Request Body:**
-```json
-{
-  "name": "new_pattern"
-}
-```
-
-**Response:** `201 Created` - Returns the updated list of patterns
-```json
-["on", "bl", "cl", "rb", "sb", "o", "new_pattern"]
-```
-
-**Response:** `400 Bad Request`
-```json
-{
-  "error": "Name is required"
-}
-```
-
-**Response:** `409 Conflict`
-```json
-{
-  "error": "Pattern already exists"
-}
-```
-
-### DELETE /patterns/{name}
-
-Remove a pattern name from the list.
-
-**Response:** `200 OK`
-```json
-{
-  "message": "Pattern deleted successfully"
-}
-```
-
-**Response:** `404 Not Found`
-```json
-{
-  "error": "Pattern not found"
-}
-```
-
-## Error Responses
-
-All endpoints may return the following error responses:
-
-**400 Bad Request** - Invalid request data
-```json
-{
-  "error": "Error message"
-}
-```
-
-**404 Not Found** - Resource not found
-```json
-{
-  "error": "Resource not found"
-}
-```
-
-**409 Conflict** - Resource already exists
-```json
-{
-  "error": "Resource already exists"
-}
-```
-
-**500 Internal Server Error** - Server error
-```json
-{
-  "error": "Error message"
-}
-```
+- Colors are automatically converted from hex strings to RGB tuples
+- Color order reordering happens automatically based on device settings
+- Step counter wraps around (0-255 for rainbow, unbounded for others)
+- Manual mode patterns stop after one step/cycle, waiting for next beat
+- Auto mode patterns run continuously until changed

flash.sh

@@ -0,0 +1,244 @@
+#!/usr/bin/env sh
+set -eu
+
+# Environment variables:
+#   PORT   - serial port (default: /dev/ttyUSB0)
+#   BAUD   - baud rate (default: 460800)
+#   FIRMWARE - local path to firmware .bin
+#   FW_URL  - URL to download firmware if FIRMWARE not provided or missing
+
+PORT=${PORT:-}
+BAUD=${BAUD:-460800}
+CHIP=${CHIP:-esp32} # esp32 | esp32c3
+
+# Map chip-specific settings
+ESPT_CHIP="$CHIP"
+FLASH_OFFSET=0x1000
+DEFAULT_DOWNLOAD_PAGE="https://micropython.org/download/ESP32/"
+BOARD_ID="ESP32_GENERIC"
+BOARD_PAGE="https://micropython.org/download/${BOARD_ID}/"
+case "$CHIP" in
+  esp32c3)
+    ESPT_CHIP="esp32c3"
+    FLASH_OFFSET=0x0
+    DEFAULT_DOWNLOAD_PAGE="https://micropython.org/download/ESP32C3/"
+    BOARD_ID="ESP32_GENERIC_C3"
+    BOARD_PAGE="https://micropython.org/download/${BOARD_ID}/"
+    ;;
+  esp32)
+    ESPT_CHIP="esp32"
+    FLASH_OFFSET=0x1000
+    DEFAULT_DOWNLOAD_PAGE="https://micropython.org/download/ESP32/"
+    BOARD_ID="ESP32_GENERIC"
+    BOARD_PAGE="https://micropython.org/download/${BOARD_ID}/"
+    ;;
+  *)
+    echo "Unsupported CHIP: $CHIP (supported: esp32, esp32c3)" >&2
+    exit 1
+    ;;
+esac
+
+# Download-only mode: fetch the appropriate firmware and exit
+if [ -n "${DOWNLOAD_ONLY:-}" ]; then
+  # Prefer resolving latest if nothing provided
+  if [ -z "${FIRMWARE:-}" ] && [ -z "${FW_URL:-}" ]; then
+    LATEST=1
+  fi
+  if ! resolve_firmware; then
+    echo "Failed to resolve firmware for CHIP=$CHIP" >&2
+    exit 1
+  fi
+  echo "$FIRMWARE"
+  exit 0
+fi
+
+# Helper: resolve the latest firmware URL for a given board pattern with multiple fallbacks
+resolve_latest_url() {
+  board_pattern="$1" # e.g., ESP32_GENERIC_C3-.*\.bin
+  # Candidate pages to try in order
+  pages="${BOARD_PAGE} ${DOWNLOAD_PAGE:-$DEFAULT_DOWNLOAD_PAGE} https://micropython.org/download/ https://micropython.org/resources/firmware/"
+  for page in $pages; do
+    echo "Trying to resolve latest from $page" >&2
+    html=$(curl -fsSL -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36' -e 'https://micropython.org/download/' "$page" || true)
+    [ -z "$html" ] && continue
+    # Prefer matching the board pattern
+    url=$(printf "%s" "$html" \
+      | sed -n 's/.*href=\"\([^\"]*\.bin\)\".*/\1/p' \
+      | grep -E "$board_pattern" \
+      | head -n1)
+    if [ -n "$url" ]; then
+      case "$url" in
+        http*) echo "$url"; return 0 ;;
+        /*) echo "https://micropython.org$url"; return 0 ;;
+        *) echo "$page$url"; return 0 ;;
+      esac
+    fi
+  done
+  return 1
+}
+
+# If LATEST is set and neither FIRMWARE nor FW_URL are provided, auto-detect latest URL
+if [ -n "${LATEST:-}" ] && [ -z "${FIRMWARE:-}" ] && [ -z "${FW_URL:-}" ]; then
+  # Default board identifiers for each chip
+  case "$CHIP" in
+    esp32c3) BOARD_ID="ESP32_GENERIC_C3" ;;
+    esp32) BOARD_ID="ESP32_GENERIC" ;;
+    *) BOARD_ID="ESP32_GENERIC" ;;
+  esac
+  pattern="${BOARD_ID}-.*\\.bin"
+  echo "Resolving latest firmware for $BOARD_ID"
+  if FW_URL=$(resolve_latest_url "$pattern"); then
+    export FW_URL
+    echo "Latest firmware resolved to: $FW_URL"
+  else
+    echo "Failed to resolve latest firmware for pattern $pattern" >&2
+    exit 1
+  fi
+fi
+
+# Resolve firmware path, downloading if needed
+resolve_firmware() {
+  if [ -z "${FIRMWARE:-}" ]; then
+    if [ -n "${FW_URL:-}" ] || [ -n "${LATEST:-}" ]; then
+      # If FW_URL still unset, resolve latest using board-specific pattern
+      if [ -z "${FW_URL:-}" ]; then
+        case "$CHIP" in
+          esp32c3) BOARD_ID="ESP32_GENERIC_C3" ;;
+          esp32) BOARD_ID="ESP32_GENERIC" ;;
+          *) BOARD_ID="ESP32_GENERIC" ;;
+        esac
+        pattern="${BOARD_ID}-.*\\.bin"
+        echo "Resolving latest firmware for $BOARD_ID"
+        if ! FW_URL=$(resolve_latest_url "$pattern"); then
+          echo "Failed to resolve latest firmware for pattern $pattern" >&2
+          exit 1
+        fi
+      fi
+      mkdir -p .cache
+      FIRMWARE=".cache/$(basename "$FW_URL")"
+      if [ ! -f "$FIRMWARE" ]; then
+        echo "Downloading firmware from $FW_URL to $FIRMWARE"
+        curl -L --fail -o "$FIRMWARE" "$FW_URL"
+      else
+        echo "Firmware already downloaded at $FIRMWARE"
+      fi
+    else
+      # Default fallback: fetch latest using board-specific pattern
+      case "$CHIP" in
+        esp32c3) BOARD_ID="ESP32_GENERIC_C3" ;;
+        esp32) BOARD_ID="ESP32_GENERIC" ;;
+        *) BOARD_ID="ESP32_GENERIC" ;;
+      esac
+      pattern="${BOARD_ID}-.*\\.bin"
+      echo "No FIRMWARE or FW_URL specified. Auto-fetching latest for $BOARD_ID"
+      if ! FW_URL=$(resolve_latest_url "$pattern"); then
+        echo "Failed to resolve latest firmware for pattern $pattern" >&2
+        exit 1
+      fi
+      mkdir -p .cache
+      FIRMWARE=".cache/$(basename "$FW_URL")"
+      if [ ! -f "$FIRMWARE" ]; then
+        echo "Downloading firmware from $FW_URL to $FIRMWARE"
+        curl -L --fail -o "$FIRMWARE" "$FW_URL"
+      else
+        echo "Firmware already downloaded at $FIRMWARE"
+      fi
+    fi
+  else
+    if [ ! -f "$FIRMWARE" ]; then
+      if [ -n "${FW_URL:-}" ]; then
+        mkdir -p "$(dirname "$FIRMWARE")"
+        echo "Firmware not found at $FIRMWARE. Downloading from $FW_URL"
+        curl -L --fail -o "$FIRMWARE" "$FW_URL"
+      else
+        echo "Firmware file not found: $FIRMWARE. Provide FW_URL to download automatically." >&2
+        exit 1
+      fi
+    fi
+  fi
+}
+
+# Auto-detect PORT if not specified
+if [ -z "$PORT" ]; then
+  candidates="$(ls /dev/tty/ACM* /dev/tty/USB* 2>/dev/null || true)"
+  # Some systems expose without /dev/tty/ prefix patterns; try common Linux paths
+  [ -z "$candidates" ] && candidates="$(ls /dev/ttyACM* /dev/ttyUSB* 2>/dev/null || true)"
+  # Prefer ACM (often for C3) then USB
+  PORT=$(printf "%s\n" $candidates | grep -E "/dev/ttyACM[0-9]+" | head -n1 || true)
+  [ -z "$PORT" ] && PORT=$(printf "%s\n" $candidates | grep -E "/dev/ttyUSB[0-9]+" | head -n1 || true)
+  if [ -z "$PORT" ]; then
+    echo "No serial port detected. Connect the board and set PORT=/dev/ttyACM0 (or /dev/ttyUSB0)." >&2
+    exit 1
+  fi
+  echo "Auto-detected PORT=$PORT"
+fi
+
+# Preflight: ensure port exists
+if [ ! -e "$PORT" ]; then
+  echo "Port $PORT does not exist. Detected candidates:" >&2
+  ls /dev/ttyACM* /dev/ttyUSB* 2>/dev/null || true
+  exit 1
+fi
+
+ESPL="python -m esptool"
+
+detect_chip() {
+  # Try to detect actual connected chip using esptool and override if needed
+  out=$($ESPL --port "$PORT" --baud "$BAUD" chip_id 2>&1 || true)
+  case "$out" in
+    *"ESP32-C3"*) DETECTED_CHIP=esp32c3 ;;
+    *"ESP32"*) DETECTED_CHIP=esp32 ;;
+    *) DETECTED_CHIP="" ;;
+  esac
+  if [ -n "$DETECTED_CHIP" ] && [ "$DETECTED_CHIP" != "$ESPT_CHIP" ]; then
+    echo "Detected chip $DETECTED_CHIP differs from requested $ESPT_CHIP. Using detected chip."
+    ESPT_CHIP="$DETECTED_CHIP"
+    case "$ESPT_CHIP" in
+      esp32c3) FLASH_OFFSET=0x0 ;;
+      esp32) FLASH_OFFSET=0x1000 ;;
+    esac
+  fi
+}
+
+detect_chip
+
+# Now that we know the actual chip, resolve the correct firmware for it
+resolve_firmware
+
+# Validate firmware matches detected chip; if not, auto-correct by fetching the right image
+EXPECTED_BOARD_ID="ESP32_GENERIC"
+case "$ESPT_CHIP" in
+  esp32c3) EXPECTED_BOARD_ID="ESP32_GENERIC_C3" ;;
+  esp32) EXPECTED_BOARD_ID="ESP32_GENERIC" ;;
+
+esac
+
+FW_BASENAME="$(basename "$FIRMWARE")"
+case "$FW_BASENAME" in
+  ${EXPECTED_BOARD_ID}-*.bin) : ;; # ok
+  *)
+    echo "Firmware $FW_BASENAME does not match detected chip ($ESPT_CHIP). Fetching correct image for $EXPECTED_BOARD_ID..."
+    pattern="${EXPECTED_BOARD_ID}-.*\\.bin"
+    if ! FW_URL=$(resolve_latest_url "$pattern"); then
+      echo "Failed to resolve a firmware matching $EXPECTED_BOARD_ID" >&2
+      exit 1
+    fi
+    mkdir -p .cache
+    FIRMWARE=".cache/$(basename "$FW_URL")"
+    if [ ! -f "$FIRMWARE" ]; then
+      echo "Downloading firmware from $FW_URL to $FIRMWARE"
+      curl -L --fail -o "$FIRMWARE" "$FW_URL"
+    else
+      echo "Firmware already downloaded at $FIRMWARE"
+    fi
+    ;;
+esac
+
+$ESPL --chip "$ESPT_CHIP" --port "$PORT" --baud "$BAUD" erase_flash
+
+echo "Writing firmware $FIRMWARE to $FLASH_OFFSET..."
+$ESPL --chip "$ESPT_CHIP" --port "$PORT" --baud "$BAUD" write_flash -z "$FLASH_OFFSET" "$FIRMWARE"
+
+echo "Done."
+
+

install.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+# Install script - runs pipenv install
+
+pipenv install "$@"

lib/microdot/session.py

@@ -0,0 +1,225 @@
+try:
+    import jwt
+    HAS_JWT = True
+except ImportError:
+    HAS_JWT = False
+    try:
+        import ubinascii
+    except ImportError:
+        import binascii as ubinascii
+    try:
+        import uhashlib as hashlib
+    except ImportError:
+        import hashlib
+    try:
+        import uhmac as hmac
+    except ImportError:
+        try:
+            import hmac
+        except ImportError:
+            hmac = None
+    import json
+
+from microdot.microdot import invoke_handler
+from microdot.helpers import wraps
+
+
+class SessionDict(dict):
+    """A session dictionary.
+
+    The session dictionary is a standard Python dictionary that has been
+    extended with convenience ``save()`` and ``delete()`` methods.
+    """
+    def __init__(self, request, session_dict):
+        super().__init__(session_dict)
+        self.request = request
+
+    def save(self):
+        """Update the session cookie."""
+        self.request.app._session.update(self.request, self)
+
+    def delete(self):
+        """Delete the session cookie."""
+        self.request.app._session.delete(self.request)
+
+
+class Session:
+    """Session handling
+
+    :param app: The application instance.
+    :param secret_key: The secret key, as a string or bytes object.
+    :param cookie_options: A dictionary with cookie options to pass as
+                           arguments to :meth:`Response.set_cookie()
+                           <microdot.Response.set_cookie>`.
+    """
+    secret_key = None
+
+    def __init__(self, app=None, secret_key=None, cookie_options=None):
+        self.secret_key = secret_key
+        self.cookie_options = cookie_options or {}
+        if app is not None:
+            self.initialize(app)
+
+    def initialize(self, app, secret_key=None, cookie_options=None):
+        if secret_key is not None:
+            self.secret_key = secret_key
+        if cookie_options is not None:
+            self.cookie_options = cookie_options
+        if 'path' not in self.cookie_options:
+            self.cookie_options['path'] = '/'
+        if 'http_only' not in self.cookie_options:
+            self.cookie_options['http_only'] = True
+        app._session = self
+
+    def get(self, request):
+        """Retrieve the user session.
+
+        :param request: The client request.
+
+        The return value is a session dictionary with the data stored in the
+        user's session, or ``{}`` if the session data is not available or
+        invalid.
+        """
+        if not self.secret_key:
+            raise ValueError('The session secret key is not configured')
+        if hasattr(request.g, '_session'):
+            return request.g._session
+        session = request.cookies.get('session')
+        if session is None:
+            request.g._session = SessionDict(request, {})
+            return request.g._session
+        request.g._session = SessionDict(request, self.decode(session))
+        return request.g._session
+
+    def update(self, request, session):
+        """Update the user session.
+
+        :param request: The client request.
+        :param session: A dictionary with the update session data for the user.
+
+        Applications would normally not call this method directly, instead they
+        would use the :meth:`SessionDict.save` method on the session
+        dictionary, which calls this method. For example::
+
+            @app.route('/')
+            @with_session
+            def index(request, session):
+                session['foo'] = 'bar'
+                session.save()
+                return 'Hello, World!'
+
+        Calling this method adds a cookie with the updated session to the
+        request currently being processed.
+        """
+        if not self.secret_key:
+            raise ValueError('The session secret key is not configured')
+
+        encoded_session = self.encode(session)
+
+        @request.after_request
+        def _update_session(request, response):
+            response.set_cookie('session', encoded_session,
+                                **self.cookie_options)
+            return response
+
+    def delete(self, request):
+        """Remove the user session.
+
+        :param request: The client request.
+
+        Applications would normally not call this method directly, instead they
+        would use the :meth:`SessionDict.delete` method on the session
+        dictionary, which calls this method. For example::
+
+            @app.route('/')
+            @with_session
+            def index(request, session):
+                session.delete()
+                return 'Hello, World!'
+
+        Calling this method adds a cookie removal header to the request
+        currently being processed.
+        """
+        @request.after_request
+        def _delete_session(request, response):
+            response.delete_cookie('session', **self.cookie_options)
+            return response
+
+    def encode(self, payload, secret_key=None):
+        """Encode session data using JWT if available, otherwise use simple HMAC."""
+        if HAS_JWT:
+            return jwt.encode(payload, secret_key or self.secret_key,
+                              algorithm='HS256')
+        else:
+            # Simple encoding for MicroPython: base64(json) + HMAC signature
+            key = (secret_key or self.secret_key).encode() if isinstance(secret_key or self.secret_key, str) else (secret_key or self.secret_key)
+            payload_json = json.dumps(payload)
+            payload_b64 = ubinascii.b2a_base64(payload_json.encode()).decode().strip()
+            
+            # Create HMAC signature
+            if hmac:
+                # Use hmac module if available
+                h = hmac.new(key, payload_json.encode(), hashlib.sha256)
+            else:
+                # Fallback: simple SHA256(key + message)
+                h = hashlib.sha256(key + payload_json.encode())
+            signature = ubinascii.b2a_base64(h.digest()).decode().strip()
+            
+            return f"{payload_b64}.{signature}"
+
+    def decode(self, session, secret_key=None):
+        """Decode session data using JWT if available, otherwise use simple HMAC."""
+        if HAS_JWT:
+            try:
+                payload = jwt.decode(session, secret_key or self.secret_key,
+                                     algorithms=['HS256'])
+            except jwt.exceptions.PyJWTError:  # pragma: no cover
+                return {}
+            return payload
+        else:
+            try:
+                # Simple decoding for MicroPython
+                if '.' not in session:
+                    return {}
+                
+                payload_b64, signature = session.rsplit('.', 1)
+                payload_json = ubinascii.a2b_base64(payload_b64).decode()
+                
+                # Verify HMAC signature
+                key = (secret_key or self.secret_key).encode() if isinstance(secret_key or self.secret_key, str) else (secret_key or self.secret_key)
+                if hmac:
+                    # Use hmac module if available
+                    h = hmac.new(key, payload_json.encode(), hashlib.sha256)
+                else:
+                    # Fallback: simple SHA256(key + message)
+                    h = hashlib.sha256(key + payload_json.encode())
+                expected_signature = ubinascii.b2a_base64(h.digest()).decode().strip()
+                
+                if signature != expected_signature:
+                    return {}
+                
+                return json.loads(payload_json)
+            except Exception:
+                return {}
+
+
+def with_session(f):
+    """Decorator that passes the user session to the route handler.
+
+    The session dictionary is passed to the decorated function as an argument
+    after the request object. Example::
+
+        @app.route('/')
+        @with_session
+        def index(request, session):
+            return 'Hello, World!'
+
+    Note that the decorator does not save the session. To update the session,
+    call the :func:`session.save() <microdot.session.SessionDict.save>` method.
+    """
+    @wraps(f)
+    async def wrapper(request, *args, **kwargs):
+        return await invoke_handler(
+            f, request, request.app._session.get(request), *args, **kwargs)
+
+    return wrapper

msg.json

@@ -0,0 +1,23 @@
+{
+    "g":{ 
+        "df": {
+            "pt": "on",
+            "cl": ["#ff0000"],
+            "br": 200,
+            "n1": 10,
+            "n2": 10,
+            "n3": 10,
+            "n4": 10,
+            "n5": 10,
+            "n6": 10,
+            "dl": 100
+        },
+        "dj": {
+            "pt": "blink",
+            "cl": ["#00ff00"],
+            "dl": 500
+        }
+    },
+    "sv": true,
+    "st": 0
+}

run_web.py

@@ -0,0 +1,173 @@
+#!/usr/bin/env python3
+"""
+Local development web server - imports and runs main.py with port 5000
+"""
+
+import sys
+import os
+import asyncio
+
+# Add src and lib to path
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), 'src'))
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), 'lib'))
+
+# Import the main module
+from src import main as main_module
+
+# Override the port in the main function
+async def run_local():
+    """Run main with port 5000 for local development."""
+    from settings import Settings
+    import gc
+    
+    # Mock MicroPython modules for local development
+    class MockMachine:
+        class WDT:
+            def __init__(self, timeout):
+                pass
+            def feed(self):
+                pass
+    import sys as sys_module
+    sys_module.modules['machine'] = MockMachine()
+    
+    class MockESPNow:
+        def __init__(self):
+            self.active_value = False
+            self.peers = []
+        def active(self, value):
+            self.active_value = value
+            print(f"[MOCK] ESPNow active: {value}")
+        def add_peer(self, peer):
+            self.peers.append(peer)
+            print(f"[MOCK] Added peer: {peer.hex() if hasattr(peer, 'hex') else peer}")
+        async def asend(self, peer, data):
+            print(f"[MOCK] Would send to {peer.hex() if hasattr(peer, 'hex') else peer}: {data}")
+    
+    class MockAIOESPNow:
+        def __init__(self):
+            pass
+        def active(self, value):
+            return MockESPNow()
+        def add_peer(self, peer):
+            pass
+    
+    class MockNetwork:
+        class WLAN:
+            def __init__(self, interface):
+                self.interface = interface
+            def active(self, value):
+                print(f"[MOCK] WLAN({self.interface}) active: {value}")
+        STA_IF = 0
+    
+    # Replace MicroPython modules with mocks
+    sys_module.modules['aioespnow'] = type('module', (), {'AIOESPNow': MockESPNow})()
+    sys_module.modules['network'] = MockNetwork()
+    
+    # Mock gc if needed
+    if not hasattr(gc, 'collect'):
+        class MockGC:
+            def collect(self):
+                pass
+        gc = MockGC()
+    
+    settings = Settings()
+    print("Starting LED Controller Web Server (Local Development)")
+    print("=" * 60)
+    
+    # Mock network
+    import network
+    network.WLAN(network.STA_IF).active(True)
+    
+    # Mock ESPNow
+    import aioespnow
+    e = aioespnow.AIOESPNow()
+    e.active(True)
+    e.add_peer(b"\xbb\xbb\xbb\xbb\xbb\xbb")
+    
+    from microdot import Microdot, send_file
+    from microdot.websocket import with_websocket
+    
+    from microdot.session import Session
+    
+    import controllers.preset as preset
+    import controllers.profile as profile
+    import controllers.group as group
+    import controllers.sequence as sequence
+    import controllers.tab as tab
+    import controllers.palette as palette
+    import controllers.scene as scene
+    import controllers.pattern as pattern
+    import controllers.settings as settings_controller
+    
+    app = Microdot()
+    
+    # Initialize sessions with a secret key from settings
+    secret_key = settings.get('session_secret_key', 'led-controller-secret-key-change-in-production')
+    Session(app, secret_key=secret_key)
+    
+    # Mount model controllers as subroutes
+    app.mount(preset.controller, '/presets')
+    app.mount(profile.controller, '/profiles')
+    app.mount(group.controller, '/groups')
+    app.mount(sequence.controller, '/sequences')
+    app.mount(tab.controller, '/tabs')
+    app.mount(palette.controller, '/palettes')
+    app.mount(scene.controller, '/scenes')
+    app.mount(pattern.controller, '/patterns')
+    app.mount(settings_controller.controller, '/settings')
+    
+    # Serve index.html at root
+    @app.route('/')
+    def index(request):
+        """Serve the main web UI."""
+        return send_file('src/templates/index.html')
+    
+    # Serve settings page
+    @app.route('/settings')
+    def settings_page(request):
+        """Serve the settings page."""
+        return send_file('src/templates/settings.html')
+    
+    # Favicon: avoid 404 in browser console (no file needed)
+    @app.route('/favicon.ico')
+    def favicon(request):
+        return '', 204
+    
+    # Static file route
+    @app.route("/static/<path:path>")
+    def static_handler(request, path):
+        """Serve static files."""
+        if '..' in path:
+            return 'Not found', 404
+        return send_file('src/static/' + path)
+    
+    @app.route('/ws')
+    @with_websocket
+    async def ws(request, ws):
+        while True:
+            data = await ws.receive()
+            if data:
+                await e.asend(b"\xbb\xbb\xbb\xbb\xbb\xbb", data)
+                print(data)
+            else:
+                break
+    
+    # Use port 5000 for local development
+    port = 5000
+    print(f"Starting server on http://0.0.0.0:{port}")
+    print(f"Open http://localhost:{port} in your browser")
+    print("=" * 60)
+    
+    try:
+        await app.start_server(host="0.0.0.0", port=port, debug=True)
+    except KeyboardInterrupt:
+        print("\nShutting down server...")
+
+if __name__ == '__main__':
+    # Change to project root
+    os.chdir(os.path.dirname(os.path.abspath(__file__)))
+    # Override settings path for local development
+    import settings as settings_module
+    settings_module.Settings.SETTINGS_FILE = os.path.join(os.getcwd(), 'settings.json')
+    
+    asyncio.run(run_local())

send_empty_json.py

@@ -0,0 +1,44 @@
+#!/usr/bin/env python3
+import socket
+import struct
+import base64
+import hashlib
+
+# Connect to the WebSocket
+s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
+s.connect(('192.168.4.1', 80))
+
+# Send HTTP WebSocket upgrade request
+key = base64.b64encode(b'test-nonce').decode('utf-8')
+request = f'''GET /ws HTTP/1.1\r
+Host: 192.168.4.1\r
+Upgrade: websocket\r
+Connection: Upgrade\r
+Sec-WebSocket-Key: {key}\r
+Sec-WebSocket-Version: 13\r
+\r
+'''
+s.send(request.encode())
+
+# Read upgrade response
+response = s.recv(4096)
+print(response.decode())
+
+# Send WebSocket TEXT frame with empty JSON '{}'
+payload = b'{}'
+mask = b'\x12\x34\x56\x78'
+payload_masked = bytes(p ^ mask[i % 4] for i, p in enumerate(payload))
+
+frame = struct.pack('BB', 0x81, 0x80 | len(payload))
+frame += mask
+frame += payload_masked
+
+s.send(frame)
+print("Sent empty JSON to WebSocket")
+s.close()
+
+
+
+
+
+

settings.json

@@ -0,0 +1 @@
+{"session_secret_key": "06a2a6ac631cc8db0658373b37f7fe922a8a3ed3a27229e1adb5448cb368f2b7"}

src/boot.py

@@ -1,8 +1,8 @@
 import settings
-import wifi
+import util.wifi as wifi
 from settings import Settings
 
 s = Settings()
 
-name = s.get('name', 'led')
+name = s.get('name', 'led-controller')
 wifi.ap(name, '')

src/controllers/__init__.py

@@ -0,0 +1 @@
+# Controllers package

src/controllers/palette.py

@@ -8,14 +8,18 @@ palettes = Palette()
 @controller.get('')
 async def list_palettes(request):
     """List all palettes."""
-    return json.dumps(palettes), 200, {'Content-Type': 'application/json'}
+    data = {}
+    for pid in palettes.list():
+        colors = palettes.read(pid)
+        data[pid] = colors
+    return json.dumps(data), 200, {'Content-Type': 'application/json'}
 
 @controller.get('/<id>')
 async def get_palette(request, id):
     """Get a specific palette by ID."""
     palette = palettes.read(id)
     if palette:
-        return json.dumps(palette), 200, {'Content-Type': 'application/json'}
+        return json.dumps({"colors": palette, "id": str(id)}), 200, {'Content-Type': 'application/json'}
     return json.dumps({"error": "Palette not found"}), 404
 
 @controller.post('')
@@ -23,12 +27,14 @@ async def create_palette(request):
     """Create a new palette."""
     try:
         data = request.json or {}
-        name = data.get("name", "")
         colors = data.get("colors", None)
-        palette_id = palettes.create(name, colors)
-        if data:
-            palettes.update(palette_id, data)
-        return json.dumps(palettes.read(palette_id)), 201, {'Content-Type': 'application/json'}
+        # Palette no longer needs a name; only colors are stored.
+        palette_id = palettes.create("", colors)
+        palette = palettes.read(palette_id) or {}
+        # Include the ID in the response payload so clients can link it.
+        palette_with_id = {"id": str(palette_id)}
+        palette_with_id.update(palette)
+        return json.dumps(palette_with_id), 201, {'Content-Type': 'application/json'}
     except Exception as e:
         return json.dumps({"error": str(e)}), 400
 
@@ -36,9 +42,15 @@ async def create_palette(request):
 async def update_palette(request, id):
     """Update an existing palette."""
     try:
-        data = request.json
+        data = request.json or {}
+        # Ignore any name field; only colors are relevant.
+        if "name" in data:
+            data.pop("name", None)
         if palettes.update(id, data):
-            return json.dumps(palettes.read(id)), 200, {'Content-Type': 'application/json'}
+            palette = palettes.read(id) or {}
+            palette_with_id = {"id": str(id)}
+            palette_with_id.update(palette)
+            return json.dumps(palette_with_id), 200, {'Content-Type': 'application/json'}
         return json.dumps({"error": "Palette not found"}), 404
     except Exception as e:
         return json.dumps({"error": str(e)}), 400

src/controllers/pattern.py

@@ -0,0 +1,77 @@
+from microdot import Microdot
+from models.pattern import Pattern
+import json
+import sys
+
+controller = Microdot()
+patterns = Pattern()
+
+def load_pattern_definitions():
+    """Load pattern definitions from pattern.json file."""
+    try:
+        # Try different paths for local development vs MicroPython
+        paths = ['db/pattern.json', 'pattern.json', '/db/pattern.json']
+        for path in paths:
+            try:
+                with open(path, 'r') as f:
+                    return json.load(f)
+            except OSError:
+                continue
+        return {}
+    except Exception as e:
+        print(f"Error loading pattern.json: {e}")
+        return {}
+
+@controller.get('/definitions')
+async def get_pattern_definitions(request):
+    """Get pattern definitions from pattern.json."""
+    definitions = load_pattern_definitions()
+    return json.dumps(definitions), 200, {'Content-Type': 'application/json'}
+
+@controller.get('')
+async def list_patterns(request):
+    """List all patterns."""
+    return json.dumps(patterns), 200, {'Content-Type': 'application/json'}
+
+
+@controller.get('/<id>')
+async def get_pattern(request, id):
+    """Get a specific pattern by ID."""
+    pattern = patterns.read(id)
+    if pattern is not None:
+        return json.dumps(pattern), 200, {'Content-Type': 'application/json'}
+    return json.dumps({"error": "Pattern not found"}), 404
+
+
+@controller.post('')
+async def create_pattern(request):
+    """Create a new pattern."""
+    try:
+        data = request.json or {}
+        name = data.get("name", "")
+        pattern_id = patterns.create(name, data.get("data", {}))
+        if data:
+            patterns.update(pattern_id, data)
+        return json.dumps(patterns.read(pattern_id)), 201, {'Content-Type': 'application/json'}
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+
+@controller.put('/<id>')
+async def update_pattern(request, id):
+    """Update an existing pattern."""
+    try:
+        data = request.json
+        if patterns.update(id, data):
+            return json.dumps(patterns.read(id)), 200, {'Content-Type': 'application/json'}
+        return json.dumps({"error": "Pattern not found"}), 404
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+
+@controller.delete('/<id>')
+async def delete_pattern(request, id):
+    """Delete a pattern."""
+    if patterns.delete(id):
+        return json.dumps({"message": "Pattern deleted successfully"}), 200
+    return json.dumps({"error": "Pattern not found"}), 404

src/controllers/preset.py

@@ -1,40 +1,92 @@
 from microdot import Microdot
+from microdot.session import with_session
 from models.preset import Preset
+from models.profile import Profile
+from models.espnow import ESPNow
+from util.espnow_message import build_message, build_preset_dict, ESPNOW_MAX_PAYLOAD_BYTES
+import asyncio
 import json
 
 controller = Microdot()
 presets = Preset()
+profiles = Profile()
+
+def get_current_profile_id(session=None):
+    """Get the current active profile ID from session or fallback to first."""
+    profile_list = profiles.list()
+    session_profile = None
+    if session is not None:
+        session_profile = session.get('current_profile')
+    if session_profile and session_profile in profile_list:
+        return session_profile
+    if profile_list:
+        return profile_list[0]
+    return None
 
 @controller.get('')
-async def list_presets(request):
-    """List all presets."""
-    return json.dumps(presets), 200, {'Content-Type': 'application/json'}
+@with_session
+async def list_presets(request, session):
+    """List presets for the current profile."""
+    current_profile_id = get_current_profile_id(session)
+    if not current_profile_id:
+        return json.dumps({}), 200, {'Content-Type': 'application/json'}
+    scoped = {
+        pid: pdata for pid, pdata in presets.items()
+        if isinstance(pdata, dict) and str(pdata.get("profile_id")) == str(current_profile_id)
+    }
+    return json.dumps(scoped), 200, {'Content-Type': 'application/json'}
 
 @controller.get('/<id>')
-async def get_preset(request, id):
-    """Get a specific preset by ID."""
+@with_session
+async def get_preset(request, id, session):
+    """Get a specific preset by ID (current profile only)."""
     preset = presets.read(id)
-    if preset:
+    current_profile_id = get_current_profile_id(session)
+    if preset and str(preset.get("profile_id")) == str(current_profile_id):
         return json.dumps(preset), 200, {'Content-Type': 'application/json'}
     return json.dumps({"error": "Preset not found"}), 404
 
 @controller.post('')
-async def create_preset(request):
-    """Create a new preset."""
+@with_session
+async def create_preset(request, session):
+    """Create a new preset for the current profile."""
     try:
-        data = request.json
-        preset_id = presets.create()
+        try:
+            data = request.json or {}
+        except Exception:
+            return json.dumps({"error": "Invalid JSON"}), 400, {'Content-Type': 'application/json'}
+        current_profile_id = get_current_profile_id(session)
+        if not current_profile_id:
+            return json.dumps({"error": "No profile available"}), 404
+        preset_id = presets.create(current_profile_id)
+        if not isinstance(data, dict):
+            data = {}
+        data = dict(data)
+        data["profile_id"] = str(current_profile_id)
         if presets.update(preset_id, data):
-            return json.dumps(presets.read(preset_id)), 201, {'Content-Type': 'application/json'}
+            preset_data = presets.read(preset_id)
+            return json.dumps({preset_id: preset_data}), 201, {'Content-Type': 'application/json'}
         return json.dumps({"error": "Failed to create preset"}), 400
     except Exception as e:
         return json.dumps({"error": str(e)}), 400
 
 @controller.put('/<id>')
-async def update_preset(request, id):
-    """Update an existing preset."""
+@with_session
+async def update_preset(request, id, session):
+    """Update an existing preset (current profile only)."""
     try:
-        data = request.json
+        preset = presets.read(id)
+        current_profile_id = get_current_profile_id(session)
+        if not preset or str(preset.get("profile_id")) != str(current_profile_id):
+            return json.dumps({"error": "Preset not found"}), 404
+        try:
+            data = request.json or {}
+        except Exception:
+            return json.dumps({"error": "Invalid JSON"}), 400, {'Content-Type': 'application/json'}
+        if not isinstance(data, dict):
+            data = {}
+        data = dict(data)
+        data["profile_id"] = str(current_profile_id)
         if presets.update(id, data):
             return json.dumps(presets.read(id)), 200, {'Content-Type': 'application/json'}
         return json.dumps({"error": "Preset not found"}), 404
@@ -42,8 +94,111 @@ async def update_preset(request, id):
         return json.dumps({"error": str(e)}), 400
 
 @controller.delete('/<id>')
-async def delete_preset(request, id):
-    """Delete a preset."""
+@with_session
+async def delete_preset(request, id, session):
+    """Delete a preset (current profile only)."""
+    preset = presets.read(id)
+    current_profile_id = get_current_profile_id(session)
+    if not preset or str(preset.get("profile_id")) != str(current_profile_id):
+        return json.dumps({"error": "Preset not found"}), 404
     if presets.delete(id):
         return json.dumps({"message": "Preset deleted successfully"}), 200
     return json.dumps({"error": "Preset not found"}), 404
+
+
+@controller.post('/send')
+@with_session
+async def send_presets(request, session):
+    """
+    Send one or more presets over ESPNow.
+
+    Body JSON:
+        {"preset_ids": ["1", "2", ...]}  or  {"ids": ["1", "2", ...]}
+
+    The controller:
+      - looks up each preset in the Preset model
+      - converts them to API-compliant format
+      - splits into <= 240-byte ESPNow messages
+      - sends each message to all configured ESPNow peers.
+    """
+    try:
+        data = request.json or {}
+    except Exception:
+        return json.dumps({"error": "Invalid JSON"}), 400, {'Content-Type': 'application/json'}
+
+    preset_ids = data.get('preset_ids') or data.get('ids')
+    if not isinstance(preset_ids, list) or not preset_ids:
+        return json.dumps({"error": "preset_ids must be a non-empty list"}), 400, {'Content-Type': 'application/json'}
+    save_flag = data.get('save', True)
+    save_flag = bool(save_flag)
+    default_id = data.get('default')
+
+    # Build API-compliant preset map keyed by preset ID, include name
+    current_profile_id = get_current_profile_id(session)
+    presets_by_name = {}
+    for pid in preset_ids:
+        preset_data = presets.read(str(pid))
+        if not preset_data:
+            continue
+        if str(preset_data.get("profile_id")) != str(current_profile_id):
+            continue
+        preset_key = str(pid)
+        preset_payload = build_preset_dict(preset_data)
+        preset_payload["name"] = preset_data.get("name", "")
+        presets_by_name[preset_key] = preset_payload
+
+    if not presets_by_name:
+        return json.dumps({"error": "No matching presets found"}), 404, {'Content-Type': 'application/json'}
+
+    if default_id is not None and str(default_id) not in presets_by_name:
+        default_id = None
+
+    # Use shared ESPNow singleton
+    esp = ESPNow()
+
+    async def send_chunk(chunk_presets):
+        # Include save flag so the led-driver can persist when desired.
+        msg = build_message(presets=chunk_presets, save=save_flag, default=default_id)
+        await esp.send(msg)
+
+    MAX_BYTES = ESPNOW_MAX_PAYLOAD_BYTES
+    SEND_DELAY_MS = 100
+    entries = list(presets_by_name.items())
+    total_presets = len(entries)
+    messages_sent = 0
+
+    batch = {}
+    last_msg = None
+    for name, preset_obj in entries:
+        test_batch = dict(batch)
+        test_batch[name] = preset_obj
+        test_msg = build_message(presets=test_batch, save=save_flag, default=default_id)
+        size = len(test_msg)
+
+        if size <= MAX_BYTES or not batch:
+            batch = test_batch
+            last_msg = test_msg
+        else:
+            try:
+                await send_chunk(batch)
+            except Exception:
+                return json.dumps({"error": "ESP-NOW send failed"}), 503, {'Content-Type': 'application/json'}
+            await asyncio.sleep_ms(SEND_DELAY_MS)
+            messages_sent += 1
+            batch = {name: preset_obj}
+            last_msg = build_message(presets=batch, save=save_flag, default=default_id)
+
+    if batch:
+        try:
+            await send_chunk(batch)
+        except Exception:
+            return json.dumps({"error": "ESP-NOW send failed"}), 503, {'Content-Type': 'application/json'}
+        await asyncio.sleep_ms(SEND_DELAY_MS)
+        messages_sent += 1
+
+    return json.dumps({
+        "message": "Presets sent via ESPNow",
+        "presets_sent": total_presets,
+        "messages_sent": messages_sent
+    }), 200, {'Content-Type': 'application/json'}
+

src/controllers/profile.py

@@ -1,23 +1,82 @@
 from microdot import Microdot
+from microdot.session import with_session
 from models.profile import Profile
+from models.tab import Tab
+from models.preset import Preset
 import json
 
 controller = Microdot()
 profiles = Profile()
+tabs = Tab()
+presets = Preset()
 
 @controller.get('')
-async def list_profiles(request):
-    """List all profiles."""
-    return json.dumps(profiles), 200, {'Content-Type': 'application/json'}
+@with_session
+async def list_profiles(request, session):
+    """List all profiles with current profile info."""
+    profile_list = profiles.list()
+    current_id = session.get('current_profile')
+    if current_id and current_id not in profile_list:
+        current_id = None
+    
+    # If no current profile in session, use first one
+    if not current_id and profile_list:
+        current_id = profile_list[0]
+        session['current_profile'] = str(current_id)
+        session.save()
+    
+    # Build profiles object
+    profiles_data = {}
+    for profile_id in profile_list:
+        profile_data = profiles.read(profile_id)
+        if profile_data:
+            profiles_data[profile_id] = profile_data
+    
+    return json.dumps({
+        "profiles": profiles_data,
+        "current_profile_id": current_id
+    }), 200, {'Content-Type': 'application/json'}
+
+@controller.get('/current')
+@with_session
+async def get_current_profile(request, session):
+    """Get the current profile ID from session (or fallback)."""
+    profile_list = profiles.list()
+    current_id = session.get('current_profile')
+    if current_id and current_id not in profile_list:
+        current_id = None
+    if not current_id and profile_list:
+        current_id = profile_list[0]
+        session['current_profile'] = str(current_id)
+        session.save()
+    if current_id:
+        profile = profiles.read(current_id)
+        return json.dumps({"id": current_id, "profile": profile}), 200, {'Content-Type': 'application/json'}
+    return json.dumps({"error": "No profile available"}), 404
 
 @controller.get('/<id>')
-async def get_profile(request, id):
+@with_session
+async def get_profile(request, id, session):
     """Get a specific profile by ID."""
+    # Handle 'current' as a special case
+    if id == 'current':
+        return await get_current_profile(request, session)
+    
     profile = profiles.read(id)
     if profile:
         return json.dumps(profile), 200, {'Content-Type': 'application/json'}
     return json.dumps({"error": "Profile not found"}), 404
 
+@controller.post('/<id>/apply')
+@with_session
+async def apply_profile(request, session, id):
+    """Apply a profile by saving it to session."""
+    if not profiles.read(id):
+        return json.dumps({"error": "Profile not found"}), 404
+    session['current_profile'] = str(id)
+    session.save()
+    return json.dumps({"message": "Profile applied", "id": str(id)}), 200, {'Content-Type': 'application/json'}
+
 @controller.post('')
 async def create_profile(request):
     """Create a new profile."""
@@ -27,7 +86,140 @@ async def create_profile(request):
         profile_id = profiles.create(name)
         if data:
             profiles.update(profile_id, data)
-        return json.dumps(profiles.read(profile_id)), 201, {'Content-Type': 'application/json'}
+        profile_data = profiles.read(profile_id)
+        return json.dumps({profile_id: profile_data}), 201, {'Content-Type': 'application/json'}
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.post('/<id>/clone')
+async def clone_profile(request, id):
+    """Clone an existing profile along with its tabs and palette."""
+    try:
+        source = profiles.read(id)
+        if not source:
+            return json.dumps({"error": "Profile not found"}), 404
+
+        data = request.json or {}
+        source_name = source.get("name") or f"Profile {id}"
+        new_name = data.get("name") or source_name
+        profile_type = source.get("type", "tabs")
+
+        def allocate_id(model, cache):
+            if "next" not in cache:
+                max_id = max((int(k) for k in model.keys() if str(k).isdigit()), default=0)
+                cache["next"] = max_id + 1
+            next_id = str(cache["next"])
+            cache["next"] += 1
+            return next_id
+
+        def map_preset_container(value, id_map, preset_cache, new_profile_id, new_presets):
+            if isinstance(value, list):
+                return [map_preset_container(v, id_map, preset_cache, new_profile_id, new_presets) for v in value]
+            if value is None:
+                return None
+            preset_id = str(value)
+            if preset_id in id_map:
+                return id_map[preset_id]
+            preset_data = presets.read(preset_id)
+            if not preset_data:
+                return None
+            new_preset_id = allocate_id(presets, preset_cache)
+            clone_data = dict(preset_data)
+            clone_data["profile_id"] = str(new_profile_id)
+            new_presets[new_preset_id] = clone_data
+            id_map[preset_id] = new_preset_id
+            return new_preset_id
+
+        # Prepare new IDs without writing until everything is ready.
+        profile_cache = {}
+        palette_cache = {}
+        tab_cache = {}
+        preset_cache = {}
+
+        new_profile_id = allocate_id(profiles, profile_cache)
+        new_palette_id = allocate_id(profiles._palette_model, palette_cache)
+
+        # Clone palette colors into the new profile's palette
+        src_palette_id = source.get("palette_id")
+        palette_colors = []
+        if src_palette_id:
+            try:
+                palette_colors = profiles._palette_model.read(src_palette_id)
+            except Exception:
+                palette_colors = []
+
+        # Clone tabs and presets used by those tabs
+        source_tabs = source.get("tabs")
+        if not isinstance(source_tabs, list) or len(source_tabs) == 0:
+            source_tabs = source.get("tab_order", [])
+        source_tabs = source_tabs or []
+        cloned_tab_ids = []
+        preset_id_map = {}
+        new_tabs = {}
+        new_presets = {}
+        for tab_id in source_tabs:
+            tab = tabs.read(tab_id)
+            if not tab:
+                continue
+            tab_name = tab.get("name") or f"Tab {tab_id}"
+            clone_name = tab_name
+            mapped_presets = map_preset_container(tab.get("presets"), preset_id_map, preset_cache, new_profile_id, new_presets)
+            clone_id = allocate_id(tabs, tab_cache)
+            clone_data = {
+                "name": clone_name,
+                "names": tab.get("names") or [],
+                "presets": mapped_presets if mapped_presets is not None else []
+            }
+            extra = {k: v for k, v in tab.items() if k not in ("name", "names", "presets")}
+            if "presets_flat" in extra:
+                extra["presets_flat"] = map_preset_container(extra.get("presets_flat"), preset_id_map, preset_cache, new_profile_id, new_presets)
+            if extra:
+                clone_data.update(extra)
+            new_tabs[clone_id] = clone_data
+            cloned_tab_ids.append(clone_id)
+
+        new_profile_data = {
+            "name": new_name,
+            "type": profile_type,
+            "tabs": cloned_tab_ids,
+            "scenes": list(source.get("scenes", [])) if isinstance(source.get("scenes", []), list) else [],
+            "palette_id": str(new_palette_id),
+        }
+
+        # Commit all changes and save once per model.
+        profiles._palette_model[str(new_palette_id)] = list(palette_colors) if palette_colors else []
+        for pid, pdata in new_presets.items():
+            presets[pid] = pdata
+        for tid, tdata in new_tabs.items():
+            tabs[tid] = tdata
+        profiles[str(new_profile_id)] = new_profile_data
+
+        profiles._palette_model.save()
+        presets.save()
+        tabs.save()
+        profiles.save()
+
+        return json.dumps({new_profile_id: new_profile_data}), 201, {'Content-Type': 'application/json'}
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.put('/current')
+@with_session
+async def update_current_profile(request, session):
+    """Update the current profile using session (or fallback)."""
+    try:
+        data = request.json or {}
+        profile_list = profiles.list()
+        current_id = session.get('current_profile')
+        if not current_id and profile_list:
+            current_id = profile_list[0]
+            session['current_profile'] = str(current_id)
+            session.save()
+        if not current_id:
+            return json.dumps({"error": "No profile available"}), 404
+        if profiles.update(current_id, data):
+            return json.dumps(profiles.read(current_id)), 200, {'Content-Type': 'application/json'}
+        return json.dumps({"error": "Profile not found"}), 404
     except Exception as e:
         return json.dumps({"error": str(e)}), 400
 

src/controllers/scene.py

@@ -0,0 +1,49 @@
+from microdot import Microdot
+from models.scene import Scene
+import json
+
+controller = Microdot()
+scenes = Scene()
+
+@controller.get('')
+async def list_scenes(request):
+    """List all scenes."""
+    return json.dumps(scenes), 200, {'Content-Type': 'application/json'}
+
+@controller.get('/<id>')
+async def get_scene(request, id):
+    """Get a specific scene by ID."""
+    scene = scenes.read(id)
+    if scene:
+        return json.dumps(scene), 200, {'Content-Type': 'application/json'}
+    return json.dumps({"error": "Scene not found"}), 404
+
+@controller.post('')
+async def create_scene(request):
+    """Create a new scene."""
+    try:
+        data = request.json
+        scene_id = scenes.create()
+        if scenes.update(scene_id, data):
+            return json.dumps(scenes.read(scene_id)), 201, {'Content-Type': 'application/json'}
+        return json.dumps({"error": "Failed to create scene"}), 400
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.put('/<id>')
+async def update_scene(request, id):
+    """Update an existing scene."""
+    try:
+        data = request.json
+        if scenes.update(id, data):
+            return json.dumps(scenes.read(id)), 200, {'Content-Type': 'application/json'}
+        return json.dumps({"error": "Scene not found"}), 404
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.delete('/<id>')
+async def delete_scene(request, id):
+    """Delete a scene."""
+    if scenes.delete(id):
+        return json.dumps({"message": "Scene deleted successfully"}), 200
+    return json.dumps({"error": "Scene not found"}), 404

src/controllers/settings.py

@@ -0,0 +1,80 @@
+from microdot import Microdot, send_file
+from settings import Settings
+import util.wifi as wifi
+import json
+
+controller = Microdot()
+settings = Settings()
+
+@controller.get('')
+async def get_settings(request):
+    """Get all settings."""
+    # Settings is already a dict subclass; avoid dict() wrapper which can
+    # trigger MicroPython's "dict update sequence has wrong length" quirk.
+    return json.dumps(settings), 200, {'Content-Type': 'application/json'}
+
+@controller.get('/wifi/ap')
+async def get_ap_config(request):
+    """Get Access Point configuration."""
+    config = wifi.get_ap_config()
+    if config:
+        # Also get saved settings
+        config['saved_ssid'] = settings.get('wifi_ap_ssid')
+        config['saved_password'] = settings.get('wifi_ap_password')
+        config['saved_channel'] = settings.get('wifi_ap_channel')
+        return json.dumps(config), 200, {'Content-Type': 'application/json'}
+    return json.dumps({"error": "Failed to get AP config"}), 500
+
+@controller.post('/wifi/ap')
+async def configure_ap(request):
+    """Configure Access Point."""
+    try:
+        data = request.json
+        ssid = data.get('ssid')
+        password = data.get('password', '')
+        channel = data.get('channel')
+        
+        if not ssid:
+            return json.dumps({"error": "SSID is required"}), 400
+        
+        # Validate channel (1-11 for 2.4GHz)
+        if channel is not None:
+            channel = int(channel)
+            if channel < 1 or channel > 11:
+                return json.dumps({"error": "Channel must be between 1 and 11"}), 400
+        
+        # Save to settings
+        settings['wifi_ap_ssid'] = ssid
+        settings['wifi_ap_password'] = password
+        if channel is not None:
+            settings['wifi_ap_channel'] = channel
+        settings.save()
+        
+        # Configure AP
+        wifi.ap(ssid, password, channel)
+        
+        return json.dumps({
+            "message": "AP configured successfully",
+            "ssid": ssid,
+            "channel": channel
+        }), 200, {'Content-Type': 'application/json'}
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 500
+
+@controller.put('/settings')
+async def update_settings(request):
+    """Update general settings."""
+    try:
+        data = request.json
+        for key, value in data.items():
+            settings[key] = value
+        settings.save()
+        return json.dumps({"message": "Settings updated successfully"}), 200, {'Content-Type': 'application/json'}
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 500
+
+@controller.get('/page')
+async def settings_page(request):
+    """Serve the settings page."""
+    return send_file('templates/settings.html')
+

src/controllers/tab.py

@@ -1,14 +1,196 @@
-from microdot import Microdot
+from microdot import Microdot, send_file
+from microdot.session import with_session
 from models.tab import Tab
+from models.profile import Profile
 import json
+import os
+import time
 
 controller = Microdot()
 tabs = Tab()
+profiles = Profile()
+
+def get_current_profile_id(session=None):
+    """Get the current active profile ID from session or fallback to first."""
+    profile_list = profiles.list()
+    session_profile = None
+    if session is not None:
+        session_profile = session.get('current_profile')
+    if session_profile and session_profile in profile_list:
+        return session_profile
+    if profile_list:
+        return profile_list[0]
+    return None
+
+def get_profile_tab_order(profile_id):
+    """Get the tab order for a profile."""
+    if not profile_id:
+        return []
+    profile = profiles.read(profile_id)
+    if profile:
+        # Support both "tab_order" (old) and "tabs" (new) format
+        return profile.get("tabs", profile.get("tab_order", []))
+    return []
+
+def get_current_tab_id(request, session=None):
+    """Get the current tab ID from cookie."""
+    # Read from cookie first
+    current_tab = request.cookies.get('current_tab')
+    if current_tab:
+        return current_tab
+    
+    # Fallback to first tab in current profile
+    profile_id = get_current_profile_id(session)
+    if profile_id:
+        profile = profiles.read(profile_id)
+        if profile:
+            # Support both "tabs" (new) and "tab_order" (old) format
+            tabs_list = profile.get("tabs", profile.get("tab_order", []))
+            if tabs_list:
+                return tabs_list[0]
+    return None
+
+def _render_tabs_list_fragment(request, session):
+    """Helper function to render tabs list HTML fragment."""
+    profile_id = get_current_profile_id(session)
+    # #region agent log
+    try:
+        os.makedirs('/home/pi/led-controller/.cursor', exist_ok=True)
+        with open('/home/pi/led-controller/.cursor/debug.log', 'a') as _log:
+            _log.write(json.dumps({
+                "sessionId": "debug-session",
+                "runId": "tabs-pre-fix",
+                "hypothesisId": "H1",
+                "location": "src/controllers/tab.py:_render_tabs_list_fragment",
+                "message": "tabs list fragment",
+                "data": {
+                    "profile_id": profile_id,
+                    "profile_count": len(profiles.list())
+                },
+                "timestamp": int(time.time() * 1000)
+            }) + "\n")
+    except Exception:
+        pass
+    # #endregion
+    if not profile_id:
+        return '<div class="tabs-list">No profile selected</div>', 200, {'Content-Type': 'text/html'}
+    
+    tab_order = get_profile_tab_order(profile_id)
+    current_tab_id = get_current_tab_id(request, session)
+    
+    html = '<div class="tabs-list">'
+    for tab_id in tab_order:
+        tab_data = tabs.read(tab_id)
+        if tab_data:
+            active_class = 'active' if str(tab_id) == str(current_tab_id) else ''
+            tab_name = tab_data.get('name', 'Tab ' + str(tab_id))
+            html += (
+                '<button class="tab-button ' + active_class + '" '
+                'hx-get="/tabs/' + str(tab_id) + '/content-fragment" '
+                'hx-target="#tab-content" '
+                'hx-swap="innerHTML" '
+                'hx-push-url="true" '
+                'hx-trigger="click" '
+                'onclick="document.querySelectorAll(\'.tab-button\').forEach(b => b.classList.remove(\'active\')); this.classList.add(\'active\');">'
+                + tab_name +
+                '</button>'
+            )
+    html += '</div>'
+    return html, 200, {'Content-Type': 'text/html'}
+
+def _render_tab_content_fragment(request, session, id):
+    """Helper function to render tab content HTML fragment."""
+    # Handle 'current' as a special case
+    if id == 'current':
+        current_tab_id = get_current_tab_id(request, session)
+        if not current_tab_id:
+            accept_header = request.headers.get('Accept', '')
+            wants_html = 'text/html' in accept_header
+            if wants_html:
+                return '<div class="error">No current tab set</div>', 404, {'Content-Type': 'text/html'}
+            return json.dumps({"error": "No current tab set"}), 404
+        id = current_tab_id
+    
+    tab = tabs.read(id)
+    if not tab:
+        return '<div>Tab not found</div>', 404, {'Content-Type': 'text/html'}
+    
+    # Set this tab as the current tab in session
+    session['current_tab'] = str(id)
+    session.save()
+
+    # If this is a direct page load (not HTMX), return full UI so CSS loads.
+    if not request.headers.get('HX-Request'):
+        return send_file('templates/index.html')
+    
+    tab_name = tab.get('name', 'Tab ' + str(id))
+    
+    html = (
+        '<div class="presets-section" data-tab-id="' + str(id) + '">'
+        '<h3>Presets</h3>'
+        '<div class="profiles-actions" style="margin-bottom: 1rem;"></div>'
+        '<div id="presets-list-tab" class="presets-list">'
+        '<!-- Presets will be loaded here -->'
+        '</div>'
+        '</div>'
+    )
+    return html, 200, {'Content-Type': 'text/html'}
 
 @controller.get('')
-async def list_tabs(request):
-    """List all tabs."""
-    return json.dumps(tabs), 200, {'Content-Type': 'application/json'}
+@with_session
+async def list_tabs(request, session):
+    """List all tabs with current tab info."""
+    profile_id = get_current_profile_id(session)
+    current_tab_id = get_current_tab_id(request, session)
+    
+    # Get tab order for current profile
+    tab_order = get_profile_tab_order(profile_id) if profile_id else []
+    
+    # Build tabs list with metadata
+    tabs_data = {}
+    for tab_id in tabs.list():
+        tab_data = tabs.read(tab_id)
+        if tab_data:
+            tabs_data[tab_id] = tab_data
+    
+    return json.dumps({
+        "tabs": tabs_data,
+        "tab_order": tab_order,
+        "current_tab_id": current_tab_id,
+        "profile_id": profile_id
+    }), 200, {'Content-Type': 'application/json'}
+
+# Get current tab - returns JSON with tab data and content info
+@controller.get('/current')
+@with_session
+async def get_current_tab(request, session):
+    """Get the current tab from session."""
+    current_tab_id = get_current_tab_id(request, session)
+    if not current_tab_id:
+        return json.dumps({"error": "No current tab set", "tab": None, "tab_id": None}), 404
+    
+    tab = tabs.read(current_tab_id)
+    if tab:
+        return json.dumps({
+            "tab": tab,
+            "tab_id": current_tab_id
+        }), 200, {'Content-Type': 'application/json'}
+    return json.dumps({"error": "Tab not found", "tab": None, "tab_id": None}), 404
+
+@controller.post('/<id>/set-current')
+async def set_current_tab(request, id):
+    """Set a tab as the current tab in cookie."""
+    tab = tabs.read(id)
+    if not tab:
+        return json.dumps({"error": "Tab not found"}), 404
+    
+    # Set cookie with current tab
+    response_data = json.dumps({"message": "Current tab set", "tab_id": id})
+    response = response_data, 200, {
+        'Content-Type': 'application/json',
+        'Set-Cookie': f'current_tab={id}; Path=/; Max-Age=31536000'  # 1 year expiry
+    }
+    return response
 
 @controller.get('/<id>')
 async def get_tab(request, id):
@@ -18,21 +200,6 @@ async def get_tab(request, id):
         return json.dumps(tab), 200, {'Content-Type': 'application/json'}
     return json.dumps({"error": "Tab not found"}), 404
 
-@controller.post('')
-async def create_tab(request):
-    """Create a new tab."""
-    try:
-        data = request.json or {}
-        name = data.get("name", "")
-        names = data.get("names", None)
-        preset_ids = data.get("presets", None)
-        tab_id = tabs.create(name, names, preset_ids)
-        if data:
-            tabs.update(tab_id, data)
-        return json.dumps(tabs.read(tab_id)), 201, {'Content-Type': 'application/json'}
-    except Exception as e:
-        return json.dumps({"error": str(e)}), 400
-
 @controller.put('/<id>')
 async def update_tab(request, id):
     """Update an existing tab."""
@@ -45,8 +212,135 @@ async def update_tab(request, id):
         return json.dumps({"error": str(e)}), 400
 
 @controller.delete('/<id>')
-async def delete_tab(request, id):
+@with_session
+async def delete_tab(request, session, id):
     """Delete a tab."""
-    if tabs.delete(id):
-        return json.dumps({"message": "Tab deleted successfully"}), 200
-    return json.dumps({"error": "Tab not found"}), 404
+    try:
+        # Handle 'current' tab ID
+        if id == 'current':
+            current_tab_id = get_current_tab_id(request, session)
+            if current_tab_id:
+                id = current_tab_id
+            else:
+                return json.dumps({"error": "No current tab to delete"}), 404
+        
+        if tabs.delete(id):
+            # Remove from profile's tabs
+            profile_id = get_current_profile_id(session)
+            if profile_id:
+                profile = profiles.read(profile_id)
+                if profile:
+                    # Support both "tabs" (new) and "tab_order" (old) format
+                    tabs_list = profile.get('tabs', profile.get('tab_order', []))
+                    if id in tabs_list:
+                        tabs_list.remove(id)
+                        profile['tabs'] = tabs_list
+                        # Remove old tab_order if it exists
+                        if 'tab_order' in profile:
+                            del profile['tab_order']
+                        profiles.update(profile_id, profile)
+            
+            # Clear cookie if the deleted tab was the current tab
+            current_tab_id = get_current_tab_id(request, session)
+            if current_tab_id == id:
+                response_data = json.dumps({"message": "Tab deleted successfully"})
+                response = response_data, 200, {
+                    'Content-Type': 'application/json',
+                    'Set-Cookie': 'current_tab=; Path=/; Max-Age=0'  # Clear cookie
+                }
+                return response
+            
+            return json.dumps({"message": "Tab deleted successfully"}), 200, {'Content-Type': 'application/json'}
+        
+        return json.dumps({"error": "Tab not found"}), 404
+    except Exception as e:
+        import sys
+        try:
+            sys.print_exception(e)
+        except:
+            pass
+        return json.dumps({"error": str(e)}), 500, {'Content-Type': 'application/json'}
+
+@controller.post('')
+@with_session
+async def create_tab(request, session):
+    """Create a new tab."""
+    try:
+        # Handle form data or JSON
+        if request.form:
+            name = request.form.get('name', '').strip()
+            ids_str = request.form.get('ids', '1').strip()
+            names = [id.strip() for id in ids_str.split(',') if id.strip()]
+            preset_ids = None
+        else:
+            data = request.json or {}
+            name = data.get("name", "")
+            names = data.get("names", None)
+            preset_ids = data.get("presets", None)
+        
+        if not name:
+            return json.dumps({"error": "Tab name cannot be empty"}), 400
+        
+        tab_id = tabs.create(name, names, preset_ids)
+        
+        # Add to current profile's tabs
+        profile_id = get_current_profile_id(session)
+        if profile_id:
+            profile = profiles.read(profile_id)
+            if profile:
+                # Support both "tabs" (new) and "tab_order" (old) format
+                tabs_list = profile.get('tabs', profile.get('tab_order', []))
+                if tab_id not in tabs_list:
+                    tabs_list.append(tab_id)
+                    profile['tabs'] = tabs_list
+                    # Remove old tab_order if it exists
+                    if 'tab_order' in profile:
+                        del profile['tab_order']
+                    profiles.update(profile_id, profile)
+        
+        # Return JSON response with tab ID
+        tab_data = tabs.read(tab_id)
+        return json.dumps({tab_id: tab_data}), 201, {'Content-Type': 'application/json'}
+    except Exception as e:
+        import sys
+        sys.print_exception(e)
+        return json.dumps({"error": str(e)}), 400
+
+@controller.post('/<id>/clone')
+@with_session
+async def clone_tab(request, session, id):
+    """Clone an existing tab and add it to the current profile."""
+    try:
+        source = tabs.read(id)
+        if not source:
+            return json.dumps({"error": "Tab not found"}), 404
+
+        data = request.json or {}
+        source_name = source.get("name") or f"Tab {id}"
+        new_name = data.get("name") or f"{source_name} Copy"
+        clone_id = tabs.create(new_name, source.get("names"), source.get("presets"))
+        extra = {k: v for k, v in source.items() if k not in ("name", "names", "presets")}
+        if extra:
+            tabs.update(clone_id, extra)
+
+        profile_id = get_current_profile_id(session)
+        if profile_id:
+            profile = profiles.read(profile_id)
+            if profile:
+                tabs_list = profile.get('tabs', profile.get('tab_order', []))
+                if clone_id not in tabs_list:
+                    tabs_list.append(clone_id)
+                    profile['tabs'] = tabs_list
+                    if 'tab_order' in profile:
+                        del profile['tab_order']
+                    profiles.update(profile_id, profile)
+
+        tab_data = tabs.read(clone_id)
+        return json.dumps({clone_id: tab_data}), 201, {'Content-Type': 'application/json'}
+    except Exception as e:
+        import sys
+        try:
+            sys.print_exception(e)
+        except:
+            pass
+        return json.dumps({"error": str(e)}), 400

src/main.py

@@ -1,42 +1,81 @@
 import asyncio
-from settings import Settings
 import gc
+import json
 import machine
+from machine import Pin
 from microdot import Microdot, send_file
 from microdot.websocket import with_websocket
+from microdot.session import Session
+from settings import Settings
 
 import aioespnow
-import network
-from controllers.preset import preset
+import controllers.preset as preset
 import controllers.profile as profile
 import controllers.group as group
 import controllers.sequence as sequence
 import controllers.tab as tab
 import controllers.palette as palette
+import controllers.scene as scene
+import controllers.pattern as pattern
+import controllers.settings as settings_controller
+from models.espnow import ESPNow
+from util.espnow_message import split_espnow_message
 
 
-
-async def main():
+async def main(port=80):
     settings = Settings()
+    print(settings)
     print("Starting")
 
-    network.WLAN(network.STA_IF).active(True)
-
-
-    e = aioespnow.AIOESPNow()
-    e.active(True)
-    e.add_peer(b"\xbb\xbb\xbb\xbb\xbb\xbb")
+    # Initialize ESPNow singleton (config + peers)
+    esp = ESPNow()
 
     app = Microdot()
     
-    # Mount model controllers as subroutes
-    app.mount('/presets', preset.controller)
-    app.mount('/profiles', profile.controller)
-    app.mount('/groups', group.controller)
-    app.mount('/sequences', sequence.controller)
-    app.mount('/tabs', tab.controller)
-    app.mount('/palettes', palette.controller)
+    # Initialize sessions with a secret key from settings
+    secret_key = settings.get('session_secret_key', 'led-controller-secret-key-change-in-production')
+    Session(app, secret_key=secret_key)
     
+    # Mount model controllers as subroutes
+    # Verify controllers are Microdot instances before mounting
+    controllers_to_mount = [
+        ('/presets', preset, 'preset'),
+        ('/profiles', profile, 'profile'),
+        ('/groups', group, 'group'),
+        ('/sequences', sequence, 'sequence'),
+        ('/tabs', tab, 'tab'),
+        ('/palettes', palette, 'palette'),
+        ('/scenes', scene, 'scene'),
+    ]
+    
+    # Mount model controllers as subroutes
+    app.mount(preset.controller, '/presets')
+    app.mount(profile.controller, '/profiles')
+    app.mount(group.controller, '/groups')
+    app.mount(sequence.controller, '/sequences')
+    app.mount(tab.controller, '/tabs')
+    app.mount(palette.controller, '/palettes')
+    app.mount(scene.controller, '/scenes')
+    app.mount(pattern.controller, '/patterns')
+    app.mount(settings_controller.controller, '/settings')
+    
+    # Serve index.html at root
+    @app.route('/')
+    def index(request):
+        """Serve the main web UI."""
+        return send_file('templates/index.html')
+    
+    # Serve settings page
+    @app.route('/settings')
+    def settings_page(request):
+        """Serve the settings page."""
+        return send_file('templates/settings.html')
+    
+    # Favicon: avoid 404 in browser console (no file needed)
+    @app.route('/favicon.ico')
+    def favicon(request):
+        return '', 204
+
     # Static file route
     @app.route("/static/<path:path>")
     def static_handler(request, path):
@@ -51,24 +90,57 @@ async def main():
     async def ws(request, ws):
         while True:
             data = await ws.receive()
+            print(data)
             if data:
-                await e.asend(b"\xbb\xbb\xbb\xbb\xbb\xbb", data)
-                print(data)
+                # Debug: log incoming WebSocket data
+                try:
+                    parsed = json.loads(data)
+                    print("WS received JSON:", parsed)
+                except Exception:
+                    print("WS received raw:", data)
+
+                # Forward JSON over ESPNow; split into multiple frames if > 250 bytes
+                try:
+                    try:
+                        parsed = json.loads(data)
+                        chunks = split_espnow_message(parsed)
+                    except (json.JSONDecodeError, ValueError):
+                        chunks = [data]
+                    for i, chunk in enumerate(chunks):
+                        if i > 0:
+                            await asyncio.sleep_ms(100)
+                        await esp.send(chunk)
+                except Exception:
+                    try:
+                        await ws.send(json.dumps({"error": "ESP-NOW send failed"}))
+                    except Exception:
+                        pass
             else:
                 break
 
 
 
-    server = asyncio.create_task(app.start_server(host="0.0.0.0", port=80))
+    server = asyncio.create_task(app.start_server(host="0.0.0.0", port=port))
 
-    wdt = machine.WDT(timeout=10000)
-    wdt.feed()
+    #wdt = machine.WDT(timeout=10000)
+    #wdt.feed()
+
+    # Initialize heartbeat LED (XIAO ESP32S3 built-in LED on GPIO 21)
+  
+    led = Pin(15, Pin.OUT)
+
+
+    led_state = False
 
     while True:
         gc.collect()
         for i in range(60):
-            wdt.feed()
+            #wdt.feed()
+            # Heartbeat: toggle LED every 500 ms
+           
+            led.value(not led.value())
             await asyncio.sleep_ms(500)
     # cleanup before ending the application
 
-asyncio.run(main())
+if __name__ == "__main__":
+    asyncio.run(main())

src/models/__init__.py

@@ -0,0 +1 @@
+# Models package

src/models/espnow.py

@@ -0,0 +1,69 @@
+import network
+
+import aioespnow
+
+
+class ESPNow:
+    """
+    Singleton ESPNow helper:
+    - Manages a single AIOESPNow instance
+    - Adds a single broadcast-like peer
+    - Exposes async send(data) to send to that peer.
+    """
+
+    _instance = None
+
+    def __new__(cls, *args, **kwargs):
+        if cls._instance is None:
+            cls._instance = super().__new__(cls)
+        return cls._instance
+
+    def __init__(self):
+        if getattr(self, "_initialized", False):
+            return
+
+        # ESP-NOW requires a WiFi interface to be active (STA or AP). Activate STA
+        # so ESP-NOW has an interface to use; we don't need to connect to an AP.
+        try:
+            sta = network.WLAN(network.STA_IF)
+            sta.active(True)
+        except Exception as e:
+            print("ESPNow: STA active failed:", e)
+
+        self._esp = aioespnow.AIOESPNow()
+        self._esp.active(True)
+
+        try:
+            self._esp.add_peer(b"\xff\xff\xff\xff\xff\xff")
+        except Exception:
+            # Ignore add_peer failures (e.g. duplicate)
+            pass
+
+        self._initialized = True
+
+   
+    async def send(self, data):
+        """
+        Async send to the broadcast peer.
+        - data: bytes or str (JSON)
+        """
+        if isinstance(data, str):
+            payload = data.encode()
+        else:
+            payload = data
+
+        # Debug: show what we're sending and its size
+        try:
+            preview = payload.decode('utf-8')
+        except Exception:
+            preview = str(payload)
+        if len(preview) > 200:
+            preview = preview[:200] + "...(truncated)"
+        print("ESPNow.send len=", len(payload), "payload=", preview)
+
+        try:
+            await self._esp.asend(b"\xff\xff\xff\xff\xff\xff", payload)
+        except Exception as e:
+            print("ESPNow.send error:", e)
+            raise
+

src/models/model.py

@@ -1,18 +1,32 @@
 import json
-import wifi
-import ubinascii
-import machine
+import os
 
 class Model(dict):
+    def __new__(cls, *args, **kwargs):
+        # Singleton pattern: return existing instance if it exists
+        if not hasattr(cls, '_instance'):
+            cls._instance = super().__new__(cls)
+        return cls._instance
     
     def __init__(self):
-        self.file = self.__class__.__name__ + ".json"
+        # Only initialize once (check if already initialized)
+        if hasattr(self, '_initialized'):
+            return
+        
+        # Create /db directory if it doesn't exist (MicroPython compatible)
+        try:
+            os.mkdir("/db")
+        except OSError:
+            pass  # Directory already exists, which is fine
+        self.class_name = self.__class__.__name__
+        self.file = f"/db/{self.class_name.lower()}.json"
         super().__init__()
 
         self.load()  # Load settings from file during initialization
+        self._initialized = True
 
     def set_defaults(self):
-        self = {}
+        self.clear()
 
     def get_next_id(self):
         """Get the next available ID for creating a new record."""
@@ -23,20 +37,68 @@ class Model(dict):
 
     def save(self):
         try:
+            # Ensure directory exists
+            try:
+                os.mkdir("/db")
+            except OSError:
+                pass  # Directory already exists
             j = json.dumps(self)
             with open(self.file, 'w') as file:
                 file.write(j)
-            print("Settings saved successfully.")
+                file.flush()  # Ensure data is written to buffer
+            # Try to sync filesystem if available (MicroPython)
+            try:
+                os.sync()
+            except (AttributeError, OSError):
+                pass  # os.sync() not available on all platforms
+            print(f"{self.class_name} saved successfully to {self.file}")
         except Exception as e:
-            print(f"Error saving settings: {e}")
+            print(f"Error saving {self.class_name} to {self.file}: {e}")
+            import sys
+            sys.print_exception(e)
 
     def load(self):
         try:
-            with open(self.file, 'r') as file:
-                loaded_settings = json.load(file)
-            self.update(loaded_settings)
-            print("Settings loaded successfully.")
-        except Exception as e:
-            print(f"Error loading settings")
+            # Check if file exists first
+            try:
+                with open(self.file, 'r') as file:
+                    content = file.read().strip()
+            except OSError:
+                # File doesn't exist
+                raise
+            
+            if not content:
+                # Empty file
+                loaded_settings = {}
+            else:
+                # Parse JSON content
+                loaded_settings = json.loads(content)
+            
+            # Verify it's a dictionary
+            if not isinstance(loaded_settings, dict):
+                raise ValueError(f"File does not contain a dictionary, got {type(loaded_settings)}")
+            
+            # Clear and update with loaded data
+            # Clear first
+            self.clear()
+            # Manually copy items to avoid any update() method issues
+            for key, value in loaded_settings.items():
+                self[key] = value
+            print(f"{self.class_name} loaded successfully.")
+        except OSError as e:
+            # File doesn't exist yet - this is normal on first run
+            # Create an empty file with defaults
+            self.set_defaults()
+            self.save()
+            print(f"{self.class_name} initialized (new file created).")
+        except ValueError:
+            # JSON parsing error - file exists but is corrupted
+            # Note: MicroPython uses ValueError for JSON errors, not JSONDecodeError
+            print(f"Error loading {self.class_name}: Invalid JSON format. Resetting to defaults.")
+            self.set_defaults()
+            self.save()
+        except Exception:
+            # Other unexpected errors - avoid trying to format exception to prevent further errors
+            print(f"Error loading {self.class_name}. Resetting to defaults.")
             self.set_defaults()
             self.save()

src/models/pallet.py

@@ -6,22 +6,30 @@ class Palette(Model):
 
     def create(self, name="", colors=None):
         next_id = self.get_next_id()
-        self[next_id] = {
-            "name": name,
-            "colors": colors if colors else []
-        }
+        # Store palette as a simple list of colors; name is ignored.
+        self[next_id] = list(colors) if colors else []
         self.save()
         return next_id
 
     def read(self, id):
         id_str = str(id)
-        return self.get(id_str, None)
+        value = self.get(id_str, None)
+        # Backwards compatibility: if stored as {"colors": [...]}, unwrap.
+        if isinstance(value, dict) and "colors" in value:
+            return value.get("colors") or []
+        # Otherwise, expect a list of colors.
+        return value or []
     
     def update(self, id, data):
         id_str = str(id)
         if id_str not in self:
             return False
-        self[id_str].update(data)
+        # Accept either {"colors": [...]} or a raw list.
+        if isinstance(data, dict):
+            colors = data.get("colors", [])
+        else:
+            colors = data
+        self[id_str] = list(colors) if colors else []
         self.save()
         return True
     

src/models/pattern.py

@@ -0,0 +1,38 @@
+from models.model import Model
+
+
+class Pattern(Model):
+    def __init__(self):
+        super().__init__()
+
+    def create(self, name="", data=None):
+        pattern_name = str(name).strip()
+        if not pattern_name:
+            pattern_name = self.get_next_id()
+        self[pattern_name] = data if isinstance(data, dict) else {}
+        self.save()
+        return pattern_name
+
+    def read(self, id):
+        id_str = str(id)
+        return self.get(id_str, None)
+
+    def update(self, id, data):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        if isinstance(data, dict):
+            self[id_str].update(data)
+        self.save()
+        return True
+
+    def delete(self, id):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self.pop(id_str)
+        self.save()
+        return True
+
+    def list(self):
+        return list(self.keys())

src/models/preset.py

@@ -1,10 +1,26 @@
 from models.model import Model
+from models.profile import Profile
 
 class Preset(Model):
     def __init__(self):
         super().__init__()
+        # Backfill profile ownership for existing presets.
+        try:
+            profiles = Profile()
+            profile_list = profiles.list()
+            default_profile_id = profile_list[0] if profile_list else None
+            changed = False
+            for preset_id, preset_data in list(self.items()):
+                if isinstance(preset_data, dict) and "profile_id" not in preset_data:
+                    if default_profile_id is not None:
+                        preset_data["profile_id"] = str(default_profile_id)
+                        changed = True
+            if changed:
+                self.save()
+        except Exception:
+            pass
 
-    def create(self):
+    def create(self, profile_id=None):
         next_id = self.get_next_id()
         self[next_id] = {
             "name": "",
@@ -18,6 +34,9 @@ class Preset(Model):
             "n4": 0,
             "n5": 0,
             "n6": 0,
+            "n7": 0,
+            "n8": 0,
+            "profile_id": str(profile_id) if profile_id is not None else None,
         }
         self.save()
         return next_id

src/models/profile.py

@@ -1,16 +1,45 @@
 from models.model import Model
+from models.pallet import Palette
+
 
 class Profile(Model):
     def __init__(self):
-        super().__init__()
+        """Profile model.
 
-    def create(self, name=""):
+        Each profile owns a single, unique palette stored in the Palette model.
+        The profile stores a `palette_id` that points to its palette; any legacy
+        inline `palette` arrays are migrated to a dedicated Palette entry.
+        """
+        super().__init__()
+        self._palette_model = Palette()
+
+        # Migrate legacy inline palettes to separate Palette entries.
+        changed = False
+        for pid, pdata in list(self.items()):
+            if isinstance(pdata, dict):
+                if "palette" in pdata and "palette_id" not in pdata:
+                    colors = pdata.get("palette") or []
+                    palette_id = self._palette_model.create(colors=colors)
+                    pdata.pop("palette", None)
+                    pdata["palette_id"] = str(palette_id)
+                    changed = True
+        if changed:
+            self.save()
+
+    def create(self, name="", profile_type="tabs"):
+        """Create a new profile and its own empty palette.
+
+        profile_type: "tabs" or "scenes" (ignoring scenes for now)
+        """
         next_id = self.get_next_id()
+        # Create a unique palette for this profile.
+        palette_id = self._palette_model.create(colors=[])
         self[next_id] = {
             "name": name,
-            "tabs": {},
-            "palette": [],
-            "tab_order": []
+            "type": profile_type,  # "tabs" or "scenes"
+            "tabs": [],  # Array of tab IDs
+            "scenes": [],  # Array of scene IDs (for future use)
+            "palette_id": str(palette_id),
         }
         self.save()
         return next_id

src/models/scene.py

@@ -0,0 +1,38 @@
+from models.model import Model
+
+class Scene(Model):
+    def __init__(self):
+        super().__init__()
+
+    def create(self, name="", sequences=None, groups=None):
+        next_id = self.get_next_id()
+        self[next_id] = {
+            "name": name,
+            "sequences": sequences if sequences else [],
+            "groups": groups if groups else []
+        }
+        self.save()
+        return next_id
+
+    def read(self, id):
+        id_str = str(id)
+        return self.get(id_str, None)
+    
+    def update(self, id, data):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self[id_str].update(data)
+        self.save()
+        return True
+    
+    def delete(self, id):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self.pop(id_str)
+        self.save()
+        return True
+    
+    def list(self):
+        return list(self.keys())

src/models/tab.py

@@ -9,7 +9,8 @@ class Tab(Model):
         self[next_id] = {
             "name": name,
             "names": names if names else [],
-            "presets": presets if presets else []
+            "presets": presets if presets else [],
+            "default_preset": None
         }
         self.save()
         return next_id

src/p2p.py

@@ -0,0 +1,39 @@
+import network
+import aioespnow
+import asyncio
+import json
+from time import sleep
+
+
+class P2P:
+    def __init__(self):
+        network.WLAN(network.STA_IF).active(True)
+        self.broadcast = bytes.fromhex("ffffffffffff")
+        self.e = aioespnow.AIOESPNow()
+        self.e.active(True)
+        try:
+            self.e.add_peer(self.broadcast)
+        except:
+            pass
+
+    async def send(self, data):
+        # Convert data to bytes if it's a string or dict
+        if isinstance(data, str):
+            payload = data.encode()
+        elif isinstance(data, dict):
+            payload = json.dumps(data).encode()
+        else:
+            payload = data  # Assume it's already bytes
+        
+        # Use asend for async sending - returns boolean indicating success
+        result = await self.e.asend(self.broadcast, payload)
+        return result
+
+        
+
+async def main():
+    p = P2P()
+    await p.send(json.dumps({"dj": {"p": "on", "colors": ["#ff0000"]}}))
+
+if __name__ == "__main__":
+    asyncio.run(main())

src/settings.py

@@ -1,7 +1,6 @@
 import json
-import wifi
-import ubinascii
-import machine
+import os
+import binascii
 
 class Settings(dict):
     SETTINGS_FILE = "/settings.json"
@@ -10,8 +9,30 @@ class Settings(dict):
         super().__init__()
         self.load()  # Load settings from file during initialization
 
+    def generate_secret_key(self):
+        """Generate a random secret key for session signing."""
+        try:
+            # Try to use os.urandom for secure random bytes
+            random_bytes = os.urandom(32)
+            return binascii.hexlify(random_bytes).decode('utf-8')
+        except (AttributeError, NotImplementedError):
+            # Fallback for MicroPython or systems without os.urandom
+            try:
+                import secrets
+                return secrets.token_hex(32)
+            except ImportError:
+                # Last resort: use a combination of time and random
+                import time
+                import random
+                random.seed(time.time())
+                return binascii.hexlify(bytes([random.randint(0, 255) for _ in range(32)])).decode('utf-8')
+
     def set_defaults(self):
-        self = {}
+        """Set default settings if they don't exist."""
+        if 'session_secret_key' not in self:
+            self['session_secret_key'] = self.generate_secret_key()
+            # Save immediately when generating a new key
+            self.save()
 
     def save(self):
         try:
@@ -23,12 +44,19 @@ class Settings(dict):
             print(f"Error saving settings: {e}")
 
     def load(self):
+        loaded_from_file = False
         try:
             with open(self.SETTINGS_FILE, 'r') as file:
                 loaded_settings = json.load(file)
             self.update(loaded_settings)
+            loaded_from_file = True
             print("Settings loaded successfully.")
         except Exception as e:
             print(f"Error loading settings")
+            self.clear()
+        finally:
+            # Ensure defaults are set even if file exists but is missing keys
             self.set_defaults()
-            self.save()
+            # Only save if file didn't exist or was invalid
+            if not loaded_from_file:
+                self.save()

src/static/color_palette.js

@@ -0,0 +1,198 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const paletteButton = document.getElementById('color-palette-btn');
+  const paletteModal = document.getElementById('color-palette-modal');
+  const closeButton = document.getElementById('color-palette-close-btn');
+  const paletteContainer = document.getElementById('palette-container');
+  const paletteNewColor = document.getElementById('palette-new-color');
+  const paletteAddButton = document.getElementById('palette-add-color-btn');
+  const profileNameDisplay = document.getElementById('palette-current-profile-name');
+
+  if (!paletteButton || !paletteModal || !paletteContainer) {
+    return;
+  }
+
+  let currentProfileId = null;
+  let currentPaletteId = null;
+  let currentPalette = [];
+  let currentProfileName = null;
+
+  const renderPalette = () => {
+    paletteContainer.innerHTML = '';
+    if (!currentPalette.length) {
+      const empty = document.createElement('p');
+      empty.className = 'muted-text';
+      empty.textContent = 'No colors in palette.';
+      paletteContainer.appendChild(empty);
+      return;
+    }
+    currentPalette.forEach((color, index) => {
+      const row = document.createElement('div');
+      row.className = 'profiles-row';
+      row.dataset.color = color;
+      row.style.cssText = 'display: flex; align-items: center; gap: 1rem;';
+      // Ensure no text content
+      row.textContent = '';
+
+      const swatch = document.createElement('div');
+      swatch.style.cssText = `
+        width: 64px;
+        height: 64px;
+        border-radius: 8px;
+        background-color: ${color};
+        border: 2px solid #4a4a4a;
+        cursor: pointer;
+        flex-shrink: 0;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+      `;
+      swatch.title = color; // Show hex code on hover only
+      swatch.setAttribute('aria-label', `Color ${color}`);
+
+      const removeButton = document.createElement('button');
+      removeButton.className = 'btn btn-danger btn-small';
+      removeButton.textContent = 'Remove';
+      removeButton.style.fontSize = '0.8rem'; // Restore font size for button
+      removeButton.addEventListener('click', async (e) => {
+        e.stopPropagation();
+        const updated = currentPalette.filter((_, i) => i !== index);
+        await savePalette(updated);
+      });
+
+      row.appendChild(swatch);
+      row.appendChild(removeButton);
+      paletteContainer.appendChild(row);
+    });
+  };
+
+  const loadPalette = async () => {
+    try {
+      const currentResponse = await fetch('/profiles/current', {
+        headers: { Accept: 'application/json' },
+      });
+      if (!currentResponse.ok) {
+        throw new Error('Failed to load current profile');
+      }
+      const currentData = await currentResponse.json();
+      currentProfileId = currentData.id || null;
+      const profile = currentData.profile || null;
+      currentProfileName = profile ? profile.name : null;
+      if (profileNameDisplay) {
+        profileNameDisplay.textContent = currentProfileName || currentProfileId || 'None';
+      }
+
+      if (!currentProfileId || !profile) {
+        currentPalette = [];
+        renderPalette();
+        return;
+      }
+
+      // Prefer palette_id-based storage; fall back to legacy inline palette.
+      currentPaletteId = profile.palette_id || profile.paletteId || null;
+      if (currentPaletteId) {
+        try {
+          const palResponse = await fetch(`/palettes/${currentPaletteId}`, {
+            headers: { Accept: 'application/json' },
+          });
+          if (palResponse.ok) {
+            const palData = await palResponse.json();
+            currentPalette = (palData.colors) || [];
+          } else {
+            currentPalette = [];
+          }
+        } catch (e) {
+          console.error('Failed to load palette by id:', e);
+          currentPalette = [];
+        }
+      } else {
+        // Legacy: palette stored directly on profile
+        currentPalette = profile.palette || profile.color_palette || [];
+      }
+      renderPalette();
+    } catch (error) {
+      console.error('Failed to load palette:', error);
+      currentPalette = [];
+      renderPalette();
+    }
+  };
+
+  const savePalette = async (newPalette) => {
+    if (!currentProfileId) {
+      alert('No profile selected.');
+      return;
+    }
+    try {
+      // Ensure we have a palette ID for this profile.
+      if (!currentPaletteId) {
+        const createResponse = await fetch('/palettes', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ colors: newPalette }),
+        });
+        if (!createResponse.ok) {
+          throw new Error('Failed to create palette');
+        }
+        const pal = await createResponse.json();
+        currentPaletteId = pal.id || Object.keys(pal)[0];
+
+        // Link the new palette to the current profile.
+        const linkResponse = await fetch('/profiles/current', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            palette_id: currentPaletteId,
+          }),
+        });
+        if (!linkResponse.ok) {
+          throw new Error('Failed to link palette to profile');
+        }
+      } else {
+        // Update existing palette colors
+        const updateResponse = await fetch(`/palettes/${currentPaletteId}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ colors: newPalette }),
+        });
+        if (!updateResponse.ok) {
+          throw new Error('Failed to save palette');
+        }
+      }
+
+      currentPalette = newPalette;
+      renderPalette();
+    } catch (error) {
+      console.error('Failed to save palette:', error);
+      alert('Failed to save palette.');
+    }
+  };
+
+  const openModal = () => {
+    paletteModal.classList.add('active');
+    loadPalette();
+  };
+
+  const closeModal = () => {
+    paletteModal.classList.remove('active');
+  };
+
+  paletteButton.addEventListener('click', openModal);
+  if (closeButton) {
+    closeButton.addEventListener('click', closeModal);
+  }
+  if (paletteAddButton && paletteNewColor) {
+    paletteAddButton.addEventListener('click', async () => {
+      const color = paletteNewColor.value;
+      if (!color) {
+        return;
+      }
+      if (currentPalette.includes(color)) {
+        alert('Color already in palette.');
+        return;
+      }
+      await savePalette([...currentPalette, color]);
+    });
+  }
+  paletteModal.addEventListener('click', (event) => {
+    if (event.target === paletteModal) {
+      closeModal();
+    }
+  });
+});

src/static/help.js

@@ -0,0 +1,200 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // Help modal
+  const helpBtn = document.getElementById('help-btn');
+  const helpModal = document.getElementById('help-modal');
+  const helpCloseBtn = document.getElementById('help-close-btn');
+  const mainMenuBtn = document.getElementById('main-menu-btn');
+  const mainMenuDropdown = document.getElementById('main-menu-dropdown');
+
+  if (helpBtn && helpModal) {
+    helpBtn.addEventListener('click', () => {
+      helpModal.classList.add('active');
+    });
+  }
+
+  if (helpCloseBtn && helpModal) {
+    helpCloseBtn.addEventListener('click', () => {
+      helpModal.classList.remove('active');
+    });
+  }
+
+  if (helpModal) {
+    helpModal.addEventListener('click', (event) => {
+      if (event.target === helpModal) {
+        helpModal.classList.remove('active');
+      }
+    });
+  }
+
+  // Mobile main menu: forward clicks to existing header buttons
+  if (mainMenuBtn && mainMenuDropdown) {
+    mainMenuBtn.addEventListener('click', () => {
+      mainMenuDropdown.classList.toggle('open');
+    });
+
+    mainMenuDropdown.addEventListener('click', (event) => {
+      const target = event.target;
+      if (target && target.matches('button[data-target]')) {
+        const id = target.getAttribute('data-target');
+        const realBtn = document.getElementById(id);
+        if (realBtn) {
+          realBtn.click();
+        }
+        mainMenuDropdown.classList.remove('open');
+      }
+    });
+
+    // Close menu when clicking outside
+    document.addEventListener('click', (event) => {
+      if (!mainMenuDropdown.contains(event.target) && event.target !== mainMenuBtn) {
+        mainMenuDropdown.classList.remove('open');
+      }
+    });
+  }
+
+  // Settings modal wiring (reusing existing settings endpoints).
+  const settingsButton = document.getElementById('settings-btn');
+  const settingsModal = document.getElementById('settings-modal');
+  const settingsCloseButton = document.getElementById('settings-close-btn');
+
+  const showSettingsMessage = (text, type = 'success') => {
+    const messageEl = document.getElementById('settings-message');
+    if (!messageEl) return;
+    messageEl.textContent = text;
+    messageEl.className = `message ${type} show`;
+    setTimeout(() => {
+      messageEl.classList.remove('show');
+    }, 5000);
+  };
+
+  async function loadDeviceSettings() {
+    try {
+      const response = await fetch('/settings');
+      const data = await response.json();
+      const nameInput = document.getElementById('device-name-input');
+      if (nameInput && data && typeof data === 'object') {
+        nameInput.value = data.device_name || 'led-controller';
+      }
+    } catch (error) {
+      console.error('Error loading device settings:', error);
+    }
+  }
+
+  async function loadAPStatus() {
+    try {
+      const response = await fetch('/settings/wifi/ap');
+      const config = await response.json();
+      const statusEl = document.getElementById('ap-status');
+      if (!statusEl) return;
+      if (config.active) {
+        statusEl.innerHTML = `
+          <h4>AP Status: <span class="status-connected">Active</span></h4>
+          <p><strong>SSID:</strong> ${config.ssid || 'N/A'}</p>
+          <p><strong>Channel:</strong> ${config.channel || 'Auto'}</p>
+          <p><strong>IP Address:</strong> ${config.ip || 'N/A'}</p>
+        `;
+      } else {
+        statusEl.innerHTML = `
+          <h4>AP Status: <span class="status-disconnected">Inactive</span></h4>
+          <p>Access Point is not currently active</p>
+        `;
+      }
+      if (config.saved_ssid) document.getElementById('ap-ssid').value = config.saved_ssid;
+      if (config.saved_channel) document.getElementById('ap-channel').value = config.saved_channel;
+    } catch (error) {
+      console.error('Error loading AP status:', error);
+    }
+  }
+
+  if (settingsButton && settingsModal) {
+    settingsButton.addEventListener('click', () => {
+      settingsModal.classList.add('active');
+      // Load current WiFi status/config when opening
+      loadDeviceSettings();
+      loadAPStatus();
+    });
+  }
+
+  if (settingsCloseButton && settingsModal) {
+    settingsCloseButton.addEventListener('click', () => {
+      settingsModal.classList.remove('active');
+    });
+  }
+
+  if (settingsModal) {
+    settingsModal.addEventListener('click', (event) => {
+      if (event.target === settingsModal) {
+        settingsModal.classList.remove('active');
+      }
+    });
+  }
+
+  const deviceForm = document.getElementById('device-form');
+  if (deviceForm) {
+    deviceForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const nameInput = document.getElementById('device-name-input');
+      const deviceName = nameInput ? nameInput.value.trim() : '';
+      if (!deviceName) {
+        showSettingsMessage('Device name is required', 'error');
+        return;
+      }
+      try {
+        const response = await fetch('/settings/settings', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ device_name: deviceName }),
+        });
+        const result = await response.json();
+        if (response.ok) {
+          showSettingsMessage('Device name saved. It will be used on next restart.', 'success');
+        } else {
+          showSettingsMessage(`Error: ${result.error || 'Failed to save device name'}`, 'error');
+        }
+      } catch (error) {
+        showSettingsMessage(`Error: ${error.message}`, 'error');
+      }
+    });
+  }
+  const apForm = document.getElementById('ap-form');
+  if (apForm) {
+    apForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const formData = {
+        ssid: document.getElementById('ap-ssid').value,
+        password: document.getElementById('ap-password').value,
+        channel: document.getElementById('ap-channel').value || null,
+      };
+
+      if (formData.password && formData.password.length > 0 && formData.password.length < 8) {
+        showSettingsMessage('AP password must be at least 8 characters', 'error');
+        return;
+      }
+
+      if (formData.channel) {
+        formData.channel = parseInt(formData.channel, 10);
+        if (formData.channel < 1 || formData.channel > 11) {
+          showSettingsMessage('Channel must be between 1 and 11', 'error');
+          return;
+        }
+      }
+
+      try {
+        const response = await fetch('/settings/wifi/ap', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(formData),
+        });
+        const result = await response.json();
+        if (response.ok) {
+          showSettingsMessage('Access Point configured successfully!', 'success');
+          setTimeout(loadAPStatus, 1000);
+        } else {
+          showSettingsMessage(`Error: ${result.error || 'Failed to configure AP'}`, 'error');
+        }
+      } catch (error) {
+        showSettingsMessage(`Error: ${error.message}`, 'error');
+      }
+    });
+  }
+});

src/static/patterns.js

@@ -0,0 +1,86 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const patternsButton = document.getElementById('patterns-btn');
+  const patternsModal = document.getElementById('patterns-modal');
+  const patternsCloseButton = document.getElementById('patterns-close-btn');
+  const patternsList = document.getElementById('patterns-list');
+
+  if (!patternsButton || !patternsModal || !patternsList) {
+    return;
+  }
+
+  const renderPatterns = (patterns) => {
+    patternsList.innerHTML = '';
+    const entries = Object.entries(patterns || {});
+    if (!entries.length) {
+      const empty = document.createElement('p');
+      empty.className = 'muted-text';
+      empty.textContent = 'No patterns found.';
+      patternsList.appendChild(empty);
+      return;
+    }
+    entries.forEach(([patternName, data]) => {
+      const row = document.createElement('div');
+      row.className = 'profiles-row';
+
+      const label = document.createElement('span');
+      label.textContent = patternName;
+
+      const details = document.createElement('span');
+      const minDelay = data && data.min_delay !== undefined ? data.min_delay : '-';
+      const maxDelay = data && data.max_delay !== undefined ? data.max_delay : '-';
+      details.textContent = `${minDelay}–${maxDelay} ms`;
+      details.style.color = '#aaa';
+      details.style.fontSize = '0.85em';
+
+      row.appendChild(label);
+      row.appendChild(details);
+      patternsList.appendChild(row);
+    });
+  };
+
+  const loadPatterns = async () => {
+    patternsList.innerHTML = '';
+    const loading = document.createElement('p');
+    loading.className = 'muted-text';
+    loading.textContent = 'Loading patterns...';
+    patternsList.appendChild(loading);
+
+    try {
+      const response = await fetch('/patterns', {
+        headers: { Accept: 'application/json' },
+      });
+      if (!response.ok) {
+        throw new Error('Failed to load patterns');
+      }
+      const patterns = await response.json();
+      renderPatterns(patterns);
+    } catch (error) {
+      console.error('Load patterns failed:', error);
+      patternsList.innerHTML = '';
+      const errorMessage = document.createElement('p');
+      errorMessage.className = 'muted-text';
+      errorMessage.textContent = 'Failed to load patterns.';
+      patternsList.appendChild(errorMessage);
+    }
+  };
+
+  const openModal = () => {
+    patternsModal.classList.add('active');
+    loadPatterns();
+  };
+
+  const closeModal = () => {
+    patternsModal.classList.remove('active');
+  };
+
+  patternsButton.addEventListener('click', openModal);
+  if (patternsCloseButton) {
+    patternsCloseButton.addEventListener('click', closeModal);
+  }
+
+  patternsModal.addEventListener('click', (event) => {
+    if (event.target === patternsModal) {
+      closeModal();
+    }
+  });
+});

src/static/profiles.js

@@ -0,0 +1,282 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const profilesButton = document.getElementById("profiles-btn");
+  const profilesModal = document.getElementById("profiles-modal");
+  const profilesCloseButton = document.getElementById("profiles-close-btn");
+  const profilesList = document.getElementById("profiles-list");
+  const newProfileInput = document.getElementById("new-profile-name");
+  const createProfileButton = document.getElementById("create-profile-btn");
+
+  if (!profilesButton || !profilesModal || !profilesList) {
+    return;
+  }
+
+  const openModal = () => {
+    profilesModal.classList.add("active");
+    loadProfiles();
+  };
+
+  const closeModal = () => {
+    profilesModal.classList.remove("active");
+  };
+
+  const renderProfiles = (profiles, currentProfileId) => {
+    profilesList.innerHTML = "";
+    let entries = [];
+
+    if (Array.isArray(profiles)) {
+      entries = profiles.map((profileId) => [profileId, {}]);
+    } else if (profiles && typeof profiles === "object") {
+      // Make sure we're iterating over profile entries, not metadata
+      entries = Object.entries(profiles).filter(([key]) => {
+        // Skip metadata keys like 'current_profile_id' if they exist
+        return key !== 'current_profile_id' && key !== 'profiles';
+      });
+    }
+
+    if (entries.length === 0) {
+      const empty = document.createElement("p");
+      empty.className = "muted-text";
+      empty.textContent = "No profiles found.";
+      profilesList.appendChild(empty);
+      return;
+    }
+
+    entries.forEach(([profileId, profile]) => {
+      const row = document.createElement("div");
+      row.className = "profiles-row";
+
+      const label = document.createElement("span");
+      label.textContent = (profile && profile.name) || profileId;
+      if (String(profileId) === String(currentProfileId)) {
+        label.textContent = `✓ ${label.textContent}`;
+        label.style.fontWeight = "bold";
+        label.style.color = "#FFD700";
+      }
+
+      const applyButton = document.createElement("button");
+      applyButton.className = "btn btn-secondary btn-small profiles-apply-btn";
+      applyButton.textContent = "Apply";
+      applyButton.addEventListener("click", async () => {
+        try {
+          const response = await fetch(`/profiles/${profileId}/apply`, {
+            method: "POST",
+            headers: { Accept: "application/json" },
+          });
+          if (!response.ok) {
+            throw new Error("Failed to apply profile");
+          }
+          await loadProfiles();
+          document.body.dispatchEvent(new Event("tabs-updated"));
+        } catch (error) {
+          console.error("Apply profile failed:", error);
+          alert("Failed to apply profile.");
+        }
+      });
+
+      const cloneButton = document.createElement("button");
+      cloneButton.className = "btn btn-secondary btn-small";
+      cloneButton.textContent = "Clone";
+      cloneButton.addEventListener("click", async () => {
+        const baseName = (profile && profile.name) || profileId;
+        const suggested = `${baseName}`;
+        const name = prompt("New profile name:", suggested);
+        if (name === null) {
+          return;
+        }
+        const trimmed = String(name).trim();
+        if (!trimmed) {
+          alert("Profile name cannot be empty.");
+          return;
+        }
+        try {
+          const response = await fetch(`/profiles/${profileId}/clone`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json", Accept: "application/json" },
+            body: JSON.stringify({ name: trimmed }),
+          });
+          if (!response.ok) {
+            throw new Error("Failed to clone profile");
+          }
+          const data = await response.json().catch(() => null);
+          let newProfileId = null;
+          if (data && typeof data === "object") {
+            if (data.id) {
+              newProfileId = String(data.id);
+            } else {
+              const ids = Object.keys(data);
+              if (ids.length > 0) {
+                newProfileId = String(ids[0]);
+              }
+            }
+          }
+          if (newProfileId) {
+            await fetch(`/profiles/${newProfileId}/apply`, {
+              method: "POST",
+              headers: { Accept: "application/json" },
+            });
+          }
+          document.cookie = "current_tab=; path=/; max-age=0";
+          await loadProfiles();
+          if (typeof window.loadTabs === "function") {
+            await window.loadTabs();
+          }
+          if (typeof window.loadTabsModal === "function") {
+            await window.loadTabsModal();
+          }
+          const tabContent = document.getElementById("tab-content");
+          if (tabContent) {
+            tabContent.innerHTML = `
+              <div class="tab-content-placeholder">
+                Select a tab to get started
+              </div>
+            `;
+          }
+        } catch (error) {
+          console.error("Clone profile failed:", error);
+          alert("Failed to clone profile.");
+        }
+      });
+
+      const deleteButton = document.createElement("button");
+      deleteButton.className = "btn btn-danger btn-small";
+      deleteButton.textContent = "Delete";
+      deleteButton.addEventListener("click", async () => {
+        const confirmed = confirm(`Delete profile "${label.textContent}"?`);
+        if (!confirmed) {
+          return;
+        }
+        try {
+          const response = await fetch(`/profiles/${profileId}`, {
+            method: "DELETE",
+            headers: { Accept: "application/json" },
+          });
+          if (!response.ok) {
+            throw new Error("Failed to delete profile");
+          }
+          await loadProfiles();
+        } catch (error) {
+          console.error("Delete profile failed:", error);
+          alert("Failed to delete profile.");
+        }
+      });
+
+      row.appendChild(label);
+      row.appendChild(applyButton);
+      row.appendChild(cloneButton);
+      row.appendChild(deleteButton);
+      profilesList.appendChild(row);
+    });
+  };
+
+  const loadProfiles = async () => {
+    profilesList.innerHTML = "";
+    const loading = document.createElement("p");
+    loading.className = "muted-text";
+    loading.textContent = "Loading profiles...";
+    profilesList.appendChild(loading);
+
+    try {
+      const response = await fetch("/profiles", {
+        headers: { Accept: "application/json" },
+      });
+      if (!response.ok) {
+        throw new Error("Failed to load profiles");
+      }
+      const data = await response.json();
+      // Handle both old format (just profiles object) and new format (with current_profile_id)
+      const profiles = data.profiles || data;
+      const currentProfileId = data.current_profile_id || null;
+      renderProfiles(profiles, currentProfileId);
+    } catch (error) {
+      console.error("Load profiles failed:", error);
+      profilesList.innerHTML = "";
+      const errorMessage = document.createElement("p");
+      errorMessage.className = "muted-text";
+      errorMessage.textContent = "Failed to load profiles.";
+      profilesList.appendChild(errorMessage);
+    }
+  };
+
+  const createProfile = async () => {
+    if (!newProfileInput) {
+      return;
+    }
+    const name = newProfileInput.value.trim();
+    if (!name) {
+      alert("Profile name cannot be empty.");
+      return;
+    }
+    try {
+      const response = await fetch("/profiles", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name }),
+      });
+      if (!response.ok) {
+        throw new Error("Failed to create profile");
+      }
+      const data = await response.json().catch(() => null);
+      let newProfileId = null;
+      if (data && typeof data === "object") {
+        if (data.id) {
+          newProfileId = String(data.id);
+        } else {
+          const ids = Object.keys(data);
+          if (ids.length > 0) {
+            newProfileId = String(ids[0]);
+          }
+        }
+      }
+
+      if (newProfileId) {
+        await fetch(`/profiles/${newProfileId}/apply`, {
+          method: "POST",
+          headers: { Accept: "application/json" },
+        });
+      }
+
+      newProfileInput.value = "";
+      // Clear current tab and refresh the UI so the new profile starts empty.
+      document.cookie = "current_tab=; path=/; max-age=0";
+      await loadProfiles();
+      if (typeof window.loadTabs === "function") {
+        await window.loadTabs();
+      }
+      if (typeof window.loadTabsModal === "function") {
+        await window.loadTabsModal();
+      }
+      const tabContent = document.getElementById("tab-content");
+      if (tabContent) {
+        tabContent.innerHTML = `
+          <div class="tab-content-placeholder">
+            Select a tab to get started
+          </div>
+        `;
+      }
+    } catch (error) {
+      console.error("Create profile failed:", error);
+      alert("Failed to create profile.");
+    }
+  };
+
+  profilesButton.addEventListener("click", openModal);
+  if (profilesCloseButton) {
+    profilesCloseButton.addEventListener("click", closeModal);
+  }
+  if (createProfileButton) {
+    createProfileButton.addEventListener("click", createProfile);
+  }
+  if (newProfileInput) {
+    newProfileInput.addEventListener("keypress", (event) => {
+      if (event.key === "Enter") {
+        createProfile();
+      }
+    });
+  }
+
+  profilesModal.addEventListener("click", (event) => {
+    if (event.target === profilesModal) {
+      closeModal();
+    }
+  });
+});

src/static/tab_palette.js

@@ -0,0 +1,262 @@
+document.addEventListener('DOMContentLoaded', () => {
+  let selectedIndex = null;
+
+  const getTab = async (tabId) => {
+    const response = await fetch(`/tabs/${tabId}`, {
+      headers: { Accept: 'application/json' },
+    });
+    if (!response.ok) {
+      throw new Error('No tab found');
+    }
+    return response.json();
+  };
+
+  const saveTabColors = async (tabId, colors) => {
+    const response = await fetch(`/tabs/${tabId}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ colors }),
+    });
+    if (!response.ok) {
+      throw new Error('Failed to save tab colors');
+    }
+    return response.json();
+  };
+
+  const renderPalette = (paletteContainer, colors, onColorChange, onRemoveColor, onReorder) => {
+    paletteContainer.innerHTML = '';
+    if (!colors.length) {
+      const empty = document.createElement('div');
+      empty.className = 'muted-text';
+      empty.textContent = 'No colors in palette.';
+      paletteContainer.appendChild(empty);
+      return;
+    }
+
+    colors.forEach((color, index) => {
+      const swatch = document.createElement('div');
+      swatch.className = 'color-swatch';
+      swatch.draggable = true;
+      swatch.dataset.index = String(index);
+      if (index === selectedIndex) {
+        swatch.classList.add('selected');
+      }
+
+      const preview = document.createElement('div');
+      preview.className = 'color-swatch-preview';
+      preview.style.backgroundColor = color;
+
+      const label = document.createElement('span');
+      label.className = 'color-swatch-label';
+      label.textContent = color;
+
+      const colorPicker = document.createElement('input');
+      colorPicker.type = 'color';
+      colorPicker.className = 'color-picker-input';
+      colorPicker.value = color;
+      colorPicker.addEventListener('change', async (event) => {
+        const newColor = event.target.value;
+        await onColorChange(index, newColor);
+      });
+
+      const removeButton = document.createElement('button');
+      removeButton.className = 'btn btn-danger btn-small';
+      removeButton.textContent = 'Remove';
+      removeButton.addEventListener('click', async (event) => {
+        event.stopPropagation();
+        await onRemoveColor(index);
+      });
+
+      swatch.addEventListener('dragstart', (event) => {
+        event.dataTransfer.setData('text/plain', String(index));
+        event.dataTransfer.effectAllowed = 'move';
+      });
+      swatch.addEventListener('dragover', (event) => {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+      });
+      swatch.addEventListener('drop', async (event) => {
+        event.preventDefault();
+        const fromIndex = parseInt(event.dataTransfer.getData('text/plain'), 10);
+        const toIndex = parseInt(swatch.dataset.index || '-1', 10);
+        if (Number.isNaN(fromIndex) || Number.isNaN(toIndex) || fromIndex === toIndex) {
+          return;
+        }
+        await onReorder(fromIndex, toIndex);
+      });
+
+      swatch.appendChild(preview);
+      swatch.appendChild(label);
+      swatch.appendChild(colorPicker);
+      swatch.appendChild(removeButton);
+      swatch.addEventListener('click', () => {
+        selectedIndex = index;
+        renderPalette(paletteContainer, colors, onColorChange, onRemoveColor, onReorder);
+        colorPicker.click();
+      });
+
+      paletteContainer.appendChild(swatch);
+    });
+  };
+
+  const initTabPalette = async () => {
+    const paletteContainer = document.getElementById('color-palette');
+    const addButton = document.getElementById('tab-color-add-btn');
+    const addFromPaletteButton = document.getElementById('tab-color-add-from-palette-btn');
+    const colorInput = document.getElementById('tab-color-input');
+
+    if (!paletteContainer || !addButton || !colorInput) {
+      return;
+    }
+
+    const tabId = paletteContainer.dataset.tabId;
+    if (!tabId) {
+      renderPalette(paletteContainer, []);
+      return;
+    }
+
+    let tabData;
+    try {
+      tabData = await getTab(tabId);
+    } catch (error) {
+      renderPalette(paletteContainer, []);
+      return;
+    }
+
+    let colors = tabData.colors || [];
+    if (!Array.isArray(colors)) {
+      colors = [];
+    }
+    const onRemoveColor = async (index) => {
+      if (index === null || index < 0 || index >= colors.length) {
+        alert('Select a color to remove.');
+        return;
+      }
+      try {
+        const updated = colors.filter((_, i) => i !== index);
+        const saved = await saveTabColors(tabId, updated);
+        colors = saved.colors || updated;
+        selectedIndex = null;
+        renderPalette(paletteContainer, colors, onColorChange, onRemoveColor, onReorder);
+      } catch (error) {
+        console.error('Failed to remove color:', error);
+        alert('Failed to remove color.');
+      }
+    };
+
+    const onReorder = async (fromIndex, toIndex) => {
+      if (fromIndex < 0 || fromIndex >= colors.length || toIndex < 0 || toIndex >= colors.length) {
+        return;
+      }
+      try {
+        const updated = [...colors];
+        const [moved] = updated.splice(fromIndex, 1);
+        updated.splice(toIndex, 0, moved);
+        const saved = await saveTabColors(tabId, updated);
+        colors = saved.colors || updated;
+        selectedIndex = toIndex;
+        renderPalette(paletteContainer, colors, onColorChange, onRemoveColor, onReorder);
+      } catch (error) {
+        console.error('Failed to reorder colors:', error);
+        alert('Failed to reorder colors.');
+      }
+    };
+
+    const onColorChange = async (index, newColor) => {
+      if (!newColor || index < 0 || index >= colors.length) {
+        return;
+      }
+      try {
+        const updated = [...colors];
+        updated[index] = newColor;
+        const saved = await saveTabColors(tabId, updated);
+        colors = saved.colors || updated;
+        selectedIndex = index;
+        renderPalette(paletteContainer, colors, onColorChange, onRemoveColor, onReorder);
+      } catch (error) {
+        console.error('Failed to update color:', error);
+        alert('Failed to update color.');
+      }
+    };
+
+    renderPalette(paletteContainer, colors, onColorChange, onRemoveColor, onReorder);
+
+    addButton.onclick = async () => {
+      const newColor = colorInput.value;
+      if (!newColor) {
+        return;
+      }
+      if (colors.includes(newColor)) {
+        alert('Color already in palette.');
+        return;
+      }
+      try {
+        const updated = [...colors, newColor];
+        const saved = await saveTabColors(tabId, updated);
+        colors = saved.colors || updated;
+        selectedIndex = colors.length - 1;
+        renderPalette(paletteContainer, colors, onColorChange, onRemoveColor, onReorder);
+      } catch (error) {
+        console.error('Failed to add color:', error);
+        alert('Failed to add color.');
+      }
+    };
+
+    if (addFromPaletteButton) {
+      addFromPaletteButton.onclick = () => {
+        const openButton = document.getElementById('color-palette-btn');
+        if (openButton) {
+          openButton.click();
+        }
+        const modal = document.getElementById('color-palette-modal');
+        const modalList = document.getElementById('palette-container');
+        if (modal) {
+          modal.classList.add('active');
+        }
+        if (!modalList) {
+          return;
+        }
+
+        const handlePick = async (event) => {
+          const row = event.target.closest('[data-color]');
+          if (!row) {
+            return;
+          }
+          const picked = row.dataset.color;
+          if (!picked) {
+            return;
+          }
+          try {
+            if (!colors.includes(picked)) {
+              const updated = [...colors, picked];
+              const saved = await saveTabColors(tabId, updated);
+              colors = saved.colors || updated;
+              selectedIndex = colors.indexOf(picked);
+              renderPalette(paletteContainer, colors, onColorChange, onRemoveColor, onReorder);
+            }
+            if (modal) {
+              modal.classList.remove('active');
+            }
+          } catch (error) {
+            console.error('Failed to add palette color:', error);
+            alert('Failed to add palette color.');
+          } finally {
+            modalList.removeEventListener('click', handlePick);
+          }
+        };
+
+        modalList.addEventListener('click', handlePick);
+      };
+    }
+
+  };
+
+  document.body.addEventListener('htmx:afterSwap', (event) => {
+    if (event.target && event.target.id === 'tab-content') {
+      selectedIndex = null;
+      initTabPalette();
+    }
+  });
+
+  initTabPalette();
+});

src/static/tabs.js

@@ -0,0 +1,809 @@
+// Tab management JavaScript
+let currentTabId = null;
+
+// Get current tab from cookie
+function getCurrentTabFromCookie() {
+    const cookies = document.cookie.split(';');
+    for (let cookie of cookies) {
+        const [name, value] = cookie.trim().split('=');
+        if (name === 'current_tab') {
+            return value;
+        }
+    }
+    return null;
+}
+
+// Load tabs list
+async function loadTabs() {
+    try {
+        const response = await fetch('/tabs');
+        const data = await response.json();
+        
+        // Get current tab from cookie first, then from server response
+        const cookieTabId = getCurrentTabFromCookie();
+        const serverCurrent = data.current_tab_id;
+        const tabs = data.tabs || {};
+        const tabIds = Object.keys(tabs);
+
+        let candidateId = cookieTabId || serverCurrent || null;
+        // If the candidate doesn't exist anymore (e.g. after DB reset), fall back to first tab.
+        if (candidateId && !tabIds.includes(String(candidateId))) {
+            candidateId = tabIds.length > 0 ? tabIds[0] : null;
+            // Clear stale cookie
+            document.cookie = 'current_tab=; path=/; max-age=0';
+        }
+
+        currentTabId = candidateId;
+        renderTabsList(data.tabs, data.tab_order, currentTabId);
+        
+        // Load current tab content if available
+        if (currentTabId) {
+            loadTabContent(currentTabId);
+        } else if (data.tab_order && data.tab_order.length > 0) {
+            // Set first tab as current if none is set
+            await setCurrentTab(data.tab_order[0]);
+        }
+    } catch (error) {
+        console.error('Failed to load tabs:', error);
+        const container = document.getElementById('tabs-list');
+        if (container) {
+            container.innerHTML = '<div class="error">Failed to load tabs</div>';
+        }
+    }
+}
+
+// Render tabs list in the main UI
+function renderTabsList(tabs, tabOrder, currentTabId) {
+    const container = document.getElementById('tabs-list');
+    if (!container) return;
+    
+    if (!tabOrder || tabOrder.length === 0) {
+        container.innerHTML = '<div class="muted-text">No tabs available</div>';
+        return;
+    }
+    
+    let html = '<div class="tabs-list">';
+    for (const tabId of tabOrder) {
+        const tab = tabs[tabId];
+        if (tab) {
+            const activeClass = tabId === currentTabId ? 'active' : '';
+            const tabName = tab.name || `Tab ${tabId}`;
+            html += `
+                <button class="tab-button ${activeClass}" 
+                        data-tab-id="${tabId}"
+                        title="Click to select, right-click to edit"
+                        onclick="selectTab('${tabId}')">
+                    ${tabName}
+                </button>
+            `;
+        }
+    }
+    html += '</div>';
+    container.innerHTML = html;
+}
+
+// Render tabs list in modal (like profiles)
+function renderTabsListModal(tabs, tabOrder, currentTabId) {
+    const container = document.getElementById('tabs-list-modal');
+    if (!container) return;
+    
+    container.innerHTML = "";
+    let entries = [];
+
+    if (Array.isArray(tabOrder)) {
+        entries = tabOrder.map((tabId) => [tabId, tabs[tabId] || {}]);
+    } else if (tabs && typeof tabs === "object") {
+        entries = Object.entries(tabs).filter(([key]) => {
+            return key !== 'current_tab_id' && key !== 'tabs' && key !== 'tab_order';
+        });
+    }
+
+    if (entries.length === 0) {
+        const empty = document.createElement("p");
+        empty.className = "muted-text";
+        empty.textContent = "No tabs found.";
+        container.appendChild(empty);
+        return;
+    }
+
+    entries.forEach(([tabId, tab]) => {
+        const row = document.createElement("div");
+        row.className = "profiles-row";
+
+        const label = document.createElement("span");
+        label.textContent = (tab && tab.name) || tabId;
+        if (String(tabId) === String(currentTabId)) {
+            label.textContent = `✓ ${label.textContent}`;
+            label.style.fontWeight = "bold";
+            label.style.color = "#FFD700";
+        }
+
+        const applyButton = document.createElement("button");
+        applyButton.className = "btn btn-secondary btn-small";
+        applyButton.textContent = "Select";
+        applyButton.addEventListener("click", async () => {
+            await selectTab(tabId);
+            document.getElementById('tabs-modal').classList.remove('active');
+        });
+
+        const editButton = document.createElement("button");
+        editButton.className = "btn btn-secondary btn-small";
+        editButton.textContent = "Edit";
+        editButton.addEventListener("click", () => {
+            openEditTabModal(tabId, tab);
+        });
+
+        const sendPresetsButton = document.createElement("button");
+        sendPresetsButton.className = "btn btn-secondary btn-small";
+        sendPresetsButton.textContent = "Send Presets";
+        sendPresetsButton.addEventListener("click", async () => {
+            await sendTabPresets(tabId);
+        });
+
+        const cloneButton = document.createElement("button");
+        cloneButton.className = "btn btn-secondary btn-small";
+        cloneButton.textContent = "Clone";
+        cloneButton.addEventListener("click", async () => {
+            const baseName = (tab && tab.name) || tabId;
+            const suggested = `${baseName} Copy`;
+            const name = prompt("New tab name:", suggested);
+            if (name === null) {
+                return;
+            }
+            const trimmed = String(name).trim();
+            if (!trimmed) {
+                alert("Tab name cannot be empty.");
+                return;
+            }
+            try {
+                const response = await fetch(`/tabs/${tabId}/clone`, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        "Accept": "application/json",
+                    },
+                    body: JSON.stringify({ name: trimmed }),
+                });
+                if (!response.ok) {
+                    const errorData = await response.json().catch(() => ({ error: "Failed to clone tab" }));
+                    throw new Error(errorData.error || "Failed to clone tab");
+                }
+                const data = await response.json().catch(() => null);
+                let newTabId = null;
+                if (data && typeof data === "object") {
+                    if (data.id) {
+                        newTabId = String(data.id);
+                    } else {
+                        const ids = Object.keys(data);
+                        if (ids.length > 0) {
+                            newTabId = String(ids[0]);
+                        }
+                    }
+                }
+                await loadTabsModal();
+                if (newTabId) {
+                    await selectTab(newTabId);
+                } else {
+                    await loadTabs();
+                }
+            } catch (error) {
+                console.error("Clone tab failed:", error);
+                alert("Failed to clone tab: " + error.message);
+            }
+        });
+
+        const deleteButton = document.createElement("button");
+        deleteButton.className = "btn btn-danger btn-small";
+        deleteButton.textContent = "Delete";
+        deleteButton.addEventListener("click", async () => {
+            const confirmed = confirm(`Delete tab "${label.textContent}"?`);
+            if (!confirmed) {
+                return;
+            }
+            try {
+                const response = await fetch(`/tabs/${tabId}`, {
+                    method: "DELETE",
+                    headers: { Accept: "application/json" },
+                });
+                if (!response.ok) {
+                    const errorData = await response.json().catch(() => ({ error: "Failed to delete tab" }));
+                    throw new Error(errorData.error || "Failed to delete tab");
+                }
+                // Clear cookie if deleted tab was current
+                if (tabId === currentTabId) {
+                    document.cookie = 'current_tab=; path=/; max-age=0';
+                    currentTabId = null;
+                }
+                await loadTabsModal();
+                await loadTabs(); // Reload main tabs list
+            } catch (error) {
+                console.error("Delete tab failed:", error);
+                alert("Failed to delete tab: " + error.message);
+            }
+        });
+
+        row.appendChild(label);
+        row.appendChild(applyButton);
+        row.appendChild(editButton);
+        row.appendChild(sendPresetsButton);
+        row.appendChild(cloneButton);
+        row.appendChild(deleteButton);
+        container.appendChild(row);
+    });
+}
+
+// Load tabs in modal
+async function loadTabsModal() {
+    const container = document.getElementById('tabs-list-modal');
+    if (!container) return;
+    
+    container.innerHTML = "";
+    const loading = document.createElement("p");
+    loading.className = "muted-text";
+    loading.textContent = "Loading tabs...";
+    container.appendChild(loading);
+
+    try {
+        const response = await fetch("/tabs", {
+            headers: { Accept: "application/json" },
+        });
+        if (!response.ok) {
+            throw new Error("Failed to load tabs");
+        }
+        const data = await response.json();
+        const tabs = data.tabs || data;
+        const currentTabId = getCurrentTabFromCookie() || data.current_tab_id || null;
+        renderTabsListModal(tabs, data.tab_order || [], currentTabId);
+    } catch (error) {
+        console.error("Load tabs failed:", error);
+        container.innerHTML = "";
+        const errorMessage = document.createElement("p");
+        errorMessage.className = "muted-text";
+        errorMessage.textContent = "Failed to load tabs.";
+        container.appendChild(errorMessage);
+    }
+}
+
+// Select a tab
+async function selectTab(tabId) {
+    // Update active state
+    document.querySelectorAll('.tab-button').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    const btn = document.querySelector(`[data-tab-id="${tabId}"]`);
+    if (btn) {
+        btn.classList.add('active');
+    }
+    
+    // Set as current tab
+    await setCurrentTab(tabId);
+    // Load tab content
+    loadTabContent(tabId);
+}
+
+// Set current tab in cookie
+async function setCurrentTab(tabId) {
+    try {
+        const response = await fetch(`/tabs/${tabId}/set-current`, {
+            method: 'POST'
+        });
+        const data = await response.json();
+        if (response.ok) {
+            currentTabId = tabId;
+            // Also set cookie on client side
+            document.cookie = `current_tab=${tabId}; path=/; max-age=31536000`;
+        } else {
+            console.error('Failed to set current tab:', data.error);
+        }
+    } catch (error) {
+        console.error('Error setting current tab:', error);
+    }
+}
+
+// Load tab content
+async function loadTabContent(tabId) {
+    const container = document.getElementById('tab-content');
+    if (!container) return;
+    
+    try {
+        const response = await fetch(`/tabs/${tabId}`);
+        const tab = await response.json();
+        
+        if (tab.error) {
+            container.innerHTML = `<div class="error">${tab.error}</div>`;
+            return;
+        }
+        
+        // Render tab content (presets section)
+        const tabName = tab.name || `Tab ${tabId}`;
+        const deviceNames = Array.isArray(tab.names) ? tab.names.join(',') : '';
+        container.innerHTML = `
+            <div class="presets-section" data-tab-id="${tabId}" data-device-names="${deviceNames}">
+                <div class="profiles-actions presets-toolbar" style="margin-bottom: 1rem;">
+                    <div class="tab-brightness-group">
+                        <label for="tab-brightness-slider">Brightness</label>
+                        <input type="range" id="tab-brightness-slider" min="0" max="255" value="255">
+                    </div>
+                </div>
+                <div id="presets-list-tab" class="presets-list">
+                    <!-- Presets will be loaded here by presets.js -->
+                </div>
+            </div>
+        `;
+
+        // Wire up per-tab brightness slider to send global brightness via ESPNow.
+        const brightnessSlider = container.querySelector('#tab-brightness-slider');
+        let brightnessSendTimeout = null;
+        if (brightnessSlider) {
+            brightnessSlider.addEventListener('input', (e) => {
+                const val = parseInt(e.target.value, 10) || 0;
+                if (brightnessSendTimeout) {
+                    clearTimeout(brightnessSendTimeout);
+                }
+                brightnessSendTimeout = setTimeout(() => {
+                    if (typeof window.sendEspnowRaw === 'function') {
+                        try {
+                            window.sendEspnowRaw({ v: '1', b: val });
+                        } catch (err) {
+                            console.error('Failed to send brightness via ESPNow:', err);
+                        }
+                    }
+                }, 150);
+            });
+        }
+        
+        // Trigger presets loading if the function exists
+        if (typeof renderTabPresets === 'function') {
+            renderTabPresets(tabId);
+        }
+    } catch (error) {
+        console.error('Failed to load tab content:', error);
+        container.innerHTML = '<div class="error">Failed to load tab content</div>';
+    }
+}
+
+// Send all presets used by a tab via the /presets/send HTTP endpoint.
+async function sendTabPresets(tabId) {
+    try {
+        // Load tab data to determine which presets are used
+        const tabResponse = await fetch(`/tabs/${tabId}`, {
+            headers: { Accept: 'application/json' },
+        });
+        if (!tabResponse.ok) {
+            alert('Failed to load tab to send presets.');
+            return;
+        }
+        const tabData = await tabResponse.json();
+
+        // Extract preset IDs from tab (supports grid, flat, and legacy formats)
+        let presetIds = [];
+        if (Array.isArray(tabData.presets_flat)) {
+            presetIds = tabData.presets_flat;
+        } else if (Array.isArray(tabData.presets)) {
+            if (tabData.presets.length && typeof tabData.presets[0] === 'string') {
+                // Flat array of IDs
+                presetIds = tabData.presets;
+            } else if (tabData.presets.length && Array.isArray(tabData.presets[0])) {
+                // 2D grid
+                presetIds = tabData.presets.flat();
+            }
+        }
+        presetIds = (presetIds || []).filter(Boolean);
+
+        if (!presetIds.length) {
+            alert('This tab has no presets to send.');
+            return;
+        }
+
+        // Call server-side ESPNow sender with just the IDs; it handles chunking.
+        const payload = { preset_ids: presetIds };
+        if (tabData.default_preset) {
+            payload.default = tabData.default_preset;
+        }
+        const response = await fetch('/presets/send', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+            },
+            body: JSON.stringify(payload),
+        });
+
+        const data = await response.json().catch(() => ({}));
+        if (!response.ok) {
+            const msg = (data && data.error) || 'Failed to send presets.';
+            alert(msg);
+            return;
+        }
+
+        const sent = typeof data.presets_sent === 'number' ? data.presets_sent : presetIds.length;
+        const messages = typeof data.messages_sent === 'number' ? data.messages_sent : '?';
+        alert(`Sent ${sent} preset(s) in ${messages} ESPNow message(s).`);
+    } catch (error) {
+        console.error('Failed to send tab presets:', error);
+        alert('Failed to send tab presets.');
+    }
+}
+
+// Send all presets used by all tabs in the current profile via /presets/send.
+async function sendProfilePresets() {
+    try {
+        // Load current profile to get its tabs
+        const profileRes = await fetch('/profiles/current', {
+            headers: { Accept: 'application/json' },
+        });
+        if (!profileRes.ok) {
+            alert('Failed to load current profile.');
+            return;
+        }
+        const profileData = await profileRes.json();
+        const profile = profileData.profile || {};
+        let tabList = null;
+        if (Array.isArray(profile.tabs)) {
+            tabList = profile.tabs;
+        } else if (profile.tabs) {
+            tabList = [profile.tabs];
+        }
+        if (!tabList || tabList.length === 0) {
+            if (Array.isArray(profile.tab_order)) {
+                tabList = profile.tab_order;
+            } else if (profile.tab_order) {
+                tabList = [profile.tab_order];
+            } else {
+                tabList = [];
+            }
+        }
+        if (!tabList || tabList.length === 0) {
+            console.warn('sendProfilePresets: no tabs found', {
+                profileData,
+                profile,
+            });
+        }
+
+        if (!tabList.length) {
+            alert('Current profile has no tabs to send presets for.');
+            return;
+        }
+
+        let totalSent = 0;
+        let totalMessages = 0;
+        let tabsWithPresets = 0;
+
+        for (const tabId of tabList) {
+            try {
+                const tabResp = await fetch(`/tabs/${tabId}`, {
+                    headers: { Accept: 'application/json' },
+                });
+                if (!tabResp.ok) {
+                    continue;
+                }
+                const tabData = await tabResp.json();
+                let presetIds = [];
+                if (Array.isArray(tabData.presets_flat)) {
+                    presetIds = tabData.presets_flat;
+                } else if (Array.isArray(tabData.presets)) {
+                    if (tabData.presets.length && typeof tabData.presets[0] === 'string') {
+                        presetIds = tabData.presets;
+                    } else if (tabData.presets.length && Array.isArray(tabData.presets[0])) {
+                        presetIds = tabData.presets.flat();
+                    }
+                }
+                presetIds = (presetIds || []).filter(Boolean);
+                if (!presetIds.length) {
+                    continue;
+                }
+                tabsWithPresets += 1;
+                const payload = { preset_ids: presetIds };
+                if (tabData.default_preset) {
+                    payload.default = tabData.default_preset;
+                }
+                const response = await fetch('/presets/send', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json',
+                    },
+                    body: JSON.stringify(payload),
+                });
+                const data = await response.json().catch(() => ({}));
+                if (!response.ok) {
+                    const msg = (data && data.error) || `Failed to send presets for tab ${tabId}.`;
+                    console.warn(msg);
+                    continue;
+                }
+                totalSent += typeof data.presets_sent === 'number' ? data.presets_sent : presetIds.length;
+                totalMessages += typeof data.messages_sent === 'number' ? data.messages_sent : 0;
+            } catch (e) {
+                console.error('Failed to send profile presets for tab:', tabId, e);
+            }
+        }
+
+        if (!tabsWithPresets) {
+            alert('No presets to send for the current profile.');
+            return;
+        }
+
+        const messagesLabel = totalMessages ? totalMessages : '?';
+        alert(`Sent ${totalSent} preset(s) across ${tabsWithPresets} tab(s) in ${messagesLabel} ESPNow message(s).`);
+    } catch (error) {
+        console.error('Failed to send profile presets:', error);
+        alert('Failed to send profile presets.');
+    }
+}
+
+// Populate the "Add presets to this tab" list: only presets NOT already in the tab, each with a Select button.
+async function populateEditTabPresetsList(tabId) {
+    const listEl = document.getElementById('edit-tab-presets-list');
+    if (!listEl) return;
+    listEl.innerHTML = '<span class="muted-text">Loading…</span>';
+    try {
+        const tabRes = await fetch(`/tabs/${tabId}`, { headers: { Accept: 'application/json' } });
+        if (!tabRes.ok) {
+            listEl.innerHTML = '<span class="muted-text">Failed to load presets.</span>';
+            return;
+        }
+        const tabData = await tabRes.json();
+        let inTabIds = [];
+        if (Array.isArray(tabData.presets_flat)) {
+            inTabIds = tabData.presets_flat;
+        } else if (Array.isArray(tabData.presets)) {
+            if (tabData.presets.length && typeof tabData.presets[0] === 'string') {
+                inTabIds = tabData.presets;
+            } else if (tabData.presets.length && Array.isArray(tabData.presets[0])) {
+                inTabIds = tabData.presets.flat();
+            }
+        }
+        const presetsRes = await fetch('/presets', { headers: { Accept: 'application/json' } });
+        const allPresets = presetsRes.ok ? await presetsRes.json() : {};
+        const allIds = Object.keys(allPresets);
+        const availableToAdd = allIds.filter(id => !inTabIds.includes(id));
+        listEl.innerHTML = '';
+        if (availableToAdd.length === 0) {
+            listEl.innerHTML = '<span class="muted-text">No presets to add. All presets are already in this tab.</span>';
+            return;
+        }
+        for (const presetId of availableToAdd) {
+            const preset = allPresets[presetId] || {};
+            const name = preset.name || presetId;
+            const row = document.createElement('div');
+            row.className = 'profiles-row';
+            row.style.display = 'flex';
+            row.style.alignItems = 'center';
+            row.style.justifyContent = 'space-between';
+            row.style.gap = '0.5rem';
+            const label = document.createElement('span');
+            label.textContent = name;
+            const selectBtn = document.createElement('button');
+            selectBtn.type = 'button';
+            selectBtn.className = 'btn btn-primary btn-small';
+            selectBtn.textContent = 'Select';
+            selectBtn.addEventListener('click', async () => {
+                if (typeof window.addPresetToTab === 'function') {
+                    await window.addPresetToTab(presetId, tabId);
+                    await populateEditTabPresetsList(tabId);
+                }
+            });
+            row.appendChild(label);
+            row.appendChild(selectBtn);
+            listEl.appendChild(row);
+        }
+    } catch (e) {
+        console.error('populateEditTabPresetsList:', e);
+        listEl.innerHTML = '<span class="muted-text">Failed to load presets.</span>';
+    }
+}
+
+// Open edit tab modal
+function openEditTabModal(tabId, tab) {
+    const modal = document.getElementById('edit-tab-modal');
+    const idInput = document.getElementById('edit-tab-id');
+    const nameInput = document.getElementById('edit-tab-name');
+    const idsInput = document.getElementById('edit-tab-ids');
+    
+    if (idInput) idInput.value = tabId;
+    if (nameInput) nameInput.value = tab ? (tab.name || '') : '';
+    if (idsInput) idsInput.value = tab && tab.names ? tab.names.join(', ') : '1';
+    
+    if (modal) modal.classList.add('active');
+    populateEditTabPresetsList(tabId);
+}
+
+// Update an existing tab
+async function updateTab(tabId, name, ids) {
+    try {
+        const names = ids ? ids.split(',').map(id => id.trim()) : ['1'];
+        const response = await fetch(`/tabs/${tabId}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                name: name,
+                names: names
+            })
+        });
+        
+        const data = await response.json();
+        if (response.ok) {
+            // Reload tabs list
+            await loadTabsModal();
+            await loadTabs();
+            // Close modal
+            document.getElementById('edit-tab-modal').classList.remove('active');
+            return true;
+        } else {
+            alert(`Error: ${data.error || 'Failed to update tab'}`);
+            return false;
+        }
+    } catch (error) {
+        console.error('Failed to update tab:', error);
+        alert('Failed to update tab');
+        return false;
+    }
+}
+
+// Create a new tab
+async function createTab(name, ids) {
+    try {
+        const names = ids ? ids.split(',').map(id => id.trim()) : ['1'];
+        const response = await fetch('/tabs', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                name: name,
+                names: names
+            })
+        });
+        
+        const data = await response.json();
+        if (response.ok) {
+            // Reload tabs list
+            await loadTabsModal();
+            await loadTabs();
+            // Select the new tab
+            if (data && Object.keys(data).length > 0) {
+                const newTabId = Object.keys(data)[0];
+                await selectTab(newTabId);
+            }
+            return true;
+        } else {
+            alert(`Error: ${data.error || 'Failed to create tab'}`);
+            return false;
+        }
+    } catch (error) {
+        console.error('Failed to create tab:', error);
+        alert('Failed to create tab');
+        return false;
+    }
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', () => {
+    loadTabs();
+    
+    // Set up tabs modal
+    const tabsButton = document.getElementById('tabs-btn');
+    const tabsModal = document.getElementById('tabs-modal');
+    const tabsCloseButton = document.getElementById('tabs-close-btn');
+    const newTabNameInput = document.getElementById('new-tab-name');
+    const newTabIdsInput = document.getElementById('new-tab-ids');
+    const createTabButton = document.getElementById('create-tab-btn');
+    
+    if (tabsButton && tabsModal) {
+        tabsButton.addEventListener('click', () => {
+            tabsModal.classList.add('active');
+            loadTabsModal();
+        });
+    }
+    
+    if (tabsCloseButton) {
+        tabsCloseButton.addEventListener('click', () => {
+            tabsModal.classList.remove('active');
+        });
+    }
+    
+    if (tabsModal) {
+        tabsModal.addEventListener('click', (event) => {
+            if (event.target === tabsModal) {
+                tabsModal.classList.remove('active');
+            }
+        });
+    }
+
+    // Right-click on a tab button in the main header bar to edit that tab
+    document.addEventListener('contextmenu', async (event) => {
+        const btn = event.target.closest('.tab-button');
+        if (!btn || !btn.dataset.tabId) {
+            return;
+        }
+        event.preventDefault();
+        const tabId = btn.dataset.tabId;
+        try {
+            const response = await fetch(`/tabs/${tabId}`);
+            if (response.ok) {
+                const tab = await response.json();
+                openEditTabModal(tabId, tab);
+            } else {
+                alert('Failed to load tab for editing');
+            }
+        } catch (error) {
+            console.error('Failed to load tab:', error);
+            alert('Failed to load tab for editing');
+        }
+    });
+    
+    // Set up create tab
+    const createTabHandler = async () => {
+        if (!newTabNameInput) return;
+        const name = newTabNameInput.value.trim();
+        const ids = (newTabIdsInput && newTabIdsInput.value.trim()) || '1';
+        
+        if (name) {
+            await createTab(name, ids);
+            if (newTabNameInput) newTabNameInput.value = '';
+            if (newTabIdsInput) newTabIdsInput.value = '1';
+        }
+    };
+    
+    if (createTabButton) {
+        createTabButton.addEventListener('click', createTabHandler);
+    }
+    
+    if (newTabNameInput) {
+        newTabNameInput.addEventListener('keypress', (event) => {
+            if (event.key === 'Enter') {
+                createTabHandler();
+            }
+        });
+    }
+    
+    // Set up edit tab form
+    const editTabForm = document.getElementById('edit-tab-form');
+    if (editTabForm) {
+        editTabForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const idInput = document.getElementById('edit-tab-id');
+            const nameInput = document.getElementById('edit-tab-name');
+            const idsInput = document.getElementById('edit-tab-ids');
+            
+            const tabId = idInput ? idInput.value : null;
+            const name = nameInput ? nameInput.value.trim() : '';
+            const ids = idsInput ? idsInput.value.trim() : '1';
+            
+            if (tabId && name) {
+                await updateTab(tabId, name, ids);
+                editTabForm.reset();
+            }
+        });
+    }
+    
+    // Close edit modal when clicking outside
+    const editTabModal = document.getElementById('edit-tab-modal');
+    if (editTabModal) {
+        editTabModal.addEventListener('click', (event) => {
+            if (event.target === editTabModal) {
+                editTabModal.classList.remove('active');
+            }
+        });
+    }
+
+    // Profile-wide "Send Presets" button in header
+    const sendProfilePresetsBtn = document.getElementById('send-profile-presets-btn');
+    if (sendProfilePresetsBtn) {
+        sendProfilePresetsBtn.addEventListener('click', async () => {
+            await sendProfilePresets();
+        });
+    }
+});
+
+// Export for use in other scripts
+window.tabsManager = {
+    loadTabs,
+    selectTab,
+    createTab,
+    updateTab,
+    openEditTabModal,
+    getCurrentTabId: () => currentTabId
+};

src/templates/index.html

@@ -1,14 +1,321 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <title>RGB Slider Tabs</title>
-        <link rel="stylesheet" href="styles.css" />
-    </head>
-    <body>
-        <div class="tabs"></div>
-        <div class="tab-content"></div>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LED Controller - Tab Mode</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div class="app-container">
+        <header>
+            <div class="tabs-container">
+                <div id="tabs-list">
+                    Loading tabs...
+                </div>
+            </div>
+            <div class="header-actions">
+                <button class="btn btn-secondary" id="tabs-btn">Tabs</button>
+                <button class="btn btn-secondary" id="color-palette-btn">Color Palette</button>
+                <button class="btn btn-secondary" id="presets-btn">Presets</button>
+                <button class="btn btn-secondary" id="send-profile-presets-btn">Send Presets</button>
+                <button class="btn btn-secondary" id="patterns-btn">Patterns</button>
+                <button class="btn btn-secondary" id="profiles-btn">Profiles</button>
+                <button class="btn btn-secondary" id="settings-btn">Settings</button>
+                <button class="btn btn-secondary" id="help-btn">Help</button>
+            </div>
+            <div class="header-menu-mobile">
+                <button class="btn btn-secondary" id="main-menu-btn">Menu</button>
+                <div id="main-menu-dropdown" class="main-menu-dropdown">
+                    <button type="button" data-target="tabs-btn">Tabs</button>
+                    <button type="button" data-target="color-palette-btn">Color Palette</button>
+                    <button type="button" data-target="presets-btn">Presets</button>
+                    <button type="button" data-target="send-profile-presets-btn">Send Presets</button>
+                    <button type="button" data-target="patterns-btn">Patterns</button>
+                    <button type="button" data-target="profiles-btn">Profiles</button>
+                    <button type="button" data-target="settings-btn">Settings</button>
+                    <button type="button" data-target="help-btn">Help</button>
+                </div>
+            </div>
+        </header>
 
-        <script type="module" src="main.js"></script>
-    </body>
+        <div class="main-content">
+            <div id="tab-content" class="tab-content">
+                <div class="tab-content-placeholder">
+                    Select a tab to get started
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Tabs Modal -->
+    <div id="tabs-modal" class="modal">
+        <div class="modal-content">
+            <h2>Tabs</h2>
+            <div class="profiles-actions">
+                <input type="text" id="new-tab-name" placeholder="Tab name">
+                <input type="text" id="new-tab-ids" placeholder="Device IDs (1,2,3)" value="1">
+                <button class="btn btn-primary" id="create-tab-btn">Create</button>
+            </div>
+            <div id="tabs-list-modal" class="profiles-list"></div>
+            <div class="modal-actions">
+                <button class="btn btn-secondary" id="tabs-close-btn">Close</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Edit Tab Modal -->
+    <div id="edit-tab-modal" class="modal">
+        <div class="modal-content">
+            <h2>Edit Tab</h2>
+            <form id="edit-tab-form">
+                <input type="hidden" id="edit-tab-id">
+                <div class="modal-actions" style="margin-bottom: 1rem;">
+                    <button type="submit" class="btn btn-primary">Save</button>
+                    <button type="button" class="btn btn-secondary" onclick="document.getElementById('edit-tab-modal').classList.remove('active')">Close</button>
+                </div>
+                <label>Tab Name:</label>
+                <input type="text" id="edit-tab-name" placeholder="Enter tab name" required>
+                <label>Device IDs (comma-separated):</label>
+                <input type="text" id="edit-tab-ids" placeholder="1,2,3" required>
+                <label style="margin-top: 1rem;">Add presets to this tab</label>
+                <div id="edit-tab-presets-list" class="profiles-list" style="max-height: 200px; overflow-y: auto; margin-bottom: 1rem;"></div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Profiles Modal -->
+    <div id="profiles-modal" class="modal">
+        <div class="modal-content">
+            <h2>Profiles</h2>
+            <div class="profiles-actions">
+                <input type="text" id="new-profile-name" placeholder="Profile name">
+                <button class="btn btn-primary" id="create-profile-btn">Create</button>
+            </div>
+            <div id="profiles-list" class="profiles-list"></div>
+            <div class="modal-actions">
+                <button class="btn btn-secondary" id="profiles-close-btn">Close</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Presets Modal -->
+    <div id="presets-modal" class="modal">
+        <div class="modal-content">
+            <h2>Presets</h2>
+            <div class="modal-actions">
+                <button class="btn btn-primary" id="preset-add-btn">Add</button>
+            </div>
+            <div id="presets-list" class="profiles-list"></div>
+            <div class="modal-actions">
+                <button class="btn btn-secondary" id="presets-close-btn">Close</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Preset Editor Modal -->
+    <div id="preset-editor-modal" class="modal">
+        <div class="modal-content">
+            <h2>Preset</h2>
+            <div class="profiles-actions">
+                <input type="text" id="preset-name-input" placeholder="Preset name">
+                <select id="preset-pattern-input">
+                    <option value="">Pattern</option>
+                </select>
+            </div>
+            <label>Colors</label>
+            <div id="preset-colors-container" class="preset-colors-container"></div>
+            <div class="profiles-actions">
+                <input type="color" id="preset-new-color" value="#ffffff">
+                <button class="btn btn-secondary btn-small" id="preset-add-color-btn">Add Color</button>
+                <button class="btn btn-secondary btn-small" id="preset-add-from-palette-btn">Add from Palette</button>
+            </div>
+            <div class="profiles-actions">
+                <div class="preset-editor-field">
+                    <label for="preset-brightness-input">Brightness (0–255)</label>
+                    <input type="number" id="preset-brightness-input" placeholder="Brightness" min="0" max="255" value="0">
+                </div>
+                <div class="preset-editor-field">
+                    <label for="preset-delay-input">Delay (ms)</label>
+                    <input type="number" id="preset-delay-input" placeholder="Delay" min="0" max="10000" value="0">
+                </div>
+            </div>
+            <div class="n-params-grid">
+                <div class="n-param-group">
+                    <label for="preset-n1-input" id="preset-n1-label">n1:</label>
+                    <input type="number" id="preset-n1-input" min="0" max="255" value="0" class="n-input">
+                </div>
+                <div class="n-param-group">
+                    <label for="preset-n2-input" id="preset-n2-label">n2:</label>
+                    <input type="number" id="preset-n2-input" min="0" max="255" value="0" class="n-input">
+                </div>
+                <div class="n-param-group">
+                    <label for="preset-n3-input" id="preset-n3-label">n3:</label>
+                    <input type="number" id="preset-n3-input" min="0" max="255" value="0" class="n-input">
+                </div>
+                <div class="n-param-group">
+                    <label for="preset-n4-input" id="preset-n4-label">n4:</label>
+                    <input type="number" id="preset-n4-input" min="0" max="255" value="0" class="n-input">
+                </div>
+                <div class="n-param-group">
+                    <label for="preset-n5-input" id="preset-n5-label">n5:</label>
+                    <input type="number" id="preset-n5-input" min="0" max="255" value="0" class="n-input">
+                </div>
+                <div class="n-param-group">
+                    <label for="preset-n6-input" id="preset-n6-label">n6:</label>
+                    <input type="number" id="preset-n6-input" min="0" max="255" value="0" class="n-input">
+                </div>
+                <div class="n-param-group">
+                    <label for="preset-n7-input" id="preset-n7-label">n7:</label>
+                    <input type="number" id="preset-n7-input" min="0" max="255" value="0" class="n-input">
+                </div>
+                <div class="n-param-group">
+                    <label for="preset-n8-input" id="preset-n8-label">n8:</label>
+                    <input type="number" id="preset-n8-input" min="0" max="255" value="0" class="n-input">
+                </div>
+            </div>
+            <div class="modal-actions">
+                <button class="btn btn-secondary" id="preset-send-btn">Try</button>
+                <button class="btn btn-secondary" id="preset-default-btn">Default</button>
+                <button class="btn btn-primary" id="preset-save-btn">Save &amp; Send</button>
+                <button class="btn btn-danger" id="preset-remove-from-tab-btn">Remove from Tab</button>
+                <button class="btn btn-secondary" id="preset-clear-btn">Clear</button>
+                <button class="btn btn-secondary" id="preset-editor-close-btn">Close</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Patterns Modal -->
+    <div id="patterns-modal" class="modal">
+        <div class="modal-content">
+            <h2>Patterns</h2>
+            <div id="patterns-list" class="profiles-list"></div>
+            <div class="modal-actions">
+                <button class="btn btn-secondary" id="patterns-close-btn">Close</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Color Palette Modal -->
+    <div id="color-palette-modal" class="modal">
+        <div class="modal-content">
+            <h2>Color Palette</h2>
+            <p class="muted-text">Profile: <span id="palette-current-profile-name">None</span></p>
+            <div id="palette-container" class="profiles-list"></div>
+            <div class="profiles-actions">
+                <input type="color" id="palette-new-color" value="#ffffff">
+                <button class="btn btn-primary" id="palette-add-color-btn">Add Color</button>
+            </div>
+            <div class="modal-actions">
+                <button class="btn btn-secondary" id="color-palette-close-btn">Close</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Help Modal -->
+    <div id="help-modal" class="modal">
+        <div class="modal-content">
+            <h2>Help</h2>
+            <p class="muted-text">How to use the LED controller UI.</p>
+
+            <h3>Tabs & devices</h3>
+            <ul>
+                <li><strong>Select tab</strong>: left-click a tab button in the top bar.</li>
+                <li><strong>Edit tab</strong>: right-click a tab button, or click <strong>Edit</strong> in the Tabs modal.</li>
+                <li><strong>Send all presets</strong>: open the <strong>Tabs</strong> menu and click <strong>Send Presets</strong> next to the tab to push every preset used in that tab to all devices.</li>
+            </ul>
+
+            <h3>Presets in a tab</h3>
+            <ul>
+                <li><strong>Select preset</strong>: left-click a preset tile to select it and send a <code>select</code> message to all devices in the tab.</li>
+                <li><strong>Edit preset</strong>: right-click a preset tile and choose <strong>Edit preset…</strong>.</li>
+                <li><strong>Remove from tab</strong>: right-click a preset tile and choose <strong>Remove from this tab</strong> (the preset itself is not deleted, only its link from this tab).</li>
+                <li><strong>Reorder presets</strong>: drag preset tiles to change their order; the new layout is saved automatically.</li>
+            </ul>
+
+            <h3>Presets, profiles & colors</h3>
+            <ul>
+                <li><strong>Presets</strong>: use the <strong>Presets</strong> button in the header to create and manage reusable presets.</li>
+                <li><strong>Profiles</strong>: use <strong>Profiles</strong> to save and recall groups of settings.</li>
+                <li><strong>Color Palette</strong>: use <strong>Color Palette</strong> to build a reusable set of colors you can pull into presets.</li>
+            </ul>
+
+            <div class="modal-actions">
+                <button class="btn btn-secondary" id="help-close-btn">Close</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Settings Modal -->
+    <div id="settings-modal" class="modal">
+        <div class="modal-content">
+            <h2>Device Settings</h2>
+            <p class="muted-text">Configure WiFi Access Point and device settings.</p>
+
+            <div id="settings-message" class="message"></div>
+
+            <!-- Device Name -->
+            <div class="settings-section">
+                <h3>Device</h3>
+                <form id="device-form">
+                    <div class="form-group">
+                        <label for="device-name-input">Device Name</label>
+                        <input type="text" id="device-name-input" name="device_name" placeholder="e.g. led-controller" required>
+                        <small>This name may be used for mDNS (e.g. <code>name.local</code>) and UI display.</small>
+                    </div>
+                    <div class="btn-group">
+                        <button type="submit" class="btn btn-primary btn-full">Save Name</button>
+                    </div>
+                </form>
+            </div>
+
+            <!-- WiFi Access Point Settings -->
+            <div class="settings-section ap-settings-section">
+                <h3>WiFi Access Point</h3>
+
+                <div id="ap-status" class="status-info">
+                    <h4>AP Status</h4>
+                    <p>Loading...</p>
+                </div>
+
+                <form id="ap-form">
+                    <div class="form-group">
+                        <label for="ap-ssid">AP SSID (Network Name)</label>
+                        <input type="text" id="ap-ssid" name="ssid" placeholder="Enter AP name" required>
+                        <small>The name of the WiFi access point this device creates</small>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="ap-password">AP Password</label>
+                        <input type="password" id="ap-password" name="password" placeholder="Enter AP password (min 8 chars)">
+                        <small>Leave empty for open network (min 8 characters if set)</small>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="ap-channel">Channel (1-11)</label>
+                        <input type="number" id="ap-channel" name="channel" min="1" max="11" placeholder="Auto">
+                        <small>WiFi channel (1-11 for 2.4GHz). Leave empty for auto.</small>
+                    </div>
+
+                    <div class="btn-group">
+                        <button type="submit" class="btn btn-primary btn-full">Configure AP</button>
+                    </div>
+                </form>
+            </div>
+
+            <div class="modal-actions">
+                <button class="btn btn-secondary" id="settings-close-btn">Close</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Styles moved to /static/style.css -->
+    <script src="/static/tabs.js"></script>
+    <script src="/static/help.js"></script>
+    <script src="/static/color_palette.js"></script>
+    <script src="/static/profiles.js"></script>
+    <script src="/static/tab_palette.js"></script>
+    <script src="/static/patterns.js"></script>
+    <script src="/static/presets.js"></script>
+</body>
 </html>

src/templates/settings.html

@@ -0,0 +1,309 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LED Controller - Settings</title>
+    <link rel="stylesheet" href="/static/style.css">
+    <style>
+        .settings-container {
+            padding: 2rem;
+            max-width: 1200px;
+            margin: 0 auto;
+            overflow-y: auto;
+            height: 100%;
+        }
+
+        .settings-header {
+            margin-bottom: 2rem;
+        }
+
+        .settings-header h1 {
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .settings-header p {
+            color: #aaa;
+        }
+
+        .settings-section {
+            background-color: #1a1a1a;
+            border-radius: 8px;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+            border: 1px solid #4a4a4a;
+        }
+
+        .settings-section h2 {
+            font-size: 1.3rem;
+            margin-bottom: 1rem;
+            color: #fff;
+            border-bottom: 2px solid #4a4a4a;
+            padding-bottom: 0.5rem;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            color: #ccc;
+            font-weight: 500;
+        }
+
+        .form-group input[type="text"],
+        .form-group input[type="password"],
+        .form-group input[type="number"],
+        .form-group select {
+            width: 100%;
+            padding: 0.75rem;
+            background-color: #2e2e2e;
+            border: 1px solid #4a4a4a;
+            border-radius: 4px;
+            color: white;
+            font-size: 1rem;
+        }
+
+        .form-group input:focus,
+        .form-group select:focus {
+            outline: none;
+            border-color: #5a5a5a;
+        }
+
+        .form-group small {
+            display: block;
+            margin-top: 0.25rem;
+            color: #888;
+            font-size: 0.875rem;
+        }
+
+        .form-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+        }
+
+        .status-info {
+            background-color: #2e2e2e;
+            border: 1px solid #4a4a4a;
+            border-radius: 4px;
+            padding: 1rem;
+            margin-bottom: 1rem;
+        }
+
+        .status-info h3 {
+            font-size: 1rem;
+            margin-bottom: 0.5rem;
+            color: #fff;
+        }
+
+        .status-info p {
+            color: #aaa;
+            margin: 0.25rem 0;
+            font-size: 0.9rem;
+        }
+
+        .status-connected {
+            color: #4caf50;
+        }
+
+        .status-disconnected {
+            color: #f44336;
+        }
+
+        .btn-group {
+            display: flex;
+            gap: 0.5rem;
+            margin-top: 1rem;
+        }
+
+        .btn-full {
+            flex: 1;
+        }
+
+        .back-link {
+            display: inline-block;
+            margin-bottom: 1rem;
+            color: #aaa;
+            text-decoration: none;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            transition: background-color 0.2s;
+        }
+
+        .back-link:hover {
+            background-color: #2e2e2e;
+            color: white;
+        }
+
+        .message {
+            padding: 0.75rem;
+            border-radius: 4px;
+            margin-bottom: 1rem;
+            display: none;
+        }
+
+        .message.success {
+            background-color: #1b5e20;
+            color: #4caf50;
+            border: 1px solid #4caf50;
+        }
+
+        .message.error {
+            background-color: #5e1b1b;
+            color: #f44336;
+            border: 1px solid #f44336;
+        }
+
+        .message.show {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <div class="settings-container">
+            <a href="/" class="back-link">← Back to Dashboard</a>
+            
+            <div class="settings-header">
+                <h1>Device Settings</h1>
+                <p>Configure WiFi Access Point settings</p>
+            </div>
+
+            <div id="message" class="message"></div>
+
+            <!-- WiFi Access Point Settings -->
+            <div class="settings-section">
+                <h2>WiFi Access Point Settings</h2>
+                
+                <div id="ap-status" class="status-info">
+                    <h3>AP Status</h3>
+                    <p>Loading...</p>
+                </div>
+
+                <form id="ap-form">
+                    <div class="form-group">
+                        <label for="ap-ssid">AP SSID (Network Name)</label>
+                        <input type="text" id="ap-ssid" name="ssid" placeholder="Enter AP name" required>
+                        <small>The name of the WiFi access point this device creates</small>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="ap-password">AP Password</label>
+                        <input type="password" id="ap-password" name="password" placeholder="Enter AP password (min 8 chars)">
+                        <small>Leave empty for open network (min 8 characters if set)</small>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="ap-channel">Channel (1-11)</label>
+                        <input type="number" id="ap-channel" name="channel" min="1" max="11" placeholder="Auto">
+                        <small>WiFi channel (1-11 for 2.4GHz). Leave empty for auto.</small>
+                    </div>
+
+                    <div class="btn-group">
+                        <button type="submit" class="btn btn-primary btn-full">Configure AP</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Show message helper
+        function showMessage(text, type = 'success') {
+            const messageEl = document.getElementById('message');
+            messageEl.textContent = text;
+            messageEl.className = `message ${type} show`;
+            setTimeout(() => {
+                messageEl.classList.remove('show');
+            }, 5000);
+        }
+
+        // Load AP status and config
+        async function loadAPStatus() {
+            try {
+                const response = await fetch('/settings/wifi/ap');
+                const config = await response.json();
+                
+                const statusEl = document.getElementById('ap-status');
+                if (config.active) {
+                    statusEl.innerHTML = `
+                        <h3>AP Status: <span class="status-connected">Active</span></h3>
+                        <p><strong>SSID:</strong> ${config.ssid || 'N/A'}</p>
+                        <p><strong>Channel:</strong> ${config.channel || 'Auto'}</p>
+                        <p><strong>IP Address:</strong> ${config.ip || 'N/A'}</p>
+                    `;
+                } else {
+                    statusEl.innerHTML = `
+                        <h3>AP Status: <span class="status-disconnected">Inactive</span></h3>
+                        <p>Access Point is not currently active</p>
+                    `;
+                }
+
+                // Load saved values
+                if (config.saved_ssid) document.getElementById('ap-ssid').value = config.saved_ssid;
+                if (config.saved_channel) document.getElementById('ap-channel').value = config.saved_channel;
+            } catch (error) {
+                console.error('Error loading AP status:', error);
+            }
+        }
+
+        // AP form submission
+        document.getElementById('ap-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const formData = {
+                ssid: document.getElementById('ap-ssid').value,
+                password: document.getElementById('ap-password').value,
+                channel: document.getElementById('ap-channel').value || null
+            };
+
+            // Validate password length if provided
+            if (formData.password && formData.password.length > 0 && formData.password.length < 8) {
+                showMessage('AP password must be at least 8 characters', 'error');
+                return;
+            }
+
+            // Convert channel to number if provided
+            if (formData.channel) {
+                formData.channel = parseInt(formData.channel);
+                if (formData.channel < 1 || formData.channel > 11) {
+                    showMessage('Channel must be between 1 and 11', 'error');
+                    return;
+                }
+            }
+
+            try {
+                const response = await fetch('/settings/wifi/ap', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(formData)
+                });
+
+                const result = await response.json();
+                
+                if (response.ok) {
+                    showMessage('Access Point configured successfully!', 'success');
+                    setTimeout(loadAPStatus, 1000);
+                } else {
+                    showMessage(`Error: ${result.error || 'Failed to configure AP'}`, 'error');
+                }
+            } catch (error) {
+                showMessage(`Error: ${error.message}`, 'error');
+            }
+        });
+
+        // Load all data on page load
+        loadAPStatus();
+
+        // Refresh status every 10 seconds
+        setInterval(loadAPStatus, 10000);
+    </script>
+</body>
+</html>
+

src/util/README.md

@@ -0,0 +1,80 @@
+# ESPNow Message Builder
+
+This utility module provides functions to build ESPNow messages according to the LED Driver API specification.
+
+## Usage
+
+### Basic Message Building
+
+```python
+from util.espnow_message import build_message, build_preset_dict, build_select_dict
+
+# Build a message with presets and select
+presets = {
+    "red_blink": build_preset_dict({
+        "pattern": "blink",
+        "colors": ["#FF0000"],
+        "delay": 200,
+        "brightness": 255,
+        "auto": True
+    })
+}
+
+select = build_select_dict({
+    "device1": "red_blink"
+})
+
+message = build_message(presets=presets, select=select)
+# Result: {"v": "1", "presets": {...}, "select": {...}}
+```
+
+### Building Select Messages with Step Synchronization
+
+```python
+from util.espnow_message import build_message, build_select_dict
+
+# Select with step for synchronization
+select = build_select_dict(
+    {"device1": "rainbow_preset", "device2": "rainbow_preset"},
+    step_mapping={"device1": 10, "device2": 10}
+)
+
+message = build_message(select=select)
+# Result: {"v": "1", "select": {"device1": ["rainbow_preset", 10], "device2": ["rainbow_preset", 10]}}
+```
+
+### Converting Presets
+
+```python
+from util.espnow_message import build_preset_dict, build_presets_dict
+
+# Single preset
+preset = build_preset_dict({
+    "name": "my_preset",
+    "pattern": "rainbow",
+    "colors": ["#FF0000", "#00FF00"],  # Can be hex strings or RGB tuples
+    "delay": 100,
+    "brightness": 127,
+    "auto": False,
+    "n1": 2
+})
+
+# Multiple presets
+presets_data = {
+    "preset1": {"pattern": "on", "colors": ["#FF0000"]},
+    "preset2": {"pattern": "blink", "colors": ["#00FF00"]}
+}
+presets = build_presets_dict(presets_data)
+```
+
+## API Specification
+
+See `docs/API.md` for the complete ESPNow API specification.
+
+## Key Features
+
+- **Version Field**: All messages include `"v": "1"` for version tracking
+- **Preset Format**: Presets use hex color strings (`#RRGGBB`), not RGB tuples
+- **Select Format**: Select values are always lists: `["preset_name"]` or `["preset_name", step]`
+- **Color Conversion**: Automatically converts RGB tuples to hex strings
+- **Default Values**: Provides sensible defaults for missing fields

src/util/espnow_message.py

@@ -0,0 +1,274 @@
+"""
+ESPNow message builder utility for LED driver communication.
+
+This module provides utilities to build ESPNow messages according to the API specification.
+ESPNow has a 250-byte payload limit; messages larger than that must be split into multiple
+frames.
+"""
+
+import json
+
+# ESPNow payload limit (bytes). Messages larger than this must be split.
+ESPNOW_MAX_PAYLOAD_BYTES = 240
+
+
+def build_message(presets=None, select=None, save=False, default=None):
+    """
+    Build an ESPNow message according to the API specification.
+    
+    Args:
+        presets: Dictionary mapping preset names to preset objects, or None
+        select: Dictionary mapping device names to select lists, or None
+        
+    Returns:
+        JSON string ready to send via ESPNow
+        
+    Example:
+        message = build_message(
+            presets={
+                "red_blink": {
+                    "pattern": "blink",
+                    "colors": ["#FF0000"],
+                    "delay": 200,
+                    "brightness": 255,
+                    "auto": True
+                }
+            },
+            select={
+                "device1": ["red_blink"]
+            }
+        )
+    """
+    message = {
+        "v": "1"
+    }
+    
+    if presets:
+        message["presets"] = presets
+        # When sending presets, optionally include a save flag so the
+        # led-driver can persist them.
+        if save:
+            message["save"] = True
+    
+    if select:
+        message["select"] = select
+
+    if default is not None:
+        message["default"] = default
+    
+    return json.dumps(message)
+
+
+def split_espnow_message(msg_dict, max_bytes=None):
+    """
+    Split a message dict into one or more JSON strings each within ESPNow payload limit.
+    If the message fits in max_bytes, returns a single-element list. Otherwise splits
+    "select" and/or "presets" into multiple messages (other keys like v, b, default, save
+    are included only in the first message).
+
+    Args:
+        msg_dict: Full message as a dict (e.g. from json.loads).
+        max_bytes: Max payload size in bytes (default ESPNOW_MAX_PAYLOAD_BYTES).
+
+    Returns:
+        List of JSON strings, each <= max_bytes, to send in order.
+    """
+    if max_bytes is None:
+        max_bytes = ESPNOW_MAX_PAYLOAD_BYTES
+
+    single = json.dumps(msg_dict)
+    if len(single) <= max_bytes:
+        return [single]
+
+    # Keys to attach only to the first message we emit
+    first_only = {k: msg_dict[k] for k in ("b", "default", "save") if k in msg_dict}
+    out = []
+
+    def emit(chunk_dict, is_first):
+        m = {"v": msg_dict.get("v", "1")}
+        if is_first and first_only:
+            m.update(first_only)
+        m.update(chunk_dict)
+        s = json.dumps(m)
+        if len(s) > max_bytes:
+            raise ValueError(f"Chunk still too large ({len(s)} > {max_bytes})")
+        out.append(s)
+
+    def chunk_dict(key, items_dict):
+        if not items_dict:
+            return
+        items = list(items_dict.items())
+        i = 0
+        first = True
+        while i < len(items):
+            chunk = {}
+            while i < len(items):
+                k, v = items[i]
+                trial = dict(chunk)
+                trial[k] = v
+                trial_msg = {"v": msg_dict.get("v", "1"), key: trial}
+                if first_only and first:
+                    trial_msg.update(first_only)
+                if len(json.dumps(trial_msg)) <= max_bytes:
+                    chunk[k] = v
+                    i += 1
+                else:
+                    if not chunk:
+                        # Single entry too large; send as-is and hope receiver accepts
+                        chunk[k] = v
+                        i += 1
+                    break
+            if chunk:
+                emit({key: chunk}, first)
+                first = False
+            if not chunk:
+                break
+
+    if "select" in msg_dict:
+        chunk_dict("select", msg_dict["select"])
+    if "presets" in msg_dict:
+        chunk_dict("presets", msg_dict["presets"])
+
+    if not out:
+        # Fallback: emit one message even if over limit (receiver may reject)
+        out = [single]
+    return out
+
+
+def build_select_message(device_name, preset_name, step=None):
+    """
+    Build a select message for a single device.
+    
+    Args:
+        device_name: Name of the device
+        preset_name: Name of the preset to select
+        step: Optional step value for synchronization
+        
+    Returns:
+        Dictionary with select field ready to use in build_message
+        
+    Example:
+        select = build_select_message("device1", "rainbow_preset", step=10)
+        message = build_message(select=select)
+    """
+    select_list = [preset_name]
+    if step is not None:
+        select_list.append(step)
+    
+    return {device_name: select_list}
+
+
+def build_preset_dict(preset_data):
+    """
+    Convert preset data to API-compliant format.
+    
+    Args:
+        preset_data: Dictionary with preset fields (may include name, pattern, colors, etc.)
+        
+    Returns:
+        Dictionary with preset in API-compliant format (without name field)
+        
+    Example:
+        preset = build_preset_dict({
+            "name": "red_blink",
+            "pattern": "blink",
+            "colors": ["#FF0000"],
+            "delay": 200,
+            "brightness": 255,
+            "auto": True,
+            "n1": 0,
+            "n2": 0,
+            "n3": 0,
+            "n4": 0,
+            "n5": 0,
+            "n6": 0
+        })
+    """
+    # Ensure colors are in hex format
+    colors = preset_data.get("colors", preset_data.get("c", ["#FFFFFF"]))
+    if colors:
+        # Convert RGB tuples to hex strings if needed
+        if isinstance(colors[0], list) and len(colors[0]) == 3:
+            # RGB tuple format [r, g, b]
+            colors = [f"#{r:02x}{g:02x}{b:02x}" for r, g, b in colors]
+        elif not isinstance(colors[0], str):
+            # Handle other formats - convert to hex
+            colors = ["#FFFFFF"]
+        # Ensure all colors start with #
+        colors = [c if c.startswith("#") else f"#{c}" for c in colors]
+    else:
+        colors = ["#FFFFFF"]
+    
+    # Build payload using the short keys expected by led-driver
+    preset = {
+        "p": preset_data.get("pattern", preset_data.get("p", "off")),
+        "c": colors,
+        "d": preset_data.get("delay", preset_data.get("d", 100)),
+        "b": preset_data.get("brightness", preset_data.get("b", preset_data.get("br", 127))),
+        "a": preset_data.get("auto", preset_data.get("a", True)),
+        "n1": preset_data.get("n1", 0),
+        "n2": preset_data.get("n2", 0),
+        "n3": preset_data.get("n3", 0),
+        "n4": preset_data.get("n4", 0),
+        "n5": preset_data.get("n5", 0),
+        "n6": preset_data.get("n6", 0)
+    }
+    
+    return preset
+
+
+def build_presets_dict(presets_data):
+    """
+    Convert multiple presets to API-compliant format.
+    
+    Args:
+        presets_data: Dictionary mapping preset names to preset data
+        
+    Returns:
+        Dictionary mapping preset names to API-compliant preset objects
+        
+    Example:
+        presets = build_presets_dict({
+            "red_blink": {
+                "pattern": "blink",
+                "colors": ["#FF0000"],
+                "delay": 200
+            },
+            "blue_pulse": {
+                "pattern": "pulse",
+                "colors": ["#0000FF"],
+                "delay": 100
+            }
+        })
+    """
+    result = {}
+    for preset_name, preset_data in presets_data.items():
+        result[preset_name] = build_preset_dict(preset_data)
+    return result
+
+
+def build_select_dict(device_preset_mapping, step_mapping=None):
+    """
+    Build a select dictionary mapping device names to select lists.
+    
+    Args:
+        device_preset_mapping: Dictionary mapping device names to preset names
+        step_mapping: Optional dictionary mapping device names to step values
+        
+    Returns:
+        Dictionary with select field ready to use in build_message
+        
+    Example:
+        select = build_select_dict(
+            {"device1": "rainbow_preset", "device2": "pulse_preset"},
+            step_mapping={"device1": 10}
+        )
+        message = build_message(select=select)
+    """
+    select = {}
+    for device_name, preset_name in device_preset_mapping.items():
+        select_list = [preset_name]
+        if step_mapping and device_name in step_mapping:
+            select_list.append(step_mapping[device_name])
+        select[device_name] = select_list
+    return select

src/util/wifi.py

@@ -1,34 +1,15 @@
 import network
-from time import sleep
-
-def connect(ssid, password, ip, gateway):
-    if ssid is None or password is None:
-        print("Missing ssid or password")
-        return None
-    try:
-        sta_if = network.WLAN(network.STA_IF)
-        if ip is not None and gateway is not None:
-            sta_if.ifconfig((ip, '255.255.255.0', gateway, '1.1.1.1'))
-        if not sta_if.isconnected():
-            print('connecting to network...')
-            sta_if.active(True)
-            sta_if.connect(ssid, password)
-            sleep(0.1)
-            if sta_if.isconnected():
-                return sta_if.ifconfig()
-            return None
-        return sta_if.ifconfig()
-    except Exception as e:
-        print(f"Failed to connect to wifi {e}")
-        return None
 
 
-def ap(ssid, password):
+def ap(ssid, password, channel=None):
     ap_if = network.WLAN(network.AP_IF)
     ap_mac = ap_if.config('mac')
     print(ssid)
     ap_if.active(True)
-    ap_if.config(essid=ssid, password=password)
+    if channel is not None:
+        ap_if.config(essid=ssid, password=password, channel=channel)
+    else:
+        ap_if.config(essid=ssid, password=password)
     ap_if.active(False)
     ap_if.active(True)
     print(ap_if.ifconfig())
@@ -36,3 +17,26 @@ def ap(ssid, password):
 def get_mac():
     ap_if = network.WLAN(network.AP_IF)
     return ap_if.config('mac')
+
+
+def get_ap_config():
+    """Get current AP configuration."""
+    try:
+        ap_if = network.WLAN(network.AP_IF)
+        if ap_if.active():
+            config = ap_if.ifconfig()
+            return {
+                'ssid': ap_if.config('essid'),
+                'channel': ap_if.config('channel'),
+                'ip': config[0] if config else None,
+                'active': True
+            }
+        return {
+            'ssid': None,
+            'channel': None,
+            'ip': None,
+            'active': False
+        }
+    except Exception as e:
+        print(f"Error getting AP config: {e}")
+        return None

tests/README.md

@@ -0,0 +1,79 @@
+# Tests
+
+This directory contains tests for the LED Controller project.
+
+## Directory Structure
+
+- `test_endpoints.py` - HTTP endpoint tests that mimic web browser requests (runs against 192.168.4.1)
+- `test_ws.py` - WebSocket tests
+- `test_p2p.py` - ESP-NOW P2P tests
+- `models/` - Model unit tests
+- `web.py` - Local development web server
+
+## Running Tests
+
+### Browser Tests (Real Browser Automation)
+
+Tests the web interface in an actual browser using Selenium:
+
+```bash
+python tests/test_browser.py
+```
+
+These tests:
+- Open a real Chrome browser
+- Navigate to the device at 192.168.4.1
+- Interact with UI elements (buttons, forms, modals)
+- Test complete user workflows
+- Verify visual elements and interactions
+
+**Requirements:**
+```bash
+pip install selenium
+# Also need ChromeDriver installed and in PATH
+# Download from: https://chromedriver.chromium.org/
+```
+
+### Endpoint Tests (Browser-like HTTP)
+
+Tests HTTP endpoints by making requests to the device at 192.168.4.1:
+
+```bash
+python tests/test_endpoints.py
+```
+
+These tests:
+- Mimic web browser requests with proper headers
+- Handle cookies for session management
+- Test all CRUD operations (GET, POST, PUT, DELETE)
+- Verify responses and status codes
+
+**Requirements:**
+```bash
+pip install requests
+```
+
+### WebSocket Tests
+
+```bash
+python tests/test_ws.py
+```
+
+**Requirements:**
+```bash
+pip install websockets
+```
+
+### Model Tests
+
+```bash
+python tests/models/run_all.py
+```
+
+### Local Development Server
+
+Run the local development server (port 5000):
+
+```bash
+python tests/web.py
+```

tests/p2p.py

@@ -0,0 +1,105 @@
+#!/usr/bin/env python3
+# MicroPython script to test LED bar patterns over ESP-NOW (no WebSocket)
+
+import json
+import uasyncio as asyncio
+
+# Import P2P from src/p2p.py
+# Note: When running on device, ensure src/p2p.py is in the path
+try:
+    from p2p import P2P
+except ImportError:
+    # Fallback: import from src directory
+    import sys
+    sys.path.insert(0, 'src')
+    from p2p import P2P
+
+async def main():
+    p2p = P2P()
+    
+    # Test cases following msg.json format:
+    # {"g": {"df": {...}, "group_name": {...}}, "sv": true, "st": 0}
+    # Note: led-bar device must have matching group in settings["groups"]
+    tests = [
+        # Example 1: Default format with df defaults and dj group (matches msg.json)
+        {
+            "g": { 
+                "df": {
+                    "pt": "on",
+                    "cl": ["#ff0000"],
+                    "br": 200,
+                    "n1": 10,
+                    "n2": 10,
+                    "n3": 10,
+                    "n4": 10,
+                    "n5": 10,
+                    "n6": 10,
+                    "dl": 100
+                },
+                "dj": {
+                    "pt": "blink",
+                    "cl": ["#00ff00"],
+                    "dl": 500
+                }
+            },
+            "sv": True,
+            "st": 0
+        },
+        # Example 2: Different group with df defaults
+        {
+            "g": {
+                "df": {
+                    "pt": "on",
+                    "br": 150,
+                    "dl": 100
+                },
+                "group1": {
+                    "pt": "rainbow",
+                    "dl": 50
+                }
+            },
+            "sv": False
+        },
+        # Example 3: Multiple groups
+        {
+            "g": {
+                "df": {
+                    "br": 200,
+                    "dl": 100
+                },
+                "group1": {
+                    "pt": "on",
+                    "cl": ["#0000ff"]
+                },
+                "group2": {
+                    "pt": "blink",
+                    "cl": ["#ff00ff"],
+                    "dl": 300
+                }
+            },
+            "sv": True,
+            "st": 1
+        },
+        # Example 4: Single group without df
+        {
+            "g": {
+                "dj": {
+                    "pt": "off"
+                }
+            },
+            "sv": False
+        }
+    ]
+
+    for i, test in enumerate(tests, 1):
+        print(f"\n{'='*50}")
+        print(f"Test {i}/{len(tests)}")
+        print(f"Sending: {json.dumps(test, indent=2)}")
+        await p2p.send(json.dumps(test))
+        await asyncio.sleep_ms(2000)
+    
+    print(f"\n{'='*50}")
+    print("All tests completed")
+
+if __name__ == "__main__":
+    asyncio.run(main())

tests/test_endpoints.py

@@ -0,0 +1,563 @@
+#!/usr/bin/env python3
+"""
+Endpoint tests that mimic web browser requests.
+Tests run against the device at 192.168.4.1
+"""
+
+import requests
+import json
+import sys
+from typing import Dict, Optional
+
+# Base URL for the device
+BASE_URL = "http://192.168.4.1"
+
+class TestClient:
+    """HTTP client that mimics a web browser with cookie support."""
+    
+    def __init__(self, base_url: str = BASE_URL):
+        self.base_url = base_url
+        self.session = requests.Session()
+        self.session.headers.update({
+            'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36',
+            'Accept': 'application/json',
+            'Accept-Language': 'en-US,en;q=0.9',
+        })
+    
+    def get(self, path: str, **kwargs) -> requests.Response:
+        """GET request."""
+        url = f"{self.base_url}{path}"
+        return self.session.get(url, **kwargs)
+    
+    def post(self, path: str, data: Optional[Dict] = None, json_data: Optional[Dict] = None, **kwargs) -> requests.Response:
+        """POST request."""
+        url = f"{self.base_url}{path}"
+        if json_data:
+            return self.session.post(url, json=json_data, **kwargs)
+        return self.session.post(url, data=data, **kwargs)
+    
+    def put(self, path: str, json_data: Optional[Dict] = None, **kwargs) -> requests.Response:
+        """PUT request."""
+        url = f"{self.base_url}{path}"
+        return self.session.put(url, json=json_data, **kwargs)
+    
+    def delete(self, path: str, **kwargs) -> requests.Response:
+        """DELETE request."""
+        url = f"{self.base_url}{path}"
+        return self.session.delete(url, **kwargs)
+    
+    def set_cookie(self, name: str, value: str):
+        """Set a cookie manually."""
+        self.session.cookies.set(name, value, domain='192.168.4.1', path='/')
+    
+    def get_cookie(self, name: str) -> Optional[str]:
+        """Get a cookie value."""
+        return self.session.cookies.get(name)
+
+def test_connection(client: TestClient) -> bool:
+    """Test basic connection to the server."""
+    print("Testing connection...")
+    try:
+        response = client.get('/')
+        if response.status_code == 200:
+            print("✓ Connection successful")
+            return True
+        else:
+            print(f"✗ Connection failed: {response.status_code}")
+            return False
+    except requests.exceptions.ConnectionError:
+        print(f"✗ Cannot connect to {BASE_URL}")
+        print("  Make sure the device is running and accessible at 192.168.4.1")
+        return False
+    except Exception as e:
+        print(f"✗ Connection error: {e}")
+        return False
+
+def test_tabs(client: TestClient) -> bool:
+    """Test tabs endpoints."""
+    print("\n=== Testing Tabs Endpoints ===")
+    passed = 0
+    total = 0
+    
+    # Test 1: List tabs
+    total += 1
+    try:
+        response = client.get('/tabs')
+        if response.status_code == 200:
+            data = response.json()
+            print(f"✓ GET /tabs - Found {len(data.get('tabs', {}))} tabs")
+            passed += 1
+        else:
+            print(f"✗ GET /tabs - Status: {response.status_code}")
+    except Exception as e:
+        print(f"✗ GET /tabs - Error: {e}")
+    
+    # Test 2: Create tab
+    total += 1
+    try:
+        tab_data = {
+            "name": "Test Tab",
+            "names": ["1", "2"]
+        }
+        response = client.post('/tabs', json_data=tab_data)
+        if response.status_code == 201:
+            created_tab = response.json()
+            # Response format: {tab_id: {tab_data}}
+            if isinstance(created_tab, dict):
+                # Get the first key which should be the tab ID
+                tab_id = next(iter(created_tab.keys())) if created_tab else None
+            else:
+                tab_id = None
+            print(f"✓ POST /tabs - Created tab: {tab_id}")
+            passed += 1
+            
+            # Test 3: Get specific tab
+            if tab_id:
+                total += 1
+                response = client.get(f'/tabs/{tab_id}')
+                if response.status_code == 200:
+                    print(f"✓ GET /tabs/{tab_id} - Retrieved tab")
+                    passed += 1
+                else:
+                    print(f"✗ GET /tabs/{tab_id} - Status: {response.status_code}")
+                
+                # Test 4: Set current tab
+                total += 1
+                response = client.post(f'/tabs/{tab_id}/set-current')
+                if response.status_code == 200:
+                    print(f"✓ POST /tabs/{tab_id}/set-current - Set current tab")
+                    # Check cookie was set
+                    cookie = client.get_cookie('current_tab')
+                    if cookie == tab_id:
+                        print(f"  ✓ Cookie 'current_tab' set to {tab_id}")
+                    passed += 1
+                else:
+                    print(f"✗ POST /tabs/{tab_id}/set-current - Status: {response.status_code}")
+                
+                # Test 5: Get current tab
+                total += 1
+                response = client.get('/tabs/current')
+                if response.status_code == 200:
+                    data = response.json()
+                    if data.get('tab_id') == tab_id:
+                        print(f"✓ GET /tabs/current - Current tab is {tab_id}")
+                        passed += 1
+                    else:
+                        print(f"✗ GET /tabs/current - Wrong tab ID")
+                else:
+                    print(f"✗ GET /tabs/current - Status: {response.status_code}")
+                
+                # Test 6: Update tab (edit functionality)
+                total += 1
+                update_data = {
+                    "name": "Updated Test Tab",
+                    "names": ["1", "2", "3"]  # Update device IDs too
+                }
+                response = client.put(f'/tabs/{tab_id}', json_data=update_data)
+                if response.status_code == 200:
+                    updated = response.json()
+                    if updated.get('name') == "Updated Test Tab" and updated.get('names') == ["1", "2", "3"]:
+                        print(f"✓ PUT /tabs/{tab_id} - Updated tab (name and device IDs)")
+                        passed += 1
+                    else:
+                        print(f"✗ PUT /tabs/{tab_id} - Update didn't work correctly")
+                        print(f"  Expected name='Updated Test Tab', got '{updated.get('name')}'")
+                        print(f"  Expected names=['1','2','3'], got {updated.get('names')}")
+                else:
+                    print(f"✗ PUT /tabs/{tab_id} - Status: {response.status_code}, Response: {response.text}")
+                
+                # Test 6b: Verify update persisted
+                total += 1
+                response = client.get(f'/tabs/{tab_id}')
+                if response.status_code == 200:
+                    verified = response.json()
+                    if verified.get('name') == "Updated Test Tab":
+                        print(f"✓ GET /tabs/{tab_id} - Verified update persisted")
+                        passed += 1
+                    else:
+                        print(f"✗ GET /tabs/{tab_id} - Update didn't persist")
+                else:
+                    print(f"✗ GET /tabs/{tab_id} - Status: {response.status_code}")
+                
+                # Test 7: Delete tab
+                total += 1
+                response = client.delete(f'/tabs/{tab_id}')
+                if response.status_code == 200:
+                    print(f"✓ DELETE /tabs/{tab_id} - Deleted tab")
+                    passed += 1
+                else:
+                    print(f"✗ DELETE /tabs/{tab_id} - Status: {response.status_code}")
+        else:
+            print(f"✗ POST /tabs - Status: {response.status_code}, Response: {response.text}")
+    except Exception as e:
+        print(f"✗ POST /tabs - Error: {e}")
+        import traceback
+        traceback.print_exc()
+    
+    print(f"\nTabs tests: {passed}/{total} passed")
+    return passed == total
+
+def test_profiles(client: TestClient) -> bool:
+    """Test profiles endpoints."""
+    print("\n=== Testing Profiles Endpoints ===")
+    passed = 0
+    total = 0
+    
+    # Test 1: List profiles
+    total += 1
+    try:
+        response = client.get('/profiles')
+        if response.status_code == 200:
+            data = response.json()
+            profiles = data.get('profiles', {})
+            current_id = data.get('current_profile_id')
+            print(f"✓ GET /profiles - Found {len(profiles)} profiles, current: {current_id}")
+            passed += 1
+        else:
+            print(f"✗ GET /profiles - Status: {response.status_code}")
+    except Exception as e:
+        print(f"✗ GET /profiles - Error: {e}")
+    
+    # Test 2: Get current profile
+    total += 1
+    try:
+        response = client.get('/profiles/current')
+        if response.status_code == 200:
+            data = response.json()
+            print(f"✓ GET /profiles/current - Current profile: {data.get('id')}")
+            passed += 1
+        else:
+            print(f"✗ GET /profiles/current - Status: {response.status_code}")
+    except Exception as e:
+        print(f"✗ GET /profiles/current - Error: {e}")
+    
+    # Test 3: Create profile
+    total += 1
+    try:
+        profile_data = {"name": "Test Profile"}
+        response = client.post('/profiles', json_data=profile_data)
+        if response.status_code == 201:
+            created = response.json()
+            # Response format: {profile_id: {profile_data}}
+            if isinstance(created, dict):
+                profile_id = next(iter(created.keys())) if created else None
+            else:
+                profile_id = None
+            print(f"✓ POST /profiles - Created profile: {profile_id}")
+            passed += 1
+            
+            # Test 4: Apply profile
+            if profile_id:
+                total += 1
+                response = client.post(f'/profiles/{profile_id}/apply')
+                if response.status_code == 200:
+                    print(f"✓ POST /profiles/{profile_id}/apply - Applied profile")
+                    passed += 1
+                else:
+                    print(f"✗ POST /profiles/{profile_id}/apply - Status: {response.status_code}")
+                
+                # Test 5: Delete profile
+                total += 1
+                response = client.delete(f'/profiles/{profile_id}')
+                if response.status_code == 200:
+                    print(f"✓ DELETE /profiles/{profile_id} - Deleted profile")
+                    passed += 1
+                else:
+                    print(f"✗ DELETE /profiles/{profile_id} - Status: {response.status_code}")
+        else:
+            print(f"✗ POST /profiles - Status: {response.status_code}")
+    except Exception as e:
+        print(f"✗ POST /profiles - Error: {e}")
+    
+    print(f"\nProfiles tests: {passed}/{total} passed")
+    return passed == total
+
+def test_presets(client: TestClient) -> bool:
+    """Test presets endpoints."""
+    print("\n=== Testing Presets Endpoints ===")
+    passed = 0
+    total = 0
+    
+    # Test 1: List presets
+    total += 1
+    try:
+        response = client.get('/presets')
+        if response.status_code == 200:
+            data = response.json()
+            preset_count = len(data) if isinstance(data, dict) else 0
+            print(f"✓ GET /presets - Found {preset_count} presets")
+            passed += 1
+        else:
+            print(f"✗ GET /presets - Status: {response.status_code}")
+    except Exception as e:
+        print(f"✗ GET /presets - Error: {e}")
+    
+    # Test 2: Create preset
+    total += 1
+    try:
+        preset_data = {
+            "name": "Test Preset",
+            "pattern": "on",
+            "colors": ["#ff0000"],
+            "brightness": 200
+        }
+        response = client.post('/presets', json_data=preset_data)
+        if response.status_code == 201:
+            created = response.json()
+            # Response format: {preset_id: {preset_data}}
+            if isinstance(created, dict):
+                preset_id = next(iter(created.keys())) if created else None
+            else:
+                preset_id = None
+            print(f"✓ POST /presets - Created preset: {preset_id}")
+            passed += 1
+            
+            # Test 3: Get specific preset
+            if preset_id:
+                total += 1
+                response = client.get(f'/presets/{preset_id}')
+                if response.status_code == 200:
+                    print(f"✓ GET /presets/{preset_id} - Retrieved preset")
+                    passed += 1
+                else:
+                    print(f"✗ GET /presets/{preset_id} - Status: {response.status_code}")
+                
+                # Test 4: Update preset
+                total += 1
+                update_data = {"brightness": 150}
+                response = client.put(f'/presets/{preset_id}', json_data=update_data)
+                if response.status_code == 200:
+                    print(f"✓ PUT /presets/{preset_id} - Updated preset")
+                    passed += 1
+                else:
+                    print(f"✗ PUT /presets/{preset_id} - Status: {response.status_code}")
+                
+                # Test 5: Send preset via /presets/send
+                total += 1
+                try:
+                    send_body = {"preset_ids": [preset_id]}
+                    response = client.post('/presets/send', json_data=send_body)
+                    if response.status_code == 200:
+                        data = response.json()
+                        sent = data.get('presets_sent')
+                        print(f"✓ POST /presets/send - Sent presets (presets_sent={sent})")
+                        passed += 1
+                    else:
+                        print(f"✗ POST /presets/send - Status: {response.status_code}, Response: {response.text}")
+                except Exception as e:
+                    print(f"✗ POST /presets/send - Error: {e}")
+                
+                # Test 6: Delete preset
+                total += 1
+                response = client.delete(f'/presets/{preset_id}')
+                if response.status_code == 200:
+                    print(f"✓ DELETE /presets/{preset_id} - Deleted preset")
+                    passed += 1
+                else:
+                    print(f"✗ DELETE /presets/{preset_id} - Status: {response.status_code}")
+        else:
+            print(f"✗ POST /presets - Status: {response.status_code}")
+    except Exception as e:
+        print(f"✗ POST /presets - Error: {e}")
+    
+    print(f"\nPresets tests: {passed}/{total} passed")
+    return passed == total
+
+def test_patterns(client: TestClient) -> bool:
+    """Test patterns endpoints."""
+    print("\n=== Testing Patterns Endpoints ===")
+    passed = 0
+    total = 0
+    
+    # Test 1: List patterns
+    total += 1
+    try:
+        response = client.get('/patterns')
+        if response.status_code == 200:
+            data = response.json()
+            pattern_count = len(data) if isinstance(data, dict) else 0
+            print(f"✓ GET /patterns - Found {pattern_count} patterns")
+            passed += 1
+        else:
+            print(f"✗ GET /patterns - Status: {response.status_code}")
+    except Exception as e:
+        print(f"✗ GET /patterns - Error: {e}")
+    
+    # Test 2: Get pattern definitions
+    total += 1
+    try:
+        response = client.get('/patterns/definitions')
+        if response.status_code == 200:
+            data = response.json()
+            print(f"✓ GET /patterns/definitions - Retrieved definitions")
+            passed += 1
+        else:
+            print(f"✗ GET /patterns/definitions - Status: {response.status_code}")
+    except Exception as e:
+        print(f"✗ GET /patterns/definitions - Error: {e}")
+    
+    print(f"\nPatterns tests: {passed}/{total} passed")
+    return passed == total
+
+def test_tab_edit_workflow(client: TestClient) -> bool:
+    """Test complete tab edit workflow like a browser would."""
+    print("\n=== Testing Tab Edit Workflow ===")
+    passed = 0
+    total = 0
+    
+    # Step 1: Create a tab to edit
+    total += 1
+    try:
+        tab_data = {
+            "name": "Tab to Edit",
+            "names": ["1"]
+        }
+        response = client.post('/tabs', json_data=tab_data)
+        if response.status_code == 201:
+            created = response.json()
+            if isinstance(created, dict):
+                tab_id = next(iter(created.keys())) if created else None
+            else:
+                tab_id = None
+            
+            if tab_id:
+                print(f"✓ Created tab {tab_id} for editing")
+                passed += 1
+                
+                # Step 2: Get the tab to verify initial state
+                total += 1
+                response = client.get(f'/tabs/{tab_id}')
+                if response.status_code == 200:
+                    original_tab = response.json()
+                    print(f"✓ Retrieved tab - Name: '{original_tab.get('name')}', IDs: {original_tab.get('names')}")
+                    passed += 1
+                    
+                    # Step 3: Edit the tab (simulate browser edit form submission)
+                    total += 1
+                    edit_data = {
+                        "name": "Edited Tab Name",
+                        "names": ["2", "3", "4"]
+                    }
+                    response = client.put(f'/tabs/{tab_id}', json_data=edit_data)
+                    if response.status_code == 200:
+                        edited = response.json()
+                        if edited.get('name') == "Edited Tab Name" and edited.get('names') == ["2", "3", "4"]:
+                            print(f"✓ PUT /tabs/{tab_id} - Successfully edited tab")
+                            print(f"  New name: '{edited.get('name')}'")
+                            print(f"  New device IDs: {edited.get('names')}")
+                            passed += 1
+                        else:
+                            print(f"✗ PUT /tabs/{tab_id} - Edit didn't work correctly")
+                            print(f"  Got: {edited}")
+                    else:
+                        print(f"✗ PUT /tabs/{tab_id} - Status: {response.status_code}, Response: {response.text}")
+                    
+                    # Step 4: Verify edit persisted by getting the tab again
+                    total += 1
+                    response = client.get(f'/tabs/{tab_id}')
+                    if response.status_code == 200:
+                        verified = response.json()
+                        if verified.get('name') == "Edited Tab Name" and verified.get('names') == ["2", "3", "4"]:
+                            print(f"✓ GET /tabs/{tab_id} - Verified edit persisted")
+                            passed += 1
+                        else:
+                            print(f"✗ GET /tabs/{tab_id} - Edit didn't persist")
+                            print(f"  Expected name='Edited Tab Name', got '{verified.get('name')}'")
+                            print(f"  Expected names=['2','3','4'], got {verified.get('names')}")
+                    else:
+                        print(f"✗ GET /tabs/{tab_id} - Status: {response.status_code}")
+                    
+                    # Step 5: Clean up - delete the test tab
+                    total += 1
+                    response = client.delete(f'/tabs/{tab_id}')
+                    if response.status_code == 200:
+                        print(f"✓ DELETE /tabs/{tab_id} - Cleaned up test tab")
+                        passed += 1
+                    else:
+                        print(f"✗ DELETE /tabs/{tab_id} - Status: {response.status_code}")
+            else:
+                print(f"✗ Failed to extract tab ID from create response")
+        else:
+            print(f"✗ POST /tabs - Status: {response.status_code}, Response: {response.text}")
+    except Exception as e:
+        print(f"✗ Tab edit workflow - Error: {e}")
+        import traceback
+        traceback.print_exc()
+    
+    print(f"\nTab edit workflow tests: {passed}/{total} passed")
+    return passed == total
+
+def test_static_files(client: TestClient) -> bool:
+    """Test static file serving."""
+    print("\n=== Testing Static Files ===")
+    passed = 0
+    total = 0
+    
+    static_files = [
+        '/static/style.css',
+        '/static/app.js',
+        '/static/tabs.js',
+        '/static/presets.js',
+        '/static/profiles.js',
+    ]
+    
+    for file_path in static_files:
+        total += 1
+        try:
+            response = client.get(file_path)
+            if response.status_code == 200:
+                print(f"✓ GET {file_path} - Retrieved")
+                passed += 1
+            else:
+                print(f"✗ GET {file_path} - Status: {response.status_code}")
+        except Exception as e:
+            print(f"✗ GET {file_path} - Error: {e}")
+    
+    print(f"\nStatic files tests: {passed}/{total} passed")
+    return passed == total
+
+def main():
+    """Run all endpoint tests."""
+    print("=" * 60)
+    print("LED Controller Endpoint Tests")
+    print(f"Testing against: {BASE_URL}")
+    print("=" * 60)
+    
+    client = TestClient()
+    
+    # Test connection first
+    if not test_connection(client):
+        print("\n✗ Cannot connect to device. Exiting.")
+        sys.exit(1)
+    
+    results = []
+    
+    # Run all tests
+    results.append(("Tabs", test_tabs(client)))
+    results.append(("Tab Edit Workflow", test_tab_edit_workflow(client)))
+    results.append(("Profiles", test_profiles(client)))
+    results.append(("Presets", test_presets(client)))
+    results.append(("Patterns", test_patterns(client)))
+    results.append(("Static Files", test_static_files(client)))
+    
+    # Summary
+    print("\n" + "=" * 60)
+    print("Test Summary")
+    print("=" * 60)
+    all_passed = True
+    for name, passed in results:
+        status = "✓ PASS" if passed else "✗ FAIL"
+        print(f"{status} - {name}")
+        if not passed:
+            all_passed = False
+    
+    print("=" * 60)
+    if all_passed:
+        print("✓ All tests passed!")
+        sys.exit(0)
+    else:
+        print("✗ Some tests failed")
+        sys.exit(1)
+
+if __name__ == "__main__":
+    main()

tests/test_main_old.py

@@ -0,0 +1,12 @@
+from microdot import Microdot
+from src.profile import profile_app
+
+app = Microdot()
+
+@app.route('/')
+async def index(request):
+    return 'Hello, world!'
+
+app.mount(profile_app, url_prefix="/profile")
+
+app.run(port=8080, debug=True)

tests/web.py

@@ -0,0 +1,342 @@
+#!/usr/bin/env python3
+"""
+Local development web server - imports and runs src.main with port 5000
+"""
+
+import sys
+import os
+import asyncio
+import signal
+
+# Add project root, src, and lib to path
+project_root = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+src_path = os.path.join(project_root, 'src')
+lib_path = os.path.join(project_root, 'lib')
+
+# Add to path in the right order - src must be first so 'models' and 'controllers' can be imported
+# This ensures imports like 'from models.preset import Preset' work
+sys.path.insert(0, src_path)
+sys.path.insert(0, lib_path)
+sys.path.insert(0, project_root)
+
+# Mock MicroPython modules before importing main
+class MockMachine:
+    class WDT:
+        def __init__(self, timeout):
+            pass
+        def feed(self):
+            pass
+
+class MockESPNow:
+    def __init__(self):
+        self.active_value = False
+        self.peers = []
+        self.websocket_client = None  # Store single WebSocket connection
+    def active(self, value):
+        self.active_value = value
+        print(f"[MOCK] ESPNow active: {value}")
+    def add_peer(self, peer):
+        self.peers.append(peer)
+        if hasattr(peer, 'hex'):
+            print(f"[MOCK] Added peer: {peer.hex()}")
+        else:
+            print(f"[MOCK] Added peer: {peer}")
+    def register_websocket(self, ws):
+        """Register a WebSocket connection to forward ESPNow data to."""
+        self.websocket_client = ws
+        print(f"[MOCK] Registered WebSocket client")
+    def unregister_websocket(self, ws):
+        """Unregister a WebSocket connection."""
+        if self.websocket_client == ws:
+            self.websocket_client = None
+            print(f"[MOCK] Unregistered WebSocket client")
+    async def asend(self, peer, data):
+        if hasattr(peer, 'hex'):
+            print(f"[MOCK] Would send to {peer.hex()}: {data}")
+        else:
+            print(f"[MOCK] Would send to {peer}: {data}")
+        
+        # Forward data to the connected WebSocket client
+        if self.websocket_client:
+            try:
+                await self.websocket_client.send(data)
+                print(f"[MOCK] Forwarded to WebSocket client")
+            except Exception as e:
+                print(f"[MOCK] WebSocket client disconnected: {e}")
+                self.websocket_client = None
+
+class MockAIOESPNow:
+    def __init__(self):
+        self.espnow = MockESPNow()
+    def active(self, value):
+        self.espnow.active(value)
+        return self.espnow
+    def add_peer(self, peer):
+        self.espnow.add_peer(peer)
+    async def asend(self, peer, data):
+        await self.espnow.asend(peer, data)
+    
+    # Store reference to mock instance for WebSocket registration
+    @property
+    def mock_instance(self):
+        return self.espnow
+
+# Create mock ESPNow instance and store reference for WebSocket registration
+mock_espnow_instance = MockESPNow()
+mock_aioespnow = MockAIOESPNow()
+mock_aioespnow.espnow = mock_espnow_instance  # Use the shared instance
+
+# Create mock ESPNow instance and store reference for WebSocket registration
+mock_espnow_instance = MockESPNow()
+mock_aioespnow = MockAIOESPNow()
+mock_aioespnow.espnow = mock_espnow_instance  # Use the shared instance
+
+# Install mocks in sys.modules before any imports
+sys.modules['machine'] = MockMachine()
+# Store the mock instance in the module so it can be accessed
+aioespnow_module = type('module', (), {'AIOESPNow': MockAIOESPNow, '_mock_instance': mock_espnow_instance})()
+sys.modules['aioespnow'] = aioespnow_module
+class MockWLAN:
+    def __init__(self, interface):
+        self.interface = interface
+    def active(self, value):
+        print(f"[MOCK] WLAN({self.interface}) active: {value}")
+
+sys.modules['network'] = type('module', (), {
+    'WLAN': MockWLAN,
+    'STA_IF': 0
+})()
+
+# Mock asyncio.sleep_ms for regular Python
+_original_sleep = asyncio.sleep
+async def sleep_ms(ms):
+    await _original_sleep(ms / 1000.0)
+
+# Patch asyncio.sleep_ms
+asyncio.sleep_ms = sleep_ms
+
+# Patch sys.print_exception for regular Python (MicroPython has this, regular Python doesn't)
+if not hasattr(sys, 'print_exception'):
+    import traceback
+    sys.print_exception = lambda e, file=None: traceback.print_exception(type(e), e, e.__traceback__, file=file)
+
+# Patch builtins.open to redirect /db/ paths to project db directory
+import builtins
+_original_open = builtins.open
+def patched_open(file, mode='r', *args, **kwargs):
+    if isinstance(file, str):
+        if file.startswith('/db/'):
+            # Redirect to project db directory
+            filename = os.path.basename(file)
+            file = os.path.join(project_root, 'db', filename)
+        elif not os.path.isabs(file):
+            # For relative paths starting with templates/ or static/, 
+            # always resolve to src/ directory
+            if file.startswith('templates/') or file.startswith('static/'):
+                file = os.path.join(src_path, file)
+            # For other relative paths, check if they exist in current dir
+            # If not, try src/ directory
+            elif not os.path.exists(file):
+                src_file = os.path.join(src_path, file)
+                if os.path.exists(src_file):
+                    file = src_file
+    return _original_open(file, mode, *args, **kwargs)
+builtins.open = patched_open
+
+# Also patch os.mkdir to handle /db path
+original_mkdir = os.mkdir
+def patched_mkdir(path):
+    if path == "/db":
+        # Use project db directory instead
+        db_path = os.path.join(project_root, "db")
+        if not os.path.exists(db_path):
+            os.makedirs(db_path, exist_ok=True)
+    else:
+        original_mkdir(path)
+os.mkdir = patched_mkdir
+
+# Create a flag to stop the infinite loop
+_stop_flag = False
+
+# Patch gc.collect to check stop flag
+import gc as gc_module
+_original_collect = gc_module.collect
+def collect():
+    global _stop_flag
+    if _stop_flag:
+        raise KeyboardInterrupt("Stop requested")
+    return _original_collect()
+gc_module.collect = collect
+
+# Change to src directory for file paths (where templates and static are)
+# main.py expects templates/ and static/ to be relative to the working directory
+os.chdir(src_path)
+
+# Override settings path for local development
+# Import settings module and patch the path before main imports it
+import importlib.util
+spec = importlib.util.spec_from_file_location("settings", os.path.join(src_path, "settings.py"))
+settings_module = importlib.util.module_from_spec(spec)
+sys.modules['settings'] = settings_module
+spec.loader.exec_module(settings_module)
+settings_module.Settings.SETTINGS_FILE = os.path.join(project_root, 'settings.json')
+
+# Patch the Model class file path before importing
+# We need to monkey-patch the model.py file's behavior
+import importlib.util
+model_spec = importlib.util.spec_from_file_location("models.model", os.path.join(src_path, "models", "model.py"))
+model_module = importlib.util.module_from_spec(model_spec)
+
+# Patch os.mkdir in the model module's context
+original_mkdir = os.mkdir
+def patched_mkdir(path):
+    if path == "/db":
+        db_path = os.path.join(project_root, "db")
+        if not os.path.exists(db_path):
+            os.makedirs(db_path, exist_ok=True)
+    else:
+        original_mkdir(path)
+
+# Set up the module's namespace with patched os
+model_module.__dict__['os'] = type('os', (), {'mkdir': patched_mkdir, 'path': os.path})()
+model_spec.loader.exec_module(model_module)
+sys.modules['models.model'] = model_module
+
+# Now patch the Model class to fix file paths
+# The issue is that Model.__init__ sets self.file and immediately calls load()
+# before we can patch it. We need to replace __init__ completely.
+# Also clear any existing singleton instances
+Model = model_module.Model
+# Clear singleton instances for all Model subclasses
+for attr_name in dir(model_module):
+    attr = getattr(model_module, attr_name)
+    if isinstance(attr, type) and issubclass(attr, Model) and attr != Model:
+        if hasattr(attr, '_instance'):
+            delattr(attr, '_instance')
+
+original_save = Model.save
+original_load = Model.load
+original_set_defaults = Model.set_defaults
+
+def patched_init(self):
+    # Only initialize once (check if already initialized)
+    if hasattr(self, '_initialized'):
+        return
+    
+    # Create db directory if it doesn't exist (use project db, not /db)
+    db_path = os.path.join(project_root, "db")
+    if not os.path.exists(db_path):
+        os.makedirs(db_path, exist_ok=True)
+    
+    self.class_name = self.__class__.__name__
+    # Set file path to project db directory from the start
+    self.file = os.path.join(project_root, 'db', f"{self.class_name.lower()}.json")
+    super(Model, self).__init__()
+    
+    # Now call load with the correct path already set
+    # Call the patched load method (defined below)
+    Model.load(self)
+    self._initialized = True
+
+def patched_save(self):
+    # Ensure file path is correct before saving (this will also fix print statements)
+    if hasattr(self, 'file') and self.file.startswith('/db/'):
+        filename = os.path.basename(self.file)
+        self.file = os.path.join(project_root, 'db', filename)
+    # Also ensure the directory exists
+    db_dir = os.path.dirname(self.file)
+    if not os.path.exists(db_dir):
+        os.makedirs(db_dir, exist_ok=True)
+    return original_save(self)
+
+def patched_load(self):
+    # Ensure file path is correct before loading
+    if hasattr(self, 'file') and self.file.startswith('/db/'):
+        filename = os.path.basename(self.file)
+        self.file = os.path.join(project_root, 'db', filename)
+    try:
+        with open(self.file, 'r') as file:
+            import json
+            loaded_settings = json.load(file)
+        # Use dict.update() directly, not the subclass's update() method
+        dict.update(self, loaded_settings)
+        print(f"{self.class_name} loaded successfully.")
+    except FileNotFoundError:
+        # File doesn't exist yet - this is normal on first run
+        print(f"No existing {self.class_name} file found, creating defaults.")
+        self.set_defaults()
+        self.save()
+    except Exception as e:
+        # Other errors - log and create defaults
+        print(f"Error loading {self.class_name}: {type(e).__name__}: {e}")
+        self.set_defaults()
+        self.save()
+
+# Apply patches - load must be patched before init uses it
+Model.load = patched_load
+Model.__init__ = patched_init
+Model.save = patched_save
+
+# Patch with_websocket decorator before importing main to register WebSocket connections
+from microdot.websocket import with_websocket as original_with_websocket
+
+def patched_with_websocket(f):
+    """Patched with_websocket decorator that registers connections with mock ESPNow."""
+    @original_with_websocket
+    async def wrapped_handler(request, ws):
+        # Register WebSocket connection with mock ESPNow
+        mock_espnow_instance.register_websocket(ws)
+        try:
+            # Call original handler
+            await f(request, ws)
+        finally:
+            # Unregister when connection closes
+            mock_espnow_instance.unregister_websocket(ws)
+    return wrapped_handler
+
+# Now import main (which will use the patched settings module and model)
+# Import as a module file directly to avoid package import issues
+main_spec = importlib.util.spec_from_file_location("main", os.path.join(src_path, "main.py"))
+main_module = importlib.util.module_from_spec(main_spec)
+
+# Patch with_websocket in the main module before executing it
+main_module.__dict__['with_websocket'] = patched_with_websocket
+
+main_spec.loader.exec_module(main_module)
+main = main_module.main
+
+def signal_handler(sig, frame):
+    """Handle Ctrl+C gracefully."""
+    global _stop_flag
+    print("\nShutting down server...")
+    _stop_flag = True
+    # Force exit since main has an infinite loop
+    sys.exit(0)
+
+async def run_web():
+    """Run main with port 5000."""
+    print("Starting LED Controller Web Server (Local Development)")
+    print("=" * 60)
+    print(f"Server will run on http://localhost:5000")
+    print("Press Ctrl+C to stop")
+    print("=" * 60)
+    
+    # Set up signal handler
+    signal.signal(signal.SIGINT, signal_handler)
+    
+    try:
+        # Call main with port 5000
+        await main(port=5000)
+    except KeyboardInterrupt:
+        print("\nShutting down server...")
+    except Exception as e:
+        print(f"Error: {e}")
+        raise
+
+if __name__ == "__main__":
+    try:
+        asyncio.run(run_web())
+    except KeyboardInterrupt:
+        print("\nExiting...")
+    except SystemExit:
+        pass

tests/ws.py

@@ -0,0 +1,193 @@
+import asyncio
+import websockets
+import json
+import sys
+
+async def test_websocket():
+    uri = "ws://192.168.4.1:8080/ws"
+    tests_passed = 0
+    tests_total = 0
+    
+    async def run_test(name, test_func):
+        nonlocal tests_passed, tests_total
+        tests_total += 1
+        try:
+            result = await test_func()
+            if result is not False:
+                print(f"✓ {name}")
+                tests_passed += 1
+                return True
+            else:
+                print(f"✗ {name} (failed)")
+                return False
+        except Exception as e:
+            print(f"✗ {name} (error: {e})")
+            return False
+    
+    try:
+        print(f"Connecting to WebSocket server at {uri}...")
+        async with websockets.connect(uri) as websocket:
+            print(f"✓ Connected to WebSocket server\n")
+            
+            # Test 1: Empty JSON
+            print("Test 1: Empty JSON")
+            await run_test("Send empty JSON", lambda: websocket.send(json.dumps({})))
+            await asyncio.sleep(0.3)
+            
+            # Test 2: Pattern on with single color
+            print("\nTest 2: Pattern 'on'")
+            await run_test("Send on pattern", lambda: websocket.send(json.dumps({
+                "settings": {"pattern": "on", "colors": ["#00ff00"], "brightness": 200}
+            })))
+            await asyncio.sleep(0.3)
+            
+            # Test 3: Pattern blink
+            print("\nTest 3: Pattern 'blink'")
+            await run_test("Send blink pattern", lambda: websocket.send(json.dumps({
+                "settings": {"pattern": "blink", "colors": ["#ff0000"], "delay": 500}
+            })))
+            await asyncio.sleep(0.3)
+            
+            # Test 4: Pattern rainbow
+            print("\nTest 4: Pattern 'rainbow'")
+            await run_test("Send rainbow pattern", lambda: websocket.send(json.dumps({
+                "settings": {"pattern": "rainbow", "delay": 100}
+            })))
+            await asyncio.sleep(0.3)
+            
+            # Test 5: Pattern off
+            print("\nTest 5: Pattern 'off'")
+            await run_test("Send off pattern", lambda: websocket.send(json.dumps({
+                "settings": {"pattern": "off"}
+            })))
+            await asyncio.sleep(0.3)
+            
+            # Test 6: Multiple colors
+            print("\nTest 6: Multiple colors")
+            await run_test("Send multiple colors", lambda: websocket.send(json.dumps({
+                "settings": {
+                    "pattern": "color_transition",
+                    "colors": ["#ff0000", "#00ff00", "#0000ff"],
+                    "delay": 100
+                }
+            })))
+            await asyncio.sleep(0.3)
+            
+            # Test 7: RGB tuple colors (if supported)
+            print("\nTest 7: RGB tuple colors")
+            await run_test("Send RGB tuple colors", lambda: websocket.send(json.dumps({
+                "settings": {
+                    "pattern": "on",
+                    "colors": [[255, 0, 128], [128, 255, 0]],
+                    "brightness": 150
+                }
+            })))
+            await asyncio.sleep(0.3)
+            
+            # Test 8: Pattern with all parameters
+            print("\nTest 8: Pattern with all parameters")
+            await run_test("Send pattern with all params", lambda: websocket.send(json.dumps({
+                "settings": {
+                    "pattern": "flicker",
+                    "colors": ["#ff8800"],
+                    "brightness": 127,
+                    "delay": 80,
+                    "n1": 10,
+                    "n2": 5,
+                    "n3": 1,
+                    "n4": 1
+                }
+            })))
+            await asyncio.sleep(0.3)
+            
+            # Test 9: Short-key format (df/dj)
+            print("\nTest 9: Short-key format (df/dj)")
+            await run_test("Send df/dj format", lambda: websocket.send(json.dumps({
+                "df": {"pt": "on", "cl": ["#ff0000"], "br": 200},
+                "dj": {"pa": "blink", "cl": ["#00ff00"], "dl": 500},
+                "settings": {"pattern": "blink", "colors": ["#00ff00"], "delay": 500, "brightness": 200}
+            })))
+            await asyncio.sleep(0.3)
+            
+            # Test 10: Rapid message sending
+            print("\nTest 10: Rapid message sending")
+            patterns = ["on", "off", "on", "blink"]
+            for i, pattern in enumerate(patterns):
+                p = pattern  # Capture in closure
+                await run_test(f"Rapid send {i+1}/{len(patterns)}", lambda p=p: websocket.send(json.dumps({
+                    "settings": {"pattern": p, "colors": ["#ffffff"]}
+                })))
+                await asyncio.sleep(0.1)
+            
+            # Test 11: Large message
+            print("\nTest 11: Large message")
+            large_colors = [f"#{i%256:02x}{i*2%256:02x}{i*3%256:02x}" for i in range(50)]
+            await run_test("Send large message", lambda: websocket.send(json.dumps({
+                "settings": {
+                    "pattern": "color_transition",
+                    "colors": large_colors,
+                    "delay": 50
+                }
+            })))
+            await asyncio.sleep(0.3)
+            
+            # Test 12: Invalid JSON (should be handled gracefully)
+            print("\nTest 12: Invalid JSON handling")
+            try:
+                await websocket.send("not valid json")
+                print("⚠ Invalid JSON sent (server should handle gracefully)")
+                tests_total += 1
+            except Exception as e:
+                print(f"✗ Invalid JSON failed to send: {e}")
+                tests_total += 1
+            
+            # Test 13: Malformed structure (missing settings)
+            print("\nTest 13: Malformed structure")
+            await run_test("Send message without settings", lambda: websocket.send(json.dumps({
+                "pattern": "on",
+                "colors": ["#ff0000"]
+            })))
+            await asyncio.sleep(0.3)
+            
+            # Test 14: Just settings key, no pattern
+            print("\nTest 14: Settings without pattern")
+            await run_test("Send settings without pattern", lambda: websocket.send(json.dumps({
+                "settings": {"colors": ["#0000ff"], "brightness": 100}
+            })))
+            await asyncio.sleep(0.3)
+            
+            # Test 15: Empty settings
+            print("\nTest 15: Empty settings")
+            await run_test("Send empty settings", lambda: websocket.send(json.dumps({
+                "settings": {}
+            })))
+            await asyncio.sleep(0.3)
+            
+            print(f"\n{'='*50}")
+            print(f"Tests completed: {tests_passed}/{tests_total} passed")
+            if tests_passed == tests_total:
+                print("✓ All tests passed!")
+            else:
+                print(f"⚠ {tests_total - tests_passed} test(s) failed")
+            print(f"{'='*50}")
+            
+    except websockets.exceptions.ConnectionClosedOK:
+        print("✓ WebSocket connection closed gracefully.")
+    except websockets.exceptions.ConnectionClosedError as e:
+        print(f"✗ WebSocket connection closed with error: {e}")
+        sys.exit(1)
+    except ConnectionRefusedError:
+        print(f"✗ Connection refused. Is the server running at {uri}?")
+        print("Make sure:")
+        print("  1. The device is connected to WiFi")
+        print("  2. The server is running on the device")
+        print("  3. You can reach 192.168.4.1")
+        sys.exit(1)
+    except Exception as e:
+        print(f"✗ An unexpected error occurred: {e}")
+        import traceback
+        traceback.print_exc()
+        sys.exit(1)
+
+if __name__ == "__main__":
+    asyncio.run(test_websocket())