@data-club/ai-hub 0.0.1 → 0.0.3

package/src/components/ChatShell/UserMenu.tsx

@@ -84,7 +84,20 @@ export function UserMenu(props: UserMenuProps): ReactNode {
     if (!open) return;
     function handleClick(e: MouseEvent): void {
       const node = wrapRef.current;
-      if (node && !node.contains(e.target as Node)) {
+      if (!node) return;
+      // Shadow-DOM safety: when this component is packaged as a Web Component
+      // (`defineWebComponent`), events that bubble to `document` are
+      // *retargeted* so `e.target` becomes the host element, never the clicked
+      // node inside the shadow root. `node.contains(e.target)` would then be
+      // false for clicks on the button itself, so a second click could never
+      // toggle the menu closed. `composedPath()` crosses the shadow boundary
+      // and lists the real nodes the event traversed; fall back to `e.target`
+      // where it isn't available.
+      const path =
+        typeof e.composedPath === "function" ? e.composedPath() : [];
+      const clickedInside =
+        path.length > 0 ? path.includes(node) : node.contains(e.target as Node);
+      if (!clickedInside) {
         setOpen(false);
       }
     }

package/src/components/ChatShell/index.tsx

@@ -16,10 +16,10 @@
 import { useEffect, useMemo, type ReactNode } from "react";
 
 import {
-  resolveAIHubTexts,
   type AIHubTexts,
   type DeepPartial,
 } from "../../auth/texts.js";
+import { useResolvedTexts } from "../../context/useAIHubTexts.js";
 import { useAIHub } from "../../context/useAIHub.js";
 import {
   resolveAffordanceFlags,
@@ -171,7 +171,7 @@ export function ChatShell(props: ChatShellProps): ReactNode {
     setActiveSession,
     featureToggles,
   } = useAIHub();
-  const texts = resolveAIHubTexts(props.texts);
+  const texts = useResolvedTexts(props.texts);
   const productName = props.productName ?? "ai-hub";
   const showAgentsPicker = props.showAgentsPicker ?? true;
   const sessionsPanelPosition = props.sessionsPanelPosition ?? "left";

package/src/components/DataClubAIHub/index.tsx

@@ -40,7 +40,7 @@ import type {
 import type {
   AIHubChangePasswordClassNames,
 } from "../ChangePassword/index.js";
-import type { AIHubTexts, DeepPartial } from "../../auth/texts.js";
+import type { AIHubLanguage, AIHubTexts, DeepPartial } from "../../auth/texts.js";
 
 /**
  * Props for `<DataClubAIHub />`.
@@ -66,6 +66,12 @@ export interface DataClubAIHubProps {
   usernamePlaceholder?: string;
   /** Wrapper-supplied i18n. */
   texts?: DeepPartial<AIHubTexts>;
+  /**
+   * Fallback UI language before `/auth/me` resolves and when no per-device
+   * choice is cached. The server's `language_default` wins after hydration.
+   * Built-in locales: `"en"` | `"cs"` | `"sk"`. Defaults to `"en"`.
+   */
+  defaultLanguage?: AIHubLanguage;
   /** Per-element class overrides for the login screen. */
   loginClassNames?: Partial<AIHubLoginClassNames>;
   /** Per-element class overrides for the change-password screen. */
@@ -161,6 +167,10 @@ export function DataClubAIHub(props: DataClubAIHubProps): ReactNode {
     <AIHubProvider
       baseUrl={baseUrl}
       {...(props.defaultTheme !== undefined ? { defaultTheme: props.defaultTheme } : {})}
+      {...(props.defaultLanguage !== undefined
+        ? { defaultLanguage: props.defaultLanguage }
+        : {})}
+      {...(props.texts !== undefined ? { texts: props.texts } : {})}
     >
       <AuthGate
         {...(props.productName !== undefined ? { productName: props.productName } : {})}

package/src/components/DataClubAIHubAdmin/SessionsOverviewPage.tsx

@@ -33,6 +33,7 @@ import type {
 } from "../../client/AIHubClient.js";
 import { useAIHub } from "../../context/useAIHub.js";
 import { useAIHubAuth } from "../../context/useAIHubAuth.js";
+import { formatRelativeTime } from "../../util/relativeTime.js";
 import type { AIHubMessage } from "../../types.js";
 import { ReasoningView } from "../ReasoningView/index.js";
 import { ToolCallView, type ToolCallStatus } from "../ToolCallView/index.js";
@@ -48,21 +49,6 @@ type StatusFilter = "active" | "archived" | "all";
 /** Page size — matches the spec's default of 50. */
 const PAGE_SIZE = 50;
 
-/** Format an ISO date as a short relative "x ago" string. */
-function formatLastMessage(iso: string): string {
-  const date = Date.parse(iso);
-  if (Number.isNaN(date)) return iso;
-  const diffMs = Date.now() - date;
-  if (diffMs < 60_000) return "just now";
-  const minutes = Math.floor(diffMs / 60_000);
-  if (minutes < 60) return `${minutes} min ago`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  if (days < 7) return `${days}d ago`;
-  return new Date(date).toISOString().slice(0, 10);
-}
-
 /** Props for `<AdminSessionsOverviewPage />`. */
 export interface AdminSessionsOverviewPageProps {
   /** Resolved admin texts. */
@@ -78,7 +64,7 @@ export interface AdminSessionsOverviewPageProps {
 export function AdminSessionsOverviewPage(
   props: AdminSessionsOverviewPageProps,
 ): ReactNode {
-  const { client } = useAIHub();
+  const { client, language } = useAIHub();
 
   const [view, setView] = useState<View>({ kind: "list" });
 
@@ -337,7 +323,7 @@ export function AdminSessionsOverviewPage(
                   <td>{s.title}</td>
                   <td>{s.owner_username}</td>
                   <td>{s.agent_display_name}</td>
-                  <td>{formatLastMessage(s.updated_at)}</td>
+                  <td>{formatRelativeTime(s.updated_at, language, { absoluteAfterDays: 7 })}</td>
                   <td>
                     <button
                       type="button"
@@ -407,7 +393,7 @@ interface AdminSessionDetailProps {
  * detail browses arbitrary sessions outside the chat context.
  */
 function AdminSessionDetail(props: AdminSessionDetailProps): ReactNode {
-  const { client } = useAIHub();
+  const { client, language } = useAIHub();
   const auth = useAIHubAuth();
   const isSuperAdmin = auth.user?.role === "super_admin";
   const { session, texts } = props;
@@ -552,7 +538,7 @@ function AdminSessionDetail(props: AdminSessionDetailProps): ReactNode {
             >
               <div className="data-club-ai-hub-admin__readonly-meta">
                 <strong>{m.role}</strong>
-                <span>{formatLastMessage(m.created_at)}</span>
+                <span>{formatRelativeTime(m.created_at, language, { absoluteAfterDays: 7 })}</span>
               </div>
               <div className="data-club-ai-hub-admin__readonly-content">
                 {m.content}

package/src/components/DataClubAIHubAdmin/SettingsPage.tsx

@@ -26,10 +26,14 @@
  */
 import { useEffect, useState, type ReactNode } from "react";
 
-import type { AIHubAdminTexts } from "../../auth/texts.js";
+import type { AIHubAdminTexts, AIHubLanguage } from "../../auth/texts.js";
 import type { AdminSettingsView } from "../../client/AIHubClient.js";
 import { useAIHub } from "../../context/useAIHub.js";
 import { useAIHubAuth } from "../../context/useAIHubAuth.js";
+import {
+  formatAbsoluteDate,
+  formatRelativeDay,
+} from "../../util/relativeTime.js";
 import type { AIHubFeatureToggles } from "../../types.js";
 
 /** All feature-toggle keys per §8.4. */
@@ -86,16 +90,14 @@ function defaultToggleValue(): boolean {
   return true;
 }
 
-/** Format ISO date as `YYYY-MM-DD (N days ago)`. */
-function formatRotationStamp(iso: string | null): string | null {
+/** Format ISO date as `<localized date> (<localized N days ago>)`. */
+function formatRotationStamp(
+  iso: string | null,
+  language: AIHubLanguage,
+): string | null {
   if (iso === null) return null;
-  const ts = Date.parse(iso);
-  if (Number.isNaN(ts)) return iso;
-  const dateOnly = new Date(ts).toISOString().slice(0, 10);
-  const diffDays = Math.floor((Date.now() - ts) / (24 * 60 * 60 * 1000));
-  if (diffDays <= 0) return `${dateOnly} (today)`;
-  if (diffDays === 1) return `${dateOnly} (1 day ago)`;
-  return `${dateOnly} (${diffDays} days ago)`;
+  if (Number.isNaN(Date.parse(iso))) return iso;
+  return `${formatAbsoluteDate(iso, language)} (${formatRelativeDay(iso, language)})`;
 }
 
 /** Props for `<AdminSettingsPage />`. */
@@ -181,6 +183,11 @@ export function AdminSettingsPage(props: AdminSettingsPageProps): ReactNode {
             texts={props.texts}
             onSaved={handleSectionSaved}
           />
+          <LanguageSection
+            settings={settings}
+            texts={props.texts}
+            onSaved={handleSectionSaved}
+          />
           <FeatureTogglesSection
             settings={settings}
             texts={props.texts}
@@ -525,6 +532,120 @@ function ThemeSection(props: ThemeSectionProps): ReactNode {
   );
 }
 
+/* ────────────────────────────────────────────────────────────────────────── */
+/*  Section: Language                                                          */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+interface LanguageSectionProps extends SectionProps {
+  onSaved: (next: AdminSettingsView) => void;
+}
+
+function LanguageSection(props: LanguageSectionProps): ReactNode {
+  const { client } = useAIHub();
+  const [languageDefault, setLanguageDefault] = useState<AIHubLanguage>(
+    props.settings.language.default,
+  );
+  const [userLocked, setUserLocked] = useState(
+    props.settings.language.user_locked,
+  );
+  const [saving, setSaving] = useState(false);
+  const [flash, setFlash] = useState<{ tone: "success" | "error"; text: string } | null>(
+    null,
+  );
+
+  async function handleSave(event: React.FormEvent): Promise<void> {
+    event.preventDefault();
+    setSaving(true);
+    setFlash(null);
+    try {
+      const next = await client.patchAdminSettings({
+        language: { default: languageDefault, userLocked },
+      });
+      props.onSaved(next);
+      setFlash({ tone: "success", text: props.texts.settingsSaveSuccessFlash });
+    } catch (err) {
+      setFlash({
+        tone: "error",
+        text:
+          err instanceof Error && err.message.length > 0
+            ? err.message
+            : props.texts.settingsSaveGenericError,
+      });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <section
+      className="data-club-ai-hub-admin__settings-section"
+      data-testid="admin-settings-language-section"
+    >
+      <h2 className="data-club-ai-hub-admin__settings-section-heading">
+        {props.texts.settingsLanguageSectionHeading}
+      </h2>
+      <form onSubmit={(event) => void handleSave(event)} noValidate>
+        <label
+          className="data-club-ai-hub-admin__form-label"
+          htmlFor="admin-settings-language-default"
+        >
+          {props.texts.settingsLanguageDefaultLabel}
+        </label>
+        <select
+          id="admin-settings-language-default"
+          className="data-club-ai-hub-admin__form-input"
+          data-testid="admin-settings-language-default"
+          value={languageDefault}
+          onChange={(event) =>
+            setLanguageDefault(event.target.value as AIHubLanguage)
+          }
+          disabled={saving}
+        >
+          <option value="en">{props.texts.settingsLanguageDefaultEnglish}</option>
+          <option value="cs">{props.texts.settingsLanguageDefaultCzech}</option>
+          <option value="sk">{props.texts.settingsLanguageDefaultSlovak}</option>
+        </select>
+        <label className="data-club-ai-hub-admin__checkbox">
+          <input
+            type="checkbox"
+            data-testid="admin-settings-language-locked"
+            checked={userLocked}
+            onChange={(event) => setUserLocked(event.target.checked)}
+            disabled={saving}
+          />
+          <span>{props.texts.settingsLanguageLockedLabel}</span>
+        </label>
+        <p className="data-club-ai-hub-admin__form-helper">
+          {props.texts.settingsLanguageLockedHelper}
+        </p>
+        {flash !== null ? (
+          <div
+            className={
+              flash.tone === "success"
+                ? "data-club-ai-hub-admin__flash data-club-ai-hub-admin__flash--success"
+                : "data-club-ai-hub-admin__flash data-club-ai-hub-admin__flash--error"
+            }
+            data-testid="admin-settings-language-flash"
+            role={flash.tone === "error" ? "alert" : "status"}
+          >
+            {flash.text}
+          </div>
+        ) : null}
+        <button
+          type="submit"
+          className="data-club-ai-hub-admin__button data-club-ai-hub-admin__button--primary"
+          data-testid="admin-settings-language-save"
+          disabled={saving}
+        >
+          {saving
+            ? props.texts.settingsSaveSavingButton
+            : props.texts.settingsSaveLanguageButton}
+        </button>
+      </form>
+    </section>
+  );
+}
+
 /* ────────────────────────────────────────────────────────────────────────── */
 /*  Section: Feature toggles                                                   */
 /* ────────────────────────────────────────────────────────────────────────── */
@@ -649,10 +770,13 @@ interface SigningKeySectionProps extends SectionProps {
 }
 
 function SigningKeySection(props: SigningKeySectionProps): ReactNode {
-  const { client } = useAIHub();
+  const { client, language } = useAIHub();
   const auth = useAIHubAuth();
   const [showModal, setShowModal] = useState(false);
-  const lastRotated = formatRotationStamp(props.settings.signing_key_rotated_at);
+  const lastRotated = formatRotationStamp(
+    props.settings.signing_key_rotated_at,
+    language,
+  );
 
   async function handleRotateConfirmed(): Promise<void> {
     await client.rotateAdminSigningKey();
@@ -716,11 +840,12 @@ interface MetricsTokenSectionProps extends SectionProps {
 }
 
 function MetricsTokenSection(props: MetricsTokenSectionProps): ReactNode {
-  const { client } = useAIHub();
+  const { client, language } = useAIHub();
   const [showConfirm, setShowConfirm] = useState(false);
   const [revealedToken, setRevealedToken] = useState<string | null>(null);
   const lastRotated = formatRotationStamp(
     props.settings.metrics_scrape_token_rotated_at,
+    language,
   );
 
   async function handleRotateConfirmed(): Promise<void> {

package/src/components/DataClubAIHubAdmin/index.tsx

@@ -25,10 +25,10 @@
 import { useMemo, useState, type ReactNode } from "react";
 
 import {
-  resolveAIHubTexts,
   type AIHubTexts,
   type DeepPartial,
 } from "../../auth/texts.js";
+import { useResolvedTexts } from "../../context/useAIHubTexts.js";
 import { useAIHub } from "../../context/useAIHub.js";
 import { useAIHubAuth } from "../../context/useAIHubAuth.js";
 import type { AIHubRole } from "../../types.js";
@@ -150,7 +150,7 @@ export function DataClubAIHubAdmin(
   // custom-property values and overrides the dark cascade from the
   // provider's outer wrapper.
   const { theme } = useAIHub();
-  const texts = resolveAIHubTexts(props.texts);
+  const texts = useResolvedTexts(props.texts);
   const navItems = navItemsForRole(auth.role);
   const productName = props.productName ?? "ai-hub";
 

package/src/components/DataClubAIHubLogin/index.tsx

@@ -29,7 +29,8 @@ import { useState, type FormEvent, type ReactNode } from "react";
 
 import { useAIHubAuth } from "../../context/useAIHubAuth.js";
 import { AIHubRequestError } from "../../client/AIHubClient.js";
-import { resolveAIHubTexts, type AIHubTexts, type DeepPartial } from "../../auth/texts.js";
+import { type AIHubTexts, type DeepPartial } from "../../auth/texts.js";
+import { useResolvedTexts } from "../../context/useAIHubTexts.js";
 import type { AIHubUser } from "../../types.js";
 import { PasswordInput } from "../internal/PasswordInput.js";
 
@@ -142,7 +143,7 @@ export interface DataClubAIHubLoginProps {
 export function DataClubAIHubLogin(props: DataClubAIHubLoginProps): ReactNode {
   const auth = useAIHubAuth();
   const classes = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
-  const texts = resolveAIHubTexts(props.texts).login;
+  const texts = useResolvedTexts(props.texts).login;
   const productName = props.productName ?? "ai-hub";
 
   const [username, setUsername] = useState("");

package/src/components/EffortControl/index.tsx

@@ -22,10 +22,10 @@
 import { type ChangeEvent, type ReactNode } from "react";
 
 import {
-  resolveAIHubTexts,
   type AIHubTexts,
   type DeepPartial,
 } from "../../auth/texts.js";
+import { useResolvedTexts } from "../../context/useAIHubTexts.js";
 import type { AIHubEffort } from "../../client/AIHubClient.js";
 import { useAIHub } from "../../context/useAIHub.js";
 
@@ -106,7 +106,7 @@ export interface EffortControlProps {
  */
 export function EffortControl(props: EffortControlProps): ReactNode {
   const { effort, setEffort } = useAIHub();
-  const texts = resolveAIHubTexts(props.texts);
+  const texts = useResolvedTexts(props.texts);
   const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
   const rootClass = props.className
     ? `${cls.root} ${props.className}`

package/src/components/LanguageSwitcher/index.tsx

@@ -0,0 +1,127 @@
+/**
+ * `<LanguageSwitcher />` — globe button in the shell header (beside the user
+ * avatar) that switches the active UI language via `setLanguage` from
+ * `useAIHub()`.
+ *
+ * Renders **nothing** when `languageSwitcherEnabled === false` (the super-
+ * admin has locked the language for this deployment) — absent from the DOM
+ * entirely, like `<ThemeSwitcher />`. So a caller can leave it in place
+ * unconditionally and the primitive self-suppresses.
+ *
+ * Switching is a device-local preference (cached in `localStorage`), no
+ * server round-trip — picking a language flips it immediately and the whole
+ * tree re-renders with the new locale.
+ *
+ * Exported under `AIHub.LanguageSwitcher`.
+ */
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+import { AIHUB_LANGUAGE_OPTIONS } from "../../auth/locales/index.js";
+import { useAIHub } from "../../context/useAIHub.js";
+import { useAIHubTexts } from "../../context/useAIHubTexts.js";
+
+/**
+ * Renders the language switcher (globe button + popover), or `null` when the
+ * deployment has locked the language.
+ *
+ * @returns the rendered switcher, or `null` when disabled by config.
+ */
+export function LanguageSwitcher(): ReactNode {
+  const { language, setLanguage, languageSwitcherEnabled } = useAIHub();
+  const texts = useAIHubTexts();
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef<HTMLDivElement | null>(null);
+
+  // Close on outside-click + Escape. `composedPath()` crosses the shadow
+  // boundary so this works when packaged as a Web Component (see UserMenu for
+  // the full rationale).
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent): void {
+      const node = wrapRef.current;
+      if (!node) return;
+      const path =
+        typeof e.composedPath === "function" ? e.composedPath() : [];
+      const clickedInside =
+        path.length > 0 ? path.includes(node) : node.contains(e.target as Node);
+      if (!clickedInside) setOpen(false);
+    }
+    function handleKey(e: KeyboardEvent): void {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [open]);
+
+  if (!languageSwitcherEnabled) return null;
+
+  const activeLabel =
+    AIHUB_LANGUAGE_OPTIONS.find((o) => o.code === language)?.label ?? language;
+
+  return (
+    <div
+      className="data-club-ai-hub__language-switcher"
+      ref={wrapRef}
+      data-testid="language-switcher"
+    >
+      <button
+        type="button"
+        className="data-club-ai-hub__language-switcher__button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label={texts.chat.languageSwitcherAriaLabel}
+        title={texts.chat.languageSwitcherAriaLabel}
+        onClick={() => setOpen((o) => !o)}
+        data-testid="language-switcher-button"
+      >
+        <span
+          className="data-club-ai-hub__language-switcher__icon"
+          aria-hidden="true"
+        >
+          🌐
+        </span>
+        <span
+          className="data-club-ai-hub__language-switcher__code"
+          data-testid="language-switcher-code"
+        >
+          {language.toUpperCase()}
+        </span>
+      </button>
+      {open ? (
+        <div
+          className="data-club-ai-hub__language-switcher__dropdown"
+          role="menu"
+          data-testid="language-switcher-dropdown"
+        >
+          {AIHUB_LANGUAGE_OPTIONS.map((opt) => {
+            const isActive = opt.code === language;
+            const itemClass = isActive
+              ? "data-club-ai-hub__language-switcher__item data-club-ai-hub__language-switcher__item--active"
+              : "data-club-ai-hub__language-switcher__item";
+            return (
+              <button
+                key={opt.code}
+                type="button"
+                role="menuitemradio"
+                aria-checked={isActive}
+                className={itemClass}
+                data-testid={`language-switcher-option-${opt.code}`}
+                onClick={() => {
+                  setLanguage(opt.code);
+                  setOpen(false);
+                }}
+              >
+                {opt.label}
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/MainColumn/index.tsx

@@ -17,10 +17,10 @@
 import { useMemo, type ReactNode } from "react";
 
 import {
-  resolveAIHubTexts,
   type AIHubTexts,
   type DeepPartial,
 } from "../../auth/texts.js";
+import { useResolvedTexts } from "../../context/useAIHubTexts.js";
 import { useAIHub } from "../../context/useAIHub.js";
 
 import { TurnStatusIndicator } from "../TurnStatusIndicator/index.js";
@@ -88,7 +88,7 @@ export interface MainColumnProps {
  */
 export function MainColumn(props: MainColumnProps): ReactNode {
   const { agents, activeAgentId, setActiveAgent } = useAIHub();
-  const texts = resolveAIHubTexts(props.texts);
+  const texts = useResolvedTexts(props.texts);
   const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
   const showBack = props.showBackToAgents ?? true;
   const showTurnStatus = props.showTurnStatus ?? true;

package/src/components/MessageInput/index.tsx

@@ -32,10 +32,10 @@ import {
 } from "react";
 
 import {
-  resolveAIHubTexts,
   type AIHubTexts,
   type DeepPartial,
 } from "../../auth/texts.js";
+import { useResolvedTexts } from "../../context/useAIHubTexts.js";
 import { useAIHub } from "../../context/useAIHub.js";
 import { chatAffordances } from "../../state/affordances.js";
 
@@ -124,7 +124,7 @@ export function MessageInput(props: MessageInputProps): ReactNode {
     pendingDraft,
     consumePendingDraft,
   } = useAIHub();
-  const texts = resolveAIHubTexts(props.texts);
+  const texts = useResolvedTexts(props.texts);
   const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
   const showToolbar = props.showToolbar ?? true;
   const showEffortControl = props.showEffortControl ?? true;

package/src/components/MessageList/index.tsx

@@ -42,10 +42,10 @@ import {
 } from "react";
 
 import {
-  resolveAIHubTexts,
   type AIHubTexts,
   type DeepPartial,
 } from "../../auth/texts.js";
+import { useResolvedTexts } from "../../context/useAIHubTexts.js";
 import { useAIHub } from "../../context/useAIHub.js";
 import { chatAffordances } from "../../state/affordances.js";
 import type {
@@ -253,7 +253,7 @@ export function MessageList(props: MessageListProps): ReactNode {
     state,
     sendMessage,
   } = useAIHub();
-  const texts = resolveAIHubTexts(props.texts);
+  const texts = useResolvedTexts(props.texts);
   const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
   const showSystemMessages = props.showSystemMessages ?? true;
   const showTpmNotice = props.showTpmNotice ?? true;

package/src/components/ReasoningView/index.tsx

@@ -25,10 +25,10 @@
 import { useState, type ReactNode } from "react";
 
 import {
-  resolveAIHubTexts,
   type AIHubTexts,
   type DeepPartial,
 } from "../../auth/texts.js";
+import { useResolvedTexts } from "../../context/useAIHubTexts.js";
 
 /** BEM class names emitted by `<ReasoningView />`. */
 export interface ReasoningViewClassNames {
@@ -110,7 +110,7 @@ export interface ReasoningViewProps {
  * @returns the rendered block.
  */
 export function ReasoningView(props: ReasoningViewProps): ReactNode {
-  const texts = resolveAIHubTexts(props.texts);
+  const texts = useResolvedTexts(props.texts);
   const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
   const [uncontrolledExpanded, setUncontrolledExpanded] = useState(
     props.defaultExpanded ?? false,

package/src/components/ScrollToPresentButton/index.tsx

@@ -23,10 +23,10 @@
 import { type ReactNode } from "react";
 
 import {
-  resolveAIHubTexts,
   type AIHubTexts,
   type DeepPartial,
 } from "../../auth/texts.js";
+import { useResolvedTexts } from "../../context/useAIHubTexts.js";
 
 /** BEM class names emitted by `<ScrollToPresentButton />`. */
 export interface ScrollToPresentButtonClassNames {
@@ -67,7 +67,7 @@ export function ScrollToPresentButton(
   props: ScrollToPresentButtonProps,
 ): ReactNode {
   if (!props.visible) return null;
-  const texts = resolveAIHubTexts(props.texts);
+  const texts = useResolvedTexts(props.texts);
   const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
   const rootClass = props.className
     ? `${cls.root} ${props.className}`