@allmodels/dsh-speech 0.1.2 → 0.1.4

package/lib/client.js

@@ -216,9 +216,47 @@ async function request(path, init) {
 	}
 	return body;
 }
+async function audioRequest(input, signal) {
+	const response = await fetch("/api/dsh-speech/tts", {
+		method: "POST",
+		headers: {
+			accept: "audio/mpeg",
+			"content-type": "application/json"
+		},
+		body: JSON.stringify(input),
+		...signal === void 0 ? {} : { signal }
+	});
+	if (!response.ok) {
+		const body = await response.json().catch(() => void 0);
+		const error = body !== null && typeof body === "object" ? body.error : void 0;
+		throw new SpeechApiError(typeof error?.code === "string" ? error.code : `HTTP_${String(response.status)}`, typeof error?.message === "string" ? error.message : "Speech generation failed");
+	}
+	const blob = await response.blob();
+	if (blob.size === 0 || blob.size > 16 * 1024 * 1024) throw new SpeechApiError("INVALID_AUDIO", "The spoken summary audio is invalid");
+	return blob.type === "audio/mpeg" ? blob : blob.slice(0, blob.size, "audio/mpeg");
+}
 const speechApi = {
 	status: () => request("/api/dsh-speech/status"),
 	catalog: (refresh = false) => request(`/api/dsh-speech/catalog${refresh ? "?refresh=1" : ""}`),
+	voices: (filters = {}, signal) => {
+		const query = new URLSearchParams();
+		if (filters.model !== void 0) query.set("model", filters.model);
+		if (filters.provider !== void 0) query.set("provider", filters.provider);
+		if (filters.q !== void 0) query.set("q", filters.q);
+		if (filters.language !== void 0) query.set("language", filters.language);
+		return request(`/api/dsh-speech/voices?${query.toString()}`, signal === void 0 ? void 0 : { signal });
+	},
+	summarize: (input, signal) => request("/api/dsh-speech/summarize", {
+		method: "POST",
+		body: JSON.stringify(input),
+		...signal === void 0 ? {} : { signal }
+	}),
+	tts: audioRequest,
+	prepareTts: (input, signal) => request("/api/dsh-speech/tts/prepare", {
+		method: "POST",
+		body: JSON.stringify(input),
+		...signal === void 0 ? {} : { signal }
+	}),
 	startAuth: (email) => request("/api/dsh-speech/auth/start", {
 		method: "POST",
 		body: JSON.stringify({ email })
@@ -265,6 +303,44 @@ function writePreferredMicrophone(deviceId) {
 //#region src/shared.ts
 const CATALOG_TTL_MS = 300 * 1e3;
 const AUDIO_FORMAT = "pcm_16000";
+const MAX_TTS_CHARACTERS = 4096;
+const MAX_SUMMARY_REQUEST_CHARACTERS = 16e3;
+const MAX_SUMMARY_ANSWER_CHARACTERS = 64e3;
+const SUMMARY_PROMPT_VERSION = 1;
+const DEFAULT_ENGLISH_TTS = {
+	model: "fish/s2.1-pro",
+	provider: "fish",
+	voice: "03397b4c4be74759b72533b663fbd001",
+	name: "Elon Musk (Noise reduction)"
+};
+const DEFAULT_CHINESE_TTS = {
+	model: "minimax/speech-2.8-hd",
+	provider: "minimax",
+	voice: "Chinese (Mandarin)_HK_Flight_Attendant",
+	name: "HK Flight Attendant"
+};
+function selectTtsBinding(bindings, preferred) {
+	if (preferred?.model !== void 0) {
+		const preferredModel = preferred.model;
+		const matchesModel = (binding) => binding.model === preferredModel || binding.canonical === preferredModel || !preferredModel.includes("/") && binding.model.endsWith(`/${preferredModel}`);
+		const exact = bindings.find((binding) => matchesModel(binding) && (preferred.provider === void 0 || binding.provider === preferred.provider));
+		if (exact !== void 0) return exact;
+		const sameModel = bindings.find(matchesModel);
+		if (sameModel !== void 0) return sameModel;
+	}
+	return bindings.find((binding) => binding.isProviderDefault) ?? bindings[0];
+}
+function preferredTtsSelection(locale) {
+	return locale.toLowerCase().startsWith("zh") ? DEFAULT_CHINESE_TTS : DEFAULT_ENGLISH_TTS;
+}
+function selectLocalizedTtsBinding(bindings, locale, preferred) {
+	if (preferred?.model !== void 0 || preferred?.provider !== void 0) return selectTtsBinding(bindings, preferred);
+	const localized = preferredTtsSelection(locale);
+	return selectTtsBinding(bindings, {
+		model: localized.model,
+		provider: localized.provider
+	});
+}
 function selectBinding(bindings, locale, preferred) {
 	if (preferred?.model !== void 0) {
 		const preferredModel = preferred.model;
@@ -696,7 +772,23 @@ const styles = {
 	srOnly: "dsh-speech-sr-only",
 	dock: "dsh-speech-dock",
 	dockError: "dsh-speech-dock-error",
-	dockDetail: "dsh-speech-dock-detail"
+	dockDetail: "dsh-speech-dock-detail",
+	switchLabel: "dsh-speech-switch-label",
+	switchTrack: "dsh-speech-switch-track",
+	summaryPlayer: "dsh-speech-summary-player",
+	summaryControl: "dsh-speech-summary-control",
+	summaryButton: "dsh-speech-summary-button",
+	summaryWaveform: "dsh-speech-summary-waveform",
+	summaryLabel: "dsh-speech-summary-label",
+	autoplayToggle: "dsh-speech-autoplay-toggle",
+	sidebarPlaying: "dsh-speech-sidebar-playing",
+	summaryToggles: "dsh-speech-summary-toggles",
+	summaryCache: "dsh-speech-summary-cache",
+	voicePicker: "dsh-speech-voice-picker",
+	voiceSelected: "dsh-speech-voice-selected",
+	voiceMenu: "dsh-speech-voice-menu",
+	voiceOption: "dsh-speech-voice-option",
+	voiceNotice: "dsh-speech-voice-notice"
 };
 const STYLE_TEXT = String.raw`
 .dsh-speech-settings{display:grid;gap:16px;max-width:760px;padding:4px 2px 24px;color:var(--color-text,#e8e8e8)}
@@ -709,15 +801,22 @@ const STYLE_TEXT = String.raw`
 .dsh-speech-model-full{grid-column:1/-1}.dsh-speech-context-details{border-top:1px solid var(--color-border,#343434);padding-top:12px}.dsh-speech-context-summary{width:max-content;color:var(--color-text-secondary,#aaa);cursor:pointer;font-size:13px;font-weight:600}.dsh-speech-context-summary:hover{color:var(--color-text,#eee)}.dsh-speech-context-summary span{margin-left:5px;color:var(--color-text-secondary,#888);font-size:11px;font-weight:400}.dsh-speech-context-body{display:grid;gap:8px;padding-top:12px}.dsh-speech-balance-value{font-size:24px;line-height:1.2;color:var(--color-text,#eee)}
 .dsh-speech-stack,.dsh-speech-field{display:grid;gap:7px;align-content:start}.dsh-speech-label{color:var(--color-text-secondary,#b2b2b2);font-size:13px;font-weight:600}.dsh-speech-hint,.dsh-speech-muted{margin:0;color:var(--color-text-secondary,#999);font-size:12px;line-height:1.45}
 .dsh-speech-input,.dsh-speech-textarea{width:100%;box-sizing:border-box;border:1px solid var(--color-border,#444);border-radius:8px;padding:9px 10px;background:var(--color-background,#191919);color:inherit;font:inherit}.dsh-speech-textarea{min-height:84px;resize:vertical}.dsh-speech-input:focus,.dsh-speech-textarea:focus{outline:2px solid color-mix(in srgb,#68a8ff 65%,transparent);outline-offset:1px}.dsh-speech-input:disabled,.dsh-speech-textarea:disabled{opacity:.55}
+.dsh-speech-voice-picker{display:grid;gap:7px;align-content:start;min-width:0}.dsh-speech-voice-selected{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0;padding:8px 10px;border:1px solid color-mix(in srgb,var(--dsw-alias-brand-primary,#68a8ff) 28%,var(--color-border,#444));border-radius:8px;background:color-mix(in srgb,var(--dsw-alias-brand-primary,#68a8ff) 7%,transparent)}.dsh-speech-voice-selected strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.dsh-speech-voice-selected span{flex:none;color:var(--color-text-secondary,#999);font-size:11px}.dsh-speech-voice-menu{max-height:300px;overflow:auto;display:grid;gap:2px;padding:4px;border:1px solid var(--color-border,#444);border-radius:9px;background:var(--color-background-elevated,#202020);box-shadow:0 10px 26px rgba(0,0,0,.22)}.dsh-speech-voice-option{width:100%;min-width:0;display:grid;gap:4px;padding:8px 9px;border:0;border-radius:7px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.dsh-speech-voice-option>span{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}.dsh-speech-voice-option strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.dsh-speech-voice-option small{color:var(--color-text-secondary,#999);font-size:11px;line-height:1.35}.dsh-speech-voice-option>span small{flex:none}.dsh-speech-voice-option:hover,.dsh-speech-voice-option:focus-visible,.dsh-speech-voice-option[data-active="true"]{outline:0;background:var(--color-background-hover,rgba(255,255,255,.08))}.dsh-speech-voice-option[aria-selected="true"]{box-shadow:inset 2px 0 var(--dsw-alias-brand-primary,#68a8ff)}.dsh-speech-voice-notice{padding:14px 10px;color:var(--color-text-secondary,#999);font-size:12px;text-align:center}
 .dsh-speech-primary,.dsh-speech-secondary,.dsh-speech-checkout{border:1px solid transparent;border-radius:8px;padding:8px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;text-align:center}.dsh-speech-primary{background:#e8e8e8;color:#151515}.dsh-speech-secondary,.dsh-speech-checkout{border-color:var(--color-border,#4a4a4a);background:transparent;color:inherit}.dsh-speech-primary:disabled,.dsh-speech-secondary:disabled{cursor:default;opacity:.45}.dsh-speech-good{color:#65c88a}.dsh-speech-warning{margin:0;color:#efb85c}.dsh-speech-danger,.dsh-speech-dock-error{margin:0;color:#f07878}
 .dsh-speech-top-up{justify-content:flex-start;align-items:end;flex-wrap:wrap}.dsh-speech-top-up .dsh-speech-field{max-width:180px}
+.dsh-speech-summary-toggles{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap}.dsh-speech-switch-label{position:relative;display:flex;align-items:center;gap:8px;color:var(--color-text-secondary,#aaa);font-size:12px;cursor:pointer;white-space:nowrap}.dsh-speech-switch-label input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.dsh-speech-switch-track{width:32px;height:18px;display:inline-flex;align-items:center;flex:none;box-sizing:border-box;padding:2px;border:1px solid var(--color-border,#555);border-radius:999px;background:var(--color-background,#242424);transition:background .15s ease,border-color .15s ease}.dsh-speech-switch-track i{width:12px;height:12px;display:block;border-radius:50%;background:var(--color-text-secondary,#aaa);transform:translateX(0);transition:transform .15s ease,background .15s ease}.dsh-speech-switch-label input:checked+.dsh-speech-switch-track,.dsh-speech-autoplay-toggle[aria-checked="true"] .dsh-speech-switch-track{border-color:var(--dsw-alias-brand-primary,#68a8ff);background:color-mix(in srgb,var(--dsw-alias-brand-primary,#68a8ff) 32%,transparent)}.dsh-speech-switch-label input:checked+.dsh-speech-switch-track i,.dsh-speech-autoplay-toggle[aria-checked="true"] .dsh-speech-switch-track i{background:#fff;transform:translateX(14px)}.dsh-speech-switch-label:focus-within .dsh-speech-switch-track{outline:2px solid color-mix(in srgb,#68a8ff 60%,transparent);outline-offset:2px}.dsh-speech-switch-label:has(input:disabled){cursor:default;opacity:.5}
+.dsh-speech-summary-cache{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;border-top:1px solid var(--color-border,#343434)}.dsh-speech-summary-cache>div{display:grid;gap:4px}.dsh-speech-summary-cache>div>strong{font-size:13px}.dsh-speech-summary-cache>.dsh-speech-secondary{flex:none}
+.dsh-speech-summary-player{width:min(397px,100%);height:34px;display:flex;align-items:center;gap:9px;margin-left:-2px;color:var(--color-text-secondary,#9b9b9b)}.dsh-speech-summary-control{width:194px;height:34px;display:flex;align-items:center;gap:5px;box-sizing:border-box;padding:4px 12px 4px 7px;border:1px solid var(--color-border,#343434);border-radius:999px;background:var(--color-background-secondary,rgba(255,255,255,.025))}.dsh-speech-summary-button{width:24px;height:24px;display:inline-grid;place-items:center;flex:none;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}.dsh-speech-summary-button:hover:not(:disabled),.dsh-speech-summary-button:focus-visible{outline:0;background:var(--color-background-hover,rgba(255,255,255,.08));color:var(--color-text,#eee)}.dsh-speech-summary-button:disabled{cursor:wait;opacity:.6}.dsh-speech-summary-button svg{width:15px;height:15px;fill:currentColor}.dsh-speech-summary-waveform{width:144px;height:22px;display:flex;align-items:center;gap:1px;flex:none;overflow:hidden}.dsh-speech-summary-waveform i{width:2px;height:calc(3px + var(--dsh-speech-peak)*16px);display:block;flex:none;border-radius:2px;background:currentColor;opacity:.28;transition:height 45ms linear,opacity .12s ease,color .12s ease}.dsh-speech-summary-waveform[data-playing="true"] i{color:var(--dsw-alias-brand-primary,#68a8ff);opacity:.82}.dsh-speech-summary-waveform[data-preparing="true"] i{animation:dsh-speech-wave-pulse 1s ease-in-out infinite}.dsh-speech-summary-waveform[data-preparing="true"] i:nth-child(4n+2){animation-delay:.12s}.dsh-speech-summary-waveform[data-preparing="true"] i:nth-child(4n+3){animation-delay:.24s}.dsh-speech-summary-waveform[data-preparing="true"] i:nth-child(4n){animation-delay:.36s}.dsh-speech-summary-label{min-width:0;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.dsh-speech-autoplay-toggle{height:28px;display:inline-flex;align-items:center;gap:7px;padding:0 8px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--color-text-secondary,#aaa);font:inherit;font-size:11px;cursor:pointer}.dsh-speech-autoplay-toggle .dsh-speech-switch-track{width:28px;height:16px}.dsh-speech-autoplay-toggle .dsh-speech-switch-track i{width:10px;height:10px}.dsh-speech-autoplay-toggle[aria-checked="true"] .dsh-speech-switch-track i{transform:translateX(12px)}.dsh-speech-autoplay-toggle:hover:not(:disabled),.dsh-speech-autoplay-toggle:focus-visible{outline:0;border-color:var(--color-border,#444);background:var(--color-background-hover,rgba(255,255,255,.06));color:var(--color-text,#eee)}.dsh-speech-autoplay-toggle:disabled{opacity:.45;cursor:default}@keyframes dsh-speech-wave-pulse{0%,100%{opacity:.2;transform:scaleY(.55)}50%{opacity:.78;transform:scaleY(1)}}
 .dsh-speech-mic-wrap{position:relative;display:inline-flex;align-items:center;gap:5px;order:1}[data-slot="conversation.input.right"]:has(>.dsh-speech-mic-wrap)~button:last-child{order:2}.dsh-speech-mic{width:30px;height:30px;display:inline-grid;place-items:center;padding:0;border:0;border-radius:7px;background:transparent;color:var(--color-text-secondary,#a8a8a8);cursor:pointer}.dsh-speech-mic:hover:not(:disabled),.dsh-speech-mic:focus-visible{background:var(--color-background-hover,rgba(255,255,255,.08));color:var(--color-text,#eee)}.dsh-speech-mic[aria-disabled="true"]{opacity:.48}.dsh-speech-mic:disabled{cursor:default}.dsh-speech-mic svg{width:18px;height:18px;fill:currentColor}.dsh-speech-mic-active{color:#ef6666;background:rgba(239,102,102,.12)}.dsh-speech-mic-tooltip{position:absolute;right:0;bottom:calc(100% + 8px);z-index:40;width:max-content;max-width:260px;padding:6px 9px;border:1px solid var(--color-border,#343434);border-radius:7px;background:var(--color-background-elevated,#202020);color:var(--color-text,#eee);font-size:12px;line-height:1.35;box-shadow:0 6px 18px rgba(0,0,0,.24);opacity:0;visibility:hidden;transform:translateY(2px);pointer-events:none;transition:opacity .12s ease,transform .12s ease,visibility .12s}.dsh-speech-mic-wrap:hover .dsh-speech-mic-tooltip,.dsh-speech-mic-wrap:focus-within .dsh-speech-mic-tooltip,.dsh-speech-mic-wrap[data-explanation-open="true"] .dsh-speech-mic-tooltip{opacity:1;visibility:visible;transform:translateY(0)}
 :where(div):has(>:where(div)>[data-slot="conversation.input.right"]>.dsh-speech-recording-takeover){position:relative}:where(div):has(>:where(div)>[data-slot="conversation.input.right"]>.dsh-speech-recording-takeover)>*{visibility:hidden}.dsh-speech-recording-takeover{position:absolute;inset:0;z-index:8;visibility:visible;display:flex;align-items:center;gap:10px;padding:4px 8px;box-sizing:border-box;color:var(--color-text-secondary,#a8a8a8)}.dsh-speech-recording-track{height:30px;min-width:0;flex:1;display:flex;align-items:center}.dsh-speech-recording-canvas{display:block;width:100%;height:30px;color:var(--color-text-secondary,#a8a8a8)}.dsh-speech-recording-cancel,.dsh-speech-recording-stop{flex:none;border-radius:999px}.dsh-speech-recording-cancel{color:var(--color-text-secondary,#a8a8a8);background:transparent}.dsh-speech-recording-cancel:hover:not(:disabled),.dsh-speech-recording-cancel:focus-visible{background:var(--color-background-hover,rgba(255,255,255,.08));color:var(--color-text,#eee)}.dsh-speech-recording-actions{display:flex;align-items:center;gap:6px;flex:none}.dsh-speech-recording-stop{color:#ef6666;background:rgba(239,102,102,.12)}.dsh-speech-recording-stop:hover:not(:disabled),.dsh-speech-recording-stop:focus-visible{color:#ff7777;background:rgba(239,102,102,.2)}.dsh-speech-recording-send{width:34px;height:34px;display:inline-grid;place-items:center;flex:none;padding:0;border:0;border-radius:999px;background:var(--dsw-alias-button-info-fill,#679efe);color:#fff;cursor:pointer}.dsh-speech-recording-send:hover:not(:disabled),.dsh-speech-recording-send:focus-visible{outline:0;background:var(--dsw-alias-button-info-hover,#4176e6)}.dsh-speech-recording-send:disabled{cursor:default;opacity:.4}.dsh-speech-recording-send svg{width:16px;height:16px}.dsh-speech-recording-progress{display:flex;align-items:center;justify-content:flex-end;gap:8px;width:100%;color:var(--color-text-secondary,#a8a8a8);font-size:12px}.dsh-speech-recording-takeover[data-phase="starting"] .dsh-speech-recording-progress{justify-content:center}.dsh-speech-recording-progress i{width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:dsh-speech-spin .8s linear infinite}.dsh-speech-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes dsh-speech-spin{to{transform:rotate(360deg)}}
 .dsh-speech-device-marker{display:none}[data-slot="conversation.composer.dock"]>:has(>.dsh-speech-device-dock){overflow:visible}.dsh-speech-device-fallback{min-height:22px;display:flex;align-items:center;justify-content:flex-start;padding:0 8px;overflow:visible}.dsh-speech-device-fallback .dsh-speech-device-dock{margin-left:0}.dsh-speech-device-separator{margin-left:4px;color:var(--dsw-alias-label-tertiary,var(--color-text-secondary,#888))}.dsh-speech-device-dock{position:relative;display:inline-flex;vertical-align:middle;margin-left:5px;color:var(--dsw-alias-label-secondary,var(--color-text-secondary,#a8a8a8));font:inherit}.dsh-speech-device-trigger{max-width:126px;height:20px;display:inline-flex;align-items:center;gap:4px;padding:0 5px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:11px;line-height:20px;cursor:pointer}.dsh-speech-device-trigger:hover,.dsh-speech-device-trigger:focus-visible,.dsh-speech-device-trigger[aria-expanded="true"]{outline:0;background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.08));color:var(--dsw-alias-label-primary,var(--color-text,#eee))}.dsh-speech-device-trigger:disabled{cursor:wait;opacity:.6}.dsh-speech-device-dock[data-error="true"] .dsh-speech-device-trigger{color:var(--dsw-alias-state-error-primary,#f07878)}.dsh-speech-device-icon,.dsh-speech-device-chevron{display:inline-flex;flex:none}.dsh-speech-device-icon svg{width:12px;height:12px}.dsh-speech-device-chevron svg{width:10px;height:10px}.dsh-speech-device-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dsh-speech-device-menu{position:absolute;right:0;bottom:calc(100% + 6px);z-index:80;min-width:240px;max-width:min(320px,calc(100vw - 32px));display:grid;box-sizing:border-box;padding:4px;border:1px solid var(--dsw-alias-border-l2-darkmode-thin,rgba(255,255,255,.06));border-radius:12px;background:var(--dsw-alias-bg-layer-3,#353638);color:var(--dsw-alias-label-primary,#f9fafb);box-shadow:0 0 1px rgba(0,0,0,.2),0 0 4px rgba(0,0,0,.02),0 12px 32px rgba(0,0,0,.08);font:13px/20px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.dsh-speech-device-menu-item{width:100%;min-width:0;height:38px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.dsh-speech-device-menu-item:hover,.dsh-speech-device-menu-item:focus-visible{outline:0;background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.08))}.dsh-speech-device-menu-item>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dsh-speech-device-check{width:14px;height:14px;display:inline-flex;flex:none;color:var(--dsw-alias-brand-primary,var(--dsw-alias-label-primary,#f9fafb))}.dsh-speech-device-check svg{width:14px;height:14px}.dsh-speech-device-dock[data-variant="hero"]{margin-left:0;color:var(--dsw-alias-label-primary,var(--color-text,#f9fafb));font:500 13px/20px -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif}.dsh-speech-device-dock[data-variant="hero"] .dsh-speech-device-trigger{max-width:220px;height:28px;padding:0 8px;gap:4px;border-radius:16px;font:inherit;line-height:20px}.dsh-speech-device-dock[data-variant="hero"] .dsh-speech-device-icon svg{width:16px;height:16px}.dsh-speech-device-dock[data-variant="hero"] .dsh-speech-device-chevron svg{width:14px;height:14px}.dsh-speech-device-dock[data-variant="hero"] .dsh-speech-device-menu{left:0;right:auto;top:calc(100% + 6px);bottom:auto;min-width:218px}
 [data-dsh-speech-nav]>svg{display:none}[data-dsh-speech-nav]::before{content:"";width:16px;height:16px;flex:none;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='7' y='2' width='6' height='11' rx='3' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M4.5 9.5a5.5 5.5 0 0 0 11 0M10 15v3M7 18h6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
+.dsh-speech-sidebar-playing{width:16px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex:none;margin-left:1px;color:var(--dsw-alias-state-business-primary,#679efe);pointer-events:none}.dsh-speech-sidebar-playing svg{width:13px;height:13px;fill:currentColor}[data-dsh-speech-playing-session]>.dsh-speech-sidebar-playing{animation:dsh-speech-sidebar-playing-in .16s ease-out}@keyframes dsh-speech-sidebar-playing-in{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
 .dsh-speech-dock,.dsh-speech-dock-error{min-height:22px;display:flex;align-items:center;gap:9px;padding:4px 8px 0;font-size:12px}.dsh-speech-dock-detail{color:var(--color-text-secondary,#8d8d8d)}
+.dsh-speech-summary-player{width:100%}.dsh-speech-summary-player>.dsh-speech-autoplay-toggle{margin-left:auto}
+:where(div):has(>.dsh-speech-summary-player){height:auto;flex-wrap:wrap}:where(div):has(>.dsh-speech-summary-player)>.dsh-speech-summary-player{order:-1;flex:0 0 100%;margin-bottom:4px}
 @media(max-width:680px){.dsh-speech-columns,.dsh-speech-grid,.dsh-speech-balance-grid{grid-template-columns:1fr}.dsh-speech-header{align-items:flex-start}.dsh-speech-device-separator,.dsh-speech-device-dock{display:none}}
-@media(prefers-reduced-motion:reduce){.dsh-speech-mic-tooltip{transition:none}.dsh-speech-recording-progress i{animation:none;border-right-color:currentColor}}
+@media(prefers-reduced-motion:reduce){.dsh-speech-mic-tooltip{transition:none}.dsh-speech-recording-progress i{animation:none;border-right-color:currentColor}.dsh-speech-summary-waveform i{transition:none}.dsh-speech-summary-waveform[data-preparing="true"] i,.dsh-speech-sidebar-playing{animation:none}}
 `;
 
 //#endregion
@@ -1272,7 +1371,259 @@ function Field({ label, children, hint }) {
 		]
 	});
 }
-function SpeechSettings({ controller, scope, getLocale, t }) {
+function voiceKey(voice) {
+	return `${voice.provider ?? ""}\n${voice.model ?? ""}\n${voice.id}`;
+}
+function useVoiceOptions(filters, query, enabled = true) {
+	const [voices, setVoices] = (0, react.useState)([]);
+	const [loading, setLoading] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (!enabled) {
+			setVoices([]);
+			setLoading(false);
+			return;
+		}
+		const controller = new AbortController();
+		const timer = setTimeout(() => {
+			setLoading(true);
+			speechApi.voices({
+				...filters.model === void 0 ? {} : { model: filters.model },
+				...filters.provider === void 0 ? {} : { provider: filters.provider },
+				...query.trim().length === 0 ? {} : { q: query.trim() }
+			}, controller.signal).then((result) => {
+				setVoices(result.voices.filter((voice) => voice.model !== void 0 && voice.provider !== void 0));
+			}).catch((cause) => {
+				if (!(cause instanceof DOMException && cause.name === "AbortError")) setVoices([]);
+			}).finally(() => {
+				if (!controller.signal.aborted) setLoading(false);
+			});
+		}, 250);
+		return () => {
+			clearTimeout(timer);
+			controller.abort();
+		};
+	}, [
+		enabled,
+		filters.model,
+		filters.provider,
+		query
+	]);
+	return {
+		voices,
+		loading
+	};
+}
+function VoicePicker({ label, hint, placeholder, loadingLabel, emptyLabel, query, voices, selected, loading, disabled, onQuery, onSelect }) {
+	const inputId = (0, react.useId)();
+	const listId = (0, react.useId)();
+	const [open, setOpen] = (0, react.useState)(false);
+	const [active, setActive] = (0, react.useState)(0);
+	const displayed = voices.slice(0, 24);
+	(0, react.useEffect)(() => {
+		setActive(0);
+	}, [voices]);
+	const keyDown = (event) => {
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			setOpen(true);
+			setActive((current) => Math.min(displayed.length - 1, current + 1));
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			setOpen(true);
+			setActive((current) => Math.max(0, current - 1));
+		} else if (event.key === "Enter" && open && displayed[active] !== void 0) {
+			event.preventDefault();
+			onSelect(displayed[active]);
+			setOpen(false);
+		} else if (event.key === "Escape") setOpen(false);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: styles.voicePicker,
+		onBlur: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				className: styles.label,
+				htmlFor: inputId,
+				children: label
+			}),
+			selected === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: styles.voiceSelected,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: selected.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+					selected.providerName ?? selected.provider,
+					" · ",
+					selected.model
+				] })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				id: inputId,
+				className: styles.input,
+				type: "search",
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-controls": listId,
+				"aria-expanded": open,
+				"aria-activedescendant": open && displayed[active] !== void 0 ? `${listId}-${String(active)}` : void 0,
+				value: query,
+				placeholder,
+				disabled,
+				onFocus: () => {
+					setOpen(true);
+				},
+				onChange: (event) => {
+					onQuery(event.target.value);
+					setOpen(true);
+				},
+				onKeyDown: keyDown
+			}),
+			hint === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: styles.hint,
+				children: hint
+			}),
+			!open ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: listId,
+				className: styles.voiceMenu,
+				role: "listbox",
+				children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: styles.voiceNotice,
+					role: "status",
+					children: loadingLabel
+				}) : displayed.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: styles.voiceNotice,
+					children: emptyLabel
+				}) : displayed.map((voice, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					id: `${listId}-${String(index)}`,
+					className: styles.voiceOption,
+					type: "button",
+					role: "option",
+					"aria-selected": selected !== void 0 && voiceKey(voice) === voiceKey(selected),
+					"data-active": index === active,
+					onMouseDown: (event) => {
+						event.preventDefault();
+					},
+					onMouseEnter: () => {
+						setActive(index);
+					},
+					onClick: () => {
+						onSelect(voice);
+						setOpen(false);
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: voice.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("small", { children: [
+						voice.providerName ?? voice.provider,
+						" · ",
+						voice.model
+					] })] }), voice.description === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: voice.description })]
+				}, voiceKey(voice)))
+			})
+		]
+	});
+}
+function ModelPicker({ label, placeholder, emptyLabel, options, value, disabled, onSelect }) {
+	const inputId = (0, react.useId)();
+	const listId = (0, react.useId)();
+	const [query, setQuery] = (0, react.useState)(value);
+	const [open, setOpen] = (0, react.useState)(false);
+	const [active, setActive] = (0, react.useState)(-1);
+	const normalizedQuery = query.trim().toLocaleLowerCase();
+	const displayed = normalizedQuery.length === 0 || query === value ? options : options.filter((option) => option.toLocaleLowerCase().includes(normalizedQuery));
+	(0, react.useEffect)(() => {
+		setQuery(value);
+	}, [value]);
+	(0, react.useEffect)(() => {
+		setActive(-1);
+	}, [query, options]);
+	const select = (model) => {
+		setQuery(model);
+		setOpen(false);
+		setActive(-1);
+		onSelect(model);
+	};
+	const keyDown = (event) => {
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			setOpen(true);
+			setActive((current) => Math.min(displayed.length - 1, current + 1));
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			setOpen(true);
+			setActive((current) => current < 0 ? displayed.length - 1 : Math.max(0, current - 1));
+		} else if (event.key === "Enter" && open && displayed[active] !== void 0) {
+			event.preventDefault();
+			select(displayed[active]);
+		} else if (event.key === "Escape") {
+			event.stopPropagation();
+			setQuery(value);
+			setOpen(false);
+			setActive(-1);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: styles.voicePicker,
+		onBlur: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) {
+				setQuery(value);
+				setOpen(false);
+				setActive(-1);
+			}
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				className: styles.label,
+				htmlFor: inputId,
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				id: inputId,
+				className: styles.input,
+				type: "search",
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-controls": listId,
+				"aria-expanded": open,
+				"aria-activedescendant": open && displayed[active] !== void 0 ? `${listId}-${String(active)}` : void 0,
+				value: query,
+				placeholder,
+				disabled,
+				onFocus: () => {
+					setOpen(true);
+				},
+				onChange: (event) => {
+					setQuery(event.target.value);
+					setOpen(true);
+				},
+				onKeyDown: keyDown
+			}),
+			!open ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: listId,
+				className: styles.voiceMenu,
+				role: "listbox",
+				children: displayed.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: styles.voiceNotice,
+					children: emptyLabel
+				}) : displayed.map((model, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					id: `${listId}-${String(index)}`,
+					className: styles.voiceOption,
+					type: "button",
+					role: "option",
+					"aria-selected": model === value,
+					"data-active": index === active,
+					onMouseDown: (event) => {
+						event.preventDefault();
+					},
+					onMouseEnter: () => {
+						setActive(index);
+					},
+					onClick: () => {
+						select(model);
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: model }) })
+				}, model))
+			})
+		]
+	});
+}
+function SpeechSettings({ controller, scope, getLocale, summaryCache, t }) {
 	const client = (0, react.useSyncExternalStore)(controller.subscribe, controller.getSnapshot);
 	const settings = (0, react.useSyncExternalStore)((listener) => scope.subscribe(listener), () => scope.getSnapshot());
 	const value = settings.value;
@@ -1288,6 +1639,8 @@ function SpeechSettings({ controller, scope, getLocale, t }) {
 	const [topUpUrl, setTopUpUrl] = (0, react.useState)(null);
 	const [languageDraft, setLanguageDraft] = (0, react.useState)("auto");
 	const [contextDraft, setContextDraft] = (0, react.useState)("");
+	const [voiceSearch, setVoiceSearch] = (0, react.useState)("");
+	const [modelVoiceSearch, setModelVoiceSearch] = (0, react.useState)("");
 	(0, react.useEffect)(() => {
 		controller.ensureMetadata();
 	}, [controller]);
@@ -1318,6 +1671,33 @@ function SpeechSettings({ controller, scope, getLocale, t }) {
 	const selectedProvider = providers.some((binding) => binding.provider === value?.provider) ? value?.provider ?? "" : providers.find((binding) => binding.isProviderDefault)?.provider ?? providers[0]?.provider ?? "";
 	const selectedBinding = providers.find((binding) => binding.provider === selectedProvider);
 	const models = (0, react.useMemo)(() => [...new Set(catalog.map((binding) => binding.model))].sort(), [catalog]);
+	const ttsCatalog = client.catalog?.ttsBindings ?? [];
+	const ttsEnabled = value?.ttsEnabled ?? true;
+	const ttsLocale = value?.language !== void 0 && value.language !== "auto" ? value.language : getLocale();
+	const localizedTts = preferredTtsSelection(ttsLocale);
+	const hasSavedVoiceRoute = value?.ttsModel !== void 0 && value.ttsProvider !== void 0 && value.ttsVoice !== void 0;
+	const ttsBinding = selectLocalizedTtsBinding(ttsCatalog, ttsLocale, { ...!hasSavedVoiceRoute ? {} : {
+		model: value.ttsModel,
+		provider: value.ttsProvider
+	} });
+	const selectedTtsModel = ttsBinding?.model ?? value?.ttsModel ?? "";
+	const ttsProviders = ttsCatalog.filter((binding) => binding.model === selectedTtsModel);
+	const selectedTtsProvider = ttsProviders.some((binding) => binding.provider === value?.ttsProvider) ? value?.ttsProvider ?? "" : ttsProviders.find((binding) => binding.isProviderDefault)?.provider ?? ttsProviders[0]?.provider ?? "";
+	const selectedTtsBinding = ttsProviders.find((binding) => binding.provider === selectedTtsProvider) ?? ttsBinding;
+	const ttsModels = (0, react.useMemo)(() => [...new Set(ttsCatalog.map((binding) => binding.model))].sort(), [ttsCatalog]);
+	const selectedVoice = (hasSavedVoiceRoute ? value.ttsVoice : void 0) ?? (selectedTtsModel === localizedTts.model && selectedTtsProvider === localizedTts.provider ? localizedTts.voice : void 0) ?? selectedTtsBinding?.defaultVoice ?? "";
+	const defaultVoiceOption = {
+		id: selectedVoice,
+		name: selectedVoice === localizedTts.voice ? localizedTts.name : selectedVoice,
+		model: selectedTtsModel,
+		provider: selectedTtsProvider
+	};
+	const globalVoiceResults = useVoiceOptions({}, voiceSearch, ttsEnabled);
+	const scopedVoiceResults = useVoiceOptions({
+		model: selectedTtsBinding?.aliases?.[0] ?? selectedTtsModel,
+		provider: selectedTtsProvider
+	}, modelVoiceSearch, ttsEnabled && selectedTtsModel.length > 0 && selectedTtsProvider.length > 0);
+	const selectedVoiceOption = [...scopedVoiceResults.voices, ...globalVoiceResults.voices].find((voice) => voice.id === selectedVoice && voice.model === selectedTtsModel && voice.provider === selectedTtsProvider) ?? (selectedVoice.length === 0 ? void 0 : defaultVoiceOption);
 	const remaining = Math.max(0, Math.ceil((codeExpiry - now) / 1e3));
 	const connected = client.status?.credential.configured === true;
 	const writable = settings.writable;
@@ -1503,23 +1883,24 @@ function SpeechSettings({ controller, scope, getLocale, t }) {
 					})
 				] })
 			}),
-			connected ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: styles.card,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("settings") }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: styles.grid,
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: styles.modelFull,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
-									label: t("model"),
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-										className: styles.input,
+			connected ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: styles.card,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("settings") }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: styles.grid,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: styles.modelFull,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelPicker, {
+										label: t("model"),
+										placeholder: t("modelSearchPlaceholder"),
+										emptyLabel: t("modelNoResults"),
+										options: models,
 										value: selectedModel,
 										disabled: !writable || models.length === 0,
-										onChange: (event) => {
-											const model = event.target.value;
+										onSelect: (model) => {
 											const choices = catalog.filter((binding) => binding.model === model);
 											const provider = choices.find((binding) => binding.isProviderDefault)?.provider ?? choices[0]?.provider;
 											run("setting:model", async () => {
@@ -1527,137 +1908,296 @@ function SpeechSettings({ controller, scope, getLocale, t }) {
 												if (provider !== void 0) await scope.set("provider", provider);
 												await controller.ensureMetadata(true);
 											});
+										}
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+									label: t("provider"),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+										className: styles.input,
+										value: selectedProvider,
+										disabled: !writable || providers.length === 0,
+										onChange: (event) => {
+											write("provider", event.target.value);
 										},
-										children: models.map((model) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-											value: model,
-											children: model
-										}, model))
+										children: providers.map((binding) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: binding.provider,
+											children: binding.provider
+										}, binding.provider))
 									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Field, {
+									label: t("language"),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										className: styles.input,
+										list: "dsh-speech-languages",
+										value: languageDraft,
+										disabled: !writable,
+										onChange: (event) => {
+											setLanguageDraft(event.target.value);
+										},
+										onBlur: commitLanguage,
+										onKeyDown: (event) => {
+											if (event.key === "Enter") event.currentTarget.blur();
+										}
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("datalist", {
+										id: "dsh-speech-languages",
+										children: LANGUAGES.map(([id, label]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: id,
+											children: id === "auto" ? t("auto") : label
+										}, id))
+									})]
 								})
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
-								label: t("provider"),
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-									className: styles.input,
-									value: selectedProvider,
-									disabled: !writable || providers.length === 0,
-									onChange: (event) => {
-										write("provider", event.target.value);
-									},
-									children: providers.map((binding) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-										value: binding.provider,
-										children: binding.provider
-									}, binding.provider))
-								})
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Field, {
-								label: t("language"),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-									className: styles.input,
-									list: "dsh-speech-languages",
-									value: languageDraft,
+							]
+						}),
+						selectedBinding?.contextSupported === true ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+							className: styles.contextDetails,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("summary", {
+								className: styles.contextSummary,
+								children: [
+									t("context"),
+									" ",
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("optional") })
+								]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: styles.contextBody,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: styles.hint,
+									children: t("contextHint")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+									className: styles.textarea,
+									"aria-label": t("context"),
+									maxLength: 4e3,
+									value: contextDraft,
 									disabled: !writable,
 									onChange: (event) => {
-										setLanguageDraft(event.target.value);
+										setContextDraft(event.target.value);
 									},
-									onBlur: commitLanguage,
-									onKeyDown: (event) => {
-										if (event.key === "Enter") event.currentTarget.blur();
-									}
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("datalist", {
-									id: "dsh-speech-languages",
-									children: LANGUAGES.map(([id, label]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-										value: id,
-										children: id === "auto" ? t("auto") : label
-									}, id))
+									onBlur: commitContext
 								})]
-							})
-						]
-					}),
-					selectedBinding?.contextSupported === true ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
-						className: styles.contextDetails,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("summary", {
-							className: styles.contextSummary,
-							children: [
-								t("context"),
-								" ",
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("optional") })
-							]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: styles.contextBody,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							})]
+						}) : null
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: styles.card,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: styles.cardTitle,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("spokenSummaries") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 								className: styles.hint,
-								children: t("contextHint")
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-								className: styles.textarea,
-								"aria-label": t("context"),
-								maxLength: 4e3,
-								value: contextDraft,
-								disabled: !writable,
-								onChange: (event) => {
-									setContextDraft(event.target.value);
-								},
-								onBlur: commitContext
+								children: t("spokenSummariesHint")
+							})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: styles.summaryToggles,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+									className: styles.switchLabel,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											type: "checkbox",
+											checked: ttsEnabled,
+											disabled: !writable,
+											onChange: (event) => {
+												write("ttsEnabled", event.target.checked);
+											}
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: styles.switchTrack,
+											"aria-hidden": "true",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {})
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("ttsEnabled") })
+									]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+									className: styles.switchLabel,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											type: "checkbox",
+											checked: value?.autoPlay ?? true,
+											disabled: !writable || !ttsEnabled,
+											onChange: (event) => {
+												write("autoPlay", event.target.checked);
+											}
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: styles.switchTrack,
+											"aria-hidden": "true",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {})
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("autoplayGlobal") })
+									]
+								})]
 							})]
-						})]
-					}) : null
-				]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: styles.card,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("balance") }),
-					client.status?.balance === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: styles.muted,
-						children: client.status?.balanceError === void 0 ? t("loading") : t("balanceUnavailable")
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
-						className: styles.balanceValue,
-						children: money(client.status.balance.paidUsd)
-					}), client.status.balance.exhausted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: styles.danger,
-						children: t("emptyBalance")
-					}) : client.status.balance.low ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: styles.warning,
-						children: t("lowBalance")
-					}) : null] }),
-					connected ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: styles.topUp,
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
-								label: t("amount"),
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-									className: styles.input,
-									type: "number",
-									min: 5,
-									max: 1e3,
-									step: 1,
-									value: topUpAmount,
-									onChange: (event) => {
-										setTopUpAmount(Number(event.target.value));
-									}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: styles.grid,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: styles.modelFull,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VoicePicker, {
+										label: t("voiceSearch"),
+										hint: t("voiceSearchHint"),
+										placeholder: t("voiceSearchPlaceholder"),
+										loadingLabel: t("loading"),
+										emptyLabel: t("voiceNoResults"),
+										query: voiceSearch,
+										voices: globalVoiceResults.voices,
+										selected: selectedVoiceOption,
+										loading: globalVoiceResults.loading,
+										disabled: !writable || !ttsEnabled,
+										onQuery: setVoiceSearch,
+										onSelect: (voice) => {
+											if (voice.model === void 0 || voice.provider === void 0) return;
+											setVoiceSearch(voice.name);
+											setModelVoiceSearch("");
+											run("setting:ttsVoice", async () => {
+												await scope.set("ttsVoice", voice.id);
+												await scope.set("ttsModel", voice.model);
+												await scope.set("ttsProvider", voice.provider);
+											});
+										}
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: styles.modelFull,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelPicker, {
+										label: t("ttsModel"),
+										placeholder: t("modelSearchPlaceholder"),
+										emptyLabel: t("modelNoResults"),
+										options: ttsModels,
+										value: selectedTtsModel,
+										disabled: !writable || !ttsEnabled || ttsModels.length === 0,
+										onSelect: (model) => {
+											const choices = ttsCatalog.filter((binding) => binding.model === model);
+											const provider = choices.find((binding) => binding.isProviderDefault)?.provider ?? choices[0]?.provider;
+											run("setting:ttsModel", async () => {
+												await scope.set("ttsModel", model);
+												if (provider !== void 0) await scope.set("ttsProvider", provider);
+											});
+										}
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+									label: t("ttsProvider"),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+										className: styles.input,
+										value: selectedTtsProvider,
+										disabled: !writable || !ttsEnabled || ttsProviders.length === 0,
+										onChange: (event) => {
+											write("ttsProvider", event.target.value);
+										},
+										children: ttsProviders.map((binding) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: binding.provider,
+											children: binding.provider
+										}, binding.provider))
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: styles.modelFull,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VoicePicker, {
+										label: t("ttsVoice"),
+										hint: t("modelVoiceSearchHint", { model: selectedTtsModel }),
+										placeholder: t("modelVoiceSearchPlaceholder"),
+										loadingLabel: t("loading"),
+										emptyLabel: t("voiceNoResults"),
+										query: modelVoiceSearch,
+										voices: scopedVoiceResults.voices,
+										selected: selectedVoiceOption,
+										loading: scopedVoiceResults.loading,
+										disabled: !writable || !ttsEnabled || selectedTtsBinding === void 0,
+										onQuery: setModelVoiceSearch,
+										onSelect: (voice) => {
+											setModelVoiceSearch(voice.name);
+											run("setting:ttsVoice", async () => {
+												await scope.set("ttsVoice", voice.id);
+												await scope.set("ttsModel", selectedTtsModel);
+												await scope.set("ttsProvider", selectedTtsProvider);
+											});
+										}
+									})
 								})
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								className: styles.primary,
+							]
+						}),
+						ttsCatalog.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: styles.muted,
+							children: t("ttsUnavailable")
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: styles.summaryCache,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("summaryCache") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: styles.hint,
+								children: t("summaryCacheHint")
+							})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: styles.secondary,
 								type: "button",
-								disabled: busy !== null || topUpAmount < 5 || topUpAmount > 1e3,
+								disabled: busy !== null,
 								onClick: () => {
-									run("top-up", async () => {
-										setTopUpUrl((await speechApi.topUp(topUpAmount)).url);
+									run("clear-summary-cache", async () => {
+										await summaryCache.clear();
+										setMessage(t("summaryCacheCleared"));
 									});
 								},
-								children: t("createLink")
-							}),
-							topUpUrl === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-								className: styles.checkout,
-								href: topUpUrl,
-								target: "_blank",
-								rel: "noreferrer",
-								children: t("openCheckout")
-							})
-						]
-					}) : null
-				]
-			})] }) : null,
+								children: busy === "clear-summary-cache" ? t("loading") : t("clearSummaryCache")
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: styles.card,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("balance") }),
+						client.status?.balance === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: styles.muted,
+							children: client.status?.balanceError === void 0 ? t("loading") : t("balanceUnavailable")
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+							className: styles.balanceValue,
+							children: money(client.status.balance.paidUsd)
+						}), client.status.balance.exhausted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: styles.danger,
+							children: t("emptyBalance")
+						}) : client.status.balance.low ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: styles.warning,
+							children: t("lowBalance")
+						}) : null] }),
+						connected ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: styles.topUp,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+									label: t("amount"),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										className: styles.input,
+										type: "number",
+										min: 5,
+										max: 1e3,
+										step: 1,
+										value: topUpAmount,
+										onChange: (event) => {
+											setTopUpAmount(Number(event.target.value));
+										}
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									className: styles.primary,
+									type: "button",
+									disabled: busy !== null || topUpAmount < 5 || topUpAmount > 1e3,
+									onClick: () => {
+										run("top-up", async () => {
+											setTopUpUrl((await speechApi.topUp(topUpAmount)).url);
+										});
+									},
+									children: t("createLink")
+								}),
+								topUpUrl === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+									className: styles.checkout,
+									href: topUpUrl,
+									target: "_blank",
+									rel: "noreferrer",
+									children: t("openCheckout")
+								})
+							]
+						}) : null
+					]
+				})
+			] }) : null,
 			message === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: styles.good,
 				role: "status",
@@ -1672,6 +2212,1152 @@ function SpeechSettings({ controller, scope, getLocale, t }) {
 	});
 }
 
+//#endregion
+//#region src/client/summary-cache.ts
+const SUMMARY_CACHE_TTL_MS = 720 * 60 * 60 * 1e3;
+const SUMMARY_CACHE_MAX_ENTRIES = 500;
+const DATABASE_NAME = "dsh-speech-summary-cache";
+const DATABASE_VERSION = 1;
+const STORE_NAME = "summaries";
+var IndexedDbSummaryCacheStore = class {
+	database;
+	async get(key) {
+		const database = await this.open();
+		if (database === void 0) return void 0;
+		return await new Promise((resolve) => {
+			const request$1 = database.transaction(STORE_NAME, "readonly").objectStore(STORE_NAME).get(key);
+			request$1.onsuccess = () => {
+				resolve(request$1.result);
+			};
+			request$1.onerror = () => {
+				resolve(void 0);
+			};
+		});
+	}
+	async put(record) {
+		const database = await this.open();
+		if (database === void 0) return;
+		await new Promise((resolve) => {
+			const transaction = database.transaction(STORE_NAME, "readwrite");
+			transaction.objectStore(STORE_NAME).put(record);
+			transaction.oncomplete = () => {
+				resolve();
+			};
+			transaction.onerror = () => {
+				resolve();
+			};
+			transaction.onabort = () => {
+				resolve();
+			};
+		});
+	}
+	async delete(key) {
+		const database = await this.open();
+		if (database === void 0) return;
+		await new Promise((resolve) => {
+			const transaction = database.transaction(STORE_NAME, "readwrite");
+			transaction.objectStore(STORE_NAME).delete(key);
+			transaction.oncomplete = () => {
+				resolve();
+			};
+			transaction.onerror = () => {
+				resolve();
+			};
+			transaction.onabort = () => {
+				resolve();
+			};
+		});
+	}
+	async all() {
+		const database = await this.open();
+		if (database === void 0) return [];
+		return await new Promise((resolve) => {
+			const request$1 = database.transaction(STORE_NAME, "readonly").objectStore(STORE_NAME).getAll();
+			request$1.onsuccess = () => {
+				resolve(request$1.result);
+			};
+			request$1.onerror = () => {
+				resolve([]);
+			};
+		});
+	}
+	async clear() {
+		const database = await this.open();
+		if (database === void 0) return;
+		await new Promise((resolve) => {
+			const transaction = database.transaction(STORE_NAME, "readwrite");
+			transaction.objectStore(STORE_NAME).clear();
+			transaction.oncomplete = () => {
+				resolve();
+			};
+			transaction.onerror = () => {
+				resolve();
+			};
+			transaction.onabort = () => {
+				resolve();
+			};
+		});
+	}
+	close() {
+		this.database?.then((database) => {
+			database?.close();
+		});
+		this.database = void 0;
+	}
+	open() {
+		if (this.database !== void 0) return this.database;
+		if (typeof indexedDB === "undefined") return Promise.resolve(void 0);
+		this.database = new Promise((resolve) => {
+			let settled = false;
+			const finish = (database) => {
+				if (settled) {
+					database?.close();
+					return;
+				}
+				settled = true;
+				resolve(database);
+			};
+			const request$1 = indexedDB.open(DATABASE_NAME, DATABASE_VERSION);
+			request$1.onupgradeneeded = () => {
+				if (!request$1.result.objectStoreNames.contains(STORE_NAME)) request$1.result.createObjectStore(STORE_NAME, { keyPath: "key" });
+			};
+			request$1.onsuccess = () => {
+				finish(request$1.result);
+			};
+			request$1.onerror = () => {
+				finish(void 0);
+			};
+			request$1.onblocked = () => {
+				finish(void 0);
+			};
+		});
+		return this.database;
+	}
+};
+async function summaryCacheKey(input) {
+	if (globalThis.crypto?.subtle === void 0) return void 0;
+	const canonical = JSON.stringify({
+		version: SUMMARY_PROMPT_VERSION,
+		request: input.request,
+		answer: input.answer,
+		locale: input.locale,
+		route: {
+			provider: input.route.provider,
+			model: input.route.model,
+			reasoningEffort: input.route.reasoningEffort ?? null
+		}
+	});
+	const digest = await globalThis.crypto.subtle.digest("SHA-256", new TextEncoder().encode(canonical));
+	return [...new Uint8Array(digest)].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+/** Browser-local, fail-open cache. It never stores session or message identity. */
+var SummaryCache = class {
+	constructor(store = new IndexedDbSummaryCacheStore(), now = Date.now, ttlMs = SUMMARY_CACHE_TTL_MS, maximumEntries = SUMMARY_CACHE_MAX_ENTRIES) {
+		this.store = store;
+		this.now = now;
+		this.ttlMs = ttlMs;
+		this.maximumEntries = maximumEntries;
+	}
+	async get(input) {
+		try {
+			const key = await summaryCacheKey(input);
+			if (key === void 0) return void 0;
+			const record = await this.store.get(key);
+			if (record === void 0) return void 0;
+			const now = this.now();
+			if (record.expiresAt <= now || record.summary.length === 0 || record.summary.length > MAX_TTS_CHARACTERS) {
+				await this.store.delete(key);
+				return;
+			}
+			await this.store.put({
+				...record,
+				accessedAt: now
+			});
+			return record.summary;
+		} catch {
+			return;
+		}
+	}
+	async set(input, summary) {
+		if (summary.length === 0 || summary.length > MAX_TTS_CHARACTERS) return;
+		try {
+			const key = await summaryCacheKey(input);
+			if (key === void 0) return;
+			const now = this.now();
+			await this.store.put({
+				key,
+				summary,
+				expiresAt: now + this.ttlMs,
+				accessedAt: now
+			});
+			await this.prune(now);
+		} catch {}
+	}
+	async clear() {
+		try {
+			await this.store.clear();
+		} catch {}
+	}
+	dispose() {
+		this.store.close();
+	}
+	async prune(now) {
+		const records = await this.store.all();
+		const live = [];
+		for (const record of records) if (record.expiresAt <= now) await this.store.delete(record.key);
+		else live.push(record);
+		live.sort((a, b) => b.accessedAt - a.accessedAt);
+		for (const record of live.slice(this.maximumEntries)) await this.store.delete(record.key);
+	}
+};
+
+//#endregion
+//#region src/client/spoken-controller.ts
+const EMPTY_PEAKS = Object.freeze(Array.from({ length: 48 }, (_, index) => .15 + .08 * Math.sin(index * .73) ** 2));
+function contentText(value) {
+	if (!Array.isArray(value)) return "";
+	return value.flatMap((block) => {
+		if (block === null || typeof block !== "object") return [];
+		const candidate = block;
+		return candidate.type === "text" && typeof candidate.text === "string" ? [candidate.text] : [];
+	}).join("\n").trim();
+}
+function boundSource(text, maximum) {
+	if (text.length <= maximum) return text;
+	const marker = "\n\n[...middle omitted for spoken-summary input...]\n\n";
+	const remaining = maximum - 51;
+	const beginning = Math.ceil(remaining / 2);
+	return `${text.slice(0, beginning)}${marker}${text.slice(text.length - (remaining - beginning))}`;
+}
+/** Derive only the closing finalized assistant message for each completed turn. */
+function spokenSources(nodes, locale, turnEnds, requests = []) {
+	const closings = /* @__PURE__ */ new Map();
+	for (const node of nodes) {
+		if (node.kind !== "assistant" || node.messageId === void 0 || node.interrupted === true) continue;
+		if (!turnEnds.has(node.turn)) continue;
+		if (node.blocks.filter((block) => block.kind === "text").map((block) => block.text).join("\n").trim().length === 0) continue;
+		const current = closings.get(node.turn);
+		if (current === void 0 || node.seq > current.seq) closings.set(node.turn, node);
+	}
+	const result = [];
+	for (const assistant of [...closings.values()].sort((a, b) => a.seq - b.seq)) {
+		const answer = assistant.blocks.filter((block) => block.kind === "text").map((block) => block.text).join("\n").trim();
+		if (answer.length === 0 || assistant.messageId === void 0) continue;
+		let request$1 = "";
+		for (let index = nodes.length - 1; index >= 0; index -= 1) {
+			const candidate = nodes[index];
+			if (candidate === void 0 || candidate.seq >= assistant.seq) continue;
+			if (candidate.kind === "user" || candidate.kind === "steering") {
+				request$1 = contentText(candidate.content);
+				if (request$1.length > 0) break;
+			}
+		}
+		const inspection = requests.find((request$2) => request$2.purpose === "assistant" && request$2.resultSeq === assistant.seq) ?? [...requests].reverse().find((request$2) => request$2.purpose === "assistant" && request$2.turn === assistant.turn && request$2.step === assistant.step && request$2.status === "complete");
+		const recorded = assistant.requestConfig ?? assistant.provenance ?? inspection?.requestConfig ?? inspection?.provenance;
+		const route = recorded === void 0 ? void 0 : {
+			provider: recorded.provider,
+			model: recorded.model,
+			..."reasoningEffort" in recorded && typeof recorded.reasoningEffort === "string" ? { reasoningEffort: recorded.reasoningEffort } : {}
+		};
+		result.push({
+			messageId: String(assistant.messageId),
+			seq: assistant.seq,
+			request: boundSource(request$1, MAX_SUMMARY_REQUEST_CHARACTERS),
+			answer: boundSource(answer, MAX_SUMMARY_ANSWER_CHARACTERS),
+			locale,
+			...route === void 0 ? {} : { route }
+		});
+	}
+	return result;
+}
+const INTERACTION_CUES = {
+	en: "I need some feedback to keep going.",
+	zh: "我需要你的反馈才能继续。",
+	ja: "続けるには、フィードバックが必要です。",
+	ko: "계속하려면 피드백이 필요해요.",
+	es: "Necesito tus comentarios para continuar.",
+	fr: "J’ai besoin de votre avis pour continuer.",
+	de: "Ich brauche Ihre Rückmeldung, um fortzufahren.",
+	pt: "Preciso do seu feedback para continuar.",
+	it: "Ho bisogno del tuo feedback per continuare.",
+	ru: "Мне нужна ваша обратная связь, чтобы продолжить.",
+	ar: "أحتاج إلى ملاحظاتك لكي أتابع.",
+	hi: "आगे बढ़ने के लिए मुझे आपकी प्रतिक्रिया चाहिए।",
+	id: "Saya perlu masukan Anda untuk melanjutkan.",
+	vi: "Tôi cần phản hồi của bạn để tiếp tục."
+};
+function interactionCue(locale) {
+	return INTERACTION_CUES[locale.toLowerCase().split("-")[0] ?? ""] ?? INTERACTION_CUES.en;
+}
+function revokeAudioUrl(url) {
+	if (url?.startsWith("blob:") === true) URL.revokeObjectURL(url);
+}
+function browserAudio() {
+	const audio = new Audio();
+	audio.preload = "metadata";
+	return audio;
+}
+var SpokenSummaryController = class {
+	audio;
+	listeners = /* @__PURE__ */ new Set();
+	states = /* @__PURE__ */ new Map();
+	observed = /* @__PURE__ */ new Map();
+	messageSessions = /* @__PURE__ */ new Map();
+	observedInteractions = /* @__PURE__ */ new Set();
+	observedInteractionSessions = /* @__PURE__ */ new Set();
+	autoplayConsumed = /* @__PURE__ */ new Set();
+	voiceCache = /* @__PURE__ */ new Map();
+	activeMessageId;
+	activeSessionKey;
+	loadedMessageId;
+	playbackGeneration = 0;
+	snapshot = { messages: /* @__PURE__ */ new Map() };
+	enabled = true;
+	disposed = false;
+	analyserContext;
+	analyserSource;
+	analyser;
+	analyserData;
+	analysisFrame;
+	analysisTick = 0;
+	pauseResolutionTimer;
+	constructor(audioFactory = browserAudio, summaryCache = new SummaryCache()) {
+		this.summaryCache = summaryCache;
+		this.audio = audioFactory();
+	}
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	};
+	getSnapshot = () => this.snapshot;
+	setEnabled(enabled) {
+		if (this.disposed || this.enabled === enabled) return;
+		this.enabled = enabled;
+		if (enabled) return;
+		this.stopActive();
+		this.clearAudioOwnership(true);
+		for (const [messageId, state] of this.states) {
+			state.abort?.abort();
+			state.abort = void 0;
+			state.requestGeneration += 1;
+			revokeAudioUrl(state.audioUrl);
+			if (state.ephemeral === true) {
+				this.states.delete(messageId);
+				continue;
+			}
+			Object.assign(state, {
+				phase: "idle",
+				summary: void 0,
+				audioUrl: void 0,
+				error: void 0,
+				duration: 0,
+				progress: 0,
+				peaks: EMPTY_PEAKS,
+				ended: false
+			});
+		}
+		this.voiceCache.clear();
+		this.publish();
+	}
+	mount(messageId) {
+		const state = this.ensure(messageId);
+		state.mounts += 1;
+		state.releaseGeneration += 1;
+		return () => {
+			state.mounts = Math.max(0, state.mounts - 1);
+			const releaseGeneration = ++state.releaseGeneration;
+			queueMicrotask(() => {
+				if (state.mounts === 0 && state.releaseGeneration === releaseGeneration) this.release(messageId);
+			});
+		};
+	}
+	observeSession(sessionKey, sources, settings) {
+		if (this.disposed) return;
+		this.setEnabled(settings.ttsEnabled);
+		const ids = new Set(sources.map((source) => source.messageId));
+		const maxSeq = sources.reduce((maximum, source) => Math.max(maximum, source.seq), -1);
+		for (const id of ids) this.messageSessions.set(id, sessionKey);
+		const previous = this.observed.get(sessionKey);
+		if (previous === void 0) {
+			this.observed.set(sessionKey, {
+				ids,
+				maxSeq
+			});
+			for (const id of ids) this.ensure(id);
+			this.publish();
+			return;
+		}
+		const previousMaxSeq = previous.maxSeq;
+		let changed = false;
+		for (const source of sources) {
+			if (previous.ids.has(source.messageId)) continue;
+			previous.ids.add(source.messageId);
+			changed = true;
+			if (settings.ttsEnabled && source.seq > previousMaxSeq) this.prepare(source, settings, settings.autoPlay);
+			else this.ensure(source.messageId);
+		}
+		previous.maxSeq = Math.max(previous.maxSeq, maxSeq);
+		if (changed && (!settings.ttsEnabled || sources.some((source) => source.seq <= previousMaxSeq))) this.publish();
+	}
+	observeInteractions(sessionKey, interactionKeys, locale, settings) {
+		if (this.disposed) return;
+		this.setEnabled(settings.ttsEnabled);
+		if (!this.observedInteractionSessions.has(sessionKey)) {
+			this.observedInteractionSessions.add(sessionKey);
+			for (const key of interactionKeys) this.observedInteractions.add(`${sessionKey}\n${key}`);
+			return;
+		}
+		for (const key of interactionKeys) {
+			const identity = `${sessionKey}\n${key}`;
+			if (this.observedInteractions.has(identity)) continue;
+			this.observedInteractions.add(identity);
+			const messageId = `interaction:${identity}`;
+			this.messageSessions.set(messageId, sessionKey);
+			if (settings.ttsEnabled && settings.autoPlay) this.prepareCue(messageId, interactionCue(locale), settings);
+		}
+	}
+	async prepare(source, settings, autoPlay = false) {
+		if (!this.enabled || !settings.ttsEnabled) return;
+		const state = this.ensure(source.messageId);
+		if (state.phase === "preparing" || state.phase === "ready" || state.phase === "playing") {
+			if (state.phase === "ready" && !autoPlay) await this.play(source.messageId, true);
+			return;
+		}
+		if (source.route === void 0) {
+			this.fail(source.messageId, "The completed answer has no recorded LLM route.");
+			return;
+		}
+		const binding = selectLocalizedTtsBinding(settings.bindings, source.locale, {
+			...settings.ttsModel === void 0 ? {} : { model: settings.ttsModel },
+			...settings.ttsProvider === void 0 ? {} : { provider: settings.ttsProvider }
+		});
+		if (binding === void 0) {
+			this.fail(source.messageId, "No compatible synchronous text-to-speech model is available.");
+			return;
+		}
+		const abort = new AbortController();
+		state.abort?.abort();
+		state.abort = abort;
+		const requestGeneration = ++state.requestGeneration;
+		this.patch(source.messageId, {
+			phase: "preparing",
+			error: void 0,
+			progress: 0
+		});
+		try {
+			const voice = await this.voiceFor(binding, settings.ttsVoice);
+			if (voice === void 0) throw new Error("No compatible voice is available for this text-to-speech route.");
+			const summaryInput = {
+				request: source.request || "No preceding user prose was available.",
+				answer: source.answer,
+				locale: source.locale,
+				route: source.route
+			};
+			let summary = await this.summaryCache.get(summaryInput);
+			if (this.disposed || abort.signal.aborted || state.requestGeneration !== requestGeneration) return;
+			if (summary === void 0) {
+				summary = (await speechApi.summarize(summaryInput, abort.signal)).summary;
+				if (this.disposed || abort.signal.aborted || state.requestGeneration !== requestGeneration) return;
+				await this.summaryCache.set(summaryInput, summary);
+			}
+			const prepared = await speechApi.prepareTts({
+				text: summary,
+				model: binding.model,
+				provider: binding.provider,
+				voice
+			}, abort.signal);
+			if (this.disposed || abort.signal.aborted || state.requestGeneration !== requestGeneration) return;
+			state.abort = void 0;
+			this.patch(source.messageId, {
+				phase: "ready",
+				summary,
+				audioUrl: prepared.url,
+				duration: 0,
+				progress: 0,
+				peaks: EMPTY_PEAKS,
+				error: void 0,
+				ended: false
+			});
+			if (autoPlay && this.activeMessageId === void 0 && !this.autoplayConsumed.has(source.messageId)) await this.play(source.messageId, false);
+		} catch (error) {
+			if (abort.signal.aborted || state.requestGeneration !== requestGeneration) return;
+			state.abort = void 0;
+			this.fail(source.messageId, error instanceof Error ? error.message : "Could not prepare the spoken summary.");
+		}
+	}
+	async prepareCue(messageId, text, settings) {
+		if (!this.enabled || !settings.ttsEnabled) return;
+		const state = this.ensure(messageId);
+		state.ephemeral = true;
+		const binding = selectLocalizedTtsBinding(settings.bindings, text === INTERACTION_CUES.zh ? "zh" : "en", {
+			...settings.ttsModel === void 0 ? {} : { model: settings.ttsModel },
+			...settings.ttsProvider === void 0 ? {} : { provider: settings.ttsProvider }
+		});
+		if (binding === void 0) {
+			this.release(messageId);
+			return;
+		}
+		const abort = new AbortController();
+		state.abort = abort;
+		const requestGeneration = ++state.requestGeneration;
+		try {
+			const voice = await this.voiceFor(binding, settings.ttsVoice);
+			if (voice === void 0) throw new Error("No compatible voice is available.");
+			const prepared = await speechApi.prepareTts({
+				text,
+				model: binding.model,
+				provider: binding.provider,
+				voice
+			}, abort.signal);
+			if (this.disposed || abort.signal.aborted || state.requestGeneration !== requestGeneration) return;
+			state.abort = void 0;
+			this.patch(messageId, {
+				phase: "ready",
+				audioUrl: prepared.url,
+				duration: 0,
+				progress: 0,
+				peaks: EMPTY_PEAKS,
+				ended: false
+			});
+			if (this.activeMessageId !== void 0) {
+				this.release(messageId);
+				return;
+			}
+			await this.play(messageId, false);
+			if (this.activeMessageId !== messageId) this.release(messageId);
+		} catch {
+			if (!abort.signal.aborted && state.requestGeneration === requestGeneration) this.release(messageId);
+		}
+	}
+	async play(messageId, explicit) {
+		const state = this.states.get(messageId);
+		if (state?.audioUrl === void 0 || this.disposed || !this.enabled) return;
+		if (!explicit && this.activeMessageId !== void 0 && this.activeMessageId !== messageId) return;
+		if (this.activeMessageId !== void 0 && this.activeMessageId !== messageId) this.stopActive();
+		const generation = ++this.playbackGeneration;
+		this.activeMessageId = messageId;
+		this.clearPauseResolution();
+		if (this.loadedMessageId !== messageId) {
+			this.audio.pause();
+			this.audio.src = state.audioUrl;
+			this.loadedMessageId = messageId;
+			this.audio.currentTime = state.progress > 0 && (state.duration <= 0 || state.progress < state.duration * .98) ? state.progress : 0;
+		} else if (state.ended === true) this.audio.currentTime = 0;
+		this.audio.onended = () => {
+			this.clearPauseResolution();
+			this.finishPlayback(generation, messageId, true);
+		};
+		this.audio.onerror = () => {
+			if (!this.owns(generation, messageId)) return;
+			this.fail(messageId, "The spoken summary could not be played.");
+			this.clearAudioOwnership(true);
+		};
+		this.audio.onpause = () => {
+			if (!this.owns(generation, messageId)) return;
+			this.clearPauseResolution();
+			this.pauseResolutionTimer = setTimeout(() => {
+				this.pauseResolutionTimer = void 0;
+				this.finishPlayback(generation, messageId, this.audio.ended);
+			}, 80);
+		};
+		this.audio.ontimeupdate = () => {
+			if (!this.owns(generation, messageId)) return;
+			const duration = Number.isFinite(this.audio.duration) ? this.audio.duration : state.duration;
+			this.patch(messageId, {
+				progress: Math.max(0, this.audio.currentTime),
+				duration: Math.max(0, duration)
+			});
+		};
+		this.audio.onplaying = () => {
+			if (!this.owns(generation, messageId)) return;
+			this.autoplayConsumed.add(messageId);
+		};
+		this.patch(messageId, {
+			phase: "playing",
+			ended: false
+		});
+		try {
+			await this.audio.play();
+			if (!this.owns(generation, messageId)) return;
+			this.autoplayConsumed.add(messageId);
+			this.activeSessionKey = this.messageSessions.get(messageId);
+			this.publish();
+			this.startAnalysis(messageId, generation);
+		} catch {
+			if (!this.owns(generation, messageId)) return;
+			this.patch(messageId, { phase: "ready" });
+			this.clearAudioOwnership(false);
+		}
+	}
+	pause(messageId) {
+		if (this.activeMessageId !== messageId) return;
+		this.patch(messageId, {
+			phase: "ready",
+			progress: Math.max(0, this.audio.currentTime),
+			ended: false
+		});
+		++this.playbackGeneration;
+		this.audio.pause();
+		this.clearAudioOwnership(false);
+	}
+	retry(source, settings) {
+		if (!this.enabled || !settings.ttsEnabled) return;
+		const state = this.ensure(source.messageId);
+		if (this.loadedMessageId === source.messageId) this.clearAudioOwnership(true);
+		state.abort?.abort();
+		state.requestGeneration += 1;
+		revokeAudioUrl(state.audioUrl);
+		Object.assign(state, {
+			phase: "idle",
+			audioUrl: void 0,
+			summary: void 0,
+			error: void 0,
+			progress: 0,
+			duration: 0,
+			peaks: EMPTY_PEAKS,
+			ended: false
+		});
+		this.publish();
+		this.prepare(source, settings, false).then(() => this.play(source.messageId, true));
+	}
+	dispose() {
+		if (this.disposed) return;
+		this.disposed = true;
+		this.stopActive();
+		this.clearAudioOwnership(true);
+		for (const state of this.states.values()) {
+			state.abort?.abort();
+			revokeAudioUrl(state.audioUrl);
+		}
+		this.states.clear();
+		this.observed.clear();
+		this.messageSessions.clear();
+		this.observedInteractions.clear();
+		this.observedInteractionSessions.clear();
+		this.autoplayConsumed.clear();
+		this.voiceCache.clear();
+		this.analyserContext?.close().catch(() => {});
+		this.analyserContext = void 0;
+		this.analyserSource = void 0;
+		this.analyser = void 0;
+		this.analyserData = void 0;
+		this.listeners.clear();
+	}
+	async voiceFor(binding, preferred) {
+		if (preferred !== void 0 && preferred.length > 0) return preferred;
+		const key = `${binding.provider}\n${binding.model}`;
+		let promise = this.voiceCache.get(key);
+		if (promise === void 0) {
+			promise = speechApi.voices({
+				model: binding.aliases?.[0] ?? binding.model,
+				provider: binding.provider
+			}).then((result) => result.voices.map((voice) => voice.id)).catch((error) => {
+				this.voiceCache.delete(key);
+				throw error;
+			});
+			this.voiceCache.set(key, promise);
+		}
+		const voices = await promise;
+		const localized = preferredTtsSelection(binding.model.startsWith("minimax/") ? "zh" : "en");
+		return binding.model === localized.model && binding.provider === localized.provider && voices.includes(localized.voice) ? localized.voice : binding.defaultVoice !== void 0 ? binding.defaultVoice : voices[0];
+	}
+	startAnalysis(messageId, generation) {
+		this.stopAnalysis();
+		this.resetAnalyser();
+		this.ensureAnalyser();
+		if (typeof requestAnimationFrame === "undefined") return;
+		const frame = (time) => {
+			if (!this.owns(generation, messageId)) return;
+			if (time - this.analysisTick >= 45) {
+				this.analysisTick = time;
+				this.patch(messageId, { peaks: this.readAmplitude(time) });
+			}
+			this.analysisFrame = requestAnimationFrame(frame);
+		};
+		this.analysisFrame = requestAnimationFrame(frame);
+	}
+	ensureAnalyser() {
+		if (this.analyser !== void 0) {
+			this.analyserContext?.resume().catch(() => {});
+			return;
+		}
+		if (typeof AudioContext === "undefined" || this.audio.captureStream === void 0) return;
+		try {
+			const context = new AudioContext();
+			const analyser = context.createAnalyser();
+			analyser.fftSize = 128;
+			analyser.smoothingTimeConstant = .62;
+			const source = context.createMediaStreamSource(this.audio.captureStream());
+			source.connect(analyser);
+			this.analyserContext = context;
+			this.analyserSource = source;
+			this.analyser = analyser;
+			this.analyserData = new Uint8Array(analyser.fftSize);
+			context.resume().catch(() => {});
+		} catch {
+			this.analyserContext = void 0;
+			this.analyserSource = void 0;
+			this.analyser = void 0;
+			this.analyserData = void 0;
+		}
+	}
+	readAmplitude(time) {
+		if (this.analyser !== void 0 && this.analyserData !== void 0) {
+			this.analyser.getByteTimeDomainData(this.analyserData);
+			let signalPeak = 0;
+			const peaks = Array.from({ length: 48 }, (_, index) => {
+				const start = Math.floor(index * this.analyserData.length / 48);
+				const end = Math.max(start + 1, Math.floor((index + 1) * this.analyserData.length / 48));
+				let amplitude = 0;
+				for (let sample = start; sample < end; sample += 1) amplitude = Math.max(amplitude, Math.abs((this.analyserData[sample] ?? 128) - 128) / 128);
+				signalPeak = Math.max(signalPeak, amplitude);
+				return Math.min(1, .06 + Math.sqrt(amplitude) * 2.4);
+			});
+			if (signalPeak > .004) return peaks;
+		}
+		return this.activityPeaks(time);
+	}
+	activityPeaks(time) {
+		return Array.from({ length: 48 }, (_, index) => {
+			const carrier = .5 + .5 * Math.sin(time * .014 + index * 1.37);
+			const envelope = .5 + .5 * Math.sin(time * .0037 + index * .29);
+			return .1 + .52 * carrier * envelope;
+		});
+	}
+	stopAnalysis() {
+		if (this.analysisFrame !== void 0 && typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(this.analysisFrame);
+		this.analysisFrame = void 0;
+		this.analysisTick = 0;
+	}
+	clearPauseResolution() {
+		if (this.pauseResolutionTimer !== void 0) clearTimeout(this.pauseResolutionTimer);
+		this.pauseResolutionTimer = void 0;
+	}
+	resetAnalyser() {
+		this.analyserContext?.close().catch(() => {});
+		this.analyserContext = void 0;
+		this.analyserSource = void 0;
+		this.analyser = void 0;
+		this.analyserData = void 0;
+	}
+	ensure(messageId) {
+		let state = this.states.get(messageId);
+		if (state === void 0) {
+			state = {
+				phase: "idle",
+				duration: 0,
+				progress: 0,
+				peaks: EMPTY_PEAKS,
+				requestGeneration: 0,
+				mounts: 0,
+				releaseGeneration: 0
+			};
+			this.states.set(messageId, state);
+		}
+		return state;
+	}
+	patch(messageId, patch) {
+		Object.assign(this.ensure(messageId), patch);
+		this.publish();
+	}
+	fail(messageId, message) {
+		this.patch(messageId, {
+			phase: "error",
+			error: message
+		});
+	}
+	owns(generation, messageId) {
+		return this.playbackGeneration === generation && this.activeMessageId === messageId;
+	}
+	finishPlayback(generation, messageId, ended) {
+		if (!this.owns(generation, messageId)) return;
+		const state = this.states.get(messageId);
+		const measuredDuration = Number.isFinite(this.audio.duration) ? Math.max(0, this.audio.duration) : state?.duration ?? 0;
+		if (state !== void 0) Object.assign(state, {
+			phase: "ready",
+			duration: measuredDuration,
+			progress: ended ? measuredDuration : this.audio.currentTime,
+			ended
+		});
+		++this.playbackGeneration;
+		if (state?.ephemeral === true) {
+			this.clearAudioOwnership(true);
+			revokeAudioUrl(state.audioUrl);
+			this.states.delete(messageId);
+		} else this.clearAudioOwnership(false);
+		this.publish();
+	}
+	stopActive() {
+		const messageId = this.activeMessageId;
+		if (messageId === void 0) return;
+		const state = this.states.get(messageId);
+		if (state !== void 0 && state.phase === "playing") Object.assign(state, {
+			phase: "ready",
+			progress: Math.max(0, this.audio.currentTime),
+			ended: false
+		});
+		++this.playbackGeneration;
+		this.audio.pause();
+		this.clearAudioOwnership(false);
+		this.publish();
+	}
+	clearAudioOwnership(unload) {
+		this.stopAnalysis();
+		this.clearPauseResolution();
+		this.activeMessageId = void 0;
+		this.activeSessionKey = void 0;
+		this.audio.onended = null;
+		this.audio.onplaying = null;
+		this.audio.onerror = null;
+		this.audio.onpause = null;
+		this.audio.ontimeupdate = null;
+		if (unload) {
+			this.loadedMessageId = void 0;
+			this.audio.removeAttribute("src");
+			this.audio.load();
+		}
+		this.publish();
+	}
+	release(messageId) {
+		const state = this.states.get(messageId);
+		if (state === void 0) return;
+		if (this.activeMessageId === messageId) this.stopActive();
+		if (this.loadedMessageId === messageId) this.clearAudioOwnership(true);
+		state.abort?.abort();
+		state.requestGeneration += 1;
+		revokeAudioUrl(state.audioUrl);
+		this.states.delete(messageId);
+		this.publish();
+	}
+	publish() {
+		this.snapshot = {
+			messages: new Map([...this.states].map(([id, state]) => [id, {
+				phase: state.phase,
+				...state.summary === void 0 ? {} : { summary: state.summary },
+				...state.audioUrl === void 0 ? {} : { audioUrl: state.audioUrl },
+				duration: state.duration,
+				progress: state.progress,
+				peaks: state.peaks,
+				...state.error === void 0 ? {} : { error: state.error },
+				...state.ended === void 0 ? {} : { ended: state.ended }
+			}])),
+			...this.activeMessageId === void 0 ? {} : { activeMessageId: this.activeMessageId },
+			...this.activeSessionKey === void 0 ? {} : { activeSessionKey: this.activeSessionKey }
+		};
+		for (const listener of this.listeners) listener();
+	}
+};
+
+//#endregion
+//#region src/client/SpokenSummary.tsx
+const EMPTY_REQUESTS = [];
+function preparationSettings(controller, settings, locale) {
+	const fallback = preferredTtsSelection(locale);
+	const selection = settings?.ttsModel !== void 0 && settings.ttsProvider !== void 0 && settings.ttsVoice !== void 0 ? {
+		model: settings.ttsModel,
+		provider: settings.ttsProvider,
+		voice: settings.ttsVoice
+	} : fallback;
+	return {
+		ttsEnabled: settings?.ttsEnabled ?? true,
+		autoPlay: settings?.autoPlay ?? true,
+		bindings: controller.getSnapshot().catalog?.ttsBindings ?? [],
+		ttsModel: selection.model,
+		ttsProvider: selection.provider,
+		ttsVoice: selection.voice
+	};
+}
+function PlayIcon({ pause = false }) {
+	return pause ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		viewBox: "0 0 20 20",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M6 5h3v10H6zM11 5h3v10h-3z" })
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		viewBox: "0 0 20 20",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m7 4 9 6-9 6z" })
+	});
+}
+function Waveform({ peaks, preparing, playing }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: styles.summaryWaveform,
+		"aria-hidden": "true",
+		"data-preparing": preparing ? "true" : void 0,
+		"data-playing": playing ? "true" : void 0,
+		children: peaks.map((peak, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", { style: { "--dsh-speech-peak": String(peak) } }, index))
+	});
+}
+function SpokenSummaryTail({ controller, spoken, scope, getLocale, messageId, useSession, t }) {
+	const nodes = useSession((snapshot) => snapshot.nodes);
+	const turnEnds = useSession((snapshot) => snapshot.turnEnds);
+	const requests = useSession((snapshot) => {
+		const views = snapshot.views;
+		if (views?.get === void 0) return EMPTY_REQUESTS;
+		return views.get("trajectory")?.requests ?? EMPTY_REQUESTS;
+	});
+	const client = (0, react.useSyncExternalStore)(controller.subscribe, controller.getSnapshot);
+	const scopeState = (0, react.useSyncExternalStore)((listener) => scope.subscribe(listener), () => scope.getSnapshot());
+	const spokenState = (0, react.useSyncExternalStore)(spoken.subscribe, spoken.getSnapshot);
+	const locale = getLocale();
+	const sources = (0, react.useMemo)(() => spokenSources(nodes, locale, turnEnds, requests), [
+		nodes,
+		locale,
+		requests,
+		turnEnds
+	]);
+	const id = String(messageId);
+	const source = sources.find((candidate) => candidate.messageId === id);
+	const settings = (0, react.useMemo)(() => preparationSettings(controller, scopeState.value, locale), [
+		controller,
+		scopeState.value,
+		client.catalog,
+		locale
+	]);
+	const state = spokenState.messages.get(id) ?? {
+		phase: "idle",
+		duration: 0,
+		progress: 0,
+		peaks: []
+	};
+	const latestAudioMessageId = [...sources].reverse().find((candidate) => spokenState.messages.get(candidate.messageId)?.audioUrl !== void 0)?.messageId;
+	const latestSourceMessageId = sources.at(-1)?.messageId;
+	const legacyAutoplayWasUsed = scopeState.user?.autoPlay !== void 0;
+	const autoplayInlineRevealed = scopeState.value?.autoplayInlineRevealed === true || legacyAutoplayWasUsed;
+	const autoplayHostMessageId = latestAudioMessageId ?? (autoplayInlineRevealed ? latestSourceMessageId : void 0);
+	(0, react.useEffect)(() => spoken.mount(id), [spoken, id]);
+	(0, react.useEffect)(() => {
+		if (autoplayHostMessageId !== id || scopeState.value?.autoplayInlineRevealed === true || !scopeState.writable) return;
+		scope.set("autoplayInlineRevealed", true);
+	}, [
+		autoplayHostMessageId,
+		id,
+		scope,
+		scopeState.value?.autoplayInlineRevealed,
+		scopeState.writable
+	]);
+	if (!settings.ttsEnabled || source === void 0) return null;
+	const preparing = state.phase === "preparing";
+	const unavailable = source.route === void 0 || client.catalog !== void 0 && settings.bindings.length === 0;
+	const replay = state.phase === "ready" && state.ended === true;
+	const paused = state.phase === "ready" && state.progress > 0 && !replay;
+	const label = unavailable ? t("summaryUnavailable") : state.phase === "playing" ? t("summaryPause") : preparing ? t("summaryPreparing") : state.phase === "error" ? t("summaryRetry") : replay ? t("summaryReplay") : paused ? t("summaryResume") : state.audioUrl === void 0 ? t("summaryGenerate") : t("summaryPlay");
+	const activate = () => {
+		if (unavailable) return;
+		if (state.phase === "playing") {
+			spoken.pause(id);
+			return;
+		}
+		if (state.phase === "ready") {
+			spoken.play(id, true);
+			return;
+		}
+		if (state.phase === "error") {
+			spoken.retry(source, settings);
+			return;
+		}
+		spoken.prepare(source, settings, false).then(() => spoken.play(id, true));
+	};
+	const showLabel = state.phase === "idle" || state.phase === "error" || unavailable;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: styles.summaryPlayer,
+		"data-phase": state.phase,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: styles.summaryControl,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: styles.summaryButton,
+					disabled: preparing || unavailable,
+					"aria-label": label,
+					title: label,
+					onClick: activate,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayIcon, { pause: state.phase === "playing" })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Waveform, {
+					peaks: state.peaks.length === 48 ? state.peaks : Array.from({ length: 48 }, () => .12),
+					preparing,
+					playing: state.phase === "playing"
+				})]
+			}),
+			showLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: styles.summaryLabel,
+				children: label
+			}) : null,
+			autoplayHostMessageId !== id ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				className: styles.autoplayToggle,
+				role: "switch",
+				"aria-checked": scopeState.value?.autoPlay ?? true,
+				"aria-label": `${t("autoplayInline")}: ${scopeState.value?.autoPlay ?? true ? t("autoplayOn") : t("autoplayOff")}`,
+				title: `${t("autoplayInline")}: ${scopeState.value?.autoPlay ?? true ? t("autoplayOn") : t("autoplayOff")}`,
+				disabled: !scopeState.writable,
+				onClick: () => {
+					scope.set("autoPlay", !(scopeState.value?.autoPlay ?? true));
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: styles.switchTrack,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("autoplayInline") })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: styles.srOnly,
+				role: "status",
+				"aria-live": "polite",
+				children: state.phase === "error" ? state.error ?? t("summaryError") : label
+			})
+		]
+	});
+}
+function SpokenSessionObserver({ controller, spoken, scope, getLocale, sidebarPlayback, sessionId, useSession }) {
+	const state = (0, react.useSyncExternalStore)((listener) => scope.subscribe(listener), () => scope.getSnapshot());
+	const client = (0, react.useSyncExternalStore)(controller.subscribe, controller.getSnapshot);
+	const openState = useSession((snapshot) => snapshot.openState);
+	const pending = useSession((snapshot) => snapshot.pending);
+	const nodes = useSession((snapshot) => snapshot.nodes);
+	const turnEnds = useSession((snapshot) => snapshot.turnEnds);
+	const requests = useSession((snapshot) => {
+		const views = snapshot.views;
+		if (views?.get === void 0) return EMPTY_REQUESTS;
+		return views.get("trajectory")?.requests ?? EMPTY_REQUESTS;
+	});
+	const speechLocale = state.value?.language === void 0 || state.value.language === "auto" ? getLocale() : state.value.language;
+	const settings = (0, react.useMemo)(() => preparationSettings(controller, state.value, speechLocale), [
+		client.catalog,
+		controller,
+		speechLocale,
+		state.value
+	]);
+	const sources = (0, react.useMemo)(() => spokenSources(nodes, speechLocale, turnEnds, requests), [
+		nodes,
+		requests,
+		speechLocale,
+		turnEnds
+	]);
+	(0, react.useEffect)(() => {
+		controller.ensureMetadata();
+	}, [controller]);
+	(0, react.useEffect)(() => {
+		sidebarPlayback.observeCurrentSession(String(sessionId));
+	}, [sessionId, sidebarPlayback]);
+	(0, react.useEffect)(() => {
+		spoken.setEnabled(settings.ttsEnabled);
+	}, [settings.ttsEnabled, spoken]);
+	(0, react.useEffect)(() => {
+		if (client.catalog === void 0 || openState !== "open") return;
+		spoken.observeSession(String(sessionId), sources, settings);
+	}, [
+		client.catalog,
+		openState,
+		sessionId,
+		settings,
+		sources,
+		spoken
+	]);
+	(0, react.useEffect)(() => {
+		if (client.catalog === void 0 || openState !== "open") return;
+		spoken.observeInteractions(String(sessionId), pending.map((item) => item.key), speechLocale, settings);
+	}, [
+		client.catalog,
+		openState,
+		pending,
+		sessionId,
+		settings,
+		speechLocale,
+		spoken
+	]);
+	return null;
+}
+
+//#endregion
+//#region src/client/sidebar-playback-indicator.ts
+const INDICATOR_CLASS = "dsh-speech-sidebar-playing";
+const ROW_ATTRIBUTE = "data-dsh-speech-playing-session";
+function selectedSessionRow() {
+	if (typeof document === "undefined") return void 0;
+	return document.querySelector("[role=\"treeitem\"][aria-selected=\"true\"]") ?? void 0;
+}
+/**
+* Adds a memory-only playback marker to the Harness session row that owned
+* the selected conversation when audio began. Harness RC does not expose a
+* per-session-row slot, so this bridge relies only on its ARIA tree contract.
+*/
+var SidebarPlaybackIndicator = class {
+	rows = /* @__PURE__ */ new Map();
+	unsubscribe;
+	observer;
+	currentSessionKey;
+	activeSessionKey;
+	disposed = false;
+	constructor(spoken) {
+		this.spoken = spoken;
+		this.unsubscribe = spoken.subscribe(() => {
+			const activeSessionKey = spoken.getSnapshot().activeSessionKey;
+			if (activeSessionKey === this.activeSessionKey) return;
+			this.activeSessionKey = activeSessionKey;
+			this.refresh();
+		});
+		this.activeSessionKey = spoken.getSnapshot().activeSessionKey;
+		this.observer = typeof MutationObserver === "undefined" || typeof document === "undefined" ? void 0 : new MutationObserver(() => {
+			this.refresh();
+		});
+		this.observer?.observe(document.body, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["aria-selected"]
+		});
+	}
+	observeCurrentSession(sessionKey) {
+		if (this.disposed) return;
+		this.currentSessionKey = sessionKey;
+		this.refresh();
+	}
+	dispose() {
+		if (this.disposed) return;
+		this.disposed = true;
+		this.unsubscribe();
+		this.observer?.disconnect();
+		this.removeIndicators();
+		this.rows.clear();
+	}
+	refresh() {
+		if (this.disposed) return;
+		const selected = selectedSessionRow();
+		if (selected !== void 0 && this.currentSessionKey !== void 0) this.rows.set(this.currentSessionKey, selected);
+		if (this.activeSessionKey === void 0) {
+			this.removeIndicators();
+			return;
+		}
+		let row = this.rows.get(this.activeSessionKey);
+		if (row?.isConnected !== true) {
+			this.rows.delete(this.activeSessionKey);
+			row = this.currentSessionKey === this.activeSessionKey ? selected : void 0;
+			if (row !== void 0) this.rows.set(this.activeSessionKey, row);
+		}
+		if (row === void 0) {
+			this.removeIndicators();
+			return;
+		}
+		if (document.querySelector(`.${INDICATOR_CLASS}`)?.parentElement === row) return;
+		this.removeIndicators();
+		row.setAttribute(ROW_ATTRIBUTE, "");
+		const indicator = document.createElement("span");
+		indicator.className = INDICATOR_CLASS;
+		indicator.setAttribute("role", "img");
+		indicator.setAttribute("aria-label", "Playing spoken summary");
+		indicator.setAttribute("title", "Playing spoken summary");
+		indicator.innerHTML = "<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M5 3.25v9.5L12.5 8 5 3.25Z\"/></svg>";
+		row.append(indicator);
+	}
+	removeIndicators() {
+		if (typeof document === "undefined") return;
+		for (const row of document.querySelectorAll(`[${ROW_ATTRIBUTE}]`)) row.removeAttribute(ROW_ATTRIBUTE);
+		for (const indicator of document.querySelectorAll(`.${INDICATOR_CLASS}`)) indicator.remove();
+	}
+};
+
 //#endregion
 //#region src/client/locales.ts
 const en = {
@@ -1698,6 +3384,8 @@ const en = {
 	disconnect: "Disconnect",
 	settings: "Recognition",
 	model: "STT model",
+	modelSearchPlaceholder: "Search or select a model",
+	modelNoResults: "No matching models",
 	provider: "Provider",
 	language: "Language",
 	invalidLanguage: "Enter Auto or a valid language tag such as en, zh-CN, or ja.",
@@ -1735,7 +3423,38 @@ const en = {
 	disconnectedMic: "Connect AllModels in Settings → Speech",
 	emptyMic: "Top up your AllModels balance in Settings → Speech",
 	anotherMic: "The microphone is active in another session",
-	liveModel: "{provider} · {model}"
+	liveModel: "{provider} · {model}",
+	spokenSummaries: "Spoken summaries",
+	spokenSummariesHint: "Completed answers are summarized with their recorded LLM route, then spoken through AllModels. Nothing is added to the conversation.",
+	ttsEnabled: "Text-to-speech summaries",
+	ttsModel: "TTS model",
+	ttsProvider: "TTS provider",
+	ttsVoice: "Voice",
+	voiceSearch: "Search AllModels voices",
+	voiceSearchHint: "Optional. Choosing a voice automatically selects its compatible model and provider.",
+	voiceSearchPlaceholder: "Search by name, style, accent, or description",
+	modelVoiceSearchHint: "Search only voices compatible with {model}.",
+	modelVoiceSearchPlaceholder: "Type to search voices for this model",
+	voiceNoResults: "No matching voices",
+	ttsUnavailable: "No compatible synchronous MP3 text-to-speech route is currently advertised.",
+	summaryCache: "Summary cache",
+	summaryCacheHint: "Summaries are stored only in this browser for up to 30 days. The cache is limited to 500 entries.",
+	clearSummaryCache: "Clear cache",
+	summaryCacheCleared: "Summary cache cleared",
+	autoplayGlobal: "Autoplay",
+	autoplayShort: "Spoken summaries",
+	autoplayInline: "Auto play",
+	autoplayOn: "Autoplay on",
+	autoplayOff: "Autoplay off",
+	summaryPlay: "Play summary",
+	summaryGenerate: "Generate and play summary",
+	summaryPause: "Pause summary",
+	summaryResume: "Resume summary",
+	summaryReplay: "Replay summary",
+	summaryRetry: "Retry spoken summary",
+	summaryPreparing: "Preparing spoken summary…",
+	summaryError: "Could not prepare the spoken summary.",
+	summaryUnavailable: "Spoken summary unavailable for this answer"
 };
 const zh = {
 	nav: "语音",
@@ -1761,6 +3480,8 @@ const zh = {
 	disconnect: "断开连接",
 	settings: "语音识别",
 	model: "STT 模型",
+	modelSearchPlaceholder: "搜索或选择模型",
+	modelNoResults: "没有匹配的模型",
 	provider: "服务商",
 	language: "语言",
 	invalidLanguage: "请输入“自动”或有效的语言标签，例如 en、zh-CN 或 ja。",
@@ -1798,7 +3519,38 @@ const zh = {
 	disconnectedMic: "请前往“设置 → 语音”连接 AllModels",
 	emptyMic: "请前往“设置 → 语音”为 AllModels 充值",
 	anotherMic: "麦克风正在另一个会话中使用",
-	liveModel: "{provider} · {model}"
+	liveModel: "{provider} · {model}",
+	spokenSummaries: "语音摘要",
+	spokenSummariesHint: "使用回答中记录的 LLM 路由生成简短摘要，再通过 AllModels 播放。不会向对话添加任何内容。",
+	ttsEnabled: "文本转语音摘要",
+	ttsModel: "TTS 模型",
+	ttsProvider: "TTS 服务商",
+	ttsVoice: "声音",
+	voiceSearch: "搜索 AllModels 声音",
+	voiceSearchHint: "可选。选择声音后会自动设置兼容的模型和服务商。",
+	voiceSearchPlaceholder: "按名称、风格、口音或描述搜索",
+	modelVoiceSearchHint: "仅搜索与 {model} 兼容的声音。",
+	modelVoiceSearchPlaceholder: "输入关键词搜索此模型的声音",
+	voiceNoResults: "没有匹配的声音",
+	ttsUnavailable: "目前没有兼容的同步 MP3 文本转语音路由。",
+	summaryCache: "摘要缓存",
+	summaryCacheHint: "摘要仅在此浏览器中保存最多 30 天，缓存上限为 500 条。",
+	clearSummaryCache: "清除缓存",
+	summaryCacheCleared: "摘要缓存已清除",
+	autoplayGlobal: "自动播放",
+	autoplayShort: "语音摘要",
+	autoplayInline: "自动播放",
+	autoplayOn: "自动播放已开启",
+	autoplayOff: "自动播放已关闭",
+	summaryPlay: "播放摘要",
+	summaryGenerate: "生成并播放摘要",
+	summaryPause: "暂停摘要",
+	summaryResume: "继续播放摘要",
+	summaryReplay: "重新播放摘要",
+	summaryRetry: "重试语音摘要",
+	summaryPreparing: "正在准备语音摘要…",
+	summaryError: "无法准备语音摘要。",
+	summaryUnavailable: "此回答无法生成语音摘要"
 };
 
 //#endregion
@@ -1810,6 +3562,9 @@ const inject = [
 ];
 function apply(ctx) {
 	const controller = new SpeechController();
+	const summaryCache = new SummaryCache();
+	const spoken = new SpokenSummaryController(void 0, summaryCache);
+	const sidebarPlayback = new SidebarPlaybackIndicator(spoken);
 	const scope = ctx.settingsScope.bind({ namespace: "dsh-speech" });
 	const getLocale = () => ctx.locale.getLocale().active;
 	ctx.effect(() => ctx.locale.register("speech", {
@@ -1847,8 +3602,12 @@ function apply(ctx) {
 		};
 	}, "dsh-speech: settings navigation icon");
 	ctx.effect(() => () => {
+		sidebarPlayback.dispose();
 		controller.dispose();
-	}, "dsh-speech: browser controller");
+		spoken.dispose();
+		summaryCache.dispose();
+	}, "dsh-speech: browser controllers");
+	controller.ensureMetadata();
 	ctx.slots.inject("settings.section", () => ctx.slots.register({
 		name: "settings.section",
 		id: "speech",
@@ -1858,7 +3617,8 @@ function apply(ctx) {
 		inject: () => ({
 			controller,
 			scope,
-			getLocale
+			getLocale,
+			summaryCache
 		})
 	}, SpeechSettings));
 	ctx.inject(["conversation"], (scoped) => {
@@ -1894,11 +3654,38 @@ function apply(ctx) {
 				getLocale
 			})
 		}, SpeechInputDock);
+		const spokenAction = scoped.slots.register({
+			name: "conversation.chat.assistant-actions",
+			id: "spoken-summary",
+			order: -100,
+			locale: "speech",
+			inject: () => ({
+				controller,
+				spoken,
+				scope,
+				getLocale,
+				sidebarPlayback
+			})
+		}, SpokenSummaryTail);
+		const spokenObserver = scoped.slots.register({
+			name: "conversation.composer.dock",
+			id: "spoken-summary-observer",
+			order: 110,
+			inject: () => ({
+				controller,
+				spoken,
+				scope,
+				getLocale,
+				sidebarPlayback
+			})
+		}, SpokenSessionObserver);
 		return () => {
 			controller.detachBlocks(blocks);
 			mic();
 			dock();
 			inputDock();
+			spokenAction();
+			spokenObserver();
 		};
 	});
 }