@anchrd/intel-ui 0.13.0 → 0.15.0

package/src/agent/agent.tsx

@@ -11,10 +11,12 @@ import { AgentProfile } from "@/agent/agent-profile/agent-profile.tsx";
 import {
   agentAccessDenied,
   agentKeyMissing,
+  agentProblemDetail,
   agentRuntimeMissing,
   agentStateKey,
   useAgentState,
 } from "@/agent/agent-state/agent-state.ts";
+import { agentStatus, statusDotClass } from "@/agent/agent-status-dot/agent-status-dot.ts";
 import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
 import {
   DropdownMenu,
@@ -23,9 +25,11 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { useCapabilities } from "@/hooks/use-capabilities.ts";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
+import { useUserName } from "@/user-name/user-name.ts";
 
 const tabs = ["profile", "chat", "calendar", "log"] as const;
 type Tab = (typeof tabs)[number];
@@ -66,6 +70,9 @@ export function AgentPanel({ node }: { node: Node }) {
       <ActionSlot name="title-meta">
         <AgentStatus agentId={node.id} definition={agent.definition} />
       </ActionSlot>
+      <ActionSlot name="title-byline">
+        <AgentByline node={node} />
+      </ActionSlot>
       <ActionSlot name="title-actions">
         <AgentActions agentId={node.id} definition={agent.definition} />
       </ActionSlot>
@@ -108,6 +115,35 @@ export function AgentPanel({ node }: { node: Node }) {
   );
 }
 
+/**
+ * Who made this agent — the first question anybody asks about one that works in folders with rights
+ * of its own (#258).
+ *
+ * ⚠️ Provenance and nothing else. An agent does NOT run with its creator's rights: it has a Gate
+ * Application of its own (D29), the assertion's subject is the agent, and Intel's grants on the
+ * tree decide what a run may read and write. Only the TOOLS run on a human's connection, and that
+ * is `delegatedBy` — a different field, in a different place on this page, on purpose. So this line
+ * says "by", never "runs as", and it carries no permission wording that would imply otherwise.
+ *
+ * ⚠️ `ownerId` and not the current version's `createdBy`: the owner is written once, from the actor
+ * who created the node, and never again — while `createdBy` moves to whoever saved last, which is a
+ * different fact and belongs to a different question.
+ *
+ * ⚠️ Unresolvable means NO line, not "by —". Most ids are unresolvable today (see `useUserName`),
+ * and an em dash under every foreign agent's name would be a row of furniture saying nothing.
+ */
+function AgentByline({ node }: { node: Node }) {
+  const i18n = useI18n();
+  const name = useUserName(node.ownerId);
+  if (name === null) return null;
+
+  return (
+    <span className="block truncate text-xs text-muted-foreground" title={name}>
+      {i18n.t("agent.createdBy", { name })}
+    </span>
+  );
+}
+
 /**
  * What somebody without `agents/run` sees instead of the chat and the log.
  *
@@ -141,11 +177,20 @@ function NoRuntime() {
 }
 
 /**
- * Whether the agent is working, whether it is switched off, and when it next will be.
+ * Whether the agent is working, whether it is switched off, and when it next will be — as a dot
+ * beside the name, and only when there is something to say (#253).
+ *
+ * ⚠️ A dot and not a sentence, and NOT ALWAYS a dot. What stood here was "Idle · no scheduled run"
+ * — the absence of a state, spelled out twice, at the most prominent place on the page. `null` from
+ * `agentStatus` is the ordinary case and renders nothing at all.
+ *
+ * ⚠️ The colour is never the only information. The state is the trigger's accessible NAME, the dot
+ * itself is `aria-hidden`, and the shapes differ as well as the hues — see `statusDotClass`. A
+ * reader who cannot separate two greys, and every reader who is listening rather than looking, gets
+ * the same answer as everybody else.
  *
  * ⚠️ "Running" is read from the runtime's own run list, and its absence is NOT read as "idle" — a
- * runtime that cannot be reached says nothing about what the agent is doing, and a status line that
- * quietly reported "idle" for an unreachable runtime would be wrong exactly when it matters.
+ * runtime that cannot be reached says nothing about what the agent is doing.
  *
  * ⚠️ "Next run" is derived from the cron expressions rather than asked. The runtime arms one alarm
  * and publishes neither it nor a schedule, so this is the same reading `AgentCalendar` does — and
@@ -164,22 +209,21 @@ export function AgentStatus({
   const runs = useQuery({
     queryKey: ["agent-runs", agentId],
     queryFn: () => data.listAgentRuns(agentId),
-    // A status line is not worth a red screen: the runtime being unreachable is reported by the
+    // A status dot is not worth a red screen: the runtime being unreachable is reported by the
     // Log tab, which is the view that is actually about runs.
     retry: false,
   });
-  const running = runs.data?.items.some((run) => run.status === "running") ?? false;
-  const paused = state.data?.paused ?? false;
   const next = nextRunAt(definition, new Date());
-  const parts = [
-    runs.isError
-      ? i18n.t("agent.statusUnknown")
-      : paused
-        ? i18n.t("agent.statusPaused")
-        : running
-          ? i18n.t("agent.statusRunning")
-          : i18n.t("agent.statusIdle"),
-    paused
+  const status = agentStatus({
+    runsUnreadable: runs.isError,
+    runs: runs.data?.items ?? [],
+    paused: state.data?.paused ?? false,
+    scheduled: next !== null,
+  });
+  if (status === null) return null;
+
+  const when =
+    status.kind === "paused"
       ? i18n.t("agent.pausedNoRuns")
       : next
         ? // ⚠️ Formatted in the SCHEDULE's zone and named with it (#228), not in the reader's.
@@ -194,9 +238,38 @@ export function AgentStatus({
             }).format(next.at),
             zone: next.timezone,
           })
-        : i18n.t("agent.noNextRun"),
-  ];
-  return <span>{parts.join(" · ")}</span>;
+        : null;
+  // ⚠️ A past instant, so it is read in the reader's own zone and names none: unlike a schedule,
+  // which fires in the zone it carries, a finished run happened at one moment for everybody.
+  const last =
+    status.lastRunAt === null
+      ? null
+      : i18n.t("agent.lastRun", {
+          when: new Intl.DateTimeFormat(i18n.locale, {
+            dateStyle: "medium",
+            timeStyle: "short",
+          }).format(new Date(status.lastRunAt)),
+        });
+  const label = [i18n.t(`agent.status.${status.kind}`), last, when].filter(Boolean).join(" · ");
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        {/* A real button, so the dot is reached by Tab and opened without a pointer. */}
+        <TooltipTrigger
+          type="button"
+          aria-label={label}
+          className="inline-flex items-center rounded-full p-1 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <span
+            aria-hidden="true"
+            className={`block size-2.5 rounded-full ${statusDotClass[status.kind]}`}
+          />
+        </TooltipTrigger>
+        <TooltipContent className="max-w-xs">{label}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
 }
 
 /**
@@ -245,7 +318,7 @@ export function AgentActions({
   const reason = denied
     ? i18n.t("agent.notPermitted")
     : state.isError
-      ? i18n.t("agent.statusUnknown")
+      ? i18n.t("agent.status.unknown")
       : null;
   const runReason =
     reason ??
@@ -258,51 +331,87 @@ export function AgentActions({
 
   return (
     <span className="flex items-center gap-2">
-      {/* ⚠️ `sr-only` rather than `hidden` where the bar is narrow. A disabled control whose reason
-          is `display: none` has no reason at all for a screen reader — the element it points at is
-          not in the accessibility tree. */}
+      {/* ⚠️ `sr-only` and no longer beside the buttons (#253): the reason belongs in the tooltip of
+          the control it disables, not as a sentence in the title line. But it stays IN THE
+          ACCESSIBILITY TREE — `hidden` or `display: none` would leave `aria-describedby` pointing at
+          nothing, and Radix puts the tooltip's own content there only while it is open. So the words
+          are here for the keyboard and on the hover for the pointer, and never in the bar. */}
       {runReason ? (
-        <span
-          id="agent-actions-reason"
-          className="text-xs text-muted-foreground max-sm:sr-only sm:inline"
-        >
+        <span id="agent-actions-reason" className="sr-only">
           {runReason}
         </span>
       ) : null}
       {/* ⚠️ An agent with no key in its Durable Object fails every run the same way forever, so
           "try again" is advice that cannot work (#200). The one refusal with a repair path says
-          what the repair is, and names where it lives — the profile, not this bar (D29). */}
+          what the repair is, and names where it lives — the profile, not this bar (D29).
+
+          ⚠️ Every other refusal is shown in its OWN words where it brought any (#201). `Resume`
+          fails for reasons only the runtime knows, and "that did not work" turns each of them into
+          the same shrug — which is how a resume that could not arm the alarm looked like one that
+          simply needed another click. */}
       {failure ? (
         <span role="alert" className="text-xs text-destructive max-sm:sr-only sm:inline">
-          {i18n.t(agentKeyMissing(failure) ? "agent.keyMissing" : "agent.actionFailed")}
+          {agentKeyMissing(failure)
+            ? i18n.t("agent.keyMissing")
+            : (agentProblemDetail(failure) ?? i18n.t("agent.actionFailed"))}
         </span>
       ) : null}
-      <button
-        type="button"
-        onClick={() => toggle.mutate()}
-        disabled={reason !== null || state.isPending || toggle.isPending}
-        aria-busy={toggle.isPending}
-        {...(reason ? { "aria-describedby": "agent-actions-reason" } : {})}
-        className="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-      >
-        {paused ? (
-          <Play aria-hidden="true" className="size-4" />
-        ) : (
-          <Pause aria-hidden="true" className="size-4" />
-        )}
-        {i18n.t(paused ? "agent.resume" : "agent.pause")}
-      </button>
-      <RunNow
-        targets={targets}
-        disabled={runReason !== null || runNow.isPending}
-        busy={runNow.isPending}
-        describedBy={runReason ? "agent-actions-reason" : undefined}
-        start={(target) => runNow.mutate(target)}
-      />
+      <WhyDisabled reason={reason}>
+        <button
+          type="button"
+          onClick={() => toggle.mutate()}
+          disabled={reason !== null || state.isPending || toggle.isPending}
+          aria-busy={toggle.isPending}
+          {...(reason ? { "aria-describedby": "agent-actions-reason" } : {})}
+          className="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+        >
+          {paused ? (
+            <Play aria-hidden="true" className="size-4" />
+          ) : (
+            <Pause aria-hidden="true" className="size-4" />
+          )}
+          {i18n.t(paused ? "agent.resume" : "agent.pause")}
+        </button>
+      </WhyDisabled>
+      <WhyDisabled reason={runReason}>
+        <RunNow
+          targets={targets}
+          disabled={runReason !== null || runNow.isPending}
+          busy={runNow.isPending}
+          describedBy={runReason ? "agent-actions-reason" : undefined}
+          start={(target) => runNow.mutate(target)}
+        />
+      </WhyDisabled>
     </span>
   );
 }
 
+/**
+ * The reason a control is shut, on its own hover instead of beside it (#253).
+ *
+ * ⚠️ The wrapping span is not decoration. A disabled button fires no pointer events, so a trigger
+ * bound directly to it never opens — the same trick the profile's disabled "Add contact" needs, and
+ * the reason both keep an `sr-only` paragraph for `aria-describedby` beside the tooltip.
+ *
+ * ⚠️ The wrapper is ALWAYS here, and only the content comes and goes. A reason appears and vanishes
+ * as the state query settles, and a version of this that returned the bare child when there was
+ * nothing to say re-created the button on every such change — which throws away its focus and, in a
+ * test, leaves whoever grabbed it holding a node that is no longer on screen. Without content Radix
+ * opens nothing at all, so the empty case costs a span and shows no bubble.
+ */
+function WhyDisabled({ reason, children }: { reason: string | null; children: React.ReactNode }) {
+  return (
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="inline-flex">{children}</span>
+        </TooltipTrigger>
+        {reason === null ? null : <TooltipContent className="max-w-xs">{reason}</TooltipContent>}
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
 /**
  * ⚠️ One schedule runs straight away; several open a menu. A button that silently picked the first
  * of three targets would run the wrong thing at a moment somebody chose deliberately, and a menu in

package/src/app/app-tree/app-tree.tsx

@@ -476,8 +476,14 @@ export function AppTree() {
           : "opacity-40";
 
     return (
-      <SidebarMenuItem key={entry.id} className="group/row">
-        {/* ⚠️ The colouring sits on the ROW, not on the button inside it — the difference the
+      <SidebarMenuItem key={entry.id}>
+        {/* ⚠️ `group/row` belongs HERE and not on the `SidebarMenuItem` above, which is what #252
+            was: the item also holds the open sub-level, and `group-hover/row` is a DESCENDANT
+            selector — every plus further down matched the ancestor's hover, so pointing at one
+            folder lit up its whole open subtree. This div holds one row and none of its children,
+            which is the only element on which "the row is hovered" means that one row.
+
+            ⚠️ The colouring sits on the ROW, not on the button inside it — the difference the
             ticket is about. It used to hang on `SidebarMenuButton`, whose siblings the plus and this
             menu are, so the grey stopped short of them: two icons standing outside the very row they
             operate, with a pale strip left over on the right. Taken from gate, where the same
@@ -486,7 +492,7 @@ export function AppTree() {
             The button keeps its own hover and active fill switched off rather than doubled, so the
             row shows one surface instead of two overlapping ones. */}
         <div
-          className={`flex items-center gap-0.5 rounded-md pr-1 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground ${
+          className={`group/row flex items-center gap-0.5 rounded-md pr-1 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground ${
             isActive ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground" : ""
           }`}
         >

package/src/app/settings-dialog/settings-dialog.tsx

@@ -14,9 +14,10 @@ import {
 } from "@/components/ui/select";
 import { useI18n, useLanguage } from "@/i18n/i18n-context.tsx";
 import { languageName } from "@/i18n/i18n-languages/i18n-languages.ts";
+import { SectionHint } from "@/section-hint/section-hint.tsx";
 import { type ThemeChoice, ThemeChoices } from "@/theme/theme.ts";
 import { useTheme } from "@/theme/theme-context.tsx";
-import { availableTimezones, browserTimezone } from "@/timezone/timezone.ts";
+import { TimezoneCombobox } from "@/timezone/timezone-combobox/timezone-combobox.tsx";
 import { useTimezoneSelection } from "@/timezone/timezone-context.tsx";
 
 // The settings that belong to the person rather than to the installation: language, appearance and
@@ -38,18 +39,6 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
   const theme = useTheme();
   const timezone = useTimezoneSelection();
 
-  // ⚠️ The active zone is put in front of the list unless it is already there, and that is not
-  // belt-and-braces: `Intl.supportedValuesOf("timeZone")` returns only CANONICAL IANA names, and
-  // "UTC" is not among them (it is an alias of Etc/UTC). A reader whose browser reports "UTC" —
-  // every CI machine, plenty of containers and servers — would otherwise get a Select whose value
-  // matches no item, and Radix renders that as an EMPTY field. Found by CI, not by the test.
-  //
-  // The same line covers the engine without `supportedValuesOf` at all: the list is empty and the
-  // reader still has their own zone to look at.
-  const zones = availableTimezones();
-  const current = timezone?.current ?? browserTimezone();
-  const options = zones.includes(current) ? zones : [current, ...zones];
-
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-md">
@@ -106,24 +95,26 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
           ) : null}
           {timezone ? (
             <div className="grid gap-2">
-              <label className="text-sm font-medium" htmlFor="settings-timezone">
-                {i18n.t("settings.timezone")}
-              </label>
-              <Select value={timezone.current} onValueChange={timezone.select}>
-                <SelectTrigger id="settings-timezone" className="w-full">
-                  <SelectValue />
-                </SelectTrigger>
-                {/* Several hundred zones: the list scrolls, and Radix keeps the selected one in
-                    view when it opens. */}
-                <SelectContent className="max-h-72">
-                  {options.map((zone) => (
-                    <SelectItem key={zone} value={zone}>
-                      {zone.replace(/_/g, " ")}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <p className="text-xs text-muted-foreground">{i18n.t("settings.timezoneHint")}</p>
+              {/* ⚠️ Behind the ⓘ (#249), and the SAME component the agent profile uses — three
+                  lines of prose under a dropdown explained something once and then pushed the
+                  dialog apart on every open. The `sr-only` copy below is not a duplicate: Radix
+                  puts a tooltip's content in the accessibility tree only while it is open, so the
+                  field would silently lose the description `aria-describedby` points at. */}
+              <div className="flex items-center gap-1.5">
+                <label className="text-sm font-medium" htmlFor="settings-timezone">
+                  {i18n.t("settings.timezone")}
+                </label>
+                <SectionHint hint={i18n.t("settings.timezoneHint")} />
+              </div>
+              <TimezoneCombobox
+                id="settings-timezone"
+                value={timezone.current}
+                onChange={timezone.select}
+                describedBy="settings-timezone-hint"
+              />
+              <p id="settings-timezone-hint" className="sr-only">
+                {i18n.t("settings.timezoneHint")}
+              </p>
             </div>
           ) : null}
         </div>

package/src/components/ui/popover.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { Popover as PopoverPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/src/data/agent-runtime/agent-runtime.ts

@@ -15,6 +15,25 @@ export const AgentRunTarget = z.object({
 });
 export type AgentRunTarget = z.infer<typeof AgentRunTarget>;
 
+/**
+ * What one run consumed at the provider, as the runtime recorded it (#250).
+ *
+ * ⚠️ `inputTokens` is the part that was NOT cached, not the size of the prompt — the prompt is all
+ * four fields added together. Anything that shows the first as "the prompt" will report a run that
+ * suddenly shrank to a twentieth of the previous one.
+ *
+ * ⚠️ Optional here, and the optionality is the feature. A run recorded before #250 carries no
+ * numbers at all, and that is a different fact from "used no tokens" — the row shows an empty state
+ * rather than four zeroes, because a zero reads as "cost nothing".
+ */
+export const AgentUsage = z.object({
+  inputTokens: z.number(),
+  outputTokens: z.number(),
+  cacheCreationInputTokens: z.number(),
+  cacheReadInputTokens: z.number(),
+});
+export type AgentUsage = z.infer<typeof AgentUsage>;
+
 export const AgentRun = z.object({
   id: z.string(),
   trigger: z.enum(["chat", "schedule", "mail", "task", "manual"]),
@@ -24,6 +43,13 @@ export const AgentRun = z.object({
   finishedAt: z.string().nullable(),
   steps: z.number(),
   error: z.string().nullable(),
+  // ⚠️ `.nullish()` on both, not `.nullable()`. The runtime is a separate deployment and may be a
+  // version BEHIND this page: a run list from a runtime without #250/#251 has no such field at all,
+  // and a required one would blank the whole Log tab over a missing number.
+  usage: AgentUsage.nullish(),
+  // Which model did the thinking, as `provider:model`, written into the run rather than looked up:
+  // switching the model in the profile must not relabel every past run (#251).
+  model: z.string().nullish(),
 });
 export type AgentRun = z.infer<typeof AgentRun>;
 

package/src/data/intel-data-provider/intel-data-provider.ts

@@ -1,4 +1,5 @@
 import {
+  AgentCosts,
   AgentKeyRotated,
   AppendTableRowsInput,
   AppendTableRowsResult,
@@ -24,6 +25,7 @@ import {
   ListFlowRunsInput,
   ListFlowsInput,
   ListNodesInput,
+  ModelCatalog,
   Node,
   NodeAgent,
   NodeDocument,
@@ -203,6 +205,16 @@ export function createIntelDataProvider(
     async getCapabilities() {
       return await request("/capabilities", IntelCapabilities);
     },
+    /**
+     * What the offered models cost and hold (#257).
+     *
+     * ⚠️ Asked of intel, never of Cloudflare. The account endpoint needs a token and a token does
+     * not belong in a SPA — which was the stated reason the price table stayed hard-coded in this
+     * package until now. The figures cross the wire; the credential does not.
+     */
+    async listModels() {
+      return await request("/models", ModelCatalog);
+    },
     listNodes,
     async listTreeChildren(parentId) {
       // Both sides of one folder, asked for in parallel and merged here rather than on the server:
@@ -517,6 +529,14 @@ export function createIntelDataProvider(
     async listAgentRuns(agentId) {
       return await request(agentRuntimePath(agentId, "/runs"), AgentRunList);
     },
+    /**
+     * ⚠️ The one path under `/agents/:agentId` that intel answers ITSELF (#251). The runtime has no
+     * idea what anything costs — the figures come out of Cloudflare's AI Gateway log, read with a
+     * token that lives in intel and never in the browser.
+     */
+    async getAgentCosts(agentId) {
+      return await request(agentRuntimePath(agentId, "/costs"), AgentCosts);
+    },
     async getAgentRun(agentId, runId) {
       return await request(
         agentRuntimePath(agentId, `/runs/${encodeURIComponent(runId)}`),

package/src/data/intel-data-provider/intel-data-provider.types.ts

@@ -1,4 +1,5 @@
 import type {
+  AgentCosts,
   AgentKeyRotated,
   AgentScheduleTarget,
   AppendTableRowsInput,
@@ -25,6 +26,7 @@ import type {
   ListFlowRunsInput,
   ListFlowsInput,
   ListNodesInput,
+  ModelCatalog,
   Node,
   NodeAgent,
   NodeDocument,
@@ -86,6 +88,14 @@ export interface IntelDataProvider {
   // What this installation is equipped to do (#190) — deployment facts, not the caller's
   // permissions. `/session` stays identity only on purpose; this is the separate question.
   getCapabilities(): Promise<IntelCapabilities>;
+  /**
+   * What the offered models cost and how much they hold (#257).
+   *
+   * ⚠️ Answered by intel, which asks Cloudflare with a token this page never sees. Each entry says
+   * whether its figures were read live or came off intel's written-out table, and the select says so
+   * too — a silently stale price is the state this replaced, with more code.
+   */
+  listModels(): Promise<ModelCatalog>;
   listNodes(input?: Partial<ListNodesInput>): Promise<NodeList>;
   // One level of the shared tree: the documents and the flows filed in the same folder, in one
   // sorted list. Per level rather than recursive, so opening a folder is what costs a request.
@@ -190,6 +200,15 @@ export interface IntelDataProvider {
   // CORS. What that costs is that a 403 here means "you may not drive agents", which is a state the
   // agent page renders as an answer rather than as a failure.
   listAgentRuns(agentId: string): Promise<AgentRunList>;
+  /**
+   * What this agent has actually cost, out of Cloudflare's AI Gateway log (#251).
+   *
+   * ⚠️ Unlike its neighbours this one is answered by INTEL and not forwarded to the runtime, which
+   * knows nothing about money. ⚠️ Read `status` before the numbers: empty with `not_configured` or
+   * `unreadable` means "not known", and rendering it like "cost nothing" turns an outage into a
+   * saving.
+   */
+  getAgentCosts(agentId: string): Promise<AgentCosts>;
   getAgentRun(agentId: string, runId: string): Promise<AgentRunDetail>;
   // Whether the agent is switched off. Runtime state, deliberately not part of the definition: a
   // definition is versioned, shared and read into model context (#179).

package/src/entry-picker/entry-picker.tsx

@@ -32,7 +32,12 @@ export function EntryPicker({
   label,
 }: {
   // Which kind of node may be chosen. `null` offers every kind — what the Flow step uses.
-  kind: NodeKind | null;
+  //
+  // ⚠️ A list is not a convenience (#255). An agent's system message takes a folder, a document or
+  // a table, and the alternative — one picker per kind, or a picker that lets everything be chosen
+  // and refuses afterwards — is either three dialogs or a rejection after the fact. What may be
+  // picked has to be the same question the caller can answer in one place.
+  kind: NodeKind | NodeKind[] | null;
   // ⚠️ Flows are a second list, not a kind of node, so they are asked for rather than assumed. An
   // agent's schedule may aim at either (#143); every other caller wants nodes only and pays for no
   // second request.
@@ -75,10 +80,16 @@ export function EntryPicker({
   }, [graph.data, flowList.data, flows]);
   // A flow is offered exactly when it was asked for — it is only in `nodes` at all in that case,
   // and saying so here keeps "may this be picked" one rule rather than two that must agree.
-  const pickable = useMemo(
-    () => (entry: PickerEntry) => entry.kind === "flow" || kind === null || entry.kind === kind,
-    [kind],
-  );
+  //
+  // ⚠️ The array is rebuilt from `kind` on every render when a caller passes a literal, so the set
+  // is keyed by its contents rather than by identity — a `useMemo` on the array itself would be a
+  // memo that never hits.
+  const wanted = Array.isArray(kind) ? kind.join(",") : kind;
+  const pickable = useMemo(() => {
+    const allowed = wanted === null ? null : new Set(wanted.split(","));
+    return (entry: PickerEntry) =>
+      entry.kind === "flow" || allowed === null || allowed.has(entry.kind);
+  }, [wanted]);
   const eligible = useMemo(() => nodes.filter(pickable), [nodes, pickable]);
 
   // Searching looks at every eligible node wherever it sits; browsing looks at one level. The two

package/src/hooks/use-model-catalog.ts

@@ -0,0 +1,26 @@
+import type { ModelCatalog } from "@anchrd/intel-contract";
+import { type UseQueryResult, useQuery } from "@tanstack/react-query";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+/**
+ * What the offered models cost and how much they hold, asked of intel once an hour at most (#257).
+ *
+ * ⚠️ The caching is the point of the hook and not an optimisation. Before this, the figures were a
+ * table in the bundle; the ticket's own condition for taking that away is that the replacement is
+ * not "one fetch every time somebody opens the select". Prices move a few times a year, so an hour
+ * is generous in the direction that matters.
+ *
+ * ⚠️ `retry: false`, like the tools screen's grouping query (#212). A React Query retry is PAUSED
+ * while the tab is unfocused, so a select that waited on a retried query could sit unusable for as
+ * long as the reader is looking elsewhere. This query only ENRICHES the select — the model can be
+ * chosen without it — so it fails fast and the row simply shows no figures.
+ */
+export function useModelCatalog(): UseQueryResult<ModelCatalog> {
+  const { data } = useIntelRouterContext();
+  return useQuery({
+    queryKey: ["model-catalog"],
+    queryFn: () => data.listModels(),
+    staleTime: 60 * 60 * 1_000,
+    retry: false,
+  });
+}