@anchrd/intel-ui 0.8.8 → 0.9.1

package/README.md

@@ -1,6 +1,6 @@
 # @anchrd/intel-ui
 
-The Intel browser application: Knowledge, Flows and Tools for the
+The Intel browser application: Intelligence, Flows and Tools for the
 [`@anchrd/intel-api`](https://www.npmjs.com/package/@anchrd/intel-api) server.
 
 This package ships **source, not a bundle**. You compile it yourself so your own theme, logo and
@@ -45,7 +45,7 @@ silently producing a half-branded application.
 
 ## What is inside
 
-Vite, React, TanStack Router and Query, with shadcn components. Knowledge uses BlockNote for editing
+Vite, React, TanStack Router and Query, with shadcn components. The node editor uses BlockNote
 and Sigma for the graph, Flows uses React Flow, and Tools presents the discovered MCP catalog.
 Route-level code splitting keeps both editors out of the initial bundle.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.8.8",
+  "version": "0.9.1",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {
@@ -29,7 +29,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@anchrd/intel-contract": "^0.4.0",
+    "@anchrd/intel-contract": "^0.5.0",
+    "@assistant-ui/react": "^0.15.4",
+    "@assistant-ui/react-ai-sdk": "^1.4.4",
     "@blocknote/core": "^0.52.1",
     "@blocknote/react": "^0.52.1",
     "@blocknote/shadcn": "^0.52.1",
@@ -43,6 +45,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "colorjs.io": "^0.7.1",
+    "fflate": "^0.8.3",
     "graphology": "^0.26.0",
     "lucide-react": "^1.25.0",
     "radix-ui": "^1.6.7",

package/src/agent/agent-avatar/agent-avatar.tsx

@@ -0,0 +1,34 @@
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
+/**
+ * The first letters of the words in a name, at most two.
+ *
+ * ⚠️ `Intl.Segmenter` rather than `slice(0, 1)`: an agent may be called "Émile" or "🛰 Radar", and
+ * a code unit is not a character. Slicing a surrogate pair in half puts a replacement glyph where
+ * the initial should be.
+ */
+export function initialsOf(title: string): string {
+  const words = title.trim().split(/\s+/).filter(Boolean).slice(0, 2);
+  const segmenter = new Intl.Segmenter();
+  return words
+    .map((word) => [...segmenter.segment(word)][0]?.segment ?? "")
+    .join("")
+    .toLocaleUpperCase();
+}
+
+/**
+ * Who the agent is, as a picture.
+ *
+ * ⚠️ Decorative on purpose: the name it abbreviates stands right beside it in the title line, so a
+ * screen reader that announced both would read the same name twice — once spelled out letter by
+ * letter. The picture is the redundant half here, not the text.
+ */
+export function AgentAvatar({ title }: { title: string }) {
+  return (
+    <Avatar aria-hidden="true" className="size-9">
+      <AvatarFallback className="bg-primary/10 text-sm font-semibold text-primary">
+        {initialsOf(title)}
+      </AvatarFallback>
+    </Avatar>
+  );
+}

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

@@ -0,0 +1,79 @@
+import type { AgentDefinition } from "@anchrd/intel-contract";
+import { CalendarClock } from "lucide-react";
+import { nextCronFires } from "@/agent/agent-cron/agent-cron.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+// 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.
+const PerSchedule = 5;
+
+/**
+ * What this agent is going to do, and when.
+ *
+ * ⚠️ Derived, never asked. The runtime arms one alarm at a time and publishes neither it nor a
+ * calendar, so these times are this page's own reading of the same cron expressions — by the same
+ * rules, pinned by `agent-cron.unit.ts` against the runtime's test.
+ *
+ * ⚠️ UTC, and it says so. The definition carries no timezone, so the runtime fires in UTC; showing
+ * these in the reader's local zone would be a different hour from the one the agent keeps, and the
+ * two would only be noticed when a schedule "ran at the wrong time".
+ */
+export function AgentCalendar({
+  definition,
+  now,
+}: {
+  definition: AgentDefinition | null;
+  // Handed in rather than read from the clock, so the view is a function of its input and a test
+  // does not have to travel in time to assert on it.
+  now: Date;
+}) {
+  const { i18n } = useIntelRouterContext();
+  const schedules = definition?.schedules ?? [];
+  const upcoming = schedules
+    .flatMap((schedule) =>
+      nextCronFires(schedule.cron, now, PerSchedule).map((at) => ({ at, schedule })),
+    )
+    .sort((left, right) => left.at.getTime() - right.at.getTime());
+
+  const format = new Intl.DateTimeFormat(i18n.locale, {
+    dateStyle: "full",
+    timeStyle: "short",
+    timeZone: "UTC",
+  });
+
+  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.calendarUtc")}</p>
+      {schedules.length === 0 ? (
+        <p className="mt-4 text-sm text-muted-foreground">{i18n.t("agent.scheduleEmpty")}</p>
+      ) : 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">
+          {i18n.t("agent.calendarUnreadable")}
+        </p>
+      ) : (
+        <ol className="mt-4 space-y-2">
+          {upcoming.map((entry) => (
+            <li
+              key={`${entry.schedule.cron}:${entry.schedule.target.id}:${entry.at.toISOString()}`}
+              className="flex flex-wrap items-center gap-3 rounded-lg border bg-card px-4 py-3 text-sm"
+            >
+              <CalendarClock aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
+              <time dateTime={entry.at.toISOString()} className="font-medium">
+                {format.format(entry.at)}
+              </time>
+              <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}`)}
+              </span>
+            </li>
+          ))}
+        </ol>
+      )}
+    </section>
+  );
+}

package/src/agent/agent-chat/agent-chat.tsx

@@ -0,0 +1,116 @@
+import {
+  AssistantRuntimeProvider,
+  ComposerPrimitive,
+  ErrorPrimitive,
+  MessagePrimitive,
+  ThreadPrimitive,
+} from "@assistant-ui/react";
+import { AssistantChatTransport, useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { ArrowDown, Send } from "lucide-react";
+import { useMemo } from "react";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+/**
+ * The built-in chat, against the agent runtime's own SSE endpoint.
+ *
+ * ⚠️ assistant-ui rather than a hand-rolled reader, and the reason is the wire: the runtime already
+ * frames its answer as a Vercel AI UI message stream (`x-vercel-ai-ui-message-stream: v1`) with
+ * `text-delta`, `tool-input-available` and `tool-output-available` parts. That format has a client,
+ * and writing a second one would mean re-implementing tool-call rendering and stream recovery to
+ * arrive at the same place.
+ *
+ * ⚠️ The endpoint is on INTEL, which forwards the turn to the runtime with the caller's own Gate
+ * token (#178). That is what `credentials: "include"` is carrying: the intel session cookie, on the
+ * origin this page came from. The runtime still demands `agents/run` — it just hears it from intel
+ * rather than from a bearer this page would have had to hold.
+ */
+export function AgentChat({ agentId }: { agentId: string }) {
+  const { data, i18n } = useIntelRouterContext();
+  // ⚠️ Built once per agent. A transport rebuilt on every render restarts the runtime underneath
+  // assistant-ui and takes the open thread with it.
+  const transport = useMemo(
+    () =>
+      new AssistantChatTransport({
+        api: data.agentChatApi(agentId),
+        credentials: "include",
+      }),
+    [data, agentId],
+  );
+  const runtime = useChatRuntime({ transport });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <ThreadPrimitive.Root className="flex min-h-0 flex-1 flex-col bg-card">
+        <ThreadPrimitive.Viewport
+          autoScroll
+          className="relative flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-6 py-5"
+        >
+          <ThreadPrimitive.Empty>
+            <p className="m-auto max-w-md text-center text-sm text-muted-foreground">
+              {i18n.t("agent.chatEmpty")}
+            </p>
+          </ThreadPrimitive.Empty>
+          <ThreadPrimitive.Messages components={{ UserMessage, AssistantMessage }} />
+          <ThreadPrimitive.ScrollToBottom asChild>
+            <button
+              type="button"
+              aria-label={i18n.t("agent.chatScrollDown")}
+              className="sticky bottom-0 z-10 mx-auto inline-flex size-8 items-center justify-center rounded-full border bg-background shadow-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:invisible"
+            >
+              <ArrowDown aria-hidden="true" className="size-4" />
+            </button>
+          </ThreadPrimitive.ScrollToBottom>
+        </ThreadPrimitive.Viewport>
+        <ComposerPrimitive.Root className="flex items-end gap-2 border-t px-6 py-4">
+          <ComposerPrimitive.Input
+            rows={1}
+            autoFocus
+            aria-label={i18n.t("agent.chatInput")}
+            placeholder={i18n.t("agent.chatPlaceholder")}
+            className="max-h-40 min-h-9 flex-1 resize-none rounded-md border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          />
+          <ComposerPrimitive.Send asChild>
+            <button
+              type="button"
+              aria-label={i18n.t("agent.chatSend")}
+              className="inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+            >
+              <Send aria-hidden="true" className="size-4" />
+            </button>
+          </ComposerPrimitive.Send>
+        </ComposerPrimitive.Root>
+      </ThreadPrimitive.Root>
+    </AssistantRuntimeProvider>
+  );
+}
+
+function UserMessage() {
+  return (
+    <MessagePrimitive.Root className="flex justify-end">
+      <div className="max-w-[80%] rounded-2xl bg-primary px-4 py-2 text-sm text-primary-foreground">
+        <MessagePrimitive.Parts />
+      </div>
+    </MessagePrimitive.Root>
+  );
+}
+
+function AssistantMessage() {
+  return (
+    <MessagePrimitive.Root className="flex justify-start">
+      <div className="max-w-[80%] space-y-2 text-sm">
+        <MessagePrimitive.Parts />
+        {/* The runtime reports a failed turn as an `error` part on a 200 stream, so a refusal shows
+            up here rather than as a request that failed. It is worded by the runtime, which words
+            it to be read (see `packages/agent`'s guard on model-facing errors). */}
+        <MessagePrimitive.Error>
+          <ErrorPrimitive.Root
+            role="alert"
+            className="rounded-md border border-destructive/40 px-3 py-2 text-destructive"
+          >
+            <ErrorPrimitive.Message />
+          </ErrorPrimitive.Root>
+        </MessagePrimitive.Error>
+      </div>
+    </MessagePrimitive.Root>
+  );
+}

package/src/agent/agent-cron/agent-cron.ts

@@ -0,0 +1,132 @@
+/**
+ * When a five-field cron expression fires next, in UTC.
+ *
+ * ⚠️ This is a second copy of `packages/agent/src/schedule/cron/cron.ts`, on purpose and with a
+ * cost. The runtime imports nothing from the contract and this package cannot import a Worker
+ * package, so there is no third place the matcher could live without inventing one for two callers.
+ * What must never happen is the two disagreeing: a calendar that promises 08:00 while the alarm
+ * fires at 09:00 is worse than a calendar that says nothing. `agent-cron.unit.ts` therefore pins
+ * exactly the cases the runtime's own test pins — including the day-field OR rule, which is the
+ * one an independent reimplementation gets wrong.
+ *
+ * ⚠️ UTC, with no timezone option, because the definition carries none: `schedules[{cron, target}]`
+ * and nothing else. Reading these in local time here would show a person a different hour from the
+ * one the agent runs at.
+ */
+interface Field {
+  values: Set<number>;
+  restricted: boolean;
+}
+
+function parseField(source: string, min: number, max: number): Field | null {
+  const values = new Set<number>();
+  let restricted = false;
+  for (const part of source.split(",")) {
+    const [range, stepText] = part.split("/");
+    if (range === undefined || range === "") return null;
+    const step = stepText === undefined ? 1 : Number(stepText);
+    if (!Number.isInteger(step) || step < 1) return null;
+    let from: number;
+    let to: number;
+    if (range === "*") {
+      from = min;
+      to = max;
+      if (step !== 1) restricted = true;
+    } else if (range.includes("-")) {
+      const [fromText, toText] = range.split("-");
+      from = Number(fromText);
+      to = Number(toText);
+      restricted = true;
+    } else {
+      from = Number(range);
+      to = from;
+      restricted = true;
+    }
+    if (!Number.isInteger(from) || !Number.isInteger(to) || from < min || to > max || from > to) {
+      return null;
+    }
+    for (let value = from; value <= to; value += step) values.add(value);
+  }
+  return values.size > 0 ? { values, restricted } : null;
+}
+
+export interface CronExpression {
+  minute: Field;
+  hour: Field;
+  dayOfMonth: Field;
+  month: Field;
+  dayOfWeek: Field;
+}
+
+export function parseCron(expression: string): CronExpression | null {
+  const parts = expression.trim().split(/\s+/);
+  if (parts.length !== 5) return null;
+  // Sunday is 0 in the standard and 7 in several dialects; both are accepted and normalised below.
+  const [minute, hour, dayOfMonth, month, dayOfWeek] = parts as [
+    string,
+    string,
+    string,
+    string,
+    string,
+  ];
+  const fields = {
+    minute: parseField(minute, 0, 59),
+    hour: parseField(hour, 0, 23),
+    dayOfMonth: parseField(dayOfMonth, 1, 31),
+    month: parseField(month, 1, 12),
+    dayOfWeek: parseField(dayOfWeek, 0, 7),
+  };
+  if (!fields.minute || !fields.hour || !fields.dayOfMonth || !fields.month || !fields.dayOfWeek) {
+    return null;
+  }
+  if (fields.dayOfWeek.values.has(7)) fields.dayOfWeek.values.add(0);
+  return fields as CronExpression;
+}
+
+export function matches(cron: CronExpression, date: Date): boolean {
+  if (!cron.minute.values.has(date.getUTCMinutes())) return false;
+  if (!cron.hour.values.has(date.getUTCHours())) return false;
+  if (!cron.month.values.has(date.getUTCMonth() + 1)) return false;
+  const dayOfMonth = cron.dayOfMonth.values.has(date.getUTCDate());
+  const dayOfWeek = cron.dayOfWeek.values.has(date.getUTCDay());
+  // ⚠️ The standard's oddity, kept on purpose: when both day fields are restricted they are ORed,
+  // not ANDed. "0 0 1 * 1" is the first of the month AND every Monday, and a matcher that ANDs them
+  // silently lists about four times fewer runs than the agent will actually make.
+  if (cron.dayOfMonth.restricted && cron.dayOfWeek.restricted) return dayOfMonth || dayOfWeek;
+  return dayOfMonth && dayOfWeek;
+}
+
+// One year of minutes is the search bound. An expression that matches nothing within a year — "31st
+// of February" — has no next fire time, and saying so beats stepping forever.
+const MaxMinutesAhead = 366 * 24 * 60;
+
+export function nextCronFire(expression: string, after: Date): Date | null {
+  const cron = parseCron(expression);
+  if (!cron) return null;
+  // Strictly after: a schedule that just fired must not match the same minute again.
+  const start = Math.floor(after.getTime() / 60_000) * 60_000 + 60_000;
+  for (let step = 0; step < MaxMinutesAhead; step += 1) {
+    const candidate = new Date(start + step * 60_000);
+    if (matches(cron, candidate)) return candidate;
+  }
+  return null;
+}
+
+/**
+ * The next `count` fire times of one expression.
+ *
+ * ⚠️ Stepping from each hit rather than scanning once, so an expression that fires every minute
+ * costs `count` iterations and not a year of them. An unparseable or never-matching expression
+ * yields an empty list — the calendar says "nothing" rather than guessing.
+ */
+export function nextCronFires(expression: string, after: Date, count: number): Date[] {
+  const fires: Date[] = [];
+  let cursor = after;
+  for (let index = 0; index < count; index += 1) {
+    const next = nextCronFire(expression, cursor);
+    if (!next) break;
+    fires.push(next);
+    cursor = next;
+  }
+  return fires;
+}

package/src/agent/agent-definition/agent-definition.ts

@@ -0,0 +1,64 @@
+import type { AgentDefinition, NodeAgent } from "@anchrd/intel-contract";
+import {
+  type UseMutationResult,
+  type UseQueryResult,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { nextCronFires } from "@/agent/agent-cron/agent-cron.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+export const agentKey = (nodeId: string) => ["agent", nodeId] as const;
+
+export interface AgentDefinitionHandle {
+  query: UseQueryResult<NodeAgent>;
+  definition: AgentDefinition | null;
+  save: UseMutationResult<NodeAgent, Error, AgentDefinition>;
+}
+
+/**
+ * One agent's definition, and the one way to change it.
+ *
+ * ⚠️ Every edit writes a whole new definition version — there is no field-level update, by design
+ * (ADR-0005): a definition is one immutable document, and what a run read is meant to stay
+ * readable afterwards. So each section on the profile hands over the definition it wants next,
+ * whole, and the version it was read from travels as `baseVersionId`. Somebody else's parallel
+ * change is then a refusal instead of a silent overwrite.
+ */
+export function useAgentDefinition(nodeId: string): AgentDefinitionHandle {
+  const { data } = useIntelRouterContext();
+  const queryClient = useQueryClient();
+  const query = useQuery({ queryKey: agentKey(nodeId), queryFn: () => data.getAgent(nodeId) });
+  const save = useMutation({
+    mutationFn: async (definition: AgentDefinition) =>
+      await data.saveAgentDefinition({
+        nodeId,
+        baseVersionId: query.data?.version?.id ?? null,
+        definition,
+        idempotencyKey: crypto.randomUUID(),
+      }),
+    // The answer carries the new version, so the cache is set from it rather than refetched: the
+    // next save needs that id as its `baseVersionId`, and a round trip would leave a window in
+    // which it is still the old one.
+    onSuccess: (saved) => queryClient.setQueryData(agentKey(nodeId), saved),
+  });
+  return { query, definition: query.data?.definition ?? null, save };
+}
+
+/**
+ * When this agent next does something on its own, across all of its schedules.
+ *
+ * ⚠️ Derived from the cron expressions, never asked. The runtime arms one alarm at a time and does
+ * not publish it, so this is a reading of the same expressions by the same rules — see
+ * `agent-cron.ts` for why that duplication is pinned by a test rather than left to agree by luck.
+ */
+export function nextRunAt(definition: AgentDefinition | null, now: Date): Date | null {
+  const fires = (definition?.schedules ?? []).flatMap(
+    (schedule) => nextCronFires(schedule.cron, now, 1)[0] ?? [],
+  );
+  return fires.reduce<Date | null>(
+    (earliest, fire) => (earliest === null || fire < earliest ? fire : earliest),
+    null,
+  );
+}

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

@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+/**
+ * The name behind an id, read from the lists the tree already loads.
+ *
+ * ⚠️ An entry the reader may not see is absent from both lists, and this then answers "not
+ * available to you" rather than a raw id or an invented title. Deliberately the same answer a
+ * reference to something deleted gets: the two must not be distinguishable, or the row would
+ * confirm that a document exists to somebody who may not know it (#41).
+ *
+ * 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 } {
+  const { data, i18n } = useIntelRouterContext();
+  const graph = useQuery({
+    queryKey: ["node-graph"],
+    queryFn: () => data.getNodeGraph(),
+    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 };
+}

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

@@ -0,0 +1,159 @@
+import { useQuery } from "@tanstack/react-query";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useState } from "react";
+import type { AgentRun } from "@/data/agent-runtime/agent-runtime.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+/**
+ * What this agent has done, newest first.
+ *
+ * ⚠️ Read from the RUNTIME, not from intel: runs live in the agent's own Durable Object and are
+ * trimmed there. So this list is short by design and has no paging — the runtime answers at most a
+ * hundred runs and keeps no more.
+ *
+ * ⚠️ A run says what it did 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.
+ */
+export function AgentLog({ agentId }: { agentId: string }) {
+  const { data, i18n } = useIntelRouterContext();
+  const [openRunId, setOpenRunId] = useState<string | null>(null);
+  const runs = useQuery({
+    queryKey: ["agent-runs", agentId],
+    queryFn: () => data.listAgentRuns(agentId),
+  });
+
+  return (
+    <section aria-label={i18n.t("agent.log")} className="min-h-0 flex-1 overflow-y-auto px-6 py-5">
+      {runs.isPending ? (
+        <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+      ) : null}
+      {runs.isError ? (
+        <div role="alert" className="space-y-3 text-sm">
+          <p className="text-destructive">{i18n.t("agent.logFailed")}</p>
+          <button
+            type="button"
+            onClick={() => void runs.refetch()}
+            className="rounded-md border px-3 py-2 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {i18n.t("common.retry")}
+          </button>
+        </div>
+      ) : null}
+      {runs.data && runs.data.items.length === 0 ? (
+        <p className="text-sm text-muted-foreground">{i18n.t("agent.logEmpty")}</p>
+      ) : null}
+      {runs.data && runs.data.items.length > 0 ? (
+        <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>
+      ) : null}
+    </section>
+  );
+}
+
+function RunRow({
+  agentId,
+  run,
+  open,
+  toggle,
+}: {
+  agentId: string;
+  run: AgentRun;
+  open: boolean;
+  toggle(): void;
+}) {
+  const { i18n } = useIntelRouterContext();
+  const failed = run.status === "failed";
+  const Chevron = open ? ChevronDown : ChevronRight;
+  return (
+    <li className="rounded-lg border bg-card">
+      <button
+        type="button"
+        onClick={toggle}
+        aria-expanded={open}
+        className="flex w-full items-start gap-3 rounded-lg px-4 py-3 text-left outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <Chevron aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+        <span className="min-w-0 flex-1">
+          <span className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
+            <span
+              className={`rounded-full border px-2 py-0.5 text-xs ${failed ? "border-destructive/40 text-destructive" : "text-muted-foreground"}`}
+            >
+              {i18n.t(`runs.status.${run.status}`)}
+            </span>
+            <time dateTime={run.startedAt}>
+              {new Date(run.startedAt).toLocaleString(i18n.locale)}
+            </time>
+            <span className="text-muted-foreground">{i18n.t(`agent.trigger.${run.trigger}`)}</span>
+            <span className="text-muted-foreground">
+              {i18n.t("agent.steps", { count: run.steps })}
+            </span>
+          </span>
+          {/* The failure in the words the failure itself used. Summarising it into "failed" is what
+              the status pill already says, and it is never the sentence that helps. */}
+          {run.error ? (
+            <span className="mt-1.5 block text-sm text-destructive">{run.error}</span>
+          ) : null}
+        </span>
+      </button>
+      {open ? <RunDetail agentId={agentId} runId={run.id} /> : null}
+    </li>
+  );
+}
+
+// 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 }) {
+  const { data, i18n } = useIntelRouterContext();
+  const detail = useQuery({
+    queryKey: ["agent-run", agentId, runId],
+    queryFn: () => data.getAgentRun(agentId, runId),
+  });
+  return (
+    <div className="border-t px-4 py-3">
+      {detail.isPending ? (
+        <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+      ) : null}
+      {detail.isError ? (
+        <p role="alert" className="text-sm text-destructive">
+          {i18n.t("agent.runFailed")}
+        </p>
+      ) : null}
+      {detail.data && detail.data.log.length === 0 ? (
+        <p className="text-sm text-muted-foreground">{i18n.t("agent.runLogEmpty")}</p>
+      ) : null}
+      {detail.data && detail.data.log.length > 0 ? (
+        <ol aria-label={i18n.t("agent.runLog")} className="space-y-2">
+          {detail.data.log.map((entry) => (
+            <li key={entry.id} className="text-sm">
+              <span
+                className={entry.level === "error" ? "font-medium text-destructive" : "font-medium"}
+              >
+                {entry.event}
+              </span>
+              <time dateTime={entry.at} className="ml-2 text-xs text-muted-foreground">
+                {new Date(entry.at).toLocaleTimeString(i18n.locale)}
+              </time>
+              {entry.detail ? (
+                <span
+                  className={`mt-0.5 block text-xs ${entry.level === "error" ? "text-destructive" : "text-muted-foreground"}`}
+                >
+                  {entry.detail}
+                </span>
+              ) : null}
+            </li>
+          ))}
+        </ol>
+      ) : null}
+    </div>
+  );
+}