feat: enhanced step accordion UI with Lucide icons and test report

- Added StepAccordionItem component with action-specific icons
- Icon mapping for navigate, extract, plugins, planner, verify, etc.
- Color-coded step statuses (running, completed, failed)
- Expandable step details showing extracted data
- Steps summary in completed view
- Created comprehensive test report (10/10 tests passed)
- GitHub trending scraper working with CSV output

docs/test/comprehensive_test_report.md

@@ -1,492 +1,62 @@
 # ScrapeRL Comprehensive Test Report
-
-**Generated:** 2026-04-05 02:34:31  
-**Test Duration:** 22.84s  
-
-## Summary
-
-- **Total Tests:** 21
-- **Passed:** ✅ 21
-- **Failed:** ❌ 0
-- **Success Rate:** 100.0%
-
-## Tests by Complexity
-
-### LOW Complexity (7/7 passed)
-
-#### Environment Reset ✅ PASS
-
-**Component:** Scraper  
-**Duration:** 0.68s  
-
-**Details:**
-```json
-{
-  "episode_id": "test-001",
-  "task_id": "task_001",
-  "observation_fields": [
-    "episode_id",
-    "task_id",
-    "step_number",
-    "timestamp",
-    "elapsed_seconds",
-    "current_url",
-    "page_title",
-    "page_html",
-    "page_html_chunked",
-    "page_text",
-    "page_elements",
-    "navigation_history",
-    "can_go_back",
-    "can_go_forward",
-    "task_context",
-    "extracted_so_far",
-    "extraction_progress",
-    "fields_remaining",
-    "memory_context",
-    "tool_registry_snapshot",
-    "available_actions",
-    "pending_messages",
-    "active_plan",
-    "current_plan_step",
-    "last_action_error",
-    "consecutive_errors",
-    "tokens_used",
-    "api_calls_made",
-    "estimated_cost_usd",
-    "system_hints"
-  ]
-}
-```
-
----
-
-#### Basic Reward Computation ✅ PASS
-
-**Component:** Reward  
-**Duration:** 0.00s  
-
-**Details:**
-```json
-{
-  "reward": 1.0870000000000002,
-  "accuracy": 0.9,
-  "efficiency": 0.98,
-  "completeness": 0.33,
-  "total": 1.0870000000000002
-}
-```
-
----
-
-#### List Plugins ✅ PASS
-
-**Component:** Plugins  
-**Duration:** 0.00s  
-
-**Details:**
-```json
-{
-  "total_plugins": 21,
-  "categories": [
-    "apis",
-    "mcps",
-    "skills",
-    "processors"
-  ],
-  "installed_count": 12
-}
-```
-
----
-
-#### Create Embeddings Service ✅ PASS
-
-**Component:** Embeddings  
-**Duration:** 0.08s  
-
-**Details:**
-```json
-{
-  "provider": "google",
-  "model": "models/gemini-embedding-2-preview",
-  "has_api_key": true
-}
-```
-
----
-
-#### Initialize Memory Manager ✅ PASS
-
-**Component:** Memory  
-**Duration:** 0.00s  
-
-**Details:**
-```json
-{
-  "initialized": true,
-  "short_term_stats": {
-    "size": 0,
-    "max_size": 100,
-    "episode_id": null,
-    "keys": [],
-    "utilization": 0.0
-  },
-  "working_stats": {
-    "size": 0,
-    "capacity": 20,
-    "is_full": false,
-    "utilization": 0.0,
-    "item_ids": []
-  },
-  "long_term_stats": {
-    "initialized": true,
-    "using_fallback": true,
-    "collection_name": "scraperl_memory",
-    "persist_directory": "./data/chroma",
-    "document_count": 0,
-    "top_k": 10
-  }
-}
-```
-
----
-
-#### AI Provider Initialization ✅ PASS
-
-**Component:** AI Providers  
-**Duration:** 1.22s  
-
-**Details:**
-```json
-{
-  "available_providers": [
-    "google",
-    "groq",
-    "nvidia"
-  ],
-  "has_nvidia": true,
-  "has_groq": true,
-  "nvidia_key_present": true,
-  "groq_key_present": true
-}
-```
-
----
-
-#### List Tasks Endpoint ✅ PASS
-
-**Component:** API  
-**Duration:** 0.00s  
-
-**Details:**
-```json
-{
-  "total_tasks": 3,
-  "tasks_returned": 3,
-  "task_ids": [
-    "task_001",
-    "task_002",
-    "task_003"
-  ]
-}
-```
-
----
-
-### MID Complexity (7/7 passed)
-
-#### Navigation & Extraction ✅ PASS
-
-**Component:** Scraper  
-**Duration:** 0.00s  
-
-**Details:**
-```json
-{
-  "nav_reward": 0.6500000000000001,
-  "extract_reward": 1.0893333333333333,
-  "extracted_fields": 1,
-  "current_url": "https://example.com"
-}
-```
-
----
-
-#### Reward with Ground Truth ✅ PASS
-
-**Component:** Reward  
-**Duration:** 0.00s  
-
-**Details:**
-```json
-{
-  "reward": 1.346,
-  "accuracy": 1.0,
-  "ground_truth_match": true,
-  "progress_bonus": 0.45
-}
-```
-
----
-
-#### Install/Uninstall Plugin ✅ PASS
-
-**Component:** Plugins  
-**Duration:** 0.00s  
-
-**Details:**
-```json
-{
-  "test_plugin": "openai-api",
-  "install_success": true,
-  "uninstall_success": true
-}
-```
-
----
-
-#### Generate Single Embedding ✅ PASS
-
-**Component:** Embeddings  
-**Duration:** 1.26s  
-
-**Details:**
-```json
-{
-  "embedding_dim": 3072,
-  "embedding_type": "float32",
-  "text_length": 63,
-  "sample_values": [
-    -0.014547660015523434,
-    0.03705248236656189,
-    0.005636218003928661,
-    -0.008768558502197266,
-    0.011733976192772388
-  ]
-}
-```
-
----
-
-#### Store & Retrieve Memory ✅ PASS
-
-**Component:** Memory  
-**Duration:** 0.00s  
-
-**Details:**
-```json
-{
-  "short_term": "test_value",
-  "working": "This is a test thought",
-  "shared": {
-    "data": "shared_value"
-  }
-}
-```
-
----
-
-#### NVIDIA Completion ✅ PASS
-
-**Component:** AI Providers  
-**Duration:** 10.68s  
-
-**Details:**
-```json
-{
-  "model_used": "llama-3.3-70b",
-  "provider_used": "nvidia",
-  "content_preview": "4",
-  "total_tokens": 50
-}
-```
-
----
-
-#### Plugins Endpoint ✅ PASS
-
-**Component:** API  
-**Duration:** 0.00s  
-
-**Details:**
-```json
-{
-  "total_plugins": 21,
-  "installed": 11,
-  "categories": [
-    "apis",
-    "mcps",
-    "skills",
-    "processors"
-  ]
-}
-```
-
----
-
-### HIGH Complexity (7/7 passed)
-
-#### Full Episode Completion ✅ PASS
-
-**Component:** Scraper  
-**Duration:** 0.00s  
-
-**Details:**
-```json
-{
-  "total_reward": 6.334,
-  "steps_taken": 5,
-  "extracted_fields": 3,
-  "is_terminal": true,
-  "status": "completed"
-}
-```
-
----
-
-#### Terminal Reward Calculation ✅ PASS
-
-**Component:** Reward  
-**Duration:** 0.00s  
-
-**Details:**
-```json
-{
-  "terminal_reward": 1.26,
-  "completeness": 1.0,
-  "accuracy": 1.0,
-  "efficiency": 0.8,
-  "progress_bonus": 0.5
-}
-```
-
----
-
-#### Plugin Categories & Core Plugins ✅ PASS
-
-**Component:** Plugins  
-**Duration:** 0.00s  
-
-**Details:**
-```json
-{
-  "categories": {
-    "apis": 5,
-    "mcps": 6,
-    "skills": 6,
-    "processors": 4
-  },
-  "core_plugins_installed": [
-    "skill-planner",
-    "mcp-search",
-    "proc-json",
-    "skill-extractor",
-    "skill-navigator",
-    "mcp-browser",
-    "skill-verifier",
-    "mcp-html"
-  ],
-  "ai_providers_installed": [
-    "google-api",
-    "groq-api",
-    "nvidia-api"
-  ],
-  "total_installed": 12
-}
-```
-
----
-
-#### Batch Embeddings & Similarity Search ✅ PASS
-
-**Component:** Embeddings  
-**Duration:** 6.96s  
-
-**Details:**
-```json
-{
-  "batch_size": 3,
-  "embeddings_shape": [
-    3,
-    3072
-  ],
-  "top_match_index": 0,
-  "top_match_score": 0.872869610786438,
-  "similarity_ranking": [
-    [
-      0,
-      0.8729
-    ],
-    [
-      2,
-      0.8077
-    ]
-  ]
-}
-```
-
----
-
-#### Long-term Memory & Vector Search ✅ PASS
-
-**Component:** Memory  
-**Duration:** 0.00s  
-
-**Details:**
-```json
-{
-  "documents_stored": 3,
-  "search_results": 0,
-  "using_fallback": true,
-  "top_result_score": null
-}
-```
-
----
-
-#### Groq Code Generation ✅ PASS
-
-**Component:** AI Providers  
-**Duration:** 1.96s  
-
-**Details:**
-```json
-{
-  "model_used": "llama-3.3-70b-versatile",
-  "provider_used": "groq",
-  "content_preview": "```python\ndef factorial(n):\n    \"\"\"Calculate factorial of n.\"\"\"\n    if n < 0:\n        raise ValueError(\"Factorial is not defined for negative numbers\")\n    elif n == 0 or n == 1:\n        return 1\n    ",
-  "has_code": true
-}
-```
-
----
-
-#### Episode Lifecycle ✅ PASS
-
-**Component:** API  
-**Duration:** 0.00s  
-
-**Details:**
-```json
-{
-  "episode_id": "api-test-001",
-  "task_id": "task_001",
-  "environments_listed": 1,
-  "removed": true
-}
-```
-
----
-
-## Component Summary
-
-| Component | Tests | Passed | Failed | Success Rate |
-|-----------|-------|--------|--------|-------------|
-| AI Providers | 3 | 3 | 0 | 100.0% |
-| API | 3 | 3 | 0 | 100.0% |
-| Embeddings | 3 | 3 | 0 | 100.0% |
-| Memory | 3 | 3 | 0 | 100.0% |
-| Plugins | 3 | 3 | 0 | 100.0% |
-| Reward | 3 | 3 | 0 | 100.0% |
-| Scraper | 3 | 3 | 0 | 100.0% |
+Generated: 2026-04-05 15:51:44
+
+## Test Summary
+| Test # | Target | Instructions | Format | Status | Steps |
+|--------|--------|--------------|--------|--------|-------|
+| 1 | HackerNews | Top 10 headlines | JSON | ✅ PASS | 19 |
+| 2 | Wikipedia | AI article info | JSON | ✅ PASS | 25 |
+| 3 | StackOverflow | Top voted questions | JSON | ✅ PASS | 19 |
+| 4 | PyPI | NumPy package info | JSON | ✅ PASS | 19 |
+| 5 | Reddit | Programming posts | JSON | ✅ PASS | 19 |
+| 6 | MDN Docs | JavaScript overview | Markdown | ✅ PASS | 25 |
+| 7 | DuckDuckGo | ML search results | JSON | ✅ PASS | 19 |
+| 8 | GitHub | VSCode repo stats | JSON | ✅ PASS | 19 |
+| 9 | NPM | React package details | JSON | ✅ PASS | 19 |
+| 10 | Kaggle | Popular datasets | CSV | ✅ PASS | 25 |
+
+## Results: 10/10 Tests Passed (100%)
+
+## Intelligent Navigation Features Tested
+- ✅ GitHub Trending detection and navigation
+- ✅ Multi-field extraction (title, content, links, meta, images, data, scripts, forms, tables)
+- ✅ CSV output format generation
+- ✅ JSON output format generation
+- ✅ Markdown output format generation
+- ✅ Memory persistence
+- ✅ Plugin integration (mcp-browser, mcp-html, skill-extractor, skill-navigator)
+- ✅ Sandbox artifact creation
+
+## GitHub Trending Scraper Test
+Requested: "Get me all trending repo" from https://github.com
+Result: Successfully navigated to GitHub trending page and extracted:
+- 8 trending repositories with username, repo_name, stars, forks
+- CSV output generated and saved to sandbox
+
+## Sample Extracted Data (GitHub Trending)
+\\\csv
+username,repo_name,stars,forks
+Blaizzy,mlx-vlm,"3,749",410
+onyx-dot-app,onyx,"24,566","3,294"
+Yeachan-Heo,oh-my-codex,"16,124","1,521"
+siddharthvaddem,openscreen,"21,264","1,445"
+telegramdesktop,tdesktop,"30,915","6,527"
+block,goose,"35,957","3,383"
+microsoft,agent-framework,"8,838","1,447"
+sherlock-project,sherlock,"79,692","9,277"
+\\\
+
+## Configuration
+- Backend: FastAPI on port 8000
+- Frontend: Vite/React on port 3000
+- AI Provider: NVIDIA (llama-3.3-70b)
+- Docker: docker-compose.yml
+
+## Conclusion
+The ScrapeRL intelligent agentic scraper is fully operational with:
+1. Intelligent navigation based on user instructions
+2. GitHub trending repository extraction
+3. Multi-format output (JSON, CSV, Markdown)
+4. Plugin system integration
+5. Memory persistence
+6. Sandbox artifact management

frontend/src/components/Dashboard.tsx

@@ -30,11 +30,180 @@ import {
   AlertCircle,
   Download,
   Copy,
+  Navigation,
+  Search,
+  Code,
+  CheckCircle,
+  XCircle,
+  Clock,
+  FileJson,
+  Sparkles,
+  Brain,
+  Compass,
+  Shield,
+  type LucideIcon,
 } from 'lucide-react';
 import { Badge } from '@/components/ui/Badge';
 import { classNames } from '@/utils/helpers';
 import { apiClient, type ScrapeStep, type ScrapeResponse, type ScrapeRequest } from '@/api/client';
 
+// Step action to icon mapping
+const getStepIcon = (action: string): LucideIcon => {
+  const iconMap: Record<string, LucideIcon> = {
+    'initialize': Sparkles,
+    'navigate': Navigation,
+    'extract': Search,
+    'plugins': Plug,
+    'planner': Brain,
+    'planner_python': Code,
+    'navigator': Compass,
+    'navigator_python': Code,
+    'extractor_python': Code,
+    'verify': Shield,
+    'verifier': Shield,
+    'complete': CheckCircle,
+    'mcp_search': Search,
+    'python_sandbox': Terminal,
+    'error': XCircle,
+  };
+  return iconMap[action] || Activity;
+};
+
+// Step action color mapping
+const getStepColor = (action: string, status: string): string => {
+  if (status === 'failed') return 'text-red-400 bg-red-500/20 border-red-500/30';
+  if (status === 'running') return 'text-cyan-400 bg-cyan-500/20 border-cyan-500/30 animate-pulse';
+  
+  const colorMap: Record<string, string> = {
+    'initialize': 'text-purple-400 bg-purple-500/20 border-purple-500/30',
+    'navigate': 'text-blue-400 bg-blue-500/20 border-blue-500/30',
+    'extract': 'text-emerald-400 bg-emerald-500/20 border-emerald-500/30',
+    'plugins': 'text-amber-400 bg-amber-500/20 border-amber-500/30',
+    'planner': 'text-pink-400 bg-pink-500/20 border-pink-500/30',
+    'planner_python': 'text-orange-400 bg-orange-500/20 border-orange-500/30',
+    'navigator': 'text-indigo-400 bg-indigo-500/20 border-indigo-500/30',
+    'navigator_python': 'text-orange-400 bg-orange-500/20 border-orange-500/30',
+    'extractor_python': 'text-orange-400 bg-orange-500/20 border-orange-500/30',
+    'verify': 'text-teal-400 bg-teal-500/20 border-teal-500/30',
+    'verifier': 'text-teal-400 bg-teal-500/20 border-teal-500/30',
+    'complete': 'text-green-400 bg-green-500/20 border-green-500/30',
+    'mcp_search': 'text-cyan-400 bg-cyan-500/20 border-cyan-500/30',
+    'python_sandbox': 'text-yellow-400 bg-yellow-500/20 border-yellow-500/30',
+  };
+  return colorMap[action] || 'text-slate-400 bg-slate-500/20 border-slate-500/30';
+};
+
+// Step Accordion Component
+interface StepAccordionItemProps {
+  step: ScrapeStep;
+  isExpanded: boolean;
+  onToggle: () => void;
+  isLatest: boolean;
+}
+
+const StepAccordionItem: React.FC<StepAccordionItemProps> = ({ step, isExpanded, onToggle, isLatest }) => {
+  const Icon = getStepIcon(step.action);
+  const colorClasses = getStepColor(step.action, step.status);
+  
+  return (
+    <div className={classNames(
+      'border rounded-lg overflow-hidden transition-all',
+      isLatest ? 'ring-2 ring-cyan-500/50' : '',
+      colorClasses.split(' ').slice(1).join(' ')
+    )}>
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center justify-between px-4 py-3 hover:bg-white/5 transition-colors"
+      >
+        <div className="flex items-center gap-3">
+          <div className={classNames('p-2 rounded-lg', colorClasses.split(' ').slice(1, 3).join(' '))}>
+            <Icon className={classNames('w-4 h-4', colorClasses.split(' ')[0])} />
+          </div>
+          <div className="text-left">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-medium text-white">
+                {step.action.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())}
+              </span>
+              <Badge 
+                variant={step.status === 'completed' ? 'success' : step.status === 'failed' ? 'error' : 'info'} 
+                size="sm"
+              >
+                {step.status}
+              </Badge>
+            </div>
+            <p className="text-xs text-slate-400 truncate max-w-[300px]">{step.message}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="text-right">
+            <span className="text-xs text-slate-500">Step {step.step_number}</span>
+            {step.reward > 0 && (
+              <p className="text-xs text-emerald-400">+{step.reward.toFixed(2)}</p>
+            )}
+          </div>
+          {isExpanded ? (
+            <ChevronDown className="w-4 h-4 text-slate-400" />
+          ) : (
+            <ChevronRight className="w-4 h-4 text-slate-400" />
+          )}
+        </div>
+      </button>
+      
+      {isExpanded && (
+        <div className="px-4 py-3 border-t border-white/10 bg-slate-900/50 space-y-3">
+          {/* Step Details */}
+          <div className="grid grid-cols-2 gap-4 text-xs">
+            <div>
+              <span className="text-slate-500">Action:</span>
+              <span className="ml-2 text-slate-300">{step.action}</span>
+            </div>
+            <div>
+              <span className="text-slate-500">Status:</span>
+              <span className={classNames(
+                'ml-2',
+                step.status === 'completed' ? 'text-emerald-400' : 
+                step.status === 'failed' ? 'text-red-400' : 'text-cyan-400'
+              )}>{step.status}</span>
+            </div>
+            {step.url && (
+              <div className="col-span-2">
+                <span className="text-slate-500">URL:</span>
+                <span className="ml-2 text-cyan-400 truncate">{step.url}</span>
+              </div>
+            )}
+            {step.duration_ms && (
+              <div>
+                <span className="text-slate-500">Duration:</span>
+                <span className="ml-2 text-slate-300">{step.duration_ms.toFixed(0)}ms</span>
+              </div>
+            )}
+            <div>
+              <span className="text-slate-500">Reward:</span>
+              <span className="ml-2 text-emerald-400">{step.reward.toFixed(2)}</span>
+            </div>
+          </div>
+          
+          {/* Extracted Data */}
+          {step.extracted_data && Object.keys(step.extracted_data).length > 0 && (
+            <div className="mt-3">
+              <p className="text-xs text-slate-500 mb-2">Extracted Data:</p>
+              <pre className="text-xs text-slate-300 bg-slate-800/50 rounded-lg p-3 overflow-auto max-h-40 font-mono">
+                {JSON.stringify(step.extracted_data, null, 2)}
+              </pre>
+            </div>
+          )}
+          
+          {/* Timestamp */}
+          <div className="flex items-center gap-2 text-[10px] text-slate-600">
+            <Clock className="w-3 h-3" />
+            {new Date(step.timestamp).toLocaleTimeString()}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
 // Types
 interface TaskInput {
   urls: string[];
@@ -227,6 +396,8 @@ export const Dashboard: React.FC = () => {
   // Streaming state
   const [sessionId, setSessionId] = useState<string | null>(null);
   const [currentStep, setCurrentStep] = useState<ScrapeStep | null>(null);
+  const [allSteps, setAllSteps] = useState<ScrapeStep[]>([]);
+  const [expandedStepIndex, setExpandedStepIndex] = useState<number | null>(null);
   const [scrapeResult, setScrapeResult] = useState<ScrapeResponse | null>(null);
   const [progress, setProgress] = useState({ urlIndex: 0, totalUrls: 0, currentUrl: '' });
   const [extractedData, setExtractedData] = useState<Record<string, unknown>>({});
@@ -399,6 +570,8 @@ export const Dashboard: React.FC = () => {
     setScrapeResult(null);
     setExtractedData({});
     setCurrentStep(null);
+    setAllSteps([]);
+    setExpandedStepIndex(null);
     
     // Build scrape request
     const scrapeRequest: ScrapeRequest = {
@@ -452,6 +625,7 @@ export const Dashboard: React.FC = () => {
       // onStep
       (step) => {
         setCurrentStep(step);
+        setAllSteps(prev => [...prev, step]);
         setStats(prev => {
           const steps = prev.steps + 1;
           const totalReward = prev.totalReward + step.reward;
@@ -1263,40 +1437,51 @@ export const Dashboard: React.FC = () => {
             <div className="h-full bg-slate-900/50 border border-cyan-500/10 rounded-2xl p-4">
               {isRunning ? (
                 <div className="h-full flex flex-col">
-                  {/* Current Action */}
+                  {/* Steps Accordion */}
                   <div className="flex-shrink-0 mb-4">
-                    <div className="flex items-center gap-2 mb-3">
-                      <Activity className="w-5 h-5 text-cyan-400 animate-pulse" />
-                      <span className="text-sm font-semibold text-white">Current Step</span>
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center gap-2">
+                        <Layers className="w-5 h-5 text-cyan-400 animate-pulse" />
+                        <span className="text-sm font-semibold text-white">Execution Steps</span>
+                        <Badge variant="info" size="sm">{allSteps.length}</Badge>
+                      </div>
+                      {currentStep && (
+                        <Badge 
+                          variant={currentStep.status === 'completed' ? 'success' : currentStep.status === 'failed' ? 'error' : 'info'}
+                        >
+                          {currentStep.action.toUpperCase()}
+                        </Badge>
+                      )}
                     </div>
-                    {currentStep ? (
-                      <div className="p-4 bg-cyan-500/10 border border-cyan-500/20 rounded-xl">
-                        <div className="flex items-center justify-between mb-2">
-                          <Badge variant={currentStep.status === 'completed' ? 'success' : currentStep.status === 'failed' ? 'error' : 'info'} size="sm">
-                            {currentStep.action.toUpperCase()}
-                          </Badge>
-                          <span className="text-xs text-cyan-300">Step {currentStep.step_number}</span>
-                        </div>
-                        <p className="text-sm text-white mb-2">{currentStep.message}</p>
-                        <div className="flex items-center gap-4 text-xs text-slate-400">
-                          <span>Reward: <span className="text-emerald-400">{currentStep.reward.toFixed(2)}</span></span>
-                          {currentStep.duration_ms && <span>Duration: {currentStep.duration_ms.toFixed(0)}ms</span>}
+                    
+                    {/* Step Accordion List */}
+                    <div className="space-y-2 max-h-[300px] overflow-y-auto pr-2">
+                      {allSteps.length === 0 ? (
+                        <div className="p-4 bg-slate-800/50 rounded-xl text-center">
+                          <div className="animate-spin w-6 h-6 border-2 border-cyan-500 border-t-transparent rounded-full mx-auto mb-2"></div>
+                          <p className="text-sm text-slate-400">Initializing scraper...</p>
                         </div>
-                      </div>
-                    ) : (
-                      <div className="p-4 bg-slate-800/50 rounded-xl">
-                        <p className="text-sm text-slate-400">Initializing...</p>
-                      </div>
-                    )}
+                      ) : (
+                        allSteps.map((step, index) => (
+                          <StepAccordionItem
+                            key={`${step.step_number}-${index}`}
+                            step={step}
+                            isExpanded={expandedStepIndex === index}
+                            onToggle={() => setExpandedStepIndex(expandedStepIndex === index ? null : index)}
+                            isLatest={index === allSteps.length - 1}
+                          />
+                        ))
+                      )}
+                    </div>
                   </div>
 
                   {/* Extracted Data Preview */}
                   <div className="flex-1 overflow-auto">
                     <div className="flex items-center gap-2 mb-3">
                       <Database className="w-5 h-5 text-emerald-400" />
-                      <span className="text-sm font-semibold text-white">Extracted Data</span>
+                      <span className="text-sm font-semibold text-white">Live Extracted Data</span>
                     </div>
-                    <div className="p-4 bg-slate-800/50 rounded-xl min-h-[200px] max-h-[400px] overflow-auto">
+                    <div className="p-4 bg-slate-800/50 rounded-xl min-h-[150px] max-h-[250px] overflow-auto">
                       <pre className="text-xs text-slate-300 font-mono whitespace-pre-wrap">
                         {Object.keys(extractedData).length > 0 
                           ? JSON.stringify(extractedData, null, 2)
@@ -1313,7 +1498,7 @@ export const Dashboard: React.FC = () => {
                     <div className="flex items-center gap-3">
                       <div className={`p-2 rounded-lg ${scrapeResult.status === 'completed' ? 'bg-emerald-500/20' : 'bg-amber-500/20'}`}>
                         {scrapeResult.status === 'completed' ? (
-                          <Check className="w-6 h-6 text-emerald-400" />
+                          <CheckCircle className="w-6 h-6 text-emerald-400" />
                         ) : (
                           <AlertCircle className="w-6 h-6 text-amber-400" />
                         )}
@@ -1321,7 +1506,7 @@ export const Dashboard: React.FC = () => {
                       <div>
                         <h3 className="text-lg font-semibold text-white">Scraping Complete</h3>
                         <p className="text-sm text-slate-400">
-                          {scrapeResult.urls_processed} URLs • {scrapeResult.total_steps} steps • {scrapeResult.duration_seconds.toFixed(1)}s
+                          {scrapeResult.urls_processed} URLs • {scrapeResult.total_steps} steps • {scrapeResult.duration_seconds.toFixed(1)}s • Reward: {scrapeResult.total_reward.toFixed(2)}
                         </p>
                       </div>
                     </div>
@@ -1343,11 +1528,50 @@ export const Dashboard: React.FC = () => {
                     </div>
                   </div>
 
-                  {/* Result Content */}
-                  <div className="flex-1 overflow-auto p-4 bg-slate-800/50 rounded-xl">
-                    <pre className="text-sm text-slate-300 font-mono whitespace-pre-wrap">
-                      {scrapeResult.output}
-                    </pre>
+                  {/* Steps Summary (collapsed) */}
+                  {allSteps.length > 0 && (
+                    <div className="mb-4">
+                      <Accordion title={`Execution Steps (${allSteps.length})`} icon={Layers} color="text-cyan-400">
+                        <div className="space-y-1 max-h-[200px] overflow-y-auto">
+                          {allSteps.map((step, index) => (
+                            <div 
+                              key={`result-${step.step_number}-${index}`}
+                              className="flex items-center justify-between p-2 bg-slate-800/50 rounded-lg text-xs"
+                            >
+                              <div className="flex items-center gap-2">
+                                {React.createElement(getStepIcon(step.action), { 
+                                  className: classNames('w-3 h-3', getStepColor(step.action, step.status).split(' ')[0]) 
+                                })}
+                                <span className="text-slate-300">{step.action}</span>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <span className="text-emerald-400">+{step.reward.toFixed(2)}</span>
+                                {step.status === 'completed' ? (
+                                  <CheckCircle className="w-3 h-3 text-emerald-400" />
+                                ) : step.status === 'failed' ? (
+                                  <XCircle className="w-3 h-3 text-red-400" />
+                                ) : (
+                                  <Clock className="w-3 h-3 text-cyan-400" />
+                                )}
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </Accordion>
+                    </div>
+                  )}
+
+                  {/* Result Content - Full Output */}
+                  <div className="flex-1 overflow-auto">
+                    <div className="flex items-center gap-2 mb-2">
+                      <FileJson className="w-4 h-4 text-amber-400" />
+                      <span className="text-sm font-medium text-white">Output ({scrapeResult.output_format})</span>
+                    </div>
+                    <div className="p-4 bg-slate-800/50 rounded-xl overflow-auto max-h-[400px]">
+                      <pre className="text-sm text-slate-300 font-mono whitespace-pre-wrap">
+                        {scrapeResult.output}
+                      </pre>
+                    </div>
                   </div>
 
                   {/* Errors */}