@burdenoff/microfe-planmagnet 2026.927.2 → 2026.927.4

package/dist/planmagnet/pages/DocsDocDetailPagePage.js

@@ -1,19 +1,20 @@
 import { usePlanMagnetNavigate as e } from "../providers/PlanMagnetProvider.js";
 import { PersonName as t } from "../people/People.js";
-import { MarkdownEditor as n } from "../../components/MarkdownEditor.js";
-import { throwOnError as ee } from "../utils/mutationResult.js";
-import { DOC_STATUSES as te, DocStatusBadge as ne } from "../docs/DocStatusBadge.js";
-import { useState as r } from "react";
-import { ArrowLeft as re, History as ie, Link2 as ae, X as oe } from "lucide-react";
-import { useSearchParams as se } from "react-router";
-import { gql as i } from "@apollo/client";
-import { useApolloClient as ce, useMutation as a, useQuery as le } from "@apollo/client/react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { AlertDialog as c, AlertDialogAction as l, AlertDialogCancel as u, AlertDialogContent as d, AlertDialogDescription as f, AlertDialogFooter as p, AlertDialogHeader as m, AlertDialogTitle as h, AlertDialogTrigger as g, Button as _, Card as v, CardContent as y, CardHeader as b, CardTitle as x, Input as S } from "@burdenoff/fe-libs/ui";
-import { Markdown as C } from "@burdenoff/fe-libs/shared/components";
-import { clearGraphqlFetchResponseCache as ue } from "@burdenoff/fe-libs/shared/graphql";
+import { throwOnError as n } from "../utils/mutationResult.js";
+import { WorkItemSearchSelect as ee } from "../controls/Pickers.js";
+import { MarkdownEditor as te } from "../../components/MarkdownEditor.js";
+import { DOC_STATUSES as ne, DocStatusBadge as r } from "../docs/DocStatusBadge.js";
+import { useState as i } from "react";
+import { ArrowLeft as re, History as ie, Link2 as a, X as ae } from "lucide-react";
+import { useSearchParams as oe } from "react-router";
+import { gql as o } from "@apollo/client";
+import { useApolloClient as se, useMutation as s, useQuery as ce } from "@apollo/client/react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { AlertDialog as u, AlertDialogAction as d, AlertDialogCancel as f, AlertDialogContent as p, AlertDialogDescription as m, AlertDialogFooter as h, AlertDialogHeader as g, AlertDialogTitle as _, AlertDialogTrigger as v, Button as y, Card as b, CardContent as x, CardHeader as S, CardTitle as C, Input as w } from "@burdenoff/fe-libs/ui";
+import { Markdown as T } from "@burdenoff/fe-libs/shared/components";
+import { clearGraphqlFetchResponseCache as le } from "@burdenoff/fe-libs/shared/graphql";
 //#region src/planmagnet/pages/DocsDocDetailPagePage.tsx
-var w = i`
+var E = o`
   query DocDetail($id: ID!) {
     planmagnetDoc(id: $id) {
       id
@@ -41,7 +42,7 @@ var w = i`
       }
     }
   }
-`, T = i`
+`, ue = o`
   mutation DocUpdate($id: ID!, $input: PlanmagnetUpdateDocInput!) {
     planmagnetUpdateDoc(id: $id, input: $input) {
       id
@@ -49,119 +50,128 @@ var w = i`
       status
     }
   }
-`, E = i`
+`, de = o`
   mutation DocRevert($id: ID!, $toVersion: Int!, $expectedVersion: Int) {
     planmagnetRevertDoc(id: $id, toVersion: $toVersion, expectedVersion: $expectedVersion) {
       id
       version
     }
   }
-`, D = i`
+`, fe = o`
   mutation DocDelete($id: ID!) {
     planmagnetDeleteDoc(id: $id)
   }
-`, de = i`
+`, pe = o`
+  mutation DocLinkWorkItem($docId: ID!, $workItemId: ID!) {
+    planmagnetLinkDocToWorkItem(docId: $docId, workItemId: $workItemId) {
+      id
+    }
+  }
+`, me = o`
   mutation DocUnlinkWorkItem($docId: ID!, $workItemId: ID!) {
     planmagnetUnlinkDocFromWorkItem(docId: $docId, workItemId: $workItemId)
   }
-`, O = (e, t) => e instanceof Error ? e.message : t, k = (e) => new Date(e).toLocaleString();
-function A() {
-	let [i] = se(), A = i.get("docId") ?? "", j = e(), [M, N] = r(!1), [P, F] = r(""), [I, L] = r(""), [R, z] = r(""), [B, V] = r(null), [H, fe] = r(null), [U, pe] = r(null), { data: W, loading: me, error: G } = le(w, {
-		variables: { id: A },
-		skip: !A,
+`, he = (e, t) => e instanceof Error ? e.message : t, D = (e) => new Date(e).toLocaleString();
+function O() {
+	let [o] = oe(), O = o.get("docId") ?? "", k = e(), [A, j] = i(!1), [M, N] = i(""), [P, F] = i(""), [I, L] = i(""), [R, z] = i(null), [B, ge] = i(null), [V, _e] = i(null), { data: H, loading: ve, error: U } = ce(E, {
+		variables: { id: O },
+		skip: !O,
 		fetchPolicy: "cache-and-network"
-	}), he = ce(), K = {
+	}), ye = se(), W = {
 		refetchQueries: ["DocDetail"],
 		awaitRefetchQueries: !0
-	}, [q, J] = a(T, K), [ge, _e] = a(E, K), [ve, ye] = a(D, { refetchQueries: ["DocsList"] }), [be, xe] = a(de, K), Y = W?.planmagnetDoc, X = J.loading || _e.loading || ye.loading, Z = async (e, t) => {
-		V(null);
+	}, [G, K] = s(ue, W), [be, xe] = s(de, W), [Se, Ce] = s(fe, { refetchQueries: ["DocsList"] }), [we, Te] = s(me, W), [Ee, De] = s(pe, {
+		...W,
+		refetchQueries: ["DocDetail", "GetWorkItemDocs"]
+	}), [q, J] = i(""), Y = H?.planmagnetDoc, X = K.loading || xe.loading || Ce.loading, Z = async (e, t) => {
+		z(null);
 		try {
-			return await ee(e()), !0;
+			return await n(e()), !0;
 		} catch (e) {
-			return V(O(e, t)), ue(), await he.query({
-				query: w,
-				variables: { id: A },
+			return z(he(e, t)), le(), await ye.query({
+				query: E,
+				variables: { id: O },
 				fetchPolicy: "network-only"
 			}).catch(() => void 0), !1;
 		}
 	};
-	if (!A) return /* @__PURE__ */ o("div", {
+	if (!O) return /* @__PURE__ */ c("div", {
 		className: "p-6 text-sm text-muted-foreground",
 		children: "No doc selected."
 	});
-	if (me && !W) return /* @__PURE__ */ o("div", {
+	if (ve && !H) return /* @__PURE__ */ c("div", {
 		className: "p-6 text-sm text-muted-foreground",
 		children: "Loading doc…"
 	});
-	if (G && !Y) return /* @__PURE__ */ s("p", {
+	if (U && !Y) return /* @__PURE__ */ l("p", {
 		role: "alert",
 		className: "p-6 text-sm text-destructive",
-		children: ["The doc could not be loaded: ", G.message]
+		children: ["The doc could not be loaded: ", U.message]
 	});
-	if (!Y) return /* @__PURE__ */ s("div", {
+	if (!Y) return /* @__PURE__ */ l("div", {
 		className: "space-y-3 p-6",
-		children: [/* @__PURE__ */ o("p", {
+		children: [/* @__PURE__ */ c("p", {
 			className: "text-sm text-muted-foreground",
 			children: "This doc does not exist in this workspace, or it was deleted."
-		}), /* @__PURE__ */ o(_, {
+		}), /* @__PURE__ */ c(y, {
 			size: "sm",
 			variant: "outline",
-			onClick: () => j("/docs/docs-page"),
+			onClick: () => k("/docs/docs-page"),
 			children: "Back to docs"
 		})]
 	});
-	let Se = () => {
-		F(Y.title), L(Y.content), z(""), V(null), pe(Y.version), N(!0);
-	}, Ce = async () => {
-		await Z(() => q({ variables: {
+	let Oe = () => {
+		N(Y.title), F(Y.content), L(""), z(null), _e(Y.version), j(!0);
+	}, ke = async () => {
+		await Z(() => G({ variables: {
 			id: Y.id,
 			input: {
-				title: P.trim(),
-				content: I,
-				...R.trim() ? { changeNote: R.trim() } : {},
-				expectedVersion: U
+				title: M.trim(),
+				content: P,
+				...I.trim() ? { changeNote: I.trim() } : {},
+				expectedVersion: V
 			}
-		} }), "The doc could not be saved.") && N(!1);
-	}, Q = [...Y.revisions].sort((e, t) => t.version - e.version), $ = H === null ? null : Q.find((e) => e.version === H);
-	return /* @__PURE__ */ s("div", {
+		} }), "The doc could not be saved.") && j(!1);
+	}, Q = [...Y.revisions].sort((e, t) => t.version - e.version), $ = B === null ? null : Q.find((e) => e.version === B);
+	return /* @__PURE__ */ l("div", {
 		className: "space-y-6 p-6",
 		"data-testid": "doc-detail",
 		children: [
-			/* @__PURE__ */ s(_, {
+			/* @__PURE__ */ l(y, {
 				size: "sm",
 				variant: "ghost",
-				onClick: () => j("/docs/docs-page"),
-				children: [/* @__PURE__ */ o(re, { className: "mr-1 h-4 w-4" }), "All docs"]
+				onClick: () => k("/docs/docs-page"),
+				children: [/* @__PURE__ */ c(re, { className: "mr-1 h-4 w-4" }), "All docs"]
 			}),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ l("div", {
 				className: "flex flex-wrap items-start justify-between gap-3",
-				children: [/* @__PURE__ */ s("div", {
+				children: [/* @__PURE__ */ l("div", {
 					className: "min-w-0 space-y-1",
-					children: [/* @__PURE__ */ o("h1", {
+					children: [/* @__PURE__ */ c("h1", {
 						className: "text-2xl font-semibold break-words",
 						"data-testid": "doc-title",
 						children: Y.title
-					}), /* @__PURE__ */ s("p", {
+					}), /* @__PURE__ */ l("p", {
 						className: "text-xs text-muted-foreground",
 						children: [
-							/* @__PURE__ */ o(ne, { status: Y.status }),
+							/* @__PURE__ */ c(r, { status: Y.status }),
 							" · version ",
 							Y.version,
 							" · updated",
 							" ",
-							k(Y.updatedAt),
+							D(Y.updatedAt),
 							" by ",
-							/* @__PURE__ */ o(t, { id: Y.updatedBy ?? Y.createdBy })
+							/* @__PURE__ */ c(t, { id: Y.updatedBy ?? Y.createdBy })
 						]
 					})]
-				}), !M && /* @__PURE__ */ s("div", {
+				}), !A && /* @__PURE__ */ l("div", {
 					className: "flex flex-wrap gap-2",
 					children: [
-						te.filter((e) => e !== Y.status).map((e) => /* @__PURE__ */ o(_, {
+						ne.filter((e) => e !== Y.status).map((e) => /* @__PURE__ */ c(y, {
 							size: "sm",
 							variant: "outline",
 							disabled: X,
-							onClick: () => Z(() => q({ variables: {
+							onClick: () => Z(() => G({ variables: {
 								id: Y.id,
 								input: {
 									status: e,
@@ -170,144 +180,144 @@ function A() {
 							} }), "The status could not be changed."),
 							children: e === "PUBLISHED" ? "Publish" : e === "ARCHIVED" ? "Archive" : "Back to draft"
 						}, e)),
-						/* @__PURE__ */ o(_, {
+						/* @__PURE__ */ c(y, {
 							size: "sm",
-							onClick: Se,
+							onClick: Oe,
 							"data-testid": "doc-edit",
 							children: "Edit"
 						}),
-						/* @__PURE__ */ s(c, { children: [/* @__PURE__ */ o(g, {
+						/* @__PURE__ */ l(u, { children: [/* @__PURE__ */ c(v, {
 							asChild: !0,
-							children: /* @__PURE__ */ o(_, {
+							children: /* @__PURE__ */ c(y, {
 								size: "sm",
 								variant: "outline",
 								disabled: X,
 								children: "Delete"
 							})
-						}), /* @__PURE__ */ s(d, { children: [/* @__PURE__ */ s(m, { children: [/* @__PURE__ */ s(h, { children: [
+						}), /* @__PURE__ */ l(p, { children: [/* @__PURE__ */ l(g, { children: [/* @__PURE__ */ l(_, { children: [
 							"Delete “",
 							Y.title,
 							"”?"
-						] }), /* @__PURE__ */ s(f, { children: [
+						] }), /* @__PURE__ */ l(m, { children: [
 							"The doc and its history are removed for everyone, and it is unlinked from",
 							" ",
 							Y.linkedWorkItems.length,
 							" work item",
 							Y.linkedWorkItems.length === 1 ? "" : "s",
 							"."
-						] })] }), /* @__PURE__ */ s(p, { children: [/* @__PURE__ */ o(u, { children: "Keep it" }), /* @__PURE__ */ o(l, {
+						] })] }), /* @__PURE__ */ l(h, { children: [/* @__PURE__ */ c(f, { children: "Keep it" }), /* @__PURE__ */ c(d, {
 							className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
 							onClick: async () => {
-								await Z(() => ve({ variables: { id: Y.id } }), "The doc could not be deleted.") && j("/docs/docs-page");
+								await Z(() => Se({ variables: { id: Y.id } }), "The doc could not be deleted.") && k("/docs/docs-page");
 							},
 							children: "Delete"
 						})] })] })] })
 					]
 				})]
 			}),
-			B && /* @__PURE__ */ o("p", {
+			R && /* @__PURE__ */ c("p", {
 				role: "alert",
 				className: "text-sm text-destructive",
 				"data-testid": "doc-error",
-				children: B
+				children: R
 			}),
-			M && U !== Y.version && /* @__PURE__ */ s("p", {
+			A && V !== Y.version && /* @__PURE__ */ l("p", {
 				className: "text-sm text-status-warning-text",
 				"data-testid": "doc-moved-on",
 				children: [
 					"Someone saved version ",
 					Y.version,
 					" after you started editing version ",
-					U,
+					V,
 					". Your text is kept below; copy what you need, then discard and edit the latest."
 				]
 			}),
-			M ? /* @__PURE__ */ o(v, { children: /* @__PURE__ */ s(y, {
+			A ? /* @__PURE__ */ c(b, { children: /* @__PURE__ */ l(x, {
 				className: "space-y-3 pt-6",
 				children: [
-					/* @__PURE__ */ o(S, {
+					/* @__PURE__ */ c(w, {
 						"aria-label": "Doc title",
-						value: P,
-						onChange: (e) => F(e.target.value)
+						value: M,
+						onChange: (e) => N(e.target.value)
 					}),
-					/* @__PURE__ */ o(n, {
-						value: I,
-						onChange: L,
+					/* @__PURE__ */ c(te, {
+						value: P,
+						onChange: F,
 						minHeight: 240
 					}),
-					/* @__PURE__ */ o(S, {
+					/* @__PURE__ */ c(w, {
 						"aria-label": "Change note",
 						placeholder: "What changed? (optional, shown in the history)",
-						value: R,
-						onChange: (e) => z(e.target.value)
+						value: I,
+						onChange: (e) => L(e.target.value)
 					}),
-					/* @__PURE__ */ s("div", {
+					/* @__PURE__ */ l("div", {
 						className: "flex justify-end gap-2",
-						children: [/* @__PURE__ */ o(_, {
+						children: [/* @__PURE__ */ c(y, {
 							size: "sm",
 							variant: "ghost",
 							onClick: () => {
-								N(!1), V(null);
+								j(!1), z(null);
 							},
-							children: U === Y.version ? "Cancel" : "Discard my edits"
-						}), /* @__PURE__ */ o(_, {
+							children: V === Y.version ? "Cancel" : "Discard my edits"
+						}), /* @__PURE__ */ c(y, {
 							size: "sm",
-							onClick: Ce,
-							disabled: J.loading || U !== Y.version,
+							onClick: ke,
+							disabled: K.loading || V !== Y.version,
 							"data-testid": "doc-save",
-							children: J.loading ? "Saving…" : "Save new version"
+							children: K.loading ? "Saving…" : "Save new version"
 						})]
 					})
 				]
-			}) }) : /* @__PURE__ */ o(v, { children: /* @__PURE__ */ o(y, {
+			}) }) : /* @__PURE__ */ c(b, { children: /* @__PURE__ */ c(x, {
 				className: "prose prose-sm max-w-none pt-6 dark:prose-invert",
-				children: Y.content.trim() ? /* @__PURE__ */ o(C, { children: Y.content }) : /* @__PURE__ */ o("p", {
+				children: Y.content.trim() ? /* @__PURE__ */ c(T, { children: Y.content }) : /* @__PURE__ */ c("p", {
 					className: "text-sm text-muted-foreground",
 					children: "This doc is empty."
 				})
 			}) }),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ l("div", {
 				className: "grid grid-cols-1 gap-6 lg:grid-cols-2",
-				children: [/* @__PURE__ */ s(v, {
+				children: [/* @__PURE__ */ l(b, {
 					"data-testid": "doc-history",
-					children: [/* @__PURE__ */ o(b, { children: /* @__PURE__ */ s(x, {
+					children: [/* @__PURE__ */ c(S, { children: /* @__PURE__ */ l(C, {
 						className: "flex items-center gap-2",
 						children: [
-							/* @__PURE__ */ o(ie, { className: "h-4 w-4" }),
+							/* @__PURE__ */ c(ie, { className: "h-4 w-4" }),
 							" History (",
 							Q.length,
 							")"
 						]
-					}) }), /* @__PURE__ */ s(y, {
+					}) }), /* @__PURE__ */ l(x, {
 						className: "space-y-2",
-						children: [/* @__PURE__ */ o("ol", {
+						children: [/* @__PURE__ */ c("ol", {
 							className: "space-y-2",
 							children: Q.map((e) => {
 								let n = e.version === Y.version;
-								return /* @__PURE__ */ s("li", {
+								return /* @__PURE__ */ l("li", {
 									className: "space-y-1 rounded-md border p-2",
 									"data-testid": "doc-revision",
-									children: [/* @__PURE__ */ s("div", {
+									children: [/* @__PURE__ */ l("div", {
 										className: "flex flex-wrap items-center justify-between gap-2",
-										children: [/* @__PURE__ */ s("span", {
+										children: [/* @__PURE__ */ l("span", {
 											className: "text-sm font-medium",
 											children: [
 												"Version ",
 												e.version,
 												n ? " (current)" : ""
 											]
-										}), /* @__PURE__ */ s("span", {
+										}), /* @__PURE__ */ l("span", {
 											className: "flex gap-1",
-											children: [/* @__PURE__ */ o(_, {
+											children: [/* @__PURE__ */ c(y, {
 												size: "sm",
 												variant: "ghost",
 												className: "h-7 text-xs",
-												"aria-expanded": H === e.version,
-												onClick: () => fe(H === e.version ? null : e.version),
-												children: H === e.version ? "Hide" : "View"
-											}), !n && !M && /* @__PURE__ */ s(c, { children: [/* @__PURE__ */ o(g, {
+												"aria-expanded": B === e.version,
+												onClick: () => ge(B === e.version ? null : e.version),
+												children: B === e.version ? "Hide" : "View"
+											}), !n && !A && /* @__PURE__ */ l(u, { children: [/* @__PURE__ */ c(v, {
 												asChild: !0,
-												children: /* @__PURE__ */ o(_, {
+												children: /* @__PURE__ */ c(y, {
 													size: "sm",
 													variant: "outline",
 													className: "h-7 text-xs",
@@ -315,18 +325,18 @@ function A() {
 													"data-testid": "doc-restore",
 													children: "Restore"
 												})
-											}), /* @__PURE__ */ s(d, { children: [/* @__PURE__ */ s(m, { children: [/* @__PURE__ */ s(h, { children: [
+											}), /* @__PURE__ */ l(p, { children: [/* @__PURE__ */ l(g, { children: [/* @__PURE__ */ l(_, { children: [
 												"Restore version ",
 												e.version,
 												"?"
-											] }), /* @__PURE__ */ s(f, { children: [
+											] }), /* @__PURE__ */ l(m, { children: [
 												"Its title and text become version ",
 												Y.version + 1,
 												". Nothing is deleted: version ",
 												Y.version,
 												" stays in the history."
-											] })] }), /* @__PURE__ */ s(p, { children: [/* @__PURE__ */ o(u, { children: "Cancel" }), /* @__PURE__ */ o(l, {
-												onClick: () => Z(() => ge({ variables: {
+											] })] }), /* @__PURE__ */ l(h, { children: [/* @__PURE__ */ c(f, { children: "Cancel" }), /* @__PURE__ */ c(d, {
+												onClick: () => Z(() => be({ variables: {
 													id: Y.id,
 													toVersion: e.version,
 													expectedVersion: Y.version
@@ -334,21 +344,21 @@ function A() {
 												children: "Restore"
 											})] })] })] })]
 										})]
-									}), /* @__PURE__ */ s("p", {
+									}), /* @__PURE__ */ l("p", {
 										className: "text-xs text-muted-foreground",
 										children: [
-											k(e.createdAt),
+											D(e.createdAt),
 											" · ",
-											/* @__PURE__ */ o(t, { id: e.createdBy }),
+											/* @__PURE__ */ c(t, { id: e.createdBy }),
 											e.changeNote ? ` · ${e.changeNote}` : ""
 										]
 									})]
 								}, e.id);
 							})
-						}), $ && /* @__PURE__ */ s("div", {
+						}), $ && /* @__PURE__ */ l("div", {
 							className: "space-y-1 rounded-md border bg-muted/40 p-3",
 							"data-testid": "doc-revision-view",
-							children: [/* @__PURE__ */ s("p", {
+							children: [/* @__PURE__ */ l("p", {
 								className: "text-sm font-medium",
 								children: [
 									"Version ",
@@ -356,53 +366,77 @@ function A() {
 									": ",
 									$.title
 								]
-							}), /* @__PURE__ */ o("div", {
+							}), /* @__PURE__ */ c("div", {
 								className: "prose prose-sm max-w-none dark:prose-invert",
-								children: /* @__PURE__ */ o(C, { children: $.content })
+								children: /* @__PURE__ */ c(T, { children: $.content })
 							})]
 						})]
 					})]
-				}), /* @__PURE__ */ s(v, {
+				}), /* @__PURE__ */ l(b, {
 					"data-testid": "doc-linked-items",
-					children: [/* @__PURE__ */ o(b, { children: /* @__PURE__ */ s(x, {
+					children: [/* @__PURE__ */ c(S, { children: /* @__PURE__ */ l(C, {
 						className: "flex items-center gap-2",
 						children: [
-							/* @__PURE__ */ o(ae, { className: "h-4 w-4" }),
+							/* @__PURE__ */ c(a, { className: "h-4 w-4" }),
 							" Linked work items (",
 							Y.linkedWorkItems.length,
 							")"
 						]
-					}) }), /* @__PURE__ */ s(y, {
+					}) }), /* @__PURE__ */ l(x, {
 						className: "space-y-2",
-						children: [Y.linkedWorkItems.length === 0 && /* @__PURE__ */ o("p", {
-							className: "text-sm text-muted-foreground",
-							children: "Not linked to any work item. A doc created from a task's “Linked Docs” panel is linked to that task; linking an existing doc is not available yet."
-						}), Y.linkedWorkItems.map((e) => /* @__PURE__ */ s("div", {
-							className: "flex items-center justify-between gap-2 rounded-md border p-2",
-							children: [/* @__PURE__ */ s("button", {
-								type: "button",
-								className: "min-w-0 truncate text-left text-sm hover:underline",
-								onClick: () => j(`/tasks/task-detail-page?taskId=${encodeURIComponent(e.id)}`),
-								children: [
-									/* @__PURE__ */ o("span", {
-										className: "text-muted-foreground",
-										children: e.key
-									}),
-									" ",
-									e.title
-								]
-							}), /* @__PURE__ */ o(_, {
-								size: "icon",
-								variant: "ghost",
-								disabled: xe.loading,
-								"aria-label": `Unlink ${e.title}`,
-								onClick: () => Z(() => be({ variables: {
-									docId: Y.id,
-									workItemId: e.id
-								} }), "The work item could not be unlinked."),
-								children: /* @__PURE__ */ o(oe, { className: "h-4 w-4" })
-							})]
-						}, e.id))]
+						children: [
+							Y.linkedWorkItems.length === 0 && /* @__PURE__ */ c("p", {
+								className: "text-sm text-muted-foreground",
+								children: "Not linked to any work item yet. Pick one below, or use “Link existing doc” on the task."
+							}),
+							Y.linkedWorkItems.map((e) => /* @__PURE__ */ l("div", {
+								className: "flex items-center justify-between gap-2 rounded-md border p-2",
+								children: [/* @__PURE__ */ l("button", {
+									type: "button",
+									className: "min-w-0 truncate text-left text-sm hover:underline",
+									onClick: () => k(`/tasks/task-detail-page?taskId=${encodeURIComponent(e.id)}`),
+									children: [
+										/* @__PURE__ */ c("span", {
+											className: "text-muted-foreground",
+											children: e.key
+										}),
+										" ",
+										e.title
+									]
+								}), /* @__PURE__ */ c(y, {
+									size: "icon",
+									variant: "ghost",
+									disabled: Te.loading,
+									"aria-label": `Unlink ${e.title}`,
+									onClick: () => Z(() => we({ variables: {
+										docId: Y.id,
+										workItemId: e.id
+									} }), "The work item could not be unlinked."),
+									children: /* @__PURE__ */ c(ae, { className: "h-4 w-4" })
+								})]
+							}, e.id)),
+							/* @__PURE__ */ l("div", {
+								className: "space-y-2 pt-2",
+								"data-testid": "doc-link-work-item",
+								children: [/* @__PURE__ */ c(ee, {
+									id: "doc-link-work-item-select",
+									value: q,
+									onChange: J,
+									exclude: Y.linkedWorkItems.map((e) => e.id)
+								}), /* @__PURE__ */ l(y, {
+									size: "sm",
+									variant: "outline",
+									disabled: !q || De.loading,
+									onClick: async () => {
+										await Z(() => Ee({ variables: {
+											docId: Y.id,
+											workItemId: q
+										} }), "The work item could not be linked.") && J("");
+									},
+									children: [/* @__PURE__ */ c(a, { className: "mr-1 h-4 w-4" }), "Link work item"]
+								})]
+							})
+						]
 					})]
 				})]
 			})
@@ -410,6 +444,6 @@ function A() {
 	});
 }
 //#endregion
-export { A as DocsDocDetailPagePage };
+export { O as DocsDocDetailPagePage };
 
 //# sourceMappingURL=DocsDocDetailPagePage.js.map