@anchrd/intel-ui 0.8.7 → 0.9.0

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

@@ -1,17 +1,21 @@
 import { useMutation, useQueries, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
+import { zipSync } from "fflate";
 import {
   ChevronRight,
   CornerLeftUp,
+  FileArchive,
   FileText,
   Folder,
   FolderOpen,
+  FolderUp,
   Plus,
   Table,
   Upload,
   Workflow,
 } from "lucide-react";
 import { useRef, useState } from "react";
+import { defaultModel } from "@/agent/agent-models/agent-models.ts";
 import {
   type MoveDestination,
   moveErrorKey,
@@ -35,17 +39,39 @@ import {
 } from "@/components/ui/sidebar";
 import { flowEntry } from "@/data/intel-data-provider/intel-data-provider.ts";
 import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { useCapabilities } from "@/hooks/use-capabilities.ts";
 import { kindIcons } from "@/kind-icon.ts";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom } from "@/router/selection-search.ts";
 
-type NewKind = "folder" | "document" | "table" | "flow";
+type NewKind = "folder" | "document" | "table" | "flow" | "agent";
+// The two ways a bundle arrives (#137): an existing zip, or a picked folder the browser hands over
+// file by file and this component zips before it travels — one wire format, one server door.
+type ImportKind = "importZip" | "importFolder";
 type Creating = { parentId: string | null; kind: NewKind };
 
 // Attachments are inlined as base64, so the browser holds the file twice while it uploads.
 const MaxUploadBytes = 15_000_000;
 
+// The server refuses anything larger anyway (#137); refusing here saves uploading it first.
+const MaxImportBytes = 64 * 1024 * 1024;
+
+// A picked directory as the zip the import endpoint reads. `webkitRelativePath` carries the folder
+// structure, with the picked folder itself as the first segment — kept, so the folder lands as a
+// folder rather than spilling its contents into the target.
+async function zipOfDirectory(files: readonly File[]): Promise<Blob> {
+  const entries: Record<string, Uint8Array> = {};
+  let total = 0;
+  for (const file of files) {
+    const path = file.webkitRelativePath || file.name;
+    total += file.size;
+    if (total > MaxImportBytes) throw new Error("Import exceeds the 64 MB limit");
+    entries[path] = new Uint8Array(await file.arrayBuffer());
+  }
+  return new Blob([zipSync(entries).slice().buffer], { type: "application/zip" });
+}
+
 async function fileBase64(file: File): Promise<string> {
   if (file.size > MaxUploadBytes) throw new Error("Attachment exceeds the 15 MB upload limit");
   return await new Promise((resolve, reject) => {
@@ -87,6 +113,9 @@ export function AppTree() {
   const [creating, setCreating] = useState<Creating | null>(null);
   const [uploadTo, setUploadTo] = useState<string | null>(null);
   const uploadInput = useRef<HTMLInputElement>(null);
+  const [importTo, setImportTo] = useState<string | null>(null);
+  const importZipInput = useRef<HTMLInputElement>(null);
+  const importFolderInput = useRef<HTMLInputElement>(null);
   const [dragged, setDragged] = useState<TreeEntry | null>(null);
   const draggedRef = useRef<TreeEntry | null>(null);
   // Which target the pointer is over: `undefined` for none, `null` for the root strip, an id for a
@@ -111,8 +140,8 @@ export function AppTree() {
   // ⚠️ The whole point of #11: one query per level, and a level only exists while its folder is
   // open. A recursive load would put an N+1 on every page of the app, because the tree is now on
   // every page.
-  // Ein aufgeklappter Flow zeigt, was er ruft — mit demselben Pfeil-Versprechen eine Ebene tiefer:
-  // ein gerufener Flow, der selbst ruft, lässt sich weiter aufklappen (#59).
+  // An expanded flow shows what it calls — with the same arrow promise one level deeper: a called
+  // flow that calls flows of its own can be expanded further (#59).
   async function flowCallRows(flowId: string): Promise<TreeEntry[]> {
     const calls = await data.listFlowCalls(flowId);
     const openable = new Set(calls.withCalls);
@@ -144,11 +173,11 @@ export function AppTree() {
   }
 
   // ⚠️ The level a row appears in is not the only thing that goes stale. The header search reads
-  // the whole flow list, and the graph is what the link picker and the flow editor's Knowledge step
+  // the whole flow list, and the graph is what the link picker and the flow editor's tree links
   // offer — a row created here has to reach those too, or another screen keeps showing yesterday.
   async function reveal(
     parentId: string | null,
-    collection: "flows" | "knowledge-graph",
+    collection: "flows" | "node-graph",
   ): Promise<void> {
     if (parentId !== null) toggle({ id: parentId, type: "folder" }, true);
     await Promise.all([
@@ -176,7 +205,25 @@ export function AppTree() {
         });
         return { area: "/flows" as const, id: flow.id, parentId, collection: "flows" as const };
       }
-      const node = await data.createKnowledge({
+      // ⚠️ Its own endpoint, not `createNodes`: an agent is created WITH its first definition
+      // version, because a definition names the model and there is no agent without one. The
+      // create dialog does not ask for it — `defaultModel()` answers, and the profile changes it.
+      if (kind === "agent") {
+        const created = await data.createAgent({
+          parentId,
+          title,
+          description: null,
+          definition: { references: [], schedules: [], model: defaultModel() },
+          idempotencyKey: crypto.randomUUID(),
+        });
+        return {
+          area: "/nodes" as const,
+          id: created.node.id,
+          parentId,
+          collection: "node-graph" as const,
+        };
+      }
+      const node = await data.createNodes({
         parentId,
         kind,
         title,
@@ -188,17 +235,17 @@ export function AppTree() {
       // there refusing every append, so the second call happens here rather than being left to the
       // person who created it.
       if (kind === "table") {
-        await data.defineKnowledgeTable({
+        await data.defineTable({
           nodeId: node.id,
           columns,
           idempotencyKey: crypto.randomUUID(),
         });
       }
       return {
-        area: "/knowledge" as const,
+        area: "/nodes" as const,
         id: node.id,
         parentId,
-        collection: "knowledge-graph" as const,
+        collection: "node-graph" as const,
       };
     },
     onSuccess: async (created) => {
@@ -211,7 +258,7 @@ export function AppTree() {
   const upload = useMutation({
     mutationFn: async ({ parentId, file }: { parentId: string | null; file: File }) => {
       const contentBase64 = await fileBase64(file);
-      const node = await data.createKnowledge({
+      const node = await data.createNodes({
         parentId,
         kind: "attachment",
         title: file.name,
@@ -219,7 +266,7 @@ export function AppTree() {
         idempotencyKey: crypto.randomUUID(),
       });
       try {
-        await data.saveKnowledgeAttachment({
+        await data.saveNodeAttachment({
           nodeId: node.id,
           baseVersionId: null,
           contentBase64,
@@ -229,10 +276,10 @@ export function AppTree() {
       } catch (error) {
         // An attachment node without bytes is a row nobody can open. Take it back rather than
         // leaving it in the tree, but never let the cleanup hide the real failure.
-        const current = await data.getKnowledge(node.id).catch(() => null);
+        const current = await data.getNode(node.id).catch(() => null);
         if (current?.version === null && current.node.updatedAt === node.updatedAt) {
           await data
-            .archiveKnowledge({
+            .archiveNode({
               nodeId: node.id,
               baseUpdatedAt: current.node.updatedAt,
               archived: true,
@@ -245,8 +292,28 @@ export function AppTree() {
       return { id: node.id, parentId };
     },
     onSuccess: async (created) => {
-      await reveal(created.parentId, "knowledge-graph");
-      await navigate({ to: "/knowledge", search: { select: created.id } });
+      await reveal(created.parentId, "node-graph");
+      await navigate({ to: "/nodes", search: { select: created.id } });
+    },
+  });
+
+  // One import, one request, one answer (#137): the server creates the whole subtree or nothing,
+  // so this mutation never has a partial state to clean up after — unlike the attachment upload
+  // above, whose two steps can strand a node.
+  const importBundle = useMutation({
+    mutationFn: async ({ parentId, zip }: { parentId: string | null; zip: Blob }) => {
+      if (zip.size > MaxImportBytes) throw new Error("Import exceeds the 64 MB limit");
+      const result = await data.importNodeBundle({
+        nodeId: parentId,
+        zip,
+        idempotencyKey: crypto.randomUUID(),
+      });
+      return { parentId, result };
+    },
+    onSuccess: async (imported) => {
+      // A bundle can carry flows, so the flow collections go stale alongside the node ones.
+      await reveal(imported.parentId, "node-graph");
+      await queryClient.invalidateQueries({ queryKey: ["flows"] });
     },
   });
 
@@ -305,6 +372,11 @@ export function AppTree() {
     uploadInput.current?.click();
   }
 
+  function startImport(parentId: string | null, kind: ImportKind) {
+    setImportTo(parentId);
+    (kind === "importZip" ? importZipInput : importFolderInput).current?.click();
+  }
+
   function renderLevel(parent: Level, ancestors: ReadonlySet<string>, label?: string) {
     const level = levelFor(parent);
     if (!level || level.isPending) {
@@ -371,14 +443,14 @@ export function AppTree() {
     // from `parent_id`. A flow reused by three callers therefore shows up under all three, which is
     // the answer to "what do I run, and how" (ADR-0004 §3).
     const level: Level & { id: string } = { id: entry.id, type: isFolder ? "folder" : "flow" };
-    // ⚠️ Nicht mehr „ist von einer Art, die sich aufklappen lässt", sondern „hat etwas zum
-    // Aufklappen, das dieser Leser sehen darf" (#59). Der Unterschied ist ein Pfeil, der hält, was
-    // er verspricht — vorher stand er an jedem Ordner und jedem Flow, auch an leeren.
+    // ⚠️ No longer "is of a kind that can be expanded", but "has something to expand that this
+    // reader may see" (#59). The difference is an arrow that keeps its promise — before, it stood
+    // on every folder and every flow, empty ones included.
     const expandable = entry.openable;
     const isOpen =
       expandable && expanded.some((open) => open.id === entry.id && open.type === level.type);
     const Icon = isOpen && isFolder ? FolderOpen : kindIcons[entry.kind];
-    const area = entry.type === "flow" ? "/flows" : "/knowledge";
+    const area = entry.type === "flow" ? "/flows" : "/nodes";
     const isActive = location.select === entry.id && location.pathname === area;
     // A row's plus files into that row's place: inside a folder, beside anything else.
     const target = isFolder ? entry.id : parentOf(entry);
@@ -484,6 +556,7 @@ export function AppTree() {
             label={i18n.t("tree.add", { title: entry.title })}
             onSelect={(kind) => {
               if (kind === "upload") startUpload(target);
+              else if (kind === "importZip" || kind === "importFolder") startImport(target, kind);
               else setCreating({ parentId: target, kind });
             }}
           />
@@ -538,9 +611,13 @@ export function AppTree() {
       {/* The tree is the navigation and carries no heading of its own (ADR-0004); the list is
           named for assistive technology instead. */}
       {renderLevel({ id: null, type: "folder" }, new Set(), i18n.t("tree.label"))}
-      {create.isError || upload.isError ? (
+      {create.isError || upload.isError || importBundle.isError ? (
         <p role="alert" className="px-2 py-1.5 text-sm text-destructive">
-          {upload.isError ? i18n.t("tree.uploadFailed") : i18n.t("tree.createFailed")}
+          {importBundle.isError
+            ? i18n.t("tree.importFailed")
+            : upload.isError
+              ? i18n.t("tree.uploadFailed")
+              : i18n.t("tree.createFailed")}
         </p>
       ) : null}
       {/* Four refusals, four sentences — and by the time one is read the row is already back where
@@ -564,6 +641,7 @@ export function AppTree() {
             variant="row"
             onSelect={(kind) => {
               if (kind === "upload") startUpload(null);
+              else if (kind === "importZip" || kind === "importFolder") startImport(null, kind);
               else setCreating({ parentId: null, kind });
             }}
           />
@@ -580,6 +658,38 @@ export function AppTree() {
           event.currentTarget.value = "";
         }}
       />
+      <input
+        ref={importZipInput}
+        type="file"
+        accept=".zip,application/zip"
+        className="sr-only"
+        aria-label={i18n.t("tree.new.importZip")}
+        onChange={(event) => {
+          const file = event.target.files?.[0];
+          if (file) importBundle.mutate({ parentId: importTo, zip: file });
+          event.currentTarget.value = "";
+        }}
+      />
+      {/* `webkitdirectory` is the one way a browser hands over a folder; React does not know the
+          attribute, so it is spread past the type checker rather than invented as a prop. */}
+      <input
+        ref={importFolderInput}
+        type="file"
+        multiple
+        {...({ webkitdirectory: "" } as object)}
+        className="sr-only"
+        aria-label={i18n.t("tree.new.importFolder")}
+        onChange={(event) => {
+          const files = Array.from(event.target.files ?? []);
+          const parentId = importTo;
+          if (files.length > 0) {
+            void zipOfDirectory(files)
+              .then((zip) => importBundle.mutate({ parentId, zip }))
+              .catch(() => importBundle.mutate({ parentId, zip: new Blob([]) }));
+          }
+          event.currentTarget.value = "";
+        }}
+      />
       {creating ? (
         <Modal title={i18n.t(`tree.new.${creating.kind}`)} close={() => setCreating(null)}>
           <CreateForm
@@ -606,15 +716,33 @@ function AddMenu({
 }: {
   label: string;
   variant?: "icon" | "row";
-  onSelect(kind: NewKind | "upload"): void;
+  onSelect(kind: NewKind | "upload" | ImportKind): void;
 }) {
   const { i18n } = useIntelRouterContext();
-  const items: Array<{ kind: NewKind | "upload"; labelKey: string; Icon: typeof Plus }> = [
+  // Whether this deployment runs an agent runtime (#190). Until the answer arrives the item is
+  // absent rather than provisional: a menu entry that vanished after being seen was a lie, one that
+  // appears a beat late was merely loading.
+  const agentRuntime = useCapabilities().data?.agentRuntime === true;
+  const items: Array<{
+    kind: NewKind | "upload" | ImportKind;
+    labelKey: string;
+    Icon: typeof Plus;
+  }> = [
     { kind: "folder", labelKey: "tree.new.folder", Icon: Folder },
     { kind: "document", labelKey: "tree.new.document", Icon: FileText },
     { kind: "table", labelKey: "tree.new.table", Icon: Table },
     { kind: "upload", labelKey: "tree.new.upload", Icon: Upload },
     { kind: "flow", labelKey: "tree.new.flow", Icon: Workflow },
+    // ⚠️ The same icon the tree draws for an agent row, taken from the one kind-icon map rather
+    // than named again here — a second `Bot` beside it is how the two start disagreeing.
+    // Offered only where a runtime exists to run what would be created (#190).
+    ...(agentRuntime
+      ? [{ kind: "agent" as const, labelKey: "tree.new.agent", Icon: kindIcons.agent }]
+      : []),
+    // The bundle round trip's second half (#137): what the export produced, or a plain folder from
+    // the machine, lands here as a new subtree.
+    { kind: "importZip", labelKey: "tree.new.importZip", Icon: FileArchive },
+    { kind: "importFolder", labelKey: "tree.new.importFolder", Icon: FolderUp },
   ];
   return (
     <DropdownMenu>

package/src/app/app.tsx

@@ -16,7 +16,7 @@ import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/s
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
 const sections = [
-  { path: "/knowledge", labelKey: "nav.knowledge" },
+  { path: "/nodes", labelKey: "nav.nodes" },
   { path: "/flows", labelKey: "nav.flows" },
   { path: "/tools", labelKey: "nav.tools" },
 ] as const;
@@ -78,7 +78,7 @@ export function App() {
             <BreadcrumbList>
               <BreadcrumbItem>
                 <BreadcrumbLink asChild>
-                  <Link to="/knowledge">{i18n.t("app.name")}</Link>
+                  <Link to="/nodes">{i18n.t("app.name")}</Link>
                 </BreadcrumbLink>
               </BreadcrumbItem>
               {current ? (

package/src/app/header-search/header-search.tsx

@@ -20,20 +20,20 @@ import {
 } from "@/components/ui/dialog";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
-const Kinds = ["knowledge", "flow", "tool"] as const;
+const Kinds = ["node", "flow", "tool"] as const;
 type Kind = (typeof Kinds)[number];
 
 // Enough to answer "where was that again" without turning the dialog into a result page.
 const ResultLimit = 8;
 
-const areaFor = { knowledge: "/knowledge", flow: "/flows", tool: "/tools" } as const;
+const areaFor = { node: "/nodes", flow: "/flows", tool: "/tools" } as const;
 
 function isMac(): boolean {
   return typeof navigator !== "undefined" && /mac/i.test(navigator.userAgent);
 }
 
 // ⚠️ The deliberate boundary of this ticket, named rather than hidden: Intel has a search endpoint
-// for Knowledge only, so Knowledge hits come from `searchKnowledge()` and the server decides both
+// for nodes only, so node hits come from `searchNodes()` and the server decides both
 // what matches and what may be seen. Flows and Tools have no such endpoint — they are the same
 // authorized lists the screens render, narrowed here in the client.
 //
@@ -81,10 +81,10 @@ export function HeaderSearch() {
   const shows = (candidate: Kind) => kind === null || kind === candidate;
   // A filter that excludes a kind does not ask for it either: no request, and therefore no group
   // that could show up empty.
-  const knowledge = useQuery({
-    queryKey: ["knowledge-search", query],
-    queryFn: () => data.searchKnowledge({ query, limit: ResultLimit }),
-    enabled: open && shows("knowledge") && query.length > 0,
+  const nodes = useQuery({
+    queryKey: ["node-search", query],
+    queryFn: () => data.searchNodes({ query, limit: ResultLimit }),
+    enabled: open && shows("node") && query.length > 0,
   });
   // ⚠️ Deliberately the whole list, not one folder of the tree: a search that only saw the level
   // someone happened to have open would miss the flow they are looking for. The sidebar tree asks
@@ -101,14 +101,14 @@ export function HeaderSearch() {
   });
 
   const active = [
-    ...(shows("knowledge") ? [knowledge] : []),
+    ...(shows("node") ? [nodes] : []),
     ...(shows("flow") ? [flows] : []),
     ...(shows("tool") ? [tools] : []),
   ];
   const searching = query.length > 0 && active.some((source) => source.isPending);
   const failed = query.length > 0 && active.some((source) => source.isError);
 
-  const knowledgeHits = shows("knowledge") ? (knowledge.data?.items ?? []) : [];
+  const nodeHits = shows("node") ? (nodes.data?.items ?? []) : [];
   const flowHits: Flow[] = shows("flow")
     ? (flows.data?.items ?? [])
         .filter((flow) => matches(query, flow.title, flow.description))
@@ -119,7 +119,7 @@ export function HeaderSearch() {
         .filter((tool) => matches(query, tool.name, tool.title, tool.description))
         .slice(0, ResultLimit)
     : [];
-  const total = knowledgeHits.length + flowHits.length + toolHits.length;
+  const total = nodeHits.length + flowHits.length + toolHits.length;
 
   function reach(hit: Kind, select: string) {
     setOpen(false);
@@ -163,7 +163,7 @@ export function HeaderSearch() {
             <DialogTitle>{i18n.t("search.title")}</DialogTitle>
             <DialogDescription>{i18n.t("search.description")}</DialogDescription>
           </DialogHeader>
-          {/* Every source has already decided what matches — the server for Knowledge, the client
+          {/* Every source has already decided what matches — the server for nodes, the client
               filter above for the two lists. Letting cmdk filter again would hide rows the server
               returned, because a row's value is its identity rather than its text. */}
           <Command shouldFilter={false}>
@@ -223,13 +223,13 @@ export function HeaderSearch() {
                 <CommandEmpty>{i18n.t("search.empty", { query })}</CommandEmpty>
               ) : null}
 
-              {knowledgeHits.length > 0 ? (
-                <CommandGroup heading={i18n.t("search.kind.knowledge")}>
-                  {knowledgeHits.map((citation) => (
+              {nodeHits.length > 0 ? (
+                <CommandGroup heading={i18n.t("search.kind.node")}>
+                  {nodeHits.map((citation) => (
                     <CommandItem
                       key={`${citation.nodeId}:${citation.versionId}`}
-                      value={`knowledge:${citation.nodeId}:${citation.versionId}`}
-                      onSelect={() => reach("knowledge", citation.nodeId)}
+                      value={`node:${citation.nodeId}:${citation.versionId}`}
+                      onSelect={() => reach("node", citation.nodeId)}
                     >
                       <FileText aria-hidden="true" />
                       <span className="min-w-0 flex-1">

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

@@ -12,10 +12,10 @@ export type MoveDestination = { id: string | null; title: string };
 
 export type MoveVerdict = "ok" | "self" | "descendant" | "same-place";
 
-// The parent a row is filed under. Knowledge and Flows keep their own record (ADR-0004), so the
+// 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.
 export function parentOf(entry: TreeEntry): string | null {
-  return entry.type === "knowledge" ? entry.node.parentId : entry.flow.parentId;
+  return entry.type === "node" ? entry.node.parentId : entry.flow.parentId;
 }
 
 // One level of the shared tree, as a query key. The move writes into two of them and the picker
@@ -27,14 +27,14 @@ export function treeLevelKey(parentId: string | null): readonly unknown[] {
 // 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 {
-  return entry.type === "knowledge"
+  return entry.type === "node"
     ? { ...entry, node: { ...entry.node, parentId } }
     : { ...entry, flow: { ...entry.flow, parentId } };
 }
 
 /**
  * ⚠️ The trap this ticket is built around: a node must not travel into its own descendants. The
- * service refuses it (`move_cycle`, `knowledge.ts:421`), but a refusal that only arrives once the
+ * service refuses it (`move_cycle`, `nodes.ts:421`), but a refusal that only arrives once the
  * mouse button is already up is the one answer worse than no dragging at all — the drop has to be
  * offered or withheld while the pointer is still moving.
  *
@@ -55,7 +55,7 @@ export function moveVerdict(input: {
 }
 
 // ⚠️ Four refusals, four sentences. The service tells them apart by `code`
-// (`knowledge.ts:331/335/338/361`, `flows.ts:205–217/752`), and so does this: one message for all
+// (`nodes.ts:331/335/338/361`, `flows.ts:205–217/752`), and so does this: one message for all
 // of them would leave the reader guessing which of "you may not write there", "that is not a
 // folder", "that would be a loop" and "somebody else was faster" they have just hit.
 export function moveErrorKey(error: unknown): string {
@@ -64,7 +64,7 @@ export function moveErrorKey(error: unknown): string {
       ? String((error as { code: unknown }).code)
       : null;
   switch (code) {
-    case "knowledge_forbidden":
+    case "node_forbidden":
     case "flow_edit_forbidden":
       return "tree.move.failed.forbidden";
     case "parent_not_folder":
@@ -88,8 +88,8 @@ export function moveErrorKey(error: unknown): string {
  * `nodeVerbQuery`), so moving a document is a change of who may read it — without the word "share"
  * appearing anywhere. That is why every move is confirmed rather than performed on drop.
  *
- * What this deliberately does not do is name the people. `listKnowledgeGrants` answers with the
- * grants sitting on that one folder, needs `share` on it (`knowledge.ts:459`), and says nothing
+ * What this deliberately does not do is name the people. `listGrants` answers with the
+ * grants sitting on that one folder, needs `share` on it (`nodes.ts:459`), and says nothing
  * about the grants above it that reach down. A list built from that would be short of exactly the
  * entries that matter and would read as complete — "nobody is on this folder" while an ancestor
  * opens it to the whole organization. Naming the mechanism truthfully beats enumerating it wrongly;
@@ -263,7 +263,7 @@ export function useTreeMove({
           idempotencyKey: crypto.randomUUID(),
         });
       } else {
-        await data.updateKnowledge({
+        await data.updateNode({
           nodeId: entry.id,
           baseUpdatedAt: entry.node.updatedAt,
           parentId: destination.id,
@@ -303,7 +303,7 @@ export function useTreeMove({
         queryClient.invalidateQueries({ queryKey: treeLevelKey(parentOf(entry)) }),
         queryClient.invalidateQueries({ queryKey: treeLevelKey(destination.id) }),
         queryClient.invalidateQueries({
-          queryKey: [entry.type === "flow" ? "flows" : "knowledge-graph"],
+          queryKey: [entry.type === "flow" ? "flows" : "node-graph"],
         }),
         queryClient.invalidateQueries({ queryKey: ["relation-graph"] }),
       ]);

package/src/app/user-footer/user-footer.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
-import { ChevronsUpDown, LogOut, User, Wrench } from "lucide-react";
+import { Archive as ArchiveIcon, ChevronsUpDown, LogOut, User, Wrench } from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -76,6 +76,12 @@ export function UserFooter() {
               <Wrench aria-hidden="true" />
               {i18n.t("nav.tools")}
             </DropdownMenuItem>
+            {/* The archive lives here rather than in the tree: it is not a place things are IN,
+                it is where they went when they left the tree (#113). */}
+            <DropdownMenuItem onSelect={() => void navigate({ to: "/archive" })}>
+              <ArchiveIcon aria-hidden="true" />
+              {i18n.t("archive.title")}
+            </DropdownMenuItem>
             <DropdownMenuSeparator />
             <DropdownMenuItem
               disabled={logout.isPending}