dsh-remote-plugin 0.7.0 → 0.7.2

package/public/insights.js

@@ -0,0 +1,228 @@
+/* Shared read-only context/cost UI. No plugin UI bundles, scripts or settings. */
+;(function (root) {
+  'use strict'
+  const obj = v => v && typeof v === 'object' && !Array.isArray(v) ? v : null
+  const num = v => typeof v === 'number' && Number.isFinite(v) && v >= 0 ? v : null
+  const esc = v => String(v ?? '').slice(0, 240).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]))
+  const categories = ['system', 'tools', 'user', 'inject', 'skill', 'assistant', 'tool']
+  const labels = {
+    zh: { title: '会话洞察', context: '上下文', cost: '费用与额度', close: '关闭', refresh: '刷新', loading: '正在读取…',
+      none: '选择一个会话后查看洞察。', missing: '此主机尚未提供 dsh-context 数据。请安装并启用插件后刷新。',
+      unavailable: '读取失败，请重试。已有概览仍可查看。', unsupported: '当前插件或 DSH 版本暂不支持此数据格式。',
+      costMissing: '此主机尚未提供费用数据。需要启用 dsh-cost-meter，并更新主机端 Remote 插件。',
+      occupancy: '上下文占用', modelName: '当前模型', estimated: '组成 Token 为插件估算；占用优先使用 DSH 官方投影。',
+      system: '系统提示', tools: '工具定义', user: '用户消息', inject: '注入内容', skill: '技能', assistant: '助手消息', tool: '工具结果',
+      composition: '当前组成', events: '最近上下文变化', noEvents: '尚无压缩、裁剪或注入记录。',
+      compaction: '压缩', prune: '裁剪', model: '模型变更', mode: '模式变更', counts: '累计变化',
+      detailsFailed: '变化记录暂不可用，点击刷新重试。', detailsLoading: '正在读取变化记录…',
+      session: '当前会话 API 费用', today: '今日 API 费用', equivalent: '含套餐等值估算', subagents: '子代理 API 费用（单列）',
+      balance: '账户余额', plans: '套餐额度 · 已用', source: '数据来源', assembled: '摘要读取于', queried: '供应商查询于',
+      estimateNote: '费用由插件账本按用量估算，以供应商账单为准；套餐等值金额不计入 API 费用，子代理费用单独列出。',
+      sessionMissing: '插件账本尚无此会话记录', noPlans: '主机未启用可展示的套餐额度。', off: '主机未开启查询',
+      error: '供应商查询失败', stale: '缓存数据', unknown: '暂无有效数据', unlimited: '不限量', reset: '重置',
+      rolling: '滚动窗口', weekly: '每周', monthly: '每月', date: '主机记账日', details: '明细' },
+    en: { title: 'Session insights', context: 'Context', cost: 'Cost & quotas', close: 'Close', refresh: 'Refresh', loading: 'Loading…',
+      none: 'Select a session to view insights.', missing: 'This host has no dsh-context data. Enable the plugin, then refresh.',
+      unavailable: 'Could not read data. Retry; the current overview is still available.', unsupported: 'This plugin or DSH version uses an unsupported data format.',
+      costMissing: 'Enable dsh-cost-meter and update the host Remote plugin to read costs.', occupancy: 'Context occupancy', modelName: 'Current model',
+      estimated: 'Composition tokens are plugin estimates; occupancy uses the DSH projection when available.',
+      system: 'System prompt', tools: 'Tool definitions', user: 'User messages', inject: 'Injections', skill: 'Skills', assistant: 'Assistant', tool: 'Tool results',
+      composition: 'Current composition', events: 'Recent context changes', noEvents: 'No compaction, pruning or injection records yet.',
+      compaction: 'Compaction', prune: 'Pruning', model: 'Model change', mode: 'Mode change', counts: 'Total changes',
+      detailsFailed: 'Change records are unavailable. Refresh to retry.', detailsLoading: 'Loading change records…',
+      session: 'Session API cost', today: 'Today API cost', equivalent: 'Estimate including plan equivalents', subagents: 'Subagent API cost (separate)',
+      balance: 'Account balance', plans: 'Plan quotas · used', source: 'Source', assembled: 'Summary read at', queried: 'Provider queried at',
+      estimateNote: 'Costs are usage estimates from the plugin ledger. Provider invoices are authoritative. Plan equivalents and subagents are shown separately.',
+      sessionMissing: 'No ledger record for this session yet', noPlans: 'No visible plan quota is enabled on this host.', off: 'Query disabled on host',
+      error: 'Provider query failed', stale: 'Cached data', unknown: 'No valid data', unlimited: 'Unlimited', reset: 'Resets',
+      rolling: 'Rolling window', weekly: 'Weekly', monthly: 'Monthly', date: 'Host ledger date', details: 'Details' },
+  }
+  let lang = 'zh'
+  const t = key => labels[lang][key] || key
+  const tokens = v => num(v) === null ? '—' : new Intl.NumberFormat(lang === 'zh' ? 'zh-CN' : 'en-US', { maximumFractionDigits: 0 }).format(v)
+  const money = (v, currency = 'USD', digits = 4) => num(v) === null || !/^[A-Z]{3}$/.test(currency) ? '—' : currency + ' ' + v.toFixed(digits)
+  const time = v => typeof v === 'number' && v > 0 && v < 8640000000000000 ? new Date(v).toLocaleString(lang === 'zh' ? 'zh-CN' : 'en-US') : '—'
+  function contextOf(value) {
+    const data = obj(value), current = obj(data?.current)
+    if (!data || !current || num(current.total) === null) return null
+    if (categories.some(key => num(current[key]) === null)) return null
+    return { ...data, current: Object.fromEntries([...categories, 'total'].map(key => [key, current[key]])) }
+  }
+  function costOf(value) {
+    const data = obj(value)
+    if (data?.schema !== 1 || data.available !== true || data.source !== 'dsh-cost-meter' || data.currency !== 'USD') return null
+    return data
+  }
+  function metric(label, value, note = '') {
+    return `<div class="ins-metric"><span>${esc(label)}</span><strong>${esc(value)}</strong>${note ? `<small>${esc(note)}</small>` : ''}</div>`
+  }
+  function bar(percent, label) {
+    const value = num(percent)
+    return value === null ? '' : `<div class="ins-progress" role="progressbar" aria-label="${esc(label)}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${Math.min(value, 100)}"><span style="width:${Math.min(value, 100)}%"></span></div>`
+  }
+  function contextHtml(session, detail, detailStatus) {
+    const values = obj(session?.projections?.values) || {}, head = contextOf(values.contextTimeline)
+    // Only combine a detail with the projection revision that requested it.
+    const compatible = detail && (!head || head.detailRev === detail.rev)
+    const timeline = head || (compatible ? contextOf(detail.head) : null)
+    if (timeline?.unsupported) return `<p class="ins-empty">${esc(t('unsupported'))}</p>`
+    if (!timeline) return `<p class="ins-empty">${esc(detailStatus === 'loading' ? t('loading') : detailStatus === 'error' ? t('unavailable') : t('missing'))}</p>`
+    const pressure = obj(values.contextPressure), occupied = num(pressure?.pressureTokens) ?? timeline.current.total
+    const window = num(pressure?.contextWindow) ?? num(timeline.contextWindow), percent = window > 0 ? occupied / window * 100 : null
+    let html = `<section class="ins-section"><div class="ins-section-head"><h3>${esc(t('occupancy'))}</h3><span class="ins-badge">dsh-context</span></div>
+      <div class="ins-metrics">${metric(t('occupancy'), tokens(occupied), window > 0 ? '/ ' + tokens(window) + ' tokens' : '')}${metric(t('modelName'), timeline.model || '—', timeline.provider || '')}</div>
+      ${bar(percent, t('occupancy'))}<p class="ins-note">${esc(t('estimated'))}</p></section>
+      <section class="ins-section"><h3>${esc(t('composition'))}</h3><div class="ins-composition">`
+    for (const key of categories) {
+      const count = timeline.current[key], share = timeline.current.total > 0 ? count / timeline.current.total * 100 : 0
+      html += `<div class="ins-category"><span>${esc(t(key))}</span><span class="ins-track"><i style="width:${Math.min(share, 100)}%"></i></span><strong>${tokens(count)}</strong></div>`
+    }
+    html += '</div></section>'
+    const counts = obj(timeline.counts)
+    if (counts) html += `<section class="ins-section"><h3>${esc(t('counts'))}</h3><div class="ins-metrics">${['compactions', 'prunes', 'injects'].map((key, i) => metric(t(['compaction', 'prune', 'inject'][i]), tokens(counts[key]))).join('')}</div></section>`
+    const events = head?.detailRev !== undefined ? (compatible ? detail.events : []) : timeline.events
+    html += `<section class="ins-section"><h3>${esc(t('events'))}</h3>`
+    if (head?.detailRev !== undefined && !compatible) html += `<p class="ins-note">${esc(t(detailStatus === 'loading' ? 'detailsLoading' : 'detailsFailed'))}</p>`
+    else if (!Array.isArray(events) || !events.length) html += `<p class="ins-note">${esc(t('noEvents'))}</p>`
+    else html += '<ol class="ins-events">' + events.filter(row => obj(row) && ['compaction', 'prune', 'inject', 'model', 'mode'].includes(row.kind)).slice(-8).reverse().map(row => `<li><div><strong>${esc(t(row.kind))}</strong><time>${esc(time(row.time))}</time></div><span>${esc(row.name || row.sub || '')}${num(row.tokens) !== null ? ' · ' + tokens(row.tokens) + ' tokens' : ''}</span></li>`).join('') + '</ol>'
+    return html + `</section><p class="ins-source">${esc(t('source'))} · dsh-context / DSH</p>`
+  }
+  function costHtml(raw, phase) {
+    const data = costOf(raw)
+    if (!data) return `<p class="ins-empty">${esc(t(phase === 'loading' ? 'loading' : phase === 'error' ? 'unavailable' : raw?.available === false ? 'costMissing' : 'unsupported'))}</p>`
+    const own = data.session?.found === true ? data.session.own : null
+    let html = (phase === 'error' ? `<p role="status" class="ins-note">${esc(t('unavailable'))}</p>` : '') + `<section class="ins-section"><div class="ins-section-head"><h3>${esc(t('cost'))}</h3><span class="ins-badge">dsh-cost-meter</span></div><div class="ins-metrics">
+      ${metric(t('session'), money(own?.apiCost), own ? '' : t('sessionMissing'))}${metric(t('today'), money(data.today?.apiCost), data.day ? t('date') + ' · ' + data.day : '')}
+      ${own && num(own.cost) !== null && own.cost !== own.apiCost ? metric(t('equivalent'), money(own.cost)) : ''}
+      ${num(data.session?.subagentCount) > 0 ? metric(t('subagents'), money(data.session?.subagents?.apiCost)) : ''}</div><p class="ins-note">${esc(t('estimateNote'))}</p></section>`
+    if (obj(data.balance)) {
+      const balance = data.balance
+      html += `<section class="ins-section"><h3>${esc(t('balance'))}</h3><div class="ins-metrics">${metric(t('balance'), balance.status === 'ok' ? money(balance.total, balance.currency, 2) : '—', balance.status === 'ok' ? t('queried') + ' · ' + time(balance.fetchedAt) : t(['off', 'error', 'stale'].includes(balance.status) ? balance.status : 'unknown'))}</div></section>`
+    }
+    html += `<section class="ins-section"><h3>${esc(t('plans'))}</h3>`
+    const plans = Array.isArray(data.plans) ? data.plans.slice(0, 20) : []
+    if (!plans.length) html += `<p class="ins-note">${esc(t('noPlans'))}</p>`
+    for (const rawPlan of plans) {
+      const plan = obj(rawPlan)
+      if (!plan) continue
+      html += `<div class="ins-plan"><strong>${esc(plan.name)}</strong>`
+      if (plan.status !== 'ok') html += `<p class="ins-note">${esc(t(['off', 'error', 'stale'].includes(plan.status) ? plan.status : 'unknown'))}</p>`
+      else {
+        const rows = Array.isArray(plan.windows) ? plan.windows.slice(0, 8) : []
+        if (!rows.length) html += `<p class="ins-note">${esc(t('unknown'))}</p>`
+        for (const rawRow of rows) {
+          const row = obj(rawRow)
+          if (!row) continue
+          const percent = num(row.percent)
+          html += `<div class="ins-plan-row"><span>${esc(t(row.name))}</span><strong>${row.unlimited === true ? esc(t('unlimited')) : percent !== null && percent <= 100 ? percent.toFixed(1) + '%' : '—'}</strong></div>${row.unlimited === true ? '' : bar(percent, plan.name + ' ' + row.name)}${row.resetsAt ? `<small>${esc(t('reset'))} · ${esc(row.resetsAt)}</small>` : ''}`
+        }
+      }
+      html += `<small>${esc(t('queried'))} · ${esc(time(plan.fetchedAt))}</small></div>`
+    }
+    return html + `</section><p class="ins-source">${esc(t('source'))} · dsh-cost-meter<br>${esc(t('assembled'))} · ${esc(time(data.generatedAt))}</p>`
+  }
+
+  let dialog, options, tab = 'context', generation = 0, controller, poll, debounce
+  let detail = null, detailStatus = '', cost = null, costStatus = '', detailTask = false, detailRevision
+  function current() { return options?.getSession?.() }
+  function valid(g) { return g === generation && dialog?.open && options.connection.valid() && current()?.sessionId === options.sessionId }
+  function render() {
+    if (!dialog?.open) return
+    if (!valid(generation)) { close(); return }
+    dialog.querySelector('.ins-content').innerHTML = tab === 'context' ? contextHtml(current(), detail, detailStatus) : costHtml(cost, costStatus)
+    for (const button of dialog.querySelectorAll('[data-ins-tab]')) {
+      const active = button.dataset.insTab === tab
+      button.setAttribute('aria-selected', String(active)); button.tabIndex = active ? 0 : -1
+    }
+    dialog.querySelector('.ins-content').setAttribute('aria-labelledby', 'ins-tab-' + tab)
+  }
+  async function request(path, body, g) {
+    if (!valid(g)) throw new Error('stale')
+    const connection = options.connection
+    const parent = controller.signal, attempt = new AbortController()
+    const abort = () => attempt.abort()
+    parent.addEventListener('abort', abort, { once: true })
+    const deadline = setTimeout(abort, 25000)
+    try {
+      const response = await fetch(options.url(path), { method: body ? 'POST' : 'GET', headers: { authorization: 'Bearer ' + connection.token,
+        'x-dsh-remote-client': 'web', 'content-type': 'application/json' }, ...(body ? { body: JSON.stringify(body) } : {}), signal: attempt.signal })
+      if (!valid(g)) throw new Error('stale')
+      if (!response.ok) { const error = new Error('read-failed'); error.status = response.status; throw error }
+      const source = await response.text()
+      if (!valid(g)) throw new Error('stale')
+      if (source.length > 2 * 1024 * 1024) throw new Error('too-large')
+      const data = JSON.parse(source)
+      if (!obj(data) || data.ok !== true) throw new Error('invalid-response')
+      return data
+    } finally { clearTimeout(deadline); parent.removeEventListener('abort', abort) }
+  }
+  async function loadContext(force = false) {
+    const g = generation, head = contextOf(current()?.projections?.values?.contextTimeline)
+    if (!valid(g) || tab !== 'context' || detailTask || head?.unsupported) return
+    if (head && head.detailRev === undefined) { detailStatus = ''; render(); return }
+    const revision = head?.detailRev ?? null
+    if (!force && detail && detailRevision === revision) return
+    detailTask = true; detailStatus = 'loading'; render()
+    try {
+      const data = await request('/api/dsh-context/detail', { sessionId: options.sessionId }, g)
+      if (!valid(g)) return
+      const next = obj(data.value), newest = contextOf(current()?.projections?.values?.contextTimeline)
+      if (next && num(next.rev) !== null && Array.isArray(next.events) && contextOf(next.head)) {
+        if (newest?.detailRev !== undefined && newest.detailRev !== next.rev) { detailStatus = 'changed'; return }
+        detail = { rev: next.rev, head: next.head, events: next.events }; detailRevision = newest?.detailRev ?? null; detailStatus = ''
+      } else if (next === null) detailStatus = 'missing'
+      else detailStatus = 'error'
+    } catch (error) { if (valid(g)) detailStatus = error.status === 404 ? 'missing' : 'error' }
+    finally {
+      if (g === generation) { detailTask = false; render(); if (detailStatus === 'changed') scheduleContext() }
+    }
+  }
+  async function loadCost() {
+    const g = generation
+    if (!valid(g) || tab !== 'cost' || costStatus === 'loading') return
+    costStatus = 'loading'; render()
+    try {
+      const data = await request('/remote/api/insights/cost?sessionId=' + encodeURIComponent(options.sessionId), null, g)
+      if (!valid(g)) return
+      if (data.available === false || costOf(data)) { cost = data; costStatus = '' }
+      else costStatus = 'error'
+    } catch (error) { if (valid(g)) { costStatus = 'error'; if (error.status === 404) { cost = { available: false }; costStatus = '' } } }
+    finally { if (valid(g)) render() }
+  }
+  function scheduleContext() { clearTimeout(debounce); debounce = setTimeout(() => loadContext(), 400) }
+  function close() {
+    generation++; controller?.abort(); clearInterval(poll); clearTimeout(debounce)
+    if (dialog?.open) dialog.close()
+    options = null; detail = null; cost = null; detailTask = false; detailStatus = ''; costStatus = ''
+  }
+  function open(opts) {
+    close(); options = opts; tab = opts.tab === 'cost' ? 'cost' : 'context'; lang = root.I18N?.lang === 'en' ? 'en' : 'zh'
+    options.sessionId = current()?.sessionId
+    if (!options.sessionId) return
+    controller = new AbortController(); detailRevision = undefined
+    if (!dialog) {
+      dialog = document.createElement('dialog'); dialog.className = 'ins-dialog'; document.body.append(dialog)
+      dialog.addEventListener('cancel', event => { event.preventDefault(); close() })
+      dialog.addEventListener('close', () => { if (options && !dialog.open) close() })
+    }
+    dialog.innerHTML = `<header class="ins-header"><div><h2 id="ins-title">${esc(t('title'))}</h2><p>${esc(opts.getTitle?.() || options.sessionId)}</p></div><button type="button" data-ins-close aria-label="${esc(t('close'))}">×</button></header>
+      <nav class="ins-tabs" role="tablist" aria-label="${esc(t('title'))}"><button type="button" role="tab" id="ins-tab-context" data-ins-tab="context" aria-controls="ins-content">${esc(t('context'))}</button><button type="button" role="tab" id="ins-tab-cost" data-ins-tab="cost" aria-controls="ins-content">${esc(t('cost'))}</button><button type="button" data-ins-refresh>${esc(t('refresh'))}</button></nav><div id="ins-content" class="ins-content" role="tabpanel" tabindex="0"></div>`
+    dialog.setAttribute('aria-labelledby', 'ins-title')
+    dialog.querySelector('[data-ins-close]').addEventListener('click', close)
+    function select(value) { tab = value; render(); tab === 'cost' ? loadCost() : loadContext() }
+    dialog.querySelectorAll('[data-ins-tab]').forEach(button => {
+      button.addEventListener('click', () => select(button.dataset.insTab))
+      button.addEventListener('keydown', event => {
+        if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return
+        event.preventDefault(); select(event.key === 'Home' ? 'context' : event.key === 'End' ? 'cost' : tab === 'context' ? 'cost' : 'context')
+        dialog.querySelector('[data-ins-tab="' + tab + '"]').focus()
+      })
+    })
+    dialog.querySelector('[data-ins-refresh]').addEventListener('click', () => tab === 'cost' ? loadCost() : loadContext(true))
+    dialog.showModal(); render(); tab === 'cost' ? loadCost() : loadContext()
+    poll = setInterval(() => { if (!valid(generation)) close(); else if (tab === 'cost') loadCost(); else { render(); loadContext() } }, 60000)
+  }
+  const api = { open, close, update() { if (dialog?.open) { render(); if (dialog.open && tab === 'context') scheduleContext() } }, contextOf, costOf, contextHtml, costHtml }
+  root.DshInsights = api
+  if (typeof module !== 'undefined') module.exports = api
+})(typeof window !== 'undefined' ? window : globalThis)

package/public/plugin-center.css

@@ -1 +1,89 @@
-.pc-dialog{width:min(860px,94vw);max-height:88dvh;box-sizing:border-box;border:1px solid #7775;border-radius:18px;background:var(--dsr-panel,#171b24);color:var(--dsr-text,#eee);padding:22px;overflow:auto}.pc-dialog::backdrop{background:#0009}.pc-heading,.pc-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pc-heading{justify-content:space-between}.pc-dialog h2,.pc-dialog h3{margin:0}.pc-dialog h3{font-size:16px;overflow-wrap:anywhere}.pc-dialog p{line-height:1.6;overflow-wrap:anywhere}.pc-dialog button,.pc-dialog input{font:inherit;border:1px solid #8886;border-radius:9px;padding:9px 12px;background:transparent;color:inherit}.pc-dialog button{cursor:pointer}.pc-dialog button:disabled{opacity:.4;cursor:not-allowed}.pc-dialog button:focus-visible,.pc-dialog input:focus-visible{outline:2px solid #6e9dff;outline-offset:2px}.pc-dialog input{max-width:100%;box-sizing:border-box;min-width:0}.pc-market-tools:not([hidden]){display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.pc-search{flex:1}.pc-card{border:1px solid #8884;border-radius:12px;padding:16px;margin:12px 0}.pc-card>button,.pc-card>input,.pc-card>a{margin:8px 8px 0 0}.pc-dialog a{color:var(--dsr-accent-strong)}.pc-dialog details{padding:10px 0}.pc-dialog summary{cursor:pointer;overflow-wrap:anywhere}.pc-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;font-size:12px}.pc-message{color:var(--dsr-text)}.pc-profile{font-weight:600}.pc-dialog small{opacity:.7}@media(max-width:520px){.pc-dialog{padding:15px}.pc-dialog button{min-height:42px}.pc-actions>*{flex:1}.pc-card{padding:12px}}
+/* Shared plugin manager: theme tokens, readable cards and compact mobile controls. */
+.pc-dialog{width:min(920px,94vw);max-height:88dvh;box-sizing:border-box;border:1px solid var(--dsr-line,#30363d);border-radius:20px;background:var(--dsr-bg,#0d1117);color:var(--dsr-text,#eee);padding:26px;overflow:auto}
+.pc-dialog *,.pc-dialog *::before,.pc-dialog *::after{box-sizing:border-box}
+.pc-dialog::backdrop{background:var(--dsr-overlay,#0009)}
+.pc-dialog [hidden]{display:none!important}
+.pc-dialog h2,.pc-dialog h3,.pc-dialog p{margin:0}
+.pc-dialog h2{font-size:26px;letter-spacing:-.5px;line-height:1.3}
+.pc-dialog h3{font-size:16px;line-height:1.4;overflow-wrap:anywhere}
+.pc-dialog p{line-height:1.6;overflow-wrap:anywhere}
+.pc-dialog button,.pc-dialog input,.pc-dialog select{font:inherit;font-size:13px;color:inherit;border:1px solid var(--dsr-line,#30363d);border-radius:10px;padding:10px 13px;background:var(--dsr-panel,#161b22)}
+.pc-dialog button{cursor:pointer;transition:background .15s,border-color .15s}
+.pc-dialog button:hover{background:var(--dsr-panel-2,#21262d);border-color:var(--dsr-muted,#888)}
+.pc-dialog button:disabled{opacity:.45;cursor:not-allowed}
+.pc-dialog :is(button,input,select):focus-visible{outline:2px solid var(--dsr-accent,#58a6ff);outline-offset:3px}
+.pc-dialog input{min-width:0;max-width:100%}
+.pc-dialog a{color:var(--dsr-accent-strong,#79c0ff)}
+.pc-dialog small{font-size:12px;color:var(--dsr-muted,#a7b0bc)}
+.pc-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
+.pc-intro{margin-top:7px!important;font-size:13px;color:var(--dsr-muted,#a7b0bc)}
+.pc-context{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:22px 0}
+.pc-profile{font-size:12px;color:var(--dsr-muted,#a7b0bc)}
+.pc-profile::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--dsr-accent,#58a6ff);margin-right:7px;vertical-align:2px}
+.pc-summary{display:flex;align-items:center;gap:20px}
+.pc-stat{display:inline-flex;align-items:baseline;gap:7px;font-size:12px;color:var(--dsr-muted,#a7b0bc)}
+.pc-stat strong{color:var(--dsr-text,#eee);font-size:20px;font-weight:650;font-variant-numeric:tabular-nums}
+.pc-status,.pc-message:not(:empty),.pc-recovery:not(:empty){border:1px solid var(--dsr-warning-line,#ff9e6466);border-radius:12px;padding:12px 14px;margin:0 0 16px!important;font-size:13px;background:var(--dsr-warning-soft,#ff9e6421);color:var(--dsr-text,#eee)}
+.pc-message:empty,.pc-detail:empty,.pc-recovery:empty{display:none}
+.pc-recovery button{margin-top:10px}
+.pc-controls{border:1px solid var(--dsr-line,#30363d);border-radius:14px;padding:12px;margin-bottom:20px;background:var(--dsr-panel,#161b22)}
+.pc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
+.pc-tabs{display:flex;gap:3px;min-width:0;padding:3px;border-radius:10px;background:var(--dsr-bg-2,#11161e)}
+.pc-tabs button{white-space:nowrap;padding:8px 14px;background:transparent;border-color:transparent;color:var(--dsr-muted,#a7b0bc);border-radius:8px}
+.pc-tabs button.active{background:var(--dsr-accent-soft,#58a6ff1f);color:var(--dsr-accent-strong,#79c0ff)}
+.pc-dialog .pc-refresh{border-color:transparent;background:transparent;color:var(--dsr-muted,#a7b0bc);padding:8px;flex-shrink:0}
+.pc-filters:not([hidden]),.pc-market-tools:not([hidden]){display:flex;gap:10px;margin-top:12px}
+.pc-filters input,.pc-search{flex:1;width:0}
+.pc-filters select{flex-shrink:0;max-width:42%}
+.pc-market-tools{flex-wrap:wrap}
+.pc-market-tools .pc-search{flex-basis:160px}
+.pc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:14px}
+.pc-card{min-width:0;border:1px solid var(--dsr-line,#30363d);border-radius:16px;padding:18px;background:var(--dsr-panel,#161b22)}
+.pc-card-head{display:flex;align-items:center;gap:12px;min-height:40px}
+.pc-card-head h3{flex:1;min-width:0}
+.pc-plugin-icon{display:flex;justify-content:center;align-items:center;flex:0 0 40px;height:40px;font-size:17px;font-weight:600;border-radius:12px;background:var(--dsr-accent-soft,#58a6ff1f);color:var(--dsr-accent-strong,#79c0ff)}
+.pc-description{margin-top:14px!important;font-size:13px;color:var(--dsr-muted,#a7b0bc);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.pc-package{display:block;margin-top:7px;font-family:ui-monospace,monospace;overflow-wrap:anywhere;font-size:12px!important}
+.pc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:14px 0 16px}
+.pc-badge,.pc-version{font-size:11px;border-radius:6px;padding:4px 7px;line-height:1.2;background:var(--dsr-panel-2,#21262d);color:var(--dsr-muted,#a7b0bc)}
+.pc-badge.is-active{background:var(--dsr-success-soft,#4bcf7e21);color:var(--dsr-success,#4bcf7e)}
+.pc-badge.is-error{background:var(--dsr-error-soft,#ff8f6b24);color:var(--dsr-error,#ff8f6b)}
+.pc-dialog .pc-toggle{position:relative;flex:0 0 42px;width:42px;height:26px;min-height:0;padding:0;border-radius:20px;border:1px solid var(--dsr-line,#30363d);background:var(--dsr-panel-2,#21262d);font-size:0}
+.pc-toggle::after{content:'';position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:50%;background:var(--dsr-muted,#a7b0bc);transition:transform .15s}
+.pc-dialog .pc-toggle[aria-checked=true]{background:var(--dsr-accent,#58a6ff);border-color:var(--dsr-accent,#58a6ff)}
+.pc-toggle[aria-checked=true]::after{transform:translateX(16px);background:var(--dsr-on-accent,#07111f)}
+.pc-card-actions{display:flex;align-items:center;gap:6px;border-top:1px solid var(--dsr-line,#30363d);padding-top:12px;margin-top:auto}
+.pc-card-actions button{border-color:transparent;background:transparent;font-size:12px;padding:8px 10px}
+.pc-card-actions .pc-detail-button{background:var(--dsr-accent-soft,#58a6ff1f);color:var(--dsr-accent-strong,#79c0ff);margin-right:auto}
+.pc-card-actions .pc-danger-button{color:var(--dsr-muted,#a7b0bc)}
+.pc-card-actions .pc-danger-button:hover{background:var(--dsr-error-soft,#ff8f6b24);color:var(--dsr-error,#ff8f6b);border-color:transparent}
+.pc-list>.pc-card{display:flex;flex-direction:column}
+.pc-detail .pc-card{margin-bottom:18px;border-color:var(--dsr-accent-line,#58a6ff66)}
+.pc-detail .pc-description{display:block}
+.pc-detail .pc-card>p,.pc-detail .pc-card>h4{margin:14px 0 0;font-size:13px}
+.pc-detail .pc-card>button,.pc-detail .pc-card>input,.pc-detail .pc-card>a{margin:16px 8px 0 0}
+.pc-dialog button.pc-primary{background:var(--dsr-accent,#58a6ff);color:var(--dsr-on-accent,#07111f);border-color:transparent}
+.pc-dialog button.pc-danger-confirm{background:var(--dsr-error-soft,#ff8f6b24);color:var(--dsr-error,#ff8f6b);border-color:var(--dsr-error-line,#ff8f6b66)}
+.pc-empty{grid-column:1/-1;padding:30px 16px;text-align:center;border:1px dashed var(--dsr-line,#30363d);border-radius:14px;font-size:13px;color:var(--dsr-muted,#a7b0bc)}
+.pc-list>details,.pc-market-note{grid-column:1/-1}
+.pc-market-note{font-size:12px;color:var(--dsr-muted,#a7b0bc);margin-bottom:4px!important}
+.pc-dialog details{font-size:13px;padding:12px 0}
+.pc-dialog summary{cursor:pointer;overflow-wrap:anywhere;color:var(--dsr-muted,#a7b0bc)}
+.pc-runtime,.pc-history{border-top:1px solid var(--dsr-line,#30363d);margin-top:6px}
+.pc-history{margin-top:16px}
+.pc-dialog details p{margin-top:10px;font-size:12px}
+.pc-jobs>details{margin-top:12px;padding:12px;border-radius:10px;background:var(--dsr-panel,#161b22)}
+.pc-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;font-size:12px}
+.pc-page{width:100%;max-height:none;border:0;border-radius:0;background:transparent;padding:12px 0 24px;overflow:visible}
+.plugins-view{padding-top:8px}
+@media(max-width:520px){
+ .pc-dialog{padding:18px}.pc-page{padding:6px 0 24px}.pc-dialog h2{font-size:24px}
+ .pc-context{align-items:flex-start;flex-direction:column;gap:10px;margin:18px 0}.pc-summary{gap:24px}
+ .pc-controls{padding:10px;margin-bottom:16px}.pc-toolbar{gap:4px}.pc-tabs{flex:1}
+ .pc-tabs button{flex:1;padding:9px 8px;font-size:12px}
+ .pc-filters:not([hidden]),.pc-market-tools:not([hidden]){gap:7px}
+ .pc-dialog input,.pc-dialog select{font-size:12px;padding:11px 9px}
+ .pc-card{padding:16px}.pc-card-actions button{min-height:40px;padding:9px 10px}
+ .pc-dialog .pc-toggle::before{content:'';position:absolute;inset:-9px -3px}
+}
+@media(prefers-reduced-motion:reduce){.pc-dialog button,.pc-toggle::after{transition:none}}

package/public/plugin-center.js

@@ -2,8 +2,8 @@
 'use strict';
 window.DshPluginCenter = (() => {
   let dialog, connection, snapshot, timer, generation = 0, pending = false, tab = 'installed', offset = 0, searchSequence = 0, detailSequence = 0
-  let renderedInstalled = '', renderedJobs = ''
-  const labels = { install: '安装', update: '更新', remove: '卸载', enable: '启用', disable: '停用', queued: '等待执行', running: '执行中', complete: '已完成', failed: '失败' }
+  let renderedInstalled = '', renderedJobs = '', filter = '', statusFilter = 'all', refreshSequence = 0
+  const labels = { install: '安装', update: '更新', remove: '卸载', enable: '启用', disable: '停用', queued: '等待执行', running: '执行中', complete: '已完成', failed: '失败', interrupted: '已中断', active: '运行中', pending: '等待依赖', loading: '加载中', disposed: '未运行', unloading: '卸载中', inactive: '未运行' }
   function node(tag, text, className) {
     const el = document.createElement(tag)
     if (text != null) el.textContent = text
@@ -14,7 +14,7 @@ window.DshPluginCenter = (() => {
     const el = node('button', text)
     el.type = 'button'; el.addEventListener('click', () => {
       const current = generation
-      Promise.resolve().then(action).catch(error => { if (current === generation) message(error.message) })
+      Promise.resolve().then(() => { if (current === generation) return action() }).catch(error => { if (current === generation) message(error.message) })
     })
     return el
   }
@@ -35,37 +35,101 @@ window.DshPluginCenter = (() => {
   }
   function card(name, description) {
     const el = node('article', null, 'pc-card')
-    el.append(node('h3', name), node('p', description))
+    const header = node('div', null, 'pc-card-head')
+    const icon = node('span', (name || 'P').replace(/^@/, '').slice(0, 1).toUpperCase(), 'pc-plugin-icon')
+    icon.setAttribute('aria-hidden', 'true')
+    header.append(icon, node('h3', name)); el.append(header)
+    if (description) el.append(node('p', description, 'pc-description'))
     return el
   }
   function renderInstalled() {
     const list = dialog.querySelector('.pc-list'); list.replaceChildren()
-    if (!snapshot.items.length) list.append(node('p', '暂无可管理插件'))
-    for (const item of snapshot.items) {
-      const el = card(item.name, item.description)
-      el.append(node('p', (item.version || item.requested || '内置') + ' · ' + (item.enabled ? '配置启用' : '配置停用') + (snapshot.pendingRestart ? ' · 待重启' : '')))
+    if (!snapshot) { list.append(node('p', '尚未读取插件状态，请点击刷新。')); return }
+    const rows = snapshot.items.filter(item => tab === 'builtin' ? !item.managed : item.managed)
+      .filter(item => [item.name, item.displayName, item.description].join(' ').toLowerCase().includes(filter.toLowerCase()))
+      .filter(item => statusFilter === 'all' || (statusFilter === 'enabled' ? item.enabled : !item.enabled))
+    if (!rows.length) list.append(node('p', filter || statusFilter !== 'all' ? '没有匹配的插件。' : tab === 'builtin' ? '暂无内置插件。' : '还没有安装其他插件，点击“添加插件”查看详情并安装。', 'pc-empty'))
+    for (const item of rows) {
+      const el = card(item.displayName || item.name, item.description)
+      el.append(node('small', item.name, 'pc-package'))
+      const meta = node('div', null, 'pc-meta')
+      meta.append(node('span', item.version ? 'v' + item.version : item.requested || '内置', 'pc-version'))
+      if (!item.bundle || !item.managed || !snapshot.writable) meta.append(node('span', item.enabled ? '配置启用' : '配置停用', 'pc-badge ' + (item.enabled ? 'is-active' : '')))
+      const runtime = item.runtime || []
+      if (runtime.some(entry => entry.phase === 'failed')) meta.append(node('span', '运行异常', 'pc-badge is-error'))
+      else if (runtime.length) meta.append(node('span', `${runtime.filter(entry => entry.phase === 'active').length}/${runtime.length} 组件运行中`, 'pc-badge'))
+      el.append(meta)
+      const actions = node('div', null, 'pc-card-actions')
+      const detail = button('查看详情', () => installedDetails(item)); detail.className = 'pc-detail-button'
+      actions.append(detail)
       if (item.managed && snapshot.writable) {
-        const actions = node('div', null, 'pc-actions')
         actions.append(button('查看更新', () => showDetails(item.name)))
-        if (item.bundle) actions.append(button(item.enabled ? '停用' : '启用', () => mutate(item.enabled ? 'disable' : 'enable', item.name)))
-        actions.append(button('卸载', () => mutate('remove', item.name)))
-        for (const action of actions.children) action.disabled = pending || snapshot.busy
-        el.append(actions)
-      } else el.append(node('small', '内置、核心或只读插件'))
+        if (item.bundle) {
+          const toggle = button(item.enabled ? '已启用' : '已停用', () => mutate(item.enabled ? 'disable' : 'enable', item.name))
+          toggle.className = 'pc-toggle'; toggle.disabled = pending || snapshot.busy
+          toggle.setAttribute('role', 'switch'); toggle.setAttribute('aria-checked', String(item.enabled)); toggle.setAttribute('aria-label', '启用 ' + item.name)
+          toggle.setAttribute('title', item.enabled ? '配置已启用' : '配置已停用')
+          el.querySelector('.pc-card-head').append(toggle)
+        }
+        const remove = button('卸载', () => mutate('remove', item.name)); remove.className = 'pc-danger-button'; actions.append(remove)
+        for (const action of actions.children) if (action !== detail) action.disabled = pending || snapshot.busy
+      } else actions.append(node('small', '主机维护 · 只读'))
+      el.append(actions)
       list.append(el)
     }
-    const runtime = node('details')
+    const runtime = node('details', null, 'pc-runtime')
     runtime.append(node('summary', '当前进程实际加载状态 (' + snapshot.runtime.length + ')'))
     if (!snapshot.runtimeAvailable) runtime.append(node('p', '此 DSH 版本未提供加载状态'))
     for (const entry of snapshot.runtime) runtime.append(node('p', entry.name + ' · ' + entry.phase + (entry.enabled ? '' : ' · disabled')))
     list.append(runtime)
   }
+  function installedDetails(item) {
+    detailSequence++
+    const area = dialog.querySelector('.pc-detail')
+    const el = card(item.displayName || item.name, item.description)
+    el.append(node('p', item.name + ' · ' + (item.version || item.requested || '内置')), node('p', '配置：' + (item.enabled ? '启用' : '停用')))
+    const entries = item.runtime || []
+    el.append(node('h4', '组件运行状态'))
+    if (!entries.length) el.append(node('p', '未获得该包的组件归属。可在下方查看当前进程全部加载状态。'))
+    for (const entry of entries) el.append(node('p', entry.name + ' · ' + (labels[entry.phase] || entry.phase)))
+    if (!item.managed) el.append(node('p', '随 DSH 提供的核心插件由主机维护。'))
+    el.append(button('返回插件列表', () => area.replaceChildren()))
+    area.replaceChildren(el); area.scrollIntoView({ block: 'nearest' })
+  }
+  function renderTabs() {
+    for (const button of dialog.querySelectorAll('[data-pc-tab]')) {
+      button.classList.toggle('active', button.dataset.pcTab === tab)
+      button.setAttribute('aria-pressed', String(button.dataset.pcTab === tab))
+    }
+  }
   async function refresh() {
-    snapshot = await api('/state')
+    const sequence = ++refreshSequence
+    let data
+    try { data = await api('/state') } catch (error) { if (sequence === refreshSequence) throw error; return }
+    if (sequence !== refreshSequence) return
+    snapshot = data
+    const recovery = dialog.querySelector('.pc-recovery'); recovery.replaceChildren()
+    if (snapshot.recovery) {
+      recovery.append(node('p', snapshot.recovery.reason))
+      const action = button('恢复旧任务', () => {
+        const body = { id: snapshot.recovery.id, revision: snapshot.revision, confirmNoRunningProcess: true }
+        const review = card('解除旧任务锁', '请先在主机确认没有正在运行的插件安装或卸载进程。此操作保留文件和备份，不执行回滚。')
+        review.append(button('已确认，解除锁定', () => executeMutation(body, '/recover')), button('取消', () => dialog.querySelector('.pc-detail').replaceChildren()))
+        dialog.querySelector('.pc-detail').replaceChildren(review)
+      })
+      action.disabled = !snapshot.writable || pending; recovery.append(action)
+    }
     dialog.querySelector('.pc-profile').textContent = snapshot.profile ? '当前环境：' + snapshot.profile : '当前环境无法识别'
     dialog.querySelector('.pc-status').textContent = snapshot.reason || (snapshot.pendingRestart ? '插件配置已变更，重启 DSH 后生效。' : '安装到当前连接的 DSH 主机。')
-    const installedKey = JSON.stringify([snapshot.items, snapshot.runtime, snapshot.pendingRestart, snapshot.busy, snapshot.writable, pending])
-    if (tab === 'installed' && installedKey !== renderedInstalled) { renderInstalled(); renderedInstalled = installedKey }
+    dialog.querySelector('.pc-status').hidden = !snapshot.reason && !snapshot.pendingRestart
+    const summary = dialog.querySelector('.pc-summary'); summary.replaceChildren()
+    for (const [count, title] of [[snapshot.items.filter(item => item.managed).length, '已安装'], [snapshot.items.filter(item => item.managed && item.enabled).length, '配置启用']]) {
+      const stat = node('span', null, 'pc-stat'); stat.append(node('strong', String(count)), node('span', title)); summary.append(stat)
+    }
+    if (snapshot.busy) summary.append(node('span', '任务执行中', 'pc-badge'))
+    const installedKey = JSON.stringify([snapshot.items, snapshot.runtime, snapshot.pendingRestart, snapshot.busy, snapshot.writable, pending, tab, filter, statusFilter])
+    if (tab !== 'market' && installedKey !== renderedInstalled) { renderInstalled(); renderedInstalled = installedKey }
+    renderTabs()
     const jobsKey = JSON.stringify(snapshot.operations)
     if (jobsKey === renderedJobs) return
     renderedJobs = jobsKey
@@ -88,11 +152,14 @@ window.DshPluginCenter = (() => {
     const list = dialog.querySelector('.pc-list'); list.replaceChildren(node('p', '正在查询 npm 插件目录…'))
     const data = await api('/market?q=' + encodeURIComponent(q) + '&offset=' + offset)
     if (tab !== 'market' || sequence !== searchSequence) return
-    list.replaceChildren(node('p', '来源：npm · 安装前校验 DSH bundle。目录收录不代表安全或兼容性审核。'))
+    list.replaceChildren(node('p', '来源：npm · 安装前校验 DSH bundle。目录收录不代表安全或兼容性审核。', 'pc-market-note'))
     if (!data.items.length) list.append(node('p', '没有找到插件；也可直接输入完整 npm 包名后查看详情。'))
     for (const item of data.items) {
       const el = card(item.name, item.description)
-      el.append(node('small', item.version), button('查看详情', () => showDetails(item.name)))
+      const meta = node('div', null, 'pc-meta'); meta.append(node('span', item.version ? 'v' + item.version : '版本未声明', 'pc-version'))
+      const actions = node('div', null, 'pc-card-actions')
+      const detail = button('查看详情', () => showDetails(item.name)); detail.className = 'pc-detail-button'; actions.append(detail)
+      el.append(meta, actions)
       list.append(el)
     }
     if (offset > 0) list.append(button('上一页', () => { offset -= 20; return search() }))
@@ -127,55 +194,97 @@ window.DshPluginCenter = (() => {
     const area = dialog.querySelector('.pc-detail')
     const review = card('确认' + labels[action], name + (version ? '@' + version : ''))
     review.append(node('p', '目标环境：' + snapshot.profile + '。配置修改后需要重启 DSH；不会自动重启。'))
-    review.append(button('确认' + labels[action], () => executeMutation(body)), button('取消', () => area.replaceChildren()))
+    const confirm = button('确认' + labels[action], () => executeMutation(body)); confirm.className = action === 'remove' ? 'pc-danger-confirm' : 'pc-primary'
+    review.append(confirm, button('取消', () => area.replaceChildren()))
     area.replaceChildren(review); area.scrollIntoView({ block: 'nearest' })
   }
-  async function executeMutation(body) {
+  async function executeMutation(body, endpoint = '/operations') {
     if (pending) return
     const current = generation
     pending = true
     try {
       message('正在提交…')
-      await api('/operations', body)
+      await api(endpoint, body)
       message('已受理，可在操作记录查看结果。')
       dialog.querySelector('.pc-detail').replaceChildren()
     } catch (error) {
       if (current !== generation) return
       message(error.message + '；请先查看操作记录，避免重复提交。')
-      const retry = button('重试同一请求', () => executeMutation(body))
+      const retry = button('重试同一请求', () => executeMutation(body, endpoint))
       dialog.querySelector('.pc-detail').replaceChildren(retry)
     } finally { if (current === generation) { pending = false; await refresh() } }
   }
-  async function open(config) {
+  function close() {
+    generation++; searchSequence++; detailSequence++; clearTimeout(timer)
+    if (!dialog) return
+    if (dialog.tagName === 'DIALOG') dialog.close()
+    else { dialog.open = false; dialog.remove() }
+    dialog = null
+  }
+  async function open(config, target) {
+    close()
     if (!dialog) {
-      dialog = node('dialog', null, 'pc-dialog')
-      const heading = node('div', null, 'pc-heading'); heading.append(node('h2', '插件中心'), button('关闭', () => dialog.close()))
-      const toolbar = node('div', null, 'pc-actions')
-      toolbar.append(button('已安装', () => { tab = 'installed'; renderedInstalled = ''; dialog.querySelector('.pc-market-tools').hidden = true; return refresh() }), button('发现插件', () => { tab = 'market'; offset = 0; dialog.querySelector('.pc-market-tools').hidden = false; return search() }), button('刷新状态', refresh))
+      dialog = node(target ? 'div' : 'dialog', null, 'pc-dialog' + (target ? ' pc-page' : ''))
+      const heading = node('div', null, 'pc-heading')
+      const title = node('div', null, 'pc-title'); title.append(node('h2', '插件管理'), node('p', '管理当前主机的插件与扩展', 'pc-intro')); heading.append(title)
+      if (!target) heading.append(button('关闭', close))
+      const controls = node('div', null, 'pc-controls')
+      const toolbar = node('div', null, 'pc-tabs')
+      for (const [value, title] of [['installed', '已安装'], ['market', '添加插件'], ['builtin', '内置插件']]) {
+        const control = button(title, () => {
+          tab = value; detailSequence++; renderedInstalled = ''; dialog.querySelector('.pc-detail').replaceChildren()
+          renderTabs(); message('')
+          dialog.querySelector('.pc-market-tools').hidden = value !== 'market'; dialog.querySelector('.pc-filters').hidden = value === 'market'
+          if (value === 'market') { offset = 0; return search() }
+          return refresh()
+        })
+        control.dataset.pcTab = value; toolbar.append(control)
+      }
+      const refreshButton = button('刷新', () => tab === 'market' ? search() : refresh()); refreshButton.className = 'pc-refresh'
+      const toolbarRow = node('div', null, 'pc-toolbar'); toolbarRow.append(toolbar, refreshButton)
+      const filters = node('div', null, 'pc-filters')
+      const query = node('input'); query.placeholder = '筛选已安装插件'; query.setAttribute('aria-label', '筛选已安装插件')
+      query.addEventListener('input', () => { filter = query.value.trim(); renderInstalled() })
+      const select = node('select'); select.setAttribute('aria-label', '按配置状态筛选')
+      for (const [value, title] of [['all', '全部状态'], ['enabled', '配置启用'], ['disabled', '配置停用']]) { const option = node('option', title); option.value = value; select.append(option) }
+      select.addEventListener('change', () => { statusFilter = select.value; renderInstalled() })
+      filters.append(query, select)
       const market = node('form', null, 'pc-market-tools'); market.hidden = true
       const input = node('input', null, 'pc-search'); input.placeholder = '搜索插件或输入完整 npm 包名'; input.maxLength = 80; input.setAttribute('aria-label', '搜索插件或 npm 包名')
       market.append(input, button('搜索', () => { offset = 0; return search() }), button('按包名查看', () => showDetails(input.value.trim())))
-      market.addEventListener('submit', event => { event.preventDefault(); offset = 0; search().catch(error => message(error.message)) })
-      const jobs = node('details'); jobs.append(node('summary', '操作记录'), node('div', null, 'pc-jobs'))
+      market.addEventListener('submit', event => {
+        event.preventDefault(); offset = 0
+        const current = generation
+        search().catch(error => { if (current === generation) message(error.message) })
+      })
+      const jobs = node('details', null, 'pc-history'); jobs.append(node('summary', '操作记录'), node('div', null, 'pc-jobs'))
       const alert = node('p', null, 'pc-message'); alert.setAttribute('role', 'status')
-      dialog.append(heading, node('p', null, 'pc-profile'), node('p', null, 'pc-status'), toolbar, market, alert, node('div', null, 'pc-detail'), node('div', null, 'pc-list'), jobs)
-      dialog.addEventListener('close', () => { generation++; clearTimeout(timer) })
-      document.body.append(dialog)
+      const context = node('div', null, 'pc-context'); context.append(node('p', null, 'pc-profile'), node('div', null, 'pc-summary'))
+      controls.append(toolbarRow, filters, market)
+      dialog.append(heading, context, node('p', null, 'pc-status'), controls, alert, node('div', null, 'pc-recovery'), node('div', null, 'pc-detail'), node('div', null, 'pc-list'), jobs)
+      const surface = dialog
+      dialog.addEventListener('close', () => {
+        if (dialog !== surface) return
+        generation++; clearTimeout(timer); dialog = null; surface.remove()
+      })
+      ;(target || document.body).append(dialog)
     }
-    generation++; searchSequence++; detailSequence++; connection = config; tab = 'installed'; pending = false; snapshot = null
+    generation++; searchSequence++; detailSequence++; connection = config; tab = 'installed'; pending = false; snapshot = null; filter = ''; statusFilter = 'all'
     const current = generation
     renderedInstalled = ''; renderedJobs = ''
     dialog.querySelector('.pc-market-tools').hidden = true
     dialog.querySelector('.pc-detail').replaceChildren(); dialog.querySelector('.pc-list').replaceChildren(); dialog.querySelector('.pc-jobs').replaceChildren()
-    dialog.showModal(); message('正在读取插件状态…')
+    if (target) dialog.open = true
+    else dialog.showModal()
+    message('正在读取插件状态…')
     try { await refresh(); message('') } catch (error) { if (current === generation) message(error.message) }
     if (current !== generation) return
     async function poll() {
-      if (!dialog.open || current !== generation) return
+      if (current !== generation || !dialog?.open) return
       try { await refresh() } catch (error) { if (current === generation) message(error.message) }
-      if (dialog.open && current === generation) timer = setTimeout(poll, 4000)
+      if (current === generation && dialog?.open) timer = setTimeout(poll, 4000)
     }
     timer = setTimeout(poll, 4000)
   }
-  return { open }
+  return { open, mount: (config, target) => open(config, target), close }
 })()