mdv-live 0.5.16 → 0.5.17

package/CHANGELOG.md

@@ -5,6 +5,48 @@ 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.17] - 2026-05-10
+
+### Added — Edit-mode Autosave
+
+Markdown エディタを **入力 → 1500ms debounce で自動保存** に。これまで Cmd+S を
+押し忘れると未保存で View に戻すと内容が消える挙動だった。
+
+- `input` で 1500ms debounce → `EditorManager.save()` が `/api/file` に POST
+- toolbar status の遷移: `Modified → Saving... → Saved! → (2s 後) Ready`
+- **Cmd+S** は引き続き使えて、押すと pending な debounce を即 flush
+- View 切替 / タブ切替 / 別ファイル open 時に **flush + await** で未保存破棄事故を防止
+- save 中の連続 input は serialize（chain）。古い save が後着して新しい save を
+  上書きしないよう、各 save 自身の Promise を chain tail にして flush は末尾まで drain
+- save 失敗時は `hide()` / `switch()` / `open()` がすべて navigation を中止して
+  Edit mode を維持。toolbar に `Error: ...` を表示してリトライ余地を残す
+- discard-on-close ダイアログ: AbortController で in-flight POST も abort。
+  ただしサーバーが既に request 受信済みの race window は残るため、ダイアログ
+  メッセージで「自動保存処理中の場合、その時点までの内容がファイルに残る可能性が
+  あります」と明示
+
+### Changed
+
+- `MDVApi.saveFile(path, content, signal?)` に AbortSignal 引数追加（既存
+  caller は signal 省略で動作継続）
+- `TabManager.switch()` を `async` 化（path で target を pin → flush await →
+  index 再 lookup で navigation race 回避）
+- save 成功時に `MDVApi.fetchFile(path)` を chain 内で await して
+  `tab.{content,css,notes,notesMultiplicity,etag,isMarp}` を更新（古い fetch
+  が新しい fetch の後に到着して content を上書きする race を排除）
+
+### Fixed (codex review round 1〜14 で潰した issues)
+
+- 保存中に typing 続いた場合の dirty フラグ誤クリア（live editor とのテキスト一致
+  を確認してから "Saved!" 表示）
+- 連続 autosave で古い ETag の POST が新しい save の後に到着して overwrite
+- BroadcastChannel 経由じゃない、HTTP 経路独自の serialize chain
+- 編集中のタブを close したときに edit mode flag が残る regression
+- discard-on-close で saveTimer / inFlight 両方 abort + lastAutosaveError も clear
+- open() で fetch 中の typing をブロック（textarea.readOnly）+ error 時に restore
+- debounce-fired save が silent fail したまま flushAutosave が成功扱いする問題
+  （`lastAutosaveError` を保持し、navigation 時に再 throw）
+
 ## [0.5.16] - 2026-05-09
 
 ### Added — Inline Speaker Notes (PowerPoint-style)

package/package.json

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

package/src/static/app.js

@@ -1911,14 +1911,57 @@
         async open(path) {
             const existingIndex = state.tabs.findIndex(t => t.path === path);
             if (existingIndex >= 0) {
-                this.switch(existingIndex);
+                await this.switch(existingIndex);
                 return;
             }
 
-            const response = await MDVApi.fetchFile(path);
-            const data = await response.json();
+            // The not-yet-open path used to skip the outgoing-tab flush
+            // that switch() does. If the user types and then clicks a
+            // brand-new file within the 1.5s debounce, the textarea is
+            // ripped out before the timer fires and the last edits are
+            // lost. Mirror switch()'s outgoing flush + raw capture here,
+            // including the abort-on-flush-failure behavior so a failed
+            // save doesn't quietly kick the user off the tab they were
+            // editing.
+            let outgoingTextarea = null;
+            if (state.activeTabIndex >= 0
+                && state.activeTabIndex < state.tabs.length
+                && state.isEditMode) {
+                try {
+                    await EditorManager.flushAutosave();
+                } catch (_e) {
+                    return;
+                }
+                outgoingTextarea = document.getElementById('editorTextarea');
+                if (outgoingTextarea) {
+                    state.tabs[state.activeTabIndex].raw = outgoingTextarea.value;
+                    // Lock the editor while the new file loads. Without
+                    // this, slow file loads let the user type more text
+                    // that schedules a fresh autosave, then open() tears
+                    // the textarea out before that timer ever fires and
+                    // the last keystrokes are lost.
+                    outgoingTextarea.readOnly = true;
+                }
+            }
+
+            // Always restore the outgoing textarea's editability if we
+            // bail out below. On the success path the textarea will be
+            // wiped by render() anyway, so the unlock is harmless then.
+            const unlockOnFailure = () => {
+                if (outgoingTextarea) outgoingTextarea.readOnly = false;
+            };
+
+            let response, data;
+            try {
+                response = await MDVApi.fetchFile(path);
+                data = await response.json();
+            } catch (e) {
+                unlockOnFailure();
+                throw e;
+            }
 
             if (data.error) {
+                unlockOnFailure();
                 alert('Error: ' + data.error);
                 return;
             }
@@ -1957,9 +2000,31 @@
             updateUrlPath(path);
         },
 
-        switch(index) {
+        async switch(index) {
+            // Pin the target by PATH (not by index) before any await:
+            // the user could close a tab while we're flushing, which
+            // would shift the indices and turn `index` into either the
+            // wrong tab or an out-of-bounds dereference.
+            const targetPath = state.tabs[index] && state.tabs[index].path;
+            if (!targetPath) return;
+
             if (state.activeTabIndex >= 0 && state.activeTabIndex < state.tabs.length) {
                 if (state.isEditMode) {
+                    // Flush a pending autosave for the OUTGOING tab before
+                    // we render it out. Otherwise the debounce timer
+                    // captures #editorTextarea at fire time, finds it
+                    // gone, and the last keystrokes are stuck only in
+                    // tab.raw without ever reaching disk.
+                    //
+                    // If the flush rejects, the user's edits did NOT
+                    // reach disk; aborting the switch keeps them in
+                    // edit mode so they can retry instead of losing
+                    // work behind a tab they walked away from.
+                    try {
+                        await EditorManager.flushAutosave();
+                    } catch (_e) {
+                        return;
+                    }
                     const textarea = document.getElementById('editorTextarea');
                     if (textarea) {
                         state.tabs[state.activeTabIndex].raw = textarea.value;
@@ -1980,19 +2045,30 @@
                 EditorManager.updateButton();
             }
 
-            state.activeTabIndex = index;
+            // Re-resolve the target by path post-await — its index may
+            // have shifted (or it may have been closed entirely) during
+            // the flush.
+            const newIndex = state.tabs.findIndex((t) => t.path === targetPath);
+            if (newIndex < 0) return;
+            state.activeTabIndex = newIndex;
             this.render();
             this.renderActive();
-            WebSocketManager.watchFile(state.tabs[index].path);
+            WebSocketManager.watchFile(state.tabs[newIndex].path);
             FileTreeManager.updateHighlight();
-            updateUrlPath(state.tabs[index].path);
+            updateUrlPath(state.tabs[newIndex].path);
         },
 
         close(index) {
             // Warn about unsaved changes
             if (state.isEditMode && state.hasUnsavedChanges && index === state.activeTabIndex) {
                 DialogManager.show('未保存の変更', {
-                    message: '変更を保存せずにタブを閉じますか？',
+                    // The autosave runs every 1.5s. If a POST is already
+                    // in flight when the user discards, the server may
+                    // have received the request before our AbortController
+                    // can cancel it — so the discarded text can still
+                    // land on disk in that small window. Be honest about
+                    // it rather than promising a guarantee we can't keep.
+                    message: '変更を保存せずにタブを閉じますか？\n（自動保存処理中の場合、その時点までの内容がファイルに残る可能性があります）',
                     isConfirm: true,
                     danger: true,
                     confirmText: '閉じる',
@@ -2000,11 +2076,28 @@
                         state.hasUnsavedChanges = false;
                         state.isEditMode = false;
                         EditorManager.updateButton();
+                        // Drop the pending debounce so a queued autosave
+                        // can't fire after the tab is gone and persist
+                        // text the user explicitly chose to discard.
+                        EditorManager.cancelPendingAutosave();
                         TabManager.close(index);
                     }
                 });
                 return;
             }
+            // The clean-close path skips the confirm dialog entirely (no
+            // unsaved changes thanks to autosave). It still has to exit
+            // edit mode if we're closing the ACTIVE tab — otherwise
+            // state.isEditMode stays true, the next tab renders in edit
+            // mode (HTML files show source instead of preview, the
+            // toolbar / shortcuts misbehave), and a fresh edit session
+            // is needed to recover.
+            if (state.isEditMode && index === state.activeTabIndex) {
+                state.isEditMode = false;
+                EditorManager.updateButton();
+                EditorManager.cancelPendingAutosave();
+            }
+
             const closingPath = state.tabs[index] && state.tabs[index].path;
             state.tabs.splice(index, 1);
             if (closingPath && window.MDVTabRegistry) {
@@ -2092,7 +2185,28 @@
     // Editor Manager
     // ============================================================
 
+    const EDITOR_AUTOSAVE_DEBOUNCE_MS = 1500;
+
     const EditorManager = {
+        // Debounced-autosave state. saveTimer is the pending input→save
+        // schedule; savedStatusTimer auto-clears the "Saved!" toast so the
+        // toolbar doesn't pin a stale success message. inFlight serializes
+        // overlapping save() calls so a slow earlier POST can't reach the
+        // last-write-wins server endpoint after a faster newer POST and
+        // overwrite the user's newer text. saveAbortController abort()s
+        // every save sharing the chain, so an explicit discard (close-
+        // without-saving) can cancel an in-flight POST instead of letting
+        // it persist text the user just discarded. lastAutosaveError
+        // remembers a failure that was thrown from a debounce-fired save
+        // (whose own caller silently caught it because the toolbar
+        // status had already been updated) so a later flushAutosave for
+        // navigation can refuse to drop the user's buffer.
+        saveTimer: null,
+        savedStatusTimer: null,
+        inFlight: null,
+        saveAbortController: null,
+        lastAutosaveError: null,
+
         async toggle() {
             if (state.activeTabIndex < 0) return;
             const tab = state.tabs[state.activeTabIndex];
@@ -2107,6 +2221,96 @@
             state.isEditMode ? this.show() : await this.hide();
         },
 
+        scheduleAutosave() {
+            if (this.saveTimer) clearTimeout(this.saveTimer);
+            this.saveTimer = setTimeout(() => {
+                this.saveTimer = null;
+                // Debounce-fired saves swallow rejections — the toolbar
+                // status already reflects the error, and there is no
+                // caller waiting for the Promise. Without this catch
+                // every failed autosave would surface as an
+                // "Unhandled Promise rejection" in the console.
+                this.save().catch(() => { /* status already shown */ });
+            }, EDITOR_AUTOSAVE_DEBOUNCE_MS);
+        },
+
+        // Cancel a pending debounce AND any in-flight POST so a discard-
+        // on-close is fully honored. The aborted save() resolves silently
+        // (its catch maps AbortError → no-op), so the chain unblocks and
+        // no toolbar status mutation runs.
+        cancelPendingAutosave() {
+            if (this.saveTimer) {
+                clearTimeout(this.saveTimer);
+                this.saveTimer = null;
+            }
+            if (this.saveAbortController) {
+                this.saveAbortController.abort();
+                this.saveAbortController = null;
+            }
+            // Drop any stored failure too — discard means "I don't care
+            // about that buffer anymore." Without this, the next edit
+            // session for an unrelated file would inherit the prior
+            // failure and flushAutosave would throw on its first
+            // navigation, blocking work that has nothing to do with
+            // the discarded tab.
+            this.lastAutosaveError = null;
+        },
+
+        // Flush a pending autosave NOW (instead of waiting for the
+        // debounce timer). Used by Cmd+S, hide(), and tab switching so
+        // leaving edit mode never silently drops the last unsaved
+        // keystrokes — and so a slow in-flight save can't run its
+        // post-success "clear dirty / show Saved!" branch after the user
+        // has already moved on to a different tab (the global
+        // hasUnsavedChanges flag would clobber the new editor's state).
+        //
+        // The loop keeps draining until both the debounce queue and the
+        // in-flight chain are empty: while we await an in-flight POST
+        // the textarea is still editable, so a new keystroke can arm a
+        // fresh saveTimer. We have to re-check after each await or the
+        // tail of typing escapes the flush and the eventual save() call
+        // returns no-op because the textarea has been removed by the
+        // navigation that triggered us.
+        async flushAutosave() {
+            // Surface a previously-silenced autosave failure first.
+            // If the last debounce-fired save threw and nobody else
+            // has seen it (its caller .catch'd silently), we MUST
+            // throw before letting navigation continue — otherwise
+            // hide() would refetch over the unsaved buffer.
+            if (this.lastAutosaveError) {
+                throw this.lastAutosaveError;
+            }
+            let lastError = null;
+            while (this.saveTimer || this.inFlight) {
+                if (this.saveTimer) {
+                    clearTimeout(this.saveTimer);
+                    this.saveTimer = null;
+                    try {
+                        await this.save();
+                    } catch (e) {
+                        // First failure aborts the drain. Re-trying
+                        // the same chain would just replay the failure
+                        // and risk an infinite loop if the user keeps
+                        // typing. The next input will arm a fresh
+                        // saveTimer and we can flush again on the next
+                        // navigation attempt.
+                        lastError = e;
+                        break;
+                    }
+                } else {
+                    try {
+                        await this.inFlight;
+                    } catch (e) {
+                        lastError = e;
+                        break;
+                    }
+                }
+            }
+            // Propagate so navigation callers (hide / switch / open) can
+            // bail out instead of silently dropping the user's buffer.
+            if (lastError) throw lastError;
+        },
+
         updateButton() {
             elements.editToggle.classList.toggle('active', state.isEditMode);
             elements.editLabel.textContent = state.isEditMode ? 'View' : 'Edit';
@@ -2138,6 +2342,7 @@
                 state.hasUnsavedChanges = true;
                 elements.editorStatus.textContent = 'Modified';
                 elements.editorStatus.className = 'editor-status modified';
+                EditorManager.scheduleAutosave();
             });
 
             setTimeout(() => {
@@ -2185,6 +2390,29 @@
             if (state.activeTabIndex < 0) return;
             const tab = state.tabs[state.activeTabIndex];
 
+            // Flush any pending autosave BEFORE we read the textarea +
+            // re-fetch the file. Otherwise the post-fetch render would
+            // overwrite tab.raw with the on-disk version while the user's
+            // last keystrokes (still inside the debounce window) are
+            // silently discarded.
+            //
+            // If the flush throws (a write failed somewhere in the chain),
+            // bail out: the on-disk content does NOT match the user's
+            // textarea, so swapping back to View mode would refetch the
+            // older version and lose the in-progress edits. Stay in edit
+            // mode with the existing 'Error: ...' status visible so the
+            // user can retry / fix the underlying issue. Re-throw so
+            // toggle()'s callers (PrintManager.print and friends) can
+            // detect the failure instead of silently exporting from the
+            // pre-edit on-disk content.
+            try {
+                await this.flushAutosave();
+            } catch (e) {
+                state.isEditMode = true;
+                this.updateButton();
+                throw e;
+            }
+
             const textarea = document.getElementById('editorTextarea');
             let topLineNumber = -1;
             let scrollPercentage = 0;
@@ -2266,46 +2494,179 @@
         },
 
         async save() {
-            if (state.activeTabIndex < 0 || !state.isEditMode) return;
+            if (state.activeTabIndex < 0) return;
 
-            const tab = state.tabs[state.activeTabIndex];
-            const textarea = document.getElementById('editorTextarea');
-            if (!textarea) return;
+            // Cancel any pending debounce; whether we got here via the
+            // timer, Cmd+S, or flushAutosave, this single save covers it.
+            if (this.saveTimer) {
+                clearTimeout(this.saveTimer);
+                this.saveTimer = null;
+            }
 
-            const newContent = textarea.value;
+            // Pin tab, path, and content NOW. We must not re-read these
+            // after the prior save completes, because by then the active
+            // tab and textarea may have changed under us — and we still
+            // need to persist the snapshot the user actually authored
+            // when this save() was invoked.
+            const initialTab = state.tabs[state.activeTabIndex];
+            const textarea = document.getElementById('editorTextarea');
+            if (!initialTab || !textarea) return;
+            const path = initialTab.path;
+            const content = textarea.value;
+
+            // One AbortController governs the whole chain: cancel-pending
+            // calls .abort() once and every queued / in-flight save sees
+            // the same signal. We only create a fresh one when the chain
+            // is currently empty (or has been previously aborted+cleared).
+            if (!this.saveAbortController) {
+                this.saveAbortController = new AbortController();
+            }
+            const signal = this.saveAbortController.signal;
+
+            // Chain after the previous save's Promise so concurrent saves
+            // reach the last-write-wins endpoint in invocation order.
+            // flushAutosave() awaits this.inFlight to drain the entire
+            // chain (not just the head), so any number of queued saves
+            // are guaranteed to complete before navigation proceeds.
+            const prior = this.inFlight;
+            const self = this;
+            const mine = (async () => {
+                if (prior) {
+                    try { await prior; } catch (_e) { /* ignore */ }
+                }
+                // If the chain was aborted while we were waiting in line,
+                // skip the POST entirely.
+                if (signal.aborted) return;
+                try {
+                    elements.editorStatus.textContent = 'Saving...';
+                    elements.editorStatus.className = 'editor-status';
 
-            try {
-                elements.editorStatus.textContent = 'Saving...';
-                elements.editorStatus.className = 'editor-status';
+                    const response = await MDVApi.saveFile(path, content, signal);
+                    const result = await response.json();
 
-                const response = await MDVApi.saveFile(tab.path, newContent);
+                    if (result.error) {
+                        // Only paint status onto the toolbar if the user
+                        // is still on the deck we tried to save.
+                        const active = state.tabs[state.activeTabIndex];
+                        if (active && active.path === path) {
+                            elements.editorStatus.textContent = 'Error: ' + result.error;
+                            elements.editorStatus.className = 'editor-status modified';
+                        }
+                        // Throw so flushAutosave / hide() can detect that
+                        // the write failed and avoid silently overwriting
+                        // the user's edits with the on-disk content.
+                        throw new Error(result.error);
+                    }
 
-                const result = await response.json();
+                    // Mirror the saved content into the deck's tab even
+                    // if the user has navigated away — the on-disk file
+                    // and tab.raw should agree on what was persisted.
+                    const target = state.tabs.find((t) => t.path === path);
+                    if (target) {
+                        target.raw = content;
+                        // Re-fetch rendered HTML / Marp metadata INLINE,
+                        // not fire-and-forget. The save chain is
+                        // serialized per-tab; awaiting the refresh here
+                        // ensures the older save's refresh can never
+                        // arrive after a newer save's refresh and
+                        // overwrite the newer rendered state. The
+                        // perceived latency cost is the round trip,
+                        // which only blocks a *follow-up* autosave (the
+                        // user's typing is unblocked the instant we
+                        // dispatched POST).
+                        try {
+                            const refreshRes = await MDVApi.fetchFile(path);
+                            const data = await refreshRes.json();
+                            const t = state.tabs.find((x) => x.path === path);
+                            if (t) {
+                                if (typeof data.content === 'string') t.content = data.content;
+                                if (typeof data.css !== 'undefined') t.css = data.css;
+                                if (Array.isArray(data.notes)) t.notes = data.notes;
+                                if (Array.isArray(data.notesMultiplicity)) t.notesMultiplicity = data.notesMultiplicity;
+                                if (data.etag) t.etag = data.etag;
+                                if (typeof data.isMarp !== 'undefined') t.isMarp = data.isMarp;
+                            }
+                        } catch (_e) { /* watcher will catch up */ }
+                    }
 
-                if (result.error) {
-                    elements.editorStatus.textContent = 'Error: ' + result.error;
-                    elements.editorStatus.className = 'editor-status modified';
-                    return;
+                    // Global hasUnsavedChanges and the toolbar are tied
+                    // to the ACTIVE tab. Don't clear them on behalf of a
+                    // save whose deck the user has already left, and
+                    // don't clear them when the user has typed more text
+                    // since this save was scheduled — the next debounce
+                    // is already requeued and will settle state itself.
+                    const active = state.tabs[state.activeTabIndex];
+                    if (active && active.path === path) {
+                        const liveTextarea = document.getElementById('editorTextarea');
+                        const stillFresh = liveTextarea && liveTextarea.value === content;
+                        if (stillFresh) {
+                            state.hasUnsavedChanges = false;
+                            elements.editorStatus.textContent = 'Saved!';
+                            elements.editorStatus.className = 'editor-status saved';
+                            if (self.savedStatusTimer) clearTimeout(self.savedStatusTimer);
+                            self.savedStatusTimer = setTimeout(() => {
+                                if (elements.editorStatus.textContent === 'Saved!') {
+                                    elements.editorStatus.textContent = 'Ready';
+                                    elements.editorStatus.className = 'editor-status';
+                                }
+                                self.savedStatusTimer = null;
+                            }, 2000);
+                        }
+                    }
+                    // Whatever earlier failure we may have remembered is
+                    // moot now — the chain went through.
+                    self.lastAutosaveError = null;
+                } catch (e) {
+                    // Abort is intentional (discard-on-close cancelled
+                    // us). Don't treat that as a failure.
+                    if (e.name === 'AbortError') return;
+                    const active = state.tabs[state.activeTabIndex];
+                    if (active && active.path === path) {
+                        elements.editorStatus.textContent = 'Error: ' + e.message;
+                        elements.editorStatus.className = 'editor-status modified';
+                    }
+                    // Remember the failure so a later flushAutosave —
+                    // even one fired AFTER saveTimer/inFlight have both
+                    // settled — can surface it. Without this a debounced
+                    // save that fails silently (its caller's `.catch(()
+                    // => {})`) would leave hasUnsavedChanges=true with
+                    // no observable error, and hide()'s subsequent flush
+                    // would return success and refetch the on-disk file
+                    // over the user's unsaved buffer.
+                    self.lastAutosaveError = e;
+                    // Re-throw so a flushAutosave caller (hide / switch /
+                    // open / Cmd+S) can react and refuse to discard the
+                    // unsaved buffer.
+                    throw e;
+                }
+            })();
+
+            // Make `mine` the new chain tail. flushAutosave awaits whatever
+            // is at the tail, so as long as each save replaces the tail
+            // with a Promise that internally awaits its predecessor, the
+            // caller always waits for the entire pending chain.
+            this.inFlight = mine;
+            try {
+                await mine;
+            } finally {
+                // Only the tail clears inFlight. If a newer save has
+                // chained on after us, leave its Promise in place — and
+                // leave the shared AbortController in place too so the
+                // newer save can still be cancelled via the same handle.
+                if (this.inFlight === mine) {
+                    this.inFlight = null;
+                    if (this.saveAbortController
+                        && this.saveAbortController.signal === signal) {
+                        this.saveAbortController = null;
+                    }
                 }
-
-                tab.raw = newContent;
-                state.hasUnsavedChanges = false;
-                elements.editorStatus.textContent = 'Saved!';
-                elements.editorStatus.className = 'editor-status saved';
-
-                setTimeout(() => {
-                    elements.editorStatus.textContent = 'Ready';
-                    elements.editorStatus.className = 'editor-status';
-                }, 2000);
-
-            } catch (e) {
-                elements.editorStatus.textContent = 'Error: ' + e.message;
-                elements.editorStatus.className = 'editor-status modified';
             }
         },
 
         init() {
-            elements.editToggle.addEventListener('click', () => this.toggle());
+            elements.editToggle.addEventListener('click', () => {
+                this.toggle().catch(() => { /* status already shown */ });
+            });
         }
     };
 
@@ -2327,9 +2688,15 @@
 
             const tab = state.tabs[state.activeTabIndex];
 
-            // editモード中は閉じてからPDF生成
+            // editモード中は閉じてからPDF生成。autosave が失敗していた
+            // ら toggle() が throw する → 印刷を中止して edit モード維持
+            // (古い on-disk 内容で勝手に PDF 化しないように)。
             if (state.isEditMode) {
-                await EditorManager.toggle();
+                try {
+                    await EditorManager.toggle();
+                } catch (_e) {
+                    return;
+                }
             }
 
             if (tab.isMarp || this.isMarpPresentation()) {
@@ -2868,7 +3235,7 @@
         shortcuts: {
             'b': { handler: () => SidebarManager.toggle() },
             'w': { handler: () => TabManager.close(state.activeTabIndex), requiresTab: true },
-            'e': { handler: () => EditorManager.toggle(), requiresTab: true },
+            'e': { handler: () => EditorManager.toggle().catch(() => { /* status already shown */ }), requiresTab: true },
             's': { handler: () => EditorManager.save(), requiresEditMode: true },
             'p': { handler: () => PrintManager.print(), requiresTab: true }
         },

package/src/static/lib/apiClient.js

@@ -42,11 +42,12 @@
   function fetchFile(path) {
     return fetch('/api/file?path=' + encodeURIComponent(path));
   }
-  function saveFile(path, content) {
+  function saveFile(path, content, signal) {
     return fetch('/api/file', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ path, content })
+      body: JSON.stringify({ path, content }),
+      signal
     });
   }
   function fetchInfo() { return fetch('/api/info'); }