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

package/src/components/ChatPrompt.tsx

@@ -52,6 +52,7 @@ import type {
   FormPromptConfig,
 } from '../types/chat-bus'
 import { FormFieldRenderer } from './FormFieldRenderer'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 import type { FormFieldParams } from '../types'
 
 export interface ChatPromptProps {
@@ -78,6 +79,8 @@ export interface ChatPromptProps {
  * />
  */
 export const ChatPrompt: Component<ChatPromptProps> = (props) => {
+  const strings = useMCPUIStrings()
+
   // F1: Guard against null/undefined config (e.g. after dismiss clears state)
   if (!props.config) return null
 
@@ -100,7 +103,7 @@ export const ChatPrompt: Component<ChatPromptProps> = (props) => {
             ? 'px-3 py-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors'
             : 'p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors'
           }
-          aria-label={props.dismissLabel || 'Dismiss'}
+          aria-label={props.dismissLabel || strings.dismiss}
         >
           <Show when={props.dismissLabel} fallback={
             <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -124,10 +127,10 @@ export const ChatPrompt: Component<ChatPromptProps> = (props) => {
           <Match when={props.config.type === 'confirm'}>
             <ConfirmBody
               config={props.config.config as ConfirmPromptConfig}
-              onConfirm={() => props.onSubmit({ type: 'confirm', value: 'confirmed', label: (props.config.config as ConfirmPromptConfig).confirmLabel || 'Confirmed' })}
+              onConfirm={() => props.onSubmit({ type: 'confirm', value: 'confirmed', label: (props.config.config as ConfirmPromptConfig).confirmLabel || strings.promptConfirmed })}
               onCancel={() => {
                 props.onDismiss?.()
-                props.onSubmit({ type: 'confirm', value: 'cancelled', label: (props.config.config as ConfirmPromptConfig).cancelLabel || 'Cancelled', dismissed: true })
+                props.onSubmit({ type: 'confirm', value: 'cancelled', label: (props.config.config as ConfirmPromptConfig).cancelLabel || strings.promptCancelled, dismissed: true })
               }}
             />
           </Match>
@@ -213,6 +216,7 @@ const ConfirmBody: Component<{
   onConfirm: () => void
   onCancel: () => void
 }> = (props) => {
+  const strings = useMCPUIStrings()
   const isDanger = () => props.config.variant === 'danger'
 
   return (
@@ -225,7 +229,7 @@ const ConfirmBody: Component<{
           onClick={props.onCancel}
           class="px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
         >
-          {props.config.cancelLabel || 'Cancel'}
+          {props.config.cancelLabel || strings.cancel}
         </button>
         <button
           onClick={props.onConfirm}
@@ -235,7 +239,7 @@ const ConfirmBody: Component<{
               : 'bg-blue-600 hover:bg-blue-700'
           }`}
         >
-          {props.config.confirmLabel || 'Confirm'}
+          {props.config.confirmLabel || strings.confirm}
         </button>
       </div>
     </div>
@@ -248,6 +252,7 @@ const FormBody: Component<{
   config: FormPromptConfig
   onSubmit: (data: Record<string, unknown>, label: string) => void
 }> = (props) => {
+  const strings = useMCPUIStrings()
   const [formData, setFormData] = createSignal<Record<string, any>>({})
   const [dynamicOptions, setDynamicOptions] = createSignal<Record<string, Array<{ label: string; value: string }>>>({})
   const [previewText, setPreviewText] = createSignal<string>('')
@@ -336,7 +341,7 @@ const FormBody: Component<{
       .filter(([, v]) => v !== undefined && v !== '' && !(Array.isArray(v) && v.length === 0))
       .map(([k, v]) => `${k}: ${Array.isArray(v) ? v.join(', ') : v}`)
       .join(', ')
-    props.onSubmit(data, label || 'Form submitted')
+    props.onSubmit(data, label || strings.promptFormSubmitted)
   }
 
   const isValid = () => {
@@ -379,7 +384,7 @@ const FormBody: Component<{
           <Show when={previewLoading()} fallback={
             <p class="text-blue-700 dark:text-blue-300">{previewText()}</p>
           }>
-            <p class="text-blue-400 animate-pulse">Loading preview...</p>
+            <p class="text-blue-400 animate-pulse">{strings.promptLoadingPreview}</p>
           </Show>
         </div>
       </Show>
@@ -390,7 +395,7 @@ const FormBody: Component<{
           disabled={!isValid()}
           class="px-4 py-2 text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
         >
-          {props.config.submitLabel || 'Submit'}
+          {props.config.submitLabel || strings.submit}
         </button>
       </div>
     </form>

package/src/components/CodeBlockRenderer.tsx

@@ -10,6 +10,7 @@ import type { UIComponent, CodeComponentParams } from '../types'
 import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
 import { highlightQuery } from './UIResourceRenderer'
 import { escapeHtml } from '../utils/escape-html'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 /** Map of `params.language` → file extension for the v6.2.0 download button. */
 const LANGUAGE_EXTENSIONS: Record<string, string> = {
@@ -45,6 +46,7 @@ export interface CodeBlockRendererProps {
 }
 
 export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
+    const strings = useMCPUIStrings()
     const [highlightedCode, setHighlightedCode] = createSignal<string>('')
     const [isCopied, setIsCopied] = createSignal(false)
     const [isHljsLoaded, setIsHljsLoaded] = createSignal(false)
@@ -201,12 +203,12 @@ export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
     }
 
     return (
-        <ExpandableWrapper title={params()?.filename || params()?.language || 'Code'} copyData={params()?.code} copyLabel="Copy code" toolbarVariant={props.toolbarVariant}>
+        <ExpandableWrapper title={params()?.filename || params()?.language || strings.codeTitle} copyData={params()?.code} copyLabel={strings.codeCopy} toolbarVariant={props.toolbarVariant}>
         <div class={`w-full bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden text-sm flex flex-col ${isExpanded() ? 'flex-1 min-h-0' : ''}`}>
             {/* Header */}
             <div class="flex items-center justify-between px-4 py-2 bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shrink-0">
                 <div class="font-mono text-xs text-gray-600 dark:text-gray-400">
-                    {params()?.filename || params()?.language || 'Code'}
+                    {params()?.filename || params()?.language || strings.codeTitle}
                 </div>
                 <div class="flex items-center gap-2">
                     {/* Search input (v6.2.0) */}
@@ -214,16 +216,16 @@ export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
                         type="text"
                         value={searchQuery()}
                         onInput={(e) => setSearchQuery(e.currentTarget.value)}
-                        placeholder="Search…"
+                        placeholder={strings.codeSearchPlaceholder}
                         class="px-2 py-0.5 text-xs border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-400 outline-none w-32"
-                        aria-label="Search in code"
+                        aria-label={strings.codeSearchAria}
                     />
                     {/* Download button (v6.2.0) */}
                     <button
                         onClick={handleDownload}
                         class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none transition-colors"
-                        aria-label="Download code as file"
-                        title="Download code"
+                        aria-label={strings.codeDownloadAria}
+                        title={strings.codeDownload}
                     >
                         <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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
@@ -233,8 +235,8 @@ export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
                     <button
                         onClick={() => setWordWrap(!wordWrap())}
                         class={`focus:outline-none transition-colors ${wordWrap() ? 'text-blue-500 dark:text-blue-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}`}
-                        aria-label="Toggle word wrap"
-                        title={wordWrap() ? 'Disable word wrap' : 'Enable word wrap'}
+                        aria-label={strings.codeToggleWordWrap}
+                        title={wordWrap() ? strings.codeWordWrapDisable : strings.codeWordWrapEnable}
                     >
                         <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="M3 10h10a4 4 0 010 8H9m4 0l-3-3m3 3l-3 3M3 6h18M3 14h4" />
@@ -244,8 +246,8 @@ export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
                     <button
                         onClick={handleCopy}
                         class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none transition-colors"
-                        aria-label="Copy code"
-                        title="Copy code"
+                        aria-label={strings.codeCopy}
+                        title={strings.codeCopy}
                     >
                         <Show when={isCopied()} fallback={
                             <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">

package/src/components/DataPreviewSection.tsx

@@ -5,8 +5,13 @@
  * @experimental
  */
 
-import { createSignal, createMemo, createEffect, For, Show } from 'solid-js'
+import { createSignal, createMemo, createEffect, For, Show, onMount } from 'solid-js'
 import type { DataPreviewContent, DataPreviewColumn } from '../types/chat-bus'
+import {
+  DEFAULT_MCPUI_STRINGS,
+  formatMCPUIString,
+  useMCPUIStrings,
+} from '../context/MCPUIStringsContext'
 
 export interface DataPreviewSectionProps {
   content: DataPreviewContent
@@ -16,24 +21,62 @@ type SortDir = 'asc' | 'desc' | null
 
 // ─── Formatting helpers ─────────────────────────────────────
 
-function formatNumber(value: unknown, format?: string): string {
+/**
+ * `locale` — BCP-47 tag (`MCPUIStrings.locale`, default `'en-US'`). Before
+ * 6.20.0 these helpers hardcoded `'fr-FR'` / `'fr'`.
+ */
+function formatNumber(
+  value: unknown,
+  format?: string,
+  locale: string = DEFAULT_MCPUI_STRINGS.locale
+): string {
   if (typeof value !== 'number' || !isFinite(value)) return String(value ?? '')
-  if (format === 'percent') return `${(value * 100).toFixed(1)}%`
-  if (format === 'currency') return `${value.toLocaleString('fr-FR')} EUR`
-  if (Number.isInteger(value)) return value.toLocaleString('fr-FR')
-  return value.toLocaleString('fr-FR', { maximumFractionDigits: 2 })
+  if (format === 'percent') {
+    return new Intl.NumberFormat(locale, {
+      style: 'percent',
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1,
+      useGrouping: false,
+    }).format(value)
+  }
+  if (format === 'currency') return `${value.toLocaleString(locale)} EUR`
+  if (Number.isInteger(value)) return value.toLocaleString(locale)
+  return value.toLocaleString(locale, { maximumFractionDigits: 2 })
 }
 
-function formatCell(value: unknown, col: DataPreviewColumn): string {
+function formatCell(
+  value: unknown,
+  col: DataPreviewColumn,
+  locale: string = DEFAULT_MCPUI_STRINGS.locale,
+  /** False before mount: date-time values stay raw so SSR and hydration match. */
+  zoneAware = true
+): string {
   if (value == null) return '\u2014'
-  if (col.type === 'number') return formatNumber(value, col.format)
+  if (col.type === 'number') return formatNumber(value, col.format, locale)
   if (col.type === 'date' && typeof value === 'string') {
-    try { return new Date(value).toLocaleDateString('fr-FR') } catch { return value }
+    const date = new Date(value)
+    if (Number.isNaN(date.getTime())) return value
+    // A date-only value (`2026-09-17`) has no time zone: format it in UTC so
+    // every viewer, and the server, shows the same calendar date.
+    const dateOnly = /^\d{4}-\d{2}-\d{2}$/.test(value)
+    // A date-time's calendar date depends on the viewer's time zone, which the
+    // server cannot know: keep the raw value until the component has mounted.
+    if (!dateOnly && !zoneAware) return value
+    try {
+      return date.toLocaleDateString(locale, dateOnly ? { timeZone: 'UTC' } : undefined)
+    } catch {
+      return value
+    }
   }
   return String(value)
 }
 
-function compareValues(a: unknown, b: unknown, type?: string): number {
+function compareValues(
+  a: unknown,
+  b: unknown,
+  type?: string,
+  locale: string = DEFAULT_MCPUI_STRINGS.locale
+): number {
   if (a == null && b == null) return 0
   if (a == null) return 1
   if (b == null) return -1
@@ -53,7 +96,7 @@ function compareValues(a: unknown, b: unknown, type?: string): number {
     if (isNaN(db)) return -1
     return da - db
   }
-  return String(a).localeCompare(String(b), 'fr', { sensitivity: 'base' })
+  return String(a).localeCompare(String(b), locale, { sensitivity: 'base' })
 }
 
 // ─── Export helpers ─────────────────────────────────────────
@@ -101,6 +144,7 @@ function resolveContent(raw: unknown): DataPreviewContent | null {
 // ─── Component ──────────────────────────────────────────────
 
 export function DataPreviewSection(props: DataPreviewSectionProps) {
+  const strings = useMCPUIStrings()
   const content = createMemo(() => {
     const resolved = resolveContent(props.content)
     if (!resolved) {
@@ -115,6 +159,8 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
   const showPageInfo = () => content()?.showPageInfo !== false
 
   const [page, setPage] = createSignal(content()?.initialPage ?? 0)
+  const [mounted, setMounted] = createSignal(false)
+  onMount(() => setMounted(true))
   const [sortKey, setSortKey] = createSignal<string | null>(null)
   const [sortDir, setSortDir] = createSignal<SortDir>(null)
 
@@ -142,7 +188,7 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
     if (!key || !dir) return r
     const col = columns().find(c => c.key === key)
     return [...r].sort((a, b) => {
-      const cmp = compareValues(a[key], b[key], col?.type)
+      const cmp = compareValues(a[key], b[key], col?.type, strings.locale)
       return dir === 'desc' ? -cmp : cmp
     })
   })
@@ -186,7 +232,7 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
   return (
     <Show when={content()} fallback={
       <div class="text-xs text-amber-600 dark:text-amber-400 p-2">
-        [DataPreviewSection] Invalid content format
+        {strings.previewInvalidContent}
       </div>
     }>
       {(c) => (
@@ -208,14 +254,14 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
                 <button
                   class="px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                   onClick={handleExportCSV}
-                  title={`Export CSV (${sortedRows().length} rows)`}
+                  title={formatMCPUIString(strings.exportCsvRows, { count: sortedRows().length })}
                 >
                   CSV
                 </button>
                 <button
                   class="px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                   onClick={handleExportJSON}
-                  title={`Export JSON (${sortedRows().length} rows)`}
+                  title={formatMCPUIString(strings.exportJsonRows, { count: sortedRows().length })}
                 >
                   JSON
                 </button>
@@ -234,7 +280,7 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
                         class="px-3 py-2 font-medium text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wider border-b border-gray-200 dark:border-gray-700 cursor-pointer select-none hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-colors"
                         style={{ "text-align": columnAlign(col) }}
                         onClick={() => handleSort(col.key)}
-                        title={`Sort by ${col.label}`}
+                        title={formatMCPUIString(strings.sortBy, { column: col.label })}
                       >
                         <span class="inline-flex items-center gap-1">
                           {col.label}
@@ -266,7 +312,7 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
                             class="px-3 py-2 text-gray-800 dark:text-gray-200"
                             style={{ "text-align": columnAlign(col) }}
                           >
-                            {formatCell(row[col.key], col)}
+                            {formatCell(row[col.key], col, strings.locale, mounted())}
                           </td>
                         )}
                       </For>
@@ -282,13 +328,22 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
             <Show when={showPageInfo()}>
               <span>
                 {isPaginated()
-                  ? `Showing ${rangeStart()}\u2013${rangeEnd()} of ${sortedRows().length.toLocaleString('fr-FR')}`
-                  : `${sortedRows().length} row${sortedRows().length !== 1 ? 's' : ''}`
-                }
+                  ? formatMCPUIString(strings.previewShowingRange, {
+                      start: rangeStart().toLocaleString(strings.locale),
+                      end: rangeEnd().toLocaleString(strings.locale),
+                      // `strings.locale` formats the count, so the chrome
+                      // string and the digits agree (and SSR matches the client).
+                      total: sortedRows().length.toLocaleString(strings.locale),
+                    })
+                  : formatMCPUIString(
+                      sortedRows().length === 1 ? strings.previewRowsOne : strings.previewRowsMany,
+                      { count: sortedRows().length.toLocaleString(strings.locale) }
+                    )}
                 {c().totalRows && c().totalRows! > sortedRows().length
-                  ? ` (${c().totalRows!.toLocaleString('fr-FR')} total)`
-                  : ''
-                }
+                  ? formatMCPUIString(strings.previewTotalSuffix, {
+                      total: c().totalRows!.toLocaleString(strings.locale),
+                    })
+                  : ''}
               </span>
             </Show>
             <Show when={!showPageInfo()}><span /></Show>
@@ -296,19 +351,30 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
             <Show when={isPaginated()}>
               <div class="flex items-center gap-1">
                 <button
+                  type="button"
                   class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                   disabled={page() === 0}
                   onClick={() => setPage(p => p - 1)}
+                  aria-label={strings.paginationPrevious}
+                  data-mcp-ui-action="page-prev"
                 >
-                  &#x25C0; Prev
+                  <span aria-hidden="true">&#x25C0;</span> {strings.previewPrev}
                 </button>
-                <span class="px-2">Page {page() + 1} / {totalPages()}</span>
+                <span class="px-2" aria-live="polite">
+                  {formatMCPUIString(strings.previewPageIndicator, {
+                    page: page() + 1,
+                    total: totalPages(),
+                  })}
+                </span>
                 <button
+                  type="button"
                   class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                   disabled={page() >= totalPages() - 1}
                   onClick={() => setPage(p => p + 1)}
+                  aria-label={strings.paginationNext}
+                  data-mcp-ui-action="page-next"
                 >
-                  Next &#x25B6;
+                  {strings.previewNext} <span aria-hidden="true">&#x25B6;</span>
                 </button>
               </div>
             </Show>

package/src/components/DegradedFallback.tsx

@@ -16,6 +16,7 @@
  */
 
 import { Component, For, Show } from 'solid-js';
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext';
 
 export interface DegradedFallbackProps {
   /** Short, human-readable reason the native render was skipped/failed. */
@@ -37,6 +38,7 @@ export interface DegradedFallbackProps {
 }
 
 export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
+  const strings = useMCPUIStrings();
   const maxRows = () => props.maxRows ?? 50;
   const allRows = () => props.rows ?? [];
   const shownRows = () => allRows().slice(0, maxRows());
@@ -50,7 +52,7 @@ export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
     >
       <p class="text-sm font-medium text-amber-900 dark:text-amber-100">{props.message}</p>
       <p class="mt-0.5 text-xs text-amber-700 dark:text-amber-300">
-        {props.caption ?? 'Showing the underlying data — the interactive view is unavailable.'}
+        {props.caption ?? strings.degradedCaption}
       </p>
 
       <Show when={hasTable()}>
@@ -84,7 +86,7 @@ export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
         </div>
         <Show when={hiddenCount() > 0}>
           <p class="mt-1 text-[10px] text-amber-600 dark:text-amber-400">
-            +{hiddenCount()} more rows not shown.
+            {formatMCPUIString(strings.degradedMoreRows, { count: hiddenCount() })}
           </p>
         </Show>
       </Show>

package/src/components/FooterRenderer.tsx

@@ -1,5 +1,6 @@
 import { Component, Show, For } from 'solid-js'
 import { safeUrl } from '../utils/safe-url'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface FooterComponentParams {
     poweredBy?: string
@@ -11,6 +12,7 @@ export interface FooterComponentParams {
 }
 
 export const FooterRenderer: Component<{ params: FooterComponentParams }> = (props) => {
+    const strings = useMCPUIStrings()
     return (
         <div class="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 flex flex-wrap items-center gap-4">
             <Show when={props.params.poweredBy}>
@@ -40,7 +42,7 @@ export const FooterRenderer: Component<{ params: FooterComponentParams }> = (pro
                     <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                     </svg>
-                    {props.params.sourceCount} sources
+                    {formatMCPUIString(strings.footerSources, { count: props.params.sourceCount! })}
                 </span>
             </Show>
 

package/src/components/FormFieldRenderer.tsx

@@ -7,6 +7,7 @@
 import { Component, Show, For, Switch, Match, Accessor, createSignal, createEffect, onCleanup } from 'solid-js'
 import type { FormFieldParams, PrefillSource } from '../types'
 import { useConditionalField } from '../hooks/useConditionalField'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface FormFieldRendererProps {
   field: FormFieldParams
@@ -20,15 +21,24 @@ export interface FormFieldRendererProps {
   formData?: Accessor<Record<string, any>>
 }
 
-/** Badge config by prefill source */
-const SOURCE_BADGES: Record<PrefillSource, { icon: string; title: string } | null> = {
-  detected: { icon: '\u2705', title: 'Detected from message' },
-  inferred: { icon: '\uD83D\uDD17', title: 'Inferred from context' },
-  user:     { icon: '\u270F\uFE0F', title: 'Previously provided' },
+/**
+ * Badge config by prefill source. Module-level, so the title cannot be read
+ * from the context here — each badge carries the `MCPUIStrings` key instead
+ * and the rendering component resolves it at render time.
+ */
+const SOURCE_BADGES: Record<
+  PrefillSource,
+  { icon: string; titleKey: 'sourceDetected' | 'sourceInferred' | 'sourcePrevious' } | null
+> = {
+  detected: { icon: '\u2705', titleKey: 'sourceDetected' },
+  inferred: { icon: '\uD83D\uDD17', titleKey: 'sourceInferred' },
+  user:     { icon: '\u270F\uFE0F', titleKey: 'sourcePrevious' },
   default:  null,
 }
 
 export const FormFieldRenderer: Component<FormFieldRendererProps> = (props) => {
+  const strings = useMCPUIStrings()
+
   // Conditional visibility based on showWhen
   const { isVisible } = useConditionalField({
     condition: props.field.showWhen,
@@ -76,14 +86,14 @@ export const FormFieldRenderer: Component<FormFieldRendererProps> = (props) => {
           class={`block text-sm font-medium ${isUnsupported() ? 'text-gray-400 dark:text-gray-500' : isMuted() ? 'text-gray-400 dark:text-gray-500' : 'text-gray-700 dark:text-gray-300'}`}
         >
           <Show when={sourceBadge()}>
-            <span class="mr-1" title={sourceBadge()!.title}>{sourceBadge()!.icon}</span>
+            <span class="mr-1" title={strings[sourceBadge()!.titleKey]}>{sourceBadge()!.icon}</span>
           </Show>
           {props.field.label}
           <Show when={props.field.required || status() === 'required'}>
             <span class="text-red-500 ml-1" aria-hidden="true">*</span>
           </Show>
           <Show when={isUnsupported()}>
-            <span class="ml-2 text-[10px] font-medium bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 px-1.5 py-0.5 rounded">Not supported</span>
+            <span class="ml-2 text-[10px] font-medium bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 px-1.5 py-0.5 rounded">{strings.fieldNotSupported}</span>
           </Show>
           <Show when={status() === 'unknown'}>
             <span class="ml-2 text-[10px] font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 px-1.5 py-0.5 rounded">?</span>
@@ -316,7 +326,7 @@ export const FormFieldRenderer: Component<FormFieldRendererProps> = (props) => {
         <Match when={props.field.type === 'fieldset'}>
           <fieldset class="border border-gray-200 dark:border-gray-600 rounded-lg p-3">
             <legend class="text-xs font-medium text-gray-500 dark:text-gray-400 px-1">{props.field.label}</legend>
-            <p class="text-xs text-gray-400">{props.field.helpText || 'Group container'}</p>
+            <p class="text-xs text-gray-400">{props.field.helpText || strings.fieldGroupContainer}</p>
           </fieldset>
         </Match>
 
@@ -332,7 +342,9 @@ export const FormFieldRenderer: Component<FormFieldRendererProps> = (props) => {
             disabled={props.disabled}
             class={baseInputClass()}
           />
-          <p class="text-xs text-amber-500 mt-0.5">Unknown field type: {props.field.type}</p>
+          <p class="text-xs text-amber-500 mt-0.5">
+            {formatMCPUIString(strings.fieldUnknownType, { type: props.field.type })}
+          </p>
         </Match>
       </Switch>
 
@@ -376,6 +388,7 @@ const MultiSelectField: Component<{
   disabled?: boolean
   baseClass: string
 }> = (props) => {
+  const strings = useMCPUIStrings()
   const [open, setOpen] = createSignal(false)
   const [filter, setFilter] = createSignal('')
 
@@ -416,7 +429,7 @@ const MultiSelectField: Component<{
                   type="button"
                   onClick={() => removeChip(val)}
                   class="hover:text-blue-900 dark:hover:text-blue-100"
-                  aria-label={`Remove ${getLabel(val)}`}
+                  aria-label={formatMCPUIString(strings.removeItem, { name: getLabel(val) })}
                 >
                   &times;
                 </button>
@@ -435,8 +448,8 @@ const MultiSelectField: Component<{
       >
         <span class={props.value.length ? 'text-gray-900 dark:text-white' : 'text-gray-400'}>
           {props.value.length
-            ? `${props.value.length} selected`
-            : props.field.placeholder || 'Select...'}
+            ? formatMCPUIString(strings.fieldSelectedCount, { count: props.value.length })
+            : props.field.placeholder || strings.fieldSelectPlaceholder}
         </span>
         <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
@@ -456,7 +469,7 @@ const MultiSelectField: Component<{
                 type="text"
                 value={filter()}
                 onInput={(e) => setFilter(e.currentTarget.value)}
-                placeholder="Filter..."
+                placeholder={strings.filterPlaceholder}
                 class="w-full px-2 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"
                 autofocus
               />
@@ -478,7 +491,7 @@ const MultiSelectField: Component<{
               )}
             </For>
             <Show when={filteredOptions().length === 0}>
-              <p class="px-3 py-2 text-sm text-gray-400">No matches</p>
+              <p class="px-3 py-2 text-sm text-gray-400">{strings.fieldNoMatches}</p>
             </Show>
           </div>
         </div>
@@ -496,6 +509,7 @@ const AutocompleteField: Component<{
   disabled?: boolean
   baseClass: string
 }> = (props) => {
+  const strings = useMCPUIStrings()
   const [query, setQuery] = createSignal('')
   const [suggestions, setSuggestions] = createSignal<Array<{ label: string; value: string }>>([])
   const [isOpen, setIsOpen] = createSignal(false)
@@ -669,7 +683,7 @@ const AutocompleteField: Component<{
       <Show when={resolving()}>
         <div class="flex items-center gap-1 mb-1 text-xs text-gray-400">
           <span class="animate-spin h-3 w-3 border border-gray-400 border-t-transparent rounded-full" />
-          Resolving...
+          {strings.fieldResolving}
         </div>
       </Show>
 
@@ -684,7 +698,7 @@ const AutocompleteField: Component<{
                   type="button"
                   onClick={() => removeChip(val)}
                   class="hover:text-blue-900 dark:hover:text-blue-100"
-                  aria-label={`Remove ${getLabel(val)}`}
+                  aria-label={formatMCPUIString(strings.removeItem, { name: getLabel(val) })}
                 >
                   &times;
                 </button>
@@ -701,7 +715,7 @@ const AutocompleteField: Component<{
         onFocus={() => { if (suggestions().length) setIsOpen(true) }}
         onBlur={handleBlur}
         placeholder={isMultiple() && selectedValues().length
-          ? 'Add more...'
+          ? strings.fieldAddMorePlaceholder
           : props.field.placeholder}
         disabled={props.disabled || resolving()}
         class={props.baseClass}
@@ -746,6 +760,7 @@ const TagsField: Component<{
   disabled?: boolean
   baseClass: string
 }> = (props) => {
+  const strings = useMCPUIStrings()
   const [input, setInput] = createSignal('')
 
   const addTag = () => {
@@ -778,7 +793,7 @@ const TagsField: Component<{
             {(tag) => (
               <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full">
                 {tag}
-                <button type="button" onClick={() => removeTag(tag)} class="hover:text-blue-900 dark:hover:text-blue-100" aria-label={`Remove ${tag}`}>&times;</button>
+                <button type="button" onClick={() => removeTag(tag)} class="hover:text-blue-900 dark:hover:text-blue-100" aria-label={formatMCPUIString(strings.removeItem, { name: tag })}>&times;</button>
               </span>
             )}
           </For>
@@ -790,7 +805,7 @@ const TagsField: Component<{
         onInput={(e) => setInput(e.currentTarget.value)}
         onKeyDown={handleKeyDown}
         onBlur={addTag}
-        placeholder={props.placeholder || 'Type and press Enter...'}
+        placeholder={props.placeholder || strings.fieldTagsPlaceholder}
         disabled={props.disabled}
         class={props.baseClass}
       />