refactor: comprehensive code quality, security, and release readiness improvements

Security: tighten CORS defaults, add webhook rate limiting, fix XSS in
automations, guard WebSocket JSON.parse, validate ADB address input,
seal debug exception leak, URL-encode WS tokens, CSS.escape in selectors.

Code quality: add Pydantic models for brightness/power endpoints, fix
thread safety and name uniqueness in DeviceStore, immutable update
pattern, split 6 oversized files into 16 focused modules, enable
TypeScript strictNullChecks (741→102 errors), type state variables,
add dom-utils helper, migrate 3 modules from inline onclick to event
delegation, ProcessorDependencies dataclass.

Performance: async store saves, health endpoint log level, command
palette debounce, optimized entity-events comparison, fix service
worker precache list.

Testing: expand from 45 to 293 passing tests — add store tests (141),
route tests (25), core logic tests (42), E2E flow tests (33), organize
into tests/api/, tests/storage/, tests/core/, tests/e2e/.

DevOps: CI test pipeline, pre-commit config, Dockerfile multi-stage
build with non-root user and health check, docker-compose improvements,
version bump to 0.2.0.

Docs: rewrite CLAUDE.md (202→56 lines), server/CLAUDE.md (212→76),
create contexts/server-operations.md, fix .js→.ts references, fix env
var prefix in README, rewrite INSTALLATION.md, add CONTRIBUTING.md and
.env.example.

server/src/wled_controller/static/js/features/sync-clocks.ts

@@ -208,9 +208,7 @@ function _formatElapsed(seconds: number): string {
 export function createSyncClockCard(clock: SyncClock) {
     const statusIcon = clock.is_running ? ICON_START : ICON_PAUSE;
     const statusLabel = clock.is_running ? t('sync_clock.status.running') : t('sync_clock.status.paused');
-    const toggleAction = clock.is_running
-        ? `pauseSyncClock('${clock.id}')`
-        : `resumeSyncClock('${clock.id}')`;
+    const toggleAction = clock.is_running ? 'pause' : 'resume';
     const toggleTitle = clock.is_running ? t('sync_clock.action.pause') : t('sync_clock.action.resume');
     const elapsedLabel = clock.elapsed_time != null ? _formatElapsed(clock.elapsed_time) : null;
 
@@ -232,14 +230,46 @@ export function createSyncClockCard(clock: SyncClock) {
             ${renderTagChips(clock.tags)}
             ${clock.description ? `<div class="template-config" style="opacity:0.7;">${escapeHtml(clock.description)}</div>` : ''}`,
         actions: `
-                <button class="btn btn-icon btn-secondary" onclick="event.stopPropagation(); ${toggleAction}" title="${toggleTitle}">${clock.is_running ? ICON_PAUSE : ICON_START}</button>
-                <button class="btn btn-icon btn-secondary" onclick="event.stopPropagation(); resetSyncClock('${clock.id}')" title="${t('sync_clock.action.reset')}">${ICON_CLOCK}</button>
-                <button class="btn btn-icon btn-secondary" onclick="cloneSyncClock('${clock.id}')" title="${t('common.clone')}">${ICON_CLONE}</button>
-                <button class="btn btn-icon btn-secondary" onclick="editSyncClock('${clock.id}')" title="${t('common.edit')}">${ICON_EDIT}</button>`,
+                <button class="btn btn-icon btn-secondary" data-action="${toggleAction}" data-id="${clock.id}" title="${toggleTitle}">${clock.is_running ? ICON_PAUSE : ICON_START}</button>
+                <button class="btn btn-icon btn-secondary" data-action="reset" data-id="${clock.id}" title="${t('sync_clock.action.reset')}">${ICON_CLOCK}</button>
+                <button class="btn btn-icon btn-secondary" data-action="clone" data-id="${clock.id}" title="${t('common.clone')}">${ICON_CLONE}</button>
+                <button class="btn btn-icon btn-secondary" data-action="edit" data-id="${clock.id}" title="${t('common.edit')}">${ICON_EDIT}</button>`,
     });
 }
 
-// ── Expose to global scope for inline onclick handlers ──
+// ── Event delegation for sync-clock card actions ──
+
+const _syncClockActions: Record<string, (id: string) => void> = {
+    pause: pauseSyncClock,
+    resume: resumeSyncClock,
+    reset: resetSyncClock,
+    clone: cloneSyncClock,
+    edit: editSyncClock,
+};
+
+export function initSyncClockDelegation(container: HTMLElement): void {
+    container.addEventListener('click', (e: MouseEvent) => {
+        const btn = (e.target as HTMLElement).closest<HTMLElement>('[data-action]');
+        if (!btn) return;
+
+        // Only handle actions within a sync-clock card (data-id on card root)
+        const card = btn.closest<HTMLElement>('[data-id]');
+        const section = btn.closest<HTMLElement>('[data-card-section="sync-clocks"]');
+        if (!card || !section) return;
+
+        const action = btn.dataset.action;
+        const id = btn.dataset.id;
+        if (!action || !id) return;
+
+        const handler = _syncClockActions[action];
+        if (handler) {
+            e.stopPropagation();
+            handler(id);
+        }
+    });
+}
+
+// ── Expose to global scope for HTML template onclick handlers & graph-editor ──
 
 window.showSyncClockModal = showSyncClockModal;
 window.closeSyncClockModal = closeSyncClockModal;