@tanzerfe/page-use 0.0.2 → 0.0.5

package/dist/{src-C8EWDZVz.mjs → src-tOb9oqjb.mjs}

@@ -1,7 +1,804 @@
 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 的默认视觉）。
+*
+* page-agent 的 CSS Module 类名带哈希（如 `_cursor_1dgwb_2`），随版本变化，
+* 因此这里只依赖稳定的结构：
+* - 蒙层根节点 id：`page-agent-runtime_simulator-mask`
+* - 子节点顺序：ai-motion 光晕层在前（初始化失败时不存在），光标节点恒为最后一个子节点
+* - 光标子节点顺序：1 点击波纹 / 2 箭头填充 / 3 箭头描边
+* - 点击态类名包含 `clicking` 子串
+* 升级 page-agent 后若光标样式失效，先核对 SimulatorMask 的 #createCursor 结构。
+*/
+/** 蒙层根节点 id（@page-agent/page-controller 内部常量） */
+const SIMULATOR_MASK_ID = "page-agent-runtime_simulator-mask";
+/** 主题色：主色 #0879ff 同系的蓝 → 青 → 靛渐变 */
+const PAGE_USE_MASK_COLORS = {
+	primary: "#0879ff",
+	cyan: "#36cfc9",
+	indigo: "#597ef7",
+	/** 误触拦截时的警示色 */
+	warning: "#fa8c16"
+};
+const CURSOR_ARROW_MASK = `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M 15 42 L 15 36.99 Q 15 31.99 23.7 31.99 L 28.05 31.99 Q 32.41 31.99 32.41 21.99 L 32.41 17 Q 32.41 12 41.09 16.95 L 76.31 37.05 Q 85 42 76.31 46.95 L 41.09 67.05 Q 32.41 72 32.41 62.01 L 32.41 57.01 Q 32.41 52.01 23.7 52.01 L 19.35 52.01 Q 15 52.01 15 47.01 Z' fill='#000'/></svg>`)}")`;
+const MASK = `#${SIMULATOR_MASK_ID}`;
+/** 光标节点：蒙层的最后一个子节点 */
+const CURSOR = `${MASK} > :last-child`;
+const { primary, cyan, indigo } = PAGE_USE_MASK_COLORS;
+const PAGE_USE_MASK_THEME_CSS = `
+/* 隐藏 ai-motion 默认光晕（光标之外的子节点），光晕改由 <tz-page-use-glow> 渲染 */
+${MASK} > :not(:last-child) { display: none !important; }
+/* 蒙层本身保持透明，仅负责拦截点击；真实鼠标由 wait 转圈改为禁止符号，明确「此时不可操作」而非「页面卡死」 */
+${MASK} { cursor: not-allowed !important; }
+
+/* 光标整体外发光 */
+${CURSOR} {
+  filter: drop-shadow(0 0 6px ${primary}8c) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
+}
+/* 光标尖端（节点原点）的呼吸光圈 */
+${CURSOR}::before {
+  content: '';
+  position: absolute;
+  left: -16px;
+  top: -16px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: radial-gradient(circle, ${cyan}66 0%, ${primary}26 55%, transparent 72%);
+  animation: page-use-cursor-halo 1.6s ease-in-out infinite;
+  pointer-events: none;
+}
+/* 箭头描边：主题渐变 */
+${CURSOR} > :nth-child(3) {
+  background: linear-gradient(45deg, ${primary}, ${cyan}) !important;
+}
+/* 箭头填充：用同形遮罩替换原白色 SVG 背景，改为浅色渐变 */
+${CURSOR} > :nth-child(2) {
+  background: linear-gradient(135deg, #ffffff 30%, #e6f4ff) !important;
+  -webkit-mask: ${CURSOR_ARROW_MASK} center / 100% 100% no-repeat;
+  mask: ${CURSOR_ARROW_MASK} center / 100% 100% no-repeat;
+}
+/* 点击波纹：外环改主题色 */
+${CURSOR} > :nth-child(1)::after {
+  border-color: ${cyan} !important;
+  border-width: 3px !important;
+}
+/* 点击波纹：追加一层实心扩散，增强点击反馈 */
+${CURSOR} > :nth-child(1)::before {
+  content: '';
+  position: absolute;
+  inset: 25%;
+  border-radius: 50%;
+  background: radial-gradient(circle, ${indigo}80, transparent 70%);
+  opacity: 0;
+}
+${CURSOR}[class*='clicking'] > :nth-child(1)::before {
+  animation: page-use-cursor-press 420ms ease-out forwards;
+}
+
+@keyframes page-use-cursor-halo {
+  0%, 100% { transform: scale(0.85); opacity: 0.7; }
+  50% { transform: scale(1.25); opacity: 1; }
+}
+@keyframes page-use-cursor-press {
+  0% { transform: scale(0.4); opacity: 1; }
+  100% { transform: scale(2.4); opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  ${CURSOR}::before { animation: none; }
+}
+`;
+
+//#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 的模型 */
+const DEFAULT_MODEL = "deepseek-chat";
+/** 单次任务最大步数；每步一次 LLM 调用，防止死循环消耗 token */
+const DEFAULT_MAX_STEPS = 20;
+/** 默认会话头：OpenCode Go 要求每个会话带稳定的 x-opencode-session 用于路由与提示缓存 */
+const DEFAULT_SESSION_HEADER = "x-opencode-session";
+/** localStorage / sessionStorage 键前缀，可通过 storageKeyPrefix 覆盖 */
+const DEFAULT_STORAGE_KEY_PREFIX = "tz-page-use";
+/** 相对路径补齐为当前 origin 的绝对地址并去掉末尾 /；无法解析时返回空串 */
+function toAbsoluteUrl(input) {
+	const base = typeof window !== "undefined" ? window.location.origin : void 0;
+	try {
+		return new URL(input, base).toString().replace(/\/+$/, "");
+	} catch {
+		return "";
+	}
+}
+/** 按路由模式从 location 读取当前路径 */
+function readLocationPath(mode) {
+	if (typeof window === "undefined") return "/";
+	if (mode === "hash") return window.location.hash.replace(/^#/, "") || "/";
+	return `${window.location.pathname}${window.location.search}`;
+}
+function resolveSessionHeader(value) {
+	if (value === false) return "";
+	return (value ?? "").trim() || "x-opencode-session";
+}
+function normalizeOptions(options) {
+	const { llm } = options;
+	const rawBase = (llm.baseURL || "").trim();
+	const routerMode = options.routerMode ?? "hash";
+	return {
+		llm: {
+			baseURL: rawBase ? toAbsoluteUrl(rawBase) : "",
+			apiKey: (llm.apiKey || "").trim(),
+			model: (llm.model || "").trim() || "deepseek-chat",
+			maxSteps: llm.maxSteps && llm.maxSteps > 0 ? llm.maxSteps : 20,
+			disableNamedToolChoice: Boolean(llm.disableNamedToolChoice),
+			extraBody: llm.extraBody && typeof llm.extraBody === "object" ? llm.extraBody : {},
+			sessionHeader: resolveSessionHeader(llm.sessionHeader)
+		},
+		appName: options.appName,
+		getMenus: options.getMenus ?? (() => void 0),
+		routerMode,
+		getCurrentPath: options.getCurrentPath ?? (() => readLocationPath(routerMode)),
+		resolveRouteName: options.resolveRouteName,
+		routeHints: options.routeHints ?? {},
+		layoutHint: options.layoutHint,
+		beforeTask: options.beforeTask,
+		beforeTaskLabel: options.beforeTaskLabel || "任务开始前执行宿主预处理",
+		storageKeyPrefix: options.storageKeyPrefix || "tz-page-use",
+		pageAgentOptions: options.pageAgentOptions ?? {},
+		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;
+	const hashQuery = window.location.hash.split("?")[1];
+	return hashQuery ? new URLSearchParams(hashQuery).get(LAUNCHER_QUERY_KEY) : null;
+}
+/**
+* 调试面板是否显示。优先级：URL 参数（并记入本会话）> 会话记录 > fallback。
+* fallback 由宿主决定（例如「开发环境显示，生产环境隐藏」）。
+*/
+function readLauncherSwitch(fallback, storageKeyPrefix = DEFAULT_STORAGE_KEY_PREFIX) {
+	if (typeof window === "undefined") return fallback;
+	const sessionKey = `${storageKeyPrefix}-debug`;
+	try {
+		const query = readLauncherQuery();
+		if (query !== null) {
+			const enabled = query === "1" || query === "true";
+			window.sessionStorage.setItem(sessionKey, enabled ? "1" : "0");
+			return enabled;
+		}
+		const session = window.sessionStorage.getItem(sessionKey);
+		if (session !== null) return session === "1";
+	} catch {}
+	return fallback;
+}
+
+//#endregion
+//#region src/core/store.ts
+function createStore(initial) {
+	let state = initial;
+	const listeners = /* @__PURE__ */ new Set();
+	const notify = () => {
+		for (const listener of listeners) try {
+			listener(state);
+		} catch (err) {
+			console.warn("[PageUse] store 订阅回调异常", err);
+		}
+	};
+	return {
+		get: () => state,
+		set(patch) {
+			const partial = typeof patch === "function" ? patch(state) : patch;
+			if (Object.keys(partial).every((key) => Object.is(state[key], partial[key]))) return;
+			state = {
+				...state,
+				...partial
+			};
+			notify();
+		},
+		replace(next) {
+			if (Object.is(next, state)) return;
+			state = next;
+			notify();
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+}
+
+//#endregion
+//#region src/core/settings.ts
+/**
+* Page Use 本地设置（localStorage 持久化，单例）。
+* 含 page-agent 内置面板/元素编号高亮开关、蒙层与光晕、演示播报、调试入口拖拽位置与显示状态。
+* 存储键为 `${storageKeyPrefix}-settings`。
+*/
+/** page-agent 元素高亮容器 id（page-controller 内部常量，随版本可能变化） */
+const HIGHLIGHT_CONTAINER_ID = "playwright-highlight-container";
+const HIGHLIGHT_STYLE_ID = "page-use-hide-highlights";
+/** page-agent 内置面板根节点 id（@page-agent/ui 内部常量） */
+const BUILTIN_PANEL_ID = "page-agent-runtime_agent-panel";
+const BUILTIN_PANEL_STYLE_ID = "page-use-hide-builtin-panel";
+const MASK_THEME_STYLE_ID = "page-use-mask-theme";
+const DEFAULT_PAGE_USE_SETTINGS = {
+	showBuiltinPanel: false,
+	showHighlights: false,
+	showStepDetails: true,
+	enableBeforeTask: true,
+	enableMask: true,
+	customMaskEffect: true,
+	voiceEnabled: false,
+	voiceRate: 1.1,
+	voiceEngineId: "",
+	voiceNames: {},
+	launcherVisible: null,
+	fabPos: null
+};
+/**
+* 调试面板不再提供开关的设置项及其固定值。
+* 复选框已移除，本地存储中曾经改过的值无法在界面上改回，因此读取与更新时一律覆盖为固定值；
+* PageUseSettings 保留这两个字段，避免破坏调用方的类型。
+*/
+const LOCKED_SETTINGS = {
+	showBuiltinPanel: false,
+	customMaskEffect: true
+};
+function storageKey$2(prefix) {
+	return `${prefix}-settings`;
+}
+/** 旧字段 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$2(prefix));
+		if (!raw) return { ...DEFAULT_PAGE_USE_SETTINGS };
+		return {
+			...DEFAULT_PAGE_USE_SETTINGS,
+			...migrate(JSON.parse(raw)),
+			...LOCKED_SETTINGS
+		};
+	} catch {
+		return { ...DEFAULT_PAGE_USE_SETTINGS };
+	}
+}
+function save(prefix, settings) {
+	try {
+		window.localStorage.setItem(storageKey$2(prefix), JSON.stringify(settings));
+	} catch {}
+}
+/** 按开关注入/移除一段覆盖样式（用于压制 page-agent 自带的 DOM，这些节点位于宿主 document 中） */
+function toggleOverrideStyle(styleId, css, show) {
+	const existing = document.getElementById(styleId);
+	if (show) {
+		existing?.remove();
+		return;
+	}
+	if (existing) return;
+	const style = document.createElement("style");
+	style.id = styleId;
+	style.textContent = css;
+	document.head.appendChild(style);
+}
+/**
+* 把设置同步到页面：
+* - 高亮：page-controller 的 doHighlightElements 内部写死为 true，只能用样式覆盖其高亮容器
+* - 内置面板：Panel 在 statuschange 到 running 时会自行 show()，因此用 !important 样式压制
+* - 蒙层主题：注入覆盖样式；关闭时移除，恢复 page-agent 默认光晕与光标
+*/
+function applyToDocument(settings, prev) {
+	if (typeof document === "undefined") return;
+	if (!prev || prev.showHighlights !== settings.showHighlights) toggleOverrideStyle(HIGHLIGHT_STYLE_ID, `#${HIGHLIGHT_CONTAINER_ID}{display:none !important;}`, settings.showHighlights);
+	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$2 = DEFAULT_STORAGE_KEY_PREFIX;
+let store$4 = null;
+/** 懒创建：首次访问时读取存储并把设置应用到页面 */
+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);
+		prev = next;
+	};
+	sync(created.get());
+	created.subscribe((next) => {
+		save(prefix$2, next);
+		sync(next);
+	});
+	store$4 = created;
+	return created;
+}
+/** 切换存储键前缀（createPageUse 时调用）；前缀变化时重新读取 */
+function setSettingsStoragePrefix(next) {
+	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$2().get(),
+		subscribe: (listener) => ensureStore$2().subscribe(listener)
+	},
+	get() {
+		return ensureStore$2().get();
+	},
+	/** 固定项（LOCKED_SETTINGS）的修改被忽略 */
+	update(patch) {
+		ensureStore$2().set({
+			...patch,
+			...LOCKED_SETTINGS
+		});
+	},
+	/** 把浮动入口（及随之定位的面板）恢复到默认角落位置 */
+	resetPositions() {
+		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
+/**
+* 演示播报的播放队列，发声委托给当前语音合成引擎（由 getEngine 提供，可在播报间切换）。
+*
+* 队列只有两部分：当前正在播报的一组文本，以及一条待播的步骤文本。
+* - 步骤播报不打断当前播报，只覆盖待播槽（语音跟不上执行时丢弃中间步骤）；
+* - 提问 / 结论先清空再播报；
+* - 每组开始时读取一次引擎并在组内固定使用（splitSentences 与中止对象保持一致）；
+* - 每组持有一个 AbortController，清空时中止，引擎据此停止自身的合成与播放；
+* - 每次清空递增代次，旧代次 speak() 的迟到 resolve 一律忽略，避免中止后误触发下一条。
+*
+* 当前引擎不可用时 enqueue / interrupt 静默返回。
+*/
+/**
+* @param getSettings 每次调用引擎前读取；参数为当前组使用的引擎，调用方据此取该引擎的音色
+* @param getEngine 每组开始时读取当前生效引擎
+*/
+function createSpeaker(getSettings, getEngine = () => browserTtsEngine) {
+	let generation = 0;
+	/** 当前组剩余的待调用文本；null 表示空闲 */
+	let current = null;
+	let pending = null;
+	/** 当前组的中止控制；空闲时为 null，clear 据此判断是否需要中止引擎 */
+	let controller = null;
+	/** 当前组使用的引擎；组内不随设置切换 */
+	let engine = getEngine();
+	function playGroup(sentences) {
+		engine = getEngine();
+		if (!engine.isAvailable()) return;
+		current = engine.splitSentences ? [...sentences] : [sentences.join("")];
+		controller = new AbortController();
+		playNext();
+	}
+	function playNext() {
+		const text = current?.shift();
+		if (text === void 0 || !controller) {
+			current = null;
+			controller = null;
+			if (pending) {
+				const next = pending;
+				pending = null;
+				playGroup(next);
+			}
+			return;
+		}
+		const owner = generation;
+		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() {
+		generation += 1;
+		controller?.abort();
+		controller = null;
+		current = null;
+		pending = null;
+	}
+	return {
+		enqueue(sentences) {
+			if (!sentences.length) return;
+			if (current !== null) {
+				pending = sentences;
+				return;
+			}
+			playGroup(sentences);
+		},
+		interrupt(sentences) {
+			clear();
+			if (sentences.length) playGroup(sentences);
+		},
+		clear
+	};
+}
+
+//#endregion
+//#region src/voice/speechText.ts
+/**
+* 播报文本清洗（纯函数，无 DOM 依赖）：把模型输出的步骤描述 / 结论转成适合语音合成的句子数组。
+* 结果只用于播报，不回写任务结果与面板展示内容。
+*/
+/** 单条播报清洗后的字数上限：中文语音约 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 秒）
+*/
+const MAX_UTTERANCE_CHARS = 50;
+/** 句末标点：截断与切句的边界（分号视为句间边界，列表项以分号连接） */
+const SENTENCE_END = "。！？!?；;";
+/** 句内停顿：长句二次切分的边界 */
+const CLAUSE_END = "，、：,:";
+/** 行尾已有这些标点时，拼接下一行不再补分隔符 */
+const TRAILING_PUNCT = /[。！？!?；;，,、：:]$/;
+/**
+* 元素编号：page-agent 以 [index] 标注可交互元素，模型常把编号写进步骤描述，
+* 如「点击索引为 23 的菜单」「点击 [23]」「点击元素 23」。
+* 不匹配「编号 / 序号」：结论中的「编号 20260809」等可能是业务数据。
+*/
+const ELEMENT_INDEX_PATTERNS = [
+	/索引\s*(?:为|是)?\s*\[?\d+\]?\s*(?:号)?\s*(?:的)?/g,
+	/元素\s*\[\d+\]\s*(?:的)?/g,
+	/元素\s*\d+\s*(?:号)?\s*(?:的)?/g,
+	/\[\d+\]/g
+];
+/** 表格分隔行：| --- | :---: | */
+const TABLE_SEPARATOR = /^\s*\|?\s*:?-{2,}:?\s*(?:\|\s*:?-{2,}:?\s*)*\|?\s*$/;
+/** 表格数据行：首尾为竖线 */
+const TABLE_ROW = /^\s*\|.*\|\s*$/;
+/** 列表项行首：- * + 或 1. 1) 1、（序号后紧跟数字时视为小数，如「2.5 吨」，不当作列表） */
+const LIST_MARKER = /^\s*(?:[-*+]\s+|\d+[.)](?!\d)\s*|\d+、\s*)/;
+/** 行内 Markdown、网址、emoji、元素编号等清理 */
+function cleanInline(text) {
+	let s = text;
+	for (const pattern of ELEMENT_INDEX_PATTERNS) s = s.replace(pattern, "");
+	s = s.replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/\[([^\]]+)\]\([^)]*\)/g, "$1").replace(/https?:\/\/[^\s)）]+/g, "").replace(/(\*\*|__)(.+?)\1/g, "$2").replace(/\*([^*\n]+)\*/g, "$1").replace(/~~(.+?)~~/g, "$1").replace(/`([^`]*)`/g, "$1").replace(/[*`~]/g, "").replace(/[\p{Extended_Pictographic}\u{FE0F}\u{200D}\u{2713}\u{2717}\u{2718}]/gu, "").replace(/[「」『』【】]/g, "");
+	return s.replace(/\s+/g, " ").trim();
+}
+/** 按行处理块级结构：代码块与 HTML 已在调用前移除 */
+function toLines(text) {
+	const lines = [];
+	for (const raw of text.split(/\r?\n/)) {
+		if (TABLE_SEPARATOR.test(raw)) continue;
+		if (TABLE_ROW.test(raw)) {
+			const cells = raw.split("|").map((cell) => cleanInline(cell)).filter(Boolean);
+			if (cells.length) lines.push({
+				text: cells.join("，"),
+				item: true
+			});
+			continue;
+		}
+		const item = LIST_MARKER.test(raw);
+		const cleaned = cleanInline(raw.replace(/^\s*#{1,6}\s+/, "").replace(/^\s*(?:>\s?)+/, "").replace(LIST_MARKER, ""));
+		if (cleaned) lines.push({
+			text: cleaned,
+			item
+		});
+	}
+	return lines;
+}
+/** 拼接各行：列表项之间用分号，其余行之间补句号；行尾已有标点时不补 */
+function joinLines(lines) {
+	let result = "";
+	lines.forEach((line, index) => {
+		if (index > 0 && !TRAILING_PUNCT.test(result)) result += lines[index - 1].item && line.item ? "；" : "。";
+		result += line.text;
+	});
+	return result.replace(/([。！？!?；;，,、：:])[。！？!?；;，,、：:\s]+/g, "$1").replace(/^[。！？!?；;，,、：:\s]+/, "").trim();
+}
+/** 超过上限时在上限内最后一个句末标点处截断，找不到则硬截断，并追加提示语 */
+function truncate(text, maxChars, hint) {
+	if (text.length <= maxChars) return text;
+	const head = text.slice(0, maxChars);
+	let cut = -1;
+	for (let i = head.length - 1; i >= 0; i -= 1) if (SENTENCE_END.includes(head[i])) {
+		cut = i;
+		break;
+	}
+	let kept = cut > 0 ? head.slice(0, cut + 1) : head;
+	kept = kept.replace(/[；;，,、：:]$/, "");
+	if (!/[。！？!?]$/.test(kept)) kept += "。";
+	return `${kept}${hint}`;
+}
+/** 按句末标点切句；过长的句子再按逗号等停顿切分 */
+function splitSentences(text) {
+	const sentences = text.match(new RegExp(`[^${SENTENCE_END}]+[${SENTENCE_END}]*`, "g")) || [];
+	const result = [];
+	for (const sentence of sentences) {
+		if (sentence.length <= MAX_UTTERANCE_CHARS) {
+			result.push(sentence);
+			continue;
+		}
+		const clauses = sentence.match(new RegExp(`[^${CLAUSE_END}]+[${CLAUSE_END}]*`, "g")) || [sentence];
+		let buffer = "";
+		for (const clause of clauses) {
+			if (buffer && buffer.length + clause.length > MAX_UTTERANCE_CHARS) {
+				result.push(buffer);
+				buffer = "";
+			}
+			buffer += clause;
+		}
+		if (buffer) result.push(buffer);
+	}
+	return result.map((s) => s.trim()).filter((s) => /[\p{L}\p{N}]/u.test(s));
+}
+/**
+* 模型文本 → 播报句子数组。清洗后为空时返回空数组（调用方据此跳过播报）。
+* 处理顺序：代码块 / HTML → 表格 → 行内 Markdown 与符号 → 拼行 → 截断 → 切句。
+*/
+function toSpeechText(text, options = {}) {
+	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, options.truncatedHint ?? "详细内容请查看面板"));
+}
+
+//#endregion
+//#region src/voice/narration.ts
+/**
+* 演示播报：订阅进度事件，按设置把步骤描述、提问与结论交给 speaker 播报。
+* 只订阅事件，不影响任务执行节奏；对所有任务来源生效。
+* 是否播报 = 设置 voiceEnabled（总开关，持久化）且未处于本次任务静音（narrationMute，运行期）。
+*/
+/**
+* 不播报的步骤：滚动、等待没有演示价值；done 由结论播报替代；
+* ask_user 的问题由 question 事件播报；error / retry 为执行出错与重试的伪工具名。
+*/
+const SILENT_STEP_TOOLS = /* @__PURE__ */ new Set([
+	"scroll",
+	"scroll_horizontally",
+	"wait",
+	"done",
+	"ask_user",
+	"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, engines, speaker: injected }) {
+	const available = engines ?? listTtsEngines(void 0);
+	const speaker = injected || createSpeaker((engine) => {
+		const { voiceRate, voiceNames } = pageUseSettings.get();
+		return {
+			rate: voiceRate,
+			voiceName: voiceNames[engine.id] ?? ""
+		};
+	}, () => 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(speech(event.step.goal));
+				break;
+			case "question":
+				if (enabled()) speaker.interrupt(speech(event.question));
+				break;
+			case "finished": if (event.result.status === "stopped" || !enabled()) speaker.clear();
+			else speaker.interrupt(speech(event.result.summary));
+		}
+	});
+	let prev = pageUseSettings.get();
+	const offSettings = pageUseSettings.store.subscribe((settings) => {
+		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();
+	};
+}
+
+//#endregion
 //#region src/core/siteMap.ts
 /** 去掉 `#`、前导 `/` 与查询串，得到用于比较的路径 */
 function normalizePath(path) {
@@ -52,8 +849,17 @@ function findMenuByPath(path, menus) {
 //#region src/core/pageInstructions.ts
 /** 未提供 layoutHint 时的通用页面结构描述 */
 const DEFAULT_LAYOUT_HINT = ["- 页面通常由导航菜单与内容区组成；内容区顶部若有面包屑或标题，可用来确认当前位置。", "- 分组菜单点击后展开/收起下级；叶子菜单点击后进入页面。"].join("\n");
-/** 全局系统提示：站点结构 + 交互约定 + 安全边界 */
-function buildSystemInstruction(options) {
+/**
+* 演示播报开启时追加的约束：page-agent 默认要求 next_goal 写「目标 + 动作」，模型常带元素编号，
+* 念出来生硬；这里只约束步骤描述，不改变 done 的 text（结论会回传给调用方）。
+*/
+const NARRATION_RULES = [
+	"## 语音播报",
+	"- 每一步的 next_goal 会被语音播报给观众：写成一句简短的中文，描述这一步要做什么，如「打开隐患台账页面」；不要包含元素编号、索引或方括号数字。",
+	"- 该要求只针对 next_goal；done 的 text 仍按原要求书写。"
+].join("\n");
+/** 全局系统提示：站点结构 + 交互约定 + 安全边界（+ 播报约束） */
+function buildSystemInstruction(options, flags = {}) {
 	const urlLabel = options.routerMode === "hash" ? "URL hash" : "URL 路径";
 	const siteMap = buildSiteMapText(options.getMenus(), options.routerMode);
 	return [
@@ -76,7 +882,8 @@ function buildSystemInstruction(options) {
 		"",
 		"## 安全边界",
 		"- 未经用户明确要求，不得执行删除、提交、审批、发布、批量修改等不可逆操作；不确定时用 ask_user 询问。",
-		"- 任务完成后调用 done，用一句话说明当前所在页面及已完成的动作；无法完成时说明卡在哪一步。"
+		"- 任务完成后调用 done，用一句话说明当前所在页面及已完成的动作；无法完成时说明卡在哪一步。",
+		...flags.narration ? ["", NARRATION_RULES] : []
 	].join("\n");
 }
 /**
@@ -115,7 +922,7 @@ const STEP_DELAY_SECONDS = .6;
 function newSessionId() {
 	return typeof crypto !== "undefined" && crypto.randomUUID?.() || `page-use-${Date.now()}`;
 }
-function createPageUseAgent({ options, enableMask, shouldRunBeforeTask, onTaskFinished }) {
+function createPageUseAgent({ options, enableMask, narration = false, shouldRunBeforeTask, onTaskFinished }) {
 	const { llm } = options;
 	if (!llm.baseURL) throw new Error("[PageUse] 未配置 llm.baseURL");
 	let sessionId = newSessionId();
@@ -150,7 +957,7 @@ function createPageUseAgent({ options, enableMask, shouldRunBeforeTask, onTaskFi
 		enableMask,
 		experimentalScriptExecutionTool: false,
 		instructions: {
-			system: buildSystemInstruction(options),
+			system: buildSystemInstruction(options, { narration }),
 			getPageInstructions: () => buildPageInstruction(options)
 		},
 		transformPageContent: (content) => {
@@ -167,134 +974,11 @@ function createPageUseAgent({ options, enableMask, shouldRunBeforeTask, onTaskFi
 			}
 			await options.pageAgentOptions.onBeforeTask?.(...args);
 		},
-		onAfterTask: async (...args) => {
-			onTaskFinished?.(args[1]);
-			await options.pageAgentOptions.onAfterTask?.(...args);
-		}
-	});
-}
-
-//#endregion
-//#region src/core/options.ts
-/** 默认模型，仅为示例取值；接入其它端点时应通过 llm.model 显式指定支持 function calling 的模型 */
-const DEFAULT_MODEL = "deepseek-chat";
-/** 单次任务最大步数；每步一次 LLM 调用，防止死循环消耗 token */
-const DEFAULT_MAX_STEPS = 20;
-/** 默认会话头：OpenCode Go 要求每个会话带稳定的 x-opencode-session 用于路由与提示缓存 */
-const DEFAULT_SESSION_HEADER = "x-opencode-session";
-/** localStorage / sessionStorage 键前缀，可通过 storageKeyPrefix 覆盖 */
-const DEFAULT_STORAGE_KEY_PREFIX = "tz-page-use";
-/** 相对路径补齐为当前 origin 的绝对地址并去掉末尾 /；无法解析时返回空串 */
-function toAbsoluteUrl(input) {
-	const base = typeof window !== "undefined" ? window.location.origin : void 0;
-	try {
-		return new URL(input, base).toString().replace(/\/+$/, "");
-	} catch {
-		return "";
-	}
-}
-/** 按路由模式从 location 读取当前路径 */
-function readLocationPath(mode) {
-	if (typeof window === "undefined") return "/";
-	if (mode === "hash") return window.location.hash.replace(/^#/, "") || "/";
-	return `${window.location.pathname}${window.location.search}`;
-}
-function resolveSessionHeader(value) {
-	if (value === false) return "";
-	return (value ?? "").trim() || "x-opencode-session";
-}
-function normalizeOptions(options) {
-	const { llm } = options;
-	const rawBase = (llm.baseURL || "").trim();
-	const routerMode = options.routerMode ?? "hash";
-	return {
-		llm: {
-			baseURL: rawBase ? toAbsoluteUrl(rawBase) : "",
-			apiKey: (llm.apiKey || "").trim(),
-			model: (llm.model || "").trim() || "deepseek-chat",
-			maxSteps: llm.maxSteps && llm.maxSteps > 0 ? llm.maxSteps : 20,
-			disableNamedToolChoice: Boolean(llm.disableNamedToolChoice),
-			extraBody: llm.extraBody && typeof llm.extraBody === "object" ? llm.extraBody : {},
-			sessionHeader: resolveSessionHeader(llm.sessionHeader)
-		},
-		appName: options.appName,
-		getMenus: options.getMenus ?? (() => void 0),
-		routerMode,
-		getCurrentPath: options.getCurrentPath ?? (() => readLocationPath(routerMode)),
-		resolveRouteName: options.resolveRouteName,
-		routeHints: options.routeHints ?? {},
-		layoutHint: options.layoutHint,
-		beforeTask: options.beforeTask,
-		beforeTaskLabel: options.beforeTaskLabel || "任务开始前执行宿主预处理",
-		storageKeyPrefix: options.storageKeyPrefix || "tz-page-use",
-		pageAgentOptions: options.pageAgentOptions ?? {},
-		exposeGlobal: options.exposeGlobal !== false
-	};
-}
-/** URL 查询参数：?pageUseDebug=1 打开调试面板，?pageUseDebug=0 关闭；结果记入 sessionStorage */
-const LAUNCHER_QUERY_KEY = "pageUseDebug";
-/** 从 location 读取调试开关（hash 路由的查询参数在 # 之后，两处都查） */
-function readLauncherQuery() {
-	const fromSearch = new URLSearchParams(window.location.search).get(LAUNCHER_QUERY_KEY);
-	if (fromSearch !== null) return fromSearch;
-	const hashQuery = window.location.hash.split("?")[1];
-	return hashQuery ? new URLSearchParams(hashQuery).get(LAUNCHER_QUERY_KEY) : null;
-}
-/**
-* 调试面板是否显示。优先级：URL 参数（并记入本会话）> 会话记录 > fallback。
-* fallback 由宿主决定（例如「开发环境显示，生产环境隐藏」）。
-*/
-function readLauncherSwitch(fallback, storageKeyPrefix = DEFAULT_STORAGE_KEY_PREFIX) {
-	if (typeof window === "undefined") return fallback;
-	const sessionKey = `${storageKeyPrefix}-debug`;
-	try {
-		const query = readLauncherQuery();
-		if (query !== null) {
-			const enabled = query === "1" || query === "true";
-			window.sessionStorage.setItem(sessionKey, enabled ? "1" : "0");
-			return enabled;
-		}
-		const session = window.sessionStorage.getItem(sessionKey);
-		if (session !== null) return session === "1";
-	} catch {}
-	return fallback;
-}
-
-//#endregion
-//#region src/core/store.ts
-function createStore(initial) {
-	let state = initial;
-	const listeners = /* @__PURE__ */ new Set();
-	const notify = () => {
-		for (const listener of listeners) try {
-			listener(state);
-		} catch (err) {
-			console.warn("[PageUse] store 订阅回调异常", err);
-		}
-	};
-	return {
-		get: () => state,
-		set(patch) {
-			const partial = typeof patch === "function" ? patch(state) : patch;
-			if (Object.keys(partial).every((key) => Object.is(state[key], partial[key]))) return;
-			state = {
-				...state,
-				...partial
-			};
-			notify();
-		},
-		replace(next) {
-			if (Object.is(next, state)) return;
-			state = next;
-			notify();
-		},
-		subscribe(listener) {
-			listeners.add(listener);
-			return () => {
-				listeners.delete(listener);
-			};
+		onAfterTask: async (...args) => {
+			onTaskFinished?.(args[1]);
+			await options.pageAgentOptions.onAfterTask?.(...args);
 		}
-	};
+	});
 }
 
 //#endregion
@@ -323,7 +1007,7 @@ function ensureStore$1() {
 	if (!store$2) store$2 = createStore({ entries: load$1(prefix$1) });
 	return store$2;
 }
-function persist(entries) {
+function persist$1(entries) {
 	ensureStore$1().set({ entries });
 	try {
 		window.localStorage.setItem(storageKey$1(prefix$1), JSON.stringify(entries));
@@ -344,206 +1028,100 @@ const pageUseHistory = {
 		return ensureStore$1().get().entries;
 	},
 	add(entry) {
-		persist([{
+		persist$1([{
 			id: `${entry.at}-${Math.random().toString(36).slice(2, 8)}`,
 			...entry
 		}, ...ensureStore$1().get().entries].slice(0, MAX_ENTRIES));
 	},
 	remove(id) {
-		persist(ensureStore$1().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/maskTheme.ts
+//#region src/core/presetStore.ts
 /**
-* 运行期蒙层与模拟光标的定制主题（覆盖 page-agent SimulatorMask 的默认视觉）。
-*
-* page-agent 的 CSS Module 类名带哈希（如 `_cursor_1dgwb_2`），随版本变化，
-* 因此这里只依赖稳定的结构：
-* - 蒙层根节点 id：`page-agent-runtime_simulator-mask`
-* - 子节点顺序：ai-motion 光晕层在前（初始化失败时不存在），光标节点恒为最后一个子节点
-* - 光标子节点顺序：1 点击波纹 / 2 箭头填充 / 3 箭头描边
-* - 点击态类名包含 `clicking` 子串
-* 升级 page-agent 后若光标样式失效，先核对 SimulatorMask 的 #createCursor 结构。
+* Page Use 快捷指令的用户维护数据（localStorage，懒创建单例）。
+* - custom：用户自定义指令，新增排在最前
+* - hidden：被用户删除（隐藏）的来源指令（菜单生成 / 内置 / 宿主 presets / scenarios）的 task 文本
+* 来源指令本身不落盘；宿主修改 task 后旧的隐藏记录自然失效，不主动清理。
+* 存储键为 `${storageKeyPrefix}-presets`。
 */
-/** 蒙层根节点 id（@page-agent/page-controller 内部常量） */
-const SIMULATOR_MASK_ID = "page-agent-runtime_simulator-mask";
-/** 主题色：主色 #0879ff 同系的蓝 → 青 → 靛渐变 */
-const PAGE_USE_MASK_COLORS = {
-	primary: "#0879ff",
-	cyan: "#36cfc9",
-	indigo: "#597ef7",
-	/** 误触拦截时的警示色 */
-	warning: "#fa8c16"
+const EMPTY_STATE = {
+	custom: [],
+	hidden: []
 };
-const CURSOR_ARROW_MASK = `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M 15 42 L 15 36.99 Q 15 31.99 23.7 31.99 L 28.05 31.99 Q 32.41 31.99 32.41 21.99 L 32.41 17 Q 32.41 12 41.09 16.95 L 76.31 37.05 Q 85 42 76.31 46.95 L 41.09 67.05 Q 32.41 72 32.41 62.01 L 32.41 57.01 Q 32.41 52.01 23.7 52.01 L 19.35 52.01 Q 15 52.01 15 47.01 Z' fill='#000'/></svg>`)}")`;
-const MASK = `#${SIMULATOR_MASK_ID}`;
-/** 光标节点：蒙层的最后一个子节点 */
-const CURSOR = `${MASK} > :last-child`;
-const { primary, cyan, indigo } = PAGE_USE_MASK_COLORS;
-const PAGE_USE_MASK_THEME_CSS = `
-/* 隐藏 ai-motion 默认光晕（光标之外的子节点），光晕改由 <tz-page-use-glow> 渲染 */
-${MASK} > :not(:last-child) { display: none !important; }
-/* 蒙层本身保持透明，仅负责拦截点击；真实鼠标由 wait 转圈改为禁止符号，明确「此时不可操作」而非「页面卡死」 */
-${MASK} { cursor: not-allowed !important; }
-
-/* 光标整体外发光 */
-${CURSOR} {
-  filter: drop-shadow(0 0 6px ${primary}8c) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
-}
-/* 光标尖端（节点原点）的呼吸光圈 */
-${CURSOR}::before {
-  content: '';
-  position: absolute;
-  left: -16px;
-  top: -16px;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: radial-gradient(circle, ${cyan}66 0%, ${primary}26 55%, transparent 72%);
-  animation: page-use-cursor-halo 1.6s ease-in-out infinite;
-  pointer-events: none;
-}
-/* 箭头描边：主题渐变 */
-${CURSOR} > :nth-child(3) {
-  background: linear-gradient(45deg, ${primary}, ${cyan}) !important;
-}
-/* 箭头填充：用同形遮罩替换原白色 SVG 背景，改为浅色渐变 */
-${CURSOR} > :nth-child(2) {
-  background: linear-gradient(135deg, #ffffff 30%, #e6f4ff) !important;
-  -webkit-mask: ${CURSOR_ARROW_MASK} center / 100% 100% no-repeat;
-  mask: ${CURSOR_ARROW_MASK} center / 100% 100% no-repeat;
-}
-/* 点击波纹：外环改主题色 */
-${CURSOR} > :nth-child(1)::after {
-  border-color: ${cyan} !important;
-  border-width: 3px !important;
-}
-/* 点击波纹：追加一层实心扩散，增强点击反馈 */
-${CURSOR} > :nth-child(1)::before {
-  content: '';
-  position: absolute;
-  inset: 25%;
-  border-radius: 50%;
-  background: radial-gradient(circle, ${indigo}80, transparent 70%);
-  opacity: 0;
-}
-${CURSOR}[class*='clicking'] > :nth-child(1)::before {
-  animation: page-use-cursor-press 420ms ease-out forwards;
-}
-
-@keyframes page-use-cursor-halo {
-  0%, 100% { transform: scale(0.85); opacity: 0.7; }
-  50% { transform: scale(1.25); opacity: 1; }
-}
-@keyframes page-use-cursor-press {
-  0% { transform: scale(0.4); opacity: 1; }
-  100% { transform: scale(2.4); opacity: 0; }
+function storageKey(prefix) {
+	return `${prefix}-presets`;
 }
-@media (prefers-reduced-motion: reduce) {
-  ${CURSOR}::before { animation: none; }
+function createId() {
+	return `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
 }
-`;
-
-//#endregion
-//#region src/core/settings.ts
-/**
-* Page Use 本地设置（localStorage 持久化，单例）。
-* 含 page-agent 内置面板/元素编号高亮开关、蒙层与光晕、调试入口拖拽位置。
-* 存储键为 `${storageKeyPrefix}-settings`。
-*/
-/** page-agent 元素高亮容器 id（page-controller 内部常量，随版本可能变化） */
-const HIGHLIGHT_CONTAINER_ID = "playwright-highlight-container";
-const HIGHLIGHT_STYLE_ID = "page-use-hide-highlights";
-/** page-agent 内置面板根节点 id（@page-agent/ui 内部常量） */
-const BUILTIN_PANEL_ID = "page-agent-runtime_agent-panel";
-const BUILTIN_PANEL_STYLE_ID = "page-use-hide-builtin-panel";
-const MASK_THEME_STYLE_ID = "page-use-mask-theme";
-const DEFAULT_PAGE_USE_SETTINGS = {
-	showBuiltinPanel: false,
-	showHighlights: false,
-	showStepDetails: true,
-	enableBeforeTask: true,
-	enableMask: true,
-	customMaskEffect: true,
-	fabPos: null
-};
-function storageKey(prefix) {
-	return `${prefix}-settings`;
+/** 结构校验：丢弃缺少字符串 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));
-		if (!raw) return { ...DEFAULT_PAGE_USE_SETTINGS };
-		return {
-			...DEFAULT_PAGE_USE_SETTINGS,
-			...JSON.parse(raw)
-		};
+		return raw ? sanitize(JSON.parse(raw)) : { ...EMPTY_STATE };
 	} catch {
-		return { ...DEFAULT_PAGE_USE_SETTINGS };
+		return { ...EMPTY_STATE };
 	}
 }
-function save(prefix, settings) {
-	try {
-		window.localStorage.setItem(storageKey(prefix), JSON.stringify(settings));
-	} catch {}
-}
-/** 按开关注入/移除一段覆盖样式（用于压制 page-agent 自带的 DOM，这些节点位于宿主 document 中） */
-function toggleOverrideStyle(styleId, css, show) {
-	const existing = document.getElementById(styleId);
-	if (show) {
-		existing?.remove();
-		return;
-	}
-	if (existing) return;
-	const style = document.createElement("style");
-	style.id = styleId;
-	style.textContent = css;
-	document.head.appendChild(style);
-}
-/**
-* 把设置同步到页面：
-* - 高亮：page-controller 的 doHighlightElements 内部写死为 true，只能用样式覆盖其高亮容器
-* - 内置面板：Panel 在 statuschange 到 running 时会自行 show()，因此用 !important 样式压制
-* - 蒙层主题：注入覆盖样式；关闭时移除，恢复 page-agent 默认光晕与光标
-*/
-function applyToDocument(settings, prev) {
-	if (typeof document === "undefined") return;
-	if (!prev || prev.showHighlights !== settings.showHighlights) toggleOverrideStyle(HIGHLIGHT_STYLE_ID, `#${HIGHLIGHT_CONTAINER_ID}{display:none !important;}`, settings.showHighlights);
-	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 = DEFAULT_STORAGE_KEY_PREFIX;
 let store$1 = null;
-/** 懒创建：首次访问时读取存储并把设置应用到页面 */
 function ensureStore() {
-	if (store$1) return store$1;
-	const created = createStore(load(prefix));
-	let prev = null;
-	const sync = (next) => {
-		applyToDocument(next, prev);
-		prev = next;
+	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"
 	};
-	sync(created.get());
-	created.subscribe((next) => {
-		save(prefix, next);
-		sync(next);
-	});
-	store$1 = created;
-	return created;
+	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 setSettingsStoragePrefix(next) {
+function setPresetsStoragePrefix(next) {
 	if (next === prefix && store$1) return;
 	prefix = next;
-	if (store$1) store$1.replace(load(prefix));
-	else ensureStore();
+	ensureStore().replace(load(prefix));
 }
-const pageUseSettings = {
+const pageUsePresets = {
 	store: {
 		get: () => ensureStore().get(),
 		subscribe: (listener) => ensureStore().subscribe(listener)
@@ -551,12 +1129,45 @@ const pageUseSettings = {
 	get() {
 		return ensureStore().get();
 	},
-	update(patch) {
-		ensureStore().set(patch);
+	/** 新增自定义指令，排在最前；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;
 	},
-	/** 把浮动入口（及随之定位的面板）恢复到默认角落位置 */
-	resetPositions() {
-		ensureStore().set({ fabPos: null });
+	/** 编辑自定义指令，位置不变 */
+	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: [] });
 	}
 };
 
@@ -668,6 +1279,10 @@ let everConfigured = false;
 let agent = null;
 /** 创建实例时的蒙层设置；与当前设置不一致时须重建 */
 let agentMaskFlag = null;
+/** 创建实例时的播报设置：系统提示在构造时生成，播报开关变化后须重建才能追加 / 移除步骤描述约束 */
+let agentVoiceFlag = null;
+/** 演示播报的停止函数；配置期间运行，解绑 / 重新配置时停止 */
+let stopNarration = null;
 /** 已挂载且可作答的调试面板数量；>0 时未指定 onAskUser 的提问交给面板 */
 let questionUiCount = 0;
 /** 当前任务的调用方选项（提问回调、进度回调） */
@@ -752,20 +1367,25 @@ function handleAskUser(question, signal) {
 		}, { once: true });
 	});
 }
-/** 懒创建单例；蒙层设置变化时重建（enableMask 属构造期选项） */
+/**
+* 懒创建单例；蒙层或播报设置变化时重建（enableMask 属构造期选项，系统提示在构造时生成）。
+* 在任务开始时调用，因此执行中切换开关只影响下一次任务。
+*/
 function ensureAgent(options) {
 	const settings = pageUseSettings.get();
-	if (agent && !agent.disposed && agentMaskFlag === settings.enableMask) return agent;
+	if (agent && !agent.disposed && agentMaskFlag === settings.enableMask && agentVoiceFlag === settings.voiceEnabled) return agent;
 	if (agent && !agent.disposed) agent.dispose();
 	const created = createPageUseAgent({
 		options,
 		enableMask: settings.enableMask,
+		narration: settings.voiceEnabled,
 		shouldRunBeforeTask: () => pageUseSettings.get().enableBeforeTask
 	});
 	bindAgentEvents(created);
 	created.onAskUser = (question, askOptions) => handleAskUser(question, askOptions?.signal);
 	agent = created;
 	agentMaskFlag = settings.enableMask;
+	agentVoiceFlag = settings.voiceEnabled;
 	store.set({ maskEnabled: settings.enableMask });
 	return created;
 }
@@ -803,10 +1423,18 @@ 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,
+		engines: options.ttsEngines
+	});
 	return () => {
 		if (config !== options) return;
 		config = null;
+		stopNarration?.();
+		stopNarration = null;
 		disposeAgent();
 		store.set({ ready: false });
 	};
@@ -969,6 +1597,7 @@ function disposeAgent() {
 	agent?.dispose();
 	agent = null;
 	agentMaskFlag = null;
+	agentVoiceFlag = null;
 	activeOptions = null;
 	store.set({
 		maskEnabled: false,
@@ -998,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 提示中引用时保持一致 */
@@ -1090,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 () => {
@@ -1392,6 +2056,10 @@ var PageUseGlowElement = class extends LitElement {
 	}
 };
 
+//#endregion
+//#region package.json
+var version = "0.0.5";
+
 //#endregion
 //#region src/ui/drag.ts
 /** 判定为拖拽而非点击的最小位移（px） */
@@ -1416,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;
@@ -1441,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);
@@ -1461,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
 /** 通用示例：不依赖具体站点，覆盖详情、标签、返回等典型操作 */
@@ -1478,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) {
@@ -1487,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
@@ -1514,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;
@@ -1570,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%;
+    }
+  }
+  @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;
   }
-  .fab.running .fab-dot {
-    animation: blink 1s 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;
@@ -1654,6 +2572,8 @@ const launcherStyles = css`
   .title {
     flex: 1 0 auto;
     font-weight: 600;
+    /* 连续点击标题打开元信息面板，避免选中文字 */
+    user-select: none;
   }
   .status {
     min-width: 0;
@@ -1664,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;
@@ -1687,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;
   }
@@ -1937,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 {
@@ -1974,6 +2957,141 @@ const launcherStyles = css`
     background: var(--bg-soft);
     cursor: not-allowed;
   }
+  /* ---------- 演示播报设置 ---------- */
+  .voice-warning {
+    font-size: 12px;
+  }
+  /* 与复选框文字左对齐（复选框宽 13px + 间距 8px） */
+  .voice-options {
+    display: flex;
+    flex-direction: column;
+    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;
+    gap: 4px;
+  }
+  .field-label {
+    color: var(--text-3);
+    font-size: 12px;
+  }
+  .range {
+    width: 100%;
+    margin: 0;
+    accent-color: var(--primary);
+  }
+  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;
     gap: 6px;
@@ -1995,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;
@@ -2039,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);
@@ -2051,7 +3178,7 @@ const launcherStyles = css`
 /**
 * <tz-page-use-launcher>：调试入口（可拖拽浮动按钮 + 指令面板）。
 * 与其它智能体共用 core/service 的单例状态：其它智能体下达的任务同样在此展示，可随时终止。
-* 默认隐藏 page-agent 自带面板与元素编号高亮，进度与提问改由本面板承接（设置里可开回）。
+* page-agent 自带面板固定隐藏、元素编号高亮默认隐藏（设置里可开回），进度与提问改由本面板承接。
 *
 * 宿主元素须带 data-page-agent-ignore="true"（由 mountPageUseUI 设置）：
 * page-controller 在该属性上直接跳过整棵子树（含 shadow root），面板不会被模型当作页面元素。
@@ -2068,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 与锚点剩余空间约束 */
@@ -2078,6 +3205,28 @@ const PANEL_HEIGHT = 560;
 /** 日志区距底部小于该值（px）视为贴底 */
 const STICK_THRESHOLD = 24;
 const TEXTAREA_MIN_ROWS = 2;
+/** 元信息面板解锁：任意连续 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;
 /**
 * 步骤 → 时间线节点颜色：失败/报错为 error，完成为 success，
 * 向用户提问与重试为 warning，其余普通操作为 info（主色）。
@@ -2100,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;
 	/**
 	* 日志区跟随滚动：默认贴底跟随新内容；用户上翻后停止跟随，
 	* 回到底部附近（阈值内）或点击「最新」后恢复。
@@ -2121,8 +3285,8 @@ var PageUseLauncherElement = class extends LitElement {
 	* 因此在可见时测量并保留最近一次结果；初值为「Page Use」文案下的近似尺寸。
 	*/
 	fabSize = {
-		width: 110,
-		height: 34
+		width: 122,
+		height: 36
 	};
 	viewport = {
 		width: window.innerWidth,
@@ -2138,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");
@@ -2149,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,
@@ -2167,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;
@@ -2181,25 +3354,102 @@ 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()),
-			registerQuestionUi()
+			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 的语音列表异步加载，首次读取可能为空：加载完成后刷新语音下拉框。
+	* 挂载时宿主可能尚未注入引擎，因此不按引擎判断；注入引擎时该事件只触发一次无害的重绘。
+	*/
+	watchVoices() {
+		if (!isSpeechSupported()) return () => {};
+		const synth = globalThis.speechSynthesis;
+		const onChange = () => this.requestUpdate();
+		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,
@@ -2287,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;
@@ -2376,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
@@ -2404,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();
@@ -2432,21 +3741,282 @@ 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">
-        ${this.renderCheckbox("showBuiltinPanel", "显示 page-agent 自带面板", "关闭后由本面板展示进度")}
+        <div class="settings-status">当前状态：${STATUS_LABELS[status] || status}</div>
         ${this.renderCheckbox("showHighlights", "显示元素编号高亮", "运行时页面上带数字的彩色框")}
         ${this.renderCheckbox("enableMask", "运行时蒙层防误触", "下次任务开始生效")}
-        ${this.renderCheckbox("customMaskEffect", "定制光晕与光标配色", "关闭后恢复 page-agent 默认效果", !settings.enableMask)}
         ${config?.beforeTask ? this.renderCheckbox("enableBeforeTask", config.beforeTaskLabel) : nothing}
         ${this.renderCheckbox("showStepDetails", "步骤显示模型思考与返回")}
-        <div class="row">
+        ${this.renderVoiceSettings(settings)}
+        <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>
+      </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>
-        <span class="meta">端点 ${this.endpointLabel()} · 模型 ${config?.llm.model ?? "-"}</span>
+      </div>
+    </div>`;
+	}
+	/**
+	* 演示播报：总开关关闭时只显示开关；开启后依次为引擎下拉（可选引擎多于一个时）、
+	* 语速、音色下拉与试听按钮（无音色列表时只有试听按钮）、不可用 / 无中文语音提示。
+	*/
+	renderVoiceSettings(settings) {
+		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`
+      ${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"
+                type="range"
+                min=${VOICE_RATE_MIN}
+                max=${VOICE_RATE_MAX}
+                step=${VOICE_RATE_STEP}
+                .value=${String(settings.voiceRate)}
+                @input=${(e) => pageUseSettings.update({ voiceRate: Number(e.target.value) })}
+              />
+            </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>`;
 	}
@@ -2608,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
@@ -2618,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="关闭（可调用 showPageUseLauncher 或加 URL 参数 pageUseDebug=1 重新打开）"
+              @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>
     `;
 	}
@@ -2690,4 +4282,4 @@ function mountPageUseUI(options = {}) {
 }
 
 //#endregion
-export { DEFAULT_MODEL as A, pageUseStore as C, SIMULATOR_MASK_ID as D, PAGE_USE_MASK_COLORS as E, DEFAULT_STORAGE_KEY_PREFIX as M, normalizeOptions as N, pageUseHistory as O, readLauncherSwitch as P, isRunning as S, pageUseSettings 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, DEFAULT_SESSION_HEADER as j, DEFAULT_MAX_STEPS 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, DEFAULT_PAGE_USE_SETTINGS 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 };