Add full shell, replaceable Omics adapter and bilingual interaction

Implement approved specification #32 and tickets #33-#37. Keep host authentication server-verified and pin session interaction language. Compile scoped base selectors for browser compatibility and retain full gutters during CSS pruning.
2026-09-13 14:26:39 +02:00
parent 2d1b714ebe
commit d8a29bfbdd
207 changed files with 8570 additions and 2164 deletions
@@ -1,3 +1,6 @@
+import { useAdminGridLocale } from "./useAdminGridLocale";
+import { adminMessage, type AdminMessage } from "./messages";
+import { useI18n } from "../../i18n";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Menu } from "@base-ui/react/menu";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -43,7 +46,7 @@ interface Props {
  onOpenSync: () => void;
  onClearCatalogTables?: () => Promise<void>;
  onDescriptionGenerationRunStarted: (run: DescriptionGenerationRun) => void;
-  onSuggestSensitive: (selection: SensitivityAnalysisRequest, scopeLabel: string) => Promise<void>;
+  onSuggestSensitive: (selection: SensitivityAnalysisRequest, scopeLabel: AdminMessage) => Promise<void>;
  onCatalogMetricsChanged?: () => void | Promise<void>;
  presentation?: "legacy" | "fleet";
 }
@@ -55,6 +58,7 @@ interface TableGridContext {
 }

 function TableActionsCell({ data, context }: ICellRendererParams<CatalogTable, unknown, TableGridContext>) {
+  const { t } = useI18n();
  if (!data || !context) return null;
  return (
    <div className="flex h-full items-center justify-end gap-0.5" onClick={(event) => event.stopPropagation()}>
@@ -63,18 +67,18 @@ function TableActionsCell({ data, context }: ICellRendererParams<CatalogTable, u
        variant="ghost"
        size="icon-lg"
        className={context.presentation === "fleet" ? "thot-fleet-icon-action" : undefined}
-        data-tooltip={context.presentation === "fleet" ? "Columns" : undefined}
-        aria-label={`View columns for ${data.name}`}
-        title={context.presentation === "legacy" ? `View columns for ${data.name}` : undefined}
+        data-tooltip={context.presentation === "fleet" ? t("Columns") : undefined}
+        aria-label={t("View columns for {name}", { name: data.name })}
+        title={context.presentation === "legacy" ? t("View columns for {name}", { name: data.name }) : undefined}
        onClick={(event) => context.onOpen(data, "columns", event.currentTarget)}
      >
        <Columns3 aria-hidden="true" />
      </Button>
      <span
        className={context.presentation === "fleet" ? "thot-fleet-icon-action" : undefined}
-        data-tooltip={context.presentation === "fleet" ? "Edit metadata" : undefined}
+        data-tooltip={context.presentation === "fleet" ? t("Edit metadata") : undefined}
      >
-        <Button type="button" variant="ghost" size="icon-lg" aria-label={`Edit description for ${data.name}`} title={context.presentation === "legacy" ? `Edit metadata for ${data.name}` : undefined} disabled={!context.canManage} onClick={(event) => context.onOpen(data, "overview", event.currentTarget)}>
+        <Button type="button" variant="ghost" size="icon-lg" aria-label={t("Edit description for {name}", { name: data.name })} title={context.presentation === "legacy" ? t("Edit metadata for {name}", { name: data.name }) : undefined} disabled={!context.canManage} onClick={(event) => context.onOpen(data, "overview", event.currentTarget)}>
        <Pencil aria-hidden="true" />
        </Button>
      </span>
@@ -101,6 +105,8 @@ export function DatabaseTables({
  onCatalogMetricsChanged,
  presentation = "legacy",
 }: Props) {
+  const { t } = useI18n();
+  const { locale, gridLocaleProps } = useAdminGridLocale();
  const databaseId = database.id!;
  const queryClient = useQueryClient();
  const queryKey = ["catalog-tables", databaseId] as const;
@@ -133,16 +139,16 @@ export function DatabaseTables({
  const nestedNavigationActive = presentation === "fleet" && Boolean(activeTable) && tableSection === "columns";
  const currentRun = activeRun ?? database.activeSyncRun;
  const clearAllCatalogTables = async () => {
-    if (!onClearCatalogTables || !window.confirm("Clear all catalog tables, columns, and relationships for this database? The source database will not be changed.")) return;
+    if (!onClearCatalogTables || !window.confirm(t("Clear all catalog tables, columns, and relationships for this database? The source database will not be changed."))) return;
    await onClearCatalogTables();
  };
  const leaveTable = useCallback(() => {
    if (navigationBusy) return;
-    if (dirty && !window.confirm("Discard unsaved metadata?")) return;
+    if (dirty && !window.confirm(t("Discard unsaved metadata?"))) return;
    setActiveTableId(null);
    setTableSection("overview");
    window.setTimeout(() => originRef.current?.focus(), 0);
-  }, [dirty, navigationBusy]);
+  }, [dirty, navigationBusy, t]);

  useEffect(() => { onNavigationStateChange({ dirty, busy: navigationBusy }); }, [dirty, navigationBusy, onNavigationStateChange]);
  useEffect(() => {
@@ -181,7 +187,7 @@ export function DatabaseTables({
  };
  const navigateDatabase = (target: "databases" | "overview" | "relationships") => {
    if (navigationBusy) return;
-    if (dirty && !window.confirm("Discard unsaved metadata?")) return;
+    if (dirty && !window.confirm(t("Discard unsaved metadata?"))) return;
    if (target === "databases") onBackToDatabases();
    else if (target === "overview") onOpenOverview();
    else onOpenRelationships();
@@ -201,13 +207,13 @@ export function DatabaseTables({
      setEditorVersion(updated.version);
      setStale(false);
      void onCatalogMetricsChanged?.();
-      toast.success("Table metadata saved");
+      toast.success(t("Table metadata saved"));
    } catch (error) {
      if (error instanceof ApiError && error.code === "table_stale") {
        await refetch();
        setStale(true);
        setStaleBannerOpen(true);
-      } else toast.error(apiErrorMessage(error));
+      } else toast.error(t(apiErrorMessage(error)));
    } finally { setBusy(null); }
  };
  const reloadTable = async () => {
@@ -223,7 +229,7 @@ export function DatabaseTables({
      setEditorVersion(latest.version);
      setStale(false);
      setStaleBannerOpen(true);
-    } catch (error) { toast.error(apiErrorMessage(error)); } finally { setBusy(null); }
+    } catch (error) { toast.error(t(apiErrorMessage(error))); } finally { setBusy(null); }
  };
  const synchronize = async (scope: "tables" | "columns" | "all", tableIds: string[] = []) => {
    setBusy("sync");
@@ -232,8 +238,8 @@ export function DatabaseTables({
      onRunStarted(run);
      gridRef.current?.api.deselectAll();
      setSelectedIds([]);
-      toast.success(scope === "all" ? "Full schema synchronization started" : scope === "columns" ? "Column synchronization started" : "Table synchronization started");
-    } catch (error) { toast.error(apiErrorMessage(error)); } finally { setBusy(null); }
+      toast.success(scope === "all" ? t("Full schema synchronization started") : scope === "columns" ? t("Column synchronization started") : t("Table synchronization started"));
+    } catch (error) { toast.error(t(apiErrorMessage(error))); } finally { setBusy(null); }
  };
  const deleteMetadata = async (target: CatalogTableMetadataDeleteTarget) => {
    setBusy("delete");
@@ -250,10 +256,10 @@ export function DatabaseTables({
      window.setTimeout(() => searchInputRef.current?.focus(), 0);
      void onCatalogMetricsChanged?.();
      toast.success(target === "columns"
-        ? `${presentation === "fleet" ? "Cleared" : "Deleted"} ${counts.columns} catalog columns`
-        : `${presentation === "fleet" ? "Cleared" : "Deleted"} ${counts.relationships} catalog relationships`);
+        ? t("{value} {columns} catalog columns", { value: presentation === "fleet" ? t("Cleared") : t("Deleted"), columns: counts.columns })
+        : t("{value} {relationships} catalog relationships", { value: presentation === "fleet" ? t("Cleared") : t("Deleted"), relationships: counts.relationships }));
    } catch (error) {
-      toast.error(apiErrorMessage(error));
+      toast.error(t(apiErrorMessage(error)));
    } finally { setBusy(null); }
  };
  const consolidateDescriptions = async () => {
@@ -264,9 +270,9 @@ export function DatabaseTables({
      gridRef.current?.api.deselectAll();
      setSelectedIds([]);
      void onCatalogMetricsChanged?.();
-      toast.success(`Copied ${counts.copied} description${counts.copied === 1 ? "" : "s"}; skipped ${counts.skipped}`);
+      toast.success((counts.copied === 1 ? t("Copied {copied} description; skipped {skipped}", { copied: counts.copied, skipped: counts.skipped }) : t("Copied {copied} descriptions; skipped {skipped}", { copied: counts.copied, skipped: counts.skipped })));
    } catch (error) {
-      toast.error(apiErrorMessage(error));
+      toast.error(t(apiErrorMessage(error)));
    } finally { setBusy(null); }
  };
  const generateDescriptions = async () => {
@@ -280,9 +286,9 @@ export function DatabaseTables({
        selectedIds,
      );
      onDescriptionGenerationRunStarted(run);
-      toast.success(`Description generation started for ${selectedIds.length} table${selectedIds.length === 1 ? "" : "s"}`);
+      toast.success((selectedIds.length === 1 ? t("Description generation started for {count} table", { count: selectedIds.length }) : t("Description generation started for {count} tables", { count: selectedIds.length })));
    } catch (error) {
-      toast.error(apiErrorMessage(error));
+      toast.error(t(apiErrorMessage(error)));
    } finally { setBusy(null); }
  };
  const generateColumnDescriptions = async () => {
@@ -292,7 +298,7 @@ export function DatabaseTables({
      const columns = (await Promise.all(selectedIds.map((tableId) => listCatalogColumns(databaseId, tableId)))).flat();
      const columnIds = columns.map((column) => column.id);
      if (columnIds.length === 0) {
-        toast.error("The selected tables have no synchronized catalog columns.");
+        toast.error(t("The selected tables have no synchronized catalog columns."));
        return;
      }
      const run = await startDescriptionGenerationRun(
@@ -302,9 +308,9 @@ export function DatabaseTables({
        columnIds,
      );
      onDescriptionGenerationRunStarted(run);
-      toast.success(`Column description generation started for ${columnIds.length} column${columnIds.length === 1 ? "" : "s"}`);
+      toast.success((columnIds.length === 1 ? t("Column description generation started for {count} column", { count: columnIds.length }) : t("Column description generation started for {count} columns", { count: columnIds.length })));
    } catch (error) {
-      toast.error(apiErrorMessage(error));
+      toast.error(t(apiErrorMessage(error)));
    } finally { setBusy(null); }
  };
  const suggestSensitive = async () => {
@@ -313,7 +319,7 @@ export function DatabaseTables({
    try {
      await onSuggestSensitive(
        { scope: "selected_tables", targetIds: selectedIds },
-        `${selectedIds.length} selected table${selectedIds.length === 1 ? "" : "s"}`,
+        (selectedIds.length === 1 ? adminMessage("{count} selected table", { count: selectedIds.length }) : adminMessage("{count} selected tables", { count: selectedIds.length })),
      );
    } catch {
      // The page-level request reports the safe, specific reason and preserves the selection.
@@ -334,112 +340,112 @@ export function DatabaseTables({
  const fleetActions: readonly FleetActionOption<FleetTableAction>[] = [
    {
      id: "generate-descriptions",
-      label: "Generate table description",
-      group: "Descriptions",
-      runLabel: "Generate",
+      label: t("Generate table description"),
+      group: t("Descriptions"),
+      runLabel: t("Generate"),
      disabled: !canManage || selectedIds.length === 0 || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun),
      disabledReason: !canManage
-        ? "You do not have permission to generate descriptions."
+        ? t("You do not have permission to generate descriptions.")
        : selectedIds.length === 0
-          ? "Select at least one table."
+          ? t("Select at least one table.")
          : !selectedMetadataModel
            ? NO_METADATA_GENERATION_LLM_MODEL_MESSAGE
            : descriptionGenerationActive || Boolean(currentRun)
-              ? "Wait for the active catalog operation to finish."
+              ? t("Wait for the active catalog operation to finish.")
              : busy !== null
-                ? "Another action is running."
+                ? t("Another action is running.")
                : undefined,
    },
    {
      id: "generate-column-descriptions",
-      label: "Generate column descriptions",
-      group: "Descriptions",
-      runLabel: "Generate",
+      label: t("Generate column descriptions"),
+      group: t("Descriptions"),
+      runLabel: t("Generate"),
      disabled: !canManage || selectedIds.length === 0 || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun),
      disabledReason: !canManage
-        ? "You do not have permission to generate descriptions."
+        ? t("You do not have permission to generate descriptions.")
        : selectedIds.length === 0
-          ? "Select at least one table."
+          ? t("Select at least one table.")
          : !selectedMetadataModel
            ? NO_METADATA_GENERATION_LLM_MODEL_MESSAGE
            : descriptionGenerationActive || Boolean(currentRun)
-              ? "Wait for the active catalog operation to finish."
+              ? t("Wait for the active catalog operation to finish.")
              : busy !== null
-                ? "Another action is running."
+                ? t("Another action is running.")
                : undefined,
    },
    {
      id: "consolidate-descriptions",
-      label: "Copy generated descriptions to Description",
-      group: "Descriptions",
-      runLabel: "Move",
+      label: t("Copy generated descriptions to Description"),
+      group: t("Descriptions"),
+      runLabel: t("Move"),
      disabled: !canManage || selectedIds.length === 0 || busy !== null || Boolean(currentRun),
      disabledReason: !canManage
-        ? "You do not have permission to update metadata."
+        ? t("You do not have permission to update metadata.")
        : selectedIds.length === 0
-          ? "Select at least one table."
+          ? t("Select at least one table.")
          : busy !== null || Boolean(currentRun)
-            ? "Wait for the active catalog operation to finish."
+            ? t("Wait for the active catalog operation to finish.")
            : undefined,
    },
    {
      id: "sync-tables",
-      label: "Synchronize database tables",
-      group: "Synchronization",
-      scopeLabel: "Selected database",
-      runLabel: "Synchronize",
+      label: t("Synchronize database tables"),
+      group: t("Synchronization"),
+      scopeLabel: t("Selected database"),
+      runLabel: t("Synchronize"),
      disabled: !canManage || selectedIds.length === 0 || busy !== null || Boolean(currentRun),
      disabledReason: !canManage
-        ? "You do not have permission to synchronize the catalog."
+        ? t("You do not have permission to synchronize the catalog.")
        : selectedIds.length === 0
-          ? "Select at least one table."
+          ? t("Select at least one table.")
          : busy !== null || Boolean(currentRun)
-            ? "Wait for the active catalog operation to finish."
+            ? t("Wait for the active catalog operation to finish.")
            : undefined,
    },
    {
      id: "sync-columns",
-      label: "Synchronize columns for selected tables",
-      group: "Synchronization",
-      runLabel: "Synchronize",
+      label: t("Synchronize columns for selected tables"),
+      group: t("Synchronization"),
+      runLabel: t("Synchronize"),
      disabled: !canManage || selectedIds.length === 0 || busy !== null || Boolean(currentRun),
      disabledReason: !canManage
-        ? "You do not have permission to synchronize the catalog."
+        ? t("You do not have permission to synchronize the catalog.")
        : selectedIds.length === 0
-          ? "Select at least one table."
+          ? t("Select at least one table.")
          : busy !== null || Boolean(currentRun)
-            ? "Wait for the active catalog operation to finish."
+            ? t("Wait for the active catalog operation to finish.")
            : undefined,
    },
    {
      id: "suggest-sensitive",
-      label: "Analyze sensitive fields",
-      group: "Sensitive data",
-      runLabel: "Analyze",
+      label: t("Analyze sensitive fields"),
+      group: t("Sensitive data"),
+      runLabel: t("Analyze"),
      disabled: !canManage || selectedIds.length === 0 || descriptionGenerationActive || busy !== null || Boolean(currentRun),
      disabledReason: !canManage
-        ? "You do not have permission to review sensitive data."
+        ? t("You do not have permission to review sensitive data.")
        : selectedIds.length === 0
-          ? "Select at least one table."
+          ? t("Select at least one table.")
        : descriptionGenerationActive || Boolean(currentRun)
-              ? "Wait for the active catalog operation to finish."
+              ? t("Wait for the active catalog operation to finish.")
              : busy !== null
-                ? "Another action is running."
+                ? t("Another action is running.")
                : undefined,
    },
    {
      id: "clear-columns",
-      label: "Remove synchronized columns",
-      group: "Catalog cleanup",
+      label: t("Remove synchronized columns"),
+      group: t("Catalog cleanup"),
      tone: "destructive",
-      runLabel: "Review cleanup",
+      runLabel: t("Review cleanup"),
      disabled: !canManage || selectedIds.length === 0 || busy !== null || Boolean(currentRun),
      disabledReason: !canManage
-        ? "You do not have permission to clear catalog metadata."
+        ? t("You do not have permission to clear catalog metadata.")
        : selectedIds.length === 0
-          ? "Select at least one table."
+          ? t("Select at least one table.")
          : busy !== null || Boolean(currentRun)
-            ? "Wait for the active catalog operation to finish."
+            ? t("Wait for the active catalog operation to finish.")
            : undefined,
    },
  ];
@@ -460,51 +466,50 @@ export function DatabaseTables({
  };

  const columns = useMemo<ColDef<CatalogTable>[]>(() => [
-    { field: "name", headerName: "Name", minWidth: 250, flex: 1, cellClass: "font-mono text-xs" },
-    { field: "sourceComment", headerName: "Source comment", minWidth: 260, flex: 1.25, valueFormatter: ({ value }) => value ?? "" },
-    { field: "generatedDescription", headerName: "Generated description", minWidth: 280, flex: 1.25, valueFormatter: ({ value }) => value ?? "" },
-    { field: "description", headerName: "Description", minWidth: 280, flex: 1.25, valueFormatter: ({ value }) => value ?? "" },
-    { colId: "actions", headerName: "Actions", width: 104, minWidth: 104, maxWidth: 104, pinned: "right", lockPinned: true, sortable: false, filter: false, resizable: false, suppressMovable: true, suppressHeaderMenuButton: true, cellRenderer: TableActionsCell },
-  ], []);
-  const context = useMemo<TableGridContext>(() => ({ canManage, presentation, onOpen: openTable }), [canManage, data, presentation]);
+    { field: "name", headerName: t("Name"), minWidth: 250, flex: 1, cellClass: "font-mono text-xs" },
+    { field: "sourceComment", headerName: t("Source comment"), minWidth: 260, flex: 1.25, valueFormatter: ({ value }) => value ?? "" },
+    { field: "generatedDescription", headerName: t("Generated description"), minWidth: 280, flex: 1.25, valueFormatter: ({ value }) => value ?? "" },
+    { field: "description", headerName: t("Description"), minWidth: 280, flex: 1.25, valueFormatter: ({ value }) => value ?? "" },
+    { colId: "actions", headerName: t("Actions"), width: 104, minWidth: 104, maxWidth: 104, pinned: "right", lockPinned: true, sortable: false, filter: false, resizable: false, suppressMovable: true, suppressHeaderMenuButton: true, cellRenderer: TableActionsCell },
+  ], [t]);
+  const context = useMemo<TableGridContext>(() => ({ canManage, presentation, onOpen: openTable }), [canManage, data, presentation, t]);
  const visibleSelected = useMemo(() => {
    const term = search.trim().toLocaleLowerCase();
    if (!term) return selectedIds.length;
    const selected = new Set(selectedIds);
    return data.filter((table) => selected.has(table.id) && [table.name, table.sourceComment, table.generatedDescription, table.description]
      .some((value) => value?.toLocaleLowerCase().includes(term))).length;
-  }, [data, search, selectedIds]);
+  }, [data, search, selectedIds, t]);
  const fleetQueryError = presentation === "fleet" && isError ? (
    <div className="grid min-h-[280px] flex-1 place-items-center p-6" role="alert">
      <div className="max-w-lg rounded-lg border border-destructive/30 bg-destructive/8 p-5 text-sm">
-        <p className="font-semibold text-destructive">Catalog tables could not be loaded.</p>
-        <p className="mt-1 leading-5 text-muted-foreground">{apiErrorMessage(error)}</p>
+        <p className="font-semibold text-destructive">{t("Catalog tables could not be loaded.")}</p>
+        <p className="mt-1 leading-5 text-muted-foreground">{t(apiErrorMessage(error))}</p>
        <Button type="button" variant="outline" className="mt-4" disabled={isFetching} onClick={() => void refetch()}>
-          <RefreshCw className={isFetching ? "animate-spin" : ""} aria-hidden="true" /> Retry tables
-        </Button>
+          <RefreshCw className={isFetching ? "animate-spin" : ""} aria-hidden="true" /> {t("Retry tables")}</Button>
      </div>
    </div>
  ) : null;

  const databaseHeader = (
    <div className="px-4 pt-5 sm:px-5">
-      <Button type="button" variant="ghost" className="-ml-2 mb-4" disabled={navigationBusy} onClick={() => navigateDatabase("databases")}><ArrowLeft />Back to databases</Button>
+      <Button type="button" variant="ghost" className="-ml-2 mb-4" disabled={navigationBusy} onClick={() => navigateDatabase("databases")}><ArrowLeft />{t("Back to databases")}</Button>
        <div className="flex flex-wrap items-start justify-between gap-4 border-b border-border pb-5">
        <div>
-          <p className="thot-label mb-1">Database management</p>
+          <p className="thot-label mb-1">{t("Database management")}</p>
          <h2 ref={headingRef} tabIndex={-1} className="font-heading text-2xl font-semibold tracking-tight outline-none">{database.workspaceName}</h2>
          <p className="mt-1 text-sm text-muted-foreground">{database.databaseName} · {database.schema}</p>
        </div>
        <div className="flex gap-2">
-          {currentRun ? <Button type="button" variant="outline" onClick={onOpenSync}><RefreshCw className="animate-spin" />View sync</Button> : null}
-          {onClearCatalogTables ? <Button type="button" variant="outline" className="text-destructive" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void clearAllCatalogTables()}>Clear catalog tables</Button> : null}
-          <Button type="button" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void synchronize("all")}><RefreshCw />Sync all</Button>
+          {currentRun ? <Button type="button" variant="outline" onClick={onOpenSync}><RefreshCw className="animate-spin" />{t("View sync")}</Button> : null}
+          {onClearCatalogTables ? <Button type="button" variant="outline" className="text-destructive" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void clearAllCatalogTables()}>{t("Clear catalog tables")}</Button> : null}
+          <Button type="button" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void synchronize("all")}><RefreshCw />{t("Sync all")}</Button>
        </div>
      </div>
-      <nav aria-label="Database sections" className="flex gap-1 border-b border-border" role="tablist">
-        <button type="button" role="tab" aria-selected="false" className="border-b-2 border-transparent px-3 py-2 text-sm font-semibold text-muted-foreground hover:text-foreground" onClick={() => navigateDatabase("overview")}>Overview</button>
-        <button type="button" role="tab" aria-selected="true" className="border-b-2 border-primary px-3 py-2 text-sm font-semibold text-foreground">Tables</button>
-        <button type="button" role="tab" aria-selected="false" className="border-b-2 border-transparent px-3 py-2 text-sm font-semibold text-muted-foreground hover:text-foreground" onClick={() => navigateDatabase("relationships")}>Relationships</button>
+      <nav aria-label={t("Database sections")} className="flex gap-1 border-b border-border" role="tablist">
+        <button type="button" role="tab" aria-selected="false" className="border-b-2 border-transparent px-3 py-2 text-sm font-semibold text-muted-foreground hover:text-foreground" onClick={() => navigateDatabase("overview")}>{t("Overview")}</button>
+        <button type="button" role="tab" aria-selected="true" className="border-b-2 border-primary px-3 py-2 text-sm font-semibold text-foreground">{t("Tables")}</button>
+        <button type="button" role="tab" aria-selected="false" className="border-b-2 border-transparent px-3 py-2 text-sm font-semibold text-muted-foreground hover:text-foreground" onClick={() => navigateDatabase("relationships")}>{t("Relationships")}</button>
      </nav>
    </div>
  );
@@ -512,10 +517,10 @@ export function DatabaseTables({
  if (activeTable && presentation === "fleet") {
    if (tableSection === "columns") {
      return (
-        <section aria-label={`Columns for ${activeTable.name}`} className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
+        <section aria-label={t("Columns for {name}", { name: activeTable.name })} className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
          <div className="flex min-h-12 flex-wrap items-center gap-3 border-b border-border bg-muted/25 px-3 py-2">
            <div className="min-w-0">
-              <p className="thot-label">Physical table</p>
+              <p className="thot-label">{t("Physical table")}</p>
              <h3 className="truncate font-heading text-lg font-semibold">{activeTable.name}</h3>
            </div>
          </div>
@@ -539,27 +544,26 @@ export function DatabaseTables({
    }

    return (
-      <section aria-label={`Tables for ${database.workspaceName}`} className="relative flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
+      <section aria-label={t("Tables for {workspaceName}", { workspaceName: database.workspaceName })} className="relative flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
        <div className="thot-fleet-grid-toolbar flex min-h-12 flex-wrap items-center gap-3 border-b border-border px-3 py-2">
-          <span className="thot-label whitespace-nowrap">Catalog tables</span>
+          <span className="thot-label whitespace-nowrap">{t("Catalog tables")}</span>
          <input
            ref={searchInputRef}
            className="h-8 min-w-40 flex-1 rounded-md border border-input bg-background px-2.5 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15"
-            aria-label="Search tables"
-            placeholder="Search"
+            aria-label={t("Search tables")}
+            placeholder={t("Search")}
            value={search}
            onChange={(event) => setSearch(event.target.value)}
          />
          <span className="whitespace-nowrap text-xs tabular-nums text-muted-foreground">
-            {search.trim() ? `${displayedCount} of ${data.length}` : displayedCount}
+            {search.trim() ? t("{count} of {total}", { count: displayedCount, total: data.length }) : displayedCount}
          </span>
          <Button type="button" variant="outline" disabled={isFetching || busy !== null} onClick={() => void refetch()}>
-            <RefreshCw className={isFetching ? "animate-spin" : ""} /> Refresh
-          </Button>
+            <RefreshCw className={isFetching ? "animate-spin" : ""} /> {t("Refresh")}</Button>
        </div>
        {fleetQueryError ?? <div className="relative min-h-[280px] flex-1">
          <div className="thot-database-grid thot-fleet-ledger-grid ag-theme-alpine absolute inset-0 h-full w-full">
-            <AgGridReact<CatalogTable>
+            <AgGridReact<CatalogTable> key={locale} {...gridLocaleProps}
              ref={gridRef}
              rowData={data}
              columnDefs={columns}
@@ -574,43 +578,43 @@ export function DatabaseTables({
              rowHeight={44}
              headerHeight={38}
              animateRows={false}
-              overlayNoRowsTemplate="No catalog tables. Synchronize the schema from the database view."
+              overlayNoRowsTemplate={t("No catalog tables. Synchronize the schema from the database view.")}
            />
          </div>
        </div>}
        <FleetLedgerDrawer
          open
-          eyebrow="Catalog metadata"
-          title="Review table description"
-          description="Physical schema fields are read-only. Review fields can be edited."
+          eyebrow={t("Catalog metadata")}
+          title={t("Review table description")}
+          description={t("Physical schema fields are read-only. Review fields can be edited.")}
          onClose={leaveTable}
-          closeLabel="Close table metadata"
+          closeLabel={t("Close table metadata")}
          busy={busy !== null}
          footer={(
            <>
-              <Button type="button" variant="outline" disabled={busy !== null} onClick={leaveTable}>Cancel</Button>
+              <Button type="button" variant="outline" disabled={busy !== null} onClick={leaveTable}>{t("Cancel")}</Button>
              <Button type="button" disabled={!canManage || !editorDirty || busy !== null || stale} onClick={() => void save()}>
-                <Save aria-hidden="true" />{busy === "save" ? "Saving…" : "Save metadata"}
+                <Save aria-hidden="true" />{busy === "save" ? t("Saving…") : t("Save metadata")}
              </Button>
            </>
          )}
        >
-          <p className="thot-label">Physical table</p>
+          <p className="thot-label">{t("Physical table")}</p>
          <h3 className="mt-1 break-words font-heading text-xl font-semibold">{activeTable.name}</h3>
          {stale ? (
            staleBannerOpen ? (
              <div className="mt-4 rounded-md border border-amber-500/50 bg-amber-500/8 p-4 text-sm">
-                <p className="font-semibold">A newer table description is available.</p>
-                <p className="mt-1 text-muted-foreground">Your draft is preserved until you reload the current metadata.</p>
-                <div className="mt-3 flex gap-2"><Button type="button" variant="outline" onClick={() => void reloadTable()}>Reload latest</Button><Button type="button" variant="ghost" onClick={() => setStaleBannerOpen(false)}>Keep editing</Button></div>
+                <p className="font-semibold">{t("A newer table description is available.")}</p>
+                <p className="mt-1 text-muted-foreground">{t("Your draft is preserved until you reload the current metadata.")}</p>
+                <div className="mt-3 flex gap-2"><Button type="button" variant="outline" onClick={() => void reloadTable()}>{t("Reload latest")}</Button><Button type="button" variant="ghost" onClick={() => setStaleBannerOpen(false)}>{t("Keep editing")}</Button></div>
              </div>
-            ) : <div className="mt-4 flex items-center justify-between gap-3 rounded-md border border-amber-500/40 bg-amber-500/8 px-4 py-3 text-sm"><span>Reload the latest value before this description can be saved.</span><Button type="button" variant="outline" onClick={() => void reloadTable()}>Reload latest</Button></div>
+            ) : <div className="mt-4 flex items-center justify-between gap-3 rounded-md border border-amber-500/40 bg-amber-500/8 px-4 py-3 text-sm"><span>{t("Reload the latest value before this description can be saved.")}</span><Button type="button" variant="outline" onClick={() => void reloadTable()}>{t("Reload latest")}</Button></div>
          ) : null}
          <div className="mt-5 grid gap-4">
-            <label className="grid gap-1.5 text-sm font-semibold">Physical table name<input className="h-9 rounded-md border border-input bg-muted/35 px-3 font-mono text-xs" value={activeTable.name} readOnly /></label>
-            <label className="grid gap-1.5 text-sm font-semibold">Source comment<textarea className="min-h-24 rounded-md border border-input bg-muted/35 px-3 py-2 text-sm" value={activeTable.sourceComment ?? ""} readOnly /></label>
-            <label className="grid gap-1.5 text-sm font-semibold">Generated description<textarea className="min-h-32 rounded-md border border-input bg-card px-3 py-2 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" value={generatedDescription} disabled={!canManage || busy !== null} onChange={(event) => setGeneratedDescription(event.target.value)} /></label>
-            <label className="grid gap-1.5 text-sm font-semibold">Description<textarea className="min-h-36 rounded-md border border-input bg-card px-3 py-2 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" value={description} disabled={!canManage || busy !== null} onChange={(event) => setDescription(event.target.value)} /><span className="font-normal text-muted-foreground">Leave blank to keep the curated description empty.</span></label>
+            <label className="grid gap-1.5 text-sm font-semibold">{t("Physical table name")}<input className="h-9 rounded-md border border-input bg-muted/35 px-3 font-mono text-xs" value={activeTable.name} readOnly /></label>
+            <label className="grid gap-1.5 text-sm font-semibold">{t("Source comment")}<textarea className="min-h-24 rounded-md border border-input bg-muted/35 px-3 py-2 text-sm" value={activeTable.sourceComment ?? ""} readOnly /></label>
+            <label className="grid gap-1.5 text-sm font-semibold">{t("Generated description")}<textarea className="min-h-32 rounded-md border border-input bg-card px-3 py-2 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" value={generatedDescription} disabled={!canManage || busy !== null} onChange={(event) => setGeneratedDescription(event.target.value)} /></label>
+            <label className="grid gap-1.5 text-sm font-semibold">{t("Description")}<textarea className="min-h-36 rounded-md border border-input bg-card px-3 py-2 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" value={description} disabled={!canManage || busy !== null} onChange={(event) => setDescription(event.target.value)} /><span className="font-normal text-muted-foreground">{t("Leave blank to keep the curated description empty.")}</span></label>
          </div>
        </FleetLedgerDrawer>
      </section>
@@ -619,16 +623,16 @@ export function DatabaseTables({

  if (activeTable) {
    return (
-      <section aria-label={`Table ${activeTable.name}`} className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
+      <section aria-label={t("Table {name}", { name: activeTable.name })} className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
        {databaseHeader}
        <div className="mx-3 mb-4 mt-4 flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border border-border bg-card sm:mx-5">
          <div className="border-b border-border px-4 pt-4">
-            <Button type="button" variant="ghost" className="-ml-2 mb-2" onClick={leaveTable}><ArrowLeft />Back to tables</Button>
-            <p className="thot-label">Physical table</p>
+            <Button type="button" variant="ghost" className="-ml-2 mb-2" onClick={leaveTable}><ArrowLeft />{t("Back to tables")}</Button>
+            <p className="thot-label">{t("Physical table")}</p>
            <h3 className="mt-1 font-heading text-xl font-semibold">{activeTable.name}</h3>
-            <nav aria-label="Table sections" className="mt-3 flex gap-1" role="tablist">
-              <button type="button" role="tab" aria-selected={tableSection === "overview"} className={`border-b-2 px-3 py-2 text-sm font-semibold ${tableSection === "overview" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"}`} onClick={() => setTableSection("overview")}>Overview</button>
-              <button type="button" role="tab" aria-selected={tableSection === "columns"} className={`border-b-2 px-3 py-2 text-sm font-semibold ${tableSection === "columns" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"}`} onClick={() => setTableSection("columns")}>Columns</button>
+            <nav aria-label={t("Table sections")} className="mt-3 flex gap-1" role="tablist">
+              <button type="button" role="tab" aria-selected={tableSection === "overview"} className={`border-b-2 px-3 py-2 text-sm font-semibold ${tableSection === "overview" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"}`} onClick={() => setTableSection("overview")}>{t("Overview")}</button>
+              <button type="button" role="tab" aria-selected={tableSection === "columns"} className={`border-b-2 px-3 py-2 text-sm font-semibold ${tableSection === "columns" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"}`} onClick={() => setTableSection("columns")}>{t("Columns")}</button>
            </nav>
          </div>
          {tableSection === "columns" ? (
@@ -647,25 +651,25 @@ export function DatabaseTables({
            />
          ) : (
            <div className="min-h-0 overflow-y-auto px-4 py-5">
-              <p className="text-sm text-muted-foreground">Only review metadata can be changed.</p>
+              <p className="text-sm text-muted-foreground">{t("Only review metadata can be changed.")}</p>
              {stale ? (
                staleBannerOpen ? (
                  <div className="mt-4 rounded-md border border-amber-500/50 bg-amber-500/8 p-4 text-sm">
-                    <p className="font-semibold">A newer table description is available.</p>
-                    <p className="mt-1 text-muted-foreground">Your draft is preserved until you reload the current metadata.</p>
-                    <div className="mt-3 flex gap-2"><Button type="button" variant="outline" onClick={() => void reloadTable()}>Reload latest</Button><Button type="button" variant="ghost" onClick={() => setStaleBannerOpen(false)}>Keep editing</Button></div>
+                    <p className="font-semibold">{t("A newer table description is available.")}</p>
+                    <p className="mt-1 text-muted-foreground">{t("Your draft is preserved until you reload the current metadata.")}</p>
+                    <div className="mt-3 flex gap-2"><Button type="button" variant="outline" onClick={() => void reloadTable()}>{t("Reload latest")}</Button><Button type="button" variant="ghost" onClick={() => setStaleBannerOpen(false)}>{t("Keep editing")}</Button></div>
                  </div>
-                ) : <div className="mt-4 flex items-center justify-between gap-3 rounded-md border border-amber-500/40 bg-amber-500/8 px-4 py-3 text-sm"><span>Reload the latest value before this description can be saved.</span><Button type="button" variant="outline" onClick={() => void reloadTable()}>Reload latest</Button></div>
+                ) : <div className="mt-4 flex items-center justify-between gap-3 rounded-md border border-amber-500/40 bg-amber-500/8 px-4 py-3 text-sm"><span>{t("Reload the latest value before this description can be saved.")}</span><Button type="button" variant="outline" onClick={() => void reloadTable()}>{t("Reload latest")}</Button></div>
              ) : null}
              <div className="mt-5 grid gap-4">
-                <label className="grid gap-1.5 text-sm font-semibold">Physical table name<input className="h-9 rounded-md border border-input bg-muted/35 px-3 font-mono text-xs" value={activeTable.name} readOnly /></label>
-                <label className="grid gap-1.5 text-sm font-semibold">Source comment<textarea className="min-h-24 rounded-md border border-input bg-muted/35 px-3 py-2 text-sm" value={activeTable.sourceComment ?? ""} readOnly /></label>
-                <label className="grid gap-1.5 text-sm font-semibold">Generated description<textarea className="min-h-32 rounded-md border border-input bg-card px-3 py-2 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" value={generatedDescription} disabled={!canManage || busy !== null} onChange={(event) => setGeneratedDescription(event.target.value)} /></label>
-                <label className="grid gap-1.5 text-sm font-semibold">Description<textarea className="min-h-36 rounded-md border border-input bg-card px-3 py-2 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" value={description} disabled={!canManage || busy !== null} onChange={(event) => setDescription(event.target.value)} /><span className="font-normal text-muted-foreground">Leave blank to keep the curated description empty.</span></label>
+                <label className="grid gap-1.5 text-sm font-semibold">{t("Physical table name")}<input className="h-9 rounded-md border border-input bg-muted/35 px-3 font-mono text-xs" value={activeTable.name} readOnly /></label>
+                <label className="grid gap-1.5 text-sm font-semibold">{t("Source comment")}<textarea className="min-h-24 rounded-md border border-input bg-muted/35 px-3 py-2 text-sm" value={activeTable.sourceComment ?? ""} readOnly /></label>
+                <label className="grid gap-1.5 text-sm font-semibold">{t("Generated description")}<textarea className="min-h-32 rounded-md border border-input bg-card px-3 py-2 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" value={generatedDescription} disabled={!canManage || busy !== null} onChange={(event) => setGeneratedDescription(event.target.value)} /></label>
+                <label className="grid gap-1.5 text-sm font-semibold">{t("Description")}<textarea className="min-h-36 rounded-md border border-input bg-card px-3 py-2 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" value={description} disabled={!canManage || busy !== null} onChange={(event) => setDescription(event.target.value)} /><span className="font-normal text-muted-foreground">{t("Leave blank to keep the curated description empty.")}</span></label>
              </div>
              <div className="mt-5 flex justify-end gap-2 border-t border-border pt-4">
-                <Button type="button" variant="outline" disabled={busy !== null} onClick={leaveTable}>Cancel</Button>
-                <Button type="button" disabled={!canManage || !editorDirty || busy !== null || stale} onClick={() => void save()}><Save />{busy === "save" ? "Saving…" : "Save metadata"}</Button>
+                <Button type="button" variant="outline" disabled={busy !== null} onClick={leaveTable}>{t("Cancel")}</Button>
+                <Button type="button" disabled={!canManage || !editorDirty || busy !== null || stale} onClick={() => void save()}><Save />{busy === "save" ? t("Saving…") : t("Save metadata")}</Button>
              </div>
            </div>
          )}
@@ -675,7 +679,7 @@ export function DatabaseTables({
  }

  return (
-    <section aria-label={`Tables for ${database.workspaceName}`} className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
+    <section aria-label={t("Tables for {workspaceName}", { workspaceName: database.workspaceName })} className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
      {presentation === "legacy" ? databaseHeader : null}
      <div className={presentation === "fleet" ? "thot-fleet-grid-surface flex min-h-0 flex-1 flex-col overflow-hidden bg-card" : "mx-3 mb-4 mt-4 flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border border-border bg-card sm:mx-5"}>
        <div className={`${presentation === "fleet" ? "thot-fleet-grid-toolbar " : ""}flex min-h-12 flex-wrap items-center gap-3 border-b border-border px-3 py-2`}>
@@ -692,14 +696,13 @@ export function DatabaseTables({
                <div className="mr-auto min-w-56">
                  <p id="table-cleanup-confirmation" className="text-sm font-semibold">
                    {presentation === "fleet"
-                      ? `Remove synchronized columns for ${selectedIds.length} table${selectedIds.length === 1 ? "" : "s"}?`
-                      : `Remove synchronized columns for ${selectedIds.length} table${selectedIds.length === 1 ? "" : "s"}?`}
+                      ? (selectedIds.length === 1 ? t("Remove synchronized columns for {count} table?", { count: selectedIds.length }) : t("Remove synchronized columns for {count} tables?", { count: selectedIds.length }))
+                      : (selectedIds.length === 1 ? t("Remove synchronized columns for {count} table?", { count: selectedIds.length }) : t("Remove synchronized columns for {count} tables?", { count: selectedIds.length }))}
                  </p>
                  <p className="text-xs text-muted-foreground">
-                    Only synchronized catalog columns for these tables will be removed. The source database is not modified.
-                  </p>
+                    {t("Only synchronized catalog columns for these tables will be removed. The source database is not modified.")}</p>
                </div>
-                <Button type="button" variant="ghost" disabled={busy !== null} onClick={closeDeleteConfirmation}>Cancel</Button>
+                <Button type="button" variant="ghost" disabled={busy !== null} onClick={closeDeleteConfirmation}>{t("Cancel")}</Button>
                <Button
                  id="table-cleanup-confirm-button"
                  type="button"
@@ -707,8 +710,7 @@ export function DatabaseTables({
                  disabled={busy !== null}
                  onClick={() => void deleteMetadata(pendingDelete)}
                >
-                  <Trash2 />Remove synchronized columns
-                </Button>
+                  <Trash2 />{t("Remove synchronized columns")}</Button>
              </div>
            ) : (
              presentation === "fleet" ? (
@@ -718,35 +720,35 @@ export function DatabaseTables({
                    selectedCount={selectedIds.length}
                    hiddenSelectedCount={selectedIds.length - visibleSelected}
                    busy={busy !== null}
-                    busyLabel={busy === "generate" ? "Generating…" : busy === "suggest" ? "Suggesting…" : "Running…"}
+                    busyLabel={busy === "generate" ? t("Generating…") : busy === "suggest" ? t("Suggesting…") : t("Running…")}
                    selectRef={fleetActionSelectRef}
                    onRun={runFleetAction}
                    onClear={clearSelection}
-                    label="Table action"
+                    label={t("Table action")}
                  />
                </>
              ) : (
                <>
-                  <span className="text-sm font-semibold">{selectedIds.length} selected</span>
-                  {visibleSelected !== selectedIds.length ? <span className="text-xs text-muted-foreground">{selectedIds.length - visibleSelected} hidden by filter</span> : null}
+                  <span className="text-sm font-semibold">{selectedIds.length} {t("selected")}</span>
+                  {visibleSelected !== selectedIds.length ? <span className="text-xs text-muted-foreground">{selectedIds.length - visibleSelected} {t("hidden by filter")}</span> : null}
                  <Menu.Root>
-                    <Menu.Trigger ref={actionsTriggerRef} className="inline-flex h-8 items-center justify-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-muted disabled:pointer-events-none disabled:opacity-50" disabled={busy !== null}>Actions <ChevronDown className="size-4" /></Menu.Trigger>
+                    <Menu.Trigger ref={actionsTriggerRef} className="inline-flex h-8 items-center justify-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-muted disabled:pointer-events-none disabled:opacity-50" disabled={busy !== null}>{t("Actions")} <ChevronDown className="size-4" /></Menu.Trigger>
                    <Menu.Portal>
                      <Menu.Positioner side="bottom" align="start" sideOffset={4}>
                        <Menu.Popup className="z-50 min-w-64 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none">
-                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun)} onClick={() => void generateDescriptions()}>Generate table description</Menu.Item>
-                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun)} onClick={() => void generateColumnDescriptions()}>Generate descriptions for all columns</Menu.Item>
-                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void synchronize("tables")}>Synchronize database tables</Menu.Item>
-                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void synchronize("columns", selectedIds)}>Synchronize columns for selected tables</Menu.Item>
-                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void consolidateDescriptions()}>Copy generated descriptions to Description</Menu.Item>
+                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun)} onClick={() => void generateDescriptions()}>{t("Generate table description")}</Menu.Item>
+                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun)} onClick={() => void generateColumnDescriptions()}>{t("Generate descriptions for all columns")}</Menu.Item>
+                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void synchronize("tables")}>{t("Synchronize database tables")}</Menu.Item>
+                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void synchronize("columns", selectedIds)}>{t("Synchronize columns for selected tables")}</Menu.Item>
+                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void consolidateDescriptions()}>{t("Copy generated descriptions to Description")}</Menu.Item>
                          <Menu.Separator className="my-1 h-px bg-border" />
-                          <Menu.Item className="rounded-md px-3 py-2 text-sm text-destructive outline-none data-[highlighted]:bg-destructive/10 data-[disabled]:opacity-45" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => setPendingDelete("columns")}>Remove synchronized columns</Menu.Item>
+                          <Menu.Item className="rounded-md px-3 py-2 text-sm text-destructive outline-none data-[highlighted]:bg-destructive/10 data-[disabled]:opacity-45" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => setPendingDelete("columns")}>{t("Remove synchronized columns")}</Menu.Item>
                        </Menu.Popup>
                      </Menu.Positioner>
                    </Menu.Portal>
                  </Menu.Root>
-                  <Button type="button" variant="outline" disabled={!canManage || descriptionGenerationActive || busy !== null} title={descriptionGenerationActive ? "Wait for the active description generation to finish" : undefined} onClick={() => void suggestSensitive()}><Sparkles />{busy === "suggest" ? "Analyzing…" : "Analyze sensitive fields"}</Button>
-                  <Button type="button" variant="ghost" onClick={clearSelection}><X />Clear</Button>
+                  <Button type="button" variant="outline" disabled={!canManage || descriptionGenerationActive || busy !== null} title={descriptionGenerationActive ? t("Wait for the active description generation to finish") : undefined} onClick={() => void suggestSensitive()}><Sparkles />{busy === "suggest" ? t("Analyzing…") : t("Analyze sensitive fields")}</Button>
+                  <Button type="button" variant="ghost" onClick={clearSelection}><X />{t("Clear")}</Button>
                </>
              )
            )
@@ -757,29 +759,29 @@ export function DatabaseTables({
                  actions={fleetActions}
                  selectedCount={0}
                  busy={busy !== null}
-                  busyLabel={busy === "generate" ? "Generating…" : busy === "suggest" ? "Suggesting…" : "Running…"}
+                  busyLabel={busy === "generate" ? t("Generating…") : busy === "suggest" ? t("Suggesting…") : t("Running…")}
                  selectRef={fleetActionSelectRef}
                  onRun={runFleetAction}
                  onClear={clearSelection}
-                  label="Table action"
+                  label={t("Table action")}
                />
-                <input ref={searchInputRef} className="h-8 min-w-40 flex-1 rounded-md border border-input bg-background px-2.5 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" aria-label="Search tables" placeholder="Search" value={search} onChange={(event) => setSearch(event.target.value)} />
-                <span aria-live="polite" className="whitespace-nowrap text-xs tabular-nums text-muted-foreground">{search.trim() ? `${displayedCount} of ${data.length}` : displayedCount}</span>
-                <Button type="button" variant="outline" disabled={isFetching || busy !== null} onClick={() => void refetch()}><RefreshCw className={isFetching ? "animate-spin" : ""} />Refresh</Button>
+                <input ref={searchInputRef} className="h-8 min-w-40 flex-1 rounded-md border border-input bg-background px-2.5 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" aria-label={t("Search tables")} placeholder={t("Search")} value={search} onChange={(event) => setSearch(event.target.value)} />
+                <span aria-live="polite" className="whitespace-nowrap text-xs tabular-nums text-muted-foreground">{search.trim() ? t("{count} of {total}", { count: displayedCount, total: data.length }) : displayedCount}</span>
+                <Button type="button" variant="outline" disabled={isFetching || busy !== null} onClick={() => void refetch()}><RefreshCw className={isFetching ? "animate-spin" : ""} />{t("Refresh")}</Button>
              </>
            ) : (
              <>
-                <span className="thot-label whitespace-nowrap">Catalog tables</span>
-                <input ref={searchInputRef} className="h-8 min-w-40 flex-1 rounded-md border border-input bg-background px-2.5 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" aria-label="Search tables" placeholder="Search" value={search} onChange={(event) => setSearch(event.target.value)} />
-                <span aria-live="polite" className="whitespace-nowrap text-xs tabular-nums text-muted-foreground">{search.trim() ? `${displayedCount} of ${data.length}` : displayedCount}</span>
-                <Button type="button" variant="outline" disabled={isFetching || busy !== null} onClick={() => void refetch()}><RefreshCw className={isFetching ? "animate-spin" : ""} />Refresh</Button>
+                <span className="thot-label whitespace-nowrap">{t("Catalog tables")}</span>
+                <input ref={searchInputRef} className="h-8 min-w-40 flex-1 rounded-md border border-input bg-background px-2.5 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" aria-label={t("Search tables")} placeholder={t("Search")} value={search} onChange={(event) => setSearch(event.target.value)} />
+                <span aria-live="polite" className="whitespace-nowrap text-xs tabular-nums text-muted-foreground">{search.trim() ? t("{count} of {total}", { count: displayedCount, total: data.length }) : displayedCount}</span>
+                <Button type="button" variant="outline" disabled={isFetching || busy !== null} onClick={() => void refetch()}><RefreshCw className={isFetching ? "animate-spin" : ""} />{t("Refresh")}</Button>
              </>
            )
          )}
        </div>
        {fleetQueryError ?? <div className="relative min-h-[280px] flex-1">
          <div className={`thot-database-grid ${presentation === "fleet" ? "thot-fleet-ledger-grid " : ""}ag-theme-alpine absolute inset-0 h-full w-full`}>
-            <AgGridReact<CatalogTable>
+            <AgGridReact<CatalogTable> key={locale} {...gridLocaleProps}
              ref={gridRef}
              rowData={data}
              columnDefs={columns}
@@ -797,7 +799,7 @@ export function DatabaseTables({
              rowHeight={44}
              headerHeight={38}
              animateRows={false}
-              overlayNoRowsTemplate="No catalog tables. Synchronize the schema from the database view."
+              overlayNoRowsTemplate={t("No catalog tables. Synchronize the schema from the database view.")}
            />
          </div>
        </div>}