@powerhousedao/ph-clint-app 0.1.0-dev.73 → 0.1.0-dev.74

package/dist/browser/{editor-DL0W2XOS.js → editor-CAZmaheq.js}

@@ -1,6 +1,6 @@
 import { t as __commonJSMin } from "./chunk-YKewjYmz.js";
-import { In as redo, Qn as generateId, g as actions, zn as undo } from "./module-DoAlHsjp.js";
-import { c as exportDocument, d as showRevisionHistory, f as useGetSwitchboardLink, g as useDocumentById, h as useSelectedDocumentSafe, l as setSelectedNode, m as useNodeParentFolderById, p as useNodeActions, s as useSelectedPhClintProjectDocument, u as setSelectedTimelineItem } from "./ph-clint-project-D634z5c5.js";
+import { g as actions, hr as redo, jr as generateId, vr as undo } from "./module-K5q3UobV.js";
+import { c as exportDocument, d as showRevisionHistory, f as useGetSwitchboardLink, g as useDocumentById, h as useSelectedDocumentSafe, l as setSelectedNode, m as useNodeParentFolderById, p as useNodeActions, s as useSelectedPhClintProjectDocument, u as setSelectedTimelineItem } from "./ph-clint-project-Bbl7jqNw.js";
 import { n as Icon, r as twMerge } from "./document-timeline-FWiQhfIq-DO4emW6K.js";
 import { Suspense, lazy, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -745,8 +745,26 @@ function Editor() {
 		id: generateId(),
 		timestamp: (/* @__PURE__ */ new Date()).toISOString()
 	}));
-	const setAgentId = (agentId) => dispatch(actions.setAgentId({ agentId }));
-	const setAgentName = (agentName) => dispatch(actions.setAgentName({ agentName }));
+	const setMainAgentName = (name) => dispatch(actions.setMainAgentName({ name }));
+	const setMainAgentDescription = (description) => dispatch(actions.setMainAgentDescription({ description }));
+	const clearMainAgentDescription = () => dispatch(actions.clearMainAgentDescription({ _: true }));
+	const setMainAgentImage = (image) => dispatch(actions.setMainAgentImage({ image }));
+	const clearMainAgentImage = () => dispatch(actions.clearMainAgentImage({ _: true }));
+	const addSubAgent = (id, name, description, modelId) => dispatch(actions.addSubAgent({
+		id,
+		name,
+		description,
+		modelId
+	}));
+	const removeSubAgent = (id) => dispatch(actions.removeSubAgent({ id }));
+	const setSubAgentName = (id, name) => dispatch(actions.setSubAgentName({
+		id,
+		name
+	}));
+	const setSubAgentDescription = (id, description) => dispatch(actions.setSubAgentDescription({
+		id,
+		description
+	}));
 	const addModel = (id, isDefault) => dispatch(actions.addModel({
 		id,
 		isDefault
@@ -769,9 +787,40 @@ function Editor() {
 		ids,
 		insertBefore
 	}));
-	const setAgentDescription = (description) => dispatch(actions.setAgentDescription({ description }));
-	const setAgentImage = (image) => dispatch(actions.setAgentImage({ image }));
-	const clearAgentImage = () => dispatch(actions.clearAgentImage({ _: true }));
+	const setAgentModel = (agentId, modelId) => dispatch(actions.setAgentModel({
+		agentId,
+		modelId
+	}));
+	const addAgentProfileRef = (agentId, profileId, insertBefore) => dispatch(actions.addAgentProfileRef({
+		agentId,
+		profileId,
+		insertBefore
+	}));
+	const removeAgentProfileRef = (agentId, profileId) => dispatch(actions.removeAgentProfileRef({
+		agentId,
+		profileId
+	}));
+	const reorderAgentProfileRefs = (agentId, ids, insertBefore) => dispatch(actions.reorderAgentProfileRefs({
+		agentId,
+		ids,
+		insertBefore
+	}));
+	const addAgentSkill = (agentId, name) => dispatch(actions.addAgentSkill({
+		agentId,
+		name
+	}));
+	const removeAgentSkill = (agentId, name) => dispatch(actions.removeAgentSkill({
+		agentId,
+		name
+	}));
+	const addAgentToolPattern = (agentId, pattern) => dispatch(actions.addAgentToolPattern({
+		agentId,
+		pattern
+	}));
+	const removeAgentToolPattern = (agentId, pattern) => dispatch(actions.removeAgentToolPattern({
+		agentId,
+		pattern
+	}));
 	const setEnableChat = (enabled) => dispatch(actions.setEnableChat({ enabled }));
 	const setProxyEnabled = (enabled) => dispatch(actions.setProxyEnabled({ enabled }));
 	const setObservabilityEnabled = (enabled) => dispatch(actions.setObservabilityEnabled({ enabled }));
@@ -834,19 +883,31 @@ function Editor() {
 				activeTab === "agent" && /* @__PURE__ */ jsx(AgentTab, {
 					mastra,
 					isAboveDisabled,
-					setAgentId,
-					setAgentName,
-					setAgentDescription,
-					setAgentImage,
-					clearAgentImage,
-					setEnableChat,
+					setMainAgentName,
+					setMainAgentDescription,
+					clearMainAgentDescription,
+					setMainAgentImage,
+					clearMainAgentImage,
+					addSubAgent,
+					removeSubAgent,
+					setSubAgentName,
+					setSubAgentDescription,
+					setAgentModel,
+					addAgentProfileRef,
+					removeAgentProfileRef,
+					reorderAgentProfileRefs,
+					addAgentSkill,
+					removeAgentSkill,
+					addAgentToolPattern,
+					removeAgentToolPattern,
 					addModel,
 					removeModel,
 					setDefaultModel,
 					addProfile,
 					updateProfile,
 					removeProfile,
-					reorderProfiles
+					reorderProfiles,
+					setEnableChat
 				}),
 				activeTab === "powerhouse" && /* @__PURE__ */ jsx(PowerhouseTab, {
 					packages: state.packages,
@@ -1000,67 +1061,61 @@ function PowerhouseTab(props) {
 }
 function AgentTab(props) {
 	const { mastra } = props;
-	if (!mastra.enabled) return /* @__PURE__ */ jsxs("section", {
+	const main = mastra.mainAgent;
+	if (!mastra.enabled || !main) return /* @__PURE__ */ jsxs("section", {
 		className: "my-6 rounded border border-dashed border-gray-300 bg-white p-8 text-center text-gray-500",
 		children: [/* @__PURE__ */ jsx("h3", {
 			className: "text-lg font-semibold",
 			children: "Agent"
 		}), /* @__PURE__ */ jsx("p", {
 			className: "mt-2",
-			children: "Enable Mastra in the Spec tab to configure the agent."
+			children: "Enable Mastra in the Spec tab to configure agents."
 		})]
 	});
+	const allAgentIds = [main.id, ...mastra.subAgents.map((s) => s.id)];
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("section", {
-			className: "my-6",
-			children: /* @__PURE__ */ jsxs("div", {
-				style: {
-					display: "flex",
-					gap: "1.5rem"
-				},
-				children: [/* @__PURE__ */ jsx("div", {
-					style: {
-						flexShrink: 0,
-						width: "7rem"
-					},
-					children: /* @__PURE__ */ jsx(AgentImageField, {
-						image: mastra.agentImage ?? null,
-						onSetImage: props.setAgentImage,
-						onClearImage: props.clearAgentImage
-					})
-				}), /* @__PURE__ */ jsxs("div", {
-					style: {
-						flex: 1,
-						minWidth: 0
-					},
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "grid grid-cols-[1fr_2fr] gap-4",
-						children: [/* @__PURE__ */ jsx(TextField, {
-							compact: true,
-							label: "Agent ID",
-							value: mastra.agentId ?? "",
-							placeholder: "my-agent",
-							onCommit: props.setAgentId
-						}), /* @__PURE__ */ jsx(TextField, {
-							compact: true,
-							label: "Agent Name",
-							value: mastra.agentName ?? "",
-							placeholder: "My Agent",
-							onCommit: props.setAgentName
-						})]
-					}), /* @__PURE__ */ jsx(TextField, {
-						compact: true,
-						label: "Agent Description",
-						value: mastra.agentDescription ?? "",
-						placeholder: "A brief description of what this agent does",
-						onCommit: props.setAgentDescription
-					})]
-				})]
-			})
+		/* @__PURE__ */ jsx(MainAgentPanel, {
+			main,
+			models: mastra.models,
+			profiles: mastra.profiles,
+			setMainAgentName: props.setMainAgentName,
+			setMainAgentDescription: props.setMainAgentDescription,
+			clearMainAgentDescription: props.clearMainAgentDescription,
+			setMainAgentImage: props.setMainAgentImage,
+			clearMainAgentImage: props.clearMainAgentImage,
+			setAgentModel: props.setAgentModel,
+			addAgentProfileRef: props.addAgentProfileRef,
+			removeAgentProfileRef: props.removeAgentProfileRef,
+			reorderAgentProfileRefs: props.reorderAgentProfileRefs,
+			addAgentSkill: props.addAgentSkill,
+			removeAgentSkill: props.removeAgentSkill,
+			addAgentToolPattern: props.addAgentToolPattern,
+			removeAgentToolPattern: props.removeAgentToolPattern
+		}),
+		/* @__PURE__ */ jsx("hr", {}),
+		/* @__PURE__ */ jsx(SubAgentsSection, {
+			subAgents: mastra.subAgents,
+			models: mastra.models,
+			profiles: mastra.profiles,
+			existingAgentIds: allAgentIds,
+			addSubAgent: props.addSubAgent,
+			removeSubAgent: props.removeSubAgent,
+			setSubAgentName: props.setSubAgentName,
+			setSubAgentDescription: props.setSubAgentDescription,
+			setAgentModel: props.setAgentModel,
+			addAgentProfileRef: props.addAgentProfileRef,
+			removeAgentProfileRef: props.removeAgentProfileRef,
+			reorderAgentProfileRefs: props.reorderAgentProfileRefs,
+			addAgentSkill: props.addAgentSkill,
+			removeAgentSkill: props.removeAgentSkill,
+			addAgentToolPattern: props.addAgentToolPattern,
+			removeAgentToolPattern: props.removeAgentToolPattern
 		}),
 		/* @__PURE__ */ jsx("hr", {}),
 		/* @__PURE__ */ jsx(ModelsSection, {
 			models: mastra.models,
+			main: mastra.mainAgent,
+			subAgents: mastra.subAgents,
 			addModel: props.addModel,
 			removeModel: props.removeModel,
 			setDefaultModel: props.setDefaultModel
@@ -1068,6 +1123,8 @@ function AgentTab(props) {
 		/* @__PURE__ */ jsx("hr", {}),
 		/* @__PURE__ */ jsx(ProfilesSection, {
 			profiles: mastra.profiles,
+			main: mastra.mainAgent,
+			subAgents: mastra.subAgents,
 			addProfile: props.addProfile,
 			updateProfile: props.updateProfile,
 			removeProfile: props.removeProfile,
@@ -1092,6 +1149,511 @@ function AgentTab(props) {
 		})
 	] });
 }
+function MainAgentPanel(props) {
+	const { main } = props;
+	return /* @__PURE__ */ jsxs("section", {
+		className: "my-6",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-lg font-semibold",
+					children: "Main Agent"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "rounded bg-blue-100 px-2 py-0.5 text-xs font-semibold text-blue-700",
+					children: "Main"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "text-sm text-gray-600",
+				children: [
+					"The orchestrating agent. Subagents are exposed to it as tools named ",
+					/* @__PURE__ */ jsx("code", { children: "agent-<subagent-id>" }),
+					". Only the main agent can have an avatar."
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "my-3 rounded border border-gray-200 bg-white p-4",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							gap: "1.5rem"
+						},
+						children: [/* @__PURE__ */ jsx("div", {
+							style: {
+								flexShrink: 0,
+								width: "7rem"
+							},
+							children: /* @__PURE__ */ jsx(AgentImageField, {
+								image: main.image ?? null,
+								onSetImage: props.setMainAgentImage,
+								onClearImage: props.clearMainAgentImage
+							})
+						}), /* @__PURE__ */ jsxs("div", {
+							style: {
+								flex: 1,
+								minWidth: 0
+							},
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "grid grid-cols-[1fr_2fr] gap-4",
+								children: [/* @__PURE__ */ jsx(TextField, {
+									compact: true,
+									readOnly: true,
+									label: "Agent ID",
+									value: main.id,
+									onCommit: () => {}
+								}), /* @__PURE__ */ jsx(TextField, {
+									compact: true,
+									label: "Agent Name",
+									value: main.name,
+									placeholder: "My Agent",
+									onCommit: props.setMainAgentName
+								})]
+							}), /* @__PURE__ */ jsx(DescriptionField, {
+								value: main.description,
+								placeholder: "A brief description of what this agent does",
+								onSet: props.setMainAgentDescription,
+								onClear: props.clearMainAgentDescription
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsx("hr", { className: "my-4" }),
+					/* @__PURE__ */ jsx(AgentBindings, {
+						agentId: main.id,
+						isMain: true,
+						modelId: main.modelId,
+						profileIds: main.profileIds,
+						skills: main.skills,
+						toolPatterns: main.toolPatterns,
+						models: props.models,
+						profiles: props.profiles,
+						setAgentModel: props.setAgentModel,
+						addAgentProfileRef: props.addAgentProfileRef,
+						removeAgentProfileRef: props.removeAgentProfileRef,
+						reorderAgentProfileRefs: props.reorderAgentProfileRefs,
+						addAgentSkill: props.addAgentSkill,
+						removeAgentSkill: props.removeAgentSkill,
+						addAgentToolPattern: props.addAgentToolPattern,
+						removeAgentToolPattern: props.removeAgentToolPattern
+					})
+				]
+			})
+		]
+	});
+}
+function DescriptionField(props) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: "my-1 block",
+		children: [/* @__PURE__ */ jsx("h3", {
+			className: "text-xs text-gray-600",
+			children: "Description"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2",
+			children: /* @__PURE__ */ jsx("input", {
+				type: "text",
+				defaultValue: props.value ?? "",
+				placeholder: props.placeholder,
+				onBlur: (e) => {
+					const next = e.target.value.trim();
+					if (next && next !== (props.value ?? "")) props.onSet(next);
+					else if (!next && props.value !== null) props.onClear();
+				},
+				onKeyDown: (e) => {
+					if (e.key === "Enter") e.currentTarget.blur();
+				},
+				className: "w-full font-mono"
+			})
+		})]
+	});
+}
+function SubAgentsSection(props) {
+	const [showAddForm, setShowAddForm] = useState(false);
+	return /* @__PURE__ */ jsxs("section", {
+		className: "my-6",
+		children: [
+			/* @__PURE__ */ jsx("h3", {
+				className: "text-lg font-semibold",
+				children: "Sub-agents"
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "text-sm text-gray-600",
+				children: [
+					"Specialised agents the main agent can delegate to. Each is exposed as a tool named ",
+					/* @__PURE__ */ jsx("code", { children: "agent-<id>" }),
+					"."
+				]
+			}),
+			props.subAgents.map((sub) => /* @__PURE__ */ jsx(SubAgentCard, {
+				sub,
+				models: props.models,
+				profiles: props.profiles,
+				removeSubAgent: props.removeSubAgent,
+				setSubAgentName: props.setSubAgentName,
+				setSubAgentDescription: props.setSubAgentDescription,
+				setAgentModel: props.setAgentModel,
+				addAgentProfileRef: props.addAgentProfileRef,
+				removeAgentProfileRef: props.removeAgentProfileRef,
+				reorderAgentProfileRefs: props.reorderAgentProfileRefs,
+				addAgentSkill: props.addAgentSkill,
+				removeAgentSkill: props.removeAgentSkill,
+				addAgentToolPattern: props.addAgentToolPattern,
+				removeAgentToolPattern: props.removeAgentToolPattern
+			}, sub.id)),
+			showAddForm ? /* @__PURE__ */ jsx(AddSubAgentForm, {
+				models: props.models,
+				existingAgentIds: props.existingAgentIds,
+				onAdd: (id, name, description, modelId) => {
+					props.addSubAgent(id, name, description, modelId);
+					setShowAddForm(false);
+				},
+				onCancel: () => setShowAddForm(false)
+			}) : /* @__PURE__ */ jsx("button", {
+				className: "mt-3 rounded bg-blue-500 px-3 py-2 text-sm text-white hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50",
+				disabled: props.models.length === 0,
+				title: props.models.length === 0 ? "Add a model first" : "",
+				onClick: () => setShowAddForm(true),
+				children: "+ Add Sub-agent"
+			})
+		]
+	});
+}
+function AddSubAgentForm(props) {
+	const [id, setId] = useState("");
+	const [name, setName] = useState("");
+	const [description, setDescription] = useState("");
+	const [modelId, setModelId] = useState((props.models.find((m) => m.isDefault) ?? props.models[0])?.id ?? "");
+	const canAdd = /^[a-z][a-z0-9-]*$/.test(id) && !props.existingAgentIds.includes(id) && name.trim() && description.trim() && modelId;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "my-3 rounded border border-blue-200 bg-blue-50 p-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-2 gap-3",
+				children: [/* @__PURE__ */ jsxs("label", {
+					className: "block",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-xs text-gray-600",
+						children: "Sub-agent ID"
+					}), /* @__PURE__ */ jsx("input", {
+						type: "text",
+						value: id,
+						placeholder: "summarizer",
+						onChange: (e) => setId(e.target.value.trim()),
+						className: "w-full rounded border p-2 font-mono text-sm"
+					})]
+				}), /* @__PURE__ */ jsxs("label", {
+					className: "block",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-xs text-gray-600",
+						children: "Display name"
+					}), /* @__PURE__ */ jsx("input", {
+						type: "text",
+						value: name,
+						placeholder: "Summarizer",
+						onChange: (e) => setName(e.target.value),
+						className: "w-full rounded border p-2 text-sm"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "my-2 block",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-gray-600",
+					children: "Description (the main agent uses this to decide when to delegate)"
+				}), /* @__PURE__ */ jsx("input", {
+					type: "text",
+					value: description,
+					placeholder: "Summarizes long documents into bullet points",
+					onChange: (e) => setDescription(e.target.value),
+					className: "w-full rounded border p-2 text-sm"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "my-2 block",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-gray-600",
+					children: "Model"
+				}), /* @__PURE__ */ jsx("select", {
+					value: modelId,
+					onChange: (e) => setModelId(e.target.value),
+					className: "w-full rounded border p-2 font-mono text-sm",
+					children: props.models.map((m) => /* @__PURE__ */ jsxs("option", {
+						value: m.id,
+						children: [m.id, m.isDefault ? " (default)" : ""]
+					}, m.id))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-2 flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("button", {
+					className: "rounded bg-blue-500 px-3 py-2 text-sm text-white hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50",
+					disabled: !canAdd,
+					onClick: () => props.onAdd(id, name.trim(), description.trim(), modelId),
+					children: "Add"
+				}), /* @__PURE__ */ jsx("button", {
+					className: "text-sm text-gray-500 hover:text-gray-700",
+					onClick: props.onCancel,
+					children: "Cancel"
+				})]
+			})
+		]
+	});
+}
+function SubAgentCard(props) {
+	const { sub } = props;
+	const [expanded, setExpanded] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "my-3 rounded border border-gray-200 bg-white p-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							className: "text-sm text-gray-400 hover:text-gray-700",
+							onClick: () => setExpanded(!expanded),
+							title: expanded ? "Collapse" : "Expand",
+							children: expanded ? "▾" : "▸"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "rounded bg-gray-100 px-2 py-0.5 font-mono text-xs text-gray-500",
+							children: sub.id
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-semibold",
+							children: sub.name
+						})
+					]
+				}), /* @__PURE__ */ jsx("button", {
+					className: "text-sm text-red-500 hover:text-red-700",
+					onClick: () => props.removeSubAgent(sub.id),
+					children: "Remove"
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "ml-7 text-sm text-gray-600",
+				children: sub.description
+			}),
+			expanded && /* @__PURE__ */ jsxs("div", {
+				className: "mt-4 space-y-3 border-t border-gray-100 pt-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-2 gap-3",
+					children: [/* @__PURE__ */ jsx(TextField, {
+						compact: true,
+						label: "Name",
+						value: sub.name,
+						onCommit: (v) => props.setSubAgentName(sub.id, v)
+					}), /* @__PURE__ */ jsx(TextField, {
+						compact: true,
+						label: "Description",
+						value: sub.description,
+						onCommit: (v) => props.setSubAgentDescription(sub.id, v)
+					})]
+				}), /* @__PURE__ */ jsx(AgentBindings, {
+					agentId: sub.id,
+					isMain: false,
+					modelId: sub.modelId,
+					profileIds: sub.profileIds,
+					skills: sub.skills,
+					toolPatterns: sub.toolPatterns,
+					models: props.models,
+					profiles: props.profiles,
+					setAgentModel: props.setAgentModel,
+					addAgentProfileRef: props.addAgentProfileRef,
+					removeAgentProfileRef: props.removeAgentProfileRef,
+					reorderAgentProfileRefs: props.reorderAgentProfileRefs,
+					addAgentSkill: props.addAgentSkill,
+					removeAgentSkill: props.removeAgentSkill,
+					addAgentToolPattern: props.addAgentToolPattern,
+					removeAgentToolPattern: props.removeAgentToolPattern
+				})]
+			})
+		]
+	});
+}
+function AgentBindings(props) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ jsxs("label", {
+				className: "block",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-gray-600",
+					children: "Model"
+				}), /* @__PURE__ */ jsx("select", {
+					value: props.modelId,
+					onChange: (e) => props.setAgentModel(props.agentId, e.target.value),
+					className: "mt-1 w-full rounded border p-2 font-mono text-sm",
+					children: props.models.map((m) => /* @__PURE__ */ jsxs("option", {
+						value: m.id,
+						children: [m.id, m.isDefault ? " (default)" : ""]
+					}, m.id))
+				})]
+			}),
+			/* @__PURE__ */ jsx(ProfileRefsEditor, {
+				agentId: props.agentId,
+				profileIds: props.profileIds,
+				allProfiles: props.profiles,
+				onAdd: (profileId) => props.addAgentProfileRef(props.agentId, profileId),
+				onRemove: (profileId) => props.removeAgentProfileRef(props.agentId, profileId),
+				onReorder: (ids, insertBefore) => props.reorderAgentProfileRefs(props.agentId, ids, insertBefore)
+			}),
+			/* @__PURE__ */ jsx(ChipListEditor, {
+				label: "Skills",
+				hint: "Reference skills by name. tpl wins over ext if both exist.",
+				values: props.skills,
+				placeholder: "skill-name",
+				validator: (v) => /^[a-z][a-z0-9-]*$/.test(v),
+				onAdd: (v) => props.addAgentSkill(props.agentId, v),
+				onRemove: (v) => props.removeAgentSkill(props.agentId, v)
+			}),
+			/* @__PURE__ */ jsx(ChipListEditor, {
+				label: "Tool patterns",
+				hint: props.isMain ? "Glob patterns over tool names (e.g. clint-project-*, *-mcp__*). Empty = all tools." : "Glob patterns over tool names. Empty = no tools.",
+				values: props.toolPatterns,
+				placeholder: "pattern*",
+				validator: (v) => v.length > 0,
+				onAdd: (v) => props.addAgentToolPattern(props.agentId, v),
+				onRemove: (v) => props.removeAgentToolPattern(props.agentId, v)
+			})
+		]
+	});
+}
+function ProfileRefsEditor(props) {
+	const available = props.allProfiles.filter((p) => !props.profileIds.includes(p.id));
+	const moveUp = (index) => {
+		if (index === 0) return;
+		const id = props.profileIds[index];
+		const beforeId = props.profileIds[index - 1];
+		props.onReorder([id], beforeId);
+	};
+	const moveDown = (index) => {
+		if (index >= props.profileIds.length - 1) return;
+		const id = props.profileIds[index];
+		const afterNext = index + 2 < props.profileIds.length ? props.profileIds[index + 2] : null;
+		props.onReorder([id], afterNext);
+	};
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "text-xs text-gray-600",
+			children: "Profiles (instructions, in order)"
+		}),
+		/* @__PURE__ */ jsxs("ul", {
+			className: "my-1 space-y-1",
+			children: [props.profileIds.map((profileId, i) => {
+				const profile = props.allProfiles.find((p) => p.id === profileId);
+				return /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center gap-2 rounded bg-gray-50 px-2 py-1",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							className: "text-gray-400 hover:text-gray-600 disabled:opacity-30",
+							disabled: i === 0,
+							onClick: () => moveUp(i),
+							title: "Move up",
+							children: "↑"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							className: "text-gray-400 hover:text-gray-600 disabled:opacity-30",
+							disabled: i === props.profileIds.length - 1,
+							onClick: () => moveDown(i),
+							title: "Move down",
+							children: "↓"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-mono text-xs text-gray-500",
+							children: profileId
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "flex-1 text-sm",
+							children: profile?.title ?? /* @__PURE__ */ jsx("em", {
+								className: "text-red-500",
+								children: "(missing in library)"
+							})
+						}),
+						/* @__PURE__ */ jsx("button", {
+							className: "text-sm text-red-500 hover:text-red-700",
+							onClick: () => props.onRemove(profileId),
+							children: "Remove"
+						})
+					]
+				}, profileId);
+			}), props.profileIds.length === 0 && /* @__PURE__ */ jsx("li", {
+				className: "px-2 py-1 text-sm italic text-gray-400",
+				children: "No profiles assigned"
+			})]
+		}),
+		available.length > 0 && /* @__PURE__ */ jsxs("select", {
+			value: "",
+			onChange: (e) => {
+				if (e.target.value) props.onAdd(e.target.value);
+			},
+			className: "rounded border p-1 text-sm",
+			children: [/* @__PURE__ */ jsx("option", {
+				value: "",
+				children: "+ Add profile…"
+			}), available.map((p) => /* @__PURE__ */ jsxs("option", {
+				value: p.id,
+				children: [
+					p.title,
+					" (",
+					p.id,
+					")"
+				]
+			}, p.id))]
+		})
+	] });
+}
+function ChipListEditor(props) {
+	const [input, setInput] = useState("");
+	const valid = props.validator(input.trim());
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "text-xs text-gray-600",
+			children: props.label
+		}),
+		/* @__PURE__ */ jsx("p", {
+			className: "text-xs text-gray-500",
+			children: props.hint
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "my-1 flex flex-wrap items-center gap-1",
+			children: props.values.map((v) => /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1 rounded bg-gray-100 px-2 py-1 font-mono text-xs",
+				children: [v, /* @__PURE__ */ jsx("button", {
+					className: "text-red-500 hover:text-red-700",
+					onClick: () => props.onRemove(v),
+					title: "Remove",
+					children: "×"
+				})]
+			}, v))
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "text",
+				placeholder: props.placeholder,
+				value: input,
+				onChange: (e) => setInput(e.target.value),
+				onKeyDown: (e) => {
+					if (e.key === "Enter" && valid) {
+						props.onAdd(input.trim());
+						setInput("");
+					}
+				},
+				className: "flex-1 rounded border p-1 font-mono text-sm"
+			}), /* @__PURE__ */ jsx("button", {
+				className: "rounded bg-blue-500 px-2 py-1 text-xs text-white hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50",
+				disabled: !valid,
+				onClick: () => {
+					props.onAdd(input.trim());
+					setInput("");
+				},
+				children: "Add"
+			})]
+		})
+	] });
+}
 function AgentImageField(props) {
 	const [isDragOver, setIsDragOver] = useState(false);
 	const dragDepthRef = useRef(0);
@@ -1192,6 +1754,12 @@ function AgentImageField(props) {
 }
 function ModelsSection(props) {
 	const [newModelId, setNewModelId] = useState("");
+	const usersOf = (modelId) => {
+		const u = [];
+		if (props.main?.modelId === modelId) u.push(props.main.id);
+		for (const s of props.subAgents) if (s.modelId === modelId) u.push(s.id);
+		return u;
+	};
 	const handleAdd = () => {
 		const id = newModelId.trim();
 		if (id) {
@@ -1208,7 +1776,7 @@ function ModelsSection(props) {
 			}),
 			/* @__PURE__ */ jsx("p", {
 				className: "text-sm text-gray-600",
-				children: "Provider/model format (e.g. anthropic/claude-sonnet-4-5). Exactly one must be default."
+				children: "Provider/model format (e.g. anthropic/claude-sonnet-4-5). Exactly one is the default."
 			}),
 			props.models.length > 0 && /* @__PURE__ */ jsxs("table", {
 				className: "mt-3 w-full text-sm",
@@ -1225,12 +1793,13 @@ function ModelsSection(props) {
 						}),
 						/* @__PURE__ */ jsx("th", {
 							className: "py-1",
-							children: "Provider"
+							children: "Used by"
 						}),
 						/* @__PURE__ */ jsx("th", { className: "py-1" })
 					]
 				}) }), /* @__PURE__ */ jsx("tbody", { children: props.models.map((m) => {
-					const provider = m.id.split("/")[0];
+					const users = usersOf(m.id);
+					const inUse = users.length > 0;
 					return /* @__PURE__ */ jsxs("tr", {
 						className: "border-b border-gray-100",
 						children: [
@@ -1248,13 +1817,15 @@ function ModelsSection(props) {
 								children: m.id
 							}),
 							/* @__PURE__ */ jsx("td", {
-								className: "py-2 text-gray-500",
-								children: provider
+								className: "py-2 text-xs text-gray-500",
+								children: users.length === 0 ? /* @__PURE__ */ jsx("em", { children: "—" }) : users.join(", ")
 							}),
 							/* @__PURE__ */ jsx("td", {
 								className: "py-2 text-right",
 								children: /* @__PURE__ */ jsx("button", {
-									className: "text-red-500 hover:text-red-700",
+									className: "text-red-500 hover:text-red-700 disabled:cursor-not-allowed disabled:text-gray-300",
+									disabled: inUse,
+									title: inUse ? `In use by ${users.join(", ")}` : "",
 									onClick: () => props.removeModel(m.id),
 									children: "Remove"
 								})
@@ -1288,6 +1859,12 @@ function ProfilesSection(props) {
 	const [showAddForm, setShowAddForm] = useState(false);
 	const [newId, setNewId] = useState("");
 	const [newTitle, setNewTitle] = useState("");
+	const usersOf = (profileId) => {
+		const u = [];
+		if (props.main?.profileIds.includes(profileId)) u.push(props.main.id);
+		for (const s of props.subAgents) if (s.profileIds.includes(profileId)) u.push(s.id);
+		return u;
+	};
 	const handleAdd = () => {
 		const id = newId.trim();
 		const title = newTitle.trim();
@@ -1319,64 +1896,78 @@ function ProfilesSection(props) {
 			}),
 			/* @__PURE__ */ jsx("p", {
 				className: "text-sm text-gray-600",
-				children: "Markdown sections that compose into the agent's instructions. Order matters."
+				children: "Markdown sections that compose into agents' instructions. Reference these from each agent's profile list."
 			}),
-			props.profiles.map((profile, i) => /* @__PURE__ */ jsxs("div", {
-				className: "my-3 rounded border border-gray-200 bg-white p-4",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center justify-between",
+			props.profiles.map((profile, i) => {
+				const users = usersOf(profile.id);
+				const inUse = users.length > 0;
+				return /* @__PURE__ */ jsxs("div", {
+					className: "my-3 rounded border border-gray-200 bg-white p-4",
 					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "rounded bg-gray-100 px-2 py-0.5 font-mono text-xs text-gray-500",
-							children: profile.id
-						}), /* @__PURE__ */ jsx("input", {
-							type: "text",
-							defaultValue: profile.title,
-							onBlur: (e) => {
-								const next = e.target.value.trim();
-								if (next && next !== profile.title) props.updateProfile(profile.id, next);
-							},
-							onKeyDown: (e) => {
-								if (e.key === "Enter") e.currentTarget.blur();
-							},
-							className: "border-b border-transparent font-semibold hover:border-gray-300 focus:border-blue-500"
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "rounded bg-gray-100 px-2 py-0.5 font-mono text-xs text-gray-500",
+									children: profile.id
+								}),
+								/* @__PURE__ */ jsx("input", {
+									type: "text",
+									defaultValue: profile.title,
+									onBlur: (e) => {
+										const next = e.target.value.trim();
+										if (next && next !== profile.title) props.updateProfile(profile.id, next);
+									},
+									onKeyDown: (e) => {
+										if (e.key === "Enter") e.currentTarget.blur();
+									},
+									className: "border-b border-transparent font-semibold hover:border-gray-300 focus:border-blue-500"
+								}),
+								users.length > 0 && /* @__PURE__ */ jsxs("span", {
+									className: "rounded bg-blue-50 px-2 py-0.5 text-xs text-blue-700",
+									title: users.join(", "),
+									children: ["used by: ", users.join(", ")]
+								})
+							]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									className: "px-1 text-gray-400 hover:text-gray-600 disabled:opacity-30",
+									disabled: i === 0,
+									onClick: () => moveUp(i),
+									title: "Move up",
+									children: "↑"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									className: "px-1 text-gray-400 hover:text-gray-600 disabled:opacity-30",
+									disabled: i === props.profiles.length - 1,
+									onClick: () => moveDown(i),
+									title: "Move down",
+									children: "↓"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									className: "ml-2 text-sm text-red-500 hover:text-red-700 disabled:cursor-not-allowed disabled:text-gray-300",
+									disabled: inUse,
+									title: inUse ? `In use by ${users.join(", ")}` : "",
+									onClick: () => props.removeProfile(profile.id),
+									children: "Remove"
+								})
+							]
 						})]
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-1",
-						children: [
-							/* @__PURE__ */ jsx("button", {
-								className: "px-1 text-gray-400 hover:text-gray-600 disabled:opacity-30",
-								disabled: i === 0,
-								onClick: () => moveUp(i),
-								title: "Move up",
-								children: "↑"
-							}),
-							/* @__PURE__ */ jsx("button", {
-								className: "px-1 text-gray-400 hover:text-gray-600 disabled:opacity-30",
-								disabled: i === props.profiles.length - 1,
-								onClick: () => moveDown(i),
-								title: "Move down",
-								children: "↓"
-							}),
-							/* @__PURE__ */ jsx("button", {
-								className: "ml-2 text-sm text-red-500 hover:text-red-700",
-								onClick: () => props.removeProfile(profile.id),
-								children: "Remove"
-							})
-						]
+					}), /* @__PURE__ */ jsx("textarea", {
+						defaultValue: profile.content,
+						onBlur: (e) => {
+							const next = e.target.value;
+							if (next !== profile.content) props.updateProfile(profile.id, void 0, next);
+						},
+						placeholder: "Markdown content for this profile section...",
+						rows: 4,
+						className: "mt-2 w-full rounded border border-gray-200 p-2 font-mono text-sm"
 					})]
-				}), /* @__PURE__ */ jsx("textarea", {
-					defaultValue: profile.content,
-					onBlur: (e) => {
-						const next = e.target.value;
-						if (next !== profile.content) props.updateProfile(profile.id, void 0, next);
-					},
-					placeholder: "Markdown content for this profile section...",
-					rows: 4,
-					className: "mt-2 w-full rounded border border-gray-200 p-2 font-mono text-sm"
-				})]
-			}, profile.id)),
+				}, profile.id);
+			}),
 			showAddForm ? /* @__PURE__ */ jsx("div", {
 				className: "my-3 rounded border border-blue-200 bg-blue-50 p-4",
 				children: /* @__PURE__ */ jsxs("div", {
@@ -1594,44 +2185,52 @@ function PublishTab(props) {
 		}),
 		/* @__PURE__ */ jsx("hr", {}),
 		/* @__PURE__ */ jsxs("section", {
-			className: "my-6 grid grid-cols-2 gap-x-8",
-			children: [/* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("h3", {
-				className: "text-base",
-				children: "Document ID"
-			}), /* @__PURE__ */ jsx("input", {
-				type: "text",
-				value: props.documentHeader.id,
-				readOnly: true,
-				className: "font-mono"
-			})] }), /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("h3", {
-				className: "text-base",
-				children: "Type"
-			}), /* @__PURE__ */ jsx("input", {
-				type: "text",
-				value: props.documentHeader.documentType,
-				readOnly: true
-			})] })]
+			className: "my-6",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-lg font-semibold",
+				children: "Document"
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "my-3 rounded border border-gray-200 bg-white p-4",
+				children: [
+					/* @__PURE__ */ jsxs("p", {
+						className: "text-sm text-gray-600",
+						children: ["Document ID: ", /* @__PURE__ */ jsx("span", {
+							className: "font-mono",
+							children: props.documentHeader.id
+						})]
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						className: "text-sm text-gray-600",
+						children: ["Type: ", /* @__PURE__ */ jsx("span", {
+							className: "font-mono",
+							children: props.documentHeader.documentType
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "mt-3 flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-sm text-gray-600",
+							children: "Bump version to:"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							placeholder: "0.2.0",
+							onKeyDown: (e) => {
+								if (e.key === "Enter") {
+									const v = e.currentTarget.value.trim();
+									if (v) props.bumpVersion(v);
+									e.currentTarget.value = "";
+								}
+							},
+							className: "rounded border p-1 font-mono text-sm"
+						})]
+					})
+				]
+			})]
 		})
 	] });
 }
-const KNOWN_RESOURCES = [
-	"vetra-agent-s",
-	"vetra-agent-m",
-	"vetra-agent-l",
-	"vetra-agent-xl",
-	"vetra-agent-xxl"
-];
 function DeploymentSection(props) {
 	const [newResource, setNewResource] = useState("");
-	const { deployment } = props;
-	const customResources = deployment.supportedResources.filter((r) => !KNOWN_RESOURCES.includes(r));
-	const handleAddCustom = () => {
-		const resource = newResource.trim();
-		if (resource) {
-			props.addSupportedResource(resource);
-			setNewResource("");
-		}
-	};
 	return /* @__PURE__ */ jsxs("section", {
 		className: "my-6",
 		children: [
@@ -1640,17 +2239,17 @@ function DeploymentSection(props) {
 				children: "Deployment"
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "my-3 rounded border border-gray-200 bg-white p-4 space-y-3",
+				className: "my-3 rounded border border-gray-200 bg-white p-4",
 				children: [/* @__PURE__ */ jsx(Toggle, {
-					label: "Proxy",
-					checked: deployment.proxyEnabled,
-					hint: "Run a reverse proxy that exposes all service endpoints through a single port",
-					onChange: props.setProxyEnabled
+					label: "Proxy enabled",
+					checked: props.deployment.proxyEnabled,
+					onChange: props.setProxyEnabled,
+					hint: "Embedded reverse proxy"
 				}), /* @__PURE__ */ jsx(Toggle, {
-					label: "Observability",
-					checked: deployment.observabilityEnabled,
-					hint: "Wire @powerhousedao/ph-clint-observability into the generated CLI. End-user opts in at runtime; env vars: {CLINAME}_SENTRY_DSN, {CLINAME}_OTEL_EXPORTER_OTLP_ENDPOINT.",
-					onChange: props.setObservabilityEnabled
+					label: "Observability enabled",
+					checked: props.deployment.observabilityEnabled,
+					onChange: props.setObservabilityEnabled,
+					hint: "Sentry + OpenTelemetry"
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -1658,67 +2257,43 @@ function DeploymentSection(props) {
 				children: [
 					/* @__PURE__ */ jsx("h4", {
 						className: "text-base font-semibold",
-						children: "Supported Resources"
-					}),
-					/* @__PURE__ */ jsx("p", {
-						className: "text-sm text-gray-600",
-						children: "Resource tiers this project supports."
+						children: "Supported resources"
 					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "mt-3 space-y-1",
-						children: KNOWN_RESOURCES.map((resource) => {
-							const checked = deployment.supportedResources.includes(resource);
-							return /* @__PURE__ */ jsxs("label", {
-								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ jsx("input", {
-									type: "checkbox",
-									checked,
-									onChange: () => {
-										if (checked) props.removeSupportedResource(resource);
-										else props.addSupportedResource(resource);
-									}
-								}), /* @__PURE__ */ jsx("span", {
-									className: "font-mono text-sm",
-									children: resource
-								})]
-							}, resource);
-						})
-					}),
-					customResources.length > 0 && /* @__PURE__ */ jsxs("div", {
-						className: "mt-3 border-t border-gray-100 pt-3",
-						children: [/* @__PURE__ */ jsx("h5", {
-							className: "text-sm font-medium text-gray-600",
-							children: "Custom resources"
-						}), /* @__PURE__ */ jsx("ul", {
-							className: "mt-1 space-y-1",
-							children: customResources.map((resource) => /* @__PURE__ */ jsxs("li", {
-								className: "flex items-center gap-2 text-sm",
-								children: [/* @__PURE__ */ jsx("span", {
-									className: "font-mono",
-									children: resource
-								}), /* @__PURE__ */ jsx("button", {
-									className: "text-xs text-red-400 hover:text-red-600",
-									onClick: () => props.removeSupportedResource(resource),
-									children: "x"
-								})]
-							}, resource))
-						})]
+					/* @__PURE__ */ jsx("ul", {
+						className: "my-2 space-y-1",
+						children: props.deployment.supportedResources.map((r) => /* @__PURE__ */ jsxs("li", {
+							className: "flex items-center justify-between text-sm",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "font-mono",
+								children: r
+							}), /* @__PURE__ */ jsx("button", {
+								className: "text-red-500 hover:text-red-700",
+								onClick: () => props.removeSupportedResource(r),
+								children: "Remove"
+							})]
+						}, r))
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "mt-3 flex items-center gap-2",
+						className: "mt-2 flex items-center gap-2",
 						children: [/* @__PURE__ */ jsx("input", {
 							type: "text",
-							placeholder: "custom-resource",
+							placeholder: "vetra-agent-...",
 							value: newResource,
 							onChange: (e) => setNewResource(e.target.value),
 							onKeyDown: (e) => {
-								if (e.key === "Enter") handleAddCustom();
+								if (e.key === "Enter" && newResource.trim()) {
+									props.addSupportedResource(newResource.trim());
+									setNewResource("");
+								}
 							},
-							className: "flex-1 rounded border p-2 font-mono text-sm"
+							className: "flex-1 rounded border p-1 font-mono text-sm"
 						}), /* @__PURE__ */ jsx("button", {
-							className: "rounded bg-blue-500 px-3 py-2 text-sm text-white hover:bg-blue-600 disabled:opacity-50",
+							className: "rounded bg-blue-500 px-2 py-1 text-xs text-white hover:bg-blue-600 disabled:opacity-50",
 							disabled: !newResource.trim(),
-							onClick: handleAddCustom,
+							onClick: () => {
+								props.addSupportedResource(newResource.trim());
+								setNewResource("");
+							},
 							children: "Add"
 						})]
 					})
@@ -1728,17 +2303,13 @@ function DeploymentSection(props) {
 	});
 }
 function PackagesSection(props) {
-	const [newPkgName, setNewPkgName] = useState("");
+	const [newPackage, setNewPackage] = useState("");
 	return /* @__PURE__ */ jsxs("section", {
 		className: "my-6",
 		children: [
 			/* @__PURE__ */ jsx("h3", {
 				className: "text-lg font-semibold",
-				children: "Powerhouse Packages"
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "text-sm text-gray-600",
-				children: "Reactor packages and their document types. Managed packages are framework-controlled."
+				children: "Reactor Packages"
 			}),
 			props.packages.map((pkg) => /* @__PURE__ */ jsx(PackageCard, {
 				pkg,
@@ -1747,25 +2318,25 @@ function PackagesSection(props) {
 				removePackage: props.removePackage
 			}, pkg.id)),
 			/* @__PURE__ */ jsxs("div", {
-				className: "mt-4 flex items-center gap-2",
+				className: "my-3 flex items-center gap-2",
 				children: [/* @__PURE__ */ jsx("input", {
 					type: "text",
-					placeholder: "@org/package-name",
-					value: newPkgName,
-					onChange: (e) => setNewPkgName(e.target.value),
+					placeholder: "@scope/package-name",
+					value: newPackage,
+					onChange: (e) => setNewPackage(e.target.value),
 					onKeyDown: (e) => {
-						if (e.key === "Enter" && newPkgName.trim()) {
-							props.addPackage(newPkgName.trim());
-							setNewPkgName("");
+						if (e.key === "Enter" && newPackage.trim()) {
+							props.addPackage(newPackage.trim());
+							setNewPackage("");
 						}
 					},
 					className: "flex-1 rounded border p-2 font-mono text-sm"
 				}), /* @__PURE__ */ jsx("button", {
 					className: "rounded bg-blue-500 px-3 py-2 text-sm text-white hover:bg-blue-600 disabled:opacity-50",
-					disabled: !newPkgName.trim(),
+					disabled: !newPackage.trim(),
 					onClick: () => {
-						props.addPackage(newPkgName.trim());
-						setNewPkgName("");
+						props.addPackage(newPackage.trim());
+						setNewPackage("");
 					},
 					children: "Add Package"
 				})]
@@ -1775,8 +2346,6 @@ function PackagesSection(props) {
 }
 function PackageCard(props) {
 	const [newDocType, setNewDocType] = useState("");
-	const { pkg } = props;
-	const hasWildcard = pkg.documentTypes.includes("*/*");
 	return /* @__PURE__ */ jsxs("div", {
 		className: "my-3 rounded border border-gray-200 bg-white p-4",
 		children: [
@@ -1785,58 +2354,58 @@ function PackageCard(props) {
 				children: [/* @__PURE__ */ jsxs("div", { children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "font-mono font-semibold",
-						children: pkg.packageName
+						children: props.pkg.packageName
 					}),
-					pkg.managed && /* @__PURE__ */ jsx("span", {
+					props.pkg.managed && /* @__PURE__ */ jsx("span", {
 						className: "ml-2 rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-700",
 						children: "managed"
 					}),
-					pkg.version && /* @__PURE__ */ jsxs("span", {
-						className: "ml-2 text-xs text-gray-500",
-						children: ["v", pkg.version]
+					props.pkg.version && /* @__PURE__ */ jsxs("span", {
+						className: "ml-2 text-sm text-gray-500",
+						children: ["v", props.pkg.version]
 					})
-				] }), !pkg.managed && /* @__PURE__ */ jsx("button", {
+				] }), !props.pkg.managed && /* @__PURE__ */ jsx("button", {
 					className: "text-sm text-red-500 hover:text-red-700",
-					onClick: () => props.removePackage(pkg.id),
-					children: "Remove"
+					onClick: () => props.removePackage(props.pkg.id),
+					children: "Remove Package"
 				})]
 			}),
-			pkg.documentTypes.length > 0 && /* @__PURE__ */ jsx("ul", {
-				className: "mt-2 space-y-1",
-				children: pkg.documentTypes.map((dt) => /* @__PURE__ */ jsxs("li", {
-					className: "flex items-center gap-2 text-sm",
+			/* @__PURE__ */ jsx("ul", {
+				className: "my-2 space-y-1",
+				children: props.pkg.documentTypes.map((dt) => /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center justify-between text-sm",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "font-mono",
-						children: dt === "*/*" ? "All document models" : dt
+						children: dt
 					}), /* @__PURE__ */ jsx("button", {
-						className: "text-xs text-red-400 hover:text-red-600",
-						onClick: () => props.removeDocType(pkg.id, dt),
-						children: "x"
+						className: "text-red-500 hover:text-red-700",
+						onClick: () => props.removeDocType(props.pkg.id, dt),
+						children: "×"
 					})]
 				}, dt))
 			}),
-			!hasWildcard && /* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsxs("div", {
 				className: "mt-2 flex items-center gap-2",
 				children: [/* @__PURE__ */ jsx("input", {
 					type: "text",
-					placeholder: "org/document-type",
+					placeholder: "org/doc-type or */*",
 					value: newDocType,
 					onChange: (e) => setNewDocType(e.target.value),
 					onKeyDown: (e) => {
 						if (e.key === "Enter" && newDocType.trim()) {
-							props.addDocType(pkg.id, newDocType.trim());
+							props.addDocType(props.pkg.id, newDocType.trim());
 							setNewDocType("");
 						}
 					},
 					className: "flex-1 rounded border p-1 font-mono text-sm"
 				}), /* @__PURE__ */ jsx("button", {
-					className: "text-sm text-blue-500 hover:text-blue-700 disabled:opacity-50",
+					className: "rounded bg-blue-500 px-2 py-1 text-xs text-white hover:bg-blue-600 disabled:opacity-50",
 					disabled: !newDocType.trim(),
 					onClick: () => {
-						props.addDocType(pkg.id, newDocType.trim());
+						props.addDocType(props.pkg.id, newDocType.trim());
 						setNewDocType("");
 					},
-					children: "+ doc type"
+					children: "Add Doc Type"
 				})]
 			})
 		]
@@ -1844,16 +2413,11 @@ function PackageCard(props) {
 }
 function StatusBadge(props) {
 	return /* @__PURE__ */ jsx("span", {
-		className: `rounded px-2 py-0.5 text-xs ${{
-			Pending: "bg-yellow-100 text-yellow-700",
-			InProgress: "bg-blue-100 text-blue-700",
-			Succeeded: "bg-green-100 text-green-700",
-			Failed: "bg-red-100 text-red-700"
-		}[props.status] ?? "bg-gray-100 text-gray-700"}`,
+		className: `rounded px-2 py-0.5 text-xs ${props.status === "Succeeded" ? "bg-green-100 text-green-700" : props.status === "Failed" ? "bg-red-100 text-red-700" : props.status === "InProgress" ? "bg-amber-100 text-amber-700" : "bg-gray-100 text-gray-700"}`,
 		children: props.status
 	});
 }
 //#endregion
 export { Editor as default };
 
-//# sourceMappingURL=editor-DL0W2XOS.js.map
+//# sourceMappingURL=editor-CAZmaheq.js.map