@mokuyoaxis/dsh-iris 0.2.7 → 0.3.0-beta.1

package/lib/web/plugin-panel.js

@@ -0,0 +1,223 @@
+const $ = selector => document.querySelector(selector);
+const node = (tag, text, className) => { const item = document.createElement(tag); if (text) item.textContent = text; if (className) item.className = className; return item; };
+const freeze = value => { if (value && typeof value === 'object') { Object.values(value).forEach(freeze); Object.freeze(value); } return value; };
+const ARTIFACT = /^artifact_[a-f0-9]{24}$/, RUN = /^run_[a-f0-9]{24}$/;
+const MEDIA = { 'image/png': 'content', 'image/jpeg': 'content', 'image/webp': 'content',
+  'audio/wav': 'audio', 'audio/mpeg': 'audio', 'audio/ogg': 'audio', 'audio/flac': 'audio', 'text/plain': 'text',
+  'video/mp4': 'video', 'video/webm': 'video' };
+
+/** Trusted same-origin modules. Shadow DOM isolates styles, not permissions or JavaScript. */
+export function createPluginPanel({ navigate, describe, onProvidersSaved }) {
+  let client, session, manifest, page = '', artifacts = [], currentArtifact, active = new Map();
+  const themeListeners = new Set();
+  const themeValue = () => Object.freeze({ mode: document.documentElement.dataset.theme || 'light',
+    density: document.documentElement.dataset.density || 'comfortable', accent: 'iris' });
+  const themeObserver = new MutationObserver(() => {
+    for (const listener of themeListeners) listener(themeValue());
+  });
+  function report(item, stage, error, target = $('#plugin-feedback')) {
+    const message = item.id + ' · ' + stage + ' · ' + describe(error);
+    target.textContent = message; target.hidden = false; target.classList.add('error');
+    target.dataset.code = 'IRIS_PLUGIN_WEB_' + stage.toUpperCase();
+  }
+  function stop(slot) { const previous = active.get(slot); active.delete(slot); previous?.(); }
+  function stopAll() { for (const slot of [...active.keys()]) stop(slot); }
+  function mount(slot, item, extra = {}) {
+    stop(slot); slot.replaceChildren();
+    const lifetime = new AbortController(), signal = lifetime.signal, http = client;
+    const host = node('div', '', 'plugin-surface'); host.dataset.pluginContribution = item.id;
+    const status = node('p', '正在加载…', 'field-note'); status.setAttribute('role', 'status');
+    slot.append(host, status);
+    const shadow = host.attachShadow({ mode: 'open' }), container = node('div', '', 'plugin-content');
+    const unsubscriptions = new Set();
+    let cleanup, settled = false, released = false;
+    async function release() {
+      if (released || !settled) return; released = true;
+      try { await cleanup?.(); } catch (error) { report(item, 'cleanup', error); }
+    }
+    function close() {
+      signal.aborted || lifetime.abort();
+      for (const unsubscribe of unsubscriptions) unsubscribe();
+      host.remove(); status.remove(); void release();
+    }
+    active.set(slot, close);
+    function live() { signal.throwIfAborted(); if (http !== client) throw new DOMException('登录上下文已关闭', 'AbortError'); }
+    function options(value = {}) { live(); return { ...value, signal: AbortSignal.any([signal, ...(value.signal ? [value.signal] : [])]) }; }
+    const read = (path, value) => http.get(path, options(value));
+    const api = Object.freeze({
+      ...(session.pluginExecution ? { pluginOperations: Object.freeze({
+        catalog: (query = {}, value) => read('/api/v0/plugin-operations/catalog?' + new URLSearchParams(query), value),
+        history: value => read('/api/v0/plugin-operations', value),
+        execute: (request, value) => http.callPlugin(request, options(value)),
+        inspect: (id, value) => http.getOperation(id, options(value)),
+        lookup: (key, value) => http.lookupOperation(key, options(value)),
+        stop: (id, value) => http.stopOperation(id, options(value))
+      }) } : {}),
+      runs: (query = {}, value) => read('/api/v0/runs?' + new URLSearchParams(query), value),
+      run: (id, value) => { if (typeof id !== 'string' || !RUN.test(id)) throw new TypeError('流程 ID 无效'); return read('/api/v0/runs/' + id, value); },
+      models: value => read('/api/v0/models', value),
+      audioModels: value => read('/api/v0/audio-models', value),
+      videoModels: value => read('/api/v0/video-models', value),
+      artifact: (artifact, value) => {
+        if (typeof artifact?.id !== 'string' || !ARTIFACT.test(artifact.id) || !Object.hasOwn(MEDIA, artifact?.mediaType)) throw new TypeError('作品 ID 或媒体类型无效');
+        return read('/api/v0/artifacts/' + artifact.id + '/' + MEDIA[artifact.mediaType], { ...value, binary: true });
+      },
+      ...(session.providerManagement && item.dependency.kind === 'settings' ? { providers: Object.freeze({
+        read: value => read('/api/v0/provider-management/settings', value),
+        async save(input, value) {
+          const result = await http.postProvider('save', input, options(value));
+          live(); onProvidersSaved?.(result); return result;
+        }
+      }) } : {})
+    });
+    const theme = Object.freeze({ current: themeValue,
+      subscribe(listener) {
+        live();
+        if (typeof listener !== 'function') throw new TypeError('主题监听须为函数');
+        const subscription = value => { try { listener(value); } catch (error) { report(item, 'theme', error); } };
+        const off = () => { themeListeners.delete(subscription); unsubscriptions.delete(off); };
+        themeListeners.add(subscription); unsubscriptions.add(off); return off;
+      }
+    });
+    const context = Object.freeze({ container, signal, dependency: item.dependency, api, session, theme, ...extra });
+    let stage = 'styles';
+    void (async () => {
+      try {
+        await Promise.all(['/plugin-surface.css', ...item.styles].map(href => new Promise((resolve, reject) => {
+          const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href;
+          const abort = () => reject(signal.reason);
+          link.addEventListener('load', () => { signal.removeEventListener('abort', abort); resolve(); }, { once: true });
+          link.addEventListener('error', () => { signal.removeEventListener('abort', abort); reject(new Error('样式资源加载失败')); }, { once: true });
+          signal.addEventListener('abort', abort, { once: true }); shadow.append(link);
+        })));
+        live(); stage = 'module';
+        const module = await import(item.entry);
+        live(); if (typeof module.mount !== 'function') throw new Error('入口须导出 mount(context)');
+        shadow.append(container); stage = 'mount';
+        cleanup = await module.mount(context);
+        if (cleanup !== undefined && typeof cleanup !== 'function') { cleanup = undefined; throw new Error('mount 只能返回释放函数或 undefined'); }
+        if (!signal.aborted) status.hidden = true;
+      } catch (error) {
+        if (!signal.aborted) {
+          // A failed mount has no live API/listeners; keep its diagnostic outside its removed host.
+          lifetime.abort(); for (const unsubscribe of unsubscriptions) unsubscribe(); host.remove();
+          report(item, stage, error, status);
+        }
+      } finally { settled = true; if (signal.aborted) await release(); }
+    })();
+  }
+  function renderPage() {
+    const item = manifest?.pages.find(value => 'plugin:' + value.id === page);
+    $('#plugin-page-panel').hidden = !item;
+    $('#plugin-settings-panel').hidden = page !== 'plugin-settings';
+    $('#plugin-history-panel').hidden = page !== 'plugin-history';
+    for (const button of $('#plugin-navigation').querySelectorAll('button')) button.setAttribute('aria-current', button.dataset.page === page ? 'page' : 'false');
+    if (item) {
+      $('#plugin-page-title').textContent = item.title;
+      $('#plugin-page-identity').textContent = item.dependency.pluginId + ' · v' + item.dependency.pluginVersion;
+      mount($('#plugin-page-slot'), item);
+    }
+    if (page === 'plugin-settings') {
+      for (const details of $('#plugin-settings-list').children) if (details.open) mount(details.querySelector('.plugin-slot'), manifest.settings.find(value => value.id === details.dataset.contribution));
+    }
+    if (page === 'plugin-history') showHistory();
+  }
+  function showHistory() {
+    const slot = $('#plugin-history-list'); stop(slot); slot.replaceChildren();
+    const controller = new AbortController(), signal = controller.signal, http = client, urls = new Set();
+    active.set(slot, () => { controller.abort(); for (const url of urls) URL.revokeObjectURL(url); });
+    $('#plugin-history-feedback').textContent = '正在读取保存的业务记录…';
+    void http.get('/api/v0/plugin-operations', { signal }).then(value => {
+      if (signal.aborted || http !== client) return;
+      $('#plugin-history-feedback').textContent = value.operations.length ? '显示最近业务；缺少插件仍可读取原记录。' : '尚无保存的业务记录。';
+      for (const operation of value.operations) {
+        const article = node('article', '', 'card plugin-history-item'), title = node('h2', operation.operationId);
+        const identity = node('p', operation.dependency.pluginId + ' · v' + operation.dependency.pluginVersion, 'field-note');
+        const status = node('p', operation.state + ' · ' + operation.id, 'field-note'); article.dataset.operationId = operation.id;
+        article.append(title, identity, status);
+        for (const id of operation.result?.artifactIds || []) {
+          const preview = node('button', '查看原作品', 'secondary'); preview.type = 'button';
+          preview.addEventListener('click', async () => {
+            preview.disabled = true;
+            try {
+              const blob = await http.get('/api/v0/artifacts/' + id + '/content', { signal, binary: true });
+              if (signal.aborted || http !== client) return;
+              const extension = { 'image/png': 'png', 'image/jpeg': 'jpg', 'image/webp': 'webp' }[blob.type];
+              if (!extension) throw new Error('此业务作品不是支持的图片类型');
+              const url = URL.createObjectURL(blob); urls.add(url); const image = node('img'); image.src = url; image.alt = '此业务保存的原始作品';
+              const link = node('a', '下载原图'); link.href = url; link.download = 'iris-' + id + '.' + extension; article.append(image, link); preview.hidden = true;
+            } catch (error) { if (!signal.aborted) { status.textContent = describe(error); preview.disabled = false; } }
+          }); article.append(preview);
+        }
+        slot.append(article);
+      }
+    }).catch(error => { if (!signal.aborted) $('#plugin-history-feedback').textContent = describe(error); });
+  }
+  $('#plugin-history-refresh').addEventListener('click', () => { if (client && page === 'plugin-history') showHistory(); });
+  function renderPreview() {
+    stop($('#plugin-preview-slot')); $('#plugin-preview-slot').replaceChildren();
+    const id = $('#plugin-renderer').value, item = manifest?.renderers.find(value => value.id === id && value.mediaTypes.includes(currentArtifact?.mediaType));
+    if (page === 'studio' && $('#plugin-preview').open && item) mount($('#plugin-preview-slot'), item, { artifact: currentArtifact });
+  }
+  function selectArtifact() {
+    stop($('#plugin-preview-slot'));
+    currentArtifact = artifacts.find(value => value.id === $('#plugin-artifact').value);
+    $('#plugin-renderer').replaceChildren(new Option('默认预览', ''), ...(manifest?.renderers || [])
+      .filter(item => item.mediaTypes.includes(currentArtifact?.mediaType)).map(item => new Option(item.title, item.id)));
+    renderPreview();
+  }
+  $('#plugin-renderer').addEventListener('change', renderPreview);
+  $('#plugin-artifact').addEventListener('change', selectArtifact);
+  $('#plugin-preview').addEventListener('toggle', renderPreview);
+  return Object.freeze({
+    connect(http, facts) {
+      client = http;
+      session = freeze({ contractVersion: facts.contractVersion, instanceId: facts.instanceId, rootId: facts.rootId,
+        operations: [...facts.operations], readOnly: facts.readOnly, audio: facts.audio === true, video: facts.video === true, providerManagement: facts.providerManagement === true,
+        pluginExecution: facts.pluginExecution === true, pluginOperations: structuredClone(facts.pluginOperations || []) });
+      manifest = freeze(structuredClone(facts.panelContributions || { contractVersion: 0, pages: [], settings: [], renderers: [] }));
+      themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme', 'data-density', 'data-accent'] });
+      const nav = $('#plugin-navigation'); nav.replaceChildren(); nav.hidden = !manifest.pages.length && !manifest.settings.length && !session.pluginExecution;
+      for (const item of [...manifest.pages, ...(manifest.settings.length ? [{ id: '', title: '扩展设置' }] : []), ...(session.pluginExecution ? [{ id: 'history', title: '业务记录' }] : [])]) {
+        const button = node('button', item.title, 'nav-item'); button.type = 'button';
+        button.dataset.page = item.id === 'history' ? 'plugin-history' : item.id ? 'plugin:' + item.id : 'plugin-settings';
+        button.addEventListener('click', () => navigate(button.dataset.page)); nav.append(button);
+      }
+      $('#plugin-settings-list').replaceChildren(...manifest.settings.map(item => {
+        const details = node('details', '', 'card plugin-settings-card'); details.dataset.contribution = item.id;
+        const summary = node('summary'), label = node('span', item.title), disclosure = node('span', '展开', 'disclosure');
+        summary.append(label, disclosure);
+        const identity = node('p', item.dependency.pluginId + ' · v' + item.dependency.pluginVersion, 'field-note');
+        const slot = node('div', '', 'plugin-slot'); details.append(summary, identity, slot);
+        details.addEventListener('toggle', () => {
+          disclosure.textContent = details.open ? '收起' : '展开';
+          if (details.isConnected && details.open && page === 'plugin-settings' && client && manifest.settings.includes(item)) mount(slot, item); else stop(slot);
+        }); return details;
+      }));
+    },
+    show(next) {
+      if (page === next) return;
+      $('#plugin-feedback').hidden = true; stopAll(); page = next;
+      if (client) { renderPage(); renderPreview(); }
+      else { $('#plugin-page-panel').hidden = true; $('#plugin-settings-panel').hidden = true; $('#plugin-history-panel').hidden = true; }
+    },
+    previewArtifacts(values, preferredId) {
+      artifacts = values.filter(value => value && manifest?.renderers.some(item => item.mediaTypes.includes(value.mediaType))).map(value => freeze({ ...value }));
+      const selected = artifacts.find(value => value.id === preferredId) || artifacts[0];
+      $('#plugin-preview').hidden = !artifacts.length; $('#plugin-preview').open = false;
+      $('#plugin-artifact').replaceChildren(...artifacts.map(value => new Option(value.label, value.id)));
+      if (selected) $('#plugin-artifact').value = selected.id;
+      selectArtifact();
+    },
+    clearPreview() { stop($('#plugin-preview-slot')); artifacts = []; currentArtifact = null; $('#plugin-preview').hidden = true; $('#plugin-preview').open = false; $('#plugin-preview-slot').replaceChildren(); },
+    disconnect() {
+      $('#plugin-feedback').hidden = true;
+      stopAll(); themeObserver.disconnect(); themeListeners.clear(); client = session = manifest = null; page = '';
+      $('#plugin-navigation').replaceChildren(); $('#plugin-navigation').hidden = true;
+      $('#plugin-page-panel').hidden = $('#plugin-settings-panel').hidden = $('#plugin-history-panel').hidden = true;
+      $('#plugin-history-list').replaceChildren();
+      $('#plugin-page-slot').replaceChildren(); $('#plugin-settings-list').replaceChildren();
+      artifacts = []; currentArtifact = null; $('#plugin-preview').hidden = true; $('#plugin-preview').open = false;
+    }
+  });
+}

package/lib/web/plugin-status.js

@@ -0,0 +1,140 @@
+// Read-only presentation of Core declarations and exact saved grants. Never grants or calls a business.
+const $ = selector => document.querySelector(selector);
+const kinds = { providers: '模型协议', operations: '业务操作', pages: '页面', settings: '设置表单', renderers: '作品预览' };
+const lifecycle = { active: '已加载', loading: '加载中', closing: '正在关闭', closed: '已关闭' };
+const sameDependency = (a, b) => ['contractVersion', 'pluginId', 'pluginVersion', 'kind', 'contributionId', 'contributionVersion'].every(key => a[key] === b[key]);
+const node = (tag, text = '', className = '') => {
+  const value = document.createElement(tag); value.textContent = text; value.className = className; return value;
+};
+const reason = (code, label, hint) => ({ code, label, hint });
+
+function authorization(record, pin, entry, state) {
+  if (record.revokedAt || record.state === 'revoked') return reason('revoked', '已撤销', '此连接不能发起新调用。');
+  if (!entry) return reason('missing', '业务未加载', '在启动选择中恢复原插件和准确业务版本；历史记录仍保留。');
+  if (!sameDependency(pin, entry.dependency)) return reason('version', '版本不一致', '当前加载版本与原授权不同，请核对准确依赖；不会自动替换授权。');
+  if (state !== 'active') return reason('closed', '插件不可用', '插件注册实例正在关闭或已关闭。');
+  if (entry.access.mcp !== 'requires-selection') return reason('disabled', '服务未启用', '在启动选择文件的 operations 中明确选择此业务，再正常重启服务。');
+  if (!record.scopes.includes('execute')) return reason('scope', '缺少执行权限', '在客户端连接设置中明确允许执行。');
+  if (!record.tools.includes('iris_core_plugin_call')) return reason('tool', '未选择调用工具', '在客户端连接设置中选择 plugin_call 工具。');
+  return reason('permitted', '授权允许执行', '配置满足调用条件；业务未实测。客户端还需连接并协商所需权限。');
+}
+
+/** Diagnostic projection only. Core remains the authority for every real invocation. */
+export function projectPluginStatus(catalog, records) {
+  if (catalog.contractVersion !== 0 || !catalog.contributions || !Array.isArray(catalog.plugins)) throw new TypeError('不支持的插件目录版本');
+  const entries = Object.entries(catalog.contributions).flatMap(([kind, items]) => items.map(item => ({ ...item, kind })));
+  const authorizations = records === null ? null : records.flatMap(record => (record.pluginOperations || []).map(pin => {
+    const entry = entries.find(item => item.kind === 'operations' && item.id === pin.contributionId);
+    return { connectionId: record.connectionId, connectionLabel: record.label, pin, ...authorization(record, pin, entry, catalog.state),
+      instances: (record.instances || []).map(instance => ({ runtimeInstanceId: instance.runtimeInstanceId,
+        ...(instance.state !== 'connected' ? reason('disconnected', '握手已断开', '不是当前可用实例。')
+          : !(instance.pluginOperations || []).some(value => sameDependency(value, pin)) ? reason('unselected', '握手未选择此业务', '实例范围小于保存的授权。')
+            : authorization(instance, pin, entry, catalog.state)) })) };
+  }));
+  return { state: catalog.state, coreVersion: catalog.coreVersion, authorizations,
+    enabled: entries.filter(item => item.kind === 'operations' && item.access.web === 'via-operation').length,
+    plugins: catalog.plugins.map(plugin => ({ ...plugin, state: catalog.state,
+      contributions: entries.filter(item => item.dependency.pluginId === plugin.id) })),
+    missing: (authorizations || []).filter(item => !entries.some(entry => entry.kind === 'operations' && entry.id === item.pin.contributionId)) };
+}
+
+function contributionStatus(entry) {
+  if (entry.access.local === 'unavailable') return '当前不可用';
+  if (entry.kind === 'providers') return '协议已加载 · 模型服务另行配置与实测';
+  if (entry.kind === 'operations') return entry.access.mcp === 'requires-selection' ? '服务已启用 · 客户端需单独授权' : '服务未启用';
+  return entry.access.web === 'available-in-panel' ? '已选入工作台' : '未选入工作台';
+}
+
+export function createPluginStatusPanel({ describe, navigate }) {
+  let client, session, visible = false, ticket = 0, controller;
+  function cancel() { ticket++; controller?.abort(); controller = null; $('#plugins-refresh').disabled = false; $('#plugins-list').setAttribute('aria-busy', 'false'); }
+  function clear() {
+    for (const id of ['plugins-list', 'plugins-missing', 'plugins-stats']) $('#' + id).replaceChildren();
+    for (const id of ['plugins-feedback', 'plugins-authorizations-note', 'plugins-updated']) { $('#' + id).textContent = ''; $('#' + id).hidden = true; }
+    $('#plugins-empty').hidden = true; $('#plugins-missing-section').hidden = true;
+  }
+  function feedback(text, error = false) { const target = $('#plugins-feedback'); target.textContent = text; target.hidden = !text; target.classList.toggle('error', error); }
+  function renderGrant(value) {
+    const item = node('li', '', 'plugin-grant'); item.dataset.status = value.code;
+    const heading = node('div', '', 'plugin-grant-heading'); heading.append(node('strong', value.connectionLabel));
+    item.append(heading, node('span', value.code === 'permitted' ? '授权允许执行 · 未实测' : value.label, 'plugin-state'));
+    item.append(node('p', value.hint, 'field-note'));
+    const pin = value.pin;
+    item.append(node('p', pin.pluginId + '@' + pin.pluginVersion + ' · ' + pin.contributionId + '@' + pin.contributionVersion, 'plugin-identity'));
+    if (value.instances.length) {
+      const facts = node('ul', '', 'plugin-instances');
+      for (const instance of value.instances) facts.append(node('li', instance.label + (instance.code === 'permitted' ? ' · 未实测' : '')));
+      item.append(facts, node('p', value.instances.length + ' 个握手实例记录，不代表客户端持续在线。', 'field-note'));
+    } else item.append(node('p', '当前无握手实例记录，不表示客户端安装失败。', 'field-note'));
+    return item;
+  }
+  const grantRows = values => values.map(renderGrant);
+  function render(value) {
+    const grants = value.authorizations;
+    const open = new Set([...document.querySelectorAll('.plugin-status-card[open]')].map(card => card.dataset.pluginId));
+    const stats = [['已加载插件', value.plugins.filter(plugin => plugin.state === 'active').length], ['已启用业务', value.enabled], ['业务授权', grants === null ? '未知' : grants.filter(item => item.code !== 'revoked').length]];
+    $('#plugins-stats').replaceChildren(...stats.map(([label, count]) => { const row = node('div'); row.append(node('dt', label), node('dd', String(count))); return row; }));
+    $('#plugins-empty').hidden = value.plugins.length !== 0;
+    $('#plugins-list').replaceChildren(...value.plugins.map(plugin => {
+      const card = node('details', '', 'card plugin-status-card'); card.dataset.pluginId = plugin.id;
+      card.open = open.has(plugin.id);
+      const summary = node('summary'), mark = node('span', '◇', 'plugin-status-mark'); mark.setAttribute('aria-hidden', 'true');
+      const title = node('span', '', 'plugin-status-title'); title.append(node('strong', plugin.id), node('small', 'v' + plugin.version + ' · ' + plugin.contributions.length + ' 项贡献'));
+      const disclosure = node('span', card.open ? '收起' : '展开', 'disclosure');
+      summary.append(mark, title, node('span', lifecycle[plugin.state], 'plugin-state'), disclosure); card.append(summary);
+      card.addEventListener('toggle', () => { disclosure.textContent = card.open ? '收起' : '展开'; });
+      const body = node('div', '', 'plugin-status-body'), compatibility = plugin.compatibility;
+      body.append(node('p', 'Core 兼容范围：' + compatibility.min + ' ≤ 版本 < ' + compatibility.maxExclusive, 'plugin-identity'),
+        node('p', (value.coreVersion ? '装配时 Core ' + value.coreVersion + '，' : '') + '版本已通过加载校验。' + (plugin.state === 'active' ? '加载不代表媒体实测。' : '当前注册实例' + lifecycle[plugin.state] + '。'), 'field-note'));
+      const contributions = node('ul', '', 'plugin-contribution-status');
+      for (const entry of plugin.contributions) {
+        const row = node('li'); row.dataset.contributionId = entry.id;
+        row.append(node('small', kinds[entry.kind], 'plugin-kind'), node('strong', entry.title), node('p', contributionStatus(entry), 'field-note'), node('p', entry.id + '@' + entry.version, 'plugin-identity'));
+        contributions.append(row);
+      }
+      body.append(contributions);
+      const own = grants?.filter(item => item.pin.pluginId === plugin.id);
+      body.append(node('h3', '客户端授权'));
+      if (own?.length) { const list = node('ul', '', 'plugin-grants'); list.append(...grantRows(own)); body.append(list); }
+      else body.append(node('p', grants ? '尚无客户端选择此插件业务。' : '授权信息尚未读取，不能判断客户端选择。', 'field-note'));
+      card.append(body); return card;
+    }));
+    const missing = grants?.filter(item => value.missing.some(value => value.connectionId === item.connectionId && sameDependency(value.pin, item.pin))) || [];
+    $('#plugins-missing-section').hidden = !missing.length;
+    $('#plugins-missing').replaceChildren(...grantRows(missing));
+  }
+  async function refresh() {
+    if (!client || !visible) return;
+    cancel(); const at = ticket, connection = client, activeSession = session;
+    controller = new AbortController(); const { signal } = controller;
+    clear(); $('#plugins-refresh').disabled = true; $('#plugins-list').setAttribute('aria-busy', 'true'); feedback('正在读取插件状态…');
+    const valid = () => at === ticket && client === connection && visible && !signal.aborted;
+    try {
+      const catalog = await connection.get('/api/v0/capabilities', { signal });
+      if (!valid()) return;
+      render(projectPluginStatus(catalog, null)); feedback('');
+      let records;
+      try {
+        const result = await connection.get(activeSession.connectionManagement ? '/api/v0/connection-management/connections' : '/api/v0/connections', { signal });
+        if (result.contractVersion !== 0 || !Array.isArray(result.connections)) throw new TypeError('不支持的连接列表版本');
+        records = result.connections;
+      } catch (error) {
+        if (!valid()) return;
+        // A service without either static grants or managed connections has no /connections route.
+        if (!activeSession.connectionManagement && error.status === 404) records = [];
+        else { const note = $('#plugins-authorizations-note'); note.hidden = false; note.textContent = '授权信息未能读取：' + describe(error) + '；插件目录已读取。'; }
+      }
+      if (!valid()) return;
+      if (records) render(projectPluginStatus(catalog, records));
+      const updated = $('#plugins-updated'); updated.hidden = false; updated.textContent = '读取于 ' + new Date().toLocaleTimeString('zh-CN') + ' · 不调用业务或测试模型';
+    } catch (error) { if (valid()) { clear(); feedback('插件目录未能读取：' + describe(error), true); } }
+    finally { if (valid()) { controller = null; $('#plugins-refresh').disabled = false; $('#plugins-list').setAttribute('aria-busy', 'false'); } }
+  }
+  $('#plugins-refresh').addEventListener('click', refresh);
+  $('#plugins-connections').addEventListener('click', () => navigate('connections'));
+  return {
+    connect(connection, facts) { cancel(); clear(); client = connection; session = facts; $('#plugins-connections').hidden = !facts.connectionManagement; },
+    show(value) { visible = value; if (visible) void refresh(); else cancel(); },
+    disconnect() { visible = false; cancel(); clear(); client = session = null; $('#plugins-panel').hidden = true; }
+  };
+}

package/lib/web/plugin-surface.css

@@ -0,0 +1,17 @@
+:host { display:block; color:var(--ink); font:inherit; color-scheme:inherit; }
+* { box-sizing:border-box; }
+[hidden] { display:none!important; }
+.plugin-content { min-width:0; overflow-wrap:anywhere; }
+h1,h2,h3,p,figure { margin:0 0 12px; }
+button,input,select,textarea { font:inherit; color:inherit; max-width:100%; }
+button,input,select,textarea { border:1px solid var(--line); border-radius:8px; padding:8px 12px; background:var(--panel); min-height:40px; }
+button { cursor:pointer; background:var(--accent); color:var(--on-accent); }
+button:disabled { opacity:.5; cursor:default; }
+button.secondary { background:var(--panel); color:var(--ink); }
+label { display:grid; gap:6px; margin-bottom:12px; }
+a { color:var(--accent); }
+:focus-visible { outline:2px solid var(--purple); outline-offset:3px; }
+.muted,.field-note { color:var(--muted); font-size:12px; }
+.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; }
+.error { color:var(--error); }
+img,video,audio { max-width:100%; }