@anchrd/intel 0.59.0

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

@@ -0,0 +1,1156 @@
+import type { Flow, FlowValidation } from "@contract/flow.ts";
+import type { Node } from "@contract/node.ts";
+import type { ResourceVerb, UnreadableNodes } from "@contract/share.ts";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
+import {
+  Archive,
+  Columns3,
+  CornerLeftUp,
+  Ellipsis,
+  FolderDown,
+  FolderUp,
+  History,
+  Link2,
+  Pencil,
+  Share2,
+  ShieldCheck,
+  SlashSquare,
+} from "lucide-react";
+import type * as React from "react";
+import { useState } from "react";
+import { AccessSummary } from "@/access-summary/access-summary.tsx";
+import { moveErrorKey, useTreeMove } from "@/app/tree-move/tree-move.tsx";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { flowEntry, IntelRequestError } from "@/data/intel-data-provider/intel-data-provider.ts";
+import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { Modal } from "@/modal/modal.tsx";
+import { useNodeImport } from "@/node-import/node-import.tsx";
+import { useResourceRefresh, 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";
+import { TableColumnsDialog } from "@/table-columns/table-columns.tsx";
+import { RelativeTime } from "@/time/relative-time.tsx";
+import { useDateTime } from "@/time/time-context.tsx";
+
+/**
+ * What a resource's own actions are, at the place the resource stands (#24).
+ *
+ * ⚠️ Since #58 there is exactly one such place: the title line of the open document, table,
+ * attachment, folder or flow. The tree row used to carry the same menu, which put ten buttons into a
+ * 240px column and made the sidebar something to read buttons in rather than titles. Everything the
+ * row menu could do is reached here — including moving, which is why this component owns the folder
+ * picker rather than being handed one.
+ *
+ * ⚠️ An entry that does not apply is absent, never disabled: a folder has no retrieval mode and no
+ * links, a flow has no version history of the node kind. A greyed-out row still promises something
+ * is there. Sharing applies to all of them since #530.
+ */
+export type ResourceTarget = { type: "node"; node: Node } | { type: "flow"; flow: Flow };
+
+// The same thing as a tree row, because that is what a move works on: a row with a place in the
+// shared tree. The two shapes are the same record seen from two screens, so this is a re-labelling
+// and never a second source of truth.
+function entryOf(target: ResourceTarget): TreeEntry {
+  return target.type === "flow"
+    ? flowEntry(target.flow)
+    : {
+        type: "node",
+        id: target.node.id,
+        title: target.node.title,
+        kind: target.node.kind,
+        // A menu moves a row; whether it can be expanded plays no part in that.
+        openable: false,
+        node: target.node,
+      };
+}
+
+function idOf(target: ResourceTarget): string {
+  return target.type === "node" ? target.node.id : target.flow.id;
+}
+
+function titleOf(target: ResourceTarget): string {
+  return target.type === "node" ? target.node.title : target.flow.title;
+}
+
+/**
+ * Which sentence explains a verb.
+ *
+ * ⚠️ The hint is about the SUBJECT as much as the verb, and the branch came back with #530. "See
+ * everything in here" is right for a folder and wrong for one flow, and a hint describing the wrong
+ * reach is worse than none — it is the sentence somebody reads INSTEAD of thinking about what they
+ * are granting. The wording that used to fork here was the agent's (#143), parked with it (#388);
+ * this is a different fork, on the subject rather than on a second meaning of one word.
+ */
+export function verbHintKey(verb: ResourceVerb, subject: ResourceTarget["type"] = "node"): string {
+  return `${subject}.verbHint.${verb}`;
+}
+
+/**
+ * The three-dot menu.
+ *
+ * `variant` is only how the trigger is painted, never which entries it holds. `title` is a plain
+ * icon button at the end of a title line, put there by `TitleRow` and by nobody else, so it is
+ * always the last thing in that line (#53). `row` is the form for a row in a list — quiet until the
+ * row is hovered or something in it takes focus — and since #101 that list is the folder table.
+ *
+ * ⚠️ `row` needs a `group/row` on the row it sits in, or it stays invisible to the mouse: the
+ * reveal is `group-hover/row`, and a group that is not there never hovers. Below `md` and under
+ * focus it is shown regardless, because hover is not a gesture every input has.
+ */
+export function ResourceMenu({
+  target,
+  variant,
+}: {
+  target: ResourceTarget;
+  variant: "row" | "title";
+}) {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const dateTime = useDateTime();
+  const navigate = useNavigate();
+  const [renaming, setRenaming] = useState(false);
+  const [sharing, setSharing] = useState(false);
+  const [linksOpen, setLinksOpen] = useState(false);
+  const [promptOpen, setPromptOpen] = useState(false);
+  const [versionsOpen, setVersionsOpen] = useState(false);
+  const [columnsOpen, setColumnsOpen] = useState(false);
+  const selected = useRouterState({ select: (state) => selectedFrom(state.location.search) });
+  const pathname = useRouterState({ select: (state) => state.location.pathname });
+  // ⚠️ Dragging is a pointer gesture and nothing else: no keyboard, no screen reader, no touch worth
+  // the name. #27 gave moving a second, equal route through a folder picker, and that route lived in
+  // the tree row's menu. With the row menu gone (#58) it lives here, or it does not exist.
+  const move = useTreeMove();
+  // ⚠️ Not a query. A validation is a snapshot taken when somebody asks (#72, ADR-0003): cached
+  // under a key it would be re-served later as if it still held, and the one thing it must never
+  // claim is that a moment which has passed is still true.
+  const [validation, setValidation] = useState<FlowValidation | null>(null);
+  const validate = useMutation({
+    mutationFn: () => data.validateFlow(id),
+    onSuccess: setValidation,
+  });
+
+  const id = idOf(target);
+  const title = titleOf(target);
+  const node = target.type === "node" ? target.node : null;
+  // A folder holds things; it is not itself retrieved, and nothing is written into it that could
+  // link anywhere. Both entries are therefore absent on one rather than offered and inert.
+  const retrievable = node !== null && node.kind !== "folder";
+  const linkable = retrievable;
+  // ⚠️ Absent, not disabled — the rule at the top of this file. An import needs a folder to file
+  // into; a document has nowhere to put a subtree, and a greyed-out entry would promise it does.
+  const importable = node !== null && node.kind === "folder";
+  // ⚠️ Only a table has a header to change, so only a table carries the entry — absent, not
+  // disabled, the rule at the top of this file. Until #531 the header could be changed over MCP and
+  // nowhere else: a person had strictly less reach on their own table than a model did.
+  const isTable = node !== null && node.kind === "table";
+  const nodeImport = useNodeImport({ where: title });
+
+  // What a change here makes stale, and the door a rename takes: both live in
+  // `rename-resource` since #823, because the tree renames through the same two rules from its own
+  // row. A copy of either would be a second place for one of them to drift.
+  const refresh = useResourceRefresh(target);
+  const rename = useResourceRename(target, () => setRenaming(false));
+
+  // Both records take the same conflict route as a rename: `baseUpdatedAt` from the row that was on
+  // screen, so archiving something somebody else has just changed is refused rather than silently
+  // applied to a different state than the one that was read.
+  /**
+   * Offering a document as a slash command, or taking the offer back (#775).
+   *
+   * ⚠️ It writes through `node_update` rather than a door of its own: the name is a mutable field
+   * of the document, and `update` is the verb this repository gives mutable fields. A dedicated
+   * `node_prompt_set` would be a second write path onto one column, with its own conflict handling
+   * to keep in step.
+   */
+  const offerPrompt = useMutation({
+    mutationFn: async (promptName: string | null) => {
+      if (target.type !== "node") throw new Error("Only a document can be offered");
+      await data.updateNode({
+        nodeId: target.node.id,
+        baseUpdatedAt: target.node.updatedAt,
+        promptName,
+        idempotencyKey: crypto.randomUUID(),
+      });
+    },
+    onSuccess: async () => {
+      await refresh();
+      setPromptOpen(false);
+    },
+  });
+
+  const archive = useMutation({
+    mutationFn: async () => {
+      if (target.type === "flow") {
+        await data.archiveFlow({
+          flowId: target.flow.id,
+          baseUpdatedAt: target.flow.updatedAt,
+          archived: true,
+          idempotencyKey: crypto.randomUUID(),
+        });
+        return;
+      }
+      await data.archiveNode({
+        nodeId: target.node.id,
+        baseUpdatedAt: target.node.updatedAt,
+        archived: true,
+        idempotencyKey: crypto.randomUUID(),
+      });
+    },
+    onSuccess: async () => {
+      await refresh();
+      // The row is gone from the tree. If it was also what the screen was showing, the screen has
+      // nothing left to show either.
+      //
+      // ⚠️ It drops the selection where it stands rather than always landing on /nodes: a flow
+      // archived from the flow screen would otherwise throw the reader onto another screen for no
+      // reason they could see. A flow reached through the shared tree stays on /nodes, which is
+      // where it was being read.
+      if (selected === id) {
+        await navigate({ to: pathname === "/flows" ? "/flows" : "/nodes", search: {} });
+      }
+    },
+  });
+
+  // An attachment already is one original file. Every structured Intel resource needs the bundle
+  // that carries its type and relationships, but wrapping uploaded bytes in a zip would make the
+  // one Export entry give a person something other than what they put in (#699).
+  const exportResource = useMutation({
+    mutationFn: async () => {
+      if (node?.kind === "attachment") {
+        return { blob: await data.getNodeAttachment(node.id), filename: title };
+      }
+      const blob =
+        target.type === "flow"
+          ? await data.exportFlowBundle(target.flow.id)
+          : await data.exportNodeBundle(target.node.id);
+      return { blob, filename: `${title}.zip` };
+    },
+    onSuccess: ({ blob, filename }) => {
+      const url = URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = filename;
+      document.body.append(anchor);
+      anchor.click();
+      anchor.remove();
+      setTimeout(() => URL.revokeObjectURL(url), 0);
+    },
+  });
+
+  const failure = rename.isError
+    ? null // the rename dialog words its own refusal, beside the field that caused it
+    : archive.isError
+      ? archive.error
+      : undefined;
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          data-resource-menu=""
+          aria-label={i18n.t("resource.menu", { title })}
+          className={
+            variant === "row"
+              ? "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition hover:bg-accent hover:text-accent-foreground focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:opacity-100 group-focus-within/row:opacity-100 group-hover/row:opacity-100 md:opacity-0"
+              : "inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+          }
+        >
+          <Ellipsis aria-hidden="true" className="size-4" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="min-w-40 whitespace-nowrap">
+          <DropdownMenuItem onSelect={() => setRenaming(true)}>
+            <Pencil aria-hidden="true" />
+            {i18n.t("resource.rename")}
+          </DropdownMenuItem>
+          {/* Directly under the rename, because they are the same gesture at two levels: one names
+              the table, the other names its columns. A reader looking for "change what this is
+              called" finds both without reading the rest of the menu (#531). */}
+          {isTable ? (
+            <DropdownMenuItem onSelect={() => setColumnsOpen(true)}>
+              <Columns3 aria-hidden="true" />
+              {i18n.t("resource.columns")}
+            </DropdownMenuItem>
+          ) : null}
+          {/* The dialog stays the complete keyboard and touch path. Dragging is only a mouse
+              shortcut; it does not need a second label beside this action. */}
+          {/* ⚠️ `undefined`, and that is the honest answer rather than a missing one: this menu hangs
+              on a resource's own title line, so there is no rendered tree level to name. Passing the
+              record's parent instead would claim to know a level — and for a shared row it would
+              name the sharer's folder, which is exactly the wrong one (#446). `useTreeMove` reads
+              the absence and cleans up both levels such a row can be standing in. */}
+          <DropdownMenuItem onSelect={() => move.start(entryOf(target), undefined, null)}>
+            <CornerLeftUp aria-hidden="true" />
+            {i18n.t("resource.move")}
+          </DropdownMenuItem>
+          {/* Every kind exports: a folder takes its subtree along, everything else is a bundle of
+              one (#136). The entry sits with rename and move because it acts on the whole thing,
+              not on its content.
+
+              ⚠️ A table has NO second entry beside this one (#532). It used to carry "Download CSV"
+              here, and for a table WITH a header both handed out the same bytes: `bundle.ts` writes
+              such a node into the zip as `<title>.csv`. Two ways to one file are two strings, two
+              catalogs and two tests — the zip costs one step more and is the whole difference.
+
+              ⚠️ The one case where they differed is the table that has no header yet: `downloadCsv`
+              refused it out loud, `tableCsv` joins no segments and writes a file of zero bytes
+              (#534). That is the export's gap on every kind it can hit, not something this entry
+              was covering — which is why it is fixed there and not by keeping a second entry.
+
+              ⚠️ The entry carried a three-clause description under its name until 2026-08-19, put
+              there by #433/ADR-0006 so that an irreversible loss was readable BEFORE the gesture: a
+              bundle takes one version per node, shares and runs stay behind, and a published flow
+              travels as its published graph (#585). Jack removed it — it was the only entry running
+              over two lines and it pushed the menu apart. What the reader now gets instead is
+              `excluded` in the zip's `manifest.json` and `BundleImportResult.excluded` after an
+              import, both of which are read only once the zip exists. That is a deliberate trade,
+              recorded in ADR-0006 and in #636, and NOT a leftover to be restored. */}
+          <DropdownMenuItem onSelect={() => exportResource.mutate()}>
+            <FolderDown aria-hidden="true" />
+            {i18n.t("resource.export")}
+          </DropdownMenuItem>
+          {/* The other half of the same round trip, next to it rather than in the tree's plus
+              (#346): one word in the menu, and every way in behind it.
+
+              ⚠️ It was a submenu of two until #822 — a zip and a folder — and a single file was
+              missing from it, because the entry for that one lived only in the tree's plus. All
+              three answer the same question, so the submenu became one entry and the window behind
+              it carries the choice. */}
+          {importable ? (
+            <DropdownMenuItem onSelect={() => nodeImport.open(id)}>
+              <FolderUp aria-hidden="true" />
+              {i18n.t("resource.import")}
+            </DropdownMenuItem>
+          ) : null}
+          {/* Only a flow can be run, so only a flow can be asked whether it would. Rarely needed —
+              which is why it is in the menu and not in the title line (#72). */}
+          {node === null ? (
+            <DropdownMenuItem onSelect={() => validate.mutate()}>
+              <ShieldCheck aria-hidden="true" />
+              {i18n.t("resource.validate")}
+            </DropdownMenuItem>
+          ) : null}
+          {linkable ? (
+            <DropdownMenuItem onSelect={() => setLinksOpen(true)}>
+              <Link2 aria-hidden="true" />
+              {i18n.t("resource.links")}
+            </DropdownMenuItem>
+          ) : null}
+          {/* ⚠️ Only a document, and only ever an icon and a word here. The command itself stands in
+              the title line of the open node; repeating it inside the menu would be a second place
+              saying the same thing to a reader who is already looking at the first (#775). */}
+          {node !== null && node.kind === "document" ? (
+            <DropdownMenuItem onSelect={() => setPromptOpen(true)}>
+              <SlashSquare aria-hidden="true" />
+              {i18n.t("prompt.menu")}
+            </DropdownMenuItem>
+          ) : null}
+          {/* Every kind of resource is shared here, a flow included since #530. What a grant on one
+              flow does NOT reach is said in the dialog rather than refused here. */}
+          <DropdownMenuItem onSelect={() => setSharing(true)}>
+            <Share2 aria-hidden="true" />
+            {i18n.t("resource.share")}
+          </DropdownMenuItem>
+          {(node === null || node.kind !== "folder") && (
+            <DropdownMenuItem onSelect={() => setVersionsOpen(true)}>
+              <History aria-hidden="true" />
+              {i18n.t("node.versions")}
+            </DropdownMenuItem>
+          )}
+          {/* A flow is archived like a document (#109). It keeps its versions and its runs; what it
+              loses is reach — it leaves the tree, cannot be started, and stops resolving as another
+              flow's callee. */}
+          <DropdownMenuItem onSelect={() => archive.mutate()}>
+            <Archive aria-hidden="true" />
+            {i18n.t("resource.archive")}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {/* The menu closes on selection, so a refusal has nowhere to live inside it. It stands over
+          the screen instead, where it is read whatever the title line asked for. */}
+      {failure !== undefined && failure !== null ? (
+        <MenuFailure>{i18n.t(resourceErrorKey(failure))}</MenuFailure>
+      ) : null}
+      {/* Its own sentence, not `resourceErrorKey`'s: nothing was changed, something failed to
+          arrive, and "the change was not saved" would send the reader looking for a change. */}
+      {exportResource.isError ? <MenuFailure>{i18n.t("resource.exportFailed")}</MenuFailure> : null}
+      {/* The import's own sentence, and its own pickers — only where the entry exists, because two
+          file inputs on every document's menu would be two elements nothing can ever open. */}
+      {importable ? nodeImport.inputs : null}
+      {/* ⚠️ A move has four refusals of its own and they are told apart by `moveErrorKey`, not by
+          `resourceErrorKey`: "that is not a folder" and "that would be a loop" have no equivalent
+          among the changes above, and one shared sentence would leave the reader guessing. */}
+      {move.error ? <MenuFailure>{i18n.t(moveErrorKey(move.error))}</MenuFailure> : null}
+      {/* ⚠️ Every reason at once, not the first one. Somebody with two missing tools should not have
+          to ask twice — and a success says so out loud, because an empty menu after a click reads
+          as "nothing happened" rather than "nothing is in the way". */}
+      {validation ? (
+        <Modal title={i18n.t("flows.validate")} close={() => setValidation(null)}>
+          {validation.problems.length === 0 ? (
+            <p className="text-sm">{i18n.t("flows.validateReady")}</p>
+          ) : (
+            <ul className="space-y-2">
+              {/* ⚠️ Grouped by code, one entry per reason with every detail under it (#324).
+                  `validateFlow` files one problem per sub-flow node, so a flow calling two
+                  unpublished flows — the NORMAL case of that error, not its edge — produced two
+                  entries whose head sentence is the same line of text, one under the other, and
+                  two React children under one key.
+
+                  Grouping rather than making the keys unique, because the head sentence is per CODE
+                  (`flows.problem.<code>` is one string) and repeating it under itself says nothing
+                  the reader did not just read. What differs is the detail, and every detail is
+                  still here — which is the promise the comment above makes: somebody with two
+                  missing tools should not have to ask twice.
+
+                  ⚠️ What identifies a detail is its POSITION in `problems`, not its text (#461).
+                  Two details of one code are routinely the same sentence: `collectRunProblems`
+                  files one problem per sub-flow NODE and words it with that node's label
+                  (`packages/intel/src/flows/flows.ts`), and calling the same flow twice is the normal
+                  case. Under `key={detail}` those two collided on one key, and React does not
+                  answer that with a console warning alone — it drops one of the siblings on the
+                  next render, so the reader sees ONE entry where there are two causes. */}
+              {[
+                ...validation.problems
+                  .reduce((byCode, problem, at) => {
+                    byCode.set(problem.code, [
+                      ...(byCode.get(problem.code) ?? []),
+                      { at, detail: problem.detail },
+                    ]);
+                    return byCode;
+                  }, new Map<string, { at: number; detail: string }[]>())
+                  .entries(),
+              ].map(([code, details]) => (
+                <li key={code} className="rounded-md border p-3 text-sm">
+                  <span className="block font-medium">{i18n.t(`flows.problem.${code}`)}</span>
+                  {details.map(({ at, detail }) => (
+                    <span key={at} className="mt-1 block text-xs text-muted-foreground">
+                      {detail}
+                    </span>
+                  ))}
+                </li>
+              ))}
+            </ul>
+          )}
+          {/* A snapshot says when it was taken, or it will be read as a standing verdict. */}
+          <p className="mt-4 text-xs text-muted-foreground">
+            {i18n.t("flows.validateWhen", {
+              when: dateTime.at(validation.checkedAt),
+            })}
+          </p>
+        </Modal>
+      ) : null}
+      {move.dialog}
+      {renaming ? (
+        <RenameDialog
+          title={title}
+          pending={rename.isPending}
+          error={rename.isError ? rename.error : null}
+          close={() => {
+            rename.reset();
+            setRenaming(false);
+          }}
+          submit={(next) => rename.mutate(next)}
+        />
+      ) : null}
+      {sharing ? <SharePanel target={target} close={() => setSharing(false)} /> : null}
+      {linksOpen && node ? <NodeLinksPanel node={node} close={() => setLinksOpen(false)} /> : null}
+      {promptOpen && node ? (
+        <PromptDialog
+          node={node}
+          pending={offerPrompt.isPending}
+          error={offerPrompt.error}
+          close={() => {
+            offerPrompt.reset();
+            setPromptOpen(false);
+          }}
+          submit={(promptName) => offerPrompt.mutate(promptName)}
+        />
+      ) : null}
+      {columnsOpen && node ? (
+        <TableColumnsDialog node={node} close={() => setColumnsOpen(false)} />
+      ) : null}
+      {versionsOpen ? (
+        <VersionHistory target={target} close={() => setVersionsOpen(false)} />
+      ) : null}
+    </>
+  );
+}
+
+function VersionHistory({ target, close }: { target: ResourceTarget; close(): void }) {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const id = idOf(target);
+  const versions = useQuery({
+    queryKey: [target.type === "flow" ? "flow-versions" : "node-versions", id],
+    queryFn: async () => {
+      const result =
+        target.type === "flow" ? await data.listFlowVersions(id) : await data.listNodeVersions(id);
+      return result.items.map((version) => ({
+        id: version.id,
+        sequence: version.sequence,
+        createdAt: version.createdAt,
+      }));
+    },
+  });
+  // ⚠️ A Modal, like every other panel in this menu — NOT an `absolute` drawer. `absolute` measures
+  // against the nearest positioned ancestor, and this menu has no say in what that is: on the title
+  // line it is the title row (`title-row.tsx`, `relative z-10`, around 100px tall), which clipped
+  // the list to its first entry on every viewport; in the folder listing it is the table container
+  // (`table.tsx`, `relative … overflow-x-auto`), which clips it differently again (#628). The list
+  // scrolls INSIDE the dialog instead, the way `NodeLinksPanel` further down does it.
+  return (
+    <Modal title={i18n.t("node.versions")} close={close}>
+      {versions.isPending ? (
+        <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+      ) : null}
+      {versions.isError ? (
+        <p role="alert" className="text-sm text-destructive">
+          {i18n.t(target.type === "flow" ? "flows.operationFailed" : "node.operationFailed")}
+        </p>
+      ) : null}
+      <ol className="max-h-72 space-y-3 overflow-y-auto">
+        {versions.data?.map((version) => (
+          <li key={version.id} className="rounded-md border p-3 text-sm">
+            <span className="font-medium">
+              {i18n.t("node.version", { sequence: version.sequence })}
+            </span>
+            <RelativeTime
+              value={version.createdAt}
+              className="mt-1 block text-xs text-muted-foreground"
+            />
+          </li>
+        ))}
+      </ol>
+    </Modal>
+  );
+}
+
+// One refusal, over the screen rather than in the menu that is already gone by the time it arrives.
+function MenuFailure({ children }: { children: React.ReactNode }) {
+  return (
+    <p
+      role="alert"
+      className="fixed inset-x-0 bottom-5 z-50 mx-auto w-fit max-w-md rounded-lg border border-destructive/30 bg-card px-4 py-3 text-sm text-destructive shadow-xl"
+    >
+      {children}
+    </p>
+  );
+}
+
+/**
+ * ⚠️ **A taken name is the one refusal this dialog words itself**, because it is the one the reader
+ * can act on inside the dialog: change the name and try again. Every other refusal keeps the
+ * server's sentence through `resourceErrorKey`.
+ *
+ * The name of the HOLDER is deliberately not brought over. The server names it — it is the half a
+ * model reading over MCP needs, and it knows who may be told — but on this screen the reader is
+ * about to type a different name either way, and a title out of somewhere they may not look is a
+ * sentence with nothing to do about it.
+ */
+function isPromptNameTaken(error: unknown): boolean {
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "code" in error &&
+    (error as { code: unknown }).code === "prompt_name_taken"
+  );
+}
+
+/**
+ * The one place a document is offered as a slash command, or stops being one (#775).
+ *
+ * ⚠️ **No "that name is free" box, and it is a decision rather than an omission.** Free is the
+ * normal case; a box that says the self-evident thing every time the dialog opens is read twice and
+ * then never again. Only the TAKEN name is reported, under the field, with `Save` disabled while it
+ * stands — the state the reader has to do something about is the only one that speaks.
+ *
+ * ⚠️ **The empty field is how a command is given up.** There is no separate switch: `promptName`
+ * has two states and the field has two states, and a checkbox beside it would invent a third that
+ * nothing can store — offered, without a name.
+ *
+ * ⚠️ **The refusal comes from the SERVER and is only mirrored here.** Uniqueness spans every
+ * document and flow in the installation, which no dialog can know; what this does is stop sending
+ * the same name a second time. Deciding freeness in the browser would be the race this whole guard
+ * exists against.
+ */
+function PromptDialog({
+  node,
+  pending,
+  error,
+  close,
+  submit,
+}: {
+  node: Node;
+  pending: boolean;
+  error: unknown;
+  close(): void;
+  submit(promptName: string | null): void;
+}) {
+  const i18n = useI18n();
+  const [next, setNext] = useState(node.promptName ?? "");
+  // ⚠️ **Which value was SENT, not which one was refused**, and the difference is what lets `Save`
+  // come back the moment the reader types something else. A refusal about `billing` says nothing
+  // about `billing-monthly`; a message that outlived its name would block the very repair it asks
+  // for. Recorded at submit time rather than derived from the error in an effect — the error says
+  // THAT something was refused, and only the form knows what it sent.
+  const [sent, setSent] = useState<string | null>(null);
+  const trimmed = next.trim();
+  const grammar = /^[a-z0-9-]{1,40}$/;
+  const malformed = trimmed.length > 0 && !grammar.test(trimmed);
+  const stillRefused = isPromptNameTaken(error) && sent === trimmed;
+  const unchanged = (node.promptName ?? "") === trimmed;
+
+  return (
+    <Modal title={i18n.t("prompt.title")} close={close}>
+      <form
+        className="space-y-4"
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (pending || malformed || stillRefused || unchanged) return;
+          setSent(trimmed);
+          submit(trimmed.length === 0 ? null : trimmed);
+        }}
+      >
+        <label className="block text-sm font-medium">
+          {i18n.t("prompt.field")}
+          <span className="mt-2 flex items-center rounded-md border bg-background focus-within:ring-2 focus-within:ring-ring">
+            <span aria-hidden="true" className="pl-3 text-muted-foreground">
+              /
+            </span>
+            <input
+              // biome-ignore lint/a11y/noAutofocus: the dialog opens to take this one value
+              autoFocus
+              value={next}
+              onChange={(event) => setNext(event.target.value)}
+              className="w-full bg-transparent px-2 py-2 outline-none"
+            />
+          </span>
+        </label>
+        {malformed ? (
+          <p role="alert" className="text-sm text-destructive">
+            {i18n.t("prompt.invalid")}
+          </p>
+        ) : null}
+        {stillRefused ? (
+          <p role="alert" className="text-sm text-destructive">
+            {i18n.t("prompt.taken", { name: trimmed })}
+          </p>
+        ) : null}
+        {/* Everything else the field refuses is said by the server, and its sentence is the one that
+            knows what happened. */}
+        {error && !isPromptNameTaken(error) ? (
+          <p role="alert" className="text-sm text-destructive">
+            {i18n.t(resourceErrorKey(error))}
+          </p>
+        ) : null}
+        <p className="text-sm text-muted-foreground">{i18n.t("prompt.help")}</p>
+        <button
+          type="submit"
+          disabled={pending || malformed || stillRefused || unchanged}
+          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.save")}
+        </button>
+      </form>
+    </Modal>
+  );
+}
+
+function RenameDialog({
+  title,
+  pending,
+  error,
+  close,
+  submit,
+}: {
+  title: string;
+  pending: boolean;
+  error: unknown;
+  close(): void;
+  submit(title: string): void;
+}) {
+  const i18n = useI18n();
+  const [next, setNext] = useState(title);
+  const trimmed = next.trim();
+  return (
+    <Modal title={i18n.t("resource.renameTitle", { title })} close={close}>
+      <form
+        className="space-y-4"
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (!pending && trimmed.length > 0 && trimmed !== title) submit(trimmed);
+        }}
+      >
+        {error ? (
+          <p role="alert" className="text-sm text-destructive">
+            {i18n.t(resourceErrorKey(error))}
+          </p>
+        ) : null}
+        <label className="block text-sm font-medium">
+          {i18n.t("common.title")}
+          <input
+            required
+            // biome-ignore lint/a11y/noAutofocus: the dialog opens to take this one value
+            autoFocus
+            value={next}
+            onChange={(event) => setNext(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>
+        <button
+          type="submit"
+          disabled={pending || trimmed.length === 0 || trimmed === title}
+          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.save")}
+        </button>
+      </form>
+    </Modal>
+  );
+}
+
+/**
+ * What links to this document and what it links to — as a reading, not as a form (#41).
+ *
+ * ⚠️ There is nothing to create here any more. A relationship is written in the text of the
+ * document it belongs to, and this shows the result. The backlinks are the half that could never be
+ * written here anyway: "who points at me" is not something the author of this document decides.
+ *
+ * ⚠️ Every row is a link whose two ends this reader may see — the server filters the list through
+ * the same predicate as every other read. A relationship reaching into a part of the tree they may
+ * not enter is absent rather than shown without a name.
+ */
+function NodeLinksPanel({ node, close }: { node: Node; close(): void }) {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const navigate = useNavigate();
+  const links = useQuery({
+    queryKey: ["node-links", node.id],
+    queryFn: () => data.listNodeLinks(node.id),
+  });
+  // The dialog needs the names of the documents at the other end, and the graph is the one
+  // authorized list of them the UI can ask for without walking the whole tree again. It is asked
+  // for here rather than by the screen, because here is where it is read.
+  const nodeGraph = useQuery({
+    queryKey: ["node-graph"],
+    queryFn: () => data.getNodeGraph(),
+  });
+  const titles = new Map(
+    (nodeGraph.data?.nodes ?? []).map((candidate) => [candidate.id, candidate.title]),
+  );
+
+  return (
+    <Modal title={i18n.t("node.links")} close={close}>
+      <p className="mb-4 text-sm text-muted-foreground">{i18n.t("node.linksHelp")}</p>
+      <ul className="max-h-72 space-y-2 overflow-y-auto">
+        {links.data?.items.map((link) => {
+          const outgoing = link.sourceNodeId === node.id;
+          const otherId = outgoing ? link.targetNodeId : link.sourceNodeId;
+          return (
+            <li key={link.id}>
+              <button
+                type="button"
+                onClick={() => {
+                  close();
+                  void navigate({ to: "/nodes", search: { select: otherId } });
+                }}
+                className="flex w-full items-center gap-3 rounded-md border p-3 text-left outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <span className="min-w-0 text-sm">
+                  <span className="block truncate font-medium">
+                    {titles.get(otherId) ?? otherId}
+                  </span>
+                  <span className="text-xs text-muted-foreground">
+                    {outgoing ? i18n.t("node.linkOutgoing") : i18n.t("node.linkIncoming")}
+                  </span>
+                </span>
+              </button>
+            </li>
+          );
+        })}
+        {links.data?.items.length === 0 && (
+          <li className="text-sm text-muted-foreground">{i18n.t("node.noLinks")}</li>
+        )}
+      </ul>
+    </Modal>
+  );
+}
+
+// The one share dialog in the product, for every kind of resource that can be shared — a folder, a
+// document, a table, and since #530 a flow on its own. Which verbs it offers is the server's
+// answer, not this component's: `execute` never appears on a document, because a document has
+// nothing to run, and all four appear on a flow.
+/**
+ * Which of the three principals the dialog can SET (#431).
+ *
+ * ⚠️ `user` is deliberately absent, and it is a decision rather than an omission. Setting one means
+ * naming a Gate user id, and Intel has no way to turn a person into an id or an id into a person
+ * (#261) — so the only offer this dialog could make is a field for a raw ULID, which is worse than
+ * the address it would replace: unverifiable when typed and unreadable afterwards. It stays reachable
+ * over the API and over MCP, where the caller already holds the id. The day #261 lands it becomes a
+ * picker, not a text field.
+ *
+ * ⚠️ `organization` IS here, and the reason is the asymmetry it removes: the dialog could already
+ * DRAW an organization grant ("Everyone in the organization") and not make one, and MCP could make
+ * one all along — a person had strictly less reach than a model on the same tree. It needs nothing
+ * Intel does not have, because there is nothing to name.
+ */
+type SharePrincipalKind = "email" | "organization";
+
+// What the grant just made does not cover, in the two directions it can fail to (#530): documents
+// the grantee cannot read, and flows the grantee cannot start. Both are `null` until an answer
+// arrives, so "no warning yet" and "nothing to warn about" stay distinguishable.
+type ShareWarnings = { unreadable: UnreadableNodes; unrunnable: UnreadableNodes } | null;
+
+// Whether there is anything to say. A warning with neither a title nor a count is silence, and
+// drawing an empty box for it would make every ordinary grant look like it had a caveat.
+function withheld(value: UnreadableNodes): boolean {
+  return value.titles.length > 0 || value.hidden > 0;
+}
+
+function SharePanel({ target, close }: { target: ResourceTarget; close(): void }) {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const queryClient = useQueryClient();
+  const [principalKind, setPrincipalKind] = useState<SharePrincipalKind>("email");
+  const [email, setEmail] = useState("");
+  const [verbs, setVerbs] = useState<ResourceVerb[]>(["read"]);
+  // What the grant just made does not cover. It survives the form being cleared, because it is the
+  // answer to the question the user just asked and they need a moment to read it.
+  const [warnings, setWarnings] = useState<ShareWarnings>(null);
+  const isFlow = target.type === "flow";
+  const resourceId = idOf(target);
+  const grants = useQuery({
+    queryKey: ["resource-grants", target.type, resourceId],
+    queryFn: () => (isFlow ? data.listFlowGrants(resourceId) : data.listGrants(resourceId)),
+  });
+  // ⚠️ TWO questions, and neither list answers the other's. `listGrants` names the grants THIS node
+  // carries — the ones this screen may withdraw — and it is the one that brings `applicableVerbs`,
+  // which decides what the form below may offer at all (ADR-0004 §2). The effective list is the
+  // DISPLAY answer: it crosses every folder above and names owners, who reach the node without a
+  // revocable row of their own.
+  //
+  // ⚠️ Showing only the first was the bug in #803: the circles in the header read the effective
+  // list, this dialog read the direct one, and the two answered "who has access" differently — the
+  // dialog stayed empty while the header showed people. The same key as the header's, so both are
+  // invalidated by one mutation and can never drift apart again.
+  const effective = useQuery({
+    queryKey: ["effective-node-grants", target.type, resourceId],
+    queryFn: () =>
+      isFlow ? data.listEffectiveFlowAccess(resourceId) : data.listEffectiveAccess(resourceId),
+    retry: false,
+    staleTime: Number.POSITIVE_INFINITY,
+  });
+  // ⚠️ Both queries are invalidated by every mutation below, and the flow key is under the same
+  // effective prefix as the node key: a grant on a flow changes what the summary of the folder
+  // above it shows, and the other way round.
+  const invalidate = async () => {
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: ["resource-grants", target.type, resourceId] }),
+      queryClient.invalidateQueries({ queryKey: ["effective-node-grants"] }),
+    ]);
+  };
+  const share = useMutation({
+    // One request per verb, because one grant is one verb. The keys differ so a retry of the whole
+    // form replays each verb on its own rather than collapsing them into one.
+    mutationFn: async () => {
+      let last: ShareWarnings = null;
+      for (const verb of verbs) {
+        const principal =
+          principalKind === "organization"
+            ? ({ type: "organization" } as const)
+            : ({ type: "email", email } as const);
+        // The last verb's answer is the one kept: every request describes the access in force after
+        // it, so the newest is the only one still true.
+        const result = isFlow
+          ? await data.shareFlow({
+              flowId: resourceId,
+              principal,
+              verb,
+              expiresAt: null,
+              idempotencyKey: crypto.randomUUID(),
+            })
+          : await data.shareNode({
+              resourceId,
+              principal,
+              verb,
+              expiresAt: null,
+              idempotencyKey: crypto.randomUUID(),
+            });
+        last = { unreadable: result.unreadable, unrunnable: result.unrunnable };
+      }
+      return last;
+    },
+    onSuccess: (result) => {
+      setEmail("");
+      // ⚠️ The choice is cleared with the address, not left standing. It survived a successful grant
+      // until the review of #431 caught it, and "everyone in the organization" is the one setting
+      // that must never be the quiet default for the NEXT grant somebody makes in the same dialog.
+      setPrincipalKind("email");
+      setWarnings(result);
+    },
+    // ⚠️ `onSettled`, not `onSuccess`. One request per verb means a run can end halfway: three verbs
+    // granted, the fourth refused. On `onSuccess` the list would then still show the state from
+    // before, and the user would read a permission picture that is not the one in force. Of all the
+    // things to be silently wrong about, access is the worst.
+    onSettled: invalidate,
+  });
+  const revoke = useMutation({
+    mutationFn: (grantId: string) =>
+      isFlow
+        ? data.revokeFlowGrant({
+            flowId: resourceId,
+            grantId,
+            idempotencyKey: crypto.randomUUID(),
+          })
+        : data.revokeGrant({
+            resourceId,
+            grantId,
+            idempotencyKey: crypto.randomUUID(),
+          }),
+    onSettled: invalidate,
+  });
+
+  /**
+   * The one refusal in this dialog that names something the reader has to act on.
+   *
+   * ⚠️ Taking back `organization` + `execute` on a folder is refused with `409
+   * folder_execute_in_use` while flows from outside still call into it (`nodes.ts`,
+   * `revokeGrant`), and the CALLERS are what makes that refusal actionable. Rendering it as the
+   * generic "access was not changed" threw exactly that away and left the reader with a dialog that
+   * refuses and will not say why, for the one grant that is hardest to undo.
+   *
+   * ⚠️ Since #448 they arrive as data — the flows this actor may see by name, the rest as a count —
+   * so the sentence is written here, in the reader's language, exactly like the `shareUnreadable`
+   * warning below it. The server still decides WHICH of them may be named; that is an authorization
+   * answer and nothing on this side recomputes it.
+   */
+  const revokeError = revoke.error instanceof IntelRequestError ? revoke.error : null;
+  const revokeInUse = revokeError?.code === "folder_execute_in_use" ? revokeError : null;
+
+  return (
+    <Modal title={i18n.t("node.share")} close={close}>
+      {revokeInUse ? (
+        <div role="alert" className="mb-4 space-y-1 text-sm text-destructive">
+          <p>{i18n.t("node.revokeInUse")}</p>
+          {/* An API that predates #448 sends no `callers`, and its sentence is then the only place
+              the names exist at all. Showing it beats showing nothing — losing the titles is the
+              failure this ticket is about. */}
+          {revokeInUse.callers === null ? (
+            <p className="text-xs">{revokeInUse.message}</p>
+          ) : (
+            <p className="text-xs">
+              {revokeInUse.callers.titles.length > 0
+                ? i18n.t("node.revokeInUseCallers", {
+                    titles: revokeInUse.callers.titles.join(", "),
+                  })
+                : i18n.t("node.revokeInUseCallersHidden", { count: revokeInUse.callers.hidden })}
+              {revokeInUse.callers.titles.length > 0 && revokeInUse.callers.hidden > 0
+                ? ` ${i18n.t("node.revokeInUseCallersMore", { count: revokeInUse.callers.hidden })}`
+                : ""}
+              {` ${i18n.t("node.revokeInUseHint")}`}
+            </p>
+          )}
+        </div>
+      ) : (
+        (share.isError || revoke.isError || grants.isError) && (
+          <p role="alert" className="mb-4 text-sm text-destructive">
+            {i18n.t("node.shareFailed")}
+          </p>
+        )
+      )}
+      {/* ⚠️ `status`, not `alert`, and beside the grant rather than in place of it: the access was
+          given. A node reference across the folder edge is a possible failure, not a way around
+          permissions, so nothing here blocks anything (ADR-0004 §4). */}
+      {warnings && withheld(warnings.unreadable) && (
+        <div role="status" className="mb-4 rounded-md border bg-muted p-3 text-sm">
+          {warnings.unreadable.titles.length > 0 ? (
+            <p>
+              {i18n.t(`${target.type}.shareUnreadable`, {
+                titles: warnings.unreadable.titles.join(", "),
+              })}
+              {warnings.unreadable.hidden > 0
+                ? ` ${i18n.t(`${target.type}.shareUnreadableMore`, { count: warnings.unreadable.hidden })}`
+                : ""}
+            </p>
+          ) : (
+            <p>
+              {i18n.t(`${target.type}.shareUnreadableHidden`, {
+                count: warnings.unreadable.hidden,
+              })}
+            </p>
+          )}
+          <p className="mt-1 text-xs text-muted-foreground">
+            {i18n.t(`${target.type}.shareUnreadableHint`)}
+          </p>
+        </div>
+      )}
+      {/* The half a folder grant never needed: a grant on ONE flow stops at that flow, so the flows
+          it calls are somebody else's to grant. `status` and not `alert` for the same reason as
+          above — the access was given, and this says what it does not reach (#530). */}
+      {warnings && withheld(warnings.unrunnable) && (
+        <div role="status" className="mb-4 rounded-md border bg-muted p-3 text-sm">
+          {warnings.unrunnable.titles.length > 0 ? (
+            <p>
+              {i18n.t("flow.shareUnrunnable", { titles: warnings.unrunnable.titles.join(", ") })}
+              {warnings.unrunnable.hidden > 0
+                ? ` ${i18n.t("flow.shareUnrunnableMore", { count: warnings.unrunnable.hidden })}`
+                : ""}
+            </p>
+          ) : (
+            <p>{i18n.t("flow.shareUnrunnableHidden", { count: warnings.unrunnable.hidden })}</p>
+          )}
+          <p className="mt-1 text-xs text-muted-foreground">{i18n.t("flow.shareUnrunnableHint")}</p>
+        </div>
+      )}
+      {effective.data && (effective.data.items.length > 0 || effective.data.ownerIds.length > 0) ? (
+        <div className="mb-5">
+          <AccessSummary
+            grants={effective.data.items}
+            ownerIds={effective.data.ownerIds}
+            // Withdrawal is offered for the grants that sit HERE. An inherited one is in force but
+            // belongs to the folder it was written on, and the reader may not manage that folder.
+            revocableOn={resourceId}
+            // Named only where the reader may see the folder — the answer leaves out the rest, and
+            // the row then says "inherited" without saying from where.
+            sources={effective.data.sources}
+            onRevoke={(grantId) => {
+              share.reset();
+              revoke.mutate(grantId);
+            }}
+          />
+        </div>
+      ) : null}
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          // ⚠️ The other mutation's error is cleared before this one starts, in both directions. A
+          // refused withdrawal keeps its `409` until something resets it, and `revokeInUse` takes
+          // precedence over the general sentence — so without this, a share that failed AFTER a
+          // refused withdrawal said nothing at all, and the reader was left reading a sentence
+          // about the wrong action. That is the exact failure mode #430 removed one level up.
+          revoke.reset();
+          share.mutate();
+        }}
+        className="space-y-4 border-t pt-5"
+      >
+        {/* ⚠️ Two of the three principals, and the missing one is a decision — see
+            `SharePrincipalKind`. Radios rather than a select: there are two, and a reader has to see
+            that granting to the whole organization is a thing this dialog does at all. */}
+        <fieldset className="space-y-2">
+          <legend className="text-sm font-medium">{i18n.t("node.shareWith")}</legend>
+          {(["email", "organization"] as const).map((kind) => (
+            <label key={kind} className="flex items-center gap-2 text-sm">
+              <input
+                type="radio"
+                name="share-principal"
+                checked={principalKind === kind}
+                onChange={() => setPrincipalKind(kind)}
+                aria-describedby={kind === "organization" ? "share-organization-hint" : undefined}
+                className="size-4 border outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+              <span>
+                {i18n.t(kind === "email" ? "node.shareWithEmail" : "node.shareWithOrganization")}
+              </span>
+            </label>
+          ))}
+        </fieldset>
+        {principalKind === "email" ? (
+          <div>
+            {/* ⚠️ The hint stands OUTSIDE the label and is tied on with `aria-describedby`. Inside
+                it, its words would become part of the field's accessible NAME — a screen reader
+                would announce the whole paragraph as the label of the input, and every query by
+                label would have to spell it out too. */}
+            <label className="block text-sm font-medium">
+              {i18n.t("node.email")}
+              <input
+                type="email"
+                required
+                value={email}
+                onChange={(event) => setEmail(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>
+          </div>
+        ) : (
+          /* ⚠️ `aria-live` on the CONTAINER, which is already mounted whenever this branch is on
+              screen — not on the warning inside it. A live region has to exist before its content
+              changes, so putting it on a paragraph that appears at the same moment announces
+              nothing. The gap it closes: `Run` is ticked while the focus sits in the verb fieldset,
+              far from here, and the sentence about what is being made would otherwise arrive in
+              silence. (The other way in is covered already: `aria-describedby` on the radio reads
+              this whole box out when the radio takes focus.) */
+          <div
+            id="share-organization-hint"
+            aria-live="polite"
+            className="space-y-2 rounded-md border bg-muted p-3 text-xs"
+          >
+            <p className="text-muted-foreground">{i18n.t("node.shareOrganizationHint")}</p>
+            {/* ⚠️ `organization` + `execute` on a folder is not one grant among four: it is the
+                definition of a LIBRARY (ADR-0004 §3) — the one grant a flow may call across a folder
+                edge for, so flows from anywhere in the tree may then reach in. Two clicks in this
+                dialog now do what used to take an API call, and the reader has to be told what they
+                are about to make BEFORE they make it.
+
+                ⚠️ The second sentence is the one that matters most, because it is about the way
+                back: `revokeGrant` refuses with `folder_execute_in_use` while callers remain, so
+                this is the single hardest grant in the product to undo. Naming the consequence after
+                the fact would be the "wrong sentence" class anchrd/core#111 collects.
+
+                It is a warning and not a block, deliberately: the library is a documented, wanted
+                shape, MCP has always been able to make one, and refusing it here would put a person
+                back below a model on the same tree — the very asymmetry this ticket removed. */}
+            {/* ⚠️ Only on a node, and that is not an oversight. What makes a folder a library is
+                `execute` for the organization ON THE FOLDER: `callReach` reads `node_grants` along
+                the callee's ancestors and nothing else, so the same grant on a flow itself makes no
+                library and reaches no caller outside its subtree. Showing this line there would
+                warn about a consequence that cannot happen — and about a refusal on the way back
+                that would never come (#530). */}
+            {!isFlow && verbs.includes("execute") ? (
+              <p role="note" className="font-medium text-destructive">
+                {i18n.t("node.shareLibraryWarning")}
+              </p>
+            ) : null}
+          </div>
+        )}
+        <fieldset className="space-y-2">
+          <legend className="text-sm font-medium">{i18n.t("node.verbs")}</legend>
+          {(grants.data?.applicableVerbs ?? []).map((verb) => (
+            <label key={verb} className="flex items-center gap-2 text-sm">
+              <input
+                type="checkbox"
+                checked={verbs.includes(verb)}
+                onChange={(event) =>
+                  setVerbs((current) =>
+                    event.target.checked
+                      ? [...current, verb]
+                      : current.filter((candidate) => candidate !== verb),
+                  )
+                }
+                className="size-4 rounded border outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+              <span>{i18n.t(`node.verb.${verb}`)}</span>
+              <span className="text-xs text-muted-foreground">
+                {i18n.t(verbHintKey(verb, target.type))}
+              </span>
+            </label>
+          ))}
+        </fieldset>
+        <button
+          type="submit"
+          disabled={share.isPending || verbs.length === 0}
+          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"
+        >
+          {i18n.t("node.shareAction")}
+        </button>
+      </form>
+    </Modal>
+  );
+}