@burdenoff/microfe-workspaces 2026.625.1 → 2026.625.3

package/dist/pages/ProjectDetailPage.js

@@ -1,434 +1,465 @@
 import { useWorkspacesContext as e } from "../providers/WorkspacesProvider.js";
 import { getProjectStatusClasses as t } from "../utils/tokenHelpers.js";
-import { useScopedNavigation as n } from "../hooks/useScopedNavigation.js";
-import { tWithFallback as r } from "../utils/i18n.js";
-import { useWorkspacesPageView as ee } from "../hooks/useWorkspacesPageView.js";
-import { nativeImpact as te, nativeNotify as i } from "../utils/nativeBridge.js";
-import { useWorkspacePermissions as ne } from "../hooks/useWorkspacePermissions.js";
-import { useProject as re, useProjectMembersCount as ie } from "../hooks/useProjects.js";
-import { useArchiveProject as ae, useDeleteProject as oe, useTagProject as se, useUnarchiveProject as ce, useUntagProject as le, useUpdateProject as ue } from "../hooks/useProjectMutations.js";
-import { formatDate as a } from "../utils/formatters.js";
-import { getProjectDisplayTags as de, toProjectTag as o } from "../utils/projectTags.js";
-import { useWorkspaceActivity as fe } from "../hooks/useWorkspaceActivity.js";
-import { ProjectTagsWidget as s } from "../components/tags/ProjectTagsWidget.js";
-import { ProjectMemberPickerDialog as c } from "../components/ProjectMemberPickerDialog.js";
-import { useMemo as l, useState as u } from "react";
-import { Activity as d, Archive as f, ArrowLeft as p, Clock as m, FolderKanban as h, MoreVertical as pe, UserPlus as me, Users as g } from "lucide-react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { AlertDialog as he, AlertDialogAction as ge, AlertDialogCancel as _e, AlertDialogContent as ve, AlertDialogDescription as ye, AlertDialogFooter as be, AlertDialogHeader as xe, AlertDialogTitle as Se, Badge as y, Button as b, Card as x, CardContent as S, CardHeader as C, CardTitle as w, DropdownMenu as T, DropdownMenuContent as E, DropdownMenuItem as D, DropdownMenuSeparator as O, DropdownMenuTrigger as k, EntityIdModal as A, Skeleton as j, useEntityIdModal as Ce } from "@burdenoff/fe-libs/ui";
-import { useNavigate as we, useParams as Te } from "react-router-dom";
-import { useI18n as Ee } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useScopedNavigation as ee } from "../hooks/useScopedNavigation.js";
+import { tWithFallback as n } from "../utils/i18n.js";
+import { useWorkspacesPageView as te } from "../hooks/useWorkspacesPageView.js";
+import { nativeImpact as ne, nativeNotify as r } from "../utils/nativeBridge.js";
+import { useWorkspacePermissions as re } from "../hooks/useWorkspacePermissions.js";
+import { useProject as ie, useProjectMembersCount as ae } from "../hooks/useProjects.js";
+import { useArchiveProject as oe, useDeleteProject as se, useTagProject as ce, useUnarchiveProject as le, useUntagProject as ue, useUpdateProject as de } from "../hooks/useProjectMutations.js";
+import { formatDate as i } from "../utils/formatters.js";
+import { getProjectDisplayTags as fe, toProjectTag as a } from "../utils/projectTags.js";
+import { useWorkspaceActivity as pe } from "../hooks/useWorkspaceActivity.js";
+import { ProjectTagsWidget as o } from "../components/tags/ProjectTagsWidget.js";
+import { ProjectMemberPickerDialog as s } from "../components/ProjectMemberPickerDialog.js";
+import { useMemo as c, useState as l } from "react";
+import { Activity as u, Archive as d, ArrowLeft as f, Clock as p, FolderKanban as m, MoreVertical as me, UserPlus as he, Users as h } from "lucide-react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { AlertDialog as ge, AlertDialogAction as _e, AlertDialogCancel as ve, AlertDialogContent as ye, AlertDialogDescription as be, AlertDialogFooter as xe, AlertDialogHeader as Se, AlertDialogTitle as Ce, Badge as v, Button as y, CardContent as b, CardHeader as x, CardTitle as S, DropdownMenu as C, DropdownMenuContent as w, DropdownMenuItem as T, DropdownMenuSeparator as E, DropdownMenuTrigger as D, EntityIdModal as O, GlassCard as k, ShowMore as A, Skeleton as j, useEntityIdModal as we } from "@burdenoff/fe-libs/ui";
+import { useNavigate as Te, useParams as Ee } from "react-router-dom";
+import { useI18n as De } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/pages/ProjectDetailPage.tsx
 function M() {
-	let { t: M } = Ee(), N = Ce(), { workspaceId: P, projectId: F } = Te();
-	ee("workspaces.project-detail", {
+	let { t: M } = De(), N = we(), { workspaceId: P, projectId: F } = Ee();
+	te("workspaces.project-detail", {
 		workspaceId: P,
 		projectId: F,
 		requireParams: !0
 	});
-	let I = we(), { basePath: L = "/workspaces" } = e(), { withCurrentSearch: R } = n(), { data: z, isLoading: De, error: Oe } = re(F || "", P), [ke, B] = u(!1), [V, H] = u(!1), { mutate: Ae, isPending: U } = ae(P), { mutate: je, isPending: W } = ce(P), { mutate: Me, isPending: G } = oe(P), { mutateAsync: Ne, isPending: Pe } = se(P), { mutateAsync: Fe, isPending: Ie } = le(P), { mutateAsync: Le, isPending: Re } = ue(P), { canViewProject: ze, canDeleteProject: K, canArchiveProject: q, canListProjectMembers: J, canAddProjectMember: Y, isLoading: Be } = ne(), { data: Ve } = ie(F || "", P), X = l(() => de({
+	let I = Te(), { basePath: L = "/workspaces" } = e(), { withCurrentSearch: R } = ee(), { data: z, isLoading: Oe, error: ke } = ie(F || "", P), [Ae, B] = l(!1), [V, H] = l(!1), { mutate: je, isPending: U } = oe(P), { mutate: Me, isPending: W } = le(P), { mutate: Ne, isPending: G } = se(P), { mutateAsync: Pe, isPending: Fe } = ce(P), { mutateAsync: Ie, isPending: Le } = ue(P), { mutateAsync: Re, isPending: ze } = de(P), { canViewProject: Be, canDeleteProject: K, canArchiveProject: q, canListProjectMembers: J, canAddProjectMember: Y, isLoading: Ve } = re(), { data: He } = ae(F || "", P), X = c(() => fe({
 		tags: z?.tags ?? [],
 		tagAssignments: z?.tagAssignments
-	}), [z?.tags, z?.tagAssignments]), { data: He } = fe(P), Ue = (He ?? []).filter((e) => e.resourceId === F || e.resourceType?.toLowerCase() === "project").length, We = X;
-	if (Be) return /* @__PURE__ */ v("div", {
+	}), [z?.tags, z?.tagAssignments]), { data: Ue } = pe(P), We = (Ue ?? []).filter((e) => e.resourceId === F || e.resourceType?.toLowerCase() === "project").length, Ge = X;
+	if (Ve) return /* @__PURE__ */ _("div", {
 		className: "space-y-4 p-6",
-		children: [/* @__PURE__ */ _(j, { className: "h-10 w-1/3" }), /* @__PURE__ */ _(j, { className: "h-64" })]
+		children: [/* @__PURE__ */ g(j, { className: "h-10 w-1/3" }), /* @__PURE__ */ g(j, { className: "h-64" })]
 	});
-	if (!ze) return /* @__PURE__ */ _("div", {
+	if (!Be) return /* @__PURE__ */ g("div", {
 		className: "flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ v("div", {
+		children: /* @__PURE__ */ _("div", {
 			className: "text-center space-y-2",
-			children: [/* @__PURE__ */ _("h2", {
+			children: [/* @__PURE__ */ g("h2", {
 				className: "text-lg font-semibold",
-				children: r(M, "projectDetail.accessDenied", "Access Denied")
-			}), /* @__PURE__ */ _("p", {
+				children: n(M, "projectDetail.accessDenied", "Access Denied")
+			}), /* @__PURE__ */ g("p", {
 				className: "text-sm text-text-secondary",
-				children: r(M, "projectDetail.noPermissionToViewProject", "You don't have permission to view this project.")
+				children: n(M, "projectDetail.noPermissionToViewProject", "You don't have permission to view this project.")
 			})]
 		})
 	});
 	let Z = () => {
 		I(R(`${L}/${P}/projects`));
-	}, Ge = () => {
-		z && (z.archived ? je(z.id, { onError: (e) => {
+	}, Ke = () => {
+		z && (z.archived ? Me(z.id, { onError: (e) => {
 			console.error("Failed to unarchive project:", e);
-		} }) : Ae(z.id, { onError: (e) => {
+		} }) : je(z.id, { onError: (e) => {
 			console.error("Failed to archive project:", e);
 		} }));
-	}, Ke = () => {
-		z && (te("medium"), Me(z.id, {
+	}, qe = () => {
+		z && (ne("medium"), Ne(z.id, {
 			onSuccess: () => {
-				i("success"), B(!1), I(R(`${L}/${P}/projects`));
+				r("success"), B(!1), I(R(`${L}/${P}/projects`));
 			},
 			onError: (e) => {
-				i("error"), console.error("Failed to delete project:", e);
+				r("error"), console.error("Failed to delete project:", e);
 			}
 		}));
 	}, Q = () => {
 		I(R(`${L}/${P}/projects/${F}/members`));
 	}, $ = async (e) => {
 		if (!z) return;
-		let t = e.map((e) => o(e));
+		let t = e.map((e) => a(e));
 		try {
-			await Le({
+			await Re({
 				id: z.id,
 				input: { tags: t }
 			});
 		} catch (e) {
-			i("warning"), console.error("Failed to sync legacy project tag mirror after updating structured project tags:", e);
+			r("warning"), console.error("Failed to sync legacy project tag mirror after updating structured project tags:", e);
 		}
 	};
-	return De ? /* @__PURE__ */ v("div", {
+	return Oe ? /* @__PURE__ */ _("div", {
 		className: "space-y-4 sm:space-y-6 p-3 sm:p-6",
 		children: [
-			/* @__PURE__ */ _(j, { className: "h-10 w-32" }),
-			/* @__PURE__ */ _(j, { className: "h-10 w-1/3" }),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ g(j, { className: "h-10 w-32" }),
+			/* @__PURE__ */ g(j, { className: "h-10 w-1/3" }),
+			/* @__PURE__ */ _("div", {
 				className: "grid grid-cols-1 md:grid-cols-3 gap-4",
 				children: [
-					/* @__PURE__ */ _(j, { className: "h-32" }),
-					/* @__PURE__ */ _(j, { className: "h-32" }),
-					/* @__PURE__ */ _(j, { className: "h-32" })
+					/* @__PURE__ */ g(j, { className: "h-32" }),
+					/* @__PURE__ */ g(j, { className: "h-32" }),
+					/* @__PURE__ */ g(j, { className: "h-32" })
 				]
 			}),
-			/* @__PURE__ */ _(j, { className: "h-48" })
+			/* @__PURE__ */ g(j, { className: "h-48" })
 		]
-	}) : Oe || !z ? /* @__PURE__ */ v("div", {
+	}) : ke || !z ? /* @__PURE__ */ _("div", {
 		className: "space-y-4 p-6",
-		children: [/* @__PURE__ */ v(b, {
+		children: [/* @__PURE__ */ _(y, {
 			variant: "ghost",
 			onClick: Z,
 			className: "gap-2",
-			children: [/* @__PURE__ */ _(p, { size: 20 }), r(M, "projectDetail.backToProjects", "Back to Projects")]
-		}), /* @__PURE__ */ v("div", {
+			children: [/* @__PURE__ */ g(f, { size: 20 }), n(M, "projectDetail.backToProjects", "Back to Projects")]
+		}), /* @__PURE__ */ _("div", {
 			className: "text-center py-12",
 			children: [
-				/* @__PURE__ */ _("div", {
+				/* @__PURE__ */ g("div", {
 					className: "rounded-full bg-bg-sunken p-6 mb-4 inline-block",
-					children: /* @__PURE__ */ _(h, {
+					children: /* @__PURE__ */ g(m, {
 						size: 48,
 						className: "text-text-secondary"
 					})
 				}),
-				/* @__PURE__ */ _("h3", {
+				/* @__PURE__ */ g("h3", {
 					className: "text-lg font-semibold mb-2",
-					children: r(M, "projectDetail.projectNotFound", "Project not found")
+					children: n(M, "projectDetail.projectNotFound", "Project not found")
 				}),
-				/* @__PURE__ */ _("p", {
+				/* @__PURE__ */ g("p", {
 					className: "text-text-secondary max-w-sm mx-auto mb-4",
-					children: r(M, "projectDetail.projectNotFoundDescription", "The project you're looking for doesn't exist or you don't have permission to view it.")
+					children: n(M, "projectDetail.projectNotFoundDescription", "The project you're looking for doesn't exist or you don't have permission to view it.")
 				}),
-				/* @__PURE__ */ v(b, {
+				/* @__PURE__ */ _(y, {
 					onClick: Z,
-					children: [/* @__PURE__ */ _(p, {
+					children: [/* @__PURE__ */ g(f, {
 						size: 16,
 						className: "mr-2"
-					}), r(M, "projectDetail.backToProjects", "Back to Projects")]
+					}), n(M, "projectDetail.backToProjects", "Back to Projects")]
 				})
 			]
 		})]
-	}) : /* @__PURE__ */ v("div", {
+	}) : /* @__PURE__ */ _("div", {
 		className: "space-y-4 sm:space-y-6 p-3 sm:p-6",
 		children: [
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ _("div", {
 				className: "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3",
-				children: [/* @__PURE__ */ v("div", { children: [
-					/* @__PURE__ */ v(b, {
+				children: [/* @__PURE__ */ _("div", { children: [
+					/* @__PURE__ */ _(y, {
 						variant: "ghost",
 						onClick: Z,
 						className: "gap-2 mb-2 -ml-2",
-						children: [/* @__PURE__ */ _(p, { size: 20 }), r(M, "projectDetail.backToProjects", "Back to Projects")]
+						children: [/* @__PURE__ */ g(f, { size: 20 }), n(M, "projectDetail.backToProjects", "Back to Projects")]
 					}),
-					/* @__PURE__ */ v("div", {
+					/* @__PURE__ */ _("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ _("div", {
+						children: [/* @__PURE__ */ g("div", {
 							className: "p-3 rounded-lg bg-action-primary-bg/10",
-							children: /* @__PURE__ */ _(h, {
+							children: /* @__PURE__ */ g(m, {
 								className: "text-primary",
 								size: 28
 							})
-						}), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("h1", {
+						}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h1", {
 							className: "text-2xl sm:text-3xl font-bold",
 							children: z.name
-						}), /* @__PURE__ */ _("p", {
+						}), /* @__PURE__ */ g("p", {
 							className: "text-sm text-text-secondary font-mono",
 							children: z.key
 						})] })]
 					}),
-					/* @__PURE__ */ v("div", {
+					/* @__PURE__ */ _("div", {
 						className: "flex items-center gap-2 mt-3",
-						children: [/* @__PURE__ */ _(y, {
+						children: [/* @__PURE__ */ g(v, {
 							className: `border ${t(z.status)}`,
 							children: z.status
-						}), z.archived && /* @__PURE__ */ v(y, {
+						}), z.archived && /* @__PURE__ */ _(v, {
 							variant: "outline",
 							className: "border-workspace-archived-border text-workspace-archived-text",
-							children: [/* @__PURE__ */ _(f, {
+							children: [/* @__PURE__ */ g(d, {
 								size: 12,
 								className: "mr-1"
-							}), r(M, "projectDetail.archived", "Archived")]
+							}), n(M, "projectDetail.archived", "Archived")]
 						})]
 					})
-				] }), /* @__PURE__ */ _("div", {
+				] }), /* @__PURE__ */ g("div", {
 					className: "flex items-center gap-2",
-					children: /* @__PURE__ */ v(T, { children: [/* @__PURE__ */ _(k, {
+					children: /* @__PURE__ */ _(C, { children: [/* @__PURE__ */ g(D, {
 						asChild: !0,
-						children: /* @__PURE__ */ _(b, {
+						children: /* @__PURE__ */ g(y, {
 							variant: "outline",
 							size: "icon",
-							"aria-label": r(M, "projectDetail.openProjectActionsAriaLabel", "Open project actions"),
-							children: /* @__PURE__ */ _(pe, { size: 20 })
+							"aria-label": n(M, "projectDetail.openProjectActionsAriaLabel", "Open project actions"),
+							children: /* @__PURE__ */ g(me, { size: 20 })
 						})
-					}), /* @__PURE__ */ v(E, {
+					}), /* @__PURE__ */ _(w, {
 						align: "end",
 						children: [
-							q && /* @__PURE__ */ v(D, {
-								onClick: Ge,
+							q && /* @__PURE__ */ _(T, {
+								onClick: Ke,
 								disabled: U || W,
-								children: [/* @__PURE__ */ _(f, {
+								children: [/* @__PURE__ */ g(d, {
 									size: 16,
 									className: "mr-2"
-								}), U || W ? r(M, "projectDetail.processing", "Processing...") : z.archived ? r(M, "projectDetail.unarchive", "Unarchive") : r(M, "projectDetail.archive", "Archive")]
+								}), U || W ? n(M, "projectDetail.processing", "Processing...") : z.archived ? n(M, "projectDetail.unarchive", "Unarchive") : n(M, "projectDetail.archive", "Archive")]
 							}),
-							q && K && /* @__PURE__ */ _(O, {}),
-							K && /* @__PURE__ */ _(D, {
+							q && K && /* @__PURE__ */ g(E, {}),
+							K && /* @__PURE__ */ g(T, {
 								onClick: () => B(!0),
 								className: "text-status-error-text",
-								children: r(M, "projectDetail.deleteProject", "Delete Project")
+								children: n(M, "projectDetail.deleteProject", "Delete Project")
 							})
 						]
 					})] })
 				})]
 			}),
-			/* @__PURE__ */ v("div", {
-				className: "grid grid-cols-1 md:grid-cols-2 gap-4",
-				children: [/* @__PURE__ */ v(x, { children: [/* @__PURE__ */ _(C, {
-					className: "flex flex-row items-center justify-between pb-2",
-					children: /* @__PURE__ */ v(w, {
-						className: "flex items-center gap-2 text-base",
-						children: [/* @__PURE__ */ _(g, {
-							size: 20,
-							className: "text-text-secondary"
-						}), r(M, "projectDetail.membersCardTitle", "Members")]
-					})
-				}), /* @__PURE__ */ v(S, {
-					className: "space-y-4",
-					children: [
-						/* @__PURE__ */ _("p", {
-							className: "text-3xl font-bold",
-							children: Ve ?? 0
-						}),
-						/* @__PURE__ */ _("p", {
-							className: "text-sm text-text-secondary",
-							children: r(M, "projectDetail.projectMembers", "Project members")
-						}),
-						Y || J ? /* @__PURE__ */ v("div", {
-							className: "flex flex-wrap gap-2",
-							children: [Y ? /* @__PURE__ */ v(b, {
-								size: "sm",
-								onClick: () => H(!0),
-								children: [/* @__PURE__ */ _(me, {
-									size: 16,
-									className: "mr-2"
-								}), r(M, "projectDetail.addProjectMember", "Add Member")]
-							}) : null, J ? /* @__PURE__ */ v(b, {
-								variant: "outline",
-								size: "sm",
-								onClick: Q,
-								children: [/* @__PURE__ */ _(g, {
-									size: 16,
-									className: "mr-2"
-								}), r(M, "projectDetail.manageProjectMembers", "Manage Members")]
-							}) : null]
-						}) : null
-					]
-				})] }), /* @__PURE__ */ v(x, { children: [/* @__PURE__ */ _(C, {
-					className: "flex flex-row items-center justify-between pb-2",
-					children: /* @__PURE__ */ v(w, {
-						className: "flex items-center gap-2 text-base",
-						children: [/* @__PURE__ */ _(d, {
-							size: 20,
-							className: "text-text-secondary"
-						}), r(M, "projectDetail.activityCardTitle", "Activity")]
-					})
-				}), /* @__PURE__ */ v(S, { children: [/* @__PURE__ */ _("p", {
-					className: "text-3xl font-bold",
-					children: Ue
-				}), /* @__PURE__ */ _("p", {
-					className: "text-sm text-text-secondary",
-					children: r(M, "projectDetail.recentActivityItems", "Recent activity items")
-				})] })] })]
-			}),
-			/* @__PURE__ */ v(x, { children: [/* @__PURE__ */ _(C, { children: /* @__PURE__ */ _(w, { children: r(M, "projectDetail.tagsTitle", "Tags") }) }), /* @__PURE__ */ v(S, {
-				className: "space-y-3",
-				children: [/* @__PURE__ */ _("p", {
-					className: "text-sm text-text-secondary",
-					children: r(M, "projectDetail.tagsDescription", "Use universal tags to classify and filter this project across the workspace.")
-				}), /* @__PURE__ */ _(s, {
-					entityType: "Project",
-					entityId: z.id,
-					workspaceId: P,
-					tags: We,
-					onAdd: async (e) => {
-						if (z) try {
-							await Ne({
-								entityId: z.id,
-								tagId: e.id
-							}), await $([...X, o(e)]);
-						} catch (e) {
-							throw i("error"), e;
-						}
-					},
-					onRemove: async (e) => {
-						if (!z) return;
-						let t = z.tagAssignments?.find((t) => t.tagId === e)?.id;
-						try {
-							await Fe({
-								entityId: z.id,
-								tagId: e,
-								assignmentId: t
-							}), await $(X.filter((t) => t.tagId !== e && t.id !== e));
-						} catch (e) {
-							throw i("error"), e;
-						}
-					},
-					className: Pe || Ie || Re ? "pointer-events-none opacity-75" : void 0
-				})]
-			})] }),
-			/* @__PURE__ */ v(x, { children: [/* @__PURE__ */ _(C, { children: /* @__PURE__ */ _(w, { children: r(M, "projectDetail.projectInformation", "Project Information") }) }), /* @__PURE__ */ v(S, {
-				className: "space-y-4",
-				children: [/* @__PURE__ */ v("div", {
-					className: "grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm",
-					children: [
-						/* @__PURE__ */ v("div", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ v("span", {
-								className: "text-text-secondary flex items-center gap-2",
-								children: [/* @__PURE__ */ _(h, { size: 14 }), r(M, "projectDetail.projectId", "Project ID")]
-							}), /* @__PURE__ */ _("button", {
-								type: "button",
-								onClick: () => N.show({
-									id: z.id,
-									name: z.name,
-									type: "Project",
-									details: z.key ? [{
-										label: "Key",
-										value: z.key
-									}] : void 0
-								}),
-								className: "inline-flex items-center gap-1.5 text-xs font-medium text-text-link hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] rounded",
-								children: r(M, "projectDetail.getId", "Get ID")
-							})]
-						}),
-						/* @__PURE__ */ v("div", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ v("span", {
-								className: "text-text-secondary flex items-center gap-2",
-								children: [/* @__PURE__ */ _(h, { size: 14 }), r(M, "projectDetail.projectKey", "Project Key")]
-							}), /* @__PURE__ */ _("span", {
-								className: "font-medium",
-								children: z.key
+			/* @__PURE__ */ _("div", {
+				className: "grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6",
+				children: [/* @__PURE__ */ _("div", {
+					className: "lg:col-span-2 space-y-4 sm:space-y-6",
+					children: [/* @__PURE__ */ _("div", {
+						className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+						children: [/* @__PURE__ */ _(k, {
+							treatment: "metric",
+							children: [/* @__PURE__ */ g(x, {
+								className: "flex flex-row items-center justify-between pb-2",
+								children: /* @__PURE__ */ _(S, {
+									className: "flex items-center gap-2 text-sm font-medium text-text-secondary",
+									children: [/* @__PURE__ */ g(h, {
+										size: 18,
+										className: "text-text-muted"
+									}), n(M, "projectDetail.membersCardTitle", "Members")]
+								})
+							}), /* @__PURE__ */ _(b, {
+								className: "space-y-4",
+								children: [
+									/* @__PURE__ */ g("p", {
+										className: "text-3xl font-bold tabular-nums",
+										children: He ?? 0
+									}),
+									/* @__PURE__ */ g("p", {
+										className: "text-sm text-text-muted",
+										children: n(M, "projectDetail.projectMembers", "Project members")
+									}),
+									Y || J ? /* @__PURE__ */ _("div", {
+										className: "flex flex-wrap gap-2",
+										children: [Y ? /* @__PURE__ */ _(y, {
+											size: "sm",
+											onClick: () => H(!0),
+											children: [/* @__PURE__ */ g(he, {
+												size: 16,
+												className: "mr-2"
+											}), n(M, "projectDetail.addProjectMember", "Add Member")]
+										}) : null, J ? /* @__PURE__ */ _(y, {
+											variant: "outline",
+											size: "sm",
+											onClick: Q,
+											children: [/* @__PURE__ */ g(h, {
+												size: 16,
+												className: "mr-2"
+											}), n(M, "projectDetail.manageProjectMembers", "Manage Members")]
+										}) : null]
+									}) : null
+								]
 							})]
-						}),
-						/* @__PURE__ */ v("div", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ v("span", {
-								className: "text-text-secondary flex items-center gap-2",
-								children: [/* @__PURE__ */ _(m, { size: 14 }), r(M, "projectDetail.created", "Created")]
-							}), /* @__PURE__ */ _("span", { children: a(z.createdAt) })]
-						}),
-						/* @__PURE__ */ v("div", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ v("span", {
-								className: "text-text-secondary flex items-center gap-2",
-								children: [/* @__PURE__ */ _(m, { size: 14 }), r(M, "projectDetail.lastUpdated", "Last Updated")]
-							}), /* @__PURE__ */ _("span", { children: a(z.updatedAt) })]
-						}),
-						/* @__PURE__ */ v("div", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ v("span", {
-								className: "text-text-secondary flex items-center gap-2",
-								children: [/* @__PURE__ */ _(g, { size: 14 }), r(M, "projectDetail.workspaceId", "Workspace ID")]
-							}), /* @__PURE__ */ _("span", {
-								className: "font-mono text-xs block",
-								children: z.workspaceId
-							})]
-						}),
-						/* @__PURE__ */ v("div", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ v("span", {
-								className: "text-text-secondary flex items-center gap-2",
-								children: [/* @__PURE__ */ _(g, { size: 14 }), r(M, "projectDetail.creatorId", "Creator ID")]
-							}), /* @__PURE__ */ _("span", {
-								className: "font-mono text-xs block",
-								children: z.creatorId
+						}), /* @__PURE__ */ _(k, {
+							treatment: "metric",
+							children: [/* @__PURE__ */ g(x, {
+								className: "flex flex-row items-center justify-between pb-2",
+								children: /* @__PURE__ */ _(S, {
+									className: "flex items-center gap-2 text-sm font-medium text-text-secondary",
+									children: [/* @__PURE__ */ g(u, {
+										size: 18,
+										className: "text-text-muted"
+									}), n(M, "projectDetail.activityCardTitle", "Activity")]
+								})
+							}), /* @__PURE__ */ _(b, { children: [/* @__PURE__ */ g("p", {
+								className: "text-3xl font-bold tabular-nums",
+								children: We
+							}), /* @__PURE__ */ g("p", {
+								className: "text-sm text-text-muted",
+								children: n(M, "projectDetail.recentActivityItems", "Recent activity items")
+							})] })]
+						})]
+					}), /* @__PURE__ */ _(k, {
+						treatment: "plain",
+						className: "border-border-seam",
+						children: [/* @__PURE__ */ g(x, { children: /* @__PURE__ */ g(S, { children: n(M, "projectDetail.tagsTitle", "Tags") }) }), /* @__PURE__ */ _(b, {
+							className: "space-y-3",
+							children: [/* @__PURE__ */ g("p", {
+								className: "text-sm text-text-muted",
+								children: n(M, "projectDetail.tagsDescription", "Use universal tags to classify and filter this project across the workspace.")
+							}), /* @__PURE__ */ g(o, {
+								entityType: "Project",
+								entityId: z.id,
+								workspaceId: P,
+								tags: Ge,
+								onAdd: async (e) => {
+									if (z) try {
+										await Pe({
+											entityId: z.id,
+											tagId: e.id
+										}), await $([...X, a(e)]);
+									} catch (e) {
+										throw r("error"), e;
+									}
+								},
+								onRemove: async (e) => {
+									if (!z) return;
+									let t = z.tagAssignments?.find((t) => t.tagId === e)?.id;
+									try {
+										await Ie({
+											entityId: z.id,
+											tagId: e,
+											assignmentId: t
+										}), await $(X.filter((t) => t.tagId !== e && t.id !== e));
+									} catch (e) {
+										throw r("error"), e;
+									}
+								},
+								className: Fe || Le || ze ? "pointer-events-none opacity-75" : void 0
 							})]
-						})
-					]
-				}), z.config && Object.keys(z.config).length > 0 && /* @__PURE__ */ v("div", {
-					className: "pt-4 border-t",
-					children: [/* @__PURE__ */ _("h4", {
-						className: "text-sm font-medium mb-2",
-						children: r(M, "projectDetail.configuration", "Configuration")
-					}), /* @__PURE__ */ _("pre", {
-						className: "text-xs bg-bg-sunken p-3 rounded-lg overflow-auto",
-						children: JSON.stringify(z.config, null, 2)
+						})]
 					})]
-				})]
-			})] }),
-			/* @__PURE__ */ v(x, { children: [/* @__PURE__ */ _(C, { children: /* @__PURE__ */ _(w, { children: r(M, "projectDetail.quickActions", "Quick Actions") }) }), /* @__PURE__ */ _(S, { children: /* @__PURE__ */ v("div", {
-				className: "flex flex-wrap gap-2",
-				children: [
-					J ? /* @__PURE__ */ v(b, {
-						variant: "outline",
-						size: "sm",
-						onClick: Q,
-						children: [/* @__PURE__ */ _(g, {
-							size: 16,
-							className: "mr-2"
-						}), r(M, "projectDetail.projectMembersPage", "Project Members")]
-					}) : null,
-					/* @__PURE__ */ v(b, {
-						variant: "outline",
-						size: "sm",
-						onClick: () => I(R(`${L}/${P}/members`)),
-						children: [/* @__PURE__ */ _(g, {
-							size: 16,
-							className: "mr-2"
-						}), r(M, "projectDetail.workspaceMembers", "Workspace Members")]
-					}),
-					/* @__PURE__ */ v(b, {
-						variant: "outline",
-						size: "sm",
-						onClick: () => I(R(`${L}/${P}/activity`)),
-						children: [/* @__PURE__ */ _(d, {
-							size: 16,
-							className: "mr-2"
-						}), r(M, "projectDetail.workspaceActivity", "Workspace Activity")]
+				}), /* @__PURE__ */ g("aside", {
+					className: "lg:sticky lg:top-6 lg:self-start",
+					children: /* @__PURE__ */ _(k, {
+						treatment: "plain",
+						className: "border-border-seam",
+						children: [/* @__PURE__ */ g(x, { children: /* @__PURE__ */ g(S, { children: n(M, "projectDetail.projectInformation", "Project Information") }) }), /* @__PURE__ */ _(b, {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ _("div", {
+									className: "grid grid-cols-1 gap-4 text-sm",
+									children: [
+										/* @__PURE__ */ _("div", {
+											className: "space-y-1",
+											children: [/* @__PURE__ */ _("span", {
+												className: "text-text-muted flex items-center gap-2",
+												children: [/* @__PURE__ */ g(m, { size: 14 }), n(M, "projectDetail.projectId", "Project ID")]
+											}), /* @__PURE__ */ g("button", {
+												type: "button",
+												onClick: () => N.show({
+													id: z.id,
+													name: z.name,
+													type: "Project",
+													details: z.key ? [{
+														label: "Key",
+														value: z.key
+													}] : void 0
+												}),
+												className: "inline-flex items-center gap-1.5 text-xs font-medium text-text-link hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] rounded",
+												children: n(M, "projectDetail.getId", "Get ID")
+											})]
+										}),
+										/* @__PURE__ */ _("div", {
+											className: "space-y-1",
+											children: [/* @__PURE__ */ _("span", {
+												className: "text-text-secondary flex items-center gap-2",
+												children: [/* @__PURE__ */ g(m, { size: 14 }), n(M, "projectDetail.projectKey", "Project Key")]
+											}), /* @__PURE__ */ g("span", {
+												className: "font-medium",
+												children: z.key
+											})]
+										}),
+										/* @__PURE__ */ _("div", {
+											className: "space-y-1",
+											children: [/* @__PURE__ */ _("span", {
+												className: "text-text-secondary flex items-center gap-2",
+												children: [/* @__PURE__ */ g(p, { size: 14 }), n(M, "projectDetail.created", "Created")]
+											}), /* @__PURE__ */ g("span", { children: i(z.createdAt) })]
+										}),
+										/* @__PURE__ */ _("div", {
+											className: "space-y-1",
+											children: [/* @__PURE__ */ _("span", {
+												className: "text-text-secondary flex items-center gap-2",
+												children: [/* @__PURE__ */ g(p, { size: 14 }), n(M, "projectDetail.lastUpdated", "Last Updated")]
+											}), /* @__PURE__ */ g("span", { children: i(z.updatedAt) })]
+										}),
+										/* @__PURE__ */ _("div", {
+											className: "space-y-1",
+											children: [/* @__PURE__ */ _("span", {
+												className: "text-text-secondary flex items-center gap-2",
+												children: [/* @__PURE__ */ g(h, { size: 14 }), n(M, "projectDetail.workspaceId", "Workspace ID")]
+											}), /* @__PURE__ */ g("span", {
+												className: "font-mono text-xs block",
+												children: z.workspaceId
+											})]
+										}),
+										/* @__PURE__ */ _("div", {
+											className: "space-y-1",
+											children: [/* @__PURE__ */ _("span", {
+												className: "text-text-secondary flex items-center gap-2",
+												children: [/* @__PURE__ */ g(h, { size: 14 }), n(M, "projectDetail.creatorId", "Creator ID")]
+											}), /* @__PURE__ */ g("span", {
+												className: "font-mono text-xs block",
+												children: z.creatorId
+											})]
+										})
+									]
+								}),
+								z.config && Object.keys(z.config).length > 0 && /* @__PURE__ */ _("div", {
+									className: "pt-4 border-t border-border-seam",
+									children: [/* @__PURE__ */ g("h4", {
+										className: "text-sm font-medium mb-2",
+										children: n(M, "projectDetail.configuration", "Configuration")
+									}), /* @__PURE__ */ g("pre", {
+										className: "text-xs bg-bg-sunken p-3 rounded-lg overflow-auto",
+										children: JSON.stringify(z.config, null, 2)
+									})]
+								}),
+								/* @__PURE__ */ g(A, {
+									collapsedHeight: 0,
+									label: n(M, "projectDetail.quickActions", "Quick Actions"),
+									children: /* @__PURE__ */ _("div", {
+										className: "flex flex-col gap-2 pt-2",
+										children: [
+											J ? /* @__PURE__ */ _(y, {
+												variant: "outline",
+												size: "sm",
+												className: "justify-start",
+												onClick: Q,
+												children: [/* @__PURE__ */ g(h, {
+													size: 16,
+													className: "mr-2"
+												}), n(M, "projectDetail.projectMembersPage", "Project Members")]
+											}) : null,
+											/* @__PURE__ */ _(y, {
+												variant: "outline",
+												size: "sm",
+												className: "justify-start",
+												onClick: () => I(R(`${L}/${P}/members`)),
+												children: [/* @__PURE__ */ g(h, {
+													size: 16,
+													className: "mr-2"
+												}), n(M, "projectDetail.workspaceMembers", "Workspace Members")]
+											}),
+											/* @__PURE__ */ _(y, {
+												variant: "outline",
+												size: "sm",
+												className: "justify-start",
+												onClick: () => I(R(`${L}/${P}/activity`)),
+												children: [/* @__PURE__ */ g(u, {
+													size: 16,
+													className: "mr-2"
+												}), n(M, "projectDetail.workspaceActivity", "Workspace Activity")]
+											})
+										]
+									})
+								})
+							]
+						})]
 					})
-				]
-			}) })] }),
-			/* @__PURE__ */ _(he, {
-				open: ke,
+				})]
+			}),
+			/* @__PURE__ */ g(ge, {
+				open: Ae,
 				onOpenChange: B,
-				children: /* @__PURE__ */ v(ve, { children: [/* @__PURE__ */ v(xe, { children: [/* @__PURE__ */ _(Se, { children: r(M, "projectDetail.deleteDialogTitle", "Delete Project") }), /* @__PURE__ */ _(ye, { children: r(M, "projectDetail.deleteConfirmPrefix", "Are you sure you want to delete \"") + z.name + r(M, "projectDetail.deleteConfirmSuffix", "\"? This action cannot be undone and all project data will be permanently removed.") })] }), /* @__PURE__ */ v(be, { children: [/* @__PURE__ */ _(_e, {
+				children: /* @__PURE__ */ _(ye, { children: [/* @__PURE__ */ _(Se, { children: [/* @__PURE__ */ g(Ce, { children: n(M, "projectDetail.deleteDialogTitle", "Delete Project") }), /* @__PURE__ */ g(be, { children: n(M, "projectDetail.deleteConfirmPrefix", "Are you sure you want to delete \"") + z.name + n(M, "projectDetail.deleteConfirmSuffix", "\"? This action cannot be undone and all project data will be permanently removed.") })] }), /* @__PURE__ */ _(xe, { children: [/* @__PURE__ */ g(ve, {
 					disabled: G,
-					children: r(M, "projectDetail.cancel", "Cancel")
-				}), /* @__PURE__ */ _(ge, {
-					onClick: Ke,
+					children: n(M, "projectDetail.cancel", "Cancel")
+				}), /* @__PURE__ */ g(_e, {
+					onClick: qe,
 					disabled: G,
 					className: "bg-status-error-bg text-status-error-text hover:bg-status-error-bg/90",
-					children: G ? r(M, "projectDetail.deleting", "Deleting...") : r(M, "projectDetail.deleteProject", "Delete Project")
+					children: G ? n(M, "projectDetail.deleting", "Deleting...") : n(M, "projectDetail.deleteProject", "Delete Project")
 				})] })] })
 			}),
-			P && F && V ? /* @__PURE__ */ _(c, {
+			P && F && V ? /* @__PURE__ */ g(s, {
 				open: V,
 				onOpenChange: H,
 				workspaceId: P,
 				projectId: F,
 				projectName: z.name
 			}) : null,
-			/* @__PURE__ */ _(A, { control: N })
+			/* @__PURE__ */ g(O, { control: N })
 		]
 	});
 }