@fraziym/axoniz 0.1.0

package/dist/web/static/js/documentLibrary.js

@@ -0,0 +1,3376 @@
+// static/js/documentLibrary.js
+/**
+ * Document Library — modal with Chats / Documents / Research / Archive tabs.
+ * Extracted from document.js to reduce file size.
+ */
+
+import uiModule from './ui.js';
+import sessionModule from './sessions.js';
+import spinnerModule from './spinner.js';
+import markdownModule from './markdown.js';
+import { makeWindowDraggable } from './windowDrag.js';
+import { langIcon } from './langIcons.js';
+import { registerMenuDismiss, dismissOrRemove } from './escMenuStack.js';
+
+// ── Injected references from documentModule ──
+let API_BASE = '';
+let _esc;          // HTML-escape function
+let _getDocs;      // () => Map of open docs
+let _isOpenFn;     // () => boolean — is doc panel open
+let _createDocument;
+let _loadDocument;
+let _switchToDoc;
+let _openPanel;
+let _addDocToTabs;
+let _syncDocIndicator;
+
+export function initLibrary(config) {
+  API_BASE        = config.apiBase;
+  _esc            = config.esc;
+  _getDocs        = config.getDocs;
+  _isOpenFn       = config.isOpen;
+  _createDocument = config.createDocument;
+  _loadDocument   = config.loadDocument;
+  _switchToDoc    = config.switchToDoc;
+  _openPanel      = config.openPanel;
+  _addDocToTabs   = config.addDocToTabs;
+  _syncDocIndicator = config.syncDocIndicator;
+}
+
+// ── Library state ──
+let _libraryOpen = false;
+// Track which tabs have already played their domino-in cascade so we only
+// animate the *first* time content loads per page session — tab swaps and
+// re-renders after that are instant.
+const _libraryCascadedTabs = new Set();
+function _maybeCascadeGrid(grid, tabKey) {
+  if (!grid || !tabKey || _libraryCascadedTabs.has(tabKey)) return;
+  _libraryCascadedTabs.add(tabKey);
+  grid.classList.add('doclib-just-opened');
+  setTimeout(() => grid.classList.remove('doclib-just-opened'), 900);
+}
+let _libraryDocs = [];
+let _libraryTotal = 0;
+let _libraryOffset = 0;
+let _docsVisibleLimit = 20;  // chunked reveal (matches the Chats tab's 20)
+let _libraryLanguages = {};
+let _librarySessionCount = 0;
+let _libraryActiveLanguage = null;
+let _librarySort = 'recent';
+let _librarySearch = '';
+let _librarySearchDebounce = null;
+
+// Highlight the active search terms inside a plain string. Escapes first,
+// then wraps each whitespace-separated term in <mark>. Multi-term, matching
+// the backend's per-term search, so every word that matched is marked.
+function _hlSearch(text) {
+  const esc = _esc(text || '');
+  const q = (_librarySearch || '').trim();
+  if (!q) return esc;
+  const toks = [...new Set(q.split(/\s+/).filter(Boolean))]
+    .sort((a, b) => b.length - a.length)             // prefer longer matches
+    .map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+  if (!toks.length) return esc;
+  try {
+    return esc.replace(new RegExp(`(${toks.join('|')})`, 'gi'),
+                       '<mark class="doclib-search-hl">$1</mark>');
+  } catch { return esc; }
+}
+let _libraryEscHandler = null;
+let _librarySelectMode = false;
+let _librarySelectedIds = new Set();
+let _libraryImportMode = false;
+let _libScrollBound = false;   // infinite-scroll listener attached once
+let _libraryArchivedView = false;   // Documents tab showing archived docs?
+
+// ---- Library animation helpers ----
+
+  /** Collapse an expanded card */
+  function _collapseExpandedCard(card) {
+    const grid = card.closest('.doclib-grid');
+    const instant = card?.dataset?.spaceToggle === '1';
+    card.classList.remove('doclib-card-expanded');
+    // Release the height lock so grid returns to natural size
+    if (grid) {
+      grid.style.minHeight = '';
+      grid.style.maxHeight = '';
+    }
+    const reader = card.querySelector('.doclib-card-reader');
+    if (reader) reader.remove();
+
+    // Fade siblings back in
+    if (grid && !instant) {
+      const siblings = [...grid.querySelectorAll('.doclib-card')].filter(c => c !== card);
+      siblings.forEach(s => { s.style.opacity = '0'; });
+      requestAnimationFrame(() => {
+        siblings.forEach(s => {
+          s.style.transition = 'opacity 0.15s ease';
+          s.style.opacity = '1';
+        });
+        setTimeout(() => { siblings.forEach(s => { s.style.transition = ''; s.style.opacity = ''; }); }, 200);
+      });
+    }
+  }
+
+  // Fetch a chat's full history and serialize as plain-text transcript,
+  // then write to the clipboard. Same User: / Assistant: format the chat
+  // header's "Copy Chat" button uses, but works for any session ID — the
+  // library doesn't need the chat to be loaded in the UI first.
+  async function _copyChatById(sessionId) {
+    try {
+      const res = await fetch(`${API_BASE}/api/history/${sessionId}`, { credentials: 'same-origin' });
+      if (!res.ok) throw new Error(res.statusText);
+      const data = await res.json();
+      const history = Array.isArray(data) ? data : (data.history || []);
+      const lines = [];
+      for (const m of history) {
+        if (m.role !== 'user' && m.role !== 'assistant') continue;
+        const label = m.role === 'user' ? 'User' : 'Assistant';
+        const body = (m.content || '')
+          .replace(/<think>[\s\S]*?<\/think>/g, '')
+          .replace(/<think>[\s\S]*$/, '')
+          .trim();
+        if (body) lines.push(`${label}: ${body}`);
+      }
+      const text = lines.join('\n\n');
+      if (uiModule && uiModule.copyToClipboard) {
+        await uiModule.copyToClipboard(text);
+      } else {
+        await navigator.clipboard.writeText(text);
+      }
+    } catch (err) {
+      if (uiModule && uiModule.showError) uiModule.showError('Failed to copy chat');
+    }
+  }
+
+  // Long-press a list card to open its actions menu. `menuSelector` resolves
+  // the existing ••• button on the card; on hold we trigger its click so the
+  // dropdown opens in its usual spot. Moved finger >10px or release before
+  // 500ms cancels.
+  function _attachLongPressMenu(card, menuSelector) {
+    let hold = null;
+    let start = null;
+    const cancel = () => { if (hold) { clearTimeout(hold); hold = null; } start = null; };
+    card.addEventListener('pointerdown', (e) => {
+      if (e.target.closest(menuSelector + ', .memory-select-cb, button')) return;
+      start = { x: e.clientX, y: e.clientY };
+      hold = setTimeout(() => {
+        hold = null;
+        card._suppressNextClick = true;
+        setTimeout(() => { card._suppressNextClick = false; }, 400);
+        if (navigator.vibrate) try { navigator.vibrate(15); } catch {}
+        const btn = card.querySelector(menuSelector);
+        if (btn) btn.click();
+      }, 500);
+    });
+    card.addEventListener('pointermove', (e) => {
+      if (!start) return;
+      if (Math.hypot(e.clientX - start.x, e.clientY - start.y) > 10) cancel();
+    });
+    card.addEventListener('pointerup', cancel);
+    card.addEventListener('pointercancel', cancel);
+  }
+
+  // Inline icons used by the chats/archive/research dropdown rows. Match the
+  // ones used by the documents-tab card menu so the visual language stays
+  // consistent across tabs.
+  const _LIB_DD_ICONS = {
+    open: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>',
+    archive: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>',
+    restore: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9"/><polyline points="3 4 3 9 8 9"/></svg>',
+    delete: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>',
+    clone: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>',
+    copy: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>',
+  };
+
+  function _showLibDropdown(anchor, items, opts) {
+    opts = opts || {};
+    document.querySelectorAll('._lib-dd').forEach(dismissOrRemove);
+    const dd = document.createElement('div');
+    dd.className = 'dropdown session-dropdown-menu _lib-dd';
+    for (const item of items) {
+      const row = document.createElement('div');
+      row.className = 'dropdown-item-compact' + (item.danger ? ' dropdown-item-danger' : '');
+      const iconKey = item.icon || item.label.toLowerCase();
+      const iconSvg = _LIB_DD_ICONS[iconKey] || '';
+      row.innerHTML = (iconSvg ? '<span class="dropdown-icon">' + iconSvg + '</span>' : '') + '<span>' + item.label + '</span>';
+      row.addEventListener('click', (e) => { e.stopPropagation(); teardown(); item.action(); });
+      dd.appendChild(row);
+    }
+    if (typeof opts.onSelect === 'function') {
+      const sel = document.createElement('div');
+      sel.className = 'dropdown-item-compact';
+      sel.innerHTML =
+        '<span class="dropdown-icon"><span style="font-size:16px;line-height:1;position:relative;top:-2px;">●</span></span>'
+        + '<span>Select</span>';
+      sel.addEventListener('click', (e) => { e.stopPropagation(); teardown(); opts.onSelect(); });
+      dd.appendChild(sel);
+    }
+    const cancel = document.createElement('div');
+    cancel.className = 'dropdown-item-compact dropdown-cancel-mobile';
+    cancel.innerHTML =
+      '<span class="dropdown-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>'
+      + '<span>Cancel</span>';
+    cancel.addEventListener('click', (e) => { e.stopPropagation(); teardown(); if (typeof opts.onCancel === 'function') opts.onCancel(); });
+    dd.appendChild(cancel);
+    document.body.appendChild(dd);
+    const rect = anchor.getBoundingClientRect();
+    dd.style.right = (window.innerWidth - rect.right) + 'px';
+    dd.style.top = (rect.bottom + 2) + 'px';
+    dd.style.display = 'block';
+    dd.style.zIndex = '100000';
+    requestAnimationFrame(() => {
+      const mr = dd.getBoundingClientRect();
+      if (mr.bottom > window.innerHeight - 8) {
+        dd.style.top = (rect.top - mr.height - 2) + 'px';
+      }
+      if (mr.left < 8) { dd.style.left = '8px'; dd.style.right = 'auto'; }
+    });
+    // Single idempotent teardown shared by every dismissal path (item click,
+    // outside click, swipe, and the Escape arbiter via registerMenuDismiss).
+    let _unreg = () => {};
+    const teardown = () => {
+      _unreg(); _unreg = () => {};
+      document.removeEventListener('click', close);
+      dd.remove();
+    };
+    const close = (e) => { if (!dd.contains(e.target)) teardown(); };
+    setTimeout(() => document.addEventListener('click', close), 0);
+    _unreg = registerMenuDismiss(teardown);
+    dd._dismiss = teardown;   // let bulk removers (reopen sweep) tear down cleanly
+
+    // Swipe-down-to-dismiss (mobile). Mirrors the bottom-sheet feel — drag the
+    // popup down and release past the threshold to close. Below threshold,
+    // snap back. Vertical-only; horizontal flicks fall through to scrolling.
+    let _swipeStart = null;
+    let _swipeDy = 0;
+    dd.addEventListener('touchstart', (e) => {
+      if (e.touches.length !== 1) return;
+      _swipeStart = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+      _swipeDy = 0;
+      dd.style.transition = '';
+    }, { passive: true });
+    dd.addEventListener('touchmove', (e) => {
+      if (!_swipeStart || e.touches.length !== 1) return;
+      const dx = e.touches[0].clientX - _swipeStart.x;
+      const dy = e.touches[0].clientY - _swipeStart.y;
+      if (Math.abs(dy) < Math.abs(dx)) { _swipeStart = null; return; }
+      if (dy > 0) {
+        _swipeDy = dy;
+        dd.style.transform = 'translateY(' + dy + 'px)';
+        dd.style.opacity = String(Math.max(0.3, 1 - dy / 240));
+      }
+    }, { passive: true });
+    dd.addEventListener('touchend', () => {
+      if (!_swipeStart) return;
+      _swipeStart = null;
+      if (_swipeDy > 60) {
+        dd.style.transition = 'transform 0.15s ease, opacity 0.15s ease';
+        dd.style.transform = 'translateY(120px)';
+        dd.style.opacity = '0';
+        // Unregister + drop the outside-click listener now; defer the DOM
+        // removal so the slide-out animation can play.
+        _unreg(); _unreg = () => {};
+        document.removeEventListener('click', close);
+        setTimeout(() => dd.remove(), 160);
+      } else {
+        dd.style.transition = 'transform 0.18s ease, opacity 0.18s ease';
+        dd.style.transform = '';
+        dd.style.opacity = '';
+      }
+    });
+  }
+
+  // ---- Document Library ----
+
+  function libraryRelativeTime(isoString) {
+    if (!isoString) return '';
+    const now = Date.now();
+    const then = new Date(isoString).getTime();
+    const diffS = Math.floor((now - then) / 1000);
+    if (diffS < 60) return 'just now';
+    const diffM = Math.floor(diffS / 60);
+    if (diffM < 60) return diffM + 'm ago';
+    const diffH = Math.floor(diffM / 60);
+    if (diffH < 24) return diffH + 'h ago';
+    const diffD = Math.floor(diffH / 24);
+    if (diffD === 1) return 'yesterday';
+    if (diffD < 14) return diffD + 'd ago';
+    const diffW = Math.floor(diffD / 7);
+    if (diffW < 8) return diffW + 'w ago';
+    return new Date(isoString).toLocaleDateString();
+  }
+
+  async function libraryFetch(append) {
+    if (!append) _libraryOffset = 0;
+    // Bump page size to the backend max (50) so fullscreen doesn't leave
+    // empty space below the loaded rows — same idea as emailLibrary's
+    // limit=100, but documents_library validates `le=50` so we have to
+    // cap at that. Auto-fill loop below picks up any remaining gap.
+    const params = new URLSearchParams({
+      sort: _librarySort,
+      offset: String(_libraryOffset),
+      limit: '50',
+    });
+    if (_librarySearch) params.set('search', _librarySearch);
+    if (_libraryActiveLanguage) params.set('language', _libraryActiveLanguage);
+    if (_libraryArchivedView) params.set('archived', 'true');
+
+    try {
+      const res = await fetch(`${API_BASE}/api/documents/library?${params}`);
+      if (!res.ok) throw new Error(res.statusText);
+      const data = await res.json();
+
+      if (append) {
+        _libraryDocs = _libraryDocs.concat(data.documents);
+      } else {
+        _libraryDocs = data.documents;
+        _docsVisibleLimit = 20;  // reset chunk on a fresh load / search / sort
+      }
+      _libraryTotal = data.total;
+      _libraryLanguages = data.languages;
+      _librarySessionCount = data.session_count;
+
+      libraryRenderStats();
+      libraryRenderLangChips();
+      libraryRenderGrid();
+      libraryRenderLoadMore();
+    } catch (e) {
+      console.error('Library fetch error:', e);
+    }
+  }
+
+  function libraryRenderStats() {
+    const el = document.getElementById('doclib-stats');
+    if (!el) return;
+    const totalAll = Object.values(_libraryLanguages).reduce((a, b) => a + b, 0);
+    if (_librarySearch || _libraryActiveLanguage) {
+      el.textContent = `${_libraryTotal} of ${totalAll} document${totalAll !== 1 ? 's' : ''}`;
+    } else {
+      el.textContent = `${totalAll} document${totalAll !== 1 ? 's' : ''}`;
+    }
+  }
+
+  function libraryRenderLangChips() {
+    const wrap = document.getElementById('doclib-chips');
+    if (!wrap) return;
+    // Remove only language chip buttons, keep sort/select elements
+    wrap.querySelectorAll('.memory-cat-chip').forEach(c => c.remove());
+    const totalAll = Object.values(_libraryLanguages).reduce((a, b) => a + b, 0);
+
+    // Hide the "all (0)" chip + lang chips entirely when there are no docs.
+    if (totalAll === 0) return;
+
+    const allChip = document.createElement('button');
+    allChip.className = 'memory-cat-chip' + (!_libraryActiveLanguage ? ' active' : '');
+    allChip.textContent = `all (${totalAll})`;
+    allChip.addEventListener('click', () => {
+      if (_librarySelectMode) {
+        _libraryDocs.forEach(d => _librarySelectedIds.add(d.id));
+        libraryUpdateBulkCount();
+        const selectAllEl = document.getElementById('doclib-select-all');
+        if (selectAllEl) selectAllEl.checked = true;
+        libraryRenderGrid();
+        return;
+      }
+      _libraryActiveLanguage = null;
+      libraryFetch(false);
+    });
+    wrap.appendChild(allChip);
+
+    const sorted = Object.entries(_libraryLanguages).sort((a, b) => b[1] - a[1]);
+    for (const [lang, count] of sorted) {
+      const chip = document.createElement('button');
+      chip.className = 'memory-cat-chip' + (_libraryActiveLanguage === lang ? ' active' : '');
+      chip.textContent = `${lang} (${count})`;
+      chip.addEventListener('click', () => {
+        _libraryActiveLanguage = lang;
+        libraryFetch(false);
+      });
+      wrap.appendChild(chip);
+    }
+  }
+
+  function libraryRemoveDocumentFromState(docId) {
+    const removed = _libraryDocs.find(d => String(d.id) === String(docId));
+    _libraryDocs = _libraryDocs.filter(d => String(d.id) !== String(docId));
+    _librarySelectedIds.delete(docId);
+    _libraryTotal = Math.max(0, _libraryTotal - 1);
+
+    const lang = removed && (removed.language || 'text');
+    if (lang && Object.prototype.hasOwnProperty.call(_libraryLanguages, lang)) {
+      const next = Math.max(0, Number(_libraryLanguages[lang] || 0) - 1);
+      if (next > 0) {
+        _libraryLanguages[lang] = next;
+      } else {
+        delete _libraryLanguages[lang];
+      }
+    }
+
+    libraryRenderStats();
+    libraryRenderLangChips();
+    libraryUpdateBulkCount();
+  }
+
+  function libraryRenderGrid() {
+    const grid = document.getElementById('doclib-grid');
+    if (!grid) return;
+    // An open card menu is mounted on <body> (to escape overflow clipping), so
+    // clearing the grid would orphan it; dismiss it first so its listener +
+    // Escape-stack entry go too.
+    document.querySelectorAll('.doclib-card-dropdown').forEach(dismissOrRemove);
+    grid.innerHTML = '';
+    // Drop any previous inline load-more — regenerated below alongside the list.
+    if (grid.parentElement) grid.parentElement.querySelectorAll(':scope > .doclib-inline-load-more').forEach(b => b.remove());
+
+    if (_libraryDocs.length === 0) {
+      if (_librarySearch || _libraryActiveLanguage) {
+        grid.innerHTML = '<div class="doclib-empty">No documents match your search.</div>';
+      } else {
+        const _impIco = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin:0 4px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>';
+        grid.innerHTML =
+          '<div class="doclib-empty" style="display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;">' +
+            '<span>No documents yet</span>' +
+            '<span style="opacity:0.7;font-size:11px;">' +
+              '<a href="#" data-doclib-import style="color:var(--accent,var(--red));text-decoration:underline;">Import' + _impIco + '</a>' +
+              ' &middot; or create one in a session' +
+            '</span>' +
+          '</div>';
+        grid.querySelector('[data-doclib-import]')?.addEventListener('click', (e) => {
+          e.preventDefault();
+          document.getElementById('doclib-import-file-btn')?.click();
+        });
+      }
+      return;
+    }
+    _maybeCascadeGrid(grid, 'documents');
+
+    // Reveal in 20-at-a-time chunks (matches the Chats tab). The legacy
+    // server-pagination button is suppressed in libraryRenderLoadMore; this
+    // inline button is the single control.
+    const shown = _libraryDocs.slice(0, _docsVisibleLimit);
+    for (const doc of shown) {
+      grid.appendChild(libraryCreateCard(doc));
+    }
+    // Show a "Load more" while either more loaded docs remain to reveal, or
+    // more exist on the server beyond what we've fetched.
+    const shownCount = shown.length;
+    if (shownCount < _libraryTotal) {
+      const btn = document.createElement('button');
+      btn.className = 'doclib-load-more doclib-inline-load-more';
+      btn.id = 'doclib-docs-load-more';
+      btn.textContent = `Load more (${shownCount} of ${_libraryTotal})`;
+      btn.addEventListener('click', async () => {
+        _docsVisibleLimit += 20;
+        // Need more than we've fetched? pull the next server page first.
+        if (_docsVisibleLimit > _libraryDocs.length && _libraryDocs.length < _libraryTotal) {
+          _libraryOffset = _libraryDocs.length;
+          await libraryFetch(true);  // appends + re-renders
+        } else {
+          libraryRenderGrid();
+        }
+      });
+      grid.parentElement.appendChild(btn);
+    }
+  }
+
+  // Infinite scroll for the library (mobile + desktop), covering EVERY tab —
+  // Documents, Chats, Research, Archive all render a `.doclib-inline-load-more`
+  // button (regenerated fresh each render). A capture-phase scroll listener
+  // catches whichever element actually scrolls and, when the visible button
+  // nears the viewport bottom, clicks it — reusing each tab's own load logic.
+  // We mark a button once clicked so the SAME instance can't double-fire (the
+  // next render makes a fresh, unmarked one), which is safe for both the sync
+  // reveal tabs (Chats/Research) and the async fetch tabs (Documents/Archive).
+  if (!_libScrollBound) {
+    _libScrollBound = true;
+    let _tick = false;
+    const _maybeAutoLoad = () => {
+      _tick = false;
+      if (!_libraryOpen) return;
+      for (const btn of document.querySelectorAll('.doclib-inline-load-more')) {
+        if (btn.dataset.autoLoaded) continue;
+        if (!btn.offsetParent) continue;   // inactive tab (hidden)
+        if (btn.getBoundingClientRect().top > window.innerHeight + 600) continue;
+        btn.dataset.autoLoaded = '1';
+        btn.click();
+        break;   // one load per scroll tick
+      }
+    };
+    document.addEventListener('scroll', () => {
+      if (_tick) return;
+      _tick = true;
+      requestAnimationFrame(_maybeAutoLoad);
+    }, true);
+  }
+
+  function libraryCreateCard(doc) {
+    const card = document.createElement('div');
+    card.className = 'doclib-card memory-item';
+    card.dataset.docId = doc.id;
+    if (_librarySelectMode && _librarySelectedIds.has(doc.id)) {
+      card.classList.add('selected');
+    }
+
+    // Checkbox for select mode
+    if (_librarySelectMode) {
+      const cb = document.createElement('input');
+      cb.type = 'checkbox';
+      cb.className = 'memory-select-cb';
+      cb.checked = _librarySelectedIds.has(doc.id);
+      cb.addEventListener('click', (e) => e.stopPropagation());
+      cb.addEventListener('change', () => {
+        libraryToggleSelectItem(doc.id);
+        card.classList.toggle('selected', _librarySelectedIds.has(doc.id));
+        const selectAllEl = document.getElementById('doclib-select-all');
+        if (selectAllEl) selectAllEl.checked = _libraryDocs.every(d => _librarySelectedIds.has(d.id));
+      });
+      card.appendChild(cb);
+    }
+
+    // Content wrapper
+    const content = document.createElement('div');
+    content.style.cssText = 'flex:1;min-width:0;padding-top:4px;';
+
+    // Title row with version badge
+    const titleRow = document.createElement('div');
+    titleRow.style.cssText = 'display:flex;align-items:center;gap:6px;width:100%;';
+    const titleEl = document.createElement('span');
+    titleEl.className = 'memory-item-title';
+    titleEl.style.cssText = 'flex:0 1 auto;min-width:0;';
+    // Language-specific icon next to the title (matches the document's type:
+    // markdown/csv/python/html/etc.). Falls back to the generic document icon
+    // when the language has no dedicated glyph.
+    const _GEN_DOC_ICON = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;opacity:0.4;flex-shrink:0;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>';
+    const _langSvg = doc.language && doc.language !== 'text'
+      ? langIcon(doc.language, 12, { style: 'vertical-align:-2px;margin-right:4px;opacity:0.55;flex-shrink:0;color:currentColor;' })
+      : '';
+    titleEl.innerHTML = (_langSvg || _GEN_DOC_ICON) + _hlSearch(doc.title || 'Untitled');
+    titleRow.appendChild(titleEl);
+    const verBadge = document.createElement('span');
+    verBadge.style.cssText = 'font-size:9px;padding:1px 6px;border-radius:8px;background:color-mix(in srgb, var(--red) 15%, transparent);border:1px solid color-mix(in srgb, var(--red) 40%, transparent);color:var(--red);flex-shrink:0;';
+    verBadge.textContent = 'v' + (doc.version_count || 1);
+    titleRow.appendChild(verBadge);
+    // Chevron pushed to the right end of the title row — collapsed
+    // shows nothing, expanded reveals a downward chevron so the user
+    // sees the card is open and can tap to close it.
+    const chevron = document.createElement('span');
+    chevron.className = 'doclib-card-chevron';
+    chevron.style.marginLeft = 'auto';
+    chevron.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>';
+    titleRow.appendChild(chevron);
+    content.appendChild(titleRow);
+
+    // Meta line: session → [lang-icon language] → time
+    const meta = document.createElement('div');
+    meta.className = 'memory-item-meta';
+    meta.style.cssText = 'font-size:10px;opacity:0.55;margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;';
+    const _esc = (s) => uiModule.esc(String(s || ''));
+    const pieces = [];
+    if (doc.session_name) pieces.push(`<span>${_esc(doc.session_name)}</span>`);
+    if (doc.language && doc.language !== 'text') {
+      const ic = langIcon(doc.language, 11, { style: 'vertical-align:-2px;flex-shrink:0;opacity:0.65;color:currentColor;' });
+      pieces.push(`<span style="display:inline-flex;align-items:center;gap:3px;">${ic}${_esc(doc.language)}</span>`);
+    }
+    pieces.push(`<span>${_esc(libraryRelativeTime(doc.updated_at))}</span>`);
+    meta.innerHTML = pieces.join('<span style="opacity:0.5;">\u00b7</span>');
+    // Strip the per-language icon from the meta line \u2014 it now sits next to the
+    // title above, so duplicating it here was redundant.
+    content.appendChild(meta);
+    card.appendChild(content);
+
+    // Header element (kept for expand/preview compatibility)
+    const header = document.createElement('div');
+    header.className = 'doclib-card-header';
+    header.style.display = 'none';
+
+    // Action buttons — "..." menu
+    const actionsWrap = document.createElement('div');
+    actionsWrap.className = 'memory-item-actions';
+    const menuWrap = document.createElement('span');
+    menuWrap.className = 'doclib-card-menu-wrap';
+    menuWrap.style.position = 'relative';
+    const menuBtn = document.createElement('button');
+    menuBtn.className = 'memory-item-btn';
+    menuBtn.title = 'Actions';
+    menuBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>';
+    menuBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      // Mobile: the custom 5-item dropdown is too crowded — route through the
+      // shared _showLibDropdown with a small set (Open, Clone) plus Select +
+      // Cancel. Heavier actions (Archive, Delete, Export) live in bulk mode.
+      if (window.innerWidth <= 768) {
+        const items = [];
+        if (doc.session_id) items.push({ label: 'Open', action: () => libraryOpenInSession(doc) });
+        items.push({ label: 'Clone', action: () => libraryImportDocument(doc) });
+        _showLibDropdown(menuBtn, items, { onSelect: () => {
+          libraryEnterSelectMode();
+          _librarySelectedIds.add(doc.id);
+          libraryUpdateBulkCount();
+          libraryRenderGrid();
+        } });
+        return;
+      }
+      const dropdown = menuWrap.querySelector('.doclib-card-dropdown') || document.body.querySelector('.doclib-card-dropdown[data-owner="' + CSS.escape(doc.id) + '"]');
+      if (dropdown) {
+        const isOpen = dropdown.style.display !== 'none' && dropdown.parentElement === document.body;
+        if (isOpen) {
+          hideCardDropdown();
+        } else {
+          // Position fixed on body to escape overflow clipping
+          const rect = menuBtn.getBoundingClientRect();
+          document.body.appendChild(dropdown);
+          dropdown.dataset.owner = doc.id;
+          dropdown.style.cssText = 'position:fixed;z-index:10000;min-width:0;width:max-content;padding:4px;background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.3);backdrop-filter:blur(12px);font-size:12px;display:block;';
+          dropdown.style.top = (rect.bottom + 4) + 'px';
+          dropdown.style.left = 'auto';
+          dropdown.style.right = (window.innerWidth - rect.right) + 'px';
+          // Clamp to viewport
+          requestAnimationFrame(() => {
+            const mr = dropdown.getBoundingClientRect();
+            if (mr.bottom > window.innerHeight - 8) dropdown.style.top = (rect.top - mr.height - 4) + 'px';
+            if (mr.left < 8) { dropdown.style.left = '8px'; dropdown.style.right = 'auto'; }
+          });
+          // Close on outside click or Escape (the latter via the registry).
+          _cardDocClick = (ev) => {
+            if (!dropdown.contains(ev.target) && !menuWrap.contains(ev.target)) hideCardDropdown();
+          };
+          setTimeout(() => document.addEventListener('click', _cardDocClick, true), 0);
+          _cardUnreg = registerMenuDismiss(hideCardDropdown);
+        }
+      }
+    });
+    menuWrap.appendChild(menuBtn);
+
+    // Dropdown menu
+    const dropdown = document.createElement('div');
+    dropdown.className = 'doclib-card-dropdown';
+    dropdown.style.cssText = 'display:none;position:absolute;top:100%;right:0;z-index:1000;min-width:0;width:max-content;padding:4px;background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.3);backdrop-filter:blur(12px);font-size:12px;';
+
+    // Single close path for the card action dropdown, shared by the toggle
+    // button, the outside-click listener, every menu item, and the Escape
+    // arbiter (via registerMenuDismiss). Hides the menu, returns it to its
+    // wrapper, drops the outside-click listener, and unregisters from the
+    // Escape stack. Idempotent — safe to call from whichever path fires first.
+    let _cardUnreg = () => {};
+    let _cardDocClick = null;
+    function hideCardDropdown() {
+      _cardUnreg(); _cardUnreg = () => {};
+      if (_cardDocClick) { document.removeEventListener('click', _cardDocClick, true); _cardDocClick = null; }
+      dropdown.style.display = 'none';
+      if (dropdown.parentElement === document.body) menuWrap.appendChild(dropdown);
+    }
+    dropdown._dismiss = hideCardDropdown;   // bulk removers tear down through this
+
+    const _di = (svg) => `<span class="dropdown-icon">${svg}</span>`;
+    const _openIco = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>';
+
+    // Open
+    const openItem = document.createElement('button');
+    openItem.className = 'dropdown-item-compact';
+    openItem.style.cssText = 'background:none;border:none;width:100%;';
+    openItem.innerHTML = _di(_openIco) + '<span>Open</span>';
+    if (doc.session_id) {
+      openItem.addEventListener('click', (e) => { e.stopPropagation(); hideCardDropdown(); libraryOpenInSession(doc); });
+    } else {
+      // Orphaned doc (closed / session detached) is still openable in the editor
+      // by id — libraryOpenDocument handles the no-session case (#1602).
+      openItem.title = 'Open in the editor';
+      openItem.addEventListener('click', (e) => { e.stopPropagation(); hideCardDropdown(); libraryOpenDocument(doc); });
+    }
+    dropdown.appendChild(openItem);
+
+    // Clone
+    const _cloneIco = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+    const cloneItem = document.createElement('button');
+    cloneItem.className = 'dropdown-item-compact';
+    cloneItem.style.cssText = 'background:none;border:none;width:100%;';
+    cloneItem.innerHTML = _di(_cloneIco) + '<span>Clone</span>';
+    cloneItem.title = 'Clone to active session';
+    cloneItem.addEventListener('click', (e) => { e.stopPropagation(); hideCardDropdown(); libraryImportDocument(doc); });
+    dropdown.appendChild(cloneItem);
+
+    // Export
+    const _exportIco = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>';
+    const exportItem = document.createElement('button');
+    exportItem.className = 'dropdown-item-compact';
+    exportItem.style.cssText = 'background:none;border:none;width:100%;';
+    exportItem.innerHTML = _di(_exportIco) + '<span>Export</span>';
+    exportItem.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      hideCardDropdown();
+      try {
+        const res = await fetch(`${API_BASE}/api/document/${doc.id}`);
+        if (!res.ok) throw new Error('Failed');
+        const full = await res.json();
+        const extMap = { javascript: '.js', python: '.py', html: '.html', css: '.css', markdown: '.md', json: '.json', yaml: '.yml', bash: '.sh', sql: '.sql', rust: '.rs', go: '.go', java: '.java', c: '.c', cpp: '.cpp', typescript: '.ts', ruby: '.rb', php: '.php', xml: '.xml', toml: '.toml', ini: '.ini' };
+        const ext = extMap[full.language] || '.txt';
+        const blob = new Blob([full.current_content || ''], { type: 'text/plain' });
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = (full.title || 'document') + ext;
+        a.click();
+        URL.revokeObjectURL(a.href);
+      } catch { if (uiModule) uiModule.showError('Failed to export document'); }
+    });
+    dropdown.appendChild(exportItem);
+
+    // Archive / Restore — soft-archive a doc out of the main list, or bring it back.
+    const _archiveIco = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>';
+    const archiveItem = document.createElement('button');
+    archiveItem.className = 'dropdown-item-compact';
+    archiveItem.style.cssText = 'background:none;border:none;width:100%;';
+    archiveItem.innerHTML = _di(_archiveIco) + `<span>${_libraryArchivedView ? 'Restore' : 'Archive'}</span>`;
+    archiveItem.title = _libraryArchivedView ? 'Restore to active documents' : 'Archive (hide from the main list)';
+    archiveItem.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      hideCardDropdown();
+      const toArchived = !_libraryArchivedView;
+      try {
+        const res = await fetch(`${API_BASE}/api/document/${doc.id}/archive?archived=${toArchived}`, { method: 'POST', credentials: 'same-origin' });
+        if (!res.ok) throw new Error('failed');
+        // Drop it from the current view (it no longer belongs here) and refresh.
+        libraryRemoveDocumentFromState(doc.id);
+        libraryRenderGrid();
+        if (uiModule) uiModule.showToast(toArchived ? 'Archived' : 'Restored');
+      } catch { if (uiModule) uiModule.showError('Failed to ' + (toArchived ? 'archive' : 'restore')); }
+    });
+    dropdown.appendChild(archiveItem);
+
+    // Delete
+    const _deleteIco = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>';
+    const deleteItem = document.createElement('button');
+    deleteItem.className = 'dropdown-item-compact dropdown-item-danger';
+    deleteItem.style.cssText = 'background:none;border:none;width:100%;';
+    deleteItem.innerHTML = _di(_deleteIco) + '<span>Delete</span>';
+    deleteItem.addEventListener('click', (e) => { e.stopPropagation(); hideCardDropdown(); libraryDeleteSingle(doc.id, card); });
+    dropdown.appendChild(deleteItem);
+
+    menuWrap.appendChild(dropdown);
+    actionsWrap.appendChild(menuWrap);
+    card.appendChild(actionsWrap);
+
+    // Hidden header for expand/preview compatibility
+    card.appendChild(header);
+
+    // Inject library card hover styles once
+    if (!document.getElementById('doclib-card-styles')) {
+      const s = document.createElement('style');
+      s.id = 'doclib-card-styles';
+      s.textContent = `.doclib-card:hover .doclib-card-icon-btn{opacity:.4}.doclib-card-icon-btn:hover{opacity:1!important}.doclib-card-text-btn{background:none;border:1px solid var(--border);color:var(--fg-muted);font-size:10px;padding:3px 8px;border-radius:4px;cursor:pointer;transition:border-color .15s,color .15s}.doclib-card-text-btn:hover{border-color:var(--accent,var(--red));color:var(--accent,var(--red))}.doclib-card-text-btn-danger{border-color:var(--color-danger,#e06c75)!important;color:var(--color-danger,#e06c75)!important}.doclib-card-text-btn-danger:hover{border-color:#ff4d4d!important;color:#ff4d4d!important}.doclib-card-chevron{display:none;align-items:center;justify-content:center;align-self:center;opacity:0.6;transition:transform .15s ease;flex-shrink:0;height:14px;line-height:0}.doclib-card-expanded .doclib-card-chevron{display:inline-flex;transform:rotate(180deg)}.doclib-card-chevron svg{display:block}`;
+      document.head.appendChild(s);
+    }
+
+    // Preview — hidden by default, shown on expand
+    const preview = document.createElement('div');
+    preview.className = 'doclib-card-preview';
+    const pre = document.createElement('pre');
+    const code = document.createElement('code');
+    try {
+      if (doc.language && doc.language !== 'text' && window.hljs && !_librarySearch) {
+        code.innerHTML = window.hljs.highlight(doc.preview || '', { language: doc.language }).value;
+      } else if (_librarySearch) {
+        // While searching, highlight matched terms in the preview (plain
+        // text) rather than syntax-highlighting — the match is what matters.
+        code.innerHTML = _hlSearch(doc.preview || '');
+      } else {
+        code.textContent = doc.preview || '';
+      }
+    } catch {
+      code.textContent = doc.preview || '';
+    }
+    pre.appendChild(code);
+    preview.appendChild(pre);
+
+    // Expanded-only action bar — inside preview
+    const expandedActions = document.createElement('div');
+    expandedActions.className = 'doclib-card-expanded-actions';
+
+    const openBtn = document.createElement('button');
+    openBtn.className = 'doclib-card-text-btn doclib-card-action-btn';
+    openBtn.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><path d="M5 12h14M13 5l7 7-7 7"/></svg>Open';
+    if (doc.session_id) {
+      openBtn.title = 'Open in original session';
+      openBtn.addEventListener('click', (e) => { e.stopPropagation(); libraryOpenInSession(doc); });
+    } else {
+      // Orphaned doc (closed / session detached) is still openable in the editor
+      // by id — libraryOpenDocument handles the no-session case (#1602).
+      openBtn.title = 'Open in the editor';
+      openBtn.addEventListener('click', (e) => { e.stopPropagation(); libraryOpenDocument(doc); });
+    }
+
+    const cloneBtn = document.createElement('button');
+    cloneBtn.className = 'doclib-card-text-btn doclib-card-action-btn';
+    cloneBtn.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>Clone';
+    cloneBtn.title = 'Clone — copy to active session';
+    cloneBtn.addEventListener('click', (e) => { e.stopPropagation(); libraryImportDocument(doc); });
+
+    const deleteBtn = document.createElement('button');
+    deleteBtn.className = 'doclib-card-text-btn doclib-card-action-btn doclib-card-text-btn-danger';
+    deleteBtn.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>Delete';
+    deleteBtn.addEventListener('click', (e) => { e.stopPropagation(); libraryDeleteSingle(doc.id, card); });
+
+    // Archive sits next to Delete on the LEFT — same lineup as the chat
+    // and research footers. Label flips to Restore inside the Archive view.
+    const archiveBtn = document.createElement('button');
+    archiveBtn.className = 'doclib-card-text-btn doclib-card-action-btn';
+    archiveBtn.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>' + (_libraryArchivedView ? 'Restore' : 'Archive');
+    archiveBtn.title = _libraryArchivedView ? 'Restore to active documents' : 'Archive (hide from the main list)';
+    archiveBtn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      const toArchived = !_libraryArchivedView;
+      try {
+        const res = await fetch(`${API_BASE}/api/document/${doc.id}/archive?archived=${toArchived}`, { method: 'POST', credentials: 'same-origin' });
+        if (!res.ok) throw new Error('failed');
+        libraryRemoveDocumentFromState(doc.id);
+        libraryRenderGrid();
+        if (uiModule) uiModule.showToast(toArchived ? 'Archived' : 'Restored');
+      } catch { if (uiModule) uiModule.showError('Failed to ' + (toArchived ? 'archive' : 'restore')); }
+    });
+
+    const leftGroup = document.createElement('div');
+    leftGroup.className = 'doclib-action-group';
+    const btnRow = document.createElement('div');
+    btnRow.className = 'doclib-action-btn-row';
+    // Export lives in the ⋮ menu — keep the footer uncrowded with Clone + Open.
+    btnRow.appendChild(cloneBtn);
+    btnRow.appendChild(openBtn);
+    leftGroup.appendChild(btnRow);
+    // Delete furthest LEFT, then Archive; Open/Clone group on the RIGHT.
+    // Nudge the Delete/Archive pair 8px left for alignment.
+    deleteBtn.style.cssText += ';position:relative;left:-8px;';
+    archiveBtn.style.cssText += ';position:relative;left:-8px;';
+    expandedActions.appendChild(deleteBtn);
+    expandedActions.appendChild(archiveBtn);
+    expandedActions.appendChild(leftGroup);
+
+    preview.appendChild(expandedActions);
+    card.appendChild(preview);
+
+    card.addEventListener('click', () => {
+      if (card._suppressNextClick) { card._suppressNextClick = false; return; }
+      if (_librarySelectMode) {
+        const cb = card.querySelector('.memory-select-cb');
+        if (cb) { cb.checked = !cb.checked; cb.dispatchEvent(new Event('change')); }
+      } else {
+        libraryExpandCard(card, doc);
+      }
+    });
+    _attachLongPressMenu(card, '.memory-item-btn');
+    return card;
+  }
+
+  async function libraryExpandCard(card, doc) {
+    const grid = card.closest('.doclib-grid');
+    const instant = card?.dataset?.spaceToggle === '1';
+
+    // Already expanded — collapse
+    if (card.classList.contains('doclib-card-expanded')) {
+      _collapseExpandedCard(card);
+      return;
+    }
+
+    // Collapse any other expanded card
+    if (grid) {
+      grid.querySelectorAll('.doclib-card-expanded').forEach(c => _collapseExpandedCard(c));
+    }
+
+    // Fade siblings out before the CSS display:none kicks in
+    const siblings = grid ? [...grid.querySelectorAll('.doclib-card')].filter(c => c !== card) : [];
+    // Force explicit starting opacity so the first transition works
+    siblings.forEach(s => { s.style.opacity = '1'; });
+    // Force reflow so the browser registers the starting value
+    if (!instant) {
+      if (siblings.length) siblings[0].offsetHeight;
+      siblings.forEach(s => { s.style.transition = 'opacity 0.12s ease'; s.style.opacity = '0'; });
+    }
+
+    // Capture the full grid + toolbar height so the modal stays the same
+    // size on desktop. On mobile the modal is full-height and we want the
+    // grid to claim all available space — skip the lock there.
+    const isMobile = window.innerWidth <= 768;
+    const toolbar = grid ? grid.closest('.admin-card')?.querySelector('.memory-toolbar') : null;
+    const toolbarH = toolbar ? toolbar.offsetHeight : 0;
+    if (grid && !isMobile) {
+      grid.style.minHeight = (grid.offsetHeight + toolbarH) + 'px';
+      grid.style.maxHeight = (grid.offsetHeight + toolbarH) + 'px';
+    }
+
+    // Wait for fade-out, then expand
+    if (!instant) await new Promise(r => setTimeout(r, 120));
+
+    card.classList.add('doclib-card-expanded');
+    if (grid) grid.scrollTop = 0;
+
+    // Clean up sibling inline styles (CSS display:none takes over now)
+    siblings.forEach(s => { s.style.transition = ''; s.style.opacity = ''; });
+
+    // Load full content into preview area
+    const preview = card.querySelector('.doclib-card-preview');
+    if (!preview) return;
+
+    const actionsBar = preview.querySelector('.doclib-card-expanded-actions');
+    const existingPre = preview.querySelector('pre');
+
+    try {
+      const res = await fetch(`${API_BASE}/api/document/${doc.id}`);
+      if (!res.ok) throw new Error('Failed');
+      const full = await res.json();
+      const content = full.current_content || '';
+      const lang = full.language || doc.language || 'text';
+
+      // PDF-backed docs have a marker comment in their markdown — show the
+      // rendered PDF in an iframe instead of dumping markdown source.
+      const isPdfDoc = /<!--\s*pdf_(?:form_)?source\s+upload_id="[^"]+"/.test(content);
+      const existingFrame = preview.querySelector('.doclib-card-pdf-frame');
+
+      if (isPdfDoc) {
+        const frame = document.createElement('iframe');
+        frame.className = 'doclib-card-pdf-frame';
+        frame.src = `${API_BASE}/api/document/${doc.id}/render-pdf?t=${Date.now()}`;
+        frame.style.cssText = 'width:100%;height:60vh;border:1px solid var(--border);border-radius:6px;background:var(--bg);opacity:0;transition:opacity 0.15s ease;';
+        if (existingPre) existingPre.remove();
+        if (existingFrame) existingFrame.remove();
+        preview.insertBefore(frame, preview.firstChild);
+        if (actionsBar && !preview.contains(actionsBar)) preview.appendChild(actionsBar);
+        requestAnimationFrame(() => { frame.style.opacity = '1'; });
+        return;
+      }
+
+      const pre = document.createElement('pre');
+      const code = document.createElement('code');
+      // Syntax highlighting is synchronous and O(n) — running it over a whole
+      // large document froze the main thread on click (the "lag"). Only
+      // highlight up to a cap; bigger docs render as plain text (still fully
+      // shown) so the preview opens instantly. Markdown gains little from
+      // highlighting anyway, so skip it there.
+      const HL_CAP = 20000;
+      try {
+        if (lang && lang !== 'text' && lang !== 'markdown' && window.hljs && content.length <= HL_CAP) {
+          code.innerHTML = window.hljs.highlight(content, { language: lang }).value;
+        } else {
+          code.textContent = content;
+        }
+      } catch {
+        code.textContent = content;
+      }
+      pre.appendChild(code);
+
+      // Swap content — fade in the full version
+      if (existingPre) existingPre.remove();
+      if (existingFrame) existingFrame.remove();
+      pre.style.opacity = '0';
+      preview.insertBefore(pre, preview.firstChild);
+      if (actionsBar && !preview.contains(actionsBar)) preview.appendChild(actionsBar);
+      requestAnimationFrame(() => {
+        pre.style.transition = 'opacity 0.15s ease';
+        pre.style.opacity = '1';
+      });
+    } catch (e) {
+      // On error, keep existing preview if available
+      if (!existingPre) {
+        preview.innerHTML = '<div style="padding:8px;color:var(--color-error);font-size:10px;">Failed to load</div>';
+      }
+      if (actionsBar && !preview.contains(actionsBar)) preview.appendChild(actionsBar);
+    }
+  }
+
+  function libraryRenderLoadMore() {
+    // Documents now reveal in 20-at-a-time chunks via the inline "Load more"
+    // rendered inside libraryRenderGrid (matching the Chats tab). The legacy
+    // server-pagination button + auto-fill are retired to avoid a double
+    // control and surprise auto-loading.
+    const legacy = document.getElementById('doclib-load-more');
+    if (legacy) legacy.style.display = 'none';
+  }
+
+  async function libraryOpenDocument(doc) {
+    closeLibrary();
+    // Orphaned doc (session deleted) — just open in editor without switching session
+    if (!doc.session_id) {
+      _loadDocument(doc.id);
+      return;
+    }
+    const currentSessionId = sessionModule && sessionModule.getCurrentSessionId();
+    if (doc.session_id !== currentSessionId) {
+      await sessionModule.selectSession(doc.session_id);
+    }
+    _loadDocument(doc.id);
+  }
+
+  /** Open a document in its linked session */
+  async function libraryOpenInSession(doc) {
+    if (!doc.session_id) return;
+    closeLibrary();
+
+    // Step 1: switch session if needed and wait for it to load
+    const currentSessionId = sessionModule && sessionModule.getCurrentSessionId();
+    if (doc.session_id !== currentSessionId) {
+      await sessionModule.selectSession(doc.session_id);
+      // Give the session UI a moment to settle
+      await new Promise(r => setTimeout(r, 150));
+    }
+
+    // Step 2: ensure doc is in tabs
+    const docs = _getDocs();
+    if (!docs.has(doc.id)) {
+      const res = await fetch(`${API_BASE}/api/document/${doc.id}`);
+      if (res.ok) {
+        const full = await res.json();
+        _addDocToTabs(full, doc.session_id);
+      }
+    }
+
+    // Step 3: open panel (slide-in is handled by openPanel)
+    if (!_isOpenFn()) _openPanel();
+
+    _switchToDoc(doc.id);
+    _syncDocIndicator();
+  }
+
+  /** Copy a document from the library into the current session */
+  async function libraryImportDocument(doc) {
+    let sessionId = sessionModule && sessionModule.getCurrentSessionId();
+    if (!sessionId) {
+      // Create a new session if none exists
+      if (sessionModule && sessionModule.hasPendingChat && sessionModule.hasPendingChat()) {
+        const ok = await sessionModule.materializePendingSession();
+        if (ok) sessionId = sessionModule.getCurrentSessionId();
+      }
+      if (!sessionId) {
+        // No pending chat either — trigger new session, preserving the current model
+        const curModel = sessionModule.getCurrentModel ? sessionModule.getCurrentModel() : null;
+        const sessions = sessionModule ? sessionModule.getSessions() : [];
+        // Prefer the session matching the current model, otherwise fall back to first with a model
+        const withModel = sessions.filter(s => s.endpoint_url && s.model);
+        const match = (curModel && withModel.find(s => s.model === curModel)) || withModel[0];
+        if (match) {
+          sessionModule.createDirectChat(match.endpoint_url, match.model, match.endpoint_id);
+          const ok = await sessionModule.materializePendingSession();
+          if (ok) sessionId = sessionModule.getCurrentSessionId();
+        }
+      }
+      if (!sessionId) {
+        if (uiModule) uiModule.showError('Could not create a session');
+        return;
+      }
+    }
+    try {
+      // Fetch full content of the source document
+      const srcRes = await fetch(`${API_BASE}/api/document/${doc.id}`);
+      if (!srcRes.ok) throw new Error('Failed to fetch document');
+      const src = await srcRes.json();
+
+      // Deduplicate title — append (2), (3), etc. if name already exists in session
+      let baseTitle = src.title || doc.title || 'Untitled';
+      const existingTitles = new Set();
+      const docs = _getDocs();
+      for (const [, d] of docs) {
+        if (d.sessionId === sessionId && d.title) existingTitles.add(d.title);
+      }
+      if (existingTitles.has(baseTitle)) {
+        // Strip existing (N) suffix to get the root name
+        const root = baseTitle.replace(/\s*\(\d+\)$/, '');
+        let n = 2;
+        while (existingTitles.has(root + ' (' + n + ')')) n++;
+        baseTitle = root + ' (' + n + ')';
+      }
+
+      // Create a new document copy in the current session
+      const res = await fetch(`${API_BASE}/api/document`, {
+        method: 'POST',
+        credentials: 'same-origin',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          session_id: sessionId,
+          // Preserve the source's type; default to markdown when unknown
+          // (the backend also sniffs, but this keeps the tab label correct).
+          language: src.language || doc.language || 'markdown',
+          content: src.current_content || '',
+        }),
+      });
+      if (!res.ok) throw new Error('Failed to create document');
+      const created = await res.json();
+      closeLibrary();
+      _addDocToTabs(created, sessionId);
+      if (!_isOpenFn()) _openPanel();
+
+      _switchToDoc(created.id);
+      _syncDocIndicator();
+      if (uiModule) uiModule.showToast('Document cloned to session');
+    } catch (e) {
+      console.error('Failed to import document:', e);
+      if (uiModule) uiModule.showError('Failed to import document');
+    }
+  }
+
+  // ---- Library bulk operations ----
+
+  function libraryEnterSelectMode() {
+    _librarySelectMode = true;
+    _librarySelectedIds.clear();
+    const bulkBar = document.getElementById('doclib-bulk-bar');
+    const selectBtn = document.getElementById('doclib-select-btn');
+    if (bulkBar) bulkBar.classList.remove('hidden');
+    if (selectBtn) { selectBtn.classList.add('active'); selectBtn.textContent = 'Cancel'; }
+    libraryUpdateBulkCount();
+    libraryRenderGrid();
+  }
+
+  function libraryExitSelectMode() {
+    _librarySelectMode = false;
+    _librarySelectedIds.clear();
+    const bulkBar = document.getElementById('doclib-bulk-bar');
+    const selectBtn = document.getElementById('doclib-select-btn');
+    const selectAll = document.getElementById('doclib-select-all');
+    if (bulkBar) bulkBar.classList.add('hidden');
+    if (selectBtn) { selectBtn.classList.remove('active'); selectBtn.textContent = 'Select'; }
+    if (selectAll) selectAll.checked = false;
+    libraryRenderGrid();
+  }
+
+  function libraryToggleSelectItem(id) {
+    if (_librarySelectedIds.has(id)) {
+      _librarySelectedIds.delete(id);
+    } else {
+      _librarySelectedIds.add(id);
+    }
+    libraryUpdateBulkCount();
+  }
+
+  function libraryToggleSelectAll() {
+    const selectAllEl = document.getElementById('doclib-select-all');
+    if (!selectAllEl) return;
+    if (selectAllEl.checked) {
+      _libraryDocs.forEach(d => _librarySelectedIds.add(d.id));
+    } else {
+      _librarySelectedIds.clear();
+    }
+    libraryUpdateBulkCount();
+    libraryRenderGrid();
+  }
+
+  function libraryUpdateBulkCount() {
+    const countEl = document.getElementById('doclib-selected-count');
+    const actionsBtn = document.getElementById('doclib-bulk-actions');
+    if (countEl) countEl.textContent = `${_librarySelectedIds.size} Selected`;
+    if (actionsBtn) actionsBtn.style.color = _librarySelectedIds.size > 0 ? 'var(--fg)' : '';
+    // Legacy per-action buttons no longer rendered — guard so the rest of the
+    // function (if anything still references them) doesn't crash.
+    const deleteBtn = document.getElementById('doclib-bulk-delete');
+    const exportBtn = document.getElementById('doclib-bulk-export');
+    const archiveBtn = document.getElementById('doclib-bulk-archive');
+    const cloneBtn = document.getElementById('doclib-bulk-clone');
+    if (deleteBtn) deleteBtn.disabled = _librarySelectedIds.size === 0;
+    if (exportBtn) exportBtn.disabled = _librarySelectedIds.size === 0;
+    if (cloneBtn) cloneBtn.disabled = _librarySelectedIds.size === 0;
+    if (archiveBtn) {
+      archiveBtn.disabled = _librarySelectedIds.size === 0;
+      archiveBtn.textContent = _libraryArchivedView ? 'Restore' : 'Archive';
+    }
+  }
+
+  async function libraryDeleteSingle(docId, card) {
+    if (uiModule && uiModule.styledConfirm) {
+      const ok = await uiModule.styledConfirm('Delete this document?', { confirmText: 'Delete', danger: true });
+      if (!ok) return;
+    } else if (!confirm('Delete this document?')) {
+      return;
+    }
+    try {
+      const res = await fetch(`${API_BASE}/api/document/${docId}`, { method: 'DELETE', credentials: 'same-origin' });
+      if (!res.ok) {
+        let detail = `HTTP ${res.status}`;
+        try { const j = await res.json(); if (j?.detail) detail = j.detail; } catch {}
+        throw new Error(detail);
+      }
+      if (card) {
+        card.classList.add('doclib-card-deleting');
+        card.addEventListener('transitionend', () => card.remove(), { once: true });
+        setTimeout(() => { if (card.parentElement) card.remove(); }, 400);
+      }
+      libraryRemoveDocumentFromState(docId);
+      if (uiModule) uiModule.showToast('Document deleted');
+    } catch (e) {
+      if (uiModule) uiModule.showError(`Failed to delete document: ${e.message || e}`);
+    }
+  }
+
+  async function libraryBulkDelete() {
+    if (_librarySelectedIds.size === 0) return;
+    const count = _librarySelectedIds.size;
+    if (uiModule && uiModule.styledConfirm) {
+      const ok = await uiModule.styledConfirm(
+        `Delete ${count} document${count !== 1 ? 's' : ''}?`,
+        { confirmText: 'Delete', danger: true }
+      );
+      if (!ok) return;
+    } else if (!confirm(`Delete ${count} document${count !== 1 ? 's' : ''}?`)) {
+      return;
+    }
+
+    let deleted = 0;
+    let failed = 0;
+    const deletedIds = [];
+    for (const id of _librarySelectedIds) {
+      try {
+        const res = await fetch(`${API_BASE}/api/document/${id}`, { method: 'DELETE', credentials: 'same-origin' });
+        if (res.ok) {
+          deleted++;
+          deletedIds.push(id);
+        }
+        else { failed++; console.warn('Delete failed for', id, 'status', res.status); }
+      } catch (e) {
+        failed++;
+        console.error('Failed to delete document:', id, e);
+      }
+    }
+
+    for (const id of deletedIds) {
+      const card = document.querySelector(`.doclib-card[data-doc-id="${CSS.escape(String(id))}"]`);
+      if (card) card.classList.add('doclib-card-deleting');
+    }
+    if (deletedIds.length) await new Promise(r => setTimeout(r, 320));
+    libraryExitSelectMode();
+    await libraryFetch(false);
+    if (uiModule) {
+      const msg = failed > 0
+        ? `Deleted ${deleted} · ${failed} failed`
+        : `Deleted ${deleted} document${deleted !== 1 ? 's' : ''}`;
+      (failed > 0 ? uiModule.showError : uiModule.showToast)(msg);
+    }
+  }
+
+  async function libraryBulkArchive() {
+    if (_librarySelectedIds.size === 0) return;
+    const toArchived = !_libraryArchivedView;
+    const ids = [..._librarySelectedIds];
+    let done = 0, failed = 0;
+    for (const id of ids) {
+      try {
+        const res = await fetch(`${API_BASE}/api/document/${id}/archive?archived=${toArchived}`, { method: 'POST', credentials: 'same-origin' });
+        if (res.ok) done++; else failed++;
+      } catch { failed++; }
+    }
+    libraryExitSelectMode();
+    await libraryFetch(false);
+    if (uiModule) {
+      const verb = toArchived ? 'Archived' : 'Restored';
+      const msg = failed > 0 ? `${verb} ${done} · ${failed} failed` : `${verb} ${done} document${done !== 1 ? 's' : ''}`;
+      (failed > 0 ? uiModule.showError : uiModule.showToast)(msg);
+    }
+  }
+
+  // Bulk "Clone" — reuse libraryImportDocument for each selected doc.
+  // It handles session resolution + a possible new-session creation once
+  // (subsequent calls in the loop see the now-resolved session).
+  async function libraryBulkClone() {
+    if (_librarySelectedIds.size === 0) return;
+    const ids = [..._librarySelectedIds];
+    let done = 0, failed = 0;
+    for (const id of ids) {
+      const doc = _libraryDocs.find(d => d.id === id);
+      if (!doc) { failed++; continue; }
+      try {
+        const ok = await libraryImportDocument(doc);
+        if (ok === false) failed++; else done++;
+      } catch { failed++; }
+    }
+    libraryExitSelectMode();
+    if (uiModule) {
+      const msg = failed > 0
+        ? `Cloned ${done} · ${failed} failed`
+        : `Cloned ${done} document${done !== 1 ? 's' : ''}`;
+      (failed > 0 ? uiModule.showError : uiModule.showToast)(msg);
+    }
+  }
+
+  async function libraryBulkExport() {
+    if (_librarySelectedIds.size === 0) return;
+    // More than 5 → one server-built .zip (mirrors the gallery's bulk export;
+    // browsers also block a flood of individual downloads).
+    if (_librarySelectedIds.size > 5) {
+      const ids = [..._librarySelectedIds];
+      try {
+        if (uiModule) uiModule.showToast(`Zipping ${ids.length} documents…`);
+        const res = await fetch(`${API_BASE}/api/documents/export-zip`, {
+          method: 'POST', credentials: 'same-origin',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ ids }),
+        });
+        if (!res.ok) throw new Error('zip failed');
+        const blob = await res.blob();
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'documents.zip';
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        setTimeout(() => URL.revokeObjectURL(url), 2000);
+        if (uiModule) uiModule.showToast(`Exported ${ids.length} documents (zip)`);
+      } catch (e) {
+        if (uiModule) uiModule.showError('Failed to create zip');
+      }
+      return;
+    }
+    const extMap = {
+      javascript: '.js', python: '.py', html: '.html', css: '.css',
+      markdown: '.md', json: '.json', yaml: '.yml', bash: '.sh',
+      sql: '.sql', rust: '.rs', go: '.go', java: '.java', c: '.c', cpp: '.cpp',
+      typescript: '.ts', ruby: '.rb', php: '.php', text: '.txt',
+      xml: '.xml', toml: '.toml', ini: '.ini',
+    };
+
+    const docs = await Promise.all([..._librarySelectedIds].map(async id => {
+      try {
+        const res = await fetch(`${API_BASE}/api/document/${id}`);
+        if (!res.ok) return null;
+        return await res.json();
+      } catch (e) {
+        console.error('Failed to export document:', id, e);
+        return null;
+      }
+    }));
+    for (const doc of docs) {
+      if (!doc) continue;
+      const ext = extMap[doc.language] || '.txt';
+      const filename = (doc.title || 'document') + (doc.title && doc.title.includes('.') ? '' : ext);
+      const blob = new Blob([doc.current_content || ''], { type: 'text/plain' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+    if (uiModule) uiModule.showToast(`Exported ${_librarySelectedIds.size} document${_librarySelectedIds.size !== 1 ? 's' : ''}`);
+  }
+
+  /** Lazy-load SheetJS for spreadsheet parsing */
+  let _xlsxReady = null;
+  function ensureXLSX() {
+    if (_xlsxReady) return _xlsxReady;
+    if (window.XLSX) return (_xlsxReady = Promise.resolve());
+    _xlsxReady = new Promise((resolve, reject) => {
+      const s = document.createElement('script');
+      s.src = '/static/lib/xlsx.full.min.js';
+      s.onload = resolve;
+      s.onerror = () => reject(new Error('Failed to load XLSX library'));
+      document.head.appendChild(s);
+    });
+    return _xlsxReady;
+  }
+
+  let _mammothReady = null;
+  function ensureMammoth() {
+    if (_mammothReady) return _mammothReady;
+    if (window.mammoth) return (_mammothReady = Promise.resolve());
+    _mammothReady = new Promise((resolve, reject) => {
+      const s = document.createElement('script');
+      s.src = '/static/lib/mammoth.browser.min.js';
+      s.onload = resolve;
+      s.onerror = () => reject(new Error('Failed to load DOCX library'));
+      document.head.appendChild(s);
+    });
+    return _mammothReady;
+  }
+
+  /** Convert HTML from mammoth to clean markdown */
+  function htmlToMarkdown(html) {
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    let md = '';
+    function walk(node) {
+      if (node.nodeType === 3) { md += node.textContent; return; }
+      if (node.nodeType !== 1) return;
+      const tag = node.tagName.toLowerCase();
+      if (tag === 'h1') { md += '\n# '; walkChildren(node); md += '\n'; }
+      else if (tag === 'h2') { md += '\n## '; walkChildren(node); md += '\n'; }
+      else if (tag === 'h3') { md += '\n### '; walkChildren(node); md += '\n'; }
+      else if (tag === 'h4') { md += '\n#### '; walkChildren(node); md += '\n'; }
+      else if (tag === 'strong' || tag === 'b') { md += '**'; walkChildren(node); md += '**'; }
+      else if (tag === 'em' || tag === 'i') { md += '*'; walkChildren(node); md += '*'; }
+      else if (tag === 'a') { md += '['; walkChildren(node); md += `](${node.href || ''})`; }
+      else if (tag === 'br') { md += '\n'; }
+      else if (tag === 'p') { md += '\n'; walkChildren(node); md += '\n'; }
+      else if (tag === 'ul' || tag === 'ol') { md += '\n'; walkChildren(node); }
+      else if (tag === 'li') {
+        const parent = node.parentElement?.tagName?.toLowerCase();
+        if (parent === 'ol') {
+          const idx = Array.from(node.parentElement.children).indexOf(node) + 1;
+          md += `${idx}. `;
+        } else { md += '- '; }
+        walkChildren(node);
+        md += '\n';
+      }
+      else if (tag === 'table') { md += '\n'; convertTable(node); md += '\n'; }
+      else if (tag === 'img') {
+        // Skip embedded base64 images — they produce huge unreadable blobs
+        const src = node.src || '';
+        if (!src.startsWith('data:')) {
+          md += `![${node.alt || ''}](${src})`;
+        } else if (node.alt) {
+          md += `*[image: ${node.alt}]*`;
+        }
+      }
+      else { walkChildren(node); }
+    }
+    function walkChildren(node) { for (const child of node.childNodes) walk(child); }
+    function convertTable(table) {
+      const rows = table.querySelectorAll('tr');
+      rows.forEach((tr, i) => {
+        const cells = tr.querySelectorAll('th, td');
+        md += '| ' + Array.from(cells).map(c => c.textContent.trim()).join(' | ') + ' |\n';
+        if (i === 0) md += '| ' + Array.from(cells).map(() => '---').join(' | ') + ' |\n';
+      });
+    }
+    walkChildren(doc.body);
+    return md.replace(/\n{3,}/g, '\n\n').trim();
+  }
+
+  /** Read file contents — handles text, spreadsheet, and DOCX formats */
+  async function readFileContent(file) {
+    const name = file.name.toLowerCase();
+    const isSpreadsheet = name.endsWith('.xlsx') || name.endsWith('.xls') || name.endsWith('.ods');
+    const isDocx = name.endsWith('.docx');
+
+    if (isSpreadsheet) {
+      await ensureXLSX();
+      const buf = await file.arrayBuffer();
+      const wb = window.XLSX.read(buf, { type: 'array' });
+      // Convert each sheet to CSV, join with a header per sheet
+      const parts = [];
+      for (const sheetName of wb.SheetNames) {
+        if (wb.SheetNames.length > 1) parts.push(`# Sheet: ${sheetName}`);
+        parts.push(window.XLSX.utils.sheet_to_csv(wb.Sheets[sheetName]));
+      }
+      return parts.join('\n\n');
+    }
+
+    if (isDocx) {
+      await ensureMammoth();
+      const buf = await file.arrayBuffer();
+      const result = await window.mammoth.convertToHtml({ arrayBuffer: buf });
+      return htmlToMarkdown(result.value);
+    }
+
+    // Plain text
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = () => reject(reader.error);
+      reader.readAsText(file);
+    });
+  }
+
+  /** Import files from disk into the document library */
+  async function libraryImportFiles(fileList) {
+    const EXT_TO_LANG = {
+      '.py': 'python', '.js': 'javascript', '.ts': 'typescript',
+      '.html': 'html', '.htm': 'html', '.css': 'css', '.md': 'markdown',
+      '.json': 'json', '.yml': 'yaml', '.yaml': 'yaml', '.sh': 'bash',
+      '.bash': 'bash', '.sql': 'sql', '.rs': 'rust', '.go': 'go',
+      '.java': 'java', '.c': 'c', '.cpp': 'cpp', '.h': 'c', '.hpp': 'cpp',
+      '.rb': 'ruby', '.php': 'php', '.xml': 'xml',
+      '.toml': 'toml', '.ini': 'ini', '.txt': '', '.log': '',
+      '.cfg': 'ini', '.conf': 'ini', '.env': '', '.jsx': 'javascript',
+      '.tsx': 'typescript', '.vue': 'html', '.svelte': 'html',
+      '.scss': 'css', '.sass': 'css', '.less': 'css',
+      '.csv': 'csv', '.tsv': 'csv',
+      '.xlsx': 'csv', '.xls': 'csv', '.ods': 'csv',
+      '.docx': 'markdown', '.doc': 'markdown',
+    };
+
+    let imported = 0;
+    let failed = 0;
+    let _firstErr = '';
+
+    // Library imports aren't tied to a chat — the backend now accepts a
+    // session-less "library" document, so no session_id is sent.
+    for (const file of fileList) {
+      try {
+        const name = file.name;
+        const dotIdx = name.lastIndexOf('.');
+        const ext = dotIdx >= 0 ? name.slice(dotIdx).toLowerCase() : '';
+        const baseTitle = dotIdx > 0 ? name.slice(0, dotIdx) : name;
+        const language = EXT_TO_LANG[ext] !== undefined ? EXT_TO_LANG[ext] : null;
+
+        const isSpreadsheet = ['.xlsx', '.xls', '.ods'].includes(ext);
+        const isPdf = ext === '.pdf';
+
+        if (isPdf) {
+          // Backend handles save + AcroForm detection in one shot — picks the
+          // right doc kind so fillable forms get clickable inputs in the PDF
+          // view, and plain PDFs get the static page-image viewer.
+          const fd = new FormData();
+          fd.append('file', file);
+          const res = await fetch(`${API_BASE}/api/documents/import-pdf`, {
+            method: 'POST',
+            body: fd,
+          });
+          if (!res.ok) {
+            let _e = `HTTP ${res.status}`;
+            try { const _j = await res.json(); _e = _j.detail || _j.error || _e; } catch {}
+            throw new Error('PDF import failed: ' + _e);
+          }
+          imported++;
+          continue;
+        }
+
+        if (isSpreadsheet) {
+          // Multi-sheet: create one document per sheet
+          await ensureXLSX();
+          const buf = await file.arrayBuffer();
+          const wb = window.XLSX.read(buf, { type: 'array' });
+          for (const sheetName of wb.SheetNames) {
+            const csv = window.XLSX.utils.sheet_to_csv(wb.Sheets[sheetName]);
+            if (!csv.trim()) continue;
+            const sheetTitle = wb.SheetNames.length > 1
+              ? `${baseTitle} - ${sheetName}` : baseTitle;
+            const res = await fetch(`${API_BASE}/api/document`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ title: sheetTitle, language: 'csv', content: csv }),
+            });
+            if (!res.ok) throw new Error('Server error');
+          }
+          imported++;
+        } else {
+          const content = await readFileContent(file);
+          const res = await fetch(`${API_BASE}/api/document`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ title: baseTitle, language, content }),
+          });
+          if (!res.ok) throw new Error('Server error');
+          imported++;
+        }
+      } catch (e) {
+        console.error('Failed to import file:', file.name, e);
+        if (!_firstErr) _firstErr = (e && e.message) || String(e);
+        failed++;
+      }
+    }
+
+    const msg = `Imported ${imported} file${imported !== 1 ? 's' : ''}` +
+      (failed ? `, ${failed} failed${_firstErr ? ' — ' + _firstErr : ''}` : '');
+    if (failed && uiModule) uiModule.showError(msg);
+    else if (uiModule) uiModule.showToast(msg);
+    await libraryFetch(false);
+  }
+
+  export function openLibrary(opts) {
+    if (_libraryOpen) {
+      // Recover from stuck state: the swipe-to-dismiss in ui.js adds .hidden
+      // to the modal without calling closeLibrary, so _libraryOpen can stay
+      // true even though the modal is gone or invisible. Detect and reset.
+      const existing = document.getElementById('doclib-modal');
+      if (!existing || existing.classList.contains('hidden')) {
+        if (existing) existing.remove();
+        _libraryOpen = false;
+      } else {
+        return;
+      }
+    }
+    _libraryOpen = true;
+    _libraryImportMode = !!(opts && opts.import);
+    _librarySelectMode = false;
+    _librarySelectedIds.clear();
+    _librarySearch = '';
+    _libraryActiveLanguage = null;
+    _librarySort = 'recent';
+    _libraryOffset = 0;
+    _libraryDocs = [];
+
+    // Create modal
+    const modal = document.createElement('div');
+    modal.className = 'modal';
+    modal.id = 'doclib-modal';
+    modal.innerHTML = `
+      <div class="modal-content doclib-modal-content" style="width:min(640px, 92vw);max-height:85vh;background:var(--bg);">
+        <div class="modal-header">
+          <h4><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/><line x1="8" y1="7" x2="16" y2="7"/><line x1="8" y1="11" x2="14" y2="11"/></svg>Library</h4>
+          <button class="close-btn" id="doclib-close">\u2716</button>
+        </div>
+        <div class="lib-tabs" id="doclib-lib-tabs" style="padding:0 10px;">
+          <button class="lib-tab" data-doclib-tab="chats"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>Chats</button>
+          <button class="lib-tab active" data-doclib-tab="documents"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="13" y2="17"/></svg>Documents</button>
+          <button class="lib-tab" data-doclib-tab="research"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-1px;margin-right:3px;"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>Research</button>
+          <button class="lib-tab" data-doclib-tab="archive"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>Archive</button>
+        </div>
+        <div class="modal-body" style="display:flex;flex-direction:column;gap:10px;overflow:hidden;">
+          <div id="doclib-panel-chats" data-doclib-panel="chats" class="admin-card" style="display:none;flex:1;flex-direction:column;overflow:hidden;">
+            <div style="display:flex;align-items:baseline;gap:8px;margin-bottom:2px;">
+              <h2 style="margin:0;padding:0;line-height:1;">Chats <span id="doclib-chats-stats" class="memory-count" style="font-size:0.6em;opacity:0.6;font-weight:normal"></span></h2>
+            </div>
+            <p class="memory-desc doclib-desc">All active chat sessions. Click to open.</p>
+            <div class="memory-toolbar">
+              <div class="memory-category-filters">
+                <select class="memory-sort-select" id="doclib-chats-sort">
+                  <option value="recent">Recent</option>
+                  <option value="oldest">Oldest</option>
+                  <option value="most-messages">Most messages</option>
+                  <option value="alpha">A\u2013Z</option>
+                </select>
+                <button class="memory-toolbar-btn" id="doclib-chats-select-btn">Select</button>
+                <button class="memory-toolbar-btn" id="doclib-chats-tidy-btn" title="AI tidy: delete junk sessions and organize into folders"><svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" style="vertical-align:-1px;margin-right:2px;"><path d="M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41Z"/></svg> Tidy</button>
+              </div>
+              <input type="text" id="doclib-chats-search" placeholder="Search chats\u2026" class="memory-search-input" />
+              <div id="doclib-chats-chips" class="doclib-lang-chips"></div>
+            </div>
+            <div id="doclib-chats-bulk" class="memory-bulk-bar hidden" style="margin-bottom:5px;">
+              <label class="memory-bulk-check-all" style="position:relative;top:0px;left:-1px;"><input type="checkbox" id="doclib-chats-select-all" style="position:relative;top:0px;"> All</label>
+              <span id="doclib-chats-selected-count">0 Selected</span>
+              <button class="memory-toolbar-btn" id="doclib-chats-bulk-archive" style="position:relative;top:-3px;left:2px;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>Archive</button>
+              <button class="memory-toolbar-btn danger" id="doclib-chats-bulk-delete" style="position:relative;left:2px;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>Delete</button>
+              <button class="memory-toolbar-btn" id="doclib-chats-bulk-cancel" title="Cancel (Esc)" style="margin-left:4px;padding:3px 6px;position:relative;left:2px;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+            </div>
+            <div id="doclib-chats-grid" class="doclib-grid"></div>
+          </div>
+          <div id="doclib-panel-archive" data-doclib-panel="archive" class="admin-card" style="display:none;flex:1;flex-direction:column;overflow:hidden;">
+            <div style="display:flex;align-items:baseline;gap:8px;margin-bottom:2px;">
+              <h2 style="margin:0;padding:0;line-height:1;position:relative;top:2px;">Archive <span id="doclib-arc-stats" class="memory-count" style="font-size:0.6em;opacity:0.6;font-weight:normal"></span></h2>
+            </div>
+            <p class="memory-desc doclib-desc" style="position:relative;top:0.5px;">Archived sessions. Restore to make active again.</p>
+            <div class="memory-toolbar">
+              <div class="memory-category-filters">
+                <select class="memory-sort-select" id="doclib-arc-sort">
+                  <option value="recent">Recent</option>
+                  <option value="oldest">Oldest</option>
+                  <option value="most-messages">Most messages</option>
+                  <option value="alpha">A\u2013Z</option>
+                </select>
+                <button class="memory-toolbar-btn" id="doclib-arc-select-btn">Select</button>
+              </div>
+              <input type="text" id="doclib-arc-search" placeholder="Search archive\u2026" class="memory-search-input" />
+              <div id="doclib-arc-chips" class="doclib-lang-chips"></div>
+            </div>
+            <div id="doclib-arc-bulk" class="memory-bulk-bar hidden" style="margin-bottom:5px;">
+              <label class="memory-bulk-check-all" style="position:relative;top:0px;left:1px;"><input type="checkbox" id="doclib-arc-select-all"> All</label>
+              <span id="doclib-arc-selected-count">0 Selected</span>
+              <button class="memory-toolbar-btn" id="doclib-arc-bulk-restore" style="position:relative;top:-3px;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>Restore</button>
+              <button class="memory-toolbar-btn danger" id="doclib-arc-bulk-delete"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>Delete</button>
+              <button class="memory-toolbar-btn" id="doclib-arc-bulk-cancel" title="Cancel (Esc)" style="margin-left:4px;padding:3px 6px;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+            </div>
+            <div id="doclib-arc-grid" class="doclib-grid"></div>
+          </div>
+          <div id="doclib-panel-research" data-doclib-panel="research" class="admin-card" style="display:none;flex:1;flex-direction:column;overflow:hidden;">
+            <div style="display:flex;align-items:baseline;gap:8px;margin-bottom:2px;margin-top:10px;">
+              <h2 style="margin:0;padding:0;line-height:1;">Research <span id="doclib-research-stats" class="memory-count" style="font-size:0.6em;opacity:0.6;font-weight:normal"></span></h2>
+            </div>
+            <p class="memory-desc doclib-desc" style="position:relative;top:-1px;">Completed deep research reports. Click to view.</p>
+            <div class="memory-toolbar">
+              <div class="memory-category-filters">
+                <select class="memory-sort-select" id="doclib-research-sort">
+                  <option value="recent">Recent</option>
+                  <option value="oldest">Oldest</option>
+                  <option value="most-sources">Most sources</option>
+                  <option value="alpha">A\u2013Z</option>
+                </select>
+                <button class="memory-toolbar-btn" id="doclib-research-select-btn">Select</button>
+                <button class="memory-toolbar-btn" id="doclib-research-tidy-btn" title="Tidy: delete research with no sources or empty reports">Tidy</button>
+              </div>
+              <input type="text" id="doclib-research-search" placeholder="Search research\u2026" class="memory-search-input" />
+            </div>
+            <div id="doclib-research-bulk" class="memory-bulk-bar hidden" style="margin-bottom:5px;">
+              <label class="memory-bulk-check-all" style="position:relative;top:0px;left:1px;"><input type="checkbox" id="doclib-research-select-all"> All</label>
+              <span id="doclib-research-selected-count">0 Selected</span>
+              <button class="memory-toolbar-btn" id="doclib-research-bulk-archive" style="position:relative;top:-2px;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>Archive</button>
+              <button class="memory-toolbar-btn danger" id="doclib-research-bulk-delete" style="position:relative;top:-2px;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>Delete</button>
+              <button class="memory-toolbar-btn" id="doclib-research-bulk-cancel" title="Cancel (Esc)" style="margin-left:4px;padding:3px 6px;position:relative;top:-2px;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+            </div>
+            <div id="doclib-research-grid" class="doclib-grid"></div>
+          </div>
+          <div data-doclib-panel="documents" class="admin-card" style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
+            <div style="display:flex;align-items:baseline;gap:8px;margin-bottom:2px;">
+              <h2 style="margin:0;padding:0;line-height:1;">Documents <span id="doclib-stats" class="memory-count" style="font-size:0.6em;opacity:0.6;font-weight:normal"></span></h2>
+              <button class="memory-toolbar-btn" id="doclib-import-file-btn" title="Import files from disk" style="margin-left:auto;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:2px;"><polyline points="7 10 12 5 17 10"/><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="21" x2="19" y2="21"/></svg> Import</button>
+              <button class="memory-toolbar-btn" id="doclib-create-btn" title="Create new blank document"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg> Create</button>
+            </div>
+            <p class="memory-desc doclib-desc">Open documents in a session, clone to a new or import new files.</p>
+            <div class="memory-toolbar">
+              <div class="memory-category-filters">
+                <select class="memory-sort-select" id="doclib-sort">
+                  <option value="recent">Recent</option>
+                  <option value="oldest">Oldest</option>
+                  <option value="edits">Most edits</option>
+                  <option value="alpha">A\u2013Z</option>
+                </select>
+                <button class="memory-toolbar-btn" id="doclib-select-btn" title="Select documents">Select</button>
+                <button class="memory-toolbar-btn" id="doclib-tidy-btn" title="Tidy: remove empty / junk / duplicate documents">Tidy</button>
+              </div>
+              <input type="text" id="doclib-search" placeholder="Search titles &amp; content\u2026" class="memory-search-input" />
+              <div id="doclib-chips" class="doclib-lang-chips"></div>
+            </div>
+            <input type="file" id="doclib-file-input" multiple style="display:none" />
+            <div id="doclib-bulk-bar" class="memory-bulk-bar hidden" style="margin-bottom:5px;">
+              <label class="memory-bulk-check-all" style="position:relative;top:0px;left:1px;"><input type="checkbox" id="doclib-select-all" /> All</label>
+              <span id="doclib-selected-count">0 Selected</span>
+              <button id="doclib-bulk-actions" class="memory-toolbar-btn" style="position:relative;top:-2px;margin-left:auto;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>Actions <span style="opacity:0.55;font-size:9px;">&#9660;</span></button>
+              <button id="doclib-bulk-cancel" class="memory-toolbar-btn" title="Cancel (Esc)" style="margin-left:4px;margin-right:4px;padding:3px 6px;position:relative;top:-2px;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+            </div>
+            <div class="doclib-grid" id="doclib-grid"></div>
+            <button class="doclib-load-more" id="doclib-load-more" style="display:none">Load more</button>
+          </div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(modal);
+
+    // Make modal draggable (same logic as other modals)
+    {
+      const content = modal.querySelector('.modal-content');
+      const header = modal.querySelector('.modal-header');
+      if (content && header) {
+        // Restore saved position / fullscreen state
+        try {
+          const saved = JSON.parse(localStorage.getItem('doclib-pos'));
+          if (saved && saved.fullscreen) {
+            localStorage.removeItem('doclib-pos');
+          } else if (saved && saved.left && saved.top) {
+            content.style.position = 'fixed';
+            content.style.left = saved.left;
+            content.style.top = saved.top;
+            content.style.margin = '0';
+            // Clamp to viewport in case window was resized
+            requestAnimationFrame(() => {
+              const r = content.getBoundingClientRect();
+              if (r.right > window.innerWidth) content.style.left = Math.max(0, window.innerWidth - r.width - 8) + 'px';
+              if (r.bottom > window.innerHeight) content.style.top = Math.max(0, window.innerHeight - r.height - 8) + 'px';
+              if (r.left < 0) content.style.left = '8px';
+              if (r.top < 0) content.style.top = '8px';
+            });
+          }
+        } catch {}
+        // Replaced ~150 lines of inline drag/snap/dock with one helper call.
+        // Library intentionally disables top-edge fullscreen snap: that layout
+        // breaks dense icon/tool rows. Side docking still works.
+        const FS_CLASS = 'doclib-fullscreen';
+        const enterFullscreen = () => {
+          if (modal.classList.contains(FS_CLASS)) return;
+          modal.classList.add(FS_CLASS);
+          content.style.position = 'fixed';
+          content.style.left = '0';
+          content.style.top = '0';
+          content.style.right = '0';
+          content.style.bottom = '0';
+          content.style.width = '100vw';
+          content.style.maxWidth = '100vw';
+          content.style.height = '100vh';
+          content.style.maxHeight = '100vh';
+          content.style.borderRadius = '0';
+          content.style.margin = '0';
+          content.style.transform = 'none';
+          try { localStorage.setItem('doclib-pos', JSON.stringify({ fullscreen: true })); } catch {}
+        };
+        const exitFullscreen = (cx, cy) => {
+          if (!modal.classList.contains(FS_CLASS)) return;
+          modal.classList.remove(FS_CLASS);
+          content.style.width = '';
+          content.style.maxWidth = '';
+          content.style.height = '';
+          content.style.maxHeight = '';
+          content.style.borderRadius = '';
+          content.style.right = '';
+          content.style.bottom = '';
+          const r0 = content.getBoundingClientRect();
+          const w = r0.width || Math.min(900, window.innerWidth * 0.92);
+          content.style.left = Math.max(8, cx - w / 2) + 'px';
+          content.style.top = Math.max(8, cy - 20) + 'px';
+        };
+        makeWindowDraggable(modal, {
+          content,
+          header,
+          fsClass: FS_CLASS,
+          skipSelector: '.modal-close',
+          onEnterFullscreen: enterFullscreen,
+          onExitFullscreen: exitFullscreen,
+          enableFullscreen: false,
+          onDragEnd: () => {
+            try { localStorage.setItem('doclib-pos', JSON.stringify({ left: content.style.left, top: content.style.top })); } catch {}
+          },
+        });
+      }
+    }
+
+    // Wire events
+    document.getElementById('doclib-close').addEventListener('click', closeLibrary);
+
+    // Tab switching — Chats / Documents / Archive / Research
+    let _activeLibTab = (opts && opts.tab) || 'documents';
+    const _tabBtns = modal.querySelectorAll('[data-doclib-tab]');
+    const _tabPanels = modal.querySelectorAll('[data-doclib-panel]');
+
+    // Client-side pagination for tabs whose API returns everything at once
+    // (chats/archive/research). Render only this many initially; the
+    // load-more button reveals more in chunks.
+    const _LIB_PAGE_SIZE = 20;
+    let _chatsVisibleLimit = _LIB_PAGE_SIZE;
+    let _arcVisibleLimit = _LIB_PAGE_SIZE;
+    let _researchVisibleLimit = _LIB_PAGE_SIZE;
+
+    function _appendInlineLoadMore(grid, totalCount, currentLimit, onClick) {
+      if (!grid || !grid.parentElement) return;
+      // Drop the previous instance (if any) — we re-render the list from
+      // scratch each pass, so the button is regenerated alongside it.
+      grid.parentElement.querySelectorAll(':scope > .doclib-inline-load-more').forEach(b => b.remove());
+      if (totalCount <= currentLimit) return;
+      const btn = document.createElement('button');
+      btn.className = 'doclib-load-more doclib-inline-load-more';
+      btn.textContent = `Load more (${currentLimit} of ${totalCount})`;
+      btn.addEventListener('click', onClick);
+      grid.parentElement.appendChild(btn);
+    }
+
+    function _switchLibTab(tab) {
+      _activeLibTab = tab;
+      _tabBtns.forEach(b => b.classList.toggle('active', b.dataset.doclibTab === tab));
+      _tabPanels.forEach(p => {
+        if (p.dataset.doclibPanel === tab) {
+          p.style.display = 'flex';
+        } else {
+          p.style.display = 'none';
+        }
+      });
+      if (tab === 'chats') _renderLibChats();
+      else if (tab === 'archive') _renderLibArchive();
+      else if (tab === 'research') _renderLibResearch();
+    }
+
+    _tabBtns.forEach(btn => {
+      btn.addEventListener('click', () => _switchLibTab(btn.dataset.doclibTab));
+    });
+
+    // ── Chats tab state ──
+    let _chatsSessions = [];
+    let _chatsSearch = '';
+    let _chatsSort = 'recent';
+    let _chatsSelectMode = false;
+    const _chatsSelected = new Set();
+    let _chatsModelFilter = '';
+
+    function _renderLibChats() {
+      const grid = document.getElementById('doclib-chats-grid');
+      if (!grid) return;
+      grid.innerHTML = '';
+      grid.appendChild(spinnerModule.createLoadingRow('Loading…'));
+      fetch(API_BASE + '/api/sessions', { credentials: 'same-origin' }).then(r => r.json()).then(data => {
+        const raw = Array.isArray(data) ? data : (data.sessions || []);
+        _chatsSessions = raw.filter(s => !s.archived);
+        _renderChatsGrid();
+        _renderChatsChips();
+      }).catch(() => { grid.innerHTML = '<div class="doclib-empty">Failed to load</div>'; });
+    }
+
+    // Tap a chat row to expand inline: fetches the recent messages and
+    // renders them as a preview with an "Open chat" button. Tap again to
+    // collapse. Mirrors the documents-tab expand pattern.
+    async function _toggleChatPreview(card, session) {
+      const preview = card.querySelector('.doclib-chat-preview');
+      if (!preview) return;
+      const isOpen = card.classList.contains('doclib-card-expanded');
+      // Collapse any other open preview in this grid first
+      const grid = card.closest('.doclib-grid');
+      if (grid) {
+        grid.querySelectorAll('.doclib-card-expanded').forEach(c => {
+          if (c !== card) {
+            c.classList.remove('doclib-card-expanded');
+            const p = c.querySelector('.doclib-chat-preview');
+            if (p) { p.style.display = 'none'; p.innerHTML = ''; }
+          }
+        });
+      }
+      if (isOpen) {
+        card.classList.remove('doclib-card-expanded');
+        preview.style.display = 'none';
+        preview.innerHTML = '';
+        return;
+      }
+      card.classList.add('doclib-card-expanded');
+      preview.style.display = 'block';
+      preview.innerHTML = '<div style="opacity:0.4;font-size:11px;padding:8px 4px;">Loading…</div>';
+      try {
+        const res = await fetch(`${API_BASE}/api/history/${session.id}`, { credentials: 'same-origin' });
+        if (!res.ok) throw new Error('Failed');
+        const data = await res.json();
+        const history = Array.isArray(data) ? data : (data.history || []);
+        const recent = history.filter(m => m.role === 'user' || m.role === 'assistant').slice(-5);
+        const sessionModel = (session.model || '').split('/').pop();
+        const msgsHtml = recent.length
+          ? recent.map(m => {
+              const isUser = m.role === 'user';
+              const raw = m.content || '';
+              const truncated = raw.length > 600 ? raw.slice(0, 600) + '…' : raw;
+              // Strip thinking blocks (internal model state) and render with
+              // the same markdown pipeline the chat uses.
+              const cleaned = truncated
+                .replace(/<think>[\s\S]*?<\/think>/g, '')
+                .replace(/<think>[\s\S]*$/, '')
+                .trim();
+              let body;
+              try {
+                body = markdownModule.mdToHtml(cleaned);
+              } catch { body = _esc(cleaned); }
+              // Per-message model can override the session default (e.g.
+              // when comparing models in the same chat).
+              const msgModel = (m.metadata && (m.metadata.model || m.metadata.model_name)) || '';
+              const modelTag = !isUser && (msgModel || sessionModel)
+                ? `<span class="doclib-chat-msg-model">${_esc(msgModel || sessionModel)}</span>`
+                : '';
+              return `<div class="doclib-chat-bubble-row ${isUser ? 'user' : 'assistant'}">
+                <div class="doclib-chat-bubble">
+                  ${modelTag}
+                  <div class="doclib-chat-bubble-body">${body}</div>
+                </div>
+              </div>`;
+            }).join('')
+          : '<div style="opacity:0.4;font-size:11px;padding:6px 4px;">No messages yet</div>';
+        const isArchive = !!session.archived;
+        // Archived chats get a Restore button (unarchive); active chats get the
+        // Archive button. Matches the research + document archive previews.
+        const archiveHtml = isArchive
+          ? '<button class="doclib-chat-restore-btn">' +
+              '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 14 4 9 9 4"/><path d="M4 9h11a5 5 0 0 1 5 5v0a5 5 0 0 1-5 5H9"/></svg>' +
+              'Restore' +
+            '</button>'
+          : '<button class="doclib-chat-archive-btn">' +
+              '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>' +
+              'Archive' +
+            '</button>';
+        // Copy sits next to Archive on the left side of the action row.
+        // Uses the same border-only secondary-action style — distinct from
+        // the danger Delete (red) and the primary Open (right-aligned).
+        // Copy is hidden in the Archive (keep the footer to Delete + Restore +
+        // Open there). It still shows for active chats.
+        const copyHtml = isArchive ? '' : '<button class="doclib-chat-copy-btn">' +
+              '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>' +
+              'Copy' +
+            '</button>';
+        const deleteHtml = '<button class="doclib-chat-delete-btn">' +
+              '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>' +
+              'Delete' +
+            '</button>';
+        preview.innerHTML =
+          '<div class="doclib-chat-preview-messages">' + msgsHtml + '</div>' +
+          '<div class="doclib-chat-preview-actions">' +
+            deleteHtml +
+            archiveHtml +
+            copyHtml +
+            '<button class="doclib-chat-open-btn">' +
+              '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>' +
+              'Open' +
+            '</button>' +
+          '</div>';
+        const openBtn = preview.querySelector('.doclib-chat-open-btn');
+        if (openBtn) openBtn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          if (window.sessionModule) window.sessionModule.selectSession(session.id);
+          closeLibrary();
+          // Also collapse the wide sidebar so the picked chat sits
+          // fullscreen — same gesture as picking a session in the
+          // sidebar itself on mobile. Skip on desktop where the user
+          // expects the sidebar to stay where they left it.
+          if (window.innerWidth <= 768) {
+            const sb = document.getElementById('sidebar');
+            if (sb) {
+              sb.classList.add('hidden');
+              try { window.syncRailSide && window.syncRailSide(); } catch (_) {}
+            }
+          }
+        });
+        const archiveBtn = preview.querySelector('.doclib-chat-archive-btn');
+        if (archiveBtn) archiveBtn.addEventListener('click', async (e) => {
+          e.stopPropagation();
+          await fetch(API_BASE + '/api/session/' + session.id + '/archive', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+          });
+          _renderLibChats();
+        });
+        const restoreBtn = preview.querySelector('.doclib-chat-restore-btn');
+        if (restoreBtn) restoreBtn.addEventListener('click', async (e) => {
+          e.stopPropagation();
+          await fetch(API_BASE + '/api/session/' + session.id + '/unarchive', { method: 'POST' });
+          _renderLibArchive();
+        });
+        const copyBtn = preview.querySelector('.doclib-chat-copy-btn');
+        if (copyBtn) copyBtn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          _copyChatById(session.id);
+        });
+        const deleteBtn = preview.querySelector('.doclib-chat-delete-btn');
+        if (deleteBtn) deleteBtn.addEventListener('click', async (e) => {
+          e.stopPropagation();
+          if (!await window.styledConfirm('Delete this chat?', { confirmText: 'Delete', danger: true })) return;
+          await fetch(API_BASE + '/api/session/' + session.id, { method: 'DELETE' });
+          card.style.maxHeight = `${Math.max(card.getBoundingClientRect().height, card.scrollHeight)}px`;
+          card.classList.add('memory-tidy-removing');
+          await new Promise(r => setTimeout(r, 520));
+          if (isArchive) _renderLibArchive(); else _renderLibChats();
+        });
+      } catch (e) {
+        preview.innerHTML = '<div style="opacity:0.5;font-size:11px;padding:6px 4px;color:var(--color-error);">Failed to load preview</div>';
+      }
+    }
+
+    function _renderChatsGrid() {
+      const grid = document.getElementById('doclib-chats-grid');
+      if (!grid) return;
+      const _csb = document.getElementById('doclib-chats-select-btn');
+      if (_csb) { _csb.classList.toggle('active', _chatsSelectMode); _csb.textContent = _chatsSelectMode ? 'Cancel' : 'Select'; }
+      let filtered = _chatsSessions.slice();
+      if (_chatsSearch) {
+        const q = _chatsSearch.toLowerCase();
+        filtered = filtered.filter(s => (s.name || '').toLowerCase().includes(q) || (s.model || '').toLowerCase().includes(q));
+      }
+      if (_chatsModelFilter) filtered = filtered.filter(s => s.folder === _chatsModelFilter);
+      if (_chatsSort === 'oldest') filtered.sort((a, b) => (a.updated_at || '') > (b.updated_at || '') ? 1 : -1);
+      else if (_chatsSort === 'most-messages') filtered.sort((a, b) => (b.message_count || 0) - (a.message_count || 0));
+      else if (_chatsSort === 'alpha') filtered.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+      else filtered.sort((a, b) => (b.updated_at || '') > (a.updated_at || '') ? 1 : -1);
+
+      const stats = document.getElementById('doclib-chats-stats');
+      if (stats) stats.textContent = filtered.length + ' chat' + (filtered.length !== 1 ? 's' : '');
+
+      if (!filtered.length) {
+        // Sad-mouth smiley (downturn curve) for "nothing here yet".
+        const _sadIco = '<span style="vertical-align:-3px;margin-left:6px;">' + uiModule.emptyStateIcon('sad') + '</span>';
+        grid.innerHTML = '<div class="doclib-empty">No chats' + _sadIco + '</div>';
+        _appendInlineLoadMore(grid, 0, _chatsVisibleLimit, () => {});
+        return;
+      }
+      const total = filtered.length;
+      const visible = filtered.slice(0, _chatsVisibleLimit);
+      grid.innerHTML = '';
+      _maybeCascadeGrid(grid, 'chats');
+      for (const s of visible) {
+        const card = document.createElement('div');
+        card.className = 'memory-item doclib-chat-row';
+        card.style.cursor = 'pointer';
+        card.dataset.sid = s.id;
+        const model = (s.model || '').split('/').pop();
+        const cbHtml = _chatsSelectMode ? '<input type="checkbox" class="memory-select-cb"' + (_chatsSelected.has(s.id) ? ' checked' : '') + '>' : '';
+        const chatIconSvg = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;opacity:0.4;flex-shrink:0;"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
+        const chevronSvg = '<span class="doclib-card-chevron"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></span>';
+        // Msg count badge inside the title, dimmer than the name so it
+        // reads as metadata at a glance. Hidden when count is 0 so
+        // brand-new "New Chat" rows don't show "\u00b7 0 msgs".
+        const _chatMsgs = s.message_count || 0;
+        const msgCountHtml = _chatMsgs > 0
+          ? '<span style="opacity:0.45;font-weight:normal;font-size:0.9em;margin-left:6px;">\u00b7 ' + _chatMsgs + ' msg' + (_chatMsgs === 1 ? '' : 's') + '</span>'
+          : '';
+        card.innerHTML =
+          '<div class="doclib-chat-header" style="display:flex;align-items:center;width:100%;gap:6px;">' +
+            cbHtml +
+            '<div style="flex:1;min-width:0;">' +
+              '<div class="memory-item-title">' + chatIconSvg + _esc(s.name || 'Untitled') + msgCountHtml + '</div>' +
+              '<div class="memory-item-meta" style="font-size:10px;opacity:0.4;margin-top:2px;">' + [model, _relTime(s.updated_at)].filter(Boolean).join(' \u00b7 ') + '</div>' +
+            '</div>' +
+            chevronSvg +
+            '<div class="memory-item-actions"><button class="memory-item-btn _chat-menu" title="Actions"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg></button></div>' +
+          '</div>' +
+          '<div class="doclib-chat-preview" style="display:none;"></div>';
+        const cb = card.querySelector('.memory-select-cb');
+        if (cb) { cb.addEventListener('click', e => e.stopPropagation()); cb.addEventListener('change', () => { if (cb.checked) _chatsSelected.add(s.id); else _chatsSelected.delete(s.id); _updateChatsCount(); }); }
+        card.querySelector('._chat-menu').addEventListener('click', (e) => { e.stopPropagation(); _showLibDropdown(e.currentTarget, [
+          { label: 'Open', action: () => { if (window.sessionModule) window.sessionModule.selectSession(s.id); } },
+          { label: 'Copy', action: () => _copyChatById(s.id) },
+          { label: 'Archive', action: async () => { await fetch(API_BASE + '/api/session/' + s.id + '/archive', { method: 'POST', headers: {'Content-Type':'application/json'} }); _renderLibChats(); } },
+          { label: 'Delete', action: async () => {
+            if (!await window.styledConfirm('Delete this chat?', { confirmText: 'Delete', danger: true })) return;
+            await fetch(API_BASE + '/api/session/' + s.id, { method: 'DELETE' });
+            card.style.maxHeight = `${Math.max(card.getBoundingClientRect().height, card.scrollHeight)}px`;
+            card.classList.add('memory-tidy-removing');
+            await new Promise(r => setTimeout(r, 520));
+            _renderLibChats();
+          }, danger: true },
+        ], { onSelect: () => {
+          _chatsSelectMode = true;
+          _chatsSelected.add(s.id);
+          document.getElementById('doclib-chats-bulk')?.classList.remove('hidden');
+          _renderChatsGrid();
+        } }); });
+        card.addEventListener('click', (e) => {
+          if (card._suppressNextClick) { card._suppressNextClick = false; return; }
+          if (_chatsSelectMode) { const c = card.querySelector('.memory-select-cb'); if (c) { c.checked = !c.checked; if (c.checked) _chatsSelected.add(s.id); else _chatsSelected.delete(s.id); _updateChatsCount(); } return; }
+          if (e.target.closest('._chat-menu') || e.target.closest('.memory-select-cb') || e.target.closest('.doclib-chat-open-btn')) return;
+          _toggleChatPreview(card, s);
+        });
+        _attachLongPressMenu(card, '._chat-menu');
+        grid.appendChild(card);
+      }
+      _appendInlineLoadMore(grid, total, _chatsVisibleLimit, () => {
+        _chatsVisibleLimit += _LIB_PAGE_SIZE;
+        _renderChatsGrid();
+      });
+    }
+
+    function _renderChatsChips() {
+      const el = document.getElementById('doclib-chats-chips');
+      if (!el) return;
+      const counts = {};
+      _chatsSessions.forEach(s => { const f = s.folder; if (f) counts[f] = (counts[f] || 0) + 1; });
+      const folders = Object.keys(counts).sort();
+      if (folders.length < 1) { el.innerHTML = ''; return; }
+      el.innerHTML = '';
+      const mk = (label, val, count) => { const c = document.createElement('button'); c.className = 'memory-cat-chip' + (_chatsModelFilter === val ? ' active' : ''); c.textContent = label + ' (' + count + ')'; c.addEventListener('click', () => { _chatsModelFilter = _chatsModelFilter === val ? '' : val; _renderChatsGrid(); _renderChatsChips(); }); el.appendChild(c); };
+      mk('all', '', _chatsSessions.length);
+      folders.forEach(f => mk(f, f, counts[f]));
+    }
+
+    function _updateChatsCount() { const el = document.getElementById('doclib-chats-selected-count'); if (el) el.textContent = _chatsSelected.size + ' Selected'; }
+
+    // Chats event listeners
+    document.getElementById('doclib-chats-sort').addEventListener('change', (e) => { _chatsSort = e.target.value; _renderChatsGrid(); });
+    document.getElementById('doclib-chats-search').addEventListener('input', (e) => { _chatsSearch = e.target.value.trim(); _renderChatsGrid(); });
+    document.getElementById('doclib-chats-select-btn').addEventListener('click', () => { _chatsSelectMode = !_chatsSelectMode; _chatsSelected.clear(); document.getElementById('doclib-chats-bulk').classList.toggle('hidden', !_chatsSelectMode); _renderChatsGrid(); });
+    document.getElementById('doclib-chats-bulk-cancel')?.addEventListener('click', () => {
+      _chatsSelectMode = false; _chatsSelected.clear();
+      document.getElementById('doclib-chats-bulk').classList.add('hidden');
+      _renderChatsGrid();
+    });
+    function _chatsToggleAll() {
+      const allCb = document.getElementById('doclib-chats-select-all');
+      const newState = _chatsSelected.size < _chatsSessions.length;
+      if (allCb) allCb.checked = newState;
+      document.querySelectorAll('#doclib-chats-grid .memory-select-cb').forEach(cb => { cb.checked = newState; });
+      _chatsSessions.forEach(s => { if (newState) _chatsSelected.add(s.id); else _chatsSelected.delete(s.id); });
+      _updateChatsCount();
+    }
+    document.getElementById('doclib-chats-select-all').addEventListener('change', _chatsToggleAll);
+    document.getElementById('doclib-chats-bulk').addEventListener('click', (e) => {
+      if (e.target.closest('button') || e.target.closest('input')) return;
+      _chatsToggleAll();
+    });
+    document.getElementById('doclib-chats-bulk-archive').addEventListener('click', async () => {
+      const count = _chatsSelected.size;
+      if (!count) return;
+      const grid = document.getElementById('doclib-chats-grid');
+      if (grid) {
+        grid.querySelectorAll('.doclib-card').forEach(card => {
+          const sid = card.dataset.sid || card.dataset.sessionId;
+          if (sid && _chatsSelected.has(sid)) {
+            card.style.transition = 'opacity 0.25s, transform 0.25s';
+            card.style.opacity = '0';
+            card.style.transform = 'scale(0.95)';
+          }
+        });
+      }
+      await new Promise(r => setTimeout(r, 250));
+      const ids = [..._chatsSelected];
+      const results = await Promise.all(
+        ids.map(sid => fetch(API_BASE + '/api/session/' + sid + '/archive', { method: 'POST', headers: {'Content-Type':'application/json'} })
+          .then(r => ({ sid, ok: r.ok }))
+          .catch(() => ({ sid, ok: false }))
+        )
+      );
+      const failed = results.filter(r => !r.ok).map(r => r.sid);
+      if (failed.length && grid) {
+        grid.querySelectorAll('.doclib-card').forEach(card => {
+          const sid = card.dataset.sid || card.dataset.sessionId;
+          if (sid && failed.includes(sid)) {
+            card.style.opacity = '';
+            card.style.transform = '';
+          }
+        });
+        if (window.uiModule) window.uiModule.showError(`Failed to archive ${failed.length} of ${ids.length} chat${ids.length > 1 ? 's' : ''}`);
+      }
+      _chatsSelected.clear();
+      _chatsSelectMode = false;
+      document.getElementById('doclib-chats-bulk').classList.add('hidden');
+      _renderLibChats();
+    });
+    document.getElementById('doclib-chats-bulk-delete').addEventListener('click', async () => {
+      const count = _chatsSelected.size;
+      if (!count) return;
+      if (!await window.styledConfirm(`Delete ${count} chat${count > 1 ? 's' : ''}? This cannot be undone.`, { confirmText: 'Delete', danger: true })) return;
+      // Fade out selected cards
+      const grid = document.getElementById('doclib-chats-grid');
+      if (grid) {
+        grid.querySelectorAll('.doclib-card').forEach(card => {
+          const sid = card.dataset.sid || card.dataset.sessionId;
+          if (sid && _chatsSelected.has(sid)) {
+            card.style.transition = 'opacity 0.25s, transform 0.25s';
+            card.style.opacity = '0';
+            card.style.transform = 'scale(0.95)';
+          }
+        });
+      }
+      // Delete after animation. v2 review HIGH-8: inspect each response
+      // so cards that the server rejected get restored (instead of
+      // staying faded out forever) and the user sees an aggregate
+      // error toast.
+      await new Promise(r => setTimeout(r, 250));
+      const ids = [..._chatsSelected];
+      const results = await Promise.all(
+        ids.map(sid => fetch(API_BASE + '/api/session/' + sid, { method: 'DELETE' })
+          .then(r => ({ sid, ok: r.ok }))
+          .catch(() => ({ sid, ok: false }))
+        )
+      );
+      const failed = results.filter(r => !r.ok).map(r => r.sid);
+      if (failed.length && grid) {
+        // Restore faded cards for the rows the server refused.
+        grid.querySelectorAll('.doclib-card').forEach(card => {
+          const sid = card.dataset.sid || card.dataset.sessionId;
+          if (sid && failed.includes(sid)) {
+            card.style.opacity = '';
+            card.style.transform = '';
+          }
+        });
+        if (window.uiModule) window.uiModule.showError(`Failed to delete ${failed.length} of ${ids.length} chat${ids.length > 1 ? 's' : ''}`);
+      }
+      _chatsSelected.clear();
+      _chatsSelectMode = false;
+      document.getElementById('doclib-chats-bulk').classList.add('hidden');
+      _renderLibChats();
+    });
+
+    // Tidy button — AI cleanup + organize into folders
+    document.getElementById('doclib-chats-tidy-btn').addEventListener('click', async () => {
+      const tidyBtn = document.getElementById('doclib-chats-tidy-btn');
+      const origHTML = tidyBtn.innerHTML;
+      tidyBtn.disabled = true;
+      tidyBtn.classList.add('spinning');
+      tidyBtn.textContent = '';
+      // Silent whirlpool, nudged up to line up with the surrounding button
+      // text in the Chats header. The previous version checked
+      // `window.spinnerModule` (never bound) and always fell through to a
+      // plain "Tidying..." label.
+      const sp = spinnerModule.create('', 'clean', 'whirlpool');
+      const el = sp.createElement();
+      el.style.position = 'relative';
+      el.style.top = '1px';
+      tidyBtn.appendChild(el);
+      sp.start();
+      try {
+        const res = await fetch(API_BASE + '/api/sessions/auto-sort', { method: 'POST', credentials: 'same-origin' });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.detail || 'Tidy failed');
+        if (data.status === 'ok') {
+          if (window.uiModule) window.uiModule.showToast('Sorted ' + data.updated + ' sessions into ' + data.folders.length + ' folders');
+          if (window.sessionModule) await window.sessionModule.loadSessions();
+          _renderLibChats();
+        } else {
+          if (window.uiModule) window.uiModule.showToast(data.reason || 'Nothing to tidy');
+        }
+      } catch (e) {
+        if (window.uiModule) window.uiModule.showError('Tidy: ' + e.message);
+      } finally {
+        tidyBtn.disabled = false;
+        tidyBtn.classList.remove('spinning');
+        tidyBtn.innerHTML = origHTML;
+      }
+    });
+
+    // ── Archive tab state ──
+    let _arcSessions = [];
+    let _arcDocs = [];        // archived documents
+    let _arcResearch = [];    // archived research reports
+    let _arcSearch = '';
+    let _arcSort = 'recent';
+    let _arcSelectMode = false;
+    const _arcSelected = new Set();
+    let _arcModelFilter = '';
+    let _arcTypeFilter = '';   // '', 'chats', 'documents', 'research'
+
+    function _renderLibArchive() {
+      const grid = document.getElementById('doclib-arc-grid');
+      if (!grid) return;
+      grid.innerHTML = '';
+      grid.appendChild(spinnerModule.createLoadingRow('Loading…'));
+      // Archive tab is the home for ALL archived items — chats, documents, and
+      // research — each rendered with its own icon. Load the three in parallel.
+      Promise.all([
+        fetch(API_BASE + '/api/sessions/archived?limit=100&sort=recent', { credentials: 'same-origin' }).then(r => r.json()).catch(() => ({})),
+        fetch(API_BASE + '/api/documents/library?archived=true&limit=50', { credentials: 'same-origin' }).then(r => r.json()).catch(() => ({})),
+        fetch('/api/research/library?archived=true', { credentials: 'same-origin' }).then(r => r.json()).catch(() => ({})),
+      ]).then(([s, d, r]) => {
+        // These are all archived by definition — flag them so the expanded
+        // chat preview hides its (redundant) "Archive" button.
+        _arcSessions = (s.sessions || []).map(x => ({ ...x, archived: true }));
+        _arcDocs = d.documents || [];
+        _arcResearch = (r.research || []).map(x => ({ ...x, archived: true }));
+        _renderArcGrid();
+        _renderArcChips();
+      }).catch(() => { grid.innerHTML = '<div class="doclib-empty">Failed to load</div>'; });
+    }
+
+    // Inline expand/collapse for an archived DOCUMENT card (chat-style). Loads
+    // the doc content into the card's .doclib-chat-preview. Lag-safe: caps the
+    // shown text and skips highlighting (archived previews are read-only peeks).
+    async function _toggleArcDocPreview(card, d) {
+      const preview = card.querySelector('.doclib-chat-preview');
+      if (!preview) return;
+      const grid = card.closest('.doclib-grid');
+      if (grid) {
+        grid.querySelectorAll('.doclib-card-expanded').forEach(c => {
+          if (c !== card) {
+            c.classList.remove('doclib-card-expanded');
+            const p = c.querySelector('.doclib-chat-preview');
+            if (p) { p.style.display = 'none'; p.innerHTML = ''; }
+          }
+        });
+      }
+      if (card.classList.contains('doclib-card-expanded')) {
+        card.classList.remove('doclib-card-expanded');
+        preview.style.display = 'none'; preview.innerHTML = '';
+        return;
+      }
+      card.classList.add('doclib-card-expanded');
+      preview.style.display = 'block';
+      preview.innerHTML = '<div style="opacity:0.4;font-size:11px;padding:8px 4px;">Loading…</div>';
+      try {
+        const res = await fetch(`${API_BASE}/api/document/${d.id}`, { credentials: 'same-origin' });
+        if (!res.ok) throw new Error('failed');
+        const full = await res.json();
+        const content = (full.current_content || '').slice(0, 20000);
+        const pre = document.createElement('pre');
+        pre.style.cssText = 'white-space:pre-wrap;word-break:break-word;font-size:11px;margin:6px 4px;max-height:50vh;overflow:auto;';
+        pre.textContent = content || '(empty document)';
+        preview.innerHTML = '';
+        preview.appendChild(pre);
+
+        // Footer — uses the same visible .doclib-chat-preview-actions style as
+        // the chat/research previews (the .doclib-card-expanded-actions class is
+        // display:none unless inside a .doclib-card, which these archive rows
+        // are not). Delete + Restore, matching the others.
+        const actions = document.createElement('div');
+        actions.className = 'doclib-chat-preview-actions';
+        actions.innerHTML =
+          '<button class="doclib-chat-delete-btn"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>Delete</button>' +
+          '<button class="doclib-chat-restore-btn"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 14 4 9 9 4"/><path d="M4 9h11a5 5 0 0 1 5 5v0a5 5 0 0 1-5 5H9"/></svg>Restore</button>' +
+          '<button class="doclib-chat-open-btn"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>Open</button>';
+        actions.querySelector('.doclib-chat-delete-btn').addEventListener('click', async (ev) => {
+          ev.stopPropagation();
+          if (!await window.styledConfirm('Delete this document?', { confirmText: 'Delete', danger: true })) return;
+          await fetch(`${API_BASE}/api/document/${d.id}`, { method: 'DELETE', credentials: 'same-origin' });
+          _renderLibArchive();
+        });
+        actions.querySelector('.doclib-chat-restore-btn').addEventListener('click', async (ev) => {
+          ev.stopPropagation();
+          await fetch(`${API_BASE}/api/document/${d.id}/archive?archived=false`, { method: 'POST', credentials: 'same-origin' });
+          _renderLibArchive();
+        });
+        // Open = clone the doc into the active session and surface it in the editor.
+        actions.querySelector('.doclib-chat-open-btn').addEventListener('click', (ev) => {
+          ev.stopPropagation();
+          libraryImportDocument(d);
+        });
+        preview.appendChild(actions);
+      } catch {
+        preview.innerHTML = '<div style="opacity:0.4;font-size:11px;padding:8px 4px;">Failed to load preview</div>';
+      }
+    }
+
+    function _renderArcGrid() {
+      const grid = document.getElementById('doclib-arc-grid');
+      if (!grid) return;
+      const _asb = document.getElementById('doclib-arc-select-btn');
+      if (_asb) { _asb.classList.toggle('active', _arcSelectMode); _asb.textContent = _arcSelectMode ? 'Cancel' : 'Select'; }
+      let filtered = _arcSessions.slice();
+      if (_arcSearch) {
+        const q = _arcSearch.toLowerCase();
+        filtered = filtered.filter(s => (s.name || '').toLowerCase().includes(q) || (s.model || '').toLowerCase().includes(q));
+      }
+      if (_arcModelFilter) filtered = filtered.filter(s => (s.model || '').split('/').pop() === _arcModelFilter);
+      if (_arcSort === 'oldest') filtered.sort((a, b) => (a.updated_at || '') > (b.updated_at || '') ? 1 : -1);
+      else if (_arcSort === 'most-messages') filtered.sort((a, b) => (b.message_count || 0) - (a.message_count || 0));
+      else if (_arcSort === 'alpha') filtered.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+      else filtered.sort((a, b) => (b.updated_at || '') > (a.updated_at || '') ? 1 : -1);
+
+      // Archived documents + research also live here — filter them by the same search.
+      const _aq = (_arcSearch || '').toLowerCase();
+      let filtDocs = _aq ? _arcDocs.filter(d => (d.title || '').toLowerCase().includes(_aq)) : _arcDocs;
+      let filtResearch = _aq ? _arcResearch.filter(r => (r.query || '').toLowerCase().includes(_aq)) : _arcResearch;
+
+      // Type filter chips (Chats / Documents / Research) zero out the others.
+      const _showChats = !_arcTypeFilter || _arcTypeFilter === 'chats';
+      const _showDocs = !_arcTypeFilter || _arcTypeFilter === 'documents';
+      const _showResearch = !_arcTypeFilter || _arcTypeFilter === 'research';
+      if (!_showChats) filtered = [];
+      if (!_showDocs) filtDocs = [];
+      if (!_showResearch) filtResearch = [];
+
+      const stats = document.getElementById('doclib-arc-stats');
+      if (stats) stats.textContent = (filtered.length + filtDocs.length + filtResearch.length) + ' archived';
+
+      if (!filtered.length && !filtDocs.length && !filtResearch.length) {
+        // Neutral / no-smile face for "nothing archived here".
+        const _neutralIco = '<span style="vertical-align:-3px;margin-left:6px;">' + uiModule.emptyStateIcon('neutral') + '</span>';
+        grid.innerHTML = '<div class="doclib-empty">No archived items' + _neutralIco + '</div>';
+        _appendInlineLoadMore(grid, 0, _arcVisibleLimit, () => {});
+        return;
+      }
+      const total = filtered.length;
+      const visible = filtered.slice(0, _arcVisibleLimit);
+      grid.innerHTML = '';
+      _maybeCascadeGrid(grid, 'archive');
+      for (const s of visible) {
+        const card = document.createElement('div');
+        card.className = 'memory-item doclib-chat-row';
+        card.style.cursor = 'pointer';
+        card.dataset.sid = s.id;
+        card.dataset.arckey = 'chats:' + s.id;
+        const model = (s.model || '').split('/').pop();
+        const cbHtml = _arcSelectMode ? '<input type="checkbox" class="memory-select-cb" data-arckey="chats:' + s.id + '"' + (_arcSelected.has('chats:' + s.id) ? ' checked' : '') + '>' : '';
+        const arcIconSvg = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;opacity:0.5;flex-shrink:0;"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
+        card.innerHTML =
+          '<div class="doclib-chat-header" style="display:flex;align-items:center;width:100%;gap:6px;">' +
+            cbHtml +
+            '<div style="flex:1;min-width:0;">' +
+              '<div class="memory-item-title">' + arcIconSvg + _esc(s.name || 'Untitled') + '</div>' +
+              '<div class="memory-item-meta" style="font-size:10px;opacity:0.4;margin-top:2px;">' + [model, _relTime(s.updated_at)].filter(Boolean).join(' \u00b7 ') + '</div>' +
+            '</div>' +
+            '<div class="memory-item-actions"><button class="memory-item-btn _arc-menu" title="Actions"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg></button></div>' +
+          '</div>' +
+          '<div class="doclib-chat-preview" style="display:none;"></div>';
+        const cb = card.querySelector('.memory-select-cb');
+        if (cb) { cb.addEventListener('click', e => e.stopPropagation()); cb.addEventListener('change', () => { if (cb.checked) _arcSelected.add('chats:' + s.id); else _arcSelected.delete('chats:' + s.id); _updateArcCount(); }); }
+        card.querySelector('._arc-menu').addEventListener('click', (e) => { e.stopPropagation(); _showLibDropdown(e.currentTarget, [
+          { label: 'Open', action: () => { if (window.sessionModule) window.sessionModule.selectSession(s.id); } },
+          { label: 'Copy', action: () => _copyChatById(s.id) },
+          { label: 'Restore', action: async () => { await fetch(API_BASE + '/api/session/' + s.id + '/unarchive', { method: 'POST' }); _renderLibArchive(); } },
+          { label: 'Delete', action: async () => {
+            if (!await window.styledConfirm('Delete this chat permanently?', { confirmText: 'Delete', danger: true })) return;
+            await fetch(API_BASE + '/api/session/' + s.id, { method: 'DELETE' });
+            _renderLibArchive();
+          }, danger: true },
+        ], { onSelect: () => {
+          _arcSelectMode = true;
+          _arcSelected.add('chats:' + s.id);
+          document.getElementById('doclib-arc-bulk')?.classList.remove('hidden');
+          _renderArcGrid();
+        } }); });
+        card.addEventListener('click', (e) => {
+          if (card._suppressNextClick) { card._suppressNextClick = false; return; }
+          if (_arcSelectMode) { const c = card.querySelector('.memory-select-cb'); if (c) { c.checked = !c.checked; if (c.checked) _arcSelected.add('chats:' + s.id); else _arcSelected.delete('chats:' + s.id); _updateArcCount(); } return; }
+          if (e.target.closest('._arc-menu') || e.target.closest('.memory-select-cb') || e.target.closest('.doclib-chat-open-btn')) return;
+          _toggleChatPreview(card, s);
+        });
+        _attachLongPressMenu(card, '._arc-menu');
+        grid.appendChild(card);
+      }
+      // Archived DOCUMENTS — document icon, Restore / Delete.
+      const _arcDocIco = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;opacity:0.5;flex-shrink:0;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>';
+      for (const d of filtDocs) {
+        const card = document.createElement('div');
+        card.className = 'memory-item doclib-chat-row';
+        card.style.cursor = 'pointer';
+        card.dataset.arckey = 'documents:' + d.id;
+        const _dcb = _arcSelectMode ? '<input type="checkbox" class="memory-select-cb" data-arckey="documents:' + d.id + '"' + (_arcSelected.has('documents:' + d.id) ? ' checked' : '') + '>' : '';
+        card.innerHTML =
+          '<div class="doclib-chat-header" style="display:flex;align-items:center;width:100%;gap:6px;">' +
+            _dcb +
+            '<div style="flex:1;min-width:0;">' +
+              '<div class="memory-item-title">' + _arcDocIco + _esc(d.title || 'Untitled') + '</div>' +
+              '<div class="memory-item-meta" style="font-size:10px;opacity:0.4;margin-top:2px;">' + ['Document', (d.language || 'text'), _relTime(d.updated_at)].filter(Boolean).join(' · ') + '</div>' +
+            '</div>' +
+            '<div class="memory-item-actions"><button class="memory-item-btn _arc-doc-menu" title="Actions"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg></button></div>' +
+          '</div>' +
+          '<div class="doclib-chat-preview" style="display:none;"></div>';
+        const _dcbEl = card.querySelector('.memory-select-cb');
+        if (_dcbEl) { _dcbEl.addEventListener('click', e => e.stopPropagation()); _dcbEl.addEventListener('change', () => { if (_dcbEl.checked) _arcSelected.add('documents:' + d.id); else _arcSelected.delete('documents:' + d.id); _updateArcCount(); }); }
+        card.addEventListener('click', (e) => {
+          if (e.target.closest('._arc-doc-menu') || e.target.closest('.memory-select-cb')) return;
+          if (_arcSelectMode) { const c = card.querySelector('.memory-select-cb'); if (c) { c.checked = !c.checked; if (c.checked) _arcSelected.add('documents:' + d.id); else _arcSelected.delete('documents:' + d.id); _updateArcCount(); } return; }
+          _toggleArcDocPreview(card, d);
+        });
+        card.querySelector('._arc-doc-menu').addEventListener('click', (e) => { e.stopPropagation(); _showLibDropdown(e.currentTarget, [
+          { label: 'Restore', action: async () => { await fetch(API_BASE + '/api/document/' + d.id + '/archive?archived=false', { method: 'POST', credentials: 'same-origin' }); _renderLibArchive(); } },
+          { label: 'Delete', danger: true, action: async () => { if (!await window.styledConfirm('Delete this document?', { confirmText: 'Delete', danger: true })) return; await fetch(API_BASE + '/api/document/' + d.id, { method: 'DELETE', credentials: 'same-origin' }); _renderLibArchive(); } },
+        ], { onSelect: () => {
+          _arcSelectMode = true;
+          _arcSelected.add('documents:' + d.id);
+          document.getElementById('doclib-arc-bulk')?.classList.remove('hidden');
+          _renderArcGrid();
+        } }); });
+        _attachLongPressMenu(card, '._arc-doc-menu');
+        grid.appendChild(card);
+      }
+      // Archived RESEARCH — magnifier icon, Open / Restore / Delete.
+      const _arcResIco = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;opacity:0.5;flex-shrink:0;"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>';
+      for (const r of filtResearch) {
+        const card = document.createElement('div');
+        card.className = 'memory-item doclib-chat-row';
+        card.style.cursor = 'pointer';
+        card.dataset.arckey = 'research:' + r.id;
+        const _rcb = _arcSelectMode ? '<input type="checkbox" class="memory-select-cb" data-arckey="research:' + r.id + '"' + (_arcSelected.has('research:' + r.id) ? ' checked' : '') + '>' : '';
+        card.innerHTML =
+          '<div class="doclib-chat-header" style="display:flex;align-items:center;width:100%;gap:6px;">' +
+            _rcb +
+            '<div style="flex:1;min-width:0;">' +
+              '<div class="memory-item-title">' + _arcResIco + _esc(r.query || 'Research') + '</div>' +
+              '<div class="memory-item-meta" style="font-size:10px;opacity:0.4;margin-top:2px;">' + ['Research', (r.source_count ? r.source_count + ' sources' : ''), _relTime(r.completed_at ? new Date(r.completed_at * 1000).toISOString() : '')].filter(Boolean).join(' · ') + '</div>' +
+            '</div>' +
+            '<div class="memory-item-actions"><button class="memory-item-btn _arc-res-menu" title="Actions"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg></button></div>' +
+          '</div>' +
+          '<div class="doclib-chat-preview" style="display:none;"></div>';
+        const _rcbEl = card.querySelector('.memory-select-cb');
+        if (_rcbEl) { _rcbEl.addEventListener('click', e => e.stopPropagation()); _rcbEl.addEventListener('change', () => { if (_rcbEl.checked) _arcSelected.add('research:' + r.id); else _arcSelected.delete('research:' + r.id); _updateArcCount(); }); }
+        card.addEventListener('click', (e) => {
+          if (e.target.closest('._arc-res-menu') || e.target.closest('.memory-select-cb')) return;
+          if (_arcSelectMode) { const c = card.querySelector('.memory-select-cb'); if (c) { c.checked = !c.checked; if (c.checked) _arcSelected.add('research:' + r.id); else _arcSelected.delete('research:' + r.id); _updateArcCount(); } return; }
+          _toggleResearchPreview(card, r);
+        });
+        card.querySelector('._arc-res-menu').addEventListener('click', (e) => { e.stopPropagation(); _showLibDropdown(e.currentTarget, [
+          { label: 'Open', action: () => { const a = document.createElement('a'); a.href = '/api/research/report/' + r.id; a.target = '_blank'; a.rel = 'noopener'; document.body.appendChild(a); a.click(); a.remove(); } },
+          { label: 'Restore', action: async () => { await fetch('/api/research/' + r.id + '/archive?archived=false', { method: 'POST', credentials: 'same-origin' }); _renderLibArchive(); } },
+          { label: 'Delete', danger: true, action: async () => { if (!await window.styledConfirm('Delete this research?', { confirmText: 'Delete', danger: true })) return; await fetch('/api/research/' + r.id, { method: 'DELETE', credentials: 'same-origin' }); _renderLibArchive(); } },
+        ], { onSelect: () => {
+          _arcSelectMode = true;
+          _arcSelected.add('research:' + r.id);
+          document.getElementById('doclib-arc-bulk')?.classList.remove('hidden');
+          _renderArcGrid();
+        } }); });
+        _attachLongPressMenu(card, '._arc-res-menu');
+        grid.appendChild(card);
+      }
+      _appendInlineLoadMore(grid, total, _arcVisibleLimit, () => {
+        _arcVisibleLimit += _LIB_PAGE_SIZE;
+        _renderArcGrid();
+      });
+    }
+
+    function _renderArcChips() {
+      const el = document.getElementById('doclib-arc-chips');
+      if (!el) return;
+      // Type filters: All / Chats / Documents / Research (only the ones present).
+      el.innerHTML = '';
+      const mk = (label, val, count) => {
+        const c = document.createElement('button');
+        c.className = 'memory-cat-chip' + (_arcTypeFilter === val ? ' active' : '');
+        c.textContent = label + ' (' + count + ')';
+        c.addEventListener('click', () => { _arcTypeFilter = _arcTypeFilter === val ? '' : val; _renderArcGrid(); _renderArcChips(); });
+        el.appendChild(c);
+      };
+      const total = _arcSessions.length + _arcDocs.length + _arcResearch.length;
+      if (!total) return;
+      mk('All', '', total);
+      if (_arcSessions.length) mk('Chats', 'chats', _arcSessions.length);
+      if (_arcDocs.length) mk('Documents', 'documents', _arcDocs.length);
+      if (_arcResearch.length) mk('Research', 'research', _arcResearch.length);
+    }
+
+    function _updateArcCount() { const el = document.getElementById('doclib-arc-selected-count'); if (el) el.textContent = _arcSelected.size + ' Selected'; }
+
+    // Archive event listeners
+    document.getElementById('doclib-arc-sort').addEventListener('change', (e) => { _arcSort = e.target.value; _renderArcGrid(); });
+    document.getElementById('doclib-arc-search').addEventListener('input', (e) => { _arcSearch = e.target.value.trim(); _renderArcGrid(); });
+    document.getElementById('doclib-arc-select-btn').addEventListener('click', () => { _arcSelectMode = !_arcSelectMode; _arcSelected.clear(); document.getElementById('doclib-arc-bulk').classList.toggle('hidden', !_arcSelectMode); _renderArcGrid(); });
+    document.getElementById('doclib-arc-bulk-cancel')?.addEventListener('click', () => {
+      _arcSelectMode = false; _arcSelected.clear();
+      document.getElementById('doclib-arc-bulk').classList.add('hidden');
+      _renderArcGrid();
+    });
+    // Select-all toggles EVERY visible archived card (chats + docs + research),
+    // keyed by the card's composite "type:id" data-arckey.
+    function _arcToggleAll() {
+      const cbs = document.querySelectorAll('#doclib-arc-grid .memory-select-cb');
+      const newState = _arcSelected.size < cbs.length;
+      const allCb = document.getElementById('doclib-arc-select-all');
+      if (allCb) allCb.checked = newState;
+      cbs.forEach(cb => {
+        cb.checked = newState;
+        const k = cb.dataset.arckey;
+        if (k) { if (newState) _arcSelected.add(k); else _arcSelected.delete(k); }
+      });
+      _updateArcCount();
+    }
+    document.getElementById('doclib-arc-select-all').addEventListener('change', _arcToggleAll);
+    document.getElementById('doclib-arc-bulk').addEventListener('click', (e) => {
+      if (e.target.closest('button') || e.target.closest('input')) return;
+      _arcToggleAll();
+    });
+    // Route a composite "type:id" key to the right restore / delete endpoint.
+    function _arcRestoreOne(key) {
+      const i = key.indexOf(':'), type = key.slice(0, i), id = key.slice(i + 1);
+      if (type === 'documents') return fetch(API_BASE + '/api/document/' + id + '/archive?archived=false', { method: 'POST', credentials: 'same-origin' });
+      if (type === 'research') return fetch('/api/research/' + id + '/archive?archived=false', { method: 'POST', credentials: 'same-origin' });
+      return fetch(API_BASE + '/api/session/' + id + '/unarchive', { method: 'POST', credentials: 'same-origin' });
+    }
+    function _arcDeleteOne(key) {
+      const i = key.indexOf(':'), type = key.slice(0, i), id = key.slice(i + 1);
+      if (type === 'documents') return fetch(API_BASE + '/api/document/' + id, { method: 'DELETE', credentials: 'same-origin' });
+      if (type === 'research') return fetch('/api/research/' + id, { method: 'DELETE', credentials: 'same-origin' });
+      return fetch(API_BASE + '/api/session/' + id, { method: 'DELETE', credentials: 'same-origin' });
+    }
+    document.getElementById('doclib-arc-bulk-restore').addEventListener('click', async () => {
+      if (!_arcSelected.size) return;
+      await Promise.all([..._arcSelected].map(_arcRestoreOne));
+      _arcSelected.clear(); _arcSelectMode = false;
+      document.getElementById('doclib-arc-bulk').classList.add('hidden');
+      _renderLibArchive();
+    });
+    document.getElementById('doclib-arc-bulk-delete').addEventListener('click', async () => {
+      const count = _arcSelected.size;
+      if (!count) return;
+      if (!await window.styledConfirm(`Delete ${count} archived item${count > 1 ? 's' : ''} permanently?`, { confirmText: 'Delete', danger: true })) return;
+      const grid = document.getElementById('doclib-arc-grid');
+      if (grid) {
+        grid.querySelectorAll('.memory-item[data-arckey]').forEach(card => {
+          if (_arcSelected.has(card.dataset.arckey)) {
+            card.style.transition = 'opacity 0.25s, transform 0.25s';
+            card.style.opacity = '0';
+            card.style.transform = 'scale(0.95)';
+          }
+        });
+      }
+      await new Promise(r => setTimeout(r, 250));
+      await Promise.all([..._arcSelected].map(_arcDeleteOne));
+      _arcSelected.clear();
+      _arcSelectMode = false;
+      document.getElementById('doclib-arc-bulk').classList.add('hidden');
+      _renderLibArchive();
+    });
+
+    // ── Research tab ──
+    let _researchItems = [];
+    let _researchSearch = '';
+    let _researchSelectMode = false;
+    let _researchArchivedView = false;
+    const _researchSelected = new Set();
+
+    async function _renderLibResearch() {
+      const grid = document.getElementById('doclib-research-grid');
+      const stats = document.getElementById('doclib-research-stats');
+      if (!grid) return;
+      // Show our whirlpool spinner instead of the plain "Loading..." text.
+      grid.innerHTML = '';
+      try {
+        const _spm = (await import('./spinner.js')).default;
+        const _sp = _spm.createWhirlpool(22);
+        _sp.element.style.cssText = 'margin:18px auto;display:block;';
+        grid.appendChild(_sp.element);
+      } catch { grid.innerHTML = '<div class="hwfit-loading">Loading…</div>'; }
+      try {
+        const res = await fetch('/api/research/library' + (_researchArchivedView ? '?archived=true' : ''), { credentials: 'same-origin' });
+        if (!res.ok) throw new Error(res.statusText);
+        const data = await res.json();
+        _researchItems = data.research || data || [];
+      } catch (e) {
+        grid.innerHTML = `<div class="hwfit-loading">Failed to load: ${e.message}</div>`;
+        return;
+      }
+      _renderResearchGrid();
+    }
+
+    // Toggle inline preview for a research row. Mirrors _toggleChatPreview
+     // but pulls research-specific metadata: query, sources list (truncated),
+     // followed by an "Open" action that loads the full report.
+    async function _toggleResearchPreview(card, item) {
+      const preview = card.querySelector('.doclib-chat-preview');
+      if (!preview) return;
+      const isOpen = card.classList.contains('doclib-card-expanded');
+      const grid = card.closest('.doclib-grid');
+      if (grid) {
+        grid.querySelectorAll('.doclib-card-expanded').forEach(c => {
+          if (c !== card) {
+            c.classList.remove('doclib-card-expanded');
+            const p = c.querySelector('.doclib-chat-preview');
+            if (p) { p.style.display = 'none'; p.innerHTML = ''; }
+          }
+        });
+      }
+      if (isOpen) {
+        card.classList.remove('doclib-card-expanded');
+        preview.style.display = 'none';
+        preview.innerHTML = '';
+        return;
+      }
+      card.classList.add('doclib-card-expanded');
+      preview.style.display = 'block';
+      preview.innerHTML = '<div style="opacity:0.4;font-size:11px;padding:8px 4px;">Loading…</div>';
+      let detail = item;
+      try {
+        // Hit the per-research detail endpoint to pull sources + summary.
+        // The library list endpoint only returns lightweight metadata.
+        const res = await fetch(`${API_BASE}/api/research/detail/${item.id}`, { credentials: 'same-origin' });
+        if (res.ok) detail = await res.json();
+      } catch {}
+      const sources = Array.isArray(detail.sources) ? detail.sources : [];
+      const sourcesList = sources.slice(0, 12).map((src, i) => {
+        const title = _esc(src.title || src.url || `Source ${i + 1}`);
+        const url = src.url || '';
+        return url
+          ? `<li><a href="${_esc(url)}" target="_blank" rel="noopener">${title}</a></li>`
+          : `<li>${title}</li>`;
+      }).join('');
+      const sourcesHtml = sources.length
+        ? `<div class="doclib-research-sources"><div class="doclib-research-section-label">Sources (${sources.length})</div><ol>${sourcesList}${sources.length > 12 ? `<li style="opacity:0.5;">…and ${sources.length - 12} more</li>` : ''}</ol></div>`
+        : '';
+      // The stored research JSON keeps the report under `result` (clean) /
+      // `raw_report` — there's no `summary` field, so the preview was empty.
+      const summary = (detail.summary || detail.report_summary || detail.result || detail.raw_report || '').toString().trim();
+      const summaryHtml = summary
+        ? `<div class="doclib-research-summary"><div class="doclib-research-section-label">Report</div><div>${markdownModule.mdToHtml ? markdownModule.mdToHtml(summary) : _esc(summary)}</div></div>`
+        : '';
+      preview.innerHTML =
+        '<div class="doclib-chat-preview-messages">' +
+          (summaryHtml || sourcesHtml || '<div style="opacity:0.4;font-size:11px;padding:6px 4px;">No preview available</div>') +
+          (summaryHtml && sourcesHtml ? sourcesHtml : '') +
+        '</div>' +
+        '<div class="doclib-chat-preview-actions">' +
+          '<button class="doclib-chat-delete-btn">' +
+            '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>' +
+            'Delete' +
+          '</button>' +
+          '<button class="doclib-chat-archive-btn">' +
+            '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>' +
+            ((_researchArchivedView || item.archived) ? 'Restore' : 'Archive') +
+          '</button>' +
+          // Discuss is hidden in the Archive so the footer matches chat
+          // (Delete + Restore + Open).
+          (item.archived ? '' :
+          '<button class="doclib-chat-discuss-btn">' +
+            '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>' +
+            'Discuss' +
+          '</button>') +
+          '<button class="doclib-chat-open-btn">' +
+            '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>' +
+            'Open' +
+          '</button>' +
+        '</div>';
+      const discussBtn = preview.querySelector('.doclib-chat-discuss-btn');
+      if (discussBtn) discussBtn.addEventListener('click', async (e) => {
+        e.stopPropagation();
+        const _orig = discussBtn.innerHTML;
+        discussBtn.disabled = true;
+        discussBtn.textContent = 'Creating…';
+        try {
+          const _sid = detail.session_id || detail.id || item.id;
+          const res = await fetch(`${API_BASE}/api/research/spinoff/${_sid}`, { method: 'POST', credentials: 'same-origin' });
+          if (!res.ok) { let d = ''; try { d = (await res.json()).detail || ''; } catch {} throw new Error(d || ('HTTP ' + res.status)); }
+          const payload = await res.json();
+          if (window.sessionModule && payload.session_id) {
+            await window.sessionModule.loadSessions().catch(() => {});
+            await window.sessionModule.selectSession(payload.session_id);
+          }
+          closeLibrary();
+        } catch (err) {
+          discussBtn.disabled = false;
+          discussBtn.innerHTML = _orig;
+          if (uiModule) uiModule.showError('Could not start discussion: ' + (err.message || err));
+        }
+      });
+      const openBtn = preview.querySelector('.doclib-chat-open-btn');
+      if (openBtn) openBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const a = document.createElement('a');
+        a.href = '/api/research/report/' + item.id;
+        a.target = '_blank';
+        a.rel = 'noopener';
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+      });
+      const delBtn = preview.querySelector('.doclib-chat-delete-btn');
+      if (delBtn) delBtn.addEventListener('click', async (e) => {
+        e.stopPropagation();
+        const ok = uiModule && uiModule.styledConfirm
+          ? await uiModule.styledConfirm('Delete this research report?', { confirmText: 'Delete', danger: true })
+          : window.confirm('Delete this research report?');
+        if (!ok) return;
+        try {
+          const res = await fetch(`${API_BASE}/api/research/${item.id}`, { method: 'DELETE', credentials: 'same-origin' });
+          if (!res.ok) throw new Error(await res.text());
+          if (item.archived) {
+            _renderLibArchive();
+          } else {
+            _researchItems = _researchItems.filter(r => r.id !== item.id);
+            _renderResearchGrid();
+          }
+        } catch (err) {
+          if (uiModule && uiModule.showError) uiModule.showError('Failed to delete: ' + err.message);
+        }
+      });
+      const arcBtn = preview.querySelector('.doclib-chat-archive-btn');
+      if (arcBtn) arcBtn.addEventListener('click', async (e) => {
+        e.stopPropagation();
+        // From the main Archive tab the item is already archived → Restore and
+        // refresh the archive. From the Research tab, toggle as before.
+        const fromArchiveTab = !!item.archived;
+        const toArchived = fromArchiveTab ? false : !_researchArchivedView;
+        try {
+          await fetch(`${API_BASE}/api/research/${item.id}/archive?archived=${toArchived}`, { method: 'POST', credentials: 'same-origin' });
+          if (fromArchiveTab) {
+            _renderLibArchive();
+          } else {
+            _researchItems = _researchItems.filter(r => r.id !== item.id);
+            _renderResearchGrid();
+          }
+          if (uiModule) uiModule.showToast(toArchived ? 'Archived' : 'Restored');
+        } catch { if (uiModule) uiModule.showError('Failed to ' + (toArchived ? 'archive' : 'restore')); }
+      });
+    }
+
+    function _renderResearchGrid() {
+      const grid = document.getElementById('doclib-research-grid');
+      const stats = document.getElementById('doclib-research-stats');
+      if (!grid) return;
+      const _rsb = document.getElementById('doclib-research-select-btn');
+      if (_rsb) { _rsb.classList.toggle('active', _researchSelectMode); _rsb.textContent = _researchSelectMode ? 'Cancel' : 'Select'; }
+      let items = _researchItems;
+      if (_researchSearch) {
+        const s = _researchSearch.toLowerCase();
+        items = items.filter(r => (r.query || '').toLowerCase().includes(s));
+      }
+      // Sort
+      const _rSort = document.getElementById('doclib-research-sort')?.value || 'recent';
+      if (_rSort === 'recent') items.sort((a, b) => (b.completed_at || 0) - (a.completed_at || 0));
+      else if (_rSort === 'oldest') items.sort((a, b) => (a.completed_at || 0) - (b.completed_at || 0));
+      else if (_rSort === 'most-sources') items.sort((a, b) => (b.source_count || 0) - (a.source_count || 0));
+      else if (_rSort === 'alpha') items.sort((a, b) => (a.query || '').localeCompare(b.query || ''));
+      if (stats) stats.textContent = items.length + ' research' + (items.length !== 1 ? 'es' : '');
+      if (!items.length) {
+        grid.innerHTML =
+          '<div class="hwfit-loading" style="display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;">' +
+            '<span>No research yet</span>' +
+            '<span style="opacity:0.7;font-size:11px;">' +
+              'create one in the <a href="#" data-doclib-open-research style="color:var(--accent,var(--red));text-decoration:underline;">Deep Research</a> tab' +
+            '</span>' +
+          '</div>';
+        grid.querySelector('[data-doclib-open-research]')?.addEventListener('click', (e) => {
+          e.preventDefault();
+          document.getElementById('rail-research')?.click();
+        });
+        _appendInlineLoadMore(grid, 0, _researchVisibleLimit, () => {});
+        return;
+      }
+      const total = items.length;
+      items = items.slice(0, _researchVisibleLimit);
+      let html = '';
+      for (const r of items) {
+        const date = r.completed_at ? new Date(r.completed_at * 1000).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) : '';
+        const time = r.completed_at ? new Date(r.completed_at * 1000).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }) : '';
+        const sources = r.source_count || 0;
+        const duration = r.duration || '';
+        const rounds = r.rounds || '';
+        const selected = _researchSelected.has(r.id);
+        const metaBits = [];
+        if (date) metaBits.push(`${date} ${time}`);
+        if (sources) metaBits.push(`${sources} sources`);
+        if (rounds) metaBits.push(`${rounds} rounds`);
+        if (duration) metaBits.push(`${duration}`);
+        const metaText = metaBits.join(' \u00B7 ');
+        html += `<div class="memory-item doclib-chat-row doclib-research-card" data-research-id="${r.id}" style="cursor:pointer;">`;
+        html += `<div class="doclib-chat-header" style="display:flex;align-items:center;width:100%;gap:6px;">`;
+        if (_researchSelectMode) html += `<input type="checkbox" class="memory-select-cb _res-cb" data-rid="${r.id}"${selected ? ' checked' : ''}>`;
+        html += `<div style="flex:1;min-width:0;">`;
+        html += `<div class="memory-item-title"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;opacity:0.4;flex-shrink:0;"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>${_esc(r.query || 'Untitled Research')}</div>`;
+        html += `<div class="memory-item-meta" style="font-size:10px;opacity:0.4;margin-top:2px;">${metaText}</div>`;
+        html += `</div>`;
+        if (!_researchSelectMode) html += `<div class="memory-item-actions"><button class="memory-item-btn doclib-research-delete" data-rid="${r.id}" title="Delete"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg></button></div>`;
+        html += `</div>`;
+        html += `<div class="doclib-chat-preview" style="display:none;"></div>`;
+        html += `</div>`;
+      }
+      grid.innerHTML = html;
+      _maybeCascadeGrid(grid, 'research');
+
+      // Wire checkboxes
+      grid.querySelectorAll('._res-cb').forEach(cb => {
+        cb.addEventListener('click', e => e.stopPropagation());
+        cb.addEventListener('change', () => {
+          if (cb.checked) _researchSelected.add(cb.dataset.rid); else _researchSelected.delete(cb.dataset.rid);
+          _updateResearchCount();
+        });
+      });
+
+      // Click card → toggle preview (chat-style expand). The menu button
+      // and Open-report button inside the preview are exempt.
+      grid.querySelectorAll('.doclib-research-card').forEach(card => {
+        card.addEventListener('click', (e) => {
+          if (card._suppressNextClick) { card._suppressNextClick = false; return; }
+          if (e.target.closest('.doclib-research-delete') || e.target.closest('._res-cb') || e.target.closest('.doclib-chat-open-btn')) return;
+          const rid = card.dataset.researchId;
+          if (_researchSelectMode) {
+            const cb = card.querySelector('._res-cb');
+            if (cb) { cb.checked = !cb.checked; cb.dispatchEvent(new Event('change')); }
+            return;
+          }
+          const item = _researchItems.find(r => r.id === rid);
+          if (item) _toggleResearchPreview(card, item);
+        });
+        _attachLongPressMenu(card, '.doclib-research-delete');
+      });
+
+      // The action button on each research row opens the actions menu
+      // (Open report, Delete) — chat-style ••• menu.
+      grid.querySelectorAll('.doclib-research-delete').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          const rid = btn.dataset.rid;
+          _showLibDropdown(btn, [
+            { label: 'Open', action: () => {
+                const a = document.createElement('a');
+                a.href = '/api/research/report/' + rid;
+                a.target = '_blank';
+                a.rel = 'noopener';
+                document.body.appendChild(a);
+                a.click();
+                a.remove();
+              } },
+            { label: _researchArchivedView ? 'Restore' : 'Archive', action: async () => {
+                const toArchived = !_researchArchivedView;
+                const card = btn.closest('.doclib-research-card');
+                if (card) { card.style.transition = 'opacity 0.25s, transform 0.25s'; card.style.opacity = '0'; card.style.transform = 'scale(0.95)'; }
+                try { await fetch('/api/research/' + rid + '/archive?archived=' + toArchived, { method: 'POST', credentials: 'same-origin' }); } catch {}
+                await new Promise(r => setTimeout(r, 200));
+                _researchItems = _researchItems.filter(r => r.id !== rid);
+                _renderResearchGrid();
+                if (uiModule) uiModule.showToast(toArchived ? 'Archived' : 'Restored');
+              } },
+            { label: 'Delete', danger: true, action: async () => {
+                if (!await window.styledConfirm('Delete this research?', { confirmText: 'Delete', danger: true })) return;
+                const card = btn.closest('.doclib-research-card');
+                if (card) {
+                  card.style.transition = 'opacity 0.25s, transform 0.25s';
+                  card.style.opacity = '0';
+                  card.style.transform = 'scale(0.95)';
+                }
+                await new Promise(r => setTimeout(r, 250));
+                await fetch('/api/research/' + rid, { method: 'DELETE', credentials: 'same-origin' });
+                _researchItems = _researchItems.filter(r => r.id !== rid);
+                _renderResearchGrid();
+              } },
+          ], { onSelect: () => {
+            _researchSelectMode = true;
+            _researchSelected.add(rid);
+            document.getElementById('doclib-research-bulk')?.classList.remove('hidden');
+            _renderResearchGrid();
+          } });
+        });
+      });
+      _appendInlineLoadMore(grid, total, _researchVisibleLimit, () => {
+        _researchVisibleLimit += _LIB_PAGE_SIZE;
+        _renderResearchGrid();
+      });
+    }
+
+    // Research sort + search
+    const researchSortEl = document.getElementById('doclib-research-sort');
+    if (researchSortEl) researchSortEl.addEventListener('change', () => _renderResearchGrid());
+    const researchSearchEl = document.getElementById('doclib-research-search');
+    if (researchSearchEl) {
+      researchSearchEl.addEventListener('input', () => {
+        _researchSearch = researchSearchEl.value.trim();
+        _renderResearchGrid();
+      });
+    }
+
+    function _updateResearchCount() {
+      const el = document.getElementById('doclib-research-selected-count');
+      if (el) el.textContent = _researchSelected.size + ' Selected';
+      const arc = document.getElementById('doclib-research-bulk-archive');
+      if (arc) arc.textContent = _researchArchivedView ? 'Restore' : 'Archive';
+    }
+
+    // Research select mode
+    document.getElementById('doclib-research-select-btn')?.addEventListener('click', () => {
+      _researchSelectMode = !_researchSelectMode;
+      _researchSelected.clear();
+      document.getElementById('doclib-research-bulk').classList.toggle('hidden', !_researchSelectMode);
+      _renderResearchGrid();
+    });
+
+    // Research tidy — delete reports that came back empty (no sources, or
+    // empty report body). Matches the Chats tidy whirlpool/borderless pattern
+    // and skips confirmation per user request.
+    document.getElementById('doclib-research-tidy-btn')?.addEventListener('click', async (e) => {
+      const btn = e.currentTarget;
+      const origHTML = btn.innerHTML;
+      btn.disabled = true;
+      btn.classList.add('spinning');
+      btn.textContent = '';
+      const sp = spinnerModule.create('', 'clean', 'whirlpool');
+      const el = sp.createElement();
+      el.style.position = 'relative';
+      el.style.top = '1px';
+      btn.appendChild(el);
+      sp.start();
+      try {
+        const candidates = [];
+        const needFetch = [];
+        for (const r of _researchItems) {
+          if ((r.source_count || 0) === 0) candidates.push(r);
+          else needFetch.push(r);
+        }
+        const results = await Promise.all(needFetch.map(async r => {
+          try {
+            const res = await fetch('/api/research/detail/' + r.id, { credentials: 'same-origin' });
+            if (!res.ok) return null;
+            const d = await res.json();
+            // Backend JSON uses `result` (rendered) or `raw_report` (raw md).
+            // If neither exists or both are tiny, treat as empty.
+            const body = (d.result || d.raw_report || '').trim();
+            return body.length < 200 ? r : null;
+          } catch { return null; }
+        }));
+        for (const r of results) if (r) candidates.push(r);
+        if (candidates.length === 0) {
+          if (uiModule) uiModule.showToast('Nothing to tidy');
+          return;
+        }
+        await Promise.all(candidates.map(r => fetch('/api/research/' + r.id, { method: 'DELETE', credentials: 'same-origin' }).catch(() => {})));
+        const ids = new Set(candidates.map(r => r.id));
+        _researchItems = _researchItems.filter(r => !ids.has(r.id));
+        _renderResearchGrid();
+        if (uiModule) uiModule.showToast('Deleted ' + candidates.length);
+      } finally {
+        sp.stop();
+        btn.disabled = false;
+        btn.classList.remove('spinning');
+        btn.innerHTML = origHTML;
+      }
+    });
+    document.getElementById('doclib-research-archived-btn')?.addEventListener('click', (e) => {
+      _researchArchivedView = !_researchArchivedView;
+      e.currentTarget.classList.toggle('active', _researchArchivedView);
+      e.currentTarget.title = _researchArchivedView ? 'Show active research' : 'Show archived research';
+      if (_researchSelectMode) { _researchSelectMode = false; _researchSelected.clear(); document.getElementById('doclib-research-bulk').classList.add('hidden'); }
+      _renderLibResearch();
+    });
+    document.getElementById('doclib-research-bulk-cancel')?.addEventListener('click', () => {
+      _researchSelectMode = false;
+      _researchSelected.clear();
+      document.getElementById('doclib-research-bulk').classList.add('hidden');
+      _renderResearchGrid();
+    });
+
+    // Research select all
+    document.getElementById('doclib-research-select-all')?.addEventListener('change', () => {
+      const allCb = document.getElementById('doclib-research-select-all');
+      const newState = allCb?.checked;
+      _researchItems.forEach(r => { if (newState) _researchSelected.add(r.id); else _researchSelected.delete(r.id); });
+      _updateResearchCount();
+      _renderResearchGrid();
+    });
+
+    // Research bulk delete
+    document.getElementById('doclib-research-bulk-delete')?.addEventListener('click', async () => {
+      const count = _researchSelected.size;
+      if (!count) return;
+      if (!await window.styledConfirm(`Delete ${count} research report${count > 1 ? 's' : ''} permanently?`, { confirmText: 'Delete', danger: true })) return;
+      const grid = document.getElementById('doclib-research-grid');
+      if (grid) {
+        grid.querySelectorAll('.doclib-research-card').forEach(card => {
+          if (_researchSelected.has(card.dataset.researchId)) {
+            card.style.transition = 'opacity 0.25s, transform 0.25s';
+            card.style.opacity = '0';
+            card.style.transform = 'scale(0.95)';
+          }
+        });
+      }
+      await new Promise(r => setTimeout(r, 250));
+      await Promise.all([..._researchSelected].map(rid => fetch('/api/research/' + rid, { method: 'DELETE', credentials: 'same-origin' })));
+      _researchItems = _researchItems.filter(r => !_researchSelected.has(r.id));
+      _researchSelected.clear();
+      _researchSelectMode = false;
+      document.getElementById('doclib-research-bulk').classList.add('hidden');
+      _renderResearchGrid();
+    });
+
+    // Research bulk archive / restore
+    document.getElementById('doclib-research-bulk-archive')?.addEventListener('click', async () => {
+      const count = _researchSelected.size;
+      if (!count) return;
+      const toArchived = !_researchArchivedView;
+      const grid = document.getElementById('doclib-research-grid');
+      if (grid) {
+        grid.querySelectorAll('.doclib-research-card').forEach(card => {
+          if (_researchSelected.has(card.dataset.researchId)) {
+            card.style.transition = 'opacity 0.25s, transform 0.25s';
+            card.style.opacity = '0';
+            card.style.transform = 'scale(0.95)';
+          }
+        });
+      }
+      await new Promise(r => setTimeout(r, 250));
+      await Promise.all([..._researchSelected].map(rid => fetch('/api/research/' + rid + '/archive?archived=' + toArchived, { method: 'POST', credentials: 'same-origin' })));
+      _researchItems = _researchItems.filter(r => !_researchSelected.has(r.id));
+      _researchSelected.clear();
+      _researchSelectMode = false;
+      document.getElementById('doclib-research-bulk').classList.add('hidden');
+      _renderResearchGrid();
+      if (uiModule) uiModule.showToast(toArchived ? 'Archived' : 'Restored');
+    });
+
+    // Shared dropdown for chats/archive menus — defined at module scope below
+    // (was here originally; hoisted so libraryCreateCard's mobile kebab
+    // handler — which lives outside openLibrary's closure — can call it).
+
+    function _relTime(iso) {
+      if (!iso) return '';
+      const diff = Date.now() - new Date(iso).getTime();
+      const mins = Math.floor(diff / 60000);
+      if (mins < 60) return mins + 'm ago';
+      const hrs = Math.floor(mins / 60);
+      if (hrs < 24) return hrs + 'h ago';
+      const days = Math.floor(hrs / 24);
+      if (days < 30) return days + 'd ago';
+      return new Date(iso).toLocaleDateString();
+    }
+
+    // Switch to initial tab if not documents
+    if (_activeLibTab !== 'documents') _switchLibTab(_activeLibTab);
+
+    const searchInput = document.getElementById('doclib-search');
+    searchInput.addEventListener('input', () => {
+      clearTimeout(_librarySearchDebounce);
+      _librarySearchDebounce = setTimeout(() => {
+        _librarySearch = searchInput.value.trim();
+        libraryFetch(false);
+      }, 300);
+    });
+
+    document.getElementById('doclib-sort').addEventListener('change', (e) => {
+      _librarySort = e.target.value;
+      libraryFetch(false);
+    });
+
+    document.getElementById('doclib-load-more').addEventListener('click', () => {
+      _libraryOffset = _libraryDocs.length;
+      libraryFetch(true);
+    });
+
+    // Show "Load more" only when scrolled near bottom
+    const grid = document.getElementById('doclib-grid');
+    if (grid) {
+      grid.addEventListener('scroll', () => libraryRenderLoadMore());
+      // Auto-fill on resize (fullscreen toggle, window resize, sidebar
+      // toggle): re-run the load-more check so newly-revealed empty
+      // space below the last card pulls in the next page automatically.
+      if (typeof ResizeObserver !== 'undefined') {
+        new ResizeObserver(() => libraryRenderLoadMore()).observe(grid);
+      }
+    }
+
+    // Wire file import button
+    const importFileBtn = document.getElementById('doclib-import-file-btn');
+    const fileInput = document.getElementById('doclib-file-input');
+    if (importFileBtn && fileInput) {
+      importFileBtn.addEventListener('click', () => fileInput.click());
+      fileInput.addEventListener('change', async () => {
+        if (fileInput.files.length === 0) return;
+        const files = Array.from(fileInput.files);
+        fileInput.value = '';
+        // Swap the import icon for a whirlpool while files upload.
+        const _orig = importFileBtn.innerHTML;
+        importFileBtn.disabled = true;
+        let _sp = null;
+        try {
+          _sp = spinnerModule.createWhirlpool(12);
+          _sp.element.style.cssText = 'width:12px;height:12px;margin:0 4px 0 0;display:inline-block;vertical-align:middle;position:relative;top:-2px;';
+          importFileBtn.innerHTML = '';
+          importFileBtn.appendChild(_sp.element);
+          importFileBtn.appendChild(document.createTextNode('Import'));
+        } catch {}
+        try {
+          await libraryImportFiles(files);
+        } finally {
+          try { _sp && _sp.stop(); } catch {}
+          importFileBtn.innerHTML = _orig;
+          importFileBtn.disabled = false;
+        }
+      });
+    }
+
+    // Create button — new blank document
+    const createBtn = document.getElementById('doclib-create-btn');
+    if (createBtn) {
+      createBtn.addEventListener('click', async () => {
+        // Create a new session, then create a blank document in it
+        try {
+          const sRes = await fetch('/api/session', { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: 'Untitled Document' }) });
+          const sData = await sRes.json();
+          const sessionId = sData.session_id;
+          await _createDocument(sessionId);
+          // Close library and open the new session
+          closeLibrary();
+          if (window.sessionsModule) window.sessionsModule.loadSession(sessionId);
+          setTimeout(() => _openPanel(), 300);
+        } catch (e) {
+          console.error('Failed to create document:', e);
+          if (uiModule) uiModule.showError('Failed to create document');
+        }
+      });
+    }
+
+    // Archived toggle — flip the Documents list between active and archived.
+    const archivedBtn = document.getElementById('doclib-archived-btn');
+    if (archivedBtn) archivedBtn.addEventListener('click', () => {
+      _libraryArchivedView = !_libraryArchivedView;
+      archivedBtn.classList.toggle('active', _libraryArchivedView);
+      archivedBtn.title = _libraryArchivedView ? 'Show active documents' : 'Show archived documents';
+      if (_librarySelectMode) libraryExitSelectMode();
+      libraryFetch(false);
+    });
+
+    // Tidy button — remove empty/broken documents
+    const tidyBtn = document.getElementById('doclib-tidy-btn');
+    if (tidyBtn) tidyBtn.addEventListener('click', async () => {
+      tidyBtn.disabled = true;
+      tidyBtn.classList.add('spinning');
+      const origHTML = tidyBtn.innerHTML;
+      tidyBtn.textContent = '';
+      const spinner = spinnerModule.create('', 'clean', 'whirlpool');
+      const _spEl = spinner.createElement();
+      // Optical alignment: whirlpool reads 1px high inside the button.
+      _spEl.style.position = 'relative';
+      _spEl.style.top = '1px';
+      tidyBtn.appendChild(_spEl);
+      spinner.start();
+
+      let totalDeleted = 0;
+      let totalFixed = 0;
+      let aiMessage = '';
+      try {
+        // Phase 1: regex tidy (empty/broken docs)
+        const [res1] = await Promise.all([
+          fetch(`${API_BASE}/api/documents/tidy`, { method: 'POST' }),
+          new Promise(r => setTimeout(r, 600)),
+        ]);
+        if (res1.ok) {
+          const d1 = await res1.json();
+          totalDeleted += d1.deleted || 0;
+          totalFixed += d1.fixed_titles || 0;
+        }
+
+        // Phase 2: AI tidy (junk/test detection)
+        try {
+          const res2 = await fetch(`${API_BASE}/api/documents/ai-tidy`, { method: 'POST' });
+          if (res2.ok) {
+            const d2 = await res2.json();
+            totalDeleted += d2.deleted || 0;
+            if (d2.message) aiMessage = d2.message;
+          }
+        } catch (_) { /* AI tidy is optional */ }
+
+        spinner.destroy();
+
+        if (totalDeleted === 0 && totalFixed === 0) {
+          tidyBtn.innerHTML = '<span style="opacity:0.7">Already tidy</span>';
+        } else {
+          const msg = aiMessage || `Removed ${totalDeleted} document${totalDeleted !== 1 ? 's' : ''}`;
+          if (uiModule) uiModule.showToast(msg);
+          libraryFetch(false);
+        }
+        setTimeout(() => { tidyBtn.innerHTML = origHTML; tidyBtn.disabled = false; tidyBtn.classList.remove('spinning'); }, 1500);
+      } catch (e) {
+        spinner.destroy();
+        console.error('Document tidy failed:', e);
+        if (uiModule) uiModule.showToast('Tidy failed');
+        tidyBtn.disabled = false;
+        tidyBtn.classList.remove('spinning');
+        tidyBtn.innerHTML = origHTML;
+      }
+    });
+
+    // Select mode
+    const selectBtn = document.getElementById('doclib-select-btn');
+    if (selectBtn) selectBtn.addEventListener('click', () => {
+      if (_librarySelectMode) libraryExitSelectMode();
+      else libraryEnterSelectMode();
+    });
+
+    const selectAll = document.getElementById('doclib-select-all');
+    if (selectAll) selectAll.addEventListener('change', libraryToggleSelectAll);
+
+    // Click anywhere in the bulk bar "All" label or count area to toggle select-all
+    const bulkCheckLabel = modal.querySelector('.memory-bulk-check-all');
+    if (bulkCheckLabel) {
+      bulkCheckLabel.addEventListener('click', (e) => {
+        if (e.target === selectAll) return; // let native checkbox handle it
+        e.preventDefault();
+        selectAll.checked = !selectAll.checked;
+        libraryToggleSelectAll();
+      });
+    }
+    const selectedCountEl = document.getElementById('doclib-selected-count');
+    if (selectedCountEl) {
+      selectedCountEl.style.cursor = 'pointer';
+      selectedCountEl.addEventListener('click', () => {
+        selectAll.checked = !selectAll.checked;
+        libraryToggleSelectAll();
+      });
+    }
+
+    const bulkActionsBtn = document.getElementById('doclib-bulk-actions');
+    if (bulkActionsBtn) bulkActionsBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (_librarySelectedIds.size === 0) {
+        if (uiModule) uiModule.showToast('Select documents first');
+        return;
+      }
+      _showLibDropdown(e.currentTarget, [
+        { label: _libraryArchivedView ? 'Restore' : 'Archive', icon: _libraryArchivedView ? 'restore' : 'archive', action: libraryBulkArchive },
+        { label: 'Clone', icon: 'clone', action: libraryBulkClone },
+        { label: 'Export', icon: 'open', action: libraryBulkExport },
+        { label: 'Delete', icon: 'delete', danger: true, action: libraryBulkDelete },
+      ], { onCancel: libraryExitSelectMode });
+    });
+
+    const bulkCancelBtn = document.getElementById('doclib-bulk-cancel');
+    if (bulkCancelBtn) bulkCancelBtn.addEventListener('click', libraryExitSelectMode);
+
+    // Close on click outside modal content
+    modal.addEventListener('click', (e) => {
+      if (uiModule.isTouchInsideModal()) return;
+      if (e.target === modal) closeLibrary();
+    });
+
+    // Escape key
+    _libraryEscHandler = (e) => {
+      if (e.key === 'Escape') {
+        // Collapse expanded card first, then close modal on second Escape
+        const expanded = document.querySelector('#doclib-grid .doclib-card-expanded');
+        if (expanded) {
+          _collapseExpandedCard(expanded);
+        } else {
+          closeLibrary();
+        }
+      }
+    };
+    document.addEventListener('keydown', _libraryEscHandler);
+
+    // Toggle active on tool button
+    const btn = document.getElementById('tool-doclib-btn');
+    if (btn) btn.classList.add('active');
+
+    libraryFetch(false);
+    if (window.innerWidth >= 768) searchInput.focus();
+  }
+
+  export function closeLibrary() {
+    if (!_libraryOpen) return;
+    _libraryOpen = false;
+    _librarySelectMode = false;
+    _librarySelectedIds.clear();
+    _libraryImportMode = false;
+    clearTimeout(_librarySearchDebounce);
+
+    const modal = document.getElementById('doclib-modal');
+    if (modal) {
+      const content = modal.querySelector('.modal-content, .doclib-modal-content');
+      if (content) {
+        content.classList.add('modal-closing');
+        content.addEventListener('animationend', () => modal.remove(), { once: true });
+        setTimeout(() => { if (modal.parentElement) modal.remove(); }, 250);
+      } else {
+        modal.remove();
+      }
+    }
+
+    if (_libraryEscHandler) {
+      document.removeEventListener('keydown', _libraryEscHandler);
+      _libraryEscHandler = null;
+    }
+
+    const btn = document.getElementById('tool-doclib-btn');
+    if (btn) btn.classList.remove('active');
+  }
+
+  export function isLibraryOpen() {
+    return _libraryOpen;
+  }