+
{stats.steps > 0 && (
& PropsRenderSlots<'conversation.chat.turnTail' | 'conversation.chat.assistant-actions'>
+ & InjectFace
/** Turn-local actions and feature tail over the Location index, independent of Assistant placement. */
export const TurnTailNodeView = memo(function TurnTailNodeView({
- node, openFile, forkAt, renderSlot, t, useChat,
+ node, openFile, forkAt, renderSlot, t, useChat, usePerformanceUsage,
}: TurnTailNodeViewProps) {
+ const detailed = usePerformanceUsage(mode => mode) === 'detailed'
const data = node.data
const hasLaterChatNode = useChat(snapshot =>
snapshot.locations.getTurn(data.turn).at(-1) !== node.key)
@@ -25,9 +27,6 @@ export const TurnTailNodeView = memo(function TurnTailNodeView({
const owner: TurnTailOwnerProps = { turn, seq: closing?.finalNode.seq ?? data.seq, openFile }
const tail = renderSlot('conversation.chat.turnTail', owner)
if (closing === null) return tail === null ? null : {tail}
- const runMs = turn.start === undefined || turn.end === undefined
- ? undefined
- : Math.max(0, turn.end.time - turn.start.time)
// Interruption-frozen partials carry no messageId, so they address no
// durable message and contribute no per-message actions.
const messageId = closing.finalNode.messageId
@@ -49,19 +48,9 @@ export const TurnTailNodeView = memo(function TurnTailNodeView({
branchUnavailable={data.branchUnavailable || hasLaterChatNode}
className={css.actions}
extraActions={assistantActions}
- usageAction={(
- <>
- {data.tokenUsage !== undefined && }
- {runMs !== undefined && (
-
- )}
-
- )}
+ usageAction={detailed && data.tokenUsage !== undefined
+ ?
+ : null}
t={t}
/>
diff --git a/packages/client/ui-chat/src/client/chat/TurnUsagePanel.tsx b/packages/client/ui-chat/src/client/chat/TurnUsagePanel.tsx
index 765650b5ca..460d1092a2 100644
--- a/packages/client/ui-chat/src/client/chat/TurnUsagePanel.tsx
+++ b/packages/client/ui-chat/src/client/chat/TurnUsagePanel.tsx
@@ -1,13 +1,9 @@
-// Icon-row Turn-stat actions: a database pill labelled with the turn total
-// click-opens the per-Turn usage dialog, and a clock pill labelled with the
-// turn wall time click-opens the Turn-time dialog. Both sit right of the
-// branch action in the tail's IconActions row, ahead of the plain clock text.
+/** Completed-Turn token usage action and its accounting details dialog. */
import { createPortal } from 'react-dom'
-import { IconClockOutlineRegular, IconDatabaseOutlineRegular } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconDatabaseOutlineRegular } from '@deepseek-ai/dsh-client-ui-primitives'
import type { TurnTokenUsage } from '../contract/chat-nodes.ts'
import type { ChatViewSlotProps } from '../contract/slots.ts'
-import { formatLatencySeconds, formatRunDuration, formatTokensPerSecond } from './message-chrome.ts'
import { formatCacheHitPercent, formatExactTokens, formatTokens } from './token-format.ts'
import { MEASURE_STYLE, useStatDialog } from './stat-dialog.ts'
import css from './TurnUsagePanel.module.css'
@@ -19,17 +15,6 @@ export interface TurnUsagePanelProps {
t: ChatViewSlotProps['t']
}
-export interface TurnTimePanelProps {
- /** Turn wall time in ms, the pill's label. */
- runMs: number
- /** Turn decode throughput, a dialog row when known. */
- tokensPerSecond?: number | undefined
- /** Turn first-step TTFT in ms, a dialog row when known. */
- ttftMs?: number | undefined
- /** The owning view's locale seat, passed down as a plain prop. */
- t: ChatViewSlotProps['t']
-}
-
function formatCompactCount(value: number, t: ChatViewSlotProps['t']): string {
return t('message.turnUsage.count', { count: formatTokens(value, t) })
}
@@ -123,60 +108,3 @@ export function TurnUsagePanel({ usage, t }: TurnUsagePanelProps) {
)
}
-
-/**
- * Turn-time IconActions pill with a click-open Turn-time details dialog.
- * @param props - Turn timing facts and locale seat.
- * @returns The clock-and-duration trigger and, while open, its portaled dialog anchored above the trigger.
- */
-export function TurnTimePanel({ runMs, tokensPerSecond, ttftMs, t }: TurnTimePanelProps) {
- const { open, setOpen, rootRef, panelRef, pos } = useStatDialog()
- return (
-
-
- {open && createPortal(
-
-
-
-
- {t('message.turnTime.title')}
-
-
-
-
- - {t('message.turnTime.duration')}
- - {formatRunDuration(runMs, t)}
- {tokensPerSecond !== undefined && (
- <>
- - {t('message.turnTime.speed')}
- - {t('message.tokensPerSecond', { tps: formatTokensPerSecond(tokensPerSecond) })}
-
- )}
- {ttftMs !== undefined && (
- <>
- - {t('message.turnTime.ttft')}
- - {t('duration.seconds', { seconds: formatLatencySeconds(ttftMs) })}
-
- )}
-
-
- )
-}
diff --git a/packages/client/ui-chat/src/client/chat/message-chrome.ts b/packages/client/ui-chat/src/client/chat/message-chrome.ts
index 4bd134a2a9..36c4a3f0bd 100644
--- a/packages/client/ui-chat/src/client/chat/message-chrome.ts
+++ b/packages/client/ui-chat/src/client/chat/message-chrome.ts
@@ -35,7 +35,7 @@ export function msUntilNextLocalMidnight(ms: number): number {
}
/**
- * Localized elapsed-time label shared by running and settled turn chrome.
+ * Localized elapsed-time label for the running conversation clock.
* @param ms - Elapsed duration in milliseconds (negatives clamp to zero).
* @param t - Translate seat supplying the duration templates.
* @returns Display string in whole seconds; minutes and seconds once the
@@ -55,17 +55,6 @@ export function formatRunDuration(ms: number, t: RunDurationTranslate): string {
: t('duration.seconds', { seconds })
}
-/**
- * Sub-turn latency figure: one decimal under ten seconds, whole seconds
- * beyond. Unit-less so the locale template owns the second suffix.
- * @param ms - Latency in milliseconds (negatives clamp to zero).
- * @returns Display number in seconds without unit.
- */
-export function formatLatencySeconds(ms: number): string {
- const s = Math.max(0, ms) / 1000
- return s < 10 ? String(Math.round(s * 10) / 10) : String(Math.round(s))
-}
-
/**
* Decode-throughput figure: whole tokens from ten up, one decimal below.
* @param tps - Tokens per second.
diff --git a/packages/client/ui-chat/src/client/chat/register-node-renderers.ts b/packages/client/ui-chat/src/client/chat/register-node-renderers.ts
index 79b35fd85a..f8f78000f1 100644
--- a/packages/client/ui-chat/src/client/chat/register-node-renderers.ts
+++ b/packages/client/ui-chat/src/client/chat/register-node-renderers.ts
@@ -1,4 +1,6 @@
import type { Context } from '@deepseek-ai/cordis'
+import type { ObservableSnapshot } from '@deepseek-ai/dsh-client-store'
+import type { PerformanceUsageMode } from '../../chat-settings.ts'
import { NS } from '../locale.ts'
import { AssistantNodeView } from './AssistantNodeView.tsx'
import { CommandNodeView, ManualCompactionNodeView } from './CommandNodeView.tsx'
@@ -13,8 +15,9 @@ import { TurnTailNodeView } from './TurnTailNodeView.tsx'
/**
* Register this package's business renderers behind the keyed Chat Node seat.
* @param ctx - owning UI Conversation context.
+ * @param performanceUsage - live statistics detail preference.
*/
-export function registerChatNodeRenderers(ctx: Context): void {
+export function registerChatNodeRenderers(ctx: Context, performanceUsage: ObservableSnapshot
): void {
ctx.slots.inject('conversation.chat.node', () => ctx.slots.register(
{ name: 'conversation.chat.node', key: 'user', locale: NS }, UserMessageNodeView))
ctx.slots.inject('conversation.chat.node', () => ctx.slots.register(
@@ -47,6 +50,7 @@ export function registerChatNodeRenderers(ctx: Context): void {
name: 'conversation.chat.node',
key: 'turn-tail',
locale: NS,
+ inject: () => ({ hooks: { performanceUsage } }),
children: {
'conversation.chat.turnTail': { kind: 'list', scope: 'session' },
'conversation.chat.assistant-actions': { kind: 'list', scope: 'session' },
diff --git a/packages/client/ui-chat/src/client/contract/chat-nodes.ts b/packages/client/ui-chat/src/client/contract/chat-nodes.ts
index d04bdfd90e..cade646b1c 100644
--- a/packages/client/ui-chat/src/client/contract/chat-nodes.ts
+++ b/packages/client/ui-chat/src/client/contract/chat-nodes.ts
@@ -91,8 +91,6 @@ export interface TurnTailChatData {
readonly closing: FinalAssistantChatData | null
/** Whether non-rendered later evidence makes the closing seq non-tail. */
readonly branchUnavailable: boolean
- readonly ttftMs?: number
- readonly tokensPerSecond?: number
/** Exact per-Turn accounting; absent when the loaded evidence is incomplete. */
readonly tokenUsage?: TurnTokenUsage
}
diff --git a/packages/client/ui-chat/src/client/contract/slots.ts b/packages/client/ui-chat/src/client/contract/slots.ts
index 91c3adad7b..d5b007b7cf 100644
--- a/packages/client/ui-chat/src/client/contract/slots.ts
+++ b/packages/client/ui-chat/src/client/contract/slots.ts
@@ -9,7 +9,7 @@ import type {
InjectFace, KeyedSnapshotSelectorHook, PropsLocale, PropsRenderSlots, PropsRuntime, PropsStore,
SlotHookFactory, SnapshotSelectorHook,
} from '@deepseek-ai/dsh-client-ui-slots'
-import type { SnapshotStore } from '@deepseek-ai/dsh-client-store'
+import type { ObservableSnapshot, SnapshotStore } from '@deepseek-ai/dsh-client-store'
import type { MarkdownFileMentions } from '@deepseek-ai/dsh-client-ui-primitives'
import type {} from '@deepseek-ai/dsh-client-ui-layout/client'
import type { createChatStore } from '../stores.ts'
@@ -19,7 +19,7 @@ import type {
ChatNodeProcessSource, ChatNodeSource, ChatSnapshot, ChatTurnProcessPresentation,
} from './snapshot.ts'
import type { TurnProcessSpec } from './turn-process.ts'
-import type { TranscriptViewMode } from '../../chat-settings.ts'
+import type { PerformanceUsageMode, TranscriptViewMode } from '../../chat-settings.ts'
/** Selector hook over the current Conversation binding's Chat target. */
export type UseChat = SnapshotSelectorHook
@@ -128,6 +128,14 @@ export interface ChatScrollPosition {
readonly scrollTop: number
}
+/** Shared settings source for the performance row, composer, and turn tail. */
+export interface PerformanceUsageInjected {
+ hooks: {
+ /** Accepted performance and usage detail preference. */
+ performanceUsage: ObservableSnapshot
+ }
+}
+
/** Business callbacks injected into the Chat view. */
export interface ChatViewInjected {
hooks: {
diff --git a/packages/client/ui-chat/src/client/contract/turn-metrics.ts b/packages/client/ui-chat/src/client/contract/turn-metrics.ts
index a9f4dbc7c0..6cbd619beb 100644
--- a/packages/client/ui-chat/src/client/contract/turn-metrics.ts
+++ b/packages/client/ui-chat/src/client/contract/turn-metrics.ts
@@ -1,17 +1,9 @@
-// Latency/throughput folds shared by the settled turn footer and StatsPills.
+// Assistant timing readings used by session statistics.
import type {
- AssistantMessageNode, ConversationNode,
+ AssistantMessageNode,
} from '@deepseek-ai/dsh-client-ui-conversation/client'
-/** Latency and decode-throughput readings for one turn's footer. */
-export interface TurnMetrics {
- /** First-step TTFT in ms; absent when that step carries no recorded timing. */
- ttftMs?: number
- /** Decode throughput over steps carrying both timing and provider usage. */
- tokensPerSecond?: number
-}
-
/** One assistant step's derivable latency facts; null marks an unrecorded part. */
export interface StepReading {
/** step/start → first token delta, in ms. */
@@ -49,51 +41,3 @@ export function assistantStepReading(node: AssistantNode): StepReading {
: null
return { ttftMs, decodeMs, outputTokens: usageOutputTokens(node.usage) }
}
-
-interface TurnFold {
- firstStep: number
- firstStepTtftMs: number | null
- decodeMs: number
- outputTokens: number
- sampled: boolean
-}
-
-/**
- * Fold assistant nodes into per-turn footer metrics.
- *
- * TTFT is the turn's lowest-step request-dispatch-to-first-token reading, so
- * it is only meaningful when the turn's start is inside
- * the loaded window (the caller gates on `turnTimings`, which shares that
- * window). Throughput divides summed output tokens by summed decode wall time,
- * counting only steps that carry both.
- * @param nodes - Snapshot nodes of the loaded window.
- * @returns Turn number → available metrics; turns with none are absent.
- */
-export function deriveTurnMetrics(nodes: readonly ConversationNode[]): Map {
- const folds = new Map()
- for (const node of nodes) {
- if (node.kind !== 'assistant') continue
- const reading = assistantStepReading(node)
- let fold = folds.get(node.turn)
- if (fold === undefined) {
- fold = { firstStep: node.step, firstStepTtftMs: reading.ttftMs, decodeMs: 0, outputTokens: 0, sampled: false }
- folds.set(node.turn, fold)
- } else if (node.step < fold.firstStep) {
- fold.firstStep = node.step
- fold.firstStepTtftMs = reading.ttftMs
- }
- if (reading.decodeMs !== null && reading.outputTokens !== null) {
- fold.decodeMs += reading.decodeMs
- fold.outputTokens += reading.outputTokens
- fold.sampled = true
- }
- }
- const metrics = new Map()
- for (const [turn, fold] of folds) {
- const entry: TurnMetrics = {}
- if (fold.firstStepTtftMs !== null) entry.ttftMs = fold.firstStepTtftMs
- if (fold.sampled && fold.decodeMs > 0) entry.tokensPerSecond = fold.outputTokens / (fold.decodeMs / 1000)
- if (entry.ttftMs !== undefined || entry.tokensPerSecond !== undefined) metrics.set(turn, entry)
- }
- return metrics
-}
diff --git a/packages/client/ui-chat/src/client/conversation-nodes/turn-tail.ts b/packages/client/ui-chat/src/client/conversation-nodes/turn-tail.ts
index 3206b1cea3..1cccf210f3 100644
--- a/packages/client/ui-chat/src/client/conversation-nodes/turn-tail.ts
+++ b/packages/client/ui-chat/src/client/conversation-nodes/turn-tail.ts
@@ -9,7 +9,6 @@ import { deriveTurnTokenUsage } from '@deepseek-ai/dsh-token-meter/client'
import type {
AssistantChatData, FinalAssistantChatData, TurnTailChatData,
} from '../contract/chat-nodes.ts'
-import { deriveTurnMetrics } from '../contract/turn-metrics.ts'
import { CHAT_SYNTHETIC_SEQ_OFFSETS, chatNode } from './common.ts'
import { toAssistantBlocks } from './event-projection.ts'
@@ -146,7 +145,6 @@ function tailData(context: ConversationNodeContext): TurnTailChat
latestTranscriptSeq = candidate
}
}
- const metrics = deriveTurnMetrics(finalized.map(candidate => candidate.finalNode)).get(end.event.data.turn)
const tokenUsage = context.start?.event.type === 'turn/start'
? deriveTurnTokenUsage(context.matches.map(match => match.event).filter(isSessionEvent))
: undefined
@@ -156,8 +154,6 @@ function tailData(context: ConversationNodeContext): TurnTailChat
time: end.event.time,
closing,
branchUnavailable: closing === null || latestTranscriptSeq !== closing.finalNode.seq,
- ...metrics?.ttftMs === undefined ? {} : { ttftMs: metrics.ttftMs },
- ...metrics?.tokensPerSecond === undefined ? {} : { tokensPerSecond: metrics.tokensPerSecond },
...tokenUsage === undefined ? {} : { tokenUsage },
}
}
diff --git a/packages/client/ui-chat/src/client/locale.ts b/packages/client/ui-chat/src/client/locale.ts
index 5468ed9df4..344fef13d0 100644
--- a/packages/client/ui-chat/src/client/locale.ts
+++ b/packages/client/ui-chat/src/client/locale.ts
@@ -27,6 +27,10 @@ export const zh = {
'chat.turnNavigation.jump': '跳转到第 {turn} 轮',
'chat.turnNavigation.jumpLoad': '加载并跳转到第 {turn} 轮',
'chat.turnNavigation.turn': '第 {turn} 轮',
+ 'settings.performance.title': '性能与用量',
+ 'settings.performance.description': '选择性能与用量信息展示的详细程度',
+ 'settings.performance.compact': '简洁',
+ 'settings.performance.detailed': '详细',
'settings.transcript.title': '对话显示',
'settings.transcript.description': '控制已完成轮次的过程内容',
'settings.transcript.normal': '标准',
@@ -81,7 +85,6 @@ export const zh = {
'message.turnError': '本轮运行失败',
'message.maxTokens': '已达到输出 token 上限',
'message.maxTokens.hint': '回答被截断，已有输出保留在对话中。发送“继续”可让模型接着输出。',
- 'message.ranFor': '用时 {duration}',
'message.tokensPerSecond': '{tps} tok/s',
'message.turnUsage.title': '本轮用量',
'message.turnUsage.consumed': '用量 {total}',
@@ -93,10 +96,6 @@ export const zh = {
'message.turnUsage.output': '输出',
'message.turnUsage.reasoning': '（其中推理 {tokens}）',
'message.turnUsage.count': '{count} tok',
- 'message.turnTime.title': '本轮用时和速度',
- 'message.turnTime.duration': '本轮总用时',
- 'message.turnTime.speed': '输出速度（TPS）',
- 'message.turnTime.ttft': '首 token 用时（TTFT）',
'duration.seconds': '{seconds}秒',
'duration.minutes': '{minutes}分{seconds}秒',
'duration.hours': '{hours}小时{minutes}分{seconds}秒',
@@ -138,6 +137,10 @@ export const en = {
'chat.turnNavigation.jump': 'Jump to turn {turn}',
'chat.turnNavigation.jumpLoad': 'Load and jump to turn {turn}',
'chat.turnNavigation.turn': 'Turn {turn}',
+ 'settings.performance.title': 'Performance & usage',
+ 'settings.performance.description': 'Choose how much performance and usage information to show',
+ 'settings.performance.compact': 'Compact',
+ 'settings.performance.detailed': 'Detailed',
'settings.transcript.title': 'Conversation display',
'settings.transcript.description': 'Controls process content in completed turns',
'settings.transcript.normal': 'Normal',
@@ -192,7 +195,6 @@ export const en = {
'message.turnError': 'This turn failed',
'message.maxTokens': 'Output token limit reached',
'message.maxTokens.hint': 'The reply was cut off; earlier output is preserved in the conversation. Send "continue" to let the model resume.',
- 'message.ranFor': 'Ran for {duration}',
'message.tokensPerSecond': '{tps} tok/s',
'message.turnUsage.title': 'Turn usage',
'message.turnUsage.consumed': 'Usage {total}',
@@ -204,10 +206,6 @@ export const en = {
'message.turnUsage.output': 'Output',
'message.turnUsage.reasoning': ' ({tokens} reasoning)',
'message.turnUsage.count': '{count} tok',
- 'message.turnTime.title': 'Turn time and speed',
- 'message.turnTime.duration': 'Total run time',
- 'message.turnTime.speed': 'Tokens per second (TPS)',
- 'message.turnTime.ttft': 'Time to first token (TTFT)',
'duration.seconds': '{seconds}s',
'duration.minutes': '{minutes}m {seconds}s',
'duration.hours': '{hours}h {minutes}m {seconds}s',
diff --git a/packages/client/ui-chat/src/client/performance-usage.ts b/packages/client/ui-chat/src/client/performance-usage.ts
new file mode 100644
index 0000000000..b724416c05
--- /dev/null
+++ b/packages/client/ui-chat/src/client/performance-usage.ts
@@ -0,0 +1,30 @@
+/** Performance detail preference with process-local choices on memory-only settings scopes. */
+import { createSnapshotStore } from '@deepseek-ai/dsh-client-store'
+import type { SettingsScope } from '@deepseek-ai/dsh-client-ui-settings/client'
+import { DEFAULT_PERFORMANCE_USAGE, type ChatSettings, type PerformanceUsageMode } from '../chat-settings.ts'
+
+/** Shared live preference for the settings row and chat statistics. */
+export class PerformanceUsagePolicy {
+ /** Current choice, reconciled with accepted Host settings when available. */
+ readonly mode = createSnapshotStore(DEFAULT_PERFORMANCE_USAGE)
+
+ /** @param host - Chat settings scope, durable on loopback and memory-only elsewhere. */
+ constructor(private readonly host: SettingsScope) {
+ const adopt = (): void => {
+ const accepted = host.getSnapshot().value?.performanceUsage
+ if (accepted !== undefined) this.mode.set(accepted)
+ }
+ host.subscribe(adopt)
+ adopt()
+ }
+
+ /**
+ * Publish a choice immediately and persist it when the scope supports writes.
+ * @param mode - Statistics detail selected by the user.
+ */
+ setMode(mode: PerformanceUsageMode): void {
+ if (mode === this.mode.getSnapshot()) return
+ this.mode.set(mode)
+ void this.host.set('performanceUsage', mode)
+ }
+}
diff --git a/packages/client/ui-chat/src/client/settings/PerformanceUsageRow.tsx b/packages/client/ui-chat/src/client/settings/PerformanceUsageRow.tsx
new file mode 100644
index 0000000000..db05aaebb9
--- /dev/null
+++ b/packages/client/ui-chat/src/client/settings/PerformanceUsageRow.tsx
@@ -0,0 +1,46 @@
+/** General Settings row for performance and usage detail. */
+
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import type { PerformanceUsageMode } from '../../chat-settings.ts'
+import type { PerformanceUsageInjected } from '../contract/slots.ts'
+import type { ChatKey } from '../locale.ts'
+import { PreferenceRow } from './PreferenceRow.tsx'
+
+/** Registration-side performance and usage preference face. */
+export interface PerformanceUsageRowInjected extends PerformanceUsageInjected {
+ /** Change the performance and usage detail. */
+ setPerformanceUsage: (mode: PerformanceUsageMode) => void
+}
+
+/** Full Settings-row props. */
+export type PerformanceUsageRowProps =
+ PropsRuntime<'settings.general.item'>
+ & PropsLocale<'chat'>
+ & InjectFace
+
+const OPTIONS: readonly { id: PerformanceUsageMode; label: ChatKey }[] = [
+ { id: 'compact', label: 'settings.performance.compact' },
+ { id: 'detailed', label: 'settings.performance.detailed' },
+]
+
+/**
+ * Render the performance and usage detail selector.
+ * @param props - composed Settings slot props.
+ * @returns the preference row.
+ */
+export function PerformanceUsageRow({ usePerformanceUsage, setPerformanceUsage, t }: PerformanceUsageRowProps) {
+ const mode = usePerformanceUsage(value => value)
+ const selectedLabel = mode === 'detailed'
+ ? 'settings.performance.detailed'
+ : 'settings.performance.compact'
+ return (
+ ({ id: option.id, label: t(option.label) }))}
+ onSelect={(value) => { setPerformanceUsage(value as PerformanceUsageMode) }}
+ />
+ )
+}
diff --git a/packages/client/ui-chat/src/client/settings/TranscriptViewRow.module.css b/packages/client/ui-chat/src/client/settings/PreferenceRow.module.css
similarity index 92%
rename from packages/client/ui-chat/src/client/settings/TranscriptViewRow.module.css
rename to packages/client/ui-chat/src/client/settings/PreferenceRow.module.css
index 1ab93f1d52..27e3a05ab7 100644
--- a/packages/client/ui-chat/src/client/settings/TranscriptViewRow.module.css
+++ b/packages/client/ui-chat/src/client/settings/PreferenceRow.module.css
@@ -1,4 +1,4 @@
-/* Completed-Turn transcript preference row: label plus selector pill. */
+/* Chat preference row: label plus selector pill. */
.row {
display: flex;
diff --git a/packages/client/ui-chat/src/client/settings/PreferenceRow.tsx b/packages/client/ui-chat/src/client/settings/PreferenceRow.tsx
new file mode 100644
index 0000000000..c5b216b455
--- /dev/null
+++ b/packages/client/ui-chat/src/client/settings/PreferenceRow.tsx
@@ -0,0 +1,56 @@
+/** Localized two-column selector shared by Chat preference rows. */
+import { useState } from 'react'
+import { IconChevronDownOutlineRegular, Menu } from '@deepseek-ai/dsh-client-ui-primitives'
+import css from './PreferenceRow.module.css'
+
+/**
+ * Render a preference label and its menu.
+ * @param props - localized copy, selected value, choices, and mutation callback.
+ * @returns the settings row.
+ */
+export function PreferenceRow({ title, description, value, selectedLabel, options, onSelect }: {
+ title: string
+ description: string
+ value: string
+ selectedLabel: string
+ options: readonly { id: string; label: string }[]
+ onSelect: (value: string) => void
+}) {
+ const [open, setOpen] = useState(false)
+ const closeMenu = () => { setOpen(false) }
+ const selectMode = (id: string) => {
+ closeMenu()
+ onSelect(id)
+ }
+ const selector = (
+
+ )
+
+ return (
+
+
+
{title}
+
{description}
+
+
+
-
-
{t('settings.transcript.title')}
-
{t('settings.transcript.description')}
-
-