Edit task

## Task
تحديث البطاقات بالنتائج الحقيقية

برمجة الواجهة لاستقبال البيانات المرجعة من n8n وتحديث بطاقات المواقع الثلاثة بالحالة (يعمل/متوقف)، HTTP Status، ووقت آخر فحص دون استخدام أي بيانات وهمية.

Current phase: عرض النتائج والتحقق

Project context: مراقب حالة المواقع — تطبيق ويب عربي بسيط وحديث باسم "مراقب حالة المواقع"

## Project requirements (authoritative)
The full project description below is the authoritative requirement source. Concrete values it specifies (site URLs, names, labels, texts) are part of the deliverable — never substitute placeholder or example values (e.g. example.com) for them.
أنشئ تطبيق ويب عربي بسيط وحديث باسم "مراقب حالة المواقع".

الهدف من المشروع هو مراقبة حالة ثلاثة مواقع:

1. Project OS
   https://projectos.smvapp.cloud

2. n8n
   https://n8n.smvapp.cloud

3. Student Tutor
   https://student.smvapp.cloud

الواجهة باللغة العربية وباتجاه RTL.

تحتوي الصفحة على عنوان:
"مراقب حالة المواقع"

ووصف قصير:
"تحقق من حالة خدماتك ومواقعك من مكان واحد."

اعرض المواقع الثلاثة في بطاقات واضحة وجميلة.

كل بطاقة تعرض:
- اسم الموقع
- حالة الموقع: يعمل / متوقف / لم يتم الفحص بعد
- HTTP Status عند توفره
- وقت آخر فحص

أضف زرًا رئيسيًا واضحًا:
"فحص المواقع الآن"

المطلوب أن يكون فحص المواقع Automation حقيقية عبر n8n، وليس محاكاة داخل JavaScript.

عند طلب الفحص:
Project OS يشغّل Automation في n8n.
n8n يقوم بإجراء HTTP Request حقيقي للمواقع الثلاثة.
ثم يعيد نتائج الفحص إلى Project OS عبر نظام Automation/Callback الموجود.

بعد اكتمال Automation يجب أن يتمكن Project OS من إظهار نتيجة التشغيل وحالة نجاحه أو فشله.

لا تستخدم بيانات وهمية لإثبات نجاح الفحص.
لا تعتبر المشروع ناجحًا إذا كانت الواجهة فقط تعمل بدون تنفيذ n8n الحقيقي.

التصميم:
- حديث وبسيط
- متجاوب مع الهاتف والحاسوب
- بطاقات مرتبة
- ألوان واضحة لحالات النجاح والفشل
- RTL كامل
- لا تضف صفحات أو خصائص غير ضرورية

هذا مشروع اختبار صغير، لذلك حافظ على الخطة قصيرة ومتناسبة مع حجمه.
الهدف الأساسي هو إثبات الاستخدام الحقيقي لتكامل Project OS مع n8n داخل مشروع فعلي.

## Deliverable quality baseline (applies to user-facing output)
If this task produces or changes anything the user sees in a browser, the result must look deliberately crafted — never scaffold-like or raw default markup:
- Clear visual hierarchy: a real page structure with headings, grouping and whitespace — not a bare dump of unstyled elements.
- Deliberate typography and spacing: readable font sizes and line-height, consistent padding/margins; interactive controls (buttons, inputs, links) must be visibly styled, never browser-default only.
- A coherent, restrained color palette (background, text, accent) with accessible contrast.
- Responsive layout: the page must stay usable on a narrow (mobile) viewport.
- Interactions must genuinely work: every control the description asks for performs the requested behavior, and purely local behavior (e.g. a confirmation/status message on click) is implemented client-side — no external service is needed for simple local feedback.
- Accessibility basics: semantic HTML, labels for inputs, alt text for images.
- Arabic/RTL correctness: the document must set lang="ar" and dir="rtl", declare UTF-8 charset, and use natural Arabic wording and typography (no machine-stiff phrasing, no reversed or Latin-mixed layout artifacts).
This is a minimum quality floor, not a template: keep full creative freedom in design, layout and copy.

## Native automation (use this instead of building your own backend)
Native automation available for this project (Project OS platform capability).
A managed backend automation of kind 'site.check' is already provisioned for this project.
Use it from the browser via these SAME-ORIGIN endpoints (fetch, JSON):
- POST /api/app/automations/<automationId>/run  body: {"sites":[{"url":"https://…","label":"…"}]}
  → 200 {runId} | 400 {error} | 404 {error} | 429 {error}. Sites: 1..20, https public hostnames only.
- GET /api/app/automations/runs/<runId>  → {status, error?, result?}
  status: PENDING | RUNNING | SUCCEEDED | FAILED; result = {kind:'site.check', summary, results:[{url,label?,ok,statusCode?,latencyMs?,error?}]}.
Poll the run endpoint every ~2s while status is PENDING/RUNNING (timeout ~120s), then render per-site results.
STRICT RULES:
- Check EXACTLY the target sites the project's requirements define. Never substitute invented placeholder or example domains (e.g. example.com) for the project's real targets.
- NEVER render or build fields for webhook URLs, callback URLs, tokens, credentials, run ids of the platform, or any n8n concept. The end user must never see infrastructure.
- NEVER POST to any other host from the app; the automation is invoked exclusively through the run endpoint above.
- While a run is RUNNING show a friendly 'checking…' state; on FAILED show the run's error string and per-site results if present. Never fake results.
- The <automationId> above is a stable id for this project's automation; store it as a constant, not as user input.

Acceptance criteria:
- Implement the task: تحديث البطاقات بالنتائج الحقيقية
- Cover the task description above.
- Keep the change scoped to what this task needs.
- Do not introduce secrets or credentials in code.
- Leave the repository in a consistent state (no stray debug output).
- User-facing output must satisfy the deliverable quality baseline above (deliberate styling, responsive layout, working interactions).
- The deliverable must be a correct Arabic RTL document (lang="ar", dir="rtl", UTF-8) with polished Arabic content.