refactor: apply repository naming contract
Apply the accepted pre-release package, service, type, directory, and role renames as one repository-wide change.
This commit is contained in:
Tianyi Cui
@@ -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-settings-plugin-inventory/README.md
|
||||
README.md: d3410d1387b4a51a0ecaeee4ec9f80913157d453
|
||||
README.zh.md: e262a29dfa5c9c4d1505b442aeb1881015a1de8c
|
||||
20
packages/client/ui-settings-plugin-inventory/README.md
Normal file
20
packages/client/ui-settings-plugin-inventory/README.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# @deepseek-ai/dsh-client-ui-settings-plugin-inventory
|
||||
|
||||
English | [中文](README.zh.md)
|
||||
|
||||
Read-only **Plugin list** tab for Web Settings. The browser plugin registers one localized `settings.plugins.tab` contribution with id `all`; the Plugins section owns the navigation entry and tab chrome. It performs no Remote read during plugin activation. Selecting the tab for the first time mounts it and lazily calls `ctx.remote.pluginInventory.list()` through [`api-remotes`](../../api/remotes/README.md).
|
||||
|
||||
The tab renders a searchable two-column catalog of compact disclosure cards. Each collapsed card uses the short module name as its title and a small effective-enablement tag; enabled entries also show a colored root-fiber status dot. Expanding one card reveals its Loader-tree entry id without a redundant field label, followed by the effective configuration and, for enabled entries, Cordis status. Disabled entries omit the redundant unmounted runtime state. The entry id remains the React key, disclosure identity, detail value, and an additional search target; it is never classified by string shape. 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 tab declaration, redeclaration, locale changes, and teardown without importing the section owner.
|
||||
|
||||
## 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 Settings mount or retry** — the tab does not subscribe to Loader changes or automatically refetch after reconnect; switching tabs preserves the current snapshot, while reopening Settings obtains a new one.
|
||||
- **Read-only Loader view** — local search does not add provenance, current-browser activation diagnosis, grouping by source, or plugin mutation controls.
|
||||
20
packages/client/ui-settings-plugin-inventory/README.zh.md
Normal file
20
packages/client/ui-settings-plugin-inventory/README.zh.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# @deepseek-ai/dsh-client-ui-settings-plugin-inventory
|
||||
|
||||
[English](README.md) | 中文
|
||||
|
||||
Web 设置中的只读**插件列表**标签页。浏览器插件注册一个 id 为 `all` 的本地化 `settings.plugins.tab` 贡献；“插件”分区拥有导航入口与标签栏。插件激活期间不会读取 Remote；首次选择该标签页时才挂载组件，并通过 [`api-remotes`](../../api/remotes/README.md) 懒调用 `ctx.remote.pluginInventory.list()`。
|
||||
|
||||
该标签页以可搜索的双列紧凑折叠卡片展示清单。每张收起的卡片使用模块短名称作为标题，以小标签表示有效启停状态；已启用的条目还会以彩色圆点表示根 fiber 状态。展开卡片后会直接展示 Loader 树条目 id，不附加重复的字段标题，并列出有效配置状态；已启用的条目还会列出 Cordis 状态，已停用的条目则省略重复的“未挂载”运行状态。条目 id 仍作为 React key、展开标识、详情值与额外的搜索目标；代码不按字符串形状对它分类。加载、空结果、无匹配结果与通用失败状态只属于已挂载组件；读取失败后可以重试，且不会暴露传输细节。注册使用 `ctx.slots.inject()`，因此能跟随标签 slot 的延迟声明、重新声明、本地化变化与 teardown，而无需 import 分区拥有方。
|
||||
|
||||
## 模型体验
|
||||
|
||||
无，因为本包只在浏览器设置中展示 Host 拥有的部署快照，不注册任何模型接口。
|
||||
|
||||
#### KV Cache 影响
|
||||
|
||||
无；本包既不组装也不发送提供方请求。
|
||||
|
||||
## 已知限制与暂缓事项
|
||||
|
||||
- **每次 Settings 挂载或重试只读取一份快照** —— 标签页不订阅 Loader 变化，也不会在重连后自动重新读取；切换标签页会保留当前快照，重新打开 Settings 则会取得新快照。
|
||||
- **只读 Loader 视图** —— 本地搜索不会额外引入来源、按来源分组、当前浏览器激活诊断或插件修改控件。
|
||||
80
packages/client/ui-settings-plugin-inventory/package.json
Normal file
80
packages/client/ui-settings-plugin-inventory/package.json
Normal file
@@ -0,0 +1,80 @@
|
||||
{
|
||||
"name": "@deepseek-ai/dsh-client-ui-settings-plugin-inventory",
|
||||
"description": "Read-only Cordis Loader inventory tab in Web Plugins settings",
|
||||
"version": "0.0.1-rc.2",
|
||||
"publishConfig": {
|
||||
"access": "restricted"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/deepseek-ai/deepseek-harness.git",
|
||||
"directory": "packages/client/ui-settings-plugin-inventory"
|
||||
},
|
||||
"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"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,279 @@
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
width: 100%;
|
||||
max-width: 760px;
|
||||
color: var(--dsw-alias-label-primary);
|
||||
}
|
||||
|
||||
.catalogHeading h3,
|
||||
.status,
|
||||
.failure p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.card[data-open='true'] {
|
||||
border-color: var(--dsw-alias-border-l1);
|
||||
box-shadow: var(--dsw-shadow-lv1);
|
||||
}
|
||||
|
||||
.cardContent {
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cardContent:hover,
|
||||
.card[data-open='true'] > .cardContent {
|
||||
background: var(--dsw-alias-interactive-bg-hover);
|
||||
}
|
||||
|
||||
.cardContent:focus-visible {
|
||||
outline: 2px solid var(--dsw-alias-state-business-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.chevron {
|
||||
flex: none;
|
||||
color: var(--dsw-alias-label-tertiary);
|
||||
}
|
||||
|
||||
.card[data-open='true'] .chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.cardDetails {
|
||||
border-top: 1px solid var(--dsw-alias-border-l2);
|
||||
padding: 10px 14px 12px;
|
||||
background: var(--dsw-alias-bg-module-platform);
|
||||
}
|
||||
|
||||
.entryValue {
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--dsw-alias-label-primary);
|
||||
font-family: var(--ds-font-family-code);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: grid;
|
||||
grid-template-columns: 76px minmax(0, 1fr);
|
||||
gap: 6px 10px;
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
.details div {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.details dt {
|
||||
color: var(--dsw-alias-label-tertiary);
|
||||
font-size: 11px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.details dd {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--dsw-alias-label-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.visuallyHidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.chevron {
|
||||
transition: transform 140ms var(--ds-ease-in-out);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.cards {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
import { useEffect, useId, useMemo, useState, type ReactNode } from 'react'
|
||||
import type { PluginInventorySnapshot } from '@deepseek-ai/dsh-api-remotes/client'
|
||||
import {
|
||||
IconChevronDownOutline14,
|
||||
IconSearchOutline16,
|
||||
} from '@deepseek-ai/dsh-client-ui-primitives'
|
||||
import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
|
||||
import type { PluginInventoryLocaleKey } from './locales.ts'
|
||||
import css from './PluginInventorySettingsTab.module.css'
|
||||
|
||||
/** Registration-side Remote face used by the section. */
|
||||
export interface PluginInventorySettingsTabInjected {
|
||||
/** Read a current Host inventory snapshot. */
|
||||
list: () => Promise<PluginInventorySnapshot>
|
||||
}
|
||||
|
||||
type PluginInventoryEntry = PluginInventorySnapshot['entries'][number]
|
||||
type PluginFiberPhase = PluginInventoryEntry['fiberPhase']
|
||||
|
||||
/** Full component props assembled by the Settings slot renderer. */
|
||||
export type PluginInventorySettingsTabProps =
|
||||
PropsRuntime<'settings.plugins.tab'>
|
||||
& PropsLocale<'settings.pluginInventory'>
|
||||
& InjectFace<PluginInventorySettingsTabInjected>
|
||||
|
||||
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>, PluginInventoryLocaleKey>
|
||||
|
||||
/** Localized accessible label for one root Fiber phase. */
|
||||
function phaseLabel(
|
||||
phase: PluginFiberPhase,
|
||||
t: PluginInventorySettingsTabProps['t'],
|
||||
): string {
|
||||
return phase === null ? t('unobserved') : t(PHASE_KEYS[phase])
|
||||
}
|
||||
|
||||
/** Compact a module specifier without guessing whether its Loader id was generated. */
|
||||
function moduleShortName(moduleName: string): string {
|
||||
const unscoped = moduleName.startsWith('@') ? moduleName.slice(moduleName.indexOf('/') + 1) : moduleName
|
||||
return unscoped
|
||||
.replace(/^cordis:/, '')
|
||||
.replace(/^cordis-plugin-/, '')
|
||||
.replace(/^dsh-(?:host-|client-)?/, '')
|
||||
}
|
||||
|
||||
/** Whether an inventory row matches the local catalog query. */
|
||||
function matches(entry: PluginInventoryEntry, normalizedQuery: string): boolean {
|
||||
if (normalizedQuery.length === 0) return true
|
||||
return [entry.moduleName, entry.entryId]
|
||||
.some(value => value.toLocaleLowerCase().includes(normalizedQuery))
|
||||
}
|
||||
|
||||
/** Render the read-only current Loader inventory. */
|
||||
export function PluginInventorySettingsTab({ list, t }: PluginInventorySettingsTabProps): ReactNode {
|
||||
const catalogId = useId()
|
||||
const [request, setRequest] = useState(0)
|
||||
const [query, setQuery] = useState('')
|
||||
const [expanded, setExpanded] = useState<PluginInventoryEntry['entryId'] | null>(null)
|
||||
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],
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (expanded !== null && !filteredEntries.some(entry => entry.entryId === expanded)) {
|
||||
setExpanded(null)
|
||||
}
|
||||
}, [expanded, filteredEntries])
|
||||
|
||||
const retry = (): void => {
|
||||
setState({ status: 'loading' })
|
||||
setRequest(value => value + 1)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={css.section} aria-busy={state.status === 'loading'}>
|
||||
{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)
|
||||
const title = moduleShortName(entry.moduleName)
|
||||
const configuration = t(entry.enabled ? 'enabledTag' : 'disabledTag')
|
||||
const open = expanded === entry.entryId
|
||||
const detailId = `${catalogId}-details-${encodeURIComponent(entry.entryId)}`
|
||||
return (
|
||||
<li
|
||||
className={css.card}
|
||||
key={entry.entryId}
|
||||
data-plugin-entry={entry.entryId}
|
||||
data-open={open ? 'true' : undefined}
|
||||
>
|
||||
<button
|
||||
className={css.cardContent}
|
||||
type="button"
|
||||
aria-expanded={open}
|
||||
aria-controls={detailId}
|
||||
aria-label={entry.enabled ? `${title}, ${status}, ${configuration}` : `${title}, ${configuration}`}
|
||||
onClick={() => {
|
||||
setExpanded(current => current === entry.entryId ? null : entry.entryId)
|
||||
}}
|
||||
>
|
||||
<strong className={css.cardTitle} title={entry.moduleName}>{title}</strong>
|
||||
<span className={css.cardTrailing}>
|
||||
{entry.enabled ? (
|
||||
<span
|
||||
className={css.statusDot}
|
||||
data-phase={entry.fiberPhase ?? 'unobserved'}
|
||||
role="img"
|
||||
aria-label={status}
|
||||
title={status}
|
||||
/>
|
||||
) : null}
|
||||
<span className={css.configTag} data-enabled={entry.enabled ? 'true' : 'false'}>
|
||||
{configuration}
|
||||
</span>
|
||||
<IconChevronDownOutline14 className={css.chevron} size={12} aria-hidden="true" />
|
||||
</span>
|
||||
</button>
|
||||
{open ? (
|
||||
<div className={css.cardDetails} id={detailId}>
|
||||
<code className={css.entryValue} data-loader-entry>{entry.entryId}</code>
|
||||
<dl className={css.details}>
|
||||
<div>
|
||||
<dt>{t('configuration')}</dt>
|
||||
<dd>{configuration}</dd>
|
||||
</div>
|
||||
{entry.enabled ? (
|
||||
<div>
|
||||
<dt>{t('cordis')}</dt>
|
||||
<dd>{status}</dd>
|
||||
</div>
|
||||
) : null}
|
||||
</dl>
|
||||
</div>
|
||||
) : null}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/** Read-only Host plugin inventory registered into Web Settings. */
|
||||
|
||||
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 { PluginInventorySettingsTab, type PluginInventorySettingsTabInjected } from './PluginInventorySettingsTab.tsx'
|
||||
import { en, zh, type PluginInventoryLocaleKey } from './locales.ts'
|
||||
|
||||
export type { PluginInventorySettingsTabInjected, PluginInventorySettingsTabProps } from './PluginInventorySettingsTab.tsx'
|
||||
export type { PluginInventoryLocaleKey } from './locales.ts'
|
||||
|
||||
declare module '@deepseek-ai/dsh-client-ui-slots' {
|
||||
interface LocaleNamespaceMap {
|
||||
/** Read-only Host plugin inventory copy. */
|
||||
'settings.pluginInventory': PluginInventoryLocaleKey
|
||||
}
|
||||
}
|
||||
|
||||
/** Dictionary namespace owned by this plugin. */
|
||||
export const NS = 'settings.pluginInventory'
|
||||
|
||||
/** Services required by the Settings registration and generated Remote face. */
|
||||
export const inject = ['slots', 'locale', 'remote', 'remote.pluginInventory']
|
||||
|
||||
/** Contribute the lazy inventory tab to the Plugins settings section. */
|
||||
export function apply(ctx: ClientContext): void {
|
||||
ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'ui-settings-plugin-inventory: dictionaries')
|
||||
|
||||
const t = ctx.locale.bind(NS)
|
||||
const list: PluginInventorySettingsTabInjected['list'] = async () => {
|
||||
const result = await ctx.remote.pluginInventory.list()
|
||||
if (!result.ok) {
|
||||
throw new Error(`pluginInventory.list failed: ${result.error.code}: ${result.error.message}`)
|
||||
}
|
||||
return result.value
|
||||
}
|
||||
const injected = (): PluginInventorySettingsTabInjected => ({ list })
|
||||
|
||||
ctx.slots.inject('settings.plugins.tab', () => ctx.slots.register({
|
||||
name: 'settings.plugins.tab',
|
||||
id: 'all',
|
||||
order: 10,
|
||||
label: () => t('tab'),
|
||||
locale: NS,
|
||||
inject: injected,
|
||||
}, PluginInventorySettingsTab))
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/** Copy dictionaries for the plugin inventory Settings section. */
|
||||
|
||||
/** Simplified Chinese dictionary and key source of truth. */
|
||||
export const zh = {
|
||||
tab: '插件列表',
|
||||
loading: '正在读取插件…',
|
||||
error: '暂时无法读取插件。',
|
||||
retry: '重试',
|
||||
search: '搜索插件',
|
||||
catalog: '插件列表',
|
||||
empty: '暂无插件。',
|
||||
emptySearch: '没有匹配的插件。',
|
||||
enabledTag: '已启用',
|
||||
disabledTag: '已停用',
|
||||
configuration: '配置状态',
|
||||
cordis: 'Cordis 状态',
|
||||
unobserved: '未挂载',
|
||||
pending: '等待依赖',
|
||||
loadingPhase: '加载中',
|
||||
active: '已挂载',
|
||||
failed: '挂载失败',
|
||||
unloading: '卸载中',
|
||||
} satisfies Record<string, string>
|
||||
|
||||
/** Plugin inventory locale key union. */
|
||||
export type PluginInventoryLocaleKey = keyof typeof zh
|
||||
|
||||
/** English dictionary checked against the Chinese key set. */
|
||||
export const en = {
|
||||
tab: 'Plugin list',
|
||||
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',
|
||||
configuration: 'Configuration',
|
||||
cordis: 'Cordis status',
|
||||
unobserved: 'Not mounted',
|
||||
pending: 'Waiting for dependencies',
|
||||
loadingPhase: 'Loading',
|
||||
active: 'Mounted',
|
||||
failed: 'Mount failed',
|
||||
unloading: 'Unloading',
|
||||
} satisfies Record<PluginInventoryLocaleKey, string>
|
||||
6
packages/client/ui-settings-plugin-inventory/src/css-modules.d.ts
vendored
Normal file
6
packages/client/ui-settings-plugin-inventory/src/css-modules.d.ts
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
declare module '*.module.css' {
|
||||
const classes: Record<string, string>
|
||||
export default classes
|
||||
}
|
||||
|
||||
declare module '*.css'
|
||||
@@ -0,0 +1,4 @@
|
||||
/** Host loader entry for the inventory-tab browser implementation exported from `./client`. */
|
||||
|
||||
/** Host plugin body — no host-side behavior for the plugin inventory tab. */
|
||||
export function apply(): void {}
|
||||
@@ -0,0 +1,20 @@
|
||||
/** Package-owned invariant companion. @module @deepseek-ai/dsh-client-ui-settings-plugin-inventory/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-settings-plugin-inventory'
|
||||
|
||||
/** Cordis companion plugin name. */
|
||||
export const name = 'client-ui-settings-plugin-inventory-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 */
|
||||
@@ -0,0 +1,93 @@
|
||||
// @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 { LocaleRuntime } from '@deepseek-ai/dsh-client-locale/client'
|
||||
import { SlotRegistry } 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 { PluginInventorySettingsTab } from '../src/client/PluginInventorySettingsTab.tsx'
|
||||
import type { PluginInventorySettingsTabInjected } from '../src/client/PluginInventorySettingsTab.tsx'
|
||||
|
||||
usePinnedBrowserLanguages('zh-CN')
|
||||
afterEach(cleanup)
|
||||
|
||||
const EMPTY = { entries: [] }
|
||||
type ListResult =
|
||||
| { readonly ok: true; readonly value: typeof EMPTY }
|
||||
| { readonly ok: false; readonly error: { readonly code: string; readonly message: string } }
|
||||
|
||||
async function bench() {
|
||||
const ctx = new Context()
|
||||
await ctx.plugin(SlotRegistry).await()
|
||||
const locale = new LocaleRuntime(ctx)
|
||||
ctx.provide('locale', locale)
|
||||
class RemoteService extends Service {
|
||||
constructor(serviceCtx: Context) {
|
||||
super(serviceCtx, 'remote')
|
||||
}
|
||||
}
|
||||
new RemoteService(ctx)
|
||||
const list = vi.fn<() => Promise<ListResult>>()
|
||||
.mockResolvedValue({ ok: true, value: EMPTY })
|
||||
ctx.provide('remote.pluginInventory', { list })
|
||||
return { ctx, slots: ctx.get('slots') as SlotRegistry, locale, list }
|
||||
}
|
||||
|
||||
function declare(slots: SlotRegistry): () => void {
|
||||
return slots.register({
|
||||
name: 'root',
|
||||
children: { 'settings.plugins.tab': { kind: 'list', scope: 'root' } },
|
||||
} as never, () => null)
|
||||
}
|
||||
|
||||
describe('ui-settings-plugin-inventory 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 tab 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.plugins.tab')[0]!
|
||||
expect(entry.component).toBe(PluginInventorySettingsTab)
|
||||
expect(entry.options).toMatchObject({ id: 'all', order: 10 })
|
||||
expect(entry.locale).toBe(NS)
|
||||
expect(resolveSlotLabel(entry.options.label)).toBe('插件列表')
|
||||
expect(b.list).not.toHaveBeenCalled()
|
||||
|
||||
const injected = (entry.inject as unknown as () => PluginInventorySettingsTabInjected)()
|
||||
await expect(injected.list()).resolves.toEqual(EMPTY)
|
||||
expect(b.list).toHaveBeenCalledOnce()
|
||||
b.list.mockResolvedValueOnce({ ok: false, error: { code: 'REMOTE_ERROR', message: 'unavailable' } })
|
||||
await expect(injected.list()).rejects.toThrow('pluginInventory.list failed: REMOTE_ERROR: unavailable')
|
||||
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.plugins.tab')).toHaveLength(0)
|
||||
|
||||
const stop = declare(b.slots)
|
||||
await vi.waitFor(() => { expect(b.slots.entries('settings.plugins.tab')).toHaveLength(1) })
|
||||
b.locale.setLocale('en')
|
||||
expect(resolveSlotLabel(b.slots.entries('settings.plugins.tab')[0]!.options.label)).toBe('Plugin list')
|
||||
|
||||
stop()
|
||||
expect(b.slots.entries('settings.plugins.tab')).toHaveLength(0)
|
||||
declare(b.slots)
|
||||
await vi.waitFor(() => {
|
||||
expect(b.slots.entries('settings.plugins.tab')[0]?.component).toBe(PluginInventorySettingsTab)
|
||||
})
|
||||
|
||||
await fiber.dispose()
|
||||
expect(b.slots.entries('settings.plugins.tab')).toHaveLength(0)
|
||||
expect(() => b.locale.register(NS, 'zh', {})).not.toThrow()
|
||||
await b.ctx.fiber.dispose()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,127 @@
|
||||
// @vitest-environment jsdom
|
||||
import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest'
|
||||
import { PluginInventorySettingsTab } from '../src/client/PluginInventorySettingsTab.tsx'
|
||||
import type {
|
||||
PluginInventorySettingsTabInjected,
|
||||
PluginInventorySettingsTabProps,
|
||||
} from '../src/client/PluginInventorySettingsTab.tsx'
|
||||
import { en, type PluginInventoryLocaleKey } from '../src/client/locales.ts'
|
||||
|
||||
afterEach(cleanup)
|
||||
|
||||
type Snapshot = Awaited<ReturnType<PluginInventorySettingsTabInjected['list']>>
|
||||
const t = ((key: PluginInventoryLocaleKey): string => en[key]) as PluginInventorySettingsTabProps['t']
|
||||
|
||||
function props(list: PluginInventorySettingsTabInjected['list']): PluginInventorySettingsTabProps {
|
||||
return {
|
||||
t,
|
||||
list,
|
||||
} as PluginInventorySettingsTabProps
|
||||
}
|
||||
|
||||
const SNAPSHOT = {
|
||||
entries: [
|
||||
{ entryId: '8a1b2c3d', moduleName: '@deepseek-ai/cordis-plugin-hmr', enabled: true, fiberPhase: 'active' },
|
||||
{ entryId: 'pending', moduleName: 'cordis:pending-name', enabled: true, fiberPhase: 'pending' },
|
||||
{ entryId: 'loading', moduleName: '@fixture/loading-name', enabled: true, fiberPhase: 'loading' },
|
||||
{ entryId: 'failed', moduleName: '@fixture/failed-name', enabled: true, fiberPhase: 'failed' },
|
||||
{ entryId: 'unloading', moduleName: '@fixture/unloading-name', enabled: true, fiberPhase: 'unloading' },
|
||||
{ entryId: 'unobserved', moduleName: '@fixture/unobserved-name', enabled: true, fiberPhase: null },
|
||||
{ entryId: 'disabled-entry', moduleName: '@deepseek-ai/dsh-host-directory-picker-native', enabled: false, fiberPhase: null },
|
||||
],
|
||||
} as unknown as Snapshot
|
||||
|
||||
describe('PluginInventorySettingsTab', () => {
|
||||
it('renders runtime status only for enabled plugins', async () => {
|
||||
const deferred = Promise.withResolvers<Snapshot>()
|
||||
const list = vi.fn(() => deferred.promise)
|
||||
const view = render(<PluginInventorySettingsTab {...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('7')
|
||||
expect(screen.getAllByRole('listitem')).toHaveLength(7)
|
||||
expect(screen.getAllByText(en.enabledTag)).toHaveLength(6)
|
||||
expect(screen.getByText(en.disabledTag)).toBeTruthy()
|
||||
for (const value of [
|
||||
'Mounted',
|
||||
'Waiting for dependencies',
|
||||
'Loading',
|
||||
'Mount failed',
|
||||
'Unloading',
|
||||
'Not mounted',
|
||||
]) {
|
||||
expect(screen.getByRole('img', { name: value })).toBeTruthy()
|
||||
}
|
||||
const active = screen.getByRole('button', { name: 'hmr, Mounted, Enabled' })
|
||||
expect(active.getAttribute('aria-expanded')).toBe('false')
|
||||
fireEvent.click(active)
|
||||
expect(active.getAttribute('aria-expanded')).toBe('true')
|
||||
expect(view.container.querySelector('[data-loader-entry]')?.textContent).toBe('8a1b2c3d')
|
||||
expect(screen.getByText(en.configuration)).toBeTruthy()
|
||||
expect(screen.getByText(en.cordis)).toBeTruthy()
|
||||
fireEvent.click(active)
|
||||
expect(view.container.querySelector('[data-loader-entry]')).toBeNull()
|
||||
|
||||
fireEvent.click(active)
|
||||
fireEvent.change(screen.getByRole('searchbox', { name: en.search }), {
|
||||
target: { value: 'disabled-entry' },
|
||||
})
|
||||
expect(view.container.querySelector('[data-loader-entry]')).toBeNull()
|
||||
fireEvent.click(screen.getByRole('button', { name: 'directory-picker-native, Disabled' }))
|
||||
expect(screen.getAllByText(en.disabledTag)).toHaveLength(2)
|
||||
expect(screen.queryByText(en.cordis)).toBeNull()
|
||||
expect(screen.queryByText(en.unobserved)).toBeNull()
|
||||
})
|
||||
|
||||
it('filters by module name or Loader entry id', async () => {
|
||||
render(<PluginInventorySettingsTab {...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('directory-picker-native')).toBeTruthy()
|
||||
|
||||
fireEvent.change(search, { target: { value: 'cordis-plugin-hmr' } })
|
||||
expect(screen.getAllByRole('listitem')).toHaveLength(1)
|
||||
expect(screen.getByText('hmr')).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<PluginInventorySettingsTabInjected['list']>()
|
||||
.mockRejectedValueOnce(new Error('private transport detail'))
|
||||
.mockResolvedValueOnce({ entries: [] })
|
||||
render(<PluginInventorySettingsTab {...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 PluginInventorySettingsTabInjected['list']
|
||||
const failed = render(<PluginInventorySettingsTab {...props(syncFailure)} />)
|
||||
expect((await screen.findByRole('alert')).textContent).toBe(en.error)
|
||||
failed.unmount()
|
||||
|
||||
const deferred = Promise.withResolvers<Snapshot>()
|
||||
const pending = render(<PluginInventorySettingsTab {...props(() => deferred.promise)} />)
|
||||
pending.unmount()
|
||||
await act(async () => { deferred.resolve(SNAPSHOT) })
|
||||
|
||||
const deferredFailure = Promise.withResolvers<Snapshot>()
|
||||
const pendingFailure = render(<PluginInventorySettingsTab {...props(() => deferredFailure.promise)} />)
|
||||
pendingFailure.unmount()
|
||||
await act(async () => { deferredFailure.reject(new Error('late failure')) })
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,15 @@
|
||||
import { Context } from '@deepseek-ai/cordis'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import InvariantRegistry from '@deepseek-ai/dsh-invariants'
|
||||
import * as PluginsInvariant from '../src/invariant.ts'
|
||||
|
||||
describe('ui-settings-plugin-inventory invariant companion', () => {
|
||||
it('registers the empty installer and keeps the node half inert', async () => {
|
||||
const ctx = new Context()
|
||||
await ctx.plugin(InvariantRegistry, { enabled: true })
|
||||
await expect(ctx.plugin(PluginsInvariant).await()).resolves.toBeDefined()
|
||||
const { apply } = await import('../src/index.ts')
|
||||
apply()
|
||||
await ctx.fiber.dispose()
|
||||
})
|
||||
})
|
||||
36
packages/client/ui-settings-plugin-inventory/tsconfig.json
Normal file
36
packages/client/ui-settings-plugin-inventory/tsconfig.json
Normal file
@@ -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": "../../runtime-diagnostics/invariants"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import { clientBundle } from '../tsdown.client.ts'
|
||||
|
||||
export default clientBundle('@deepseek-ai/dsh-client-ui-settings-plugin-inventory', ['lib/types/index.js', 'lib/types/invariant.js'])
|
||||
Reference in New Issue
Block a user