feat: show currently selected image on home screen frame card

Decode the device's rendered 4bpp Spectra-6 .bin into a PNG (cached
next to the .bin) so the home-screen preview matches the dithered
6-color output the e-ink actually displays.

- New endpoint: GET /api/devices/{id}/preview
- Expose currentImageId on device JSON
- HomeView passes preview URL to FrameCard for both single and compact layouts
- Drive-by: fix vite.config.ts to import defineConfig from vitest/config
  so the build no longer fails on the unknown `test` property; remove
  unused useUploadStore import in HomeView test

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/test/components/DevicePicker.test.ts

@@ -33,6 +33,7 @@ const makeDevice = (overrides: Partial<Device> = {}): Device => ({
   linkedAt: '2026-01-01T00:00:00Z',
   lastSeenAt: null,
   lockedImageId: null,
+  currentImageId: null,
   ...overrides,
 })
 

frontend/src/test/stores/devices.test.ts

@@ -15,6 +15,7 @@ const makeDevice = (overrides: Partial<Device> = {}): Device => ({
   linkedAt: '2026-01-01T00:00:00Z',
   lastSeenAt: null,
   lockedImageId: null,
+  currentImageId: null,
   ...overrides,
 })
 

frontend/src/test/views/HomeView.test.ts

@@ -2,7 +2,6 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { setActivePinia, createPinia } from 'pinia'
 import { useDevicesStore } from '@/stores/devices'
-import { useUploadStore } from '@/stores/upload'
 import HomeView from '@/views/HomeView.vue'
 import type { Device } from '@/types'
 
@@ -70,6 +69,7 @@ const makeDevice = (overrides: Partial<Device> = {}): Device => ({
   linkedAt: '2026-01-01T00:00:00Z',
   lastSeenAt: null,
   lockedImageId: null,
+  currentImageId: null,
   ...overrides,
 })
 

frontend/src/test/views/LibraryView.test.ts

@@ -80,6 +80,7 @@ const makeDevice = (overrides: Partial<Device> = {}): Device => ({
   linkedAt: '2026-01-01T00:00:00Z',
   lastSeenAt: null,
   lockedImageId: null,
+  currentImageId: null,
   ...overrides,
 })
 

frontend/src/types/index.ts

@@ -18,6 +18,7 @@ export interface Device {
   linkedAt: string
   lastSeenAt: string | null
   lockedImageId: number | null
+  currentImageId: number | null
 }
 
 export interface CropParams {

frontend/src/views/HomeView.vue

@@ -29,6 +29,7 @@
         size="large"
         :status="deviceStatus(devicesStore.devices[0])"
         :orientation="devicesStore.devices[0].orientation"
+        :thumbnailUrl="previewUrl(devicesStore.devices[0])"
         @add-photo="onAddPhoto"
         @edit="onEdit"
       />
@@ -44,6 +45,7 @@
         size="compact"
         :status="deviceStatus(device)"
         :orientation="device.orientation"
+        :thumbnailUrl="previewUrl(device)"
         @add-photo="onAddPhoto"
         @edit="onEdit"
       />
@@ -109,6 +111,11 @@ function deviceStatus(device: Device): 'ok' | 'offline' {
   const windowMs = Math.max(device.rotationIntervalMinutes * 2 * 60_000, 30 * 60_000)
   return seenMs <= windowMs ? 'ok' : 'offline'
 }
+
+function previewUrl(device: Device): string | undefined {
+  const imageId = device.lockedImageId ?? device.currentImageId
+  return imageId ? `/api/devices/${device.id}/preview?v=${imageId}` : undefined
+}
 import FrameCard from '@/components/FrameCard.vue'
 import BaseBottomSheet from '@/components/BaseBottomSheet.vue'
 import BaseButton from '@/components/BaseButton.vue'

frontend/vite.config.ts

@@ -1,5 +1,4 @@
-/// <reference types="vitest" />
+import { defineConfig } from 'vitest/config'
-import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { fileURLToPath, URL } from 'node:url'
 

public/build/assets/BaseBottomSheet-BODCttr7.js

@@ -1 +1 @@
-import{C as e,H as t,M as n,P as r,R as i,_ as a,d as o,f as s,k as c,p as l,r as u,s as d,t as f,u as p,v as m,w as h,z as g}from"./_plugin-vue_export-helper-DVo1OUMD.js";import{c as _,d as v,f as y}from"./index-6y_HJqaF.js";var b=u(`devices`,()=>{let e=t([]),n=t(!1),r=t(null);async function i(){n.value=!0,r.value=null;try{let t=await fetch(`/api/devices`);if(!t.ok)throw Error(`Failed to load devices`);e.value=await t.json()}catch(e){r.value=e instanceof Error?e.message:`Unknown error`}finally{n.value=!1}}async function a(t,n){let r=await fetch(`/api/devices/${t}`,{method:`PATCH`,headers:{"Content-Type":`application/json`},body:JSON.stringify(n)});if(!r.ok)throw Error(`Failed to update device`);let i=await r.json(),a=e.value.findIndex(e=>e.id===t);return a!==-1&&(e.value[a]=i),i}async function o(t,n){let r=await fetch(`/api/devices/${t}/lock`,{method:`PUT`,headers:{"Content-Type":`application/json`},body:JSON.stringify({imageId:n})});if(!r.ok)throw Error(`Failed to lock image`);let i=await r.json(),a=e.value.findIndex(e=>e.id===t);return a!==-1&&(e.value[a]=i),i}async function s(t){let n=await fetch(`/api/devices/${t}/lock`,{method:`DELETE`});if(!n.ok)throw Error(`Failed to unlock`);let r=await n.json(),i=e.value.findIndex(e=>e.id===t);return i!==-1&&(e.value[i]=r),r}return{devices:e,loading:n,error:r,fetchDevices:i,updateDevice:a,lockImage:o,unlockImage:s}}),x=u(`upload`,()=>{let e=t(null),n=t(null),r=t(null),i=t(null),a=t(null),o=t([]),s=t(null),c=t([]),l=t(null);function u(t,r){g(),e.value=t,n.value=URL.createObjectURL(t),s.value=r??null,c.value=r?[r]:[]}async function d(t,r){g();let i=await(await fetch(t.originalUrl)).blob();e.value=new File([i],t.originalFilename,{type:i.type}),n.value=URL.createObjectURL(i),l.value=t.id,a.value=t.cropParams??null,o.value=t.stickerState?[...t.stickerState]:[],c.value=t.approvedDeviceIds,s.value=r??null}function f(e,t){i.value&&URL.revokeObjectURL(i.value),r.value=e,i.value=URL.createObjectURL(e),a.value=t}function p(e){o.value=[...o.value,e]}function m(e,t){o.value=o.value.map(n=>n.id===e?{...n,...t}:n)}function h(e){o.value=o.value.filter(t=>t.id!==e)}function g(){n.value&&URL.revokeObjectURL(n.value),i.value&&URL.revokeObjectURL(i.value),e.value=null,n.value=null,r.value=null,i.value=null,a.value=null,o.value=[],s.value=null,c.value=[],l.value=null}return{originalFile:e,originalUrl:n,croppedBlob:r,croppedUrl:i,cropParams:a,stickers:o,contextDeviceId:s,selectedDeviceIds:c,editingImageId:l,init:u,initEdit:d,setCrop:f,addSticker:p,updateSticker:m,removeSticker:h,cleanup:g}}),S={key:0,class:`btn__spinner`,"aria-hidden":`true`},C=f(m({__name:`BaseButton`,props:{variant:{default:`primary`},tag:{default:`button`},type:{default:`button`},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1}},setup(t){return(i,a)=>(c(),o(r(t.tag),e({type:t.tag===`button`?t.type:void 0,disabled:t.disabled||t.loading,class:[`btn`,`btn--${t.variant}`,{"btn--loading":t.loading}]},i.$attrs),{default:g(()=>[t.loading?(c(),l(`span`,S)):s(``,!0),n(i.$slots,`default`,{},void 0,!0)]),_:3},16,[`type`,`disabled`,`class`]))}}),[[`__scopeId`,`data-v-7d3f1e61`]]),w=[`aria-label`],T=f(m({__name:`BaseBottomSheet`,props:{modelValue:{type:Boolean},label:{}},emits:[`update:modelValue`],setup(e,{emit:r}){let u=e,f=r,m=t(null),b=null;function x(){f(`update:modelValue`,!1)}return i(()=>u.modelValue,async e=>{e?(b=document.activeElement,await h(),m.value?.focus()):(b?.focus(),b=null)}),(t,r)=>(c(),o(d,{to:`body`},[a(_,{name:`sheet`},{default:g(()=>[e.modelValue?(c(),l(`div`,{key:0,class:`sheet-overlay`,role:`dialog`,"aria-label":e.label,"aria-modal":`true`,onClick:y(x,[`self`]),onKeydown:v(x,[`esc`])},[p(`div`,{ref_key:`sheetRef`,ref:m,class:`sheet`,tabindex:`-1`},[r[0]||=p(`div`,{class:`sheet__handle`,"aria-hidden":`true`},null,-1),n(t.$slots,`default`,{},void 0,!0)],512)],40,w)):s(``,!0)]),_:3})]))}}),[[`__scopeId`,`data-v-81ce2dd1`]]);export{b as i,C as n,x as r,T as t};
+import{C as e,H as t,M as n,P as r,R as i,_ as a,d as o,f as s,k as c,p as l,r as u,s as d,t as f,u as p,v as m,w as h,z as g}from"./_plugin-vue_export-helper-DVo1OUMD.js";import{c as _,d as v,f as y}from"./index-C0Yc8pEe.js";var b=u(`devices`,()=>{let e=t([]),n=t(!1),r=t(null);async function i(){n.value=!0,r.value=null;try{let t=await fetch(`/api/devices`);if(!t.ok)throw Error(`Failed to load devices`);e.value=await t.json()}catch(e){r.value=e instanceof Error?e.message:`Unknown error`}finally{n.value=!1}}async function a(t,n){let r=await fetch(`/api/devices/${t}`,{method:`PATCH`,headers:{"Content-Type":`application/json`},body:JSON.stringify(n)});if(!r.ok)throw Error(`Failed to update device`);let i=await r.json(),a=e.value.findIndex(e=>e.id===t);return a!==-1&&(e.value[a]=i),i}async function o(t,n){let r=await fetch(`/api/devices/${t}/lock`,{method:`PUT`,headers:{"Content-Type":`application/json`},body:JSON.stringify({imageId:n})});if(!r.ok)throw Error(`Failed to lock image`);let i=await r.json(),a=e.value.findIndex(e=>e.id===t);return a!==-1&&(e.value[a]=i),i}async function s(t){let n=await fetch(`/api/devices/${t}/lock`,{method:`DELETE`});if(!n.ok)throw Error(`Failed to unlock`);let r=await n.json(),i=e.value.findIndex(e=>e.id===t);return i!==-1&&(e.value[i]=r),r}return{devices:e,loading:n,error:r,fetchDevices:i,updateDevice:a,lockImage:o,unlockImage:s}}),x=u(`upload`,()=>{let e=t(null),n=t(null),r=t(null),i=t(null),a=t(null),o=t([]),s=t(null),c=t([]),l=t(null);function u(t,r){g(),e.value=t,n.value=URL.createObjectURL(t),s.value=r??null,c.value=r?[r]:[]}async function d(t,r){g();let i=await(await fetch(t.originalUrl)).blob();e.value=new File([i],t.originalFilename,{type:i.type}),n.value=URL.createObjectURL(i),l.value=t.id,a.value=t.cropParams??null,o.value=t.stickerState?[...t.stickerState]:[],c.value=t.approvedDeviceIds,s.value=r??null}function f(e,t){i.value&&URL.revokeObjectURL(i.value),r.value=e,i.value=URL.createObjectURL(e),a.value=t}function p(e){o.value=[...o.value,e]}function m(e,t){o.value=o.value.map(n=>n.id===e?{...n,...t}:n)}function h(e){o.value=o.value.filter(t=>t.id!==e)}function g(){n.value&&URL.revokeObjectURL(n.value),i.value&&URL.revokeObjectURL(i.value),e.value=null,n.value=null,r.value=null,i.value=null,a.value=null,o.value=[],s.value=null,c.value=[],l.value=null}return{originalFile:e,originalUrl:n,croppedBlob:r,croppedUrl:i,cropParams:a,stickers:o,contextDeviceId:s,selectedDeviceIds:c,editingImageId:l,init:u,initEdit:d,setCrop:f,addSticker:p,updateSticker:m,removeSticker:h,cleanup:g}}),S={key:0,class:`btn__spinner`,"aria-hidden":`true`},C=f(m({__name:`BaseButton`,props:{variant:{default:`primary`},tag:{default:`button`},type:{default:`button`},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1}},setup(t){return(i,a)=>(c(),o(r(t.tag),e({type:t.tag===`button`?t.type:void 0,disabled:t.disabled||t.loading,class:[`btn`,`btn--${t.variant}`,{"btn--loading":t.loading}]},i.$attrs),{default:g(()=>[t.loading?(c(),l(`span`,S)):s(``,!0),n(i.$slots,`default`,{},void 0,!0)]),_:3},16,[`type`,`disabled`,`class`]))}}),[[`__scopeId`,`data-v-7d3f1e61`]]),w=[`aria-label`],T=f(m({__name:`BaseBottomSheet`,props:{modelValue:{type:Boolean},label:{}},emits:[`update:modelValue`],setup(e,{emit:r}){let u=e,f=r,m=t(null),b=null;function x(){f(`update:modelValue`,!1)}return i(()=>u.modelValue,async e=>{e?(b=document.activeElement,await h(),m.value?.focus()):(b?.focus(),b=null)}),(t,r)=>(c(),o(d,{to:`body`},[a(_,{name:`sheet`},{default:g(()=>[e.modelValue?(c(),l(`div`,{key:0,class:`sheet-overlay`,role:`dialog`,"aria-label":e.label,"aria-modal":`true`,onClick:y(x,[`self`]),onKeydown:v(x,[`esc`])},[p(`div`,{ref_key:`sheetRef`,ref:m,class:`sheet`,tabindex:`-1`},[r[0]||=p(`div`,{class:`sheet__handle`,"aria-hidden":`true`},null,-1),n(t.$slots,`default`,{},void 0,!0)],512)],40,w)):s(``,!0)]),_:3})]))}}),[[`__scopeId`,`data-v-81ce2dd1`]]);export{b as i,C as n,x as r,T as t};

public/build/assets/DevicePicker-Dz05cPit.js

@@ -1 +1 @@
-import{_ as e,d as t,g as n,j as r,k as i,l as a,o,p as s,pt as c,t as l,u,v as d,z as f}from"./_plugin-vue_export-helper-DVo1OUMD.js";import{n as p,t as m}from"./BaseBottomSheet-YbQyMMAQ.js";var h={class:`device-picker__list`},g=[`checked`,`onChange`],_={class:`device-picker__name`},v={class:`device-picker__orientation`},y=l(d({__name:`DevicePicker`,props:{modelValue:{type:Boolean},devices:{},selected:{},uploading:{type:Boolean}},emits:[`update:modelValue`,`update:selected`,`confirm`],setup(l,{emit:d}){let y=l,b=d;function x(e){y.selected.includes(e)?b(`update:selected`,y.selected.filter(t=>t!==e)):b(`update:selected`,[...y.selected,e])}let S=a(()=>{let e=y.selected.length;return e===0?`Add to frame`:`Add to ${e} frame${e>1?`s`:``}`});return(a,d)=>(i(),t(m,{"model-value":l.modelValue,label:`Choose frames`,"onUpdate:modelValue":d[1]||=e=>a.$emit(`update:modelValue`,e)},{default:f(()=>[d[2]||=u(`h2`,{class:`device-picker__title`},`Add to frames`,-1),d[3]||=u(`p`,{class:`device-picker__sub`},`Choose which frames will show this photo.`,-1),u(`div`,h,[(i(!0),s(o,null,r(l.devices,e=>(i(),s(`label`,{key:e.id,class:`device-picker__row`},[u(`input`,{type:`checkbox`,class:`device-picker__check`,checked:l.selected.includes(e.id),onChange:t=>x(e.id)},null,40,g),u(`span`,_,c(e.name),1),u(`span`,v,c(e.orientation),1)]))),128))]),e(p,{variant:`primary`,class:`device-picker__confirm`,disabled:l.selected.length===0||l.uploading,onClick:d[0]||=e=>a.$emit(`confirm`)},{default:f(()=>[n(c(l.uploading?`Uploading…`:S.value),1)]),_:1},8,[`disabled`])]),_:1},8,[`model-value`]))}}),[[`__scopeId`,`data-v-a6466fa5`]]);export{y as t};
+import{_ as e,d as t,g as n,j as r,k as i,l as a,o,p as s,pt as c,t as l,u,v as d,z as f}from"./_plugin-vue_export-helper-DVo1OUMD.js";import{n as p,t as m}from"./BaseBottomSheet-BODCttr7.js";var h={class:`device-picker__list`},g=[`checked`,`onChange`],_={class:`device-picker__name`},v={class:`device-picker__orientation`},y=l(d({__name:`DevicePicker`,props:{modelValue:{type:Boolean},devices:{},selected:{},uploading:{type:Boolean}},emits:[`update:modelValue`,`update:selected`,`confirm`],setup(l,{emit:d}){let y=l,b=d;function x(e){y.selected.includes(e)?b(`update:selected`,y.selected.filter(t=>t!==e)):b(`update:selected`,[...y.selected,e])}let S=a(()=>{let e=y.selected.length;return e===0?`Add to frame`:`Add to ${e} frame${e>1?`s`:``}`});return(a,d)=>(i(),t(m,{"model-value":l.modelValue,label:`Choose frames`,"onUpdate:modelValue":d[1]||=e=>a.$emit(`update:modelValue`,e)},{default:f(()=>[d[2]||=u(`h2`,{class:`device-picker__title`},`Add to frames`,-1),d[3]||=u(`p`,{class:`device-picker__sub`},`Choose which frames will show this photo.`,-1),u(`div`,h,[(i(!0),s(o,null,r(l.devices,e=>(i(),s(`label`,{key:e.id,class:`device-picker__row`},[u(`input`,{type:`checkbox`,class:`device-picker__check`,checked:l.selected.includes(e.id),onChange:t=>x(e.id)},null,40,g),u(`span`,_,c(e.name),1),u(`span`,v,c(e.orientation),1)]))),128))]),e(p,{variant:`primary`,class:`device-picker__confirm`,disabled:l.selected.length===0||l.uploading,onClick:d[0]||=e=>a.$emit(`confirm`)},{default:f(()=>[n(c(l.uploading?`Uploading…`:S.value),1)]),_:1},8,[`disabled`])]),_:1},8,[`model-value`]))}}),[[`__scopeId`,`data-v-a6466fa5`]]);export{y as t};

public/build/assets/SettingsView-Dbe21KxS.js

@@ -1 +1 @@
-import{K as e,dt as t,f as n,ft as r,j as i,k as a,l as o,o as s,p as c,pt as l,t as u,u as d,v as f}from"./_plugin-vue_export-helper-DVo1OUMD.js";import{n as p,r as m,t as h}from"./index-6y_HJqaF.js";var g={class:`settings`},_={class:`settings__section`},v={class:`theme-grid`,role:`radiogroup`,"aria-label":`Choose theme`},y=[`aria-checked`,`aria-label`,`onClick`],b={class:`theme-swatch__label`},x={key:0,class:`theme-swatch__check`,"aria-hidden":`true`},S={class:`settings__section`},C={class:`settings__row`},w={class:`settings__row-value`},T=u(f({__name:`SettingsView`,setup(u){let f=m(),{saveTheme:T}=p(),E=o(()=>f.user?.theme??`warm-craft`);function D(e){T(e)}return(o,u)=>(a(),c(`main`,g,[u[5]||=d(`h1`,{class:`settings__title`},`Settings`,-1),d(`section`,_,[u[1]||=d(`h2`,{class:`settings__section-title`},`Theme`,-1),d(`div`,v,[(a(!0),c(s,null,i(e(h),e=>(a(),c(`button`,{key:e.id,type:`button`,role:`radio`,"aria-checked":E.value===e.id,"aria-label":e.label,class:t([`theme-swatch`,{"theme-swatch--active":E.value===e.id}]),style:r({"--swatch-bg":e.bg,"--swatch-primary":e.primary,"--swatch-text":e.text}),onClick:t=>D(e.id)},[u[0]||=d(`span`,{class:`theme-swatch__preview`,"aria-hidden":`true`},[d(`span`,{class:`theme-swatch__bar`}),d(`span`,{class:`theme-swatch__dot`})],-1),d(`span`,b,l(e.label),1),E.value===e.id?(a(),c(`span`,x,`✓`)):n(``,!0)],14,y))),128))])]),d(`section`,S,[u[3]||=d(`h2`,{class:`settings__section-title`},`Account`,-1),d(`div`,C,[u[2]||=d(`span`,{class:`settings__row-label`},`Signed in as`,-1),d(`span`,w,l(e(f).user?.email),1)]),u[4]||=d(`a`,{href:`/logout`,class:`settings__logout`},`Sign out`,-1)])]))}}),[[`__scopeId`,`data-v-1446e085`]]);export{T as default};
+import{K as e,dt as t,f as n,ft as r,j as i,k as a,l as o,o as s,p as c,pt as l,t as u,u as d,v as f}from"./_plugin-vue_export-helper-DVo1OUMD.js";import{n as p,r as m,t as h}from"./index-C0Yc8pEe.js";var g={class:`settings`},_={class:`settings__section`},v={class:`theme-grid`,role:`radiogroup`,"aria-label":`Choose theme`},y=[`aria-checked`,`aria-label`,`onClick`],b={class:`theme-swatch__label`},x={key:0,class:`theme-swatch__check`,"aria-hidden":`true`},S={class:`settings__section`},C={class:`settings__row`},w={class:`settings__row-value`},T=u(f({__name:`SettingsView`,setup(u){let f=m(),{saveTheme:T}=p(),E=o(()=>f.user?.theme??`warm-craft`);function D(e){T(e)}return(o,u)=>(a(),c(`main`,g,[u[5]||=d(`h1`,{class:`settings__title`},`Settings`,-1),d(`section`,_,[u[1]||=d(`h2`,{class:`settings__section-title`},`Theme`,-1),d(`div`,v,[(a(!0),c(s,null,i(e(h),e=>(a(),c(`button`,{key:e.id,type:`button`,role:`radio`,"aria-checked":E.value===e.id,"aria-label":e.label,class:t([`theme-swatch`,{"theme-swatch--active":E.value===e.id}]),style:r({"--swatch-bg":e.bg,"--swatch-primary":e.primary,"--swatch-text":e.text}),onClick:t=>D(e.id)},[u[0]||=d(`span`,{class:`theme-swatch__preview`,"aria-hidden":`true`},[d(`span`,{class:`theme-swatch__bar`}),d(`span`,{class:`theme-swatch__dot`})],-1),d(`span`,b,l(e.label),1),E.value===e.id?(a(),c(`span`,x,`✓`)):n(``,!0)],14,y))),128))])]),d(`section`,S,[u[3]||=d(`h2`,{class:`settings__section-title`},`Account`,-1),d(`div`,C,[u[2]||=d(`span`,{class:`settings__row-label`},`Signed in as`,-1),d(`span`,w,l(e(f).user?.email),1)]),u[4]||=d(`a`,{href:`/logout`,class:`settings__logout`},`Sign out`,-1)])]))}}),[[`__scopeId`,`data-v-1446e085`]]);export{T as default};

public/build/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/build/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>frontend</title>
-    <script type="module" crossorigin src="/build/assets/index-6y_HJqaF.js"></script>
+    <script type="module" crossorigin src="/build/assets/index-C0Yc8pEe.js"></script>
     <link rel="modulepreload" crossorigin href="/build/assets/_plugin-vue_export-helper-DVo1OUMD.js">
     <link rel="stylesheet" crossorigin href="/build/assets/index-DlN2hqev.css">
   </head>

src/Controller/DeviceApiController.php

@@ -6,13 +6,18 @@ namespace App\Controller;
 
 use App\Entity\Device;
 use App\Entity\Image;
+use App\Entity\RenderedAsset;
 use App\Entity\User;
 use App\Enum\Orientation;
+use App\Enum\RenderStatus;
 use Doctrine\ORM\EntityManagerInterface;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\HttpFoundation\BinaryFileResponse;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpFoundation\ResponseHeaderBag;
 use Symfony\Component\Routing\Attribute\Route;
 use Symfony\Component\Security\Http\Attribute\IsGranted;
 
@@ -20,6 +25,23 @@ use Symfony\Component\Security\Http\Attribute\IsGranted;
 #[IsGranted('ROLE_USER')]
 class DeviceApiController extends AbstractController
 {
+    // Spectra 6 palette — must match RenderImageMessageHandler::PALETTE.
+    // Used to decode the device's 4bpp .bin into an RGB preview that mirrors
+    // exactly what the e-ink displays.
+    private const PALETTE = [
+        0x0 => [26,  26,  26 ],  // BLACK
+        0x1 => [245, 245, 240],  // WHITE
+        0x2 => [240, 208, 0  ],  // YELLOW
+        0x3 => [192, 48,  32 ],  // RED
+        0x5 => [24,  64,  192],  // BLUE
+        0x6 => [16,  160, 64 ],  // GREEN
+    ];
+
+    public function __construct(
+        #[Autowire('%kernel.project_dir%')]
+        private readonly string $projectDir,
+    ) {}
+
     #[Route('', name: 'api_devices_list', methods: ['GET'])]
     public function list(EntityManagerInterface $em): JsonResponse
     {
@@ -149,6 +171,83 @@ class DeviceApiController extends AbstractController
             'linkedAt'                => $d->getLinkedAt()->format(\DateTimeInterface::ATOM),
             'lastSeenAt'              => $d->getLastSeenAt()?->format(\DateTimeInterface::ATOM),
             'lockedImageId'           => $d->getLockedImage()?->getId(),
+            'currentImageId'          => $d->getCurrentImage()?->getId(),
         ];
     }
+
+    /**
+     * Serve a PNG preview of the image currently shown on the frame, decoded
+     * from the device's rendered 4bpp Spectra-6 .bin so the colors match what
+     * the e-ink actually displays. The PNG is cached on disk next to the .bin.
+     */
+    #[Route('/{id}/preview', name: 'api_device_preview', methods: ['GET'])]
+    public function preview(int $id, EntityManagerInterface $em): Response
+    {
+        /** @var User $user */
+        $user   = $this->getUser();
+        $device = $em->getRepository(Device::class)->findOneBy(['id' => $id, 'user' => $user]);
+        if (!$device) {
+            return $this->json(['error' => 'Device not found'], Response::HTTP_NOT_FOUND);
+        }
+
+        $image = $device->getLockedImage() ?? $device->getCurrentImage();
+        if (!$image || $image->isDeleted()) {
+            return $this->json(['error' => 'No current image'], Response::HTTP_NOT_FOUND);
+        }
+
+        $asset = $em->getRepository(RenderedAsset::class)->findOneBy([
+            'image'       => $image,
+            'deviceModel' => $device->getModel(),
+            'orientation' => $device->getOrientation(),
+            'status'      => RenderStatus::Ready,
+        ]);
+        if (!$asset?->getFilePath()) {
+            return $this->json(['error' => 'Render not ready'], Response::HTTP_NOT_FOUND);
+        }
+
+        $binPath = $this->projectDir . '/' . $asset->getFilePath();
+        if (!file_exists($binPath)) {
+            return $this->json(['error' => 'Render file missing'], Response::HTTP_NOT_FOUND);
+        }
+
+        $pngPath = preg_replace('/\.bin$/', '.png', $binPath);
+        if (!file_exists($pngPath) || filemtime($pngPath) < filemtime($binPath)) {
+            $this->renderBinToPng(
+                $binPath,
+                $pngPath,
+                $device->getModel()->width($device->getOrientation()),
+                $device->getModel()->height($device->getOrientation()),
+            );
+        }
+
+        $response = new BinaryFileResponse($pngPath);
+        $response->headers->set('Content-Type', 'image/png');
+        $response->setContentDisposition(
+            ResponseHeaderBag::DISPOSITION_INLINE,
+            'frame-' . $device->getId() . '.png',
+        );
+        return $response;
+    }
+
+    private function renderBinToPng(string $binPath, string $pngPath, int $width, int $height): void
+    {
+        $bin    = (string) file_get_contents($binPath);
+        $len    = strlen($bin);
+        $rgb    = '';
+        $white  = self::PALETTE[0x1];
+        for ($i = 0; $i < $len; $i++) {
+            $byte = ord($bin[$i]);
+            foreach ([($byte >> 4) & 0xF, $byte & 0xF] as $idx) {
+                $c = self::PALETTE[$idx] ?? $white;
+                $rgb .= chr($c[0]) . chr($c[1]) . chr($c[2]);
+            }
+        }
+
+        $im = new \Imagick();
+        $im->newImage($width, $height, new \ImagickPixel('white'));
+        $im->importImagePixels(0, 0, $width, $height, 'RGB', \Imagick::PIXEL_CHAR, $rgb);
+        $im->setImageFormat('png');
+        $im->writeImage($pngPath);
+        $im->destroy();
+    }
 }