feat(ext): refactor event card; the result also counts as a step

packages/extension/src/entrypoints/sidepanel/components/cards/index.tsx

@@ -1,3 +1,4 @@
+import { type AgentStep, type ErrorEvent, type ObservationEvent } from '@page-agent/core'
 import {
 	CheckCircle,
 	ChevronDown,
@@ -143,24 +144,7 @@ function RawResponseSection({ rawResponse }: { rawResponse: unknown }) {
 	)
 }
 
-// History event card component
+function StepCard({ event }: { event: AgentStep }) {
-export function EventCard({ event }: { event: HistoricalEvent }) {
-	// Done action - show as result card
-	if (event.type === 'step' && event.action?.name === 'done') {
-		const input = event.action.input as { text?: string; success?: boolean }
-		return (
-			<div>
-				<ResultCard
-					success={input?.success ?? true}
-					text={input?.text || event.action.output || ''}
-				>
-					{!event.rawResponse || <RawResponseSection rawResponse={event.rawResponse as any} />}
-				</ResultCard>
-			</div>
-		)
-	}
-
-	if (event.type === 'step') {
 	return (
 		<div className="rounded-lg border-l-2 border-l-blue-500/50 border bg-muted/40 p-2.5">
 			<div className="text-[11px] font-semibold text-foreground tracking-wide mb-2">
@@ -184,9 +168,11 @@ export function EventCard({ event }: { event: HistoricalEvent }) {
 						<div className="flex-1 min-w-0">
 							<p className="text-xs text-foreground/80 mb-0.5">
 								<span className="font-medium text-foreground/70">{event.action.name}</span>
+								{event.action.name !== 'done' && (
 									<span className="text-muted-foreground/70 ml-1.5">
 										{JSON.stringify(event.action.input)}
 									</span>
+								)}
 							</p>
 							<p className="text-[11px] text-muted-foreground/70">└ {event.action.output}</p>
 						</div>
@@ -200,7 +186,7 @@ export function EventCard({ event }: { event: HistoricalEvent }) {
 	)
 }
 
-	if (event.type === 'observation') {
+function ObservationCard({ event }: { event: ObservationEvent }) {
 	return (
 		<div className="rounded-lg border-l-2 border-l-green-500/50 border bg-muted/40 p-2.5">
 			{/* <div className="text-[11px] font-semibold text-foreground uppercase tracking-wide mb-2">
@@ -214,7 +200,7 @@ export function EventCard({ event }: { event: HistoricalEvent }) {
 	)
 }
 
-	if (event.type === 'error') {
+function ErrorCard({ event }: { event: ErrorEvent }) {
 	return (
 		<div className="rounded-lg border border-destructive/30 bg-destructive/10 p-2.5">
 			<div className="flex items-start gap-1.5">
@@ -226,6 +212,36 @@ export function EventCard({ event }: { event: HistoricalEvent }) {
 	)
 }
 
+// History event card component
+export function EventCard({ event }: { event: HistoricalEvent }) {
+	// Done action - show as result card
+	if (event.type === 'step' && event.action?.name === 'done') {
+		const input = event.action.input as { text?: string; success?: boolean }
+		return (
+			<>
+				<StepCard event={event as AgentStep} />
+				<ResultCard
+					success={input?.success ?? true}
+					text={input?.text || event.action.output || ''}
+				>
+					{!event.rawResponse || <RawResponseSection rawResponse={event.rawResponse as any} />}
+				</ResultCard>
+			</>
+		)
+	}
+
+	if (event.type === 'step') {
+		return <StepCard event={event as AgentStep} />
+	}
+
+	if (event.type === 'observation') {
+		return <ObservationCard event={event as ObservationEvent} />
+	}
+
+	if (event.type === 'error') {
+		return <ErrorCard event={event as ErrorEvent} />
+	}
+
 	return null
 }