Add a live preview thumbnail next to the frame name

Small header thumbnail showing exactly what the frame is currently
displaying -- same widget compositor /frame/image uses, handed back as
a plain PNG (image_pipeline.render_panel/render_placeholder gain an
as_png option) instead of packed native-panel bytes. New session-authed
GET /api/frames/{id}/preview exposes it; click-to-refresh plus a slow
60s poll on the frame header so it doesn't hammer Immich/calendar
sources just for a header thumbnail.

server/app/static/frame_header.js

@@ -57,3 +57,20 @@
     if (e.key === 'Escape') closeEdit();
   });
 })();
+
+// Live "how it's displaying" thumbnail. A real composite render (same
+// pipeline /frame/image uses), not a cached snapshot, so it's on a slow
+// poll and also click-to-refresh rather than something tighter like the
+// 10s device-status poll -- no need to hit Immich/calendar/whiteboard
+// sources that often just for a header thumbnail.
+(function () {
+  var thumb = document.getElementById('frame-preview-thumb');
+  if (!thumb || !window.FRAME_BASE_API) return;
+
+  function refresh() {
+    thumb.src = `${window.FRAME_BASE_API}/preview?t=${Date.now()}`;
+  }
+  thumb.addEventListener('click', refresh);
+  refresh();
+  setInterval(refresh, 60000);
+})();

server/app/static/theme.css

@@ -619,6 +619,21 @@ code {
 }
 .frame-name-edit button { margin-top: 0; }
 
+.frame-preview-thumb {
+  height: 44px;
+  width: auto;
+  max-width: 130px;
+  object-fit: contain;
+  vertical-align: middle;
+  margin-left: 12px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--surface-alt);
+  cursor: pointer;
+  transition: opacity .12s ease;
+}
+.frame-preview-thumb:hover { opacity: 0.8; }
+
 .control-banner {
   display: flex;
   align-items: center;