@stv/page-test 1.0.0

package/dist/esm/page-agent.js

@@ -0,0 +1,1229 @@
+(function() {	try {		if (typeof document != "undefined") {			var elementStyle = document.createElement("style");			elementStyle.appendChild(document.createTextNode("/* Recording-specific styles for RecordingPanel */\n/* These styles are extracted from @page-agent/ui/panel/Panel.module.css */\n\n._recordingButton_1yqua_4 {\n	position: relative;\n	transition: all 0.2s ease;\n}\n\n/* Placeholder - moved below controlButton definition for proper cascade */\n\n._eventCounter_1yqua_11 {\n	font-size: 10px;\n	color: rgba(255, 255, 255, 0.7);\n	min-width: 16px;\n	text-align: center;\n	padding: 0 4px;\n}\n\n@keyframes _recordingPulse_1yqua_1 {\n	0%,\n	100% {\n		opacity: 1;\n		transform: scale(1);\n	}\n	50% {\n		opacity: 0.7;\n		transform: scale(1.1);\n	}\n}\n\n._exportOverlay_1yqua_31 {\n	position: fixed;\n	inset: 0;\n	background: rgba(0, 0, 0, 0.5);\n	backdrop-filter: blur(4px);\n	z-index: 2147483647;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	animation: _overlayFadeIn_1yqua_1 0.2s ease;\n}\n\n@keyframes _overlayFadeIn_1yqua_1 {\n	from {\n		opacity: 0;\n	}\n	to {\n		opacity: 1;\n	}\n}\n\n._exportDialog_1yqua_52 {\n	background: rgba(30, 30, 30, 0.95);\n	backdrop-filter: blur(20px);\n	border: 1px solid rgba(255, 255, 255, 0.1);\n	border-radius: 16px;\n	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n	max-width: 480px;\n	width: 90%;\n	animation: _dialogSlideIn_1yqua_1 0.3s ease;\n}\n\n@keyframes _dialogSlideIn_1yqua_1 {\n	from {\n		opacity: 0;\n		transform: translateY(20px) scale(0.95);\n	}\n	to {\n		opacity: 1;\n		transform: translateY(0) scale(1);\n	}\n}\n\n._exportDialogHeader_1yqua_74 {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 20px 24px;\n	border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._exportDialogHeader_1yqua_74 h3 {\n	margin: 0;\n	font-size: 18px;\n	font-weight: 600;\n	color: white;\n}\n\n._closeButton_1yqua_89 {\n	background: none;\n	border: none;\n	color: rgba(255, 255, 255, 0.6);\n	font-size: 24px;\n	cursor: pointer;\n	padding: 0;\n	width: 32px;\n	height: 32px;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	border-radius: 8px;\n	transition: all 0.2s;\n}\n\n._closeButton_1yqua_89:hover {\n	background: rgba(255, 255, 255, 0.1);\n	color: white;\n}\n\n._exportDialogContent_1yqua_110 {\n	padding: 24px;\n}\n\n._exportDialogContent_1yqua_110 p {\n	margin: 0 0 20px 0;\n	color: rgba(255, 255, 255, 0.8);\n	font-size: 14px;\n}\n\n._exportOptions_1yqua_120 {\n	display: grid;\n	grid-template-columns: repeat(3, 1fr);\n	gap: 12px;\n}\n\n._exportOptionButton_1yqua_126 {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	gap: 12px;\n	padding: 20px 16px;\n	background: rgba(255, 255, 255, 0.05);\n	border: 2px solid rgba(255, 255, 255, 0.1);\n	border-radius: 12px;\n	cursor: pointer;\n	transition: all 0.2s;\n	color: white;\n	font-family: inherit;\n}\n\n._exportOptionButton_1yqua_126:hover {\n	background: rgba(255, 255, 255, 0.1);\n	border-color: rgba(255, 255, 255, 0.2);\n	transform: translateY(-2px);\n}\n\n._exportOptionIcon_1yqua_147 {\n	font-size: 28px;\n	opacity: 0.9;\n}\n\n._exportOptionLabel_1yqua_152 {\n	font-size: 13px;\n	font-weight: 500;\n	color: white;\n}\n\n/* Need to re-export controlButton and controls styles from Panel for the recording button to work */\n._controlButton_1yqua_159 {\n	background: rgba(255, 255, 255, 0.1);\n	border: none;\n	color: white;\n	cursor: pointer;\n	padding: 8px;\n	border-radius: 8px;\n	transition: all 0.2s;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	min-width: 36px;\n	height: 36px;\n	font-size: 14px;\n}\n\n._controlButton_1yqua_159:hover {\n	background: rgba(255, 255, 255, 0.2);\n}\n\n._controls_1yqua_179 {\n	display: flex;\n	gap: 8px;\n	align-items: center;\n}\n\n/* Recording state - use !important to ensure priority over base styles */\n._recordingButton_1yqua_4._recording_1yqua_4 {\n	color: rgb(34, 197, 94) !important;\n	animation: _recordingPulse_1yqua_1 1.5s ease-in-out infinite;\n}\n\n/* ========== Phase 4: Task Cards ========== */\n\n._taskCard_1yqua_193 {\n	background: rgba(30, 41, 59, 0.8);\n	backdrop-filter: blur(12px);\n	border: 1px solid rgba(148, 163, 184, 0.1);\n	border-radius: 12px;\n	padding: 16px;\n	margin-bottom: 12px;\n	transition: all 0.2s ease;\n}\n\n._taskCard_1yqua_193:hover {\n	border-color: rgba(59, 130, 246, 0.3);\n	transform: translateY(-2px);\n	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);\n}\n\n._taskCardHeader_1yqua_209 {\n	display: flex;\n	align-items: center;\n	gap: 12px;\n	margin-bottom: 12px;\n}\n\n._taskIcon_1yqua_216 {\n	font-size: 24px;\n}\n\n._taskName_1yqua_220 {\n	flex: 1;\n	margin: 0;\n	font-size: 16px;\n	font-weight: 600;\n	color: white;\n}\n\n._confidenceBadge_1yqua_228 {\n	background: linear-gradient(135deg, #10b981, #059669);\n	color: white;\n	padding: 2px 8px;\n	border-radius: 12px;\n	font-size: 12px;\n	font-weight: 600;\n}\n\n._taskStats_1yqua_237 {\n	display: flex;\n	gap: 16px;\n	margin-bottom: 12px;\n	font-size: 12px;\n	color: rgba(255, 255, 255, 0.7);\n}\n\n._taskParameters_1yqua_245 {\n	margin-bottom: 16px;\n	padding: 12px;\n	background: rgba(0, 0, 0, 0.2);\n	border-radius: 8px;\n}\n\n._taskParameters_1yqua_245 h4 {\n	margin: 0 0 8px 0;\n	font-size: 12px;\n	color: rgba(255, 255, 255, 0.8);\n}\n\n._parameterItem_1yqua_258 {\n	display: flex;\n	gap: 8px;\n	font-size: 12px;\n	color: rgba(255, 255, 255, 0.7);\n	margin-bottom: 4px;\n}\n\n._paramKey_1yqua_266 {\n	font-weight: 600;\n	color: rgba(255, 255, 255, 0.9);\n}\n\n._paramValue_1yqua_271 {\n	color: rgba(255, 255, 255, 0.7);\n}\n\n._taskActions_1yqua_275 {\n	display: flex;\n	gap: 8px;\n}\n\n._actionButton_1yqua_280 {\n	flex: 1;\n	padding: 8px 16px;\n	border-radius: 6px;\n	font-size: 13px;\n	font-weight: 500;\n	cursor: pointer;\n	transition: all 0.2s;\n}\n\n._btnPrimary_1yqua_290 {\n	background: linear-gradient(135deg, #3b82f6, #2563eb);\n	color: white;\n	border: none;\n}\n\n._btnPrimary_1yqua_290:hover {\n	background: linear-gradient(135deg, #2563eb, #1d4ed8);\n	transform: translateY(-1px);\n}\n\n._btnSecondary_1yqua_301 {\n	background: rgba(255, 255, 255, 0.1);\n	color: white;\n	border: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n._btnSecondary_1yqua_301:hover {\n	background: rgba(255, 255, 255, 0.2);\n}\n\n/* ========== Phase 4: Task History ========== */\n\n._historyHeader_1yqua_313 {\n	display: flex;\n	align-items: center;\n	gap: 12px;\n	margin-bottom: 16px;\n}\n\n._historyHeader_1yqua_313 h3 {\n	flex: 1;\n	margin: 0;\n	font-size: 18px;\n	color: white;\n}\n\n._searchInput_1yqua_327 {\n	flex: 1;\n	padding: 8px 12px;\n	background: rgba(255, 255, 255, 0.1);\n	border: 1px solid rgba(255, 255, 255, 0.2);\n	border-radius: 8px;\n	color: white;\n	font-size: 14px;\n}\n\n._searchInput_1yqua_327::placeholder {\n	color: rgba(255, 255, 255, 0.5);\n}\n\n._filterTabs_1yqua_341 {\n	display: flex;\n	gap: 8px;\n	margin-bottom: 16px;\n}\n\n._filterTab_1yqua_341 {\n	padding: 6px 12px;\n	background: rgba(255, 255, 255, 0.1);\n	border: 1px solid rgba(255, 255, 255, 0.2);\n	border-radius: 6px;\n	color: rgba(255, 255, 255, 0.7);\n	font-size: 12px;\n	cursor: pointer;\n	transition: all 0.2s;\n}\n\n._filterTab_1yqua_341:hover {\n	background: rgba(255, 255, 255, 0.2);\n}\n\n._filterTab_1yqua_341._active_1yqua_362 {\n	background: rgba(59, 130, 246, 0.3);\n	border-color: rgba(59, 130, 246, 0.5);\n	color: white;\n}\n\n._taskList_1yqua_368 {\n	display: flex;\n	flex-direction: column;\n	gap: 12px;\n	max-height: 400px;\n	overflow-y: auto;\n}\n\n._emptyState_1yqua_376 {\n	text-align: center;\n	padding: 32px;\n	color: rgba(255, 255, 255, 0.5);\n	font-size: 14px;\n}\n\n/* ========== Phase 4: Replay Panel ========== */\n\n._replayPanel_1yqua_385 {\n	background: rgba(30, 41, 59, 0.95);\n	backdrop-filter: blur(20px);\n	border: 1px solid rgba(255, 255, 255, 0.1);\n	border-radius: 16px;\n	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n	max-width: 600px;\n	width: 90%;\n	max-height: 80vh;\n	overflow-y: auto;\n}\n\n._replayHeader_1yqua_397 {\n	display: flex;\n	align-items: center;\n	gap: 12px;\n	padding: 20px;\n	border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._replayIcon_1yqua_405 {\n	font-size: 24px;\n}\n\n._replayHeader_1yqua_397 h3 {\n	flex: 1;\n	margin: 0;\n	font-size: 18px;\n	color: white;\n}\n\n._replayStatus_1yqua_416 {\n	font-size: 12px;\n	color: rgba(255, 255, 255, 0.7);\n}\n\n._replayStatus_1yqua_416._success_1yqua_421 {\n	color: #10b981;\n}\n\n._replayStatus_1yqua_416._failed_1yqua_425 {\n	color: #ef4444;\n}\n\n/* Event List */\n\n._eventList_1yqua_431 {\n	padding: 16px;\n	max-height: 300px;\n	overflow-y: auto;\n}\n\n._eventItem_1yqua_437 {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n	padding: 8px;\n	border-radius: 6px;\n	margin-bottom: 4px;\n	font-size: 13px;\n	color: rgba(255, 255, 255, 0.8);\n	transition: all 0.2s;\n}\n\n._eventItem_1yqua_437._statusPending_1yqua_449 {\n	background: rgba(255, 255, 255, 0.05);\n}\n\n._eventItem_1yqua_437._statusRunning_1yqua_453 {\n	background: rgba(59, 130, 246, 0.2);\n	animation: _pulse_1yqua_1 1s infinite;\n}\n\n._eventItem_1yqua_437._statusSuccess_1yqua_458 {\n	background: rgba(16, 185, 129, 0.2);\n}\n\n._eventItem_1yqua_437._statusFailed_1yqua_462 {\n	background: rgba(239, 68, 68, 0.2);\n}\n\n._eventStatusIcon_1yqua_466 {\n	font-size: 16px;\n	width: 20px;\n	text-align: center;\n}\n\n._eventDescription_1yqua_472 {\n	flex: 1;\n}\n\n._eventDuration_1yqua_476 {\n	font-size: 11px;\n	color: rgba(255, 255, 255, 0.5);\n}\n\n@keyframes _pulse_1yqua_1 {\n	0%,\n	100% {\n		opacity: 1;\n	}\n	50% {\n		opacity: 0.8;\n	}\n}\n\n/* ========== Phase 4: Error Handler ========== */\n\n._errorDialog_1yqua_493 {\n	background: rgba(30, 30, 30, 0.95);\n	backdrop-filter: blur(20px);\n	border: 1px solid rgba(239, 68, 68, 0.3);\n	border-radius: 16px;\n	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n	max-width: 480px;\n	width: 90%;\n}\n\n._errorHeader_1yqua_503 {\n	display: flex;\n	align-items: center;\n	gap: 12px;\n	padding: 20px;\n	border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._errorIcon_1yqua_511 {\n	font-size: 24px;\n}\n\n._errorHeader_1yqua_503 h3 {\n	flex: 1;\n	margin: 0;\n	font-size: 18px;\n	color: white;\n}\n\n._errorDetails_1yqua_522 {\n	padding: 20px;\n	color: rgba(255, 255, 255, 0.8);\n	font-size: 14px;\n}\n\n._errorDetails_1yqua_522 p {\n	margin: 0 0 12px 0;\n}\n\n._errorDetails_1yqua_522 strong {\n	color: white;\n}\n\n._errorCauses_1yqua_536 {\n	padding: 0 20px 20px;\n}\n\n._errorCauses_1yqua_536 h4 {\n	margin: 0 0 12px 0;\n	font-size: 14px;\n	color: rgba(255, 255, 255, 0.8);\n}\n\n._errorCauses_1yqua_536 ul {\n	margin: 0;\n	padding-left: 20px;\n	color: rgba(255, 255, 255, 0.7);\n	font-size: 13px;\n}\n\n._errorCauses_1yqua_536 li {\n	margin-bottom: 6px;\n}\n\n._errorActions_1yqua_557 {\n	display: flex;\n	gap: 8px;\n	padding: 20px;\n	border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n/* ========== Phase 4: Replay Report ========== */\n\n._replayReport_1yqua_566 {\n	background: rgba(30, 30, 30, 0.95);\n	backdrop-filter: blur(20px);\n	border: 1px solid rgba(255, 255, 255, 0.1);\n	border-radius: 16px;\n	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n	max-width: 480px;\n	width: 90%;\n}\n\n._replayReport_1yqua_566._success_1yqua_421 {\n	border-color: rgba(16, 185, 129, 0.3);\n}\n\n._replayReport_1yqua_566._failure_1yqua_580 {\n	border-color: rgba(239, 68, 68, 0.3);\n}\n\n._reportHeader_1yqua_584 {\n	display: flex;\n	align-items: center;\n	gap: 12px;\n	padding: 20px;\n	border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._reportIcon_1yqua_592 {\n	font-size: 24px;\n}\n\n._reportHeader_1yqua_584 h3 {\n	flex: 1;\n	margin: 0;\n	font-size: 18px;\n	color: white;\n}\n\n._reportStats_1yqua_603 {\n	display: flex;\n	justify-content: space-around;\n	padding: 20px;\n	border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._statItem_1yqua_610 {\n	text-align: center;\n}\n\n._statLabel_1yqua_614 {\n	display: block;\n	font-size: 12px;\n	color: rgba(255, 255, 255, 0.7);\n	margin-bottom: 4px;\n}\n\n._statValue_1yqua_621 {\n	display: block;\n	font-size: 18px;\n	font-weight: 600;\n	color: white;\n}\n\n._reportDetails_1yqua_628 {\n	padding: 20px;\n	max-height: 200px;\n	overflow-y: auto;\n}\n\n._reportDetails_1yqua_628 h4 {\n	margin: 0 0 12px 0;\n	font-size: 14px;\n	color: rgba(255, 255, 255, 0.8);\n}\n\n._eventResult_1yqua_640 {\n	padding: 8px;\n	margin-bottom: 4px;\n	border-radius: 6px;\n	font-size: 12px;\n	color: rgba(255, 255, 255, 0.8);\n}\n\n._eventResult_1yqua_640._statusSuccess_1yqua_458 {\n	background: rgba(16, 185, 129, 0.2);\n}\n\n._eventResult_1yqua_640._statusFailed_1yqua_462 {\n	background: rgba(239, 68, 68, 0.2);\n}\n\n._reportActions_1yqua_656 {\n	display: flex;\n	gap: 8px;\n	padding: 20px;\n	border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n/* ========== Phase 4: Loading States ========== */\n\n._loadingContent_1yqua_665 {\n	text-align: center;\n	padding: 32px;\n	color: white;\n}\n\n._loadingSpinner_1yqua_671 {\n	width: 40px;\n	height: 40px;\n	margin: 0 auto 16px;\n	border: 3px solid rgba(255, 255, 255, 0.2);\n	border-top-color: white;\n	border-radius: 50%;\n	animation: _spin_1yqua_1 1s linear infinite;\n}\n\n@keyframes _spin_1yqua_1 {\n	to {\n		transform: rotate(360deg);\n	}\n}\n\n._loadingContent_1yqua_665 p {\n	margin: 0;\n	font-size: 14px;\n	color: rgba(255, 255, 255, 0.8);\n}\n\n/* ========== Phase 4: Task Card Dialog ========== */\n\n._taskCardDialog_1yqua_695 {\n	padding: 20px;\n}\n\n/* ========== Settings ========== */\n\n._settingsOverlay_1yqua_701 {\n	position: fixed;\n	inset: 0;\n	background: rgba(0, 0, 0, 0.5);\n	backdrop-filter: blur(4px);\n	z-index: 2147483647;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	animation: _overlayFadeIn_1yqua_1 0.2s ease;\n}\n\n._settingsDialog_1yqua_713 {\n	background: rgba(30, 30, 30, 0.95);\n	backdrop-filter: blur(20px);\n	border: 1px solid rgba(255, 255, 255, 0.1);\n	border-radius: 16px;\n	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n	max-width: 480px;\n	width: 90%;\n	animation: _dialogSlideIn_1yqua_1 0.3s ease;\n}\n\n._settingsDialogHeader_1yqua_724 {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 20px 24px;\n	border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._settingsDialogHeader_1yqua_724 h3 {\n	margin: 0;\n	font-size: 18px;\n	font-weight: 600;\n	color: white;\n}\n\n._settingsDialogContent_1yqua_739 {\n	padding: 24px;\n}\n\n._settingsField_1yqua_743 {\n	margin-bottom: 20px;\n}\n\n._settingsLabel_1yqua_747 {\n	display: block;\n	margin-bottom: 8px;\n	font-size: 13px;\n	font-weight: 500;\n	color: rgba(255, 255, 255, 0.9);\n}\n\n._settingsInput_1yqua_755 {\n	width: 100%;\n	padding: 10px 12px;\n	background: rgba(255, 255, 255, 0.05);\n	border: 1px solid rgba(255, 255, 255, 0.15);\n	border-radius: 8px;\n	color: white;\n	font-size: 14px;\n	font-family: inherit;\n	box-sizing: border-box;\n	transition: all 0.2s;\n}\n\n._settingsInput_1yqua_755::placeholder {\n	color: rgba(255, 255, 255, 0.4);\n}\n\n._settingsInput_1yqua_755:focus {\n	outline: none;\n	background: rgba(255, 255, 255, 0.08);\n	border-color: rgba(59, 130, 246, 0.5);\n}\n\n._settingsInput_1yqua_755[type='password'] {\n	-webkit-text-security: disc;\n}"));			document.head.appendChild(elementStyle);		}	} catch (e) {		console.error("vite-plugin-css-injected-by-js", e);	}})();
+(function() {	try {		if (typeof document != "undefined") {			var elementStyle = document.createElement("style");			elementStyle.appendChild(document.createTextNode("/* Recording-specific styles for RecordingPanel */\n/* These styles are extracted from @page-agent/ui/panel/Panel.module.css */\n\n._recordingButton_1yqua_4 {\n	position: relative;\n	transition: all 0.2s ease;\n}\n\n/* Placeholder - moved below controlButton definition for proper cascade */\n\n._eventCounter_1yqua_11 {\n	font-size: 10px;\n	color: rgba(255, 255, 255, 0.7);\n	min-width: 16px;\n	text-align: center;\n	padding: 0 4px;\n}\n\n@keyframes _recordingPulse_1yqua_1 {\n	0%,\n	100% {\n		opacity: 1;\n		transform: scale(1);\n	}\n	50% {\n		opacity: 0.7;\n		transform: scale(1.1);\n	}\n}\n\n._exportOverlay_1yqua_31 {\n	position: fixed;\n	inset: 0;\n	background: rgba(0, 0, 0, 0.5);\n	backdrop-filter: blur(4px);\n	z-index: 2147483647;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	animation: _overlayFadeIn_1yqua_1 0.2s ease;\n}\n\n@keyframes _overlayFadeIn_1yqua_1 {\n	from {\n		opacity: 0;\n	}\n	to {\n		opacity: 1;\n	}\n}\n\n._exportDialog_1yqua_52 {\n	background: rgba(30, 30, 30, 0.95);\n	backdrop-filter: blur(20px);\n	border: 1px solid rgba(255, 255, 255, 0.1);\n	border-radius: 16px;\n	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n	max-width: 480px;\n	width: 90%;\n	animation: _dialogSlideIn_1yqua_1 0.3s ease;\n}\n\n@keyframes _dialogSlideIn_1yqua_1 {\n	from {\n		opacity: 0;\n		transform: translateY(20px) scale(0.95);\n	}\n	to {\n		opacity: 1;\n		transform: translateY(0) scale(1);\n	}\n}\n\n._exportDialogHeader_1yqua_74 {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 20px 24px;\n	border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._exportDialogHeader_1yqua_74 h3 {\n	margin: 0;\n	font-size: 18px;\n	font-weight: 600;\n	color: white;\n}\n\n._closeButton_1yqua_89 {\n	background: none;\n	border: none;\n	color: rgba(255, 255, 255, 0.6);\n	font-size: 24px;\n	cursor: pointer;\n	padding: 0;\n	width: 32px;\n	height: 32px;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	border-radius: 8px;\n	transition: all 0.2s;\n}\n\n._closeButton_1yqua_89:hover {\n	background: rgba(255, 255, 255, 0.1);\n	color: white;\n}\n\n._exportDialogContent_1yqua_110 {\n	padding: 24px;\n}\n\n._exportDialogContent_1yqua_110 p {\n	margin: 0 0 20px 0;\n	color: rgba(255, 255, 255, 0.8);\n	font-size: 14px;\n}\n\n._exportOptions_1yqua_120 {\n	display: grid;\n	grid-template-columns: repeat(3, 1fr);\n	gap: 12px;\n}\n\n._exportOptionButton_1yqua_126 {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	gap: 12px;\n	padding: 20px 16px;\n	background: rgba(255, 255, 255, 0.05);\n	border: 2px solid rgba(255, 255, 255, 0.1);\n	border-radius: 12px;\n	cursor: pointer;\n	transition: all 0.2s;\n	color: white;\n	font-family: inherit;\n}\n\n._exportOptionButton_1yqua_126:hover {\n	background: rgba(255, 255, 255, 0.1);\n	border-color: rgba(255, 255, 255, 0.2);\n	transform: translateY(-2px);\n}\n\n._exportOptionIcon_1yqua_147 {\n	font-size: 28px;\n	opacity: 0.9;\n}\n\n._exportOptionLabel_1yqua_152 {\n	font-size: 13px;\n	font-weight: 500;\n	color: white;\n}\n\n/* Need to re-export controlButton and controls styles from Panel for the recording button to work */\n._controlButton_1yqua_159 {\n	background: rgba(255, 255, 255, 0.1);\n	border: none;\n	color: white;\n	cursor: pointer;\n	padding: 8px;\n	border-radius: 8px;\n	transition: all 0.2s;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	min-width: 36px;\n	height: 36px;\n	font-size: 14px;\n}\n\n._controlButton_1yqua_159:hover {\n	background: rgba(255, 255, 255, 0.2);\n}\n\n._controls_1yqua_179 {\n	display: flex;\n	gap: 8px;\n	align-items: center;\n}\n\n/* Recording state - use !important to ensure priority over base styles */\n._recordingButton_1yqua_4._recording_1yqua_4 {\n	color: rgb(34, 197, 94) !important;\n	animation: _recordingPulse_1yqua_1 1.5s ease-in-out infinite;\n}\n\n/* ========== Phase 4: Task Cards ========== */\n\n._taskCard_1yqua_193 {\n	background: rgba(30, 41, 59, 0.8);\n	backdrop-filter: blur(12px);\n	border: 1px solid rgba(148, 163, 184, 0.1);\n	border-radius: 12px;\n	padding: 16px;\n	margin-bottom: 12px;\n	transition: all 0.2s ease;\n}\n\n._taskCard_1yqua_193:hover {\n	border-color: rgba(59, 130, 246, 0.3);\n	transform: translateY(-2px);\n	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);\n}\n\n._taskCardHeader_1yqua_209 {\n	display: flex;\n	align-items: center;\n	gap: 12px;\n	margin-bottom: 12px;\n}\n\n._taskIcon_1yqua_216 {\n	font-size: 24px;\n}\n\n._taskName_1yqua_220 {\n	flex: 1;\n	margin: 0;\n	font-size: 16px;\n	font-weight: 600;\n	color: white;\n}\n\n._confidenceBadge_1yqua_228 {\n	background: linear-gradient(135deg, #10b981, #059669);\n	color: white;\n	padding: 2px 8px;\n	border-radius: 12px;\n	font-size: 12px;\n	font-weight: 600;\n}\n\n._taskStats_1yqua_237 {\n	display: flex;\n	gap: 16px;\n	margin-bottom: 12px;\n	font-size: 12px;\n	color: rgba(255, 255, 255, 0.7);\n}\n\n._taskParameters_1yqua_245 {\n	margin-bottom: 16px;\n	padding: 12px;\n	background: rgba(0, 0, 0, 0.2);\n	border-radius: 8px;\n}\n\n._taskParameters_1yqua_245 h4 {\n	margin: 0 0 8px 0;\n	font-size: 12px;\n	color: rgba(255, 255, 255, 0.8);\n}\n\n._parameterItem_1yqua_258 {\n	display: flex;\n	gap: 8px;\n	font-size: 12px;\n	color: rgba(255, 255, 255, 0.7);\n	margin-bottom: 4px;\n}\n\n._paramKey_1yqua_266 {\n	font-weight: 600;\n	color: rgba(255, 255, 255, 0.9);\n}\n\n._paramValue_1yqua_271 {\n	color: rgba(255, 255, 255, 0.7);\n}\n\n._taskActions_1yqua_275 {\n	display: flex;\n	gap: 8px;\n}\n\n._actionButton_1yqua_280 {\n	flex: 1;\n	padding: 8px 16px;\n	border-radius: 6px;\n	font-size: 13px;\n	font-weight: 500;\n	cursor: pointer;\n	transition: all 0.2s;\n}\n\n._btnPrimary_1yqua_290 {\n	background: linear-gradient(135deg, #3b82f6, #2563eb);\n	color: white;\n	border: none;\n}\n\n._btnPrimary_1yqua_290:hover {\n	background: linear-gradient(135deg, #2563eb, #1d4ed8);\n	transform: translateY(-1px);\n}\n\n._btnSecondary_1yqua_301 {\n	background: rgba(255, 255, 255, 0.1);\n	color: white;\n	border: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n._btnSecondary_1yqua_301:hover {\n	background: rgba(255, 255, 255, 0.2);\n}\n\n/* ========== Phase 4: Task History ========== */\n\n._historyHeader_1yqua_313 {\n	display: flex;\n	align-items: center;\n	gap: 12px;\n	margin-bottom: 16px;\n}\n\n._historyHeader_1yqua_313 h3 {\n	flex: 1;\n	margin: 0;\n	font-size: 18px;\n	color: white;\n}\n\n._searchInput_1yqua_327 {\n	flex: 1;\n	padding: 8px 12px;\n	background: rgba(255, 255, 255, 0.1);\n	border: 1px solid rgba(255, 255, 255, 0.2);\n	border-radius: 8px;\n	color: white;\n	font-size: 14px;\n}\n\n._searchInput_1yqua_327::placeholder {\n	color: rgba(255, 255, 255, 0.5);\n}\n\n._filterTabs_1yqua_341 {\n	display: flex;\n	gap: 8px;\n	margin-bottom: 16px;\n}\n\n._filterTab_1yqua_341 {\n	padding: 6px 12px;\n	background: rgba(255, 255, 255, 0.1);\n	border: 1px solid rgba(255, 255, 255, 0.2);\n	border-radius: 6px;\n	color: rgba(255, 255, 255, 0.7);\n	font-size: 12px;\n	cursor: pointer;\n	transition: all 0.2s;\n}\n\n._filterTab_1yqua_341:hover {\n	background: rgba(255, 255, 255, 0.2);\n}\n\n._filterTab_1yqua_341._active_1yqua_362 {\n	background: rgba(59, 130, 246, 0.3);\n	border-color: rgba(59, 130, 246, 0.5);\n	color: white;\n}\n\n._taskList_1yqua_368 {\n	display: flex;\n	flex-direction: column;\n	gap: 12px;\n	max-height: 400px;\n	overflow-y: auto;\n}\n\n._emptyState_1yqua_376 {\n	text-align: center;\n	padding: 32px;\n	color: rgba(255, 255, 255, 0.5);\n	font-size: 14px;\n}\n\n/* ========== Phase 4: Replay Panel ========== */\n\n._replayPanel_1yqua_385 {\n	background: rgba(30, 41, 59, 0.95);\n	backdrop-filter: blur(20px);\n	border: 1px solid rgba(255, 255, 255, 0.1);\n	border-radius: 16px;\n	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n	max-width: 600px;\n	width: 90%;\n	max-height: 80vh;\n	overflow-y: auto;\n}\n\n._replayHeader_1yqua_397 {\n	display: flex;\n	align-items: center;\n	gap: 12px;\n	padding: 20px;\n	border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._replayIcon_1yqua_405 {\n	font-size: 24px;\n}\n\n._replayHeader_1yqua_397 h3 {\n	flex: 1;\n	margin: 0;\n	font-size: 18px;\n	color: white;\n}\n\n._replayStatus_1yqua_416 {\n	font-size: 12px;\n	color: rgba(255, 255, 255, 0.7);\n}\n\n._replayStatus_1yqua_416._success_1yqua_421 {\n	color: #10b981;\n}\n\n._replayStatus_1yqua_416._failed_1yqua_425 {\n	color: #ef4444;\n}\n\n/* Event List */\n\n._eventList_1yqua_431 {\n	padding: 16px;\n	max-height: 300px;\n	overflow-y: auto;\n}\n\n._eventItem_1yqua_437 {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n	padding: 8px;\n	border-radius: 6px;\n	margin-bottom: 4px;\n	font-size: 13px;\n	color: rgba(255, 255, 255, 0.8);\n	transition: all 0.2s;\n}\n\n._eventItem_1yqua_437._statusPending_1yqua_449 {\n	background: rgba(255, 255, 255, 0.05);\n}\n\n._eventItem_1yqua_437._statusRunning_1yqua_453 {\n	background: rgba(59, 130, 246, 0.2);\n	animation: _pulse_1yqua_1 1s infinite;\n}\n\n._eventItem_1yqua_437._statusSuccess_1yqua_458 {\n	background: rgba(16, 185, 129, 0.2);\n}\n\n._eventItem_1yqua_437._statusFailed_1yqua_462 {\n	background: rgba(239, 68, 68, 0.2);\n}\n\n._eventStatusIcon_1yqua_466 {\n	font-size: 16px;\n	width: 20px;\n	text-align: center;\n}\n\n._eventDescription_1yqua_472 {\n	flex: 1;\n}\n\n._eventDuration_1yqua_476 {\n	font-size: 11px;\n	color: rgba(255, 255, 255, 0.5);\n}\n\n@keyframes _pulse_1yqua_1 {\n	0%,\n	100% {\n		opacity: 1;\n	}\n	50% {\n		opacity: 0.8;\n	}\n}\n\n/* ========== Phase 4: Error Handler ========== */\n\n._errorDialog_1yqua_493 {\n	background: rgba(30, 30, 30, 0.95);\n	backdrop-filter: blur(20px);\n	border: 1px solid rgba(239, 68, 68, 0.3);\n	border-radius: 16px;\n	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n	max-width: 480px;\n	width: 90%;\n}\n\n._errorHeader_1yqua_503 {\n	display: flex;\n	align-items: center;\n	gap: 12px;\n	padding: 20px;\n	border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._errorIcon_1yqua_511 {\n	font-size: 24px;\n}\n\n._errorHeader_1yqua_503 h3 {\n	flex: 1;\n	margin: 0;\n	font-size: 18px;\n	color: white;\n}\n\n._errorDetails_1yqua_522 {\n	padding: 20px;\n	color: rgba(255, 255, 255, 0.8);\n	font-size: 14px;\n}\n\n._errorDetails_1yqua_522 p {\n	margin: 0 0 12px 0;\n}\n\n._errorDetails_1yqua_522 strong {\n	color: white;\n}\n\n._errorCauses_1yqua_536 {\n	padding: 0 20px 20px;\n}\n\n._errorCauses_1yqua_536 h4 {\n	margin: 0 0 12px 0;\n	font-size: 14px;\n	color: rgba(255, 255, 255, 0.8);\n}\n\n._errorCauses_1yqua_536 ul {\n	margin: 0;\n	padding-left: 20px;\n	color: rgba(255, 255, 255, 0.7);\n	font-size: 13px;\n}\n\n._errorCauses_1yqua_536 li {\n	margin-bottom: 6px;\n}\n\n._errorActions_1yqua_557 {\n	display: flex;\n	gap: 8px;\n	padding: 20px;\n	border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n/* ========== Phase 4: Replay Report ========== */\n\n._replayReport_1yqua_566 {\n	background: rgba(30, 30, 30, 0.95);\n	backdrop-filter: blur(20px);\n	border: 1px solid rgba(255, 255, 255, 0.1);\n	border-radius: 16px;\n	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n	max-width: 480px;\n	width: 90%;\n}\n\n._replayReport_1yqua_566._success_1yqua_421 {\n	border-color: rgba(16, 185, 129, 0.3);\n}\n\n._replayReport_1yqua_566._failure_1yqua_580 {\n	border-color: rgba(239, 68, 68, 0.3);\n}\n\n._reportHeader_1yqua_584 {\n	display: flex;\n	align-items: center;\n	gap: 12px;\n	padding: 20px;\n	border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._reportIcon_1yqua_592 {\n	font-size: 24px;\n}\n\n._reportHeader_1yqua_584 h3 {\n	flex: 1;\n	margin: 0;\n	font-size: 18px;\n	color: white;\n}\n\n._reportStats_1yqua_603 {\n	display: flex;\n	justify-content: space-around;\n	padding: 20px;\n	border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._statItem_1yqua_610 {\n	text-align: center;\n}\n\n._statLabel_1yqua_614 {\n	display: block;\n	font-size: 12px;\n	color: rgba(255, 255, 255, 0.7);\n	margin-bottom: 4px;\n}\n\n._statValue_1yqua_621 {\n	display: block;\n	font-size: 18px;\n	font-weight: 600;\n	color: white;\n}\n\n._reportDetails_1yqua_628 {\n	padding: 20px;\n	max-height: 200px;\n	overflow-y: auto;\n}\n\n._reportDetails_1yqua_628 h4 {\n	margin: 0 0 12px 0;\n	font-size: 14px;\n	color: rgba(255, 255, 255, 0.8);\n}\n\n._eventResult_1yqua_640 {\n	padding: 8px;\n	margin-bottom: 4px;\n	border-radius: 6px;\n	font-size: 12px;\n	color: rgba(255, 255, 255, 0.8);\n}\n\n._eventResult_1yqua_640._statusSuccess_1yqua_458 {\n	background: rgba(16, 185, 129, 0.2);\n}\n\n._eventResult_1yqua_640._statusFailed_1yqua_462 {\n	background: rgba(239, 68, 68, 0.2);\n}\n\n._reportActions_1yqua_656 {\n	display: flex;\n	gap: 8px;\n	padding: 20px;\n	border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n/* ========== Phase 4: Loading States ========== */\n\n._loadingContent_1yqua_665 {\n	text-align: center;\n	padding: 32px;\n	color: white;\n}\n\n._loadingSpinner_1yqua_671 {\n	width: 40px;\n	height: 40px;\n	margin: 0 auto 16px;\n	border: 3px solid rgba(255, 255, 255, 0.2);\n	border-top-color: white;\n	border-radius: 50%;\n	animation: _spin_1yqua_1 1s linear infinite;\n}\n\n@keyframes _spin_1yqua_1 {\n	to {\n		transform: rotate(360deg);\n	}\n}\n\n._loadingContent_1yqua_665 p {\n	margin: 0;\n	font-size: 14px;\n	color: rgba(255, 255, 255, 0.8);\n}\n\n/* ========== Phase 4: Task Card Dialog ========== */\n\n._taskCardDialog_1yqua_695 {\n	padding: 20px;\n}\n\n/* ========== Settings ========== */\n\n._settingsOverlay_1yqua_701 {\n	position: fixed;\n	inset: 0;\n	background: rgba(0, 0, 0, 0.5);\n	backdrop-filter: blur(4px);\n	z-index: 2147483647;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	animation: _overlayFadeIn_1yqua_1 0.2s ease;\n}\n\n._settingsDialog_1yqua_713 {\n	background: rgba(30, 30, 30, 0.95);\n	backdrop-filter: blur(20px);\n	border: 1px solid rgba(255, 255, 255, 0.1);\n	border-radius: 16px;\n	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n	max-width: 480px;\n	width: 90%;\n	animation: _dialogSlideIn_1yqua_1 0.3s ease;\n}\n\n._settingsDialogHeader_1yqua_724 {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 20px 24px;\n	border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._settingsDialogHeader_1yqua_724 h3 {\n	margin: 0;\n	font-size: 18px;\n	font-weight: 600;\n	color: white;\n}\n\n._settingsDialogContent_1yqua_739 {\n	padding: 24px;\n}\n\n._settingsField_1yqua_743 {\n	margin-bottom: 20px;\n}\n\n._settingsLabel_1yqua_747 {\n	display: block;\n	margin-bottom: 8px;\n	font-size: 13px;\n	font-weight: 500;\n	color: rgba(255, 255, 255, 0.9);\n}\n\n._settingsInput_1yqua_755 {\n	width: 100%;\n	padding: 10px 12px;\n	background: rgba(255, 255, 255, 0.05);\n	border: 1px solid rgba(255, 255, 255, 0.15);\n	border-radius: 8px;\n	color: white;\n	font-size: 14px;\n	font-family: inherit;\n	box-sizing: border-box;\n	transition: all 0.2s;\n}\n\n._settingsInput_1yqua_755::placeholder {\n	color: rgba(255, 255, 255, 0.4);\n}\n\n._settingsInput_1yqua_755:focus {\n	outline: none;\n	background: rgba(255, 255, 255, 0.08);\n	border-color: rgba(59, 130, 246, 0.5);\n}\n\n._settingsInput_1yqua_755[type='password'] {\n	-webkit-text-security: disc;\n}"));			document.head.appendChild(elementStyle);		}	} catch (e) {		console.error("vite-plugin-css-injected-by-js", e);	}})();
+import { PageAgentCore, assert, historyToReport, parseTestSpec, query, testSpecToPrompt, wait_for_condition } from "@page-agent/core";
+import { PageController } from "@page-agent/page-controller";
+import { ActionRecorder } from "@page-agent/recorder";
+import { I18n, Panel } from "@page-agent/ui";
+export * from "@page-agent/core";
+var RecordingPanel_module_default = {
+	recordingButton: "_recordingButton_1yqua_4",
+	eventCounter: "_eventCounter_1yqua_11",
+	exportOverlay: "_exportOverlay_1yqua_31",
+	overlayFadeIn: "_overlayFadeIn_1yqua_1",
+	exportDialog: "_exportDialog_1yqua_52",
+	dialogSlideIn: "_dialogSlideIn_1yqua_1",
+	exportDialogHeader: "_exportDialogHeader_1yqua_74",
+	closeButton: "_closeButton_1yqua_89",
+	exportDialogContent: "_exportDialogContent_1yqua_110",
+	exportOptions: "_exportOptions_1yqua_120",
+	exportOptionButton: "_exportOptionButton_1yqua_126",
+	exportOptionIcon: "_exportOptionIcon_1yqua_147",
+	exportOptionLabel: "_exportOptionLabel_1yqua_152",
+	controlButton: "_controlButton_1yqua_159",
+	controls: "_controls_1yqua_179",
+	recording: "_recording_1yqua_4",
+	recordingPulse: "_recordingPulse_1yqua_1",
+	taskCard: "_taskCard_1yqua_193",
+	taskCardHeader: "_taskCardHeader_1yqua_209",
+	taskIcon: "_taskIcon_1yqua_216",
+	taskName: "_taskName_1yqua_220",
+	confidenceBadge: "_confidenceBadge_1yqua_228",
+	taskStats: "_taskStats_1yqua_237",
+	taskParameters: "_taskParameters_1yqua_245",
+	parameterItem: "_parameterItem_1yqua_258",
+	paramKey: "_paramKey_1yqua_266",
+	paramValue: "_paramValue_1yqua_271",
+	taskActions: "_taskActions_1yqua_275",
+	actionButton: "_actionButton_1yqua_280",
+	btnPrimary: "_btnPrimary_1yqua_290",
+	btnSecondary: "_btnSecondary_1yqua_301",
+	historyHeader: "_historyHeader_1yqua_313",
+	searchInput: "_searchInput_1yqua_327",
+	filterTabs: "_filterTabs_1yqua_341",
+	filterTab: "_filterTab_1yqua_341",
+	active: "_active_1yqua_362",
+	taskList: "_taskList_1yqua_368",
+	emptyState: "_emptyState_1yqua_376",
+	replayPanel: "_replayPanel_1yqua_385",
+	replayHeader: "_replayHeader_1yqua_397",
+	replayIcon: "_replayIcon_1yqua_405",
+	replayStatus: "_replayStatus_1yqua_416",
+	success: "_success_1yqua_421",
+	failed: "_failed_1yqua_425",
+	eventList: "_eventList_1yqua_431",
+	eventItem: "_eventItem_1yqua_437",
+	statusPending: "_statusPending_1yqua_449",
+	statusRunning: "_statusRunning_1yqua_453",
+	pulse: "_pulse_1yqua_1",
+	statusSuccess: "_statusSuccess_1yqua_458",
+	statusFailed: "_statusFailed_1yqua_462",
+	eventStatusIcon: "_eventStatusIcon_1yqua_466",
+	eventDescription: "_eventDescription_1yqua_472",
+	eventDuration: "_eventDuration_1yqua_476",
+	errorDialog: "_errorDialog_1yqua_493",
+	errorHeader: "_errorHeader_1yqua_503",
+	errorIcon: "_errorIcon_1yqua_511",
+	errorDetails: "_errorDetails_1yqua_522",
+	errorCauses: "_errorCauses_1yqua_536",
+	errorActions: "_errorActions_1yqua_557",
+	replayReport: "_replayReport_1yqua_566",
+	failure: "_failure_1yqua_580",
+	reportHeader: "_reportHeader_1yqua_584",
+	reportIcon: "_reportIcon_1yqua_592",
+	reportStats: "_reportStats_1yqua_603",
+	statItem: "_statItem_1yqua_610",
+	statLabel: "_statLabel_1yqua_614",
+	statValue: "_statValue_1yqua_621",
+	reportDetails: "_reportDetails_1yqua_628",
+	eventResult: "_eventResult_1yqua_640",
+	reportActions: "_reportActions_1yqua_656",
+	loadingContent: "_loadingContent_1yqua_665",
+	loadingSpinner: "_loadingSpinner_1yqua_671",
+	spin: "_spin_1yqua_1",
+	taskCardDialog: "_taskCardDialog_1yqua_695",
+	settingsOverlay: "_settingsOverlay_1yqua_701",
+	settingsDialog: "_settingsDialog_1yqua_713",
+	settingsDialogHeader: "_settingsDialogHeader_1yqua_724",
+	settingsDialogContent: "_settingsDialogContent_1yqua_739",
+	settingsField: "_settingsField_1yqua_743",
+	settingsLabel: "_settingsLabel_1yqua_747",
+	settingsInput: "_settingsInput_1yqua_755"
+};
+//#endregion
+//#region src/TaskCard.ts
+/**
+* TaskCard - Display a single recorded task with intent and actions
+*
+* Shows task name, intent confidence, parameters, and provides
+* replay, export, and edit actions.
+*/
+var TaskCard = class {
+	#task;
+	#onReplay;
+	#onExport;
+	#onEdit;
+	constructor(task, callbacks) {
+		this.#task = task;
+		this.#onReplay = callbacks?.onReplay;
+		this.#onExport = callbacks?.onExport;
+		this.#onEdit = callbacks?.onEdit;
+	}
+	/**
+	* Render task card element
+	*/
+	render() {
+		const card = document.createElement("div");
+		card.className = RecordingPanel_module_default.taskCard;
+		card.dataset.taskId = this.#task.id;
+		const header = this.#renderHeader();
+		card.appendChild(header);
+		const stats = this.#renderStats();
+		card.appendChild(stats);
+		if (Object.keys(this.#task.intent.parameters.values).length > 0) {
+			const params = this.#renderParameters();
+			card.appendChild(params);
+		}
+		const actions = this.#renderActions();
+		card.appendChild(actions);
+		return card;
+	}
+	/**
+	* Render card header
+	*/
+	#renderHeader() {
+		const header = document.createElement("div");
+		header.className = RecordingPanel_module_default.taskCardHeader;
+		const icon = document.createElement("span");
+		icon.className = RecordingPanel_module_default.taskIcon;
+		icon.textContent = this.#getIntentIcon(this.#task.intent.action);
+		header.appendChild(icon);
+		const name = document.createElement("h3");
+		name.className = RecordingPanel_module_default.taskName;
+		name.textContent = this.#task.name;
+		header.appendChild(name);
+		const confidence = document.createElement("span");
+		confidence.className = RecordingPanel_module_default.confidenceBadge;
+		const confidencePercent = Math.round(this.#task.intent.confidence * 100);
+		confidence.textContent = `${confidencePercent}%`;
+		confidence.title = `置信度: ${confidencePercent}%`;
+		header.appendChild(confidence);
+		return header;
+	}
+	/**
+	* Render task statistics
+	*/
+	#renderStats() {
+		const stats = document.createElement("div");
+		stats.className = RecordingPanel_module_default.taskStats;
+		const eventCount = document.createElement("span");
+		eventCount.textContent = `${this.#task.eventCount} 个操作`;
+		stats.appendChild(eventCount);
+		if (this.#task.estimatedDuration) {
+			const duration = document.createElement("span");
+			duration.textContent = `预计 ${this.#formatDuration(this.#task.estimatedDuration)}`;
+			stats.appendChild(duration);
+		}
+		return stats;
+	}
+	/**
+	* Render parameters section
+	*/
+	#renderParameters() {
+		const params = document.createElement("div");
+		params.className = RecordingPanel_module_default.taskParameters;
+		const label = document.createElement("h4");
+		label.textContent = "参数:";
+		params.appendChild(label);
+		for (const [key, value] of Object.entries(this.#task.intent.parameters.values)) {
+			const paramItem = document.createElement("div");
+			paramItem.className = RecordingPanel_module_default.parameterItem;
+			const keySpan = document.createElement("span");
+			keySpan.className = RecordingPanel_module_default.paramKey;
+			keySpan.textContent = `${key}:`;
+			paramItem.appendChild(keySpan);
+			const valueSpan = document.createElement("span");
+			valueSpan.className = RecordingPanel_module_default.paramValue;
+			valueSpan.textContent = String(value);
+			paramItem.appendChild(valueSpan);
+			params.appendChild(paramItem);
+		}
+		return params;
+	}
+	/**
+	* Render action buttons
+	*/
+	#renderActions() {
+		const actions = document.createElement("div");
+		actions.className = RecordingPanel_module_default.taskActions;
+		const replayBtn = document.createElement("button");
+		replayBtn.className = `${RecordingPanel_module_default.btnPrimary} ${RecordingPanel_module_default.actionButton}`;
+		replayBtn.dataset.action = "replay";
+		replayBtn.textContent = "▶ 立即重放";
+		replayBtn.onclick = () => this.#onReplay?.(this.#task);
+		actions.appendChild(replayBtn);
+		const exportBtn = document.createElement("button");
+		exportBtn.className = `${RecordingPanel_module_default.btnSecondary} ${RecordingPanel_module_default.actionButton}`;
+		exportBtn.dataset.action = "export";
+		exportBtn.textContent = "📤 导出";
+		exportBtn.onclick = () => this.#onExport?.(this.#task);
+		actions.appendChild(exportBtn);
+		const editBtn = document.createElement("button");
+		editBtn.className = `${RecordingPanel_module_default.btnSecondary} ${RecordingPanel_module_default.actionButton}`;
+		editBtn.dataset.action = "edit";
+		editBtn.textContent = "✏ 编辑";
+		editBtn.onclick = () => this.#onEdit?.(this.#task);
+		actions.appendChild(editBtn);
+		return actions;
+	}
+	/**
+	* Get intent icon
+	*/
+	#getIntentIcon(intent) {
+		return {
+			login: "🔐",
+			search: "🔍",
+			fill_form: "📝",
+			navigate: "🧭",
+			data_entry: "⌨️",
+			batch_operation: "🔄",
+			verification: "✅",
+			download: "⬇️",
+			upload: "⬆️",
+			select: "☑️",
+			scroll: "📜",
+			input_text: "💬",
+			click_button: "👆",
+			other: "📋"
+		}[intent] || "📋";
+	}
+	/**
+	* Format duration in human-readable format
+	*/
+	#formatDuration(ms) {
+		const seconds = Math.round(ms / 1e3);
+		if (seconds < 60) return `${seconds}秒`;
+		return `${Math.floor(seconds / 60)}分${seconds % 60}秒`;
+	}
+};
+/**
+* Create a task card element
+*/
+function createTaskCard(task, callbacks) {
+	return new TaskCard(task, callbacks).render();
+}
+//#endregion
+//#region src/TaskHistory.ts
+/**
+* Storage key for localStorage
+*/
+var STORAGE_KEY = "page-agent-tasks";
+/**
+* TaskHistory - Manage and display list of recorded tasks
+*
+* Provides task persistence, search, filtering, and rendering
+* of the task history list.
+*/
+var TaskHistory = class {
+	#tasks = [];
+	#onTaskDelete;
+	#onReplay;
+	#onExport;
+	#onEdit;
+	constructor(callbacks) {
+		this.#onTaskDelete = callbacks?.onTaskDelete;
+		this.#onReplay = callbacks?.onReplay;
+		this.#onExport = callbacks?.onExport;
+		this.#onEdit = callbacks?.onEdit;
+		this.#loadFromStorage();
+	}
+	/**
+	* Add new task to history
+	*/
+	addTask(task) {
+		this.#tasks.unshift(task);
+		this.#saveToStorage();
+		if (this.#tasks.length > 50) {
+			this.#tasks = this.#tasks.slice(0, 50);
+			this.#saveToStorage();
+		}
+	}
+	/**
+	* Get task by ID
+	*/
+	getTask(id) {
+		return this.#tasks.find((t) => t.id === id);
+	}
+	/**
+	* Delete task
+	*/
+	deleteTask(id) {
+		this.#tasks = this.#tasks.filter((t) => t.id !== id);
+		this.#saveToStorage();
+		this.#onTaskDelete?.(id);
+	}
+	/**
+	* Search tasks by name/intent
+	*/
+	searchTasks(query) {
+		const lowerQuery = query.toLowerCase();
+		return this.#tasks.filter((t) => t.name.toLowerCase().includes(lowerQuery) || t.intent.action.toLowerCase().includes(lowerQuery) || t.intent.description.toLowerCase().includes(lowerQuery));
+	}
+	/**
+	* Filter by intent type
+	*/
+	filterByIntent(intent) {
+		if (intent === "other") return this.#tasks;
+		return this.#tasks.filter((t) => t.intent.action === intent);
+	}
+	/**
+	* Get all tasks
+	*/
+	getAllTasks() {
+		return [...this.#tasks];
+	}
+	/**
+	* Clear all tasks
+	*/
+	clearAll() {
+		this.#tasks = [];
+		this.#saveToStorage();
+	}
+	/**
+	* Render history list
+	*/
+	render() {
+		const fragment = document.createDocumentFragment();
+		const header = this.#renderHeader();
+		fragment.appendChild(header);
+		const filters = this.#renderFilters();
+		fragment.appendChild(filters);
+		const taskList = this.#renderTaskList();
+		fragment.appendChild(taskList);
+		return fragment;
+	}
+	/**
+	* Render header
+	*/
+	#renderHeader() {
+		const header = document.createElement("div");
+		header.className = RecordingPanel_module_default.historyHeader;
+		const title = document.createElement("h3");
+		title.textContent = "📼 任务历史";
+		header.appendChild(title);
+		const searchInput = document.createElement("input");
+		searchInput.type = "text";
+		searchInput.className = RecordingPanel_module_default.searchInput;
+		searchInput.placeholder = "搜索任务...";
+		searchInput.oninput = (e) => {
+			const query = e.target.value;
+			this.#refreshTaskList(query);
+		};
+		header.appendChild(searchInput);
+		return header;
+	}
+	/**
+	* Render filter tabs
+	*/
+	#renderFilters() {
+		const filters = document.createElement("div");
+		filters.className = RecordingPanel_module_default.filterTabs;
+		for (const option of [
+			{
+				label: "全部",
+				intent: "other"
+			},
+			{
+				label: "登录",
+				intent: "login"
+			},
+			{
+				label: "搜索",
+				intent: "search"
+			},
+			{
+				label: "表单",
+				intent: "fill_form"
+			}
+		]) {
+			const tab = document.createElement("button");
+			tab.className = RecordingPanel_module_default.filterTab;
+			if (option.intent === "other") tab.classList.add(RecordingPanel_module_default.active);
+			tab.textContent = option.label;
+			tab.dataset.intent = option.intent;
+			tab.onclick = () => {
+				filters.querySelectorAll(`.${RecordingPanel_module_default.filterTab}`).forEach((t) => t.classList.remove(RecordingPanel_module_default.active));
+				tab.classList.add(RecordingPanel_module_default.active);
+				this.#refreshTaskList("", option.intent);
+			};
+			filters.appendChild(tab);
+		}
+		return filters;
+	}
+	/**
+	* Render task list
+	*/
+	#renderTaskList(tasks) {
+		const container = document.createElement("div");
+		container.className = RecordingPanel_module_default.taskList;
+		const taskList = tasks || this.#tasks;
+		if (taskList.length === 0) {
+			const empty = document.createElement("div");
+			empty.className = RecordingPanel_module_default.emptyState;
+			empty.textContent = "暂无录制的任务";
+			container.appendChild(empty);
+			return container;
+		}
+		for (const task of taskList) {
+			const card = createTaskCard(task, {
+				onReplay: this.#onReplay,
+				onExport: this.#onExport,
+				onEdit: this.#onEdit
+			});
+			container.appendChild(card);
+		}
+		return container;
+	}
+	/**
+	* Refresh task list with optional search/filter
+	*/
+	#refreshTaskList(searchQuery = "", intentFilter) {
+		let tasks = this.#tasks;
+		if (searchQuery) tasks = this.searchTasks(searchQuery);
+		if (intentFilter && intentFilter !== "other") tasks = tasks.filter((t) => t.intent.action === intentFilter);
+		const taskList = document.querySelector(`.${RecordingPanel_module_default.taskList}`);
+		if (taskList) {
+			const newList = this.#renderTaskList(tasks);
+			taskList.replaceWith(newList);
+		}
+	}
+	/**
+	* Save to localStorage
+	*/
+	#saveToStorage() {
+		try {
+			localStorage.setItem(STORAGE_KEY, JSON.stringify(this.#tasks));
+		} catch (error) {
+			console.warn("[TaskHistory] Failed to save to localStorage:", error);
+		}
+	}
+	/**
+	* Load from localStorage
+	*/
+	#loadFromStorage() {
+		try {
+			const stored = localStorage.getItem(STORAGE_KEY);
+			if (stored) this.#tasks = JSON.parse(stored);
+		} catch (error) {
+			console.warn("[TaskHistory] Failed to load from localStorage:", error);
+			this.#tasks = [];
+		}
+	}
+	/**
+	* Generate unique task ID
+	*/
+	static generateId() {
+		return `task-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+	}
+};
+//#endregion
+//#region src/RecordingPanel.ts
+/**
+* Extended Panel with recording functionality
+*
+* This class extends the base Panel class to add recording UI and logic.
+* All recording functionality is isolated in this extension, keeping the base Panel clean.
+*/
+var RecordingPanel = class extends Panel {
+	#recorder;
+	#recordingButton;
+	#eventCounter;
+	#recordingUpdateTimer = null;
+	#i18n;
+	#taskHistory;
+	#currentOverlay;
+	#config;
+	#testModeButton;
+	#testContainer;
+	#dslEditor;
+	#isTestMode = false;
+	#settingsButton;
+	constructor(agent, config) {
+		super(agent, {
+			language: config.language,
+			promptForNextTask: config.promptForNextTask
+		});
+		this.#recorder = config.recorder;
+		this.#config = config;
+		this.#i18n = new I18n(config.language ?? "zh-CN");
+		this.#taskHistory = new TaskHistory({
+			onReplay: (task) => this.#handleReplay(task),
+			onExport: (task) => this.#handleExport(task),
+			onEdit: (task) => this.#handleEdit(task)
+		});
+		this.#setupRecordingUI();
+		this.#setupTestModeUI();
+		this.#setupSettingsUI();
+	}
+	/**
+	* Setup recording UI elements
+	*/
+	#setupRecordingUI() {
+		const header = this.wrapper.children[2];
+		if (!header) {
+			console.warn("[RecordingPanel] Header not found at expected position");
+			return;
+		}
+		const controls = header.children[1];
+		if (!controls) {
+			console.warn("[RecordingPanel] Controls not found at expected position");
+			return;
+		}
+		const buttons = controls.querySelectorAll("button");
+		if (buttons.length < 2) {
+			console.warn("[RecordingPanel] Controls section does not contain expected buttons");
+			return;
+		}
+		this.#recordingButton = document.createElement("button");
+		const existingButton = buttons[0];
+		const baseButtonClass = Array.from(existingButton.classList).find((c) => c.includes("controlButton") || c.includes("expandButton") || c.includes("stopButton")) || existingButton.className;
+		this.#recordingButton.className = `${baseButtonClass} ${RecordingPanel_module_default.recordingButton}`;
+		this.#recordingButton.title = this.#i18n.t("ui.panel.startRecording");
+		this.#recordingButton.innerHTML = "●";
+		this.#recordingButton.setAttribute("data-page-agent-ignore", "true");
+		this.#recordingButton.setAttribute("data-browser-use-ignore", "true");
+		this.#eventCounter = document.createElement("span");
+		this.#eventCounter.className = RecordingPanel_module_default.eventCounter;
+		this.#eventCounter.textContent = "";
+		this.#eventCounter.setAttribute("data-page-agent-ignore", "true");
+		this.#eventCounter.setAttribute("data-browser-use-ignore", "true");
+		controls.insertBefore(this.#recordingButton, controls.firstChild);
+		controls.insertBefore(this.#eventCounter, this.#recordingButton.nextSibling);
+		console.log("[RecordingPanel] Recording button added successfully");
+		this.#recordingButton.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.#toggleRecording();
+		});
+	}
+	/**
+	* Toggle recording state
+	*/
+	#toggleRecording() {
+		if (this.#recorder.getStatus().isRecording) {
+			const events = this.#recorder.stop();
+			this.#updateRecordingUI(false);
+			if (events.length > 0) this.#processRecording(events);
+		} else {
+			this.#recorder.start();
+			this.#updateRecordingUI(true);
+		}
+	}
+	/**
+	* Update recording UI state
+	*/
+	/**
+	* Setup test mode toggle button in header controls
+	*/
+	#setupTestModeUI() {
+		const header = this.wrapper.children[2];
+		if (!header) return;
+		const controls = header.children[1];
+		if (!controls) return;
+		const buttons = controls.querySelectorAll("button");
+		if (buttons.length < 1) return;
+		const existingButton = buttons[0];
+		const baseClass = Array.from(existingButton.classList).find((c) => c.includes("controlButton") || c.includes("expandButton")) || existingButton.className;
+		this.#testModeButton = document.createElement("button");
+		this.#testModeButton.className = baseClass;
+		this.#testModeButton.textContent = "T";
+		this.#testModeButton.title = "Toggle test mode";
+		this.#testModeButton.setAttribute("data-page-agent-ignore", "true");
+		this.#testModeButton.setAttribute("data-browser-use-ignore", "true");
+		this.#testModeButton.style.fontWeight = "bold";
+		this.#testModeButton.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.#toggleTestMode();
+		});
+		controls.insertBefore(this.#testModeButton, controls.firstChild);
+	}
+	/**
+	* Toggle between automation and test mode
+	*/
+	#toggleTestMode() {
+		this.#isTestMode = !this.#isTestMode;
+		if (this.#isTestMode) {
+			this.#testModeButton.style.color = "rgb(59, 130, 246)";
+			this.#showTestPanel();
+		} else {
+			this.#testModeButton.style.color = "";
+			this.#hideTestPanel();
+		}
+	}
+	/**
+	* Show test panel by injecting DSL editor into the panel
+	*/
+	#showTestPanel() {
+		if (this.#testContainer) return;
+		this.wrapper.children[1];
+		const inputSection = this.wrapper.children[3];
+		if (inputSection) inputSection.style.display = "none";
+		const container = document.createElement("div");
+		container.setAttribute("data-page-agent-ignore", "true");
+		container.setAttribute("data-browser-use-ignore", "true");
+		container.style.cssText = "padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; overflow-y: auto;";
+		const editorLabel = document.createElement("div");
+		editorLabel.textContent = "Test DSL (YAML)";
+		editorLabel.style.cssText = "color: rgba(255,255,255,0.5); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;";
+		container.appendChild(editorLabel);
+		this.#dslEditor = document.createElement("textarea");
+		this.#dslEditor.setAttribute("data-page-agent-ignore", "true");
+		this.#dslEditor.placeholder = "web:\n  url: https://example.com\ntasks:\n  - name: My test\n    flow:\n      - ai: do something\n      - aiAssert: result should be X";
+		this.#dslEditor.style.cssText = "width: 100%; min-height: 180px; background: rgba(15,15,15,0.85); color: #f5f5f5; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 12px; font-family: \"SF Mono\", \"Monaco\", \"Menlo\", \"Consolas\", monospace; font-size: 13px; line-height: 1.6; resize: vertical; box-sizing: border-box;";
+		container.appendChild(this.#dslEditor);
+		const placeholderStyle = document.createElement("style");
+		placeholderStyle.textContent = `
+			[data-page-agent-ignore="true"]::placeholder {
+				color: rgba(255, 255, 255, 0.4) !important;
+			}
+		`;
+		document.head.appendChild(placeholderStyle);
+		const btnRow = document.createElement("div");
+		btnRow.style.cssText = "display: flex; gap: 6px;";
+		btnRow.appendChild(this.#createTestBtn("Run", () => this.#handleTestRun()));
+		btnRow.appendChild(this.#createTestBtn("Save", () => this.#handleTestSave()));
+		btnRow.appendChild(this.#createTestBtn("Export", () => this.#handleTestExport()));
+		container.appendChild(btnRow);
+		this.#testContainer = container;
+		this.wrapper.insertBefore(container, inputSection);
+	}
+	/**
+	* Hide test panel and restore normal panel UI
+	*/
+	#hideTestPanel() {
+		if (this.#testContainer) {
+			this.#testContainer.remove();
+			this.#testContainer = void 0;
+		}
+		const historyWrapper = this.wrapper.children[1];
+		const inputSection = this.wrapper.children[3];
+		if (historyWrapper) historyWrapper.style.display = "";
+		if (inputSection) inputSection.style.display = "";
+	}
+	#createTestBtn(text, onClick) {
+		const btn = document.createElement("button");
+		btn.setAttribute("data-page-agent-ignore", "true");
+		btn.textContent = text;
+		btn.style.cssText = "padding: 4px 12px; background: rgba(59,130,246,0.7); color: white; border: none; border-radius: 4px; font-size: 11px; cursor: pointer;";
+		btn.addEventListener("mouseenter", () => {
+			btn.style.background = "rgba(59,130,246,1)";
+		});
+		btn.addEventListener("mouseleave", () => {
+			btn.style.background = "rgba(59,130,246,0.7)";
+		});
+		btn.addEventListener("click", (e) => {
+			e.stopPropagation();
+			onClick();
+		});
+		return btn;
+	}
+	async #handleTestRun() {
+		if (!this.#dslEditor || !this.#config.onRunTest) return;
+		const dsl = this.#dslEditor.value.trim();
+		if (!dsl) return;
+		const parsed = parseTestSpec(dsl);
+		if (!parsed.success) {
+			console.error("Parse error:", parsed.errors);
+			return;
+		}
+		try {
+			await this.#config.onRunTest(dsl);
+		} catch (error) {
+			console.error("Test failed:", error);
+		}
+	}
+	#handleTestSave() {
+		if (!this.#dslEditor) return;
+		const dsl = this.#dslEditor.value.trim();
+		if (!dsl) return;
+		const parsed = parseTestSpec(dsl);
+		if (!parsed.success || !parsed.spec) return;
+		const name = parsed.spec.tasks.map((t) => t.name).join(" / ") || "Untitled";
+		const saved = JSON.parse(localStorage.getItem("page-agent-test-specs") || "[]");
+		saved.push({
+			name,
+			dsl
+		});
+		localStorage.setItem("page-agent-test-specs", JSON.stringify(saved));
+		console.log("Saved:", name);
+	}
+	#handleTestExport() {
+		console.log("Export functionality disabled: test result display removed");
+	}
+	#updateRecordingUI(isRecording) {
+		if (!this.#recordingButton) return;
+		if (isRecording) {
+			this.#recordingButton.title = this.#i18n.t("ui.panel.stopRecording");
+			this.#recordingButton.classList.add(RecordingPanel_module_default.recording);
+			this.#startRecordingUpdateLoop();
+		} else {
+			this.#recordingButton.title = this.#i18n.t("ui.panel.startRecording");
+			this.#recordingButton.classList.remove(RecordingPanel_module_default.recording);
+			this.#stopRecordingUpdateLoop();
+			if (this.#eventCounter) this.#eventCounter.textContent = "";
+		}
+	}
+	/**
+	* Start periodic update of event counter
+	*/
+	#startRecordingUpdateLoop() {
+		this.#stopRecordingUpdateLoop();
+		this.#recordingUpdateTimer = setInterval(() => {
+			if (this.#eventCounter) {
+				const status = this.#recorder.getStatus();
+				this.#eventCounter.textContent = status.eventCount > 0 ? `${status.eventCount}` : "";
+			}
+		}, 500);
+	}
+	/**
+	* Stop periodic update of event counter
+	*/
+	#stopRecordingUpdateLoop() {
+		if (this.#recordingUpdateTimer) {
+			clearInterval(this.#recordingUpdateTimer);
+			this.#recordingUpdateTimer = null;
+		}
+	}
+	/**
+	* Process recording and create task card
+	*/
+	async #processRecording(events) {
+		this.#showLoadingState("AI分析中...");
+		try {
+			const taskData = await this.#analyzeIntent(events);
+			this.#taskHistory.addTask(taskData);
+			this.#showTaskCard(taskData);
+		} catch (error) {
+			console.error("[RecordingPanel] Failed to process recording:", error);
+			this.#showExportDialog(events);
+		}
+	}
+	/**
+	* Analyze intent from recorded events
+	*/
+	async #analyzeIntent(events) {
+		const { IntentRecognizer } = await import("@page-agent/recorder");
+		const intent = new IntentRecognizer().analyzeEvents(events);
+		const { TaskParameterExtractor } = await import("@page-agent/recorder");
+		const parameters = new TaskParameterExtractor().extractParameters(events, intent);
+		const taskName = await this.#generateTaskName(events, intent);
+		const estimatedDuration = this.#estimateDuration(events);
+		return {
+			id: TaskHistory.generateId(),
+			name: taskName,
+			intent: {
+				...intent,
+				parameters,
+				description: intent.context.semanticContext || "",
+				taskName
+			},
+			events,
+			createdAt: Date.now(),
+			eventCount: events.length,
+			estimatedDuration
+		};
+	}
+	/**
+	* Generate task name from events and intent
+	*/
+	async #generateTaskName(events, intent) {
+		const baseName = {
+			login: "登录系统",
+			search: "搜索内容",
+			fill_form: "填写表单",
+			navigate: "浏览页面",
+			data_entry: "录入数据",
+			batch_operation: "批量操作",
+			verification: "验证操作",
+			download: "下载文件",
+			upload: "上传文件",
+			other: "录制的操作"
+		}[intent.action] || "录制的操作";
+		for (const event of events) if (event.type === "click" && event.elementInfo?.textContent) {
+			const text = event.elementInfo.textContent.trim();
+			if (text && text.length < 30) return `${baseName}: ${text}`;
+		}
+		return baseName;
+	}
+	/**
+	* Estimate duration from events
+	*/
+	#estimateDuration(events) {
+		if (events.length < 2) return 1e3;
+		const firstEvent = events[0];
+		return events[events.length - 1].timestamp - firstEvent.timestamp;
+	}
+	/**
+	* Show loading state
+	*/
+	#showLoadingState(message) {
+		this.#currentOverlay?.remove();
+		const overlay = document.createElement("div");
+		overlay.className = RecordingPanel_module_default.exportOverlay;
+		const content = document.createElement("div");
+		content.className = RecordingPanel_module_default.loadingContent;
+		content.innerHTML = `
+			<div class="${RecordingPanel_module_default.loadingSpinner}"></div>
+			<p>${message}</p>
+		`;
+		overlay.appendChild(content);
+		document.body.appendChild(overlay);
+		this.#currentOverlay = overlay;
+	}
+	/**
+	* Show task card
+	*/
+	#showTaskCard(task) {
+		this.#currentOverlay?.remove();
+		const overlay = document.createElement("div");
+		overlay.className = RecordingPanel_module_default.exportOverlay;
+		const cardElement = createTaskCard(task, {
+			onReplay: (t) => {
+				overlay.remove();
+				this.#handleReplay(t);
+			},
+			onExport: (t) => {
+				overlay.remove();
+				this.#handleExport(t);
+			},
+			onEdit: (t) => {
+				overlay.remove();
+				this.#handleEdit(t);
+			}
+		});
+		const dialog = document.createElement("div");
+		dialog.className = RecordingPanel_module_default.taskCardDialog;
+		dialog.appendChild(cardElement);
+		overlay.appendChild(dialog);
+		document.body.appendChild(overlay);
+		this.#currentOverlay = overlay;
+		overlay.addEventListener("click", (e) => {
+			if (e.target === overlay) overlay.remove();
+		});
+	}
+	/**
+	* Handle replay action
+	*/
+	#handleReplay(task) {
+		console.log("[RecordingPanel] Replay task:", task.name);
+		alert(`重放功能即将推出: ${task.name}`);
+	}
+	/**
+	* Handle export action
+	*/
+	#handleExport(task) {
+		this.#downloadRecording(task.events, "json");
+	}
+	/**
+	* Handle edit action
+	*/
+	#handleEdit(task) {
+		console.log("[RecordingPanel] Edit task:", task.name);
+		alert(`编辑功能即将推出: ${task.name}`);
+	}
+	/**
+	* Show export dialog for recorded events
+	*/
+	#showExportDialog(events) {
+		return new Promise((resolve) => {
+			const overlay = document.createElement("div");
+			overlay.className = RecordingPanel_module_default.exportOverlay;
+			const dialog = document.createElement("div");
+			dialog.className = RecordingPanel_module_default.exportDialog;
+			const header = document.createElement("div");
+			header.className = RecordingPanel_module_default.exportDialogHeader;
+			header.innerHTML = `
+				<h3>${this.#i18n.t("ui.panel.exportRecording")}</h3>
+				<button class="${RecordingPanel_module_default.closeButton}">×</button>
+			`;
+			dialog.appendChild(header);
+			const content = document.createElement("div");
+			content.className = RecordingPanel_module_default.exportDialogContent;
+			content.innerHTML = `
+				<p>${this.#i18n.t("ui.panel.recordedEvents", { count: events.length })}</p>
+				<div class="${RecordingPanel_module_default.exportOptions}">
+					<button data-format="json" class="${RecordingPanel_module_default.exportOptionButton}">
+						<div class="${RecordingPanel_module_default.exportOptionIcon}">{}</div>
+						<div class="${RecordingPanel_module_default.exportOptionLabel}">JSON</div>
+					</button>
+					<button data-format="markdown" class="${RecordingPanel_module_default.exportOptionButton}">
+						<div class="${RecordingPanel_module_default.exportOptionIcon}">M↓</div>
+						<div class="${RecordingPanel_module_default.exportOptionLabel}">Markdown</div>
+					</button>
+					<button data-format="playwright" class="${RecordingPanel_module_default.exportOptionButton}">
+						<div class="${RecordingPanel_module_default.exportOptionIcon}">🎭</div>
+						<div class="${RecordingPanel_module_default.exportOptionLabel}">Playwright</div>
+					</button>
+				</div>
+			`;
+			dialog.appendChild(content);
+			overlay.appendChild(dialog);
+			document.body.appendChild(overlay);
+			const closeBtn = header.querySelector(`.${RecordingPanel_module_default.closeButton}`);
+			const closeDialog = () => {
+				overlay.remove();
+				resolve();
+			};
+			closeBtn.addEventListener("click", closeDialog);
+			content.querySelectorAll(`.${RecordingPanel_module_default.exportOptionButton}`).forEach((button) => {
+				button.addEventListener("click", () => {
+					const format = button.getAttribute("data-format");
+					this.#downloadRecording(events, format);
+					closeDialog();
+				});
+			});
+			overlay.addEventListener("click", (e) => {
+				if (e.target === overlay) closeDialog();
+			});
+		});
+	}
+	/**
+	* Download recording as file
+	*/
+	#downloadRecording(events, format) {
+		let content;
+		let filename;
+		let mimeType;
+		switch (format) {
+			case "json":
+				content = this.#recorder.export("json", events);
+				filename = `recording-${Date.now()}.json`;
+				mimeType = "application/json";
+				break;
+			case "markdown":
+				content = this.#recorder.export("markdown", events);
+				filename = `recording-${Date.now()}.md`;
+				mimeType = "text/markdown";
+				break;
+			case "playwright":
+				content = this.#recorder.export("playwright", events);
+				filename = `test-${Date.now()}.spec.ts`;
+				mimeType = "text/typescript";
+				break;
+			default: return;
+		}
+		const blob = new Blob([content], { type: mimeType });
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = filename;
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+		URL.revokeObjectURL(url);
+	}
+	/**
+	* Setup settings button in header controls
+	*/
+	#setupSettingsUI() {
+		const header = this.wrapper.children[2];
+		if (!header) return;
+		const controls = header.children[1];
+		if (!controls) return;
+		const buttons = controls.querySelectorAll("button");
+		if (buttons.length < 1) return;
+		const existingButton = buttons[0];
+		const baseClass = Array.from(existingButton.classList).find((c) => c.includes("controlButton") || c.includes("expandButton")) || existingButton.className;
+		this.#settingsButton = document.createElement("button");
+		this.#settingsButton.className = baseClass;
+		this.#settingsButton.innerHTML = "⚙";
+		this.#settingsButton.title = "Settings";
+		this.#settingsButton.setAttribute("data-page-agent-ignore", "true");
+		this.#settingsButton.setAttribute("data-browser-use-ignore", "true");
+		this.#settingsButton.style.fontSize = "16px";
+		this.#settingsButton.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.#showSettingsDialog();
+		});
+		controls.insertBefore(this.#settingsButton, controls.firstChild);
+	}
+	/**
+	* Show settings dialog
+	*/
+	#showSettingsDialog() {
+		this.#currentOverlay?.remove();
+		const overlay = document.createElement("div");
+		overlay.className = RecordingPanel_module_default.settingsOverlay || RecordingPanel_module_default.exportOverlay;
+		const dialog = document.createElement("div");
+		dialog.className = RecordingPanel_module_default.settingsDialog || RecordingPanel_module_default.exportDialog;
+		const header = document.createElement("div");
+		header.className = RecordingPanel_module_default.settingsDialogHeader || RecordingPanel_module_default.exportDialogHeader;
+		header.innerHTML = `
+				<h3>Settings</h3>
+				<button class="${RecordingPanel_module_default.closeButton}">×</button>
+			`;
+		dialog.appendChild(header);
+		const content = document.createElement("div");
+		content.className = RecordingPanel_module_default.settingsDialogContent || RecordingPanel_module_default.exportDialogContent;
+		const currentConfig = this.#loadConfigFromStorage();
+		content.innerHTML = `
+				<div class="${RecordingPanel_module_default.settingsField}">
+					<label class="${RecordingPanel_module_default.settingsLabel}">Model</label>
+					<input type="text" class="${RecordingPanel_module_default.settingsInput}" id="settings-model"
+						value="${this.#escapeHtml(currentConfig?.model || "")}"
+						placeholder="deepseek-v4-flash" />
+				</div>
+				<div class="${RecordingPanel_module_default.settingsField}">
+					<label class="${RecordingPanel_module_default.settingsLabel}">API Base URL</label>
+					<input type="text" class="${RecordingPanel_module_default.settingsInput}" id="settings-baseurl"
+						value="${this.#escapeHtml(currentConfig?.baseURL || "")}"
+						placeholder="https://api.deepseek.com" />
+				</div>
+				<div class="${RecordingPanel_module_default.settingsField}">
+					<label class="${RecordingPanel_module_default.settingsLabel}">API Key (optional)</label>
+					<input type="password" class="${RecordingPanel_module_default.settingsInput}" id="settings-apikey"
+						value="${this.#escapeHtml(currentConfig?.apiKey || "")}"
+						placeholder="••••••••" />
+				</div>
+			`;
+		const buttonRow = document.createElement("div");
+		buttonRow.style.cssText = "display: flex; gap: 8px; justify-content: flex-end; padding: 20px;";
+		buttonRow.innerHTML = `
+				<button id="settings-cancel" class="${RecordingPanel_module_default.btnSecondary}">Cancel</button>
+				<button id="settings-save" class="${RecordingPanel_module_default.btnPrimary}">Save</button>
+			`;
+		dialog.appendChild(content);
+		dialog.appendChild(buttonRow);
+		overlay.appendChild(dialog);
+		document.body.appendChild(overlay);
+		this.#currentOverlay = overlay;
+		const closeBtn = header.querySelector(`.${RecordingPanel_module_default.closeButton}`);
+		const closeDialog = () => {
+			overlay.remove();
+		};
+		closeBtn.addEventListener("click", closeDialog);
+		buttonRow.querySelector("#settings-cancel").addEventListener("click", closeDialog);
+		buttonRow.querySelector("#settings-save").addEventListener("click", () => {
+			const model = document.getElementById("settings-model").value.trim();
+			const baseURL = document.getElementById("settings-baseurl").value.trim();
+			const apiKey = document.getElementById("settings-apikey").value.trim();
+			if (!model || !baseURL) {
+				alert("Please fill in Model and Base URL");
+				return;
+			}
+			this.#saveConfigToStorage({
+				model,
+				baseURL,
+				apiKey
+			});
+			closeDialog();
+			console.log("Settings saved:", {
+				model,
+				baseURL,
+				apiKey: "••••"
+			});
+		});
+		overlay.addEventListener("click", (e) => {
+			if (e.target === overlay) closeDialog();
+		});
+	}
+	/**
+	* Load config from localStorage
+	*/
+	#loadConfigFromStorage() {
+		try {
+			const saved = localStorage.getItem("page-agent-demo-llm-config");
+			return saved ? JSON.parse(saved) : null;
+		} catch {
+			return null;
+		}
+	}
+	/**
+	* Save config to localStorage
+	*/
+	#saveConfigToStorage(config) {
+		localStorage.setItem("page-agent-demo-llm-config", JSON.stringify(config));
+	}
+	#escapeHtml(str) {
+		const d = document.createElement("div");
+		d.textContent = str;
+		return d.innerHTML;
+	}
+	/**
+	* Dispose panel and clean up event listeners
+	*/
+	dispose() {
+		this.#stopRecordingUpdateLoop();
+		this.#currentOverlay?.remove();
+		if (this.#isTestMode) this.#hideTestPanel();
+		super.dispose();
+	}
+};
+//#endregion
+//#region src/PageAgent.ts
+var PageAgent = class extends PageAgentCore {
+	panel;
+	recorder;
+	constructor(config) {
+		const pageController = new PageController({
+			...config,
+			enableMask: config.enableMask ?? true
+		});
+		super({
+			...config,
+			pageController
+		});
+		this.recorder = new ActionRecorder({ pageController });
+		this.panel = new RecordingPanel(this, {
+			language: config.language,
+			recorder: this.recorder,
+			promptForNextTask: config.promptForNextTask,
+			onGenerateTestDSL: (desc) => this.generateTestDSL(desc),
+			onRunTest: (dsl) => this.runTest(dsl)
+		});
+	}
+	/**
+	* Start recording user interactions
+	*/
+	startRecording() {
+		this.recorder.start();
+	}
+	/**
+	* Stop recording and return captured events
+	*/
+	stopRecording() {
+		return this.recorder.stop();
+	}
+	/**
+	* Export recording in specified format
+	*/
+	exportRecording(format) {
+		return this.recorder.export(format);
+	}
+	/**
+	* Get recording status
+	*/
+	getRecordingStatus() {
+		return this.recorder.getStatus();
+	}
+	/**
+	* Get all recorded events
+	*/
+	getRecordedEvents() {
+		return this.recorder.getEvents();
+	}
+	/**
+	* Clear all recorded events
+	*/
+	clearRecording() {
+		this.recorder.clear();
+	}
+	/**
+	* Get the recognized intent of the recording
+	*/
+	getRecordingIntent() {
+		return this.recorder.getIntent();
+	}
+	/**
+	* Replay recorded events
+	* @param events - Optional events to replay (uses current recording if not provided)
+	* @param config - Optional replay configuration
+	*/
+	async replayRecording(events, config) {
+		return await this.recorder.replay(events, config);
+	}
+	/**
+	* Load events from a JSON file and replay them
+	* @param filePath - Path to the recording file
+	* @param config - Optional replay configuration
+	*/
+	async replayRecordingFile(filePath, config) {
+		return await this.recorder.replayFile(filePath, config);
+	}
+	async generateTestDSL(description) {
+		return `web:
+  url: ${(await this.pageController.getBrowserState()).url}
+
+tasks:
+  - name: ${description.slice(0, 50)}
+    flow:
+      - ai: ${description}
+      - sleep: 2000
+      - aiAssert: The action completed successfully
+`;
+	}
+	async runTest(dsl) {
+		const parseResult = parseTestSpec(dsl);
+		if (!parseResult.success || !parseResult.spec) throw new Error(`Invalid test DSL: ${parseResult.errors?.join(", ")}`);
+		const spec = parseResult.spec;
+		this.tools.set("assert", assert);
+		this.tools.set("query", query);
+		this.tools.set("wait_for_condition", wait_for_condition);
+		try {
+			const prompt = testSpecToPrompt(spec);
+			return historyToReport((await this.execute(prompt)).history, spec);
+		} finally {
+			this.tools.delete("assert");
+			this.tools.delete("query");
+			this.tools.delete("wait_for_condition");
+		}
+	}
+	saveTestSpec(name, dsl) {
+		const key = "page-agent-test-specs";
+		const saved = JSON.parse(localStorage.getItem(key) || "[]");
+		saved.push({
+			name,
+			dsl
+		});
+		localStorage.setItem(key, JSON.stringify(saved));
+	}
+	loadTestSpecs() {
+		try {
+			return JSON.parse(localStorage.getItem("page-agent-test-specs") || "[]");
+		} catch {
+			return [];
+		}
+	}
+};
+//#endregion
+export { PageAgent, RecordingPanel };
+
+//# sourceMappingURL=page-agent.js.map