@data-club/ai-hub 0.0.2 → 0.0.4

package/src/components/SessionsPanel/index.tsx

@@ -30,10 +30,11 @@
 import { useEffect, useMemo, useState, type ReactNode } from "react";
 
 import {
-  resolveAIHubTexts,
   type AIHubTexts,
   type DeepPartial,
 } from "../../auth/texts.js";
+import { useResolvedTexts } from "../../context/useAIHubTexts.js";
+import { formatRelativeTime } from "../../util/relativeTime.js";
 import { useAIHub } from "../../context/useAIHub.js";
 import type { Session } from "../../types.js";
 
@@ -125,30 +126,6 @@ export interface SessionsPanelProps {
   texts?: DeepPartial<AIHubTexts>;
 }
 
-/**
- * Formats an ISO-8601 timestamp into a short "N min ago" / "yesterday" /
- * "N days ago" line. Intentionally minimal — i18n libraries can take this
- * over later via the `texts.*` map if needed.
- *
- * @param iso - ISO timestamp.
- * @returns the short relative-time string.
- */
-function formatRelative(iso: string): string {
-  const then = Date.parse(iso);
-  if (Number.isNaN(then)) return "";
-  const diffMs = Date.now() - then;
-  const minutes = Math.round(diffMs / 60_000);
-  if (minutes < 1) return "just now";
-  if (minutes === 1) return "1 min ago";
-  if (minutes < 60) return `${minutes} min ago`;
-  const hours = Math.round(minutes / 60);
-  if (hours === 1) return "1 hr ago";
-  if (hours < 24) return `${hours} hr ago`;
-  const days = Math.round(hours / 24);
-  if (days === 1) return "yesterday";
-  return `${days} days ago`;
-}
-
 /**
  * Renders the sessions panel.
  *
@@ -165,8 +142,9 @@ export function SessionsPanel(props: SessionsPanelProps): ReactNode {
     patchSession,
     includeArchivedSessions,
     setIncludeArchivedSessions,
+    language,
   } = useAIHub();
-  const texts = resolveAIHubTexts(props.texts);
+  const texts = useResolvedTexts(props.texts);
   const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
   const showCreate = props.showCreateButton ?? true;
   const collapsible = props.collapsible ?? true;
@@ -313,7 +291,7 @@ export function SessionsPanel(props: SessionsPanelProps): ReactNode {
               >
                 <span>{displayTitle}</span>
                 <span className={cls.itemMeta}>
-                  {formatRelative(session.updated_at)}
+                  {formatRelativeTime(session.updated_at, language)}
                 </span>
               </button>
               <div className={cls.itemActions} data-testid="session-item-actions">

package/src/components/ThemeSwitcher/index.tsx

@@ -24,7 +24,8 @@
 import { type ReactNode } from "react";
 
 import type { AIHubChatTexts } from "../../auth/texts.js";
-import { resolveAIHubTexts, type AIHubTexts, type DeepPartial } from "../../auth/texts.js";
+import { useResolvedTexts } from "../../context/useAIHubTexts.js";
+import { type AIHubTexts, type DeepPartial } from "../../auth/texts.js";
 import { useAIHub } from "../../context/useAIHub.js";
 
 /**
@@ -79,7 +80,7 @@ export interface ThemeSwitcherProps {
  */
 export function ThemeSwitcher(props: ThemeSwitcherProps): ReactNode {
   const { theme, setTheme, themeSwitcherEnabled } = useAIHub();
-  const texts = resolveAIHubTexts(props.texts);
+  const texts = useResolvedTexts(props.texts);
   const chatTexts: AIHubChatTexts = texts.chat;
   const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
   const showLabel = props.showLabel ?? true;

package/src/components/ToolCallView/index.tsx

@@ -20,10 +20,10 @@
 import { useState, type ReactNode } from "react";
 
 import {
-  resolveAIHubTexts,
   type AIHubTexts,
   type DeepPartial,
 } from "../../auth/texts.js";
+import { useResolvedTexts } from "../../context/useAIHubTexts.js";
 import { formatToolContentForDisplay } from "./formatContent.js";
 
 /** Status of a tool call. */
@@ -182,7 +182,7 @@ function statusText(
  * @returns the rendered card.
  */
 export function ToolCallView(props: ToolCallViewProps): 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/TpmBanner/index.tsx

@@ -26,10 +26,10 @@
 import { useEffect, 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 { SystemNotice } from "../SystemNotice/index.js";
@@ -90,7 +90,7 @@ export interface TpmBannerProps {
  */
 export function TpmBanner(props: TpmBannerProps): ReactNode {
   const { state, lastTurnError } = useAIHub();
-  const texts = resolveAIHubTexts(props.texts);
+  const texts = useResolvedTexts(props.texts);
 
   // Tick at 1Hz while we're in the wait phase. The interval is
   // re-installed when the deadline changes (new wait) or removed when

package/src/components/TurnStatusIndicator/index.tsx

@@ -173,6 +173,7 @@ export function TurnStatusIndicator(
   }, [state.status, state.phase]);
 
   const visual = turnStatusVisual(effective.status, effective.phase);
+  const label = ctx.texts.chat[visual.labelKey];
   const rootClass = props.className
     ? `${cls.root} ${props.className}`
     : cls.root;
@@ -196,7 +197,7 @@ export function TurnStatusIndicator(
     >
       <span className={dotClass} aria-hidden="true" />
       <span className={cls.label} data-testid="turn-status-label">
-        {visual.label}
+        {label}
       </span>
     </div>
   );

package/src/context/AIHubContext.ts

@@ -18,6 +18,7 @@ import type {
   PatchSessionOptions,
 } from "../client/AIHubClient.js";
 import type { AIHubEffort } from "../client/AIHubClient.js";
+import type { AIHubLanguage, AIHubTexts } from "../auth/texts.js";
 import type {
   AIHubAuthContext,
   AIHubFeatureToggles,
@@ -219,6 +220,30 @@ export interface AIHubContextValue {
    */
   themeSwitcherEnabled: boolean;
 
+  /* ── language / i18n ────────────────────────────────────────────── */
+  /**
+   * Resolved UI language (`en` | `cs` | `sk`) — computed per the same
+   * precedence as theme: when switching is unlocked, the user's cached
+   * choice wins; otherwise the deployment default. Drives `texts`.
+   */
+  language: AIHubLanguage;
+  /**
+   * Switches the UI language and caches the choice on this device. No-op
+   * (and the switcher is hidden) when `languageSwitcherEnabled` is false.
+   */
+  setLanguage: (next: AIHubLanguage) => void;
+  /**
+   * Mirror of `!deployment.user_language_locked`. When false, the
+   * `<LanguageSwitcher />` renders nothing and every user sees the default.
+   */
+  languageSwitcherEnabled: boolean;
+  /**
+   * The fully-resolved, language-aware `AIHubTexts` — the selected built-in
+   * locale with any wrapper `texts` override merged on top. Components read
+   * this via `useAIHubTexts()` so a `setLanguage` re-renders the whole tree.
+   */
+  texts: AIHubTexts;
+
   /* ── feature toggles (§8.4, wired in Step 10) ──────────────────── */
   /**
    * The deployment-wide UI feature toggles fetched from public

package/src/context/AIHubProvider.tsx

@@ -57,6 +57,14 @@ import type {
   Session,
 } from "../types.js";
 
+import {
+  resolveAIHubTexts,
+  type AIHubLanguage,
+  type AIHubTexts,
+  type DeepPartial,
+} from "../auth/texts.js";
+import { AIHUB_LOCALES } from "../auth/locales/index.js";
+
 import { aiHubContext, type AIHubContextValue } from "./AIHubContext.js";
 import {
   readCachedTheme,
@@ -64,6 +72,11 @@ import {
   writeCachedTheme,
   type ResolvedTheme,
 } from "./theme.js";
+import {
+  readCachedLanguage,
+  resolveLanguage,
+  writeCachedLanguage,
+} from "./language.js";
 
 /**
  * When the post-stream canonicalize refetches messages from the server,
@@ -154,6 +167,18 @@ export interface AIHubProviderProps {
    * is empty. Server config (`theme_default`) wins after hydration.
    */
   defaultTheme?: ResolvedTheme;
+  /**
+   * Fallback UI language used when no `/auth/me` has resolved yet and the
+   * cache is empty. Server config (`language_default`) wins after hydration.
+   * Defaults to `"en"`.
+   */
+  defaultLanguage?: AIHubLanguage;
+  /**
+   * Wrapper-supplied `texts` override, merged on top of the selected
+   * built-in locale (`en` | `cs` | `sk`). Any key the wrapper sets wins over
+   * the locale; omitted keys fall back to the locale, then English.
+   */
+  texts?: DeepPartial<AIHubTexts>;
   /** The tree under the provider. */
   children: ReactNode;
 }
@@ -171,6 +196,8 @@ export function AIHubProvider(props: AIHubProviderProps): ReactNode {
     children,
     client: clientProp,
     defaultTheme = "light",
+    defaultLanguage = "en",
+    texts: textsOverride,
     fetch: fetchProp,
     onError,
     tokenStorage = "localStorage",
@@ -207,6 +234,12 @@ export function AIHubProvider(props: AIHubProviderProps): ReactNode {
   const [theme, setThemeState] = useState<ResolvedTheme>(() => {
     return readCachedTheme() ?? defaultTheme;
   });
+  // ── language / i18n ──────────────────────────────────────────────────
+  // Seed from the device cache (FOUC-free first paint); reconciled against
+  // the deployment default once /auth/me resolves (see effect below).
+  const [language, setLanguageState] = useState<AIHubLanguage>(() => {
+    return readCachedLanguage() ?? defaultLanguage;
+  });
 
   // ── chat state (Step 9) ─────────────────────────────────────────────
   const [agents, setAgents] = useState<AgentSummary[]>([]);
@@ -381,6 +414,21 @@ export function AIHubProvider(props: AIHubProviderProps): ReactNode {
     writeCachedTheme(resolved);
   }, [user, deployment, defaultTheme]);
 
+  // ── reconcile resolved language once the deployment default lands ──
+  // Seed-only: when switching is unlocked the device-cached choice wins and
+  // we keep it; when locked we force the deployment default WITHOUT touching
+  // the cache, so unlocking later restores the user's prior choice.
+  useEffect(() => {
+    if (!deployment) return;
+    const resolved = resolveLanguage(
+      readCachedLanguage(),
+      deployment,
+      defaultLanguage,
+    );
+    setLanguageState(resolved);
+    if (!deployment.user_language_locked) writeCachedLanguage(resolved);
+  }, [deployment, defaultLanguage]);
+
   // ── load /agents whenever an authenticated user becomes available ───
   const refreshAgents = useCallback(async (): Promise<void> => {
     setAgentsLoading(true);
@@ -526,6 +574,14 @@ export function AIHubProvider(props: AIHubProviderProps): ReactNode {
     }
   };
 
+  // Language is a device-local preference (no server round-trip): set state
+  // and cache it. No-op when the deployment has locked the language.
+  const setLanguage: AIHubContextValue["setLanguage"] = (next) => {
+    if (deployment?.user_language_locked) return;
+    setLanguageState(next);
+    writeCachedLanguage(next);
+  };
+
   // ── chat actions ───────────────────────────────────────────────────
   const setActiveAgent: AIHubContextValue["setActiveAgent"] = (id) => {
     streamRef.current?.controller.abort();
@@ -1003,6 +1059,13 @@ export function AIHubProvider(props: AIHubProviderProps): ReactNode {
   };
 
   const themeSwitcherEnabled = deployment?.theme_switcher_enabled ?? true;
+  const languageSwitcherEnabled = !(deployment?.user_language_locked ?? false);
+  // Resolve language-aware texts: the selected built-in locale with the
+  // wrapper override merged on top. Recomputes when `language` flips.
+  const texts: AIHubTexts = useMemo(
+    () => resolveAIHubTexts(textsOverride, AIHUB_LOCALES[language]),
+    [textsOverride, language],
+  );
   const role: AIHubRole | null = user?.role ?? null;
 
   // Refresh the feature toggles on demand — used after the super-admin
@@ -1039,6 +1102,10 @@ export function AIHubProvider(props: AIHubProviderProps): ReactNode {
     theme,
     setTheme,
     themeSwitcherEnabled,
+    language,
+    setLanguage,
+    languageSwitcherEnabled,
+    texts,
     agents,
     agentsLoading,
     refreshAgents,
@@ -1074,7 +1141,7 @@ export function AIHubProvider(props: AIHubProviderProps): ReactNode {
 
   return (
     <aiHubContext.Provider value={value}>
-      <div className="data-club-ai-hub" data-theme={theme}>
+      <div className="data-club-ai-hub" data-theme={theme} lang={language}>
         {children}
       </div>
     </aiHubContext.Provider>

package/src/context/index.ts

@@ -7,3 +7,4 @@
 export { AIHubProvider, type AIHubProviderProps } from "./AIHubProvider.js";
 export { useAIHub, type UseAIHubResult } from "./useAIHub.js";
 export { useAIHubAuth, type UseAIHubAuthResult } from "./useAIHubAuth.js";
+export { useAIHubTexts, useResolvedTexts } from "./useAIHubTexts.js";

package/src/context/language.ts

@@ -0,0 +1,81 @@
+/**
+ * Language resolution helpers used by `<AIHubProvider>` — the i18n analogue
+ * of `theme.ts`.
+ *
+ * Precedence (mirrors §7.6 theming):
+ *
+ * 1. When `deployment.user_language_locked` is true → `deployment.language_default`
+ *    (the user's cached choice is ignored and the switcher is hidden).
+ * 2. Otherwise the value cached in `localStorage` (the user's last pick on
+ *    this device), then `deployment.language_default`, then `fallback`.
+ *
+ * The cache also gives a FOUC-free first paint: before `/auth/me` resolves we
+ * render in the last-known language rather than flashing English.
+ *
+ * @see ./theme.ts — the theme counterpart this mirrors
+ */
+
+import type { AIHubLanguage } from "../auth/texts.js";
+import type { AIHubDeployment } from "../types.js";
+
+/** localStorage key for the last-chosen language. Namespaced to ai-hub. */
+const CACHE_KEY = "data-club-ai-hub:language";
+
+/** The languages the library ships built-in locales for. */
+const KNOWN: ReadonlyArray<AIHubLanguage> = ["en", "cs", "sk"];
+
+/** Type guard: is `value` one of the known language codes? */
+function isLanguage(value: unknown): value is AIHubLanguage {
+  return typeof value === "string" && (KNOWN as string[]).includes(value);
+}
+
+/**
+ * Computes the resolved language from the `/auth/me` deployment context, the
+ * cached user choice, and a fallback.
+ *
+ * @param cached - the user's cached choice (or null).
+ * @param deployment - deployment context, or null when unauthenticated.
+ * @param fallback - default applied when nothing else resolves (usually `"en"`).
+ * @returns the resolved language.
+ */
+export function resolveLanguage(
+  cached: AIHubLanguage | null,
+  deployment: AIHubDeployment | null,
+  fallback: AIHubLanguage,
+): AIHubLanguage {
+  const deploymentDefault = deployment?.language_default ?? fallback;
+  if (deployment?.user_language_locked) return deploymentDefault;
+  return cached ?? deploymentDefault;
+}
+
+/**
+ * Reads the cached language from `localStorage`. Returns null when no cache
+ * exists, the value is malformed, or storage is unavailable (Safari private
+ * mode, SSR, etc.).
+ *
+ * @returns the cached language or null.
+ */
+export function readCachedLanguage(): AIHubLanguage | null {
+  try {
+    if (typeof window === "undefined" || !window.localStorage) return null;
+    const raw = window.localStorage.getItem(CACHE_KEY);
+    return isLanguage(raw) ? raw : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Persists the chosen language into `localStorage` for FOUC avoidance on the
+ * next page load. Silent no-op on storage failures.
+ *
+ * @param language - the language to cache.
+ */
+export function writeCachedLanguage(language: AIHubLanguage): void {
+  try {
+    if (typeof window === "undefined" || !window.localStorage) return;
+    window.localStorage.setItem(CACHE_KEY, language);
+  } catch {
+    /* ignore */
+  }
+}

package/src/context/useAIHub.ts

@@ -36,6 +36,14 @@ export interface UseAIHubResult {
   setTheme: AIHubContextValue["setTheme"];
   /** Mirror of `deployment.theme_switcher_enabled`. */
   themeSwitcherEnabled: AIHubContextValue["themeSwitcherEnabled"];
+  /** Resolved UI language (`en` | `cs` | `sk`). */
+  language: AIHubContextValue["language"];
+  /** Switches the UI language (device-cached). No-op when locked. */
+  setLanguage: AIHubContextValue["setLanguage"];
+  /** Mirror of `!deployment.user_language_locked`. */
+  languageSwitcherEnabled: AIHubContextValue["languageSwitcherEnabled"];
+  /** Fully-resolved, language-aware texts. Prefer `useAIHubTexts()`. */
+  texts: AIHubContextValue["texts"];
   /** Non-archived agents available to the caller. */
   agents: AIHubContextValue["agents"];
   /** True while the initial `/agents` request is in flight. */
@@ -120,6 +128,10 @@ export function useAIHub(): UseAIHubResult {
     theme: ctx.theme,
     setTheme: ctx.setTheme,
     themeSwitcherEnabled: ctx.themeSwitcherEnabled,
+    language: ctx.language,
+    setLanguage: ctx.setLanguage,
+    languageSwitcherEnabled: ctx.languageSwitcherEnabled,
+    texts: ctx.texts,
     agents: ctx.agents,
     agentsLoading: ctx.agentsLoading,
     refreshAgents: ctx.refreshAgents,

package/src/context/useAIHubTexts.ts

@@ -0,0 +1,64 @@
+/**
+ * `useAIHubTexts()` — returns the fully-resolved, language-aware
+ * {@link AIHubTexts} from the nearest `<AIHubProvider>`.
+ *
+ * This is the supported way for built-in screens to read user-facing
+ * strings: the provider has already merged the active built-in locale
+ * (`en` | `cs` | `sk`) with any wrapper `texts` override, so flipping the
+ * language via `setLanguage` re-renders every consumer.
+ *
+ * @see ./AIHubProvider.tsx — where `texts` is computed
+ */
+
+import { useContext, useMemo } from "react";
+
+import {
+  defaultAIHubTexts,
+  resolveAIHubTexts,
+  type AIHubTexts,
+  type DeepPartial,
+} from "../auth/texts.js";
+import { aiHubContext } from "./AIHubContext.js";
+
+/**
+ * Returns the resolved texts map.
+ *
+ * Throws when called outside a provider — surfaces mounting bugs early
+ * instead of cascading through context-null deref.
+ *
+ * @returns the resolved `AIHubTexts`.
+ */
+export function useAIHubTexts(): AIHubTexts {
+  const ctx = useContext(aiHubContext);
+  if (!ctx) {
+    throw new Error(
+      "useAIHubTexts() was called outside <AIHubProvider>. Wrap the tree in <AIHubProvider> first.",
+    );
+  }
+  return ctx.texts;
+}
+
+/**
+ * Resolves a component's optional `texts` override against the **active
+ * language locale** from the nearest `<AIHubProvider>` (the supported way
+ * for built-in components to be language-aware).
+ *
+ * - Inside a provider: the provider's already-resolved, language-aware
+ *   `texts` is the base; the component's own `override` (if any) is merged on
+ *   top. Flipping `setLanguage` re-renders the provider, so every consumer
+ *   re-resolves automatically.
+ * - Outside a provider (standalone component / Storybook / tests): falls back
+ *   to the English `defaultAIHubTexts` as the base, preserving the original
+ *   "merge over English defaults" behavior.
+ *
+ * @param override - the component's wrapper-supplied partial (usually
+ *   `props.texts`). `undefined` is fine.
+ * @returns the fully resolved `AIHubTexts`.
+ */
+export function useResolvedTexts(
+  override: DeepPartial<AIHubTexts> | undefined,
+): AIHubTexts {
+  const ctx = useContext(aiHubContext);
+  const base = ctx?.texts ?? defaultAIHubTexts;
+  return useMemo(() => resolveAIHubTexts(override, base), [override, base]);
+}

package/src/index.ts

@@ -90,6 +90,8 @@ export {
   AIHubProvider,
   useAIHub,
   useAIHubAuth,
+  useAIHubTexts,
+  useResolvedTexts,
 } from "./context/index.js";
 export type {
   AIHubProviderProps,
@@ -205,6 +207,8 @@ export type {
   ThemeSwitcherClassNames,
 } from "./components/ThemeSwitcher/index.js";
 
+export { LanguageSwitcher } from "./components/LanguageSwitcher/index.js";
+
 export { SystemNotice } from "./components/SystemNotice/index.js";
 export type {
   SystemNoticeProps,
@@ -249,6 +253,7 @@ export {
 } from "./auth/texts.js";
 export type {
   AIHubTexts,
+  AIHubLanguage,
   AIHubLoginTexts,
   AIHubChangePasswordTexts,
   AIHubChatTexts,
@@ -256,6 +261,14 @@ export type {
   DeepPartial,
 } from "./auth/texts.js";
 
+/* Built-in locales (Czech / Slovak) + the switcher's language metadata. */
+export {
+  AIHUB_LOCALES,
+  AIHUB_LANGUAGE_OPTIONS,
+  csTexts,
+  skTexts,
+} from "./auth/locales/index.js";
+
 /* ── Password policy (client-side mirror of §8.5) ────────────────── */
 
 export {

package/src/primitives/index.ts

@@ -29,6 +29,7 @@ import { ReasoningView } from "../components/ReasoningView/index.js";
 import { ScrollToPresentButton } from "../components/ScrollToPresentButton/index.js";
 import { SessionsPanel } from "../components/SessionsPanel/index.js";
 import { SystemNotice } from "../components/SystemNotice/index.js";
+import { LanguageSwitcher } from "../components/LanguageSwitcher/index.js";
 import { ThemeSwitcher } from "../components/ThemeSwitcher/index.js";
 import { ToolCallView } from "../components/ToolCallView/index.js";
 import { TpmBanner } from "../components/TpmBanner/index.js";
@@ -87,6 +88,8 @@ export const AIHub = {
   TurnStatusIndicator,
   /** Sun/moon theme toggle. */
   ThemeSwitcher,
+  /** Globe language switcher (en/cs/sk). */
+  LanguageSwitcher,
   /** Floating "↓ Jump to latest" button. */
   ScrollToPresentButton,
   /** Collapsible reasoning block inside an assistant bubble. */

package/src/state/affordances.ts

@@ -254,14 +254,36 @@ export function chatAffordances(state: AIHubState): AIHubChatAffordances {
  * `useEffect` + a short timer.
  */
 export interface AIHubTurnStatusVisual {
-  /** Short human-readable label rendered next to the dot. */
+  /**
+   * Short human-readable label rendered next to the dot. **English** — this
+   * is the fallback for consumers that read `turnStatusVisual` directly. The
+   * `<TurnStatusIndicator />` primitive renders the localized
+   * `texts.chat[labelKey]` instead.
+   */
   label: string;
+  /**
+   * The `AIHubChatTexts` key for the localized label. Each value must name an
+   * existing `turnStatus*` key in the chat texts.
+   */
+  labelKey: TurnStatusLabelKey;
   /** Dot variant — drives the BEM modifier on the dot element. */
   dot: "idle" | "running" | "warning" | "error";
   /** Whether the dot pulses (suppressed under `prefers-reduced-motion`). */
   pulse: boolean;
 }
 
+/** The `turnStatus*` keys in `AIHubChatTexts` a status can resolve to. */
+export type TurnStatusLabelKey =
+  | "turnStatusReady"
+  | "turnStatusGenerating"
+  | "turnStatusReasoning"
+  | "turnStatusPreparingTool"
+  | "turnStatusRunningTool"
+  | "turnStatusWaitingRateLimit"
+  | "turnStatusFailed"
+  | "turnStatusCancelled"
+  | "turnStatusDone";
+
 /**
  * Computes the §10.4 turn-status indicator's `(label, dot, pulse)` from
  * a `(status, phase)` pair.
@@ -281,20 +303,22 @@ export function turnStatusVisual(
   if (status === "running") {
     switch (phase) {
       case "model_text":
-        return { label: "Generating…", dot: "running", pulse: true };
+        return { label: "Generating…", labelKey: "turnStatusGenerating", dot: "running", pulse: true };
       case "model_reasoning":
-        return { label: "Reasoning…", dot: "running", pulse: true };
+        return { label: "Reasoning…", labelKey: "turnStatusReasoning", dot: "running", pulse: true };
       case "model_tool_input":
         return {
           label: "Preparing tool call…",
+          labelKey: "turnStatusPreparingTool",
           dot: "running",
           pulse: true,
         };
       case "tool_executing":
-        return { label: "Running tool…", dot: "running", pulse: true };
+        return { label: "Running tool…", labelKey: "turnStatusRunningTool", dot: "running", pulse: true };
       case "waiting_provider":
         return {
           label: "Waiting (rate limit)…",
+          labelKey: "turnStatusWaitingRateLimit",
           dot: "warning",
           pulse: true,
         };
@@ -302,20 +326,20 @@ export function turnStatusVisual(
         // Not exercised by the predicate table (the spec doesn't surface
         // a label for awaiting_user); fall back to "Ready" so the dot
         // doesn't strobe.
-        return { label: "Ready", dot: "idle", pulse: false };
+        return { label: "Ready", labelKey: "turnStatusReady", dot: "idle", pulse: false };
       case null:
-        return { label: "Generating…", dot: "running", pulse: true };
+        return { label: "Generating…", labelKey: "turnStatusGenerating", dot: "running", pulse: true };
     }
   }
   if (status === "failed") {
-    return { label: "Failed", dot: "error", pulse: false };
+    return { label: "Failed", labelKey: "turnStatusFailed", dot: "error", pulse: false };
   }
   if (status === "cancelled") {
-    return { label: "Cancelled", dot: "idle", pulse: false };
+    return { label: "Cancelled", labelKey: "turnStatusCancelled", dot: "idle", pulse: false };
   }
   if (status === "done") {
-    return { label: "Done", dot: "idle", pulse: false };
+    return { label: "Done", labelKey: "turnStatusDone", dot: "idle", pulse: false };
   }
   // idle
-  return { label: "Ready", dot: "idle", pulse: false };
+  return { label: "Ready", labelKey: "turnStatusReady", dot: "idle", pulse: false };
 }

package/src/stories/_mockProvider.tsx

@@ -15,6 +15,7 @@
 import { type ReactNode } from "react";
 
 import { aiHubContext, type AIHubContextValue } from "../context/AIHubContext.js";
+import { defaultAIHubTexts } from "../auth/texts.js";
 import type { AIHubEffort } from "../client/AIHubClient.js";
 import type {
   AIHubFeatureToggles,
@@ -82,6 +83,10 @@ export function MockProvider(props: {
     theme: opts.theme ?? "light",
     setTheme: noopAsync,
     themeSwitcherEnabled: opts.themeSwitcherEnabled ?? true,
+    language: "en",
+    setLanguage: () => undefined,
+    languageSwitcherEnabled: true,
+    texts: defaultAIHubTexts,
     agents: [],
     agentsLoading: false,
     refreshAgents: noopAsync,