@anchrd/intel-ui 0.18.0 → 0.20.0

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

@@ -1,1006 +0,0 @@
-import {
-  type AgentCosts,
-  type AgentCostWindow,
-  type AgentDefinition,
-  type AgentReference,
-  AgentReferenceKinds,
-  AgentReferenceRole,
-  type AgentSchedule,
-  agentReferenceRolesFor,
-  type Node,
-  type NodeKind,
-} from "@anchrd/intel-contract";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import {
-  Bot,
-  Check,
-  Copy,
-  FileText,
-  Folder,
-  KanbanSquare,
-  KeyRound,
-  MessageSquare,
-  Paperclip,
-  Plus,
-  Table2,
-  Trash2,
-  Wrench,
-} from "lucide-react";
-import { useState } from "react";
-import { costWindow, formatCost, useAgentCosts } from "@/agent/agent-costs/agent-costs.ts";
-import { type AgentDefinitionHandle, asDraft } from "@/agent/agent-definition/agent-definition.ts";
-import { delegationNotice } from "@/agent/agent-delegation-notice/agent-delegation-notice.ts";
-import { useEntryTitle } from "@/agent/agent-entry-title/agent-entry-title.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,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-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 { useModelCatalog } from "@/hooks/use-model-catalog.ts";
-import { useI18n } from "@/i18n/i18n-context.tsx";
-import { Modal } from "@/modal/modal.tsx";
-import { useIntelRouterContext } from "@/router/router-context.ts";
-import { SectionHint } from "@/section-hint/section-hint.tsx";
-import { TimezoneCombobox } from "@/timezone/timezone-combobox/timezone-combobox.tsx";
-import { useTimezone } from "@/timezone/timezone-context.tsx";
-import { useSessionUser, useUserName } from "@/user-name/user-name.ts";
-
-// 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
-// for whoever asks.
-function Section({
-  title,
-  hint,
-  children,
-}: {
-  title: string;
-  hint?: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <section aria-label={title} className="px-6 py-7">
-      <div className="flex items-center gap-1.5">
-        <h3 className="text-sm font-semibold">{title}</h3>
-        {hint ? <SectionHint hint={hint} /> : null}
-      </div>
-      <div className="mt-3">{children}</div>
-    </section>
-  );
-}
-
-/**
- * Everything an agent is, on one page: how to reach it, what it reads, what it may call, when it
- * acts on its own, which model does the thinking, and who it is in Gate.
- *
- * ⚠️ Four of the six sections write, and they all write the SAME way — a whole new definition
- * version through `save` (see `agent-definition.ts`). Tools joined them with D30: what it writes is
- * a selection of whole MCP servers out of the signed-in person's own portal connection, never a
- * mirrored permission, so ADR-0003 still holds — the catalog behind a chosen server stays a live
- * `tools/list`.
- *
- * ⚠️ Contact and Identity are the two that do not. Identity acts in Gate and in the agent runtime
- * rather than on the document, and a key has no business being in a definition — a definition is
- * versioned, shared and read into model context (ADR-0005 §4).
- */
-export function AgentProfile({ node, agent }: { node: Node; agent: AgentDefinitionHandle }) {
-  const i18n = useI18n();
-  const definition = agent.definition;
-
-  // The definition is `null` in exactly one window: the node exists and no version has been written
-  // yet. Nothing on this page can be edited until there is one, and saying so beats five sections
-  // of empty controls that all refuse.
-  if (agent.query.isPending) {
-    return <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>;
-  }
-  if (agent.query.isError) {
-    return (
-      <div role="alert" className="space-y-3 p-6 text-sm">
-        <p className="text-destructive">{i18n.t("agent.loadFailed")}</p>
-        <button
-          type="button"
-          onClick={() => void agent.query.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>
-    );
-  }
-  if (!definition) {
-    return <p className="p-6 text-sm text-muted-foreground">{i18n.t("agent.noDefinition")}</p>;
-  }
-
-  return (
-    <div className="min-h-0 flex-1 overflow-y-auto">
-      {agent.save.isError ? (
-        <p role="alert" className="border-b bg-destructive/5 px-6 py-3 text-sm text-destructive">
-          {i18n.t("agent.saveFailed")}
-        </p>
-      ) : null}
-      <ContactSection node={node} />
-      <KnowledgeSection definition={definition} agent={agent} />
-      <ToolsSection definition={definition} agent={agent} />
-      <ScheduleSection definition={definition} agent={agent} />
-      <ModelSection definition={definition} agent={agent} agentId={node.id} />
-      <IdentitySection node={node} agent={agent} />
-    </div>
-  );
-}
-
-/**
- * Who the agent IS to the rest of the installation, and the one button that repairs it (D29, #207).
- *
- * ⚠️ The application ID is shown and the key is not, because only one of the two is a name. The key
- * exists in Gate for the length of one call and goes straight into the agent runtime; there is
- * nothing for this page to reveal, copy or store, and that is what makes an agent created here able
- * to run without anybody opening a terminal (#200).
- *
- * ⚠️ Last on the page on purpose. It is the section a reader needs on the day something is wrong,
- * not while they are describing what the agent should do.
- */
-function IdentitySection({ node, agent }: { node: Node; agent: AgentDefinitionHandle }) {
-  const { data } = useIntelRouterContext();
-  const i18n = useI18n();
-  const queryClient = useQueryClient();
-  const [confirming, setConfirming] = useState(false);
-  const applicationId = agent.query.data?.applicationId ?? null;
-
-  const rotate = useMutation({
-    mutationFn: async () => await data.rotateAgentKey(node.id),
-    onSuccess: () => {
-      setConfirming(false);
-      // The run that failed with `agent_key_missing` is the reason somebody pressed this, so the
-      // page's own state is re-read rather than left showing the refusal that sent them here.
-      void queryClient.invalidateQueries({ queryKey: ["agent-state", node.id] });
-    },
-  });
-
-  return (
-    <Section title={i18n.t("agent.identity")} hint={i18n.t("agent.identityHint")}>
-      <div className="flex flex-wrap items-center gap-3 rounded-lg border bg-card px-4 py-3">
-        <KeyRound aria-hidden="true" className="size-4 shrink-0 text-primary" />
-        <span className="min-w-0 flex-1">
-          <span className="block text-sm font-medium">{i18n.t("agent.principal")}</span>
-          <code className="mt-0.5 block truncate text-xs text-muted-foreground">
-            {applicationId ?? i18n.t("agent.principalNone")}
-          </code>
-        </span>
-        <button
-          type="button"
-          onClick={() => setConfirming(true)}
-          disabled={applicationId === null || rotate.isPending}
-          aria-busy={rotate.isPending}
-          {...(applicationId === null ? { "aria-describedby": "agent-rotate-reason" } : {})}
-          className="inline-flex shrink-0 items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-        >
-          {i18n.t("agent.rotateKey")}
-        </button>
-      </div>
-      {applicationId === null ? (
-        <p id="agent-rotate-reason" className="mt-3 text-xs text-muted-foreground">
-          {i18n.t("agent.principalNoneHint")}
-        </p>
-      ) : null}
-      {rotate.isError ? (
-        <p role="alert" className="mt-3 text-xs text-destructive">
-          {i18n.t("agent.rotateKeyFailed")}
-        </p>
-      ) : null}
-      {rotate.isSuccess ? (
-        <p role="status" className="mt-3 text-xs text-muted-foreground">
-          {i18n.t("agent.rotateKeyDone")}
-        </p>
-      ) : null}
-      {confirming ? (
-        <Modal title={i18n.t("agent.rotateKey")} close={() => setConfirming(false)}>
-          {/* ⚠️ Confirmed rather than done on the first click. The previous key stops working the
-              moment this runs, so a misclick takes a working agent down until the call finishes. */}
-          <p className="text-sm text-muted-foreground">{i18n.t("agent.rotateKeyConfirm")}</p>
-          <button
-            type="button"
-            onClick={() => rotate.mutate()}
-            disabled={rotate.isPending}
-            aria-busy={rotate.isPending}
-            className="mt-4 w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-          >
-            {i18n.t("agent.rotateKey")}
-          </button>
-        </Modal>
-      ) : null}
-    </Section>
-  );
-}
-
-/**
- * How to reach this agent.
- *
- * ⚠️ The built-in chat is listed first and cannot be removed, because it is not a channel somebody
- * configured — it is the runtime itself (ADR-0005 §5). Listing it beside the others, with no
- * delete, is what says "built in, always there" without a sentence explaining it.
- */
-function ContactSection({ node }: { node: Node }) {
-  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
-  // deliberately does not carry `/mcp` (#178).
-  const mcpAddress = agentMcpAddress(node.id);
-  // A relative path is what the page was built with when the runtime shares the origin, and a
-  // relative MCP address is useless to the client that has to dial it. Resolving against the page
-  // makes the copied value absolute wherever it came from.
-  const absolute =
-    typeof window === "undefined" ? mcpAddress : new URL(mcpAddress, window.location.origin).href;
-
-  return (
-    <Section title={i18n.t("agent.contact")} hint={i18n.t("agent.contactHint")}>
-      <ul className="space-y-2">
-        <li className="flex items-center gap-3 rounded-lg border bg-card px-4 py-3">
-          <MessageSquare aria-hidden="true" className="size-4 shrink-0 text-primary" />
-          <span className="min-w-0 flex-1">
-            <span className="block text-sm font-medium">{i18n.t("agent.contactChat")}</span>
-            <span className="block text-xs text-muted-foreground">
-              {i18n.t("agent.contactChatBuiltIn")}
-            </span>
-          </span>
-        </li>
-        <li className="flex items-center gap-3 rounded-lg border bg-card px-4 py-3">
-          <Wrench aria-hidden="true" className="size-4 shrink-0 text-primary" />
-          <span className="min-w-0 flex-1">
-            <span className="block text-sm font-medium">{i18n.t("agent.contactMcp")}</span>
-            <code className="mt-0.5 block truncate text-xs text-muted-foreground">{absolute}</code>
-          </span>
-          <button
-            type="button"
-            onClick={() => {
-              void navigator.clipboard.writeText(absolute).then(() => {
-                setCopied(true);
-                setTimeout(() => setCopied(false), 2_000);
-              });
-            }}
-            className="inline-flex shrink-0 items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            {copied ? (
-              <Check aria-hidden="true" className="size-3.5" />
-            ) : (
-              <Copy aria-hidden="true" className="size-3.5" />
-            )}
-            {i18n.t(copied ? "agent.copied" : "agent.copy")}
-          </button>
-        </li>
-      </ul>
-      {/* ⚠️ Disabled, with the reason behind a hover rather than on the page (#204). A mail contact
-          is deployment configuration (`AGENT_MAILBOXES`) and deliberately not part of the definition
-          — ADR-0005 §4 — so a working button here would write a field the runtime never reads. The
-          span carries the tooltip because a disabled button swallows the pointer events the trigger
-          listens for; the sr-only copy keeps the reason where `aria-describedby` points. */}
-      <div className="mt-3">
-        <TooltipProvider delayDuration={300}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="inline-flex">
-                <button
-                  type="button"
-                  disabled
-                  aria-describedby="agent-contact-add-reason"
-                  className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm disabled:opacity-50"
-                >
-                  <Plus aria-hidden="true" className="size-4" />
-                  {i18n.t("agent.contactAdd")}
-                </button>
-              </span>
-            </TooltipTrigger>
-            <TooltipContent className="max-w-xs">{i18n.t("agent.contactAddReason")}</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-        <p id="agent-contact-add-reason" className="sr-only">
-          {i18n.t("agent.contactAddReason")}
-        </p>
-      </div>
-    </Section>
-  );
-}
-
-// Everything any role accepts, which is what the picker may offer. Derived from the contract's one
-// table rather than written out again — a second list here would drift.
-const pickableKinds: NodeKind[] = [
-  ...new Set(Object.values(AgentReferenceKinds).flat()),
-] as NodeKind[];
-
-/**
- * The role a freshly picked entry starts as — the widest thing that kind can honestly be.
- *
- * A folder starts as search space, the way it always has; a document or a table starts as the
- * system message, which is the only role that reads a single node at all. `null` for a flow and for
- * a kind no role accepts, and the caller then adds nothing rather than inventing a role.
- */
-function defaultRoleFor(kind: PickerKind): AgentReferenceRole | null {
-  if (kind === "flow") return null;
-  return kind === "folder" ? "semantic-context" : (agentReferenceRolesFor(kind)[0] ?? null);
-}
-
-/**
- * What the agent reads, and in which capacity.
- *
- * ⚠️ The role is a select with a visible chevron, not a coloured word. #143 asks for that
- * explicitly, and the reason is that the three roles do very different things — a folder read as
- * the system message becomes instructions, one read as memory is written back to. Something that
- * changes what a document MEANS to an agent must look changeable.
- *
- * ⚠️ Since #255 a row can also be a single document or table, and the role select shows only the
- * roles that kind can carry. `memory` and `semantic-context` stay folders — the agent searches both
- * and writes into one of them — so a document simply never offers them.
- *
- * ⚠️ Memory is searched too, since #259, and the hint beside this section says so in words (#269).
- * The role name alone reads as a write-only notebook, and somebody who believes that files things
- * there that come back at them out of every later search.
- */
-function KnowledgeSection({
-  definition,
-  agent,
-}: {
-  definition: AgentDefinition;
-  agent: AgentDefinitionHandle;
-}) {
-  const i18n = useI18n();
-  const [adding, setAdding] = useState(false);
-
-  function write(references: AgentReference[]) {
-    agent.save.mutate({ ...asDraft(definition), references });
-  }
-
-  return (
-    <Section title={i18n.t("agent.knows")} hint={i18n.t("agent.knowsHint")}>
-      {/* An empty list shows nothing at all — the add button says what belongs here (#204). */}
-      {definition.references.length === 0 ? null : (
-        <ul className="space-y-2">
-          {/* ⚠️ The position IS the identity here: `references` is an ordered array with no ids,
-              the contract permits the same folder twice, and every edit below addresses a row by
-              its index. A key built from the contents alone would collide on exactly the duplicate
-              the array is allowed to hold. */}
-          {definition.references.map((reference, index) => (
-            <ReferenceRow
-              // biome-ignore lint/suspicious/noArrayIndexKey: the position is the identity — see above
-              key={`${reference.nodeId}:${index}`}
-              reference={reference}
-              setRole={(role) =>
-                write(
-                  definition.references.map((current, position) =>
-                    position === index ? { ...current, role } : current,
-                  ),
-                )
-              }
-              remove={() =>
-                write(definition.references.filter((_, position) => position !== index))
-              }
-            />
-          ))}
-        </ul>
-      )}
-      <button
-        type="button"
-        onClick={() => setAdding(true)}
-        className="mt-3 inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-      >
-        <Plus aria-hidden="true" className="size-4" />
-        {i18n.t("agent.addReference")}
-      </button>
-      {adding ? (
-        <Modal title={i18n.t("agent.addReference")} close={() => setAdding(false)}>
-          {/* ⚠️ The picker offers the UNION of what any role accepts, and the row's role select
-              then offers only the roles that accept what was picked (#255). The rule is asked in
-              this direction because the thing is chosen first: a role chosen up front would mean a
-              second dialog before the picker, and a picker that let anything be chosen and refused
-              afterwards is worse than one that never offered it. Either way no illegal pair is
-              reachable — `agentReferenceKinds` is the one list both sides read. */}
-          <EntryPicker
-            kind={pickableKinds}
-            value=""
-            label={i18n.t("agent.pickEntry")}
-            onSelect={(nodeId, entryKind) => {
-              const role = defaultRoleFor(entryKind);
-              if (role === null) return;
-              write([...definition.references, { nodeId, role }]);
-              setAdding(false);
-            }}
-          />
-        </Modal>
-      ) : null}
-    </Section>
-  );
-}
-
-// What each kind looks like at a glance. An `attachment` and an `agent` cannot be picked, but an
-// older definition may still name one, so every kind has a mark rather than a fallback that would
-// draw two different things the same way.
-const KindIcon: Record<NodeKind, typeof Folder> = {
-  folder: Folder,
-  document: FileText,
-  table: Table2,
-  attachment: Paperclip,
-  agent: Bot,
-  board: KanbanSquare,
-};
-
-/**
- * One thing the agent reads, where it sits, and what it counts as.
- *
- * ⚠️ Its own component so the select can be NAMED after the entry. Three rows carrying the same
- * "What this counts as" are three identical controls to anybody listening rather than looking — the
- * name is beside them on screen, and the screen is exactly what that reader does not have. It needs
- * the resolved title, which is why the lookup is a hook rather than a component here.
- *
- * ⚠️ The path is not decoration (#255). Two folders called `Notes` in different corners of the tree
- * were indistinguishable here, and this is the screen on which somebody decides what an agent may
- * read and write into.
- *
- * ⚠️ The kind is a symbol AND a word. The symbol is for the eye and the `sr-only` word is for
- * everyone else — an icon with no text is a row that says "Notes" three times to a screen reader.
- */
-function ReferenceRow({
-  reference,
-  setRole,
-  remove,
-}: {
-  reference: AgentReference;
-  setRole(role: AgentReferenceRole): void;
-  remove(): void;
-}) {
-  const i18n = useI18n();
-  const { title, known, kind, path } = useEntryTitle(reference.nodeId);
-  const Icon = kind === null ? null : KindIcon[kind];
-  // ⚠️ Only the roles this kind can carry, so an impossible pair is never offered — and the current
-  // role is kept in the list whatever it is, or an older definition would open on an empty select
-  // and the first touch of the control would silently change what the agent does.
-  const roles = [
-    ...new Set([
-      ...(kind === null ? AgentReferenceRole.options : agentReferenceRolesFor(kind)),
-      reference.role,
-    ]),
-  ];
-
-  return (
-    <li className="flex flex-wrap items-center gap-3 rounded-lg border bg-card px-4 py-3">
-      {Icon ? <Icon aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" /> : null}
-      <span className={`min-w-0 flex-1${known ? "" : " text-muted-foreground"}`}>
-        <span className="block truncate text-sm">
-          {title}
-          {kind === null ? null : <span className="sr-only"> — {i18n.t(`node.kind.${kind}`)}</span>}
-        </span>
-        {path.length > 0 ? (
-          <span className="block truncate text-xs text-muted-foreground" title={path.join(" / ")}>
-            {path.join(" / ")}
-          </span>
-        ) : null}
-      </span>
-      <Select
-        value={reference.role}
-        onValueChange={(role) => {
-          const parsed = AgentReferenceRole.safeParse(role);
-          if (parsed.success) setRole(parsed.data);
-        }}
-      >
-        <SelectTrigger size="sm" aria-label={i18n.t("agent.roleFor", { title })}>
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          {roles.map((role) => (
-            <SelectItem key={role} value={role}>
-              {i18n.t(`agent.role.${role}`)}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      <button
-        type="button"
-        onClick={remove}
-        aria-label={i18n.t("agent.removeReferenceOf", { title })}
-        className="rounded-md p-2 text-destructive outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-      >
-        <Trash2 aria-hidden="true" className="size-4" />
-      </button>
-    </li>
-  );
-}
-
-function EntryTitle({ entryId, flow = false }: { entryId: string; flow?: boolean }) {
-  const { title, known } = useEntryTitle(entryId, flow);
-  return (
-    <span className={`min-w-0 flex-1 truncate text-sm${known ? "" : " text-muted-foreground"}`}>
-      {title}
-    </span>
-  );
-}
-
-/**
- * What the agent may call: whole MCP servers, given from the signed-in person's own portal
- * connection (D30).
- *
- * ⚠️ What is saved is a SELECTION, never a catalog. The tools behind a server stay a live
- * `tools/list` made with the delegator's token at the moment the agent runs (ADR-0003), so a server
- * listed here is a name, not a promise — losing it in the portal takes it away from the agent with
- * nothing to edit.
- *
- * ⚠️ The notice is not decoration, and it stands whether or not anything is listed yet. A shared
- * agent runs on the DELEGATOR's connection whoever starts it, which is a real widening of who can
- * act as this person. It is no longer a paragraph under the list (#254) — it said the same thing on
- * every visit at the place where somebody was doing something else — but it is not gone either: it
- * is the second half of this section's own hint, so it is in the trigger's accessible name and a
- * keyboard reaches it, and it still stands in the picker where the delegation actually happens.
- */
-function ToolsSection({
-  definition,
-  agent,
-}: {
-  definition: AgentDefinition;
-  agent: AgentDefinitionHandle;
-}) {
-  const { data } = useIntelRouterContext();
-  const i18n = useI18n();
-  const me = useSessionUser();
-  const delegatedBy = definition.tools?.delegatedBy ?? null;
-  const delegatorName = useUserName(delegatedBy);
-  const [adding, setAdding] = useState(false);
-  const servers = useQuery({ queryKey: ["tool-servers"], queryFn: () => data.listToolServers() });
-  const selected = definition.tools?.servers ?? [];
-
-  // ⚠️ Servers, and nothing about who delegates them. The screen has no `delegatedBy` to send and
-  // no business inventing one — Intel writes it from the session, and `AgentDefinitionInput` has no
-  // field it could travel in. This is also what lets an agent with `tools: null`, which is every
-  // freshly created one, receive its first server at all.
-  function write(next: string[]) {
-    agent.save.mutate({ ...asDraft(definition), tools: { servers: next } });
-  }
-
-  const available = (servers.data?.items ?? []).filter(
-    (server) => !selected.includes(server.handle),
-  );
-
-  // Two whole sentences joined, never one sentence built from two fragments: each stays its own
-  // catalog entry and each translates on its own. What the join fixes is only their order.
-  const notice = delegationNotice(i18n, {
-    delegatedBy,
-    viewerId: me?.id ?? null,
-    delegatorName,
-  });
-  const hint = `${i18n.t("agent.toolsHint")} ${notice}`;
-
-  return (
-    <Section title={i18n.t("agent.tools")} hint={hint}>
-      {selected.length === 0 ? null : (
-        <ul className="space-y-2">
-          {selected.map((handle) => {
-            const known = servers.data?.items.find((server) => server.handle === handle);
-            /**
-             * ⚠️ Silence about the question is not a negative answer to it (#350). While the list is
-             * loading — and after a failed read — `servers.data` is `undefined`, and `known` is
-             * then falsy for exactly the same reason as "the portal answered and this handle was
-             * not in it". Drawn as one, a row said `You no longer reach this server` for half a
-             * second on every visit: a statement about a REVOKED permission, and the sentence that
-             * makes somebody re-delegate, sign in to the portal again, or open a ticket.
-             *
-             * It is the same rule `adapters/tools` keeps for `portalConnected` and `reached` on the
-             * server side, where `packages/api/CLAUDE.md` spells it out — a missing field is a
-             * reason to say less, never to refuse more. This is the one place that said it the
-             * other way round.
-             */
-            const answered = servers.isSuccess;
-            return (
-              <li
-                key={handle}
-                className="flex flex-wrap items-center gap-3 rounded-lg border bg-card px-4 py-3"
-              >
-                <Wrench aria-hidden="true" className="size-4 shrink-0 text-primary" />
-                <span
-                  className={`min-w-0 flex-1 truncate text-sm${known ? "" : " text-muted-foreground"}`}
-                >
-                  {known?.name ?? handle}
-                </span>
-                {/* A server the signed-in person no longer reaches still stands in the definition,
-                    and saying so beats drawing it as if it worked. The agent gets nothing from it
-                    either — the catalog is cut against what the delegator reaches. But only once
-                    the portal has actually answered: until then the row carries the handle and
-                    nothing else, which is everything that is known about it. */}
-                <span className="text-xs text-muted-foreground">
-                  {known
-                    ? i18n.t("tools.toolCount", { count: String(known.toolCount) })
-                    : answered
-                      ? i18n.t("agent.toolServerUnavailable")
-                      : null}
-                </span>
-                <button
-                  type="button"
-                  onClick={() => write(selected.filter((current) => current !== handle))}
-                  aria-label={i18n.t("agent.removeToolServerOf", { name: known?.name ?? handle })}
-                  className="rounded-md p-2 text-destructive outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-                >
-                  <Trash2 aria-hidden="true" className="size-4" />
-                </button>
-              </li>
-            );
-          })}
-        </ul>
-      )}
-      <button
-        type="button"
-        onClick={() => setAdding(true)}
-        className="mt-3 inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-      >
-        <Plus aria-hidden="true" className="size-4" />
-        {i18n.t("agent.addTool")}
-      </button>
-      {adding ? (
-        <Modal title={i18n.t("agent.addTool")} close={() => setAdding(false)}>
-          {servers.isPending ? (
-            <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
-          ) : servers.isError ? (
-            <p role="alert" className="text-sm text-destructive">
-              {i18n.t("tools.unreachableHelp")}
-            </p>
-          ) : servers.data?.portalConnected === false ? (
-            <p className="text-sm text-muted-foreground">{i18n.t("agent.toolsNotConnected")}</p>
-          ) : available.length === 0 ? (
-            <p className="text-sm text-muted-foreground">{i18n.t("agent.toolsNoneLeft")}</p>
-          ) : (
-            <ul className="space-y-2">
-              {available.map((server) => (
-                <li key={server.handle}>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      write([...selected, server.handle]);
-                      setAdding(false);
-                    }}
-                    className="flex w-full items-center gap-3 rounded-lg border px-4 py-3 text-left outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-                  >
-                    <Wrench aria-hidden="true" className="size-4 shrink-0 text-primary" />
-                    <span className="min-w-0 flex-1 truncate text-sm">{server.name}</span>
-                    <span className="text-xs text-muted-foreground">
-                      {i18n.t("tools.toolCount", { count: String(server.toolCount) })}
-                    </span>
-                  </button>
-                </li>
-              ))}
-            </ul>
-          )}
-          {/* ⚠️ Here it stays a visible paragraph, unlike the section's own (#254). This is the
-              moment the delegation is actually made, and a consequence that is only reachable by
-              hovering an icon somewhere behind the dialog is a consequence nobody reads. */}
-          <p className="mt-4 text-xs text-muted-foreground">{notice}</p>
-        </Modal>
-      ) : null}
-    </Section>
-  );
-}
-
-/**
- * When the agent acts without being asked.
- *
- * ⚠️ The target is a flow OR a document and nothing else — the contract says so, and the picker is
- * told to offer both rather than being given a free text field. A schedule aimed at something that
- * cannot be run is a run that fails at 3 a.m. with nobody watching.
- */
-function ScheduleSection({
-  definition,
-  agent,
-}: {
-  definition: AgentDefinition;
-  agent: AgentDefinitionHandle;
-}) {
-  const i18n = useI18n();
-  const [adding, setAdding] = useState(false);
-
-  function write(schedules: AgentSchedule[]) {
-    agent.save.mutate({ ...asDraft(definition), schedules });
-  }
-
-  return (
-    <Section title={i18n.t("agent.schedule")} hint={i18n.t("agent.scheduleHint")}>
-      {definition.schedules.length === 0 ? null : (
-        <ul className="space-y-2">
-          {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.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}`)}
-              </span>
-              <button
-                type="button"
-                onClick={() =>
-                  write(definition.schedules.filter((_, position) => position !== index))
-                }
-                aria-label={i18n.t("agent.removeSchedule")}
-                className="rounded-md p-2 text-destructive outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-              >
-                <Trash2 aria-hidden="true" className="size-4" />
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
-      <button
-        type="button"
-        onClick={() => setAdding(true)}
-        className="mt-3 inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-      >
-        <Plus aria-hidden="true" className="size-4" />
-        {i18n.t("agent.addSchedule")}
-      </button>
-      {adding ? (
-        <ScheduleDialog
-          close={() => setAdding(false)}
-          add={(schedule) => {
-            write([...definition.schedules, schedule]);
-            setAdding(false);
-          }}
-        />
-      ) : null}
-    </Section>
-  );
-}
-
-function ScheduleDialog({ close, add }: { close(): void; add(schedule: AgentSchedule): void }) {
-  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 (
-    <Modal title={i18n.t("agent.addSchedule")} close={close}>
-      <form
-        className="space-y-4"
-        onSubmit={(event) => {
-          event.preventDefault();
-          if (target && cron.trim()) add({ cron: cron.trim(), timezone, target });
-        }}
-      >
-        <label className="block text-sm font-medium">
-          {i18n.t("agent.cron")}
-          <input
-            required
-            value={cron}
-            onChange={(event) => setCron(event.target.value)}
-            aria-describedby="agent-cron-hint"
-            className="mt-2 w-full rounded-md border bg-background px-3 py-2 font-mono text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          />
-          <span
-            id="agent-cron-hint"
-            className="mt-1 block text-xs font-normal text-muted-foreground"
-          >
-            {i18n.t("agent.cronHint")}
-          </span>
-        </label>
-        {/* ⚠️ The hint is behind the ⓘ (#249) and ALSO `sr-only` below. The two are not a
-            duplicate: the tooltip's content is in the accessibility tree only while it is open, so
-            the field would lose the description `aria-describedby` promises the moment the sentence
-            became a hover. Route (1) of the ticket, and the cheaper of the two — nothing has to be
-            argued about a description that is simply still there. */}
-        <div className="flex items-center gap-1.5">
-          <label className="block text-sm font-medium" htmlFor="agent-schedule-timezone">
-            {i18n.t("agent.scheduleTimezone")}
-          </label>
-          <SectionHint hint={i18n.t("agent.scheduleTimezoneHint")} />
-        </div>
-        <TimezoneCombobox
-          id="agent-schedule-timezone"
-          value={timezone}
-          onChange={setTimezone}
-          describedBy="agent-timezone-hint"
-        />
-        <span id="agent-timezone-hint" className="sr-only">
-          {i18n.t("agent.scheduleTimezoneHint")}
-        </span>
-        <EntryPicker
-          kind="document"
-          flows
-          value={target?.id ?? ""}
-          label={i18n.t("agent.scheduleTarget")}
-          onSelect={(entryId, entryKind: PickerKind) => {
-            if (entryKind !== "document" && entryKind !== "flow") return;
-            setTarget({ id: entryId, kind: entryKind });
-          }}
-        />
-        <button
-          type="submit"
-          disabled={!target || cron.trim().length === 0}
-          className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-        >
-          {i18n.t("common.create")}
-        </button>
-      </form>
-    </Modal>
-  );
-}
-
-/**
- * Which model does the thinking, what it costs per million tokens — and what this agent has
- * actually cost with it.
- *
- * ⚠️ Changing it writes a new definition version like every other edit here; the runtime picks the
- * provider up on its next read (its definition cache is 60 seconds).
- *
- * ⚠️ The figures come from intel's catalog since #257 and no longer from a table in this bundle.
- * The table was a copy that aged silently, and the reason it stayed one — "a token does not belong
- * in a SPA" — was correct and is exactly why the fetch moved to intel rather than into this
- * component.
- *
- * ⚠️ The two numbers beside each other are a price and a bill, and they must not read as one thing.
- * A price per million tokens answers "what does this model cost"; the thirty-day figure answers
- * "what has this agent cost", it is money already spent on runs that used whatever model was chosen
- * AT THE TIME, and the sentence under it says so. Without that, switching the model would make the
- * old figure read as a forecast for the new one.
- */
-function ModelSection({
-  definition,
-  agent,
-  agentId,
-}: {
-  definition: AgentDefinition;
-  agent: AgentDefinitionHandle;
-  agentId: string;
-}) {
-  const i18n = useI18n();
-  const catalog = useModelCatalog();
-  const costs = useAgentCosts(agentId);
-  const models = selectableModels(definition.model);
-  const current = modelFacts(definition.model, catalog.data?.entries);
-  const spent = costWindow(costs.data, 30);
-
-  return (
-    <Section title={i18n.t("agent.model")} hint={i18n.t("agent.modelHint")}>
-      <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, catalog.data?.entries);
-              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>
-      {/* ⚠️ Said once, under the row, and only when something on screen actually came off the
-          table. A silent fallback to typed-out prices is the state this feature replaced. */}
-      {current.stale ? (
-        <p className="mt-2 text-xs text-muted-foreground">{i18n.t("agent.modelFiguresStale")}</p>
-      ) : null}
-      <AgentSpend
-        spent={spent}
-        status={costs.data?.status}
-        partial={costs.data?.partial ?? false}
-      />
-    </Section>
-  );
-}
-
-/**
- * What this agent has actually cost in the last thirty days (#257).
- *
- * ⚠️ Written in the past tense and labelled with the models that produced it, because it is the
- * only thing standing between "$0.23" and a reader taking it for what the model above will cost.
- * The models are named from the gateway's own log lines, so a period spent on a different model
- * says so by itself.
- *
- * ⚠️ Nothing is rendered where the figure is not known. The Runs tab is where the reason belongs —
- * it is the screen about runs — and repeating "no read token" beside a model select would be an
- * error message in the middle of an unrelated decision.
- *
- * ⚠️ `partial` is the one exception to that division, and it has to be repeated here. It does not
- * say the figure is missing — it says the figure shown IS NOT THE TOTAL, because the gateway read
- * stopped at its page limit. A lower bound printed as if it were a sum is the same lie as a zero
- * printed as if it were free, and this is where somebody reads it while deciding what to spend.
- * An agent on a frequent schedule crosses that limit within thirty days as a matter of course; the
- * seven-day figure practically never does, which makes the case rarer and therefore easier to miss.
- */
-function AgentSpend({
-  spent,
-  status,
-  partial,
-}: {
-  spent: AgentCostWindow | null;
-  status: AgentCosts["status"] | undefined;
-  partial: boolean;
-}) {
-  const i18n = useI18n();
-  if (status !== "read" || !spent) return null;
-
-  return (
-    <p className="mt-3 text-sm">
-      <span className="font-medium">
-        {i18n.t("agent.costsSpent", {
-          amount: formatCost(spent.cost, i18n.locale),
-          days: String(spent.days),
-        })}
-      </span>
-      {spent.models.length > 0 ? (
-        <span className="text-muted-foreground">
-          {" "}
-          {i18n.t("agent.costsSpentWith", { models: spent.models.join(", ") })}
-        </span>
-      ) : null}
-      <span className="mt-0.5 block text-xs text-muted-foreground">
-        {i18n.t("agent.costsSpentPast")}
-      </span>
-      {/* The Runs tab's own wording, deliberately the same key: two different sentences for one
-          fact would leave a reader wondering whether they are the same fact. */}
-      {partial ? (
-        <span className="mt-0.5 block text-xs text-muted-foreground">
-          {i18n.t("agent.costPartial")}
-        </span>
-      ) : null}
-    </p>
-  );
-}
-
-// Brand first, then the model's own name — "Claude Sonnet 5", not "claude-sonnet-5 · anthropic". The
-// provider stays in the definition; it names who serves the model, which is not what anybody reads a
-// list of models for.
-function ModelName({ facts }: { facts: ModelFacts }) {
-  return (
-    <span className="truncate">
-      <span className="font-medium">{facts.brand}</span> {facts.name}
-    </span>
-  );
-}
-
-// The two numbers a model is actually chosen on. Absent for a model this installation has no figures
-// for — the row then simply ends, because a made-up zero would be a false statement about money.
-function ModelFigures({ facts }: { facts: ModelFacts }) {
-  const i18n = useI18n();
-  if (facts.contextTokens === null || facts.price === null) return null;
-
-  return (
-    <span className="text-xs whitespace-nowrap text-muted-foreground">
-      {i18n.t("agent.modelFigures", {
-        context: formatContextTokens(facts.contextTokens),
-        input: formatPricePerMillion(facts.price.inputPerMillion, i18n.locale),
-        output: formatPricePerMillion(facts.price.outputPerMillion, i18n.locale),
-      })}
-    </span>
-  );
-}