@anchrd/intel-ui 0.12.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {
@@ -29,7 +29,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@anchrd/intel-contract": "^0.7.0",
+    "@anchrd/intel-contract": "^0.8.0",
     "@assistant-ui/react": "^0.15.4",
     "@assistant-ui/react-ai-sdk": "^1.4.4",
     "@blocknote/core": "^0.52.1",
@@ -45,6 +45,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "colorjs.io": "^0.7.1",
+    "croner": "^10.0.1",
     "fflate": "^0.8.3",
     "graphology": "^0.26.0",
     "lucide-react": "^1.25.0",

package/src/agent/agent-calendar/agent-calendar.tsx

@@ -1,7 +1,7 @@
 import type { AgentDefinition } from "@anchrd/intel-contract";
 import { CalendarClock } from "lucide-react";
 import { nextCronFires } from "@/agent/agent-cron/agent-cron.ts";
-import { useIntelRouterContext } from "@/router/router-context.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 
 // How far ahead one schedule is shown. Enough to recognise a rhythm — daily, weekly, the first of
 // the month — and not so much that the page becomes a year planner nobody asked for.
@@ -14,9 +14,11 @@ const PerSchedule = 5;
  * calendar, so these times are this page's own reading of the same cron expressions — by the same
  * rules, pinned by `agent-cron.unit.ts` against the runtime's test.
  *
- * ⚠️ UTC, and it says so. The definition carries no timezone, so the runtime fires in UTC; showing
- * these in the reader's local zone would be a different hour from the one the agent keeps, and the
- * two would only be noticed when a schedule "ran at the wrong time".
+ * ⚠️ Each entry is drawn in ITS OWN schedule's timezone and names it (#228). Not in the reader's:
+ * the agent fires at the hour its schedule says, and an instant shown in the zone of whoever is
+ * looking would be a different hour from the one the agent keeps — a difference that only ever
+ * surfaces as "it ran at the wrong time". And not one zone for the whole list either, because two
+ * schedules of one agent may sit in different ones.
  */
 export function AgentCalendar({
   definition,
@@ -27,26 +29,39 @@ export function AgentCalendar({
   // does not have to travel in time to assert on it.
   now: Date;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const schedules = definition?.schedules ?? [];
   const upcoming = schedules
     .flatMap((schedule) =>
-      nextCronFires(schedule.cron, now, PerSchedule).map((at) => ({ at, schedule })),
+      nextCronFires(schedule.cron, now, PerSchedule, schedule.timezone).map((at) => ({
+        at,
+        schedule,
+      })),
     )
     .sort((left, right) => left.at.getTime() - right.at.getTime());
 
-  const format = new Intl.DateTimeFormat(i18n.locale, {
-    dateStyle: "full",
-    timeStyle: "short",
-    timeZone: "UTC",
-  });
+  // One formatter per zone rather than one per row: a DateTimeFormat is expensive to build, and a
+  // calendar of five entries per schedule would otherwise build one for each of them.
+  const formatters = new Map<string, Intl.DateTimeFormat>();
+  const formatIn = (zone: string, at: Date) => {
+    let format = formatters.get(zone);
+    if (!format) {
+      format = new Intl.DateTimeFormat(i18n.locale, {
+        dateStyle: "full",
+        timeStyle: "short",
+        timeZone: zone,
+      });
+      formatters.set(zone, format);
+    }
+    return format.format(at);
+  };
 
   return (
     <section
       aria-label={i18n.t("agent.calendar")}
       className="min-h-0 flex-1 overflow-y-auto px-6 py-5"
     >
-      <p className="text-xs text-muted-foreground">{i18n.t("agent.calendarUtc")}</p>
+      <p className="text-xs text-muted-foreground">{i18n.t("agent.calendarZones")}</p>
       {schedules.length === 0 ? (
         <p className="mt-4 text-sm text-muted-foreground">{i18n.t("agent.scheduleEmpty")}</p>
       ) : upcoming.length === 0 ? (
@@ -59,13 +74,16 @@ export function AgentCalendar({
         <ol className="mt-4 space-y-2">
           {upcoming.map((entry) => (
             <li
-              key={`${entry.schedule.cron}:${entry.schedule.target.id}:${entry.at.toISOString()}`}
+              key={`${entry.schedule.cron}@${entry.schedule.timezone}:${entry.schedule.target.id}:${entry.at.toISOString()}`}
               className="flex flex-wrap items-center gap-3 rounded-lg border bg-card px-4 py-3 text-sm"
             >
               <CalendarClock aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
               <time dateTime={entry.at.toISOString()} className="font-medium">
-                {format.format(entry.at)}
+                {formatIn(entry.schedule.timezone, entry.at)}
               </time>
+              {/* The zone stands next to the time, not once above the list: without it the same
+                  wall-clock hour from two schedules reads as a duplicate. */}
+              <span className="text-xs text-muted-foreground">{entry.schedule.timezone}</span>
               <code className="rounded bg-muted px-2 py-0.5 text-xs">{entry.schedule.cron}</code>
               <span className="text-xs text-muted-foreground">
                 {i18n.t(`node.kind.${entry.schedule.target.kind}`)}

package/src/agent/agent-chat/agent-chat.tsx

@@ -8,6 +8,7 @@ import {
 import { AssistantChatTransport, useChatRuntime } from "@assistant-ui/react-ai-sdk";
 import { ArrowDown, Send } from "lucide-react";
 import { useMemo } from "react";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
 /**
@@ -25,7 +26,8 @@ import { useIntelRouterContext } from "@/router/router-context.ts";
  * rather than from a bearer this page would have had to hold.
  */
 export function AgentChat({ agentId }: { agentId: string }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   // ⚠️ Built once per agent. A transport rebuilt on every render restarts the runtime underneath
   // assistant-ui and takes the open thread with it.
   const transport = useMemo(

package/src/agent/agent-cron/agent-cron.ts

@@ -1,132 +1,68 @@
+import { Cron } from "croner";
+
 /**
- * When a five-field cron expression fires next, in UTC.
+ * When a five-field cron expression fires next, read in the schedule's own timezone.
  *
- * ⚠️ This is a second copy of `packages/agent/src/schedule/cron/cron.ts`, on purpose and with a
- * cost. The runtime imports nothing from the contract and this package cannot import a Worker
- * package, so there is no third place the matcher could live without inventing one for two callers.
- * What must never happen is the two disagreeing: a calendar that promises 08:00 while the alarm
- * fires at 09:00 is worse than a calendar that says nothing. `agent-cron.unit.ts` therefore pins
- * exactly the cases the runtime's own test pins — including the day-field OR rule, which is the
- * one an independent reimplementation gets wrong.
+ * ⚠️ This is still a second copy of `packages/agent/src/schedule/cron/cron.ts` — the runtime imports
+ * nothing from the contract and this package cannot import a Worker package, so there remains no
+ * third place for it. What changed with #228 is WHAT is duplicated: both files are now a thin
+ * wrapper over croner, and the part that could actually disagree — the matching, DST, the day-field
+ * OR rule — is one implementation in the library.
  *
- * ⚠️ UTC, with no timezone option, because the definition carries none: `schedules[{cron, target}]`
- * and nothing else. Reading these in local time here would show a person a different hour from the
- * one the agent runs at.
+ * That was the real risk. The old comment put it plainly: "a calendar that promises 08:00 while the
+ * alarm fires at 09:00 is worse than a calendar that says nothing" — and two independent
+ * reimplementations of timezone arithmetic is exactly how that happens.
  */
-interface Field {
-  values: Set<number>;
-  restricted: boolean;
-}
-
-function parseField(source: string, min: number, max: number): Field | null {
-  const values = new Set<number>();
-  let restricted = false;
-  for (const part of source.split(",")) {
-    const [range, stepText] = part.split("/");
-    if (range === undefined || range === "") return null;
-    const step = stepText === undefined ? 1 : Number(stepText);
-    if (!Number.isInteger(step) || step < 1) return null;
-    let from: number;
-    let to: number;
-    if (range === "*") {
-      from = min;
-      to = max;
-      if (step !== 1) restricted = true;
-    } else if (range.includes("-")) {
-      const [fromText, toText] = range.split("-");
-      from = Number(fromText);
-      to = Number(toText);
-      restricted = true;
-    } else {
-      from = Number(range);
-      to = from;
-      restricted = true;
-    }
-    if (!Number.isInteger(from) || !Number.isInteger(to) || from < min || to > max || from > to) {
-      return null;
-    }
-    for (let value = from; value <= to; value += step) values.add(value);
-  }
-  return values.size > 0 ? { values, restricted } : null;
-}
 
-export interface CronExpression {
-  minute: Field;
-  hour: Field;
-  dayOfMonth: Field;
-  month: Field;
-  dayOfWeek: Field;
-}
+// One year is the search bound. An expression that matches nothing within a year — "31st of
+// February" — has no next fire time, and saying so beats stepping forever.
+const MaxYearsAhead = 1;
 
-export function parseCron(expression: string): CronExpression | null {
-  const parts = expression.trim().split(/\s+/);
-  if (parts.length !== 5) return null;
-  // Sunday is 0 in the standard and 7 in several dialects; both are accepted and normalised below.
-  const [minute, hour, dayOfMonth, month, dayOfWeek] = parts as [
-    string,
-    string,
-    string,
-    string,
-    string,
-  ];
-  const fields = {
-    minute: parseField(minute, 0, 59),
-    hour: parseField(hour, 0, 23),
-    dayOfMonth: parseField(dayOfMonth, 1, 31),
-    month: parseField(month, 1, 12),
-    dayOfWeek: parseField(dayOfWeek, 0, 7),
-  };
-  if (!fields.minute || !fields.hour || !fields.dayOfMonth || !fields.month || !fields.dayOfWeek) {
+function schedule(expression: string, timezone: string): Cron | null {
+  try {
+    const job = new Cron(expression.trim(), { timezone, paused: true });
+    // croner also accepts six fields (with seconds). Intel's contract is five, and so is the hint
+    // shown next to the input — a six-field expression must not quietly mean something else.
+    return expression.trim().split(/\s+/).length === 5 ? job : null;
+  } catch {
     return null;
   }
-  if (fields.dayOfWeek.values.has(7)) fields.dayOfWeek.values.add(0);
-  return fields as CronExpression;
 }
 
-export function matches(cron: CronExpression, date: Date): boolean {
-  if (!cron.minute.values.has(date.getUTCMinutes())) return false;
-  if (!cron.hour.values.has(date.getUTCHours())) return false;
-  if (!cron.month.values.has(date.getUTCMonth() + 1)) return false;
-  const dayOfMonth = cron.dayOfMonth.values.has(date.getUTCDate());
-  const dayOfWeek = cron.dayOfWeek.values.has(date.getUTCDay());
-  // ⚠️ The standard's oddity, kept on purpose: when both day fields are restricted they are ORed,
-  // not ANDed. "0 0 1 * 1" is the first of the month AND every Monday, and a matcher that ANDs them
-  // silently lists about four times fewer runs than the agent will actually make.
-  if (cron.dayOfMonth.restricted && cron.dayOfWeek.restricted) return dayOfMonth || dayOfWeek;
-  return dayOfMonth && dayOfWeek;
+// ⚠️ The croner call is inside the try, not only the construction. An unknown timezone can surface
+// either place depending on when croner first converts a date — and an exception escaping here ends
+// up inside a Durable Object alarm, which is the one place nobody is watching.
+function runs(expression: string, after: Date, count: number, timezone: string): Date[] {
+  const job = schedule(expression, timezone);
+  if (!job) return [];
+  try {
+    return job.nextRuns(count, after);
+  } catch {
+    return [];
+  }
 }
 
-// One year of minutes is the search bound. An expression that matches nothing within a year — "31st
-// of February" — has no next fire time, and saying so beats stepping forever.
-const MaxMinutesAhead = 366 * 24 * 60;
-
-export function nextCronFire(expression: string, after: Date): Date | null {
-  const cron = parseCron(expression);
-  if (!cron) return null;
-  // Strictly after: a schedule that just fired must not match the same minute again.
-  const start = Math.floor(after.getTime() / 60_000) * 60_000 + 60_000;
-  for (let step = 0; step < MaxMinutesAhead; step += 1) {
-    const candidate = new Date(start + step * 60_000);
-    if (matches(cron, candidate)) return candidate;
-  }
-  return null;
+export function nextCronFire(expression: string, after: Date, timezone: string): Date | null {
+  // Strictly after: a schedule that just fired must not match the same minute again. croner's
+  // `nextRuns(…, from)` is already exclusive of `from`.
+  const next = runs(expression, after, 1, timezone)[0];
+  if (!next) return null;
+  const limit = new Date(after.getTime());
+  limit.setUTCFullYear(limit.getUTCFullYear() + MaxYearsAhead);
+  return next > limit ? null : next;
 }
 
 /**
  * The next `count` fire times of one expression.
  *
- * ⚠️ Stepping from each hit rather than scanning once, so an expression that fires every minute
- * costs `count` iterations and not a year of them. An unparseable or never-matching expression
- * yields an empty list — the calendar says "nothing" rather than guessing.
+ * An unparseable or never-matching expression yields an empty list — the caller says "nothing"
+ * rather than guessing.
  */
-export function nextCronFires(expression: string, after: Date, count: number): Date[] {
-  const fires: Date[] = [];
-  let cursor = after;
-  for (let index = 0; index < count; index += 1) {
-    const next = nextCronFire(expression, cursor);
-    if (!next) break;
-    fires.push(next);
-    cursor = next;
-  }
-  return fires;
+export function nextCronFires(
+  expression: string,
+  after: Date,
+  count: number,
+  timezone: string,
+): Date[] {
+  return runs(expression, after, count, timezone);
 }

package/src/agent/agent-definition/agent-definition.ts

@@ -70,18 +70,27 @@ export function useAgentDefinition(nodeId: string): AgentDefinitionHandle {
 }
 
 /**
- * When this agent next does something on its own, across all of its schedules.
+ * When this agent next does something on its own, across all of its schedules — and in which zone
+ * that time is meant.
  *
  * ⚠️ Derived from the cron expressions, never asked. The runtime arms one alarm at a time and does
- * not publish it, so this is a reading of the same expressions by the same rules — see
- * `agent-cron.ts` for why that duplication is pinned by a test rather than left to agree by luck.
+ * not publish it, so this is a reading of the same expressions by the same rules — since #228 both
+ * sides read them through croner, so the reading and the alarm cannot drift apart.
+ *
+ * ⚠️ The zone travels WITH the time. Two schedules of one agent may sit in different zones, so a
+ * single "all times are X" line above the screen would be a lie for one of them; the caller formats
+ * each instant in the zone it came back with.
  */
-export function nextRunAt(definition: AgentDefinition | null, now: Date): Date | null {
-  const fires = (definition?.schedules ?? []).flatMap(
-    (schedule) => nextCronFires(schedule.cron, now, 1)[0] ?? [],
-  );
-  return fires.reduce<Date | null>(
-    (earliest, fire) => (earliest === null || fire < earliest ? fire : earliest),
+export function nextRunAt(
+  definition: AgentDefinition | null,
+  now: Date,
+): { at: Date; timezone: string } | null {
+  const fires = (definition?.schedules ?? []).flatMap((schedule) => {
+    const at = nextCronFires(schedule.cron, now, 1, schedule.timezone)[0];
+    return at ? [{ at, timezone: schedule.timezone }] : [];
+  });
+  return fires.reduce<{ at: Date; timezone: string } | null>(
+    (earliest, fire) => (earliest === null || fire.at < earliest.at ? fire : earliest),
     null,
   );
 }

package/src/agent/agent-entry-title/agent-entry-title.ts

@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
 /**
@@ -13,7 +14,8 @@ import { useIntelRouterContext } from "@/router/router-context.ts";
  * "run now" menu in the page head, which has to name the targets it offers.
  */
 export function useEntryTitle(entryId: string, flow = false): { title: string; known: boolean } {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const graph = useQuery({
     queryKey: ["node-graph"],
     queryFn: () => data.getNodeGraph(),

package/src/agent/agent-log/agent-log.tsx

@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { useState } from "react";
 import type { AgentRun } from "@/data/agent-runtime/agent-runtime.ts";
+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";
  * correspondent, and the runtime deliberately stores neither where this list could reach it.
  */
 export function AgentLog({ agentId }: { agentId: string }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const [openRunId, setOpenRunId] = useState<string | null>(null);
   const runs = useQuery({
     queryKey: ["agent-runs", agentId],
@@ -71,7 +73,7 @@ function RunRow({
   open: boolean;
   toggle(): void;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const failed = run.status === "failed";
   const Chevron = open ? ChevronDown : ChevronRight;
   return (
@@ -113,7 +115,8 @@ function RunRow({
 // The operational log of one run: what it tried, in order. Fetched only when a row is opened —
 // every run carries its own entries and loading all of them would be the whole log for one screen.
 function RunDetail({ agentId, runId }: { agentId: string; runId: string }) {
-  const { data, i18n } = useIntelRouterContext();
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
   const detail = useQuery({
     queryKey: ["agent-run", agentId, runId],
     queryFn: () => data.getAgentRun(agentId, runId),

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

@@ -29,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 { TimezoneCombobox } from "@/timezone/timezone-combobox/timezone-combobox.tsx";
+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
@@ -90,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
@@ -146,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;
@@ -225,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
@@ -321,7 +325,7 @@ function KnowledgeSection({
   definition: AgentDefinition;
   agent: AgentDefinitionHandle;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const [adding, setAdding] = useState(false);
 
   function write(references: AgentReference[]) {
@@ -398,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">
@@ -466,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 ?? [];
@@ -587,7 +592,7 @@ function ScheduleSection({
   definition: AgentDefinition;
   agent: AgentDefinitionHandle;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const [adding, setAdding] = useState(false);
 
   function write(schedules: AgentSchedule[]) {
@@ -601,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}`)}
@@ -645,8 +653,13 @@ 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 [target, setTarget] = useState<{ id: string; kind: "document" | "flow" } | null>(null);
 
   return (
@@ -655,7 +668,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">
@@ -674,6 +687,18 @@ 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>
+        <TimezoneCombobox
+          id="agent-schedule-timezone"
+          value={timezone}
+          onChange={setTimezone}
+          describedBy="agent-timezone-hint"
+        />
+        <span id="agent-timezone-hint" className="-mt-2 block text-xs text-muted-foreground">
+          {i18n.t("agent.scheduleTimezoneHint")}
+        </span>
         <EntryPicker
           kind="document"
           flows
@@ -705,7 +730,7 @@ function ModelSection({
   definition: AgentDefinition;
   agent: AgentDefinitionHandle;
 }) {
-  const { i18n } = useIntelRouterContext();
+  const i18n = useI18n();
   const models = selectableModels(definition.model);
   const current = modelFacts(definition.model);
 
@@ -760,7 +785,7 @@ function ModelName({ facts }: { facts: ModelFacts }) {
 // 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 } = useIntelRouterContext();
+  const i18n = useI18n();
   if (facts.contextTokens === null || facts.price === null) return null;
 
   return (

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";