@workerdeck/ui 3.5.0 → 3.6.1

package/build/index.mjs

@@ -6,7 +6,7 @@ import { Anchor, ArrowRight, Atom, Beaker, BedDouble, BellRing, Bike, Binary, Bl
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
 import { Toaster as Toaster$1, toast } from "sonner";
-import { STATE_LABELS, STATE_ORDER, adaptersOf, addCustomGroup, clearFilters, displayCustomized, displayedTasks, facetFilterCount, filterRows, groupRows, hasFacetFilter, isAgentRecord, isTeamCollapsed, moveCustomGroup, moveToCustomGroup, newCustomGroupId, projectLabel, projectName, projectSubpath, projectsOf, removeCustomGroup, renameCustomGroup, scopeActive, sessionKey, sessionLabel, subagentLabel, subsetSummary, taskSummary, teamSummary, toggleTeamCollapsed, visibleShells, visibleSubagents, visibleTasks } from "@workerdeck/protocol";
+import { PROJECT_ACCENTS, STATE_LABELS, STATE_ORDER, adaptersOf, addCustomGroup, clearFilters, customGroupColor, displayCustomized, displayedTasks, facetFilterCount, filterRows, groupRows, hasFacetFilter, isAgentRecord, isTeamCollapsed, moveCustomGroup, moveToCustomGroup, newCustomGroupId, projectLabel, projectName, projectSubpath, projectsOf, removeCustomGroup, renameCustomGroup, scopeActive, sessionKey, sessionLabel, styleCustomGroup, subagentLabel, subsetSummary, taskSummary, teamSummary, toggleTeamCollapsed, visibleShells, visibleSubagents, visibleTasks } from "@workerdeck/protocol";
 //#region src/components/ui/Card.tsx
 function Card({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -1156,11 +1156,18 @@ function SessionItem({ row, active = false, activeStepKey, showGateway, showProj
 		cost === "-" ? void 0 : cost
 	].filter((part) => Boolean(part));
 	const model = friendlyModel(info.model);
+	const status = statusLine(info.statusLabel);
+	const needsYou = row.state === "attention" || row.teamState === "attention" || badgeState === "attention";
 	const parts = [];
 	if (model) parts.push(/* @__PURE__ */ jsx("span", {
 		className: vendorTextClass(engine, info.model),
 		children: model
 	}, "model"));
+	if (status) parts.push(/* @__PURE__ */ jsx("span", {
+		title: status,
+		className: "text-fg-3",
+		children: status
+	}, "status"));
 	if (project !== void 0) parts.push(/* @__PURE__ */ jsxs("span", {
 		title: projectTitle,
 		children: [/* @__PURE__ */ jsx(ProjectIcon, {
@@ -1235,7 +1242,7 @@ function SessionItem({ row, active = false, activeStepKey, showGateway, showProj
 				});
 			}
 		},
-		className: cn("group flex w-full cursor-pointer flex-col p-1 text-left outline-none", "rounded-[4px] transition-colors focus-visible:ring-2 focus-visible:ring-ring", holdsOpenStep ? "bg-row-selected-weak" : active ? "bg-row-selected" : "hover:bg-row-hover", className),
+		className: cn("group flex w-full cursor-pointer flex-col p-1 text-left outline-none", "rounded-[4px] transition-colors focus-visible:ring-2 focus-visible:ring-ring", needsYou ? cn("bg-row-attention", active && "ring-1 ring-accent ring-inset") : holdsOpenStep ? "bg-row-selected-weak" : active ? "bg-row-selected" : "hover:bg-row-hover", className),
 		children: [agent && variant === "member" ? /* @__PURE__ */ jsxs("div", {
 			className: cn("flex h-6 items-center gap-1.5 overflow-hidden py-0.5 pr-0.5 pl-1.5", info.engineAsleep && "opacity-60"),
 			children: [
@@ -1245,9 +1252,10 @@ function SessionItem({ row, active = false, activeStepKey, showGateway, showProj
 					size: 22
 				}),
 				nameLabel,
-				info.title ? /* @__PURE__ */ jsx("span", {
+				status ? /* @__PURE__ */ jsx("span", {
+					title: status,
 					className: "min-w-0 flex-1 truncate text-body-sm text-fg-3",
-					children: info.title
+					children: status
 				}) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
 				unread,
 				/* @__PURE__ */ jsx("span", {
@@ -1269,6 +1277,10 @@ function SessionItem({ row, active = false, activeStepKey, showGateway, showProj
 					children: [
 						nameLabel,
 						agent?.leads ? /* @__PURE__ */ jsx(LeadChip, {}) : null,
+						agent ? /* @__PURE__ */ jsx("span", {
+							className: "w-max max-w-max min-w-0 grow basis-0 truncate text-label text-fg-4/70",
+							children: time
+						}) : null,
 						/* @__PURE__ */ jsx("span", { className: "flex-1" }),
 						unread,
 						teamUnseen > 0 ? /* @__PURE__ */ jsxs("span", {
@@ -1287,20 +1299,14 @@ function SessionItem({ row, active = false, activeStepKey, showGateway, showProj
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex h-5 items-center gap-1.5 overflow-hidden text-body-sm tracking-[-0.005em]",
 					children: [
-						agent ? /* @__PURE__ */ jsxs(Fragment$1, { children: [info.title ? /* @__PURE__ */ jsx("span", {
-							className: "min-w-0 truncate text-fg-4",
-							children: info.title
-						}) : null, /* @__PURE__ */ jsxs("span", {
-							className: "shrink-0 text-fg-4",
-							children: [model ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-								info.title ? "· " : "",
-								/* @__PURE__ */ jsx("span", {
-									className: vendorTextClass(engine, info.model),
-									children: model
-								}),
-								" · "
-							] }) : info.title ? "· " : null, time]
-						})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+						agent ? /* @__PURE__ */ jsxs(Fragment$1, { children: [model ? /* @__PURE__ */ jsx("span", {
+							className: cn("shrink-0", vendorTextClass(engine, info.model)),
+							children: model
+						}) : null, status ? /* @__PURE__ */ jsxs("span", {
+							title: status,
+							className: "min-w-0 truncate text-fg-3",
+							children: [model ? "· " : "", status]
+						}) : null] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 							className: "min-w-0 truncate text-fg-4",
 							children: parts.map((part, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 ? " · " : "", part] }, i))
 						}), /* @__PURE__ */ jsxs("span", {
@@ -1399,6 +1405,9 @@ function NameEditor({ initial, placeholder, onCommit, onCancel }) {
 		className: cn("-my-0.5 min-w-0 flex-1 rounded-sm border border-ring bg-bg px-1 py-px", "text-body-sm leading-5 text-fg-1 outline-none")
 	});
 }
+function statusLine(label) {
+	return label ? label.emoji ? `${label.emoji} ${label.text}` : label.text : void 0;
+}
 //#endregion
 //#region src/lib/team-drop.ts
 function dropZone(offsetY, height) {
@@ -1610,10 +1619,11 @@ function useGroupDrag(groups, onChange, options) {
 			return id;
 		},
 		rename: (id, name) => onChange(renameCustomGroup(groups, id, name)),
+		style: (id, look) => onChange(styleCustomGroup(groups, id, look)),
 		remove: (id) => onChange(removeCustomGroup(groups, id))
 	};
 }
-function CustomGroupHeader({ group, editing, onEditingChange, onRename, onRemove, dragProps }) {
+function CustomGroupHeader({ group, look, editing, onEditingChange, onRename, onRemove, onStyle, dragProps }) {
 	if (editing) return /* @__PURE__ */ jsx(GroupNameInput, {
 		initial: group.label ?? "",
 		onRename,
@@ -1624,9 +1634,13 @@ function CustomGroupHeader({ group, editing, onEditingChange, onRename, onRemove
 		...dragProps,
 		label: group.label ?? "",
 		count: group.rows.length,
+		caps: !custom,
 		className: cn("group/heading", custom && "cursor-grab"),
 		onDoubleClick: custom ? () => onEditingChange(true) : void 0,
-		leading: custom ? /* @__PURE__ */ jsx(GripVertical, { className: "-ml-1.5 size-3 opacity-0 group-hover/heading:opacity-60" }) : void 0,
+		leading: custom ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(GripVertical, { className: "-mr-1.5 -ml-1.5 size-3 opacity-0 group-hover/heading:opacity-60" }), look ? /* @__PURE__ */ jsx(GroupBadge, {
+			group: look,
+			onStyle
+		}) : null] }) : void 0,
 		actions: custom ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HeadingAction, {
 			label: "Rename group",
 			onClick: () => onEditingChange(true),
@@ -1666,14 +1680,14 @@ function GroupNameInput({ initial, onRename, onDone }) {
 		})
 	});
 }
-function GroupHeading({ label, count, leading, actions, className, ...rest }) {
+function GroupHeading({ label, count, leading, actions, caps = true, className, ...rest }) {
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		className: cn("group/heading flex min-h-5 items-center gap-2 px-2 text-label font-medium text-fg-4", className),
 		children: [
 			leading,
 			/* @__PURE__ */ jsx("span", {
-				className: "min-w-0 truncate uppercase tracking-wide",
+				className: cn("min-w-0 truncate", caps ? "uppercase tracking-wide" : "text-fg-3"),
 				children: label
 			}),
 			/* @__PURE__ */ jsx("span", {
@@ -1710,6 +1724,94 @@ function NewGroupButton({ onClick }) {
 		children: [/* @__PURE__ */ jsx(Plus, {}), "New group"]
 	});
 }
+const ICON_PX = 64;
+function GroupBadge({ group, onStyle }) {
+	const [error, setError] = useState();
+	const file = useRef(null);
+	const mark = group.icon ? /* @__PURE__ */ jsx("img", {
+		src: group.icon,
+		alt: "",
+		className: "size-3.5 rounded-[3px] object-cover",
+		draggable: false
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "size-2 rounded-[2px]",
+		style: { background: customGroupColor(group) }
+	});
+	if (!onStyle) return /* @__PURE__ */ jsx("span", {
+		className: "flex size-3.5 shrink-0 items-center justify-center",
+		children: mark
+	});
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": `Colour or image for ${group.name}`,
+		title: "Colour or image",
+		onClick: (e) => e.stopPropagation(),
+		onDoubleClick: (e) => e.stopPropagation(),
+		className: "flex size-3.5 shrink-0 items-center justify-center rounded-[3px] hover:ring-1 hover:ring-border",
+		children: mark
+	}) }), /* @__PURE__ */ jsxs(PopoverContent, {
+		align: "start",
+		className: "flex w-44 flex-col gap-2",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-4 gap-1.5",
+				children: PROJECT_ACCENTS.map((color) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": `Colour ${color}`,
+					onClick: () => onStyle({
+						color,
+						icon: null
+					}),
+					className: cn("h-6 rounded-[4px] ring-offset-1 ring-offset-surface", !group.icon && customGroupColor(group) === color && "ring-2 ring-fg-3"),
+					style: { background: color }
+				}, color))
+			}),
+			/* @__PURE__ */ jsx("input", {
+				ref: file,
+				type: "file",
+				accept: "image/*",
+				className: "hidden",
+				onChange: (e) => {
+					const picked = e.target.files?.[0];
+					e.target.value = "";
+					if (!picked) return;
+					setError(void 0);
+					iconFromFile(picked).then((icon) => onStyle({ icon })).catch(() => setError("That image could not be read"));
+				}
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				size: "xs",
+				onClick: () => file.current?.click(),
+				children: [/* @__PURE__ */ jsx(Image, {}), "Choose image…"]
+			}),
+			group.icon ? /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "xs",
+				onClick: () => onStyle({ icon: null }),
+				children: "Remove image"
+			}) : null,
+			error ? /* @__PURE__ */ jsx("span", {
+				className: "text-label text-danger",
+				children: error
+			}) : null
+		]
+	})] });
+}
+async function iconFromFile(file) {
+	const bitmap = await createImageBitmap(file);
+	const canvas = document.createElement("canvas");
+	canvas.width = ICON_PX;
+	canvas.height = ICON_PX;
+	const context = canvas.getContext("2d");
+	if (!context) throw new Error("no canvas");
+	const scale = Math.max(ICON_PX / bitmap.width, ICON_PX / bitmap.height);
+	const width = bitmap.width * scale;
+	const height = bitmap.height * scale;
+	context.drawImage(bitmap, (ICON_PX - width) / 2, (ICON_PX - height) / 2, width, height);
+	bitmap.close();
+	return canvas.toDataURL("image/png");
+}
 //#endregion
 //#region src/components/agent/SessionBrowser.tsx
 function rowShapeClass(active) {
@@ -1752,6 +1854,8 @@ function SessionBrowser({ rows, config, onConfigChange, scope, activeId, activeS
 	const heading = (group) => {
 		if (custom) return /* @__PURE__ */ jsx(CustomGroupHeader, {
 			group,
+			look: config.customGroups?.find((custom) => custom.id === group.custom),
+			onStyle: (look) => group.custom && drag.style(group.custom, look),
 			editing: group.custom !== void 0 && editingGroup === group.custom,
 			onEditingChange: (editing) => setEditingGroup(editing ? group.custom : void 0),
 			onRename: (name) => group.custom && drag.rename(group.custom, name),
@@ -1854,7 +1958,7 @@ function SessionBrowser({ rows, config, onConfigChange, scope, activeId, activeS
 				title: "Nothing here",
 				description: "No session to show."
 			}) : /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col gap-4 px-1",
+				className: "flex flex-col gap-2 px-1",
 				children: [groups.map((group) => /* @__PURE__ */ jsxs("div", {
 					...draggable ? drag.container(group) : {},
 					className: cn("flex flex-col gap-1 rounded-md", draggable && drag.isOver(`group:${group.key}`) && "bg-row-hover/50"),