@jingyi0605/codingns4dsh 0.2.1-beta.9 → 0.2.1-rc.2

package/data/build/dist/client/session-translation-chat.js

@@ -1,25 +1,36 @@
-import { createElement, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createElement, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
-import { DisclosureRow, FileTypeIcon, IconCheckOutlineRegular, IconCopyOutlineRegular, IconThinkOutlineRegular, JsonBlock, MarkdownText, TextShimmer, fileExtension, fileSizeText, projectUserText, writeClipboard, } from '@deepseek-ai/dsh-client-ui-primitives';
+import { DisclosureRow, FileTypeIcon, IconCheckOutlineRegular, IconCopyOutlineRegular, IconThinkOutlineRegular, JsonBlock, MarkdownText, TextShimmer, fileExtension, fileSizeText, writeClipboard, } from '@deepseek-ai/dsh-client-ui-primitives';
+import * as messagePrimitives from '@deepseek-ai/dsh-client-ui-primitives';
+import { createDshCapabilityRegistry } from '../dsh-capabilities/routes.js';
 import { useDismissOnOutsidePointer } from './popup-dismiss.js';
 import { dshThemeColor } from './theme.js';
+import { TRANSLATION_GLYPH_PATHS, TRANSLATION_GLYPH_SIZE, TRANSLATION_PENDING_BADGE_STYLE, TRANSLATION_STATUS_BADGE_STYLE } from '../shared/translation-indicator.js';
 import { uiFontSize } from './font-scale.js';
+import { useCliSessionTranslationState } from './cli-slots.js';
+import { watchPendingTranslationTargets } from './session-translation-pending-dom.js';
+import { callCliRpc } from './cli-catalog.js';
+import { startSerialPolling } from './serial-polling.js';
+import { clearOutputTranslationRetries, useOutputTranslation } from './session-translation-retry.js';
+import { readSessionTranslationMetrics, resolveSessionTranslationOptions } from '../shared/contracts/session-translation.js';
 /**
  * 把翻译状态和查看原文的入口放回对应消息块，不占用 AI 回复底部的统一操作栏。
  */
-function TranslationAction(props) {
-    const source = props.record === undefined ? readEventSource(props.services, props.sessionId) : undefined;
-    const [, refresh] = useState(0);
-    const [open, setOpen] = useState(false);
+export function TranslationAction(props) {
+    const [open, setOpen] = useState(props.inputFailure !== undefined);
+    const output = useOutputTranslation({ ...props, record: props.inputFailure?.record ?? props.record });
+    const [deciding, setDeciding] = useState(false);
+    const decidingRef = useRef(false);
+    const [decisionError, setDecisionError] = useState(false);
+    useEffect(() => {
+        if (props.inputFailure !== undefined)
+            setOpen(true);
+        setDecisionError(false);
+    }, [props.inputFailure?.id]);
     const rootRef = useRef(null);
     const buttonRef = useRef(null);
     const popupRef = useRef(null);
     const [popupPosition, setPopupPosition] = useState(null);
-    useEffect(() => {
-        if (source === undefined)
-            return undefined;
-        return source.subscribe(() => refresh((value) => value + 1));
-    }, [source]);
     useDismissOnOutsidePointer(rootRef, open, () => setOpen(false), { portal: popupRef });
     useLayoutEffect(() => {
         if (!open || typeof window === 'undefined') {
@@ -61,24 +72,45 @@ function TranslationAction(props) {
             window.removeEventListener('scroll', updatePosition, true);
         };
     }, [open, props.popupAlign]);
-    const record = props.record ?? (source === undefined || props.lookupText === undefined
-        ? undefined
-        : findTranslationRecordForText(source.getSnapshot(), props.lookupText, props.outputKind, props.turn, props.step));
-    if (record === undefined)
-        return null;
-    const failed = record.failed === true;
-    const alreadyTargetLanguage = record.alreadyTargetLanguage === true;
-    const statusText = failed
-        ? props.translationT('translation.statusFailed')
-        : alreadyTargetLanguage
-            ? props.translationT('translation.statusNotNeeded')
-            : props.translationT('translation.statusTranslated');
-    const model = formatModel(record.model, props.translationT);
+    const record = output.record;
+    const inputFailure = props.inputFailure !== undefined;
+    const detailsTitle = props.translationT(inputFailure ? 'translation.inputFailedTitle' : 'translation.detailsTitle');
+    const pending = record === undefined || output.pending;
+    const failed = record?.failed === true;
+    const alreadyTargetLanguage = record?.alreadyTargetLanguage === true;
+    const statusText = pending
+        ? props.translationT('translation.statusTranslating')
+        : failed
+            ? props.translationT('translation.statusFailed')
+            : alreadyTargetLanguage
+                ? props.translationT('translation.statusNotNeeded')
+                : props.translationT('translation.statusTranslated');
+    const statusColor = pending ? dshThemeColor.accent : failed ? dshThemeColor.error : alreadyTargetLanguage ? dshThemeColor.accent : dshThemeColor.success;
     const detailsId = `codingns-translation-details-${safeDomId(props.messageId)}`;
+    const decide = async (choice) => {
+        if (props.inputFailure === undefined || decidingRef.current)
+            return;
+        decidingRef.current = true;
+        setDeciding(true);
+        setDecisionError(false);
+        try {
+            await callCliRpc(props.services.rpc, 'translation/resolve', {
+                sessionId: props.inputFailure.sessionId, id: props.inputFailure.id, choice,
+            }, AbortSignal.timeout(15_000));
+            props.onDecision?.();
+        }
+        catch {
+            setDecisionError(true);
+        }
+        finally {
+            decidingRef.current = false;
+            setDeciding(false);
+        }
+    };
     const details = open && popupPosition !== null ? createElement('div', {
         ref: popupRef,
         role: 'dialog',
-        'aria-label': props.translationT('translation.detailsTitle'),
+        'aria-label': detailsTitle,
         id: detailsId,
         style: {
             position: 'fixed',
@@ -99,7 +131,17 @@ function TranslationAction(props) {
             fontSize: uiFontSize(12),
             lineHeight: 1.45,
         },
-    }, createElement('div', { style: { display: 'flex', justifyContent: 'space-between', gap: 10, fontWeight: 600 } }, createElement('span', undefined, props.translationT('translation.detailsTitle')), createElement('span', { style: { color: failed ? dshThemeColor.error : alreadyTargetLanguage ? dshThemeColor.accent : dshThemeColor.success, fontWeight: 400 } }, statusText)), record.sourceLanguage === undefined ? null : createElement('div', { style: { marginTop: 8, color: dshThemeColor.labelSecondary } }, `${props.translationT('translation.detectedLanguage')}: ${props.translationT(`translation.language.${record.sourceLanguage}`)}`), createElement(DetailBlock, { label: props.translationT('translation.originalText'), value: record.original }), createElement(DetailBlock, { label: props.translationT('translation.translatedText'), value: record.translated }), createElement('div', { style: { marginTop: 8, color: dshThemeColor.labelSecondary } }, `${props.translationT('translation.modelUsed')}: ${alreadyTargetLanguage ? props.translationT('translation.modelNotUsed') : model}`)) : null;
+    }, createElement('div', { style: { display: 'flex', justifyContent: 'space-between', gap: 10, fontWeight: 600 } }, createElement('span', undefined, detailsTitle), inputFailure ? null : createElement('span', { role: 'status', 'aria-live': 'polite', style: { color: statusColor, fontWeight: 400 } }, statusText)), inputFailure || record?.sourceLanguage === undefined ? null : createElement('div', { style: { marginTop: 8, color: dshThemeColor.labelSecondary } }, `${props.translationT('translation.detectedLanguage')}: ${props.translationT(`translation.language.${record.sourceLanguage}`)}`), inputFailure ? null : createElement(DetailBlock, { kind: 'original', translationT: props.translationT, value: record?.original ?? props.original ?? '' }), pending ? createElement('progress', { 'aria-label': statusText, style: { display: 'block', width: '100%', height: 4, marginTop: 8, accentColor: dshThemeColor.accent } }) : null, pending
+        ? createElement('div', { role: 'status', 'aria-live': 'polite', style: { marginTop: 8, color: dshThemeColor.labelSecondary } }, props.translationT('translation.progressHelp'))
+        : props.inputFailure !== undefined ? null : createElement(DetailBlock, { kind: props.messageRole === 'user' ? 'sent' : 'translated', translationT: props.translationT, value: record.translated }), pending || inputFailure ? null : createElement('div', { style: { marginTop: 8, color: dshThemeColor.labelSecondary } }, [
+        `${props.translationT('translation.modelUsed')}: ${alreadyTargetLanguage ? props.translationT('translation.modelNotUsed') : formatModel(record.model, props.translationT)}`,
+        ...(record.durationMs === undefined ? [] : [`${(record.durationMs / 1000).toFixed(2)} s`]),
+        ...(record.totalTokens === undefined ? [] : [`${record.totalTokens} tok`]),
+    ].join(' · ')), props.inputFailure === undefined ? null : createElement('p', { role: 'alert' }, props.translationT('translation.inputFailedHelp')), decisionError ? createElement('p', { role: 'alert', style: { color: dshThemeColor.error } }, props.translationT('translation.decisionFailed')) : null, props.inputFailure !== undefined ? createElement('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 10 } }, ...['retry', 'send', 'cancel'].map(choice => createElement('button', {
+        key: choice, type: 'button', disabled: deciding, onClick: () => { void decide(choice); }, style: recoveryButtonStyle,
+    }, props.translationT(choice === 'retry' ? 'translation.retry' : choice === 'send' ? 'translation.sendDirectly' : 'translation.cancelSending')))) : output.retry === undefined ? null : createElement('button', {
+        type: 'button', disabled: pending, onClick: () => { void output.retry?.(); }, style: { ...recoveryButtonStyle, marginTop: 10 },
+    }, props.translationT('translation.retry'))) : null;
     const renderedDetails = details === null
         ? null
         : typeof document === 'undefined' ? details : createPortal(details, document.body);
@@ -124,38 +166,78 @@ function TranslationAction(props) {
         style: translationButtonStyle,
     }, createElement(TranslationGlyph), createElement('span', {
         'aria-hidden': true,
+        'data-codingns-translation-pending': pending || undefined,
         style: {
-            position: 'absolute',
-            top: 1,
-            right: 1,
-            display: 'grid',
-            placeItems: 'center',
-            width: 10,
-            height: 10,
-            zIndex: 1,
-            boxSizing: 'border-box',
-            border: '1.5px solid var(--dsw-alias-bg-base, Canvas)',
-            borderRadius: '50%',
-            color: '#fff',
-            background: failed ? dshThemeColor.error : alreadyTargetLanguage ? dshThemeColor.accent : dshThemeColor.success,
-            fontSize: 6,
-            fontWeight: 700,
-            lineHeight: 1,
+            ...TRANSLATION_STATUS_BADGE_STYLE,
+            ...(pending ? TRANSLATION_PENDING_BADGE_STYLE : { background: statusColor }),
         },
-    }, failed ? '!' : '✓')), renderedDetails);
+    }, pending ? null : failed ? '!' : '✓')), renderedDetails);
+}
+const recoveryButtonStyle = {
+    padding: '5px 10px', borderRadius: 6, border: `1px solid ${dshThemeColor.border}`,
+    background: dshThemeColor.surfaceSubtle, color: dshThemeColor.labelPrimary, cursor: 'pointer', font: 'inherit',
+};
+function PendingTranslationActions(props) {
+    const anchorRef = useRef(null);
+    const [targets, setTargets] = useState([]);
+    const [failures, setFailures] = useState([]);
+    const pollingRef = useRef();
+    const { adapterId, enabled } = useCliSessionTranslationState(props.sessionId, props.services.rpc);
+    const store = props.services.settings;
+    const settings = useSyncExternalStore(store.subscribe.bind(store), store.getSnapshot.bind(store), store.getSnapshot.bind(store));
+    const subagent = props.useSession?.((state) => state.subagent);
+    const eligible = enabled && resolveSessionTranslationOptions(settings.value?.sessionTranslation, adapterId).inputEnabled && subagent == null && !props.sessionId?.startsWith('codingns-assistant-');
+    useEffect(() => {
+        setFailures([]);
+        if (!eligible || props.sessionId === undefined)
+            return;
+        const polling = startSerialPolling(async (signal) => {
+            const next = await callCliRpc(props.services.rpc, 'translation/pending', { sessionId: props.sessionId }, signal);
+            if (!signal.aborted && Array.isArray(next))
+                setFailures(current => JSON.stringify(current) === JSON.stringify(next) ? current : next);
+        }, 750);
+        pollingRef.current = polling;
+        return () => { polling.dispose(); pollingRef.current = undefined; };
+    }, [eligible, props.sessionId, props.services.rpc]);
+    useLayoutEffect(() => {
+        setTargets([]);
+        if (!eligible || anchorRef.current === null)
+            return undefined;
+        return watchPendingTranslationTargets(anchorRef.current, setTargets);
+    }, [eligible, props.sessionId]);
+    const remaining = [...failures];
+    const actions = targets.map(target => {
+        const index = remaining.findIndex(failure => normalizePendingText(failure.record.original) === normalizePendingText(target.original));
+        const failure = index < 0 ? undefined : remaining.splice(index, 1)[0];
+        return createPortal(createElement(PendingTranslationAction, {
+            services: props.services,
+            translationT: props.translationT,
+            original: target.original,
+            inputFailure: failure,
+            onDecision: () => { void pollingRef.current?.refresh({ afterPending: true }); },
+        }), target.container, String(target.key));
+    });
+    return createElement('span', { ref: anchorRef, style: { display: 'contents' } }, ...actions, ...remaining.map(failure => createElement('span', { key: failure.id, style: { display: 'inline-flex', alignItems: 'center', gap: 8, maxWidth: '100%' } }, createElement('span', { style: { maxWidth: 240, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, failure.record.original), createElement(PendingTranslationAction, { services: props.services, translationT: props.translationT,
+        original: failure.record.original, inputFailure: failure,
+        onDecision: () => { void pollingRef.current?.refresh({ afterPending: true }); } }))));
+}
+function normalizePendingText(value) { return value.replace(/\s+/gu, ' ').trim(); }
+function PendingTranslationAction(props) {
+    const id = useId();
+    return createElement(TranslationAction, { ...props, messageId: `pending-${id}`, messageRole: 'user', popupAlign: 'end' });
 }
 function TranslationGlyph() {
     return createElement('svg', {
         viewBox: '0 0 24 24',
-        width: 16,
-        height: 16,
+        width: TRANSLATION_GLYPH_SIZE,
+        height: TRANSLATION_GLYPH_SIZE,
         fill: 'none',
         stroke: 'currentColor',
         strokeWidth: 1.5,
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         'aria-hidden': true,
-    }, createElement('path', { d: 'M3.5 5.5h10M8.5 3.5v2M12.5 5.5c0 4.4-3.3 7.2-8 9' }), createElement('path', { d: 'M5.5 8.5c1.4 2 3.4 3.7 6 4.8M14.5 19.5l3-8 3 8M15.7 17h3.6' }));
+    }, ...TRANSLATION_GLYPH_PATHS.map(d => createElement('path', { key: d, d })));
 }
 const messageActionButtonStyle = {
     position: 'relative',
@@ -175,18 +257,45 @@ const translationButtonStyle = {
     ...messageActionButtonStyle,
     transition: 'background-color 100ms ease, color 100ms ease',
 };
-function DetailBlock({ label, value }) {
-    return createElement('div', { style: { marginTop: 8 } }, createElement('div', { style: { marginBottom: 3, color: dshThemeColor.labelSecondary, fontWeight: 600 } }, label), createElement('pre', { style: { margin: 0, whiteSpace: 'pre-wrap', overflowWrap: 'anywhere', fontFamily: 'inherit' } }, value));
+const translationDetailTypes = {
+    original: { labelKey: 'translation.originalText', color: dshThemeColor.labelSecondary },
+    translated: { labelKey: 'translation.translatedText', color: dshThemeColor.accent },
+    sent: { labelKey: 'translation.actualSentText', color: dshThemeColor.success },
+};
+function DetailBlock({ kind, translationT, value }) {
+    const { labelKey, color } = translationDetailTypes[kind];
+    return createElement('div', { style: { marginTop: 8 } }, createElement('div', {
+        style: {
+            display: 'inline-block',
+            maxWidth: '100%',
+            boxSizing: 'border-box',
+            marginBottom: 6,
+            padding: '2px 8px',
+            border: `1px solid color-mix(in srgb, ${color} 30%, transparent)`,
+            borderRadius: 'var(--dsw-radius-sm, 6px)',
+            color,
+            background: `color-mix(in srgb, ${color} 12%, transparent)`,
+            fontWeight: 600,
+            overflowWrap: 'anywhere',
+        },
+    }, translationT(labelKey)), createElement('pre', {
+        style: {
+            margin: 0,
+            color: `color-mix(in srgb, ${color} 45%, ${dshThemeColor.labelPrimary})`,
+            whiteSpace: 'pre-wrap',
+            overflowWrap: 'anywhere',
+            fontFamily: 'inherit',
+        },
+    }, value));
 }
-/** 按原生 user 节点的结构渲染用户消息，并把翻译按钮放在复制按钮前。 */
+/** 按原生 user 节点的结构渲染用户消息；翻译入口只在确实有记录时追加。 */
 function UserMessageNodeView(props) {
     const data = props.node.data;
     const parts = splitUserContent(data.content);
     const record = readInputRecord({ source: data.source });
-    // DSH 自带消息保持原样；只接管确实带有 CodingNS 翻译记录的用户消息。
-    if (record === undefined)
-        return null;
-    const translationRecord = inputRecordForAction(record);
+    // 这个渲染器以更低优先级遮蔽了 DSH 原生 user 渲染器，因此无论有没有翻译记录
+    // 都必须画出消息本身：返回 null 会让整条用户消息从对话里消失。
+    const translationRecord = record === undefined ? undefined : inputRecordForAction(record);
     const labels = Array.isArray(data.referenceLabels) ? data.referenceLabels.filter((label) => typeof label === 'string') : [];
     const skillNames = Array.isArray(data.skillNames) ? data.skillNames.filter((name) => typeof name === 'string') : [];
     const showBubble = parts.text !== '' || parts.rest.length > 0;
@@ -197,7 +306,12 @@ function UserMessageNodeView(props) {
     return createElement('div', {
         'data-chat-flow-kind': 'user',
         style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 },
-    }, createElement('div', {
+    }, props.presentation.kind === 'factory' ? props.presentation.userContent(props, {
+        text: parts.text,
+        attachments: parts.attachments.map(item => item.type === 'image' ? { type: 'image', image: { attachment: item.attachment } } : item),
+        extraBlocks: parts.rest,
+        referenceLabels: labels,
+    }, { sessionLabels: labels, skillNames }) : createElement('div', {
         style: {
             display: 'flex',
             flexDirection: 'column',
@@ -210,7 +324,7 @@ function UserMessageNodeView(props) {
         'data-message-attachments': true,
         style: { display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-end', gap: 8, maxWidth: '100%' },
     }, ...parts.attachments.map((attachment, index) => attachment.type === 'image'
-        ? createElement('div', { key: `image-${index}` }, props.renderMessageImages({ images: [{ attachment: attachment.attachment }], align: 'end', compact: compactImages }))
+        ? createElement('div', { key: `image-${index}` }, props.presentation.images(props, { images: [{ attachment: attachment.attachment }], align: 'end', compact: compactImages }))
         : createFileAttachment(attachment.file, index))) : null, showBubble ? createElement('div', {
         style: {
             boxSizing: 'border-box',
@@ -224,14 +338,20 @@ function UserMessageNodeView(props) {
             whiteSpace: 'pre-wrap',
             wordBreak: 'break-word',
         },
-    }, projectUserText(parts.text, labels, skillNames, 'skill', typeof props.openFile === 'function' && typeof props.openSkill === 'function'
+    }, props.presentation.projectText(parts.text, labels, skillNames, 'skill', typeof props.openFile === 'function' && typeof props.openSkill === 'function'
         ? { openFile: props.openFile, openSkill: props.openSkill }
         : undefined), ...parts.rest.map((block, index) => createElement(JsonBlock, {
         key: `extra-${index}`,
         label: chatT('message.extraBlock'),
         payload: block,
         truncatedLabel: (total) => chatT('json.truncated', { total }),
-    }))) : null), createElement('div', {
+    }))) : null, labels.length === 0 ? null : createElement('div', {
+        style: {
+            color: dshThemeColor.labelTertiary,
+            fontSize: 'var(--dsh-content-font-size-secondary, 13px)',
+            lineHeight: 'calc(18px + var(--dsh-content-font-delta-secondary, 0px))',
+        },
+    }, chatT('message.referenceSummary', { labels: labels.join(chatT('message.referenceSeparator')) }))), createElement('div', {
         style: {
             display: 'flex',
             alignItems: 'center',
@@ -244,7 +364,7 @@ function UserMessageNodeView(props) {
         style: { paddingRight: 12, color: dshThemeColor.labelTertiary, fontSize: 'var(--dsh-content-font-size-secondary, 13px)', whiteSpace: 'nowrap' },
     }, formatMessageTime(data.time)) : null, translationRecord === undefined ? null : createElement(TranslationAction, {
         messageId,
-        sessionId: props.sessionId,
+        messageRole: 'user',
         services: props.services,
         translationT: props.translationT,
         popupAlign: 'end',
@@ -328,7 +448,7 @@ function formatMessageTime(time) {
         : { ...(date.getFullYear() === now.getFullYear() ? {} : { year: 'numeric' }), month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' };
     return new Intl.DateTimeFormat(undefined, options).format(date);
 }
-/** DSH assistant-step renderer: keep each translated text/reasoning block's source action adjacent to that block. */
+/** DSH assistant-step renderer: keep each translation action adjacent to its source block. */
 function AssistantTranslationNodeView(props) {
     const data = props.node.data;
     const blocks = Array.isArray(data.blocks) ? data.blocks : [];
@@ -336,8 +456,13 @@ function AssistantTranslationNodeView(props) {
     const chatT = props.t;
     const markdownLabels = useMemo(() => createMarkdownLabels(chatT), [chatT]);
     const pathImages = useMemo(() => ({ resolve: resolveMarkdownImagePath }), []);
-    const eventSnapshot = readEventSource(props.services, props.sessionId)?.getSnapshot();
-    const hasTranslation = blocks.some((block) => {
+    // 与 DSH 原生 AssistantMarkdown 相同的可见性判据：只有「运行中 / 被中断 / 含正文块」
+    // 才渲染内容。这个渲染器遮蔽了原生 assistant-step 渲染器，若在这里因为缺少翻译
+    // 记录而返回 null，整段 AI 正文就会从对话里消失。
+    const renderable = streaming || data.status === 'interrupted' || blocks.some((block) => block.kind !== 'tool-call');
+    // 只有确实需要渲染时才读取事件流：没有翻译的普通会话不再订阅 Session 事件。
+    const eventSnapshot = renderable ? readEventSource(props.services, props.sessionId)?.getSnapshot() : undefined;
+    const hasTranslation = renderable && blocks.some((block) => {
         if (block.kind !== 'reasoning' && block.kind !== 'text')
             return false;
         const outputKind = block.kind === 'reasoning' ? 'reasoning' : 'assistant';
@@ -361,8 +486,9 @@ function AssistantTranslationNodeView(props) {
         && turnProcess.open !== true;
     const rendered = [];
     const last = blocks.length - 1;
-    const messageId = typeof finalNode?.messageId === 'string' ? finalNode.messageId : `turn-${data.turn}-step-${data.step}`;
-    if (!hasTranslation || !(streaming || data.status === 'interrupted' || blocks.some((block) => block.kind !== 'tool-call')))
+    // Keep retries attached when a running step receives its final history node.
+    const messageId = `turn-${data.turn}-step-${data.step}`;
+    if (!renderable)
         return null;
     for (let index = 0; index < blocks.length; index += 1) {
         const block = blocks[index];
@@ -374,26 +500,23 @@ function AssistantTranslationNodeView(props) {
             continue;
         const running = streaming && index === last;
         if (block.kind === 'text') {
-            const translationRecord = readRecord(block);
-            rendered.push(createElement('div', {
+            const translationRecord = readRecord(block) ?? (hasTranslation && eventSnapshot !== undefined
+                ? findTranslationRecordForText(eventSnapshot, block.text, 'assistant', data.turn, data.step)
+                : undefined);
+            rendered.push(createElement(AssistantTextContent, {
                 key: `text-${index}`,
-                'data-codingns-translation-inline': true,
-                style: { minWidth: 0 },
-            }, createElement(MarkdownText, { text: block.text, streaming, labels: markdownLabels, fileMentions: mentions, pathImages }), createElement(TranslationAction, {
                 messageId: `${messageId}-text-${index}`,
                 sessionId: props.sessionId,
                 services: props.services,
                 translationT: props.translationT,
-                lookupText: block.text,
-                outputKind: 'assistant',
-                turn: data.turn,
-                step: data.step,
-                inline: true,
-                ...(translationRecord === undefined ? {} : { record: translationRecord }),
-            })));
+                text: block.text, streaming, markdownLabels, mentions, pathImages, translationRecord,
+            }));
             continue;
         }
         if (block.kind === 'reasoning') {
+            const translationRecord = readRecord(block) ?? (hasTranslation && eventSnapshot !== undefined
+                ? findTranslationRecordForText(eventSnapshot, block.text, 'reasoning', data.turn, data.step)
+                : undefined);
             rendered.push(createElement(AssistantReasoningBlock, {
                 key: `reasoning-${index}`,
                 messageId: `${messageId}-reasoning-${index}`,
@@ -402,8 +525,7 @@ function AssistantTranslationNodeView(props) {
                 translationT: props.translationT,
                 chatT,
                 text: block.text,
-                turn: data.turn,
-                step: data.step,
+                ...(translationRecord === undefined ? {} : { translationRecord }),
                 running,
                 hidden: reasoningHidden,
                 reveal: () => turnProcess?.setOpen?.(true),
@@ -424,7 +546,7 @@ function AssistantTranslationNodeView(props) {
                 imageGroup.push(next);
                 index += 1;
             }
-            rendered.push(createElement('div', { key: `images-${index}`, style: { alignSelf: 'flex-start' } }, props.renderMessageImages({ images: imageGroup.map((image) => ({ attachment: image.attachment })), align: 'start' })));
+            rendered.push(createElement('div', { key: `images-${index}`, style: { alignSelf: 'flex-start' } }, props.presentation.images(props, { images: imageGroup.map((image) => ({ attachment: image.attachment })), align: 'start' })));
             continue;
         }
         if (block.kind === 'other') {
@@ -443,13 +565,18 @@ function AssistantTranslationNodeView(props) {
         style: { alignSelf: 'flex-start', padding: '0 6px', borderRadius: 'var(--dsw-radius-sm, 4px)', color: dshThemeColor.labelTertiary, background: dshThemeColor.surfaceSubtle, fontSize: 11, lineHeight: '18px' },
     }, chatT('message.stopped')) : null);
 }
+function AssistantTextContent(props) {
+    const { record } = useOutputTranslation({ ...props, outputKind: 'assistant', record: props.translationRecord });
+    return createElement('div', { 'data-codingns-translation-inline': true, style: { minWidth: 0 } }, createElement(MarkdownText, { text: record?.translated ?? props.text, streaming: props.streaming, labels: props.markdownLabels, fileMentions: props.mentions, pathImages: props.pathImages }), record === undefined ? null : createElement(TranslationAction, { messageId: props.messageId, sessionId: props.sessionId,
+        messageRole: 'assistant', outputKind: 'assistant', services: props.services, translationT: props.translationT,
+        record: props.translationRecord, inline: true }));
+}
 function AssistantReasoningBlock(props) {
     const [expanded, setExpanded] = useState(false);
     const groupRef = props.useGroupAction?.(props.hidden, props.reveal);
-    const summary = props.text.split('\n').map((line) => line.replace(/[`*_#>]/gu, '').trim()).find(Boolean) ?? '';
-    const markdown = props.renderFactorySlot === undefined
-        ? createElement(MarkdownText, { text: props.text, streaming: props.running, labels: props.markdownLabels, fileMentions: props.mentions, pathImages: props.pathImages, variant: 'compact' })
-        : props.renderFactorySlot('conversation.chat.reasoning.content', { text: props.text, running: props.running });
+    const { record } = useOutputTranslation({ ...props, outputKind: 'reasoning', record: props.translationRecord });
+    const displayText = record?.translated ?? props.text;
+    const summary = displayText.split('\n').map((line) => line.replace(/[`*_#>]/gu, '').trim()).find(Boolean) ?? '';
     return createElement('div', {
         ref: groupRef,
         hidden: props.hidden,
@@ -465,20 +592,51 @@ function AssistantReasoningBlock(props) {
         collapsedContent: createElement('span', {
             style: { minWidth: 0, overflow: 'hidden', color: dshThemeColor.labelSecondary, fontSize: 'var(--dsh-content-font-size-secondary, 13px)', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
         }, createElement(TextShimmer, { active: props.running, children: summary })),
-    }, expanded ? createElement('div', {
+    }, expanded ? createElement(AssistantReasoningContent, {
+        messageId: props.messageId,
+        sessionId: props.sessionId,
+        services: props.services,
+        translationT: props.translationT,
+        text: props.text,
+        running: props.running,
+        ...(props.translationRecord === undefined ? {} : { translationRecord: props.translationRecord }),
+        markdownLabels: props.markdownLabels,
+        pathImages: props.pathImages,
+        mentions: props.mentions,
+        ...(props.renderFactorySlot === undefined ? {} : { renderFactorySlot: props.renderFactorySlot }),
+    }) : null));
+}
+/**
+ * 思考块展开后的正文。
+ *
+ * DSH 原生 `ReasoningRow` 直接渲染 `MarkdownText`，运行时**没有**注册
+ * `conversation.chat.reasoning.content` 工厂（`conversation.chat.*` 只有
+ * `node` / `assistant-actions` / `commandview` / `turnTail`）。而 `renderFactorySlot`
+ * 在工厂缺失时只渲染 `fallback`，缺省为 `null`——此前这里既不传 fallback，
+ * 又把正文完全交给该工厂，于是展开思考后只剩翻译入口，译文一行都看不到。
+ * 因此原生 MarkdownText 必须作为 fallback 传进去：没有工厂时按原生方式渲染，
+ * 工厂存在时才允许表现层覆盖。
+ */
+export function AssistantReasoningContent(props) {
+    const { record } = useOutputTranslation({ ...props, outputKind: 'reasoning', record: props.translationRecord });
+    const displayText = record?.translated ?? props.text;
+    const markdown = createElement(MarkdownText, { text: displayText, streaming: props.running, labels: props.markdownLabels, fileMentions: props.mentions, pathImages: props.pathImages, variant: 'compact' });
+    const content = props.renderFactorySlot === undefined
+        ? markdown
+        : props.renderFactorySlot('conversation.chat.reasoning.content', { text: displayText, running: props.running }, { fallback: markdown });
+    return createElement('div', {
         'data-codingns-translation-inline': true,
         style: { paddingTop: 8 },
-    }, markdown, createElement(TranslationAction, {
+    }, content, props.translationRecord === undefined ? null : createElement(TranslationAction, {
         messageId: props.messageId,
         sessionId: props.sessionId,
+        outputKind: 'reasoning',
+        messageRole: 'assistant',
         services: props.services,
         translationT: props.translationT,
-        lookupText: props.text,
-        outputKind: 'reasoning',
-        ...(props.turn === undefined ? {} : { turn: props.turn }),
-        ...(props.step === undefined ? {} : { step: props.step }),
+        record: props.translationRecord,
         inline: true,
-    })) : null));
+    }));
 }
 function createMarkdownLabels(chatT) {
     return {
@@ -508,31 +666,55 @@ function resolveMarkdownImagePath(value) {
     }
 }
 /**
- * 注册两个有实际翻译记录的消息渲染器；DSH 的用户气泡内容仍由统一主题令牌控制。
+ * 注册用户消息（含插话）与 AI 正文的翻译渲染器；DSH 的用户气泡内容仍由统一主题令牌控制。
  */
-export function registerSessionTranslationChatUi(services) {
+export function registerSessionTranslationChatUi(services, facts = { primitives: messagePrimitives }) {
+    const resolution = createDshCapabilityRegistry(services.dshVersion, 'client', services, facts).getProfile(services).capabilities.get('conversation.message-presentation');
     const slots = services.slots;
     if (slots?.inject === undefined || slots.register === undefined)
         return () => undefined;
     const removeStyles = installSessionTranslationChatStyles();
     const translationT = services.locale.bind('codingns');
-    const removeUserRenderer = slots.inject('conversation.chat.node', () => slots.register({
-        name: 'conversation.chat.node',
-        key: 'user',
-        priority: -100,
-        locale: 'chat',
-        inject: (sessionId) => ({ services, sessionId, translationT }),
-    }, UserMessageNodeView));
-    const removeAssistantRenderer = slots.inject('conversation.chat.node', () => slots.register({
-        name: 'conversation.chat.node',
-        key: 'assistant-step',
-        priority: -100,
-        locale: 'chat',
+    const removePendingActions = slots.inject('conversation.input.left', () => slots.register({
+        name: 'conversation.input.left',
+        id: 'codingns-translation-pending',
         inject: (sessionId) => ({ services, sessionId, translationT }),
-    }, AssistantTranslationNodeView));
+    }, PendingTranslationActions));
+    if (resolution?.status !== 'ready')
+        return () => { clearOutputTranslationRetries(services); removePendingActions(); removeStyles(); };
+    const presentation = resolution.value;
+    const removeRenderers = presentation.mount(() => {
+        // DSH 把运行中被当前 turn 接收的插话投影为 steering 节点，并用同一个用户气泡
+        // 渲染；只遮蔽 user 会让插话的翻译记录不显示，看起来像未经翻译就发送。
+        const renderers = [
+            ['user', props => UserMessageNodeView({ ...props, presentation })],
+            ['steering', props => UserMessageNodeView({ ...props, presentation })],
+            ['assistant-step', props => AssistantTranslationNodeView({ ...props, presentation })],
+        ];
+        const removers = [];
+        try {
+            for (const [key, component] of renderers) {
+                removers.push(slots.inject('conversation.chat.node', () => slots.register({
+                    name: 'conversation.chat.node',
+                    key,
+                    priority: -100,
+                    locale: 'chat',
+                    inject: (sessionId) => ({ services, sessionId, translationT }),
+                }, component)));
+            }
+        }
+        catch (error) {
+            for (const remove of removers.reverse())
+                remove();
+            throw error;
+        }
+        return () => { for (const remove of [...removers].reverse())
+            remove(); };
+    });
     return () => {
-        removeAssistantRenderer();
-        removeUserRenderer();
+        clearOutputTranslationRetries(services);
+        removePendingActions();
+        removeRenderers();
         removeStyles();
     };
 }
@@ -546,6 +728,9 @@ function installSessionTranslationChatStyles() {
     style.dataset.plugin = 'codingns4dsh';
     style.dataset.pluginCss = styleId;
     style.textContent = `
+    @keyframes codingns-translation-spin{to{transform:rotate(360deg)}}
+    [data-codingns-translation-pending]{animation:codingns-translation-spin .8s linear infinite}
+    @media(prefers-reduced-motion:reduce){[data-codingns-translation-pending]{animation-duration:1.6s}}
     [data-codingns-translation-inline] > div:not([data-codingns-translation-action]){display:contents}
     [data-codingns-translation-inline] > div:not([data-codingns-translation-action]) > p:last-child{display:inline;margin:0}
   `;
@@ -576,7 +761,7 @@ function findTranslationRecordForText(snapshot, text, outputKind, turn, step) {
         collectRecordCandidates(event.data, candidates, new Set());
         for (const candidate of candidates) {
             const record = readRecord(candidate);
-            if (record === undefined || record.translated !== text)
+            if (record === undefined || record.original !== text && record.translated !== text)
                 continue;
             if (outputKind !== undefined && record.outputKind !== undefined && record.outputKind !== outputKind)
                 continue;
@@ -629,6 +814,7 @@ function readRecord(value) {
         ...(candidate.alreadyTargetLanguage === true ? { alreadyTargetLanguage: true } : {}),
         ...(model === undefined ? {} : { model }),
         ...(candidate.failed === true ? { failed: true } : {}),
+        ...readSessionTranslationMetrics(candidate),
     };
 }
 function readModel(value) {
@@ -645,8 +831,8 @@ function readInputRecord(value) {
         return undefined;
     if (typeof candidate.original !== 'string' || typeof candidate.translated !== 'string')
         return undefined;
-    const targetLanguage = candidate.targetLanguage;
-    if (targetLanguage !== 'en' && targetLanguage !== 'fr' && targetLanguage !== 'de' && targetLanguage !== 'ja')
+    const targetLanguage = readLanguage(candidate.targetLanguage);
+    if (targetLanguage === undefined)
         return undefined;
     const model = readModel(candidate.model);
     return {
@@ -657,6 +843,7 @@ function readInputRecord(value) {
         ...(candidate.alreadyTargetLanguage === true ? { alreadyTargetLanguage: true } : {}),
         ...(model === undefined ? {} : { model }),
         ...(candidate.failed === true ? { failed: true } : {}),
+        ...readSessionTranslationMetrics(candidate),
     };
 }
 function inputRecordForAction(record) {
@@ -669,6 +856,7 @@ function inputRecordForAction(record) {
         ...(record.alreadyTargetLanguage === true ? { alreadyTargetLanguage: true } : {}),
         ...(record.model === undefined ? {} : { model: record.model }),
         ...(record.failed === true ? { failed: true } : {}),
+        ...readSessionTranslationMetrics(record),
     };
 }
 function readLanguage(value) {