@anchrd/intel-ui 0.12.0 → 0.13.0

package/src/i18n/i18n.types.ts

@@ -1,6 +1,49 @@
+// A catalog is a flat file of dotted keys → text. Flat, because the lookup is then a map read and
+// the completeness test compares two key sets instead of walking two trees. The reserved `$locale`
+// key carries the file's BCP-47 locale (the sigil keeps it out of the UI key namespace), so every
+// language file is self-describing and date/number formats need no second configuration.
 export type Catalog = Record<string, string>;
 
+// What `intel build` writes into src/i18n/custom.json: the starting language plus every language
+// file listed in the customer's intel.json. The runtime loads nothing on demand — WHICH languages
+// exist is decided at build time; only which one runs is the reader's choice.
+export interface CatalogBundle {
+  defaultLanguage: string;
+  catalogs: Record<string, Catalog>;
+}
+
+export interface I18nDeps {
+  // The active language file. Without one the UI runs on the English catalog (the default).
+  catalog?: Catalog;
+}
+
 export interface I18n {
   locale: string;
   t(key: string, variables?: Record<string, string | number>): string;
 }
+
+// The slice of the Web Storage API the preferences need — as a port, not a global, so a choice is
+// testable without a DOM and localStorage is touched in exactly one place per preference.
+export interface PreferenceStore {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+export interface LanguagesDeps {
+  store?: PreferenceStore;
+}
+
+export interface Languages {
+  // Every selectable code: the built-in ones first, then whatever the customer added.
+  codes: string[];
+  // The language the app starts in: the remembered choice, otherwise the bundle's default.
+  initial: string;
+  i18n(code: string): I18n;
+  remember(code: string): void;
+}
+
+export interface LanguageChoice {
+  codes: string[];
+  current: string;
+  select(code: string): void;
+}

package/src/main.tsx

@@ -7,18 +7,30 @@ import {
   loginPath,
 } from "@/data/intel-data-provider/intel-data-provider.ts";
 import { createBrowserSignIn, createSignInGuard } from "@/data/sign-in/sign-in.ts";
-import { createI18n } from "@/i18n/i18n.ts";
+import { I18nProvider } from "@/i18n/i18n-context.tsx";
+import { createLanguages } from "@/i18n/i18n-languages/i18n-languages.ts";
 import { createIntelRouter } from "@/router/router.tsx";
 import { SignInRefused } from "@/sign-in-refused/sign-in-refused.tsx";
-import { SystemThemeQuery, watchSystemTheme } from "@/theme/theme.ts";
+import { applyTheme, readThemeChoice, SystemThemeQuery, themeFor } from "@/theme/theme.ts";
+import { ThemeProvider } from "@/theme/theme-context.tsx";
+import { TimezoneProvider } from "@/timezone/timezone-context.tsx";
 import "./styles.css";
 import "./theme/custom.css";
 
-watchSystemTheme(document.documentElement, window.matchMedia(SystemThemeQuery));
+// The first paint, BEFORE React — otherwise the light shell flashes until the provider mounts. Only
+// applied here and deliberately NOT subscribed: the subscription belongs to the ThemeProvider, and
+// two of them would overwrite one another.
+applyTheme(
+  document.documentElement,
+  themeFor(readThemeChoice(window.localStorage), window.matchMedia(SystemThemeQuery).matches),
+);
 
 const root = document.getElementById("root");
 if (!root) throw new Error("Missing #root element");
-const i18n = createI18n();
+
+// Which languages exist is decided at build time and lies ready in the bundle; only which one runs
+// is the reader's choice, and that choice is remembered in localStorage.
+const languages = createLanguages({ store: window.localStorage });
 const signIn = createBrowserSignIn(loginPath);
 const mounted = createRoot(root);
 const queryClient = new QueryClient();
@@ -33,18 +45,27 @@ const data = createIntelDataProvider({
     paint();
   }),
 });
-const router = createIntelRouter({ data, i18n });
+const router = createIntelRouter({ data });
 
 function paint(): void {
   mounted.render(
     <StrictMode>
-      {refused ? (
-        <SignInRefused i18n={i18n} />
-      ) : (
-        <QueryClientProvider client={queryClient}>
-          <RouterProvider router={router} />
-        </QueryClientProvider>
-      )}
+      {/* The refusal screen sits INSIDE the providers too: it is text like any other, and it is the
+          one screen a reader sees when nothing else works — English-only there would be the worst
+          place for it. */}
+      <I18nProvider languages={languages}>
+        <ThemeProvider store={window.localStorage}>
+          <TimezoneProvider store={window.localStorage}>
+            {refused ? (
+              <SignInRefused />
+            ) : (
+              <QueryClientProvider client={queryClient}>
+                <RouterProvider router={router} />
+              </QueryClientProvider>
+            )}
+          </TimezoneProvider>
+        </ThemeProvider>
+      </I18nProvider>
     </StrictMode>,
   );
 }

package/src/modal/modal.tsx

@@ -1,7 +1,7 @@
 import { useId } from "react";
 import { Modal as AriaModal, Dialog, ModalOverlay } from "react-aria-components";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { cn } from "@/lib/utils.ts";
-import { useIntelRouterContext } from "@/router/router-context.ts";
 
 export function Modal({
   title,
@@ -14,7 +14,7 @@ export function Modal({
   children: React.ReactNode;
   className?: string;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const titleId = useId();
   return (
     <ModalOverlay

package/src/node-table/node-table.tsx

@@ -2,6 +2,7 @@ import type { Node } from "@anchrd/intel-contract";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Download } from "lucide-react";
 import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
 /**
@@ -16,7 +17,8 @@ import { useIntelRouterContext } from "@/router/router-context.ts";
  * the export does not contain.
  */
 export function NodeTablePanel({ node }: { node: Node }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const table = useQuery({
     queryKey: ["node-table", node.id],
     queryFn: () => data.getNodeTable(node.id),

package/src/nodes/nodes.tsx

@@ -9,6 +9,7 @@ import { ViewToggle } from "@/app/view-toggle/view-toggle.tsx";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { FolderContents } from "@/folder-contents/folder-contents.tsx";
 import { GraphPane } from "@/graph-pane/graph-pane.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { NodeTablePanel } from "@/node-table/node-table.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { graphViewFrom, selectedFrom } from "@/router/selection-search.ts";
@@ -24,7 +25,8 @@ const AgentPanel = lazy(async () => ({
 }));
 
 export function Nodes() {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   // The tree in the sidebar and the header search both name what to open through `?select=`, so this
@@ -187,7 +189,8 @@ export function Nodes() {
 }
 
 function AttachmentPanel({ node }: { node: Node }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const download = useMutation({
     mutationFn: () => data.getNodeAttachment(node.id),
     onSuccess: (blob) => {
@@ -227,7 +230,8 @@ function AttachmentPanel({ node }: { node: Node }) {
 }
 
 function VersionHistory({ nodeId, close }: { nodeId: string; close(): void }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const versions = useQuery({
     queryKey: ["node-versions", nodeId],
     queryFn: () => data.listNodeVersions(nodeId),

package/src/resource-menu/resource-menu.tsx

@@ -31,6 +31,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { flowEntry } from "@/data/intel-data-provider/intel-data-provider.ts";
 import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom } from "@/router/selection-search.ts";
@@ -133,7 +134,8 @@ export function ResourceMenu({
   target: ResourceTarget;
   variant: "row" | "title";
 }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const [renaming, setRenaming] = useState(false);
@@ -417,7 +419,7 @@ function RenameDialog({
   close(): void;
   submit(title: string): void;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const [next, setNext] = useState(title);
   const trimmed = next.trim();
   return (
@@ -469,7 +471,8 @@ function RenameDialog({
  * not enter is absent rather than shown without a name.
  */
 function NodeLinksPanel({ node, close }: { node: Node; close(): void }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const navigate = useNavigate();
   const links = useQuery({
     queryKey: ["node-links", node.id],
@@ -528,7 +531,8 @@ function NodeLinksPanel({ node, close }: { node: Node; close(): void }) {
 // server's answer, not this component's: `execute` never appears on a document, because a document
 // has nothing to run.
 function SharePanel({ node, close }: { node: Node; close(): void }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const queryClient = useQueryClient();
   const [email, setEmail] = useState("");
   const [verbs, setVerbs] = useState<ResourceVerb[]>(["read"]);

package/src/router/router.types.ts

@@ -1,7 +1,8 @@
 import type { IntelDataProvider } from "@/data/intel-data-provider/intel-data-provider.types.ts";
-import type { I18n } from "@/i18n/i18n.types.ts";
 
+// ⚠️ No `i18n` here, and it must not come back (#227). The router context is static: an instance
+// travelling in it can never change, which is why the language was unswitchable before. Text comes
+// from `useI18n()` and from nowhere else — two ways to the same string are two states that drift.
 export interface RouterContext {
   data: IntelDataProvider;
-  i18n: I18n;
 }

package/src/save-button/save-button.tsx

@@ -1,8 +1,8 @@
 import { useBlocker } from "@tanstack/react-router";
 import { Save } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { Modal } from "@/modal/modal.tsx";
-import { useIntelRouterContext } from "@/router/router-context.ts";
 
 /**
  * Saving, in the title line beside the name of the thing being saved (#24).
@@ -24,7 +24,7 @@ export function SaveButton({
   saving: boolean;
   onSave(): void;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const label = i18n.t(dirty ? "common.saveDirty" : "common.saved");
   return (
     <TooltipProvider delayDuration={300}>
@@ -71,7 +71,7 @@ export function SaveButton({
  * the other exit, the one the router never sees: closing the tab or reloading.
  */
 export function UnsavedChangesGuard({ dirty }: { dirty: boolean }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const blocker = useBlocker({
     shouldBlockFn: () => true,
     disabled: !dirty,

package/src/sign-in-refused/sign-in-refused.tsx

@@ -1,5 +1,5 @@
 import { ShieldAlert } from "lucide-react";
-import type { I18n } from "@/i18n/i18n.types.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 
 /**
  * What stands on the screen when signing in worked and the surface still says no (#118).
@@ -13,7 +13,8 @@ import type { I18n } from "@/i18n/i18n.types.ts";
  * the credential a second ago will refuse it again, and a page that keeps trying by itself is the
  * behaviour being fixed. Retrying is the reader's decision, and it costs them one click.
  */
-export function SignInRefused({ i18n }: { i18n: I18n }) {
+export function SignInRefused() {
+  const i18n = useI18n();
   return (
     <div role="alert" className="grid min-h-dvh place-items-center bg-background p-8">
       <div className="max-w-prose text-center">

package/src/theme/theme-context.tsx

@@ -0,0 +1,89 @@
+import {
+  createContext,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useSyncExternalStore,
+} from "react";
+import {
+  applyTheme,
+  readThemeChoice,
+  rememberThemeChoice,
+  SystemThemeQuery,
+  type Theme,
+  type ThemeChoice,
+  themeFor,
+} from "./theme.ts";
+
+// The React seam of the theme, the same shape as i18n-context: the choice is client state (a
+// preference), so it lives locally and is remembered in the store.
+
+export interface ThemeSelection {
+  // What the reader chose — including "system", which is not a colour.
+  current: ThemeChoice;
+  // What is painted right now. The one consumer a CSS class cannot serve is a foreign library that
+  // paints from a prop instead of from our tokens (React Flow in flows.tsx), and it needs this
+  // resolved value rather than the choice.
+  resolved: Theme;
+  select(choice: ThemeChoice): void;
+}
+
+const ThemeContext = createContext<ThemeSelection | null>(null);
+
+function subscribeSystemTheme(onChange: () => void): () => void {
+  const media = window.matchMedia(SystemThemeQuery);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+
+function systemPrefersDark(): boolean {
+  return window.matchMedia(SystemThemeQuery).matches;
+}
+
+interface ThemeProviderProps {
+  store?: Pick<Storage, "getItem" | "setItem">;
+  children: ReactNode;
+}
+
+export function ThemeProvider({ store, children }: ThemeProviderProps) {
+  const [choice, setChoice] = useState<ThemeChoice>(() => readThemeChoice(store));
+  // A subscription rather than a read, so a system switch mid-session moves the class AND the
+  // resolved value at once, without a reload.
+  const prefersDark = useSyncExternalStore(subscribeSystemTheme, systemPrefersDark, () => false);
+  const resolved = themeFor(choice, prefersDark);
+
+  // ⚠️ The class is written from the resolved value, so a fixed choice simply ignores `prefersDark`
+  // changing. That is why there is no second effect subscribing to the media query here: one source,
+  // one writer.
+  useEffect(() => {
+    applyTheme(document.documentElement, resolved);
+  }, [resolved]);
+
+  const selection = useMemo<ThemeSelection>(
+    () => ({
+      current: choice,
+      resolved,
+      select: (next) => {
+        rememberThemeChoice(next, store);
+        setChoice(next);
+      },
+    }),
+    [choice, resolved, store],
+  );
+
+  return <ThemeContext value={selection}>{children}</ThemeContext>;
+}
+
+// `null` without a provider — not a substitute value: the settings dialog asks precisely whether
+// there is anything to choose.
+export function useTheme(): ThemeSelection | null {
+  return useContext(ThemeContext);
+}
+
+// The painted theme as a value, for a library that takes it as a prop. Never null: a component tree
+// without a provider still has to draw something, and "light" is what an unstyled page is.
+export function useResolvedTheme(): Theme {
+  return useContext(ThemeContext)?.resolved ?? "light";
+}

package/src/theme/theme.ts

@@ -1,40 +1,70 @@
-import { useSyncExternalStore } from "react";
-
 export type Theme = "dark" | "light";
 
+// What a reader chooses is one level above what gets painted: "system" is not a colour, it is the
+// instruction to keep following the media query. That distinction is the reason for two types —
+// storing only `Theme` would make "light" and "light because the system is light" the same value,
+// with no way back.
+export type ThemeChoice = Theme | "system";
+
+// The order in the switcher. "system" first, because it is the shipped state.
+export const ThemeChoices: readonly ThemeChoice[] = ["system", "light", "dark"];
+
 // The one query the whole theme hangs off. Exported so that the `.dark` class and everything that
 // has to agree with it read the same string rather than two copies of it.
 export const SystemThemeQuery = "(prefers-color-scheme: dark)";
 
+// Next to `intel.language`: the same kind of preference, the same place.
+const STORE_KEY = "intel.theme";
+
 export function resolveTheme(prefersDark: boolean): Theme {
   return prefersDark ? "dark" : "light";
 }
 
-export function applyTheme(root: HTMLElement, theme: Theme): void {
-  root.classList.toggle("dark", theme === "dark");
+// What a choice means right now. The only place that resolves "system" — main.tsx and the provider
+// both ask here, so the first paint and every later one cannot drift apart.
+export function themeFor(choice: ThemeChoice, prefersDark: boolean): Theme {
+  return choice === "system" ? resolveTheme(prefersDark) : choice;
 }
 
-export function watchSystemTheme(root: HTMLElement, media: MediaQueryList): () => void {
-  applyTheme(root, resolveTheme(media.matches));
-  const onChange = (event: MediaQueryListEvent) => applyTheme(root, resolveTheme(event.matches));
-  media.addEventListener("change", onChange);
-  return () => media.removeEventListener("change", onChange);
+export function applyTheme(root: HTMLElement, theme: Theme): void {
+  root.classList.toggle("dark", theme === "dark");
 }
 
-function subscribeSystemTheme(onChange: () => void): () => void {
-  const media = window.matchMedia(SystemThemeQuery);
-  media.addEventListener("change", onChange);
-  return () => media.removeEventListener("change", onChange);
+// Read tolerantly: anything that is not one of the three choices is "system". A hand-edited value,
+// or one left behind by an older version, must not leave the UI without a theme — and "system" is
+// the answer that would apply with no stored choice at all.
+export function readThemeChoice(store?: Pick<Storage, "getItem">): ThemeChoice {
+  let stored: string | null = null;
+  // Reading `localStorage` throws outright in a few privacy modes, so the guard is a try, not a
+  // typeof check. Losing the preference is acceptable; losing the shell is not.
+  try {
+    stored = store?.getItem(STORE_KEY) ?? null;
+  } catch {
+    return "system";
+  }
+  const choices: readonly string[] = ThemeChoices;
+  return stored !== null && choices.includes(stored) ? (stored as ThemeChoice) : "system";
 }
 
-function systemTheme(): Theme {
-  return resolveTheme(window.matchMedia(SystemThemeQuery).matches);
+export function rememberThemeChoice(choice: ThemeChoice, store?: Pick<Storage, "setItem">): void {
+  try {
+    store?.setItem(STORE_KEY, choice);
+  } catch {
+    // A preference that cannot be written is still a preference for this session.
+  }
 }
 
-// The theme as a value, for the one consumer a CSS class cannot serve: a foreign library that
-// paints from a prop instead of from our tokens. It reads the same media query `watchSystemTheme`
-// puts the `.dark` class on the root from, so the two cannot drift apart — and because it is a
-// subscription rather than a read, a switch mid-session moves both at once, without a reload.
-export function useSystemTheme(): Theme {
-  return useSyncExternalStore(subscribeSystemTheme, systemTheme);
+// Wiring: apply the choice and — only for "system" — react to every system change. A fixed choice
+// deliberately does NOT subscribe: a listener that overrides the chosen theme the moment the
+// operating system switches is exactly the bug the choice removes.
+export function watchTheme(
+  root: HTMLElement,
+  media: MediaQueryList,
+  choice: ThemeChoice,
+): () => void {
+  applyTheme(root, themeFor(choice, media.matches));
+  if (choice !== "system") return () => {};
+  const onChange = (event: MediaQueryListEvent) => applyTheme(root, resolveTheme(event.matches));
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
 }

package/src/timezone/timezone-context.tsx

@@ -0,0 +1,45 @@
+import { createContext, type ReactNode, useContext, useMemo, useState } from "react";
+import { browserTimezone, readTimezone, rememberTimezone } from "./timezone.ts";
+
+// The React seam of the timezone preference, the same shape as i18n-context and theme-context.
+
+export interface TimezoneSelection {
+  current: string;
+  select(zone: string): void;
+}
+
+const TimezoneContext = createContext<TimezoneSelection | null>(null);
+
+interface TimezoneProviderProps {
+  store?: Pick<Storage, "getItem" | "setItem">;
+  children: ReactNode;
+}
+
+export function TimezoneProvider({ store, children }: TimezoneProviderProps) {
+  const [current, setCurrent] = useState(() => readTimezone(store));
+
+  const selection = useMemo<TimezoneSelection>(
+    () => ({
+      current,
+      select: (zone) => {
+        rememberTimezone(zone, store);
+        setCurrent(zone);
+      },
+    }),
+    [current, store],
+  );
+
+  return <TimezoneContext value={selection}>{children}</TimezoneContext>;
+}
+
+// `null` without a provider — the settings dialog asks whether there is anything to choose.
+export function useTimezoneSelection(): TimezoneSelection | null {
+  return useContext(TimezoneContext);
+}
+
+// The zone to read times in. Never null: a component without a provider still has to format a date,
+// and the browser's own zone is the honest answer there.
+export function useTimezone(): string {
+  const selection = useContext(TimezoneContext);
+  return selection?.current ?? browserTimezone();
+}

package/src/timezone/timezone.ts

@@ -0,0 +1,60 @@
+// The reader's timezone. Next to `intel.language` and `intel.theme`: the same kind of preference,
+// the same place.
+//
+// ⚠️ This is a preference, NOT the truth about when an agent fires. A schedule carries its own
+// timezone (#228); this value is the suggestion when one is created and the lens the calendar is
+// read through. The difference matters the day somebody travels: "08:00 Europe/Berlin" must stay
+// Berlin, and it would not if the schedule took whatever the reader's browser says today.
+const STORE_KEY = "intel.timezone";
+
+// What the browser thinks. Used when nothing was ever chosen — deliberately not "UTC": a default
+// nobody lives in is a default that produces schedules nobody meant.
+export function browserTimezone(): string {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+  } catch {
+    return "UTC";
+  }
+}
+
+// Every IANA name this runtime knows, for the picker. An engine without `supportedValuesOf` (or one
+// built without full ICU) yields the empty list, and the caller falls back to offering just the
+// browser's own zone — one real choice beats a picker that throws.
+export function availableTimezones(): string[] {
+  try {
+    return Intl.supportedValuesOf("timeZone");
+  } catch {
+    return [];
+  }
+}
+
+// Whether this runtime can actually format in that zone. The check is the formatting itself: a name
+// the engine rejects throws a RangeError here rather than in the middle of a calendar.
+export function isKnownTimezone(zone: string): boolean {
+  try {
+    new Intl.DateTimeFormat("en-US", { timeZone: zone });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// A stored zone the engine no longer knows is discarded rather than kept: IANA renames zones, and a
+// name that stopped resolving would otherwise throw on every date the calendar draws.
+export function readTimezone(store?: Pick<Storage, "getItem">): string {
+  let stored: string | null = null;
+  try {
+    stored = store?.getItem(STORE_KEY) ?? null;
+  } catch {
+    return browserTimezone();
+  }
+  return stored !== null && isKnownTimezone(stored) ? stored : browserTimezone();
+}
+
+export function rememberTimezone(zone: string, store?: Pick<Storage, "setItem">): void {
+  try {
+    store?.setItem(STORE_KEY, zone);
+  } catch {
+    // A preference that cannot be written is still a preference for this session.
+  }
+}

package/src/tools/tools.tsx

@@ -6,6 +6,7 @@ import * as React from "react";
 import { Button } from "@/components/ui/button";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import type { I18n } from "@/i18n/i18n.types.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom } from "@/router/selection-search.ts";
 
@@ -80,7 +81,8 @@ function attemptStore(): Storage | null {
 // The catalog is one live `tools/list` with the signed-in user's own portal token. Nothing here is
 // stored, mirrored or administered — the screen shows what the portal answers and nothing else.
 export function Tools() {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const catalog = useQuery({ queryKey: ["tools"], queryFn: () => data.listTools() });
   // The servers behind that same live list (D30). Its own query, and its own failure: a portal that
   // answers tools but no directory still has a usable screen, it just has no boxes to put them in.