Merge remote-tracking branch 'origin/master' into worktree/web-remote-markdown-images

# Conflicts:
#	packages/client/ui-primitives/README.i18n.yaml
#	packages/client/ui-primitives/README.md
#	packages/client/ui-primitives/README.zh.md
#	packages/client/ui-primitives/src/markdown/MarkdownText.tsx
#	packages/client/ui-primitives/tests/markdown.spec.tsx

packages/client/ui-primitives/src/markdown/MarkdownText.tsx

@@ -1,11 +1,16 @@
-import { isValidElement } from 'react'
+import { isValidElement, useMemo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import type { Components, UrlTransform } from 'react-markdown'
+import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
 import { CodeBlock } from './CodeBlock.tsx'
+import 'katex/dist/katex.min.css'
 import css from './MarkdownText.module.css'
 
-const remarkPlugins = [remarkGfm]
+const streamingRemarkPlugins = [remarkGfm]
+const settledRemarkPlugins = [remarkGfm, remarkMath]
+const settledRehypePlugins = [rehypeKatex]
 
 function sanitizeUrl(url: string): string {
   try {
@@ -24,6 +29,14 @@ function sanitizeUrl(url: string): string {
 
 const safeUrl: UrlTransform = url => sanitizeUrl(url)
 
+/** Copy-button labels forwarded to fence CodeBlocks (this package is cordis-free, so copy arrives via props). */
+export interface MarkdownCodeLabels {
+  /** Copy-button idle label. */
+  copyLabel?: string | undefined
+  /** Copy-button label during the post-copy confirmation window. */
+  copiedLabel?: string | undefined
+}
+
 function remoteImageUrl(url: string): string | undefined {
   try {
     const protocol = new URL(url).protocol
@@ -34,7 +47,7 @@ function remoteImageUrl(url: string): string | undefined {
 }
 
 /** Build the component table; while `streaming`, fences render the plain arm (see CodeBlock). */
-function buildComponents(streaming: boolean): Components {
+function buildComponents(streaming: boolean, codeLabels?: MarkdownCodeLabels): Components {
   return {
     a: ({ href = '', children }) => {
       const safeHref = sanitizeUrl(href)
@@ -84,7 +97,14 @@ function buildComponents(streaming: boolean): Components {
       // keeps the stock <pre> rather than guessing.
       if (typeof raw !== 'string') return <pre>{children}</pre>
       const lang = /language-([\w-]+)/.exec(child?.props.className ?? '')?.[1]
-      return <CodeBlock code={raw} lang={streaming ? undefined : lang} />
+      return (
+        <CodeBlock
+          code={raw}
+          lang={streaming ? undefined : lang}
+          copyLabel={codeLabels?.copyLabel}
+          copiedLabel={codeLabels?.copiedLabel}
+        />
+      )
     },
   }
 }
@@ -95,16 +115,32 @@ const streamingComponents = buildComponents(true)
 /**
  * Render untrusted assistant-authored Markdown as semantic React elements.
  * @param props - Markdown source text preserved by the session projection;
- * `streaming` renders fences plain (highlighting lands on the finalize swap).
- * @returns A GFM document with raw HTML, relative destinations, and unsafe
- * protocols disabled; absolute HTTP(S) images render directly.
+ * `streaming` renders fences and TeX plain (highlighting and KaTeX land on the finalize swap);
+ * `codeLabels` forwards localized copy-button labels to fence CodeBlocks —
+ * pass a reference-stable object (memoized per locale revision), because the
+ * component table memoizes on its identity and a fresh literal per render
+ * would rebuild it every streaming chunk.
+ * @returns A GFM document with TeX math rendered through KaTeX; raw HTML,
+ * relative links, and unsafe protocols are disabled, while absolute HTTP(S)
+ * images render directly.
  */
-export function MarkdownText({ text, streaming = false }: { text: string; streaming?: boolean }) {
+export function MarkdownText({ text, streaming = false, codeLabels }: {
+  text: string
+  streaming?: boolean
+  codeLabels?: MarkdownCodeLabels | undefined
+}) {
+  // The label-free tables stay module-level singletons so the common case
+  // keeps referential stability across renders without a hook.
+  const components = useMemo(() => {
+    if (codeLabels === undefined) return streaming ? streamingComponents : staticComponents
+    return buildComponents(streaming, codeLabels)
+  }, [streaming, codeLabels])
   return (
     <div className={css.markdown}>
       <ReactMarkdown
-        remarkPlugins={remarkPlugins}
-        components={streaming ? streamingComponents : staticComponents}
+        remarkPlugins={streaming ? streamingRemarkPlugins : settledRemarkPlugins}
+        rehypePlugins={streaming ? undefined : settledRehypePlugins}
+        components={components}
         urlTransform={safeUrl}
       >
         {text}