@anchrd/intel-ui 0.25.0 → 0.28.0

package/src/folder-contents/folder-contents.tsx

@@ -15,7 +15,8 @@ import { useI18n } from "@/i18n/i18n-context.tsx";
 import { kindIcons } from "@/kind-icon.ts";
 import { ResourceMenu, type ResourceTarget } from "@/resource-menu/resource-menu.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";
 
 // The same record the menu is handed everywhere else, read off a level row. A re-labelling, never a
 // second source of truth — a rename works on the whole record, not on a summary of it.
@@ -43,7 +44,6 @@ function targetOf(entry: TreeEntry): ResourceTarget {
 export function FolderContents({ folderId }: { folderId: string }) {
   const { data } = useIntelRouterContext();
   const i18n = useI18n();
-  const dateTime = useDateTime();
   const navigate = useNavigate();
   const level = useQuery({
     queryKey: treeLevelKey(folderId),
@@ -74,7 +74,7 @@ export function FolderContents({ folderId }: { folderId: string }) {
   }
 
   return (
-    <div className="min-h-0 flex-1 overflow-y-auto p-6">
+    <TitleRowScrollArea className="min-h-0 flex-1 overflow-y-auto p-6">
       <div className="overflow-hidden rounded-lg border bg-card">
         <Table>
           <TableHeader className="[&_tr]:bg-muted/40">
@@ -119,7 +119,7 @@ export function FolderContents({ folderId }: { folderId: string }) {
                           column, instead of five loose glyphs at five different widths. */}
                       <span
                         aria-hidden="true"
-                        className="grid size-8 shrink-0 place-items-center rounded-md border bg-muted/50 text-muted-foreground transition-colors group-hover/row:bg-accent group-hover/row:text-accent-foreground"
+                        className="grid size-8 shrink-0 place-items-center rounded-md bg-muted/50 text-muted-foreground transition-colors group-hover/row:bg-accent group-hover/row:text-accent-foreground"
                       >
                         <Icon className="size-4" />
                       </span>
@@ -132,7 +132,7 @@ export function FolderContents({ folderId }: { folderId: string }) {
                     </button>
                   </TableCell>
                   <TableCell className="px-4 text-right text-sm text-muted-foreground tabular-nums">
-                    {dateTime.on(changed)}
+                    <RelativeTime value={changed} />
                   </TableCell>
                   <TableCell className="px-4">
                     <ResourceAccessSummary
@@ -154,6 +154,6 @@ export function FolderContents({ folderId }: { folderId: string }) {
           </TableBody>
         </Table>
       </div>
-    </div>
+    </TitleRowScrollArea>
   );
 }

package/src/i18n/de.json

@@ -71,10 +71,15 @@
   "tree.move.failed.other": "Es konnte nicht verschoben werden. Prüfe deinen Zugriff und versuche es erneut.",
   "resource.menu": "Weitere Aktionen für {title}",
   "resource.rename": "Umbenennen",
+  "resource.move": "Verschieben",
   "resource.renameTitle": "{title} umbenennen",
   "resource.archive": "Archivieren",
   "resource.export": "Export",
   "resource.import": "Import",
+  "resource.downloadCsv": "CSV herunterladen",
+  "resource.validate": "Prüfen",
+  "resource.links": "Verweise",
+  "resource.share": "Freigeben",
   "tree.new.importZip": "ZIP-Bündel importieren",
   "tree.new.importFolder": "Ordner importieren",
   "tree.importZipInto": "ZIP-Bündel in {where} importieren",
@@ -103,7 +108,7 @@
   "archive.purge.confirm": "Endgültig löschen",
   "archive.purge.cancel": "Abbrechen",
   "archive.purgeFailed": "Es konnte nicht vollständig gelöscht werden. Lade neu und versuche es erneut.",
-  "archive.archivedAt": "Archiviert {when}",
+  "archive.archived": "Archiviert",
   "resource.conflict": "Nicht geändert: Jemand anderes hat diesen Eintrag zuerst geändert. Lade ihn neu und versuche es erneut.",
   "resource.forbidden": "Nicht geändert: Du darfst diesen Eintrag nicht ändern.",
   "resource.failed": "Die Änderung wurde nicht gespeichert. Lade die neueste Fassung und versuche es erneut.",
@@ -347,5 +352,7 @@
   "common.close": "Schließen",
   "common.unavailable": "Intel ist derzeit nicht verfügbar.",
   "common.noAccess": "Das ist für dich nicht verfügbar. Es existiert nicht, oder es ist nicht mehr für dich freigegeben.",
-  "common.noPermission": "Dir fehlt die Berechtigung, das zu sehen."
+  "common.noPermission": "Dir fehlt die Berechtigung, das zu sehen.",
+  "title.descriptionMore": "Mehr",
+  "title.descriptionLess": "Weniger"
 }

package/src/i18n/en.json

@@ -71,10 +71,15 @@
   "tree.move.failed.other": "It could not be moved. Check your access and try again.",
   "resource.menu": "More actions for {title}",
   "resource.rename": "Rename",
+  "resource.move": "Move",
   "resource.renameTitle": "Rename {title}",
   "resource.archive": "Archive",
   "resource.export": "Export",
   "resource.import": "Import",
+  "resource.downloadCsv": "Download CSV",
+  "resource.validate": "Check",
+  "resource.links": "Links",
+  "resource.share": "Share",
   "tree.new.importZip": "Import zip bundle",
   "tree.new.importFolder": "Import folder",
   "tree.importZipInto": "Import a zip bundle into {where}",
@@ -103,7 +108,7 @@
   "archive.purge.confirm": "Delete for good",
   "archive.purge.cancel": "Cancel",
   "archive.purgeFailed": "It could not be deleted completely. Reload and try again.",
-  "archive.archivedAt": "Archived {when}",
+  "archive.archived": "Archived",
   "resource.conflict": "It was not changed: somebody else changed this entry first. Reload it and try again.",
   "resource.forbidden": "It was not changed: you may not change this entry.",
   "resource.failed": "The change was not saved. Reload the latest version and try again.",
@@ -347,5 +352,7 @@
   "common.close": "Close",
   "common.unavailable": "Intel is currently unavailable.",
   "common.noAccess": "This is not available to you. It may not exist, or it may no longer be shared with you.",
-  "common.noPermission": "You do not have permission to see this."
+  "common.noPermission": "You do not have permission to see this.",
+  "title.descriptionMore": "More",
+  "title.descriptionLess": "Less"
 }

package/src/i18n/es.json

@@ -70,11 +70,16 @@
   "tree.move.failed.gone": "No se ha movido: esa carpeta ya no existe.",
   "tree.move.failed.other": "No se ha podido mover. Comprueba tu acceso e inténtalo de nuevo.",
   "resource.menu": "Más acciones para {title}",
-  "resource.rename": "Cambiar el nombre",
+  "resource.rename": "Renombrar",
+  "resource.move": "Mover",
   "resource.renameTitle": "Cambiar el nombre de {title}",
   "resource.archive": "Archivar",
   "resource.export": "Exportar",
   "resource.import": "Importar",
+  "resource.downloadCsv": "Descargar CSV",
+  "resource.validate": "Comprobar",
+  "resource.links": "Enlaces",
+  "resource.share": "Compartir",
   "tree.new.importZip": "Importar un paquete zip",
   "tree.new.importFolder": "Importar una carpeta",
   "tree.importZipInto": "Importar un paquete zip en {where}",
@@ -103,7 +108,7 @@
   "archive.purge.confirm": "Eliminar definitivamente",
   "archive.purge.cancel": "Cancelar",
   "archive.purgeFailed": "No se pudo eliminar por completo. Recarga e inténtalo de nuevo.",
-  "archive.archivedAt": "Archivado {when}",
+  "archive.archived": "Archivado",
   "resource.conflict": "No se ha cambiado: otra persona ha cambiado esta entrada antes. Recárgala e inténtalo de nuevo.",
   "resource.forbidden": "No se ha cambiado: no puedes cambiar esta entrada.",
   "resource.failed": "El cambio no se ha guardado. Carga la versión más reciente e inténtalo de nuevo.",
@@ -347,5 +352,7 @@
   "common.close": "Cerrar",
   "common.unavailable": "Intel no está disponible en este momento.",
   "common.noAccess": "Esto no está disponible para ti. Puede que no exista o que ya no esté compartido contigo.",
-  "common.noPermission": "No tienes permiso para ver esto."
+  "common.noPermission": "No tienes permiso para ver esto.",
+  "title.descriptionMore": "Más",
+  "title.descriptionLess": "Menos"
 }

package/src/main.tsx

@@ -13,6 +13,7 @@ import { createLanguages } from "@/i18n/i18n-languages/i18n-languages.ts";
 import { createIntelRouter } from "@/router/router.tsx";
 import { applyTheme, readThemeChoice, SystemThemeQuery, themeFor } from "@/theme/theme.ts";
 import { ThemeProvider } from "@/theme/theme-context.tsx";
+import { RelativeClockProvider } from "@/time/relative-time.tsx";
 import { TimeZoneProvider } from "@/time/time-context.tsx";
 import "./styles.css";
 import "./theme/custom.css";
@@ -55,9 +56,11 @@ mounted.render(
         {/* ⚠️ INSIDE `I18nProvider`: the formatter needs both — the language says HOW a time is
             written, the zone WHICH time it is (#467). */}
         <TimeZoneProvider store={window.localStorage}>
-          <QueryClientProvider client={queryClient}>
-            <AppRoot data={data} router={router} refusal={refusal} />
-          </QueryClientProvider>
+          <RelativeClockProvider>
+            <QueryClientProvider client={queryClient}>
+              <AppRoot data={data} router={router} refusal={refusal} />
+            </QueryClientProvider>
+          </RelativeClockProvider>
         </TimeZoneProvider>
       </ThemeProvider>
     </I18nProvider>

package/src/node-editor/node-editor.tsx

@@ -23,6 +23,7 @@ import {
 import type { I18n } from "@/i18n/i18n.types.ts";
 import { Modal } from "@/modal/modal.tsx";
 import { SaveButton, UnsavedChangesGuard } from "@/save-button/save-button.tsx";
+import { TitleRowScrollArea } from "@/title-row/title-row.tsx";
 
 function storedBlocks(content: string | null): IntelEditorPartialBlock[] | undefined {
   if (!content) return undefined;
@@ -167,15 +168,7 @@ export function NodeEditor({
           because this is where `dirty` lives — moving the state up to the screen would mean the
           screen tracking every keystroke in an editor it does not own. */}
       <ActionSlot name="title-actions">
-        {/* ⚠️ `stored` comes from the document the screen holds, not from a flag this component
-            sets on success: it turns true when the answer that carried a version has reached the
-            query cache, and never a moment earlier (#432). */}
-        <SaveButton
-          dirty={dirty}
-          saving={save.isPending}
-          stored={document.version !== null}
-          onSave={() => save.mutate()}
-        />
+        <SaveButton dirty={dirty} saving={save.isPending} onSave={() => save.mutate()} />
       </ActionSlot>
       <UnsavedChangesGuard dirty={dirty} />
       {save.isError && (
@@ -183,7 +176,7 @@ export function NodeEditor({
           {i18n.t("node.saveError")}
         </p>
       )}
-      <div className="min-h-0 flex-1 overflow-y-auto py-6">
+      <TitleRowScrollArea className="min-h-0 flex-1 overflow-y-auto py-6">
         <DocumentLinkProvider
           value={{
             titles: new Map((resolved.data?.items ?? []).map((item) => [item.nodeId, item.title])),
@@ -219,7 +212,7 @@ export function NodeEditor({
             />
           </BlockNoteView>
         </DocumentLinkProvider>
-      </div>
+      </TitleRowScrollArea>
       {picking ? (
         <DocumentPicker
           data={data}

package/src/node-table/node-table.tsx

@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/react-query";
 import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
+import { TitleRowScrollArea } from "@/title-row/title-row.tsx";
 
 /**
  * A table as a grid (#40).
@@ -59,7 +60,7 @@ export function NodeTablePanel({ node }: { node: Node }) {
           {i18n.t("node.table.undefined")}
         </p>
       ) : (
-        <div className="min-h-0 flex-1 overflow-auto">
+        <TitleRowScrollArea className="min-h-0 flex-1 overflow-auto">
           <table className="w-full border-collapse text-sm">
             <caption className="sr-only">{node.title}</caption>
             <thead className="sticky top-0 bg-card">
@@ -97,7 +98,7 @@ export function NodeTablePanel({ node }: { node: Node }) {
           {table.data.rows.length === 0 ? (
             <p className="p-6 text-sm text-muted-foreground">{i18n.t("node.table.empty")}</p>
           ) : null}
-        </div>
+        </TitleRowScrollArea>
       )}
     </div>
   );

package/src/nodes/nodes.tsx

@@ -1,10 +1,9 @@
 import type { Node } from "@anchrd/intel-contract/node";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
-import { Download, History, Paperclip } from "lucide-react";
-import { lazy, Suspense, useState } from "react";
+import { Download, Paperclip } from "lucide-react";
+import { lazy, Suspense } from "react";
 import { ViewToggle } from "@/app/view-toggle/view-toggle.tsx";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { refusalOf } from "@/data/request-refusal/request-refusal.ts";
 import { FolderContents } from "@/folder-contents/folder-contents.tsx";
 import { GraphPane } from "@/graph-pane/graph-pane.tsx";
@@ -12,8 +11,7 @@ import { useI18n } from "@/i18n/i18n-context.tsx";
 import { NodeTablePanel } from "@/node-table/node-table.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { graphViewFrom, selectedFrom } from "@/router/selection-search.ts";
-import { useDateTime } from "@/time/time-context.tsx";
-import { TitleRow } from "@/title-row/title-row.tsx";
+import { TitleRow, TitleRowFrame } from "@/title-row/title-row.tsx";
 
 const NodeEditor = lazy(async () => ({
   default: (await import("@/node-editor/node-editor.tsx")).NodeEditor,
@@ -33,7 +31,6 @@ export function Nodes() {
     }),
   });
   const selectedId = selection.id;
-  const [versionsOpen, setVersionsOpen] = useState(false);
   const document = useQuery({
     queryKey: ["node", selectedId],
     queryFn: () => data.getNode(selectedId ?? ""),
@@ -53,7 +50,7 @@ export function Nodes() {
     enabled: graphable && selection.graph,
   });
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <TitleRowFrame className="flex h-full min-h-0 flex-col">
       <section className="relative flex min-h-0 min-w-0 flex-1 flex-col bg-card">
         {/* ⚠️ Only the root draws its graph on its own. A folder's graph hangs *under* the folder's
             title line rather than in place of it (#58): the line is the one place its menu lives,
@@ -122,9 +119,6 @@ export function Nodes() {
                 document. What the four loose icons used to do is now one menu (#24) — and since #58
                 this line is the only place that menu appears at all, for every kind including a
                 folder, whose whole screen is this line.
-                ⚠️ The order of the right-hand group is `TitleRow`'s (#53), not this screen's: the
-                version button is handed over as a child and lands before the menu whatever else
-                shows up later.
                 ⚠️ #454: the toggle now stands HERE. It used to stand in the global header, beside
                 the search — where what applies everywhere stands. But a graph view does not apply
                 everywhere, it is a view onto THIS item. It is only drawn where there is a graph: on
@@ -135,22 +129,6 @@ export function Nodes() {
               target={{ type: "node", node: selected }}
             >
               {graphable && <ViewToggle />}
-              {selected.kind !== "folder" && (
-                <TooltipProvider delayDuration={300}>
-                  <Tooltip>
-                    <TooltipTrigger
-                      type="button"
-                      onClick={() => setVersionsOpen((value) => !value)}
-                      aria-label={i18n.t("node.versions")}
-                      aria-expanded={versionsOpen}
-                      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"
-                    >
-                      <History aria-hidden="true" className="size-4" />
-                    </TooltipTrigger>
-                    <TooltipContent>{i18n.t("node.versions")}</TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              )}
             </TitleRow>
             {graphable && selection.graph ? (
               <GraphPane
@@ -185,13 +163,10 @@ export function Nodes() {
                 />
               </Suspense>
             ) : null}
-            {versionsOpen && selected.kind !== "folder" && (
-              <VersionHistory nodeId={selected.id} close={() => setVersionsOpen(false)} />
-            )}
           </>
         )}
       </section>
-    </div>
+    </TitleRowFrame>
   );
 }
 
@@ -235,51 +210,3 @@ function AttachmentPanel({ node }: { node: Node }) {
     </div>
   );
 }
-
-function VersionHistory({ nodeId, close }: { nodeId: string; close(): void }) {
-  const { data } = useIntelRouterContext();
-  const i18n = useI18n();
-  const dateTime = useDateTime();
-  const versions = useQuery({
-    queryKey: ["node-versions", nodeId],
-    queryFn: () => data.listNodeVersions(nodeId),
-  });
-  return (
-    <aside
-      aria-label={i18n.t("node.versions")}
-      className="absolute bottom-0 right-0 top-0 z-10 w-80 overflow-y-auto border-l bg-card p-5 shadow-xl"
-    >
-      <div className="flex items-start justify-between gap-4">
-        <h3 className="font-semibold">{i18n.t("node.versions")}</h3>
-        <button
-          type="button"
-          onClick={close}
-          aria-label={i18n.t("common.close")}
-          className="rounded-md px-2 py-1 text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-        >
-          ×
-        </button>
-      </div>
-      {versions.isPending ? (
-        <p className="mt-4 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
-      ) : null}
-      {versions.isError ? (
-        <p role="alert" className="mt-4 text-sm text-destructive">
-          {i18n.t("node.operationFailed")}
-        </p>
-      ) : null}
-      <ol className="mt-4 space-y-3">
-        {versions.data?.items.map((version) => (
-          <li key={version.id} className="rounded-md border p-3 text-sm">
-            <span className="font-medium">
-              {i18n.t("node.version", { sequence: version.sequence })}
-            </span>
-            <time className="mt-1 block text-xs text-muted-foreground" dateTime={version.createdAt}>
-              {dateTime.at(version.createdAt)}
-            </time>
-          </li>
-        ))}
-      </ol>
-    </aside>
-  );
-}

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

@@ -11,6 +11,7 @@ import {
   FileArchive,
   FolderDown,
   FolderUp,
+  History,
   Link2,
   Pencil,
   Share2,
@@ -24,7 +25,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
@@ -37,6 +37,7 @@ import { useBundleImport } from "@/import-bundle/import-bundle.tsx";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom } from "@/router/selection-search.ts";
+import { RelativeTime } from "@/time/relative-time.tsx";
 import { useDateTime } from "@/time/time-context.tsx";
 
 /**
@@ -142,6 +143,7 @@ export function ResourceMenu({
   const [renaming, setRenaming] = useState(false);
   const [sharing, setSharing] = useState(false);
   const [linksOpen, setLinksOpen] = useState(false);
+  const [versionsOpen, setVersionsOpen] = useState(false);
   const selected = useRouterState({ select: (state) => selectedFrom(state.location.search) });
   const pathname = useRouterState({ select: (state) => state.location.pathname });
   // ⚠️ Dragging is a pointer gesture and nothing else: no keyboard, no screen reader, no touch worth
@@ -314,35 +316,26 @@ export function ResourceMenu({
           className={
             variant === "row"
               ? "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition hover:bg-accent hover:text-accent-foreground focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:opacity-100 group-focus-within/row:opacity-100 group-hover/row:opacity-100 md:opacity-0"
-              : "inline-flex size-8 shrink-0 items-center justify-center rounded-md border bg-background outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+              : "inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
           }
         >
           <Ellipsis aria-hidden="true" className="size-4" />
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" className="w-52">
+        <DropdownMenuContent align="start" className="min-w-40 whitespace-nowrap">
           <DropdownMenuItem onSelect={() => setRenaming(true)}>
             <Pencil aria-hidden="true" />
             {i18n.t("resource.rename")}
           </DropdownMenuItem>
-          {/* ⚠️ #455: the hint is the actual change of the ticket. Dragging in the tree has been
-              built and shipped since 2026-08-02 — Jack asked for it anyway, so the feature was not
-              the problem, its discoverability was. Nothing about a row says it is movable before you
-              touch it: `cursor-grab` is only visible once the pointer is already on it, and the root
-              drop target appears only while something is being carried.
-
-              A menu is where you learn what can be done with a thing — the same place an application
-              names its keyboard shortcuts. No handle and no extra icon (Jack's instruction), and
-              readable without the pointer ever touching the row.
-
-              ⚠️ The dialog behind it stays the main path, not the fallback: touch has no
-              `dragstart`, and nothing can be dragged by keyboard at all. Dragging is the shortcut
-              for the mouse — the hint says exactly that, in the place that is reachable both ways. */}
-          <DropdownMenuItem onSelect={() => move.start(entryOf(target), null)}>
+          {/* The dialog stays the complete keyboard and touch path. Dragging is only a mouse
+              shortcut; it does not need a second label beside this action. */}
+          {/* ⚠️ `undefined`, and that is the honest answer rather than a missing one: this menu hangs
+              on a resource's own title line, so there is no rendered tree level to name. Passing the
+              record's parent instead would claim to know a level — and for a shared row it would
+              name the sharer's folder, which is exactly the wrong one (#446). `useTreeMove` reads
+              the absence and cleans up both levels such a row can be standing in. */}
+          <DropdownMenuItem onSelect={() => move.start(entryOf(target), undefined, null)}>
             <CornerLeftUp aria-hidden="true" />
-            {i18n.t("tree.move.action")}
-            <span aria-hidden="true" className="ml-auto text-xs text-muted-foreground">
-              {i18n.t("tree.move.hint")}
-            </span>
+            {i18n.t("resource.move")}
           </DropdownMenuItem>
           {/* Every kind exports: a folder takes its subtree along, everything else is a bundle of
               one (#136). The entry sits with rename and move because it acts on the whole thing,
@@ -356,7 +349,7 @@ export function ResourceMenu({
           {isTable ? (
             <DropdownMenuItem onSelect={() => downloadCsv.mutate()}>
               <Download aria-hidden="true" />
-              {i18n.t("node.table.download")}
+              {i18n.t("resource.downloadCsv")}
             </DropdownMenuItem>
           ) : null}
           {/* The other half of the same round trip, next to it rather than in the tree's plus
@@ -384,14 +377,13 @@ export function ResourceMenu({
           {node === null ? (
             <DropdownMenuItem onSelect={() => validate.mutate()}>
               <ShieldCheck aria-hidden="true" />
-              {i18n.t("flows.validate")}
+              {i18n.t("resource.validate")}
             </DropdownMenuItem>
           ) : null}
-          {retrievable || linkable || node ? <DropdownMenuSeparator /> : null}
           {linkable ? (
             <DropdownMenuItem onSelect={() => setLinksOpen(true)}>
               <Link2 aria-hidden="true" />
-              {i18n.t("node.links")}
+              {i18n.t("resource.links")}
             </DropdownMenuItem>
           ) : null}
           {/* A flow has no share of its own: it is reached through the folder it is filed in, and a
@@ -400,17 +392,19 @@ export function ResourceMenu({
           {node ? (
             <DropdownMenuItem onSelect={() => setSharing(true)}>
               <Share2 aria-hidden="true" />
-              {i18n.t("node.share")}
+              {i18n.t("resource.share")}
             </DropdownMenuItem>
           ) : null}
+          {(node === null || node.kind !== "folder") && (
+            <DropdownMenuItem onSelect={() => setVersionsOpen(true)}>
+              <History aria-hidden="true" />
+              {i18n.t("node.versions")}
+            </DropdownMenuItem>
+          )}
           {/* A flow is archived like a document (#109). It keeps its versions and its runs; what it
               loses is reach — it leaves the tree, cannot be started, and stops resolving as another
               flow's callee. */}
-          <DropdownMenuSeparator />
-          <DropdownMenuItem
-            onSelect={() => archive.mutate()}
-            className="text-destructive focus:text-destructive"
-          >
+          <DropdownMenuItem onSelect={() => archive.mutate()}>
             <Archive aria-hidden="true" />
             {i18n.t("resource.archive")}
           </DropdownMenuItem>
@@ -497,10 +491,70 @@ export function ResourceMenu({
       ) : null}
       {sharing && node ? <SharePanel node={node} close={() => setSharing(false)} /> : null}
       {linksOpen && node ? <NodeLinksPanel node={node} close={() => setLinksOpen(false)} /> : null}
+      {versionsOpen ? (
+        <VersionHistory target={target} close={() => setVersionsOpen(false)} />
+      ) : null}
     </>
   );
 }
 
+function VersionHistory({ target, close }: { target: ResourceTarget; close(): void }) {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const id = idOf(target);
+  const versions = useQuery({
+    queryKey: [target.type === "flow" ? "flow-versions" : "node-versions", id],
+    queryFn: async () => {
+      const result =
+        target.type === "flow" ? await data.listFlowVersions(id) : await data.listNodeVersions(id);
+      return result.items.map((version) => ({
+        id: version.id,
+        sequence: version.sequence,
+        createdAt: version.createdAt,
+      }));
+    },
+  });
+  return (
+    <aside
+      aria-label={i18n.t("node.versions")}
+      className="absolute bottom-0 right-0 top-0 z-10 w-80 overflow-y-auto border-l bg-card p-5 shadow-xl"
+    >
+      <div className="flex items-start justify-between gap-4">
+        <h3 className="font-semibold">{i18n.t("node.versions")}</h3>
+        <button
+          type="button"
+          onClick={close}
+          aria-label={i18n.t("common.close")}
+          className="rounded-md px-2 py-1 text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          ×
+        </button>
+      </div>
+      {versions.isPending ? (
+        <p className="mt-4 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+      ) : null}
+      {versions.isError ? (
+        <p role="alert" className="mt-4 text-sm text-destructive">
+          {i18n.t(target.type === "flow" ? "flows.operationFailed" : "node.operationFailed")}
+        </p>
+      ) : null}
+      <ol className="mt-4 space-y-3">
+        {versions.data?.map((version) => (
+          <li key={version.id} className="rounded-md border p-3 text-sm">
+            <span className="font-medium">
+              {i18n.t("node.version", { sequence: version.sequence })}
+            </span>
+            <RelativeTime
+              value={version.createdAt}
+              className="mt-1 block text-xs text-muted-foreground"
+            />
+          </li>
+        ))}
+      </ol>
+    </aside>
+  );
+}
+
 // One refusal, over the screen rather than in the menu that is already gone by the time it arrives.
 function MenuFailure({ children }: { children: React.ReactNode }) {
   return (