Upload 17 files

.gitattributes

@@ -40,3 +40,5 @@ backend/outputs/eval/scene_c_dense.mp4 filter=lfs diff=lfs merge=lfs -text
 backend/outputs/eval/scene_d_escalating.mp4 filter=lfs diff=lfs merge=lfs -text
 backend/outputs/hajjflow_rt.db filter=lfs diff=lfs merge=lfs -text
 backend/outputs/plots/eval_risk.png filter=lfs diff=lfs merge=lfs -text
+frontend/public/hajj_real_video.mp4 filter=lfs diff=lfs merge=lfs -text
+frontend/public/hajj_video_h264.mp4 filter=lfs diff=lfs merge=lfs -text

frontend/STATE_REFERENCE.md

@@ -0,0 +1,48 @@
+# HaramGuard Realtime State Reference
+
+Frontend expects realtime payload from:
+
+- `${VITE_API_BASE_URL}${VITE_STATE_ENDPOINT}`
+- Default: `http://127.0.0.1:8000/api/realtime/state`
+
+## Required Keys
+
+| Key | Type | Notes |
+| --- | --- | --- |
+| `frame_id` | `number` | Latest processed frame id |
+| `annotated` | `string \| object \| null` | `data:image/...`, full URL, base64 string, or `{ jpeg_base64 }` |
+| `person_count` | `number` | Current people count |
+| `density_score` | `number` | Density score from perception |
+| `fps` | `number` | Processing FPS |
+| `risk_score` | `number` | Range `0..1` |
+| `risk_level` | `string` | `HIGH`, `MEDIUM`, `LOW` (emoji/text accepted) |
+| `trend` | `string` | `rising`, `stable`, `falling` |
+| `risk_history` | `array` | Array of `{ frame_id, risk_score, risk_level }` |
+| `latest_decision` | `object` | Includes `priority`, `actions`, `timestamp`, `risk_score`, `risk_level` |
+| `decisions_log` | `array` | Last decisions list for table |
+| `arabic_alert` | `string` | Arabic alert line in red panel |
+| `coordinator_plan` | `object` | `threat_level`, `executive_summary`, `immediate_actions`, `confidence_score` |
+
+## Optional Env Vars
+
+- `VITE_API_BASE_URL` (default `http://127.0.0.1:8000`)
+- `VITE_STATE_ENDPOINT` (default `/api/realtime/state`)
+- `VITE_DASH_REFRESH_MS` (default `1000`)
+- `VITE_DEMO_VIDEO_URL` (video URL used when `annotated` is unavailable)
+
+---
+
+## New Fields (Agent Stats, Gates, Proposed Actions)
+
+| Key | Type | Notes |
+| --- | --- | --- |
+| `agent_stats` | `object` | `{ resolved_alerts: number, pending_decisions: number, urgent_interventions: number }` — shown in AI agent mini-stat cards |
+| `gates` | `array` | Array of `{ id: string, status: "open" \| "partial" \| "closed" }`. Six gates expected. `id` is a display label (e.g. Arabic-Indic numeral like `"١"`). |
+| `proposed_actions` | `array` | Array of `{ id: string, timestamp: string (ISO 8601), priority: "urgent" \| "watch" \| "completed", title: string, description: string }` |
+
+## Action Approval Endpoints
+
+| Endpoint | Method | Notes |
+| --- | --- | --- |
+| `/api/actions/{id}/approve` | `POST` | Approve a proposed action. Frontend applies optimistic update instantly. |
+| `/api/actions/{id}/reject` | `POST` | Reject (dismiss) a proposed action. Frontend removes it from the list optimistically. |

frontend/dist/assets/index-DwpMV8UQ.css

@@ -0,0 +1 @@
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.absolute{position:absolute}.relative{position:relative}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.bottom-4{bottom:1rem}.left-4{left:1rem}.right-4{right:1rem}.col-span-3{grid-column:span 3 / span 3}.col-span-6{grid-column:span 6 / span 6}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mt-2{margin-top:.5rem}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-\[120px\]{height:120px}.h-\[150px\]{height:150px}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[220px\]{max-height:220px}.min-h-0{min-height:0px}.w-10{width:2.5rem}.w-2{width:.5rem}.w-\[120px\]{width:120px}.w-full{width:100%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-r-2{border-right-width:2px}.object-cover{-o-object-fit:cover;object-fit:cover}.p-3{padding:.75rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pb-0{padding-bottom:0}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-wide{letter-spacing:.025em}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}html,body,#root{height:100%}body{margin:0}.leaflet-container{width:100%;height:100%;z-index:0;background-color:#07130f}.leaflet-popup-content-wrapper{background:#0a1c14f2;color:#e6fff3;border:1px solid rgba(126,245,200,.3);border-radius:12px;box-shadow:0 10px 25px #0006}.leaflet-popup-tip{background:#0a1c14f2}.leaflet-popup-close-button{color:#7ef5c8!important}.leaflet-tooltip{pointer-events:none!important}@media(min-width:768px){.md\:block{display:block}.md\:flex{display:flex}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}

frontend/dist/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="ar" dir="rtl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HaramGuard Dashboard</title>
+    <script type="module" crossorigin src="/assets/index-DpH2i0wj.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DwpMV8UQ.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

frontend/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="ar" dir="rtl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HaramGuard - Dashboard</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "haramguard-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "leaflet": "^1.9.4",
+    "lucide-react": "^0.542.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-leaflet": "^4.2.1",
+    "react-router-dom": "^6.30.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^5.0.4",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "vite": "^7.1.7"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

frontend/public/hajj_real_video.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ebcb81d8f6790dcb04b8998f479efcdb3177d9d7a180c3f4615bbe61eb9844bc
+size 11125194

frontend/public/hajj_video_h264.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cf2d8997c4564ae2420e668a0b8f492fa1d4a5deb60de7eed01b2cb88986a893
+size 3406067

frontend/src/App.jsx

@@ -0,0 +1,13 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+import Dashboard from './pages/Dashboard';
+
+function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<Dashboard />} />
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}
+
+export default App;

frontend/src/index.css

@@ -0,0 +1,46 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: 'Cairo', 'Segoe UI', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+.leaflet-container {
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  background-color: #07130f;
+}
+
+.leaflet-popup-content-wrapper {
+  background: rgba(10, 28, 20, 0.95);
+  color: #e6fff3;
+  border: 1px solid rgba(126, 245, 200, 0.3);
+  border-radius: 12px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
+}
+
+.leaflet-popup-tip {
+  background: rgba(10, 28, 20, 0.95);
+}
+
+.leaflet-popup-close-button {
+  color: #7ef5c8 !important;
+}
+
+.leaflet-tooltip {
+  pointer-events: none !important;
+}

frontend/src/main.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

frontend/src/pages/Dashboard.jsx

@@ -0,0 +1,1027 @@
+import {
+  AlertTriangle,
+  Bell,
+  CheckCircle,
+  Clock3,
+  Cpu,
+  Gauge,
+  MessageSquareWarning,
+  Pause,
+  Play,
+  RefreshCw,
+  Trash2,
+  TrendingUp,
+  Users,
+} from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import kaabaLogo from '../Fin.svg';
+
+const COLORS = {
+  deepForest:   '#051f18',
+  primaryGreen: '#0d3829',
+  forestShadow: '#082d21',
+  successGreen: '#2a9d6f',
+  mint:         '#7ef5c8',
+  deepEmerald:  '#1e7552',
+  panelBg:      '#101f1a',
+  cardDark:     '#0d1a14',
+  elementBg:    '#142520',
+  navDark:      '#0d251c',
+  text:         '#ffffff',
+  textMuted:    '#d0e8dc',
+  red:          '#ff6b6b',
+  orange:       '#ff9800',
+  yellow:       '#ffd54f',
+  borderMint:   'rgba(126,245,200,0.16)',
+};
+
+const API_BASE_URL    = import.meta.env.VITE_API_BASE_URL   || 'http://127.0.0.1:8000';
+const STATE_ENDPOINT  = import.meta.env.VITE_STATE_ENDPOINT || '/api/realtime/state';
+const REFRESH_MS      = Number(import.meta.env.VITE_DASH_REFRESH_MS || 1000);
+const SMOOTH_WINDOW   = 3; // rolling average over last N frames
+
+// ── Demo mode constants (PRESENTATION SAFETY — DO NOT CHANGE) ──────────
+const DEMO_FRAME_COUNT  = 17;   // hard limit: only frames 0–16 are valid
+const DEMO_MAX_INDEX    = 16;   // = DEMO_FRAME_COUNT - 1
+const DEMO_INTERVAL_MS  = 1500; // auto-play speed (ms per frame)
+
+// ── Unique-ID window constant ────────────────────────────────────────────
+const ID_WINDOW_SIZE = 6;   // frames per unique-ID window (real YOLO track_ids)
+
+
+const RISK_LEVEL_META = {
+  HIGH:   { label: 'عالي',   ar: 'عالي',   color: COLORS.red },
+  MEDIUM: { label: 'متوسط',  ar: 'متوسط',  color: COLORS.orange },
+  LOW:    { label: 'منخفض',  ar: 'منخفض',  color: COLORS.successGreen },
+};
+
+const AGENT_TEXTS = [
+  'يحسب أفضل نشر لوحدات الأمن...',
+  'يحلل كثافة الحشود في المناطق الحرجة...',
+  'يقيّم مستوى المخاطر الراهن...',
+  'يقترح مسارات بديلة لتخفيف الضغط...',
+  'يراقب تدفق الحشود عند البوابات...',
+];
+
+const ACTION_PRIORITY_META = {
+  urgent:    { label: '⚡ عاجل',   color: COLORS.orange },
+  watch:     { label: '⏳ مراقبة', color: COLORS.yellow },
+  completed: { label: '✓ منفذ',   color: COLORS.successGreen },
+};
+
+const ACTIONS_APPROVE_ENDPOINT = (id) => `/api/actions/${id}/approve`;
+const ACTIONS_REJECT_ENDPOINT  = (id) => `/api/actions/${id}/reject`;
+
+const normalizeRiskLevel = (value) => {
+  const text = (value || '').toString().toUpperCase();
+  if (text.includes('HIGH')) return 'HIGH';
+  if (text.includes('LOW'))  return 'LOW';
+  return 'MEDIUM';
+};
+
+const normalizeAnnotatedSrc = (annotated) => {
+  if (!annotated) return null;
+  if (typeof annotated === 'string') {
+    if (annotated.startsWith('data:image') || annotated.startsWith('http')) return annotated;
+    return `data:image/jpeg;base64,${annotated}`;
+  }
+  if (typeof annotated === 'object') {
+    if (annotated.jpeg_base64) return `data:image/jpeg;base64,${annotated.jpeg_base64}`;
+    if (annotated.base64)      return `data:image/jpeg;base64,${annotated.base64}`;
+    if (annotated.url)         return annotated.url;
+  }
+  return null;
+};
+
+// ── KPI card ────────────────────────────────────────────────────────────
+function KpiCard({ icon: Icon, title, value, note, accent }) {
+  return (
+    <div
+      className="rounded-xl p-3 shadow-lg"
+      style={{
+        background:    `linear-gradient(145deg, ${COLORS.cardDark}, ${COLORS.deepForest})`,
+        borderRight:   `3px solid ${accent}`,
+        border:        `1px solid ${COLORS.borderMint}`,
+      }}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <div>
+          <p className="text-[11px] font-bold" style={{ color: COLORS.textMuted }}>{title}</p>
+          <p className="text-xl font-black" style={{ color: COLORS.text }}>{value}</p>
+          <p className="text-[10px]"         style={{ color: COLORS.textMuted }}>{note}</p>
+        </div>
+        <div className="h-10 w-10 rounded-full flex items-center justify-center"
+             style={{ backgroundColor: `${accent}22` }}>
+          <Icon size={18} style={{ color: accent }} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Summary card (replaces FPS) ─────────────────────────────────────────
+function SummaryCard({ summary, accent }) {
+  return (
+    <div
+      className="rounded-xl p-3 shadow-lg"
+      style={{
+        background:  `linear-gradient(145deg, ${COLORS.cardDark}, ${COLORS.deepForest})`,
+        borderRight: `3px solid ${accent}`,
+        border:      `1px solid ${COLORS.borderMint}`,
+      }}
+    >
+      <p className="text-[11px] font-bold mb-1" style={{ color: COLORS.textMuted }}>ملخص الموقف</p>
+      <p className="text-[11px] leading-relaxed font-medium" style={{ color: COLORS.text }}>
+        {summary || '---'}
+      </p>
+    </div>
+  );
+}
+
+// ── Risk gauge ──────────────────────────────────────────────────────────
+// IMPORTANT: color/level driven by SCORE THRESHOLDS (0.35 / 0.65),
+// NOT by the risk_level string — ensures indicator changes exactly at thresholds.
+function RiskGauge({ riskScore = 0, densityPct = 0 }) {
+  const clamped    = Math.max(0, Math.min(1, Number(riskScore) || 0));
+  const percentage = Math.round(clamped * 100);
+  const strokeLen  = 2 * Math.PI * 54;
+  const strokeOff  = strokeLen - (strokeLen * percentage) / 100;
+
+  // Derive level purely from score thresholds
+  const levelKey = clamped >= 0.65 ? 'HIGH' : clamped >= 0.35 ? 'MEDIUM' : 'LOW';
+  const meta     = RISK_LEVEL_META[levelKey];
+
+  return (
+    <div className="rounded-xl p-4"
+         style={{ background: `linear-gradient(145deg, ${COLORS.cardDark}, ${COLORS.deepForest})`, border: `1px solid ${COLORS.borderMint}` }}>
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="text-sm font-bold" style={{ color: COLORS.mint }}>مؤشر المخاطر</h3>
+        <span className="text-[11px] px-2 py-0.5 rounded font-bold"
+              style={{ color: meta.color, backgroundColor: `${meta.color}22` }}>
+          {meta.ar}
+        </span>
+      </div>
+      <div className="flex items-center gap-4">
+        <svg viewBox="0 0 130 130" className="w-[120px] h-[120px] shrink-0">
+          <circle cx="65" cy="65" r="54" fill="none" stroke="rgba(255,255,255,0.11)" strokeWidth="11" />
+          <circle cx="65" cy="65" r="54" fill="none" stroke={meta.color} strokeWidth="11"
+                  strokeLinecap="round" strokeDasharray={strokeLen} strokeDashoffset={strokeOff}
+                  transform="rotate(-90 65 65)" />
+          <text x="65" y="58" textAnchor="middle" fill={COLORS.textMuted} fontSize="11">خطر</text>
+          <text x="65" y="79" textAnchor="middle" fill={COLORS.text} fontSize="24" fontWeight="700">
+            {percentage}%
+          </text>
+        </svg>
+        <div className="text-xs space-y-1">
+          <p style={{ color: COLORS.textMuted }}>القيمة: {clamped.toFixed(2)}</p>
+          <p style={{ color: COLORS.textMuted }}>المستوى: {meta.label}</p>
+          <p style={{ color: COLORS.textMuted }}>
+            الكثافة: <span style={{ color: COLORS.mint }}>{densityPct}%</span>
+          </p>
+          <p style={{ color: meta.color }} className="font-semibold">
+            {percentage >= 65 ? 'يتطلب تدخل فوري' : percentage >= 35 ? 'يتطلب مراقبة' : 'مستقر حاليا'}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Agent status ────────────────────────────────────────────────────────
+function AgentStatus({ stats = {} }) {
+  const [textIdx, setTextIdx] = useState(0);
+  useEffect(() => {
+    const t = setInterval(() => setTextIdx((i) => (i + 1) % AGENT_TEXTS.length), 4000);
+    return () => clearInterval(t);
+  }, []);
+
+  const miniCards = [
+    { value: stats.resolved_alerts      ?? 0, label: 'تنبيه محلول', color: COLORS.successGreen },
+    { value: stats.pending_decisions    ?? 0, label: 'قرار معلق',   color: COLORS.orange },
+    { value: stats.urgent_interventions ?? 0, label: 'تدخل عاجل',  color: COLORS.red },
+  ];
+
+  return (
+    <div className="rounded-xl p-3"
+         style={{ background: `linear-gradient(145deg, ${COLORS.cardDark}, ${COLORS.deepForest})`, border: `1px solid ${COLORS.borderMint}` }}>
+      <div className="flex items-center gap-2 mb-3">
+        <span className="text-lg" role="img" aria-label="AI agent">🤖</span>
+        <p className="text-xs font-semibold leading-snug" style={{ color: COLORS.mint }}>
+          {AGENT_TEXTS[textIdx]}
+        </p>
+      </div>
+      <div className="grid grid-cols-3 gap-2">
+        {miniCards.map((card) => (
+          <div key={card.label} className="rounded-lg p-2 text-center"
+               style={{ backgroundColor: `${card.color}18`, border: `1px solid ${card.color}44` }}>
+            <p className="text-xl font-black leading-none" style={{ color: card.color }}>{card.value}</p>
+            <p className="text-[10px] mt-1" style={{ color: COLORS.textMuted }}>{card.label}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ── Proposed actions — full detail card ──────────────────────────────────
+// resolved: Map<id, 'approved'|'rejected'> — resolved actions stay visible at bottom
+function ProposedActions({ actions = [], resolved = new Map(), onApprove, onReject, onDelete }) {
+  // pending first, resolved last
+  const pending      = actions.filter((a) => !resolved.has(a.id));
+  const resolvedList = actions.filter((a) =>  resolved.has(a.id));
+  const ordered      = [...pending, ...resolvedList];
+
+  const renderAction = (action) => {
+    const resolvedStatus = resolved.get(action.id); // 'approved' | 'rejected' | undefined
+    const isResolved = !!resolvedStatus;
+    const meta    = ACTION_PRIORITY_META[action.priority] || ACTION_PRIORITY_META.watch;
+    const timeStr = (action.timestamp || '').toString().slice(11, 16);
+    const isDone  = isResolved;
+    const gates   = Array.isArray(action.selected_gates) ? action.selected_gates : [];
+    const allActs = Array.isArray(action.all_actions)    ? action.all_actions    : [];
+
+    // Badge for resolved state
+    const resolvedBadge = resolvedStatus === 'approved'
+      ? { label: '✓ تم التنفيذ', color: COLORS.successGreen }
+      : resolvedStatus === 'rejected'
+      ? { label: '✕ مرفوض',     color: COLORS.red }
+      : null;
+
+    return (
+      <div key={action.id} className="rounded-lg p-2.5 space-y-1.5"
+           style={{
+             backgroundColor: isResolved ? `${COLORS.elementBg}88` : COLORS.elementBg,
+             border: `1px solid ${isResolved ? 'rgba(255,255,255,0.08)' : COLORS.borderMint}`,
+             opacity: isResolved ? 0.75 : 1,
+           }}>
+
+        {/* Header row */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-1.5">
+            <span className="text-[10px] font-bold px-1.5 py-0.5 rounded"
+                  style={{ color: meta.color, backgroundColor: `${meta.color}22` }}>
+              {meta.label}
+            </span>
+            {/* Resolved status badge */}
+            {resolvedBadge && (
+              <span className="text-[10px] font-bold px-1.5 py-0.5 rounded"
+                    style={{ color: resolvedBadge.color, backgroundColor: `${resolvedBadge.color}22`, border: `1px solid ${resolvedBadge.color}55` }}>
+                {resolvedBadge.label}
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            {action.threat_level ? (() => {
+              const tlMeta = RISK_LEVEL_META[normalizeRiskLevel(action.threat_level)];
+              return (
+                <span className="text-[9px] font-bold px-1 py-0.5 rounded"
+                      style={{ color: tlMeta.color, backgroundColor: `${tlMeta.color}22` }}>
+                  {tlMeta.label}
+                </span>
+              );
+            })() : null}
+            <span className="text-[10px] font-mono" style={{ color: COLORS.textMuted }}>{timeStr}</span>
+          </div>
+        </div>
+
+        {/* Actions list */}
+        {allActs.length > 0 ? (
+          <div className="space-y-0.5">
+            {allActs.map((act, i) => (
+              <p key={i} className="text-[11px] font-semibold leading-snug flex gap-1"
+                 style={{ color: isResolved ? COLORS.textMuted : COLORS.text }}>
+                <span style={{ color: COLORS.mint }}>•</span> {act}
+              </p>
+            ))}
+          </div>
+        ) : (
+          <p className="text-[11px] font-semibold" style={{ color: isResolved ? COLORS.textMuted : COLORS.text }}>{action.title}</p>
+        )}
+
+        {/* Gates — show only selected_gates, one chip per gate, no emoji */}
+        {gates.length > 0 && (
+          <div className="flex flex-wrap gap-1 pt-0.5">
+            {gates.map((g, i) => (
+              <span key={i} className="text-[9px] font-bold px-1.5 py-0.5 rounded"
+                    style={{ backgroundColor: `${COLORS.mint}18`, color: COLORS.mint, border: `1px solid ${COLORS.mint}44` }}>
+                {g}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Justification */}
+        {action.description ? (
+          <p className="text-[10px] leading-relaxed" style={{ color: COLORS.textMuted }}>
+            {action.description}
+          </p>
+        ) : null}
+
+        {/* Arabic alert */}
+        {action.arabic_alert && !isResolved ? (
+          <p className="text-[10px] font-semibold leading-relaxed"
+             style={{ color: COLORS.red }}>
+            📢 {action.arabic_alert}
+          </p>
+        ) : null}
+
+        {/* Confidence */}
+        {action.confidence > 0 ? (
+          <div className="flex items-center gap-1.5">
+            <span className="text-[9px]" style={{ color: COLORS.textMuted }}>ثقة:</span>
+            <div className="flex-1 h-1 rounded" style={{ backgroundColor: 'rgba(255,255,255,0.1)' }}>
+              <div className="h-1 rounded"
+                   style={{ width: `${Math.round(action.confidence * 100)}%`, backgroundColor: COLORS.mint }} />
+            </div>
+            <span className="text-[9px] font-mono" style={{ color: COLORS.mint }}>
+              {Math.round(action.confidence * 100)}%
+            </span>
+          </div>
+        ) : null}
+
+        {/* Approve / Reject — only for unresolved actions */}
+        {!isDone && (
+          <div className="flex justify-end gap-1.5 pt-0.5">
+            <button onClick={() => onReject(action.id)}
+              className="text-[10px] font-bold px-2 py-1 rounded"
+              style={{ backgroundColor: `${COLORS.red}22`, color: COLORS.red, border: `1px solid ${COLORS.red}55` }}>
+              ✕ رفض
+            </button>
+            <button onClick={() => onApprove(action.id)}
+              className="flex items-center gap-1 text-[10px] font-bold px-2 py-1 rounded"
+              style={{ backgroundColor: `${COLORS.mint}22`, color: COLORS.mint, border: `1px solid ${COLORS.mint}55` }}>
+              <CheckCircle size={11} /> تنفيذ
+            </button>
+          </div>
+        )}
+        {/* Delete — only for resolved actions */}
+        {isDone && (
+          <div className="flex justify-end pt-0.5">
+            <button onClick={() => onDelete(action.id)}
+              className="flex items-center gap-1 text-[10px] font-bold px-2 py-1 rounded"
+              style={{ backgroundColor: `${COLORS.textMuted}15`, color: COLORS.textMuted, border: `1px solid ${COLORS.textMuted}33` }}>
+              <Trash2 size={11} /> حذف
+            </button>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="rounded-xl p-3"
+         style={{ background: `linear-gradient(145deg, ${COLORS.cardDark}, ${COLORS.deepForest})`, border: `1px solid ${COLORS.borderMint}` }}>
+      <h4 className="text-xs font-bold mb-3" style={{ color: COLORS.mint }}>الإجراءات المقترحة</h4>
+      {ordered.length === 0 && (
+        <p className="text-xs" style={{ color: COLORS.textMuted }}>لا يوجد إجراءات مقترحة حالياً.</p>
+      )}
+      <div className="space-y-3">
+        {ordered.map(renderAction)}
+      </div>
+    </div>
+  );
+}
+
+// ── HaramGuard Logo — pure JSX/CSS, no external SVG ────────────────────
+function HaramGuardLogo() {
+  return (
+    <div className="flex items-center gap-2 shrink-0">
+      {/* Kaaba SVG — loaded as image, transparent background */}
+      <img
+        src={kaabaLogo}
+        alt="شعار حارس الحرم"
+        style={{ width: 100, height: 100, objectFit: 'contain', marginTop: 1 }}
+      />
+      {/* Text block */}
+      <div className="flex flex-col justify-center" style={{ gap: 2 }}>
+        <p
+          style={{
+            fontFamily: "'Tajawal', 'Segoe UI', Tahoma, sans-serif",
+            fontSize: 22,
+            fontWeight: 800,
+            color: '#ffffff',
+            lineHeight: 1.1,
+            letterSpacing: 0.3,
+            margin: 0,
+          }}
+        >
+          HaramGuard
+        </p>
+        <p
+          style={{
+            fontFamily: "'Tajawal', 'Segoe UI', Tahoma, sans-serif",
+            fontSize: 11,
+            fontWeight: 500,
+            color: '#4A8C6F',
+            lineHeight: 1.2,
+            margin: 0,
+            letterSpacing: 0.5,
+          }}
+        >
+          نظام إدارة الحشود الذكي
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ── Dashboard ───────────────────────────────────────────────────────────
+// Zero state — shown when backend is disconnected
+const ZERO_STATE = {
+  frame_id:      0,
+  annotated:     null,
+  person_count:  0,
+  density_score: 0,
+  fps:           0,
+  risk_score:    0,
+  risk_level:    'LOW',
+  trend:         'stable',
+  risk_history:  [],
+  latest_decision: null,
+  decisions_log: [],
+  arabic_alert:   '',
+  coordinator_plan: null,
+  agent_stats: { resolved_alerts: 0, pending_decisions: 0, urgent_interventions: 0 },
+  proposed_actions: [],
+};
+
+function Dashboard() {
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [state,       setState]       = useState(ZERO_STATE);
+  const [apiConnected, setApiConnected] = useState(false);
+
+  // Smoothing buffer for risk score
+  const riskBuf = useRef([]);
+
+  // ── Demo mode state ───────────────────────────────────────────────
+  // frameBuffer holds exactly 17 frames (indices 0–16).
+  // demoIndex advances automatically; live stream is always frozen in demo mode.
+  const [frameBuffer,     setFrameBuffer]     = useState([]);  // [{frame_id, annotated, person_count}]
+  const [demoIndex,       setDemoIndex]       = useState(0);   // current frame in demo loop
+  const [demoPaused,      setDemoPaused]      = useState(false); // user paused the loop
+  const demoPausedRef = useRef(false);
+
+  // Zoom level for the annotated frame
+  const [zoomLevel, setZoomLevel] = useState(1.0);
+
+  // Resolved actions: Map<id, 'approved'|'rejected'> — stay visible with badge
+  const [resolvedActions, setResolvedActions] = useState(new Map());
+
+  // Reset counter — incrementing forces the polling effect to restart
+  const [resetCount, setResetCount] = useState(0);
+
+  // ── Crowd density state (6-frame unique-ID window + EMA) ─────────
+  const personWindowRef  = useRef([]);  // fallback: person_counts when no track_ids
+  const uniqueIdsWindow  = useRef([]);  // array of Sets — one Set per frame in window
+  const lastDecisionTime = useRef(0);
+  const [uniqueCount, setUniqueCount] = useState(0); // unique persons in 6-frame window
+
+  // ── Clock ─────────────────────────────────────────────────────────
+  useEffect(() => {
+    const t = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(t);
+  }, []);
+
+  // Keep demo refs in sync
+  useEffect(() => { demoPausedRef.current = demoPaused; }, [demoPaused]);
+
+  // ── Last seen backend frame_id — used to detect new frames ───────────
+  const lastBackendFrameId = useRef(-1);
+
+  // ── Single polling loop — drives EVERYTHING from backend frame_id ─────
+  // No independent timer. The demo only advances when the backend
+  // produces a new frame. Frontend is fully slave to backend speed.
+  // resetCount in deps: incrementing it restarts the loop (reset button).
+  useEffect(() => {
+    let isMounted = true;
+
+    const tick = async () => {
+      // 1. Fetch state (risk, decisions, alerts)
+      try {
+        const res = await fetch(`${API_BASE_URL}${STATE_ENDPOINT}`);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const payload = await res.json();
+        if (!isMounted || !payload || typeof payload !== 'object') return;
+
+        riskBuf.current = [...riskBuf.current, payload.risk_score ?? 0].slice(-SMOOTH_WINDOW);
+        const smoothRisk = parseFloat(
+          (riskBuf.current.reduce((a, b) => a + b, 0) / riskBuf.current.length).toFixed(4)
+        );
+
+        setState((prev) => {
+          // Accumulate proposed_actions: merge new ones on top, keep old below
+          const prevActions = prev.proposed_actions || [];
+          const newActions  = payload.proposed_actions || [];
+          const seenIds     = new Set(newActions.map((a) => a.id));
+          const merged      = [...newActions, ...prevActions.filter((a) => !seenIds.has(a.id))];
+
+          return {
+            ...prev,
+            ...payload,
+            person_count:     prev.person_count,  // overwritten below from buffer
+            risk_score:       smoothRisk,
+            proposed_actions: merged,
+          };
+        });
+        setApiConnected(true);
+
+        const backendFrameId = payload.frame_id ?? -1;
+
+        // 2. Only advance demo when backend has a NEW frame
+        if (backendFrameId !== lastBackendFrameId.current && backendFrameId > 0) {
+          lastBackendFrameId.current = backendFrameId;
+
+          // 3. Fetch buffer only when backend moved (no wasted calls)
+          try {
+            const bufRes = await fetch(`${API_BASE_URL}/api/frames/buffer`);
+            if (!bufRes.ok) return;
+            const bufData = await bufRes.json();
+            if (!isMounted || !bufData.frames?.length) return;
+
+            // Hard-cap to DEMO_FRAME_COUNT — never render beyond index 16
+            const newBuffer = bufData.frames.slice(0, DEMO_FRAME_COUNT);
+            setFrameBuffer(newBuffer);
+
+            // Advance demo index (only if not manually paused)
+            if (!demoPausedRef.current) {
+              setDemoIndex((prev) => {
+                const next = prev + 1;
+                const newIdx = (next > DEMO_MAX_INDEX || next >= newBuffer.length) ? 0 : next;
+
+                // ── 6-frame unique-ID window (unique persons only) ───
+                const frame      = newBuffer[newIdx];
+                const frameIds   = frame?.track_ids;
+                const hasRealIds = Array.isArray(frameIds) && frameIds.length > 0;
+
+                if (hasRealIds) {
+                  uniqueIdsWindow.current.push(new Set(frameIds));
+                  if (uniqueIdsWindow.current.length > ID_WINDOW_SIZE)
+                    uniqueIdsWindow.current.shift();
+                } else {
+                  const pc = frame?.person_count ?? 0;
+                  personWindowRef.current.push(pc);
+                  if (personWindowRef.current.length > ID_WINDOW_SIZE)
+                    personWindowRef.current.shift();
+                }
+
+                // Update unique count every frame (union across window)
+                if (uniqueIdsWindow.current.length > 0) {
+                  const unionSet = new Set();
+                  uniqueIdsWindow.current.forEach((s) => s.forEach((id) => unionSet.add(id)));
+                  setUniqueCount(unionSet.size);
+                } else if (personWindowRef.current.length > 0) {
+                  setUniqueCount(Math.max(...personWindowRef.current));
+                }
+
+                return newIdx;
+              });
+            }
+          } catch (_) {}
+        }
+
+      } catch {
+        if (isMounted) {
+          // Backend disconnected — zero out everything
+          setApiConnected(false);
+          setState(ZERO_STATE);
+          riskBuf.current = [];
+        }
+      }
+    };
+
+    tick();
+    const interval = setInterval(tick, REFRESH_MS);
+    return () => { isMounted = false; clearInterval(interval); };
+  }, [resetCount]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Seed index when buffer first loads
+  useEffect(() => {
+    if (frameBuffer.length === 0) return;
+    setDemoIndex(0);
+  }, [frameBuffer.length === 0]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Derived values ────────────────────────────────────────────────
+  // risk_score → level (used for "مستوى المخاطر" KPI + RiskGauge)
+  const riskScore    = Number(state.risk_score || 0);
+  const riskLevelKey = riskScore >= 0.65 ? 'HIGH' : riskScore >= 0.35 ? 'MEDIUM' : 'LOW';
+  const kpiRiskMeta  = RISK_LEVEL_META[riskLevelKey] ?? RISK_LEVEL_META['LOW'];
+
+  // Density % — computed by backend (density_pct = peak_ema / 50 * 100)
+  const densityPct = Math.round(state.density_pct ?? 0);
+
+  // Current demo frame (clamped strictly to 0–16)
+  const safeIndex    = Math.min(Math.max(demoIndex, 0), DEMO_MAX_INDEX);
+  const currentFrame = frameBuffer[safeIndex] ?? null;
+
+  // The frame image to display — always from demo buffer, never live stream
+  const displayedSrc = currentFrame
+    ? `data:image/jpeg;base64,${currentFrame.annotated}`
+    : null;
+
+  // Per-frame person count (for the KPI card "عدد الأشخاص")
+  const demoPersonCount = currentFrame?.person_count ?? 0;
+
+  const computedActions = useMemo(() => state.proposed_actions || [], [state.proposed_actions]);
+
+  // ── Handlers ──────────────────────────────────────────────────────
+  const handlePause = () => setDemoPaused(true);
+  const handlePlay  = () => setDemoPaused(false);
+
+  const handleApprove = async (id) => {
+    setResolvedActions((prev) => new Map([...prev, [id, 'approved']]));
+    try { await fetch(`${API_BASE_URL}${ACTIONS_APPROVE_ENDPOINT(id)}`, { method: 'POST' }); } catch (_) {}
+  };
+
+  const handleReject = async (id) => {
+    setResolvedActions((prev) => new Map([...prev, [id, 'rejected']]));
+    try { await fetch(`${API_BASE_URL}${ACTIONS_REJECT_ENDPOINT(id)}`, { method: 'POST' }); } catch (_) {}
+  };
+
+  const handleDelete = (id) => {
+    setResolvedActions((prev) => { const m = new Map(prev); m.delete(id); return m; });
+    setState((prev) => ({
+      ...prev,
+      proposed_actions: (prev.proposed_actions || []).filter((a) => a.id !== id),
+    }));
+  };
+
+  const handleZoomIn  = () => setZoomLevel((z) => Math.min(z + 0.25, 3.0));
+  const handleZoomOut = () => setZoomLevel((z) => Math.max(z - 0.25, 0.5));
+
+  // Reset: clears ALL local state and restarts the polling loop from scratch.
+  // resetCount increment kills the old interval and starts a fresh one,
+  // which prevents stale EMA / risk score from bleeding into the new run.
+  const handleReset = useCallback(async () => {
+    // ── 1. Tell backend to reset pipeline ─────────────────────────────
+    try {
+      await fetch(`${API_BASE_URL}/api/reset`, { method: 'POST' });
+    } catch (_) {}
+
+    // ── 2. Clear all frontend state ───────────────────────────────────
+    setDemoIndex(0);
+    setFrameBuffer([]);
+    setDemoPaused(false);
+    demoPausedRef.current = false;
+    setResolvedActions(new Map());
+    setZoomLevel(1.0);
+
+    // ── Risk smoothing buffer — must clear before new poll reads it ───
+    riskBuf.current = [];
+
+    // ── Reset state to zero so gauge/KPIs don't show stale HIGH ──────
+    setState(ZERO_STATE);
+
+    // ── Unique-ID window ─────────────────────────────────────────────
+    personWindowRef.current = [];
+    uniqueIdsWindow.current = [];
+    setUniqueCount(0);
+    lastDecisionTime.current = 0;
+
+    // ── 3. Restart polling loop (kills old interval, creates fresh one)
+    lastBackendFrameId.current = -1;
+    setResetCount((c) => c + 1);
+  }, []);
+
+  // Keyboard: ← / → step through demo frames (pauses loop), +/- zoom
+  // Clamp: never exceed DEMO_MAX_INDEX (16)
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === 'ArrowRight') {
+        setDemoPaused(true);
+        setDemoIndex((prev) => Math.max(prev - 1, 0));
+      } else if (e.key === 'ArrowLeft') {
+        setDemoPaused(true);
+        setDemoIndex((prev) => Math.min(prev + 1, DEMO_MAX_INDEX));
+      } else if (e.key === '+' || e.key === '=') {
+        handleZoomIn();
+      } else if (e.key === '-') {
+        handleZoomOut();
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  // ── Situation summary: prefer coordinator plan, fallback to arabic alert
+  const situationSummary =
+    state.coordinator_plan?.executive_summary ||
+    state.arabic_alert ||
+    '---';
+
+  // ── Render ────────────────────────────────────────────────────────
+  return (
+    <div
+      dir="rtl"
+      className="h-screen w-full overflow-hidden flex flex-col"
+      style={{ background: `linear-gradient(135deg, ${COLORS.deepForest} 0%, ${COLORS.primaryGreen} 50%, ${COLORS.forestShadow} 100%)` }}
+    >
+      {/* ── Header ── */}
+      <header
+        className="h-16 px-6 border-b flex items-center justify-between shrink-0"
+        style={{ backgroundColor: COLORS.navDark, borderColor: COLORS.borderMint }}
+      >
+        {/* ── HaramGuard Logo — pure JSX ── */}
+        <HaramGuardLogo />
+        <div className="flex items-center gap-3">
+          {/* API connection indicator */}
+          <div className="hidden md:flex items-center gap-1.5 text-xs" style={{ color: COLORS.textMuted }}>
+            <span className="w-2 h-2 rounded-full" style={{ backgroundColor: apiConnected ? COLORS.successGreen : COLORS.red }} />
+            {apiConnected ? 'متصل' : 'غير متصل'}
+          </div>
+          {/* Reset button */}
+          <button
+            onClick={handleReset}
+            title="إعادة تشغيل من البداية"
+            className="flex items-center gap-1.5 text-[11px] font-bold px-3 py-1.5 rounded-lg border"
+            style={{
+              borderColor: COLORS.borderMint,
+              color:       COLORS.textMuted,
+              backgroundColor: COLORS.elementBg,
+            }}
+          >
+            <RefreshCw size={13} />
+          
+          </button>
+          <div className="text-left hidden md:block">
+            <p className="font-mono font-bold text-lg leading-none" style={{ color: COLORS.mint }}>
+              {currentTime.toLocaleTimeString('en-GB', { hour12: false })}
+            </p>
+            <p className="text-[11px]" style={{ color: COLORS.text }}>
+              {currentTime.toLocaleDateString('ar-SA')}
+            </p>
+          </div>
+          <div className="relative">
+            <Bell size={18} style={{ color: COLORS.text }} />
+            <span className="absolute -top-1 -right-1 w-2 h-2 rounded-full" style={{ backgroundColor: COLORS.red }} />
+          </div>
+        </div>
+      </header>
+
+      {/* ── KPI bar ── */}
+      <div className="grid grid-cols-2 md:grid-cols-5 gap-3 p-4 pb-0 shrink-0">
+        <KpiCard
+          icon={Users}
+          title="عدد المعتمرين"
+          value={demoPersonCount}
+          accent={COLORS.red}
+        />
+        <KpiCard
+          icon={Gauge}
+          title="مستوى المخاطر"
+          value={kpiRiskMeta.ar}
+          accent={kpiRiskMeta.color}
+        />
+        {/* الحشود الفريدة — unique IDs across 6-frame window */}
+        <KpiCard
+          icon={Users}
+          title="إجمالي المعتمرين"
+          value={uniqueCount}
+          accent={COLORS.mint}
+        />
+        {/* الكثافة = density_ema / 50 * 100 % */}
+        <KpiCard
+          icon={TrendingUp}
+          title="الكثافة"
+          value={`${densityPct}%`}
+          accent={COLORS.orange}
+        />
+        <KpiCard
+          icon={AlertTriangle}
+          title="الأولوية الحالية"
+          value={state.latest_decision?.priority || '-'}
+          accent={COLORS.mint}
+        />
+      </div>
+
+      {/* ── Main grid ── */}
+      <div className="flex-1 min-h-0 p-4 grid grid-cols-12 gap-4 overflow-hidden">
+
+        {/* ── Left sidebar ── */}
+        <aside
+          className="col-span-3 rounded-xl border overflow-hidden flex flex-col shadow-2xl"
+          style={{ backgroundColor: `${COLORS.panelBg}f2`, borderColor: COLORS.borderMint }}
+        >
+          <div className="p-3 border-b" style={{ borderColor: COLORS.borderMint }}>
+            <h3 className="font-bold text-sm flex items-center gap-2" style={{ color: COLORS.text }}>
+              <Cpu size={14} style={{ color: COLORS.mint }} />
+              نظام التوصيات التشغيلية
+            </h3>
+          </div>
+          <div className="flex-1 overflow-y-auto p-3 space-y-3">
+            <AgentStatus stats={state.agent_stats} />
+            <ProposedActions
+              actions={computedActions}
+              resolved={resolvedActions}
+              onApprove={handleApprove}
+              onReject={handleReject}
+              onDelete={handleDelete}
+            />
+            {/* Confidence score — sourced from coordinator_plan (backend AI only) */}
+            {state.coordinator_plan?.confidence_score != null && (
+              <div className="rounded-lg border p-3"
+                   style={{ borderColor: COLORS.borderMint, backgroundColor: COLORS.elementBg }}>
+                <div className="flex items-center justify-between text-xs mb-2">
+                  <span style={{ color: COLORS.textMuted }}>ثقة نظام الذكاء الاصطناعي</span>
+                  <span style={{ color: COLORS.mint }} className="font-bold">
+                    {Number(state.coordinator_plan.confidence_score).toFixed(2)}
+                  </span>
+                </div>
+                <div className="w-full h-2 rounded" style={{ backgroundColor: 'rgba(255,255,255,0.1)' }}>
+                  <div
+                    className="h-2 rounded"
+                    style={{
+                      width: `${Math.round(Number(state.coordinator_plan.confidence_score) * 100)}%`,
+                      background: `linear-gradient(90deg, ${COLORS.deepEmerald}, ${COLORS.mint})`,
+                    }}
+                  />
+                </div>
+                {state.coordinator_plan.actions_justification && (
+                  <p className="text-[10px] mt-2 leading-relaxed" style={{ color: COLORS.textMuted }}>
+                    {state.coordinator_plan.actions_justification}
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        </aside>
+
+        {/* ── Center — annotated frame display ── */}
+        <main
+          className="col-span-6 rounded-xl border overflow-hidden relative flex flex-col"
+          style={{ borderColor: COLORS.borderMint, backgroundColor: '#060f0b' }}
+        >
+          {/* Title bar */}
+          <div
+            className="px-4 py-2 border-b flex items-center justify-between shrink-0"
+            style={{ borderColor: COLORS.borderMint, backgroundColor: COLORS.navDark }}
+          >
+            <h3 className="text-sm font-bold" style={{ color: COLORS.mint }}>
+              تحليل مقطع الحشود
+            </h3>
+            <div className="flex items-center gap-2">
+              {/* Zoom controls */}
+              <button onClick={handleZoomOut}
+                className="text-[11px] px-2 py-1 rounded border font-bold"
+                style={{ borderColor: COLORS.borderMint, color: COLORS.textMuted }}>−</button>
+              <span className="text-[11px] font-mono w-10 text-center" style={{ color: COLORS.textMuted }}>
+                {Math.round(zoomLevel * 100)}%
+              </span>
+              <button onClick={handleZoomIn}
+                className="text-[11px] px-2 py-1 rounded border font-bold"
+                style={{ borderColor: COLORS.borderMint, color: COLORS.textMuted }}>+</button>
+              {/* Pause/Play */}
+              <button
+                onClick={demoPaused ? handlePlay : handlePause}
+                className="flex items-center gap-1 text-[11px] px-2 py-1 rounded border"
+                style={{ borderColor: COLORS.borderMint, color: COLORS.textMuted }}
+              >
+                {demoPaused ? <Play size={12} /> : <Pause size={12} />}
+                {demoPaused ? 'تشغيل' : 'إيقاف'}
+              </button>
+            </div>
+          </div>
+
+          {/* Frame display area */}
+          <div className="flex-1 min-h-0 relative bg-black flex items-center justify-center overflow-auto">
+            {displayedSrc ? (
+              <img
+                src={displayedSrc}
+                alt="إطار محلل"
+                style={{
+                  objectFit: 'contain',
+                  width:  zoomLevel === 1.0 ? '100%' : `${zoomLevel * 100}%`,
+                  height: zoomLevel === 1.0 ? '100%' : 'auto',
+                  maxWidth: 'none',
+                  transition: 'width 0.15s, height 0.15s',
+                }}
+              />
+            ) : (
+              <div className="flex flex-col items-center gap-2" style={{ color: COLORS.textMuted }}>
+                <div className="text-3xl opacity-30">🕌</div>
+                <p className="text-sm">في انتظار البيانات...</p>
+              </div>
+            )}
+            {demoPaused && displayedSrc && (
+              <div
+                className="absolute top-2 left-2 text-[10px] px-2 py-1 rounded font-bold"
+                style={{ backgroundColor: 'rgba(0,0,0,0.6)', color: COLORS.orange }}
+              >
+                ⏸ متوقف
+              </div>
+            )}
+          </div>
+
+          {/* ── Frame scrubber — demo mode, locked 0–16 ── */}
+          <div
+            className="shrink-0 px-3 py-2 flex flex-col gap-1"
+            style={{ backgroundColor: COLORS.navDark, borderTop: `1px solid ${COLORS.borderMint}` }}
+          >
+            {frameBuffer.length > 0 ? (
+              <>
+                {/* Nav buttons + slider */}
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => { setDemoPaused(true); setDemoIndex((i) => Math.max(i - 1, 0)); }}
+                    className="text-[11px] px-2 py-0.5 rounded border font-bold shrink-0"
+                    style={{ borderColor: COLORS.borderMint, color: COLORS.textMuted }}
+                  >→</button>
+                  <input
+                    type="range"
+                    min={0}
+                    max={DEMO_MAX_INDEX}
+                    step={1}
+                    value={safeIndex}
+                    onChange={(e) => { setDemoPaused(true); setDemoIndex(Number(e.target.value)); }}
+                    className="flex-1 cursor-pointer"
+                    style={{ accentColor: COLORS.mint }}
+                  />
+                  <button
+                    onClick={() => { setDemoPaused(true); setDemoIndex((i) => Math.min(i + 1, DEMO_MAX_INDEX)); }}
+                    className="text-[11px] px-2 py-0.5 rounded border font-bold shrink-0"
+                    style={{ borderColor: COLORS.borderMint, color: COLORS.textMuted }}
+                  >←</button>
+                </div>
+              </>
+            ) : null}
+          </div>
+        </main>
+
+        {/* ── Right sidebar ── */}
+        <aside
+          className="col-span-3 rounded-xl border overflow-hidden flex flex-col shadow-2xl"
+          style={{ backgroundColor: `${COLORS.panelBg}f2`, borderColor: COLORS.borderMint }}
+        >
+          <div className="p-3 border-b" style={{ borderColor: COLORS.borderMint }}>
+            <h3 className="font-bold text-sm flex items-center gap-2" style={{ color: COLORS.text }}>
+              <Clock3 size={14} style={{ color: COLORS.mint }} />
+              التنبيهات والقرارات
+            </h3>
+          </div>
+          <div className="flex-1 overflow-y-auto p-3 space-y-3">
+            {/* Arabic alert */}
+            {(() => {
+              const alertColor = kpiRiskMeta.color;
+              return (
+                <div className="rounded-lg border p-3"
+                     style={{ borderColor: `${alertColor}66`, backgroundColor: `${alertColor}12` }}>
+                  <p className="text-[11px] mb-1 flex items-center gap-1" style={{ color: alertColor }}>
+                    <MessageSquareWarning size={13} /> تنبيه عاجل
+                  </p>
+                  <p className="text-xs font-semibold leading-relaxed" style={{ color: COLORS.text }}>
+                    {state.arabic_alert || 'لا يوجد تنبيه حالي'}
+                  </p>
+                </div>
+              );
+            })()}
+
+            <RiskGauge
+              riskScore={state.risk_score}
+              densityPct={densityPct}
+            />
+
+            {/* Decisions log */}
+            <div className="rounded-xl border overflow-hidden" style={{ borderColor: COLORS.borderMint }}>
+              <div className="px-3 py-2 text-xs font-bold"
+                   style={{ backgroundColor: COLORS.elementBg, color: COLORS.mint }}>
+                سجل القرارات (آخر 10)
+              </div>
+              <div className="max-h-[220px] overflow-auto">
+                <table className="w-full text-xs">
+                  <thead style={{ backgroundColor: 'rgba(255,255,255,0.03)' }}>
+                    <tr>
+                      <th className="px-2 py-2 text-right" style={{ color: COLORS.textMuted }}>الوقت</th>
+                      <th className="px-2 py-2 text-right" style={{ color: COLORS.textMuted }}>الأولوية</th>
+                      <th className="px-2 py-2 text-right" style={{ color: COLORS.textMuted }}>المستوى</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {(state.decisions_log || []).slice(0, 10).map((decision, idx) => {
+                      const decMeta = RISK_LEVEL_META[normalizeRiskLevel(decision.risk_level)];
+                      return (
+                        <tr key={`${decision.frame_id || 'f'}-${idx}`}
+                            style={{ borderTop: '1px solid rgba(255,255,255,0.06)' }}>
+                          <td className="px-2 py-2" style={{ color: COLORS.text }}>
+                            {(decision.timestamp || '').toString().slice(11, 19) || '--:--:--'}
+                          </td>
+                          <td className="px-2 py-2" style={{ color: COLORS.text }}>
+                            {decision.priority || '-'}
+                          </td>
+                          <td className="px-2 py-2" style={{ color: decMeta.color }}>
+                            {decMeta.label}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </aside>
+
+      </div>
+    </div>
+  );
+}
+
+export default Dashboard;

frontend/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,jsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

frontend/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});