@anchrd/intel-ui 0.25.0 → 0.29.0

package/package.json

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

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

@@ -12,6 +12,7 @@ import {
 } from "lucide-react";
 import { useRef, useState } from "react";
 import {
+  allTreeLevelsKey,
   type MoveDestination,
   moveErrorKey,
   moveVerdict,
@@ -85,6 +86,16 @@ function levelKey(level: Level): readonly unknown[] {
   return level.type === "flow" ? ["flow-calls", level.id] : treeLevelKey(level.id);
 }
 
+// What a drag carries: the row, and the LEVEL it was picked up from.
+//
+// ⚠️ The two are not the same, and that is the whole of #446. Since #429 the root level also shows
+// rows whose own record names a folder this reader may never see — a shared document reaches the
+// root only through the share. Asking `parentOf` again during the move answers with that invisible
+// folder, and then the root offers "move to the top" to a row already at the top, while the level
+// it actually left is never cleaned up. The level is known where the row is rendered; carrying it
+// is cheaper than deriving it wrongly.
+type Carried = { entry: TreeEntry; level: string | null };
+
 // What a row puts on the clipboard for anybody outside the tree. Its own media type rather than
 // `text/plain`, so a drop target that means "move this row" and one that means "make a node for
 // this" cannot be confused by the same payload.
@@ -99,8 +110,8 @@ export function AppTree() {
   const [creating, setCreating] = useState<Creating | null>(null);
   const [uploadTo, setUploadTo] = useState<string | null>(null);
   const uploadInput = useRef<HTMLInputElement>(null);
-  const [dragged, setDragged] = useState<TreeEntry | null>(null);
-  const draggedRef = useRef<TreeEntry | null>(null);
+  const [dragged, setDragged] = useState<Carried | null>(null);
+  const draggedRef = useRef<Carried | null>(null);
   // 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);
@@ -166,13 +177,18 @@ export function AppTree() {
   // ⚠️ The level a row appears in is not the only thing that goes stale. The header search reads
   // the whole flow list, and the graph is what the link picker and the flow editor's tree links
   // offer — a row created here has to reach those too, or another screen keeps showing yesterday.
+  //
+  // ⚠️ And the level written into is not enough either: the folder's own ROW says whether it can be
+  // opened at all, and that row stands one level higher (`allTreeLevelsKey`, #519). Without it the
+  // `toggle` above opens a folder whose arrow never appeared, so the first thing filed into an empty
+  // folder was invisible until the page was reloaded.
   async function reveal(
     parentId: string | null,
     collection: "flows" | "node-graph",
   ): Promise<void> {
     if (parentId !== null) toggle({ id: parentId, type: "folder" }, true);
     await Promise.all([
-      queryClient.invalidateQueries({ queryKey: levelKey({ id: parentId, type: "folder" }) }),
+      queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
       queryClient.invalidateQueries({ queryKey: [collection] }),
       // The graph view of that same level draws exactly this list, so it goes stale for the same
       // reason the level does (#19).
@@ -223,8 +239,19 @@ export function AppTree() {
     },
     onSuccess: async (created) => {
       setCreating(null);
-      await reveal(created.parentId, created.collection);
-      await navigate({ to: created.area, search: { select: created.id } });
+      // ⚠️ The screen first, the refreshes after. Since #519 `reveal` waits on EVERY mounted level,
+      // and a React Query retry is paused while the tab is not in front (#212) — awaiting that
+      // before navigating would leave somebody who just made a document sitting on the old screen
+      // for as long as one level takes to answer.
+      //
+      // ⚠️ `finally`, because both screens are lazy chunks: a failed chunk load throws out of
+      // `navigate`, and without this the tree, the collections and the graph would silently keep
+      // yesterday's rows for the rest of the session — the very state this ticket is about.
+      try {
+        await navigate({ to: created.area, search: { select: created.id } });
+      } finally {
+        await reveal(created.parentId, created.collection);
+      }
     },
   });
 
@@ -265,22 +292,27 @@ export function AppTree() {
       return { id: node.id, parentId };
     },
     onSuccess: async (created) => {
-      await reveal(created.parentId, "node-graph");
-      await navigate({ to: "/nodes", search: { select: created.id } });
+      // The order — and the `finally` — are the ones above, for the same two reasons.
+      try {
+        await navigate({ to: "/nodes", search: { select: created.id } });
+      } finally {
+        await reveal(created.parentId, "node-graph");
+      }
     },
   });
 
   // What a drop on this target would do. `undefined` means nothing is being dragged, so the target
   // is not a target at all.
   function verdictFor(
-    carried: TreeEntry | null,
+    carried: Carried | null,
     targetId: string | null,
     targetAncestors: ReadonlySet<string>,
   ) {
     if (!carried) return undefined;
     return moveVerdict({
-      draggedId: carried.id,
-      draggedParentId: parentOf(carried),
+      draggedId: carried.entry.id,
+      draggedParentId: parentOf(carried.entry),
+      draggedLevel: carried.level,
       targetId,
       targetAncestors,
     });
@@ -313,7 +345,7 @@ export function AppTree() {
           setDragged(null);
           draggedRef.current = null;
           if (carried && verdictFor(carried, target.id, ancestors) === "ok") {
-            move.start(carried, target);
+            move.start(carried.entry, carried.level, target);
           }
         },
       },
@@ -436,7 +468,7 @@ export function AppTree() {
     // default cursor while a drag is in progress, which is the answer "not here" without a word.
     const drop =
       isFolder && !derived ? dropHandlers({ id: entry.id, title: entry.title }, ancestors) : null;
-    const isDragged = dragged?.id === entry.id;
+    const isDragged = dragged?.entry.id === entry.id;
     // While a drag is in progress every row says which of the three it is: the row being carried,
     // a folder that would take it, or something that would not. Silence on the last two is what
     // turns a drag into a guess that only the drop answers.
@@ -465,10 +497,41 @@ export function AppTree() {
             row carries the fill and `flex-1` on the label pushes the actions to the end *inside* it.
             The button keeps its own hover and active fill switched off rather than doubled, so the
             row shows one surface instead of two overlapping ones. */}
+        {/* biome-ignore lint/a11y/noStaticElementInteractions: Native drag is the pointer shortcut;
+            the nested button and move dialog remain the keyboard path. */}
         <div
+          draggable={!derived}
+          onDragStart={(event) => {
+            // ⚠️ `draggable={!derived}` is not enough on its own: `dragstart` bubbles, so a drag
+            // begun on a descendant of a derived row would still land here — and carry a level
+            // (`["tree", <flow-id>]`) that nothing ever wrote. That is the very class of key #446
+            // is about, so the handler refuses it rather than trusting the attribute.
+            if (derived) return;
+            // Native drag initiation on form controls is not interoperable: Safari can leave a
+            // draggable button looking grabbable without ever starting the drag. The row owns the
+            // gesture while its button remains the keyboard-reachable navigation control (#483).
+            event.dataTransfer.effectAllowed = "copyMove";
+            event.dataTransfer.setData("text/plain", entry.id);
+            event.dataTransfer.setData(
+              TreeEntryMediaType,
+              JSON.stringify({ id: entry.id, kind: entry.kind, title: entry.title }),
+            );
+            // The level travels with the row, read from the level this row was rendered into —
+            // never from its own record, which for a shared row names a folder the reader cannot
+            // see (#446).
+            const carried: Carried = { entry, level: parent.id };
+            draggedRef.current = carried;
+            setDragged(carried);
+          }}
+          onDragEnd={() => {
+            draggedRef.current = null;
+            setDragged(null);
+            setOver(undefined);
+          }}
+          {...(drop?.props ?? {})}
           className={`group/row flex items-center gap-0.5 rounded-md pr-1 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground ${
             isActive ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground" : ""
-          }`}
+          } ${derived ? "" : "cursor-grab active:cursor-grabbing"}`}
         >
           {expandable ? (
             <button
@@ -508,37 +571,14 @@ export function AppTree() {
             // 2px left of one with an arrow, and nothing said why.
             <span aria-hidden="true" className={TREE_GUTTER} />
           )}
-          {/* The row's own control is what is grabbed and what is dropped on: a real button, so the
-              gesture rides on something that is already focusable and named rather than on a bare
-              div that assistive technology would have to be told about twice. */}
+          {/* Navigation stays a real button. The enclosing row carries the native drag gesture;
+              putting `draggable` on this form control is precisely the Safari failure from #483. */}
           <SidebarMenuButton
             isActive={isActive}
-            draggable={!derived}
-            onDragStart={(event) => {
-              // ⚠️ Two formats, one gesture. `text/plain` is what a drop inside the tree reads —
-              // that is a MOVE, and it only ever needed the id. The flow canvas needs the kind as
-              // well, to know which node to make, and resolving an id there would mean a second
-              // read of something the drag already knows. `effectAllowed` says both are allowed;
-              // each drop target picks the one it means (#75).
-              event.dataTransfer.effectAllowed = "copyMove";
-              event.dataTransfer.setData("text/plain", entry.id);
-              event.dataTransfer.setData(
-                TreeEntryMediaType,
-                JSON.stringify({ id: entry.id, kind: entry.kind, title: entry.title }),
-              );
-              draggedRef.current = entry;
-              setDragged(entry);
-            }}
-            onDragEnd={() => {
-              draggedRef.current = null;
-              setDragged(null);
-              setOver(undefined);
-            }}
-            {...(drop?.props ?? {})}
             data-drop={
               dragged === null ? undefined : isDragged ? "dragged" : (drop?.verdict ?? "none")
             }
-            className={`min-w-0 flex-1 hover:bg-transparent data-[active=true]:bg-transparent ${derived ? "" : "cursor-grab active:cursor-grabbing"} ${isDragged ? "opacity-50" : ""} ${highlight}`}
+            className={`min-w-0 flex-1 hover:bg-transparent data-[active=true]:bg-transparent ${isDragged ? "opacity-50" : ""} ${highlight}`}
             onClick={() => void navigate({ to: area, search: { select: entry.id } })}
           >
             <Icon aria-hidden="true" className="size-4 shrink-0" />
@@ -588,7 +628,17 @@ export function AppTree() {
         <button
           type="button"
           {...rootDrop.props}
-          onClick={() => move.start(dragged, { id: null, title: i18n.t("tree.move.root") })}
+          onClick={() => {
+            // The strip is drawn for every verdict — greyed out when it would refuse — so the click
+            // has to read it too. Without this, a click on the grey strip performs exactly the write
+            // the drop path refuses, and `initial` being set skips the picker where the verdict is
+            // otherwise enforced.
+            if (rootDrop.verdict !== "ok") return;
+            move.start(dragged.entry, dragged.level, {
+              id: null,
+              title: i18n.t("tree.move.root"),
+            });
+          }}
           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 ${
             rootDrop.verdict === "ok"

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

@@ -15,6 +15,12 @@ export type MoveVerdict = "ok" | "self" | "descendant" | "same-place";
 
 // The parent a row is filed under. Nodes and Flows keep their own record (ADR-0004), so the
 // answer is read from whichever one this row is, never from a merged shape.
+//
+// ⚠️ This is the parent the RECORD names, which since #429 is not always the level the row is shown
+// in: a shared document is filed inside the sharer's folder and reaches the root only through the
+// share. Everything about a move — which level loses the row, which one keeps it, and whether the
+// root is "same place" — is a question about the level on screen, so the level travels with the
+// move instead of being read back out of the record here (#446).
 export function parentOf(entry: TreeEntry): string | null {
   return entry.type === "node" ? entry.node.parentId : entry.flow.parentId;
 }
@@ -25,6 +31,57 @@ export function treeLevelKey(parentId: string | null): readonly unknown[] {
   return ["tree", parentId];
 }
 
+/**
+ * Every level of the tree at once — what a write that changed what is IN a folder makes stale.
+ *
+ * ⚠️ Not the level that was written into: that is the obvious half, and it was the whole of #519.
+ * A folder ROW carries `openable` — since #59 the arrow only stands where there is something to
+ * open — and that is a statement about the folder's CONTENTS living one level ABOVE it. Refresh
+ * only the level below and the row keeps yesterday's answer: the first thing filed into an EMPTY
+ * folder has no arrow to appear under, `reveal` opens a level `renderRow` then never renders, and
+ * reloading the page was the only thing that read the row again. The other direction is the same
+ * bug from the other side — the last child moved or archived out leaves an arrow promising a level
+ * that is empty.
+ *
+ * ⚠️ A prefix rather than "the level, plus the level its folder row sits in", because that second
+ * 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.
+ *
+ * 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.
+ */
+export const allTreeLevelsKey: readonly unknown[] = ["tree"];
+
+/**
+ * Which cached levels a move has to take the row out of.
+ *
+ * ⚠️ Normally one, and the caller names it. When it does not — the title line has no tree level to
+ * name — the answer is not a guess but the full set of places the row can be standing in, and that
+ * set has exactly two members.
+ *
+ * It is two rather than "all of them" because of how a level is read (`db.ts`): every level except
+ * the root is strictly `parent_id IS ?`, so there the level and the record always agree. Only the
+ * root also collects the top of every readable region — a shared row whose own record names the
+ * sharer's folder (#429). So a row is either in the level its record names, or in the root.
+ *
+ * Cleaning up one level too many costs a re-read of a list the reader is looking at anyway.
+ * Cleaning up one too few is #446: the row stays where it no longer is.
+ */
+export function levelsToClear(
+  entry: TreeEntry,
+  level: string | null | undefined,
+): (string | null)[] {
+  if (level !== undefined) return [level];
+  const recorded = parentOf(entry);
+  return recorded === null ? [null] : [recorded, null];
+}
+
 // The optimistic row, filed where it is about to land. Its own parent has to travel with it, or the
 // plus on the moved row would still file into the folder it just left.
 function withParent(entry: TreeEntry, parentId: string | null): TreeEntry {
@@ -45,13 +102,32 @@ function withParent(entry: TreeEntry, parentId: string | null): TreeEntry {
  */
 export function moveVerdict(input: {
   draggedId: string;
+  // ⚠️ Two answers to "where is this row", and since #429 they can differ — which is why both are
+  // asked (#446). `draggedParentId` is what the record says and what a move would overwrite;
+  // `draggedLevel` is the level the row is shown in.
+  //
+  // "Same place" has to be true for either, and for different reasons:
+  //
+  // - The record: dropping a row on the folder its own record already names writes the value that
+  //   is already there. Nothing happens, and offering it says something will.
+  // - The level: a shared row reaches the root only through the share, and its record names the
+  //   sharer's folder. Dropping it on the root looks like a no-op to the reader — but it would
+  //   write `parentId = null` and lift the document OUT of the folder it was shared from. That is
+  //   the opposite of nothing, done by somebody who was told nothing would happen.
+  //
+  // `draggedLevel` is optional because a surface without a tree has no level to name — the resource
+  // menu opens the same dialog from a title line. There the record is the only answer there is.
   draggedParentId: string | null;
+  draggedLevel?: string | null | undefined;
   targetId: string | null;
   targetAncestors: ReadonlySet<string>;
 }): MoveVerdict {
   if (input.targetId === input.draggedId) return "self";
   if (input.targetId !== null && input.targetAncestors.has(input.draggedId)) return "descendant";
   if (input.targetId === input.draggedParentId) return "same-place";
+  if (input.draggedLevel !== undefined && input.targetId === input.draggedLevel) {
+    return "same-place";
+  }
   return "ok";
 }
 
@@ -98,11 +174,14 @@ export function moveErrorKey(error: unknown): string {
  */
 export function MoveDialog({
   entry,
+  level,
   initial,
   close,
   submit,
 }: {
   entry: TreeEntry;
+  // `undefined` where no tree level was rendered — the verdict then rests on the record alone.
+  level: string | null | undefined;
   initial: MoveDestination | null;
   close(): void;
   submit(destination: MoveDestination): void;
@@ -114,17 +193,20 @@ export function MoveDialog({
   // being moved is never offered, so its subtree can never be entered in the first place.
   const [path, setPath] = useState<MoveDestination[]>([]);
   const here: MoveDestination = path.at(-1) ?? { id: null, title: i18n.t("tree.move.root") };
-  const level = useQuery({
+  const children = useQuery({
     queryKey: ["tree", here.id],
     queryFn: async () => await data.listTreeChildren(here.id),
     enabled: destination === null,
   });
-  const folders = (level.data ?? []).filter(
+  const folders = (children.data ?? []).filter(
     (child) => child.kind === "folder" && child.id !== entry.id,
   );
   const verdict = moveVerdict({
     draggedId: entry.id,
     draggedParentId: parentOf(entry),
+    // Handed down by the caller, because the dialog is opened from two places and only one of them
+    // has a tree level to name (#446).
+    draggedLevel: level,
     targetId: here.id,
     targetAncestors: new Set(path.map((step) => step.id).filter((id) => id !== null)),
   });
@@ -147,7 +229,7 @@ export function MoveDialog({
             <p className="min-w-0 flex-1 truncate text-sm font-medium">{here.title}</p>
           </div>
           <ul className="max-h-56 space-y-1 overflow-y-auto">
-            {level.isPending ? (
+            {children.isPending ? (
               <li className="px-2 py-1.5 text-sm text-muted-foreground">
                 {i18n.t("common.loading")}
               </li>
@@ -236,7 +318,17 @@ export function useTreeMove({
   // folder so the row is where the eye follows it. Nobody else has a tree to open.
   onMoved?: ((destination: MoveDestination) => void) | undefined;
 } = {}): {
-  start(entry: TreeEntry, destination: MoveDestination | null): void;
+  // `level` is the one the row is standing in, and the caller says it or says `undefined` — the tree
+  // knows it from the level it rendered into, the title line has no tree at all. Guessing it here
+  // with `parentOf` is what filed a moved row into a cache level that does not exist (#446).
+  //
+  // ⚠️ `undefined` is not "root". It means the level is unknown, and it is handled by cleaning up
+  // BOTH levels such a row can stand in — see `levelsToClear`.
+  start(
+    entry: TreeEntry,
+    level: string | null | undefined,
+    destination: MoveDestination | null,
+  ): void;
   error: unknown;
   dialog: React.ReactNode;
 } {
@@ -244,6 +336,7 @@ export function useTreeMove({
   const queryClient = useQueryClient();
   const [moving, setMoving] = useState<{
     entry: TreeEntry;
+    level: string | null | undefined;
     initial: MoveDestination | null;
   } | null>(null);
 
@@ -253,6 +346,7 @@ export function useTreeMove({
       destination,
     }: {
       entry: TreeEntry;
+      level: string | null | undefined;
       destination: MoveDestination;
     }) => {
       // `baseUpdatedAt` travels with the move: it is what turns a concurrent edit into a 409 the
@@ -273,20 +367,21 @@ export function useTreeMove({
         });
       }
     },
-    onMutate: async ({ entry, destination }) => {
-      const fromKey = treeLevelKey(parentOf(entry));
+    onMutate: async ({ entry, level, destination }) => {
+      const fromKeys = levelsToClear(entry, level).map(treeLevelKey);
       const toKey = treeLevelKey(destination.id);
-      await Promise.all([
-        queryClient.cancelQueries({ queryKey: fromKey }),
-        queryClient.cancelQueries({ queryKey: toKey }),
-      ]);
-      const snapshot = [
-        [fromKey, queryClient.getQueryData<TreeEntry[]>(fromKey)],
-        [toKey, queryClient.getQueryData<TreeEntry[]>(toKey)],
-      ] as const;
-      queryClient.setQueryData<TreeEntry[]>(fromKey, (current) =>
-        current?.filter((row) => row.id !== entry.id),
+      await Promise.all(
+        [...fromKeys, toKey].map(async (queryKey) => await queryClient.cancelQueries({ queryKey })),
       );
+      const snapshot = [
+        ...fromKeys.map((key) => [key, queryClient.getQueryData<TreeEntry[]>(key)] as const),
+        [toKey, queryClient.getQueryData<TreeEntry[]>(toKey)] as const,
+      ];
+      for (const key of fromKeys) {
+        queryClient.setQueryData<TreeEntry[]>(key, (current) =>
+          current?.filter((row) => row.id !== entry.id),
+        );
+      }
       // A level nobody has opened stays unloaded: writing one here would show a folder's contents
       // that were never read.
       queryClient.setQueryData<TreeEntry[]>(toKey, (current) =>
@@ -300,10 +395,11 @@ export function useTreeMove({
       for (const [key, value] of context?.snapshot ?? []) queryClient.setQueryData(key, value);
     },
     onSuccess: (_result, { destination }) => onMoved?.(destination),
-    onSettled: async (_result, _error, { entry, destination }) => {
+    onSettled: async (_result, _error, { entry }) => {
       await Promise.all([
-        queryClient.invalidateQueries({ queryKey: treeLevelKey(parentOf(entry)) }),
-        queryClient.invalidateQueries({ queryKey: treeLevelKey(destination.id) }),
+        // Both ends of the move and the rows they hang under: a folder that just received its first
+        // row needs its arrow, and one that lost its last has to give it back (#519).
+        queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
         queryClient.invalidateQueries({
           queryKey: [entry.type === "flow" ? "flows" : "node-graph"],
         }),
@@ -313,19 +409,20 @@ export function useTreeMove({
   });
 
   return {
-    start(entry, destination) {
+    start(entry, level, destination) {
       move.reset();
-      setMoving({ entry, initial: destination });
+      setMoving({ entry, level, initial: destination });
     },
     error: move.isError ? move.error : null,
     dialog: moving ? (
       <MoveDialog
         entry={moving.entry}
+        level={moving.level}
         initial={moving.initial}
         close={() => setMoving(null)}
         submit={(destination) => {
           setMoving(null);
-          move.mutate({ entry: moving.entry, destination });
+          move.mutate({ entry: moving.entry, level: moving.level, destination });
         }}
       />
     ) : null,

package/src/app/view-toggle/view-toggle.tsx

@@ -64,7 +64,7 @@ export function ViewToggle({ views = ["editor", "graph"] }: { views?: readonly I
                     search: view === "editor" ? rest : { ...rest, view },
                   });
                 }}
-                className="inline-flex size-8 items-center justify-center rounded-md border bg-background outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+                className="inline-flex size-8 items-center justify-center rounded-md outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
               >
                 <Icon aria-hidden="true" className="size-4" />
               </TooltipTrigger>

package/src/archive/archive.tsx

@@ -3,12 +3,13 @@ import type { Node } from "@anchrd/intel-contract/node";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 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 { useI18n } from "@/i18n/i18n-context.tsx";
 import { kindIcons } from "@/kind-icon.ts";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
-import { useDateTime } from "@/time/time-context.tsx";
+import { RelativeTime } from "@/time/relative-time.tsx";
 
 // One archived thing, whichever side of the tree it came from. The two records stay apart
 // everywhere else (ADR-0004); here they are one list because "what did I throw away" is one
@@ -29,7 +30,6 @@ interface ArchivedEntry {
 export function Archive() {
   const { data } = useIntelRouterContext();
   const i18n = useI18n();
-  const dateTime = useDateTime();
   const queryClient = useQueryClient();
 
   const archived = useQuery({
@@ -102,7 +102,7 @@ export function Archive() {
         queryClient.invalidateQueries({ queryKey: ["archive"] }),
         // The tree gets it back, so every level has to be asked again — the entry may sit
         // anywhere, and the archive does not know where.
-        queryClient.invalidateQueries({ queryKey: ["tree"] }),
+        queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
         queryClient.invalidateQueries({ queryKey: ["node-graph"] }),
         queryClient.invalidateQueries({ queryKey: ["flows"] }),
       ]);
@@ -127,7 +127,7 @@ export function Archive() {
         queryClient.invalidateQueries({ queryKey: ["archive"] }),
         // The tree and the graph did not show the node, but its DISAPPEARANCE can be visible
         // elsewhere: a reference to it no longer resolves afterwards.
-        queryClient.invalidateQueries({ queryKey: ["tree"] }),
+        queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
         queryClient.invalidateQueries({ queryKey: ["node-graph"] }),
         queryClient.invalidateQueries({ queryKey: ["flows"] }),
       ]);
@@ -180,8 +180,9 @@ export function Archive() {
               <span className="sr-only">{i18n.t(`node.kind.${entry.kind}`)}</span>
               <span className="grid min-w-0 flex-1 leading-tight">
                 <span className="truncate text-sm font-medium">{entry.title}</span>
-                <span className="truncate text-xs text-muted-foreground">
-                  {i18n.t("archive.archivedAt", { when: dateTime.at(entry.archivedAt) })}
+                <span className="flex items-center gap-1 truncate text-xs text-muted-foreground">
+                  {i18n.t("archive.archived")}
+                  <RelativeTime value={entry.archivedAt} />
                 </span>
               </span>
               {/* Both actions stay permanently visible: the archive is the one place where getting

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

@@ -9,6 +9,7 @@ import {
   FlowPublishPreview,
   FlowRequirements,
   FlowValidation,
+  FlowVersionList,
   ListFlowsInput,
   PreviewFlowPublishInput,
   PublishFlowInput,
@@ -441,6 +442,9 @@ export function createIntelDataProvider(
         body: JSON.stringify(parsed),
       });
     },
+    async listFlowVersions(flowId) {
+      return await request(`/flows/${encodeURIComponent(flowId)}/versions`, FlowVersionList);
+    },
     async previewFlowPublish(input) {
       const parsed = PreviewFlowPublishInput.parse(input);
       return await request(

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

@@ -9,6 +9,7 @@ import type {
   FlowPublishPreview,
   FlowRequirements,
   FlowValidation,
+  FlowVersionList,
   ListFlowsInput,
   PreviewFlowPublishInput,
   PublishFlowInput,
@@ -166,6 +167,7 @@ export interface IntelDataProvider {
   // stops resolving as another flow's callee; its versions stay untouched.
   archiveFlow(input: ArchiveFlowInput): Promise<Flow>;
   saveFlow(input: SaveFlowVersionInput): Promise<FlowDocument>;
+  listFlowVersions(flowId: string): Promise<FlowVersionList>;
   // Which version each sub-flow call will take once published, and which of them publishing
   // freezes. Read before publishing, so the author agrees to the pins rather than discovering them.
   previewFlowPublish(input: PreviewFlowPublishInput): Promise<FlowPublishPreview>;

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

@@ -5,7 +5,8 @@ import { useState } from "react";
 import type { I18n } from "@/i18n/i18n.types.ts";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
-import { useDateTime } from "@/time/time-context.tsx";
+import { RelativeTime } from "@/time/relative-time.tsx";
+import { TitleRowScrollArea } from "@/title-row/title-row.tsx";
 
 // One page is what a person reads before deciding, not what a database can return. The server caps
 // it at fifty; twenty is what fits on a screen without scrolling past the answer.
@@ -63,7 +64,7 @@ export function FlowRuns({ flowId }: { flowId: string }) {
           {i18n.t("runs.onlyFailed")}
         </label>
       </div>
-      <div className="min-h-0 flex-1 overflow-y-auto p-5">
+      <TitleRowScrollArea className="min-h-0 flex-1 overflow-y-auto p-5">
         {runs.isPending && (
           <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
         )}
@@ -109,14 +110,13 @@ export function FlowRuns({ flowId }: { flowId: string }) {
             {runs.isFetchingNextPage ? i18n.t("common.loading") : i18n.t("runs.more")}
           </button>
         )}
-      </div>
+      </TitleRowScrollArea>
     </section>
   );
 }
 
 function RunRow({ run, open, toggle }: { run: FlowRunSummary; open: boolean; toggle(): void }) {
   const i18n = useI18n();
-  const dateTime = useDateTime();
   const failed = run.status === "failed";
   const Chevron = open ? ChevronDown : ChevronRight;
   return (
@@ -135,7 +135,7 @@ function RunRow({ run, open, toggle }: { run: FlowRunSummary; open: boolean; tog
             >
               {i18n.t(`runs.status.${run.status}`)}
             </span>
-            <span>{dateTime.at(run.startedAt)}</span>
+            <RelativeTime value={run.startedAt} />
             <span className="text-muted-foreground">
               {run.durationMs === null
                 ? i18n.t("runs.stillRunning")