@page-agent/ui 0.2.4 → 0.3.0-beta.2

package/dist/lib/index.d.ts

@@ -1,4 +1,34 @@
-export declare type AgentStatus = 'idle' | 'running' | 'completed' | 'error';
+/**
+ * Agent activity - transient state for immediate UI feedback.
+ *
+ * Unlike historical events (which are persisted), activities are ephemeral
+ * and represent "what the agent is doing right now". UI components should
+ * listen to 'activity' events to show real-time feedback.
+ *
+ * Note: There is no 'idle' activity - absence of activity events means idle.
+ *
+ * Events dispatched: CustomEvent<AgentActivity>
+ */
+export declare type AgentActivity = {
+    type: 'thinking';
+} | {
+    type: 'executing';
+    tool: string;
+    input: unknown;
+} | {
+    type: 'executed';
+    tool: string;
+    input: unknown;
+    output: string;
+    duration: number;
+} | {
+    type: 'retrying';
+    attempt: number;
+    maxAttempts: number;
+} | {
+    type: 'error';
+    message: string;
+};
 
 declare type DeepStringify<T> = {
     [K in keyof T]: T[K] extends string ? string : T[K] extends object ? DeepStringify<T[K]> : T[K];
@@ -27,6 +57,7 @@ declare const enUS: {
             readonly selecting: "Selecting option \"{{text}}\"...";
             readonly scrolling: "Scrolling page...";
             readonly waiting: "Waiting {{seconds}} seconds...";
+            readonly askingUser: "Asking user...";
             readonly done: "Task done";
             readonly clicked: "🖱️ Clicked element [{{index}}]";
             readonly inputted: "⌨️ Inputted text \"{{text}}\"";
@@ -83,6 +114,7 @@ declare const locales: {
                 readonly selecting: "Selecting option \"{{text}}\"...";
                 readonly scrolling: "Scrolling page...";
                 readonly waiting: "Waiting {{seconds}} seconds...";
+                readonly askingUser: "Asking user...";
                 readonly done: "Task done";
                 readonly clicked: "🖱️ Clicked element [{{index}}]";
                 readonly inputted: "⌨️ Inputted text \"{{text}}\"";
@@ -127,6 +159,7 @@ declare const locales: {
                 readonly selecting: "正在选择选项 \"{{text}}\"...";
                 readonly scrolling: "正在滚动页面...";
                 readonly waiting: "等待 {{seconds}} 秒...";
+                readonly askingUser: "正在询问用户...";
                 readonly done: "结束任务";
                 readonly clicked: "🖱️ 已点击元素 [{{index}}]";
                 readonly inputted: "⌨️ 已输入文本 \"{{text}}\"";
@@ -156,27 +189,76 @@ declare type NestedKeyOf<ObjectType extends object> = {
 
 /**
  * Agent control panel
+ *
+ * Architecture:
+ * - History list: renders directly from agent.history (historical events)
+ * - Header bar: shows activity events (transient state) and agent status
+ *
+ * This separation ensures data consistency - history is the single source of truth
+ * for what has been done, while activity shows what is happening now.
  */
 export declare class Panel {
     #private;
     get wrapper(): HTMLElement;
-    constructor(config: PanelConfig);
     /**
-     * Ask for user input
+     * Create a Panel bound to an agent
+     * @param agent - Agent instance that implements PanelAgentAdapter
+     * @param config - Optional panel configuration
      */
-    askUser(question: string): Promise<string>;
+    constructor(agent: PanelAgentAdapter, config?: PanelConfig);
     show(): void;
     hide(): void;
     reset(): void;
     expand(): void;
     collapse(): void;
     /**
-     * Update panel with semantic data - i18n handled internally
+     * Dispose panel and clean up event listeners
      */
-    update(data: PanelUpdate): void;
+    dispose(): void;
+}
+
+/**
+ * Minimal interface that Panel expects from an agent.
+ * Panel does not depend on PageAgent directly - it only requires this interface.
+ * This enables decoupling and allows any agent implementation to work with Panel.
+ *
+ * Events:
+ * - 'statuschange': Agent status changed (idle/running/completed/error)
+ * - 'historychange': Historical events updated (persisted)
+ * - 'activity': Transient activity for immediate UI feedback (thinking/executing/etc)
+ * - 'dispose': Agent is being disposed
+ */
+export declare interface PanelAgentAdapter extends EventTarget {
+    /** Current agent status */
+    readonly status: 'idle' | 'running' | 'completed' | 'error';
+    /** History of agent events */
+    readonly history: readonly {
+        type: 'step' | 'observation' | 'user_takeover' | 'error';
+        /** For 'step' type */
+        reflection?: {
+            evaluation_previous_goal?: string;
+            memory?: string;
+            next_goal?: string;
+        };
+        /** For 'step' type */
+        action?: {
+            name: string;
+            input: unknown;
+            output: string;
+        };
+        /** For 'observation' type */
+        content?: string;
+    }[];
+    /** Current task being executed */
+    readonly task: string;
     /**
-     * Dispose panel
+     * Callback for when agent needs user input.
+     * Panel will set this to handle user questions via its UI.
      */
+    onAskUser?: (question: string) => Promise<string>;
+    /** Execute a task */
+    execute(task: string): Promise<unknown>;
+    /** Dispose the agent */
     dispose(): void;
 }
 
@@ -185,65 +267,11 @@ export declare class Panel {
  */
 export declare interface PanelConfig {
     language?: SupportedLanguage;
-    onExecuteTask: (task: string) => void;
-    onStop: () => void;
-}
-
-/**
- * Semantic update types - Panel handles i18n internally
- */
-export declare type PanelUpdate = {
-    type: 'thinking';
-    text?: string;
-} | {
-    type: 'input';
-    task: string;
-} | {
-    type: 'question';
-    question: string;
-} | {
-    type: 'userAnswer';
-    input: string;
-} | {
-    type: 'retry';
-    current: number;
-    max: number;
-} | {
-    type: 'error';
-    message: string;
-} | {
-    type: 'output';
-    text: string;
-} | {
-    type: 'completed';
-} | {
-    type: 'toolExecuting';
-    toolName: string;
-    args: any;
-} | {
-    type: 'toolCompleted';
-    toolName: string;
-    args: any;
-    result?: string;
-    duration?: number;
-} | {
-    type: 'observation';
-    content: string;
-};
-
-/**
- * Agent execution state management
- */
-export declare interface Step {
-    id: string;
-    stepNumber: number;
-    timestamp: Date;
-    type: 'thinking' | 'tool_executing' | 'completed' | 'error' | 'output' | 'input' | 'retry' | 'observation';
-    toolName?: string;
-    toolArgs?: any;
-    toolResult?: any;
-    displayText: string;
-    duration?: number;
+    /**
+     * Whether to prompt for next task after task completion
+     * @default true
+     */
+    promptForNextTask?: boolean;
 }
 
 export declare type SupportedLanguage = keyof typeof locales;
@@ -254,19 +282,4 @@ declare type TranslationParams = Record<string, string | number>;
 
 declare type TranslationSchema = DeepStringify<typeof enUS>;
 
-export declare class UIState {
-    private steps;
-    private currentStep;
-    private status;
-    private stepCounter;
-    addStep(stepData: Omit<Step, 'id' | 'stepNumber' | 'timestamp'>): Step;
-    updateCurrentStep(updates: Partial<Step>): Step | null;
-    getCurrentStep(): Step | null;
-    getAllSteps(): Step[];
-    getStatus(): AgentStatus;
-    reset(): void;
-    private updateStatus;
-    private generateId;
-}
-
 export { }

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

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("._wrapper_1x12x_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_1x12x_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_1x12x_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_1x12x_1 2s linear infinite;\n			animation-delay: 1s;\n		}\n	}\n}\n\n@keyframes _mask-running_1x12x_1 {\n	from {\n		transform: translateX(-100%);\n	}\n	to {\n		transform: translateX(100%);\n	}\n}\n\n/* 控制栏 */\n._header_1x12x_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_1x12x_121 {\n		display: flex;\n		align-items: center;\n		gap: 8px;\n		flex: 1;\n		min-height: 24px; /* 确保垂直居中 */\n\n		._indicator_1x12x_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_1x12x_137 {\n				background: rgb(57, 182, 255);\n				animation: _pulse_1x12x_1 0.8s ease-in-out infinite;\n			}\n\n			&._tool_executing_1x12x_142 {\n				background: rgb(189, 69, 251);\n				animation: _pulse_1x12x_1 0.6s ease-in-out infinite;\n			}\n\n			&._retry_1x12x_147 {\n				background: rgb(255, 214, 0);\n				animation: _retryPulse_1x12x_1 1s ease-in-out infinite;\n			}\n\n			/* 静止状态 - 无动画 */\n			&._completed_1x12x_153,\n			&._input_1x12x_154,\n			&._output_1x12x_155 {\n				background: rgb(34, 197, 94);\n				animation: none;\n			}\n\n			&._error_1x12x_160 {\n				background: rgb(239, 68, 68);\n				animation: none;\n			}\n		}\n\n		._statusText_1x12x_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_1x12x_178 {\n				animation: _statusTextFadeOut_1x12x_1 0.3s ease forwards;\n			}\n\n			&._fadeIn_1x12x_182 {\n				animation: _statusTextFadeIn_1x12x_1 0.3s ease forwards;\n			}\n		}\n	}\n\n	._controls_1x12x_188 {\n		display: flex;\n		align-items: center;\n		gap: 4px;\n\n		._controlButton_1x12x_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		._stopButton_1x12x_212 {\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_1x12x_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_1x12x_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_1x12x_246 {\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_1x12x_278 & {\n		padding-top: 8px;\n		visibility: visible;\n	}\n\n	._historySection_1x12x_246 {\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_1x12x_278 & {\n			max-height: 400px;\n		}\n\n		._historyItem_1x12x_297 {\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_1x12x_153,\n			&._input_1x12x_154,\n			&._output_1x12x_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_1x12x_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_1x12x_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			&._observation_1x12x_355 {\n				border-left-color: rgb(147, 51, 234);\n				background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(147, 51, 234, 0.05));\n			}\n\n			/* 突出显示 done 成功结果 */\n			&._doneSuccess_1x12x_361 {\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_1x12x_1 2s ease-in-out infinite;\n				}\n\n				._historyContent_1x12x_397 {\n					._statusIcon_1x12x_398 {\n						font-size: 16px;\n						animation: _celebrate_1x12x_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_1x12x_407 {\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_1x12x_397 {\n					._statusIcon_1x12x_398 {\n						font-size: 16px;\n						filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.5));\n					}\n				}\n			}\n\n			._historyContent_1x12x_397 {\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_1x12x_398 {\n					font-size: 12px;\n					flex-shrink: 0;\n					line-height: 1;\n					transition: all 0.3s ease;\n				}\n			}\n\n			._historyMeta_1x12x_458 {\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_1x12x_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_1x12x_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_1x12x_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_1x12x_1 {\n	0% {\n		left: -100%;\n	}\n	100% {\n		left: 100%;\n	}\n}\n\n/* 输入区域样式 */\n._inputSectionWrapper_1x12x_528 {\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_1x12x_551 {\n		visibility: collapse;\n		height: 0;\n	}\n\n	._inputSection_1x12x_528 {\n		display: flex;\n		align-items: center;\n		gap: 4px;\n		padding: 8px 8px;\n\n		._taskInput_1x12x_562 {\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}"));
+      elementStyle.appendChild(document.createTextNode("._wrapper_gtdpc_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_gtdpc_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_gtdpc_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_gtdpc_1 2s linear infinite;\n			animation-delay: 1s;\n		}\n	}\n}\n\n@keyframes _mask-running_gtdpc_1 {\n	from {\n		transform: translateX(-100%);\n	}\n	to {\n		transform: translateX(100%);\n	}\n}\n\n/* 控制栏 */\n._header_gtdpc_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_gtdpc_121 {\n		display: flex;\n		align-items: center;\n		gap: 8px;\n		flex: 1;\n		min-height: 24px; /* 确保垂直居中 */\n\n		._indicator_gtdpc_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_gtdpc_137 {\n				background: rgb(57, 182, 255);\n				animation: _pulse_gtdpc_1 0.8s ease-in-out infinite;\n			}\n\n			&._tool_executing_gtdpc_142 {\n				background: rgb(189, 69, 251);\n				animation: _pulse_gtdpc_1 0.6s ease-in-out infinite;\n			}\n\n			&._retry_gtdpc_147 {\n				background: rgb(255, 214, 0);\n				animation: _retryPulse_gtdpc_1 1s ease-in-out infinite;\n			}\n\n			/* 静止状态 - 无动画 */\n			&._completed_gtdpc_153,\n			&._input_gtdpc_154,\n			&._output_gtdpc_155 {\n				background: rgb(34, 197, 94);\n				animation: none;\n			}\n\n			&._error_gtdpc_160 {\n				background: rgb(239, 68, 68);\n				animation: none;\n			}\n		}\n\n		._statusText_gtdpc_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_gtdpc_178 {\n				animation: _statusTextFadeOut_gtdpc_1 0.3s ease forwards;\n			}\n\n			&._fadeIn_gtdpc_182 {\n				animation: _statusTextFadeIn_gtdpc_1 0.3s ease forwards;\n			}\n		}\n	}\n\n	._controls_gtdpc_188 {\n		display: flex;\n		align-items: center;\n		gap: 4px;\n\n		._controlButton_gtdpc_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		._stopButton_gtdpc_212 {\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_gtdpc_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_gtdpc_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_gtdpc_246 {\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_gtdpc_278 & {\n		padding-top: 8px;\n		visibility: visible;\n	}\n\n	._historySection_gtdpc_246 {\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_gtdpc_278 & {\n			max-height: 400px;\n		}\n\n		._historyItem_gtdpc_297 {\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_gtdpc_153,\n			&._input_gtdpc_154,\n			&._output_gtdpc_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_gtdpc_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_gtdpc_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			&._observation_gtdpc_355 {\n				border-left-color: rgb(147, 51, 234);\n				background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(147, 51, 234, 0.05));\n			}\n\n			&._question_gtdpc_360 {\n				border-left-color: rgb(255, 159, 67);\n				background: linear-gradient(135deg, rgba(255, 159, 67, 0.15), rgba(255, 159, 67, 0.08));\n			}\n\n			/* 突出显示 done 成功结果 */\n			&._doneSuccess_gtdpc_366 {\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_gtdpc_1 2s ease-in-out infinite;\n				}\n\n				._historyContent_gtdpc_402 {\n					._statusIcon_gtdpc_403 {\n						font-size: 16px;\n						animation: _celebrate_gtdpc_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_gtdpc_412 {\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_gtdpc_402 {\n					._statusIcon_gtdpc_403 {\n						font-size: 16px;\n						filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.5));\n					}\n				}\n			}\n\n			._historyContent_gtdpc_402 {\n				display: flex;\n				align-items: flex-start;\n				gap: 8px;\n\n				word-break: break-all;\n				white-space: pre-wrap;\n\n				/* overflow-x: auto; */\n\n				._statusIcon_gtdpc_403 {\n					font-size: 12px;\n					flex-shrink: 0;\n					line-height: 1;\n					transition: all 0.3s ease;\n				}\n\n				._reflectionLines_gtdpc_462 {\n					display: flex;\n					flex-direction: column;\n					gap: 4px;\n				}\n			}\n\n			._historyMeta_gtdpc_469 {\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_gtdpc_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_gtdpc_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_gtdpc_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_gtdpc_1 {\n	0% {\n		left: -100%;\n	}\n	100% {\n		left: 100%;\n	}\n}\n\n/* 输入区域样式 */\n._inputSectionWrapper_gtdpc_539 {\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_gtdpc_562 {\n		visibility: collapse;\n		height: 0;\n	}\n\n	._inputSection_gtdpc_539 {\n		display: flex;\n		align-items: center;\n		gap: 4px;\n		padding: 8px 8px;\n\n		._taskInput_gtdpc_573 {\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}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -20,67 +20,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 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, _stopButton, _inputSection, _taskInput, _state, _isExpanded, _config, _i18n, _userAnswerResolver, _isWaitingForUserAnswer, _headerUpdateTimer, _pendingHeaderText, _isAnimating, _Panel_instances, toStepData_fn, getToolExecutingText_fn, getToolCompletedText_fn, updateInternal_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;
-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;
+var _wrapper, _indicator, _statusText, _historySection, _expandButton, _stopButton, _inputSection, _taskInput, _agent, _config, _isExpanded, _i18n, _userAnswerResolver, _isWaitingForUserAnswer, _headerUpdateTimer, _pendingHeaderText, _isAnimating, _onStatusChange, _onHistoryChange, _onActivity, _onAgentDispose, _Panel_instances, handleStatusChange_fn, handleHistoryChange_fn, handleActivity_fn, askUser_fn, getToolExecutingText_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, scrollToBottom_fn, renderHistory_fn, createTaskCard_fn, createHistoryCards_fn, createActionCards_fn;
 const enUS = {
   ui: {
     panel: {
@@ -104,6 +44,7 @@ const enUS = {
       selecting: 'Selecting option "{{text}}"...',
       scrolling: "Scrolling page...",
       waiting: "Waiting {{seconds}} seconds...",
+      askingUser: "Asking user...",
       done: "Task done",
       clicked: "🖱️ Clicked element [{{index}}]",
       inputted: '⌨️ Inputted text "{{text}}"',
@@ -148,6 +89,7 @@ const zhCN = {
       selecting: '正在选择选项 "{{text}}"...',
       scrolling: "正在滚动页面...",
       waiting: "等待 {{seconds}} 秒...",
+      askingUser: "正在询问用户...",
       done: "结束任务",
       clicked: "🖱️ 已点击元素 [{{index}}]",
       inputted: '⌨️ 已输入文本 "{{text}}"',
@@ -217,47 +159,49 @@ function escapeHtml(text) {
   return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
 }
 __name(escapeHtml, "escapeHtml");
-const wrapper = "_wrapper_1x12x_1";
-const background = "_background_1x12x_39";
-const header = "_header_1x12x_99";
-const pulse = "_pulse_1x12x_1";
-const retryPulse = "_retryPulse_1x12x_1";
-const statusTextFadeOut = "_statusTextFadeOut_1x12x_1";
-const statusTextFadeIn = "_statusTextFadeIn_1x12x_1";
-const statusSection = "_statusSection_1x12x_121";
-const indicator = "_indicator_1x12x_128";
-const thinking = "_thinking_1x12x_137";
-const tool_executing = "_tool_executing_1x12x_142";
-const retry = "_retry_1x12x_147";
-const completed = "_completed_1x12x_153";
-const input = "_input_1x12x_154";
-const output = "_output_1x12x_155";
-const error = "_error_1x12x_160";
-const statusText = "_statusText_1x12x_166";
-const fadeOut = "_fadeOut_1x12x_178";
-const fadeIn = "_fadeIn_1x12x_182";
-const controls = "_controls_1x12x_188";
-const controlButton = "_controlButton_1x12x_193";
-const stopButton = "_stopButton_1x12x_212";
-const historySectionWrapper = "_historySectionWrapper_1x12x_246";
-const shimmer = "_shimmer_1x12x_1";
-const celebrate = "_celebrate_1x12x_1";
-const expanded = "_expanded_1x12x_278";
-const historySection = "_historySection_1x12x_246";
-const historyItem = "_historyItem_1x12x_297";
-const observation = "_observation_1x12x_355";
-const doneSuccess = "_doneSuccess_1x12x_361";
-const historyContent = "_historyContent_1x12x_397";
-const statusIcon = "_statusIcon_1x12x_398";
-const doneError = "_doneError_1x12x_407";
-const historyMeta = "_historyMeta_1x12x_458";
-const inputSectionWrapper = "_inputSectionWrapper_1x12x_528";
-const hidden = "_hidden_1x12x_551";
-const inputSection = "_inputSection_1x12x_528";
-const taskInput = "_taskInput_1x12x_562";
+const wrapper = "_wrapper_gtdpc_1";
+const background = "_background_gtdpc_39";
+const header = "_header_gtdpc_99";
+const pulse = "_pulse_gtdpc_1";
+const retryPulse = "_retryPulse_gtdpc_1";
+const statusTextFadeOut = "_statusTextFadeOut_gtdpc_1";
+const statusTextFadeIn = "_statusTextFadeIn_gtdpc_1";
+const statusSection = "_statusSection_gtdpc_121";
+const indicator = "_indicator_gtdpc_128";
+const thinking = "_thinking_gtdpc_137";
+const tool_executing = "_tool_executing_gtdpc_142";
+const retry = "_retry_gtdpc_147";
+const completed = "_completed_gtdpc_153";
+const input = "_input_gtdpc_154";
+const output = "_output_gtdpc_155";
+const error = "_error_gtdpc_160";
+const statusText = "_statusText_gtdpc_166";
+const fadeOut = "_fadeOut_gtdpc_178";
+const fadeIn = "_fadeIn_gtdpc_182";
+const controls = "_controls_gtdpc_188";
+const controlButton = "_controlButton_gtdpc_193";
+const stopButton = "_stopButton_gtdpc_212";
+const historySectionWrapper = "_historySectionWrapper_gtdpc_246";
+const shimmer = "_shimmer_gtdpc_1";
+const celebrate = "_celebrate_gtdpc_1";
+const expanded = "_expanded_gtdpc_278";
+const historySection = "_historySection_gtdpc_246";
+const historyItem = "_historyItem_gtdpc_297";
+const observation = "_observation_gtdpc_355";
+const question = "_question_gtdpc_360";
+const doneSuccess = "_doneSuccess_gtdpc_366";
+const historyContent = "_historyContent_gtdpc_402";
+const statusIcon = "_statusIcon_gtdpc_403";
+const doneError = "_doneError_gtdpc_412";
+const reflectionLines = "_reflectionLines_gtdpc_462";
+const historyMeta = "_historyMeta_gtdpc_469";
+const inputSectionWrapper = "_inputSectionWrapper_gtdpc_539";
+const hidden = "_hidden_gtdpc_562";
+const inputSection = "_inputSection_gtdpc_539";
+const taskInput = "_taskInput_gtdpc_573";
 const styles = {
   wrapper,
-  "mask-running": "_mask-running_1x12x_1",
+  "mask-running": "_mask-running_gtdpc_1",
   background,
   header,
   pulse,
@@ -286,18 +230,62 @@ const styles = {
   historySection,
   historyItem,
   observation,
+  question,
   doneSuccess,
   historyContent,
   statusIcon,
   doneError,
+  reflectionLines,
   historyMeta,
   inputSectionWrapper,
   hidden,
   inputSection,
   taskInput
 };
+function createCard({ icon, content, meta, type }) {
+  const typeClass = type ? styles[type] : "";
+  const contentHtml = Array.isArray(content) ? `<div class="${styles.reflectionLines}">${content.join("")}</div>` : `<span>${escapeHtml(content)}</span>`;
+  return `
+		<div class="${styles.historyItem} ${typeClass}">
+			<div class="${styles.historyContent}">
+				<span class="${styles.statusIcon}">${icon}</span>
+				${contentHtml}
+			</div>
+			${meta ? `<div class="${styles.historyMeta}">${meta}</div>` : ""}
+		</div>
+	`;
+}
+__name(createCard, "createCard");
+function formatTime(locale = "en-US") {
+  return (/* @__PURE__ */ new Date()).toLocaleTimeString(locale, {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+__name(formatTime, "formatTime");
+function createReflectionLines(reflection) {
+  const lines = [];
+  if (reflection.evaluation_previous_goal) {
+    lines.push(`<div>🔍 ${escapeHtml(reflection.evaluation_previous_goal)}</div>`);
+  }
+  if (reflection.memory) {
+    lines.push(`<div>💾 ${escapeHtml(reflection.memory)}</div>`);
+  }
+  if (reflection.next_goal) {
+    lines.push(`<div>🎯 ${escapeHtml(reflection.next_goal)}</div>`);
+  }
+  return lines;
+}
+__name(createReflectionLines, "createReflectionLines");
 const _Panel = class _Panel {
-  constructor(config) {
+  /**
+   * Create a Panel bound to an agent
+   * @param agent - Agent instance that implements PanelAgentAdapter
+   * @param config - Optional panel configuration
+   */
+  constructor(agent, config = {}) {
     __privateAdd(this, _Panel_instances);
     __privateAdd(this, _wrapper);
     __privateAdd(this, _indicator);
@@ -307,17 +295,24 @@ const _Panel = class _Panel {
     __privateAdd(this, _stopButton);
     __privateAdd(this, _inputSection);
     __privateAdd(this, _taskInput);
-    __privateAdd(this, _state, new UIState());
-    __privateAdd(this, _isExpanded, false);
+    __privateAdd(this, _agent);
     __privateAdd(this, _config);
+    __privateAdd(this, _isExpanded, false);
     __privateAdd(this, _i18n);
     __privateAdd(this, _userAnswerResolver, null);
     __privateAdd(this, _isWaitingForUserAnswer, false);
     __privateAdd(this, _headerUpdateTimer, null);
     __privateAdd(this, _pendingHeaderText, null);
     __privateAdd(this, _isAnimating, false);
+    // Event handlers (bound for removal)
+    __privateAdd(this, _onStatusChange, /* @__PURE__ */ __name(() => __privateMethod(this, _Panel_instances, handleStatusChange_fn).call(this), "#onStatusChange"));
+    __privateAdd(this, _onHistoryChange, /* @__PURE__ */ __name(() => __privateMethod(this, _Panel_instances, handleHistoryChange_fn).call(this), "#onHistoryChange"));
+    __privateAdd(this, _onActivity, /* @__PURE__ */ __name((e) => __privateMethod(this, _Panel_instances, handleActivity_fn).call(this, e.detail), "#onActivity"));
+    __privateAdd(this, _onAgentDispose, /* @__PURE__ */ __name(() => this.dispose(), "#onAgentDispose"));
+    __privateSet(this, _agent, agent);
     __privateSet(this, _config, config);
     __privateSet(this, _i18n, new I18n(config.language ?? "en-US"));
+    __privateGet(this, _agent).onAskUser = (question2) => __privateMethod(this, _Panel_instances, askUser_fn).call(this, question2);
     __privateSet(this, _wrapper, __privateMethod(this, _Panel_instances, createWrapper_fn).call(this));
     __privateSet(this, _indicator, __privateGet(this, _wrapper).querySelector(`.${styles.indicator}`));
     __privateSet(this, _statusText, __privateGet(this, _wrapper).querySelector(`.${styles.statusText}`));
@@ -326,6 +321,10 @@ const _Panel = class _Panel {
     __privateSet(this, _stopButton, __privateGet(this, _wrapper).querySelector(`.${styles.stopButton}`));
     __privateSet(this, _inputSection, __privateGet(this, _wrapper).querySelector(`.${styles.inputSectionWrapper}`));
     __privateSet(this, _taskInput, __privateGet(this, _wrapper).querySelector(`.${styles.taskInput}`));
+    __privateGet(this, _agent).addEventListener("statuschange", __privateGet(this, _onStatusChange));
+    __privateGet(this, _agent).addEventListener("historychange", __privateGet(this, _onHistoryChange));
+    __privateGet(this, _agent).addEventListener("activity", __privateGet(this, _onActivity));
+    __privateGet(this, _agent).addEventListener("dispose", __privateGet(this, _onAgentDispose));
     __privateMethod(this, _Panel_instances, setupEventListeners_fn).call(this);
     __privateMethod(this, _Panel_instances, startHeaderUpdateLoop_fn).call(this);
     __privateMethod(this, _Panel_instances, showInputArea_fn).call(this);
@@ -334,23 +333,6 @@ const _Panel = class _Panel {
   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";
@@ -364,10 +346,9 @@ const _Panel = class _Panel {
     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, renderHistory_fn).call(this);
     __privateMethod(this, _Panel_instances, collapse_fn).call(this);
     __privateSet(this, _isWaitingForUserAnswer, false);
     __privateSet(this, _userAnswerResolver, null);
@@ -380,16 +361,13 @@ const _Panel = class _Panel {
     __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 panel and clean up event listeners
    */
   dispose() {
+    __privateGet(this, _agent).removeEventListener("statuschange", __privateGet(this, _onStatusChange));
+    __privateGet(this, _agent).removeEventListener("historychange", __privateGet(this, _onHistoryChange));
+    __privateGet(this, _agent).removeEventListener("activity", __privateGet(this, _onActivity));
+    __privateGet(this, _agent).removeEventListener("dispose", __privateGet(this, _onAgentDispose));
     __privateSet(this, _isWaitingForUserAnswer, false);
     __privateMethod(this, _Panel_instances, stopHeaderUpdateLoop_fn).call(this);
     this.wrapper.remove();
@@ -403,133 +381,121 @@ _expandButton = new WeakMap();
 _stopButton = new WeakMap();
 _inputSection = new WeakMap();
 _taskInput = new WeakMap();
-_state = new WeakMap();
-_isExpanded = new WeakMap();
+_agent = new WeakMap();
 _config = new WeakMap();
+_isExpanded = new WeakMap();
 _i18n = new WeakMap();
 _userAnswerResolver = new WeakMap();
 _isWaitingForUserAnswer = new WeakMap();
 _headerUpdateTimer = new WeakMap();
 _pendingHeaderText = new WeakMap();
 _isAnimating = new WeakMap();
+_onStatusChange = new WeakMap();
+_onHistoryChange = new WeakMap();
+_onActivity = new WeakMap();
+_onAgentDispose = new WeakMap();
 _Panel_instances = new WeakSet();
-// ========== Private methods ==========
+// ========== Agent event handlers ==========
+/** Handle agent status change */
+handleStatusChange_fn = /* @__PURE__ */ __name(function() {
+  const status = __privateGet(this, _agent).status;
+  const indicatorType = status === "running" ? "thinking" : status === "idle" ? "thinking" : status;
+  __privateMethod(this, _Panel_instances, updateStatusIndicator_fn).call(this, indicatorType);
+  if (status === "running") {
+    this.show();
+    __privateMethod(this, _Panel_instances, hideInputArea_fn).call(this);
+  }
+  if (status === "completed" || status === "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);
+    }
+  }
+}, "#handleStatusChange");
+/** Handle agent history change - re-render history list from agent.history */
+handleHistoryChange_fn = /* @__PURE__ */ __name(function() {
+  __privateMethod(this, _Panel_instances, renderHistory_fn).call(this);
+}, "#handleHistoryChange");
 /**
- * Convert semantic update to step data with i18n
+ * Handle agent activity - transient state for immediate UI feedback
+ * Activity events are NOT persisted in history, only used for header bar updates
  */
-toStepData_fn = /* @__PURE__ */ __name(function(data) {
-  switch (data.type) {
+handleActivity_fn = /* @__PURE__ */ __name(function(activity) {
+  switch (activity.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})` };
+      __privateSet(this, _pendingHeaderText, __privateGet(this, _i18n).t("ui.panel.thinking"));
+      __privateMethod(this, _Panel_instances, updateStatusIndicator_fn).call(this, "thinking");
+      break;
+    case "executing":
+      __privateSet(this, _pendingHeaderText, __privateMethod(this, _Panel_instances, getToolExecutingText_fn).call(this, activity.tool, activity.input));
+      __privateMethod(this, _Panel_instances, updateStatusIndicator_fn).call(this, "executing");
+      break;
+    case "executed":
+      __privateSet(this, _pendingHeaderText, truncate(activity.output, 50));
+      break;
+    case "retrying":
+      __privateSet(this, _pendingHeaderText, `Retrying (${activity.attempt}/${activity.maxAttempts})`);
+      __privateMethod(this, _Panel_instances, updateStatusIndicator_fn).call(this, "retrying");
+      break;
     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
-      };
-    }
-    case "observation":
-      return { type: "observation", displayText: data.content };
+      __privateSet(this, _pendingHeaderText, truncate(activity.message, 50));
+      __privateMethod(this, _Panel_instances, updateStatusIndicator_fn).call(this, "error");
+      break;
   }
-}, "#toStepData");
+}, "#handleActivity");
+/**
+ * Ask for user input (internal, called by agent via onAskUser)
+ */
+askUser_fn = /* @__PURE__ */ __name(function(question2) {
+  return new Promise((resolve) => {
+    __privateSet(this, _isWaitingForUserAnswer, true);
+    __privateSet(this, _userAnswerResolver, resolve);
+    if (!__privateGet(this, _isExpanded)) {
+      __privateMethod(this, _Panel_instances, expand_fn).call(this);
+    }
+    const tempCard = document.createElement("div");
+    tempCard.innerHTML = createCard({
+      icon: "❓",
+      content: `Question: ${question2}`,
+      meta: formatTime(__privateGet(this, _config).language ?? "en-US"),
+      type: "question"
+    });
+    const cardElement = tempCard.firstElementChild;
+    cardElement.setAttribute("data-temp-card", "true");
+    __privateGet(this, _historySection).appendChild(cardElement);
+    __privateMethod(this, _Panel_instances, scrollToBottom_fn).call(this);
+    __privateMethod(this, _Panel_instances, showInputArea_fn).call(this, __privateGet(this, _i18n).t("ui.panel.userAnswerPrompt"));
+  });
+}, "#askUser");
+// ========== Private methods ==========
 getToolExecutingText_fn = /* @__PURE__ */ __name(function(toolName, args) {
+  const a = args;
   switch (toolName) {
     case "click_element_by_index":
-      return __privateGet(this, _i18n).t("ui.tools.clicking", { index: args.index });
+      return __privateGet(this, _i18n).t("ui.tools.clicking", { index: a.index });
     case "input_text":
-      return __privateGet(this, _i18n).t("ui.tools.inputting", { index: args.index });
+      return __privateGet(this, _i18n).t("ui.tools.inputting", { index: a.index });
     case "select_dropdown_option":
-      return __privateGet(this, _i18n).t("ui.tools.selecting", { text: args.text });
+      return __privateGet(this, _i18n).t("ui.tools.selecting", { text: a.text });
     case "scroll":
       return __privateGet(this, _i18n).t("ui.tools.scrolling");
     case "wait":
-      return __privateGet(this, _i18n).t("ui.tools.waiting", { seconds: args.seconds });
+      return __privateGet(this, _i18n).t("ui.tools.waiting", { seconds: a.seconds });
+    case "ask_user":
+      return __privateGet(this, _i18n).t("ui.tools.askingUser");
     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");
 /**
  * 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();
+  __privateGet(this, _agent).dispose();
 }, "#stopAgent");
 /**
  * Submit task
@@ -541,16 +507,17 @@ submitTask_fn = /* @__PURE__ */ __name(function() {
   if (__privateGet(this, _isWaitingForUserAnswer)) {
     __privateMethod(this, _Panel_instances, handleUserAnswer_fn).call(this, input2);
   } else {
-    __privateGet(this, _config).onExecuteTask(input2);
+    __privateGet(this, _agent).execute(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 })
+  Array.from(__privateGet(this, _historySection).children).forEach((child) => {
+    if (child.getAttribute("data-temp-card") === "true") {
+      child.remove();
+    }
   });
   __privateSet(this, _isWaitingForUserAnswer, false);
   if (__privateGet(this, _userAnswerResolver)) {
@@ -580,12 +547,16 @@ hideInputArea_fn = /* @__PURE__ */ __name(function() {
  */
 shouldShowInputArea_fn = /* @__PURE__ */ __name(function() {
   if (__privateGet(this, _isWaitingForUserAnswer)) return true;
-  const steps = __privateGet(this, _state).getAllSteps();
-  if (steps.length === 0) {
+  const history = __privateGet(this, _agent).history;
+  if (history.length === 0) {
     return true;
   }
-  const lastStep = steps[steps.length - 1];
-  return lastStep.type === "completed" || lastStep.type === "error";
+  const status = __privateGet(this, _agent).status;
+  const isTaskEnded = status === "completed" || status === "error";
+  if (isTaskEnded) {
+    return __privateGet(this, _config).promptForNextTask ?? true;
+  }
+  return false;
 }, "#shouldShowInputArea");
 createWrapper_fn = /* @__PURE__ */ __name(function() {
   const wrapper2 = document.createElement("div");
@@ -596,13 +567,12 @@ createWrapper_fn = /* @__PURE__ */ __name(function() {
 			<div class="${styles.background}"></div>
 			<div class="${styles.historySectionWrapper}">
 				<div class="${styles.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 class="${styles.historyItem}">
+						<div class="${styles.historyContent}">
+							<span class="${styles.statusIcon}">🧠</span>
+							<span>${__privateGet(this, _i18n).t("ui.panel.waitingPlaceholder")}</span>
+						</div>
+					</div>
 				</div>
 			</div>
 			<div class="${styles.header}">
@@ -728,80 +698,100 @@ updateStatusIndicator_fn = /* @__PURE__ */ __name(function(type) {
   __privateGet(this, _indicator).className = styles.indicator;
   __privateGet(this, _indicator).classList.add(styles[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"
+/**
+ * Render history directly from agent.history
+ *
+ * Renders:
+ * 1. Task (first item, from agent.task)
+ * 2. Reflection cards (evaluation, memory, next_goal)
+ * 3. Tool execution with output
+ * 4. Observations
+ */
+renderHistory_fn = /* @__PURE__ */ __name(function() {
+  const items = [];
+  const task = __privateGet(this, _agent).task;
+  if (task) {
+    items.push(__privateMethod(this, _Panel_instances, createTaskCard_fn).call(this, task));
+  }
+  const history = __privateGet(this, _agent).history;
+  for (let i = 0; i < history.length; i++) {
+    const event = history[i];
+    items.push(...__privateMethod(this, _Panel_instances, createHistoryCards_fn).call(this, event, i + 1));
+  }
+  __privateGet(this, _historySection).innerHTML = items.join("");
+  __privateMethod(this, _Panel_instances, scrollToBottom_fn).call(this);
+}, "#renderHistory");
+createTaskCard_fn = /* @__PURE__ */ __name(function(task) {
+  return createCard({ icon: "🎯", content: task, type: "input" });
+}, "#createTaskCard");
+/** Create cards for a history event */
+createHistoryCards_fn = /* @__PURE__ */ __name(function(event, stepNumber) {
+  const cards = [];
+  const time = formatTime(__privateGet(this, _config).language ?? "en-US");
+  const meta = __privateGet(this, _i18n).t("ui.panel.step", {
+    number: stepNumber.toString(),
+    time,
+    duration: ""
   });
-  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.doneSuccess : styles.doneError;
-      statusIcon2 = isSuccess ? "🎉" : "❌";
-    } else {
-      typeClass = styles.completed;
-      statusIcon2 = "✅";
+  if (event.type === "step") {
+    if (event.reflection) {
+      const lines = createReflectionLines(event.reflection);
+      if (lines.length > 0) {
+        cards.push(createCard({ icon: "🧠", content: lines, meta }));
+      }
+    }
+    const action = event.action;
+    if (action) {
+      cards.push(...__privateMethod(this, _Panel_instances, createActionCards_fn).call(this, action, meta));
+    }
+  } else if (event.type === "observation") {
+    cards.push(
+      createCard({ icon: "👁️", content: event.content || "", meta, type: "observation" })
+    );
+  } else if (event.type === "user_takeover") {
+    cards.push(createCard({ icon: "👤", content: "User takeover", meta, type: "input" }));
+  }
+  return cards;
+}, "#createHistoryCards");
+/** Create cards for an action */
+createActionCards_fn = /* @__PURE__ */ __name(function(action, meta) {
+  const cards = [];
+  if (action.name === "done") {
+    const input2 = action.input;
+    const text = input2.text || action.output || "";
+    if (text) {
+      cards.push(createCard({ icon: "🤖", content: text, meta, type: "output" }));
     }
-  } else if (step.type === "error") {
-    typeClass = styles.error;
-    statusIcon2 = "❌";
-  } else if (step.type === "tool_executing") {
-    statusIcon2 = "🔨";
-  } else if (step.type === "output") {
-    typeClass = styles.output;
-    statusIcon2 = "🤖";
-  } else if (step.type === "input") {
-    typeClass = styles.input;
-    statusIcon2 = "🎯";
-  } else if (step.type === "retry") {
-    typeClass = styles.retry;
-    statusIcon2 = "🔄";
-  } else if (step.type === "observation") {
-    typeClass = styles.observation;
-    statusIcon2 = "👁️";
+  } else if (action.name === "ask_user") {
+    const input2 = action.input;
+    const answer = action.output.replace(/^User answered:\s*/i, "");
+    cards.push(
+      createCard({
+        icon: "❓",
+        content: `Question: ${input2.question || ""}`,
+        meta,
+        type: "question"
+      })
+    );
+    cards.push(createCard({ icon: "💬", content: `Answer: ${answer}`, meta, type: "input" }));
   } else {
-    statusIcon2 = "🧠";
+    const toolText = __privateMethod(this, _Panel_instances, getToolExecutingText_fn).call(this, action.name, action.input);
+    cards.push(createCard({ icon: "🔨", content: toolText, meta }));
+    if (action.output?.length > 0) {
+      cards.push(createCard({ icon: "🔨", content: action.output, meta, type: "output" }));
+    }
   }
-  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.historyItem} ${typeClass}">
-				<div class="${styles.historyContent}">
-					<span class="${styles.statusIcon}">${statusIcon2}</span>
-					<span>${escapeHtml(step.displayText)}</span>
-				</div>
-				<div class="${styles.historyMeta}">
-					${stepLabel}
-				</div>
-			</div>
-		`;
-}, "#createHistoryItem");
+  return cards;
+}, "#createActionCards");
 __name(_Panel, "Panel");
 let Panel = _Panel;
 export {
   I18n,
-  Panel,
-  UIState
+  Panel
 };
 //# sourceMappingURL=page-agent-ui.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"page-agent-ui.js","sources":["../../src/UIState.ts","../../src/i18n/locales.ts","../../src/i18n/index.ts","../../src/utils.ts","../../src/Panel.ts"],"sourcesContent":["/**\n * Agent execution state management\n */\n\nexport interface Step {\n\tid: string\n\tstepNumber: number\n\ttimestamp: Date\n\ttype:\n\t\t| 'thinking'\n\t\t| 'tool_executing'\n\t\t| 'completed'\n\t\t| 'error'\n\t\t| 'output'\n\t\t| 'input'\n\t\t| 'retry'\n\t\t| 'observation'\n\n\t// Tool execution related\n\ttoolName?: string\n\ttoolArgs?: any\n\ttoolResult?: any\n\n\t// Display data\n\tdisplayText: string\n\tduration?: number\n}\n\nexport type AgentStatus = 'idle' | 'running' | 'completed' | 'error'\n\nexport class UIState {\n\tprivate steps: Step[] = []\n\tprivate currentStep: Step | null = null\n\tprivate status: AgentStatus = 'idle'\n\tprivate stepCounter = 0\n\n\taddStep(stepData: Omit<Step, 'id' | 'stepNumber' | 'timestamp'>): Step {\n\t\tconst step: Step = {\n\t\t\tid: this.generateId(),\n\t\t\tstepNumber: ++this.stepCounter,\n\t\t\ttimestamp: new Date(),\n\t\t\t...stepData,\n\t\t}\n\n\t\tthis.steps.push(step)\n\t\tthis.currentStep = step\n\n\t\t// Update overall status\n\t\tthis.updateStatus(step.type)\n\n\t\treturn step\n\t}\n\n\tupdateCurrentStep(updates: Partial<Step>): Step | null {\n\t\tif (!this.currentStep) return null\n\n\t\tObject.assign(this.currentStep, updates)\n\t\treturn this.currentStep\n\t}\n\n\tgetCurrentStep(): Step | null {\n\t\treturn this.currentStep\n\t}\n\n\tgetAllSteps(): Step[] {\n\t\treturn [...this.steps]\n\t}\n\n\tgetStatus(): AgentStatus {\n\t\treturn this.status\n\t}\n\n\treset(): void {\n\t\tthis.steps = []\n\t\tthis.currentStep = null\n\t\tthis.status = 'idle'\n\t\tthis.stepCounter = 0\n\t}\n\n\tprivate updateStatus(stepType: Step['type']): void {\n\t\tswitch (stepType) {\n\t\t\tcase 'thinking':\n\t\t\tcase 'tool_executing':\n\t\t\tcase 'output':\n\t\t\tcase 'input':\n\t\t\tcase 'retry':\n\t\t\t\tthis.status = 'running'\n\t\t\t\tbreak\n\t\t\tcase 'completed':\n\t\t\t\tthis.status = 'completed'\n\t\t\t\tbreak\n\t\t\tcase 'error':\n\t\t\t\tthis.status = 'error'\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tprivate generateId(): string {\n\t\treturn `step_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`\n\t}\n}\n","// English translations (base/reference language)\nconst enUS = {\n\tui: {\n\t\tpanel: {\n\t\t\tready: 'Ready',\n\t\t\tthinking: 'Thinking...',\n\t\t\ttaskInput: 'Enter new task, describe steps in detail, press Enter to submit',\n\t\t\tuserAnswerPrompt: 'Please answer the question above, press Enter to submit',\n\t\t\ttaskTerminated: 'Task terminated',\n\t\t\ttaskCompleted: 'Task completed',\n\t\t\tuserAnswer: 'User answer: {{input}}',\n\t\t\tquestion: 'Question: {{question}}',\n\t\t\twaitingPlaceholder: 'Waiting for task to start...',\n\t\t\tstop: 'Stop',\n\t\t\texpand: 'Expand history',\n\t\t\tcollapse: 'Collapse history',\n\t\t\tstep: 'Step {{number}} · {{time}}{{duration}}',\n\t\t},\n\t\ttools: {\n\t\t\tclicking: 'Clicking element [{{index}}]...',\n\t\t\tinputting: 'Inputting text to element [{{index}}]...',\n\t\t\tselecting: 'Selecting option \"{{text}}\"...',\n\t\t\tscrolling: 'Scrolling page...',\n\t\t\twaiting: 'Waiting {{seconds}} seconds...',\n\t\t\tdone: 'Task done',\n\t\t\tclicked: '🖱️ Clicked element [{{index}}]',\n\t\t\tinputted: '⌨️ Inputted text \"{{text}}\"',\n\t\t\tselected: '☑️ Selected option \"{{text}}\"',\n\t\t\tscrolled: '🛞 Page scrolled',\n\t\t\twaited: '⌛️ Wait completed',\n\t\t\texecuting: 'Executing {{toolName}}...',\n\t\t\tresultSuccess: 'success',\n\t\t\tresultFailure: 'failed',\n\t\t\tresultError: 'error',\n\t\t},\n\t\terrors: {\n\t\t\telementNotFound: 'No interactive element found at index {{index}}',\n\t\t\ttaskRequired: 'Task description is required',\n\t\t\texecutionFailed: 'Task execution failed',\n\t\t\tnotInputElement: 'Element is not an input or textarea',\n\t\t\tnotSelectElement: 'Element is not a select element',\n\t\t\toptionNotFound: 'Option \"{{text}}\" not found',\n\t\t},\n\t},\n} as const\n\n// Chinese translations (must match the structure of enUS)\nconst zhCN = {\n\tui: {\n\t\tpanel: {\n\t\t\tready: '准备就绪',\n\t\t\tthinking: '正在思考...',\n\t\t\ttaskInput: '输入新任务，详细描述步骤，回车提交',\n\t\t\tuserAnswerPrompt: '请回答上面问题，回车提交',\n\t\t\ttaskTerminated: '任务已终止',\n\t\t\ttaskCompleted: '任务结束',\n\t\t\tuserAnswer: '用户回答: {{input}}',\n\t\t\tquestion: '询问: {{question}}',\n\t\t\twaitingPlaceholder: '等待任务开始...',\n\t\t\tstop: '终止',\n\t\t\texpand: '展开历史',\n\t\t\tcollapse: '收起历史',\n\t\t\tstep: '步骤 {{number}} · {{time}}{{duration}}',\n\t\t},\n\t\ttools: {\n\t\t\tclicking: '正在点击元素 [{{index}}]...',\n\t\t\tinputting: '正在输入文本到元素 [{{index}}]...',\n\t\t\tselecting: '正在选择选项 \"{{text}}\"...',\n\t\t\tscrolling: '正在滚动页面...',\n\t\t\twaiting: '等待 {{seconds}} 秒...',\n\t\t\tdone: '结束任务',\n\t\t\tclicked: '🖱️ 已点击元素 [{{index}}]',\n\t\t\tinputted: '⌨️ 已输入文本 \"{{text}}\"',\n\t\t\tselected: '☑️ 已选择选项 \"{{text}}\"',\n\t\t\tscrolled: '🛞 页面滚动完成',\n\t\t\twaited: '⌛️ 等待完成',\n\t\t\texecuting: '正在执行 {{toolName}}...',\n\t\t\tresultSuccess: '成功',\n\t\t\tresultFailure: '失败',\n\t\t\tresultError: '错误',\n\t\t},\n\t\terrors: {\n\t\t\telementNotFound: '未找到索引为 {{index}} 的交互元素',\n\t\t\ttaskRequired: '任务描述不能为空',\n\t\t\texecutionFailed: '任务执行失败',\n\t\t\tnotInputElement: '元素不是输入框或文本域',\n\t\t\tnotSelectElement: '元素不是选择框',\n\t\t\toptionNotFound: '未找到选项 \"{{text}}\"',\n\t\t},\n\t},\n} as const\n\n// Type definitions generated from English base structure (but with string values)\ntype DeepStringify<T> = {\n\t[K in keyof T]: T[K] extends string ? string : T[K] extends object ? DeepStringify<T[K]> : T[K]\n}\n\nexport type TranslationSchema = DeepStringify<typeof enUS>\n\n// Utility type: Extract all nested paths from translation object\ntype NestedKeyOf<ObjectType extends object> = {\n\t[Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object\n\t\t? `${Key}` | `${Key}.${NestedKeyOf<ObjectType[Key]>}`\n\t\t: `${Key}`\n}[keyof ObjectType & (string | number)]\n\n// Extract all possible key paths from translation structure\nexport type TranslationKey = NestedKeyOf<TranslationSchema>\n\n// Parameterized translation types\nexport type TranslationParams = Record<string, string | number>\n\nexport const locales = {\n\t'en-US': enUS,\n\t'zh-CN': zhCN,\n} as const\n\nexport type SupportedLanguage = keyof typeof locales\n","import {\n\ttype SupportedLanguage,\n\ttype TranslationKey,\n\ttype TranslationParams,\n\ttype TranslationSchema,\n\tlocales,\n} from './locales'\n\nexport class I18n {\n\tprivate language: SupportedLanguage\n\tprivate translations: TranslationSchema\n\n\tconstructor(language: SupportedLanguage = 'en-US') {\n\t\tthis.language = language in locales ? language : 'en-US'\n\t\tthis.translations = locales[this.language]\n\t}\n\n\t// 类型安全的翻译方法\n\tt(key: TranslationKey, params?: TranslationParams): string {\n\t\tconst value = this.getNestedValue(this.translations, key)\n\t\tif (!value) {\n\t\t\tconsole.warn(`Translation key \"${key}\" not found for language \"${this.language}\"`)\n\t\t\treturn key\n\t\t}\n\n\t\tif (params) {\n\t\t\treturn this.interpolate(value, params)\n\t\t}\n\t\treturn value\n\t}\n\n\tprivate getNestedValue(obj: any, path: string): string | undefined {\n\t\treturn path.split('.').reduce((current, key) => current?.[key], obj)\n\t}\n\n\tprivate interpolate(template: string, params: TranslationParams): string {\n\t\treturn template.replace(/\\{\\{(\\w+)\\}\\}/g, (match, key) => {\n\t\t\t// Use != null to check for both null and undefined, allow empty strings\n\t\t\treturn params[key] != null ? params[key].toString() : match\n\t\t})\n\t}\n\n\tgetLanguage(): SupportedLanguage {\n\t\treturn this.language\n\t}\n}\n\n// 导出类型和实例创建函数\nexport type { TranslationKey, SupportedLanguage, TranslationParams }\nexport { locales }\n","export function truncate(text: string, maxLength: number): string {\n\tif (text.length > maxLength) {\n\t\treturn text.substring(0, maxLength) + '...'\n\t}\n\treturn text\n}\n\n/**\n * Escape HTML special characters to prevent XSS and rendering issues\n */\nexport function escapeHtml(text: string): string {\n\treturn text\n\t\t.replace(/&/g, '&amp;')\n\t\t.replace(/</g, '&lt;')\n\t\t.replace(/>/g, '&gt;')\n\t\t.replace(/\"/g, '&quot;')\n\t\t.replace(/'/g, '&#039;')\n}\n","import { type Step, UIState } from './UIState'\nimport { I18n, type SupportedLanguage } from './i18n'\nimport { escapeHtml, truncate } from './utils'\n\nimport styles from './Panel.module.css'\n\n/**\n * Panel configuration\n */\nexport interface PanelConfig {\n\tlanguage?: SupportedLanguage\n\tonExecuteTask: (task: string) => void\n\tonStop: () => void\n}\n\n/**\n * Semantic update types - Panel handles i18n internally\n */\nexport type PanelUpdate =\n\t| { type: 'thinking'; text?: string } // text is optional, defaults to i18n thinking text\n\t| { type: 'input'; task: string }\n\t| { type: 'question'; question: string }\n\t| { type: 'userAnswer'; input: string }\n\t| { type: 'retry'; current: number; max: number }\n\t| { type: 'error'; message: string }\n\t| { type: 'output'; text: string }\n\t| { type: 'completed' }\n\t| { type: 'toolExecuting'; toolName: string; args: any }\n\t| { type: 'toolCompleted'; toolName: string; args: any; result?: string; duration?: number }\n\t| { type: 'observation'; content: string }\n\n/**\n * Agent control panel\n */\nexport class Panel {\n\t#wrapper: HTMLElement\n\t#indicator: HTMLElement\n\t#statusText: HTMLElement\n\t#historySection: HTMLElement\n\t#expandButton: HTMLElement\n\t#stopButton: HTMLElement\n\t#inputSection: HTMLElement\n\t#taskInput: HTMLInputElement\n\n\t#state = new UIState()\n\t#isExpanded = false\n\t#config: PanelConfig\n\t#i18n: I18n\n\t#userAnswerResolver: ((input: string) => void) | null = null\n\t#isWaitingForUserAnswer: boolean = false\n\t#headerUpdateTimer: ReturnType<typeof setInterval> | null = null\n\t#pendingHeaderText: string | null = null\n\t#isAnimating = false\n\n\tget wrapper(): HTMLElement {\n\t\treturn this.#wrapper\n\t}\n\n\tconstructor(config: PanelConfig) {\n\t\tthis.#config = config\n\t\tthis.#i18n = new I18n(config.language ?? 'en-US')\n\t\tthis.#wrapper = this.#createWrapper()\n\t\tthis.#indicator = this.#wrapper.querySelector(`.${styles.indicator}`)!\n\t\tthis.#statusText = this.#wrapper.querySelector(`.${styles.statusText}`)!\n\t\tthis.#historySection = this.#wrapper.querySelector(`.${styles.historySection}`)!\n\t\tthis.#expandButton = this.#wrapper.querySelector(`.${styles.expandButton}`)!\n\t\tthis.#stopButton = this.#wrapper.querySelector(`.${styles.stopButton}`)!\n\t\tthis.#inputSection = this.#wrapper.querySelector(`.${styles.inputSectionWrapper}`)!\n\t\tthis.#taskInput = this.#wrapper.querySelector(`.${styles.taskInput}`)!\n\n\t\tthis.#setupEventListeners()\n\t\tthis.#startHeaderUpdateLoop()\n\n\t\tthis.#showInputArea()\n\n\t\tthis.hide() // Start hidden\n\t}\n\n\t/**\n\t * Ask for user input\n\t */\n\tasync askUser(question: string): Promise<string> {\n\t\treturn new Promise((resolve) => {\n\t\t\t// Set `waiting for user answer` state\n\t\t\tthis.#isWaitingForUserAnswer = true\n\t\t\tthis.#userAnswerResolver = resolve\n\n\t\t\t// Update state to `running`\n\t\t\tthis.#updateInternal({\n\t\t\t\ttype: 'output',\n\t\t\t\tdisplayText: this.#i18n.t('ui.panel.question', { question }),\n\t\t\t}) // Expand history panel\n\t\t\tif (!this.#isExpanded) {\n\t\t\t\tthis.#expand()\n\t\t\t}\n\n\t\t\tthis.#showInputArea(this.#i18n.t('ui.panel.userAnswerPrompt'))\n\t\t})\n\t}\n\n\t// ========== Public control methods ==========\n\n\tshow(): void {\n\t\tthis.wrapper.style.display = 'block'\n\t\tvoid this.wrapper.offsetHeight\n\t\tthis.wrapper.style.opacity = '1'\n\t\tthis.wrapper.style.transform = 'translateX(-50%) translateY(0)'\n\t}\n\n\thide(): void {\n\t\tthis.wrapper.style.opacity = '0'\n\t\tthis.wrapper.style.transform = 'translateX(-50%) translateY(20px)'\n\t\tthis.wrapper.style.display = 'none'\n\t}\n\n\treset(): void {\n\t\tthis.#state.reset()\n\t\tthis.#statusText.textContent = this.#i18n.t('ui.panel.ready')\n\t\tthis.#updateStatusIndicator('thinking')\n\t\tthis.#updateHistory()\n\t\tthis.#collapse()\n\t\t// Reset user input state\n\t\tthis.#isWaitingForUserAnswer = false\n\t\tthis.#userAnswerResolver = null\n\t\t// Show input area\n\t\tthis.#showInputArea()\n\t}\n\n\texpand(): void {\n\t\tthis.#expand()\n\t}\n\n\tcollapse(): void {\n\t\tthis.#collapse()\n\t}\n\n\t/**\n\t * Update panel with semantic data - i18n handled internally\n\t */\n\tupdate(data: PanelUpdate): void {\n\t\tconst stepData = this.#toStepData(data)\n\t\tthis.#updateInternal(stepData)\n\t}\n\n\t/**\n\t * Dispose panel\n\t */\n\tdispose(): void {\n\t\tthis.#isWaitingForUserAnswer = false\n\t\tthis.#stopHeaderUpdateLoop()\n\t\tthis.wrapper.remove()\n\t}\n\n\t// ========== Private methods ==========\n\n\t/**\n\t * Convert semantic update to step data with i18n\n\t */\n\t#toStepData(data: PanelUpdate): Omit<Step, 'id' | 'stepNumber' | 'timestamp'> {\n\t\tswitch (data.type) {\n\t\t\tcase 'thinking':\n\t\t\t\treturn { type: 'thinking', displayText: data.text ?? this.#i18n.t('ui.panel.thinking') }\n\t\t\tcase 'input':\n\t\t\t\treturn { type: 'input', displayText: data.task }\n\t\t\tcase 'question':\n\t\t\t\treturn {\n\t\t\t\t\ttype: 'output',\n\t\t\t\t\tdisplayText: this.#i18n.t('ui.panel.question', { question: data.question }),\n\t\t\t\t}\n\t\t\tcase 'userAnswer':\n\t\t\t\treturn {\n\t\t\t\t\ttype: 'input',\n\t\t\t\t\tdisplayText: this.#i18n.t('ui.panel.userAnswer', { input: data.input }),\n\t\t\t\t}\n\t\t\tcase 'retry':\n\t\t\t\treturn { type: 'retry', displayText: `retry-ing (${data.current} / ${data.max})` }\n\t\t\tcase 'error':\n\t\t\t\treturn { type: 'error', displayText: data.message }\n\t\t\tcase 'output':\n\t\t\t\treturn { type: 'output', displayText: data.text }\n\t\t\tcase 'completed':\n\t\t\t\treturn { type: 'completed', displayText: this.#i18n.t('ui.panel.taskCompleted') }\n\t\t\tcase 'toolExecuting':\n\t\t\t\treturn {\n\t\t\t\t\ttype: 'tool_executing',\n\t\t\t\t\ttoolName: data.toolName,\n\t\t\t\t\ttoolArgs: data.args,\n\t\t\t\t\tdisplayText: this.#getToolExecutingText(data.toolName, data.args),\n\t\t\t\t}\n\t\t\tcase 'toolCompleted': {\n\t\t\t\tconst displayText = this.#getToolCompletedText(data.toolName, data.args)\n\t\t\t\tif (!displayText) return { type: 'tool_executing', displayText: '' } // will be filtered\n\t\t\t\treturn {\n\t\t\t\t\ttype: 'tool_executing',\n\t\t\t\t\ttoolName: data.toolName,\n\t\t\t\t\ttoolArgs: data.args,\n\t\t\t\t\ttoolResult: data.result,\n\t\t\t\t\tdisplayText,\n\t\t\t\t\tduration: data.duration,\n\t\t\t\t}\n\t\t\t}\n\t\t\tcase 'observation':\n\t\t\t\treturn { type: 'observation', displayText: data.content }\n\t\t}\n\t}\n\n\t#getToolExecutingText(toolName: string, args: any): string {\n\t\tswitch (toolName) {\n\t\t\tcase 'click_element_by_index':\n\t\t\t\treturn this.#i18n.t('ui.tools.clicking', { index: args.index })\n\t\t\tcase 'input_text':\n\t\t\t\treturn this.#i18n.t('ui.tools.inputting', { index: args.index })\n\t\t\tcase 'select_dropdown_option':\n\t\t\t\treturn this.#i18n.t('ui.tools.selecting', { text: args.text })\n\t\t\tcase 'scroll':\n\t\t\t\treturn this.#i18n.t('ui.tools.scrolling')\n\t\t\tcase 'wait':\n\t\t\t\treturn this.#i18n.t('ui.tools.waiting', { seconds: args.seconds })\n\t\t\tcase 'done':\n\t\t\t\treturn this.#i18n.t('ui.tools.done')\n\t\t\tdefault:\n\t\t\t\treturn this.#i18n.t('ui.tools.executing', { toolName })\n\t\t}\n\t}\n\n\t#getToolCompletedText(toolName: string, args: any): string | null {\n\t\tswitch (toolName) {\n\t\t\tcase 'click_element_by_index':\n\t\t\t\treturn this.#i18n.t('ui.tools.clicked', { index: args.index })\n\t\t\tcase 'input_text':\n\t\t\t\treturn this.#i18n.t('ui.tools.inputted', { text: args.text })\n\t\t\tcase 'select_dropdown_option':\n\t\t\t\treturn this.#i18n.t('ui.tools.selected', { text: args.text })\n\t\t\tcase 'scroll':\n\t\t\t\treturn this.#i18n.t('ui.tools.scrolled')\n\t\t\tcase 'wait':\n\t\t\t\treturn this.#i18n.t('ui.tools.waited')\n\t\t\tcase 'done':\n\t\t\t\treturn null\n\t\t\tdefault:\n\t\t\t\treturn null\n\t\t}\n\t}\n\n\t/**\n\t * Update status (internal)\n\t */\n\t#updateInternal(stepData: Omit<Step, 'id' | 'stepNumber' | 'timestamp'>): void {\n\t\t// Skip empty displayText (filtered toolCompleted for 'done')\n\t\tif (!stepData.displayText) return\n\n\t\tconst step = this.#state.addStep(stepData)\n\n\t\t// Queue header text update (will be processed by periodic check)\n\t\tconst headerText = truncate(step.displayText, 20)\n\t\tthis.#pendingHeaderText = headerText\n\n\t\tthis.#updateStatusIndicator(step.type)\n\t\tthis.#updateHistory()\n\n\t\t// Auto-expand history after task completion\n\t\tif (step.type === 'completed' || step.type === 'error') {\n\t\t\tif (!this.#isExpanded) {\n\t\t\t\tthis.#expand()\n\t\t\t}\n\t\t}\n\n\t\t// Control input area display based on status\n\t\tif (this.#shouldShowInputArea()) {\n\t\t\tthis.#showInputArea()\n\t\t} else {\n\t\t\tthis.#hideInputArea()\n\t\t}\n\t}\n\n\t/**\n\t * Stop Agent\n\t */\n\t#stopAgent(): void {\n\t\t// Update status display\n\t\tthis.#updateInternal({\n\t\t\ttype: 'error',\n\t\t\tdisplayText: this.#i18n.t('ui.panel.taskTerminated'),\n\t\t})\n\n\t\tthis.#config.onStop()\n\t}\n\n\t/**\n\t * Submit task\n\t */\n\t#submitTask() {\n\t\tconst input = this.#taskInput.value.trim()\n\t\tif (!input) return\n\n\t\t// Hide input area\n\t\tthis.#hideInputArea()\n\n\t\tif (this.#isWaitingForUserAnswer) {\n\t\t\t// Handle user input mode\n\t\t\tthis.#handleUserAnswer(input)\n\t\t} else {\n\t\t\tthis.#config.onExecuteTask(input)\n\t\t}\n\t}\n\n\t/**\n\t * Handle user answer\n\t */\n\t#handleUserAnswer(input: string): void {\n\t\t// Add user input to history\n\t\tthis.#updateInternal({\n\t\t\ttype: 'input',\n\t\t\tdisplayText: this.#i18n.t('ui.panel.userAnswer', { input }),\n\t\t})\n\n\t\t// Reset state\n\t\tthis.#isWaitingForUserAnswer = false\n\n\t\t// Call resolver to return user input\n\t\tif (this.#userAnswerResolver) {\n\t\t\tthis.#userAnswerResolver(input)\n\t\t\tthis.#userAnswerResolver = null\n\t\t}\n\t}\n\n\t/**\n\t * Show input area\n\t */\n\t#showInputArea(placeholder?: string): void {\n\t\t// Clear input field\n\t\tthis.#taskInput.value = ''\n\t\tthis.#taskInput.placeholder = placeholder || this.#i18n.t('ui.panel.taskInput')\n\t\tthis.#inputSection.classList.remove(styles.hidden)\n\t\t// Focus on input field\n\t\tsetTimeout(() => {\n\t\t\tthis.#taskInput.focus()\n\t\t}, 100)\n\t}\n\n\t/**\n\t * Hide input area\n\t */\n\t#hideInputArea(): void {\n\t\tthis.#inputSection.classList.add(styles.hidden)\n\t}\n\n\t/**\n\t * Check if input area should be shown\n\t */\n\t#shouldShowInputArea(): boolean {\n\t\t// Always show input area if waiting for user input\n\t\tif (this.#isWaitingForUserAnswer) return true\n\n\t\tconst steps = this.#state.getAllSteps()\n\t\tif (steps.length === 0) {\n\t\t\treturn true // Initial state\n\t\t}\n\n\t\tconst lastStep = steps[steps.length - 1]\n\t\treturn lastStep.type === 'completed' || lastStep.type === 'error'\n\t}\n\n\t#createWrapper(): HTMLElement {\n\t\tconst wrapper = document.createElement('div')\n\t\twrapper.id = 'page-agent-runtime_agent-panel'\n\t\twrapper.className = styles.wrapper\n\t\twrapper.setAttribute('data-browser-use-ignore', 'true')\n\n\t\twrapper.innerHTML = `\n\t\t\t<div class=\"${styles.background}\"></div>\n\t\t\t<div class=\"${styles.historySectionWrapper}\">\n\t\t\t\t<div class=\"${styles.historySection}\">\n\t\t\t\t\t${this.#createHistoryItem({\n\t\t\t\t\t\tid: 'placeholder',\n\t\t\t\t\t\tstepNumber: 0,\n\t\t\t\t\t\ttimestamp: new Date(),\n\t\t\t\t\t\ttype: 'thinking',\n\t\t\t\t\t\tdisplayText: this.#i18n.t('ui.panel.waitingPlaceholder'),\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"${styles.header}\">\n\t\t\t\t<div class=\"${styles.statusSection}\">\n\t\t\t\t\t<div class=\"${styles.indicator} ${styles.thinking}\"></div>\n\t\t\t\t\t<div class=\"${styles.statusText}\">${this.#i18n.t('ui.panel.ready')}</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"${styles.controls}\">\n\t\t\t\t\t<button class=\"${styles.controlButton} ${styles.expandButton}\" title=\"${this.#i18n.t('ui.panel.expand')}\">\n\t\t\t\t\t\t▼\n\t\t\t\t\t</button>\n\t\t\t\t\t<button class=\"${styles.controlButton} ${styles.stopButton}\" title=\"${this.#i18n.t('ui.panel.stop')}\">\n\t\t\t\t\t\tX\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"${styles.inputSectionWrapper} ${styles.hidden}\">\n\t\t\t\t<div class=\"${styles.inputSection}\">\n\t\t\t\t\t<input \n\t\t\t\t\t\ttype=\"text\" \n\t\t\t\t\t\tclass=\"${styles.taskInput}\" \n\t\t\t\t\t\tmaxlength=\"200\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\n\t\tdocument.body.appendChild(wrapper)\n\t\treturn wrapper\n\t}\n\n\t#setupEventListeners(): void {\n\t\t// Click header area to expand/collapse\n\t\tconst header = this.wrapper.querySelector(`.${styles.header}`)!\n\t\theader.addEventListener('click', (e) => {\n\t\t\t// Don't trigger expand/collapse if clicking on buttons\n\t\t\tif ((e.target as HTMLElement).closest(`.${styles.controlButton}`)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.#toggle()\n\t\t})\n\n\t\t// Expand button\n\t\tthis.#expandButton.addEventListener('click', (e) => {\n\t\t\te.stopPropagation()\n\t\t\tthis.#toggle()\n\t\t})\n\n\t\t// Stop button\n\t\tthis.#stopButton.addEventListener('click', (e) => {\n\t\t\te.stopPropagation()\n\t\t\tthis.#stopAgent()\n\t\t})\n\n\t\t// Submit on Enter key in input field\n\t\tthis.#taskInput.addEventListener('keydown', (e) => {\n\t\t\tif (e.isComposing) return // Ignore IME composition keys\n\t\t\tif (e.key === 'Enter') {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.#submitTask()\n\t\t\t}\n\t\t})\n\n\t\t// Prevent input area click event bubbling\n\t\tthis.#inputSection.addEventListener('click', (e) => {\n\t\t\te.stopPropagation()\n\t\t})\n\t}\n\n\t#toggle(): void {\n\t\tif (this.#isExpanded) {\n\t\t\tthis.#collapse()\n\t\t} else {\n\t\t\tthis.#expand()\n\t\t}\n\t}\n\n\t#expand(): void {\n\t\tthis.#isExpanded = true\n\t\tthis.wrapper.classList.add(styles.expanded)\n\t\tthis.#expandButton.textContent = '▲'\n\t}\n\n\t#collapse(): void {\n\t\tthis.#isExpanded = false\n\t\tthis.wrapper.classList.remove(styles.expanded)\n\t\tthis.#expandButton.textContent = '▼'\n\t}\n\n\t/**\n\t * Start periodic header update loop\n\t */\n\t#startHeaderUpdateLoop(): void {\n\t\t// Check every 450ms (same as total animation duration)\n\t\tthis.#headerUpdateTimer = setInterval(() => {\n\t\t\tthis.#checkAndUpdateHeader()\n\t\t}, 450)\n\t}\n\n\t/**\n\t * Stop periodic header update loop\n\t */\n\t#stopHeaderUpdateLoop(): void {\n\t\tif (this.#headerUpdateTimer) {\n\t\t\tclearInterval(this.#headerUpdateTimer)\n\t\t\tthis.#headerUpdateTimer = null\n\t\t}\n\t}\n\n\t/**\n\t * Check if header needs update and trigger animation if not currently animating\n\t */\n\t#checkAndUpdateHeader(): void {\n\t\t// If no pending text or currently animating, skip\n\t\tif (!this.#pendingHeaderText || this.#isAnimating) {\n\t\t\treturn\n\t\t}\n\n\t\t// If text is already displayed, clear pending and skip\n\t\tif (this.#statusText.textContent === this.#pendingHeaderText) {\n\t\t\tthis.#pendingHeaderText = null\n\t\t\treturn\n\t\t}\n\n\t\t// Start animation\n\t\tconst textToShow = this.#pendingHeaderText\n\t\tthis.#pendingHeaderText = null\n\t\tthis.#animateTextChange(textToShow)\n\t}\n\n\t/**\n\t * Animate text change with fade out/in effect\n\t */\n\t#animateTextChange(newText: string): void {\n\t\tthis.#isAnimating = true\n\n\t\t// Fade out current text\n\t\tthis.#statusText.classList.add(styles.fadeOut)\n\n\t\tsetTimeout(() => {\n\t\t\t// Update text content\n\t\t\tthis.#statusText.textContent = newText\n\n\t\t\t// Fade in new text\n\t\t\tthis.#statusText.classList.remove(styles.fadeOut)\n\t\t\tthis.#statusText.classList.add(styles.fadeIn)\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.#statusText.classList.remove(styles.fadeIn)\n\t\t\t\tthis.#isAnimating = false\n\t\t\t}, 300)\n\t\t}, 150) // Half the duration of fade out animation\n\t}\n\n\t#updateStatusIndicator(type: Step['type']): void {\n\t\t// Clear all status classes\n\t\tthis.#indicator.className = styles.indicator\n\n\t\t// Add corresponding status class\n\t\tthis.#indicator.classList.add(styles[type])\n\t}\n\n\t#updateHistory(): void {\n\t\tconst steps = this.#state.getAllSteps()\n\t\tthis.#historySection.innerHTML = steps.map((step) => this.#createHistoryItem(step)).join('')\n\t\tthis.#scrollToBottom()\n\t}\n\n\t#scrollToBottom(): void {\n\t\t// Execute in next event loop to ensure DOM update completion\n\t\tsetTimeout(() => {\n\t\t\tthis.#historySection.scrollTop = this.#historySection.scrollHeight\n\t\t}, 0)\n\t}\n\n\t#createHistoryItem(step: Step): string {\n\t\tconst time = step.timestamp.toLocaleTimeString('zh-CN', {\n\t\t\thour12: false,\n\t\t\thour: '2-digit',\n\t\t\tminute: '2-digit',\n\t\t\tsecond: '2-digit',\n\t\t})\n\n\t\tlet typeClass = ''\n\t\tlet statusIcon = ''\n\n\t\t// Set styles and icons based on step type\n\t\tif (step.type === 'completed') {\n\t\t\t// Check if this is a result from done tool\n\t\t\tif (step.toolName === 'done') {\n\t\t\t\t// Judge success or failure based on result\n\t\t\t\tconst failureKeyword = this.#i18n.t('ui.tools.resultFailure')\n\t\t\t\tconst errorKeyword = this.#i18n.t('ui.tools.resultError')\n\t\t\t\tconst isSuccess =\n\t\t\t\t\t!step.toolResult ||\n\t\t\t\t\t(!step.toolResult.includes(failureKeyword) && !step.toolResult.includes(errorKeyword))\n\t\t\t\ttypeClass = isSuccess ? styles.doneSuccess : styles.doneError\n\t\t\t\tstatusIcon = isSuccess ? '🎉' : '❌'\n\t\t\t} else {\n\t\t\t\ttypeClass = styles.completed\n\t\t\t\tstatusIcon = '✅'\n\t\t\t}\n\t\t} else if (step.type === 'error') {\n\t\t\ttypeClass = styles.error\n\t\t\tstatusIcon = '❌'\n\t\t} else if (step.type === 'tool_executing') {\n\t\t\tstatusIcon = '🔨'\n\t\t} else if (step.type === 'output') {\n\t\t\ttypeClass = styles.output\n\t\t\tstatusIcon = '🤖'\n\t\t} else if (step.type === 'input') {\n\t\t\ttypeClass = styles.input\n\t\t\tstatusIcon = '🎯'\n\t\t} else if (step.type === 'retry') {\n\t\t\ttypeClass = styles.retry\n\t\t\tstatusIcon = '🔄'\n\t\t} else if (step.type === 'observation') {\n\t\t\ttypeClass = styles.observation\n\t\t\tstatusIcon = '👁️'\n\t\t} else {\n\t\t\tstatusIcon = '🧠'\n\t\t}\n\n\t\tconst durationText = step.duration ? ` · ${step.duration}ms` : ''\n\t\tconst stepLabel = this.#i18n.t('ui.panel.step', {\n\t\t\tnumber: step.stepNumber.toString(),\n\t\t\ttime,\n\t\t\tduration: durationText || '', // Explicitly pass empty string to replace template\n\t\t})\n\n\t\treturn `\n\t\t\t<div class=\"${styles.historyItem} ${typeClass}\">\n\t\t\t\t<div class=\"${styles.historyContent}\">\n\t\t\t\t\t<span class=\"${styles.statusIcon}\">${statusIcon}</span>\n\t\t\t\t\t<span>${escapeHtml(step.displayText)}</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"${styles.historyMeta}\">\n\t\t\t\t\t${stepLabel}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n"],"names":["input","wrapper","header","statusIcon"],"mappings":"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"}
+{"version":3,"file":"page-agent-ui.js","sources":["../../src/i18n/locales.ts","../../src/i18n/index.ts","../../src/utils.ts","../../src/panel/cards.ts","../../src/panel/Panel.ts"],"sourcesContent":["// English translations (base/reference language)\nconst enUS = {\n\tui: {\n\t\tpanel: {\n\t\t\tready: 'Ready',\n\t\t\tthinking: 'Thinking...',\n\t\t\ttaskInput: 'Enter new task, describe steps in detail, press Enter to submit',\n\t\t\tuserAnswerPrompt: 'Please answer the question above, press Enter to submit',\n\t\t\ttaskTerminated: 'Task terminated',\n\t\t\ttaskCompleted: 'Task completed',\n\t\t\tuserAnswer: 'User answer: {{input}}',\n\t\t\tquestion: 'Question: {{question}}',\n\t\t\twaitingPlaceholder: 'Waiting for task to start...',\n\t\t\tstop: 'Stop',\n\t\t\texpand: 'Expand history',\n\t\t\tcollapse: 'Collapse history',\n\t\t\tstep: 'Step {{number}} · {{time}}{{duration}}',\n\t\t},\n\t\ttools: {\n\t\t\tclicking: 'Clicking element [{{index}}]...',\n\t\t\tinputting: 'Inputting text to element [{{index}}]...',\n\t\t\tselecting: 'Selecting option \"{{text}}\"...',\n\t\t\tscrolling: 'Scrolling page...',\n\t\t\twaiting: 'Waiting {{seconds}} seconds...',\n\t\t\taskingUser: 'Asking user...',\n\t\t\tdone: 'Task done',\n\t\t\tclicked: '🖱️ Clicked element [{{index}}]',\n\t\t\tinputted: '⌨️ Inputted text \"{{text}}\"',\n\t\t\tselected: '☑️ Selected option \"{{text}}\"',\n\t\t\tscrolled: '🛞 Page scrolled',\n\t\t\twaited: '⌛️ Wait completed',\n\t\t\texecuting: 'Executing {{toolName}}...',\n\t\t\tresultSuccess: 'success',\n\t\t\tresultFailure: 'failed',\n\t\t\tresultError: 'error',\n\t\t},\n\t\terrors: {\n\t\t\telementNotFound: 'No interactive element found at index {{index}}',\n\t\t\ttaskRequired: 'Task description is required',\n\t\t\texecutionFailed: 'Task execution failed',\n\t\t\tnotInputElement: 'Element is not an input or textarea',\n\t\t\tnotSelectElement: 'Element is not a select element',\n\t\t\toptionNotFound: 'Option \"{{text}}\" not found',\n\t\t},\n\t},\n} as const\n\n// Chinese translations (must match the structure of enUS)\nconst zhCN = {\n\tui: {\n\t\tpanel: {\n\t\t\tready: '准备就绪',\n\t\t\tthinking: '正在思考...',\n\t\t\ttaskInput: '输入新任务，详细描述步骤，回车提交',\n\t\t\tuserAnswerPrompt: '请回答上面问题，回车提交',\n\t\t\ttaskTerminated: '任务已终止',\n\t\t\ttaskCompleted: '任务结束',\n\t\t\tuserAnswer: '用户回答: {{input}}',\n\t\t\tquestion: '询问: {{question}}',\n\t\t\twaitingPlaceholder: '等待任务开始...',\n\t\t\tstop: '终止',\n\t\t\texpand: '展开历史',\n\t\t\tcollapse: '收起历史',\n\t\t\tstep: '步骤 {{number}} · {{time}}{{duration}}',\n\t\t},\n\t\ttools: {\n\t\t\tclicking: '正在点击元素 [{{index}}]...',\n\t\t\tinputting: '正在输入文本到元素 [{{index}}]...',\n\t\t\tselecting: '正在选择选项 \"{{text}}\"...',\n\t\t\tscrolling: '正在滚动页面...',\n\t\t\twaiting: '等待 {{seconds}} 秒...',\n\t\t\taskingUser: '正在询问用户...',\n\t\t\tdone: '结束任务',\n\t\t\tclicked: '🖱️ 已点击元素 [{{index}}]',\n\t\t\tinputted: '⌨️ 已输入文本 \"{{text}}\"',\n\t\t\tselected: '☑️ 已选择选项 \"{{text}}\"',\n\t\t\tscrolled: '🛞 页面滚动完成',\n\t\t\twaited: '⌛️ 等待完成',\n\t\t\texecuting: '正在执行 {{toolName}}...',\n\t\t\tresultSuccess: '成功',\n\t\t\tresultFailure: '失败',\n\t\t\tresultError: '错误',\n\t\t},\n\t\terrors: {\n\t\t\telementNotFound: '未找到索引为 {{index}} 的交互元素',\n\t\t\ttaskRequired: '任务描述不能为空',\n\t\t\texecutionFailed: '任务执行失败',\n\t\t\tnotInputElement: '元素不是输入框或文本域',\n\t\t\tnotSelectElement: '元素不是选择框',\n\t\t\toptionNotFound: '未找到选项 \"{{text}}\"',\n\t\t},\n\t},\n} as const\n\n// Type definitions generated from English base structure (but with string values)\ntype DeepStringify<T> = {\n\t[K in keyof T]: T[K] extends string ? string : T[K] extends object ? DeepStringify<T[K]> : T[K]\n}\n\nexport type TranslationSchema = DeepStringify<typeof enUS>\n\n// Utility type: Extract all nested paths from translation object\ntype NestedKeyOf<ObjectType extends object> = {\n\t[Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object\n\t\t? `${Key}` | `${Key}.${NestedKeyOf<ObjectType[Key]>}`\n\t\t: `${Key}`\n}[keyof ObjectType & (string | number)]\n\n// Extract all possible key paths from translation structure\nexport type TranslationKey = NestedKeyOf<TranslationSchema>\n\n// Parameterized translation types\nexport type TranslationParams = Record<string, string | number>\n\nexport const locales = {\n\t'en-US': enUS,\n\t'zh-CN': zhCN,\n} as const\n\nexport type SupportedLanguage = keyof typeof locales\n","import {\n\ttype SupportedLanguage,\n\ttype TranslationKey,\n\ttype TranslationParams,\n\ttype TranslationSchema,\n\tlocales,\n} from './locales'\n\nexport class I18n {\n\tprivate language: SupportedLanguage\n\tprivate translations: TranslationSchema\n\n\tconstructor(language: SupportedLanguage = 'en-US') {\n\t\tthis.language = language in locales ? language : 'en-US'\n\t\tthis.translations = locales[this.language]\n\t}\n\n\t// 类型安全的翻译方法\n\tt(key: TranslationKey, params?: TranslationParams): string {\n\t\tconst value = this.getNestedValue(this.translations, key)\n\t\tif (!value) {\n\t\t\tconsole.warn(`Translation key \"${key}\" not found for language \"${this.language}\"`)\n\t\t\treturn key\n\t\t}\n\n\t\tif (params) {\n\t\t\treturn this.interpolate(value, params)\n\t\t}\n\t\treturn value\n\t}\n\n\tprivate getNestedValue(obj: any, path: string): string | undefined {\n\t\treturn path.split('.').reduce((current, key) => current?.[key], obj)\n\t}\n\n\tprivate interpolate(template: string, params: TranslationParams): string {\n\t\treturn template.replace(/\\{\\{(\\w+)\\}\\}/g, (match, key) => {\n\t\t\t// Use != null to check for both null and undefined, allow empty strings\n\t\t\treturn params[key] != null ? params[key].toString() : match\n\t\t})\n\t}\n\n\tgetLanguage(): SupportedLanguage {\n\t\treturn this.language\n\t}\n}\n\n// 导出类型和实例创建函数\nexport type { TranslationKey, SupportedLanguage, TranslationParams }\nexport { locales }\n","export function truncate(text: string, maxLength: number): string {\n\tif (text.length > maxLength) {\n\t\treturn text.substring(0, maxLength) + '...'\n\t}\n\treturn text\n}\n\n/**\n * Escape HTML special characters to prevent XSS and rendering issues\n */\nexport function escapeHtml(text: string): string {\n\treturn text\n\t\t.replace(/&/g, '&amp;')\n\t\t.replace(/</g, '&lt;')\n\t\t.replace(/>/g, '&gt;')\n\t\t.replace(/\"/g, '&quot;')\n\t\t.replace(/'/g, '&#039;')\n}\n","/**\n * Card HTML generation utilities for Panel\n */\nimport { escapeHtml } from '../utils'\n\nimport styles from './Panel.module.css'\n\ntype CardType = 'default' | 'input' | 'output' | 'question' | 'observation'\n\ninterface CardOptions {\n\ticon: string\n\tcontent: string | string[]\n\tmeta?: string\n\ttype?: CardType\n}\n\n/** Create a single history card */\nexport function createCard({ icon, content, meta, type }: CardOptions): string {\n\tconst typeClass = type ? styles[type] : ''\n\tconst contentHtml = Array.isArray(content)\n\t\t? `<div class=\"${styles.reflectionLines}\">${content.join('')}</div>`\n\t\t: `<span>${escapeHtml(content)}</span>`\n\n\treturn `\n\t\t<div class=\"${styles.historyItem} ${typeClass}\">\n\t\t\t<div class=\"${styles.historyContent}\">\n\t\t\t\t<span class=\"${styles.statusIcon}\">${icon}</span>\n\t\t\t\t${contentHtml}\n\t\t\t</div>\n\t\t\t${meta ? `<div class=\"${styles.historyMeta}\">${meta}</div>` : ''}\n\t\t</div>\n\t`\n}\n\n/** Format timestamp for cards */\nexport function formatTime(locale: string = 'en-US'): string {\n\treturn new Date().toLocaleTimeString(locale, {\n\t\thour12: false,\n\t\thour: '2-digit',\n\t\tminute: '2-digit',\n\t\tsecond: '2-digit',\n\t})\n}\n\n/** Create reflection lines from reflection object */\nexport function createReflectionLines(reflection: {\n\tevaluation_previous_goal?: string\n\tmemory?: string\n\tnext_goal?: string\n}): string[] {\n\tconst lines: string[] = []\n\tif (reflection.evaluation_previous_goal) {\n\t\tlines.push(`<div>🔍 ${escapeHtml(reflection.evaluation_previous_goal)}</div>`)\n\t}\n\tif (reflection.memory) {\n\t\tlines.push(`<div>💾 ${escapeHtml(reflection.memory)}</div>`)\n\t}\n\tif (reflection.next_goal) {\n\t\tlines.push(`<div>🎯 ${escapeHtml(reflection.next_goal)}</div>`)\n\t}\n\treturn lines\n}\n","import { I18n, type SupportedLanguage } from '../i18n'\nimport { truncate } from '../utils'\nimport { createCard, createReflectionLines, formatTime } from './cards'\nimport type { AgentActivity, PanelAgentAdapter } from './types'\n\nimport styles from './Panel.module.css'\n\n/**\n * Panel configuration\n */\nexport interface PanelConfig {\n\tlanguage?: SupportedLanguage\n\t/**\n\t * Whether to prompt for next task after task completion\n\t * @default true\n\t */\n\tpromptForNextTask?: boolean\n}\n\n/**\n * Agent control panel\n *\n * Architecture:\n * - History list: renders directly from agent.history (historical events)\n * - Header bar: shows activity events (transient state) and agent status\n *\n * This separation ensures data consistency - history is the single source of truth\n * for what has been done, while activity shows what is happening now.\n */\nexport class Panel {\n\t#wrapper: HTMLElement\n\t#indicator: HTMLElement\n\t#statusText: HTMLElement\n\t#historySection: HTMLElement\n\t#expandButton: HTMLElement\n\t#stopButton: HTMLElement\n\t#inputSection: HTMLElement\n\t#taskInput: HTMLInputElement\n\n\t#agent: PanelAgentAdapter\n\t#config: PanelConfig\n\t#isExpanded = false\n\t#i18n: I18n\n\t#userAnswerResolver: ((input: string) => void) | null = null\n\t#isWaitingForUserAnswer: boolean = false\n\t#headerUpdateTimer: ReturnType<typeof setInterval> | null = null\n\t#pendingHeaderText: string | null = null\n\t#isAnimating = false\n\n\t// Event handlers (bound for removal)\n\t#onStatusChange = () => this.#handleStatusChange()\n\t#onHistoryChange = () => this.#handleHistoryChange()\n\t#onActivity = (e: Event) => this.#handleActivity((e as CustomEvent<AgentActivity>).detail)\n\t#onAgentDispose = () => this.dispose()\n\n\tget wrapper(): HTMLElement {\n\t\treturn this.#wrapper\n\t}\n\n\t/**\n\t * Create a Panel bound to an agent\n\t * @param agent - Agent instance that implements PanelAgentAdapter\n\t * @param config - Optional panel configuration\n\t */\n\tconstructor(agent: PanelAgentAdapter, config: PanelConfig = {}) {\n\t\tthis.#agent = agent\n\t\tthis.#config = config\n\t\tthis.#i18n = new I18n(config.language ?? 'en-US')\n\n\t\t// Set up askUser callback on agent\n\t\tthis.#agent.onAskUser = (question) => this.#askUser(question)\n\n\t\t// Create UI elements\n\t\tthis.#wrapper = this.#createWrapper()\n\t\tthis.#indicator = this.#wrapper.querySelector(`.${styles.indicator}`)!\n\t\tthis.#statusText = this.#wrapper.querySelector(`.${styles.statusText}`)!\n\t\tthis.#historySection = this.#wrapper.querySelector(`.${styles.historySection}`)!\n\t\tthis.#expandButton = this.#wrapper.querySelector(`.${styles.expandButton}`)!\n\t\tthis.#stopButton = this.#wrapper.querySelector(`.${styles.stopButton}`)!\n\t\tthis.#inputSection = this.#wrapper.querySelector(`.${styles.inputSectionWrapper}`)!\n\t\tthis.#taskInput = this.#wrapper.querySelector(`.${styles.taskInput}`)!\n\n\t\t// Listen to agent events\n\t\tthis.#agent.addEventListener('statuschange', this.#onStatusChange)\n\t\tthis.#agent.addEventListener('historychange', this.#onHistoryChange)\n\t\tthis.#agent.addEventListener('activity', this.#onActivity)\n\t\tthis.#agent.addEventListener('dispose', this.#onAgentDispose)\n\n\t\tthis.#setupEventListeners()\n\t\tthis.#startHeaderUpdateLoop()\n\n\t\tthis.#showInputArea()\n\n\t\tthis.hide() // Start hidden\n\t}\n\n\t// ========== Agent event handlers ==========\n\n\t/** Handle agent status change */\n\t#handleStatusChange(): void {\n\t\tconst status = this.#agent.status\n\n\t\t// Map agent status to UI indicator type\n\t\tconst indicatorType =\n\t\t\tstatus === 'running' ? 'thinking' : status === 'idle' ? 'thinking' : status\n\t\tthis.#updateStatusIndicator(indicatorType)\n\n\t\t// Show/hide based on status\n\t\tif (status === 'running') {\n\t\t\tthis.show()\n\t\t\tthis.#hideInputArea() // Hide input while running\n\t\t}\n\n\t\t// Handle completion\n\t\tif (status === 'completed' || status === 'error') {\n\t\t\tif (!this.#isExpanded) {\n\t\t\t\tthis.#expand()\n\t\t\t}\n\t\t\tif (this.#shouldShowInputArea()) {\n\t\t\t\tthis.#showInputArea()\n\t\t\t}\n\t\t}\n\t}\n\n\t/** Handle agent history change - re-render history list from agent.history */\n\t#handleHistoryChange(): void {\n\t\tthis.#renderHistory()\n\t}\n\n\t/**\n\t * Handle agent activity - transient state for immediate UI feedback\n\t * Activity events are NOT persisted in history, only used for header bar updates\n\t */\n\t#handleActivity(activity: AgentActivity): void {\n\t\tswitch (activity.type) {\n\t\t\tcase 'thinking':\n\t\t\t\tthis.#pendingHeaderText = this.#i18n.t('ui.panel.thinking')\n\t\t\t\tthis.#updateStatusIndicator('thinking')\n\t\t\t\tbreak\n\n\t\t\tcase 'executing':\n\t\t\t\tthis.#pendingHeaderText = this.#getToolExecutingText(activity.tool, activity.input)\n\t\t\t\tthis.#updateStatusIndicator('executing')\n\t\t\t\tbreak\n\n\t\t\tcase 'executed':\n\t\t\t\tthis.#pendingHeaderText = truncate(activity.output, 50)\n\t\t\t\tbreak\n\n\t\t\tcase 'retrying':\n\t\t\t\tthis.#pendingHeaderText = `Retrying (${activity.attempt}/${activity.maxAttempts})`\n\t\t\t\tthis.#updateStatusIndicator('retrying')\n\t\t\t\tbreak\n\n\t\t\tcase 'error':\n\t\t\t\tthis.#pendingHeaderText = truncate(activity.message, 50)\n\t\t\t\tthis.#updateStatusIndicator('error')\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\t/**\n\t * Ask for user input (internal, called by agent via onAskUser)\n\t */\n\t#askUser(question: string): Promise<string> {\n\t\treturn new Promise((resolve) => {\n\t\t\t// Set `waiting for user answer` state\n\t\t\tthis.#isWaitingForUserAnswer = true\n\t\t\tthis.#userAnswerResolver = resolve\n\n\t\t\t// Expand history panel\n\t\t\tif (!this.#isExpanded) {\n\t\t\t\tthis.#expand()\n\t\t\t}\n\n\t\t\t// Add temporary question card so user can see the full question\n\t\t\tconst tempCard = document.createElement('div')\n\t\t\ttempCard.innerHTML = createCard({\n\t\t\t\ticon: '❓',\n\t\t\t\tcontent: `Question: ${question}`,\n\t\t\t\tmeta: formatTime(this.#config.language ?? 'en-US'),\n\t\t\t\ttype: 'question',\n\t\t\t})\n\t\t\tconst cardElement = tempCard.firstElementChild as HTMLElement\n\t\t\tcardElement.setAttribute('data-temp-card', 'true')\n\t\t\tthis.#historySection.appendChild(cardElement)\n\t\t\tthis.#scrollToBottom()\n\n\t\t\tthis.#showInputArea(this.#i18n.t('ui.panel.userAnswerPrompt'))\n\t\t})\n\t}\n\n\t// ========== Public control methods ==========\n\n\tshow(): void {\n\t\tthis.wrapper.style.display = 'block'\n\t\tvoid this.wrapper.offsetHeight\n\t\tthis.wrapper.style.opacity = '1'\n\t\tthis.wrapper.style.transform = 'translateX(-50%) translateY(0)'\n\t}\n\n\thide(): void {\n\t\tthis.wrapper.style.opacity = '0'\n\t\tthis.wrapper.style.transform = 'translateX(-50%) translateY(20px)'\n\t\tthis.wrapper.style.display = 'none'\n\t}\n\n\treset(): void {\n\t\tthis.#statusText.textContent = this.#i18n.t('ui.panel.ready')\n\t\tthis.#updateStatusIndicator('thinking')\n\t\tthis.#renderHistory()\n\t\tthis.#collapse()\n\t\t// Reset user input state\n\t\tthis.#isWaitingForUserAnswer = false\n\t\tthis.#userAnswerResolver = null\n\t\t// Show input area\n\t\tthis.#showInputArea()\n\t}\n\n\texpand(): void {\n\t\tthis.#expand()\n\t}\n\n\tcollapse(): void {\n\t\tthis.#collapse()\n\t}\n\n\t/**\n\t * Dispose panel and clean up event listeners\n\t */\n\tdispose(): void {\n\t\t// Remove agent event listeners\n\t\tthis.#agent.removeEventListener('statuschange', this.#onStatusChange)\n\t\tthis.#agent.removeEventListener('historychange', this.#onHistoryChange)\n\t\tthis.#agent.removeEventListener('activity', this.#onActivity)\n\t\tthis.#agent.removeEventListener('dispose', this.#onAgentDispose)\n\n\t\t// Clean up UI\n\t\tthis.#isWaitingForUserAnswer = false\n\t\tthis.#stopHeaderUpdateLoop()\n\t\tthis.wrapper.remove()\n\t}\n\n\t// ========== Private methods ==========\n\n\t#getToolExecutingText(toolName: string, args: unknown): string {\n\t\tconst a = args as Record<string, string | number>\n\t\tswitch (toolName) {\n\t\t\tcase 'click_element_by_index':\n\t\t\t\treturn this.#i18n.t('ui.tools.clicking', { index: a.index })\n\t\t\tcase 'input_text':\n\t\t\t\treturn this.#i18n.t('ui.tools.inputting', { index: a.index })\n\t\t\tcase 'select_dropdown_option':\n\t\t\t\treturn this.#i18n.t('ui.tools.selecting', { text: a.text })\n\t\t\tcase 'scroll':\n\t\t\t\treturn this.#i18n.t('ui.tools.scrolling')\n\t\t\tcase 'wait':\n\t\t\t\treturn this.#i18n.t('ui.tools.waiting', { seconds: a.seconds })\n\t\t\tcase 'ask_user':\n\t\t\t\treturn this.#i18n.t('ui.tools.askingUser')\n\t\t\tcase 'done':\n\t\t\t\treturn this.#i18n.t('ui.tools.done')\n\t\t\tdefault:\n\t\t\t\treturn this.#i18n.t('ui.tools.executing', { toolName })\n\t\t}\n\t}\n\n\t/**\n\t * Stop Agent\n\t */\n\t#stopAgent(): void {\n\t\tthis.#agent.dispose()\n\t}\n\n\t/**\n\t * Submit task\n\t */\n\t#submitTask() {\n\t\tconst input = this.#taskInput.value.trim()\n\t\tif (!input) return\n\n\t\t// Hide input area\n\t\tthis.#hideInputArea()\n\n\t\tif (this.#isWaitingForUserAnswer) {\n\t\t\t// Handle user input mode\n\t\t\tthis.#handleUserAnswer(input)\n\t\t} else {\n\t\t\t// Execute task via agent\n\t\t\tthis.#agent.execute(input)\n\t\t}\n\t}\n\n\t/**\n\t * Handle user answer\n\t */\n\t#handleUserAnswer(input: string): void {\n\t\t// Remove temporary question cards (only direct children for safety)\n\t\tArray.from(this.#historySection.children).forEach((child) => {\n\t\t\tif (child.getAttribute('data-temp-card') === 'true') {\n\t\t\t\tchild.remove()\n\t\t\t}\n\t\t})\n\n\t\t// Reset state\n\t\tthis.#isWaitingForUserAnswer = false\n\n\t\t// Call resolver to return user input\n\t\tif (this.#userAnswerResolver) {\n\t\t\tthis.#userAnswerResolver(input)\n\t\t\tthis.#userAnswerResolver = null\n\t\t}\n\t}\n\n\t/**\n\t * Show input area\n\t */\n\t#showInputArea(placeholder?: string): void {\n\t\t// Clear input field\n\t\tthis.#taskInput.value = ''\n\t\tthis.#taskInput.placeholder = placeholder || this.#i18n.t('ui.panel.taskInput')\n\t\tthis.#inputSection.classList.remove(styles.hidden)\n\t\t// Focus on input field\n\t\tsetTimeout(() => {\n\t\t\tthis.#taskInput.focus()\n\t\t}, 100)\n\t}\n\n\t/**\n\t * Hide input area\n\t */\n\t#hideInputArea(): void {\n\t\tthis.#inputSection.classList.add(styles.hidden)\n\t}\n\n\t/**\n\t * Check if input area should be shown\n\t */\n\t#shouldShowInputArea(): boolean {\n\t\t// Always show input area if waiting for user input\n\t\tif (this.#isWaitingForUserAnswer) return true\n\n\t\tconst history = this.#agent.history\n\t\tif (history.length === 0) {\n\t\t\treturn true // Initial state\n\t\t}\n\n\t\tconst status = this.#agent.status\n\t\tconst isTaskEnded = status === 'completed' || status === 'error'\n\n\t\t// Only show input area after task completion if configured to do so\n\t\tif (isTaskEnded) {\n\t\t\treturn this.#config.promptForNextTask ?? true\n\t\t}\n\n\t\treturn false\n\t}\n\n\t#createWrapper(): HTMLElement {\n\t\tconst wrapper = document.createElement('div')\n\t\twrapper.id = 'page-agent-runtime_agent-panel'\n\t\twrapper.className = styles.wrapper\n\t\twrapper.setAttribute('data-browser-use-ignore', 'true')\n\n\t\twrapper.innerHTML = `\n\t\t\t<div class=\"${styles.background}\"></div>\n\t\t\t<div class=\"${styles.historySectionWrapper}\">\n\t\t\t\t<div class=\"${styles.historySection}\">\n\t\t\t\t\t<div class=\"${styles.historyItem}\">\n\t\t\t\t\t\t<div class=\"${styles.historyContent}\">\n\t\t\t\t\t\t\t<span class=\"${styles.statusIcon}\">🧠</span>\n\t\t\t\t\t\t\t<span>${this.#i18n.t('ui.panel.waitingPlaceholder')}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"${styles.header}\">\n\t\t\t\t<div class=\"${styles.statusSection}\">\n\t\t\t\t\t<div class=\"${styles.indicator} ${styles.thinking}\"></div>\n\t\t\t\t\t<div class=\"${styles.statusText}\">${this.#i18n.t('ui.panel.ready')}</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"${styles.controls}\">\n\t\t\t\t\t<button class=\"${styles.controlButton} ${styles.expandButton}\" title=\"${this.#i18n.t('ui.panel.expand')}\">\n\t\t\t\t\t\t▼\n\t\t\t\t\t</button>\n\t\t\t\t\t<button class=\"${styles.controlButton} ${styles.stopButton}\" title=\"${this.#i18n.t('ui.panel.stop')}\">\n\t\t\t\t\t\tX\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"${styles.inputSectionWrapper} ${styles.hidden}\">\n\t\t\t\t<div class=\"${styles.inputSection}\">\n\t\t\t\t\t<input \n\t\t\t\t\t\ttype=\"text\" \n\t\t\t\t\t\tclass=\"${styles.taskInput}\" \n\t\t\t\t\t\tmaxlength=\"200\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\n\t\tdocument.body.appendChild(wrapper)\n\t\treturn wrapper\n\t}\n\n\t#setupEventListeners(): void {\n\t\t// Click header area to expand/collapse\n\t\tconst header = this.wrapper.querySelector(`.${styles.header}`)!\n\t\theader.addEventListener('click', (e) => {\n\t\t\t// Don't trigger expand/collapse if clicking on buttons\n\t\t\tif ((e.target as HTMLElement).closest(`.${styles.controlButton}`)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.#toggle()\n\t\t})\n\n\t\t// Expand button\n\t\tthis.#expandButton.addEventListener('click', (e) => {\n\t\t\te.stopPropagation()\n\t\t\tthis.#toggle()\n\t\t})\n\n\t\t// Stop button\n\t\tthis.#stopButton.addEventListener('click', (e) => {\n\t\t\te.stopPropagation()\n\t\t\tthis.#stopAgent()\n\t\t})\n\n\t\t// Submit on Enter key in input field\n\t\tthis.#taskInput.addEventListener('keydown', (e) => {\n\t\t\tif (e.isComposing) return // Ignore IME composition keys\n\t\t\tif (e.key === 'Enter') {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.#submitTask()\n\t\t\t}\n\t\t})\n\n\t\t// Prevent input area click event bubbling\n\t\tthis.#inputSection.addEventListener('click', (e) => {\n\t\t\te.stopPropagation()\n\t\t})\n\t}\n\n\t#toggle(): void {\n\t\tif (this.#isExpanded) {\n\t\t\tthis.#collapse()\n\t\t} else {\n\t\t\tthis.#expand()\n\t\t}\n\t}\n\n\t#expand(): void {\n\t\tthis.#isExpanded = true\n\t\tthis.wrapper.classList.add(styles.expanded)\n\t\tthis.#expandButton.textContent = '▲'\n\t}\n\n\t#collapse(): void {\n\t\tthis.#isExpanded = false\n\t\tthis.wrapper.classList.remove(styles.expanded)\n\t\tthis.#expandButton.textContent = '▼'\n\t}\n\n\t/**\n\t * Start periodic header update loop\n\t */\n\t#startHeaderUpdateLoop(): void {\n\t\t// Check every 450ms (same as total animation duration)\n\t\tthis.#headerUpdateTimer = setInterval(() => {\n\t\t\tthis.#checkAndUpdateHeader()\n\t\t}, 450)\n\t}\n\n\t/**\n\t * Stop periodic header update loop\n\t */\n\t#stopHeaderUpdateLoop(): void {\n\t\tif (this.#headerUpdateTimer) {\n\t\t\tclearInterval(this.#headerUpdateTimer)\n\t\t\tthis.#headerUpdateTimer = null\n\t\t}\n\t}\n\n\t/**\n\t * Check if header needs update and trigger animation if not currently animating\n\t */\n\t#checkAndUpdateHeader(): void {\n\t\t// If no pending text or currently animating, skip\n\t\tif (!this.#pendingHeaderText || this.#isAnimating) {\n\t\t\treturn\n\t\t}\n\n\t\t// If text is already displayed, clear pending and skip\n\t\tif (this.#statusText.textContent === this.#pendingHeaderText) {\n\t\t\tthis.#pendingHeaderText = null\n\t\t\treturn\n\t\t}\n\n\t\t// Start animation\n\t\tconst textToShow = this.#pendingHeaderText\n\t\tthis.#pendingHeaderText = null\n\t\tthis.#animateTextChange(textToShow)\n\t}\n\n\t/**\n\t * Animate text change with fade out/in effect\n\t */\n\t#animateTextChange(newText: string): void {\n\t\tthis.#isAnimating = true\n\n\t\t// Fade out current text\n\t\tthis.#statusText.classList.add(styles.fadeOut)\n\n\t\tsetTimeout(() => {\n\t\t\t// Update text content\n\t\t\tthis.#statusText.textContent = newText\n\n\t\t\t// Fade in new text\n\t\t\tthis.#statusText.classList.remove(styles.fadeOut)\n\t\t\tthis.#statusText.classList.add(styles.fadeIn)\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.#statusText.classList.remove(styles.fadeIn)\n\t\t\t\tthis.#isAnimating = false\n\t\t\t}, 300)\n\t\t}, 150) // Half the duration of fade out animation\n\t}\n\n\t#updateStatusIndicator(\n\t\ttype: 'thinking' | 'executing' | 'executed' | 'retrying' | 'completed' | 'error'\n\t): void {\n\t\t// Clear all status classes\n\t\tthis.#indicator.className = styles.indicator\n\n\t\t// Add corresponding status class\n\t\tthis.#indicator.classList.add(styles[type])\n\t}\n\n\t#scrollToBottom(): void {\n\t\t// Execute in next event loop to ensure DOM update completion\n\t\tsetTimeout(() => {\n\t\t\tthis.#historySection.scrollTop = this.#historySection.scrollHeight\n\t\t}, 0)\n\t}\n\n\t/**\n\t * Render history directly from agent.history\n\t *\n\t * Renders:\n\t * 1. Task (first item, from agent.task)\n\t * 2. Reflection cards (evaluation, memory, next_goal)\n\t * 3. Tool execution with output\n\t * 4. Observations\n\t */\n\t#renderHistory(): void {\n\t\tconst items: string[] = []\n\n\t\t// 1. Task card (always first)\n\t\tconst task = this.#agent.task\n\t\tif (task) {\n\t\t\titems.push(this.#createTaskCard(task))\n\t\t}\n\n\t\t// 2. Render each history event\n\t\tconst history = this.#agent.history\n\t\tfor (let i = 0; i < history.length; i++) {\n\t\t\tconst event = history[i]\n\t\t\titems.push(...this.#createHistoryCards(event, i + 1))\n\t\t}\n\n\t\tthis.#historySection.innerHTML = items.join('')\n\t\tthis.#scrollToBottom()\n\t}\n\n\t#createTaskCard(task: string): string {\n\t\treturn createCard({ icon: '🎯', content: task, type: 'input' })\n\t}\n\n\t/** Create cards for a history event */\n\t#createHistoryCards(event: PanelAgentAdapter['history'][number], stepNumber: number): string[] {\n\t\tconst cards: string[] = []\n\t\tconst time = formatTime(this.#config.language ?? 'en-US')\n\t\tconst meta = this.#i18n.t('ui.panel.step', {\n\t\t\tnumber: stepNumber.toString(),\n\t\t\ttime,\n\t\t\tduration: '',\n\t\t})\n\n\t\tif (event.type === 'step') {\n\t\t\t// Reflection card\n\t\t\tif (event.reflection) {\n\t\t\t\tconst lines = createReflectionLines(event.reflection)\n\t\t\t\tif (lines.length > 0) {\n\t\t\t\t\tcards.push(createCard({ icon: '🧠', content: lines, meta }))\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Action card\n\t\t\tconst action = event.action\n\t\t\tif (action) {\n\t\t\t\tcards.push(...this.#createActionCards(action, meta))\n\t\t\t}\n\t\t} else if (event.type === 'observation') {\n\t\t\tcards.push(\n\t\t\t\tcreateCard({ icon: '👁️', content: event.content || '', meta, type: 'observation' })\n\t\t\t)\n\t\t} else if (event.type === 'user_takeover') {\n\t\t\tcards.push(createCard({ icon: '👤', content: 'User takeover', meta, type: 'input' }))\n\t\t}\n\n\t\treturn cards\n\t}\n\n\t/** Create cards for an action */\n\t#createActionCards(\n\t\taction: { name: string; input: unknown; output: string },\n\t\tmeta: string\n\t): string[] {\n\t\tconst cards: string[] = []\n\n\t\tif (action.name === 'done') {\n\t\t\tconst input = action.input as { text?: string }\n\t\t\tconst text = input.text || action.output || ''\n\t\t\tif (text) {\n\t\t\t\tcards.push(createCard({ icon: '🤖', content: text, meta, type: 'output' }))\n\t\t\t}\n\t\t} else if (action.name === 'ask_user') {\n\t\t\tconst input = action.input as { question?: string }\n\t\t\tconst answer = action.output.replace(/^User answered:\\s*/i, '')\n\t\t\tcards.push(\n\t\t\t\tcreateCard({\n\t\t\t\t\ticon: '❓',\n\t\t\t\t\tcontent: `Question: ${input.question || ''}`,\n\t\t\t\t\tmeta,\n\t\t\t\t\ttype: 'question',\n\t\t\t\t})\n\t\t\t)\n\t\t\tcards.push(createCard({ icon: '💬', content: `Answer: ${answer}`, meta, type: 'input' }))\n\t\t} else {\n\t\t\tconst toolText = this.#getToolExecutingText(action.name, action.input)\n\t\t\tcards.push(createCard({ icon: '🔨', content: toolText, meta }))\n\t\t\tif (action.output?.length > 0) {\n\t\t\t\tcards.push(createCard({ icon: '🔨', content: action.output, meta, type: 'output' }))\n\t\t\t}\n\t\t}\n\n\t\treturn cards\n\t}\n}\n"],"names":["question","input","wrapper","header"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@page-agent/ui",
-	"version": "0.2.4",
+	"version": "0.3.0-beta.2",
 	"type": "module",
 	"main": "./dist/lib/page-agent-ui.js",
 	"module": "./dist/lib/page-agent-ui.js",