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

package/dist/browser/{editor-DL0W2XOS.js → editor-Z7QJIYOp.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, gr as undo, kr as generateId, pr as redo } from "./module-BZ6W31hV.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-3b5ZHznW.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";
@@ -646,6 +646,13 @@ const POWERHOUSE_LEVELS = [
 		description: "Web UI for document management"
 	}
 ];
+/** Patch-bump a semver-ish version string: 0.0.1 → 0.0.2. Falls back to "<version>.1" when unparseable. */
+function bumpPatch(version) {
+	const m = /^(\d+)\.(\d+)\.(\d+)/.exec(version);
+	if (!m) return `${version}.1`;
+	const [, major, minor, patch] = m;
+	return `${major}.${minor}.${Number(patch) + 1}`;
+}
 function TextField(props) {
 	return /* @__PURE__ */ jsxs("label", {
 		className: props.compact ? "my-1 block" : "my-3 block",
@@ -689,11 +696,37 @@ function Toggle(props) {
 		]
 	});
 }
+const TAB_LABELS = [
+	{
+		value: "cli",
+		label: "CLI"
+	},
+	{
+		value: "agents",
+		label: "Agents"
+	},
+	{
+		value: "profiles",
+		label: "Profiles"
+	},
+	{
+		value: "skills",
+		label: "Skills"
+	},
+	{
+		value: "powerhouse",
+		label: "Powerhouse"
+	},
+	{
+		value: "publish",
+		label: "Publish"
+	}
+];
 function Editor() {
 	const [document, dispatch] = useSelectedPhClintProjectDocument();
 	const state = document.state.global;
 	const { powerhouse, mastra, routine } = state.features;
-	const [activeTab, setActiveTab] = useState("spec");
+	const [activeTab, setActiveTab] = useState("cli");
 	const setPackageIdentifier = (identifier) => dispatch(actions.setPackageIdentifier({ identifier }));
 	const setVersion = (version) => dispatch(actions.setVersion({ version }));
 	const setDescription = (description) => dispatch(actions.setDescription({ description }));
@@ -745,14 +778,28 @@ function Editor() {
 		id: generateId(),
 		timestamp: (/* @__PURE__ */ new Date()).toISOString()
 	}));
-	const setAgentId = (agentId) => dispatch(actions.setAgentId({ agentId }));
-	const setAgentName = (agentName) => dispatch(actions.setAgentName({ agentName }));
-	const addModel = (id, isDefault) => dispatch(actions.addModel({
+	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,
-		isDefault
+		name
 	}));
+	const setSubAgentDescription = (id, description) => dispatch(actions.setSubAgentDescription({
+		id,
+		description
+	}));
+	const addModel = (id) => dispatch(actions.addModel({ id }));
 	const removeModel = (id) => dispatch(actions.removeModel({ id }));
-	const setDefaultModel = (id) => dispatch(actions.setDefaultModel({ id }));
 	const addProfile = (id, title, content, insertBefore) => dispatch(actions.addProfile({
 		id,
 		title,
@@ -769,9 +816,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 }));
@@ -788,37 +866,15 @@ function Editor() {
 					className: "mt-4 text-xl font-bold",
 					children: "ph-clint Project Spec"
 				}),
-				/* @__PURE__ */ jsxs("nav", {
+				/* @__PURE__ */ jsx("nav", {
 					className: "my-4 flex border-b border-gray-200",
-					children: [
-						/* @__PURE__ */ jsx("button", {
-							className: tabClasses("spec"),
-							onClick: () => setActiveTab("spec"),
-							children: "CLI"
-						}),
-						/* @__PURE__ */ jsx("button", {
-							className: tabClasses("agent"),
-							onClick: () => setActiveTab("agent"),
-							children: "Agent"
-						}),
-						/* @__PURE__ */ jsx("button", {
-							className: tabClasses("powerhouse"),
-							onClick: () => setActiveTab("powerhouse"),
-							children: "Powerhouse"
-						}),
-						/* @__PURE__ */ jsx("button", {
-							className: tabClasses("skills"),
-							onClick: () => setActiveTab("skills"),
-							children: "Skills"
-						}),
-						/* @__PURE__ */ jsx("button", {
-							className: tabClasses("publish"),
-							onClick: () => setActiveTab("publish"),
-							children: "Publish"
-						})
-					]
+					children: TAB_LABELS.map((t) => /* @__PURE__ */ jsx("button", {
+						className: tabClasses(t.value),
+						onClick: () => setActiveTab(t.value),
+						children: t.label
+					}, t.value))
 				}),
-				activeTab === "spec" && /* @__PURE__ */ jsx(SpecTab, {
+				activeTab === "cli" && /* @__PURE__ */ jsx(CliTab, {
 					state,
 					powerhouse,
 					mastra,
@@ -829,25 +885,43 @@ function Editor() {
 					setDescription,
 					setPowerhouseLevel,
 					toggleMastra,
-					toggleRoutine
-				}),
-				activeTab === "agent" && /* @__PURE__ */ jsx(AgentTab, {
-					mastra,
-					isAboveDisabled,
-					setAgentId,
-					setAgentName,
-					setAgentDescription,
-					setAgentImage,
-					clearAgentImage,
+					toggleRoutine,
 					setEnableChat,
 					addModel,
-					removeModel,
-					setDefaultModel,
+					removeModel
+				}),
+				activeTab === "agents" && /* @__PURE__ */ jsx(AgentsTab, {
+					mastra,
+					setMainAgentName,
+					setMainAgentDescription,
+					clearMainAgentDescription,
+					setMainAgentImage,
+					clearMainAgentImage,
+					addSubAgent,
+					removeSubAgent,
+					setSubAgentName,
+					setSubAgentDescription,
+					setAgentModel,
+					addAgentProfileRef,
+					removeAgentProfileRef,
+					reorderAgentProfileRefs,
+					addAgentSkill,
+					removeAgentSkill,
+					addAgentToolPattern,
+					removeAgentToolPattern
+				}),
+				activeTab === "profiles" && /* @__PURE__ */ jsx(ProfilesTab, {
+					mastra,
 					addProfile,
 					updateProfile,
 					removeProfile,
 					reorderProfiles
 				}),
+				activeTab === "skills" && /* @__PURE__ */ jsx(SkillsTab, {
+					skills: state.externalSkills,
+					addSkill,
+					removeSkill
+				}),
 				activeTab === "powerhouse" && /* @__PURE__ */ jsx(PowerhouseTab, {
 					packages: state.packages,
 					isAboveDisabled,
@@ -856,11 +930,6 @@ function Editor() {
 					addDocType,
 					removeDocType
 				}),
-				activeTab === "skills" && /* @__PURE__ */ jsx(SkillsTab, {
-					skills: state.externalSkills,
-					addSkill,
-					removeSkill
-				}),
 				activeTab === "publish" && /* @__PURE__ */ jsx(PublishTab, {
 					version: state.version,
 					publishHistory: state.publishHistory,
@@ -879,8 +948,8 @@ function Editor() {
 		})]
 	});
 }
-function SpecTab(props) {
-	const { state } = props;
+function CliTab(props) {
+	const { state, mastra } = props;
 	const packageIdentifier = `${state.scope ? state.scope + "/" : ""}${state.name ?? ""}`;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("section", {
@@ -957,14 +1026,32 @@ function SpecTab(props) {
 						})
 					]
 				}),
-				/* @__PURE__ */ jsx("div", {
+				/* @__PURE__ */ jsxs("div", {
 					className: "my-4 rounded border border-gray-200 bg-white p-4",
-					children: /* @__PURE__ */ jsx(Toggle, {
+					children: [/* @__PURE__ */ jsx(Toggle, {
 						label: "Mastra",
-						checked: props.mastra.enabled,
+						checked: mastra.enabled,
 						hint: "AI agent framework",
 						onChange: props.toggleMastra
-					})
+					}), mastra.enabled && /* @__PURE__ */ jsxs("div", {
+						className: "mt-4 space-y-4 border-t border-gray-100 pt-4",
+						children: [/* @__PURE__ */ jsx(ModelsSection, {
+							models: mastra.models,
+							main: mastra.mainAgent,
+							subAgents: mastra.subAgents,
+							addModel: props.addModel,
+							removeModel: props.removeModel
+						}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", {
+							className: "text-sm font-semibold text-gray-700",
+							children: "Common"
+						}), /* @__PURE__ */ jsx(Toggle, {
+							label: "Enable Chat",
+							checked: mastra.common.enableChat,
+							disabled: !props.isAboveDisabled,
+							hint: props.isAboveDisabled ? "Chat session integration via clint-common" : "Requires Powerhouse to be enabled",
+							onChange: props.setEnableChat
+						})] })]
+					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "my-4 rounded border border-gray-200 bg-white p-4",
@@ -979,115 +1066,535 @@ function SpecTab(props) {
 		})
 	] });
 }
-function PowerhouseTab(props) {
-	if (!props.isAboveDisabled) 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: "Powerhouse"
-		}), /* @__PURE__ */ jsx("p", {
-			className: "mt-2",
-			children: "Enable Powerhouse in the Spec tab (set level to Reactor or above) to manage packages."
-		})]
-	});
-	return /* @__PURE__ */ jsx(PackagesSection, {
-		packages: props.packages,
-		addPackage: props.addPackage,
-		removePackage: props.removePackage,
-		addDocType: props.addDocType,
-		removeDocType: props.removeDocType
-	});
-}
-function AgentTab(props) {
+function AgentsTab(props) {
 	const { mastra } = props;
-	if (!mastra.enabled) return /* @__PURE__ */ jsxs("section", {
+	const main = mastra.mainAgent;
+	const [showAddForm, setShowAddForm] = useState(false);
+	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"
+			children: "Agents"
 		}), /* @__PURE__ */ jsx("p", {
 			className: "mt-2",
-			children: "Enable Mastra in the Spec tab to configure the agent."
+			children: "Enable Mastra in the CLI tab to configure agents."
 		})]
 	});
+	const allAgentIds = [main.id, ...mastra.subAgents.map((s) => s.id)];
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(MainAgentCard, {
+			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
+		}),
+		mastra.subAgents.map((sub) => /* @__PURE__ */ jsx(SubAgentCard, {
+			sub,
+			models: mastra.models,
+			profiles: mastra.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)),
 		/* @__PURE__ */ jsx("section", {
 			className: "my-6",
-			children: /* @__PURE__ */ jsxs("div", {
-				style: {
-					display: "flex",
-					gap: "1.5rem"
+			children: showAddForm ? /* @__PURE__ */ jsx(AddSubAgentForm, {
+				models: mastra.models,
+				existingAgentIds: allAgentIds,
+				onAdd: (id, name, description, modelId) => {
+					props.addSubAgent(id, name, description, modelId);
+					setShowAddForm(false);
 				},
-				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", {
+				onCancel: () => setShowAddForm(false)
+			}) : /* @__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: mastra.models.length === 0,
+				title: mastra.models.length === 0 ? "Add a model first (CLI tab → Mastra)" : "",
+				onClick: () => setShowAddForm(true),
+				children: "+ Add Sub-agent"
+			})
+		})
+	] });
+}
+function MainAgentCard(props) {
+	const { main } = props;
+	const [expanded, setExpanded] = useState(true);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "my-3 rounded border border-gray-200 bg-white p-4",
+		children: [
+			/* @__PURE__ */ jsx("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: main.id
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-semibold",
+							children: main.name
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "rounded bg-blue-100 px-2 py-0.5 text-xs font-semibold text-blue-700",
+							children: "Main"
+						})
+					]
+				})
+			}),
+			main.description && /* @__PURE__ */ jsx("p", {
+				className: "ml-7 text-sm text-gray-600",
+				children: main.description
+			}),
+			expanded && /* @__PURE__ */ jsxs("div", {
+				className: "mt-4 space-y-3 border-t border-gray-100 pt-4",
+				children: [/* @__PURE__ */ jsxs("div", {
 					style: {
-						flex: 1,
-						minWidth: 0
+						display: "flex",
+						gap: "1.5rem"
 					},
-					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
+					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(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 AddSubAgentForm(props) {
+	const [id, setId] = useState("");
+	const [name, setName] = useState("");
+	const [description, setDescription] = useState("");
+	const [modelId, setModelId] = useState(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__ */ jsx("option", {
+						value: m.id,
+						children: m.id
+					}, 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: "Agent Description",
-						value: mastra.agentDescription ?? "",
-						placeholder: "A brief description of what this agent does",
-						onCommit: props.setAgentDescription
+						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__ */ jsx("option", {
+						value: m.id,
+						children: m.id
+					}, 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__ */ jsx("hr", {}),
-		/* @__PURE__ */ jsx(ModelsSection, {
-			models: mastra.models,
-			addModel: props.addModel,
-			removeModel: props.removeModel,
-			setDefaultModel: props.setDefaultModel
+		/* @__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"
+			})]
 		}),
-		/* @__PURE__ */ jsx("hr", {}),
-		/* @__PURE__ */ jsx(ProfilesSection, {
-			profiles: mastra.profiles,
-			addProfile: props.addProfile,
-			updateProfile: props.updateProfile,
-			removeProfile: props.removeProfile,
-			reorderProfiles: props.reorderProfiles
+		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("hr", {}),
-		/* @__PURE__ */ jsxs("section", {
-			className: "my-6",
-			children: [/* @__PURE__ */ jsx("h3", {
-				className: "text-lg font-semibold",
-				children: "Common"
-			}), /* @__PURE__ */ jsx("div", {
-				className: "my-3 rounded border border-gray-200 bg-white p-4",
-				children: /* @__PURE__ */ jsx(Toggle, {
-					label: "Enable Chat",
-					checked: mastra.common.enableChat,
-					disabled: !props.isAboveDisabled,
-					hint: props.isAboveDisabled ? "Chat session integration via clint-common" : "Requires Powerhouse to be enabled",
-					onChange: props.setEnableChat
-				})
+		/* @__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"
 			})]
 		})
 	] });
@@ -1192,6 +1699,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) {
@@ -1199,95 +1712,113 @@ function ModelsSection(props) {
 			setNewModelId("");
 		}
 	};
-	return /* @__PURE__ */ jsxs("section", {
-		className: "my-6",
-		children: [
-			/* @__PURE__ */ jsx("h3", {
-				className: "text-lg font-semibold",
-				children: "Models"
-			}),
-			/* @__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."
-			}),
-			props.models.length > 0 && /* @__PURE__ */ jsxs("table", {
-				className: "mt-3 w-full text-sm",
-				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
-					className: "border-b text-left text-gray-500",
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx("h4", {
+			className: "text-sm font-semibold text-gray-700",
+			children: "Models"
+		}),
+		/* @__PURE__ */ jsxs("p", {
+			className: "text-xs text-gray-500",
+			children: [
+				"Provider/model format (e.g. ",
+				/* @__PURE__ */ jsx("code", { children: "anthropic/claude-sonnet-4-5" }),
+				"). Each agent picks one from this list."
+			]
+		}),
+		props.models.length > 0 && /* @__PURE__ */ jsxs("table", {
+			className: "mt-2 w-full text-sm",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+				className: "border-b text-left text-gray-500",
+				children: [
+					/* @__PURE__ */ jsx("th", {
+						className: "py-1",
+						children: "Model"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "py-1",
+						children: "Used by"
+					}),
+					/* @__PURE__ */ jsx("th", { className: "py-1" })
+				]
+			}) }), /* @__PURE__ */ jsx("tbody", { children: props.models.map((m) => {
+				const users = usersOf(m.id);
+				const inUse = users.length > 0;
+				return /* @__PURE__ */ jsxs("tr", {
+					className: "border-b border-gray-100",
 					children: [
-						/* @__PURE__ */ jsx("th", {
-							className: "py-1",
-							children: "Default"
+						/* @__PURE__ */ jsx("td", {
+							className: "py-2 font-mono",
+							children: m.id
 						}),
-						/* @__PURE__ */ jsx("th", {
-							className: "py-1",
-							children: "Model"
+						/* @__PURE__ */ jsx("td", {
+							className: "py-2 text-xs text-gray-500",
+							children: users.length === 0 ? /* @__PURE__ */ jsx("em", { children: "—" }) : users.join(", ")
 						}),
-						/* @__PURE__ */ jsx("th", {
-							className: "py-1",
-							children: "Provider"
-						}),
-						/* @__PURE__ */ jsx("th", { className: "py-1" })
-					]
-				}) }), /* @__PURE__ */ jsx("tbody", { children: props.models.map((m) => {
-					const provider = m.id.split("/")[0];
-					return /* @__PURE__ */ jsxs("tr", {
-						className: "border-b border-gray-100",
-						children: [
-							/* @__PURE__ */ jsx("td", {
-								className: "py-2",
-								children: /* @__PURE__ */ jsx("input", {
-									type: "radio",
-									name: "default-model",
-									checked: m.isDefault,
-									onChange: () => props.setDefaultModel(m.id)
-								})
-							}),
-							/* @__PURE__ */ jsx("td", {
-								className: "py-2 font-mono",
-								children: m.id
-							}),
-							/* @__PURE__ */ jsx("td", {
-								className: "py-2 text-gray-500",
-								children: provider
-							}),
-							/* @__PURE__ */ jsx("td", {
-								className: "py-2 text-right",
-								children: /* @__PURE__ */ jsx("button", {
-									className: "text-red-500 hover:text-red-700",
-									onClick: () => props.removeModel(m.id),
-									children: "Remove"
-								})
+						/* @__PURE__ */ jsx("td", {
+							className: "py-2 text-right",
+							children: /* @__PURE__ */ jsx("button", {
+								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"
 							})
-						]
-					}, m.id);
-				}) })]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "mt-3 flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx("input", {
-					type: "text",
-					placeholder: "provider/model-name",
-					value: newModelId,
-					onChange: (e) => setNewModelId(e.target.value),
-					onKeyDown: (e) => {
-						if (e.key === "Enter") handleAdd();
-					},
-					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: !newModelId.trim(),
-					onClick: handleAdd,
-					children: "Add Model"
-				})]
-			})
-		]
+						})
+					]
+				}, m.id);
+			}) })]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "mt-2 flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "text",
+				placeholder: "provider/model-name",
+				value: newModelId,
+				onChange: (e) => setNewModelId(e.target.value),
+				onKeyDown: (e) => {
+					if (e.key === "Enter") handleAdd();
+				},
+				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: !newModelId.trim(),
+				onClick: handleAdd,
+				children: "Add Model"
+			})]
+		})
+	] });
+}
+function ProfilesTab(props) {
+	if (!props.mastra.enabled) 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: "Profiles"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "mt-2",
+			children: "Enable Mastra in the CLI tab to manage agent profiles."
+		})]
+	});
+	return /* @__PURE__ */ jsx(ProfilesSection, {
+		profiles: props.mastra.profiles,
+		main: props.mastra.mainAgent,
+		subAgents: props.mastra.subAgents,
+		addProfile: props.addProfile,
+		updateProfile: props.updateProfile,
+		removeProfile: props.removeProfile,
+		reorderProfiles: props.reorderProfiles
 	});
 }
 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 +1850,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", {
@@ -1513,8 +2058,28 @@ function ExternalSkillsSection(props) {
 		]
 	});
 }
+function PowerhouseTab(props) {
+	if (!props.isAboveDisabled) 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: "Powerhouse"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "mt-2",
+			children: "Enable Powerhouse in the CLI tab (set level to Reactor or above) to manage packages."
+		})]
+	});
+	return /* @__PURE__ */ jsx(PackagesSection, {
+		packages: props.packages,
+		addPackage: props.addPackage,
+		removePackage: props.removePackage,
+		addDocType: props.addDocType,
+		removeDocType: props.removeDocType
+	});
+}
 function PublishTab(props) {
 	const recentHistory = props.publishHistory.slice(-5).reverse();
+	const nextPatch = bumpPatch(props.version);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("section", {
 			className: "my-6",
@@ -1525,35 +2090,56 @@ function PublishTab(props) {
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "my-3 rounded border border-gray-200 bg-white p-4",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-4",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "text-sm text-gray-600",
-							children: "Current version:"
-						}), /* @__PURE__ */ jsx("span", {
-							className: "font-mono font-semibold",
-							children: props.version
-						})]
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "mt-4 flex items-center gap-2",
-						children: [
-							/* @__PURE__ */ jsx("button", {
-								className: "rounded bg-gray-600 px-3 py-2 text-sm text-white hover:bg-gray-700",
-								onClick: props.publishDev,
-								children: "Publish Dev"
-							}),
-							/* @__PURE__ */ jsx("button", {
-								className: "rounded bg-amber-600 px-3 py-2 text-sm text-white hover:bg-amber-700",
-								onClick: props.publishStaging,
-								children: "Publish Staging"
-							}),
-							/* @__PURE__ */ jsx("button", {
-								className: "rounded bg-green-600 px-3 py-2 text-sm text-white hover:bg-green-700",
-								onClick: props.publishProduction,
-								children: "Publish Production"
-							})
-						]
-					})]
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-4",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-sm text-gray-600",
+								children: "Current version:"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "font-mono font-semibold",
+								children: props.version
+							})]
+						}),
+						/* @__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: nextPatch,
+								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"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "mt-4 flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									className: "rounded bg-gray-600 px-3 py-2 text-sm text-white hover:bg-gray-700",
+									onClick: props.publishDev,
+									children: "Publish Dev"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									className: "rounded bg-amber-600 px-3 py-2 text-sm text-white hover:bg-amber-700",
+									onClick: props.publishStaging,
+									children: "Publish Staging"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									className: "rounded bg-green-600 px-3 py-2 text-sm text-white hover:bg-green-700",
+									onClick: props.publishProduction,
+									children: "Publish Production"
+								})
+							]
+						})
+					]
 				}),
 				recentHistory.length > 0 && /* @__PURE__ */ jsxs("div", {
 					className: "mt-3",
@@ -1594,44 +2180,31 @@ 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
+					})]
+				})]
+			})]
 		})
 	] });
 }
-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 +2213,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 +2231,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."
-					}),
-					/* @__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);
-						})
+						children: "Supported resources"
 					}),
-					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 +2277,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 +2292,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 +2320,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 +2328,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 +2387,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-Z7QJIYOp.js.map