@anchrd/intel-ui 0.4.0 → 0.6.0

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

@@ -0,0 +1,615 @@
+import type {
+  ContextPolicy,
+  Flow,
+  KnowledgeNode,
+  ResourceVerb,
+  UnreadableKnowledge,
+} from "@anchrd/intel-contract";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
+import { Archive, CornerLeftUp, Ellipsis, Link2, Pencil, Share2, Trash2 } from "lucide-react";
+import type * as React from "react";
+import { useState } from "react";
+import { moveErrorKey, useTreeMove } from "@/app/tree-move/tree-move.tsx";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+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 { Modal } from "@/modal/modal.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { selectedFrom } from "@/router/selection-search.ts";
+
+/**
+ * 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, a flow
+ * is shared through the folder it is filed in rather than on its own (ADR-0004 §2). A greyed-out row
+ * still promises something is there.
+ */
+export type ResourceTarget =
+  | { type: "knowledge"; node: KnowledgeNode }
+  | { 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: "knowledge",
+        id: target.node.id,
+        title: target.node.title,
+        kind: target.node.kind,
+        node: target.node,
+      };
+}
+
+function idOf(target: ResourceTarget): string {
+  return target.type === "knowledge" ? target.node.id : target.flow.id;
+}
+
+function titleOf(target: ResourceTarget): string {
+  return target.type === "knowledge" ? target.node.title : target.flow.title;
+}
+
+function parentOfTarget(target: ResourceTarget): string | null {
+  return target.type === "knowledge" ? target.node.parentId : target.flow.parentId;
+}
+
+// ⚠️ The same reading `moveErrorKey` does for a move, for the changes this menu makes. A conflict is
+// the one that must not be swallowed: `baseUpdatedAt` turns a parallel edit into a refusal, and a
+// refusal nobody words is indistinguishable from a change that went through.
+export function resourceErrorKey(error: unknown): string {
+  const code =
+    typeof error === "object" && error !== null && "code" in error
+      ? String((error as { code: unknown }).code)
+      : null;
+  switch (code) {
+    case "update_conflict":
+    case "flow_update_conflict":
+      return "resource.conflict";
+    case "knowledge_forbidden":
+    case "flow_edit_forbidden":
+      return "resource.forbidden";
+    default:
+      return "resource.failed";
+  }
+}
+
+const contextPolicies: readonly ContextPolicy[] = ["pinned", "relevant", "explicit"];
+
+/**
+ * The three-dot menu.
+ *
+ * `variant` is only how the trigger is painted. `title` is the one in use: 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 sidebar form — hidden until the row is hovered or something
+ * in it takes focus — and is unused since #58; it is kept because the trigger's two paintings are
+ * the only difference between the two places, and re-deriving it would be the harder half.
+ */
+export function ResourceMenu({
+  target,
+  variant,
+}: {
+  target: ResourceTarget;
+  variant: "row" | "title";
+}) {
+  const { data, i18n } = useIntelRouterContext();
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const [renaming, setRenaming] = useState(false);
+  const [sharing, setSharing] = useState(false);
+  const [linksOpen, setLinksOpen] = useState(false);
+  const selected = useRouterState({ select: (state) => selectedFrom(state.location.search) });
+  // ⚠️ 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();
+
+  const id = idOf(target);
+  const title = titleOf(target);
+  const node = target.type === "knowledge" ? 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;
+
+  // Everything a change here can make stale. The row sits in one level of the tree, the open screen
+  // reads the record, and the flat collections behind the search, the link picker and the relation
+  // view all carry the title as well — a rename that only reached the tree would leave yesterday's
+  // name standing on three other screens.
+  async function refresh(): Promise<void> {
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: ["tree", parentOfTarget(target)] }),
+      queryClient.invalidateQueries({
+        queryKey: target.type === "flow" ? ["flow", id] : ["knowledge", id],
+      }),
+      queryClient.invalidateQueries({
+        queryKey: [target.type === "flow" ? "flows" : "knowledge-graph"],
+      }),
+      queryClient.invalidateQueries({ queryKey: ["relation-graph"] }),
+    ]);
+  }
+
+  // ⚠️ `baseUpdatedAt` is not optional decoration. Renaming takes the same conflict route as every
+  // other change, or two people renaming at once end with one of them silently overwritten.
+  const rename = useMutation({
+    mutationFn: async (next: string) => {
+      if (target.type === "flow") {
+        await data.updateFlow({
+          flowId: target.flow.id,
+          baseUpdatedAt: target.flow.updatedAt,
+          title: next,
+          idempotencyKey: crypto.randomUUID(),
+        });
+        return;
+      }
+      await data.updateKnowledge({
+        nodeId: target.node.id,
+        baseUpdatedAt: target.node.updatedAt,
+        title: next,
+        idempotencyKey: crypto.randomUUID(),
+      });
+    },
+    onSuccess: async () => {
+      setRenaming(false);
+      await refresh();
+    },
+  });
+
+  const archive = useMutation({
+    mutationFn: async () => {
+      if (target.type === "flow") throw new Error("A flow cannot be archived");
+      await data.archiveKnowledge({
+        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.
+      if (selected === id) await navigate({ to: "/knowledge", search: {} });
+    },
+  });
+
+  const setContextPolicy = useMutation({
+    mutationFn: async (contextPolicy: ContextPolicy) => {
+      if (target.type === "flow") throw new Error("A flow has no retrieval mode");
+      await data.updateKnowledge({
+        nodeId: target.node.id,
+        baseUpdatedAt: target.node.updatedAt,
+        contextPolicy,
+        idempotencyKey: crypto.randomUUID(),
+      });
+    },
+    onSuccess: refresh,
+  });
+
+  const failure = rename.isError
+    ? null // the rename dialog words its own refusal, beside the field that caused it
+    : archive.isError
+      ? archive.error
+      : setContextPolicy.isError
+        ? setContextPolicy.error
+        : undefined;
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          data-resource-menu=""
+          aria-label={i18n.t("resource.menu", { title })}
+          className={
+            variant === "row"
+              ? "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"
+              : "inline-flex size-8 shrink-0 items-center justify-center rounded-md border bg-background 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="w-52">
+          <DropdownMenuItem onSelect={() => setRenaming(true)}>
+            <Pencil aria-hidden="true" />
+            {i18n.t("resource.rename")}
+          </DropdownMenuItem>
+          <DropdownMenuItem onSelect={() => move.start(entryOf(target), null)}>
+            <CornerLeftUp aria-hidden="true" />
+            {i18n.t("tree.move.action")}
+          </DropdownMenuItem>
+          {retrievable || linkable || node ? <DropdownMenuSeparator /> : null}
+          {/* ⚠️ A submenu with a checked value, not an embedded `select`. A form control inside a
+              menu takes the keyboard away from the menu that contains it, and the current value is
+              then only readable by opening a second widget. */}
+          {retrievable && node ? (
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>{i18n.t("knowledge.contextPolicy")}</DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <DropdownMenuRadioGroup
+                  value={node.contextPolicy}
+                  onValueChange={(value) => setContextPolicy.mutate(value as ContextPolicy)}
+                >
+                  {contextPolicies.map((policy) => (
+                    <DropdownMenuRadioItem key={policy} value={policy}>
+                      {i18n.t(`knowledge.context.${policy}`)}
+                    </DropdownMenuRadioItem>
+                  ))}
+                </DropdownMenuRadioGroup>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          ) : null}
+          {linkable ? (
+            <DropdownMenuItem onSelect={() => setLinksOpen(true)}>
+              <Link2 aria-hidden="true" />
+              {i18n.t("knowledge.links")}
+            </DropdownMenuItem>
+          ) : null}
+          {/* A flow has no share of its own: it is reached through the folder it is filed in, and a
+              narrower grant beside the folder's would break the rule that a flow only calls flows in
+              its own subtree (ADR-0004 §2). */}
+          {node ? (
+            <DropdownMenuItem onSelect={() => setSharing(true)}>
+              <Share2 aria-hidden="true" />
+              {i18n.t("knowledge.share")}
+            </DropdownMenuItem>
+          ) : null}
+          {node ? (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onSelect={() => archive.mutate()}
+                className="text-destructive focus:text-destructive"
+              >
+                <Archive aria-hidden="true" />
+                {i18n.t("knowledge.archive")}
+              </DropdownMenuItem>
+            </>
+          ) : null}
+        </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}
+      {/* ⚠️ 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}
+      {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 && node ? <ShareKnowledge node={node} close={() => setSharing(false)} /> : null}
+      {linksOpen && node ? <KnowledgeLinks node={node} close={() => setLinksOpen(false)} /> : null}
+    </>
+  );
+}
+
+// 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>
+  );
+}
+
+function RenameDialog({
+  title,
+  pending,
+  error,
+  close,
+  submit,
+}: {
+  title: string;
+  pending: boolean;
+  error: unknown;
+  close(): void;
+  submit(title: string): void;
+}) {
+  const { i18n } = useIntelRouterContext();
+  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 KnowledgeLinks({ node, close }: { node: KnowledgeNode; close(): void }) {
+  const { data, i18n } = useIntelRouterContext();
+  const navigate = useNavigate();
+  const links = useQuery({
+    queryKey: ["knowledge-links", node.id],
+    queryFn: () => data.listKnowledgeLinks(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 knowledgeGraph = useQuery({
+    queryKey: ["knowledge-graph"],
+    queryFn: () => data.getKnowledgeGraph(),
+  });
+  const titles = new Map(
+    (knowledgeGraph.data?.nodes ?? []).map((candidate) => [candidate.id, candidate.title]),
+  );
+
+  return (
+    <Modal title={i18n.t("knowledge.links")} close={close}>
+      <p className="mb-4 text-sm text-muted-foreground">{i18n.t("knowledge.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: "/knowledge", 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("knowledge.linkOutgoing") : i18n.t("knowledge.linkIncoming")}
+                  </span>
+                </span>
+              </button>
+            </li>
+          );
+        })}
+        {links.data?.items.length === 0 && (
+          <li className="text-sm text-muted-foreground">{i18n.t("knowledge.noLinks")}</li>
+        )}
+      </ul>
+    </Modal>
+  );
+}
+
+// The one share dialog in the product. It sits on the folder that holds the documents and the
+// flows, which is where a permission decision belongs (ADR-0004 §2). 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.
+function ShareKnowledge({ node, close }: { node: KnowledgeNode; close(): void }) {
+  const { data, i18n } = useIntelRouterContext();
+  const queryClient = useQueryClient();
+  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 [unreadable, setUnreadable] = useState<UnreadableKnowledge | null>(null);
+  const grants = useQuery({
+    queryKey: ["knowledge-grants", node.id],
+    queryFn: () => data.listKnowledgeGrants(node.id),
+  });
+  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: UnreadableKnowledge | null = null;
+      for (const verb of verbs) {
+        // 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.
+        last = (
+          await data.shareKnowledge({
+            resourceId: node.id,
+            principal: { type: "email", email },
+            verb,
+            expiresAt: null,
+            idempotencyKey: crypto.randomUUID(),
+          })
+        ).unreadable;
+      }
+      return last;
+    },
+    onSuccess: (result) => {
+      setEmail("");
+      setUnreadable(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: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["knowledge-grants", node.id] });
+    },
+  });
+  const revoke = useMutation({
+    mutationFn: (grantId: string) =>
+      data.revokeKnowledgeGrant({
+        resourceId: node.id,
+        grantId,
+        idempotencyKey: crypto.randomUUID(),
+      }),
+    onSettled: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["knowledge-grants", node.id] });
+    },
+  });
+
+  return (
+    <Modal title={i18n.t("knowledge.share")} close={close}>
+      {(share.isError || revoke.isError || grants.isError) && (
+        <p role="alert" className="mb-4 text-sm text-destructive">
+          {i18n.t("knowledge.shareFailed")}
+        </p>
+      )}
+      {/* ⚠️ `status`, not `alert`, and beside the grant rather than in place of it: the access was
+          given. A knowledge reference across the folder edge is a possible failure, not a way around
+          permissions, so nothing here blocks anything (ADR-0004 §4). */}
+      {unreadable && (unreadable.titles.length > 0 || unreadable.hidden > 0) && (
+        <div role="status" className="mb-4 rounded-md border bg-muted p-3 text-sm">
+          {unreadable.titles.length > 0 ? (
+            <p>
+              {i18n.t("knowledge.shareUnreadable", { titles: unreadable.titles.join(", ") })}
+              {unreadable.hidden > 0
+                ? ` ${i18n.t("knowledge.shareUnreadableMore", { count: unreadable.hidden })}`
+                : ""}
+            </p>
+          ) : (
+            <p>{i18n.t("knowledge.shareUnreadableHidden", { count: unreadable.hidden })}</p>
+          )}
+          <p className="mt-1 text-xs text-muted-foreground">
+            {i18n.t("knowledge.shareUnreadableHint")}
+          </p>
+        </div>
+      )}
+      <ul className="mb-5 max-h-44 space-y-2 overflow-y-auto">
+        {grants.data?.items.map((grant) => (
+          <li
+            key={grant.id}
+            className="flex items-center justify-between gap-3 rounded-md border p-3 text-sm"
+          >
+            <span className="min-w-0 truncate">
+              {grant.principal.type === "email"
+                ? grant.principal.email
+                : grant.principal.type === "user"
+                  ? grant.principal.id
+                  : i18n.t("knowledge.organization")}
+              <span className="ml-2 text-xs text-muted-foreground">
+                {i18n.t(`knowledge.verb.${grant.verb}`)}
+              </span>
+            </span>
+            <button
+              type="button"
+              onClick={() => revoke.mutate(grant.id)}
+              aria-label={i18n.t("knowledge.revokeShare")}
+              className="rounded-md p-2 text-destructive outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <Trash2 aria-hidden="true" className="size-4" />
+            </button>
+          </li>
+        ))}
+        {grants.data?.items.length === 0 && (
+          <li className="text-sm text-muted-foreground">{i18n.t("knowledge.noGrants")}</li>
+        )}
+      </ul>
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          share.mutate();
+        }}
+        className="space-y-4 border-t pt-5"
+      >
+        <label className="block text-sm font-medium">
+          {i18n.t("knowledge.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>
+        <fieldset className="space-y-2">
+          <legend className="text-sm font-medium">{i18n.t("knowledge.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(`knowledge.verb.${verb}`)}</span>
+              <span className="text-xs text-muted-foreground">
+                {i18n.t(`knowledge.verbHint.${verb}`)}
+              </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("knowledge.shareAction")}
+        </button>
+      </form>
+    </Modal>
+  );
+}

package/src/router/selection-search.ts

@@ -1,14 +1,29 @@
-export type SelectionSearch = Record<string, unknown> & { select?: string };
+// The ways one selected level can be shown. `editor` is the absence of the parameter rather than a
+// value of its own, so a plain link is always the editor and every link written before #35 keeps
+// meaning what it meant.
+export const IntelViews = ["editor", "graph", "runs"] as const;
+export type IntelView = (typeof IntelViews)[number];
+
+export type SelectionSearch = Record<string, unknown> & {
+  select?: string;
+  view?: Exclude<IntelView, "editor">;
+};
 
 // One search parameter carries "open this one" into an area: the header search names a hit, the
 // screen for that area selects it. Keeping it in the URL is what makes a hit reachable with Enter
 // alone — the dialog never reaches into a screen's own state.
 //
+// `view` is the second: which way the selected level is shown — the editor, the relation graph
+// (#19), or the runs of the selected flow (#35). It sits in the URL for the same reason `select`
+// does: what someone is looking at should survive a reload and be linkable.
+//
 // ⚠️ Unknown parameters are passed through rather than dropped. The portal's connect flow returns
 // to `/tools` with its own marker, and a validator that kept only what it knows would delete it.
 export function selectionSearch(search: Record<string, unknown>): SelectionSearch {
-  const { select, ...rest } = search;
-  return typeof select === "string" && select.length > 0 ? { ...rest, select } : rest;
+  const { select, view, ...rest } = search;
+  const withSelect =
+    typeof select === "string" && select.length > 0 ? { ...rest, select } : { ...rest };
+  return view === "graph" || view === "runs" ? { ...withSelect, view } : withSelect;
 }
 
 // Screens are lazy route components with no route object at hand, so they read the parameter off
@@ -17,3 +32,12 @@ export function selectedFrom(search: unknown): string | null {
   const select = (search as { select?: unknown } | null)?.select;
   return typeof select === "string" && select.length > 0 ? select : null;
 }
+
+export function viewFrom(search: unknown): IntelView {
+  const view = (search as { view?: unknown } | null)?.view;
+  return view === "graph" || view === "runs" ? view : "editor";
+}
+
+export function graphViewFrom(search: unknown): boolean {
+  return viewFrom(search) === "graph";
+}