@seed-ship/mcp-ui-solid 6.22.0 → 6.24.0

package/src/components/ChartJSRenderer.tsx

@@ -32,7 +32,17 @@ import type { Accessor, JSX } from 'solid-js';
 import type { UIComponent, ChartComponentParams } from '../types';
 import { ExpandableWrapper, useExpanded } from './ExpandableWrapper';
 import { DegradedFallback } from './DegradedFallback';
+import { MissingValueLegend, MissingValueMark } from './MissingValue';
 import { chartToDataTable } from './chart-data-table';
+import {
+  applyUnitAxisTitle,
+  createMissingLegendGenerator,
+  createMissingValuesPlugin,
+  createTooltipLabel,
+  missingNoteKind,
+  withDatasetsNoGapSpan,
+} from './chart-missing-plugin';
+import { PART_TO_WHOLE_CHART_TYPES, summarizeChartMissing } from '../utils/missing-value';
 import { useTelemetry } from '../context/MCPUITelemetryContext';
 import { useMCPUIConfig } from '../context/MCPUIConfigContext';
 import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext';
@@ -320,9 +330,51 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
       point: strings.chartTablePoint,
       label: strings.degradedColLabel,
       seriesName: strings.degradedSeries,
+      withUnit: strings.chartLabelWithUnit,
     })
   );
+  // Absence is never zero: which entries are missing, and which series have
+  // nothing at all. Drives the notes, the plugin, the legend and the guard.
+  const missingSummary = createMemo(() => summarizeChartMissing(params()));
+  const unit = () => {
+    const value = params().unit;
+    return typeof value === 'string' && value !== '' ? value : undefined;
+  };
+  const anyMissingCell = () => tableData().missing.some((row) => row.some(Boolean));
+  // Never for a part-to-whole chart: it refuses missing values outright (the
+  // render effect turns it into the data table), so no convention applies —
+  // and the async guard must not leave a wrong note in the SSR markup.
+  const notesShown = () =>
+    missingSummary().hasMissing &&
+    !PART_TO_WHOLE_CHART_TYPES.has(params().type) &&
+    activeView() === 'chart' &&
+    !error();
+  const noteKind = () => missingNoteKind(params().type, params().options);
+  // The convention line explains a mark the reader can SEE: every missing bar
+  // gets a dashed stub, but a line or a scatter only shows an absence inside a
+  // series that still has values — a series with no value at all draws
+  // nothing, and the "no data" line alone covers it.
+  const conventionNoteShown = () =>
+    noteKind() === 'bars'
+      ? missingSummary().hasMissing
+      : missingSummary().partiallyMissing.some(Boolean);
+  // The series the chart has no data for, as a locale-aware list.
+  const noDataSeries = () => {
+    const names = (params().data?.datasets ?? [])
+      .map((dataset, index) =>
+        missingSummary().fullyMissing[index]
+          ? dataset?.label || formatMCPUIString(strings.degradedSeries, { n: index + 1 })
+          : null
+      )
+      .filter((name): name is string => name !== null);
+    try {
+      return new Intl.ListFormat(strings.locale, { type: 'conjunction' }).format(names);
+    } catch {
+      return names.join(', ');
+    }
+  };
   const descriptionId = createUniqueId();
+  const notesId = createUniqueId();
   const title = () => params().title || strings.chartView;
 
   // v6.1.0 — export visibility :
@@ -456,6 +508,8 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
     // plugin options at construction and the plugin only hooks charts created
     // after it was registered).
     const chartParams = params();
+    const chartMissing = missingSummary();
+    const chartUnit = unit();
     const zoom = zoomOptions();
     const version = ++renderVersion;
 
@@ -474,6 +528,14 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
         chartInstance = null;
       }
 
+      // A share of a whole cannot be missing: Chart.js parses `null` as 0 and
+      // would draw it as a zero slice. Validation rejects this earlier; this
+      // is the guard for a host that bypassed it. Thrown here so the catch
+      // below shows the data table (with the missing cells marked).
+      if (chartMissing.hasMissing && PART_TO_WHOLE_CHART_TYPES.has(chartParams.type)) {
+        throw new Error(strings.chartMissingUnsupported);
+      }
+
       // Build options, merging time-axis config if present (v3.1.0)
       const hostZoomOptions = chartParams.options?.plugins?.zoom;
       const baseOptions: any = {
@@ -517,12 +579,69 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
         };
       }
 
-      // Create new chart
-      chartInstance = new Chart(canvasRef, {
+      // Unit (v6.24.0): value-axis title and tooltip suffix. Both are no-ops
+      // on a payload without a unit.
+      applyUnitAxisTitle(baseOptions, chartParams.type, chartUnit);
+
+      const chartConfig: any = {
         type: chartParams.type,
         data: chartParams.data,
         options: baseOptions,
-      });
+      };
+
+      if (chartUnit !== undefined || chartMissing.hasMissing) {
+        const tooltip = baseOptions.plugins.tooltip;
+        // `tooltip: false` (or `null`) is Chart.js's per-chart plugin opt-out:
+        // the payload turned tooltips off, and adding a callback object here
+        // would turn them back on. A host-supplied label callback is the
+        // host's word too. Both are left exactly as written.
+        if (tooltip !== false && tooltip !== null && !tooltip?.callbacks?.label) {
+          baseOptions.plugins.tooltip = {
+            ...tooltip,
+            callbacks: {
+              ...tooltip?.callbacks,
+              label: createTooltipLabel(() => strings, chartUnit, chartParams.type),
+            },
+          };
+        }
+      }
+
+      if (chartMissing.hasMissing) {
+        // A line must break at a missing value, not join its neighbours.
+        chartConfig.data = withDatasetsNoGapSpan(chartParams.data);
+
+        // Legend of a fully-missing series: "{series} (no data)". Dataset
+        // legends only — pie-like legends list categories, not series.
+        const defaultGenerate =
+          baseOptions.plugins.legend?.labels?.generateLabels ??
+          Chart?.defaults?.plugins?.legend?.labels?.generateLabels;
+        if (typeof defaultGenerate === 'function') {
+          baseOptions.plugins.legend = {
+            ...baseOptions.plugins.legend,
+            labels: {
+              ...baseOptions.plugins.legend?.labels,
+              generateLabels: createMissingLegendGenerator(
+                defaultGenerate,
+                chartMissing.fullyMissing,
+                () => strings
+              ),
+            },
+          };
+        }
+
+        // Per-chart plugin (never `Chart.register`): the dashed stub of a
+        // missing bar, and "no data" on a chart with nothing to plot.
+        chartConfig.plugins = [
+          createMissingValuesPlugin({
+            allMissing: chartMissing.allMissing,
+            getNoDataText: () => strings.chartNoData,
+            getFontFamily: () => Chart?.defaults?.font?.family,
+          }),
+        ];
+      }
+
+      // Create new chart
+      chartInstance = new Chart(canvasRef, chartConfig);
 
       // A freshly built chart always sits on its initial viewport, so the
       // reset control goes away until the user zooms again.
@@ -761,12 +880,17 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
               </thead>
               <tbody>
                 <For each={tableData().rows}>
-                  {(row) => (
+                  {(row, rowIndex) => (
                     <tr class="border-t border-gray-100 dark:border-gray-700">
                       <For each={tableData().columns}>
                         {(_column, index) => (
                           <td class="px-3 py-2 text-gray-700 dark:text-gray-300">
-                            {String(row[index()] ?? '')}
+                            <Show
+                              when={tableData().missing[rowIndex()]?.[index()]}
+                              fallback={String(row[index()] ?? '')}
+                            >
+                              <MissingValueMark />
+                            </Show>
                           </td>
                         )}
                       </For>
@@ -786,6 +910,9 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
               </tbody>
             </table>
           </div>
+          <Show when={anyMissingCell()}>
+            <MissingValueLegend class="mt-2" />
+          </Show>
         </Show>
 
         <div
@@ -802,7 +929,7 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
             ref={canvasRef}
             role="img"
             aria-label={title()}
-            aria-describedby={descriptionId}
+            aria-describedby={notesShown() ? `${descriptionId} ${notesId}` : descriptionId}
             aria-hidden={activeView() !== 'chart' || Boolean(error())}
           />
           <Show when={isLoading() && activeView() === 'chart'}>
@@ -814,6 +941,32 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
             </div>
           </Show>
         </div>
+
+        {/* Missing values (v6.24.0): how THIS chart type shows them, and which
+            series have no data at all. Linked from the canvas, so a screen
+            reader hears the convention with the chart. */}
+        <Show when={notesShown()}>
+          <div
+            data-mcp-chart-notes=""
+            id={notesId}
+            class="mt-2 space-y-0.5 text-xs text-gray-600 dark:text-gray-400"
+          >
+            <Show when={conventionNoteShown()}>
+              <p data-mcp-chart-note={noteKind()}>
+                {noteKind() === 'bars'
+                  ? strings.chartMissingBars
+                  : noteKind() === 'omitted'
+                    ? strings.chartMissingPoints
+                    : strings.chartMissingGaps}
+              </p>
+            </Show>
+            <Show when={missingSummary().fullyMissing.some(Boolean)}>
+              <p data-mcp-chart-note="no-data">
+                {formatMCPUIString(strings.chartSeriesNoData, { series: noDataSeries() })}
+              </p>
+            </Show>
+          </div>
+        </Show>
           </div>
         )}
       />

package/src/components/DegradedFallback.tsx

@@ -17,6 +17,7 @@
 
 import { Component, For, Show } from 'solid-js';
 import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext';
+import { MissingValueLegend, MissingValueMark } from './MissingValue';
 
 export interface DegradedFallbackProps {
   /** Short, human-readable reason the native render was skipped/failed. */
@@ -35,6 +36,13 @@ export interface DegradedFallbackProps {
   caption?: string;
   /** Max rows to render before truncating (default 50). */
   maxRows?: number;
+  /**
+   * Same shape as `rows`: `true` marks a cell whose value is missing, which
+   * renders as `<MissingValueMark/>` instead of its text. A
+   * `<MissingValueLegend/>` follows the table when a SHOWN cell is missing.
+   * Omitted, the output is unchanged. @since v6.24.0
+   */
+  missing?: boolean[][];
 }
 
 export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
@@ -43,6 +51,15 @@ export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
   const allRows = () => props.rows ?? [];
   const shownRows = () => allRows().slice(0, maxRows());
   const hiddenCount = () => Math.max(0, allRows().length - shownRows().length);
+  const isMissing = (rowIndex: number, colIndex: number) =>
+    props.missing?.[rowIndex]?.[colIndex] === true;
+  const anyShownMissing = () => {
+    const columnCount = props.columns?.length ?? 0;
+    return shownRows().some((_row, r) => {
+      for (let c = 0; c < columnCount; c += 1) if (isMissing(r, c)) return true;
+      return false;
+    });
+  };
   const hasTable = () => (props.columns?.length ?? 0) > 0 && allRows().length > 0;
 
   return (
@@ -69,12 +86,14 @@ export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
             </thead>
             <tbody>
               <For each={shownRows()}>
-                {(row) => (
+                {(row, rowIndex) => (
                   <tr class="border-t border-amber-100 dark:border-amber-800/60">
                     <For each={props.columns}>
                       {(_col, i) => (
                         <td class="px-2 py-1 text-amber-800 dark:text-amber-200">
-                          {String(row[i()] ?? '')}
+                          <Show when={isMissing(rowIndex(), i())} fallback={String(row[i()] ?? '')}>
+                            <MissingValueMark />
+                          </Show>
                         </td>
                       )}
                     </For>
@@ -84,6 +103,9 @@ export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
             </tbody>
           </table>
         </div>
+        <Show when={anyShownMissing()}>
+          <MissingValueLegend class="mt-2" />
+        </Show>
         <Show when={hiddenCount() > 0}>
           <p class="mt-1 text-[10px] text-amber-600 dark:text-amber-400">
             {formatMCPUIString(strings.degradedMoreRows, { count: hiddenCount() })}

package/src/components/MissingValue.tsx

@@ -0,0 +1,61 @@
+/**
+ * The visible and accessible marks of a missing value (v6.24.0).
+ *
+ * A table cell with no value has always shown `-`. On its own that glyph says
+ * nothing to a screen reader (it is read as "dash", or skipped) and it is easy
+ * to take for a zero or a minus sign. These two components give it a meaning:
+ *
+ * - {@link MissingValueMark} — the cell content: the `-` hidden from
+ *   assistive technology, followed by `strings.missingValue` hidden from
+ *   sight. Visually-hidden through an inline style rather than Tailwind's
+ *   `sr-only`, so the text cannot leak on a host whose Tailwind build does
+ *   not scan this package.
+ * - {@link MissingValueLegend} — one line under a table or data view that
+ *   contains a missing value, so the convention never has to be guessed.
+ *
+ * Both are SSR-safe: no browser API, and the same markup on server and client.
+ */
+
+import type { Component, JSX } from 'solid-js'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
+import { MISSING_VALUE_MARKER } from '../utils/missing-value'
+
+/** The classic visually-hidden recipe: in the accessibility tree, out of sight. */
+export const VISUALLY_HIDDEN_STYLE: JSX.CSSProperties = {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: '0',
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  'white-space': 'nowrap',
+  border: '0',
+}
+
+/** Content of a cell whose value is missing. */
+export const MissingValueMark: Component = () => {
+  const strings = useMCPUIStrings()
+  return (
+    <span data-mcp-missing-value="">
+      <span aria-hidden="true" class="text-gray-400 dark:text-gray-500">
+        {MISSING_VALUE_MARKER}
+      </span>
+      <span style={VISUALLY_HIDDEN_STYLE}>{strings.missingValue}</span>
+    </span>
+  )
+}
+
+/** The legend line explaining the missing-value glyph. */
+export const MissingValueLegend: Component<{ class?: string }> = (props) => {
+  const strings = useMCPUIStrings()
+  return (
+    <p
+      data-mcp-missing-legend=""
+      role="note"
+      class={`text-xs text-gray-500 dark:text-gray-400 ${props.class ?? ''}`}
+    >
+      {formatMCPUIString(strings.missingValueLegend, { marker: MISSING_VALUE_MARKER })}
+    </p>
+  )
+}

package/src/components/UIResourceRenderer.tsx

@@ -28,6 +28,8 @@ import {
   useMCPUIStrings,
 } from '../context/MCPUIStringsContext'
 import { useMCPUIConfig } from '../context/MCPUIConfigContext'
+import { isMissingCellValue, stripUndefinedDebris } from '../utils/missing-value'
+import { MissingValueLegend, MissingValueMark } from './MissingValue'
 import { shouldSetCredentialless } from '../utils/iframe-coep'
 import { IframeFallbackLink } from './IframeFallbackLink'
 
@@ -67,6 +69,8 @@ import { RenderProvider } from './RenderContext'
 import { useAction } from '../hooks/useAction'
 import { createResponsiveGrid } from '../hooks/createResponsiveGrid'
 import { marked } from 'marked'
+import { useMCPUIMath, type MathRenderer } from '../context/MCPUIMathContext'
+import { parseMathMarkdown } from '../utils/math-markdown'
 
 /**
  * Copy button component with visual feedback
@@ -345,6 +349,7 @@ function ChartRenderer(props: {
                 caption={strings.chartQuickchartCaption}
                 {...chartToDegradedTable(params() ?? {}, {
                   series: strings.degradedSeries,
+                  withUnit: strings.chartLabelWithUnit,
                 })}
               />
             </div>
@@ -443,6 +448,9 @@ export function highlightQuery(html: string, query: string): string {
   const walker = document.createTreeWalker(template.content, NodeFilter.SHOW_TEXT)
   const textNodes: Text[] = []
   for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    // A HTML <mark> inside MathML can change or break its layout/semantics.
+    // Keep formulas intact; ordinary text around them remains searchable.
+    if (node.parentElement?.closest('math')) continue
     textNodes.push(node as Text)
   }
 
@@ -595,7 +603,7 @@ function transformCellCitations(text: string, ctx: CitationCtx): string {
   )
 }
 
-export function renderCellValue(value: any, citationCtx?: CitationCtx): string {
+export function renderCellValue(value: any, citationCtx?: CitationCtx, mathRenderer?: MathRenderer): string {
   // Handle null/undefined
   if (value === null || value === undefined) {
     return '-'
@@ -634,9 +642,10 @@ export function renderCellValue(value: any, citationCtx?: CitationCtx): string {
 
   // Clean up "undefined" patterns from backend data
   // Pattern 1: "Text – undefined" or "Text - undefined" → "Text"
-  strValue = strValue.replace(/\s*[–-]\s*undefined\s*$/gi, '')
   // Pattern 2: "undefined – Text" or "undefined - Text" → "Text"
-  strValue = strValue.replace(/^undefined\s*[–-]\s*/gi, '')
+  // (shared with `isMissingCellValue`, so the cells shown as `-` and the cells
+  // the table marks and explains as missing can never drift apart)
+  strValue = stripUndefinedDebris(strValue)
   // Pattern 3: standalone "undefined" → "-"
   if (strValue.trim().toLowerCase() === 'undefined') {
     return '-'
@@ -646,6 +655,18 @@ export function renderCellValue(value: any, citationCtx?: CitationCtx): string {
     return '-'
   }
 
+  // Math must be tokenized before Markdown or citation rewrites can consume
+  // TeX underscores or bracket arguments (e.g. \sqrt[3]{x}). The opt-in path
+  // transforms citations only in ordinary text tokens, never math/code/URLs.
+  if (mathRenderer && strValue.includes('$')) {
+    return parseMathMarkdown(
+      strValue,
+      mathRenderer,
+      'cellMarkdown',
+      citationCtx ? (text) => transformCellCitations(text, citationCtx) : undefined,
+    )
+  }
+
   // Detect and convert markdown links: [text](url) — runs FIRST because
   // the citation transform's negative lookahead `(?!\()` would also skip
   // these, but handling them here keeps the existing return path.
@@ -706,6 +727,7 @@ function TableRenderer(props: {
   const tableParams = props.component.params as any
   let scrollContainerRef: HTMLDivElement | undefined
   const strings = useMCPUIStrings()
+  const mathRenderer = useMCPUIMath()
 
   // v5.7.0 — opt-in citation chip rendering inside cells. When `citationMap`
   // is present in params, build a CitationCtx once and thread it through
@@ -748,12 +770,18 @@ function TableRenderer(props: {
     const dir = sortDir()
     if (!key || !dir) return r
     const col = columns().find((c: any) => c.key === key)
-    const isNum = col?.type === 'number' || (r.length > 0 && typeof r[0]?.[key] === 'number')
+    // v6.24.0 — numeric mode is decided from the first NON-missing value, so a
+    // missing first row no longer flips a numeric column to string order.
+    const firstObserved = r.find((row: any) => !isMissingCellValue(row?.[key]))?.[key]
+    const isNum = col?.type === 'number' || typeof firstObserved === 'number'
     return [...r].sort((a: any, b: any) => {
       const va = a[key], vb = b[key]
-      if (va == null && vb == null) return 0
-      if (va == null) return 1
-      if (vb == null) return -1
+      // Missing values (null, undefined, '', 'undefined', '-') sort last in
+      // both directions — never as 0 and never first.
+      const missA = isMissingCellValue(va), missB = isMissingCellValue(vb)
+      if (missA && missB) return 0
+      if (missA) return 1
+      if (missB) return -1
       let cmp: number
       if (isNum) {
         cmp = (Number(va) || 0) - (Number(vb) || 0)
@@ -802,7 +830,7 @@ function TableRenderer(props: {
     return sortedRows().filter((row: any) =>
       cols.some((col: any) => {
         const val = row[col.key]
-        if (val == null) return false
+        if (isMissingCellValue(val)) return false
         return normalize(String(val)).includes(q)
       })
     )
@@ -997,6 +1025,14 @@ function TableRenderer(props: {
 
   const tableId = `table-${Math.random().toString(36).slice(2, 9)}`
 
+  // v6.24.0 — whether ANY declared cell of ANY row is missing. Deliberately
+  // computed on all rows (not the current page / filter) so the legend does not
+  // flicker while paging, sorting or searching.
+  const hasMissingCells = createMemo(() => {
+    const cols = columns()
+    return allRows().some((row: any) => cols.some((col: any) => isMissingCellValue(row?.[col.key])))
+  })
+
   // Standard table body (non-virtualized) — uses client pagination when active
   const StandardTableBody = () => (
     <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
@@ -1006,7 +1042,12 @@ function TableRenderer(props: {
             <For each={tableParams.columns}>
               {(column: any) => (
                 <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-200 whitespace-normal break-words leading-relaxed first:pl-6 last:pr-6">
-                  <SafeHtml html={() => highlightQuery(renderCellValue(row[column.key], citationCtx), debouncedQuery())} />
+                  <Show
+                    when={!isMissingCellValue(row[column.key])}
+                    fallback={<MissingValueMark />}
+                  >
+                    <SafeHtml html={() => highlightQuery(renderCellValue(row[column.key], citationCtx, mathRenderer()), debouncedQuery())} />
+                  </Show>
                 </td>
               )}
             </For>
@@ -1045,7 +1086,12 @@ function TableRenderer(props: {
                 <For each={tableParams.columns}>
                   {(column: any) => (
                     <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-200 whitespace-normal break-words leading-relaxed first:pl-6 last:pr-6">
-                      <SafeHtml html={() => highlightQuery(renderCellValue(row[column.key], citationCtx), debouncedQuery())} />
+                      <Show
+                        when={!isMissingCellValue(row[column.key])}
+                        fallback={<MissingValueMark />}
+                      >
+                        <SafeHtml html={() => highlightQuery(renderCellValue(row[column.key], citationCtx, mathRenderer()), debouncedQuery())} />
+                      </Show>
                     </td>
                   )}
                 </For>
@@ -1204,6 +1250,11 @@ function TableRenderer(props: {
             </table>
           </div>
 
+          {/* Missing-value legend (v6.24.0) — outside the scroll region, before pagination */}
+          <Show when={hasMissingCells()}>
+            <MissingValueLegend class="mt-2 px-1" />
+          </Show>
+
           {/* Server-side pagination (legacy) */}
           <Show when={tableParams.pagination}>
             <div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
@@ -1362,6 +1413,7 @@ function extractImageFromMarkdown(
  */
 function TextRenderer(props: { component: UIComponent }) {
   const strings = useMCPUIStrings()
+  const mathRenderer = useMCPUIMath()
   const textParams = props.component.params as any
 
   // Check if this is an image markdown that should be rendered as image
@@ -1399,6 +1451,8 @@ function TextRenderer(props: { component: UIComponent }) {
       return escapeHtml(String(raw))
     }
     if (textParams.markdown && !imageData()) {
+      const renderMath = mathRenderer()
+      if (renderMath) return parseMathMarkdown(String(raw), renderMath, 'prose')
       return sanitizeHtml(marked.parse(raw, { async: false }) as string, SANITIZE_PROFILES.prose)
     }
     return sanitizeHtml(String(raw), SANITIZE_PROFILES.prose)

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

@@ -1,4 +1,5 @@
 import { formatMCPUIString } from '../utils/format-string';
+import { isMissingChartValue } from '../utils/missing-value';
 
 /**
  * Column headers and series names of the accessible chart data table.
@@ -26,10 +27,17 @@ export interface ChartDataTableLabels {
   x: string;
   y: string;
   r: string;
+  /**
+   * A value column header followed by the chart's `unit`. Template — `{label}`,
+   * `{unit}`. Only applied when the chart has a unit. Optional so that a
+   * complete labels table written for 6.20.0–6.23.0 still type-checks.
+   * @since v6.24.0
+   */
+  withUnit?: string;
 }
 
 /** English defaults for {@link ChartDataTableLabels}. */
-export const CHART_DATA_TABLE_LABELS: ChartDataTableLabels = {
+export const CHART_DATA_TABLE_LABELS: Required<ChartDataTableLabels> = {
   series: 'Series',
   point: 'Point',
   label: 'Label',
@@ -37,11 +45,20 @@ export const CHART_DATA_TABLE_LABELS: ChartDataTableLabels = {
   x: 'x',
   y: 'y',
   r: 'r',
+  withUnit: '{label} ({unit})',
 };
 
 export interface ChartDataTable {
   columns: string[];
   rows: Array<Array<string | number>>;
+  /**
+   * Same shape as `rows`: `true` for a VALUE cell whose source entry is
+   * missing (`null` / non-finite, or a point whose `y` is). A slot past the
+   * end of a shorter or empty dataset has no entry and is not flagged. Label,
+   * series, point-index, `x` and `r` cells are never missing. `rows` itself
+   * still holds `''` there. @since v6.24.0
+   */
+  missing: boolean[][];
 }
 
 interface ChartDatasetLike {
@@ -51,6 +68,8 @@ interface ChartDatasetLike {
 
 export interface ChartDataLike {
   type?: string;
+  /** Unit of the values: appended to the value column headers. @since v6.24.0 */
+  unit?: string;
   data?: {
     labels?: Array<string | number>;
     datasets?: ChartDatasetLike[];
@@ -87,6 +106,10 @@ export function chartToDataTable(
   labels?: Partial<ChartDataTableLabels>
 ): ChartDataTable {
   const l: ChartDataTableLabels = { ...CHART_DATA_TABLE_LABELS, ...labels };
+  const unit = typeof params.unit === 'string' && params.unit !== '' ? params.unit : undefined;
+  const unitTemplate = l.withUnit ?? CHART_DATA_TABLE_LABELS.withUnit;
+  const withUnit = (label: string) =>
+    unit === undefined ? label : formatMCPUIString(unitTemplate, { label, unit });
   const datasets = params.data?.datasets ?? [];
   const dataLabels = params.data?.labels ?? [];
   const pointData =
@@ -104,10 +127,11 @@ export function chartToDataTable(
       l.point,
       ...(hasLabels ? [l.label] : []),
       l.x,
-      l.y,
+      withUnit(l.y),
       ...(hasRadius ? [l.r] : []),
     ];
     const rows: Array<Array<string | number>> = [];
+    const missing: boolean[][] = [];
 
     datasets.forEach((dataset, datasetIndex) => {
       const series = dataset.label || formatMCPUIString(l.seriesName, { n: datasetIndex + 1 });
@@ -121,10 +145,20 @@ export function chartToDataTable(
           tableCell(point.y),
           ...(hasRadius ? [tableCell(point.r)] : []),
         ]);
+        // Only the y cell can be missing; a bare entry is its own y.
+        const yMissing = isMissingChartValue(isPoint(value) ? point.y : value);
+        missing.push([
+          false,
+          false,
+          ...(hasLabels ? [false] : []),
+          false,
+          yMissing,
+          ...(hasRadius ? [false] : []),
+        ]);
       });
     });
 
-    return { columns, rows };
+    return { columns, rows, missing };
   }
 
   const rowCount = Math.max(
@@ -134,18 +168,28 @@ export function chartToDataTable(
   );
   const columns = [
     l.label,
-    ...datasets.map(
-      (dataset, index) => dataset.label || formatMCPUIString(l.seriesName, { n: index + 1 })
+    ...datasets.map((dataset, index) =>
+      withUnit(dataset.label || formatMCPUIString(l.seriesName, { n: index + 1 }))
     ),
   ];
   const rows: Array<Array<string | number>> = [];
+  const missing: boolean[][] = [];
 
   for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
     rows.push([
       tableCell(dataLabels[rowIndex] ?? rowIndex + 1),
       ...datasets.map((dataset) => tableCell(dataset.data?.[rowIndex])),
     ]);
+    // Only an ENTRY can be missing: a slot past the end of a shorter (or
+    // empty) dataset has no entry, and renders as before (an empty cell).
+    missing.push([
+      false,
+      ...datasets.map(
+        (dataset) =>
+          rowIndex < (dataset.data?.length ?? 0) && isMissingChartValue(dataset.data?.[rowIndex])
+      ),
+    ]);
   }
 
-  return { columns, rows };
+  return { columns, rows, missing };
 }