@jingyi0605/codingns4dsh 0.2.1-beta.10 → 0.2.1-beta.12

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

@@ -1,14 +1,32 @@
-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 { useCliSessionTranslationEnabled } 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 } from '../shared/contracts/session-translation.js';
 /**
  * 把翻译状态和查看原文的入口放回对应消息块，不占用 AI 回复底部的统一操作栏。
  */
-function TranslationAction(props) {
-    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);
@@ -54,20 +72,45 @@ function TranslationAction(props) {
             window.removeEventListener('scroll', updatePosition, true);
         };
     }, [open, props.popupAlign]);
-    const record = props.record;
-    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',
@@ -88,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);
@@ -113,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 enabled = useCliSessionTranslationEnabled(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 && settings.value?.sessionTranslation?.inputEnabled !== false && 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',
@@ -164,8 +257,36 @@ 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 节点的结构渲染用户消息；翻译入口只在确实有记录时追加。 */
 function UserMessageNodeView(props) {
@@ -185,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',
@@ -198,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',
@@ -212,7 +338,7 @@ 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}`,
@@ -238,6 +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,
+        messageRole: 'user',
         services: props.services,
         translationT: props.translationT,
         popupAlign: 'end',
@@ -321,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 : [];
@@ -359,7 +486,8 @@ 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}`;
+    // 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) {
@@ -375,17 +503,14 @@ function AssistantTranslationNodeView(props) {
             const translationRecord = readRecord(block) ?? (hasTranslation && eventSnapshot !== undefined
                 ? findTranslationRecordForText(eventSnapshot, block.text, 'assistant', data.turn, data.step)
                 : undefined);
-            rendered.push(createElement('div', {
+            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 }), translationRecord === undefined ? null : createElement(TranslationAction, {
                 messageId: `${messageId}-text-${index}`,
+                sessionId: props.sessionId,
                 services: props.services,
                 translationT: props.translationT,
-                record: translationRecord,
-                inline: true,
-            })));
+                text: block.text, streaming, markdownLabels, mentions, pathImages, translationRecord,
+            }));
             continue;
         }
         if (block.kind === 'reasoning') {
@@ -395,6 +520,7 @@ function AssistantTranslationNodeView(props) {
             rendered.push(createElement(AssistantReasoningBlock, {
                 key: `reasoning-${index}`,
                 messageId: `${messageId}-reasoning-${index}`,
+                sessionId: props.sessionId,
                 services: props.services,
                 translationT: props.translationT,
                 chatT,
@@ -420,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') {
@@ -439,10 +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 { 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,
@@ -460,6 +594,7 @@ function AssistantReasoningBlock(props) {
         }, createElement(TextShimmer, { active: props.running, children: summary })),
     }, expanded ? createElement(AssistantReasoningContent, {
         messageId: props.messageId,
+        sessionId: props.sessionId,
         services: props.services,
         translationT: props.translationT,
         text: props.text,
@@ -483,15 +618,20 @@ function AssistantReasoningBlock(props) {
  * 工厂存在时才允许表现层覆盖。
  */
 export function AssistantReasoningContent(props) {
-    const markdown = createElement(MarkdownText, { text: props.text, streaming: props.running, labels: props.markdownLabels, fileMentions: props.mentions, pathImages: props.pathImages, variant: 'compact' });
+    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: props.text, running: props.running }, { fallback: 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 },
     }, content, props.translationRecord === undefined ? null : createElement(TranslationAction, {
         messageId: props.messageId,
+        sessionId: props.sessionId,
+        outputKind: 'reasoning',
+        messageRole: 'assistant',
         services: props.services,
         translationT: props.translationT,
         record: props.translationRecord,
@@ -528,29 +668,49 @@ function resolveMarkdownImagePath(value) {
 /**
  * 注册两个有实际翻译记录的消息渲染器；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',
+    const removePendingActions = slots.inject('conversation.input.left', () => slots.register({
+        name: 'conversation.input.left',
+        id: 'codingns-translation-pending',
         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',
-        inject: (sessionId) => ({ services, sessionId, translationT }),
-    }, AssistantTranslationNodeView));
+    }, PendingTranslationActions));
+    if (resolution?.status !== 'ready')
+        return () => { clearOutputTranslationRetries(services); removePendingActions(); removeStyles(); };
+    const presentation = resolution.value;
+    const removeRenderers = presentation.mount(() => {
+        const removeUserRenderer = slots.inject('conversation.chat.node', () => slots.register({
+            name: 'conversation.chat.node',
+            key: 'user',
+            priority: -100,
+            locale: 'chat',
+            inject: (sessionId) => ({ services, sessionId, translationT }),
+        }, props => UserMessageNodeView({ ...props, presentation })));
+        let removeAssistantRenderer;
+        try {
+            removeAssistantRenderer = slots.inject('conversation.chat.node', () => slots.register({
+                name: 'conversation.chat.node',
+                key: 'assistant-step',
+                priority: -100,
+                locale: 'chat',
+                inject: (sessionId) => ({ services, sessionId, translationT }),
+            }, props => AssistantTranslationNodeView({ ...props, presentation })));
+        }
+        catch (error) {
+            removeUserRenderer();
+            throw error;
+        }
+        return () => { removeAssistantRenderer(); removeUserRenderer(); };
+    });
     return () => {
-        removeAssistantRenderer();
-        removeUserRenderer();
+        clearOutputTranslationRetries(services);
+        removePendingActions();
+        removeRenderers();
         removeStyles();
     };
 }
@@ -564,6 +724,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}
   `;
@@ -594,7 +757,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;
@@ -647,6 +810,7 @@ function readRecord(value) {
         ...(candidate.alreadyTargetLanguage === true ? { alreadyTargetLanguage: true } : {}),
         ...(model === undefined ? {} : { model }),
         ...(candidate.failed === true ? { failed: true } : {}),
+        ...readSessionTranslationMetrics(candidate),
     };
 }
 function readModel(value) {
@@ -663,8 +827,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 {
@@ -675,6 +839,7 @@ function readInputRecord(value) {
         ...(candidate.alreadyTargetLanguage === true ? { alreadyTargetLanguage: true } : {}),
         ...(model === undefined ? {} : { model }),
         ...(candidate.failed === true ? { failed: true } : {}),
+        ...readSessionTranslationMetrics(candidate),
     };
 }
 function inputRecordForAction(record) {
@@ -687,6 +852,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) {