@data-club/ai-hub 0.0.1 → 0.0.3

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/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/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,

package/src/styles/default.css

@@ -664,6 +664,85 @@
   text-decoration: none;
 }
 
+/* ── Language switcher (left of the user menu in the shell header) ────── */
+
+.data-club-ai-hub__language-switcher {
+  position: relative;
+}
+
+.data-club-ai-hub__language-switcher__button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dc-aih-space-xs);
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  font: inherit;
+  color: var(--dc-aih-fg);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--dc-aih-radius-md);
+  transition: background-color var(--dc-aih-transition),
+    border-color var(--dc-aih-transition);
+}
+
+.data-club-ai-hub__language-switcher__button:hover {
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, transparent);
+}
+
+.data-club-ai-hub__language-switcher__button:focus-visible {
+  outline: none;
+  border-color: var(--dc-aih-accent);
+  box-shadow: 0 0 0 3px var(--dc-aih-focus-ring);
+}
+
+.data-club-ai-hub__language-switcher__icon {
+  font-size: var(--dc-aih-font-size-md);
+  line-height: 1;
+}
+
+.data-club-ai-hub__language-switcher__code {
+  font-size: var(--dc-aih-font-size-sm);
+  font-weight: 600;
+  letter-spacing: 0.03em;
+}
+
+.data-club-ai-hub__language-switcher__dropdown {
+  position: absolute;
+  right: 0;
+  top: calc(100% + var(--dc-aih-space-xs));
+  min-width: 160px;
+  padding: var(--dc-aih-space-sm) 0;
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  z-index: 30;
+}
+
+.data-club-ai-hub__language-switcher__item {
+  display: block;
+  width: 100%;
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  font: inherit;
+  text-align: left;
+  color: var(--dc-aih-fg);
+  background: transparent;
+  border: none;
+}
+
+.data-club-ai-hub__language-switcher__item:hover {
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, transparent);
+}
+
+.data-club-ai-hub__language-switcher__item:focus-visible {
+  outline: none;
+  background-color: color-mix(in srgb, var(--dc-aih-accent) 12%, transparent);
+}
+
+.data-club-ai-hub__language-switcher__item--active {
+  font-weight: 600;
+  color: var(--dc-aih-accent);
+}
+
 /* ────────────────────────────────────────────────────────────────────── */
 /*  Admin shell + Users sub-page — Step 11                               */
 /*  ui-sketches/04-admin-overview.md, ui-sketches/05-admin-users.md      */

package/src/types.ts

@@ -16,6 +16,8 @@
  * @see SPECIFICATIONS.md §11 — data model
  */
 
+import type { AIHubLanguage } from "./auth/texts.js";
+
 /* ────────────────────────────────────────────────────────────────────────── */
 /*  Roles + users                                                             */
 /* ────────────────────────────────────────────────────────────────────────── */
@@ -98,6 +100,18 @@ export interface AIHubDeployment {
    * `user.theme_preference`.
    */
   theme_switcher_enabled: boolean;
+  /**
+   * Default UI language for the deployment (`en` | `cs` | `sk`). Seeds a
+   * user's language when they have no per-device choice cached, and is the
+   * only language used when `user_language_locked` is true.
+   */
+  language_default: AIHubLanguage;
+  /**
+   * When `true`, the deployment is single-language — `AIHub.LanguageSwitcher`
+   * is hidden and every user sees `language_default` regardless of any cached
+   * per-device choice.
+   */
+  user_language_locked: boolean;
   /**
    * Browser-facing URL of the self-hosted Letta ADE — only present when the
    * caller's role is `power_user` or higher. Absent for `user`-role callers.