dsh-side-memo 1.3.0 → 1.3.1

package/README.md

@@ -9,7 +9,7 @@
 A lightweight, toggleable **right-side notes panel** for [DeepSeek Harness](https://deepseek.com/harness). Jot memos while you chat — text, inline images, and labels — copy them with one click, star favorites to keep them pinned at the top, and move everything in or out as an Excel workbook. When a conversation is worth keeping, one click turns it into a memo.
 
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
-![Version](https://img.shields.io/badge/version-1.3.0-4D6BFE)
+![Version](https://img.shields.io/badge/version-1.3.1-4D6BFE)
 [![npm](https://img.shields.io/npm/v/dsh-side-memo?label=npm&color=4D6BFE)](https://www.npmjs.com/package/dsh-side-memo)
 [![CI](https://github.com/r48n34/dsh-side-memo/actions/workflows/ci.yml/badge.svg)](https://github.com/r48n34/dsh-side-memo/actions/workflows/ci.yml)
 ![DeepSeek Harness](https://img.shields.io/badge/DeepSeek%20Harness-0.2.x-4D6BFE)
@@ -53,6 +53,7 @@ To remove it, use **Settings → Plugins** in DSH (or the equivalent `dsh plugin
 - **Copy and transfer:** Copy notes in one click; import or export notes as Excel workbooks.
 - **Right-click actions:** Right-click a memo — or press `Shift`+`F10` — for Open, Copy, Duplicate, favorite and Delete, without leaving the list. Delete asks for a second click, like the editor.
 - **Save locally:** Notes and images stay in your browser and are available across Sessions.
+- **Stays fast:** image data is read only when the notes panel or the pre-Session drawer first opens, never at plugin startup, and off-screen memo rows skip layout and paint when the chat column resizes. A 300-memo library stays responsive even with tens of megabytes of images.
 
 ## Usage
 
@@ -91,6 +92,7 @@ Imports add new notes without overwriting existing ones. Images remain local and
 - Chat-to-memo captures plain text only: the visible user prompts and the assistant's text replies (or, when you pick the prompts-only entry, only what you sent). Reasoning, tool output and images are not included, the 8,000-character body limit drops the oldest turns first, and the memo title is taken from the first prompt (with a generic fallback title when there is none). The button in a message's action row saves only that one prompt's text; it appears for user messages whose visible text is non-empty.
 - Text is plain text (no Markdown or rich-text formatting); images are the only rich content. Images are downscaled before storage and are not exported to Excel — the `Images` column only holds a count.
 - Image support needs IndexedDB and Canvas. If the browser blocks IndexedDB, the text memos keep working and image insertion is disabled.
+- Images are loaded the first time the notes panel or the pre-Session drawer opens in a page load. The text list appears immediately, and a very large image library can take a moment before images — and the editor's image controls — are ready.
 - Excel import reads the first worksheet only; formulas import as their cached values, and rich-text cell formatting is ignored.
 - Limits: 300 memos, 120-character titles, 8,000-character bodies, 12 labels per memo (24 characters each), 20 images per memo (source images up to 24 MB, downscaled to at most 1,400 px at quality 0.82 before storage; display sizes 24–1,400 px), 8 MB `.xlsx` imports (up to 32 MB expanded across at most 64 entries), and a 60 MB total image budget for the browser.
 - Labels are flat tags — no nesting, per-label colors, or separate tag manager — and each label is stored per memo, so renaming one means editing every memo that carries it.

package/README.zh-CN.md

@@ -9,7 +9,7 @@
 一个轻量、可开关的 **右侧便签面板**，为 [DeepSeek Harness](https://deepseek.com/harness) 打造。聊天时随手记下内容——文字、内嵌图片和标签——一键复制，收藏常用便签让它始终置顶，还能把所有便签整体导入或导出为 Excel 工作簿。对话值得保留时，一次点击就能把它存成便签。
 
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
-![Version](https://img.shields.io/badge/version-1.3.0-4D6BFE)
+![Version](https://img.shields.io/badge/version-1.3.1-4D6BFE)
 [![npm](https://img.shields.io/npm/v/dsh-side-memo?label=npm&color=4D6BFE)](https://www.npmjs.com/package/dsh-side-memo)
 [![CI](https://github.com/r48n34/dsh-side-memo/actions/workflows/ci.yml/badge.svg)](https://github.com/r48n34/dsh-side-memo/actions/workflows/ci.yml)
 ![DeepSeek Harness](https://img.shields.io/badge/DeepSeek%20Harness-0.2.x-4D6BFE)
@@ -55,6 +55,7 @@ dsh plugin --profile desktop add dsh-side-memo
 - **单条提问存为便签** —— 把鼠标移到你发送的消息上，点击操作行（**复制** 按钮旁）的便签按钮，即可只把这条提问存成新便签，无需打开标题栏菜单。
 - **Excel 导入 / 导出** —— 导出全部便签到 `.xlsx`，或追加导入便签，不覆盖现有内容。图片本身不会导出，`Images` 列仅记录数量。
 - **本地保存** —— 便签和图片引用存于浏览器的 `localStorage`，图片数据存于 IndexedDB；刷新后保留，并在会话间共享。
+- **保持轻快** —— 图片数据只在首次打开便签面板或会话前的浮动抽屉时读取，不会在插件启动时加载；聊天区缩放时，屏幕外的便签行会跳过布局与绘制。即使有 300 条便签、几十 MB 图片，面板也能保持流畅。
 
 ## 使用方法
 
@@ -92,6 +93,7 @@ dsh plugin --profile desktop add dsh-side-memo
 - 对话存为便签只收录纯文本：可见的用户提问和助手正文（选择“只保存我的提问”时只保留你发送的内容）。思考过程、工具输出和图片不会包含；8,000 字符的正文上限会先从最早的轮次开始丢弃；便签标题取自第一个提问，没有提问时使用通用的默认标题。消息操作行里的按钮只保存该条提问的文字，且只对可见文字非空的用户消息出现。
 - 文本是纯文本（不支持 Markdown 或富文本格式）；图片是唯一的富内容。图片在保存前会被缩小，也不会导出到 Excel——`Images` 列只记录数量。所选显示尺寸随便签保存，刷新后仍会保留；它只改变图片的显示方式，不会重新编码或替换已保存的图片。
 - 图片功能依赖 IndexedDB 和 Canvas。如果浏览器禁用了 IndexedDB，文字便签仍可正常使用，但插入图片会被禁用。
+- 图片数据会在本次页面首次打开便签面板或会话前的浮动抽屉时加载。文字列表会立即出现；如果图片很多，图片以及编辑器中的图片操作会稍等片刻才就绪。
 - Excel 导入只读取第一个工作表；公式按其缓存值导入，富文本单元格格式会被忽略。
 - 上限：300 条便签、标题 120 字符、正文 8,000 字符、每条便签 12 个标签（每个 24 字符）、每条便签 20 张图片（单张源图片不超过 24 MB，保存前会缩小到最长边 1,400 像素、质量 0.82，显示尺寸限制在 24–1,400 像素）、`.xlsx` 文件 8 MB（解压后总量不超过 32 MB，压缩包内最多 64 个条目），以及浏览器图片总量 60 MB。
 - 标签是扁平标签——不支持层级、按标签着色或独立的标签管理器——而且每个标签都按便签单独存储，所以重命名一个标签意味着要编辑所有带有它的便签。

package/README.zh-TW.md

@@ -9,7 +9,7 @@
 一個輕量、可開關的 **右側便箋面板**，為 [DeepSeek Harness](https://deepseek.com/harness) 打造。聊天時隨手記下內容——文字、內嵌圖片與標籤——一鍵複製，收藏常用便箋讓它始終置頂，還能把所有便箋整批匯入或匯出為 Excel 活頁簿。對話值得保留時，點一下就能把它存成便箋。
 
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
-![Version](https://img.shields.io/badge/version-1.3.0-4D6BFE)
+![Version](https://img.shields.io/badge/version-1.3.1-4D6BFE)
 [![npm](https://img.shields.io/npm/v/dsh-side-memo?label=npm&color=4D6BFE)](https://www.npmjs.com/package/dsh-side-memo)
 [![CI](https://github.com/r48n34/dsh-side-memo/actions/workflows/ci.yml/badge.svg)](https://github.com/r48n34/dsh-side-memo/actions/workflows/ci.yml)
 ![DeepSeek Harness](https://img.shields.io/badge/DeepSeek%20Harness-0.2.x-4D6BFE)
@@ -54,6 +54,7 @@ dsh plugin --profile desktop add dsh-side-memo
 - **標籤與搜尋** —— 搜尋標題、內文和標籤；每則最多 12 個標籤、每個最多 24 字元，重複標籤不分大小寫。可篩選同時符合多個標籤的便箋，或依標籤分組。
 - **Excel 匯入 / 匯出** —— 匯出所有便箋為 `.xlsx`，或附加匯入新便箋，不覆寫現有內容。圖片不會匯出，`Images` 欄僅記錄數量。
 - **本機保存** —— 便箋及圖片參照存於瀏覽器的 `localStorage`，圖片資料存於 IndexedDB；重新載入後保留，並在工作階段間共用。
+- **保持輕快** —— 圖片資料只在首次開啟便箋面板或工作階段前的浮動抽屜時讀取，不會在外掛啟動時載入；聊天區縮放時，畫面外的便箋列會跳過版面配置與繪製。即使有 300 則便箋、數十 MB 圖片，面板也能保持順暢。
 
 ## 使用方式
 
@@ -93,6 +94,7 @@ dsh plugin --profile desktop add dsh-side-memo
 - 對話存為便箋只收錄純文字：可見的使用者提問與助理正文（選擇「只儲存我的提問」時只保留你傳送的內容）。思考過程、工具輸出與圖片不會包含；8,000 字元的正文上限會先從最早的輪次開始捨棄；便箋標題取自第一個提問，沒有提問時使用通用的預設標題。訊息操作列中的按鈕只會儲存該則提問的文字，且只對可見文字非空的使用者訊息出現。
 - 文字為純文字（不支援 Markdown 或富文字格式）；圖片是唯一的豐富內容。圖片在儲存前會先縮小，也不會匯出到 Excel——`Images` 欄只記錄數量。所選顯示尺寸會隨便箋儲存，重新載入後仍會保留；它只改變圖片的顯示方式，不會重新編碼或取代已儲存的圖片。
 - 圖片功能需要 IndexedDB 與 Canvas。若瀏覽器封鎖 IndexedDB，文字便箋仍可正常運作，但插入圖片會被停用。
+- 圖片資料會在本次頁面首次開啟便箋面板或工作階段前的浮動抽屜時載入。文字清單會立即出現；如果圖片很多，圖片以及編輯器中的圖片操作會稍待片刻才就緒。
 - Excel 匯入只讀取第一個工作表；公式會以其快取值匯入，儲存格中的富文字格式會被忽略。
 - 上限：300 則便箋、標題 120 個字元、內文 8,000 個字元、每則便箋 12 個標籤（每個 24 個字元）、每則便箋 20 張圖片（單張來源圖片不超過 24 MB，儲存前會縮小到最長邊 1,400 像素、品質 0.82，顯示尺寸限制在 24–1,400 像素）、`.xlsx` 檔 8 MB（解壓後總量不超過 32 MB，壓縮檔內最多 64 個項目），以及瀏覽器圖片總量 60 MB。
 - 標籤是扁平標籤——不支援階層、個別標籤顏色或獨立的標籤管理員——而且每個標籤都以個別便箋為單位儲存，所以重新命名一個標籤必須編輯所有帶有它的便箋。

package/client.js

@@ -350,6 +350,10 @@ window.__ModuleLoader__.load({
         '.dsm-row[draggable="true"]{cursor:grab}',
         '.dsm-row[draggable="true"]:active{cursor:grabbing}',
         '.dsm-row[data-dragging="true"]{opacity:.55;background:var(--dsw-alias-bg-layer-2)}',
+        // Rows far outside the panel viewport skip layout and paint; the intrinsic
+        // size keeps the scrollbar stable until a row has been rendered once. This
+        // is what keeps a 300-memo library cheap when the chat column re-layouts.
+        '.dsm-row{content-visibility:auto;contain-intrinsic-size:auto 78px}',
         '.dsm-menu{position:absolute;z-index:20;min-width:172px;max-width:240px;padding:4px;box-sizing:border-box;',
         'display:flex;flex-direction:column;gap:1px;border:1px solid var(--dsw-alias-border-l1);border-radius:10px;',
         'background:var(--dsw-specific-menu);backdrop-filter:var(--dsw-menu-backdrop-filter);',
@@ -1451,20 +1455,35 @@ window.__ModuleLoader__.load({
             });
         }
         function addImage(record) {
-            if (!imagesAvailable)
-                return Promise.resolve({ ok: false, reason: 'unavailable' });
-            var clean = normalizeImageRecord(record);
-            if (clean === undefined)
-                return Promise.resolve({ ok: false, reason: 'unsupported' });
-            var image = clean;
-            if (imageBytes() + image.size <= MAX_TOTAL_IMAGE_BYTES)
-                return persistImage(image);
-            return collectOrphans().then(function () {
-                if (imageBytes() + image.size > MAX_TOTAL_IMAGE_BYTES)
-                    return { ok: false, reason: 'budget' };
-                return persistImage(image);
+            // The image cache is lazy, but an insert still needs the open database
+            // handle and the in-memory budget, so force hydration before writing.
+            return ensureImages().then(function () {
+                if (!imagesAvailable)
+                    return { ok: false, reason: 'unavailable' };
+                var clean = normalizeImageRecord(record);
+                if (clean === undefined)
+                    return { ok: false, reason: 'unsupported' };
+                var image = clean;
+                if (imageBytes() + image.size <= MAX_TOTAL_IMAGE_BYTES)
+                    return persistImage(image);
+                return collectOrphans().then(function () {
+                    if (imageBytes() + image.size > MAX_TOTAL_IMAGE_BYTES)
+                        return { ok: false, reason: 'budget' };
+                    return persistImage(image);
+                });
             });
         }
+        var imagesRequest = null;
+        /**
+         * Open the image database on first use instead of at plugin boot. Records
+         * can be tens of megabytes, and most Sessions never open the notes surface,
+         * so this work belongs to the panel mount rather than to `apply()`.
+         */
+        function ensureImages() {
+            if (imagesRequest === null)
+                imagesRequest = loadImages();
+            return imagesRequest;
+        }
         function loadImages() {
             return openImageDb().then(function (db) {
                 imageDb = db;
@@ -1524,7 +1543,7 @@ window.__ModuleLoader__.load({
             notes = [];
         }
         emit();
-        loadImages();
+        // Images hydrate on first panel/drawer mount (see ensureImages), not here.
         return {
             subscribe: function (listener) {
                 listeners.add(listener);
@@ -1729,6 +1748,7 @@ window.__ModuleLoader__.load({
                     write();
             },
             addImage: addImage,
+            ensureImages: ensureImages,
             collectOrphans: collectOrphans,
             limits: { maxNotes: MAX_NOTES, maxTitle: MAX_TITLE, maxBody: MAX_BODY, maxImages: MAX_IMAGES }
         };
@@ -3293,6 +3313,11 @@ window.__ModuleLoader__.load({
         var menuReturnFocusRef = React.useRef(null);
         var openRequest = props.openRequest === undefined ? nullOpenRequest : props.openRequest;
         var requestedNoteId = useSyncExternalStore(openRequest.subscribe, openRequest.getSnapshot, openRequest.getSnapshot);
+        // Inline images live in IndexedDB and can be large. Hydrate them when this
+        // surface mounts (panel tab or pre-Session drawer), not at plugin boot.
+        React.useEffect(function () {
+            notes.ensureImages();
+        }, [notes]);
         // A memo created from the chat header asks to be opened here. The panel can
         // mount after the request was filed, so the store is read on mount as well;
         // the request is consumed exactly once.
@@ -5116,17 +5141,65 @@ window.__ModuleLoader__.load({
             return null;
         return h(NotesChatMemoButton, props);
     }
+    function chatVisibleNodes(chat) {
+        var list = [];
+        if (chat === null || chat === undefined)
+            return list;
+        var order = Array.isArray(chat.order) ? chat.order : [];
+        var nodes = chat.nodes;
+        if (nodes === null || nodes === undefined || typeof nodes.get !== 'function')
+            return list;
+        for (var index = 0; index < order.length; index += 1) {
+            var node = nodes.get(order[index]);
+            if (node !== null && node !== undefined)
+                list.push(node);
+        }
+        return list;
+    }
+    /**
+     * Menu body for "Save chat as memo". The chat subscription lives here so it
+     * exists only while the menu is open; the closed header button subscribes to
+     * nothing and therefore never re-renders when the conversation changes.
+     */
+    function ChatMemoMenu(props) {
+        var t = props.t;
+        var chat = props.useChat(function (snapshot) {
+            return snapshot;
+        });
+        var labels = {
+            you: t('chat.you'),
+            assistant: t('chat.assistant'),
+            fallbackTitle: t('chat.fallbackTitle')
+        };
+        function pick(mode) {
+            props.onPick(mode, chatMemoDraft(chatVisibleNodes(chat), labels, mode));
+        }
+        var menuStyle = props.anchor === null ? undefined : { left: props.anchor.left + 'px', top: props.anchor.top + 'px' };
+        return h('div', {
+            className: 'dsm-chat-memo-menu',
+            role: 'menu',
+            'aria-label': t('chat.menu.label'),
+            style: menuStyle
+        }, h('button', {
+            type: 'button',
+            role: 'menuitem',
+            className: 'dsm-chat-memo-item',
+            onClick: function () {
+                pick('chat');
+            }
+        }, h('span', null, t('chat.menu.chat')), h('span', { className: 'dsm-chat-memo-note' }, t('chat.menu.chatNote'))), h('button', {
+            type: 'button',
+            role: 'menuitem',
+            className: 'dsm-chat-memo-item',
+            onClick: function () {
+                pick('prompts');
+            }
+        }, h('span', null, t('chat.menu.prompts')), h('span', { className: 'dsm-chat-memo-note' }, t('chat.menu.promptsNote'))));
+    }
     function NotesChatMemoButton(props) {
         var t = translateFor(props);
         var notes = props.notes;
         var openRequest = props.openRequest;
-        var useChat = props.useChat;
-        // Subscribe to the whole (identity-stable) snapshot; the transcript is
-        // reduced only when the user picks a menu item, so this never allocates per
-        // render and stays a safe useSyncExternalStore consumer.
-        var chat = useChat(function (snapshot) {
-            return snapshot;
-        });
         var feedbackState = React.useState('');
         var feedback = feedbackState[0];
         var setFeedback = feedbackState[1];
@@ -5178,21 +5251,6 @@ window.__ModuleLoader__.load({
                 window.removeEventListener('scroll', close, true);
             };
         }, [menuOpen]);
-        function visibleNodes() {
-            var list = [];
-            if (chat === null || chat === undefined)
-                return list;
-            var order = Array.isArray(chat.order) ? chat.order : [];
-            var nodes = chat.nodes;
-            if (nodes === null || nodes === undefined || typeof nodes.get !== 'function')
-                return list;
-            for (var index = 0; index < order.length; index += 1) {
-                var node = nodes.get(order[index]);
-                if (node !== null && node !== undefined)
-                    list.push(node);
-            }
-            return list;
-        }
         function openMenu() {
             var button = buttonRef.current;
             if (button !== null && typeof button.getBoundingClientRect === 'function') {
@@ -5204,13 +5262,8 @@ window.__ModuleLoader__.load({
             }
             setMenuOpen(true);
         }
-        function save(mode) {
+        function take(mode, draft) {
             setMenuOpen(false);
-            var draft = chatMemoDraft(visibleNodes(), {
-                you: t('chat.you'),
-                assistant: t('chat.assistant'),
-                fallbackTitle: t('chat.fallbackTitle')
-            }, mode);
             if (draft === null) {
                 setFeedback(mode === 'prompts' ? 'empty-prompts' : 'empty');
                 return;
@@ -5238,7 +5291,6 @@ window.__ModuleLoader__.load({
                     : feedback === 'empty'
                         ? t('chat.empty')
                         : t('chat.create');
-        var menuStyle = anchor === null ? undefined : { left: anchor.left + 'px', top: anchor.top + 'px' };
         return h('div', { className: 'dsm-chat-memo', ref: rootRef }, h('button', {
             type: 'button',
             className: 'dsm-toggle',
@@ -5257,26 +5309,12 @@ window.__ModuleLoader__.load({
                     openMenu();
             }
         }, saved ? h(IconCheck, { size: 16 }) : h(IconChatMemo, { size: 16 })), menuOpen
-            ? h('div', {
-                className: 'dsm-chat-memo-menu',
-                role: 'menu',
-                'aria-label': t('chat.menu.label'),
-                style: menuStyle
-            }, h('button', {
-                type: 'button',
-                role: 'menuitem',
-                className: 'dsm-chat-memo-item',
-                onClick: function () {
-                    save('chat');
-                }
-            }, h('span', null, t('chat.menu.chat')), h('span', { className: 'dsm-chat-memo-note' }, t('chat.menu.chatNote'))), h('button', {
-                type: 'button',
-                role: 'menuitem',
-                className: 'dsm-chat-memo-item',
-                onClick: function () {
-                    save('prompts');
-                }
-            }, h('span', null, t('chat.menu.prompts')), h('span', { className: 'dsm-chat-memo-note' }, t('chat.menu.promptsNote'))))
+            ? h(ChatMemoMenu, {
+                t: t,
+                useChat: props.useChat,
+                anchor: anchor,
+                onPick: take
+            })
             : null, h('span', { className: 'dsm-sr-only', role: 'status', 'aria-live': 'polite' }, saved ? t('chat.saved') : ''));
     }
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-side-memo",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Toggleable Side Memo notes panel for DeepSeek Harness: labels/tags, resizable inline images, favorites pinned to the top, quick copy, drag a memo into the chat box to paste it, save a conversation or a single prompt as a memo, right-click memo actions, and Excel (.xlsx) import/export.",
   "keywords": [
     "dsh",