منصة أتمتة ذكية Human-in-the-Loop — React + Claude AI + BullMQ

لصالح: مشروع تجريبي شخصي (Side Project) — نُشر على Vercel

الهدف: بناء منصة أتمتة ذكية تعمل بنظام Human-in-the-Loop: الذكاء الاصطناعي يُقترح الإجراءات، والإنسان يُراجعها ويوافق عليها أو يرفضها قبل التنفيذ. يُستخدم في سيناريوهات حساسة مثل إرسال بريد إلكتروني جماعي، إنشاء أحداث تقويم، أو فتح تذاكر Jira.

ما تم تنفيذه:

• لوحة تحكم Dashboard تعرض إحصائيات سير العمل في الوقت الفعلي مع تحديث تلقائي كل 10 ثوانٍ

• صندوق موافقات Approval Inbox لمراجعة الإجراءات المُقترحة من الـ AI والموافقة أو الرفض بنقرة واحدة

• مُنشئ سير عمل Workflow Builder بمحرر DAG مرئي لتصميم تدفقات الأتمتة

• إعدادات AI Settings للتبديل بين وضع Mock (مجاني، بدون API) ووضع Claude الحقيقي

• محرك تنفيذ Orchestration Engine ينفذ سير العمل متعدد الخطوات عبر طابور BullMQ

• نظام Human-in-the-Loop يُوقف التنفيذ عند الخطوات الحساسة ويستأنف عند قرار الإنسان

• تقليل حجم البندل من 420KB إلى 178KB (-58%) عبر استبدال recharts بـ chart.js وتقسيم الكود حسب المسارات

• تقليل إعادة الرسم في Dashboard من 47 إلى 3 مرات لكل دورة polling عبر memoization

• نظام retry مع exponential backoff (2s, 4s, 8s) للطلبات التي تفشل بسبب أخطاء 5xx

• اختبارات شاملة: unit (Vitest + RTL ≥80%), integration (Vitest + MSW), E2E (Playwright), accessibility (axe-core + Lighthouse)

الأدوات والتقنيات:

الواجهة الأمامية: React 18.3, TypeScript 5.6, Vite 5.4, Tailwind CSS 3.4, FontAwesome 7, Axios 1.7

إدارة الحالة: TanStack Query 5.56 (server state), Zustand 4.5 (client state)

الاختبارات: Vitest 2.1, React Testing Library, Playwright 1.45, MSW

الخلفية: Node.js 20, Express 4.21, MongoDB 6 (Mongoose 8.6), Redis 7 (BullMQ 5.12)

الذكاء الاصطناعي: Anthropic SDK 0.30 (Claude 3.5 Sonnet), وضع Mock احتياطي

الأدوات: Zod 4.4 (validation), Winston 3.14 (logging), Docker, Docker Compose

التحديات التي واجهتها:

• تقليل حجم البندل من 420KB إلى أقل من 200KB — استبدلت recharts (89KB) بـ chart.js (23KB)، وأضفت تقسيم كود حسب المسارات (-120KB)، وmemoize لـ StatusBadge (-44 re-render)

• اختيار Polling مقابل WebSockets — بعد تحليل: تكرار الموافقات ~5/ساعة/مستخدم، WebSockets تضيف تعقيد بنية (sticky sessions, Redis adapter) غير مُبرر حالياً. الحل: polling كل 10 ثوانٍ مع فحص CI: الانتقال لـ SSE إذا تجاوز 30/دقيقة

• هجرة من Redux إلى Zustand + TanStack Query — اكتشفت أن 73% من حالة Redux هي بيانات server-fetched. التحول قلل الكود بنسبة 73% وخفض re-renders من 47 إلى 3

• تصميم معمارية نظيفة للخلفية — فصل Concerns إلى 7 طبقات (api, services, core, models, queues, workers, config) مع Zod validation لكل متغير بيئة

• ضمان استقرار طابور BullMQ عند فشل worker — أُضيفت retries, delays, وdead-letter queue للمهام الفاشلة

النتائج:

• LCP 1.4s (الهدف <2.5s) — مُقاس بـ Lighthouse CI

• INP 95ms (الهدف <200ms) — مُقاس بـ Chrome DevTools

• CLS 0.02 (الهدف <0.1) — مُقاس بـ Lighthouse CI

• حجم البندل النهائي 178KB (الهدف <200KB) — CI يفشل البناء إذا تجاوز

• وقت تشغيل الاختبارات 2.1s (الهدف <30s)

• وقت استجابة API (p95) 340ms (الهدف <500ms)

• نسبة نجاح مهام الطابور 99.95% (الهدف >99%)

• المنصة منشورة على Vercel (frontend) وجاهزة للإنتاج