@anchrd/intel-ui 0.1.0

package/src/knowledge/knowledge.tsx

@@ -0,0 +1,825 @@
+import type {
+  ContextPolicy,
+  KnowledgeLinkRelation,
+  KnowledgeNode,
+  ResourceRole,
+} 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 { useIntelRouterContext } from "@/router/router-context.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 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,
+  });
+  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 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"
+              >
+                {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>
+          </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>
+                )}
+                <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>
+                )}
+              >
+                {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")}
+            </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>
+              </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>
+      )}
+    </div>
+  );
+}
+
+function AttachmentPanel({ node }: { node: KnowledgeNode }) {
+  const { data, i18n } = useIntelRouterContext();
+  const download = useMutation({
+    mutationFn: () => data.getKnowledgeAttachment(node.id),
+    onSuccess: (blob) => {
+      const url = URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = node.title;
+      document.body.append(anchor);
+      anchor.click();
+      anchor.remove();
+      setTimeout(() => URL.revokeObjectURL(url), 0);
+    },
+  });
+  return (
+    <div className="grid flex-1 place-items-center p-8">
+      <div className="max-w-md rounded-xl border bg-background p-8 text-center shadow-sm">
+        <Paperclip aria-hidden="true" className="mx-auto size-10 text-primary" />
+        <h3 className="mt-4 font-semibold">{node.title}</h3>
+        <p className="mt-2 text-sm text-muted-foreground">{i18n.t("knowledge.attachmentHelp")}</p>
+        <button
+          type="button"
+          onClick={() => download.mutate()}
+          disabled={download.isPending}
+          className="mt-5 inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+        >
+          <Download aria-hidden="true" className="size-4" />
+          {download.isPending ? i18n.t("common.loading") : i18n.t("knowledge.download")}
+        </button>
+        {download.isError ? (
+          <p role="alert" className="mt-4 text-sm text-destructive">
+            {i18n.t("knowledge.downloadFailed")}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+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({
+    queryKey: ["knowledge-versions", nodeId],
+    queryFn: () => data.listKnowledgeVersions(nodeId),
+  });
+  return (
+    <aside
+      aria-label={i18n.t("knowledge.versions")}
+      className="absolute bottom-0 right-0 top-0 z-10 w-80 overflow-y-auto border-l bg-card p-5 shadow-xl"
+    >
+      <div className="flex items-start justify-between gap-4">
+        <h3 className="font-semibold">{i18n.t("knowledge.versions")}</h3>
+        <button
+          type="button"
+          onClick={close}
+          aria-label={i18n.t("common.close")}
+          className="rounded-md px-2 py-1 text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          ×
+        </button>
+      </div>
+      {versions.isPending ? (
+        <p className="mt-4 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+      ) : null}
+      {versions.isError ? (
+        <p role="alert" className="mt-4 text-sm text-destructive">
+          {i18n.t("knowledge.operationFailed")}
+        </p>
+      ) : null}
+      <ol className="mt-4 space-y-3">
+        {versions.data?.items.map((version) => (
+          <li key={version.id} className="rounded-md border p-3 text-sm">
+            <span className="font-medium">
+              {i18n.t("knowledge.version", { sequence: version.sequence })}
+            </span>
+            <time className="mt-1 block text-xs text-muted-foreground" dateTime={version.createdAt}>
+              {new Intl.DateTimeFormat(i18n.locale, {
+                dateStyle: "medium",
+                timeStyle: "short",
+              }).format(new Date(version.createdAt))}
+            </time>
+          </li>
+        ))}
+      </ol>
+    </aside>
+  );
+}