Add brightness overlay and enlarge LED preview on target cards

Show effective brightness percentage on the LED preview when a
value source dims below 100%. Prepend a brightness byte to the
preview WebSocket wire format. Increase preview height to 32px.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/static/css/cards.css

@@ -631,13 +631,27 @@ ul.section-tip li {
 
 .led-preview-panel {
     padding: 4px 0 0;
+    position: relative;
 }
 
 .led-preview-canvas {
     display: block;
     width: 100%;
-    height: 16px;
+    height: 32px;
     border-radius: 3px;
     image-rendering: pixelated;
     background: #111;
 }
+
+.led-preview-brightness {
+    position: absolute;
+    right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 0.8rem;
+    font-family: var(--font-mono, monospace);
+    color: #fff;
+    text-shadow: 0 0 3px rgba(0,0,0,0.8);
+    pointer-events: none;
+    opacity: 0.8;
+}

server/src/wled_controller/static/js/features/targets.js

@@ -846,6 +846,7 @@ export function createTargetCard(target, deviceMap, colorStripSourceMap, valueSo
             </div>
             <div id="led-preview-panel-${target.id}" class="led-preview-panel" style="display:${ledPreviewWebSockets[target.id] ? '' : 'none'}">
                 <canvas id="led-preview-canvas-${target.id}" class="led-preview-canvas"></canvas>
+                <span id="led-preview-brightness-${target.id}" class="led-preview-brightness" style="display:none"></span>
             </div>
             <div class="card-actions">
                 ${isProcessing ? `
@@ -1041,10 +1042,24 @@ function connectLedPreviewWS(targetId) {
 
         ws.onmessage = (event) => {
             if (event.data instanceof ArrayBuffer) {
-                const frame = new Uint8Array(event.data);
+                const raw = new Uint8Array(event.data);
+                // Wire format: [brightness_byte] [R G B R G B ...]
+                const brightness = raw[0];
+                const frame = raw.subarray(1);
                 _ledPreviewLastFrame[targetId] = frame;
                 const canvas = document.getElementById(`led-preview-canvas-${targetId}`);
                 if (canvas) _renderLedStrip(canvas, frame);
+                // Show brightness label when below 100%
+                const bLabel = document.getElementById(`led-preview-brightness-${targetId}`);
+                if (bLabel) {
+                    const pct = Math.round(brightness / 255 * 100);
+                    if (pct < 100) {
+                        bLabel.textContent = `☀ ${pct}%`;
+                        bLabel.style.display = '';
+                    } else {
+                        bLabel.style.display = 'none';
+                    }
+                }
             }
         };