@seed-ship/mcp-ui-solid 6.19.1 → 6.21.0

package/src/adapters/index.ts

@@ -14,13 +14,23 @@
  * ```
  */
 
-export { connectorResultToUILayout, connectorActionsToActionGroup } from './connector';
+export {
+  connectorResultToUILayout,
+  connectorActionsToActionGroup,
+  DEFAULT_CONNECTOR_MESSAGES,
+} from './connector';
 export type {
   ConnectorResultToUILayoutOptions,
   ConnectorActionsToActionGroupOptions,
+  ConnectorAdapterMessages,
 } from './connector';
 
-export { macroRunToScratchpadState, macroInterrogationToChatPromptConfig } from './macro-run';
+export {
+  macroRunToScratchpadState,
+  macroInterrogationToChatPromptConfig,
+  DEFAULT_MACRO_RUN_MESSAGES,
+} from './macro-run';
+export type { MacroRunAdapterMessages, MacroRunAdapterOptions } from './macro-run';
 
 export {
   createComparisonLayout,

package/src/adapters/macro-run.ts

@@ -174,7 +174,59 @@ function resultSectionType(componentType: unknown): ScratchpadSection['type'] {
   }
 }
 
-function buildError(run: MacroRunV1): ScratchpadState['error'] | undefined {
+/**
+ * The English wording this adapter produces on its own — section titles and
+ * the fallbacks used when the run (or the interrogation) carries none.
+ *
+ * The adapter is runtime-free by contract: no `solid-js`, no
+ * `MCPUIStringsContext`. Hosts that render in another language pass a
+ * partial override through `MacroRunAdapterOptions.messages`, exactly like
+ * `ConnectorResultToUILayoutOptions.messages`.
+ *
+ * @since v6.20.0
+ */
+export interface MacroRunAdapterMessages {
+  /** Title of the always-present `agent_card` section. */
+  agentSectionTitle: string;
+  /** Title of the `stepper` / `split_stepper` section. */
+  progressSectionTitle: string;
+  /** Title of each result section. */
+  resultSectionTitle: string;
+  /** Error message of an aborted run that carries no `error`. */
+  runAborted: string;
+  /** Error message of a failed run that carries no `error`. */
+  runFailed: string;
+  /** Prompt body of an elicitation with no usable schema and no message. */
+  confirmDefault: string;
+}
+
+/** English defaults for {@link MacroRunAdapterMessages}. */
+export const DEFAULT_MACRO_RUN_MESSAGES: MacroRunAdapterMessages = {
+  agentSectionTitle: 'Agent',
+  progressSectionTitle: 'Progress',
+  resultSectionTitle: 'Result',
+  runAborted: 'Macro run aborted.',
+  runFailed: 'Macro run failed.',
+  confirmDefault: 'Please confirm to continue.',
+};
+
+/** Options shared by the MacroRun adapters. @since v6.20.0 */
+export interface MacroRunAdapterOptions {
+  /**
+   * Partial override of the adapter's own wording, merged over
+   * {@link DEFAULT_MACRO_RUN_MESSAGES}.
+   */
+  messages?: Partial<MacroRunAdapterMessages>;
+}
+
+const withMessages = (
+  options: MacroRunAdapterOptions = {}
+): MacroRunAdapterMessages => ({ ...DEFAULT_MACRO_RUN_MESSAGES, ...options.messages });
+
+function buildError(
+  run: MacroRunV1,
+  messages: MacroRunAdapterMessages
+): ScratchpadState['error'] | undefined {
   if (run.status !== 'failed' && run.status !== 'aborted') return undefined;
   const aborted = run.status === 'aborted';
   if (run.error) {
@@ -187,7 +239,7 @@ function buildError(run: MacroRunV1): ScratchpadState['error'] | undefined {
     return err;
   }
   return {
-    message: aborted ? 'Macro run aborted.' : 'Macro run failed.',
+    message: aborted ? messages.runAborted : messages.runFailed,
     retryable: false,
   };
 }
@@ -209,13 +261,17 @@ function buildError(run: MacroRunV1): ScratchpadState['error'] | undefined {
  *
  * Pure: no fetch, no SSE, no persistence. The host owns all wiring.
  */
-export function macroRunToScratchpadState(run: MacroRunV1): ScratchpadState {
+export function macroRunToScratchpadState(
+  run: MacroRunV1,
+  options: MacroRunAdapterOptions = {}
+): ScratchpadState {
+  const messages = withMessages(options);
   const sections: ScratchpadSection[] = [];
 
   // 1. Agent card — always present.
   sections.push({
     id: 'macro-agent',
-    title: 'Agent',
+    title: messages.agentSectionTitle,
     type: 'agent_card',
     content: buildAgentCard(run),
     editable: false,
@@ -229,7 +285,7 @@ export function macroRunToScratchpadState(run: MacroRunV1): ScratchpadState {
       hasParallel
         ? {
             id: 'macro-split-stepper',
-            title: 'Progress',
+            title: messages.progressSectionTitle,
             type: 'split_stepper',
             content: buildSplitStepperContent(run.steps),
             editable: false,
@@ -237,7 +293,7 @@ export function macroRunToScratchpadState(run: MacroRunV1): ScratchpadState {
           }
         : {
             id: 'macro-stepper',
-            title: 'Progress',
+            title: messages.progressSectionTitle,
             type: 'stepper',
             content: buildStepperContent(run.steps),
             editable: false,
@@ -252,7 +308,7 @@ export function macroRunToScratchpadState(run: MacroRunV1): ScratchpadState {
       id: 'macro-prompt',
       title: run.pendingInterrogation.title,
       type: 'prompt',
-      content: macroInterrogationToChatPromptConfig(run.pendingInterrogation),
+      content: macroInterrogationToChatPromptConfig(run.pendingInterrogation, options),
       editable: false,
       source: 'agent',
     });
@@ -265,7 +321,7 @@ export function macroRunToScratchpadState(run: MacroRunV1): ScratchpadState {
   results.forEach((component, index) => {
     sections.push({
       id: `macro-result-${String(component?.id ?? index)}`,
-      title: 'Result',
+      title: messages.resultSectionTitle,
       type: resultSectionType(component?.type),
       content: component,
       editable: false,
@@ -282,7 +338,7 @@ export function macroRunToScratchpadState(run: MacroRunV1): ScratchpadState {
     status: RUN_STATUS_TO_SCRATCHPAD[run.status],
   };
 
-  const error = buildError(run);
+  const error = buildError(run, messages);
   if (error) state.error = error;
 
   return state;
@@ -311,7 +367,11 @@ function isElicitationSchema(value: unknown): value is ElicitationRequestedSchem
  * {@link macroRunToScratchpadState} (which calls it for an embedded
  * `pendingInterrogation`).
  */
-export function macroInterrogationToChatPromptConfig(q: MacroInterrogationV1): ChatPromptConfig {
+export function macroInterrogationToChatPromptConfig(
+  q: MacroInterrogationV1,
+  options: MacroRunAdapterOptions = {}
+): ChatPromptConfig {
+  const messages = withMessages(options);
   switch (q.kind) {
     case 'choice': {
       const options: ChoiceOption[] = (q.options ?? []).map((o) => {
@@ -355,7 +415,7 @@ export function macroInterrogationToChatPromptConfig(q: MacroInterrogationV1): C
       return {
         type: 'confirm',
         title: q.title,
-        config: { message: q.message ?? 'Please confirm to continue.' },
+        config: { message: q.message ?? messages.confirmDefault },
       };
     }
   }

package/src/components/ActionGroupRenderer.tsx

@@ -7,6 +7,7 @@ import { Component, For, Show } from 'solid-js'
 import type { UIComponent, ActionGroupParams, ActionComponentParams } from '../types'
 import { useAction } from '../hooks/useAction'
 import { safeUrl } from '../utils/safe-url'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface ActionGroupRendererProps {
   /**
@@ -147,6 +148,7 @@ const ActionButton: Component<{
  * ```
  */
 export const ActionGroupRenderer: Component<ActionGroupRendererProps> = (props) => {
+  const strings = useMCPUIStrings()
   const params = () => props.params || (props.component?.params as ActionGroupParams) || { actions: [] }
 
   const layoutClass = () => {
@@ -181,7 +183,7 @@ export const ActionGroupRenderer: Component<ActionGroupRendererProps> = (props)
     <div
       class={`${layoutClass()} ${gapClass()} ${params()?.fullWidth ? 'w-full' : ''}`}
       role="group"
-      aria-label={params()?.label || 'Action group'}
+      aria-label={params()?.label || strings.actionGroupLabel}
     >
       <For each={params()?.actions || []}>
         {(action, index) => <ActionButton action={action} index={index()} />}

package/src/components/AgentCard.tsx

@@ -7,6 +7,7 @@
 
 import { Show, For } from 'solid-js'
 import type { AgentCardContent } from '../types/chat-bus'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface AgentCardProps {
   content: AgentCardContent
@@ -23,15 +24,31 @@ const AVATAR_MAP: Record<string, string> = {
   robot: '\uD83E\uDD16',
 }
 
-const STATUS_CONFIG: Record<string, { label: string; color: string; pulse: boolean }> = {
-  idle: { label: 'Idle', color: 'bg-gray-400', pulse: false },
-  running: { label: 'Running', color: 'bg-blue-500', pulse: true },
-  waiting: { label: 'Waiting', color: 'bg-amber-500', pulse: true },
-  done: { label: 'Done', color: 'bg-green-500', pulse: false },
-  error: { label: 'Error', color: 'bg-red-500', pulse: false },
+/**
+ * Status styling. The record stays module-level, but it carries a
+ * `labelKey` rather than English: the label is resolved from
+ * `useMCPUIStrings()` at render time so a host provider can localize it.
+ */
+type AgentStatusLabelKey =
+  | 'agentStatusIdle'
+  | 'agentStatusRunning'
+  | 'agentStatusWaiting'
+  | 'agentStatusDone'
+  | 'agentStatusError'
+
+const STATUS_CONFIG: Record<
+  string,
+  { labelKey: AgentStatusLabelKey; color: string; pulse: boolean }
+> = {
+  idle: { labelKey: 'agentStatusIdle', color: 'bg-gray-400', pulse: false },
+  running: { labelKey: 'agentStatusRunning', color: 'bg-blue-500', pulse: true },
+  waiting: { labelKey: 'agentStatusWaiting', color: 'bg-amber-500', pulse: true },
+  done: { labelKey: 'agentStatusDone', color: 'bg-green-500', pulse: false },
+  error: { labelKey: 'agentStatusError', color: 'bg-red-500', pulse: false },
 }
 
 export function AgentCard(props: AgentCardProps) {
+  const strings = useMCPUIStrings()
   const c = () => props.content
   const status = () => STATUS_CONFIG[c().status] || STATUS_CONFIG.idle
   const avatar = () => AVATAR_MAP[c().avatar || ''] || c().avatar || '\uD83E\uDD16'
@@ -54,8 +71,8 @@ export function AgentCard(props: AgentCardProps) {
         <div class="flex items-center gap-2">
           <span class="font-medium text-sm text-gray-900 dark:text-white truncate">{c().name}</span>
           {/* Status dot */}
-          <span class={`inline-block w-2 h-2 rounded-full ${status().color} ${status().pulse ? 'animate-pulse' : ''}`} title={status().label} />
-          <span class="text-xs text-gray-500 dark:text-gray-400">{status().label}</span>
+          <span class={`inline-block w-2 h-2 rounded-full ${status().color} ${status().pulse ? 'animate-pulse' : ''}`} title={strings[status().labelKey]} />
+          <span class="text-xs text-gray-500 dark:text-gray-400">{strings[status().labelKey]}</span>
         </div>
 
         {/* Model */}
@@ -97,13 +114,14 @@ export interface AgentStatusBadgeProps {
 }
 
 export function AgentStatusBadge(props: AgentStatusBadgeProps) {
+  const strings = useMCPUIStrings()
   const status = () => STATUS_CONFIG[props.status] || STATUS_CONFIG.idle
 
   return (
     <span class="inline-flex items-center gap-1.5 text-xs">
       <span class={`w-2 h-2 rounded-full ${status().color} ${status().pulse ? 'animate-pulse' : ''}`} />
       <span class="text-gray-600 dark:text-gray-300">{props.agentName}</span>
-      <span class="text-gray-400 dark:text-gray-500">{status().label}</span>
+      <span class="text-gray-400 dark:text-gray-500">{strings[status().labelKey]}</span>
     </span>
   )
 }

package/src/components/AgentHandoff.tsx

@@ -7,6 +7,7 @@
 
 import { Show } from 'solid-js'
 import type { AgentHandoffContent } from '../types/chat-bus'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface AgentHandoffProps {
   content: AgentHandoffContent
@@ -24,6 +25,7 @@ function getAvatar(key?: string): string {
 }
 
 export function AgentHandoff(props: AgentHandoffProps) {
+  const strings = useMCPUIStrings()
   const c = () => props.content
 
   if (typeof console !== 'undefined') {
@@ -49,7 +51,8 @@ export function AgentHandoff(props: AgentHandoffProps) {
         </div>
         <Show when={c().summary || c().itemCount}>
           <span class="text-[10px] text-gray-500 dark:text-gray-400 text-center">
-            {c().summary || `${c().itemCount} items`}
+            {c().summary ||
+              formatMCPUIString(strings.handoffItems, { count: c().itemCount ?? 0 })}
           </span>
         </Show>
       </div>

package/src/components/ArtifactRenderer.tsx

@@ -1,5 +1,6 @@
 import { Component } from 'solid-js'
 import { safeUrl } from '../utils/safe-url'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface ArtifactComponentParams {
     url: string
@@ -10,6 +11,7 @@ export interface ArtifactComponentParams {
 }
 
 export const ArtifactRenderer: Component<{ params: ArtifactComponentParams }> = (props) => {
+    const strings = useMCPUIStrings()
     const getIcon = () => {
         if (props.params.mimeType?.includes('csv')) return '📊'
         if (props.params.mimeType?.includes('json')) return '{}'
@@ -19,9 +21,19 @@ export const ArtifactRenderer: Component<{ params: ArtifactComponentParams }> =
 
     const formatSize = (bytes?: number) => {
         if (!bytes) return ''
-        if (bytes < 1024) return `${bytes} B`
-        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+        const oneDecimal = (n: number) =>
+            new Intl.NumberFormat(strings.locale, {
+                minimumFractionDigits: 1,
+                maximumFractionDigits: 1,
+                useGrouping: false,
+            }).format(n)
+        if (bytes < 1024) {
+            return formatMCPUIString(strings.sizeBytes, {
+                size: new Intl.NumberFormat(strings.locale, { maximumFractionDigits: 0 }).format(bytes),
+            })
+        }
+        if (bytes < 1024 * 1024) return formatMCPUIString(strings.sizeKilobytes, { size: oneDecimal(bytes / 1024) })
+        return formatMCPUIString(strings.sizeMegabytes, { size: oneDecimal(bytes / (1024 * 1024)) })
     }
 
     return (
@@ -35,7 +47,7 @@ export const ArtifactRenderer: Component<{ params: ArtifactComponentParams }> =
                         {props.params.filename}
                     </h4>
                     <p class="text-xs text-gray-500 dark:text-gray-400">
-                        {formatSize(props.params.size)} • {props.params.description || 'Generated artifact'}
+                        {formatSize(props.params.size)} • {props.params.description || strings.artifactDescription}
                     </p>
                 </div>
             </div>
@@ -48,7 +60,7 @@ export const ArtifactRenderer: Component<{ params: ArtifactComponentParams }> =
                 <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                 </svg>
-                Download
+                {strings.download}
             </a>
         </div>
     )

package/src/components/AutocompleteDropdown.tsx

@@ -7,6 +7,7 @@
 
 import { Component, For, Show, createMemo, JSX } from 'solid-js'
 import type { AutocompleteOption } from '../types'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 /**
  * Props for AutocompleteDropdown
@@ -142,6 +143,7 @@ const DefaultOptionRenderer: Component<{
  * AutocompleteDropdown Component
  */
 export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props) => {
+  const strings = useMCPUIStrings()
   const positionStyles = createMemo((): JSX.CSSProperties => {
     if (props.position === 'top') {
       return {
@@ -175,7 +177,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
         class={`mcp-autocomplete-dropdown ${props.class || ''}`}
         style={containerStyles()}
         role="listbox"
-        aria-label="Suggestions"
+        aria-label={strings.autocompleteSuggestions}
       >
         {/* Loading state */}
         <Show when={props.isLoading}>
@@ -201,7 +203,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
                 animation: 'mcp-spin 0.6s linear infinite'
               }}
             />
-            {props.loadingMessage || 'Loading...'}
+            {props.loadingMessage || strings.autocompleteLoading}
           </div>
         </Show>
 
@@ -216,7 +218,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
               'text-align': 'center'
             }}
           >
-            {props.emptyMessage || 'No suggestions found'}
+            {props.emptyMessage || strings.autocompleteEmpty}
           </div>
         </Show>
 
@@ -302,7 +304,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
               'font-family': 'inherit',
               'font-size': '0.7rem'
             }}>↓</kbd>
-            {' to navigate, '}
+            {strings.autocompleteHintNavigate}
             <kbd style={{
               'background-color': '#e5e7eb',
               padding: '1px 4px',
@@ -310,7 +312,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
               'font-family': 'inherit',
               'font-size': '0.7rem'
             }}>Enter</kbd>
-            {' to select, '}
+            {strings.autocompleteHintSelect}
             <kbd style={{
               'background-color': '#e5e7eb',
               padding: '1px 4px',
@@ -318,7 +320,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
               'font-family': 'inherit',
               'font-size': '0.7rem'
             }}>Esc</kbd>
-            {' to dismiss'}
+            {strings.autocompleteHintDismiss}
           </div>
         </Show>
       </div>

package/src/components/AutocompleteFormField.tsx

@@ -10,6 +10,7 @@ import type { FormFieldParams, FieldAutocompleteConfig, AutocompleteContext } fr
 import { useConditionalField } from '../hooks/useConditionalField'
 import { useAutocomplete } from '../hooks/useAutocomplete'
 import { useAutocompleteContextSafe } from '../context/AutocompleteContext'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 import { GhostText } from './GhostText'
 import { AutocompleteDropdown } from './AutocompleteDropdown'
 
@@ -62,6 +63,7 @@ export interface AutocompleteFormFieldProps {
  * AutocompleteFormField Component
  */
 export const AutocompleteFormField: Component<AutocompleteFormFieldProps> = (props) => {
+  const strings = useMCPUIStrings()
   // Check if autocomplete context is available
   const autocompleteCtx = useAutocompleteContextSafe()
 
@@ -205,7 +207,9 @@ export const AutocompleteFormField: Component<AutocompleteFormFieldProps> = (pro
                   inputValue={localValue()}
                   ghostText={autocomplete.ghostText()}
                   visible={autocomplete.isOpen()}
-                  hintText={autocomplete.ghostText() ? 'Tab to accept' : undefined}
+                  hintText={
+                    autocomplete.ghostText() ? strings.autocompleteTabToAccept : undefined
+                  }
                   isLoading={autocomplete.isLoading()}
                 />
               </Show>

package/src/components/BriefingDiff.tsx

@@ -7,6 +7,7 @@
 
 import { For, Show } from 'solid-js'
 import type { BriefingDiffContent } from '../types/chat-bus'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface BriefingDiffProps {
   content: BriefingDiffContent
@@ -19,6 +20,7 @@ const CHANGE_CONFIG: Record<string, { icon: string; color: string; bg: string }>
 }
 
 export function BriefingDiff(props: BriefingDiffProps) {
+  const strings = useMCPUIStrings()
   const c = () => props.content
 
   if (typeof console !== 'undefined') {
@@ -45,13 +47,19 @@ export function BriefingDiff(props: BriefingDiffProps) {
         {(stats) => (
           <div class="flex items-center gap-3 text-xs">
             <Show when={stats().added > 0}>
-              <span class="text-green-600 dark:text-green-400">+{stats().added} added</span>
+              <span class="text-green-600 dark:text-green-400">
+                {formatMCPUIString(strings.briefingAdded, { count: stats().added })}
+              </span>
             </Show>
             <Show when={stats().removed > 0}>
-              <span class="text-red-600 dark:text-red-400">{stats().removed} removed</span>
+              <span class="text-red-600 dark:text-red-400">
+                {formatMCPUIString(strings.briefingRemoved, { count: stats().removed })}
+              </span>
             </Show>
             <Show when={stats().changed > 0}>
-              <span class="text-amber-600 dark:text-amber-400">{stats().changed} changed</span>
+              <span class="text-amber-600 dark:text-amber-400">
+                {formatMCPUIString(strings.briefingChanged, { count: stats().changed })}
+              </span>
             </Show>
           </div>
         )}

package/src/components/CarouselRenderer.tsx

@@ -3,6 +3,7 @@ import { isServer } from 'solid-js/web'
 import { useRenderContext } from './RenderContext'
 import type { UIComponent } from '../types'
 import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface CarouselRendererProps {
     items: UIComponent[]
@@ -15,6 +16,7 @@ export interface CarouselRendererProps {
 }
 
 export const CarouselRenderer: Component<CarouselRendererProps> = (props) => {
+    const strings = useMCPUIStrings()
     let scrollContainer: HTMLDivElement | undefined
     const [canScrollLeft, setCanScrollLeft] = createSignal(false)
     const [canScrollRight, setCanScrollRight] = createSignal(true)
@@ -42,9 +44,9 @@ export const CarouselRenderer: Component<CarouselRendererProps> = (props) => {
 
     return (
         <ExpandableWrapper
-            title={'Carousel'}
+            title={strings.carouselTitle}
             copyData={JSON.stringify(props.items, null, 2)}
-            copyLabel="Copy items (JSON)"
+            copyLabel={strings.carouselCopy}
             toolbarVariant={props.toolbarVariant}
         >
         <div class={`relative group ${isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''}`}>

package/src/components/ChartJSRenderer.tsx

@@ -24,7 +24,7 @@ import { ExpandableWrapper, useExpanded } from './ExpandableWrapper';
 import { DegradedFallback } from './DegradedFallback';
 import { chartToDataTable } from './chart-data-table';
 import { useTelemetry } from '../context/MCPUITelemetryContext';
-import { useMCPUIStrings } from '../context/MCPUIStringsContext';
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext';
 
 // Lazy load Chart.js to avoid bundling if not used
 let ChartJS: any = null;
@@ -113,9 +113,18 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
   let renderVersion = 0;
 
   const params = () => props.component.params as ChartComponentParams;
-  const tableData = createMemo(() => chartToDataTable(params()));
   const telemetry = useTelemetry();
   const strings = useMCPUIStrings();
+  // The accessible data table is a pure projection: its column headers come
+  // from the chrome strings, injected rather than hardcoded in the helper.
+  const tableData = createMemo(() =>
+    chartToDataTable(params(), {
+      series: strings.chartTableSeries,
+      point: strings.chartTablePoint,
+      label: strings.degradedColLabel,
+      seriesName: strings.degradedSeries,
+    })
+  );
   const descriptionId = createUniqueId();
   const title = () => params().title || strings.chartView;
 
@@ -205,7 +214,7 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
       setIsLoading(false);
     } catch (err) {
       if (version !== renderVersion) return;
-      const error = err instanceof Error ? err : new Error('Chart rendering failed');
+      const error = err instanceof Error ? err : new Error(strings.chartRenderError);
       setError(error.message);
       setIsLoading(false);
       // Fallback ladder (P2.5): record the failure so it's observable, then
@@ -241,7 +250,7 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
     <ExpandableWrapper
       title={title()}
       copyData={copyDataJSON()}
-      copyLabel="Copy chart data (JSON)"
+      copyLabel={strings.chartCopy}
       toolbarVariant={props.toolbarVariant}
     >
       <ContextAwareChartLayout
@@ -294,8 +303,8 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
                 onClick={handleExportPNG}
                 disabled={activeView() !== 'chart' || isLoading() || Boolean(error())}
                 class="opacity-0 group-hover:opacity-60 hover:!opacity-100 disabled:!opacity-30 disabled:cursor-not-allowed px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"
-                title="Download PNG"
-                aria-label="Download chart as PNG"
+                title={strings.chartDownloadPng}
+                aria-label={strings.chartDownloadPngAria}
               >
                 <svg
                   class="w-3 h-3 text-gray-500 dark:text-gray-400"
@@ -323,8 +332,8 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
             instead of a bare "Chart Error" message. */}
         <Show when={error() && activeView() === 'chart'}>
           <DegradedFallback
-            message={`Chart rendering failed: ${error()}`}
-            caption="Showing the chart data as a table — the interactive chart is unavailable."
+            message={formatMCPUIString(strings.chartRenderFailed, { error: String(error()) })}
+            caption={strings.chartDegradedCaption}
             {...tableData()}
           />
         </Show>
@@ -405,7 +414,7 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
             <div class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80">
               <div class="flex flex-col items-center gap-2">
                 <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
-                <span class="text-sm text-gray-500 dark:text-gray-400">Loading chart...</span>
+                <span class="text-sm text-gray-500 dark:text-gray-400">{strings.chartLoading}</span>
               </div>
             </div>
           </Show>