From f500445965da4d1483d0e4f28ff4a4e5225195fe Mon Sep 17 00:00:00 2001
From: Simon <10131203+gaomeng1900@users.noreply.github.com>
Date: Tue, 20 Jan 2026 20:38:02 +0800
Subject: [PATCH] feat: show rawResponse in cards

---
 packages/extension/package.json               |  2 +-
 .../src/entrypoints/sidepanel/App.tsx         | 63 ++++++++++++++++---
 packages/extension/src/messaging/protocol.ts  |  2 +
 packages/extension/tsconfig.json              |  1 +
 4 files changed, 59 insertions(+), 9 deletions(-)

diff --git a/packages/extension/package.json b/packages/extension/package.json
index f0c2ee7..0d0e031 100644
--- a/packages/extension/package.json
+++ b/packages/extension/package.json
@@ -6,7 +6,7 @@
     "scripts": {
         "dev": "wxt",
         "dev:firefox": "wxt -b firefox",
-        "build": "wxt build",
+        "build:ext": "wxt build",
         "build:firefox": "wxt build -b firefox",
         "zip": "wxt zip",
         "zip:firefox": "wxt zip -b firefox",
diff --git a/packages/extension/src/entrypoints/sidepanel/App.tsx b/packages/extension/src/entrypoints/sidepanel/App.tsx
index f5120f9..ed50053 100644
--- a/packages/extension/src/entrypoints/sidepanel/App.tsx
+++ b/packages/extension/src/entrypoints/sidepanel/App.tsx
@@ -1,6 +1,8 @@
 import {
 	ArrowRight,
 	CheckCircle,
+	ChevronDown,
+	ChevronRight,
 	Loader2,
 	MessageSquare,
 	Send,
@@ -103,7 +105,15 @@ function ConfigPanel({ onClose }: { onClose: () => void }) {
 }
 
 // Result card for done action
-function ResultCard({ success, text }: { success: boolean; text: string }) {
+function ResultCard({
+	success,
+	text,
+	children,
+}: {
+	success: boolean
+	text: string
+	children?: React.ReactNode
+}) {
 	return (
 		<div
 			className={cn(
@@ -127,6 +137,7 @@ function ResultCard({ success, text }: { success: boolean; text: string }) {
 				</span>
 			</div>
 			<p className="text-xs text-muted-foreground pl-5 whitespace-pre-wrap">{text}</p>
+			{children}
 		</div>
 	)
 }
@@ -166,16 +177,46 @@ function ReflectionSection({
 	)
 }
 
+// Raw response section (collapsible, for debugging)
+function RawResponseSection({ rawResponse }: { rawResponse: unknown }) {
+	const [expanded, setExpanded] = useState(false)
+
+	return (
+		<div className="mt-2 border-t border-dashed pt-2">
+			<button
+				type="button"
+				onClick={() => setExpanded(!expanded)}
+				className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground transition-colors"
+			>
+				{expanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
+				<span>Raw Response</span>
+			</button>
+			{expanded && (
+				<pre
+					className="mt-1.5 p-2 text-[10px] bg-muted/50 rounded overflow-x-auto max-h-60 overflow-y-auto select-all"
+					style={{ userSelect: 'all' }}
+				>
+					{JSON.stringify(rawResponse, null, 4)}
+				</pre>
+			)}
+		</div>
+	)
+}
+
 // History event card component
 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 (
-			<ResultCard
-				success={input?.success ?? true}
-				text={input?.text || event.action.output || ''}
-			/>
+			<div>
+				<ResultCard
+					success={input?.success ?? true}
+					text={input?.text || event.action.output || ''}
+				>
+					{!event.rawResponse || <RawResponseSection rawResponse={event.rawResponse as any} />}
+				</ResultCard>
+			</div>
 		)
 	}
 
@@ -202,6 +243,9 @@ function EventCard({ event }: { event: HistoricalEvent }) {
 						</div>
 					</div>
 				)}
+
+				{/* Raw Response */}
+				{!event.rawResponse || <RawResponseSection rawResponse={event.rawResponse as any} />}
 			</div>
 		)
 	}
@@ -217,9 +261,12 @@ function EventCard({ event }: { event: HistoricalEvent }) {
 
 	if (event.type === 'error') {
 		return (
-			<div className="flex items-start gap-1.5 rounded-lg border border-destructive/30 bg-destructive/10 p-2.5">
-				<XCircle className="size-3 text-destructive shrink-0 mt-0.5" />
-				<span className="text-xs text-destructive">{event.message}</span>
+			<div className="rounded-lg border border-destructive/30 bg-destructive/10 p-2.5">
+				<div className="flex items-start gap-1.5">
+					<XCircle className="size-3 text-destructive shrink-0 mt-0.5" />
+					<span className="text-xs text-destructive">{event.message}</span>
+				</div>
+				{!event.rawResponse || <RawResponseSection rawResponse={event.rawResponse as any} />}
 			</div>
 		)
 	}
diff --git a/packages/extension/src/messaging/protocol.ts b/packages/extension/src/messaging/protocol.ts
index 3ae8d39..8206676 100644
--- a/packages/extension/src/messaging/protocol.ts
+++ b/packages/extension/src/messaging/protocol.ts
@@ -72,6 +72,8 @@ export interface HistoricalEvent {
 	// For 'error' type
 	errorType?: 'retry' | 'error'
 	message?: string
+	// Raw LLM response for debugging (step and error types)
+	rawResponse?: unknown
 }
 
 /** Agent state snapshot */
diff --git a/packages/extension/tsconfig.json b/packages/extension/tsconfig.json
index a60920d..98a679a 100644
--- a/packages/extension/tsconfig.json
+++ b/packages/extension/tsconfig.json
@@ -5,6 +5,7 @@
         "useDefineForClassFields": true,
         "noEmit": false,
         "allowImportingTsExtensions": false,
+        "strictNullChecks": true,
         "jsx": "react-jsx",
         "baseUrl": ".",
         "paths": {