@vertesia/ui 1.6.0-dev.20261008.064737Z → 1.6.0-dev.20261014.015055Z

package/src/features/agent/chat/ModernAgentOutput/AllMessagesMixed.tsx

@@ -43,6 +43,7 @@ import {
 } from '../workstreams.js';
 import { createAgentMarkdownAnchor } from './AgentMarkdownAnchor';
 import { AttachmentPreviewList, parseUserMessageAttachments } from './AttachmentPreview';
+import { agentMarkdownStyles } from './agentMarkdownStyles.js';
 import BatchProgressPanel, { type BatchProgressPanelClassNames } from './BatchProgressPanel';
 import {
     AGENT_LINE_CLAMP_CLASS,
@@ -3118,259 +3119,7 @@ function AllMessagesMixedComponent({
             data-view-mode={viewMode}
         >
             {/* Global styles for vprose markdown content */}
-            <style>{`
-                /* Better vertical rhythm for markdown */
-                .vprose > * + * {
-                    margin-top: 0.625rem;
-                }
-                .vprose > h1 + *,
-                .vprose > h2 + *,
-                .vprose > h3 + * {
-                    margin-top: 0.375rem;
-                }
-                /* Tables should read like part of the conversation, not a separate app grid. */
-                .vprose table {
-                    margin-top: 0.875rem;
-                    margin-bottom: 0.875rem;
-                    border-collapse: collapse;
-                    width: 100%;
-                    background: transparent;
-                }
-                .vprose th,
-                .vprose td {
-                    padding: 0.5rem 0.625rem;
-                    border: 0;
-                    border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
-                    background: transparent;
-                    text-align: left;
-                }
-                .vprose thead th {
-                    background: transparent;
-                    font-weight: 600;
-                    color: var(--muted);
-                    font-size: 0.75rem;
-                    text-transform: none;
-                    letter-spacing: 0;
-                }
-                .vprose tbody tr:hover {
-                    background: transparent;
-                }
-                /* Dark mode table styles */
-                .dark .vprose th,
-                .dark .vprose td {
-                    border-color: color-mix(in oklch, var(--border) 70%, transparent);
-                }
-                .dark .vprose thead th {
-                    background: transparent;
-                    color: var(--muted);
-                }
-                .dark .vprose tbody tr:hover {
-                    background: transparent;
-                }
-                /* Horizontal rules as section dividers */
-                .vprose hr {
-                    margin-top: 1rem;
-                    margin-bottom: 1rem;
-                    border-color: var(--border);
-                }
-                /* Better blockquote styling */
-                .vprose blockquote {
-                    margin-top: 0.875rem;
-                    margin-bottom: 0.875rem;
-                    padding-left: 1rem;
-                    border-left-width: 3px;
-                    border-left-color: var(--border);
-                    color: var(--muted);
-                }
-                /* Code blocks */
-                .vprose pre {
-                    margin-top: 0.75rem;
-                    margin-bottom: 0.75rem;
-                    padding: 0.75rem;
-                    border-radius: 0.5rem;
-                    overflow-x: auto;
-                    background-color: var(--muted-background);
-                    color: var(--foreground);
-                }
-                .vprose pre code {
-                    color: inherit;
-                }
-                .dark .vprose pre {
-                    color: var(--foreground);
-                }
-
-                /* Summary chat markdown: keep structure, but match the app's quieter conversation surface. */
-                .agent-markdown {
-                    color: color-mix(in oklch, var(--foreground) 78%, transparent);
-                    font-size: 0.875rem;
-                    line-height: 1.625;
-                    overflow-x: auto;
-                }
-                .agent-markdown > * + * {
-                    margin-top: 0.65rem;
-                }
-                .agent-markdown p {
-                    margin-top: 0.5rem;
-                    margin-bottom: 0.5rem;
-                }
-                .agent-markdown h1,
-                .agent-markdown h2,
-                .agent-markdown h3,
-                .agent-markdown h4 {
-                    margin-top: 1.2rem;
-                    margin-bottom: 0.45rem;
-                    color: var(--foreground);
-                    font-weight: 650;
-                    letter-spacing: 0;
-                    line-height: 1.3;
-                }
-                .agent-markdown h1 {
-                    font-size: 1.2rem;
-                }
-                .agent-markdown h2 {
-                    font-size: 1.05rem;
-                }
-                .agent-markdown h3,
-                .agent-markdown h4 {
-                    font-size: 0.95rem;
-                }
-                .agent-markdown h1:first-child,
-                .agent-markdown h2:first-child,
-                .agent-markdown h3:first-child,
-                .agent-markdown h4:first-child {
-                    margin-top: 0;
-                }
-                .agent-markdown hr {
-                    margin: 1.15rem 0;
-                    border: 0;
-                    border-top: 1px solid var(--border);
-                    opacity: 0.65;
-                }
-                .agent-markdown ul,
-                .agent-markdown ol {
-                    margin-top: 0.55rem;
-                    margin-bottom: 0.55rem;
-                    padding-left: 1.25rem;
-                }
-                .agent-markdown li {
-                    margin-top: 0.2rem;
-                    margin-bottom: 0.2rem;
-                    padding-left: 0.1rem;
-                    color: inherit;
-                }
-                .agent-markdown li::marker {
-                    color: var(--muted);
-                }
-                .agent-markdown strong {
-                    color: var(--foreground);
-                    font-weight: 600;
-                }
-                .agent-markdown em {
-                    color: color-mix(in oklch, var(--foreground) 72%, transparent);
-                }
-                .agent-markdown a {
-                    color: var(--foreground);
-                    text-decoration-color: var(--muted);
-                    text-underline-offset: 3px;
-                }
-                .agent-markdown blockquote {
-                    margin-top: 0.85rem;
-                    margin-bottom: 0.85rem;
-                    padding-left: 0.875rem;
-                    border-left: 2px solid var(--border);
-                    color: var(--muted);
-                    font-style: normal;
-                }
-                .agent-markdown :not(pre) > code {
-                    border: 1px solid var(--border);
-                    border-radius: 0.375rem;
-                    background: var(--muted);
-                    color: var(--foreground);
-                    padding: 0.1rem 0.35rem;
-                    font-size: 0.8125em;
-                    font-weight: 500;
-                }
-                .agent-markdown pre {
-                    margin-top: 0.85rem;
-                    margin-bottom: 0.85rem;
-                    max-height: 32rem;
-                    overflow: auto;
-                    border: 1px solid var(--border);
-                    border-radius: 0.75rem;
-                    background: var(--muted);
-                    color: var(--foreground);
-                    padding: 0.875rem;
-                    font-size: 0.8125rem;
-                    line-height: 1.55;
-                }
-                .agent-markdown pre code {
-                    border: 0;
-                    background: transparent;
-                    color: inherit;
-                    padding: 0;
-                    font-size: inherit;
-                }
-                .agent-markdown table {
-                    display: table;
-                    width: 100%;
-                    max-width: 100%;
-                    margin: 0.9rem 0 1rem;
-                    border: 0;
-                    border-collapse: collapse;
-                    border-spacing: 0;
-                    font-size: 0.8125rem;
-                    table-layout: fixed;
-                    background: transparent;
-                }
-                .agent-markdown thead {
-                    background: transparent;
-                }
-                .agent-markdown th,
-                .agent-markdown td {
-                    border: 0;
-                    border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
-                    background: transparent;
-                    padding: 0.55rem 0.75rem;
-                    text-align: left;
-                    vertical-align: top;
-                    overflow-wrap: anywhere;
-                    word-break: normal;
-                    white-space: normal;
-                }
-                .agent-markdown th {
-                    color: var(--muted);
-                    font-size: 0.75rem;
-                    font-weight: 600;
-                    letter-spacing: 0;
-                    text-transform: none;
-                    white-space: nowrap;
-                }
-                .agent-markdown td {
-                    color: inherit;
-                }
-                .agent-markdown th + th,
-                .agent-markdown td + td {
-                    padding-inline-start: 1.75rem;
-                }
-                .agent-markdown th:first-child,
-                .agent-markdown td:first-child {
-                    min-width: 0;
-                    width: auto;
-                    white-space: normal;
-                }
-                .agent-markdown col {
-                    width: var(--agent-markdown-table-column-width);
-                }
-                .agent-markdown tr:last-child td {
-                    border-bottom: 0;
-                }
-                .agent-markdown tbody tr:nth-child(even) {
-                    background: transparent;
-                }
-                .agent-markdown tbody tr:hover {
-                    background: transparent;
-                }
-            `}</style>
+            <style>{agentMarkdownStyles}</style>
 
             {/* Workstream tabs are a debug affordance; Summary keeps the conversation surface quiet. */}
             {viewMode === 'stacked' && (

package/src/features/agent/chat/ModernAgentOutput/CollapsibleAgentMarkdown.tsx

@@ -3,15 +3,9 @@ import { useUITranslation } from '@vertesia/ui/i18n';
 import { MarkdownRenderer, type MarkdownRendererProps } from '@vertesia/ui/widgets';
 import { ChevronDown } from 'lucide-react';
 import { useState } from 'react';
+import { AGENT_PROSE_CLASS } from './agentMarkdownStyles.js';
 
-/** Prose styling used for agent/model message markdown, shared across the conversation UI. */
-export const AGENT_PROSE_CLASS = [
-    'agent-markdown vprose prose max-w-none break-words text-sm leading-6 text-foreground/80',
-    'prose-p:my-2 prose-p:leading-6 prose-li:my-0.5 prose-pre:my-3 prose-headings:tracking-normal',
-    'prose-headings:text-foreground prose-strong:text-foreground prose-code:text-foreground',
-    'prose-a:text-foreground prose-a:underline prose-a:decoration-muted prose-a:underline-offset-4',
-    '[&_p]:text-foreground/80 [&_li]:text-foreground/80 [&_li::marker]:text-muted',
-].join(' ');
+export { AGENT_PROSE_CLASS } from './agentMarkdownStyles.js';
 
 /** Clamp applied to collapsed markdown. Kept as a literal so Tailwind emits the utility. */
 export const AGENT_LINE_CLAMP_CLASS =

package/src/features/agent/chat/ModernAgentOutput/SummaryConversation.ts

@@ -281,6 +281,54 @@ function isSummaryWorkMessage(message: AgentMessage): boolean {
     return message.type === AgentMessageType.THOUGHT && !message.details?.streamed;
 }
 
+function isEmptyAnswerMessage(message: AgentMessage): boolean {
+    return message.type === AgentMessageType.ANSWER && !getMessageText(message);
+}
+
+function isToolPreambleProse(message: AgentMessage): boolean {
+    const text = getMessageText(message);
+    return message.details?.display_role === 'tool_preamble' && Boolean(text) && !isLowSignalSummaryText(text);
+}
+
+// Tools a model tends to call last, with its answer written as that call's preamble.
+const ANSWER_CARRYING_TOOLS = new Set(['update_plan']);
+
+function getFinalToolPreambleProseIndex(messages: AgentMessage[]): number {
+    // Check the latest preamble before filtering its text, so an empty or low-signal
+    // final preamble cannot make us fall back to prose from an earlier call.
+    const index = messages.findLastIndex(isToolPreambleMessage);
+    if (index < 0 || !isToolPreambleProse(messages[index])) return -1;
+
+    const details = messages[index].details;
+    const tools = details?.tools?.length ? details.tools : details?.tool ? [details.tool] : [];
+    if (tools.length === 0 || !tools.every((tool) => ANSWER_CARRYING_TOOLS.has(tool))) return -1;
+
+    let iteration = details?.tool_iteration;
+    let hasMatchingTool = false;
+    const toolRuns = new Map<string, Set<string>>();
+    for (const message of messages.slice(index + 1)) {
+        const tool = message.details?.tool;
+        if (!tool) continue;
+        // A later call without a preamble must not reuse an earlier call's prose.
+        if (!tools.includes(tool)) return -1;
+        const runId = message.details?.tool_run_id ?? message.details?.tool_use_id;
+        if (runId) {
+            const runs = toolRuns.get(tool) ?? new Set<string>();
+            runs.add(runId);
+            toolRuns.set(tool, runs);
+            if (runs.size > tools.filter((name) => name === tool).length) return -1;
+        }
+        const toolIteration = message.details?.tool_iteration;
+        if (toolIteration !== undefined) {
+            if (iteration !== undefined && iteration !== toolIteration) return -1;
+            iteration = toolIteration;
+        }
+        hasMatchingTool = true;
+    }
+
+    return hasMatchingTool ? index : -1;
+}
+
 export function buildSummaryConversationItems(
     messages: AgentMessage[],
     isCompleted: boolean,
@@ -332,6 +380,18 @@ export function buildSummaryConversationItems(
             }
         }
 
+        if (isEmptyAnswerMessage(message)) {
+            // A model that writes its answer alongside a last tool call leaves that prose as a
+            // tool preamble and ends the turn on an empty answer; show the prose as the answer.
+            const proseIndex = getFinalToolPreambleProseIndex(pendingWork);
+            if (proseIndex >= 0) {
+                const [prose] = pendingWork.splice(proseIndex, 1);
+                flushWork(false, message);
+                items.push({ type: 'message', message: { ...message, message: prose.message } });
+            }
+            continue;
+        }
+
         if (message.type === AgentMessageType.COMPLETE || message.type === AgentMessageType.IDLE) {
             if (isUserStoppedMessage(message)) {
                 const pendingWorkStartTimestamp = pendingWork[0]?.timestamp;

package/src/features/agent/chat/ModernAgentOutput/agentMarkdownStyles.ts

@@ -0,0 +1,248 @@
+/** Prose styling used for agent/model message markdown, shared across the conversation UI. */
+export const AGENT_PROSE_CLASS = [
+    'agent-markdown vprose prose max-w-none break-words text-sm leading-6 text-foreground/80',
+    'prose-p:my-2 prose-p:leading-6 prose-li:my-0.5 prose-pre:my-3 prose-headings:tracking-normal',
+    'prose-headings:text-foreground prose-strong:text-foreground prose-code:text-foreground',
+    'prose-a:text-foreground prose-a:underline prose-a:decoration-muted prose-a:underline-offset-4',
+    'prose-p:text-foreground/80 prose-li:text-foreground/80 prose-li:marker:text-muted',
+].join(' ');
+
+// Shared with rendered regression checks so they exercise the styles the chat actually injects.
+export const agentMarkdownStyles = `
+/* Better vertical rhythm for markdown */
+.vprose > * + *:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.625rem;
+}
+.vprose > h1 + *:not(:where(.not-prose, .not-prose *)),
+.vprose > h2 + *:not(:where(.not-prose, .not-prose *)),
+.vprose > h3 + *:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.375rem;
+}
+/* Tables should read like part of the conversation, not a separate app grid. */
+.vprose table:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.875rem;
+    margin-bottom: 0.875rem;
+    border-collapse: collapse;
+    width: 100%;
+    background: transparent;
+}
+.vprose th:not(:where(.not-prose, .not-prose *)),
+.vprose td:not(:where(.not-prose, .not-prose *)) {
+    padding: 0.5rem 0.625rem;
+    border: 0;
+    border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
+    background: transparent;
+    text-align: left;
+}
+.vprose thead th:not(:where(.not-prose, .not-prose *)) {
+    background: transparent;
+    font-weight: 600;
+    color: var(--muted);
+    font-size: 0.75rem;
+    text-transform: none;
+    letter-spacing: 0;
+}
+.vprose tbody tr:hover:not(:where(.not-prose, .not-prose *)) {
+    background: transparent;
+}
+/* Horizontal rules as section dividers */
+.vprose hr:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    border-color: var(--border);
+}
+/* Better blockquote styling */
+.vprose blockquote:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.875rem;
+    margin-bottom: 0.875rem;
+    padding-left: 1rem;
+    border-left-width: 3px;
+    border-left-color: var(--border);
+    color: var(--muted);
+}
+/* Code blocks */
+.vprose pre:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    background-color: var(--muted-background);
+    color: var(--foreground);
+}
+.vprose pre code:not(:where(.not-prose, .not-prose *)) {
+    color: inherit;
+}
+
+/* Summary chat markdown: keep structure, but match the app's quieter conversation surface. */
+.agent-markdown:not(:where(.not-prose, .not-prose *)) {
+    color: color-mix(in oklch, var(--foreground) 78%, transparent);
+    font-size: 0.875rem;
+    line-height: 1.625;
+    overflow-x: auto;
+}
+.agent-markdown > * + *:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.65rem;
+}
+.agent-markdown p:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+.agent-markdown h1:not(:where(.not-prose, .not-prose *)),
+.agent-markdown h2:not(:where(.not-prose, .not-prose *)),
+.agent-markdown h3:not(:where(.not-prose, .not-prose *)),
+.agent-markdown h4:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 1.2rem;
+    margin-bottom: 0.45rem;
+    color: var(--foreground);
+    font-weight: 650;
+    letter-spacing: 0;
+    line-height: 1.3;
+}
+.agent-markdown h1:not(:where(.not-prose, .not-prose *)) {
+    font-size: 1.2rem;
+}
+.agent-markdown h2:not(:where(.not-prose, .not-prose *)) {
+    font-size: 1.05rem;
+}
+.agent-markdown h3:not(:where(.not-prose, .not-prose *)),
+.agent-markdown h4:not(:where(.not-prose, .not-prose *)) {
+    font-size: 0.95rem;
+}
+.agent-markdown h1:first-child:not(:where(.not-prose, .not-prose *)),
+.agent-markdown h2:first-child:not(:where(.not-prose, .not-prose *)),
+.agent-markdown h3:first-child:not(:where(.not-prose, .not-prose *)),
+.agent-markdown h4:first-child:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0;
+}
+.agent-markdown hr:not(:where(.not-prose, .not-prose *)) {
+    margin: 1.15rem 0;
+    border: 0;
+    border-top: 1px solid var(--border);
+    opacity: 0.65;
+}
+.agent-markdown ul:not(:where(.not-prose, .not-prose *)),
+.agent-markdown ol:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.55rem;
+    margin-bottom: 0.55rem;
+    padding-left: 1.25rem;
+}
+.agent-markdown li:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.2rem;
+    margin-bottom: 0.2rem;
+    padding-left: 0.1rem;
+    color: inherit;
+}
+.agent-markdown li:not(:where(.not-prose, .not-prose *))::marker {
+    color: var(--muted);
+}
+.agent-markdown strong:not(:where(.not-prose, .not-prose *)) {
+    color: var(--foreground);
+    font-weight: 600;
+}
+.agent-markdown em:not(:where(.not-prose, .not-prose *)) {
+    color: color-mix(in oklch, var(--foreground) 72%, transparent);
+}
+.agent-markdown a:not(:where(.not-prose, .not-prose *)) {
+    color: var(--foreground);
+    text-decoration-color: var(--muted);
+    text-underline-offset: 3px;
+}
+.agent-markdown blockquote:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.85rem;
+    margin-bottom: 0.85rem;
+    padding-left: 0.875rem;
+    border-left: 2px solid var(--border);
+    color: var(--muted);
+    font-style: normal;
+}
+.agent-markdown :not(pre) > code:not(:where(.not-prose, .not-prose *)) {
+    border: 1px solid var(--border);
+    border-radius: 0.375rem;
+    background: var(--muted-background);
+    color: var(--foreground);
+    padding: 0.1rem 0.35rem;
+    font-size: 0.8125em;
+    font-weight: 500;
+}
+.agent-markdown pre:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.85rem;
+    margin-bottom: 0.85rem;
+    max-height: 32rem;
+    overflow: auto;
+    border: 1px solid var(--border);
+    border-radius: 0.75rem;
+    background: var(--muted-background);
+    color: var(--foreground);
+    padding: 0.875rem;
+    font-size: 0.8125rem;
+    line-height: 1.55;
+}
+.agent-markdown pre code:not(:where(.not-prose, .not-prose *)) {
+    border: 0;
+    background: transparent;
+    color: inherit;
+    padding: 0;
+    font-size: inherit;
+}
+.agent-markdown table:not(:where(.not-prose, .not-prose *)) {
+    display: table;
+    width: 100%;
+    max-width: 100%;
+    margin: 0.9rem 0 1rem;
+    border: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-size: 0.8125rem;
+    table-layout: fixed;
+    background: transparent;
+}
+.agent-markdown thead:not(:where(.not-prose, .not-prose *)) {
+    background: transparent;
+}
+.agent-markdown th:not(:where(.not-prose, .not-prose *)),
+.agent-markdown td:not(:where(.not-prose, .not-prose *)) {
+    border: 0;
+    border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
+    background: transparent;
+    padding: 0.55rem 0.75rem;
+    text-align: left;
+    vertical-align: top;
+    overflow-wrap: anywhere;
+    word-break: normal;
+    white-space: normal;
+}
+.agent-markdown th:not(:where(.not-prose, .not-prose *)) {
+    color: var(--muted);
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0;
+    text-transform: none;
+    white-space: nowrap;
+}
+.agent-markdown td:not(:where(.not-prose, .not-prose *)) {
+    color: inherit;
+}
+.agent-markdown th + th:not(:where(.not-prose, .not-prose *)),
+.agent-markdown td + td:not(:where(.not-prose, .not-prose *)) {
+    padding-inline-start: 1.75rem;
+}
+.agent-markdown th:first-child:not(:where(.not-prose, .not-prose *)),
+.agent-markdown td:first-child:not(:where(.not-prose, .not-prose *)) {
+    min-width: 0;
+    width: auto;
+    white-space: normal;
+}
+.agent-markdown col:not(:where(.not-prose, .not-prose *)) {
+    width: var(--agent-markdown-table-column-width);
+}
+.agent-markdown tr:last-child td:not(:where(.not-prose, .not-prose *)) {
+    border-bottom: 0;
+}
+.agent-markdown tbody tr:nth-child(even):not(:where(.not-prose, .not-prose *)) {
+    background: transparent;
+}
+.agent-markdown tbody tr:hover:not(:where(.not-prose, .not-prose *)) {
+    background: transparent;
+}
+`;

package/src/features/agent/chat/SkillWidgetProvider.tsx

@@ -142,8 +142,9 @@ async function fetchSkillWidgets(
                     }
                     return widgets;
                 })
-                .catch(() => {
-                    console.error('Failed to fetch skill widgets from ', url);
+                .catch((err: unknown) => {
+                    // The chat still renders; only that app's custom widgets are missing.
+                    console.warn('Failed to fetch skill widgets from', url, err);
                     return null;
                 });
         }),

package/src/i18n/LanguageProvider.tsx

@@ -1,21 +1,30 @@
 import { DirectionProvider } from '@radix-ui/react-direction';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { isRTL, resolveLanguage, type SupportedLanguage } from './rtl.js';
+import { isRTL, LANGUAGE_STORAGE_KEY, resolveLanguage, type SupportedLanguage } from './rtl.js';
 
 type LanguageProviderProps = {
     children: React.ReactNode;
     defaultLanguage?: SupportedLanguage;
+    /**
+     * Pin the language this app renders in, whatever the saved choice or browser language. The
+     * user's own language is still tracked, and exposed as `preferredLanguage`.
+     */
+    language?: SupportedLanguage;
     storageKey?: string;
 };
 
 type LanguageProviderState = {
+    /** The language the app renders in. */
     language: SupportedLanguage;
+    /** The user's own language (saved choice, then browser); equals `language` unless pinned. */
+    preferredLanguage: SupportedLanguage;
     setLanguage: (language: SupportedLanguage, options?: { persist?: boolean }) => void;
     isRTL: boolean;
 };
 
 const initialState: LanguageProviderState = {
     language: 'en',
+    preferredLanguage: 'en',
     setLanguage: () => null,
     isRTL: false,
 };
@@ -36,12 +45,14 @@ function readInitialLanguage(storageKey: string, defaultLanguage: SupportedLangu
 export function LanguageProvider({
     children,
     defaultLanguage = 'en',
-    storageKey = 'vertesia-ui-language',
+    language: pinnedLanguage,
+    storageKey = LANGUAGE_STORAGE_KEY,
     ...props
 }: LanguageProviderProps) {
-    const [language, setLanguageState] = useState<SupportedLanguage>(() =>
+    const [preferredLanguage, setLanguageState] = useState<SupportedLanguage>(() =>
         readInitialLanguage(storageKey, defaultLanguage),
     );
+    const language = pinnedLanguage ?? preferredLanguage;
 
     const rtl = isRTL(language);
 
@@ -62,10 +73,11 @@ export function LanguageProvider({
     const value = useMemo<LanguageProviderState>(
         () => ({
             language,
+            preferredLanguage,
             isRTL: rtl,
             setLanguage,
         }),
-        [language, rtl, setLanguage],
+        [language, preferredLanguage, rtl, setLanguage],
     );
 
     return (