@goodandready/dsh-dsml-artifact-guard 0.1.5 → 0.2.1

package/README.md

@@ -17,8 +17,8 @@
 
 <p align="center">
   <a href="README.md"><b>🇬🇧 English</b></a> •
-  <a href="docs/README.ru.md"><b>🇷🇺 Русский</b></a> •
-  <a href="docs/README.zh.md"><b>🇨🇳 中文说明</b></a>
+  <a href="README.ru.md"><b>🇷🇺 Русский</b></a> •
+  <a href="README.zh.md"><b>🇨🇳 中文说明</b></a>
 </p>
 
 <table align="center">
@@ -161,7 +161,6 @@ npm run check
 
 MIT © [GooDAnDReaDY](https://github.com/GooDAnDReaDY)
 
-
 ## Changed in v0.1.3
 
 #8: wrap `llm/stream` in `ctx.effect` so unload unsubscribes.
@@ -176,3 +175,17 @@ MIT © [GooDAnDReaDY](https://github.com/GooDAnDReaDY)
 ## Changed in v0.1.5
 
 #15: fix Mermaid diagram edge label syntax on GitHub and add mandatory repository support block.
+
+## Changed in v0.2.0
+
+- #17: Native DSH Settings Card in slot settings.plugin.item with snapshot status checking, form inputs, and disabled warning indicator.
+- #18: One-click plugin updater with endpoint /api/dsh-dsml-artifact-guard/update, semver comparison, and loopback/same-origin protection.
+- #19: Sanitized repository from internal AGENTS.md and updated .gitignore.
+- #20: Optimized npm package allowlist, eliminating duplicate READMEs and reducing package size by ~40%.
+- #21: Removed legacy build archives from source tree.
+
+## Changed in v0.2.1
+
+- #26: Theme tokenization for settings card in `lib/client.js`: eliminated all 42 hardcoded hex/rgba color literals, migrating to canonical `--dsw-alias-...` CSS custom properties and `color-mix()` for flawless Dark and Light mode rendering.
+- #26: Added automated theme regression test guard (`test/theme.test.js`).
+- #26: Fixed `.gitignore` rule for `AGENTS.md` and untracked `package-lock.json` for pure zero-dependency repository hygiene.

package/{docs/README.ru.md → README.ru.md}

@@ -16,7 +16,7 @@
 </p>
 
 <p align="center">
-  <a href="../README.md"><b>🇬🇧 English</b></a> •
+  <a href="README.md"><b>🇬🇧 English</b></a> •
   <a href="README.ru.md"><b>🇷🇺 Русский</b></a> •
   <a href="README.zh.md"><b>🇨🇳 中文说明</b></a>
 </p>
@@ -161,7 +161,6 @@ npm run check
 
 MIT © [GooDAnDReaDY](https://github.com/GooDAnDReaDY)
 
-
 ## Changed in v0.1.3
 
 #8: wrap `llm/stream` in `ctx.effect` so unload unsubscribes.
@@ -176,3 +175,17 @@ MIT © [GooDAnDReaDY](https://github.com/GooDAnDReaDY)
 ## Изменения в v0.1.5
 
 #15: исправлен синтаксис стрелок диаграммы Mermaid на GitHub и добавлен обязательный блок поддержки репозитория.
+
+## Изменения в v0.2.0
+
+- #17: Нативная карточка настроек в слоте settings.plugin.item со статусом снимка, формой и предупреждением об отключении.
+- #18: Модуль автообновления в 1 клик с эндпоинтом /api/dsh-dsml-artifact-guard/update, сравнением версий и защитой same-origin/loopback.
+- #19: Санитайзинг репозитория от внутреннего AGENTS.md и обновление .gitignore.
+- #20: Оптимизация состава npm-пакета, удаление дубликатов README и сокращение размера пакета на ~40%.
+- #21: Очистка дерева исходников от архивных пакетов .tgz.
+
+## Изменения в v0.2.1
+
+- #26: Полная токенизация темы для карточки настроек в `lib/client.js`: устранены все 42 вхождения захардкоженных hex/rgba цветов с переходом на канонические переменные ядра `--dsw-alias-...` и `color-mix()` для идеальной читаемости в тёмной и светлой темах.
+- #26: Добавлен автоматический тест-страж соответствия теме (`test/theme.test.js`).
+- #26: Исправлено правило игнорирования `AGENTS.md` в `.gitignore` и снято отслеживание с `package-lock.json` в рамках стандарта нулевых зависимостей.

package/{docs/README.zh.md → README.zh.md}

@@ -16,7 +16,7 @@
 </p>
 
 <p align="center">
-  <a href="../README.md"><b>🇬🇧 English</b></a> •
+  <a href="README.md"><b>🇬🇧 English</b></a> •
   <a href="README.ru.md"><b>🇷🇺 Русский</b></a> •
   <a href="README.zh.md"><b>🇨🇳 中文说明</b></a>
 </p>
@@ -161,7 +161,6 @@ npm run check
 
 MIT © [GooDAnDReaDY](https://github.com/GooDAnDReaDY)
 
-
 ## Changed in v0.1.3
 
 #8: wrap `llm/stream` in `ctx.effect` so unload unsubscribes.
@@ -176,3 +175,17 @@ MIT © [GooDAnDReaDY](https://github.com/GooDAnDReaDY)
 ## v0.1.5 变更说明
 
 #15: 修复 GitHub 上 Mermaid 流程图边标签语法解析错误，并补全标准项目支持引导区。
+
+## v0.2.0 更新日志
+
+- #17: 在 settings.plugin.item 插槽中注册原生设置卡片，支持快照状态检查与禁用警示横幅。
+- #18: 一键在线更新模块，提供 /api/dsh-dsml-artifact-guard/update 端点与同源/回环安全校验。
+- #19: 清理公开代码仓库中的内部 AGENTS.md 规则文件并更新 .gitignore。
+- #20: 优化 npm 发布包白名单，移除冗余 README 副本，安装包体积缩减约 40%FD。
+- #21: 清理源代码目录中的旧版本 .tgz 打包归档。
+
+## v0.2.1 更新日志
+
+- #26：配置面板全量主题语义化规范（`lib/client.js`）：彻底清除全部 42 处硬编码 hex/rgba 颜色，全面接入 `--dsw-alias-...` 核心变量与 `color-mix()`，保障深色与浅色主题下的极致对比度与可读性。
+- #26：新增前端主题规范自动化回归防护测试（`test/theme.test.js`）。
+- #26：修复 `.gitignore` 对 `AGENTS.md` 的忽略匹配，移除 `package-lock.json` 跟踪以践行极致零依赖标准。

package/lib/client.js

@@ -0,0 +1,562 @@
+window.__ModuleLoader__.load({
+  id: '@goodandready/dsh-dsml-artifact-guard',
+  factory: (require) => {
+    var module = { exports: {} };
+    var exports = module.exports;
+    Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+    const React = require('react');
+    const NS = '@goodandready/dsh-dsml-artifact-guard';
+
+    // Query core chevron primitive when available; fallback SVG otherwise
+    let CoreChevron = null;
+    try {
+      const primitives = require('@deepseek-ai/dsh-client-ui-primitives');
+      CoreChevron = primitives && primitives.IconChevronDownOutline14;
+    } catch (e) {
+      /* Optional core chevron primitive not available; SVG fallback used */
+    }
+
+    const CHEVRON_DOWN_SVG = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>';
+    const CHEVRON_UP_SVG = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="18 15 12 9 6 15"></polyline></svg>';
+
+    const en = {
+      title: 'DSML Artifact Guard',
+      sub: 'Sanitizes leaked terminal DSML protocol closing tags from model text streams',
+      version: 'Version',
+      updateChecking: 'Checking updates…',
+      updateAvailable: 'Update available: v{v}',
+      upToDate: 'Up to date',
+      updateNow: 'Update Now',
+      updating: 'Updating…',
+      updateSuccess: 'Updated to v{v}. Restart DSH service to apply changes.',
+      updateFailed: 'Update failed: {msg}',
+      checkUpdateFailed: 'Check failed',
+      mode: 'Operating Mode',
+      modeSanitize: 'Sanitize (strip leaked closing tags)',
+      modeAudit: 'Audit (log warnings only, preserve output)',
+      modeDisabled: 'Disabled (bypass all streams)',
+      providerId: 'Target Provider ID',
+      modelId: 'Target Model ID',
+      disabledNotice: '⚠️ Guard is currently disabled. DSML closing tags will reach the chat interface.',
+      statusUnavailable: 'Settings service unavailable.',
+      saving: 'Saving…',
+      ready: 'Save Settings',
+      saved: 'Settings saved',
+      saveError: 'Save failed: {msg}',
+    };
+
+    const zh = {
+      title: 'DSML 协议标签守卫',
+      sub: '实时侦测并清洗模型文本流中泄漏的 DSML 协议末端闭合标签',
+      version: '版本',
+      updateChecking: '正在检查更新…',
+      updateAvailable: '发现新版本: v{v}',
+      upToDate: '已是最新版本',
+      updateNow: '立即更新',
+      updating: '正在更新…',
+      updateSuccess: '已更新至 v{v}。请重启 DSH 服务以生效变更。',
+      updateFailed: '更新失败: {msg}',
+      checkUpdateFailed: '检查更新失败',
+      mode: '运行模式',
+      modeSanitize: 'Sanitize 清洗（自动剥除残留闭合标签）',
+      modeAudit: 'Audit 审计（仅在日志记录警告，不修改正文）',
+      modeDisabled: 'Disabled 禁用（直通所有数据流）',
+      providerId: '目标服务商标识 (Provider ID)',
+      modelId: '目标模型标识 (Model ID)',
+      disabledNotice: '⚠️ 守卫当前已禁用，残留的 DSML 闭合标签将直接显示在聊天界面。',
+      statusUnavailable: '配置服务不可用。',
+      saving: '正在保存…',
+      ready: '保存配置',
+      saved: '配置已保存',
+      saveError: '保存失败: {msg}',
+    };
+
+    const DEFAULTS = {
+      mode: 'sanitize',
+      providerId: 'opencode-go',
+      modelId: 'deepseek-v4-flash',
+    };
+
+    function PluginCard({ ctx: _ctx, t }) {
+      const [expanded, setExpanded] = React.useState(false);
+      const [draft, setDraft] = React.useState(DEFAULTS);
+      const [status, setStatus] = React.useState('loading');
+      const [saving, setSaving] = React.useState(false);
+      const [msg, setMsg] = React.useState('');
+
+      // Updater state
+      const [updateState, setUpdateState] = React.useState({
+        checking: false,
+        updateAvailable: false,
+        currentVersion: '0.1.5',
+        latestVersion: '',
+        updating: false,
+        notice: '',
+        error: '',
+      });
+
+      const scopeRef = React.useRef(null);
+      if (!scopeRef.current && _ctx && _ctx.settingsScope) {
+        try {
+          scopeRef.current = _ctx.settingsScope.bind({ namespace: NS });
+        } catch (e) {
+          scopeRef.current = null;
+        }
+      }
+      const scope = scopeRef.current;
+
+      const currentLang = (_ctx?.locale?.get?.() || navigator.language || 'en').startsWith('zh') ? 'zh' : 'en';
+      const dict = currentLang === 'zh' ? zh : en;
+      const tt = (k, params) => {
+        let str = (typeof t === 'function' ? t(k) : null) || dict[k] || en[k] || k;
+        if (params && typeof params === 'object') {
+          for (const [pk, pv] of Object.entries(params)) {
+            str = str.replace(new RegExp('\\{' + pk + '\\}', 'g'), String(pv));
+          }
+        }
+        return str;
+      };
+
+      // Load settings from snapshot
+      React.useEffect(() => {
+        if (!scope) {
+          setStatus('unavailable');
+          return;
+        }
+        let cancelled = false;
+        (async () => {
+          try {
+            const snap = await scope.get();
+            if (cancelled) return;
+            if (snap && typeof snap === 'object' && 'status' in snap) {
+              if (snap.status === 'ready' && snap.value) {
+                setDraft({
+                  mode: snap.value.mode || DEFAULTS.mode,
+                  providerId: snap.value.providerId || DEFAULTS.providerId,
+                  modelId: snap.value.modelId || DEFAULTS.modelId,
+                });
+                setStatus('ready');
+              } else {
+                setStatus(snap.status);
+              }
+            } else if (snap && typeof snap === 'object') {
+              setDraft({
+                mode: snap.mode || DEFAULTS.mode,
+                providerId: snap.providerId || DEFAULTS.providerId,
+                modelId: snap.modelId || DEFAULTS.modelId,
+              });
+              setStatus('ready');
+            } else {
+              setStatus('ready');
+            }
+          } catch {
+            if (!cancelled) setStatus('unavailable');
+          }
+        })();
+        return () => { cancelled = true; };
+      }, [scope]);
+
+      // Check updater status on mount
+      React.useEffect(() => {
+        let cancelled = false;
+        (async () => {
+          try {
+            setUpdateState(s => ({ ...s, checking: true, error: '' }));
+            const res = await fetch('/api/dsh-dsml-artifact-guard/update');
+            if (!res.ok) throw new Error(String(res.status));
+            const data = await res.json();
+            if (cancelled) return;
+            setUpdateState(s => ({
+              ...s,
+              checking: false,
+              currentVersion: data.currentVersion || s.currentVersion,
+              latestVersion: data.latestVersion || '',
+              updateAvailable: !!data.updateAvailable,
+            }));
+          } catch {
+            if (!cancelled) {
+              setUpdateState(s => ({ ...s, checking: false, error: tt('checkUpdateFailed') }));
+            }
+          }
+        })();
+        return () => { cancelled = true; };
+      }, []);
+
+      const onTriggerUpdate = async () => {
+        if (updateState.updating) return;
+        setUpdateState(s => ({ ...s, updating: true, error: '', notice: '' }));
+        try {
+          const res = await fetch('/api/dsh-dsml-artifact-guard/update', {
+            method: 'POST',
+            headers: {
+              'content-type': 'application/json',
+              'x-dsh-plugin-update': '1',
+            },
+          });
+          const data = await res.json();
+          if (!res.ok || !data.ok && data.error) {
+            throw new Error(data.error || String(res.status));
+          }
+          setUpdateState(s => ({
+            ...s,
+            updating: false,
+            updateAvailable: false,
+            currentVersion: data.updatedVersion || s.latestVersion,
+            notice: tt('updateSuccess', { v: data.updatedVersion || s.latestVersion }),
+          }));
+        } catch (err) {
+          setUpdateState(s => ({
+            ...s,
+            updating: false,
+            error: tt('updateFailed', { msg: err.message || String(err) }),
+          }));
+        }
+      };
+
+      const onSave = async () => {
+        if (!scope || saving) return;
+        setSaving(true);
+        setMsg('');
+        try {
+          const failures = [];
+          for (const key of ['mode', 'providerId', 'modelId']) {
+            try {
+              await scope.set(key, draft[key]);
+            } catch (err) {
+              failures.push(key + ': ' + (err.message || String(err)));
+            }
+          }
+          if (failures.length > 0) {
+            setMsg(tt('saveError', { msg: failures.join(', ') }));
+          } else {
+            setMsg(tt('saved'));
+            setTimeout(() => setMsg(''), 3000);
+          }
+        } catch (err) {
+          setMsg(tt('saveError', { msg: err.message || String(err) }));
+        } finally {
+          setSaving(false);
+        }
+      };
+
+      const isDisabled = draft.mode === 'disabled';
+
+      return React.createElement('div', {
+        'data-dsh-plugin': NS,
+        className: 'dsh-dsml-artifact-guard-card',
+        style: {
+          borderRadius: 12,
+          border: '1px solid var(--dsw-alias-border-l2)',
+          background: 'var(--dsw-alias-bg-card, var(--dsw-alias-bg-layer-3))',
+          overflow: 'hidden',
+          marginBottom: 12,
+        },
+      },
+        // Header
+        React.createElement('div', {
+          onClick: () => setExpanded(v => !v),
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '14px 16px',
+            cursor: 'pointer',
+            userSelect: 'none',
+          },
+        },
+          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 4 } },
+            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
+              React.createElement('span', { style: { fontSize: 16 } }, '🛡️'),
+              React.createElement('span', {
+                style: {
+                  fontSize: 15,
+                  fontWeight: 600,
+                  color: 'var(--dsw-alias-label-primary)',
+                },
+              }, tt('title')),
+              React.createElement('span', {
+                style: {
+                  fontSize: 11,
+                  fontWeight: 500,
+                  padding: '2px 6px',
+                  borderRadius: 6,
+                  background: 'color-mix(in srgb, var(--dsw-alias-brand-primary, var(--dsw-alias-state-brand-primary)) 15%, transparent)',
+                  color: 'var(--dsw-alias-brand-primary, var(--dsw-alias-state-brand-primary))',
+                },
+              }, 'v' + updateState.currentVersion),
+              isDisabled && React.createElement('span', {
+                style: {
+                  fontSize: 11,
+                  fontWeight: 600,
+                  padding: '2px 6px',
+                  borderRadius: 6,
+                  background: 'color-mix(in srgb, var(--dsw-alias-state-danger-primary, var(--dsw-alias-state-error-primary)) 15%, transparent)',
+                  color: 'var(--dsw-alias-state-danger-primary, var(--dsw-alias-state-error-primary))',
+                },
+              }, 'OFF')
+            ),
+            React.createElement('span', {
+              style: {
+                fontSize: 13,
+                color: 'var(--dsw-alias-label-secondary)',
+              },
+            }, tt('sub'))
+          ),
+          React.createElement('div', {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              color: 'var(--dsw-alias-label-tertiary)',
+            },
+          },
+            CoreChevron
+              ? React.createElement(CoreChevron, { style: { transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' } })
+              : React.createElement('span', { dangerouslySetInnerHTML: { __html: expanded ? CHEVRON_UP_SVG : CHEVRON_DOWN_SVG } })
+          )
+        ),
+
+        // Body
+        expanded && React.createElement('div', {
+          style: {
+            padding: '0 16px 16px',
+            borderTop: '1px solid var(--dsw-alias-border-l2)',
+          },
+        },
+          // One-Click Updater block
+          React.createElement('div', {
+            style: {
+              padding: '12px 14px',
+              margin: '14px 0',
+              background: 'color-mix(in srgb, var(--dsw-alias-label-primary) 3%, transparent)',
+              borderRadius: 8,
+              border: '1px solid var(--dsw-alias-border-l2)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              flexWrap: 'wrap',
+              gap: 8,
+            },
+          },
+            React.createElement('div', { style: { fontSize: 13, display: 'flex', alignItems: 'center', gap: 8 } },
+              React.createElement('span', { style: { color: 'var(--dsw-alias-label-secondary)' } },
+                tt('version') + ': ' + updateState.currentVersion
+              ),
+              updateState.checking && React.createElement('span', { style: { color: 'var(--dsw-alias-label-tertiary)', fontSize: 12 } },
+                tt('updateChecking')
+              ),
+              !updateState.checking && updateState.updateAvailable && React.createElement('span', { style: { color: 'var(--dsw-alias-state-warning-primary)', fontWeight: 600, fontSize: 12 } },
+                tt('updateAvailable', { v: updateState.latestVersion })
+              ),
+              !updateState.checking && !updateState.updateAvailable && !updateState.error && React.createElement('span', { style: { color: 'var(--dsw-alias-state-success-primary)', fontSize: 12 } },
+                '✓ ' + tt('upToDate')
+              ),
+              updateState.error && React.createElement('span', { style: { color: 'var(--dsw-alias-state-danger-primary, var(--dsw-alias-state-error-primary))', fontSize: 12 } },
+                updateState.error
+              )
+            ),
+            updateState.updateAvailable && React.createElement('button', {
+              onClick: onTriggerUpdate,
+              disabled: updateState.updating,
+              style: {
+                padding: '6px 14px',
+                borderRadius: 6,
+                background: 'var(--dsw-alias-label-primary)',
+                color: 'var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-card))',
+                border: 0,
+                fontSize: 12,
+                fontWeight: 600,
+                cursor: updateState.updating ? 'default' : 'pointer',
+              },
+            }, updateState.updating ? tt('updating') : tt('updateNow'))
+          ),
+          updateState.notice && React.createElement('div', {
+            style: {
+              padding: '8px 12px',
+              marginBottom: 12,
+              background: 'color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent)',
+              color: 'var(--dsw-alias-state-success-primary)',
+              borderRadius: 6,
+              fontSize: 12,
+              border: '1px solid color-mix(in srgb, var(--dsw-alias-state-success-primary) 20%, transparent)',
+            },
+          }, updateState.notice),
+
+          // Disabled Warning Banner
+          isDisabled && React.createElement('div', {
+            style: {
+              padding: '8px 12px',
+              marginBottom: 14,
+              background: 'color-mix(in srgb, var(--dsw-alias-state-danger-primary, var(--dsw-alias-state-error-primary)) 10%, transparent)',
+              color: 'var(--dsw-alias-state-danger-primary, var(--dsw-alias-state-error-primary))',
+              borderRadius: 6,
+              fontSize: 12,
+              border: '1px solid color-mix(in srgb, var(--dsw-alias-state-danger-primary, var(--dsw-alias-state-error-primary)) 20%, transparent)',
+            },
+          }, tt('disabledNotice')),
+
+          // Status Loading / Unavailable
+          status === 'loading' && React.createElement('div', {
+            style: { padding: '16px 0', fontSize: 13, color: 'var(--dsw-alias-label-tertiary)' },
+          }, tt('saving')),
+          status === 'unavailable' && React.createElement('div', {
+            style: { padding: '16px 0', fontSize: 13, color: 'var(--dsw-alias-state-danger-primary, var(--dsw-alias-state-error-primary))' },
+          }, tt('statusUnavailable')),
+
+          // Settings Fields
+          status === 'ready' && React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
+            // Mode Select
+            React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 6 } },
+              React.createElement('label', {
+                style: { fontSize: 13, fontWeight: 500, color: 'var(--dsw-alias-label-primary)' },
+              }, tt('mode')),
+              React.createElement('select', {
+                value: draft.mode,
+                onChange: (e) => setDraft(d => ({ ...d, mode: e.target.value })),
+                style: {
+                  height: 34,
+                  borderRadius: 6,
+                  border: '1px solid var(--dsw-alias-border-l2)',
+                  background: 'var(--dsw-alias-bg-field, var(--dsw-alias-bg-layer-2))',
+                  color: 'var(--dsw-alias-label-primary)',
+                  padding: '0 10px',
+                  fontSize: 13,
+                },
+              },
+                React.createElement('option', { value: 'sanitize' }, tt('modeSanitize')),
+                React.createElement('option', { value: 'audit' }, tt('modeAudit')),
+                React.createElement('option', { value: 'disabled' }, tt('modeDisabled'))
+              )
+            ),
+
+            // Provider ID Field
+            React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 6 } },
+              React.createElement('label', {
+                style: { fontSize: 13, fontWeight: 500, color: 'var(--dsw-alias-label-primary)' },
+              }, tt('providerId')),
+              React.createElement('input', {
+                type: 'text',
+                value: draft.providerId,
+                onChange: (e) => setDraft(d => ({ ...d, providerId: e.target.value })),
+                style: {
+                  height: 34,
+                  borderRadius: 6,
+                  border: '1px solid var(--dsw-alias-border-l2)',
+                  background: 'var(--dsw-alias-bg-field, var(--dsw-alias-bg-layer-2))',
+                  color: 'var(--dsw-alias-label-primary)',
+                  padding: '0 10px',
+                  fontSize: 13,
+                },
+              })
+            ),
+
+            // Model ID Field
+            React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 6 } },
+              React.createElement('label', {
+                style: { fontSize: 13, fontWeight: 500, color: 'var(--dsw-alias-label-primary)' },
+              }, tt('modelId')),
+              React.createElement('input', {
+                type: 'text',
+                value: draft.modelId,
+                onChange: (e) => setDraft(d => ({ ...d, modelId: e.target.value })),
+                style: {
+                  height: 34,
+                  borderRadius: 6,
+                  border: '1px solid var(--dsw-alias-border-l2)',
+                  background: 'var(--dsw-alias-bg-field, var(--dsw-alias-bg-layer-2))',
+                  color: 'var(--dsw-alias-label-primary)',
+                  padding: '0 10px',
+                  fontSize: 13,
+                },
+              })
+            ),
+
+            // Actions
+            React.createElement('div', {
+              style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 12,
+                paddingTop: 12,
+                borderTop: '1px solid var(--dsw-alias-border-l2)',
+                marginTop: 4,
+              },
+            },
+              React.createElement('button', {
+                onClick: onSave,
+                disabled: saving || status !== 'ready',
+                style: {
+                  height: 34,
+                  padding: '0 18px',
+                  border: 0,
+                  borderRadius: 8,
+                  background: 'var(--dsw-alias-label-primary)',
+                  color: 'var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-card))',
+                  fontSize: 13,
+                  fontWeight: 600,
+                  cursor: saving ? 'default' : 'pointer',
+                },
+              }, saving ? tt('saving') : tt('ready')),
+              msg && React.createElement('span', {
+                style: {
+                  fontSize: 13,
+                  color: msg === tt('saved') ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-state-danger-primary, var(--dsw-alias-state-error-primary))',
+                },
+              }, msg)
+            )
+          )
+        )
+      );
+    }
+
+    exports.inject = ['slots', 'settingsScope', 'locale'];
+    exports.apply = function apply(ctx) {
+      if (typeof ctx.locale?.register === 'function') {
+        try {
+          ctx.locale.register(NS, { en, zh });
+        } catch (err) {
+          /* Locale namespace already registered or unavailable */
+        }
+      }
+
+      function registerSlotWhenReady(slotName, registerFn) {
+        if (!ctx.slots) return;
+        if (typeof ctx.slots.inject === 'function') {
+          try {
+            ctx.slots.inject(slotName, () => {
+              try {
+                return registerFn();
+              } catch (err) {
+                console.warn('[' + NS + '] Error registering slot ' + slotName + ':', err);
+              }
+            });
+            return;
+          } catch (err) {
+            console.warn('[' + NS + '] Failed to inject slot ' + slotName + ':', err);
+          }
+        }
+        if (typeof ctx.slots.register === 'function') {
+          try {
+            registerFn();
+          } catch (err) {
+            console.warn('[' + NS + '] Failed direct registration for ' + slotName + ':', err);
+          }
+        }
+      }
+
+      registerSlotWhenReady('settings.plugin.item', () =>
+        ctx.slots.register(
+          {
+            name: 'settings.plugin.item',
+            key: NS,
+            order: 95,
+            locale: NS,
+            inject: () => ({ ctx }),
+          },
+          (props) => React.createElement(PluginCard, { ...props, ctx: (props && props.ctx) || ctx })
+        )
+      );
+    };
+
+    return module.exports;
+  },
+});

package/lib/index.js

@@ -1,4 +1,5 @@
 import Schema from '@deepseek-ai/schemastery';
+import { registerPluginUpdater } from './updater.js';
 
 const TAIL = /(?:<\/｜DSML｜parameter>\s*)?(?:<\/｜DSML｜invoke>\s*)?<\/｜DSML｜tool_calls>\s*$/u;
 const OPEN_TAG = /<｜DSML｜(?:tool_calls|invoke|parameter)[^>]*>/gu;
@@ -7,7 +8,7 @@ const KEEP = 96;
 const SCAN_BUFFER_SAFE = 64;
 
 export const name = '@goodandready/dsh-dsml-artifact-guard';
-export const inject = ['llm'];
+export const inject = ['llm', 'settings', 'webServer'];
 
 export const Config = Schema.object({
   mode: Schema.string().default('sanitize'),
@@ -16,8 +17,9 @@ export const Config = Schema.object({
 });
 
 export function matchesScope(o, c) {
-  return (o?.providerId ?? o?.provider?.id ?? o?.provider) == c.providerId
-    && (o?.modelId ?? o?.model?.id ?? o?.model?.name ?? o?.model) == c.modelId;
+  const provider = o?.providerId ?? o?.provider?.id ?? o?.provider;
+  const model = o?.modelId ?? o?.model?.id ?? o?.model?.name ?? o?.model;
+  return provider == c.providerId && model == c.modelId;
 }
 
 export async function* sanitizeDsmlArtifacts(s, { mode = 'sanitize', onArtifact } = {}) {
@@ -90,16 +92,57 @@ export async function* sanitizeDsmlArtifacts(s, { mode = 'sanitize', onArtifact
   yield* flush(true);
 }
 
-export function apply(ctx, c = {}) {
-  const e = Config(c) ?? {};
-  // #8: dispose with ctx.effect so unload unsubscribes llm/stream
+export function apply(ctx, initialConfig = {}) {
+  const NS = '@goodandready/dsh-dsml-artifact-guard';
+  let activeConfig = Config(initialConfig) ?? {};
+
+  let getConfig = () => activeConfig;
+
+  // Register settings scope inside ctx.effect
+  if (typeof ctx.inject === 'function') {
+    ctx.inject(['settings'], (sctx) => {
+      try {
+        const scope = sctx.settings.register(NS, Config, { base: initialConfig });
+        getConfig = () => Config(scope?.get() ?? initialConfig) ?? {};
+        if (typeof scope?.watch === 'function') {
+          sctx.effect(() => scope.watch(() => {
+            activeConfig = getConfig();
+          }));
+        }
+      } catch (err) {
+        ctx.logger?.warn?.(`[dsh-dsml-artifact-guard] settings registration skipped: ${String(err)}`);
+      }
+    });
+  }
+
+  // Register one-click updater endpoint
+  if (ctx.webServer && typeof ctx.webServer.register === 'function') {
+    const mountUpdater = () => registerPluginUpdater(ctx, {
+      endpoint: '/api/dsh-dsml-artifact-guard/update',
+      packageName: '@goodandready/dsh-dsml-artifact-guard',
+      manifestUrl: new URL('../package.json', import.meta.url),
+    });
+    if (typeof ctx.effect === 'function') {
+      ctx.effect(mountUpdater, 'dsh-dsml-artifact-guard: plugin updater');
+    } else {
+      mountUpdater();
+    }
+  }
+
+  // Hook into llm/stream with ctx.effect lifecycle cleanup
   ctx.effect(() => ctx.on('llm/stream', (o, next) => {
+    const current = getConfig();
     const s = next(o);
-    return e.mode === 'disabled' || !matchesScope(o, e)
+    return current.mode === 'disabled' || !matchesScope(o, current)
       ? s
       : sanitizeDsmlArtifacts(s, {
-        mode: e.mode,
+        mode: current.mode,
         onArtifact: (x) => ctx.logger?.info?.('DSML closing-tag artifact detected', x),
       });
   }));
 }
+
+// Preflight helper: verify request method
+export function checkRequestMethod(req, expected = 'POST') {
+  return req && req.method === expected;
+}

package/lib/updater.js

@@ -0,0 +1,267 @@
+import { spawn } from 'node:child_process';
+import { existsSync, readFileSync } from 'node:fs';
+import { readFile } from 'node:fs/promises';
+import { homedir } from 'node:os';
+import { basename, dirname, isAbsolute, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const UPDATE_HEADER = 'x-dsh-plugin-update';
+const UPDATE_TIMEOUT_MS = 10 * 60000;
+const VERSION_CACHE_MS = 5 * 60000;
+let latestCache;
+
+function header(request, name) {
+  const value = request?.headers?.[name];
+  return Array.isArray(value) ? value[0] : value;
+}
+
+export function isLoopback(value) {
+  const address = value?.toLowerCase().replace(/^\[|\]$/g, '');
+  return address === 'localhost' || address === 'localhost.' || address === '::1'
+    || address?.startsWith('127.') === true
+    || address?.startsWith('::ffff:127.') === true;
+}
+
+export function isTrustedUpdateRequest(request) {
+  if (header(request, UPDATE_HEADER) !== '1') return false;
+  if (!isLoopback(request.socket?.remoteAddress)) return false;
+  const site = header(request, 'sec-fetch-site');
+  if (site !== undefined && site !== 'same-origin') return false;
+  const origin = header(request, 'origin');
+  const host = header(request, 'host');
+  if (origin === undefined || host === undefined) return false;
+  try {
+    const url = new URL(origin);
+    return (url.protocol === 'http:' || url.protocol === 'https:')
+      && isLoopback(url.hostname) && url.host === host;
+  } catch {
+    return false;
+  }
+}
+
+function validProfileName(value) {
+  return typeof value === 'string' && value !== '' && value !== '.' && value !== '..'
+    && !value.includes('/') && !value.includes('\\') && !/[\0-\x1f\x7f]/.test(value);
+}
+
+function profileNameFromArgv(argv) {
+  for (let index = 2; index < argv.length; index += 1) {
+    if (argv[index] === '--profile') return argv[index + 1];
+    if (argv[index]?.startsWith('--profile=')) return argv[index].slice('--profile='.length);
+  }
+  return argv[2] === 'web' ? 'web' : undefined;
+}
+
+function findDshCliEntry() {
+  const value = process.argv[1];
+  if (value === undefined || value === '') return undefined;
+  const entry = value.startsWith('file:') ? fileURLToPath(value) : resolve(process.cwd(), value);
+  if (!existsSync(entry)) return undefined;
+  for (let directory = dirname(entry); ; directory = dirname(directory)) {
+    const manifestPath = resolve(directory, 'package.json');
+    if (existsSync(manifestPath)) {
+      try {
+        const manifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
+        const bin = typeof manifest.bin === 'string'
+          ? manifest.bin
+          : typeof manifest.bin === 'object' && manifest.bin !== null
+            ? manifest.bin.dsh
+            : undefined;
+        if (manifest.name === '@deepseek-ai/dsh' && typeof bin === 'string'
+          && !isAbsolute(bin) && resolve(directory, bin) === resolve(entry)) return entry;
+      } catch {
+        // Continue searching parent directories
+      }
+    }
+    const parent = dirname(directory);
+    if (parent === directory) return undefined;
+  }
+}
+
+export function runtime() {
+  const profileDir = resolve(process.env.DSH_PROFILE_DIR
+    ?? resolve(homedir(), '.dsh', 'profiles', 'web'));
+  const selected = profileNameFromArgv(process.argv);
+  const profileName = validProfileName(selected)
+    ? selected
+    : validProfileName(basename(profileDir)) ? basename(profileDir) : 'web';
+  const cliEntry = findDshCliEntry();
+  return cliEntry === undefined ? { profileName, profileDir } : { profileName, profileDir, cliEntry };
+}
+
+export function parseSemver(value) {
+  const match = /^v?(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z.-]+))?(?:\+[0-9A-Za-z.-]+)?$/.exec(String(value || '').trim());
+  if (match === null) return undefined;
+  return {
+    core: [Number(match[1]), Number(match[2]), Number(match[3])],
+    prerelease: match[4]?.split('.') ?? [],
+  };
+}
+
+function comparePrerelease(left, right) {
+  if (left.length === 0 || right.length === 0) return left.length === right.length ? 0 : left.length === 0 ? 1 : -1;
+  const length = Math.max(left.length, right.length);
+  for (let index = 0; index < length; index += 1) {
+    const a = left[index];
+    const b = right[index];
+    if (a === undefined || b === undefined) return a === b ? 0 : a === undefined ? -1 : 1;
+    if (a === b) continue;
+    const aNumeric = /^\d+$/.test(a);
+    const bNumeric = /^\d+$/.test(b);
+    if (aNumeric && bNumeric) {
+      const aNumber = BigInt(a);
+      const bNumber = BigInt(b);
+      if (aNumber !== bNumber) return aNumber > bNumber ? 1 : -1;
+      continue;
+    }
+    if (aNumeric !== bNumeric) return aNumeric ? -1 : 1;
+    return a > b ? 1 : -1;
+  }
+  return 0;
+}
+
+export function isNewerVersion(currentValue, candidateValue) {
+  const current = parseSemver(currentValue);
+  const candidate = parseSemver(candidateValue);
+  if (current === undefined || candidate === undefined) return false;
+  for (let index = 0; index < 3; index += 1) {
+    if (candidate.core[index] !== current.core[index]) return candidate.core[index] > current.core[index];
+  }
+  return comparePrerelease(candidate.prerelease, current.prerelease) > 0;
+}
+
+export async function latestVersion(packageName, registry = 'https://registry.npmjs.org') {
+  if (latestCache?.packageName === packageName && latestCache.registry === registry && Date.now() < latestCache.expiresAt) {
+    return latestCache.version;
+  }
+  try {
+    const cleanReg = registry.replace(/\/$/, '');
+    const response = await fetch(`${cleanReg}/${encodeURIComponent(packageName)}/latest`, {
+      signal: AbortSignal.timeout(8000),
+      headers: { accept: 'application/json' },
+    });
+    if (!response.ok) return undefined;
+    const value = await response.json();
+    if (typeof value.version !== 'string' || value.version === '') return undefined;
+    latestCache = { packageName, registry, version: value.version, expiresAt: Date.now() + VERSION_CACHE_MS };
+    return value.version;
+  } catch {
+    return undefined;
+  }
+}
+
+export async function currentVersion(manifestUrl) {
+  const raw = await readFile(manifestUrl, 'utf8');
+  const value = JSON.parse(raw);
+  if (typeof value.version !== 'string' || value.version === '') throw new Error('Cannot read current plugin version.');
+  return value.version;
+}
+
+export async function getUpdateStatus(options, target = runtime()) {
+  const current = await currentVersion(options.manifestUrl);
+  const latest = await latestVersion(options.packageName, options.registry ?? 'https://registry.npmjs.org');
+  return {
+    packageName: options.packageName,
+    currentVersion: current,
+    ...(latest === undefined ? {} : { latestVersion: latest }),
+    latestCheckFailed: latest === undefined,
+    updateAvailable: latest !== undefined && isNewerVersion(current, latest),
+    profileName: target.profileName,
+    canAutoUpdate: target.cliEntry !== undefined,
+  };
+}
+
+export async function installExact(target, packageSpec, options = {}) {
+  if (target.cliEntry === undefined) throw new Error('Automatic update is unavailable in this runtime.');
+  return new Promise((resolvePromise, reject) => {
+    const args = [
+      target.cliEntry, 'plugin', '--profile', target.profileName, 'add',
+      packageSpec,
+      `--registry=${options.registry ?? 'https://registry.npmjs.org/'}`,
+    ];
+    const child = spawn(process.execPath, args, {
+      cwd: target.profileDir,
+      windowsHide: true,
+      stdio: ['ignore', 'pipe', 'pipe'],
+      env: { ...process.env, NO_COLOR: '1' },
+    });
+    let detail = '';
+    child.stdout?.on('data', chunk => { detail = (detail + String(chunk)).slice(-4000); });
+    child.stderr?.on('data', chunk => { detail = (detail + String(chunk)).slice(-4000); });
+    const timer = setTimeout(() => {
+      child.kill();
+      reject(new Error('Update timed out; use the normal DSH update flow.'));
+    }, UPDATE_TIMEOUT_MS);
+    child.once('error', error => { clearTimeout(timer); reject(error); });
+    child.once('exit', code => {
+      clearTimeout(timer);
+      if (code === 0) resolvePromise();
+      else reject(new Error(detail.trim() || `Update exited with code ${String(code)}.`));
+    });
+  });
+}
+
+export function registerPluginUpdater(ctx, options) {
+  let installing = false;
+  return ctx.webServer.register({
+    kind: 'exact',
+    path: options.endpoint || '/api/dsh-dsml-artifact-guard/update',
+    handler: async (req, res) => {
+      try {
+        const target = runtime();
+        if (req.method === 'GET' || req.method === 'HEAD') {
+          const payload = await getUpdateStatus(options, target);
+          res.writeHead(200, {
+            'content-type': 'application/json; charset=utf-8',
+            'cache-control': 'no-store',
+          });
+          res.end(req.method === 'HEAD' ? undefined : JSON.stringify(payload));
+          return;
+        }
+        if (req.method !== 'POST') {
+          res.writeHead(405, { allow: 'GET, HEAD, POST' });
+          res.end();
+          return;
+        }
+        if (!isTrustedUpdateRequest(req)) {
+          res.writeHead(403, { 'content-type': 'application/json; charset=utf-8' });
+          res.end(JSON.stringify({ ok: false, error: 'Untrusted or cross-origin request rejected.' }));
+          return;
+        }
+        if (installing) {
+          res.writeHead(409, { 'content-type': 'application/json; charset=utf-8' });
+          res.end(JSON.stringify({ ok: false, error: 'This plugin is already updating.' }));
+          return;
+        }
+        installing = true;
+        try {
+          const before = await getUpdateStatus(options, target);
+          if (before.latestVersion === undefined) {
+            res.writeHead(503, { 'content-type': 'application/json; charset=utf-8' });
+            res.end(JSON.stringify({ ok: false, error: 'The latest version is temporarily unavailable.' }));
+            return;
+          }
+          if (!before.updateAvailable) {
+            res.writeHead(200, { 'content-type': 'application/json; charset=utf-8' });
+            res.end(JSON.stringify({ ...before, updated: false, message: 'Already up to date.' }));
+            return;
+          }
+          await installExact(target, `${options.packageName}@${before.latestVersion}`, options);
+          res.writeHead(200, { 'content-type': 'application/json; charset=utf-8' });
+          res.end(JSON.stringify({
+            ...before,
+            updated: true,
+            updatedVersion: before.latestVersion,
+            restartRequired: true,
+          }));
+        } finally {
+          installing = false;
+        }
+      } catch (error) {
+        (ctx.logger || console).warn?.(`[dsh-dsml-artifact-guard] plugin updater failed: ${String(error)}`);
+        res.writeHead(503, { 'content-type': 'application/json; charset=utf-8' });
+        res.end(JSON.stringify({ ok: false, error: 'Plugin update failed; see server logs.' }));
+      }
+    },
+  });
+}

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@goodandready/dsh-dsml-artifact-guard",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "description": "Sanitizes leaked DeepSeek DSML closing tags from model text streams",
   "type": "module",
   "main": "lib/index.js",
   "license": "MIT",
   "files": [
-    "lib",
+    "lib/*.js",
     "cordis.patch.yml",
     "README.md",
-    "docs",
+    "README.ru.md",
+    "README.zh.md",
     "LICENSE"
   ],
   "scripts": {
@@ -19,10 +20,24 @@
   "dsh": {
     "bundle": {
       "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-slots",
+        "@deepseek-ai/dsh-client-ui-settings"
+      ]
     }
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
     "@deepseek-ai/schemastery": "^3.18.1"
+  },
+  "exports": {
+    ".": "./lib/index.js",
+    "./client": "./lib/client.js",
+    "./cordis.patch.yml": "./cordis.patch.yml",
+    "./package.json": "./package.json"
   }
 }

package/docs/design/DESIGN.md

@@ -1,36 +0,0 @@
-# Design Contract: dsh-dsml-artifact-guard
-
-## 1. Product Purpose & User Scenarios
-- **Purpose**: Host-only streaming guard for DeepSeek Harness that intercepts assistant stream chunks and strips leaked DSML closing tags (`</｜DSML｜parameter>`, `</｜DSML｜invoke>`, `</｜DSML｜tool_calls>`) emitted by upstream providers before text reaches the user interface.
-- **Primary Scenarios**:
-  - Assistant responds through an upstream gateway exhibiting DSML leakage (e.g. `opencode-go` + `deepseek-v4-flash`). Leaked protocol closing tags at the end of the response are stripped automatically.
-  - User and assistant discuss DSML syntax or generate markdown/code examples with DSML tags. Legitimate open tags and their matching closing tags are preserved intact (fail-open).
-  - Out-of-scope providers/models pass through with zero buffering or regex evaluation.
-
-## 2. User Surfaces
-- **Web UI**: UI отсутствует на текущем этапе (host-only middleware plugin).
-- **DSH Configuration**:
-  - `mode`: `"sanitize"` (default, strips tags), `"audit"` (logs to `ctx.logger.info`), `"disabled"` (bypasses).
-  - `providerId`: target provider (default `"opencode-go"`).
-  - `modelId`: target model (default `"deepseek-v4-flash"`).
-- **Documentation**:
-  - Full trilingual documentation: `README.md` (EN), `docs/README.ru.md` (RU), `docs/README.zh.md` (ZH).
-
-## 3. Streaming & Buffering Contract
-- **Synchronous Hook Contract**: The `llm/stream` listener returns an `AsyncIterable` synchronously. Returning a `Promise` breaks the Cordis event dispatcher.
-- **Sliding Buffer (KEEP = 96)**: Preserves the terminal window across chunk splits.
-- **Tag Balancing**: Tracks opening and closing DSML tags across the stream so that only orphaned closing tags at the terminal tail are sanitized, leaving balanced code blocks untouched.
-
-## 4. Do / Don't
-- **Do**:
-  - Preserve fail-open guarantees for all user prose.
-  - Dispose hook registration with `ctx.effect`.
-  - Pass non-target provider/model streams directly through.
-- **Don't**:
-  - Do not make the stream hook async.
-  - Do not drop legitimate DSML discussion in chat.
-  - Do not add heavy client-side UI for simple host middleware.
-
-## 5. Decisions Log
-- **2026-09-06**: Added `ctx.effect` lifecycle wrapper and switched patch to schema-driven defaults (`#8, #9`).
-- **2026-09-12**: Changed schema default mode to `sanitize` for out-of-the-box protection, implemented robust open/close tag balancing across streaming chunks, and tracked `package-lock.json` (`#11`).