@anchrd/intel-ui 0.25.0 → 0.29.0

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;
@@ -285,6 +285,7 @@ function newNode(
   index: number,
   firstNodeId?: string,
   firstFlowId?: string,
+  firstServer?: string,
 ): FlowNode {
   const common = {
     id: `${kind}-${crypto.randomUUID()}`,
@@ -315,10 +316,13 @@ function newNode(
       return {
         ...common,
         kind,
+        // ⚠️ A server, not an empty string. `ToolServerHandle` has a minimum length, so a draft
+        // with `""` cannot be saved at all — the author would build a step and lose it at the next
+        // save with a raw field-path error. The tree link one line up takes the same way out.
         configuration: {
-          toolName: "select-a-tool",
+          server: firstServer ?? "",
+          allow: null,
           fingerprint: null,
-          arguments: {},
         },
       };
     case "condition":
@@ -361,9 +365,11 @@ function FlowsEditor() {
   const theme = useResolvedTheme();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
-  const tools = useQuery({
-    queryKey: ["tools"],
-    queryFn: () => data.listTools(),
+  // The servers a tool step can name (#489). The flat function list the picker used to show is
+  // what that ticket set out to remove; which function runs is decided while the flow runs.
+  const toolServers = useQuery({
+    queryKey: ["tool-servers"],
+    queryFn: () => data.listToolServers(),
   });
   // A tree link points at a node, so the editor needs candidates. The graph is the authorized
   // flat list of them; walking the folder tree for a picker would be the N+1 all over again.
@@ -455,7 +461,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}
@@ -519,6 +525,7 @@ function FlowsEditor() {
                     nodes.length,
                     nodeGraph.data?.nodes[0]?.id,
                     callable.data?.items.find((entry) => entry.id !== selectedFlowId)?.id,
+                    toolServers.data?.items[0]?.handle,
                   );
                   setNodes((current) => [
                     ...current,
@@ -634,14 +641,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}
+                  toolServers={toolServers.data?.items ?? []}
+                  flows={(callable.data?.items ?? []).filter(
+                    (entry) => entry.id !== selectedFlowId,
+                  )}
+                />
+                <FlowNeeds flowId={selectedFlowId} />
+              </TitleRowScrollArea>
             </aside>
           </>
         )}
@@ -673,7 +684,7 @@ function FlowsEditor() {
           }}
         />
       ) : null}
-    </div>
+    </TitleRowFrame>
   );
 }
 
@@ -729,7 +740,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 +753,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 +764,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>
   );
 }
@@ -855,12 +859,12 @@ function PublishPreview({
 function NodeInspector({
   node,
   update,
-  tools,
+  toolServers,
   flows,
 }: {
   node: CanvasNode | null;
   update(fn: (node: FlowNode) => FlowNode): void;
-  tools: Array<{ name: string; title: string | null; fingerprint: string }>;
+  toolServers: Array<{ handle: string; name: string; toolCount: number }>;
   flows: Flow[];
 }) {
   const i18n = useI18n();
@@ -952,50 +956,36 @@ function NodeInspector({
         <div className="mt-4">
           <label className="block text-sm font-medium">
             {i18n.t("flows.tool")}
+            {/* ⚠️ The step names a SERVER since #489. This picker is the smallest thing that keeps
+                the field usable on the new model; the real one — server names from the portal plus
+                an optional narrowing to single functions — is #489's second package and is
+                deliberately not smuggled in here. */}
             <select
-              value={contract.configuration.toolName}
+              value={contract.configuration.server}
               onChange={(event) => {
-                const toolName = event.target.value;
+                const server = event.target.value;
                 update((value) =>
                   value.kind === "tool"
                     ? {
                         ...value,
-                        configuration: {
-                          ...value.configuration,
-                          toolName,
-                          fingerprint:
-                            tools.find((entry) => entry.name === toolName)?.fingerprint ?? null,
-                        },
+                        // The fingerprint belongs to a surface that publishing freezes, and it is
+                        // the server's to compute — a value guessed in the browser would be a
+                        // second answer to a question the API already owns.
+                        configuration: { ...value.configuration, server, fingerprint: null },
                       }
                     : value,
                 );
               }}
               className="mt-2 w-full rounded-md border bg-background px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
             >
-              <option value="select-a-tool">{i18n.t("flows.selectTool")}</option>
-              {tools.map((entry) => (
-                <option key={entry.name} value={entry.name}>
-                  {entry.title ?? entry.name}
+              <option value="">{i18n.t("flows.selectTool")}</option>
+              {toolServers.map((entry) => (
+                <option key={entry.handle} value={entry.handle}>
+                  {entry.name}
                 </option>
               ))}
             </select>
           </label>
-          <ToolArgumentsEditor
-            key={contract.id}
-            label={i18n.t("tools.arguments")}
-            invalidLabel={i18n.t("tools.invalidJson")}
-            initialValue={contract.configuration.arguments}
-            onValid={(argumentsValue) => {
-              update((value) =>
-                value.kind === "tool"
-                  ? {
-                      ...value,
-                      configuration: { ...value.configuration, arguments: argumentsValue },
-                    }
-                  : value,
-              );
-            }}
-          />
         </div>
       )}
     </div>
@@ -1018,7 +1008,7 @@ function FlowNeeds({ flowId }: { flowId: string }) {
     needs.data !== undefined &&
     needs.data.nodes.length === 0 &&
     needs.data.hiddenNodes === 0 &&
-    needs.data.tools.length === 0;
+    needs.data.servers.length === 0;
   return (
     <section aria-label={i18n.t("flows.needs")} className="mt-auto border-t p-5">
       <h2 className="font-semibold">{i18n.t("flows.needs")}</h2>
@@ -1055,13 +1045,13 @@ function FlowNeeds({ flowId }: { flowId: string }) {
               </ul>
             </>
           )}
-          {needs.data.tools.length > 0 && (
+          {needs.data.servers.length > 0 && (
             <>
               <h3 className="mt-4 text-xs font-medium uppercase tracking-wide text-muted-foreground">
                 {i18n.t("flows.needsTools")}
               </h3>
               <ul className="mt-2 space-y-1 text-sm">
-                {needs.data.tools.map((name) => (
+                {needs.data.servers.map((name) => (
                   <li key={name} className="flex items-center gap-2">
                     <Wrench aria-hidden="true" className="size-3.5 shrink-0" />
                     <span className="min-w-0 truncate">{name}</span>
@@ -1070,7 +1060,6 @@ function FlowNeeds({ flowId }: { flowId: string }) {
               </ul>
             </>
           )}
-          <p className="mt-4 text-xs text-muted-foreground">{i18n.t("flows.needsHint")}</p>
         </>
       )}
     </section>
@@ -1121,47 +1110,6 @@ function SubflowVersionField({
   );
 }
 
-function ToolArgumentsEditor({
-  label,
-  invalidLabel,
-  initialValue,
-  onValid,
-}: {
-  label: string;
-  invalidLabel: string;
-  initialValue: Record<string, unknown>;
-  onValid(value: Record<string, unknown>): void;
-}) {
-  const [text, setText] = useState(() => JSON.stringify(initialValue, null, 2));
-  const [invalid, setInvalid] = useState(false);
-  return (
-    <label className="mt-4 block text-sm font-medium">
-      {label}
-      <textarea
-        rows={6}
-        value={text}
-        onChange={(event) => {
-          const next = event.target.value;
-          setText(next);
-          try {
-            const parsed: unknown = JSON.parse(next);
-            if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
-              setInvalid(true);
-              return;
-            }
-            setInvalid(false);
-            onValid(parsed as Record<string, unknown>);
-          } catch {
-            setInvalid(true);
-          }
-        }}
-        className="mt-2 w-full resize-y rounded-md border bg-background px-3 py-2 font-mono text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      />
-      {invalid && <span className="mt-1 block text-xs text-destructive">{invalidLabel}</span>}
-    </label>
-  );
-}
-
 function Field({
   label,
   value,

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.
@@ -33,8 +34,8 @@ function targetOf(entry: TreeEntry): ResourceTarget {
  * fetch separately show it differently the moment one of them is stale, and that is the kind of
  * difference a customer finds before anybody here does. The other half of the bargain is free —
  * every invalidation the tree already does after a create, a move or an archive lands here too, and
- * that now includes the ones this screen's own menu makes: `ResourceMenu` invalidates
- * `["tree", parentId]`, which is this level.
+ * that now includes the ones this screen's own menu makes: since #519 they all refresh every tree
+ * level (`allTreeLevelsKey`), and this level is one of them.
  *
  * ⚠️ There is no "Kind" column since #101. The icon says what a row is, in the same picture the
  * sidebar draws two centimetres to its left, and `sr-only` says it in words for everyone who does
@@ -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.",
@@ -210,8 +215,6 @@
   "tools.toolCount": "{count} Werkzeuge",
   "tools.toolCountOne": "1 Werkzeug",
   "tools.liveNote": "Diese Liste ist eine Live-Abfrage mit deinem eigenen Portal-Zugriff. Intel speichert weder die Werkzeuge noch, wer sie nutzen darf; beides entscheidet das Portal.",
-  "tools.arguments": "Argumente",
-  "tools.invalidJson": "Die Argumente müssen ein JSON-Objekt in geschweiften Klammern sein; eine Liste oder ein einzelner Wert funktioniert nicht.",
   "flows.select": "Wähle einen Flow oder lege einen an, um den visuellen Editor zu öffnen.",
   "flows.inspect": "Wähle einen Schritt, um seine Konfiguration zu bearbeiten.",
   "flows.publish": "Veröffentlichen",
@@ -276,7 +279,6 @@
   "flows.selectTool": "Wähle ein gefundenes Werkzeug",
   "flows.operationFailed": "Der Flow-Vorgang ist fehlgeschlagen. Lade die neueste Fassung und versuche es erneut.",
   "flows.needs": "Was dieser Flow braucht",
-  "flows.needsHint": "Aus dem Graphen gelesen. Ob eine bestimmte Person davon etwas erreicht, entscheidet sich, wenn sie ihn ausführt.",
   "flows.needsNodes": "Dokumente",
   "flows.needsTools": "Werkzeuge",
   "flows.needsHidden": "{count} weitere, die du nicht sehen kannst",
@@ -347,5 +349,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.",
@@ -210,8 +215,6 @@
   "tools.toolCount": "{count} tools",
   "tools.toolCountOne": "1 tool",
   "tools.liveNote": "This list is a live query with your own portal access. Intel stores neither the tools nor who may use them; the portal decides both.",
-  "tools.arguments": "Arguments",
-  "tools.invalidJson": "The arguments must be a JSON object in curly braces; a list or a single value will not work.",
   "flows.select": "Select a flow or create one to open the visual editor.",
   "flows.inspect": "Select a node to edit its configuration.",
   "flows.publish": "Publish",
@@ -276,7 +279,6 @@
   "flows.selectTool": "Select a discovered tool",
   "flows.operationFailed": "The flow operation failed. Reload the latest version and try again.",
   "flows.needs": "What this flow needs",
-  "flows.needsHint": "Read out of the graph. Whether a given person may reach any of it is decided when they run it.",
   "flows.needsNodes": "Documents",
   "flows.needsTools": "Tools",
   "flows.needsHidden": "{count} more you cannot see",
@@ -347,5 +349,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.",
@@ -210,8 +215,6 @@
   "tools.toolCount": "{count} herramientas",
   "tools.toolCountOne": "1 herramienta",
   "tools.liveNote": "Esta lista es una consulta en vivo con tu propio acceso al portal. Intel no guarda ni las herramientas ni quién puede usarlas; ambas cosas las decide el portal.",
-  "tools.arguments": "Argumentos",
-  "tools.invalidJson": "Los argumentos tienen que ser un objeto JSON entre llaves; una lista o un valor suelto no sirven.",
   "flows.select": "Elige un flujo o crea uno para abrir el editor visual.",
   "flows.inspect": "Elige un paso para editar su configuración.",
   "flows.publish": "Publicar",
@@ -276,7 +279,6 @@
   "flows.selectTool": "Elige una herramienta descubierta",
   "flows.operationFailed": "La operación del flujo ha fallado. Carga la versión más reciente e inténtalo de nuevo.",
   "flows.needs": "Qué necesita este flujo",
-  "flows.needsHint": "Leído del grafo. Si una persona concreta llega a algo de esto se decide cuando lo ejecuta.",
   "flows.needsNodes": "Documentos",
   "flows.needsTools": "Herramientas",
   "flows.needsHidden": "{count} más que no puedes ver",
@@ -347,5 +349,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/import-bundle/import-bundle.tsx

@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { zipSync } from "fflate";
 import { useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { treeLevelKey } from "@/app/tree-move/tree-move.tsx";
+import { allTreeLevelsKey } from "@/app/tree-move/tree-move.tsx";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
@@ -93,7 +93,10 @@ export function useBundleImport(options: {
     onSuccess: async (imported) => {
       await options.onImported?.(imported.parentId);
       await Promise.all([
-        queryClient.invalidateQueries({ queryKey: treeLevelKey(imported.parentId) }),
+        // ⚠️ Every level, not the one imported into: the target folder's own row carries whether it
+        // can be opened, and it stands one level higher (#519). An import into an empty folder was
+        // otherwise unreachable in the tree until the page was reloaded.
+        queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
         queryClient.invalidateQueries({ queryKey: ["node-graph"] }),
         // The graph view of that same level draws exactly this list (#19).
         queryClient.invalidateQueries({ queryKey: ["relation-graph"] }),

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>
   );