@anchrd/intel-ui 0.3.0 → 0.5.0

package/src/knowledge/knowledge.tsx

@@ -1,483 +1,160 @@
-import type {
-  ContextPolicy,
-  KnowledgeLinkRelation,
-  KnowledgeNode,
-  ResourceRole,
-} from "@anchrd/intel-contract";
+import type { KnowledgeNode } from "@anchrd/intel-contract";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import {
-  Archive,
-  ChevronDown,
-  ChevronRight,
-  Download,
-  FileText,
-  Folder,
-  FolderPlus,
-  History,
-  Link2,
-  Network,
-  Paperclip,
-  Plus,
-  Search,
-  Share2,
-  Trash2,
-} from "lucide-react";
-import { lazy, Suspense, useMemo, useState } from "react";
-import { Button, Collection, Tree, TreeItem, TreeItemContent } from "react-aria-components";
-import type { KnowledgeTreeNode } from "@/data/intel-data-provider/intel-data-provider.types.ts";
-import { Modal } from "@/modal/modal.tsx";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
+import { Download, History, Paperclip } from "lucide-react";
+import { lazy, Suspense, useState } from "react";
+import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
+import { ViewToggle } from "@/app/view-toggle/view-toggle.tsx";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { GraphPane } from "@/graph-pane/graph-pane.tsx";
+import { KnowledgeTablePanel } from "@/knowledge-table/knowledge-table.tsx";
+import { ResourceMenu } from "@/resource-menu/resource-menu.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
+import { graphViewFrom, selectedFrom } from "@/router/selection-search.ts";
 
 const KnowledgeEditor = lazy(async () => ({
   default: (await import("@/knowledge-editor/knowledge-editor.tsx")).KnowledgeEditor,
 }));
-const KnowledgeGraphView = lazy(async () => ({
-  default: (await import("@/knowledge-graph/knowledge-graph.tsx")).KnowledgeGraphView,
-}));
-
-function findNode(nodes: KnowledgeTreeNode[], id: string | null): KnowledgeTreeNode | null {
-  if (!id) return null;
-  for (const node of nodes) {
-    if (node.id === id) return node;
-    const child = findNode(node.children, id);
-    if (child) return child;
-  }
-  return null;
-}
-
-function flattenTree(nodes: KnowledgeTreeNode[]): KnowledgeTreeNode[] {
-  return nodes.flatMap((node) => [node, ...flattenTree(node.children)]);
-}
-
-async function fileBase64(file: File): Promise<string> {
-  if (file.size > 15_000_000) throw new Error("Attachment exceeds the 15 MB upload limit");
-  return await new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onerror = () => reject(reader.error ?? new Error("Attachment could not be read"));
-    reader.onload = () => {
-      const result = reader.result;
-      if (typeof result !== "string" || !result.includes(",")) {
-        reject(new Error("Attachment could not be encoded"));
-        return;
-      }
-      resolve(result.slice(result.indexOf(",") + 1));
-    };
-    reader.readAsDataURL(file);
-  });
-}
 
 export function Knowledge() {
   const { data, i18n } = useIntelRouterContext();
   const queryClient = useQueryClient();
-  const tree = useQuery({ queryKey: ["knowledge-tree"], queryFn: () => data.loadKnowledgeTree() });
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [creating, setCreating] = useState<"document" | "folder" | null>(null);
-  const [sharing, setSharing] = useState(false);
-  const [linksOpen, setLinksOpen] = useState(false);
-  const [graphOpen, setGraphOpen] = useState(false);
-  const [versionsOpen, setVersionsOpen] = useState(false);
-  const [searchText, setSearchText] = useState("");
-  const [searchQuery, setSearchQuery] = useState("");
-  const selected = useMemo(() => findNode(tree.data ?? [], selectedId), [selectedId, tree.data]);
-  const graph = useQuery({
-    queryKey: ["knowledge-graph"],
-    queryFn: () => data.getKnowledgeGraph(),
-    enabled: graphOpen,
+  const navigate = useNavigate();
+  // The tree in the sidebar and the header search both name what to open through `?select=`, so this
+  // screen has no selection of its own to keep in step with them.
+  const selection = useRouterState({
+    select: (state) => ({
+      id: selectedFrom(state.location.search),
+      graph: graphViewFrom(state.location.search),
+    }),
   });
+  const selectedId = selection.id;
+  const [versionsOpen, setVersionsOpen] = useState(false);
   const document = useQuery({
     queryKey: ["knowledge", selectedId],
     queryFn: () => data.getKnowledge(selectedId ?? ""),
-    enabled: Boolean(selectedId && selected?.kind !== "folder"),
-  });
-  const search = useQuery({
-    queryKey: ["knowledge-search", searchQuery],
-    queryFn: () => data.searchKnowledge({ query: searchQuery, limit: 12 }),
-    enabled: searchQuery.length > 0,
+    enabled: Boolean(selectedId),
   });
-  const archive = useMutation({
-    mutationFn: (node: KnowledgeNode) =>
-      data.archiveKnowledge({
-        nodeId: node.id,
-        baseUpdatedAt: node.updatedAt,
-        archived: true,
-        idempotencyKey: crypto.randomUUID(),
-      }),
-    onSuccess: async () => {
-      setSelectedId(null);
-      await queryClient.invalidateQueries({ queryKey: ["knowledge-tree"] });
-    },
-  });
-  const setContextPolicy = useMutation({
-    mutationFn: ({ node, contextPolicy }: { node: KnowledgeNode; contextPolicy: ContextPolicy }) =>
-      data.updateKnowledge({
-        nodeId: node.id,
-        baseUpdatedAt: node.updatedAt,
-        contextPolicy,
-        idempotencyKey: crypto.randomUUID(),
-      }),
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({ queryKey: ["knowledge-tree"] });
-    },
-  });
-  const upload = useMutation({
-    mutationFn: async (file: File) => {
-      const contentBase64 = await fileBase64(file);
-      const node = await data.createKnowledge({
-        parentId: selected?.kind === "folder" ? selected.id : (selected?.parentId ?? null),
-        kind: "attachment",
-        title: file.name,
-        description: null,
-        contextPolicy: "relevant",
-        idempotencyKey: crypto.randomUUID(),
-      });
-      try {
-        const saved = await data.saveKnowledgeAttachment({
-          nodeId: node.id,
-          baseVersionId: null,
-          contentBase64,
-          mediaType: file.type || "application/octet-stream",
-          idempotencyKey: crypto.randomUUID(),
-        });
-        return saved.node;
-      } catch (error) {
-        const current = await data.getKnowledge(node.id).catch(() => null);
-        if (current?.version === null && current.node.updatedAt === node.updatedAt) {
-          await data
-            .archiveKnowledge({
-              nodeId: node.id,
-              baseUpdatedAt: current.node.updatedAt,
-              archived: true,
-              idempotencyKey: crypto.randomUUID(),
-            })
-            .catch(() => undefined);
-        }
-        throw error;
-      }
-    },
-    onSuccess: async (node) => {
-      setSelectedId(node.id);
-      await queryClient.invalidateQueries({ queryKey: ["knowledge-tree"] });
-    },
+  const selected = document.data?.node ?? null;
+  // A folder shows its contents as a graph, and so does the root of the tree (#19). A document has
+  // nothing to draw — which is why the switch is not offered on one rather than offered and empty.
+  const graphable = selectedId === null || selected?.kind === "folder";
+  const relations = useQuery({
+    queryKey: ["relation-graph", "folder", selectedId],
+    queryFn: () => data.getRelationGraph({ of: "folder", folderId: selectedId }),
+    enabled: graphable && selection.graph,
   });
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      {/* The screen owns the one action that belongs to Knowledge as a whole. Creating things is
+          the tree's, in the sidebar, at the place a new thing is meant to go.
 
-  const renderTreeItem = (node: KnowledgeTreeNode) => (
-    <TreeItem
-      id={node.id}
-      textValue={node.title}
-      className="rounded-md outline-none data-[focused]:ring-2 data-[focused]:ring-ring data-[selected]:bg-accent data-[selected]:text-accent-foreground"
-    >
-      <TreeItemContent>
-        {({ hasChildItems, isExpanded }) => (
-          <div className="flex min-w-0 items-center gap-2 px-2 py-1.5 text-sm">
-            {hasChildItems ? (
-              <Button
-                slot="chevron"
-                className="rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          ⚠️ Mounted only where there is a graph to switch to. A switch on a document would point at
+          nothing, and the header is where that gets noticed first (#19). */}
+      {graphable ? (
+        <ActionSlot>
+          <ViewToggle />
+        </ActionSlot>
+      ) : null}
+      <section className="relative flex min-h-0 min-w-0 flex-1 flex-col bg-card">
+        {graphable && selection.graph ? (
+          <GraphPane
+            query={relations}
+            select={(node) =>
+              void navigate({
+                to: node.kind === "flow" ? "/flows" : "/knowledge",
+                search: { select: node.id },
+              })
+            }
+          />
+        ) : !selectedId ? (
+          <div className="grid flex-1 place-items-center p-8 text-center text-sm text-muted-foreground">
+            {i18n.t("knowledge.select")}
+          </div>
+        ) : document.isPending ? (
+          <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+        ) : document.isError || !selected ? (
+          <div role="alert" className="grid flex-1 place-items-center p-8 text-center text-sm">
+            <div className="space-y-3">
+              <p className="text-destructive">{i18n.t("knowledge.loadFailed")}</p>
+              <button
+                type="button"
+                onClick={() => void document.refetch()}
+                className="rounded-md border px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
               >
-                {isExpanded ? (
-                  <ChevronDown aria-hidden="true" className="size-3.5" />
-                ) : (
-                  <ChevronRight aria-hidden="true" className="size-3.5" />
-                )}
-              </Button>
-            ) : (
-              <span className="size-3.5" />
-            )}
-            {node.kind === "folder" ? (
-              <Folder aria-hidden="true" className="size-4 shrink-0" />
-            ) : (
-              <FileText aria-hidden="true" className="size-4 shrink-0" />
-            )}
-            <span className="truncate">{node.title}</span>
+                {i18n.t("common.retry")}
+              </button>
+            </div>
           </div>
-        )}
-      </TreeItemContent>
-      <Collection items={node.children}>{renderTreeItem}</Collection>
-    </TreeItem>
-  );
-
-  return (
-    <div className="flex h-screen min-h-0 flex-col">
-      <header className="flex items-center justify-between gap-6 border-b px-8 py-5">
-        <div>
-          <h1 className="text-xl font-semibold tracking-tight">{i18n.t("knowledge.title")}</h1>
-          <p className="mt-1 text-sm text-muted-foreground">{i18n.t("knowledge.description")}</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <button
-            type="button"
-            onClick={() => setGraphOpen(true)}
-            className="inline-flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <Network aria-hidden="true" className="size-4" />
-            {i18n.t("knowledge.graph")}
-          </button>
-          <button
-            type="button"
-            onClick={() => setCreating("folder")}
-            className="inline-flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <FolderPlus aria-hidden="true" className="size-4" />
-            {i18n.t("knowledge.newFolder")}
-          </button>
-          <label className="inline-flex cursor-pointer items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm outline-none hover:bg-muted focus-within:ring-2 focus-within:ring-ring">
-            <Paperclip aria-hidden="true" className="size-4" />
-            {upload.isPending ? i18n.t("knowledge.uploading") : i18n.t("knowledge.upload")}
-            <input
-              type="file"
-              className="sr-only"
-              disabled={upload.isPending}
-              onChange={(event) => {
-                const file = event.target.files?.[0];
-                if (file) upload.mutate(file);
-                event.currentTarget.value = "";
-              }}
-            />
-          </label>
-          <button
-            type="button"
-            onClick={() => setCreating("document")}
-            className="inline-flex items-center gap-2 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <Plus aria-hidden="true" className="size-4" />
-            {i18n.t("knowledge.new")}
-          </button>
-        </div>
-      </header>
-      {upload.isError && (
-        <p role="alert" className="border-b px-8 py-3 text-sm text-destructive">
-          {i18n.t("knowledge.uploadFailed")}
-        </p>
-      )}
-      {archive.isError || setContextPolicy.isError ? (
-        <p role="alert" className="border-b px-8 py-3 text-sm text-destructive">
-          {i18n.t("knowledge.operationFailed")}
-        </p>
-      ) : null}
-      <div className="flex min-h-0 flex-1">
-        <aside className="flex w-80 min-w-72 flex-col border-r bg-muted/20">
-          <form
-            className="border-b p-3"
-            onSubmit={(event) => {
-              event.preventDefault();
-              setSearchQuery(searchText.trim());
-            }}
-          >
-            <label className="relative block">
-              <span className="sr-only">{i18n.t("knowledge.search")}</span>
-              <Search
-                aria-hidden="true"
-                className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
-              />
-              <input
-                type="search"
-                value={searchText}
-                onChange={(event) => setSearchText(event.target.value)}
-                placeholder={i18n.t("knowledge.search")}
-                className="w-full rounded-md border bg-background py-2 pl-9 pr-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              />
-            </label>
-          </form>
-          <div className="min-h-0 flex-1 overflow-y-auto p-3">
-            {searchQuery ? (
-              <div className="space-y-1">
-                {search.data?.items.map((citation) => (
-                  <button
-                    key={`${citation.nodeId}:${citation.versionId}`}
-                    type="button"
-                    onClick={() => setSelectedId(citation.nodeId)}
-                    className="w-full rounded-md p-2 text-left outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
-                  >
-                    <span className="block truncate text-sm font-medium">{citation.title}</span>
-                    <span className="mt-1 line-clamp-2 text-xs text-muted-foreground">
-                      {citation.passage}
-                    </span>
-                  </button>
-                ))}
-                {search.data?.items.length === 0 && (
-                  <p className="p-2 text-sm text-muted-foreground">
-                    {i18n.t("knowledge.noResults")}
-                  </p>
+        ) : (
+          <>
+            {/* The document's own line: its name, and beside it only what acts on this one
+                document. What the four loose icons used to do is now one menu, the same one the
+                tree row carries — the point of #24 was that there be one place per action, not a
+                second row of them here. Saving joins it from the strip it used to own below
+                (`title-actions`), so the editor starts one screen row higher than it did.
+                ⚠️ The view switch is deliberately NOT here: it changes how the current area is
+                shown, not the document, and it stays beside the breadcrumb where the area is
+                named. */}
+            <div className="flex items-start justify-between gap-5 border-b px-6 py-4">
+              <div className="min-w-0">
+                <h2 className="truncate text-lg font-semibold">{selected.title}</h2>
+                {selected.description && (
+                  <p className="mt-1 text-sm text-muted-foreground">{selected.description}</p>
                 )}
-                <button
-                  type="button"
-                  onClick={() => {
-                    setSearchQuery("");
-                    setSearchText("");
-                  }}
-                  className="mt-3 text-xs text-muted-foreground underline outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                >
-                  {i18n.t("knowledge.clearSearch")}
-                </button>
               </div>
-            ) : tree.isPending ? (
-              <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
-            ) : (
-              <Tree
-                aria-label={i18n.t("knowledge.tree")}
-                items={tree.data ?? []}
-                selectionMode="single"
-                selectedKeys={selectedId ? [selectedId] : []}
-                onSelectionChange={(keys) => {
-                  if (keys === "all") return;
-                  const key = [...keys][0];
-                  setSelectedId(key === undefined ? null : String(key));
-                }}
-                className="outline-none"
-                renderEmptyState={() => (
-                  <p className="p-2 text-sm text-muted-foreground">{i18n.t("knowledge.empty")}</p>
+              <div className="flex shrink-0 items-center gap-2">
+                {selected.kind !== "folder" && (
+                  <TooltipProvider delayDuration={300}>
+                    <Tooltip>
+                      <TooltipTrigger
+                        type="button"
+                        onClick={() => setVersionsOpen((value) => !value)}
+                        aria-label={i18n.t("knowledge.versions")}
+                        aria-expanded={versionsOpen}
+                        className="inline-flex size-8 items-center justify-center rounded-md border bg-background outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+                      >
+                        <History aria-hidden="true" className="size-4" />
+                      </TooltipTrigger>
+                      <TooltipContent>{i18n.t("knowledge.versions")}</TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 )}
-              >
-                {renderTreeItem}
-              </Tree>
-            )}
-          </div>
-        </aside>
-        <section className="relative flex min-w-0 flex-1 flex-col bg-card">
-          {!selected && (
-            <div className="grid flex-1 place-items-center p-8 text-center text-sm text-muted-foreground">
-              {i18n.t("knowledge.select")}
+                <ResourceMenu target={{ type: "knowledge", node: selected }} variant="title" />
+                <div data-slot="title-actions" className="flex items-center gap-2" />
+              </div>
             </div>
-          )}
-          {selected && (
-            <>
-              <div className="flex items-start justify-between gap-5 border-b px-6 py-4">
-                <div className="min-w-0">
-                  <h2 className="truncate text-lg font-semibold">{selected.title}</h2>
-                  {selected.description && (
-                    <p className="mt-1 text-sm text-muted-foreground">{selected.description}</p>
-                  )}
-                </div>
-                <div className="flex shrink-0 items-center gap-1">
-                  <select
-                    value={selected.contextPolicy}
-                    disabled={setContextPolicy.isPending}
-                    onChange={(event) =>
-                      setContextPolicy.mutate({
-                        node: selected,
-                        contextPolicy: event.target.value as ContextPolicy,
-                      })
-                    }
-                    aria-label={i18n.t("knowledge.contextPolicy")}
-                    className="mr-2 rounded-md border bg-background px-2 py-1.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-                  >
-                    <option value="pinned">{i18n.t("knowledge.context.pinned")}</option>
-                    <option value="relevant">{i18n.t("knowledge.context.relevant")}</option>
-                    <option value="explicit">{i18n.t("knowledge.context.explicit")}</option>
-                  </select>
-                  <button
-                    type="button"
-                    onClick={() => setLinksOpen(true)}
-                    aria-label={i18n.t("knowledge.links")}
-                    className="rounded-md p-2 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-                  >
-                    <Link2 aria-hidden="true" className="size-4" />
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setSharing(true)}
-                    aria-label={i18n.t("knowledge.share")}
-                    className="rounded-md p-2 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-                  >
-                    <Share2 aria-hidden="true" className="size-4" />
-                  </button>
-                  {selected.kind !== "folder" && (
-                    <button
-                      type="button"
-                      onClick={() => setVersionsOpen((value) => !value)}
-                      aria-label={i18n.t("knowledge.versions")}
-                      className="rounded-md p-2 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-                    >
-                      <History aria-hidden="true" className="size-4" />
-                    </button>
-                  )}
-                  <button
-                    type="button"
-                    onClick={() => archive.mutate(selected)}
-                    aria-label={i18n.t("knowledge.archive")}
-                    className="rounded-md p-2 text-destructive outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-                  >
-                    <Archive aria-hidden="true" className="size-4" />
-                  </button>
-                </div>
+            {selected.kind === "folder" ? (
+              <div className="grid flex-1 place-items-center p-8 text-sm text-muted-foreground">
+                {i18n.t("knowledge.folderHelp")}
               </div>
-              {selected.kind === "folder" ? (
-                <div className="grid flex-1 place-items-center p-8 text-sm text-muted-foreground">
-                  {i18n.t("knowledge.folderHelp")}
-                </div>
-              ) : selected.kind === "attachment" && document.data ? (
-                <AttachmentPanel node={selected} />
-              ) : document.isPending ? (
-                <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
-              ) : document.data ? (
-                <Suspense
-                  fallback={
-                    <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
-                  }
-                >
-                  <KnowledgeEditor
-                    key={document.data.node.id}
-                    data={data}
-                    document={document.data}
-                    i18n={i18n}
-                    onSaved={(saved) => {
-                      queryClient.setQueryData(["knowledge", selected.id], saved);
-                      void queryClient.invalidateQueries({ queryKey: ["knowledge-tree"] });
-                    }}
-                  />
-                </Suspense>
-              ) : null}
-              {versionsOpen && selected.kind !== "folder" && (
-                <VersionHistory nodeId={selected.id} close={() => setVersionsOpen(false)} />
-              )}
-            </>
-          )}
-        </section>
-      </div>
-      {creating && (
-        <CreateKnowledge
-          kind={creating}
-          parentId={selected?.kind === "folder" ? selected.id : (selected?.parentId ?? null)}
-          close={() => setCreating(null)}
-        />
-      )}
-      {sharing && selected && <ShareKnowledge node={selected} close={() => setSharing(false)} />}
-      {linksOpen && selected && (
-        <KnowledgeLinks
-          node={selected}
-          nodes={flattenTree(tree.data ?? [])}
-          close={() => setLinksOpen(false)}
-        />
-      )}
-      {graphOpen && !graph.data && (
-        <Modal title={i18n.t("knowledge.graph")} close={() => setGraphOpen(false)}>
-          <p role={graph.isError ? "alert" : undefined} className="text-sm text-muted-foreground">
-            {graph.isError ? i18n.t("knowledge.graphFailed") : i18n.t("common.loading")}
-          </p>
-          {graph.isError && (
-            <button
-              type="button"
-              onClick={() => void graph.refetch()}
-              className="mt-4 rounded-md border px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-            >
-              {i18n.t("common.retry")}
-            </button>
-          )}
-        </Modal>
-      )}
-      {graphOpen && graph.data && (
-        <Suspense fallback={null}>
-          <KnowledgeGraphView
-            data={graph.data}
-            i18n={i18n}
-            close={() => setGraphOpen(false)}
-            select={(nodeId) => {
-              setSelectedId(nodeId);
-              setGraphOpen(false);
-            }}
-          />
-        </Suspense>
-      )}
+            ) : selected.kind === "attachment" ? (
+              <AttachmentPanel node={selected} />
+            ) : selected.kind === "table" ? (
+              <KnowledgeTablePanel node={selected} />
+            ) : document.data ? (
+              <Suspense
+                fallback={
+                  <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+                }
+              >
+                <KnowledgeEditor
+                  key={document.data.node.id}
+                  data={data}
+                  document={document.data}
+                  i18n={i18n}
+                  onSaved={(saved) => {
+                    queryClient.setQueryData(["knowledge", selected.id], saved);
+                  }}
+                />
+              </Suspense>
+            ) : null}
+            {versionsOpen && selected.kind !== "folder" && (
+              <VersionHistory nodeId={selected.id} close={() => setVersionsOpen(false)} />
+            )}
+          </>
+        )}
+      </section>
     </div>
   );
 }
@@ -522,259 +199,6 @@ function AttachmentPanel({ node }: { node: KnowledgeNode }) {
   );
 }
 
-function KnowledgeLinks({
-  node,
-  nodes,
-  close,
-}: {
-  node: KnowledgeNode;
-  nodes: KnowledgeNode[];
-  close(): void;
-}) {
-  const { data, i18n } = useIntelRouterContext();
-  const queryClient = useQueryClient();
-  const [targetNodeId, setTargetNodeId] = useState("");
-  const [relation, setRelation] = useState<KnowledgeLinkRelation>("related");
-  const links = useQuery({
-    queryKey: ["knowledge-links", node.id],
-    queryFn: () => data.listKnowledgeLinks(node.id),
-  });
-  const create = useMutation({
-    mutationFn: () =>
-      data.createKnowledgeLink({
-        sourceNodeId: node.id,
-        targetNodeId,
-        relation,
-        label: null,
-        idempotencyKey: crypto.randomUUID(),
-      }),
-    onSuccess: async () => {
-      setTargetNodeId("");
-      await Promise.all([
-        queryClient.invalidateQueries({ queryKey: ["knowledge-links", node.id] }),
-        queryClient.invalidateQueries({ queryKey: ["knowledge-graph"] }),
-      ]);
-    },
-  });
-  const remove = useMutation({
-    mutationFn: (linkId: string) =>
-      data.deleteKnowledgeLink({
-        sourceNodeId: node.id,
-        linkId,
-        idempotencyKey: crypto.randomUUID(),
-      }),
-    onSuccess: async () => {
-      await Promise.all([
-        queryClient.invalidateQueries({ queryKey: ["knowledge-links", node.id] }),
-        queryClient.invalidateQueries({ queryKey: ["knowledge-graph"] }),
-      ]);
-    },
-  });
-  const titles = new Map(nodes.map((candidate) => [candidate.id, candidate.title]));
-
-  return (
-    <Modal title={i18n.t("knowledge.links")} close={close}>
-      <ul className="mb-5 max-h-48 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}
-              className="flex items-center justify-between gap-3 rounded-md border p-3"
-            >
-              <div 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 ? "→" : "←"} {link.label ?? link.relation.replaceAll("_", " ")}
-                </span>
-              </div>
-              {outgoing && (
-                <button
-                  type="button"
-                  onClick={() => remove.mutate(link.id)}
-                  aria-label={i18n.t("knowledge.deleteLink")}
-                  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>
-          );
-        })}
-        {links.data?.items.length === 0 && (
-          <li className="text-sm text-muted-foreground">{i18n.t("knowledge.noLinks")}</li>
-        )}
-      </ul>
-      <form
-        className="space-y-4 border-t pt-5"
-        onSubmit={(event) => {
-          event.preventDefault();
-          create.mutate();
-        }}
-      >
-        <label className="block text-sm font-medium">
-          {i18n.t("knowledge.linkTarget")}
-          <select
-            required
-            value={targetNodeId}
-            onChange={(event) => setTargetNodeId(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"
-          >
-            <option value="">{i18n.t("knowledge.selectLinkTarget")}</option>
-            {nodes
-              .filter((candidate) => candidate.id !== node.id)
-              .map((candidate) => (
-                <option key={candidate.id} value={candidate.id}>
-                  {candidate.title}
-                </option>
-              ))}
-          </select>
-        </label>
-        <label className="block text-sm font-medium">
-          {i18n.t("knowledge.relation")}
-          <select
-            value={relation}
-            onChange={(event) => setRelation(event.target.value as KnowledgeLinkRelation)}
-            className="mt-2 w-full rounded-md border bg-background px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            {(["related", "references", "depends_on", "implements"] as const).map((value) => (
-              <option key={value} value={value}>
-                {i18n.t(`knowledge.relation.${value}`)}
-              </option>
-            ))}
-          </select>
-        </label>
-        <button
-          type="submit"
-          disabled={!targetNodeId || create.isPending}
-          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.createLink")}
-        </button>
-      </form>
-    </Modal>
-  );
-}
-
-function CreateKnowledge({
-  kind,
-  parentId,
-  close,
-}: {
-  kind: "document" | "folder";
-  parentId: string | null;
-  close(): void;
-}) {
-  const { data, i18n } = useIntelRouterContext();
-  const queryClient = useQueryClient();
-  const [title, setTitle] = useState("");
-  const mutation = useMutation({
-    mutationFn: () =>
-      data.createKnowledge({
-        parentId,
-        kind,
-        title,
-        description: null,
-        contextPolicy: "relevant",
-        idempotencyKey: crypto.randomUUID(),
-      }),
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({ queryKey: ["knowledge-tree"] });
-      close();
-    },
-  });
-  return (
-    <Modal
-      title={kind === "folder" ? i18n.t("knowledge.newFolder") : i18n.t("knowledge.new")}
-      close={close}
-    >
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          mutation.mutate();
-        }}
-        className="space-y-4"
-      >
-        <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>
-        <button
-          type="submit"
-          disabled={mutation.isPending}
-          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("common.create")}
-        </button>
-      </form>
-    </Modal>
-  );
-}
-
-function ShareKnowledge({ node, close }: { node: KnowledgeNode; close(): void }) {
-  const { data, i18n } = useIntelRouterContext();
-  const [email, setEmail] = useState("");
-  const [role, setRole] = useState<ResourceRole>("viewer");
-  const mutation = useMutation({
-    mutationFn: () =>
-      data.shareKnowledge({
-        resourceId: node.id,
-        principal: { type: "email", email },
-        role,
-        expiresAt: null,
-        idempotencyKey: crypto.randomUUID(),
-      }),
-    onSuccess: close,
-  });
-  return (
-    <Modal title={i18n.t("knowledge.share")} close={close}>
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          mutation.mutate();
-        }}
-        className="space-y-4"
-      >
-        <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>
-        <label className="block text-sm font-medium">
-          {i18n.t("knowledge.role")}
-          <select
-            value={role}
-            onChange={(event) => setRole(event.target.value as ResourceRole)}
-            className="mt-2 w-full rounded-md border bg-background px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <option value="viewer">{i18n.t("knowledge.viewer")}</option>
-            <option value="editor">{i18n.t("knowledge.editor")}</option>
-            <option value="manager">{i18n.t("knowledge.manager")}</option>
-          </select>
-        </label>
-        <button
-          type="submit"
-          disabled={mutation.isPending}
-          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>
-  );
-}
-
 function VersionHistory({ nodeId, close }: { nodeId: string; close(): void }) {
   const { data, i18n } = useIntelRouterContext();
   const versions = useQuery({