feat(web): add read-only Loader plugin inventory

2026-08-15 21:04:50 +00:00 · 2026-08-11 06:46:41 -07:00
parent 258331f0da
commit 6ed5df964e
64 changed files with 1429 additions and 19 deletions
--- a/packages/client/README.i18n.yaml
+++ b/packages/client/README.i18n.yaml
@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/README.md
-README.md: 75abe408952ed66dcc237ce489e417f61159bcc3
-README.zh.md: 5432efcb0a5ebc410093da4c3ec6c2e07c4520ca
+README.md: 236531281c17ef982982e97caad99491584bd0b5
+README.zh.md: e619ffaa6341f509537342bde90344141d4c8f64
--- a/packages/client/README.md
+++ b/packages/client/README.md
@@ -41,6 +41,7 @@ The browser side of the dsh web GUI: shell boot, browser-host communication, sha
 | [`ui-settings/`](ui-settings/README.md) | Hosts the settings interface and its extension areas. |
 | [`ui-settings-general/`](ui-settings-general/README.md) | Provides the general settings section. |
 | [`ui-models/`](ui-models/README.md) | Provides model-provider configuration and DeepSeek onboarding. |
+| [`ui-plugins/`](ui-plugins/README.md) | Shows the current Host Loader entries in a read-only Settings section. |

 Each child reference owns its contract and detailed behavior. The [slot system standard](../../.agents/notes/implemented/architecture/2026-07-22-slot-type-chain-implementation.md) and [web client architecture note](../../.agents/notes/implemented/architecture/2026-07-19-gui-web-client-architecture.md) own the cross-package composition and loading decisions.

--- a/packages/client/README.zh.md
+++ b/packages/client/README.zh.md
@@ -41,6 +41,7 @@ dsh web GUI 的浏览器侧：shell 启动、浏览器与宿主通信、共享 U
 | [`ui-settings/`](ui-settings/README.md) | 承载设置界面及其扩展区域。 |
 | [`ui-settings-general/`](ui-settings-general/README.md) | 提供常规设置分区。 |
 | [`ui-models/`](ui-models/README.md) | 提供模型提供方配置与 DeepSeek 配置引导。 |
+| [`ui-plugins/`](ui-plugins/README.md) | 在只读设置分区中展示当前 Host Loader 条目。 |

 每个子文档负责自身的约定和详细行为。[slot 系统标准](../../.agents/notes/implemented/architecture/2026-07-22-slot-type-chain-implementation.md)与 [Web 客户端架构 Agent Note](../../.agents/notes/implemented/architecture/2026-07-19-gui-web-client-architecture.md)负责跨包组合与加载决策。

--- a/packages/client/ui-plugins/README.i18n.yaml
+++ b/packages/client/ui-plugins/README.i18n.yaml
@@ -0,0 +1,6 @@
+# Bilingual-pair consistency record (docs/i18n/README.md): the git blob hash of each
+# side as of the last confirmed-consistent state. Both languages carry equal authority;
+# after editing either side, bring the other along and re-record with:
+#   pnpm run verify-translation-pairing --write packages/client/ui-plugins/README.md
+README.md: c3236935b2a568c6996fcac8469f061a813cd95c
+README.zh.md: 77810bccf95a55761518f89909fddd99818f686a
--- a/packages/client/ui-plugins/README.md
+++ b/packages/client/ui-plugins/README.md
@@ -0,0 +1,20 @@
+# @deepseek-ai/dsh-client-ui-plugins
+
+English | [中文](README.zh.md)
+
+Read-only Plugins section for Web Settings. The browser plugin registers one localized `settings.section` contribution with id `plugin-inventory`, after Models, and lets the Settings shell supply its ordinary fallback icon. It performs no Remote read during plugin activation; mounting the section lazily calls `ctx.remote.pluginInventory.list()` through [`api-remotes`](../../api/remotes/README.md).
+
+The page renders a searchable two-column catalog of compact cards. Each card uses the local Loader id as its title, a colored root-Fiber status dot, and a small effective-enablement tag. Loading, empty, no-match, and generic failure states stay local to the mounted component, and a failed read can be retried without exposing transport details. The registration uses `ctx.slots.inject()`, so it follows late Settings declaration, redeclaration, locale changes, and teardown without owning another global store.
+
+## Model Experience
+
+None, as this package only visualizes a Host-owned deployment snapshot in browser Settings and registers nothing model-facing.
+
+#### KV Cache effect
+
+None; this package neither assembles nor sends a provider request.
+
+## Known Limitations and Deferred Work
+
+- **One snapshot per mount or retry** — the page does not subscribe to Loader changes or automatically refetch after reconnect; reopening the section obtains a new snapshot.
+- **Read-only Loader view** — local search does not add provenance, current-browser activation diagnosis, grouping by source, or plugin mutation controls.
--- a/packages/client/ui-plugins/README.zh.md
+++ b/packages/client/ui-plugins/README.zh.md
@@ -0,0 +1,20 @@
+# @deepseek-ai/dsh-client-ui-plugins
+
+[English](README.md) | 中文
+
+Web 设置中的只读“插件”分区。浏览器插件在“模型”之后注册一个 id 为 `plugin-inventory` 的本地化 `settings.section` 贡献，并由 Settings shell 提供常规的回退图标。插件激活期间不会读取 Remote；挂载该分区时，组件才通过 [`api-remotes`](../../api/remotes/README.md) 懒调用 `ctx.remote.pluginInventory.list()`。
+
+页面以可搜索的双列紧凑卡片展示清单。每张卡片使用 Loader 本地 id 作为标题，以彩色圆点表示根 Fiber 状态，以小标签表示有效启停状态。加载、空结果、无匹配结果与通用失败状态只属于已挂载组件；读取失败后可以重试，且不会暴露传输细节。注册使用 `ctx.slots.inject()`，因此能跟随 Settings 的延迟声明、重新声明、本地化变化与 teardown，而不拥有另一份全局 store。
+
+## 模型体验
+
+无，因为本包只在浏览器设置中展示 Host 拥有的部署快照，不注册任何模型接口。
+
+#### KV Cache 影响
+
+无；本包既不组装也不发送提供方请求。
+
+## 已知限制与暂缓事项
+
+- **每次挂载或重试只读取一份快照** —— 页面不订阅 Loader 变化，也不会在重连后自动重新读取；重新打开分区会取得新快照。
+- **只读 Loader 视图** —— 本地搜索不会额外引入来源、按来源分组、当前浏览器激活诊断或插件修改控件。
--- a/packages/client/ui-plugins/package.json
+++ b/packages/client/ui-plugins/package.json
@@ -0,0 +1,80 @@
+{
+  "name": "@deepseek-ai/dsh-client-ui-plugins",
+  "description": "Read-only Cordis Loader plugin inventory in Web settings",
+  "version": "0.0.1-rc.1",
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/deepseek-ai/deepseek-harness.git",
+    "directory": "packages/client/ui-plugins"
+  },
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./invariant": {
+      "types": "./lib/types/invariant.d.ts",
+      "default": "./lib/invariant.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-api-remotes",
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-locale"
+      ],
+      "platform": "web"
+    }
+  },
+  "scripts": {
+    "bundle": "tsdown",
+    "watch": "tsdown --watch"
+  },
+  "license": "BSD-3-Clause",
+  "peerDependencies": {
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
+    "@deepseek-ai/dsh-client-locale": "workspace:^",
+    "@deepseek-ai/dsh-client-runtime": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-settings": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
+    "@deepseek-ai/dsh-invariants": "workspace:^",
+    "@deepseek-ai/cordis": "workspace:^",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
+    "@deepseek-ai/dsh-client-locale": "workspace:^",
+    "@deepseek-ai/dsh-client-runtime": "workspace:^",
+    "@deepseek-ai/dsh-client-test-runtime": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-settings": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
+    "@deepseek-ai/dsh-invariants": "workspace:^",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "~18.3.1",
+    "@deepseek-ai/cordis": "workspace:^",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "files": [
+    "lib/index.js",
+    "lib/invariant.js",
+    "lib/client.js",
+    "lib/types/**/*.d.ts"
+  ]
+}
--- a/packages/client/ui-plugins/src/client/PluginSettingsSection.module.css
+++ b/packages/client/ui-plugins/src/client/PluginSettingsSection.module.css
@@ -0,0 +1,213 @@
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: 100%;
+  max-width: 760px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.heading h2,
+.catalogHeading h3,
+.status,
+.failure p {
+  margin: 0;
+}
+
+.heading h2 {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+}
+
+.status,
+.failure {
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.failure {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.failure button {
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 6px;
+  padding: 4px 10px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  cursor: pointer;
+}
+
+.catalog {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.search > svg {
+  position: absolute;
+  left: 12px;
+  pointer-events: none;
+}
+
+.search input {
+  width: 100%;
+  height: 36px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  padding: 0 34px 0 36px;
+  outline: none;
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 13px;
+}
+
+.search input::placeholder {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.search input:focus-visible {
+  border-color: var(--dsw-alias-state-business-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-business-primary) 18%, transparent);
+}
+
+.catalogHeading {
+  display: flex;
+  align-items: baseline;
+  gap: 7px;
+  padding: 0 2px;
+}
+
+.catalogHeading h3 {
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 600;
+}
+
+.catalogHeading span {
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.card {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-layer-3);
+}
+
+.cardContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  min-height: 52px;
+  border: 0;
+  padding: 12px 14px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.cardTitle {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cardTrailing {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 7px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.statusDot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  flex: none;
+  border-radius: 999px;
+  background: var(--dsw-alias-label-tertiary);
+}
+
+.statusDot[data-phase='active'] {
+  background: var(--dsw-alias-state-success-primary);
+}
+
+.statusDot[data-phase='failed'] {
+  background: var(--dsw-alias-state-error-primary);
+}
+
+.statusDot[data-phase='loading'] {
+  background: var(--dsw-alias-state-business-primary);
+}
+
+.configTag {
+  display: inline-flex;
+  align-items: center;
+  min-height: 20px;
+  border-radius: 5px;
+  padding: 1px 6px;
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+.configTag[data-enabled='true'] {
+  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent);
+  color: var(--dsw-alias-state-success-primary);
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (max-width: 680px) {
+  .cards {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
--- a/packages/client/ui-plugins/src/client/PluginSettingsSection.tsx
+++ b/packages/client/ui-plugins/src/client/PluginSettingsSection.tsx
@@ -0,0 +1,149 @@
+import { useEffect, useId, useMemo, useState, type ReactNode } from 'react'
+import type { ClientRemote } from '@deepseek-ai/dsh-api-remotes/client'
+import { IconSearchOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import type { PluginsKey } from './locales.ts'
+import css from './PluginSettingsSection.module.css'
+
+/** Registration-side Remote face used by the section. */
+export interface PluginSettingsSectionInjected {
+  /** Read a current Host inventory snapshot. */
+  list: ClientRemote['pluginInventory']['list']
+}
+
+type PluginInventorySnapshot = Awaited<ReturnType<PluginSettingsSectionInjected['list']>>
+type PluginInventoryEntry = PluginInventorySnapshot['entries'][number]
+type PluginFiberPhase = PluginInventoryEntry['fiberPhase']
+
+/** Full component props assembled by the Settings slot renderer. */
+export type PluginSettingsSectionProps =
+  PropsRuntime<'settings.section'>
+  & PropsLocale<'settings.plugins'>
+  & InjectFace<PluginSettingsSectionInjected>
+
+type ViewState =
+  | { readonly status: 'loading' }
+  | { readonly status: 'error' }
+  | { readonly status: 'ready'; readonly snapshot: PluginInventorySnapshot }
+
+const PHASE_KEYS = {
+  pending: 'pending',
+  loading: 'loadingPhase',
+  active: 'active',
+  failed: 'failed',
+  unloading: 'unloading',
+} satisfies Record<Exclude<PluginFiberPhase, null>, PluginsKey>
+
+/** Localized accessible label for one root Fiber phase. */
+function phaseLabel(
+  phase: PluginFiberPhase,
+  t: PluginSettingsSectionProps['t'],
+): string {
+  return phase === null ? t('unobserved') : t(PHASE_KEYS[phase])
+}
+
+/** Whether an inventory row matches the local catalog query. */
+function matches(entry: PluginInventoryEntry, normalizedQuery: string): boolean {
+  if (normalizedQuery.length === 0) return true
+  return [entry.displayId, entry.entryId]
+    .some(value => value.toLocaleLowerCase().includes(normalizedQuery))
+}
+
+/** Render the read-only current Loader inventory. */
+export function PluginSettingsSection({ list, t }: PluginSettingsSectionProps): ReactNode {
+  const titleId = useId()
+  const [request, setRequest] = useState(0)
+  const [query, setQuery] = useState('')
+  const [state, setState] = useState<ViewState>({ status: 'loading' })
+
+  useEffect(() => {
+    let current = true
+    void Promise.resolve().then(() => list()).then(
+      (snapshot) => { if (current) setState({ status: 'ready', snapshot }) },
+      () => { if (current) setState({ status: 'error' }) },
+    )
+    return () => { current = false }
+  }, [list, request])
+
+  const normalizedQuery = query.trim().toLocaleLowerCase()
+  const filteredEntries = useMemo(
+    () => state.status === 'ready'
+      ? state.snapshot.entries.filter(entry => matches(entry, normalizedQuery))
+      : [],
+    [normalizedQuery, state],
+  )
+
+  const retry = (): void => {
+    setState({ status: 'loading' })
+    setRequest(value => value + 1)
+  }
+
+  return (
+    <section className={css.section} aria-labelledby={titleId} aria-busy={state.status === 'loading'}>
+      <header className={css.heading}>
+        <h2 id={titleId}>{t('title')}</h2>
+      </header>
+      {state.status === 'loading' ? <p className={css.status}>{t('loading')}</p> : null}
+      {state.status === 'error' ? (
+        <div className={css.failure}>
+          <p role="alert">{t('error')}</p>
+          <button type="button" onClick={retry}>{t('retry')}</button>
+        </div>
+      ) : null}
+      {state.status === 'ready' ? (
+        <div className={css.catalog}>
+          <label className={css.search}>
+            <IconSearchOutline16 aria-hidden="true" />
+            <span className={css.visuallyHidden}>{t('search')}</span>
+            <input
+              type="search"
+              value={query}
+              placeholder={t('search')}
+              aria-label={t('search')}
+              onChange={event => setQuery(event.currentTarget.value)}
+            />
+          </label>
+          <div className={css.catalogHeading}>
+            <h3>{t('catalog')}</h3>
+            <span data-plugin-count={filteredEntries.length}>{filteredEntries.length}</span>
+          </div>
+          {state.snapshot.entries.length === 0 ? <p className={css.status}>{t('empty')}</p> : null}
+          {state.snapshot.entries.length > 0 && filteredEntries.length === 0
+            ? <p className={css.status}>{t('emptySearch')}</p>
+            : null}
+          {filteredEntries.length > 0 ? (
+            <ul className={css.cards}>
+              {filteredEntries.map((entry) => {
+                const status = phaseLabel(entry.fiberPhase, t)
+                return (
+                  <li
+                    className={css.card}
+                    key={entry.entryId}
+                    data-plugin-entry={entry.entryId}
+                    aria-label={`${entry.displayId}, ${status}, ${t(entry.enabled ? 'enabledTag' : 'disabledTag')}`}
+                  >
+                    <div className={css.cardContent}>
+                      <strong className={css.cardTitle}>{entry.displayId}</strong>
+                      <span className={css.cardTrailing}>
+                        <span
+                          className={css.statusDot}
+                          data-phase={entry.fiberPhase ?? 'unobserved'}
+                          role="img"
+                          aria-label={status}
+                          title={status}
+                        />
+                        <span className={css.configTag} data-enabled={entry.enabled ? 'true' : 'false'}>
+                          {t(entry.enabled ? 'enabledTag' : 'disabledTag')}
+                        </span>
+                      </span>
+                    </div>
+                  </li>
+                )
+              })}
+            </ul>
+          ) : null}
+        </div>
+      ) : null}
+    </section>
+  )
+}
--- a/packages/client/ui-plugins/src/client/index.ts
+++ b/packages/client/ui-plugins/src/client/index.ts
@@ -0,0 +1,42 @@
+/** Read-only Host plugin inventory registered into Web Settings. */
+
+import type { ClientRemote } from '@deepseek-ai/dsh-api-remotes/client'
+import type {} from '@deepseek-ai/dsh-client-locale/client'
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
+import { PluginSettingsSection, type PluginSettingsSectionInjected } from './PluginSettingsSection.tsx'
+import { en, zh, type PluginsKey } from './locales.ts'
+
+export type { PluginSettingsSectionInjected, PluginSettingsSectionProps } from './PluginSettingsSection.tsx'
+export type { PluginsKey } from './locales.ts'
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface LocaleNamespaceMap {
+    /** Read-only Host plugin inventory copy. */
+    'settings.plugins': PluginsKey
+  }
+}
+
+/** Dictionary namespace owned by this plugin. */
+export const NS = 'settings.plugins'
+
+/** Services required by the Settings registration and generated Remote face. */
+export const inject = ['slots', 'locale', 'remote', 'remote.pluginInventory']
+
+/** Register the lazy plugin inventory page below Models in Settings. */
+export function apply(ctx: ClientContext): void {
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'ui-plugins: dictionaries')
+
+  const t = ctx.locale.bind(NS)
+  const list: ClientRemote['pluginInventory']['list'] = () => ctx.remote.pluginInventory.list()
+  const injected = (): PluginSettingsSectionInjected => ({ list })
+
+  ctx.slots.inject('settings.section', () => ctx.slots.register({
+    name: 'settings.section',
+    id: 'plugin-inventory',
+    order: 15,
+    label: () => t('nav'),
+    locale: NS,
+    inject: injected,
+  }, PluginSettingsSection))
+}
--- a/packages/client/ui-plugins/src/client/locales.ts
+++ b/packages/client/ui-plugins/src/client/locales.ts
@@ -0,0 +1,46 @@
+/** Copy dictionaries for the plugin inventory Settings section. */
+
+/** Simplified Chinese dictionary and key source of truth. */
+export const zh = {
+  nav: '插件',
+  title: '插件',
+  loading: '正在读取插件…',
+  error: '暂时无法读取插件。',
+  retry: '重试',
+  search: '搜索插件',
+  catalog: '插件列表',
+  empty: '暂无插件。',
+  emptySearch: '没有匹配的插件。',
+  enabledTag: '已启用',
+  disabledTag: '已停用',
+  unobserved: '无根 Fiber',
+  pending: '等待依赖',
+  loadingPhase: '加载中',
+  active: '存活',
+  failed: '失败',
+  unloading: '卸载中',
+} satisfies Record<string, string>
+
+/** Plugin inventory locale key union. */
+export type PluginsKey = keyof typeof zh
+
+/** English dictionary checked against the Chinese key set. */
+export const en = {
+  nav: 'Plugins',
+  title: 'Plugins',
+  loading: 'Reading plugins…',
+  error: 'Plugins are temporarily unavailable.',
+  retry: 'Retry',
+  search: 'Search plugins',
+  catalog: 'Plugin list',
+  empty: 'No plugins are available.',
+  emptySearch: 'No matching plugins.',
+  enabledTag: 'Enabled',
+  disabledTag: 'Disabled',
+  unobserved: 'No root Fiber',
+  pending: 'Pending',
+  loadingPhase: 'Loading',
+  active: 'Active',
+  failed: 'Failed',
+  unloading: 'Unloading',
+} satisfies Record<PluginsKey, string>
--- a/packages/client/ui-plugins/src/css-modules.d.ts
+++ b/packages/client/ui-plugins/src/css-modules.d.ts
@@ -0,0 +1,6 @@
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}
+
+declare module '*.css'
--- a/packages/client/ui-plugins/src/index.ts
+++ b/packages/client/ui-plugins/src/index.ts
@@ -0,0 +1,4 @@
+/** Host loader entry for the browser implementation exported from `./client`. */
+
+/** Host plugin body — no host-side behavior for the plugin settings section. */
+export function apply(): void {}
--- a/packages/client/ui-plugins/src/invariant.ts
+++ b/packages/client/ui-plugins/src/invariant.ts
@@ -0,0 +1,20 @@
+/** Package-owned invariant companion. @module @deepseek-ai/dsh-client-ui-plugins/invariant */
+
+/* jscpd:ignore-start */
+import type { Context } from '@deepseek-ai/cordis'
+import type { InvariantInstaller } from '@deepseek-ai/dsh-invariants'
+
+const PACKAGE_NAME = '@deepseek-ai/dsh-client-ui-plugins'
+
+/** Cordis companion plugin name. */
+export const name = 'client-ui-plugins-invariant'
+/** Service required before the companion can reserve package ownership. */
+export const inject = ['invariants']
+
+/** No runtime invariant: this package owns a read-only Settings contribution. */
+const install: InvariantInstaller = () => {}
+
+/** Register this package's invariant companion. */
+export const apply = (ctx: Context): Promise<() => void> =>
+  Promise.resolve(ctx.invariants.register(PACKAGE_NAME, install))
+/* jscpd:ignore-end */
--- a/packages/client/ui-plugins/tests/browser-plugin.spec.tsx
+++ b/packages/client/ui-plugins/tests/browser-plugin.spec.tsx
@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+import { Context, Service } from '@deepseek-ai/cordis'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup } from '@testing-library/react'
+import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
+import { SlotsService } from '@deepseek-ai/dsh-client-runtime/client'
+import { resolveSlotLabel } from '@deepseek-ai/dsh-client-ui-slots'
+import { usePinnedBrowserLanguages } from '@deepseek-ai/dsh-client-test-runtime'
+import { apply, inject, NS } from '../src/client/index.ts'
+import { PluginSettingsSection } from '../src/client/PluginSettingsSection.tsx'
+import type { PluginSettingsSectionInjected } from '../src/client/PluginSettingsSection.tsx'
+
+usePinnedBrowserLanguages('zh-CN')
+afterEach(cleanup)
+
+const EMPTY = { entries: [] }
+
+async function bench() {
+  const ctx = new Context()
+  await ctx.plugin(SlotsService).await()
+  const locale = new LocaleService(ctx)
+  ctx.provide('locale', locale)
+  class RemoteService extends Service {
+    constructor(serviceCtx: Context) {
+      super(serviceCtx, 'remote')
+    }
+  }
+  new RemoteService(ctx)
+  const list = vi.fn(() => Promise.resolve(EMPTY))
+  ctx.provide('remote.pluginInventory', { list })
+  return { ctx, slots: ctx.get('slots') as SlotsService, locale, list }
+}
+
+function declare(slots: SlotsService): () => void {
+  return slots.register({
+    name: 'root',
+    children: { 'settings.section': { kind: 'list', scope: 'root' } },
+  } as never, () => null)
+}
+
+describe('ui-plugins browser plugin', () => {
+  it('declares only the services used by the Settings Remote contribution', () => {
+    expect(inject).toEqual(['slots', 'locale', 'remote', 'remote.pluginInventory'])
+  })
+
+  it('registers a localized section without reading the Remote eagerly', async () => {
+    const b = await bench()
+    declare(b.slots)
+    await b.ctx.plugin({ inject: [...inject], apply }).await()
+
+    const entry = b.slots.entries('settings.section')[0]!
+    expect(entry.component).toBe(PluginSettingsSection)
+    expect(entry.options).toMatchObject({ id: 'plugin-inventory', order: 15 })
+    expect(entry.locale).toBe(NS)
+    expect(resolveSlotLabel(entry.options.label)).toBe('插件')
+    expect(b.list).not.toHaveBeenCalled()
+
+    const injected = (entry.inject as unknown as () => PluginSettingsSectionInjected)()
+    await expect(injected.list()).resolves.toEqual(EMPTY)
+    expect(b.list).toHaveBeenCalledOnce()
+    await b.ctx.fiber.dispose()
+  })
+
+  it('follows locale and recovers across late declaration and declarer reload', async () => {
+    const b = await bench()
+    const fiber = b.ctx.plugin({ inject: [...inject], apply })
+    await fiber.await()
+    expect(b.slots.entries('settings.section')).toHaveLength(0)
+
+    const stop = declare(b.slots)
+    await vi.waitFor(() => { expect(b.slots.entries('settings.section')).toHaveLength(1) })
+    b.locale.setLocale('en')
+    expect(resolveSlotLabel(b.slots.entries('settings.section')[0]!.options.label)).toBe('Plugins')
+
+    stop()
+    expect(b.slots.entries('settings.section')).toHaveLength(0)
+    declare(b.slots)
+    await vi.waitFor(() => {
+      expect(b.slots.entries('settings.section')[0]?.component).toBe(PluginSettingsSection)
+    })
+
+    await fiber.dispose()
+    expect(b.slots.entries('settings.section')).toHaveLength(0)
+    expect(() => b.locale.register(NS, 'zh', {})).not.toThrow()
+    await b.ctx.fiber.dispose()
+  })
+})
--- a/packages/client/ui-plugins/tests/components.spec.tsx
+++ b/packages/client/ui-plugins/tests/components.spec.tsx
@@ -0,0 +1,100 @@
+// @vitest-environment jsdom
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { PluginSettingsSection } from '../src/client/PluginSettingsSection.tsx'
+import type {
+  PluginSettingsSectionInjected,
+  PluginSettingsSectionProps,
+} from '../src/client/PluginSettingsSection.tsx'
+import { en, type PluginsKey } from '../src/client/locales.ts'
+
+afterEach(cleanup)
+
+type Snapshot = Awaited<ReturnType<PluginSettingsSectionInjected['list']>>
+const t = ((key: PluginsKey): string => en[key]) as PluginSettingsSectionProps['t']
+const unusedHook = (() => { throw new Error('unused by plugin inventory') }) as never
+
+function props(list: PluginSettingsSectionInjected['list']): PluginSettingsSectionProps {
+  return {
+    close: vi.fn(),
+    useSessions: unusedHook,
+    useWorkspaces: unusedHook,
+    t,
+    list,
+  }
+}
+
+const SNAPSHOT = {
+  entries: [
+    { entryId: 'active', displayId: 'active-name', enabled: true, fiberPhase: 'active' },
+    { entryId: 'pending', displayId: 'pending-name', enabled: true, fiberPhase: 'pending' },
+    { entryId: 'loading', displayId: 'loading-name', enabled: true, fiberPhase: 'loading' },
+    { entryId: 'failed', displayId: 'failed-name', enabled: true, fiberPhase: 'failed' },
+    { entryId: 'unloading', displayId: 'unloading-name', enabled: true, fiberPhase: 'unloading' },
+    { entryId: 'disabled-entry', displayId: 'disabled-name', enabled: false, fiberPhase: null },
+  ],
+} as unknown as Snapshot
+
+describe('PluginSettingsSection', () => {
+  it('renders searchable two-column-card semantics with dots and tags', async () => {
+    const deferred = Promise.withResolvers<Snapshot>()
+    const list = vi.fn(() => deferred.promise)
+    const view = render(<PluginSettingsSection {...props(list)} />)
+    expect(screen.getByText(en.loading)).toBeTruthy()
+
+    await act(async () => { deferred.resolve(SNAPSHOT) })
+    expect(list).toHaveBeenCalledOnce()
+    expect(screen.getByRole('searchbox', { name: en.search })).toBeTruthy()
+    expect(screen.getByRole('heading', { name: en.catalog })).toBeTruthy()
+    expect(view.container.querySelector('[data-plugin-count]')?.textContent).toBe('6')
+    expect(screen.getAllByRole('listitem')).toHaveLength(6)
+    expect(screen.getAllByText(en.enabledTag)).toHaveLength(5)
+    expect(screen.getByText(en.disabledTag)).toBeTruthy()
+    for (const value of ['Active', 'Pending', 'Loading', 'Failed', 'Unloading', 'No root Fiber']) {
+      expect(screen.getByRole('img', { name: value })).toBeTruthy()
+    }
+    expect(screen.getByRole('listitem', { name: 'active-name, Active, Enabled' })).toBeTruthy()
+  })
+
+  it('filters by local id or Loader entry id', async () => {
+    render(<PluginSettingsSection {...props(async () => SNAPSHOT)} />)
+    const search = await screen.findByRole('searchbox', { name: en.search })
+
+    fireEvent.change(search, { target: { value: 'disabled-entry' } })
+    expect(screen.getAllByRole('listitem')).toHaveLength(1)
+    expect(screen.getByText('disabled-name')).toBeTruthy()
+
+    fireEvent.change(search, { target: { value: 'pending' } })
+    expect(screen.getAllByRole('listitem')).toHaveLength(1)
+    expect(screen.getByText('pending-name')).toBeTruthy()
+
+    fireEvent.change(search, { target: { value: 'not-a-plugin' } })
+    expect(screen.queryAllByRole('listitem')).toHaveLength(0)
+    expect(screen.getByText(en.emptySearch)).toBeTruthy()
+  })
+
+  it('shows a generic failure and retries into the empty state', async () => {
+    const list = vi.fn<PluginSettingsSectionInjected['list']>()
+      .mockRejectedValueOnce(new Error('private transport detail'))
+      .mockResolvedValueOnce({ entries: [] })
+    render(<PluginSettingsSection {...props(list)} />)
+
+    expect((await screen.findByRole('alert')).textContent).toBe(en.error)
+    expect(screen.queryByText('private transport detail')).toBeNull()
+    fireEvent.click(screen.getByRole('button', { name: en.retry }))
+    await waitFor(() => { expect(list).toHaveBeenCalledTimes(2) })
+    expect(await screen.findByText(en.empty)).toBeTruthy()
+  })
+
+  it('contains a synchronous Remote failure and ignores a result after unmount', async () => {
+    const syncFailure = vi.fn(() => { throw new Error('namespace unavailable') }) as PluginSettingsSectionInjected['list']
+    const failed = render(<PluginSettingsSection {...props(syncFailure)} />)
+    expect((await screen.findByRole('alert')).textContent).toBe(en.error)
+    failed.unmount()
+
+    const deferred = Promise.withResolvers<Snapshot>()
+    const pending = render(<PluginSettingsSection {...props(() => deferred.promise)} />)
+    pending.unmount()
+    await act(async () => { deferred.resolve(SNAPSHOT) })
+  })
+})
--- a/packages/client/ui-plugins/tests/invariant.spec.ts
+++ b/packages/client/ui-plugins/tests/invariant.spec.ts
@@ -0,0 +1,15 @@
+import { Context } from '@deepseek-ai/cordis'
+import { describe, expect, it } from 'vitest'
+import InvariantService from '@deepseek-ai/dsh-invariants'
+import * as PluginsInvariant from '../src/invariant.ts'
+
+describe('ui-plugins invariant companion', () => {
+  it('registers the empty installer and keeps the node half inert', async () => {
+    const ctx = new Context()
+    await ctx.plugin(InvariantService, { enabled: true })
+    await expect(ctx.plugin(PluginsInvariant).await()).resolves.toBeDefined()
+    const { apply } = await import('../src/index.ts')
+    apply()
+    await ctx.fiber.dispose()
+  })
+})
--- a/packages/client/ui-plugins/tsconfig.json
+++ b/packages/client/ui-plugins/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "extends": "../../../tsconfig.base.client.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "lib/types"
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "../../../vendor/cordis"
+    },
+    {
+      "path": "../../api/remotes/tsconfig.client.json"
+    },
+    {
+      "path": "../locale"
+    },
+    {
+      "path": "../runtime"
+    },
+    {
+      "path": "../ui-settings"
+    },
+    {
+      "path": "../ui-primitives"
+    },
+    {
+      "path": "../ui-slots"
+    },
+    {
+      "path": "../../support/invariants"
+    }
+  ]
+}
--- a/packages/client/ui-plugins/tsdown.config.ts
+++ b/packages/client/ui-plugins/tsdown.config.ts
@@ -0,0 +1,3 @@
+import { clientBundle } from '../tsdown.client.ts'
+
+export default clientBundle('@deepseek-ai/dsh-client-ui-plugins', ['lib/types/index.js', 'lib/types/invariant.js'])