pinokiod 8.0.61 → 8.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "8.0.61",
+  "version": "8.0.62",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/public/layout.js

@@ -241,12 +241,7 @@
     iframe.addEventListener('focus', markActive);
     iframe.addEventListener('pointerdown', markActive);
 
-    entry = {
-      container,
-      iframe,
-      updateNodeLocation,
-      vaultAutoSettingsReady: false,
-    };
+    entry = { container, iframe, updateNodeLocation };
     leafElements.set(node.id, entry);
     return entry;
   }
@@ -641,7 +636,6 @@
       leaf.src = state.defaultPath;
       const entry = leafElements.get(leaf.id);
       if (entry) {
-        entry.vaultAutoSettingsReady = false;
         entry.iframe.src = leaf.src;
       }
       cleanupSessionIfSingleLeaf();
@@ -688,7 +682,6 @@
       return false;
     }
     node.src = normalized;
-    entry.vaultAutoSettingsReady = false;
     entry.iframe.src = normalized;
     state.activeLeafId = frameId;
     saveStateToStorage();
@@ -699,16 +692,6 @@
     if (!event || !event.data || typeof event.data !== 'object') {
       return;
     }
-    if (event.data.e === 'vault-auto-settings-ready' &&
-        event.origin === window.location.origin) {
-      for (const entry of leafElements.values()) {
-        if (entry.iframe && entry.iframe.contentWindow === event.source) {
-          entry.vaultAutoSettingsReady = true;
-          break;
-        }
-      }
-      return;
-    }
     if (event.data.e === 'layout-state-request') {
       let frameEntry = null;
       let frameId = null;
@@ -788,7 +771,6 @@
       if (node.type === 'leaf') {
         const entry = ensureLeafElement(node);
         if (entry && entry.iframe.src !== node.src) {
-          entry.vaultAutoSettingsReady = false;
           entry.iframe.src = node.src;
         }
       }
@@ -874,21 +856,23 @@
     const COMPLETION_VISIBLE_MS = 4000;
 
     let eventSource = null;
-    let visibleCheckingApps = new Set();
-    const completions = new Map();
-
-    function statusText(row) {
-      if (row.state === 'paused') {
-        return 'Automatic checks are off';
+    const cards = new Map();
+
+    function statusText(state) {
+      if (state === 'paused') return 'Automatic checks are paused';
+      if (state === 'result') return 'Possible duplicate files found';
+      if (state === 'complete') return 'No possible duplicate files found';
+      if (state === 'checking-again') {
+        return 'Checking again for possible duplicate files...';
       }
-      return 'Checking for possible duplicate files…';
+      return 'Checking for possible duplicate files...';
     }
 
-    function actionFor(row) {
-      if (row.state === 'paused') {
+    function actionFor(state) {
+      if (state === 'paused') {
         return { label: 'Resume', action: 'automatic_resume' };
       }
-      if (row.state === 'result') {
+      if (state === 'result') {
         return { label: 'Review', action: 'automatic_review' };
       }
       return { label: 'Pause', action: 'automatic_pause' };
@@ -915,21 +899,27 @@
       return result || {};
     }
 
-    function removeRow(item) {
-      item.remove();
-      tray.hidden = tray.childElementCount === 0;
-    }
-
-    function removeCompletion(app) {
-      const completion = completions.get(app);
+    function stopCompletion(card) {
+      const completion = card && card.completion;
       if (!completion) return;
       if (completion.timer) window.clearTimeout(completion.timer);
-      completions.delete(app);
-      removeRow(completion.item);
+      card.completion = null;
     }
 
-    function clearCompletions() {
-      [...completions.keys()].forEach(removeCompletion);
+    function removeCard(app) {
+      const card = cards.get(app);
+      if (card) {
+        stopCompletion(card);
+        card.item.remove();
+      }
+      cards.delete(app);
+      tray.hidden = cards.size === 0;
+    }
+
+    function resetCards() {
+      [...cards.keys()].forEach(removeCard);
+      tray.replaceChildren();
+      tray.hidden = true;
     }
 
     function scheduleCompletion(completion) {
@@ -937,11 +927,12 @@
       completion.startedAt = Date.now();
       completion.timer = window.setTimeout(() => {
         completion.timer = null;
-        removeCompletion(completion.app);
+        removeCard(completion.app);
       }, completion.remaining);
     }
 
     function setCompletionPaused(completion, reason, paused) {
+      if (!completion) return;
       if (paused) {
         if (completion.paused.has(reason)) return;
         if (!completion.paused.size && completion.timer) {
@@ -957,60 +948,6 @@
       if (!completion.paused.size) scheduleCompletion(completion);
     }
 
-    function startCompletion(app) {
-      if (completions.has(app)) return;
-      const item = document.createElement('div');
-      item.className = 'vault-auto-scan-row';
-      item.dataset.state = 'complete';
-
-      const close = document.createElement('button');
-      close.type = 'button';
-      close.className = 'vault-auto-scan-close';
-      close.setAttribute('aria-label',
-        `Dismiss Disk Saver completion for ${app}`);
-      close.title = 'Dismiss';
-      close.textContent = '×';
-
-      const icon = document.createElement('span');
-      icon.className = 'vault-auto-scan-icon';
-      icon.innerHTML = COMPLETE_ICON;
-
-      const copy = document.createElement('span');
-      copy.className = 'vault-auto-scan-copy';
-      const appName = document.createElement('span');
-      appName.className = 'vault-auto-scan-app';
-      appName.textContent = app;
-      appName.title = app;
-      const status = document.createElement('span');
-      status.className = 'vault-auto-scan-status';
-      status.textContent = 'No possible duplicate files found';
-      copy.append(appName, status);
-      item.append(close, icon, copy);
-
-      const completion = {
-        app,
-        item,
-        timer: null,
-        remaining: COMPLETION_VISIBLE_MS,
-        startedAt: 0,
-        paused: new Set()
-      };
-      close.addEventListener('click', () => removeCompletion(app));
-      item.addEventListener('mouseenter', () =>
-        setCompletionPaused(completion, 'pointer', true));
-      item.addEventListener('mouseleave', () =>
-        setCompletionPaused(completion, 'pointer', false));
-      item.addEventListener('focusin', () =>
-        setCompletionPaused(completion, 'focus', true));
-      item.addEventListener('focusout', (event) => {
-        if (!item.contains(event.relatedTarget)) {
-          setCompletionPaused(completion, 'focus', false);
-        }
-      });
-      completions.set(app, completion);
-      scheduleCompletion(completion);
-    }
-
     function automaticSettingsKey(app) {
       return `pinokio:vault:auto-settings:${encodeURIComponent(app)}`;
     }
@@ -1024,24 +961,6 @@
       try {
         sessionStorage.setItem(storageKey, '1');
       } catch (_) {}
-      let frameId = state.activeLeafId;
-      if (!frameId || !leafElements.has(frameId)) {
-        frameId = leafElements.keys().next().value || null;
-      }
-      const node = frameId ? nodeById.get(frameId) : null;
-      const entry = frameId ? leafElements.get(frameId) : null;
-      let currentPath = '';
-      let targetPath = '';
-      try {
-        currentPath = new URL(node?.src || '', window.location.href).pathname;
-        targetPath = new URL(href, window.location.href).pathname;
-      } catch (_) {}
-      if (entry && entry.vaultAutoSettingsReady &&
-          currentPath && currentPath === targetPath) {
-        entry.iframe?.contentWindow?.postMessage(
-          { e: 'vault-auto-settings' }, window.location.origin);
-        return true;
-      }
       const opened = navigateActiveLeaf(href);
       if (!opened) {
         try { sessionStorage.removeItem(storageKey); } catch (_) {}
@@ -1067,166 +986,271 @@
       return opened;
     }
 
+    function createCard(app) {
+      const item = document.createElement('section');
+      item.className = 'vault-auto-scan-row';
+
+      const close = document.createElement('button');
+      close.type = 'button';
+      close.className = 'vault-auto-scan-close';
+      close.setAttribute('aria-label',
+        `Dismiss Disk Saver notification for ${app}`);
+      close.title = 'Dismiss';
+      close.textContent = '×';
+
+      const header = document.createElement('header');
+      header.className = 'vault-auto-scan-header';
+      const product = document.createElement('span');
+      product.className = 'vault-auto-scan-product';
+      product.textContent = 'Disk Saver';
+      const separator = document.createElement('span');
+      separator.className = 'vault-auto-scan-separator';
+      separator.setAttribute('aria-hidden', 'true');
+      separator.textContent = '·';
+      const appName = document.createElement('span');
+      appName.className = 'vault-auto-scan-app';
+      appName.textContent = app;
+      appName.title = app;
+      header.append(product, separator, appName);
+
+      const messages = document.createElement('div');
+      messages.className = 'vault-auto-scan-messages';
+      const controls = document.createElement('div');
+      controls.className = 'vault-auto-scan-controls';
+      item.append(close, header, messages, controls);
+
+      const card = {
+        app,
+        item,
+        messages,
+        controls,
+        currentState: null,
+        currentNoticeId: null,
+        dismissPending: false,
+        pointerInside: false,
+        focusInside: false,
+        completion: null
+      };
+      close.addEventListener('click', async () => {
+        if (card.currentState === 'complete') {
+          removeCard(app);
+          return;
+        }
+        card.dismissPending = card.currentState === 'checking';
+        close.disabled = true;
+        try {
+          const result = await requestAction(
+            'automatic_dismiss', app, card.currentNoticeId);
+          if (result.stale) {
+            card.dismissPending = false;
+            await loadState();
+            if (close.isConnected) close.disabled = false;
+            return;
+          }
+          removeCard(app);
+        } catch (error) {
+          console.warn('[Disk Saver] Automatic check dismissal failed', error);
+          card.dismissPending = false;
+          close.disabled = false;
+        }
+      });
+      item.addEventListener('mouseenter', () => {
+        card.pointerInside = true;
+        setCompletionPaused(card.completion, 'pointer', true);
+      });
+      item.addEventListener('mouseleave', () => {
+        card.pointerInside = false;
+        setCompletionPaused(card.completion, 'pointer', false);
+      });
+      item.addEventListener('focusin', () => {
+        card.focusInside = true;
+        setCompletionPaused(card.completion, 'focus', true);
+      });
+      item.addEventListener('focusout', (event) => {
+        if (!item.contains(event.relatedTarget)) {
+          card.focusInside = false;
+          setCompletionPaused(card.completion, 'focus', false);
+        }
+      });
+      cards.set(app, card);
+      return card;
+    }
+
+    function messageIcon(state) {
+      if (state === 'paused') return PAUSE_ICON;
+      if (state === 'result') return DRIVE_ICON;
+      if (state === 'complete') return COMPLETE_ICON;
+      return '';
+    }
+
+    function appendMessage(card, state) {
+      const previous = card.messages.querySelector('[data-current="true"]');
+      if (previous) {
+        previous.dataset.current = 'false';
+        previous.removeAttribute('aria-current');
+      }
+      const message = document.createElement('div');
+      message.className = 'vault-auto-scan-message';
+      message.dataset.state = state === 'checking-again' ? 'checking' : state;
+      message.dataset.current = 'true';
+      message.setAttribute('aria-current', 'true');
+      const icon = document.createElement('span');
+      icon.className = 'vault-auto-scan-icon';
+      icon.innerHTML = messageIcon(state);
+      const status = document.createElement('span');
+      status.className = 'vault-auto-scan-status';
+      status.textContent = statusText(state);
+      message.append(icon, status);
+      card.messages.appendChild(message);
+    }
+
+    function addSettingsButton(card) {
+      const settings = document.createElement('button');
+      settings.type = 'button';
+      settings.className = 'vault-auto-scan-settings';
+      settings.textContent = 'Automatic check settings';
+      settings.addEventListener('click', async () => {
+        settings.disabled = true;
+        try {
+          const result = await requestAction(
+            'automatic_settings', card.app);
+          if (!result.href || !openAutomaticSettings(card.app, result.href)) {
+            throw new Error('The app page is unavailable.');
+          }
+        } catch (error) {
+          console.warn('[Disk Saver] Automatic check settings failed', error);
+        } finally {
+          if (settings.isConnected) settings.disabled = false;
+        }
+      });
+      card.controls.appendChild(settings);
+    }
+
+    function addStateAction(card, row) {
+      const action = actionFor(row.state);
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'vault-auto-scan-action';
+      button.textContent = action.label;
+      button.addEventListener('click', async () => {
+        button.disabled = true;
+        try {
+          const result = await requestAction(
+            action.action, card.app, row.notice_id);
+          if (result.stale) {
+            await loadState();
+            if (button.isConnected) button.disabled = false;
+            return;
+          }
+          if (action.action === 'automatic_review' && result.href) {
+            if (!openAutomaticReview(card.app, result.href)) {
+              throw new Error('The app page could not be opened.');
+            }
+            removeCard(card.app);
+          } else {
+            await loadState();
+          }
+        } catch (error) {
+          console.warn('[Disk Saver] Automatic check action failed', error);
+          if (button.isConnected) button.disabled = false;
+        }
+      });
+      card.controls.appendChild(button);
+    }
+
+    function renderControls(card, row) {
+      card.controls.replaceChildren();
+      if (row.state === 'complete') return;
+      if (row.state !== 'result') addSettingsButton(card);
+      addStateAction(card, row);
+    }
+
+    function updateCard(row) {
+      let card = cards.get(row.app);
+      if (!card) card = createCard(row.app);
+      const unchanged = card.currentState === row.state &&
+        card.currentNoticeId === (row.notice_id || null);
+      if (unchanged) return card;
+      stopCompletion(card);
+      const displayState = row.state === 'checking' &&
+        card.currentState === 'paused' ? 'checking-again' : row.state;
+      appendMessage(card, displayState);
+      card.currentState = row.state;
+      card.currentNoticeId = row.notice_id || null;
+      card.dismissPending = false;
+      card.item.dataset.state = row.state;
+      renderControls(card, row);
+      return card;
+    }
+
+    function startCompletion(app) {
+      const card = cards.get(app);
+      if (!card || card.currentState !== 'checking' ||
+          card.dismissPending || card.completion) return false;
+      appendMessage(card, 'complete');
+      card.currentState = 'complete';
+      card.currentNoticeId = null;
+      card.item.dataset.state = 'complete';
+      renderControls(card, { state: 'complete' });
+      const completion = {
+        app,
+        timer: null,
+        remaining: COMPLETION_VISIBLE_MS,
+        startedAt: 0,
+        paused: new Set()
+      };
+      if (card.pointerInside) completion.paused.add('pointer');
+      if (card.focusInside) completion.paused.add('focus');
+      card.completion = completion;
+      scheduleCompletion(completion);
+      return true;
+    }
+
     function render(snapshot, options = {}) {
       if (!snapshot || snapshot.global_scan_ready !== true) {
-        [...completions.keys()].forEach(removeCompletion);
-        visibleCheckingApps = new Set();
-        tray.replaceChildren();
-        tray.hidden = true;
+        resetCards();
         return;
       }
-      const rows = snapshot && Array.isArray(snapshot.rows)
+      const rows = Array.isArray(snapshot.rows)
         ? snapshot.rows
         : [];
       const validRows = rows.filter((row) =>
         row && typeof row.app === 'string' && row.app);
       const liveApps = new Set(validRows.map((row) => row.app));
-      [...completions.keys()].forEach((app) => {
-        if (liveApps.has(app)) removeCompletion(app);
-      });
-      const manualApps = new Set(snapshot && Array.isArray(snapshot.settings)
+      const manualApps = new Set(Array.isArray(snapshot.settings)
         ? snapshot.settings.filter((setting) =>
           setting && setting.mode === 'manual').map((setting) => setting.app)
         : []);
-      manualApps.forEach(removeCompletion);
-
-      const completion = snapshot && snapshot.completion;
+      const retained = new Set();
+      validRows.forEach((row) => {
+        updateCard(row);
+        retained.add(row.app);
+      });
+      const completion = snapshot.completion;
       if (options.acceptCompletion && completion &&
           completion.outcome === 'no_possible_duplicates' &&
           typeof completion.app === 'string' && completion.app &&
-          visibleCheckingApps.has(completion.app) &&
           !liveApps.has(completion.app) &&
-          !manualApps.has(completion.app)) {
-        startCompletion(completion.app);
+          !manualApps.has(completion.app) &&
+          startCompletion(completion.app)) {
+        retained.add(completion.app);
       }
-
-      const fragment = document.createDocumentFragment();
+      cards.forEach((card, app) => {
+        if (card.completion && !manualApps.has(app)) retained.add(app);
+      });
+      [...cards.keys()].forEach((app) => {
+        if (!retained.has(app)) removeCard(app);
+      });
       validRows.forEach((row) => {
-        const item = document.createElement('div');
-        item.className = 'vault-auto-scan-row';
-        item.dataset.state = row.state || 'checking';
-
-        const close = document.createElement('button');
-        close.type = 'button';
-        close.className = 'vault-auto-scan-close';
-        close.setAttribute('aria-label', `Dismiss Disk Saver notification for ${row.app}`);
-        close.title = 'Dismiss';
-        close.textContent = '×';
-        close.addEventListener('click', async () => {
-          if (row.state === 'checking') visibleCheckingApps.delete(row.app);
-          close.disabled = true;
-          try {
-            const result = await requestAction(
-              'automatic_dismiss', row.app, row.notice_id);
-            if (result.stale) {
-              await loadState();
-              if (close.isConnected) close.disabled = false;
-              return;
-            }
-            removeRow(item);
-          } catch (error) {
-            console.warn('[Disk Saver] Automatic check dismissal failed', error);
-            if (row.state === 'checking' && item.isConnected) {
-              visibleCheckingApps.add(row.app);
-            }
-            close.disabled = false;
-          }
-        });
-
-        const icon = document.createElement('span');
-        icon.className = 'vault-auto-scan-icon';
-        if (row.state === 'paused') {
-          icon.innerHTML = PAUSE_ICON;
-        } else if (row.state === 'result') {
-          icon.innerHTML = DRIVE_ICON;
-        }
-
-        const copy = document.createElement('span');
-        copy.className = 'vault-auto-scan-copy';
-        const appName = document.createElement('span');
-        appName.className = 'vault-auto-scan-app';
-        appName.textContent = row.app;
-        appName.title = row.app;
-        const status = document.createElement('span');
-        status.className = 'vault-auto-scan-status';
-        if (row.state === 'result') {
-          const detail = document.createElement('span');
-          detail.className = 'vault-auto-scan-detail';
-          detail.textContent = 'may have duplicate files';
-          status.append(detail);
-        } else {
-          status.textContent = statusText(row);
-        }
-        copy.append(appName, status);
-
-        const controls = document.createElement('span');
-        controls.className = 'vault-auto-scan-controls';
-        if (row.state !== 'result') {
-          const settings = document.createElement('button');
-          settings.type = 'button';
-          settings.className = 'vault-auto-scan-settings';
-          settings.textContent = 'Automatic check settings';
-          settings.addEventListener('click', async () => {
-            settings.disabled = true;
-            try {
-              const result = await requestAction(
-                'automatic_settings', row.app);
-              if (!result.href || !openAutomaticSettings(row.app, result.href)) {
-                throw new Error('The app page is unavailable.');
-              }
-            } catch (error) {
-              console.warn('[Disk Saver] Automatic check settings failed', error);
-            } finally {
-              if (settings.isConnected) settings.disabled = false;
-            }
-          });
-          copy.appendChild(settings);
-        }
-
-        const action = actionFor(row);
-        const button = document.createElement('button');
-        button.type = 'button';
-        button.className = 'vault-auto-scan-action';
-        button.textContent = action.label;
-        button.addEventListener('click', async () => {
-          button.disabled = true;
-          try {
-            const result = await requestAction(
-              action.action, row.app, row.notice_id);
-            if (result.stale) {
-              await loadState();
-              if (button.isConnected) button.disabled = false;
-              return;
-            }
-            if (action.action === 'automatic_review' && result.href) {
-              if (!openAutomaticReview(row.app, result.href)) {
-                throw new Error('The app page could not be opened.');
-              }
-              removeRow(item);
-            } else {
-              await loadState();
-            }
-          } catch (error) {
-            console.warn('[Disk Saver] Automatic check action failed', error);
-            button.disabled = false;
-          }
-        });
-
-        controls.appendChild(button);
-
-        item.append(close, icon, copy, controls);
-        fragment.appendChild(item);
+        const card = cards.get(row.app);
+        if (card) tray.appendChild(card.item);
       });
-      completions.forEach((completionRow) => {
-        if (!liveApps.has(completionRow.app)) {
-          fragment.appendChild(completionRow.item);
+      cards.forEach((card, app) => {
+        if (card.completion && !liveApps.has(app)) {
+          tray.appendChild(card.item);
         }
       });
-      tray.replaceChildren(fragment);
-      tray.hidden = tray.childElementCount === 0;
-      visibleCheckingApps = new Set(validRows
-        .filter((row) => row.state === 'checking')
-        .map((row) => row.app));
+      tray.hidden = cards.size === 0;
     }
 
     async function loadState() {
@@ -1262,7 +1286,7 @@
         }
       };
       eventSource.onerror = () => {
-        clearCompletions();
+        resetCards();
         loadState();
       };
     }

package/server/public/vault.js

@@ -582,14 +582,6 @@ const connectAutomaticMode = () => {
     } catch (error) {}
   }
 }
-const requestAutomaticModeMenu = () => {
-  if (!IS_APP_MODE) return
-  if (automaticSettingsKey) {
-    try { sessionStorage.removeItem(automaticSettingsKey) } catch (error) {}
-  }
-  state.automaticModeMenuRequested = true
-  if (state.data) renderOverview()
-}
 const sourceById = (id) => (state.data.sources || []).find((source) => source.id === id)
 const sourceChildren = (id) => (state.data.sources || []).filter((source) => source.parent_id === id)
 const sourceIsWithinScope = (sourceId) => {
@@ -4186,12 +4178,6 @@ if (IS_APP_MODE) {
     const trigger = menu.querySelector("summary")
     if (trigger) trigger.focus()
   }, true)
-  window.addEventListener("message", (event) => {
-    if (event.source !== window.parent ||
-        event.origin !== window.location.origin ||
-        !event.data || event.data.e !== "vault-auto-settings") return
-    requestAutomaticModeMenu()
-  })
   loadAutomaticMode().finally(connectAutomaticMode)
   window.addEventListener("beforeunload", () => {
     if (automaticModeEventSource) automaticModeEventSource.close()

package/server/views/app.ejs

@@ -12889,28 +12889,6 @@ const rerenderMenuSection = (container, html) => {
 
 
   });
-  const openVaultAutomaticSettings = () => {
-    const frame = document.querySelector("iframe[name='app-vault']")
-    if (!frame || !frame.contentWindow) return false
-    frame.contentWindow.postMessage(
-      { e: "vault-auto-settings" }, window.location.origin)
-    return true
-  }
-  window.addEventListener("message", async (event) => {
-    if (event.source !== window.parent ||
-        event.origin !== window.location.origin ||
-        !event.data || event.data.e !== "vault-auto-settings") return
-    const diskSaverTab = document.querySelector("#save-space-tab")
-    if (!diskSaverTab) return
-    if (diskSaverTab.classList.contains("selected") &&
-        openVaultAutomaticSettings()) return
-    await renderSelection({ target: diskSaverTab, force: true })
-    openVaultAutomaticSettings()
-  })
-  if (window.parent !== window) {
-    window.parent.postMessage(
-      { e: "vault-auto-settings-ready" }, window.location.origin)
-  }
   renderSelection({ force: true })
   <% if (type === "browse" || type === "files") { %>
     const repoStatusCache = new Map()

package/server/views/layout.ejs

@@ -161,15 +161,12 @@
 
     .vault-auto-scan-row {
       position: relative;
-      display: grid;
-      grid-template-columns: 20px minmax(0, 1fr) 76px;
-      grid-template-rows: 16px 34px 18px;
-      align-items: center;
-      column-gap: 10px;
-      min-height: 86px;
-      padding: 9px 34px 9px 12px;
+      display: flex;
+      min-width: 0;
+      padding: 10px 12px;
       box-sizing: border-box;
-      overflow: hidden;
+      flex-direction: column;
+      gap: 8px;
       color: var(--vault-notice-text);
       background: var(--vault-notice-surface);
       border: 1px solid var(--vault-notice-border);
@@ -179,10 +176,56 @@
       animation: vault-notice-enter 180ms cubic-bezier(0.25, 1, 0.5, 1);
     }
 
+    .vault-auto-scan-header {
+      display: flex;
+      min-width: 0;
+      min-height: 18px;
+      padding-right: 24px;
+      align-items: center;
+      gap: 6px;
+      font: 500 11px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+
+    .vault-auto-scan-product {
+      color: var(--vault-notice-text);
+      font-weight: 600;
+      white-space: nowrap;
+    }
+
+    .vault-auto-scan-separator {
+      color: var(--vault-notice-muted);
+    }
+
+    .vault-auto-scan-app {
+      min-width: 0;
+      overflow: hidden;
+      color: var(--vault-notice-muted);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .vault-auto-scan-messages {
+      display: grid;
+      min-width: 0;
+      gap: 4px;
+    }
+
+    .vault-auto-scan-message {
+      display: grid;
+      min-width: 0;
+      min-height: 22px;
+      grid-template-columns: 20px minmax(0, 1fr);
+      align-items: center;
+      column-gap: 8px;
+      transition: opacity 120ms cubic-bezier(0.25, 1, 0.5, 1);
+    }
+
+    .vault-auto-scan-message[data-current="false"] {
+      opacity: 0.58;
+    }
+
     .vault-auto-scan-icon {
       display: grid;
-      grid-column: 1;
-      grid-row: 1 / 4;
       place-items: center;
       width: 20px;
       height: 20px;
@@ -199,57 +242,43 @@
       stroke-width: 1.8;
     }
 
-    .vault-auto-scan-row[data-state="checking"] .vault-auto-scan-icon {
+    .vault-auto-scan-message[data-state="checking"] .vault-auto-scan-icon {
       border: 1.5px solid var(--vault-notice-border);
-      border-top-color: var(--vault-notice-text);
       border-radius: 50%;
       box-sizing: border-box;
-      animation: vault-notice-spin 900ms linear infinite;
-    }
-
-    .vault-auto-scan-copy {
-      display: grid;
-      grid-column: 2;
-      grid-row: 1 / 4;
-      grid-template-rows: 16px 34px 18px;
-      align-items: center;
-      min-width: 0;
     }
 
-    .vault-auto-scan-app {
-      overflow: hidden;
-      color: var(--vault-notice-muted);
-      font-size: 11px;
-      font-weight: 500;
-      line-height: 16px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    .vault-auto-scan-message[data-current="true"][data-state="checking"]
+      .vault-auto-scan-icon {
+      border-top-color: var(--vault-notice-text);
+      animation: vault-notice-spin 900ms linear infinite;
     }
 
     .vault-auto-scan-status {
-      display: flex;
       min-width: 0;
-      align-items: baseline;
       overflow: hidden;
       font-size: 13px;
       font-weight: 600;
-      line-height: 18px;
+      line-height: 20px;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
-    .vault-auto-scan-detail {
-      overflow: hidden;
-      color: var(--vault-notice-muted);
-      font-weight: 400;
-      text-overflow: ellipsis;
+    .vault-auto-scan-message[data-current="false"] .vault-auto-scan-status {
+      font-weight: 500;
     }
 
     .vault-auto-scan-controls {
-      display: grid;
-      grid-column: 3;
-      grid-row: 2;
+      display: flex;
+      min-height: 32px;
+      padding-left: 28px;
       align-items: center;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+
+    .vault-auto-scan-controls:empty {
+      display: none;
     }
 
     .vault-auto-scan-settings,
@@ -261,7 +290,7 @@
     }
 
     .vault-auto-scan-settings {
-      justify-self: start;
+      margin-right: auto;
       min-height: 18px;
       padding: 0;
       font: 500 10.5px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -293,8 +322,7 @@
     }
 
     .vault-auto-scan-action {
-      position: relative;
-      width: 76px;
+      min-width: 76px;
       min-height: 32px;
       padding: 6px 10px;
       color: var(--vault-notice-text);
@@ -333,32 +361,7 @@
       opacity: 0.55;
     }
 
-    .vault-auto-scan-row[data-state="result"],
-    .vault-auto-scan-row[data-state="complete"] {
-      grid-template-rows: 16px 30px;
-      min-height: 66px;
-      padding-top: 10px;
-      padding-bottom: 10px;
-    }
-
-    .vault-auto-scan-row[data-state="result"] .vault-auto-scan-icon,
-    .vault-auto-scan-row[data-state="result"] .vault-auto-scan-copy,
-    .vault-auto-scan-row[data-state="result"] .vault-auto-scan-controls,
-    .vault-auto-scan-row[data-state="complete"] .vault-auto-scan-icon,
-    .vault-auto-scan-row[data-state="complete"] .vault-auto-scan-copy {
-      grid-row: 1 / 3;
-    }
-
-    .vault-auto-scan-row[data-state="result"] .vault-auto-scan-copy,
-    .vault-auto-scan-row[data-state="complete"] .vault-auto-scan-copy {
-      grid-template-rows: 16px 30px;
-    }
-
-    .vault-auto-scan-row[data-state="complete"] .vault-auto-scan-copy {
-      grid-column: 2 / 4;
-    }
-
-    .vault-auto-scan-row[data-state="complete"] .vault-auto-scan-icon {
+    .vault-auto-scan-message[data-state="complete"] .vault-auto-scan-icon {
       color: var(--vault-notice-accent);
     }
 
@@ -372,24 +375,19 @@
     }
 
     @media (pointer: coarse) {
-      .vault-auto-scan-row,
-      .vault-auto-scan-copy {
-        grid-template-rows: 16px 44px 28px;
-      }
-      .vault-auto-scan-row {
-        min-height: 106px;
-      }
+      .vault-auto-scan-controls { min-height: 44px; }
       .vault-auto-scan-action {
         min-height: 44px;
       }
-      .vault-auto-scan-settings { min-height: 28px; }
+      .vault-auto-scan-settings { min-height: 44px; }
     }
 
     @media (prefers-reduced-motion: reduce) {
       .vault-auto-scan-row {
         animation: none;
       }
-      .vault-auto-scan-row[data-state="checking"] .vault-auto-scan-icon {
+      .vault-auto-scan-message[data-current="true"][data-state="checking"]
+        .vault-auto-scan-icon {
         animation-duration: 1800ms;
       }
     }

package/test/vault-automatic-scan-ui.test.js

@@ -101,10 +101,15 @@ test("the shared layout renders and reviews automatic possible-match notices", a
 
   const tray = dom.window.document.getElementById("vault-auto-scan-tray")
   assert.equal(tray.hidden, false)
+  assert.equal(tray.querySelector(
+    ".vault-auto-scan-product").textContent, "Disk Saver")
   assert.equal(tray.querySelector(
     ".vault-auto-scan-app").textContent, "ComfyUI")
   assert.equal(tray.querySelector(
-    ".vault-auto-scan-detail").textContent, "may have duplicate files")
+    ".vault-auto-scan-status").textContent,
+  "Possible duplicate files found")
+  assert.equal(tray.querySelectorAll(
+    ".vault-auto-scan-message").length, 1)
   assert.equal(tray.querySelector(".vault-auto-scan-value"), null)
   assert.equal(tray.querySelector(
     ".vault-auto-scan-action").textContent, "Review")
@@ -131,9 +136,119 @@ test("the shared layout renders and reviews automatic possible-match notices", a
   assert.equal(requests.some((request) =>
     request && request.url === "/info/vault/automatic-scans"), false)
   assert.match(script, /window\.location\.assign\(/)
-  assert.ok(script.indexOf("if (!openAutomaticReview(row.app, result.href))") <
-    script.indexOf("removeRow(item);", script.indexOf(
-      "if (!openAutomaticReview(row.app, result.href))")))
+  assert.ok(script.indexOf("if (!openAutomaticReview(card.app, result.href))") <
+    script.indexOf("removeCard(card.app);", script.indexOf(
+      "if (!openAutomaticReview(card.app, result.href))")))
+
+  dom.window.close()
+})
+
+test("automatic check states append within one card", async () => {
+  const template = await fs.promises.readFile(
+    path.join(root, "server", "views", "layout.ejs"), "utf8")
+  const script = await fs.promises.readFile(
+    path.join(root, "server", "public", "layout.js"), "utf8")
+  const html = ejs.render(template, {
+    theme: "light",
+    agent: "web",
+    initialPath: "/home",
+    defaultPath: "/home",
+    sessionId: null,
+    vaultEnabled: true
+  })
+  const dom = new JSDOM(html, {
+    runScripts: "outside-only",
+    pretendToBeVisual: true,
+    url: "http://localhost/"
+  })
+  const eventSources = []
+  dom.window.EventSource = class EventSource {
+    constructor(url) {
+      this.url = url
+      eventSources.push(this)
+    }
+    close() {}
+  }
+  dom.window.fetch = async (url) => {
+    throw new Error(`Unexpected request: ${url}`)
+  }
+
+  dom.window.eval(script)
+  await waitFor(() => eventSources.length === 1)
+  const send = (rows, settings = []) => eventSources[0].onmessage({
+    data: JSON.stringify({
+      enabled: true,
+      global_scan_ready: true,
+      rows,
+      settings
+    })
+  })
+  const row = (state, noticeId) => ({
+    app: "ComfyUI",
+    state,
+    notice_id: noticeId
+  })
+
+  send([row("checking", "checking:1:")])
+  const tray = dom.window.document.getElementById("vault-auto-scan-tray")
+  const card = tray.querySelector(".vault-auto-scan-row")
+  assert.ok(card)
+
+  send([row("paused", "paused:2:")], [
+    { app: "ComfyUI", mode: "manual" }
+  ])
+  assert.equal(tray.querySelector(".vault-auto-scan-row"), card)
+  assert.deepEqual([...card.querySelectorAll(".vault-auto-scan-status")]
+    .map((status) => status.textContent), [
+    "Checking for possible duplicate files...",
+    "Automatic checks are paused"
+  ])
+  assert.equal(card.querySelectorAll(
+    '.vault-auto-scan-message[data-current="true"]').length, 1)
+  assert.equal(card.querySelector(
+    '.vault-auto-scan-message[data-current="false"] button'), null)
+  assert.equal(card.querySelector(
+    ".vault-auto-scan-action").textContent, "Resume")
+
+  send([row("checking", "checking:3:")], [
+    { app: "ComfyUI", mode: "automatic" }
+  ])
+  assert.equal(tray.querySelector(".vault-auto-scan-row"), card)
+  assert.equal(card.querySelectorAll(".vault-auto-scan-message").length, 3)
+  assert.equal(card.querySelector(
+    '.vault-auto-scan-message[data-current="true"] .vault-auto-scan-status')
+    .textContent, "Checking again for possible duplicate files...")
+  assert.equal(card.querySelector(
+    ".vault-auto-scan-action").textContent, "Pause")
+
+  send([row("result", "result:4:result-a")], [
+    { app: "ComfyUI", mode: "automatic" }
+  ])
+  assert.equal(tray.querySelector(".vault-auto-scan-row"), card)
+  assert.equal(card.querySelectorAll(".vault-auto-scan-message").length, 4)
+  assert.equal(card.querySelector(
+    '.vault-auto-scan-message[data-current="true"] .vault-auto-scan-status')
+    .textContent, "Possible duplicate files found")
+  assert.equal(card.querySelector(".vault-auto-scan-settings"), null)
+  assert.equal(card.querySelector(
+    ".vault-auto-scan-action").textContent, "Review")
+
+  send([row("result", "result:4:result-a")], [
+    { app: "ComfyUI", mode: "automatic" }
+  ])
+  assert.equal(card.querySelectorAll(".vault-auto-scan-message").length, 4,
+    "repeated snapshots do not duplicate the current message")
+
+  send([
+    row("result", "result:4:result-a"),
+    { app: "OtherApp", state: "checking", notice_id: "checking:5:" }
+  ], [
+    { app: "ComfyUI", mode: "automatic" },
+    { app: "OtherApp", mode: "automatic" }
+  ])
+  assert.equal(tray.querySelectorAll(".vault-auto-scan-row").length, 2)
+  assert.deepEqual([...tray.querySelectorAll(".vault-auto-scan-app")]
+    .map((app) => app.textContent), ["ComfyUI", "OtherApp"])
 
   dom.window.close()
 })
@@ -205,7 +320,7 @@ test("checking notices expose settings, Pause, and dismissal", async () => {
     ".vault-auto-scan-app").textContent, "ComfyUI")
   assert.equal(tray.querySelector(
     ".vault-auto-scan-status").textContent,
-  "Checking for possible duplicate files…")
+  "Checking for possible duplicate files...")
   assert.equal(tray.querySelector(
     ".vault-auto-scan-settings").textContent,
   "Automatic check settings")
@@ -223,19 +338,9 @@ test("checking notices expose settings, Pause, and dismissal", async () => {
   assert.equal(tray.querySelector(
     ".vault-auto-scan-settings").disabled, false)
 
-  const relayed = []
-  iframe.contentWindow.postMessage = (message, targetOrigin) => {
-    relayed.push({ message, targetOrigin })
-  }
-  dom.window.dispatchEvent(new dom.window.MessageEvent("message", {
-    data: { e: "vault-auto-settings-ready" },
-    origin: dom.window.location.origin,
-    source: iframe.contentWindow
-  }))
-  tray.querySelector(".vault-auto-scan-settings").click()
-  await waitFor(() => relayed.length === 1)
-  assert.equal(relayed[0].message.e, "vault-auto-settings")
-  assert.equal(relayed[0].targetOrigin, dom.window.location.origin)
+  assert.doesNotMatch(script, /vaultAutoSettingsReady|vault-auto-settings-ready/)
+  assert.doesNotMatch(script,
+    /postMessage\(\s*\{ e: ['"]vault-auto-settings['"]/)
 
   tray.querySelector(".vault-auto-scan-close").click()
   await waitFor(() => tray.hidden)
@@ -380,10 +485,18 @@ test("an empty automatic check briefly confirms completion", async () => {
   assert.ok(completed)
   assert.equal(completed.querySelector(
     ".vault-auto-scan-app").textContent, "ComfyUI")
+  assert.deepEqual([...completed.querySelectorAll(
+    ".vault-auto-scan-status")].map((status) => status.textContent), [
+    "Checking for possible duplicate files...",
+    "No possible duplicate files found"
+  ])
+  assert.equal(completed.querySelectorAll(
+    ".vault-auto-scan-message").length, 2)
   assert.equal(completed.querySelector(
-    ".vault-auto-scan-status").textContent,
-  "No possible duplicate files found")
-  assert.ok(completed.querySelector(".vault-auto-scan-icon svg"))
+    '.vault-auto-scan-message[data-current="false"]')
+    .dataset.state, "checking")
+  assert.ok(completed.querySelector(
+    '.vault-auto-scan-message[data-current="true"] .vault-auto-scan-icon svg'))
   assert.equal(completed.querySelector(".vault-auto-scan-settings"), null)
   assert.equal(completed.querySelector(".vault-auto-scan-action"), null)
   assert.equal(completionTimers[0].delay, 4000)
@@ -426,6 +539,9 @@ test("an empty automatic check briefly confirms completion", async () => {
     }],
     settings: [{ app: "ComfyUI", mode: "automatic" }]
   })
+  const focusedClose = tray.querySelector(".vault-auto-scan-close")
+  focusedClose.focus()
+  const timersBeforeFocusedCompletion = completionTimers.length
   send({
     enabled: true,
     rows: [],
@@ -436,6 +552,13 @@ test("an empty automatic check briefly confirms completion", async () => {
     }
   })
   assert.equal(tray.hidden, false)
+  assert.equal(completionTimers.length, timersBeforeFocusedCompletion,
+    "completion does not start its timer while focus is already in the card")
+  focusedClose.dispatchEvent(new dom.window.FocusEvent("focusout", {
+    bubbles: true,
+    relatedTarget: null
+  }))
+  assert.equal(completionTimers.length, timersBeforeFocusedCompletion + 1)
   eventSources[0].onerror()
   await new Promise((resolve) => nativeSetTimeout(resolve, 0))
   assert.equal(tray.hidden, true,
@@ -614,6 +737,7 @@ test("the app sidebar mirrors Automatic and Manual Disk Saver modes", async () =
   assert.equal(label.textContent, "Auto")
   assert.match(template, /data-app-vault-mode/)
   assert.match(template, /app-vault-mode\.js/)
+  assert.doesNotMatch(template, /vault-auto-settings/)
   assert.match(template,
     /#save-space-tab\s*\{[^}]*width:\s*100%;[^}]*max-width:\s*none;/s)
   assert.match(template,