@hedeqiang/dsh-nl2sql 0.12.0 → 0.12.2

package/lib/client.js

@@ -3,6 +3,8 @@ window.__ModuleLoader__.load({
   factory(require) {
     const React = require('react')
     const ReactDOM = require('react-dom')
+    // createRoot for the global feedback layer; older loaders only share react-dom.
+    const ReactDOMClient = (() => { try { return require('react-dom/client') } catch { return null } })() ?? ReactDOM
     const h = React.createElement
     const { useState, useEffect, useMemo, useRef, useCallback, useSyncExternalStore } = React
 
@@ -1030,6 +1032,18 @@ window.__ModuleLoader__.load({
       'tool.running': '正在查询…',
       'tool.failed': '查询失败',
       'error.generic': '操作失败：{message}',
+      'dash.copyName': '{name} 副本',
+      'set.leaveTitle': '放弃未保存的设置？',
+      'set.leaveMsg': '设置中有未保存的修改，离开后这些修改会丢失。',
+      'set.leaveOk': '放弃并离开',
+      'fb.deleteConfirm': '删除这条反馈？',
+      'hist.source.telegrambot': 'Telegram 机器人',
+      'hist.source.wecombot': '企业微信机器人',
+      'hist.source.dingtalkbot': '钉钉机器人',
+      'hist.source.unknown': '未知来源',
+      'hist.source.genericBot': '{platform} 机器人',
+      'filter.valuesPh': '值，用逗号分隔',
+      'policy.tablesLabel': '可访问的表',
     }
     const en = {
       'mb.pick.people': "Pick someone who talked to a bot",
@@ -1426,7 +1440,7 @@ window.__ModuleLoader__.load({
       'im.src.ui': 'Page', 'im.src.agent': 'Agent', 'im.src.dashboard': 'Dashboard', 'im.src.test': 'Test', 'im.resultsN': '{count} results', 'im.imagesN': '{count} images',
       'im.share': 'Send to IM', 'im.shareAll': 'Send all to IM', 'im.shareDashboard': 'Send dashboard', 'im.dashboardTitle': 'Dashboard', 'im.sendTitle': "Send to IM channel",
       'im.noChannel': "No channels yet; add one under Admin → Channels.", 'im.channel': 'Send to', 'im.msgTitle': 'Title', 'im.text': 'Message (Markdown, optional)', 'im.textPh': 'e.g. GMV +12% day over day, mostly from the east region',
-      'im.attach': 'Attaching {count} results.', 'im.dashboardHint': 'Re-runs every dashboard chart (max 10) with the current global filters, then sends.', 'im.webhookNoImage': 'Group bots cannot send images; charts go as tables.',
+      'im.attach': 'Attaching {count} results.', 'im.dashboardHint': 'Re-runs every dashboard chart (max 10) with the current global filters, then sends.',
       'im.includeSql': 'Include SQL', 'im.send': 'Send', 'im.sent': 'Sent to {channel} ({images} images)', 'rep.push': 'Push to', 'rep.pushNone': 'Do not push',
       'tab.reports': 'Reports', 'ds.type': 'Database type', 'ds.indexPattern': 'Indices (comma separated, wildcards allowed)', 'ds.userOptional': 'User (optional)',
       'ds.apiKey': 'API key (optional, preferred over user/password)', 'ds.apiKeyHint': 'Base64 encoded id:api_key', 'ds.schemas': 'Schemas (comma separated; empty = all user schemas)', 'ds.https': 'Use HTTPS',
@@ -1496,6 +1510,12 @@ window.__ModuleLoader__.load({
       'settings.limits': 'Query limits', 'settings.maxRows': 'Max rows per query', 'settings.timeoutMs': 'Query timeout (ms)', 'settings.save': 'Save settings', 'settings.saved': 'Saved',
       'composer.none': 'No data source', 'composer.title': 'Data source queried by this session',
       'tool.query': 'Data query', 'tool.chart': 'Chart', 'tool.running': 'Querying…', 'tool.failed': 'Query failed', 'error.generic': 'Failed: {message}',
+      'dash.copyName': '{name} copy',
+      'set.leaveTitle': 'Discard unsaved settings?', 'set.leaveMsg': 'You have unsaved setting changes; they will be lost if you leave.', 'set.leaveOk': 'Discard and leave',
+      'fb.deleteConfirm': 'Delete this feedback?',
+      'hist.source.telegrambot': 'Telegram bot', 'hist.source.wecombot': 'WeCom bot', 'hist.source.dingtalkbot': 'DingTalk bot', 'hist.source.unknown': 'Unknown source', 'hist.source.genericBot': '{platform} bot',
+      'filter.valuesPh': 'Values, comma-separated',
+      'policy.tablesLabel': 'Accessible tables',
     }
 
     // --------------------------------------------------------------- RPC
@@ -1732,8 +1752,10 @@ window.__ModuleLoader__.load({
 .n2s-hist{border:.5px solid var(--n2s-line-2);border-radius:var(--n2s-radius);overflow:hidden;background:var(--dsw-alias-bg-layer-1)}
 .n2s-hist-row{border-bottom:.5px solid var(--n2s-line)}
 .n2s-hist-row:last-child{border-bottom:0}
-.n2s-hist-main{display:grid;grid-template-columns:76px minmax(0,1fr) 150px 84px 20px;align-items:center;gap:14px;width:100%;padding:11px 16px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
-.n2s-hist-main:hover{background:var(--n2s-hover)}
+.n2s-hist-head{display:flex;align-items:center}
+.n2s-hist-head:hover{background:var(--n2s-hover)}
+.n2s-hist-head .n2s-rowdel{flex:none;margin-right:10px}
+.n2s-hist-main{display:grid;grid-template-columns:76px minmax(0,1fr) 150px 84px 20px;align-items:center;gap:14px;flex:1;min-width:0;width:100%;padding:11px 6px 11px 16px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
 .n2s-hist-main:focus-visible{outline:2px solid var(--n2s-accent);outline-offset:-2px}
 .n2s-hist-what{display:grid;gap:2px;min-width:0}
 .n2s-hist-title{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@@ -1965,8 +1987,6 @@ window.__ModuleLoader__.load({
 .n2s-recent-row:hover .n2s-recent-del,.n2s-recent-del:focus-visible,.n2s-hist-row:hover .n2s-rowdel,.n2s-rowdel:focus-visible{opacity:1}
 .n2s-recent-del:hover,.n2s-rowdel:hover{color:var(--n2s-err)}
 @media (hover:none){.n2s-recent-del,.n2s-rowdel{opacity:1}}
-.n2s-hist-row.has-del{position:relative}
-.n2s-rowdel{position:absolute;top:10px;right:40px;z-index:1}
 .n2s-morebtn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:36px;margin-top:6px;border:.5px dashed var(--n2s-line-2);border-radius:var(--n2s-radius-sm);background:transparent;color:var(--n2s-muted);font:inherit;font-size:13px;cursor:pointer}
 .n2s-morebtn:hover{background:var(--n2s-hover);color:var(--dsw-alias-label-primary)}
 .n2s-btn.danger-text{color:var(--n2s-err)}
@@ -2036,7 +2056,8 @@ window.__ModuleLoader__.load({
 .n2s-ptile[aria-checked=true]{border-color:var(--n2s-accent);background:color-mix(in srgb,var(--n2s-accent) 6%,transparent);box-shadow:0 0 0 1px var(--n2s-accent)}
 .n2s-ptile:focus-visible,.n2s-kindcard:focus-visible{outline:2px solid var(--n2s-accent);outline-offset:2px}
 .n2s-ptile-name{font-size:13.5px;font-weight:600}
-.n2s-kindcards{display:grid;gap:8px;margin-top:8px}
+.n2s-kindcards{display:grid;gap:8px;margin:8px 0 0;padding:0;list-style:none}
+.n2s-kindcard-li{display:grid}
 .n2s-kindcard{display:grid;gap:4px;padding:12px 14px;border-radius:var(--n2s-radius);border:.5px solid var(--n2s-line-2);background:var(--dsw-alias-bg-base);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .12s,background .12s}
 .n2s-kindcard:hover{border-color:var(--n2s-accent);background:color-mix(in srgb,var(--n2s-accent) 4%,transparent)}
 .n2s-kindcard-title{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
@@ -2162,6 +2183,16 @@ window.__ModuleLoader__.load({
     const joinList = (items, sep) => (items ?? []).filter(x => x !== undefined && x !== null && x !== '').join(sep ?? (uiLang === 'zh' ? '、' : ', '))
     /** Label + colon in the UI language: 「标签：」 / "Label: ". */
     const colon = (label) => (uiLang === 'zh' ? `${label}：` : `${label}: `)
+    /** List separator in the UI language. */
+    const listSep = () => (uiLang === 'zh' ? '、' : ', ')
+    /** Clauses joined in the UI language: 「a；b」 / "a; b". */
+    const joinClauses = (items) => joinList(items, uiLang === 'zh' ? '；' : '; ')
+    /** Parenthetical in the UI language: 「（x）」 / " (x)". */
+    const paren = (s) => (s === undefined || s === null || s === '' ? '' : uiLang === 'zh' ? `（${s}）` : ` (${s})`)
+    /** Quoted name in the UI language: 「x」 / "x". */
+    const quoted = (s) => (uiLang === 'zh' ? `「${s}」` : `"${s}"`)
+    /** BCP 47 tag for Intl formatting in the UI language. */
+    const uiLocale = () => (uiLang === 'zh' ? 'zh-CN' : 'en-US')
     const setUiLang = (snapshot) => {
       const id = typeof snapshot === 'string' ? snapshot : (snapshot?.active ?? snapshot?.locale ?? 'zh')
       uiLang = /^zh/i.test(String(id)) ? 'zh' : 'en'
@@ -2176,18 +2207,26 @@ window.__ModuleLoader__.load({
     }
 
     function formatCompact(v) {
+      if (v === null || v === undefined || v === '') return '—'
       const n = Number(v)
-      if (!Number.isFinite(n)) return String(v ?? '—')
+      if (!Number.isFinite(n)) return String(v)
       const abs = Math.abs(n)
-      if (uiLang !== 'zh') {
-        if (abs >= 1e9) return `${(n / 1e9).toFixed(abs >= 1e11 ? 0 : 2)}B`
-        if (abs >= 1e6) return `${(n / 1e6).toFixed(abs >= 1e8 ? 0 : 1)}M`
-        if (abs >= 1e5) return `${(n / 1e3).toFixed(0)}K`
-        return n.toLocaleString(undefined, { maximumFractionDigits: 2 })
+      // [divisor, suffix, threshold, digits(abs)] from the largest unit down.
+      const scales = uiLang === 'zh'
+        ? [[1e8, '亿', 1e8, a => (a >= 1e10 ? 0 : 2)], [1e4, '万', 1e5, a => (a >= 1e7 ? 0 : 1)]]
+        : [[1e9, 'B', 1e9, a => (a >= 1e11 ? 0 : 2)], [1e6, 'M', 1e6, a => (a >= 1e8 ? 0 : 1)], [1e3, 'K', 1e5, () => 0]]
+      for (let i = 0; i < scales.length; i++) {
+        const [div, suffix, threshold, digits] = scales[i]
+        if (abs < threshold) continue
+        const s = (n / div).toFixed(digits(abs))
+        // Rounding can reach the next unit (999 999 → "1000K"): use the larger unit instead.
+        if (i > 0 && Math.abs(Number(s)) >= scales[i - 1][0] / div) {
+          const [div2, suffix2, , digits2] = scales[i - 1]
+          return `${(n / div2).toFixed(digits2(scales[i - 1][0]))}${suffix2}`
+        }
+        return `${s}${suffix}`
       }
-      if (abs >= 1e8) return `${(n / 1e8).toFixed(abs >= 1e10 ? 0 : 2)}亿`
-      if (abs >= 1e5) return `${(n / 1e4).toFixed(abs >= 1e7 ? 0 : 1)}万`
-      return n.toLocaleString(undefined, { maximumFractionDigits: 2 })
+      return n.toLocaleString(uiLocale(), { maximumFractionDigits: 2 })
     }
 
     function toCsv(result) {
@@ -2261,23 +2300,72 @@ window.__ModuleLoader__.load({
      * Async data with request ordering: results of an older request (or of
      * previous deps) never overwrite newer ones, and `loading` is true from the
      * first render after deps change.
+     *
+     * `value` belongs to the current deps: while new deps load it is undefined,
+     * so e.g. a previous data source's data is never shown or acted on.
+     * `reload()` with unchanged deps keeps `value` until the new one arrives.
+     * `scope` (optional) names the deps that identify *whose* data this is; when
+     * only other deps change (a page offset, a filter) the previous value stays
+     * on screen while the next one loads, as long as the scope is unchanged.
      */
-    function useAsync(fn, deps) {
+    function useAsync(fn, deps, scope) {
       const depsKey = JSON.stringify(deps)
-      const [state, setState] = useState({ loading: true, value: undefined, error: undefined, key: null })
+      const scopeKey = scope === undefined ? depsKey : JSON.stringify(scope)
+      const [state, setState] = useState({ loading: true, value: undefined, error: undefined, key: null, scope: null })
       const seq = useRef(0)
       const reload = useCallback(() => {
         const id = ++seq.current
         setState(s => ({ ...s, loading: true, error: undefined }))
         Promise.resolve().then(fn).then(
-          value => { if (seq.current === id) setState({ loading: false, value, error: undefined, key: depsKey }) },
-          error => { if (seq.current === id) setState({ loading: false, value: undefined, error, key: depsKey }) },
+          value => { if (seq.current === id) setState({ loading: false, value, error: undefined, key: depsKey, scope: scopeKey }) },
+          error => { if (seq.current === id) setState({ loading: false, value: undefined, error, key: depsKey, scope: scopeKey }) },
         )
         return () => { if (seq.current === id) seq.current++ }
       }, deps)
       useEffect(reload, [reload])
       const stale = state.key !== depsKey
-      return { ...state, loading: state.loading || stale, stale, reload }
+      const foreign = state.scope !== scopeKey
+      return { loading: state.loading || stale, value: foreign ? undefined : state.value, error: stale ? undefined : state.error, stale, reload }
+    }
+
+    /**
+     * Guard against double submits: `run(fn)` ignores calls while one is in
+     * flight (checked synchronously through a ref, so two clicks in the same
+     * tick still run once) and `busy` re-renders the disabled state.
+     */
+    function useBusy() {
+      const ref = useRef(false)
+      const [busy, setBusy] = useState(false)
+      const alive = useRef(true)
+      useEffect(() => { alive.current = true; return () => { alive.current = false } }, [])
+      const run = useCallback(async (fn) => {
+        if (ref.current) return undefined
+        ref.current = true
+        setBusy(true)
+        try { return await fn() } finally { ref.current = false; if (alive.current) setBusy(false) }
+      }, [])
+      return [busy, run]
+    }
+
+    const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+    /** Keep Tab / Shift+Tab focus inside the element while `active`. */
+    function useFocusTrap(ref, active = true) {
+      useEffect(() => {
+        const el = ref.current
+        if (!active || !el) return
+        const onKey = (e) => {
+          if (e.key !== 'Tab') return
+          const items = [...el.querySelectorAll(FOCUSABLE)].filter(x => !x.closest('[hidden]') && x.getAttribute('aria-hidden') !== 'true')
+          if (!items.length) { e.preventDefault(); return }
+          const first = items[0]
+          const last = items[items.length - 1]
+          const cur = document.activeElement
+          if (e.shiftKey && (cur === first || !el.contains(cur))) { e.preventDefault(); last.focus() } else if (!e.shiftKey && (cur === last || !el.contains(cur))) { e.preventDefault(); first.focus() }
+        }
+        el.addEventListener('keydown', onKey)
+        return () => el.removeEventListener('keydown', onKey)
+      }, [ref, active, ref.current])
     }
 
     // ------------------------------------------------------------ feedback
@@ -2314,6 +2402,7 @@ window.__ModuleLoader__.load({
       const [value, setValue] = useState('')
       const [err, setErr] = useState(null)
       const box = useRef(null)
+      useFocusTrap(box, Boolean(d))
       useEffect(() => {
         if (!d) return
         setValue(d.value ?? '')
@@ -2335,7 +2424,7 @@ window.__ModuleLoader__.load({
       return h(React.Fragment, null,
         h('div', { className: 'n2s-toasts', role: 'status', 'aria-live': 'polite' }, st.toasts.map(x => h('div', { key: x.id, className: `n2s-toast ${x.kind}` }, x.kind === 'ok' ? Icon.check(14) : x.kind === 'err' ? Icon.close(13) : null, h('span', null, x.text)))),
         d && ReactDOM.createPortal(h('div', { className: 'n2s-modal-backdrop', onMouseDown: (e) => { if (e.target === e.currentTarget) close(d.kind === 'prompt' ? null : false) } },
-          h('div', { ref: box, className: 'n2s-modal', role: 'alertdialog', 'aria-modal': true, 'aria-labelledby': 'n2s-dlg-title', style: { width: 'min(440px, 100%)' }, onKeyDown: (e) => { if (e.key === 'Escape') close(d.kind === 'prompt' ? null : false); if (e.key === 'Enter' && e.target.tagName !== 'BUTTON') ok() } },
+          h('div', { ref: box, className: 'n2s-modal', role: 'alertdialog', 'aria-modal': true, 'aria-labelledby': 'n2s-dlg-title', style: { width: 'min(440px, 100%)' }, onKeyDown: (e) => { if (e.key === 'Escape') { e.stopPropagation(); close(d.kind === 'prompt' ? null : false) } if (e.key === 'Enter' && e.target.tagName !== 'BUTTON') ok() } },
             h('div', { id: 'n2s-dlg-title', className: 'n2s-modal-title', style: { marginBottom: 8 } }, d.title),
             d.message && h('div', { className: 'n2s-muted', style: { fontSize: 13.5, marginBottom: 12, whiteSpace: 'pre-wrap' } }, d.message),
             d.kind === 'prompt' && h('input', { className: 'n2s-input', value, placeholder: d.placeholder, 'aria-label': d.title, onChange: e => { setValue(e.target.value); setErr(null) } }),
@@ -2345,6 +2434,22 @@ window.__ModuleLoader__.load({
               h('button', { type: 'button', className: `n2s-btn ${d.danger ? 'danger-solid' : 'primary'}`, onClick: ok }, d.confirmLabel ?? t('fb2.ok'))))), document.body))
     }
 
+
+    /** Mount the FeedbackLayer once into its own root under document.body; returns the disposer. */
+    function mountFeedbackLayer(ctx) {
+      const el = document.createElement('div')
+      el.className = 'n2s-feedback-root'
+      el.dataset.plugin = PKG
+      document.body.appendChild(el)
+      const root = ReactDOMClient.createRoot(el)
+      function GlobalFeedback() {
+        const t = useMemo(() => ctx.locale.bind(NS), [])
+        setUiLang(useSyncExternalStore(ctx.locale.subscribe.bind(ctx.locale), () => ctx.locale.getSnapshot(), () => ctx.locale.getSnapshot()))
+        return h(FeedbackLayer, { t })
+      }
+      root.render(h(GlobalFeedback))
+      return () => { const d = feedbackStore.get().dialog; feedbackStore.set({ ...feedbackStore.get(), dialog: null }); d?.resolve(d.kind === 'prompt' ? null : false); setTimeout(() => { root.unmount(); el.remove() }, 0) }
+    }
     // ----------------------------------------------------------- charts
 
     let echartsPromise
@@ -2551,8 +2656,11 @@ window.__ModuleLoader__.load({
       const [sending, setSending] = useState(false)
       const [rating, setRating] = useState(null)
       const [drill, setDrill] = useState(null)
+      const ratingBusy = useRef(false)
       useEffect(() => { setType(result.chart?.type ?? 'table') }, [result.resultId])
       const rate = async (value, comment) => {
+        if (ratingBusy.current) return
+        ratingBusy.current = true
         try {
           await call('submitFeedback', { resultId: result.resultId, rating: value, comment, question, sql: result.baseSql ?? result.sql, datasourceId: result.datasourceId, title: result.title, sessionId: onFeedback?.sessionId })
           setRated(value)
@@ -2560,11 +2668,15 @@ window.__ModuleLoader__.load({
           if (value === 'down') onFeedback?.down?.(comment)
         } catch (e) {
           notifyError(e)
+        } finally {
+          ratingBusy.current = false
         }
       }
       const chart = useMemo(() => (type === result.chart?.type ? result.chart : chartFor(type, result, result.suggestedChart ?? result.chart)) ?? { type: 'table' }, [type, result])
       const available = useMemo(() => CHART_CHOICES.filter(c => c === 'table' || chartFor(c, result, result.chart)), [result])
-      const pin = async () => {
+      const [pinning, runPin] = useBusy()
+      const pin = () => runPin(async () => {
+        if (pinned) return
         try {
           await call('pinWidget', { title: result.title || result.sql.slice(0, 60), sql: result.sql, datasourceId: result.datasourceId, chart })
           setPinned(true)
@@ -2572,8 +2684,9 @@ window.__ModuleLoader__.load({
         } catch (e) {
           notifyError(e)
         }
-      }
-      const saveExample = async () => {
+      })
+      const [savingExample, runSaveExample] = useBusy()
+      const saveExample = () => runSaveExample(async () => {
         const q = await promptDialog({ title: t('kb.examplePrompt'), value: question || result.title || '' })
         if (!q) return
         try {
@@ -2582,7 +2695,7 @@ window.__ModuleLoader__.load({
         } catch (e) {
           notifyError(e)
         }
-      }
+      })
       const rerun = async (confirmScan) => {
         setRunning(true); setEditError(null)
         try {
@@ -2626,7 +2739,7 @@ window.__ModuleLoader__.load({
         isChart && result.chart?.x && result.rows.length >= 2 && { label: t('drill.why'), icon: Icon.spark(14), onClick: () => setDrill({ mode: 'why' }) },
         isChart && chartInstance && { label: t('result.png'), icon: Icon.download(14), onClick: exportPng },
         !hidden && { divider: true },
-        !hidden && { label: savedExample ? t('kb.exampleSaved') : t('kb.saveExample'), icon: Icon.spark(14), disabled: savedExample, onClick: saveExample },
+        !hidden && { label: savedExample ? t('kb.exampleSaved') : t('kb.saveExample'), icon: Icon.spark(14), disabled: savedExample || savingExample, onClick: saveExample },
       ]
       const chartPicker = result.rows.length > 0 && h(Dropdown, {
         label: t('result.chartType'),
@@ -2653,7 +2766,7 @@ window.__ModuleLoader__.load({
           embedded && h('span', { className: 'n2s-faint n2s-small' }, fmt(t, 'result.rows', { count: result.rowCount }), ' · ', fmt(t, 'result.elapsed', { ms: result.elapsedMs })),
           !hidden && h('button', { type: 'button', className: 'n2s-iconbtn', 'aria-pressed': rated === 'up', title: t('fb.up'), 'aria-label': t('fb.up'), onClick: () => rate('up') }, Icon.thumbUp()),
           !hidden && h('button', { type: 'button', className: 'n2s-iconbtn', 'aria-pressed': rated === 'down' || rating === 'down', title: t('fb.down'), 'aria-label': t('fb.down'), onClick: () => setRating(rating === 'down' ? null : 'down') }, Icon.thumbDown()),
-          !hidden && h('button', { type: 'button', className: 'n2s-iconbtn', disabled: pinned, 'aria-pressed': pinned, title: pinned ? t('result.pinned') : t('result.pin'), 'aria-label': t('result.pin'), onClick: pin }, Icon.pin()),
+          !hidden && h('button', { type: 'button', className: 'n2s-iconbtn', disabled: pinned || pinning, 'aria-busy': pinning || undefined, 'aria-pressed': pinned, title: pinned ? t('result.pinned') : t('result.pin'), 'aria-label': t('result.pin'), onClick: pin }, Icon.pin()),
           h('button', { type: 'button', className: 'n2s-iconbtn', title: t('im.share'), 'aria-label': t('im.share'), onClick: () => setSending(true) }, Icon.send()),
           h(Dropdown, { label: t('result.more'), trigger: { content: Icon.more() }, items: moreItems })),
         rating === 'down' && h(FeedbackForm, { t, onCancel: () => setRating(null), onSubmit: (comment) => rate('down', comment) }),
@@ -2838,6 +2951,18 @@ window.__ModuleLoader__.load({
       const [state, setState] = useState(null)
       const [drag, setDrag] = useState(false)
       const inputRef = useRef(null)
+      const box = useRef(null)
+      useFocusTrap(box)
+      const busyRef = useRef(false)
+      busyRef.current = Boolean(state?.busy)
+      useEffect(() => {
+        const prev = document.activeElement
+        setTimeout(() => box.current?.querySelector('[role=button], button')?.focus(), 0)
+        // Escape works wherever focus is (not only inside the dialog), but not under a confirm dialog or mid-upload.
+        const onKey = (e) => { if (e.key === 'Escape' && !feedbackStore.get().dialog && !busyRef.current) onClose() }
+        document.addEventListener('keydown', onKey)
+        return () => { document.removeEventListener('keydown', onKey); prev?.focus?.() }
+      }, [])
       const pick = async (f) => {
         if (!f) return
         setFile(f); setSheets(null); setState({ busy: true }); setProgress(0)
@@ -2850,6 +2975,8 @@ window.__ModuleLoader__.load({
         } catch (e) { setState({ error: e.message }) }
       }
       const run = async () => {
+        if (busyRef.current) return
+        busyRef.current = true
         setState({ busy: true })
         try {
           const res = await call('importUpload', { datasourceId: target || undefined, newName: target ? undefined : newName, fileName: file.name, uploadId, mode, sheets: sheets.filter(x => x.include).map(x => ({ sheet: x.sheet, table: x.table, mode, columns: x.columns })) })
@@ -2860,7 +2987,7 @@ window.__ModuleLoader__.load({
       }
       const typeOpts = ['TEXT', 'INTEGER', 'REAL', 'DATE', 'DATETIME']
       return ReactDOM.createPortal(h('div', { className: 'n2s-modal-backdrop', onMouseDown: (e) => { if (e.target === e.currentTarget) onClose() } },
-        h('div', { className: 'n2s-modal', role: 'dialog', 'aria-modal': true, 'aria-label': t('up.title'), style: { width: 'min(860px, 100%)' }, onKeyDown: (e) => { if (e.key === 'Escape' && !state?.busy) onClose() } },
+        h('div', { ref: box, className: 'n2s-modal', role: 'dialog', 'aria-modal': true, 'aria-label': t('up.title'), style: { width: 'min(860px, 100%)' } },
           h('div', { className: 'n2s-row', style: { marginBottom: 12 } }, h('span', { className: 'n2s-modal-title' }, t('up.title')), h('span', { className: 'n2s-grow' }), h('button', { type: 'button', className: 'n2s-iconbtn', 'aria-label': t('ds.cancel'), onClick: onClose }, Icon.close())),
           !sheets && h('div', {
             className: `n2s-drop ${drag ? 'over' : ''}`, role: 'button', tabIndex: 0,
@@ -2890,19 +3017,19 @@ window.__ModuleLoader__.load({
                   h('tr', null, sh.columns.map((c, ci) => h('th', { key: ci, style: { top: 30, padding: '2px 8px' } }, h('select', { className: 'n2s-select', style: { height: 24, fontSize: 11, padding: '0 4px' }, value: c.type, 'aria-label': `${c.name} type`, onChange: e => setSheets(x => x.map((y, i) => i === si ? { ...y, columns: y.columns.map((cc, j) => j === ci ? { ...cc, type: e.target.value } : cc) } : y)) }, typeOpts.map(o => h('option', { key: o, value: o }, t(`up.type.${o}`)))))))),
                 h('tbody', null, sh.preview.slice(0, 8).map((r, ri) => h('tr', { key: ri }, sh.columns.map((c, ci) => h('td', { key: ci, className: c.type === 'INTEGER' || c.type === 'REAL' ? 'num' : undefined }, r[ci] === null || r[ci] === undefined ? '' : String(r[ci]))))))))))),
           state?.error && h('div', { className: 'n2s-notice err', style: { marginTop: 10 } }, state.error),
-          state?.done && h('div', { className: 'n2s-notice ok', style: { marginTop: 10 } }, fmt(t, 'up.done', { name: state.done.datasourceName }), ' ', state.done.results.map(r => r.ok ? fmt(t, 'up.resultOk', { table: r.table, rows: r.rows }) : `${r.sheet}: ${r.error}`).join('；')),
+          state?.done && h('div', { className: 'n2s-notice ok', style: { marginTop: 10 } }, fmt(t, 'up.done', { name: state.done.datasourceName }), ' ', joinClauses(state.done.results.map(r => r.ok ? fmt(t, 'up.resultOk', { table: r.table, rows: r.rows }) : `${colon(r.sheet)}${r.error}`))),
           h('div', { className: 'n2s-row', style: { marginTop: 14, justifyContent: 'flex-end' } },
             h('span', { className: 'n2s-faint n2s-small n2s-grow' }, t('up.privacy')),
             h('button', { type: 'button', className: 'n2s-btn ghost', onClick: onClose }, state?.done ? t('ds.close') : t('ds.cancel')),
             sheets && !state?.done && h('button', { type: 'button', className: 'n2s-btn primary', disabled: state?.busy || !sheets.some(x => x.include) || (!target && !newName.trim()), onClick: run }, state?.busy ? h('span', { className: 'n2s-spin' }) : null, t('up.import'))))), document.body)
     }
     function FileTables({ t, ds }) {
-      const list = useAsync(() => call('listFileTables', { datasourceId: ds.id }), [ds.id, ds.schemaAnalyzedAt])
+      const list = useAsync(() => call('listFileTables', { datasourceId: ds.id }), [ds.id, ds.schemaAnalyzedAt], [ds.id])
       const tables = list.value ?? []
       if (!tables.length) return null
       return h('div', { className: 'n2s-chips', style: { marginTop: 6 } }, tables.map(tb => h('span', { key: tb.name, className: 'n2s-badge', title: `${tb.source ?? ''} · ${new Date(tb.updatedAt ?? tb.createdAt).toLocaleString()}` },
         `${tb.name} · ${formatCompact(tb.rows)}`,
-        h('button', { type: 'button', className: 'n2s-iconbtn', style: { width: 16, height: 16 }, 'aria-label': `${t('ds.delete')} ${tb.name}`, onClick: async () => { if (await confirmDialog({ title: fmt(t, 'up.dropConfirm', { name: tb.name }), danger: true })) { await call('dropFileTable', { datasourceId: ds.id, table: tb.name }); list.reload(); refreshDatasources() } } }, Icon.close(10)))))
+        h('button', { type: 'button', className: 'n2s-iconbtn', style: { width: 16, height: 16 }, 'aria-label': `${t('ds.delete')} ${tb.name}`, onClick: async () => { if (await confirmDialog({ title: fmt(t, 'up.dropConfirm', { name: tb.name }), danger: true })) { try { await call('dropFileTable', { datasourceId: ds.id, table: tb.name }) } catch (e) { notifyError(e) } list.reload(); refreshDatasources() } } }, Icon.close(10)))))
     }
 
     function SourcesTab({ t, datasources }) {
@@ -2949,7 +3076,7 @@ window.__ModuleLoader__.load({
             h('div', { className: 'n2s-row', style: { gap: 2, flexWrap: 'nowrap' } },
               h('button', { type: 'button', className: 'n2s-btn small', disabled: tr?.busy, onClick: () => test(ds) }, tr?.busy ? h('span', { className: 'n2s-spin' }) : null, t('ds.test')),
               h(Dropdown, { label: t('result.more'), trigger: { content: Icon.more() }, items: [
-                !ds.current && { label: t('ds.setCurrent'), icon: Icon.check(14), onClick: async () => { await call('setCurrent', { id: ds.id }); refreshDatasources() } },
+                !ds.current && { label: t('ds.setCurrent'), icon: Icon.check(14), onClick: async () => { try { await call('setCurrent', { id: ds.id }) } catch (e) { notifyError(e) } refreshDatasources() } },
                 ds.type === 'sqlite' && { label: t('up.addFile'), icon: Icon.up(14), onClick: () => setUpload({ target: ds.id }) },
                 ds.type !== 'sqlite' && { label: t('ds.edit'), icon: Icon.edit(14), onClick: () => setEditing(ds) },
                 { label: t('policy.button'), icon: svg(14, [h('rect', { key: 1, x: 3.5, y: 7, width: 9, height: 6.5, rx: 1.4 }), h('path', { key: 2, d: 'M5.5 7V5a2.5 2.5 0 0 1 5 0v2' })]), onClick: () => setPolicyFor(ds) },
@@ -2998,11 +3125,12 @@ window.__ModuleLoader__.load({
       }
       const quoteTable = (name) => ds.type === 'mysql' ? `\`${name.replace(/`/g, '``')}\`` : ds.type === 'postgres' ? name.split('.').map(p => `"${p.replace(/"/g, '""')}"`).join('.') : `"${name.replace(/"/g, '""')}"`
       const runOverview = async (tb, pin) => {
+        const forId = ds.id
         setPreview({ busy: true })
         try {
-          const res = await call('tableOverview', { datasourceId: ds.id, table: tb.name, pin })
-          setPreview({ overview: res.results, pinned: pin })
-        } catch (e) { setPreview({ error: e.message }) }
+          const res = await call('tableOverview', { datasourceId: forId, table: tb.name, pin })
+          if (currentDs.current === forId) setPreview({ overview: res.results, pinned: pin })
+        } catch (e) { if (currentDs.current === forId) setPreview({ error: e.message }) }
       }
       // Default to the largest fact table so the detail pane is never blank.
       const defaultTable = schema ? ([...schema.tables].sort((x, y) => (y.role === 'fact') - (x.role === 'fact') || (y.rows ?? 0) - (x.rows ?? 0))[0]?.name ?? null) : null
@@ -3076,7 +3204,7 @@ window.__ModuleLoader__.load({
      * Hidden once every required step is done or the user dismisses it.
      */
     function Onboarding({ t, ds, onNavigate, onAsk, examples }) {
-      const st = useAsync(() => call('onboardingStatus').catch(() => null), [ds?.id, ds?.schemaAnalyzedAt])
+      const st = useAsync(() => call('onboardingStatus').catch(() => null), [ds?.id, ds?.schemaAnalyzedAt], [])
       const [busy, setBusy] = useState(false)
       const v = st.value
       if (!v || v.dismissed) return null
@@ -3115,12 +3243,21 @@ window.__ModuleLoader__.load({
       const [exOffset, setExOffset] = useState(0)
       const [recentLimit, setRecentLimit] = useState(8)
       const [hiddenRecent, setHiddenRecent] = useState(() => new Set())
-      useEffect(() => { setExOffset(0); setRecentLimit(8) }, [ds?.id])
-      const sugg = useAsync(() => (ds ? call('askSuggestions', { datasourceId: ds.id, locale: uiLang, offset: exOffset, pageSize: 6, recentLimit }).catch(() => null) : null), [ds?.id, ds?.schemaAnalyzedAt, uiLang, exOffset, recentLimit])
-      // Keep the previous page on screen while the next one loads (no flicker on 换一批).
-      const [shown, setShown] = useState(null)
-      useEffect(() => { if (sugg.value) { setShown(sugg.value); setHiddenRecent(new Set()) } }, [sugg.value])
-      const data = sugg.value ?? shown
+      // Data source switched: reset paging and per-source results during render, so the
+      // first request for the new source already uses offset 0 (no extra fetch).
+      const [stateFor, setStateFor] = useState(ds?.id)
+      if (stateFor !== ds?.id) {
+        setStateFor(ds?.id)
+        setExOffset(0); setRecentLimit(8); setHiddenRecent(new Set())
+        setResult(null); setPlan(null); setError(null)
+      }
+      const pageOffset = stateFor === ds?.id ? exOffset : 0
+      const pageRecent = stateFor === ds?.id ? recentLimit : 8
+      // Scoped by data source + language: within one source the previous page stays on
+      // screen while the next loads (no flicker on 换一批); another source's never does.
+      const sugg = useAsync(() => (ds ? call('askSuggestions', { datasourceId: ds.id, locale: uiLang, offset: pageOffset, pageSize: 6, recentLimit: pageRecent }).catch(() => null) : null), [ds?.id, ds?.schemaAnalyzedAt, uiLang, pageOffset, pageRecent], [ds?.id, uiLang])
+      useEffect(() => { if (sugg.value && !sugg.stale) setHiddenRecent(new Set()) }, [sugg.value])
+      const data = sugg.value
       const examples = data?.examples?.length ? data.examples : [t('ask.ex.tables'), t('ask.ex.biggest')]
       const canShuffle = (data?.total ?? 0) > (data?.pageSize ?? 6)
       const recent = (data?.recent ?? []).filter(r => !hiddenRecent.has(r.question))
@@ -3129,25 +3266,30 @@ window.__ModuleLoader__.load({
         setHiddenRecent(x => new Set(x).add(r.question))
         try { const res = await call('deleteHistory', { title: r.question, datasourceId: ds.id }); notify(fmt(t, 'ask.deletedN', { n: res.deleted }), 'ok') } catch (e) { notifyError(e); setHiddenRecent(x => { const n = new Set(x); n.delete(r.question); return n }) }
       }
+      const currentDs = useRef(ds?.id)
+      currentDs.current = ds?.id
       const run = async (confirmScan = false) => {
+        const forId = ds.id
         setRunning(true); setError(null)
         try {
-          setResult(await call('runQuery', { sql, datasourceId: ds.id, title: '', confirmScan }))
+          const r = await call('runQuery', { sql, datasourceId: forId, title: '', confirmScan })
+          if (currentDs.current === forId) setResult(r)
         } catch (e) {
-          if (e.code === 'nl2sql/scan-guard' && await confirmDialog({ title: t('sql.confirmScan'), message: e.message })) { setRunning(false); return run(true) }
-          setError(e.message)
+          if (e.code === 'nl2sql/scan-guard' && currentDs.current === forId && await confirmDialog({ title: t('sql.confirmScan'), message: e.message })) { setRunning(false); return run(true) }
+          if (currentDs.current === forId) setError(e.message)
         }
         setRunning(false)
       }
       const explain = async () => {
+        const forId = ds.id
         setRunning(true); setError(null)
-        try { setPlan(await call('explain', { sql, datasourceId: ds.id })) } catch (e) { setError(e.message) }
+        try { const p = await call('explain', { sql, datasourceId: forId }); if (currentDs.current === forId) setPlan(p) } catch (e) { if (currentDs.current === forId) setError(e.message) }
         setRunning(false)
       }
       const submit = () => { if (question.trim()) { onAsk(question.trim()); setQuestion('') } }
       const [uploading, setUploading] = useState(false)
       const [sqlOpen, setSqlOpen] = useState(false)
-      const tableCount = ds?.tableCount ?? sugg.value?.tableCount
+      const tableCount = ds?.tableCount ?? data?.tableCount
       return h('div', null,
         h(Onboarding, { t, ds, onNavigate, onAsk, examples }),
         h('div', { className: 'n2s-hero' },
@@ -3196,15 +3338,16 @@ window.__ModuleLoader__.load({
             result && h('div', { className: 'n2s-card', style: { marginTop: 12 } }, h(ResultView, { result, t, hideSql: true })))))
     }
 
-    /** "3 分钟前" style relative time. */
+    /** "3 分钟前" style relative time in the UI language; future or older than a week → the date. */
     function relTime(t, at) {
       if (!at) return ''
       const d = (Date.now() - at) / 1000
+      if (d < -60) return new Date(at).toLocaleDateString(uiLocale())
       if (d < 60) return t('time.justNow')
       if (d < 3600) return fmt(t, 'time.minAgo', { n: Math.floor(d / 60) })
       if (d < 86400) return fmt(t, 'time.hourAgo', { n: Math.floor(d / 3600) })
       if (d < 86400 * 7) return fmt(t, 'time.dayAgo', { n: Math.floor(d / 86400) })
-      return new Date(at).toLocaleDateString()
+      return new Date(at).toLocaleDateString(uiLocale())
     }
 
     function PlanTable({ plan }) {
@@ -3290,6 +3433,7 @@ window.__ModuleLoader__.load({
     }
     function KnowledgeEditor({ kind, item, t, fields, schema, noteKeys, onCancel, onSave }) {
       const [form, setForm] = useState(() => ({ ...item, ...(Array.isArray(item?.synonyms) ? { synonyms: item.synonyms.join('，') } : {}) }))
+      const [busy, runBusy] = useBusy()
       return h('div', { className: 'n2s-card', style: { marginBottom: 12 } },
         h('div', { className: 'n2s-form' }, fields.map(([key, label, type]) => h('label', { key, className: `n2s-field ${type === 'textarea' || type?.startsWith('code') ? 'full' : ''}` },
           h('span', null, t(label)),
@@ -3300,19 +3444,19 @@ window.__ModuleLoader__.load({
         h('datalist', { id: 'n2s-notekeys' }, noteKeys.slice(0, 2000).map(k2 => h('option', { key: k2, value: k2 }))),
         h('div', { className: 'n2s-row', style: { marginTop: 12, justifyContent: 'flex-end' } },
           h('button', { type: 'button', className: 'n2s-btn ghost', onClick: onCancel }, t('ds.cancel')),
-          h('button', { type: 'button', className: 'n2s-btn primary', onClick: () => onSave(form) }, t('ds.save'))))
+          h('button', { type: 'button', className: 'n2s-btn primary', disabled: busy, onClick: () => runBusy(() => onSave(form)) }, busy ? h('span', { className: 'n2s-spin' }) : null, t('ds.save'))))
     }
 
     function KnowledgeTab({ t, ds }) {
       const kb = useAsync(() => (ds ? call('getKnowledge', { datasourceId: ds.id }) : null), [ds?.id])
-      const schema = useAsync(() => (ds?.schemaAnalyzedAt ? call('analyzeSchema', { id: ds.id }) : null), [ds?.id, ds?.schemaAnalyzedAt])
+      const schema = useAsync(() => (ds?.schemaAnalyzedAt ? call('analyzeSchema', { id: ds.id }) : null), [ds?.id, ds?.schemaAnalyzedAt], [ds?.id])
       const [section, setSection] = useState('glossary')
       const [editing, setEditing] = useState(null)
       const [error, setError] = useState(null)
       const [drafts, setDrafts] = useState(null)
       const noteKeys = useMemo(() => (schema.value?.tables ?? []).flatMap(tb => [tb.name, ...tb.columns.map(c => `${tb.name}.${c.name}`)]), [schema.value])
       const allDatasources = useStore(s2 => s2.datasources)
-      const sgCount = useAsync(() => (ds ? call('suggestionCount', { datasourceId: ds.id }) : null), [ds?.id, kb.value])
+      const sgCount = useAsync(() => (ds ? call('suggestionCount', { datasourceId: ds.id }) : null), [ds?.id, kb.value], [ds?.id])
       if (!ds) return null
       const k = kb.value ?? { glossary: [], metrics: [], notes: {}, examples: [] }
       const save = async (kind, item) => {
@@ -3321,7 +3465,7 @@ window.__ModuleLoader__.load({
       }
       const remove = async (kind, id) => {
         if (!await confirmDialog({ title: t('kb.deleteConfirm'), danger: true })) return
-        await call('deleteKnowledgeItem', { datasourceId: ds.id, kind, id }).catch(e => setError(e.message))
+        try { await call('deleteKnowledgeItem', { datasourceId: ds.id, kind, id }) } catch (e) { setError(e.message) }
         kb.reload()
       }
       const FIELDS = {
@@ -3346,7 +3490,7 @@ window.__ModuleLoader__.load({
       if (section === 'glossary') list = k.glossary.length ? k.glossary.map(g => item(g.id, h(React.Fragment, null, g.term, g.synonyms?.length ? h('span', { className: 'n2s-muted n2s-small' }, `  ${g.synonyms.join(' / ')}`) : null),
         h('div', null, h('div', null, g.definition), g.sql && h('code', { className: 'n2s-md-code', style: { display: 'inline-block', marginTop: 6 } }, g.sql)), 'glossary', g)) : empty(t('kb.glossaryEmpty'))
       if (section === 'metric') list = k.metrics.length ? k.metrics.map(m => item(m.id, h(React.Fragment, null, m.name, m.unit ? h('span', { className: 'n2s-badge', style: { marginLeft: 6 } }, m.unit) : null),
-        h('div', null, h('div', { className: 'n2s-mono n2s-small' }, `${m.expression}${m.table ? ` FROM ${m.table}` : ''}${m.filter ? ` WHERE ${m.filter}` : ''}`), m.timeColumn && h('div', { className: 'n2s-muted n2s-small' }, `${t('kb.timeColumn')}: ${m.timeColumn}${m.dimensions?.length ? ` · ${t('kb.dimensions')}: ${m.dimensions.join(uiLang === 'zh' ? '、' : ', ')}` : ''}${m.synonyms?.length ? ` · ${t('kb.synonymsLabel')}: ${m.synonyms.join(uiLang === 'zh' ? '、' : ', ')}` : ''}`), m.description && h('div', { className: 'n2s-muted n2s-small' }, m.description)), 'metric', m)) : empty(t('kb.metricsEmpty'))
+        h('div', null, h('div', { className: 'n2s-mono n2s-small' }, `${m.expression}${m.table ? ` FROM ${m.table}` : ''}${m.filter ? ` WHERE ${m.filter}` : ''}`), m.timeColumn && h('div', { className: 'n2s-muted n2s-small' }, `${t('kb.timeColumn')}: ${m.timeColumn}${m.dimensions?.length ? ` · ${t('kb.dimensions')}: ${joinList(m.dimensions)}` : ''}${m.synonyms?.length ? ` · ${t('kb.synonymsLabel')}: ${joinList(m.synonyms)}` : ''}`), m.description && h('div', { className: 'n2s-muted n2s-small' }, m.description)), 'metric', m)) : empty(t('kb.metricsEmpty'))
       if (section === 'note') {
         const entries = Object.entries(k.notes).sort(([a], [b]) => a.localeCompare(b))
         list = h(React.Fragment, null,
@@ -3371,7 +3515,7 @@ window.__ModuleLoader__.load({
     }
     function HistoryTab({ t, datasources, onOpenSession }) {
       const [filters, setFilters] = useState({ status: '', source: '', datasourceId: '', search: '' })
-      const list = useAsync(() => call('listHistory', { ...filters, limit: 300 }), [filters.status, filters.source, filters.datasourceId, filters.search])
+      const list = useAsync(() => call('listHistory', { ...filters, limit: 300 }), [filters.status, filters.source, filters.datasourceId, filters.search], [])
       const [open, setOpen] = useState(null)
       const [rerun, setRerun] = useState(null)
       const [removed, setRemoved] = useState(() => new Set())
@@ -3397,13 +3541,7 @@ window.__ModuleLoader__.load({
       }, [rows])
       const [search, setSearch] = useState('')
       useEffect(() => { const id = setTimeout(() => setFilters(f => (f.search === search ? f : { ...f, search })), 250); return () => clearTimeout(id) }, [search])
-      const rel = (at) => {
-        const d = (Date.now() - at) / 1000
-        if (d < 60) return t('time.justNow')
-        if (d < 3600) return fmt(t, 'time.minAgo', { n: Math.floor(d / 60) })
-        if (d < 86400) return fmt(t, 'time.hourAgo', { n: Math.floor(d / 3600) })
-        return new Date(at).toLocaleDateString()
-      }
+      const rel = (at) => relTime(t, at)
       const statusDot = (st) => h('span', { className: `n2s-statusdot ${st === 'error' ? 'err' : st === 'blocked' ? 'warn' : 'ok'}` }, t(`hist.status.${st ?? 'ok'}`))
       const oneLine = (sql) => sql.replace(/\s+/g, ' ').trim()
       return h('div', null,
@@ -3418,30 +3556,31 @@ window.__ModuleLoader__.load({
           h(Dropdown, { label: t('result.more'), trigger: { content: Icon.more() }, items: [
             { label: t('hist.export'), icon: Icon.download(14), disabled: rows.length === 0, onClick: exportCsv },
             { divider: true },
-            { label: t('hist.clear'), icon: Icon.trash(14), danger: true, onClick: async () => { if (await confirmDialog({ title: t('hist.clearConfirm'), danger: true })) { await call('clearHistory'); list.reload() } } },
+            { label: t('hist.clear'), icon: Icon.trash(14), danger: true, onClick: async () => { if (await confirmDialog({ title: t('hist.clearConfirm'), danger: true })) { try { await call('clearHistory') } catch (e) { notifyError(e) } list.reload() } } },
           ] })),
         list.error && h('div', { className: 'n2s-notice err' }, list.error.message),
         list.loading && !list.value && h('div', { className: 'n2s-skel', style: { height: 240 } }),
         !list.loading && rows.length === 0 && h('div', { className: 'n2s-empty' }, h('h3', null, t('hist.empty')), h('div', null, t('hist.emptyHint'))),
         rows.length > 0 && h('div', { className: 'n2s-hist', role: 'list' }, rows.map(r => {
           const isOpen = open === r.id
-          return h('div', { key: r.id ?? `${r.at}`, className: 'n2s-hist-row has-del', role: 'listitem' },
-            h('button', { type: 'button', className: 'n2s-iconbtn n2s-rowdel', title: t('hist.deleteOne'), 'aria-label': `${t('hist.deleteOne')}: ${r.title || t('hist.untitled')}`, onClick: () => removeRow(r) }, Icon.trash(14)),
+          return h('div', { key: r.id ?? `${r.at}`, className: 'n2s-hist-row', role: 'listitem' },
+            h('div', { className: 'n2s-hist-head' },
             h('button', { type: 'button', className: 'n2s-hist-main', 'aria-expanded': isOpen, onClick: () => setOpen(isOpen ? null : r.id) },
               statusDot(r.status),
               h('span', { className: 'n2s-hist-what' },
                 h('span', { className: `n2s-hist-title ${r.title ? '' : 'none'}` }, r.title || r.error?.slice(0, 80) || t('hist.untitled')),
                 h('span', { className: 'n2s-hist-sql', title: oneLine(r.sql).slice(0, 400) }, oneLine(r.sql).slice(0, 300))),
-              h('span', { className: 'n2s-hist-when' }, h('span', { title: new Date(r.at).toLocaleString() }, rel(r.at)), h('span', { className: 'src' }, `${t(`hist.source.${r.source}`)} · ${r.datasourceName ?? ''}`)),
+              h('span', { className: 'n2s-hist-when' }, h('span', { title: new Date(r.at).toLocaleString(uiLocale()) }, rel(r.at)), h('span', { className: 'src' }, `${sourceLabel(t, r.source)} · ${r.datasourceName ?? ''}`)),
               h('span', { className: 'n2s-hist-num' }, r.rows !== undefined ? fmt(t, 'result.rows', { count: r.rows }) : '—', h('br'), r.elapsedMs !== undefined ? `${r.elapsedMs} ms` : ''),
               h('span', { className: 'n2s-hist-chev' }, Icon.chev(12))),
+            h('button', { type: 'button', className: 'n2s-iconbtn n2s-rowdel', title: t('hist.deleteOne'), 'aria-label': `${t('hist.deleteOne')}: ${r.title || t('hist.untitled')}`, onClick: () => removeRow(r) }, Icon.trash(14))),
             isOpen && h('div', { className: 'n2s-hist-detail' },
               r.error && h('div', { className: `n2s-notice ${r.status === 'blocked' ? 'warn' : 'err'}` }, r.error),
               h('div', { style: { position: 'relative' } },
                 h('pre', { className: 'n2s-code', style: { maxHeight: 220, paddingRight: 44 } }, prettySql(r.sql)),
                 h('button', { type: 'button', className: 'n2s-iconbtn', style: { position: 'absolute', top: 6, right: 6 }, title: t('result.copy'), 'aria-label': t('result.copy'), onClick: () => navigator.clipboard?.writeText(r.sql) }, Icon.copy(14))),
               h('div', { className: 'n2s-row' },
-                h('span', { className: 'n2s-faint n2s-small n2s-grow' }, new Date(r.at).toLocaleString()),
+                h('span', { className: 'n2s-faint n2s-small n2s-grow' }, new Date(r.at).toLocaleString(uiLocale())),
                 r.sessionId && h('button', { type: 'button', className: 'n2s-btn small ghost', onClick: () => onOpenSession(r.sessionId) }, Icon.external(13), t('hist.openSession')),
                 h('button', {
                   type: 'button', className: 'n2s-btn small',
@@ -3454,6 +3593,15 @@ window.__ModuleLoader__.load({
               rerun?.id === r.id && (rerun.busy ? h('div', { className: 'n2s-skel', style: { height: 200 } }) : rerun.error ? h('div', { className: 'n2s-notice err' }, rerun.error) : h('div', { className: 'n2s-card' }, h(ResultView, { result: rerun.result, t, hideSql: true })))))
         })))
     }
+
+    const HIST_SOURCES = ['agent', 'ui', 'dashboard', 'alert', 'eval', 'larkbot', 'telegrambot', 'wecombot', 'dingtalkbot']
+    /** Label of a history `source`; unknown sources (a new bot platform…) fall back to a generic label. */
+    function sourceLabel(t, source) {
+      if (!source) return t('hist.source.unknown')
+      if (HIST_SOURCES.includes(source)) return t(`hist.source.${source}`)
+      const bot = /^(.+)bot$/.exec(source)
+      return bot ? fmt(t, 'hist.source.genericBot', { platform: bot[1] }) : source
+    }
     function OverviewGrid({ t, results, pinned }) {
       const [sending, setSending] = useState(false)
       const ok = results.filter(r => !r.error && r.resultId)
@@ -3531,7 +3679,7 @@ window.__ModuleLoader__.load({
           h('span', { className: 'n2s-tile', 'aria-hidden': true }, svg(16, [h('circle', { key: 1, cx: 8, cy: 8, r: 5.5 }), h('path', { key: 2, d: 'M8 5v3.2l2 1.3' })])),
           h('div', { className: 'n2s-grow', style: { minWidth: 0 } },
             h('div', { className: 'n2s-row', style: { gap: 6 } }, h('span', { className: 'n2s-list2-title' }, r.title), r.channelName && h('span', { className: 'n2s-badge' }, Icon.send(11), r.channelName)),
-            h('div', { className: 'n2s-list2-sub' }, `${t(`rep.period.${r.period}`)} ${r.period === 'weekly' ? r.weekdays.map(d => t(`rep.wd.${d}`)).join(uiLang === 'zh' ? '、' : ', ') + ' ' : ''}${r.time.slice(0, 5)} · ${r.datasourceName} · ${r.scope === 'question' ? r.question : t('rep.scope.dashboard')}`)),
+            h('div', { className: 'n2s-list2-sub' }, `${t(`rep.period.${r.period}`)} ${r.period === 'weekly' ? r.weekdays.map(d => t(`rep.wd.${d}`)).join(listSep()) + ' ' : ''}${r.time.slice(0, 5)} · ${r.datasourceName} · ${r.scope === 'question' ? r.question : t('rep.scope.dashboard')}`)),
           h('div', { className: 'n2s-list2-side' },
             statusDot(r.status),
             h('span', { className: 'n2s-faint n2s-small' }, r.scheduledAt && r.status === 'active' ? `${t('rep.next')} ${new Date(r.scheduledAt).toLocaleString([], { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' })}` : '')),
@@ -3547,25 +3695,32 @@ window.__ModuleLoader__.load({
     }
     function FeedbackForm({ t, onCancel, onSubmit }) {
       const [comment, setComment] = useState('')
+      const [busy, runBusy] = useBusy()
       const reasons = ['fb.reason.wrongTable', 'fb.reason.wrongMetric', 'fb.reason.wrongFilter', 'fb.reason.wrongTime', 'fb.reason.chart']
       return h('div', { className: 'n2s-card', style: { padding: 10 } },
         h('div', { className: 'n2s-small', style: { marginBottom: 6 } }, t('fb.whatWrong')),
-        h('div', { className: 'n2s-chips', style: { marginBottom: 6 } }, reasons.map(r => h('button', { key: r, type: 'button', className: 'n2s-chip', onClick: () => setComment(c => (c ? `${c}；${t(r)}` : t(r))) }, t(r)))),
+        h('div', { className: 'n2s-chips', style: { marginBottom: 6 } }, reasons.map(r => h('button', { key: r, type: 'button', className: 'n2s-chip', onClick: () => setComment(c => (c ? joinClauses([c, t(r)]) : t(r))) }, t(r)))),
         h('textarea', { className: 'n2s-textarea', style: { minHeight: 56 }, value: comment, onChange: e => setComment(e.target.value), placeholder: t('fb.commentPh') }),
         h('div', { className: 'n2s-row', style: { marginTop: 8, justifyContent: 'flex-end' } },
           h('button', { type: 'button', className: 'n2s-btn small ghost', onClick: onCancel }, t('ds.cancel')),
-          h('button', { type: 'button', className: 'n2s-btn small primary', onClick: () => onSubmit(comment.trim()) }, t('fb.submit'))))
+          h('button', { type: 'button', className: 'n2s-btn small primary', disabled: busy, onClick: () => runBusy(() => onSubmit(comment.trim())) }, busy ? h('span', { className: 'n2s-spin' }) : null, t('fb.submit'))))
     }
 
     function FeedbackSection({ t, ds }) {
       const [status, setStatus] = useState('open')
-      const list = useAsync(() => call('listFeedback', { datasourceId: ds?.id, ...(status ? { status } : {}) }), [ds?.id, status])
-      const stats = useAsync(() => call('feedbackStats', { datasourceId: ds?.id }), [ds?.id, list.value])
+      const list = useAsync(() => call('listFeedback', { datasourceId: ds?.id, ...(status ? { status } : {}) }), [ds?.id, status], [ds?.id])
+      const stats = useAsync(() => call('feedbackStats', { datasourceId: ds?.id }), [ds?.id, list.value], [ds?.id])
       const [fixing, setFixing] = useState(null)
       const [error, setError] = useState(null)
-      const resolve = async (payload) => {
+      const [busy, runBusy] = useBusy()
+      const resolve = (payload) => runBusy(async () => {
         setError(null)
         try { await call('resolveFeedback', payload); setFixing(null); list.reload() } catch (e) { setError(e.message) }
+      })
+      const remove = async (f) => {
+        if (!await confirmDialog({ title: t('fb.deleteConfirm'), message: f.question || f.title || '', confirmLabel: t('ds.delete'), danger: true })) return
+        try { await call('deleteFeedback', { id: f.id }) } catch (e) { notifyError(e) }
+        list.reload()
       }
       const st = stats.value
       return h('div', null,
@@ -3587,13 +3742,13 @@ window.__ModuleLoader__.load({
                 h('span', { className: 'n2s-muted n2s-small' }, new Date(f.at).toLocaleString())),
               f.comment && h('div', { className: 'n2s-small', style: { marginTop: 4 } }, f.comment),
               h('pre', { className: 'n2s-code', style: { marginTop: 6 } }, f.correctedSql || f.sql),
-              f.resolution && h('div', { className: 'n2s-muted n2s-small', style: { marginTop: 4 } }, `${t('fb.resolution')}: ${f.resolution}`)),
+              f.resolution && h('div', { className: 'n2s-muted n2s-small', style: { marginTop: 4 } }, `${colon(t('fb.resolution'))}${f.resolution}`)),
             h('div', { style: { display: 'grid', gap: 4 } },
               f.sessionId && h('button', { type: 'button', className: 'n2s-btn small', onClick: () => fbCtx.openSession?.(f.sessionId) }, t('hist.openSession')),
               f.status === 'open' && h('button', { type: 'button', className: 'n2s-btn small primary', onClick: () => setFixing({ id: f.id, sql: f.sql, question: f.question || f.title, resolution: '' }) }, t('fb.fix')),
               f.status === 'open' && h('button', { type: 'button', className: 'n2s-btn small', onClick: () => resolve({ id: f.id, status: 'ignored' }) }, t('fb.ignore')),
               f.rating === 'up' && !f.savedAsExample && h('button', { type: 'button', className: 'n2s-btn small', onClick: () => resolve({ id: f.id, status: 'resolved', saveExample: true }) }, t('kb.saveExample')),
-              h('button', { type: 'button', className: 'n2s-btn small ghost danger', onClick: async () => { await call('deleteFeedback', { id: f.id }); list.reload() } }, t('ds.delete')))),
+              h('button', { type: 'button', className: 'n2s-btn small ghost danger', onClick: () => remove(f) }, t('ds.delete')))),
           fixing?.id === f.id && h('div', { className: 'n2s-ask', style: { marginTop: 10 } },
             h('label', { className: 'n2s-field' }, h('span', null, t('kb.question')), h('input', { className: 'n2s-input', value: fixing.question, onChange: e => setFixing(x => ({ ...x, question: e.target.value })) })),
             h('label', { className: 'n2s-field' }, h('span', null, t('fb.correctedSql')), h('textarea', { className: 'n2s-textarea n2s-mono', style: { minHeight: 120 }, spellCheck: false, value: fixing.sql, onChange: e => setFixing(x => ({ ...x, sql: e.target.value })) })),
@@ -3639,10 +3794,16 @@ window.__ModuleLoader__.load({
             area('maskedColumns', 'policy.maskedColumns', 'users.phone\\n*.email')),
           h('div', null,
             h('div', { className: 'n2s-muted n2s-small', style: { marginBottom: 6 } }, tables.length ? fmt(t, 'policy.preview', { allowed: allowed.length, total: tables.length }) : t('schema.notAnalyzed')),
-            h('div', { className: 'n2s-list', style: { maxHeight: 320 } }, tables.map(tb => {
+            h('div', { className: 'n2s-list', role: 'group', 'aria-label': t('policy.tablesLabel'), style: { maxHeight: 320 } }, tables.map(tb => {
               const ok = allowed.includes(tb)
-              return h('div', { key: tb.name, className: 'n2s-item', style: { cursor: form.mode === 'all' ? 'default' : 'pointer', opacity: ok ? 1 : 0.5 }, onClick: () => form.mode !== 'all' && toggleTable(tb.name) },
-                h('span', null, ok ? '✓' : '✕'), h('span', { className: 'name n2s-mono' }, tb.name), roleBadge(t, tb.role))
+              const editable = form.mode !== 'all'
+              return h('div', {
+                key: tb.name, className: 'n2s-item', style: { cursor: editable ? 'pointer' : 'default', opacity: ok ? 1 : 0.5 },
+                role: 'checkbox', 'aria-checked': ok, 'aria-disabled': editable ? undefined : true, tabIndex: editable ? 0 : -1, 'aria-label': tb.name,
+                onClick: () => editable && toggleTable(tb.name),
+                onKeyDown: (e) => { if (editable && (e.key === ' ' || e.key === 'Enter')) { e.preventDefault(); toggleTable(tb.name) } },
+              },
+                h('span', { 'aria-hidden': true }, ok ? '✓' : '✕'), h('span', { className: 'name n2s-mono' }, tb.name), roleBadge(t, tb.role))
             })),
             form.mode !== 'all' && tables.length > 0 && h('div', { className: 'n2s-muted n2s-small', style: { marginTop: 6 } }, t('policy.clickHint')))),
         error && h('div', { className: 'n2s-notice err', style: { marginTop: 10 } }, error),
@@ -3661,8 +3822,16 @@ window.__ModuleLoader__.load({
         const next = patch === null ? null : { kind: 'time', column: time?.column ?? cand.value?.time[0]?.column ?? 'created_at', range: 'last30d', ...time, ...patch }
         onChange([...(next ? [next] : []), ...ins])
       }
-      const setIn = (column, values) => onChange([...(time ? [time] : []), ...ins.filter(f => f.column !== column), ...(values.length ? [{ kind: 'in', column, values }] : [])])
+      // keep: an emptied free-text field keeps its tag (with no values) instead of disappearing.
+      const setIn = (column, values, keep) => {
+        const others = ins.filter(f => f.column !== column)
+        const at = ins.findIndex(f => f.column === column)
+        const mine = values.length || keep ? [{ kind: 'in', column, values }] : []
+        const next = at < 0 ? [...others, ...mine] : [...others.slice(0, at), ...mine, ...others.slice(at)]
+        onChange([...(time ? [time] : []), ...next])
+      }
       const c = cand.value ?? { time: [], dims: [] }
+      const activeN = filters.filter(f => f.kind !== 'in' || f.values.length > 0).length
       return h('div', { className: 'n2s-filterbar', role: 'group', 'aria-label': t('filter.title') },
         h('span', { className: 'n2s-faint', style: { display: 'inline-flex' } }, svg(14, [h('path', { key: 1, d: 'M2.5 3.5h11l-4.2 5v4l-2.6 1.2V8.5L2.5 3.5z' })])),
         h('select', { className: 'n2s-select', value: time ? time.range : '', onChange: e => setTime(e.target.value ? { range: e.target.value } : null), 'aria-label': t('filter.range') },
@@ -3679,7 +3848,7 @@ window.__ModuleLoader__.load({
             h('span', { className: 'n2s-muted' }, dim?.label ?? f.column),
             dim?.values?.length
               ? h('select', { className: 'n2s-select', 'aria-label': dim.label, value: f.values[0] ?? '', onChange: e => setIn(f.column, e.target.value ? [e.target.value] : []) }, dim.values.map(v => h('option', { key: v, value: v }, v)))
-              : h('input', { className: 'n2s-input', style: { width: 120, height: 26, border: 0 }, value: f.values.join(','), onChange: e => setIn(f.column, e.target.value.split(/[,，]/).map(x => x.trim()).filter(Boolean)) }),
+              : h(FilterValuesInput, { key: f.column, t, label: dim?.label ?? f.column, values: f.values, onCommit: (values) => setIn(f.column, values, true) }),
             h('button', { type: 'button', className: 'n2s-iconbtn', style: { width: 22, height: 22 }, 'aria-label': t('filter.remove'), onClick: () => setIn(f.column, []) }, Icon.close(11)))
         }),
         c.dims.filter(d => !ins.some(f => f.column === d.column)).length > 0 && h(Dropdown, {
@@ -3688,9 +3857,39 @@ window.__ModuleLoader__.load({
           items: c.dims.filter(d => !ins.some(f => f.column === d.column)).map(d => ({ label: d.label === d.column ? d.column : `${d.label}`, hint: d.label === d.column ? '' : d.column, onClick: () => setIn(d.column, d.values?.slice(0, 1) ?? []) })),
         }),
         h('span', { className: 'n2s-grow' }),
-        filters.length > 0 && h('span', { className: 'n2s-faint n2s-small', title: t('filter.hint') }, fmt(t, 'filter.activeN', { count: filters.length })),
+        activeN > 0 && h('span', { className: 'n2s-faint n2s-small', title: t('filter.hint') }, fmt(t, 'filter.activeN', { count: activeN })),
         filters.length > 0 && h('button', { type: 'button', className: 'n2s-btn small ghost', onClick: () => onChange([]) }, t('filter.clear')))
     }
+
+    /**
+     * Free-text values of an "in" filter: typed into a local draft (commas allowed,
+     * clearing does not remove the tag) and committed on Enter, blur or after a pause.
+     */
+    function FilterValuesInput({ t, label, values, onCommit }) {
+      const joined = values.join(', ')
+      const [draft, setDraft] = useState(joined)
+      const committed = useRef(joined)
+      // Adopt outside changes (clear all, another board) when not mid-edit.
+      useEffect(() => { if (joined !== committed.current) { committed.current = joined; setDraft(joined) } }, [joined])
+      const parse = (s) => s.split(/[,，]/).map(x => x.trim()).filter(Boolean)
+      const commit = (s) => {
+        const next = parse(s)
+        if (next.join('\u0000') === parse(committed.current).join('\u0000')) return
+        committed.current = next.join(', ')
+        onCommit(next)
+      }
+      useEffect(() => {
+        if (draft === committed.current) return
+        const id = setTimeout(() => commit(draft), 800)
+        return () => clearTimeout(id)
+      }, [draft])
+      return h('input', {
+        className: 'n2s-input', style: { width: 120, height: 26, border: 0 }, 'aria-label': label, placeholder: t('filter.valuesPh'), value: draft,
+        onChange: e => setDraft(e.target.value),
+        onBlur: () => commit(draft),
+        onKeyDown: (e) => { if (e.key === 'Enter' && !e.nativeEvent?.isComposing) { e.preventDefault(); commit(draft) } },
+      })
+    }
     // ------------------------------------------------------------ IM push
 
     function makeReplyAction(ctx) {
@@ -4072,6 +4271,11 @@ window.__ModuleLoader__.load({
       }, [])
       const [state, setState] = useState(null)
       const ref = useRef(null)
+      useFocusTrap(ref)
+      const closeTimer = useRef(null)
+      useEffect(() => () => clearTimeout(closeTimer.current), [])
+      const busyRef = useRef(false)
+      busyRef.current = Boolean(state?.busy)
       useEffect(() => {
         const def = channels.find(c => c.isDefault) ?? channels[0]
         if (def && !form.channelId) setForm(f => ({ ...f, channelId: def.id }))
@@ -4079,11 +4283,14 @@ window.__ModuleLoader__.load({
       useEffect(() => {
         const prev = document.activeElement
         ref.current?.querySelector('select, textarea, input, button')?.focus()
-        const onKey = (e) => { if (e.key === 'Escape') onClose() }
+        // Escape belongs to a confirm/prompt dialog on top, if any.
+        const onKey = (e) => { if (e.key === 'Escape' && !feedbackStore.get().dialog) onClose() }
         document.addEventListener('keydown', onKey)
         return () => { document.removeEventListener('keydown', onKey); prev?.focus?.() }
       }, [])
       const send = async () => {
+        if (busyRef.current) return
+        busyRef.current = true
         setState({ busy: true })
         try {
           const res = initial.dashboard
@@ -4091,7 +4298,7 @@ window.__ModuleLoader__.load({
             : await call('sendToChannel', { channelId: form.channelId, title: form.title, text: form.text, resultIds, includeSql: form.includeSql, attachFull: form.attachFull, ...(form.chartMode ? { chartMode: form.chartMode } : {}), sessionId: initial.message?.sessionId })
           setState({ ok: `${fmt(t, 'im.sent', { channel: res.channel, images: res.images })}${res.files ? ` · ${t('im.sentFile')}` : ''}`, warn: res.warning })
           refreshChannels()
-          setTimeout(onClose, 1200)
+          closeTimer.current = setTimeout(onClose, 1200)
         } catch (e) {
           setState({ error: e.message })
         }
@@ -4158,6 +4365,7 @@ window.__ModuleLoader__.load({
     /** Modal shell: portal, backdrop, Escape, initial focus and focus restore. */
     function Modal({ label, labelledBy, onClose, width, children, className }) {
       const box = useRef(null)
+      useFocusTrap(box)
       useEffect(() => {
         const prev = document.activeElement
         setTimeout(() => box.current?.querySelector('[data-autofocus], input:not([type=checkbox]), select, button:not(.n2s-modal-x)')?.focus(), 0)
@@ -4183,13 +4391,13 @@ window.__ModuleLoader__.load({
             h('span', { className: 'n2s-faint n2s-small' }, fmt(t, 'ch.kindsN', { n: (x.kinds ?? []).length }))))),
         p && h(React.Fragment, null,
           h('div', { className: 'n2s-flabel', id: 'n2s-wiz-klabel', style: { marginTop: 18 } }, fmt(t, 'ch.pickKind', { platform: platformName(t, p.platform, catalog) })),
-          h('div', { className: 'n2s-kindcards', role: 'list', 'aria-labelledby': 'n2s-wiz-klabel', onKeyDown: (e) => arrowNav(e, false) },
-            (p.kinds ?? []).map(k => h('button', { key: k.id, type: 'button', role: 'listitem', 'data-nav': true, className: 'n2s-kindcard', onClick: () => onPick(p.platform, k.id) },
+          h('ul', { className: 'n2s-kindcards', 'aria-labelledby': 'n2s-wiz-klabel', onKeyDown: (e) => arrowNav(e, false) },
+            (p.kinds ?? []).map(k => h('li', { key: k.id, className: 'n2s-kindcard-li' }, h('button', { type: 'button', 'data-nav': true, className: 'n2s-kindcard', onClick: () => onPick(p.platform, k.id) },
               h('span', { className: 'n2s-kindcard-title' }, L(k.label), h('span', { className: 'n2s-grow' }), Icon.arrow(14)),
               k.description && h('span', { className: 'n2s-kindcard-desc' }, L(k.description)),
               h('span', { className: 'n2s-row', style: { gap: 6, marginTop: 4 } },
                 h(CapabilityChips, { t, caps: k.capabilities, type: k.id }),
-                k.capabilities?.bot && h('span', { className: 'n2s-faint n2s-small' }, t('ch.noPublicUrl'))))))))
+                k.capabilities?.bot && h('span', { className: 'n2s-faint n2s-small' }, t('ch.noPublicUrl')))))))))
     }
 
     // ---------------------------------------------------------------- step 2
@@ -4426,7 +4634,7 @@ window.__ModuleLoader__.load({
 
     // ----------------------------------------------------------------- list
 
-    const shortTime = (ts) => new Date(ts).toLocaleString([], { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+    const shortTime = (ts) => new Date(ts).toLocaleString(uiLocale(), { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' })
 
     function ChannelRow({ t, c, catalog, bots, onEdit, act }) {
       const kind = findKind(catalog, c.type)?.kind
@@ -4490,7 +4698,7 @@ window.__ModuleLoader__.load({
       const channels = useChannels()
       const bots = useBots()
       const { catalog } = useCatalog(t)
-      const deliveries = useAsync(() => call('listDeliveries'), [channels])
+      const deliveries = useAsync(() => call('listDeliveries'), [channels], [])
       const [editing, setEditing] = useState(null)
       // Pick up host upgrades (catalog, new channel shape) whenever the page opens.
       useEffect(() => { loadCatalog(); refreshChannels(); refreshBots() }, [])
@@ -4616,7 +4824,12 @@ window.__ModuleLoader__.load({
       useEffect(() => { if (!saved.loading && saved.value) { setFilters(saved.value); setFiltersFor(boardId) } }, [saved.value, saved.loading, boardId])
       const filtersReady = filters !== null && filtersFor === boardId
       const [sendingDash, setSendingDash] = useState(false)
-      const changeFilters = (next) => { setFilters(next); call('saveDashboardFilters', { filters: next }).catch(() => {}) }
+      // Saves are serialized so an older save can never land after a newer one.
+      const saveChain = useRef(Promise.resolve())
+      const changeFilters = (next) => {
+        setFilters(next)
+        saveChain.current = saveChain.current.then(() => call('saveDashboardFilters', { filters: next })).catch((e) => notifyError(e))
+      }
       const otherBoards = (boards.value?.dashboards ?? []).filter(d => d.id !== boards.value?.current)
       // Per-widget load status → header summary ("updated 10:42 · 2 from cache").
       const [loads, setLoads] = useState({})
@@ -4679,7 +4892,7 @@ window.__ModuleLoader__.load({
               h('div', { className: 'n2s-h2', style: { margin: 0 } }, fmt(t, 'dash.count', { count: widgets.length })),
               (mixed || hiddenByScope > 0 || (ds && sourceIds.some(id => id !== ds.id))) && h('div', { className: 'n2s-seg small', role: 'group', 'aria-label': t('dash.scope') },
                 ['all', 'current'].map(v => h('button', { key: v, type: 'button', 'aria-pressed': scope === v, disabled: v === 'current' && !ds, onClick: () => setScope(v) }, v === 'all' ? t('dash.scopeAll') : fmt(t, 'dash.scopeCurrent', { name: ds?.name ?? '' }))))),
-            showSource && h('div', { className: 'n2s-faint n2s-small' }, fmt(t, 'dash.sources', { list: sourceIds.map(id => dsById.get(id)?.name ?? t('dash.sourceMissingShort')).join(uiLang === 'zh' ? '、' : ', ') })),
+            showSource && h('div', { className: 'n2s-faint n2s-small' }, fmt(t, 'dash.sources', { list: joinList(sourceIds.map(id => dsById.get(id)?.name ?? t('dash.sourceMissingShort'))) })),
             h('div', { className: 'n2s-faint n2s-small', role: 'status', 'aria-live': 'polite' },
               loadingN > 0 ? fmt(t, 'dash.loadingN', { n: loadingN }) : lastAt ? fmt(t, 'dash.lastRefresh', { time: new Date(lastAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }) }) : '',
               cachedN > 0 && loadingN === 0 ? h('span', null, ' · ', h('button', { type: 'button', className: 'n2s-link', title: t('dash.cachedHint'), onClick: () => setTick(x => x + 1) }, fmt(t, 'dash.cachedN', { n: cachedN }))) : null,
@@ -4700,7 +4913,7 @@ window.__ModuleLoader__.load({
         !list.loading && allWidgets.length === 0 && h('div', { className: 'n2s-empty' }, h('h3', null, t('dash.empty')), h('div', null, t('dash.emptyHint')), h('button', { type: 'button', className: 'n2s-btn', onClick: () => fbCtx.navigate?.({ tab: 'ask' }) }, t('dash.goAsk'))),
         widgets.length > 1 && h('div', { className: 'n2s-faint n2s-small n2s-hide-narrow', style: { margin: '-4px 0 8px' } }, t('dash.dragTip')),
         filtersReady && !list.loading && h('div', { className: `n2s-dash${dragId ? ' is-dragging' : ''}`, key: `d:${boardId ?? 'b'}` }, widgets.map((w, i) => h(DashboardWidget, {
-          key: w.id, t, widget: w, tick, first: i === 0, last: i === widgets.length - 1, filters: filters ?? [], filterCount: (filters ?? []).length,
+          key: w.id, t, widget: w, tick, first: i === 0, last: i === widgets.length - 1, filters: filters ?? [], filterCount: (filters ?? []).filter(f => f.kind !== 'in' || f.values.length > 0).length,
           onChanged: () => list.reload(), onLoaded, drag: dragProps(w), source: dsById.get(w.datasourceId), showSource,
           onMove: (delta) => move(w, delta),
           onRemove: async () => { if (!await confirmDialog({ title: fmt(t, 'dash.removeConfirm', { title: w.title }), danger: true })) return; try { await call('unpinWidget', { id: w.id }); notify(t('dash.removed'), 'ok') } catch (e) { notifyError(e) } list.reload() },
@@ -4755,24 +4968,32 @@ window.__ModuleLoader__.load({
           h('span', { className: 'n2s-wf-bar' }, h('span', { className: `n2s-wf-fill ${it.delta > 0 ? 'up' : it.delta < 0 ? 'down' : ''}`, style: { width: `${Math.max(2, Math.abs(it.delta) / max * 100)}%` } })),
           h('span', { className: 'n2s-wf-num' }, `${it.delta >= 0 ? '+' : ''}${formatCompact(it.delta)}`),
           h('span', { className: 'n2s-wf-share n2s-faint' }, it.share === null || Math.abs(it.share) > 3 ? '' : `${Math.round(it.share * 100)}%`)))),
-        why.dimensions.filter(d => !d.attribution).length > 0 && h('div', { className: 'n2s-faint n2s-small' }, `${colon(t('drill.failedDims'))}${why.dimensions.filter(d => !d.attribution).map(d => d.dimension).join(uiLang === 'zh' ? '、' : ', ')}`))
+        why.dimensions.filter(d => !d.attribution).length > 0 && h('div', { className: 'n2s-faint n2s-small' }, `${colon(t('drill.failedDims'))}${why.dimensions.filter(d => !d.attribution).map(d => d.dimension).join(listSep())}`))
     }
 
     // ------------------------------------------------------------ alerts
 
     function AlertForm({ t, initial, datasources, ds, onDone, onCancel }) {
       const channels = useChannels()
-      const [form, setForm] = useState(() => ({ name: '', datasourceId: ds?.id, source: 'metric', metric: '', grain: 'day', sql: '', every: 'hour', at: '09:00', cooldownMin: 60, channelId: channels.find(c => c.isDefault)?.id ?? '', mention: false, enabled: true, ...(initial ?? {}), condition: { type: 'change', direction: 'any', pct: 20, ...(initial?.condition ?? {}) } }))
+      const [form, setForm] = useState(() => ({ name: '', datasourceId: ds?.id, source: 'metric', metric: '', grain: 'day', sql: '', every: 'hour', at: '09:00', cooldownMin: 60, channelId: initial ? '' : (channels.find(c => c.isDefault)?.id ?? ''), mention: false, enabled: true, ...(initial ?? {}), condition: { type: 'change', direction: 'any', pct: 20, ...(initial?.condition ?? {}) } }))
       const k = useAsync(() => (form.datasourceId ? call('getKnowledge', { datasourceId: form.datasourceId }) : null), [form.datasourceId])
       const [error, setError] = useState(null)
       const [test, setTest] = useState(null)
+      const [busy, runBusy] = useBusy()
+      // Channels may load after the form opens: adopt the default once, unless the user already chose.
+      const channelTouched = useRef(Boolean(initial) || Boolean(form.channelId))
+      useEffect(() => {
+        if (channelTouched.current) return
+        const def = channels.find(c => c.isDefault)
+        if (def) { channelTouched.current = true; setForm(f => ({ ...f, channelId: def.id })) }
+      }, [channels])
       const set = (key) => (e) => setForm(f => ({ ...f, [key]: e.target.type === 'checkbox' ? e.target.checked : e.target.value }))
       const setC = (patch) => setForm(f => ({ ...f, condition: { ...f.condition, ...patch } }))
       const metrics = k.value?.metrics ?? []
-      const save = async () => {
+      const save = () => runBusy(async () => {
         setError(null)
         try { await call('saveAlert', { ...form, cooldownMin: Number(form.cooldownMin) }); onDone() } catch (e) { setError(e.message) }
-      }
+      })
       const tryIt = async () => {
         if (test?.busy) return
         setTest({ busy: true })
@@ -4801,24 +5022,24 @@ window.__ModuleLoader__.load({
             h('span', { className: 'n2s-faint n2s-small' }, t(`al.condHint.${c.type}`))),
           h('label', { className: 'n2s-field' }, h('span', null, t('al.every')), h('select', { className: 'n2s-select', value: form.every, onChange: set('every') }, ['15m', 'hour', 'day'].map(v => h('option', { key: v, value: v }, t(`al.every.${v}`))))),
           form.every === 'day' ? h('label', { className: 'n2s-field' }, h('span', null, t('rep.time')), h('input', { className: 'n2s-input', type: 'time', value: form.at, onChange: set('at') })) : h('label', { className: 'n2s-field' }, h('span', null, t('al.cooldown')), h('input', { className: 'n2s-input', type: 'number', value: form.cooldownMin, onChange: set('cooldownMin') })),
-          h('div', { className: 'n2s-field' }, h('label', { htmlFor: 'n2s-al-channel', className: 'n2s-flabel' }, t('rep.push')), h(ChannelPicker, { t, id: 'n2s-al-channel', value: form.channelId ?? '', noneLabel: t('al.noPush'), onChange: (v) => setForm(f => ({ ...f, channelId: v })) })),
+          h('div', { className: 'n2s-field' }, h('label', { htmlFor: 'n2s-al-channel', className: 'n2s-flabel' }, t('rep.push')), h(ChannelPicker, { t, id: 'n2s-al-channel', value: form.channelId ?? '', noneLabel: t('al.noPush'), onChange: (v) => { channelTouched.current = true; setForm(f => ({ ...f, channelId: v })) } })),
           h('label', { className: 'n2s-check', style: { alignSelf: 'end' } }, h('input', { type: 'checkbox', checked: form.mention, onChange: set('mention') }), t('al.mentionAll'))),
-        test && h('div', { className: `n2s-notice ${test.error ? 'err' : test.triggered ? 'warn' : 'ok'}`, style: { marginTop: 10 } }, test.busy ? t('ds.testing') : test.error ?? `${test.triggered ? t('al.wouldFire') : t('al.wouldNotFire')}：${test.message}`),
+        test && h('div', { className: `n2s-notice ${test.error ? 'err' : test.triggered ? 'warn' : 'ok'}`, style: { marginTop: 10 } }, test.busy ? t('ds.testing') : test.error ?? `${colon(test.triggered ? t('al.wouldFire') : t('al.wouldNotFire'))}${test.message}`),
         error && h('div', { className: 'n2s-notice err', style: { marginTop: 10 } }, error),
         h('div', { className: 'n2s-row', style: { marginTop: 12, justifyContent: 'flex-end' } },
           h('button', { type: 'button', className: 'n2s-btn ghost', onClick: onCancel }, t('ds.cancel')),
           h('button', { type: 'button', className: 'n2s-btn', disabled: test?.busy, onClick: tryIt }, t('al.test')),
-          h('button', { type: 'button', className: 'n2s-btn primary', onClick: save }, t('ds.save'))))
+          h('button', { type: 'button', className: 'n2s-btn primary', disabled: busy, onClick: save }, busy ? h('span', { className: 'n2s-spin' }) : null, t('ds.save'))))
     }
 
     function AlertsTab({ t, ds, datasources }) {
       const list = useAsync(() => call('listAlerts'), [])
-      const events = useAsync(() => call('listAlertEvents', {}), [list.value])
+      const events = useAsync(() => call('listAlertEvents', {}), [list.value], [])
       const [editing, setEditing] = useState(null)
       const [notice, setNotice] = useState(null)
       const act = async (fn, ok) => { setNotice(null); try { const r = await fn(); if (ok) setNotice({ ok: true, text: typeof ok === 'function' ? ok(r) : ok }) } catch (e) { setNotice({ ok: false, text: e.message }) } list.reload() }
       const alerts = list.value ?? []
-      const sched = useAsync(() => call('schedulerStatus'), [list.value])
+      const sched = useAsync(() => call('schedulerStatus'), [list.value], [])
       const condText = (a) => a.condition.type === 'threshold' ? `${a.condition.op} ${a.condition.value}` : a.condition.type === 'change' ? `${t(`al.dir.${a.condition.direction ?? 'any'}`)} ≥ ${a.condition.pct}%` : a.condition.type === 'anomaly' ? `Z ≥ ${a.condition.z ?? 3}` : t('al.cond.missing')
       return h('div', null,
         h(SectionHead, { title: t('tab.alerts'), desc: t('al.hint') }, h('button', { type: 'button', className: 'n2s-btn primary', disabled: !ds, onClick: () => setEditing({}) }, '+ ', t('al.add'))),
@@ -4869,7 +5090,7 @@ window.__ModuleLoader__.load({
         const id = setInterval(() => { runs.reload(); set.reload() }, 3000)
         return () => clearInterval(id)
       }, [latest?.status, latest?.id])
-      const detail = useAsync(() => (open ? call('getEvalRun', { id: open }) : null), [open, latest?.done])
+      const detail = useAsync(() => (open ? call('getEvalRun', { id: open }) : null), [open, latest?.done], [open])
       const start = async () => { setError(null); try { await call('runEval', { datasourceId: ds.id, mode }); runs.reload() } catch (e) { setError(e.message) } }
       const cases = set.value ?? []
       return h('div', null,
@@ -4894,7 +5115,7 @@ window.__ModuleLoader__.load({
           c.status !== 'pass' && c.actualSql && h('details', { style: { marginTop: 6 } }, h('summary', { className: 'n2s-small n2s-muted', style: { cursor: 'pointer' } }, t('ev.compareSql')),
             h('div', { className: 'n2s-form', style: { marginTop: 6 } }, h('pre', { className: 'n2s-code' }, prettySql(c.expectedSql)), h('pre', { className: 'n2s-code' }, prettySql(c.actualSql))))))),
         !open && cases.length > 0 && h('div', { className: 'n2s-list2', style: { marginTop: 12 } }, cases.map(c => h('div', { key: c.id, className: 'n2s-list2-row', style: { padding: '8px 16px' } },
-          h('input', { type: 'checkbox', checked: c.enabled, 'aria-label': t('ev.include'), onChange: async (e) => { await call('setEvalCase', { datasourceId: ds.id, id: c.id, enabled: e.target.checked }); set.reload() } }),
+          h('input', { type: 'checkbox', checked: c.enabled, 'aria-label': t('ev.include'), onChange: async (e) => { try { await call('setEvalCase', { datasourceId: ds.id, id: c.id, enabled: e.target.checked }) } catch (err) { notifyError(err) } set.reload() } }),
           h('span', { className: 'n2s-grow n2s-ellipsis' }, c.question),
           c.lastStatus && h('span', { className: `n2s-statusdot ${c.lastStatus === 'pass' ? 'ok' : c.lastStatus === 'fail' ? 'warn' : 'err'}` }, t(`ev.status.${c.lastStatus}`))))))
     }
@@ -4902,16 +5123,16 @@ window.__ModuleLoader__.load({
     // ---------------------------------------------------- schema changes
 
     function SchemaChanges({ t, ds }) {
-      const list = useAsync(() => call('listSchemaChanges', { datasourceId: ds.id }), [ds.id, ds.schemaAnalyzedAt])
+      const list = useAsync(() => call('listSchemaChanges', { datasourceId: ds.id }), [ds.id, ds.schemaAnalyzedAt], [ds.id])
       const open = (list.value ?? []).filter(c => c.status === 'open')
       if (!open.length) return null
       const kindLabel = (k) => t(`sc.${k}`)
       return h('div', { className: 'n2s-notice warn', style: { marginBottom: 14 } },
         open.slice(0, 3).map(c => h('div', { key: c.id, style: { marginBottom: 6 } },
           h('div', { className: 'n2s-row' }, h('strong', null, fmt(t, 'sc.title', { count: c.changes.length, time: new Date(c.at).toLocaleString([], { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' }) })), h('span', { className: 'n2s-grow' }),
-            h('button', { type: 'button', className: 'n2s-btn small', onClick: async () => { await call('ackSchemaChange', { id: c.id }); list.reload() } }, t('sc.ack'))),
-          h('div', { className: 'n2s-small', style: { marginTop: 4 } }, c.changes.slice(0, 8).map(x => `${kindLabel(x.kind)} ${x.table}${x.column ? `.${x.column}` : ''}${x.detail ? `（${x.detail}）` : ''}`).join('；')),
-          c.impacts.length > 0 && h('div', { className: 'n2s-small', style: { marginTop: 4 } }, h('strong', null, `${colon(t('sc.impacts'))}`), c.impacts.slice(0, 8).map(i => `${t(`sc.imp.${i.kind}`)}「${i.name}」`).join(uiLang === 'zh' ? '、' : ', ')))))
+            h('button', { type: 'button', className: 'n2s-btn small', onClick: async () => { try { await call('ackSchemaChange', { id: c.id }) } catch (e) { notifyError(e) } list.reload() } }, t('sc.ack'))),
+          h('div', { className: 'n2s-small', style: { marginTop: 4 } }, joinClauses(c.changes.slice(0, 8).map(x => `${kindLabel(x.kind)} ${x.table}${x.column ? `.${x.column}` : ''}${paren(x.detail)}`))),
+          c.impacts.length > 0 && h('div', { className: 'n2s-small', style: { marginTop: 4 } }, h('strong', null, `${colon(t('sc.impacts'))}`), joinList(c.impacts.slice(0, 8).map(i => `${t(`sc.imp.${i.kind}`)}${uiLang === 'zh' ? '' : ' '}${quoted(i.name)}`))))))
     }
 
     // -------------------------------------------------- knowledge io
@@ -4919,9 +5140,26 @@ window.__ModuleLoader__.load({
     function KnowledgeIO({ t, ds, datasources, onImported }) {
       const fileRef = useRef(null)
       const [state, setState] = useState(null)
+      const box = useRef(null)
+      useFocusTrap(box, Boolean(state))
+      // A dry run belongs to the data source it was computed for.
+      useEffect(() => { setState(null) }, [ds?.id])
+      useEffect(() => {
+        if (!state) return
+        const prev = document.activeElement
+        setTimeout(() => box.current?.querySelector('button.primary, button')?.focus(), 0)
+        const onKey = (e) => { if (e.key === 'Escape' && !feedbackStore.get().dialog && !busyRef.current) setState(null) }
+        document.addEventListener('keydown', onKey)
+        return () => { document.removeEventListener('keydown', onKey); prev?.focus?.() }
+      }, [Boolean(state)])
+      const [busy, runBusy] = useBusy()
+      const busyRef = useRef(false)
+      busyRef.current = busy
       const doExport = async (all) => {
-        const data = await call('exportKnowledge', all ? {} : { datasourceId: ds.id })
-        download(`knowledge-${all ? 'all' : safeName(ds.name)}-${new Date().toISOString().slice(0, 10)}.json`, new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }))
+        try {
+          const data = await call('exportKnowledge', all ? {} : { datasourceId: ds.id })
+          download(`knowledge-${all ? 'all' : safeName(ds.name)}-${new Date().toISOString().slice(0, 10)}.json`, new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }))
+        } catch (e) { notifyError(e) }
       }
       const onFile = async (e) => {
         const f = e.target.files?.[0]
@@ -4931,13 +5169,14 @@ window.__ModuleLoader__.load({
           const text = await f.text()
           const doc = JSON.parse(text)
           const single = doc.datasources?.length === 1
-          const dry = await call('importKnowledge', { data: doc, targetDatasourceId: single ? ds.id : undefined, dryRun: true })
-          setState({ doc, single, dry })
+          const dsId = ds.id
+          const dry = await call('importKnowledge', { data: doc, targetDatasourceId: single ? dsId : undefined, dryRun: true })
+          setState({ doc, single, dry, dsId, dsName: ds.name })
         } catch (err) { setState({ error: err.message }) }
       }
-      const apply = async (mode) => {
-        try { const r = await call('importKnowledge', { data: state.doc, targetDatasourceId: state.single ? ds.id : undefined, mode }); setState({ done: r }); onImported() } catch (err) { setState({ error: err.message }) }
-      }
+      const apply = (mode) => runBusy(async () => {
+        try { const r = await call('importKnowledge', { data: state.doc, targetDatasourceId: state.single ? state.dsId : undefined, mode }); setState({ done: r }); onImported() } catch (err) { setState({ error: err.message }) }
+      })
       return h(React.Fragment, null,
         h('input', { ref: fileRef, type: 'file', accept: 'application/json,.json', style: { display: 'none' }, onChange: onFile }),
         h(Dropdown, { label: t('kb.io'), trigger: { className: 'n2s-btn', content: h(React.Fragment, null, t('kb.io'), Icon.chev(10)) }, items: [
@@ -4947,17 +5186,17 @@ window.__ModuleLoader__.load({
           { label: t('kb.import'), icon: Icon.up(14), onClick: () => fileRef.current?.click() },
         ] }),
         state && ReactDOM.createPortal(h('div', { className: 'n2s-modal-backdrop', onMouseDown: (e) => { if (e.target === e.currentTarget) setState(null) } },
-          h('div', { className: 'n2s-modal', role: 'dialog', 'aria-modal': true },
+          h('div', { ref: box, className: 'n2s-modal', role: 'dialog', 'aria-modal': true, 'aria-label': t('kb.import') },
             h('div', { className: 'n2s-modal-title', style: { marginBottom: 10 } }, t('kb.import')),
             state.error && h('div', { className: 'n2s-notice err' }, state.error),
             state.dry && h(React.Fragment, null,
-              h('div', { className: 'n2s-muted n2s-small', style: { marginBottom: 8 } }, state.single ? fmt(t, 'kb.importInto', { name: ds.name }) : t('kb.importByName')),
+              h('div', { className: 'n2s-muted n2s-small', style: { marginBottom: 8 } }, state.single ? fmt(t, 'kb.importInto', { name: state.dsName }) : t('kb.importByName')),
               h('table', { className: 'n2s-table' }, h('thead', null, h('tr', null, [t('kb.src'), t('kb.target'), t('kb.glossary'), t('kb.metrics'), t('kb.notes'), t('kb.examples'), t('kb.invalid')].map((x, i) => h('th', { key: i }, x)))),
                 h('tbody', null, state.dry.report.map((r, i) => h('tr', { key: i }, h('td', null, r.source), h('td', null, r.target ?? h('span', { style: { color: 'var(--n2s-err)' } }, r.skipped)), h('td', null, r.glossary ?? '—'), h('td', null, r.metrics ?? '—'), h('td', null, r.notes ?? '—'), h('td', null, r.examples ?? '—'), h('td', null, r.invalid ?? '—'))))),
               h('div', { className: 'n2s-row', style: { marginTop: 14, justifyContent: 'flex-end' } },
                 h('button', { type: 'button', className: 'n2s-btn ghost', onClick: () => setState(null) }, t('ds.cancel')),
-                h('button', { type: 'button', className: 'n2s-btn danger', onClick: async () => { if (await confirmDialog({ title: t('kb.replaceConfirm'), danger: true })) apply('replace') } }, t('kb.replace')),
-                h('button', { type: 'button', className: 'n2s-btn primary', onClick: () => apply('merge') }, t('kb.merge')))),
+                h('button', { type: 'button', className: 'n2s-btn danger', disabled: busy, onClick: async () => { if (await confirmDialog({ title: t('kb.replaceConfirm'), danger: true })) apply('replace') } }, t('kb.replace')),
+                h('button', { type: 'button', className: 'n2s-btn primary', disabled: busy, onClick: () => apply('merge') }, busy ? h('span', { className: 'n2s-spin' }) : null, t('kb.merge')))),
             state.done && h(React.Fragment, null, h('div', { className: 'n2s-notice ok' }, t('kb.imported')), h('div', { className: 'n2s-row', style: { marginTop: 12, justifyContent: 'flex-end' } }, h('button', { type: 'button', className: 'n2s-btn primary', onClick: () => setState(null) }, t('ds.close')))))), document.body))
     }
 
@@ -4980,7 +5219,7 @@ window.__ModuleLoader__.load({
       if (s.kind === 'example') return h('pre', { className: 'n2s-code', style: { marginTop: 6, maxHeight: 140 } }, prettySql(it.sql ?? ''))
       if (s.kind === 'metric') return h('div', null,
         h('div', { className: 'n2s-mono n2s-small' }, `${it.expression}${it.table ? ` FROM ${it.table}` : ''}${it.filter ? ` WHERE ${it.filter}` : ''}`),
-        (it.timeColumn || it.dimensions?.length) && h('div', { className: 'n2s-muted n2s-small' }, [it.timeColumn && `${t('kb.timeColumn')}: ${it.timeColumn}`, it.dimensions?.length && `${t('kb.dimensions')}: ${it.dimensions.join(uiLang === 'zh' ? '、' : ', ')}`].filter(Boolean).join(' · ')))
+        (it.timeColumn || it.dimensions?.length) && h('div', { className: 'n2s-muted n2s-small' }, [it.timeColumn && `${t('kb.timeColumn')}: ${it.timeColumn}`, it.dimensions?.length && `${t('kb.dimensions')}: ${joinList(it.dimensions)}`].filter(Boolean).join(' · ')))
       if (s.kind === 'note') return h('div', { className: 'n2s-small' }, it.text)
       return h('div', null, h('div', { className: 'n2s-small' }, it.definition), it.sql && h('code', { className: 'n2s-md-code', style: { display: 'inline-block', marginTop: 4 } }, it.sql))
     }
@@ -4998,14 +5237,17 @@ window.__ModuleLoader__.load({
       const [busy, setBusy] = useState(null)
       const items = list.value?.suggestions ?? []
       const done = () => { list.reload(); onChanged?.() }
+      const inFlight = useRef(new Set())
       const accept = async (s, item) => {
+        if (inFlight.current.has(s.id)) return
+        inFlight.current.add(s.id)
         setBusy(s.id)
         try {
           await call('acceptSuggestion', { datasourceId: ds.id, id: s.id, ...(item ? { item } : {}) })
           setEditing(null)
           notify(t('sg.accepted'), 'ok')
           done()
-        } catch (e) { notifyError(e) } finally { setBusy(null) }
+        } catch (e) { notifyError(e) } finally { inFlight.current.delete(s.id); setBusy(null) }
       }
       const dismiss = async (s) => {
         if (!await confirmDialog({ title: t('sg.dismissConfirm'), confirmLabel: t('sg.dismiss') })) return
@@ -5028,8 +5270,8 @@ window.__ModuleLoader__.load({
           h('div', { className: 'n2s-row', style: { gap: 4, flexWrap: 'nowrap' } },
             h('button', { type: 'button', className: 'n2s-btn small primary', disabled: busy === s.id, onClick: () => setEditing(s) }, t('sg.accept')),
             h(Dropdown, { label: t('sg.acceptDirect'), trigger: { className: 'n2s-iconbtn', content: Icon.chev(10) }, items: [
-              { label: t('sg.acceptEdit'), icon: Icon.edit(14), onClick: () => setEditing(s) },
-              { label: t('sg.acceptDirect'), icon: Icon.check(14), onClick: () => accept(s) },
+              { label: t('sg.acceptEdit'), icon: Icon.edit(14), disabled: busy === s.id, onClick: () => setEditing(s) },
+              { label: t('sg.acceptDirect'), icon: Icon.check(14), disabled: busy === s.id, onClick: () => accept(s) },
             ] }),
             h('button', { type: 'button', className: 'n2s-btn small ghost', disabled: busy === s.id, onClick: () => dismiss(s) }, t('sg.dismiss')))),
         editing?.id === s.id && h('div', { style: { marginTop: 10 } },
@@ -5118,10 +5360,10 @@ window.__ModuleLoader__.load({
         seen.loading && !seen.value ? h('div', { className: 'n2s-skel', style: { height: 34 } }) :
           items.length === 0
             ? h('div', { className: 'n2s-faint n2s-small' }, kind === 'chat' ? t('mb.pick.noChats') : t('mb.pick.noPeople'))
-            : h('div', { className: 'n2s-pickchips', role: 'list' }, items.slice(0, 30).map(x => {
+            : h('div', { className: 'n2s-pickchips', role: 'group', 'aria-label': kind === 'chat' ? t('mb.pick.chats') : t('mb.pick.people') }, items.slice(0, 30).map(x => {
               const taken = x.memberId && !isChosen(x)
               return h('button', {
-                key: `${x.platform}:${x.id}`, type: 'button', role: 'listitem', className: 'n2s-pickchip', 'aria-pressed': isChosen(x), disabled: Boolean(taken),
+                key: `${x.platform}:${x.id}`, type: 'button', className: 'n2s-pickchip', 'aria-pressed': isChosen(x), disabled: Boolean(taken),
                 title: [`${platformName(t, x.platform, catalog)} · ${x.id}`, x.email, x.via ? fmt(t, 'mb.pick.via', { name: x.via }) : '', taken ? fmt(t, 'mb.pick.taken', { name: x.memberName }) : '', x.refused ? t('mb.pick.refused') : ''].filter(Boolean).join('\n'),
                 onClick: () => onPick(x),
               },
@@ -5299,8 +5541,8 @@ window.__ModuleLoader__.load({
               h('span', { className: 'n2s-tile', 'aria-hidden': true }, u.kind === 'chat' ? t('mb.chatShort') : (u.name || '?').slice(0, 1)),
               h('div', { className: 'n2s-grow', style: { minWidth: 0 } },
                 h('div', { className: 'n2s-row', style: { gap: 6 } }, h('span', { className: 'n2s-list2-title' }, u.name), h('span', { className: 'n2s-badge' }, t(`mb.role.${u.role}`)), u.disabled && h('span', { className: 'n2s-badge err' }, t('mb.disabled'))),
-                h('div', { className: 'n2s-row', style: { gap: 6, marginTop: 4 } }, h(IdentityChips, { t, u, catalog }), h('span', { className: 'n2s-muted n2s-small' }, u.datasourceIds === null ? t('mb.allDs') : (u.datasourceNames ?? []).join(uiLang === 'zh' ? '、' : ', ') || t('mb.noDs'))),
-                (u.rowRules ?? []).length > 0 && h('div', { className: 'n2s-list2-sub' }, `${colon(t('mb.rowRules'))}${u.rowRules.map(r => `${r.column} ∈ {${r.values.join(', ')}}`).join('；')}`)),
+                h('div', { className: 'n2s-row', style: { gap: 6, marginTop: 4 } }, h(IdentityChips, { t, u, catalog }), h('span', { className: 'n2s-muted n2s-small' }, u.datasourceIds === null ? t('mb.allDs') : (u.datasourceNames ?? []).join(listSep()) || t('mb.noDs'))),
+                (u.rowRules ?? []).length > 0 && h('div', { className: 'n2s-list2-sub' }, `${colon(t('mb.rowRules'))}${joinClauses(u.rowRules.map(r => `${r.column} ∈ {${r.values.join(', ')}}`))}`)),
               h('div', { className: 'n2s-list2-side' }, h('span', { className: 'n2s-small' }, us ? fmt(t, 'mb.queries', { n: us.queries }) : t('mb.noUsage')), us?.lastAt && h('span', { className: 'n2s-faint n2s-small' }, new Date(us.lastAt).toLocaleDateString())),
               h(Dropdown, { label: fmt(t, 'ch.actionsFor', { name: u.name }), trigger: { content: Icon.more() }, items: [
                 { label: t('ds.edit'), icon: Icon.edit(14), onClick: () => setEditing(u) },
@@ -5318,7 +5560,7 @@ window.__ModuleLoader__.load({
     // ---------------------------------------------------- dashboards bar
 
     function DashboardSwitcher({ t, value, onChange }) {
-      const list = useAsync(() => call('listDashboards'), [value?.id])
+      const list = useAsync(() => call('listDashboards'), [value?.id], [])
       const v = list.value
       if (!v) return null
       const cur = v.dashboards.find(d => d.id === v.current)
@@ -5327,7 +5569,7 @@ window.__ModuleLoader__.load({
         v.dashboards.map(d => h('button', { key: d.id, type: 'button', role: 'tab', 'aria-selected': d.id === v.current, onClick: () => act(() => call('selectDashboard', { id: d.id })) }, d.name, h('span', { className: 'count' }, d.widgets))),
         h(Dropdown, { label: t('dash.manage'), trigger: { className: 'n2s-btn small ghost', content: h(React.Fragment, null, '+', Icon.chev(10)) }, items: [
           { label: t('dash.new'), icon: Icon.chart(14), onClick: async () => { const name = await promptDialog({ title: t('dash.newName') }); if (name) act(() => call('saveDashboard', { name })) } },
-          { label: t('dash.duplicate'), icon: Icon.copy(14), onClick: async () => { const name = await promptDialog({ title: t('dash.newName'), value: `${cur?.name ?? ''} 副本` }); if (name) act(() => call('saveDashboard', { name, copyFrom: v.current })) } },
+          { label: t('dash.duplicate'), icon: Icon.copy(14), onClick: async () => { const name = await promptDialog({ title: t('dash.newName'), value: fmt(t, 'dash.copyName', { name: cur?.name ?? '' }) }); if (name) act(() => call('saveDashboard', { name, copyFrom: v.current })) } },
           { label: t('dash.renameBoard'), icon: Icon.edit(14), onClick: async () => { const name = await promptDialog({ title: t('dash.renameBoard'), value: cur?.name }); if (name) act(() => call('saveDashboard', { id: v.current, name })) } },
           { divider: true },
           v.dashboards.length > 1 && { label: t('dash.deleteBoard'), icon: Icon.trash(14), danger: true, onClick: async () => { if (await confirmDialog({ title: fmt(t, 'dash.deleteBoardConfirm', { name: cur?.name }), danger: true })) act(() => call('deleteDashboard', { id: v.current })) } },
@@ -5339,7 +5581,7 @@ window.__ModuleLoader__.load({
       const v = st.value
       return h('div', { className: 'n2s-row' },
         h('span', { className: 'n2s-small n2s-muted' }, v ? fmt(t, 'settings.cacheStatsText', { results: v.results, mb: (v.bytes / 1048576).toFixed(1), cache: v.cacheEntries }) : '…'),
-        h('button', { type: 'button', className: 'n2s-btn small ghost', onClick: async () => { await call('clearCache'); st.reload() } }, t('settings.clearCache')))
+        h('button', { type: 'button', className: 'n2s-btn small ghost', onClick: async () => { try { await call('clearCache') } catch (e) { notifyError(e) } st.reload() } }, t('settings.clearCache')))
     }
 
     function ChannelSelect({ t, value, onChange }) {
@@ -5347,8 +5589,25 @@ window.__ModuleLoader__.load({
     }
 
     // Questions started from the page bind their new session to the chosen
-    // data source as soon as the session appears in the composer.
+    // data source as soon as the session appears in the composer. Only the
+    // session our own startSession created may claim an ask: the one whose id
+    // startSession returned (when the host returns it), otherwise a session the
+    // composer had not seen before the ask was made, within PENDING_ASK_MS.
     const pendingAsks = []
+    const seenSessions = new Set()
+    const PENDING_ASK_MS = 60000
+    function addPendingAsk(datasourceId, question) {
+      const pending = { datasourceId, question, at: Date.now(), seen: new Set(seenSessions), sessionId: null }
+      pendingAsks.push(pending)
+      setTimeout(() => { const i = pendingAsks.indexOf(pending); if (i >= 0) pendingAsks.splice(i, 1) }, PENDING_ASK_MS)
+      return pending
+    }
+    /** Remove and return the pending ask that belongs to this session, if any. */
+    function claimPendingAsk(sessionId) {
+      const now = Date.now()
+      const i = pendingAsks.findIndex(p => now - p.at < PENDING_ASK_MS && (p.sessionId ? p.sessionId === sessionId : !p.seen.has(sessionId)))
+      return i >= 0 ? pendingAsks.splice(i, 1)[0] : null
+    }
 
     // ------------------------------------------------ composer selector
 
@@ -5365,8 +5624,15 @@ window.__ModuleLoader__.load({
           if (!sessionId) return
           let cancelled = false
           ;(async () => {
-            const pending = pendingAsks.shift()
-            if (pending) await call('bindSession', { sessionId, datasourceId: pending.datasourceId }).catch(() => {})
+            const fresh = pendingAsks.length > 0 && !seenSessions.has(sessionId)
+            seenSessions.add(sessionId)
+            if (fresh) {
+              // A session already bound to a data source, or running another preset, is not ours.
+              const info = await call('sessionInfo', { sessionId }).catch(() => null)
+              const candidate = info && !info.boundDatasourceId && (info.preset === PRESET || info.preset === null || info.preset === undefined)
+              const pending = candidate ? claimPendingAsk(sessionId) : null
+              if (pending) await call('bindSession', { sessionId, datasourceId: pending.datasourceId }).catch(() => {})
+            }
             if (!cancelled) await loadSessionInfo(sessionId)
           })()
           if (!store.get().loaded) refreshDatasources()
@@ -5518,7 +5784,7 @@ window.__ModuleLoader__.load({
     }
 
     function AdminArea({ t, ctx, section, sub, onNavigate, ds, datasources }) {
-      const counts = useAsync(() => Promise.all([call('listAlerts').catch(() => []), call('listReports').catch(() => []), call('listChannels').catch(() => []), call('listUsers').catch(() => [])]), [section])
+      const counts = useAsync(() => Promise.all([call('listAlerts').catch(() => []), call('listReports').catch(() => []), call('listChannels').catch(() => []), call('listUsers').catch(() => [])]), [section], [])
       const [alerts, reports, channels, users] = counts.value ?? []
       const badge = { sources: datasources.length, members: users?.length, automation: (alerts?.length ?? 0) + (reports?.length ?? 0), push: channels?.length }
       const firing = (alerts ?? []).filter(a => a.state === 'firing').length
@@ -5550,32 +5816,49 @@ window.__ModuleLoader__.load({
         const { datasources, loaded, error } = useStore(s => s)
         const [nav, setNavState] = useState(loadNav)
         const setNav = useCallback((patch) => setNavState(n => { const next = { ...n, ...patch }; try { localStorage.setItem(NAV_KEY, JSON.stringify(next)) } catch {} return next }), [])
+        // Leaving 管理 → 设置 with unsaved settings asks first (SettingsPage sets fbCtx.settingsDirty).
+        const navRef = useRef(nav)
+        navRef.current = nav
+        const guardedNav = useCallback(async (patch) => {
+          const cur = navRef.current
+          const next = { ...cur, ...patch }
+          const inSettings = cur.tab === 'admin' && cur.section === 'settings'
+          const leaving = inSettings && (next.tab !== 'admin' || next.section !== 'settings')
+          if (leaving && fbCtx.settingsDirty) {
+            const ok = await confirmDialog({ title: t('set.leaveTitle'), message: t('set.leaveMsg'), confirmLabel: t('set.leaveOk'), danger: true })
+            if (!ok) return false
+            fbCtx.settingsDirty = false
+          }
+          setNav(patch)
+          return true
+        }, [])
         const [selectedId, setSelectedId] = useState(null)
         useEffect(() => { refreshDatasources() }, [])
         const ds = datasources.find(d => d.id === selectedId) ?? datasources.find(d => d.current) ?? datasources[0]
         const needsSource = loaded && datasources.length === 0 && ['schema', 'knowledge'].includes(nav.tab)
         const ask = useCallback((question) => {
           if (!ds) return
-          const pending = { datasourceId: ds.id, question }
-          pendingAsks.push(pending)
-          setTimeout(() => { const i = pendingAsks.indexOf(pending); if (i >= 0) pendingAsks.splice(i, 1) }, 60000)
+          const pending = addPendingAsk(ds.id, question)
           try {
-            ctx.uiWorkspace.startSession(undefined, { agentPreset: PRESET, prompt: question, whenDraftExists: 'replace' })
+            const r = ctx.uiWorkspace.startSession(undefined, { agentPreset: PRESET, prompt: question, whenDraftExists: 'replace' })
+            // Hosts that return the new session id (directly or as a promise) pin the ask to it.
+            const adopt = (id) => { if (typeof id === 'string' && id) pending.sessionId = id }
+            if (r && typeof r.then === 'function') r.then(adopt, () => {}); else adopt(r)
           } catch (e) {
+            const i = pendingAsks.indexOf(pending); if (i >= 0) pendingAsks.splice(i, 1)
             notifyError(e)
           }
         }, [ds?.id])
         fbCtx.openSession = (id) => ctx.uiWorkspace.openSession(id)
-        fbCtx.navigate = (patch) => setNav(patch)
+        fbCtx.navigate = (patch) => { guardedNav(patch) }
         const tabs = [...PRIMARY_TABS, 'admin']
         const onTabKey = (e) => {
           if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return
           const i = tabs.indexOf(nav.tab)
           const next = tabs[(i + (e.key === 'ArrowRight' ? 1 : tabs.length - 1)) % tabs.length]
-          setNav({ tab: next })
-          setTimeout(() => document.getElementById(`n2s-tab-${next}`)?.focus(), 0)
+          guardedNav({ tab: next }).then(ok => { if (ok) setTimeout(() => document.getElementById(`n2s-tab-${next}`)?.focus(), 0) })
         }
-        const tabBtn = (k) => h('button', { key: k, type: 'button', role: 'tab', id: `n2s-tab-${k}`, className: `n2s-tab${k === 'admin' ? ' admin' : ''}`, tabIndex: nav.tab === k ? 0 : -1, 'aria-selected': nav.tab === k, onClick: () => setNav({ tab: k }) },
+        const tabBtn = (k) => h('button', { key: k, type: 'button', role: 'tab', id: `n2s-tab-${k}`, className: `n2s-tab${k === 'admin' ? ' admin' : ''}`, tabIndex: nav.tab === k ? 0 : -1, 'aria-selected': nav.tab === k, onClick: () => { guardedNav({ tab: k }) } },
           k === 'admin' && AdminIcons.settings(), t(`tab.${k}`))
         const status = !ds ? 'off' : ds.lastTestOk === false ? 'err' : ''
         const showPicker = datasources.length > 0 && nav.tab !== 'admin'
@@ -5590,20 +5873,19 @@ window.__ModuleLoader__.load({
                   h('span', { className: 'name' }, ds?.name ?? '—'),
                   ds && h('span', { className: 'meta' }, typeLabel(t, ds.type)),
                   Icon.chev(10),
-                  h('select', { 'aria-label': t('ds.select'), value: ds?.id ?? '', onChange: async (e) => { const id = e.target.value; setSelectedId(id); await call('setCurrent', { id }).catch(() => {}); refreshDatasources() } },
+                  h('select', { 'aria-label': t('ds.select'), value: ds?.id ?? '', onChange: async (e) => { const id = e.target.value; setSelectedId(id); try { await call('setCurrent', { id }) } catch (err) { notifyError(err) } refreshDatasources() } },
                     datasources.map(d => h('option', { key: d.id, value: d.id }, `${d.name} · ${typeLabel(t, d.type)}${d.type === 'sqlite' ? '' : ` · ${d.database}`}`))))),
               h('div', { className: 'n2s-tabs', role: 'tablist', 'aria-label': t('page.title'), onKeyDown: onTabKey }, PRIMARY_TABS.map(tabBtn), h('span', { className: 'n2s-grow' }), tabBtn('admin'))),
             h('div', { className: 'n2s-body', role: 'tabpanel', 'aria-labelledby': `n2s-tab-${nav.tab}` },
               error && h('div', { className: 'n2s-notice err', style: { marginBottom: 12 } }, error),
               !loaded ? h('div', { style: { display: 'grid', gap: 12 } }, h('div', { className: 'n2s-skel', style: { height: 120 } }), h('div', { className: 'n2s-skel', style: { height: 60 } })) :
-                needsSource ? h(EmptySourceHint, { t, onGo: () => setNav({ tab: 'admin', section: 'sources' }) }) :
-                nav.tab === 'ask' ? h(AskTab, { t, ds, datasources, onAsk: ask, presetReady: true, onNavigate: setNav }) :
-                nav.tab === 'schema' ? h(SchemaTab, { t, ds, onAskTable: (tb) => ask(fmt(t, 'ask.tablePrompt', { name: tb.name, comment: tb.comment ? `（${tb.comment}）` : '' })) }) :
-                nav.tab === 'knowledge' ? h(KnowledgeTab, { t, ds }) :
+                needsSource ? h(EmptySourceHint, { t, onGo: () => guardedNav({ tab: 'admin', section: 'sources' }) }) :
+                nav.tab === 'ask' ? h(AskTab, { t, ds, datasources, onAsk: ask, presetReady: true, onNavigate: guardedNav }) :
+                nav.tab === 'schema' ? h(SchemaTab, { t, ds, onAskTable: (tb) => ask(fmt(t, 'ask.tablePrompt', { name: tb.name, comment: paren(tb.comment) })) }) :
+                nav.tab === 'knowledge' ? h(KnowledgeTab, { key: `kb:${ds?.id ?? ''}`, t, ds }) :
                 nav.tab === 'history' ? h(HistoryTab, { t, datasources, onOpenSession: (id) => ctx.uiWorkspace.openSession(id) }) :
                 nav.tab === 'dashboard' ? h(DashboardTab, { t, ds, datasources }) :
-                h(AdminArea, { t, ctx, section: ADMIN_SECTIONS.includes(nav.section) ? nav.section : 'sources', sub: nav.sub, onNavigate: setNav, ds, datasources }))),
-            h(FeedbackLayer, { t })))
+                h(AdminArea, { t, ctx, section: ADMIN_SECTIONS.includes(nav.section) ? nav.section : 'sources', sub: nav.sub, onNavigate: guardedNav, ds, datasources })))))
       }
     }
 
@@ -5705,7 +5987,7 @@ window.__ModuleLoader__.load({
           form.resultToModel === 'rows' && h(SettingRow, { label: t('settings.modelRows'), hint: t('set.h.modelRows'), changed: changed('modelRows'), htmlFor: 'set-modelRows' }, num('modelRows', { min: 0, max: 500 })),
           h(SettingRow, { label: t('set.l.mask'), hint: t('set.h.maskSensitive'), changed: changed('maskSensitive') }, h('label', { className: 'n2s-switch' }, h('input', { type: 'checkbox', role: 'switch', checked: Boolean(form.maskSensitive), onChange: e => set('maskSensitive', e.target.checked) }), h('span', null, form.maskSensitive ? t('set.on') : t('set.off')))),
           h('div', { className: 'n2s-setnote' }, overrides.length
-            ? h(React.Fragment, null, t('set.overrides'), ' ', overrides.map((d, i) => h(React.Fragment, { key: d.id }, i > 0 && '、', h('button', { type: 'button', className: 'n2s-link', onClick: () => onNavigate({ section: 'sources' }) }, d.name))))
+            ? h(React.Fragment, null, t('set.overrides'), ' ', overrides.map((d, i) => h(React.Fragment, { key: d.id }, i > 0 && listSep(), h('button', { type: 'button', className: 'n2s-link', onClick: () => onNavigate({ section: 'sources' }) }, d.name))))
             : t('set.noOverrides'))) :
         group === 'query' ? h(React.Fragment, null,
           h(SettingRow, { label: t('set.l.maxRows'), hint: t('set.h.maxRows'), changed: changed('maxRows'), htmlFor: 'set-maxRows' }, num('maxRows', { min: 1, max: 100000 })),
@@ -5809,6 +6091,17 @@ window.__ModuleLoader__.load({
       const retention = form.retention ?? defaults.retention ?? {}
       const fileRef = useRef(null)
       const [importState, setImportState] = useState(null)
+      const importBox = useRef(null)
+      useFocusTrap(importBox, Boolean(importState))
+      const [importing, runImport] = useBusy()
+      useEffect(() => {
+        if (!importState) return
+        const prev = document.activeElement
+        setTimeout(() => importBox.current?.querySelector('button.primary')?.focus(), 0)
+        const onKey = (e) => { if (e.key === 'Escape' && !feedbackStore.get().dialog) setImportState(null) }
+        document.addEventListener('keydown', onKey)
+        return () => { document.removeEventListener('keydown', onKey); prev?.focus?.() }
+      }, [Boolean(importState)])
       const exportAll = async () => {
         try {
           const doc = await call('exportConfig')
@@ -5826,7 +6119,7 @@ window.__ModuleLoader__.load({
           setImportState({ doc, dry })
         } catch (err) { notifyError(err) }
       }
-      const doImport = async (mode) => {
+      const doImport = (mode) => runImport(async () => {
         if (mode === 'replace' && !await confirmDialog({ title: t('set.importReplaceConfirm'), message: t('set.importReplaceMsg'), danger: true })) return
         try {
           const r = await call('importConfig', { data: importState.doc, mode })
@@ -5836,7 +6129,7 @@ window.__ModuleLoader__.load({
           const needs = (r.report?.datasources?.needsSecret ?? r.needsSecret ?? []).length
           notify(needs ? fmt(t, 'set.importedNeedsSecret', { n: needs }) : t('set.imported'), 'ok', 6000)
         } catch (err) { notifyError(err) }
-      }
+      })
       const purge = async (kind) => {
         if (!await confirmDialog({ title: fmt(t, 'set.purgeConfirm', { kind: t(`set.rk.${kind}`) }), danger: true })) return
         try { await call('purgeRecords', { kind }); st.reload(); notify(t('set.purged'), 'ok') } catch (e) { notifyError(e) }
@@ -5862,17 +6155,17 @@ window.__ModuleLoader__.load({
           h('button', { type: 'button', className: 'n2s-btn', onClick: () => fileRef.current?.click() }, Icon.up(13), t('set.import')),
           h('input', { ref: fileRef, type: 'file', accept: 'application/json,.json', style: { display: 'none' }, onChange: onFile })),
         importState && ReactDOM.createPortal(h('div', { className: 'n2s-modal-backdrop', onMouseDown: (e) => { if (e.target === e.currentTarget) setImportState(null) } },
-          h('div', { className: 'n2s-modal', role: 'dialog', 'aria-modal': true, 'aria-label': t('set.import'), onKeyDown: (e) => { if (e.key === 'Escape') setImportState(null) } },
+          h('div', { ref: importBox, className: 'n2s-modal', role: 'dialog', 'aria-modal': true, 'aria-label': t('set.import') },
             h('div', { className: 'n2s-modal-title', style: { marginBottom: 10 } }, t('set.import')),
             h('div', { className: 'n2s-muted n2s-small', style: { marginBottom: 10 } }, fmt(t, 'set.importFrom', { time: importState.doc.exportedAt ? new Date(importState.doc.exportedAt).toLocaleString() : '?' })),
             h('table', { className: 'n2s-table' }, h('thead', null, h('tr', null, [t('set.section'), t('set.toAdd'), t('set.toUpdate'), t('set.note')].map((x, i) => h('th', { key: i }, x)))),
               h('tbody', null, Object.entries(importState.dry?.report ?? {}).map(([k, r]) => h('tr', { key: k },
                 h('td', null, t(`set.sec.${k}`)), h('td', null, r.add ?? r.added ?? 0), h('td', null, r.update ?? r.updated ?? 0),
-                h('td', { className: 'n2s-muted n2s-small', style: { whiteSpace: 'normal' } }, [r.needsSecret?.length ? fmt(t, 'set.needsSecret', { names: r.needsSecret.join(uiLang === 'zh' ? '、' : ', ') }) : '', r.paused ? t('set.reportsPaused') : '', r.skipped ? fmt(t, 'set.skipped', { n: r.skipped }) : ''].filter(Boolean).join('；')))))),
+                h('td', { className: 'n2s-muted n2s-small', style: { whiteSpace: 'normal' } }, joinClauses([r.needsSecret?.length ? fmt(t, 'set.needsSecret', { names: joinList(r.needsSecret) }) : '', r.paused ? t('set.reportsPaused') : '', r.skipped ? fmt(t, 'set.skipped', { n: r.skipped }) : ''])))))),
             h('div', { className: 'n2s-row', style: { marginTop: 14, justifyContent: 'flex-end' } },
               h('button', { type: 'button', className: 'n2s-btn ghost', onClick: () => setImportState(null) }, t('ds.cancel')),
-              h('button', { type: 'button', className: 'n2s-btn danger', onClick: () => doImport('replace') }, t('kb.replace')),
-              h('button', { type: 'button', className: 'n2s-btn primary', onClick: () => doImport('merge') }, t('kb.merge'))))), document.body))
+              h('button', { type: 'button', className: 'n2s-btn danger', disabled: importing, onClick: () => doImport('replace') }, t('kb.replace')),
+              h('button', { type: 'button', className: 'n2s-btn primary', disabled: importing, onClick: () => doImport('merge') }, importing ? h('span', { className: 'n2s-spin' }) : null, t('kb.merge'))))), document.body))
     }
 
     function AboutSection({ t }) {
@@ -5901,6 +6194,9 @@ window.__ModuleLoader__.load({
         }, 'nl2sql: styles')
         ctx.effect(() => ctx.locale.register(NS, { zh, en, 'zh-CN': zh }), 'nl2sql: locale')
         const t = ctx.locale.bind(NS)
+        // One feedback layer (toasts + confirm / prompt dialogs) for the page and every
+        // tool view or reply action in conversations, mounted once outside the page.
+        ctx.effect(() => mountFeedbackLayer(ctx), 'nl2sql: feedback layer')
         const Page = makePage(ctx)
         const PanelIcon = ({ size }) => Icon.db(size ?? 16)
         ctx.slots.inject('main', () => ctx.slots.register({ name: 'main', key: PANEL_ID, locale: NS }, Page))