@anchrd/intel-ui 0.12.0 → 0.14.0

package/src/app/app-sidebar/app-sidebar.tsx

@@ -13,7 +13,7 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar";
-import { useIntelRouterContext } from "@/router/router-context.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 
 // One tree is the whole navigation: documents and flows side by side in the folder they share, with
 // no Intelligence or Flows entry above them (ADR-0004). Tools stay below, next to the user, because
@@ -25,7 +25,7 @@ export function AppSidebar({
   width: number;
   onWidthChange(width: number): void;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   // `offcanvas` rather than `icon`: the icon rail is the mode for a list of equal entries with one
   // icon each, and a tree says what it says through indentation, disclosure arrows and nesting —
   // none of which survives 48px. Collapsing exists to free the canvas, so the sidebar goes.

package/src/app/app-tree/app-tree.tsx

@@ -40,6 +40,7 @@ import {
 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 { useCapabilities } from "@/hooks/use-capabilities.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { kindIcons } from "@/kind-icon.ts";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
@@ -106,7 +107,8 @@ function levelKey(level: Level): readonly unknown[] {
 export const TreeEntryMediaType = "application/x-intel-tree-entry";
 
 export function AppTree() {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const [expanded, setExpanded] = useState<readonly Level[]>([]);
@@ -720,7 +722,7 @@ function AddMenu({
   variant?: "icon" | "row";
   onSelect(kind: NewKind | "upload" | ImportKind): void;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   // Whether this deployment runs an agent runtime (#190). Until the answer arrives the item is
   // absent rather than provisional: a menu entry that vanished after being seen was a lie, one that
   // appears a beat late was merely loading.
@@ -789,7 +791,7 @@ function CreateForm({
   pending: boolean;
   submit(title: string, columns: string[]): void;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const [title, setTitle] = useState("");
   const [columns, setColumns] = useState("");
   const parsedColumns = columnsOf(columns);

package/src/app/app.tsx

@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/breadcrumb";
 import { Separator } from "@/components/ui/separator";
 import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
-import { useIntelRouterContext } from "@/router/router-context.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 
 const sections = [
   { path: "/nodes", labelKey: "nav.nodes" },
@@ -22,7 +22,7 @@ const sections = [
 ] as const;
 
 export function App() {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const pathname = useRouterState({ select: (state) => state.location.pathname });
   const current = sections.find(
     (section) => pathname === section.path || pathname.startsWith(`${section.path}/`),

package/src/app/header-search/header-search.tsx

@@ -18,6 +18,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
 const Kinds = ["node", "flow", "tool"] as const;
@@ -50,7 +51,8 @@ function matches(query: string, ...fields: (string | null)[]): boolean {
 }
 
 export function HeaderSearch() {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const navigate = useNavigate();
   const [open, setOpen] = useState(false);
   const [text, setText] = useState("");

package/src/app/settings-dialog/settings-dialog.tsx

@@ -0,0 +1,115 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useI18n, useLanguage } from "@/i18n/i18n-context.tsx";
+import { languageName } from "@/i18n/i18n-languages/i18n-languages.ts";
+import { type ThemeChoice, ThemeChoices } from "@/theme/theme.ts";
+import { useTheme } from "@/theme/theme-context.tsx";
+import { TimezoneCombobox } from "@/timezone/timezone-combobox/timezone-combobox.tsx";
+import { useTimezoneSelection } from "@/timezone/timezone-context.tsx";
+
+// The settings that belong to the person rather than to the installation: language, appearance and
+// timezone. All three are client state — they live in localStorage, not in the Intel HTTP surface —
+// so they do not belong on a screen with a save button. A choice applies at once; a dialog that
+// previews and only commits on "Save" would carry three states too many for three dropdowns.
+//
+// The dialog is opened from outside (the user footer holds the state), because its trigger is a
+// DropdownMenuItem: Radix unmounts the menu content when an item is chosen and would take a dialog
+// nested inside it along in the same frame.
+interface SettingsDialogProps {
+  open: boolean;
+  onOpenChange(open: boolean): void;
+}
+
+export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
+  const i18n = useI18n();
+  const language = useLanguage();
+  const theme = useTheme();
+  const timezone = useTimezoneSelection();
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{i18n.t("settings.title")}</DialogTitle>
+          <DialogDescription>{i18n.t("settings.description")}</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-6">
+          {/* Without a provider there is nothing to choose — then the block is absent rather than a
+              dead dropdown. The number of languages is deliberately NOT checked: there are always
+              at least the three built-in ones, so a condition on it would be dead code. */}
+          {language ? (
+            <div className="grid gap-2">
+              <label className="text-sm font-medium" htmlFor="settings-language">
+                {i18n.t("settings.language")}
+              </label>
+              <Select value={language.current} onValueChange={language.select}>
+                <SelectTrigger id="settings-language" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {language.codes.map((code) => (
+                    <SelectItem key={code} value={code}>
+                      {languageName(code)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          ) : null}
+          {theme ? (
+            <div className="grid gap-2">
+              <label className="text-sm font-medium" htmlFor="settings-appearance">
+                {i18n.t("settings.appearance")}
+              </label>
+              {/* Radix hands out a raw string; the values come from the same list that fills the
+                  menu, so the assertion here is the whole check. */}
+              <Select
+                value={theme.current}
+                onValueChange={(value) => theme.select(value as ThemeChoice)}
+              >
+                <SelectTrigger id="settings-appearance" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {ThemeChoices.map((choice) => (
+                    <SelectItem key={choice} value={choice}>
+                      {i18n.t(`settings.appearance.${choice}`)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          ) : null}
+          {timezone ? (
+            <div className="grid gap-2">
+              <label className="text-sm font-medium" htmlFor="settings-timezone">
+                {i18n.t("settings.timezone")}
+              </label>
+              <TimezoneCombobox
+                id="settings-timezone"
+                value={timezone.current}
+                onChange={timezone.select}
+                describedBy="settings-timezone-hint"
+              />
+              <p id="settings-timezone-hint" className="text-xs text-muted-foreground">
+                {i18n.t("settings.timezoneHint")}
+              </p>
+            </div>
+          ) : null}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/app/tree-move/tree-move.tsx

@@ -3,6 +3,7 @@ import { ChevronLeft, Folder } from "lucide-react";
 import type * as React from "react";
 import { useState } from "react";
 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";
 
@@ -106,7 +107,8 @@ export function MoveDialog({
   close(): void;
   submit(destination: MoveDestination): void;
 }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const [destination, setDestination] = useState<MoveDestination | null>(initial);
   // The browsed path, root first. It is also the descendant guard for the keyboard route: the row
   // being moved is never offered, so its subtree can never be entered in the first place.

package/src/app/user-footer/user-footer.tsx

@@ -1,6 +1,14 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
-import { Archive as ArchiveIcon, ChevronsUpDown, LogOut, User, Wrench } from "lucide-react";
+import {
+  Archive as ArchiveIcon,
+  ChevronsUpDown,
+  LogOut,
+  Settings,
+  User,
+  Wrench,
+} from "lucide-react";
+import { useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,7 +18,9 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { SidebarMenu, SidebarMenuItem } from "@/components/ui/sidebar";
 import { loginPath } from "@/data/intel-data-provider/intel-data-provider.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
+import { SettingsDialog } from "../settings-dialog/settings-dialog.tsx";
 
 /**
  * Everything that belongs to the person rather than to the content, behind the person (#24).
@@ -24,9 +34,13 @@ import { useIntelRouterContext } from "@/router/router-context.ts";
  * what it shows depends on who is asking.
  */
 export function UserFooter() {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const navigate = useNavigate();
   const pathname = useRouterState({ select: (state) => state.location.pathname });
+  // The state lives here, not in the dialog: its trigger is a DropdownMenuItem, and Radix unmounts
+  // the menu content when an item is chosen — a dialog nested in there would go with it.
+  const [settingsOpen, setSettingsOpen] = useState(false);
   const session = useQuery({ queryKey: ["session"], queryFn: () => data.getSession() });
   const logout = useMutation({
     mutationFn: () => data.logout(),
@@ -83,6 +97,13 @@ export function UserFooter() {
               {i18n.t("archive.title")}
             </DropdownMenuItem>
             <DropdownMenuSeparator />
+            {/* Language, appearance and timezone belong to the person, like everything else behind
+                this menu — and unlike the two rows above, they change nothing anybody else sees. */}
+            <DropdownMenuItem onSelect={() => setSettingsOpen(true)}>
+              <Settings aria-hidden="true" />
+              {i18n.t("settings.title")}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
             <DropdownMenuItem
               disabled={logout.isPending}
               onSelect={() => logout.mutate()}
@@ -93,6 +114,8 @@ export function UserFooter() {
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
+        {/* ⚠️ Outside the DropdownMenu on purpose — see the state above. */}
+        <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
       </SidebarMenuItem>
       {/* ⚠️ Outside the menu on purpose. Choosing sign-out closes the popup, so a refusal rendered
           inside it would be gone in the same frame it was written — the one message that must

package/src/app/view-toggle/view-toggle.tsx

@@ -1,7 +1,7 @@
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 import { History, Network, PencilRuler } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { useIntelRouterContext } from "@/router/router-context.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { type IntelView, viewFrom } from "@/router/selection-search.ts";
 
 const icons = { editor: PencilRuler, graph: Network, runs: History } as const;
@@ -34,7 +34,7 @@ const labels = {
  * are — every destination stays one click, and every button keeps one name.
  */
 export function ViewToggle({ views = ["editor", "graph"] }: { views?: readonly IntelView[] }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const navigate = useNavigate();
   const state = useRouterState({
     select: (current) => ({

package/src/archive/archive.tsx

@@ -1,6 +1,7 @@
 import type { Flow, Node } from "@anchrd/intel-contract";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ArchiveRestore } from "lucide-react";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { kindIcons } from "@/kind-icon.ts";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
@@ -17,7 +18,8 @@ interface ArchivedEntry {
 }
 
 export function Archive() {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const queryClient = useQueryClient();
 
   const archived = useQuery({

package/src/components/ui/popover.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { Popover as PopoverPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/src/entry-picker/entry-picker.tsx

@@ -2,6 +2,7 @@ import type { NodeKind } from "@anchrd/intel-contract";
 import { useQuery } from "@tanstack/react-query";
 import { ChevronRight, Folder, Search } from "lucide-react";
 import { useMemo, useState } from "react";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
 // What this picker offers, whichever side of the shared tree it came from. Deliberately the four
@@ -40,7 +41,8 @@ export function EntryPicker({
   onSelect(entryId: string, entryKind: PickerKind): void;
   label: string;
 }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const [query, setQuery] = useState("");
   const [openFolder, setOpenFolder] = useState<string | null>(null);
   const graph = useQuery({

package/src/flow-runs/flow-runs.tsx

@@ -3,6 +3,7 @@ import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { ChevronDown, ChevronRight, CornerDownRight } from "lucide-react";
 import { useState } from "react";
 import type { I18n } from "@/i18n/i18n.types.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
 // One page is what a person reads before deciding, not what a database can return. The server caps
@@ -28,7 +29,8 @@ function formatDuration(ms: number, i18n: I18n): string {
  * whoever started it — and the person reading this list is not necessarily that person.
  */
 export function FlowRuns({ flowId }: { flowId: string }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const [failedOnly, setFailedOnly] = useState(false);
   const [openRunId, setOpenRunId] = useState<string | null>(null);
   // The filter belongs in the key: "only the failed ones" is a different question with a different
@@ -112,7 +114,7 @@ export function FlowRuns({ flowId }: { flowId: string }) {
 }
 
 function RunRow({ run, open, toggle }: { run: FlowRunSummary; open: boolean; toggle(): void }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const failed = run.status === "failed";
   const Chevron = open ? ChevronDown : ChevronRight;
   return (
@@ -160,7 +162,8 @@ function RunRow({ run, open, toggle }: { run: FlowRunSummary; open: boolean; tog
 // onto the canvas because a run took an immutable version and the editor shows the current one —
 // marking a node in the wrong graph would point confidently at the wrong step.
 function RunSteps({ runId }: { runId: string }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const history = useQuery({
     queryKey: ["flow-run-steps", runId],
     queryFn: () => data.getFlowRunSteps(runId),

package/src/flows/flows.tsx

@@ -32,11 +32,12 @@ import { FlowRuns } from "@/flow-runs/flow-runs.tsx";
 import { nodeIcon } from "@/flows/node-icon/node-icon.ts";
 import { NodePalette, usePaletteOpen } from "@/flows/node-palette/node-palette.tsx";
 import { GraphPane } from "@/graph-pane/graph-pane.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom, viewFrom } from "@/router/selection-search.ts";
 import { SaveButton, UnsavedChangesGuard } from "@/save-button/save-button.tsx";
-import { useSystemTheme } from "@/theme/theme.ts";
+import { useResolvedTheme } from "@/theme/theme-context.tsx";
 import { TitleRow } from "@/title-row/title-row.tsx";
 
 type CanvasNode = ReactFlowNode<{ node: FlowNode }, "intel">;
@@ -89,7 +90,7 @@ const flowKindOfEntry: Record<string, FlowNode["kind"] | undefined> = {
 };
 
 function FlowCard({ data, selected }: NodeProps<CanvasNode>) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const contract = data.node;
   const Icon = nodeIcon[contract.kind];
   const branching = contract.kind === "condition";
@@ -354,9 +355,10 @@ export function Flows() {
 }
 
 function FlowsEditor() {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const flow = useReactFlow();
-  const theme = useSystemTheme();
+  const theme = useResolvedTheme();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const tools = useQuery({
@@ -714,7 +716,7 @@ function FlowTitle({
   onSave(): void;
   onPublish(): void;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   // A draft that is already the published one freezes nothing, so publishing it would be a no-op
   // with a dialog in front of it.
   const publishable =
@@ -775,7 +777,8 @@ function PublishPreview({
   close(): void;
   onPublished(): Promise<void>;
 }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const preview = useQuery({
     queryKey: ["flow-publish-preview", flowId, versionId],
     queryFn: () => data.previewFlowPublish({ flowId, versionId }),
@@ -858,7 +861,7 @@ function NodeInspector({
   tools: Array<{ name: string; title: string | null; fingerprint: string }>;
   flows: Flow[];
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   if (!node) return <p className="p-5 text-sm text-muted-foreground">{i18n.t("flows.inspect")}</p>;
   const contract = node.data.node;
   return (
@@ -1001,7 +1004,8 @@ function NodeInspector({
 // them. A standing "this flow has conflicts" badge is not offered on purpose — for tools it could
 // never be true, because the catalog is a live query with each user's own portal token (ADR-0003).
 function FlowNeeds({ flowId }: { flowId: string }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const needs = useQuery({
     queryKey: ["flow-requirements", flowId],
     queryFn: () => data.getFlowRequirements(flowId),
@@ -1082,7 +1086,7 @@ function SubflowVersionField({
   configuration: Extract<FlowNode, { kind: "subflow" }>["configuration"];
   update(fn: (node: FlowNode) => FlowNode): void;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const mode = configuration.version.mode;
   return (
     <div className="mt-4">

package/src/flows/node-palette/node-palette.tsx

@@ -2,8 +2,8 @@ import { flowNodeLayer } from "@anchrd/intel-contract";
 import { Plus, X } from "lucide-react";
 import { Fragment, useId, useRef, useState } from "react";
 import { type NodeIcon, nodeIcon } from "@/flows/node-icon/node-icon.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { cn } from "@/lib/utils.ts";
-import { useIntelRouterContext } from "@/router/router-context.ts";
 import type { NodePaletteProps, PaletteKind } from "./node-palette.types.ts";
 
 const storageKey = "intel.flow-palette";
@@ -48,7 +48,7 @@ export function NodePalette<K extends PaletteKind>({
   add,
   disabledReason,
 }: NodePaletteProps<K>) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const listId = useId();
   const triggerRef = useRef<HTMLButtonElement>(null);
   const listRef = useRef<HTMLDivElement>(null);

package/src/folder-contents/folder-contents.tsx

@@ -10,6 +10,7 @@ import {
   TableRow,
 } from "@/components/ui/table.tsx";
 import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { kindIcons } from "@/kind-icon.ts";
 import { ResourceMenu, type ResourceTarget } from "@/resource-menu/resource-menu.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
@@ -38,7 +39,8 @@ function targetOf(entry: TreeEntry): ResourceTarget {
  * not read pictures. A column repeating the icon in prose costs the width the title needs.
  */
 export function FolderContents({ folderId }: { folderId: string }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const navigate = useNavigate();
   const level = useQuery({
     queryKey: treeLevelKey(folderId),

package/src/graph-pane/graph-pane.tsx

@@ -1,7 +1,7 @@
 import type { RelationGraph } from "@anchrd/intel-contract";
 import type { UseQueryResult } from "@tanstack/react-query";
 import { lazy, Suspense } from "react";
-import { useIntelRouterContext } from "@/router/router-context.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 
 const RelationGraphView = lazy(async () => ({
   default: (await import("@/node-graph/node-graph.tsx")).RelationGraphView,
@@ -17,7 +17,7 @@ export function GraphPane({
   query: UseQueryResult<RelationGraph>;
   select(node: RelationGraph["nodes"][number]): void;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const loading = <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>;
   if (query.isPending) return loading;
   if (query.isError || !query.data) {