@hedeqiang/dsh-nl2sql 0.13.1 → 0.14.1

package/lib/client.js

@@ -17,6 +17,15 @@ window.__ModuleLoader__.load({
     // ------------------------------------------------------------ locale
 
     const zh = {
+      'mcp.client.claudeCode': 'Claude Code', 'mcp.client.cline': 'Cline', 'mcp.client.windsurf': 'Windsurf', 'mcp.client.codex': 'Codex CLI', 'mcp.client.gemini': 'Gemini CLI', 'mcp.client.zed': 'Zed', 'mcp.client.continue': 'Continue',
+      'mcp.where.claudeCode': '在终端运行（HTTP 直连；下方为 stdio 桥接写法）。', 'mcp.where.cline': '写入 cline_mcp_settings.json（Cline 面板 → MCP Servers → Configure）。', 'mcp.where.windsurf': '写入 Windsurf 的 mcp_config.json（Cascade → MCP → 打开配置文件）。', 'mcp.where.codex': '写入 ~/.codex/config.toml（或项目的 .codex/config.toml）。', 'mcp.where.gemini': '写入 ~/.gemini/settings.json 或项目的 .gemini/settings.json。', 'mcp.where.zed': '写入 Zed 的 settings.json。', 'mcp.where.continue': '保存为工作区 .continue/mcpServers/nl2sql.yaml。',
+      'mcp.test': '测试连接', 'mcp.testOk': '连接正常：发现 {n} 个工具。', 'mcp.testFail': '连接失败：{error}', 'mcp.testFailSteps': '连接测试未通过：',
+      'mcp.expiry': '过期时间（可选）', 'mcp.noExpiry': '不过期', 'mcp.expiryHint': '到期当天结束后令牌失效（401）。', 'mcp.toolsAllow': '允许的工具', 'mcp.allTools': '全部工具', 'mcp.rateLimit': '频率限制（可选）', 'mcp.unlimited': '不限', 'mcp.perMinute': '次 / 分钟，超过返回 429',
+      'mcp.err.tools': '请至少勾选一个工具', 'mcp.edit': '编辑', 'mcp.editTitle': '编辑令牌「{name}」', 'mcp.save': '保存', 'mcp.saved': '已保存',
+      'mcp.rotate': '轮换密钥', 'mcp.rotateConfirm': '轮换令牌「{name}」的密钥？', 'mcp.rotateHint': '旧密钥立即失效，新密钥只显示一次；权限和限制保持不变。', 'mcp.rotated': '已生成新密钥',
+      'mcp.col.limits': '限制', 'mcp.noLimits': '无', 'mcp.expired': '已过期', 'mcp.expiresOn': '{date} 到期', 'mcp.toolsN': '{n} 个工具', 'mcp.rateN': '{n} 次/分',
+      'mcp.callLog': '调用记录', 'mcp.log.token': '令牌', 'mcp.log.allTokens': '全部令牌', 'mcp.log.status': '状态', 'mcp.log.all': '全部', 'mcp.log.filter': '按工具或数据源筛选', 'mcp.log.refresh': '刷新', 'mcp.log.empty': '还没有调用记录', 'mcp.log.time': '时间', 'mcp.log.tool': '工具 / 方法', 'mcp.log.datasource': '数据源', 'mcp.log.ms': '耗时 ms', 'mcp.log.rows': '行数',
+      'hist.status.cancelled': '已取消', 'mcp.log.status.ok': '成功', 'mcp.log.status.error': '失败', 'mcp.log.status.cancelled': '已取消', 'mcp.log.status.rate-limited': '限流',
       'admin.group.insight': "洞察与自动化",
       'admin.group.connect': "集成",
       "fq.title": "数据新鲜度",
@@ -1169,6 +1178,15 @@ window.__ModuleLoader__.load({
       'policy.tablesLabel': '可访问的表',
     }
     const en = {
+      'mcp.client.claudeCode': 'Claude Code', 'mcp.client.cline': 'Cline', 'mcp.client.windsurf': 'Windsurf', 'mcp.client.codex': 'Codex CLI', 'mcp.client.gemini': 'Gemini CLI', 'mcp.client.zed': 'Zed', 'mcp.client.continue': 'Continue',
+      'mcp.where.claudeCode': 'Run in a terminal (HTTP; the stdio bridge variant is below).', 'mcp.where.cline': 'Add to cline_mcp_settings.json (Cline panel → MCP Servers → Configure).', 'mcp.where.windsurf': 'Add to Windsurf\'s mcp_config.json (Cascade → MCP → open config file).', 'mcp.where.codex': 'Add to ~/.codex/config.toml (or the project\'s .codex/config.toml).', 'mcp.where.gemini': 'Add to ~/.gemini/settings.json or the project\'s .gemini/settings.json.', 'mcp.where.zed': 'Add to Zed\'s settings.json.', 'mcp.where.continue': 'Save as .continue/mcpServers/nl2sql.yaml in the workspace.',
+      'mcp.test': 'Test connection', 'mcp.testOk': 'Connected: {n} tools discovered.', 'mcp.testFail': 'Connection failed: {error}', 'mcp.testFailSteps': 'Connection test failed:',
+      'mcp.expiry': 'Expires (optional)', 'mcp.noExpiry': 'Never', 'mcp.expiryHint': 'The token stops working (401) after the end of that day.', 'mcp.toolsAllow': 'Allowed tools', 'mcp.allTools': 'All tools', 'mcp.rateLimit': 'Rate limit (optional)', 'mcp.unlimited': 'unlimited', 'mcp.perMinute': 'requests / minute; above it → 429',
+      'mcp.err.tools': 'Select at least one tool', 'mcp.edit': 'Edit', 'mcp.editTitle': 'Edit token "{name}"', 'mcp.save': 'Save', 'mcp.saved': 'Saved',
+      'mcp.rotate': 'Rotate secret', 'mcp.rotateConfirm': 'Rotate the secret of token "{name}"?', 'mcp.rotateHint': 'The old secret stops working at once; the new one is shown once. Scope and limits stay the same.', 'mcp.rotated': 'New secret generated',
+      'mcp.col.limits': 'Limits', 'mcp.noLimits': 'none', 'mcp.expired': 'Expired', 'mcp.expiresOn': 'expires {date}', 'mcp.toolsN': '{n} tools', 'mcp.rateN': '{n}/min',
+      'mcp.callLog': 'Call log', 'mcp.log.token': 'Token', 'mcp.log.allTokens': 'All tokens', 'mcp.log.status': 'Status', 'mcp.log.all': 'All', 'mcp.log.filter': 'Filter by tool or data source', 'mcp.log.refresh': 'Refresh', 'mcp.log.empty': 'No calls yet', 'mcp.log.time': 'Time', 'mcp.log.tool': 'Tool / method', 'mcp.log.datasource': 'Data source', 'mcp.log.ms': 'ms', 'mcp.log.rows': 'Rows',
+      'hist.status.cancelled': 'Cancelled', 'mcp.log.status.ok': 'OK', 'mcp.log.status.error': 'Failed', 'mcp.log.status.cancelled': 'Cancelled', 'mcp.log.status.rate-limited': 'Rate limited',
       'admin.group.insight': "Insight & automation",
       'admin.group.connect': "Integrations",
       "fq.title": "Data freshness",
@@ -2338,6 +2356,17 @@ window.__ModuleLoader__.load({
 .n2s-fq-summary .n2s-fq-score{min-width:48px;height:34px;font-size:17px}
 .n2s-adminnav-group{margin:14px 12px 4px;font-size:11.5px;letter-spacing:.02em;color:var(--n2s-faint)}
 .n2s-adminnav-sep{height:.5px;margin:10px 12px;background:var(--n2s-line)}
+.n2s-mcp-tabs{flex-wrap:wrap}
+.n2s-mcp-limits{display:grid;gap:12px;padding-top:4px;border-top:1px dashed var(--n2s-border)}
+.n2s-mcp-toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 12px;margin-top:4px;font-size:12.5px}
+.n2s-mcp-editor{display:grid;gap:12px;border-color:var(--n2s-accent)}
+.n2s-mcp-actions{text-align:right;white-space:nowrap}
+.n2s-mcp-actions .n2s-btn{margin-left:4px}
+.n2s-mcp-tokens .n2s-badge{margin:0 4px 2px 0}
+.n2s-mcp-selftest{margin-top:6px}
+.n2s-mcp-steps{margin:6px 0 0;padding-left:18px;font-size:12.5px}
+.n2s-mcp-log .n2s-select{max-width:200px}
+.n2s-mcp-logtable td{vertical-align:middle}
 /* ---- dashboard v2 ---- */
 .n2s-srcbadge{display:inline-flex;align-items:center;gap:3px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}
 .n2s-seg.small button{height:26px;padding:0 10px;font-size:12px}
@@ -2807,6 +2836,26 @@ window.__ModuleLoader__.load({
     }
     // ----------------------------------------------------------- charts
 
+    // ECharts is loaded in a sandboxed wrapper (lib/client.echarts.js) whose `window` is an empty
+    // object, so it cannot read the screen's devicePixelRatio and would draw at 1x (blurry on
+    // Retina / HiDPI). Every chart passes the real ratio explicitly and re-inits when it changes
+    // (moving between screens, browser zoom).
+    const chartDpr = () => Math.max(1, Math.min(3, (typeof window !== 'undefined' && window.devicePixelRatio) || 1))
+    function initChart(echarts, el, opts = {}) {
+      return echarts.init(el, null, { renderer: 'canvas', devicePixelRatio: chartDpr(), ...opts })
+    }
+    /** Call `onChange` when the device pixel ratio changes; returns a cleanup. */
+    function watchDpr(onChange) {
+      if (typeof window === 'undefined' || !window.matchMedia) return () => {}
+      let mq
+      const listen = () => {
+        mq = window.matchMedia(`(resolution: ${window.devicePixelRatio || 1}dppx)`)
+        mq.addEventListener?.('change', handler, { once: true })
+      }
+      const handler = () => { onChange(); listen() }
+      listen()
+      return () => mq?.removeEventListener?.('change', handler)
+    }
     let echartsPromise
     function loadEcharts() {
       echartsPromise ??= require.async('./client.echarts.js')
@@ -2913,17 +2962,27 @@ window.__ModuleLoader__.load({
       useEffect(() => {
         let disposed = false
         let observer
+        let stopDpr
         loadEcharts().then((echarts) => {
           if (disposed || !ref.current) return
-          instance.current = echarts.init(ref.current, null, { renderer: 'canvas' })
-          instance.current.on('click', (p) => { if (pointRef.current && p.name !== undefined && p.name !== '') pointRef.current(p.name) })
+          const create = () => {
+            const prev = instance.current
+            const option = prev?.getOption?.()
+            prev?.dispose()
+            instance.current = initChart(echarts, ref.current)
+            instance.current.on('click', (p) => { if (pointRef.current && p.name !== undefined && p.name !== '') pointRef.current(p.name) })
+            if (option) instance.current.setOption(option, true)
+            onInstance?.(instance.current)
+          }
+          create()
+          stopDpr = watchDpr(() => { if (!disposed && ref.current) create() })
           observer = new ResizeObserver(() => instance.current?.resize())
           observer.observe(ref.current)
           setReady(true)
-          onInstance?.(instance.current)
         }, (e) => setError(e.message))
         return () => {
           disposed = true
+          stopDpr?.()
           observer?.disconnect()
           instance.current?.dispose()
           instance.current = null
@@ -3066,7 +3125,7 @@ window.__ModuleLoader__.load({
       const [flash, setFlash] = useFlash()
       const copySql = () => { navigator.clipboard?.writeText(result.sql); setFlash(t('result.copied')) }
       const exportPng = () => {
-        const url = chartInstance?.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: cssVar(document.body, '--dsw-alias-bg-base', '#fff') })
+        const url = chartInstance?.getDataURL({ type: 'png', pixelRatio: Math.max(2, chartDpr()), backgroundColor: cssVar(document.body, '--dsw-alias-bg-base', '#fff') })
         if (url) fetch(url).then(r => r.blob()).then(b => download(`${safeName(result.title)}.png`, b))
       }
       const isChart = chart.type !== 'table' && chart.type !== 'kpi'
@@ -3732,7 +3791,7 @@ window.__ModuleLoader__.load({
         let observer
         loadEcharts().then((echarts) => {
           if (disposed || !ref.current) return
-          chart = echarts.init(ref.current, null, { renderer: 'canvas' })
+          chart = initChart(echarts, ref.current)
           observer = new ResizeObserver(() => chart?.resize())
           observer.observe(ref.current)
           const el = ref.current
@@ -7198,7 +7257,7 @@ window.__ModuleLoader__.load({
         let observer
         loadEcharts().then((echarts) => {
           if (disposed || !ref.current) return
-          inst.current = echarts.init(ref.current, null, { renderer: 'canvas' })
+          inst.current = initChart(echarts, ref.current)
           observer = new ResizeObserver(() => inst.current?.resize())
           observer.observe(ref.current)
           try { inst.current.setOption(proForecastOption(forecast, ref.current, t), true) } catch (e) { setError(e.message) }
@@ -7696,18 +7755,40 @@ window.__ModuleLoader__.load({
 
     extend.adminSections.push({ id: 'bitable', label: (t) => t('pre.bt.nav'), icon: () => Icon.table(15), Component: PreBitableSection })
     // ------------------------------------------------------------ MCP access (admin section)
-    // Enable the local MCP server, manage bearer tokens (shown once) and their
-    // scopes, and copy config snippets for Claude Desktop / Cursor / VS Code.
+    // Enable the local MCP server, manage bearer tokens (shown once; expiry, tool allowlist,
+    // rate limit, rotation), test the connection, read the per-token call log, and copy setup
+    // snippets for ten MCP clients (formats verified against each client's docs, see docs/mcp.md).
 
     const MCP_PKG = '@hedeqiang/dsh-nl2sql'
+    const MCP_CLIENTS = ['claude', 'claudeCode', 'cursor', 'vscode', 'cline', 'windsurf', 'codex', 'gemini', 'zed', 'continue']
 
     /** Config snippets for a token (placeholder when the token value is no longer known). */
     function mcpSnippets(url, token) {
       const tok = token || '<YOUR_TOKEN>'
+      const auth = { Authorization: `Bearer ${tok}` }
+      const json = (o) => JSON.stringify(o, null, 2)
+      const stdio = { command: 'npx', args: ['-y', '-p', MCP_PKG, 'nl2sql-mcp'], env: { NL2SQL_MCP_URL: url, NL2SQL_MCP_TOKEN: tok } }
       return {
-        claude: JSON.stringify({ mcpServers: { nl2sql: { command: 'npx', args: ['-y', '-p', MCP_PKG, 'nl2sql-mcp'], env: { NL2SQL_MCP_URL: url, NL2SQL_MCP_TOKEN: tok } } } }, null, 2),
-        cursor: JSON.stringify({ mcpServers: { nl2sql: { url, headers: { Authorization: `Bearer ${tok}` } } } }, null, 2),
-        vscode: JSON.stringify({ servers: { nl2sql: { type: 'http', url, headers: { Authorization: `Bearer ${tok}` } } } }, null, 2),
+        // https://modelcontextprotocol.io/docs/develop/connect-local-servers
+        claude: json({ mcpServers: { nl2sql: stdio } }),
+        // https://code.claude.com/docs/en/mcp
+        claudeCode: `claude mcp add --transport http nl2sql ${url} \\\n  --header "Authorization: Bearer ${tok}"\n\n# stdio variant (bridge)\nclaude mcp add --transport stdio --env NL2SQL_MCP_URL=${url} --env NL2SQL_MCP_TOKEN=${tok} nl2sql -- npx -y -p ${MCP_PKG} nl2sql-mcp`,
+        // https://cursor.com/docs/mcp
+        cursor: json({ mcpServers: { nl2sql: { url, headers: auth } } }),
+        // https://code.visualstudio.com/docs/agents/reference/mcp-configuration
+        vscode: json({ servers: { nl2sql: { type: 'http', url, headers: auth } } }),
+        // https://docs.cline.bot/mcp/configuring-mcp-servers
+        cline: json({ mcpServers: { nl2sql: { type: 'streamableHttp', url, headers: auth, disabled: false } } }),
+        // https://docs.devin.ai/windsurf/plugins/cascade/mcp
+        windsurf: json({ mcpServers: { nl2sql: { serverUrl: url, headers: auth } } }),
+        // https://developers.openai.com/codex/mcp
+        codex: `[mcp_servers.nl2sql]\nurl = "${url}"\nhttp_headers = { "Authorization" = "Bearer ${tok}" }`,
+        // https://geminicli.com/docs/tools/mcp-server/
+        gemini: json({ mcpServers: { nl2sql: { httpUrl: url, headers: auth } } }),
+        // https://zed.dev/docs/ai/mcp
+        zed: json({ context_servers: { nl2sql: { url, headers: auth } } }),
+        // https://docs.continue.dev/customize/deep-dives/mcp
+        continue: `name: nl2sql\nversion: 0.0.1\nschema: v1\nmcpServers:\n  - name: nl2sql\n    type: streamable-http\n    url: ${url}\n    requestOptions:\n      headers:\n        Authorization: Bearer ${tok}`,
       }
     }
 
@@ -7724,10 +7805,9 @@ window.__ModuleLoader__.load({
     function McpSnippets({ t, url, token }) {
       const [tab, setTab] = useState('claude')
       const snip = mcpSnippets(url, token)
-      const where = { claude: 'mcp.where.claude', cursor: 'mcp.where.cursor', vscode: 'mcp.where.vscode' }
       return h('div', { className: 'n2s-mcp-snippets' },
-        h('div', { className: 'n2s-seg', role: 'tablist' }, ['claude', 'cursor', 'vscode'].map(k => h('button', { key: k, type: 'button', role: 'tab', 'aria-selected': tab === k, 'aria-pressed': tab === k, onClick: () => setTab(k) }, t(`mcp.client.${k}`)))),
-        h('div', { className: 'n2s-faint n2s-small', style: { margin: '6px 0' } }, t(where[tab])),
+        h('div', { className: 'n2s-seg n2s-mcp-tabs', role: 'tablist', 'aria-label': t('mcp.setup') }, MCP_CLIENTS.map(k => h('button', { key: k, type: 'button', role: 'tab', 'data-client': k, 'aria-selected': tab === k, 'aria-pressed': tab === k, onClick: () => setTab(k) }, t(`mcp.client.${k}`)))),
+        h('div', { className: 'n2s-faint n2s-small', style: { margin: '6px 0' } }, t(`mcp.where.${tab}`)),
         h('div', { className: 'n2s-mcp-code' },
           h('pre', { className: 'n2s-code', 'data-snippet': tab }, snip[tab]),
           h('div', { className: 'n2s-mcp-codeact' }, h(McpCopy, { t, text: snip[tab] }))),
@@ -7740,9 +7820,47 @@ window.__ModuleLoader__.load({
       return h('span', { className: 'n2s-badge ok' }, t('mcp.scope.owner'))
     }
 
-    function McpTokenForm({ t, datasources, onCreated, onCancel }) {
+    const mcpDateInput = (ms) => {
+      if (!ms) return ''
+      const d = new Date(ms)
+      const p = (n) => String(n).padStart(2, '0')
+      return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`
+    }
+
+    /** Expiry, tool allowlist and rate limit fields. value: { expires: 'YYYY-MM-DD'|'', allTools, tools: [], rateLimit: '' }. */
+    function McpLimitsFields({ t, value, onChange, toolNames }) {
+      const set = (k, v) => onChange({ ...value, [k]: v })
+      return h('div', { className: 'n2s-mcp-limits' },
+        h('label', { className: 'n2s-field' }, h('span', { className: 'n2s-flabel' }, t('mcp.expiry')),
+          h('div', { className: 'n2s-row' },
+            h('input', { type: 'date', className: 'n2s-input', style: { maxWidth: 180 }, 'aria-label': t('mcp.expiry'), value: value.expires, onChange: e => set('expires', e.target.value) }),
+            value.expires && h('button', { type: 'button', className: 'n2s-btn small ghost', onClick: () => set('expires', '') }, t('mcp.noExpiry'))),
+          h('span', { className: 'n2s-faint n2s-small' }, t('mcp.expiryHint'))),
+        h('div', { className: 'n2s-field', role: 'group', 'aria-label': t('mcp.toolsAllow') },
+          h('span', { className: 'n2s-flabel' }, t('mcp.toolsAllow')),
+          h('label', { className: 'n2s-check' }, h('input', { type: 'checkbox', checked: value.allTools, onChange: e => set('allTools', e.target.checked) }), ' ', t('mcp.allTools')),
+          !value.allTools && h('div', { className: 'n2s-mcp-toolgrid' }, (toolNames ?? []).map(n => h('label', { key: n, className: 'n2s-check n2s-mono' },
+            h('input', { type: 'checkbox', 'data-tool': n, checked: value.tools.includes(n), onChange: e => set('tools', e.target.checked ? [...value.tools, n] : value.tools.filter(x => x !== n)) }), ' ', n)))),
+        h('label', { className: 'n2s-field' }, h('span', { className: 'n2s-flabel' }, t('mcp.rateLimit')),
+          h('div', { className: 'n2s-row' },
+            h('input', { className: 'n2s-input n2s-mono', style: { width: 110 }, inputMode: 'numeric', 'aria-label': t('mcp.rateLimit'), placeholder: t('mcp.unlimited'), value: value.rateLimit, onChange: e => set('rateLimit', e.target.value.replace(/\D/g, '').slice(0, 5)) }),
+            h('span', { className: 'n2s-faint n2s-small' }, t('mcp.perMinute')))))
+    }
+
+    /** Limits form state → RPC payload fields. */
+    function mcpLimitsPayload(v) {
+      return {
+        expiresAt: v.expires ? new Date(`${v.expires}T23:59:59`).getTime() : null,
+        tools: v.allTools ? null : v.tools,
+        rateLimit: v.rateLimit ? Number(v.rateLimit) : null,
+      }
+    }
+    const mcpLimitsOf = (tok) => ({ expires: mcpDateInput(tok?.expiresAt), allTools: !Array.isArray(tok?.tools), tools: tok?.tools ?? [], rateLimit: tok?.rateLimit ? String(tok.rateLimit) : '' })
+
+    function McpTokenForm({ t, datasources, toolNames, onCreated, onCancel }) {
       const users = useAsync(() => call('listUsers').catch(() => []), [])
       const [form, setForm] = useState({ name: '', type: 'owner', memberId: '', role: 'analyst', datasourceIds: [], rowColumn: '', rowValues: '' })
+      const [limits, setLimits] = useState(mcpLimitsOf(null))
       const [busy, setBusy] = useState(false)
       const [err, setErr] = useState(null)
       const set = (k, v) => setForm(f => ({ ...f, [k]: v }))
@@ -7755,8 +7873,10 @@ window.__ModuleLoader__.load({
         if (!form.name.trim()) return setErr(t('mcp.err.name'))
         if (form.type === 'member' && !form.memberId) return setErr(t('mcp.err.member'))
         if (form.type === 'role' && !form.datasourceIds.length) return setErr(t('mcp.err.ds'))
+        if (!limits.allTools && !limits.tools.length) return setErr(t('mcp.err.tools'))
+        const extra = mcpLimitsPayload(limits)
         setBusy(true)
-        try { onCreated(await call('createMcpToken', { name: form.name.trim(), scope })) } catch (e) { setErr(e.message) }
+        try { onCreated(await call('createMcpToken', { name: form.name.trim(), scope, ...Object.fromEntries(Object.entries(extra).filter(([, v]) => v !== null)) })) } catch (e) { setErr(e.message) }
         setBusy(false)
       }
       return h('div', { className: 'n2s-card n2s-mcp-form' },
@@ -7783,17 +7903,91 @@ window.__ModuleLoader__.load({
               h('input', { className: 'n2s-input n2s-mono', style: { maxWidth: 180 }, 'aria-label': t('mcp.rowColumn'), placeholder: t('mcp.rowColumn'), value: form.rowColumn, onChange: e => set('rowColumn', e.target.value) }),
               h('input', { className: 'n2s-input', 'aria-label': t('mcp.rowValues'), placeholder: t('mcp.rowValues'), value: form.rowValues, onChange: e => set('rowValues', e.target.value) })),
             h('span', { className: 'n2s-faint n2s-small' }, t('mcp.rowRuleHint')))),
+        h(McpLimitsFields, { t, value: limits, onChange: setLimits, toolNames }),
         err && h('div', { className: 'n2s-notice err', role: 'alert', style: { marginTop: 8 } }, err),
         h('div', { className: 'n2s-row', style: { justifyContent: 'flex-end', marginTop: 12 } },
           h('button', { type: 'button', className: 'n2s-btn ghost', onClick: onCancel }, t('ds.cancel')),
           h('button', { type: 'button', className: 'n2s-btn primary', disabled: busy, onClick: submit }, busy ? h('span', { className: 'n2s-spin' }) : null, t('mcp.create'))))
     }
 
+    /** Edit name / expiry / allowlist / rate limit of an existing token (the secret is never shown again). */
+    function McpTokenEditor({ t, tok, toolNames, onSaved, onCancel }) {
+      const [name, setName] = useState(tok.name)
+      const [limits, setLimits] = useState(mcpLimitsOf(tok))
+      const [busy, setBusy] = useState(false)
+      const [err, setErr] = useState(null)
+      const save = async () => {
+        setErr(null)
+        if (!name.trim()) return setErr(t('mcp.err.name'))
+        if (!limits.allTools && !limits.tools.length) return setErr(t('mcp.err.tools'))
+        setBusy(true)
+        try { onSaved(await call('updateMcpToken', { id: tok.id, name: name.trim(), ...mcpLimitsPayload(limits) })) } catch (e) { setErr(e.message) }
+        setBusy(false)
+      }
+      return h('div', { className: 'n2s-card n2s-mcp-editor', 'data-editing': tok.id },
+        h('div', { className: 'n2s-sechead-title', style: { marginBottom: 10 } }, fmt(t, 'mcp.editTitle', { name: tok.name })),
+        h('label', { className: 'n2s-field' }, h('span', { className: 'n2s-flabel' }, t('mcp.tokenName')),
+          h('input', { className: 'n2s-input', value: name, maxLength: 60, 'aria-label': t('mcp.tokenName'), onChange: e => setName(e.target.value) })),
+        h(McpLimitsFields, { t, value: limits, onChange: setLimits, toolNames }),
+        err && h('div', { className: 'n2s-notice err', role: 'alert', style: { marginTop: 8 } }, err),
+        h('div', { className: 'n2s-row', style: { justifyContent: 'flex-end', marginTop: 12 } },
+          h('button', { type: 'button', className: 'n2s-btn ghost', onClick: onCancel }, t('ds.cancel')),
+          h('button', { type: 'button', className: 'n2s-btn primary', disabled: busy, onClick: save }, busy ? h('span', { className: 'n2s-spin' }) : null, t('mcp.save'))))
+    }
+
+    /** "Test connection": mcpSelfTest (discover + tools/list + initialize over loopback with a temporary credential). */
+    function McpSelfTest({ t, disabled }) {
+      const [res, setRes] = useState(null)
+      const [busy, setBusy] = useState(false)
+      const run = async () => {
+        setBusy(true)
+        try { setRes(await call('mcpSelfTest')) } catch (e) { setRes({ ok: false, error: e.message, steps: [] }) }
+        setBusy(false)
+      }
+      return h('div', { className: 'n2s-mcp-selftest' },
+        h('button', { type: 'button', className: 'n2s-btn small', disabled: disabled || busy, onClick: run }, busy ? h('span', { className: 'n2s-spin' }) : null, t('mcp.test')),
+        res && h('div', { className: `n2s-notice ${res.ok ? 'ok' : 'err'}`, role: 'status', 'data-selftest': res.ok ? 'ok' : 'fail', style: { marginTop: 8 } },
+          h('div', null, res.ok ? fmt(t, 'mcp.testOk', { n: res.tools?.length ?? 0 }) : (res.error ? fmt(t, 'mcp.testFail', { error: res.error }) : t('mcp.testFailSteps'))),
+          (res.steps ?? []).length > 0 && h('ul', { className: 'n2s-mcp-steps' }, res.steps.map(s => h('li', { key: s.step }, s.ok ? '✓ ' : '✗ ', h('span', { className: 'n2s-mono' }, s.step), ` · ${s.detail} · ${s.ms} ms`)))))
+    }
+
+    /** Per-token call log with a status / tool filter. */
+    function McpCallLog({ t, tokens }) {
+      const [tokenId, setTokenId] = useState('')
+      const [status, setStatus] = useState('')
+      const [q, setQ] = useState('')
+      const log = useAsync(() => call('mcpCallLog', { ...(tokenId ? { tokenId } : {}), ...(status ? { status } : {}), limit: 200 }), [tokenId, status])
+      const when = (ms) => new Date(ms).toLocaleString(uiLocale(), { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' })
+      const rows = (log.value ?? []).filter(r => !q || `${r.tool ?? r.method} ${r.datasource ?? ''}`.toLowerCase().includes(q.toLowerCase()))
+      const badge = (s) => h('span', { className: `n2s-badge ${s === 'ok' ? 'ok' : s === 'cancelled' || s === 'rate-limited' ? 'warn' : 'err'}` }, t(`mcp.log.status.${s}`) ?? s)
+      return h('div', { className: 'n2s-card n2s-mcp-log' },
+        h('div', { className: 'n2s-row', style: { flexWrap: 'wrap', gap: 8, marginBottom: 8 } },
+          h('select', { className: 'n2s-select', 'aria-label': t('mcp.log.token'), value: tokenId, onChange: e => setTokenId(e.target.value) },
+            h('option', { value: '' }, t('mcp.log.allTokens')), tokens.map(tk => h('option', { key: tk.id, value: tk.id }, tk.name))),
+          h('div', { className: 'n2s-seg', role: 'group', 'aria-label': t('mcp.log.status') }, ['', 'ok', 'error', 'cancelled', 'rate-limited'].map(v => h('button', { key: v || 'all', type: 'button', 'aria-pressed': status === v, onClick: () => setStatus(v) }, v ? t(`mcp.log.status.${v}`) : t('mcp.log.all')))),
+          h('input', { className: 'n2s-input', style: { maxWidth: 200 }, 'aria-label': t('mcp.log.filter'), placeholder: t('mcp.log.filter'), value: q, onChange: e => setQ(e.target.value) }),
+          h('span', { className: 'n2s-grow' }),
+          h('button', { type: 'button', className: 'n2s-btn small ghost', onClick: () => log.reload() }, t('mcp.log.refresh'))),
+        rows.length === 0
+          ? h('div', { className: 'n2s-faint n2s-small' }, log.value ? t('mcp.log.empty') : '…')
+          : h('div', { className: 'n2s-table-wrap' }, h('table', { className: 'n2s-table n2s-mcp-logtable' },
+            h('thead', null, h('tr', null, [t('mcp.log.time'), t('mcp.log.token'), t('mcp.log.tool'), t('mcp.log.datasource'), t('mcp.log.ms'), t('mcp.log.rows'), t('mcp.log.status')].map((x, i) => h('th', { key: i }, x)))),
+            h('tbody', null, rows.map(r => h('tr', { key: r.id, 'data-log-id': r.id, title: r.error ?? '' },
+              h('td', { className: 'n2s-small' }, when(r.at)),
+              h('td', { className: 'n2s-small' }, r.tokenName),
+              h('td', { className: 'n2s-mono n2s-small' }, r.tool ?? r.method),
+              h('td', { className: 'n2s-small' }, r.datasource ?? '—'),
+              h('td', { className: 'n2s-small' }, r.ms),
+              h('td', { className: 'n2s-small' }, r.rows ?? '—'),
+              h('td', null, badge(r.status))))))))
+    }
+
     function McpSection({ t, datasources }) {
       const st = useAsync(() => call('mcpStatus'), [])
       const [port, setPort] = useState('')
       const [busy, setBusy] = useState(false)
       const [creating, setCreating] = useState(false)
+      const [editing, setEditing] = useState(null)
       const [fresh, setFresh] = useState(null) // { name, token } shown once
       useEffect(() => { if (st.value) setPort(String(st.value.port)) }, [st.value?.port])
       const s = st.value
@@ -7807,8 +8001,18 @@ window.__ModuleLoader__.load({
         if (!(await confirmDialog({ title: fmt(t, 'mcp.revokeConfirm', { name: tok.name }), message: t('mcp.revokeHint'), confirmLabel: t('mcp.revoke'), danger: true }))) return
         try { await call('revokeMcpToken', { id: tok.id }); if (fresh?.id === tok.id) setFresh(null); notify(t('mcp.revoked'), 'ok'); st.reload() } catch (e) { notifyError(e) }
       }
+      const rotate = async (tok) => {
+        if (!(await confirmDialog({ title: fmt(t, 'mcp.rotateConfirm', { name: tok.name }), message: t('mcp.rotateHint'), confirmLabel: t('mcp.rotate'), danger: true }))) return
+        try { const r = await call('rotateMcpToken', { id: tok.id }); setFresh(r); notify(t('mcp.rotated'), 'ok'); st.reload() } catch (e) { notifyError(e) }
+      }
       if (!s) return st.error ? h('div', { className: 'n2s-notice err' }, st.error.message) : h('div', { className: 'n2s-skel', style: { height: 200 } })
       const portDirty = port !== String(s.port)
+      const toolNames = s.toolNames ?? []
+      const limitsLabel = (tok) => [
+        tok.expiresAt ? (tok.expired ? t('mcp.expired') : fmt(t, 'mcp.expiresOn', { date: new Date(tok.expiresAt).toLocaleDateString(uiLocale()) })) : null,
+        Array.isArray(tok.tools) ? fmt(t, 'mcp.toolsN', { n: tok.tools.length }) : null,
+        tok.rateLimit ? fmt(t, 'mcp.rateN', { n: tok.rateLimit }) : null,
+      ].filter(Boolean)
       return h('div', { className: 'n2s-mcp' },
         h(SectionHead, { title: t('mcp.title'), desc: t('mcp.desc') }),
         h('div', { className: 'n2s-card n2s-mcp-server' },
@@ -7826,7 +8030,8 @@ window.__ModuleLoader__.load({
             h('span', { className: 'n2s-flabel' }, t('mcp.endpoint')),
             h('code', { className: 'n2s-mono', 'data-mcp-url': true }, s.url),
             h(McpCopy, { t, text: s.url })),
-          h('div', { className: 'n2s-faint n2s-small' }, t('mcp.localOnly'))),
+          h(McpSelfTest, { t, disabled: !s.running }),
+          h('div', { className: 'n2s-faint n2s-small', style: { marginTop: 6 } }, t('mcp.localOnly'))),
         fresh && h('div', { className: 'n2s-card n2s-mcp-fresh', role: 'status' },
           h('div', { className: 'n2s-sechead-title' }, fmt(t, 'mcp.freshTitle', { name: fresh.name })),
           h('div', { className: 'n2s-notice warn', style: { margin: '8px 0' } }, t('mcp.freshHint')),
@@ -7836,17 +8041,25 @@ window.__ModuleLoader__.load({
         h('div', { className: 'n2s-row', style: { margin: '18px 0 8px' } },
           h('div', { className: 'n2s-sechead-title n2s-grow' }, t('mcp.tokens')),
           !creating && h('button', { type: 'button', className: 'n2s-btn', onClick: () => setCreating(true) }, '+ ', t('mcp.newToken'))),
-        creating && h(McpTokenForm, { t, datasources, onCancel: () => setCreating(false), onCreated: (tok) => { setCreating(false); setFresh(tok); st.reload() } }),
+        creating && h(McpTokenForm, { t, datasources, toolNames, onCancel: () => setCreating(false), onCreated: (tok) => { setCreating(false); setFresh(tok); st.reload() } }),
+        editing && h(McpTokenEditor, { key: editing.id, t, tok: editing, toolNames, onCancel: () => setEditing(null), onSaved: () => { setEditing(null); notify(t('mcp.saved'), 'ok'); st.reload() } }),
         s.tokens.length === 0 && !creating
           ? h('div', { className: 'n2s-empty' }, h('h3', null, t('mcp.noTokens')), h('div', null, t('mcp.noTokensHint')))
           : s.tokens.length > 0 && h('div', { className: 'n2s-table-wrap' }, h('table', { className: 'n2s-table n2s-mcp-tokens' },
-            h('thead', null, h('tr', null, [t('mcp.col.name'), t('mcp.col.scope'), t('mcp.col.created'), t('mcp.col.lastUsed'), ''].map((x, i) => h('th', { key: i }, x)))),
+            h('thead', null, h('tr', null, [t('mcp.col.name'), t('mcp.col.scope'), t('mcp.col.limits'), t('mcp.col.created'), t('mcp.col.lastUsed'), ''].map((x, i) => h('th', { key: i }, x)))),
             h('tbody', null, s.tokens.map(tok => h('tr', { key: tok.id, 'data-token-id': tok.id },
               h('td', null, h('div', null, tok.name), h('div', { className: 'n2s-faint n2s-small n2s-mono' }, `${tok.prefix}…`)),
               h('td', null, h(McpScopeLabel, { t, scope: tok.scope })),
+              h('td', { className: 'n2s-small' }, limitsLabel(tok).length ? limitsLabel(tok).map((x, i) => h('span', { key: i, className: `n2s-badge ${tok.expired && i === 0 ? 'warn' : ''}` }, x)) : h('span', { className: 'n2s-faint' }, t('mcp.noLimits'))),
               h('td', { className: 'n2s-small' }, when(tok.createdAt)),
               h('td', { className: 'n2s-small' }, when(tok.lastUsedAt)),
-              h('td', { style: { textAlign: 'right' } }, h('button', { type: 'button', className: 'n2s-btn small danger', onClick: () => revoke(tok) }, t('mcp.revoke')))))))),
+              h('td', { className: 'n2s-mcp-actions' },
+                h('button', { type: 'button', className: 'n2s-btn small ghost', onClick: () => setEditing(tok) }, t('mcp.edit')),
+                h('button', { type: 'button', className: 'n2s-btn small ghost', onClick: () => rotate(tok) }, t('mcp.rotate')),
+                h('button', { type: 'button', className: 'n2s-btn small danger', onClick: () => revoke(tok) }, t('mcp.revoke')))))))),
+        s.tokens.length > 0 && h(React.Fragment, null,
+          h('div', { className: 'n2s-sechead-title', style: { margin: '18px 0 8px' } }, t('mcp.callLog')),
+          h(McpCallLog, { t, tokens: s.tokens })),
         h('div', { className: 'n2s-sechead-title', style: { margin: '18px 0 8px' } }, t('mcp.setup')),
         h('div', { className: 'n2s-card' }, h(McpSnippets, { t, url: s.url, token: null }),
           h('div', { className: 'n2s-faint n2s-small', style: { marginTop: 8 } }, t('mcp.docsHint'))))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hedeqiang/dsh-nl2sql",
-  "version": "0.13.1",
+  "version": "0.14.1",
   "description": "Ask MySQL, PostgreSQL, Elasticsearch and CSV/Excel in plain language inside DeepSeek Harness: charts, dashboards, alerts, and IM push and bots for Lark/Feishu, Telegram, WeCom and DingTalk.",
   "type": "module",
   "bin": {