@burdenoff/fe-libs 2026.1024.3 → 2026.1026.1

package/dist/shared/assistant/avatar/live/LiveAvatarMinutes.d.ts

@@ -0,0 +1,24 @@
+import { FC, RefObject } from 'react';
+import { AssistantNavigate } from '../../ui/AssistantMarkdownRenderer';
+import { LiveAvatarController, LiveAvatarSnapshot } from './liveAvatarController';
+import { LiveAvatarMinutesPurchase } from './liveAvatarMinutesView';
+/** How often the session's time left is redrawn while it runs (DESIGN 3.10: every 15 s). */
+export declare const LIVE_AVATAR_MINUTES_REDRAW_MS = 15000;
+export interface LiveAvatarMinutesProps {
+    readonly controller: LiveAvatarController;
+    /** The snapshot the tab read (one subscription per view). */
+    readonly snapshot: LiveAvatarSnapshot;
+    /** The host's purchase access (`LiveAvatarSeamOptions.minutesPurchase`). Absent: nobody is offered a purchase here. */
+    readonly minutesPurchase?: LiveAvatarMinutesPurchase | undefined;
+    /** The panel's navigator. Absent or null: nothing opens billing. */
+    readonly navigate?: AssistantNavigate | null | undefined;
+    /** Wall-clock milliseconds. */
+    readonly now: () => number;
+    /** The id of the region's words: a Turn on the minutes hold back is described by them. */
+    readonly textId: string;
+    /** The tab's view, focusable: it takes the focus when a control here goes while it holds it. A ref the tab keeps (stable). */
+    readonly viewRef: RefObject<HTMLElement | null>;
+    /** How often the session's time left is redrawn. Tests pass their own. */
+    readonly redrawMs?: number;
+}
+export declare const LiveAvatarMinutes: FC<LiveAvatarMinutesProps>;

package/dist/shared/assistant/avatar/live/LiveAvatarMinutes.js

@@ -0,0 +1,161 @@
+import { useAvatarCopy as e } from "../useAvatarCopy.js";
+import { LIVE_AVATAR_MINUTES_REFRESH_MS as t, LIVE_AVATAR_REQUEST_TIMEOUT_MS as n } from "./liveAvatarController.js";
+import { LIVE_AVATAR_MINUTES_PLANS_PATH as r, liveAvatarMinutesView as i } from "./liveAvatarMinutesView.js";
+import { useCallback as a, useEffect as o, useId as ee, useRef as s, useState as c } from "react";
+import { ChevronDown as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/shared/assistant/avatar/live/LiveAvatarMinutes.tsx
+var f = 15e3, p = t + n, m = "text-xs text-text-muted", h = "focus:outline-none focus-visible:ring-2 focus-visible:ring-border-strong", g = `inline-flex min-h-11 w-full items-center justify-center gap-2 rounded-xl border border-border-default bg-bg-elevated px-4 text-sm font-medium text-text-primary transition-colors hover:bg-bg-raised aria-disabled:cursor-default aria-disabled:opacity-60 aria-disabled:hover:bg-bg-elevated ${h}`, _ = `inline-flex min-h-11 items-center gap-1 self-start rounded-lg text-xs font-medium text-text-secondary transition-colors hover:text-text-primary ${h}`, te = { status: "absent" }, v = { status: "asking" }, y = { status: "failed" };
+function b(e) {
+	if (typeof e != "object" || !e || !("canPurchase" in e)) return y;
+	let { canPurchase: t } = e;
+	return typeof t == "boolean" ? {
+		status: "answered",
+		access: { canPurchase: t }
+	} : y;
+}
+var x = { status: "idle" }, S = ({ controller: t, snapshot: n, minutesPurchase: h, navigate: S, now: C, textId: w, viewRef: T, redrawMs: E = f }) => {
+	let D = e(), O = ee(), [k, A] = c(!1), j = s(!0);
+	o(() => (j.current = !0, () => {
+		j.current = !1;
+	}), []);
+	let M = a((e) => {
+		if (e !== null) return () => {
+			e.contains(e.ownerDocument.activeElement) && T.current?.focus();
+		};
+	}, [T]), N = h !== void 0 && S != null, [P, F] = c(x), I = s(null), L = n.minutes === null;
+	o(() => {
+		L && (I.current = null, F(x));
+	}, [L]);
+	let [R, z] = c(null), B = s(n.minutes?.balance?.availableMinutes ?? 0), V = s(n.purchase);
+	o(() => {
+		let e = V.current;
+		V.current = n.purchase, n.purchase === "checking" && e !== "checking" ? (B.current = n.minutes?.balance?.availableMinutes ?? 0, z(null)) : n.purchase === "idle" && e === "checking" && z({
+			kind: (n.minutes?.balance?.availableMinutes ?? 0) > B.current ? "seen" : "not-seen",
+			minutes: n.minutes
+		});
+	}, [n.purchase, n.minutes]);
+	let H = R !== null && R.minutes === n.minutes ? R.kind : null, [U, W] = c(null), [G, K] = c(null), q = U !== null && U.minutes === n.minutes, J = G !== null && G.minutes === n.minutes;
+	o(() => {
+		if (U === null) return;
+		if (!q) {
+			W(null), K({ minutes: n.minutes });
+			return;
+		}
+		let e = setTimeout(() => W(null), p);
+		return () => clearTimeout(e);
+	}, [
+		U,
+		q,
+		n.minutes
+	]);
+	let Y = n.phase === "ready" && !n.closing && n.sessionEndsAt !== null, [, X] = c(0);
+	o(() => {
+		if (!Y) return;
+		let e = setInterval(() => X((e) => e + 1), E);
+		return () => clearInterval(e);
+	}, [Y, E]);
+	let Z = i({
+		snapshot: n,
+		access: N ? P.status === "idle" ? v : P : te,
+		purchaseOutcome: H,
+		rechecked: J,
+		now: C()
+	}, D), Q = N && Z !== null && Z.wantsAccess, $ = Z?.action ?? null;
+	o(() => {
+		if (!Q || P.status !== "idle" || I.current !== null || h === void 0) return;
+		let e = Symbol("access");
+		I.current = e, F(v);
+		let t = (t) => {
+			!j.current || I.current !== e || (I.current = null, F(t));
+		};
+		Promise.resolve().then(() => h.access()).then((e) => t(b(e)), () => t(y));
+	}, [
+		Q,
+		P.status,
+		h
+	]);
+	let ne = a((e) => {
+		S && (z(null), Promise.resolve(S(e, "person", { surface: "avatar-minutes" })).catch(() => void 0));
+	}, [S]);
+	if (Z === null) return null;
+	let re = (e) => {
+		switch (e) {
+			case "see-plans":
+				ne(r);
+				return;
+			case "check-again":
+				if (q) return;
+				W({ minutes: n.minutes }), K(null), t.refreshMinutes();
+				return;
+			case "check-purchase-again":
+				t.checkMinutesPurchase();
+				return;
+		}
+	}, ie = (e) => {
+		switch (e) {
+			case "see-plans": return D.minutes.seePlans;
+			case "check-again": return q ? D.minutes.checking : D.minutes.checkAgain;
+			case "check-purchase-again": return D.minutes.checkAgain;
+		}
+	}, ae = D.minutes.howCounted(Z.staleSeconds);
+	return /* @__PURE__ */ d("div", {
+		ref: M,
+		className: "flex flex-col gap-1.5",
+		"data-testid": "assistant-avatar-tab-minutes",
+		"data-state": Z.state,
+		children: [
+			/* @__PURE__ */ d("div", {
+				id: w,
+				className: "flex flex-col gap-0.5",
+				children: [Z.headline === null ? null : /* @__PURE__ */ u("p", {
+					className: "text-sm text-text-primary",
+					"data-testid": "assistant-avatar-tab-minutes-headline",
+					children: Z.headline
+				}), Z.details.map((e) => /* @__PURE__ */ u("p", {
+					className: m,
+					"data-testid": "assistant-avatar-tab-minutes-detail",
+					children: e
+				}, e))]
+			}),
+			$ === null ? null : /* @__PURE__ */ u("button", {
+				ref: M,
+				type: "button",
+				onClick: () => re($),
+				"aria-disabled": $ === "check-again" && q,
+				className: g,
+				"data-testid": "assistant-avatar-tab-minutes-action",
+				"data-action": $,
+				children: ie($)
+			}),
+			/* @__PURE__ */ d("button", {
+				type: "button",
+				onClick: () => A((e) => !e),
+				"aria-expanded": k,
+				"aria-controls": O,
+				className: _,
+				"data-testid": "assistant-avatar-tab-minutes-how",
+				children: [/* @__PURE__ */ u("span", { children: D.minutes.howCountedTitle }), /* @__PURE__ */ u(l, {
+					className: `size-4 shrink-0 transition-transform ${k ? "rotate-180" : ""}`,
+					"aria-hidden": "true"
+				})]
+			}),
+			/* @__PURE__ */ u("ul", {
+				id: O,
+				hidden: !k,
+				className: "flex list-disc flex-col gap-1 ps-5 text-xs text-text-secondary",
+				"data-testid": "assistant-avatar-tab-minutes-how-text",
+				children: ae.map((e) => /* @__PURE__ */ u("li", { children: e }, e))
+			}),
+			/* @__PURE__ */ u("p", {
+				className: "sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				"data-testid": "assistant-avatar-tab-minutes-live",
+				children: Z.announcement ?? ""
+			})
+		]
+	});
+};
+//#endregion
+export { f as LIVE_AVATAR_MINUTES_REDRAW_MS, S as LiveAvatarMinutes };

package/dist/shared/assistant/avatar/live/LiveAvatarStage.js

@@ -1,145 +1,166 @@
 import { useAvatarCopy as e } from "../useAvatarCopy.js";
-import { liveAvatarStatusText as t } from "./liveAvatarStatus.js";
-import { useCallback as n, useEffect as r, useId as i, useRef as a, useSyncExternalStore as o } from "react";
-import { Video as s, VideoOff as c, Volume2 as l } from "lucide-react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { liveAvatarMinutesBlockStart as t, liveAvatarMinutesView as n } from "./liveAvatarMinutesView.js";
+import { liveAvatarStatusText as r } from "./liveAvatarStatus.js";
+import { useCallback as i, useEffect as a, useId as o, useRef as s, useSyncExternalStore as c } from "react";
+import { Video as l, VideoOff as u, Volume2 as d } from "lucide-react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/shared/assistant/avatar/live/LiveAvatarStage.tsx
-var f = "inline-flex h-8 items-center gap-1.5 rounded-full border border-border-default bg-bg-elevated px-3 text-xs font-medium text-text-secondary transition-colors hover:bg-bg-raised hover:text-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-border-strong aria-disabled:cursor-default aria-disabled:opacity-60", p = "inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-full border px-3 text-xs font-medium transition-colors focus-within:ring-2 focus-within:ring-border-strong", m = "inline-flex h-8 items-center rounded-full bg-action-primary-bg px-3 text-xs font-medium text-action-primary-text transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-border-strong aria-disabled:cursor-default aria-disabled:opacity-60", h = ({ controller: h, expanded: g, fallback: _, avatarNames: v }) => {
-	let y = e(), b = i(), x = i(), S = i(), C = a(null), w = a(null), T = n((e) => {
+var m = "inline-flex h-8 items-center gap-1.5 rounded-full border border-border-default bg-bg-elevated px-3 text-xs font-medium text-text-secondary transition-colors hover:bg-bg-raised hover:text-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-border-strong aria-disabled:cursor-default aria-disabled:opacity-60", h = "inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-full border px-3 text-xs font-medium transition-colors focus-within:ring-2 focus-within:ring-border-strong", g = "inline-flex h-8 items-center rounded-full bg-action-primary-bg px-3 text-xs font-medium text-action-primary-text transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-border-strong aria-disabled:cursor-default aria-disabled:opacity-60", _ = ({ controller: _, expanded: v, fallback: y, avatarNames: b }) => {
+	let x = e(), S = o(), C = o(), w = o(), T = o(), E = s(null), D = s(null), O = i((e) => {
 		e?.focus();
-	}, []), E = n((e) => (w.current = e, () => {
-		w.current = null, document.activeElement === e && C.current?.focus();
-	}), []), D = o(h.subscribe, h.getSnapshot, h.getSnapshot);
-	r(() => (h.setStageMounted(!0), () => h.setStageMounted(!1)), [h]);
-	let { phase: O } = D, k = O === "starting" || O === "connecting" || O === "ready" || O === "ending", A = O === "checking" || O === "ending", j = Date.now(), M = D.retryAt !== null && D.retryAt > j, N = t(D, y, j), P = (e, t) => v?.[e] ?? `${y.chooserLabel} ${t + 1}`;
-	return /* @__PURE__ */ d("div", {
-		ref: C,
+	}, []), k = i((e) => (D.current = e, () => {
+		D.current = null, document.activeElement === e && E.current?.focus();
+	}), []), A = c(_.subscribe, _.getSnapshot, _.getSnapshot);
+	a(() => (_.setStageMounted(!0), () => _.setStageMounted(!1)), [_]);
+	let { phase: j } = A, M = j === "starting" || j === "connecting" || j === "ready" || j === "ending", N = j === "checking" || j === "ending", P = Date.now(), F = A.retryAt !== null && A.retryAt > P, I = r(A, x, P), L = n({
+		snapshot: A,
+		access: { status: "absent" },
+		now: P
+	}, x)?.stageLines ?? [], R = t(A, P), z = F || R, B = F ? `${S} ${C}` : R ? [
+		S,
+		I === null ? null : C,
+		L.length > 0 ? T : null
+	].filter((e) => e !== null).join(" ") : S, V = (e, t) => b?.[e] ?? `${x.chooserLabel} ${t + 1}`;
+	return /* @__PURE__ */ p("div", {
+		ref: E,
 		tabIndex: -1,
 		className: "flex flex-col items-center gap-2 focus:outline-none",
 		"data-testid": "assistant-live-avatar",
 		children: [
-			k ? /* @__PURE__ */ d("div", {
-				className: `relative overflow-hidden rounded-2xl border border-border-subtle bg-bg-sunken ${g ? "size-64" : "size-40"}`,
+			M ? /* @__PURE__ */ p("div", {
+				className: `relative overflow-hidden rounded-2xl border border-border-subtle bg-bg-sunken ${v ? "size-64" : "size-40"}`,
 				"data-testid": "assistant-live-avatar-frame",
-				"data-phase": O,
+				"data-phase": j,
 				children: [
-					/* @__PURE__ */ u("video", {
-						ref: h.attachVideo,
-						className: `size-full object-cover ${D.videoReady ? "" : "invisible"}`,
-						"aria-label": y.stageLabel,
-						autoPlay: !0,
+					/* @__PURE__ */ f("video", {
+						ref: _.attachVideo,
+						className: `size-full object-cover ${A.videoReady && !A.videoBlocked ? "" : "invisible"}`,
+						"aria-label": x.stageLabel,
 						muted: !0,
 						playsInline: !0,
 						"data-testid": "assistant-live-avatar-video"
 					}),
-					D.videoReady ? null : /* @__PURE__ */ u("p", {
+					A.videoReady && !A.videoBlocked || j === "ready" && A.videoBlocked ? null : /* @__PURE__ */ f("p", {
 						className: "absolute inset-0 flex items-center justify-center p-3 text-center text-xs text-text-muted",
-						children: O === "ending" ? y.stateEnding : O === "connecting" ? y.stageWaiting : y.stateStarting
+						children: j === "ending" ? x.stateEnding : j === "connecting" ? x.stageWaiting : x.stateStarting
 					}),
-					D.audioBlocked ? /* @__PURE__ */ d("button", {
+					A.audioBlocked ? /* @__PURE__ */ p("button", {
 						type: "button",
-						onClick: () => h.resumeAudio(),
+						onClick: () => _.resumeAudio(),
 						className: "absolute inset-x-2 bottom-2 inline-flex items-center justify-center gap-1.5 rounded-xl bg-bg-elevated px-2 py-1.5 text-xs font-medium text-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-border-strong",
 						"data-testid": "assistant-live-avatar-sound",
-						children: [/* @__PURE__ */ u(l, {
+						children: [/* @__PURE__ */ f(d, {
 							className: "size-4 shrink-0",
 							"aria-hidden": "true"
-						}), /* @__PURE__ */ u("span", { children: y.problem("playback-blocked") })]
+						}), /* @__PURE__ */ f("span", { children: x.problem("playback-blocked") })]
 					}) : null
 				]
-			}) : _,
-			D.offered || k ? /* @__PURE__ */ d("button", {
-				ref: E,
+			}) : y,
+			A.offered || M ? /* @__PURE__ */ p("button", {
+				ref: k,
 				type: "button",
 				onClick: () => {
-					A || (k ? h.switchOff() : O === "choosing" ? h.cancelChoice() : h.requestOn());
+					N || (M ? _.switchOff() : j === "choosing" ? _.cancelChoice() : _.requestOn());
 				},
-				className: f,
-				"aria-pressed": k,
-				title: y.toggleHint,
-				"aria-disabled": A,
+				className: m,
+				"aria-pressed": M,
+				title: x.toggleHint,
+				"aria-disabled": N,
 				"data-testid": "assistant-live-avatar-toggle",
-				children: [u(k ? c : s, {
+				children: [f(M ? u : l, {
 					className: "size-4",
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ u("span", { children: y.toggle })]
+				}), /* @__PURE__ */ f("span", { children: x.toggle })]
 			}) : null,
-			O === "choosing" ? /* @__PURE__ */ d("fieldset", {
+			j === "choosing" ? /* @__PURE__ */ p("fieldset", {
 				className: "flex max-w-xs flex-col gap-2 rounded-xl border border-border-default bg-bg-elevated p-3 text-start",
 				"data-testid": "assistant-live-avatar-consent",
 				children: [
-					/* @__PURE__ */ u("legend", {
+					/* @__PURE__ */ f("legend", {
 						className: "sr-only",
-						children: y.toggle
+						children: x.toggle
 					}),
-					D.avatars.length > 1 ? /* @__PURE__ */ d("fieldset", {
+					A.avatars.length > 1 ? /* @__PURE__ */ p("fieldset", {
 						className: "flex flex-wrap gap-1.5",
 						"data-testid": "assistant-live-avatar-chooser",
-						children: [/* @__PURE__ */ u("legend", {
+						children: [/* @__PURE__ */ f("legend", {
 							className: "sr-only",
-							children: y.chooserTitle
-						}), D.avatars.map((e, t) => {
-							let n = e === D.selectedAvatarId, r = P(e, t);
-							return /* @__PURE__ */ d("label", {
-								className: `${p} ${n ? "border-transparent bg-action-primary-bg text-action-primary-text" : "border-border-default bg-bg-elevated text-text-secondary hover:bg-bg-raised hover:text-text-primary"}`,
-								title: n ? y.chooserSelected(r) : y.chooserOption(r),
-								children: [/* @__PURE__ */ u("input", {
+							children: x.chooserTitle
+						}), A.avatars.map((e, t) => {
+							let n = e === A.selectedAvatarId, r = V(e, t);
+							return /* @__PURE__ */ p("label", {
+								className: `${h} ${n ? "border-transparent bg-action-primary-bg text-action-primary-text" : "border-border-default bg-bg-elevated text-text-secondary hover:bg-bg-raised hover:text-text-primary"}`,
+								title: n ? x.chooserSelected(r) : x.chooserOption(r),
+								children: [/* @__PURE__ */ f("input", {
 									type: "radio",
-									name: S,
+									name: w,
 									value: e,
 									checked: n,
-									onChange: () => h.selectAvatar(e),
+									onChange: () => _.selectAvatar(e),
 									className: "sr-only",
 									"data-avatar-id": e
 								}), r]
 							}, e);
 						})]
 					}) : null,
-					/* @__PURE__ */ u("p", {
-						ref: T,
-						id: b,
+					/* @__PURE__ */ f("p", {
+						ref: O,
+						id: S,
 						tabIndex: -1,
 						className: "text-xs text-text-secondary focus:outline-none",
 						"data-testid": "assistant-live-avatar-disclosure",
-						children: y.consent
+						children: x.consent
 					}),
-					/* @__PURE__ */ d("div", {
+					L.length > 0 ? /* @__PURE__ */ f("div", {
+						id: T,
+						className: "flex flex-col gap-0.5 text-xs text-text-secondary",
+						"data-testid": "assistant-live-avatar-minutes",
+						children: L.map((e) => /* @__PURE__ */ f("p", {
+							"data-testid": "assistant-live-avatar-minutes-line",
+							children: e
+						}, e))
+					}) : null,
+					/* @__PURE__ */ p("div", {
 						className: "flex justify-end gap-2",
-						children: [/* @__PURE__ */ u("button", {
+						children: [/* @__PURE__ */ f("button", {
 							type: "button",
 							onClick: () => {
-								w.current?.focus(), h.cancelChoice();
+								D.current?.focus(), _.cancelChoice();
 							},
-							className: f,
-							children: y.consentCancel
-						}), /* @__PURE__ */ u("button", {
+							className: m,
+							children: x.consentCancel
+						}), /* @__PURE__ */ f("button", {
 							type: "button",
 							onClick: () => {
-								if (M) {
-									h.recheckRetry();
+								if (F) {
+									_.recheckRetry();
 									return;
 								}
-								w.current?.focus(), h.confirm();
+								if (R) {
+									A.retryAt !== null && _.recheckRetry();
+									return;
+								}
+								D.current?.focus(), _.confirm();
 							},
-							"aria-describedby": M ? `${b} ${x}` : b,
-							"aria-disabled": M,
-							className: m,
-							disabled: D.selectedAvatarId === null,
+							"aria-describedby": B,
+							"aria-disabled": z,
+							className: g,
+							disabled: A.selectedAvatarId === null,
 							"data-testid": "assistant-live-avatar-confirm",
-							children: y.consentConfirm
+							children: x.consentConfirm
 						})]
 					})
 				]
 			}) : null,
-			/* @__PURE__ */ u("p", {
-				id: x,
-				className: N === null ? "sr-only" : "max-w-xs text-center text-xs text-text-muted",
+			/* @__PURE__ */ f("p", {
+				id: C,
+				className: I === null ? "sr-only" : "max-w-xs text-center text-xs text-text-muted",
 				role: "status",
 				"data-testid": "assistant-live-avatar-status",
-				children: N ?? ""
+				children: I ?? ""
 			})
 		]
 	});
 };
 //#endregion
-export { h as LiveAvatarStageView };
+export { _ as LiveAvatarStageView };

package/dist/shared/assistant/avatar/live/LiveAvatarTabView.d.ts

@@ -5,6 +5,7 @@ import { LiveAvatarTabProps } from '../../ui/assistantLiveAvatarSeam';
 import { AvatarVoiceDefault, AvatarVoicePreference } from '../avatarPreferences';
 import { LiveAvatarVoices } from './avatarVoice';
 import { LiveAvatarController } from './liveAvatarController';
+import { LiveAvatarMinutesPurchase } from './liveAvatarMinutesView';
 /** The person's avatar voice choice: read by the engine decorator per reply, written by the tab's select. STABLE. */
 export interface LiveAvatarVoiceStore {
     getState(): AvatarVoicePreference;
@@ -24,6 +25,11 @@ export interface LiveAvatarTabViewProps extends LiveAvatarTabProps {
     readonly voiceStore: LiveAvatarVoiceStore;
     /** Wall-clock milliseconds: the retry time and the Turn off guard. Tests pass their own. */
     readonly now?: () => number;
+    /**
+     * ★ BOFF-9446: the host's purchase access (`LiveAvatarSeamOptions.minutesPurchase`, copied once by the seam). Absent: nobody is
+     * offered "See plans" here.
+     */
+    readonly minutesPurchase?: LiveAvatarMinutesPurchase;
 }
 /** A voice name as the person reads it: a hosted voice by its speaker ("Kore"), any other by its own name. */
 export declare function avatarVoiceDisplayName(name: string): string;