feat(devices): owner can mark a frame as sold and unlink it pre-emptively

Pairs with the new claim-on-takeover checkbox: now the seller can purge
their data BEFORE handing the device over, so even if they forget to
hold the BOOT button to wipe NVS, the next owner can't accidentally pull
their photos.

Backend:
  - DELETE /api/devices/{id}: owner-only (404 for cross-tenant). Revokes
    image-device approvals, drops history rows, removes the Device row
    entirely so the MAC is unclaimed. The next poll from that physical
    frame returns 404 → setup QR for the next owner.
  - DeviceService::deleteDeviceForOwner extracts the cleanup so the
    controller stays thin.
  - Mercure publish on delete sends {id, deleted: true} so any other
    open PWA tabs splice the row out instantly.

Frontend:
  - Settings sheet (BaseBottomSheet): "Remove this frame" link below
    Save, in danger red with an explanatory hint about when to use it.
  - Native window.confirm gate — destructive + irreversible, the
    weight of native-confirm is honest. (A bespoke modal would be
    polish.)
  - useDeviceMercure: handles the {id, deleted: true} sentinel — splices
    the device out + closes its own EventSource for that topic.
  - useDevicesStore.removeDevice: DELETE + local store filter.

Tests added:
  - DeviceApiControllerTest: 4 cases — happy-path delete purges
    everything, 404 cross-tenant, anon redirects to login, and
    post-delete the device-poll endpoint 404s (fresh-MAC guarantee).
  - HomeView.test.ts: confirm-yes calls store + closes sheet,
    confirm-cancel does NOT call removeDevice.
  - useDeviceMercure.test.ts: deletion sentinel splices the device
    out and closes the EventSource.

Coverage: 99.71% lines / 98.21% methods backend, 98.31% lines frontend.
558 tests total via ddev tests.

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

frontend/src/views/HomeView.vue

@@ -223,6 +223,20 @@
     >
       {{ saving ? 'Saving…' : 'Save' }}
     </BaseButton>
+
+    <button
+      type="button"
+      class="home-view__remove"
+      :disabled="removing"
+      @click="confirmAndRemove"
+    >
+      {{ removing ? 'Removing…' : 'Remove this frame' }}
+    </button>
+    <p class="home-view__remove-hint">
+      Use this if you’re selling or giving away the frame. It deletes
+      this frame from your account and unlinks it from your photos so the
+      next owner can claim it fresh.
+    </p>
   </BaseBottomSheet>
 </template>
 
@@ -481,6 +495,7 @@ const TIMEZONE_GROUPS = [
 
 const sheetOpen = ref(false)
 const saving = ref(false)
+const removing = ref(false)
 const editingDevice = ref<Device | null>(null)
 const editName = ref('')
 const editOrientation = ref<Device['orientation']>('landscape')
@@ -637,6 +652,27 @@ function onEdit(deviceId: number) {
   sheetOpen.value = true
 }
 
+async function confirmAndRemove() {
+  if (!editingDevice.value) return
+  const name = editingDevice.value.name || 'this frame'
+  // Native confirm — destructive, irreversible, single-user action. A
+  // bespoke modal would be polish; native is honest about the weight.
+  const ok = window.confirm(
+    `Remove "${name}" from your account?\n\n` +
+    `This deletes the frame's history and unlinks all photos you'd ` +
+    `approved for it. Use this when selling or giving the frame away.`,
+  )
+  if (!ok) return
+
+  removing.value = true
+  try {
+    await devicesStore.removeDevice(editingDevice.value.id)
+    sheetOpen.value = false
+  } finally {
+    removing.value = false
+  }
+}
+
 async function saveSettings() {
   if (!editingDevice.value) return
   saving.value = true
@@ -972,5 +1008,38 @@ async function saveSettings() {
     width: 100%;
     margin-top: var(--space-2);
   }
+
+  &__remove {
+    width: 100%;
+    margin-top: var(--space-5);
+    padding: var(--space-2) var(--space-3);
+    min-height: var(--touch-min);
+    border: 1.5px solid transparent;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--color-danger, #c0392b);
+    font-size: var(--text-sm);
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--duration-fast);
+
+    &:hover, &:focus-visible {
+      border-color: var(--color-danger, #c0392b);
+      outline: none;
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+  &__remove-hint {
+    margin-top: var(--space-1);
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+    line-height: 1.4;
+    text-align: center;
+  }
 }
 </style>