Merge branch 'master' into agent/web-file-reference-prompt

This commit is contained in:
Ziya
2026-08-12 23:19:35 +08:00
committed by GitHub
118 changed files with 2483 additions and 332 deletions

View File

@@ -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: 236531281c17ef982982e97caad99491584bd0b5
README.zh.md: 73bc3e31c90a4f12c4c5f11e9fd0552601dcc7a6
README.md: b9452d1f763be5be6953cb7973da8a2c909ed979
README.zh.md: 0dfb6e6b6d619f111e36d5bdf57d127ac1ca9ef5

View File

@@ -35,13 +35,13 @@ The browser side of the dsh web GUI: shell boot, browser-host communication, sha
| [`ui-model/`](ui-model/README.md) | Provides model selection in conversation surfaces. |
| [`ui-permission/`](ui-permission/README.md) | Configures default permissions and switches the current session's access. |
| [`ui-plan/`](ui-plan/README.md) | Presents active plan-mode status and its exit control. |
| [`ui-plugin-config/`](ui-plugin-config/README.md) | The Plugins settings section: host-plane plugin configuration as expandable cards. |
| [`ui-plugin-config/`](ui-plugin-config/README.md) | Owns the Plugins settings section, its tab extension point, and configurable host-plane plugin cards. |
| [`ui-question/`](ui-question/README.md) | Presents interactive questions requested by the agent. |
| [`ui-agent-preset/`](ui-agent-preset/README.md) | Selects a session's agent preset and authors preset compositions. |
| [`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. |
| [`ui-plugins/`](ui-plugins/README.md) | Contributes the read-only Host Loader inventory tab to Plugins settings. |
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.

View File

@@ -35,13 +35,13 @@ dsh web GUI 的浏览器侧shell 启动、浏览器与宿主通信、共享 U
| [`ui-model/`](ui-model/README.md) | 在对话界面中提供模型选择。 |
| [`ui-permission/`](ui-permission/README.md) | 配置默认权限并切换当前会话的访问模式。 |
| [`ui-plan/`](ui-plan/README.md) | 展示生效中的 plan mode 状态及其退出控件。 |
| [`ui-plugin-config/`](ui-plugin-config/README.md) | 插件设置分区:把宿主平面插件配置呈现为可展开卡片。 |
| [`ui-plugin-config/`](ui-plugin-config/README.md) | 拥有“插件设置分区、它的标签页扩展点,以及可配置的宿主平面插件卡片。 |
| [`ui-question/`](ui-question/README.md) | 展示 agent 请求的交互式问题。 |
| [`ui-agent-preset/`](ui-agent-preset/README.md) | 选择会话的 agent 预设,并编写预设组合。 |
| [`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 条目。 |
| [`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)负责跨包组合与加载决策。

View File

@@ -9,6 +9,7 @@ import {
createAssistantMessage,
createToolResultMessage,
createUserMessage,
isTokenDelta,
} from '@deepseek-ai/dsh-llm/message'
import { CallId } from '@deepseek-ai/dsh-llm/brand'
import type {
@@ -876,6 +877,76 @@ function tokenUsageOf(log: readonly SessionEvent[]): FixtureTokenUsageProjection
return totals
}
/** Fixture parallel of session-stats' whole-log counting and wall-time fold. */
function sessionStatsOf(log: readonly SessionEvent[]): {
turns: number
steps: number
llmMs: number
toolMs: number
ttftMs: number
ttftSteps: number
decodeMs: number
decodeTokens: number
} {
const value = { turns: 0, steps: 0, llmMs: 0, toolMs: 0, ttftMs: 0, ttftSteps: 0, decodeMs: 0, decodeTokens: 0 }
let lastTurn: number | null = null
let openStep: { turn: number; step: number; startTime: number; firstTokenTime: number | null } | null = null
const pendingCalls = new Map<string, number>()
for (const event of log) {
switch (event.type) {
case 'step/start':
openStep = { turn: event.data.turn, step: event.data.step, startTime: event.time, firstTokenTime: null }
break
case 'assistant/chunk':
if (openStep !== null && openStep.turn === event.data.turn && openStep.step === event.data.step
&& openStep.firstTokenTime === null && isTokenDelta(event.data.chunk)) {
openStep.firstTokenTime = event.time
}
break
case 'assistant/message': {
if (openStep === null || openStep.turn !== event.data.turn || openStep.step !== event.data.step) break
value.llmMs += Math.max(0, event.time - openStep.startTime)
if (openStep.firstTokenTime !== null) {
value.ttftMs += Math.max(0, openStep.firstTokenTime - openStep.startTime)
value.ttftSteps += 1
const outputTokens = event.data.usage?.outputTokens
if (typeof outputTokens === 'number' && Number.isFinite(outputTokens) && outputTokens >= 0) {
value.decodeMs += Math.max(0, event.time - openStep.firstTokenTime)
value.decodeTokens += outputTokens
}
}
openStep = null
break
}
case 'tool/call':
pendingCalls.set(event.data.callId, event.time)
break
case 'tool/result': {
const callId = event.data.message.source.callId
const dispatched = pendingCalls.get(callId)
if (dispatched === undefined) break
pendingCalls.delete(callId)
value.toolMs += Math.max(0, event.time - dispatched)
break
}
case 'step/end':
if (event.data.turn !== lastTurn) {
value.turns += 1
lastTurn = event.data.turn
}
value.steps += 1
openStep = null
break
case 'turn/end':
pendingCalls.clear()
break
default:
break
}
}
return value
}
interface FixtureRequestContext {
provider: string
model: string
@@ -994,6 +1065,8 @@ function projectionValuesOf(log: readonly SessionEvent[]): Record<string, unknow
values['contextPressure'] = contextPressureOf(log)
// Always present (token-meter composed): heuristic request composition.
values['contextBreakdown'] = contextBreakdownOf(log)
// Always present (session-stats unit composed): whole-log turn/step counts.
values['sessionStats'] = sessionStatsOf(log)
// Always present (attachment service composed): the deployment image
// limits, constant per boot (mirrors the attachment-local defaults).
// Deliberate host divergence: the real gateway never pushes an imageLimits
@@ -1041,6 +1114,17 @@ function projectionFramesOf(id: SessionId, log: readonly SessionEvent[], event:
seq: event.seq,
})
}
// The stats fold's view advances on message assembly and tool settlement
// (wall times) and on step close (counts).
if (type === 'assistant/message' || type === 'tool/result' || type === 'step/end') {
frames.push({
type: 'session/projection',
sessionId: id,
key: 'sessionStats',
value: sessionStatsOf(log),
seq: event.seq,
})
}
if (frames.length > 0) return frames
if (type === 'session/title') {
const values = projectionValuesOf(log)

View File

@@ -164,6 +164,10 @@ describe('createFixtureApi', () => {
toolsTokens: 0,
messageTokens: 0,
},
// Session-stats unit composed: no figure accrues on the empty log.
sessionStats: {
turns: 0, steps: 0, llmMs: 0, toolMs: 0, ttftMs: 0, ttftSteps: 0, decodeMs: 0, decodeTokens: 0,
},
imageLimits: {
maxImageBytes: 5 * 1024 * 1024,
maxImagesPerMessage: 20,
@@ -360,7 +364,7 @@ describe('createFixtureApi', () => {
const envelopes: RpcRequest<MuxFrame>[] = []
for await (const envelope of api.events.mux(req({}), abort.signal)) {
envelopes.push(envelope)
if (envelopes.length >= 11) abort.abort()
if (envelopes.length >= 13) abort.abort()
}
return envelopes
}
@@ -381,14 +385,16 @@ describe('createFixtureApi', () => {
value: { systemTokens: 0, toolsTokens: 0 },
})
expect((first[8]?.payload as { value: { messageTokens: number } }).value.messageTokens).toBeGreaterThan(0)
expect(first[9]?.payload).toMatchObject({
expect(first[9]?.payload).toMatchObject({ type: 'session/projection', sessionId: 'fx-alpha', key: 'sessionStats' })
expect((first[9]?.payload as { value: { turns: number; steps: number } }).value.steps).toBeGreaterThan(0)
expect(first[10]?.payload).toMatchObject({
type: 'session/projection', sessionId: 'fx-alpha', key: 'imageLimits',
value: { maxImagesPerMessage: 20, maxImageBytes: 5 * 1024 * 1024 },
})
expect(first[10]?.payload).toMatchObject({ type: 'approval/requested', toolName: 'dangerous_tool' })
expect(second[10]?.rpcId).toBe(first[10]?.rpcId) // stable rpcId across replays (host replay semantics)
expect(first[11]?.payload).toMatchObject({ type: 'question/requested', sessionId: 'fx-alpha' })
expect(second[11]?.rpcId).toBe(first[11]?.rpcId)
expect(first[11]?.payload).toMatchObject({ type: 'approval/requested', toolName: 'dangerous_tool' })
expect(second[11]?.rpcId).toBe(first[11]?.rpcId) // stable rpcId across replays (host replay semantics)
expect(first[12]?.payload).toMatchObject({ type: 'question/requested', sessionId: 'fx-alpha' })
expect(second[12]?.rpcId).toBe(first[12]?.rpcId)
})
it('steer with no replay in flight falls through to a fresh queued turn; non-text blocks stringify empty', async () => {

View File

@@ -2,9 +2,14 @@
// history fold derive AssistantTiming from the same step/start -> first token
// delta -> assistant/message sequence.
import { isTokenDelta } from '@deepseek-ai/dsh-llm/message'
import type { SessionEvent } from '@deepseek-ai/dsh-session/types'
import type { AssistantTiming } from './conversation.ts'
// The first-token predicate lives beside the StreamChunk type in dsh-llm;
// re-exported here so Chat Definitions keep their client-runtime import.
export { isTokenDelta } from '@deepseek-ai/dsh-llm/message'
/** Pre-finalize timing boundaries for one assistant step (start + first token). */
export interface AssistantStepMetadata {
stepStartTime: number | null
@@ -21,24 +26,6 @@ export function assistantStepKey(turn: number, step: number): string {
return `${turn}\u0000${step}`
}
/**
* Whether a chunk carries visible model output (first-token boundary). Empty
* deltas (heartbeats, empty tool-call frames) do not count as a first token.
* @param chunk - the assistant/chunk payload.
* @returns true when the chunk contains a non-empty text/reasoning/tool delta.
*/
export function isTokenDelta(chunk: SessionEvent<'assistant/chunk'>['data']['chunk']): boolean {
switch (chunk.type) {
case 'text-delta':
case 'reasoning-delta':
return chunk.text !== ''
case 'tool-call-delta':
return chunk.argumentsDelta !== '' || chunk.name !== undefined
default:
return false
}
}
/**
* Fold one event into the per-step timing index: step/start opens the entry,
* the first non-empty token delta stamps first-token time once. Other event

View File

@@ -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/ui-conversation/README.md
README.md: b6a265c9f0a67d31ebeaa88bd59082c4be465983
README.zh.md: 001e0a58badd6f31875c09a31085277928f1ae22
README.md: 131f76fc8bc7b63449e022ad91fd8453c10d5f01
README.zh.md: 8d0cd4e82b8bf4256db9b0f3cb868630f57ce68e

View File

@@ -40,7 +40,7 @@ Image intake accepts paste and whole-page drop: the bar binds document-level dra
The composer bar declares session-scoped single seats for `'conversation.input.plan'` (right of the local access-mode control) and `'conversation.input.model'` (immediately before the pending indicator and send/stop controls), plus list slots for overlay, dock, left, and right input extensions. Feature packages own each control and its state; ui-conversation supplies placement, the `locked` owner prop, and the standard slot shares. The leading plus button is a Command launcher, not an attachment surface: it asks the session's `SlashController` to open only the `/` trigger's `command` source over the current textarea selection, while ui-slash's existing `MenuView` remains the sole floating menu and pick path. No file row, file input, upload protocol, or second menu component is introduced. While the `plan` projection's effective target is plan mode, InputBar swaps its textarea placeholder to the plan-task wording, localized through the `conversation` locale namespace this package registers (the `placeholder.plan` / `hint.plan` keys) and shared verbatim with the claimed `/plan` command hint (a host-folded value read through the standard-kit `useProjection`; owner-supplied placeholders win). A pending composer takeover remains mounted when another conversation view is active so the blocked agent can still receive its answer; without a pending interaction, the active-session composer belongs to Chat. The composer-bar slot itself is `session-maybe`: with no current session the same bar keeps message actions inert (machine faces absent, `disabled` owner prop), while the whole dashed card opens the existing Workspace picker by pointer and the read-only textarea opens it through Enter or Space. Disabled controls release pointer events to the card, and the card contains `pointerdown` so the open picker's outside-close cannot race a reopen. The bar never swaps in a parallel tree, so the textarea DOM survives Workspace selection; strict-session control seats stay empty until a session exists.
The chat stats line takes its token accounting from the generic token-meter `tokenUsage` projection read through the standard-kit `useProjection`: billed input is uncached input plus cache reads and writes; cache hit divides cache reads by that total. Visible nodes supply only the turn and step counts plus the LLM and tool wall times, which are window-scoped facts about what is on screen rather than accounting; durable token and context groups remain visible when compaction leaves no assistant node in the loaded window. The same window fold averages each recorded step's TTFT and divides sampled output tokens by their summed decode spans into a latency/throughput group localized through the `conversation` locale namespace (`TTFT avg … · … tok/s` in English); a step missing a timing boundary or a usage sample drops out of those figures instead of skewing them. The turn-count, step-count, duration, cache, and token labels use the same namespace. Each settled turn additionally appends hover-revealed `TTFT {s}s · {tps} tok/s` labels to its assistant footer after the `Ran for` duration — the turn's first-step TTFT and its turn-aggregate decode throughput — gated on the turn's timing being in the loaded window (a contiguous log suffix, so an in-window turn carries every one of its steps) and omitting whichever figure is unrecorded. A deployment without token-meter drops the token groups; when the line overflows, it elides with an ellipsis and a delayed hover tooltip carries the full text only while actually clipped. Context occupancy renders as the composer's trailing ContextMeter: a 14px occupancy ring after the model seat, fed by `contextPressure` and rendered only once both a numerator and a route capacity are known, that click-opens a panel pairing the `percent used` header and `~used / capacity` figures with a color-segmented bar and `~`-prefixed heuristic composition rows (system prompt, tools, messages) from the `contextBreakdown` projection. The ring and header read `projectedTokens` — the provider sample carried forward over the surface's movement since — so a compaction registers immediately instead of after a further turn; the composition rows stay wholly heuristic and therefore still do not sum to the header ([rationale](../../llm/token-meter/README.md)). Occupancy is deliberately an approximation: numerator and capacity are independent last-wins projection fields, not one atomic request observation.
The chat stats line takes its token accounting from the generic token-meter `tokenUsage` projection read through the standard-kit `useProjection`: billed input is uncached input plus cache reads and writes; cache hit divides cache reads by that total. The turn and step counts, the LLM and tool wall times, and the latency/throughput group all ride the whole-log `sessionStats` projection (host-folded from step boundaries, first-token chunks, tool pairs, and assembled messages), so paging and compaction cannot change any strip figure; an assembly without that unit falls back to the window fold over visible nodes, whose fields mirror the projection's. The strip averages each recorded step's TTFT and divides sampled output tokens by their summed decode spans into a latency/throughput group localized through the `conversation` locale namespace (`TTFT avg … · … tok/s` in English); a step missing a timing boundary or a usage sample drops out of those figures instead of skewing them, and durable count, token, and context groups remain visible when compaction leaves no assistant node in the loaded window. The turn-count, step-count, duration, cache, and token labels use the same namespace. Each settled turn additionally appends hover-revealed `TTFT {s}s · {tps} tok/s` labels to its assistant footer after the `Ran for` duration — the turn's first-step TTFT and its turn-aggregate decode throughput — gated on the turn's timing being in the loaded window (a contiguous log suffix, so an in-window turn carries every one of its steps) and omitting whichever figure is unrecorded. A deployment without token-meter drops the token groups; when the line overflows, it elides with an ellipsis and a delayed hover tooltip carries the full text only while actually clipped. Context occupancy renders as the composer's trailing ContextMeter: a 14px occupancy ring after the model seat, fed by `contextPressure` and rendered only once both a numerator and a route capacity are known, that click-opens a panel pairing the `percent used` header and `~used / capacity` figures with a color-segmented bar and `~`-prefixed heuristic composition rows (system prompt, tools, messages) from the `contextBreakdown` projection. The ring and header read `projectedTokens` — the provider sample carried forward over the surface's movement since — so a compaction registers immediately instead of after a further turn; the composition rows stay wholly heuristic and therefore still do not sum to the header ([rationale](../../llm/token-meter/README.md)). Occupancy is deliberately an approximation: numerator and capacity are independent last-wins projection fields, not one atomic request observation.
`src/client/` is organized by domain. `contract/` is the shared face for slot declarations, composed props, and cross-domain types; `skeleton/`, `chat/`, `input/`, `queue/`, and `settings/` keep their implementations internal, while `apply.ts` is their assembly point. The `/client` exports contain only loader entries, service classes, and contract types; components and store factories reach the page through slot registrations.
@@ -56,7 +56,7 @@ None; this package neither assembles nor sends a provider request.
## Known Limitations and Deferred Work
- **Stats-line durations and speeds cover the in-window flow only** — LLM and tool wall times plus the TTFT and throughput averages fold the snapshot's assistant `timing` and tool call/result pairs, so nodes outside the loaded event window (older history) are not counted.
- **The stats-line fallback fold covers the in-window flow only** — without the `sessionStats` projection (an assembly that does not mount the unit), every figure folds the snapshot's assistant `timing` and tool call/result pairs, so nodes outside the loaded event window (older history) are not counted and the numbers grow per loaded page.
- **The details panel has no entry point** — `ChatViewInjected.openDetails` is implemented but uncalled, so the raw selected-call display is unreachable in the assembled application. There is no Input/Output/Metadata switch, Prev/Next stepping, or trajectory deep link.
- **Assistant per-message paging is a reserved slot** — drawn in the design, not implemented. The finalized content IconActions row (copy / clock / branch) ships under the last content-text assistant of each turn that has ended; mid-turn narration, Think-only nodes, and every node of a turn still producing steps stay chrome-free. Branch stays disabled unless that message is also the last transcript node of a completed turn; when enabled, it forks through that turn, increments the inherited title on the client, and opens the child. A fork or rename failure leaves the source selected ([decision](../../../.agents/notes/implemented/bug-fix/2026-08-02-message-fork-actions-require-completed-turn-tail.md)).
- **Sent user messages cannot be edited** — user bubbles retain clock and copy; branch lives only under assistant answers ([decision](../../../.agents/notes/implemented/simplification/2026-08-06-user-bubbles-drop-the-branch-action.md)). Editing returns with the capability behind it: a client mutation over a settled user message, plus the host behavior for the turn that already consumed it ([decision](../../../.agents/notes/implemented/simplification/2026-07-31-drop-user-message-edit-stub.md)).

View File

@@ -40,7 +40,7 @@ Host 带 placement 的 `session/queue` 快照也会携带待处理 steering。Qu
输入栏为 `'conversation.input.plan'`(位于本地 access 模式控件右侧)和 `'conversation.input.model'`(渲染在 pending 指示器与发送/停止控件之前)声明会话作用域的单实例 seat并为 overlay、dock、left 和 right 输入扩展声明列表 slot。各功能包拥有相应控件及其状态ui-conversation 提供放置位置、`locked` owner prop 和标准 slot share。前置加号按钮是 Command launcher而非附件入口它要求当前会话的 `SlashController` 基于 textarea 当前 selection只打开 `/` trigger 的 `command` source同时 ui-slash 既有的 `MenuView` 仍是唯一的浮层菜单与 pick 路径。不引入 File 行、file input、上传协议或第二套菜单组件。当 `plan` 投影的有效目标为 plan mode 时InputBar 将文本框 placeholder 切换为 plan 任务措辞,经本包注册的 `conversation` locale 命名空间(`placeholder.plan` / `hint.plan` 键)本地化,并与已认领 `/plan` 命令的提示逐字共用同一份文案(经标准套件 `useProjection` 读取的 host 折叠值owner 提供的 placeholder 优先)。另一个会话视图活跃时,待处理的 composer 接管仍保持挂载,使被阻塞的 agent智能体仍能收到回答没有待处理交互时活跃会话的 composer 归 Chat 所有。composer bar slot 本身为 `session-maybe`:没有当前会话时,同一个 bar 会让消息操作保持不可交互machine face 均缺席、`disabled` owner prop整张虚线卡片可经指针打开现有 Workspace picker只读 textarea 也可通过 Enter 或 Space 打开。禁用控件会把指针事件交给卡片,卡片也会拦下 `pointerdown`,避免已打开 picker 的外点关闭与重新打开发生竞态。它不会换入一棵平行树,因此选择 Workspace 时 textarea DOM 不会被销毁;严格会话作用域的控件 seat 在会话存在之前保持为空。
聊天统计行的 token 账目来自经标准套件 `useProjection` 读取的通用 token-meter 投影 `tokenUsage`:计费输入为未缓存输入、缓存读取与缓存写入之和;缓存命中率以缓存读取除以该总量。可见节点只提供轮次与步骤计数,以及 LLM大语言模型工具墙钟时间这些是关于「屏幕上有什么」的窗口作用域事实而非账目压缩compaction使已加载窗口不再包含 assistant 节点时,持久 token 与上下文分组仍保持可见。同一次窗口折算还会把每个有完整记录的步骤的 TTFT首 token 延迟)取平均,并用采样到的输出 token 数除以其解码时长之和,得到经 `conversation` locale 命名空间本地化的延迟/吞吐分组(中文为 `首 token 平均 … · … tok/s`);缺少某个 timing 边界或 usage 采样的步骤会直接退出这些数字,而不是让它们失真。轮次计数、步骤计数、耗时、缓存与 token 各项的标签也使用同一命名空间。每个已结算轮次还会在其 assistant footer 的 `用时` 之后追加 hover 才显示的 `首 token {s}秒 · {tps} tok/s` 标签——即该轮次首个步骤的 TTFT 与轮次聚合的解码吞吐——仅当该轮次的 timing 位于已加载窗口内才显示(窗口是日志的连续后缀,因此窗口内的轮次必然带着它的全部步骤),未记录的数字会各自省略。未组合 token-meter 的部署会整组省略 token 分组;统计行过长时以省略号截断,仅在内容真的被裁切时由延迟 hover tooltip 承载完整文本。上下文占用率渲染为 composer 尾部的 ContextMeter模型座位之后的一枚 14px 占用圆环,由 `contextPressure` 供数,仅当分子与路由容量都已知时才渲染;点击弹出的面板把「已用百分比」标题与 `~已用 / 容量` 数字,与来自 `contextBreakdown` 投影、带 `~` 前缀的启发式组成明细行(系统提示词、工具、对话消息)及分色分段进度条并列。圆环与标题读取 `projectedTokens`——把提供方样本沿此后表层的增减推进到当下——因此压缩会立刻反映出来,而不必再等一整轮;组成明细行仍是纯启发式,因此加起来依然不等于标题数字([原理](../../llm/token-meter/README.md))。占用率是刻意为之的近似值:分子与容量是两个相互独立的「后写覆盖」投影字段,并非同一次请求的原子观测。
聊天统计行的 token 账目来自经标准套件 `useProjection` 读取的通用 token-meter 投影 `tokenUsage`:计费输入为未缓存输入、缓存读取与缓存写入之和;缓存命中率以缓存读取除以该总量。轮次与步骤计数LLM大语言模型工具墙钟时间、以及延迟/吞吐分组都来自全日志的 `sessionStats` 投影Host 端从步边界、首 token chunk、工具配对与已组装消息折算因此分页与压缩都无法改变统计条的任何数字未组合该单元的装配回退为对可见节点做窗口折算其字段与投影一一对应。统计条把每个有完整记录的步骤的 TTFT首 token 延迟)取平均,并用采样到的输出 token 数除以其解码时长之和,得到经 `conversation` locale 命名空间本地化的延迟/吞吐分组(中文为 `首 token 平均 … · … tok/s`);缺少某个 timing 边界或 usage 采样的步骤会直接退出这些数字,而不是让它们失真压缩compaction使已加载窗口不再包含 assistant 节点时持久计数、token 与上下文分组仍保持可见。轮次计数、步骤计数、耗时、缓存与 token 各项的标签也使用同一命名空间。每个已结算轮次还会在其 assistant footer 的 `用时` 之后追加 hover 才显示的 `首 token {s}秒 · {tps} tok/s` 标签——即该轮次首个步骤的 TTFT 与轮次聚合的解码吞吐——仅当该轮次的 timing 位于已加载窗口内才显示(窗口是日志的连续后缀,因此窗口内的轮次必然带着它的全部步骤),未记录的数字会各自省略。未组合 token-meter 的部署会整组省略 token 分组;统计行过长时以省略号截断,仅在内容真的被裁切时由延迟 hover tooltip 承载完整文本。上下文占用率渲染为 composer 尾部的 ContextMeter模型座位之后的一枚 14px 占用圆环,由 `contextPressure` 供数,仅当分子与路由容量都已知时才渲染;点击弹出的面板把「已用百分比」标题与 `~已用 / 容量` 数字,与来自 `contextBreakdown` 投影、带 `~` 前缀的启发式组成明细行(系统提示词、工具、对话消息)及分色分段进度条并列。圆环与标题读取 `projectedTokens`——把提供方样本沿此后表层的增减推进到当下——因此压缩会立刻反映出来,而不必再等一整轮;组成明细行仍是纯启发式,因此加起来依然不等于标题数字([原理](../../llm/token-meter/README.md))。占用率是刻意为之的近似值:分子与容量是两个相互独立的「后写覆盖」投影字段,并非同一次请求的原子观测。
`src/client/` 按领域组织。`contract/` 是 slot 声明、组合 props 与跨领域类型的共享表层;`skeleton/``chat/``input/``queue/``settings/` 保持内部实现,`apply.ts` 是它们的组装点。`/client` 导出表层只包含 loader entry、service class 和 contract 类型;组件与 store factory 经 slot 注册抵达页面。
@@ -56,7 +56,7 @@ Host 带 placement 的 `session/queue` 快照也会携带待处理 steering。Qu
## 已知限制与暂缓事项
- **统计行的耗时与速率只覆盖窗口内消息流**LLM 与工具墙钟时间以及 TTFT 与吞吐平均值由快照的 assistant `timing` 与工具调用/工具结果配对折算,落在已加载事件窗口之外的节点(更早的历史)不计入。
- **统计行的回退折算只覆盖窗口内消息流**未组合 `sessionStats` 投影单元的装配中,所有数字由快照的 assistant `timing` 与工具 call/result 配对折算,落在已加载事件窗口之外的节点(更早的历史)不计入,数字随加载页数增长
- **详情面板没有入口**`ChatViewInjected.openDetails` 虽已实现却无人调用,因此以原始形式显示已选择调用的那部分在组装后的应用中不可达。没有 Input/Output/Metadata 切换、Prev/Next 步进,也没有 trajectory 深链接。
- **assistant 逐消息分页是预留 slot**:设计中已有图稿,尚未实现。已定稿的内容 IconActions 行(复制/时钟/分支)只挂在每个已结束轮次中最后一条带 text 内容的 assistant 下;轮次中间的叙述、纯 Think 节点,以及仍在产出步骤的轮次里的所有节点都不带 chrome。除非该消息同时也是已完成轮次的最后一个 transcript 节点,否则分支保持禁用;启用后,它会 fork 到该轮次末尾,在 client 端递增继承标题并打开子会话。fork 或改名失败时源会话保持选中([决策](../../../.agents/notes/implemented/bug-fix/2026-08-02-message-fork-actions-require-completed-turn-tail.md))。
- **已发送的 user 消息无法编辑**user 气泡保留时钟和复制;分支只存在于 assistant 回答之下([决策](../../../.agents/notes/implemented/simplification/2026-08-06-user-bubbles-drop-the-branch-action.md))。编辑功能要与其背后的能力一起回归:既需要针对已定稿 user 消息的 client 变更,也需要 host 侧对已经消费过它的轮次给出行为([决策](../../../.agents/notes/implemented/simplification/2026-07-31-drop-user-message-edit-stub.md))。

View File

@@ -70,6 +70,7 @@
"@deepseek-ai/dsh-compact": "workspace:^",
"@deepseek-ai/dsh-invariants": "workspace:^",
"@deepseek-ai/dsh-llm-retry": "workspace:^",
"@deepseek-ai/dsh-session-stats": "workspace:^",
"@deepseek-ai/dsh-token-meter": "workspace:^",
"@deepseek-ai/dsh-tools": "workspace:^",
"react": "^18.2.0"
@@ -98,6 +99,7 @@
"@deepseek-ai/dsh-permission": "workspace:^",
"@deepseek-ai/dsh-plan-mode": "workspace:^",
"@deepseek-ai/dsh-session-projection": "workspace:^",
"@deepseek-ai/dsh-session-stats": "workspace:^",
"@deepseek-ai/dsh-token-meter": "workspace:^",
"@deepseek-ai/dsh-tool-todo": "workspace:^",
"@deepseek-ai/dsh-tools": "workspace:^",

View File

@@ -6,6 +6,8 @@ import { Fragment, memo, useLayoutEffect, useMemo, useRef, useState } from 'reac
import { Tooltip } from '@deepseek-ai/dsh-client-ui-primitives'
import type { ConversationSnapshot, UseProjection } from '@deepseek-ai/dsh-client-runtime/client'
import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots'
// Type-only: merges the sessionStats key into SessionProjectionMap for useProjection.
import type {} from '@deepseek-ai/dsh-session-stats/client'
import type { ContextPressureProjection, TokenUsageProjection } from '@deepseek-ai/dsh-token-meter/client'
import type { ComposerBarProps } from '../contract/slots.ts'
import { formatTokensPerSecond } from './message-chrome.ts'
@@ -30,14 +32,16 @@ interface WindowStats {
}
/**
* Fold assistant and tool-result nodes into the window-scoped display totals.
* Fold assistant and tool-result nodes into window-scoped display totals
* the FALLBACK for assemblies without the `sessionStats` projection.
*
* Counts and wall times describe the loaded window on purpose — they answer
* "what is on screen". Token accounting deliberately does NOT come from here:
* the window is paged and compaction rewrites it, so billing rides the durable
* `tokenUsage` projection instead.
* Every displayed figure rides that durable whole-log projection (and token
* accounting rides `tokenUsage`) because the window is paged and compaction
* rewrites it; this fold answers "what is on screen" only when no projection
* value is served. Its field names deliberately mirror the projection's so
* the two swap wholesale.
* @param nodes - snapshot nodes.
* @returns visible counts and summed wall times.
* @returns fallback counts and summed wall times.
*/
export function deriveStats(nodes: ConversationSnapshot['nodes']): WindowStats {
const turns = new Set<number>()
@@ -158,8 +162,13 @@ export interface StatsLineProps {
export const StatsLine = memo(function StatsLine({ useSession, useProjection, t }: StatsLineProps) {
const settledNodes = useSession(s => s.chat.legacy.nodes)
const stats = useMemo(() => deriveStats(settledNodes), [settledNodes])
const usage = useProjection('tokenUsage')
// Every figure rides the durable sessionStats projection, so paging and
// compaction cannot change any of them; an assembly without the unit falls
// back to the window-scoped fold wholesale (same field names), paid only
// while no projection value is served.
const projected = useProjection('sessionStats')
const stats = useMemo(() => projected ?? deriveStats(settledNodes), [projected, settledNodes])
// Pipe-separated groups (figma stats strip); a group with no data drops out whole.
const groups: string[] = []
if (stats.steps > 0) {
@@ -168,7 +177,6 @@ export const StatsLine = memo(function StatsLine({ useSession, useProjection, t
if (stats.llmMs > 0) durations.push(t('stats.llm', { duration: formatDuration(stats.llmMs) }))
if (stats.toolMs > 0) durations.push(t('stats.toolCall', { duration: formatDuration(stats.toolMs) }))
if (durations.length > 0) groups.push(durations.join(' · '))
// Window-scoped like the wall times above: averages describe loaded steps.
const speeds: string[] = []
if (stats.ttftSteps > 0) {
speeds.push(t('stats.ttftAverage', { duration: formatDuration(stats.ttftMs / stats.ttftSteps) }))
@@ -183,9 +191,11 @@ export const StatsLine = memo(function StatsLine({ useSession, useProjection, t
// Context occupancy deliberately lives on the composer's ContextMeter ring,
// not here — one home per fact.
// Billing rides the durable projection, so these survive paging and
// compaction. Suppress the empty projection on a brand-new session.
// compaction. Gated on actual token activity: a session whose steps all
// settled without billing (e.g. every request failed) shows its counts
// without a zero-token group.
if (usage !== undefined
&& (stats.steps > 0 || billedInputTokens(usage) > 0 || usage.outputTokens > 0)) {
&& (billedInputTokens(usage) > 0 || usage.outputTokens > 0)) {
const cacheHit = cacheHitPercent(usage)
if (cacheHit !== null) groups.push(t('stats.cacheHit', { percent: cacheHit }))
groups.push(t('stats.tokens', {

View File

@@ -98,9 +98,11 @@ describe('deriveStats', () => {
])
expect(stats.turns).toBe(2)
expect(stats.steps).toBe(3)
// Window-scoped by design: the paged window is not an accounting source, so
// the fold exposes no billing fields (billing rides the projection);
// decodeTokens is a throughput input, not a billed total.
// The window fold's counts are only the fallback for assemblies without
// the sessionStats projection; the paged window is not an accounting
// source either, so the fold exposes no billing fields (billing rides the
// tokenUsage projection); decodeTokens is a throughput input, not a
// billed total.
expect(Object.keys(stats).sort()).toEqual(
['decodeMs', 'decodeTokens', 'llmMs', 'steps', 'toolMs', 'ttftMs', 'ttftSteps', 'turns'],
)
@@ -169,6 +171,14 @@ describe('formatters', () => {
describe('StatsLine', () => {
const USAGE = { uncachedInputTokens: 10, outputTokens: 5, cacheReadTokens: 90, cacheWriteTokens: 0 }
/** A whole-log sessionStats value: zeros plus overrides. */
function sessionStats(overrides: Record<string, number>): Record<string, number> {
return {
turns: 0, steps: 0, llmMs: 0, toolMs: 0, ttftMs: 0, ttftSteps: 0, decodeMs: 0, decodeTokens: 0,
...overrides,
}
}
/** Stub the projection seat: a key-addressed table of whole values. */
function projections(values: Record<string, unknown>): StatsLineProps['useProjection'] {
return (key: string) => values[key]
@@ -281,6 +291,69 @@ describe('StatsLine', () => {
expect(view.container.textContent).toBe('1 turns · 1 steps')
})
it('renders whole-session counts from the sessionStats projection over the paged window', () => {
// The bug's acceptance at unit level: one loaded page must not scope the
// counter — the durable projection's totals win over the window fold.
const { source } = makeSource({ nodes: [assistant(1, 1)] })
const view = render(<StatsLine {...props(source, {
tokenUsage: USAGE,
sessionStats: sessionStats({ turns: 10, steps: 89 }),
})} />)
expect(view.container.textContent)
.toBe('10 turns · 89 steps| Cache hit 90%| Input 100 tok · Output 5 tok')
})
it('treats a defined zero-count projection as empty, not as fallback', () => {
// A composed unit always serves the key; all-zero genuinely means no
// closed step in the whole log, so nothing renders on a brand-new session.
const empty = makeSource()
const view = render(<StatsLine {...props(empty.source, {
tokenUsage: { uncachedInputTokens: 0, outputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0 },
sessionStats: sessionStats({}),
})} />)
expect(view.container.textContent).toBe('')
})
it('hides the zero-token group when steps closed without any billed activity', () => {
// A session whose only turn failed before billing (e.g. an auth error):
// the counts group renders alone, not an uninformative zero-token group.
const { source } = makeSource()
const view = render(<StatsLine {...props(source, {
tokenUsage: { uncachedInputTokens: 0, outputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0 },
sessionStats: sessionStats({ turns: 1, steps: 1 }),
})} />)
expect(view.container.textContent).toBe('1 turns · 1 steps')
})
it('keeps the counts group over an empty visible window when the projection carries totals', () => {
// Extends the durable-groups guarantee: full-session counts survive a
// window that compaction (or paging) left without assistant nodes.
const { source } = makeSource()
const view = render(<StatsLine {...props(source, {
tokenUsage: USAGE,
sessionStats: sessionStats({ turns: 7, steps: 44 }),
})} />)
expect(view.container.textContent)
.toBe('7 turns · 44 steps| Cache hit 90%| Input 100 tok · Output 5 tok')
})
it('renders whole-log wall times and speeds from the projection, not the loaded window', () => {
// The 加载更早 hazard beyond counts: LLM/tool durations and the TTFT and
// throughput figures must not grow per loaded page either. An untimed
// 1-node window renders the projection's whole-log figures verbatim.
const { source } = makeSource({ nodes: [assistant(1, 1)] })
const view = render(<StatsLine {...props(source, {
tokenUsage: USAGE,
sessionStats: sessionStats({
turns: 200, steps: 200, llmMs: 100_000, toolMs: 62_000,
ttftMs: 1_600, ttftSteps: 2, decodeMs: 3_000, decodeTokens: 60,
}),
})} />)
expect(view.container.textContent).toBe(
'200 turns · 200 steps| LLM 1m40s · Tool call 1m2s| TTFT avg 0.8s · 20 tok/s| Cache hit 90%| Input 100 tok · Output 5 tok',
)
})
it('omits cache hit when nothing was billed on the input side', () => {
const { source } = makeSource({ nodes: [assistant(1, 1)] })
const view = render(<StatsLine {...props(source, {

View File

@@ -70,9 +70,11 @@ describe('render branch tails', () => {
expect(view.container.querySelector('[data-state="ok"]')).not.toBeNull()
})
it('StatsLine counts window nodes but drops every token group without a projection', () => {
// Node `usage` is deliberately ignored: billing rides the durable
// tokenUsage projection, so an absent projection leaves counts only.
it('StatsLine falls back to window-node counts and drops every token group without projections', () => {
// No sessionStats key → the window fold supplies the counts (the
// assembly-without-the-unit fallback). Node `usage` is deliberately
// ignored: billing rides the durable tokenUsage projection, so an absent
// projection leaves counts only.
const nodes = [
{ kind: 'assistant', seq: 1, time: 1, turn: 1, step: 1, blocks: [] },
{ kind: 'assistant', seq: 2, time: 2, turn: 1, step: 2, blocks: [], usage: { inputTokens: 4, outputTokens: 6 } },

View File

@@ -44,6 +44,9 @@
{
"path": "../../session/session-projection"
},
{
"path": "../../session/session-stats"
},
{
"path": "../../llm/token-meter"
},

View File

@@ -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/ui-plugin-config/README.md
README.md: 7e530d70f6573d619378e43b0245345b45d6db18
README.zh.md: fd4f980fcf71c00c2357017fb40c76a9ca7a72cc
README.md: 1bf8dd60b966ee0c0e28ae931556182c5c2b2e87
README.zh.md: bd87e06202b2b083a6e9e089eb91681deea9d678

View File

@@ -2,17 +2,17 @@
English | [中文](README.zh.md)
The **Plugins** settings section: one expandable card per Host plugin whose configuration a user owns. A card shows the plugin's name and what it governs; expanding it in place reveals hand-written controls bound to that plugin's settings namespace, each field marking whether the user overrode it and offering a reset back to the value the deployment composed.
The **Plugins** settings section and its **Plugin configuration** tab. The section owns the heading and compact tab chrome; feature plugins contribute pages through `settings.plugins.tab`. This package's own tab shows one expandable card per Host plugin whose configuration a user owns. A card shows the plugin's name and what it governs; expanding it in place reveals hand-written controls bound to that plugin's settings namespace, each field marking whether the user overrode it and offering a reset back to the value the deployment composed.
## What appears here
A card renders only when its namespace is both registered by a live Host plugin and served to the browser. A deployment that does not compose the owning plugin — or serves the namespace to no client — renders nothing for it rather than an empty or disabled card, so the section reflects what this deployment actually runs.
A card renders only when its namespace is both registered by a live Host plugin and served to the browser. A deployment that does not compose the owning plugin — or serves the namespace to no client — renders nothing for it rather than an empty or disabled card, so the configurable tab reflects what this deployment actually runs.
The first batch covers the shell executor (`bash`), the agent loop's tool-call parallelism (`agent-loop`), and the DeepSeek search provider (`web-search-deepseek`).
## Extension point
The section declares `settings.plugin.item`, a root list slot. A plugin that ships a browser half registers its own card into that slot and owns its controls; this package neither enumerates namespaces nor renders a form it was not given. Ordering follows the slot's `order`.
The section declares `settings.plugins.tab`, a root list slot whose labels become ordered tabs. It keeps a tab mounted after its first selection, so local drafts and read-only snapshots survive tab switches. The package registers its own `configurable` contribution, which declares the nested `settings.plugin.item` list slot. A plugin that ships a browser half registers its own card into that nested slot and owns its controls; this package neither enumerates namespaces nor renders a form it was not given. Both levels follow the contribution's `order`.
## Writes

View File

@@ -2,17 +2,17 @@
[English](README.md) | 中文
**插件**设置分区每个配置由用户拥有的 Host 插件一张可展开卡片。卡片展示插件名称及其管辖范围;就地展开后是绑定到该插件 settings 命名空间的手写控件,每个字段标注用户是否覆盖过它,并提供重置回部署组装值的入口。
**插件**设置分区及其**插件配置**标签页。该分区拥有标题与紧凑的标签栏;功能插件通过 `settings.plugins.tab` 贡献页面。本包自己的标签页为每个配置由用户拥有的 Host 插件展示一张可展开卡片。卡片展示插件名称及其管辖范围;就地展开后是绑定到该插件 settings 命名空间的手写控件,每个字段标注用户是否覆盖过它,并提供重置回部署组装值的入口。
## 这里会出现什么
只有当某个命名空间既被存活的 Host 插件注册、又被服务给浏览器时,它的卡片才会渲染。未组装该插件的部署——或未向任何客户端服务该命名空间的部署——不会渲染空卡片或禁用卡片,而是什么都不渲染,因此这一分区反映的是该部署实际运行的东西。
只有当某个命名空间既被存活的 Host 插件注册、又被服务给浏览器时,它的卡片才会渲染。未组装该插件的部署——或未向任何客户端服务该命名空间的部署——不会渲染空卡片或禁用卡片,而是什么都不渲染,因此“插件配置”标签页反映的是该部署实际运行的东西。
第一批覆盖 shell 执行器(`bash`、agent 循环的工具调用并行度(`agent-loop`)以及 DeepSeek 搜索提供方(`web-search-deepseek`)。
## 扩展点
本分区声明根级列表 slot `settings.plugin.item`。带浏览器半侧的插件把自己的卡片注册进 slot 并拥有其控件;本包既不枚举命名空间,也不渲染未被交给它的表单。排序遵循 slot `order`
本分区声明根级列表 slot `settings.plugins.tab`,其标签会成为有序标签页。某个标签页首次被选择后会保持挂载,因此本地草稿与只读快照在切换标签页时不会丢失。本包注册自己的 `configurable` 贡献,由它声明嵌套的 `settings.plugin.item` 列表 slot。带浏览器半侧的插件把自己的卡片注册进这个嵌套 slot 并拥有其控件;本包既不枚举命名空间,也不渲染未被交给它的表单。两层排序遵循贡献`order`
## 写入

View File

@@ -1,6 +1,6 @@
{
"name": "@deepseek-ai/dsh-client-ui-plugin-config",
"description": "Plugin configuration section: host-plane plugin settings as expandable cards",
"description": "Plugins settings section with feature-owned tabs and configurable host-plane plugin cards",
"version": "0.0.1-rc.2",
"publishConfig": {
"access": "restricted"

View File

@@ -0,0 +1,25 @@
/** Configurable Host plugins contributed to the shared Plugins section. */
import type { InjectFace, PropsLocale, PropsRenderSlots, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
import type {} from './slot-contract.ts'
import css from './PluginConfigSection.module.css'
/** Registration-side business face for the configurable tab. */
export interface ConfigurablePluginsTabInjected {
/** How many cards the slot ledger held when the tab registration mounted. */
cardCount: number
}
/** Props the renderer binds for the configurable tab. */
export type ConfigurablePluginsTabProps =
PropsRuntime<'settings.plugins.tab'>
& PropsLocale<'settings.pluginConfig'>
& PropsRenderSlots<'settings.plugin.item'>
& InjectFace<ConfigurablePluginsTabInjected>
/** Render cards registered by plugins that expose editable settings. */
export function ConfigurablePluginsTab({ t, renderSlot, cardCount }: ConfigurablePluginsTabProps) {
return cardCount === 0
? <p className={css.empty}>{t('empty')}</p>
: <ul className={css.cards}>{renderSlot('settings.plugin.item', {})}</ul>
}

View File

@@ -1,10 +1,10 @@
/* Plugin configuration section: heading, intro, and the card list. */
/* Plugins section: compact tabs plus the configurable plugin card list. */
.section {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 720px;
max-width: 760px;
color: var(--dsw-alias-label-primary);
}
@@ -20,6 +20,55 @@
color: var(--dsw-alias-label-tertiary);
}
.tabs {
display: flex;
align-items: flex-end;
gap: 22px;
border-bottom: 1px solid var(--dsw-alias-border-l2);
margin-top: 2px;
}
.tab {
position: relative;
border: 0;
padding: 7px 1px 9px;
background: transparent;
color: var(--dsw-alias-label-tertiary);
font: inherit;
font-size: 13px;
line-height: 20px;
cursor: pointer;
}
.tab:hover,
.tab[data-active='true'] {
color: var(--dsw-alias-label-primary);
}
.tab[data-active='true']::after,
.tab:focus-visible::after {
position: absolute;
right: 0;
bottom: -1px;
left: 0;
height: 2px;
border-radius: 2px 2px 0 0;
background: var(--dsw-alias-label-primary);
content: '';
}
.tab:focus-visible {
outline: 2px solid var(--dsw-alias-state-business-primary);
outline-offset: 2px;
border-radius: 2px;
color: var(--dsw-alias-label-primary);
}
.panel {
min-width: 0;
padding-top: 2px;
}
.cards {
list-style: none;
margin: 0;

View File

@@ -1,49 +1,123 @@
/**
* Plugin configuration section: the shell around the per-plugin cards. It
* enumerates nothing itself — cards arrive through the `settings.plugin.item`
* slot it declares, so a plugin that ships a browser half owns its own card
* and this section never learns what a namespace means.
*/
/** Plugins settings section: localized tabs around feature-owned pages. */
import type { InjectFace, PropsLocale, PropsRenderSlots, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
import type {} from './slot-contract.ts'
import { useEffect, useId, useRef, useState } from 'react'
import type {
HostObservable, InjectFace, PropsLocale, PropsRenderSlots, PropsRuntime,
} from '@deepseek-ai/dsh-client-ui-slots'
import type { PluginConfigKey } from './locales.ts'
import css from './PluginConfigSection.module.css'
/** One tab projected from a `settings.plugins.tab` contribution. */
export interface PluginSettingsTabRow {
id: string
order: number
label: string
}
/** Registration-side business face for the section. */
export interface PluginConfigSectionInjected {
/** How many cards the slot ledger currently holds; zero renders the empty line. */
cardCount: number
hooks: {
/** Ordered, locale-aware projection of the Plugins tab ledger. */
tabs: HostObservable<readonly PluginSettingsTabRow[]>
}
}
/** Props the renderer binds for the section. */
export type PluginConfigSectionProps =
PropsRuntime<'settings.section'>
& PropsLocale<'settings.pluginConfig'>
& PropsRenderSlots<'settings.plugin.item'>
& PropsRenderSlots<'settings.plugins.tab'>
& InjectFace<PluginConfigSectionInjected>
/**
* Render the plugin configuration section.
* @param props - runtime slot rendering, locale copy, and the card count.
* @returns the section.
*/
export function PluginConfigSection(props: PluginConfigSectionProps) {
const { t, renderSlot, cardCount } = props
/** Render one Plugins page whose contents arrive from feature-owned tabs. */
export function PluginConfigSection({ t, renderSlot, useTabs }: PluginConfigSectionProps) {
const tabsId = useId()
const tabRefs = useRef<Array<HTMLButtonElement | null>>([])
const rows = useTabs(value => value)
const [activeId, setActiveId] = useState<string>()
const [visitedIds, setVisitedIds] = useState<ReadonlySet<string>>(() => new Set())
const active = rows.find(row => row.id === activeId)?.id ?? rows[0]?.id
// A tab mounts only when first selected, then stays mounted while hidden so
// local drafts, disclosure state, search, and the inventory snapshot survive
// switching between the two views.
useEffect(() => {
if (active === undefined) return
setVisitedIds((previous) => {
if (previous.has(active)) return previous
return new Set([...previous, active])
})
}, [active])
return (
<div className={css.section}>
<h2 className={css.heading}>{t('title')}</h2>
<p className={css.intro}>{t('intro')}</p>
{cardCount === 0
? <p className={css.empty}>{t('empty')}</p>
: <ul className={css.cards}>{renderSlot('settings.plugin.item', {})}</ul>}
{rows.length === 0 ? <p className={css.empty}>{t('empty')}</p> : (
<>
<div className={css.tabs} role="tablist" aria-label={t('tabs')}>
{rows.map((row, index) => {
const selected = row.id === active
return (
<button
key={row.id}
ref={(element) => { tabRefs.current[index] = element }}
id={`${tabsId}-tab-${row.id}`}
type="button"
role="tab"
className={css.tab}
aria-selected={selected}
aria-controls={`${tabsId}-panel-${row.id}`}
data-active={selected ? 'true' : undefined}
tabIndex={selected ? 0 : -1}
onClick={() => { setActiveId(row.id) }}
onKeyDown={(event) => {
let nextIndex: number
switch (event.key) {
case 'ArrowRight': nextIndex = (index + 1) % rows.length; break
case 'ArrowLeft': nextIndex = (index - 1 + rows.length) % rows.length; break
case 'Home': nextIndex = 0; break
case 'End': nextIndex = rows.length - 1; break
default: return
}
event.preventDefault()
const nextRow = rows[nextIndex] as PluginSettingsTabRow
const nextTab = tabRefs.current[nextIndex] as HTMLButtonElement
setActiveId(nextRow.id)
nextTab.focus()
}}
>
{row.label}
</button>
)
})}
</div>
{rows
.filter(row => row.id === active || visitedIds.has(row.id))
.map((row) => {
const selected = row.id === active
return (
<div
key={row.id}
id={`${tabsId}-panel-${row.id}`}
className={css.panel}
role="tabpanel"
aria-labelledby={`${tabsId}-tab-${row.id}`}
hidden={!selected}
>
{renderSlot('settings.plugins.tab', {}, { only: row.id })}
</div>
)
})}
</>
)}
</div>
)
}
declare module '@deepseek-ai/dsh-client-ui-slots' {
interface LocaleNamespaceMap {
/** Plugin configuration section and card copy. */
/** Plugins section, configurable-tab, and card copy. */
'settings.pluginConfig': PluginConfigKey
}
}

View File

@@ -1,13 +1,12 @@
/**
* Plugin configuration surface, browser half — one settings section holding
* an expandable card per Host plugin whose configuration a user owns.
* Plugins settings surface, browser half — one section whose feature-owned
* tabs include configurable Host plugin cards and read-only inventory.
*
* The section owns no knowledge of any namespace: it declares the
* `settings.plugin.item` slot and renders whatever cards were registered into
* it, so a plugin that ships a browser half contributes its own card and its
* own controls. The three cards this package registers are the host-plane
* sections the deployment already exposes; each binds its namespace through
* the client settings scope, which keeps them unaware of one another.
* The section declares `settings.plugins.tab`; its own `configurable` tab then
* declares `settings.plugin.item` and renders whatever cards were registered
* into it. The three cards this package ships are the host-plane sections the
* deployment already exposes; each binds its namespace through the client
* settings scope, which keeps them unaware of one another and of other tabs.
*/
import type { ConnectionHandle } from '@deepseek-ai/dsh-client-connection/client'
@@ -18,11 +17,15 @@ import type {} from '@deepseek-ai/dsh-client-locale/client'
// through the service, never a value import (client bundle purity gate).
import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
import { resolveSlotLabel } from '@deepseek-ai/dsh-client-ui-slots'
// Type-only: the ctx.remote Context merge and the forwarded-event key face.
import type {} from '@deepseek-ai/dsh-api-remotes/client'
import { AgentLoopCard } from './AgentLoopCard.tsx'
import { BashCard } from './BashCard.tsx'
import { ConfigurablePluginsTab } from './ConfigurablePluginsTab.tsx'
import type { ConfigurablePluginsTabInjected } from './ConfigurablePluginsTab.tsx'
import { PluginConfigSection } from './PluginConfigSection.tsx'
import type { PluginConfigSectionInjected, PluginSettingsTabRow } from './PluginConfigSection.tsx'
import { WebSearchCard } from './WebSearchCard.tsx'
import { AGENT_LOOP_NS, AgentLoopCardController } from './agent-loop-store.ts'
import { BASH_NS, BashCardController } from './bash-store.ts'
@@ -30,6 +33,7 @@ import { WEB_SEARCH_NS, WebSearchCardController } from './web-search-store.ts'
import { en, zh } from './locales.ts'
export type { PluginConfigSectionInjected, PluginConfigSectionProps } from './PluginConfigSection.tsx'
export type { ConfigurablePluginsTabInjected, ConfigurablePluginsTabProps } from './ConfigurablePluginsTab.tsx'
export type { PluginCardProps } from './PluginCard.tsx'
export type { SettingsPluginItemOwnerProps } from './slot-contract.ts'
export type { FieldProps } from './fields.tsx'
@@ -67,23 +71,67 @@ export function apply(ctx: ClientContext): void {
'ui-plugin-config: credential invalidations',
)
// The section renders the empty line rather than an empty list when no plugin
// contributed a card. The count is read once: the renderer caches a root
// entry's inject face per registration, so this reports what was registered
// when the section mounted, not what is visible now. Both gaps are bounded by
// this deployment always registering the three cards below — a card that
// arrives later would not raise the count, and a namespace this deployment
// does not expose leaves its card rendering nothing inside a non-empty list.
let tabsVersion = -1
let tabsRevision = -1
let tabs: readonly PluginSettingsTabRow[] = []
const sectionInjected = (): PluginConfigSectionInjected => ({
hooks: {
tabs: {
getSnapshot: () => {
const version = ctx.slots.getVersion('settings.plugins.tab')
const revision = ctx.locale.getSnapshot().revision
if (version !== tabsVersion || revision !== tabsRevision) {
tabsVersion = version
tabsRevision = revision
tabs = ctx.slots.entries('settings.plugins.tab')
.map(entry => ({
/* v8 ignore next -- list-slot registration requires id */
id: entry.options.id ?? '',
order: entry.options.order ?? 0,
label: resolveSlotLabel(entry.options.label) ?? '',
}))
.sort((a, b) => a.order - b.order)
}
return tabs
},
subscribe: (listener) => {
const offLedger = ctx.slots.subscribe('settings.plugins.tab', listener)
const offLocale = ctx.locale.subscribe(listener)
return () => {
offLedger()
offLocale()
}
},
},
},
})
// This package owns the one Plugins navigation entry and the tab chrome;
// feature plugins contribute pages without competing for Settings nav rows.
ctx.slots.inject('settings.section', () => ctx.slots.register({
name: 'settings.section',
id: 'plugins',
order: 30,
order: 15,
label: () => t('nav'),
locale: NS,
inject: () => ({ cardCount: ctx.slots.entries('settings.plugin.item').length }),
children: { 'settings.plugin.item': { kind: 'list', scope: 'root' } },
inject: sectionInjected,
children: { 'settings.plugins.tab': { kind: 'list', scope: 'root' } },
}, PluginConfigSection))
// The existing configuration page is one ordinary tab. It keeps ownership
// of the card slot and the three shipped card contributions below.
ctx.slots.inject('settings.plugins.tab', () => ctx.slots.register({
name: 'settings.plugins.tab',
id: 'configurable',
order: 0,
label: () => t('configurableTab'),
locale: NS,
inject: (): ConfigurablePluginsTabInjected => ({
cardCount: ctx.slots.entries('settings.plugin.item').length,
}),
children: { 'settings.plugin.item': { kind: 'list', scope: 'root' } },
}, ConfigurablePluginsTab))
ctx.slots.inject('settings.plugin.item', function* () {
yield ctx.slots.register({
name: 'settings.plugin.item',

View File

@@ -2,7 +2,7 @@
/** Locale keys these surfaces render. */
export type PluginConfigKey =
| 'nav' | 'title' | 'intro' | 'empty'
| 'nav' | 'title' | 'intro' | 'tabs' | 'configurableTab' | 'empty'
| 'overridden' | 'reset' | 'readOnly' | 'expand' | 'collapse'
| 'save' | 'saving' | 'discard' | 'unsaved' | 'saveFailed' | 'invalidNumber'
| 'bashTitle' | 'bashDescription' | 'bashTimeoutMs' | 'bashTimeoutMsHint'
@@ -14,9 +14,11 @@ export type PluginConfigKey =
/** English copy. */
export const en: Record<PluginConfigKey, string> = {
nav: 'Plugin config',
title: 'Plugin configuration',
intro: 'Configure the plugins this deployment installed.',
nav: 'Plugins',
title: 'Plugins',
intro: 'Configure and inspect the plugins installed in this deployment.',
tabs: 'Plugin views',
configurableTab: 'Plugin configuration',
empty: 'This deployment exposes no plugin settings.',
overridden: 'Overridden',
reset: 'Reset to default',
@@ -53,9 +55,11 @@ export const en: Record<PluginConfigKey, string> = {
/** Simplified Chinese copy. */
export const zh: Record<PluginConfigKey, string> = {
nav: '插件配置',
title: '插件配置',
intro: '配置本部署已安装的插件。',
nav: '插件',
title: '插件',
intro: '配置和查看本部署已安装的插件。',
tabs: '插件视图',
configurableTab: '插件配置',
empty: '本部署没有开放任何插件设置。',
overridden: '已覆盖',
reset: '恢复默认',

View File

@@ -1,7 +1,7 @@
/**
* Plugin configuration surface, node half. The empty apply exists so the
* plugin appears in the host cordis.yml / Loader; the browser half ships the
* settings section through exports["./client"], discovered from the
* Plugins settings surface, node half. The empty apply exists so the plugin
* appears in the host cordis.yml / Loader; the browser half owns the section
* and its configurable tab through exports["./client"], discovered from the
* package.json dsh.client declaration. Every section this page edits is owned
* by the Host plugin that registered it, so this package registers no
* namespace of its own.

View File

@@ -8,6 +8,9 @@ import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
import { TestRemote, usePinnedBrowserLanguages } from '@deepseek-ai/dsh-client-test-runtime'
import { SettingsScopeService } from '@deepseek-ai/dsh-client-ui-settings/client'
import { apply, inject } from '@deepseek-ai/dsh-client-ui-plugin-config/client'
import type {
ConfigurablePluginsTabInjected, PluginConfigSectionInjected,
} from '@deepseek-ai/dsh-client-ui-plugin-config/client'
// The service reads its initial locale from the browser; these specs assert
// the shipped Chinese copy, so they state the browser they assume.
@@ -46,16 +49,20 @@ describe('ui-plugin-config apply', () => {
expect(inject).toEqual(['slots', 'locale', 'connection', 'remote', 'settingsScope'])
})
it('registers the section and declares the per-plugin card slot', async () => {
it('registers one Plugins section and declares the tab and card slots', async () => {
const { ctx, slots } = await bench()
declareRoot(slots)
await ctx.plugin({ inject: [...inject], apply }).await()
const section = slots.entries('settings.section')[0]!
expect(section.options).toMatchObject({ id: 'plugins', order: 30 })
expect(section.options).toMatchObject({ id: 'plugins', order: 15 })
// The nav label is a locale-following thunk; owners resolve it at read time.
expect(resolveSlotLabel(section.options.label)).toBe('插件配置')
expect(resolveSlotLabel(section.options.label)).toBe('插件')
expect(slots.spec('settings.plugins.tab')).toMatchObject({ kind: 'list', scope: 'root' })
const tab = slots.entries('settings.plugins.tab')[0]!
expect(tab.options).toMatchObject({ id: 'configurable', order: 0 })
expect(resolveSlotLabel(tab.options.label)).toBe('插件配置')
expect(slots.spec('settings.plugin.item')).toMatchObject({ kind: 'list', scope: 'root' })
})
@@ -69,13 +76,30 @@ describe('ui-plugin-config apply', () => {
.toEqual(['bash', 'agent-loop', 'web-search'])
})
it('injects a live card count and one business face per card', async () => {
it('injects a live tab projection, a card count, and one business face per card', async () => {
const { ctx, slots } = await bench()
declareRoot(slots)
await ctx.plugin({ inject: [...inject], apply }).await()
const section = slots.entries('settings.section')[0]!
expect((section as { inject?: () => unknown }).inject?.()).toEqual({ cardCount: 3 })
const sectionFace = (section.inject as unknown as () => PluginConfigSectionInjected)()
const initialTabs = sectionFace.hooks.tabs.getSnapshot()
expect(initialTabs).toEqual([
{ id: 'configurable', order: 0, label: '插件配置' },
])
expect(sectionFace.hooks.tabs.getSnapshot()).toBe(initialTabs)
const listener = vi.fn()
const unsubscribe = sectionFace.hooks.tabs.subscribe(listener)
slots.register({ name: 'settings.plugins.tab', id: 'plain' } as never, () => null)
expect(sectionFace.hooks.tabs.getSnapshot()).toEqual([
{ id: 'configurable', order: 0, label: '插件配置' },
{ id: 'plain', order: 0, label: '' },
])
unsubscribe()
const tab = slots.entries('settings.plugins.tab')[0]!
expect((tab.inject as unknown as () => ConfigurablePluginsTabInjected)()).toEqual({ cardCount: 3 })
for (const entry of slots.entries('settings.plugin.item')) {
const face = (entry as { inject?: () => unknown }).inject?.() as { hooks: Record<string, unknown> }
// Each card injects exactly one snapshot store plus its own actions.
@@ -129,6 +153,7 @@ describe('ui-plugin-config apply', () => {
await fiber.dispose()
expect(slots.entries('settings.section')).toHaveLength(0)
expect(slots.spec('settings.plugins.tab')).toBeUndefined()
expect(slots.spec('settings.plugin.item')).toBeUndefined()
})
})

View File

@@ -13,8 +13,10 @@ import { AgentLoopCard } from '../src/client/AgentLoopCard.tsx'
import type { AgentLoopCardProps } from '../src/client/AgentLoopCard.tsx'
import { BashCard } from '../src/client/BashCard.tsx'
import type { BashCardProps } from '../src/client/BashCard.tsx'
import { ConfigurablePluginsTab } from '../src/client/ConfigurablePluginsTab.tsx'
import type { ConfigurablePluginsTabProps } from '../src/client/ConfigurablePluginsTab.tsx'
import { PluginConfigSection } from '../src/client/PluginConfigSection.tsx'
import type { PluginConfigSectionProps } from '../src/client/PluginConfigSection.tsx'
import type { PluginConfigSectionProps, PluginSettingsTabRow } from '../src/client/PluginConfigSection.tsx'
import { WebSearchCard } from '../src/client/WebSearchCard.tsx'
import type { WebSearchCardProps } from '../src/client/WebSearchCard.tsx'
import type { AgentLoopCardState } from '../src/client/agent-loop-store.ts'
@@ -46,13 +48,24 @@ function cardActions() {
return { edit: vi.fn(), resetField: vi.fn(), save: vi.fn(), discard: vi.fn() }
}
function renderSection(cardCount: number, cards = 'cards') {
function renderSection(rows: readonly PluginSettingsTabRow[]) {
const props = {
t,
useTabs: (selector: (value: readonly PluginSettingsTabRow[]) => unknown) => selector(rows),
renderSlot: (_name: string, _owner: unknown, options: { only?: string }) => (
<span>{options.only}</span>
),
} as unknown as PluginConfigSectionProps
render(<PluginConfigSection {...props} />)
}
function renderConfigurable(cardCount: number, cards = 'cards') {
const props = {
t,
cardCount,
renderSlot: () => <li>{cards}</li>,
} as unknown as PluginConfigSectionProps
render(<PluginConfigSection {...props} />)
} as unknown as ConfigurablePluginsTabProps
render(<ConfigurablePluginsTab {...props} />)
}
function renderBash(state: Partial<BashCardState> = {}) {
@@ -69,26 +82,89 @@ function renderBash(state: Partial<BashCardState> = {}) {
}
describe('PluginConfigSection', () => {
it('says so when no plugin contributed a tab', () => {
renderSection([])
expect(screen.getByText(en.empty)).toBeTruthy()
expect(screen.queryByRole('tab')).toBeNull()
})
it('defaults to the first ordered tab and mounts another only after selection', () => {
renderSection([
{ id: 'configurable', order: 0, label: en.configurableTab },
{ id: 'all', order: 10, label: 'Plugin list' },
])
const configurable = screen.getByRole('tab', { name: en.configurableTab })
const all = screen.getByRole('tab', { name: 'Plugin list' })
expect(configurable.getAttribute('aria-selected')).toBe('true')
expect(screen.getByText('configurable')).toBeTruthy()
expect(screen.queryByText('all')).toBeNull()
fireEvent.click(all)
expect(all.getAttribute('aria-selected')).toBe('true')
expect(screen.getByText('all')).toBeTruthy()
expect(screen.getByText('configurable').closest('[role="tabpanel"]')).toHaveProperty('hidden', true)
fireEvent.click(configurable)
expect(configurable.getAttribute('aria-selected')).toBe('true')
expect(screen.getByText('all').closest('[role="tabpanel"]')).toHaveProperty('hidden', true)
})
it('leads with its own heading and intro', () => {
renderSection([{ id: 'configurable', order: 0, label: en.configurableTab }])
expect(screen.getByRole('heading', { name: en.title })).toBeTruthy()
expect(screen.getByText(en.intro)).toBeTruthy()
})
it('moves focus and selection with standard horizontal tab keys', () => {
renderSection([
{ id: 'configurable', order: 0, label: en.configurableTab },
{ id: 'all', order: 10, label: 'Plugin list' },
{ id: 'diagnostics', order: 20, label: 'Diagnostics' },
])
const configurable = screen.getByRole('tab', { name: en.configurableTab })
const all = screen.getByRole('tab', { name: 'Plugin list' })
const diagnostics = screen.getByRole('tab', { name: 'Diagnostics' })
expect(configurable.getAttribute('tabindex')).toBe('0')
expect(all.getAttribute('tabindex')).toBe('-1')
configurable.focus()
fireEvent.keyDown(configurable, { key: 'ArrowRight' })
expect(document.activeElement).toBe(all)
expect(all.getAttribute('aria-selected')).toBe('true')
fireEvent.keyDown(all, { key: 'End' })
expect(document.activeElement).toBe(diagnostics)
fireEvent.keyDown(diagnostics, { key: 'ArrowRight' })
expect(document.activeElement).toBe(configurable)
fireEvent.keyDown(configurable, { key: 'ArrowLeft' })
expect(document.activeElement).toBe(diagnostics)
fireEvent.keyDown(diagnostics, { key: 'Home' })
expect(document.activeElement).toBe(configurable)
fireEvent.keyDown(configurable, { key: 'Escape' })
expect(document.activeElement).toBe(configurable)
expect(configurable.getAttribute('aria-selected')).toBe('true')
})
})
describe('ConfigurablePluginsTab', () => {
it('says so when no plugin contributed a card', () => {
renderSection(0)
renderConfigurable(0)
expect(screen.getByText(en.empty)).toBeTruthy()
expect(screen.queryByText('cards')).toBeNull()
})
it('renders the card list once a plugin contributed one', () => {
renderSection(1)
renderConfigurable(1)
expect(screen.getByText('cards')).toBeTruthy()
expect(screen.queryByText(en.empty)).toBeNull()
})
it('leads with its own heading and intro', () => {
renderSection(1)
expect(screen.getByRole('heading', { name: en.title })).toBeTruthy()
expect(screen.getByText(en.intro)).toBeTruthy()
})
})
describe('BashCard', () => {

View File

@@ -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/ui-plugins/README.md
README.md: bb487d5e2cbd34406d83867997ede4d70b190d70
README.zh.md: 48a11911509ea260aa9727d55c0b4df6efbfb1c9
README.md: a663665cc2d7ce26a2724da9aecc25f51515327a
README.zh.md: 852ecbe6546f76a76fc6d9d3a8bb891539b0844f

View File

@@ -2,9 +2,9 @@
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).
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 page renders a searchable two-column catalog of compact disclosure cards. Each collapsed card uses the local Loader id as its title, a colored root-Fiber status dot, and a small effective-enablement tag. Expanding one card reveals its Loader-tree entry value without a redundant field label, followed by the effective configuration and Cordis status. 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.
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
@@ -16,5 +16,5 @@ 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.
- **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.

View File

@@ -2,9 +2,9 @@
[English](README.md) | 中文
Web 设置中的只读“插件”分区。浏览器插件在“模型”之后注册一个 id 为 `plugin-inventory` 的本地化 `settings.section` 贡献,并由 Settings shell 提供常规的回退图标。插件激活期间不会读取 Remote挂载该分区时,组件才通过 [`api-remotes`](../../api/remotes/README.md) 懒调用 `ctx.remote.pluginInventory.list()`
Web 设置中的只读**插件列表**标签页。浏览器插件注册一个 id 为 `all` 的本地化 `settings.plugins.tab` 贡献;“插件”分区拥有导航入口与标签栏。插件激活期间不会读取 Remote首次选择该标签页时才挂载组件,并通过 [`api-remotes`](../../api/remotes/README.md) 懒调用 `ctx.remote.pluginInventory.list()`
以可搜索的双列紧凑折叠卡片展示清单。每张收起的卡片使用 Loader 本地 id 作为标题,以彩色圆点表示根 Fiber 状态,以小标签表示有效启停状态。展开卡片后会直接展示 Loader 树条目,不附加重复的字段标题,并列出有效配置状态与 Cordis 状态。加载、空结果、无匹配结果与通用失败状态只属于已挂载组件;读取失败后可以重试,且不会暴露传输细节。注册使用 `ctx.slots.inject()`,因此能跟随 Settings 的延迟声明、重新声明、本地化变化与 teardown不拥有另一份全局 store
该标签页以可搜索的双列紧凑折叠卡片展示清单。每张收起的卡片使用模块短名称作为标题,以小标签表示有效启停状态;已启用的条目还会以彩色圆点表示根 fiber 状态。展开卡片后会直接展示 Loader 树条目 id,不附加重复的字段标题,并列出有效配置状态;已启用的条目还会列出 Cordis 状态,已停用的条目则省略重复的“未挂载”运行状态。条目 id 仍作为 React key、展开标识、详情值与额外的搜索目标代码不按字符串形状对它分类。加载、空结果、无匹配结果与通用失败状态只属于已挂载组件;读取失败后可以重试,且不会暴露传输细节。注册使用 `ctx.slots.inject()`,因此能跟随标签 slot 的延迟声明、重新声明、本地化变化与 teardown无需 import 分区拥有方
## 模型体验
@@ -16,5 +16,5 @@ Web 设置中的只读“插件”分区。浏览器插件在“模型”之后
## 已知限制与暂缓事项
- **每次挂载或重试只读取一份快照** —— 页不订阅 Loader 变化,也不会在重连后自动重新读取;重新打开分区会取得新快照。
- **每次 Settings 挂载或重试只读取一份快照** —— 标签页不订阅 Loader 变化,也不会在重连后自动重新读取;切换标签页会保留当前快照,重新打开 Settings 则会取得新快照。
- **只读 Loader 视图** —— 本地搜索不会额外引入来源、按来源分组、当前浏览器激活诊断或插件修改控件。

View File

@@ -1,6 +1,6 @@
{
"name": "@deepseek-ai/dsh-client-ui-plugins",
"description": "Read-only Cordis Loader plugin inventory in Web settings",
"description": "Read-only Cordis Loader inventory tab in Web Plugins settings",
"version": "0.0.1-rc.2",
"publishConfig": {
"access": "restricted"

View File

@@ -7,19 +7,12 @@
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;

View File

@@ -19,7 +19,7 @@ type PluginFiberPhase = PluginInventoryEntry['fiberPhase']
/** Full component props assembled by the Settings slot renderer. */
export type PluginSettingsSectionProps =
PropsRuntime<'settings.section'>
PropsRuntime<'settings.plugins.tab'>
& PropsLocale<'settings.plugins'>
& InjectFace<PluginSettingsSectionInjected>
@@ -62,7 +62,7 @@ function matches(entry: PluginInventoryEntry, normalizedQuery: string): boolean
/** Render the read-only current Loader inventory. */
export function PluginSettingsSection({ list, t }: PluginSettingsSectionProps): ReactNode {
const titleId = useId()
const catalogId = useId()
const [request, setRequest] = useState(0)
const [query, setQuery] = useState('')
const [expanded, setExpanded] = useState<PluginInventoryEntry['entryId'] | null>(null)
@@ -97,10 +97,7 @@ export function PluginSettingsSection({ list, t }: PluginSettingsSectionProps):
}
return (
<section className={css.section} aria-labelledby={titleId} aria-busy={state.status === 'loading'}>
<header className={css.heading}>
<h2 id={titleId}>{t('title')}</h2>
</header>
<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}>
@@ -134,8 +131,9 @@ export function PluginSettingsSection({ list, t }: PluginSettingsSectionProps):
{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 = `${titleId}-details-${encodeURIComponent(entry.entryId)}`
const detailId = `${catalogId}-details-${encodeURIComponent(entry.entryId)}`
return (
<li
className={css.card}
@@ -148,22 +146,24 @@ export function PluginSettingsSection({ list, t }: PluginSettingsSectionProps):
type="button"
aria-expanded={open}
aria-controls={detailId}
aria-label={`${title}, ${status}, ${t(entry.enabled ? 'enabledTag' : 'disabledTag')}`}
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}>
<span
className={css.statusDot}
data-phase={entry.fiberPhase ?? 'unobserved'}
role="img"
aria-label={status}
title={status}
/>
{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'}>
{t(entry.enabled ? 'enabledTag' : 'disabledTag')}
{configuration}
</span>
<IconChevronDownOutline14 className={css.chevron} size={12} aria-hidden="true" />
</span>
@@ -174,12 +174,14 @@ export function PluginSettingsSection({ list, t }: PluginSettingsSectionProps):
<dl className={css.details}>
<div>
<dt>{t('configuration')}</dt>
<dd>{t(entry.enabled ? 'enabledTag' : 'disabledTag')}</dd>
</div>
<div>
<dt>{t('cordis')}</dt>
<dd>{status}</dd>
<dd>{configuration}</dd>
</div>
{entry.enabled ? (
<div>
<dt>{t('cordis')}</dt>
<dd>{status}</dd>
</div>
) : null}
</dl>
</div>
) : null}
@@ -190,6 +192,6 @@ export function PluginSettingsSection({ list, t }: PluginSettingsSectionProps):
) : null}
</div>
) : null}
</section>
</div>
)
}

View File

@@ -22,7 +22,7 @@ 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. */
/** 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-plugins: dictionaries')
@@ -36,11 +36,11 @@ export function apply(ctx: ClientContext): void {
}
const injected = (): PluginSettingsSectionInjected => ({ list })
ctx.slots.inject('settings.section', () => ctx.slots.register({
name: 'settings.section',
id: 'plugin-inventory',
order: 15,
label: () => t('nav'),
ctx.slots.inject('settings.plugins.tab', () => ctx.slots.register({
name: 'settings.plugins.tab',
id: 'all',
order: 10,
label: () => t('tab'),
locale: NS,
inject: injected,
}, PluginSettingsSection))

View File

@@ -2,8 +2,7 @@
/** Simplified Chinese dictionary and key source of truth. */
export const zh = {
nav: '插件',
title: '插件',
tab: '插件列表',
loading: '正在读取插件…',
error: '暂时无法读取插件。',
retry: '重试',
@@ -28,8 +27,7 @@ export type PluginsKey = keyof typeof zh
/** English dictionary checked against the Chinese key set. */
export const en = {
nav: 'Plugins',
title: 'Plugins',
tab: 'Plugin list',
loading: 'Reading plugins…',
error: 'Plugins are temporarily unavailable.',
retry: 'Retry',

View File

@@ -1,4 +1,4 @@
/** Host loader entry for the browser implementation exported from `./client`. */
/** Host loader entry for the inventory-tab browser implementation exported from `./client`. */
/** Host plugin body — no host-side behavior for the plugin settings section. */
/** Host plugin body — no host-side behavior for the plugin inventory tab. */
export function apply(): void {}

View File

@@ -38,7 +38,7 @@ async function bench() {
function declare(slots: SlotsService): () => void {
return slots.register({
name: 'root',
children: { 'settings.section': { kind: 'list', scope: 'root' } },
children: { 'settings.plugins.tab': { kind: 'list', scope: 'root' } },
} as never, () => null)
}
@@ -47,16 +47,16 @@ describe('ui-plugins browser plugin', () => {
expect(inject).toEqual(['slots', 'locale', 'remote', 'remote.pluginInventory'])
})
it('registers a localized section without reading the Remote eagerly', async () => {
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.section')[0]!
const entry = b.slots.entries('settings.plugins.tab')[0]!
expect(entry.component).toBe(PluginSettingsSection)
expect(entry.options).toMatchObject({ id: 'plugin-inventory', order: 15 })
expect(entry.options).toMatchObject({ id: 'all', order: 10 })
expect(entry.locale).toBe(NS)
expect(resolveSlotLabel(entry.options.label)).toBe('插件')
expect(resolveSlotLabel(entry.options.label)).toBe('插件列表')
expect(b.list).not.toHaveBeenCalled()
const injected = (entry.inject as unknown as () => PluginSettingsSectionInjected)()
@@ -71,22 +71,22 @@ describe('ui-plugins browser plugin', () => {
const b = await bench()
const fiber = b.ctx.plugin({ inject: [...inject], apply })
await fiber.await()
expect(b.slots.entries('settings.section')).toHaveLength(0)
expect(b.slots.entries('settings.plugins.tab')).toHaveLength(0)
const stop = declare(b.slots)
await vi.waitFor(() => { expect(b.slots.entries('settings.section')).toHaveLength(1) })
await vi.waitFor(() => { expect(b.slots.entries('settings.plugins.tab')).toHaveLength(1) })
b.locale.setLocale('en')
expect(resolveSlotLabel(b.slots.entries('settings.section')[0]!.options.label)).toBe('Plugins')
expect(resolveSlotLabel(b.slots.entries('settings.plugins.tab')[0]!.options.label)).toBe('Plugin list')
stop()
expect(b.slots.entries('settings.section')).toHaveLength(0)
expect(b.slots.entries('settings.plugins.tab')).toHaveLength(0)
declare(b.slots)
await vi.waitFor(() => {
expect(b.slots.entries('settings.section')[0]?.component).toBe(PluginSettingsSection)
expect(b.slots.entries('settings.plugins.tab')[0]?.component).toBe(PluginSettingsSection)
})
await fiber.dispose()
expect(b.slots.entries('settings.section')).toHaveLength(0)
expect(b.slots.entries('settings.plugins.tab')).toHaveLength(0)
expect(() => b.locale.register(NS, 'zh', {})).not.toThrow()
await b.ctx.fiber.dispose()
})

View File

@@ -12,16 +12,12 @@ 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,
}
} as PluginSettingsSectionProps
}
const SNAPSHOT = {
@@ -31,12 +27,13 @@ const SNAPSHOT = {
{ 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('PluginSettingsSection', () => {
it('renders searchable two-column-card semantics with dots and tags', async () => {
it('renders runtime status only for enabled plugins', async () => {
const deferred = Promise.withResolvers<Snapshot>()
const list = vi.fn(() => deferred.promise)
const view = render(<PluginSettingsSection {...props(list)} />)
@@ -46,9 +43,9 @@ describe('PluginSettingsSection', () => {
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(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',
@@ -75,8 +72,10 @@ describe('PluginSettingsSection', () => {
target: { value: 'disabled-entry' },
})
expect(view.container.querySelector('[data-loader-entry]')).toBeNull()
fireEvent.click(screen.getByRole('button', { name: 'directory-picker-native, Not mounted, Disabled' }))
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 () => {

View File

@@ -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/ui-settings/README.md
README.md: 8bf085fd02e3c76148674065bb4f5708e9a6e8d8
README.zh.md: f7b6f18809c64be6830ea23c3968e9af70b70c41
README.md: 950585c4957cd59fe3a38dc37cdd4084f7c5541c
README.zh.md: dce8dbf5c8e0939142fed8a3df84c47acd7c8a1e

View File

@@ -2,7 +2,7 @@
English | [中文](README.zh.md)
The settings domain's base layer, with two roles and no presentation of its own. It provides `ctx.settingsScope`, the Host transport every preference row binds its durable namespace section through, and it declares the settings slot types registrants fill: `settings.trigger` / `settings.header` / `settings.close` (chrome content), `settings.action` (ordered content-header actions), `settings.section` (one page per feature), and `settings.onboarding` (ordered feature-owned pages). It depends on no `ui-*` presentation package, so any feature that owns a preference can reach it; the settings SHELL — the `sidebar.settings` occupant, its navigation, and the chrome — lives in ui-settings-general, because a shell dependency on ui-sidebar would close a reference graph cycle through ui-layout and ui-theme. The shell's own contract types live beside the shell for the same reason.
The settings domain's base layer, with two roles and no presentation of its own. It provides `ctx.settingsScope`, the Host transport every preference row binds its durable namespace section through, and it declares the settings slot types registrants fill: `settings.trigger` / `settings.header` / `settings.close` (chrome content), `settings.action` (ordered content-header actions), `settings.section` (one page per feature), `settings.plugins.tab` (feature-owned pages inside the Plugins section), and `settings.onboarding` (ordered feature-owned pages). It depends on no `ui-*` presentation package, so any feature that owns a preference can reach it; the settings SHELL — the `sidebar.settings` occupant, its navigation, and the chrome — lives in ui-settings-general, because a shell dependency on ui-sidebar would close a reference graph cycle through ui-layout and ui-theme. The shell's own contract types live beside the shell for the same reason.
The plugin injects nothing and waits for nothing: `ctx.settingsScope.bind(spec)` resolves the wire face through the CALLER's context at call time, so the bound scope's disposer belongs to the calling fiber, and the caller injects `connection` for the transport and `remote` for the invalidation. Listeners exist before the first background read starts, so a row's activation never blocks on the settings transport. A bound scope reloads on the forwarded `settings/document-updated` event for its own namespace and on `connection/reset`. Writes carry one field path and the last known namespace revision as `expectedRevision`; a rejected or failed write re-reads unless a newer write already superseded it, and a stale read never publishes over a newer one. Without a `decode` in the spec, a section that is not a plain object, fails its rehydrated schema, or carries a schema envelope this client cannot rehydrate publishes no value at all, so a row renders its own absent state instead of a half-decoded one.

View File

@@ -2,7 +2,7 @@
[English](README.md) | 中文
设置领域的底座,承担两项职责,本身不含任何呈现内容。它提供 `ctx.settingsScope`——每个偏好设置行绑定自己那份持久化命名空间分区所用的宿主传输层;并声明由注册方填充的设置 slot 类型:`settings.trigger``settings.header``settings.close`(界面框架内容)、`settings.action`(内容标题栏中的有序操作)、`settings.section`(每项功能一页)和 `settings.onboarding`(由各功能持有的有序页面)。它不依赖任何 `ui-*` 呈现包,因此任何持有偏好设置的功能都能够到它;设置**外壳**——`sidebar.settings` 占位方、它的导航与界面框架——位于 ui-settings-general因为外壳一旦依赖 ui-sidebar就会经 ui-layout 与 ui-theme 闭合出一条引用图环路。外壳自身的契约类型出于同一原因与外壳放在一起。
设置领域的底座,承担两项职责,本身不含任何呈现内容。它提供 `ctx.settingsScope`——每个偏好设置行绑定自己那份持久化命名空间分区所用的宿主传输层;并声明由注册方填充的设置 slot 类型:`settings.trigger``settings.header``settings.close`(界面框架内容)、`settings.action`(内容标题栏中的有序操作)、`settings.section`(每项功能一页)`settings.plugins.tab`(“插件”分区内由各功能持有的页面)`settings.onboarding`(由各功能持有的有序页面)。它不依赖任何 `ui-*` 呈现包,因此任何持有偏好设置的功能都能够到它;设置**外壳**——`sidebar.settings` 占位方、它的导航与界面框架——位于 ui-settings-general因为外壳一旦依赖 ui-sidebar就会经 ui-layout 与 ui-theme 闭合出一条引用图环路。外壳自身的契约类型出于同一原因与外壳放在一起。
该插件不注入任何服务、也不等待任何服务:`ctx.settingsScope.bind(spec)` 在调用时经**调用方**的 context 解析线路面,因此绑定所得 scope 的 disposer 归调用方 fiber 所有,而由调用方注入 `connection` 取得传输层、注入 `remote` 取得失效通知。监听器在首次后台读取启动之前就已存在,因此某一行的激活绝不会阻塞在设置传输层上。已绑定的 scope 会在收到属于自己命名空间的转发 `settings/document-updated` 事件时、以及在 `connection/reset` 时重新读取。写入携带单一字段路径以及最近已知的命名空间 revision 作为 `expectedRevision`;被拒绝或失败的写入会重新读取,除非已有更新的写入取代了它,而过期的读取绝不会覆盖发布更新的结果。若 spec 未提供 `decode`,则分区不是普通对象、未通过其重建后的 schema 校验、或携带本客户端无法重建的 schema 信封时,一律不发布任何值,于是行渲染自己的缺失状态,而不是一份半解码的值。

View File

@@ -51,6 +51,15 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
* item registrant; the shell neither declares nor renders it.)
*/
'settings.section': { kind: 'list'; scope: 'root'; owner: SettingsSectionOwnerProps }
/**
* One page inside the Plugins settings section. The section owner renders
* localized entry labels as tabs and mounts each contribution inside its
* corresponding tab panel. Options: `id` (tab key), `order` (tab order),
* and `label` (registrant-localized tab text). Declared at runtime by the
* feature that owns the Plugins section; the type lives here so inventory
* and configuration plugins collaborate without depending on one another.
*/
'settings.plugins.tab': { kind: 'list'; scope: 'root'; owner: SettingsPluginsTabOwnerProps }
/**
* Root-scoped onboarding steps contributed by settings features. The
* shell mounts one ordered step at a time; the active registrant either
@@ -83,6 +92,12 @@ export interface SettingsGeneralItemOwnerProps {
children?: never
}
/** Owner share of a Plugins tab (the section supplies nothing). */
export interface SettingsPluginsTabOwnerProps {
/** Marker field: tab owner props are intentionally empty. */
children?: never
}
/** Owner share of the trigger content seat: the sidebar column state. */
export interface SettingsTriggerOwnerProps {
/** Whether the sidebar renders wide content (false = 56px rail, icon only). */

View File

@@ -13,7 +13,7 @@ import { SettingsScopeService } from './settings-scope.ts'
export type {
SettingsGeneralItemOwnerProps, SettingsHeaderOwnerProps, SettingsOnboardingOwnerProps,
SettingsSectionOwnerProps, SettingsTriggerOwnerProps,
SettingsPluginsTabOwnerProps, SettingsSectionOwnerProps, SettingsTriggerOwnerProps,
} from './contract/slots.ts'
export { SettingsScopeController, SettingsScopeService } from './settings-scope.ts'