@dsh-plus/subagent-model 0.1.0

package/src/client/card.tsx

@@ -0,0 +1,293 @@
+/**
+ * 「子代理模型配置」配置卡片：注册进 settings.plugin.item 插槽（官方插件配置页）。
+ * 交互对齐官方卡片：折叠/展开、staged draft、未保存标记、保存/放弃；
+ * 数据走自建同源路由（api.ts）。行集合 = 已注册子代理 provider ∪ 已配置条目，
+ * 保存时全量写回 entries（未配置的新 provider 行以默认空值落盘，自文档化）。
+ * @module subagent-model/client/card
+ */
+import { useEffect, useMemo, useState, type ReactElement } from 'react'
+
+import {
+  fetchCatalog, fetchConfig, saveConfig,
+  type CatalogProvider, type ModelCatalog, type WireConfig, type WireEntry, type WirePatch,
+} from './api.ts'
+import { CheckRow, SelectField, type SelectOption } from './fields.tsx'
+
+export interface CardProps {
+  t(key: string): 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 draftFromWire(wire: WireConfig): Draft {
+  const rows: Record<string, DraftRow> = {}
+  const names = [...wire.subagentProviders, ...Object.keys(wire.entries).sort()]
+  for (const name of names) {
+    const entry = wire.entries[name]
+    rows[name] = entry === undefined
+      ? { ...EMPTY_ROW }
+      : {
+          enabled: entry.enabled,
+          provider: entry.provider,
+          model: entry.model,
+          reasoningEffort: entry.reasoningEffort,
+        }
+  }
+  return { enabled: wire.enabled, rows }
+}
+
+function toPatch(draft: Draft): WirePatch {
+  return { enabled: draft.enabled, entries: draft.rows }
+}
+
+function rowNamesOf(wire: WireConfig, draft: Draft): string[] {
+  const names = new Set<string>()
+  for (const name of wire.subagentProviders) names.add(name)
+  for (const name of Object.keys(draft.rows).sort()) names.add(name)
+  return [...names]
+}
+
+function unknownOption(value: string, label: string): SelectOption {
+  return { value, label: `${value}（${label}）` }
+}
+
+function providerOptions(catalog: ModelCatalog | null, row: DraftRow, t: (k: string) => string): SelectOption[] {
+  const options: SelectOption[] = [{ value: '', label: t('inheritProvider') }]
+  for (const provider of catalog?.providers ?? []) options.push({ value: provider.id, label: provider.name })
+  if (row.provider.length > 0 && !options.some((o) => o.value === row.provider)) {
+    options.push(unknownOption(row.provider, t('unknownValue')))
+  }
+  return options
+}
+
+function modelOptions(catalog: ModelCatalog | null, row: DraftRow, t: (k: string) => string): SelectOption[] {
+  const options: SelectOption[] = [{ value: '', label: t('inheritModel') }]
+  const provider = catalog?.providers.find((p) => p.id === row.provider)
+  for (const model of provider?.models ?? []) options.push({ value: model.id, label: model.name })
+  if (row.model.length > 0 && !options.some((o) => o.value === row.model)) {
+    options.push(unknownOption(row.model, t('unknownValue')))
+  }
+  return options
+}
+
+function effortOptions(catalog: ModelCatalog | null, row: DraftRow, t: (k: string) => string): SelectOption[] {
+  const options: SelectOption[] = [
+    { value: EFFORT_INHERIT, label: t('effortInherit') },
+    { value: EFFORT_DEFAULT, label: t('effortDefault') },
+  ]
+  const provider = catalog?.providers.find((p) => p.id === row.provider)
+  const model = provider?.models.find((m) => m.id === row.model)
+  for (const effort of model?.reasoning?.efforts ?? []) options.push({ value: effort.id, label: effort.name })
+  if (row.reasoningEffort.length > 0 && !options.some((o) => o.value === row.reasoningEffort)) {
+    options.push(unknownOption(row.reasoningEffort, t('unknownValue')))
+  }
+  return options
+}
+
+interface RowBlockProps {
+  name: string
+  row: DraftRow
+  catalog: ModelCatalog | null
+  disabled: boolean
+  t(key: string): string
+  onEdit(row: DraftRow): void
+}
+
+function RowBlock(props: RowBlockProps): ReactElement {
+  const { name, row, catalog, disabled, t, onEdit } = props
+  const invalidModel = row.model.length > 0 && row.provider.length === 0
+  return (
+    <div className="dsm-row">
+      <div className="dsm-rowHead">
+        <span className="dsm-rowName">{name}</span>
+        <CheckRow id={`dsm-row-${name}`} label={t('rowEnabled')} checked={row.enabled}
+          disabled={disabled} onEdit={(v) => onEdit({ ...row, enabled: v })} />
+      </div>
+      <p className="dsm-rowHint">{t('rowHint')}</p>
+      <SelectField id={`dsm-provider-${name}`} label={t('provider')} hint={t('providerHint')}
+        value={row.provider} options={providerOptions(catalog, row, t)} disabled={disabled}
+        onEdit={(v) => onEdit({ ...row, provider: v })} />
+      <SelectField id={`dsm-model-${name}`} label={t('model')} hint={t('modelHint')}
+        value={row.model} options={modelOptions(catalog, row, t)} disabled={disabled || row.provider.length === 0}
+        invalid={invalidModel} invalidLabel={t('invalidModel')}
+        onEdit={(v) => onEdit({ ...row, model: v })} />
+      <SelectField id={`dsm-effort-${name}`} label={t('effort')} hint={t('effortHint')}
+        value={row.reasoningEffort} options={effortOptions(catalog, row, t)} disabled={disabled}
+        onEdit={(v) => onEdit({ ...row, reasoningEffort: v })} />
+    </div>
+  )
+}
+
+export function SubagentModelCard(props: CardProps): ReactElement | null {
+  const { t } = props
+  const [open, setOpen] = useState(false)
+  const [wire, setWire] = useState<WireConfig | null>(null)
+  const [draft, setDraft] = useState<Draft | null>(null)
+  const [catalog, setCatalog] = useState<ModelCatalog | null>(null)
+  const [catalogFailed, setCatalogFailed] = useState(false)
+  const [loadFailed, setLoadFailed] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [status, setStatus] = useState<Status>(IDLE_STATUS)
+
+  useEffect(() => {
+    let alive = true
+    fetchConfig()
+      .then((loaded) => {
+        if (!alive) return
+        setWire(loaded)
+        setDraft(draftFromWire(loaded))
+      })
+      .catch(() => {
+        if (alive) setLoadFailed(true)
+      })
+    return () => {
+      alive = false
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!open || catalog !== null) return
+    let alive = true
+    fetchCatalog()
+      .then((loaded) => {
+        if (!alive) return
+        setCatalog(loaded)
+        setCatalogFailed(false)
+      })
+      .catch(() => {
+        if (alive) setCatalogFailed(true)
+      })
+    return () => {
+      alive = false
+    }
+  }, [open, catalog])
+
+  const dirty = useMemo(
+    () => wire !== null && draft !== null &&
+      JSON.stringify(toPatch(draft)) !== JSON.stringify(toPatch(draftFromWire(wire))),
+    [wire, draft],
+  )
+  const invalid = useMemo(
+    () => draft !== null && Object.values(draft.rows).some((row) =>
+      row.model.length > 0 && row.provider.length === 0),
+    [draft],
+  )
+
+  if (loadFailed) return null
+  if (wire === null || draft === null) {
+    return <li className="dsm-card"><p className="dsm-empty">{t('loading')}</p></li>
+  }
+  const edit = <K extends keyof Draft>(key: K, value: Draft[K]): void => {
+    setDraft({ ...draft, [key]: value })
+    setStatus(IDLE_STATUS)
+  }
+  const editRow = (name: string, row: DraftRow): void => {
+    setDraft({ ...draft, rows: { ...draft.rows, [name]: row } })
+    setStatus(IDLE_STATUS)
+  }
+  const onSave = (): void => {
+    setSaving(true)
+    saveConfig(toPatch(draft))
+      .then((saved) => {
+        setWire(saved)
+        setDraft(draftFromWire(saved))
+        setStatus(IDLE_STATUS)
+      })
+      .catch((error: unknown) => {
+        setStatus({ kind: 'error', text: `${t('saveFailed')}${error instanceof Error ? error.message : ''}` })
+      })
+      .finally(() => setSaving(false))
+  }
+  const onRetryCatalog = (): void => {
+    setCatalog(null)
+    setCatalogFailed(false)
+  }
+
+  const disabled = !wire.writable
+  const rowNames = rowNamesOf(wire, draft)
+  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(draftFromWire(wire)); 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>
+        </div>
+      ) : null}
+    </li>
+  )
+}
+
+export type { CatalogProvider }

package/src/client/client.ts

@@ -0,0 +1,63 @@
+/**
+ * 浏览器半入口：注册 locale 字典 + 向 settings.plugin.item 插槽注册「子代理模型配置」卡片。
+ * 构建产物为 window.__ModuleLoader__.load({id, factory}) 形式的 CJS factory
+ * （包装见 tsdown.config.ts）；样式沿用官方 data-plugin-css 约定，HMR 据此卸载。
+ *
+ * 类型说明：浏览器半只用到 slots/locale 的很窄一面，此处以最小本地接口声明，
+ * 避免为构建期类型引入整条官方 client 依赖树；运行时契约以官方
+ * dsh-client-ui-settings-plugins 的 settings.plugin.item 插槽为准。
+ * @module @dsh-plus/subagent-model/client
+ */
+import type { Context } from '@deepseek-ai/cordis'
+
+import { SubagentModelCard } from './card.tsx'
+import { en, NS, zh } from './i18n.ts'
+import { injectStyle } from './styles.ts'
+
+export const name = 'dsh-plus-subagent-model'
+
+/** 浏览器半需要的 cordis 服务 key（loader 据此注入；package.json 的 dsh.client.inject 管包加载顺序）。 */
+export const inject = ['slots', 'locale'] as const
+
+interface SlotsLike {
+  inject(key: string, callback: () => unknown): unknown
+  register(options: Record<string, unknown>, component: unknown): () => void
+}
+
+interface LocaleLike {
+  register(ns: string, dict: { zh: Record<string, string>; en: Record<string, string> }): () => void
+  bind(ns: string): (key: string) => string
+}
+
+interface ClientContext {
+  slots: SlotsLike
+  locale: LocaleLike
+  effect(execute: () => () => void, label?: string): unknown
+}
+
+export function apply(ctx: Context): void {
+  const c = ctx as unknown as ClientContext
+  const tag = injectStyle()
+  c.effect(
+    () => () => {
+      tag?.remove()
+    },
+    'subagent-model: style',
+  )
+  c.effect(
+    () => c.locale.register(NS, { zh, en }),
+    'subagent-model: locale',
+  )
+  c.slots.inject('settings.plugin.item', () =>
+    c.slots.register(
+      {
+        name: 'settings.plugin.item',
+        id: 'subagent-model',
+        order: 100,
+        locale: NS,
+        inject: () => ({ t: c.locale.bind(NS) }),
+      },
+      SubagentModelCard,
+    ),
+  )
+}

package/src/client/fields.tsx

@@ -0,0 +1,75 @@
+/**
+ * 配置卡片的基础控件：勾选行与下拉选择行（视觉对齐官方卡片字段）。
+ * @module subagent-model/client/fields
+ */
+import type { ReactElement } from 'react'
+
+export interface CheckRowProps {
+  id: string
+  label: string
+  checked: boolean
+  disabled?: boolean
+  onEdit(checked: boolean): void
+}
+
+export function CheckRow(props: CheckRowProps): ReactElement {
+  return (
+    <div className="dsm-checkRow">
+      <input
+        id={props.id}
+        type="checkbox"
+        checked={props.checked}
+        disabled={props.disabled === true}
+        onChange={(event) => props.onEdit(event.target.checked)}
+      />
+      <label htmlFor={props.id}>{props.label}</label>
+    </div>
+  )
+}
+
+export interface SelectOption {
+  value: string
+  label: string
+}
+
+export interface SelectFieldProps {
+  id: string
+  label: string
+  hint?: string
+  value: string
+  options: SelectOption[]
+  disabled?: boolean
+  invalid?: boolean
+  invalidLabel?: string
+  onEdit(value: string): void
+}
+
+export function SelectField(props: SelectFieldProps): ReactElement {
+  const invalid = props.invalid === true
+  return (
+    <div className="dsm-field">
+      <div className="dsm-head">
+        <label className="dsm-label" htmlFor={props.id}>
+          {props.label}
+        </label>
+      </div>
+      <select
+        id={props.id}
+        className="dsm-select"
+        aria-invalid={invalid || undefined}
+        value={props.value}
+        disabled={props.disabled === true}
+        onChange={(event) => props.onEdit(event.target.value)}
+      >
+        {props.options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      <p className={invalid ? 'dsm-invalid' : 'dsm-hint'}>
+        {invalid ? (props.invalidLabel ?? '') : (props.hint ?? '')}
+      </p>
+    </div>
+  )
+}

package/src/client/i18n.ts

@@ -0,0 +1,76 @@
+/**
+ * 配置卡片文案（zh/en）。经 ctx.locale.register 注册、bind 取用，与官方卡片同机制。
+ * @module subagent-model/client/i18n
+ */
+
+export const NS = 'dsh-plus-subagent-model'
+
+export const zh: Record<string, string> = {
+  title: '子代理模型配置',
+  description: '为 subagent / subagent_fork 等子代理单独指定提供商、模型与思考程度，或继承主代理。',
+  enabled: '启用插件',
+  rowEnabled: '启用该行',
+  provider: '提供商',
+  model: '模型',
+  effort: '思考程度',
+  inheritProvider: '继承主代理',
+  inheritModel: '继承主代理',
+  effortInherit: '继承主代理',
+  effortDefault: '跟随模型默认',
+  providerHint: '留空 = 子代理沿用主代理的提供商与模型。',
+  modelHint: '留空 = 沿用主代理的模型（需与所选提供商匹配）。',
+  effortHint: 'inherit = 不干预（fork 会随会话继承）；default = 显式使用模型默认档位。',
+  rowHint: '按子代理 provider 名匹配；standard preset 中 spawn ↔ subagent 工具、fork ↔ subagent_fork 工具。',
+  rowDesc: '未注册的 provider 行不生效，可保留待用。',
+  noRows: '当前未发现子代理 provider；配置将在 provider 注册后生效。',
+  catalogError: '提供商目录加载失败：',
+  catalogRetry: '重试',
+  catalogLoading: '目录加载中…',
+  unknownValue: '目录外',
+  save: '保存',
+  saving: '保存中…',
+  discard: '放弃',
+  unsaved: '未保存',
+  saveFailed: '保存失败：',
+  loading: '加载中…',
+  unavailable: '配置服务不可用。',
+  readOnly: '当前部署无 settings provider，配置为只读；请编辑 settings.yaml。',
+  expand: '展开',
+  collapse: '收起',
+  invalidModel: '模型不能脱离提供商单独配置。',
+}
+
+export const en: Record<string, string> = {
+  title: 'Subagent model config',
+  description: 'Pick a provider, model, and thinking effort for subagent / subagent_fork children, or inherit from the main agent.',
+  enabled: 'Enable plugin',
+  rowEnabled: 'Enable row',
+  provider: 'Provider',
+  model: 'Model',
+  effort: 'Effort',
+  inheritProvider: 'Inherit from main agent',
+  inheritModel: 'Inherit from main agent',
+  effortInherit: 'Inherit from main agent',
+  effortDefault: 'Follow model default',
+  providerHint: 'Empty = the child follows the main agent\u2019s provider and model.',
+  modelHint: 'Empty = follow the main agent\u2019s model (must match the chosen provider).',
+  effortHint: 'inherit = do not touch (forks inherit via session seed); default = explicitly use the model\u2019s default level.',
+  rowHint: 'Matched by subagent provider name; in the standard preset spawn \u2194 subagent tool, fork \u2194 subagent_fork tool.',
+  rowDesc: 'Rows for unregistered providers are inert; keep them for later.',
+  noRows: 'No subagent provider registered yet; config takes effect once one appears.',
+  catalogError: 'Failed to load provider catalog: ',
+  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.',
+}

package/src/client/styles.ts

@@ -0,0 +1,66 @@
+/**
+ * 配置卡片样式：沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载），
+ * 视觉对齐官方卡片（--dsw-alias-* 变量），不覆盖上游任何选择器。
+ * @module subagent-model/client/styles
+ */
+
+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}
+.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}
+`
+
+/** 幂等注入样式标签；返回标签（已存在或环境无 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
+}