@anchrd/intel-ui 0.18.0 → 0.20.0

package/src/resource-menu/resource-menu.tsx

@@ -1,18 +1,15 @@
-import type {
-  Flow,
-  FlowValidation,
-  Node,
-  NodeKind,
-  ResourceVerb,
-  UnreadableNodes,
-} from "@anchrd/intel-contract";
+import type { Flow, FlowValidation } from "@anchrd/intel-contract/flow";
+import type { Node } from "@anchrd/intel-contract/node";
+import type { ResourceVerb, UnreadableNodes } from "@anchrd/intel-contract/share";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 import {
   Archive,
   CornerLeftUp,
   Ellipsis,
+  FileArchive,
   FolderDown,
+  FolderUp,
   Link2,
   Pencil,
   Share2,
@@ -27,11 +24,15 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { flowEntry } from "@/data/intel-data-provider/intel-data-provider.ts";
 import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
 import { useI18n } from "@/i18n/i18n-context.tsx";
+import { useBundleImport } from "@/import-bundle/import-bundle.tsx";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom } from "@/router/selection-search.ts";
@@ -81,18 +82,15 @@ function parentOfTarget(target: ResourceTarget): string | null {
 }
 
 /**
- * Which sentence explains a verb, for THIS kind of thing.
+ * Which sentence explains a verb.
  *
- * ⚠️ "Run" does not mean the same thing twice. On a folder it grants starting the flows filed in
- * it; on an agent it grants using the agent — through its chat, its schedules and its MCP address.
- * Until #143 there was one sentence for both, and on an agent it named flows that have nothing to
- * do with the grant being made. A key per kind, falling back to the general one, so a kind that
- * needs no special wording needs no entry.
+ * ⚠️ One sentence per verb, and that is only true again since Agents were parked (#388). "Run"
+ * used to mean two different things — starting the flows filed in a folder, and using an agent
+ * through its chat, its schedules and its MCP address — so #143 gave the agent its own wording.
+ * With one meaning left, a per-kind branch would be a fork nothing takes.
  */
-export function verbHintKey(verb: ResourceVerb, kind: NodeKind): string {
-  return verb === "execute" && kind === "agent"
-    ? "node.verbHint.execute.agent"
-    : `node.verbHint.${verb}`;
+export function verbHintKey(verb: ResourceVerb): string {
+  return `node.verbHint.${verb}`;
 }
 
 // ⚠️ The same reading `moveErrorKey` does for a move, for the changes this menu makes. A conflict is
@@ -163,6 +161,10 @@ export function ResourceMenu({
   // link anywhere. Both entries are therefore absent on one rather than offered and inert.
   const retrievable = node !== null && node.kind !== "folder";
   const linkable = retrievable;
+  // ⚠️ Absent, not disabled — the rule at the top of this file. An import needs a folder to file
+  // into; a document has nowhere to put a subtree, and a greyed-out entry would promise it does.
+  const importable = node !== null && node.kind === "folder";
+  const bundleImport = useBundleImport({ where: title });
 
   // Everything a change here can make stale. The row sits in one level of the tree, the open screen
   // reads the record, and the flat collections behind the search, the link picker and the relation
@@ -299,6 +301,26 @@ export function ResourceMenu({
             <FolderDown aria-hidden="true" />
             {i18n.t("resource.export")}
           </DropdownMenuItem>
+          {/* The other half of the same round trip, next to it rather than in the tree's plus
+              (#346): one word in the menu, both sources under it. */}
+          {importable ? (
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <FolderUp aria-hidden="true" />
+                {i18n.t("resource.import")}
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem onSelect={() => bundleImport.start(id, "importZip")}>
+                  <FileArchive aria-hidden="true" />
+                  {i18n.t("tree.new.importZip")}
+                </DropdownMenuItem>
+                <DropdownMenuItem onSelect={() => bundleImport.start(id, "importFolder")}>
+                  <FolderUp aria-hidden="true" />
+                  {i18n.t("tree.new.importFolder")}
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          ) : null}
           {/* Only a flow can be run, so only a flow can be asked whether it would. Rarely needed —
               which is why it is in the menu and not in the title line (#72). */}
           {node === null ? (
@@ -344,6 +366,10 @@ export function ResourceMenu({
       {/* Its own sentence, not `resourceErrorKey`'s: nothing was changed, something failed to
           arrive, and "the change was not saved" would send the reader looking for a change. */}
       {exportBundle.isError ? <MenuFailure>{i18n.t("resource.exportFailed")}</MenuFailure> : null}
+      {/* The import's own sentence, and its own pickers — only where the entry exists, because two
+          file inputs on every document's menu would be two elements nothing can ever open. */}
+      {bundleImport.isError ? <MenuFailure>{i18n.t("tree.importFailed")}</MenuFailure> : null}
+      {importable ? bundleImport.inputs : null}
       {/* ⚠️ A move has four refusals of its own and they are told apart by `moveErrorKey`, not by
           `resourceErrorKey`: "that is not a folder" and "that would be a loop" have no equivalent
           among the changes above, and one shared sentence would leave the reader guessing. */}
@@ -696,9 +722,7 @@ function SharePanel({ node, close }: { node: Node; close(): void }) {
                 className="size-4 rounded border outline-none focus-visible:ring-2 focus-visible:ring-ring"
               />
               <span>{i18n.t(`node.verb.${verb}`)}</span>
-              <span className="text-xs text-muted-foreground">
-                {i18n.t(verbHintKey(verb, node.kind))}
-              </span>
+              <span className="text-xs text-muted-foreground">{i18n.t(verbHintKey(verb))}</span>
             </label>
           ))}
         </fieldset>

package/src/section-hint/section-hint.tsx

@@ -5,8 +5,8 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
  * An explanation behind an ⓘ, beside the thing it explains (#204, shared since #249).
  *
  * It exists for the sentence that answers "what IS this" — read once, then furniture. Not for the
- * sentence you need WHILE you type: `agent.cronHint` ("five fields: minute, hour, …") deliberately
- * stays a visible paragraph, because a reference you read while writing must not be behind a hover.
+ * sentence you need WHILE you type: a reference read while writing must not be behind a hover, so
+ * something like a field's format ("five fields: minute, hour, …") stays a visible paragraph.
  * That is the dividing line: *what is this* may hide, *how do I write this* may not.
  *
  * ⚠️ The hint is the trigger's accessible NAME, not only the tooltip's content: Radix describes the

package/src/title-row/title-row.tsx

@@ -11,47 +11,30 @@ import { ResourceMenu, type ResourceTarget } from "@/resource-menu/resource-menu
  * the rule could be forgotten. That is the whole point: the menu holds rename, move, share and
  * archive, and a position one has to look for is a position one stops using.
  *
- * The three slots are for what belongs to this thing but lives further down the tree, where its
- * state is. `title-meta` is a quiet word beside the name (a table's row count); `title-byline` is a
- * quiet line under it (who made an agent, #258); `title-actions` is a button in the group (saving a
- * document, exporting a table). All are filled through `ActionSlot`, and the two in the group sit
- * before the menu for the same reason `children` do.
+ * The two slots are for what belongs to this thing but lives further down the tree, where its
+ * state is. `title-meta` is a quiet word beside the name (a table's row count); `title-actions` is a
+ * button in the group (saving a document, exporting a table). Both are filled through `ActionSlot`,
+ * and the one in the group sits before the menu for the same reason `children` do.
  */
 export function TitleRow({
   title,
   description,
   target,
-  leading,
-  divider = true,
   children,
 }: {
   title: string;
   description?: string | null;
   target: ResourceTarget;
-  // ⚠️ A picture before the name, for the one kind that has a face: an agent's initials (#143). A
-  // prop rather than another slot because it must sit BEFORE the title, and a portal can only
-  // append — the same limitation that gave the shell two boxes instead of one list (#56).
-  leading?: React.ReactNode;
-  // Off for the one kind whose next line is its own tab bar: two rules a few pixels apart read as
-  // clutter, so the agent page keeps only the tab bar's (#204).
-  divider?: boolean;
   children?: React.ReactNode;
 }) {
   return (
-    <div
-      className={`flex items-start justify-between gap-5 px-6 py-4${divider ? " border-b" : ""}`}
-    >
+    <div className="flex items-start justify-between gap-5 border-b px-6 py-4">
       <div className="flex min-w-0 items-center gap-3">
-        {leading}
         <div className="min-w-0">
           <div className="flex min-w-0 flex-wrap items-baseline gap-x-3">
             <h2 className="truncate text-lg font-semibold">{title}</h2>
             <span data-slot="title-meta" className="text-sm text-muted-foreground" />
           </div>
-          {/* ⚠️ `empty:hidden` is the whole rule for "no line rather than an empty one": nothing is
-              portalled in here for most kinds, and a slot that kept its margin would make every
-              head a few pixels taller for a line nobody wrote (#258). */}
-          <span data-slot="title-byline" className="mt-0.5 block min-w-0 empty:hidden" />
           {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
         </div>
       </div>

package/src/tools/tools.tsx

@@ -1,4 +1,4 @@
-import { serverOf, type ToolCapability, type ToolServer } from "@anchrd/intel-contract";
+import { serverOf, type ToolCapability, type ToolServer } from "@anchrd/intel-contract/tool";
 import { useQuery } from "@tanstack/react-query";
 import { useRouterState } from "@tanstack/react-router";
 import { AlertTriangle, ChevronRight, PlugZap, ShieldOff, Timer, Wrench } from "lucide-react";
@@ -86,8 +86,6 @@ export function Tools() {
   const catalog = useQuery({ queryKey: ["tools"], queryFn: () => data.listTools() });
   // The servers behind that same live list (D30). Its own query, and its own failure: a portal that
   // answers tools but no directory still has a usable screen, it just has no boxes to put them in.
-  // The key is the one the agent profile already reads the directory under, so a visit to either
-  // screen serves the other from cache.
   // ⚠️ No retry on this one, and that is a decision about the screen rather than about the request.
   // The tools are held back until the directory has answered, so every further attempt is time
   // somebody spends in front of the word "Loading" — and a retry does not even have to happen: a

package/vite.config.ts

@@ -12,10 +12,6 @@ export default defineConfig({
       "/auth": { target: "http://localhost:8788", changeOrigin: true },
       "/mcp": { target: "http://localhost:8788", changeOrigin: true },
       "/.well-known": { target: "http://localhost:8788", changeOrigin: true },
-      // ⚠️ There is deliberately no `/agents` entry any more (#178). The browser reaches the agent
-      // runtime through intel, which forwards over its `AGENT` service binding — so in development
-      // the runtime still has to be running (`workers/agent`, port 8789, started separately from
-      // `bun run dev`), but Vite proxies nothing to it: wrangler's dev registry connects the two.
     },
   },
 });

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

@@ -1,34 +0,0 @@
-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

@@ -1,160 +0,0 @@
-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.
-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.
- *
- * ⚠️ Each entry is drawn in ITS OWN schedule's timezone and names it (#228). Not in the reader's:
- * the agent fires at the hour its schedule says, and an instant shown in the zone of whoever is
- * 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.
- *
- * ⚠️ A paused agent gets a sentence over the list, because this is the tab somebody opens to find
- * out WHETHER something runs (#203). Without it two places on one page said opposite things: the
- * header read `Paused · no schedule fires`, and this list went on naming the next five times as if
- * they would happen. The list is kept rather than emptied — what the agent WOULD do is still the
- * answer to "what did I switch off" — but it may not read as a plan.
- */
-export function AgentCalendar({
-  definition,
-  now,
-  paused,
-}: {
-  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;
-  // ⚠️ Handed in for the same reason, and not read from `useAgentState` here: that hook needs the
-  // router context and a query client, and reaching for it would turn every test of this view into
-  // an integration test of two providers. The caller already holds the state for the header.
-  paused: boolean;
-}) {
-  const i18n = useI18n();
-  const mine = useChosenTimezone();
-  const schedules = definition?.schedules ?? [];
-  const upcoming = schedules
-    // ⚠️ The schedule's own position rides along, and it is the only thing that separates two
-    // LITERALLY identical entries (#323). Two schedules with the same cron, zone and target are a
-    // definition somebody can save, and every other part of the key would be equal for them —
-    // including the fire time, which is computed from exactly those three.
-    .flatMap((schedule, position) =>
-      nextCronFires(schedule.cron, now, PerSchedule, schedule.timezone).map((at) => ({
-        at,
-        schedule,
-        position,
-      })),
-    )
-    .sort((left, right) => left.at.getTime() - right.at.getTime());
-
-  // One formatter per zone rather than one per row: a DateTimeFormat is expensive to build, and a
-  // calendar of five entries per schedule would otherwise build one for each of them.
-  const formatters = new Map<string, Intl.DateTimeFormat>();
-  const formatIn = (zone: string, at: Date) => {
-    let format = formatters.get(zone);
-    if (!format) {
-      format = new Intl.DateTimeFormat(i18n.locale, {
-        dateStyle: "full",
-        timeStyle: "short",
-        timeZone: zone,
-      });
-      formatters.set(zone, format);
-    }
-    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"
-    >
-      {/* ⚠️ 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. */}
-      {/* ⚠️ Only where there is a list to qualify. A paused agent WITHOUT schedules shows the same
-          empty calendar it always did — the two states have to stay distinguishable, and a sentence
-          about times that do not happen, over no times at all, describes nothing. Same reason it
-          does not appear over `calendarUnreadable`: that one already says nothing is planned. */}
-      {paused && upcoming.length > 0 ? (
-        <p role="status" className="mt-4 rounded-lg border bg-muted px-4 py-3 text-sm">
-          {i18n.t("agent.calendarPaused")}
-        </p>
-      ) : null}
-      {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">
-          {i18n.t("agent.calendarUnreadable")}
-        </p>
-      ) : (
-        <ol className="mt-4 space-y-2">
-          {upcoming.map((entry) => (
-            <li
-              key={`${entry.position}:${entry.schedule.cron}@${entry.schedule.timezone}:${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">
-                {formatIn(entry.schedule.timezone, entry.at)}
-              </time>
-              {/* 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}`)}
-              </span>
-            </li>
-          ))}
-        </ol>
-      )}
-    </section>
-  );
-}

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

@@ -1,118 +0,0 @@
-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 { useI18n } from "@/i18n/i18n-context.tsx";
-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 } = useIntelRouterContext();
-  const i18n = useI18n();
-  // ⚠️ 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-costs/agent-costs.ts

@@ -1,95 +0,0 @@
-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 });
-}