@goodandready/dsh-dsml-artifact-guard 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -0,0 +1,74 @@
+# Changelog
+
+All notable changes to the `@goodandready/dsh-dsml-artifact-guard` plugin are documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+---
+
+## [0.2.2] - 2026-09-18
+
+### Fixed
+- **Settings reachable again (`lib/client.js`)**: the settings card registered into `settings.plugin.item`, a slot the current DSH core no longer renders, so the plugin's settings were unreachable. The surface now registers into the Plugins page row seat `plugins.row.config`, keyed `@goodandready/dsh-dsml-artifact-guard#dsh-dsml-artifact-guard`: the plugin's row gains a configure control whose page is the settings form (`view: 'page'`, rendered bare — `PluginCard` accepts `bare` and drops the card wrapper because the host page draws the title, icon, crumb and padding) plus a one-line state under the title (`view: 'summary'`). The legacy seat stays registered as a fallback for older cores ([#31](http://192.168.1.111:3005/goodandready/dsh-dsml-artifact-guard/issues/31)).
+- **Row-seat guard (`test/row-config-seat.test.js`)**: asserts the row key, the seat order (row seat first, legacy seat kept) and the bare page render.
+
+---
+
+## [0.2.1] - 2026-09-18
+
+### Fixed
+- **Theme Semantic Standardization (`lib/client.js`)**: Eliminated all 42 hardcoded hex/rgba color literals in favor of canonical DeepSeek Harness theme CSS custom properties (`--dsw-alias-...`) and `color-mix()` tints, guaranteeing high contrast and legibility across Dark and Light modes ([#26](https://github.com/GooDAnDReaDY/dsh-dsml-artifact-guard/issues/26)).
+- **Theme Regression Test Guard (`test/theme.test.js`)**: Added automated regression test asserting zero hardcoded hex and rgba color literals in client surfaces.
+- **Repository Hygiene**: Fixed `.gitignore` whitespace rule for `AGENTS.md` and untracked `package-lock.json` in alignment with zero-dependency architecture.
+
+---
+
+## [0.2.0] - 2026-09-17
+
+### Added
+- **Native Settings Card (`lib/client.js`)**: Registered UI card in slot `settings.plugin.item` with snapshot status check, configuration inputs, and disabled warning indicator ([#17](https://github.com/GooDAnDReaDY/dsh-dsml-artifact-guard/issues/17)).
+- **One-Click In-Place Updater (`lib/updater.js`)**: Standard HTTP endpoint `/api/dsh-dsml-artifact-guard/update` with SemVer comparison, loopback/same-origin protection, and update execution ([#18](https://github.com/GooDAnDReaDY/dsh-dsml-artifact-guard/issues/18)).
+- **Core Primitive Chevron**: Requested `IconChevronDownOutline14` with SVG fallback.
+
+### Fixed
+- **Package Hygiene**: Deduplicated multilingual READMEs in `docs/` and restricted `package.json#files` allowlist, reducing package size by ~40% ([#20](https://github.com/GooDAnDReaDY/dsh-dsml-artifact-guard/issues/20)).
+- **Repository Cleanliness**: Removed `AGENTS.md` from git tracking ([#19](https://github.com/GooDAnDReaDY/dsh-dsml-artifact-guard/issues/19)) and eliminated legacy `.tgz` archives from source tree ([#21](https://github.com/GooDAnDReaDY/dsh-dsml-artifact-guard/issues/21)).
+
+---
+
+## [0.1.5] - 2026-09-17
+
+### Documentation
+- Fixed Mermaid diagram edge label syntax on GitHub and added standard community support block ([#15](https://github.com/GooDAnDReaDY/dsh-dsml-artifact-guard/issues/15)).
+
+---
+
+## [0.1.4] - 2026-09-12
+
+### Changed
+- Schema `mode` default set to `sanitize` for out-of-the-box protection ([#11](https://github.com/GooDAnDReaDY/dsh-dsml-artifact-guard/issues/11)).
+- Added robust open/close tag balancing in `sanitizeDsmlArtifacts` to handle prior closed blocks in prose ([#11](https://github.com/GooDAnDReaDY/dsh-dsml-artifact-guard/issues/11)).
+- Updated design contract documentation and verified package hygiene ([#11](https://github.com/GooDAnDReaDY/dsh-dsml-artifact-guard/issues/11)).
+
+---
+
+## [0.1.3] - 2026-09-06
+
+### Changed
+- Wrapped `llm/stream` handler in `ctx.effect` for clean lifecycle unmount ([#8](https://github.com/GooDAnDReaDY/dsh-dsml-artifact-guard/issues/8)).
+- Updated `cordis.patch.yml` to use `config: {}`, allowing schema defaults to apply automatically unless overridden ([#9](https://github.com/GooDAnDReaDY/dsh-dsml-artifact-guard/issues/9)).
+
+---
+
+## [0.1.2] - 2026-09-02
+
+### Fixed
+- Packaging and runtime compatibility adjustments for DSH profile loader.
+
+---
+
+## [0.1.1] - 2026-08-30
+
+### Added
+- Initial release: synchronous, fail-open DSML protocol closing tag sanitizer for DeepSeek Harness model streams.

package/README.md

@@ -110,6 +110,21 @@ The guard retains a minimal 96-byte window until the next chunk or `finish` even
 * **`audit`**: Emits diagnostic logs with `ctx.logger.info(...)` without modifying the user-visible stream.
 * **`disabled`**: Bypasses processing entirely.
 
+### 5. Native Web UI Settings Card
+Registered directly in the DeepSeek Harness `settings.plugin.item` slot (`lib/client.js`):
+* **Reactive Configuration**: Adjust `mode`, `providerId`, and `modelId` on the fly without restarting the harness, powered by reactive `scope.watch`.
+* **Snapshot State Awareness**: Gracefully handles snapshot loading, ready, and unavailable states.
+* **Protection Bypass Warning**: Displays a prominent `OFF` badge and warning banner when the guard is set to `disabled`.
+
+### 6. One-Click In-Place Auto-Updater
+A canonical HTTP management route (`/api/dsh-dsml-artifact-guard/update`) mounted via `lib/updater.js`:
+* **SemVer Inspection**: Queries the registry and compares versions with full pre-release support.
+* **Loopback & Same-Origin Protection**: Write mutations (`POST`) are strictly restricted to local loopback connections with valid origin headers.
+* **Clean Invocation**: Executes package updates safely without risky CLI bypass flags.
+
+### 7. Full Dark & Light Theme Compliance
+All client UI styles are strictly tokenized via DeepSeek Harness `--dsw-alias-...` CSS custom properties and `color-mix()` functions with zero hardcoded hex or rgba color literals. High contrast and accessibility are guaranteed in both Dark and Light themes, guarded by automated regression tests (`test/theme.test.js`).
+
 ---
 
 ## 📦 Installation
@@ -144,6 +159,13 @@ dsh-dsml-artifact-guard:
 | `providerId` | `string` | `"opencode-go"` | Target provider identifier exhibiting leaked tags |
 | `modelId` | `string` | `"deepseek-v4-flash"` | Target model identifier exhibiting leaked tags |
 
+### HTTP Management Endpoints
+
+| Method | Endpoint | Access | Description |
+|:---|:---|:---|:---|
+| `GET` | `/api/dsh-dsml-artifact-guard/update` | Web UI / Localhost | Retrieves current version, latest registry version, and update status |
+| `POST` | `/api/dsh-dsml-artifact-guard/update` | Loopback & Same-Origin | Triggers in-place package update via DSH CLI |
+
 ---
 
 ## 🧪 Testing
@@ -161,25 +183,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.
-#9: `cordis.patch.yml` uses `config: {}` — schema defaults (`mode: audit`, provider/model ids) apply unless overridden in host config.
-
-## Changed in v0.1.4
-
-#11: schema `mode` default set to `sanitize` for out-of-the-box protection.
-#11: robust open/close tag balancing in `sanitizeDsmlArtifacts` to handle prior closed blocks in prose.
-#11: repo hygiene with tracked `package-lock.json` and design contract.
-
-## 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.
+For a complete release history and version migration notes, see [CHANGELOG.md](CHANGELOG.md).

package/README.ru.md

@@ -161,25 +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.
-#9: `cordis.patch.yml` uses `config: {}` — schema defaults (`mode: audit`, provider/model ids) apply unless overridden in host config.
-
-## Изменения в v0.1.4
-
-#11: значение `mode` по умолчанию в схеме переведено на `sanitize` для защиты «из коробки».
-#11: балансировка открывающих и закрывающих тегов в `sanitizeDsmlArtifacts` при наличии закрытых блоков в прозе.
-#11: гигиена репозитория с отслеживаемым `package-lock.json` и дизайн-контрактом.
-
-## Изменения в 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.
+Полная история версий и изменений доступна в файле [CHANGELOG.md](CHANGELOG.md).

package/README.zh.md

@@ -161,25 +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.
-#9: `cordis.patch.yml` uses `config: {}` — schema defaults (`mode: audit`, provider/model ids) apply unless overridden in host config.
-
-## v0.1.4 变更说明
-
-#11: 将 schema 中 `mode` 默认值设置为 `sanitize`，实现开箱即用的清理保护。
-#11: 在 `sanitizeDsmlArtifacts` 中实现严格的开闭标签深度平衡，精准处理正文中已闭合标签与末尾泄漏标签。
-#11: 纳入 `package-lock.json` 跟踪并完善设计契约。
-
-## 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 打包归档。
+完整版本演进与更新记录详见 [CHANGELOG.md](CHANGELOG.md)。

package/lib/client.js

@@ -6,6 +6,12 @@ window.__ModuleLoader__.load({
     Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
     const React = require('react');
     const NS = '@goodandready/dsh-dsml-artifact-guard';
+    // Row seat (#31): the Plugins page keys a row's configuration page by
+    // '<package name>#<row id>', with the row id exactly as cordis.patch.yml
+    // declares it. Keep all three in step with package.json and the patch.
+    const PKG = '@goodandready/dsh-dsml-artifact-guard';
+    const ROW_ID = 'dsh-dsml-artifact-guard';
+    const ROW_CONFIG_KEY = PKG + '#' + ROW_ID;
 
     // Query core chevron primitive when available; fallback SVG otherwise
     let CoreChevron = null;
@@ -77,7 +83,7 @@ window.__ModuleLoader__.load({
       modelId: 'deepseek-v4-flash',
     };
 
-    function PluginCard({ ctx: _ctx, t }) {
+    function PluginCard({ ctx: _ctx, t, bare }) {
       const [expanded, setExpanded] = React.useState(false);
       const [draft, setDraft] = React.useState(DEFAULTS);
       const [status, setStatus] = React.useState('loading');
@@ -241,19 +247,7 @@ window.__ModuleLoader__.load({
 
       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, rgba(255,255,255,0.08))',
-          background: 'var(--dsw-alias-bg-card, rgba(255,255,255,0.02))',
-          overflow: 'hidden',
-          marginBottom: 12,
-        },
-      },
-        // Header
-        React.createElement('div', {
+      const header = React.createElement('div', {
           onClick: () => setExpanded(v => !v),
           style: {
             display: 'flex',
@@ -271,7 +265,7 @@ window.__ModuleLoader__.load({
                 style: {
                   fontSize: 15,
                   fontWeight: 600,
-                  color: 'var(--dsw-alias-label-primary, #f1f5f9)',
+                  color: 'var(--dsw-alias-label-primary)',
                 },
               }, tt('title')),
               React.createElement('span', {
@@ -280,8 +274,8 @@ window.__ModuleLoader__.load({
                   fontWeight: 500,
                   padding: '2px 6px',
                   borderRadius: 6,
-                  background: 'rgba(59,130,246,0.15)',
-                  color: 'var(--dsw-alias-accent-primary, #3b82f6)',
+                  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', {
@@ -290,15 +284,15 @@ window.__ModuleLoader__.load({
                   fontWeight: 600,
                   padding: '2px 6px',
                   borderRadius: 6,
-                  background: 'rgba(239,68,68,0.15)',
-                  color: '#ef4444',
+                  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, #94a3b8)',
+                color: 'var(--dsw-alias-label-secondary)',
               },
             }, tt('sub'))
           ),
@@ -306,20 +300,22 @@ window.__ModuleLoader__.load({
             style: {
               display: 'flex',
               alignItems: 'center',
-              color: 'var(--dsw-alias-label-tertiary, #64748b)',
+              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', {
+        // Body. The row/page seat asks for the form alone: the host page draws
+        // the title, icon and crumb and supplies its own padding, so rendering
+        // our card chrome there would double the border and shift the block.
+        const body = React.createElement('div', {
           style: {
-            padding: '0 16px 16px',
-            borderTop: '1px solid var(--dsw-alias-border-l2, rgba(255,255,255,0.08))',
+            padding: bare ? '0' : '0 16px 16px',
+            borderTop: bare ? 'none' : '1px solid var(--dsw-alias-border-l2)',
           },
         },
           // One-Click Updater block
@@ -327,9 +323,9 @@ window.__ModuleLoader__.load({
             style: {
               padding: '12px 14px',
               margin: '14px 0',
-              background: 'rgba(255,255,255,0.03)',
+              background: 'color-mix(in srgb, var(--dsw-alias-label-primary) 3%, transparent)',
               borderRadius: 8,
-              border: '1px solid var(--dsw-alias-border-l2, rgba(255,255,255,0.08))',
+              border: '1px solid var(--dsw-alias-border-l2)',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'space-between',
@@ -338,19 +334,19 @@ window.__ModuleLoader__.load({
             },
           },
             React.createElement('div', { style: { fontSize: 13, display: 'flex', alignItems: 'center', gap: 8 } },
-              React.createElement('span', { style: { color: 'var(--dsw-alias-label-secondary, #94a3b8)' } },
+              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, #64748b)', fontSize: 12 } },
+              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: '#f59e0b', fontWeight: 600, fontSize: 12 } },
+              !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: '#10b981', fontSize: 12 } },
+              !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: '#ef4444', fontSize: 12 } },
+              updateState.error && React.createElement('span', { style: { color: 'var(--dsw-alias-state-danger-primary, var(--dsw-alias-state-error-primary))', fontSize: 12 } },
                 updateState.error
               )
             ),
@@ -360,8 +356,8 @@ window.__ModuleLoader__.load({
               style: {
                 padding: '6px 14px',
                 borderRadius: 6,
-                background: 'var(--dsw-alias-accent-primary, #3b82f6)',
-                color: '#fff',
+                background: 'var(--dsw-alias-label-primary)',
+                color: 'var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-card))',
                 border: 0,
                 fontSize: 12,
                 fontWeight: 600,
@@ -373,11 +369,11 @@ window.__ModuleLoader__.load({
             style: {
               padding: '8px 12px',
               marginBottom: 12,
-              background: 'rgba(16,185,129,0.1)',
-              color: '#10b981',
+              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 rgba(16,185,129,0.2)',
+              border: '1px solid color-mix(in srgb, var(--dsw-alias-state-success-primary) 20%, transparent)',
             },
           }, updateState.notice),
 
@@ -386,20 +382,20 @@ window.__ModuleLoader__.load({
             style: {
               padding: '8px 12px',
               marginBottom: 14,
-              background: 'rgba(239,68,68,0.1)',
-              color: '#f87171',
+              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 rgba(239,68,68,0.2)',
+              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, #64748b)' },
+            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: '#ef4444' },
+            style: { padding: '16px 0', fontSize: 13, color: 'var(--dsw-alias-state-danger-primary, var(--dsw-alias-state-error-primary))' },
           }, tt('statusUnavailable')),
 
           // Settings Fields
@@ -407,7 +403,7 @@ window.__ModuleLoader__.load({
             // 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, #f1f5f9)' },
+                style: { fontSize: 13, fontWeight: 500, color: 'var(--dsw-alias-label-primary)' },
               }, tt('mode')),
               React.createElement('select', {
                 value: draft.mode,
@@ -415,9 +411,9 @@ window.__ModuleLoader__.load({
                 style: {
                   height: 34,
                   borderRadius: 6,
-                  border: '1px solid var(--dsw-alias-border-l2, rgba(255,255,255,0.08))',
-                  background: 'var(--dsw-alias-bg-field, rgba(0,0,0,0.2))',
-                  color: 'var(--dsw-alias-label-primary, #f1f5f9)',
+                  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,
                 },
@@ -431,7 +427,7 @@ window.__ModuleLoader__.load({
             // 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, #f1f5f9)' },
+                style: { fontSize: 13, fontWeight: 500, color: 'var(--dsw-alias-label-primary)' },
               }, tt('providerId')),
               React.createElement('input', {
                 type: 'text',
@@ -440,9 +436,9 @@ window.__ModuleLoader__.load({
                 style: {
                   height: 34,
                   borderRadius: 6,
-                  border: '1px solid var(--dsw-alias-border-l2, rgba(255,255,255,0.08))',
-                  background: 'var(--dsw-alias-bg-field, rgba(0,0,0,0.2))',
-                  color: 'var(--dsw-alias-label-primary, #f1f5f9)',
+                  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,
                 },
@@ -452,7 +448,7 @@ window.__ModuleLoader__.load({
             // 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, #f1f5f9)' },
+                style: { fontSize: 13, fontWeight: 500, color: 'var(--dsw-alias-label-primary)' },
               }, tt('modelId')),
               React.createElement('input', {
                 type: 'text',
@@ -461,9 +457,9 @@ window.__ModuleLoader__.load({
                 style: {
                   height: 34,
                   borderRadius: 6,
-                  border: '1px solid var(--dsw-alias-border-l2, rgba(255,255,255,0.08))',
-                  background: 'var(--dsw-alias-bg-field, rgba(0,0,0,0.2))',
-                  color: 'var(--dsw-alias-label-primary, #f1f5f9)',
+                  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,
                 },
@@ -477,7 +473,7 @@ window.__ModuleLoader__.load({
                 alignItems: 'center',
                 gap: 12,
                 paddingTop: 12,
-                borderTop: '1px solid var(--dsw-alias-border-l2, rgba(255,255,255,0.08))',
+                borderTop: '1px solid var(--dsw-alias-border-l2)',
                 marginTop: 4,
               },
             },
@@ -489,8 +485,8 @@ window.__ModuleLoader__.load({
                   padding: '0 18px',
                   border: 0,
                   borderRadius: 8,
-                  background: 'var(--dsw-alias-accent-primary, #3b82f6)',
-                  color: '#fff',
+                  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',
@@ -499,15 +495,52 @@ window.__ModuleLoader__.load({
               msg && React.createElement('span', {
                 style: {
                   fontSize: 13,
-                  color: msg === tt('saved') ? '#10b981' : '#f87171',
+                  color: msg === tt('saved') ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-state-danger-primary, var(--dsw-alias-state-error-primary))',
                 },
               }, msg)
             )
           )
-        )
+        );
+      if (bare) {
+        return React.createElement('div', {
+          'data-dsh-plugin': NS,
+          className: 'dsh-dsml-artifact-guard-form',
+        }, body);
+      }
+      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,
+        expanded && body
       );
     }
 
+    // View-aware entry for the host slots that carry a configuration page.
+    // 'plugins.row.config' asks for view:'summary' (the one-liner under the row
+    // title) and view:'page' (the form, bare). The older seat keeps the card.
+    function PluginItem(props) {
+      if (props && props.view === 'summary') {
+        const ctx = props && props.ctx;
+        const lang = (ctx && ctx.locale && typeof ctx.locale.get === 'function' ? ctx.locale.get() : null) || 'en';
+        const dict = String(lang).startsWith('zh') ? zh : en;
+        const tt = typeof props.t === 'function' ? props.t : (k) => dict[k] || en[k] || k;
+        return React.createElement('div', {
+          'data-dsh-plugin': NS,
+          className: 'dsh-dsml-artifact-guard-sub',
+          style: { fontSize: 13, color: 'var(--dsw-alias-label-secondary)' },
+        }, tt('sub'));
+      }
+      return React.createElement(PluginCard, Object.assign({}, props, { bare: true }));
+    }
+
     exports.inject = ['slots', 'settingsScope', 'locale'];
     exports.apply = function apply(ctx) {
       if (typeof ctx.locale?.register === 'function') {
@@ -543,6 +576,21 @@ window.__ModuleLoader__.load({
         }
       }
 
+      // Newest seat first: the Plugins page renders a row's own configuration
+      // page from 'plugins.row.config'. Keep 'settings.plugin.item' below as the
+      // fallback for cores that still render the old card slot.
+      registerSlotWhenReady('plugins.row.config', () =>
+        ctx.slots.register(
+          {
+            name: 'plugins.row.config',
+            key: ROW_CONFIG_KEY,
+            locale: NS,
+            inject: () => ({ ctx }),
+          },
+          PluginItem
+        )
+      );
+
       registerSlotWhenReady('settings.plugin.item', () =>
         ctx.slots.register(
           {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-dsml-artifact-guard",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Sanitizes leaked DeepSeek DSML closing tags from model text streams",
   "type": "module",
   "main": "lib/index.js",
@@ -11,7 +11,8 @@
     "README.md",
     "README.ru.md",
     "README.zh.md",
-    "LICENSE"
+    "LICENSE",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "check": "node --check lib/index.js",