@burdenoff/microfe-botmanor 2026.813.1

package/dist/botlit/pages/SkillDetailPage.js

@@ -0,0 +1,778 @@
+import { useBotlit as e } from "../providers/BotlitProvider.js";
+import { formatRelativeTime as t } from "../utils/formatters.js";
+import { PageLayout as n } from "../components/PageLayout.js";
+import { Card as r, CardContent as i, CardDescription as a, CardHeader as o, CardTitle as s } from "../components/Card.js";
+import { Button as c } from "../components/Button.js";
+import { Badge as l, StatusBadge as u } from "../components/Badge.js";
+import { isNative as d, nativeImpact as ee, nativeNotify as f } from "../../utils/nativeBridge.js";
+import { EmptyState as p } from "../components/EmptyState.js";
+import { FormField as m, Input as h, Textarea as g } from "../components/Input.js";
+import { useRetrievalProfiles as _ } from "../hooks/useRetrievalProfiles.js";
+import { usePolicies as v } from "../hooks/usePolicies.js";
+import { useCreateSkill as y, useDeleteSkill as b, useSkill as x, useUpdateSkill as te } from "../hooks/useSkills.js";
+import { jsonBoolean as S, toUnion as C } from "../utils/unions.js";
+import { usePromptTemplates as ne } from "../hooks/usePromptTemplates.js";
+import "../hooks/index.js";
+import { useState as w } from "react";
+import { PagePurpose as re } from "@burdenoff/fe-libs/ui";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { Link as O, useParams as ie } from "react-router";
+import { ArrowLeft as ae, CheckCircle as oe, Database as k, Edit as A, ExternalLink as j, FileText as M, Save as N, Settings as se, Shield as P, Trash2 as ce, Wrench as F, XCircle as I, Zap as L } from "lucide-react";
+import { toast as R } from "sonner";
+//#region src/botlit/pages/SkillDetailPage.tsx
+var z = [
+	"PRIVATE",
+	"WORKSPACE",
+	"PUBLIC"
+], B = ({ isNew: B }) => {
+	let { skillId: V } = ie(), { navigateTo: H, getPath: U } = e(), { data: W, loading: G } = x(B ? void 0 : V), { data: K } = ne(), { data: le } = v(), { data: q } = _(), { create: ue, loading: de } = y(), { update: fe, loading: pe } = te(), { remove: me, loading: he } = b(), [J, Y] = w(!1), [ge, X] = w(!1), [Z, Q] = w({
+		name: "",
+		description: "",
+		visibility: "PRIVATE",
+		promptTemplateId: "",
+		toolPolicyId: "",
+		retrievalProfileId: "",
+		toolPackDeps: "",
+		recommendedPolicies: "",
+		requiresTools: !1,
+		requiresKnowledge: !1,
+		requiresA2A: !1
+	}), _e = async () => {
+		if (Z.name) try {
+			await ve();
+		} catch (e) {
+			R.error(e instanceof Error ? e.message : "Failed to create skill");
+		}
+	}, ve = async () => {
+		await ue({
+			name: Z.name,
+			description: Z.description,
+			visibility: Z.visibility,
+			promptTemplateId: Z.promptTemplateId || void 0,
+			toolPolicyId: Z.toolPolicyId || void 0,
+			retrievalProfileId: Z.retrievalProfileId || void 0,
+			toolPackDeps: Z.toolPackDeps.split(",").map((e) => e.trim()).filter(Boolean),
+			recommendedPolicies: Z.recommendedPolicies.split(",").map((e) => e.trim()).filter(Boolean),
+			capabilityFlags: {
+				requiresTools: Z.requiresTools,
+				requiresKnowledge: Z.requiresKnowledge,
+				requiresA2A: Z.requiresA2A
+			}
+		}), R.success(`Skill "${Z.name}" created`), H("skills");
+	}, ye = async () => {
+		if (!(!V || !Z.name)) try {
+			await be();
+		} catch (e) {
+			R.error(e instanceof Error ? e.message : "Failed to update skill");
+		}
+	}, be = async () => {
+		V && (await fe({
+			skillId: V,
+			input: {
+				name: Z.name,
+				description: Z.description,
+				visibility: Z.visibility,
+				promptTemplateId: Z.promptTemplateId || void 0,
+				toolPolicyId: Z.toolPolicyId || void 0,
+				retrievalProfileId: Z.retrievalProfileId || void 0,
+				toolPackDeps: Z.toolPackDeps.split(",").map((e) => e.trim()).filter(Boolean),
+				recommendedPolicies: Z.recommendedPolicies.split(",").map((e) => e.trim()).filter(Boolean),
+				capabilityFlags: {
+					requiresTools: Z.requiresTools,
+					requiresKnowledge: Z.requiresKnowledge,
+					requiresA2A: Z.requiresA2A
+				}
+			}
+		}), R.success("Skill updated"), Y(!1));
+	}, xe = async () => {
+		if (V) try {
+			await me(V), d() && f("success"), R.success("Skill deleted"), H("skills");
+		} catch (e) {
+			d() && f("error"), R.error(e instanceof Error ? e.message : "Failed to delete skill");
+		}
+	}, Se = () => {
+		W && (Q({
+			name: W.name,
+			description: W.description || "",
+			visibility: C(W.visibility, z, "PRIVATE"),
+			promptTemplateId: W.promptTemplateId || "",
+			toolPolicyId: W.toolPolicyId || "",
+			retrievalProfileId: W.retrievalProfileId || "",
+			toolPackDeps: W.toolPackDeps.join(", "),
+			recommendedPolicies: W.recommendedPolicies.join(", "),
+			requiresTools: S(W.capabilityFlags, "requiresTools"),
+			requiresKnowledge: S(W.capabilityFlags, "requiresKnowledge"),
+			requiresA2A: S(W.capabilityFlags, "requiresA2A")
+		}), Y(!0));
+	}, Ce = le?.filter((e) => e.type === "TOOL") || [];
+	if (B) return /* @__PURE__ */ E(n, {
+		title: "Create Skill",
+		description: "Bundle prompts, tools, and policies into a reusable skill",
+		actions: /* @__PURE__ */ D("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ E(c, {
+				variant: "outline",
+				onClick: () => H("skills"),
+				children: "Cancel"
+			}), /* @__PURE__ */ E(c, {
+				leftIcon: /* @__PURE__ */ E(N, { size: 16 }),
+				onClick: _e,
+				isLoading: de,
+				disabled: !Z.name,
+				children: "Create"
+			})]
+		}),
+		children: /* @__PURE__ */ D("div", {
+			className: "max-w-2xl space-y-6",
+			children: [
+				/* @__PURE__ */ D(r, { children: [/* @__PURE__ */ E(o, { children: /* @__PURE__ */ E(s, { children: "Basic Information" }) }), /* @__PURE__ */ D(i, {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ E(m, {
+							label: "Skill Name",
+							required: !0,
+							children: /* @__PURE__ */ E(h, {
+								placeholder: "e.g., Code Review Skill",
+								value: Z.name,
+								onChange: (e) => Q({
+									...Z,
+									name: e.target.value
+								})
+							})
+						}),
+						/* @__PURE__ */ E(m, {
+							label: "Description",
+							children: /* @__PURE__ */ E(g, {
+								placeholder: "What does this skill enable agents to do?",
+								value: Z.description,
+								onChange: (e) => Q({
+									...Z,
+									description: e.target.value
+								}),
+								rows: 3
+							})
+						}),
+						/* @__PURE__ */ E(m, {
+							label: "Visibility",
+							children: /* @__PURE__ */ D("select", {
+								className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+								value: Z.visibility,
+								onChange: (e) => Q({
+									...Z,
+									visibility: e.target.value
+								}),
+								children: [
+									/* @__PURE__ */ E("option", {
+										value: "PRIVATE",
+										children: "Private"
+									}),
+									/* @__PURE__ */ E("option", {
+										value: "WORKSPACE",
+										children: "Workspace"
+									}),
+									/* @__PURE__ */ E("option", {
+										value: "PUBLIC",
+										children: "Public"
+									})
+								]
+							})
+						})
+					]
+				})] }),
+				/* @__PURE__ */ D(r, { children: [/* @__PURE__ */ D(o, { children: [/* @__PURE__ */ D(s, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ E(M, { size: 18 }), "Prompt Template"]
+				}), /* @__PURE__ */ E(a, { children: "Associate a prompt template with this skill" })] }), /* @__PURE__ */ E(i, { children: /* @__PURE__ */ E(m, {
+					label: "Prompt Template",
+					children: /* @__PURE__ */ D("select", {
+						className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+						value: Z.promptTemplateId,
+						onChange: (e) => Q({
+							...Z,
+							promptTemplateId: e.target.value
+						}),
+						children: [/* @__PURE__ */ E("option", {
+							value: "",
+							children: "None"
+						}), K?.map((e) => /* @__PURE__ */ D("option", {
+							value: e.id,
+							children: [
+								e.name,
+								" (v",
+								e.version,
+								")"
+							]
+						}, e.id))]
+					})
+				}) })] }),
+				/* @__PURE__ */ D(r, { children: [/* @__PURE__ */ D(o, { children: [/* @__PURE__ */ D(s, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ E(F, { size: 18 }), "Tools Configuration"]
+				}), /* @__PURE__ */ E(a, { children: "Configure tool access for this skill" })] }), /* @__PURE__ */ D(i, {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ E(m, {
+						label: "Tool Policy",
+						children: /* @__PURE__ */ D("select", {
+							className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+							value: Z.toolPolicyId,
+							onChange: (e) => Q({
+								...Z,
+								toolPolicyId: e.target.value
+							}),
+							children: [/* @__PURE__ */ E("option", {
+								value: "",
+								children: "None"
+							}), Ce.map((e) => /* @__PURE__ */ E("option", {
+								value: e.id,
+								children: e.name
+							}, e.id))]
+						})
+					}), /* @__PURE__ */ E(m, {
+						label: "Tool Pack Dependencies",
+						description: "Comma-separated package slugs",
+						children: /* @__PURE__ */ E(h, {
+							placeholder: "e.g., @botlit/github-tools, @botlit/web-browser",
+							value: Z.toolPackDeps,
+							onChange: (e) => Q({
+								...Z,
+								toolPackDeps: e.target.value
+							})
+						})
+					})]
+				})] }),
+				/* @__PURE__ */ D(r, { children: [/* @__PURE__ */ D(o, { children: [/* @__PURE__ */ D(s, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ E(k, { size: 18 }), "Knowledge Configuration"]
+				}), /* @__PURE__ */ E(a, { children: "Configure knowledge retrieval for this skill" })] }), /* @__PURE__ */ E(i, { children: /* @__PURE__ */ E(m, {
+					label: "Retrieval Profile",
+					children: /* @__PURE__ */ D("select", {
+						className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+						value: Z.retrievalProfileId,
+						onChange: (e) => Q({
+							...Z,
+							retrievalProfileId: e.target.value
+						}),
+						children: [/* @__PURE__ */ E("option", {
+							value: "",
+							children: "None"
+						}), q?.map((e) => /* @__PURE__ */ E("option", {
+							value: e.id,
+							children: e.name
+						}, e.id))]
+					})
+				}) })] }),
+				/* @__PURE__ */ D(r, { children: [/* @__PURE__ */ E(o, { children: /* @__PURE__ */ D(s, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ E(P, { size: 18 }), "Policies & Capabilities"]
+				}) }), /* @__PURE__ */ D(i, {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ E(m, {
+						label: "Recommended Policies",
+						description: "Comma-separated policy IDs",
+						children: /* @__PURE__ */ E(h, {
+							placeholder: "e.g., content-policy-1, budget-policy-1",
+							value: Z.recommendedPolicies,
+							onChange: (e) => Q({
+								...Z,
+								recommendedPolicies: e.target.value
+							})
+						})
+					}), /* @__PURE__ */ D("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ E("p", {
+							className: "text-sm font-medium",
+							children: "Capability Requirements"
+						}), /* @__PURE__ */ D("div", {
+							className: "flex flex-wrap gap-4",
+							children: [
+								/* @__PURE__ */ D("label", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ E("input", {
+										type: "checkbox",
+										checked: Z.requiresTools,
+										onChange: (e) => Q({
+											...Z,
+											requiresTools: e.target.checked
+										}),
+										className: "h-4 w-4"
+									}), /* @__PURE__ */ E("span", {
+										className: "text-sm",
+										children: "Requires Tools"
+									})]
+								}),
+								/* @__PURE__ */ D("label", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ E("input", {
+										type: "checkbox",
+										checked: Z.requiresKnowledge,
+										onChange: (e) => Q({
+											...Z,
+											requiresKnowledge: e.target.checked
+										}),
+										className: "h-4 w-4"
+									}), /* @__PURE__ */ E("span", {
+										className: "text-sm",
+										children: "Requires Knowledge"
+									})]
+								}),
+								/* @__PURE__ */ D("label", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ E("input", {
+										type: "checkbox",
+										checked: Z.requiresA2A,
+										onChange: (e) => Q({
+											...Z,
+											requiresA2A: e.target.checked
+										}),
+										className: "h-4 w-4"
+									}), /* @__PURE__ */ E("span", {
+										className: "text-sm",
+										children: "Requires A2A"
+									})]
+								})
+							]
+						})]
+					})]
+				})] })
+			]
+		})
+	});
+	if (G) return /* @__PURE__ */ E(n, {
+		title: "Loading...",
+		children: /* @__PURE__ */ E("div", { className: "h-96 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" })
+	});
+	if (!W) return /* @__PURE__ */ E(n, {
+		title: "Skill Not Found",
+		children: /* @__PURE__ */ E(p, {
+			illustration: "empty-generic",
+			title: "Skill Not Found",
+			description: "This skill doesn't exist.",
+			action: /* @__PURE__ */ E(c, {
+				onClick: () => H("skills"),
+				children: "Back to Skills"
+			})
+		})
+	});
+	let $ = ({ label: e, enabled: t }) => /* @__PURE__ */ D("div", {
+		className: "flex items-center gap-2",
+		children: [t ? /* @__PURE__ */ E(oe, { className: "h-4 w-4 text-green-500" }) : /* @__PURE__ */ E(I, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ E("span", {
+			className: t ? "text-text-primary" : "text-text-secondary",
+			children: e
+		})]
+	});
+	return /* @__PURE__ */ E(n, {
+		title: /* @__PURE__ */ D("div", {
+			className: "flex items-center gap-3",
+			children: [
+				/* @__PURE__ */ E(c, {
+					variant: "ghost",
+					size: "icon",
+					onClick: () => H("skills"),
+					children: /* @__PURE__ */ E(ae, { size: 20 })
+				}),
+				/* @__PURE__ */ E("div", {
+					className: "p-2 rounded-lg bg-action-primary-bg/10",
+					children: /* @__PURE__ */ E(L, { className: "h-6 w-6 text-primary" })
+				}),
+				/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ D("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ E("span", { children: W.name }), /* @__PURE__ */ E(u, { status: W.status })]
+				}), /* @__PURE__ */ E("p", {
+					className: "text-sm font-normal text-text-secondary",
+					children: W.description
+				})] })
+			]
+		}),
+		actions: /* @__PURE__ */ E("div", {
+			className: "flex gap-2",
+			children: J ? /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(c, {
+				variant: "outline",
+				onClick: () => Y(!1),
+				children: "Cancel"
+			}), /* @__PURE__ */ E(c, {
+				leftIcon: /* @__PURE__ */ E(N, { size: 16 }),
+				onClick: ye,
+				isLoading: pe,
+				disabled: !Z.name,
+				children: "Save Changes"
+			})] }) : /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(c, {
+				variant: "outline",
+				leftIcon: /* @__PURE__ */ E(A, { size: 16 }),
+				onClick: Se,
+				children: "Edit"
+			}), ge ? /* @__PURE__ */ D("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ E(c, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => X(!1),
+					children: "Cancel"
+				}), /* @__PURE__ */ E(c, {
+					variant: "destructive",
+					size: "sm",
+					onClick: () => {
+						ee("medium"), xe();
+					},
+					isLoading: he,
+					children: "Confirm Delete"
+				})]
+			}) : /* @__PURE__ */ E(c, {
+				variant: "destructive",
+				leftIcon: /* @__PURE__ */ E(ce, { size: 16 }),
+				onClick: () => X(!0),
+				children: "Delete"
+			})] })
+		}),
+		children: /* @__PURE__ */ D("div", {
+			className: "space-y-6",
+			children: [
+				/* @__PURE__ */ E(re, {
+					icon: /* @__PURE__ */ E(L, { size: 18 }),
+					children: "This skill bundles a prompt, a set of tools and a knowledge profile into one reusable capability. Review what it includes and the policies it recommends, then attach it to any agent to grant all of those abilities at once — keeping your agents consistent without re-wiring the same pieces every time."
+				}),
+				J && /* @__PURE__ */ D(r, { children: [/* @__PURE__ */ E(o, { children: /* @__PURE__ */ E(s, { children: "Edit Skill" }) }), /* @__PURE__ */ D(i, {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ D("div", {
+							className: "grid grid-cols-2 gap-4",
+							children: [/* @__PURE__ */ E(m, {
+								label: "Skill Name",
+								required: !0,
+								children: /* @__PURE__ */ E(h, {
+									value: Z.name,
+									onChange: (e) => Q({
+										...Z,
+										name: e.target.value
+									})
+								})
+							}), /* @__PURE__ */ E(m, {
+								label: "Visibility",
+								children: /* @__PURE__ */ D("select", {
+									className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+									value: Z.visibility,
+									onChange: (e) => Q({
+										...Z,
+										visibility: e.target.value
+									}),
+									children: [
+										/* @__PURE__ */ E("option", {
+											value: "PRIVATE",
+											children: "Private"
+										}),
+										/* @__PURE__ */ E("option", {
+											value: "WORKSPACE",
+											children: "Workspace"
+										}),
+										/* @__PURE__ */ E("option", {
+											value: "PUBLIC",
+											children: "Public"
+										})
+									]
+								})
+							})]
+						}),
+						/* @__PURE__ */ E(m, {
+							label: "Description",
+							children: /* @__PURE__ */ E(g, {
+								value: Z.description,
+								onChange: (e) => Q({
+									...Z,
+									description: e.target.value
+								}),
+								rows: 2
+							})
+						}),
+						/* @__PURE__ */ D("div", {
+							className: "grid grid-cols-2 gap-4",
+							children: [/* @__PURE__ */ E(m, {
+								label: "Prompt Template",
+								children: /* @__PURE__ */ D("select", {
+									className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+									value: Z.promptTemplateId,
+									onChange: (e) => Q({
+										...Z,
+										promptTemplateId: e.target.value
+									}),
+									children: [/* @__PURE__ */ E("option", {
+										value: "",
+										children: "None"
+									}), K?.map((e) => /* @__PURE__ */ E("option", {
+										value: e.id,
+										children: e.name
+									}, e.id))]
+								})
+							}), /* @__PURE__ */ E(m, {
+								label: "Retrieval Profile",
+								children: /* @__PURE__ */ D("select", {
+									className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+									value: Z.retrievalProfileId,
+									onChange: (e) => Q({
+										...Z,
+										retrievalProfileId: e.target.value
+									}),
+									children: [/* @__PURE__ */ E("option", {
+										value: "",
+										children: "None"
+									}), q?.map((e) => /* @__PURE__ */ E("option", {
+										value: e.id,
+										children: e.name
+									}, e.id))]
+								})
+							})]
+						}),
+						/* @__PURE__ */ E(m, {
+							label: "Tool Pack Dependencies",
+							description: "Comma-separated",
+							children: /* @__PURE__ */ E(h, {
+								value: Z.toolPackDeps,
+								onChange: (e) => Q({
+									...Z,
+									toolPackDeps: e.target.value
+								}),
+								placeholder: "e.g., @botlit/github-tools, @botlit/web-browser"
+							})
+						}),
+						/* @__PURE__ */ D("div", {
+							className: "flex gap-4",
+							children: [
+								/* @__PURE__ */ D("label", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ E("input", {
+										type: "checkbox",
+										checked: Z.requiresTools,
+										onChange: (e) => Q({
+											...Z,
+											requiresTools: e.target.checked
+										}),
+										className: "h-4 w-4"
+									}), /* @__PURE__ */ E("span", {
+										className: "text-sm",
+										children: "Requires Tools"
+									})]
+								}),
+								/* @__PURE__ */ D("label", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ E("input", {
+										type: "checkbox",
+										checked: Z.requiresKnowledge,
+										onChange: (e) => Q({
+											...Z,
+											requiresKnowledge: e.target.checked
+										}),
+										className: "h-4 w-4"
+									}), /* @__PURE__ */ E("span", {
+										className: "text-sm",
+										children: "Requires Knowledge"
+									})]
+								}),
+								/* @__PURE__ */ D("label", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ E("input", {
+										type: "checkbox",
+										checked: Z.requiresA2A,
+										onChange: (e) => Q({
+											...Z,
+											requiresA2A: e.target.checked
+										}),
+										className: "h-4 w-4"
+									}), /* @__PURE__ */ E("span", {
+										className: "text-sm",
+										children: "Requires A2A"
+									})]
+								})
+							]
+						})
+					]
+				})] }),
+				/* @__PURE__ */ D("div", {
+					className: "grid grid-cols-2 md:grid-cols-4 gap-4",
+					children: [
+						/* @__PURE__ */ E(r, {
+							treatment: "glass",
+							glow: !0,
+							children: /* @__PURE__ */ D(i, {
+								className: "pt-6 text-center",
+								children: [
+									/* @__PURE__ */ E("div", {
+										className: "p-3 rounded-full bg-action-primary-bg/10 w-fit mx-auto mb-2",
+										children: /* @__PURE__ */ E(L, { className: "h-5 w-5 text-primary" })
+									}),
+									/* @__PURE__ */ E("p", {
+										className: "text-lg font-bold capitalize",
+										children: W.visibility.toLowerCase()
+									}),
+									/* @__PURE__ */ E("p", {
+										className: "text-sm text-text-secondary",
+										children: "Visibility"
+									})
+								]
+							})
+						}),
+						/* @__PURE__ */ E(r, { children: /* @__PURE__ */ D(i, {
+							className: "pt-6 text-center",
+							children: [/* @__PURE__ */ E("p", {
+								className: "text-3xl font-bold text-text-primary",
+								children: W.toolPackDeps.length
+							}), /* @__PURE__ */ E("p", {
+								className: "text-sm text-text-secondary",
+								children: "Tool Packs"
+							})]
+						}) }),
+						/* @__PURE__ */ E(r, { children: /* @__PURE__ */ D(i, {
+							className: "pt-6 text-center",
+							children: [/* @__PURE__ */ E("p", {
+								className: "text-3xl font-bold text-text-primary",
+								children: W.recommendedPolicies.length
+							}), /* @__PURE__ */ E("p", {
+								className: "text-sm text-text-secondary",
+								children: "Policies"
+							})]
+						}) }),
+						/* @__PURE__ */ E(r, { children: /* @__PURE__ */ D(i, {
+							className: "pt-6 text-center",
+							children: [/* @__PURE__ */ E("p", {
+								className: "text-3xl font-bold text-text-primary",
+								children: W.revision
+							}), /* @__PURE__ */ E("p", {
+								className: "text-sm text-text-secondary",
+								children: "Revision"
+							})]
+						}) })
+					]
+				}),
+				/* @__PURE__ */ D(r, { children: [/* @__PURE__ */ D(o, { children: [/* @__PURE__ */ E(s, { children: "Capability Requirements" }), /* @__PURE__ */ E(a, { children: "What this skill requires from agents" })] }), /* @__PURE__ */ E(i, { children: /* @__PURE__ */ D("div", {
+					className: "flex gap-8",
+					children: [
+						/* @__PURE__ */ E($, {
+							label: "Tools",
+							enabled: S(W.capabilityFlags, "requiresTools")
+						}),
+						/* @__PURE__ */ E($, {
+							label: "Knowledge",
+							enabled: S(W.capabilityFlags, "requiresKnowledge")
+						}),
+						/* @__PURE__ */ E($, {
+							label: "A2A",
+							enabled: S(W.capabilityFlags, "requiresA2A")
+						})
+					]
+				}) })] }),
+				/* @__PURE__ */ D("div", {
+					className: "grid grid-cols-1 md:grid-cols-2 gap-6",
+					children: [/* @__PURE__ */ D(r, { children: [/* @__PURE__ */ E(o, { children: /* @__PURE__ */ D(s, {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ E(M, { size: 18 }), "Prompt Template"]
+					}) }), /* @__PURE__ */ E(i, { children: W.promptTemplateId ? /* @__PURE__ */ E("div", {
+						className: "p-4 bg-bg-sunken rounded-lg",
+						children: /* @__PURE__ */ D("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ E("span", {
+								className: "font-medium",
+								children: W.promptTemplateId
+							}), /* @__PURE__ */ E(O, {
+								to: U(`prompt-templates/${W.promptTemplateId}`),
+								children: /* @__PURE__ */ E(c, {
+									variant: "ghost",
+									size: "sm",
+									children: /* @__PURE__ */ E(j, { size: 14 })
+								})
+							})]
+						})
+					}) : /* @__PURE__ */ E("p", {
+						className: "text-text-secondary",
+						children: "No prompt template associated"
+					}) })] }), /* @__PURE__ */ D(r, { children: [/* @__PURE__ */ E(o, { children: /* @__PURE__ */ D(s, {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ E(k, { size: 18 }), "Retrieval Profile"]
+					}) }), /* @__PURE__ */ E(i, { children: W.retrievalProfileId ? /* @__PURE__ */ E("div", {
+						className: "p-4 bg-bg-sunken rounded-lg",
+						children: /* @__PURE__ */ D("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ E("span", {
+								className: "font-medium",
+								children: W.retrievalProfileId
+							}), /* @__PURE__ */ E(O, {
+								to: U(`retrieval-profiles/${W.retrievalProfileId}`),
+								children: /* @__PURE__ */ E(c, {
+									variant: "ghost",
+									size: "sm",
+									children: /* @__PURE__ */ E(j, { size: 14 })
+								})
+							})]
+						})
+					}) : /* @__PURE__ */ E("p", {
+						className: "text-text-secondary",
+						children: "No retrieval profile associated"
+					}) })] })]
+				}),
+				/* @__PURE__ */ D(r, { children: [/* @__PURE__ */ E(o, { children: /* @__PURE__ */ D(s, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ E(F, { size: 18 }), "Tool Pack Dependencies"]
+				}) }), /* @__PURE__ */ E(i, { children: W.toolPackDeps.length > 0 ? /* @__PURE__ */ E("div", {
+					className: "flex flex-wrap gap-2",
+					children: W.toolPackDeps.map((e) => /* @__PURE__ */ E(l, {
+						variant: "secondary",
+						className: "font-mono",
+						children: e
+					}, e))
+				}) : /* @__PURE__ */ E("p", {
+					className: "text-text-secondary",
+					children: "No tool pack dependencies"
+				}) })] }),
+				/* @__PURE__ */ D(r, { children: [/* @__PURE__ */ E(o, { children: /* @__PURE__ */ D(s, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ E(P, { size: 18 }), "Recommended Policies"]
+				}) }), /* @__PURE__ */ E(i, { children: W.recommendedPolicies.length > 0 ? /* @__PURE__ */ E("div", {
+					className: "flex flex-wrap gap-2",
+					children: W.recommendedPolicies.map((e) => /* @__PURE__ */ E(l, {
+						variant: "outline",
+						children: e
+					}, e))
+				}) : /* @__PURE__ */ E("p", {
+					className: "text-text-secondary",
+					children: "No recommended policies"
+				}) })] }),
+				/* @__PURE__ */ D(r, { children: [/* @__PURE__ */ E(o, { children: /* @__PURE__ */ D(s, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ E(se, { size: 18 }), "Metadata"]
+				}) }), /* @__PURE__ */ E(i, { children: /* @__PURE__ */ D("div", {
+					className: "grid grid-cols-2 md:grid-cols-4 gap-6 text-sm",
+					children: [
+						/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+							className: "text-text-secondary",
+							children: "Created"
+						}), /* @__PURE__ */ E("p", {
+							className: "font-medium",
+							children: t(W.createdAt)
+						})] }),
+						/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+							className: "text-text-secondary",
+							children: "Updated"
+						}), /* @__PURE__ */ E("p", {
+							className: "font-medium",
+							children: t(W.updatedAt)
+						})] }),
+						/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+							className: "text-text-secondary",
+							children: "Tags"
+						}), /* @__PURE__ */ E("div", {
+							className: "flex gap-1",
+							children: W.tags.length > 0 ? W.tags.map((e) => /* @__PURE__ */ E(l, {
+								variant: "secondary",
+								className: "text-xs",
+								children: e
+							}, e)) : /* @__PURE__ */ E("span", {
+								className: "text-text-secondary",
+								children: "None"
+							})
+						})] })
+					]
+				}) })] })
+			]
+		})
+	});
+};
+//#endregion
+export { B as SkillDetailPage };
+
+//# sourceMappingURL=SkillDetailPage.js.map