@logicplanes/kaeso-ui 0.4.3 → 0.4.5

package/dist/components/playground.js

@@ -1,117 +1,142 @@
 "use client";
-import { t as e } from "../chunks/cn-Dj6sRgkF.js";
+import { t as e } from "../chunks/cn-BjnOAUrA.js";
 import { t } from "../chunks/use-controllable-B5Fd12Bx.js";
 import { i as n, r } from "../chunks/context-BELWW79w.js";
-import { formatContext as i, formatDuration as a, formatNumber as o, formatUSD as s } from "../format.js";
-import { t as c } from "../chunks/icon-D7ja-_Yk.js";
-import { t as l } from "../chunks/use-truncated-CW0hByYt.js";
-import { n as u } from "../chunks/button-CzuxqawA.js";
-import { t as d } from "../chunks/icon-button-CrdF_eMG.js";
-import { a as f, o as p, s as m } from "../chunks/field-TviMvYa2.js";
-import { o as h, r as g } from "../chunks/textarea--4FRL3Pb.js";
-import { r as _ } from "../chunks/slider-Ci83PGtj.js";
-import { r as v } from "../chunks/switch-BNMq_kGt.js";
-import { r as y } from "../chunks/segmented-CErcoxwi.js";
-import { n as b, r as x } from "../chunks/select-x4XVsdCI.js";
-import { i as S } from "../chunks/popover-DNN4S47w.js";
-import { r as C } from "../chunks/combobox-DjDI7SUC.js";
-import { a as ee, t as w } from "../chunks/command-list-C2Y7V_lt.js";
-import { i as T, r as E } from "../chunks/picker-popover-BxyU1U9F.js";
-import { c as D, f as O, s as k, t as A } from "../chunks/identity-BmhQ6BQ-.js";
-import { r as j } from "../chunks/markdown-DULktoTK.js";
-import { Children as M, createContext as te, forwardRef as N, isValidElement as ne, useCallback as P, useContext as re, useEffect as F, useId as ie, useLayoutEffect as I, useMemo as L, useRef as R, useState as z, useSyncExternalStore as ae } from "react";
-import { Fragment as oe, jsx as B, jsxs as V } from "react/jsx-runtime";
-import { Add01Icon as se, ArrowLeft01Icon as ce, ArrowRight01Icon as H, Cancel01Icon as U, SlidersHorizontalIcon as W } from "@hugeicons/core-free-icons";
-import { Collapsible as G } from "@base-ui/react/collapsible";
+import { formatContext as i, formatDuration as a, formatNumber as o, formatPrice as s, formatUSD as c } from "../format.js";
+import { r as l } from "../chunks/tooltip-Tkm-urbi.js";
+import { t as u } from "../chunks/use-truncated-CW0hByYt.js";
+import { n as d } from "../chunks/button-IblhXUyZ.js";
+import { t as f } from "../chunks/icon-button-Dfwpvmav.js";
+import { a as p, o as m, s as h } from "../chunks/field-D7m-yl-D.js";
+import { o as g, r as _ } from "../chunks/textarea-CO0HP6fK.js";
+import { r as v } from "../chunks/slider-CcE8GtuV.js";
+import { r as y } from "../chunks/switch-ngywMQdl.js";
+import { r as b } from "../chunks/segmented-D9i1avik.js";
+import { n as x, r as S } from "../chunks/select-BqjmQOqx.js";
+import { i as C } from "../chunks/popover-Bl5QYqnh.js";
+import { r as w } from "../chunks/combobox-DkcjkWc6.js";
+import { a as T, t as E } from "../chunks/command-list-CypqsC4T.js";
+import { i as ee, r as D } from "../chunks/picker-popover-1FHb1LQG.js";
+import { c as O, f as k, s as A, t as j } from "../chunks/identity-3Foi5F8w.js";
+import { t as M } from "../chunks/reasoning-frame-C3HdQRRS.js";
+import { r as N } from "../chunks/markdown-C565aBR7.js";
+import { Children as te, createContext as ne, forwardRef as P, isValidElement as re, useCallback as F, useContext as ie, useEffect as I, useId as L, useLayoutEffect as ae, useMemo as R, useRef as z, useState as B, useSyncExternalStore as oe } from "react";
+import { Fragment as se, jsx as V, jsxs as H } from "react/jsx-runtime";
+import { Add01Icon as U, ArrowLeft01Icon as W, ArrowRight01Icon as G, Cancel01Icon as K, SlidersHorizontalIcon as ce } from "@hugeicons/core-free-icons";
 //#region src/components/playground/composer.tsx
-var le = { size: {
+var q = { size: {
 	md: { classes: "rounded-frame" },
 	sm: { classes: "rounded-frame" }
-} }, K = { size: "md" }, ue = "(pointer: coarse)";
-function q(e) {
+} }, le = { size: "md" }, J = "(pointer: coarse)";
+function ue(e) {
 	if (typeof window > "u" || !window.matchMedia) return () => {};
-	let t = window.matchMedia(ue);
+	let t = window.matchMedia(J);
 	return t.addEventListener?.("change", e), () => t.removeEventListener?.("change", e);
 }
-var de = () => typeof window < "u" && !!window.matchMedia?.(ue).matches, fe = () => ae(q, de, () => !1), pe = /* @__PURE__ */ N(function({ value: r, defaultValue: i = "", onValueChange: a, onSubmit: o, onStop: s, submitOn: c = "enter", streaming: l = !1, loading: d = !1, disabled: f = !1, clearOnSubmit: p = !0, placeholder: m, "aria-label": h, maxRows: g = 10, size: _ = "md", actions: v, submitLabel: y, stopLabel: b, autoFocus: x, name: S, "data-force": C, className: ee }, w) {
-	let T = n(), E = m ?? T("composer.placeholder", "Write a prompt"), D = h ?? T("composer.prompt", "Prompt"), O = y ?? T("composer.send", "Send"), k = b ?? T("composer.stop", "Stop"), [A, j] = t(r, i, a), M = R(null), te = _ === "sm" ? 1 : 2, N = P(() => {
-		let e = M.current;
-		e && (e.style.height = "auto", e.style.height = `${Math.min(Math.max(e.scrollHeight, te * 20 + 16), g * 20 + 16)}px`);
-	}, [g, te]);
-	I(N, [N, A]);
-	let ne = A.trim() === "", re = !f && !l && !d && !ne, F = () => {
-		re && (o?.(A), p && r === void 0 && j(""));
-	}, ie = fe(), L = c === "enter" && !ie, z = (e) => {
-		e.key === "Enter" && (e.nativeEvent.isComposing || e.keyCode === 229 || (e.metaKey || e.ctrlKey || L && !e.shiftKey && !e.altKey) && (e.preventDefault(), F()));
+var de = () => typeof window < "u" && !!window.matchMedia?.(J).matches, fe = () => oe(ue, de, () => !1), Y = /* @__PURE__ */ P(function({ value: r, defaultValue: i = "", onValueChange: a, onSubmit: o, onStop: s, submitOn: c = "enter", streaming: l = !1, loading: u = !1, disabled: f = !1, clearOnSubmit: p = !0, placeholder: m, "aria-label": h, maxRows: g = 10, size: _ = "md", actions: v, submitLabel: y, stopLabel: b, autoFocus: x, name: S, "data-force": C, className: w }, T) {
+	let E = n(), ee = m ?? E("composer.placeholder", "Write a prompt"), D = h ?? E("composer.prompt", "Prompt"), O = y ?? E("composer.send", "Send"), k = b ?? E("composer.stop", "Stop"), [A, j] = t(r, i, a), M = L(), N = z(null), te = _ === "sm" ? 1 : 2, ne = F(() => {
+		let e = N.current;
+		e && (e.style.setProperty("--scroll-area-overflow-y-start", `${Math.max(0, e.scrollTop)}px`), e.style.setProperty("--scroll-area-overflow-y-end", `${Math.max(0, e.scrollHeight - e.clientHeight - e.scrollTop)}px`));
+	}, []), P = F(() => {
+		let e = N.current;
+		e && (e.style.height = "auto", e.style.height = `${Math.min(Math.max(e.scrollHeight, te * 20 + 16), g * 20 + 16)}px`, ne());
+	}, [
+		g,
+		te,
+		ne
+	]);
+	ae(P, [P, A]);
+	let re = A.trim() === "", ie = !f && !l && !u && !re, I = () => {
+		ie && (o?.(A), p && r === void 0 && j(""));
+	}, R = fe(), B = c === "enter" && !R, oe = (e) => {
+		e.key === "Enter" && (e.nativeEvent.isComposing || e.keyCode === 229 || (e.metaKey || e.ctrlKey || B && !e.shiftKey && !e.altKey) && (e.preventDefault(), I()));
 	};
-	return /* @__PURE__ */ V("form", {
+	return /* @__PURE__ */ H("form", {
 		onSubmit: (e) => {
-			e.preventDefault(), F();
+			e.preventDefault(), I();
 		},
 		onMouseDown: (e) => {
-			e.target === e.currentTarget && !f && (e.preventDefault(), M.current?.focus());
+			if (f || e.button !== 0 || !e.currentTarget.contains(e.target)) return;
+			let t = e.target.closest("textarea, button, a, input, select, label, [role], [tabindex]");
+			t && e.currentTarget.contains(t) || (e.preventDefault(), N.current?.focus());
 		},
 		...C ? { "data-force": C } : {},
 		...f ? { "data-disabled": "" } : {},
-		className: e("flex min-w-0 cursor-text flex-col material-composer transition-control", le.size[_].classes, f && "cursor-not-allowed", ee),
-		children: [/* @__PURE__ */ B("textarea", {
-			ref: (e) => {
-				M.current = e, typeof w == "function" ? w(e) : w && (w.current = e);
-			},
-			rows: te,
-			value: A,
-			onChange: (e) => j(e.target.value),
-			onKeyDown: z,
-			disabled: f,
-			placeholder: E,
-			"aria-label": D,
-			"aria-keyshortcuts": L ? "Enter Meta+Enter Control+Enter" : "Meta+Enter Control+Enter",
-			...L ? { enterKeyHint: "send" } : {},
-			autoFocus: x,
-			...S ? { name: S } : {},
-			className: "block w-full min-w-0 resize-none bg-transparent px-16 pt-12 pb-4 text-body text-fg outline-none scrollbar-quiet placeholder:text-fg-tertiary disabled:cursor-not-allowed disabled:text-fg-disabled"
-		}), /* @__PURE__ */ V("div", {
-			className: "flex min-w-0 items-center gap-8 p-8 pt-4",
-			children: [/* @__PURE__ */ B("div", {
-				className: "flex min-w-0 flex-1 items-center gap-4",
-				children: v
-			}), l ? /* @__PURE__ */ B(u, {
-				type: "button",
-				size: "sm",
-				variant: "secondary",
-				reserveLabels: [O, k],
-				onClick: () => s?.(),
+		className: e("flex min-w-0 cursor-text flex-col material-composer transition-control", q.size[_].classes, f && "cursor-not-allowed", w),
+		children: [
+			/* @__PURE__ */ V("textarea", {
+				ref: (e) => {
+					N.current = e, typeof T == "function" ? T(e) : T && (T.current = e);
+				},
+				rows: te,
+				value: A,
+				onChange: (e) => j(e.target.value),
+				onKeyDown: oe,
+				onScroll: ne,
 				disabled: f,
-				children: k
-			}) : /* @__PURE__ */ B(u, {
-				type: "submit",
-				size: "sm",
-				variant: "primary",
-				reserveLabels: [O, k],
-				loading: d,
-				disabled: !re && !d,
-				children: O
-			})]
-		})]
+				placeholder: ee,
+				"aria-label": D,
+				...l && !re ? { "aria-describedby": M } : {},
+				"aria-keyshortcuts": B ? "Enter Meta+Enter Control+Enter" : "Meta+Enter Control+Enter",
+				...B ? { enterKeyHint: "send" } : {},
+				autoFocus: x,
+				...S ? { name: S } : {},
+				className: "block w-full min-w-0 resize-none bg-transparent px-16 pt-12 pb-4 text-body text-fg outline-none scrollbar-quiet scroll-fade-y placeholder:text-fg-tertiary disabled:cursor-not-allowed disabled:text-fg-disabled disabled:placeholder:text-fg-disabled"
+			}),
+			/* @__PURE__ */ V("span", {
+				id: M,
+				className: "sr-only",
+				children: E("composer.stopToSend", "A response is arriving; stop it to send this prompt.")
+			}),
+			/* @__PURE__ */ H("div", {
+				className: "flex min-w-0 items-center gap-8 p-8 pt-4 controls-on-fill",
+				children: [/* @__PURE__ */ V("div", {
+					className: "flex min-w-0 flex-1 items-center gap-4",
+					children: v
+				}), l ? /* @__PURE__ */ V(d, {
+					type: "button",
+					size: "sm",
+					variant: "secondary",
+					reserveLabels: [O, k],
+					onClick: () => s?.(),
+					disabled: f,
+					children: k
+				}) : /* @__PURE__ */ V(d, {
+					type: "submit",
+					size: "sm",
+					variant: "primary",
+					reserveLabels: [O, k],
+					loading: u,
+					disabled: !ie && !u,
+					children: O
+				})]
+			})
+		]
 	});
 });
-process.env.NODE_ENV !== "production" && (pe.displayName = "Composer");
+process.env.NODE_ENV !== "production" && (Y.displayName = "Composer");
 //#endregion
 //#region src/components/playground/compare-grid.tsx
-var J = { divider: {
+var X = { divider: {
 	hairline: { classes: "hairline-l" },
 	none: { classes: "" }
-} }, Y = { divider: "hairline" }, X = /* @__PURE__ */ te({
+} }, Z = { divider: "hairline" }, pe = /* @__PURE__ */ ne({
 	index: 0,
 	count: 1,
 	divider: "hairline",
-	add: null
-}), me = /* @__PURE__ */ N(function({ children: t, "aria-label": r, onAdd: i, addLabel: a, max: o = 4, active: s, onActiveChange: c, divider: l = "hairline", className: u }, f) {
-	let p = n(), m = M.toArray(t).filter(ne), h = m.length, g = R(null), [_, v] = z(0), y = Math.min(s ?? _, Math.max(0, h - 1)), b = R(null), x = R(c);
-	I(() => {
+	add: null,
+	removing: () => {}
+}), me = "button:not([disabled]), [href], input:not([disabled]), select, textarea, [tabindex]:not([tabindex='-1'])";
+function he(e, t) {
+	let n = e?.querySelector("header");
+	((t ? n?.querySelector(t) : null) ?? n?.querySelector(me))?.focus({ preventScroll: !0 });
+}
+var ge = /* @__PURE__ */ P(function({ children: t, "aria-label": r, onAdd: i, addLabel: a, max: o = 4, active: s, onActiveChange: c, divider: l = "hairline", className: u }, d) {
+	let p = n(), m = te.toArray(t).filter(re), h = m.length, g = z(null), [_, v] = B(0), y = Math.min(s ?? _, Math.max(0, h - 1)), b = z(null), x = z(c);
+	ae(() => {
 		x.current = c;
 	});
-	let S = P((e) => {
+	let S = F((e) => {
 		let t = g.current?.children[e], n = g.current;
 		if (!t || !n) return;
 		b.current = n.scrollLeft === t.offsetLeft ? null : e;
@@ -124,28 +149,44 @@ var J = { divider: {
 		let t = Math.max(0, Math.min(h - 1, e));
 		v(t), c?.(t), S(t);
 	};
-	F(() => {
+	I(() => {
 		s !== void 0 && S(s);
 	}, [s, S]);
-	let ee = R(h);
-	I(() => {
-		h > ee.current && (v(h - 1), x.current?.(h - 1), S(h - 1)), ee.current = h;
+	let w = z(h), T = z(!1), E = z(null);
+	ae(() => {
+		let e = g.current?.children;
+		if (h > w.current) v(h - 1), x.current?.(h - 1), S(h - 1), T.current && he(e?.[h - 1]);
+		else if (h < w.current && E.current !== null) {
+			let t = Math.min(E.current, h - 1);
+			he(e?.[t], "[data-compare-remove]");
+		}
+		T.current = !1, E.current = null, w.current = h;
 	}, [h, S]);
-	let w = P(() => {
+	let ee = F((e) => {
+		E.current = e;
+	}, []), [D, O] = B(null), k = F(() => {
 		let e = g.current;
 		if (!e) return;
 		let t = e.scrollWidth - e.clientWidth - e.scrollLeft;
 		e.style.setProperty("--k-fade-start", e.scrollLeft > 1 ? "24px" : "0px"), e.style.setProperty("--k-fade-end", t > 1 ? "24px" : "0px");
+		let n = {
+			overflow: e.scrollWidth - e.clientWidth > 1,
+			start: e.scrollLeft <= 1,
+			end: t <= 1
+		};
+		O((e) => e && e.overflow === n.overflow && e.start === n.start && e.end === n.end ? e : n);
 	}, []);
-	I(() => {
+	ae(() => {
 		let e = g.current;
 		if (!e || typeof ResizeObserver > "u") return;
-		w();
-		let t = new ResizeObserver(w);
-		return t.observe(e), () => t.disconnect();
-	}, [w, h]);
-	let T = () => {
-		w();
+		k();
+		let t = new ResizeObserver(k);
+		t.observe(e);
+		for (let n of e.children) t.observe(n);
+		return () => t.disconnect();
+	}, [k, h]);
+	let A = () => {
+		k();
 		let e = g.current, t = e?.children[0];
 		if (!e || !t || !t.offsetWidth) return;
 		let n = Math.max(0, Math.min(h - 1, Math.round(e.scrollLeft / t.offsetWidth)));
@@ -154,75 +195,96 @@ var J = { divider: {
 			b.current = null;
 		}
 		n !== y && (v(n), c?.(n));
-	}, E = () => {
+	}, j = () => {
 		b.current = null;
-	}, D = h >= o, O = i ? /* @__PURE__ */ B(d, {
-		icon: se,
+	}, M = h >= o, N = i ? /* @__PURE__ */ V(f, {
+		icon: U,
 		"aria-label": a ?? p("compareGrid.addModel", "Add model"),
 		size: "sm",
-		onClick: i,
-		disabled: D,
-		...D ? { disabledReason: p("compareGrid.compareUpTo", "Compare up to {max} at once", { max: o }) } : {}
-	}) : null, k = m[y]?.props.label ?? "";
-	return /* @__PURE__ */ V("div", {
-		ref: f,
+		onClick: () => {
+			T.current = !0, i();
+		},
+		disabled: M,
+		...M ? { disabledReason: p("compareGrid.compareUpTo", "Compare up to {max} at once", { max: o }) } : {}
+	}) : null, ne = m[y]?.props.label ?? "", P = D?.overflow ? "flex" : "flex md:hidden", ie = D?.overflow ? D.start : y === 0, L = D?.overflow ? D.end : y >= h - 1, R = {
+		index: y + 1,
+		count: h
+	};
+	return /* @__PURE__ */ H("div", {
+		ref: d,
 		role: "group",
 		"aria-label": r,
 		className: e("flex h-full min-h-0 min-w-0 flex-col", u),
-		children: [h > 1 || i ? /* @__PURE__ */ V("div", {
-			className: "flex h-44 shrink-0 items-center gap-4 px-24 hairline-b md:hidden",
+		children: [(h > 1 || D?.overflow) && /* @__PURE__ */ H("div", {
+			className: e("h-44 shrink-0 items-center gap-4 px-24 hairline-b", P),
 			children: [
-				/* @__PURE__ */ B(d, {
-					icon: ce,
+				/* @__PURE__ */ V(f, {
+					icon: W,
 					"aria-label": p("compareGrid.previousColumn", "Previous column"),
 					size: "sm",
-					disabled: y === 0,
+					disabled: ie,
 					onClick: () => C(y - 1)
 				}),
-				/* @__PURE__ */ V("span", {
+				/* @__PURE__ */ H("span", {
 					"aria-live": "polite",
 					className: "min-w-0 flex-1 truncate text-center text-small text-fg-secondary tabular",
-					children: [/* @__PURE__ */ B("span", {
+					children: [/* @__PURE__ */ V("span", {
 						className: "sr-only",
-						children: p("compareGrid.columnName", "{label}, ", { label: k })
-					}), p("compareGrid.position", "{index} of {count}", {
-						index: y + 1,
-						count: h
+						children: p("compareGrid.namedPosition", "{label}, {index} of {count}", {
+							label: ne,
+							...R
+						})
+					}), /* @__PURE__ */ V("span", {
+						"aria-hidden": !0,
+						children: p("compareGrid.position", "{index} of {count}", R)
 					})]
 				}),
-				/* @__PURE__ */ B(d, {
-					icon: H,
+				/* @__PURE__ */ V(f, {
+					icon: G,
 					"aria-label": p("compareGrid.nextColumn", "Next column"),
 					size: "sm",
-					disabled: y >= h - 1,
+					disabled: L,
 					onClick: () => C(y + 1)
 				}),
-				O
+				N && /* @__PURE__ */ V("span", {
+					className: "contents md:hidden",
+					children: N
+				})
 			]
-		}) : null, /* @__PURE__ */ B("div", {
-			ref: g,
-			onScroll: T,
-			onPointerDown: E,
-			onWheel: E,
-			onTouchStart: E,
-			onKeyDown: E,
-			className: "relative min-h-0 min-w-0 flex-1 compare-grid",
-			children: m.map((e, t) => /* @__PURE__ */ B(X.Provider, {
-				value: {
-					index: t,
-					count: h,
-					divider: l,
-					add: t === h - 1 ? O : null
-				},
-				children: e
-			}, e.key ?? t))
+		}), /* @__PURE__ */ H("div", {
+			className: "flex min-h-0 min-w-0 flex-1",
+			children: [/* @__PURE__ */ V("div", {
+				ref: g,
+				onScroll: A,
+				onPointerDown: j,
+				onWheel: j,
+				onTouchStart: j,
+				onKeyDown: j,
+				className: "relative min-h-0 min-w-0 flex-1 compare-grid",
+				children: m.map((e, t) => /* @__PURE__ */ V(pe.Provider, {
+					value: {
+						index: t,
+						count: h,
+						divider: l,
+						add: h === 1 ? N : null,
+						removing: ee
+					},
+					children: e
+				}, e.key ?? t))
+			}), N && /* @__PURE__ */ V("div", {
+				className: e("hidden w-56 shrink-0 flex-col md:flex", X.divider[l].classes),
+				children: /* @__PURE__ */ V("div", {
+					className: "flex h-52 shrink-0 items-center justify-center hairline-b",
+					children: N
+				})
+			})]
 		})]
 	});
 });
-process.env.NODE_ENV !== "production" && (me.displayName = "CompareGrid");
-function he(e) {
-	let t = R(null), n = R(null), r = R(!0);
-	return F(() => {
+process.env.NODE_ENV !== "production" && (ge.displayName = "CompareGrid");
+function _e(e) {
+	let t = z(null), n = z(null), r = z(!0);
+	return I(() => {
 		let i = t.current, a = n.current;
 		if (!e || !i || !a || typeof ResizeObserver > "u") return;
 		let o = i.scrollTop, s = () => {
@@ -242,48 +304,54 @@ function he(e) {
 		content: n
 	};
 }
-var Z = /* @__PURE__ */ N(function({ label: t, header: r, actions: i, children: a, footer: o, onRemove: s, removeLabel: c, stickToEnd: l = !0, className: u }, f) {
-	let p = n(), { index: m, count: h, divider: g, add: _ } = re(X), { body: v, content: y } = he(l);
-	return /* @__PURE__ */ V("section", {
-		ref: f,
+var ve = /* @__PURE__ */ P(function({ label: t, header: r, actions: i, children: a, footer: o, onRemove: s, removeLabel: c, stickToEnd: l = !0, className: u }, d) {
+	let p = n(), { index: m, count: h, divider: g, add: _, removing: v } = ie(pe), { body: y, content: b } = _e(l);
+	return /* @__PURE__ */ H("section", {
+		ref: d,
 		"aria-label": t,
-		className: e("row-span-3 grid min-h-0 min-w-0 snap-start snap-always grid-rows-subgrid", m > 0 && J.divider[g].classes, u),
+		className: e("row-span-3 grid min-h-0 min-w-0 snap-start snap-always grid-rows-subgrid", m > 0 && X.divider[g].classes, u),
 		children: [
-			/* @__PURE__ */ V("header", {
+			/* @__PURE__ */ H("header", {
 				className: "flex h-52 min-w-0 items-center gap-4 px-24 hairline-b",
 				children: [
-					/* @__PURE__ */ B("div", {
+					/* @__PURE__ */ V("div", {
 						className: "flex min-w-0 flex-1 items-center",
 						children: r
 					}),
 					i,
-					s && h > 1 && /* @__PURE__ */ B(d, {
-						icon: U,
+					s && h > 1 && /* @__PURE__ */ V(f, {
+						"data-compare-remove": "",
+						icon: K,
 						"aria-label": c ?? p("compareGrid.remove", "Remove {label}", { label: t }),
 						size: "sm",
-						onClick: s
+						onClick: () => {
+							v(m), s();
+						}
 					}),
-					_ && /* @__PURE__ */ B("span", {
-						className: "hidden md:contents",
+					_ && /* @__PURE__ */ V("span", {
+						className: "flex shrink-0 md:hidden",
 						children: _
 					})
 				]
 			}),
-			/* @__PURE__ */ B("div", {
-				ref: v,
-				tabIndex: 0,
-				"aria-label": p("compareGrid.thread", "{label} thread", { label: t }),
-				role: "region",
-				className: "relative min-h-0 overflow-y-auto overscroll-contain scrollbar-quiet scroll-fade-y focus-ring-inset",
-				children: /* @__PURE__ */ B("div", {
+			/* @__PURE__ */ V("div", {
+				className: "min-h-0 min-w-0 compare-thread",
+				children: /* @__PURE__ */ V("div", {
 					ref: y,
-					className: "flex min-h-full flex-col px-24 pt-16 pb-24",
-					children: a
+					tabIndex: 0,
+					"aria-label": p("compareGrid.thread", "{label} thread", { label: t }),
+					role: "region",
+					className: "relative h-full min-h-0 overflow-y-auto overscroll-contain outline-none scrollbar-quiet scroll-fade-y",
+					children: /* @__PURE__ */ V("div", {
+						ref: b,
+						className: "flex min-h-full flex-col px-24 pt-16 pb-24",
+						children: a
+					})
 				})
 			}),
-			o != null && /* @__PURE__ */ B("footer", {
+			o != null && /* @__PURE__ */ V("footer", {
 				className: "flex min-h-44 min-w-0 items-start px-24 pt-12 pb-12",
-				children: /* @__PURE__ */ B("div", {
+				children: /* @__PURE__ */ V("div", {
 					className: "min-w-0 px-12",
 					children: o
 				})
@@ -291,12 +359,12 @@ var Z = /* @__PURE__ */ N(function({ label: t, header: r, actions: i, children:
 		]
 	});
 });
-process.env.NODE_ENV !== "production" && (Z.displayName = "CompareGrid.Column");
-var ge = /* @__PURE__ */ Object.assign(me, { Column: Z }), _e = { state: {
+process.env.NODE_ENV !== "production" && (ve.displayName = "CompareGrid.Column");
+var ye = /* @__PURE__ */ Object.assign(ge, { Column: ve }), be = { state: {
 	done: { classes: "" },
 	live: { classes: "" }
-} }, ve = { state: "done" };
-function ye(e) {
+} }, Q = { state: "done" };
+function xe(e) {
 	let t = e.trim().split("\n");
 	for (let e = t.length - 1; e >= 0; e--) {
 		let n = (t[e] ?? "").replace(/[*_`#>]+/g, "").trim();
@@ -304,76 +372,74 @@ function ye(e) {
 	}
 	return "";
 }
-var be = /* @__PURE__ */ N(function({ text: t = "", live: r = !1, duration: i, title: o, hint: s, open: l, defaultOpen: u, onOpenChange: d, children: f, className: p }, m) {
-	let h = n(), g = s ?? (r ? ye(t) : ""), _ = o ?? (!r && i !== void 0 ? h("responseView.thoughtFor", "Thought for {duration}", { duration: a(i) }) : h("responseView.thinking", "Thinking"));
-	return /* @__PURE__ */ V(G.Root, {
-		ref: m,
-		...l === void 0 ? {} : { open: l },
-		...u === void 0 ? {} : { defaultOpen: u },
-		...d ? { onOpenChange: (e) => d(e) } : {},
-		className: e("flex min-w-0 flex-col", p),
-		children: [/* @__PURE__ */ V(G.Trigger, {
-			className: "group/think flex h-32 min-w-0 cursor-pointer items-center gap-6 rounded-pill px-12 text-left text-small text-fg-secondary transition-control hover:bg-fill-1 hover:text-fg focus-ring-inset",
-			children: [
-				/* @__PURE__ */ B("span", {
-					className: e("shrink-0 font-medium", r && "animate-pulse-quiet reduced:animate-none"),
-					children: _
-				}),
-				/* @__PURE__ */ B(c, {
-					icon: H,
-					size: "xs",
-					className: "shrink-0 text-fg-tertiary transition-transform duration-180 ease-overlay group-data-panel-open/think:rotate-90"
-				}),
-				/* @__PURE__ */ B("span", {
-					"aria-hidden": s === void 0,
-					className: "min-w-0 flex-1 truncate text-fg-tertiary group-data-panel-open/think:invisible",
-					children: g
-				})
-			]
-		}), /* @__PURE__ */ B(G.Panel, {
-			className: "collapse-motion",
-			children: /* @__PURE__ */ V("div", {
-				className: "flex gap-12 pt-4 pb-8 pl-12",
-				children: [/* @__PURE__ */ B("span", {
-					"aria-hidden": !0,
-					className: "w-1 shrink-0 rounded-pill bg-line"
-				}), f ?? /* @__PURE__ */ B(j, {
-					text: t,
-					size: "small",
-					tone: "secondary",
-					streaming: r,
-					collapseAfter: 0,
-					wrapCode: !0,
-					className: "min-w-0 flex-1"
-				})]
-			})
-		})]
+var Se = /* @__PURE__ */ P(function({ text: e = "", live: t = !1, duration: r, title: i, hint: o, open: s, defaultOpen: c, onOpenChange: l, children: u, className: d, "data-force": f }, p) {
+	let m = n(), h = i ?? (!t && r !== void 0 ? m("responseView.thoughtFor", "Thought for {duration}", { duration: a(r) }) : m("responseView.thinking", "Thinking"));
+	return /* @__PURE__ */ V(M, {
+		ref: p,
+		heading: h,
+		preview: o ?? (t ? xe(e) : ""),
+		previewHidden: o === void 0,
+		live: t,
+		open: s,
+		defaultOpen: c,
+		onOpenChange: l,
+		className: d,
+		"data-force": f,
+		children: u ?? /* @__PURE__ */ V(N, {
+			text: e,
+			size: "small",
+			tone: "secondary",
+			streaming: t,
+			collapseAfter: 0,
+			wrapCode: !0,
+			className: "min-w-0"
+		})
 	});
 });
-process.env.NODE_ENV !== "production" && (be.displayName = "Reasoning");
+process.env.NODE_ENV !== "production" && (Se.displayName = "Reasoning");
 //#endregion
 //#region src/components/playground/response-view.tsx
-var Q = { status: {
+var Ce = { status: {
 	pending: { classes: "" },
 	streaming: { classes: "" },
 	done: { classes: "" },
 	stopped: { classes: "" },
 	incomplete: { classes: "" },
 	error: { classes: "" }
-} }, xe = { status: "done" };
-function Se(e, t) {
+} }, we = { status: "done" };
+function Te(e, t) {
 	return t === "max_output_tokens" ? e("responseView.outputLimit", "Stopped at the output limit") : t === "content_filter" ? e("responseView.contentFilter", "Stopped by the provider's content filter") : e("responseView.incomplete", "The model ended the response early");
 }
-var Ce = /* @__PURE__ */ N(function({ text: t = "", reasoning: r, status: i = "done", reasoningDuration: a, reasoningOpen: o, defaultReasoningOpen: s, onReasoningOpenChange: c, incompleteReason: l, error: d, onRetry: f, footer: p, "aria-label": m, className: h }, g) {
-	let _ = n(), v = m ?? _("responseView.response", "Response"), y = ie(), b = i === "pending" || i === "streaming", x = t.trim() !== "", S = !!r && r.trim() !== "", C = b && S && !x;
-	return /* @__PURE__ */ V("article", {
+var Ee = /* @__PURE__ */ V("span", {
+	"aria-hidden": !0,
+	"data-caret": "",
+	className: "ml-2 inline-block h-16 w-2 rounded-pill bg-fg-tertiary align-text-bottom animate-pulse-quiet forced-line reduced:animate-none"
+});
+function De(e, t) {
+	let [n, r] = B(""), i = z(e);
+	return I(() => {
+		let n = i.current;
+		i.current = e, e === "pending" || e === "streaming" ? r("") : (n === "pending" || n === "streaming") && e !== "error" && r(t);
+	}, [e, t]), n;
+}
+var Oe = /* @__PURE__ */ P(function({ text: t = "", reasoning: r, status: i = "done", reasoningDuration: a, reasoningOpen: o, defaultReasoningOpen: s, onReasoningOpenChange: c, incompleteReason: l, error: u, onRetry: f, footer: p, "aria-label": m, className: h }, g) {
+	let _ = n(), v = m ?? _("responseView.response", "Response"), y = L(), b = i === "pending" || i === "streaming", x = t.trim() !== "", S = !!r && r.trim() !== "", C = b && S && !x, w = De(i, i === "stopped" ? _("responseView.endedStopped", "{label} stopped", { label: v }) : i === "incomplete" ? _("responseView.endedIncomplete", "{label}: {reason}", {
+		label: v,
+		reason: Te(_, l)
+	}) : _("responseView.endedDone", "{label} finished", { label: v })), T = f ? /* @__PURE__ */ V(d, {
+		size: "sm",
+		variant: "secondary",
+		onClick: f,
+		children: _("responseView.retry", "Retry")
+	}) : null;
+	return /* @__PURE__ */ H("article", {
 		ref: g,
 		"aria-label": v,
 		"aria-busy": b || void 0,
 		"aria-describedby": y,
 		className: e("flex min-w-0 flex-col gap-8", h),
 		children: [
-			S && /* @__PURE__ */ B(be, {
+			S && /* @__PURE__ */ V(Se, {
 				text: r,
 				live: C,
 				duration: a,
@@ -381,213 +447,215 @@ var Ce = /* @__PURE__ */ N(function({ text: t = "", reasoning: r, status: i = "d
 				defaultOpen: s,
 				onOpenChange: c
 			}),
-			x ? /* @__PURE__ */ B(j, {
+			x ? /* @__PURE__ */ V(N, {
 				text: t,
 				size: "lg",
 				streaming: b,
 				collapseAfter: 0,
 				wrapCode: !0,
-				className: "px-12"
-			}) : b && !S ? /* @__PURE__ */ B("div", {
+				trailing: i === "streaming" ? Ee : void 0,
+				className: "markdown-text-inset"
+			}) : b && !S ? /* @__PURE__ */ V("div", {
 				"aria-hidden": !0,
-				className: "h-22 px-12"
+				"data-pending": "",
+				className: "flex h-22 items-center px-12",
+				children: /* @__PURE__ */ V("span", { className: "h-16 w-2 rounded-pill bg-fg-tertiary animate-pulse-quiet forced-line reduced:animate-none" })
 			}) : null,
-			i === "stopped" && /* @__PURE__ */ V("div", {
-				className: "flex min-h-24 flex-wrap items-center gap-x-12 gap-y-4 px-12",
-				children: [/* @__PURE__ */ B("span", {
-					className: "text-small text-fg-tertiary",
-					children: x ? _("responseView.stopped", "Stopped") : _("responseView.stoppedBeforeResponse", "Stopped before a response")
-				}), f && /* @__PURE__ */ B(u, {
-					size: "xs",
-					variant: "ghost",
-					onClick: f,
-					children: _("responseView.retry", "Retry")
-				})]
-			}),
-			i === "incomplete" && /* @__PURE__ */ V("div", {
-				className: "flex min-h-24 flex-wrap items-center gap-x-12 gap-y-4 px-12",
-				children: [/* @__PURE__ */ B("span", {
+			(i === "stopped" || i === "incomplete") && /* @__PURE__ */ H("div", {
+				className: "flex min-h-32 flex-wrap items-center gap-x-12 gap-y-4 px-12",
+				children: [/* @__PURE__ */ V("span", {
 					className: "text-small text-fg-secondary",
-					children: Se(_, l)
-				}), f && /* @__PURE__ */ B(u, {
-					size: "xs",
-					variant: "ghost",
-					onClick: f,
-					children: _("responseView.retry", "Retry")
-				})]
+					children: i === "incomplete" ? Te(_, l) : x ? _("responseView.stopped", "Stopped") : _("responseView.stoppedBeforeResponse", "Stopped before a response")
+				}), T]
 			}),
-			i === "error" && /* @__PURE__ */ V("div", {
-				role: "alert",
-				className: "flex min-h-24 flex-col items-start gap-4 px-12",
-				children: [
-					/* @__PURE__ */ B("span", {
+			i === "error" && /* @__PURE__ */ H("div", {
+				className: "flex flex-col items-start gap-8 px-12",
+				children: [/* @__PURE__ */ H("div", {
+					role: "alert",
+					className: "flex min-w-0 flex-col gap-4",
+					children: [/* @__PURE__ */ V("span", {
 						className: "text-small font-medium text-fg",
-						children: x ? _("responseView.stoppedEarly", "The response stopped early") : _("responseView.noResponse", "No response")
-					}),
-					d && /* @__PURE__ */ B(j, {
-						text: d,
+						children: x ? _("responseView.failedPartway", "The response failed partway") : _("responseView.noResponse", "No response")
+					}), u && /* @__PURE__ */ V(N, {
+						text: u,
 						size: "small",
 						tone: "secondary",
 						className: "max-w-prose min-w-0"
-					}),
-					f && /* @__PURE__ */ B(u, {
-						size: "xs",
-						variant: "secondary",
-						onClick: f,
-						className: "mt-4",
-						children: _("responseView.retry", "Retry")
-					})
-				]
+					})]
+				}), T]
 			}),
-			i === "done" && !x && /* @__PURE__ */ B("span", {
+			i === "done" && !x && /* @__PURE__ */ V("span", {
 				className: "px-12 text-small text-fg-tertiary",
 				children: _("responseView.noText", "The model returned no text")
 			}),
-			p,
-			/* @__PURE__ */ B("span", {
+			p != null && /* @__PURE__ */ V("div", {
+				className: "min-w-0 px-12",
+				children: p
+			}),
+			/* @__PURE__ */ V("span", {
 				id: y,
 				className: "sr-only",
 				children: i === "pending" ? _("responseView.waiting", "Waiting for the response") : i === "streaming" ? _("responseView.responding", "Responding") : ""
+			}),
+			/* @__PURE__ */ V("span", {
+				role: "status",
+				className: "sr-only",
+				children: w
 			})
 		]
 	});
 });
-process.env.NODE_ENV !== "production" && (Ce.displayName = "ResponseView");
-var we = {
+process.env.NODE_ENV !== "production" && (Oe.displayName = "ResponseView");
+var ke = {
 	2: "line-clamp-2",
 	3: "line-clamp-3",
 	4: "line-clamp-4",
 	6: "line-clamp-6"
-}, Te = /* @__PURE__ */ N(function({ children: t, maxLines: r = 4, "aria-label": i, className: a }, o) {
-	let s = n(), c = i ?? s("userMessage.prompt", "Prompt"), d = s("userMessage.showAll", "Show all"), f = s("userMessage.showLess", "Show less"), [p, m] = z(!1), h = R(null), g = l(h, r > 0 && !p);
-	return /* @__PURE__ */ V("div", {
+}, Ae = /* @__PURE__ */ P(function({ children: t, maxLines: r = 4, "aria-label": i, className: a }, o) {
+	let s = n(), c = i ?? s("userMessage.prompt", "Prompt"), l = s("userMessage.showAll", "Show all"), f = s("userMessage.showLess", "Show less"), [p, m] = B(!1), h = L(), g = z(null), _ = u(g, r > 0 && !p);
+	return /* @__PURE__ */ H("div", {
 		ref: o,
 		role: "group",
 		"aria-label": c,
-		className: e("flex min-w-0 flex-col items-start gap-2 px-12", a),
-		children: [/* @__PURE__ */ B("p", {
-			ref: h,
-			className: e("max-w-prose min-w-0 text-body font-medium whitespace-pre-wrap wrap-break-word text-fg-secondary", r !== 0 && !p && we[r]),
+		className: e("flex min-w-0 flex-col items-start gap-2", a),
+		children: [/* @__PURE__ */ V("p", {
+			id: h,
+			ref: g,
+			className: e("max-w-prose min-w-0 px-12 text-body font-medium whitespace-pre-wrap wrap-break-word text-fg-secondary", r !== 0 && !p && ke[r]),
 			children: t
-		}), (g || p) && /* @__PURE__ */ B(u, {
-			size: "xs",
-			variant: "link",
-			reserveLabels: [d, f],
+		}), (_ || p) && /* @__PURE__ */ V(d, {
+			size: "sm",
+			variant: "quiet",
+			"aria-expanded": p,
+			"aria-controls": h,
+			reserveLabels: [l, f],
 			onClick: () => m((e) => !e),
-			className: "text-fg-tertiary",
-			children: p ? f : d
+			children: p ? f : l
 		})]
 	});
 });
-process.env.NODE_ENV !== "production" && (Te.displayName = "UserMessage");
-var Ee = /* @__PURE__ */ N(function({ children: t, className: n }, r) {
-	return /* @__PURE__ */ B("div", {
+process.env.NODE_ENV !== "production" && (Ae.displayName = "UserMessage");
+var je = /* @__PURE__ */ P(function({ children: t, className: n }, r) {
+	return /* @__PURE__ */ V("div", {
 		ref: r,
 		className: e("flex min-w-0 flex-col gap-32", n),
 		children: t
 	});
 });
-process.env.NODE_ENV !== "production" && (Ee.displayName = "Thread");
+process.env.NODE_ENV !== "production" && (je.displayName = "Thread");
 //#endregion
 //#region src/components/playground/response-metrics.tsx
-var De = { size: {
+var Me = { size: {
 	sm: { classes: "text-caption gap-x-12 gap-y-2" },
 	md: { classes: "text-small gap-x-16 gap-y-4" }
-} }, Oe = { size: "sm" };
-function ke(e) {
+} }, Ne = { size: "sm" };
+function Pe(e) {
 	return !Number.isFinite(e) || e < 0 ? "—" : a(e, { precise: !0 });
 }
-function Ae(e) {
-	let [t, n] = z(() => Date.now());
-	return F(() => {
+function Fe(e) {
+	let [t, n] = B(() => Date.now());
+	return I(() => {
 		if (e === void 0) return;
 		n(Date.now());
 		let t = setInterval(() => n(Date.now()), 100);
 		return () => clearInterval(t);
 	}, [e]), e === void 0 ? void 0 : Math.max(0, t - e);
 }
-function je(e) {
-	return /[1-9]/.test(e) ? s(e, { decimals: 6 }) : s("0", { decimals: 0 });
+function Ie(e) {
+	return /[1-9]/.test(e) ? s(e) : c("0", { decimals: 0 });
 }
 function $(e) {
 	return typeof e == "number" && Number.isFinite(e);
 }
-function Me({ label: t, width: n, children: r }) {
-	return /* @__PURE__ */ V("div", {
+function Le({ label: e, reserve: t, children: n }) {
+	return /* @__PURE__ */ H("div", {
 		className: "flex items-baseline gap-4 whitespace-nowrap",
-		children: [/* @__PURE__ */ B("dt", {
+		children: [/* @__PURE__ */ V("dt", {
 			className: "text-fg-tertiary",
-			children: t
-		}), /* @__PURE__ */ B("dd", {
-			className: e("text-fg-secondary tabular", n),
-			children: r
+			children: e
+		}), /* @__PURE__ */ H("dd", {
+			className: "inline-grid justify-items-start text-fg-secondary tabular",
+			children: [/* @__PURE__ */ V("span", {
+				className: "col-start-1 row-start-1",
+				children: n
+			}), /* @__PURE__ */ V("span", {
+				"aria-hidden": !0,
+				"data-reserve": t,
+				className: "invisible col-start-1 row-start-1 reserve-text"
+			})]
 		})]
 	});
 }
-var Ne = /* @__PURE__ */ N(function({ timeToFirstToken: t, duration: r, inputTokens: i, outputTokens: a, reasoningTokens: s, reasoning: c, live: l = !1, startedAt: u, cost: d, size: f = "sm", className: p }, m) {
-	let h = n(), g = Ae(l && u !== void 0 && !$(r) ? u : void 0), _ = $(i) || $(a), v = d != null && d !== "", y = e("flex min-w-0 flex-wrap items-baseline", De.size[f].classes, p);
-	if (!l && !_ && !v && !$(t) && !$(r) && !$(s)) return /* @__PURE__ */ B("dl", {
-		ref: m,
-		"aria-label": h("responseMetrics.metrics", "Metrics"),
-		className: e(y, f === "sm" ? "min-h-16" : "min-h-18")
+var Re = /* @__PURE__ */ P(function({ timeToFirstToken: t, duration: r, inputTokens: i, outputTokens: c, reasoningTokens: l, reasoning: u, live: d = !1, startedAt: f, cost: p, size: m = "sm", className: h }, g) {
+	let _ = n(), v = Fe(d && f !== void 0 && !$(r) ? f : void 0), y = $(i) || $(c), b = p != null && p !== "", x = e("flex min-w-0 flex-wrap items-baseline", Me.size[m].classes, h);
+	if (!d && !y && !b && !$(t) && !$(r) && !$(l)) return /* @__PURE__ */ V("dl", {
+		ref: g,
+		"aria-label": _("responseMetrics.metrics", "Metrics"),
+		className: e(x, m === "sm" ? "min-h-16" : "min-h-18")
 	});
-	let b = (e) => l || e, x = /* @__PURE__ */ V("span", {
+	let S = (e) => d || e, C = /* @__PURE__ */ H("span", {
 		className: "text-fg-tertiary",
-		children: [/* @__PURE__ */ B("span", {
+		children: [/* @__PURE__ */ V("span", {
 			"aria-hidden": !0,
 			children: "—"
-		}), /* @__PURE__ */ B("span", {
+		}), /* @__PURE__ */ V("span", {
 			className: "sr-only",
-			children: h("responseMetrics.notYetKnown", "not yet known")
+			children: d ? _("responseMetrics.notYetKnown", "not yet known") : _("responseMetrics.notReported", "not reported")
 		})]
-	});
-	return /* @__PURE__ */ V("dl", {
-		ref: m,
-		"aria-label": h("responseMetrics.metrics", "Metrics"),
-		className: y,
+	}), w = (e) => e < 1e4 ? _("format.seconds", "{s} s", { s: o(Math.floor(e / 100) / 10, {
+		minimumFractionDigits: 1,
+		maximumFractionDigits: 1
+	}) }) : e < 6e4 ? _("format.seconds", "{s} s", { s: o(Math.floor(e / 1e3)) }) : a(Math.floor(e / 1e3) * 1e3), T = Pe(8880);
+	return /* @__PURE__ */ H("dl", {
+		ref: g,
+		"aria-label": _("responseMetrics.metrics", "Metrics"),
+		className: x,
 		children: [
-			b($(t)) && /* @__PURE__ */ B(Me, {
-				label: h("responseMetrics.firstToken", "First token"),
-				width: "min-w-40",
-				children: $(t) ? ke(t) : x
+			S($(t)) && /* @__PURE__ */ V(Le, {
+				label: _("responseMetrics.firstToken", "First token"),
+				reserve: T,
+				children: $(t) ? Pe(t) : C
 			}),
-			b($(r)) && /* @__PURE__ */ B(Me, {
-				label: h("responseMetrics.total", "Total"),
-				width: "min-w-40",
-				children: $(r) ? ke(r) : g === void 0 ? x : /* @__PURE__ */ B("span", {
+			S($(r)) && /* @__PURE__ */ V(Le, {
+				label: _("responseMetrics.total", "Total"),
+				reserve: T,
+				children: $(r) ? Pe(r) : v === void 0 ? C : /* @__PURE__ */ V("span", {
 					className: "text-fg-tertiary",
-					children: ke(g)
+					children: w(v)
 				})
 			}),
-			b(_) && /* @__PURE__ */ B(Me, {
-				label: h("responseMetrics.tokens", "Tokens"),
-				width: "min-w-48",
-				children: _ ? h("responseMetrics.tokensValue", "{input} in · {output} out", {
+			S(y) && /* @__PURE__ */ V(Le, {
+				label: _("responseMetrics.tokens", "Tokens"),
+				reserve: _("responseMetrics.tokensValue", "{input} in · {output} out", {
+					input: o(8888),
+					output: o(888)
+				}),
+				children: y ? _("responseMetrics.tokensValue", "{input} in · {output} out", {
 					input: $(i) ? o(i) : "—",
-					output: $(a) ? o(a) : "—"
-				}) : x
+					output: $(c) ? o(c) : "—"
+				}) : C
 			}),
-			($(s) || l && c) && /* @__PURE__ */ B(Me, {
-				label: h("responseMetrics.reasoning", "Reasoning"),
-				width: "min-w-24",
-				children: $(s) ? o(s) : x
+			($(l) || u) && /* @__PURE__ */ V(Le, {
+				label: _("responseMetrics.reasoning", "Reasoning"),
+				reserve: o(888),
+				children: $(l) ? o(l) : C
 			}),
-			b(v) && /* @__PURE__ */ B(Me, {
-				label: h("responseMetrics.cost", "Cost"),
-				width: "min-w-40",
-				children: v ? je(d) : x
+			S(b) && /* @__PURE__ */ V(Le, {
+				label: _("responseMetrics.cost", "Cost"),
+				reserve: s("0.008888"),
+				children: b ? Ie(p) : C
 			})
 		]
 	});
 });
-process.env.NODE_ENV !== "production" && (Ne.displayName = "ResponseMetrics");
+process.env.NODE_ENV !== "production" && (Re.displayName = "ResponseMetrics");
 //#endregion
 //#region src/components/playground/parameter-panel.tsx
-var Pe = { layout: {
+var ze = { layout: {
 	popover: { classes: "w-full gap-20" },
 	panel: { classes: "w-full gap-24" }
-} }, Fe = { layout: "popover" };
-function Ie(e) {
+} }, Be = { layout: "popover" };
+function Ve(e) {
 	return [
 		{
 			value: "none",
@@ -619,26 +687,25 @@ function Ie(e) {
 		}
 	];
 }
-function Le({ label: t, value: r, unset: i, min: a, max: s, step: c, digits: l, disabled: u, onChange: d }) {
-	let f = ie(), p = n(), m = o(r, {
+function He({ label: t, value: r, unset: i, min: a, max: s, step: c, digits: l, disabled: u, onChange: d }) {
+	let f = n(), p = o(r, {
 		minimumFractionDigits: l,
 		maximumFractionDigits: l
 	});
-	return /* @__PURE__ */ V("div", {
+	return /* @__PURE__ */ H("div", {
 		className: "flex flex-col gap-8",
-		children: [/* @__PURE__ */ V("div", {
+		children: [/* @__PURE__ */ H("div", {
 			className: "flex items-baseline justify-between gap-12",
-			children: [/* @__PURE__ */ B("span", {
-				id: f,
+			children: [/* @__PURE__ */ V("span", {
 				className: e("text-body font-medium", u ? "text-fg-disabled" : "text-fg"),
 				children: t
-			}), /* @__PURE__ */ B("span", {
+			}), /* @__PURE__ */ V("span", {
 				className: e("text-small tabular", i ? "text-fg-tertiary" : "text-fg-secondary"),
-				children: i ? p("parameterPanel.valueDefault", "{value} default", { value: m }) : m
+				children: i ? f("parameterPanel.valueDefault", "{value} (default)", { value: p }) : p
 			})]
-		}), /* @__PURE__ */ B("div", {
+		}), /* @__PURE__ */ V("div", {
 			className: "px-8",
-			children: /* @__PURE__ */ B(_, {
+			children: /* @__PURE__ */ V(v, {
 				"aria-label": t,
 				min: a,
 				max: s,
@@ -654,186 +721,206 @@ function Le({ label: t, value: r, unset: i, min: a, max: s, step: c, digits: l,
 		})]
 	});
 }
-var Re = /* @__PURE__ */ N(function({ value: t, onValueChange: r, defaults: i, instructions: a = !0, sampling: o = !0, reasoning: s = !1, maxOutputTokensLimit: c, disabled: l = !1, layout: d = "popover", className: f }, p) {
-	let m = n(), _ = (e) => r({
+var Ue = /* @__PURE__ */ P(function({ value: t, onValueChange: r, defaults: i, instructions: a = !0, sampling: s = !0, reasoning: c = !1, maxOutputTokensLimit: l, disabled: u = !1, layout: f = "popover", className: p }, m) {
+	let h = n(), v = (e) => r({
 		...t,
 		...e
-	}), v = Ie(m), b = s === !0 ? v : Array.isArray(s) ? v.filter((e) => s.includes(e.value)) : [], S = t.temperature !== void 0 || t.topP !== void 0 || t.maxOutputTokens !== void 0 || t.reasoningEffort !== void 0 || t.reasoningSummary !== void 0;
-	return /* @__PURE__ */ V("div", {
-		ref: p,
-		className: e("flex min-w-0 flex-col", Pe.layout[d].classes, f),
+	}), y = Ve(h), x = c === !0 ? y : Array.isArray(c) ? y.filter((e) => c.includes(e.value)) : [], C = t.temperature !== void 0 || t.topP !== void 0 || t.maxOutputTokens !== void 0 || t.reasoningEffort !== void 0 || t.reasoningSummary !== void 0;
+	return /* @__PURE__ */ H("div", {
+		ref: m,
+		className: e("flex min-w-0 flex-col", ze.layout[f].classes, p),
 		children: [
-			a && /* @__PURE__ */ B(g, {
-				label: m("parameterPanel.systemInstructions", "System instructions"),
+			a && /* @__PURE__ */ V(_, {
+				label: h("parameterPanel.systemInstructions", "System instructions"),
 				rows: 3,
 				maxRows: 8,
-				placeholder: m("parameterPanel.instructionsPlaceholder", "You are a helpful assistant."),
+				placeholder: h("parameterPanel.instructionsPlaceholder", "You are a helpful assistant."),
 				value: t.instructions ?? "",
-				disabled: l,
-				onChange: (e) => _({ instructions: e.target.value === "" ? void 0 : e.target.value })
+				disabled: u,
+				onChange: (e) => v({ instructions: e.target.value === "" ? void 0 : e.target.value })
 			}),
-			o && /* @__PURE__ */ V(oe, { children: [/* @__PURE__ */ B(Le, {
-				label: m("parameterPanel.temperature", "Temperature"),
+			s && /* @__PURE__ */ H(se, { children: [/* @__PURE__ */ V(He, {
+				label: h("parameterPanel.temperature", "Temperature"),
 				value: t.temperature ?? i?.temperature ?? 1,
 				unset: t.temperature === void 0,
 				min: 0,
 				max: 2,
 				step: .05,
 				digits: 2,
-				disabled: l,
-				onChange: (e) => _({ temperature: e })
-			}), /* @__PURE__ */ B(Le, {
-				label: m("parameterPanel.topP", "Top P"),
+				disabled: u,
+				onChange: (e) => v({ temperature: e })
+			}), /* @__PURE__ */ V(He, {
+				label: h("parameterPanel.topP", "Top P"),
 				value: t.topP ?? i?.topP ?? 1,
 				unset: t.topP === void 0,
 				min: 0,
 				max: 1,
 				step: .01,
 				digits: 2,
-				disabled: l,
-				onChange: (e) => _({ topP: e })
+				disabled: u,
+				onChange: (e) => v({ topP: e })
 			})] }),
-			/* @__PURE__ */ B(h, {
-				label: m("parameterPanel.maxOutputTokens", "Max output tokens"),
+			/* @__PURE__ */ V(g, {
+				label: h("parameterPanel.maxOutputTokens", "Max output tokens"),
 				size: "sm",
-				placeholder: m("parameterPanel.modelDefault", "Model default"),
+				placeholder: h("parameterPanel.modelDefault", "Model default"),
 				align: "start",
 				min: "1",
-				...c ? { max: String(c) } : {},
+				...l ? {
+					max: String(l),
+					description: h("parameterPanel.maxOutputTokensLimit", "Up to {max} for this model", { max: o(l) })
+				} : {},
 				step: "256",
 				value: t.maxOutputTokens === void 0 ? "" : String(t.maxOutputTokens),
-				disabled: l,
+				disabled: u,
 				onValueChange: (e) => {
 					let t = Number(e);
-					_({ maxOutputTokens: e.trim() === "" || !Number.isFinite(t) || t <= 0 ? void 0 : Math.round(t) });
+					v({ maxOutputTokens: e.trim() === "" || !Number.isFinite(t) || t <= 0 ? void 0 : Math.round(t) });
 				}
 			}),
-			b.length > 0 && /* @__PURE__ */ V(oe, { children: [/* @__PURE__ */ B(x, {
-				label: m("parameterPanel.reasoningEffort", "Reasoning effort"),
+			x.length > 0 && /* @__PURE__ */ H(se, { children: [/* @__PURE__ */ V(S, {
+				label: h("parameterPanel.reasoningEffort", "Reasoning effort"),
 				size: "sm",
 				fullWidth: !0,
-				disabled: l,
+				disabled: u,
 				value: t.reasoningEffort ?? "default",
 				options: [{
 					value: "default",
-					label: m("parameterPanel.modelDefault", "Model default")
-				}, ...b],
-				onValueChange: (e) => _({ reasoningEffort: e === "default" ? void 0 : e })
-			}), /* @__PURE__ */ V("div", {
+					label: h("parameterPanel.modelDefault", "Model default")
+				}, ...x],
+				onValueChange: (e) => v({ reasoningEffort: e === "default" ? void 0 : e })
+			}), /* @__PURE__ */ H("div", {
 				className: "flex flex-col gap-8",
-				children: [/* @__PURE__ */ B("span", {
-					className: e("text-body font-medium", l ? "text-fg-disabled" : "text-fg"),
-					children: m("parameterPanel.reasoningSummary", "Reasoning summary")
-				}), /* @__PURE__ */ B(y, {
-					"aria-label": m("parameterPanel.reasoningSummary", "Reasoning summary"),
+				children: [/* @__PURE__ */ V("span", {
+					className: e("text-body font-medium", u ? "text-fg-disabled" : "text-fg"),
+					children: h("parameterPanel.reasoningSummary", "Reasoning summary")
+				}), /* @__PURE__ */ V(b, {
+					"aria-label": h("parameterPanel.reasoningSummary", "Reasoning summary"),
 					size: "sm",
 					fullWidth: !0,
-					disabled: l,
+					disabled: u,
 					value: t.reasoningSummary ?? "auto",
 					options: [
 						{
 							value: "auto",
-							label: m("parameterPanel.summaryAuto", "Auto")
+							label: h("parameterPanel.summaryAuto", "Auto")
 						},
 						{
 							value: "concise",
-							label: m("parameterPanel.summaryConcise", "Concise")
+							label: h("parameterPanel.summaryConcise", "Concise")
 						},
 						{
 							value: "detailed",
-							label: m("parameterPanel.summaryDetailed", "Detailed")
+							label: h("parameterPanel.summaryDetailed", "Detailed")
 						},
 						{
 							value: "off",
-							label: m("parameterPanel.summaryOff", "Off")
+							label: h("parameterPanel.summaryOff", "Off")
 						}
 					],
-					onValueChange: (e) => _({ reasoningSummary: e === "auto" ? void 0 : e })
+					onValueChange: (e) => v({ reasoningSummary: e === "auto" ? void 0 : e })
 				})]
 			})] }),
-			/* @__PURE__ */ B("div", {
+			/* @__PURE__ */ V("div", {
 				className: "flex justify-end",
-				children: /* @__PURE__ */ B(u, {
+				children: /* @__PURE__ */ V(d, {
 					size: "sm",
 					variant: "ghost",
-					disabled: l || !S,
+					disabled: u || !C,
 					onClick: () => r(t.instructions === void 0 ? {} : { instructions: t.instructions }),
-					children: m("parameterPanel.resetToDefaults", "Reset to defaults")
+					children: h("parameterPanel.resetToDefaults", "Reset to defaults")
 				})
 			})
 		]
 	});
 });
-process.env.NODE_ENV !== "production" && (Re.displayName = "ParameterPanel");
-var ze = /* @__PURE__ */ N(function({ trigger: e, title: t, open: r, defaultOpen: i, onOpenChange: a, side: o = "bottom", align: s = "end", ...c }, l) {
-	let u = n(), f = t ?? u("parameterPopover.parameters", "Parameters");
-	return /* @__PURE__ */ V(S, {
+process.env.NODE_ENV !== "production" && (Ue.displayName = "ParameterPanel");
+var We = /* @__PURE__ */ P(function({ trigger: e, title: t, open: r, defaultOpen: i, onOpenChange: a, side: o = "bottom", align: s = "end", ...c }, l) {
+	let u = n(), d = t ?? u("parameterPopover.parameters", "Parameters");
+	return /* @__PURE__ */ H(C, {
 		trapFocus: !0,
 		...r === void 0 ? {} : { open: r },
 		...i === void 0 ? {} : { defaultOpen: i },
 		...a ? { onOpenChange: a } : {},
-		children: [/* @__PURE__ */ B(S.Trigger, { children: e ?? /* @__PURE__ */ B(d, {
-			icon: W,
-			"aria-label": f,
+		children: [/* @__PURE__ */ V(C.Trigger, { children: e ?? /* @__PURE__ */ V(f, {
+			icon: ce,
+			"aria-label": d,
 			size: "sm"
-		}) }), /* @__PURE__ */ B(S.Content, {
+		}) }), /* @__PURE__ */ V(C.Content, {
 			ref: l,
-			title: f,
+			"aria-label": d,
 			side: o,
 			align: s,
 			className: "w-320 max-w-(--available-width)",
-			children: /* @__PURE__ */ B(Re, { ...c })
+			children: /* @__PURE__ */ H("div", {
+				className: "relative",
+				children: [
+					/* @__PURE__ */ V("p", {
+						className: "mb-16 flex min-h-32 items-center pr-40 text-body font-semibold text-fg",
+						children: d
+					}),
+					/* @__PURE__ */ V(Ue, { ...c }),
+					/* @__PURE__ */ V("div", {
+						className: "absolute top-0 right-0",
+						children: /* @__PURE__ */ V(C.Close, { children: /* @__PURE__ */ V(f, {
+							icon: K,
+							"aria-label": u("parameterPopover.close", "Close parameters"),
+							size: "sm"
+						}) })
+					})
+				]
+			})
 		})]
 	});
 });
-process.env.NODE_ENV !== "production" && (ze.displayName = "ParameterPopover");
+process.env.NODE_ENV !== "production" && (We.displayName = "ParameterPopover");
 //#endregion
 //#region src/components/playground/model-picker.tsx
-var Be = {
+var Ge = {
 	ghost: "header",
 	default: "default"
-}, Ve = { appearance: {
-	ghost: { classes: b.appearance.header.classes },
-	default: { classes: b.appearance.default.classes }
-} }, He = { appearance: "ghost" }, Ue = "", We = "*";
-function Ge({ option: t, query: n, providerLabel: r }) {
+}, Ke = { appearance: {
+	ghost: { classes: x.appearance.header.classes },
+	default: { classes: x.appearance.default.classes }
+} }, qe = { appearance: "ghost" }, Je = "", Ye = "*";
+function Xe({ option: t, query: n, providerLabel: r }) {
 	let a = t.model ?? t.value, o = [t.context ? i(t.context) : "", t.price ?? ""].filter(Boolean).join(" · ");
-	return /* @__PURE__ */ V(oe, { children: [
-		r !== void 0 && /* @__PURE__ */ B("span", {
+	return /* @__PURE__ */ H(se, { children: [
+		r !== void 0 && /* @__PURE__ */ V("span", {
 			"aria-hidden": !0,
 			className: "flex",
-			children: /* @__PURE__ */ B(D, {
+			children: /* @__PURE__ */ V(O, {
 				provider: t.provider,
 				name: r
 			})
 		}),
-		/* @__PURE__ */ V("span", {
+		/* @__PURE__ */ H("span", {
 			className: "flex min-w-0 flex-1 items-baseline gap-8",
-			children: [/* @__PURE__ */ B("span", {
+			children: [/* @__PURE__ */ V("span", {
 				className: "min-w-0 shrink truncate",
-				children: /* @__PURE__ */ B(C, {
+				children: /* @__PURE__ */ V(w, {
 					text: t.name ?? a,
 					query: n
 				})
-			}), t.name && t.name !== a && /* @__PURE__ */ B("span", {
+			}), t.name && t.name !== a && /* @__PURE__ */ V("span", {
 				className: "min-w-0 flex-1 truncate mono text-small font-regular text-fg-tertiary",
-				children: /* @__PURE__ */ B(C, {
+				children: /* @__PURE__ */ V(w, {
 					text: a,
 					query: n
 				})
 			})]
 		}),
-		t.capabilities && t.capabilities.length > 0 && /* @__PURE__ */ B(A, {
+		t.capabilities && t.capabilities.length > 0 && /* @__PURE__ */ V(j, {
 			capabilities: t.capabilities,
 			className: "hidden sm:flex"
 		}),
-		(t.note ?? o) && /* @__PURE__ */ B("span", {
+		(t.note ?? o) && /* @__PURE__ */ V("span", {
 			className: e("shrink-0 text-caption font-regular tabular", t.note ? "text-fg-secondary" : "hidden text-fg-tertiary sm:inline"),
 			children: t.note ?? o
 		})
 	] });
 }
-function Ke(e, t, n) {
+function Ze(e, t, n) {
 	let r = e.model ?? e.value, i = t(e.provider);
 	return {
 		value: e.value,
@@ -843,7 +930,7 @@ function Ke(e, t, n) {
 			i,
 			e.provider
 		],
-		render: ({ query: t }) => /* @__PURE__ */ B(Ge, {
+		render: ({ query: t }) => /* @__PURE__ */ V(Xe, {
 			option: e,
 			query: t,
 			...n ? { providerLabel: i } : {}
@@ -851,34 +938,34 @@ function Ke(e, t, n) {
 		...e.disabled ? { disabled: !0 } : {}
 	};
 }
-function qe(e, t, n, r) {
+function Qe(e, t, n, r) {
 	return n ? t.flatMap((t) => {
 		let n = e.filter((e) => e.provider === t);
 		return n.length ? [{
 			id: `provider:${t}`,
 			label: r(t),
-			leading: /* @__PURE__ */ B("span", {
+			leading: /* @__PURE__ */ V("span", {
 				"aria-hidden": !0,
 				className: "flex",
-				children: /* @__PURE__ */ B(D, {
+				children: /* @__PURE__ */ V(O, {
 					provider: t,
 					name: r(t),
 					size: "sm"
 				})
 			}),
 			count: n.length,
-			items: n.map((e) => Ke(e, r, !1))
+			items: n.map((e) => Ze(e, r, !1))
 		}] : [];
 	}) : [{
 		id: "models",
-		items: e.map((e) => Ke(e, r, !0))
+		items: e.map((e) => Ze(e, r, !0))
 	}];
 }
-function Je(e, t) {
-	let n = r(), i = L(() => new Map(t.map((e) => [e.id, e])), [t]), a = P((e) => O(e, i.get(e)?.name), [i]);
+function $e(e, t) {
+	let n = r(), i = R(() => new Map(t.map((e) => [e.id, e])), [t]), a = F((e) => k(e, i.get(e)?.name), [i]);
 	return {
 		nameOf: a,
-		providerOrder: L(() => [...new Set(e.map((e) => e.provider))].sort((e, t) => Number(!!i.get(t)?.connected) - Number(!!i.get(e)?.connected) || a(e).localeCompare(a(t), n, { sensitivity: "base" })), [
+		providerOrder: R(() => [...new Set(e.map((e) => e.provider))].sort((e, t) => Number(!!i.get(t)?.connected) - Number(!!i.get(e)?.connected) || a(e).localeCompare(a(t), n, { sensitivity: "base" })), [
 			e,
 			i,
 			a,
@@ -886,202 +973,230 @@ function Je(e, t) {
 		])
 	};
 }
-function Ye(e, { providers: t = [], groupByProvider: n } = {}) {
-	let { nameOf: r, providerOrder: i } = Je(e, t), a = n ?? i.length > 1;
-	return L(() => qe(e, i, a, r), [
+function et(e, { providers: t = [], groupByProvider: n } = {}) {
+	let { nameOf: r, providerOrder: i } = $e(e, t), a = n ?? i.length > 1;
+	return R(() => Qe(e, i, a, r), [
 		e,
 		i,
 		a,
 		r
 	]);
 }
-var Xe = /* @__PURE__ */ N(function(t, r) {
-	let { options: i, providers: a = [], recent: s = [], groupByProvider: c, placeholder: l, "aria-label": u, appearance: d = "ghost", size: h = "sm", fullWidth: g, disabled: _, invalid: y, open: b, onOpenChange: S, "data-force": C, className: O, label: A, description: j, error: M, optional: te, required: N, layout: ne } = t, P = n(), re = f(), F = p(t), [ie, I] = z(!1), R = b ?? ie, ae = (e) => {
-		b === void 0 && I(e), S?.(e);
-	}, [se, ce] = z(() => t.defaultValue ?? (t.multiple ? [] : null)), H = t.value === void 0 ? se : t.value, U = Array.isArray(H) ? H : H ? [H] : [], W = t.multiple ? void 0 : t.allLabel, [G, le] = z(""), [K, ue] = z(null), [q, de] = z(!1), [fe, pe] = z(R);
-	R !== fe && (pe(R), R && (le(""), ue(null)));
-	let J = L(() => new Map(i.map((e) => [e.value, e])), [i]), { nameOf: Y, providerOrder: X } = Je(i, a), me = c ?? X.length > 1, he = i.some((e) => e.deprecated && !U.includes(e.value)), Z = U.join("\0"), ge = L(() => {
-		let e = new Set(Z.split("\0")), t = (t) => (q || !t.deprecated || e.has(t.value)) && (!K || t.provider === K), n = [];
-		W && !K && n.push({
+var tt = /* @__PURE__ */ P(function(t, r) {
+	let { options: i, providers: a = [], recent: s = [], groupByProvider: c, placeholder: l, "aria-label": u, appearance: d = "ghost", size: f = "sm", fullWidth: g, disabled: _, invalid: v, open: b, onOpenChange: x, "data-force": C, className: w, label: k, description: j, error: M, optional: N, required: te, layout: ne } = t, P = n(), re = p(), F = m(t), [ie, I] = B(!1), L = b ?? ie, ae = (e) => {
+		b === void 0 && I(e), x?.(e);
+	}, [z, oe] = B(() => t.defaultValue ?? (t.multiple ? [] : null)), U = t.value === void 0 ? z : t.value, W = Array.isArray(U) ? U : U ? [U] : [], G = t.multiple ? void 0 : t.allLabel, [K, ce] = B(""), [q, le] = B(null), [J, ue] = B(!1), [de, fe] = B(L);
+	L !== de && (fe(L), L && (ce(""), le(null)));
+	let Y = R(() => new Map(i.map((e) => [e.value, e])), [i]), { nameOf: X, providerOrder: Z } = $e(i, a), pe = c ?? Z.length > 1, me = i.some((e) => e.deprecated && !W.includes(e.value)), he = W.join("\0"), ge = R(() => {
+		let e = new Set(he.split("\0")), t = (t) => (J || !t.deprecated || e.has(t.value)) && (!q || t.provider === q), n = [];
+		G && !q && n.push({
 			id: "all",
 			items: [{
-				value: Ue,
-				label: W
+				value: Je,
+				label: G
 			}]
 		});
-		let r = G.trim() || K ? [] : s.flatMap((e) => J.get(e) && t(J.get(e)) ? [Ke(J.get(e), Y, !0)] : []);
+		let r = K.trim() || q ? [] : s.flatMap((e) => Y.get(e) && t(Y.get(e)) ? [Ze(Y.get(e), X, !0)] : []);
 		return r.length && n.push({
 			id: "recent",
 			label: P("modelPicker.recent", "Recent"),
 			items: r
-		}), [...n, ...qe(i.filter(t), X, me, Y)];
+		}), [...n, ...Qe(i.filter(t), Z, pe, X)];
 	}, [
 		i,
-		X,
-		me,
+		Z,
+		pe,
 		s,
-		J,
-		G,
+		Y,
 		K,
 		q,
-		Z,
-		W,
+		J,
+		he,
+		G,
 		P,
-		Y
+		X
 	]), _e = (e) => {
 		if (t.multiple) {
-			let n = U.includes(e) ? U.filter((t) => t !== e) : [...U, e];
-			t.value === void 0 && ce(n), t.onValueChange?.(n);
-		} else t.value === void 0 && ce(e === Ue ? null : e), t.onValueChange?.(e), ae(!1);
-	}, ve = L(() => {
-		let e = G.trim(), t = new Set(Z.split("\0")), n = /* @__PURE__ */ new Map();
+			let n = W.includes(e) ? W.filter((t) => t !== e) : [...W, e];
+			t.value === void 0 && oe(n), t.onValueChange?.(n);
+		} else t.value === void 0 && oe(e === Je ? null : e), t.onValueChange?.(e), ae(!1);
+	}, ve = R(() => {
+		let e = K.trim(), t = new Set(he.split("\0")), n = /* @__PURE__ */ new Map();
 		for (let r of i) {
-			if (r.deprecated && !q && !t.has(r.value)) continue;
+			if (r.deprecated && !J && !t.has(r.value)) continue;
 			let i = r.model ?? r.value;
-			e && ee(e, [
+			e && T(e, [
 				r.name ?? i,
 				i,
-				Y(r.provider),
+				X(r.provider),
 				r.provider
 			]) <= 0 || n.set(r.provider, (n.get(r.provider) ?? 0) + 1);
 		}
-		return X.filter((e) => n.has(e) || e === K).map((e) => ({
+		return Z.filter((e) => n.has(e) || e === q).map((e) => ({
 			id: e,
 			count: n.get(e) ?? 0
 		}));
 	}, [
 		i,
-		X,
-		G,
-		q,
 		Z,
 		K,
-		Y
-	]), ye = me && X.length > 1 ? /* @__PURE__ */ B(x, {
+		J,
+		he,
+		q,
+		X
+	]), ye = pe && Z.length > 1 ? /* @__PURE__ */ V(S, {
 		"aria-label": P("modelPicker.provider", "Provider"),
 		size: "sm",
 		appearance: "ghost",
-		value: K ?? We,
-		onValueChange: (e) => ue(e === We ? null : e),
+		value: q ?? Ye,
+		onValueChange: (e) => le(e === Ye ? null : e),
 		options: [{
-			value: We,
+			value: Ye,
 			label: P("modelPicker.everyProvider", "All providers")
 		}, ...ve.map(({ id: e, count: t }) => ({
 			value: e,
-			textValue: Y(e),
-			label: /* @__PURE__ */ V("span", {
+			textValue: X(e),
+			label: /* @__PURE__ */ H("span", {
 				className: "flex min-w-0 items-center gap-8",
 				children: [
-					/* @__PURE__ */ B("span", {
+					/* @__PURE__ */ V("span", {
 						"aria-hidden": !0,
 						className: "flex shrink-0",
-						children: /* @__PURE__ */ B(D, {
+						children: /* @__PURE__ */ V(O, {
 							provider: e,
 							size: "sm"
 						})
 					}),
-					/* @__PURE__ */ B("span", {
+					/* @__PURE__ */ V("span", {
 						className: "min-w-0 truncate",
-						children: Y(e)
+						children: X(e)
 					}),
-					/* @__PURE__ */ B("span", {
+					/* @__PURE__ */ V("span", {
 						className: "shrink-0 text-fg-tertiary tabular",
 						children: o(t)
 					})
 				]
 			})
 		}))]
-	}) : null, be = ye || he ? /* @__PURE__ */ V(oe, { children: [ye, he && /* @__PURE__ */ B(v, {
+	}) : null, be = ye || me ? /* @__PURE__ */ H(se, { children: [ye, me && /* @__PURE__ */ V(y, {
 		size: "sm",
-		label: P("modelPicker.showDeprecated", "Deprecated"),
-		checked: q,
-		onCheckedChange: de
-	})] }) : void 0, Q = U[0] ? J.get(U[0]) : void 0, xe = t.multiple ? Q ? U.length === 1 ? /* @__PURE__ */ B(k, {
+		label: P("modelPicker.showDeprecated", "Show deprecated"),
+		checked: J,
+		onCheckedChange: ue
+	})] }) : void 0, Q = W[0] ? Y.get(W[0]) : void 0, xe = t.multiple ? Q ? W.length === 1 ? /* @__PURE__ */ V(A, {
 		provider: Q.provider,
-		providerName: Y(Q.provider),
+		providerName: X(Q.provider),
 		model: Q.model ?? Q.value,
 		...Q.name ? { name: Q.name } : {}
-	}) : P("modelPicker.firstAndMore", "{first} +{count}", {
-		first: Q.name ?? Q.model ?? Q.value,
-		count: String(U.length - 1)
-	}) : void 0 : Q ? /* @__PURE__ */ B(k, {
+	}) : /* @__PURE__ */ H("span", {
+		className: "flex min-w-0 items-center",
+		children: [
+			/* @__PURE__ */ V("span", {
+				className: "min-w-0 truncate",
+				children: Q.name ?? Q.model ?? Q.value
+			}),
+			" ",
+			/* @__PURE__ */ V("span", {
+				className: "shrink-0 pl-4 tabular",
+				children: P("select.more", "+{count}", { count: String(W.length - 1) })
+			})
+		]
+	}) : void 0 : Q ? /* @__PURE__ */ V(A, {
 		provider: Q.provider,
-		providerName: Y(Q.provider),
+		providerName: X(Q.provider),
 		model: Q.model ?? Q.value,
 		...Q.name ? { name: Q.name } : {}
-	}) : H === Ue || H === null && W ? W : void 0, Se = u ?? (typeof A == "string" ? A : P("modelPicker.model", "Model")), Ce = /* @__PURE__ */ B(E, {
+	}) : U === Je || U === null && G ? G : void 0, Se = u ?? (typeof k == "string" ? k : P("modelPicker.model", "Model")), Ce = /* @__PURE__ */ V(D, {
 		title: Se,
 		width: "lg",
-		open: R,
+		open: L,
 		onOpenChange: ae,
-		trigger: /* @__PURE__ */ B(T, {
+		trigger: /* @__PURE__ */ V(ee, {
 			ref: r,
-			appearance: Be[d],
-			size: h,
+			appearance: Ge[d],
+			size: f,
 			...F.controlProps,
-			...u || !A ? { "aria-label": Se } : {},
+			...u || !k ? { "aria-label": Se } : {},
 			..._ ? { disabled: _ } : {},
-			...y ? { invalid: y } : {},
+			...v ? { invalid: v } : {},
 			...g ? { fullWidth: g } : {},
 			...C ? { "data-force": C } : {},
+			...Q && !t.multiple ? { title: Q.name && Q.name !== (Q.model ?? Q.value) ? `${Q.name} · ${Q.model ?? Q.value}` : Q.model ?? Q.value } : {},
 			placeholder: l ?? (t.multiple ? P("modelPicker.chooseSome", "Choose models") : P("modelPicker.choose", "Choose a model")),
-			className: e("max-w-full", !(A || j || M) && O),
+			className: e("max-w-full", !(k || j || M) && w),
 			children: xe
 		}),
-		children: /* @__PURE__ */ B(w, {
+		children: /* @__PURE__ */ V(E, {
 			groups: ge,
 			"aria-label": Se,
-			value: t.multiple ? U : U[0] ?? (W ? Ue : null),
+			value: t.multiple ? W : W[0] ?? (G ? Je : null),
 			...t.multiple ? { multiple: !0 } : {},
 			onSelect: _e,
-			query: G,
-			onQueryChange: le,
+			query: K,
+			onQueryChange: ce,
 			placeholder: P("modelPicker.search", "Search models"),
 			emptyText: P("modelPicker.noMatch", "No models match"),
 			toolbar: be,
 			autoFocus: !0
 		})
 	});
-	return re ? Ce : m({
-		label: A,
+	return re ? Ce : h({
+		label: k,
 		description: j,
 		error: M,
-		optional: te,
-		required: N,
+		optional: N,
+		required: te,
 		layout: ne,
 		id: F.wrapId,
 		disabled: _,
-		className: O
+		className: w
 	}, Ce);
 });
-process.env.NODE_ENV !== "production" && (Xe.displayName = "ModelPicker");
+process.env.NODE_ENV !== "production" && (tt.displayName = "ModelPicker");
 //#endregion
 //#region src/components/playground/prompt-suggestions.tsx
-var Ze = { align: {
+var nt = { align: {
 	start: { classes: "items-stretch" },
 	center: { classes: "items-center text-center" }
-} }, Qe = { align: "start" }, $e = /* @__PURE__ */ N(function({ suggestions: t, onSelect: r, "aria-label": i, align: a = "start", className: o }, s) {
-	let c = n(), l = i ?? c("promptSuggestions.examplePrompts", "Example prompts");
-	return /* @__PURE__ */ B("ul", {
-		ref: s,
-		"aria-label": l,
-		className: e("flex min-w-0 flex-col gap-2", Ze.align[a].classes, o),
-		children: t.slice(0, 3).map((t) => /* @__PURE__ */ B("li", {
-			className: e("flex min-w-0", a === "center" && "justify-center"),
-			children: /* @__PURE__ */ B("button", {
+} }, rt = { align: "start" };
+function it({ prompt: t, align: n, force: r, onSelect: i }) {
+	let a = z(null), o = u(a);
+	return /* @__PURE__ */ V("li", {
+		className: e("flex min-w-0", n === "center" && "justify-center"),
+		children: /* @__PURE__ */ V(l, {
+			content: t,
+			disabled: !o,
+			shape: "multiline",
+			children: /* @__PURE__ */ V("button", {
 				type: "button",
-				onClick: () => r(t),
-				className: e("flex h-36 max-w-full min-w-0 cursor-pointer items-center rounded-item px-16 text-body text-fg-secondary transition-control hover:bg-fill-1 hover:text-fg focus-ring-inset", a === "start" && "flex-1"),
-				children: /* @__PURE__ */ B("span", {
+				...r ? { "data-force": r } : {},
+				onClick: () => i(t),
+				className: e("flex h-36 max-w-full min-w-0 cursor-pointer items-center rounded-pill px-16 text-body text-fg-secondary transition-control hover:bg-fill-1 hover:text-fg focus-visible:text-fg active:bg-fill-2 active:text-fg focus-ring-inset coarse:h-44", n === "start" && "flex-1"),
+				children: /* @__PURE__ */ V("span", {
+					ref: a,
 					className: "min-w-0 truncate",
 					children: t
 				})
 			})
+		})
+	});
+}
+var at = /* @__PURE__ */ P(function({ suggestions: t, onSelect: r, "aria-label": i, align: a = "start", className: o, "data-force": s }, c) {
+	let l = n(), u = i ?? l("promptSuggestions.examplePrompts", "Example prompts");
+	return /* @__PURE__ */ V("ul", {
+		ref: c,
+		"aria-label": u,
+		className: e("flex min-w-0 flex-col gap-2", nt.align[a].classes, o),
+		children: t.slice(0, 3).map((e, t) => /* @__PURE__ */ V(it, {
+			prompt: e,
+			align: a,
+			force: s,
+			onSelect: r
 		}, t))
 	});
 });
-process.env.NODE_ENV !== "production" && ($e.displayName = "PromptSuggestions");
+process.env.NODE_ENV !== "production" && (at.displayName = "PromptSuggestions");
 //#endregion
-export { ge as CompareGrid, pe as Composer, Y as KAESO_COMPARE_GRID_DEFAULT_VARIANTS, J as KAESO_COMPARE_GRID_VARIANTS, K as KAESO_COMPOSER_DEFAULT_VARIANTS, le as KAESO_COMPOSER_VARIANTS, He as KAESO_MODEL_PICKER_DEFAULT_VARIANTS, Ve as KAESO_MODEL_PICKER_VARIANTS, Fe as KAESO_PARAMETER_PANEL_DEFAULT_VARIANTS, Pe as KAESO_PARAMETER_PANEL_VARIANTS, Qe as KAESO_PROMPT_SUGGESTIONS_DEFAULT_VARIANTS, Ze as KAESO_PROMPT_SUGGESTIONS_VARIANTS, ve as KAESO_REASONING_DEFAULT_VARIANTS, _e as KAESO_REASONING_VARIANTS, Oe as KAESO_RESPONSE_METRICS_DEFAULT_VARIANTS, De as KAESO_RESPONSE_METRICS_VARIANTS, xe as KAESO_RESPONSE_VIEW_DEFAULT_VARIANTS, Q as KAESO_RESPONSE_VIEW_VARIANTS, Xe as ModelPicker, Re as ParameterPanel, ze as ParameterPopover, $e as PromptSuggestions, be as Reasoning, Ne as ResponseMetrics, Ce as ResponseView, Ee as Thread, Te as UserMessage, ke as formatLatency, Ye as useModelGroups };
+export { ye as CompareGrid, Y as Composer, Z as KAESO_COMPARE_GRID_DEFAULT_VARIANTS, X as KAESO_COMPARE_GRID_VARIANTS, le as KAESO_COMPOSER_DEFAULT_VARIANTS, q as KAESO_COMPOSER_VARIANTS, qe as KAESO_MODEL_PICKER_DEFAULT_VARIANTS, Ke as KAESO_MODEL_PICKER_VARIANTS, Be as KAESO_PARAMETER_PANEL_DEFAULT_VARIANTS, ze as KAESO_PARAMETER_PANEL_VARIANTS, rt as KAESO_PROMPT_SUGGESTIONS_DEFAULT_VARIANTS, nt as KAESO_PROMPT_SUGGESTIONS_VARIANTS, Q as KAESO_REASONING_DEFAULT_VARIANTS, be as KAESO_REASONING_VARIANTS, Ne as KAESO_RESPONSE_METRICS_DEFAULT_VARIANTS, Me as KAESO_RESPONSE_METRICS_VARIANTS, we as KAESO_RESPONSE_VIEW_DEFAULT_VARIANTS, Ce as KAESO_RESPONSE_VIEW_VARIANTS, tt as ModelPicker, Ue as ParameterPanel, We as ParameterPopover, at as PromptSuggestions, Se as Reasoning, Re as ResponseMetrics, Oe as ResponseView, je as Thread, Ae as UserMessage, Pe as formatLatency, et as useModelGroups };
 
 //# sourceMappingURL=playground.js.map