@ai_mind/dsh-a2a 0.0.0-stage → 1.0.0

package/client.js

@@ -0,0 +1,868 @@
+/**
+ * @ai_mind/dsh-a2a — browser half (settings panel).
+ *
+ * Registers one Settings → Plugins tab that renders the live A2A Agent Card,
+ * its interface URLs, capabilities, optional runtime counters, an editable
+ * configuration form and copy-ready request snippets.
+ *
+ * The configuration form talks to `<mountPath>/panel/config`, which is
+ * authenticated by the Harness Web connection (not the A2A token) and writes
+ * through the Host config editor.
+ */
+window.__ModuleLoader__.load({
+  id: '@ai_mind/dsh-a2a',
+  factory(require) {
+    const React = require('react')
+    const h = React.createElement
+
+    const NS = 'a2aPanel'
+    const CARD_PATH = '/.well-known/agent-card.json'
+
+    const zh = {
+      tab: 'A2A 服务端',
+      heading: 'A2A 服务端',
+      intro: '通过 Agent2Agent v1.0 协议把本机智能体开放给其他智能体。',
+      refresh: '刷新',
+      loading: '正在读取 Agent Card…',
+      loadError: '无法读取 Agent Card',
+      loadErrorHint: '请确认 a2a-server 插件已启用，并且 /a2a 路径没有被其他插件占用。',
+      disabled: '未检测到 A2A 服务端',
+      disabledHint: '在 设置 → 插件 中启用 @ai_mind/dsh-a2a，或确认 profile 的 cordis.patch.yml 中存在 a2a-server 行。',
+      interfaces: '接口地址',
+      jsonrpc: 'JSON-RPC',
+      rest: 'HTTP+JSON',
+      capabilities: '能力',
+      streaming: '流式 SSE',
+      push: '推送通知',
+      extended: '扩展 Agent Card',
+      auth: '鉴权',
+      authNone: '未启用（仅允许本机调用）',
+      authOn: '已启用',
+      version: '协议版本',
+      runtime: '运行状态',
+      runtimeDenied: '运行状态需要 A2A 凭据，当前页面无权读取；这不影响其他信息。',
+      tasks: '任务',
+      contexts: '活跃上下文',
+      concurrency: '并发占用',
+      uptime: '运行时长',
+      skills: '技能',
+      noSkills: '未声明技能',
+      quickstart: '快速请求',
+      copy: '复制',
+      copied: '已复制',
+      jsClient: 'JavaScript 客户端',
+      config: '配置',
+      configHint: '保存到 profile 的 cordis.patch.yml（a2a-server 行）；插件会重载，进行中的 A2A 任务会被中断。',
+      configUnavailable: '当前部署未启用配置编辑（缺少 configEditor）。请直接编辑 profile 的 cordis.patch.yml。',
+      configUnauthorized: '配置读取需要已登录的 Harness Web 会话，请从 DSH GUI 打开本页。',
+      configLoadError: '读取配置失败',
+      save: '保存',
+      saving: '保存中…',
+      saved: '已保存，插件正在重载…',
+      saveError: '保存失败',
+      reload: '重新读取',
+      dirty: '有未保存的修改',
+      token: '访问令牌',
+      tokenHint: '写回 profile YAML；推荐改用 auth.tokenEnv 从环境变量读取。',
+      tokenPlaceholder: '留空保持不变',
+      clearToken: '清除已保存的内联令牌',
+      tokenConfigured: '已配置内联令牌',
+      tokenNotConfigured: '未配置内联令牌',
+      tokenEnvConfigured: '环境变量已配置：{name}',
+      openCard: '打开 Agent Card',
+      seconds: '秒',
+      minutes: '分',
+      hours: '小时',
+      unknown: '—',
+      groupCard: '身份与描述',
+      groupServer: '服务与能力',
+      groupAuth: '鉴权',
+      groupAgent: 'Agent 运行时',
+      groupLimits: '限额与保留',
+      fieldCardName: '名称',
+      fieldCardDescription: '描述',
+      fieldCardVersion: '版本',
+      fieldServerPublicUrl: '对外地址',
+      fieldServerMountPath: '挂载路径',
+      fieldServerStreaming: '流式 SSE',
+      fieldServerPushNotifications: '推送通知',
+      fieldServerExtendedCard: '扩展 Agent Card',
+      fieldAuthMode: '鉴权模式',
+      fieldAuthTokenEnv: '令牌环境变量',
+      fieldAuthAllowRemoteUnauthenticated: '允许未鉴权的远程调用',
+      fieldAgentCwd: '工作目录',
+      fieldAgentPreset: 'Agent 预设',
+      fieldAgentProvider: '模型提供方',
+      fieldAgentModel: '模型',
+      fieldAgentReasoningEffort: '推理强度',
+      fieldAgentSandboxMode: '沙箱模式',
+      fieldAgentApprovalPolicy: '审批策略',
+      fieldAgentMaxConcurrentTasks: '最大并发任务',
+      fieldAgentQueueTimeoutMs: '排队超时 (ms)',
+      fieldAgentTurnTimeoutMs: '单回合超时 (ms)',
+      fieldLimitsMaxRequestBytes: '请求体上限 (bytes)',
+      fieldLimitsMaxFileBytes: '单附件上限 (bytes)',
+      fieldTasksTtlMs: '任务保留 (ms)',
+      fieldTasksMaxTasks: '任务数量上限',
+      fieldPushAllowPrivateTargets: '允许私有 Webhook',
+      enumNone: '不鉴权',
+      enumBearer: 'Bearer',
+      enumApiKey: 'API Key',
+      enumInherit: '继承部署默认',
+      enumReadOnly: '只读',
+      enumWorkspaceWrite: '工作区可写',
+      enumDangerFullAccess: '完全访问',
+      enumAsk: '询问',
+      enumNever: '从不',
+      restartHint: '修改挂载路径后请刷新页面。',
+    }
+
+    const en = {
+      tab: 'A2A Server',
+      heading: 'A2A Server',
+      intro: 'Exposes this Harness agent to other agents over the Agent2Agent v1.0 protocol.',
+      refresh: 'Refresh',
+      loading: 'Reading the Agent Card…',
+      loadError: 'Cannot read the Agent Card',
+      loadErrorHint: 'Confirm the a2a-server plugin is enabled and the /a2a path is not owned by another plugin.',
+      disabled: 'No A2A server detected',
+      disabledHint: 'Enable @ai_mind/dsh-a2a under Settings → Plugins, or add an a2a-server row to the profile cordis.patch.yml.',
+      interfaces: 'Endpoints',
+      jsonrpc: 'JSON-RPC',
+      rest: 'HTTP+JSON',
+      capabilities: 'Capabilities',
+      streaming: 'Streaming SSE',
+      push: 'Push notifications',
+      extended: 'Extended Agent Card',
+      auth: 'Authentication',
+      authNone: 'None (loopback only)',
+      authOn: 'Required',
+      version: 'Protocol version',
+      runtime: 'Runtime',
+      runtimeDenied: 'Runtime counters require A2A credentials; the panel cannot read them. Everything else is unaffected.',
+      tasks: 'Tasks',
+      contexts: 'Active contexts',
+      concurrency: 'Concurrency',
+      uptime: 'Uptime',
+      skills: 'Skills',
+      noSkills: 'No skills declared',
+      quickstart: 'Quick request',
+      copy: 'Copy',
+      copied: 'Copied',
+      jsClient: 'JavaScript client',
+      config: 'Configuration',
+      configHint: 'Saved to the a2a-server row in the profile cordis.patch.yml; the plugin reloads and in-flight A2A tasks are interrupted.',
+      configUnavailable: 'Configuration editing is unavailable in this deployment (no config editor). Edit the profile cordis.patch.yml instead.',
+      configUnauthorized: 'Reading configuration requires an authenticated Harness Web session; open this page from the DSH GUI.',
+      configLoadError: 'Cannot read configuration',
+      save: 'Save',
+      saving: 'Saving…',
+      saved: 'Saved. The plugin is reloading…',
+      saveError: 'Save failed',
+      reload: 'Reload',
+      dirty: 'Unsaved changes',
+      token: 'Access token',
+      tokenHint: 'Stored in the profile YAML. Prefer auth.tokenEnv instead.',
+      tokenPlaceholder: 'Leave empty to keep',
+      clearToken: 'Clear the saved inline token',
+      tokenConfigured: 'Inline token configured',
+      tokenNotConfigured: 'No inline token',
+      tokenEnvConfigured: 'Environment variable: {name}',
+      openCard: 'Open Agent Card',
+      seconds: 's',
+      minutes: 'm',
+      hours: 'h',
+      unknown: '—',
+      groupCard: 'Identity',
+      groupServer: 'Service & capabilities',
+      groupAuth: 'Authentication',
+      groupAgent: 'Agent runtime',
+      groupLimits: 'Limits & retention',
+      fieldCardName: 'Name',
+      fieldCardDescription: 'Description',
+      fieldCardVersion: 'Version',
+      fieldServerPublicUrl: 'Public URL',
+      fieldServerMountPath: 'Mount path',
+      fieldServerStreaming: 'Streaming SSE',
+      fieldServerPushNotifications: 'Push notifications',
+      fieldServerExtendedCard: 'Extended Agent Card',
+      fieldAuthMode: 'Auth mode',
+      fieldAuthTokenEnv: 'Token environment variable',
+      fieldAuthAllowRemoteUnauthenticated: 'Allow unauthenticated remote callers',
+      fieldAgentCwd: 'Working directory',
+      fieldAgentPreset: 'Agent preset',
+      fieldAgentProvider: 'Model provider',
+      fieldAgentModel: 'Model',
+      fieldAgentReasoningEffort: 'Reasoning effort',
+      fieldAgentSandboxMode: 'Sandbox mode',
+      fieldAgentApprovalPolicy: 'Approval policy',
+      fieldAgentMaxConcurrentTasks: 'Max concurrent tasks',
+      fieldAgentQueueTimeoutMs: 'Queue timeout (ms)',
+      fieldAgentTurnTimeoutMs: 'Turn timeout (ms)',
+      fieldLimitsMaxRequestBytes: 'Request body limit (bytes)',
+      fieldLimitsMaxFileBytes: 'Attachment limit (bytes)',
+      fieldTasksTtlMs: 'Task retention (ms)',
+      fieldTasksMaxTasks: 'Max tasks',
+      fieldPushAllowPrivateTargets: 'Allow private webhooks',
+      enumNone: 'None',
+      enumBearer: 'Bearer',
+      enumApiKey: 'API Key',
+      enumInherit: 'Inherit deployment',
+      enumReadOnly: 'Read-only',
+      enumWorkspaceWrite: 'Workspace write',
+      enumDangerFullAccess: 'Full access',
+      enumAsk: 'Ask',
+      enumNever: 'Never',
+      restartHint: 'Refresh the page after changing the mount path.',
+    }
+
+    const CSS = `
+.a2aui-page{display:flex;flex-direction:column;gap:16px;max-width:860px;color:var(--dsw-alias-label-primary);font-size:13px;line-height:20px}
+.a2aui-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
+.a2aui-brand{display:flex;align-items:center;gap:14px;min-width:0}
+.a2aui-logo{width:44px;height:44px;flex:none}
+.a2aui-title{margin:0;font-size:18px;font-weight:600;line-height:26px}
+.a2aui-desc{margin:2px 0 0;color:var(--dsw-alias-label-secondary);font-size:13px;line-height:20px}
+.a2aui-card{border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-lg);background:var(--dsw-alias-bg-layer-1);padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
+.a2aui-section-title{margin:0;font-size:13px;font-weight:600;line-height:20px}
+.a2aui-badges{display:flex;flex-wrap:wrap;gap:6px}
+.a2aui-badge{border:.5px solid var(--dsw-alias-border-l3);border-radius:999px;padding:1px 9px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary);white-space:nowrap}
+.a2aui-badge[data-on=true]{border-color:color-mix(in srgb,var(--dsw-alias-state-success-primary) 45%,transparent);background:color-mix(in srgb,var(--dsw-alias-state-success-primary) 10%,transparent);color:var(--dsw-alias-label-primary)}
+.a2aui-badge[data-tone=warn]{border-color:color-mix(in srgb,var(--dsw-alias-state-warn-primary) 45%,transparent);background:var(--dsw-alias-state-warn-tertiary);color:var(--dsw-alias-label-primary)}
+.a2aui-row{display:flex;align-items:center;gap:10px;min-width:0;border-top:.5px solid var(--dsw-alias-border-l2);padding-top:10px}
+.a2aui-row:first-of-type{border-top:0;padding-top:0}
+.a2aui-row-label{flex:none;width:88px;color:var(--dsw-alias-label-secondary);font-size:12px}
+.a2aui-code{flex:1;min-width:0;overflow-wrap:anywhere;font-family:var(--dsw-font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12px;color:var(--dsw-alias-label-primary)}
+.a2aui-btn{flex:none;border:.5px solid var(--dsw-alias-border-l3);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);border-radius:var(--dsw-radius-md);height:26px;padding:0 10px;font:inherit;font-size:12px;cursor:pointer}
+.a2aui-btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
+.a2aui-btn:disabled{opacity:.5;cursor:default}
+.a2aui-btn[data-copied=true]{color:var(--dsw-alias-state-success-primary);border-color:color-mix(in srgb,var(--dsw-alias-state-success-primary) 45%,transparent)}
+.a2aui-btnPrimary{background:var(--dsw-alias-state-business-primary);border-color:var(--dsw-alias-state-business-primary);color:var(--dsw-alias-label-primary-foreground)}
+.a2aui-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
+.a2aui-fact{display:flex;flex-direction:column;gap:1px}
+.a2aui-fact-key{color:var(--dsw-alias-label-tertiary);font-size:11.5px}
+.a2aui-fact-value{font-size:15px;font-weight:600;line-height:22px;font-variant-numeric:tabular-nums}
+.a2aui-skills{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
+.a2aui-skill-name{font-weight:600}
+.a2aui-skill-desc{color:var(--dsw-alias-label-secondary);margin:1px 0 0}
+.a2aui-muted{color:var(--dsw-alias-label-tertiary);margin:0}
+.a2aui-pre{margin:0;border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-2);padding:10px 12px;overflow:auto;max-height:260px;font-family:var(--dsw-font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:11.5px;line-height:17px;white-space:pre;color:var(--dsw-alias-label-primary)}
+.a2aui-details summary{cursor:pointer;color:var(--dsw-alias-label-secondary);font-size:12px;user-select:none}
+.a2aui-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.a2aui-link{color:var(--dsw-alias-state-business-primary);text-decoration:none;font-size:12px}
+.a2aui-link:hover{text-decoration:underline}
+.a2aui-error{border:.5px solid color-mix(in srgb,var(--dsw-alias-state-error-primary) 40%,transparent);border-radius:var(--dsw-radius-lg);background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 6%,transparent);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
+.a2aui-error-title{margin:0;font-weight:600}
+.a2aui-form{display:flex;flex-direction:column;gap:14px}
+.a2aui-group{display:flex;flex-direction:column;gap:8px}
+.a2aui-group-title{margin:0;color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600;line-height:18px}
+.a2aui-field{display:grid;grid-template-columns:190px minmax(0,1fr);gap:10px;align-items:center;min-width:0}
+.a2aui-field>label{color:var(--dsw-alias-label-secondary);font-size:12.5px;line-height:18px;overflow-wrap:anywhere}
+.a2aui-input,.a2aui-select,.a2aui-textarea{box-sizing:border-box;width:100%;min-width:0;border:.5px solid var(--dsw-alias-border-l4);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font:inherit;font-size:12.5px;padding:5px 9px;outline:none}
+.a2aui-input:focus,.a2aui-select:focus,.a2aui-textarea:focus{border-color:var(--dsw-alias-state-business-primary);box-shadow:inset 0 0 0 .5px var(--dsw-alias-state-business-primary)}
+.a2aui-textarea{resize:vertical;min-height:56px;line-height:18px}
+.a2aui-check{display:inline-flex;align-items:center;gap:8px;color:var(--dsw-alias-label-primary);font-size:12.5px}
+.a2aui-check input{width:15px;height:15px;accent-color:var(--dsw-alias-brand-primary)}
+.a2aui-field-note{color:var(--dsw-alias-label-tertiary);font-size:11.5px;margin:0}
+.a2aui-form-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:.5px solid var(--dsw-alias-border-l2);padding-top:12px}
+.a2aui-status{font-size:12px;color:var(--dsw-alias-label-secondary);margin:0}
+.a2aui-status[data-tone=error]{color:var(--dsw-alias-state-error-primary)}
+.a2aui-status[data-tone=ok]{color:var(--dsw-alias-state-success-primary)}
+.a2aui-secret{display:flex;flex-direction:column;gap:6px}
+`
+
+    function copyText(text) {
+      try {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          return navigator.clipboard.writeText(text).then(
+            () => true,
+            () => fallbackCopy(text),
+          )
+        }
+      } catch {
+        /* fall through */
+      }
+      return Promise.resolve(fallbackCopy(text))
+    }
+
+    function fallbackCopy(text) {
+      try {
+        const area = document.createElement('textarea')
+        area.value = text
+        area.setAttribute('readonly', '')
+        area.style.position = 'fixed'
+        area.style.opacity = '0'
+        document.body.appendChild(area)
+        area.select()
+        const ok = document.execCommand('copy')
+        area.remove()
+        return ok
+      } catch {
+        return false
+      }
+    }
+
+    function formatUptime(seconds, t) {
+      if (typeof seconds !== 'number' || !Number.isFinite(seconds)) return t('unknown')
+      if (seconds < 60) return `${Math.round(seconds)}${t('seconds')}`
+      if (seconds < 3600) return `${Math.floor(seconds / 60)}${t('minutes')} ${Math.round(seconds % 60)}${t('seconds')}`
+      return `${Math.floor(seconds / 3600)}${t('hours')} ${Math.floor((seconds % 3600) / 60)}${t('minutes')}`
+    }
+
+    const GROUP_LABELS = {
+      card: 'groupCard',
+      server: 'groupServer',
+      auth: 'groupAuth',
+      agent: 'groupAgent',
+      limits: 'groupLimits',
+    }
+
+    function humanize(path) {
+      const tail = path.split('.').pop() ?? path
+      return tail.replace(/([A-Z])/g, ' $1').replace(/^./, (value) => value.toUpperCase())
+    }
+
+    function fieldLabel(t, path) {
+      const key = `field${path
+        .split('.')
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('')}`
+      const value = t(key)
+      return typeof value === 'string' && value !== key ? value : humanize(path)
+    }
+
+    function groupLabel(t, group) {
+      const key = GROUP_LABELS[group] ?? group
+      const value = t(key)
+      return typeof value === 'string' && value !== key ? value : group
+    }
+
+    function enumLabel(t, value) {
+      const key = `enum${value.replace(/[-_]/g, '').replace(/^./, (character) => character.toUpperCase())}`
+      const label = t(key)
+      return typeof label === 'string' && label !== key ? label : value
+    }
+
+    function draftFrom(panel) {
+      const values = {}
+      for (const field of panel && Array.isArray(panel.fields) ? panel.fields : []) values[field.path] = field.value
+      return values
+    }
+
+    function sameValue(field, value) {
+      if (field.type === 'integer') {
+        if (value === '' || value === null || value === undefined) return field.value === null
+        return Number(value) === Number(field.value)
+      }
+      if (field.type === 'boolean') return Boolean(value) === Boolean(field.value)
+      return String(value ?? '') === String(field.value ?? '')
+    }
+
+    function serializeValue(field, value) {
+      if (field.type === 'integer') {
+        if (value === '' || value === null || value === undefined) return null
+        return Number(value)
+      }
+      if (field.type === 'boolean') return Boolean(value)
+      if (field.nullable && String(value ?? '').trim() === '') return null
+      return value
+    }
+
+    function CopyButton({ text, label, copied, onCopy, id }) {
+      const done = copied === id
+      return h(
+        'button',
+        {
+          type: 'button',
+          className: 'a2aui-btn',
+          'data-copied': done ? 'true' : 'false',
+          onClick: () => onCopy(id, text),
+        },
+        done ? label.copied : label.copy,
+      )
+    }
+
+    function createTab(t) {
+      return function A2AServerPanel() {
+        const [state, setState] = React.useState({
+          status: 'loading',
+          card: null,
+          health: null,
+          denied: false,
+          error: null,
+          panel: null,
+          panelPath: null,
+          panelError: null,
+        })
+        const [draft, setDraft] = React.useState({})
+        const [token, setToken] = React.useState('')
+        const [clearToken, setClearToken] = React.useState(false)
+        const [saving, setSaving] = React.useState(false)
+        const [saved, setSaved] = React.useState(false)
+        const [saveError, setSaveError] = React.useState(null)
+        const [copied, setCopied] = React.useState(null)
+        const [reloadKey, setReloadKey] = React.useState(0)
+
+        React.useEffect(() => {
+          const controller = new AbortController()
+          setState((previous) => ({ ...previous, status: 'loading', error: null }))
+          setSaved(false)
+          setSaveError(null)
+          ;(async () => {
+            try {
+              const response = await fetch(CARD_PATH, { cache: 'no-store', signal: controller.signal })
+              if (!response.ok) {
+                setState({ status: response.status === 404 ? 'missing' : 'error', card: null, health: null, denied: false, error: `HTTP ${response.status}`, panel: null, panelPath: null, panelError: null })
+                return
+              }
+              const card = await response.json()
+              let health = null
+              let denied = false
+              let panel = null
+              let panelPath = null
+              let panelError = null
+              const jsonrpc = Array.isArray(card.supportedInterfaces)
+                ? card.supportedInterfaces.find((entry) => entry.protocolBinding === 'JSONRPC')
+                : undefined
+              if (jsonrpc && typeof jsonrpc.url === 'string') {
+                try {
+                  const url = new URL(jsonrpc.url, window.location.origin)
+                  const base = `${window.location.origin}${url.pathname.replace(/\/$/, '')}`
+                  try {
+                    const healthResponse = await fetch(`${base}/health`, { cache: 'no-store', signal: controller.signal })
+                    if (healthResponse.ok) health = await healthResponse.json()
+                    else denied = healthResponse.status === 401 || healthResponse.status === 403
+                  } catch {
+                    denied = true
+                  }
+                  panelPath = `${base}/panel/config`
+                  try {
+                    const panelResponse = await fetch(panelPath, { cache: 'no-store', signal: controller.signal, credentials: 'same-origin' })
+                    if (panelResponse.ok) panel = await panelResponse.json()
+                    else if (panelResponse.status === 401 || panelResponse.status === 403) panelError = 'unauthorized'
+                    else if (panelResponse.status === 501) panelError = 'unavailable'
+                    else panelError = 'error'
+                  } catch {
+                    panelError = 'error'
+                  }
+                } catch {
+                  denied = true
+                }
+              }
+              setState({ status: 'ready', card, health, denied, error: null, panel, panelPath, panelError })
+              setDraft(draftFrom(panel))
+            } catch (error) {
+              if (error && error.name === 'AbortError') return
+              setState({ status: 'error', card: null, health: null, denied: false, error: String((error && error.message) || error), panel: null, panelPath: null, panelError: null })
+            }
+          })()
+          return () => controller.abort()
+        }, [reloadKey])
+
+        const writeClipboard = React.useCallback((id, text) => {
+          copyText(text).then((ok) => {
+            if (!ok) return
+            setCopied(id)
+            window.setTimeout(() => setCopied((current) => (current === id ? null : current)), 1600)
+          })
+        }, [])
+
+        const card = state.card
+        const health = state.health
+        const panel = state.panel
+        const jsonrpc = card && Array.isArray(card.supportedInterfaces)
+          ? card.supportedInterfaces.find((entry) => entry.protocolBinding === 'JSONRPC')
+          : undefined
+        const rest = card && Array.isArray(card.supportedInterfaces)
+          ? card.supportedInterfaces.find((entry) => entry.protocolBinding === 'HTTP+JSON')
+          : undefined
+        const endpoint = jsonrpc && jsonrpc.url ? jsonrpc.url : ''
+        const security = card && card.securitySchemes ? Object.keys(card.securitySchemes) : []
+        const authRequired = security.length > 0
+        const authLine = authRequired ? " \\\n  -H 'authorization: Bearer $A2A_TOKEN'" : ''
+        const curl = endpoint
+          ? `curl -s ${endpoint} \\\n  -H 'content-type: application/json' \\\n  -H 'a2a-version: 1.0'${authLine} \\\n  -d '{"jsonrpc":"2.0","id":1,"method":"SendMessage","params":{"message":{"messageId":"m-1","role":"ROLE_USER","parts":[{"text":"Hello"}]}}}'`
+          : ''
+        const js = endpoint
+          ? `import { ClientFactory, Role } from '@a2a-js/sdk/client'\n\nconst client = await new ClientFactory().createFromUrl('${new URL(endpoint, window.location.origin).origin}')\nconst result = await client.sendMessage({\n  message: {\n    messageId: crypto.randomUUID(),\n    role: Role.ROLE_USER,\n    parts: [{ content: { $case: 'text', value: 'Hello' } }],\n  },\n})\nconsole.log(result)`
+          : ''
+
+        const badge = (label, on, key) => h('span', { key, className: 'a2aui-badge', 'data-on': on ? 'true' : 'false' }, label)
+
+        const header = h(
+          'div',
+          { className: 'a2aui-head' },
+          h(
+            'div',
+            { className: 'a2aui-brand' },
+            h(
+              'svg',
+              { className: 'a2aui-logo', viewBox: '0 0 64 64', 'aria-hidden': true },
+              h('rect', { x: 2, y: 2, width: 60, height: 60, rx: 14, fill: '#2f6df6' }),
+              h('circle', { cx: 18, cy: 32, r: 7, fill: 'none', stroke: '#fff', strokeWidth: 3.5 }),
+              h('circle', { cx: 46, cy: 32, r: 7, fill: 'none', stroke: '#fff', strokeWidth: 3.5 }),
+              h('path', { d: 'M25.5 32h13', stroke: '#fff', strokeWidth: 3.5, strokeLinecap: 'round' }),
+              h('path', { d: 'M32 25.5l6.5 6.5-6.5 6.5', fill: 'none', stroke: '#fff', strokeWidth: 3.5, strokeLinecap: 'round', strokeLinejoin: 'round' }),
+            ),
+            h(
+              'div',
+              null,
+              h('h3', { className: 'a2aui-title' }, card ? card.name : t('heading')),
+              h('p', { className: 'a2aui-desc' }, card ? card.description : t('intro')),
+            ),
+          ),
+          h('button', { type: 'button', className: 'a2aui-btn', onClick: () => setReloadKey((value) => value + 1) }, t('refresh')),
+        )
+
+        if (state.status === 'loading' && !card) {
+          return h('div', { className: 'a2aui-page' }, header, h('p', { className: 'a2aui-muted' }, t('loading')))
+        }
+
+        if (!card) {
+          const missing = state.status === 'missing'
+          return h(
+            'div',
+            { className: 'a2aui-page' },
+            header,
+            h(
+              'div',
+              { className: 'a2aui-error' },
+              h('p', { className: 'a2aui-error-title' }, missing ? t('disabled') : t('loadError')),
+              h('p', { className: 'a2aui-muted' }, missing ? t('disabledHint') : t('loadErrorHint')),
+              state.error ? h('p', { className: 'a2aui-muted' }, state.error) : null,
+            ),
+          )
+        }
+
+        const dirty = panel
+          ? panel.fields.some((field) => !sameValue(field, draft[field.path])) || token !== '' || clearToken
+          : false
+
+        const setField = (path, value) => {
+          setDraft((previous) => ({ ...previous, [path]: value }))
+          setSaved(false)
+          setSaveError(null)
+        }
+
+        const save = async () => {
+          if (!panel || !state.panelPath || saving) return
+          const values = {}
+          for (const field of panel.fields) {
+            if (sameValue(field, draft[field.path])) continue
+            values[field.path] = serializeValue(field, draft[field.path])
+          }
+          const body = { values }
+          if (clearToken) body.clearToken = true
+          else if (token !== '') body.token = token
+          setSaving(true)
+          setSaved(false)
+          setSaveError(null)
+          try {
+            const response = await fetch(state.panelPath, {
+              method: 'PUT',
+              credentials: 'same-origin',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify(body),
+            })
+            const payload = await response.json().catch(() => ({}))
+            if (!response.ok) throw new Error(payload.message || payload.error || `HTTP ${response.status}`)
+            setState((previous) => ({ ...previous, panel: payload, panelError: null }))
+            setDraft(draftFrom(payload))
+            setToken('')
+            setClearToken(false)
+            setSaved(true)
+            window.setTimeout(() => setReloadKey((value) => value + 1), 900)
+          } catch (error) {
+            setSaveError(String((error && error.message) || error))
+          } finally {
+            setSaving(false)
+          }
+        }
+
+        const renderControl = (field) => {
+          const value = draft[field.path]
+          const onChange = (event) => setField(field.path, event.target.value)
+          if (field.type === 'boolean') {
+            return h(
+              'label',
+              { className: 'a2aui-check' },
+              h('input', { type: 'checkbox', checked: Boolean(value), onChange: (event) => setField(field.path, event.target.checked) }),
+              value ? 'true' : 'false',
+            )
+          }
+          if (field.type === 'enum') {
+            return h(
+              'select',
+              { className: 'a2aui-select', value: value ?? '', onChange },
+              (field.options ?? []).map((option) => h('option', { key: option, value: option }, enumLabel(t, option))),
+            )
+          }
+          if (field.type === 'textarea') {
+            return h('textarea', { className: 'a2aui-textarea', rows: 2, value: value ?? '', onChange })
+          }
+          if (field.type === 'integer') {
+            return h('input', { className: 'a2aui-input', type: 'number', min: field.min, max: field.max, value: value ?? '', onChange })
+          }
+          return h('input', {
+            className: 'a2aui-input',
+            type: 'text',
+            value: value ?? '',
+            placeholder: field.placeholder || (field.nullable ? t('unknown') : ''),
+            onChange,
+          })
+        }
+
+        const groups = panel
+          ? [...new Set(panel.fields.map((field) => field.group))].map((group) => [group, panel.fields.filter((field) => field.group === group)])
+          : []
+
+        const secretBlock = panel
+          ? h(
+              'div',
+              { className: 'a2aui-group' },
+              h('h5', { className: 'a2aui-group-title' }, t('token')),
+              h(
+                'div',
+                { className: 'a2aui-secret' },
+                h('input', {
+                  className: 'a2aui-input',
+                  type: 'password',
+                  autoComplete: 'new-password',
+                  value: token,
+                  placeholder: t('tokenPlaceholder'),
+                  onChange: (event) => {
+                    setToken(event.target.value)
+                    setSaved(false)
+                    setSaveError(null)
+                  },
+                }),
+                h(
+                  'label',
+                  { className: 'a2aui-check' },
+                  h('input', {
+                    type: 'checkbox',
+                    checked: clearToken,
+                    onChange: (event) => {
+                      setClearToken(event.target.checked)
+                      setSaved(false)
+                    },
+                  }),
+                  t('clearToken'),
+                ),
+                h(
+                  'p',
+                  { className: 'a2aui-field-note' },
+                  panel.secrets && panel.secrets.inline ? t('tokenConfigured') : t('tokenNotConfigured'),
+                  panel.secrets && panel.secrets.tokenEnv
+                    ? ` · ${t('tokenEnvConfigured').replace('{name}', panel.secrets.tokenEnv)}`
+                    : '',
+                ),
+                h('p', { className: 'a2aui-field-note' }, t('tokenHint')),
+              ),
+            )
+          : null
+
+        const configSection = h(
+          'section',
+          { className: 'a2aui-card' },
+          h('h4', { className: 'a2aui-section-title' }, t('config')),
+          panel
+            ? h(
+                'div',
+                { className: 'a2aui-form' },
+                ...groups.map(([group, fields]) =>
+                  h(
+                    'div',
+                    { className: 'a2aui-group', key: group },
+                    h('h5', { className: 'a2aui-group-title' }, groupLabel(t, group)),
+                    ...fields.map((field) =>
+                      h(
+                        'div',
+                        { className: 'a2aui-field', key: field.path },
+                        h('label', { htmlFor: `a2aui-${field.path}` }, fieldLabel(t, field.path)),
+                        h('div', null, renderControl(field)),
+                      ),
+                    ),
+                  ),
+                ),
+                secretBlock,
+                h(
+                  'div',
+                  { className: 'a2aui-form-foot' },
+                  h(
+                    'button',
+                    { type: 'button', className: 'a2aui-btn a2aui-btnPrimary', disabled: !dirty || saving, onClick: save },
+                    saving ? t('saving') : t('save'),
+                  ),
+                  h('button', { type: 'button', className: 'a2aui-btn', onClick: () => setReloadKey((value) => value + 1) }, t('reload')),
+                  dirty ? h('span', { className: 'a2aui-status' }, t('dirty')) : null,
+                  saved ? h('span', { className: 'a2aui-status', 'data-tone': 'ok' }, t('saved')) : null,
+                  saveError ? h('span', { className: 'a2aui-status', 'data-tone': 'error' }, `${t('saveError')}: ${saveError}`) : null,
+                  h('span', { className: 'a2aui-status' }, t('configHint')),
+                  h('span', { className: 'a2aui-status' }, t('restartHint')),
+                ),
+              )
+            : h(
+                'p',
+                { className: 'a2aui-muted' },
+                state.panelError === 'unauthorized'
+                  ? t('configUnauthorized')
+                  : state.panelError === 'unavailable'
+                    ? t('configUnavailable')
+                    : `${t('configLoadError')}${state.panelPath ? `（${state.panelPath}）` : ''}`,
+              ),
+        )
+
+        const statusSection = h(
+          'section',
+          { className: 'a2aui-card' },
+          h('h4', { className: 'a2aui-section-title' }, t('capabilities')),
+          h(
+            'div',
+            { className: 'a2aui-badges' },
+            badge(`${t('version')} ${jsonrpc ? jsonrpc.protocolVersion || '1.0' : '1.0'}`, true),
+            badge(t('streaming'), Boolean(card.capabilities && card.capabilities.streaming)),
+            badge(t('push'), Boolean(card.capabilities && card.capabilities.pushNotifications)),
+            badge(t('extended'), Boolean(card.capabilities && card.capabilities.extendedAgentCard)),
+            h(
+              'span',
+              { className: 'a2aui-badge', 'data-tone': authRequired ? 'warn' : undefined },
+              `${t('auth')}: ${authRequired ? t('authOn') : t('authNone')}`,
+            ),
+          ),
+        )
+
+        const endpointSection = h(
+          'section',
+          { className: 'a2aui-card' },
+          h('h4', { className: 'a2aui-section-title' }, t('interfaces')),
+          jsonrpc
+            ? h(
+                'div',
+                { className: 'a2aui-row' },
+                h('span', { className: 'a2aui-row-label' }, t('jsonrpc')),
+                h('code', { className: 'a2aui-code' }, jsonrpc.url),
+                h(CopyButton, { id: 'jsonrpc', text: jsonrpc.url, label: { copy: t('copy'), copied: t('copied') }, copied, onCopy: writeClipboard }),
+              )
+            : null,
+          rest
+            ? h(
+                'div',
+                { className: 'a2aui-row' },
+                h('span', { className: 'a2aui-row-label' }, t('rest')),
+                h('code', { className: 'a2aui-code' }, rest.url),
+                h(CopyButton, { id: 'rest', text: rest.url, label: { copy: t('copy'), copied: t('copied') }, copied, onCopy: writeClipboard }),
+              )
+            : null,
+          h(
+            'div',
+            { className: 'a2aui-foot' },
+            h('a', { className: 'a2aui-link', href: CARD_PATH, target: '_blank', rel: 'noreferrer' }, t('openCard')),
+          ),
+        )
+
+        const runtimeSection = health
+          ? h(
+              'section',
+              { className: 'a2aui-card' },
+              h('h4', { className: 'a2aui-section-title' }, t('runtime')),
+              h(
+                'div',
+                { className: 'a2aui-facts' },
+                h('div', { className: 'a2aui-fact' }, h('span', { className: 'a2aui-fact-key' }, t('tasks')), h('span', { className: 'a2aui-fact-value' }, String(health.tasks ? health.tasks.tasks : t('unknown')))),
+                h('div', { className: 'a2aui-fact' }, h('span', { className: 'a2aui-fact-key' }, t('contexts')), h('span', { className: 'a2aui-fact-value' }, String(health.agents ? health.agents.contexts : t('unknown')))),
+                h('div', { className: 'a2aui-fact' }, h('span', { className: 'a2aui-fact-key' }, t('concurrency')), h('span', { className: 'a2aui-fact-value' }, health.concurrency ? `${health.concurrency.active}/${health.concurrency.max}` : t('unknown'))),
+                h('div', { className: 'a2aui-fact' }, h('span', { className: 'a2aui-fact-key' }, t('uptime')), h('span', { className: 'a2aui-fact-value' }, formatUptime(health.uptimeSeconds, t))),
+              ),
+            )
+          : null
+
+        const deniedSection = state.denied
+          ? h('section', { className: 'a2aui-card' }, h('p', { className: 'a2aui-muted' }, t('runtimeDenied')))
+          : null
+
+        const skills = Array.isArray(card.skills) ? card.skills : []
+        const skillsSection = h(
+          'section',
+          { className: 'a2aui-card' },
+          h('h4', { className: 'a2aui-section-title' }, t('skills')),
+          skills.length === 0
+            ? h('p', { className: 'a2aui-muted' }, t('noSkills'))
+            : h(
+                'ul',
+                { className: 'a2aui-skills' },
+                skills.map((skill) =>
+                  h(
+                    'li',
+                    { key: skill.id },
+                    h('div', { className: 'a2aui-skill-name' }, skill.name),
+                    h('p', { className: 'a2aui-skill-desc' }, skill.description),
+                    Array.isArray(skill.tags) && skill.tags.length > 0
+                      ? h('div', { className: 'a2aui-badges' }, skill.tags.map((tag) => badge(tag, false, tag)))
+                      : null,
+                  ),
+                ),
+              ),
+        )
+
+        const quickstartSection = h(
+          'section',
+          { className: 'a2aui-card' },
+          h('h4', { className: 'a2aui-section-title' }, t('quickstart')),
+          h('pre', { className: 'a2aui-pre' }, curl),
+          h(
+            'div',
+            { className: 'a2aui-foot' },
+            h(CopyButton, { id: 'curl', text: curl, label: { copy: t('copy'), copied: t('copied') }, copied, onCopy: writeClipboard }),
+            h(
+              'details',
+              { className: 'a2aui-details' },
+              h('summary', null, t('jsClient')),
+              h('pre', { className: 'a2aui-pre' }, js),
+            ),
+            h(CopyButton, { id: 'js', text: js, label: { copy: t('copy'), copied: t('copied') }, copied, onCopy: writeClipboard }),
+          ),
+        )
+
+        return h(
+          'div',
+          { className: 'a2aui-page' },
+          header,
+          statusSection,
+          endpointSection,
+          runtimeSection,
+          deniedSection,
+          configSection,
+          skillsSection,
+          quickstartSection,
+        )
+      }
+    }
+
+    return {
+      inject: ['slots', 'locale'],
+      apply(ctx) {
+        const t = ctx.locale.bind(NS)
+        ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'a2a-ui: dictionaries')
+        ctx.effect(() => {
+          const tag = document.createElement('style')
+          tag.dataset.plugin = '@ai_mind/dsh-a2a'
+          tag.textContent = CSS
+          document.head.appendChild(tag)
+          return () => tag.remove()
+        }, 'a2a-ui: styles')
+        ctx.slots.inject('settings.plugins.tab', () =>
+          ctx.slots.register(
+            {
+              name: 'settings.plugins.tab',
+              id: 'a2a-server',
+              order: 20,
+              label: () => t('tab'),
+            },
+            createTab(t),
+          ),
+        )
+      },
+    }
+  },
+})