feat: Add workflow status dashboard page

Add workflows page for monitoring and managing automated workflow executions:

Workflows Page Features:
- Real-time workflow execution monitoring with 5-second polling
- Status cards showing total/running/completed/failed counts
- Status filtering (all, running, completed, failed)
- Workflow list with expandable details

Workflow Details:
- Workflow ID and execution ID display
- Status badges with icons (pending, running, completed, failed, cancelled)
- Associated alert ID linking
- Start and completion timestamps
- Current step indicator

Workflow Steps Visualization:
- Sequential step display with status icons
- Step type indicators (activity, decision, human_task)
- Error messages for failed steps
- Step timestamps
- Expandable/collapsible details

Navigation:
- Add Workflows link to sidebar navigation
- Add Activity icon for workflows menu item
- Configure /workflows route in App.tsx

UI Components:
- Status color coding (blue=running, green=completed, red=failed)
- Filter buttons with active state
- Refresh button for manual polling
- Expandable workflow detail view

API Integration:
- Fetch workflows via api.workflows.getExecutions()
- Status filter parameter support
- Auto-refetch every 5 seconds

Related: #phase2-workflow-dashboard

Author: chenchunrun-blip

services/web_dashboard/src/App.tsx

@@ -15,6 +15,7 @@ import { Reports } from '@/pages/Reports'
 import { Settings } from '@/pages/Settings'
 import { Automation } from '@/pages/Automation'
 import { Notifications } from '@/pages/Notifications'
+import { Workflows } from '@/pages/Workflows'
 
 // Protected Route Wrapper
 const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
@@ -81,6 +82,7 @@ function App() {
         <Route path="alerts/:id" element={<AlertDetail />} />
         <Route path="reports" element={<Reports />} />
         <Route path="automation" element={<Automation />} />
+        <Route path="workflows" element={<Workflows />} />
         <Route path="notifications" element={<Notifications />} />
         <Route path="settings" element={<Settings />} />
       </Route>

services/web_dashboard/src/components/Layout.tsx

@@ -17,13 +17,15 @@ import {
   X,
   Shield,
   Zap,
+  Activity,
 } from 'lucide-react'
 
 const navigation = [
   { name: 'Dashboard', href: '/', icon: LayoutDashboard },
   { name: 'Alerts', href: '/alerts', icon: AlertTriangle },
   { name: 'Reports', href: '/reports', icon: FileText },
   { name: 'Automation', href: '/automation', icon: Zap },
+  { name: 'Workflows', href: '/workflows', icon: Activity },
   { name: 'Notifications', href: '/notifications', icon: Bell },
   { name: 'Settings', href: '/settings', icon: Settings },
 ]

services/web_dashboard/src/pages/Workflows.tsx

@@ -0,0 +1,323 @@
+/**
+ * Workflows Page - Display workflow status and executions
+ */
+
+import React, { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { api } from '@/lib/api'
+import {
+  Play,
+  Pause,
+  CheckCircle,
+  XCircle,
+  Clock,
+  AlertTriangle,
+  Eye,
+  RefreshCw,
+  Filter,
+} from 'lucide-react'
+
+const statusColors = {
+  pending: 'bg-gray-100 text-gray-800',
+  running: 'bg-blue-100 text-blue-800',
+  completed: 'bg-green-100 text-green-800',
+  failed: 'bg-red-100 text-red-800',
+  cancelled: 'bg-yellow-100 text-yellow-800',
+}
+
+const statusIcons = {
+  pending: Clock,
+  running: RefreshCw,
+  completed: CheckCircle,
+  failed: XCircle,
+  cancelled: XCircle,
+}
+
+interface WorkflowExecution {
+  workflow_id: string
+  execution_id: string
+  status: 'pending' | 'running' | 'completed' | 'failed' | 'cancelled'
+  current_step?: string
+  started_at: string
+  completed_at?: string
+  alert_id?: string
+  playbook_id?: string
+  steps: WorkflowStep[]
+}
+
+interface WorkflowStep {
+  step_id: string
+  name: string
+  type: 'activity' | 'decision' | 'human_task'
+  status: 'pending' | 'running' | 'completed' | 'failed' | 'skipped'
+  started_at?: string
+  completed_at?: string
+  error?: string
+}
+
+export const Workflows: React.FC = () => {
+  const [selectedWorkflow, setSelectedWorkflow] = useState<string | null>(null)
+  const [statusFilter, setStatusFilter] = useState<string>('all')
+
+  // Fetch workflow executions
+  const { data: workflows, isLoading, refetch } = useQuery({
+    queryKey: ['workflows', statusFilter],
+    queryFn: () => api.workflows.getExecutions({ status: statusFilter === 'all' ? undefined : statusFilter }),
+    refetchInterval: 5000, // Poll every 5 seconds
+  })
+
+  const handleStatusFilter = (status: string) => {
+    setStatusFilter(status)
+  }
+
+  const getFilteredWorkflows = () => {
+    if (!workflows) return []
+    if (statusFilter === 'all') return workflows
+    return workflows.filter((w: WorkflowExecution) => w.status === statusFilter)
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="spinner"></div>
+      </div>
+    )
+  }
+
+  const filteredWorkflows = getFilteredWorkflows()
+  const stats = {
+    total: workflows?.length || 0,
+    running: workflows?.filter((w: WorkflowExecution) => w.status === 'running').length || 0,
+    completed: workflows?.filter((w: WorkflowExecution) => w.status === 'completed').length || 0,
+    failed: workflows?.filter((w: WorkflowExecution) => w.status === 'failed').length || 0,
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Workflows</h1>
+          <p className="text-sm text-gray-600 mt-1">
+            Monitor and manage automated workflow executions
+          </p>
+        </div>
+        <button onClick={() => refetch()} className="btn btn-outline flex items-center gap-2">
+          <RefreshCw className="w-4 h-4" />
+          Refresh
+        </button>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div className="card">
+          <div className="card-body">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600">Total</p>
+                <p className="text-2xl font-bold text-gray-900">{stats.total}</p>
+              </div>
+              <div className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
+                <Activity className="w-5 h-5 text-gray-600" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="card">
+          <div className="card-body">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600">Running</p>
+                <p className="text-2xl font-bold text-blue-600">{stats.running}</p>
+              </div>
+              <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
+                <RefreshCw className="w-5 h-5 text-blue-600" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="card">
+          <div className="card-body">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600">Completed</p>
+                <p className="text-2xl font-bold text-green-600">{stats.completed}</p>
+              </div>
+              <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
+                <CheckCircle className="w-5 h-5 text-green-600" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="card">
+          <div className="card-body">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600">Failed</p>
+                <p className="text-2xl font-bold text-red-600">{stats.failed}</p>
+              </div>
+              <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
+                <XCircle className="w-5 h-5 text-red-600" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Status Filters */}
+      <div className="flex items-center gap-2">
+        <Filter className="w-4 h-4 text-gray-600" />
+        <button
+          onClick={() => handleStatusFilter('all')}
+          className={`px-3 py-1 rounded-full text-sm ${
+            statusFilter === 'all' ? 'bg-primary-500 text-white' : 'bg-gray-100 text-gray-600'
+          }`}
+        >
+          All
+        </button>
+        <button
+          onClick={() => handleStatusFilter('running')}
+          className={`px-3 py-1 rounded-full text-sm ${
+            statusFilter === 'running' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-600'
+          }`}
+        >
+          Running
+        </button>
+        <button
+          onClick={() => handleStatusFilter('completed')}
+          className={`px-3 py-1 rounded-full text-sm ${
+            statusFilter === 'completed' ? 'bg-green-500 text-white' : 'bg-gray-100 text-gray-600'
+          }`}
+        >
+          Completed
+        </button>
+        <button
+          onClick={() => handleStatusFilter('failed')}
+          className={`px-3 py-1 rounded-full text-sm ${
+            statusFilter === 'failed' ? 'bg-red-500 text-white' : 'bg-gray-100 text-gray-600'
+          }`}
+        >
+          Failed
+        </button>
+      </div>
+
+      {/* Workflow List */}
+      <div className="space-y-4">
+        {filteredWorkflows.length === 0 ? (
+          <div className="card">
+            <div className="card-body text-center py-12">
+              <p className="text-gray-600">No workflows found</p>
+            </div>
+          </div>
+        ) : (
+          filteredWorkflows.map((workflow: WorkflowExecution) => {
+            const StatusIcon = statusIcons[workflow.status]
+            return (
+              <div key={workflow.execution_id} className="card">
+                <div className="card-body">
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3 mb-2">
+                        <h3 className="text-lg font-semibold text-gray-900">{workflow.workflow_id}</h3>
+                        <span className={`badge badge-sm ${statusColors[workflow.status]}`}>
+                          <StatusIcon className="w-3 h-3 mr-1 inline" />
+                          {workflow.status}
+                        </span>
+                        {workflow.alert_id && (
+                          <span className="text-sm text-gray-500">
+                            Alert: {workflow.alert_id}
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-sm text-gray-600">
+                        Started: {new Date(workflow.started_at).toLocaleString()}
+                      </p>
+                      {workflow.completed_at && (
+                        <p className="text-sm text-gray-600">
+                          Completed: {new Date(workflow.completed_at).toLocaleString()}
+                        </p>
+                      )}
+                      {workflow.current_step && (
+                        <p className="text-sm text-blue-600 mt-1">
+                          Current: {workflow.current_step}
+                        </p>
+                      )}
+                    </div>
+                    <button
+                      onClick={() => setSelectedWorkflow(
+                        selectedWorkflow === workflow.execution_id ? null : workflow.execution_id
+                      )}
+                      className="btn btn-sm btn-outline"
+                    >
+                      <Eye className="w-4 h-4 mr-1" />
+                      Details
+                    </button>
+                  </div>
+
+                  {/* Workflow Steps */}
+                  {selectedWorkflow === workflow.execution_id && (
+                    <div className="mt-4 border-t pt-4">
+                      <h4 className="text-sm font-semibold text-gray-700 mb-3">Execution Steps</h4>
+                      <div className="space-y-2">
+                        {workflow.steps.map((step, idx) => {
+                          const StepIcon = statusIcons[step.status] || Clock
+                          return (
+                            <div key={step.step_id} className="flex items-start gap-3 p-3 rounded-lg bg-gray-50">
+                              <div className="flex-shrink-0 mt-0.5">
+                                <StepIcon className={`w-4 h-4 ${
+                                  step.status === 'completed' ? 'text-green-600' :
+                                  step.status === 'failed' ? 'text-red-600' :
+                                  step.status === 'running' ? 'text-blue-600' :
+                                  'text-gray-400'
+                                }`} />
+                              </div>
+                              <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2">
+                                  <span className="text-sm font-medium text-gray-900">
+                                    {idx + 1}. {step.name}
+                                  </span>
+                                  <span className={`text-xs px-2 py-0.5 rounded ${
+                                    step.status === 'completed' ? 'bg-green-100 text-green-800' :
+                                    step.status === 'failed' ? 'bg-red-100 text-red-800' :
+                                    step.status === 'running' ? 'bg-blue-100 text-blue-800' :
+                                    'bg-gray-100 text-gray-800'
+                                  }`}>
+                                    {step.type}
+                                  </span>
+                                </div>
+                                {step.error && (
+                                  <p className="text-sm text-red-600 mt-1">{step.error}</p>
+                                )}
+                                {step.started_at && (
+                                  <p className="text-xs text-gray-500 mt-1">
+                                    {new Date(step.started_at).toLocaleString()}
+                                  </p>
+                                )}
+                              </div>
+                            </div>
+                          )
+                        })}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )
+          })
+        )}
+      </div>
+    </div>
+  )
+}
+
+const Activity = ({ className }: { className?: string }) => (
+  <svg
+    className={className}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    strokeWidth={2}
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
+  </svg>
+)