@anchrd/intel 0.59.0

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

@@ -0,0 +1,1175 @@
+import type { NodeKind } from "@contract/node.ts";
+import { useMutation, useQueries, useQueryClient } from "@tanstack/react-query";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
+import { ChevronRight, CornerLeftUp, FolderOpen, Plus, Upload } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+import { createTreeExpansion } from "@/app/tree-expansion/tree-expansion.ts";
+import type { ExpandedLevel } from "@/app/tree-expansion/tree-expansion.types.ts";
+import {
+  allTreeLevelsKey,
+  type MoveDestination,
+  moveErrorKey,
+  moveVerdict,
+  parentOf,
+  treeLevelKey,
+  useTreeMove,
+} from "@/app/tree-move/tree-move.tsx";
+import { folderTrail } from "@/app/tree-reveal/tree-reveal.ts";
+import type { RevealArea } from "@/app/tree-reveal/tree-reveal.types.ts";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+} 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 { refusalOf } from "@/data/request-refusal/request-refusal.ts";
+import { folderContentsOf } from "@/folder-index/folder-index.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { iconFor, kindIcons } from "@/kind-icon.ts";
+import { Modal } from "@/modal/modal.tsx";
+import { useNodeImport } from "@/node-import/node-import.tsx";
+import { useResourceRename } from "@/rename-resource/rename-resource.ts";
+import { resourceErrorKey } from "@/resource-error.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { selectedFrom } from "@/router/selection-search.ts";
+
+/**
+ * What the plus can MAKE — derived from `NodeKind`, never written out again (#395).
+ *
+ * ⚠️ Three decisions about this MENU, each excluded by name: `attachment` because an attachment is
+ * uploaded rather than created, `task` because a task lives on a board and the API refuses one
+ * filed under a folder, and `flow` added because a flow shares the tree without being a node
+ * (ADR-0004 §1). The LIST of node kinds is not a decision here, and a copy of it would go stale in
+ * the direction that already bit us — the parked kinds stood in such a union long after nothing
+ * could make one.
+ *
+ * ⚠️ `task` was NOT excluded until #661, and the wide form carried it in silence from #647 onward:
+ * a menu entry that could only ever answer with a refusal. It is a type error now.
+ */
+type NewKind = Exclude<NodeKind, "attachment" | "task"> | "flow";
+type Creating = { parentId: string | null; kind: NewKind };
+
+/**
+ * A byte count as the sentence beside it says it (#821).
+ *
+ * ⚠️ Megabytes of a million, because that is what the limit IS: the constants are round decimal
+ * numbers, and dividing them by 1024 would put "47.7 MB" in front of somebody whose file manager
+ * says the same file is 48 MB. The number in the message and the number in the check have to be
+ * the same number.
+ */
+// A level is either a folder of the shared tree or the flows one flow calls. The second kind is
+// derived from that flow's graph, not from `parent_id` (ADR-0004 §3), which is why it is its own
+// level rather than another folder.
+type Level = { id: string | null; type: ExpandedLevel["type"] };
+
+// One key per level. `null` is the root; every expanded row adds one of its own, and nothing else is
+// ever asked for.
+function levelKey(level: Level): readonly unknown[] {
+  return level.type === "flow" ? ["flow-calls", level.id] : treeLevelKey(level.id);
+}
+
+// What a drag carries: the row, and the LEVEL it was picked up from.
+//
+// ⚠️ The two are not the same, and that is the whole of #446. Since #429 the root level also shows
+// rows whose own record names a folder this reader may never see — a shared document reaches the
+// root only through the share. Asking `parentOf` again during the move answers with that invisible
+// folder, and then the root offers "move to the top" to a row already at the top, while the level
+// it actually left is never cleaned up. The level is known where the row is rendered; carrying it
+// is cheaper than deriving it wrongly.
+type Carried = { entry: TreeEntry; level: string | null };
+
+// What a row puts on the clipboard for anybody outside the tree. Its own media type rather than
+// `text/plain`, so a drop target that means "move this row" and one that means "make a node for
+// this" cannot be confused by the same payload.
+export const TreeEntryMediaType = "application/x-intel-tree-entry";
+
+export function AppTree() {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  // ⚠️ Read once and written through, the same shape `sidebar-preferences` uses for the shell's own
+  // two values — and here for two reasons rather than one. A reload starts from `[]`, which is the
+  // obvious half; the smaller-looking one is that the shell UNMOUNTS this panel's content when the
+  // sidebar collapses (`app-sidebar.tsx`, #29), so component state alone dies at the first click on
+  // the sidebar trigger and the tree comes back closed from a gesture that says nothing about
+  // folders (#805).
+  const expansion = useRef(createTreeExpansion()).current;
+  const stored = useRef(expansion.read()).current;
+  const [expanded, setExpanded] = useState<readonly ExpandedLevel[]>(stored.levels);
+  // ⚠️ The write is an effect rather than a line in each mutator, and that is a decision taken when
+  // the SECOND writer arrived (#809): the reveal below sets `expanded` from inside a promise, where
+  // the state of this render is no longer the newest one. Every writer therefore uses the updater
+  // form and nobody writes storage by hand — one place, and it cannot be forgotten by the third.
+  const revealedFor = useRef<string | null>(stored.revealed);
+  useEffect(() => {
+    expansion.write({ levels: expanded, revealed: revealedFor.current });
+  }, [expanded, expansion]);
+  const [creating, setCreating] = useState<Creating | null>(null);
+  // Which row is being renamed in place, if any (#823). The ENTRY rather than its id: the mutation
+  // needs `updatedAt` from the row that was read, and looking it up again from the level would read
+  // a row that may have moved on — which is the one thing `baseUpdatedAt` exists to catch.
+  const [renaming, setRenaming] = useState<TreeEntry | null>(null);
+  const [dragged, setDragged] = useState<Carried | null>(null);
+  const draggedRef = useRef<Carried | null>(null);
+  // The id of the one sentence every movable row is described by (#590). Minted rather than written
+  // down: two trees on one page would otherwise share a literal id, and the second would describe
+  // its rows with the first one's element.
+  const movableId = useId();
+  // Which target the pointer is over: `undefined` for none, `null` for the root strip, an id for a
+  // folder row. Three answers, because "the root" and "nothing" are not the same drop.
+  const [over, setOver] = useState<string | null | undefined>(undefined);
+  // The drop's half of the move. The other half is the folder picker in the title line's menu, and
+  // both go through the same mutation (#58, `useTreeMove`) — the tree only adds what a tree can add,
+  // which is opening the folder the row just landed in.
+  const move = useTreeMove({
+    onMoved: (destination) => {
+      if (destination.id !== null) toggle({ id: destination.id, type: "folder" }, true);
+    },
+  });
+  /**
+   * One window for everything that comes in from the machine (#822).
+   *
+   * ⚠️ Until #822 this held the ZIP and the folder, and a single file had an entry of its own
+   * beside them; a folder's three-dot menu had the first two and not the third, so a file could be
+   * brought to the top level and not into a folder. All three answer the same question, so they sit
+   * behind the same word — and the gap closed without anybody having to notice it was there.
+   */
+  const nodeImport = useNodeImport({
+    where: i18n.t("tree.move.root"),
+    onImported: (parentId) => {
+      if (parentId !== null) toggle({ id: parentId, type: "folder" }, true);
+    },
+    onUploaded: async (result) => {
+      const only = result.created.length === 1 ? result.created[0] : undefined;
+      // ⚠️ One file lands where it was made; several do not. A run of ten cannot navigate to one of
+      // them without choosing for the reader — and the choice would be arbitrary, because the tree
+      // shows all ten anyway. What both cases share is the reveal, which is what puts them there.
+      try {
+        if (only !== undefined) await navigate({ to: "/nodes", search: { select: only } });
+      } finally {
+        await reveal(result.parentId, "node-graph");
+      }
+    },
+  });
+
+  const location = useRouterState({
+    select: (state) => ({
+      pathname: state.location.pathname,
+      select: selectedFrom(state.location.search),
+    }),
+  });
+
+  // ⚠️ 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.
+  // 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);
+    return calls.items.map((flow) => flowEntry(flow, openable.has(flow.id)));
+  }
+
+  /**
+   * The levels that still have a row to hang on — `expanded` minus everything the tree no longer
+   * shows (#521).
+   *
+   * ⚠️ `expanded` is only ever added to. A folder that was opened and has since left the tree —
+   * archived, moved away, its share revoked — used to keep its level in `useQueries` for the rest
+   * of the session, and every write from then on re-read a list nothing draws. Nothing was wrong on
+   * screen (`isOpen` needs the row, so the level was never rendered); the requests were simply paid
+   * for, and the number grew with the length of the SESSION rather than with what is on screen.
+   *
+   * ⚠️ Read from the cache rather than from `levels` below, and that is not a shortcut: the answer
+   * is needed BEFORE `useQueries` is told what to load, and deriving it from the results afterwards
+   * can only correct the list one render too late — by which time the request has been made.
+   *
+   * ⚠️ A walk down from the root, not "is the row anywhere": a level whose own row is gone must not
+   * keep vouching for the levels under it, or a whole opened branch would survive its top.
+   *
+   * ⚠️ A row is enough, and `openable` is deliberately NOT part of it although `isOpen` checks it.
+   * `reveal` opens a folder BEFORE the invalidation that gives it its arrow, so a folder that was
+   * empty a moment ago still says `openable: false` at that instant — judging on it would close the
+   * folder #519 exists to have opened. A refetch does not make a level unknown either: TanStack
+   * keeps the previous data while it refetches, so an ordinary invalidation closes nothing.
+   */
+  const rowLevel = (entry: TreeEntry) =>
+    `${entry.kind === "folder" ? "folder" : "flow"}:${entry.id}`;
+  const rootLevel: Level = { id: null, type: "folder" };
+  const open: Level[] = [];
+  let frontier: Level[] = [rootLevel];
+  let waiting = [...expanded];
+  while (frontier.length > 0 && waiting.length > 0) {
+    const shown = new Set(
+      frontier.flatMap((level) =>
+        (queryClient.getQueryData<TreeEntry[]>(levelKey(level)) ?? []).map(rowLevel),
+      ),
+    );
+    frontier = waiting.filter((level) => shown.has(`${level.type}:${level.id}`));
+    waiting = waiting.filter((level) => !frontier.includes(level));
+    open.push(...frontier);
+  }
+
+  const parents: Level[] = [rootLevel, ...open];
+  const levels = useQueries({
+    queries: parents.map((parent) => ({
+      queryKey: levelKey(parent),
+      queryFn: async () =>
+        parent.type === "flow" && parent.id !== null
+          ? // The same row a folder's level builds for a flow, from the same function: what hangs
+            // under an expanded flow differs in where the flows come from, never in what a flow row
+            // is (#30).
+            await flowCallRows(parent.id)
+          : await data.listTreeChildren(parent.id),
+    })),
+  });
+  const levelFor = (level: Level) =>
+    levels[parents.findIndex((entry) => entry.id === level.id && entry.type === level.type)];
+  const root = levels[0];
+
+  // ⚠️ The list the reader opened is also trimmed here, and not only where it is read: `open`
+  // above keeps a departed level from being LOADED, but the entry itself would otherwise sit in
+  // `expanded` until the tab is closed — and a folder that comes back would come back open, which
+  // is a claim about a gesture nobody made in this tree. A gesture is where trimming is free: it
+  // is an event, so there is no render to loop through.
+  //
+  function toggle(level: ExpandedLevel, wanted: boolean) {
+    setExpanded((current) => {
+      const rest = current.filter(
+        (entry) =>
+          (entry.id !== level.id || entry.type !== level.type) &&
+          open.some((live) => live.id === entry.id && live.type === entry.type),
+      );
+      return wanted ? [...rest, level] : rest;
+    });
+  }
+
+  /**
+   * The tree opens itself down to whatever is selected, and this is the one place that does it
+   * (#809). Everything else about a selection is drawing: `isActive` marks a row the tree happens to
+   * be showing anyway, which for a document three folders down is nothing at all — the reader sees
+   * the document open beside a tree that says nothing about where it is.
+   *
+   * ⚠️ ONCE per selection, and the ref is what makes it once. This effect runs on every render while
+   * the selection stands, so opening the trail each time would take a folder the reader has just
+   * closed and open it again: the tree would be arguing with the hand. It is deliberately NOT reset
+   * when the selection goes away either — coming back to the same row through Tools or the archive
+   * is the same selection, and it has been revealed already.
+   *
+   * ⚠️ A row the tree already draws costs NOTHING. That is not an optimisation to be dropped: an
+   * ordinary click in the tree would otherwise read one node per level above it, on a surface that
+   * stands on every screen of the application.
+   */
+  const selectedArea: RevealArea | null =
+    location.pathname === "/nodes" ? "nodes" : location.pathname === "/flows" ? "flows" : null;
+  const drawn = (id: string) =>
+    [rootLevel, ...open].some((level) =>
+      (queryClient.getQueryData<TreeEntry[]>(levelKey(level)) ?? []).some(
+        (entry) => entry.id === id,
+      ),
+    );
+
+  // ⚠️ Written through, not merely held. A ref dies with the component, and this component dies
+  // every time the sidebar is collapsed — while `expanded` survives, because that is what #805
+  // built. Held in memory alone, a folder the reader closed by hand would be opened again by the
+  // next mount, by a reveal that had forgotten it already happened.
+  function remember(selected: string) {
+    revealedFor.current = selected;
+    expansion.write({ levels: expanded, revealed: selected });
+  }
+
+  useEffect(() => {
+    const selected = location.select;
+    if (selected === null || selectedArea === null) return;
+    if (revealedFor.current === selected) return;
+    if (drawn(selected)) {
+      remember(selected);
+      return;
+    }
+    remember(selected);
+    void folderTrail(
+      {
+        // ⚠️ Through the query client, and under the keys the screens themselves use: the selected
+        // row is the one thing the screen beside this tree has already asked for, so the first step
+        // of the trail is normally answered from the cache and costs no request at all.
+        node: async (nodeId) =>
+          (
+            await queryClient.fetchQuery({
+              queryKey: ["node", nodeId],
+              queryFn: () => data.getNode(nodeId),
+            })
+          ).node,
+        flow: async (flowId) =>
+          (
+            await queryClient.fetchQuery({
+              queryKey: ["flow", flowId],
+              queryFn: () => data.getFlow(flowId),
+            })
+          ).flow,
+      },
+      { id: selected, area: selectedArea },
+    ).then((trail) => {
+      // ⚠️ The walk takes as long as the reads above it, and the reader does not wait: two quick
+      // clicks, or two hits from the search, start a second walk while this one is still out. The
+      // answer that comes back late would then open the folders of a row nobody is looking at any
+      // more — nothing is lost, but the tree stands open at a place the selection left.
+      if (revealedFor.current !== selected) return;
+      if (trail.length === 0) return;
+      // The updater form, because this lands after an await and the `expanded` of the render that
+      // started the walk may be several gestures old by now.
+      setExpanded((current) => {
+        const missing = trail.filter(
+          (level) => !current.some((entry) => entry.id === level.id && entry.type === level.type),
+        );
+        return missing.length === 0 ? current : [...current, ...missing];
+      });
+    });
+  });
+
+  /**
+   * ⚠️ Opening the trail is half the answer: a tree taller than the sidebar can have the row open
+   * and out of sight, which reads exactly like not having opened it. `nearest` rather than `center`,
+   * so a row that is already visible does not jump.
+   */
+  const activeRow = useRef<HTMLButtonElement | null>(null);
+  const scrolledTo = useRef<string | null>(null);
+  useEffect(() => {
+    const selected = location.select;
+    if (selected === null || activeRow.current === null) return;
+    if (scrolledTo.current === selected) return;
+    scrolledTo.current = selected;
+    activeRow.current.scrollIntoView({ block: "nearest" });
+  });
+
+  // ⚠️ 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 tree links
+  // offer — a row created here has to reach those too, or another screen keeps showing yesterday.
+  //
+  // ⚠️ And the level written into is not enough either: the folder's own ROW says whether it can be
+  // opened at all, and that row stands one level higher (`allTreeLevelsKey`, #519). Without it the
+  // `toggle` above opens a folder whose arrow never appeared, so the first thing filed into an empty
+  // folder was invisible until the page was reloaded.
+  async function reveal(
+    parentId: string | null,
+    collection: "flows" | "node-graph",
+  ): Promise<void> {
+    if (parentId !== null) toggle({ id: parentId, type: "folder" }, true);
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
+      queryClient.invalidateQueries({ queryKey: [collection] }),
+      // The graph view of that same level draws exactly this list, so it goes stale for the same
+      // reason the level does (#19).
+      queryClient.invalidateQueries({ queryKey: ["relation-graph"] }),
+    ]);
+  }
+
+  const create = useMutation({
+    mutationFn: async ({
+      parentId,
+      kind,
+      title,
+      columns,
+    }: Creating & { title: string; columns: string[] }) => {
+      if (kind === "flow") {
+        const flow = await data.createFlow({
+          parentId,
+          title,
+          description: null,
+          idempotencyKey: crypto.randomUUID(),
+        });
+        return { area: "/flows" as const, id: flow.id, parentId, collection: "flows" as const };
+      }
+      const node = await data.createNodes({
+        parentId,
+        kind,
+        title,
+        description: null,
+        idempotencyKey: crypto.randomUUID(),
+      });
+      // ⚠️ Two calls, because they are two things: the node is a row in the tree, the header is the
+      // contract every later append is measured against (#40). A table without a header would sit
+      // 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.defineTable({
+          nodeId: node.id,
+          columns,
+          idempotencyKey: crypto.randomUUID(),
+        });
+      }
+      /**
+       * ⚠️ **A board's columns are written at creation, in the language of whoever made it** (#675).
+       * The server has a fallback for a board nobody configured, but it cannot know the reader's
+       * language — and columns are SHARED data: two people on one board must read the same names,
+       * and the settings dialog edits one list. Translating per reader would give them different
+       * boards. Written once, they are data anybody can rename.
+       *
+       * ⚠️ It is a second call and it may fail on its own. That is survivable and deliberately not
+       * repaired here: the board then answers with the server's fallback and is usable, which is
+       * the same state a board made over MCP is in. A failure that made the whole creation fail
+       * would trade a usable board for none.
+       */
+      if (kind === "board") {
+        try {
+          await data.updateBoard({
+            boardId: node.id,
+            columns: [
+              { id: "backlog", title: i18n.t("board.column.default.backlog"), terminal: false },
+              { id: "todo", title: i18n.t("board.column.default.todo"), terminal: false },
+              { id: "doing", title: i18n.t("board.column.default.doing"), terminal: false },
+              { id: "done", title: i18n.t("board.column.default.done"), terminal: true },
+            ],
+            idempotencyKey: crypto.randomUUID(),
+          });
+        } catch {
+          /**
+           * ⚠️ **Swallowed on purpose, and the `catch` is what makes that true.** Without it the
+           * failure travels out of the mutation: the node exists, but `onSuccess` never runs, the
+           * screen says "creating failed", and the obvious response — try again — makes a SECOND
+           * board, because nothing tells the reader the first one is already there.
+           *
+           * What is lost by swallowing is one thing and it is repairable: the board answers with
+           * the server's fallback columns instead of the ones in this reader's language. That is
+           * exactly the state a board made over MCP is in, and the settings dialog renames them.
+           */
+        }
+      }
+      return {
+        area: "/nodes" as const,
+        id: node.id,
+        parentId,
+        collection: "node-graph" as const,
+      };
+    },
+    onSuccess: async (created) => {
+      setCreating(null);
+      // ⚠️ The screen first, the refreshes after. Since #519 `reveal` waits on EVERY mounted level,
+      // and a React Query retry is paused while the tab is not in front (#212) — awaiting that
+      // before navigating would leave somebody who just made a document sitting on the old screen
+      // for as long as one level takes to answer.
+      //
+      // ⚠️ `finally`, because both screens are lazy chunks: a failed chunk load throws out of
+      // `navigate`, and without this the tree, the collections and the graph would silently keep
+      // yesterday's rows for the rest of the session — the very state this ticket is about.
+      try {
+        await navigate({ to: created.area, search: { select: created.id } });
+      } finally {
+        await reveal(created.parentId, created.collection);
+      }
+    },
+  });
+
+  // What a drop on this target would do. `undefined` means nothing is being dragged, so the target
+  // is not a target at all.
+  function verdictFor(
+    carried: Carried | null,
+    targetId: string | null,
+    targetAncestors: ReadonlySet<string>,
+  ) {
+    if (!carried) return undefined;
+    return moveVerdict({
+      draggedId: carried.entry.id,
+      draggedParentId: parentOf(carried.entry),
+      draggedLevel: carried.level,
+      targetId,
+      targetAncestors,
+    });
+  }
+
+  function dropHandlers(target: MoveDestination, ancestors: ReadonlySet<string>) {
+    // Two readings of the same question. The render-time one drives what is on screen; the handlers
+    // ask `draggedRef` instead, because a drag's events can all arrive before React has re-rendered
+    // and a closure over the previous render would then move the previous row.
+    const verdict = verdictFor(dragged, target.id, ancestors);
+    return {
+      verdict,
+      props: {
+        onDragOver: (event: React.DragEvent) => {
+          if (verdictFor(draggedRef.current, target.id, ancestors) !== "ok") {
+            event.dataTransfer.dropEffect = "none";
+            return;
+          }
+          // Without `preventDefault` the browser refuses the drop, so this is also what makes the
+          // "not allowed" cursor appear over every target the tree has ruled out.
+          event.preventDefault();
+          event.dataTransfer.dropEffect = "move";
+          setOver(target.id);
+        },
+        onDragLeave: () => setOver((current) => (current === target.id ? undefined : current)),
+        onDrop: (event: React.DragEvent) => {
+          event.preventDefault();
+          const carried = draggedRef.current;
+          setOver(undefined);
+          setDragged(null);
+          draggedRef.current = null;
+          if (carried && verdictFor(carried, target.id, ancestors) === "ok") {
+            move.start(carried.entry, carried.level, target);
+          }
+        },
+      },
+    };
+  }
+
+  function renderLevel(parent: Level, ancestors: ReadonlySet<string>, label?: string) {
+    const level = levelFor(parent);
+    if (!level || level.isPending) {
+      return (
+        <SidebarMenu aria-label={label}>
+          {[0, 1, 2].map((row) => (
+            <SidebarMenuItem key={row}>
+              <SidebarMenuSkeleton showIcon />
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      );
+    }
+    // ⚠️ A refusal, not a failure (#430). While this branch did not exist, a reader whose share had
+    // been revoked — or who holds no `intel.nodes.read` at all — watched the three skeleton bars
+    // above for as long as the retries lasted, and the retries are paused whenever the tab is not
+    // in front. Neither of those two cases is worth trying again, so what stands here is a sentence
+    // and no button.
+    const refusal = refusalOf(level.error);
+    if (refusal) {
+      return (
+        <p role="status" className="px-2 py-1.5 text-sm text-muted-foreground">
+          {i18n.t(refusal === "no-permission" ? "common.noPermission" : "common.noAccess")}
+        </p>
+      );
+    }
+    if (level.isError) {
+      return (
+        <div role="alert" className="space-y-2 px-2 py-1.5 text-sm">
+          <p className="text-destructive">{i18n.t("tree.failed")}</p>
+          <button
+            type="button"
+            onClick={() => void level.refetch()}
+            className="rounded-md border px-2 py-1 text-xs outline-none hover:bg-sidebar-accent focus-visible:ring-2 focus-visible:ring-sidebar-ring"
+          >
+            {i18n.t("common.retry")}
+          </button>
+        </div>
+      );
+    }
+    // ⚠️ The cycle guard, in the form a per-level load needs: a broken `parentId` that points back
+    // up would otherwise open the same folder inside itself for as long as anyone keeps clicking.
+    // The recursion is gone, so the depth limit that used to save us is gone with it; what stops it
+    // now is that a row already on the path from the root is not rendered again.
+    // ⚠️ The folder's own text is not one of its contents (#824): a document called `index`
+    // describes the folder it is in, and it appears in that folder's details rather than as a row
+    // under it. `folderContentsOf` is the one place that decides which row that is.
+    const entries =
+      folderContentsOf(parent.id, level.data ?? []).filter((entry) => !ancestors.has(entry.id)) ??
+      [];
+    if (entries.length === 0) {
+      // ⚠️ Nothing that is empty says so any more (#59). "This flow calls no other flow" used to
+      // stand here as an answer rather than filler — but a row that cannot be opened is the answer,
+      // and now no such row can be opened: the chevron only appears where there is something under
+      // it. The sentence would only ever be read by somebody who got here another way.
+      //
+      // `tree.empty` at the ROOT stays, and for a different reason that still holds: a completely
+      // blank sidebar on a fresh installation leaves a new user without any way in.
+      const message = parent.type === "folder" && parent.id === null ? i18n.t("tree.empty") : null;
+      // The folder keeps its list, empty. The structure is what carries "there is nothing here" to
+      // a screen reader — "list, 0 items" — which is the same answer the missing rows give a reader
+      // who can see them, and neither of them is a sentence.
+      return message === null ? (
+        <SidebarMenu aria-label={label} />
+      ) : (
+        <p className="px-2 py-1.5 text-sm text-muted-foreground">{message}</p>
+      );
+    }
+    return (
+      <SidebarMenu aria-label={label}>
+        {entries.map((entry) => renderRow(entry, parent, ancestors))}
+      </SidebarMenu>
+    );
+  }
+
+  // ⚠️ A level under a FLOW is derived: its rows are that flow's calls, read out of its graph
+  // (ADR-0004 §3, `levelKey`). Nothing there has a `parent_id` to rewrite, so those rows are neither
+  // dragged nor dropped on — a move made there would silently be a move of the shared flow itself.
+  function renderRow(entry: TreeEntry, parent: Level, ancestors: ReadonlySet<string>) {
+    const derived = parent.type === "flow";
+    const isFolder = entry.kind === "folder";
+    // ⚠️ A flow expands too, and what appears under it is what it calls — read from its graph, not
+    // 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" };
+    // ⚠️ 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;
+    // ⚠️ `open`, not `expanded`: what is drawn and what is loaded answer the same question, or the
+    // tree would draw a level it never asked for (#521).
+    const isOpen =
+      expandable && open.some((live) => live.id === entry.id && live.type === level.type);
+    const Icon = isOpen && isFolder ? FolderOpen : iconFor(entry);
+    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.
+    //
+    // ⚠️ "Beside it" is the level this row is shown IN, not the parent its own record names. Since
+    // #429 the root level also carries rows whose `parentId` points at a folder this reader may not
+    // see — a shared document is filed inside the sharer's folder, and only the share reaches down
+    // to it. Filing beside such a row through that id would try to write into a folder the reader
+    // cannot even open, and the refusal would arrive as a bare "could not be created".
+    //
+    // ⚠️ A derived level is the exception, because it has no folder to be filed in: what a flow
+    // calls is read from its graph, so the record's own parent is the only answer available there.
+    //
+    // ⚠️ It is the only one, not a safe one. A called flow may be a LIBRARY flow — `execute` without
+    // `read`, which ADR-0004 §2/§3 allows on purpose — and its folder is then one this reader may
+    // not open at all. The plus there can still be refused, exactly as the plus on any read-only
+    // folder row elsewhere in the tree has always been able to be. That is the older question of
+    // what a plus should do where writing is not allowed, and it is not this ticket's: what #429
+    // changed is a plus pointing at a folder that is not even the level being shown.
+    const target = isFolder ? entry.id : derived ? parentOf(entry) : parent.id;
+    // Only a folder takes a drop, and only on a level that owns its rows. Everything else keeps the
+    // default cursor while a drag is in progress, which is the answer "not here" without a word.
+    const drop =
+      isFolder && !derived ? dropHandlers({ id: entry.id, title: entry.title }, ancestors) : null;
+    const isDragged = dragged?.entry.id === entry.id;
+    // While a drag is in progress every row says which of the three it is: the row being carried,
+    // a folder that would take it, or something that would not. Silence on the last two is what
+    // turns a drag into a guess that only the drop answers.
+    const highlight =
+      dragged === null || isDragged
+        ? ""
+        : drop?.verdict === "ok"
+          ? over === entry.id
+            ? "bg-sidebar-accent ring-2 ring-sidebar-ring"
+            : "ring-1 ring-sidebar-border"
+          : "opacity-40";
+
+    return (
+      <SidebarMenuItem key={entry.id}>
+        {/* ⚠️ The row becomes the field, rather than growing one beside it (#823). A row that keeps
+            its button while an input sits next to it has two things claiming the same name, and the
+            plus and the drag handle would still be there for a row that is, for the moment, a
+            sentence being typed. */}
+        {renaming?.id === entry.id ? (
+          <RenameRow entry={renaming} close={() => setRenaming(null)} />
+        ) : (
+          <>
+            {/* ⚠️ `group/row` belongs HERE and not on the `SidebarMenuItem` above, which is what #252
+            was: the item also holds the open sub-level, and `group-hover/row` is a DESCENDANT
+            selector — every plus further down matched the ancestor's hover, so pointing at one
+            folder lit up its whole open subtree. This div holds one row and none of its children,
+            which is the only element on which "the row is hovered" means that one row.
+
+            ⚠️ The colouring sits on the ROW, not on the button inside it — the difference the
+            ticket is about. It used to hang on `SidebarMenuButton`, whose siblings the plus and this
+            menu are, so the grey stopped short of them: two icons standing outside the very row they
+            operate, with a pale strip left over on the right. Taken from gate, where the same
+            mistake was made and unmade three times (`service-tree.tsx`, GATE-76/-78/-81) — there the
+            row carries the fill and `flex-1` on the label pushes the actions to the end *inside* it.
+            The button keeps its own hover and active fill switched off rather than doubled, so the
+            row shows one surface instead of two overlapping ones. */}
+            {/* biome-ignore lint/a11y/noStaticElementInteractions: Native drag is the pointer shortcut;
+            the nested button and move dialog remain the keyboard path. */}
+            <div
+              draggable={!derived}
+              onDragStart={(event) => {
+                // ⚠️ `draggable={!derived}` is not enough on its own: `dragstart` bubbles, so a drag
+                // begun on a descendant of a derived row would still land here — and carry a level
+                // (`["tree", <flow-id>]`) that nothing ever wrote. That is the very class of key #446
+                // is about, so the handler refuses it rather than trusting the attribute.
+                if (derived) return;
+                // Native drag initiation on form controls is not interoperable: Safari can leave a
+                // draggable button looking grabbable without ever starting the drag. The row owns the
+                // gesture while its button remains the keyboard-reachable navigation control (#483).
+                event.dataTransfer.effectAllowed = "copyMove";
+                event.dataTransfer.setData("text/plain", entry.id);
+                event.dataTransfer.setData(
+                  TreeEntryMediaType,
+                  JSON.stringify({ id: entry.id, kind: entry.kind, title: entry.title }),
+                );
+                // The level travels with the row, read from the level this row was rendered into —
+                // never from its own record, which for a shared row names a folder the reader cannot
+                // see (#446).
+                const carried: Carried = { entry, level: parent.id };
+                draggedRef.current = carried;
+                setDragged(carried);
+              }}
+              onDragEnd={() => {
+                draggedRef.current = null;
+                setDragged(null);
+                setOver(undefined);
+              }}
+              {...(drop?.props ?? {})}
+              className={`group/row flex items-center gap-0.5 rounded-md pr-1 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground ${
+                isActive ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground" : ""
+              } ${derived ? "" : "cursor-grab active:cursor-grabbing"}`}
+            >
+              {expandable ? (
+                <button
+                  type="button"
+                  aria-expanded={isOpen}
+                  aria-label={i18n.t(
+                    isFolder
+                      ? isOpen
+                        ? "tree.collapse"
+                        : "tree.expand"
+                      : isOpen
+                        ? "tree.collapseCalls"
+                        : "tree.expandCalls",
+                    { title: entry.title },
+                  )}
+                  onClick={() => toggle(level, !isOpen)}
+                  // The icons inside a coloured row need a step of their own, or their hover would be
+                  // the row's colour on the row's colour and read as nothing at all.
+                  //
+                  // ⚠️ A square of exactly `TREE_GUTTER` with the icon CENTRED in it (#453). It used to
+                  // be `p-1` around a 14px icon — 22px wide, so the arrow's centre sat at 11px while the
+                  // line of the level below started at 14px: the line ran PAST the arrow instead of
+                  // under it. On the fourth level that line is the only thing left saying whose content
+                  // one is reading, and missing its arrow it reads as a separation instead of a
+                  // belonging. Centred, the hit area also gains the air on the left it never had, and it
+                  // gets bigger rather than smaller — an arrow that sits well but is harder to hit is no
+                  // improvement, on touch least of all.
+                  className={`${TREE_GUTTER} flex items-center justify-center rounded-md text-sidebar-foreground/70 outline-none hover:bg-sidebar-accent-foreground/10 focus-visible:ring-2 focus-visible:ring-sidebar-ring`}
+                >
+                  <ChevronRight
+                    aria-hidden="true"
+                    className={`size-3.5 transition-transform ${isOpen ? "rotate-90" : ""}`}
+                  />
+                </button>
+              ) : (
+                // ⚠️ The SAME width as the button, not one step less: a row without an arrow used to sit
+                // 2px left of one with an arrow, and nothing said why.
+                <span aria-hidden="true" className={TREE_GUTTER} />
+              )}
+              {/* Navigation stays a real button. The enclosing row carries the native drag gesture;
+              putting `draggable` on this form control is precisely the Safari failure from #483. */}
+              <SidebarMenuButton
+                ref={isActive ? activeRow : null}
+                /**
+                 * ⚠️ A double click OPENS and then renames, and that is the decided behaviour rather
+                 * than an accident (#823): the first of the two clicks is an ordinary click, and an
+                 * ordinary click on a row opens it. Swallowing the navigation would mean telling a
+                 * single click from a double one before either has finished — a delay on every click
+                 * in the tree, paid by everybody, so that nobody ever sees the row they clicked.
+                 *
+                 * ⚠️ F2 is the same act for a keyboard, and the tree has no other way to reach it: the
+                 * three-dot menu is not in the row (#58), it is in the title line of the open thing.
+                 */
+                onDoubleClick={() => setRenaming(entry)}
+                onKeyDown={(event) => {
+                  if (event.key === "F2") {
+                    event.preventDefault();
+                    setRenaming(entry);
+                  }
+                }}
+                isActive={isActive}
+                /* ⚠️ What says the row is movable BEFORE anything touches it (#590). Until now only
+               `cursor-grab` said it, and that is a statement addressed to a pointer that is already
+               on the row — nobody navigating by keyboard, by touch or by ear ever received it, and
+               a way nobody sees is a way nobody uses. That is how the dead gesture of #483 stayed
+               dead for months without a single report.
+
+               ⚠️ A DESCRIPTION and not part of the name: the name is the title, and twenty rows
+               each announcing an instruction would bury it. It is also one shared element rather
+               than one per row — the sentence is the same for every movable row, and a copy per row
+               is a copy per row to keep in step.
+
+               ⚠️ Absent on a derived row, and that is the whole discrimination: what a flow calls
+               has no `parent_id` to rewrite and is not draggable (`draggable={!derived}`), so
+               claiming it were movable would send somebody after a gesture that is refused. */
+                aria-describedby={derived ? undefined : movableId}
+                data-drop={
+                  dragged === null ? undefined : isDragged ? "dragged" : (drop?.verdict ?? "none")
+                }
+                className={`min-w-0 flex-1 hover:bg-transparent data-[active=true]:bg-transparent ${isDragged ? "opacity-50" : ""} ${highlight}`}
+                onClick={() => void navigate({ to: area, search: { select: entry.id } })}
+              >
+                <Icon aria-hidden="true" className="size-4 shrink-0" />
+                <span className="truncate">{entry.title}</span>
+                {/* The icon carries the type on screen; this carries it everywhere else, and it is why
+                a flow needs no suffix in its name to be told from a document. */}
+                <span className="sr-only">{i18n.t(`tree.kind.${entry.kind}`)}</span>
+              </SidebarMenuButton>
+              <AddMenu
+                label={i18n.t("tree.add", { title: entry.title })}
+                onSelect={(kind) => {
+                  if (kind === "import") nodeImport.open(target);
+                  else setCreating({ parentId: target, kind });
+                }}
+              />
+              {/* ⚠️ Nothing else. The three-dot menu stood here until #58 and does not any more: two
+              buttons per row put ten of them into a 240px column, and one then reads buttons instead
+              of titles — the tree is for reading. Every action it held is in the title line of the
+              thing itself, which every row opens by being clicked, including a folder, whose screen
+              is nothing but that line. Do not put a second one back here: the point of the menu is
+              that it is always in the same place, and two places are not one. */}
+            </div>
+          </>
+        )}
+        {/* The same rows one indent deeper: one row component for every depth, so the plus on the
+            fourth level is the same plus as on the first. The list is named after the row it hangs
+            under — indentation says whose contents these are to anyone who can see it, and this is
+            the same sentence for anyone who cannot. */}
+        {isOpen ? (
+          <div className={TREE_LINE}>
+            {renderLevel(
+              level,
+              new Set([...ancestors, entry.id]),
+              i18n.t(isFolder ? "tree.contents" : "tree.calls", { title: entry.title }),
+            )}
+          </div>
+        ) : null}
+      </SidebarMenuItem>
+    );
+  }
+
+  const rootDrop = dropHandlers({ id: null, title: i18n.t("tree.move.root") }, new Set());
+
+  return (
+    <SidebarGroup className="min-h-0 flex-1 overflow-y-auto">
+      {/* 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"))}
+      {/* ⚠️ The sentence every movable row points at (#590). It names BOTH ways on purpose: the
+          drag for whoever has a pointer, and the entry in the title line for whoever has not —
+          `resource.move` is the same word it carries there. Naming only the drag would describe a
+          gesture that keyboard and touch do not have, which is the state this ticket found.
+
+          ⚠️ It is rendered AFTER the rows and it is `sr-only`, so it takes no space and moves
+          nothing. Anything a row could be pushed down by is the abort of #483 all over again — and
+          an element that exists from the first render pushes nothing in any case. */}
+      <span id={movableId} className="sr-only">
+        {i18n.t("tree.move.rowHint")}
+      </span>
+      {/* The root has no row to drop on, so while something is being carried it gets one. It is the
+          only way back out of a folder, and it appears exactly when it can be used.
+          ⚠️ BELOW the tree, and that is not a matter of taste (#483). It used to stand above it, so
+          the moment a drag began every row moved down by its height — including the row being
+          dragged. Chromium ABORTS a drag whose source shifts under it: `dragstart` fired, `dragend`
+          followed six milliseconds later, and no `drag`, `dragover` or `drop` ever came. The hand
+          appeared and nothing moved, which is exactly what the ticket describes. Below the tree the
+          strip pushes nothing that sits above it, so the source stays where the gesture started.
+          Measured in a real Chromium: with the strip above, the gesture dies; with it here, the same
+          drag reaches the drop and opens the move dialog. */}
+      {rootDrop.verdict === undefined || dragged === null ? null : (
+        <button
+          type="button"
+          {...rootDrop.props}
+          onClick={() => {
+            // The strip is drawn for every verdict — greyed out when it would refuse — so the click
+            // has to read it too. Without this, a click on the grey strip performs exactly the write
+            // the drop path refuses, and `initial` being set skips the picker where the verdict is
+            // otherwise enforced.
+            if (rootDrop.verdict !== "ok") return;
+            move.start(dragged.entry, dragged.level, {
+              id: null,
+              title: i18n.t("tree.move.root"),
+            });
+          }}
+          data-drop={rootDrop.verdict}
+          className={`mt-1 flex w-full items-center gap-1 rounded-md border border-dashed px-2 py-1.5 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring ${
+            rootDrop.verdict === "ok"
+              ? over === null
+                ? "bg-sidebar-accent ring-2 ring-sidebar-ring"
+                : "text-sidebar-foreground"
+              : "text-muted-foreground opacity-40"
+          }`}
+        >
+          <CornerLeftUp aria-hidden="true" className="size-4 shrink-0" />
+          {i18n.t("tree.move.dropRoot")}
+        </button>
+      )}
+      {create.isError ? (
+        <p role="alert" className="px-2 py-1.5 text-sm text-destructive">
+          {i18n.t("tree.createFailed")}
+        </p>
+      ) : null}
+      {/* Four refusals, four sentences — and by the time one is read the row is already back where
+          it started, because the rollback happens in `onError` rather than here. */}
+      {move.error ? (
+        <p role="alert" className="px-2 py-1.5 text-sm text-destructive">
+          {i18n.t(moveErrorKey(move.error))}
+        </p>
+      ) : null}
+      {/* The root has no row of its own, so it gets one — otherwise a tree could only ever grow
+          inside the folders it already has, and the plus would stand loose under the list, attached
+          to nothing (#24). As a whole row it is also the one thing on screen when the tree is empty,
+          which is exactly when somebody needs to be told where to start. */}
+      {root?.isPending ? null : (
+        <div className="mt-1 flex items-center gap-0.5">
+          {/* ⚠️ No gutter here any more (#453). It was meant to line the plus up with the row ICONS
+              above it — and the price was that the row stood half a step right of everything
+              belonging to the top level, so it read as a child of the list while it means the list
+              itself. It begins on the same left edge as the arrows of the top level, which is the
+              edge that says "this level". */}
+          <AddMenu
+            label={i18n.t("tree.addRoot")}
+            description={i18n.t("tree.addRoot.long")}
+            variant="row"
+            onSelect={(kind) => {
+              if (kind === "import") nodeImport.open(null);
+              else setCreating({ parentId: null, kind });
+            }}
+          />
+        </div>
+      )}
+      {nodeImport.inputs}
+      {creating ? (
+        <Modal title={i18n.t(`tree.new.${creating.kind}`)} close={() => setCreating(null)}>
+          <CreateForm
+            kind={creating.kind}
+            pending={create.isPending}
+            submit={(title, columns) => create.mutate({ ...creating, title, columns })}
+          />
+        </Modal>
+      ) : null}
+      {move.dialog}
+    </SidebarGroup>
+  );
+}
+
+// ── The geometry of the tree: two measurements that belong together (#453) ───────────────────────
+//
+// The disclosure arrow sits in a 24px SQUARE, and the vertical line of an open level starts at 12px
+// — the centre column of that square. The two used to be arrived at independently (`p-1` around a
+// 14px icon = 22px, line at `ml-3.5` = 14px), which is why the line ran BESIDE its arrow rather than
+// underneath it.
+//
+// ⚠️ The result is no small matter: on the fourth level the line is the only thing left saying whose
+// content you are reading. If it misses its arrow, it reads as a separation instead of a belonging.
+//
+// That is why the two stand HERE side by side: whoever changes one sees the other.
+const TREE_GUTTER = "size-6 shrink-0";
+const TREE_LINE = "ml-3 border-l border-sidebar-border pl-2";
+
+// ⚠️ Hover alone would hide this from a keyboard and from touch entirely, which is the same as not
+// having it. It stays in the tab order, focus makes it visible, and below `md` it is always shown.
+//
+// `row` is the root's form: a full-width row that says what it does, because the root has no title
+// beside which a bare icon would mean anything.
+//
+// ⚠️ Both variants offer the same things since #822, and that is a change from #346 rather than a
+// slip: the root used to be the only plus with an import, because a folder had one in its own
+// three-dot menu — but the plus of a folder row already carried "Upload file", so a folder row
+// could bring in a file and the three-dot menu next to it could not. One word now covers all three
+// sources, in both menus, and the difference disappears with it.
+//
+// ⚠️ In the `row` form the visible text and the accessible name are NOT the same string (#453). The
+// sentence "Add at the top level" was cut to "Add at the top le…" in a 240px sidebar —
+// a truncated sentence says less than a short word. The word is what one reads; the sentence stays
+// as the name, because this row is the only way to start a tree and the only thing on screen when
+// the tree is empty. Shorter must not mean that nobody is told where to begin.
+type AddMenuProps =
+  | { label: string; description: string; variant: "row"; onSelect(kind: MenuChoice): void }
+  | { label: string; variant?: "icon"; onSelect(kind: MenuChoice): void };
+
+// What the plus can answer with: one of the kinds it makes, or the one word for everything that
+// comes in from outside.
+type MenuChoice = NewKind | "import";
+
+function AddMenu(props: AddMenuProps) {
+  const { label, onSelect } = props;
+  const variant = props.variant ?? "icon";
+  const i18n = useI18n();
+  // ⚠️ Two groups, and the separator is the answer to what the plus promises: five kinds are MADE
+  // here, and everything below the line comes IN from somewhere else (#346, #822). The icons come
+  // from the one kind-icon map rather than being named again — a second `Folder` beside it is how
+  // the tree row and this menu start disagreeing.
+  const kinds: Array<{ kind: NewKind; labelKey: string; Icon: typeof Plus }> = [
+    { kind: "folder", labelKey: "tree.new.folder", Icon: kindIcons.folder },
+    { kind: "document", labelKey: "tree.new.document", Icon: kindIcons.document },
+    { kind: "table", labelKey: "tree.new.table", Icon: kindIcons.table },
+    // ⚠️ A board needs nothing else to be usable: an unconfigured one answers with three default
+    // columns (`DEFAULT_COLUMNS`, `packages/intel/src/boards/boards.ts`), so unlike a table it has no
+    // second call here. A board with no columns would be a screen with nowhere to put a card.
+    { kind: "board", labelKey: "tree.new.board", Icon: kindIcons.board },
+    { kind: "flow", labelKey: "tree.new.flow", Icon: kindIcons.flow },
+  ];
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        aria-label={props.variant === "row" ? props.description : label}
+        className={
+          variant === "row"
+            ? "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-sidebar-foreground/70 outline-none transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[state=open]:bg-sidebar-accent"
+            : "shrink-0 rounded-md p-1 text-sidebar-foreground outline-none transition-opacity hover:bg-sidebar-accent-foreground/10 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[state=open]:opacity-100 group-focus-within/row:opacity-100 group-hover/row:opacity-100 md:opacity-0"
+        }
+      >
+        <Plus aria-hidden="true" className="size-4 shrink-0" />
+        {variant === "row" ? <span className="truncate">{label}</span> : null}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-44">
+        {kinds.map((item) => (
+          <DropdownMenuItem key={item.kind} onSelect={() => onSelect(item.kind)}>
+            <item.Icon aria-hidden="true" />
+            {i18n.t(item.labelKey)}
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        {/* ⚠️ One entry for three sources, and the window behind it is the same one the folder's
+            three-dot menu opens (#822). Three entries stood here — a file, a folder, a zip — and
+            two of them only at the root, which is how a folder ended up able to take a zip but not
+            a file. */}
+        <DropdownMenuItem onSelect={() => onSelect("import")}>
+          <Upload aria-hidden="true" />
+          {i18n.t("resource.import")}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+// The column names of a new table, as one line. A comma-separated list is what a CSV header is,
+// so the field looks like the thing it produces rather than like a form that hides it.
+function columnsOf(value: string): string[] {
+  return value
+    .split(",")
+    .map((column) => column.trim())
+    .filter(Boolean);
+}
+
+/**
+ * One row of the tree, while its name is being typed (#823).
+ *
+ * ⚠️ It renames through the same seam the three-dot menu uses — `useResourceRename` — and that is
+ * the whole reason the seam exists. Both have to send `baseUpdatedAt` and both have to refresh the
+ * same four places; two implementations of that are two chances for one of them to be short one.
+ *
+ * ⚠️ **Escape cancels and blur cancels too.** Committing on blur would write a name nobody pressed
+ * a key to confirm — a click meant for another row would rename this one, and a rename that
+ * happened by accident is one nobody goes looking for. What blur costs is the typing, which is one
+ * word.
+ *
+ * ⚠️ An empty name is refused rather than saved, and so is an unchanged one — the second silently:
+ * there is nothing to write, so the row simply closes rather than spending a request and a version
+ * on the name it already had.
+ */
+function RenameRow({ entry, close }: { entry: TreeEntry; close(): void }) {
+  const i18n = useI18n();
+  const [next, setNext] = useState(entry.title);
+  const rename = useResourceRename(
+    entry.type === "flow" ? { type: "flow", flow: entry.flow } : { type: "node", node: entry.node },
+    close,
+  );
+  const trimmed = next.trim();
+  return (
+    <form
+      className="flex items-center gap-0.5 rounded-md px-2 py-1"
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (rename.isPending || trimmed.length === 0) return;
+        if (trimmed === entry.title) {
+          close();
+          return;
+        }
+        rename.mutate(trimmed);
+      }}
+    >
+      <div className="min-w-0 flex-1">
+        <input
+          // biome-ignore lint/a11y/noAutofocus: the row turned into this field to take this value
+          autoFocus
+          value={next}
+          disabled={rename.isPending}
+          aria-label={i18n.t("resource.renameTitle", { title: entry.title })}
+          onChange={(event) => setNext(event.target.value)}
+          /**
+           * ⚠️ **Not while the write is in flight.** The field is `disabled` for as long as the
+           * request runs, and disabling a FOCUSED element makes a real browser blur it — Chromium
+           * and Firefox both run the focus fixup of the standard. An unguarded `onBlur` would then
+           * close the row in the middle of its own write, and a `409` coming back a moment later
+           * would have nowhere left to be shown: the conflict guard this ticket is about would be
+           * silent on screen while refusing correctly on the wire (found in review of #837).
+           *
+           * ⚠️ jsdom does not do the fixup, so no test in this package can see the bug — only the
+           * guard. The test beside it drives the blur by hand for exactly that reason.
+           */
+          onBlur={() => {
+            if (!rename.isPending) close();
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "Escape") {
+              event.preventDefault();
+              close();
+            }
+          }}
+          className="w-full rounded-md border bg-background px-2 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring"
+        />
+        {rename.isError ? (
+          <p role="alert" className="px-1 py-1 text-xs text-destructive">
+            {i18n.t(resourceErrorKey(rename.error))}
+          </p>
+        ) : null}
+      </div>
+    </form>
+  );
+}
+
+function CreateForm({
+  kind,
+  pending,
+  submit,
+}: {
+  kind: NewKind;
+  pending: boolean;
+  submit(title: string, columns: string[]): void;
+}) {
+  const i18n = useI18n();
+  const [title, setTitle] = useState("");
+  const [columns, setColumns] = useState("");
+  const parsedColumns = columnsOf(columns);
+  const incomplete = title.trim().length === 0 || (kind === "table" && parsedColumns.length === 0);
+  return (
+    <form
+      className="space-y-4"
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (!pending && !incomplete) submit(title.trim(), parsedColumns);
+      }}
+    >
+      <label className="block text-sm font-medium">
+        {i18n.t("common.title")}
+        <input
+          required
+          value={title}
+          onChange={(event) => setTitle(event.target.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"
+        />
+      </label>
+      {kind === "table" ? (
+        <label className="block text-sm font-medium">
+          {i18n.t("tree.table.columns")}
+          <input
+            required
+            value={columns}
+            onChange={(event) => setColumns(event.target.value)}
+            aria-describedby="create-table-columns-hint"
+            className="mt-2 w-full rounded-md border bg-background px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          />
+          <span
+            id="create-table-columns-hint"
+            className="mt-1 block text-xs font-normal text-muted-foreground"
+          >
+            {i18n.t("tree.table.columnsHint")}
+          </span>
+        </label>
+      ) : null}
+      <button
+        type="submit"
+        disabled={pending || incomplete}
+        className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+      >
+        {pending ? i18n.t("common.saving") : i18n.t("common.create")}
+      </button>
+    </form>
+  );
+}