feat(ui): implement unified floating Save Updates banner and fix native body alignment parsing

Author: Corey B

extension/content.js

@@ -12,6 +12,14 @@ if (document.contentType === 'text/plain' && document.body.firstElementChild?.ta
   const parser = new DOMParser();
   originalDocParser = parser.parseFromString(rawPayloadString, "text/html");
 
+  // Attempt to carry over original body inline styles explicitly to fix left-align rendering bugs
+  const bodyStyles = originalDocParser.body.getAttribute('style');
+  if (bodyStyles) {
+      document.body.setAttribute('style', bodyStyles);
+  } else {
+      document.body.style.cssText = "background: #f1f5f9; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0;";
+  }
+
   const fddWrapper = originalDocParser.querySelector('fdd-container');
   if (fddWrapper) {
     document.body.appendChild(fddWrapper.cloneNode(true));
@@ -27,6 +35,7 @@ class ExtensionFDD {
     this.vcData = {};
     this.mutableData = {};
     this.fileHandle = null;
+    this.hasUnsavedChanges = false;
     if (!this.template) throw new Error("No bindings template found");
     this.init();
   }
@@ -104,7 +113,7 @@ class ExtensionFDD {
   setupAutoSave(root) {
     const inputs = root.querySelectorAll('[autosave]');
     inputs.forEach(input => {
-      // Prompt user for local file persistence capability on intersection/interaction click
+      // Prompt user for local file persistence capability on intersection/interaction hover
       input.addEventListener('pointerdown', async () => {
          if (!this.fileHandle && window.showOpenFilePicker && document.contentType !== 'text/plain') {
              try {
@@ -123,26 +132,64 @@ class ExtensionFDD {
          }
       });
 
-      // Commit to persistent disk layer via handler mechanism
-      input.addEventListener('change', async (e) => {
+      // Instead of forcing an annoying auto-download immediately on every blur, we accumulate state.
+      const handleStateChange = (e) => {
         const path = e.target.name.split('.');
         if (path[0] === 'user-notes' && path[1]) {
           this.mutableData[path[1]] = e.target.value;
-          await this.syncFile();
+          this.hasUnsavedChanges = true;
+          this.showSaveBanner();
         }
-      });
+      };
+
+      input.addEventListener('change', handleStateChange);
+      input.addEventListener('keyup', handleStateChange); // Catches instant notes modifications
+    });
+  }
+
+  showSaveBanner() {
+      let banner = document.getElementById('fdd-save-banner');
+      if (banner) return; // already visible
+
+      banner = document.createElement('div');
+      banner.id = 'fdd-save-banner';
+      banner.style.cssText = `
+        position: fixed; bottom: 0; left: 0; right: 0; 
+        background: #001f3f; color: white; padding: 15px 40px; 
+        display: flex; justify-content: space-between; align-items: center; 
+        z-index: 9999; font-family: system-ui; box-shadow: 0 -4px 15px rgba(0,0,0,0.2);
+        border-top: 3px solid #3b82f6;
+      `;
 
-      input.addEventListener('blur', async (e) => {
-        const path = e.target.name.split('.');
-        if (path[0] === 'user-notes' && path[1]) {
-          this.mutableData[path[1]] = e.target.value;
-          await this.syncFile();
-        }
+      const text = document.createElement('span');
+      text.innerText = "You have unsaved changes to this document.";
+      text.style.fontSize = "1.1rem";
+      text.style.fontWeight = "600";
+
+      const btn = document.createElement('button');
+      btn.innerText = "Save Updates";
+      btn.style.cssText = `
+        background: #10b981; color: white; border: none; padding: 10px 24px; 
+        border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 1rem;
+        transition: transform 0.2s ease, background 0.2s ease;
+      `;
+      
+      btn.onmouseover = () => btn.style.background = "#059669";
+      btn.onmouseout = () => btn.style.background = "#10b981";
+      btn.onmousedown = () => btn.style.transform = "scale(0.95)";
+      btn.onmouseup = () => btn.style.transform = "scale(1)";
+
+      btn.addEventListener('click', () => {
+          this.commitSave();
+          banner.remove();
       });
-    });
+
+      banner.appendChild(text);
+      banner.appendChild(btn);
+      document.body.appendChild(banner);
   }
 
-  async syncFile() {
+  async commitSave() {
     console.log("Deploying local disk persistent save...", this.mutableData);
     if (!originalDocParser) return;
 
@@ -152,6 +199,7 @@ class ExtensionFDD {
         mutableScript.textContent = "\n    " + JSON.stringify(this.mutableData, null, 2) + "\n  ";
     }
 
+    // Completely rebuild the underlying document structure out of isolated components
     const content = "<!DOCTYPE html>\n" + originalDocParser.documentElement.outerHTML;
 
     // Primary Write Strategy (Windows / macOS / Chromium Standards)
@@ -160,33 +208,41 @@ class ExtensionFDD {
             const writable = await this.fileHandle.createWritable();
             await writable.write(content);
             await writable.close();
+            this.hasUnsavedChanges = false;
             this.showBadge("✓ FDD Synced Directly to Disk", "#10b981");
             return;
         } catch (e) {
             console.error("Direct FDD Persist Error, falling back...", e);
         }
     }
 
-    // Secondary Linux / Missing FileURL Permission Fallback Strategy
+    // Secondary Universal Download Fallback / Linux Fallback Strategy
+    // Tries to seamlessly update existing file via universal download replacement patterns
     console.warn("Executing native Download Fallback mapping for persistent storage");
+    let currentFilename = window.location.pathname.split('/').pop();
+    if (!currentFilename || currentFilename === '') currentFilename = 'updated_document.fdd';
+    if (!currentFilename.endsWith('.fdd')) currentFilename += '.fdd';
+
     const blob = new Blob([content], { type: 'text/html' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
-    a.download = 'updated.fdd';
+    a.download = decodeURIComponent(currentFilename);
     document.body.appendChild(a);
     a.click();
+    
+    // Cleanup
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
-    this.showBadge("⚠️ Downloaded New FDD Backup", "#fbbf24");
+    this.hasUnsavedChanges = false;
+    this.showBadge("✓ Saved Local Backup of FDD", "#3b82f6");
   }
 
   showBadge(msg, color) {
       const badge = document.createElement('div');
       badge.style.cssText = `position:fixed;bottom:20px;right:20px;background:${color};color:white;padding:10px 18px;border-radius:999px;z-index:9999;font-family:system-ui;font-weight:bold;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);`;
       badge.innerText = msg;
 
-      // Since container is a shadowRoot, we append directly to the host body
       document.body.appendChild(badge);
       setTimeout(() => {
           badge.style.transition = 'opacity 0.5s ease';

spec/SPEC.md

@@ -36,10 +36,10 @@ The FDD container enforces a **Layered Signature Model** inside the `<fdd-contai
 
 ## 3. The "Self-Saving" Mechanism (Persistence)
 
-An `.fdd` file acts as its own state database. Updates to the DOM natively sync back to the originating `.fdd` file on disk via the File System Access API.
+An `.fdd` file acts as its own state database. Updates to the DOM natively sync back to the originating `.fdd` file on disk relying on unified persistence strategies.
 
-*   When the `.fdd` parser binds a `<textarea name="user-notes.followUp" autosave>` to the local state, a subsequent user edit triggers a local file-write request.
-*   The `.fdd` spec advocates for browser vendors to support a "Auto-Save Trust" permission (*"Allow this document to update itself"*).
+*   **Primary Strategy (File System Access API):** The `.fdd` parser bounds interactive changes to an explicit write-lock approval prompt on execution. If granted, mutable components actively rewrite the local file.
+*   **Universal Fallback (The Save Pattern):** Because native write-locks are routinely restricted (e.g., Linux sandbox environments), the FDD specification standardizes a uniform "Save Updates" interface. When active edits mutate the DOM, a persistent prompt alerts the user. Committing the save leverages ambient URI hooks to default the OS download to exactly match the originating `.fdd`'s filename and route.
 
 ## 4. No-JS Security Model
 Since executable scripts are blocked, interactions scale through: