dsh-superinput 0.7.0 → 0.12.1

package/client.js

@@ -24,7 +24,7 @@ function createCostClient(require) {
     const ENDPOINT = '/api/dsh-cost'
     const POLL_MS = 15000
 
-    /** 客户端调试通道：关键锚定/装配事件上报服务端 debug log（真机取证）。 */
+    /* 客户端调试通道：关键锚定/装配事件上报服务端 debug log（真机取证）。 */
     function clientDebug(message) {
       try {
         void fetch(`${ENDPOINT}/client-debug`, {
@@ -35,6 +35,108 @@ function createCostClient(require) {
       } catch { /* ignore */ }
     }
 
+    /* -- 双语（zh / en）：localStorage 持久化，默认跟随系统 ------------- */
+
+    const LANG_KEY = 'dsh-cost-lang'
+    const STRINGS = {
+      zh: {
+        sectionLabel: '费用',
+        today: '今日', thisMonth: '本月', total: '累计',
+        callsUnit: '次调用', callTimes: ' 次',
+        noRecords: '暂无记录', noCallsToday: '今日暂无调用',
+        peakBadge: '峰时计价', offPeakBadge: '谷时计价',
+        peakNow: '峰时', offPeakNow: '谷时',
+        unmatchedModels: '个模型按默认档计费',
+        exportJson: '导出 JSON', exportCsv: '导出 CSV',
+        exportJsonTitle: '导出全部费用记录（JSON）', exportCsvTitle: '导出日汇总（CSV）',
+        syncPrices: '同步官方价格', syncPricesTitle: '从官方定价页同步现行价格（峰谷两档，历史账目不受影响）',
+        refreshRate: '刷新汇率', refreshRateTitle: '立即刷新 USD→CNY 汇率（平时每小时自动刷新）',
+        priceSynced: '价格已同步', rateRefreshed: '汇率已刷新', failed: '失败',
+        monthForecast: '月底预计', spent: '已花', dailyAvg: '日均', daysLeft: (n) => `剩 ${n} 天`, overBudget: '超出预算',
+        forecastNeedDays: (n) => `预测需要至少 3 天完整数据（当前 ${n} 天）`,
+        budget: '预算', budgetPeriodDay: '今日', budgetPeriodMonth: '本月', budgetPeriodAll: '累计',
+        turnCost: '费用', turnCostTitle: '本轮费用明细', turnCostPop: '本轮费用', turnEmpty: '该回合暂无用量记录',
+        costDetail: '费用明细', sessionCost: '本对话费用', officialBalance: '官方余额', recentCalls: '最近调用',
+        srcChat: '对话', srcEnhance: '提示词增强', srcFollowup: '跟进建议',
+        todaySidebar: '今日', loading: '加载中…', readFailed: '读取失败', gotIt: '知道了',
+        peakSoonPeak: (time) => `即将进入峰时计价（${time}）`, peakSoonOff: (time) => `即将进入谷时计价（${time}）`,
+        budgetOverTitle: 'dsh 费用预算已超限',
+        budgetOverBody: (label, used, amount, pct) => `${label}费用 ¥${used}，已达预算 ¥${amount} 的 ${pct}%。`,
+        bucketInput: '输入', bucketOutput: '输出', bucketCacheRead: '缓存读取', bucketCacheWrite: '缓存写入', bucketReasoning: '推理',
+        heatTitle: '用量热力图', heatCost: '费用', heatCalls: '调用', heatTokens: 'Token',
+        heatLess: '少', heatMore: '多', heatEmpty: '暂无用量数据',
+        plansTitle: 'Coding Plan 配额', plansHint: '粘贴各家订阅的 API Key 查询剩余额度；Key 只保存在本机 settings.json，不会回显或上传。',
+        plansSave: '保存', plansSaved: '已保存', plansRefresh: '刷新', plansRefreshAll: '全部刷新',
+        plansConfigured: '已配置', plansError: '查询失败',
+        winFiveHour: '5 小时', winWeekly: '本周', winMonthly: '本月', winBalance: '余额',
+        winCredits: '额度', winPlan: '套餐', winCompensation: '补偿', winCurrent: '当前',
+        winResets: '重置', winUnlimited: '不限量',
+        planAnthropic: 'Anthropic (Claude Pro/Max)', planZai: 'Z.ai / 智谱 GLM Coding Plan',
+        planMinimax: 'MiniMax Token Plan', planKimi: 'Kimi Code / Moonshot',
+        planOpenrouter: 'OpenRouter', planSiliconflow: 'SiliconFlow 硅基流动',
+        planCommandcode: 'CommandCode', planClinepass: 'Cline Pass',
+        langHint: '设置分区标题等宿主注册项在刷新窗口后生效',
+      },
+      en: {
+        sectionLabel: 'Cost',
+        today: 'Today', thisMonth: 'This month', total: 'Total',
+        callsUnit: 'calls', callTimes: ' calls',
+        noRecords: 'No records yet', noCallsToday: 'No calls today',
+        peakBadge: 'Peak pricing', offPeakBadge: 'Off-peak pricing',
+        peakNow: 'peak', offPeakNow: 'off-peak',
+        unmatchedModels: ' models billed at default tier',
+        exportJson: 'Export JSON', exportCsv: 'Export CSV',
+        exportJsonTitle: 'Export all cost records (JSON)', exportCsvTitle: 'Export daily summary (CSV)',
+        syncPrices: 'Sync official prices', syncPricesTitle: 'Sync current prices from the official pricing page (peak/off-peak; history untouched)',
+        refreshRate: 'Refresh rate', refreshRateTitle: 'Refresh the USD→CNY rate now (auto hourly otherwise)',
+        priceSynced: 'Prices synced', rateRefreshed: 'Rate refreshed', failed: 'Failed',
+        monthForecast: 'Month-end forecast', spent: 'Spent ', dailyAvg: 'daily avg ', daysLeft: (n) => `${n} days left`, overBudget: 'over budget',
+        forecastNeedDays: (n) => `Forecast needs at least 3 full days of data (currently ${n})`,
+        budget: 'Budget', budgetPeriodDay: 'Daily', budgetPeriodMonth: 'Monthly', budgetPeriodAll: 'All time',
+        turnCost: 'Cost', turnCostTitle: 'Turn cost details', turnCostPop: 'This turn', turnEmpty: 'No usage recorded for this turn',
+        costDetail: 'Cost details', sessionCost: 'This conversation', officialBalance: 'Official balance', recentCalls: 'Recent calls',
+        srcChat: 'Chat', srcEnhance: 'Prompt enhancer', srcFollowup: 'Follow-ups',
+        todaySidebar: 'Today', loading: 'Loading…', readFailed: 'Failed to load', gotIt: 'Got it',
+        peakSoonPeak: (time) => `Peak pricing starts at ${time}`, peakSoonOff: (time) => `Off-peak pricing starts at ${time}`,
+        budgetOverTitle: 'dsh cost budget exceeded',
+        budgetOverBody: (label, used, amount, pct) => `${label} cost ¥${used} — ${pct}% of the ¥${amount} budget.`,
+        bucketInput: 'Input', bucketOutput: 'Output', bucketCacheRead: 'Cache read', bucketCacheWrite: 'Cache write', bucketReasoning: 'Reasoning',
+        heatTitle: 'Usage heatmap', heatCost: 'Cost', heatCalls: 'Calls', heatTokens: 'Tokens',
+        heatLess: 'Less', heatMore: 'More', heatEmpty: 'No usage data yet',
+        plansTitle: 'Coding Plan quotas', plansHint: 'Paste an API key per subscription to query remaining quota. Keys stay in the local settings.json — never echoed, never uploaded.',
+        plansSave: 'Save', plansSaved: 'Saved', plansRefresh: 'Refresh', plansRefreshAll: 'Refresh all',
+        plansConfigured: 'configured', plansError: 'Query failed',
+        winFiveHour: '5-hour', winWeekly: 'This week', winMonthly: 'Monthly', winBalance: 'Balance',
+        winCredits: 'Credits', winPlan: 'Plan', winCompensation: 'Bonus', winCurrent: 'Current',
+        winResets: 'Resets', winUnlimited: 'Unlimited',
+        planAnthropic: 'Anthropic (Claude Pro/Max)', planZai: 'Z.ai / Zhipu GLM Coding Plan',
+        planMinimax: 'MiniMax Token Plan', planKimi: 'Kimi Code / Moonshot',
+        planOpenrouter: 'OpenRouter', planSiliconflow: 'SiliconFlow',
+        planCommandcode: 'CommandCode', planClinepass: 'Cline Pass',
+        langHint: 'Host-registered labels (e.g. the settings section title) apply after a window reload',
+      },
+    }
+    let lang = 'zh'
+    try {
+      const saved = localStorage.getItem(LANG_KEY)
+      lang = saved === 'zh' || saved === 'en'
+        ? saved
+        : (navigator.language ?? 'zh').toLowerCase().startsWith('zh') ? 'zh' : 'en'
+    } catch { /* 无 localStorage：保持跟随系统默认 */ }
+    const t = (key) => STRINGS[lang][key] ?? STRINGS.zh[key] ?? key
+    /** 切语言：写 localStorage 并广播一次，让所有 useCostState 订阅组件重渲染。 */
+    function setLang(value) {
+      const next = value === 'en' || value === 'zh'
+        ? value
+        : ((navigator.language ?? 'zh').toLowerCase().startsWith('zh') ? 'zh' : 'en')
+      if (next === lang) return
+      lang = next
+      try { localStorage.setItem(LANG_KEY, lang) } catch { /* ignore */ }
+      for (const listener of listeners) {
+        try { listener(latestState) } catch { /* 单订阅者异常不断链 */ }
+      }
+    }
+
     /* 官方 token 配色（compaction-control / cost-meter 同基准），无自创色。 */
     const CSS = `
 .dsh-cost-inline {
@@ -223,6 +325,43 @@ body[data-ds-dark-theme] .dsh-cost-pop {
 .dsh-cost-fill { height: 100%; border-radius: 3px; background: var(--dsw-alias-brand-primary); }
 .dsh-cost-fill.warn { background: var(--dsw-alias-state-warn-primary); }
 .dsh-cost-fill.over { background: var(--dsw-alias-state-error-primary); }
+/* 用量热力图（GitHub 贡献图样式；色阶用官方品牌色 color-mix） */
+.dsh-cost-heat { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--dsw-alias-bg-layer-1, transparent); }
+.dsh-cost-heat-head { display: flex; align-items: center; gap: 8px; }
+.dsh-cost-heat-title { font-size: 12px; line-height: 20px; color: var(--dsw-alias-label-tertiary); flex: 1; }
+.dsh-cost-heat-toggle { display: flex; gap: 2px; }
+.dsh-cost-heat-toggle button { border: none; background: transparent; color: var(--dsw-alias-label-tertiary); font-size: 11px; line-height: 18px; padding: 1px 8px; border-radius: 4px; cursor: pointer; }
+.dsh-cost-heat-toggle button[aria-pressed="true"] { background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.2)); color: var(--dsw-alias-label-primary); }
+.dsh-cost-heat-months { display: flex; gap: 3px; margin-left: 18px; height: 11px; font-size: 10px; line-height: 11px; color: var(--dsw-alias-label-tertiary); }
+.dsh-cost-heat-months span { width: 11px; flex: none; overflow: visible; white-space: nowrap; }
+.dsh-cost-heat-weeks { display: flex; flex-direction: column; width: 14px; flex: none; font-size: 10px; line-height: 11px; color: var(--dsw-alias-label-tertiary); }
+.dsh-cost-heat-grid { display: flex; gap: 3px; overflow-x: auto; height: 95px; align-items: flex-start; }
+.dsh-cost-heat-col { display: flex; flex-direction: column; gap: 3px; flex: none; }
+.dsh-cost-heat-cell { width: 11px; height: 11px; border-radius: 2.5px; background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.22)); flex: none; }
+.dsh-cost-heat-cell.blank { visibility: hidden; }
+.dsh-cost-heat-legend { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--dsw-alias-label-tertiary); }
+.dsh-cost-heat-legend .dsh-cost-heat-cell { width: 9px; height: 9px; }
+/* Coding Plan 配额面板 */
+.dsh-cost-plans { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--dsw-alias-bg-layer-1, transparent); }
+.dsh-cost-plans-head { display: flex; align-items: center; gap: 8px; }
+.dsh-cost-plans-title { font-size: 12px; line-height: 20px; color: var(--dsw-alias-label-primary); flex: 1; cursor: pointer; user-select: none; }
+.dsh-cost-plans-caret { font-size: 10px; color: var(--dsw-alias-label-tertiary); flex: none; width: 12px; }
+.dsh-cost-plans-hint { font-size: 11px; line-height: 16px; color: var(--dsw-alias-label-tertiary); }
+.dsh-cost-plan { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border-radius: 8px; background: var(--dsw-alias-bg-layer-2, transparent); }
+.dsh-cost-plan-row { display: flex; align-items: center; gap: 8px; }
+.dsh-cost-plan-name { font-size: 12px; line-height: 20px; color: var(--dsw-alias-label-primary); flex: 1 1 40%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsh-cost-plan-input { flex: 2 1 180px; min-width: 0; height: 24px; padding: 0 8px; border: 1px solid var(--dsw-alias-border-l1, transparent); border-radius: 6px; background: var(--dsw-alias-bg-layer-1, transparent); color: var(--dsw-alias-label-primary); font-size: 12px; outline: none; }
+.dsh-cost-plan-input:focus { border-color: var(--dsw-alias-brand-primary); }
+.dsh-cost-plan-btn { flex: none; border: none; border-radius: 6px; background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.2)); color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 20px; padding: 0 10px; cursor: pointer; }
+.dsh-cost-plan-btn:hover { color: var(--dsw-alias-label-primary); }
+.dsh-cost-plan-btn[disabled] { opacity: 0.45; cursor: default; }
+.dsh-cost-plan-win { display: flex; align-items: center; gap: 8px; font-size: 11.5px; line-height: 18px; font-variant-numeric: tabular-nums; }
+.dsh-cost-plan-win .dsh-cost-plan-winname { flex: none; width: 68px; color: var(--dsw-alias-label-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsh-cost-plan-win .dsh-cost-plan-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.2)); overflow: hidden; }
+.dsh-cost-plan-win .dsh-cost-plan-fill { height: 100%; border-radius: 2px; background: var(--dsw-alias-brand-primary); }
+.dsh-cost-plan-win .dsh-cost-plan-fill.hot { background: var(--dsw-alias-state-warn-primary); }
+.dsh-cost-plan-win .dsh-cost-plan-pct { flex: none; min-width: 88px; text-align: right; color: var(--dsw-alias-label-tertiary); }
+.dsh-cost-plan-err { font-size: 11.5px; line-height: 18px; color: var(--dsw-alias-label-tertiary); overflow-wrap: anywhere; }
 `
 
     function ensureStyle() {
@@ -250,11 +389,11 @@ body[data-ds-dark-theme] .dsh-cost-pop {
         if (budgetNoticeKey === key) return
         budgetNoticeKey = key
         if (typeof Notification === 'undefined') return
-        const periodLabel = budget.period === 'day' ? '今日' : budget.period === 'month' ? '本月' : '累计'
+        const periodLabel = t(budget.period === 'day' ? 'budgetPeriodDay' : budget.period === 'month' ? 'budgetPeriodMonth' : 'budgetPeriodAll')
         const fire = () => {
           try {
-            const n = new Notification('dsh 费用预算已超限', {
-              body: `${periodLabel}费用 ¥${Number(budget.used).toFixed(2)}，已达预算 ¥${Number(budget.amount).toFixed(2)} 的 ${(budget.usedPct * 100).toFixed(0)}%。`,
+            const n = new Notification(t('budgetOverTitle'), {
+              body: t('budgetOverBody')(periodLabel, Number(budget.used).toFixed(2), Number(budget.amount).toFixed(2), (budget.usedPct * 100).toFixed(0)),
             })
             n.onclick = () => { window.focus?.(); n.close() }
           } catch { /* 通知不可用：UI 超限变色兜底 */ }
@@ -488,8 +627,8 @@ body[data-ds-dark-theme] .dsh-cost-pop {
       if (!state) return null
       const today = state.today
       const title = today
-        ? `${today.calls} 次调用 · token ${(tokensOf(today) / 1000).toFixed(1)}k · ${state.peak?.isPeak ? '峰时' : '谷时'}`
-        : '今日暂无调用'
+        ? `${today.calls} ${t('callsUnit')} · token ${(tokensOf(today) / 1000).toFixed(1)}k · ${state.peak?.isPeak ? t('peakNow') : t('offPeakNow')}`
+        : t('noCallsToday')
       const overBudget = state.budget && state.budget.usedPct >= 0.8
       return h('button', {
         type: 'button',
@@ -497,13 +636,14 @@ body[data-ds-dark-theme] .dsh-cost-pop {
         title,
         onClick: () => { void pollOnce() },
       },
-      h('span', null, '今日'),
+      h('span', null, t('todaySidebar')),
       h('span', { className: 'dsh-cost-sidebar-value' }, moneyOf(state, today?.cost ?? 0)))
     }
 
     /* -- 回合边界感知（turnTail 槽位，隐形数据载体） -------------------- */
 
-    const TURN_BUCKET_NAMES = { input: '输入', output: '输出', cacheRead: '缓存读取', cacheWrite: '缓存写入', reasoning: '推理' }
+    const TURN_BUCKET_KEYS = { input: 'bucketInput', output: 'bucketOutput', cacheRead: 'bucketCacheRead', cacheWrite: 'bucketCacheWrite', reasoning: 'bucketReasoning' }
+    const turnBucketName = (bucket) => t(TURN_BUCKET_KEYS[bucket] ?? bucket)
 
     /**
      * 用户要求去掉回合尾部的可见费用行（0.6.1）；此组件退化为隐形载体：
@@ -541,7 +681,7 @@ body[data-ds-dark-theme] .dsh-cost-pop {
         if (lastAlertedSwitch === nextSwitchAtMs) return
         lastAlertedSwitch = nextSwitchAtMs
         const time = new Date(nextSwitchAtMs).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-        const text = state.peak.nextIsPeak ? `即将进入峰时计价（${time}）` : `即将进入谷时计价（${time}）`
+        const text = state.peak.nextIsPeak ? t('peakSoonPeak')(time) : t('peakSoonOff')(time)
         setMessage(text)
         setVisible(true)
         if (alerts.notify) {
@@ -551,7 +691,7 @@ body[data-ds-dark-theme] .dsh-cost-pop {
       if (!visible) return null
       return createPortal(h('div', { className: 'dsh-cost-alert' },
         h('span', null, message),
-        h('button', { type: 'button', onClick: () => setVisible(false) }, '知道了')), document.body)
+        h('button', { type: 'button', onClick: () => setVisible(false) }, t('gotIt'))), document.body)
     }
 
     /* -- 动作行费用按钮：锚定在官方「用量」按钮旁，弹卡同官方样式 ------- */
@@ -590,7 +730,7 @@ body[data-ds-dark-theme] .dsh-cost-pop {
       if (!from || !to) return
       const pop = document.createElement('div')
       pop.className = 'dsh-cost-pop'
-      pop.textContent = '加载中…'
+      pop.textContent = t('loading')
       document.body.appendChild(pop)
       usageAnchors.pop = pop
       usageAnchors.anchor = anchor
@@ -608,7 +748,7 @@ body[data-ds-dark-theme] .dsh-cost-pop {
           const head = document.createElement('div')
           head.className = 'dsh-cost-pop-head'
           const title = document.createElement('span')
-          title.textContent = '本轮费用'
+          title.textContent = t('turnCostPop')
           const total = document.createElement('span')
           total.className = 'dsh-cost-pop-num'
           total.textContent = value.found ? moneyOf(latestState, value.cost) : '—'
@@ -619,7 +759,7 @@ body[data-ds-dark-theme] .dsh-cost-pop {
             const line = document.createElement('div')
             line.className = 'dsh-cost-pop-row'
             const label = document.createElement('span')
-            label.textContent = `${String(row.model ?? '').replace(/^deepseek-/, '')} · ${TURN_BUCKET_NAMES[row.bucket] ?? row.bucket}`
+            label.textContent = `${String(row.model ?? '').replace(/^deepseek-/, '')} · ${turnBucketName(row.bucket)}`
             const numEl = document.createElement('span')
             numEl.className = 'dsh-cost-pop-num'
             numEl.textContent = `${Number(row.tokens).toLocaleString()} tok · ${moneyOf(latestState, row.cost)}`
@@ -630,7 +770,7 @@ body[data-ds-dark-theme] .dsh-cost-pop {
           if (!value.found) {
             const empty = document.createElement('div')
             empty.className = 'dsh-cost-pop-row'
-            empty.textContent = '该回合暂无用量记录'
+            empty.textContent = t('turnEmpty')
             pop.appendChild(empty)
           }
         })
@@ -652,7 +792,7 @@ body[data-ds-dark-theme] .dsh-cost-pop {
         const anchor = document.createElement('button')
         anchor.className = 'dsh-cost-usage-anchor'
         anchor.type = 'button'
-        anchor.textContent = '费用 —'
+        anchor.textContent = `${t('turnCost')} —`
         const from = details.getAttribute('data-turn-from') ?? ''
         const to = details.getAttribute('data-turn-to') ?? ''
         anchor.dataset.turnFrom = from
@@ -673,10 +813,10 @@ body[data-ds-dark-theme] .dsh-cost-pop {
           .then((res) => (res.ok ? res.json() : null))
           .then((value) => {
             if (value?.found && anchor.isConnected) {
-              anchor.textContent = `费用 ${moneyOf(latestState, value.cost)}`
-              anchor.title = '本轮费用明细'
+              anchor.textContent = `${t('turnCost')} ${moneyOf(latestState, value.cost)}`
+              anchor.title = t('turnCostTitle')
             } else if (anchor.isConnected) {
-              anchor.textContent = '费用 —'
+              anchor.textContent = `${t('turnCost')} —`
             }
           })
           .catch(() => {})
@@ -707,10 +847,10 @@ body[data-ds-dark-theme] .dsh-cost-pop {
       if (!budget) return null
       const pct = Math.min(100, Math.max(0, budget.usedPct * 100))
       const tier = budget.usedPct >= 1 ? 'over' : budget.usedPct >= 0.8 ? 'warn' : ''
-      const periodLabel = budget.period === 'day' ? '今日' : budget.period === 'month' ? '本月' : '累计'
+      const periodLabel = t(budget.period === 'day' ? 'budgetPeriodDay' : budget.period === 'month' ? 'budgetPeriodMonth' : 'budgetPeriodAll')
       return h('div', { className: 'dsh-cost-budget' },
         h('div', { className: 'dsh-cost-budget-head' },
-          h('span', null, `预算（${periodLabel}）`),
+          h('span', null, `${t('budget')} · ${periodLabel}`),
           h('span', null, `¥${Number(budget.used).toFixed(2)} / ¥${Number(budget.amount).toFixed(2)} · ${(budget.usedPct * 100).toFixed(0)}%`)),
         h('div', { className: 'dsh-cost-bar' }, h('div', { className: `dsh-cost-fill ${tier}`, style: { width: `${pct}%` } })))
     }
@@ -751,7 +891,8 @@ body[data-ds-dark-theme] .dsh-cost-pop {
 
     /* -- 状态行费用 pill：累计费用，点开看每笔调用（含提示词增强） ------ */
 
-    const SOURCE_LABEL = { chat: '对话', enhance: '提示词增强', followup: '跟进建议' }
+    const SOURCE_KEYS = { chat: 'srcChat', enhance: 'srcEnhance', followup: 'srcFollowup' }
+    const sourceLabel = (key) => t(SOURCE_KEYS[key] ?? key)
     let overviewPop = null
 
     function closeOverviewPop(event) {
@@ -772,7 +913,7 @@ body[data-ds-dark-theme] .dsh-cost-pop {
       const head = document.createElement('div')
       head.className = 'dsh-cost-pop-head'
       const title = document.createElement('span')
-      title.textContent = '本对话费用'
+      title.textContent = t('sessionCost')
       const sum = document.createElement('span')
       sum.textContent = moneyOf(state, data.total?.cost ?? 0)
       head.append(title, sum)
@@ -783,7 +924,7 @@ body[data-ds-dark-theme] .dsh-cost-pop {
       balRow.className = 'dsh-cost-src'
       const balName = document.createElement('span')
       balName.className = 'name'
-      balName.textContent = '官方余额'
+      balName.textContent = t('officialBalance')
       const balNum = document.createElement('span')
       balNum.className = 'num'
       balNum.textContent = '…'
@@ -809,10 +950,10 @@ body[data-ds-dark-theme] .dsh-cost-pop {
         row.className = 'dsh-cost-src'
         const name = document.createElement('span')
         name.className = 'name'
-        name.textContent = SOURCE_LABEL[key] ?? key
+        name.textContent = sourceLabel(key)
         const cnt = document.createElement('span')
         cnt.className = 'cnt'
-        cnt.textContent = entry.calls + ' 次'
+        cnt.textContent = `${entry.calls}${t('callTimes')}`
         const num = document.createElement('span')
         num.className = 'num'
         num.textContent = moneyOf(state, entry.cost)
@@ -824,7 +965,7 @@ body[data-ds-dark-theme] .dsh-cost-pop {
       sep.className = 'dsh-cost-pop-head'
       sep.style.marginTop = '8px'
       const sepTitle = document.createElement('span')
-      sepTitle.textContent = '最近调用'
+      sepTitle.textContent = t('recentCalls')
       sep.appendChild(sepTitle)
       box.appendChild(sep)
 
@@ -833,10 +974,10 @@ body[data-ds-dark-theme] .dsh-cost-pop {
         row.className = 'dsh-cost-src'
         const time = document.createElement('span')
         time.className = 'cnt'
-        time.textContent = new Date(call.at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+        time.textContent = new Date(call.at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
         const name = document.createElement('span')
         name.className = 'name'
-        name.textContent = (SOURCE_LABEL[call.source] ?? call.source) + ' · ' + (call.model || '—')
+        name.textContent = sourceLabel(call.source) + ' · ' + (call.model || '—')
         const num = document.createElement('span')
         num.className = 'num'
         num.textContent = moneyOf(state, call.cost)
@@ -917,7 +1058,7 @@ body[data-ds-dark-theme] .dsh-cost-pop {
         type: 'button',
         className: 'dsh-cost-pill',
         'aria-expanded': open ? 'true' : 'false',
-        title: '费用明细',
+        title: t('costDetail'),
         // 数值全部来自 dsh 的状态行规范：font-size 12px / line-height 20px /
         // 文字色 --dsw-alias-label-tertiary(暗色 rgb(173,178,184)) /
         // padding 1px 8px / 圆角 --dsw-radius-sm(8px)。不用 inherit，宿主那层
@@ -948,6 +1089,254 @@ body[data-ds-dark-theme] .dsh-cost-pop {
       }, amount))
     }
 
+    /* -- 用量热力图（GitHub 贡献图样式：周列 × 星期行，官方品牌色色阶） -- */
+
+    const HEAT_LEVEL_MIX = [0, 28, 52, 76, 100]
+    const heatLevelColor = (level) => level > 0
+      ? `color-mix(in srgb, var(--dsw-alias-brand-primary) ${HEAT_LEVEL_MIX[level]}%, transparent)`
+      : ''
+
+    function HeatmapCard() {
+      useCostState() // 轮询触发重渲染，让热力图跟着账本更新
+      const [data, setData] = React.useState(null)
+      const [metric, setMetric] = React.useState(() => {
+        try { return localStorage.getItem('dsh-cost-heat-metric') === 'calls' || localStorage.getItem('dsh-cost-heat-metric') === 'tokens' ? localStorage.getItem('dsh-cost-heat-metric') : 'cost' } catch { return 'cost' }
+      })
+      React.useEffect(() => {
+        let alive = true
+        let lastAt = 0
+        const load = (force) => {
+          const now = Date.now()
+          if (!force && now - lastAt < 60_000) return
+          lastAt = now
+          fetch(`${ENDPOINT}/heatmap?days=182`, { cache: 'no-store' })
+            .then((res) => (res.ok ? res.json() : null))
+            .then((value) => { if (alive && value && Array.isArray(value.days)) setData(value) })
+            .catch(() => {})
+        }
+        load(true)
+        const timerId = setInterval(() => load(false), POLL_MS * 4)
+        return () => { alive = false; clearInterval(timerId) }
+      }, [])
+      const pickMetric = (value) => {
+        setMetric(value)
+        try { localStorage.setItem('dsh-cost-heat-metric', value) } catch { /* ignore */ }
+      }
+      if (!data || !Array.isArray(data.days) || data.days.length === 0) {
+        return h('div', { className: 'dsh-cost-heat' },
+          h('div', { className: 'dsh-cost-heat-head' }, h('span', { className: 'dsh-cost-heat-title' }, t('heatTitle'))),
+          h('div', { className: 'dsh-cost-empty' }, t('heatEmpty')))
+      }
+      const state = latestState
+      const metricOf = (day) => (metric === 'calls' ? day.calls ?? 0 : metric === 'tokens' ? day.tokens ?? 0 : day.cost ?? 0)
+      const metricText = (day) => metric === 'calls'
+        ? `${day.calls ?? 0} ${t('callsUnit')}`
+        : metric === 'tokens' ? `${(day.tokens ?? 0).toLocaleString()} tok` : moneyOf(state, day.cost ?? 0)
+      const byDate = new Map(data.days.map((day) => [day.date, day]))
+      // 182 天窗口对齐周一（0=周日 → getDay()==0 时前推 6 天）。
+      const end = new Date()
+      end.setHours(12, 0, 0, 0)
+      const start = new Date(end.getTime() - 181 * 86400000)
+      start.setDate(start.getDate() - ((start.getDay() + 6) % 7))
+      const columns = []
+      let max = 0
+      const cursor = new Date(start)
+      while (cursor <= end) {
+        const col = []
+        for (let i = 0; i < 7 && cursor <= end; i += 1) {
+          const key = `${cursor.getFullYear()}-${String(cursor.getMonth() + 1).padStart(2, '0')}-${String(cursor.getDate()).padStart(2, '0')}`
+          const day = byDate.get(key) ?? { date: key, cost: 0, calls: 0, tokens: 0 }
+          max = Math.max(max, metricOf(day))
+          col.push(day)
+          cursor.setDate(cursor.getDate() + 1)
+        }
+        columns.push(col)
+        // 补齐当前周剩余（未来日期 → 空白占位，保持 7 行对齐）。
+        while (col.length < 7) col.push(null)
+      }
+      const levelOf = (value) => {
+        if (!(value > 0) || !(max > 0)) return 0
+        const ratio = value / max
+        return ratio > 0.75 ? 4 : ratio > 0.5 ? 3 : ratio > 0.25 ? 2 : 1
+      }
+      const weekLabels = lang === 'zh' ? ['一', '三', '五'] : ['M', 'W', 'F']
+      const months = columns.map((col, index) => {
+        const first = col.find(Boolean)
+        if (!first) return ''
+        const month = Number(first.date.slice(5, 7))
+        const prev = index > 0 ? columns[index - 1].find(Boolean) : null
+        return prev && Number(prev.date.slice(5, 7)) === month ? '' : String(month)
+      })
+      return h('div', { className: 'dsh-cost-heat' },
+        h('div', { className: 'dsh-cost-heat-head' },
+          h('span', { className: 'dsh-cost-heat-title' }, t('heatTitle')),
+          h('div', { className: 'dsh-cost-heat-toggle' },
+            ['cost', 'calls', 'tokens'].map((value) => h('button', {
+              type: 'button',
+              key: value,
+              'aria-pressed': metric === value ? 'true' : 'false',
+              onClick: () => pickMetric(value),
+            }, value === 'cost' ? t('heatCost') : value === 'calls' ? t('heatCalls') : t('heatTokens'))))),
+        h('div', { className: 'dsh-cost-heat-months' },
+          months.map((label, index) => h('span', { key: index }, label))),
+        h('div', { style: { display: 'flex', gap: '4px' } },
+          h('div', { className: 'dsh-cost-heat-weeks' },
+            [0, 2, 4].map((row, idx) => h('span', {
+              key: row,
+              style: { display: 'block', height: '11px', lineHeight: '11px', marginTop: idx === 0 ? '0' : '17px' },
+            }, weekLabels[idx]))),
+          h('div', { className: 'dsh-cost-heat-grid' },
+            columns.map((col, colIndex) => h('div', { className: 'dsh-cost-heat-col', key: col[0]?.date ?? colIndex },
+              col.map((day, rowIndex) => {
+                if (!day) return h('div', { className: 'dsh-cost-heat-cell blank', key: `blank-${rowIndex}` })
+                const level = levelOf(metricOf(day))
+                return h('div', {
+                  className: 'dsh-cost-heat-cell',
+                  key: day.date,
+                  style: level > 0 ? { background: heatLevelColor(level) } : undefined,
+                  title: `${day.date} · ${metricText(day)}`,
+                })
+              }))))),
+        h('div', { className: 'dsh-cost-heat-legend' },
+          t('heatLess'),
+          HEAT_LEVEL_MIX.map((_, level) => h('div', {
+            className: 'dsh-cost-heat-cell',
+            key: level,
+            style: level > 0 ? { background: heatLevelColor(level) } : undefined,
+          })),
+          t('heatMore')))
+    }
+
+    /* -- Coding Plan 配额面板（订阅额度适配器，Key 只存本机） ---------- */
+
+    const CODING_PLAN_LIST = ['anthropic', 'zai', 'kimi', 'minimax', 'openrouter', 'siliconflow', 'commandcode', 'clinepass']
+    const CODING_PLAN_LABEL_KEYS = {
+      anthropic: 'planAnthropic', zai: 'planZai', minimax: 'planMinimax', kimi: 'planKimi',
+      openrouter: 'planOpenrouter', siliconflow: 'planSiliconflow', commandcode: 'planCommandcode', clinepass: 'planClinepass',
+    }
+    const PLAN_WINDOW_KEYS = {
+      fiveHour: 'winFiveHour', '5h': 'winFiveHour', weekly: 'winWeekly', '7d': 'winWeekly',
+      monthly: 'winMonthly', month: 'winMonthly', balance: 'winBalance', credits: 'winCredits',
+      plan: 'winPlan', compensation: 'winCompensation', current: 'winCurrent',
+    }
+    const planWindowName = (name) => t(PLAN_WINDOW_KEYS[name] ?? name)
+
+    function CodingPlansCard() {
+      const [open, setOpen] = React.useState(() => {
+        try { return localStorage.getItem('dsh-cost-plans-open') === '1' } catch { return false }
+      })
+      const [providers, setProviders] = React.useState(null)
+      const [drafts, setDrafts] = React.useState({})
+      const [notes, setNotes] = React.useState({})
+      const load = React.useCallback(() => {
+        fetch(`${ENDPOINT}/coding-plans`, { cache: 'no-store' })
+          .then((res) => (res.ok ? res.json() : null))
+          .then((value) => { if (value && typeof value.providers === 'object') setProviders(value.providers) })
+          .catch(() => {})
+      }, [])
+      React.useEffect(() => {
+        if (!open) return undefined
+        load()
+        const timerId = setInterval(load, 60_000)
+        return () => clearInterval(timerId)
+      }, [open, load])
+      const toggle = () => {
+        const next = !open
+        setOpen(next)
+        try { localStorage.setItem('dsh-cost-plans-open', next ? '1' : '0') } catch { /* ignore */ }
+      }
+      const save = async (id) => {
+        const key = String(drafts[id] ?? '').trim()
+        if (!key) return
+        try {
+          await fetch(`${ENDPOINT}/coding-plans/config`, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ provider: id, key }),
+          })
+          setNotes((m) => ({ ...m, [id]: t('plansSaved') }))
+          setDrafts((m) => ({ ...m, [id]: '' }))
+          await fetch(`${ENDPOINT}/coding-plans/refresh`, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ provider: id }),
+          })
+        } catch { /* 下轮轮询兜底 */ }
+        load()
+      }
+      const refreshAll = async () => {
+        try {
+          await fetch(`${ENDPOINT}/coding-plans/refresh`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' })
+        } catch { /* ignore */ }
+        load()
+      }
+      const resetAtText = (iso) => {
+        const ms = Date.parse(iso)
+        return Number.isFinite(ms)
+          ? ` · ${t('winResets')} ${new Date(ms).toLocaleString([], { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}`
+          : ''
+      }
+      return h('div', { className: 'dsh-cost-plans' },
+        h('div', { className: 'dsh-cost-plans-head' },
+          h('span', { className: 'dsh-cost-plans-caret' }, open ? '▾' : '▸'),
+          h('span', { className: 'dsh-cost-plans-title', onClick: toggle }, t('plansTitle')),
+          open && providers != null
+            ? h('button', { type: 'button', className: 'dsh-cost-plan-btn', onClick: () => { void refreshAll() } }, t('plansRefreshAll'))
+            : null),
+        open
+          ? h('div', { className: 'dsh-cost-plans-hint' }, t('plansHint'))
+          : null,
+        open
+          ? CODING_PLAN_LIST.map((id) => {
+            const info = providers?.[id] ?? { hasKey: false }
+            const windows = info.windows ?? null
+            return h('div', { className: 'dsh-cost-plan', key: id },
+              h('div', { className: 'dsh-cost-plan-row' },
+                h('span', { className: 'dsh-cost-plan-name', title: t(CODING_PLAN_LABEL_KEYS[id]) }, t(CODING_PLAN_LABEL_KEYS[id])),
+                h('input', {
+                  className: 'dsh-cost-plan-input',
+                  type: 'password',
+                  autoComplete: 'off',
+                  placeholder: info.hasKey ? `••••••（${t('plansConfigured')}）` : 'API Key',
+                  value: drafts[id] ?? '',
+                  onChange: (event) => setDrafts((m) => ({ ...m, [id]: event.target.value })),
+                  onKeyDown: (event) => { if (event.key === 'Enter') void save(id) },
+                }),
+                h('button', {
+                  type: 'button',
+                  className: 'dsh-cost-plan-btn',
+                  disabled: !String(drafts[id] ?? '').trim(),
+                  onClick: () => { void save(id) },
+                }, t('plansSave')),
+                notes[id]
+                  ? h('span', { className: 'dsh-cost-plan-btn', style: { background: 'transparent', cursor: 'default' } }, notes[id])
+                  : null),
+              !info.hasKey
+                ? null
+                : info.error
+                  ? h('div', { className: 'dsh-cost-plan-err' }, `${t('plansError')}: ${info.error}`)
+                  : windows && Object.keys(windows).length > 0
+                    ? Object.entries(windows).map(([name, win]) => {
+                      const bar = win.unlimited
+                        ? null
+                        : h('div', { className: 'dsh-cost-plan-bar' },
+                          h('div', {
+                            className: 'dsh-cost-plan-fill' + (Number(win.percent) >= 80 ? ' hot' : ''),
+                            style: { width: `${Math.min(100, Math.max(0, Number(win.percent) || 0))}%` },
+                          }))
+                      const pct = win.unlimited
+                        ? t('winUnlimited')
+                        : `${(Number(win.percent) || 0).toFixed(1)}%${resetAtText(win.resetsAt)}`
+                      return h('div', { className: 'dsh-cost-plan-win', key: name },
+                        h('span', { className: 'dsh-cost-plan-winname', title: name }, planWindowName(name)),
+                        bar ?? h('span', { className: 'dsh-cost-plan-winname', style: { flex: 1 } }, String(win.text ?? '')),
+                        h('span', { className: 'dsh-cost-plan-pct' }, pct))
+                    })
+                    : h('div', { className: 'dsh-cost-plan-err' }, '…'))
+          })
+          : null)
+    }
+
     function CostSection() {
       const state = useCostState()
       const forecast = useForecast()
@@ -959,40 +1348,40 @@ body[data-ds-dark-theme] .dsh-cost-pop {
       const forecastCard = forecast && forecast.basis === 'recent'
         ? h('div', { className: 'dsh-cost-forecast', 'data-over': String(!!overBudget) },
           h('div', { className: 'dsh-cost-forecast-head' },
-            h('span', { className: 'dsh-cost-card-title' }, '月底预计'),
+            h('span', { className: 'dsh-cost-card-title' }, t('monthForecast')),
             h('span', { className: 'dsh-cost-forecast-value' }, moneyOf(state, forecast.projected))),
           h('div', { className: 'dsh-cost-forecast-sub' },
-            `已花 ${moneyOf(state, forecast.monthCost)} · 日均 ${moneyOf(state, forecast.avgDaily)} · 剩 ${forecast.daysLeft} 天${overBudget ? ' · 超出预算' : ''}`))
+            `${t('spent')}${moneyOf(state, forecast.monthCost)} · ${t('dailyAvg')}${moneyOf(state, forecast.avgDaily)} · ${t('daysLeft')(forecast.daysLeft)}${overBudget ? ` · ${t('overBudget')}` : ''}`))
         : forecast && forecast.basis === 'insufficient'
           ? h('div', { className: 'dsh-cost-forecast' },
             h('div', { className: 'dsh-cost-forecast-sub' },
-              `预测需要至少 3 天完整数据（当前 ${forecast.sampleDays ?? 0} 天）`))
+              t('forecastNeedDays')(forecast.sampleDays ?? 0)))
           : null
       const cards = h('div', { className: 'dsh-cost-cards' },
-        h(CostCard, { title: '今日', row: state?.today, state }),
-        h(CostCard, { title: '本月', row: state?.month, state }),
-        h(CostCard, { title: '累计', row: state?.total, state }))
+        h(CostCard, { title: t('today'), row: state?.today, state }),
+        h(CostCard, { title: t('thisMonth'), row: state?.month, state }),
+        h(CostCard, { title: t('total'), row: state?.total, state }))
       const recent = Array.isArray(state?.recent) && state.recent.length > 0
         ? h('div', { className: 'dsh-cost-table' },
           state.recent.slice().reverse().map((day) => h('div', { className: 'dsh-cost-row', key: day.date },
             h('span', { className: 'dsh-cost-dim' }, day.date.slice(5)),
-            h('span', { className: 'dsh-cost-grow' }, `${day.calls} 次调用`),
+            h('span', { className: 'dsh-cost-grow' }, `${day.calls} ${t('callsUnit')}`),
             h('span', { className: 'dsh-cost-num' }, moneyOf(state, day.cost)))))
-        : h('div', { className: 'dsh-cost-table' }, h('div', { className: 'dsh-cost-empty' }, '暂无记录'))
+        : h('div', { className: 'dsh-cost-table' }, h('div', { className: 'dsh-cost-empty' }, t('noRecords')))
       const sessions = Array.isArray(state?.sessions) && state.sessions.length > 0
         ? h('div', { className: 'dsh-cost-table' },
           state.sessions.slice(0, 10).map((session) => h('div', { className: 'dsh-cost-row', key: `${session.date}-${session.id}` },
             h('span', { className: 'dsh-cost-dim' }, new Date(session.at || session.date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })),
             h('span', { className: 'dsh-cost-grow' }, String(session.id).replace(/^session-/, '').slice(0, 8)),
-            h('span', { className: 'dsh-cost-grow' }, `${session.calls} 次`),
+            h('span', { className: 'dsh-cost-grow' }, `${session.calls}${t('callTimes')}`),
             h('span', { className: 'dsh-cost-num' }, moneyOf(state, session.cost)))))
         : null
       const footerBits = []
       if (state?.peak) {
-        footerBits.push(h('span', { className: 'dsh-cost-badge', key: 'peak' }, state.peak.isPeak ? '峰时计价' : '谷时计价'))
+        footerBits.push(h('span', { className: 'dsh-cost-badge', key: 'peak' }, state.peak.isPeak ? t('peakBadge') : t('offPeakBadge')))
       }
       if (Array.isArray(state?.unmatched) && state.unmatched.length > 0) {
-        footerBits.push(h('span', { className: 'dsh-cost-badge', key: 'unmatched', title: state.unmatched.join(', ') }, `${state.unmatched.length} 个模型按默认档计费`))
+        footerBits.push(h('span', { className: 'dsh-cost-badge', key: 'unmatched', title: state.unmatched.join(', ') }, `${state.unmatched.length} ${t('unmatchedModels')}`))
       }
       const downloadExport = (format) => {
         const link = document.createElement('a')
@@ -1002,8 +1391,8 @@ body[data-ds-dark-theme] .dsh-cost-pop {
         link.click()
         link.remove()
       }
-      footerBits.push(h('button', { className: 'dsh-cost-badge action', key: 'export-json', title: '导出全部费用记录（JSON）', onClick: () => downloadExport('json') }, '导出 JSON'))
-      footerBits.push(h('button', { className: 'dsh-cost-badge action', key: 'export-csv', title: '导出日汇总（CSV）', onClick: () => downloadExport('csv') }, '导出 CSV'))
+      footerBits.push(h('button', { className: 'dsh-cost-badge action', key: 'export-json', title: t('exportJsonTitle'), onClick: () => downloadExport('json') }, t('exportJson')))
+      footerBits.push(h('button', { className: 'dsh-cost-badge action', key: 'export-csv', title: t('exportCsvTitle'), onClick: () => downloadExport('csv') }, t('exportCsv')))
       // 官方价格同步 + 汇率刷新（点击后按钮短暂显示结果，再自动复原）。
       const [syncNote, setSyncNote] = React.useState('')
       React.useEffect(() => {
@@ -1016,22 +1405,35 @@ body[data-ds-dark-theme] .dsh-cost-pop {
           const res = await fetch(`${ENDPOINT}/${endpoint}`, { method: 'POST' })
           const data = await res.json().catch(() => null)
           if (res.ok && data?.ok) setSyncNote(okLabel)
-          else setSyncNote(`失败：${data?.error ?? res.status}`)
+          else setSyncNote(`${t('failed')}: ${data?.error ?? res.status}`)
           if (res.ok) void pollOnce()
-        } catch (error) { setSyncNote(`失败：${String(error?.message ?? error).slice(0, 60)}`) }
+        } catch (error) { setSyncNote(`${t('failed')}: ${String(error?.message ?? error).slice(0, 60)}`) }
       }
       footerBits.push(h('button', {
         className: 'dsh-cost-badge action',
         key: 'sync-prices',
-        title: '从官方定价页同步现行价格（峰谷两档，历史账目不受影响）',
-        onClick: () => { void postSync('fetch-prices', '价格已同步') },
-      }, '同步官方价格'))
+        title: t('syncPricesTitle'),
+        onClick: () => { void postSync('fetch-prices', t('priceSynced')) },
+      }, t('syncPrices')))
       footerBits.push(h('button', {
         className: 'dsh-cost-badge action',
         key: 'sync-rate',
-        title: '立即刷新 USD→CNY 汇率（平时每小时自动刷新）',
-        onClick: () => { void postSync('fetch-rate', '汇率已刷新') },
-      }, '刷新汇率'))
+        title: t('refreshRateTitle'),
+        onClick: () => { void postSync('fetch-rate', t('rateRefreshed')) },
+      }, t('refreshRate')))
+      // 界面语言：中文 / English 两枚徽标按钮，立即生效（宿主注册项刷新后生效）。
+      const langButtons = [
+        ['zh', '中文'],
+        ['en', 'English'],
+      ].map(([value, label]) => h('button', {
+        className: 'dsh-cost-badge action',
+        key: `lang-${value}`,
+        'aria-pressed': lang === value ? 'true' : 'false',
+        title: t('langHint'),
+        style: lang === value ? { color: 'var(--dsw-alias-label-primary)', fontWeight: 500 } : undefined,
+        onClick: () => setLang(value),
+      }, label))
+      footerBits.push(h('span', { className: 'dsh-cost-badge', key: 'lang-group', style: { gap: '6px' } }, langButtons))
       if (syncNote) {
         footerBits.push(h('span', { className: 'dsh-cost-badge', key: 'sync-note' }, syncNote))
       }
@@ -1039,10 +1441,12 @@ body[data-ds-dark-theme] .dsh-cost-pop {
         h(BudgetCard, { state }),
         cards,
         forecastCard,
+        h(HeatmapCard, null),
         recent,
         sessions,
         h(RecentCalls, { state }),
-        h('div', { style: { display: 'flex', gap: '6px' } }, footerBits))
+        h(CodingPlansCard, null),
+        h('div', { style: { display: 'flex', gap: '6px', flexWrap: 'wrap' } }, footerBits))
     }
 
     /* -- 装配 ---------------------------------------------------------- */
@@ -1055,7 +1459,7 @@ body[data-ds-dark-theme] .dsh-cost-pop {
         startSessionAnchor()
         startUsageAnchors()
         sessionWatchers.add(renderSessionAnchor)
-        console.info('[dsh-cost] client 0.8.0 active')
+        console.info('[dsh-cost] client 0.10.0 active')
         // 只当 sessionId 感知器（渲染 null），费用本体锚定在宿主状态行末尾。
         ctx.slots.inject('conversation.input.dock', () => ctx.slots.register({
           name: 'conversation.input.dock',
@@ -1089,7 +1493,7 @@ body[data-ds-dark-theme] .dsh-cost-pop {
           name: 'settings.section',
           id: 'dsh-cost',
           order: 30,
-          label: '费用',
+          label: t('sectionLabel'),
         }, CostSection))
       },
     }
@@ -4329,171 +4733,1197 @@ svg[viewBox="0 0 640 40"] { visibility: hidden !important; }
     }
 }
 
-/* dsh-superinput · prompts 模块客户端：模板库入口 + 面板。 */
-function createPromptsClient(require) {
-  const React = require('react')
-  const { createPortal } = require('react-dom')
-  const h = React.createElement
+/* 由 scripts/build-suite.mjs 从 dsh-compaction-control/client.js 机械生成；勿手改。 */
+/**
+ * dsh-compaction-control 的 web 客户端部分。
+ *
+ * 在输入栏右侧区（conversation.input.right，list 槽位，渲染在模型选择器
+ * 左边）放一颗和内置 ContextMeter 同款几何的上下文占用圆环：
+ *
+ *   - 数据走官方会话投影：useProjection('contextPressure') /
+ *     'contextBreakdown'（token-meter 注册，session 标准 props 自动下发），
+ *     不碰内部 RPC。
+ *   - 点开面板 = 内置面板的三段构成（系统提示/工具/对话）+ 两个新能力：
+ *       1. 「立即压缩」→ POST /api/dsh-compaction-control/compact，
+ *          服务端 ctx.compaction.compactNow(agent, signal)（官方 /compact
+ *          的编程入口，等价免打字）。
+ *       2. 自动压缩调节（auto 开关 / 触发阈值 / 保留比例）→ POST
+ *          /state，服务端写 profile 用户补丁层，重启后生效。
+ *   - hideBuiltIn（默认开）：运行时把官方占用环按钮 visibility:hidden。
+ *     内置圆环是 InputBar 硬编码（不在槽位里），没有官方关闭开关；识别
+ *     特征收严（0.2.2）= dialog 按钮 + svg 带圆 + 文本恰为「NN%」——
+ *     0.2.1 的宽泛特征在真机命中了 dock 里的未知按钮，文本白名单把误伤
+ *     半径收到最小。MutationObserver 在宿主重挂时补隐藏。
+ *   - 落位（0.2.5 定稿）：圆环直接作为 conversation.input.right 槽位内容
+ *     渲染——已装 app.asar 的 InputBar 源码实锤 standardControls 里
+ *     renderSlot("conversation.input.right") 与 renderSlot("conversation.
+ *     input.model")（模型选择器）是 JSX 兄弟节点且前者在前，槽位位置即
+ *     「模型选择器紧左侧」，官方契约保证，零坐标手术。0.1.6 起四轮方案
+ *     全废：fixed 不占布局流必压按钮；「发送左侧最靠右下拉」会把状态行
+ *     的官方环/费用按钮误当选择器（不同行的按钮在窗口坐标里也分左右）；
+ *     剪贴板所在 composer.dock 实际渲染在会话状态行。另：本环永远渲染
+ *     ——0.2.1 的「hideBuiltIn=false 时退场」门已拆（持久化值恰为 false
+ *     曾把环卸成空壳占位）；该开关现在只管官方环的隐藏。占用比读取改
+ *     `||`（projectedTokens 可为合法 0，`??` 不会回落 pressureTokens，
+ *     真机出现过 0% 环而官方 17%）。
+ *
+ * 诊断：boot/register/crash 上报服务端 /diag，落
+ * ~/.dsh/compaction-control-debug.log；window.__dshCompactionControl 供检查。
+ */
 
-  const STYLE_ID = 'dsh-superinput-prompts-style'
-  const ENDPOINT = '/api/dsh-superinput/prompts'
+function createCompactionClient(require) {
+    const React = require('react')
+    const h = React.createElement
+    const { useEffect, useRef, useState } = React
 
-  const CSS = `
-.dsh-cp-btn {
-  display: inline-flex;
-  align-items: center;
-  border: none !important;
-  background: transparent !important;
-  box-shadow: none !important;
-  color: var(--dsw-alias-label-secondary, rgba(232, 238, 250, 0.72)) !important;
-  font-size: 12px;
-  line-height: 20px;
-  padding: 1px 8px;
-  border-radius: var(--dsw-radius-sm, 6px);
-  cursor: default;
-  user-select: none;
+    // react shim 没有 createPortal；必须从 react-dom 取（内置组件同款做法）。
+    let createPortal = null
+    try {
+      const ReactDOM = require('react-dom')
+      if (typeof ReactDOM?.createPortal === 'function') createPortal = ReactDOM.createPortal
+    } catch { createPortal = null }
+
+    const ENDPOINT = '/api/dsh-compaction-control'
+    const VERSION = '0.2.5'
+    /** 官方环几何 14px viewBox / 2 单位描边；纯图标无百分比文字撑视觉重量，渲染尺寸放大到 18px（描边随比例 ≈2.6px）。 */
+    const RADIUS = 5.5
+    const CIRCUMFERENCE = 2 * Math.PI * RADIUS
+    const RING_SIZE = 18
+    /** 官方面板宽度：min(264px, 100vw - 24px)。 */
+    const PANEL_WIDTH = 264
+
+    /** 全部对齐官方 ContextMeter/菜单面板 tokens（ContextMeter.module.css 同源）。 */
+    const CSS = `
+.dsh-cc-host { display: inline-flex; align-items: center; flex: none; margin: 0 2px; }
+.dsh-cc-root { display: inline-flex; }
+.dsh-cc-pending .dsh-cc-trigger { opacity: 0.65; }
+.dsh-cc-pending .dsh-cc-trigger:hover,
+.dsh-cc-pending .dsh-cc-trigger[aria-expanded='true'] { opacity: 1; }
+.dsh-cc-trigger {
+  display: inline-flex; align-items: center; justify-content: center;
+  flex: none; height: 28px; padding: 0 6px;
+  border: none; border-radius: var(--dsw-radius-sm, 8px);
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, rgba(232, 238, 250, 0.72));
+  font-family: inherit; line-height: 20px;
+  cursor: pointer;
 }
-.dsh-cp-btn:hover { background: var(--dsw-alias-interactive-bg-hover) !important; color: var(--dsw-alias-label-primary) !important; }
-.dsh-cp-panel {
-  position: fixed;
-  z-index: 1100;
-  box-sizing: border-box;
-  border: 0;
-  border-radius: var(--dsw-radius-lg, 12px);
-  background: var(--dsw-specific-menu, rgba(67, 69, 74, 0.45));
-  backdrop-filter: var(--dsw-menu-backdrop-filter, blur(40px) saturate(150%));
-  -webkit-backdrop-filter: var(--dsw-menu-backdrop-filter, blur(40px) saturate(150%));
-  width: min(380px, 100vw - 24px);
-  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.08));
-  box-shadow: var(--dsw-elevation-prominent, 0 0 0 0.5px var(--dsw-elevation-stroke-color), 0 3px 8px 0 rgba(0, 0, 0, 0.04), 0 0 20px 0 rgba(0, 0, 0, 0.05));
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+.dsh-cc-trigger:hover, .dsh-cc-trigger[aria-expanded='true'] {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, 0.08));
+  color: var(--dsw-alias-label-secondary, rgba(232, 238, 250, 0.72));
 }
-.dsh-cp-head { display: flex; gap: 6px; align-items: center; }
-.dsh-cp-search {
-  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
-  padding: 6px 10px; font-size: 12px; line-height: 18px;
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-bg-layer-1, rgba(255, 255, 255, 0.06));
-  border: 0.5px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.12));
-  border-radius: var(--dsw-radius-sm, 6px);
-  outline: none;
+.dsh-cc-ring-track { fill: none; stroke: var(--dsw-alias-border-l3, rgba(255, 255, 255, 0.18)); stroke-width: 2; }
+.dsh-cc-ring-fill { fill: none; stroke: var(--dsw-alias-label-secondary, rgba(232, 238, 250, 0.72)); stroke-width: 2; stroke-linecap: round; transition: stroke-dasharray 200ms ease; }
+
+.dsh-cc-panel {
+  position: fixed; z-index: 1100; box-sizing: border-box;
+  width: min(264px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto;
+  padding: 12px;
+  border: 0; border-radius: 14px;
+  /* 底色写死 0.94，不用 --dsw-specific-menu：Windows 默认值是 rgba(67,69,74,.45)，
+     那是给带 MenuSurface 底衬的官方菜单用的；插件 portal 到 body 没有底衬，
+     45% 一旦 backdrop-filter 失效就发灰糊在背景上。0.94 取自 dsh 的 macOS 档。 */
+  background: rgba(248, 249, 250, 0.94);
+  backdrop-filter: blur(40px) saturate(150%);
+  -webkit-backdrop-filter: blur(40px) saturate(150%);
+  box-shadow:
+    0 0 0 0.5px rgba(0, 0, 0, 0.07),
+    0 3px 8px 0 rgba(0, 0, 0, 0.04),
+    0 0 20px 0 rgba(0, 0, 0, 0.05);
+  font-size: 12px; line-height: 20px;
+  color: rgba(28, 30, 34, 0.86);
+  cursor: default;
+  animation: dsh-cc-in 140ms ease-out both;
 }
-.dsh-cp-search:focus { border-color: var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.2)); }
-.dsh-cp-new {
-  flex: 0 0 auto; width: 26px; height: 26px;
-  display: inline-flex; align-items: center; justify-content: center;
-  font-size: 16px; line-height: 1;
-  color: var(--dsw-alias-label-secondary);
-  background: var(--dsw-alias-bg-layer-1, rgba(255, 255, 255, 0.06));
-  border: 0.5px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.12));
-  border-radius: var(--dsw-radius-sm, 6px);
-  cursor: pointer;
+body[data-ds-dark-theme] .dsh-cc-panel {
+  background: rgba(48, 49, 54, 0.94);
+  box-shadow:
+    0 0 0 0.5px rgba(255, 255, 255, 0.10),
+    0 3px 8px 0 rgba(0, 0, 0, 0.04),
+    0 0 20px 0 rgba(0, 0, 0, 0.05);
+  color: rgba(232, 238, 250, 0.72);
 }
-.dsh-cp-new:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-interactive-bg-hover); }
-.dsh-cp-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
-.dsh-cp-group { font-size: 11px; line-height: 18px; color: var(--dsw-alias-label-tertiary); padding: 4px 6px 2px; }
-.dsh-cp-row { display: flex; align-items: flex-start; gap: 6px; padding: 6px; border-radius: var(--dsw-radius-sm, 6px); }
-.dsh-cp-row:hover { background: var(--dsw-alias-interactive-bg-hover); }
-.dsh-cp-row-main { flex: 1 1 auto; min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
-.dsh-cp-title { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.dsh-cp-uses { color: var(--dsw-alias-label-tertiary); font-size: 10px; margin-left: 4px; }
-.dsh-cp-preview { font-size: 11px; line-height: 16px; color: var(--dsw-alias-label-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.dsh-cp-vars { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
-.dsh-cp-var { font-size: 10px; line-height: 14px; padding: 0 4px; border-radius: 3px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-1, rgba(255, 255, 255, 0.08)); }
-.dsh-cp-row-actions { flex: 0 0 auto; display: flex; gap: 2px; }
-.dsh-cp-mini {
-  width: 20px; height: 20px; padding: 0;
-  display: inline-flex; align-items: center; justify-content: center;
-  font-size: 11px; line-height: 1;
-  color: var(--dsw-alias-label-tertiary);
-  background: transparent; border: none; border-radius: 4px; cursor: pointer;
+/* 只动 opacity：展开方向由内联 transform 控制，keyframes 不能碰 transform */
+@keyframes dsh-cc-in { from { opacity: 0; } to { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .dsh-cc-panel { animation: none; } }
+
+.dsh-cc-head { display: flex; align-items: center; gap: 6px; }
+.dsh-cc-head-label { color: var(--dsw-alias-label-tertiary, rgba(232, 238, 250, 0.55)); white-space: nowrap; }
+.dsh-cc-head-pct { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--dsw-alias-label-primary, rgba(232, 238, 250, 0.9)); }
+.dsh-cc-head-fig { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--dsw-alias-label-primary, rgba(232, 238, 250, 0.9)); }
+
+.dsh-cc-bar { display: flex; gap: 1px; margin: 8px 0 8px; height: 4px; border-radius: 999px; background: var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, 0.08)); overflow: hidden; }
+.dsh-cc-bar-seg { flex: none; min-width: 2px; height: 100%; border-radius: 1px; background: var(--dsh-cc-tint, var(--dsw-alias-label-tertiary)); }
+.dsh-cc-tint-system { --dsh-cc-tint: var(--dsw-static-neutral-bluish-400, #9db2c8); }
+.dsh-cc-tint-tools { --dsh-cc-tint: rgb(167, 139, 250); }
+.dsh-cc-tint-messages { --dsh-cc-tint: var(--dsw-static-blue-450, #5b8def); }
+
+.dsh-cc-rows { margin: 4px 0 0; }
+.dsh-cc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 1px 0; }
+.dsh-cc-row dt { color: var(--dsw-alias-label-secondary, rgba(232, 238, 250, 0.72)); }
+.dsh-cc-row dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--dsw-alias-label-primary, rgba(232, 238, 250, 0.9)); }
+.dsh-cc-dot { display: inline-block; margin-right: 6px; width: 8px; height: 8px; border-radius: 2px; background: var(--dsh-cc-tint); vertical-align: baseline; }
+
+.dsh-cc-section { border-top: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.08)); margin-top: 8px; padding-top: 6px; }
+
+.dsh-cc-disclose {
+  display: flex; align-items: center; justify-content: space-between;
+  width: 100%; height: 28px; padding: 0 4px 0 8px;
+  border: none; border-radius: var(--dsw-radius-sm, 8px);
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, rgba(232, 238, 250, 0.72));
+  font-size: 13px; line-height: 20px; font-weight: 400;
+  cursor: pointer;
 }
-.dsh-cp-mini:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-1, rgba(255, 255, 255, 0.08)); }
-.dsh-cp-mini.danger:hover { color: #f87171; }
-.dsh-cp-mini.active { color: #3a83f7; }
-.dsh-cp-empty { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary); padding: 12px 6px; text-align: center; }
-.dsh-cp-editor { display: flex; flex-direction: column; gap: 6px; }
-.dsh-cp-input, .dsh-cp-textarea {
-  box-sizing: border-box; width: 100%;
-  padding: 6px 10px; font-size: 12px; line-height: 18px;
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-bg-layer-1, rgba(255, 255, 255, 0.06));
-  border: 0.5px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.12));
-  border-radius: var(--dsw-radius-sm, 6px);
-  outline: none; font-family: inherit; resize: vertical;
+.dsh-cc-disclose:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, 0.08)); }
+.dsh-cc-caret { color: var(--dsw-alias-label-caption, rgba(232, 238, 250, 0.45)); font-size: 12px; }
+
+.dsh-cc-compact-btn {
+  width: 100%; height: 24px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.12));
+  border-radius: var(--dsw-radius-sm, 8px);
+  background: transparent;
+  color: var(--dsw-alias-label-primary, rgba(232, 238, 250, 0.9));
+  font-size: 12px; line-height: 20px;
+  cursor: pointer;
+  transition: background 120ms ease;
 }
-.dsh-cp-textarea { min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
-.dsh-cp-actions { display: flex; justify-content: flex-end; gap: 6px; }
-.dsh-cp-action {
-  padding: 4px 12px; font-size: 12px; line-height: 18px;
-  color: var(--dsw-alias-label-secondary);
-  background: var(--dsw-alias-bg-layer-1, rgba(255, 255, 255, 0.06));
-  border: 0.5px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.12));
-  border-radius: var(--dsw-radius-sm, 6px);
+.dsh-cc-compact-btn:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, 0.08)); }
+.dsh-cc-compact-btn[disabled] { opacity: 0.5; cursor: default; }
+
+.dsh-cc-fields { margin-top: 4px; }
+.dsh-cc-btnrow { display: flex; gap: 6px; margin-top: 4px; }
+.dsh-cc-save {
+  flex: 1; height: 24px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.12));
+  border-radius: var(--dsw-radius-sm, 8px);
+  background: transparent;
+  color: var(--dsw-alias-label-primary, rgba(232, 238, 250, 0.9));
+  font-size: 12px; line-height: 20px;
   cursor: pointer;
+  transition: background 120ms ease;
 }
-.dsh-cp-action:hover { color: var(--dsw-alias-label-primary); }
-.dsh-cp-action.primary { color: #fff; background: #3a83f7; border-color: transparent; }
-.dsh-cp-action.primary:hover { background: #4f8ef9; }
-.dsh-cp-selmenu { display: flex; flex-direction: row; align-items: center; gap: 2px; padding: 3px; border-radius: var(--dsw-radius-lg, 12px);
-  background: var(--dsw-specific-menu, rgba(67, 69, 74, 0.85));
-  backdrop-filter: var(--dsw-menu-backdrop-filter, blur(40px) saturate(150%));
-  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.08));
-  box-shadow: var(--dsw-elevation-prominent, 0 0 0 0.5px var(--dsw-elevation-stroke-color), 0 3px 8px 0 rgba(0, 0, 0, 0.1));
+.dsh-cc-save:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, 0.08)); }
+.dsh-cc-save[disabled] { opacity: 0.5; cursor: default; }
+/* 恢复默认：官方菜单行样式（ghost 行，hover 背景无描边） */
+.dsh-cc-reset {
+  flex: 1; height: 24px; padding: 0 4px;
+  border: none; border-radius: var(--dsw-radius-sm, 8px);
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, rgba(232, 238, 250, 0.72));
+  font-size: 12px; line-height: 20px; font-weight: 400;
+  cursor: pointer;
 }
-.dsh-cp-selitem { border: none; background: transparent; text-align: left; padding: 5px 10px; font-size: 12px; line-height: 18px;
-  color: var(--dsw-alias-label-primary, rgba(232, 238, 250, 0.92)); border-radius: var(--dsw-radius-sm, 6px); cursor: pointer; white-space: nowrap; }
-.dsh-cp-selitem:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, 0.07)); }
-.dsh-cp-toast { padding: 5px 12px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-primary, #fff);
-  background: rgba(50, 50, 54, 0.95); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
+.dsh-cc-reset:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, 0.08)); }
+.dsh-cc-reset[disabled] { opacity: 0.5; cursor: default; }
+
+.dsh-cc-field { display: flex; align-items: center; gap: 8px; padding: 1px 0; font-size: 12px; line-height: 20px; }
+.dsh-cc-field-label { flex: none; width: 56px; color: var(--dsw-alias-label-tertiary, rgba(232, 238, 250, 0.55)); }
+.dsh-cc-field-value { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--dsw-alias-label-primary, rgba(232, 238, 250, 0.9)); min-width: 30px; text-align: right; }
+.dsh-cc-slider { flex: 1; height: 2px; accent-color: var(--dsw-static-blue-450, #5b8def); cursor: pointer; }
+.dsh-cc-check { accent-color: var(--dsw-static-blue-450, #5b8def); width: 13px; height: 13px; cursor: pointer; }
+.dsh-cc-hint { font-size: 11px; line-height: 16px; color: rgb(234, 179, 8); margin: 2px 0 4px; display: none; }
+.dsh-cc-hint-show { display: block; }
+
+.dsh-cc-flash { margin-top: 6px; font-size: 11px; line-height: 16px; border-radius: var(--dsw-radius-sm, 8px); padding: 4px 8px; display: none; }
+.dsh-cc-flash-ok { display: block; background: var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, 0.08)); color: var(--dsw-alias-label-secondary, rgba(232, 238, 250, 0.72)); }
+.dsh-cc-flash-err { display: block; background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
 `
 
-  function ensureStyle() {
-    if (typeof document === 'undefined') return
-    if (document.getElementById(STYLE_ID)) return
-    const style = document.createElement('style')
-    style.id = STYLE_ID
-    style.textContent = CSS
-    document.head.appendChild(style)
-  }
-
-  async function api(path, body) {
-    try {
-      const res = await fetch(`${ENDPOINT}${path}`, body
-        ? { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) }
-        : { cache: 'no-store' })
-      return res.ok ? res.json() : null
-    } catch { return null }
-  }
-
-  /** 异常留痕：走 prompts /diag（0.4.0 起套件统一通道，落 superinput-debug.log）。 */
-  function report(message) {
-    try {
-      void fetch('/api/dsh-superinput/prompts/diag', {
-        method: 'POST',
-        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ message: `prompts: ${String(message).slice(0, 300)}` }),
-      }).catch(() => {})
-    } catch { /* ignore */ }
-  }
+    const STYLE_ID = 'dsh-compaction-control-style'
 
-  /** 找出正文里的 {{变量}}，去重保序。 */
-  function varsOf(text) {
-    const found = []
-    const re = /\{\{\s*([a-zA-Z_$][\w$]*)\s*\}\}/g
-    let match
-    while ((match = re.exec(String(text ?? '')))) {
-      if (!found.includes(match[1])) found.push(match[1])
+    function ensureStyle() {
+      if (document.getElementById(STYLE_ID)) return
+      const style = document.createElement('style')
+      style.id = STYLE_ID
+      style.textContent = CSS
+      document.head.appendChild(style)
     }
-    return found
-  }
 
-  /** 内置动态变量：同步可取的自动填值；取不到的（如剪贴板）留空手填/异步预填。 */
-  function autoValue(name) {
-    const now = new Date()
+    const report = (phase, extra) => {
+      try {
+        fetch(`${ENDPOINT}/diag`, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ line: `${phase} ${JSON.stringify(extra ?? {})}`.slice(0, 1800) }),
+        }).catch(() => {})
+      } catch { /* ignore */ }
+    }
+
+    /** 与内置 ContextMeter 同款紧凑数字（K / M）。 */
+    function formatTokens(value) {
+      if (value < 1000) return String(value)
+      const scale = (n) => (n >= 100 ? String(Math.round(n)) : String(Math.round(n * 10) / 10))
+      if (value < 1000000) return `${scale(value / 1000)}K`
+      return `${scale(value / 1000000)}M`
+    }
+
+    /** contextPressure → 占用（与 ui-conversation 的 contextOccupancy 同算法）。
+     * 用 || 而非 ??：projectedTokens 可为合法 0（未投影出增量），此时必须
+     * 回落 pressureTokens——`??` 会把 0 当有效值挡住回落，真机出现过官方
+     * 17% 而本环 0% 的空圈。 */
+    function occupancy(pressure) {
+      const used = pressure?.projectedTokens || pressure?.pressureTokens
+      if (used === undefined || pressure?.contextWindow === undefined) return null
+      return {
+        percent: Math.min(100, Math.round((used / pressure.contextWindow) * 100)),
+        usedTokens: used,
+        contextWindow: pressure.contextWindow,
+      }
+    }
+
+    /**
+     * 官方占用环按钮的识别特征（0.2.2 收严）：dialog 按钮 + svg 带圆 +
+     * 文本恰为「NN%」。0.2.1 的「全文 dialog + 双 circle」宽泛特征在真机
+     * 命中了 dock 里一个未知按钮（correct-trace mode:"meter" 坐标 965,796），
+     * 宽泛特征必然误伤，文本白名单把爆炸半径收到最小；若官方环文本形态
+     * 不同则不隐藏（无害降级，官方环照常显示）。
+     */
+    function findBuiltInMeterButtons() {
+      const found = []
+      for (const btn of document.querySelectorAll('button[aria-haspopup="dialog"]')) {
+        if (btn.classList.contains('dsh-cc-trigger')) continue
+        if (!/^\d+%$/.test((btn.textContent ?? '').trim())) continue
+        const svg = btn.querySelector('svg')
+        if (svg && svg.querySelectorAll('circle').length >= 1) found.push(btn)
+      }
+      return found
+    }
+
+    let hideObserver = null
+    let hideRefcount = 0
+    // visibility:hidden 而非 display:none：官方环占位保留，状态行 flex 不
+    // 会把费用/用量按钮挤过来盖住我们的环。
+    let knownMeters = new Set()
+    function hideBuiltInOnce(force) {
+      if (!force && [...knownMeters].every((b) => b.isConnected && b.style.visibility === 'hidden')) return
+      knownMeters = new Set(findBuiltInMeterButtons())
+      for (const btn of knownMeters) btn.style.visibility = 'hidden'
+    }
+    function acquireDockHide() {
+      hideRefcount += 1
+      hideBuiltInOnce(true)
+      if (!hideObserver) {
+        hideObserver = new MutationObserver(() => hideBuiltInOnce(false))
+        hideObserver.observe(document.body, { childList: true, subtree: true })
+      }
+    }
+    function releaseDockHide() {
+      hideRefcount = Math.max(0, hideRefcount - 1)
+      if (hideRefcount === 0) {
+        if (hideObserver) { hideObserver.disconnect(); hideObserver = null }
+        for (const btn of knownMeters) btn.style.visibility = ''
+        knownMeters = new Set()
+      }
+    }
+
+    class QuietBoundary extends React.Component {
+      constructor(props) { super(props); this.state = { error: null } }
+      static getDerivedStateFromError(error) { return { error } }
+      componentDidCatch(error) { report('crash', { message: String(error?.message ?? error) }) }
+      render() { return this.state.error ? null : this.props.children }
+    }
+
+    // 官方命令通道：dock 槽位组件的标准 props 带 inputActions（followup
+    // 同款）。「立即压缩」优先把 /compact 落进草稿再 submit——命令在
+    // agent 宿主进程执行，不受本进程 webServer 无 agents 服务的影响。
+    let commandBridge = null
+
+    function CommandBridge(props) {
+      useEffect(() => {
+        commandBridge = props.inputActions ?? null
+        return () => { if (commandBridge === props.inputActions) commandBridge = null }
+      }, [props.inputActions])
+      return null
+    }
+
+    /** 走官方 /compact 命令（草稿→提交），返回是否已受理。 */
+    const compactViaCommand = () => {
+      if (!commandBridge) return false
+      try {
+        commandBridge.setDraft('/compact')
+        window.setTimeout(() => {
+          try { commandBridge.submit() } catch (err) { report('submit-error', { message: String(err?.message ?? err) }) }
+        }, 250)
+        return true
+      } catch (err) {
+        report('bridge-error', { message: String(err?.message ?? err) })
+        return false
+      }
+    }
+
+    function RingSvg({ percent }) {
+      return h('svg', { viewBox: '0 0 14 14', width: RING_SIZE, height: RING_SIZE, 'aria-hidden': true },
+        h('circle', { className: 'dsh-cc-ring-track', cx: 7, cy: 7, r: RADIUS }),
+        h('circle', {
+          className: 'dsh-cc-ring-fill',
+          cx: 7, cy: 7, r: RADIUS,
+          strokeDasharray: `${(CIRCUMFERENCE * percent) / 100} ${CIRCUMFERENCE}`,
+          transform: 'rotate(-90 7 7)',
+        }))
+    }
+
+    function Seat(props) {
+      const useProjection = props.useProjection
+      const sessionId = props.sessionId
+      const pressure = useProjection('contextPressure')
+      const breakdown = useProjection('contextBreakdown')
+
+      const [open, setOpen] = useState(false)
+      const [pos, setPos] = useState(null)
+      const [settings, setSettings] = useState(null)
+      const [draft, setDraft] = useState(null)
+      const [busy, setBusy] = useState(false)
+      const [saving, setSaving] = useState(false)
+      const [resetting, setResetting] = useState(false)
+      const [expanded, setExpanded] = useState(false)
+      const [flash, setFlash] = useState(null)
+
+      const rootRef = useRef(null)
+      const panelRef = useRef(null)
+
+      // 圆环常驻：新会话/空会话还没有 contextPressure 时用 0% 占位，
+      // 避免「模型选择器左侧的环莫名消失」；有数据后自动切回真实占用。
+      const measured = occupancy(pressure)
+      const context = measured ?? { percent: 0, usedTokens: 0, contextWindow: undefined }
+
+      // 挂载取证：0.2.5 起圆环是 conversation.input.right 槽位的直接内容，
+      // 位置由官方 InputBar JSX 兄弟顺序保证（紧在模型选择器 renderSlot
+      // 之前），不再有任何坐标手术；这条 trace 只为确认槽位真的渲染了。
+      const mountReported = useRef(false)
+      useEffect(() => {
+        if (mountReported.current || context === null) return
+        mountReported.current = true
+        const rect = rootRef.current?.getBoundingClientRect()
+        report('in-slot-mount', rect
+          ? { left: Math.round(rect.left), top: Math.round(rect.top), w: Math.round(rect.width), h: Math.round(rect.height) }
+          : {})
+      })
+
+      // 挂载即拉一次服务端状态：hideBuiltIn 要在用户打开面板前就生效。
+      useEffect(() => {
+        let alive = true
+        fetch(`${ENDPOINT}/state`)
+          .then((res) => (res.ok ? res.json() : Promise.reject(new Error(`HTTP ${res.status}`))))
+          .then((data) => {
+            if (!alive || !data?.state) return
+            setSettings(data)
+            setDraft({
+              auto: data.state.auto,
+              thresholdRatio: data.state.thresholdRatio,
+              retainRatio: data.state.retainRatio,
+              hideBuiltIn: data.state.hideBuiltIn,
+              checkpoint: data.state.checkpoint,
+            })
+          })
+          .catch((err) => report('state-error', { message: String(err?.message ?? err) }))
+        return () => { alive = false }
+      }, [])
+
+      // 压缩前自动落档布防：占用率上穿「阈值-5%」的升沿 POST 一次 arm=true，
+      // 回落（压缩完成/新会话）时 arm=false。服务端在下一次 pre-step 注入
+      // 落档指令，agent 自己把项目状态写进工作区 checkpoint.md。
+      const armRef = useRef(false)
+      useEffect(() => {
+        if (context === null || !sessionId) return
+        const thresholdPct = Math.round((draft?.thresholdRatio ?? 0.8) * 100)
+        const above = context.percent >= thresholdPct - 5
+        if (above === armRef.current) return
+        armRef.current = above
+        void fetch(`${ENDPOINT}/checkpoint-arm`, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ sessionId: String(sessionId), arm: above }),
+        }).then((res) => (res.ok ? res.json() : null))
+          .then((data) => { if (data && data.armed) report('checkpoint-armed', { sessionId, percent: context.percent }) })
+          .catch((err) => report('checkpoint-arm-error', { message: String(err?.message ?? err) }))
+      }, [context?.percent, sessionId, draft?.thresholdRatio])
+
+      // 隐藏官方环的生命周期跟 draft.hideBuiltIn 走（面板里可切换）。
+      // 未加载（undefined）也按默认隐藏——任何加载失败场景都不出现双环。
+      useEffect(() => {
+        if (draft?.hideBuiltIn === false) return undefined
+        acquireDockHide()
+        return () => releaseDockHide()
+      }, [draft?.hideBuiltIn])
+
+      // 面板定位 + 外点关闭 + Esc。默认向上展开（translateY(-100%)）；
+      // 上方空间不足 460px 时才向下。外点关闭 + Esc。
+      useEffect(() => {
+        if (!open) return undefined
+        const rect = rootRef.current?.getBoundingClientRect()
+        if (rect) {
+          const left = Math.max(8, Math.min(rect.right - PANEL_WIDTH, window.innerWidth - PANEL_WIDTH - 8))
+          const openUp = rect.top > 460
+          setPos({
+            left,
+            top: openUp ? rect.top - 8 : rect.bottom + 8,
+            transform: openUp ? 'translateY(-100%)' : 'none',
+          })
+        }
+        const onPointerDown = (e) => {
+          const t = e.target
+          if (rootRef.current?.contains(t) || panelRef.current?.contains(t)) return
+          setOpen(false)
+        }
+        const onKeyDown = (e) => { if (e.key === 'Escape') setOpen(false) }
+        document.addEventListener('pointerdown', onPointerDown, true)
+        document.addEventListener('keydown', onKeyDown)
+        return () => {
+          document.removeEventListener('pointerdown', onPointerDown, true)
+          document.removeEventListener('keydown', onKeyDown)
+        }
+      }, [open])
+
+      // flash 3.5s 自动消散。
+      useEffect(() => {
+        if (!flash) return undefined
+        const timer = setTimeout(() => setFlash(null), 3500)
+        return () => clearTimeout(timer)
+      }, [flash])
+
+      // 本环永远渲染：0.2.1 的「hideBuiltIn=false 时退场」门已拆——持久化
+      // 值恰为 false 曾把环卸成空壳占位。该开关只管官方环的隐藏。
+      if (createPortal === null) return null
+
+      const breakdownTotal = breakdown === undefined
+        ? 0
+        : breakdown.systemTokens + breakdown.toolsTokens + breakdown.messageTokens
+      const rows = [
+        { key: 'systemTokens', label: '系统提示', cls: 'dsh-cc-tint-system', value: breakdown?.systemTokens },
+        { key: 'toolsTokens', label: '工具定义', cls: 'dsh-cc-tint-tools', value: breakdown?.toolsTokens },
+        { key: 'messageTokens', label: '对话历史', cls: 'dsh-cc-tint-messages', value: breakdown?.messageTokens },
+      ]
+      const segments = breakdownTotal > 0
+        ? rows
+          .map((row) => ({ ...row, width: (context.percent * row.value) / breakdownTotal }))
+          .filter((row) => row.width > 0)
+        : [{ key: 'total', cls: '', width: context.percent }]
+
+      const onCompact = async () => {
+        if (busy) return
+        // 优先官方命令通道：结果以官方 chip 形式出现在对话流里。
+        if (compactViaCommand()) {
+          setFlash({ kind: 'ok', text: '已执行 /compact，结果见对话流' })
+          return
+        }
+        setBusy(true)
+        setFlash(null)
+        try {
+          const res = await fetch(`${ENDPOINT}/compact`, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ sessionId: String(sessionId) }),
+          })
+          const data = await res.json().catch(() => ({}))
+          if (!res.ok || !data.ok) {
+            setFlash({ kind: 'err', text: data?.error ?? `压缩失败（HTTP ${res.status}）` })
+          } else if (data.empty) {
+            setFlash({ kind: 'ok', text: data.message ?? '暂无可压缩的历史' })
+          } else {
+            setFlash({ kind: 'ok', text: `已压缩 ${data.shadowed} 条历史（约 ${formatTokens(data.tokens ?? 0)} tokens）` })
+          }
+        } catch (err) {
+          setFlash({ kind: 'err', text: `请求失败：${String(err?.message ?? err)}` })
+        } finally {
+          setBusy(false)
+        }
+      }
+
+      const onSave = async () => {
+        if (saving || !draft) return
+        if (draft.retainRatio >= draft.thresholdRatio) {
+          setFlash({ kind: 'err', text: '保留比例必须小于触发阈值' })
+          return
+        }
+        setSaving(true)
+        setFlash(null)
+        try {
+          const res = await fetch(`${ENDPOINT}/state`, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify(draft),
+          })
+          const data = await res.json().catch(() => ({}))
+          if (!res.ok || !data.ok) {
+            setFlash({ kind: 'err', text: data?.error ?? `保存失败（HTTP ${res.status}）` })
+          } else {
+            setSettings({ ...settings, state: data.state, profiles: data.profiles })
+            setFlash({ kind: 'ok', text: '已保存，重启 dsh 后生效' })
+          }
+        } catch (err) {
+          setFlash({ kind: 'err', text: `请求失败：${String(err?.message ?? err)}` })
+        } finally {
+          setSaving(false)
+        }
+      }
+
+      const onReset = async () => {
+        if (resetting) return
+        setResetting(true)
+        setFlash(null)
+        try {
+          const res = await fetch(`${ENDPOINT}/reset`, { method: 'POST', headers: { 'content-type': 'application/json' } })
+          const data = await res.json().catch(() => ({}))
+          if (!res.ok || !data.ok) {
+            setFlash({ kind: 'err', text: data?.error ?? `恢复失败（HTTP ${res.status}）` })
+          } else {
+            setSettings({ ...settings, state: data.state, profiles: data.profiles })
+            setDraft({
+              auto: data.state.auto,
+              thresholdRatio: data.state.thresholdRatio,
+              retainRatio: data.state.retainRatio,
+              hideBuiltIn: data.state.hideBuiltIn,
+            })
+            setExpanded(false)
+            setFlash({ kind: 'ok', text: '已恢复默认，重启 dsh 后生效' })
+          }
+        } catch (err) {
+          setFlash({ kind: 'err', text: `请求失败：${String(err?.message ?? err)}` })
+        } finally {
+          setResetting(false)
+        }
+      }
+
+      const panel = h('div', {
+        ref: panelRef,
+        className: 'dsh-cc-panel',
+        role: 'dialog',
+        'aria-label': '上下文压缩控制',
+        style: pos ? { left: pos.left, top: pos.top, transform: pos.transform } : { visibility: 'hidden', left: 0, top: 0 },
+      },
+        h('div', { className: 'dsh-cc-head' },
+          h('span', { className: 'dsh-cc-head-label' }, '上下文已用'),
+          h('span', { className: 'dsh-cc-head-pct' }, `${context.percent}%`),
+          h('span', { className: 'dsh-cc-head-fig' },
+            measured ? `~${formatTokens(context.usedTokens)} / ${formatTokens(context.contextWindow)}` : '当前会话暂无上下文数据')),
+        h('div', { className: 'dsh-cc-bar' },
+          segments.map((seg) => h('div', { key: seg.key, className: `dsh-cc-bar-seg ${seg.cls}`, style: { width: `${seg.width}%` } }))),
+        breakdownTotal > 0
+          ? h('dl', { className: 'dsh-cc-rows' },
+            rows.map((row) => h('div', { key: row.key, className: 'dsh-cc-row' },
+              h('dt', null,
+                h('span', { className: `dsh-cc-dot ${row.cls}`, 'aria-hidden': true }),
+                row.label),
+              h('dd', null, `~${formatTokens(row.value ?? 0)}`))))
+          : null,
+
+        h('div', { className: 'dsh-cc-section' },
+          h('button', { type: 'button', className: 'dsh-cc-compact-btn', disabled: busy, onClick: onCompact },
+            busy ? '正在压缩…' : '立即压缩当前会话')),
+
+        h('div', { className: 'dsh-cc-section' },
+          h('button', {
+            type: 'button',
+            className: 'dsh-cc-disclose',
+            'aria-expanded': expanded,
+            onClick: () => setExpanded(!expanded),
+          },
+          h('span', null, '自定义压缩'),
+          h('span', { className: 'dsh-cc-caret' }, expanded ? '▾' : '▸')),
+          expanded ? h('div', { className: 'dsh-cc-fields' },
+            h('div', { className: 'dsh-cc-field' },
+              h('span', { className: 'dsh-cc-field-label' }, '触发阈值'),
+              h('input', {
+                type: 'range', className: 'dsh-cc-slider', min: 50, max: 95, step: 1,
+                value: Math.round((draft?.thresholdRatio ?? 0.8) * 100),
+                onChange: (e) => setDraft({ ...draft, thresholdRatio: Number(e.target.value) / 100 }),
+              }),
+              h('span', { className: 'dsh-cc-field-value' }, `${Math.round((draft?.thresholdRatio ?? 0.8) * 100)}%`)),
+            h('div', { className: 'dsh-cc-field' },
+              h('span', { className: 'dsh-cc-field-label' }, '保留比例'),
+              h('input', {
+                type: 'range', className: 'dsh-cc-slider', min: 4, max: 40, step: 1,
+                value: Math.round((draft?.retainRatio ?? 0.16) * 100),
+                onChange: (e) => setDraft({ ...draft, retainRatio: Number(e.target.value) / 100 }),
+              }),
+              h('span', { className: 'dsh-cc-field-value' }, `${Math.round((draft?.retainRatio ?? 0.16) * 100)}%`)),
+            h('div', { className: `dsh-cc-hint ${(draft?.retainRatio ?? 0) >= (draft?.thresholdRatio ?? 1) ? 'dsh-cc-hint-show' : ''}` },
+              '保留比例需小于触发阈值'),
+            h('div', { className: 'dsh-cc-field' },
+              h('span', { className: 'dsh-cc-field-label' }, '官方圆环'),
+              h('input', {
+                type: 'checkbox', className: 'dsh-cc-check',
+                checked: draft?.hideBuiltIn ?? true,
+                onChange: (e) => setDraft({ ...draft, hideBuiltIn: e.target.checked }),
+              }),
+              h('span', { className: 'dsh-cc-field-value' }, draft?.hideBuiltIn === false ? '显示' : '已隐藏')),
+            h('div', { className: 'dsh-cc-field' },
+              h('span', { className: 'dsh-cc-field-label' }, '压缩前落档'),
+              h('input', {
+                type: 'checkbox', className: 'dsh-cc-check',
+                checked: draft?.checkpoint ?? true,
+                onChange: (e) => setDraft({ ...draft, checkpoint: e.target.checked }),
+              }),
+              h('span', { className: 'dsh-cc-field-value' }, draft?.checkpoint === false ? '关闭' : '写 checkpoint.md')),
+            h('div', { className: 'dsh-cc-btnrow' },
+              h('button', { type: 'button', className: 'dsh-cc-save', disabled: saving || !draft, onClick: onSave },
+                saving ? '保存中…' : '保存设置'),
+              h('button', { type: 'button', className: 'dsh-cc-reset', disabled: resetting, onClick: onReset },
+                resetting ? '恢复中…' : '恢复默认')))
+            : null),
+
+        flash ? h('div', { className: `dsh-cc-flash dsh-cc-flash-${flash.kind}` }, flash.text) : null)
+
+      return h('span', { ref: rootRef, className: measured ? 'dsh-cc-root' : 'dsh-cc-root dsh-cc-pending' },
+        h('button', {
+          type: 'button',
+          className: 'dsh-cc-trigger',
+          'aria-label': measured ? `上下文已用 ${context.percent}%，打开压缩控制` : '上下文数据加载中，打开压缩控制',
+          'aria-haspopup': 'dialog',
+          'aria-expanded': open,
+          title: measured ? `上下文已用 ${context.percent}%` : '当前会话暂无上下文数据',
+          onClick: () => setOpen(!open),
+        },
+        h(RingSvg, { percent: context.percent })),
+        open ? createPortal(panel, document.body) : null)
+    }
+
+    return {
+      inject: ['slots'],
+      apply(ctx) {
+        ensureStyle()
+        console.info(`[dsh-compaction-control] client ${VERSION} loading`)
+        report('boot', {
+          slots: typeof ctx.slots,
+          portal: createPortal ? 'react-dom' : 'missing',
+        })
+        window.__dshCompactionControl = { version: VERSION }
+
+        ctx.inject(['slots'], (scope) => {
+          const gate = Promise.race([
+            fetch(`${ENDPOINT}/enabled`)
+              .then((res) => (res.ok ? res.json() : { enabled: true }))
+              .catch(() => ({ enabled: true })),
+            new Promise((resolve) => setTimeout(() => resolve({ enabled: true }), 2500)),
+          ])
+
+          gate.then(({ enabled }) => {
+            if (enabled === false) {
+              report('skip-disabled', {})
+              return
+            }
+            // list 槽位：order 越小越靠前，0 让圆环落在模型选择器左边第一位。
+            scope.slots.inject('conversation.input.right', () => scope.slots.register({
+              name: 'conversation.input.right',
+              id: 'dsh-compaction-control',
+              order: 0,
+            }, (props) => h(QuietBoundary, null, h(Seat, props))))
+            // 隐形桥接：只为拿 inputActions（setDraft/submit），不渲染任何 UI。
+            scope.slots.inject('conversation.input.dock', () => scope.slots.register({
+              name: 'conversation.input.dock',
+              id: 'dsh-compaction-control-bridge',
+              order: 90,
+            }, (props) => h(QuietBoundary, null, h(CommandBridge, props))))
+            report('register', {})
+          }).catch((err) => report('gate-error', { message: String(err?.message ?? err) }))
+        })
+      },
+    }
+}
+
+/* dsh-superinput · prompts 模块客户端：模板库入口 + 面板。 */
+function createPromptsClient(require) {
+  const React = require('react')
+  const { createPortal } = require('react-dom')
+  const h = React.createElement
+
+  const STYLE_ID = 'dsh-superinput-prompts-style'
+  const ENDPOINT = '/api/dsh-superinput/prompts'
+
+  /* 划选引用：官方 reference chip + Trae 规格。
+   * CHIP_MARK 是不可见分隔符（U+2063），作为标签前缀用于 CSS 精确选中
+   * 「我们插入的 chip」而不波及官方 @file chip；视觉与文本内容无影响。 */
+  const SELECTION_SOURCE = 'superinput-selection'
+  const SELECTION_RULE = 'dsh-superinput-selection'
+  const CHIP_MARK = '\u2063'
+  const CONTEXT_MAX = 8
+  const CONTEXT_TEXT_MAX = 4000
+  const CONTEXT_COMMENT_MAX = 600
+  const STORAGE_KEY = 'dsh-superinput-selection-items'
+
+  const CSS = `
+.dsh-cp-btn {
+  display: inline-flex;
+  align-items: center;
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: var(--dsw-alias-label-secondary, rgba(232, 238, 250, 0.72)) !important;
+  font-size: 12px;
+  line-height: 20px;
+  padding: 1px 8px;
+  border-radius: var(--dsw-radius-sm, 6px);
+  cursor: default;
+  user-select: none;
+}
+.dsh-cp-btn:hover { background: var(--dsw-alias-interactive-bg-hover) !important; color: var(--dsw-alias-label-primary) !important; }
+.dsh-cp-panel {
+  position: fixed;
+  z-index: 1100;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--dsw-radius-lg, 12px);
+  background: var(--dsw-specific-menu, rgba(67, 69, 74, 0.45));
+  backdrop-filter: var(--dsw-menu-backdrop-filter, blur(40px) saturate(150%));
+  -webkit-backdrop-filter: var(--dsw-menu-backdrop-filter, blur(40px) saturate(150%));
+  width: min(380px, 100vw - 24px);
+  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.08));
+  box-shadow: var(--dsw-elevation-prominent, 0 0 0 0.5px var(--dsw-elevation-stroke-color), 0 3px 8px 0 rgba(0, 0, 0, 0.04), 0 0 20px 0 rgba(0, 0, 0, 0.05));
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.dsh-cp-head { display: flex; gap: 6px; align-items: center; }
+.dsh-cp-search {
+  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
+  padding: 6px 10px; font-size: 12px; line-height: 18px;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-1, rgba(255, 255, 255, 0.06));
+  border: 0.5px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.12));
+  border-radius: var(--dsw-radius-sm, 6px);
+  outline: none;
+}
+.dsh-cp-search:focus { border-color: var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.2)); }
+.dsh-cp-new {
+  flex: 0 0 auto; width: 26px; height: 26px;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: 16px; line-height: 1;
+  color: var(--dsw-alias-label-secondary);
+  background: var(--dsw-alias-bg-layer-1, rgba(255, 255, 255, 0.06));
+  border: 0.5px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.12));
+  border-radius: var(--dsw-radius-sm, 6px);
+  cursor: pointer;
+}
+.dsh-cp-new:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-interactive-bg-hover); }
+.dsh-cp-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
+.dsh-cp-group { font-size: 11px; line-height: 18px; color: var(--dsw-alias-label-tertiary); padding: 4px 6px 2px; }
+.dsh-cp-row { display: flex; align-items: flex-start; gap: 6px; padding: 6px; border-radius: var(--dsw-radius-sm, 6px); }
+.dsh-cp-row:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.dsh-cp-row-main { flex: 1 1 auto; min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
+.dsh-cp-title { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsh-cp-uses { color: var(--dsw-alias-label-tertiary); font-size: 10px; margin-left: 4px; }
+.dsh-cp-preview { font-size: 11px; line-height: 16px; color: var(--dsw-alias-label-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsh-cp-vars { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
+.dsh-cp-var { font-size: 10px; line-height: 14px; padding: 0 4px; border-radius: 3px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-1, rgba(255, 255, 255, 0.08)); }
+.dsh-cp-row-actions { flex: 0 0 auto; display: flex; gap: 2px; }
+.dsh-cp-mini {
+  width: 20px; height: 20px; padding: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: 11px; line-height: 1;
+  color: var(--dsw-alias-label-tertiary);
+  background: transparent; border: none; border-radius: 4px; cursor: pointer;
+}
+.dsh-cp-mini:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-1, rgba(255, 255, 255, 0.08)); }
+.dsh-cp-mini.danger:hover { color: #f87171; }
+.dsh-cp-mini.active { color: #3a83f7; }
+.dsh-cp-empty { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary); padding: 12px 6px; text-align: center; }
+.dsh-cp-editor { display: flex; flex-direction: column; gap: 6px; }
+.dsh-cp-input, .dsh-cp-textarea {
+  box-sizing: border-box; width: 100%;
+  padding: 6px 10px; font-size: 12px; line-height: 18px;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-1, rgba(255, 255, 255, 0.06));
+  border: 0.5px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.12));
+  border-radius: var(--dsw-radius-sm, 6px);
+  outline: none; font-family: inherit; resize: vertical;
+}
+.dsh-cp-textarea { min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.dsh-cp-actions { display: flex; justify-content: flex-end; gap: 6px; }
+.dsh-cp-action {
+  padding: 4px 12px; font-size: 12px; line-height: 18px;
+  color: var(--dsw-alias-label-secondary);
+  background: var(--dsw-alias-bg-layer-1, rgba(255, 255, 255, 0.06));
+  border: 0.5px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.12));
+  border-radius: var(--dsw-radius-sm, 6px);
+  cursor: pointer;
+}
+.dsh-cp-action:hover { color: var(--dsw-alias-label-primary); }
+.dsh-cp-action.primary { color: #fff; background: #3a83f7; border-color: transparent; }
+.dsh-cp-action.primary:hover { background: #4f8ef9; }
+/* 四选项横条：完全官方样式——令牌与几何照抄官方 QuoteSelection 按钮
+   （.U4oBDW_action：floating-fill 底 / 999px 胶囊 / panel 阴影 / xs-13 字）， */
+.dsh-cp-selmenu { display: flex; flex-direction: row; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
+  background: var(--dsw-alias-button-floating-fill, rgba(116, 126, 148, .24));
+  --dsw-elevation-stroke-color: var(--dsw-alias-border-l3, rgba(255, 255, 255, .1));
+  box-shadow: var(--dsw-elevation-panel, 0 0 0 .5px var(--dsw-elevation-stroke-color), 0 2px 6px rgba(0, 0, 0, .12));
+}
+.dsh-cp-selitem { border: none; background: transparent; text-align: center; padding: 5px 10px; font-size: 13px; line-height: 18px;
+  color: var(--dsw-alias-label-primary); border-radius: 999px; cursor: pointer; white-space: nowrap;
+  font-family: var(--dsw-font-family, inherit); letter-spacing: -.02em; }
+.dsh-cp-selitem:hover, .dsh-cp-selitem:focus-visible { background: var(--dsw-alias-button-floating-hover, rgba(116, 126, 148, .36)); }
+/* 官方浮动「引用文本」pill 由横条里的同名功能取代（同一 insertQuote API），隐藏避免双浮层 */
+[class*="U4oBDW_action"] { display: none !important; }
+.dsh-cp-toast { padding: 5px 12px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-primary, #fff);
+  background: rgba(50, 50, 54, 0.95); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
+/* ---- 划选引用 chip：Trae comment-mention 规格（ai-modules-chat/index.css）----
+   规格：高 22px / 圆角 --dsw-radius-sm(8) / business 浅色底 + business 主色文字 /
+   12px 500 / max-width 240；左图标在 hover 时换成 ×（Trae remove-mention-icon
+   同义）。颜色全部走 dsh 设计令牌，明暗主题各自生效，不再写死 Trae 的灰/蓝。 */
+[contenteditable] span[title^="${CHIP_MARK}"] {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  max-width: min(80%, 300px);
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: none;
+  color: var(--dsw-alias-state-business-primary, #4176e6);
+  font-family: var(--dsw-font-family, inherit);
+  font-size: 14px;
+  line-height: 20px;
+  vertical-align: baseline;
+  cursor: pointer;
+  overflow: hidden;
+  transition: background .14s ease;
+}
+[contenteditable] span[title^="${CHIP_MARK}"]:hover {
+  color: var(--dsw-alias-state-business-primary, #4176e6);
+}
+/* 隐藏宿主默认前缀（@ / file 图标），换官方同款 ❝ 引用标记（hover 变 ×） */
+[contenteditable] span[title^="${CHIP_MARK}"] > span:first-child { display: none; }
+[contenteditable] span[title^="${CHIP_MARK}"]::before {
+  content: '';
+  flex: 0 0 14px;
+  width: 14px;
+  height: 14px;
+  align-self: center;
+  margin-right: 2px;
+  background: currentColor;
+  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.6 3.2C4.5 4.3 3 6.3 3 8.6c0 2.3 1.3 3.7 3.2 3.7 1.6 0 2.7-1 2.7-2.5 0-1.4-.9-2.3-2.2-2.3-.4 0-.7 0-1 .2.3-1 .9-1.8 1.7-2.4L6.6 3.2Zm7 0c-2.1 1.1-3.6 3.1-3.6 5.4 0 2.3 1.3 3.7 3.2 3.7 1.6 0 2.7-1 2.7-2.5 0-1.4-.9-2.3-2.2-2.3-.4 0-.7 0-1 .2.3-1 .9-1.8 1.7-2.4l-.8-1.9Z' fill='black'/></svg>") center / 14px 14px no-repeat;
+  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.6 3.2C4.5 4.3 3 6.3 3 8.6c0 2.3 1.3 3.7 3.2 3.7 1.6 0 2.7-1 2.7-2.5 0-1.4-.9-2.3-2.2-2.3-.4 0-.7 0-1 .2.3-1 .9-1.8 1.7-2.4L6.6 3.2Zm7 0c-2.1 1.1-3.6 3.1-3.6 5.4 0 2.3 1.3 3.7 3.2 3.7 1.6 0 2.7-1 2.7-2.5 0-1.4-.9-2.3-2.2-2.3-.4 0-.7 0-1 .2.3-1 .9-1.8 1.7-2.4l-.8-1.9Z' fill='black'/></svg>") center / 14px 14px no-repeat;
+}
+[contenteditable] span[title^="${CHIP_MARK}"]:hover::before {
+  content: '×';
+  background: none;
+  -webkit-mask: none;
+  mask: none;
+  color: var(--dsw-alias-label-primary, currentColor);
+  font-size: 14px;
+  line-height: 14px;
+  text-align: center;
+}
+/* 消息正文里的同款 chip（user-text 规则节点；不在 contenteditable 里） */
+.dsh-si-msgchip { box-sizing: border-box; display: inline-flex; align-items: baseline; gap: 4px; max-width: min(80%, 300px);
+  padding: 0; border: none; border-radius: 0; background: none;
+  color: var(--dsw-alias-state-business-primary, #4176e6);
+  font-family: var(--dsw-font-family, inherit); font-size: 14px; line-height: 20px;
+  vertical-align: baseline; overflow: hidden; user-select: none; }
+.dsh-si-msgchip.interactive { cursor: pointer; }
+.dsh-si-msgchip-icon { flex: 0 0 14px; width: 14px; height: 14px; margin-right: 2px; opacity: .8; background: currentColor;
+  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.6 3.2C4.5 4.3 3 6.3 3 8.6c0 2.3 1.3 3.7 3.2 3.7 1.6 0 2.7-1 2.7-2.5 0-1.4-.9-2.3-2.2-2.3-.4 0-.7 0-1 .2.3-1 .9-1.8 1.7-2.4L6.6 3.2Zm7 0c-2.1 1.1-3.6 3.1-3.6 5.4 0 2.3 1.3 3.7 3.2 3.7 1.6 0 2.7-1 2.7-2.5 0-1.4-.9-2.3-2.2-2.3-.4 0-.7 0-1 .2.3-1 .9-1.8 1.7-2.4l-.8-1.9Z' fill='black'/></svg>") center / 14px 14px no-repeat;
+  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.6 3.2C4.5 4.3 3 6.3 3 8.6c0 2.3 1.3 3.7 3.2 3.7 1.6 0 2.7-1 2.7-2.5 0-1.4-.9-2.3-2.2-2.3-.4 0-.7 0-1 .2.3-1 .9-1.8 1.7-2.4L6.6 3.2Zm7 0c-2.1 1.1-3.6 3.1-3.6 5.4 0 2.3 1.3 3.7 3.2 3.7 1.6 0 2.7-1 2.7-2.5 0-1.4-.9-2.3-2.2-2.3-.4 0-.7 0-1 .2.3-1 .9-1.8 1.7-2.4l-.8-1.9Z' fill='black'/></svg>") center / 14px 14px no-repeat; }
+.dsh-si-msgchip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* 详情弹窗：dsh 原生 Dialog 观感（layer-1 表面 / 16 圆角 / 突出投影 / 标准按钮） */
+.dsh-si-mask { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
+  padding: 24px; background: var(--dsw-alias-bg-mask-1, rgba(0, 0, 0, .24)); }
+.dsh-si-dialog { box-sizing: border-box; width: min(480px, 100%); max-height: min(600px, 82vh); display: flex; flex-direction: column; gap: 12px;
+  padding: 16px; border-radius: var(--dsw-radius-lg, 16px); color: var(--dsw-alias-label-primary, #e8eefa); overflow-y: auto;
+  font-family: var(--dsw-font-family, inherit);
+  background: var(--dsw-alias-bg-layer-1, #232324);
+  border: .5px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, .08));
+  --dsw-elevation-stroke-color: var(--dsw-alias-border-l4, rgba(255, 255, 255, .2));
+  box-shadow: var(--dsw-elevation-prominent, 0 0 0 .5px var(--dsw-elevation-stroke-color), 0 8px 28px rgba(0, 0, 0, .28)); }
+.dsh-si-dialog-head { display: flex; align-items: center; gap: 8px; }
+.dsh-si-dialog-title { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 500; line-height: 24px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsh-si-dialog-x { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--dsw-radius-xs, 4px); cursor: pointer;
+  background: transparent; color: var(--dsw-alias-label-tertiary, #8a9096); font-size: 15px; line-height: 1; }
+.dsh-si-dialog-x:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, .08)); }
+.dsh-si-dialog-quote { box-sizing: border-box; flex: 1 1 auto; min-height: 40px; max-height: 240px; overflow: auto; padding: 10px 12px; border-radius: var(--dsw-radius-sm, 8px);
+  background: var(--dsw-alias-bg-module-platform, rgba(255, 255, 255, .06));
+  border-left: 2px solid var(--dsw-alias-state-business-primary, #3a83f7);
+  font-size: 14px; line-height: 22px; color: var(--dsw-alias-label-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
+.dsh-si-dialog-label { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary, #8a9096); }
+.dsh-si-dialog-detail { font-size: 14px; line-height: 22px; color: var(--dsw-alias-label-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
+.dsh-si-dialog-comment { box-sizing: border-box; width: 100%; min-height: 64px; max-height: 160px; resize: vertical; padding: 8px 10px;
+  font-size: 14px; line-height: 22px; font-family: inherit; color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-2, rgba(255, 255, 255, .06)); border: .5px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, .12));
+  border-radius: var(--dsw-radius-sm, 8px); outline: none; }
+.dsh-si-dialog-comment:focus {
+  border-color: var(--dsw-alias-state-business-primary, #3a83f7);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-business-primary, #3a83f7) 16%, transparent);
+}
+.dsh-si-dialog-foot { display: flex; align-items: center; gap: 8px; }
+.dsh-si-dialog-spacer { flex: 1 1 auto; }
+.dsh-si-dialog-btn { height: 30px; padding: 0 14px; font-size: 13px; font-weight: 500; line-height: 20px; cursor: pointer;
+  color: var(--dsw-alias-label-primary); background: var(--dsw-alias-button-elevated-fill, transparent);
+  border: .5px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, .12)); border-radius: var(--dsw-radius-sm, 8px); }
+.dsh-si-dialog-btn:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, .08)); }
+.dsh-si-dialog-btn.ghost { background: transparent; border-color: transparent; color: var(--dsw-alias-label-secondary); }
+.dsh-si-dialog-btn.ghost:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, .08)); }
+.dsh-si-dialog-btn.primary { color: var(--dsw-alias-label-primary-foreground, #fff);
+  background: var(--dsw-alias-button-primary-fill, #3a83f7); border-color: transparent; }
+.dsh-si-dialog-btn.primary:hover { background: var(--dsw-alias-button-primary-hover, #4f8ef9); }
+.dsh-si-dialog-btn.danger { background: transparent; border-color: transparent; color: var(--dsw-alias-state-error-primary, #f87171); }
+.dsh-si-dialog-btn.danger:hover { background: var(--dsw-alias-interactive-bg-hover-danger, rgba(248, 113, 113, .12)); }
+/* 划选评论编辑器：照抄 Trae CommentEditorCard（solo-lite 7920 包源码）——
+   previewCommentCardContainer（菜单底/1px 中性描边/radius 8/双层阴影）内嵌
+   commentEditorCard（320px/padding 8/gap 4 列布局）；无标题无预览无取消钮，
+   单行 = 透明自增 textarea（13px/20px，max-height 140）+ ✓ 主按钮；Enter 提交、
+   Shift+Enter 换行、Esc/点外取消。 */
+.dsh-si-comment-editor { position: fixed; z-index: 1300; box-sizing: border-box; width: 320px; padding: 8px;
+  display: flex; flex-direction: column; gap: 4px;
+  border-radius: var(--dsw-radius-sm, 8px); color: var(--dsw-alias-label-primary);
+  font-family: var(--dsw-font-family, inherit); background: var(--dsw-specific-menu, #202124);
+  border: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, .1));
+  /* specific-menu 是半透明底：必须配官方毛玻璃，否则透出下层文字（官方弹卡成对规则） */
+  backdrop-filter: var(--dsw-menu-backdrop-filter, blur(40px) saturate(150%));
+  -webkit-backdrop-filter: var(--dsw-menu-backdrop-filter, blur(40px) saturate(150%));
+  box-shadow: 0 2px 6px rgba(0, 0, 0, .19), 0 .5px rgba(255, 255, 255, .06), inset 0 .5px rgba(255, 255, 255, .06);
+  overflow: hidden;
+  transition: width .25s cubic-bezier(.4, 0, .2, 1), height .25s cubic-bezier(.4, 0, .2, 1);
+  visibility: hidden; }
+.dsh-si-comment-row { display: flex; align-items: center; gap: 8px; }
+.dsh-si-comment-input { flex: 1; min-width: 0; box-sizing: border-box; background: none; border: none; outline: none; resize: none;
+  color: var(--dsw-alias-label-primary); font-family: var(--dsw-font-family, inherit);
+  font-size: 13px; font-weight: 400; line-height: 20px; max-height: 140px;
+  padding: 0 8px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--dsw-alias-border-l2, rgba(255, 255, 255, .16)) transparent; }
+.dsh-si-comment-input::placeholder { color: var(--dsw-alias-label-tertiary); }
+.dsh-si-comment-submit { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
+  border: none; border-radius: 6px; cursor: pointer;
+  background: var(--dsw-alias-bg-layer-2, rgba(255, 255, 255, .12)); color: var(--dsw-alias-label-primary); }
+.dsh-si-comment-submit:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, .2)); }
+.dsh-si-comment-submit:disabled { opacity: .5; cursor: default; }
+/* 点击标签跳源时对源元素的闪烁高亮。 */
+.dsh-cp-flash { outline: 2px solid var(--dsw-alias-state-business-primary, #3a83f7) !important; outline-offset: 1px; border-radius: 3px; transition: outline-color .3s ease; }
+`
+
+  function ensureStyle() {
+    if (typeof document === 'undefined') return
+    if (document.getElementById(STYLE_ID)) return
+    const style = document.createElement('style')
+    style.id = STYLE_ID
+    style.textContent = CSS
+    document.head.appendChild(style)
+  }
+
+  async function api(path, body) {
+    try {
+      const res = await fetch(`${ENDPOINT}${path}`, body
+        ? { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) }
+        : { cache: 'no-store' })
+      return res.ok ? res.json() : null
+    } catch { return null }
+  }
+
+  /** 异常留痕：走 prompts /diag（0.4.0 起套件统一通道，落 superinput-debug.log）。 */
+  function report(message) {
+    try {
+      void fetch('/api/dsh-superinput/prompts/diag', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ message: `prompts: ${String(message).slice(0, 300)}` }),
+      }).catch(() => {})
+    } catch { /* ignore */ }
+  }
+
+  /* ------------------------------------------------------------------ */
+  /* 划选引用：输入框内联 chip（官方 reference source）+ /context 同步    */
+  /* ------------------------------------------------------------------ */
+
+  const selectionItems = new Map()      // id -> item（发送后归档，供消息正文的 chip 渲染）
+  const selectionSyncTimers = new Map()
+  const selectionActions = new Map()    // sessionId -> InputActions
+  const selectionDetailSubs = new Set()
+  let selectionDetailRequest = null
+  let selectionSessions = null          // ClientSessions 服务（取每会话 binding.ctx 发输入事件）
+  let selectionIdSeq = 0
+  let selectionStorageTimer = null
+
+  const tokenOf = (id) => `[选段#${id}]`
+  const previewOf = (text, max = 220) => String(text ?? '').replace(/\s+/g, ' ').trim().slice(0, max)
+
+  /** 选区矩形兜底：菜单给的 rect 失效时退回锚点元素/默认位置。 */
+  const normalizeSelectionRect = (rect, anchorEl) => {
+    const finite = (n) => typeof n === 'number' && Number.isFinite(n)
+    if (rect && finite(rect.left) && finite(rect.top) && finite(rect.right) && finite(rect.bottom)) return rect
+    const el = anchorEl instanceof Element ? anchorEl : null
+    if (el) {
+      const r = el.getBoundingClientRect()
+      return { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height }
+    }
+    return { left: 16, top: 80, right: 16, bottom: 80, width: 0, height: 0 }
+  }
+
+  /** chip 标签：Trae 是 `N. 选段文本 · 评论`（评论内联在标签里）。
+   * 有评论时把选段压到 ~14 字（Trae 的 text-content 也只占 50%），
+   * 否则 240px 的 chip 会把评论整段挤没。 */
+  const chipTextOf = (seq, text, comment) => {
+    const quote = String(text ?? '').replace(/\s+/g, ' ').trim()
+    const note = String(comment ?? '').replace(/\s+/g, ' ').trim()
+    if (!note) return `${seq}. ${quote}`
+    const head = quote.length > 14 ? `${quote.slice(0, 14)}…` : quote
+    return `${seq}. ${head} · ${note.slice(0, 40)}`
+  }
+  const chipLabelOf = (item) => `${CHIP_MARK}${chipTextOf(item.seq, item.text, item.comment)}`
+
+  /**
+   * 某条 chip 在 detect 坐标里的跨度。occurrences 的 offset 是 clipboard
+   * 坐标（chip 展开成 clipboardText），detect 坐标里每条 chip 只占 1 个
+   * U+FFFC——把前面所有 chip 的 (length-1) 扣掉即得。
+   */
+  function chipSpanOf(occurrences, ref, draftRev) {
+    const own = (occurrences ?? []).find((occ) => occ.source === SELECTION_SOURCE && occ.ref === ref)
+    if (!own) return null
+    let start = own.offset
+    for (const occ of occurrences) if (occ.offset < own.offset) start -= occ.length - 1
+    return { start, end: start + 1, draftRev }
+  }
+
+  /** 当前草稿里真实存在的条目，按草稿里的先后顺序（Trae 的编号顺序）。 */
+  function liveSelectionItems(sessionId, occurrences) {
+    if (!sessionId) return []
+    const seen = new Set()
+    const live = []
+    for (const occ of occurrences ?? []) {
+      if (occ.source !== SELECTION_SOURCE || seen.has(occ.ref)) continue
+      seen.add(occ.ref)
+      const item = selectionItems.get(occ.ref)
+      if (item && item.sessionId === sessionId) live.push(item)
+    }
+    return live
+  }
+
+  async function postContext(sessionId, items) {
+    if (!sessionId) return
+    try {
+      await fetch(`${ENDPOINT}/context`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({
+          sessionId,
+          items: items.map(({ text, comment }) => ({
+            text: String(text ?? '').slice(0, CONTEXT_TEXT_MAX),
+            comment: String(comment ?? '').slice(0, CONTEXT_COMMENT_MAX),
+          })),
+        }),
+        keepalive: true,
+      })
+    } catch { /* 网络失败时服务端保留上一份，不打断输入 */ }
+  }
+
+  /** 服务端 /context 同步：150ms 防抖；发送意图用 immediate flush。 */
+  function syncSelectionContext(sessionId, items, immediate) {
+    if (!sessionId) return
+    const previous = selectionSyncTimers.get(sessionId)
+    if (previous) clearTimeout(previous)
+    const send = () => {
+      selectionSyncTimers.delete(sessionId)
+      void postContext(sessionId, items)
+    }
+    if (immediate) send()
+    else selectionSyncTimers.set(sessionId, setTimeout(send, 150))
+  }
+
+  /** 落 sessionStorage：消息正文的 chip 在刷新后仍有文本/评论可渲染。 */
+  function persistSelectionItems() {
+    if (typeof sessionStorage === 'undefined' || selectionStorageTimer) return
+    selectionStorageTimer = setTimeout(() => {
+      selectionStorageTimer = null
+      try {
+        const snapshot = [...selectionItems.values()].slice(-120).map((item) => ({
+          id: item.id,
+          sessionId: item.sessionId,
+          seq: item.seq,
+          text: item.text,
+          comment: item.comment,
+          sent: item.sent === true,
+          at: item.at,
+        }))
+        sessionStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot))
+      } catch { /* 配额/隐私模式：忽略 */ }
+    }, 400)
+  }
+
+  function loadSelectionItems() {
+    if (typeof sessionStorage === 'undefined') return
+    try {
+      const saved = JSON.parse(sessionStorage.getItem(STORAGE_KEY) ?? '[]')
+      if (!Array.isArray(saved)) return
+      for (const raw of saved) {
+        if (!raw?.id || !raw?.text) continue
+        const id = String(raw.id)
+        if (selectionItems.has(id)) continue
+        const sessionId = String(raw.sessionId ?? '')
+        const seq = Number(raw.seq) || 0
+        selectionItems.set(id, {
+          id, sessionId, seq,
+          text: String(raw.text),
+          comment: String(raw.comment ?? ''),
+          anchor: null,
+          sent: raw.sent === true,
+          archived: true, // 历史条目：chip 已不在草稿里，只用于消息正文展示
+          at: Number(raw.at) || Date.now(),
+        })
+      }
+    } catch { /* 存档损坏：忽略 */ }
+  }
+
+  /** 走会话作用域的 slash/input-insert-reference 事件把 chip 插进官方编辑器。 */
+  function applySelectionInsert(sessionId, item, span) {
+    if (!span) return false
+    const binding = selectionSessions?.binding?.(sessionId)
+    const actx = binding?.ctx
+    if (!actx) return false
+    const request = {
+      reference: {
+        source: SELECTION_SOURCE,
+        ref: item.id,
+        label: chipLabelOf(item),
+        clipboardText: tokenOf(item.id),
+      },
+      span,
+    }
+    try {
+      if (typeof actx.bail === 'function') {
+        try { return actx.bail(actx, 'slash/input-insert-reference', request) === true }
+        catch { /* 有些版本只接受 (name, payload) */ }
+        try { return actx.bail('slash/input-insert-reference', request) === true }
+        catch { return false }
+      }
+      if (typeof actx.emit === 'function') {
+        actx.emit(actx, 'slash/input-insert-reference', request)
+        return true
+      }
+    } catch { return false }
+    return false
+  }
+
+  /** 删除一条 chip：用 insertText('') 替换它的 detect 跨度（空文本即删除）。 */
+  function applySelectionRemove(sessionId, item, span) {
+    if (!span) return false
+    const actions = selectionActions.get(sessionId)
+    if (typeof actions?.insertText !== 'function') return false
+    try { return actions.insertText('', span) === true } catch { return false }
+  }
+
+  function requestSelectionDetail(sessionId, id, focus) {
+    selectionDetailRequest = { sessionId, id, focus: focus === true }
+    for (const listener of selectionDetailSubs) {
+      try { listener() } catch { /* ignore */ }
+    }
+  }
+
+  loadSelectionItems()
+
+  /** 找出正文里的 {{变量}}，去重保序。 */
+  function varsOf(text) {
+    const found = []
+    const re = /\{\{\s*([a-zA-Z_$][\w$]*)\s*\}\}/g
+    let match
+    while ((match = re.exec(String(text ?? '')))) {
+      if (!found.includes(match[1])) found.push(match[1])
+    }
+    return found
+  }
+
+  /** 内置动态变量：同步可取的自动填值；取不到的（如剪贴板）留空手填/异步预填。 */
+  function autoValue(name) {
+    const now = new Date()
     if (name === '日期') return now.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
     if (name === '时间') return now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
     if (name === '星期') return now.toLocaleDateString('zh-CN', { weekday: 'long' })
@@ -4568,84 +5998,53 @@ function createPromptsClient(require) {
       if (hideTimer) clearTimeout(hideTimer)
       hideTimer = setTimeout(hide, 1800)
     }
-    const copySel = async (text) => {
-      hide()
-      try {
-        await navigator.clipboard?.writeText(text)
-        toast('已复制')
-      } catch {
-        toast('复制失败')
-      }
-    }
-
-    /** 把选中文字追加进输入框草稿（草稿桥是 enhancer 客户端挂的全局）。 */
-    const addToDraft = (text) => {
-      hide()
-      try {
-        const set = window.__dshSuperinputSetDraft
-        if (!set) { toast('草稿桥未就绪，刷新后重试'); return }
-        const current = String(window.__dshSuperinputDraft?.() ?? '')
-        set(current ? `${current}\n${text}` : text)
-        toast('已添加到输入框')
-      } catch {
-        toast('添加失败')
-      }
-    }
-
-    const save = async (text) => {
-      const title = text.replace(/\s+/g, ' ').trim().slice(0, 40)
-      hide()
-      try {
-        const res = await fetch('/api/dsh-superinput/prompts/save', {
-          method: 'POST',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ title, body: text }),
-        })
-        const data = res.ok ? await res.json() : null
-        toast(data?.ok ? '已存为模板' : '保存失败')
-      } catch {
-        toast('保存失败')
-      }
-    }
+    // 评论编辑器在 React 侧保存后要提示，复用这个文档级 toast。
+    window.__dshSuperinputToast = toast
 
-    // 选区变化驱动（dblclick 选词在 mouseup 之后才成形，selectionchange 才是可靠信号）
+    /* 四选项横条（用户拍板恢复 0.8.x 形态）：复制 / 引用文本（官方
+     * insertQuote 机制）/ 添加评论（Trae 评论卡 → chip）/ 存为模板。
+     * 官方自己的浮动「引用文本」pill 用 CSS 隐藏——横条里的「引用文本」
+     * 调同一个官方 API，避免双浮层。 */
     let showTimer = 0
     document.addEventListener('selectionchange', () => {
       try {
         if (showTimer) { clearTimeout(showTimer); showTimer = 0 }
         const selection = window.getSelection?.()
         const text = String(selection ?? '').trim()
-        if (!text || text.length < 4 || !selection.rangeCount) { hide(); return }
+        if (!text || !selection.rangeCount) { hide(); return }
         showTimer = setTimeout(() => {
           try {
             const sel = window.getSelection?.()
             const current = String(sel ?? '').trim()
-            if (!current || current.length < 4 || !sel.rangeCount) { hide(); return }
+            if (!current || !sel.rangeCount) { hide(); return }
             const node = sel.anchorNode
             const el = node instanceof Element ? node : node?.parentElement
-            // 只收对话正文：跳过输入区和我们自己的弹层
+            // 只收对话正文：跳过输入区、我们自己的弹层，以及侧栏/设置等非对话区域
             if (!el || el.closest('[data-dsh-superinput-portal]') || el.closest('[contenteditable="true"], textarea, input')) { hide(); return }
+            if (!el.closest('[data-chat-flow], [data-slot="conversation.chat.flow"]')) { hide(); return }
             const rect = sel.getRangeAt(0).getBoundingClientRect()
             if (!rect || (rect.width === 0 && rect.height === 0)) { hide(); return }
             const container = ensureHost()
-            // 横排菜单（复制 / 添加到对话 / 存为模板 ≈210px）：左缘对齐选区，右侧防溢出
-            container.style.left = `${Math.min(Math.max(8, rect.left), Math.max(8, window.innerWidth - 226))}px`
+            // 横排四项 ≈320px：左缘对齐选区，右侧防溢出
+            container.style.left = `${Math.min(Math.max(8, rect.left), Math.max(8, window.innerWidth - 330))}px`
             container.style.top = `${Math.max(8, rect.top - 44)}px`
             container.style.transform = ''
             container.style.display = 'block'
             const menu = document.createElement('div')
             menu.className = 'dsh-cp-selmenu'
-            menu.addEventListener('mousedown', (e) => e.stopPropagation())
+            // 阻止默认聚焦/清选区：否则 mousedown 触发 selectionchange，菜单会在 click 前被隐藏
+            menu.addEventListener('mousedown', (e) => { e.stopPropagation(); e.preventDefault() })
             const mkItem = (label, action) => {
               const b = document.createElement('button')
               b.className = 'dsh-cp-selitem'
               b.textContent = label
-              b.addEventListener('click', () => { void action(current) })
+              b.addEventListener('click', () => { void action(current, el, rect) })
               return b
             }
             menu.append(
               mkItem('复制', copySel),
-              mkItem('添加到对话', addToDraft),
+              mkItem('引用文本', quoteToComposer),
+              mkItem('添加评论', (text2) => openComment(text2, el, rect)),
               mkItem('存为模板', save))
             container.replaceChildren(menu)
           } catch { /* ignore */ }
@@ -4659,6 +6058,128 @@ function createPromptsClient(require) {
     document.addEventListener('selectionchange', () => {
       if (!String(window.getSelection?.() ?? '').trim()) hide()
     })
+
+    const copySel = async (text) => {
+      hide()
+      if (!navigator.clipboard?.writeText) { toast('当前环境不支持复制'); return }
+      try {
+        await navigator.clipboard.writeText(text)
+        toast('已复制')
+      } catch {
+        toast('复制失败')
+      }
+    }
+
+    /** 官方「引用文本」同款：inputActions.insertQuote 插 Markdown blockquote。
+     * plain 模式限制下返回 false 时，退回草稿桥手写 `> ` 前缀（发送后官方
+     * quoteRule 一样渲染成引用样式）。 */
+    const quoteToComposer = (text) => {
+      hide()
+      const insert = window.__dshSuperinputInsertQuote
+      if (typeof insert === 'function' && insert(text) === true) { toast('已引用到输入框'); return }
+      try {
+        const set = window.__dshSuperinputSetDraft
+        if (!set) { toast('输入框桥未就绪，刷新后重试'); return }
+        const block = text.split('\n').map((line) => `> ${line}`).join('\n')
+        const current = String(window.__dshSuperinputDraft?.() ?? '')
+        set(current ? `${current}\n${block}` : block)
+        toast('已引用到输入框')
+      } catch {
+        toast('引用失败')
+      }
+    }
+
+    /** Trae 的「添加评论」：在选区旁弹评论卡，保存后才插 chip（带评论）。
+     * rect 是选区矩形，React 侧用它把卡片锚在选区附近。 */
+    const openComment = (text, anchorEl, rect) => {
+      hide()
+      const open = window.__dshSuperinputCommentContext
+      if (typeof open !== 'function') { toast('评论编辑器未就绪，刷新后重试'); return }
+      let status = 'failed'
+      try {
+        status = open(text, anchorEl, {
+          left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom,
+          width: rect.width, height: rect.height,
+        })
+      } catch { status = 'failed' }
+      if (status === 'full') toast(`最多添加 ${CONTEXT_MAX} 段对话内容`)
+      else if (status === 'empty') toast('选段为空')
+      else if (status === 'failed') toast('打开评论编辑器失败')
+    }
+
+    const save = async (text) => {
+      const title = text.replace(/\s+/g, ' ').trim().slice(0, 40)
+      hide()
+      try {
+        const res = await fetch('/api/dsh-superinput/prompts/save', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ title, body: text }),
+        })
+        const data = res.ok ? await res.json() : null
+        toast(data?.ok ? '已存为模板' : '保存失败')
+      } catch {
+        toast('保存失败')
+      }
+    }
+
+    /* Trae dragDropMention 等价：把对话里划选的文字拖进输入框，落成引用 chip。
+     * dragstart 时对选区打自定义 dataTransfer 标记 + stash 文本；dragover 放行
+     * composer；drop 拦截宿主的纯文本插入，走 __dshSuperinputDropContext 插 chip。 */
+    let dragSelection = null // { text, anchorEl }
+    document.addEventListener('dragstart', (event) => {
+      try {
+        const selection = window.getSelection?.()
+        const text = String(selection ?? '').trim()
+        const node = selection?.anchorNode
+        const el = node instanceof Element ? node : node?.parentElement
+        if (!text || !el?.closest?.('[data-chat-flow], [data-slot="conversation.chat.flow"]')
+          || el.closest?.('[contenteditable="true"], textarea, input')) { dragSelection = null; return }
+        dragSelection = { text: text.slice(0, CONTEXT_TEXT_MAX), anchorEl: el }
+        try { event.dataTransfer?.setData('application/x-dsh-selection', '1') } catch { /* 标记失败只影响识别 */ }
+      } catch { dragSelection = null }
+    }, true)
+    document.addEventListener('dragover', (event) => {
+      try {
+        if (!dragSelection) return
+        const target = event.target
+        if (!(target instanceof Element) || !target.closest?.('[contenteditable="true"]')) return
+        event.preventDefault()
+        if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy'
+      } catch { /* ignore */ }
+    }, true)
+    document.addEventListener('drop', (event) => {
+      try {
+        if (!dragSelection) return
+        const target = event.target
+        if (!(target instanceof Element) || !target.closest?.('[contenteditable="true"]')) return
+        event.preventDefault()
+        event.stopPropagation()
+        const { text, anchorEl } = dragSelection
+        dragSelection = null
+        // 尽力把光标挪到落点：宿主 captureInsertion 读到哪就是哪。
+        try {
+          const range = typeof document.caretRangeFromPoint === 'function'
+            ? document.caretRangeFromPoint(event.clientX, event.clientY)
+            : null
+          if (range) {
+            window.getSelection()?.removeAllRanges()
+            window.getSelection()?.addRange(range)
+          }
+        } catch { /* 定位失败就落原 caret */ }
+        const insert = window.__dshSuperinputDropContext ?? window.__dshSuperinputAddContext
+        if (typeof insert === 'function') {
+          const status = insert(text, anchorEl)
+          const toast = window.__dshSuperinputToast
+          if (typeof toast === 'function') {
+            if (status === 'added') toast('已添加到对话')
+            else if (status === 'dup') toast('该选段已在列表中')
+            else if (status === 'full') toast(`最多添加 ${CONTEXT_MAX} 段对话内容`)
+          }
+        }
+      } catch { /* ignore */ }
+    }, true)
+    document.addEventListener('dragend', () => { dragSelection = null }, true)
   }
 
   function PromptsPanel({ anchor, onClose, onSyncSlash }) {
@@ -4954,6 +6475,525 @@ function createPromptsClient(require) {
     render() { return this.state.crashed ? null : this.props.children }
   }
 
+  /** 详情弹窗：Trae 点 chip 打开的**只读** Dialog（引用全文 + 评论 + 跳转原文）。
+   * 评论不在这个弹窗里编辑——Trae 的评论在选区旁的 previewCommentCard 输入；
+   * 这里只展示结果（与 ai-modules-chat 的 mention-info-modal 同构）。 */
+  function SelectionDetail({ title, text, comment, onNavigate, onClose }) {
+    const maskRef = React.useRef(null)
+
+    /* 桌面壳（Electron）里 body 会变成 0×0 的 fixed 包含块：`inset: 0` 的遮罩
+     * 缩在左下角，弹窗被裁掉。打开后量一次遮罩实际矩形，若没有铺满视口，
+     * 就按测量偏移把遮罩校正回视口原点并铺满——不依赖宿主沿用哪种 portal。 */
+    React.useEffect(() => {
+      const mask = maskRef.current
+      if (!mask || typeof window === 'undefined') return undefined
+      let corrected = false
+      const fix = () => {
+        const vw = window.innerWidth
+        const vh = window.innerHeight
+        if (!corrected) {
+          const rect = mask.getBoundingClientRect()
+          if (rect.width >= vw * 0.8 && rect.height >= vh * 0.8) return
+          corrected = true
+          mask.style.position = 'fixed'
+          mask.style.inset = 'auto'
+          mask.style.left = `${-rect.left}px`
+          mask.style.top = `${-rect.top}px`
+          mask.style.display = 'flex'
+          mask.style.alignItems = 'center'
+          mask.style.justifyContent = 'center'
+          report(`selection dialog: corrected mask ${Math.round(rect.width)}x${Math.round(rect.height)}@${Math.round(rect.left)},${Math.round(rect.top)} to viewport ${vw}x${vh}`)
+        }
+        mask.style.width = `${vw}px`
+        mask.style.height = `${vh}px`
+        mask.style.boxSizing = 'border-box'
+      }
+      fix()
+      window.addEventListener('resize', fix)
+      return () => window.removeEventListener('resize', fix)
+    }, [])
+
+    return h('div', {
+      ref: maskRef,
+      className: 'dsh-si-mask',
+      onMouseDown: (event) => { event.stopPropagation(); onClose?.() },
+    },
+      h('div', {
+        className: 'dsh-si-dialog',
+        onMouseDown: (event) => event.stopPropagation(),
+        onClick: (event) => event.stopPropagation(),
+      },
+        h('div', { className: 'dsh-si-dialog-head' },
+          h('span', { className: 'dsh-si-dialog-title' }, title),
+          h('button', { className: 'dsh-si-dialog-x', 'aria-label': '关闭', onClick: () => onClose?.() }, '×')),
+        h('div', { className: 'dsh-si-dialog-quote' }, text),
+        comment ? h(React.Fragment, null,
+          h('div', { className: 'dsh-si-dialog-label' }, '评论'),
+          h('div', { className: 'dsh-si-dialog-detail' }, comment)) : null,
+        h('div', { className: 'dsh-si-dialog-foot' },
+          onNavigate ? h('button', { className: 'dsh-si-dialog-btn', onClick: onNavigate }, '跳转原文') : null,
+          h('span', { className: 'dsh-si-dialog-spacer' }),
+          h('button', { className: 'dsh-si-dialog-btn ghost', onClick: () => onClose?.() }, '关闭')))
+    )
+  }
+
+  /** 划选评论编辑器：照抄 Trae CommentEditorCard——无标题/无预览/无取消钮，
+   * 单行 = 透明自增 textarea + ✓ 按钮；Enter 提交、Shift+Enter 换行、
+   * Esc/点外取消；IME 组合期不提交。锚在选区旁，不遮罩。 */
+  function SelectionCommentEditor({ draft, onSave, onCancel }) {
+    const [value, setValue] = React.useState(draft.comment ?? '')
+    const cardRef = React.useRef(null)
+    const inputRef = React.useRef(null)
+    const valueRef = React.useRef(value)
+    React.useEffect(() => { valueRef.current = value }, [value])
+
+    // textarea 自增高（Trae 同款：height auto → scrollHeight，上限 140）
+    React.useEffect(() => {
+      const el = inputRef.current
+      if (!el) return
+      el.style.height = 'auto'
+      el.style.height = `${Math.min(el.scrollHeight, 140)}px`
+    }, [value])
+
+    React.useEffect(() => {
+      const card = cardRef.current
+      if (!card || typeof window === 'undefined') return
+      const vw = window.innerWidth
+      const vh = window.innerHeight
+      const margin = 8
+      const width = Math.min(320, vw - margin * 2)
+      card.style.width = `${width}px`
+      const height = card.getBoundingClientRect().height || 44
+      const rect = draft.rect ?? {}
+      let left = Math.min(Math.max(margin, (rect.left ?? 16) + 20), Math.max(margin, vw - width - margin))
+      let top = (rect.bottom ?? 80) + 8
+      if (top + height > vh - margin) top = Math.max(margin, (rect.top ?? 80) - height - 8)
+      // 先放到期望位置；桌面壳若把 fixed 包含块变成 0×0，再按实际偏差校正。
+      card.style.visibility = 'hidden'
+      card.style.left = `${left}px`
+      card.style.top = `${top}px`
+      const actual = card.getBoundingClientRect()
+      const dx = actual.left - left
+      const dy = actual.top - top
+      if (Math.abs(dx) > 1) card.style.left = `${left - dx}px`
+      if (Math.abs(dy) > 1) card.style.top = `${top - dy}px`
+      card.style.visibility = 'visible'
+      const textarea = card.querySelector('textarea')
+      if (textarea) {
+        textarea.focus()
+        textarea.setSelectionRange?.(textarea.value.length, textarea.value.length)
+      }
+    }, [draft])
+
+    React.useEffect(() => {
+      const onDown = (event) => {
+        if (cardRef.current?.contains(event.target)) return
+        onCancel?.()
+      }
+      document.addEventListener('mousedown', onDown, true)
+      return () => document.removeEventListener('mousedown', onDown, true)
+    }, [onCancel])
+
+    const submit = () => {
+      if (!value.trim()) return
+      onSave?.(value)
+    }
+
+    return createPortal(h('div', {
+      ref: cardRef,
+      className: 'dsh-si-comment-editor',
+      onMouseDown: (event) => event.stopPropagation(),
+      onClick: (event) => event.stopPropagation(),
+    },
+      h('div', { className: 'dsh-si-comment-row' },
+        h('textarea', {
+          ref: inputRef,
+          className: 'dsh-si-comment-input',
+          rows: 1,
+          value,
+          placeholder: '输入你的评论...',
+          'aria-label': '输入你的评论...',
+          onInput: (event) => setValue(event.target.value),
+          onKeyDown: (event) => {
+            if (event.nativeEvent?.isComposing || event.nativeEvent?.keyCode === 229) return
+            event.stopPropagation()
+            if (event.key === 'Escape') { event.preventDefault(); onCancel?.() }
+            else if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
+              event.preventDefault()
+              submit()
+            }
+          },
+        }),
+        h('button', {
+          className: 'dsh-si-comment-submit',
+          title: draft.comment ? '保存' : '评论到对话',
+          'aria-label': draft.comment ? '保存' : '评论到对话',
+          disabled: !value.trim(),
+          onClick: submit,
+        },
+          h('svg', { width: 14, height: 14, viewBox: '0 0 16 16', 'aria-hidden': true },
+            h('path', {
+              d: 'M13.5 4.5L6.5 11.5L2.5 7.5',
+              fill: 'none', stroke: 'currentColor', 'stroke-width': '1.8',
+              'stroke-linecap': 'round', 'stroke-linejoin': 'round',
+            }))))
+    ), document.body)
+  }
+
+  /** 划选引用桥：把「添加到对话」插成输入框内的官方 reference chip。
+   * Trae 的引用是编辑器里的内联节点（conversation-selection-mention-symbol），
+   * dsh 对外只开放 reference chip 这一条内联通道——这里注册自定义 source，
+   * 用 slash/input-insert-reference 落 chip，并按 Trae 规格重着色。
+   * 输入框上方不再有独立 pill 行。 */
+  function SelectionContextBridge({ session, useInput, inputActions }) {
+    const sessionId = session?.sessionId === undefined ? '' : String(session.sessionId)
+    const draftRev = useInput((state) => state?.draftRev ?? 0)
+    const occurrences = useInput((state) => state?.occurrences)
+    const phase = useInput((state) => state?.phase)
+    const snapshotRef = React.useRef({ draftRev, occurrences })
+    const actionsRef = React.useRef(inputActions)
+    const previousPhase = React.useRef(phase)
+    const [, setVersion] = React.useState(0)
+    const [dialog, setDialog] = React.useState(null)
+    const [editor, setEditor] = React.useState(null)
+    const bump = () => setVersion((value) => value + 1)
+
+    React.useEffect(() => {
+      snapshotRef.current = { draftRev, occurrences }
+      actionsRef.current = inputActions
+    }, [draftRev, occurrences, inputActions])
+
+    React.useEffect(() => {
+      if (!sessionId || !inputActions) return undefined
+      selectionActions.set(sessionId, inputActions)
+      return () => {
+        if (selectionActions.get(sessionId) === inputActions) selectionActions.delete(sessionId)
+      }
+    }, [sessionId, inputActions])
+
+    /** 发送意图：把当前 chip 立即同步给服务端（pre-step 读取），并标记发送。 */
+    const flushForSend = () => {
+      if (!sessionId) return
+      const live = liveSelectionItems(sessionId, snapshotRef.current.occurrences)
+      if (live.length === 0) return
+      syncSelectionContext(sessionId, live, true)
+      for (const item of live) item.sent = true
+      persistSelectionItems()
+    }
+
+    /** 插入/更新一条选段 chip；comment === undefined 表示「不改已有评论」。 */
+    const insertSelection = (text, anchorEl, comment) => {
+      const clean = String(text ?? '').trim().slice(0, CONTEXT_TEXT_MAX)
+      if (!clean) return { status: 'empty' }
+      const live = liveSelectionItems(sessionId, snapshotRef.current.occurrences)
+      const existing = live.find((entry) => entry.text === clean)
+      if (existing) {
+        if (comment !== undefined) {
+          const next = String(comment ?? '').slice(0, CONTEXT_COMMENT_MAX).trim()
+          if (next !== (existing.comment ?? '')) {
+            existing.comment = next
+            const span = chipSpanOf(snapshotRef.current.occurrences, existing.id, snapshotRef.current.draftRev)
+            if (span) applySelectionInsert(sessionId, existing, span)
+            bump()
+            syncSelectionContext(sessionId, liveSelectionItems(sessionId, snapshotRef.current.occurrences), false)
+            persistSelectionItems()
+          }
+        }
+        return { status: 'dup', id: existing.id, item: existing }
+      }
+      if (live.length >= CONTEXT_MAX) return { status: 'full' }
+      const actions = actionsRef.current
+      if (typeof actions?.captureInsertion !== 'function') return { status: 'failed' }
+      let span
+      try {
+        const insertion = actions.captureInsertion()
+        // 折叠到选区末尾：只插入、不替换用户已选中的草稿文字。
+        span = { start: insertion.end, end: insertion.end, draftRev: insertion.draftRev }
+      } catch { return { status: 'failed' } }
+      // 显示序号按当前输入框里的条目数重排（Trae 每个草稿从 1 开始）。
+      const seq = live.reduce((max, entry) => Math.max(max, entry.seq ?? 0), 0) + 1
+      const id = `${Date.now().toString(36)}${(++selectionIdSeq).toString(36)}`
+      const item = {
+        id, sessionId, seq,
+        text: clean,
+        comment: comment === undefined ? '' : String(comment ?? '').slice(0, CONTEXT_COMMENT_MAX).trim(),
+        anchor: anchorEl instanceof Element ? new WeakRef(anchorEl) : null,
+        sent: false,
+        archived: false,
+        at: Date.now(),
+      }
+      if (!applySelectionInsert(sessionId, item, span)) return { status: 'failed' }
+      selectionItems.set(id, item)
+      bump()
+      syncSelectionContext(sessionId, [...live, item], false)
+      persistSelectionItems()
+      return { status: 'added', id, item }
+    }
+
+    /** 删除一条选段：chip + 条目 + 服务端同步（hover × / 编辑器移除共用）。 */
+    const dropSelectionItem = (item) => {
+      if (!item) return
+      const span = chipSpanOf(snapshotRef.current.occurrences, item.id, snapshotRef.current.draftRev)
+      if (span) applySelectionRemove(item.sessionId, item, span)
+      selectionItems.delete(item.id)
+      bump()
+      syncSelectionContext(item.sessionId, liveSelectionItems(item.sessionId, snapshotRef.current.occurrences), false)
+      persistSelectionItems()
+    }
+
+    React.useEffect(() => {
+      const was = previousPhase.current
+      previousPhase.current = phase
+      if (was !== 'submitting' && phase === 'submitting') flushForSend()
+    }, [phase, sessionId])
+
+    // 发送按钮 / Enter 比 phase 更早、更可靠；window capture 先于宿主监听。
+    React.useEffect(() => {
+      if (!sessionId) return undefined
+      const onClick = (event) => {
+        const target = event.target
+        if (target?.closest?.('button[aria-label*="发送消息"], button[aria-label*="Send"], button[aria-label*="send"]')) flushForSend()
+      }
+      const onKey = (event) => {
+        if (event.key !== 'Enter' || event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) return
+        if (!event.target?.closest?.('[contenteditable="true"]')) return
+        flushForSend()
+      }
+      window.addEventListener('click', onClick, true)
+      window.addEventListener('keydown', onKey, true)
+      return () => {
+        window.removeEventListener('click', onClick, true)
+        window.removeEventListener('keydown', onKey, true)
+      }
+    }, [sessionId])
+
+    // 草稿里的 chip 被键盘删掉 / 发送后清空：以 occurrences 为真相修剪条目。
+    React.useEffect(() => {
+      if (!sessionId) return
+      const refs = new Set()
+      for (const occ of occurrences ?? []) if (occ.source === SELECTION_SOURCE) refs.add(occ.ref)
+      let changed = false
+      for (const [id, item] of selectionItems) {
+        if (item.sessionId !== sessionId) continue
+        if (item.archived) {
+          // 草稿恢复出的历史 chip：重新激活，参与同步
+          if (refs.has(id)) { item.archived = false; item.sent = false; changed = true }
+          continue
+        }
+        if (refs.has(id)) continue
+        if (item.sent) { item.archived = true; changed = true; continue }
+        selectionItems.delete(id)
+        changed = true
+      }
+      if (changed) bump()
+      syncSelectionContext(sessionId, liveSelectionItems(sessionId, occurrences), false)
+      persistSelectionItems()
+    }, [occurrences, sessionId])
+
+    // 详情弹窗请求（chip 点击 → source.openReference；添加成功后也会主动打开）。
+    React.useEffect(() => {
+      if (!sessionId) return undefined
+      const listener = () => {
+        const request = selectionDetailRequest
+        if (!request || request.sessionId !== sessionId) return
+        selectionDetailRequest = null
+        const item = selectionItems.get(request.id)
+        if (!item) return
+        setEditor(null)
+        setDialog({ id: request.id })
+      }
+      selectionDetailSubs.add(listener)
+      listener()
+      return () => { selectionDetailSubs.delete(listener) }
+    }, [sessionId])
+
+    // Trae 的两个入口（previewCommentCard）：
+    // - 添加到对话：先插 chip，再把选区旁的卡片原位切成评论编辑器（addThenComment）；
+    // - 评论到对话：先弹评论卡片，保存后才插 chip（带评论）。
+    React.useEffect(() => {
+      if (!sessionId) return undefined
+      const add = (text, anchorEl, rect) => {
+        const result = insertSelection(text, anchorEl, undefined)
+        if (result.status === 'added' || result.status === 'dup') {
+          const item = result.item ?? (result.id ? selectionItems.get(result.id) : null)
+          if (item) {
+            // Trae addThenComment：chips 已经进输入框，卡片原位切换为评论编辑。
+            setDialog(null)
+            setEditor({
+              id: item.id,
+              text: item.text,
+              comment: item.comment ?? '',
+              anchorEl: anchorEl instanceof Element ? anchorEl : null,
+              rect: normalizeSelectionRect(rect, anchorEl),
+            })
+          }
+        }
+        return result.status
+      }
+      const openComment = (text, anchorEl, rect) => {
+        const clean = String(text ?? '').trim().slice(0, CONTEXT_TEXT_MAX)
+        if (!clean) return 'empty'
+        const live = liveSelectionItems(sessionId, snapshotRef.current.occurrences)
+        const existing = live.find((entry) => entry.text === clean)
+        if (!existing && live.length >= CONTEXT_MAX) return 'full'
+        setDialog(null)
+        setEditor({
+          id: existing?.id ?? null,
+          text: clean,
+          comment: existing?.comment ?? '',
+          anchorEl: anchorEl instanceof Element ? anchorEl : null,
+          rect: normalizeSelectionRect(rect, anchorEl),
+        })
+        return 'opened'
+      }
+      window.__dshSuperinputAddContext = add
+      window.__dshSuperinputCommentContext = openComment
+      // Trae dragDropMention 同义：拖放进来的引用只插 chip，不弹评论卡
+      //（拖拽是快速引用手势；要评论走划选菜单的「评论到对话」）。
+      window.__dshSuperinputDropContext = (text, anchorEl) => insertSelection(text, anchorEl, undefined)
+      return () => {
+        if (window.__dshSuperinputAddContext === add) delete window.__dshSuperinputAddContext
+        if (window.__dshSuperinputCommentContext === openComment) delete window.__dshSuperinputCommentContext
+        if (window.__dshSuperinputDropContext === insertSelection) delete window.__dshSuperinputDropContext
+      }
+    }, [sessionId])
+
+    // chip 悬停时左侧图标变 ×（Trae remove-mention-icon）；点左侧 20px 移除。
+    React.useEffect(() => {
+      if (!sessionId) return undefined
+      const onClick = (event) => {
+        const target = event.target
+        const chip = target?.closest?.('span[title]')
+        if (!chip || !chip.closest?.('[contenteditable="true"]')) return
+        if (!String(chip.title || '').startsWith(CHIP_MARK)) return
+        const rect = chip.getBoundingClientRect()
+        if (event.clientX > rect.left + 20 || !chip.matches(':hover')) return
+        const label = String(chip.title)
+        const item = [...selectionItems.values()].find((entry) => entry.sessionId === sessionId && chipLabelOf(entry) === label)
+        if (!item) return
+        event.preventDefault()
+        event.stopPropagation()
+        dropSelectionItem(item)
+      }
+      document.addEventListener('click', onClick, true)
+      return () => document.removeEventListener('click', onClick, true)
+    }, [sessionId])
+
+    const navigateTo = (item) => {
+      try {
+        const el = item.anchor?.deref?.()
+        if (el?.isConnected) {
+          el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+          el.classList.add('dsh-cp-flash')
+          setTimeout(() => el.classList.remove('dsh-cp-flash'), 1600)
+        }
+      } catch { /* 锚点失效：静默降级 */ }
+    }
+
+    /** 评论卡片保存：已有条目更新评论，新条目插 chip（带评论）。 */
+    const saveEditorComment = (comment) => {
+      const draft = editor
+      if (!draft) return
+      const next = String(comment ?? '').slice(0, CONTEXT_COMMENT_MAX).trim()
+      const existing = draft.id ? selectionItems.get(draft.id) : null
+      if (existing) {
+        if (next !== (existing.comment ?? '')) {
+          existing.comment = next
+          const span = chipSpanOf(snapshotRef.current.occurrences, existing.id, snapshotRef.current.draftRev)
+          if (span) applySelectionInsert(existing.sessionId, existing, span)
+          bump()
+          syncSelectionContext(existing.sessionId, liveSelectionItems(existing.sessionId, snapshotRef.current.occurrences), false)
+          persistSelectionItems()
+          window.__dshSuperinputToast?.('已保存评论')
+        }
+      } else {
+        const result = insertSelection(draft.text, draft.anchorEl, next)
+        if (result.status === 'added' || result.status === 'dup') window.__dshSuperinputToast?.('已添加到对话')
+        else if (result.status === 'full') window.__dshSuperinputToast?.(`最多添加 ${CONTEXT_MAX} 段对话内容`)
+        else if (result.status === 'failed') window.__dshSuperinputToast?.('保存失败')
+      }
+      setEditor(null)
+    }
+
+    const dialogItem = dialog ? selectionItems.get(dialog.id) : null
+    const editorNode = editor ? h(SelectionCommentEditor, {
+      key: `comment:${editor.id ?? 'new'}:${editor.text}`,
+      draft: editor,
+      onSave: saveEditorComment,
+      onCancel: () => setEditor(null),
+    }) : null
+    const detailNode = dialogItem ? createPortal(h(SelectionDetail, {
+      title: `${dialogItem.seq}. ${previewOf(dialogItem.text, 48)}`,
+      text: dialogItem.text,
+      comment: dialogItem.comment,
+      onNavigate: dialogItem.anchor ? () => navigateTo(dialogItem) : null,
+      onClose: () => setDialog(null),
+    }), document.body) : null
+    if (!editorNode && !detailNode) return null
+    return h(React.Fragment, null, editorNode, detailNode)
+  }
+
+  /** 消息正文的选段 chip：user-text 规则把 token 换成同款标签（Trae 消息里的
+   * mention chip 同义）。刷新后条目由 sessionStorage 恢复。 */
+  const selectionUserTextRule = {
+    id: SELECTION_RULE,
+    order: 5,
+    match(text, from) {
+      const re = /\[选段#([0-9a-z]+)\]/g
+      re.lastIndex = from
+      const found = re.exec(text)
+      if (!found) return undefined
+      const item = selectionItems.get(found[1])
+      if (!item) return undefined
+      return {
+        id: SELECTION_RULE,
+        start: found.index,
+        end: found.index + found[0].length,
+        data: { id: item.id, seq: item.seq, text: item.text, comment: item.comment },
+      }
+    },
+  }
+
+  function SelectionMessageChip({ node, interactive }) {
+    const data = node?.data ?? {}
+    const [open, setOpen] = React.useState(false)
+    const label = chipTextOf(data.seq, data.text, data.comment)
+    return h(React.Fragment, null,
+      h('span', {
+        className: `dsh-si-msgchip${interactive ? ' interactive' : ''}`,
+        title: data.text,
+        onClick: interactive ? () => setOpen(true) : undefined,
+      },
+        h('span', { className: 'dsh-si-msgchip-icon', 'aria-hidden': true }),
+        h('span', { className: 'dsh-si-msgchip-label' }, label)),
+      open ? createPortal(h(SelectionDetail, {
+        title: label,
+        text: data.text,
+        comment: data.comment,
+        onClose: () => setOpen(false),
+      }), document.body) : null)
+  }
+
+  /** 草稿桥：划选「添加评论」、模板插入、/ 命令插入、横条「引用文本」共用。
+   * 挂 conversation.input.dock——该槽位会注入 useInput / inputActions；
+   * composer.dock 不注入这些 props。片段模块移除时桥被一并删掉，这里补回。 */
+  function PromptsDraftBridge({ useInput, inputActions }) {
+    const draft = useInput((state) => state?.draft)
+    React.useEffect(() => {
+      window.__dshSuperinputDraft = () => (typeof draft === 'string' ? draft : '')
+      if (typeof inputActions?.setDraft === 'function') {
+        window.__dshSuperinputSetDraft = (value) => {
+          try { inputActions.setDraft(value) } catch { /* ignore */ }
+        }
+      }
+      // 官方「引用文本」同款 API（0.2.2-rc.1 起可用）：plain 模式下插 blockquote
+      window.__dshSuperinputInsertQuote = (text) => {
+        try { return typeof inputActions?.insertQuote === 'function' && inputActions.insertQuote(text) === true } catch { return false }
+      }
+    }, [draft, inputActions])
+    return null
+  }
+
   function PromptsButton({ onSyncSlash }) {
     const [open, setOpen] = React.useState(false)
     const ref = React.useRef(null)
@@ -4967,7 +7007,7 @@ function createPromptsClient(require) {
   }
 
   return {
-    inject: ['slots'],
+    inject: ['slots', 'sessions', 'uiConversation'],
     apply(ctx) {
       ensureStyle()
       installSelectionSaver()
@@ -5024,6 +7064,70 @@ function createPromptsClient(require) {
         id: 'dsh-superinput-prompts-btn',
         order: 4,
       }, (props) => h(PromptsBoundary, null, h(PromptsButton, { ...props, onSyncSlash: syncSlash }))))
+
+      /* 划选引用的官方 input source：codec 决定 chip 的粘贴文本与送模文本；
+       * candidates 恒空——只是借 @ 触发器的注册位拿到一个合法的自定义
+       * source（官方 chip 插入/序列化按 source 名路由），不往 @ 菜单加条目。 */
+      const selectionSource = {
+        trigger: '@',
+        name: SELECTION_SOURCE,
+        showGroupTitle: false,
+        async candidates() { return [] },
+        onPick() { return undefined },
+        openReference(session, reference) {
+          const targetSession = session?.sessionId === undefined ? '' : String(session.sessionId)
+          const ref = String(reference?.ref ?? '')
+          if (!targetSession || !selectionItems.has(ref)) return false
+          requestSelectionDetail(targetSession, ref, false)
+          return true
+        },
+        codec: {
+          clipboardText: (ref) => tokenOf(ref),
+          serialize: async (ref) => tokenOf(ref),
+        },
+      }
+      ctx.inject(['inputTriggers'], (scope) => {
+        try {
+          const service = scope.get('inputTriggers')
+          ctx.effect(() => service.registerSource(selectionSource), 'dsh-superinput: selection source')
+        } catch (error) {
+          report(`selection source register failed: ${error?.message ?? error}`)
+        }
+      })
+      ctx.inject(['sessions'], (scope) => {
+        selectionSessions = scope.get('sessions')
+      })
+
+      // 消息正文里的同款 chip：user-text 规则 + 节点渲染槽位。
+      ctx.inject(['uiConversation'], (scope) => {
+        try {
+          const ui = scope.get('uiConversation')
+          if (typeof ui?.userText?.register === 'function') {
+            ctx.effect(() => ui.userText.register(selectionUserTextRule), 'dsh-superinput: selection user-text rule')
+          }
+        } catch (error) {
+          report(`selection user-text rule failed: ${error?.message ?? error}`)
+        }
+      })
+      ctx.slots.inject('conversation.user.text.node', () => ctx.slots.register({
+        name: 'conversation.user.text.node',
+        key: SELECTION_RULE,
+        priority: 20,
+      }, SelectionMessageChip))
+
+      // 草稿桥挂 input.dock（该槽位注入 useInput / inputActions）
+      ctx.slots.inject('conversation.input.dock', () => ctx.slots.register({
+        name: 'conversation.input.dock',
+        id: 'dsh-superinput-prompts-bridge',
+        order: 96,
+      }, PromptsDraftBridge))
+
+      // 划选引用桥：chip 已内联在编辑器里，这个槽位只提供入口与详情弹窗。
+      ctx.slots.inject('conversation.input.dock', () => ctx.slots.register({
+        name: 'conversation.input.dock',
+        id: 'dsh-superinput-selection-context',
+        order: 97,
+      }, (props) => h(PromptsBoundary, null, h(SelectionContextBridge, props))))
     },
   }
 }
@@ -5258,6 +7362,7 @@ window.__ModuleLoader__.load({
       ['followup', createFollowupClient],
       ['voice', createVoiceClient],
       ['prompts', createPromptsClient],
+      ['compaction', createCompactionClient],
       ['hub', createHubClient],
     ]
     // 模块异常上报：console 不落盘，失败必须走 prompts /diag 留痕。