bazilion 0.9.0 → 0.11.0

package/dist/web/server/assets/{Sidebar-CGmtCnYU.js → Sidebar-DsRVCszF.js}

@@ -1,8 +1,9 @@
-import "./wire-constants-C8nBJcU3.js";
 import { t as Button } from "./Button-Dsnw22OF.js";
+import "./wire-constants-C8nBJcU3.js";
 import { useEffect, useRef, useState } from "react";
 import { Link, useNavigate, useRouter } from "@tanstack/react-router";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Archive, Bot, ChevronDown, ChevronRight, Pencil, Plus, Send, UsersRound } from "lucide-react";
 //#region src/components/CreateTeamDialog.tsx
 function CreateTeamDialog({ onClose }) {
 	const router = useRouter();
@@ -41,15 +42,22 @@ function CreateTeamDialog({ onClose }) {
 	}
 	return /* @__PURE__ */ jsx("div", {
 		onClick: onClose,
-		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-[1px]",
+		onKeyDown: (event) => {
+			if (event.key === "Escape") onClose();
+		},
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-charcoal/45 p-4 backdrop-blur-sm",
 		children: /* @__PURE__ */ jsxs("form", {
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": "create-team-title",
 			onSubmit: submit,
 			onClick: (e) => e.stopPropagation(),
-			className: "w-full max-w-md rounded-2xl border bg-card p-6 shadow-lg",
+			className: "max-h-[calc(100dvh-2rem)] w-full max-w-lg overflow-y-auto rounded-3xl border border-frost bg-card p-6 shadow-baziu-lg sm:p-7",
 			children: [
-				/* @__PURE__ */ jsx("h3", {
-					className: "font-serif text-xl text-foreground mb-1",
-					children: "Create a new team"
+				/* @__PURE__ */ jsx("h2", {
+					id: "create-team-title",
+					className: "font-serif text-2xl text-foreground",
+					children: "Create a team"
 				}),
 				/* @__PURE__ */ jsxs("p", {
 					className: "text-sm text-muted-foreground mb-4",
@@ -63,7 +71,7 @@ function CreateTeamDialog({ onClose }) {
 					]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "grid grid-cols-2 gap-3 mb-3",
+					className: "mb-3 grid gap-3 sm:grid-cols-2",
 					children: [/* @__PURE__ */ jsxs("label", {
 						className: "block text-sm",
 						children: ["ID (slug)", /* @__PURE__ */ jsx("input", {
@@ -116,20 +124,19 @@ function CreateTeamDialog({ onClose }) {
 					]
 				}),
 				err && /* @__PURE__ */ jsx("p", {
-					className: "mt-2 text-sm text-rose-700",
+					className: "err mt-2",
 					children: err
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "mt-5 flex justify-end gap-2",
-					children: [/* @__PURE__ */ jsx("button", {
-						type: "button",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
 						onClick: onClose,
-						className: "rounded-md border px-3 py-2 text-sm text-foreground hover:bg-accent",
 						children: "Cancel"
-					}), /* @__PURE__ */ jsx("button", {
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "primary",
 						type: "submit",
 						disabled: busy,
-						className: "rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground disabled:opacity-50",
 						children: busy ? "Creating…" : "Create"
 					})]
 				})
@@ -225,7 +232,7 @@ function SpawnDialog({ profileId, teamHint, teams, onClose }) {
 			"aria-modal": "true",
 			"aria-labelledby": "spawn-agent-title",
 			onSubmit: submit,
-			className: "w-full max-w-md rounded-2xl border bg-card p-6 shadow-lg",
+			className: "max-h-[calc(100dvh-2rem)] w-full max-w-lg overflow-y-auto rounded-3xl border border-frost bg-card p-6 shadow-baziu-lg sm:p-7",
 			onClick: (e) => e.stopPropagation(),
 			children: [
 				/* @__PURE__ */ jsx("h3", {
@@ -270,20 +277,13 @@ function SpawnDialog({ profileId, teamHint, teams, onClose }) {
 								setPreview(null);
 							},
 							className: "mt-1 block w-full rounded-md border bg-background px-3 py-2",
-							children: [
-								/* @__PURE__ */ jsx("option", {
-									value: "profile_defaults",
-									children: "agent-template defaults"
-								}),
-								/* @__PURE__ */ jsx("option", {
-									value: "isolated",
-									children: "isolated"
-								}),
-								/* @__PURE__ */ jsx("option", {
-									value: "open",
-									children: "open to current members and boundaries"
-								})
-							]
+							children: [/* @__PURE__ */ jsx("option", {
+								value: "profile_defaults",
+								children: "Agent-template defaults"
+							}), /* @__PURE__ */ jsx("option", {
+								value: "isolated",
+								children: "isolated"
+							})]
 						}),
 						/* @__PURE__ */ jsx("span", {
 							className: "mt-1 block text-xs text-muted-foreground",
@@ -307,7 +307,7 @@ function SpawnDialog({ profileId, teamHint, teams, onClose }) {
 					})]
 				}),
 				err && /* @__PURE__ */ jsx("p", {
-					className: "mt-2 text-sm text-rose-700",
+					className: "err mt-2",
 					children: err
 				}),
 				preview && /* @__PURE__ */ jsxs("div", {
@@ -342,15 +342,14 @@ function SpawnDialog({ profileId, teamHint, teams, onClose }) {
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "mt-5 flex justify-end gap-2",
-					children: [/* @__PURE__ */ jsx("button", {
-						type: "button",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
 						onClick: onClose,
-						className: "rounded-md border px-3 py-2 text-sm text-foreground hover:bg-accent",
 						children: "Cancel"
-					}), /* @__PURE__ */ jsx("button", {
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "primary",
 						type: "submit",
 						disabled: busy,
-						className: "rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground disabled:opacity-50",
 						children: busy ? "Working…" : preview ? "Commit reviewed creation" : "Review exact policy"
 					})]
 				})
@@ -364,7 +363,7 @@ function Backdrop({ children, onClose }) {
 		onKeyDown: (event) => {
 			if (event.key === "Escape") onClose();
 		},
-		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-[1px]",
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-charcoal/45 p-4 backdrop-blur-sm",
 		children
 	});
 }
@@ -446,7 +445,8 @@ function SpawnTeamModal({ profileGroup: team, teams, onClose, onSpawned }) {
 	return /* @__PURE__ */ jsx("div", {
 		role: "dialog",
 		"aria-modal": "true",
-		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
+		"aria-labelledby": "spawn-team-title",
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-charcoal/45 p-4 backdrop-blur-sm",
 		onClick: onClose,
 		onKeyDown: (event) => {
 			if (event.key === "Escape") onClose();
@@ -454,14 +454,17 @@ function SpawnTeamModal({ profileGroup: team, teams, onClose, onSpawned }) {
 		children: /* @__PURE__ */ jsxs("div", {
 			ref: dialogRef,
 			tabIndex: -1,
-			className: "card w-full max-w-lg",
+			className: "max-h-[calc(100dvh-2rem)] w-full max-w-lg overflow-y-auto rounded-3xl border border-frost bg-card p-6 shadow-baziu-lg sm:p-7",
 			role: "document",
 			onClick: (event) => event.stopPropagation(),
 			onKeyDown: (event) => {
 				if (event.key !== "Escape") event.stopPropagation();
 			},
 			children: [
-				/* @__PURE__ */ jsxs("h3", { children: ["spawn team — ", team.name] }),
+				/* @__PURE__ */ jsxs("h2", {
+					id: "spawn-team-title",
+					children: ["Spawn team — ", team.name]
+				}),
 				error && /* @__PURE__ */ jsx("div", {
 					className: "err",
 					children: error
@@ -622,42 +625,75 @@ function Sidebar({ agents, teams, profiles, profileGroups, selectedAgentId, init
 	}
 	const selectedTeamId = agents.find((a) => a.id === selectedAgentId)?.teamId ?? null;
 	return /* @__PURE__ */ jsxs("aside", {
-		className: "flex h-full flex-col rounded-lg border bg-card overflow-hidden",
+		className: "flex h-full flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-baziu-sm",
 		children: [
 			/* @__PURE__ */ jsxs("header", {
-				className: "flex items-center justify-between border-b px-3 py-2.5 bg-muted/30",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "font-serif text-base text-foreground",
-					children: "agents"
+				className: "flex items-center justify-between gap-3 border-b border-border bg-muted/30 px-3 py-2.5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 text-sm font-semibold text-foreground",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "flex size-7 items-center justify-center rounded-lg bg-accent text-accent-foreground",
+							children: /* @__PURE__ */ jsx(Bot, {
+								className: "size-4",
+								"aria-hidden": "true"
+							})
+						}), /* @__PURE__ */ jsx("span", { children: "Agents" })]
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "mt-0.5 truncate pl-9 text-[0.7rem] text-muted-foreground",
+						children: [
+							agents.length,
+							" agent",
+							agents.length === 1 ? "" : "s",
+							" across ",
+							teams.length,
+							" team",
+							teams.length === 1 ? "" : "s"
+						]
+					})]
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "relative",
-					children: [/* @__PURE__ */ jsx("button", {
+					children: [/* @__PURE__ */ jsxs("button", {
 						ref: newButtonRef,
 						type: "button",
 						onClick: () => setMenuOpen((v) => !v),
-						className: "rounded-md border px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:border-foreground/30",
-						children: "+ new ▾"
+						"aria-expanded": menuOpen,
+						"aria-haspopup": "menu",
+						className: "unstyled inline-flex h-8 items-center gap-1 rounded-lg border border-border bg-card px-2.5 text-xs font-semibold text-foreground shadow-baziu-sm transition-colors hover:border-primary/30 hover:bg-accent hover:text-accent-foreground",
+						children: [
+							/* @__PURE__ */ jsx(Plus, {
+								className: "size-3.5",
+								"aria-hidden": "true"
+							}),
+							"New",
+							/* @__PURE__ */ jsx(ChevronDown, {
+								className: `size-3.5 text-muted-foreground transition-transform ${menuOpen ? "rotate-180" : ""}`,
+								"aria-hidden": "true"
+							})
+						]
 					}), menuOpen && /* @__PURE__ */ jsxs("div", {
 						role: "menu",
-						className: "absolute right-0 top-[calc(100%+0.3rem)] z-20 min-w-[14rem] rounded-md border bg-popover p-1 shadow-md",
+						className: "absolute right-0 top-[calc(100%+0.4rem)] z-20 w-60 overflow-hidden rounded-xl border border-border bg-popover p-1.5 text-popover-foreground shadow-baziu-lg",
 						onMouseLeave: () => setMenuOpen(false),
 						children: [
 							profiles.length === 0 ? /* @__PURE__ */ jsxs("div", {
-								className: "px-3 py-2 text-sm text-muted-foreground",
+								className: "rounded-lg bg-muted/40 px-3 py-2.5 text-xs leading-5 text-muted-foreground",
 								children: [
-									"No profiles yet.",
-									/* @__PURE__ */ jsx("br", {}),
+									"No Agent templates yet.",
+									" ",
 									/* @__PURE__ */ jsx("a", {
 										href: "/templates/agents",
 										className: "text-primary underline",
-										children: "Create one"
-									}),
-									" ",
-									"to spawn agents."
+										children: "Create one to spawn agents."
+									})
 								]
-							}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-								className: "px-3 pt-1 pb-0.5 text-[0.7em] uppercase tracking-wide text-muted-foreground",
-								children: "spawn agent from template"
+							}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1.5 px-2.5 pb-1 pt-1 text-[0.68rem] font-semibold uppercase tracking-[0.1em] text-muted-foreground",
+								children: [/* @__PURE__ */ jsx(Bot, {
+									className: "size-3",
+									"aria-hidden": "true"
+								}), "Agent templates"]
 							}), sortedProfiles.map((p) => /* @__PURE__ */ jsxs("button", {
 								type: "button",
 								role: "menuitem",
@@ -665,19 +701,35 @@ function Sidebar({ agents, teams, profiles, profileGroups, selectedAgentId, init
 									setMenuOpen(false);
 									setSpawnFor({ profileId: p.id });
 								},
-								className: "flex w-full items-center justify-between rounded-sm px-3 py-1.5 text-sm hover:bg-accent",
-								children: [/* @__PURE__ */ jsx("span", { children: p.name || p.id }), p.id === "default" && /* @__PURE__ */ jsx("span", {
-									className: "rounded bg-muted px-1 text-[0.7em] text-muted-foreground",
-									children: "default"
-								})]
+								className: "unstyled flex min-h-8 w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "flex size-6 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground",
+										children: /* @__PURE__ */ jsx(Bot, {
+											className: "size-3.5",
+											"aria-hidden": "true"
+										})
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "min-w-0 flex-1 truncate",
+										children: p.name || p.id
+									}),
+									p.id === "default" && /* @__PURE__ */ jsx("span", {
+										className: "rounded-full border border-border bg-muted px-1.5 py-0.5 text-[0.65rem] font-semibold text-muted-foreground",
+										children: "Default"
+									})
+								]
 							}, p.id))] }),
-							/* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-border" }),
-							/* @__PURE__ */ jsx("div", {
-								className: "px-3 pt-1 pb-0.5 text-[0.7em] uppercase tracking-wide text-muted-foreground",
-								children: "spawn team from template"
+							/* @__PURE__ */ jsx("div", { className: "my-1.5 h-px bg-border" }),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1.5 px-2.5 pb-1 pt-1 text-[0.68rem] font-semibold uppercase tracking-[0.1em] text-muted-foreground",
+								children: [/* @__PURE__ */ jsx(UsersRound, {
+									className: "size-3",
+									"aria-hidden": "true"
+								}), "Team templates"]
 							}),
 							profileGroups.length === 0 ? /* @__PURE__ */ jsxs("div", {
-								className: "px-3 py-1.5 text-xs text-muted-foreground",
+								className: "rounded-lg bg-muted/40 px-3 py-2 text-xs leading-5 text-muted-foreground",
 								children: [
 									"No team templates yet.",
 									" ",
@@ -692,45 +744,76 @@ function Sidebar({ agents, teams, profiles, profileGroups, selectedAgentId, init
 								type: "button",
 								role: "menuitem",
 								disabled: pg.slotCount === 0,
-								title: pg.slotCount === 0 ? "add at least one member before spawning" : void 0,
+								title: pg.slotCount === 0 ? "Add at least one member before spawning" : void 0,
 								onClick: () => {
 									setMenuOpen(false);
 									setSpawnTeamFor(pg);
 								},
-								className: "flex w-full items-center justify-between rounded-sm px-3 py-1.5 text-sm hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent",
-								children: [/* @__PURE__ */ jsx("span", { children: pg.name || pg.id }), /* @__PURE__ */ jsx("span", {
-									className: "font-mono text-[0.7em] text-muted-foreground",
-									children: pg.slotCount
-								})]
+								className: "unstyled flex min-h-8 w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "flex size-6 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground",
+										children: /* @__PURE__ */ jsx(UsersRound, {
+											className: "size-3.5",
+											"aria-hidden": "true"
+										})
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "min-w-0 flex-1 truncate",
+										children: pg.name || pg.id
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "inline-flex min-w-6 items-center justify-center rounded-full bg-muted px-1.5 font-mono text-[0.68rem] text-muted-foreground",
+										children: pg.slotCount
+									})
+								]
 							}, pg.id)),
-							/* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-border" }),
-							/* @__PURE__ */ jsx("button", {
+							/* @__PURE__ */ jsx("div", { className: "my-1.5 h-px bg-border" }),
+							/* @__PURE__ */ jsxs("button", {
 								type: "button",
 								onClick: () => {
 									setMenuOpen(false);
 									setCreateGroupOpen(true);
 								},
-								className: "block w-full text-left rounded-sm px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent",
-								children: "+ create team"
+								className: "unstyled flex min-h-8 w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+								children: [/* @__PURE__ */ jsx(Plus, {
+									className: "size-3.5",
+									"aria-hidden": "true"
+								}), "Create a team"]
 							})
 						]
 					})]
 				})]
 			}),
 			/* @__PURE__ */ jsx("nav", {
-				className: "flex-1 overflow-y-auto p-1",
+				className: "flex-1 overflow-y-auto p-1.5",
+				"aria-label": "Teams and agents",
 				children: agents.length === 0 && teams.length === 0 ? /* @__PURE__ */ jsxs("div", {
-					className: "p-4 text-sm text-muted-foreground",
+					className: "m-1 flex flex-col items-center rounded-xl border border-dashed border-border bg-muted/30 px-4 py-6 text-center",
 					children: [
-						"No agents yet.",
-						" ",
-						/* @__PURE__ */ jsx("a", {
-							href: "/agents",
-							className: "text-primary underline",
-							children: "Spawn one"
+						/* @__PURE__ */ jsx("span", {
+							className: "mb-2 flex size-9 items-center justify-center rounded-full bg-accent text-accent-foreground",
+							children: /* @__PURE__ */ jsx(Bot, {
+								className: "size-4",
+								"aria-hidden": "true"
+							})
 						}),
-						" ",
-						"to start chatting."
+						/* @__PURE__ */ jsx("p", {
+							className: "text-sm font-semibold text-foreground",
+							children: "No agents yet"
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "mt-1 text-xs leading-5 text-muted-foreground",
+							children: "Spawn your first agent to start a conversation."
+						}),
+						/* @__PURE__ */ jsxs("a", {
+							href: "/agents",
+							className: "mt-3 inline-flex items-center gap-1 text-xs font-semibold text-primary hover:text-primary/80",
+							children: ["Open agent setup", /* @__PURE__ */ jsx(ChevronRight, {
+								className: "size-3.5",
+								"aria-hidden": "true"
+							})]
+						})
 					]
 				}) : sortedGroups.map((g) => {
 					const teamAgents = agentsByGroup.get(g.id) ?? [];
@@ -751,66 +834,94 @@ function Sidebar({ agents, teams, profiles, profileGroups, selectedAgentId, init
 						},
 						className: "team/details mb-1 last:mb-0",
 						children: [/* @__PURE__ */ jsxs("summary", {
-							className: "flex cursor-pointer list-none items-center gap-1.5 rounded-sm px-2 py-1.5 text-xs uppercase tracking-wide text-muted-foreground hover:bg-accent",
+							className: `flex min-h-8 cursor-pointer list-none items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-accent hover:text-accent-foreground ${containsSelected ? "bg-muted/60 text-foreground" : "text-muted-foreground"}`,
 							children: [
+								/* @__PURE__ */ jsx(ChevronRight, {
+									className: "size-3.5 shrink-0 transition-transform team-open/details:rotate-90",
+									"aria-hidden": "true"
+								}),
 								/* @__PURE__ */ jsx("span", {
-									className: "w-3 text-xs transition-transform team-open/details:rotate-90 inline-block",
-									children: "▸"
+									className: "flex size-5 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground",
+									children: /* @__PURE__ */ jsx(UsersRound, {
+										className: "size-3",
+										"aria-hidden": "true"
+									})
 								}),
 								/* @__PURE__ */ jsx("span", {
-									className: "flex-1 truncate font-semibold",
+									className: "min-w-0 flex-1 truncate font-medium",
 									children: g.name
 								}),
+								g.id === "default" && /* @__PURE__ */ jsx("span", {
+									className: "text-[0.62rem] font-semibold uppercase tracking-wide text-muted-foreground",
+									children: "Default"
+								}),
 								/* @__PURE__ */ jsx("span", {
-									className: "font-mono text-xs rounded bg-muted px-1 min-w-[1.4em] text-center",
+									className: "inline-flex min-w-6 items-center justify-center rounded-full border border-border bg-card px-1.5 font-mono text-[0.68rem] text-muted-foreground",
 									children: teamAgents.length
 								})
 							]
 						}), teamAgents.length === 0 ? /* @__PURE__ */ jsx("div", {
-							className: "pl-6 py-1 text-xs italic text-muted-foreground",
-							children: "no agents"
+							className: "py-2 pl-12 pr-2 text-xs text-muted-foreground",
+							children: "No agents in this team"
 						}) : /* @__PURE__ */ jsx("div", {
-							className: "pl-2",
+							className: "space-y-0.5 py-0.5 pl-2",
 							children: teamAgents.map((a) => /* @__PURE__ */ jsxs("div", {
-								className: "team/row relative",
+								className: "team/row relative rounded-lg",
 								children: [/* @__PURE__ */ jsxs(Link, {
 									to: "/",
 									search: { agent: a.id },
-									className: `block rounded-sm border-l-2 px-3 py-1.5 pr-14 hover:bg-accent ${a.id === selectedAgentId ? "border-primary bg-accent" : "border-transparent"}`,
+									"aria-current": a.id === selectedAgentId ? "page" : void 0,
+									className: `block min-h-11 rounded-lg border border-transparent py-1.5 pl-2.5 pr-[4.6rem] transition-colors hover:bg-accent/70 ${a.id === selectedAgentId ? "border-primary/20 bg-accent text-accent-foreground shadow-baziu-sm" : "text-foreground"}`,
 									children: [/* @__PURE__ */ jsxs("div", {
-										className: "flex items-center gap-1.5 truncate text-sm font-medium",
-										children: [/* @__PURE__ */ jsx("span", {
-											className: "truncate",
-											children: a.name
-										}), a.telegramTopicId !== null && /* @__PURE__ */ jsx("span", {
-											className: "text-xs",
-											title: `Telegram topic #${a.telegramTopicId}`,
-											"aria-label": `Bound to Telegram topic ${a.telegramTopicId}`,
-											children: "✈"
-										})]
+										className: "flex items-center gap-1.5 text-sm font-medium",
+										children: [
+											/* @__PURE__ */ jsx("span", {
+												className: `size-1.5 shrink-0 rounded-full ${a.id === selectedAgentId ? "bg-primary" : "bg-border"}`,
+												"aria-hidden": "true"
+											}),
+											/* @__PURE__ */ jsx("span", {
+												className: "min-w-0 flex-1 truncate",
+												children: a.name
+											}),
+											a.telegramTopicId !== null && /* @__PURE__ */ jsx("span", {
+												className: "shrink-0 text-primary",
+												title: `Telegram topic #${a.telegramTopicId}`,
+												"aria-label": `Bound to Telegram topic ${a.telegramTopicId}`,
+												children: /* @__PURE__ */ jsx(Send, {
+													className: "size-3",
+													"aria-hidden": "true"
+												})
+											})
+										]
 									}), /* @__PURE__ */ jsxs("div", {
-										className: "flex gap-2 font-mono text-[0.7em] text-muted-foreground",
+										className: "mt-0.5 flex gap-2 pl-3 font-mono text-[0.65rem] text-muted-foreground",
 										children: [/* @__PURE__ */ jsx("span", {
 											className: "uppercase tracking-wide",
 											children: a.status
-										}), /* @__PURE__ */ jsx("code", { children: a.id.slice(0, 8) })]
+										}), /* @__PURE__ */ jsx("span", { children: a.id.slice(0, 8) })]
 									})]
 								}), /* @__PURE__ */ jsxs("div", {
-									className: "absolute right-1 top-1 flex gap-0.5 opacity-0 transition-opacity team-hover/row:opacity-100 focus-within:opacity-100",
+									className: "absolute right-1 top-1/2 z-10 flex -translate-y-1/2 gap-0.5",
 									children: [/* @__PURE__ */ jsx("button", {
 										type: "button",
 										onClick: () => rename(a),
-										title: "rename",
-										"aria-label": `rename ${a.name}`,
-										className: "unstyled flex h-6 w-6 items-center justify-center rounded-sm text-mocha-light hover:bg-snow hover:text-sapphire",
-										children: "✎"
+										title: "Rename",
+										"aria-label": `Rename ${a.name}`,
+										className: "unstyled flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-card hover:text-primary focus-visible:bg-card",
+										children: /* @__PURE__ */ jsx(Pencil, {
+											className: "size-3.5",
+											"aria-hidden": "true"
+										})
 									}), /* @__PURE__ */ jsx("button", {
 										type: "button",
 										onClick: () => archive(a),
-										title: "archive",
-										"aria-label": `archive ${a.name}`,
-										className: "unstyled flex h-6 w-6 items-center justify-center rounded-sm text-mocha-light hover:bg-snow hover:text-[#9B3D3D]",
-										children: "×"
+										title: "Archive",
+										"aria-label": `Archive ${a.name}`,
+										className: "unstyled flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive focus-visible:bg-destructive/10 focus-visible:text-destructive",
+										children: /* @__PURE__ */ jsx(Archive, {
+											className: "size-3.5",
+											"aria-hidden": "true"
+										})
 									})]
 								})]
 							}, a.id))

package/dist/web/server/assets/{TeamTabs-BPxDBfqy.js → TeamTabs-zZzbP1t_.js}

@@ -1,31 +1,32 @@
+import { n as sectionTabClass, t as SECTION_TABS_CLASS } from "./SectionTabs-BJTPr5nU.js";
 import { Link, useRouterState } from "@tanstack/react-router";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/TeamTabs.tsx
 var TABS = [
 	{
 		suffix: "",
-		label: "overview",
+		label: "Overview",
 		exact: true
 	},
 	{
 		suffix: "/members",
-		label: "members"
+		label: "Members"
 	},
 	{
 		suffix: "/policy",
-		label: "policy"
+		label: "Policy"
 	},
 	{
 		suffix: "/memory",
-		label: "memory"
+		label: "Memory"
 	},
 	{
 		suffix: "/context",
-		label: "context"
+		label: "Context"
 	},
 	{
 		suffix: "/activity",
-		label: "activity"
+		label: "Activity"
 	}
 ];
 function TeamTabs({ teamId }) {
@@ -33,14 +34,14 @@ function TeamTabs({ teamId }) {
 	const base = `/teams/${encodeURIComponent(teamId)}`;
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": "Team sections",
-		className: "-mb-px mb-5 flex flex-wrap gap-1 border-b border-frost",
+		className: SECTION_TABS_CLASS,
 		children: TABS.map((tab) => {
 			const href = `${base}${tab.suffix}`;
 			const active = "exact" in tab && tab.exact ? pathname === base || pathname === `${base}/` : pathname.startsWith(href);
 			return /* @__PURE__ */ jsx(Link, {
 				to: href,
 				"aria-current": active ? "page" : void 0,
-				className: `whitespace-nowrap border-b-2 px-3 py-2 text-sm font-medium ${active ? "border-sapphire text-sapphire" : "border-transparent text-mocha hover:text-sapphire"}`,
+				className: sectionTabClass(active),
 				children: tab.label
 			}, tab.label);
 		})

package/dist/web/server/assets/{TemplatesTabs-zf4YhStd.js → TemplatesTabs-CcRxZhJe.js}

@@ -1,3 +1,4 @@
+import { n as sectionTabClass, t as SECTION_TABS_CLASS } from "./SectionTabs-BJTPr5nU.js";
 import { Link, useRouterState } from "@tanstack/react-router";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/TemplatesTabs.tsx
@@ -5,14 +6,14 @@ function TemplatesTabs() {
 	const pathname = useRouterState({ select: (s) => s.location.pathname });
 	return /* @__PURE__ */ jsx("nav", {
 		role: "tablist",
-		className: "-mb-px mb-5 flex gap-1 border-b border-frost",
+		className: SECTION_TABS_CLASS,
 		children: [{
 			to: "/templates/agents",
-			label: "agent templates",
+			label: "Agent templates",
 			match: (p) => p.startsWith("/templates/agents")
 		}, {
 			to: "/templates/teams",
-			label: "team templates",
+			label: "Team templates",
 			match: (p) => p.startsWith("/templates/teams")
 		}].map((t) => {
 			const active = t.match(pathname);
@@ -20,7 +21,7 @@ function TemplatesTabs() {
 				to: t.to,
 				role: "tab",
 				"aria-selected": active,
-				className: `unstyled cursor-pointer border-b-2 bg-transparent px-4 py-2 text-[0.9em] font-medium transition-colors ${active ? "border-sapphire text-sapphire" : "border-transparent text-mocha hover:text-sapphire"}`,
+				className: sectionTabClass(active),
 				children: t.label
 			}, t.to);
 		})

package/dist/web/server/assets/{_id-fpFQ9_Ya.js → _id-BhOB8Umi.js}

@@ -1,5 +1,5 @@
 import { t as createServerFn } from "../server.js";
-import { t as createServerRpc } from "./createServerRpc-CeKECg65.js";
+import { t as createServerRpc } from "./createServerRpc-pU-IQV2Y.js";
 import { n as daemonClient, r as ApiClientError } from "./daemon-client-2NRMzlTr.js";
 //#region src/routes/agents/$id/index.tsx?tss-serverfn-split
 var fetchAgent_createServerFn_handler = createServerRpc({