feat: add stepIndex to history events

packages/core/src/PageAgentCore.ts

@@ -263,6 +263,7 @@ export class PageAgentCore extends EventTarget {
 
 				this.history.push({
 					type: 'step',
+					stepIndex: step,
 					reflection,
 					action,
 					usage: result.usage,

packages/core/src/types.ts

@@ -35,6 +35,7 @@ export interface MacroToolResult {
  */
 export interface AgentStep {
 	type: 'step'
+	stepIndex: number
 	reflection: Partial<AgentReflection>
 	action: {
 		name: string

packages/ui/src/panel/Panel.ts

@@ -563,9 +563,8 @@ export class Panel {
 
 		// 2. Render each history event
 		const history = this.#agent.history
-		for (let i = 0; i < history.length; i++) {
+		for (const event of history) {
-			const event = history[i]
+			items.push(...this.#createHistoryCards(event))
-			items.push(...this.#createHistoryCards(event, i + 1))
 		}
 
 		this.#historySection.innerHTML = items.join('')
@@ -577,14 +576,17 @@ export class Panel {
 	}
 
 	/** Create cards for a history event */
-	#createHistoryCards(event: PanelAgentAdapter['history'][number], stepNumber: number): string[] {
+	#createHistoryCards(event: PanelAgentAdapter['history'][number]): string[] {
 		const cards: string[] = []
 		const time = formatTime(this.#config.language ?? 'en-US')
-		const meta = this.#i18n.t('ui.panel.step', {
+		const meta =
-			number: stepNumber.toString(),
+			event.type === 'step' && event.stepIndex !== undefined
-			time,
+				? this.#i18n.t('ui.panel.step', {
-			duration: '',
+						number: (event.stepIndex + 1).toString(),
-		})
+						time,
+						duration: '',
+					})
+				: time
 
 		if (event.type === 'step') {
 			// Reflection card

packages/ui/src/panel/types.ts

@@ -34,6 +34,7 @@ export interface PanelAgentAdapter extends EventTarget {
 	/** History of agent events */
 	readonly history: readonly {
 		type: 'step' | 'observation' | 'user_takeover' | 'error'
+		stepIndex?: number
 		/** For 'step' type */
 		reflection?: {
 			evaluation_previous_goal?: string