@anchrd/intel-ui 0.14.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {
@@ -29,7 +29,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@anchrd/intel-contract": "^0.8.0",
+    "@anchrd/intel-contract": "^0.9.0",
     "@assistant-ui/react": "^0.15.4",
     "@assistant-ui/react-ai-sdk": "^1.4.4",
     "@blocknote/core": "^0.52.1",
@@ -60,6 +60,7 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^24.13.3",
     "@types/react": "^19.2.17",

package/src/agent/agent-calendar/agent-calendar.tsx

@@ -2,6 +2,8 @@ import type { AgentDefinition } from "@anchrd/intel-contract";
 import { CalendarClock } from "lucide-react";
 import { nextCronFires } from "@/agent/agent-cron/agent-cron.ts";
 import { useI18n } from "@/i18n/i18n-context.tsx";
+import { SectionHint } from "@/section-hint/section-hint.tsx";
+import { useChosenTimezone } from "@/timezone/timezone-context.tsx";
 
 // How far ahead one schedule is shown. Enough to recognise a rhythm — daily, weekly, the first of
 // the month — and not so much that the page becomes a year planner nobody asked for.
@@ -19,6 +21,15 @@ const PerSchedule = 5;
  * looking would be a different hour from the one the agent keeps — a difference that only ever
  * surfaces as "it ran at the wrong time". And not one zone for the whole list either, because two
  * schedules of one agent may sit in different ones.
+ *
+ * ⚠️ The reader's own reading is ADDED beside it, never in its place (#256). The schedule's time is
+ * the leading one because it is the reason the agent runs; the second is a reading aid, smaller and
+ * behind it. A calendar that converted everything to the reader would have undone #228 with a
+ * feature request.
+ *
+ * ⚠️ And only for a zone somebody SET. `useChosenTimezone` answers `null` where nothing was chosen,
+ * and then this screen is exactly what it was — no browser guess dressed up as "your time", and no
+ * second time on every row for a reader who never asked for one.
  */
 export function AgentCalendar({
   definition,
@@ -30,6 +41,7 @@ export function AgentCalendar({
   now: Date;
 }) {
   const i18n = useI18n();
+  const mine = useChosenTimezone();
   const schedules = definition?.schedules ?? [];
   const upcoming = schedules
     .flatMap((schedule) =>
@@ -56,15 +68,33 @@ export function AgentCalendar({
     return format.format(at);
   };
 
+  // Shorter than the leading time on purpose: it is a reading aid, not a second headline. The date
+  // rides along because a schedule in Tokyo is regularly the reader's previous day.
+  const myFormat =
+    mine === null
+      ? null
+      : new Intl.DateTimeFormat(i18n.locale, {
+          dateStyle: "medium",
+          timeStyle: "short",
+          timeZone: mine,
+        });
+
   return (
     <section
       aria-label={i18n.t("agent.calendar")}
       className="min-h-0 flex-1 overflow-y-auto px-6 py-5"
     >
-      <p className="text-xs text-muted-foreground">{i18n.t("agent.calendarZones")}</p>
-      {schedules.length === 0 ? (
-        <p className="mt-4 text-sm text-muted-foreground">{i18n.t("agent.scheduleEmpty")}</p>
-      ) : upcoming.length === 0 ? (
+      {/* ⚠️ Behind the ⓘ rather than as a paragraph (#256): it was the longest text on the tab and
+          it explained, on every visit, a rule the list itself shows. The heading is what the hint
+          now hangs off — the same shape the profile's sections have. */}
+      <div className="flex items-center gap-1.5">
+        <h3 className="text-sm font-semibold">{i18n.t("agent.calendar")}</h3>
+        <SectionHint hint={i18n.t("agent.calendarZones")} />
+      </div>
+      {/* ⚠️ An agent with no schedule shows an empty calendar and nothing else (#254). The sentence
+          that used to stand here described the emptiness the reader is already looking at; the two
+          other states below are different, because each of them is a fact the list cannot show. */}
+      {schedules.length === 0 ? null : upcoming.length === 0 ? (
         // Schedules exist and none of them fires: every expression is unusable. A different answer
         // from "no schedules", because it is a different problem and needs a different fix.
         <p role="alert" className="mt-4 text-sm text-destructive">
@@ -84,6 +114,14 @@ export function AgentCalendar({
               {/* The zone stands next to the time, not once above the list: without it the same
                   wall-clock hour from two schedules reads as a duplicate. */}
               <span className="text-xs text-muted-foreground">{entry.schedule.timezone}</span>
+              {/* ⚠️ Nothing at all where the two zones agree (#256). For the ordinary reader — one
+                  zone, their own — the row must not grow a second time saying what the first
+                  already says. */}
+              {myFormat && mine !== entry.schedule.timezone ? (
+                <span className="text-xs text-muted-foreground">
+                  {i18n.t("agent.calendarYourTime", { when: myFormat.format(entry.at) })}
+                </span>
+              ) : null}
               <code className="rounded bg-muted px-2 py-0.5 text-xs">{entry.schedule.cron}</code>
               <span className="text-xs text-muted-foreground">
                 {i18n.t(`node.kind.${entry.schedule.target.kind}`)}

package/src/agent/agent-costs/agent-costs.ts

@@ -0,0 +1,95 @@
+import type { AgentCosts, AgentCostWindow } from "@anchrd/intel-contract";
+import { type UseQueryResult, useQuery } from "@tanstack/react-query";
+import type { AgentRun, AgentUsage } from "@/data/agent-runtime/agent-runtime.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+/**
+ * What this agent has cost, out of Cloudflare's AI Gateway log (#251).
+ *
+ * ⚠️ `retry: false`, and the run list beside it keeps its retries. These figures ENRICH a screen
+ * that is already answered — the runs and their tokens come from the runtime and never depended on
+ * Cloudflare — and a retry is paused while the tab is unfocused (#212), so a list that waited on
+ * this one could sit on "Loading" for as long as the reader is looking elsewhere.
+ */
+export function useAgentCosts(agentId: string): UseQueryResult<AgentCosts> {
+  const { data } = useIntelRouterContext();
+  return useQuery({
+    queryKey: ["agent-costs", agentId],
+    queryFn: () => data.getAgentCosts(agentId),
+    retry: false,
+  });
+}
+
+export function costWindow(costs: AgentCosts | undefined, days: number): AgentCostWindow | null {
+  return costs?.windows.find((window) => window.days === days) ?? null;
+}
+
+/**
+ * What one run cost, or why that is not known.
+ *
+ * ⚠️ Four outcomes and not two, because "nothing" and "not known" are different answers and only one
+ * of them is about money. A gateway that was never configured, a gateway that did not answer, and a
+ * run the gateway has no line for all mean "not known" — and rendering any of them as `$0.00` says
+ * the agent was free, which is the failure this ticket exists to remove.
+ */
+export type RunCost =
+  | { kind: "known"; cost: number; calls: number }
+  | { kind: "not_configured" }
+  | { kind: "unreadable" }
+  | { kind: "missing" };
+
+export function runCost(costs: AgentCosts | undefined, runId: string): RunCost {
+  if (!costs || costs.status === "unreadable") return { kind: "unreadable" };
+  if (costs.status === "not_configured") return { kind: "not_configured" };
+  const found = costs.runs.find((run) => run.runId === runId);
+  // ⚠️ A run with no line is `missing`, never zero. Every run before #251 is one, and so is any run
+  // whose window has scrolled past the read's page limit.
+  return found ? { kind: "known", cost: found.cost, calls: found.calls } : { kind: "missing" };
+}
+
+/**
+ * What one run consumed, or why that is not known either.
+ *
+ * ⚠️ All four counters at zero is read as "the provider reported nothing", NOT as "no tokens". A
+ * completed model call always consumed input tokens, so four zeroes cannot honestly mean zero — and
+ * Workers AI reports no usage at all, so every Workers AI run looks exactly like this. Showing them
+ * as `0 in, 0 out` would put a false and very reassuring number on the screen.
+ */
+export function runUsage(run: AgentRun): AgentUsage | null {
+  const usage = run.usage;
+  if (!usage) return null;
+  const total =
+    usage.inputTokens +
+    usage.outputTokens +
+    usage.cacheCreationInputTokens +
+    usage.cacheReadInputTokens;
+  return total > 0 ? usage : null;
+}
+
+/**
+ * Money, with enough decimals to still be money.
+ *
+ * ⚠️ Four decimals below a dollar, not two. A single model call costs $0.0565 — at two decimals it
+ * is "$0.06", and two runs that differ by half again read identically. Above a dollar the extra
+ * digits are noise and are dropped.
+ *
+ * ⚠️ A cost that is real but smaller than the smallest digit shown gets a "<", never a rounded
+ * "$0.00". The whole point of the figure is that nothing is silently free.
+ */
+export function formatCost(dollars: number, locale: string): string {
+  const digits = Math.abs(dollars) >= 1 ? 2 : 4;
+  const format = (value: number) =>
+    value.toLocaleString(locale, {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+      maximumFractionDigits: digits,
+    });
+  if (dollars > 0 && dollars < 0.0001) return `< ${format(0.0001)}`;
+  return format(dollars);
+}
+
+/** Token counts, short. 56 473 is "56.5K" — the exact figure helps nobody and costs the eye a line. */
+export function formatTokens(tokens: number, locale: string): string {
+  return tokens.toLocaleString(locale, { notation: "compact", maximumFractionDigits: 1 });
+}

package/src/agent/agent-delegation-notice/agent-delegation-notice.ts

@@ -0,0 +1,48 @@
+import type { I18n } from "@/i18n/i18n.types.ts";
+
+export interface DelegationReading {
+  /** Whose portal connection the agent's tools run on — `null` while nothing is delegated. */
+  delegatedBy: string | null;
+  /** The signed-in person, or `null` while the session has not been read yet. */
+  viewerId: string | null;
+  /** The delegator's display name, or `null` where this browser cannot resolve it (#261). */
+  delegatorName: string | null;
+}
+
+/**
+ * Whose connection the tools run on, said so that it stays true for whoever is reading (#258).
+ *
+ * ⚠️ "Anyone who may run this agent acts on YOUR connection" was the whole sentence until #258, and
+ * it is wrong for everybody except the delegator — on the one line in the product where somebody
+ * learns whose access is being spent. It survives only where it is the strongest true form:
+ *
+ *   nothing delegated   nobody has given anything away yet, and whoever saves the tool selection
+ *                       next becomes the delegator. For the reader, that is them.
+ *   the reader's own    they ARE the delegator, so "your connection" says it harder than their name
+ *                       would. Two readings rather than one are worth it for exactly this: the
+ *                       sentence is about a consequence for the reader, and "your" is the word that
+ *                       carries a consequence.
+ *   somebody else's     the name. And where the name cannot be resolved — which is most ids today,
+ *                       because Intel has no user directory (#261) — a sentence that names nobody,
+ *                       never an invented name and never silence. WHOSE access is spent may be
+ *                       unknown; THAT somebody else's is spent must not be.
+ *
+ * ⚠️ One catalog key per reading, each a whole sentence with the name as a parameter. A sentence
+ * glued together from "acts on" + name + "'s connection" bakes an English possessive into the code,
+ * and no other language would get to put it anywhere else.
+ *
+ * ⚠️ An empty `delegatedBy` reads as "somebody else's", not as "yours". The runtime has that case
+ * for an archived agent and a definition it could not read (`packages/api/src/tools/tools.ts:39`),
+ * and it is the one case where being wrong in the reader's favour is worst.
+ */
+export function delegationNotice(i18n: I18n, reading: DelegationReading): string {
+  const { delegatedBy, viewerId, delegatorName } = reading;
+  if (delegatedBy === null) return i18n.t("agent.toolsDelegationNotice");
+  if (delegatedBy.length > 0 && delegatedBy === viewerId) {
+    return i18n.t("agent.toolsDelegationNotice");
+  }
+  if (delegatorName !== null) {
+    return i18n.t("agent.toolsDelegationNoticeBy", { name: delegatorName });
+  }
+  return i18n.t("agent.toolsDelegationNoticeSomebody");
+}

package/src/agent/agent-entry-title/agent-entry-title.ts

@@ -1,7 +1,24 @@
+import type { NodeKind } from "@anchrd/intel-contract";
 import { useQuery } from "@tanstack/react-query";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
+export interface EntryTitle {
+  title: string;
+  known: boolean;
+  /** The kind of node this is, or `null` for a flow and for anything not available to the reader. */
+  kind: NodeKind | null;
+  /**
+   * The folders it is filed in, outermost first — empty at the top of the tree (#255).
+   *
+   * ⚠️ Only the ancestors the reader may see. The walk stops at the first one that is missing from
+   * the graph, so a partial path is possible and is the honest answer: the graph holds exactly what
+   * this reader may know about, and inventing a step would name a folder to somebody who may not
+   * know it exists (#41).
+   */
+  path: string[];
+}
+
 /**
  * The name behind an id, read from the lists the tree already loads.
  *
@@ -13,7 +30,7 @@ import { useIntelRouterContext } from "@/router/router-context.ts";
  * Its own module because two screens need it — the profile's references and schedules, and the
  * "run now" menu in the page head, which has to name the targets it offers.
  */
-export function useEntryTitle(entryId: string, flow = false): { title: string; known: boolean } {
+export function useEntryTitle(entryId: string, flow = false): EntryTitle {
   const { data } = useIntelRouterContext();
   const i18n = useI18n();
   const graph = useQuery({
@@ -22,10 +39,34 @@ export function useEntryTitle(entryId: string, flow = false): { title: string; k
     enabled: !flow,
   });
   const flows = useQuery({ queryKey: ["flows"], queryFn: () => data.listFlows(), enabled: flow });
-  const found = flow
-    ? flows.data?.items.find((item) => item.id === entryId)
-    : graph.data?.nodes.find((node) => node.id === entryId);
-  if (found) return { title: found.title, known: true };
-  const pending = flow ? flows.isPending : graph.isPending;
-  return { title: i18n.t(pending ? "common.loading" : "agent.unknownEntry"), known: false };
+  if (flow) {
+    const found = flows.data?.items.find((item) => item.id === entryId);
+    if (found) return { title: found.title, known: true, kind: null, path: [] };
+    return { ...unknown(i18n, flows.isPending), kind: null };
+  }
+
+  const nodes = graph.data?.nodes ?? [];
+  const found = nodes.find((node) => node.id === entryId);
+  if (!found) return { ...unknown(i18n, graph.isPending), kind: null };
+
+  // Upwards from the node, then reversed: outermost folder first, which is how a path reads.
+  const path: string[] = [];
+  const seen = new Set<string>([found.id]);
+  let parentId = found.parentId;
+  while (parentId !== null && !seen.has(parentId)) {
+    seen.add(parentId);
+    const parent = nodes.find((node) => node.id === parentId);
+    if (!parent) break;
+    path.unshift(parent.title);
+    parentId = parent.parentId;
+  }
+  return { title: found.title, known: true, kind: found.kind, path };
+}
+
+function unknown(i18n: ReturnType<typeof useI18n>, pending: boolean) {
+  return {
+    title: i18n.t(pending ? "common.loading" : "agent.unknownEntry"),
+    known: false,
+    path: [] as string[],
+  };
 }

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

@@ -1,7 +1,17 @@
+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";
 
@@ -12,9 +22,15 @@ import { useIntelRouterContext } from "@/router/router-context.ts";
  * 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 and, when it failed, what stopped it. It does not carry the answer it
- * produced: 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.
+ * ⚠️ 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();
@@ -24,6 +40,7 @@ export function AgentLog({ agentId }: { agentId: string }) {
     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">
@@ -46,30 +63,125 @@ export function AgentLog({ agentId }: { agentId: string }) {
         <p className="text-sm text-muted-foreground">{i18n.t("agent.logEmpty")}</p>
       ) : null}
       {runs.data && runs.data.items.length > 0 ? (
-        <ul className="space-y-2">
-          {runs.data.items.map((run) => (
-            <RunRow
-              key={run.id}
-              agentId={agentId}
-              run={run}
-              open={openRunId === run.id}
-              toggle={() => setOpenRunId(openRunId === run.id ? null : run.id)}
-            />
-          ))}
-        </ul>
+        <>
+          <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;
 }) {
@@ -99,6 +211,10 @@ function RunRow({
             <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. */}
@@ -107,22 +223,52 @@ function RunRow({
           ) : null}
         </span>
       </button>
-      {open ? <RunDetail agentId={agentId} runId={run.id} /> : null}
+      {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, runId }: { agentId: string; runId: string }) {
+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}