@page-agent/ui 0.0.7

package/dist/lib/page-agent-ui.js

@@ -0,0 +1,1072 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._wrapper_1j0ct_1 {\n	position: fixed;\n	bottom: 100px;\n	left: 50%;\n	transform: translateX(-50%) translateY(20px);\n	opacity: 0;\n	z-index: 2147483642; /* 比 SimulatorMask 高一层 */\n	box-sizing: border-box;\n\n	overflow: visible;\n\n	* {\n		box-sizing: border-box;\n	}\n\n	--width: 360px;\n	--height: 40px;\n	--border-radius: 12px;\n\n	--side-space: 12px; /* 控制栏两侧的间距 */\n	--history-width: calc(var(--width) - var(--side-space) * 2);\n\n	--color-1: rgb(57, 182, 255);\n	--color-2: rgb(189, 69, 251);\n	--color-3: rgb(255, 87, 51);\n	--color-4: rgb(255, 214, 0);\n\n	width: var(--width);\n	height: var(--height);\n\n	transition: all 0.3s ease-in-out;\n\n	/* 响应式设计 */\n	@media (max-width: 480px) {\n		width: calc(100vw - 40px);\n		--width: calc(100vw - 40px);\n	}\n\n	._background_1j0ct_39 {\n		position: absolute;\n		inset: -2px -8px;\n		border-radius: calc(var(--border-radius) + 4px);\n		filter: blur(16px);\n		overflow: hidden;\n		/* mix-blend-mode: lighten; */\n		/* display: none; */\n\n		&::before {\n			content: '';\n			z-index: -1;\n			pointer-events: none;\n			position: absolute;\n			width: 100%;\n			height: 100%;\n			/* left: -100%; */\n			left: 0;\n			top: 0;\n\n			background-image: linear-gradient(\n				to bottom left,\n				var(--color-1),\n				var(--color-2),\n				var(--color-1)\n			);\n			animation: _mask-running_1j0ct_1 2s linear infinite;\n		}\n		&::after {\n			content: '';\n			z-index: -1;\n			pointer-events: none;\n			position: absolute;\n			width: 100%;\n			height: 100%;\n			left: 0;\n			top: 0;\n\n			background-image: linear-gradient(\n				to bottom left,\n				var(--color-2),\n				var(--color-1),\n				var(--color-2)\n			);\n			animation: _mask-running_1j0ct_1 2s linear infinite;\n			animation-delay: 1s;\n		}\n	}\n}\n\n@keyframes _mask-running_1j0ct_1 {\n	from {\n		transform: translateX(-100%);\n	}\n	to {\n		transform: translateX(100%);\n	}\n}\n\n/* 控制栏 */\n._header_1j0ct_99 {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 8px 12px;\n	user-select: none;\n\n	position: absolute;\n	inset: 0;\n\n	cursor: pointer;\n	flex-shrink: 0; /* 防止 header 被压缩 */\n\n	background: rgba(0, 0, 0, 0.5);\n	backdrop-filter: blur(10px);\n	border-radius: var(--border-radius);\n	background-clip: padding-box;\n\n	box-shadow:\n		0 0 0px 2px rgba(255, 255, 255, 0.4),\n		0 0 5px 1px rgba(255, 255, 255, 0.3);\n\n	._statusSection_1j0ct_121 {\n		display: flex;\n		align-items: center;\n		gap: 8px;\n		flex: 1;\n		min-height: 24px; /* 确保垂直居中 */\n\n		._indicator_1j0ct_128 {\n			width: 6px;\n			height: 6px;\n			border-radius: 50%;\n			background: rgba(255, 255, 255, 0.5);\n			flex-shrink: 0;\n			animation: none; /* 默认无动画 */\n\n			/* 运行状态 - 有动画 */\n			&._thinking_1j0ct_137 {\n				background: rgb(57, 182, 255);\n				animation: _pulse_1j0ct_1 0.8s ease-in-out infinite;\n			}\n\n			&._tool_executing_1j0ct_142 {\n				background: rgb(189, 69, 251);\n				animation: _pulse_1j0ct_1 0.6s ease-in-out infinite;\n			}\n\n			&._retry_1j0ct_147 {\n				background: rgb(255, 214, 0);\n				animation: _retryPulse_1j0ct_1 1s ease-in-out infinite;\n			}\n\n			/* 静止状态 - 无动画 */\n			&._completed_1j0ct_153,\n			&._input_1j0ct_154,\n			&._output_1j0ct_155 {\n				background: rgb(34, 197, 94);\n				animation: none;\n			}\n\n			&._error_1j0ct_160 {\n				background: rgb(239, 68, 68);\n				animation: none;\n			}\n		}\n\n		._statusText_1j0ct_166 {\n			color: white;\n			font-size: 12px;\n			line-height: 1;\n			font-weight: 500;\n			transition: all 0.3s ease-in-out;\n			position: relative;\n			overflow: hidden;\n			display: flex;\n			align-items: center;\n			min-height: 24px; /* 确保垂直居中 */\n\n			&._fadeOut_1j0ct_178 {\n				animation: _statusTextFadeOut_1j0ct_1 0.3s ease forwards;\n			}\n\n			&._fadeIn_1j0ct_182 {\n				animation: _statusTextFadeIn_1j0ct_1 0.3s ease forwards;\n			}\n		}\n	}\n\n	._controls_1j0ct_188 {\n		display: flex;\n		align-items: center;\n		gap: 4px;\n\n		._controlButton_1j0ct_193 {\n			width: 24px;\n			height: 24px;\n			border: none;\n			border-radius: 4px;\n			background: rgba(255, 255, 255, 0.1);\n			color: white;\n			cursor: pointer;\n			display: flex;\n			align-items: center;\n			justify-content: center;\n			font-size: 12px;\n			line-height: 1;\n\n			&:hover {\n				background: rgba(255, 255, 255, 0.2);\n			}\n		}\n\n		._pauseButton_1j0ct_212 {\n			font-weight: 600;\n			&._paused_1j0ct_214 {\n				background: rgba(34, 197, 94, 0.2); /* 绿色背景表示可以继续 */\n				color: rgb(34, 197, 94);\n\n				&:hover {\n					background: rgba(34, 197, 94, 0.3);\n				}\n			}\n		}\n\n		._stopButton_1j0ct_224 {\n			background: rgba(239, 68, 68, 0.2);\n			color: rgb(255, 41, 41);\n			font-weight: 600;\n\n			&:hover {\n				background: rgba(239, 68, 68, 0.3);\n			}\n		}\n	}\n}\n\n@keyframes _statusTextFadeIn_1j0ct_1 {\n	0% {\n		opacity: 0;\n		transform: translateY(5px);\n	}\n	100% {\n		opacity: 1;\n		transform: translateY(0);\n	}\n}\n\n@keyframes _statusTextFadeOut_1j0ct_1 {\n	0% {\n		opacity: 1;\n		transform: translateY(0);\n	}\n	100% {\n		opacity: 0;\n		transform: translateY(-5px);\n	}\n}\n\n._historySectionWrapper_1j0ct_258 {\n	position: absolute;\n	width: var(--history-width);\n	bottom: var(--height);\n	left: var(--side-space);\n	z-index: -2;\n\n	padding-top: 0px;\n	visibility: collapse;\n	overflow: hidden;\n\n	transition: all 0.2s;\n\n	background: rgba(2, 0, 20, 0.5);\n	/* background: rgba(186, 186, 186, 0.2); */\n	backdrop-filter: blur(10px);\n\n	text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);\n\n	border-top-left-radius: calc(var(--border-radius) + 4px);\n	border-top-right-radius: calc(var(--border-radius) + 4px);\n\n	/* border: 2px solid rgba(255, 255, 255, 0.8); */\n	border: 2px solid rgba(255, 255, 255, 0.4);\n	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);\n\n	/* @media (prefers-color-scheme: dark) {\n		box-shadow:\n			0 8px 32px 0 rgba(0, 0, 0, 0.85),\n			0 2px 12px 0 rgba(57, 182, 255, 0.1);\n	} */\n\n	._expanded_1j0ct_290 & {\n		padding-top: 8px;\n		visibility: visible;\n	}\n\n	._historySection_1j0ct_258 {\n		position: relative;\n		overflow-y: auto;\n		overscroll-behavior: contain;\n		scrollbar-width: none;\n		max-height: 0;\n		padding-inline: 8px;\n\n		transition: max-height 0.2s;\n\n		._expanded_1j0ct_290 & {\n			max-height: 400px;\n		}\n\n		._historyItem_1j0ct_309 {\n			/* backdrop-filter: blur(10px); */\n			padding: 8px 10px;\n			margin-bottom: 6px;\n			background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));\n			border-radius: 8px;\n			border-left: 2px solid rgba(57, 182, 255, 0.5);\n			font-size: 12px;\n			color: white;\n			/* color: black; */\n			line-height: 1.3;\n			position: relative;\n			overflow: hidden;\n\n			/* 微妙的内阴影 */\n			box-shadow:\n				inset 0 1px 0 rgba(255, 255, 255, 0.1),\n				0 1px 3px rgba(0, 0, 0, 0.1);\n\n			&::before {\n				content: '';\n				position: absolute;\n				top: 0;\n				left: 0;\n				right: 0;\n				height: 1px;\n				background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\n			}\n\n			&:hover {\n				background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));\n				/* transform: translateY(-1px); */\n				box-shadow:\n					inset 0 1px 0 rgba(255, 255, 255, 0.15),\n					0 2px 4px rgba(0, 0, 0, 0.15);\n			}\n\n			&:last-child {\n				margin-bottom: 10px;\n			}\n\n			&._completed_1j0ct_153,\n			&._input_1j0ct_154,\n			&._output_1j0ct_155 {\n				border-left-color: rgb(34, 197, 94);\n				background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));\n			}\n\n			&._error_1j0ct_160 {\n				border-left-color: rgb(239, 68, 68);\n				background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));\n			}\n\n			&._retry_1j0ct_147 {\n				border-left-color: rgb(255, 214, 0);\n				background: linear-gradient(135deg, rgba(255, 214, 0, 0.1), rgba(255, 214, 0, 0.05));\n			}\n\n			/* 突出显示 done 成功结果 */\n			&._doneSuccess_1j0ct_368 {\n				background: linear-gradient(\n					135deg,\n					rgba(34, 197, 94, 0.25),\n					rgba(34, 197, 94, 0.15),\n					rgba(34, 197, 94, 0.08)\n				);\n				border: none;\n				border-left: 4px solid rgb(34, 197, 94);\n				box-shadow:\n					0 4px 12px rgba(34, 197, 94, 0.3),\n					inset 0 1px 0 rgba(255, 255, 255, 0.2),\n					0 0 20px rgba(34, 197, 94, 0.1);\n				font-weight: 600;\n				color: rgb(220, 252, 231);\n				padding: 10px 12px;\n				margin-bottom: 8px;\n				border-radius: 8px;\n				position: relative;\n				overflow: hidden;\n\n				&::before {\n					background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.4), transparent);\n				}\n\n				&::after {\n					content: '';\n					position: absolute;\n					top: 0;\n					left: -100%;\n					width: 100%;\n					height: 100%;\n					background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);\n					animation: _shimmer_1j0ct_1 2s ease-in-out infinite;\n				}\n\n				._historyContent_1j0ct_404 {\n					._statusIcon_1j0ct_405 {\n						font-size: 16px;\n						animation: _celebrate_1j0ct_1 0.8s ease-in-out;\n						filter: drop-shadow(0 2px 4px rgba(34, 197, 94, 0.5));\n					}\n				}\n			}\n\n			/* 突出显示 done 失败结果 */\n			&._doneError_1j0ct_414 {\n				background: linear-gradient(\n					135deg,\n					rgba(239, 68, 68, 0.25),\n					rgba(239, 68, 68, 0.15),\n					rgba(239, 68, 68, 0.08)\n				);\n				border: none;\n				border-left: 4px solid rgb(239, 68, 68);\n				box-shadow:\n					0 4px 12px rgba(239, 68, 68, 0.3),\n					inset 0 1px 0 rgba(255, 255, 255, 0.2),\n					0 0 20px rgba(239, 68, 68, 0.1);\n				font-weight: 600;\n				color: rgb(254, 226, 226);\n				padding: 10px 12px;\n				margin-bottom: 8px;\n				border-radius: 8px;\n				position: relative;\n				overflow: hidden;\n\n				&::before {\n					background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.4), transparent);\n				}\n\n				._historyContent_1j0ct_404 {\n					._statusIcon_1j0ct_405 {\n						font-size: 16px;\n						filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.5));\n					}\n				}\n			}\n\n			._historyContent_1j0ct_404 {\n				display: flex;\n				align-items: center;\n				gap: 8px;\n\n				word-break: break-all;\n				white-space: pre-wrap;\n\n				/* overflow-x: auto; */\n\n				._statusIcon_1j0ct_405 {\n					font-size: 12px;\n					flex-shrink: 0;\n					line-height: 1;\n					transition: all 0.3s ease;\n				}\n			}\n\n			._historyMeta_1j0ct_465 {\n				font-size: 10px;\n				color: rgba(255, 255, 255, 0.6);\n				/* color: rgb(61, 61, 61); */\n				margin-top: 8px;\n				line-height: 1;\n			}\n		}\n	}\n}\n\n/* 动画关键帧 - 更快的闪烁 */\n@keyframes _pulse_1j0ct_1 {\n	0%,\n	100% {\n		opacity: 1;\n		transform: scale(1);\n	}\n	50% {\n		opacity: 0.4;\n		transform: scale(1.3);\n	}\n}\n\n/* 重试动画 - 旋转脉冲 */\n@keyframes _retryPulse_1j0ct_1 {\n	0%,\n	100% {\n		opacity: 1;\n		transform: scale(1) rotate(0deg);\n	}\n	25% {\n		opacity: 0.6;\n		transform: scale(1.2) rotate(90deg);\n	}\n	50% {\n		opacity: 0.8;\n		transform: scale(1.1) rotate(180deg);\n	}\n	75% {\n		opacity: 0.6;\n		transform: scale(1.2) rotate(270deg);\n	}\n}\n\n/* 庆祝动画 */\n@keyframes _celebrate_1j0ct_1 {\n	0%,\n	100% {\n		transform: scale(1);\n	}\n	25% {\n		transform: scale(1.2) rotate(-5deg);\n	}\n	75% {\n		transform: scale(1.2) rotate(5deg);\n	}\n}\n\n/* done 卡片的光泽效果 */\n@keyframes _shimmer_1j0ct_1 {\n	0% {\n		left: -100%;\n	}\n	100% {\n		left: 100%;\n	}\n}\n\n/* 输入区域样式 */\n._inputSectionWrapper_1j0ct_535 {\n	position: absolute;\n	width: var(--history-width);\n	top: var(--height);\n	left: var(--side-space);\n	z-index: -1;\n\n	visibility: visible;\n	overflow: hidden;\n\n	height: 48px;\n\n	transition: all 0.2s;\n\n	background: rgba(186, 186, 186, 0.2);\n	backdrop-filter: blur(10px);\n\n	border-bottom-left-radius: calc(var(--border-radius) + 4px);\n	border-bottom-right-radius: calc(var(--border-radius) + 4px);\n\n	border: 2px solid rgba(255, 255, 255, 0.3);\n	box-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);\n\n	&._hidden_1j0ct_558 {\n		visibility: collapse;\n		height: 0;\n	}\n\n	._inputSection_1j0ct_535 {\n		display: flex;\n		align-items: center;\n		gap: 4px;\n		padding: 8px 8px;\n\n		._taskInput_1j0ct_569 {\n			flex: 1;\n			background: rgba(255, 255, 255, 0.4);\n			border: 1px solid rgba(255, 255, 255, 0.3);\n			border-radius: 10px;\n			padding-inline: 10px;\n			color: rgb(20, 20, 20);\n			font-size: 12px;\n			height: 28px;\n			line-height: 1;\n			outline: none;\n			transition: all 0.2s ease;\n\n			/* text-shadow: 0 0 2px rgba(255, 255, 255, 0.8); */\n\n			/* border-color: rgba(57, 182, 255, 0.3); */\n\n			&::placeholder {\n				color: rgb(53, 53, 53);\n			}\n\n			&:focus {\n				background: rgba(255, 255, 255, 0.8);\n				border-color: rgba(57, 182, 255, 0.6);\n				box-shadow: 0 0 0 2px rgba(57, 182, 255, 0.2);\n			}\n		}\n	}\n}\n._wrapper_1oy2s_1 {\n	position: fixed;\n	inset: 0;\n	z-index: 2147483641; /* 确保在所有元素之上，除了 panel */\n	/* pointer-events: none; */\n	cursor: not-allowed;\n	overflow: hidden;\n\n	display: none;\n}\n/* AI 光标样式 */\n._cursor_1vrf3_2 {\n	position: absolute;\n	width: var(--cursor-size, 75px);\n	height: var(--cursor-size, 75px);\n	pointer-events: none;\n	z-index: 10000;\n	transform: translate(-30%, -30%);\n\n	animation: _cursor-enter_1vrf3_1 300ms ease-out forwards;\n}\n\n._cursorBorder_1vrf3_13 {\n	position: absolute;\n	inset: 0;\n	background: linear-gradient(45deg, rgb(57, 182, 255), rgb(189, 69, 251));\n	mask-image: url(https://img.alicdn.com/imgextra/i1/O1CN01YHLVYR1LvqWIyo5kH_!!6000000001362-2-tps-202-202.png);\n	mask-size: 100% 100%;\n	mask-repeat: no-repeat;\n	animation: _cursor-breathe_1vrf3_1 2s ease-in-out infinite;\n}\n\n._cursorFilling_1vrf3_23 {\n	position: absolute;\n	inset: 0;\n	background: url(https://img.alicdn.com/imgextra/i3/O1CN01JZOqOS1Tu1sIKbPLW_!!6000000002441-2-tps-202-202.png);\n	background-size: 100% 100%;\n	background-repeat: no-repeat;\n}\n\n._cursorRipple_1vrf3_31 {\n	position: absolute;\n	inset: 0;\n	pointer-events: none;\n}\n\n._cursor_1vrf3_2._clicking_1vrf3_37 ._cursorRipple_1vrf3_31::after {\n	content: '';\n	position: absolute;\n	width: 100%;\n	height: 100%;\n	left: -30%;\n	top: -30%;\n	border: 4px solid rgba(57, 182, 255, 1);\n	border-radius: 50%;\n	animation: _cursor-ripple_1vrf3_1 300ms ease-out forwards;\n}\n\n/* 光标动画关键帧 */\n@keyframes _cursor-breathe_1vrf3_1 {\n	0%,\n	100% {\n		transform: scale(1);\n		opacity: 0.9;\n	}\n	50% {\n		transform: scale(1.05);\n		opacity: 1;\n	}\n}\n\n@keyframes _cursor-rotate_1vrf3_1 {\n	0% {\n		transform: rotate(0deg);\n	}\n	100% {\n		transform: rotate(360deg);\n	}\n}\n\n@keyframes _cursor-enter_1vrf3_1 {\n	0% {\n		transform: translate(-30%, -30%) scale(0.5);\n		opacity: 0;\n	}\n	100% {\n		transform: translate(-30%, -30%) scale(1);\n		opacity: 1;\n	}\n}\n\n@keyframes _cursor-ripple_1vrf3_1 {\n	0% {\n		transform: scale(0);\n		opacity: 1;\n	}\n	100% {\n		transform: scale(2);\n		opacity: 0;\n	}\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+var __defProp = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _wrapper, _indicator, _statusText, _historySection, _expandButton, _pauseButton, _stopButton, _inputSection, _taskInput, _state, _isExpanded, _config, _i18n, _userAnswerResolver, _isWaitingForUserAnswer, _headerUpdateTimer, _pendingHeaderText, _isAnimating, _Panel_instances, toStepData_fn, getToolExecutingText_fn, getToolCompletedText_fn, updateInternal_fn, togglePause_fn, updatePauseButton_fn, stopAgent_fn, submitTask_fn, handleUserAnswer_fn, showInputArea_fn, hideInputArea_fn, shouldShowInputArea_fn, createWrapper_fn, setupEventListeners_fn, toggle_fn, expand_fn, collapse_fn, startHeaderUpdateLoop_fn, stopHeaderUpdateLoop_fn, checkAndUpdateHeader_fn, animateTextChange_fn, updateStatusIndicator_fn, updateHistory_fn, scrollToBottom_fn, createHistoryItem_fn, _cursor, _currentCursorX, _currentCursorY, _targetCursorX, _targetCursorY, _SimulatorMask_instances, createCursor_fn, moveCursorToTarget_fn;
+import { Motion } from "ai-motion";
+const _UIState = class _UIState {
+  steps = [];
+  currentStep = null;
+  status = "idle";
+  stepCounter = 0;
+  addStep(stepData) {
+    const step = {
+      id: this.generateId(),
+      stepNumber: ++this.stepCounter,
+      timestamp: /* @__PURE__ */ new Date(),
+      ...stepData
+    };
+    this.steps.push(step);
+    this.currentStep = step;
+    this.updateStatus(step.type);
+    return step;
+  }
+  updateCurrentStep(updates) {
+    if (!this.currentStep) return null;
+    Object.assign(this.currentStep, updates);
+    return this.currentStep;
+  }
+  getCurrentStep() {
+    return this.currentStep;
+  }
+  getAllSteps() {
+    return [...this.steps];
+  }
+  getStatus() {
+    return this.status;
+  }
+  reset() {
+    this.steps = [];
+    this.currentStep = null;
+    this.status = "idle";
+    this.stepCounter = 0;
+  }
+  updateStatus(stepType) {
+    switch (stepType) {
+      case "thinking":
+      case "tool_executing":
+      case "output":
+      case "input":
+      case "retry":
+        this.status = "running";
+        break;
+      case "completed":
+        this.status = "completed";
+        break;
+      case "error":
+        this.status = "error";
+        break;
+    }
+  }
+  generateId() {
+    return `step_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
+  }
+};
+__name(_UIState, "UIState");
+let UIState = _UIState;
+const enUS = {
+  ui: {
+    panel: {
+      ready: "Ready",
+      thinking: "Thinking...",
+      paused: "Paused",
+      taskInput: "Enter new task, describe steps in detail, press Enter to submit",
+      userAnswerPrompt: "Please answer the question above, press Enter to submit",
+      taskTerminated: "Task terminated",
+      taskCompleted: "Task completed",
+      continueExecution: "Continue execution",
+      userAnswer: "User answer: {{input}}",
+      question: "Question: {{question}}",
+      waitingPlaceholder: "Waiting for task to start...",
+      pause: "Pause",
+      continue: "Continue",
+      stop: "Stop",
+      expand: "Expand history",
+      collapse: "Collapse history",
+      step: "Step {{number}} · {{time}}{{duration}}"
+    },
+    tools: {
+      clicking: "Clicking element [{{index}}]...",
+      inputting: "Inputting text to element [{{index}}]...",
+      selecting: 'Selecting option "{{text}}"...',
+      scrolling: "Scrolling page...",
+      waiting: "Waiting {{seconds}} seconds...",
+      done: "Task done",
+      clicked: "🖱️ Clicked element [{{index}}]",
+      inputted: '⌨️ Inputted text "{{text}}"',
+      selected: '☑️ Selected option "{{text}}"',
+      scrolled: "🛞 Page scrolled",
+      waited: "⌛️ Wait completed",
+      executing: "Executing {{toolName}}...",
+      resultSuccess: "success",
+      resultFailure: "failed",
+      resultError: "error"
+    },
+    errors: {
+      elementNotFound: "No interactive element found at index {{index}}",
+      taskRequired: "Task description is required",
+      executionFailed: "Task execution failed",
+      notInputElement: "Element is not an input or textarea",
+      notSelectElement: "Element is not a select element",
+      optionNotFound: 'Option "{{text}}" not found'
+    }
+  }
+};
+const zhCN = {
+  ui: {
+    panel: {
+      ready: "准备就绪",
+      thinking: "正在思考...",
+      paused: "暂停中，稍后",
+      taskInput: "输入新任务，详细描述步骤，回车提交",
+      userAnswerPrompt: "请回答上面问题，回车提交",
+      taskTerminated: "任务已终止",
+      taskCompleted: "任务结束",
+      continueExecution: "继续执行",
+      userAnswer: "用户回答: {{input}}",
+      question: "询问: {{question}}",
+      waitingPlaceholder: "等待任务开始...",
+      pause: "暂停",
+      continue: "继续",
+      stop: "终止",
+      expand: "展开历史",
+      collapse: "收起历史",
+      step: "步骤 {{number}} · {{time}}{{duration}}"
+    },
+    tools: {
+      clicking: "正在点击元素 [{{index}}]...",
+      inputting: "正在输入文本到元素 [{{index}}]...",
+      selecting: '正在选择选项 "{{text}}"...',
+      scrolling: "正在滚动页面...",
+      waiting: "等待 {{seconds}} 秒...",
+      done: "结束任务",
+      clicked: "🖱️ 已点击元素 [{{index}}]",
+      inputted: '⌨️ 已输入文本 "{{text}}"',
+      selected: '☑️ 已选择选项 "{{text}}"',
+      scrolled: "🛞 页面滚动完成",
+      waited: "⌛️ 等待完成",
+      executing: "正在执行 {{toolName}}...",
+      resultSuccess: "成功",
+      resultFailure: "失败",
+      resultError: "错误"
+    },
+    errors: {
+      elementNotFound: "未找到索引为 {{index}} 的交互元素",
+      taskRequired: "任务描述不能为空",
+      executionFailed: "任务执行失败",
+      notInputElement: "元素不是输入框或文本域",
+      notSelectElement: "元素不是选择框",
+      optionNotFound: '未找到选项 "{{text}}"'
+    }
+  }
+};
+const locales = {
+  "en-US": enUS,
+  "zh-CN": zhCN
+};
+const _I18n = class _I18n {
+  language;
+  translations;
+  constructor(language = "en-US") {
+    this.language = language in locales ? language : "en-US";
+    this.translations = locales[language];
+  }
+  // 类型安全的翻译方法
+  t(key, params) {
+    const value = this.getNestedValue(this.translations, key);
+    if (!value) {
+      console.warn(`Translation key "${key}" not found for language "${this.language}"`);
+      return key;
+    }
+    if (params) {
+      return this.interpolate(value, params);
+    }
+    return value;
+  }
+  getNestedValue(obj, path) {
+    return path.split(".").reduce((current, key) => current?.[key], obj);
+  }
+  interpolate(template, params) {
+    return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
+      return params[key] != null ? params[key].toString() : match;
+    });
+  }
+  getLanguage() {
+    return this.language;
+  }
+};
+__name(_I18n, "I18n");
+let I18n = _I18n;
+function truncate(text, maxLength) {
+  if (text.length > maxLength) {
+    return text.substring(0, maxLength) + "...";
+  }
+  return text;
+}
+__name(truncate, "truncate");
+const wrapper$1 = "_wrapper_1j0ct_1";
+const background = "_background_1j0ct_39";
+const header = "_header_1j0ct_99";
+const pulse = "_pulse_1j0ct_1";
+const retryPulse = "_retryPulse_1j0ct_1";
+const statusTextFadeOut = "_statusTextFadeOut_1j0ct_1";
+const statusTextFadeIn = "_statusTextFadeIn_1j0ct_1";
+const statusSection = "_statusSection_1j0ct_121";
+const indicator = "_indicator_1j0ct_128";
+const thinking = "_thinking_1j0ct_137";
+const tool_executing = "_tool_executing_1j0ct_142";
+const retry = "_retry_1j0ct_147";
+const completed = "_completed_1j0ct_153";
+const input = "_input_1j0ct_154";
+const output = "_output_1j0ct_155";
+const error = "_error_1j0ct_160";
+const statusText = "_statusText_1j0ct_166";
+const fadeOut = "_fadeOut_1j0ct_178";
+const fadeIn = "_fadeIn_1j0ct_182";
+const controls = "_controls_1j0ct_188";
+const controlButton = "_controlButton_1j0ct_193";
+const pauseButton = "_pauseButton_1j0ct_212";
+const paused = "_paused_1j0ct_214";
+const stopButton = "_stopButton_1j0ct_224";
+const historySectionWrapper = "_historySectionWrapper_1j0ct_258";
+const shimmer = "_shimmer_1j0ct_1";
+const celebrate = "_celebrate_1j0ct_1";
+const expanded = "_expanded_1j0ct_290";
+const historySection = "_historySection_1j0ct_258";
+const historyItem = "_historyItem_1j0ct_309";
+const doneSuccess = "_doneSuccess_1j0ct_368";
+const historyContent = "_historyContent_1j0ct_404";
+const statusIcon = "_statusIcon_1j0ct_405";
+const doneError = "_doneError_1j0ct_414";
+const historyMeta = "_historyMeta_1j0ct_465";
+const inputSectionWrapper = "_inputSectionWrapper_1j0ct_535";
+const hidden = "_hidden_1j0ct_558";
+const inputSection = "_inputSection_1j0ct_535";
+const taskInput = "_taskInput_1j0ct_569";
+const styles$1 = {
+  wrapper: wrapper$1,
+  "mask-running": "_mask-running_1j0ct_1",
+  background,
+  header,
+  pulse,
+  retryPulse,
+  statusTextFadeOut,
+  statusTextFadeIn,
+  statusSection,
+  indicator,
+  thinking,
+  tool_executing,
+  retry,
+  completed,
+  input,
+  output,
+  error,
+  statusText,
+  fadeOut,
+  fadeIn,
+  controls,
+  controlButton,
+  pauseButton,
+  paused,
+  stopButton,
+  historySectionWrapper,
+  shimmer,
+  celebrate,
+  expanded,
+  historySection,
+  historyItem,
+  doneSuccess,
+  historyContent,
+  statusIcon,
+  doneError,
+  historyMeta,
+  inputSectionWrapper,
+  hidden,
+  inputSection,
+  taskInput
+};
+const _Panel = class _Panel {
+  constructor(config) {
+    __privateAdd(this, _Panel_instances);
+    __privateAdd(this, _wrapper);
+    __privateAdd(this, _indicator);
+    __privateAdd(this, _statusText);
+    __privateAdd(this, _historySection);
+    __privateAdd(this, _expandButton);
+    __privateAdd(this, _pauseButton);
+    __privateAdd(this, _stopButton);
+    __privateAdd(this, _inputSection);
+    __privateAdd(this, _taskInput);
+    __privateAdd(this, _state, new UIState());
+    __privateAdd(this, _isExpanded, false);
+    __privateAdd(this, _config);
+    __privateAdd(this, _i18n);
+    __privateAdd(this, _userAnswerResolver, null);
+    __privateAdd(this, _isWaitingForUserAnswer, false);
+    __privateAdd(this, _headerUpdateTimer, null);
+    __privateAdd(this, _pendingHeaderText, null);
+    __privateAdd(this, _isAnimating, false);
+    __privateSet(this, _config, config);
+    __privateSet(this, _i18n, new I18n(config.language ?? "en-US"));
+    __privateSet(this, _wrapper, __privateMethod(this, _Panel_instances, createWrapper_fn).call(this));
+    __privateSet(this, _indicator, __privateGet(this, _wrapper).querySelector(`.${styles$1.indicator}`));
+    __privateSet(this, _statusText, __privateGet(this, _wrapper).querySelector(`.${styles$1.statusText}`));
+    __privateSet(this, _historySection, __privateGet(this, _wrapper).querySelector(`.${styles$1.historySection}`));
+    __privateSet(this, _expandButton, __privateGet(this, _wrapper).querySelector(`.${styles$1.expandButton}`));
+    __privateSet(this, _pauseButton, __privateGet(this, _wrapper).querySelector(`.${styles$1.pauseButton}`));
+    __privateSet(this, _stopButton, __privateGet(this, _wrapper).querySelector(`.${styles$1.stopButton}`));
+    __privateSet(this, _inputSection, __privateGet(this, _wrapper).querySelector(`.${styles$1.inputSectionWrapper}`));
+    __privateSet(this, _taskInput, __privateGet(this, _wrapper).querySelector(`.${styles$1.taskInput}`));
+    __privateMethod(this, _Panel_instances, setupEventListeners_fn).call(this);
+    __privateMethod(this, _Panel_instances, startHeaderUpdateLoop_fn).call(this);
+    __privateMethod(this, _Panel_instances, showInputArea_fn).call(this);
+  }
+  get wrapper() {
+    return __privateGet(this, _wrapper);
+  }
+  /**
+   * Ask for user input
+   */
+  async askUser(question) {
+    return new Promise((resolve) => {
+      __privateSet(this, _isWaitingForUserAnswer, true);
+      __privateSet(this, _userAnswerResolver, resolve);
+      __privateMethod(this, _Panel_instances, updateInternal_fn).call(this, {
+        type: "output",
+        displayText: __privateGet(this, _i18n).t("ui.panel.question", { question })
+      });
+      if (!__privateGet(this, _isExpanded)) {
+        __privateMethod(this, _Panel_instances, expand_fn).call(this);
+      }
+      __privateMethod(this, _Panel_instances, showInputArea_fn).call(this, __privateGet(this, _i18n).t("ui.panel.userAnswerPrompt"));
+    });
+  }
+  // ========== Public control methods ==========
+  show() {
+    this.wrapper.style.display = "block";
+    void this.wrapper.offsetHeight;
+    this.wrapper.style.opacity = "1";
+    this.wrapper.style.transform = "translateX(-50%) translateY(0)";
+  }
+  hide() {
+    this.wrapper.style.opacity = "0";
+    this.wrapper.style.transform = "translateX(-50%) translateY(20px)";
+    this.wrapper.style.display = "none";
+  }
+  reset() {
+    __privateGet(this, _state).reset();
+    __privateGet(this, _statusText).textContent = __privateGet(this, _i18n).t("ui.panel.ready");
+    __privateMethod(this, _Panel_instances, updateStatusIndicator_fn).call(this, "thinking");
+    __privateMethod(this, _Panel_instances, updateHistory_fn).call(this);
+    __privateMethod(this, _Panel_instances, collapse_fn).call(this);
+    if (__privateGet(this, _config).getPaused()) {
+      __privateGet(this, _config).onPauseToggle();
+    }
+    __privateMethod(this, _Panel_instances, updatePauseButton_fn).call(this);
+    __privateSet(this, _isWaitingForUserAnswer, false);
+    __privateSet(this, _userAnswerResolver, null);
+    __privateMethod(this, _Panel_instances, showInputArea_fn).call(this);
+  }
+  expand() {
+    __privateMethod(this, _Panel_instances, expand_fn).call(this);
+  }
+  collapse() {
+    __privateMethod(this, _Panel_instances, collapse_fn).call(this);
+  }
+  /**
+   * Update panel with semantic data - i18n handled internally
+   */
+  update(data) {
+    const stepData = __privateMethod(this, _Panel_instances, toStepData_fn).call(this, data);
+    __privateMethod(this, _Panel_instances, updateInternal_fn).call(this, stepData);
+  }
+  /**
+   * Dispose panel
+   */
+  dispose() {
+    __privateSet(this, _isWaitingForUserAnswer, false);
+    __privateMethod(this, _Panel_instances, stopHeaderUpdateLoop_fn).call(this);
+    this.wrapper.remove();
+  }
+};
+_wrapper = new WeakMap();
+_indicator = new WeakMap();
+_statusText = new WeakMap();
+_historySection = new WeakMap();
+_expandButton = new WeakMap();
+_pauseButton = new WeakMap();
+_stopButton = new WeakMap();
+_inputSection = new WeakMap();
+_taskInput = new WeakMap();
+_state = new WeakMap();
+_isExpanded = new WeakMap();
+_config = new WeakMap();
+_i18n = new WeakMap();
+_userAnswerResolver = new WeakMap();
+_isWaitingForUserAnswer = new WeakMap();
+_headerUpdateTimer = new WeakMap();
+_pendingHeaderText = new WeakMap();
+_isAnimating = new WeakMap();
+_Panel_instances = new WeakSet();
+// ========== Private methods ==========
+/**
+ * Convert semantic update to step data with i18n
+ */
+toStepData_fn = /* @__PURE__ */ __name(function(data) {
+  switch (data.type) {
+    case "thinking":
+      return { type: "thinking", displayText: data.text ?? __privateGet(this, _i18n).t("ui.panel.thinking") };
+    case "input":
+      return { type: "input", displayText: data.task };
+    case "question":
+      return {
+        type: "output",
+        displayText: __privateGet(this, _i18n).t("ui.panel.question", { question: data.question })
+      };
+    case "userAnswer":
+      return {
+        type: "input",
+        displayText: __privateGet(this, _i18n).t("ui.panel.userAnswer", { input: data.input })
+      };
+    case "retry":
+      return { type: "retry", displayText: `retry-ing (${data.current} / ${data.max})` };
+    case "error":
+      return { type: "error", displayText: data.message };
+    case "output":
+      return { type: "output", displayText: data.text };
+    case "completed":
+      return { type: "completed", displayText: __privateGet(this, _i18n).t("ui.panel.taskCompleted") };
+    case "toolExecuting":
+      return {
+        type: "tool_executing",
+        toolName: data.toolName,
+        toolArgs: data.args,
+        displayText: __privateMethod(this, _Panel_instances, getToolExecutingText_fn).call(this, data.toolName, data.args)
+      };
+    case "toolCompleted": {
+      const displayText = __privateMethod(this, _Panel_instances, getToolCompletedText_fn).call(this, data.toolName, data.args);
+      if (!displayText) return { type: "tool_executing", displayText: "" };
+      return {
+        type: "tool_executing",
+        toolName: data.toolName,
+        toolArgs: data.args,
+        toolResult: data.result,
+        displayText,
+        duration: data.duration
+      };
+    }
+  }
+}, "#toStepData");
+getToolExecutingText_fn = /* @__PURE__ */ __name(function(toolName, args) {
+  switch (toolName) {
+    case "click_element_by_index":
+      return __privateGet(this, _i18n).t("ui.tools.clicking", { index: args.index });
+    case "input_text":
+      return __privateGet(this, _i18n).t("ui.tools.inputting", { index: args.index });
+    case "select_dropdown_option":
+      return __privateGet(this, _i18n).t("ui.tools.selecting", { text: args.text });
+    case "scroll":
+      return __privateGet(this, _i18n).t("ui.tools.scrolling");
+    case "wait":
+      return __privateGet(this, _i18n).t("ui.tools.waiting", { seconds: args.seconds });
+    case "done":
+      return __privateGet(this, _i18n).t("ui.tools.done");
+    default:
+      return __privateGet(this, _i18n).t("ui.tools.executing", { toolName });
+  }
+}, "#getToolExecutingText");
+getToolCompletedText_fn = /* @__PURE__ */ __name(function(toolName, args) {
+  switch (toolName) {
+    case "click_element_by_index":
+      return __privateGet(this, _i18n).t("ui.tools.clicked", { index: args.index });
+    case "input_text":
+      return __privateGet(this, _i18n).t("ui.tools.inputted", { text: args.text });
+    case "select_dropdown_option":
+      return __privateGet(this, _i18n).t("ui.tools.selected", { text: args.text });
+    case "scroll":
+      return __privateGet(this, _i18n).t("ui.tools.scrolled");
+    case "wait":
+      return __privateGet(this, _i18n).t("ui.tools.waited");
+    case "done":
+      return null;
+    default:
+      return null;
+  }
+}, "#getToolCompletedText");
+/**
+ * Update status (internal)
+ */
+updateInternal_fn = /* @__PURE__ */ __name(function(stepData) {
+  if (!stepData.displayText) return;
+  const step = __privateGet(this, _state).addStep(stepData);
+  const headerText = truncate(step.displayText, 20);
+  __privateSet(this, _pendingHeaderText, headerText);
+  __privateMethod(this, _Panel_instances, updateStatusIndicator_fn).call(this, step.type);
+  __privateMethod(this, _Panel_instances, updateHistory_fn).call(this);
+  if (step.type === "completed" || step.type === "error") {
+    if (!__privateGet(this, _isExpanded)) {
+      __privateMethod(this, _Panel_instances, expand_fn).call(this);
+    }
+  }
+  if (__privateMethod(this, _Panel_instances, shouldShowInputArea_fn).call(this)) {
+    __privateMethod(this, _Panel_instances, showInputArea_fn).call(this);
+  } else {
+    __privateMethod(this, _Panel_instances, hideInputArea_fn).call(this);
+  }
+}, "#updateInternal");
+/**
+ * Toggle pause state
+ */
+togglePause_fn = /* @__PURE__ */ __name(function() {
+  const paused2 = __privateGet(this, _config).onPauseToggle();
+  __privateMethod(this, _Panel_instances, updatePauseButton_fn).call(this);
+  if (paused2) {
+    __privateGet(this, _statusText).textContent = __privateGet(this, _i18n).t("ui.panel.paused");
+    __privateMethod(this, _Panel_instances, updateStatusIndicator_fn).call(this, "thinking");
+  } else {
+    __privateGet(this, _statusText).textContent = __privateGet(this, _i18n).t("ui.panel.continueExecution");
+    __privateMethod(this, _Panel_instances, updateStatusIndicator_fn).call(this, "tool_executing");
+  }
+}, "#togglePause");
+/**
+ * Update pause button state
+ */
+updatePauseButton_fn = /* @__PURE__ */ __name(function() {
+  const paused2 = __privateGet(this, _config).getPaused();
+  if (paused2) {
+    __privateGet(this, _pauseButton).textContent = "▶";
+    __privateGet(this, _pauseButton).title = __privateGet(this, _i18n).t("ui.panel.continue");
+    __privateGet(this, _pauseButton).classList.add(styles$1.paused);
+  } else {
+    __privateGet(this, _pauseButton).textContent = "⏸︎";
+    __privateGet(this, _pauseButton).title = __privateGet(this, _i18n).t("ui.panel.pause");
+    __privateGet(this, _pauseButton).classList.remove(styles$1.paused);
+  }
+}, "#updatePauseButton");
+/**
+ * Stop Agent
+ */
+stopAgent_fn = /* @__PURE__ */ __name(function() {
+  __privateMethod(this, _Panel_instances, updateInternal_fn).call(this, {
+    type: "error",
+    displayText: __privateGet(this, _i18n).t("ui.panel.taskTerminated")
+  });
+  __privateGet(this, _config).onStop();
+}, "#stopAgent");
+/**
+ * Submit task
+ */
+submitTask_fn = /* @__PURE__ */ __name(function() {
+  const input2 = __privateGet(this, _taskInput).value.trim();
+  if (!input2) return;
+  __privateMethod(this, _Panel_instances, hideInputArea_fn).call(this);
+  if (__privateGet(this, _isWaitingForUserAnswer)) {
+    __privateMethod(this, _Panel_instances, handleUserAnswer_fn).call(this, input2);
+  } else {
+    __privateGet(this, _config).onExecuteTask(input2);
+  }
+}, "#submitTask");
+/**
+ * Handle user answer
+ */
+handleUserAnswer_fn = /* @__PURE__ */ __name(function(input2) {
+  __privateMethod(this, _Panel_instances, updateInternal_fn).call(this, {
+    type: "input",
+    displayText: __privateGet(this, _i18n).t("ui.panel.userAnswer", { input: input2 })
+  });
+  __privateSet(this, _isWaitingForUserAnswer, false);
+  if (__privateGet(this, _userAnswerResolver)) {
+    __privateGet(this, _userAnswerResolver).call(this, input2);
+    __privateSet(this, _userAnswerResolver, null);
+  }
+}, "#handleUserAnswer");
+/**
+ * Show input area
+ */
+showInputArea_fn = /* @__PURE__ */ __name(function(placeholder) {
+  __privateGet(this, _taskInput).value = "";
+  __privateGet(this, _taskInput).placeholder = placeholder || __privateGet(this, _i18n).t("ui.panel.taskInput");
+  __privateGet(this, _inputSection).classList.remove(styles$1.hidden);
+  setTimeout(() => {
+    __privateGet(this, _taskInput).focus();
+  }, 100);
+}, "#showInputArea");
+/**
+ * Hide input area
+ */
+hideInputArea_fn = /* @__PURE__ */ __name(function() {
+  __privateGet(this, _inputSection).classList.add(styles$1.hidden);
+}, "#hideInputArea");
+/**
+ * Check if input area should be shown
+ */
+shouldShowInputArea_fn = /* @__PURE__ */ __name(function() {
+  if (__privateGet(this, _isWaitingForUserAnswer)) return true;
+  const steps = __privateGet(this, _state).getAllSteps();
+  if (steps.length === 0) {
+    return true;
+  }
+  const lastStep = steps[steps.length - 1];
+  return lastStep.type === "completed" || lastStep.type === "error";
+}, "#shouldShowInputArea");
+createWrapper_fn = /* @__PURE__ */ __name(function() {
+  const wrapper2 = document.createElement("div");
+  wrapper2.id = "page-agent-runtime_agent-panel";
+  wrapper2.className = `${styles$1.wrapper} ${styles$1.collapsed}`;
+  wrapper2.setAttribute("data-browser-use-ignore", "true");
+  wrapper2.innerHTML = `
+			<div class="${styles$1.background}"></div>
+			<div class="${styles$1.historySectionWrapper}">
+				<div class="${styles$1.historySection}">
+					${__privateMethod(this, _Panel_instances, createHistoryItem_fn).call(this, {
+    id: "placeholder",
+    stepNumber: 0,
+    timestamp: /* @__PURE__ */ new Date(),
+    type: "thinking",
+    displayText: __privateGet(this, _i18n).t("ui.panel.waitingPlaceholder")
+  })}
+				</div>
+			</div>
+			<div class="${styles$1.header}">
+				<div class="${styles$1.statusSection}">
+					<div class="${styles$1.indicator} ${styles$1.thinking}"></div>
+					<div class="${styles$1.statusText}">${__privateGet(this, _i18n).t("ui.panel.ready")}</div>
+				</div>
+				<div class="${styles$1.controls}">
+					<button class="${styles$1.controlButton} ${styles$1.expandButton}" title="${__privateGet(this, _i18n).t("ui.panel.expand")}">
+						▼
+					</button>
+					<button class="${styles$1.controlButton} ${styles$1.pauseButton}" title="${__privateGet(this, _i18n).t("ui.panel.pause")}">
+						⏸︎
+					</button>
+					<button class="${styles$1.controlButton} ${styles$1.stopButton}" title="${__privateGet(this, _i18n).t("ui.panel.stop")}">
+						X
+					</button>
+				</div>
+			</div>
+			<div class="${styles$1.inputSectionWrapper} ${styles$1.hidden}">
+				<div class="${styles$1.inputSection}">
+					<input 
+						type="text" 
+						class="${styles$1.taskInput}" 
+						maxlength="200"
+					/>
+				</div>
+			</div>
+		`;
+  document.body.appendChild(wrapper2);
+  return wrapper2;
+}, "#createWrapper");
+setupEventListeners_fn = /* @__PURE__ */ __name(function() {
+  const header2 = this.wrapper.querySelector(`.${styles$1.header}`);
+  header2.addEventListener("click", (e) => {
+    if (e.target.closest(`.${styles$1.controlButton}`)) {
+      return;
+    }
+    __privateMethod(this, _Panel_instances, toggle_fn).call(this);
+  });
+  __privateGet(this, _expandButton).addEventListener("click", (e) => {
+    e.stopPropagation();
+    __privateMethod(this, _Panel_instances, toggle_fn).call(this);
+  });
+  __privateGet(this, _pauseButton).addEventListener("click", (e) => {
+    e.stopPropagation();
+    __privateMethod(this, _Panel_instances, togglePause_fn).call(this);
+  });
+  __privateGet(this, _stopButton).addEventListener("click", (e) => {
+    e.stopPropagation();
+    __privateMethod(this, _Panel_instances, stopAgent_fn).call(this);
+  });
+  __privateGet(this, _taskInput).addEventListener("keydown", (e) => {
+    if (e.isComposing) return;
+    if (e.key === "Enter") {
+      e.preventDefault();
+      __privateMethod(this, _Panel_instances, submitTask_fn).call(this);
+    }
+  });
+  __privateGet(this, _inputSection).addEventListener("click", (e) => {
+    e.stopPropagation();
+  });
+}, "#setupEventListeners");
+toggle_fn = /* @__PURE__ */ __name(function() {
+  if (__privateGet(this, _isExpanded)) {
+    __privateMethod(this, _Panel_instances, collapse_fn).call(this);
+  } else {
+    __privateMethod(this, _Panel_instances, expand_fn).call(this);
+  }
+}, "#toggle");
+expand_fn = /* @__PURE__ */ __name(function() {
+  __privateSet(this, _isExpanded, true);
+  this.wrapper.classList.remove(styles$1.collapsed);
+  this.wrapper.classList.add(styles$1.expanded);
+  __privateGet(this, _expandButton).textContent = "▲";
+}, "#expand");
+collapse_fn = /* @__PURE__ */ __name(function() {
+  __privateSet(this, _isExpanded, false);
+  this.wrapper.classList.remove(styles$1.expanded);
+  this.wrapper.classList.add(styles$1.collapsed);
+  __privateGet(this, _expandButton).textContent = "▼";
+}, "#collapse");
+/**
+ * Start periodic header update loop
+ */
+startHeaderUpdateLoop_fn = /* @__PURE__ */ __name(function() {
+  __privateSet(this, _headerUpdateTimer, setInterval(() => {
+    __privateMethod(this, _Panel_instances, checkAndUpdateHeader_fn).call(this);
+  }, 450));
+}, "#startHeaderUpdateLoop");
+/**
+ * Stop periodic header update loop
+ */
+stopHeaderUpdateLoop_fn = /* @__PURE__ */ __name(function() {
+  if (__privateGet(this, _headerUpdateTimer)) {
+    clearInterval(__privateGet(this, _headerUpdateTimer));
+    __privateSet(this, _headerUpdateTimer, null);
+  }
+}, "#stopHeaderUpdateLoop");
+/**
+ * Check if header needs update and trigger animation if not currently animating
+ */
+checkAndUpdateHeader_fn = /* @__PURE__ */ __name(function() {
+  if (!__privateGet(this, _pendingHeaderText) || __privateGet(this, _isAnimating)) {
+    return;
+  }
+  if (__privateGet(this, _statusText).textContent === __privateGet(this, _pendingHeaderText)) {
+    __privateSet(this, _pendingHeaderText, null);
+    return;
+  }
+  const textToShow = __privateGet(this, _pendingHeaderText);
+  __privateSet(this, _pendingHeaderText, null);
+  __privateMethod(this, _Panel_instances, animateTextChange_fn).call(this, textToShow);
+}, "#checkAndUpdateHeader");
+/**
+ * Animate text change with fade out/in effect
+ */
+animateTextChange_fn = /* @__PURE__ */ __name(function(newText) {
+  __privateSet(this, _isAnimating, true);
+  __privateGet(this, _statusText).classList.add(styles$1.fadeOut);
+  setTimeout(() => {
+    __privateGet(this, _statusText).textContent = newText;
+    __privateGet(this, _statusText).classList.remove(styles$1.fadeOut);
+    __privateGet(this, _statusText).classList.add(styles$1.fadeIn);
+    setTimeout(() => {
+      __privateGet(this, _statusText).classList.remove(styles$1.fadeIn);
+      __privateSet(this, _isAnimating, false);
+    }, 300);
+  }, 150);
+}, "#animateTextChange");
+updateStatusIndicator_fn = /* @__PURE__ */ __name(function(type) {
+  __privateGet(this, _indicator).className = styles$1.indicator;
+  __privateGet(this, _indicator).classList.add(styles$1[type]);
+}, "#updateStatusIndicator");
+updateHistory_fn = /* @__PURE__ */ __name(function() {
+  const steps = __privateGet(this, _state).getAllSteps();
+  __privateGet(this, _historySection).innerHTML = steps.map((step) => __privateMethod(this, _Panel_instances, createHistoryItem_fn).call(this, step)).join("");
+  __privateMethod(this, _Panel_instances, scrollToBottom_fn).call(this);
+}, "#updateHistory");
+scrollToBottom_fn = /* @__PURE__ */ __name(function() {
+  setTimeout(() => {
+    __privateGet(this, _historySection).scrollTop = __privateGet(this, _historySection).scrollHeight;
+  }, 0);
+}, "#scrollToBottom");
+createHistoryItem_fn = /* @__PURE__ */ __name(function(step) {
+  const time = step.timestamp.toLocaleTimeString("zh-CN", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+  let typeClass = "";
+  let statusIcon2 = "";
+  if (step.type === "completed") {
+    if (step.toolName === "done") {
+      const failureKeyword = __privateGet(this, _i18n).t("ui.tools.resultFailure");
+      const errorKeyword = __privateGet(this, _i18n).t("ui.tools.resultError");
+      const isSuccess = !step.toolResult || !step.toolResult.includes(failureKeyword) && !step.toolResult.includes(errorKeyword);
+      typeClass = isSuccess ? styles$1.doneSuccess : styles$1.doneError;
+      statusIcon2 = isSuccess ? "🎉" : "❌";
+    } else {
+      typeClass = styles$1.completed;
+      statusIcon2 = "✅";
+    }
+  } else if (step.type === "error") {
+    typeClass = styles$1.error;
+    statusIcon2 = "❌";
+  } else if (step.type === "tool_executing") {
+    statusIcon2 = "⚙️";
+  } else if (step.type === "output") {
+    typeClass = styles$1.output;
+    statusIcon2 = "🤖";
+  } else if (step.type === "input") {
+    typeClass = styles$1.input;
+    statusIcon2 = "🎯";
+  } else if (step.type === "retry") {
+    typeClass = styles$1.retry;
+    statusIcon2 = "🔄";
+  } else {
+    statusIcon2 = "🧠";
+  }
+  const durationText = step.duration ? ` · ${step.duration}ms` : "";
+  const stepLabel = __privateGet(this, _i18n).t("ui.panel.step", {
+    number: step.stepNumber.toString(),
+    time,
+    duration: durationText || ""
+    // Explicitly pass empty string to replace template
+  });
+  return `
+			<div class="${styles$1.historyItem} ${typeClass}">
+				<div class="${styles$1.historyContent}">
+					<span class="${styles$1.statusIcon}">${statusIcon2}</span>
+					<span>${step.displayText}</span>
+				</div>
+				<div class="${styles$1.historyMeta}">
+					${stepLabel}
+				</div>
+			</div>
+		`;
+}, "#createHistoryItem");
+__name(_Panel, "Panel");
+let Panel = _Panel;
+function hasDarkModeClass() {
+  const DFEAULT_DARK_MODE_CLASSES = ["dark", "dark-mode", "theme-dark", "night", "night-mode"];
+  const htmlElement = document.documentElement;
+  const bodyElement = document.body;
+  for (const className of DFEAULT_DARK_MODE_CLASSES) {
+    if (htmlElement.classList.contains(className) || bodyElement.classList.contains(className)) {
+      return true;
+    }
+  }
+  const darkThemeAttribute = htmlElement.getAttribute("data-theme");
+  if (darkThemeAttribute?.toLowerCase().includes("dark")) {
+    return true;
+  }
+  return false;
+}
+__name(hasDarkModeClass, "hasDarkModeClass");
+function parseRgbColor(colorString) {
+  const rgbMatch = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(colorString);
+  if (!rgbMatch) {
+    return null;
+  }
+  return {
+    r: parseInt(rgbMatch[1]),
+    g: parseInt(rgbMatch[2]),
+    b: parseInt(rgbMatch[3])
+  };
+}
+__name(parseRgbColor, "parseRgbColor");
+function isColorDark(colorString, threshold = 128) {
+  if (!colorString || colorString === "transparent" || colorString.startsWith("rgba(0, 0, 0, 0)")) {
+    return false;
+  }
+  const rgb = parseRgbColor(colorString);
+  if (!rgb) {
+    return false;
+  }
+  const luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b;
+  return luminance < threshold;
+}
+__name(isColorDark, "isColorDark");
+function isBackgroundDark() {
+  const htmlStyle = window.getComputedStyle(document.documentElement);
+  const bodyStyle = window.getComputedStyle(document.body);
+  const htmlBgColor = htmlStyle.backgroundColor;
+  const bodyBgColor = bodyStyle.backgroundColor;
+  if (isColorDark(bodyBgColor)) {
+    return true;
+  } else if (bodyBgColor === "transparent" || bodyBgColor.startsWith("rgba(0, 0, 0, 0)")) {
+    return isColorDark(htmlBgColor);
+  }
+  return false;
+}
+__name(isBackgroundDark, "isBackgroundDark");
+function isPageDark() {
+  if (hasDarkModeClass()) {
+    return true;
+  }
+  if (isBackgroundDark()) {
+    return true;
+  }
+  return false;
+}
+__name(isPageDark, "isPageDark");
+const wrapper = "_wrapper_1oy2s_1";
+const styles = {
+  wrapper
+};
+const cursor = "_cursor_1vrf3_2";
+const cursorBorder = "_cursorBorder_1vrf3_13";
+const cursorFilling = "_cursorFilling_1vrf3_23";
+const cursorRipple = "_cursorRipple_1vrf3_31";
+const clicking = "_clicking_1vrf3_37";
+const cursorStyles = {
+  cursor,
+  cursorBorder,
+  cursorFilling,
+  cursorRipple,
+  clicking
+};
+const _SimulatorMask = class _SimulatorMask {
+  constructor() {
+    __privateAdd(this, _SimulatorMask_instances);
+    __publicField(this, "wrapper", document.createElement("div"));
+    __publicField(this, "motion", new Motion({
+      mode: isPageDark() ? "dark" : "light",
+      styles: {
+        position: "absolute",
+        inset: "0"
+      }
+    }));
+    __privateAdd(this, _cursor, document.createElement("div"));
+    __privateAdd(this, _currentCursorX, 0);
+    __privateAdd(this, _currentCursorY, 0);
+    __privateAdd(this, _targetCursorX, 0);
+    __privateAdd(this, _targetCursorY, 0);
+    this.wrapper.id = "page-agent-runtime_simulator-mask";
+    this.wrapper.className = styles.wrapper;
+    this.wrapper.setAttribute("data-browser-use-ignore", "true");
+    this.wrapper.appendChild(this.motion.element);
+    this.motion.autoResize(this.wrapper);
+    this.wrapper.addEventListener("click", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    this.wrapper.addEventListener("mousedown", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    this.wrapper.addEventListener("mouseup", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    this.wrapper.addEventListener("mousemove", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    this.wrapper.addEventListener("wheel", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    this.wrapper.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    this.wrapper.addEventListener("keyup", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    __privateMethod(this, _SimulatorMask_instances, createCursor_fn).call(this);
+    document.body.appendChild(this.wrapper);
+    __privateMethod(this, _SimulatorMask_instances, moveCursorToTarget_fn).call(this);
+    window.addEventListener("PageAgent::MovePointerTo", (event) => {
+      const { x, y } = event.detail;
+      this.setCursorPosition(x, y);
+    });
+    window.addEventListener("PageAgent::ClickPointer", (event) => {
+      this.triggerClickAnimation();
+    });
+  }
+  setCursorPosition(x, y) {
+    __privateSet(this, _targetCursorX, x);
+    __privateSet(this, _targetCursorY, y);
+  }
+  triggerClickAnimation() {
+    __privateGet(this, _cursor).classList.remove(cursorStyles.clicking);
+    void __privateGet(this, _cursor).offsetHeight;
+    __privateGet(this, _cursor).classList.add(cursorStyles.clicking);
+  }
+  show() {
+    this.motion.start();
+    this.motion.fadeIn();
+    this.wrapper.style.display = "block";
+    __privateSet(this, _currentCursorX, window.innerWidth / 2);
+    __privateSet(this, _currentCursorY, window.innerHeight / 2);
+    __privateSet(this, _targetCursorX, __privateGet(this, _currentCursorX));
+    __privateSet(this, _targetCursorY, __privateGet(this, _currentCursorY));
+    __privateGet(this, _cursor).style.left = `${__privateGet(this, _currentCursorX)}px`;
+    __privateGet(this, _cursor).style.top = `${__privateGet(this, _currentCursorY)}px`;
+  }
+  hide() {
+    this.motion.fadeOut();
+    this.motion.pause();
+    __privateGet(this, _cursor).classList.remove(cursorStyles.clicking);
+    setTimeout(() => {
+      this.wrapper.style.display = "none";
+    }, 800);
+  }
+  dispose() {
+    this.motion.dispose();
+    this.wrapper.remove();
+  }
+};
+_cursor = new WeakMap();
+_currentCursorX = new WeakMap();
+_currentCursorY = new WeakMap();
+_targetCursorX = new WeakMap();
+_targetCursorY = new WeakMap();
+_SimulatorMask_instances = new WeakSet();
+createCursor_fn = /* @__PURE__ */ __name(function() {
+  __privateGet(this, _cursor).className = cursorStyles.cursor;
+  const rippleContainer = document.createElement("div");
+  rippleContainer.className = cursorStyles.cursorRipple;
+  __privateGet(this, _cursor).appendChild(rippleContainer);
+  const fillingLayer = document.createElement("div");
+  fillingLayer.className = cursorStyles.cursorFilling;
+  __privateGet(this, _cursor).appendChild(fillingLayer);
+  const borderLayer = document.createElement("div");
+  borderLayer.className = cursorStyles.cursorBorder;
+  __privateGet(this, _cursor).appendChild(borderLayer);
+  this.wrapper.appendChild(__privateGet(this, _cursor));
+}, "#createCursor");
+moveCursorToTarget_fn = /* @__PURE__ */ __name(function() {
+  const newX = __privateGet(this, _currentCursorX) + (__privateGet(this, _targetCursorX) - __privateGet(this, _currentCursorX)) * 0.2;
+  const newY = __privateGet(this, _currentCursorY) + (__privateGet(this, _targetCursorY) - __privateGet(this, _currentCursorY)) * 0.2;
+  const xDistance = Math.abs(newX - __privateGet(this, _targetCursorX));
+  if (xDistance > 0) {
+    if (xDistance < 2) {
+      __privateSet(this, _currentCursorX, __privateGet(this, _targetCursorX));
+    } else {
+      __privateSet(this, _currentCursorX, newX);
+    }
+    __privateGet(this, _cursor).style.left = `${__privateGet(this, _currentCursorX)}px`;
+  }
+  const yDistance = Math.abs(newY - __privateGet(this, _targetCursorY));
+  if (yDistance > 0) {
+    if (yDistance < 2) {
+      __privateSet(this, _currentCursorY, __privateGet(this, _targetCursorY));
+    } else {
+      __privateSet(this, _currentCursorY, newY);
+    }
+    __privateGet(this, _cursor).style.top = `${__privateGet(this, _currentCursorY)}px`;
+  }
+  requestAnimationFrame(() => __privateMethod(this, _SimulatorMask_instances, moveCursorToTarget_fn).call(this));
+}, "#moveCursorToTarget");
+__name(_SimulatorMask, "SimulatorMask");
+let SimulatorMask = _SimulatorMask;
+export {
+  I18n,
+  Panel,
+  SimulatorMask,
+  UIState
+};
+//# sourceMappingURL=page-agent-ui.js.map