@anchrd/intel-ui 0.23.0 → 0.28.0

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,30 @@ export function treeLevelKey(parentId: string | null): readonly unknown[] {
   return ["tree", parentId];
 }
 
+/**
+ * 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 +75,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 +147,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 +166,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 +202,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 +291,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 +309,7 @@ export function useTreeMove({
   const queryClient = useQueryClient();
   const [moving, setMoving] = useState<{
     entry: TreeEntry;
+    level: string | null | undefined;
     initial: MoveDestination | null;
   } | null>(null);
 
@@ -253,6 +319,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 +340,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,9 +368,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, level, destination }) => {
       await Promise.all([
-        queryClient.invalidateQueries({ queryKey: treeLevelKey(parentOf(entry)) }),
+        ...levelsToClear(entry, level).map(
+          async (from) => await queryClient.invalidateQueries({ queryKey: treeLevelKey(from) }),
+        ),
         queryClient.invalidateQueries({ queryKey: treeLevelKey(destination.id) }),
         queryClient.invalidateQueries({
           queryKey: [entry.type === "flow" ? "flows" : "node-graph"],
@@ -313,19 +383,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

@@ -1,13 +1,14 @@
 import type { Flow } from "@anchrd/intel-contract/flow";
 import type { Node } from "@anchrd/intel-contract/node";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { ArchiveRestore, Trash2 } from "lucide-react";
+import { ArchiveRestore, LoaderCircle, Trash2 } from "lucide-react";
 import { useState } from "react";
+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
@@ -22,12 +23,12 @@ interface ArchivedEntry {
   // Both sides of the tree can be purged (#457) — each through its own door, because node and flow
   // stay separate everywhere else (ADR-0004).
   purge(): Promise<{ purged: true; title: string }>;
+  previewPurge?(): Promise<{ inboundLinks: number; totalItems: number }>;
 }
 
 export function Archive() {
   const { data } = useIntelRouterContext();
   const i18n = useI18n();
-  const dateTime = useDateTime();
   const queryClient = useQueryClient();
 
   const archived = useQuery({
@@ -38,8 +39,10 @@ export function Archive() {
         data.listFlows({ archivedOnly: true }),
       ]);
       const entries: ArchivedEntry[] = [
-        ...nodes.items.flatMap((node) =>
-          node.archivedAt
+        ...nodes.items.flatMap((node) => {
+          // Stable across reloads: after D1 commits, only this key can reach an R2 cleanup receipt.
+          const purgeKey = `purge-${node.id}`;
+          return node.archivedAt
             ? [
                 {
                   id: node.id,
@@ -54,11 +57,12 @@ export function Archive() {
                       archived: false,
                       idempotencyKey: crypto.randomUUID(),
                     }),
-                  purge: () => data.purgeNode({ nodeId: node.id }),
+                  purge: () => data.purgeNode({ nodeId: node.id, idempotencyKey: purgeKey }),
+                  previewPurge: () => data.previewNodePurge({ nodeId: node.id }),
                 } satisfies ArchivedEntry,
               ]
-            : [],
-        ),
+            : [];
+        }),
         ...flows.items.flatMap((flow: Flow) =>
           flow.archivedAt
             ? [
@@ -108,6 +112,12 @@ export function Archive() {
   // that it does not come back. The state lives here because the row underneath disappears the
   // moment the purge goes through.
   const [confirming, setConfirming] = useState<ArchivedEntry | null>(null);
+  const preview = useQuery({
+    queryKey: ["purge-preview", confirming?.id],
+    queryFn: async () => await confirming?.previewPurge?.(),
+    enabled: Boolean(confirming?.previewPurge),
+    retry: false,
+  });
   const purge = useMutation({
     mutationFn: async (entry: ArchivedEntry) => await entry.purge(),
     onSuccess: async () => {
@@ -169,25 +179,48 @@ 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 icons stand PERMANENTLY, not only on hover — a deliberate exception to the
-                  row convention (#457). There are two of them, both rare, and this list is the only
-                  place they occur: the wall of icons anchrd/gate#237 was written against does not
-                  arise here. The way back keeps its text; the purge is a bare icon, so that the two
-                  do not weigh the same. */}
-              <button
-                type="button"
-                disabled={restore.isPending}
-                onClick={() => restore.mutate(entry)}
-                aria-label={i18n.t("archive.restore", { title: entry.title })}
-                className="inline-flex h-8 shrink-0 items-center gap-2 rounded-md border px-3 text-sm font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
-              >
-                <ArchiveRestore aria-hidden="true" className="size-4" />
-                {i18n.t("archive.restoreAction")}
-              </button>
+              {/* Both actions stay permanently visible: the archive is the one place where getting
+                  an item back must never depend on discovering a hover-only control. */}
+              <TooltipProvider delayDuration={300}>
+                <Tooltip>
+                  {/* The wrapper keeps the tooltip available while the button is disabled. */}
+                  <TooltipTrigger asChild>
+                    <span className="inline-flex shrink-0">
+                      <button
+                        type="button"
+                        disabled={restore.isPending}
+                        onClick={() => restore.mutate(entry)}
+                        aria-label={i18n.t(
+                          restore.isPending && restore.variables?.id === entry.id
+                            ? "archive.restoring"
+                            : "archive.restore",
+                          { title: entry.title },
+                        )}
+                        aria-busy={restore.isPending && restore.variables?.id === entry.id}
+                        className="inline-flex size-8 shrink-0 items-center justify-center rounded-md border outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
+                      >
+                        {restore.isPending && restore.variables?.id === entry.id ? (
+                          <LoaderCircle aria-hidden="true" className="size-4 animate-spin" />
+                        ) : (
+                          <ArchiveRestore aria-hidden="true" className="size-4" />
+                        )}
+                      </button>
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {i18n.t(
+                      restore.isPending && restore.variables?.id === entry.id
+                        ? "archive.restoringAction"
+                        : "archive.restoreAction",
+                    )}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
               <button
                 type="button"
                 disabled={purge.isPending}
@@ -206,6 +239,29 @@ export function Archive() {
           <p className="text-sm text-muted-foreground">
             {i18n.t("archive.purge.body", { title: confirming.title })}
           </p>
+          {confirming.previewPurge && preview.data ? (
+            <div className="mt-2 space-y-2 text-sm text-muted-foreground">
+              <p>{i18n.t("archive.purge.items", { count: preview.data.totalItems })}</p>
+              <p>
+                {preview.data.inboundLinks === 0
+                  ? i18n.t("archive.purge.links.none")
+                  : preview.data.inboundLinks === 1
+                    ? i18n.t("archive.purge.links.one")
+                    : i18n.t("archive.purge.links.many", { count: preview.data.inboundLinks })}
+              </p>
+            </div>
+          ) : null}
+          {confirming.previewPurge && preview.isPending ? (
+            <p className="mt-2 text-sm text-muted-foreground">
+              {i18n.t("archive.purge.previewLoading")}
+            </p>
+          ) : null}
+          {confirming.previewPurge && preview.isError ? (
+            <p role="alert" className="mt-2 text-sm text-destructive">
+              {i18n.t("archive.purge.previewFailed")}
+            </p>
+          ) : null}
+          <p className="mt-2 text-sm text-muted-foreground">{i18n.t("archive.purge.grants")}</p>
           <div className="mt-6 flex justify-end gap-2">
             <button
               type="button"
@@ -216,7 +272,10 @@ export function Archive() {
             </button>
             <button
               type="button"
-              disabled={purge.isPending}
+              disabled={
+                purge.isPending ||
+                (Boolean(confirming.previewPurge) && (preview.isPending || preview.isError))
+              }
               onClick={() => purge.mutate(confirming)}
               className="inline-flex h-8 items-center gap-2 rounded-md bg-destructive px-3 text-sm font-medium text-destructive-foreground outline-none hover:bg-destructive/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
             >

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

@@ -9,6 +9,7 @@ import {
   FlowPublishPreview,
   FlowRequirements,
   FlowValidation,
+  FlowVersionList,
   ListFlowsInput,
   PreviewFlowPublishInput,
   PublishFlowInput,
@@ -39,6 +40,8 @@ import {
   NodeTable,
   NodeVersionList,
   PurgeNodeInput,
+  PurgeNodePreview,
+  PurgeNodePreviewInput,
   PurgeNodeResult,
   ReindexResult,
   ResolveNodeLinksInput,
@@ -50,6 +53,7 @@ import {
   UpdateNodeInput,
 } from "@anchrd/intel-contract/node";
 import {
+  ResourceAccessList,
   ResourceGrantList,
   RevokeGrantInput,
   RevokeGrantResult,
@@ -334,8 +338,16 @@ export function createIntelDataProvider(
       const parsed = PurgeNodeInput.parse(input);
       return await request(`/nodes/${encodeURIComponent(parsed.nodeId)}`, PurgeNodeResult, {
         method: "DELETE",
+        body: JSON.stringify(parsed),
       });
     },
+    async previewNodePurge(input) {
+      const parsed = PurgeNodePreviewInput.parse(input);
+      return await request(
+        `/nodes/${encodeURIComponent(parsed.nodeId)}/purge-preview`,
+        PurgeNodePreview,
+      );
+    },
     async purgeFlow(input) {
       const parsed = PurgeFlowInput.parse(input);
       return await request(`/flows/${encodeURIComponent(parsed.flowId)}`, PurgeFlowResult, {
@@ -351,6 +363,12 @@ export function createIntelDataProvider(
     async listGrants(resourceId) {
       return await request(`/nodes/${encodeURIComponent(resourceId)}/grants`, ResourceGrantList);
     },
+    async listEffectiveAccess(resourceId) {
+      return await request(
+        `/nodes/${encodeURIComponent(resourceId)}/effective-access`,
+        ResourceAccessList,
+      );
+    },
     async shareNode(input) {
       const parsed = ShareInput.parse(input);
       return await request(`/nodes/${encodeURIComponent(parsed.resourceId)}/grants`, ShareResult, {
@@ -424,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,
@@ -40,6 +41,7 @@ import type {
   NodeTable,
   NodeVersionList,
   PurgeNodeInput,
+  PurgeNodePreviewInput,
   PurgeNodeResult,
   ReindexResult,
   ResolveNodeLinksInput,
@@ -132,9 +134,15 @@ export interface IntelDataProvider {
   // ⚠️ The one way across this seam after which nothing is really left (#457). The title comes back
   // because nothing can look it up afterwards.
   purgeNode(input: PurgeNodeInput): Promise<PurgeNodeResult>;
+  previewNodePurge(
+    input: PurgeNodePreviewInput,
+  ): Promise<import("@anchrd/intel-contract/node").PurgeNodePreview>;
   purgeFlow(input: PurgeFlowInput): Promise<PurgeFlowResult>;
   searchNodes(input: SearchInput): Promise<SearchResult>;
   listGrants(resourceId: string): Promise<ResourceGrantList>;
+  listEffectiveAccess(
+    resourceId: string,
+  ): Promise<import("@anchrd/intel-contract/share").ResourceAccessList>;
   // The grant, and what the grant does not cover: the documents the flows in this folder read that
   // the new principal still cannot. A warning, never a refusal (ADR-0004 §4).
   shareNode(input: ShareInput): Promise<ShareResult>;
@@ -159,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")

package/src/flows/flows.tsx

@@ -38,7 +38,7 @@ import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom, viewFrom } from "@/router/selection-search.ts";
 import { SaveButton, UnsavedChangesGuard } from "@/save-button/save-button.tsx";
 import { useResolvedTheme } from "@/theme/theme-context.tsx";
-import { TitleRow } from "@/title-row/title-row.tsx";
+import { TitleRow, TitleRowFrame, TitleRowScrollArea } from "@/title-row/title-row.tsx";
 
 type CanvasNode = ReactFlowNode<{ node: FlowNode }, "intel">;
 type CanvasEdge = Edge;
@@ -455,7 +455,7 @@ function FlowsEditor() {
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <TitleRowFrame className="flex h-full min-h-0 flex-col">
       {selectedFlowId && document.data ? (
         <FlowTitle
           flow={document.data.flow}
@@ -634,14 +634,18 @@ function FlowsEditor() {
                 <Controls />
               </ReactFlow>
             </section>
-            <aside className="flex w-80 shrink-0 flex-col overflow-y-auto border-l bg-card">
-              <NodeInspector
-                node={selectedNode}
-                update={updateNode}
-                tools={tools.data?.items ?? []}
-                flows={(callable.data?.items ?? []).filter((entry) => entry.id !== selectedFlowId)}
-              />
-              <FlowNeeds flowId={selectedFlowId} />
+            <aside className="flex w-80 shrink-0 flex-col border-l bg-card">
+              <TitleRowScrollArea className="min-h-0 flex-1 overflow-y-auto">
+                <NodeInspector
+                  node={selectedNode}
+                  update={updateNode}
+                  tools={tools.data?.items ?? []}
+                  flows={(callable.data?.items ?? []).filter(
+                    (entry) => entry.id !== selectedFlowId,
+                  )}
+                />
+                <FlowNeeds flowId={selectedFlowId} />
+              </TitleRowScrollArea>
             </aside>
           </>
         )}
@@ -673,7 +677,7 @@ function FlowsEditor() {
           }}
         />
       ) : null}
-    </div>
+    </TitleRowFrame>
   );
 }
 
@@ -729,7 +733,7 @@ function FlowTitle({
           applies EVERYWHERE stands. But it says how THIS flow is shown, and so belongs in the line
           that names this flow. A flow is the only level with runs, and therefore the only one with
           three views (#35). */}
-      <ViewToggle views={["editor", "graph", "runs"]} />
+      <SaveButton dirty={dirty && canMutate} saving={saving} onSave={onSave} />
       <TooltipProvider delayDuration={300}>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -742,8 +746,8 @@ function FlowTitle({
                 onClick={onPublish}
                 disabled={!publishable}
                 aria-label={publishLabel}
-                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 disabled:opacity-50 ${
-                  publishable && unpublished ? "border-primary text-primary" : ""
+                className={`inline-flex size-8 items-center justify-center rounded-md outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 ${
+                  publishable && unpublished ? "bg-primary/10 text-primary" : ""
                 }`}
               >
                 <Send aria-hidden="true" className="size-4" />
@@ -753,14 +757,7 @@ function FlowTitle({
           <TooltipContent>{publishLabel}</TooltipContent>
         </Tooltip>
       </TooltipProvider>
-      {/* A draft that was never saved has no version, and the button says so rather than claiming
-          one (#432) — the same distinction the publish button next to it already draws. */}
-      <SaveButton
-        dirty={dirty && canMutate}
-        saving={saving}
-        stored={flow.currentVersionId !== null}
-        onSave={onSave}
-      />
+      <ViewToggle views={["editor", "graph", "runs"]} />
     </TitleRow>
   );
 }