pinokiod 8.0.62 → 8.0.63

package/package.json

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

package/server/public/layout.js

@@ -853,6 +853,7 @@
         <circle cx="10" cy="10" r="7.5"></circle>
         <path d="m6.75 10.1 2.1 2.1 4.6-4.65"></path>
       </svg>`;
+    const MIN_CHECKING_VISIBLE_MS = 500;
     const COMPLETION_VISIBLE_MS = 4000;
 
     let eventSource = null;
@@ -923,7 +924,9 @@
     }
 
     function scheduleCompletion(completion) {
-      if (completion.paused.size || completion.timer) return;
+      if (!completion.revealed || completion.paused.size || completion.timer) {
+        return;
+      }
       completion.startedAt = Date.now();
       completion.timer = window.setTimeout(() => {
         completion.timer = null;
@@ -932,7 +935,7 @@
     }
 
     function setCompletionPaused(completion, reason, paused) {
-      if (!completion) return;
+      if (!completion || !completion.revealed) return;
       if (paused) {
         if (completion.paused.has(reason)) return;
         if (!completion.paused.size && completion.timer) {
@@ -1026,13 +1029,14 @@
         controls,
         currentState: null,
         currentNoticeId: null,
+        checkingShownAt: 0,
         dismissPending: false,
         pointerInside: false,
         focusInside: false,
         completion: null
       };
       close.addEventListener('click', async () => {
-        if (card.currentState === 'complete') {
+        if (card.completion) {
           removeCard(app);
           return;
         }
@@ -1177,32 +1181,50 @@
       appendMessage(card, displayState);
       card.currentState = row.state;
       card.currentNoticeId = row.notice_id || null;
+      card.checkingShownAt = row.state === 'checking' ? Date.now() : 0;
       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;
+    function revealCompletion(completion) {
+      const card = cards.get(completion.app);
+      if (!card || card.completion !== completion ||
+          card.currentState !== 'checking' || card.dismissPending) return;
+      completion.timer = null;
+      completion.revealed = true;
       appendMessage(card, 'complete');
       card.currentState = 'complete';
       card.currentNoticeId = null;
       card.item.dataset.state = 'complete';
       renderControls(card, { state: 'complete' });
+      if (card.pointerInside) completion.paused.add('pointer');
+      if (card.focusInside) completion.paused.add('focus');
+      scheduleCompletion(completion);
+    }
+
+    function startCompletion(app) {
+      const card = cards.get(app);
+      if (!card || card.currentState !== 'checking' ||
+          card.dismissPending || card.completion) return false;
       const completion = {
         app,
+        revealed: false,
         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);
+      const elapsed = Math.max(0, Date.now() - card.checkingShownAt);
+      const delay = Math.max(0, MIN_CHECKING_VISIBLE_MS - elapsed);
+      if (delay) {
+        completion.timer = window.setTimeout(
+          () => revealCompletion(completion), delay);
+      } else {
+        revealCompletion(completion);
+      }
       return true;
     }
 

package/server/views/layout.ejs

@@ -224,6 +224,11 @@
       opacity: 0.58;
     }
 
+    .vault-auto-scan-message[data-current="true"] {
+      animation: vault-notice-message-enter 160ms
+        cubic-bezier(0.25, 1, 0.5, 1);
+    }
+
     .vault-auto-scan-icon {
       display: grid;
       place-items: center;
@@ -374,6 +379,11 @@
       to { transform: rotate(360deg); }
     }
 
+    @keyframes vault-notice-message-enter {
+      from { opacity: 0; transform: translateY(2px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
     @media (pointer: coarse) {
       .vault-auto-scan-controls { min-height: 44px; }
       .vault-auto-scan-action {
@@ -386,6 +396,9 @@
       .vault-auto-scan-row {
         animation: none;
       }
+      .vault-auto-scan-message[data-current="true"] {
+        animation: none;
+      }
       .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

@@ -370,10 +370,21 @@ test("an empty automatic check briefly confirms completion", async () => {
   })
   const eventSources = []
   const requests = []
+  const revealTimers = []
   const completionTimers = []
   const nativeSetTimeout = dom.window.setTimeout.bind(dom.window)
   const nativeClearTimeout = dom.window.clearTimeout.bind(dom.window)
   dom.window.setTimeout = (callback, delay, ...args) => {
+    if (delay <= 500 && delay > 400) {
+      const timer = {
+        callback,
+        delay,
+        cleared: false,
+        id: 9000 + revealTimers.length
+      }
+      revealTimers.push(timer)
+      return timer.id
+    }
     if (delay <= 4000 && delay > 3500) {
       const timer = {
         callback,
@@ -387,7 +398,8 @@ test("an empty automatic check briefly confirms completion", async () => {
     return nativeSetTimeout(callback, delay, ...args)
   }
   dom.window.clearTimeout = (id) => {
-    const timer = completionTimers.find((candidate) => candidate.id === id)
+    const timer = [...revealTimers, ...completionTimers]
+      .find((candidate) => candidate.id === id)
     if (timer) {
       timer.cleared = true
       return
@@ -480,6 +492,20 @@ test("an empty automatic check briefly confirms completion", async () => {
     }
   })
 
+  const checking = [...tray.querySelectorAll(".vault-auto-scan-row")]
+    .find((card) => card.querySelector(
+      ".vault-auto-scan-app").textContent === "ComfyUI")
+  assert.ok(checking)
+  assert.equal(checking.dataset.state, "checking")
+  assert.equal(checking.querySelectorAll(
+    ".vault-auto-scan-message").length, 1)
+  assert.equal(tray.querySelector(
+    '.vault-auto-scan-row[data-state="complete"]'), null,
+  "the checking phase remains visible before an immediate result")
+  assert.equal(revealTimers.length, 1)
+  assert.ok(revealTimers[0].delay <= 500)
+
+  revealTimers[0].callback()
   const completed = tray.querySelector(
     '.vault-auto-scan-row[data-state="complete"]')
   assert.ok(completed)
@@ -541,6 +567,7 @@ test("an empty automatic check briefly confirms completion", async () => {
   })
   const focusedClose = tray.querySelector(".vault-auto-scan-close")
   focusedClose.focus()
+  const revealsBeforeFocusedCompletion = revealTimers.length
   const timersBeforeFocusedCompletion = completionTimers.length
   send({
     enabled: true,
@@ -552,6 +579,10 @@ test("an empty automatic check briefly confirms completion", async () => {
     }
   })
   assert.equal(tray.hidden, false)
+  assert.equal(revealTimers.length, revealsBeforeFocusedCompletion + 1)
+  assert.equal(completionTimers.length, timersBeforeFocusedCompletion,
+    "completion dismissal cannot start before its result is revealed")
+  revealTimers.at(-1).callback()
   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", {