bazilion 0.12.2 → 0.14.0

package/dist/web/server/assets/{_id-BHYLL8M-.js → _id-BeKhPKw3.js}

@@ -1,8 +1,10 @@
-import { t as Route } from "./_id-FcHdSocl.js";
-import { r as PageShell } from "./Page-LENulSXY.js";
-import { t as AgentTabs } from "./AgentTabs-aXdsiiMp.js";
+import { t as Route } from "./_id-sNu5aXZt.js";
+import { i as SectionCard, r as PageShell } from "./Page-Bz-ydB8j.js";
+import { t as AgentTabs } from "./AgentTabs-Dq8hDM2Q.js";
 import { t as AgentAvatar } from "./AgentAvatar-8gTAy_tP.js";
-import { t as ChatPane } from "./ChatPane-Ba5wTsVk.js";
+import { t as Button } from "./Button-Dsnw22OF.js";
+import { t as ChatPane } from "./ChatPane-CgSe7tsy.js";
+import { t as ConfirmDialog } from "./ConfirmDialog-C-MPYYSU.js";
 import { r as REASONING_LEVELS } from "./wire-constants-C8nBJcU3.js";
 import { useState } from "react";
 import { useRouter } from "@tanstack/react-router";
@@ -53,27 +55,40 @@ function AgentDetailPage() {
 	const { resolved, initialMessages, sessionHead, teams, skills, modelGroups, telegramConfigured } = Route.useLoaderData();
 	const search = Route.useSearch();
 	const router = useRouter();
+	const [confirmAction, setConfirmAction] = useState(null);
+	const [actionError, setActionError] = useState(null);
+	const settingsMode = search.mode === "settings";
 	async function archive() {
-		if (!confirm(`archive "${resolved.agent.name}"? (reversible)`)) return;
-		await fetch(`/api/agents/${resolved.agent.id}/archive`, { method: "POST" });
+		const response = await fetch(`/api/agents/${encodeURIComponent(resolved.agent.id)}/archive`, { method: "POST" });
+		if (!response.ok && response.status !== 204) {
+			const body = await response.json().catch(() => null);
+			throw new Error(body?.error ?? `Could not archive Agent (${response.status})`);
+		}
 		await router.invalidate();
 	}
 	async function unarchive() {
-		await fetch(`/api/agents/${resolved.agent.id}/unarchive`, { method: "POST" });
-		await router.invalidate();
+		setActionError(null);
+		try {
+			const response = await fetch(`/api/agents/${encodeURIComponent(resolved.agent.id)}/unarchive`, { method: "POST" });
+			if (!response.ok && response.status !== 204) {
+				const body = await response.json().catch(() => null);
+				throw new Error(body?.error ?? `Could not restore Agent (${response.status})`);
+			}
+			await router.invalidate();
+		} catch (error) {
+			setActionError(error instanceof Error ? error.message : String(error));
+		}
 	}
 	async function del() {
-		const msg = `Permanently delete agent "${resolved.agent.name}"?\n\nThis removes the DB rows (messages, triggers, skill attachments) AND the agent's on-disk directory (memory, templates, state, sessions). This cannot be undone.`;
-		if (!confirm(msg)) return;
 		const policyResponse = await fetch(`/api/teams/${encodeURIComponent(resolved.team.id)}/policy`);
-		if (!policyResponse.ok) {
-			alert("The current Team policy is unavailable. Nothing was deleted.");
-			return;
-		}
+		if (!policyResponse.ok) throw new Error("The current Team policy is unavailable. Nothing was deleted.");
 		const current = await policyResponse.json();
 		const res = await fetch(`/api/agents/${resolved.agent.id}?expectedTeamRevision=${current.teamPolicy.revision}`, { method: "DELETE" });
 		if (res.ok || res.status === 204) window.location.assign("/agents");
-		else alert(`failed: ${res.statusText}`);
+		else {
+			const body = await res.json().catch(() => null);
+			throw new Error(body?.error ?? `Could not delete Agent (${res.status})`);
+		}
 	}
 	return /* @__PURE__ */ jsxs(PageShell, { children: [
 		/* @__PURE__ */ jsxs("header", {
@@ -91,23 +106,26 @@ function AgentDetailPage() {
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-3",
+					className: "flex min-w-0 items-center gap-3",
 					children: [/* @__PURE__ */ jsx(AgentAvatar, {
 						identity: resolved.agent.identity,
 						size: 44
-					}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
-						className: "mb-0",
-						children: resolved.agent.name
-					}), (resolved.agent.identity?.creature || resolved.agent.identity?.vibe) && /* @__PURE__ */ jsx("p", {
-						className: "muted mt-0.5 text-sm",
-						children: [resolved.agent.identity?.creature, resolved.agent.identity?.vibe].filter(Boolean).join(" · ")
-					})] })]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsx("h1", {
+							className: "mb-0 break-words",
+							children: resolved.agent.name
+						}), (resolved.agent.identity?.creature || resolved.agent.identity?.vibe) && /* @__PURE__ */ jsx("p", {
+							className: "muted mt-0.5 text-sm",
+							children: [resolved.agent.identity?.creature, resolved.agent.identity?.vibe].filter(Boolean).join(" · ")
+						})]
+					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "mt-2 flex flex-wrap items-center gap-x-5 gap-y-2",
 					children: [
 						/* @__PURE__ */ jsxs(Tag, { children: [/* @__PURE__ */ jsx("span", {
-							className: "px-1.5 font-mono text-[0.95em] text-mocha select-all",
+							className: "min-w-0 break-all px-1.5 font-mono text-[0.95em] text-mocha select-all",
 							children: resolved.agent.id
 						}), /* @__PURE__ */ jsx(CopyButton, {
 							value: resolved.agent.id,
@@ -118,16 +136,20 @@ function AgentDetailPage() {
 							className: "ml-1",
 							children: resolved.agent.status
 						})] }),
-						/* @__PURE__ */ jsxs(Tag, { children: ["profile: ", /* @__PURE__ */ jsx("code", {
-							className: "ml-1 bg-transparent px-0",
-							children: resolved.profile.id
-						})] }),
+						/* @__PURE__ */ jsxs(Tag, { children: [
+							"profile:",
+							" ",
+							/* @__PURE__ */ jsx("code", {
+								className: "ml-1 min-w-0 break-all bg-transparent px-0",
+								children: resolved.profile.id
+							})
+						] }),
 						/* @__PURE__ */ jsxs(Tag, { children: [
 							"team:",
 							" ",
 							/* @__PURE__ */ jsx("a", {
 								href: `/teams/${encodeURIComponent(resolved.team.id)}`,
-								className: "ml-1 bg-transparent px-0 font-mono underline",
+								className: "ml-1 min-w-0 break-all bg-transparent px-0 font-mono underline",
 								children: resolved.team.id
 							}),
 							" ",
@@ -139,10 +161,14 @@ function AgentDetailPage() {
 								children: "shared memory →"
 							})
 						] }),
-						/* @__PURE__ */ jsxs(Tag, { children: ["model: ", /* @__PURE__ */ jsx("code", {
-							className: "ml-1 bg-transparent px-0",
-							children: resolved.model
-						})] }),
+						/* @__PURE__ */ jsxs(Tag, { children: [
+							"model:",
+							" ",
+							/* @__PURE__ */ jsx("code", {
+								className: "ml-1 min-w-0 break-all bg-transparent px-0",
+								children: resolved.model
+							})
+						] }),
 						/* @__PURE__ */ jsxs(Tag, { children: [
 							"reasoning:",
 							" ",
@@ -155,32 +181,27 @@ function AgentDetailPage() {
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "mt-3 flex flex-wrap gap-2",
-					children: [resolved.agent.status === "archived" ? /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: unarchive,
-						className: "ghost-btn",
-						children: "unarchive"
-					}) : /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: archive,
-						className: "ghost-btn",
-						children: "archive"
-					}), /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: del,
-						className: "ghost-btn border-[rgba(196,135,138,0.4)] text-danger hover:bg-[rgba(196,135,138,0.08)]",
-						children: "delete permanently"
+					children: [resolved.agent.status === "archived" ? /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						onClick: () => void unarchive(),
+						children: "Restore"
+					}) : /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						onClick: () => setConfirmAction("archive"),
+						children: "Archive"
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "danger",
+						onClick: () => setConfirmAction("delete"),
+						children: "Delete permanently"
 					})]
-				}),
-				/* @__PURE__ */ jsx(SettingsDetails, {
-					agentId: resolved.agent.id,
-					currentModelOverride: resolved.agent.modelOverride ?? null,
-					profileDefaultModel: resolved.profile.defaultModel,
-					currentReasoning: resolved.reasoningLevel,
-					modelGroups
 				})
 			]
 		}),
+		actionError && /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "err",
+			children: actionError
+		}),
 		resolved.agent.status === "archived" && /* @__PURE__ */ jsxs("div", {
 			className: "mb-4 rounded-md border border-frost bg-fawn/35 px-4 py-2 text-[0.9em] text-chocolate",
 			children: [
@@ -198,63 +219,99 @@ function AgentDetailPage() {
 		}),
 		/* @__PURE__ */ jsx(AgentTabs, {
 			agentId: resolved.agent.id,
-			active: "chat",
+			active: settingsMode ? "settings" : "chat",
 			archived: resolved.agent.status === "archived"
 		}),
-		/* @__PURE__ */ jsx(SectionTitle, { children: "Chat" }),
-		/* @__PURE__ */ jsx("div", {
-			className: "h-[70vh]",
-			children: /* @__PURE__ */ jsx(ChatPane, {
-				agentId: resolved.agent.id,
-				agentName: resolved.agent.name,
-				initialMessages,
-				initialSessionHead: sessionHead
+		!settingsMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(SectionTitle, { children: "Chat" }),
+			/* @__PURE__ */ jsx("div", {
+				className: "h-[70vh]",
+				children: /* @__PURE__ */ jsx(ChatPane, {
+					agentId: resolved.agent.id,
+					agentName: resolved.agent.name,
+					initialMessages,
+					initialSessionHead: sessionHead
+				})
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-2 text-[0.82em] text-mocha-light",
+				children: "chat history persists in bazilion across navigation and restarts."
 			})
-		}),
-		/* @__PURE__ */ jsx("p", {
-			className: "mt-2 text-[0.82em] text-mocha-light",
-			children: "chat history persists in bazilion across navigation and restarts."
-		}),
-		/* @__PURE__ */ jsxs("section", {
-			className: "mt-10",
+		] }) : /* @__PURE__ */ jsxs("div", {
+			className: "space-y-6",
 			children: [
-				/* @__PURE__ */ jsx(SectionTitle, { children: "Team" }),
-				/* @__PURE__ */ jsxs("p", {
-					className: "text-[0.9em] text-mocha-light",
+				/* @__PURE__ */ jsx(SettingsDetails, {
+					agentId: resolved.agent.id,
+					currentModelOverride: resolved.agent.modelOverride ?? null,
+					profileDefaultModel: resolved.profile.defaultModel,
+					currentReasoning: resolved.reasoningLevel,
+					modelGroups
+				}),
+				/* @__PURE__ */ jsxs(SectionCard, {
+					title: "Team",
+					description: "Move this permanent Agent between Team workspaces with an exact policy preview.",
 					children: [
-						"Current team: ",
-						/* @__PURE__ */ jsx("code", { children: resolved.team.id }),
-						" (",
-						resolved.team.name,
-						") —",
-						" ",
-						/* @__PURE__ */ jsx("code", { children: resolved.team.path }),
-						".",
-						" ",
-						/* @__PURE__ */ jsx("a", {
-							href: `/teams/${resolved.team.id}`,
-							children: "view / edit USER.md"
+						/* @__PURE__ */ jsx(SectionTitle, { children: "Team" }),
+						/* @__PURE__ */ jsxs("p", {
+							className: "text-[0.9em] text-mocha-light",
+							children: [
+								"Current team: ",
+								/* @__PURE__ */ jsx("code", { children: resolved.team.id }),
+								" (",
+								resolved.team.name,
+								") —",
+								" ",
+								/* @__PURE__ */ jsx("code", { children: resolved.team.path }),
+								".",
+								" ",
+								/* @__PURE__ */ jsx("a", {
+									href: `/teams/${resolved.team.id}`,
+									children: "view / edit USER.md"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx(MoveGroupForm, {
+							agentId: resolved.agent.id,
+							currentTeamId: resolved.team.id,
+							teams
 						})
 					]
 				}),
-				/* @__PURE__ */ jsx(MoveGroupForm, {
-					agentId: resolved.agent.id,
-					currentTeamId: resolved.team.id,
-					teams
+				/* @__PURE__ */ jsx(SectionCard, {
+					title: "Skills",
+					description: "Attach or detach prompt skills for this Agent.",
+					children: /* @__PURE__ */ jsx(SkillsTable, {
+						agentId: resolved.agent.id,
+						attached: new Set(resolved.skills),
+						all: skills
+					})
+				}),
+				telegramConfigured && /* @__PURE__ */ jsx(SectionCard, {
+					title: "Telegram",
+					description: "Bind this Agent to its Telegram topic and control mirroring.",
+					children: /* @__PURE__ */ jsx(TelegramSection, { agent: resolved.agent })
 				})
 			]
 		}),
-		/* @__PURE__ */ jsxs("section", {
-			className: "mt-10",
-			children: [/* @__PURE__ */ jsx(SectionTitle, { children: "Skills" }), /* @__PURE__ */ jsx(SkillsTable, {
-				agentId: resolved.agent.id,
-				attached: new Set(resolved.skills),
-				all: skills
-			})]
-		}),
-		telegramConfigured && /* @__PURE__ */ jsxs("section", {
-			className: "mt-10",
-			children: [/* @__PURE__ */ jsx(SectionTitle, { children: "Telegram" }), /* @__PURE__ */ jsx(TelegramSection, { agent: resolved.agent })]
+		/* @__PURE__ */ jsx(ConfirmDialog, {
+			open: confirmAction !== null,
+			onOpenChange: (open) => {
+				if (!open) setConfirmAction(null);
+			},
+			title: confirmAction === "delete" ? `Delete ${resolved.agent.name} permanently?` : `Archive ${resolved.agent.name}?`,
+			description: confirmAction === "delete" ? /* @__PURE__ */ jsx("p", { children: "This permanently removes messages, triggers, skill attachments, sessions, and the Agent's private on-disk directory. This cannot be undone." }) : /* @__PURE__ */ jsx("p", { children: "The Agent will stop receiving normal work and disappear from current lists. You can restore it later from “Show archived”." }),
+			confirmLabel: confirmAction === "delete" ? "Delete permanently" : "Archive Agent",
+			confirmVariant: confirmAction === "delete" ? "danger" : "primary",
+			onConfirm: async () => {
+				setActionError(null);
+				try {
+					if (confirmAction === "delete") await del();
+					else await archive();
+				} catch (error) {
+					setActionError(error instanceof Error ? error.message : String(error));
+					throw error;
+				}
+			}
 		})
 	] });
 }
@@ -266,7 +323,7 @@ function SectionTitle({ children }) {
 }
 function Tag({ children }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: "inline-flex items-center gap-1 rounded-full border border-frost bg-ivory px-3 py-0.5 text-[0.84em] text-mocha-light",
+		className: "inline-flex max-w-full min-w-0 flex-wrap items-center gap-1 break-all rounded-full border border-frost bg-ivory px-3 py-0.5 text-[0.84em] text-mocha-light",
 		children
 	});
 }
@@ -304,22 +361,20 @@ function SettingsDetails({ agentId, currentModelOverride, profileDefaultModel, c
 			setSaving(false);
 		}
 	}
-	return /* @__PURE__ */ jsxs("details", {
-		className: "mt-3 text-[0.9em]",
-		children: [/* @__PURE__ */ jsx("summary", {
-			className: "cursor-pointer text-mocha-light",
-			children: "settings"
-		}), /* @__PURE__ */ jsxs("form", {
+	return /* @__PURE__ */ jsx(SectionCard, {
+		title: "Model and reasoning",
+		description: "Override the Agent template defaults for this Agent only.",
+		children: /* @__PURE__ */ jsxs("form", {
 			onSubmit: save,
-			className: "mt-2 flex flex-wrap items-end gap-3 border-t border-dashed border-frost py-3",
+			className: "grid gap-4 sm:grid-cols-2",
 			children: [
 				/* @__PURE__ */ jsxs("label", {
-					className: "flex flex-col gap-1 text-[0.85em] text-mocha-light",
-					children: ["model override", /* @__PURE__ */ jsxs("select", {
+					className: "m-0 flex min-w-0 flex-col gap-1 text-sm text-foreground",
+					children: ["Model override", /* @__PURE__ */ jsxs("select", {
 						name: "modelOverride",
 						value: modelOverride,
 						onChange: (e) => setModelOverride(e.target.value),
-						className: "min-w-[16rem] rounded-sm border border-frost bg-snow px-2 py-1.5",
+						className: "min-w-0",
 						children: [
 							/* @__PURE__ */ jsxs("option", {
 								value: "",
@@ -347,33 +402,41 @@ function SettingsDetails({ agentId, currentModelOverride, profileDefaultModel, c
 					})]
 				}),
 				/* @__PURE__ */ jsxs("label", {
-					className: "flex flex-col gap-1 text-[0.85em] text-mocha-light",
-					children: ["reasoning level", /* @__PURE__ */ jsx("select", {
+					className: "m-0 flex min-w-0 flex-col gap-1 text-sm text-foreground",
+					children: ["Reasoning level", /* @__PURE__ */ jsx("select", {
 						name: "reasoningLevel",
 						value: reasoning,
 						onChange: (e) => setReasoning(e.target.value),
-						className: "min-w-[16rem] rounded-sm border border-frost bg-snow px-2 py-1.5",
+						className: "min-w-0",
 						children: REASONING_LEVELS.map((lvl) => /* @__PURE__ */ jsx("option", {
 							value: lvl,
 							children: lvl
 						}, lvl))
 					})]
 				}),
-				/* @__PURE__ */ jsx("button", {
-					type: "submit",
-					disabled: saving,
-					children: saving ? "saving…" : "save"
-				}),
-				savedFlash && /* @__PURE__ */ jsx("span", {
-					className: "text-[0.85em] text-[#3b7a3b]",
-					children: "saved ✓"
-				}),
-				error && /* @__PURE__ */ jsx("span", {
-					className: "text-[0.85em] text-danger",
-					children: error
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-3 sm:col-span-2",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "primary",
+							type: "submit",
+							disabled: saving,
+							children: saving ? "Saving…" : "Save model settings"
+						}),
+						savedFlash && /* @__PURE__ */ jsx("span", {
+							role: "status",
+							className: "text-sm text-success",
+							children: "Saved"
+						}),
+						error && /* @__PURE__ */ jsx("span", {
+							role: "alert",
+							className: "text-sm text-danger",
+							children: error
+						})
+					]
 				})
 			]
-		})]
+		})
 	});
 }
 function MoveGroupForm({ agentId, currentTeamId, teams }) {
@@ -437,14 +500,14 @@ function MoveGroupForm({ agentId, currentTeamId, teams }) {
 		className: "mt-2 flex flex-wrap items-end gap-2",
 		children: [
 			/* @__PURE__ */ jsxs("label", {
-				className: "flex flex-col gap-1 text-[0.85em] text-mocha-light",
+				className: "flex min-w-0 flex-1 flex-col gap-1 text-[0.85em] text-mocha-light",
 				children: ["move to:", /* @__PURE__ */ jsx("select", {
 					value: teamId,
 					onChange: (e) => {
 						setTeamId(e.target.value);
 						setPreview(null);
 					},
-					className: "min-w-[18rem] rounded-sm border border-frost bg-snow px-2 py-1.5",
+					className: "w-full min-w-0 rounded-sm border border-frost bg-snow px-2 py-1.5 sm:min-w-[18rem]",
 					children: teams.map((g) => /* @__PURE__ */ jsxs("option", {
 						value: g.id,
 						children: [
@@ -473,13 +536,15 @@ function MoveGroupForm({ agentId, currentTeamId, teams }) {
 					})]
 				})]
 			}),
-			/* @__PURE__ */ jsx("button", {
+			/* @__PURE__ */ jsx(Button, {
+				variant: "primary",
 				type: "submit",
 				disabled: moving || teamId === currentTeamId,
 				children: moving ? "working…" : preview ? "commit reviewed move" : "review move"
 			}),
 			err && /* @__PURE__ */ jsx("span", {
-				className: "text-[0.85em] text-danger",
+				role: "alert",
+				className: "basis-full text-[0.85em] text-danger",
 				children: err
 			}),
 			preview && /* @__PURE__ */ jsxs("div", {
@@ -512,9 +577,14 @@ function SkillsTable({ agentId, attached, all }) {
 	const router = useRouter();
 	const [pending, setPending] = useState(null);
 	const [err, setErr] = useState(null);
-	async function attach(skill) {
+	const [riskySkill, setRiskySkill] = useState(null);
+	const [detachSkill, setDetachSkill] = useState(null);
+	async function attach(skill, findingsConfirmed = false) {
 		const findings = skill.scanFindings ?? [];
-		if (!(findings.length === 0 || confirm(`Skill "${skill.name}" has ${findings.length} scan finding${findings.length === 1 ? "" : "s"}. Attach it anyway?`))) return;
+		if (findings.length > 0 && !findingsConfirmed) {
+			setRiskySkill(skill);
+			return;
+		}
 		setPending(skill.name);
 		setErr(null);
 		try {
@@ -532,7 +602,8 @@ function SkillsTable({ agentId, attached, all }) {
 			}
 			await router.invalidate();
 		} catch (e) {
-			setErr(e.message);
+			setErr(e instanceof Error ? e.message : String(e));
+			throw e;
 		} finally {
 			setPending(null);
 		}
@@ -549,6 +620,7 @@ function SkillsTable({ agentId, attached, all }) {
 			await router.invalidate();
 		} catch (e) {
 			setErr(e.message);
+			throw e;
 		} finally {
 			setPending(null);
 		}
@@ -557,39 +629,121 @@ function SkillsTable({ agentId, attached, all }) {
 		className: "text-[0.9em] text-mocha-light",
 		children: "no skills installed"
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [err && /* @__PURE__ */ jsx("p", {
-		className: "mb-2 text-[0.85em] text-danger",
-		children: err
-	}), /* @__PURE__ */ jsxs("table", { children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-		/* @__PURE__ */ jsx("th", { children: "name" }),
-		/* @__PURE__ */ jsx("th", { children: "description" }),
-		/* @__PURE__ */ jsx("th", { children: "scan" }),
-		/* @__PURE__ */ jsx("th", {})
-	] }) }), /* @__PURE__ */ jsx("tbody", { children: all.map((s) => {
-		const isAttached = attached.has(s.name);
-		const busy = pending === s.name;
-		return /* @__PURE__ */ jsxs("tr", { children: [
-			/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("code", { children: s.name }) }),
-			/* @__PURE__ */ jsx("td", { children: s.description || /* @__PURE__ */ jsx("span", {
-				className: "text-mocha-light",
-				children: "—"
-			}) }),
-			/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(SkillFindingSummary, { findings: s.scanFindings ?? [] }) }),
-			/* @__PURE__ */ jsx("td", { children: isAttached ? /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: "ghost-btn",
-				disabled: busy,
-				onClick: () => detach(s.name),
-				children: busy ? "…" : "detach"
-			}) : /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: "ghost-btn",
-				disabled: busy,
-				onClick: () => attach(s),
-				children: busy ? "…" : "attach"
-			}) })
-		] }, s.name);
-	}) })] })] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		err && /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "mb-2 text-[0.85em] text-danger",
+			children: err
+		}),
+		/* @__PURE__ */ jsxs("table", {
+			className: "hidden md:table",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+				/* @__PURE__ */ jsx("th", { children: "name" }),
+				/* @__PURE__ */ jsx("th", { children: "description" }),
+				/* @__PURE__ */ jsx("th", { children: "scan" }),
+				/* @__PURE__ */ jsx("th", {})
+			] }) }), /* @__PURE__ */ jsx("tbody", { children: all.map((s) => {
+				const isAttached = attached.has(s.name);
+				const busy = pending === s.name;
+				return /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("code", { children: s.name }) }),
+					/* @__PURE__ */ jsx("td", { children: s.description || /* @__PURE__ */ jsx("span", {
+						className: "text-mocha-light",
+						children: "—"
+					}) }),
+					/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(SkillFindingSummary, { findings: s.scanFindings ?? [] }) }),
+					/* @__PURE__ */ jsx("td", { children: isAttached ? /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						disabled: busy,
+						onClick: () => setDetachSkill(s.name),
+						children: busy ? "…" : "detach"
+					}) : /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						disabled: busy,
+						onClick: () => void attach(s).catch(() => {}),
+						children: busy ? "…" : "attach"
+					}) })
+				] }, s.name);
+			}) })]
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "grid gap-3 md:hidden",
+			children: all.map((skill) => {
+				const isAttached = attached.has(skill.name);
+				const busy = pending === skill.name;
+				return /* @__PURE__ */ jsxs("article", {
+					className: "min-w-0 rounded-xl border border-border bg-muted/20 p-4",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 items-start justify-between gap-3",
+							children: [/* @__PURE__ */ jsx("code", {
+								className: "min-w-0 break-all font-mono text-sm",
+								children: skill.name
+							}), /* @__PURE__ */ jsx("span", {
+								className: `shrink-0 text-xs font-semibold ${isAttached ? "text-success" : "text-muted-foreground"}`,
+								children: isAttached ? "Attached" : "Available"
+							})]
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "mt-2 text-sm text-muted-foreground",
+							children: skill.description || "No description provided."
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "mt-2",
+							children: /* @__PURE__ */ jsx(SkillFindingSummary, { findings: skill.scanFindings ?? [] })
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "mt-3",
+							children: isAttached ? /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								disabled: busy,
+								onClick: () => setDetachSkill(skill.name),
+								children: busy ? "Detaching…" : "Detach"
+							}) : /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								disabled: busy,
+								onClick: () => void attach(skill).catch(() => {}),
+								children: busy ? "Attaching…" : "Attach"
+							})
+						})
+					]
+				}, skill.name);
+			})
+		}),
+		/* @__PURE__ */ jsx(ConfirmDialog, {
+			open: riskySkill !== null,
+			onOpenChange: (open) => {
+				if (!open) setRiskySkill(null);
+			},
+			title: `Attach ${riskySkill?.name ?? "skill"} despite scan findings?`,
+			description: /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ jsxs("p", { children: [
+					"Static scanning found ",
+					riskySkill?.scanFindings?.length ?? 0,
+					" potentially unsafe instruction",
+					riskySkill?.scanFindings?.length === 1 ? "" : "s",
+					". Review the findings before allowing this skill into the Agent's prompt."
+				] }), /* @__PURE__ */ jsx(SkillFindingSummary, { findings: riskySkill?.scanFindings ?? [] })]
+			}),
+			confirmLabel: "Attach despite findings",
+			onConfirm: async () => {
+				if (riskySkill) await attach(riskySkill, true);
+			}
+		}),
+		/* @__PURE__ */ jsx(ConfirmDialog, {
+			open: detachSkill !== null,
+			onOpenChange: (open) => {
+				if (!open) setDetachSkill(null);
+			},
+			title: `Detach ${detachSkill ?? "skill"}?`,
+			description: /* @__PURE__ */ jsx("p", { children: "This removes the skill's instructions from this Agent's future turns. It does not uninstall the skill, and you can attach it again later." }),
+			confirmLabel: "Detach skill",
+			onConfirm: async () => {
+				if (detachSkill) await detach(detachSkill);
+			}
+		})
+	] });
 }
 function SkillFindingSummary({ findings }) {
 	if (findings.length === 0) return /* @__PURE__ */ jsx("span", {
@@ -627,6 +781,7 @@ function TelegramSection({ agent }) {
 	const [error, setError] = useState(null);
 	const [mirrorMode, setMirrorMode] = useState(agent.telegramMirrorMode);
 	const [iconEmoji, setIconEmoji] = useState(agent.telegramIconEmoji ?? "");
+	const [confirmUnbind, setConfirmUnbind] = useState(false);
 	const isBound = agent.telegramTopicId !== null;
 	async function bind() {
 		setBusy(true);
@@ -647,15 +802,18 @@ function TelegramSection({ agent }) {
 		}
 	}
 	async function unbind() {
-		if (!confirm("Unbind this agent from its Telegram topic? The topic stays in Telegram as an orphan.")) return;
 		setBusy(true);
 		setError(null);
 		try {
 			const res = await fetch(`/api/agents/${encodeURIComponent(agent.id)}/telegram/binding`, { method: "DELETE" });
-			if (!res.ok) throw new Error(res.statusText);
+			if (!res.ok && res.status !== 204) {
+				const body = await res.json().catch(() => null);
+				throw new Error(body?.error ?? `Could not unbind Telegram topic (${res.status})`);
+			}
 			await router.invalidate();
 		} catch (e) {
-			setError(e.message);
+			setError(e instanceof Error ? e.message : String(e));
+			throw e;
 		} finally {
 			setBusy(false);
 		}
@@ -689,11 +847,11 @@ function TelegramSection({ agent }) {
 			setError(e.message);
 		}
 	}
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 		className: "text-[0.9em]",
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				className: "mb-3 flex items-center gap-3",
+				className: "mb-3 flex flex-wrap items-center gap-3",
 				children: isBound ? /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "rounded-full bg-success/10 px-2 py-0.5 text-xs font-semibold text-success",
@@ -711,12 +869,11 @@ function TelegramSection({ agent }) {
 						title: "Open the topic in Telegram (works on desktop/Android; iOS shows the topic list)",
 						children: "open in Telegram"
 					}),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: unbind,
+					/* @__PURE__ */ jsx(Button, {
+						variant: "danger",
+						onClick: () => setConfirmUnbind(true),
 						disabled: busy,
-						className: "ghost-btn border-[rgba(196,135,138,0.4)] text-danger hover:bg-[rgba(196,135,138,0.08)]",
-						children: "unbind"
+						children: "Unbind"
 					})
 				] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 					className: "rounded-full bg-warning/10 px-2 py-0.5 text-xs font-semibold text-warning",
@@ -731,11 +888,11 @@ function TelegramSection({ agent }) {
 				})] })
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2",
+				className: "flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-2",
 				children: [/* @__PURE__ */ jsx("label", {
 					htmlFor: "mirror-mode",
-					className: "text-mocha-light",
-					children: "mirror mode:"
+					className: "m-0 text-mocha-light",
+					children: "Mirror mode"
 				}), /* @__PURE__ */ jsxs("select", {
 					id: "mirror-mode",
 					value: mirrorMode,
@@ -752,12 +909,12 @@ function TelegramSection({ agent }) {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "mt-2 flex items-center gap-2",
+				className: "mt-3 flex flex-wrap items-end gap-2",
 				children: [
 					/* @__PURE__ */ jsx("label", {
 						htmlFor: "topic-icon",
-						className: "text-mocha-light",
-						children: "topic icon:"
+						className: "m-0 text-mocha-light",
+						children: "Topic icon"
 					}),
 					/* @__PURE__ */ jsx("input", {
 						id: "topic-icon",
@@ -778,6 +935,7 @@ function TelegramSection({ agent }) {
 				]
 			}),
 			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
 				className: "mt-2 text-sm text-danger",
 				children: error
 			}),
@@ -786,7 +944,14 @@ function TelegramSection({ agent }) {
 				children: "When bound, every assistant turn for this agent gets mirrored to the topic. Typing in the topic triggers a new turn. iOS Telegram clients have a known limitation that prevents inline link deep-links from opening directly into a topic — bound state is still functional; navigate via the topic list manually."
 			})
 		]
-	});
+	}), /* @__PURE__ */ jsx(ConfirmDialog, {
+		open: confirmUnbind,
+		onOpenChange: setConfirmUnbind,
+		title: `Unbind ${agent.name} from Telegram?`,
+		description: /* @__PURE__ */ jsx("p", { children: "Telegram ingress and mirroring stop for this Agent. The existing forum topic remains in Telegram as an orphan until you remove it there." }),
+		confirmLabel: "Unbind Telegram topic",
+		onConfirm: unbind
+	})] });
 }
 //#endregion
 export { AgentDetailPage as component };