@dsh-plus/subagent-model 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsh-plus/subagent-model",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "dsh-plus service+ui plugin: 为 subagent/subagent_fork 等子代理按提供商配置模型与思考程度（或继承主代理）",
   "type": "module",
   "main": "lib/index.js",
@@ -31,7 +31,9 @@
       "platform": "web"
     }
   },
-  "dependencies": {},
+  "dependencies": {
+    "@dsh-plus/shared": "0.1.3"
+  },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
     "@deepseek-ai/dsh-settings": "^0.1.0-rc.8",

package/src/client/card.tsx

@@ -1,18 +1,34 @@
 /**
  * 「子代理模型配置」配置卡片：注册进 settings.plugin.item 插槽（官方插件配置页）。
- * 交互对齐官方卡片：折叠/展开、staged draft、未保存标记、保存/放弃。
- * 配置读写走官方 settingsScope 传输（scope.ts）：value 为 schema 解析后的
- * 命名空间值（enabled + entries），行集合 = 目录返回的已注册子代理 provider
+ * 外壳与基础控件走 @dsh-plus/shared/client 套件（CardChrome/CheckRow/SelectField）。
+ * 配置读写走官方 settingsScope 传输：value 为 schema 解析后的命名空间值
+ * （enabled + entries），行集合 = 目录返回的已注册子代理 provider
  * ∪ 已配置条目，保存时全量写回 entries（未配置的新 provider 行以默认空值
  * 落盘，自文档化）；「模型目录」为唯一保留的自定义端点。
  * @module subagent-model/client/card
  */
-import { type ReactElement, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 
+import {
+  CardChrome,
+  type CardStatusState,
+  CheckRow,
+  IDLE_STATUS,
+  type Scope,
+  SelectField,
+  type SelectOption,
+  type SettingsApi,
+} from '@dsh-plus/shared/client'
+import { type ReactElement, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 import { SETTINGS_NS } from '../ns.ts'
 import { type CatalogProvider, fetchCatalog, type ModelCatalog } from './api.ts'
-import { CheckRow, SelectField, type SelectOption } from './fields.tsx'
-import type { Scope, SettingsApi } from './scope.ts'
+import {
+  type ConfigValue,
+  type Draft,
+  type DraftRow,
+  draftFrom,
+  EMPTY_ROW,
+  toPatch,
+} from './draft.ts'
 
 export interface CardProps {
   t(key: string): string
@@ -20,70 +36,9 @@ export interface CardProps {
   api: SettingsApi
 }
 
-/** settings 命名空间的解析值（无 secret 字段）。 */
-export interface ConfigValue {
-  enabled: boolean
-  entries: Record<string, WireEntry>
-}
-
-export interface WireEntry {
-  enabled: boolean
-  provider: string
-  model: string
-  reasoningEffort: string
-}
-
-interface DraftRow {
-  enabled: boolean
-  provider: string
-  model: string
-  reasoningEffort: string
-}
-
-interface Draft {
-  enabled: boolean
-  rows: Record<string, DraftRow>
-}
-
-interface Status {
-  kind: 'idle' | 'ok' | 'error'
-  text: string
-}
-
-const IDLE_STATUS: Status = { kind: 'idle', text: '' }
-const EMPTY_ROW: DraftRow = {
-  enabled: false,
-  provider: '',
-  model: '',
-  reasoningEffort: 'inherit',
-}
 const EFFORT_INHERIT = 'inherit'
 const EFFORT_DEFAULT = 'default'
 
-function draftFrom(value: ConfigValue, catalog: ModelCatalog | null): Draft {
-  const rows: Record<string, DraftRow> = {}
-  const names = new Set<string>()
-  for (const name of catalog?.subagentProviders ?? []) names.add(name)
-  for (const name of Object.keys(value.entries).sort()) names.add(name)
-  for (const name of names) {
-    const entry = value.entries[name]
-    rows[name] =
-      entry === undefined
-        ? { ...EMPTY_ROW }
-        : {
-            enabled: entry.enabled,
-            provider: entry.provider,
-            model: entry.model,
-            reasoningEffort: entry.reasoningEffort,
-          }
-  }
-  return { enabled: value.enabled, rows }
-}
-
-function toPatch(draft: Draft): Record<string, unknown> {
-  return { enabled: draft.enabled, entries: draft.rows }
-}
-
 function unknownOption(value: string, label: string): SelectOption {
   return { value, label: `${value}（${label}）` }
 }
@@ -152,6 +107,7 @@ function RowBlock(props: RowBlockProps): ReactElement {
       <div className="dsm-rowHead">
         <span className="dsm-rowName">{name}</span>
         <CheckRow
+          prefix="dsm"
           id={`dsm-row-${name}`}
           label={t('rowEnabled')}
           checked={row.enabled}
@@ -161,6 +117,7 @@ function RowBlock(props: RowBlockProps): ReactElement {
       </div>
       <p className="dsm-rowHint">{t('rowHint')}</p>
       <SelectField
+        prefix="dsm"
         id={`dsm-provider-${name}`}
         label={t('provider')}
         hint={t('providerHint')}
@@ -170,6 +127,7 @@ function RowBlock(props: RowBlockProps): ReactElement {
         onEdit={(v) => onEdit({ ...row, provider: v })}
       />
       <SelectField
+        prefix="dsm"
         id={`dsm-model-${name}`}
         label={t('model')}
         hint={t('modelHint')}
@@ -181,6 +139,7 @@ function RowBlock(props: RowBlockProps): ReactElement {
         onEdit={(v) => onEdit({ ...row, model: v })}
       />
       <SelectField
+        prefix="dsm"
         id={`dsm-effort-${name}`}
         label={t('effort')}
         hint={t('effortHint')}
@@ -205,7 +164,7 @@ export function SubagentModelCard(props: CardProps): ReactElement | null {
   const [catalog, setCatalog] = useState<ModelCatalog | null>(null)
   const [catalogFailed, setCatalogFailed] = useState(false)
   const [saving, setSaving] = useState(false)
-  const [status, setStatus] = useState<Status>(IDLE_STATUS)
+  const [status, setStatus] = useState<CardStatusState>(IDLE_STATUS)
 
   // 播种草稿（行集 = 已配置条目）；catalog 到达后只补缺失的 provider 空行，
   // 不覆盖在途编辑；后续 Host 更新同样不覆盖。
@@ -306,97 +265,75 @@ export function SubagentModelCard(props: CardProps): ReactElement | null {
   const rowNames = Object.keys(draft.rows).sort()
   const providerCount = (catalog?.providers ?? []).length
   return (
-    <li className={`dsm-card${open ? ' dsm-cardOpen' : ''}`}>
-      <button
-        type="button"
-        className="dsm-header"
-        aria-expanded={open}
-        aria-label={`${t(open ? 'collapse' : 'expand')}: ${t('title')}`}
-        onClick={() => setOpen(!open)}
-      >
-        <span className="dsm-headText">
-          <span className="dsm-name">{t('title')}</span>
-          <span className="dsm-description">{t('description')}</span>
-        </span>
-        {dirty ? <span className="dsm-pending">{t('unsaved')}</span> : null}
-        <span className={`dsm-chevron${open ? ' dsm-chevronOpen' : ''}`}>▾</span>
-      </button>
-      {open ? (
-        <div className="dsm-body">
-          {disabled ? (
-            <p className="dsm-empty" role="status">
-              {t('readOnly')}
-            </p>
-          ) : null}
-          <CheckRow
-            id="dsm-enabled"
-            label={t('enabled')}
-            checked={draft.enabled}
-            disabled={disabled}
-            onEdit={(v) => edit('enabled', v)}
-          />
-          {catalogFailed ? (
-            <div className="dsm-banner" role="status">
-              <span>{t('catalogError')}</span>
-              <button type="button" className="dsm-bannerRetry" onClick={onRetryCatalog}>
-                {t('catalogRetry')}
-              </button>
-            </div>
-          ) : null}
-          {catalog === null && !catalogFailed ? (
-            <p className="dsm-empty" role="status">
-              {t('catalogLoading')}
-            </p>
-          ) : null}
-          {rowNames.length === 0 ? (
-            <p className="dsm-empty" role="status">
-              {t('noRows')}
-            </p>
-          ) : null}
-          {rowNames.map((name) => (
-            <RowBlock
-              key={name}
-              name={name}
-              row={draft.rows[name] ?? { ...EMPTY_ROW }}
-              catalog={catalog}
-              disabled={disabled}
-              t={t}
-              onEdit={(row) => editRow(name, row)}
-            />
-          ))}
-          <p className="dsm-hint dsm-rowHint">{providerCount > 0 ? t('rowDesc') : ''}</p>
-          <div className="dsm-footer">
-            {status.kind !== 'idle' ? (
-              <p
-                className={`dsm-status${status.kind === 'error' ? ' dsm-statusError' : ''}`}
-                role="status"
-              >
-                {status.text}
-              </p>
-            ) : null}
-            <button
-              type="button"
-              className="dsm-btn dsm-btnGhost"
-              disabled={!dirty || saving}
-              onClick={() => {
-                setDraft(draftFrom(value, catalog))
-                setStatus(IDLE_STATUS)
-              }}
-            >
-              {t('discard')}
-            </button>
-            <button
-              type="button"
-              className="dsm-btn dsm-btnPrimary"
-              disabled={!dirty || invalid || saving || disabled}
-              onClick={onSave}
-            >
-              {t(saving ? 'saving' : 'save')}
-            </button>
-          </div>
+    <CardChrome
+      prefix="dsm"
+      title={t('title')}
+      description={t('description')}
+      open={open}
+      onToggle={setOpen}
+      statusBadge={{ text: t(draft.enabled ? 'enabledOn' : 'enabledOff'), on: draft.enabled }}
+      dirty={dirty}
+      dirtyLabel={t('unsaved')}
+      readOnlyNotice={disabled ? t('readOnly') : undefined}
+      status={status}
+      actions={[
+        {
+          key: 'discard',
+          label: t('discard'),
+          disabled: !dirty || saving,
+          onClick: () => {
+            setDraft(draftFrom(value, catalog))
+            setStatus(IDLE_STATUS)
+          },
+        },
+        {
+          key: 'save',
+          label: t(saving ? 'saving' : 'save'),
+          variant: 'primary',
+          disabled: !dirty || invalid || saving || disabled,
+          onClick: onSave,
+        },
+      ]}
+    >
+      <CheckRow
+        prefix="dsm"
+        id="dsm-enabled"
+        label={t('enabled')}
+        checked={draft.enabled}
+        disabled={disabled}
+        onEdit={(v) => edit('enabled', v)}
+      />
+      {catalogFailed ? (
+        <div className="dsm-banner" role="status">
+          <span>{t('catalogError')}</span>
+          <button type="button" className="dsm-bannerRetry" onClick={onRetryCatalog}>
+            {t('catalogRetry')}
+          </button>
         </div>
       ) : null}
-    </li>
+      {catalog === null && !catalogFailed ? (
+        <p className="dsm-empty" role="status">
+          {t('catalogLoading')}
+        </p>
+      ) : null}
+      {rowNames.length === 0 ? (
+        <p className="dsm-empty" role="status">
+          {t('noRows')}
+        </p>
+      ) : null}
+      {rowNames.map((name) => (
+        <RowBlock
+          key={name}
+          name={name}
+          row={draft.rows[name] ?? { ...EMPTY_ROW }}
+          catalog={catalog}
+          disabled={disabled}
+          t={t}
+          onEdit={(row) => editRow(name, row)}
+        />
+      ))}
+      <p className="dsm-hint dsm-rowHint">{providerCount > 0 ? t('rowDesc') : ''}</p>
+    </CardChrome>
   )
 }
 

package/src/client/client.ts

@@ -4,23 +4,20 @@
  * （包装见 tsdown.config.ts）；样式沿用官方 data-plugin-css 约定，HMR 据此卸载。
  *
  * 类型说明：浏览器半只用到 slots/locale/connection/remote 的很窄一面，
- * 此处以最小本地接口声明（见 ./scope.ts），避免为构建期类型引入整条官方
- * client 依赖树；运行时契约以官方 dsh-client-ui-settings-plugins 的
- * settings.plugin.item 插槽与 dsh-client-connection 的 settings RPC 面为准。
+ * scope 与基础控件走 @dsh-plus/shared/client 套件（收编自本插件原实现）。
  * rc7 起该插槽为 keyed 槽位：key 必须是卡片编辑的 settings 命名空间
  * （即服务端 settingsNamespace() 注册的同一字面量，见 ../ns.ts），
  * 官方配置页按此 key 与 Host 已注册命名空间配对分发。
  * 配置读写经官方 settings RPC 直连（rc7 起第三方命名空间全量开放；
- * 不复用 settingsScope 服务——非 loopback 页面下它无数据，见 scope.ts）；
+ * 不复用 settingsScope 服务——非 loopback 页面下它无数据）；
  * 自定义端点仅剩「模型目录」（api.ts）。
  * @module @dsh-plus/subagent-model/client
  */
 import type { Context } from '@deepseek-ai/cordis'
-
+import { createApiScope } from '@dsh-plus/shared/client'
 import { SETTINGS_NS } from '../ns.ts'
 import { SubagentModelCard } from './card.tsx'
 import { en, NS, zh } from './i18n.ts'
-import type { Scope, SettingsApi } from './scope.ts'
 import { injectStyle } from './styles.ts'
 
 export const name = 'dsh-plus-subagent-model'
@@ -43,7 +40,7 @@ interface RemoteLike {
 }
 
 interface ConnectionLike {
-  api: { settings: SettingsApi }
+  api: { settings: Parameters<typeof createApiScope>[0] }
 }
 
 interface ClientContext {
@@ -55,82 +52,6 @@ interface ClientContext {
   effect(execute: () => () => void, label?: string): unknown
 }
 
-/**
- * api 直连实现的命名空间 scope（官方配置页 tab 同款模式）。
- * 读：describe 取命名空间视图（脱敏 value/revision + 顶层 writable）；
- * 刷新：remote `settings/document-updated`（按命名空间过滤）与
- * `connection/reset`；generation 防旧读覆盖新发布。任何页面 origin
- * （loopback 或 tailnet 信任域名）下行为一致。
- */
-function createApiScope(api: SettingsApi, ns: string, c: ClientContext): Scope {
-  let state: ScopeSnapshot = {
-    status: 'loading',
-    value: undefined,
-    revision: undefined,
-    writable: false,
-  }
-  const listeners = new Set<() => void>()
-  let generation = 0
-  const publish = (next: ScopeSnapshot): void => {
-    state = next
-    for (const listener of [...listeners]) listener()
-  }
-  const load = async (): Promise<void> => {
-    const gen = ++generation
-    let response: Awaited<ReturnType<SettingsApi['describe']>>
-    try {
-      response = await api.describe({})
-    } catch {
-      return
-    }
-    if (gen !== generation || !response.result.ok) return
-    const writable = response.result.value?.writable ?? false
-    const view = response.result.value?.namespaces.find((candidate) => candidate.ns === ns)
-    if (view === undefined) {
-      publish({
-        status: 'unavailable',
-        value: undefined,
-        revision: undefined,
-        writable,
-      })
-      return
-    }
-    publish({
-      status: 'ready',
-      value: view.value,
-      revision: view.revision,
-      writable,
-    })
-  }
-  const refresh = (namespace?: unknown): void => {
-    if (namespace !== undefined && namespace !== ns) return
-    void load()
-  }
-  const disposers = [
-    c.get('remote').$on('settings/document-updated', refresh),
-    c.on('connection/reset', () => {
-      void load()
-    }),
-  ]
-  c.effect(
-    () => () => {
-      for (const dispose of disposers) dispose()
-    },
-    'subagent-model: settings scope',
-  )
-  void load()
-  return {
-    getSnapshot: () => state,
-    subscribe: (listener: () => void) => {
-      listeners.add(listener)
-      return () => {
-        listeners.delete(listener)
-      }
-    },
-    load,
-  }
-}
-
 export function apply(ctx: Context): void {
   const c = ctx as unknown as ClientContext
   const tag = injectStyle()
@@ -142,7 +63,7 @@ export function apply(ctx: Context): void {
   )
   c.effect(() => c.locale.register(NS, { zh, en }), 'subagent-model: locale')
   const api = c.get('connection').api.settings
-  const scope = createApiScope(api, SETTINGS_NS, c)
+  const scope = createApiScope(api, SETTINGS_NS, c, 'subagent-model: settings scope')
   c.slots.inject('settings.plugin.item', () =>
     c.slots.register(
       {

package/src/client/draft.ts

@@ -0,0 +1,69 @@
+/**
+ * 配置卡片的可编辑草稿模型：ConfigValue ↔ Draft 转换与提交补丁（纯函数，
+ * 与渲染分离以便单测）。行集合 = 目录返回的已注册子代理 provider ∪ 已配置条目；
+ * 未配置的新 provider 行以默认空值落盘（自文档化）。
+ * @module subagent-model/client/draft
+ */
+import type { ModelCatalog } from './api.ts'
+
+/** settings 命名空间的解析值（无 secret 字段）。 */
+export interface ConfigValue {
+  enabled: boolean
+  entries: Record<string, WireEntry>
+}
+
+export interface WireEntry {
+  enabled: boolean
+  provider: string
+  model: string
+  reasoningEffort: string
+}
+
+export interface DraftRow {
+  enabled: boolean
+  provider: string
+  model: string
+  reasoningEffort: string
+}
+
+export interface Draft {
+  enabled: boolean
+  rows: Record<string, DraftRow>
+}
+
+export const EMPTY_ROW: DraftRow = {
+  enabled: false,
+  provider: '',
+  model: '',
+  reasoningEffort: 'inherit',
+}
+
+/** 行集 = 目录 subagentProviders ∪ 已配置条目；目录行缺省为空行。 */
+export function draftFrom(value: ConfigValue, catalog: ModelCatalog | null): Draft {
+  const rows: Record<string, DraftRow> = {}
+  const names = new Set<string>()
+  for (const name of catalog?.subagentProviders ?? []) names.add(name)
+  for (const name of Object.keys(value.entries).sort()) names.add(name)
+  for (const name of names) {
+    const entry = value.entries[name]
+    rows[name] =
+      entry === undefined
+        ? { ...EMPTY_ROW }
+        : {
+            enabled: entry.enabled,
+            provider: entry.provider,
+            model: entry.model,
+            reasoningEffort: entry.reasoningEffort,
+          }
+  }
+  return { enabled: value.enabled, rows }
+}
+
+export function toPatch(draft: Draft): Record<string, unknown> {
+  // entries 按键排序物化：dirty 比较走 JSON.stringify，而草稿的播种路径
+  // （先 entries 后补目录空行）与 draftFrom（先目录后 entries）键序不同，
+  // 不排序会出现「未改动却永久 dirty」的假阳性。
+  const entries: Record<string, DraftRow> = {}
+  for (const name of Object.keys(draft.rows).sort()) entries[name] = draft.rows[name]
+  return { enabled: draft.enabled, entries }
+}

package/src/client/i18n.ts

@@ -1,11 +1,13 @@
 /**
  * 配置卡片文案（zh/en）。经 ctx.locale.register 注册、bind 取用，与官方卡片同机制。
+ * 公共键（save/discard/unsaved 等）来自 shared 的 common 字典，本文件只维护业务键。
  * @module subagent-model/client/i18n
  */
+import { commonEn, commonZh, mergeDict } from '@dsh-plus/shared/client'
 
 export const NS = 'dsh-plus-subagent-model'
 
-export const zh: Record<string, string> = {
+const ownZh = {
   title: '子代理模型配置',
   description: '为 subagent / subagent_fork 等子代理单独指定提供商、模型与思考程度，或继承主代理。',
   enabled: '启用插件',
@@ -28,20 +30,10 @@ export const zh: Record<string, string> = {
   catalogRetry: '重试',
   catalogLoading: '目录加载中…',
   unknownValue: '目录外',
-  save: '保存',
-  saving: '保存中…',
-  discard: '放弃',
-  unsaved: '未保存',
-  saveFailed: '保存失败：',
-  loading: '加载中…',
-  unavailable: '配置服务不可用。',
-  readOnly: '当前部署无 settings provider，配置为只读；请编辑 settings.yaml。',
-  expand: '展开',
-  collapse: '收起',
   invalidModel: '模型不能脱离提供商单独配置。',
 }
 
-export const en: Record<string, string> = {
+const ownEn = {
   title: 'Subagent model config',
   description:
     'Pick a provider, model, and thinking effort for subagent / subagent_fork children, or inherit from the main agent.',
@@ -66,15 +58,8 @@ export const en: Record<string, string> = {
   catalogRetry: 'Retry',
   catalogLoading: 'Loading catalog\u2026',
   unknownValue: 'outside catalog',
-  save: 'Save',
-  saving: 'Saving\u2026',
-  discard: 'Discard',
-  unsaved: 'Unsaved',
-  saveFailed: 'Save failed: ',
-  loading: 'Loading\u2026',
-  unavailable: 'Configuration service unavailable.',
-  readOnly: 'No settings provider in this deployment; edit settings.yaml instead.',
-  expand: 'Expand',
-  collapse: 'Collapse',
   invalidModel: 'Model cannot be set without a provider.',
 }
+
+export const zh: Record<string, string> = mergeDict(commonZh, ownZh)
+export const en: Record<string, string> = mergeDict(commonEn, ownEn)

package/src/client/styles.ts

@@ -1,66 +1,30 @@
 /**
- * 配置卡片样式：沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载），
- * 视觉对齐官方卡片（--dsw-alias-* 变量），不覆盖上游任何选择器。
+ * 配置卡片样式：基础规则走 @dsh-plus/shared/client 的 cardCss('dsm')，
+ * 本文件只补插件特有规则（provider 行块 / banner / 目录空态）。
+ * 沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载）。
  * @module subagent-model/client/styles
  */
+import { cardCss, injectCardStyle } from '@dsh-plus/shared/client'
 
 export const PLUGIN_ID = '@dsh-plus/subagent-model'
-export const STYLE_TAG_ID = `${PLUGIN_ID}/card.css`
 
-export const cardCss = `
-.dsm-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none;transition:border-color .16s,background .16s}
-.dsm-card:hover{border-color:var(--dsw-alias-label-dimmed)}
-.dsm-cardOpen{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}
-.dsm-header{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}
-.dsm-header:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
-.dsm-headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}
-.dsm-name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}
-.dsm-description{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}
-.dsm-chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s;font-size:12px}
-.dsm-chevronOpen{transform:rotate(180deg)}
-.dsm-pending{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
-.dsm-body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}
-.dsm-field{flex-direction:column;gap:6px;padding:12px 0;display:flex}
-.dsm-field+.dsm-field{border-top:1px solid var(--dsw-alias-border-l2)}
-.dsm-head{align-items:center;gap:8px;display:flex}
-.dsm-label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}
-.dsm-select{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);height:34px;min-width:0;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 8px;font-size:13px}
-.dsm-select:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}
-.dsm-select:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
-.dsm-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
-.dsm-invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}
-.dsm-checkRow{align-items:center;gap:8px;display:flex;padding:6px 0}
-.dsm-checkRow input{accent-color:var(--dsw-alias-brand-primary)}
-.dsm-checkRow label{color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5;cursor:pointer}
+const extraCss = `
 .dsm-row{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);border-radius:10px;margin:12px 0 0;padding:4px 12px 10px}
 .dsm-rowHead{align-items:center;gap:8px;padding:8px 0 2px;display:flex}
 .dsm-rowName{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;line-height:1.5}
 .dsm-rowHint{color:var(--dsw-alias-label-tertiary);margin:0 0 4px;font-size:12px;line-height:1.5}
-.dsm-groupLabel{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600;padding:12px 0 2px;margin:0}
-.dsm-status{min-width:0;color:var(--dsw-alias-label-secondary);flex:1;margin:0;font-size:12px;line-height:1.5}
-.dsm-statusError{color:var(--dsw-alias-label-error)}
 .dsm-banner{background:var(--dsw-alias-interactive-bg-hover-danger);color:var(--dsw-alias-state-error-primary);justify-content:space-between;align-items:center;gap:8px;border-radius:8px;margin-top:12px;padding:7px 8px;font-size:12px;line-height:18px;display:flex}
 .dsm-bannerRetry{color:inherit;font:inherit;cursor:pointer;background:0 0;border:none;flex:none;padding:0;font-weight:600}
 .dsm-empty{color:var(--dsw-alias-label-tertiary);margin:12px 0 0;font-size:12px;line-height:1.5}
-.dsm-footer{border-top:1px solid var(--dsw-alias-border-l2);justify-content:flex-end;align-items:center;gap:8px;padding:12px 0 4px;display:flex;flex-wrap:wrap}
-.dsm-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:8px;padding:5px 14px;font-size:13px;line-height:1.5}
-.dsm-btnGhost{border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);background:0 0}
-.dsm-btnGhost:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-dimmed)}
-.dsm-btnPrimary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}
-.dsm-btn:disabled{opacity:.4;cursor:default}
-.dsm-btn:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+@media (max-width:767px){
+.dsm-row{padding:2px 8px 8px}
+.dsm-rowHead{flex-wrap:wrap}
+}
 `
 
+export const cardCssAll = cardCss('dsm', extraCss)
+
 /** 幂等注入样式标签；返回标签（已存在或环境无 document 时为 null）。 */
 export function injectStyle(): HTMLStyleElement | null {
-  if (typeof document === 'undefined') return null
-  if (document.querySelector(`style[data-plugin-css=${JSON.stringify(STYLE_TAG_ID)}]`) !== null) {
-    return null
-  }
-  const tag = document.createElement('style')
-  tag.dataset.plugin = PLUGIN_ID
-  tag.dataset.pluginCss = STYLE_TAG_ID
-  tag.textContent = cardCss
-  document.head.appendChild(tag)
-  return tag
+  return injectCardStyle(PLUGIN_ID, cardCssAll)
 }