@anchrd/intel-ui 0.23.0 → 0.28.0

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

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
+import { ResourceAccessSummary } from "@/access-summary/access-summary.tsx";
 import { treeLevelKey } from "@/app/tree-move/tree-move.tsx";
 import {
   Table,
@@ -14,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.
@@ -42,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),
@@ -73,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">
@@ -84,6 +85,9 @@ export function FolderContents({ folderId }: { folderId: string }) {
               <TableHead className="h-9 px-4 text-right text-xs tracking-wide uppercase">
                 {i18n.t("node.changed")}
               </TableHead>
+              <TableHead className="h-9 px-4 text-xs tracking-wide uppercase">
+                {i18n.t("node.access")}
+              </TableHead>
               {/* A `<th>` with nothing in it leaves the column unnamed for anyone reading the table
                   by its headers. The word is there; only the eye is spared it. */}
               <TableHead className="h-9 w-14">
@@ -115,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>
@@ -128,7 +132,15 @@ 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
+                      resourceId={
+                        entry.type === "flow" ? (entry.flow.parentId ?? folderId) : entry.id
+                      }
+                      ownerId={entry.type === "flow" ? entry.flow.ownerId : entry.node.ownerId}
+                    />
                   </TableCell>
                   {/* ⚠️ The same menu as the title line of the open thing, not a shorter one built
                       for here. #58 collected every action in one place so that place is always the
@@ -142,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",
@@ -85,16 +90,25 @@
   "archive.description": "Alles, was du archiviert hast, das Neueste zuerst. Beim Wiederherstellen kommt ein Eintrag dorthin zurück, wo er lag.",
   "archive.restore": "{title} wiederherstellen",
   "archive.restoreAction": "Wiederherstellen",
+  "archive.restoring": "{title} wird wiederhergestellt",
+  "archive.restoringAction": "Wird wiederhergestellt",
   "archive.empty": "Es ist nichts archiviert.",
   "archive.failed": "Das Archiv konnte nicht gelesen werden. Prüfe deinen Zugriff und versuche es erneut.",
   "archive.restoreFailed": "Es wurde nicht wiederhergestellt. Vielleicht hat jemand anderes es geändert — lade neu und versuche es erneut.",
   "archive.purge": "{title} endgültig löschen",
   "archive.purge.title": "Endgültig löschen?",
   "archive.purge.body": "„{title}\u201c und alles, was dazugehört — jede Version, der Inhalt und die Einträge im Suchindex — ist danach weg. Das lässt sich nicht rückgängig machen.",
+  "archive.purge.links.none": "Keine anderen Dokumente verweisen darauf.",
+  "archive.purge.links.one": "Ein anderes Dokument verweist darauf; dieser Verweis wird brechen.",
+  "archive.purge.links.many": "{count} andere Dokumente verweisen darauf; diese Verweise werden brechen.",
+  "archive.purge.grants": "Die Freigaben werden ebenfalls gelöscht.",
+  "archive.purge.items": "Damit werden insgesamt {count} Elemente endgültig gelöscht.",
+  "archive.purge.previewLoading": "Verweise werden geprüft …",
+  "archive.purge.previewFailed": "Die Verweise konnten nicht geprüft werden. Lade neu und versuche es vor dem Löschen erneut.",
   "archive.purge.confirm": "Endgültig löschen",
   "archive.purge.cancel": "Abbrechen",
-  "archive.purgeFailed": "Es konnte nicht gelöscht werden. Ein Ordner muss zuerst leer sein, und was ein publizierter Flow noch benutzt, kann gar nicht weg.",
-  "archive.archivedAt": "Archiviert {when}",
+  "archive.purgeFailed": "Es konnte nicht vollständig gelöscht werden. Lade neu und versuche es erneut.",
+  "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.",
@@ -119,7 +133,6 @@
   "node.share": "Freigeben",
   "node.shareAction": "Zugriff geben",
   "node.email": "E-Mail-Adresse",
-  "node.emailHint": "Intel kann nicht prüfen, ob hinter dieser Adresse ein Konto steht. Die Freigabe greift, sobald sich jemand damit anmeldet — auch nach einer späteren Registrierung.",
   "node.shareWith": "Wer Zugriff bekommt",
   "node.shareWithEmail": "Eine E-Mail-Adresse",
   "node.shareWithOrganization": "Alle in der Organisation",
@@ -137,8 +150,13 @@
   "node.verbHint.execute": "Die Flows hier drin starten",
   "node.verbHint.share": "Anderen Zugriff geben",
   "node.organization": "Alle in der Organisation",
+  "node.owner": "Besitzer",
+  "node.access": "Zugriff",
+  "node.organizationAccess": "Alle in der Organisation haben Zugriff",
+  "node.accessDetails": "Zugriffsdetails anzeigen ({count})",
+  "node.revokeVerb": "{verb} entziehen",
+  "node.revokeVerbFor": "{verb} für {recipient} entziehen",
   "node.revokeShare": "Zugriff entziehen",
-  "node.noGrants": "Außer der Besitzerin oder dem Besitzer hat noch niemand Zugriff.",
   "node.shareFailed": "Der Zugriff wurde nicht geändert. Prüfe deine Berechtigung und versuche es erneut.",
   "node.shareUnreadable": "Flows in diesem Ordner lesen Dokumente, die diese Freigabe nicht abdeckt: {titles}.",
   "node.shareUnreadableMore": "{count} weitere liegen ebenfalls außer Reichweite, und du kannst sie nicht sehen.",
@@ -334,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}",
@@ -85,16 +90,25 @@
   "archive.description": "Everything you archived, newest first. Restoring puts an entry back where it was filed.",
   "archive.restore": "Restore {title}",
   "archive.restoreAction": "Restore",
+  "archive.restoring": "Restoring {title}",
+  "archive.restoringAction": "Restoring",
   "archive.empty": "Nothing is archived.",
   "archive.failed": "The archive could not be read. Check your access and try again.",
   "archive.restoreFailed": "It was not restored. Somebody else may have changed it — reload and try again.",
   "archive.purge": "Delete {title} for good",
   "archive.purge.title": "Delete this for good?",
   "archive.purge.body": "“{title}” and everything belonging to it — every version, its content and its entries in the search index — will be gone. This cannot be undone.",
+  "archive.purge.links.none": "No other documents link to it.",
+  "archive.purge.links.one": "One other document links to it and that link will break.",
+  "archive.purge.links.many": "{count} other documents link to it and those links will break.",
+  "archive.purge.grants": "Its shares will also be deleted.",
+  "archive.purge.items": "This permanently deletes {count} items in total.",
+  "archive.purge.previewLoading": "Checking links…",
+  "archive.purge.previewFailed": "The links could not be checked. Reload and try again before deleting.",
   "archive.purge.confirm": "Delete for good",
   "archive.purge.cancel": "Cancel",
-  "archive.purgeFailed": "It could not be deleted. A folder has to be empty first, and a node a published flow still uses cannot go at all.",
-  "archive.archivedAt": "Archived {when}",
+  "archive.purgeFailed": "It could not be deleted completely. Reload and try again.",
+  "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.",
@@ -119,7 +133,6 @@
   "node.share": "Share",
   "node.shareAction": "Grant access",
   "node.email": "Email address",
-  "node.emailHint": "Intel cannot check whether an account exists behind this address. The grant takes effect as soon as somebody signs in with it — including after they register.",
   "node.shareWith": "Who gets access",
   "node.shareWithEmail": "One email address",
   "node.shareWithOrganization": "Everyone in the organization",
@@ -137,8 +150,13 @@
   "node.verbHint.execute": "Start the flows in here",
   "node.verbHint.share": "Give others access",
   "node.organization": "Everyone in the organization",
+  "node.owner": "Owner",
+  "node.access": "Access",
+  "node.organizationAccess": "Everyone in the organization has access",
+  "node.accessDetails": "Show access details ({count})",
+  "node.revokeVerb": "Revoke {verb}",
+  "node.revokeVerbFor": "Revoke {verb} for {recipient}",
   "node.revokeShare": "Revoke access",
-  "node.noGrants": "Nobody outside the owner has access yet.",
   "node.shareFailed": "Access was not changed. Check your permission and try again.",
   "node.shareUnreadable": "Flows in this folder read documents this grant does not cover: {titles}.",
   "node.shareUnreadableMore": "{count} more are out of reach too, and you cannot see them.",
@@ -334,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}",
@@ -85,16 +90,25 @@
   "archive.description": "Todo lo que has archivado, lo más reciente primero. Al restaurar, una entrada vuelve al sitio donde estaba.",
   "archive.restore": "Restaurar {title}",
   "archive.restoreAction": "Restaurar",
+  "archive.restoring": "Restaurando {title}",
+  "archive.restoringAction": "Restaurando",
   "archive.empty": "No hay nada archivado.",
   "archive.failed": "El archivo no se ha podido leer. Comprueba tu acceso e inténtalo de nuevo.",
   "archive.restoreFailed": "No se ha restaurado. Puede que otra persona lo haya cambiado — recarga e inténtalo de nuevo.",
   "archive.purge": "Eliminar «{title}» definitivamente",
   "archive.purge.title": "¿Eliminar definitivamente?",
   "archive.purge.body": "«{title}» y todo lo que le pertenece — cada versión, su contenido y sus entradas en el índice de búsqueda — desaparecerá. Esto no se puede deshacer.",
+  "archive.purge.links.none": "Ningún otro documento contiene un enlace a este elemento.",
+  "archive.purge.links.one": "Otro documento contiene un enlace a este elemento y ese enlace dejará de funcionar.",
+  "archive.purge.links.many": "Otros {count} documentos contienen enlaces a este elemento y dejarán de funcionar.",
+  "archive.purge.grants": "Sus permisos compartidos también se eliminarán.",
+  "archive.purge.items": "Esto elimina definitivamente {count} elementos en total.",
+  "archive.purge.previewLoading": "Comprobando enlaces…",
+  "archive.purge.previewFailed": "No se pudieron comprobar los enlaces. Recarga e inténtalo de nuevo antes de eliminar.",
   "archive.purge.confirm": "Eliminar definitivamente",
   "archive.purge.cancel": "Cancelar",
-  "archive.purgeFailed": "No se pudo eliminar. Una carpeta debe estar vacía primero, y lo que un flujo publicado todavía usa no puede eliminarse.",
-  "archive.archivedAt": "Archivado {when}",
+  "archive.purgeFailed": "No se pudo eliminar por completo. Recarga e inténtalo de nuevo.",
+  "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.",
@@ -119,7 +133,6 @@
   "node.share": "Compartir",
   "node.shareAction": "Conceder acceso",
   "node.email": "Dirección de correo",
-  "node.emailHint": "Intel no puede comprobar si existe una cuenta detrás de esta dirección. El permiso surte efecto en cuanto alguien inicie sesión con ella, incluso si se registra más tarde.",
   "node.shareWith": "Quién obtiene acceso",
   "node.shareWithEmail": "Una dirección de correo",
   "node.shareWithOrganization": "Todos en la organización",
@@ -137,8 +150,13 @@
   "node.verbHint.execute": "Iniciar los flujos que hay aquí dentro",
   "node.verbHint.share": "Dar acceso a otras personas",
   "node.organization": "Todas las personas de la organización",
+  "node.owner": "Propietario",
+  "node.access": "Acceso",
+  "node.organizationAccess": "Toda la organización tiene acceso",
+  "node.accessDetails": "Mostrar detalles de acceso ({count})",
+  "node.revokeVerb": "Retirar {verb}",
+  "node.revokeVerbFor": "Retirar {verb} a {recipient}",
   "node.revokeShare": "Retirar el acceso",
-  "node.noGrants": "Fuera de quien lo posee, todavía no tiene acceso nadie.",
   "node.shareFailed": "El acceso no se ha cambiado. Comprueba tu permiso e inténtalo de nuevo.",
   "node.shareUnreadable": "Los flujos de esta carpeta leen documentos que este acceso no cubre: {titles}.",
   "node.shareUnreadableMore": "{count} más también quedan fuera de alcance, y no puedes verlos.",
@@ -334,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>
-  );
-}