@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/ai/compositions/attention-feed/attention-feed.js

@@ -0,0 +1,626 @@
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "../../../components/ui/alert.js";
+import { Spinner } from "../../../components/ui/spinner.js";
+import { Button, buttonVariants } from "../../../components/ui/button.js";
+import { ButtonGroup } from "../../../components/ui/button-group.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "../../../components/ui/dropdown-menu.js";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "../../../components/ui/empty.js";
+import { Skeleton } from "../../../components/ui/skeleton.js";
+import { TRIAGE_TARGET_ATTRIBUTE, TriageKbd, TriageKeyHints, triageShortcuts, useTriageKeyboard } from "../../../lib/triage-keys.js";
+import { SwipeRow } from "../../../motion/swipe-row/swipe-row.js";
+import { ConfidenceMarker } from "../../../components/assistant-ui/elements/confidence-marker.js";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { AlertCircleIcon, BellOffIcon, BotIcon, CheckIcon, ChevronDownIcon, ExternalLinkIcon, ThumbsDownIcon, XIcon } from "lucide-react";
+import { useControllableValue, useLatest, useSize } from "ahooks";
+//#region src/ai/compositions/attention-feed/attention-feed.tsx
+/** The snooze presets, in menu order. */
+const ATTENTION_SNOOZE_PRESETS = [
+	{
+		id: "1-hour",
+		label: "In 1 hour"
+	},
+	{
+		id: "tonight",
+		label: "Tonight"
+	},
+	{
+		id: "tomorrow",
+		label: "Tomorrow"
+	},
+	{
+		id: "next-week",
+		label: "Next week"
+	}
+];
+const DEFAULT_KEYMAP = {
+	a: "accept",
+	d: "dismiss",
+	n: "not-useful",
+	s: "snooze",
+	o: "open"
+};
+const ACTION_HINTS = [
+	{
+		action: "accept",
+		label: "accept"
+	},
+	{
+		action: "dismiss",
+		label: "dismiss"
+	},
+	{
+		action: "not-useful",
+		label: "not useful"
+	},
+	{
+		action: "snooze",
+		label: "snooze"
+	},
+	{
+		action: "open",
+		label: "open source"
+	}
+];
+/** Narrower than this, a card stacks its actions and swipes to accept or dismiss. */
+const NARROW_WIDTH = 512;
+const timeFormat = new Intl.DateTimeFormat("en-GB", {
+	hour: "2-digit",
+	minute: "2-digit"
+});
+function defaultFormatTime(iso) {
+	const date = new Date(iso);
+	return Number.isNaN(date.getTime()) ? iso : timeFormat.format(date);
+}
+const itemKey = (itemId) => `item:${itemId}`;
+/**
+* Proactive agent suggestions as cards: each shows its source, its summary
+* underlined by confidence (ConfidenceMarker: hover or focus a claim for its
+* basis), and the suggested action. Accept it, dismiss it (optionally as not
+* useful), snooze it to a preset, or open its source.
+*
+* Keyboard: the same model as DecisionQueue. `j`/`k` or the arrows move the
+* cursor between cards and `keymap` keys act on the card under it, with the
+* keys hinted above the list and on each button. Keys are ignored while focus
+* is in a text field.
+*
+* Decisions are non-optimistic: a card shows pending (`isPending`) until the
+* app removes it, and a failed action shows its error on the card until
+* dismissed. In a feed narrower than 32rem (a phone) each card also swipes:
+* a full swipe dismisses it, and the revealed buttons accept or dismiss.
+*/
+function AttentionFeed(props) {
+	const { items, onAccept, onDismiss, onSnooze, onOpenSource, keymap = DEFAULT_KEYMAP, isPending, actionError, onDismissActionError, onArrive, formatTime = defaultFormatTime, label = "Attention feed", isLoading = false, error, emptyLabel = "Nothing needs your attention", className } = props;
+	const baseId = React.useId();
+	const rootRef = React.useRef(null);
+	const size = useSize(rootRef);
+	const narrow = size !== void 0 && size.width < NARROW_WIDTH;
+	const lastIndex = React.useRef(0);
+	const [menu, setMenu] = React.useState(null);
+	const [focusedItemId, setFocusedItemId] = useControllableValue(props, {
+		valuePropName: "focusedId",
+		defaultValuePropName: "defaultFocusedId",
+		trigger: "onFocusChange",
+		defaultValue: null
+	});
+	const internalFocus = React.useRef(null);
+	const pending = React.useCallback((itemId) => isPending?.(itemId) ?? false, [isPending]);
+	const canOpen = (item) => item.sourceHref !== void 0 || onOpenSource !== void 0;
+	const offersOpen = items.some(canOpen);
+	const hasAction = (action) => action !== "open" || offersOpen;
+	const shortcuts = triageShortcuts(keymap, hasAction);
+	const shortcutFor = (action) => shortcuts.get(action)?.[0];
+	let activeIndex = focusedItemId == null ? -1 : items.findIndex((i) => i.id === focusedItemId);
+	const intendedMissing = focusedItemId != null && activeIndex === -1;
+	if (activeIndex === -1 && items.length > 0) activeIndex = intendedMissing ? Math.min(lastIndex.current, items.length - 1) : 0;
+	const active = activeIndex >= 0 ? items[activeIndex] : void 0;
+	const activeIdRef = useLatest(active?.id);
+	const failureId = `${baseId}-action-error`;
+	const failedItemGone = actionError != null && !items.some((item) => item.id === actionError.itemId);
+	const describe = (item) => {
+		return `${items.indexOf(item) + 1} of ${items.length}: ${item.action}`;
+	};
+	const activate = (item) => {
+		if (focusedItemId !== item.id) {
+			internalFocus.current = item.id;
+			setFocusedItemId(item.id);
+		}
+	};
+	const findItem = (key) => key === null ? void 0 : items.find((item) => itemKey(item.id) === key);
+	const act = (action, item) => {
+		if (pending(item.id)) return;
+		switch (action) {
+			case "accept":
+				onAccept(item.id);
+				return;
+			case "dismiss":
+				onDismiss(item.id);
+				return;
+			case "not-useful":
+				onDismiss(item.id, "not-useful");
+				return;
+			case "snooze":
+				setMenu({
+					itemId: item.id,
+					kind: "snooze"
+				});
+				return;
+			case "open": {
+				if (!canOpen(item)) return;
+				const link = item.sourceHref ? targetElement(itemKey(item.id))?.querySelector("a[data-action=\"open\"]") : null;
+				if (link) link.click();
+				else onOpenSource?.(item.id);
+				return;
+			}
+		}
+	};
+	const { containerRef, registerTarget, targetElement, focusLost, cursorVisible, announcement, announce, handlers } = useTriageKeyboard({
+		keymap,
+		hasAction,
+		activeKey: active ? itemKey(active.id) : null,
+		modalOpen: menu !== null,
+		onAction: (action, key) => {
+			const item = findItem(key);
+			if (item) act(action, item);
+		},
+		onStep: (fromKey, step) => {
+			const current = findItem(fromKey);
+			const index = current ? items.indexOf(current) : -1;
+			const next = items[Math.min(Math.max(index + step, 0), items.length - 1)];
+			if (next) {
+				activate(next);
+				announce(describe(next));
+				targetElement(itemKey(next.id))?.focus();
+			}
+		},
+		onFocusTarget: (key, entered) => {
+			const item = findItem(key);
+			if (!item) return;
+			activate(item);
+			if (entered) announce(describe(item));
+		}
+	});
+	React.useEffect(() => {
+		lastIndex.current = Math.max(activeIndex, 0);
+		if (!active) return;
+		if (intendedMissing) {
+			internalFocus.current = active.id;
+			setFocusedItemId(active.id);
+			announce(describe(active));
+		}
+		const element = targetElement(itemKey(active.id));
+		if (element && focusLost()) {
+			announce(describe(active));
+			element.focus();
+		}
+	});
+	React.useEffect(() => {
+		const fromInside = internalFocus.current === focusedItemId;
+		internalFocus.current = null;
+		if (!fromInside && focusedItemId != null) targetElement(itemKey(focusedItemId))?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [focusedItemId, targetElement]);
+	const seen = React.useRef(null);
+	const [arrived, setArrived] = React.useState(() => /* @__PURE__ */ new Set());
+	const onArriveRef = useLatest(onArrive);
+	React.useEffect(() => {
+		if (isLoading) return;
+		if (seen.current === null) {
+			seen.current = new Set(items.map((item) => item.id));
+			return;
+		}
+		const known = seen.current;
+		const fresh = items.filter((item) => !known.has(item.id));
+		const present = new Set(items.map((item) => item.id));
+		setArrived((current) => {
+			const next = new Set(fresh.map((item) => item.id));
+			for (const id of current) if (present.has(id)) next.add(id);
+			return next.size === current.size && [...next].every((id) => current.has(id)) ? current : next;
+		});
+		if (fresh.length === 0) return;
+		for (const item of fresh) known.add(item.id);
+		onArriveRef.current?.(fresh);
+	}, [
+		items,
+		isLoading,
+		onArriveRef
+	]);
+	const dismissFailure = () => {
+		if (activeIdRef.current) targetElement(itemKey(activeIdRef.current))?.focus();
+		onDismissActionError?.();
+	};
+	const failureAlert = (failure) => /* @__PURE__ */ jsxs(Alert, {
+		variant: "destructive",
+		"data-slot": "attention-feed-action-error",
+		className: "has-data-[slot=alert-action]:pr-8",
+		children: [
+			/* @__PURE__ */ jsx(AlertCircleIcon, { "aria-hidden": "true" }),
+			/* @__PURE__ */ jsx(AlertTitle, { children: "Action failed" }),
+			/* @__PURE__ */ jsx(AlertDescription, {
+				id: failureId,
+				className: "text-pretty",
+				children: failure.message
+			}),
+			onDismissActionError ? /* @__PURE__ */ jsx(AlertAction, {
+				className: "top-1 right-1",
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					size: "icon-xs",
+					variant: "ghost",
+					"aria-label": "Dismiss error",
+					onClick: dismissFailure,
+					children: /* @__PURE__ */ jsx(XIcon, {
+						"aria-hidden": "true",
+						className: "size-3"
+					})
+				})
+			}) : null
+		]
+	});
+	const hintId = `${baseId}-hint`;
+	const renderCard = (item) => {
+		const key = itemKey(item.id);
+		const isActive = active?.id === item.id;
+		const isItemPending = pending(item.id);
+		const failure = actionError?.itemId === item.id ? actionError : null;
+		const titleId = `${baseId}-${item.id}-title`;
+		const sourceId = `${baseId}-${item.id}-source`;
+		const summaryId = `${baseId}-${item.id}-summary`;
+		const tabIndex = isActive ? 0 : -1;
+		const keyChip = (action) => {
+			const shortcut = shortcutFor(action);
+			return shortcut ? /* @__PURE__ */ jsx(TriageKbd, {
+				shortcut,
+				className: "@max-lg/attention-feed:hidden"
+			}) : null;
+		};
+		const keyShortcut = (action) => shortcutFor(action);
+		const menuOpen = (kind) => menu?.itemId === item.id && menu.kind === kind;
+		const setMenuOpen = (kind) => (open) => setMenu(open ? {
+			itemId: item.id,
+			kind
+		} : null);
+		const card = /* @__PURE__ */ jsxs("div", {
+			"data-slot": "attention-feed-card",
+			className: cn("flex flex-col gap-2.5 rounded-lg border bg-card p-3 text-card-foreground transition-colors duration-100", "group-data-cursor/suggestion:border-ring group-data-cursor/suggestion:bg-muted/70 dark:group-data-cursor/suggestion:bg-muted", failure && "group-not-data-cursor/suggestion:border-destructive/60"),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-center gap-1.5 text-muted-foreground",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "flex shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5",
+							children: item.sourceIcon ?? /* @__PURE__ */ jsx(BotIcon, {})
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							id: sourceId,
+							className: "flex min-w-0 items-baseline gap-1.5",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "shrink-0 font-medium text-foreground",
+								children: item.source
+							}), item.sourceDetail ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								children: "·"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: item.sourceDetail
+							})] }) : null]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "ms-auto flex shrink-0 items-center ps-2",
+							children: isItemPending ? /* @__PURE__ */ jsx(Spinner, {
+								"aria-label": "Pending",
+								className: "size-3.5"
+							}) : item.createdAt ? /* @__PURE__ */ jsx("time", {
+								dateTime: item.createdAt,
+								className: "tabular-nums",
+								children: formatTime(item.createdAt)
+							}) : null
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						id: titleId,
+						className: "font-heading text-sm leading-snug font-medium",
+						children: item.action
+					}), /* @__PURE__ */ jsx("div", {
+						id: summaryId,
+						children: /* @__PURE__ */ jsx(SuggestionClaims, { item })
+					})]
+				}),
+				failure ? failureAlert(failure) : null,
+				/* @__PURE__ */ jsxs("div", {
+					"data-slot": "attention-feed-actions",
+					className: "flex flex-wrap items-center gap-2 @max-lg/attention-feed:[&>*]:grow",
+					children: [
+						/* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							size: "sm",
+							"data-action": "accept",
+							disabled: isItemPending,
+							tabIndex,
+							"aria-keyshortcuts": keyShortcut("accept"),
+							onClick: () => act("accept", item),
+							className: "pointer-coarse:h-8 @max-lg/attention-feed:h-8",
+							children: [
+								/* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }),
+								"Accept",
+								keyChip("accept")
+							]
+						}),
+						/* @__PURE__ */ jsxs(ButtonGroup, {
+							"aria-label": "Dismiss",
+							children: [/* @__PURE__ */ jsxs(Button, {
+								type: "button",
+								size: "sm",
+								variant: "outline",
+								"data-action": "dismiss",
+								disabled: isItemPending,
+								tabIndex,
+								"aria-keyshortcuts": keyShortcut("dismiss"),
+								onClick: () => act("dismiss", item),
+								className: "pointer-coarse:h-8 @max-lg/attention-feed:h-8 @max-lg/attention-feed:grow",
+								children: [
+									/* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" }),
+									"Dismiss",
+									keyChip("dismiss")
+								]
+							}), /* @__PURE__ */ jsxs(DropdownMenu, {
+								open: menuOpen("dismiss"),
+								onOpenChange: setMenuOpen("dismiss"),
+								children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+									disabled: isItemPending,
+									render: /* @__PURE__ */ jsx(Button, {
+										type: "button",
+										size: "icon-sm",
+										variant: "outline",
+										tabIndex,
+										"aria-label": "More ways to dismiss",
+										className: "pointer-coarse:size-8 @max-lg/attention-feed:size-8"
+									}),
+									children: /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })
+								}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+									align: "end",
+									className: "w-auto min-w-48",
+									children: /* @__PURE__ */ jsxs(DropdownMenuItem, {
+										"data-action": "not-useful",
+										"aria-keyshortcuts": keyShortcut("not-useful"),
+										onClick: () => act("not-useful", item),
+										children: [/* @__PURE__ */ jsx(ThumbsDownIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsxs("span", {
+											className: "flex flex-col",
+											children: [/* @__PURE__ */ jsx("span", { children: "Not useful" }), /* @__PURE__ */ jsx("span", {
+												className: "text-muted-foreground",
+												children: "Dismiss and tell the agent"
+											})]
+										})]
+									})
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsxs(DropdownMenu, {
+							open: menuOpen("snooze"),
+							onOpenChange: setMenuOpen("snooze"),
+							children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+								disabled: isItemPending,
+								render: /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									size: "sm",
+									variant: "outline",
+									"data-action": "snooze",
+									tabIndex,
+									"aria-keyshortcuts": keyShortcut("snooze"),
+									className: "pointer-coarse:h-8 @max-lg/attention-feed:h-8"
+								}),
+								children: [
+									/* @__PURE__ */ jsx(BellOffIcon, { "aria-hidden": "true" }),
+									"Snooze",
+									keyChip("snooze")
+								]
+							}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+								align: "start",
+								className: "w-auto min-w-36",
+								children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Snooze until" }), ATTENTION_SNOOZE_PRESETS.map((preset) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+									"data-preset": preset.id,
+									onClick: () => onSnooze(item.id, preset.id),
+									children: preset.label
+								}, preset.id))] })
+							})]
+						}),
+						canOpen(item) ? item.sourceHref ? /* @__PURE__ */ jsxs("a", {
+							href: item.sourceHref,
+							"data-action": "open",
+							tabIndex,
+							"aria-keyshortcuts": keyShortcut("open"),
+							"aria-disabled": isItemPending || void 0,
+							onClick: (event) => {
+								if (isItemPending) {
+									event.preventDefault();
+									return;
+								}
+								onOpenSource?.(item.id);
+							},
+							className: cn(buttonVariants({
+								variant: "ghost",
+								size: "sm"
+							}), "ms-auto aria-disabled:pointer-events-none aria-disabled:opacity-50 pointer-coarse:h-8 @max-lg/attention-feed:ms-0 @max-lg/attention-feed:h-8"),
+							children: [
+								"Open source",
+								/* @__PURE__ */ jsx(ExternalLinkIcon, {
+									"aria-hidden": "true",
+									"data-icon": "inline-end"
+								}),
+								keyChip("open")
+							]
+						}) : /* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							size: "sm",
+							variant: "ghost",
+							"data-action": "open",
+							disabled: isItemPending,
+							tabIndex,
+							"aria-keyshortcuts": keyShortcut("open"),
+							onClick: () => onOpenSource?.(item.id),
+							className: "ms-auto pointer-coarse:h-8 @max-lg/attention-feed:ms-0 @max-lg/attention-feed:h-8",
+							children: [
+								"Open source",
+								/* @__PURE__ */ jsx(ExternalLinkIcon, {
+									"aria-hidden": "true",
+									"data-icon": "inline-end"
+								}),
+								keyChip("open")
+							]
+						}) : null
+					]
+				})
+			]
+		});
+		const describedBy = [
+			sourceId,
+			summaryId,
+			failure ? failureId : null
+		].filter(Boolean);
+		return /* @__PURE__ */ jsx("li", {
+			ref: registerTarget(key),
+			[TRIAGE_TARGET_ATTRIBUTE]: key,
+			"data-slot": "attention-feed-item",
+			"data-active": isActive || void 0,
+			"data-cursor": isActive && cursorVisible || void 0,
+			"data-pending": isItemPending || void 0,
+			"data-failed": failure ? true : void 0,
+			"data-arrived": arrived.has(item.id) || void 0,
+			tabIndex,
+			"aria-labelledby": titleId,
+			"aria-describedby": describedBy.join(" "),
+			"aria-busy": isItemPending || void 0,
+			className: "group/suggestion rounded-lg outline-none data-arrived:animate-in data-arrived:fade-in data-arrived:slide-in-from-top-1 data-arrived:duration-300 motion-reduce:data-arrived:animate-none",
+			children: narrow ? /* @__PURE__ */ jsx(SwipeRow, {
+				label: item.action,
+				disabled: isItemPending,
+				actions: [{
+					id: "dismiss",
+					label: "Dismiss",
+					icon: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+				}, {
+					id: "accept",
+					label: "Accept",
+					tone: "primary",
+					icon: /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" })
+				}],
+				onAction: (id) => act(id === "accept" ? "accept" : "dismiss", item),
+				className: "rounded-lg",
+				children: card
+			}) : card
+		}, item.id);
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		ref: (element) => {
+			rootRef.current = element;
+			containerRef.current = element;
+		},
+		"aria-label": label,
+		"aria-describedby": hintId,
+		"aria-busy": isLoading || void 0,
+		"data-slot": "attention-feed",
+		"data-narrow": narrow || void 0,
+		className: cn("@container/attention-feed flex w-full flex-col gap-3 text-xs/relaxed", className),
+		...handlers,
+		children: [
+			/* @__PURE__ */ jsx(TriageKeyHints, {
+				id: hintId,
+				hidden: items.length === 0,
+				"data-slot": "attention-feed-hint",
+				keymap,
+				className: "@max-lg/attention-feed:hidden",
+				hints: ACTION_HINTS.flatMap(({ action, label: hint }) => {
+					const shortcut = shortcutFor(action);
+					return shortcut ? [{
+						key: shortcut,
+						label: hint
+					}] : [];
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "sr-only",
+				children: announcement
+			}),
+			error ? /* @__PURE__ */ jsxs(Alert, {
+				variant: "destructive",
+				"data-slot": "attention-feed-error",
+				children: [/* @__PURE__ */ jsx(AlertCircleIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx(AlertTitle, { children: error })]
+			}) : null,
+			actionError && failedItemGone ? failureAlert(actionError) : null,
+			isLoading && items.length === 0 ? /* @__PURE__ */ jsxs("div", {
+				role: "status",
+				"data-slot": "attention-feed-loading",
+				className: "flex flex-col gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Loading suggestions"
+				}), [0, 1].map((row) => /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2.5 rounded-lg border p-3",
+					children: [
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-40" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-full" }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex gap-2",
+							children: [
+								/* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-20" }),
+								/* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-24" }),
+								/* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-20" })
+							]
+						})
+					]
+				}, row))]
+			}) : null,
+			!isLoading && items.length === 0 && !error ? /* @__PURE__ */ jsx(Empty, {
+				"data-slot": "attention-feed-empty",
+				className: "border",
+				children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [/* @__PURE__ */ jsx(EmptyTitle, { children: emptyLabel }), /* @__PURE__ */ jsx(EmptyDescription, { children: "Suggestions appear here as your agents raise them." })] })
+			}) : null,
+			items.length > 0 ? /* @__PURE__ */ jsx("ul", {
+				"aria-label": "Suggestions",
+				className: "flex flex-col gap-2",
+				children: items.map(renderCard)
+			}) : null
+		]
+	});
+}
+/** One adjective per confidence, so the basis line reads "sourced · …". */
+const CONFIDENCE_LABELS = {
+	grounded: "sourced",
+	inferred: "inferred",
+	uncertain: "unverified"
+};
+/**
+* A suggestion's summary through ConfidenceMarker. The marker shows the basis
+* of the hovered or focused claim; with none hovered it shows the first, so
+* the card always carries its confidence. With neither a summary nor claims
+* there is no claim to underline, so nothing renders at all.
+*/
+function SuggestionClaims({ item }) {
+	const [hovered, setHovered] = React.useState("");
+	const claims = item.claims ?? (item.summary ? [{
+		id: `${item.id}-summary`,
+		text: item.summary,
+		confidence: item.confidence,
+		basis: item.basis
+	}] : []);
+	if (claims.length === 0) return null;
+	const fallback = claims[0]?.id ?? "";
+	return /* @__PURE__ */ jsx(ConfidenceMarker, {
+		claims,
+		hoveredId: hovered || fallback,
+		onHover: setHovered,
+		labels: CONFIDENCE_LABELS,
+		className: "max-w-none gap-1.5 [&>div]:h-auto [&_[role=status]]:items-start [&_[role=status]]:rounded-none [&_[role=status]]:border-0 [&_[role=status]]:bg-transparent [&_[role=status]]:p-0 [&_[role=status]]:text-balance [&_[role=status]]:shadow-none [&_[role=status]]:dark:bg-transparent [&_[role=status]>span:first-child]:mt-1.5 [&_[role=status]>span:first-child]:shrink-0"
+	});
+}
+//#endregion
+export { ATTENTION_SNOOZE_PRESETS, AttentionFeed };