@anchrd/intel-ui 0.33.0 → 0.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {
@@ -33,7 +33,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@anchrd/intel-contract": "^0.20.0",
+    "@anchrd/intel-contract": "^0.22.0",
     "@blocknote/core": "^0.52.1",
     "@blocknote/react": "^0.52.1",
     "@blocknote/shadcn": "^0.52.1",

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

@@ -10,7 +10,7 @@ import {
   Plus,
   Upload,
 } from "lucide-react";
-import { useRef, useState } from "react";
+import { useId, useRef, useState } from "react";
 import {
   allTreeLevelsKey,
   type MoveDestination,
@@ -112,6 +112,10 @@ export function AppTree() {
   const uploadInput = useRef<HTMLInputElement>(null);
   const [dragged, setDragged] = useState<Carried | null>(null);
   const draggedRef = useRef<Carried | null>(null);
+  // The id of the one sentence every movable row is described by (#590). Minted rather than written
+  // down: two trees on one page would otherwise share a literal id, and the second would describe
+  // its rows with the first one's element.
+  const movableId = useId();
   // Which target the pointer is over: `undefined` for none, `null` for the root strip, an id for a
   // folder row. Three answers, because "the root" and "nothing" are not the same drop.
   const [over, setOver] = useState<string | null | undefined>(undefined);
@@ -150,7 +154,47 @@ export function AppTree() {
     return calls.items.map((flow) => flowEntry(flow, openable.has(flow.id)));
   }
 
-  const parents: Level[] = [{ id: null, type: "folder" }, ...expanded];
+  /**
+   * The levels that still have a row to hang on — `expanded` minus everything the tree no longer
+   * shows (#521).
+   *
+   * ⚠️ `expanded` is only ever added to. A folder that was opened and has since left the tree —
+   * archived, moved away, its share revoked — used to keep its level in `useQueries` for the rest
+   * of the session, and every write from then on re-read a list nothing draws. Nothing was wrong on
+   * screen (`isOpen` needs the row, so the level was never rendered); the requests were simply paid
+   * for, and the number grew with the length of the SESSION rather than with what is on screen.
+   *
+   * ⚠️ Read from the cache rather than from `levels` below, and that is not a shortcut: the answer
+   * is needed BEFORE `useQueries` is told what to load, and deriving it from the results afterwards
+   * can only correct the list one render too late — by which time the request has been made.
+   *
+   * ⚠️ A walk down from the root, not "is the row anywhere": a level whose own row is gone must not
+   * keep vouching for the levels under it, or a whole opened branch would survive its top.
+   *
+   * ⚠️ A row is enough, and `openable` is deliberately NOT part of it although `isOpen` checks it.
+   * `reveal` opens a folder BEFORE the invalidation that gives it its arrow, so a folder that was
+   * empty a moment ago still says `openable: false` at that instant — judging on it would close the
+   * folder #519 exists to have opened. A refetch does not make a level unknown either: TanStack
+   * keeps the previous data while it refetches, so an ordinary invalidation closes nothing.
+   */
+  const rowLevel = (entry: TreeEntry) =>
+    `${entry.kind === "folder" ? "folder" : "flow"}:${entry.id}`;
+  const rootLevel: Level = { id: null, type: "folder" };
+  const open: Level[] = [];
+  let frontier: Level[] = [rootLevel];
+  let waiting = [...expanded];
+  while (frontier.length > 0 && waiting.length > 0) {
+    const shown = new Set(
+      frontier.flatMap((level) =>
+        (queryClient.getQueryData<TreeEntry[]>(levelKey(level)) ?? []).map(rowLevel),
+      ),
+    );
+    frontier = waiting.filter((level) => shown.has(`${level.type}:${level.id}`));
+    waiting = waiting.filter((level) => !frontier.includes(level));
+    open.push(...frontier);
+  }
+
+  const parents: Level[] = [rootLevel, ...open];
   const levels = useQueries({
     queries: parents.map((parent) => ({
       queryKey: levelKey(parent),
@@ -167,10 +211,19 @@ export function AppTree() {
     levels[parents.findIndex((entry) => entry.id === level.id && entry.type === level.type)];
   const root = levels[0];
 
-  function toggle(level: Level & { id: string }, open: boolean) {
+  // ⚠️ The list the reader opened is also trimmed here, and not only where it is read: `open`
+  // above keeps a departed level from being LOADED, but the entry itself would otherwise sit in
+  // `expanded` until the tab is closed — and a folder that comes back would come back open, which
+  // is a claim about a gesture nobody made in this tree. A gesture is where trimming is free: it
+  // is an event, so there is no render to loop through.
+  function toggle(level: Level & { id: string }, wanted: boolean) {
     setExpanded((current) => {
-      const rest = current.filter((entry) => entry.id !== level.id || entry.type !== level.type);
-      return open ? [...rest, level] : rest;
+      const rest = current.filter(
+        (entry) =>
+          (entry.id !== level.id || entry.type !== level.type) &&
+          open.some((live) => live.id === entry.id && live.type === entry.type),
+      );
+      return wanted ? [...rest, level] : rest;
     });
   }
 
@@ -441,8 +494,10 @@ export function AppTree() {
     // reader may see" (#59). The difference is an arrow that keeps its promise — before, it stood
     // on every folder and every flow, empty ones included.
     const expandable = entry.openable;
+    // ⚠️ `open`, not `expanded`: what is drawn and what is loaded answer the same question, or the
+    // tree would draw a level it never asked for (#521).
     const isOpen =
-      expandable && expanded.some((open) => open.id === entry.id && open.type === level.type);
+      expandable && open.some((live) => live.id === entry.id && live.type === level.type);
     const Icon = isOpen && isFolder ? FolderOpen : kindIcons[entry.kind];
     const area = entry.type === "flow" ? "/flows" : "/nodes";
     const isActive = location.select === entry.id && location.pathname === area;
@@ -575,6 +630,21 @@ export function AppTree() {
               putting `draggable` on this form control is precisely the Safari failure from #483. */}
           <SidebarMenuButton
             isActive={isActive}
+            /* ⚠️ What says the row is movable BEFORE anything touches it (#590). Until now only
+               `cursor-grab` said it, and that is a statement addressed to a pointer that is already
+               on the row — nobody navigating by keyboard, by touch or by ear ever received it, and
+               a way nobody sees is a way nobody uses. That is how the dead gesture of #483 stayed
+               dead for months without a single report.
+
+               ⚠️ A DESCRIPTION and not part of the name: the name is the title, and twenty rows
+               each announcing an instruction would bury it. It is also one shared element rather
+               than one per row — the sentence is the same for every movable row, and a copy per row
+               is a copy per row to keep in step.
+
+               ⚠️ Absent on a derived row, and that is the whole discrimination: what a flow calls
+               has no `parent_id` to rewrite and is not draggable (`draggable={!derived}`), so
+               claiming it were movable would send somebody after a gesture that is refused. */
+            aria-describedby={derived ? undefined : movableId}
             data-drop={
               dragged === null ? undefined : isDragged ? "dragged" : (drop?.verdict ?? "none")
             }
@@ -622,8 +692,30 @@ export function AppTree() {
 
   return (
     <SidebarGroup className="min-h-0 flex-1 overflow-y-auto">
+      {/* The tree is the navigation and carries no heading of its own (ADR-0004); the list is
+          named for assistive technology instead. */}
+      {renderLevel({ id: null, type: "folder" }, new Set(), i18n.t("tree.label"))}
+      {/* ⚠️ The sentence every movable row points at (#590). It names BOTH ways on purpose: the
+          drag for whoever has a pointer, and the entry in the title line for whoever has not —
+          `resource.move` is the same word it carries there. Naming only the drag would describe a
+          gesture that keyboard and touch do not have, which is the state this ticket found.
+
+          ⚠️ It is rendered AFTER the rows and it is `sr-only`, so it takes no space and moves
+          nothing. Anything a row could be pushed down by is the abort of #483 all over again — and
+          an element that exists from the first render pushes nothing in any case. */}
+      <span id={movableId} className="sr-only">
+        {i18n.t("tree.move.rowHint")}
+      </span>
       {/* The root has no row to drop on, so while something is being carried it gets one. It is the
-          only way back out of a folder, and it appears exactly when it can be used. */}
+          only way back out of a folder, and it appears exactly when it can be used.
+          ⚠️ BELOW the tree, and that is not a matter of taste (#483). It used to stand above it, so
+          the moment a drag began every row moved down by its height — including the row being
+          dragged. Chromium ABORTS a drag whose source shifts under it: `dragstart` fired, `dragend`
+          followed six milliseconds later, and no `drag`, `dragover` or `drop` ever came. The hand
+          appeared and nothing moved, which is exactly what the ticket describes. Below the tree the
+          strip pushes nothing that sits above it, so the source stays where the gesture started.
+          Measured in a real Chromium: with the strip above, the gesture dies; with it here, the same
+          drag reaches the drop and opens the move dialog. */}
       {rootDrop.verdict === undefined || dragged === null ? null : (
         <button
           type="button"
@@ -640,7 +732,7 @@ export function AppTree() {
             });
           }}
           data-drop={rootDrop.verdict}
-          className={`mb-1 flex w-full items-center gap-1 rounded-md border border-dashed px-2 py-1.5 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring ${
+          className={`mt-1 flex w-full items-center gap-1 rounded-md border border-dashed px-2 py-1.5 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring ${
             rootDrop.verdict === "ok"
               ? over === null
                 ? "bg-sidebar-accent ring-2 ring-sidebar-ring"
@@ -652,9 +744,6 @@ export function AppTree() {
           {i18n.t("tree.move.dropRoot")}
         </button>
       )}
-      {/* The tree is the navigation and carries no heading of its own (ADR-0004); the list is
-          named for assistive technology instead. */}
-      {renderLevel({ id: null, type: "folder" }, new Set(), i18n.t("tree.label"))}
       {create.isError || upload.isError || bundleImport.isError ? (
         <p role="alert" className="px-2 py-1.5 text-sm text-destructive">
           {bundleImport.isError

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

@@ -47,11 +47,11 @@ export function treeLevelKey(parentId: string | null): readonly unknown[] {
  * level is not always the one the record names: since #429 a shared row also stands at the root
  * (`levelsToClear`).
  *
- * ⚠️ What it costs is one request per MOUNTED level, and that is not the same as "per level on
- * screen": `expanded` in `app-tree.tsx` is only ever added to, so a folder that was opened and has
- * since left the tree — archived, moved away — keeps its query mounted for the rest of the session
- * and is re-read by every write from then on. Nothing is wrong on screen; the requests are simply
- * paid for. #521 prunes that list, and until it does, this is the honest bound.
+ * ⚠️ What it costs is one request per level the reader has OPEN — bounded by the screen, not by how
+ * long the tab has been sitting there. `app-tree.tsx` loads a level only while the row it hangs on
+ * still stands in the level above it, so a folder that was opened and has since left the tree —
+ * archived, moved away, its share revoked — takes its query with it rather than being re-read by
+ * every write for the rest of the session.
  *
  * The same prefix is what `archive.tsx` has always used for the same reason: a row can come back
  * anywhere, and the screen writing it does not know where.

package/src/archive/archive.tsx

@@ -5,8 +5,10 @@ import { ArchiveRestore, LoaderCircle, Trash2 } from "lucide-react";
 import { useState } from "react";
 import { allTreeLevelsKey } from "@/app/tree-move/tree-move.tsx";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { IntelRequestError } from "@/data/intel-data-provider/intel-data-provider.ts";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { kindIcons } from "@/kind-icon.ts";
+import { cn } from "@/lib/utils.ts";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { RelativeTime } from "@/time/relative-time.tsx";
@@ -27,6 +29,70 @@ interface ArchivedEntry {
   previewPurge?(): Promise<{ inboundLinks: number; totalItems: number }>;
 }
 
+/**
+ * The refusal of a permanent deletion — and the one place the reader can actually reach it.
+ *
+ * ⚠️ #601. It used to stand on the page only, and the confirmation dialog that produces it **stays
+ * open** on a refusal while marking everything outside itself `aria-hidden` (`Modal` → react-aria's
+ * `ModalOverlay`). Behind that the sentence was not merely awkward to get at: for a screen reader it
+ * was not there at all, and it announced nothing. Since #593 this is the sentence carrying the NAMES
+ * of the flows that still call the flow — the one thing that makes the refusal actionable, and the
+ * reason the ticket was built.
+ *
+ * ⚠️ It is rendered in exactly ONE of two places, never both: inside the dialog while that is open,
+ * on the page once it is closed. The second half is not a leftover — the reader closes the dialog to
+ * go and change the callers, and the sentence has to still be there when they come back. Two copies
+ * would be two announcements of one answer, which is the `#445` mistake in a new costume.
+ *
+ * ⚠️ This is NOT the `#430` class and does not go through `RefusalNotice`. That one answers a
+ * refused QUERY — a `403`/`404` that leaves a whole pane with nothing to show, told as a centered
+ * sentence without a retry. This is a refused mutation that carries data (`409` with `callers`),
+ * belongs beside the button that caused it, and its problem was never the wording.
+ */
+function PurgeRefusal({ error, className }: { error: unknown; className?: string }) {
+  const i18n = useI18n();
+  /**
+   * ⚠️ Deleting a flow for good is refused with `409 flow_in_use_by_flow` while published flows
+   * still call it (`flows.ts`, `purge`), and the CALLERS are what makes that refusal actionable —
+   * "reload and try again" is advice for a flow nobody calls, and this one is called.
+   *
+   * ⚠️ Since #593 they arrive as data — the flows this reader may see by name, the rest as a count
+   * — so the sentence is written here, in the reader's language, exactly as the share dialog writes
+   * the folder's half of the same rule (#448). The server still decides WHICH may be named; that is
+   * an authorization answer and nothing on this side recomputes it.
+   */
+  const requestError = error instanceof IntelRequestError ? error : null;
+  const inUse = requestError?.code === "flow_in_use_by_flow" ? requestError : null;
+  return (
+    <div role="alert" className={cn("space-y-1 text-sm text-destructive", className)}>
+      {inUse ? (
+        <>
+          <p>{i18n.t("archive.purgeInUse")}</p>
+          {/* An API older than #593 sends no `callers`, and then its own sentence is the only place
+              the titles exist at all. Showing it beats showing nothing. */}
+          {inUse.callers === null ? (
+            <p className="text-xs">{inUse.message}</p>
+          ) : (
+            <p className="text-xs">
+              {inUse.callers.titles.length > 0
+                ? i18n.t("archive.purgeInUseCallers", {
+                    titles: inUse.callers.titles.join(", "),
+                  })
+                : i18n.t("archive.purgeInUseCallersHidden", { count: inUse.callers.hidden })}
+              {inUse.callers.titles.length > 0 && inUse.callers.hidden > 0
+                ? ` ${i18n.t("archive.purgeInUseCallersMore", { count: inUse.callers.hidden })}`
+                : ""}
+              {` ${i18n.t("archive.purgeInUseHint")}`}
+            </p>
+          )}
+        </>
+      ) : (
+        <p>{i18n.t("archive.purgeFailed")}</p>
+      )}
+    </div>
+  );
+}
+
 export function Archive() {
   const { data } = useIntelRouterContext();
   const i18n = useI18n();
@@ -153,12 +219,11 @@ export function Archive() {
             {i18n.t("archive.restoreFailed")}
           </p>
         ) : null}
-        {/* ⚠️ The refusal stands HERE and not in the dialog: it carries the reason — folder not
-            empty, a flow still uses it — and it has to stay readable after the dialog is closed. */}
-        {purge.isError ? (
-          <p role="alert" className="mb-4 text-sm text-destructive">
-            {i18n.t("archive.purgeFailed")}
-          </p>
+        {/* ⚠️ On the page only while no dialog is open (#601). The refusal carries the reason — a
+            flow still calls this one — and it has to survive the dialog it came from; but as long as
+            that dialog stands, the page is `aria-hidden` and this is the copy nobody can reach. */}
+        {purge.isError && !confirming ? (
+          <PurgeRefusal error={purge.error} className="mb-4" />
         ) : null}
         {archived.data?.length === 0 ? (
           <p className="text-sm text-muted-foreground">{i18n.t("archive.empty")}</p>
@@ -225,7 +290,14 @@ export function Archive() {
               <button
                 type="button"
                 disabled={purge.isPending}
-                onClick={() => setConfirming(entry)}
+                onClick={() => {
+                  // ⚠️ The last refusal is cleared as the NEXT dialog opens, not when one closes:
+                  // the sentence has to outlive the dialog it came from (#601), and it must not be
+                  // standing in a dialog about a different entry — that would answer a question
+                  // nobody asked, about the wrong thing.
+                  purge.reset();
+                  setConfirming(entry);
+                }}
                 aria-label={i18n.t("archive.purge", { title: entry.title })}
                 className="inline-flex size-8 shrink-0 items-center justify-center rounded-md border text-destructive outline-none hover:bg-destructive/10 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
               >
@@ -263,6 +335,10 @@ export function Archive() {
             </p>
           ) : null}
           <p className="mt-2 text-sm text-muted-foreground">{i18n.t("archive.purge.grants")}</p>
+          {/* ⚠️ Inside the dialog, because the dialog stays open on a refusal and hides the page
+              behind it from the accessibility tree entirely (#601). Above the buttons rather than
+              below them: the answer belongs between the reason and the button that asks again. */}
+          {purge.isError ? <PurgeRefusal error={purge.error} className="mt-4" /> : null}
           <div className="mt-6 flex justify-end gap-2">
             <button
               type="button"

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

@@ -1,4 +1,4 @@
-import { ProblemDetails, SessionUser } from "@anchrd/intel-contract";
+import { type NamedOrCounted, ProblemDetails, SessionUser } from "@anchrd/intel-contract";
 import { BundleImportResult } from "@anchrd/intel-contract/bundle";
 import {
   ArchiveFlowInput,
@@ -78,10 +78,20 @@ import type { IntelDataProvider, TreeEntry } from "./intel-data-provider.types.t
 // else changed it" — cannot do so from `detail`, which is a sentence the server is free to
 // reword. The code is the contract (`ProblemDetails.code`); the message stays what it was.
 export class IntelRequestError extends Error {
+  /**
+   * ⚠️ `callers` is the structured half of the two refusals that name flows — `folder_execute_in_use`
+   * (#448) and `flow_in_use_by_flow` (#593): the flows this reader may see, by name, and a count of
+   * the ones they may not. It is `null` for every other failure, and a screen that reads it has to
+   * say which code it read it for — the field is only meaningful beside its own.
+   *
+   * `message` still holds the server's finished English sentence. It is no longer what the dialog
+   * shows; it is what a log or a report has when nobody translated anything.
+   */
   constructor(
     public readonly status: number,
     public readonly code: string | null,
     message: string,
+    public readonly callers: NamedOrCounted | null = null,
   ) {
     super(message);
     this.name = "IntelRequestError";
@@ -162,6 +172,7 @@ export function createIntelDataProvider(
         parsed.success
           ? (parsed.data.detail ?? parsed.data.title)
           : `Intel responded with ${result.status}`,
+        parsed.success ? (parsed.data.callers ?? null) : null,
       );
     }
     return result;

package/src/data/request-refusal/refusal-notice.tsx

@@ -0,0 +1,36 @@
+import type { Refusal } from "@/data/request-refusal/request-refusal.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+
+/**
+ * What a refusal is told with, on every surface that has one.
+ *
+ * ⚠️ A refusal is not a failure, and the difference is the whole of #430. Somebody whose share was
+ * revoked was left in front of "Loading…" — the worst answer of all, because it says the program is
+ * still working. They get a sentence and no retry button: the answer was final, and a button that
+ * changes nothing is an invitation to keep waiting.
+ *
+ * ⚠️ One sentence for `404`, whichever of its two reasons applies. Intel answers the same status
+ * for "no such node" and "not for you" on purpose — `requireVisible` in
+ * `packages/api/src/nodes/nodes.ts` — and a screen that told them apart would undo that from the
+ * other side.
+ *
+ * ⚠️ One function rather than a block per branch, because two answers to one question on one
+ * surface IS #445. A screen's halves — the empty level, the selected item, the view beside it — are
+ * asked the same thing, and copies drift.
+ *
+ * ⚠️ **Why this became shared here and not one copy earlier.** `nodes.tsx` (#445) and `flows.tsx`
+ * (#557) each carried an identical version, and #557 wrote its reason on the second one: this
+ * repository builds an abstraction after the third time it hurts, not the second. #568 is the third
+ * time — `?view=graph` and `?view=runs` are the third and fourth surface asking for the same
+ * sentence — so what would have been a third copy is this file. The rule did not bend; it was met.
+ */
+export function RefusalNotice({ refusal }: { refusal: Refusal }) {
+  const i18n = useI18n();
+  return (
+    <div role="status" className="grid flex-1 place-items-center p-8 text-center text-sm">
+      <p className="max-w-sm text-muted-foreground">
+        {i18n.t(refusal === "no-permission" ? "common.noPermission" : "common.noAccess")}
+      </p>
+    </div>
+  );
+}

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

@@ -92,6 +92,24 @@ export function EntryPicker({
   }, [wanted]);
   const eligible = useMemo(() => nodes.filter(pickable), [nodes, pickable]);
 
+  /**
+   * Whether an entry stands on the picker's start level.
+   *
+   * ⚠️ The root is not `parentId === null` but the upper edge of what the reader may see — the same
+   * rule #429 gave the server in `levelPredicate`, at the second surface (#447). A recipient whose
+   * only access is a NESTED share carries a `parentId` pointing at a folder that is not in the list
+   * at all: under the old rule their start level was empty and STAYED empty, because the folder
+   * that would open it can never be clicked. Only searching reached them.
+   *
+   * ⚠️ Nothing is added by this. The list is what `getNodeGraph()` — and `listFlows()` where flows
+   * were asked for — answered, and the answer is already the authorized one. What changes is only
+   * which level an entry stands on.
+   */
+  const rooted = useMemo(() => {
+    const present = new Set(nodes.map((node) => node.id));
+    return (entry: PickerEntry) => entry.parentId === null || !present.has(entry.parentId);
+  }, [nodes]);
+
   // Searching looks at every eligible node wherever it sits; browsing looks at one level. The two
   // are the same list seen two ways, which is why a result can be picked from either.
   const searching = query.trim().length > 0;
@@ -100,8 +118,10 @@ export function EntryPicker({
       const needle = query.trim().toLowerCase();
       return eligible.filter((node) => node.title.toLowerCase().includes(needle)).slice(0, 50);
     }
-    return nodes.filter((node) => node.parentId === openFolder);
-  }, [searching, query, eligible, nodes, openFolder]);
+    return nodes.filter((node) =>
+      openFolder === null ? rooted(node) : node.parentId === openFolder,
+    );
+  }, [searching, query, eligible, nodes, openFolder, rooted]);
 
   // The way back up, as the chain of folders that leads to the open one.
   const trail = useMemo(() => {
@@ -111,10 +131,13 @@ export function EntryPicker({
       const folder = nodes.find((node) => node.id === current);
       if (!folder) break;
       chain.unshift(folder);
-      current = folder.parentId;
+      // ⚠️ The chain ends where the start level begins, and by the same rule that decides it. A
+      // folder at the upper edge has an ancestor the reader cannot see; walking into it would look
+      // for a level that does not exist here, and the "top" button above leads to this one.
+      current = rooted(folder) ? null : folder.parentId;
     }
     return chain;
-  }, [openFolder, nodes]);
+  }, [openFolder, nodes, rooted]);
 
   const chosen = nodes.find((node) => node.id === value) ?? null;
 

package/src/flow-runs/flow-runs.tsx

@@ -2,6 +2,8 @@ import type { FlowRunSummary } from "@anchrd/intel-contract/flow-run";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { ChevronDown, ChevronRight, CornerDownRight } from "lucide-react";
 import { useState } from "react";
+import { RefusalNotice } from "@/data/request-refusal/refusal-notice.tsx";
+import { refusalOf } from "@/data/request-refusal/request-refusal.ts";
 import type { I18n } from "@/i18n/i18n.types.ts";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
@@ -45,6 +47,11 @@ export function FlowRuns({ flowId }: { flowId: string }) {
     getNextPageParam: (last) => last.nextCursor,
   });
   const items = runs.data?.pages.flatMap((page) => page.items) ?? [];
+  // ⚠️ This list's own refusal, told here rather than upstream (#568). The screen above answers
+  // whether the flow may be opened; `listFlowRuns` answers whether its history may be read, and it
+  // can refuse on its own. Everything that is not a refusal keeps the sentence and the button
+  // below — a `502` really can answer differently next time.
+  const refusal = refusalOf(runs.error);
 
   return (
     <section aria-label={i18n.t("runs.title")} className="flex min-h-0 flex-1 flex-col">
@@ -68,7 +75,8 @@ export function FlowRuns({ flowId }: { flowId: string }) {
         {runs.isPending && (
           <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
         )}
-        {runs.isError && (
+        {refusal && <RefusalNotice refusal={refusal} />}
+        {runs.isError && !refusal && (
           <div role="alert" className="space-y-3 text-sm">
             <p className="text-destructive">{i18n.t("runs.failedToLoad")}</p>
             <button