dsh-cait 1.0.5 → 1.1.3

package/client/components.js

@@ -32,7 +32,11 @@
         globe: ['M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z', 'M2.5 8h11', 'M8 2c2 2 2 10 0 12', 'M8 2c-2 2-2 10 0 12'],
         alert: ['M8 2L14 13H2L8 2Z', 'M8 6v3.5', 'M8 11.5v.2'],
         save: ['M3 2h8l2 2v10H3z', 'M5 2v4h6V2', 'M5 14v-4h6v4'],
+        pencil: ['M11 2.5l2.5 2.5-8 8L2 14l1-3.5 8-8Z', 'M9.5 4l2.5 2.5'],
         languages: ['M2 4h7', 'M5.5 4v2c0 2-1.5 4-3.5 5', 'M4 8c0 1.5 2 3 4.5 3.5', 'M9 13l3-7 3 7', 'M10 11h4'],
+        check: ['M3 8.5l3.2 3.2L13 4.3'],
+        align: ['M2 5h8', 'M2 11h5', 'M12 3v10', 'M10 11l2 2 2-2'],
+        folder: ['M2 4h4l1.5 2H14v6.5H2z'],
       }
       const shape = paths[name] || paths.file
       return h(
@@ -295,10 +299,21 @@
       onCloseDoc,
       onNewTab,
       onCleanClosed,
+      pre,
+      onPreTranslate,
+      onCancelPreTranslate,
+      view,
+      onView,
     }) {
       const progress = doc?.progress || { percent: 0, confirmed: 0, total: 0 }
       const openIds = new Set((data.openDocuments || []).map((item) => item.id))
       const closedDocuments = (data.documents || []).filter((item) => !openIds.has(item.id))
+      const documentsView = view === 'documents'
+      const viewTabs = [
+        { id: 'documents', label: t('nav.documents') },
+        { id: 'libraries', label: t('nav.libraries') },
+        { id: 'align', label: t('nav.align') },
+      ]
       return h(
         'header',
         { className: 'cait-topbar' },
@@ -310,83 +325,314 @@
         ),
         h(
           'div',
-          { className: 'cait-docbar' },
-          h(DocTabs, {
-            t,
-            documents: data.openDocuments || data.documents || [],
-            activeId: doc?.id,
-            busy,
-            onOpen: onOpenDoc,
-            onClose: onCloseDoc,
-            onNew: onNewTab,
-          }),
-          h(ClosedDocPicker, { t, documents: closedDocuments, busy, onOpen: onOpenDoc }),
-          closedDocuments.length
+          { className: 'cait-viewtabs' },
+          viewTabs.map((tab) =>
+            h(
+              'button',
+              {
+                key: tab.id,
+                type: 'button',
+                className: `cait-viewtab${view === tab.id ? ' active' : ''}`,
+                onClick: () => onView(tab.id),
+              },
+              tab.label,
+            ),
+          ),
+        ),
+        documentsView
+          ? h(
+              'div',
+              { className: 'cait-docbar' },
+              h(DocTabs, {
+                t,
+                documents: data.openDocuments || data.documents || [],
+                activeId: doc?.id,
+                busy,
+                onOpen: onOpenDoc,
+                onClose: onCloseDoc,
+                onNew: onNewTab,
+              }),
+              h(ClosedDocPicker, { t, documents: closedDocuments, busy, onOpen: onOpenDoc }),
+              closedDocuments.length
+                ? h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'cait-doc-clean',
+                      title: t('doc.clean'),
+                      'aria-label': t('doc.clean'),
+                      disabled: Boolean(busy),
+                      onClick: onCleanClosed,
+                    },
+                    h(Icon, { name: 'trash', size: 13 }),
+                  )
+                : null,
+              doc
+                ? h('span', { className: 'cait-doc-progress' }, `${progress.confirmed}/${progress.total} · ${progress.percent}%`)
+                : null,
+            )
+          : h('div', { className: 'cait-docbar' }),
+        h(
+          'div',
+          { className: 'cait-actions' },
+          documentsView && pre && pre.running
+            ? h(
+                'span',
+                { className: 'cait-pre-status', title: t('pretranslate.running') },
+                h(Spinner),
+                h('span', null, `${t('pretranslate.running')} ${pre.done}/${pre.total}`),
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'cait-iconbtn',
+                    title: t('pretranslate.cancel'),
+                    'aria-label': t('pretranslate.cancel'),
+                    onClick: onCancelPreTranslate,
+                  },
+                  h(Icon, { name: 'close', size: 13 }),
+                ),
+              )
+            : null,
+          documentsView && !(pre && pre.running)
             ? h(
                 'button',
                 {
-                  type: 'button',
-                  className: 'cait-doc-clean',
-                  title: t('doc.clean'),
-                  'aria-label': t('doc.clean'),
-                  disabled: Boolean(busy),
-                  onClick: onCleanClosed,
+                  className: 'cait-btn',
+                  onClick: onPreTranslate,
+                  disabled: Boolean(busy) || !doc || !(doc.progress?.total > 0),
+                  title: t('pretranslate.title'),
                 },
-                h(Icon, { name: 'trash', size: 13 }),
+                h(Icon, { name: 'sparkles', size: 14 }),
+                h('span', { className: 'cait-btn-label' }, t('pretranslate.start')),
               )
             : null,
-          doc
-            ? h('span', { className: 'cait-doc-progress' }, `${progress.confirmed}/${progress.total} · ${progress.percent}%`)
+          documentsView
+            ? h(
+                'button',
+                { className: 'cait-btn', onClick: onNew, disabled: Boolean(busy), title: t('nav.new') },
+                h(Icon, { name: 'plus', size: 14 }),
+                h('span', { className: 'cait-btn-label' }, t('nav.new')),
+              )
+            : null,
+          documentsView
+            ? h(
+                'button',
+                { className: 'cait-btn', onClick: onImport, disabled: Boolean(busy), title: t('nav.import') },
+                h(Icon, { name: 'upload', size: 14 }),
+                h('span', { className: 'cait-btn-label' }, t('nav.import')),
+              )
+            : null,
+          documentsView
+            ? h(
+                'button',
+                { className: 'cait-btn', onClick: onExport, disabled: Boolean(busy) || !doc, title: t('nav.export') },
+                h(Icon, { name: 'download', size: 14 }),
+                h('span', { className: 'cait-btn-label' }, t('nav.export')),
+              )
             : null,
-        ),
-        h(
-          'div',
-          { className: 'cait-actions' },
-          h(
-            'button',
-            { className: 'cait-btn', onClick: onNew, disabled: Boolean(busy), title: t('nav.new') },
-            h(Icon, { name: 'plus', size: 14 }),
-            h('span', { className: 'cait-btn-label' }, t('nav.new')),
-          ),
-          h(
-            'button',
-            { className: 'cait-btn', onClick: onImport, disabled: Boolean(busy), title: t('nav.import') },
-            h(Icon, { name: 'upload', size: 14 }),
-            h('span', { className: 'cait-btn-label' }, t('nav.import')),
-          ),
-          h(
-            'button',
-            { className: 'cait-btn', onClick: onExport, disabled: Boolean(busy) || !doc, title: t('nav.export') },
-            h(Icon, { name: 'download', size: 14 }),
-            h('span', { className: 'cait-btn-label' }, t('nav.export')),
-          ),
           h('button', { className: 'cait-iconbtn', onClick: onSettings, disabled: Boolean(busy), title: t('nav.settings') }, h(Icon, { name: 'settings', size: 15 })),
         ),
       )
     }
 
-    function SegmentRail({ t, doc, selected, query, setQuery, onSelect }) {
+    const SEGMENT_FILTERS = ['all', 'pending', 'translated', 'confirmed']
+
+    function SegmentRail({ t, doc, selected, query, setQuery, filter, setFilter, onSelect, onConfirmAll, onPropagate, busy, qa }) {
       const activeRef = useRef(null)
+      const storage = typeof localStorage !== 'undefined' ? localStorage : null
+      const [pageSize, setPageSize] = useState(() => readPageSize(storage))
+      const [page, setPage] = useState(1)
+      const [gotoText, setGotoText] = useState('')
+      const [gotoBad, setGotoBad] = useState(false)
+      const lastSelected = useRef(selected)
       useEffect(() => {
         if (activeRef.current) activeRef.current.scrollIntoView({ block: 'nearest' })
-      }, [selected])
+      }, [selected, filter])
+
+      // Advisory QA marks: the check never blocks editing or exporting, it only
+      // flags the segment in the rail so review can start where it matters.
+      const warns = new Map()
+      for (const issue of qa?.issues || []) {
+        const list = warns.get(issue.index) || []
+        list.push(issue.code)
+        warns.set(issue.index, list)
+      }
 
+      const counts = {
+        all: doc.progress.total,
+        pending: doc.progress.pending,
+        translated: doc.progress.translated,
+        confirmed: doc.progress.confirmed,
+      }
+
+      // How many empty segments could be filled from a sibling with the same
+      // source. Shown on the rail so propagation is a visible, one-click choice
+      // rather than something happening behind the user's back.
+      const duplicateGroups = new Map()
+      for (const segment of doc.segments) {
+        const key = String(segment.source || '').replace(/\s+/g, ' ').trim().toLowerCase()
+        if (!key) continue
+        const list = duplicateGroups.get(key) || []
+        list.push(segment)
+        duplicateGroups.set(key, list)
+      }
+      let duplicated = 0
+      for (const list of duplicateGroups.values()) {
+        if (list.length < 2 || !list.some((segment) => segment.target)) continue
+        duplicated += list.filter((segment) => !segment.target).length
+      }
       const needle = query.trim().toLowerCase()
-      const items = doc.segments
+      const filtered = doc.segments
         .map((segment, index) => ({ segment, index }))
+        .filter(({ segment }) => filter === 'all' || segment.status === filter)
         .filter(({ segment }) => {
           if (!needle) return true
-          return segment.source.toLowerCase().includes(needle) || (segment.target || '').toLowerCase().includes(needle)
+          return (
+            segment.source.toLowerCase().includes(needle) ||
+            (segment.target || '').toLowerCase().includes(needle) ||
+            (segment.suggestion || '').toLowerCase().includes(needle)
+          )
         })
 
+      // A rail window is a view over the filtered list: the page is clamped to
+      // the result count instead of being reset, so narrowing a filter keeps the
+      // reader near where they were.
+      const bounds = pageBounds(page, filtered.length, pageSize)
+      const firstRow = bounds.start === 0 ? 0 : bounds.start - 1
+      const visible = filtered.slice(firstRow, bounds.end)
+
+      useEffect(() => {
+        if (bounds.page !== page) setPage(bounds.page)
+      }, [bounds.page, page])
+
+      // Selection can move from outside the rail (next-unconfirmed, batch
+      // confirm), so follow it onto the page that holds it.
+      useEffect(() => {
+        if (lastSelected.current === selected) return
+        lastSelected.current = selected
+        const position = filtered.findIndex((item) => item.index === selected)
+        if (position < 0) return
+        const target = Math.floor(position / pageSize) + 1
+        if (target !== bounds.page) setPage(target)
+      }, [selected])
+
+      const changePageSize = (value) => {
+        const size = writePageSize(storage, value)
+        setPageSize(size)
+        setPage(1)
+      }
+
+      const submitGoto = () => {
+        const index = segmentNumberToIndex(gotoText, doc.progress.total)
+        if (index === null) {
+          setGotoBad(true)
+          return
+        }
+        setGotoBad(false)
+        setGotoText('')
+        // A number is useless while a filter or a search hides it, so jumping is
+        // an explicit "show me this segment" and clears both.
+        if (needle || filter !== 'all') {
+          setQuery('')
+          setFilter('all')
+        }
+        lastSelected.current = index
+        setPage(Math.floor(index / pageSize) + 1)
+        onSelect(index)
+      }
+
       return h(
         'aside',
         { className: 'cait-rail' },
         h(
           'div',
           { className: 'cait-rail-head' },
-          h('div', { className: 'cait-rail-title' }, h('span', null, t('rail.title')), h('span', { className: 'cait-count' }, doc.progress.total)),
+          h(
+            'div',
+            { className: 'cait-rail-title' },
+            h('span', null, t('rail.title')),
+            h(
+              'span',
+              { className: 'cait-count', title: `${filtered.length} / ${doc.progress.total}` },
+              needle || filter !== 'all' ? `${filtered.length}/${doc.progress.total}` : doc.progress.total,
+            ),
+          ),
           h('div', { className: 'cait-mini-progress' }, h('i', { style: { width: `${doc.progress.percent}%` } })),
+          h(
+            'div',
+            { className: 'cait-rail-filters' },
+            SEGMENT_FILTERS.map((key) =>
+              h(
+                'button',
+                {
+                  key,
+                  className: `cait-filterchip${filter === key ? ' active' : ''}`,
+                  onClick: () => setFilter(key),
+                  title: t(`rail.filter.${key}`),
+                },
+                h('span', null, t(`rail.filter.${key}`)),
+                h('span', { className: `cait-filtercount ${key}` }, counts[key]),
+              ),
+            ),
+          ),
+          doc.progress.translated > 0
+            ? h(
+                'button',
+                {
+                  className: 'cait-batchbtn',
+                  onClick: onConfirmAll,
+                  disabled: Boolean(busy),
+                  title: t('rail.confirmAllHint'),
+                },
+                h(Icon, { name: 'check', size: 11 }),
+                `${t('rail.confirmAll')} · ${doc.progress.translated}`,
+              )
+            : null,
+          duplicated > 0
+            ? h(
+                'button',
+                {
+                  className: 'cait-batchbtn cait-batchbtn-plain',
+                  onClick: onPropagate,
+                  disabled: Boolean(busy),
+                  title: t('rail.propagateMessage'),
+                },
+                h(Icon, { name: 'copy', size: 11 }),
+                `${t('rail.propagate')} · ${duplicated}`,
+              )
+            : null,
+          h(
+            'div',
+            { className: 'cait-rail-goto' },
+            h('input', {
+              className: `cait-goto-input${gotoBad ? ' bad' : ''}`,
+              value: gotoText,
+              onChange: (event) => {
+                setGotoText(event.target.value)
+                setGotoBad(false)
+              },
+              onKeyDown: (event) => {
+                if (event.key === 'Enter') submitGoto()
+              },
+              placeholder: t('rail.goto'),
+              'aria-label': t('rail.goto'),
+              title: gotoBad ? t('rail.gotoInvalid') : t('rail.goto'),
+              inputMode: 'numeric',
+            }),
+            h(
+              'button',
+              {
+                type: 'button',
+                className: 'cait-gotobtn',
+                onClick: submitGoto,
+                disabled: Boolean(busy),
+                title: t('rail.goto'),
+                'aria-label': t('rail.goto'),
+              },
+              h(Icon, { name: 'arrowRight', size: 12 }),
+            ),
+          ),
         ),
         h(
           'div',
@@ -397,8 +643,8 @@
         h(
           'div',
           { className: 'cait-rail-list' },
-          items.length
-            ? items.map(({ segment, index }) =>
+          visible.length
+            ? visible.map(({ segment, index }) =>
                 h(
                   'button',
                   {
@@ -416,6 +662,13 @@
                       { className: 'cait-seg-line' },
                       h('span', { className: 'cait-seg-index' }, String(index + 1).padStart(2, '0')),
                       h('span', { className: `cait-dot ${segment.status}` }),
+                      warns.has(index)
+                        ? h('span', {
+                            className: 'cait-seg-warn',
+                            title: (warns.get(index) || []).map((code) => t(`qa.code.${code}`)).join(' · '),
+                            'aria-label': t('qa.warn'),
+                          })
+                        : null,
                     ),
                     h('span', { className: 'cait-seg-text' }, segment.source),
                     segment.target ? h('span', { className: 'cait-seg-target' }, segment.target) : null,
@@ -424,16 +677,68 @@
               )
             : h('div', { className: 'cait-empty-note' }, t('rail.empty')),
         ),
+        h(
+          'div',
+          { className: 'cait-rail-page' },
+          h(
+            'button',
+            {
+              type: 'button',
+              className: 'cait-pagebtn',
+              onClick: () => setPage(bounds.page - 1),
+              disabled: bounds.page <= 1,
+              title: t('library.prev'),
+              'aria-label': t('library.prev'),
+            },
+            h(Icon, { name: 'chevronLeft', size: 12 }),
+          ),
+          h('span', { className: 'cait-pageinfo' }, t('rail.pageInfo', { start: bounds.start, end: bounds.end, total: bounds.total })),
+          h(
+            'button',
+            {
+              type: 'button',
+              className: 'cait-pagebtn',
+              onClick: () => setPage(bounds.page + 1),
+              disabled: bounds.page >= bounds.pages,
+              title: t('library.next'),
+              'aria-label': t('library.next'),
+            },
+            h(Icon, { name: 'chevronRight', size: 12 }),
+          ),
+          h(
+            'select',
+            {
+              className: 'cait-pagesize',
+              value: String(pageSize),
+              onChange: (event) => changePageSize(Number(event.target.value)),
+              title: t('library.pageSize'),
+              'aria-label': t('library.pageSize'),
+            },
+            PAGE_SIZE_OPTIONS.map((size) => h('option', { key: size, value: String(size) }, String(size))),
+          ),
+        ),
       )
     }
 
-    function EditorPane({ t, doc, index, segment, detail, draft, setDraft, dirty, busy, onConfirm, onNext, onPrev, onSave, onApplyTerm, textareaRef }) {
+    function EditorPane({ t, doc, index, segment, detail, draft, setDraft, dirty, busy, onConfirm, onNext, onPrev, onSave, onAdopt, onApplyTerm, textareaRef }) {
       const hits = detail?.index === index ? detail.glossaryHits : []
       const charCount = Array.from(draft || '').length
       const progress = doc.progress
-
-      const onKeyDown = (event) => {
-        const mod = event.metaKey || event.ctrlKey
+      const remaining = progress.total - progress.confirmed
+      const statusLabel =
+        segment.status === 'confirmed'
+          ? t('status.confirmed')
+          : segment.status === 'translated'
+            ? t('status.translated')
+            : t('status.pending')
+
+      // The middle column keeps the machine/agent baseline that produced the
+      // current text, so editing in the right column has something to compare
+      // against. It is stored in `suggestion`, which adoption already preserves.
+      const baselineText = segment.suggestion || ''
+      const baselineOrigin = segment.origin || 'agent'
+
+      const onKeyDown = (event) => {        const mod = event.metaKey || event.ctrlKey
         if (mod && event.key === 'Enter') {
           event.preventDefault()
           onConfirm()
@@ -480,61 +785,94 @@
           'div',
           { className: 'cait-seg-head' },
           h('span', { className: 'cait-seg-label' }, `${t('editor.segment')} ${index + 1} / ${doc.segments.length}`),
-          h('span', { className: `cait-badge ${segment.status}` }, segment.status === 'confirmed' ? t('status.confirmed') : t('status.pending')),
+          h('span', { className: `cait-badge ${segment.status}` }, statusLabel),
         ),
         h(
           'div',
-          { className: 'cait-source-card' },
+          { className: 'cait-review' },
           h(
-            'div',
-            { className: 'cait-labelrow' },
-            h('span', { className: 'cait-label' }, t('editor.source')),
-            h('span', { className: 'cait-langchip' }, doc.sourceLang),
+            'section',
+            { className: 'cait-revcol cait-rev-src' },
+            h(
+              'div',
+              { className: 'cait-labelrow' },
+              h('span', { className: 'cait-label' }, t('editor.source')),
+              h('span', { className: 'cait-langchip' }, doc.sourceLang),
+            ),
+            h('div', { className: 'cait-source-text' }, highlightSource(segment.source, hits)),
+            hits.length
+              ? h(
+                  'div',
+                  { className: 'cait-hitrow' },
+                  hits.map((hit) =>
+                    h(
+                      'button',
+                      {
+                        key: hit.id,
+                        className: 'cait-chip cait-chip-action',
+                        onClick: () => onApplyTerm(hit),
+                        title: hit.note || `${hit.term} → ${hit.target}`,
+                      },
+                      h(Icon, { name: 'book', size: 11 }),
+                      `${hit.term} → ${hit.target}`,
+                    ),
+                  ),
+                )
+              : null,
           ),
-          h('div', { className: 'cait-source-text' }, highlightSource(segment.source, hits)),
-          hits.length
-            ? h(
-                'div',
-                { className: 'cait-hitrow' },
-                hits.map((hit) =>
-                  h(
+          h(
+            'section',
+            { className: 'cait-revcol cait-rev-sugg' },
+            h(
+              'div',
+              { className: 'cait-labelrow' },
+              h('span', { className: 'cait-label' }, t('editor.suggestion')),
+              baselineText
+                ? h('span', { className: `cait-originchip ${baselineOrigin}` }, t(`origin.${baselineOrigin}`))
+                : null,
+              segment.suggestion
+                ? h(
                     'button',
                     {
-                      key: hit.id,
                       className: 'cait-chip cait-chip-action',
-                      onClick: () => onApplyTerm(hit),
-                      title: hit.note || `${hit.term} → ${hit.target}`,
+                      onClick: onAdopt,
+                      disabled: Boolean(busy) || draft.trim() === segment.suggestion,
+                      title: t('editor.adoptHint'),
                     },
-                    h(Icon, { name: 'book', size: 11 }),
-                    `${hit.term} → ${hit.target}`,
-                  ),
-                ),
-              )
-            : null,
-        ),
-        h(
-          'div',
-          { className: 'cait-target-area' },
+                    h(Icon, { name: 'download', size: 11 }),
+                    t('editor.adopt'),
+                  )
+                : null,
+            ),
+            baselineText
+              ? h('div', { className: 'cait-suggest-text' }, baselineText)
+              : h('div', { className: 'cait-suggest-empty' }, t('editor.noSuggestion')),
+            h('div', { className: 'cait-rev-hint' }, segment.suggestion ? t('editor.adoptHint') : t('editor.baselineHint')),
+          ),
           h(
-            'div',
-            { className: 'cait-labelrow' },
-            h('span', { className: 'cait-label' }, t('editor.target')),
+            'section',
+            { className: 'cait-revcol cait-rev-target' },
             h(
-              'span',
-              { className: 'cait-meta' },
-              `${charCount} ${t('editor.chars')}${dirty ? ` · ${t('editor.unsaved')}` : ''}`,
+              'div',
+              { className: 'cait-labelrow' },
+              h('span', { className: 'cait-label' }, t('editor.target')),
+              h(
+                'span',
+                { className: 'cait-meta' },
+                `${charCount} ${t('editor.chars')}${dirty ? ` · ${t('editor.unsaved')}` : ''}`,
+              ),
             ),
+            h('textarea', {
+              ref: textareaRef,
+              className: 'cait-textarea',
+              value: draft,
+              onChange: (event) => setDraft(event.target.value),
+              onKeyDown,
+              placeholder: t('editor.targetPlaceholder'),
+              spellCheck: false,
+              rows: 8,
+            }),
           ),
-          h('textarea', {
-            ref: textareaRef,
-            className: 'cait-textarea',
-            value: draft,
-            onChange: (event) => setDraft(event.target.value),
-            onKeyDown,
-            placeholder: t('editor.targetPlaceholder'),
-            spellCheck: false,
-            rows: 8,
-          }),
         ),
         h(
           'div',
@@ -567,16 +905,30 @@
         h(
           'div',
           { className: 'cait-editor-foot' },
-          progress.pending === 0
+          remaining === 0
             ? h('span', { className: 'cait-donechip' }, h(Icon, { name: 'check', size: 11 }), t('editor.done'))
-            : h('span', null, `${progress.pending} ${t('status.pending')}`),
+            : h('span', null, `${remaining} ${t('editor.remaining')}`),
           segment.confirmedAt ? h('span', null, `${t('editor.confirmedAt')} ${new Date(segment.confirmedAt).toLocaleString()}`) : null,
         ),
       )
     }
 
-    function TmMatchCard({ t, match, onApply }) {
+    function TmMatchCard({ t, match, onApply, onEdit, onDelete, busy }) {
       const matchType = match.matchType || (match.exact ? 'exact' : 'low_fuzzy')
+      const [editing, setEditing] = useState(false)
+      const [value, setValue] = useState(match.target)
+
+      useEffect(() => {
+        setEditing(false)
+        setValue(match.target)
+      }, [match.id, match.target])
+
+      const save = async () => {
+        if (!value.trim()) return
+        const ok = await onEdit({ id: match.id, target: value })
+        if (ok) setEditing(false)
+      }
+
       return h(
         'article',
         { className: 'cait-card' },
@@ -585,10 +937,56 @@
           { className: 'cait-card-head' },
           h('span', { className: `cait-score ${matchType}` }, `${match.percent}%`),
           h('span', { className: 'cait-score-label' }, t(`match.${matchType}`)),
-          h('button', { className: 'cait-minibtn', onClick: () => onApply(match) }, t('panel.apply')),
+          h(
+            'div',
+            { className: 'cait-term-actions' },
+            h('button', { className: 'cait-minibtn', onClick: () => onApply(match) }, t('panel.apply')),
+            h(
+              'button',
+              { className: 'cait-minibtn', onClick: () => setEditing((current) => !current), disabled: Boolean(busy), title: t('panel.edit') },
+              h(Icon, { name: 'pencil', size: 11 }),
+            ),
+            h(
+              'button',
+              { className: 'cait-deletebtn', onClick: () => onDelete(match), disabled: Boolean(busy), title: t('panel.delete') },
+              h(Icon, { name: 'trash', size: 11 }),
+            ),
+          ),
         ),
         h('p', { className: 'cait-card-source' }, match.source),
-        h('p', { className: 'cait-card-target' }, match.target),
+        match.context
+          ? h(
+              'p',
+              { className: 'cait-card-context' },
+              `${t('panel.contextPrev')} ${match.context.prev || '—'} · ${t('panel.contextNext')} ${match.context.next || '—'}`,
+            )
+          : null,
+        editing
+          ? h(
+              'div',
+              { className: 'cait-tmedit' },
+              h('textarea', {
+                className: 'cait-textarea cait-tmedit-input',
+                value,
+                rows: 3,
+                autoFocus: true,
+                onChange: (event) => setValue(event.target.value),
+                onKeyDown: (event) => {
+                  if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+                    event.preventDefault()
+                    save()
+                  }
+                  if (event.key === 'Escape') setEditing(false)
+                },
+              }),
+              h(
+                'div',
+                { className: 'cait-formrow' },
+                h('button', { className: 'cait-btn cait-btn-primary', onClick: save, disabled: Boolean(busy) || !value.trim() }, t('panel.saveEntry')),
+                h('button', { className: 'cait-btn cait-btn-ghost', onClick: () => setEditing(false) }, t('panel.cancel')),
+              ),
+            )
+          : h('p', { className: 'cait-card-target' }, match.target),
       )
     }
 
@@ -605,6 +1003,8 @@
       tmResults,
       tmError,
       onApplyTm,
+      onEditTm,
+      onDeleteTm,
       onImportTmx,
       onClearTm,
       onAddTerm,
@@ -619,7 +1019,7 @@
       onApplyMt,
       onCopy,
       onOpenSettings,
-      onOpenLibraries,
+      onSearchLibrary,
       busy,
     }) {
       const [termQuery, setTermQuery] = useState('')
@@ -666,7 +1066,7 @@
               'button',
               {
                 className: 'cait-btn cait-libopen',
-                onClick: onOpenLibraries,
+                onClick: () => onSearchLibrary(tab === 'glossary' ? 'glossary' : 'tm', tab === 'tm' ? tmQuery : ''),
                 disabled: Boolean(busy),
                 title: t('libraries.open'),
               },
@@ -730,6 +1130,17 @@
                   }),
                   h('button', { className: 'cait-iconbtn', type: 'submit', title: t('panel.search') }, h(Icon, { name: 'arrowRight', size: 13 })),
                 ),
+                // The panel searches what is mounted; the library workspace
+                // searches everything. This carries the typed query across.
+                h(
+                  'div',
+                  { className: 'cait-paneljump' },
+                  h(
+                    'button',
+                    { className: 'cait-linkbtn', type: 'button', onClick: () => onSearchLibrary('tm', tmQuery) },
+                    t('panel.searchInLibrary'),
+                  ),
+                ),
                 h(
                   'div',
                   { className: 'cait-listhead' },
@@ -738,7 +1149,17 @@
                 ),
                 tmError ? h('div', { className: 'cait-mt-error' }, tmError) : null,
                 tmMatches.length
-                  ? tmMatches.map((match) => h(TmMatchCard, { key: match.id, t, match, onApply: onApplyTm }))
+                  ? tmMatches.map((match) =>
+                      h(TmMatchCard, {
+                        key: match.id,
+                        t,
+                        match,
+                        busy,
+                        onApply: onApplyTm,
+                        onEdit: onEditTm,
+                        onDelete: onDeleteTm,
+                      }),
+                    )
                   : h('p', { className: 'cait-empty-note' }, tmResults ? t('panel.noMatches') : t('panel.noCurrentMatches')),
                 h('p', { className: 'cait-mt-hint' }, t('panel.tmHint')),
                 h(
@@ -778,75 +1199,20 @@
                       ),
                     )
                   : h('p', { className: 'cait-empty-note' }, t('panel.noHits')),
+                // The panel is a per-segment view: whole-library browsing,
+                // adding and editing live on the library page, so the panel
+                // stays short instead of dumping the mounted glossary.
+                h('p', { className: 'cait-mt-hint' }, t('panel.glossaryMatchesOnly')),
                 h(
                   'div',
-                  { className: 'cait-subhead' },
-                  h('span', null, t('panel.allTerms')),
-                  h('button', { className: 'cait-linkbtn', onClick: () => setShowTermForm((value) => !value) }, `+ ${t('panel.addTerm')}`),
-                ),
-                showTermForm
-                  ? h(
-                      'form',
-                      { className: 'cait-termform', onSubmit: submitTerm },
-                      h('input', {
-                        className: 'cait-input',
-                        value: termForm.source,
-                        onChange: (event) => setTermForm({ ...termForm, source: event.target.value }),
-                        placeholder: t('panel.termSource'),
-                        autoFocus: true,
-                      }),
-                      h(
-                        'div',
-                        { className: 'cait-formrow' },
-                        h('input', {
-                          className: 'cait-input',
-                          value: termForm.target,
-                          onChange: (event) => setTermForm({ ...termForm, target: event.target.value }),
-                          placeholder: t('panel.termTarget'),
-                        }),
-                        h('input', {
-                          className: 'cait-input',
-                          value: termForm.note,
-                          onChange: (event) => setTermForm({ ...termForm, note: event.target.value }),
-                          placeholder: t('panel.termNote'),
-                        }),
-                      ),
-                      h(
-                        'div',
-                        { className: 'cait-formrow' },
-                        h('button', { className: 'cait-btn cait-btn-primary', type: 'submit', disabled: Boolean(busy) || !termForm.source.trim() || !termForm.target.trim() }, t('panel.saveTerm')),
-                        h('button', { className: 'cait-btn cait-btn-ghost', type: 'button', onClick: () => setShowTermForm(false) }, t('panel.cancel')),
-                      ),
-                    )
-                  : null,
-                h(
-                  'div',
-                  { className: 'cait-search' },
-                  h(Icon, { name: 'search', size: 13 }),
-                  h('input', { value: termQuery, onChange: (event) => setTermQuery(event.target.value), placeholder: t('panel.termSearch'), 'aria-label': t('panel.termSearch') }),
+                  { className: 'cait-panel-foot' },
+                  h(
+                    'button',
+                    { className: 'cait-btn', onClick: () => onSearchLibrary('glossary', ''), disabled: Boolean(busy) },
+                    h(Icon, { name: 'book', size: 12 }),
+                    t('panel.viewAll'),
+                  ),
                 ),
-                terms.length
-                  ? terms.map((term) =>
-                      h(
-                        'div',
-                        { key: term.id, className: 'cait-term' },
-                        h(
-                          'div',
-                          { className: 'cait-term-main' },
-                          h('strong', null, term.source),
-                          h(Icon, { name: 'arrowRight', size: 11, className: 'cait-term-arrow' }),
-                          h('span', null, term.target),
-                        ),
-                        term.note ? h('div', { className: 'cait-muted cait-tiny', style: { marginTop: 2 } }, term.note) : null,
-                        h(
-                          'div',
-                          { className: 'cait-term-actions' },
-                          h('button', { className: 'cait-minibtn', onClick: () => onApplyTerm(term) }, t('panel.apply')),
-                          h('button', { className: 'cait-deletebtn', onClick: () => onDeleteTerm(term), title: t('panel.delete') }, h(Icon, { name: 'trash', size: 11 })),
-                        ),
-                      ),
-                    )
-                  : h('p', { className: 'cait-empty-note' }, t('panel.noTerms')),
                 h(
                   'div',
                   { className: 'cait-panel-foot' },
@@ -1072,35 +1438,1199 @@
               h('strong', null, file ? file.name : t('empty.drop')),
               h('span', null, file ? formatBytes(file.size) : t('modal.new.dropHint')),
             ),
-        h(
-          'div',
-          { className: 'cait-formfoot' },
-          h('span', { className: 'cait-muted' }, t('empty.formats')),
+        h(
+          'div',
+          { className: 'cait-formfoot' },
+          h('span', { className: 'cait-muted' }, t('empty.formats')),
+          h(
+            'button',
+            { className: 'cait-btn cait-btn-primary', type: 'submit', disabled: Boolean(busy) || !canSubmit },
+            busy === 'create' ? h(Spinner) : h(Icon, { name: 'plus', size: 13 }),
+            busy === 'create' ? t('modal.new.importing') : submitLabel,
+          ),
+        ),
+      )
+    }
+
+    function NewDocModal({ t, settings, busy, defaultMode, onClose, onCreate }) {
+      return h(
+        Modal,
+        { title: t('modal.new.title'), onClose },
+        h(DocumentSourceForm, { t, settings, busy, submitLabel: t('modal.new.create'), onSubmit: onCreate, defaultMode }),
+        h(
+          'div',
+          { className: 'cait-demo-row' },
+          h('span', null, t('modal.new.sample')),
+          h('button', { className: 'cait-linkbtn', onClick: () => onCreate({ demo: true }), disabled: Boolean(busy) }, t('modal.new.demo')),
+        ),
+      )
+    }
+
+    /**
+     * The library workspace: browse, search, page through, edit and export the
+     * translation memories and glossaries themselves. It deliberately does not
+     * need an open document — the rail and the right panel stay document-scoped
+     * and this page is the only place that manages whole libraries.
+     */
+    function AlignPage({ t, data, busy, notify, report, onApplyState, onConfirm }) {
+      const [sourceFile, setSourceFile] = useState(null)
+      const [targetFile, setTargetFile] = useState(null)
+      const [sourceLang, setSourceLang] = useState('')
+      const [targetLang, setTargetLang] = useState('')
+      const [result, setResult] = useState(null)
+      const [rows, setRows] = useState([])
+      const [working, setWorking] = useState(false)
+      const [tmId, setTmId] = useState('')
+      const sourceRef = useRef(null)
+      const targetRef = useRef(null)
+      const libraries = data?.tmLibraries || []
+
+      useEffect(() => {
+        if (!tmId && libraries.length) setTmId(libraries[0].id)
+      }, [libraries.length])
+
+      const readBase64 = (file) =>
+        new Promise((resolve, reject) => {
+          const reader = new FileReader()
+          reader.onerror = () => reject(new Error(t('align.readError')))
+          reader.onload = () => {
+            const value = String(reader.result || '')
+            const comma = value.indexOf(',')
+            resolve(comma >= 0 ? value.slice(comma + 1) : '')
+          }
+          reader.readAsDataURL(file)
+        })
+
+      const pick = async (which, file) => {
+        if (!file) return
+        setWorking(true)
+        try {
+          const uploaded = await rpc('readUploadText', {
+            name: file.name,
+            base64: await readBase64(file),
+          })
+          const picked = { name: uploaded.name, text: uploaded.text, chars: uploaded.chars }
+          if (which === 'source') setSourceFile(picked)
+          else setTargetFile(picked)
+        } catch (error) {
+          report(error)
+        } finally {
+          setWorking(false)
+        }
+      }
+
+      const run = async () => {
+        if (!sourceFile || !targetFile) {
+          notify(t('align.needFiles'), true)
+          return
+        }
+        setWorking(true)
+        try {
+          const aligned = await rpc('alignUploads', {
+            sourceFile: { name: sourceFile.name, text: sourceFile.text },
+            targetFile: { name: targetFile.name, text: targetFile.text },
+            sourceLang,
+            targetLang,
+          })
+          setResult(aligned)
+          setRows(aligned.rows.map((row) => ({ ...row, include: row.confidence === 'high' })))
+        } catch (error) {
+          report(error)
+        } finally {
+          setWorking(false)
+        }
+      }
+
+      const updateRow = (at, patch) =>
+        setRows((current) => current.map((row, position) => (position === at ? { ...row, ...patch } : row)))
+
+      const removeRow = (at) => setRows((current) => current.filter((_row, position) => position !== at))
+
+      const mergeRow = (at) =>
+        setRows((current) => {
+          const head = current[at]
+          const next = current[at + 1]
+          if (!head || !next) return current
+          const merged = {
+            ...head,
+            target: [head.target, next.target].filter(Boolean).join(' '),
+            include: head.include,
+            merged: true,
+          }
+          return [...current.slice(0, at), merged, ...current.slice(at + 2)]
+        })
+
+      const splitRow = (at) =>
+        setRows((current) => {
+          const row = current[at]
+          if (!row || !row.target) return current
+          const parts = String(row.target).split(/\n+/).filter(Boolean)
+          if (parts.length < 2) return current
+          const replacement = parts.map((part) => ({ ...row, target: part }))
+          return [...current.slice(0, at), ...replacement, ...current.slice(at + 1)]
+        })
+
+      const write = async () => {
+        const pairs = rows
+          .filter((row) => row.include && row.source && row.target)
+          .map((row) => ({ source: row.source, target: row.target, sourceLang, targetLang }))
+        if (!pairs.length) {
+          notify(t('align.nothing'), true)
+          return
+        }
+        onConfirm({
+          title: t('align.write'),
+          message: t('align.writeMessage', { count: pairs.length }),
+          action: async () => {
+            setWorking(true)
+            try {
+              const written = await rpc('writeAlignment', { pairs, tmId: tmId || undefined })
+              notify(t('align.written', { written: written.written, skipped: written.skipped }))
+            } catch (error) {
+              report(error)
+            } finally {
+              setWorking(false)
+            }
+          },
+        })
+      }
+
+      const included = rows.filter((row) => row.include && row.source && row.target).length
+      const fileCard = (which, file, ref) =>
+        h(
+          'div',
+          { className: 'cait-alignfile' },
+          h('span', { className: 'cait-alignlabel' }, t(which === 'source' ? 'align.sourceFile' : 'align.targetFile')),
+          h('span', { className: `cait-alignname${file ? '' : ' empty'}` }, file ? file.name : t('align.pick')),
+          h('span', { className: 'cait-alignmeta' }, file ? t('align.chars', { count: file.chars }) : ''),
+          h('input', {
+            ref,
+            type: 'file',
+            accept: '.txt,.md,.docx,.epub,.html,.htm,.xlsx,.pptx,.csv,.srt,.vtt,.po,.json,.rtf,.xliff',
+            style: { display: 'none' },
+            onChange: (event) => {
+              const chosen = event.target.files && event.target.files[0]
+              pick(which, chosen)
+              event.target.value = ''
+            },
+          }),
+          h(
+            'button',
+            { type: 'button', className: 'cait-btn', onClick: () => ref.current && ref.current.click(), disabled: working },
+            h(Icon, { name: 'folder', size: 13 }),
+            h('span', { className: 'cait-btn-label' }, t('align.choose')),
+          ),
+        )
+
+      return h(
+        'div',
+        { className: 'cait-alignpage' },
+        h(
+          'div',
+          { className: 'cait-alignhead' },
+          h('div', null, h('h2', null, t('align.title')), h('p', { className: 'cait-mt-hint' }, t('align.hint'))),
+          h(
+            'div',
+            { className: 'cait-alignactions' },
+            h('input', {
+              className: 'cait-libinput',
+              placeholder: t('align.sourceLang'),
+              value: sourceLang,
+              onChange: (event) => setSourceLang(event.target.value),
+            }),
+            h('input', {
+              className: 'cait-libinput',
+              placeholder: t('align.targetLang'),
+              value: targetLang,
+              onChange: (event) => setTargetLang(event.target.value),
+            }),
+            h(
+              'select',
+              {
+                className: 'cait-select cait-liblang',
+                value: tmId,
+                onChange: (event) => setTmId(event.target.value),
+              },
+              libraries.map((library) => h('option', { key: library.id, value: library.id }, library.name)),
+            ),
+            h(
+              'button',
+              { type: 'button', className: 'cait-btn cait-btn-primary', onClick: run, disabled: working || !sourceFile || !targetFile },
+              h(Icon, { name: 'align', size: 13 }),
+              h('span', { className: 'cait-btn-label' }, working ? t('align.running') : t('align.run')),
+            ),
+          ),
+        ),
+        h('div', { className: 'cait-alignfiles' }, fileCard('source', sourceFile, sourceRef), fileCard('target', targetFile, targetRef)),
+        result
+          ? h(
+              'div',
+              { className: 'cait-alignstats' },
+              h('span', null, t('align.stats', {
+                high: result.high,
+                medium: result.medium,
+                low: result.low,
+              })),
+              h('span', null, `${t('align.unpairedSource')}: ${result.unpairedSource}`),
+              h('span', null, `${t('align.unpairedTarget')}: ${result.unpairedTarget}`),
+              result.blocked ? h('span', { className: 'cait-alignwarn' }, t('align.blocked')) : null,
+              h(
+                'button',
+                { type: 'button', className: 'cait-btn', onClick: write, disabled: working || !included },
+                h(Icon, { name: 'check', size: 13 }),
+                h('span', { className: 'cait-btn-label' }, t('align.writeCount', { count: included })),
+              ),
+            )
+          : null,
+        rows.length
+          ? h(
+              'div',
+              { className: 'cait-libtable-wrap cait-aligntable-wrap' },
+              h(
+                'table',
+                { className: 'cait-libtable cait-aligntable' },
+                h(
+                  'thead',
+                  null,
+                  h(
+                    'tr',
+                    null,
+                    h('th', null, ''),
+                    h('th', null, t('align.sourceFile')),
+                    h('th', null, t('align.targetFile')),
+                    h('th', null, t('align.confidence')),
+                    h('th', null, ''),
+                  ),
+                ),
+                h(
+                  'tbody',
+                  null,
+                  rows.map((row, at) =>
+                    h(
+                      'tr',
+                      { key: `${row.sourceIndex}-${row.targetIndex}-${at}`, className: row.include ? 'included' : '' },
+                      h(
+                        'td',
+                        null,
+                        h('input', {
+                          type: 'checkbox',
+                          checked: Boolean(row.include),
+                          onChange: (event) => updateRow(at, { include: event.target.checked }),
+                        }),
+                      ),
+                      h('td', null, row.source),
+                      h('td', null, row.target || h('span', { className: 'cait-alignmissing' }, '—')),
+                      h(
+                        'td',
+                        null,
+                        h('span', { className: `cait-confidence ${row.confidence}` }, `${Math.round(row.score * 100)}%`),
+                      ),
+                      h(
+                        'td',
+                        { className: 'cait-alignrow-actions' },
+                        h(
+                          'button',
+                          { type: 'button', className: 'cait-minibtn', title: t('align.merge'), onClick: () => mergeRow(at) },
+                          h(Icon, { name: 'chevronDown', size: 12 }),
+                        ),
+                        h(
+                          'button',
+                          { type: 'button', className: 'cait-minibtn', title: t('align.split'), onClick: () => splitRow(at) },
+                          h(Icon, { name: 'chevronRight', size: 12 }),
+                        ),
+                        h(
+                          'button',
+                          { type: 'button', className: 'cait-minibtn cait-deletebtn', title: t('align.remove'), onClick: () => removeRow(at) },
+                          h(Icon, { name: 'trash', size: 12 }),
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            )
+          : null,
+      )
+    }
+
+    function LibraryPage({
+      t,
+      data,
+      settings,
+      busy,
+      notify,
+      report,
+      seed,
+      onApplyState,
+      onConfirm,
+      onCreateLibrary,
+      onRenameLibrary,
+      onDeleteLibrary,
+    }) {
+      const storage = typeof localStorage !== 'undefined' ? localStorage : null
+      const [kind, setKind] = useState(seed?.kind === 'glossary' ? 'glossary' : 'tm')
+      const [scopeIds, setScopeIds] = useState([])
+      const [query, setQuery] = useState(seed?.query || '')
+      const [debouncedQuery, setDebouncedQuery] = useState('')
+      const [lang, setLang] = useState('')
+      const [page, setPage] = useState(1)
+      const [pageSize, setPageSize] = useState(() => readPageSize(storage))
+      const [rows, setRows] = useState(null)
+      const [loading, setLoading] = useState(false)
+      const [working, setWorking] = useState('')
+      const [selectedId, setSelectedId] = useState('')
+      const [draft, setDraft] = useState(null)
+      const [renamingId, setRenamingId] = useState('')
+      const [renameText, setRenameText] = useState('')
+      const [newLibraryName, setNewLibraryName] = useState('')
+      const [adding, setAdding] = useState(false)
+      const [exportFormat, setExportFormat] = useState('tbx')
+      const [terms, setTerms] = useState(null)
+      const fileRef = useRef(null)
+      const importMode = useRef('')
+
+      const libraries = (kind === 'tm' ? data?.libraries?.tm : data?.libraries?.glossary) || []
+      const idKey = kind === 'tm' ? 'tmId' : 'glossaryId'
+      const labelKey = 'name'
+      const scopeKey = scopeIds.join(',')
+      const targetLibraryId = scopeIds[0] || (kind === 'tm' ? data?.mounts?.defaultTmId : data?.mounts?.defaultGlossaryId) || libraries[0]?.[idKey] || ''
+
+      useEffect(() => {
+        const timer = setTimeout(() => setDebouncedQuery(query), 250)
+        return () => clearTimeout(timer)
+      }, [query])
+
+      // The panel can jump into the library with its current search text; a
+      // fresh nonce means "apply this seed now" even when the values repeat.
+      useEffect(() => {
+        if (!seed) return
+        setKind(seed.kind === 'glossary' ? 'glossary' : 'tm')
+        setQuery(seed.query || '')
+        setPage(1)
+      }, [seed?.nonce])
+
+      // Switching kind resets the scope: library ids are not interchangeable.
+      useEffect(() => {
+        setScopeIds([])
+        setPage(1)
+        setSelectedId('')
+        setLang('')
+      }, [kind])
+
+      const loadRows = async () => {
+        setLoading(true)
+        try {
+          const params =
+            kind === 'tm'
+              ? { tmIds: scopeIds, query: debouncedQuery, page, pageSize }
+              : { glossaryIds: scopeIds, query: debouncedQuery, page, pageSize }
+          if (lang) params.sourceLang = lang
+          const result = await rpc(kind === 'tm' ? 'listTmEntries' : 'listGlossaryEntries', params)
+          setRows(result)
+          if (result.page !== page) setPage(result.page)
+        } catch (error) {
+          report(error)
+          setRows(null)
+        } finally {
+          setLoading(false)
+        }
+      }
+
+      useEffect(() => {
+        let alive = true
+        const run = async () => {
+          if (!alive) return
+          await loadRows()
+        }
+        run()
+        return () => {
+          alive = false
+        }
+      }, [kind, scopeKey, debouncedQuery, lang, page, pageSize, data?.revision])
+
+      useEffect(() => {
+        const entry = (rows?.entries || []).find((item) => item.id === selectedId)
+        setDraft(entry ? { ...entry } : null)
+      }, [selectedId, rows])
+
+      const dirty =
+        draft &&
+        rows?.entries?.some(
+          (item) =>
+            item.id === draft.id &&
+            (item.source !== draft.source ||
+              item.target !== draft.target ||
+              (item.note || '') !== (draft.note || '') ||
+              Boolean(item.caseSensitive) !== Boolean(draft.caseSensitive)),
+        )
+
+      const selectKind = (next) => setKind(next)
+
+      const mineTerms = async () => {
+        const active = data?.activeDocument
+        if (!active) {
+          notify(t('term.noDoc'), true)
+          return
+        }
+        setWorking('terms')
+        try {
+          const mined = await rpc('termCandidates', { documentId: active.id, limit: 60 })
+          setTerms(mined.candidates.map((candidate) => ({
+            ...candidate,
+            picked: false,
+            target: candidate.evidence[0] || '',
+          })))
+        } catch (error) {
+          report(error)
+        } finally {
+          setWorking('')
+        }
+      }
+
+      const toggleTerm = (index) =>
+        setTerms((current) =>
+          current.map((item, position) => (position === index ? { ...item, picked: !item.picked } : item)),
+        )
+
+      const setTermTarget = (index, value) =>
+        setTerms((current) =>
+          current.map((item, position) => (position === index ? { ...item, target: value, picked: true } : item)),
+        )
+
+      const addMinedTerms = async () => {
+        const picked = (terms || []).filter((item) => item.picked && item.target.trim())
+        if (!picked.length) return
+        setWorking('terms')
+        try {
+          const result = await rpc('addGlossaryEntries', {
+            glossaryId: targetLibraryId || undefined,
+            entries: picked.map((item) => ({
+              source: item.term,
+              target: item.target.trim(),
+              sourceLang: settings.sourceLang,
+            })),
+          })
+          if (result?.state) onApplyState(result.state)
+          notify(t('term.added').replace('{added}', String(result.added)))
+          setTerms(null)
+          await loadRows()
+        } catch (error) {
+          report(error)
+        } finally {
+          setWorking('')
+        }
+      }
+
+      const toggleScope = (id) => {
+        setPage(1)
+        setScopeIds((current) => (current.includes(id) ? current.filter((item) => item !== id) : [...current, id]))
+      }
+
+      const allLanguages = rows?.languages
+        ? [...new Set([...(rows.languages.source || []), ...(rows.languages.target || [])])].filter(Boolean)
+        : []
+
+      const changePageSize = (value) => {
+        const size = writePageSize(storage, value)
+        setPageSize(size)
+        setPage(1)
+      }
+
+      const saveEntry = async () => {
+        if (!draft) return
+        setWorking('save')
+        try {
+          const result =
+            kind === 'tm'
+              ? await rpc('updateTM', {
+                  id: draft.id,
+                  source: draft.source,
+                  target: draft.target,
+                  note: draft.note,
+                })
+              : await rpc('updateGlossary', {
+                  id: draft.id,
+                  source: draft.source,
+                  target: draft.target,
+                  note: draft.note,
+                  sourceLang: draft.sourceLang,
+                  caseSensitive: Boolean(draft.caseSensitive),
+                })
+          if (result?.state) onApplyState(result.state)
+          notify(t('library.entrySaved'))
+          setAdding(false)
+          await loadRows()
+        } catch (error) {
+          report(error)
+        } finally {
+          setWorking('')
+        }
+      }
+
+      const addEntry = async () => {
+        if (!draft) return
+        setWorking('add')
+        try {
+          const result =
+            kind === 'tm'
+              ? await rpc('addTM', {
+                  source: draft.source,
+                  target: draft.target,
+                  tmId: targetLibraryId,
+                  sourceLang: draft.sourceLang || settings.sourceLang,
+                  targetLang: draft.targetLang || settings.targetLang,
+                })
+              : await rpc('addGlossary', {
+                  source: draft.source,
+                  target: draft.target,
+                  note: draft.note,
+                  glossaryId: targetLibraryId,
+                  sourceLang: draft.sourceLang || '',
+                  caseSensitive: Boolean(draft.caseSensitive),
+                })
+          if (result?.state) onApplyState(result.state)
+          notify(t('library.entryCreated'))
+          setAdding(false)
+          setSelectedId('')
+          await loadRows()
+        } catch (error) {
+          report(error)
+        } finally {
+          setWorking('')
+        }
+      }
+
+      const deleteEntry = () => {
+        if (!draft || adding) return
+        onConfirm({
+          title: t('library.deleteEntry'),
+          message: kind === 'tm' ? t('modal.confirm.deleteTm') : t('library.deleteEntry'),
+          confirmLabel: t('library.deleteEntry'),
+          action: async () => {
+            const result = await rpc(kind === 'tm' ? 'deleteTM' : 'deleteGlossary', { id: draft.id })
+            if (result?.state) onApplyState(result.state)
+            setSelectedId('')
+            notify(t('library.entryDeleted'))
+            await loadRows()
+          },
+        })
+      }
+
+      const clearLibrary = () => {
+        if (!targetLibraryId) return
+        onConfirm({
+          title: t('library.clear'),
+          message: t('modal.confirm.clearTm'),
+          confirmLabel: t('library.clear'),
+          action: async () => {
+            const result =
+              kind === 'tm'
+                ? await rpc('clearTM', { tmIds: [targetLibraryId], confirm: true })
+                : await rpc('clearGlossary', { glossaryIds: [targetLibraryId], confirm: true })
+            if (result?.state) onApplyState(result.state)
+            setSelectedId('')
+            await loadRows()
+          },
+        })
+      }
+
+      const exportLibrary = async () => {
+        if (!targetLibraryId) return
+        setWorking('export')
+        try {
+          const result =
+            kind === 'tm'
+              ? await rpc('exportTM', { tmId: targetLibraryId, format: 'tmx' })
+              : await rpc('exportGlossary', { glossaryId: targetLibraryId, format: exportFormat })
+          downloadFile(result.filename, result.content, result.mime)
+          notify(t('library.exported'))
+        } catch (error) {
+          report(error)
+        } finally {
+          setWorking('')
+        }
+      }
+
+      const pickImport = (mode) => {
+        importMode.current = mode
+        if (fileRef.current) {
+          fileRef.current.value = ''
+          fileRef.current.click()
+        }
+      }
+
+      const runImport = async (file) => {
+        if (!file || !targetLibraryId) return
+        setWorking('import')
+        try {
+          const text = await file.text()
+          if (importMode.current === 'glossary') {
+            const result = await rpc('importGlossary', { text, glossaryId: targetLibraryId })
+            if (result?.state) onApplyState(result.state)
+            notify(`${t('toast.glossaryImported')} · +${result.added} / ~${result.updated}`)
+          } else {
+            const result = await rpc('importTmx', {
+              text,
+              importAs: 'tm',
+              tmId: targetLibraryId,
+              sourceLang: kind === 'tm' ? undefined : settings.sourceLang,
+              targetLang: settings.targetLang,
+            })
+            if (result?.state) onApplyState(result.state)
+            notify(`${t('toast.tmImported')} · +${result.added} / ~${result.updated}`)
+          }
+          await loadRows()
+        } catch (error) {
+          report(error)
+        } finally {
+          setWorking('')
+        }
+      }
+
+      const submitRename = async (library) => {
+        const name = renameText.trim()
+        setRenamingId('')
+        if (!name || name === library[labelKey]) return
+        await onRenameLibrary({ kind, id: library[idKey], name })
+      }
+
+      const submitNewLibrary = async () => {
+        const name = newLibraryName.trim()
+        if (!name) return
+        const ok = await onCreateLibrary({ kind, name })
+        if (ok) setNewLibraryName('')
+      }
+
+      const confirmDeleteLibrary = (library) => {
+        if (libraries.length <= 1) return
+        onConfirm({
+          title: t('library.deleteLibrary'),
+          message: t('library.deleteLibraryMessage', { name: library[labelKey] }),
+          confirmLabel: t('library.deleteLibrary'),
+          action: async () => {
+            await onDeleteLibrary({ kind, id: library[idKey], name: library[labelKey] })
+            if (scopeIds.includes(library[idKey])) {
+              setScopeIds((current) => current.filter((item) => item !== library[idKey]))
+            }
+          },
+        })
+      }
+
+      const startAdding = () => {
+        setAdding(true)
+        setSelectedId('')
+        setDraft(
+          kind === 'tm'
+            ? {
+                id: '',
+                source: '',
+                target: '',
+                note: '',
+                sourceLang: settings.sourceLang,
+                targetLang: settings.targetLang,
+              }
+            : { id: '', source: '', target: '', note: '', sourceLang: settings.sourceLang, caseSensitive: false },
+        )
+      }
+
+      const bounds = pageBounds(rows?.page || 1, rows?.total || 0, rows?.pageSize || pageSize)
+      const contextLabel = (entry) =>
+        entry.context ? `${entry.context.prev || '—'} · ${entry.context.next || '—'}` : '—'
+      const columns = kind === 'tm'
+        ? [t('library.colSource'), t('library.colTarget'), t('library.colNote'), t('library.colContext'), t('library.colLang'), t('library.colUpdated')]
+        : [t('library.colSource'), t('library.colTarget'), t('library.colNote'), t('library.colLang'), t('library.colCase'), t('library.colUpdated')]
+
+      return h(
+        'div',
+        { className: 'cait-libpage' },
+        h(
+          'div',
+          { className: 'cait-libpage-head' },
+          h(
+            'div',
+            { className: 'cait-libtabs' },
+            h(
+              'button',
+              { className: `cait-libtabs-item${kind === 'tm' ? ' active' : ''}`, onClick: () => selectKind('tm') },
+              t('library.tmTab'),
+              h('span', { className: 'cait-libtabs-count' }, data?.libraries?.tm?.length || 0),
+            ),
+            h(
+              'button',
+              { className: `cait-libtabs-item${kind === 'glossary' ? ' active' : ''}`, onClick: () => selectKind('glossary') },
+              t('library.glossaryTab'),
+              h('span', { className: 'cait-libtabs-count' }, data?.libraries?.glossary?.length || 0),
+            ),
+          ),
+          h('span', { className: 'cait-libhint' }, t('library.noDocHint')),
+        ),
+        h(
+          'div',
+          { className: 'cait-libpage-body' },
+          h(
+            'div',
+            { className: 'cait-liblist' },
+            h(
+              'div',
+              { className: 'cait-liblist-head' },
+              t('library.title'),
+            ),
+            libraries.map((library) =>
+              h(
+                'div',
+                { key: library[idKey], className: `cait-librow${scopeIds.includes(library[idKey]) ? ' scoped' : ''}` },
+                h('input', {
+                  type: 'checkbox',
+                  checked: scopeIds.includes(library[idKey]),
+                  onChange: () => toggleScope(library[idKey]),
+                  title: t('library.scope'),
+                  'aria-label': t('library.scope'),
+                }),
+                renamingId === library[idKey]
+                  ? h('input', {
+                      className: 'cait-librename',
+                      value: renameText,
+                      autoFocus: true,
+                      onChange: (event) => setRenameText(event.target.value),
+                      onKeyDown: (event) => {
+                        if (event.key === 'Enter') submitRename(library)
+                        if (event.key === 'Escape') setRenamingId('')
+                      },
+                      onBlur: () => submitRename(library),
+                    })
+                  : h(
+                      'button',
+                      {
+                        type: 'button',
+                        className: 'cait-libname',
+                        onClick: () => toggleScope(library[idKey]),
+                        title: library[labelKey],
+                      },
+                      h('span', { className: 'cait-libname-text' }, library[labelKey]),
+                      h('span', { className: 'cait-libcount' }, library.entryCount),
+                      library.mounted ? h('span', { className: 'cait-libmounted' }, '●') : null,
+                    ),
+                h(
+                  'span',
+                  { className: 'cait-libactions' },
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'cait-minibtn',
+                      title: t('library.rename'),
+                      onClick: () => {
+                        setRenamingId(library[idKey])
+                        setRenameText(library[labelKey])
+                      },
+                    },
+                    h(Icon, { name: 'pencil', size: 12 }),
+                  ),
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'cait-deletebtn',
+                      title: t('library.deleteLibrary'),
+                      disabled: libraries.length <= 1,
+                      onClick: () => confirmDeleteLibrary(library),
+                    },
+                    h(Icon, { name: 'trash', size: 12 }),
+                  ),
+                ),
+              ),
+            ),
+            h(
+              'div',
+              { className: 'cait-libnew' },
+              h('input', {
+                value: newLibraryName,
+                placeholder: t('library.newLibrary'),
+                onChange: (event) => setNewLibraryName(event.target.value),
+                onKeyDown: (event) => {
+                  if (event.key === 'Enter') submitNewLibrary()
+                },
+              }),
+              h(
+                'button',
+                { type: 'button', className: 'cait-minibtn', onClick: submitNewLibrary, disabled: !newLibraryName.trim() },
+                h(Icon, { name: 'plus', size: 12 }),
+              ),
+            ),
+          ),
+          h(
+            'div',
+            { className: 'cait-libmain' },
+            h(
+              'div',
+              { className: 'cait-libtoolbar' },
+              h(
+                'div',
+                { className: 'cait-libsearch' },
+                h(Icon, { name: 'search', size: 13 }),
+                h('input', {
+                  value: query,
+                  onChange: (event) => {
+                    setQuery(event.target.value)
+                    setPage(1)
+                  },
+                  placeholder: t('library.search'),
+                  'aria-label': t('library.search'),
+                }),
+              ),
+              h(
+                'select',
+                {
+                  className: 'cait-liblang',
+                  value: lang,
+                  onChange: (event) => {
+                    setLang(event.target.value)
+                    setPage(1)
+                  },
+                  title: t('library.language'),
+                  'aria-label': t('library.language'),
+                },
+                h('option', { value: '' }, t('library.language')),
+                allLanguages.map((code) => h('option', { key: code, value: code }, code)),
+              ),
+              kind === 'glossary'
+                ? h(
+                    'select',
+                    {
+                      className: 'cait-liblang',
+                      value: exportFormat,
+                      onChange: (event) => setExportFormat(event.target.value),
+                      title: t('library.exportFormat'),
+                      'aria-label': t('library.exportFormat'),
+                    },
+                    ['tbx', 'csv', 'json'].map((format) => h('option', { key: format, value: format }, format.toUpperCase())),
+                  )
+                : null,
+              kind === 'glossary'
+                ? h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'cait-btn',
+                      onClick: mineTerms,
+                      disabled: Boolean(busy) || working === 'terms' || !data?.activeDocument,
+                      title: t('term.extract'),
+                    },
+                    h(Icon, { name: 'sparkles', size: 13 }),
+                    h('span', { className: 'cait-btn-label' }, t('term.extract')),
+                  )
+                : null,
+              h(
+                'button',
+                { type: 'button', className: 'cait-btn', onClick: startAdding, disabled: Boolean(busy) },
+                h(Icon, { name: 'plus', size: 13 }),
+                h('span', { className: 'cait-btn-label' }, t('library.add')),
+              ),
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'cait-btn',
+                  onClick: () => pickImport(kind),
+                  disabled: Boolean(busy) || !targetLibraryId,
+                  title: t('library.import'),
+                },
+                h(Icon, { name: 'upload', size: 13 }),
+                h('span', { className: 'cait-btn-label' }, t('library.import')),
+              ),
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'cait-btn',
+                  onClick: exportLibrary,
+                  disabled: Boolean(busy) || working === 'export' || !targetLibraryId,
+                  title: t('library.export'),
+                },
+                h(Icon, { name: 'download', size: 13 }),
+                h('span', { className: 'cait-btn-label' }, kind === 'tm' ? 'TMX' : exportFormat.toUpperCase()),
+              ),
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'cait-btn',
+                  onClick: clearLibrary,
+                  disabled: Boolean(busy) || !targetLibraryId,
+                  title: t('library.clear'),
+                },
+                h(Icon, { name: 'trash', size: 13 }),
+              ),
+              h('input', {
+                ref: fileRef,
+                type: 'file',
+                accept: kind === 'tm' ? '.tmx' : '.tbx,.csv,.json',
+                style: { display: 'none' },
+                onChange: (event) => {
+                  const file = event.target.files && event.target.files[0]
+                  if (file) runImport(file)
+                },
+              }),
+            ),
+            h(
+              'div',
+              { className: 'cait-libscope' },
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: `cait-filterchip${scopeIds.length === 0 ? ' active' : ''}`,
+                  onClick: () => {
+                    setScopeIds([])
+                    setPage(1)
+                  },
+                },
+                t('library.scopeAll'),
+              ),
+              libraries.map((library) =>
+                h(
+                  'button',
+                  {
+                    key: library[idKey],
+                    type: 'button',
+                    className: `cait-filterchip${scopeIds.includes(library[idKey]) ? ' active' : ''}`,
+                    onClick: () => toggleScope(library[idKey]),
+                  },
+                  library[labelKey],
+                ),
+              ),
+            ),
+            h(
+              'div',
+              { className: 'cait-libtable-wrap' },
+              loading && !rows?.entries?.length
+                ? h('div', { className: 'cait-center' }, h(Spinner), t('common.loading'))
+                : rows?.entries?.length
+                  ? h(
+                      'table',
+                      { className: 'cait-libtable' },
+                      h('thead', null, h('tr', null, columns.map((column) => h('th', { key: column }, column)))),
+                      h(
+                        'tbody',
+                        null,
+                        rows.entries.map((entry) =>
+                          h(
+                            'tr',
+                            {
+                              key: entry.id,
+                              className: entry.id === selectedId ? 'active' : '',
+                              onClick: () => {
+                                setAdding(false)
+                                setSelectedId(entry.id)
+                              },
+                            },
+                            h('td', { className: 'src', title: entry.source }, entry.source),
+                            h('td', { className: 'tgt', title: entry.target }, entry.target),
+                            h('td', { className: 'note' }, entry.note || ''),
+                            kind === 'tm'
+                              ? h(
+                                  'td',
+                                  { className: 'ctx', title: contextLabel(entry) },
+                                  contextLabel(entry),
+                                )
+                              : null,
+                            h(
+                              'td',
+                              { className: 'lang' },
+                              kind === 'tm' ? `${entry.sourceLang} → ${entry.targetLang}` : entry.sourceLang || '—',
+                            ),
+                            kind === 'glossary'
+                              ? h('td', { className: 'case' }, entry.caseSensitive ? '✓' : '')
+                              : null,
+                            h('td', { className: 'upd' }, String(entry.updatedAt || '').slice(0, 10)),
+                          ),
+                        ),
+                      ),
+                    )
+                  : h('div', { className: 'cait-empty-note' }, query || lang ? t('library.noMatch') : t('library.empty')),
+            ),
+            h(
+              'div',
+              { className: 'cait-rail-page cait-libpage-bar' },
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'cait-pagebtn',
+                  onClick: () => setPage(Math.max(1, (rows?.page || 1) - 1)),
+                  disabled: (rows?.page || 1) <= 1,
+                  title: t('library.prev'),
+                  'aria-label': t('library.prev'),
+                },
+                h(Icon, { name: 'chevronLeft', size: 12 }),
+              ),
+              h('span', { className: 'cait-pageinfo' }, t('library.pageInfo', { start: bounds.start, end: bounds.end, total: bounds.total })),
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'cait-pagebtn',
+                  onClick: () => setPage((rows?.page || 1) + 1),
+                  disabled: (rows?.page || 1) >= (rows?.totalPages || 1),
+                  title: t('library.next'),
+                  'aria-label': t('library.next'),
+                },
+                h(Icon, { name: 'chevronRight', size: 12 }),
+              ),
+              h(
+                'select',
+                {
+                  className: 'cait-pagesize',
+                  value: String(pageSize),
+                  onChange: (event) => changePageSize(Number(event.target.value)),
+                  title: t('library.pageSize'),
+                  'aria-label': t('library.pageSize'),
+                },
+                PAGE_SIZE_OPTIONS.map((size) => h('option', { key: size, value: String(size) }, String(size))),
+              ),
+            ),
+          ),
           h(
-            'button',
-            { className: 'cait-btn cait-btn-primary', type: 'submit', disabled: Boolean(busy) || !canSubmit },
-            busy === 'create' ? h(Spinner) : h(Icon, { name: 'plus', size: 13 }),
-            busy === 'create' ? t('modal.new.importing') : submitLabel,
+            'aside',
+            { className: 'cait-libdetail' },
+            h('div', { className: 'cait-libdetail-title' }, t('library.detail')),
+            draft
+              ? h(
+                  'div',
+                  { className: 'cait-libform' },
+                  h('label', null, t('library.colSource')),
+                  h('textarea', {
+                    className: 'cait-libinput',
+                    value: draft.source,
+                    onChange: (event) => setDraft({ ...draft, source: event.target.value }),
+                  }),
+                  h('label', null, t('library.colTarget')),
+                  h('textarea', {
+                    className: 'cait-libinput',
+                    value: draft.target,
+                    onChange: (event) => setDraft({ ...draft, target: event.target.value }),
+                  }),
+                  h('label', null, t('library.colNote')),
+                  h('input', {
+                    className: 'cait-libinput',
+                    value: draft.note || '',
+                    onChange: (event) => setDraft({ ...draft, note: event.target.value }),
+                  }),
+                  h('label', null, t('library.colLang')),
+                  h('input', {
+                    className: 'cait-libinput',
+                    value: draft.sourceLang || '',
+                    disabled: adding,
+                    onChange: (event) => setDraft({ ...draft, sourceLang: event.target.value }),
+                  }),
+                  kind === 'glossary'
+                    ? h(
+                        'label',
+                        { className: 'cait-libcheck' },
+                        h('input', {
+                          type: 'checkbox',
+                          checked: Boolean(draft.caseSensitive),
+                          onChange: (event) => setDraft({ ...draft, caseSensitive: event.target.checked }),
+                        }),
+                        h('span', null, t('library.colCase')),
+                      )
+                    : null,
+                  kind === 'glossary' ? h('p', { className: 'cait-libnote' }, t('library.caseSensitiveHint')) : null,
+                  h(
+                    'div',
+                    { className: 'cait-libform-actions' },
+                    h(
+                      'button',
+                      {
+                        type: 'button',
+                        className: 'cait-btn cait-btn-primary',
+                        onClick: adding ? addEntry : saveEntry,
+                        disabled: Boolean(busy) || working !== '' || !draft.source.trim() || !draft.target.trim(),
+                      },
+                      adding ? t('library.add') : t('library.save'),
+                    ),
+                    adding
+                      ? h(
+                          'button',
+                          {
+                            type: 'button',
+                            className: 'cait-btn',
+                            onClick: () => {
+                              setAdding(false)
+                              setDraft(null)
+                            },
+                          },
+                          t('panel.cancel'),
+                        )
+                      : h(
+                          'button',
+                          {
+                            type: 'button',
+                            className: 'cait-btn',
+                            onClick: deleteEntry,
+                            disabled: Boolean(busy) || working !== '',
+                          },
+                          h(Icon, { name: 'trash', size: 13 }),
+                          t('library.deleteEntry'),
+                        ),
+                  ),
+                  dirty ? h('p', { className: 'cait-libnote' }, t('editor.unsaved')) : null,
+                )
+              : h('div', { className: 'cait-empty-note' }, t('library.detailEmpty')),
           ),
         ),
+        terms
+          ? h(
+              'div',
+              { className: 'cait-termpanel' },
+              h(
+                'div',
+                { className: 'cait-termpanel-head' },
+                h('strong', null, t('term.title')),
+                h('span', { className: 'cait-mt-hint' }, t('term.hint')),
+                h('span', { className: 'cait-termpanel-actions' },
+                  h(
+                    'button',
+                    { type: 'button', className: 'cait-btn cait-btn-primary', onClick: addMinedTerms, disabled: working === 'terms' },
+                    h(Icon, { name: 'check', size: 13 }),
+                    t('term.add'),
+                  ),
+                  h('button', { type: 'button', className: 'cait-btn', onClick: () => setTerms(null) }, t('panel.cancel')),
+                ),
+              ),
+              terms.length
+                ? h(
+                    'div',
+                    { className: 'cait-termlist' },
+                    terms.map((candidate, at) =>
+                      h(
+                        'div',
+                        { key: `${candidate.term}-${at}`, className: `cait-termrow${candidate.picked ? ' picked' : ''}` },
+                        h('input', {
+                          type: 'checkbox',
+                          checked: Boolean(candidate.picked),
+                          onChange: () => toggleTerm(at),
+                        }),
+                        h('span', { className: 'cait-termname' }, candidate.term),
+                        h('span', { className: 'cait-termcount' }, `×${candidate.count}`),
+                        candidate.inLibrary ? h('span', { className: 'cait-originchip' }, t('term.inLibrary')) : null,
+                        h('input', {
+                          className: 'cait-libinput cait-termtarget',
+                          placeholder: t('library.colTarget'),
+                          value: candidate.target,
+                          onChange: (event) => setTermTarget(at, event.target.value),
+                        }),
+                      ),
+                    ),
+                  )
+                : h('div', { className: 'cait-empty-note' }, t('term.empty')),
+            )
+          : null,
       )
     }
 
-    function NewDocModal({ t, settings, busy, defaultMode, onClose, onCreate }) {
-      return h(
-        Modal,
-        { title: t('modal.new.title'), onClose },
-        h(DocumentSourceForm, { t, settings, busy, submitLabel: t('modal.new.create'), onSubmit: onCreate, defaultMode }),
-        h(
-          'div',
-          { className: 'cait-demo-row' },
-          h('span', null, t('modal.new.sample')),
-          h('button', { className: 'cait-linkbtn', onClick: () => onCreate({ demo: true }), disabled: Boolean(busy) }, t('modal.new.demo')),
-        ),
-      )
-    }
-
-    function ExportModal({ t, busy, onClose, onExport }) {
+    function ExportModal({ t, busy, onClose, onExport, qa }) {
+      const issues = qa?.issueCount || 0
       const items = [
         ['bilingual-md', t('modal.export.bilingualMd'), t('modal.export.bilingual'), 'file'],
         ['bilingual-csv', t('modal.export.bilingualCsv'), t('modal.export.bilingual'), 'file'],
@@ -1126,6 +2656,23 @@
         Modal,
         { title: t('modal.export.title'), onClose, wide: true },
         h('p', { className: 'cait-confirm-text' }, t('modal.export.desc')),
+        issues
+          ? h(
+              'div',
+              { className: 'cait-qa-banner' },
+              h(Icon, { name: 'alert', size: 12 }),
+              h(
+                'span',
+                null,
+                `${t('qa.exportBanner').replace('{count}', String(issues))} `,
+                t('qa.counts')
+                  .replace('{placeholder}', String(qa.counts.PLACEHOLDER_MISSING))
+                  .replace('{number}', String(qa.counts.NUMBER_MISMATCH))
+                  .replace('{term}', String(qa.counts.TERM_NOT_USED))
+                  .replace('{empty}', String(qa.counts.EMPTY_TARGET)),
+              ),
+            )
+          : null,
         h(
           'div',
           { className: 'cait-export-grid' },
@@ -1328,7 +2875,13 @@
                 },
                 h('option', { value: 'mock' }, t('mt.mock')),
                 routes.map((item) =>
-                  h('option', { key: item.id, value: item.id }, `${item.name} (${item.id})`),
+                  h(
+                    'option',
+                    { key: item.id, value: item.id, disabled: item.hasModels === false },
+                    item.hasModels === false
+                      ? `${item.name} (${item.id}) · ${t('modal.settings.noModels')}`
+                      : `${item.name} (${item.id})`,
+                  ),
                 ),
                 routeMissing
                   ? h('option', { value: form.mt.provider }, t('modal.settings.routeMissing'))
@@ -1393,139 +2946,6 @@
       )
     }
 
-    function LibrariesModal({ t, data, busy, onClose, onSetMounts, onCreate }) {
-      const libraries = data.libraries || { tm: [], glossary: [] }
-      const mounts = data.mounts || {
-        tmIds: [],
-        glossaryIds: [],
-        defaultTmId: '',
-        defaultGlossaryId: '',
-      }
-      const [tmName, setTmName] = useState('')
-      const [glossaryName, setGlossaryName] = useState('')
-
-      const toggle = (kind, id, checked) => {
-        const current = kind === 'tm' ? mounts.tmIds : mounts.glossaryIds
-        const next = computeNextMountIds(current, id, checked)
-        if (!next) return
-        onSetMounts(kind === 'tm' ? { tmIds: next } : { glossaryIds: next })
-      }
-
-      const create = async (kind, name, reset) => {
-        if (!name.trim()) return
-        const ok = await onCreate({ kind, name: name.trim() })
-        if (ok) reset('')
-      }
-
-      const section = (kind, title, list, defaultId, ids) =>
-        h(
-          'div',
-          { className: 'cait-libsection' },
-          h(
-            'div',
-            { className: 'cait-libhead' },
-            h('h4', { className: 'cait-settings-title' }, title),
-            h('span', { className: 'cait-count' }, `${ids.length}/${list.length}`),
-          ),
-          list.length
-            ? list.map((library) => {
-                const id = kind === 'tm' ? library.tmId : library.glossaryId
-                const mounted = ids.includes(id)
-                return h(
-                  'div',
-                  { className: 'cait-librow', key: id },
-                  h(
-                    'label',
-                    { className: 'cait-libcheck' },
-                    h('input', {
-                      type: 'checkbox',
-                      checked: mounted,
-                      disabled: isMountToggleDisabled({
-                        mounted,
-                        mountedCount: ids.length,
-                        busy: Boolean(busy),
-                      }),
-                      onChange: (event) => toggle(kind, id, event.target.checked),
-                    }),
-                    h(
-                      'span',
-                      { className: 'cait-libmeta' },
-                      h('strong', null, library.name),
-                      h(
-                        'small',
-                        null,
-                        `${library.entryCount || 0} ${t('libraries.entries')}${
-                          library.mounted ? '' : ` · ${t('libraries.notMounted')}`
-                        }`,
-                      ),
-                    ),
-                  ),
-                  h(
-                    'label',
-                    { className: 'cait-libdefault' },
-                    h('input', {
-                      type: 'radio',
-                      name: `cait-default-${kind}`,
-                      checked: defaultId === id,
-                      disabled: Boolean(busy) || !mounted,
-                      onChange: () =>
-                        onSetMounts(
-                          kind === 'tm'
-                            ? { defaultTmId: id }
-                            : { defaultGlossaryId: id },
-                        ),
-                    }),
-                    t(kind === 'tm' ? 'libraries.defaultTm' : 'libraries.defaultGlossary'),
-                  ),
-                )
-              })
-            : h('p', { className: 'cait-empty-note' }, t('libraries.empty')),
-          h(
-            'form',
-            {
-              className: 'cait-libcreate',
-              onSubmit: (event) => {
-                event.preventDefault()
-                create(kind, kind === 'tm' ? tmName : glossaryName, kind === 'tm' ? setTmName : setGlossaryName)
-              },
-            },
-            h('input', {
-              className: 'cait-input',
-              value: kind === 'tm' ? tmName : glossaryName,
-              onChange: (event) =>
-                kind === 'tm' ? setTmName(event.target.value) : setGlossaryName(event.target.value),
-              placeholder: t('libraries.namePlaceholder'),
-              disabled: Boolean(busy),
-            }),
-            h(
-              'button',
-              { className: 'cait-btn', type: 'submit', disabled: Boolean(busy) },
-              h(Icon, { name: 'plus', size: 12 }),
-              t('libraries.create'),
-            ),
-          ),
-        )
-
-      return h(
-        Modal,
-        { title: t('libraries.title'), onClose, wide: true },
-        h('p', { className: 'cait-mt-hint', style: { marginTop: 0 } }, t('libraries.desc')),
-        section('tm', t('libraries.tm'), libraries.tm, mounts.defaultTmId, mounts.tmIds),
-        section(
-          'glossary',
-          t('libraries.glossary'),
-          libraries.glossary,
-          mounts.defaultGlossaryId,
-          mounts.glossaryIds,
-        ),
-        h(
-          'div',
-          { className: 'cait-modal-actions' },
-          h('button', { className: 'cait-btn cait-btn-primary', onClick: onClose }, t('libraries.done')),
-        ),
-      )
-    }
-
     function ConfirmModal({ t, state, busy, onClose, onConfirm }) {
       return h(
         Modal,
@@ -1578,8 +2998,22 @@
       const [dirty, setDirty] = useState(false)
       const [tab, setTab] = useState('tm')
       const [railQuery, setRailQuery] = useState('')
+      const [railFilter, setRailFilter] = useState('all')
+      // Two top-level workspaces: the translator's document and the library
+      // manager. The latter needs no document, so it must not be a modal.
+      const [view, setView] = useState('documents')
+      // A seed carries the panel's search text into the library workspace.
+      const [libSeed, setLibSeed] = useState(null)
+
+      const openLibrary = (kind, query) => {
+        setLibSeed({ kind: kind === 'glossary' ? 'glossary' : 'tm', query: query || '', nonce: Date.now() })
+        setView('libraries')
+      }
+      const [pre, setPre] = useState({ running: false, done: 0, total: 0, filled: 0, failed: 0 })
+      const [qa, setQa] = useState(null)
       const [tmQuery, setTmQuery] = useState('')
       const [tmResults, setTmResults] = useState(null)
+      const [tmRefresh, setTmRefresh] = useState(0)
       const [tmError, setTmError] = useState('')
       const [mt, setMt] = useState(null)
       const [mtError, setMtError] = useState('')
@@ -1694,6 +3128,61 @@
         }
       }
 
+      const preCancelRef = useRef(false)
+
+      // The client drives pre-translation block by block instead of asking the
+      // host for a background job: a block is one RPC, cancellation is simply
+      // "stop looping", and every finished block is already persisted.
+      const runPreTranslate = async () => {
+        const active = data?.activeDocument
+        if (!active || pre.running) return
+        preCancelRef.current = false
+        const initial = active.progress || { confirmed: 0, translated: 0, total: 0 }
+        setPre({
+          running: true,
+          done: initial.confirmed + initial.translated,
+          total: initial.total,
+          filled: 0,
+          failed: 0,
+        })
+        let from = 0
+        let filled = 0
+        let failed = 0
+        try {
+          while (from !== null) {
+            if (preCancelRef.current) break
+            const result = await rpc('preTranslate', {
+              documentId: active.id,
+              from,
+              count: PRETRANSLATE_BLOCK_SIZE,
+            })
+            filled += result.filled
+            failed += result.failed.length
+            from = result.next
+            const progress = result.progress
+            setPre((current) => ({
+              ...current,
+              done: progress.confirmed + progress.translated,
+              total: progress.total,
+              filled,
+              failed,
+            }))
+            await refreshState()
+          }
+          if (preCancelRef.current) notify(t('toast.preCancelled'))
+          else if (failed) notify(t('toast.preFailed').replace('{count}', String(failed)))
+          else notify(t('toast.preDone').replace('{count}', String(filled)))
+        } catch (error) {
+          report(error)
+        } finally {
+          setPre((current) => ({ ...current, running: false }))
+        }
+      }
+
+      const cancelPreTranslate = () => {
+        preCancelRef.current = true
+      }
+
       useEffect(() => {
         let alive = true
         setLoading(true)
@@ -1750,6 +3239,26 @@
         }
       }, [data?.revision])
 
+      useEffect(() => {
+        const id = data?.activeDocument?.id
+        if (!id) {
+          setQa(null)
+          return
+        }
+        let alive = true
+        rpc('getQaReport', { documentId: id })
+          .then((report) => {
+            if (alive) setQa(report)
+          })
+          .catch(() => {
+            // QA is advisory: a failure must never disturb the workbench.
+            if (alive) setQa(null)
+          })
+        return () => {
+          alive = false
+        }
+      }, [data?.activeDocument?.id, data?.revision])
+
       useEffect(() => {
         let alive = true
         rpc('listMtRoutes')
@@ -1807,7 +3316,7 @@
           cancelled = true
           clearTimeout(timer)
         }
-      }, [tmQuery, doc?.id, doc?.sourceLang, doc?.targetLang, settings.fuzzyThreshold, settings.tmLimit])
+      }, [tmQuery, tmRefresh, doc?.id, doc?.sourceLang, doc?.targetLang, settings.fuzzyThreshold, settings.tmLimit])
 
       const saveDraft = async (silent = true) => {
         if (!doc || !dirty) return true
@@ -1864,6 +3373,24 @@
         }
       }
 
+      const adoptSuggestion = async () => {
+        if (!doc || busy || !segment?.suggestion) return
+        if (dirty) {
+          const saved = await saveDraft(true)
+          if (!saved) return
+        }
+        setBusy('adopt')
+        try {
+          const result = await rpc('adoptSuggestion', { documentId: doc.id, index: selected })
+          adoptState(result.state)
+          notify(t('toast.suggestionAdopted'))
+        } catch (error) {
+          report(error)
+        } finally {
+          setBusy('')
+        }
+      }
+
       const moveSegment = async (delta) => {
         if (!doc || busy) return
         setBusy('move')
@@ -1984,8 +3511,72 @@
         setTimeout(() => textareaRef.current?.focus(), 0)
       }
 
-      const addTerm = async (form) => {
-        setBusy('term')
+      const editTm = async ({ id, target }) => {
+        setBusy('tm-edit')
+        try {
+          const result = await rpc('updateTM', { id, target })
+          setData(result.state)
+          setTmRefresh((value) => value + 1)
+          notify(t('toast.tmUpdated'))
+          return true
+        } catch (error) {
+          report(error)
+          return false
+        } finally {
+          setBusy('')
+        }
+      }
+
+      const deleteTm = (match) => {
+        setModal({
+          type: 'confirm',
+          title: t('modal.confirm.title'),
+          message: `${t('modal.confirm.deleteTm')} “${match.source} → ${match.target}”？`,
+          confirmLabel: t('panel.delete'),
+          action: async () => {
+            const result = await rpc('deleteTM', { id: match.id })
+            setData(result.state)
+            setTmRefresh((value) => value + 1)
+            notify(t('toast.tmDeleted'))
+          },
+        })
+      }
+
+      const confirmAllTranslated = () => {
+        const active = data?.activeDocument
+        const awaiting = active?.progress?.translated || 0
+        if (!active || !awaiting) return
+        setModal({
+          type: 'confirm',
+          title: t('rail.confirmAll'),
+          message: t('rail.confirmAllMessage').replace('{count}', String(awaiting)),
+          confirmLabel: t('rail.confirmAll'),
+          action: async () => {
+            const result = await rpc('confirmSegments', { documentId: active.id, status: 'translated' })
+            await refreshState()
+            setTmRefresh((value) => value + 1)
+            notify(t('toast.confirmedMany').replace('{count}', String(result.confirmed.length)))
+          },
+        })
+      }
+
+      const propagateRepeats = () => {
+        const active = data?.activeDocument
+        if (!active) return
+        setModal({
+          type: 'confirm',
+          title: t('rail.propagate'),
+          message: t('rail.propagateMessage'),
+          confirmLabel: t('rail.propagate'),
+          action: async () => {
+            const result = await rpc('propagateDocument', { documentId: active.id })
+            await refreshState()
+            notify(t('toast.propagated').replace('{count}', String(result.filled)))
+          },
+        })
+      }
+
+      const addTerm = async (form) => {        setBusy('term')
         try {
           const result = await rpc('addGlossary', {
             ...form,
@@ -2125,6 +3716,37 @@
         }
       }
 
+      const renameLibrary = async ({ kind, id, name }) => {
+        setBusy('library')
+        try {
+          const result = await rpc('renameLibrary', { kind, id, name })
+          setData(result.state)
+          notify(t('libraries.renamed'))
+          return true
+        } catch (error) {
+          report(error)
+          return false
+        } finally {
+          setBusy('')
+        }
+      }
+
+      const deleteLibrary = ({ kind, id, name }) => {
+        const entries = kind === 'tm' ? t('libraries.deleteTmWarn') : t('libraries.deleteGlossaryWarn')
+        setModal({
+          type: 'confirm',
+          title: t('modal.confirm.title'),
+          message: `${t('libraries.delete')} “${name}”？${entries}`,
+          confirmLabel: t('libraries.delete'),
+          action: async () => {
+            const result = await rpc('deleteLibrary', { kind, id })
+            setData(result.state)
+            setTmResults(null)
+            notify(t('libraries.deleted'))
+          },
+        })
+      }
+
       const exportAs = async (format) => {
         if (!doc) return
         setBusy('export')
@@ -2240,13 +3862,40 @@
           element.style.setProperty(CAIT_UNIT_VAR, String(unit))
         }
         measure()
+
+        // Mirror the host theme so native widgets follow `color-scheme`. DSH
+        // toggles the marker on <body>, so observe that instead of guessing
+        // from colours.
+        const syncTheme = () => {
+          const kind = detectThemeKind(document)
+          if (element.getAttribute(CAIT_THEME_ATTR) !== kind) element.setAttribute(CAIT_THEME_ATTR, kind)
+        }
+        syncTheme()
+        let themeObserver = null
+        if (typeof MutationObserver !== 'undefined' && document.body) {
+          themeObserver = new MutationObserver(syncTheme)
+          themeObserver.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['data-ds-dark-theme', 'data-theme', 'class'],
+          })
+        }
+        const stopTheme = () => {
+          if (themeObserver) themeObserver.disconnect()
+        }
+
         if (typeof ResizeObserver === 'undefined') {
           window.addEventListener('resize', measure)
-          return () => window.removeEventListener('resize', measure)
+          return () => {
+            window.removeEventListener('resize', measure)
+            stopTheme()
+          }
         }
         const observer = new ResizeObserver(measure)
         observer.observe(element)
-        return () => observer.disconnect()
+        return () => {
+          observer.disconnect()
+          stopTheme()
+        }
       }, [])
 
       if (loading) {
@@ -2293,12 +3942,45 @@
           onCloseDoc: closeDocumentTab,
           onNewTab: () => setModal({ type: 'new', defaultMode: 'file' }),
           onCleanClosed: () => setModal({ type: 'recent' }),
+          pre,
+          onPreTranslate: runPreTranslate,
+          onCancelPreTranslate: cancelPreTranslate,
+          view,
+          onView: setView,
         }),
         h(SaveBanner, { t, storage: data?.storage, stale, onRefresh: refreshState }),
-        h(
+        view === 'libraries'
+          ? h(LibraryPage, {
+              t,
+              data,
+              settings,
+              busy,
+              notify,
+              report,
+              seed: libSeed,
+              onApplyState: (state) => setData(state),
+              onConfirm: openConfirm,
+              onCreateLibrary: createLibrary,
+              onRenameLibrary: renameLibrary,
+              onDeleteLibrary: deleteLibrary,
+            })
+          : null,
+        view === 'align'
+          ? h(AlignPage, {
+              t,
+              data,
+              busy,
+              notify,
+              report,
+              onApplyState: (state) => setData(state),
+              onConfirm: openConfirm,
+            })
+          : null,
+        view === 'documents'
+          ? h(
           'div',
           { className: `cait-body${doc ? '' : ' cait-no-doc'}` },
-          doc ? h(SegmentRail, { t, doc, selected: index, query: railQuery, setQuery: setRailQuery, onSelect: chooseSegment }) : null,
+          doc ? h(SegmentRail, { t, doc, selected: index, query: railQuery, setQuery: setRailQuery, filter: railFilter, setFilter: setRailFilter, onSelect: chooseSegment, onConfirmAll: confirmAllTranslated, onPropagate: propagateRepeats, busy, qa }) : null,
           h(
             'div',
             { className: `cait-main${doc ? '' : ' cait-main-empty'}` },
@@ -2320,6 +4002,7 @@
                   onNext: () => moveSegment(1),
                   onPrev: () => moveSegment(-1),
                   onSave: () => saveDraft(false),
+                  onAdopt: adoptSuggestion,
                   onApplyTerm: applyTerm,
                   textareaRef,
                 })
@@ -2338,6 +4021,8 @@
                   tmResults,
                   tmError,
                   onApplyTm: applyTm,
+                  onEditTm: editTm,
+                  onDeleteTm: deleteTm,
                   onImportTmx: importTmxFile,
                   onClearTm: clearTm,
                   onAddTerm: addTerm,
@@ -2358,12 +4043,13 @@
                   },
                   onCopy: copy,
                   onOpenSettings: () => setModal({ type: 'settings' }),
-                  onOpenLibraries: () => setModal({ type: 'libraries' }),
+                  onSearchLibrary: openLibrary,
                   busy,
                 })
               : null,
           ),
-        ),
+        )
+          : null,
         modal?.type === 'new'
           ? h(NewDocModal, {
               t,
@@ -2375,21 +4061,11 @@
             })
           : null,
         modal?.type === 'export'
-          ? h(ExportModal, { t, busy, onClose: () => setModal(null), onExport: exportAs })
+          ? h(ExportModal, { t, busy, qa, onClose: () => setModal(null), onExport: exportAs })
           : null,
         modal?.type === 'settings'
           ? h(SettingsModal, { t, settings, mtRoutes, busy, onClose: () => setModal(null), onSave: saveSettings })
           : null,
-        modal?.type === 'libraries'
-          ? h(LibrariesModal, {
-              t,
-              data,
-              busy,
-              onClose: () => setModal(null),
-              onSetMounts: setMounts,
-              onCreate: createLibrary,
-            })
-          : null,
         modal?.type === 'recent'
           ? h(RecentDocsModal, {
               t,