@anionex/dsh-vision-toolkit 0.1.5 → 0.1.7

package/src/client/index.tsx

@@ -24,6 +24,7 @@ import { installPasteImages } from './paste-images.tsx'
 const NS = 'vision-toolkit'
 const SETTINGS_ROUTE = '/_dsh/vision-toolkit/settings'
 const PRESENTATION_META_KEY = '$dshVisionToolkit'
+const DEFAULT_USER_AGENT = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'
 
 const en = {
   nav: 'Vision',
@@ -31,9 +32,22 @@ const en = {
   settingsIntro: 'Configure the pinned visual engineering runtime, its external vision endpoint, and local safety limits.',
   externalNotice: 'Remote tools send the selected image bytes to the configured external vision API. Local crop, trace, pixel diff, palette, foreground extraction, and HTML rendering do not upload images.',
   provider: 'Vision service',
+  providerHint: 'Choose the API protocol, then provide the service address, model, and API key used by online vision features.',
   baseUrl: 'Base URL',
-  credential: 'Credential reference',
+  apiKey: 'API key',
+  apiKeyPlaceholderMissing: 'Paste the API key',
+  apiKeyPlaceholderConfigured: 'Saved; leave blank to keep it',
+  apiKeyHint: 'The key is stored in DSH Credentials and is never shown again after saving.',
+  apiKeyLocked: 'The current key comes from a read-only source and cannot be replaced here.',
+  apiKeyBlank: 'The API key cannot contain only spaces.',
+  apiKeyInvalid: 'Paste only the key, without a variable name, quotes, spaces, or line breaks.',
+  credential: 'Credential name',
+  credentialHint: 'Advanced: the API key is stored under this name. Keep VISION_API_KEY unless another plugin configuration requires a different reference.',
   model: 'Model',
+  protocol: 'API protocol',
+  anthropicThinking: 'Anthropic thinking',
+  anthropicThinkingHint: 'omit has the broadest compatibility. Use disabled or adaptive only when the selected model documents that mode; restore omit first after HTTP 400.',
+  userAgent: 'User-Agent',
   language: 'Output language',
   limits: 'Limits',
   timeout: 'Request timeout (ms)',
@@ -50,20 +64,31 @@ const en = {
   saving: 'Validating runtime…',
   reload: 'Reload',
   saved: 'Settings validated and applied.',
-  readOnly: 'The active Settings provider is read-only.',
+  readOnly: 'Service settings are read-only. A writable API key can still be saved.',
   configured: 'Configured',
   missing: 'Missing',
   source: 'Source',
+  sourceHint: '{source}: {value}',
+  sourceEnv: 'Environment variable',
+  sourceFile: 'Credential file',
   health: 'Health',
   runHealth: 'Run health check',
   testConnection: 'Test connection',
   testing: 'Checking…',
   connectionHint: 'Connection testing explicitly sends the configured credential to GET /models. It uploads no image and creates no completion.',
+  saveBeforeTesting: 'Save service changes before testing the connection.',
+  advanced: 'Advanced settings',
+  advancedHint: 'Credential name, provider compatibility, output language, resource limits, runtime source, Python, and additional readable directories.',
   pluginVersion: 'Plugin',
   upstreamVersion: 'Upstream',
   activeGeneration: 'Runtime generation',
+  activeGenerationValue: 'Generation {generation}',
+  pluginKind: 'DSH native plugin',
   runtimeUnavailable: 'Runtime unavailable',
   runtimeCandidateRejected: 'Last runtime candidate was rejected; the active generation remains available.',
+  runtimeReady: 'Ready',
+  runtimeManaged: 'Managed',
+  runtimeExternal: 'External checkout',
   retry: 'Retry',
   open: 'Open file',
   download: 'Download',
@@ -83,71 +108,203 @@ const en = {
   healthy: 'Healthy',
   degraded: 'Needs attention',
   notTested: 'Not tested',
+  groundTitle: 'Ground',
+  detectTitle: 'Detect',
+  traceTitle: 'Trace SVG',
+  pixelDiffTitle: 'Pixel Diff',
+  cropTitle: 'Crop',
+  longOcrTitle: 'Long OCR',
+  extractForegroundTitle: 'Extract Foreground',
+  htmlScreenshotTitle: 'HTML Screenshot',
+  artifactTitle: 'Vision Artifact',
+  dominantColorsTitle: 'Dominant Colors',
+  artifactGroundPreview: 'Grounding bounding-box preview',
+  artifactDetectPreview: 'Detected-element bounding-box preview',
+  artifactCrop: 'Cropped image region',
+  artifactTrace: 'Traced vector geometry',
+  artifactDiffHeatmap: 'Pixel-difference heatmap',
+  artifactDiffReport: 'Structured pixel-difference report',
+  artifactLongManifest: 'Long-screenshot split and merge manifest',
+  artifactLongTranscript: 'Merged long-screenshot OCR transcript',
+  artifactLongAudit: 'Long-screenshot OCR boundary audit',
+  artifactLongChunk: 'Long-screenshot OCR chunk {index}',
+  artifactOcrSidecar: 'OCR sidecar for chunk {index}',
+  artifactForeground: 'Extracted transparent foreground',
+  artifactHtmlScreenshot: 'Headless browser screenshot of local HTML',
+  label: 'Label',
+  paths: 'paths',
+  healthPython: 'Python',
+  healthDependencies: 'Dependencies',
+  healthChrome: 'Browser',
+  healthCredential: 'Credential',
+  healthArtifactDirectory: 'Artifact directory',
+  healthTempDirectory: 'Temporary directory',
+  healthService: 'Vision service',
+  statusOk: 'OK',
+  statusWarning: 'Warning',
+  statusError: 'Error',
+  statusNotTested: 'Not tested',
+  positiveInteger: '{field} must be a positive integer.',
+  healthPythonDetail: '{version} via {path}',
+  healthChromeMissing: 'Chrome, Chromium, or Edge was not found; HTML Screenshot is unavailable.',
+  healthChromeProbeFailed: 'Could not check whether a supported browser is available.',
+  healthCredentialMissing: 'Credential {credential} is not configured.',
+  healthCredentialReady: 'Credential {credential} is available.',
+  healthCredentialFailed: 'Could not read credential {credential}.',
+  healthDirectoryWritable: '{directory} is writable: {path}',
+  healthDirectoryNotWritable: '{directory} is not writable: {path}',
+  healthArtifactDirectoryFailed: 'Could not prepare the artifact directory.',
+  healthConnectionNotTested: 'Connection not tested. Use Test connection to query /models.',
+  healthConnectionCredentialMissing: 'Connection test skipped because the credential is unavailable.',
+  healthServiceResponded: 'Service responded at {endpoint} (HTTP {status}).',
+  healthServiceRejectedCredential: 'Service rejected the configured credential (HTTP {status}).',
+  healthServiceNoModels: 'Service is reachable but does not support GET /models (HTTP {status}).',
+  healthServiceRateLimited: 'Service is reachable, but the connection test was rate-limited (HTTP 429).',
+  healthServiceHttpFailed: 'Connection test failed with HTTP {status}.',
+  healthServiceUnreachable: 'Could not reach {endpoint}.',
 } as const
 
 type LocaleKey = keyof typeof en
 
 const zh: Record<LocaleKey, string> = {
   nav: '视觉工具',
-  settingsTitle: 'Vision Toolkit',
-  settingsIntro: '配置固定版本的视觉工程运行时、外部视觉服务与本地安全限制。',
-  externalNotice: '远程工具会把选中的图片字节发送到已配置的外部视觉 API。本地裁剪、几何恢复、像素对比、调色板、前景提取和 HTML 渲染不会上传图片。',
-  provider: '视觉服务',
-  baseUrl: '服务地址',
-  credential: 'Credential 引用',
-  model: '模型',
-  language: '输出语言',
-  limits: '限制',
-  timeout: '请求超时（毫秒）',
-  maxBytes: '最大图片字节数',
-  maxPixels: '最大图片像素数',
-  concurrency: '每个 Session 并发数',
-  runtime: '运行时',
-  runtimeMode: '运行模式',
-  toolkitPath: '固定上游 checkout 路径',
-  python: 'Python 覆盖',
-  allowedDirs: '额外允许目录',
-  allowedDirsHint: '每行一个路径；Session 工作区始终允许。',
-  save: '保存并应用',
-  saving: '正在验证运行时…',
+  settingsTitle: '视觉工具箱',
+  settingsIntro: '在这里设置视觉模型服务、工具运行环境，以及图片和文件的本地访问范围。',
+  externalNotice: '使用图像理解、目标定位、界面检测或文字识别等在线功能时，所选图片会发送到下方配置的视觉服务。图片裁剪、轮廓描摹、像素对比、主色提取、前景提取和网页截图均在本机完成，不会上传图片。',
+  provider: '在线视觉服务',
+  providerHint: '选择接口协议后，填写在线视觉功能使用的 API 地址、模型名称和 API 密钥。',
+  baseUrl: 'API 地址',
+  apiKey: 'API 密钥',
+  apiKeyPlaceholderMissing: '粘贴 API 密钥',
+  apiKeyPlaceholderConfigured: '已保存；留空表示不修改',
+  apiKeyHint: '密钥会保存到 DSH 凭据存储，保存后不会在页面中回显。',
+  apiKeyLocked: '当前密钥来自只读配置，无法在此替换。',
+  apiKeyBlank: 'API 密钥不能只包含空格。',
+  apiKeyInvalid: '请只粘贴密钥本身，不要包含变量名、引号、空格或换行。',
+  credential: '凭据名称',
+  credentialHint: '高级用法：API 密钥会按此名称保存。除非其他插件配置要求不同名称，否则保持 VISION_API_KEY。',
+  model: '模型名称',
+  protocol: 'API 协议',
+  anthropicThinking: 'Anthropic thinking',
+  anthropicThinkingHint: 'omit 兼容性最好。仅当所选模型明确支持时使用 disabled 或 adaptive；遇到 HTTP 400 时先恢复 omit。',
+  userAgent: 'User-Agent',
+  language: '结果语言',
+  limits: '资源与并发限制',
+  timeout: '单次请求超时（毫秒）',
+  maxBytes: '单张图片大小上限（字节）',
+  maxPixels: '单张图片最大像素数',
+  concurrency: '单个会话最多并发任务数',
+  runtime: '工具运行环境',
+  runtimeMode: '环境来源',
+  toolkitPath: 'agent-vision-toolkit 目录',
+  python: 'Python 解释器（可选）',
+  allowedDirs: '允许读取的其他目录',
+  allowedDirsHint: '每行填写一个目录。当前会话的工作目录始终可以读取，无需重复填写。',
+  save: '保存设置',
+  saving: '正在检查并应用…',
   reload: '重新加载',
-  saved: '设置已验证并生效。',
-  readOnly: '当前 Settings 提供方为只读。',
-  configured: '已配置',
-  missing: '缺失',
-  source: '来源',
-  health: '健康检查',
-  runHealth: '运行健康检查',
-  testConnection: '测试连接',
+  saved: '设置已保存并生效。',
+  readOnly: '服务设置来自只读配置；如果 API 密钥可写，仍可在此保存密钥。',
+  configured: '已就绪',
+  missing: '未配置',
+  source: '配置来源',
+  sourceHint: '{source}：{value}',
+  sourceEnv: '环境变量',
+  sourceFile: '凭据文件',
+  health: '运行检查',
+  runHealth: '检查本地环境',
+  testConnection: '测试服务连接',
   testing: '检查中…',
-  connectionHint: '连接测试会显式把已配置 Credential 发送到 GET /models；不会上传图片，也不会创建 completion。',
-  pluginVersion: '插件',
-  upstreamVersion: '上游',
-  activeGeneration: '运行时世代',
-  runtimeUnavailable: '运行时不可用',
-  runtimeCandidateRejected: '最近的运行时候选已被拒绝；当前世代仍可用。',
+  connectionHint: '“检查本地环境”只检查本机依赖和目录；“测试服务连接”会携带已配置的 API 密钥请求 /models，但不会上传图片或调用模型。',
+  saveBeforeTesting: '修改服务配置后，请先保存，再测试连接。',
+  advanced: '高级设置',
+  advancedHint: '凭据名称、服务兼容参数、结果语言、资源限制、运行环境来源、Python 和额外可读目录。一般无需修改。',
+  pluginVersion: '插件版本',
+  upstreamVersion: '工具包版本',
+  activeGeneration: '本次运行已应用',
+  activeGenerationValue: '{generation} 次',
+  pluginKind: 'DSH 原生插件',
+  runtimeUnavailable: '运行环境尚未就绪',
+  runtimeCandidateRejected: '新设置未能生效，仍在使用上一次可用的设置。',
+  runtimeReady: '已就绪',
+  runtimeManaged: '自动安装',
+  runtimeExternal: '本地源码',
   retry: '重试',
-  open: '打开文件',
+  open: '在工作区中打开',
   download: '下载',
-  previewUnavailable: '当前宿主不提供 HTTP 预览，请使用“打开文件”。',
+  previewUnavailable: '此页面无法直接预览该文件，请在工作区中打开。',
   running: '运行中…',
-  failed: '失败',
-  matches: '个匹配',
+  failed: '运行失败',
+  matches: '处匹配',
   elements: '个元素',
-  dimensions: '尺寸',
+  dimensions: '图片尺寸',
   coordinates: '坐标',
-  artifact: '交付文件',
-  artifacts: '交付文件',
-  difference: '总体差异',
-  worstRegions: '差异最大区域',
-  colors: '主色',
-  noResult: '结构化结果不可用，请检查原始 Tool 结果。',
-  healthy: '健康',
-  degraded: '需要处理',
-  notTested: '未测试',
+  artifact: '生成文件',
+  artifacts: '个生成文件',
+  difference: '像素差异',
+  worstRegions: '差异最大的区域',
+  colors: '种颜色',
+  noResult: '未能读取结果，请查看工具的原始输出。',
+  healthy: '一切正常',
+  degraded: '有项目需要处理',
+  notTested: '尚未检查',
+  groundTitle: '目标定位',
+  detectTitle: '界面元素识别',
+  traceTitle: '描摹为 SVG',
+  pixelDiffTitle: '像素对比',
+  cropTitle: '裁剪图片',
+  longOcrTitle: '长图文字识别',
+  extractForegroundTitle: '提取前景',
+  htmlScreenshotTitle: '网页截图',
+  artifactTitle: '视觉处理结果',
+  dominantColorsTitle: '主色提取',
+  artifactGroundPreview: '目标定位框预览',
+  artifactDetectPreview: '界面元素标注预览',
+  artifactCrop: '裁剪后的图片',
+  artifactTrace: '描摹得到的矢量图',
+  artifactDiffHeatmap: '像素差异热力图',
+  artifactDiffReport: '像素差异详细报告',
+  artifactLongManifest: '长图切分与合并记录',
+  artifactLongTranscript: '长图文字识别结果',
+  artifactLongAudit: '长图分块边界检查记录',
+  artifactLongChunk: '长图文字识别分块 {index}',
+  artifactOcrSidecar: '分块 {index} 的文字识别记录',
+  artifactForeground: '提取后的透明背景前景图',
+  artifactHtmlScreenshot: '本地网页截图',
+  label: '名称',
+  paths: '条路径',
+  healthPython: 'Python',
+  healthDependencies: 'Python 依赖',
+  healthChrome: '浏览器',
+  healthCredential: 'API 密钥',
+  healthArtifactDirectory: '输出目录',
+  healthTempDirectory: '临时目录',
+  healthService: '视觉服务',
+  statusOk: '正常',
+  statusWarning: '注意',
+  statusError: '异常',
+  statusNotTested: '未检查',
+  positiveInteger: '{field}必须填写正整数。',
+  healthPythonDetail: '版本 {version}；解释器：{path}',
+  healthChromeMissing: '未找到 Chrome、Chromium 或 Edge，网页截图功能暂不可用。',
+  healthChromeProbeFailed: '无法检查浏览器是否可用。',
+  healthCredentialMissing: '尚未配置凭据 {credential}。',
+  healthCredentialReady: '已找到凭据 {credential}。',
+  healthCredentialFailed: '无法读取凭据 {credential}。',
+  healthDirectoryWritable: '{directory}可写：{path}',
+  healthDirectoryNotWritable: '{directory}不可写：{path}',
+  healthArtifactDirectoryFailed: '无法准备输出目录。',
+  healthConnectionNotTested: '尚未测试服务连接。点击“测试服务连接”可请求 /models。',
+  healthConnectionCredentialMissing: 'API 密钥不可用，未执行连接测试。',
+  healthServiceResponded: '服务已响应：{endpoint}（HTTP {status}）。',
+  healthServiceRejectedCredential: '服务拒绝了当前 API 密钥（HTTP {status}）。',
+  healthServiceNoModels: '服务可以访问，但不支持 GET /models（HTTP {status}）。',
+  healthServiceRateLimited: '服务可以访问，但本次连接测试触发了限流（HTTP 429）。',
+  healthServiceHttpFailed: '连接测试失败（HTTP {status}）。',
+  healthServiceUnreachable: '无法连接到 {endpoint}。',
 }
 
-type Translate = (key: LocaleKey) => string
+type Translate = (key: LocaleKey, params?: Record<string, unknown>) => string
 
 interface ToolCallOwnerProps {
   callId: string
@@ -202,7 +359,14 @@ interface HealthResult {
 }
 
 interface SettingsValue {
-  provider?: { baseUrl?: string; credential?: string; model?: string }
+  provider?: {
+    baseUrl?: string
+    credential?: string
+    model?: string
+    protocol?: 'openai' | 'anthropic'
+    anthropicThinking?: 'omit' | 'disabled' | 'adaptive'
+    userAgent?: string
+  }
   language?: 'zh' | 'en'
   timeoutMs?: number
   maxImageBytes?: number
@@ -404,17 +568,18 @@ function ArtifactPreview({ artifact, grant, openFile, t }: {
   t: Translate
 }) {
   const canPreview = grant !== undefined && (artifact.kind === 'image' || artifact.kind === 'svg')
+  const description = artifactDescription(artifact.description, t)
   return (
     <article className="dvt-artifact">
       {canPreview
         ? artifact.kind === 'svg'
-          ? <iframe className="dvt-preview dvt-svg" sandbox="" src={grant.previewUrl} title={artifact.description} />
-          : <img className="dvt-preview" src={grant.previewUrl} alt={artifact.description} loading="lazy" />
+          ? <iframe className="dvt-preview dvt-svg" sandbox="" src={grant.previewUrl} title={description} />
+          : <img className="dvt-preview" src={grant.previewUrl} alt={description} loading="lazy" />
         : null}
       <div className="dvt-artifact-meta">
         <div>
           <strong>{artifact.filename}</strong>
-          <span>{artifact.description}</span>
+          <span>{description}</span>
           <small>{artifact.mimeType} · {formatBytes(artifact.bytes)}</small>
         </div>
         <ArtifactActions artifact={artifact} grant={grant} openFile={openFile} t={t} />
@@ -424,18 +589,51 @@ function ArtifactPreview({ artifact, grant, openFile, t }: {
   )
 }
 
+const ARTIFACT_DESCRIPTION_KEYS: Record<string, LocaleKey> = {
+  'Grounding bounding-box preview': 'artifactGroundPreview',
+  'Detected-element bounding-box preview': 'artifactDetectPreview',
+  'Cropped image region': 'artifactCrop',
+  'Traced vector geometry': 'artifactTrace',
+  'Pixel-difference heatmap': 'artifactDiffHeatmap',
+  'Structured pixel-difference report': 'artifactDiffReport',
+  'Long-screenshot split and merge manifest': 'artifactLongManifest',
+  'Merged long-screenshot OCR transcript': 'artifactLongTranscript',
+  'Long-screenshot OCR boundary audit': 'artifactLongAudit',
+  'Extracted transparent foreground': 'artifactForeground',
+  'Headless browser screenshot of local HTML': 'artifactHtmlScreenshot',
+}
+
+function artifactDescription(description: string, t: Translate): string {
+  const key = ARTIFACT_DESCRIPTION_KEYS[description]
+  if (key !== undefined) {
+    const translated = t(key)
+    return translated === key ? description : translated
+  }
+  let match = /^Long-screenshot OCR chunk (\d+)$/u.exec(description)
+  if (match !== null) {
+    const translated = t('artifactLongChunk', { index: match[1] })
+    return translated === 'artifactLongChunk' ? description : translated
+  }
+  match = /^OCR sidecar for chunk (\d+)$/u.exec(description)
+  if (match !== null) {
+    const translated = t('artifactOcrSidecar', { index: match[1] })
+    return translated === 'artifactOcrSidecar' ? description : translated
+  }
+  return description
+}
+
 type ViewProps = ToolCallViewProps & { t?: Translate }
 
 function GroundView({ block, openFile, t = key => en[key] }: ViewProps) {
   const value = decodeVisionResult(block)
   const matches = Array.isArray(value?.matches) ? value.matches.filter(isRecord) : []
-  const target = stringOf(value?.target) ?? 'Ground'
+  const target = stringOf(value?.target) ?? t('groundTitle')
   const width = numberOf(value?.imageWidth)
   const height = numberOf(value?.imageHeight)
   const preview = artifactFrom(value?.preview)
   const grants = accessMap(value)
   return (
-    <ToolShell block={block} title="Ground" summary={matches.length > 0 ? `${target} · ${matches.length} ${t('matches')}` : target} icon={<VisionIcon kind="target" />} t={t}>
+    <ToolShell block={block} title={t('groundTitle')} summary={matches.length > 0 ? `${target} · ${matches.length} ${t('matches')}` : target} icon={<VisionIcon kind="target" />} t={t}>
       {value === undefined ? <p className="dvt-muted">{t('noResult')}</p> : (
         <div className="dvt-stack">
           <div className="dvt-metrics">
@@ -460,14 +658,14 @@ function DetectView({ block, openFile, t = key => en[key] }: ViewProps) {
   const preview = artifactFrom(value?.preview)
   const grants = accessMap(value)
   return (
-    <ToolShell block={block} title="Detect" summary={`${elements.length} ${t('elements')}`} icon={<VisionIcon kind="layers" />} t={t}>
+    <ToolShell block={block} title={t('detectTitle')} summary={`${elements.length} ${t('elements')}`} icon={<VisionIcon kind="layers" />} t={t}>
       {value === undefined ? <p className="dvt-muted">{t('noResult')}</p> : (
         <div className="dvt-stack">
           <div className="dvt-metrics">
             <div><span>{t('dimensions')}</span><strong>{width ?? '—'} × {height ?? '—'}</strong></div>
             <div><span>{t('elements')}</span><strong>{elements.length}</strong></div>
           </div>
-          <div className="dvt-table-wrap"><table className="dvt-table"><thead><tr><th>#</th><th>Label</th><th>{t('coordinates')}</th></tr></thead><tbody>
+          <div className="dvt-table-wrap"><table className="dvt-table"><thead><tr><th>#</th><th>{t('label')}</th><th>{t('coordinates')}</th></tr></thead><tbody>
             {elements.map((element, index) => <tr key={index}><td>{numberOf(element.index) ?? index + 1}</td><td>{stringOf(element.label) ?? '—'}</td><td><code>{boxText(element.box)}</code></td></tr>)}
           </tbody></table></div>
           {preview === undefined ? null : <ArtifactPreview artifact={preview} grant={grants.get(preview.path)} openFile={openFile} t={t} />}
@@ -481,10 +679,10 @@ function TraceView({ block, openFile, t = key => en[key] }: ViewProps) {
   const value = decodeVisionResult(block)
   const artifact = artifactFrom(value?.artifact)
   const geometry = isRecord(value?.geometry) ? value.geometry : undefined
-  const summary = geometry === undefined ? undefined : `${numberOf(geometry.pathCount) ?? 0} paths · ${formatBytes(numberOf(geometry.bytes) ?? 0)}`
+  const summary = geometry === undefined ? undefined : `${numberOf(geometry.pathCount) ?? 0} ${t('paths')} · ${formatBytes(numberOf(geometry.bytes) ?? 0)}`
   const grants = accessMap(value)
   return (
-    <ToolShell block={block} title="Trace SVG" summary={summary} icon={<VisionIcon kind="shape" />} t={t}>
+    <ToolShell block={block} title={t('traceTitle')} summary={summary} icon={<VisionIcon kind="shape" />} t={t}>
       {artifact === undefined ? <p className="dvt-muted">{t('noResult')}</p> : <ArtifactPreview artifact={artifact} grant={grants.get(artifact.path)} openFile={openFile} t={t} />}
     </ToolShell>
   )
@@ -498,7 +696,7 @@ function PixelDiffView({ block, openFile, t = key => en[key] }: ViewProps) {
   const report = artifactFrom(value?.report)
   const grants = accessMap(value)
   return (
-    <ToolShell block={block} title="Pixel Diff" summary={pct === undefined ? undefined : `${pct.toFixed(3)}%`} icon={<VisionIcon kind="diff" />} t={t}>
+    <ToolShell block={block} title={t('pixelDiffTitle')} summary={pct === undefined ? undefined : `${pct.toFixed(3)}%`} icon={<VisionIcon kind="diff" />} t={t}>
       {value === undefined ? <p className="dvt-muted">{t('noResult')}</p> : (
         <div className="dvt-stack">
           <div className="dvt-diff-score"><span>{t('difference')}</span><strong>{pct?.toFixed(4) ?? '—'}%</strong><div><i style={{ width: `${Math.min(100, Math.max(0, pct ?? 0))}%` }} /></div></div>
@@ -515,11 +713,11 @@ function ArtifactView({ block, openFile, toolName, t = key => en[key] }: ViewPro
   const value = decodeVisionResult(block)
   const artifacts = collectArtifacts(value)
   const grants = accessMap(value)
-  const title = toolName === 'vision_crop' ? 'Crop'
-    : toolName === 'vision_long_screenshot_ocr' ? 'Long OCR'
-      : toolName === 'vision_extract_foreground' ? 'Extract Foreground'
-        : toolName === 'vision_html_screenshot' ? 'HTML Screenshot'
-          : 'Vision Artifact'
+  const title = toolName === 'vision_crop' ? t('cropTitle')
+    : toolName === 'vision_long_screenshot_ocr' ? t('longOcrTitle')
+      : toolName === 'vision_extract_foreground' ? t('extractForegroundTitle')
+        : toolName === 'vision_html_screenshot' ? t('htmlScreenshotTitle')
+          : t('artifactTitle')
   return (
     <ToolShell block={block} title={title} summary={artifacts.length > 0 ? `${artifacts.length} ${t('artifacts')}` : undefined} icon={<VisionIcon />} t={t}>
       {artifacts.length === 0 ? <p className="dvt-muted">{t('noResult')}</p> : <div className="dvt-stack">{artifacts.map(artifact => <ArtifactPreview key={artifact.path} artifact={artifact} grant={grants.get(artifact.path)} openFile={openFile} t={t} />)}</div>}
@@ -532,7 +730,7 @@ function PaletteView({ block, t = key => en[key] }: ViewProps) {
   const analysis = isRecord(value?.analysis) ? value.analysis : undefined
   const colors = Array.isArray(analysis?.colors) ? analysis.colors.filter(isRecord) : []
   return (
-    <ToolShell block={block} title="Dominant Colors" summary={`${colors.length} ${t('colors')}`} icon={<VisionIcon kind="palette" />} t={t}>
+    <ToolShell block={block} title={t('dominantColorsTitle')} summary={`${colors.length} ${t('colors')}`} icon={<VisionIcon kind="palette" />} t={t}>
       {colors.length === 0 ? <p className="dvt-muted">{t('noResult')}</p> : <div className="dvt-palette">{colors.map((color, index) => {
         const hex = stringOf(color.color) ?? '#000000'
         const share = numberOf(color.sharePct)
@@ -597,17 +795,50 @@ export class VisionSettingsController {
     void this.load()
   }
 
-  async save(value: SettingsValue, expectedRevision: number): Promise<void> {
+  async save(
+    value: SettingsValue,
+    expectedRevision: number,
+    credentialValue: string | undefined,
+    writeSettings: boolean,
+  ): Promise<boolean> {
     this.set({ ...this.state, action: 'save', error: undefined, message: undefined })
+    let snapshot = this.state.snapshot
     try {
-      const snapshot = await apiRequest<SettingsSnapshot>({
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action: 'save', expectedRevision, value }),
-      })
+      if (writeSettings) {
+        snapshot = await apiRequest<SettingsSnapshot>({
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ action: 'save', expectedRevision, value }),
+        })
+      }
+      if (snapshot === undefined) throw new Error('Vision Toolkit Settings are unavailable')
+      if (credentialValue !== undefined) {
+        try {
+          snapshot = await apiRequest<SettingsSnapshot>({
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              action: 'credential',
+              expectedRevision: snapshot.settings.revision,
+              ref: snapshot.credential.ref,
+              value: credentialValue,
+            }),
+          })
+        } catch (error) {
+          this.set({
+            status: 'ready',
+            snapshot,
+            health: this.state.health,
+            error: error instanceof Error ? error.message : String(error),
+          })
+          return false
+        }
+      }
       this.set({ status: 'ready', snapshot, health: this.state.health, message: 'saved' })
+      return true
     } catch (error) {
       this.set({ ...this.state, action: undefined, error: error instanceof Error ? error.message : String(error) })
+      return false
     }
   }
 
@@ -630,6 +861,9 @@ interface Draft {
   baseUrl: string
   credential: string
   model: string
+  protocol: 'openai' | 'anthropic'
+  anthropicThinking: 'omit' | 'disabled' | 'adaptive'
+  userAgent: string
   language: 'zh' | 'en'
   timeoutMs: string
   maxImageBytes: string
@@ -646,6 +880,9 @@ function draftOf(value: SettingsValue): Draft {
     baseUrl: value.provider?.baseUrl ?? 'https://api.inferera.com/v1',
     credential: value.provider?.credential ?? 'VISION_API_KEY',
     model: value.provider?.model ?? 'gemini-3.6-flash',
+    protocol: value.provider?.protocol ?? 'openai',
+    anthropicThinking: value.provider?.anthropicThinking ?? 'omit',
+    userAgent: value.provider?.userAgent ?? DEFAULT_USER_AGENT,
     language: value.language ?? 'zh',
     timeoutMs: String(value.timeoutMs ?? 60000),
     maxImageBytes: String(value.maxImageBytes ?? 10485760),
@@ -658,20 +895,37 @@ function draftOf(value: SettingsValue): Draft {
   }
 }
 
-function positiveInteger(raw: string, label: string): number {
+function positiveInteger(raw: string, label: string, t: Translate): number {
   const value = Number(raw)
-  if (!Number.isSafeInteger(value) || value <= 0) throw new Error(`${label} must be a positive integer`)
+  if (!Number.isSafeInteger(value) || value <= 0) throw new Error(t('positiveInteger', { field: label }))
   return value
 }
 
-function valueOf(draft: Draft): SettingsValue {
+function apiKeyFailure(value: string, t: Translate): string | undefined {
+  if (value.length === 0) return undefined
+  const trimmed = value.trim()
+  if (trimmed.length === 0) return t('apiKeyBlank')
+  const quoted = trimmed.length > 1 && ['"', '\'', '`'].includes(trimmed[0] ?? '') && trimmed.endsWith(trimmed[0] ?? '')
+  const environmentLine = /^[A-Z][A-Z0-9_]*=[^=]/u.test(trimmed)
+  if (quoted || environmentLine || !/^[\x21-\x7E]+$/u.test(trimmed)) return t('apiKeyInvalid')
+  return undefined
+}
+
+function valueOf(draft: Draft, t: Translate): SettingsValue {
   return {
-    provider: { baseUrl: draft.baseUrl.trim(), credential: draft.credential.trim(), model: draft.model.trim() },
+    provider: {
+      baseUrl: draft.baseUrl.trim(),
+      credential: draft.credential.trim(),
+      model: draft.model.trim(),
+      protocol: draft.protocol,
+      anthropicThinking: draft.anthropicThinking,
+      userAgent: draft.userAgent.trim(),
+    },
     language: draft.language,
-    timeoutMs: positiveInteger(draft.timeoutMs, 'timeoutMs'),
-    maxImageBytes: positiveInteger(draft.maxImageBytes, 'maxImageBytes'),
-    maxImagePixels: positiveInteger(draft.maxImagePixels, 'maxImagePixels'),
-    concurrency: positiveInteger(draft.concurrency, 'concurrency'),
+    timeoutMs: positiveInteger(draft.timeoutMs, t('timeout'), t),
+    maxImageBytes: positiveInteger(draft.maxImageBytes, t('maxBytes'), t),
+    maxImagePixels: positiveInteger(draft.maxImagePixels, t('maxPixels'), t),
+    concurrency: positiveInteger(draft.concurrency, t('concurrency'), t),
     runtime: {
       mode: draft.runtimeMode,
       ...(draft.runtimeMode === 'external' ? { agentVisionToolkitPath: draft.toolkitPath.trim() } : {}),
@@ -697,10 +951,74 @@ function SettingsSection({ controller, t }: SettingsProps) {
   return <LoadedSettings controller={controller} t={t} />
 }
 
+const HEALTH_NAME_KEYS: Record<string, LocaleKey> = {
+  python: 'healthPython',
+  dependencies: 'healthDependencies',
+  chrome: 'healthChrome',
+  credential: 'healthCredential',
+  artifactDirectory: 'healthArtifactDirectory',
+  tempDirectory: 'healthTempDirectory',
+  service: 'healthService',
+}
+
+const HEALTH_STATUS_KEYS: Record<HealthCheck['status'], LocaleKey> = {
+  ok: 'statusOk',
+  warning: 'statusWarning',
+  error: 'statusError',
+  not_tested: 'statusNotTested',
+}
+
+function healthDetail(name: string, detail: string, t: Translate): string {
+  if (name === 'python') {
+    const match = /^(.+) via (.+)$/u.exec(detail)
+    if (match !== null) return t('healthPythonDetail', { version: match[1], path: match[2] })
+  }
+  if (detail === 'Chrome/Chromium/Edge was not found; vision_html_screenshot is unavailable') return t('healthChromeMissing')
+  if (detail === 'Chrome availability probe failed') return t('healthChromeProbeFailed')
+  let match = /^credential (.+) is not configured$/u.exec(detail)
+  if (match !== null) return t('healthCredentialMissing', { credential: match[1] })
+  match = /^credential (.+) is resolvable$/u.exec(detail)
+  if (match !== null) return t('healthCredentialReady', { credential: match[1] })
+  match = /^credential (.+) could not be resolved$/u.exec(detail)
+  if (match !== null) return t('healthCredentialFailed', { credential: match[1] })
+  match = /^(Artifact directory|Runtime temp directory) is writable: (.+)$/u.exec(detail)
+  if (match !== null) return t('healthDirectoryWritable', {
+    directory: match[1] === 'Artifact directory' ? t('healthArtifactDirectory') : t('healthTempDirectory'),
+    path: match[2],
+  })
+  match = /^(Artifact directory|Runtime temp directory) is not writable: (.+)$/u.exec(detail)
+  if (match !== null) return t('healthDirectoryNotWritable', {
+    directory: match[1] === 'Artifact directory' ? t('healthArtifactDirectory') : t('healthTempDirectory'),
+    path: match[2],
+  })
+  if (detail === 'Artifact directory could not be prepared') return t('healthArtifactDirectoryFailed')
+  if (detail === 'Connection was not tested; pass testConnection=true to query the configured /models endpoint') return t('healthConnectionNotTested')
+  if (detail === 'Connection test skipped because the configured credential is unavailable') return t('healthConnectionCredentialMissing')
+  match = /^Service responded at (.+) \(HTTP (\d+)\)$/u.exec(detail)
+  if (match !== null) return t('healthServiceResponded', { endpoint: match[1], status: match[2] })
+  match = /^Service rejected the configured credential \(HTTP (\d+)\)$/u.exec(detail)
+  if (match !== null) return t('healthServiceRejectedCredential', { status: match[1] })
+  match = /^Service is reachable but does not expose GET \/models \(HTTP (\d+)\)$/u.exec(detail)
+  if (match !== null) return t('healthServiceNoModels', { status: match[1] })
+  if (detail === 'Service is reachable but rate-limited the connection test (HTTP 429)') return t('healthServiceRateLimited')
+  match = /^Service connection test failed with HTTP (\d+)$/u.exec(detail)
+  if (match !== null) return t('healthServiceHttpFailed', { status: match[1] })
+  match = /^Service could not be reached at (.+)$/u.exec(detail)
+  if (match !== null) return t('healthServiceUnreachable', { endpoint: match[1] })
+  return detail
+}
+
+function credentialSource(source: string, t: Translate): string {
+  if (source === 'env') return t('sourceEnv')
+  if (source === 'file') return t('sourceFile')
+  return source
+}
+
 function LoadedSettings({ controller, t }: SettingsInjected) {
   const state = useSyncExternalStore(controller.subscribe, controller.snapshot, controller.snapshot)
   const snapshot = state.snapshot
   const [draft, setDraft] = useState<Draft | undefined>(undefined)
+  const [apiKey, setApiKey] = useState('')
   const [draftError, setDraftError] = useState<string | undefined>(undefined)
 
   useEffect(() => { if (state.status === 'idle') void controller.load() }, [controller, state.status])
@@ -718,21 +1036,31 @@ function LoadedSettings({ controller, t }: SettingsInjected) {
   const update = <K extends keyof Draft>(key: K, value: Draft[K]): void => setDraft(current => current === undefined ? current : { ...current, [key]: value })
   const save = (): void => {
     try {
+      const keyFailure = apiKeyFailure(apiKey, t)
+      if (keyFailure !== undefined) {
+        setDraftError(keyFailure)
+        return
+      }
+      const credentialValue = apiKey.length === 0 ? undefined : apiKey.trim()
       setDraftError(undefined)
-      void controller.save(valueOf(draft), snapshot.settings.revision)
+      void controller.save(
+        valueOf(draft, t),
+        snapshot.settings.revision,
+        credentialValue,
+        snapshot.writable,
+      ).then(saved => { if (saved) setApiKey('') })
     } catch (error) {
       setDraftError(error instanceof Error ? error.message : String(error))
     }
   }
   const busy = state.action !== undefined
+  const credentialMatchesSnapshot = draft.credential.trim() === snapshot.credential.ref
+  const keyLocked = credentialMatchesSnapshot && !snapshot.credential.writable
+  const canSave = snapshot.writable || (apiKey.length > 0 && !keyLocked)
   const runtimeErrorTitle = snapshot.runtime.ready ? t('runtimeCandidateRejected') : t('runtimeUnavailable')
 
   return (
     <div className="dvt-settings">
-      <header className="dvt-settings-header">
-        <div><span className="dvt-kicker">DSH native plugin</span><h2>{t('settingsTitle')}</h2><p>{t('settingsIntro')}</p></div>
-        <div className="dvt-release"><span>{t('pluginVersion')} <strong>{snapshot.release.pluginVersion}</strong></span><span>{t('upstreamVersion')} <strong>{snapshot.release.upstreamVersion}</strong></span><span>{t('activeGeneration')} <strong>{snapshot.runtime.generation}</strong></span></div>
-      </header>
       <div className="dvt-alert notice">{t('externalNotice')}</div>
       {!snapshot.writable ? <div className="dvt-alert warning">{t('readOnly')}</div> : null}
       {draftError === undefined ? null : <div className="dvt-alert error">{draftError}</div>}
@@ -740,36 +1068,55 @@ function LoadedSettings({ controller, t }: SettingsInjected) {
       {state.message === 'saved' ? <div className="dvt-alert success">{t('saved')}</div> : null}
       {snapshot.runtime.lastError === undefined ? null : <div className="dvt-alert error"><strong>{runtimeErrorTitle}</strong><span>{snapshot.runtime.lastError}</span></div>}
 
-      <section className="dvt-panel"><div className="dvt-panel-title"><h3>{t('provider')}</h3><span className={`dvt-badge ${snapshot.credential.configured ? 'ok' : 'error'}`}>{snapshot.credential.configured ? t('configured') : t('missing')}</span></div>
+      <section className="dvt-panel dvt-essential"><div className="dvt-panel-title"><div><h3>{t('provider')}</h3><p>{t('providerHint')}</p></div><span className={`dvt-badge ${snapshot.credential.configured ? 'ok' : 'error'}`}>{snapshot.credential.configured ? t('configured') : t('missing')}</span></div>
         <div className="dvt-form-grid">
-          <Field label={t('baseUrl')}><Input value={draft.baseUrl} onChange={(event) => { update('baseUrl', event.target.value) }} /></Field>
-          <Field label={t('model')}><Input value={draft.model} onChange={(event) => { update('model', event.target.value) }} /></Field>
-          <Field label={t('credential')} hint={snapshot.credential.source === undefined ? undefined : `${t('source')}: ${snapshot.credential.source}`}><Input value={draft.credential} onChange={(event) => { update('credential', event.target.value) }} /></Field>
-          <Field label={t('language')}><select value={draft.language} onChange={(event) => { update('language', event.target.value as 'zh' | 'en') }}><option value="zh">中文</option><option value="en">English</option></select></Field>
+          <Field label={t('protocol')}><select disabled={!snapshot.writable || busy} value={draft.protocol} onChange={(event) => { update('protocol', event.target.value as 'openai' | 'anthropic') }}><option value="openai">OpenAI Chat Completions</option><option value="anthropic">Anthropic Messages</option></select></Field>
+          <Field label={t('baseUrl')}><Input disabled={!snapshot.writable || busy} value={draft.baseUrl} onChange={(event) => { update('baseUrl', event.target.value) }} /></Field>
+          <Field label={t('model')}><Input disabled={!snapshot.writable || busy} value={draft.model} onChange={(event) => { update('model', event.target.value) }} /></Field>
+          <Field label={t('apiKey')} hint={keyLocked ? t('apiKeyLocked') : snapshot.credential.source === undefined ? t('apiKeyHint') : `${t('apiKeyHint')} ${t('sourceHint', { source: t('source'), value: credentialSource(snapshot.credential.source, t) })}`}><Input aria-label={t('apiKey')} type="password" autoComplete="new-password" disabled={busy || keyLocked} placeholder={snapshot.credential.configured ? t('apiKeyPlaceholderConfigured') : t('apiKeyPlaceholderMissing')} value={apiKey} onChange={(event) => { setApiKey(event.target.value); setDraftError(undefined) }} /></Field>
         </div>
       </section>
 
-      <section className="dvt-panel"><div className="dvt-panel-title"><h3>{t('limits')}</h3></div><div className="dvt-form-grid">
-        <Field label={t('timeout')}><Input inputMode="numeric" value={draft.timeoutMs} onChange={(event) => { update('timeoutMs', event.target.value) }} /></Field>
-        <Field label={t('maxBytes')}><Input inputMode="numeric" value={draft.maxImageBytes} onChange={(event) => { update('maxImageBytes', event.target.value) }} /></Field>
-        <Field label={t('maxPixels')}><Input inputMode="numeric" value={draft.maxImagePixels} onChange={(event) => { update('maxImagePixels', event.target.value) }} /></Field>
-        <Field label={t('concurrency')}><Input inputMode="numeric" value={draft.concurrency} onChange={(event) => { update('concurrency', event.target.value) }} /></Field>
-      </div></section>
-
-      <section className="dvt-panel"><div className="dvt-panel-title"><h3>{t('runtime')}</h3><span className={`dvt-badge ${snapshot.runtime.ready ? 'ok' : 'error'}`}>{snapshot.runtime.ready ? snapshot.runtime.upstream?.source ?? 'ready' : t('runtimeUnavailable')}</span></div><div className="dvt-form-grid">
-        <Field label={t('runtimeMode')}><select value={draft.runtimeMode} onChange={(event) => { update('runtimeMode', event.target.value as 'managed' | 'external') }}><option value="managed">managed</option><option value="external">external</option></select></Field>
-        {draft.runtimeMode === 'external' ? <Field label={t('toolkitPath')}><Input value={draft.toolkitPath} onChange={(event) => { update('toolkitPath', event.target.value) }} /></Field> : null}
-        <Field label={t('python')}><Input placeholder="python3" value={draft.python} onChange={(event) => { update('python', event.target.value) }} /></Field>
-        <Field label={t('allowedDirs')} hint={t('allowedDirsHint')}><textarea rows={3} value={draft.allowedDirs} onChange={(event) => { update('allowedDirs', event.target.value) }} /></Field>
-      </div>
-      {snapshot.runtime.upstream === undefined ? null : <div className="dvt-runtime-facts"><code>{snapshot.runtime.upstream.path}</code><code>{snapshot.runtime.upstream.python} · {snapshot.runtime.upstream.pythonVersion}</code><code>{snapshot.runtime.upstream.runtimeHome}</code></div>}
-      </section>
-
-      <div className="dvt-save-row"><Button variant="primary" disabled={!snapshot.writable || busy} onClick={save}>{state.action === 'save' ? t('saving') : t('save')}</Button><Button variant="outline" disabled={busy} onClick={() => { void controller.load() }}>{t('reload')}</Button></div>
+      <div className="dvt-save-row"><Button variant="primary" disabled={!canSave || busy} onClick={save}>{state.action === 'save' ? t('saving') : t('save')}</Button><Button variant="outline" disabled={busy} onClick={() => { void controller.load() }}>{t('reload')}</Button></div>
 
       <section className="dvt-panel"><div className="dvt-panel-title"><div><h3>{t('health')}</h3><p>{t('connectionHint')}</p></div><div className="dvt-actions"><Button size="sm" variant="outline" disabled={busy || !snapshot.runtime.ready} onClick={() => { void controller.runHealth(false) }}>{state.action === 'health' ? t('testing') : t('runHealth')}</Button><Button size="sm" variant="primary" disabled={busy || !snapshot.runtime.ready} onClick={() => { void controller.runHealth(true) }}>{state.action === 'connection' ? t('testing') : t('testConnection')}</Button></div></div>
-        {state.health === undefined ? <p className="dvt-muted">{t('notTested')}</p> : <div className="dvt-health-grid">{Object.entries(state.health.checks).map(([name, check]) => <div key={name} data-status={check.status}><span>{name}</span><strong>{check.status}</strong><p>{check.detail}</p></div>)}</div>}
+        <p className="dvt-muted">{t('saveBeforeTesting')}</p>
+        {state.health === undefined ? <p className="dvt-muted">{t('notTested')}</p> : <div className="dvt-health-grid">{Object.entries(state.health.checks).map(([name, check]) => <div key={name} data-status={check.status}><span>{t(HEALTH_NAME_KEYS[name] ?? 'health')}</span><strong>{t(HEALTH_STATUS_KEYS[check.status])}</strong><p>{healthDetail(name, check.detail, t)}</p></div>)}</div>}
       </section>
+
+      <details className="dvt-advanced">
+        <summary><span><strong>{t('advanced')}</strong><small>{t('advancedHint')}</small></span><span className="dvt-details-chevron" aria-hidden="true">⌄</span></summary>
+        <div className="dvt-advanced-body">
+          <section className="dvt-panel"><div className="dvt-panel-title"><h3>{t('provider')}</h3></div><div className="dvt-form-grid">
+            <Field label={t('credential')} hint={t('credentialHint')}><Input aria-label={t('credential')} disabled={!snapshot.writable || busy} value={draft.credential} onChange={(event) => { update('credential', event.target.value) }} /></Field>
+            {draft.protocol === 'anthropic' ? <Field label={t('anthropicThinking')} hint={t('anthropicThinkingHint')}><select aria-label={t('anthropicThinking')} value={draft.anthropicThinking} onChange={(event) => { update('anthropicThinking', event.target.value as 'omit' | 'disabled' | 'adaptive') }}><option value="omit">omit (widest compatibility)</option><option value="disabled">disabled (model support required)</option><option value="adaptive">adaptive (model support required)</option></select></Field> : null}
+            <Field label={t('userAgent')}><Input value={draft.userAgent} onChange={(event) => { update('userAgent', event.target.value) }} /></Field>
+          </div></section>
+
+          <section className="dvt-panel"><div className="dvt-panel-title"><h3>{t('limits')}</h3></div><div className="dvt-form-grid">
+            <Field label={t('language')}><select value={draft.language} onChange={(event) => { update('language', event.target.value as 'zh' | 'en') }}><option value="zh">中文</option><option value="en">English</option></select></Field>
+            <Field label={t('timeout')}><Input inputMode="numeric" value={draft.timeoutMs} onChange={(event) => { update('timeoutMs', event.target.value) }} /></Field>
+            <Field label={t('maxBytes')}><Input inputMode="numeric" value={draft.maxImageBytes} onChange={(event) => { update('maxImageBytes', event.target.value) }} /></Field>
+            <Field label={t('maxPixels')}><Input inputMode="numeric" value={draft.maxImagePixels} onChange={(event) => { update('maxImagePixels', event.target.value) }} /></Field>
+            <Field label={t('concurrency')}><Input inputMode="numeric" value={draft.concurrency} onChange={(event) => { update('concurrency', event.target.value) }} /></Field>
+          </div></section>
+
+          <section className="dvt-panel"><div className="dvt-panel-title"><h3>{t('runtime')}</h3><span className={`dvt-badge ${snapshot.runtime.ready ? 'ok' : 'error'}`}>{snapshot.runtime.ready ? snapshot.runtime.upstream?.source === 'managed' ? t('runtimeManaged') : snapshot.runtime.upstream?.source === 'external' ? t('runtimeExternal') : t('runtimeReady') : t('runtimeUnavailable')}</span></div><div className="dvt-form-grid">
+            <Field label={t('runtimeMode')}><select value={draft.runtimeMode} onChange={(event) => { update('runtimeMode', event.target.value as 'managed' | 'external') }}><option value="managed">{t('runtimeManaged')}</option><option value="external">{t('runtimeExternal')}</option></select></Field>
+            {draft.runtimeMode === 'external' ? <Field label={t('toolkitPath')}><Input value={draft.toolkitPath} onChange={(event) => { update('toolkitPath', event.target.value) }} /></Field> : null}
+            <Field label={t('python')}><Input placeholder="python3" value={draft.python} onChange={(event) => { update('python', event.target.value) }} /></Field>
+            <Field label={t('allowedDirs')} hint={t('allowedDirsHint')}><textarea rows={3} value={draft.allowedDirs} onChange={(event) => { update('allowedDirs', event.target.value) }} /></Field>
+          </div>
+          {snapshot.runtime.upstream === undefined ? null : <div className="dvt-runtime-facts"><code>{snapshot.runtime.upstream.path}</code><code>{snapshot.runtime.upstream.python} · {snapshot.runtime.upstream.pythonVersion}</code><code>{snapshot.runtime.upstream.runtimeHome}</code></div>}
+          </section>
+
+        </div>
+      </details>
+
+      <footer className="dvt-settings-footer">
+        <div><span className="dvt-kicker">{t('pluginKind')}</span><h2>{t('settingsTitle')}</h2><p>{t('settingsIntro')}</p></div>
+        <div className="dvt-release"><span>{t('pluginVersion')} <strong>{snapshot.release.pluginVersion}</strong></span><span>{t('upstreamVersion')} <strong>{snapshot.release.upstreamVersion}</strong></span><span>{t('activeGeneration')} <strong>{t('activeGenerationValue', { generation: snapshot.runtime.generation })}</strong></span></div>
+      </footer>
     </div>
   )
 }
@@ -779,10 +1126,11 @@ const CSS = `
 .dvt-tool-head{width:100%;min-height:38px;display:flex;align-items:center;gap:7px;padding:8px 10px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit}.dvt-tool-head:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:-2px}.dvt-tool-icon{width:20px;height:20px;display:grid;place-items:center;border-radius:6px;color:var(--dsw-alias-state-business-primary);background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 12%,transparent);flex:none}.dvt-tool-title{font-size:12px;font-weight:650;white-space:nowrap}.dvt-tool-sep{opacity:.35}.dvt-tool-summary{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--dsw-alias-label-secondary)}.dvt-tool-status{margin-left:auto;font-size:11px;color:var(--dsw-alias-label-secondary);max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dvt-tool[data-state=error] .dvt-tool-status{color:var(--dsw-alias-state-error-primary)}.dvt-chevron{margin-left:auto;transition:transform .16s ease;opacity:.55}.dvt-chevron[data-open=true]{transform:rotate(180deg)}.dvt-tool-body{padding:0 10px 10px}.dvt-stack{display:grid;gap:10px}.dvt-muted{margin:0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:1.5}
 .dvt-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dvt-metrics>div,.dvt-diff-score{padding:10px;border-radius:9px;background:var(--dsw-alias-bg-layer-2);display:grid;gap:4px}.dvt-metrics span,.dvt-diff-score span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--dsw-alias-label-secondary)}.dvt-metrics strong,.dvt-diff-score strong{font-size:13px}.dvt-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:160px;overflow:auto}.dvt-list li{display:flex;justify-content:space-between;gap:12px;padding:6px 8px;border-radius:7px;background:var(--dsw-alias-bg-layer-2);font-size:11px}.dvt-list code{color:var(--dsw-alias-state-business-primary)}.dvt-table-wrap{max-height:220px;overflow:auto;border:1px solid var(--dsw-alias-border-l1);border-radius:9px}.dvt-table{width:100%;border-collapse:collapse;font-size:11px}.dvt-table th,.dvt-table td{padding:7px 8px;text-align:left;border-bottom:1px solid var(--dsw-alias-border-l1)}.dvt-table th{position:sticky;top:0;background:var(--dsw-alias-bg-layer-2);font-size:10px;text-transform:uppercase;letter-spacing:.05em}.dvt-table tr:last-child td{border-bottom:0}
 .dvt-artifact{border:1px solid var(--dsw-alias-border-l1);border-radius:10px;overflow:hidden;background:var(--dsw-alias-bg-layer-1)}.dvt-preview{display:block;width:100%;max-height:360px;object-fit:contain;background:repeating-conic-gradient(var(--dsw-alias-bg-module-platform) 0 25%,var(--dsw-alias-bg-layer-1) 0 50%) 50%/18px 18px;border:0}.dvt-svg{height:280px}.dvt-artifact-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px}.dvt-artifact-meta>div:first-child{min-width:0;display:grid;gap:2px}.dvt-artifact-meta strong{font-size:12px;overflow:hidden;text-overflow:ellipsis}.dvt-artifact-meta span,.dvt-artifact-meta small{font-size:10px;color:var(--dsw-alias-label-secondary)}.dvt-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.dvt-download{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--dsw-alias-button-primary-fill);color:var(--dsw-alias-label-primary-foreground);text-decoration:none;font-size:12px;font-weight:600}.dvt-download:hover{background:var(--dsw-alias-button-primary-hover)}.dvt-download:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px}.dvt-artifact>.dvt-muted{padding:0 10px 10px}.dvt-diff-score>div{height:5px;border-radius:99px;background:var(--dsw-alias-border-l2);overflow:hidden}.dvt-diff-score i{display:block;height:100%;min-width:2px;background:linear-gradient(90deg,var(--dsw-alias-state-warn-primary),var(--dsw-alias-state-error-primary));border-radius:99px}.dvt-tool h4{font-size:11px;margin:0 0 6px}.dvt-palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:7px}.dvt-palette>div{display:flex;align-items:center;gap:8px;padding:7px;border:1px solid var(--dsw-alias-border-l1);border-radius:9px}.dvt-palette i{width:28px;height:28px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--dsw-alias-border-l2)}.dvt-palette span{display:grid}.dvt-palette strong{font-size:11px}.dvt-palette small{font-size:10px;color:var(--dsw-alias-label-secondary)}
-.dvt-settings{display:grid;gap:14px;max-width:900px;padding:8px 2px 32px;color:var(--dsw-alias-label-primary)}.dvt-settings-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:8px 2px}.dvt-settings-header h2{font-size:25px;letter-spacing:-.025em;margin:3px 0 6px}.dvt-settings-header p{max-width:620px;margin:0;color:var(--dsw-alias-label-secondary);font-size:13px;line-height:1.55}.dvt-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--dsw-alias-state-business-primary);font-weight:700}.dvt-release{display:grid;gap:4px;min-width:170px;padding:9px 11px;border-radius:10px;background:var(--dsw-alias-bg-layer-2);font-size:10px;color:var(--dsw-alias-label-secondary)}.dvt-release span{display:flex;justify-content:space-between;gap:12px}.dvt-release strong{color:var(--dsw-alias-label-primary)}.dvt-alert{padding:10px 12px;border-radius:10px;font-size:12px;line-height:1.5;display:grid;gap:3px}.dvt-alert.notice{background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 10%,transparent);color:var(--dsw-alias-state-business-primary)}.dvt-alert.warning{background:color-mix(in srgb,var(--dsw-alias-state-warn-primary) 12%,transparent);color:var(--dsw-alias-state-warn-label)}.dvt-alert.error{background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 10%,transparent);color:var(--dsw-alias-state-error-primary)}.dvt-alert.success{background:color-mix(in srgb,var(--dsw-alias-state-success-primary) 10%,transparent);color:var(--dsw-alias-state-success-primary)}.dvt-panel{display:grid;gap:12px;padding:15px;border:1px solid var(--dsw-alias-border-l1);border-radius:14px;background:var(--dsw-alias-bg-layer-1);box-shadow:var(--dsw-shadow-lv1)}.dvt-panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dvt-panel-title h3{font-size:14px;margin:0}.dvt-panel-title p{font-size:11px;line-height:1.45;color:var(--dsw-alias-label-secondary);margin:4px 0 0;max-width:620px}.dvt-badge{font-size:10px;padding:3px 7px;border-radius:999px;font-weight:650}.dvt-badge.ok{background:color-mix(in srgb,var(--dsw-alias-state-success-primary) 12%,transparent);color:var(--dsw-alias-state-success-primary)}.dvt-badge.error{background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 10%,transparent);color:var(--dsw-alias-state-error-primary)}.dvt-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.dvt-field{display:grid;gap:6px;align-content:start}.dvt-field>span{font-size:11px;font-weight:600}.dvt-field>small{font-size:10px;color:var(--dsw-alias-label-secondary);line-height:1.4}.dvt-field select,.dvt-field textarea{width:100%;box-sizing:border-box;border:1px solid var(--dsw-alias-border-l1);border-radius:9px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:inherit;font-size:12px;padding:8px 10px}.dvt-field select{height:36px}.dvt-field textarea{resize:vertical;min-height:76px}.dvt-runtime-facts{display:grid;gap:4px;padding:9px 10px;border-radius:9px;background:var(--dsw-alias-bg-layer-2);overflow:auto}.dvt-runtime-facts code{font-size:10px;white-space:nowrap;color:var(--dsw-alias-label-secondary)}.dvt-save-row{display:flex;gap:8px;padding:2px 0}
+.dvt-settings{display:grid;gap:14px;max-width:900px;padding:8px 2px 32px;color:var(--dsw-alias-label-primary)}.dvt-settings-footer{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:8px 2px}.dvt-settings-footer h2{font-size:25px;letter-spacing:-.025em;margin:3px 0 6px}.dvt-settings-footer p{max-width:620px;margin:0;color:var(--dsw-alias-label-secondary);font-size:13px;line-height:1.55}.dvt-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--dsw-alias-state-business-primary);font-weight:700}.dvt-release{display:grid;gap:4px;min-width:170px;padding:9px 11px;border-radius:10px;background:var(--dsw-alias-bg-layer-2);font-size:10px;color:var(--dsw-alias-label-secondary)}.dvt-release span{display:flex;justify-content:space-between;gap:12px}.dvt-release strong{color:var(--dsw-alias-label-primary)}.dvt-alert{padding:10px 12px;border-radius:10px;font-size:12px;line-height:1.5;display:grid;gap:3px}.dvt-alert.notice{background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 10%,transparent);color:var(--dsw-alias-state-business-primary)}.dvt-alert.warning{background:color-mix(in srgb,var(--dsw-alias-state-warn-primary) 12%,transparent);color:var(--dsw-alias-state-warn-label)}.dvt-alert.error{background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 10%,transparent);color:var(--dsw-alias-state-error-primary)}.dvt-alert.success{background:color-mix(in srgb,var(--dsw-alias-state-success-primary) 10%,transparent);color:var(--dsw-alias-state-success-primary)}.dvt-panel{display:grid;gap:12px;padding:15px;border:1px solid var(--dsw-alias-border-l1);border-radius:14px;background:var(--dsw-alias-bg-layer-1);box-shadow:var(--dsw-shadow-lv1)}.dvt-panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dvt-panel-title h3{font-size:14px;margin:0}.dvt-panel-title p{font-size:11px;line-height:1.45;color:var(--dsw-alias-label-secondary);margin:4px 0 0;max-width:620px}.dvt-badge{font-size:10px;padding:3px 7px;border-radius:999px;font-weight:650}.dvt-badge.ok{background:color-mix(in srgb,var(--dsw-alias-state-success-primary) 12%,transparent);color:var(--dsw-alias-state-success-primary)}.dvt-badge.error{background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 10%,transparent);color:var(--dsw-alias-state-error-primary)}.dvt-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.dvt-field{display:grid;gap:6px;align-content:start}.dvt-field>span{font-size:11px;font-weight:600}.dvt-field>small{font-size:10px;color:var(--dsw-alias-label-secondary);line-height:1.4}.dvt-field select,.dvt-field textarea{width:100%;box-sizing:border-box;border:1px solid var(--dsw-alias-border-l1);border-radius:9px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:inherit;font-size:12px;padding:8px 10px}.dvt-field select{height:36px}.dvt-field textarea{resize:vertical;min-height:76px}.dvt-runtime-facts{display:grid;gap:4px;padding:9px 10px;border-radius:9px;background:var(--dsw-alias-bg-layer-2);overflow:auto}.dvt-runtime-facts code{font-size:10px;white-space:nowrap;color:var(--dsw-alias-label-secondary)}.dvt-save-row{display:flex;gap:8px;padding:2px 0}
+.dvt-settings-footer{margin-top:8px;padding:20px 2px 4px;border-top:1px solid var(--dsw-alias-border-l1);opacity:.82}.dvt-settings-footer h2{font-size:18px;letter-spacing:-.015em;margin:3px 0 5px}.dvt-settings-footer p{font-size:11px;line-height:1.5}.dvt-release{min-width:220px}.dvt-release span{white-space:nowrap}.dvt-essential{border-color:color-mix(in srgb,var(--dsw-alias-state-business-primary) 30%,var(--dsw-alias-border-l1));box-shadow:var(--dsw-shadow-lv1),0 0 0 3px color-mix(in srgb,var(--dsw-alias-state-business-primary) 5%,transparent)}.dvt-advanced{border:1px solid var(--dsw-alias-border-l1);border-radius:14px;background:var(--dsw-alias-bg-layer-1);overflow:hidden}.dvt-advanced>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 15px;cursor:pointer;list-style:none}.dvt-advanced>summary::-webkit-details-marker{display:none}.dvt-advanced>summary>span:first-child{display:grid;gap:3px}.dvt-advanced>summary strong{font-size:13px}.dvt-advanced>summary small{font-size:10px;line-height:1.45;color:var(--dsw-alias-label-secondary);font-weight:400}.dvt-details-chevron{font-size:15px;opacity:.55;transition:transform .16s ease}.dvt-advanced[open] .dvt-details-chevron{transform:rotate(180deg)}.dvt-advanced-body{display:grid;gap:12px;padding:0 12px 12px}.dvt-advanced-body>.dvt-panel{box-shadow:none}
 .dvt-health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}.dvt-health-grid>div{padding:9px 10px;border-radius:9px;background:var(--dsw-alias-bg-layer-2);border-left:3px solid var(--dsw-alias-border-l4)}.dvt-health-grid>div[data-status=ok]{border-left-color:var(--dsw-alias-state-success-primary)}.dvt-health-grid>div[data-status=warning],.dvt-health-grid>div[data-status=not_tested]{border-left-color:var(--dsw-alias-state-warn-primary)}.dvt-health-grid>div[data-status=error]{border-left-color:var(--dsw-alias-state-error-primary)}.dvt-health-grid span{font-size:10px;text-transform:capitalize}.dvt-health-grid strong{float:right;font-size:9px;text-transform:uppercase;color:var(--dsw-alias-label-secondary)}.dvt-health-grid p{clear:both;margin:5px 0 0;font-size:10px;line-height:1.4;color:var(--dsw-alias-label-secondary)}.dvt-loading{padding:24px;border-radius:12px;background:var(--dsw-alias-bg-layer-2);font-size:12px;color:var(--dsw-alias-label-secondary)}
 .dvt-paste-dock{box-sizing:border-box;width:calc(100% - 32px);max-width:var(--dsh-composer-card-max-width,960px);margin:0 auto;display:flex;flex-wrap:wrap;gap:6px;padding:0 2px 6px}.dvt-paste-chip{max-width:100%;height:32px;box-sizing:border-box;display:flex;align-items:center;gap:7px;padding:0 6px 0 10px;border:1px solid var(--dsw-alias-border-l1);border-radius:9px;background:var(--dsw-specific-tip);font-size:12px}.dvt-paste-chip[data-status=copying]{border-color:var(--dsw-alias-state-business-primary)}.dvt-paste-chip[data-status=error]{border-color:var(--dsw-alias-state-error-primary)}.dvt-paste-name{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dvt-paste-detail{color:var(--dsw-alias-label-caption);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dvt-paste-chip[data-status=error] .dvt-paste-detail{color:var(--dsw-alias-state-error-primary)}.dvt-paste-chip button{width:20px;height:20px;display:grid;place-items:center;border:0;border-radius:50%;padding:0;background:transparent;color:var(--dsw-alias-label-caption);font:inherit;font-size:16px;cursor:pointer}.dvt-paste-chip button:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}.dvt-paste-chip button:disabled{opacity:.4;cursor:default}
-@media(max-width:720px){.dvt-settings-header{display:grid}.dvt-release{width:auto}.dvt-form-grid{grid-template-columns:1fr}.dvt-metrics{grid-template-columns:1fr}.dvt-artifact-meta{align-items:flex-start;flex-direction:column}.dvt-panel-title{flex-direction:column}}
+@media(max-width:720px){.dvt-settings-footer{display:grid}.dvt-release{width:auto}.dvt-form-grid{grid-template-columns:1fr}.dvt-metrics{grid-template-columns:1fr}.dvt-artifact-meta{align-items:flex-start;flex-direction:column}.dvt-panel-title{flex-direction:column}}
 `
 
 function installStyles(): () => void {