@anchrd/intel-ui 0.33.0 → 0.35.0

package/src/flows/flows.tsx

@@ -24,15 +24,19 @@ import {
   useReactFlow,
 } from "@xyflow/react";
 import { FileSearch, Info, Send, Wrench } from "lucide-react";
-import { useEffect, useId, useMemo, useState } from "react";
+import { createContext, useContext, useEffect, useId, useMemo, useState } from "react";
 import { TreeEntryMediaType } from "@/app/app-tree/app-tree.tsx";
 import { ViewToggle } from "@/app/view-toggle/view-toggle.tsx";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { IntelRequestError } from "@/data/intel-data-provider/intel-data-provider.ts";
+import { RefusalNotice } from "@/data/request-refusal/refusal-notice.tsx";
+import { refusalOf } from "@/data/request-refusal/request-refusal.ts";
 import { EntryPicker } from "@/entry-picker/entry-picker.tsx";
 import { FlowRuns } from "@/flow-runs/flow-runs.tsx";
 import { nodeIcon } from "@/flows/node-icon/node-icon.ts";
 import { NodePalette, usePaletteOpen } from "@/flows/node-palette/node-palette.tsx";
 import { GraphPane } from "@/graph-pane/graph-pane.tsx";
+import type { I18n } from "@/i18n/i18n.types.ts";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
@@ -90,9 +94,24 @@ const flowKindOfEntry: Record<string, FlowNode["kind"] | undefined> = {
   flow: "subflow",
 };
 
+/**
+ * The tree links of this flow that name nothing any more, by resource id (#509).
+ *
+ * ⚠️ A context rather than a field on the node's `data`, because the canvas nodes are React state
+ * that the loaded version owns: writing the answer of a query into them would put a second writer
+ * on that state and let a background refetch land in the middle of an edit. The set is read where
+ * it is drawn and nowhere else.
+ */
+const InvalidLinks = createContext<ReadonlySet<string>>(new Set());
+
 function FlowCard({ data, selected }: NodeProps<CanvasNode>) {
   const i18n = useI18n();
   const contract = data.node;
+  const invalidLinks = useContext(InvalidLinks);
+  // ⚠️ Said in a WORD, not by colour alone. A card that only turned red would say nothing to a
+  // colour-blind reader and nothing at all to a screen reader — and this is the one state on the
+  // canvas that stops the flow from running (#509).
+  const broken = isLinkNode(contract) && invalidLinks.has(contract.configuration.resourceId);
   const Icon = nodeIcon[contract.kind];
   const branching = contract.kind === "condition";
   // ⚠️ The start is told apart by silhouette first (#39): a pill among rectangles, in the primary
@@ -117,9 +136,14 @@ function FlowCard({ data, selected }: NodeProps<CanvasNode>) {
         <span className="min-w-0">
           <span className="block truncate text-sm font-medium">{contract.label}</span>
           {/* The kind through the catalog, not the raw key: the start node is called Start on the
-              canvas as well, and `trigger` would name an event that no longer exists (#39). */}
-          <span className="block text-xs text-muted-foreground">
-            {i18n.t(`flows.node.${contract.kind}`)}
+              canvas as well, and `trigger` would name an event that no longer exists (#39).
+              ⚠️ A broken link says so INSTEAD of naming its kind, because "Document" beside a
+              reference that names nothing is the sentence #509 is about: the card looked like every
+              valid link on the canvas. */}
+          <span
+            className={`block text-xs ${broken ? "text-destructive" : "text-muted-foreground"}`}
+          >
+            {broken ? i18n.t("flows.nodeInvalid") : i18n.t(`flows.node.${contract.kind}`)}
           </span>
         </span>
         {riding === "follows" || riding === "pinned" ? (
@@ -348,6 +372,75 @@ function newNode(
   }
 }
 
+/**
+ * Which sentence a refused SAVE is told with.
+ *
+ * ⚠️ `400 flow_graph_invalid` and `409` are two different answers, and until #508 they shared one
+ * sentence — the conflict one. For a rejected graph that advice is not merely useless but
+ * destructive: reloading discards the unsaved canvas, and the next attempt is refused for exactly
+ * the same reason, so following it costs the work and changes nothing.
+ *
+ * The graph rule therefore shows the API's OWN sentence: only the server knows which step broke
+ * which rule, and it names that step by its label since #508. A conflict keeps the reload sentence,
+ * because there reloading IS the way out. Everything else gets neither — a timeout or a `502` is
+ * worth repeating, and nothing about it says the loaded version is stale.
+ *
+ * ⚠️ Not `resourceErrorKey`: that maps a code onto a catalog key, and this case has no key to map
+ * onto — its whole content is the server's sentence.
+ */
+function saveRefusalText(error: unknown, i18n: I18n): string {
+  const refusal = error instanceof IntelRequestError ? error : null;
+  if (refusal?.status === 400 && refusal.code === "flow_graph_invalid") {
+    return i18n.t("flows.saveInvalid", { detail: refusal.message });
+  }
+  if (refusal?.status === 409) return i18n.t("flows.saveConflict");
+  return i18n.t("flows.saveFailed");
+}
+
+/**
+ * Which sentence a refused PUBLISH is told with — #508 one surface further (#551).
+ *
+ * Publishing answers with at least eight different refusals: the compile rules of the save path,
+ * a link whose document is out of reach, a tool server that is gone, a frozen schema that moved,
+ * three rules about calling another flow — and all of them read
+ * "Publishing failed. Reload the latest version and try again." Reloading is the way out of exactly
+ * one of them, and for the rest it is the advice that costs the canvas and changes nothing.
+ *
+ * The split is therefore by what the answer IS, not by which code it carries:
+ *
+ * - **A refusal** (`4xx`) always shows the server's own sentence. It is the only party that knows
+ *   which step broke which rule, and since #508 it names that step by its label rather than by an
+ *   id — which is why #551 rewrote `flow_node_unavailable`, the one that still named a resource id.
+ * - **Two of them add the way out**, because the server's sentence identifies the step and stops
+ *   there: a document out of reach is answered by asking for access, and a tool server that is
+ *   gone by looking in the portal. Neither is something the API should prescribe per surface.
+ * - **A conflict** keeps the reload sentence, because there reloading IS the way out.
+ * - **Everything else** — a timeout, a `502`, a network that came back — says nothing about the
+ *   loaded version and is worth repeating, so it gets neither.
+ */
+function publishRefusalText(error: unknown, i18n: I18n): string {
+  const refusal = error instanceof IntelRequestError ? error : null;
+  // ⚠️ A `5xx` carries a sentence too, and showing it would dress a broken deployment up as a
+  // decision about this flow. Only the deliberate range speaks for itself.
+  if (refusal === null || refusal.status < 400 || refusal.status >= 500) {
+    return i18n.t("flows.publishFailed");
+  }
+  const detail = { detail: refusal.message };
+  switch (refusal.code) {
+    case "flow_node_unavailable":
+      return i18n.t("flows.publishNodeUnavailable", detail);
+    case "flow_tool_unavailable":
+      return i18n.t("flows.publishToolUnavailable", detail);
+    // The two ways the version being published stopped being the one to publish. Both are races
+    // against another editor, and the loaded version is genuinely stale afterwards.
+    case "flow_version_conflict":
+    case "flow_publish_conflict":
+      return i18n.t("flows.publishConflict");
+    default:
+      return i18n.t("flows.publishRefused", detail);
+  }
+}
+
 // ⚠️ The provider wraps the editor rather than sitting inside it: `useReactFlow` — which is how the
 // drop turns a screen point into a graph point — has to be called from a component UNDER it, and
 // the hook lives in the same component that renders the canvas.
@@ -401,6 +494,21 @@ function FlowsEditor() {
     queryKey: ["flows"],
     queryFn: () => data.listFlows(),
   });
+  /**
+   * The refusal of the top level, read off the query the picker already holds.
+   *
+   * ⚠️ No second query, and that is the whole difference to #445 next door: `["flows"]` is asked
+   * with or without a selection, so the answer for the empty screen is already in the cache. What
+   * the screen did was throw it away — `listTreeChildren` fails whole once `flows/read` is missing,
+   * the sidebar has said so since #430, and the main area beside it went on inviting the reader to
+   * pick a flow they cannot see (#557).
+   *
+   * ⚠️ Off the ERROR rather than off a missing answer. A sentence about a permission, shown while
+   * the request is still travelling, claims a refusal nobody has spoken yet — the mistake from #350,
+   * and `packages/ui/CLAUDE.md` has the rule: a missing answer is a reason to say less, never to
+   * refuse more. Until a refusal arrives, what stands is the invitation, which claims nothing.
+   */
+  const rootRefusal = refusalOf(callable.error);
   // The tree in the sidebar and the header search both name the flow to open through `?select=`;
   // `?view=` says how it is shown — the editor, the relation graph (#19) or the runs (#35).
   const selection = useRouterState({
@@ -426,6 +534,10 @@ function FlowsEditor() {
     queryFn: () => data.getFlow(selectedFlowId ?? ""),
     enabled: Boolean(selectedFlowId),
   });
+  // ⚠️ A refusal is not a failure. "Reload the latest version and try again." is advice for a
+  // network that came back; against a `403` or a `404` it sends somebody to reload a screen that
+  // will answer the same thing forever, and it hides that the answer was final (#430).
+  const documentRefusal = refusalOf(document.error);
   const initial = useMemo(() => canvas(defaultGraph()), []);
   const [nodes, setNodes] = useState<CanvasNode[]>(initial.nodes);
   const [edges, setEdges] = useState<CanvasEdge[]>(initial.edges);
@@ -450,6 +562,19 @@ function FlowsEditor() {
     setDirty(false);
   }, [document.data, selectedFlowId]);
   const selectedNode = nodes.find((node) => node.id === selectedNodeId) ?? null;
+  // ⚠️ The same query `FlowNeeds` asks, under the same key: TanStack answers both from one cache
+  // entry, so the canvas and the panel cannot end up disagreeing about which link is dead. A second
+  // key would be a second answer to one question, and the one people would trust is the one they
+  // happen to be looking at (#509).
+  const needs = useQuery({
+    queryKey: ["flow-requirements", selectedFlowId],
+    queryFn: () => data.getFlowRequirements(selectedFlowId ?? ""),
+    enabled: Boolean(selectedFlowId),
+  });
+  const invalidLinks = useMemo(
+    () => new Set(needs.data?.invalidNodes ?? []),
+    [needs.data?.invalidNodes],
+  );
 
   const save = useMutation({
     mutationFn: () =>
@@ -496,9 +621,25 @@ function FlowsEditor() {
       ) : null}
       <UnsavedChangesGuard dirty={dirty} />
       <div className="flex min-h-0 flex-1">
-        {selectedFlowId && selection.view === "runs" ? (
+        {!selectedFlowId ? (
+          rootRefusal ? (
+            <RefusalNotice refusal={rootRefusal} />
+          ) : (
+            <div className="grid flex-1 place-items-center p-8 text-sm text-muted-foreground">
+              {i18n.t("flows.select")}
+            </div>
+          )
+        ) : /* ⚠️ The refusal comes BEFORE the view switch, and that placement is the whole of #568.
+               `?view=graph` and `?view=runs` used to be read first, so a flow the reader may not
+               open still rendered its two side views — each with a failure sentence and a "Try
+               again" button on an answer that will not change (#430). Whether the reader may see
+               this flow at all is answered by `getFlow`, once, for every view of it; asking it
+               after the switch means asking it three times and getting two of them wrong. */
+        documentRefusal ? (
+          <RefusalNotice refusal={documentRefusal} />
+        ) : selection.view === "runs" ? (
           <FlowRuns flowId={selectedFlowId} />
-        ) : selectedFlowId && selection.view === "graph" ? (
+        ) : selection.view === "graph" ? (
           <GraphPane
             query={relations}
             select={(node) =>
@@ -508,10 +649,6 @@ function FlowsEditor() {
               })
             }
           />
-        ) : !selectedFlowId ? (
-          <div className="grid flex-1 place-items-center p-8 text-sm text-muted-foreground">
-            {i18n.t("flows.select")}
-          </div>
         ) : document.isError ? (
           <div
             role="alert"
@@ -566,102 +703,104 @@ function FlowsEditor() {
                   media query that sets the class, so both turn together and mid-session. What the
                   surfaces are actually coloured with is in `styles.css`, through the library's own
                   theming variables — for the same reason `.react-sigma` is there. */}
-              <ReactFlow<CanvasNode, CanvasEdge>
-                colorMode={theme}
-                nodes={nodes}
-                edges={edges}
-                nodeTypes={nodeTypes}
-                fitView
-                onNodesChange={(changes: NodeChange<CanvasNode>[]) => {
-                  if (editsNodes(changes)) setDirty(true);
-                  setNodes((current) => applyNodeChanges(changes, current));
-                }}
-                onEdgesChange={(changes: EdgeChange<CanvasEdge>[]) => {
-                  if (editsEdges(changes)) setDirty(true);
-                  setEdges((current) => applyEdgeChanges(changes, current));
-                }}
-                // ⚠️ The two meanings cannot be mixed on one edge: a line from a context point into
-                // a flow input would be stored as context and drawn as an attachment, while the
-                // author meant "and then". Refused at the point where it is still visible.
-                isValidConnection={(connection) =>
-                  (connection.sourceHandle === ContextHandle) ===
-                  (connection.targetHandle === ContextHandle)
-                }
-                onConnect={(connection: Connection) => {
-                  setDirty(true);
-                  setEdges((current) =>
-                    addEdge(
+              <InvalidLinks.Provider value={invalidLinks}>
+                <ReactFlow<CanvasNode, CanvasEdge>
+                  colorMode={theme}
+                  nodes={nodes}
+                  edges={edges}
+                  nodeTypes={nodeTypes}
+                  fitView
+                  onNodesChange={(changes: NodeChange<CanvasNode>[]) => {
+                    if (editsNodes(changes)) setDirty(true);
+                    setNodes((current) => applyNodeChanges(changes, current));
+                  }}
+                  onEdgesChange={(changes: EdgeChange<CanvasEdge>[]) => {
+                    if (editsEdges(changes)) setDirty(true);
+                    setEdges((current) => applyEdgeChanges(changes, current));
+                  }}
+                  // ⚠️ The two meanings cannot be mixed on one edge: a line from a context point into
+                  // a flow input would be stored as context and drawn as an attachment, while the
+                  // author meant "and then". Refused at the point where it is still visible.
+                  isValidConnection={(connection) =>
+                    (connection.sourceHandle === ContextHandle) ===
+                    (connection.targetHandle === ContextHandle)
+                  }
+                  onConnect={(connection: Connection) => {
+                    setDirty(true);
+                    setEdges((current) =>
+                      addEdge(
+                        {
+                          ...connection,
+                          id: crypto.randomUUID(),
+                          ...contextEdgeStyle(connection.sourceHandle === ContextHandle),
+                        },
+                        current,
+                      ),
+                    );
+                  }}
+                  onNodeClick={(_event, node) => setSelectedNodeId(node.id)}
+                  onPaneClick={() => {
+                    setSelectedNodeId(null);
+                    setPaletteOpen(false);
+                  }}
+                  // ⚠️ `copy`, not `move` (#75). The tree's own drop targets say `move`, and the two
+                  // have to feel different while the pointer is still travelling: dropping here makes
+                  // a node that POINTS at the row, it does not take the row out of its folder.
+                  onDragOver={(event) => {
+                    if (!event.dataTransfer.types.includes(TreeEntryMediaType)) return;
+                    event.preventDefault();
+                    event.dataTransfer.dropEffect = "copy";
+                  }}
+                  onDrop={(event) => {
+                    const payload = event.dataTransfer.getData(TreeEntryMediaType);
+                    if (!payload) return;
+                    event.preventDefault();
+                    const dropped = droppedEntry(payload);
+                    if (!dropped) return;
+                    const kind = flowKindOfEntry[dropped.kind];
+                    if (!kind) return;
+                    // Where the pointer let go, in the graph's own coordinates — not the screen's, or
+                    // the node would land somewhere else at every zoom level.
+                    const position = flow.screenToFlowPosition({
+                      x: event.clientX,
+                      y: event.clientY,
+                    });
+                    setDirty(true);
+                    setNodes((current) => [
+                      ...current,
                       {
-                        ...connection,
-                        id: crypto.randomUUID(),
-                        ...contextEdgeStyle(connection.sourceHandle === ContextHandle),
-                      },
-                      current,
-                    ),
-                  );
-                }}
-                onNodeClick={(_event, node) => setSelectedNodeId(node.id)}
-                onPaneClick={() => {
-                  setSelectedNodeId(null);
-                  setPaletteOpen(false);
-                }}
-                // ⚠️ `copy`, not `move` (#75). The tree's own drop targets say `move`, and the two
-                // have to feel different while the pointer is still travelling: dropping here makes
-                // a node that POINTS at the row, it does not take the row out of its folder.
-                onDragOver={(event) => {
-                  if (!event.dataTransfer.types.includes(TreeEntryMediaType)) return;
-                  event.preventDefault();
-                  event.dataTransfer.dropEffect = "copy";
-                }}
-                onDrop={(event) => {
-                  const payload = event.dataTransfer.getData(TreeEntryMediaType);
-                  if (!payload) return;
-                  event.preventDefault();
-                  const dropped = droppedEntry(payload);
-                  if (!dropped) return;
-                  const kind = flowKindOfEntry[dropped.kind];
-                  if (!kind) return;
-                  // Where the pointer let go, in the graph's own coordinates — not the screen's, or
-                  // the node would land somewhere else at every zoom level.
-                  const position = flow.screenToFlowPosition({
-                    x: event.clientX,
-                    y: event.clientY,
-                  });
-                  setDirty(true);
-                  setNodes((current) => [
-                    ...current,
-                    {
-                      id: `${kind}-${crypto.randomUUID()}`,
-                      type: "intel" as const,
-                      position,
-                      data: {
-                        node: {
-                          id: `${kind}-${crypto.randomUUID()}`,
-                          kind,
-                          label: dropped.title,
-                          position,
-                          configuration:
-                            kind === "subflow"
-                              ? { flowId: dropped.id, version: { mode: "latest" as const } }
-                              : { resourceId: dropped.id },
-                        } as FlowNode,
+                        id: `${kind}-${crypto.randomUUID()}`,
+                        type: "intel" as const,
+                        position,
+                        data: {
+                          node: {
+                            id: `${kind}-${crypto.randomUUID()}`,
+                            kind,
+                            label: dropped.title,
+                            position,
+                            configuration:
+                              kind === "subflow"
+                                ? { flowId: dropped.id, version: { mode: "latest" as const } }
+                                : { resourceId: dropped.id },
+                          } as FlowNode,
+                        },
                       },
-                    },
-                  ]);
-                }}
-              >
-                <Background />
-                {/* The overview map has no room for a label, so the start is marked there the only
+                    ]);
+                  }}
+                >
+                  <Background />
+                  {/* The overview map has no room for a label, so the start is marked there the only
                     way that is left: its own colour, from the tokens rather than a fixed value. */}
-                <MiniMap
-                  pannable
-                  zoomable
-                  nodeClassName={(node) =>
-                    (node as CanvasNode).data.node.kind === "trigger" ? "intel-minimap-start" : ""
-                  }
-                />
-                <Controls />
-              </ReactFlow>
+                  <MiniMap
+                    pannable
+                    zoomable
+                    nodeClassName={(node) =>
+                      (node as CanvasNode).data.node.kind === "trigger" ? "intel-minimap-start" : ""
+                    }
+                  />
+                  <Controls />
+                </ReactFlow>
+              </InvalidLinks.Provider>
             </section>
             <aside className="flex w-80 shrink-0 flex-col border-l bg-card">
               <TitleRowScrollArea className="min-h-0 flex-1 overflow-y-auto">
@@ -696,7 +835,7 @@ function FlowsEditor() {
           role="alert"
           className="fixed bottom-5 left-[18rem] z-20 rounded-lg border border-destructive/30 bg-card px-4 py-3 text-sm text-destructive shadow-xl"
         >
-          {i18n.t("flows.operationFailed")}
+          {saveRefusalText(save.error, i18n)}
         </p>
       )}
       {publishing && selectedFlowId && document.data?.flow.currentVersionId ? (
@@ -712,7 +851,9 @@ function FlowsEditor() {
             // graph that just changed.
             await Promise.all([
               queryClient.invalidateQueries({ queryKey: ["flow", selectedFlowId] }),
-              queryClient.invalidateQueries({ queryKey: ["flow-publish-preview", selectedFlowId] }),
+              queryClient.invalidateQueries({
+                queryKey: ["flow-publish-preview", selectedFlowId],
+              }),
               queryClient.invalidateQueries({ queryKey: ["relation-graph"] }),
             ]);
           }}
@@ -910,7 +1051,7 @@ function PublishPreview({
           </ul>
           {publish.isError && (
             <p role="alert" className="mt-4 text-sm text-destructive">
-              {i18n.t("flows.publishFailed")}
+              {publishRefusalText(publish.error, i18n)}
             </p>
           )}
           <button
@@ -1249,11 +1390,13 @@ function FlowNeeds({ flowId }: { flowId: string }) {
     queryKey: ["flow-requirements", flowId],
     queryFn: () => data.getFlowRequirements(flowId),
   });
-  // ⚠️ A flow that touches nothing and a flow whose every reference is hidden are two different
-  // answers, so the counted ones keep the panel from claiming the first when it means the second.
+  // ⚠️ A flow that touches nothing and a flow whose every reference is hidden or dead are three
+  // different answers, so neither the counted nor the broken ones may fall out of this condition —
+  // otherwise the panel claims the first when it means one of the others.
   const empty =
     needs.data !== undefined &&
     needs.data.nodes.length === 0 &&
+    needs.data.invalidNodes.length === 0 &&
     needs.data.hiddenNodes === 0 &&
     needs.data.servers.length === 0;
   return (
@@ -1270,7 +1413,9 @@ function FlowNeeds({ flowId }: { flowId: string }) {
       {empty && <p className="mt-2 text-sm text-muted-foreground">{i18n.t("flows.needsEmpty")}</p>}
       {needs.data && !empty && (
         <>
-          {(needs.data.nodes.length > 0 || needs.data.hiddenNodes > 0) && (
+          {(needs.data.nodes.length > 0 ||
+            needs.data.invalidNodes.length > 0 ||
+            needs.data.hiddenNodes > 0) && (
             <>
               <h3 className="mt-4 text-xs font-medium uppercase tracking-wide text-muted-foreground">
                 {i18n.t("flows.needsNodes")}
@@ -1282,6 +1427,16 @@ function FlowNeeds({ flowId }: { flowId: string }) {
                     <span className="min-w-0 truncate">{reference.title}</span>
                   </li>
                 ))}
+                {/* ⚠️ A dead reference and an unreachable one are two entries, not one (#509).
+                    They used to share the counted line, which said "you cannot see it" about a
+                    document that is gone — a sentence about a permission, in front of something no
+                    permission can fix. This one says what to do instead, because there is exactly
+                    one thing to do: replace the step or take it out. */}
+                {needs.data.invalidNodes.length > 0 && (
+                  <li className="text-destructive">
+                    {i18n.t("flows.needsInvalid", { count: needs.data.invalidNodes.length })}
+                  </li>
+                )}
                 {/* ⚠️ Counted, never named. A title is exactly what someone without access to the
                     document may not learn from a list about it. */}
                 {needs.data.hiddenNodes > 0 && (

package/src/graph-pane/graph-pane.tsx

@@ -1,6 +1,8 @@
 import type { RelationGraph } from "@anchrd/intel-contract/flow";
 import type { UseQueryResult } from "@tanstack/react-query";
 import { lazy, Suspense } from "react";
+import { RefusalNotice } from "@/data/request-refusal/refusal-notice.tsx";
+import { refusalOf } from "@/data/request-refusal/request-refusal.ts";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 
 const RelationGraphView = lazy(async () => ({
@@ -20,6 +22,13 @@ export function GraphPane({
   const i18n = useI18n();
   const loading = <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>;
   if (query.isPending) return loading;
+  // ⚠️ Read off this pane's OWN error, not handed down from the screen around it (#568). The screen
+  // above answers whether the flow or folder may be opened at all; this answers whether its
+  // relations may be read, and the graph endpoint can refuse on its own — an authorized folder
+  // whose graph is not shared. Two questions, so two places, and the one that is refused says so
+  // where it happened.
+  const refusal = refusalOf(query.error);
+  if (refusal) return <RefusalNotice refusal={refusal} />;
   if (query.isError || !query.data) {
     return (
       <div role="alert" className="grid flex-1 place-items-center p-8 text-center text-sm">