@restregular/dsh-notepad 0.3.1 → 0.5.0

package/client.js

@@ -37,7 +37,7 @@ window.__ModuleLoader__.load({
   factory: (require) => {
     const React = require('react');
     const h = React.createElement;
-    const { useState, useEffect, useRef } = React;
+    const { useState, useEffect, useLayoutEffect, useRef } = React;
 
     const NS = 'dsh-notepad';
     const API = '/dsh-notepad/api';
@@ -50,8 +50,14 @@ window.__ModuleLoader__.load({
     const SAVE_DELAY = 500;
     const MAX_SEGMENTS = 200;
     const MAX_SEGMENT_CHARS = 160000;
+    const MAX_TITLE_CHARS = 200;
     const MAX_IMAGES = 20;
     const MAX_IMAGE_BYTES = 20 * 1024 * 1024;
+    const MAX_OPTIMIZE_CHARS = 60000;
+    const SIDEBAR_REFRESH_MS = 20000;
+    const IMAGE_DELETE_DELAY = 5000;
+    const OPTIMIZE_CACHE_LIMIT = 100;
+    const EDGE_GAP = 8;
     const IMAGE_MIME = {
       'image/png': 'png',
       'image/jpeg': 'jpg',
@@ -68,6 +74,9 @@ window.__ModuleLoader__.load({
         editor: '分段内容',
         placeholder: '记录开发中遇到的问题，或下一阶段要做的事……',
         segmentPlaceholder: '新分段…',
+        titlePlaceholder: '分段标题（可选）',
+        segmentTitle: '分段标题',
+        indexHint: '点击选择此段 · 拖动可排序',
         loading: '读取中…',
         empty: '还没有内容',
         unsaved: '未保存',
@@ -102,6 +111,25 @@ window.__ModuleLoader__.load({
         selectHint: '勾选分段可批量操作',
         selected: '已选 {n} 段',
         selectSegment: '选择此段',
+        merge: '合并分段',
+        mergeSelected: '合并选中的 {n} 段',
+        mergeHint: '至少选择 2 段才能合并',
+        mergedToast: '已合并 {n} 段',
+        optimizeSegment: 'AI 优化此段',
+        optimizeSelected: 'AI 优化选中的 {n} 段',
+        optimizeSelectHint: '勾选分段后可批量优化',
+        optimizeAllProgress: 'AI 优化中 {done}/{total}',
+        optimizing: '优化中…',
+        undoOptimize: '撤销优化',
+        optimizedToast: '已优化此段',
+        optimizedCount: '已优化 {n} 段',
+        optimizeUndone: '已撤销优化',
+        optimizeEmpty: '没有可优化的文字',
+        optimizeTooLong: '内容太长，无法优化',
+        optimizeUnavailable: 'AI 服务不可用',
+        optimizeFailed: '优化失败',
+        dragSegment: '拖动排序',
+        unsent: '{n} 条未发送',
         archive: '归档',
         archiveSegment: '归档此段',
         archiveSelected: '归档选中的 {n} 段',
@@ -132,9 +160,10 @@ window.__ModuleLoader__.load({
         show: '显示记事本（Ctrl+Shift+N）',
         chars: '{n} 字符',
         segments: '{n} 段',
-        hint: 'Enter 新建分段 · Shift+Enter 换行 · Ctrl+Enter 插入 · 支持粘贴图片',
+        hint: 'Enter 新建分段 · Shift+Enter 换行 · Ctrl+Enter 插入 · Ctrl+Shift+0 复位浮窗 · 支持粘贴图片',
         workspace: '工作区',
         resize: '拖动调整大小',
+        uiReset: '已复位浮窗位置和尺寸',
         addImage: '添加图片',
         removeImage: '移除图片',
         openImage: '打开图片',
@@ -153,6 +182,9 @@ window.__ModuleLoader__.load({
         editor: 'Segment content',
         placeholder: 'Jot down problems, or what to build next…',
         segmentPlaceholder: 'New segment…',
+        titlePlaceholder: 'Segment title (optional)',
+        segmentTitle: 'Segment title',
+        indexHint: 'Click to select · drag to reorder',
         loading: 'Loading…',
         empty: 'Nothing here yet',
         unsaved: 'Unsaved',
@@ -187,6 +219,25 @@ window.__ModuleLoader__.load({
         selectHint: 'Check segments to batch',
         selected: '{n} selected',
         selectSegment: 'Select this segment',
+        merge: 'Merge segments',
+        mergeSelected: 'Merge {n} selected',
+        mergeHint: 'Select at least 2 segments to merge',
+        mergedToast: 'Merged {n} segments',
+        optimizeSegment: 'Improve this segment with AI',
+        optimizeSelected: 'Improve {n} selected with AI',
+        optimizeSelectHint: 'Select segments to improve',
+        optimizeAllProgress: 'Improving {done}/{total}',
+        optimizing: 'Improving…',
+        undoOptimize: 'Undo improvement',
+        optimizedToast: 'Segment improved',
+        optimizedCount: 'Improved {n} segments',
+        optimizeUndone: 'Improvement undone',
+        optimizeEmpty: 'Nothing to improve',
+        optimizeTooLong: 'Too long to improve',
+        optimizeUnavailable: 'AI service unavailable',
+        optimizeFailed: 'Improve failed',
+        dragSegment: 'Drag to reorder',
+        unsent: '{n} unsent',
         archive: 'Archive',
         archiveSegment: 'Archive this segment',
         archiveSelected: 'Archive {n} selected',
@@ -217,9 +268,10 @@ window.__ModuleLoader__.load({
         show: 'Show notepad (Ctrl+Shift+N)',
         chars: '{n} chars',
         segments: '{n} segments',
-        hint: 'Enter new segment · Shift+Enter newline · Ctrl+Enter insert · Paste images',
+        hint: 'Enter new segment · Shift+Enter newline · Ctrl+Enter insert · Ctrl+Shift+0 reset window · Paste images',
         workspace: 'Workspace',
         resize: 'Drag to resize',
+        uiReset: 'Window position and size reset',
         addImage: 'Add image',
         removeImage: 'Remove image',
         openImage: 'Open image',
@@ -488,6 +540,60 @@ window.__ModuleLoader__.load({
       );
     }
 
+    /** Four-point sparkle: an AI improvement action. */
+    function SparkleIcon({ size = 16 }) {
+      return h(
+        Svg,
+        { size, viewBox: '0 0 16 16' },
+        h('path', {
+          d: 'M8 1.8c.5 2.7 1.5 3.7 4.2 4.2-2.7.5-3.7 1.5-4.2 4.2-.5-2.7-1.5-3.7-4.2-4.2C6.5 5.5 7.5 4.5 8 1.8Z',
+          stroke: 'currentColor', strokeWidth: 1.2,
+          strokeLinecap: 'round', strokeLinejoin: 'round',
+        }),
+        h('path', {
+          d: 'M12.4 9.6c.3 1.5.8 2 2.3 2.3-1.5.3-2 .8-2.3 2.3-.3-1.5-.8-2-2.3-2.3 1.5-.3 2-.8 2.3-2.3Z',
+          stroke: 'currentColor', strokeWidth: 1.1,
+          strokeLinecap: 'round', strokeLinejoin: 'round',
+        }),
+      );
+    }
+
+    /** Curved arrow: undo the last AI improvement. */
+    function UndoIcon({ size = 16 }) {
+      return h(
+        Svg,
+        { size, viewBox: '0 0 16 16' },
+        h('path', {
+          d: 'M5.4 4.2 2.8 6.8l2.6 2.6',
+          stroke: 'currentColor', strokeWidth: 1.35,
+          strokeLinecap: 'round', strokeLinejoin: 'round',
+        }),
+        h('path', {
+          d: 'M3 6.8h5.3c2.7 0 4.9 2.2 4.9 4.9',
+          stroke: 'currentColor', strokeWidth: 1.35,
+          strokeLinecap: 'round', strokeLinejoin: 'round',
+        }),
+      );
+    }
+
+    /** Two arrows converging: merge selected segments into one. */
+    function MergeIcon({ size = 16 }) {
+      return h(
+        Svg,
+        { size, viewBox: '0 0 16 16' },
+        h('path', {
+          d: 'M3.2 3.4v2.2c0 1.4 1.1 2.5 2.5 2.5h4.6c1.4 0 2.5 1.1 2.5 2.5v2.2',
+          stroke: 'currentColor', strokeWidth: 1.3,
+          strokeLinecap: 'round', strokeLinejoin: 'round',
+        }),
+        h('path', {
+          d: 'M3.2 12.6v-2.2c0-1.4 1.1-2.5 2.5-2.5h4.6c1.4 0 2.5-1.1 2.5-2.5V3.4',
+          stroke: 'currentColor', strokeWidth: 1.3,
+          strokeLinecap: 'round', strokeLinejoin: 'round',
+        }),
+      );
+    }
+
     /** Arrow towards the bottom-right corner: minimize to the corner icon. */
     function MinimizeIcon({ size = 16 }) {
       return h(
@@ -530,10 +636,10 @@ window.__ModuleLoader__.load({
 .dsh-np-btn[data-accent=true]{background:var(--np-accent);color:var(--np-accent-fg)}
 .dsh-np-btn[data-accent=true]:hover:not(:disabled){background:color-mix(in srgb,var(--np-accent) 88%,#000);color:var(--np-accent-fg)}
 .dsh-np-btn:disabled{opacity:.38;cursor:default;background:transparent;color:var(--dsw-alias-label-tertiary,#6b7280)}
-.dsh-np-btn:focus-visible,.dsh-np-segbtn:focus-visible,.dsh-np-link:focus-visible,.dsh-np-empty-add:focus-visible,.dsh-np-toast-action:focus-visible,.dsh-np-selectall input:focus-visible,.dsh-np-check input:focus-visible,.dsh-np-restore:focus-visible,.dsh-np-img-open:focus-visible,.dsh-np-img-remove:focus-visible{outline:2px solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary,#4176e6));outline-offset:-2px}
+.dsh-np-btn:focus-visible,.dsh-np-segbtn:focus-visible,.dsh-np-link:focus-visible,.dsh-np-empty-add:focus-visible,.dsh-np-toast-action:focus-visible,.dsh-np-selectall input:focus-visible,.dsh-np-check input:focus-visible,.dsh-np-title-add:focus-visible,.dsh-np-restore:focus-visible,.dsh-np-img-open:focus-visible,.dsh-np-img-remove:focus-visible{outline:2px solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary,#4176e6));outline-offset:-2px}
 .dsh-np-body{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;padding:8px 10px 0;opacity:1;transition:opacity .16s ease,visibility 0s linear 0s}
 .dsh-np-card[data-minimized=true] .dsh-np-body{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility 0s linear .16s}
-.dsh-np-tools{display:flex;align-items:center;gap:4px;flex:none;padding:0 2px 7px;border-bottom:1px solid var(--dsw-alias-border-l1,rgb(15 23 42/.08))}
+.dsh-np-tools{display:flex;align-items:center;flex-wrap:wrap;gap:4px;flex:none;padding:0 2px 7px;border-bottom:1px solid var(--dsw-alias-border-l1,rgb(15 23 42/.08))}
 .dsh-np-selectall{display:inline-flex;align-items:center;gap:6px;min-width:0;cursor:pointer;color:var(--dsw-alias-label-tertiary,#6b7280);font-size:11px;white-space:nowrap}
 .dsh-np-selectall input{width:14px;height:14px;margin:0;accent-color:var(--np-accent);cursor:pointer;flex:none}
 .dsh-np-selectall input:disabled{cursor:default;opacity:.45}
@@ -543,12 +649,24 @@ window.__ModuleLoader__.load({
 .dsh-np-seg[data-selected=true]{border-color:var(--np-accent);background:color-mix(in srgb,var(--np-accent) 6%,var(--np-surface-2));box-shadow:0 0 0 1px var(--np-accent) inset}
 .dsh-np-seg[data-archived=true]{border-style:dashed;background:transparent;opacity:.82;animation:none}
 .dsh-np-seg-head{display:flex;align-items:center;gap:3px;flex:none;min-height:30px;padding:3px 5px 0 7px;box-sizing:border-box}
+.dsh-np-seg[data-reorder-drag=true]{opacity:.45}
+.dsh-np-seg[data-drop-before=true]{box-shadow:0 -2px 0 0 var(--np-accent)}
+.dsh-np-seg[data-drop-after=true]{box-shadow:0 2px 0 0 var(--np-accent)}
 .dsh-np-check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;cursor:pointer}
 .dsh-np-check input{width:14px;height:14px;margin:0;accent-color:var(--np-accent);cursor:pointer}
-.dsh-np-index{flex:none;color:var(--dsw-alias-label-caption,#9aa3b2);font-size:10px;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums}
+.dsh-np-index{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 2px;border:0;border-radius:5px;background:transparent;color:var(--dsw-alias-label-caption,#9aa3b2);font:inherit;font-size:10px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums;cursor:pointer;user-select:none}
+.dsh-np-index:hover{background:var(--dsw-alias-interactive-bg-hover,rgb(38 49 72/.06));color:var(--dsw-alias-label-primary,#1f2430)}
+.dsh-np-index[aria-pressed=true]{background:color-mix(in srgb,var(--np-accent) 14%,transparent);color:var(--np-accent)}
+.dsh-np-title-input{flex:1 1 auto;min-width:0;width:0;height:20px;padding:0 4px;border:0;border-radius:5px;background:transparent;color:var(--dsw-alias-label-secondary,#4b5563);font:inherit;font-size:11px;font-weight:600;line-height:20px;outline:0}
+.dsh-np-title-input::placeholder{color:var(--dsw-alias-label-caption,#9aa3b2);font-weight:400}
+.dsh-np-title-input:hover{background:var(--dsw-alias-interactive-bg-hover,rgb(38 49 72/.06))}
+.dsh-np-title-input:focus{background:var(--np-surface);box-shadow:0 0 0 1px var(--np-accent) inset;color:var(--dsw-alias-label-primary,#1f2430)}
+.dsh-np-title-add{flex:1 1 auto;min-width:0;width:0;height:20px;padding:0 4px;border:0;border-radius:5px;background:transparent;color:var(--dsw-alias-label-caption,#9aa3b2);font:inherit;font-size:11px;font-weight:400;line-height:20px;text-align:left;cursor:text;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.75}
+.dsh-np-seg-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-secondary,#4b5563);font-size:11px;font-weight:600}
 .dsh-np-archived-chip{flex:none;padding:0 6px;border-radius:5px;background:var(--dsw-alias-interactive-bg-hover,rgb(38 49 72/.06));color:var(--dsw-alias-label-tertiary,#6b7280);font-size:10px;line-height:16px}
 .dsh-np-segbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--dsw-alias-label-tertiary,#6b7280);cursor:pointer;transition:background .12s,color .12s,opacity .12s;opacity:.8}
 .dsh-np-segbtn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover,rgb(38 49 72/.06));color:var(--dsw-alias-label-primary,#1f2430);opacity:1}
+.dsh-np-segbtn[data-ai=true]{color:var(--np-accent);opacity:1}
 .dsh-np-segbtn[data-danger=true]:hover:not(:disabled){color:var(--dsw-alias-state-error-primary,#e25555);background:var(--dsw-alias-interactive-bg-hover-danger,rgb(236 19 19/.05))}
 .dsh-np-segbtn:disabled{opacity:.3;cursor:default}
 .dsh-np-seg-text{display:block;width:100%;box-sizing:border-box;padding:2px 10px 8px;border:0;outline:0;resize:none;background:transparent;color:inherit;font-family:${FONT_STACK};font-size:13px;line-height:1.6;min-height:26px;max-height:240px;overflow-y:auto;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
@@ -566,6 +684,7 @@ window.__ModuleLoader__.load({
 .dsh-np-img-remove{display:inline-flex;align-items:center;justify-content:center;flex:none;width:17px;height:17px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--dsw-alias-label-caption,#9aa3b2);cursor:pointer}
 .dsh-np-img-remove:hover{background:var(--dsw-alias-interactive-bg-hover,rgb(38 49 72/.06));color:var(--dsw-alias-state-error-primary,#e25555)}
 .dsh-np-img-spinner{flex:none;width:14px;height:14px;border:2px solid color-mix(in srgb,var(--np-accent) 30%,transparent);border-top-color:var(--np-accent);border-radius:50%;animation:dsh-np-spin .8s linear infinite}
+.dsh-np-mini-spinner{flex:none;width:12px;height:12px;border:1.8px solid color-mix(in srgb,var(--np-accent) 30%,transparent);border-top-color:var(--np-accent);border-radius:50%;animation:dsh-np-spin .8s linear infinite}
 .dsh-np-seg-archived-text{padding:2px 10px 9px;color:var(--dsw-alias-label-secondary,#4b5563);font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
 .dsh-np-seg[data-archived=true] .dsh-np-medias{padding:0 10px 8px}
 .dsh-np-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;flex:none;padding:22px 12px;text-align:center;color:var(--dsw-alias-label-tertiary,#6b7280);font-size:12px}
@@ -597,6 +716,9 @@ window.__ModuleLoader__.load({
 .dsh-np-restore{position:fixed;right:16px;bottom:16px;z-index:30;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--dsw-alias-border-l2,rgb(15 23 42/.12));border-radius:10px;background:var(--dsw-alias-bg-layer-2,#fff);color:var(--dsw-alias-label-secondary,#4b5563);box-shadow:var(--dsw-elevation-lv2,0 8px 24px rgb(15 23 42/.16));cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px) scale(.9);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
 .dsh-np-restore[data-visible=true]{opacity:.9;visibility:visible;pointer-events:auto;transform:none;transition:opacity .18s ease,transform .18s ease,visibility 0s linear 0s}
 .dsh-np-restore[data-visible=true]:hover{opacity:1;transform:translateY(-1px)}
+.dsh-np-restore-badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:9px;background:var(--dsw-alias-state-business-primary,#4176e6);color:#fff;font-size:9.5px;font-weight:700;line-height:16px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 1.5px var(--dsw-specific-sidebar-fill,var(--dsw-alias-bg-layer-1,#fff))}
+[data-row-key^="workspace:"][data-np-unsent]{position:relative}
+[data-row-key^="workspace:"][data-np-unsent]::after{content:attr(data-np-unsent);position:absolute;top:-4px;left:1px;z-index:2;min-width:15px;height:15px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:var(--dsw-alias-state-business-primary,#4176e6);color:#fff;font-size:9.5px;font-weight:700;line-height:15px;text-align:center;font-variant-numeric:tabular-nums;pointer-events:none;box-shadow:0 0 0 1.5px var(--dsw-specific-sidebar-fill,var(--dsw-alias-bg-layer-1,#fff))}
 @keyframes dsh-np-pulse{0%,100%{opacity:1}50%{opacity:.35}}
 @keyframes dsh-np-rise{from{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translate(-50%,0)}}
 @keyframes dsh-np-item-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@@ -605,7 +727,7 @@ body[data-ds-dark-theme] .dsh-np-card{--np-accent-fg:#0f1115;box-shadow:0 18px 4
 body[data-ds-dark-theme] .dsh-np-seg[data-selected=true]{background:color-mix(in srgb,var(--np-accent) 14%,var(--dsw-alias-bg-layer-2,#2c2c2e))}
 body[data-ds-dark-theme] .dsh-np-btn[data-accent=true]:hover:not(:disabled){background:color-mix(in srgb,var(--np-accent) 84%,#fff)}
 body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
-@media (prefers-reduced-motion:reduce){.dsh-np-card,.dsh-np-body,.dsh-np-archive,.dsh-np-restore,.dsh-np-seg,.dsh-np-toast{transition:none!important;animation:none!important}.dsh-np-dot[data-state=saving]{animation:none}.dsh-np-img-spinner{animation:none}}`;
+@media (prefers-reduced-motion:reduce){.dsh-np-card,.dsh-np-body,.dsh-np-archive,.dsh-np-restore,.dsh-np-seg,.dsh-np-toast{transition:none!important;animation:none!important}.dsh-np-dot[data-state=saving]{animation:none}.dsh-np-img-spinner,.dsh-np-mini-spinner{animation:none}}`;
 
     // ------------------------------------------------------------------
     // Helpers
@@ -625,14 +747,38 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
       return `seg-${Date.now().toString(36)}-${segmentSequence.toString(36)}`;
     }
 
-    function newSegment(text) {
-      return { id: newSegmentId(), text, images: [], archived: false, archivedAt: null };
+    function nowIso() {
+      try {
+        return new Date().toISOString();
+      } catch {
+        return '';
+      }
+    }
+
+    function newSegment(text, options = {}) {
+      return {
+        id: newSegmentId(),
+        text,
+        title: typeof options.title === 'string' ? options.title.slice(0, MAX_TITLE_CHARS) : '',
+        createdAt: typeof options.createdAt === 'string' && options.createdAt !== ''
+          ? options.createdAt
+          : nowIso(),
+        images: [],
+        archived: false,
+        archivedAt: null,
+      };
     }
 
     function serializeSegments(segments) {
       return segments.map((segment) => ({
         id: segment.id,
         text: segment.text,
+        ...(typeof segment.title === 'string' && segment.title !== ''
+          ? { title: segment.title }
+          : {}),
+        ...(typeof segment.createdAt === 'string' && segment.createdAt !== ''
+          ? { createdAt: segment.createdAt }
+          : {}),
         ...(Array.isArray(segment.images) && segment.images.length > 0
           ? { images: segment.images.map((image) => ({ path: image.path, name: image.name })) }
           : {}),
@@ -654,6 +800,8 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
           out.push({
             id,
             text: item.text,
+            title: typeof item.title === 'string' ? item.title.slice(0, MAX_TITLE_CHARS) : '',
+            createdAt: typeof item.createdAt === 'string' && item.createdAt !== '' ? item.createdAt : null,
             images: normalizeImages(item.images),
             archived,
             archivedAt: archived && typeof item.archivedAt === 'string' ? item.archivedAt : null,
@@ -737,6 +885,46 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
         .join('\n\n');
     }
 
+    /** Whether a segment still counts as unsent work (active + has content). */
+    function isUnsent(segment) {
+      if (segment === null || segment === undefined || segment.archived === true) return false;
+      if (typeof segment.text === 'string' && segment.text.trim() !== '') return true;
+      return Array.isArray(segment.images) && segment.images.length > 0;
+    }
+
+    function countUnsent(segments) {
+      let count = 0;
+      for (const segment of segments) {
+        if (isUnsent(segment)) count += 1;
+      }
+      return count;
+    }
+
+    /** Whether a whole server payload predates per-segment creation times. */
+    function isLegacyPayload(data) {
+      const segments = Array.isArray(data?.segments) ? data.segments : [];
+      return segments.length > 0 && segments.every((segment) =>
+        segment !== null && typeof segment === 'object'
+        && (typeof segment.createdAt !== 'string' || segment.createdAt === ''));
+    }
+
+    /**
+     * Adopt server content without moving cards the user is looking at.
+     * Known ids keep the local order; cards created elsewhere land on top.
+     */
+    function mergeServerOrder(current, incoming) {
+      const byId = new Map();
+      for (const segment of incoming) byId.set(segment.id, segment);
+      const kept = [];
+      for (const segment of current) {
+        const next = byId.get(segment.id);
+        if (next !== undefined) kept.push(next);
+      }
+      const known = new Set(kept.map((segment) => segment.id));
+      const added = incoming.filter((segment) => !known.has(segment.id));
+      return [...added, ...kept];
+    }
+
     function isAbsolutePath(value) {
       const text = String(value ?? '');
       return text.startsWith('/') || /^[A-Za-z]:\//u.test(text) || text.startsWith('//');
@@ -873,6 +1061,43 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
       return parts.length === 0 ? String(root ?? '') : parts[parts.length - 1];
     }
 
+    /**
+     * Height of the chrome the host draws over the page (the Windows title bar
+     * with maximize / minimize / close, or the macOS traffic lights). The
+     * floating card must never move above that strip. The host exposes it as a
+     * CSS variable on <html>; standalone browsers have none, so this is 0.
+     * @returns {number}
+     */
+    function hostChromeTop() {
+      try {
+        const root = typeof document !== 'undefined' ? document.documentElement : null;
+        if (root === null || root === undefined) return 0;
+        const hasAttribute = (name) => typeof root.hasAttribute === 'function' && root.hasAttribute(name);
+        const readVar = (name) => {
+          try {
+            if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') return NaN;
+            const style = window.getComputedStyle(root);
+            return Number.parseFloat(style?.getPropertyValue(name) ?? '');
+          } catch {
+            return NaN;
+          }
+        };
+        // `--dsh-frame-chrome-top` is 0 while the host is in fullscreen.
+        const chrome = readVar('--dsh-frame-chrome-top');
+        if (Number.isFinite(chrome)) return Math.max(0, chrome);
+        const clearance = readVar('--dsh-frame-top-clearance');
+        if (Number.isFinite(clearance) && clearance > 0) return clearance;
+        if (hasAttribute('data-windows-titlebar')) {
+          const titlebar = readVar('--dsh-windows-titlebar-height');
+          return Number.isFinite(titlebar) && titlebar > 0 ? titlebar : 32;
+        }
+        const platform = typeof root.getAttribute === 'function' ? root.getAttribute('data-platform') : '';
+        return platform === 'darwin' ? 48 : 0;
+      } catch {
+        return 0;
+      }
+    }
+
     function readStoredUi() {
       const base = {
         x: null,
@@ -905,17 +1130,18 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
     function clampUi(ui) {
       const vw = (typeof window !== 'undefined' && window.innerWidth) || 1280;
       const vh = (typeof window !== 'undefined' && window.innerHeight) || 800;
-      const widthLimit = Math.max(240, vw - 16);
-      const heightLimit = Math.max(180, vh - 16);
+      const minTop = hostChromeTop() + EDGE_GAP;
+      const widthLimit = Math.max(240, vw - EDGE_GAP * 2);
+      const heightLimit = Math.max(180, vh - minTop - EDGE_GAP);
       const width = Math.min(Math.max(MIN_W, Number(ui.width) || DEFAULT_W), widthLimit);
       const height = Math.min(Math.max(MIN_H, Number(ui.height) || DEFAULT_H), heightLimit);
       const displayHeight = ui.minimized ? HEAD_H : height;
       const x = ui.x === null || ui.x === undefined
-        ? vw - width - 24
-        : Math.min(Math.max(8, ui.x), Math.max(8, vw - width - 8));
+        ? Math.max(EDGE_GAP, vw - width - 24)
+        : Math.min(Math.max(EDGE_GAP, ui.x), Math.max(EDGE_GAP, vw - width - EDGE_GAP));
       const y = ui.y === null || ui.y === undefined
-        ? vh - displayHeight - 24
-        : Math.min(Math.max(8, ui.y), Math.max(8, vh - displayHeight - 8));
+        ? Math.max(minTop, vh - displayHeight - 24)
+        : Math.min(Math.max(minTop, ui.y), Math.max(minTop, vh - displayHeight - EDGE_GAP));
       return { ...ui, x, y, width, height };
     }
 
@@ -950,6 +1176,32 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
       return readResponse(response);
     }
 
+    async function optimizeNoteText(root, sessionId, text, title) {
+      const response = await fetch(`${API}/optimize`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ root, sessionId, text, title }),
+      });
+      return readResponse(response);
+    }
+
+    async function removeStoredImage(root, sessionId, pathValue) {
+      const response = await fetch(`${API}/image`, {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ root, sessionId, path: pathValue }),
+      });
+      return readResponse(response);
+    }
+
+    async function fetchUnsentCounts(sessionId) {
+      const response = await fetch(`${API}/unsent?sessionId=${encodeURIComponent(sessionId)}`, {
+        method: 'GET',
+        cache: 'no-store',
+      });
+      return readResponse(response);
+    }
+
     async function copyText(value) {
       try {
         if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
@@ -1016,11 +1268,20 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
       const [error, setError] = useState('');
       const [savedAt, setSavedAt] = useState(null);
       const [toast, setToast] = useState(null);
-      const [ui, setUi] = useState(readStoredUi);
+      const [ui, setUi] = useState(() => clampUi(readStoredUi()));
       const [sending, setSending] = useState(false);
       const [resizing, setResizing] = useState(false);
       const [uploading, setUploading] = useState({});
       const [dragSegment, setDragSegment] = useState('');
+      const [reorderDrag, setReorderDrag] = useState('');
+      const [reorderOver, setReorderOver] = useState(null);
+      const [optimizing, setOptimizing] = useState(() => new Set());
+      const [optimizeBatch, setOptimizeBatch] = useState(null);
+      const [segmentUndo, setSegmentUndo] = useState(() => new Map());
+      const [batchUndo, setBatchUndo] = useState(null);
+      const [titleEditing, setTitleEditing] = useState('');
+      const [wsCounts, setWsCounts] = useState({});
+      const [currentWsId, setCurrentWsId] = useState('');
 
       const bindingRef = useRef(null);
       const rootSessionRef = useRef('');
@@ -1044,7 +1305,16 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
       const fileInputRefs = useRef(new Map());
       const listRef = useRef(null);
       const pendingFocusRef = useRef(null);
+      const pendingScrollRef = useRef(null);
+      const refreshSeqRef = useRef(0);
       const undoRef = useRef(null);
+      const optimizingRef = useRef(new Set());
+      const optimizeBatchRef = useRef(false);
+      const optimizeCacheRef = useRef(new Map());
+      const batchUndoRef = useRef(null);
+      const reorderDragRef = useRef('');
+      const reorderOverRef = useRef(null);
+      const imageDeleteTimersRef = useRef(new Map());
 
       const setSelection = (next) => {
         selectedRef.current = next;
@@ -1063,6 +1333,17 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
         if (changed) setSelection(pruned);
       };
 
+      /** Keep the ref and the state in sync for the batch-optimize undo slot. */
+      const setBatchUndoState = (value) => {
+        batchUndoRef.current = value;
+        setBatchUndo(value);
+      };
+
+      /** Any local edit invalidates the "undo the last batch" offer. */
+      const invalidateBatchUndo = () => {
+        if (batchUndoRef.current !== null) setBatchUndoState(null);
+      };
+
       // Session + workspace -------------------------------------------------
       useEffect(() => {
         let disposed = false;
@@ -1182,6 +1463,7 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
       saveNowRef.current = saveNow;
 
       const commitSegments = (next, options = {}) => {
+        invalidateBatchUndo();
         segmentsRef.current = next;
         setSegments(next);
         pruneSelectionFor(next);
@@ -1200,6 +1482,10 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
           segmentsRef.current = [];
           setSegments([]);
           setSelection(new Set());
+          setSegmentUndo(new Map());
+          setBatchUndoState(null);
+          setTitleEditing('');
+          pendingScrollRef.current = null;
           setStatus('idle');
           setError('');
           return undefined;
@@ -1216,6 +1502,10 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
         segmentsRef.current = [];
         setSegments([]);
         setSelection(new Set());
+        setSegmentUndo(new Map());
+        setBatchUndoState(null);
+        setTitleEditing('');
+        pendingScrollRef.current = null;
         setStatus('loading');
         setError('');
         const load = () => {
@@ -1227,10 +1517,15 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
             .then((data) => {
               if (cancelled || rootRef.current !== root || mySeq !== loadSeqRef.current) return;
               let value = normalizeServerSegments(data);
+              // Notes written before 0.4 appended new cards at the bottom;
+              // reverse that legacy order once so the newest card leads.
+              if (isLegacyPayload(data)) value = value.slice().reverse();
               if (value.length === 0) value = [newSegment('')];
               segmentsRef.current = value;
               setSegments(value);
               setSelection(new Set());
+              setSegmentUndo(new Map());
+              setBatchUndoState(null);
               versionRef.current = typeof data.mtimeMs === 'number' ? data.mtimeMs : null;
               setSavedAt(typeof data.mtimeMs === 'number' ? data.mtimeMs : null);
               dirtyRef.current = false;
@@ -1251,6 +1546,91 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
         };
       }, [binding === null ? '' : binding.id, binding === null ? '' : binding.cwd]);
 
+      // Sidebar workspace badges --------------------------------------------
+      useEffect(() => {
+        if (binding === null) {
+          setCurrentWsId('');
+          setWsCounts({});
+          return undefined;
+        }
+        setCurrentWsId('');
+        let disposed = false;
+        const refresh = () => {
+          const sessionId = binding.id;
+          if (typeof sessionId !== 'string' || sessionId === '') return;
+          fetchUnsentCounts(sessionId)
+            .then((data) => {
+              if (disposed || bindingRef.current?.id !== sessionId) return;
+              const next = {};
+              let matched = '';
+              const target = normalizedCwd(binding.cwd);
+              for (const workspace of Array.isArray(data?.workspaces) ? data.workspaces : []) {
+                const id = typeof workspace?.id === 'string' ? workspace.id : '';
+                if (id === '') continue;
+                next[id] = Number.isFinite(workspace.count) ? Math.max(0, Math.floor(workspace.count)) : 0;
+                if (matched === '' && normalizedCwd(workspace.path) === target) matched = id;
+              }
+              setWsCounts(next);
+              if (matched !== '') setCurrentWsId(matched);
+            })
+            .catch(() => {});
+        };
+        refresh();
+        const timer = setInterval(refresh, SIDEBAR_REFRESH_MS);
+        const onFocus = () => refresh();
+        const onVisibility = () => {
+          if (typeof document !== 'undefined' && document.visibilityState === 'visible') refresh();
+        };
+        window.addEventListener('focus', onFocus);
+        if (typeof document !== 'undefined') document.addEventListener('visibilitychange', onVisibility);
+        return () => {
+          disposed = true;
+          clearInterval(timer);
+          window.removeEventListener('focus', onFocus);
+          if (typeof document !== 'undefined') document.removeEventListener('visibilitychange', onVisibility);
+        };
+      }, [binding === null ? '' : binding.id, binding === null ? '' : binding.cwd]);
+
+      const localUnsentCount = countUnsent(segments);
+
+      useEffect(() => {
+        if (currentWsId === '') return;
+        setWsCounts((previous) =>
+          (previous[currentWsId] === localUnsentCount
+            ? previous
+            : { ...previous, [currentWsId]: localUnsentCount }));
+      }, [currentWsId, localUnsentCount]);
+
+      useEffect(() => {
+        if (typeof document === 'undefined' || typeof document.querySelectorAll !== 'function') return undefined;
+        const apply = () => {
+          let rows;
+          try {
+            rows = document.querySelectorAll('[data-row-key^="workspace:"]');
+          } catch {
+            return;
+          }
+          for (const row of rows) {
+            const key = typeof row.getAttribute === 'function' ? String(row.getAttribute('data-row-key') ?? '') : '';
+            const id = key.startsWith('workspace:') ? key.slice('workspace:'.length) : '';
+            const count = id === '' ? 0 : (wsCounts[id] ?? 0);
+            if (count > 0) row.setAttribute('data-np-unsent', count > 99 ? '99+' : String(count));
+            else row.removeAttribute('data-np-unsent');
+          }
+        };
+        apply();
+        const Observer = typeof globalThis !== 'undefined' ? globalThis.MutationObserver : undefined;
+        if (typeof Observer !== 'function' || typeof document.body === 'undefined' || document.body === null) {
+          return () => apply();
+        }
+        const observer = new Observer(apply);
+        observer.observe(document.body, { childList: true, subtree: true });
+        return () => {
+          observer.disconnect();
+          apply();
+        };
+      }, [wsCounts]);
+
       // Focus a just-created or restored card ------------------------------
       useEffect(() => {
         const pending = pendingFocusRef.current;
@@ -1282,20 +1662,49 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
         autoGrow(element);
       }, [segments]);
 
+      // Restore a captured scroll offset right after a refresh commits ------
+      useLayoutEffect(() => {
+        const pending = pendingScrollRef.current;
+        if (pending === null || pending === undefined) return;
+        pendingScrollRef.current = null;
+        const list = listRef.current;
+        if (list === null || list === undefined) return;
+        try {
+          list.scrollTop = pending;
+        } catch {
+          /* A detached list cannot be scrolled. */
+        }
+      }, [segments]);
+
       // Keyboard ------------------------------------------------------------
       useEffect(() => {
         const onKeyDown = (event) => {
           const chord = event.ctrlKey || event.metaKey;
-          if (!chord || !event.shiftKey) return;
-          if (event.key !== 'N' && event.key !== 'n') return;
-          event.preventDefault();
-          setUi((previous) => clampUi({ ...previous, hidden: !previous.hidden }));
+          if (!chord || !event.shiftKey || event.altKey) return;
+          if (event.key === 'N' || event.key === 'n') {
+            event.preventDefault();
+            setUi((previous) => clampUi({ ...previous, hidden: !previous.hidden }));
+            return;
+          }
+          if (event.key === '0' || event.code === 'Digit0' || event.code === 'Numpad0') {
+            event.preventDefault();
+            setUi((previous) => clampUi({
+              ...previous,
+              x: null,
+              y: null,
+              width: DEFAULT_W,
+              height: DEFAULT_H,
+            }));
+            showToast(t('uiReset'));
+          }
         };
         window.addEventListener('keydown', onKeyDown, true);
         return () => {
           window.removeEventListener('keydown', onKeyDown, true);
           clearTimer();
           if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
+          for (const timer of imageDeleteTimersRef.current.values()) clearTimeout(timer);
+          imageDeleteTimersRef.current.clear();
         };
       }, []);
 
@@ -1330,20 +1739,41 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
           const active = typeof document !== 'undefined' ? document.activeElement : null;
           if (active !== null && active !== undefined && typeof active.closest === 'function'
             && active.closest('[data-dsh-notepad="true"]') !== null) return;
+          // Snapshot the scroll offset right before the refresh; the list may
+          // re-render (and jump) while the updated note is applied.
+          const list = listRef.current;
+          const scrollTop = list !== null && list !== undefined && Number.isFinite(list.scrollTop)
+            ? list.scrollTop
+            : null;
+          const mySeq = ++refreshSeqRef.current;
+          pendingScrollRef.current = scrollTop;
           fetchNote(root, sessionId)
             .then((data) => {
-              if (rootRef.current !== root || dirtyRef.current) return;
-              if (typeof data.mtimeMs === 'number' && data.mtimeMs === versionRef.current) return;
-              let value = normalizeServerSegments(data);
-              if (value.length === 0) value = [newSegment('')];
+              if (mySeq !== refreshSeqRef.current) return;
+              if (rootRef.current !== root || dirtyRef.current) {
+                pendingScrollRef.current = null;
+                return;
+              }
+              if (typeof data.mtimeMs === 'number' && data.mtimeMs === versionRef.current) {
+                pendingScrollRef.current = null;
+                return;
+              }
+              let incoming = normalizeServerSegments(data);
+              if (isLegacyPayload(data)) incoming = incoming.slice().reverse();
+              if (incoming.length === 0) incoming = [newSegment('')];
+              const value = mergeServerOrder(segmentsRef.current, incoming);
               segmentsRef.current = value;
               setSegments(value);
-              setSelection(new Set());
+              pruneSelectionFor(value);
+              setSegmentUndo(new Map());
+              setBatchUndoState(null);
               versionRef.current = typeof data.mtimeMs === 'number' ? data.mtimeMs : null;
               setSavedAt(typeof data.mtimeMs === 'number' ? data.mtimeMs : null);
               setStatus('saved');
             })
-            .catch(() => {});
+            .catch(() => {
+              if (mySeq === refreshSeqRef.current) pendingScrollRef.current = null;
+            });
         };
         const onVisibility = () => {
           if (typeof document !== 'undefined' && document.visibilityState === 'visible') refresh();
@@ -1362,9 +1792,31 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
 
       // Segment mutations ---------------------------------------------------
       const updateSegmentText = (id, value) => {
+        invalidateBatchUndo();
         const next = segmentsRef.current.map((segment) => (segment.id === id ? { ...segment, text: value } : segment));
         segmentsRef.current = next;
         setSegments(next);
+        setSegmentUndo((previous) => {
+          const record = previous.get(id);
+          if (record === undefined || record.after === value) return previous;
+          const pruned = new Map(previous);
+          pruned.delete(id);
+          return pruned;
+        });
+        dirtyRef.current = true;
+        setStatus('dirty');
+        setError('');
+        scheduleSave();
+      };
+
+      const updateSegmentTitle = (id, value) => {
+        const title = String(value ?? '').slice(0, MAX_TITLE_CHARS);
+        const target = segmentsRef.current.find((segment) => segment.id === id);
+        if (target === undefined || target.title === title) return;
+        invalidateBatchUndo();
+        const next = segmentsRef.current.map((segment) => (segment.id === id ? { ...segment, title } : segment));
+        segmentsRef.current = next;
+        setSegments(next);
         dirtyRef.current = true;
         setStatus('dirty');
         setError('');
@@ -1445,13 +1897,46 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
         }
       };
 
+      const clearPendingImageDeletes = () => {
+        for (const timer of imageDeleteTimersRef.current.values()) {
+          clearTimeout(timer);
+        }
+        imageDeleteTimersRef.current.clear();
+      };
+
+      const deleteImageFile = (pathValue) => {
+        const root = rootRef.current;
+        const sessionId = rootSessionRef.current;
+        if (root === '' || sessionId === '' || typeof pathValue !== 'string' || pathValue === '') return;
+        removeStoredImage(root, sessionId, pathValue).catch(() => {});
+      };
+
+      const scheduleImageCleanup = (images) => {
+        const list = Array.isArray(images) ? images : [];
+        for (const image of list) {
+          const pathValue = typeof image?.path === 'string' ? image.path : '';
+          if (pathValue === '' || imageDeleteTimersRef.current.has(pathValue)) continue;
+          const timer = setTimeout(() => {
+            imageDeleteTimersRef.current.delete(pathValue);
+            if (!segmentsRef.current.some((segment) =>
+              (Array.isArray(segment.images) ? segment.images : []).some((item) => item.path === pathValue))) {
+              deleteImageFile(pathValue);
+            }
+          }, IMAGE_DELETE_DELAY);
+          imageDeleteTimersRef.current.set(pathValue, timer);
+        }
+      };
+
       const removeImage = (id, pathValue) => {
         const next = segmentsRef.current.map((segment) => {
           if (segment.id !== id) return segment;
           const images = Array.isArray(segment.images) ? segment.images.filter((image) => image.path !== pathValue) : [];
           return { ...segment, images };
         });
+        const stillReferenced = next.some((segment) =>
+          (Array.isArray(segment.images) ? segment.images : []).some((image) => image.path === pathValue));
         commitSegments(next);
+        if (!stillReferenced) deleteImageFile(pathValue);
       };
 
       const triggerFilePicker = (id) => {
@@ -1524,7 +2009,7 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
           return;
         }
         const segment = newSegment('');
-        commitSegments([...segmentsRef.current, segment], { focus: { id: segment.id, caret: 0 } });
+        commitSegments([segment, ...segmentsRef.current], { focus: { id: segment.id, caret: 0 } });
       };
 
       const splitSegment = (id, element) => {
@@ -1534,15 +2019,21 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
         const head = current.text.slice(0, start);
         const tail = current.text.slice(start);
         const nextSegment = newSegment(tail);
-        const next = [];
-        for (const segment of segmentsRef.current) {
-          if (segment.id === id) {
-            next.push({ ...segment, text: head });
-            next.push(nextSegment);
-          } else {
-            next.push(segment);
-          }
-        }
+        const updated = segmentsRef.current.map((segment) =>
+          (segment.id === id ? { ...segment, text: head } : segment));
+        // Enter at the end creates a fresh card, which belongs at the top.
+        // Splitting in the middle keeps the tail next to its source card so
+        // the caret does not jump away from what the user is editing.
+        const next = tail.trim() === ''
+          ? [nextSegment, ...updated]
+          : (() => {
+              const out = [];
+              for (const segment of updated) {
+                out.push(segment);
+                if (segment.id === id) out.push(nextSegment);
+              }
+              return out;
+            })();
         commitSegments(next, { focus: { id: nextSegment.id, caret: 0 } });
       };
 
@@ -1594,6 +2085,9 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
         const record = undoRef.current;
         if (record === null || record === undefined) return;
         undoRef.current = null;
+        clearPendingImageDeletes();
+        setSegmentUndo(new Map());
+        setBatchUndoState(null);
         commitSegments(record.snapshot);
         setToast(null);
       };
@@ -1604,6 +2098,7 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
         undoRef.current = { snapshot: segmentsRef.current };
         const next = segmentsRef.current.filter((segment) => segment.id !== id);
         commitSegments(next);
+        scheduleImageCleanup(target.images);
         showToast(t('deletedToast'), { label: t('undo'), onClick: undoLast });
       };
 
@@ -1613,9 +2108,288 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
         undoRef.current = { snapshot: segmentsRef.current };
         const next = segmentsRef.current.filter((segment) => segment.archived !== true);
         commitSegments(next);
+        scheduleImageCleanup(archived.flatMap((segment) => (Array.isArray(segment.images) ? segment.images : [])));
         showToast(t('clearedArchive', { n: archived.length }), { label: t('undo'), onClick: undoLast });
       };
 
+      // Merge / reorder -----------------------------------------------------
+      const mergeSelected = () => {
+        const ids = new Set(
+          segmentsRef.current
+            .filter((segment) => segment.archived !== true && selectedRef.current.has(segment.id))
+            .map((segment) => segment.id),
+        );
+        if (ids.size < 2) {
+          showToast(t('mergeHint'));
+          return;
+        }
+        const chosen = segmentsRef.current.filter((segment) => ids.has(segment.id));
+        const firstIndex = segmentsRef.current.findIndex((segment) => ids.has(segment.id));
+        let insertAt = 0;
+        for (let index = 0; index < firstIndex; index += 1) {
+          if (!ids.has(segmentsRef.current[index].id)) insertAt += 1;
+        }
+        const seenPaths = new Set();
+        const images = [];
+        for (const segment of chosen) {
+          for (const image of Array.isArray(segment.images) ? segment.images : []) {
+            if (seenPaths.has(image.path) || images.length >= MAX_IMAGES) continue;
+            seenPaths.add(image.path);
+            images.push(image);
+          }
+        }
+        const merged = {
+          id: newSegmentId(),
+          text: chosen.map((segment) => segment.text).filter((text) => text.trim() !== '').join('\n\n'),
+          title: chosen
+            .map((segment) => (typeof segment.title === 'string' ? segment.title.trim() : ''))
+            .filter((title) => title !== '')
+            .join(' · ')
+            .slice(0, MAX_TITLE_CHARS),
+          createdAt: nowIso(),
+          images,
+          archived: false,
+          archivedAt: null,
+        };
+        undoRef.current = { snapshot: segmentsRef.current };
+        const next = segmentsRef.current.filter((segment) => !ids.has(segment.id));
+        next.splice(Math.min(insertAt, next.length), 0, merged);
+        setSelection(new Set());
+        commitSegments(next, { focus: { id: merged.id, caret: merged.text.length } });
+        showToast(t('mergedToast', { n: chosen.length }), { label: t('undo'), onClick: undoLast });
+      };
+
+      const reorderSegments = (sourceId, targetId, after) => {
+        if (sourceId === '' || sourceId === targetId) return;
+        const active = segmentsRef.current.filter((segment) => segment.archived !== true);
+        const from = active.findIndex((segment) => segment.id === sourceId);
+        const to = active.findIndex((segment) => segment.id === targetId);
+        if (from < 0 || to < 0) return;
+        const moved = active.splice(from, 1)[0];
+        let insertAt = to + (after ? 1 : 0);
+        if (from < insertAt) insertAt -= 1;
+        insertAt = Math.max(0, Math.min(insertAt, active.length));
+        active.splice(insertAt, 0, moved);
+        let cursor = 0;
+        const next = segmentsRef.current.map((segment) =>
+          (segment.archived === true ? segment : active[cursor++]));
+        if (next.every((segment, index) => segment.id === segmentsRef.current[index].id)) return;
+        commitSegments(next);
+      };
+
+      const setReorderTarget = (target) => {
+        reorderOverRef.current = target;
+        setReorderOver(target);
+      };
+
+      const onSegmentReorderStart = (event, id) => {
+        reorderDragRef.current = id;
+        setReorderDrag(id);
+        try {
+          event.dataTransfer?.setData('application/x-dsh-notepad-segment', id);
+          if (event.dataTransfer !== undefined && event.dataTransfer !== null) event.dataTransfer.effectAllowed = 'move';
+        } catch {
+          /* Some browsers expose a read-only transfer. */
+        }
+      };
+
+      const onSegmentReorderOver = (event, id) => {
+        const source = reorderDragRef.current;
+        if (source === '' || source === id) return;
+        const types = event?.dataTransfer?.types;
+        if (types !== undefined && types !== null && !Array.from(types).includes('application/x-dsh-notepad-segment')) return;
+        event.preventDefault?.();
+        event.stopPropagation?.();
+        const rect = typeof event.currentTarget?.getBoundingClientRect === 'function'
+          ? event.currentTarget.getBoundingClientRect()
+          : null;
+        const after = rect !== null && Number(event.clientY) > rect.top + rect.height / 2;
+        if (reorderOverRef.current?.id !== id || reorderOverRef.current?.after !== after) {
+          setReorderTarget({ id, after });
+        }
+      };
+
+      const onSegmentReorderDrop = (event, id) => {
+        const source = reorderDragRef.current
+          || (() => {
+            try {
+              return event?.dataTransfer?.getData('application/x-dsh-notepad-segment') ?? '';
+            } catch {
+              return '';
+            }
+          })();
+        const target = reorderOverRef.current?.id === id ? reorderOverRef.current : null;
+        reorderDragRef.current = '';
+        setReorderDrag('');
+        setReorderTarget(null);
+        if (source === '') return;
+        event.preventDefault?.();
+        event.stopPropagation?.();
+        reorderSegments(source, id, target?.after === true);
+      };
+
+      // AI optimization -----------------------------------------------------
+      const markOptimizing = (id, active) => {
+        const next = new Set(optimizingRef.current);
+        if (active) next.add(id);
+        else next.delete(id);
+        optimizingRef.current = next;
+        setOptimizing(next);
+      };
+
+      /** Cache key: the prompt depends on the workspace, title and card text. */
+      const optimizationCacheKey = (root, segment) =>
+        `${root}\u0000${segment.title ?? ''}\u0000${segment.text}`;
+
+      const rememberOptimization = (key, value) => {
+        const cache = optimizeCacheRef.current;
+        cache.delete(key);
+        cache.set(key, value);
+        while (cache.size > OPTIMIZE_CACHE_LIMIT) {
+          const oldest = cache.keys().next();
+          if (oldest.done === true) break;
+          cache.delete(oldest.value);
+        }
+      };
+
+      const requestOptimization = async (segment) => {
+        const root = rootRef.current;
+        const sessionId = rootSessionRef.current;
+        if (root === '' || sessionId === '') throw new Error(t('optimizeUnavailable'));
+        if (segment.text.length > MAX_OPTIMIZE_CHARS) throw new Error(t('optimizeTooLong'));
+        const cacheKey = optimizationCacheKey(root, segment);
+        const cached = optimizeCacheRef.current.get(cacheKey);
+        if (typeof cached === 'string' && cached !== '') return cached;
+        const data = await optimizeNoteText(root, sessionId, segment.text, segment.title ?? '');
+        const value = typeof data.text === 'string' ? data.text.trim() : '';
+        if (value === '') throw new Error(t('optimizeFailed'));
+        rememberOptimization(cacheKey, value);
+        return value;
+      };
+
+      const optimizeSegment = async (id) => {
+        if (optimizingRef.current.has(id)) return;
+        const target = segmentsRef.current.find((segment) => segment.id === id && segment.archived !== true);
+        if (target === undefined || target.text.trim() === '') {
+          showToast(t('optimizeEmpty'));
+          return;
+        }
+        const original = target.text;
+        markOptimizing(id, true);
+        try {
+          const value = await requestOptimization(target);
+          const current = segmentsRef.current.find((segment) => segment.id === id);
+          if (current === undefined || current.text !== original || value === original) return;
+          const next = segmentsRef.current.map((segment) =>
+            (segment.id === id ? { ...segment, text: value } : segment));
+          commitSegments(next);
+          setSegmentUndo((previous) => {
+            const updated = new Map(previous);
+            updated.set(id, { before: original, after: value });
+            return updated;
+          });
+          showToast(t('optimizedToast'));
+        } catch (reason) {
+          const message = String(reason?.message ?? reason);
+          showToast(message === t('optimizeTooLong') || message === t('optimizeUnavailable')
+            ? message
+            : `${t('optimizeFailed')}: ${message}`);
+        } finally {
+          markOptimizing(id, false);
+        }
+      };
+
+      const undoOptimizeSegment = (id) => {
+        const record = segmentUndo.get(id);
+        const current = segmentsRef.current.find((segment) => segment.id === id);
+        if (record !== undefined && current !== undefined && current.text === record.after) {
+          const next = segmentsRef.current.map((segment) =>
+            (segment.id === id ? { ...segment, text: record.before } : segment));
+          commitSegments(next);
+          setSegmentUndo((previous) => {
+            if (!previous.has(id)) return previous;
+            const updated = new Map(previous);
+            updated.delete(id);
+            return updated;
+          });
+          showToast(t('optimizeUndone'));
+          return;
+        }
+        setSegmentUndo((previous) => {
+          if (!previous.has(id)) return previous;
+          const updated = new Map(previous);
+          updated.delete(id);
+          return updated;
+        });
+      };
+
+      /** Improve only the checked segments; identical text is answered from cache. */
+      const optimizeSelectedSegments = async () => {
+        if (optimizeBatchRef.current) return;
+        const ids = new Set(selectedRef.current);
+        const targets = segmentsRef.current.filter((segment) =>
+          segment.archived !== true && ids.has(segment.id) && segment.text.trim() !== '');
+        if (targets.length === 0) {
+          showToast(t('optimizeEmpty'));
+          return;
+        }
+        optimizeBatchRef.current = true;
+        const snapshot = segmentsRef.current;
+        let done = 0;
+        let changed = 0;
+        let failed = 0;
+        setOptimizeBatch({ done, total: targets.length });
+        try {
+          for (const target of targets) {
+            const current = segmentsRef.current.find((segment) =>
+              segment.id === target.id && segment.archived !== true);
+            if (current !== undefined && current.text === target.text) {
+              markOptimizing(target.id, true);
+              try {
+                const value = await requestOptimization(current);
+                if (value !== current.text) {
+                  const next = segmentsRef.current.map((segment) =>
+                    (segment.id === target.id && segment.text === current.text
+                      ? { ...segment, text: value }
+                      : segment));
+                  commitSegments(next);
+                  setSegmentUndo((previous) => {
+                    const updated = new Map(previous);
+                    updated.set(target.id, { before: current.text, after: value });
+                    return updated;
+                  });
+                  changed += 1;
+                }
+              } catch {
+                failed += 1;
+              } finally {
+                markOptimizing(target.id, false);
+              }
+            }
+            done += 1;
+            setOptimizeBatch({ done, total: targets.length });
+          }
+          if (changed > 0) {
+            setBatchUndoState({ snapshot });
+            showToast(t('optimizedCount', { n: changed }));
+          } else {
+            showToast(failed > 0 ? t('optimizeFailed') : t('optimizedToast'));
+          }
+        } finally {
+          optimizeBatchRef.current = false;
+          setOptimizeBatch(null);
+        }
+      };
+
+      const undoBatchOptimization = () => {
+        const record = batchUndoRef.current;
+        if (record === null || record === undefined) return;
+        setBatchUndoState(null);
+        setSegmentUndo(new Map());
+        commitSegments(record.snapshot);
+        showToast(t('optimizeUndone'));
+      };
+
       // Selection -----------------------------------------------------------
       const toggleSelected = (id) => {
         const next = new Set(selectedRef.current);
@@ -1811,6 +2585,34 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
         updateSegmentText(id, event.target?.value ?? '');
       };
 
+      /** Focus a card's textarea and place the caret at an absolute offset. */
+      const focusSegmentAt = (id, caret) => {
+        const element = textareaRefs.current.get(id);
+        if (element === null || element === undefined) return false;
+        try {
+          element.focus?.({ preventScroll: true });
+        } catch {
+          try {
+            element.focus?.();
+          } catch {
+            /* ignore */
+          }
+        }
+        try {
+          const value = typeof element.value === 'string' ? element.value : '';
+          const position = Math.max(0, Math.min(Number(caret) || 0, value.length));
+          if (typeof element.setSelectionRange === 'function') element.setSelectionRange(position, position);
+        } catch {
+          /* A non-layout shim may not support ranges. */
+        }
+        try {
+          element.scrollIntoView?.({ block: 'nearest' });
+        } catch {
+          /* ignore */
+        }
+        return true;
+      };
+
       const onSegmentKeyDown = (event, id) => {
         if (event.isComposing === true || event.nativeEvent?.isComposing === true) return;
         const chord = event.ctrlKey || event.metaKey;
@@ -1825,6 +2627,28 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
           insertSegments(list);
           return;
         }
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+          if (event.altKey || event.shiftKey || chord) return;
+          const element = event.currentTarget ?? event.target;
+          const value = typeof element?.value === 'string' ? element.value : '';
+          const start = typeof element?.selectionStart === 'number' ? element.selectionStart : null;
+          const end = typeof element?.selectionEnd === 'number' ? element.selectionEnd : start;
+          if (start === null || start !== end) return;
+          const firstBreak = value.indexOf('\n');
+          const lastBreak = value.lastIndexOf('\n');
+          const up = event.key === 'ArrowUp';
+          const atEdge = up
+            ? (firstBreak === -1 || start <= firstBreak)
+            : (lastBreak === -1 || start > lastBreak);
+          if (!atEdge) return;
+          const active = segmentsRef.current.filter((segment) => segment.archived !== true);
+          const position = active.findIndex((segment) => segment.id === id);
+          const neighbor = position < 0 ? undefined : active[position + (up ? -1 : 1)];
+          if (neighbor !== undefined && focusSegmentAt(neighbor.id, up ? neighbor.text.length : 0)) {
+            event.preventDefault?.();
+          }
+          return;
+        }
         if (event.key !== 'Enter' || event.shiftKey || event.altKey || chord) return;
         event.preventDefault();
         splitSegment(id, event.currentTarget ?? event.target);
@@ -1841,8 +2665,11 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
           const vw = window.innerWidth || 1280;
           const vh = window.innerHeight || 800;
           const height = ui.minimized ? HEAD_H : ui.height;
-          const x = Math.min(Math.max(8, start.x + moveEvent.clientX - start.px), Math.max(8, vw - ui.width - 8));
-          const y = Math.min(Math.max(8, start.y + moveEvent.clientY - start.py), Math.max(8, vh - height - 8));
+          const minY = hostChromeTop() + EDGE_GAP;
+          const x = Math.min(Math.max(EDGE_GAP, start.x + moveEvent.clientX - start.px),
+            Math.max(EDGE_GAP, vw - ui.width - EDGE_GAP));
+          const y = Math.min(Math.max(minY, start.y + moveEvent.clientY - start.py),
+            Math.max(minY, vh - height - EDGE_GAP));
           setUi((previous) => ({ ...previous, x, y }));
         };
         const stop = () => {
@@ -1868,17 +2695,20 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
         const move = (moveEvent) => {
           const vw = window.innerWidth || 1280;
           const vh = window.innerHeight || 800;
-          const width = Math.min(Math.max(MIN_W, start.width + moveEvent.clientX - start.px), Math.max(MIN_W, vw - 16));
-          const height = Math.min(Math.max(MIN_H, start.height + moveEvent.clientY - start.py), Math.max(MIN_H, vh - 16));
+          const minY = hostChromeTop() + EDGE_GAP;
+          const width = Math.min(Math.max(MIN_W, start.width + moveEvent.clientX - start.px),
+            Math.max(MIN_W, vw - EDGE_GAP * 2));
+          const height = Math.min(Math.max(MIN_H, start.height + moveEvent.clientY - start.py),
+            Math.max(MIN_H, vh - minY - EDGE_GAP));
           setUi((previous) => {
-            const maxX = Math.max(8, vw - width - 8);
-            const maxY = Math.max(8, vh - height - 8);
+            const maxX = Math.max(EDGE_GAP, vw - width - EDGE_GAP);
+            const maxY = Math.max(minY, vh - height - EDGE_GAP);
             return {
               ...previous,
               width,
               height,
-              x: typeof previous.x === 'number' ? Math.min(previous.x, maxX) : previous.x,
-              y: typeof previous.y === 'number' ? Math.min(previous.y, maxY) : previous.y,
+              x: typeof previous.x === 'number' ? Math.min(Math.max(EDGE_GAP, previous.x), maxX) : previous.x,
+              y: typeof previous.y === 'number' ? Math.min(Math.max(minY, previous.y), maxY) : previous.y,
             };
           });
         };
@@ -1902,11 +2732,13 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
       const selectedActive = activeSegments.filter((segment) => selected.has(segment.id));
       const selectedCount = selectedActive.length;
       const allSelected = activeSegments.length > 0 && selectedCount === activeSegments.length;
+      const unsentCount = countUnsent(segments);
       const totalChars = segments.reduce((sum, segment) => sum + segment.text.length, 0);
       const displayWidth = ui.width;
       const displayHeight = ui.minimized ? HEAD_H : ui.height;
-      const fallbackX = Math.max(8, ((typeof window !== 'undefined' && window.innerWidth) || 1280) - displayWidth - 24);
-      const fallbackY = Math.max(8, ((typeof window !== 'undefined' && window.innerHeight) || 800) - displayHeight - 24);
+      const fallbackX = Math.max(EDGE_GAP, ((typeof window !== 'undefined' && window.innerWidth) || 1280) - displayWidth - 24);
+      const fallbackY = Math.max(hostChromeTop() + EDGE_GAP,
+        ((typeof window !== 'undefined' && window.innerHeight) || 800) - displayHeight - 24);
       const left = typeof ui.x === 'number' ? ui.x : fallbackX;
       const top = typeof ui.y === 'number' ? ui.y : fallbackY;
 
@@ -2045,6 +2877,42 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
           },
           h(SendIcon, { size: 14 }),
         ),
+        h(
+          'button',
+          {
+            type: 'button',
+            className: 'dsh-np-btn',
+            title: selectedCount > 1 ? t('mergeSelected', { n: selectedCount }) : t('mergeHint'),
+            'aria-label': t('merge'),
+            disabled: selectedCount < 2,
+            onClick: mergeSelected,
+          },
+          h(MergeIcon, { size: 14 }),
+        ),
+        h(
+          'button',
+          {
+            type: 'button',
+            className: 'dsh-np-btn',
+            'data-active': optimizeBatch !== null || batchUndo !== null ? 'true' : 'false',
+            title: optimizeBatch !== null
+              ? t('optimizeAllProgress', { done: optimizeBatch.done, total: optimizeBatch.total })
+              : batchUndo !== null
+                ? t('undoOptimize')
+                : selectedCount > 0
+                  ? t('optimizeSelected', { n: selectedCount })
+                  : t('optimizeSelectHint'),
+            'aria-label': batchUndo !== null
+              ? t('undoOptimize')
+              : selectedCount > 0 ? t('optimizeSelected', { n: selectedCount }) : t('optimizeSelectHint'),
+            disabled: optimizeBatch !== null
+              || (batchUndo === null && selectedCount === 0),
+            onClick: batchUndo !== null ? undoBatchOptimization : optimizeSelectedSegments,
+          },
+          optimizeBatch !== null
+            ? h('span', { className: 'dsh-np-mini-spinner' })
+            : batchUndo !== null ? h(UndoIcon, { size: 14 }) : h(SparkleIcon, { size: 14 }),
+        ),
         h(
           'button',
           {
@@ -2131,6 +2999,15 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
       const activeCards = activeSegments.map((segment, index) => {
         const images = Array.isArray(segment.images) ? segment.images : [];
         const empty = segment.text.trim() === '' && images.length === 0;
+        const titleValue = segment.title ?? '';
+        const showTitleInput = titleValue !== '' || titleEditing === segment.id;
+        const undoRecord = segmentUndo.get(segment.id);
+        const canUndoOptimize = undoRecord !== undefined && undoRecord.after === segment.text;
+        const optimizingNow = optimizing.has(segment.id);
+        const aiBusy = optimizingNow || optimizeBatch !== null;
+        const aiTitle = aiBusy
+          ? t('optimizing')
+          : canUndoOptimize ? t('undoOptimize') : t('optimizeSegment');
         return h(
           'article',
           {
@@ -2139,6 +3016,14 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
             'data-seg-id': segment.id,
             'data-archived': 'false',
             'data-selected': selected.has(segment.id) ? 'true' : 'false',
+            'data-reorder-drag': reorderDrag === segment.id ? 'true' : 'false',
+            'data-drop-before': reorderOver?.id === segment.id && reorderOver?.after === false ? 'true' : 'false',
+            'data-drop-after': reorderOver?.id === segment.id && reorderOver?.after === true ? 'true' : 'false',
+            onDragOver: (event) => onSegmentReorderOver(event, segment.id),
+            onDragLeave: () => {
+              if (reorderOverRef.current?.id === segment.id) setReorderTarget(null);
+            },
+            onDrop: (event) => onSegmentReorderDrop(event, segment.id),
           },
           h('input', {
             key: 'file-input',
@@ -2170,8 +3055,62 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
                 onChange: () => toggleSelected(segment.id),
               }),
             ),
-            h('span', { className: 'dsh-np-index' }, String(index + 1).padStart(2, '0')),
-            h('span', { className: 'dsh-np-spacer' }),
+            h(
+              'button',
+              {
+                type: 'button',
+                className: 'dsh-np-index',
+                title: t('indexHint'),
+                'aria-label': t('selectSegment'),
+                'aria-pressed': selected.has(segment.id) ? 'true' : 'false',
+                draggable: true,
+                onDragStart: (event) => onSegmentReorderStart(event, segment.id),
+                onDragEnd: () => {
+                  reorderDragRef.current = '';
+                  setReorderDrag('');
+                  setReorderTarget(null);
+                },
+                onClick: () => toggleSelected(segment.id),
+              },
+              String(index + 1).padStart(2, '0'),
+            ),
+            showTitleInput
+              ? h('input', {
+                  type: 'text',
+                  className: 'dsh-np-title-input',
+                  value: titleValue,
+                  placeholder: t('titlePlaceholder'),
+                  maxLength: MAX_TITLE_CHARS,
+                  autoFocus: titleValue === '',
+                  'aria-label': t('segmentTitle'),
+                  spellCheck: false,
+                  onFocus: () => setTitleEditing(segment.id),
+                  onChange: (event) => updateSegmentTitle(segment.id, event.target?.value ?? ''),
+                  onKeyDown: (event) => {
+                    if (event.key !== 'Enter') return;
+                    event.preventDefault();
+                    try {
+                      event.currentTarget?.blur?.();
+                    } catch {
+                      /* ignore */
+                    }
+                  },
+                  onBlur: () => {
+                    if (dirtyRef.current) saveNowRef.current?.();
+                    if ((segment.title ?? '') === '') setTitleEditing('');
+                  },
+                })
+              : h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'dsh-np-title-add',
+                    title: t('segmentTitle'),
+                    'aria-label': t('segmentTitle'),
+                    onClick: () => setTitleEditing(segment.id),
+                  },
+                  t('titlePlaceholder'),
+                ),
             h(
               'button',
               {
@@ -2219,6 +3158,23 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
               },
               h(SendIcon, { size: 14 }),
             ),
+            h(
+              'button',
+              {
+                type: 'button',
+                className: 'dsh-np-segbtn',
+                'data-ai': 'true',
+                title: aiTitle,
+                'aria-label': aiTitle,
+                disabled: aiBusy || (canUndoOptimize ? false : empty),
+                onClick: canUndoOptimize
+                  ? () => undoOptimizeSegment(segment.id)
+                  : () => optimizeSegment(segment.id),
+              },
+              optimizingNow
+                ? h('span', { className: 'dsh-np-mini-spinner' })
+                : canUndoOptimize ? h(UndoIcon, { size: 14 }) : h(SparkleIcon, { size: 14 }),
+            ),
             h(
               'button',
               {
@@ -2336,6 +3292,9 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
                         'div',
                         { className: 'dsh-np-seg-head' },
                         h('span', { className: 'dsh-np-archived-chip' }, t('archived')),
+                        typeof segment.title === 'string' && segment.title.trim() !== ''
+                          ? h('span', { className: 'dsh-np-seg-title' }, segment.title)
+                          : null,
                         h('span', { className: 'dsh-np-spacer' }),
                         h(
                           'button',
@@ -2502,6 +3461,12 @@ body[data-ds-dark-theme] .dsh-np-seg[data-archived=true]{opacity:.7}
           onClick: toggleHidden,
         },
         h(NotepadIcon, { size: 16 }),
+        ui.hidden && unsentCount > 0
+          ? h('span', {
+              className: 'dsh-np-restore-badge',
+              title: t('unsent', { n: unsentCount }),
+            }, unsentCount > 99 ? '99+' : String(unsentCount))
+          : null,
       );
 
       return [card, restore];