@anchrd/intel-ui 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {

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;
+}

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,
@@ -699,28 +707,69 @@ function ModelSection({
 }) {
   const { i18n } = useIntelRouterContext();
   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 } = useIntelRouterContext();
+  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/i18n/en.json

@@ -347,6 +347,7 @@
   "agent.cronHint": "Five fields, in UTC: minute, hour, day of month, month, day of week. “0 8 * * *” is every day at 08:00.",
   "agent.model": "Model",
   "agent.modelHint": "Which model does the thinking. A change is picked up by the runtime within a minute.",
+  "agent.modelFigures": "{context} context · ${input} in / ${output} out per 1M tokens",
   "agent.calendar": "Upcoming runs",
   "agent.calendarUtc": "All times are UTC, because that is when the agent runs.",
   "agent.calendarUnreadable": "None of this agent's schedules can be read as a cron expression, so nothing is planned.",