@tanzerfe/page-use 0.0.4 → 0.0.6

package/dist/{src-B9wNTD0L.mjs → src-CHB0xWWP.mjs}

@@ -1,7 +1,75 @@
 import { PageAgent } from "page-agent";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html, nothing, svg } from "lit";
 import { keyed } from "lit/directives/keyed.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
+//#region src/voice/browserEngine.ts
+/** 内置浏览器引擎的保留 id；注入引擎使用该 id 会被忽略 */
+const BROWSER_ENGINE_ID = "browser";
+/** 播报语言 */
+const SPEECH_LANG = "zh-CN";
+/** 超时兜底的语速估算：中文语音在 rate=1 时约每秒 4 字 */
+const CHARS_PER_SECOND = 4;
+/** 超时兜底的余量（毫秒）：覆盖语音引擎启动延迟；onend 不触发时按估算时长 + 余量视为播完 */
+const TIMEOUT_MARGIN_MS = 2e3;
+/** 当前环境是否支持语音合成 */
+function isSpeechSupported() {
+	return typeof globalThis.speechSynthesis !== "undefined" && typeof globalThis.SpeechSynthesisUtterance !== "undefined";
+}
+/** 可用的中文语音（lang 以 zh 开头，兼容 zh-CN / zh_CN / zh-HK 等写法）；Chrome 首次调用可能为空，需监听 voiceschanged */
+function getChineseVoices() {
+	if (!isSpeechSupported()) return [];
+	return globalThis.speechSynthesis.getVoices().filter((voice) => /^zh(?:$|[-_])/i.test(voice.lang));
+}
+/** 语音选择：指定名称 → 第一个中文语音 → undefined（浏览器默认语音） */
+function resolveVoice(voiceName) {
+	if (!isSpeechSupported()) return void 0;
+	const voices = globalThis.speechSynthesis.getVoices();
+	return voiceName && voices.find((voice) => voice.name === voiceName) || getChineseVoices()[0];
+}
+const browserTtsEngine = {
+	id: BROWSER_ENGINE_ID,
+	label: "本地语音（浏览器）",
+	splitSentences: true,
+	isAvailable: isSpeechSupported,
+	listVoices: () => getChineseVoices().map((voice) => ({
+		value: voice.name,
+		label: voice.name
+	})),
+	speak(text, { rate, voice: voiceName, signal }) {
+		return new Promise((resolve) => {
+			if (signal.aborted) {
+				resolve();
+				return;
+			}
+			const utterance = new SpeechSynthesisUtterance(text);
+			utterance.lang = SPEECH_LANG;
+			utterance.rate = rate > 0 ? rate : 1;
+			const voice = resolveVoice(voiceName);
+			if (voice) utterance.voice = voice;
+			let settled = false;
+			let timer;
+			const finish = () => {
+				if (settled) return;
+				settled = true;
+				clearTimeout(timer);
+				signal.removeEventListener("abort", onAbort);
+				resolve();
+			};
+			const onAbort = () => {
+				globalThis.speechSynthesis.cancel();
+				finish();
+			};
+			utterance.onend = finish;
+			utterance.onerror = finish;
+			signal.addEventListener("abort", onAbort);
+			timer = setTimeout(finish, text.length / (CHARS_PER_SECOND * utterance.rate) * 1e3 + TIMEOUT_MARGIN_MS);
+			globalThis.speechSynthesis.speak(utterance);
+		});
+	}
+};
+
+//#endregion
 //#region src/core/maskTheme.ts
 /**
 * 运行期蒙层与模拟光标的定制主题（覆盖 page-agent SimulatorMask 的默认视觉）。
@@ -93,6 +161,38 @@ ${CURSOR}[class*='clicking'] > :nth-child(1)::before {
 }
 `;
 
+//#endregion
+//#region src/voice/engines.ts
+/**
+* 语音合成引擎注册表：合并宿主注入的引擎与内置浏览器引擎，并按设置解析当前生效引擎。
+* narration（实际播报）与调试面板（设置展示）共用这里的结论，避免两处各自回退。
+*/
+/**
+* 可选引擎列表：浏览器引擎（本地语音）在最前，注入引擎按注入顺序、去重排在其后（即下拉框顺序）。
+* 宿主注入 id 为 'browser' 的引擎会被忽略；重复 id 保留先出现者。
+*/
+function listTtsEngines(injected) {
+	const list = injected === void 0 ? [] : Array.isArray(injected) ? injected : [injected];
+	const seen = /* @__PURE__ */ new Set([BROWSER_ENGINE_ID]);
+	const engines = [browserTtsEngine];
+	for (const engine of list) {
+		if (seen.has(engine.id)) {
+			console.warn(`[PageUse] 语音合成引擎 id 重复，已忽略：${engine.id}（${engine.label}）`);
+			continue;
+		}
+		seen.add(engine.id);
+		engines.push(engine);
+	}
+	return engines;
+}
+/**
+* 当前生效引擎：保存的 id 命中则用之；否则为默认引擎，即浏览器引擎（本地语音），与是否注入引擎无关。
+* 回退只影响本次解析，不改写设置，宿主恢复该引擎后仍按原选择播报。
+*/
+function resolveTtsEngine(engines, savedId) {
+	return savedId && engines.find((engine) => engine.id === savedId) || browserTtsEngine;
+}
+
 //#endregion
 //#region src/core/options.ts
 /** 默认模型，仅为示例取值；接入其它端点时应通过 llm.model 显式指定支持 function calling 的模型 */
@@ -147,12 +247,14 @@ function normalizeOptions(options) {
 		beforeTaskLabel: options.beforeTaskLabel || "任务开始前执行宿主预处理",
 		storageKeyPrefix: options.storageKeyPrefix || "tz-page-use",
 		pageAgentOptions: options.pageAgentOptions ?? {},
-		exposeGlobal: options.exposeGlobal !== false
+		exposeGlobal: options.exposeGlobal !== false,
+		ttsEngines: listTtsEngines(options.tts)
 	};
 }
 /** URL 查询参数：?pageUseDebug=1 打开调试面板，?pageUseDebug=0 关闭；结果记入 sessionStorage */
 const LAUNCHER_QUERY_KEY = "pageUseDebug";
 /** 从 location 读取调试开关（hash 路由的查询参数在 # 之后，两处都查） */
+/** 读取 URL 中的 pageUseDebug 参数（search 或 hash 内的查询串）；未携带时为 null。供 launcher 判定显示状态 */
 function readLauncherQuery() {
 	const fromSearch = new URLSearchParams(window.location.search).get(LAUNCHER_QUERY_KEY);
 	if (fromSearch !== null) return fromSearch;
@@ -220,7 +322,7 @@ function createStore(initial) {
 //#region src/core/settings.ts
 /**
 * Page Use 本地设置（localStorage 持久化，单例）。
-* 含 page-agent 内置面板/元素编号高亮开关、蒙层与光晕、演示播报、调试入口拖拽位置。
+* 含 page-agent 内置面板/元素编号高亮开关、蒙层与光晕、演示播报、调试入口拖拽位置与显示状态。
 * 存储键为 `${storageKeyPrefix}-settings`。
 */
 /** page-agent 元素高亮容器 id（page-controller 内部常量，随版本可能变化） */
@@ -239,7 +341,9 @@ const DEFAULT_PAGE_USE_SETTINGS = {
 	customMaskEffect: true,
 	voiceEnabled: false,
 	voiceRate: 1.1,
-	voiceName: "",
+	voiceEngineId: "",
+	voiceNames: {},
+	launcherVisible: null,
 	fabPos: null
 };
 /**
@@ -251,16 +355,25 @@ const LOCKED_SETTINGS = {
 	showBuiltinPanel: false,
 	customMaskEffect: true
 };
-function storageKey$1(prefix) {
+function storageKey$2(prefix) {
 	return `${prefix}-settings`;
 }
-function load$1(prefix) {
+/** 旧字段 voiceName 迁移为浏览器引擎的音色；已有 voiceNames 时以新结构为准，旧字段一律丢弃 */
+function migrate(stored) {
+	const { voiceName, ...rest } = stored;
+	if (voiceName === void 0 || rest.voiceNames) return rest;
+	return {
+		...rest,
+		voiceNames: voiceName ? { [BROWSER_ENGINE_ID]: voiceName } : {}
+	};
+}
+function load$2(prefix) {
 	try {
-		const raw = window.localStorage.getItem(storageKey$1(prefix));
+		const raw = window.localStorage.getItem(storageKey$2(prefix));
 		if (!raw) return { ...DEFAULT_PAGE_USE_SETTINGS };
 		return {
 			...DEFAULT_PAGE_USE_SETTINGS,
-			...JSON.parse(raw),
+			...migrate(JSON.parse(raw)),
 			...LOCKED_SETTINGS
 		};
 	} catch {
@@ -269,7 +382,7 @@ function load$1(prefix) {
 }
 function save(prefix, settings) {
 	try {
-		window.localStorage.setItem(storageKey$1(prefix), JSON.stringify(settings));
+		window.localStorage.setItem(storageKey$2(prefix), JSON.stringify(settings));
 	} catch {}
 }
 /** 按开关注入/移除一段覆盖样式（用于压制 page-agent 自带的 DOM，这些节点位于宿主 document 中） */
@@ -297,12 +410,12 @@ function applyToDocument(settings, prev) {
 	if (!prev || prev.showBuiltinPanel !== settings.showBuiltinPanel) toggleOverrideStyle(BUILTIN_PANEL_STYLE_ID, `#${BUILTIN_PANEL_ID}{display:none !important;}`, settings.showBuiltinPanel);
 	if (!prev || prev.customMaskEffect !== settings.customMaskEffect) toggleOverrideStyle(MASK_THEME_STYLE_ID, PAGE_USE_MASK_THEME_CSS, !settings.customMaskEffect);
 }
-let prefix$1 = DEFAULT_STORAGE_KEY_PREFIX;
-let store$2 = null;
+let prefix$2 = DEFAULT_STORAGE_KEY_PREFIX;
+let store$4 = null;
 /** 懒创建：首次访问时读取存储并把设置应用到页面 */
-function ensureStore$1() {
-	if (store$2) return store$2;
-	const created = createStore(load$1(prefix$1));
+function ensureStore$2() {
+	if (store$4) return store$4;
+	const created = createStore(load$2(prefix$2));
 	let prev = null;
 	const sync = (next) => {
 		applyToDocument(next, prev);
@@ -310,94 +423,123 @@ function ensureStore$1() {
 	};
 	sync(created.get());
 	created.subscribe((next) => {
-		save(prefix$1, next);
+		save(prefix$2, next);
 		sync(next);
 	});
-	store$2 = created;
+	store$4 = created;
 	return created;
 }
 /** 切换存储键前缀（createPageUse 时调用）；前缀变化时重新读取 */
 function setSettingsStoragePrefix(next) {
-	if (next === prefix$1 && store$2) return;
-	prefix$1 = next;
-	if (store$2) store$2.replace(load$1(prefix$1));
-	else ensureStore$1();
+	if (next === prefix$2 && store$4) return;
+	prefix$2 = next;
+	if (store$4) store$4.replace(load$2(prefix$2));
+	else ensureStore$2();
 }
 const pageUseSettings = {
 	store: {
-		get: () => ensureStore$1().get(),
-		subscribe: (listener) => ensureStore$1().subscribe(listener)
+		get: () => ensureStore$2().get(),
+		subscribe: (listener) => ensureStore$2().subscribe(listener)
 	},
 	get() {
-		return ensureStore$1().get();
+		return ensureStore$2().get();
 	},
 	/** 固定项（LOCKED_SETTINGS）的修改被忽略 */
 	update(patch) {
-		ensureStore$1().set({
+		ensureStore$2().set({
 			...patch,
 			...LOCKED_SETTINGS
 		});
 	},
 	/** 把浮动入口（及随之定位的面板）恢复到默认角落位置 */
 	resetPositions() {
-		ensureStore$1().set({ fabPos: null });
+		ensureStore$2().set({ fabPos: null });
 	}
 };
 
+//#endregion
+//#region src/voice/preview.ts
+/**
+* 音色试听：用当前引擎、音色与语速播报一句固定文本，供设置页选择音色时对比。
+* 不经 speaker 队列：试听是单次、可中止的调用，不参与待播与抢占，也不受本次任务静音影响。
+* 与任务播报互斥：launcher 在任务执行中禁用试听，narration 在任务开始时调用 stopPreview()。
+*/
+/** 试听文本 */
+const PREVIEW_TEXT = "您好，我是页面智能体。";
+const store$3 = createStore({ playing: false });
+/** 试听状态（playing：是否正在试听），供设置页切换「试听 / 停止」按钮 */
+const previewStore = store$3;
+/** 当前试听的中止控制；空闲时为 null */
+let controller = null;
+/** 开始试听：先中止上一次试听；引擎 speak 结束（播完、失败或被中止）后复位状态 */
+function startPreview(engine, options) {
+	stopPreview();
+	if (!engine.isAvailable()) return;
+	const current = new AbortController();
+	controller = current;
+	store$3.set({ playing: true });
+	let speaking;
+	try {
+		speaking = engine.speak(PREVIEW_TEXT, {
+			...options,
+			signal: current.signal
+		});
+	} catch (error) {
+		speaking = Promise.reject(error);
+	}
+	speaking.catch((error) => console.warn("[PageUse] 试听失败", error)).then(() => {
+		if (controller !== current) return;
+		controller = null;
+		store$3.set({ playing: false });
+	});
+}
+/** 中止试听；空闲时不触碰引擎（浏览器引擎中止会调用 speechSynthesis.cancel()） */
+function stopPreview() {
+	if (!controller) return;
+	controller.abort();
+	controller = null;
+	store$3.set({ playing: false });
+}
+
 //#endregion
 //#region src/voice/speaker.ts
 /**
-* 浏览器语音合成（speechSynthesis）封装：演示播报的播放队列。
+* 演示播报的播放队列，发声委托给当前语音合成引擎（由 getEngine 提供，可在播报间切换）。
 *
-* 队列只有两部分：当前正在播报的一组句子，以及一条待播的步骤文本。
+* 队列只有两部分：当前正在播报的一组文本，以及一条待播的步骤文本。
 * - 步骤播报不打断当前播报，只覆盖待播槽（语音跟不上执行时丢弃中间步骤）；
 * - 提问 / 结论先清空再播报；
-* - 每次清空递增代次，旧代次的 onend / onerror / 超时回调一律忽略，避免 cancel() 后迟到的回调误触发下一条。
+* - 每组开始时读取一次引擎并在组内固定使用（splitSentences 与中止对象保持一致）；
+* - 每组持有一个 AbortController，清空时中止，引擎据此停止自身的合成与播放；
+* - 每次清空递增代次，旧代次 speak() 的迟到 resolve 一律忽略，避免中止后误触发下一条。
 *
-* 不支持语音合成的环境中所有方法静默返回。
+* 当前引擎不可用时 enqueue / interrupt 静默返回。
 */
-/** 播报语言 */
-const SPEECH_LANG = "zh-CN";
-/** 超时兜底的语速估算：中文语音在 rate=1 时约每秒 4 字 */
-const CHARS_PER_SECOND = 4;
-/** 超时兜底的余量（毫秒）：覆盖语音引擎启动延迟；onend 不触发时按估算时长 + 余量视为播完 */
-const TIMEOUT_MARGIN_MS = 2e3;
-/** 当前环境是否支持语音合成 */
-function isSpeechSupported() {
-	return typeof globalThis.speechSynthesis !== "undefined" && typeof globalThis.SpeechSynthesisUtterance !== "undefined";
-}
-/** 可用的中文语音（lang 以 zh 开头，兼容 zh-CN / zh_CN / zh-HK 等写法）；Chrome 首次调用可能为空，需监听 voiceschanged */
-function getChineseVoices() {
-	if (!isSpeechSupported()) return [];
-	return globalThis.speechSynthesis.getVoices().filter((voice) => /^zh(?:$|[-_])/i.test(voice.lang));
-}
-/** 语音选择：指定名称 → 第一个中文语音 → undefined（浏览器默认语音） */
-function resolveVoice(voiceName) {
-	if (!isSpeechSupported()) return void 0;
-	const voices = globalThis.speechSynthesis.getVoices();
-	return voiceName && voices.find((voice) => voice.name === voiceName) || getChineseVoices()[0];
-}
-function createSpeaker(getSettings) {
+/**
+* @param getSettings 每次调用引擎前读取；参数为当前组使用的引擎，调用方据此取该引擎的音色
+* @param getEngine 每组开始时读取当前生效引擎
+*/
+function createSpeaker(getSettings, getEngine = () => browserTtsEngine) {
 	let generation = 0;
-	/** 当前组剩余的句子；null 表示空闲 */
+	/** 当前组剩余的待调用文本；null 表示空闲 */
 	let current = null;
 	let pending = null;
-	let timer = null;
-	function clearTimer() {
-		if (timer !== null) {
-			clearTimeout(timer);
-			timer = null;
-		}
-	}
+	/** 当前组的中止控制；空闲时为 null，clear 据此判断是否需要中止引擎 */
+	let controller = null;
+	/** 当前组使用的引擎；组内不随设置切换 */
+	let engine = getEngine();
 	function playGroup(sentences) {
-		current = [...sentences];
+		engine = getEngine();
+		if (!engine.isAvailable()) return;
+		current = engine.splitSentences ? [...sentences] : [sentences.join("")];
+		controller = new AbortController();
 		playNext();
 	}
 	function playNext() {
-		clearTimer();
-		const sentence = current?.shift();
-		if (sentence === void 0) {
+		const text = current?.shift();
+		if (text === void 0 || !controller) {
 			current = null;
+			controller = null;
 			if (pending) {
 				const next = pending;
 				pending = null;
@@ -405,35 +547,32 @@ function createSpeaker(getSettings) {
 			}
 			return;
 		}
-		const { rate, voiceName } = getSettings();
-		const utterance = new SpeechSynthesisUtterance(sentence);
-		utterance.lang = SPEECH_LANG;
-		utterance.rate = rate > 0 ? rate : 1;
-		const voice = resolveVoice(voiceName);
-		if (voice) utterance.voice = voice;
 		const owner = generation;
-		let settled = false;
-		const finish = () => {
-			if (settled || owner !== generation) return;
-			settled = true;
-			playNext();
-		};
-		utterance.onend = finish;
-		utterance.onerror = finish;
-		timer = setTimeout(finish, sentence.length / (CHARS_PER_SECOND * utterance.rate) * 1e3 + TIMEOUT_MARGIN_MS);
-		globalThis.speechSynthesis.speak(utterance);
+		const { rate, voiceName } = getSettings(engine);
+		let speaking;
+		try {
+			speaking = engine.speak(text, {
+				rate,
+				voice: voiceName,
+				signal: controller.signal
+			});
+		} catch (error) {
+			speaking = Promise.reject(error);
+		}
+		speaking.catch((error) => console.warn("[PageUse] 语音播报失败", error)).then(() => {
+			if (owner === generation) playNext();
+		});
 	}
 	function clear() {
-		const active = current !== null;
 		generation += 1;
+		controller?.abort();
+		controller = null;
 		current = null;
 		pending = null;
-		clearTimer();
-		if (active && isSpeechSupported()) globalThis.speechSynthesis.cancel();
 	}
 	return {
 		enqueue(sentences) {
-			if (!isSpeechSupported() || !sentences.length) return;
+			if (!sentences.length) return;
 			if (current !== null) {
 				pending = sentences;
 				return;
@@ -441,7 +580,6 @@ function createSpeaker(getSettings) {
 			playGroup(sentences);
 		},
 		interrupt(sentences) {
-			if (!isSpeechSupported()) return;
 			clear();
 			if (sentences.length) playGroup(sentences);
 		},
@@ -455,10 +593,15 @@ function createSpeaker(getSettings) {
 * 播报文本清洗（纯函数，无 DOM 依赖）：把模型输出的步骤描述 / 结论转成适合语音合成的句子数组。
 * 结果只用于播报，不回写任务结果与面板展示内容。
 */
-/** 单条播报清洗后的字数上限：中文语音约 4 字/秒，120 字约 30 秒 */
-const SPEECH_MAX_CHARS = 120;
-/** 超过上限截断时追加的提示语 */
+/** 单条播报清洗后的字数上限：中文语音约 4 字/秒，240 字约 1 分钟（语速 1 时） */
+const SPEECH_MAX_CHARS = 240;
+/** 超过上限截断时追加的提示语（未挂载调试面板、不知道面板名称时使用） */
 const SPEECH_TRUNCATED_HINT = "详细内容请查看面板";
+/** 截断提示语：有面板名称（调试面板标题）时指明名称，如「详细内容请查看「页面智能体」」 */
+function buildTruncatedHint(panelName) {
+	const name = panelName?.trim();
+	return name ? `详细内容请查看「${name}」` : SPEECH_TRUNCATED_HINT;
+}
 /**
 * 单次合成的字数上限：Chrome 的在线语音单条超过约 15 秒会被截断，
 * 超过该长度的句子再按逗号等停顿切分（约 4 字/秒 × 12 秒）
@@ -526,7 +669,7 @@ function joinLines(lines) {
 	return result.replace(/([。！？!?；;，,、：:])[。！？!?；;，,、：:\s]+/g, "$1").replace(/^[。！？!?；;，,、：:\s]+/, "").trim();
 }
 /** 超过上限时在上限内最后一个句末标点处截断，找不到则硬截断，并追加提示语 */
-function truncate(text, maxChars) {
+function truncate(text, maxChars, hint) {
 	if (text.length <= maxChars) return text;
 	const head = text.slice(0, maxChars);
 	let cut = -1;
@@ -537,7 +680,7 @@ function truncate(text, maxChars) {
 	let kept = cut > 0 ? head.slice(0, cut + 1) : head;
 	kept = kept.replace(/[；;，,、：:]$/, "");
 	if (!/[。！？!?]$/.test(kept)) kept += "。";
-	return `${kept}${SPEECH_TRUNCATED_HINT}`;
+	return `${kept}${hint}`;
 }
 /** 按句末标点切句；过长的句子再按逗号等停顿切分 */
 function splitSentences(text) {
@@ -566,10 +709,10 @@ function splitSentences(text) {
 * 处理顺序：代码块 / HTML → 表格 → 行内 Markdown 与符号 → 拼行 → 截断 → 切句。
 */
 function toSpeechText(text, options = {}) {
-	const maxChars = options.maxChars ?? 120;
+	const maxChars = options.maxChars ?? 240;
 	const joined = joinLines(toLines((text || "").replace(/```[\s\S]*?(?:```|$)/g, "\n").replace(/<\/?[a-zA-Z][^>]*>/g, "")));
 	if (!joined) return [];
-	return splitSentences(truncate(joined, maxChars));
+	return splitSentences(truncate(joined, maxChars, options.truncatedHint ?? "详细内容请查看面板"));
 }
 
 //#endregion
@@ -577,6 +720,7 @@ function toSpeechText(text, options = {}) {
 /**
 * 演示播报：订阅进度事件，按设置把步骤描述、提问与结论交给 speaker 播报。
 * 只订阅事件，不影响任务执行节奏；对所有任务来源生效。
+* 是否播报 = 设置 voiceEnabled（总开关，持久化）且未处于本次任务静音（narrationMute，运行期）。
 */
 /**
 * 不播报的步骤：滚动、等待没有演示价值；done 由结论播报替代；
@@ -591,40 +735,65 @@ const SILENT_STEP_TOOLS = /* @__PURE__ */ new Set([
 	"error",
 	"retry"
 ]);
+/**
+* 调试面板名称（PageUseLauncherConfig.title），用于截断提示语「详细内容请查看「名称」」。
+* 由 launcher 挂载时登记、卸载时撤销；未挂载面板时为 null，提示语回退为「详细内容请查看面板」。
+*/
+let panelName = null;
+/** launcher 登记面板名称，返回撤销函数（仅撤销自己登记的值） */
+function registerNarrationPanelName(name) {
+	panelName = name;
+	return () => {
+		if (panelName === name) panelName = null;
+	};
+}
+/**
+* 本次任务静音（调试面板标题栏按钮）：仅运行期，不持久化，不修改 voiceEnabled。
+* 新任务 started 时重置为 false；静音期间跳过的内容在取消静音后不补播。
+*/
+const narrationMute = createStore({ muted: false });
 /** 启动播报，返回停止函数（取消订阅并停止播报） */
-function startNarration({ subscribe, speaker: injected }) {
-	const speaker = injected || createSpeaker(() => {
-		const { voiceRate, voiceName } = pageUseSettings.get();
+function startNarration({ subscribe, engines, speaker: injected }) {
+	const available = engines ?? listTtsEngines(void 0);
+	const speaker = injected || createSpeaker((engine) => {
+		const { voiceRate, voiceNames } = pageUseSettings.get();
 		return {
 			rate: voiceRate,
-			voiceName
+			voiceName: voiceNames[engine.id] ?? ""
 		};
-	});
-	const enabled = () => pageUseSettings.get().voiceEnabled;
+	}, () => resolveTtsEngine(available, pageUseSettings.get().voiceEngineId));
+	const enabled = () => pageUseSettings.get().voiceEnabled && !narrationMute.get().muted;
+	const speech = (text) => toSpeechText(text, { truncatedHint: buildTruncatedHint(panelName ?? void 0) });
 	const offEvents = subscribe((event) => {
 		switch (event.type) {
 			case "started":
+				narrationMute.set({ muted: false });
+				stopPreview();
 				speaker.clear();
 				break;
 			case "step":
 				if (!enabled() || SILENT_STEP_TOOLS.has(event.step.tool)) return;
-				speaker.enqueue(toSpeechText(event.step.goal));
+				speaker.enqueue(speech(event.step.goal));
 				break;
 			case "question":
-				if (enabled()) speaker.interrupt(toSpeechText(event.question));
+				if (enabled()) speaker.interrupt(speech(event.question));
 				break;
 			case "finished": if (event.result.status === "stopped" || !enabled()) speaker.clear();
-			else speaker.interrupt(toSpeechText(event.result.summary));
+			else speaker.interrupt(speech(event.result.summary));
 		}
 	});
-	let wasEnabled = enabled();
+	let prev = pageUseSettings.get();
 	const offSettings = pageUseSettings.store.subscribe((settings) => {
-		if (wasEnabled && !settings.voiceEnabled) speaker.clear();
-		wasEnabled = settings.voiceEnabled;
+		if (prev.voiceEnabled && !settings.voiceEnabled || prev.voiceEngineId !== settings.voiceEngineId) speaker.clear();
+		prev = settings;
+	});
+	const offMute = narrationMute.subscribe(({ muted }) => {
+		if (muted) speaker.clear();
 	});
 	return () => {
 		offEvents();
 		offSettings();
+		offMute();
 		speaker.clear();
 	};
 }
@@ -819,56 +988,186 @@ function createPageUseAgent({ options, enableMask, narration = false, shouldRunB
 * 用于快速重放上次指令，以及查看任务结果。存储键为 `${storageKeyPrefix}-history`。
 */
 const MAX_ENTRIES = 30;
-function storageKey(prefix) {
+function storageKey$1(prefix) {
 	return `${prefix}-history`;
 }
-function load(prefix) {
+function load$1(prefix) {
 	try {
-		const raw = window.localStorage.getItem(storageKey(prefix));
+		const raw = window.localStorage.getItem(storageKey$1(prefix));
 		const parsed = raw ? JSON.parse(raw) : [];
 		return Array.isArray(parsed) ? parsed : [];
 	} catch {
 		return [];
 	}
 }
-let prefix = DEFAULT_STORAGE_KEY_PREFIX;
+let prefix$1 = DEFAULT_STORAGE_KEY_PREFIX;
 /** 懒创建：避免模块加载即访问 window（SSR / 测试环境） */
-let store$1 = null;
-function ensureStore() {
-	if (!store$1) store$1 = createStore({ entries: load(prefix) });
-	return store$1;
+let store$2 = null;
+function ensureStore$1() {
+	if (!store$2) store$2 = createStore({ entries: load$1(prefix$1) });
+	return store$2;
 }
-function persist(entries) {
-	ensureStore().set({ entries });
+function persist$1(entries) {
+	ensureStore$1().set({ entries });
 	try {
-		window.localStorage.setItem(storageKey(prefix), JSON.stringify(entries));
+		window.localStorage.setItem(storageKey$1(prefix$1), JSON.stringify(entries));
 	} catch {}
 }
 /** 切换存储键前缀（createPageUse 时调用）；前缀变化时重新读取 */
 function setHistoryStoragePrefix(next) {
-	if (next === prefix && store$1) return;
-	prefix = next;
-	ensureStore().replace({ entries: load(prefix) });
+	if (next === prefix$1 && store$2) return;
+	prefix$1 = next;
+	ensureStore$1().replace({ entries: load$1(prefix$1) });
 }
 const pageUseHistory = {
 	store: {
-		get: () => ensureStore().get(),
-		subscribe: (listener) => ensureStore().subscribe(listener)
+		get: () => ensureStore$1().get(),
+		subscribe: (listener) => ensureStore$1().subscribe(listener)
 	},
 	entries() {
-		return ensureStore().get().entries;
+		return ensureStore$1().get().entries;
 	},
 	add(entry) {
-		persist([{
+		persist$1([{
 			id: `${entry.at}-${Math.random().toString(36).slice(2, 8)}`,
 			...entry
-		}, ...ensureStore().get().entries].slice(0, MAX_ENTRIES));
+		}, ...ensureStore$1().get().entries].slice(0, MAX_ENTRIES));
 	},
 	remove(id) {
-		persist(ensureStore().get().entries.filter((item) => item.id !== id));
+		persist$1(ensureStore$1().get().entries.filter((item) => item.id !== id));
 	},
 	clear() {
-		persist([]);
+		persist$1([]);
+	}
+};
+
+//#endregion
+//#region src/core/presetStore.ts
+/**
+* Page Use 快捷指令的用户维护数据（localStorage，懒创建单例）。
+* - custom：用户自定义指令，新增排在最前
+* - hidden：被用户删除（隐藏）的来源指令（菜单生成 / 内置 / 宿主 presets / scenarios）的 task 文本
+* 来源指令本身不落盘；宿主修改 task 后旧的隐藏记录自然失效，不主动清理。
+* 存储键为 `${storageKeyPrefix}-presets`。
+*/
+const EMPTY_STATE = {
+	custom: [],
+	hidden: []
+};
+function storageKey(prefix) {
+	return `${prefix}-presets`;
+}
+function createId() {
+	return `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+/** 结构校验：丢弃缺少字符串 label / task 的项，缺 id 时补生成；hidden 只保留字符串并去重 */
+function sanitize(raw) {
+	if (!raw || typeof raw !== "object") return { ...EMPTY_STATE };
+	const { custom, hidden } = raw;
+	return {
+		custom: (Array.isArray(custom) ? custom : []).flatMap((item) => {
+			if (!item || typeof item !== "object") return [];
+			const { id, label, task } = item;
+			if (typeof label !== "string" || typeof task !== "string") return [];
+			return [{
+				id: typeof id === "string" && id ? id : createId(),
+				label,
+				task
+			}];
+		}),
+		hidden: Array.isArray(hidden) ? [...new Set(hidden.filter((item) => typeof item === "string"))] : []
+	};
+}
+function load(prefix) {
+	try {
+		const raw = window.localStorage.getItem(storageKey(prefix));
+		return raw ? sanitize(JSON.parse(raw)) : { ...EMPTY_STATE };
+	} catch {
+		return { ...EMPTY_STATE };
+	}
+}
+let prefix = DEFAULT_STORAGE_KEY_PREFIX;
+let store$1 = null;
+function ensureStore() {
+	if (!store$1) store$1 = createStore(load(prefix));
+	return store$1;
+}
+function persist(patch) {
+	const current = ensureStore();
+	current.set(patch);
+	try {
+		window.localStorage.setItem(storageKey(prefix), JSON.stringify(current.get()));
+	} catch {}
+}
+/** 必填与重复校验；excludeId 为编辑中的自身，与自身相同不算重复 */
+function validate(preset, excludeId) {
+	if (!preset.label.trim()) return {
+		ok: false,
+		reason: "label-empty"
+	};
+	const task = preset.task.trim();
+	if (!task) return {
+		ok: false,
+		reason: "task-empty"
+	};
+	return ensureStore().get().custom.some((item) => item.id !== excludeId && item.task.trim() === task) ? {
+		ok: false,
+		reason: "duplicate"
+	} : { ok: true };
+}
+/** 切换存储键前缀（createPageUse 时调用）；前缀变化时重新读取 */
+function setPresetsStoragePrefix(next) {
+	if (next === prefix && store$1) return;
+	prefix = next;
+	ensureStore().replace(load(prefix));
+}
+const pageUsePresets = {
+	store: {
+		get: () => ensureStore().get(),
+		subscribe: (listener) => ensureStore().subscribe(listener)
+	},
+	get() {
+		return ensureStore().get();
+	},
+	/** 新增自定义指令，排在最前；label / task 去除首尾空白后保存 */
+	add(preset) {
+		const result = validate(preset);
+		if (!result.ok) return result;
+		persist({ custom: [{
+			id: createId(),
+			label: preset.label.trim(),
+			task: preset.task.trim()
+		}, ...ensureStore().get().custom] });
+		return result;
+	},
+	/** 编辑自定义指令，位置不变 */
+	update(id, preset) {
+		const { custom } = ensureStore().get();
+		if (!custom.some((item) => item.id === id)) return {
+			ok: false,
+			reason: "not-found"
+		};
+		const result = validate(preset, id);
+		if (!result.ok) return result;
+		persist({ custom: custom.map((item) => item.id === id ? {
+			id,
+			label: preset.label.trim(),
+			task: preset.task.trim()
+		} : item) });
+		return result;
+	},
+	remove(id) {
+		persist({ custom: ensureStore().get().custom.filter((item) => item.id !== id) });
+	},
+	/** 隐藏一条来源指令（以 task 文本为标识）；已隐藏时不重复记录 */
+	hide(task) {
+		const { hidden } = ensureStore().get();
+		if (hidden.includes(task)) return;
+		persist({ hidden: [...hidden, task] });
+	},
+	/** 恢复全部被隐藏的来源指令（含已失效的记录）；不影响自定义指令 */
+	restoreHidden() {
+		persist({ hidden: [] });
 	}
 };
 
@@ -1124,9 +1423,13 @@ function configurePageUse(options) {
 	everConfigured = true;
 	setSettingsStoragePrefix(options.storageKeyPrefix);
 	setHistoryStoragePrefix(options.storageKeyPrefix);
+	setPresetsStoragePrefix(options.storageKeyPrefix);
 	store.set({ ready: Boolean(options.llm.baseURL) });
 	stopNarration?.();
-	stopNarration = startNarration({ subscribe: subscribePageUse });
+	stopNarration = startNarration({
+		subscribe: subscribePageUse,
+		engines: options.ttsEngines
+	});
 	return () => {
 		if (config !== options) return;
 		config = null;
@@ -1324,6 +1627,39 @@ const pageUseCapability = {
 	subscribe: subscribePageUse
 };
 
+//#endregion
+//#region src/ui/launcherControl.ts
+/**
+* 调试入口的显示控制：供业务系统通过模块导出或全局对象调出 / 隐藏调试面板。
+* 显示状态写入设置 launcherVisible（localStorage 持久化），刷新后保持；
+* 不依赖 lit，全局桥接引用本模块不会引入 UI 组件。
+*/
+/** 已挂载 launcher 登记的「展开面板」回调；未挂载时为空 */
+const openers = /* @__PURE__ */ new Set();
+/** launcher 挂载时登记展开回调，返回注销函数 */
+function registerLauncherOpener(open) {
+	openers.add(open);
+	return () => {
+		openers.delete(open);
+	};
+}
+/**
+* 显示调试入口并展开面板，状态持久化。
+* 宿主未挂载调试面板时只保存状态并警告，之后挂载的面板按该状态显示。
+*/
+function showPageUseLauncher() {
+	pageUseSettings.update({ launcherVisible: true });
+	if (!openers.size) {
+		console.warn("[PageUse] 调试面板未挂载，显示状态已保存，挂载后生效（mountPageUseUI 需传入 launcher）");
+		return;
+	}
+	openers.forEach((open) => open());
+}
+/** 隐藏调试入口（面板与浮动入口），状态持久化；效果与面板标题栏的关闭按钮相同 */
+function hidePageUseLauncher() {
+	pageUseSettings.update({ launcherVisible: false });
+}
+
 //#endregion
 //#region src/capability/tool.ts
 /** 工具名；对接方在 system 提示中引用时保持一致 */
@@ -1416,7 +1752,9 @@ function installPageUseGlobal() {
 	const api = {
 		...pageUseCapability,
 		tool: PAGE_USE_TOOL,
-		runTool: runPageUseTool
+		runTool: runPageUseTool,
+		showLauncher: showPageUseLauncher,
+		hideLauncher: hidePageUseLauncher
 	};
 	window[PAGE_USE_GLOBAL_KEY] = api;
 	return () => {
@@ -1718,6 +2056,10 @@ var PageUseGlowElement = class extends LitElement {
 	}
 };
 
+//#endregion
+//#region package.json
+var version = "0.0.6";
+
 //#endregion
 //#region src/ui/drag.ts
 /** 判定为拖拽而非点击的最小位移（px） */
@@ -1742,6 +2084,7 @@ function createDrag(options) {
 		if (options.skipInteractive !== false) {
 			if (event.composedPath()[0]?.closest?.("button, input, textarea, select, a, label, [data-no-drag]")) return;
 		}
+		const tapTarget = event.composedPath()[0];
 		const handle = event.currentTarget;
 		const rect = el.getBoundingClientRect();
 		const startX = event.clientX;
@@ -1767,7 +2110,7 @@ function createDrag(options) {
 			try {
 				handle.releasePointerCapture(event.pointerId);
 			} catch {}
-			if (!moved) options.onTap?.();
+			if (!moved) options.onTap?.(tapTarget);
 		};
 		handle.setPointerCapture(event.pointerId);
 		handle.addEventListener("pointermove", onMove);
@@ -1787,6 +2130,89 @@ function createDrag(options) {
 	};
 }
 
+//#endregion
+//#region src/ui/formatTokens.ts
+/**
+* 标题栏 token 数格式化：< 1000 显示原值；否则以 k（千）/ M（百万）为单位，
+* 保留 1 位小数并去掉末尾的 .0，例如 1234 → 1.2k、1500000 → 1.5M。
+*/
+/** 单位由小到大；四舍五入后达到下一档的倍数时进位到下一档（避免出现 1000k） */
+const UNITS = [{
+	value: 1e3,
+	suffix: "k"
+}, {
+	value: 1e6,
+	suffix: "M"
+}];
+function formatTokens(n) {
+	if (n < 1e3) return String(n);
+	for (let i = 0; i < UNITS.length; i++) {
+		const unit = UNITS[i];
+		const scaled = Number((n / unit.value).toFixed(1));
+		if (scaled >= 1e3 && i < UNITS.length - 1) continue;
+		return `${scaled}${unit.suffix}`;
+	}
+	return String(n);
+}
+
+//#endregion
+//#region src/ui/icons.ts
+/**
+* 调试面板标题栏图标：24×24 线条图标，颜色跟随 currentColor，尺寸由 .icon-btn svg 控制。
+* 路径取自 Lucide（ISC 许可）：settings、arrow-left、minimize-2、x、volume-2、volume-x；
+* robotIcon 为本包自绘的页面智能体形象，其 SVG 字符串以 PAGE_USE_ROBOT_ICON_SVG 对外导出。
+*/
+/** 外层 <svg> 须在 html 模板中创建（lit 的 svg 模板只用于 <svg> 内部的片段） */
+function icon(content) {
+	return html`<svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >${content}</svg>`;
+}
+const settingsIcon = icon(svg`
+  <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+  <circle cx="12" cy="12" r="3" />
+`);
+/** 设置 / 元信息视图中返回执行记录 */
+const backIcon = icon(svg`<path d="M19 12H5" /><path d="m12 19-7-7 7-7" />`);
+/** 收起为浮动入口 */
+const collapseIcon = icon(svg`
+  <path d="M4 14h6v6" /><path d="M20 10h-6V4" /><path d="m14 10 7-7" /><path d="m3 21 7-7" />
+`);
+/** 关闭调试入口 */
+const closeIcon = icon(svg`<path d="M18 6 6 18" /><path d="m6 6 12 12" />`);
+/** 播报中（点击静音） */
+const volumeIcon = icon(svg`
+  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+  <path d="M15.54 8.46a5 5 0 0 1 0 7.07" /><path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
+`);
+/** 已静音（点击恢复） */
+const mutedIcon = icon(svg`
+  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+  <line x1="22" x2="16" y1="9" y2="15" /><line x1="16" x2="22" y1="9" y2="15" />
+`);
+/**
+* 页面智能体机器人图标（天线 + 屏幕式头部 + 双眼）的 SVG 字符串，供宿主在自身界面中复用（如智能体列表卡片）。
+* 颜色全部跟随 currentColor，不含 width / height，尺寸由宿主 CSS 控制；viewBox 为 24×24、线宽 2。
+* robot-antenna / robot-eye 类名供面板在执行中做闪烁与眨眼动画，宿主不定义对应样式时无影响。
+*/
+const PAGE_USE_ROBOT_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <circle class="robot-antenna" cx="12" cy="3" r="1.5" fill="currentColor" stroke="none" />
+  <path d="M12 4.5V7" />
+  <rect x="4" y="7" width="16" height="12.5" rx="4" />
+  <path d="M2 12v3.5" /><path d="M22 12v3.5" />
+  <circle class="robot-eye" cx="9" cy="12.5" r="1.6" fill="currentColor" stroke="none" />
+  <circle class="robot-eye" cx="15" cy="12.5" r="1.6" fill="currentColor" stroke="none" />
+  <path d="M9.5 16.3h5" />
+</svg>`;
+/** 收起时的入口按钮图标：与导出的 PAGE_USE_ROBOT_ICON_SVG 同源，内容为包内常量，无注入风险 */
+const robotIcon = html`${unsafeHTML(PAGE_USE_ROBOT_ICON_SVG)}`;
+
 //#endregion
 //#region src/ui/presets.ts
 /** 通用示例：不依赖具体站点，覆盖详情、标签、返回等典型操作 */
@@ -1804,8 +2230,11 @@ const PAGE_USE_STATIC_PRESETS = [
 		task: "概括当前页面展示的主要内容与可执行的操作"
 	}
 ];
-/** 取前 N 个可见叶子菜单，生成「打开 XX」快捷指令 */
-function buildMenuPresets(menus, limit = 8) {
+/**
+* 取前 N 个可见叶子菜单，生成「打开 XX」快捷指令。
+* exclude 中的 task 被跳过且不占名额，由后续菜单补位（用户隐藏菜单指令时使用）。
+*/
+function buildMenuPresets(menus, limit = 8, exclude) {
 	const out = [];
 	const walk = (list) => {
 		for (const node of list) {
@@ -1813,15 +2242,51 @@ function buildMenuPresets(menus, limit = 8) {
 			if (node.hidden) continue;
 			const children = (node.children || []).filter((child) => !child.hidden);
 			if (children.length) walk(children);
-			else out.push({
-				label: node.label,
-				task: `打开「${node.label}」页面`
-			});
+			else {
+				const task = `打开「${node.label}」页面`;
+				if (!exclude?.has(task)) out.push({
+					label: node.label,
+					task
+				});
+			}
 		}
 	};
 	walk(menus || []);
 	return out;
 }
+/** 组合快捷指令分组：展示区与编辑视图共用，保证两处结果一致 */
+function resolvePresetGroups(input) {
+	const hidden = new Set(input.state.hidden);
+	const visible = (list) => (list || []).filter((preset) => !hidden.has(preset.task));
+	const limit = input.menuPresetLimit;
+	const menu = limit > 0 ? buildMenuPresets(input.menus, limit, hidden) : [];
+	const builtin = visible(PAGE_USE_STATIC_PRESETS);
+	const host = visible(input.presets);
+	const scenarios = visible(input.scenarios);
+	const allSourceTasks = new Set([
+		...limit > 0 ? buildMenuPresets(input.menus, Number.POSITIVE_INFINITY) : [],
+		...PAGE_USE_STATIC_PRESETS,
+		...input.presets || [],
+		...input.scenarios || []
+	].map((preset) => preset.task));
+	const hiddenCount = [...hidden].filter((task) => allSourceTasks.has(task)).length;
+	return {
+		mine: input.state.custom,
+		common: [
+			...menu,
+			...builtin,
+			...host
+		],
+		scenarios,
+		sources: {
+			menu,
+			builtin,
+			host,
+			scenarios
+		},
+		hiddenCount
+	};
+}
 
 //#endregion
 //#region src/ui/styles.ts
@@ -1840,6 +2305,11 @@ const launcherStyles = css`
     --text-3: #8a94a6;
     --border: #e6eaf0;
     --bg-soft: #f5f7fa;
+    /* 入口按钮背景与面板边框共用的流光渐变；宿主可通过 --tz-page-use-flow-gradient 覆盖 */
+    --flow-gradient: var(
+      --tz-page-use-flow-gradient,
+      radial-gradient(#fa6400 0%, #fa6400 10%, #fcf26e 40%, #00e754 60%, #00eef4 70%, #d519d2 100%)
+    );
     font-family: system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
     font-size: 13px;
     line-height: 1.5;
@@ -1896,59 +2366,181 @@ const launcherStyles = css`
    * 运行期蒙层 z-index 为 2147483641、内置面板为 2147483642；
    * 入口与面板须高于两者，否则任务执行中无法点「终止」或回答模型提问。
    */
+  /*
+   * 入口按钮：多色径向渐变放大到 300%，循环移动 background-position 形成流光；
+   * ::before 在内缩 3px 处叠一层 14% 黑：压暗文字背后的高亮色段（黄、青）以保证白字清晰，
+   * 外圈 3px 保持原色，形成渐变描边质感。
+   * 渐变见 :host 的 --flow-gradient。
+   */
   .fab {
     position: fixed;
     z-index: 2147483643;
     display: flex;
     align-items: center;
     gap: 6px;
-    padding: 8px 14px;
+    padding: 8px 16px;
     border: none;
-    border-radius: 20px;
-    background: var(--primary);
+    border-radius: 999px;
+    background: var(--flow-gradient) 0 0 / 300% 300%;
     color: #fff;
     font: inherit;
     font-weight: 600;
+    /* 贴边的深色阴影形成细描边，配合内层压暗保证白字在高亮色段上可读 */
+    text-shadow:
+      0 0 1px rgba(0, 0, 0, 0.35),
+      0 1px 2px rgba(0, 0, 0, 0.35);
     cursor: grab;
     touch-action: none;
-    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
+    box-shadow: -1px 2px 6px 1px rgba(0, 0, 0, 0.12);
+    animation: fab-shining 15s linear infinite;
+    will-change: background-position;
+    /* 「执行中」与标题文案切换时的宽度过渡（由 launcher 设置起止宽度）；过渡中不换行、裁掉溢出文字 */
+    overflow: hidden;
+    white-space: nowrap;
+    transition: width 0.3s ease;
+  }
+  .fab::before {
+    content: '';
+    position: absolute;
+    inset: 3px;
+    border-radius: inherit;
+    background: rgba(0, 0, 0, 0.14);
+    pointer-events: none;
+  }
+  .fab > * {
+    position: relative;
   }
   .fab:active {
     cursor: grabbing;
   }
+  /* 执行中：流速加快（15s → 10s）并外发光 */
   .fab.running {
-    background: var(--warning);
-    box-shadow: 0 4px 14px color-mix(in srgb, var(--warning) 40%, transparent);
+    animation-duration: 10s;
+    box-shadow:
+      -1px 2px 6px 1px rgba(0, 0, 0, 0.12),
+      0 0 14px 2px rgba(250, 100, 0, 0.45);
   }
-  .fab-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: #fff;
+  @keyframes fab-shining {
+    0% {
+      background-position: -20% -20%;
+    }
+    25% {
+      background-position: 30% 80%;
+    }
+    50% {
+      background-position: 110% 110%;
+    }
+    75% {
+      background-position: 80% 30%;
+    }
+    100% {
+      background-position: -20% -20%;
+    }
   }
-  .fab.running .fab-dot {
+  @media (prefers-reduced-motion: reduce) {
+    .fab {
+      transition: none;
+    }
+    .fab,
+    .panel::before,
+    .fab.running .robot-antenna,
+    .fab.running .robot-eye {
+      animation: none;
+    }
+  }
+  /* 入口机器人图标：执行中天线闪烁、双眼眨动 */
+  .fab-icon {
+    display: inline-flex;
+    flex: none;
+  }
+  /* 图标 24px，上下 -2px 抵消超出 20px 的部分，按钮高度保持不变 */
+  .fab-icon svg {
+    width: 24px;
+    height: 24px;
+    margin: -2px 0;
+  }
+  .fab.running .robot-antenna {
     animation: blink 1s infinite;
   }
-
+  .robot-eye {
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+  .fab.running .robot-eye {
+    animation: robot-blink 2.4s infinite;
+  }
+  @keyframes robot-blink {
+    0%,
+    90%,
+    100% {
+      transform: scaleY(1);
+    }
+    95% {
+      transform: scaleY(0.15);
+    }
+  }
+  /*
+   * 面板：高透毛玻璃 + 2px 流光边框。
+   * 面板本体为半透明白底并对背后页面做模糊（backdrop-filter）；
+   * 边框由 ::before 绘制：整块铺流光渐变，再用遮罩挖掉 content-box，只留外圈 2px，
+   * 因此内部保持透明，不会透出渐变。边框与入口按钮使用同一套渐变与移动轨迹（fab-shining）。
+   */
   .panel {
     position: fixed;
     z-index: 2147483643;
-    /* width / height 由 panelStyle 按入口位置计算 */
+    /* width / height 由 panelStyle 按入口位置计算（border-box，内边距计入宽高） */
     display: flex;
     flex-direction: column;
-    border-radius: 10px;
-    background: #fff;
-    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
+    /* 为流光边框留出 2px，内容不被边框覆盖 */
+    padding: 2px;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.72);
+    -webkit-backdrop-filter: blur(18px) saturate(160%);
+    backdrop-filter: blur(18px) saturate(160%);
+    box-shadow:
+      0 8px 28px rgba(0, 0, 0, 0.18),
+      0 0 18px rgba(0, 238, 244, 0.18);
     overflow: hidden;
   }
+  /* 不支持 backdrop-filter 时回退为接近不透明的白底，保证内容可读 */
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    .panel {
+      background: rgba(255, 255, 255, 0.96);
+    }
+  }
+  .panel::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    padding: 2px;
+    border-radius: inherit;
+    background: var(--flow-gradient) 0 0 / 300% 300%;
+    /* 两层遮罩相减：整块减去 content-box，只保留 padding 区域的外圈 */
+    -webkit-mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask:
+      linear-gradient(#000 0 0) content-box exclude,
+      linear-gradient(#000 0 0);
+    animation: fab-shining 15s linear infinite;
+    pointer-events: none;
+  }
+  /* 执行中：边框流速加快（15s → 10s） */
+  .panel.running::before {
+    animation-duration: 10s;
+  }
 
   .head {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 10px 12px;
-    background: var(--bg-soft);
-    border-bottom: 1px solid var(--border);
+    /* 毛玻璃面板内的半透明色块；上圆角与面板内圈（12px - 2px 边框）一致，避免直角露出 */
+    border-radius: 10px 10px 0 0;
+    background: rgba(226, 232, 240, 0.75);
+    border-bottom: 1px solid rgba(208, 215, 226, 0.8);
     cursor: grab;
     touch-action: none;
     user-select: none;
@@ -1980,6 +2572,8 @@ const launcherStyles = css`
   .title {
     flex: 1 0 auto;
     font-weight: 600;
+    /* 连续点击标题打开元信息面板，避免选中文字 */
+    user-select: none;
   }
   .status {
     min-width: 0;
@@ -1990,6 +2584,48 @@ const launcherStyles = css`
     white-space: nowrap;
   }
 
+  /* 标题栏图标按钮：常态为弱化的线条图标，悬停显示浅底色；关闭按钮悬停为红底白图标 */
+  .head-actions {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 6px;
+  }
+  .icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--text-3);
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+  }
+  .icon-btn svg {
+    width: 16px;
+    height: 16px;
+  }
+  .icon-btn:hover {
+    background: #e6eaf0;
+    color: var(--text);
+  }
+  .icon-btn:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
+    outline-offset: 1px;
+  }
+  .icon-btn.active {
+    background: color-mix(in srgb, var(--primary) 12%, transparent);
+    color: var(--primary);
+  }
+  .icon-btn.close:hover {
+    background: var(--error);
+    color: #fff;
+  }
+
   /* 占满头部与输入区之间的剩余高度（min-height:0 允许在 flex 列中收缩） */
   .fill {
     flex: 1;
@@ -2013,8 +2649,28 @@ const launcherStyles = css`
     color: var(--text-3);
     font-size: 12px;
   }
-  .meta {
+  .settings-status {
+    color: var(--text-3);
+    font-size: 12px;
+  }
+  /* 元信息面板：标签 / 值两列 */
+  .meta-list {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 6px 12px;
+    margin: 0;
+    font-size: 12px;
+  }
+  .meta-list dt {
     color: var(--text-3);
+  }
+  .meta-list dd {
+    margin: 0;
+    word-break: break-all;
+  }
+  .meta-engines {
+    margin: 0;
+    padding-left: 18px;
     font-size: 12px;
     word-break: break-all;
   }
@@ -2263,7 +2919,8 @@ const launcherStyles = css`
     gap: 8px;
     padding: 10px 12px 12px;
     border-top: 1px solid var(--border);
-    background: #fafbfc;
+    border-radius: 0 0 10px 10px;
+    background: rgba(250, 251, 252, 0.5);
   }
   /* 悬浮在输入区上沿（以 .composer 为定位参照） */
   .jump-latest {
@@ -2302,7 +2959,6 @@ const launcherStyles = css`
   }
   /* ---------- 演示播报设置 ---------- */
   .voice-warning {
-    margin-left: 21px;
     font-size: 12px;
   }
   /* 与复选框文字左对齐（复选框宽 13px + 间距 8px） */
@@ -2312,6 +2968,99 @@ const launcherStyles = css`
     gap: 8px;
     margin-left: 21px;
   }
+  /* 设置页底部操作按钮：与复选框文字、播报选项输入框左对齐（同 21px 缩进），与上方拉开间距 */
+  .settings-actions {
+    margin-top: 8px;
+    margin-left: 21px;
+  }
+  /* 面板内轻提示：相对面板（.panel 为 fixed 定位）底部居中，不拦截点击 */
+  .toast {
+    position: absolute;
+    left: 50%;
+    bottom: 24px;
+    z-index: 1;
+    max-width: calc(100% - 48px);
+    padding: 6px 14px;
+    border-radius: 6px;
+    background: rgba(31, 45, 61, 0.88);
+    color: #fff;
+    font-size: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+    transform: translateX(-50%);
+    animation: toast-in 0.2s ease-out;
+  }
+
+  /* ---------- 快捷指令编辑 ---------- */
+  /*
+   * 滚动区与面板底边留出间距，避免列表滚动时贴住底边与圆角。
+   * 用 margin 而非 padding：滚动内容会滚入滚动容器自身的 padding 区域，仍然贴边。
+   */
+  .fill.preset-scroll {
+    margin-bottom: 10px;
+  }
+  /* 分组标题行：标题左、操作按钮右 */
+  .preset-group-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 4px;
+  }
+  .preset-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .preset-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 4px 4px 8px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+  }
+  /* min-width:0 使长文本在 flex 中可收缩，否则省略号不生效、按钮被挤出 */
+  .preset-text {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+  .preset-label,
+  .preset-task {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  /* 指令内容只显示一行，完整内容通过 title 悬停查看或进入编辑表单查看 */
+  .preset-task {
+    color: var(--text-3);
+    font-size: 12px;
+  }
+  .preset-form {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 8px;
+    border: 1px solid var(--primary);
+    border-radius: 6px;
+  }
+  .preset-form .input {
+    height: 28px;
+  }
+  .preset-error {
+    font-size: 12px;
+  }
+  .preset-form-actions {
+    justify-content: flex-end;
+  }
+  .preset-restore {
+    align-items: center;
+    margin-top: 8px;
+  }
+
   .field {
     display: flex;
     flex-direction: column;
@@ -2329,6 +3078,19 @@ const launcherStyles = css`
   select.input {
     height: 28px;
   }
+  /* 音色下拉框与试听按钮同一行：下拉框占满剩余宽度，长音色名省略显示 */
+  .voice-name-row {
+    display: flex;
+    gap: 6px;
+  }
+  .voice-name-row .input {
+    flex: 1;
+    min-width: 0;
+    text-overflow: ellipsis;
+  }
+  .voice-name-row .preview-btn {
+    flex: none;
+  }
 
   .input-group {
     display: flex;
@@ -2351,7 +3113,10 @@ const launcherStyles = css`
     overflow-y: auto;
     border: 1px solid var(--border);
     border-radius: 8px;
-    background: #fff;
+    /* 浮在执行记录上方，透明度低于面板以保证列表可读 */
+    background: rgba(255, 255, 255, 0.88);
+    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
   }
   .history-item {
     display: flex;
@@ -2395,6 +3160,12 @@ const launcherStyles = css`
       opacity: 0.25;
     }
   }
+  @keyframes toast-in {
+    from {
+      opacity: 0;
+      transform: translate(-50%, 6px);
+    }
+  }
   @keyframes spin {
     to {
       transform: rotate(360deg);
@@ -2424,9 +3195,9 @@ const STATUS_LABELS = {
 	error: "出错",
 	stopped: "已终止"
 };
-/** 入口默认位置：距视口右边/下边的距离（px） */
-const FAB_DEFAULT_RIGHT = 28;
-const FAB_DEFAULT_BOTTOM = 140;
+/** 入口默认位置：距视口右边/下边的距离（px）；面板展开时与入口对齐于同一角，即面板默认贴右下角 */
+const FAB_DEFAULT_RIGHT = 24;
+const FAB_DEFAULT_BOTTOM = 24;
 /** 面板宽度（px），与入口对齐及视口夹取计算共用 */
 const PANEL_WIDTH = 380;
 /** 面板期望高度（px），受视口 72vh 与锚点剩余空间约束 */
@@ -2434,7 +3205,25 @@ const PANEL_HEIGHT = 560;
 /** 日志区距底部小于该值（px）视为贴底 */
 const STICK_THRESHOLD = 24;
 const TEXTAREA_MIN_ROWS = 2;
-/** 播报语速调节范围与步长（SpeechSynthesisUtterance.rate；1 为正常语速，过快或过慢时中文语音难以听清） */
+/** 元信息面板解锁：任意连续 META_UNLOCK_WINDOW_MS 毫秒内点击标题达到 META_UNLOCK_CLICKS 次（滑动窗口） */
+const META_UNLOCK_WINDOW_MS = 5e3;
+const META_UNLOCK_CLICKS = 10;
+/** 面板内轻提示（toast）的显示时长（毫秒） */
+const TOAST_DURATION_MS = 2e3;
+/** 标题栏返回按钮的目标视图：按层级返回；main 无上级，此时按钮用于进入设置页 */
+const PARENT_VIEW = {
+	settings: "main",
+	meta: "main",
+	presets: "settings"
+};
+/** 自定义指令保存失败原因 → 提示文字 */
+const PRESET_SAVE_ERRORS = {
+	"label-empty": "请填写名称",
+	"task-empty": "请填写指令内容",
+	duplicate: "已存在指令内容相同的自定义指令",
+	"not-found": "该指令已被删除，请重新新增"
+};
+/** 播报语速倍率的调节范围与步长（1 为正常语速，过快或过慢时中文语音难以听清；注入引擎自行换算为服务参数） */
 const VOICE_RATE_MIN = .5;
 const VOICE_RATE_MAX = 2;
 const VOICE_RATE_STEP = .05;
@@ -2460,13 +3249,28 @@ var PageUseLauncherElement = class extends LitElement {
 	}
 	set config(value) {
 		this._config = value || {};
+		if (this.isConnected) this.syncPanelName();
 		this.requestUpdate();
 	}
+	/** 撤销本面板登记的播报用面板名称 */
+	unregisterPanelName = null;
+	/** 把面板标题登记为播报截断提示中的面板名称（「详细内容请查看「标题」」） */
+	syncPanelName() {
+		this.unregisterPanelName?.();
+		this.unregisterPanelName = registerNarrationPanelName(this._config.title || "Page Use");
+	}
 	open = false;
-	showSettings = false;
+	view = "main";
+	/** 标题点击时间戳（毫秒），用于元信息面板解锁的滑动窗口计数；不持久化 */
+	titleTaps = [];
 	task = "";
 	answer = "";
 	tray = null;
+	/** 快捷指令编辑视图中正在编辑的表单；同一时刻只有一个，离开编辑视图时清空 */
+	presetDraft = null;
+	/** 面板内轻提示文字；空串为不显示 */
+	toastText = "";
+	toastTimer = null;
 	/**
 	* 日志区跟随滚动：默认贴底跟随新内容；用户上翻后停止跟随，
 	* 回到底部附近（阈值内）或点击「最新」后恢复。
@@ -2481,8 +3285,8 @@ var PageUseLauncherElement = class extends LitElement {
 	* 因此在可见时测量并保留最近一次结果；初值为「Page Use」文案下的近似尺寸。
 	*/
 	fabSize = {
-		width: 110,
-		height: 34
+		width: 122,
+		height: 36
 	};
 	viewport = {
 		width: window.innerWidth,
@@ -2498,6 +3302,12 @@ var PageUseLauncherElement = class extends LitElement {
 		alignBottom: true
 	};
 	wasRunning = false;
+	/** 入口按钮上次渲染时是否为「执行中」文案；文案切换时用于触发宽度过渡 */
+	fabShowsRunning = false;
+	/** 文案切换前的入口宽度（px）；null 表示本次更新不需要宽度过渡 */
+	fabFromWidth = null;
+	/** 进行中宽度过渡的结束回调注销函数；过渡中再次切换时先注销，避免旧回调提前清除宽度 */
+	fabWidthCleanup = null;
 	cleanups = [];
 	get fabEl() {
 		return this.renderRoot.querySelector(".fab");
@@ -2509,7 +3319,7 @@ var PageUseLauncherElement = class extends LitElement {
 		return this.renderRoot.querySelector(".log");
 	}
 	get textareaEl() {
-		return this.renderRoot.querySelector(".textarea");
+		return this.renderRoot.querySelector(".composer .textarea");
 	}
 	fabDrag = createDrag({
 		getEl: () => this.fabEl,
@@ -2527,6 +3337,9 @@ var PageUseLauncherElement = class extends LitElement {
 	panelDrag = createDrag({
 		getEl: () => this.panelEl,
 		getPos: () => null,
+		onTap: (target) => {
+			if (target?.closest?.(".title")) this.onTitleTap();
+		},
 		setPos: ({ x, y }) => {
 			const el = this.panelEl;
 			if (!el) return;
@@ -2541,22 +3354,46 @@ var PageUseLauncherElement = class extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 		this.wasRunning = isRunning();
+		const query = readLauncherQuery();
+		if (query !== null) pageUseSettings.update({ launcherVisible: query === "1" || query === "true" });
 		this.cleanups = [
 			pageUseStore.subscribe((state) => this.onStateChange(state)),
 			pageUseSettings.store.subscribe(() => this.requestUpdate()),
 			pageUseHistory.store.subscribe(() => this.requestUpdate()),
+			pageUsePresets.store.subscribe(() => this.requestUpdate()),
+			narrationMute.subscribe(() => this.requestUpdate()),
+			previewStore.subscribe(() => this.requestUpdate()),
+			registerLauncherOpener(() => void this.expand()),
 			registerQuestionUi(),
 			this.watchVoices()
 		];
+		this.syncPanelName();
 		window.addEventListener("resize", this.onResize);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.cleanups.forEach((off) => off());
 		this.cleanups = [];
+		this.unregisterPanelName?.();
+		this.unregisterPanelName = null;
+		stopPreview();
 		window.removeEventListener("resize", this.onResize);
+		if (this.toastTimer) clearTimeout(this.toastTimer);
+		this.toastTimer = null;
+		this.toastText = "";
+	}
+	/** 可选播报引擎：宿主注入的引擎 + 浏览器引擎；尚未 createPageUse 时只有浏览器引擎 */
+	ttsEngines() {
+		return getPageUseConfig()?.ttsEngines ?? listTtsEngines(void 0);
+	}
+	/** 当前生效的播报引擎，与 narration 使用同一解析规则 */
+	ttsEngine() {
+		return resolveTtsEngine(this.ttsEngines(), pageUseSettings.get().voiceEngineId);
 	}
-	/** Chrome 的语音列表异步加载，首次读取可能为空：加载完成后刷新语音下拉框 */
+	/**
+	* Chrome 的语音列表异步加载，首次读取可能为空：加载完成后刷新语音下拉框。
+	* 挂载时宿主可能尚未注入引擎，因此不按引擎判断；注入引擎时该事件只触发一次无害的重绘。
+	*/
 	watchVoices() {
 		if (!isSpeechSupported()) return () => {};
 		const synth = globalThis.speechSynthesis;
@@ -2564,11 +3401,55 @@ var PageUseLauncherElement = class extends LitElement {
 		synth.addEventListener?.("voiceschanged", onChange);
 		return () => synth.removeEventListener?.("voiceschanged", onChange);
 	}
+	/**
+	* 入口文案在「执行中」与标题之间切换时宽度会变化；CSS 无法对 width:auto 过渡，
+	* 因此在渲染新文案前记录旧宽度，渲染后由 animateFabWidth 从旧宽度过渡到新宽度。
+	*/
+	willUpdate() {
+		const running = isRunning(pageUseStore.get());
+		if (running === this.fabShowsRunning) return;
+		this.fabShowsRunning = running;
+		const width = this.open ? 0 : this.fabEl?.offsetWidth ?? 0;
+		this.fabFromWidth = width > 0 ? width : null;
+	}
+	/** 从记录的旧宽度过渡到新文案的自然宽度，结束后恢复自动宽度并重新测量入口尺寸 */
+	animateFabWidth() {
+		const from = this.fabFromWidth;
+		this.fabFromWidth = null;
+		const el = this.fabEl;
+		if (from === null || !el) return;
+		this.fabWidthCleanup?.();
+		this.fabWidthCleanup = null;
+		el.style.width = "";
+		const to = el.offsetWidth;
+		if (!to || to === from || parseFloat(getComputedStyle(el).transitionDuration) === 0) {
+			this.measureFab();
+			return;
+		}
+		el.style.width = `${from}px`;
+		el.offsetWidth;
+		el.style.width = `${to}px`;
+		const finish = () => {
+			el.removeEventListener("transitionend", onEnd);
+			el.removeEventListener("transitioncancel", onEnd);
+			this.fabWidthCleanup = null;
+		};
+		const onEnd = (event) => {
+			if (event.propertyName !== "width") return;
+			finish();
+			el.style.width = "";
+			this.measureFab();
+		};
+		el.addEventListener("transitionend", onEnd);
+		el.addEventListener("transitioncancel", onEnd);
+		this.fabWidthCleanup = finish;
+	}
 	firstUpdated() {
 		this.measureFab();
 	}
 	updated(_changed) {
 		this.autosizeTextarea();
+		this.animateFabWidth();
 		const state = pageUseStore.get();
 		const signature = [
 			state.currentTask,
@@ -2656,7 +3537,61 @@ var PageUseLauncherElement = class extends LitElement {
 		style.height = `min(${PANEL_HEIGHT}px, 72vh, ${Math.max(240, vh - offsetY - 8)}px)`;
 		return toStyle(style);
 	}
+	/** 调试入口是否显示：持久化状态优先，未操作过时跟随宿主 defaultHidden */
+	isVisible(settings) {
+		return settings.launcherVisible ?? !this._config.defaultHidden;
+	}
+	/** 展开面板（showPageUseLauncher 调用）：等入口按新的显示状态渲染后再测量定位 */
+	async expand() {
+		await this.updateComplete;
+		this.measureFab();
+		this.resolvePanelAnchor();
+		this.open = true;
+		this.requestUpdate();
+	}
+	/** 关闭调试入口：收起面板并持久化隐藏状态，之后需调用显示方法或 URL 参数调出 */
+	close() {
+		stopPreview();
+		this.open = false;
+		this.view = "main";
+		this.presetDraft = null;
+		hidePageUseLauncher();
+	}
+	/** 标题点击计数：滑动窗口内达到次数时打开元信息面板并重新计数 */
+	onTitleTap() {
+		const now = Date.now();
+		this.titleTaps = this.titleTaps.filter((time) => now - time < META_UNLOCK_WINDOW_MS);
+		this.titleTaps.push(now);
+		if (this.titleTaps.length < META_UNLOCK_CLICKS) return;
+		this.titleTaps = [];
+		this.view = "meta";
+		this.requestUpdate();
+	}
+	/** 切换面板视图：离开设置页时中止音色试听，离开快捷指令编辑时丢弃未保存的草稿 */
+	switchView(next) {
+		if (this.view === "settings" && next !== "settings") stopPreview();
+		if (this.view === "presets" && next !== "presets") this.presetDraft = null;
+		this.view = next;
+		this.requestUpdate();
+	}
+	/** 在面板内显示轻提示，TOAST_DURATION_MS 后自动消失；连续触发时以最后一次为准并重新计时 */
+	showToast(text) {
+		if (this.toastTimer) clearTimeout(this.toastTimer);
+		this.toastText = text;
+		this.toastTimer = setTimeout(() => {
+			this.toastText = "";
+			this.toastTimer = null;
+			this.requestUpdate();
+		}, TOAST_DURATION_MS);
+		this.requestUpdate();
+	}
+	clearHistory() {
+		const count = pageUseHistory.entries().length;
+		pageUseHistory.clear();
+		this.showToast(count ? `已清空 ${count} 条历史指令` : "暂无历史指令");
+	}
 	async collapse() {
+		stopPreview();
 		this.open = false;
 		this.requestUpdate();
 		await this.updateComplete;
@@ -2745,23 +3680,15 @@ var PageUseLauncherElement = class extends LitElement {
 			...this._config.sourceLabels
 		}[source] || source;
 	}
-	presets() {
-		const limit = this._config.menuPresetLimit ?? 6;
-		const menus = getPageUseConfig()?.getMenus();
-		return [
-			...limit > 0 ? buildMenuPresets(menus, limit) : [],
-			...PAGE_USE_STATIC_PRESETS,
-			...this._config.presets || []
-		];
-	}
-	endpointLabel() {
-		const baseURL = getPageUseConfig()?.llm.baseURL;
-		if (!baseURL) return "未配置";
-		try {
-			return new URL(baseURL).host;
-		} catch {
-			return baseURL;
-		}
+	/** 快捷指令分组：来源指令排除用户隐藏项，外加用户自定义指令；展示区与编辑视图共用 */
+	presetGroups() {
+		return resolvePresetGroups({
+			menus: getPageUseConfig()?.getMenus(),
+			menuPresetLimit: this._config.menuPresetLimit ?? 6,
+			presets: this._config.presets,
+			scenarios: this._config.scenarios,
+			state: pageUsePresets.get()
+		});
 	}
 	renderChips(presets, accent = false) {
 		return presets.map((preset) => html`<button
@@ -2773,18 +3700,31 @@ var PageUseLauncherElement = class extends LitElement {
         ${preset.label}
       </button>`);
 	}
+	/** 分组顺序：我的 → 常用 → 复杂场景；空分组不显示，全部为空时提示去设置中维护 */
 	renderPresetGroups() {
-		const scenarios = this._config.scenarios || [];
-		return html`
-      <div class="chips">
-        <span class="chips-caption">常用</span>
-        ${this.renderChips(this.presets())}
-      </div>
-      ${scenarios.length ? html`<div class="chips">
-            <span class="chips-caption">复杂场景</span>
-            ${this.renderChips(scenarios, true)}
-          </div>` : nothing}
-    `;
+		const { mine, common, scenarios } = this.presetGroups();
+		const visible = [
+			[
+				"我的",
+				mine,
+				false
+			],
+			[
+				"常用",
+				common,
+				false
+			],
+			[
+				"复杂场景",
+				scenarios,
+				true
+			]
+		].filter(([, presets]) => presets.length);
+		if (!visible.length) return html`<span class="hint">暂无快捷指令，可在设置中维护</span>`;
+		return visible.map(([caption, presets, accent]) => html`<div class="chips">
+        <span class="chips-caption">${caption}</span>
+        ${this.renderChips(presets, accent)}
+      </div>`);
 	}
 	renderCheckbox(key, label, hint, disabled = false) {
 		const settings = pageUseSettings.get();
@@ -2801,33 +3741,220 @@ var PageUseLauncherElement = class extends LitElement {
 	renderSettings() {
 		const settings = pageUseSettings.get();
 		const config = getPageUseConfig();
+		const status = pageUseStore.get().status;
 		return html`<div class="fill">
       <div class="settings-body">
+        <div class="settings-status">当前状态：${STATUS_LABELS[status] || status}</div>
         ${this.renderCheckbox("showHighlights", "显示元素编号高亮", "运行时页面上带数字的彩色框")}
         ${this.renderCheckbox("enableMask", "运行时蒙层防误触", "下次任务开始生效")}
         ${config?.beforeTask ? this.renderCheckbox("enableBeforeTask", config.beforeTaskLabel) : nothing}
         ${this.renderCheckbox("showStepDetails", "步骤显示模型思考与返回")}
         ${this.renderVoiceSettings(settings)}
-        <div class="row">
+        <div class="row settings-actions">
           <button type="button" class="btn" @click=${() => pageUseSettings.resetPositions()}>
             复位窗口
           </button>
-          <button type="button" class="btn" @click=${() => pageUseHistory.clear()}>清空历史</button>
+          <button type="button" class="btn clear-history" @click=${() => this.clearHistory()}>
+            清空历史
+          </button>
+          <button type="button" class="btn preset-entry" @click=${() => this.switchView("presets")}>
+            快捷指令设置
+          </button>
         </div>
-        <span class="meta">端点 ${this.endpointLabel()} · 模型 ${config?.llm.model ?? "-"}</span>
       </div>
     </div>`;
 	}
-	/** 演示播报：开关 + 兼容提示；开启后显示语速与中文语音选择 */
+	/** 打开表单：id 为 null 时新增，否则编辑该条；替换当前未保存的草稿 */
+	editPreset(id) {
+		const item = id === null ? null : pageUsePresets.get().custom.find((preset) => preset.id === id);
+		this.presetDraft = {
+			id,
+			label: item?.label ?? "",
+			task: item?.task ?? "",
+			error: ""
+		};
+		this.requestUpdate();
+	}
+	savePreset() {
+		const draft = this.presetDraft;
+		if (!draft) return;
+		const preset = {
+			label: draft.label,
+			task: draft.task
+		};
+		const result = draft.id === null ? pageUsePresets.add(preset) : pageUsePresets.update(draft.id, preset);
+		this.presetDraft = result.ok ? null : {
+			...draft,
+			error: PRESET_SAVE_ERRORS[result.reason]
+		};
+		this.requestUpdate();
+	}
+	renderPresetForm(draft) {
+		return html`<div class="preset-form">
+      <input
+        class="input preset-label-input"
+        placeholder="名称（按钮上显示的文字）"
+        .value=${draft.label}
+        @input=${(e) => {
+			draft.label = e.target.value;
+		}}
+      />
+      <textarea
+        class="textarea preset-task-input"
+        rows="3"
+        placeholder="指令内容（点击后下达的完整指令）"
+        .value=${draft.task}
+        @input=${(e) => {
+			draft.task = e.target.value;
+		}}
+      ></textarea>
+      ${draft.error ? html`<div class="alert error preset-error">${draft.error}</div>` : nothing}
+      <div class="row preset-form-actions">
+        <button
+          type="button"
+          class="btn tiny"
+          @click=${() => {
+			this.presetDraft = null;
+			this.requestUpdate();
+		}}
+        >
+          取消
+        </button>
+        <button type="button" class="btn tiny primary preset-save" @click=${() => this.savePreset()}>
+          保存
+        </button>
+      </div>
+    </div>`;
+	}
+	/** 列表项：名称一行，指令内容灰色单行省略（悬停查看全文），右侧为操作按钮 */
+	renderPresetItem(preset, actions) {
+		return html`<div class="preset-item">
+      <div class="preset-text">
+        <span class="preset-label">${preset.label}</span>
+        <span class="preset-task" title=${preset.task}>${preset.task}</span>
+      </div>
+      ${actions}
+    </div>`;
+	}
+	/**
+	* 快捷指令编辑：我的指令（新增 / 编辑 / 删除）、按来源分组的来源指令（删除即隐藏）、
+	* 已隐藏条数与恢复按钮。任务执行中同样可编辑，只影响后续展示。
+	*/
+	renderPresetEditor() {
+		const { mine, sources, hiddenCount } = this.presetGroups();
+		const draft = this.presetDraft;
+		const removeButton = (onClick) => html`<button
+      type="button"
+      class="btn ghost tiny circle preset-remove"
+      title="删除"
+      @click=${onClick}
+    >
+      ×
+    </button>`;
+		const sourceGroups = [
+			["菜单页面", sources.menu],
+			["通用示例", sources.builtin],
+			["站点常用", sources.host],
+			["复杂场景", sources.scenarios]
+		];
+		return html`<div class="fill preset-scroll">
+      <div class="settings-body preset-editor">
+        <div class="preset-group-head">
+          <span class="field-label">我的指令</span>
+          <button
+            type="button"
+            class="btn tiny preset-add"
+            ?disabled=${draft?.id === null}
+            @click=${() => this.editPreset(null)}
+          >
+            + 新增
+          </button>
+        </div>
+        <div class="preset-list preset-mine">
+          ${draft?.id === null ? this.renderPresetForm(draft) : nothing}
+          ${mine.map((item) => draft?.id === item.id ? this.renderPresetForm(draft) : this.renderPresetItem(item, html`<button
+                      type="button"
+                      class="btn ghost tiny preset-edit"
+                      @click=${() => this.editPreset(item.id)}
+                    >
+                      编辑
+                    </button>
+                    ${removeButton(() => {
+			pageUsePresets.remove(item.id);
+		})}`))}
+          ${!mine.length && !draft ? html`<span class="hint">暂无自定义指令</span>` : nothing}
+        </div>
+        ${sourceGroups.filter(([, list]) => list.length).map(([caption, list]) => html`<div class="field-label preset-group-head">${caption}</div>
+              <div class="preset-list preset-source">
+                ${list.map((preset) => this.renderPresetItem(preset, removeButton(() => pageUsePresets.hide(preset.task))))}
+              </div>`)}
+        <div class="row preset-restore">
+          <span class="hint preset-hidden-count">已隐藏 ${hiddenCount} 条</span>
+          <button
+            type="button"
+            class="btn tiny push-right preset-restore-btn"
+            ?disabled=${hiddenCount === 0}
+            @click=${() => pageUsePresets.restoreHidden()}
+          >
+            恢复默认指令
+          </button>
+        </div>
+      </div>
+    </div>`;
+	}
+	/**
+	* 演示播报：总开关关闭时只显示开关；开启后依次为引擎下拉（可选引擎多于一个时）、
+	* 语速、音色下拉与试听按钮（无音色列表时只有试听按钮）、不可用 / 无中文语音提示。
+	*/
 	renderVoiceSettings(settings) {
-		const supported = isSpeechSupported();
-		const voices = getChineseVoices();
-		const warning = !supported ? "当前浏览器不支持语音合成，开启后不会播报" : voices.length ? "" : "未检测到中文语音，将使用浏览器默认语音播报";
+		const toggle = this.renderCheckbox("voiceEnabled", "语音播报", "演示时播报执行步骤、提问与结论");
+		if (!settings.voiceEnabled) return toggle;
+		const engines = this.ttsEngines();
+		const engine = this.ttsEngine();
+		const isBrowser = engine.id === BROWSER_ENGINE_ID;
+		const available = engine.isAvailable();
+		const voices = available ? engine.listVoices?.() ?? [] : [];
+		const voiceName = settings.voiceNames[engine.id] ?? "";
+		const { playing } = previewStore.get();
+		const running = isRunning(pageUseStore.get());
+		const previewButton = html`<button
+      type="button"
+      class="btn preview-btn"
+      ?disabled=${!available || running}
+      title=${running ? "任务执行中不可试听" : "按当前设置试听"}
+      @click=${() => playing ? stopPreview() : startPreview(engine, {
+			rate: settings.voiceRate,
+			voice: voiceName
+		})}
+    >
+      ${playing ? "停止" : "试听"}
+    </button>`;
+		const warning = !available ? isBrowser ? "当前浏览器不支持语音合成，不会播报" : `当前环境不支持${engine.label}，不会播报` : isBrowser && !voices.length ? "未检测到中文语音，将使用浏览器默认语音播报" : "";
 		return html`
-      ${this.renderCheckbox("voiceEnabled", "语音播报", "演示时播报执行步骤、提问与结论")}
-      ${warning ? html`<div class="alert warning voice-warning">${warning}</div>` : nothing}
-      ${settings.voiceEnabled && supported ? html`<div class="voice-options">
-            <label class="field">
+      ${toggle}
+      <div class="voice-options">
+        ${engines.length > 1 ? html`<label class="field">
+              <span class="field-label">播报引擎</span>
+              <select
+                class="input voice-engine-select"
+                @change=${(e) => {
+			stopPreview();
+			pageUseSettings.update({ voiceEngineId: e.target.value });
+		}}
+              >
+                ${engines.map((item) => {
+			const usable = item.isAvailable();
+			return html`<option
+                    value=${item.id}
+                    ?selected=${item.id === engine.id}
+                    ?disabled=${!usable}
+                  >
+                    ${item.label}${usable ? "" : "（不可用）"}
+                  </option>`;
+		})}
+              </select>
+            </label>` : nothing}
+        ${available ? html`<label class="field">
               <span class="field-label">语速 ${settings.voiceRate.toFixed(2)}</span>
               <input
                 class="range"
@@ -2838,21 +3965,60 @@ var PageUseLauncherElement = class extends LitElement {
                 .value=${String(settings.voiceRate)}
                 @input=${(e) => pageUseSettings.update({ voiceRate: Number(e.target.value) })}
               />
-            </label>
-            <label class="field">
-              <span class="field-label">语音</span>
-              <select
-                class="input"
-                @change=${(e) => pageUseSettings.update({ voiceName: e.target.value })}
-              >
-                <option value="" ?selected=${!settings.voiceName}>自动（第一个中文语音）</option>
-                ${voices.map((voice) => html`<option value=${voice.name} ?selected=${voice.name === settings.voiceName}>
-                      ${voice.name}
-                    </option>`)}
-              </select>
-            </label>
-          </div>` : nothing}
+            </label>` : nothing}
+        ${voices.length ? html`<div class="field">
+              <span class="field-label">音色</span>
+              <div class="voice-name-row">
+                <select
+                  class="input voice-name-select"
+                  title=${voices.find((voice) => voice.value === voiceName)?.label ?? ""}
+                  @change=${(e) => {
+			stopPreview();
+			pageUseSettings.update({ voiceNames: {
+				...pageUseSettings.get().voiceNames,
+				[engine.id]: e.target.value
+			} });
+		}}
+                >
+                  <option value="" ?selected=${!voiceName}>
+                    ${isBrowser ? "自动（第一个中文语音）" : "自动"}
+                  </option>
+                  ${voices.map((voice) => html`<option value=${voice.value} ?selected=${voice.value === voiceName}>
+                        ${voice.label}
+                      </option>`)}
+                </select>
+                ${previewButton}
+              </div>
+            </div>` : html`<div class="voice-name-row">${previewButton}</div>`}
+        ${warning ? html`<div class="alert warning voice-warning">${warning}</div>` : nothing}
+      </div>
     `;
+	}
+	/** 元信息：与业务无关的配置与运行环境信息，仅供开发排查；API Key 只显示是否已配置 */
+	renderMeta() {
+		const config = getPageUseConfig();
+		const settings = pageUseSettings.get();
+		const engine = this.ttsEngine();
+		const voiceName = settings.voiceNames[engine.id] || "自动";
+		const rows = [
+			["版本", `v${version}`],
+			["端点", config?.llm.baseURL || "未配置"],
+			["模型", config?.llm.model || "未配置"],
+			["API Key", config?.llm.apiKey ? "已配置" : "未配置"],
+			["存储键前缀", config?.storageKeyPrefix || "未配置"],
+			["当前引擎", `${engine.label}（${engine.id}） · 音色 ${voiceName}`]
+		];
+		return html`<div class="fill">
+      <div class="settings-body">
+        <dl class="meta-list">
+          ${rows.map(([label, value]) => html`<dt>${label}</dt><dd>${value}</dd>`)}
+        </dl>
+        <div class="field-label">可选引擎</div>
+        <ul class="meta-engines">
+          ${this.ttsEngines().map((item) => html`<li>${item.id} · ${item.label} · ${item.isAvailable() ? "可用" : "不可用"}</li>`)}
+        </ul>
+      </div>
+    </div>`;
 	}
 	renderLog(state, isLogEmpty) {
 		const running = isRunning(state);
@@ -3012,9 +4178,11 @@ var PageUseLauncherElement = class extends LitElement {
 	render() {
 		const state = pageUseStore.get();
 		const settings = pageUseSettings.get();
+		if (!this.isVisible(settings)) return nothing;
 		const running = isRunning(state);
 		const title = this._config.title || "Page Use";
 		const elapsed = getElapsedSeconds(state);
+		const { muted } = narrationMute.get();
 		const isLogEmpty = !running && !state.currentTask && !state.steps.length && !state.errorMessage;
 		return html`
       <button
@@ -3022,36 +4190,56 @@ var PageUseLauncherElement = class extends LitElement {
         class="fab ${running ? "running" : ""}"
         ?hidden=${this.open}
         style=${this.fabStyle(settings)}
-        title=${running ? `执行中：${state.activityText || state.currentTask}` : `打开 ${title} 页面操作`}
+        title=${running ? `执行中：${state.activityText || state.currentTask}` : `打开 ${title}`}
         @pointerdown=${this.fabDrag.onPointerDown}
       >
-        <span class="fab-dot"></span>
+        <span class="fab-icon">${robotIcon}</span>
         <span>${running ? "执行中" : title}</span>
       </button>
 
-      <section class="panel" ?hidden=${!this.open} style=${this.open ? this.panelStyle(settings) : ""}>
+      <section
+        class="panel ${running ? "running" : ""}"
+        ?hidden=${!this.open}
+        style=${this.open ? this.panelStyle(settings) : ""}
+      >
         <header class="head" @pointerdown=${this.panelDrag.onPointerDown}>
-          <span class="dot ${state.status}"></span>
+          <span class="dot ${state.status}" title=${STATUS_LABELS[state.status] || state.status}></span>
           <span class="title">${title}</span>
           <span class="status">
-            ${STATUS_LABELS[state.status] || state.status}${state.steps.length ? ` · ${state.steps.length} 步` : ""}${state.totalTokens ? ` · ${state.totalTokens} tok` : ""}${elapsed ? ` · ${elapsed}s` : ""}
+            ${state.status === "idle" ? "" : `${STATUS_LABELS[state.status] || state.status}${state.steps.length ? ` · ${state.steps.length} 步` : ""}${state.totalTokens ? ` · ${formatTokens(state.totalTokens)} tok` : ""}${elapsed ? ` · ${elapsed}s` : ""}`}
           </span>
-          <button
-            type="button"
-            class="btn ghost circle ${this.showSettings ? "active" : ""}"
-            title=${this.showSettings ? "返回" : "设置"}
-            @click=${() => {
-			this.showSettings = !this.showSettings;
-			this.requestUpdate();
-		}}
-          >
-            ⚙
-          </button>
-          <button type="button" class="btn ghost circle" title="收起" @click=${() => void this.collapse()}>
-            −
-          </button>
+          <div class="head-actions">
+            ${running && settings.voiceEnabled ? html`<button
+                  type="button"
+                  class="icon-btn mute ${muted ? "active" : ""}"
+                  title=${muted ? "恢复播报" : "本次任务静音"}
+                  @click=${() => narrationMute.set({ muted: !muted })}
+                >
+                  ${muted ? mutedIcon : volumeIcon}
+                </button>` : nothing}
+            <button
+              type="button"
+              class="icon-btn settings-toggle ${this.view === "settings" ? "active" : ""}"
+              title=${this.view === "main" ? "设置" : "返回"}
+              @click=${() => this.switchView(this.view === "main" ? "settings" : PARENT_VIEW[this.view])}
+            >
+              ${this.view === "main" ? settingsIcon : backIcon}
+            </button>
+            <button type="button" class="icon-btn" title="收起" @click=${() => void this.collapse()}>
+              ${collapseIcon}
+            </button>
+            <button
+              type="button"
+              class="icon-btn close"
+              title="关闭"
+              @click=${() => this.close()}
+            >
+              ${closeIcon}
+            </button>
+          </div>
         </header>
-        ${this.showSettings ? this.renderSettings() : html`${this.renderLog(state, isLogEmpty)}${this.renderComposer(state, isLogEmpty)}`}
+        ${this.view === "settings" ? this.renderSettings() : this.view === "presets" ? this.renderPresetEditor() : this.view === "meta" ? this.renderMeta() : html`${this.renderLog(state, isLogEmpty)}${this.renderComposer(state, isLogEmpty)}`}
+        ${this.toastText ? html`<div class="toast" role="status">${this.toastText}</div>` : nothing}
       </section>
     `;
 	}
@@ -3094,4 +4282,4 @@ function mountPageUseUI(options = {}) {
 }
 
 //#endregion
-export { DEFAULT_STORAGE_KEY_PREFIX as A, pageUseStore as C, DEFAULT_MAX_STEPS as D, pageUseSettings as E, readLauncherSwitch as M, PAGE_USE_MASK_COLORS as N, DEFAULT_MODEL as O, SIMULATOR_MASK_ID as P, isRunning as S, DEFAULT_PAGE_USE_SETTINGS as T, pageUseCapability as _, PAGE_USE_STATIC_PRESETS as a, getPageUseConfig as b, PageUseGlowElement as c, PAGE_USE_COMMAND_TYPE as d, PAGE_USE_TOOL as f, runPageUseTool as g, isPageUseCommand as h, PageUseLauncherElement as i, normalizeOptions as j, DEFAULT_SESSION_HEADER as k, createPageUse as l, formatPageUseResultForModel as m, mountPageUseUI as n, buildMenuPresets as o, PAGE_USE_TOOL_NAME as p, PAGE_USE_LAUNCHER_TAG as r, PAGE_USE_GLOW_TAG as s, definePageUseElements as t, PAGE_USE_GLOBAL_KEY as u, clearPageUseLog as v, pageUseHistory as w, isPageUseConfigured as x, getElapsedSeconds as y };
+export { pageUseSettings as A, browserTtsEngine as B, getPageUseConfig as C, pageUsePresets as D, pageUseStore as E, normalizeOptions as F, readLauncherSwitch as I, PAGE_USE_MASK_COLORS as L, DEFAULT_MODEL as M, DEFAULT_SESSION_HEADER as N, pageUseHistory as O, DEFAULT_STORAGE_KEY_PREFIX as P, SIMULATOR_MASK_ID as R, getElapsedSeconds as S, isRunning as T, runPageUseTool as _, PAGE_USE_STATIC_PRESETS as a, pageUseCapability as b, PAGE_USE_GLOW_TAG as c, PAGE_USE_GLOBAL_KEY as d, PAGE_USE_COMMAND_TYPE as f, isPageUseCommand as g, formatPageUseResultForModel as h, PageUseLauncherElement as i, DEFAULT_MAX_STEPS as j, DEFAULT_PAGE_USE_SETTINGS as k, PageUseGlowElement as l, PAGE_USE_TOOL_NAME as m, mountPageUseUI as n, buildMenuPresets as o, PAGE_USE_TOOL as p, PAGE_USE_LAUNCHER_TAG as r, PAGE_USE_ROBOT_ICON_SVG as s, definePageUseElements as t, createPageUse as u, hidePageUseLauncher as v, isPageUseConfigured as w, clearPageUseLog as x, showPageUseLauncher as y, BROWSER_ENGINE_ID as z };