mdv-live 0.5.19 → 0.5.20

package/CHANGELOG.md

@@ -5,6 +5,43 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.20] - 2026-05-18
+
+### Fixed — Presenter View のノート編集が毎回 STALE エラー
+
+Presenter View で speaker note を編集すると、毎回一瞬
+`保存失敗: STALE — file changed externally; please reload`（赤）が出る
+バグを修正。同じ deck を mdv のタブ/ウィンドウで 2 つ以上開いていると
+必ず発生していた。
+
+- 原因: Presenter View はノート保存を自前で行わず、`BroadcastChannel` の
+  `edit-note` メッセージで **メインウィンドウに保存を委譲** する。この
+  メッセージは同一ブラウザの **全メインウィンドウ** に届くため、deck を
+  複数ウィンドウで開いていると **全員が同じ `If-Match` で PUT** し、サーバの
+  楽観ロックで 1 つだけ成功、残りが 412 STALE になっていた。負けた側が
+  `note-saved {ok:false, STALE}` を Presenter にブロードキャストし、赤い
+  エラー表示になっていた（保存自体は 1 つ成功するため「一瞬だけ」見える）
+- 各メインウィンドウに一意な `windowId` を付与。`slides` メッセージに
+  `sourceWindowId` を載せ、Presenter は最初に deck を返したウィンドウを
+  saver として固定、`edit-note` に `targetWindowId` を載せて **その 1
+  ウィンドウだけが保存** するようルーティング
+- saver ウィンドウが閉じた/凍結した場合は保存タイムアウト（6 秒）で
+  検知し、`find-saver` 問い合わせで deck を持つ別ウィンドウ（非アクティブ
+  な背景タブ含む）を探して再ピン・再送するフェイルオーバーを実装
+- 各 `edit-note` に一意な `requestId` を付与し `note-saved` で echo。
+  古い保存の ack が新しい保存のフェイルオーバー監視を誤って解除する問題を
+  防止
+- `saveNote` が「対象 Marp タブなし」のとき `note-saved` をブロードキャスト
+  せず return していたため Presenter が `保存中…` のまま固まり得た問題も
+  併せて修正（`code:'NO_DECK'` を返してフェイルオーバーを誘発）
+
+### Verified
+
+- 既存 278 + 新規 3（`tests/test-presenter-channel.js`: `newWindowId` の
+  一意性 / フォールバック / モジュール API）
+- Playwright dogfood: メインウィンドウ 2 枚 + Presenter で speaker note を
+  編集 → STALE が出ないこと、メインウィンドウ 1 枚で回帰がないことを実機確認
+
 ## [0.5.19] - 2026-05-16
 
 ### Fixed — Marp `![bg]` background images

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdv-live",
-  "version": "0.5.19",
+  "version": "0.5.20",
   "description": "Markdown Viewer - File tree + Live preview + Marp support + Hot reload",
   "main": "src/server.js",
   "bin": {

package/src/static/app.js

@@ -1212,6 +1212,10 @@
 
     const PresenterView = {
         channel: null,
+        // Unique id for this main window. The presenter echoes it back as
+        // `edit-note.targetWindowId` so that exactly one main window saves,
+        // even when the same deck is open in several windows.
+        windowId: null,
         presenterWindow: null,
         saveQueue: null,            // MDVSaveQueue instance (created in init)
         // Map<path, etag> — own-save chain rebase. We track presenter and
@@ -1246,7 +1250,7 @@
             // can autosave in environments (older browsers / sandboxed
             // webviews) where the Presenter window cannot be opened.
             this.saveQueue = window.MDVSaveQueue.createSaveQueue({
-                saveFn: (path, slideIndex, note, etag, origin) => {
+                saveFn: (path, slideIndex, note, etag, origin, requestId) => {
                     let useEtag = etag;
                     const tab = state.tabs.find((t) => t.path === path);
                     // Pick the "own etag" map that matches this save's
@@ -1259,7 +1263,7 @@
                         : this.lastSavedEtag;
                     const own = ownMap.get(path);
                     if (tab && own && tab.etag === own) useEtag = own;
-                    return this.saveNote(path, slideIndex, note, useEtag, origin);
+                    return this.saveNote(path, slideIndex, note, useEtag, origin, requestId);
                 }
             });
 
@@ -1279,6 +1283,7 @@
             // their channel.postMessage calls (channel === null).
             if (typeof BroadcastChannel !== 'undefined'
                 && window.MDVPresenterChannel) {
+                this.windowId = window.MDVPresenterChannel.newWindowId();
                 this.channel = window.MDVPresenterChannel.create();
                 if (this.channel) {
                     this.channel.addEventListener('message', (e) => {
@@ -1287,11 +1292,38 @@
                             this.broadcastSlides();
                         } else if (msg.type === 'goto') {
                             this.gotoSlide(msg.index);
+                        } else if (msg.type === 'find-saver') {
+                            // Failover discovery: the presenter lost its
+                            // saver and asks who can save `path`. Answer if
+                            // this window holds that deck in ANY tab —
+                            // saveNote() resolves by path, so an inactive
+                            // background tab counts (broadcastSlides only
+                            // reports the active tab and would miss it).
+                            if (msg.path
+                                && state.tabs.some((t) => t.path === msg.path && t.isMarp)) {
+                                this.channel.postMessage({
+                                    type: 'saver-here',
+                                    path: msg.path,
+                                    windowId: this.windowId
+                                });
+                            }
                         } else if (msg.type === 'edit-note') {
                             if (!msg.path) return;
+                            // Route: only the main window the presenter
+                            // picked as its saver performs the save. Without
+                            // this, every main window showing the same deck
+                            // fires its own PUT and all but one collide on
+                            // the optimistic lock → spurious "STALE" in the
+                            // presenter. A missing targetWindowId (older
+                            // presenter build) falls back to handling it so
+                            // saves still work, just without dedup.
+                            if (msg.targetWindowId
+                                && msg.targetWindowId !== this.windowId) {
+                                return;
+                            }
                             this.saveQueue.enqueue(
                                 msg.path, msg.slideIndex, msg.note,
-                                msg.etag || null, 'presenter'
+                                msg.etag || null, 'presenter', msg.requestId
                             );
                         }
                     });
@@ -1317,11 +1349,16 @@
         // next autosave would skip the STALE conflict it should otherwise
         // hit and silently overwrite the inline edit).
         //
+        // `requestId` is the opaque token from the presenter's edit-note;
+        // echoing it back in note-saved lets the presenter match this
+        // result to the exact save it sent (older saves' acks then can't
+        // cancel a newer save's failover timer).
+        //
         // Returns { ok, etag?, normalizedNote?, reason?, code? } so saveQueue
         // can forward the result to enqueue() awaiters (the main-window inline
         // notes panel reads this). The presenter window still gets results via
         // the existing channel.postMessage('note-saved') broadcast.
-        async saveNote(path, slideIndex, note, editTimeEtag, origin) {
+        async saveNote(path, slideIndex, note, editTimeEtag, origin, requestId) {
             const broadcast = (payload) => {
                 // No-op when BroadcastChannel was unavailable at init —
                 // inline autosaves still work because callers also read
@@ -1329,15 +1366,28 @@
                 if (!this.channel) return;
                 this.channel.postMessage({
                     type: 'note-saved',
+                    path,
                     slideIndex,
                     origin: origin || 'unknown',
+                    sourceWindowId: this.windowId,
+                    requestId,
                     ...payload
                 });
             };
 
             const tab = state.tabs.find((t) => t.path === path);
             if (!tab || !tab.isMarp) {
-                return { ok: false, reason: 'No active Marp tab' };
+                // This window no longer holds the deck (tab closed / switched
+                // away). Broadcast a NO_DECK failure so a presenter that
+                // routed here can fail over to another window instead of
+                // hanging on "保存中…" or surfacing a dead-end error.
+                const result = {
+                    ok: false,
+                    code: 'NO_DECK',
+                    reason: 'No active Marp tab'
+                };
+                broadcast(result);
+                return result;
             }
             const ifMatch = editTimeEtag || tab.etag;
             if (!ifMatch) {
@@ -1447,7 +1497,8 @@
                 this.channel.postMessage({
                     type: 'slides',
                     empty: true,
-                    reason: 'main-switched-away'
+                    reason: 'main-switched-away',
+                    sourceWindowId: this.windowId
                 });
                 return;
             }
@@ -1459,7 +1510,8 @@
                 notes: tab.notes || [],
                 notesMultiplicity: tab.notesMultiplicity || [],
                 etag: tab.etag || null,
-                current: marpCurrentSlide
+                current: marpCurrentSlide,
+                sourceWindowId: this.windowId
             });
         },
 

package/src/static/lib/presenterChannel.js

@@ -8,15 +8,33 @@
  * Message types (discriminated by `type`):
  *
  *   main → presenter
- *     { type: 'slides', path, html, css, etag, notes, notesMultiplicity, current }
- *     { type: 'slides', empty: true, reason }                    ← clear / no-deck
+ *     { type: 'slides', path, html, css, etag, notes, notesMultiplicity,
+ *       current, sourceWindowId }
+ *     { type: 'slides', empty: true, reason, sourceWindowId }   ← clear / no-deck
  *     { type: 'index', index }
- *     { type: 'note-saved', slideIndex, ok, etag?, normalizedNote?, code?, reason? }
+ *     { type: 'note-saved', path, slideIndex, ok, etag?, normalizedNote?,
+ *       code?, reason?, origin, sourceWindowId, requestId }
+ *     { type: 'saver-here', path, windowId }                    ← failover reply
  *
  *   presenter → main
  *     { type: 'request-slides' }
  *     { type: 'goto', index }
- *     { type: 'edit-note', path, etag, slideIndex, note }
+ *     { type: 'edit-note', path, etag, slideIndex, note, requestId,
+ *       targetWindowId }
+ *     { type: 'find-saver', path }                              ← failover query
+ *
+ * Window routing: every main window has a unique `windowId`. Each `slides`
+ * message carries the broadcasting window's id as `sourceWindowId`; the
+ * presenter pins the first one that can serve the deck and echoes it back as
+ * `edit-note.targetWindowId`. Only that one main window performs the save.
+ * Without this, N main windows showing the same deck each fire their own PUT
+ * and all but one collide on the optimistic lock → spurious "STALE" errors.
+ *
+ * Failover: if the pinned saver stops answering, the presenter broadcasts
+ * `find-saver`; any main window holding the deck (active OR background tab)
+ * replies `saver-here` and the presenter re-pins it. Each `edit-note` carries
+ * a unique `requestId` echoed back in `note-saved` so the presenter matches a
+ * result to the exact save that produced it.
  */
 (function () {
   'use strict';
@@ -27,7 +45,17 @@
     return new BroadcastChannel(CHANNEL_NAME);
   }
 
+  // Per-window identifier used to route presenter saves to a single main
+  // window. crypto.randomUUID is available on localhost (a secure context);
+  // the fallback keeps things working in any odd environment.
+  function newWindowId() {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+      return crypto.randomUUID();
+    }
+    return 'w-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 10);
+  }
+
   if (typeof globalThis !== 'undefined') {
-    globalThis.MDVPresenterChannel = { CHANNEL_NAME, create };
+    globalThis.MDVPresenterChannel = { CHANNEL_NAME, create, newWindowId };
   }
 })();

package/src/static/lib/saveQueue.js

@@ -11,10 +11,12 @@
  * - Crucially, coalescing is scoped per origin: an inline save and a
  *   presenter save for the same slide do NOT replace each other. Both run
  *   serially so neither editor silently loses a draft.
- * - `saveFn(path, slideIndex, note, etag, origin)` is supplied by the
- *   caller; `origin` is an optional tag (e.g. 'presenter' / 'inline') the
+ * - `saveFn(path, slideIndex, note, etag, origin, requestId)` is supplied by
+ *   the caller; `origin` is an optional tag (e.g. 'presenter' / 'inline') the
  *   queue uses for keying and also forwards verbatim so saveFn can route
- *   notifications back to the right editor.
+ *   notifications back to the right editor. `requestId` is an optional
+ *   opaque token forwarded verbatim so a caller can correlate the save's
+ *   result with the request that triggered it.
  * - enqueue() returns a Promise that resolves with the saveFn's result (or a
  *   COALESCED sentinel). Existing callers that ignore the return value or
  *   skip the origin argument keep working unchanged.
@@ -32,7 +34,7 @@
     /** @type {Map<string, { pending: Map<string, {slideIndex:number, note:string, etag:string|null, origin:string|undefined, resolve:Function}>, isDraining: boolean }>} */
     const queue = new Map();
 
-    function enqueue(path, slideIndex, note, etag, origin) {
+    function enqueue(path, slideIndex, note, etag, origin, requestId) {
       return new Promise((resolve) => {
         let entry = queue.get(path);
         if (!entry) {
@@ -44,7 +46,7 @@
         if (existing) {
           existing.resolve({ ok: false, reason: 'COALESCED' });
         }
-        entry.pending.set(key, { slideIndex, note, etag, origin, resolve });
+        entry.pending.set(key, { slideIndex, note, etag, origin, requestId, resolve });
         if (!entry.isDraining) drain(path);
       });
     }
@@ -62,7 +64,8 @@
           let result;
           try {
             result = await saveFn(
-              path, payload.slideIndex, payload.note, payload.etag, payload.origin
+              path, payload.slideIndex, payload.note, payload.etag,
+              payload.origin, payload.requestId
             );
           } catch (err) {
             console.error('saveQueue saveFn error', err);

package/src/static/presenter.html

@@ -287,6 +287,33 @@
   let deckPath = '';
   let saveTimer = null;
 
+  // Window-routing + failover state: the presenter delegates saving to
+  // ONE main window (saverWindowId — the first that can serve this deck).
+  // saveAckTimer detects when that window stops answering. inflightSave /
+  // pendingSave hold a FROZEN copy of the edit ({path, slideIndex, note,
+  // etag, requestId}) so a failover resends the original edit, not
+  // whatever the editor shows after a later blur / slide navigation.
+  let saverWindowId = null;
+  let saveAckTimer = null;
+  let findSaverTimer = null; // bounds the wait for a find-saver reply
+  let inflightSave = null;   // routed, awaiting ack | null
+  let pendingSave = null;    // deferred until a saver is (re)pinned | null
+  const SAVE_ACK_TIMEOUT_MS = 6000;
+  const FIND_SAVER_TIMEOUT_MS = 3000;
+
+  // Each edit-note carries a globally-unique requestId so its note-saved
+  // ack matches the exact save that produced it — an older save's ack
+  // must never clear a newer save's failover timer. The presenterId
+  // prefix keeps ids distinct across multiple presenter windows.
+  const presenterId = (window.MDVPresenterChannel && window.MDVPresenterChannel.newWindowId)
+    ? window.MDVPresenterChannel.newWindowId()
+    : ('p-' + Date.now().toString(36) + Math.random().toString(36).slice(2, 8));
+  let saveRequestSeq = 0;
+  function newRequestId() {
+    saveRequestSeq += 1;
+    return presenterId + ':' + saveRequestSeq;
+  }
+
   const notesBanner = document.getElementById('notesBanner');
 
   function applyCss(css) {
@@ -384,21 +411,16 @@
 
   function loadSlides(payload) {
     if (payload.empty) {
-      // Main window switched to a non-Marp tab or closed the deck — clear
-      // everything so the user can't keep editing notes that would land in
-      // the wrong file. saveQueue retains nothing because path mismatches.
-      slidesHtml = '';
-      cssText = '';
-      applyCss('');
+      // Once a deck is shown, the presenter never blanks itself on an
+      // `empty`: with multiple main windows `request-slides` is global and
+      // any window on a non-Marp tab — including the pinned saver, which
+      // can still save the deck from a background tab — broadcasts `empty`.
+      // Blanking mid-presentation on that noise is wrong; keep the current
+      // slides and let save routing / failover handle reachability. Only
+      // an `empty` arriving before any deck has loaded shows the hint.
+      if (deckPath !== '') return;
       fillStage(stageCurrent, '<div class="empty-state">メイン画面で Marp ファイルを開いてください。</div>');
       fillStage(stageNext, '');
-      notes = [];
-      notesMultiplicity = [];
-      deckEtag = null;
-      deckPath = '';
-      slideCount = 0;
-      counter.textContent = '– / –';
-      setNotesText('');
       applyReadOnlyState();
       return;
     }
@@ -416,7 +438,20 @@
     notes = Array.isArray(payload.notes) ? payload.notes : [];
     notesMultiplicity = Array.isArray(payload.notesMultiplicity) ? payload.notesMultiplicity : [];
     deckEtag = payload.etag || null;
+    // Detect a deck switch BEFORE updating deckPath: the presenter window
+    // can be reused by another main window for another deck, and the old
+    // saver may not hold the new deck (→ "No active Marp tab", no retry).
+    const deckChanged = !!payload.path && payload.path !== deckPath;
     deckPath = payload.path || deckPath;
+    // Pin the window serving this deck as our saver, so edit-note saves
+    // route to exactly one window (no duplicate PUTs). A non-empty
+    // `slides` proves the sender holds the deck. Re-pin on a deck switch
+    // (the presenter window can be reused by another main window).
+    // Failover (saver gone) is handled separately via find-saver /
+    // saver-here, which also discovers inactive background deck tabs.
+    if (payload.sourceWindowId && (saverWindowId === null || deckChanged)) {
+      saverWindowId = payload.sourceWindowId;
+    }
     slideCount = stageCurrent.querySelectorAll('.marpit > svg[data-marpit-svg]').length;
     render(typeof payload.current === 'number' ? payload.current : currentIndex);
   }
@@ -451,24 +486,97 @@
     }
   }
 
+  // Broadcast a find-saver query for `path` and bound the wait: a deck
+  // open in ANY window's tab (active OR background) answers `saver-here`;
+  // if none does within the timeout the deck has no reachable window, so
+  // surface an honest error instead of spinning on 保存中… forever.
+  function requestSaver(path) {
+    channel.postMessage({ type: 'find-saver', path });
+    if (findSaverTimer !== null) clearTimeout(findSaverTimer);
+    findSaverTimer = setTimeout(() => {
+      findSaverTimer = null;
+      if (pendingSave !== null) {
+        pendingSave = null;
+        setSaveStatus('保存失敗: 保存先ウィンドウが見つかりません', 'err');
+      }
+    }, FIND_SAVER_TIMEOUT_MS);
+  }
+
+  // Re-pin a live saver and resend `payload` (the exact edit that could
+  // not be delivered). Used when the saver window stops answering or no
+  // longer holds the deck.
+  function failOver(payload) {
+    if (saveAckTimer !== null) {
+      clearTimeout(saveAckTimer);
+      saveAckTimer = null;
+    }
+    saverWindowId = null;
+    inflightSave = null;
+    if (!payload) return;
+    pendingSave = payload;
+    requestSaver(payload.path);
+  }
+
+  // The saver window never acknowledged our edit-note (it was closed or
+  // frozen). Fail over, resending the exact edit that timed out.
+  function onSaveAckTimeout() {
+    saveAckTimer = null;
+    failOver(inflightSave);
+  }
+
   function sendNoteSave() {
-    // Use the slide / deck / etag captured when the user started editing —
-    // not the live values, which can change under us if the main window
-    // navigates, switches tabs, or receives a watcher update during the
-    // debounce. Sending the live etag would let a watcher-refreshed etag
-    // pass If-Match against the post-edit deck.
+    // Freeze the slide / deck / etag captured when the user started
+    // editing — not the live values, which can change under us if the
+    // main window navigates, switches tabs, or receives a watcher update
+    // during the debounce. The frozen payload also lets a failover resend
+    // the exact edit even after a later blur / slide navigation.
     const idx = editingSlideIndex >= 0 ? editingSlideIndex : currentIndex;
-    const path = editingPath || deckPath;
-    const etag = editingEtag || deckEtag;
     const value = getNotesText();
     notes[idx] = value.trim();
+    postEditNote({
+      path: editingPath || deckPath,
+      slideIndex: idx,
+      note: value,
+      etag: editingEtag || deckEtag
+    });
+  }
+
+  // Route one frozen edit payload to the pinned saver, or defer it until
+  // a saver is (re)pinned.
+  function postEditNote(payload) {
     setSaveStatus('保存中…');
+
+    // No live saver pinned yet (first edit before slides arrived, or the
+    // previous saver window went away). Routing an edit-note without a
+    // targetWindowId would let EVERY main window save it and collide on
+    // the optimistic lock — the exact bug this routing fixes. Instead ask
+    // who can serve this deck; the saver-here handler re-pins and resends.
+    if (saverWindowId === null) {
+      pendingSave = payload;
+      requestSaver(payload.path);
+      return;
+    }
+
+    // Fresh requestId per actual send: a failover resend must NOT reuse
+    // the timed-out original's id, or that original's late ack would be
+    // mistaken for the resend's ack.
+    inflightSave = {
+      path: payload.path,
+      slideIndex: payload.slideIndex,
+      note: payload.note,
+      etag: payload.etag,
+      requestId: newRequestId()
+    };
+    if (saveAckTimer !== null) clearTimeout(saveAckTimer);
+    saveAckTimer = setTimeout(onSaveAckTimeout, SAVE_ACK_TIMEOUT_MS);
     channel.postMessage({
       type: 'edit-note',
-      path,
-      etag,
-      slideIndex: idx,
-      note: value
+      path: inflightSave.path,
+      etag: inflightSave.etag,
+      slideIndex: inflightSave.slideIndex,
+      note: inflightSave.note,
+      requestId: inflightSave.requestId,
+      targetWindowId: saverWindowId
     });
   }
 
@@ -533,7 +641,56 @@
       // the new etag came from our own successful save.
     } else if (msg.type === 'index') {
       render(msg.index);
+    } else if (msg.type === 'saver-here') {
+      // A window answered our find-saver query. Pin it and resend the
+      // deferred edit — but only if it serves the exact deck that edit
+      // targets (find-saver is path-scoped, yet guard defensively). The
+      // first answer wins; later answers find pendingSave already null.
+      if (pendingSave !== null
+          && msg.windowId
+          && msg.path === pendingSave.path) {
+        if (findSaverTimer !== null) {
+          clearTimeout(findSaverTimer);
+          findSaverTimer = null;
+        }
+        saverWindowId = msg.windowId;
+        const queued = pendingSave;
+        pendingSave = null;
+        postEditNote(queued);
+      }
     } else if (msg.type === 'note-saved') {
+      // Is this the answer to OUR routed save? Match on the unique
+      // requestId so an older save's ack can't clear a newer save's
+      // failover timer, and a foreign save (e.g. an inline edit) for the
+      // same slide is ignored — inline saves carry no requestId.
+      const isOwnAck = inflightSave !== null
+        && msg.requestId != null
+        && msg.requestId === inflightSave.requestId;
+      // A note-saved that carries a requestId but isn't our current
+      // inflight save is a superseded / timed-out save's late ack — drop
+      // it so it can't overwrite status / backup / editingEtag for the
+      // current edit. requestId-less acks (inline edits) still fall
+      // through to the observer logic below.
+      if (!isOwnAck && msg.requestId != null) return;
+      if (isOwnAck) {
+        // The pinned saver no longer holds this deck (tab closed / switched
+        // away). It IS alive, but cannot save — fail over to a window that
+        // can, resending the same edit, instead of surfacing an error.
+        if (msg.code === 'NO_DECK') {
+          failOver(inflightSave);
+          return;
+        }
+        // A real answer (success OR genuine STALE) — stop the failover
+        // timer and let the status handling below run.
+        if (saveAckTimer !== null) {
+          clearTimeout(saveAckTimer);
+          saveAckTimer = null;
+        }
+        inflightSave = null;
+      }
+      // Ignore results for a different deck — a second presenter window,
+      // or the main window having switched decks mid-flight.
+      if (msg.path && deckPath && msg.path !== deckPath) return;
       const targetIdx = editingSlideIndex >= 0 ? editingSlideIndex : currentIndex;
       if (msg.slideIndex !== targetIdx) return;
       // Only OUR own successful saves should advance editingEtag. The