@anchrd/intel-ui 0.11.0 → 0.13.0

package/src/agent/agent-profile/agent-profile.tsx

@@ -10,7 +10,15 @@ import { Check, Copy, Info, KeyRound, MessageSquare, Plus, Trash2, Wrench } from
 import { useState } from "react";
 import { type AgentDefinitionHandle, asDraft } from "@/agent/agent-definition/agent-definition.ts";
 import { useEntryTitle } from "@/agent/agent-entry-title/agent-entry-title.ts";
-import { modelKey, parseModelKey, selectableModels } from "@/agent/agent-models/agent-models.ts";
+import {
+  formatContextTokens,
+  formatPricePerMillion,
+  modelFacts,
+  modelKey,
+  parseModelKey,
+  selectableModels,
+} from "@/agent/agent-models/agent-models.ts";
+import type { ModelFacts } from "@/agent/agent-models/agent-models.types.ts";
 import {
   Select,
   SelectContent,
@@ -21,8 +29,11 @@ import {
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { agentMcpAddress } from "@/data/agent-runtime/agent-runtime.ts";
 import { EntryPicker, type PickerKind } from "@/entry-picker/entry-picker.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
+import { availableTimezones } from "@/timezone/timezone.ts";
+import { useTimezone } from "@/timezone/timezone-context.tsx";
 
 // No dividers between sections — the space is the separation (#204). The explanation sits behind
 // the icon rather than under the title, so the page shows what the agent IS and keeps the prose
@@ -82,7 +93,7 @@ function SectionHint({ hint }: { hint: string }) {
  * versioned, shared and read into model context (ADR-0005 §4).
  */
 export function AgentProfile({ node, agent }: { node: Node; agent: AgentDefinitionHandle }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const definition = agent.definition;
 
   // The definition is `null` in exactly one window: the node exists and no version has been written
@@ -138,7 +149,8 @@ export function AgentProfile({ node, agent }: { node: Node; agent: AgentDefiniti
  * not while they are describing what the agent should do.
  */
 function IdentitySection({ node, agent }: { node: Node; agent: AgentDefinitionHandle }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const queryClient = useQueryClient();
   const [confirming, setConfirming] = useState(false);
   const applicationId = agent.query.data?.applicationId ?? null;
@@ -217,7 +229,7 @@ function IdentitySection({ node, agent }: { node: Node; agent: AgentDefinitionHa
  * delete, is what says "built in, always there" without a sentence explaining it.
  */
 function ContactSection({ node }: { node: Node }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const [copied, setCopied] = useState(false);
   // ⚠️ The runtime's own address, NOT intel's proxy. This one is dialled by a portal or another
   // agent with its own credential (ADR-0005 §7); intel's door is for this page's browser calls and
@@ -313,7 +325,7 @@ function KnowledgeSection({
   definition: AgentDefinition;
   agent: AgentDefinitionHandle;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const [adding, setAdding] = useState(false);
 
   function write(references: AgentReference[]) {
@@ -390,7 +402,7 @@ function ReferenceRow({
   setRole(role: AgentReferenceRole): void;
   remove(): void;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const { title, known } = useEntryTitle(reference.nodeId);
   return (
     <li className="flex flex-wrap items-center gap-3 rounded-lg border bg-card px-4 py-3">
@@ -458,7 +470,8 @@ function ToolsSection({
   definition: AgentDefinition;
   agent: AgentDefinitionHandle;
 }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const [adding, setAdding] = useState(false);
   const servers = useQuery({ queryKey: ["tool-servers"], queryFn: () => data.listToolServers() });
   const selected = definition.tools?.servers ?? [];
@@ -579,7 +592,7 @@ function ScheduleSection({
   definition: AgentDefinition;
   agent: AgentDefinitionHandle;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const [adding, setAdding] = useState(false);
 
   function write(schedules: AgentSchedule[]) {
@@ -593,10 +606,13 @@ function ScheduleSection({
           {definition.schedules.map((schedule, index) => (
             <li
               // biome-ignore lint/suspicious/noArrayIndexKey: same as the references above — an ordered array with no ids, edited by position
-              key={`${schedule.cron}:${schedule.target.id}:${index}`}
+              key={`${schedule.cron}@${schedule.timezone}:${schedule.target.id}:${index}`}
               className="flex flex-wrap items-center gap-3 rounded-lg border bg-card px-4 py-3"
             >
               <code className="rounded bg-muted px-2 py-1 text-xs">{schedule.cron}</code>
+              {/* The zone belongs beside the expression: "0 8 * * *" alone does not say eight
+                  o'clock WHERE, and that is the whole difference this ticket is about. */}
+              <span className="text-xs text-muted-foreground">{schedule.timezone}</span>
               <EntryTitle entryId={schedule.target.id} flow={schedule.target.kind === "flow"} />
               <span className="text-xs text-muted-foreground">
                 {i18n.t(`node.kind.${schedule.target.kind}`)}
@@ -637,8 +653,15 @@ function ScheduleSection({
 }
 
 function ScheduleDialog({ close, add }: { close(): void; add(schedule: AgentSchedule): void }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const [cron, setCron] = useState("0 8 * * *");
+  // ⚠️ The reader's preference is the SUGGESTION, and only at creation time (#228). What is stored
+  // is this value, so the schedule keeps meaning the same hour after its author travels — and it
+  // means the same hour to everybody else reading the agent.
+  const preferred = useTimezone();
+  const [timezone, setTimezone] = useState(preferred);
+  const zones = availableTimezones();
+  const options = zones.includes(timezone) ? zones : [timezone, ...zones];
   const [target, setTarget] = useState<{ id: string; kind: "document" | "flow" } | null>(null);
 
   return (
@@ -647,7 +670,7 @@ function ScheduleDialog({ close, add }: { close(): void; add(schedule: AgentSche
         className="space-y-4"
         onSubmit={(event) => {
           event.preventDefault();
-          if (target && cron.trim()) add({ cron: cron.trim(), target });
+          if (target && cron.trim()) add({ cron: cron.trim(), timezone, target });
         }}
       >
         <label className="block text-sm font-medium">
@@ -666,6 +689,25 @@ function ScheduleDialog({ close, add }: { close(): void; add(schedule: AgentSche
             {i18n.t("agent.cronHint")}
           </span>
         </label>
+        <label className="block text-sm font-medium" htmlFor="agent-schedule-timezone">
+          {i18n.t("agent.scheduleTimezone")}
+        </label>
+        <select
+          id="agent-schedule-timezone"
+          value={timezone}
+          onChange={(event) => setTimezone(event.target.value)}
+          aria-describedby="agent-timezone-hint"
+          className="-mt-2 w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {options.map((zone) => (
+            <option key={zone} value={zone}>
+              {zone.replace(/_/g, " ")}
+            </option>
+          ))}
+        </select>
+        <span id="agent-timezone-hint" className="-mt-2 block text-xs text-muted-foreground">
+          {i18n.t("agent.scheduleTimezoneHint")}
+        </span>
         <EntryPicker
           kind="document"
           flows
@@ -697,30 +739,71 @@ function ModelSection({
   definition: AgentDefinition;
   agent: AgentDefinitionHandle;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const models = selectableModels(definition.model);
+  const current = modelFacts(definition.model);
 
   return (
     <Section title={i18n.t("agent.model")} hint={i18n.t("agent.modelHint")}>
-      <Select
-        value={modelKey(definition.model)}
-        onValueChange={(key) => {
-          const model = parseModelKey(key);
-          if (model) agent.save.mutate({ ...asDraft(definition), model });
-        }}
-      >
-        <SelectTrigger aria-label={i18n.t("agent.model")} className="w-full max-w-md">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          {models.map((model) => (
-            <SelectItem key={modelKey(model)} value={modelKey(model)}>
-              {model.model}
-              <span className="text-xs text-muted-foreground">{model.provider}</span>
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+        <Select
+          value={modelKey(definition.model)}
+          onValueChange={(key) => {
+            const model = parseModelKey(key);
+            if (model) agent.save.mutate({ ...asDraft(definition), model });
+          }}
+        >
+          <SelectTrigger aria-label={i18n.t("agent.model")} className="w-full max-w-md sm:w-72">
+            {/* ⚠️ Own children rather than the default mirror of the chosen item: the item carries
+                the figures too, and mirrored into the trigger they would stand twice in one row. */}
+            <SelectValue>
+              <ModelName facts={current} />
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {models.map((model) => {
+              const facts = modelFacts(model);
+              return (
+                <SelectItem key={modelKey(model)} value={modelKey(model)}>
+                  {/* ⚠️ The space is not formatting. The option's accessible name is its text run
+                      together, so without it a screen reader reads "…70B Fast24k context". The eye
+                      never notices, because the row is a flex box with a gap. */}
+                  <ModelName facts={facts} /> <ModelFigures facts={facts} />
+                </SelectItem>
+              );
+            })}
+          </SelectContent>
+        </Select>
+        <ModelFigures facts={current} />
+      </div>
     </Section>
   );
 }
+
+// Brand first, then the model's own name — "Claude Sonnet 5", not "claude-sonnet-5 · anthropic". The
+// provider stays in the definition; it names who serves the model, which is not what anybody reads a
+// list of models for.
+function ModelName({ facts }: { facts: ModelFacts }) {
+  return (
+    <span className="truncate">
+      <span className="font-medium">{facts.brand}</span> {facts.name}
+    </span>
+  );
+}
+
+// The two numbers a model is actually chosen on. Absent for a model this installation has no figures
+// for — the row then simply ends, because a made-up zero would be a false statement about money.
+function ModelFigures({ facts }: { facts: ModelFacts }) {
+  const i18n = useI18n();
+  if (facts.contextTokens === null || facts.price === null) return null;
+
+  return (
+    <span className="text-xs whitespace-nowrap text-muted-foreground">
+      {i18n.t("agent.modelFigures", {
+        context: formatContextTokens(facts.contextTokens),
+        input: formatPricePerMillion(facts.price.inputPerMillion, i18n.locale),
+        output: formatPricePerMillion(facts.price.outputPerMillion, i18n.locale),
+      })}
+    </span>
+  );
+}

package/src/agent/agent.tsx

@@ -24,6 +24,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useCapabilities } from "@/hooks/use-capabilities.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
 const tabs = ["profile", "chat", "calendar", "log"] as const;
@@ -43,7 +44,7 @@ type Tab = (typeof tabs)[number];
  * answer — a sentence in the two tabs that would have needed it — rather than as a red failure.
  */
 export function AgentPanel({ node }: { node: Node }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const [tab, setTab] = useState<Tab>("profile");
   const agent = useAgentDefinition(node.id);
   const state = useAgentState(node.id);
@@ -115,7 +116,7 @@ export function AgentPanel({ node }: { node: Node }) {
  * whoever runs the installation over a working system.
  */
 function NotForYou() {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   return (
     <p className="m-auto max-w-md px-6 py-5 text-center text-sm text-muted-foreground">
       {i18n.t("agent.notPermitted")}
@@ -131,7 +132,7 @@ function NotForYou() {
  * agents, which is the operator's choice, not the reader's problem to debug.
  */
 function NoRuntime() {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   return (
     <p className="m-auto max-w-md px-6 py-5 text-center text-sm text-muted-foreground">
       {i18n.t("agent.noRuntime")}
@@ -157,7 +158,8 @@ export function AgentStatus({
   agentId: string;
   definition: AgentDefinition | null;
 }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const state = useAgentState(agentId);
   const runs = useQuery({
     queryKey: ["agent-runs", agentId],
@@ -180,12 +182,17 @@ export function AgentStatus({
     paused
       ? i18n.t("agent.pausedNoRuns")
       : next
-        ? i18n.t("agent.nextRun", {
+        ? // ⚠️ Formatted in the SCHEDULE's zone and named with it (#228), not in the reader's.
+          // The agent fires at the hour its schedule says; showing that instant in the zone of
+          // whoever happens to be looking would put a different hour on screen from the one the
+          // agent keeps, and the difference only surfaces as "it ran at the wrong time".
+          i18n.t("agent.nextRun", {
             when: new Intl.DateTimeFormat(i18n.locale, {
               dateStyle: "medium",
               timeStyle: "short",
-              timeZone: "UTC",
-            }).format(next),
+              timeZone: next.timezone,
+            }).format(next.at),
+            zone: next.timezone,
           })
         : i18n.t("agent.noNextRun"),
   ];
@@ -213,7 +220,8 @@ export function AgentActions({
   agentId: string;
   definition: AgentDefinition | null;
 }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const queryClient = useQueryClient();
   const state = useAgentState(agentId);
   const denied = agentAccessDenied(state.error);
@@ -313,7 +321,7 @@ function RunNow({
   describedBy: string | undefined;
   start(target: AgentScheduleTarget): void;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const only = targets.length === 1 ? targets[0] : undefined;
   const className =
     "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50";

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,133 @@
+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 { availableTimezones, browserTimezone } from "@/timezone/timezone.ts";
+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();
+
+  // ⚠️ The active zone is put in front of the list unless it is already there, and that is not
+  // belt-and-braces: `Intl.supportedValuesOf("timeZone")` returns only CANONICAL IANA names, and
+  // "UTC" is not among them (it is an alias of Etc/UTC). A reader whose browser reports "UTC" —
+  // every CI machine, plenty of containers and servers — would otherwise get a Select whose value
+  // matches no item, and Radix renders that as an EMPTY field. Found by CI, not by the test.
+  //
+  // The same line covers the engine without `supportedValuesOf` at all: the list is empty and the
+  // reader still has their own zone to look at.
+  const zones = availableTimezones();
+  const current = timezone?.current ?? browserTimezone();
+  const options = zones.includes(current) ? zones : [current, ...zones];
+
+  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>
+              <Select value={timezone.current} onValueChange={timezone.select}>
+                <SelectTrigger id="settings-timezone" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                {/* Several hundred zones: the list scrolls, and Radix keeps the selected one in
+                    view when it opens. */}
+                <SelectContent className="max-h-72">
+                  {options.map((zone) => (
+                    <SelectItem key={zone} value={zone}>
+                      {zone.replace(/_/g, " ")}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p 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) => ({