@anchrd/intel-ui 0.17.0 → 0.19.0

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

@@ -1,308 +0,0 @@
-import type { AgentCosts } from "@anchrd/intel-contract";
-import { useQuery } from "@tanstack/react-query";
-import { ChevronDown, ChevronRight } from "lucide-react";
-import { useState } from "react";
-import {
-  formatCost,
-  formatTokens,
-  type RunCost,
-  runCost,
-  runUsage,
-  useAgentCosts,
-} from "@/agent/agent-costs/agent-costs.ts";
-import type { AgentRun } from "@/data/agent-runtime/agent-runtime.ts";
-import type { I18n } from "@/i18n/i18n.types.ts";
-import { useI18n } from "@/i18n/i18n-context.tsx";
-import { useIntelRouterContext } from "@/router/router-context.ts";
-
-/**
- * What this agent has done, newest first.
- *
- * ⚠️ Read from the RUNTIME, not from intel: runs live in the agent's own Durable Object and are
- * trimmed there. So this list is short by design and has no paging — the runtime answers at most a
- * hundred runs and keeps no more.
- *
- * ⚠️ A run says what it did, when it failed what stopped it, and since #268 what it answered — but
- * only for the runs nobody was watching (`schedule`, `manual`, `task`). A chat answer belongs to the
- * person it was streamed to and a mail answer to the correspondent, and the runtime deliberately
- * stores neither where this list could reach it.
- *
- * ⚠️ Since #251 it also says what each run consumed and what it cost — and the two come from
- * DIFFERENT places on purpose. The tokens are the runtime's own record; the money is Cloudflare's
- * gateway log, read by intel. Either can be missing without the other, and each says so on its own
- * rather than being folded into one number that would be half a guess.
- */
-export function AgentLog({ agentId }: { agentId: string }) {
-  const { data } = useIntelRouterContext();
-  const i18n = useI18n();
-  const [openRunId, setOpenRunId] = useState<string | null>(null);
-  const runs = useQuery({
-    queryKey: ["agent-runs", agentId],
-    queryFn: () => data.listAgentRuns(agentId),
-  });
-  const costs = useAgentCosts(agentId);
-
-  return (
-    <section aria-label={i18n.t("agent.log")} className="min-h-0 flex-1 overflow-y-auto px-6 py-5">
-      {runs.isPending ? (
-        <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
-      ) : null}
-      {runs.isError ? (
-        <div role="alert" className="space-y-3 text-sm">
-          <p className="text-destructive">{i18n.t("agent.logFailed")}</p>
-          <button
-            type="button"
-            onClick={() => void runs.refetch()}
-            className="rounded-md border px-3 py-2 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            {i18n.t("common.retry")}
-          </button>
-        </div>
-      ) : null}
-      {runs.data && runs.data.items.length === 0 ? (
-        <p className="text-sm text-muted-foreground">{i18n.t("agent.logEmpty")}</p>
-      ) : null}
-      {runs.data && runs.data.items.length > 0 ? (
-        <>
-          <CostSummary costs={costs.data} />
-          <ul className="space-y-2">
-            {runs.data.items.map((run) => (
-              <RunRow
-                key={run.id}
-                agentId={agentId}
-                run={run}
-                cost={runCost(costs.data, run.id)}
-                open={openRunId === run.id}
-                toggle={() => setOpenRunId(openRunId === run.id ? null : run.id)}
-              />
-            ))}
-          </ul>
-        </>
-      ) : null}
-    </section>
-  );
-}
-
-/**
- * What the agent has cost over the two windows, above the list it belongs to.
- *
- * ⚠️ Where the figures are missing this says WHY, in a sentence, instead of showing nothing. A cost
- * view that stayed blank when the gateway was unreachable looks exactly like an agent that has cost
- * nothing — which is the reading this whole feature exists to prevent.
- *
- * ⚠️ `partial` is spelled out rather than hidden behind a symbol. A total that stopped counting is
- * not a total, and a reader comparing this month with last needs to know the number is a floor.
- */
-function CostSummary({ costs }: { costs: AgentCosts | undefined }) {
-  const i18n = useI18n();
-  if (!costs) return null;
-  if (costs.status !== "read") {
-    return (
-      <p className="mb-3 text-sm text-muted-foreground">
-        {i18n.t(
-          costs.status === "not_configured" ? "agent.costNotConfigured" : "agent.costUnreadable",
-        )}
-      </p>
-    );
-  }
-
-  return (
-    <div className="mb-3 space-y-1">
-      <dl className="flex flex-wrap items-baseline gap-x-6 gap-y-1 text-sm">
-        {costs.windows.map((window) => (
-          <div key={window.days} className="flex items-baseline gap-2">
-            <dt className="text-muted-foreground">
-              {i18n.t("agent.costWindow", { days: String(window.days) })}
-            </dt>
-            <dd className="font-medium">{formatCost(window.cost, i18n.locale)}</dd>
-            <dd className="text-xs text-muted-foreground">
-              {i18n.t("agent.costWindowCalls", { count: String(window.calls) })}
-            </dd>
-          </div>
-        ))}
-      </dl>
-      {costs.partial ? (
-        <p className="text-xs text-muted-foreground">{i18n.t("agent.costPartial")}</p>
-      ) : null}
-    </div>
-  );
-}
-
-/**
- * What one run consumed, in the four counters that are priced differently.
- *
- * ⚠️ Cache reads stand APART from fresh input and are never added into one number. They are the
- * figure #250 is visible in — a read costs about a tenth of an ordinary input token — and in a
- * total they disappear completely.
- */
-function RunUsage({ run, i18n }: { run: AgentRun; i18n: I18n }) {
-  const usage = runUsage(run);
-  if (!usage) {
-    // ⚠️ Two different sentences, and the difference is worth the extra key. "Nothing recorded" is a
-    // run from before #250; "the provider reports nothing" is every Workers AI run, for good.
-    return (
-      <span className="text-muted-foreground">
-        {i18n.t(run.usage ? "agent.usageNotReported" : "agent.usageUnknown")}
-      </span>
-    );
-  }
-  return (
-    <span className="text-muted-foreground">
-      {i18n.t("agent.usage", {
-        input: formatTokens(usage.inputTokens, i18n.locale),
-        output: formatTokens(usage.outputTokens, i18n.locale),
-        cacheRead: formatTokens(usage.cacheReadInputTokens, i18n.locale),
-        cacheWrite: formatTokens(usage.cacheCreationInputTokens, i18n.locale),
-      })}
-    </span>
-  );
-}
-
-/**
- * ⚠️ Four outcomes, one of which is a number. A run the gateway has no line for says so; it does
- * NOT show a zero, and it does not silently disappear from a column its neighbours fill.
- */
-function RunCostLabel({ cost, i18n }: { cost: RunCost; i18n: I18n }) {
-  if (cost.kind === "known") {
-    return <span className="font-medium">{formatCost(cost.cost, i18n.locale)}</span>;
-  }
-  // The two deployment-wide reasons are already stated once above the list, so a row under them
-  // stays quiet rather than repeating the same sentence for every run on the screen.
-  if (cost.kind !== "missing") return null;
-  return <span className="text-muted-foreground">{i18n.t("agent.costMissing")}</span>;
-}
-
-function RunRow({
-  agentId,
-  run,
-  cost,
-  open,
-  toggle,
-}: {
-  agentId: string;
-  run: AgentRun;
-  cost: RunCost;
-  open: boolean;
-  toggle(): void;
-}) {
-  const i18n = useI18n();
-  const failed = run.status === "failed";
-  const Chevron = open ? ChevronDown : ChevronRight;
-  return (
-    <li className="rounded-lg border bg-card">
-      <button
-        type="button"
-        onClick={toggle}
-        aria-expanded={open}
-        className="flex w-full items-start gap-3 rounded-lg px-4 py-3 text-left outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-      >
-        <Chevron aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
-        <span className="min-w-0 flex-1">
-          <span className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
-            <span
-              className={`rounded-full border px-2 py-0.5 text-xs ${failed ? "border-destructive/40 text-destructive" : "text-muted-foreground"}`}
-            >
-              {i18n.t(`runs.status.${run.status}`)}
-            </span>
-            <time dateTime={run.startedAt}>
-              {new Date(run.startedAt).toLocaleString(i18n.locale)}
-            </time>
-            <span className="text-muted-foreground">{i18n.t(`agent.trigger.${run.trigger}`)}</span>
-            <span className="text-muted-foreground">
-              {i18n.t("agent.steps", { count: run.steps })}
-            </span>
-            <RunCostLabel cost={cost} i18n={i18n} />
-          </span>
-          <span className="mt-1 block text-xs">
-            <RunUsage run={run} i18n={i18n} />
-          </span>
-          {/* The failure in the words the failure itself used. Summarising it into "failed" is what
-              the status pill already says, and it is never the sentence that helps. */}
-          {run.error ? (
-            <span className="mt-1.5 block text-sm text-destructive">{run.error}</span>
-          ) : null}
-        </span>
-      </button>
-      {open ? <RunDetail agentId={agentId} run={run} /> : null}
-    </li>
-  );
-}
-
-/**
- * What an unattended run produced, which is the only place a person can read it (#272).
- *
- * ⚠️ Rendered for `schedule`, `manual` and `task`, and for nothing else. A `chat` or `mail` run
- * carries no answer by construction (#268), so an empty state under one of those would invent a
- * loss: the answer was streamed into a window or posted to a correspondent and was never meant to
- * come back here.
- *
- * ⚠️ Read from the run the row already holds, not from the detail fetch. `GET /runs` carries the
- * whole record, and hanging the answer off the second request would hide it whenever the
- * operational log — the smaller half of what this row is for — happens to be unreadable.
- */
-function RunAnswer({ run, i18n }: { run: AgentRun; i18n: I18n }) {
-  if (run.trigger === "chat" || run.trigger === "mail") return null;
-  return (
-    <section aria-label={i18n.t("agent.runAnswer")} className="mb-3">
-      <h3 className="text-sm font-semibold">{i18n.t("agent.runAnswer")}</h3>
-      {run.answer ? (
-        // Whitespace preserved: a model answers in paragraphs and lists, and collapsing them turns
-        // a readable report into one block of prose.
-        <p className="mt-1 whitespace-pre-wrap text-sm">{run.answer}</p>
-      ) : (
-        <p className="mt-1 text-sm text-muted-foreground">{i18n.t("agent.runAnswerEmpty")}</p>
-      )}
-    </section>
-  );
-}
-
-// 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, run }: { agentId: string; run: AgentRun }) {
-  const { data } = useIntelRouterContext();
-  const i18n = useI18n();
-  const runId = run.id;
-  const detail = useQuery({
-    queryKey: ["agent-run", agentId, runId],
-    queryFn: () => data.getAgentRun(agentId, runId),
-  });
-  return (
-    <div className="border-t px-4 py-3">
-      <RunAnswer run={run} i18n={i18n} />
-      {detail.isPending ? (
-        <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
-      ) : null}
-      {detail.isError ? (
-        <p role="alert" className="text-sm text-destructive">
-          {i18n.t("agent.runFailed")}
-        </p>
-      ) : null}
-      {detail.data && detail.data.log.length === 0 ? (
-        <p className="text-sm text-muted-foreground">{i18n.t("agent.runLogEmpty")}</p>
-      ) : null}
-      {detail.data && detail.data.log.length > 0 ? (
-        <ol aria-label={i18n.t("agent.runLog")} className="space-y-2">
-          {detail.data.log.map((entry) => (
-            <li key={entry.id} className="text-sm">
-              <span
-                className={entry.level === "error" ? "font-medium text-destructive" : "font-medium"}
-              >
-                {entry.event}
-              </span>
-              <time dateTime={entry.at} className="ml-2 text-xs text-muted-foreground">
-                {new Date(entry.at).toLocaleTimeString(i18n.locale)}
-              </time>
-              {entry.detail ? (
-                <span
-                  className={`mt-0.5 block text-xs ${entry.level === "error" ? "text-destructive" : "text-muted-foreground"}`}
-                >
-                  {entry.detail}
-                </span>
-              ) : null}
-            </li>
-          ))}
-        </ol>
-      ) : null}
-    </div>
-  );
-}

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

@@ -1,166 +0,0 @@
-import { AgentModel, type ModelCatalogEntry } from "@anchrd/intel-contract";
-import { z } from "zod";
-import type { ModelFacts } from "./agent-models.types.ts";
-
-/**
- * Which models this installation offers.
- *
- * ⚠️ 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 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
- * then saved — and the definition is written by MCP and by other installations too, not only here.
- */
-const ConfiguredModels = z.array(AgentModel);
-
-/**
- * ⚠️ 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 {
-  return `${model.provider}:${model.model}`;
-}
-
-export function parseModelKey(key: string): AgentModel | null {
-  const boundary = key.indexOf(":");
-  if (boundary <= 0) return null;
-  const parsed = AgentModel.safeParse({
-    provider: key.slice(0, boundary),
-    model: key.slice(boundary + 1),
-  });
-  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.
- *
- * ⚠️ The figures come IN, from intel's catalog (#257). There is no table in this package any more,
- * and putting one back would restore exactly what the removed one was accused of: it was a copy, it
- * aged silently, and a wrong price in the interface is worse than none. What this file still owns is
- * how a model is written down — the brand, the fallback name, the two formats — none of which is a
- * fact about money.
- *
- * ⚠️ A missing catalog and an unknown model produce the SAME answer: a name and no figures. The
- * select therefore renders while the catalog is still on its way, and it renders at all when the
- * catalog could not be fetched — an agent whose model cannot be chosen is an agent nobody can repair
- * from this screen.
- */
-export function modelFacts(model: AgentModel, catalog?: ModelCatalogEntry[]): ModelFacts {
-  const known = catalog?.find(
-    (entry) => entry.provider === model.provider && entry.model === model.model,
-  );
-  if (known) {
-    return {
-      brand: brandOf(model),
-      name: known.name,
-      contextTokens: known.contextTokens,
-      price: known.price,
-      // Nothing is stale when there is nothing to be stale: a model the catalog carries no price
-      // for shows no price, and no warning about a price it never showed.
-      stale: known.source === "builtin" && known.price !== null,
-    };
-  }
-  return {
-    brand: brandOf(model),
-    name: unknownName(model),
-    contextTokens: null,
-    price: null,
-    stale: false,
-  };
-}
-
-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;
-  try {
-    const parsed = ConfiguredModels.safeParse(JSON.parse(raw));
-    // A malformed variable falls back rather than emptying the select: an agent whose model cannot
-    // be chosen is an agent that cannot be repaired from this screen.
-    return parsed.success && parsed.data.length > 0 ? parsed.data : fallback;
-  } catch {
-    return fallback;
-  }
-}
-
-// The offered list with the agent's own model folded in, deduplicated, order preserved.
-export function selectableModels(current: AgentModel | null): AgentModel[] {
-  const models = configuredModels();
-  if (!current || models.some((model) => modelKey(model) === modelKey(current))) return models;
-  return [current, ...models];
-}
-
-// What a newly created agent gets. The first offered model, because a create dialog that asked for
-// a provider before the agent has a name would be a settings screen wearing a form's clothes.
-export function defaultModel(): AgentModel {
-  return configuredModels()[0] ?? firstFallback;
-}

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

@@ -1,24 +0,0 @@
-import type { ModelPrice } from "@anchrd/intel-contract";
-
-/** 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;
-  /**
-   * Whether the two figures came off a written-out table rather than from Cloudflare (#257).
-   *
-   * ⚠️ It exists so the screen can SAY so. A silent fallback onto typed-out prices is the state
-   * this feature replaced, with more code — and a wrong price in the interface is worse than none.
-   * `false` for a model with no figures at all: there is nothing there to be stale.
-   */
-  stale: boolean;
-}
-
-export type { ModelPrice };