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

package/src/components/VerifiedText.tsx

@@ -6,12 +6,14 @@
  *
  * Modes:
  * - highlight: ✅/⚠️ badges next to numbers (default)
- * - strip: replaces hallucinated numbers with [non vérifié]
+ * - strip: replaces hallucinated numbers with the `verifiedStripLabel`
+ *   chrome string ('[unverified]' by default)
  * - annotate: tooltip on hover with closest source number
  */
 
 import { createMemo, For } from 'solid-js'
 import type { DataValidation, HallucinatedNumber } from '../types/chat-bus'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface VerifiedTextProps {
   text: string
@@ -94,6 +96,7 @@ function buildAnnotatedSegments(text: string, validation: DataValidation): TextS
 }
 
 export function VerifiedText(props: VerifiedTextProps) {
+  const strings = useMCPUIStrings()
   const mode = () => props.mode || 'highlight'
 
   const segments = createMemo<TextSegment[]>(() => {
@@ -115,10 +118,10 @@ export function VerifiedText(props: VerifiedTextProps) {
             return (
               <span
                 class="inline-flex items-center gap-0.5 px-0.5 rounded bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-300"
-                title="Verified against source data"
+                title={strings.verifiedTitle}
               >
                 {seg.content}
-                <span class="text-xs opacity-70" aria-label="verified">&#x2705;</span>
+                <span class="text-xs opacity-70" aria-label={strings.verifiedAria}>&#x2705;</span>
               </span>
             )
           }
@@ -127,9 +130,12 @@ export function VerifiedText(props: VerifiedTextProps) {
           const h = seg.item!
           const tooltipText = () => {
             if (h.closest != null && h.distance != null) {
-              return `Not found in source data. Closest: ${h.closest} (${Math.round(h.distance * 100)}% off)`
+              return formatMCPUIString(strings.verifiedNotFoundClosest, {
+                closest: h.closest,
+                pct: Math.round(h.distance * 100),
+              })
             }
-            return 'Not found in source data'
+            return strings.verifiedNotFound
           }
 
           if (mode() === 'strip') {
@@ -138,7 +144,7 @@ export function VerifiedText(props: VerifiedTextProps) {
                 class="inline-flex items-center px-1 rounded bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 italic text-xs"
                 title={tooltipText()}
               >
-                [non v&eacute;rifi&eacute;]
+                {strings.verifiedStripLabel}
               </span>
             )
           }
@@ -151,7 +157,7 @@ export function VerifiedText(props: VerifiedTextProps) {
               role={props.onHallucinationClick ? 'button' : undefined}
             >
               {seg.content}
-              <span class="text-xs" aria-label="unverified">&#x26A0;&#xFE0F;</span>
+              <span class="text-xs" aria-label={strings.unverifiedAria}>&#x26A0;&#xFE0F;</span>
             </span>
           )
         }}
@@ -172,8 +178,12 @@ export function VerifiedText(props: VerifiedTextProps) {
             />
           </div>
           <span>
-            {Math.round(props.validation.confidence * 100)}% verified
-            ({props.validation.hallucinated.length} unverified)
+            {formatMCPUIString(strings.verifiedConfidence, {
+              pct: Math.round(props.validation.confidence * 100),
+            })}{' '}
+            {formatMCPUIString(strings.verifiedUnverifiedCount, {
+              count: props.validation.hallucinated.length,
+            })}
           </span>
         </div>
       )}

package/src/components/VideoRenderer.tsx

@@ -8,6 +8,10 @@
 import { Component, createMemo, Show } from 'solid-js'
 import type { UIComponent, VideoComponentParams } from '../types'
 import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
+import { useMCPUIConfig } from '../context/MCPUIConfigContext'
+import { shouldSetCredentialless } from '../utils/iframe-coep'
+import { IframeFallbackLink } from './IframeFallbackLink'
 
 export interface VideoRendererProps {
   /**
@@ -74,6 +78,8 @@ function parseVideoUrl(url: string): VideoInfo {
 }
 
 export const VideoRenderer: Component<VideoRendererProps> = (props) => {
+  const strings = useMCPUIStrings()
+  const config = useMCPUIConfig()
   const params = () => props.params || (props.component?.params as VideoComponentParams)
   const isExpanded = useExpanded()
 
@@ -135,9 +141,9 @@ export const VideoRenderer: Component<VideoRendererProps> = (props) => {
 
   return (
     <ExpandableWrapper
-      title={params()?.title || 'Video'}
+      title={params()?.title || strings.videoTitle}
       copyData={params()?.url || ''}
-      copyLabel="Copy video URL"
+      copyLabel={strings.videoCopy}
       toolbarVariant={props.toolbarVariant}
     >
     <div class={`w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${
@@ -168,22 +174,38 @@ export const VideoRenderer: Component<VideoRendererProps> = (props) => {
               onError={handleVideoError}
             >
               <track kind="captions" />
-              Your browser does not support the video tag.
+              {strings.videoUnsupported}
             </video>
           }
         >
           {/* YouTube/Vimeo embed */}
           <iframe
             src={embedUrl()!}
-            title={params()?.title || 'Video'}
+            title={params()?.title || strings.videoTitle}
             class="absolute inset-0 w-full h-full"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
             allowfullscreen
+            // v6.21.0 — youtube-nocookie / player.vimeo are not trusted hosts,
+            // so under COEP `credentialless` is what lets them load at all.
+            // `attr:` + `true | undefined` — see the note in `IframeRenderer`.
+            attr:credentialless={
+              // No sandbox here: a YouTube/Vimeo embed keeps its provider
+              // cookies, so `'auto'` leaves it alone and a COEP host opts in
+              // with `iframeCredentialless: 'always'`.
+              shouldSetCredentialless(embedUrl()!, config, {
+                sandboxedWithoutSameOrigin: false,
+              }) || undefined
+            }
             loading="lazy"
           />
         </Show>
       </div>
 
+      {/* v6.21.0 — a COEP-blocked embed is silent; this link is the way out. */}
+      <Show when={embedUrl()}>
+        <IframeFallbackLink url={params()?.url || ''} />
+      </Show>
+
       {/* Caption */}
       <Show when={params()?.caption}>
         <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">

package/src/components/chart-data-table.ts

@@ -1,3 +1,44 @@
+import { formatMCPUIString } from '../utils/format-string';
+
+/**
+ * Column headers and series names of the accessible chart data table.
+ *
+ * `chartToDataTable` is a pure helper with no access to `MCPUIStrings`, so
+ * the wording is injected: it takes an optional trailing `labels` partial,
+ * which `ChartJSRenderer` feeds from `useMCPUIStrings()`. Left out, the
+ * English defaults below apply — the pre-v6.20.0 behaviour.
+ *
+ * `x` / `y` / `r` stay untranslated on purpose: they are the Chart.js point
+ * property NAMES the cells mirror, not prose.
+ *
+ * @since v6.20.0
+ */
+export interface ChartDataTableLabels {
+  /** Series column of the per-point table. */
+  series: string;
+  /** Point-index column of the per-point table. */
+  point: string;
+  /** Label column (categorical table, and per-point table when labelled). */
+  label: string;
+  /** Fallback dataset name. Template — `{n}`. */
+  seriesName: string;
+  /** Chart.js point property names — machine tokens, rarely overridden. */
+  x: string;
+  y: string;
+  r: string;
+}
+
+/** English defaults for {@link ChartDataTableLabels}. */
+export const CHART_DATA_TABLE_LABELS: ChartDataTableLabels = {
+  series: 'Series',
+  point: 'Point',
+  label: 'Label',
+  seriesName: 'Series {n}',
+  x: 'x',
+  y: 'y',
+  r: 'r',
+};
+
 export interface ChartDataTable {
   columns: string[];
   rows: Array<Array<string | number>>;
@@ -41,37 +82,41 @@ function isPoint(value: unknown): value is Record<string, unknown> {
  * coordinates. Categorical charts use a compact wide table; scatter, bubble,
  * and object-valued line charts use one row per point so x/y/r remain distinct.
  */
-export function chartToDataTable(params: ChartDataLike): ChartDataTable {
+export function chartToDataTable(
+  params: ChartDataLike,
+  labels?: Partial<ChartDataTableLabels>
+): ChartDataTable {
+  const l: ChartDataTableLabels = { ...CHART_DATA_TABLE_LABELS, ...labels };
   const datasets = params.data?.datasets ?? [];
-  const labels = params.data?.labels ?? [];
+  const dataLabels = params.data?.labels ?? [];
   const pointData =
     params.type === 'scatter' ||
     params.type === 'bubble' ||
     datasets.some((dataset) => dataset.data?.some(isPoint));
 
   if (pointData) {
-    const hasLabels = labels.length > 0;
+    const hasLabels = dataLabels.length > 0;
     const hasRadius =
       params.type === 'bubble' ||
       datasets.some((dataset) => dataset.data?.some((value) => isPoint(value) && 'r' in value));
     const columns = [
-      'Series',
-      'Point',
-      ...(hasLabels ? ['Label'] : []),
-      'x',
-      'y',
-      ...(hasRadius ? ['r'] : []),
+      l.series,
+      l.point,
+      ...(hasLabels ? [l.label] : []),
+      l.x,
+      l.y,
+      ...(hasRadius ? [l.r] : []),
     ];
     const rows: Array<Array<string | number>> = [];
 
     datasets.forEach((dataset, datasetIndex) => {
-      const series = dataset.label || `Series ${datasetIndex + 1}`;
+      const series = dataset.label || formatMCPUIString(l.seriesName, { n: datasetIndex + 1 });
       (dataset.data ?? []).forEach((value, pointIndex) => {
         const point = isPoint(value) ? value : { y: value };
         rows.push([
           series,
           pointIndex + 1,
-          ...(hasLabels ? [tableCell(labels[pointIndex])] : []),
+          ...(hasLabels ? [tableCell(dataLabels[pointIndex])] : []),
           tableCell(point.x),
           tableCell(point.y),
           ...(hasRadius ? [tableCell(point.r)] : []),
@@ -82,13 +127,22 @@ export function chartToDataTable(params: ChartDataLike): ChartDataTable {
     return { columns, rows };
   }
 
-  const rowCount = Math.max(labels.length, ...datasets.map((dataset) => dataset.data?.length ?? 0), 0);
-  const columns = ['Label', ...datasets.map((dataset, index) => dataset.label || `Series ${index + 1}`)];
+  const rowCount = Math.max(
+    dataLabels.length,
+    ...datasets.map((dataset) => dataset.data?.length ?? 0),
+    0
+  );
+  const columns = [
+    l.label,
+    ...datasets.map(
+      (dataset, index) => dataset.label || formatMCPUIString(l.seriesName, { n: index + 1 })
+    ),
+  ];
   const rows: Array<Array<string | number>> = [];
 
   for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
     rows.push([
-      tableCell(labels[rowIndex] ?? rowIndex + 1),
+      tableCell(dataLabels[rowIndex] ?? rowIndex + 1),
       ...datasets.map((dataset) => tableCell(dataset.data?.[rowIndex])),
     ]);
   }

package/src/context/MCPActionContext.tsx

@@ -4,6 +4,7 @@
  */
 
 import { createContext, createSignal, useContext, ParentComponent, Accessor } from 'solid-js'
+import { useMCPUIStrings } from './MCPUIStringsContext'
 
 /**
  * Action request payload
@@ -223,6 +224,8 @@ const defaultExecutor = async (request: ActionRequest): Promise<ActionResult> =>
  * ```
  */
 export const MCPActionProvider: ParentComponent<MCPActionProviderProps> = (props) => {
+  // The error of a failed action can be rendered by FormRenderer.
+  const strings = useMCPUIStrings()
   const [isExecuting, setIsExecuting] = createSignal(false)
   const [lastResult, setLastResult] = createSignal<ActionResult>()
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -270,7 +273,7 @@ export const MCPActionProvider: ParentComponent<MCPActionProviderProps> = (props
     } catch (error) {
       const errorResult: ActionResult = {
         success: false,
-        error: error instanceof Error ? error.message : 'Unknown error',
+        error: error instanceof Error ? error.message : strings.errorUnknown,
         timestamp: new Date().toISOString(),
         toolName: request.toolName,
       }

package/src/context/MCPUIConfigContext.tsx

@@ -0,0 +1,151 @@
+/**
+ * MCPUIConfigContext — host-level rendering policy for the library's iframes.
+ *
+ * @since v6.21.0
+ *
+ * ## Why
+ *
+ * A host that serves `Cross-Origin-Embedder-Policy: credentialless` makes the
+ * browser refuse every cross-origin iframe whose own document does not send a
+ * COEP header — which is YouTube, Vimeo, Google Docs, Notion and nearly all of
+ * `DEFAULT_IFRAME_DOMAINS`. The escape hatch is the boolean HTML attribute
+ * `credentialless` on the `<iframe>` itself: the document then loads, but
+ * without access to the cookies and storage of its own origin.
+ *
+ * That trade-off is free for a public video or chart and fatal for an
+ * authenticated embed, so the library keys it on the distinction it already
+ * makes: `TRUSTED_IFRAME_DOMAINS` (the hosts that receive `allow-same-origin`
+ * because they need their own cookies) do NOT get the attribute; everything
+ * else does. This context lets a host override that, add its own trusted
+ * hosts, and control the "open in a new tab" fallback link.
+ *
+ * ## Scope — policy only, NOT strings
+ *
+ * Text lives in `MCPUIStrings` (`MCPUIStringsContext`). This context carries
+ * only behavioural switches, and like the strings context every renderer works
+ * standalone: with no provider mounted, `DEFAULT_MCPUI_CONFIG` applies.
+ *
+ * @example
+ * ```tsx
+ * import { MCPUIConfigProvider } from '@seed-ship/mcp-ui-solid'
+ *
+ * <MCPUIConfigProvider config={{ customTrustedIframeDomains: ['embed.acme.com'] }}>
+ *   <App />
+ * </MCPUIConfigProvider>
+ * ```
+ */
+
+import { createContext, mergeProps, useContext, type JSX } from 'solid-js'
+import type { IframePolicy } from '../types'
+
+/**
+ * Host-level rendering policy. Every field has a default — a provider passes
+ * a partial override.
+ */
+export interface MCPUIConfig {
+  /**
+   * When the library puts the boolean `credentialless` attribute on an
+   * `<iframe>` it renders.
+   *
+   * - `'auto'` (default) — on every iframe whose host is NOT in
+   *   `TRUSTED_IFRAME_DOMAINS` (plus `customTrustedIframeDomains`). Those
+   *   hosts already ran without cookies, since their sandbox has no
+   *   `allow-same-origin`; the attribute is what unblocks them under COEP.
+   * - `'always'` — on every iframe, trusted hosts included. An authenticated
+   *   embed will then render its login screen.
+   * - `'never'` — never. The right value for a host that sends no COEP header
+   *   and does not want its embeds to lose their cookies.
+   *
+   * Chrome/Edge 110+ honour the attribute; Firefox ignores it (iframes stay
+   * blocked while the host sends COEP); Safari ignores the COEP value itself,
+   * so nothing is blocked there in the first place.
+   */
+  iframeCredentialless: 'auto' | 'always' | 'never'
+
+  /**
+   * Extra hosts treated as trusted, on top of `TRUSTED_IFRAME_DOMAINS`:
+   * no `credentialless` attribute, and `allow-same-origin` in the sandbox.
+   * A subdomain of a listed host matches too.
+   *
+   * This only RECLASSIFIES a host the allow-list already accepts. To render an
+   * iframe whose host is outside `DEFAULT_IFRAME_DOMAINS`, add it to
+   * {@link MCPUIConfig.customIframeDomains} with `iframePolicy: 'extend'`.
+   */
+  customTrustedIframeDomains: string[]
+
+  /**
+   * How `UIResourceRenderer` validates an `iframe` component's host:
+   * `'strict'` (default) accepts `DEFAULT_IFRAME_DOMAINS` only, `'extend'`
+   * also accepts {@link MCPUIConfig.customIframeDomains}.
+   */
+  iframePolicy: IframePolicy
+
+  /**
+   * Extra hosts the allow-list accepts when `iframePolicy` is `'extend'`.
+   * Without this, a component pointing at an unlisted host is replaced by the
+   * validation card before any renderer runs.
+   */
+  customIframeDomains: string[]
+
+  /**
+   * When the library renders an "open in a new tab" link under an embed
+   * (`strings.iframeOpenInNewTab`).
+   *
+   * A COEP-blocked iframe fires no event the parent page can observe, so
+   * without this the user sees an unexplained blank frame.
+   *
+   * - `'auto'` (default) — only when the page is cross-origin isolated
+   *   (`window.crossOriginIsolated`). That flag needs COOP `same-origin` AND
+   *   COEP, so a host that sends COEP alone still blocks embeds while the
+   *   flag is false: set `'always'` there. Read after mount, never during
+   *   render, so SSR markup and hydration agree.
+   * - `'always'` / `'never'` — unconditional.
+   */
+  iframeFallbackLink: 'auto' | 'always' | 'never'
+}
+
+/**
+ * Defaults. Chosen so a host that sends no COEP header sees no change from
+ * 6.20.0 apart from the fallback link, which `'auto'` keeps hidden there.
+ */
+export const DEFAULT_MCPUI_CONFIG: MCPUIConfig = {
+  iframeCredentialless: 'auto',
+  customTrustedIframeDomains: [],
+  iframePolicy: 'strict',
+  customIframeDomains: [],
+  iframeFallbackLink: 'auto',
+}
+
+export const MCPUIConfigContext = createContext<MCPUIConfig>(DEFAULT_MCPUI_CONFIG)
+
+/**
+ * Reads the active host config. Returns `DEFAULT_MCPUI_CONFIG` when no
+ * `<MCPUIConfigProvider>` is mounted above.
+ */
+export function useMCPUIConfig(): MCPUIConfig {
+  return mergeProps(DEFAULT_MCPUI_CONFIG, useContext(MCPUIConfigContext))
+}
+
+export interface MCPUIConfigProviderProps {
+  /**
+   * Partial override of the host config. Any key left unset falls back to
+   * `DEFAULT_MCPUI_CONFIG`.
+   */
+  config?: Partial<MCPUIConfig>
+  children: JSX.Element
+}
+
+/**
+ * Provides the host config to every MCP-UI renderer below it.
+ * Merges the partial `config` override over the defaults.
+ */
+export function MCPUIConfigProvider(props: MCPUIConfigProviderProps): JSX.Element {
+  // The function source keeps replacement `config` objects reactive while
+  // mergeProps fills any omitted key without taking a one-time snapshot.
+  const value = mergeProps(DEFAULT_MCPUI_CONFIG, () => props.config)
+  return (
+    <MCPUIConfigContext.Provider value={value}>
+      {props.children}
+    </MCPUIConfigContext.Provider>
+  )
+}