@anchrd/intel-ui 0.11.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.11.0",
+  "version": "0.13.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-models/agent-models.ts

@@ -1,5 +1,6 @@
 import { AgentModel } from "@anchrd/intel-contract";
 import { z } from "zod";
+import type { ModelFacts, ModelPrice } from "./agent-models.types.ts";
 
 /**
  * Which models this installation offers.
@@ -7,8 +8,7 @@ import { z } from "zod";
  * ⚠️ There is no endpoint to ask. The runtime's registry answers one question — "is this provider
  * configured" — and only when a run is already starting; nothing anywhere lists what a deployment
  * pays for. Rather than invent an API for one screen, the list is build configuration
- * (`VITE_AGENT_MODELS`, a JSON array of `{provider, model}`), with the two the repository's own
- * fixtures use as the default.
+ * (`VITE_AGENT_MODELS`, a JSON array of `{provider, model}`), with the offering below as the default.
  *
  * ⚠️ The definition's current model is always offered, even when it is not in the list. A select
  * that silently dropped it would turn "look at this agent" into "change this agent" for anyone who
@@ -16,10 +16,105 @@ import { z } from "zod";
  */
 const ConfiguredModels = z.array(AgentModel);
 
-const firstFallback: AgentModel = { provider: "anthropic", model: "claude-sonnet-4" };
+/**
+ * Context window and price per model, collected 2026-08-06 from
+ * `GET /accounts/{id}/ai/models/search` (Workers AI, every entry carrying `function_calling`) and
+ * from Anthropic's model list. Both figures are shown beside the select, so this table is the one
+ * place to correct when they move.
+ *
+ * ⚠️ It is a copy and it ages silently. Cloudflare changes context windows and prices without
+ * notice, and a wrong price in the interface is worse than none — re-read the endpoint above rather
+ * than editing a number from memory. Asking live from the browser is not the way out: the account
+ * token does not belong in a SPA.
+ *
+ * ⚠️ Workers AI models that do not carry `function_calling` are deliberately absent. An agent is a
+ * tool loop; a model that cannot call a tool cannot run one, and offering it would only produce a
+ * broken agent for whoever picked it.
+ */
+const catalog: Record<string, { name: string; contextTokens: number; price: ModelPrice }> = {
+  "anthropic:claude-opus-5": price("Opus 5", 1_000_000, 5, 25),
+  "anthropic:claude-sonnet-5": price("Sonnet 5", 1_000_000, 3, 15),
+  "anthropic:claude-sonnet-4": price("Sonnet 4", 200_000, 3, 15),
+  "anthropic:claude-haiku-4-5": price("Haiku 4.5", 200_000, 1, 5),
+  "workers-ai:@cf/openai/gpt-oss-120b": price("GPT-OSS 120B", 128_000, 0.35, 0.75),
+  "workers-ai:@cf/openai/gpt-oss-20b": price("GPT-OSS 20B", 128_000, 0.2, 0.3),
+  "workers-ai:@cf/moonshotai/kimi-k2.6": price("Kimi K2.6", 262_144, 0.95, 4),
+  "workers-ai:@cf/moonshotai/kimi-k2.7-code": price("Kimi K2.7 Code", 262_144, 0.95, 4),
+  "workers-ai:@cf/zai-org/glm-5.2": price("GLM 5.2", 262_144, 1.4, 4.4),
+  "workers-ai:@cf/zai-org/glm-4.7-flash": price("GLM 4.7 Flash", 131_072, 0.0605, 0.4),
+  "workers-ai:@cf/google/gemma-4-26b-a4b-it": price("Gemma 4 26B", 256_000, 0.1, 0.3),
+  "workers-ai:@cf/nvidia/nemotron-3-120b-a12b": price("Nemotron 3 120B", 256_000, 0.5, 1.5),
+  "workers-ai:@cf/meta/llama-4-scout-17b-16e-instruct": price("Llama 4 Scout", 131_000, 0.27, 0.85),
+  "workers-ai:@cf/meta/llama-3.3-70b-instruct-fp8-fast": price(
+    "Llama 3.3 70B Fast",
+    24_000,
+    0.293,
+    2.253,
+  ),
+  "workers-ai:@cf/mistralai/mistral-small-3.1-24b-instruct": price(
+    "Small 3.1 24B",
+    128_000,
+    0.351,
+    0.555,
+  ),
+  "workers-ai:@cf/ibm-granite/granite-4.0-h-micro": price(
+    "Granite 4.0 Micro",
+    131_000,
+    0.017,
+    0.112,
+  ),
+  "workers-ai:@cf/qwen/qwen3-30b-a3b-fp8": price("Qwen3 30B", 32_768, 0.0509, 0.335),
+};
+
+function price(
+  name: string,
+  contextTokens: number,
+  inputPerMillion: number,
+  outputPerMillion: number,
+): { name: string; contextTokens: number; price: ModelPrice } {
+  return { name, contextTokens, price: { inputPerMillion, outputPerMillion } };
+}
+
+/**
+ * ⚠️ The brand comes from the model id, never from `provider`. `provider` says who serves the model,
+ * so every Workers AI entry would read "Cloudflare" — thirteen identical labels in a list whose whole
+ * job is to tell them apart. The name a reader looks for sits in the id, as its second segment:
+ * `@cf/openai/gpt-oss-120b` is OpenAI's.
+ */
+const brands: Record<string, string> = {
+  aisingapore: "AI Singapore",
+  "deepseek-ai": "DeepSeek",
+  google: "Google",
+  "ibm-granite": "IBM",
+  meta: "Meta",
+  "meta-llama": "Meta",
+  mistralai: "Mistral",
+  moonshotai: "Moonshot",
+  nvidia: "NVIDIA",
+  openai: "OpenAI",
+  qwen: "Qwen",
+  "zai-org": "Z.ai",
+};
+
+const firstFallback: AgentModel = { provider: "anthropic", model: "claude-sonnet-5" };
 const fallback: [AgentModel, ...AgentModel[]] = [
   firstFallback,
+  { provider: "anthropic", model: "claude-opus-5" },
+  { provider: "anthropic", model: "claude-haiku-4-5" },
+  { provider: "anthropic", model: "claude-sonnet-4" },
+  { provider: "workers-ai", model: "@cf/openai/gpt-oss-120b" },
+  { provider: "workers-ai", model: "@cf/openai/gpt-oss-20b" },
+  { provider: "workers-ai", model: "@cf/moonshotai/kimi-k2.6" },
+  { provider: "workers-ai", model: "@cf/moonshotai/kimi-k2.7-code" },
+  { provider: "workers-ai", model: "@cf/zai-org/glm-5.2" },
+  { provider: "workers-ai", model: "@cf/zai-org/glm-4.7-flash" },
+  { provider: "workers-ai", model: "@cf/google/gemma-4-26b-a4b-it" },
+  { provider: "workers-ai", model: "@cf/nvidia/nemotron-3-120b-a12b" },
+  { provider: "workers-ai", model: "@cf/meta/llama-4-scout-17b-16e-instruct" },
   { provider: "workers-ai", model: "@cf/meta/llama-3.3-70b-instruct-fp8-fast" },
+  { provider: "workers-ai", model: "@cf/mistralai/mistral-small-3.1-24b-instruct" },
+  { provider: "workers-ai", model: "@cf/ibm-granite/granite-4.0-h-micro" },
+  { provider: "workers-ai", model: "@cf/qwen/qwen3-30b-a3b-fp8" },
 ];
 
 export function modelKey(model: AgentModel): string {
@@ -36,6 +131,50 @@ export function parseModelKey(key: string): AgentModel | null {
   return parsed.success ? parsed.data : null;
 }
 
+// How a model is written for a person: brand first, then the model's own name, then the two numbers
+// somebody actually chooses on. A model outside the catalog keeps its own id as the name and reports
+// no figures at all.
+export function modelFacts(model: AgentModel): ModelFacts {
+  const known = catalog[modelKey(model)];
+  if (known) {
+    return {
+      brand: brandOf(model),
+      name: known.name,
+      contextTokens: known.contextTokens,
+      price: known.price,
+    };
+  }
+  return { brand: brandOf(model), name: unknownName(model), contextTokens: null, price: null };
+}
+
+function brandOf(model: AgentModel): string {
+  if (model.provider === "anthropic") return "Claude";
+  const vendor = model.model.split("/")[1];
+  if (!vendor) return "Workers AI";
+  return brands[vendor] ?? vendor;
+}
+
+// The id itself, not a prettified guess. "claude-opus-4-1" would become "Opus 4 1" under any rule
+// simple enough to write here, and a wrong name is harder to recognise than a raw one.
+function unknownName(model: AgentModel): string {
+  if (model.provider === "anthropic") return model.model.replace(/^claude-/, "");
+  const segments = model.model.split("/");
+  return segments[segments.length - 1] ?? model.model;
+}
+
+export function formatContextTokens(tokens: number): string {
+  if (tokens >= 1_000_000) return `${Math.round(tokens / 1_000_000)}M`;
+  if (tokens >= 1_000) return `${Math.round(tokens / 1_000)}k`;
+  return String(tokens);
+}
+
+// ⚠️ Two decimals at least, three at most, and always per one million tokens. Granite costs $0.017
+// per million in: rounded to two decimals it reads $0.02, which is the same price as a model that
+// costs seventeen percent more.
+export function formatPricePerMillion(dollars: number, locale: string): string {
+  return dollars.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 3 });
+}
+
 export function configuredModels(): AgentModel[] {
   const raw = import.meta.env.VITE_AGENT_MODELS;
   if (!raw) return fallback;

package/src/agent/agent-models/agent-models.types.ts

@@ -0,0 +1,18 @@
+/** What a reader needs in order to pick a model: whose it is, what it is called, and what it costs. */
+export interface ModelFacts {
+  brand: string;
+  name: string;
+  /**
+   * ⚠️ Both are null for a model this installation has no figures for, and the display then shows
+   * nothing rather than a zero. A definition is written by MCP and by other installations too, so an
+   * unknown model is normal — and an invented "0" would be a false statement about money.
+   */
+  contextTokens: number | null;
+  price: ModelPrice | null;
+}
+
+/** Always US dollars per one million tokens — never per 1k, never a single blended number. */
+export interface ModelPrice {
+  inputPerMillion: number;
+  outputPerMillion: number;
+}