make overlay draft recovery explicit

src/App.svelte

@@ -93,6 +93,7 @@
   let overlayBusy = false;
   let overlaySavedSignature = '';
   let overlayAutosaveAttemptedSignature = '';
+  let pendingOverlayDraft: { overlayName: string; overlaySlug: string; overlayHtml: string; overlayCss: string; overlayJavascript: string; overlayEnabled: boolean; overlayDisabledDesign: string } | null = null;
   let overlayAutosaveTimer: number | undefined;
   let oauthScopes: Record<'streamer' | 'bot', { connected: boolean; missing_scopes: string[]; reauthorization_required: boolean }> = {
     streamer: { connected: false, missing_scopes: [], reauthorization_required: false },
@@ -705,6 +706,7 @@
   }
 
   function selectOverlay(overlay: (typeof overlays)[number]) {
+    pendingOverlayDraft = null;
     selectedOverlayId = overlay.id;
     overlayName = overlay.name;
     overlaySlug = overlay.slug;
@@ -739,15 +741,16 @@
     try {
       const cached = JSON.parse(localStorage.getItem(overlayDraftCacheKey(id)) || 'null') as Partial<{ overlayName: string; overlaySlug: string; overlayHtml: string; overlayCss: string; overlayJavascript: string; overlayEnabled: boolean; overlayDisabledDesign: string }> | null;
       if (!cached || typeof cached.overlayName !== 'string') return;
-      overlayName = cached.overlayName;
-      overlaySlug = cached.overlaySlug ?? overlaySlug;
-      overlayHtml = cached.overlayHtml ?? overlayHtml;
-      overlayCss = cached.overlayCss ?? overlayCss;
-      overlayJavascript = cached.overlayJavascript ?? overlayJavascript;
-      overlayEnabled = cached.overlayEnabled ?? overlayEnabled;
-      overlayDisabledDesign = cached.overlayDisabledDesign ?? overlayDisabledDesign;
-      overlaySavedSignature = '';
-      overlayAutosaveAttemptedSignature = '';
+      const cachedSignature = JSON.stringify(cached);
+      if (cachedSignature !== overlayDraftSignature()) pendingOverlayDraft = {
+        overlayName: cached.overlayName,
+        overlaySlug: cached.overlaySlug ?? overlaySlug,
+        overlayHtml: cached.overlayHtml ?? overlayHtml,
+        overlayCss: cached.overlayCss ?? overlayCss,
+        overlayJavascript: cached.overlayJavascript ?? overlayJavascript,
+        overlayEnabled: cached.overlayEnabled ?? overlayEnabled,
+        overlayDisabledDesign: cached.overlayDisabledDesign ?? overlayDisabledDesign,
+      };
     } catch {
       // Ignore malformed or unavailable local cache entries.
     }
@@ -758,6 +761,7 @@
     overlayAutosaveTimer = undefined;
     overlaySavedSignature = '';
     overlayAutosaveAttemptedSignature = '';
+    pendingOverlayDraft = null;
     selectedOverlayId = '';
     overlayName = 'New Overlay';
     overlaySlug = `overlay-${Date.now()}`;
@@ -768,6 +772,19 @@
     overlayDisabledDesign = 'transparent';
   }
 
+  function restorePendingOverlayDraft() {
+    if (!pendingOverlayDraft) return;
+    ({ overlayName, overlaySlug, overlayHtml, overlayCss, overlayJavascript, overlayEnabled, overlayDisabledDesign } = pendingOverlayDraft);
+    pendingOverlayDraft = null;
+    overlaySavedSignature = '';
+    overlayAutosaveAttemptedSignature = '';
+  }
+
+  function discardPendingOverlayDraft() {
+    if (selectedOverlayId) localStorage.removeItem(overlayDraftCacheKey(selectedOverlayId));
+    pendingOverlayDraft = null;
+  }
+
   async function saveOverlay() {
     overlayBusy = true;
     overlayError = '';
@@ -1002,5 +1019,11 @@
         <button class="primary" onclick={() => chatThreadRoot && replyToChatMessage(chatThreadRoot)}>REPLY IN THREAD</button>
       </section>
     {/if}
+    {#if pendingOverlayDraft}
+      <section class="panel overlay-recovery-panel">
+        <div class="panel-header"><span>LOCAL OVERLAY DRAFT FOUND</span></div>
+        <div class="settings-body"><span>A newer unsaved draft is available for this overlay.</span><div class="overlay-controls"><button class="primary" onclick={restorePendingOverlayDraft}>RESTORE LOCAL DRAFT</button><button class="secondary" onclick={discardPendingOverlayDraft}>DISCARD LOCAL DRAFT</button></div></div>
+      </section>
+    {/if}
   </main>
 </div>