From 9cfffa4c66593ba32ed8726684067badde2a4324 Mon Sep 17 00:00:00 2001
From: Ahmed <ahmedalkhair.sa@gmail.com>
Date: Sat, 3 Oct 2026 02:37:44 +0300
Subject: [PATCH] Build searchable article library

---
 arabic-ai-learning-catalog-v2.html |  15 +-
 articles-v2.html                   | 233 +++++++++++++++++++++++++++++
 articles.html                      | 133 ++++++++++++----
 assets/anwarpi.js                  |   4 +-
 4 files changed, 348 insertions(+), 37 deletions(-)
 create mode 100644 articles-v2.html

diff --git a/arabic-ai-learning-catalog-v2.html b/arabic-ai-learning-catalog-v2.html
index 33b9cca..85fb63a 100644
--- a/arabic-ai-learning-catalog-v2.html
+++ b/arabic-ai-learning-catalog-v2.html
@@ -218,6 +218,7 @@
         <a href="articles.html" data-od-id="path-0-0-1-0">المكتبة</a>
         <a href="#topics">المسارات</a>
         <a href="#membership">العضوية</a>
+        <a href="about.html" data-od-id="nav-about-team">عن الفريق</a>
       </nav>
       <button class="nav-action" data-open-membership>تسجيل الدخول</button>
     </div>
@@ -240,19 +241,19 @@
         <div class="deck" data-od-id="featured-deck" aria-label="مختارات مميزة">
           <div class="deck-frame" aria-live="polite">
             <article class="deck-slide active" data-slide="0">
-              <a class="deck-slide-link" href="articles.html" aria-label="افتح قسم مقالات الوكلاء في المكتبة"></a>
+              <a class="deck-slide-link" href="articles.html?topic=agents" aria-label="افتح قسم مقالات الوكلاء في المكتبة"></a>
               <div class="deck-slide-top"><span class="deck-slide-kicker">دليل حصري · المستوى المتوسط</span><span class="deck-slide-index num">01</span></div>
               <div class="deck-slide-body"><h2>ابنِ وكيلك الأول دون فوضى</h2><p>خريطة عملية لتقسيم المهام، اختيار الأدوات، وضبط ذاكرة الوكيل قبل كتابة الكود.</p></div>
               <div class="deck-slide-foot"><span class="deck-slide-format"><span class="play" aria-hidden="true">▶</span>فيديو · 28 دقيقة</span><span class="meta"><bdi dir="ltr">AGENTIC AI</bdi></span></div>
             </article>
             <article class="deck-slide" data-slide="1">
-              <a class="deck-slide-link" href="articles.html" aria-label="افتح قسم مقالات النماذج في المكتبة"></a>
+              <a class="deck-slide-link" href="articles.html?topic=models" aria-label="افتح قسم مقالات النماذج في المكتبة"></a>
               <div class="deck-slide-top"><span class="deck-slide-kicker">مقال تطبيقي · للمبتدئين</span><span class="deck-slide-index num">02</span></div>
               <div class="deck-slide-body"><h2>كيف تختار نموذجاً لمهمتك؟</h2><p>مقارنة منهجية حسب الجودة، التكلفة، السرعة، والخصوصية — من دون ضجيج تسويقي.</p></div>
               <div class="deck-slide-foot"><span class="deck-slide-format">قراءة · 12 دقيقة</span><span class="meta">النماذج</span></div>
             </article>
             <article class="deck-slide" data-slide="2">
-              <a class="deck-slide-link" href="articles.html" aria-label="افتح قسم مقالات RAG في المكتبة"></a>
+              <a class="deck-slide-link" href="articles.html?topic=models" aria-label="افتح قسم مقالات RAG في المكتبة"></a>
               <div class="deck-slide-top"><span class="deck-slide-kicker">مسار متقدم · للأعضاء</span><span class="deck-slide-index num">03</span></div>
               <div class="deck-slide-body"><h2>من <bdi dir="ltr">RAG</bdi> إلى إجابة موثوقة</h2><p>صمّم الاسترجاع، اختبر المصادر، وافهم أين تنهار الإجابة قبل أن تصل إلى المستخدم.</p></div>
               <div class="deck-slide-foot"><span class="deck-slide-format"><span class="play" aria-hidden="true">▶</span>سلسلة · 4 أجزاء</span><span class="meta"><bdi dir="ltr">RAG</bdi></span></div>
@@ -280,10 +281,10 @@
           <p class="lead">تصفح المحتوى حسب ما تريد بناءه، لا حسب المصطلحات التي تحفظها.</p>
         </div>
         <div class="topic-grid">
-          <a class="topic" href="#catalog" data-topic-link="agents" data-od-id="topic-agents"><strong>الوكلاء</strong><span>تخطيط · أدوات · ذاكرة</span></a>
-          <a class="topic" href="#catalog" data-topic-link="models" data-od-id="topic-models"><strong>النماذج</strong><span>اختيار · تقييم · تشغيل</span></a>
-          <a class="topic" href="#catalog" data-topic-link="automation" data-od-id="topic-automation"><strong>الأتمتة</strong><span>سير عمل · ربط · مراقبة</span></a>
-          <a class="topic" href="#catalog" data-topic-link="foundations" data-od-id="topic-foundations"><strong>الأساسيات</strong><span>مفاهيم · تطبيق · أمان</span></a>
+          <a class="topic" href="articles.html?topic=agents" data-od-id="topic-agents"><strong>الوكلاء</strong><span>تخطيط · أدوات · ذاكرة</span></a>
+          <a class="topic" href="articles.html?topic=models" data-od-id="topic-models"><strong>النماذج</strong><span>اختيار · تقييم · تشغيل</span></a>
+          <a class="topic" href="articles.html?topic=automation" data-od-id="topic-automation"><strong>الأتمتة</strong><span>سير عمل · ربط · مراقبة</span></a>
+          <a class="topic" href="articles.html?topic=foundations" data-od-id="topic-foundations"><strong>الأساسيات</strong><span>مفاهيم · تطبيق · أمان</span></a>
         </div>
       </div>
     </section>
diff --git a/articles-v2.html b/articles-v2.html
new file mode 100644
index 0000000..a03bcb5
--- /dev/null
+++ b/articles-v2.html
@@ -0,0 +1,233 @@
+<!doctype html>
+<html lang="ar" dir="rtl">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="referrer" content="strict-origin-when-cross-origin" />
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-src 'none'; worker-src 'none'" />
+  <meta name="description" content="جميع مقالات وأدلة أنور بي آي، مع تصفية حسب الفئة ونوع الوصول." />
+  <title>المكتبة — أنور بي آي</title>
+  <style>
+    :root {
+      --bg: oklch(16% 0.03 225);
+      --surface: oklch(22% 0.04 220);
+      --fg: oklch(96% 0.015 210);
+      --muted: oklch(74% 0.03 215);
+      --border: oklch(36% 0.05 215);
+      --accent: oklch(78% 0.17 190);
+      --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
+      --fg-soft: color-mix(in oklch, var(--fg) 6%, transparent);
+      --font-display: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --font-body: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+      --container: 1180px;
+      --gutter: 32px;
+    }
+    *, *::before, *::after { box-sizing: border-box; }
+    html { -webkit-text-size-adjust: 100%; }
+    body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.7 var(--font-body); text-rendering: optimizeLegibility; }
+    a { color: inherit; text-decoration: none; }
+    button { color: inherit; font: inherit; cursor: pointer; }
+    h1, h2, h3 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
+    p { text-wrap: pretty; }
+    :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
+    .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
+    .topnav { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--bg) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
+    .topnav-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
+    .logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 23px; font-weight: 700; }
+    .logo-mark { width: 30px; height: 34px; object-fit: contain; border-radius: 4px; }
+    .topnav nav { display: flex; align-items: center; gap: 28px; }
+    .topnav nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); border-bottom: 1px solid transparent; }
+    .topnav nav a:hover, .topnav nav a[aria-current="page"] { color: var(--fg); border-color: var(--accent); }
+    .nav-action { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 16px; border: 1px solid var(--border); }
+    .nav-action:hover { border-color: var(--fg); background: var(--fg-soft); }
+    .hero { padding-block: clamp(64px, 9vw, 112px); border-bottom: 1px solid var(--border); }
+    .eyebrow { margin: 0 0 18px; color: var(--accent); font: 11px/1.5 var(--font-mono); letter-spacing: .06em; }
+    h1 { max-width: 10ch; font-size: clamp(48px, 7vw, 88px); line-height: 1.06; letter-spacing: -.025em; }
+    .lead { max-width: 56ch; margin: 24px 0 0; color: var(--muted); font-size: clamp(18px, 2vw, 22px); }
+    .library { padding-block: clamp(52px, 8vw, 88px); }
+    .filter-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 44px; padding-block: 22px; border-block: 1px solid var(--border); }
+    .filter-group { min-width: 0; }
+    .filter-label { display: block; margin-bottom: 10px; color: var(--muted); font: 11px/1.5 var(--font-mono); }
+    .filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
+    .filters::-webkit-scrollbar { display: none; }
+    .filter { flex: none; min-height: 44px; padding: 9px 15px; border: 1px solid var(--border); background: transparent; color: var(--muted); }
+    .filter:hover { color: var(--fg); border-color: var(--fg); }
+    .filter[aria-pressed="true"] { background: var(--fg); color: var(--surface); border-color: var(--fg); }
+    .results-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
+    h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.15; }
+    .count { color: var(--muted); font: 12px/1.5 var(--font-mono); }
+    .posts { border-top: 1px solid var(--fg); }
+    .post { display: grid; grid-template-columns: 138px minmax(0, 1fr) 130px; gap: 28px; align-items: start; padding-block: 28px; border-bottom: 1px solid var(--border); }
+    .post[hidden] { display: none; }
+    .post-meta { color: var(--muted); font: 12px/1.8 var(--font-mono); }
+    .post-meta span { display: block; }
+    .post h3 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.3; }
+    .post p { max-width: 62ch; margin: 9px 0 0; color: var(--muted); }
+    .access { justify-self: end; display: inline-flex; align-items: center; min-height: 34px; padding: 5px 11px; border: 1px solid var(--border); color: var(--muted); font: 11px/1.5 var(--font-mono); }
+    .access.free { border-color: var(--accent); color: var(--accent); }
+    .post-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; font-weight: 700; border-bottom: 1px solid transparent; }
+    .post-link:hover { color: var(--accent); border-color: var(--accent); }
+    .soon { color: var(--muted); cursor: default; }
+    .empty { display: none; padding: 42px 0; color: var(--muted); }
+    .empty.show { display: block; }
+    .pagefoot { padding-block: 48px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
+    .footer-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
+    @media (max-width: 920px) {
+      :root { --gutter: 22px; }
+      .topnav-inner { flex-wrap: wrap; gap: 0 16px; padding-top: 10px; }
+      .logo, .nav-action { margin-bottom: 10px; }
+      .topnav nav { order: 3; flex: 0 0 calc(100% + (var(--gutter) * 2)); gap: 6px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; border-top: 1px solid var(--border); scrollbar-width: none; }
+      .topnav nav::-webkit-scrollbar { display: none; }
+      .topnav nav a { flex: none; min-height: 52px; padding-inline: 12px; white-space: nowrap; }
+      .filter-panel { grid-template-columns: 1fr; gap: 20px; }
+      .post { grid-template-columns: 112px minmax(0, 1fr); }
+      .access { justify-self: start; grid-column: 2; }
+    }
+    @media (max-width: 620px) {
+      :root { --gutter: 18px; }
+      .nav-action { padding-inline: 12px; }
+      h1 { font-size: clamp(42px, 13vw, 58px); }
+      .results-head { align-items: start; flex-direction: column; }
+      .post { grid-template-columns: 1fr; gap: 12px; }
+      .access { grid-column: 1; }
+      .post-link { width: 100%; border-top: 1px solid var(--border); padding-top: 12px; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
+    }
+  </style>
+  <link rel="stylesheet" href="assets/anwarpi.css?v=5" />
+  <script src="assets/anwarpi.js?v=4" defer></script>
+</head>
+<body>
+  <header class="topnav" data-od-id="topnav">
+    <div class="container topnav-inner">
+      <a class="logo" href="arabic-ai-learning-catalog-v2.html" data-od-id="brand"><img class="logo-mark" src="assets/anwarpi-logo.jpg" alt="" width="1200" height="1352" />أنور بي آي</a>
+      <nav aria-label="التنقل الرئيسي">
+        <a href="articles.html" aria-current="page" data-od-id="nav-library">المكتبة</a>
+        <a href="arabic-ai-learning-catalog-v2.html#topics">المسارات</a>
+        <a href="subscription.html">العضوية</a>
+      </nav>
+      <a class="nav-action" href="login.html">تسجيل الدخول</a>
+    </div>
+  </header>
+
+  <main id="content">
+    <section class="hero" data-od-id="library-hero">
+      <div class="container">
+        <p class="eyebrow">مكتبة أنور بي آي</p>
+        <h1 data-od-id="library-title">كل الأدلة في مكان واحد.</h1>
+        <p class="lead">صفِّ المحتوى حسب الفئة ونوع الوصول، ثم افتح المقال المجاني أو معاينة محتوى العضوية.</p>
+      </div>
+    </section>
+
+    <section class="library" data-od-id="article-library">
+      <div class="container">
+        <div class="filter-panel" data-od-id="library-filters">
+          <div class="filter-group" role="group" aria-label="تصفية حسب الفئة">
+            <span class="filter-label">الفئة</span>
+            <div class="filters">
+              <button class="filter" type="button" data-filter-kind="topic" data-filter-value="all" aria-pressed="true">الكل</button>
+              <button class="filter" type="button" data-filter-kind="topic" data-filter-value="agents" aria-pressed="false">الوكلاء</button>
+              <button class="filter" type="button" data-filter-kind="topic" data-filter-value="models" aria-pressed="false">النماذج</button>
+              <button class="filter" type="button" data-filter-kind="topic" data-filter-value="automation" aria-pressed="false">الأتمتة</button>
+              <button class="filter" type="button" data-filter-kind="topic" data-filter-value="foundations" aria-pressed="false">الأساسيات</button>
+            </div>
+          </div>
+          <div class="filter-group" role="group" aria-label="تصفية حسب نوع الوصول">
+            <span class="filter-label">نوع الوصول</span>
+            <div class="filters">
+              <button class="filter" type="button" data-filter-kind="access" data-filter-value="all" aria-pressed="true">الكل</button>
+              <button class="filter" type="button" data-filter-kind="access" data-filter-value="free" aria-pressed="false">مجاني</button>
+              <button class="filter" type="button" data-filter-kind="access" data-filter-value="vip" aria-pressed="false">VIP</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="results-head">
+          <h2 data-od-id="posts-heading">جميع المواد</h2>
+          <span class="count" id="resultCount" aria-live="polite">٦ مواد</span>
+        </div>
+
+        <div class="posts" id="postList">
+          <article class="post" data-topic="agents" data-access="vip" data-od-id="post-agent-loop">
+            <div class="post-meta"><span>الوكلاء</span><span>١٨ دقيقة</span></div>
+            <div><h3>البنية التي تمنع وكيلك من الدوران في حلقة</h3><p>حدود واضحة بين التخطيط والتنفيذ والتحقق، مع نموذج بسيط لسجل الحالة.</p><a class="post-link" href="post-locked.html">شاهد المعاينة ←</a></div>
+            <span class="access">VIP · معاينة</span>
+          </article>
+
+          <article class="post" data-topic="models" data-access="free" data-od-id="post-model-selection">
+            <div class="post-meta"><span>النماذج</span><span>١٢ دقيقة</span></div>
+            <div><h3>لا تبدأ باسم النموذج؛ ابدأ بطبيعة المهمة</h3><p>مصفوفة قرار عملية توازن بين الدقة، السياق، السرعة، والكلفة.</p><a class="post-link" href="article-agent-guide.html">ابدأ القراءة ←</a></div>
+            <span class="access free">مجاني · كامل</span>
+          </article>
+
+          <article class="post" data-topic="automation" data-access="vip" data-od-id="post-automation-observability">
+            <div class="post-meta"><span>الأتمتة</span><span>٢٤ دقيقة</span></div>
+            <div><h3>كيف تكتشف فشل سير العمل قبل المستخدم؟</h3><p>إشارات قليلة تكفي لمراقبة التكلفة، التأخير، ونقاط الانقطاع.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
+            <span class="access">VIP</span>
+          </article>
+
+          <article class="post" data-topic="foundations" data-access="free" data-od-id="post-prompt-context">
+            <div class="post-meta"><span>الأساسيات</span><span>٩ دقائق</span></div>
+            <div><h3>لماذا لا يصلح تحسين الصياغة بياناتك الرديئة؟</h3><p>افصل بين التعليمات، المعرفة، وذاكرة المحادثة لتحصل على نتيجة مستقرة.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
+            <span class="access free">مجاني</span>
+          </article>
+
+          <article class="post" data-topic="agents" data-access="vip" data-od-id="post-tool-safety">
+            <div class="post-meta"><span>الوكلاء</span><span>١٥ دقيقة</span></div>
+            <div><h3>قبل أن تمنح الوكيل صلاحية التنفيذ</h3><p>حدود الصلاحيات، التأكيد البشري، وسجل تدقيق يمكنك الرجوع إليه.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
+            <span class="access">VIP</span>
+          </article>
+
+          <article class="post" data-topic="models" data-access="vip" data-od-id="post-rag-evaluation">
+            <div class="post-meta"><span>النماذج</span><span>٤ أجزاء</span></div>
+            <div><h3>اختبر الاسترجاع والإجابة كلّاً على حدة</h3><p>منهج تقييم يفصل فشل المصدر عن فشل النموذج ويقودك إلى إصلاح صحيح.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
+            <span class="access">VIP</span>
+          </article>
+        </div>
+        <p class="empty" id="emptyState">لا توجد مواد تطابق هذين الفلترين.</p>
+      </div>
+    </section>
+  </main>
+
+  <footer class="pagefoot" data-od-id="footer">
+    <div class="container footer-row"><span>© أنور بي آي ٢٠٢٦ · تعلّم بوضوح</span><a href="privacy.html">الخصوصية</a></div>
+  </footer>
+
+  <script>
+    (() => {
+      const state = { topic: 'all', access: 'all' };
+      const buttons = [...document.querySelectorAll('[data-filter-kind]')];
+      const posts = [...document.querySelectorAll('.post')];
+      const count = document.getElementById('resultCount');
+      const empty = document.getElementById('emptyState');
+      const arabicCounts = ['٠', '١', '٢', '٣', '٤', '٥', '٦'];
+
+      function applyFilters() {
+        let visible = 0;
+        posts.forEach(post => {
+          const topicMatch = state.topic === 'all' || post.dataset.topic === state.topic;
+          const accessMatch = state.access === 'all' || post.dataset.access === state.access;
+          post.hidden = !(topicMatch && accessMatch);
+          if (!post.hidden) visible += 1;
+        });
+        count.textContent = `${arabicCounts[visible]} ${visible === 1 ? 'مادة' : 'مواد'}`;
+        empty.classList.toggle('show', visible === 0);
+      }
+
+      buttons.forEach(button => button.addEventListener('click', () => {
+        const kind = button.dataset.filterKind;
+        state[kind] = button.dataset.filterValue;
+        buttons.filter(item => item.dataset.filterKind === kind).forEach(item => {
+          item.setAttribute('aria-pressed', String(item === button));
+        });
+        applyFilters();
+      }));
+
+      applyFilters();
+    })();
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/articles.html b/articles.html
index d514b42..a9dd7a1 100644
--- a/articles.html
+++ b/articles.html
@@ -41,11 +41,23 @@
     .topnav nav a:hover, .topnav nav a[aria-current="page"] { color: var(--fg); border-color: var(--accent); }
     .nav-action { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 16px; border: 1px solid var(--border); }
     .nav-action:hover { border-color: var(--fg); background: var(--fg-soft); }
-    .hero { padding-block: clamp(64px, 9vw, 112px); border-bottom: 1px solid var(--border); }
+    .hero { padding-block: clamp(56px, 8vw, 96px); border-bottom: 1px solid var(--border); }
+    .hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: clamp(36px, 7vw, 88px); align-items: end; }
     .eyebrow { margin: 0 0 18px; color: var(--accent); font: 11px/1.5 var(--font-mono); letter-spacing: .06em; }
     h1 { max-width: 10ch; font-size: clamp(48px, 7vw, 88px); line-height: 1.06; letter-spacing: -.025em; }
     .lead { max-width: 56ch; margin: 24px 0 0; color: var(--muted); font-size: clamp(18px, 2vw, 22px); }
+    .weekly { display: block; padding: clamp(24px, 4vw, 40px); background: var(--surface); border: 1px solid var(--border); border-top-color: var(--accent); }
+    .weekly:hover { border-color: var(--fg); background: color-mix(in oklch, var(--surface) 88%, var(--fg)); }
+    .weekly-meta { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font: 11px/1.5 var(--font-mono); }
+    .weekly h2 { margin-top: 42px; font-size: clamp(28px, 4vw, 44px); line-height: 1.18; }
+    .weekly p { margin: 14px 0 30px; color: var(--muted); }
+    .weekly-link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; border-bottom: 1px solid var(--fg); }
     .library { padding-block: clamp(52px, 8vw, 88px); }
+    .library-tools { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; margin-bottom: 22px; }
+    .control { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); font: inherit; }
+    .control::placeholder { color: var(--muted); }
+    .control:hover { border-color: var(--fg); }
+    .control:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
     .filter-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 44px; padding-block: 22px; border-block: 1px solid var(--border); }
     .filter-group { min-width: 0; }
     .filter-label { display: block; margin-bottom: 10px; color: var(--muted); font: 11px/1.5 var(--font-mono); }
@@ -58,14 +70,18 @@
     h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.15; }
     .count { color: var(--muted); font: 12px/1.5 var(--font-mono); }
     .posts { border-top: 1px solid var(--fg); }
-    .post { display: grid; grid-template-columns: 138px minmax(0, 1fr) 130px; gap: 28px; align-items: start; padding-block: 28px; border-bottom: 1px solid var(--border); }
+    .post { display: grid; grid-template-columns: 138px minmax(0, 1fr) 168px; gap: 28px; align-items: start; padding-block: 28px; border-bottom: 1px solid var(--border); }
     .post[hidden] { display: none; }
     .post-meta { color: var(--muted); font: 12px/1.8 var(--font-mono); }
     .post-meta span { display: block; }
     .post h3 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.3; }
     .post p { max-width: 62ch; margin: 9px 0 0; color: var(--muted); }
+    .post-side { justify-self: stretch; display: grid; gap: 12px; }
     .access { justify-self: end; display: inline-flex; align-items: center; min-height: 34px; padding: 5px 11px; border: 1px solid var(--border); color: var(--muted); font: 11px/1.5 var(--font-mono); }
-    .access.free { border-color: var(--accent); color: var(--accent); }
+    .access.free { border-color: var(--fg); color: var(--fg); }
+    .engagement { display: flex; justify-content: flex-end; gap: 12px; color: var(--muted); font: 11px/1.5 var(--font-mono); }
+    .like { min-height: 44px; padding: 0 10px; border: 1px solid transparent; background: transparent; color: var(--muted); }
+    .like:hover, .like[aria-pressed="true"] { color: var(--fg); border-color: var(--border); }
     .post-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; font-weight: 700; border-bottom: 1px solid transparent; }
     .post-link:hover { color: var(--accent); border-color: var(--accent); }
     .soon { color: var(--muted); cursor: default; }
@@ -80,17 +96,21 @@
       .topnav nav { order: 3; flex: 0 0 calc(100% + (var(--gutter) * 2)); gap: 6px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; border-top: 1px solid var(--border); scrollbar-width: none; }
       .topnav nav::-webkit-scrollbar { display: none; }
       .topnav nav a { flex: none; min-height: 52px; padding-inline: 12px; white-space: nowrap; }
-      .filter-panel { grid-template-columns: 1fr; gap: 20px; }
+      .hero-grid, .filter-panel { grid-template-columns: 1fr; gap: 20px; }
+      .weekly { margin-top: 8px; }
       .post { grid-template-columns: 112px minmax(0, 1fr); }
-      .access { justify-self: start; grid-column: 2; }
+      .post-side { justify-self: start; grid-column: 2; }
+      .access { justify-self: start; }
+      .engagement { justify-content: flex-start; }
     }
     @media (max-width: 620px) {
       :root { --gutter: 18px; }
       .nav-action { padding-inline: 12px; }
       h1 { font-size: clamp(42px, 13vw, 58px); }
+      .library-tools { grid-template-columns: 1fr; }
       .results-head { align-items: start; flex-direction: column; }
       .post { grid-template-columns: 1fr; gap: 12px; }
-      .access { grid-column: 1; }
+      .post-side { grid-column: 1; }
       .post-link { width: 100%; border-top: 1px solid var(--border); padding-top: 12px; }
     }
     @media (prefers-reduced-motion: reduce) {
@@ -108,6 +128,7 @@
         <a href="articles.html" aria-current="page" data-od-id="nav-library">المكتبة</a>
         <a href="arabic-ai-learning-catalog-v2.html#topics">المسارات</a>
         <a href="subscription.html">العضوية</a>
+        <a href="about.html">عن الفريق</a>
       </nav>
       <a class="nav-action" href="login.html">تسجيل الدخول</a>
     </div>
@@ -115,18 +136,30 @@
 
   <main id="content">
     <section class="hero" data-od-id="library-hero">
-      <div class="container">
-        <p class="eyebrow">مكتبة أنور بي آي</p>
-        <h1 data-od-id="library-title">كل الأدلة في مكان واحد.</h1>
-        <p class="lead">صفِّ المحتوى حسب الفئة ونوع الوصول، ثم افتح المقال المجاني أو معاينة محتوى العضوية.</p>
+      <div class="container hero-grid">
+        <div>
+          <p class="eyebrow">مكتبة أنور بي آي</p>
+          <h1 data-od-id="library-title">كل المقالات. بلا ضياع.</h1>
+          <p class="lead">ابحث، اختر مسارك، ورتّب النتائج حسب الأحدث أو التفاعل المسجل على جهازك.</p>
+        </div>
+        <a class="weekly" href="article-agent-guide.html" data-od-id="weekly-post">
+          <div class="weekly-meta"><span>مقال هذا الأسبوع</span><span>مجاني · ١٢ دقيقة</span></div>
+          <h2>لا تبدأ باسم النموذج؛ ابدأ بطبيعة المهمة</h2>
+          <p>مصفوفة قرار عملية توازن بين الدقة، السياق، السرعة، والكلفة.</p>
+          <span class="weekly-link">اقرأ المقال ←</span>
+        </a>
       </div>
     </section>
 
     <section class="library" data-od-id="article-library">
       <div class="container">
+        <div class="library-tools" data-od-id="library-search-sort">
+          <label><span class="filter-label">ابحث في العناوين والوصف</span><input class="control" id="postSearch" type="search" autocomplete="off" placeholder="مثال: الوكلاء، RAG، اختيار النموذج" /></label>
+          <label><span class="filter-label">الترتيب</span><select class="control" id="postSort"><option value="latest">الأحدث أولاً</option><option value="views">الأكثر مشاهدة على هذا الجهاز</option><option value="likes">الأكثر إعجاباً على هذا الجهاز</option></select></label>
+        </div>
         <div class="filter-panel" data-od-id="library-filters">
-          <div class="filter-group" role="group" aria-label="تصفية حسب الفئة">
-            <span class="filter-label">الفئة</span>
+          <div class="filter-group" role="group" aria-label="تصفية حسب المسار">
+            <span class="filter-label">المسار / الفئة</span>
             <div class="filters">
               <button class="filter" type="button" data-filter-kind="topic" data-filter-value="all" aria-pressed="true">الكل</button>
               <button class="filter" type="button" data-filter-kind="topic" data-filter-value="agents" aria-pressed="false">الوكلاء</button>
@@ -151,43 +184,43 @@
         </div>
 
         <div class="posts" id="postList">
-          <article class="post" data-topic="agents" data-access="vip" data-od-id="post-agent-loop">
+          <article class="post" data-topic="agents" data-access="vip" data-order="6" data-id="agent-loop" data-od-id="post-agent-loop">
             <div class="post-meta"><span>الوكلاء</span><span>١٨ دقيقة</span></div>
             <div><h3>البنية التي تمنع وكيلك من الدوران في حلقة</h3><p>حدود واضحة بين التخطيط والتنفيذ والتحقق، مع نموذج بسيط لسجل الحالة.</p><a class="post-link" href="post-locked.html">شاهد المعاينة ←</a></div>
-            <span class="access">VIP · معاينة</span>
+            <div class="post-side"><span class="access">VIP · معاينة</span><div class="engagement"><span data-views>٠ مشاهدة</span><button class="like" type="button" data-like aria-pressed="false">إعجاب · <span>٠</span></button></div></div>
           </article>
 
-          <article class="post" data-topic="models" data-access="free" data-od-id="post-model-selection">
+          <article class="post" data-topic="models" data-access="free" data-order="5" data-id="model-selection" data-od-id="post-model-selection">
             <div class="post-meta"><span>النماذج</span><span>١٢ دقيقة</span></div>
             <div><h3>لا تبدأ باسم النموذج؛ ابدأ بطبيعة المهمة</h3><p>مصفوفة قرار عملية توازن بين الدقة، السياق، السرعة، والكلفة.</p><a class="post-link" href="article-agent-guide.html">ابدأ القراءة ←</a></div>
-            <span class="access free">مجاني · كامل</span>
+            <div class="post-side"><span class="access free">مجاني · كامل</span><div class="engagement"><span data-views>٠ مشاهدة</span><button class="like" type="button" data-like aria-pressed="false">إعجاب · <span>٠</span></button></div></div>
           </article>
 
-          <article class="post" data-topic="automation" data-access="vip" data-od-id="post-automation-observability">
+          <article class="post" data-topic="automation" data-access="vip" data-order="4" data-id="automation-observability" data-od-id="post-automation-observability">
             <div class="post-meta"><span>الأتمتة</span><span>٢٤ دقيقة</span></div>
             <div><h3>كيف تكتشف فشل سير العمل قبل المستخدم؟</h3><p>إشارات قليلة تكفي لمراقبة التكلفة، التأخير، ونقاط الانقطاع.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
-            <span class="access">VIP</span>
+            <div class="post-side"><span class="access">VIP</span><div class="engagement"><span data-views>٠ مشاهدة</span><button class="like" type="button" data-like aria-pressed="false">إعجاب · <span>٠</span></button></div></div>
           </article>
 
-          <article class="post" data-topic="foundations" data-access="free" data-od-id="post-prompt-context">
+          <article class="post" data-topic="foundations" data-access="free" data-order="3" data-id="prompt-context" data-od-id="post-prompt-context">
             <div class="post-meta"><span>الأساسيات</span><span>٩ دقائق</span></div>
             <div><h3>لماذا لا يصلح تحسين الصياغة بياناتك الرديئة؟</h3><p>افصل بين التعليمات، المعرفة، وذاكرة المحادثة لتحصل على نتيجة مستقرة.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
-            <span class="access free">مجاني</span>
+            <div class="post-side"><span class="access free">مجاني</span><div class="engagement"><span data-views>٠ مشاهدة</span><button class="like" type="button" data-like aria-pressed="false">إعجاب · <span>٠</span></button></div></div>
           </article>
 
-          <article class="post" data-topic="agents" data-access="vip" data-od-id="post-tool-safety">
+          <article class="post" data-topic="agents" data-access="vip" data-order="2" data-id="tool-safety" data-od-id="post-tool-safety">
             <div class="post-meta"><span>الوكلاء</span><span>١٥ دقيقة</span></div>
             <div><h3>قبل أن تمنح الوكيل صلاحية التنفيذ</h3><p>حدود الصلاحيات، التأكيد البشري، وسجل تدقيق يمكنك الرجوع إليه.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
-            <span class="access">VIP</span>
+            <div class="post-side"><span class="access">VIP</span><div class="engagement"><span data-views>٠ مشاهدة</span><button class="like" type="button" data-like aria-pressed="false">إعجاب · <span>٠</span></button></div></div>
           </article>
 
-          <article class="post" data-topic="models" data-access="vip" data-od-id="post-rag-evaluation">
+          <article class="post" data-topic="models" data-access="vip" data-order="1" data-id="rag-evaluation" data-od-id="post-rag-evaluation">
             <div class="post-meta"><span>النماذج</span><span>٤ أجزاء</span></div>
             <div><h3>اختبر الاسترجاع والإجابة كلّاً على حدة</h3><p>منهج تقييم يفصل فشل المصدر عن فشل النموذج ويقودك إلى إصلاح صحيح.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
-            <span class="access">VIP</span>
+            <div class="post-side"><span class="access">VIP</span><div class="engagement"><span data-views>٠ مشاهدة</span><button class="like" type="button" data-like aria-pressed="false">إعجاب · <span>٠</span></button></div></div>
           </article>
         </div>
-        <p class="empty" id="emptyState">لا توجد مواد تطابق هذين الفلترين.</p>
+        <p class="empty" id="emptyState">لا توجد مواد تطابق البحث والفلاتر الحالية.</p>
       </div>
     </section>
   </main>
@@ -198,22 +231,48 @@
 
   <script>
     (() => {
-      const state = { topic: 'all', access: 'all' };
+      const params = new URLSearchParams(location.search);
+      const allowedTopics = ['all', 'agents', 'models', 'automation', 'foundations'];
+      const state = { topic: allowedTopics.includes(params.get('topic')) ? params.get('topic') : 'all', access: 'all', query: '', sort: 'latest' };
       const buttons = [...document.querySelectorAll('[data-filter-kind]')];
       const posts = [...document.querySelectorAll('.post')];
+      const list = document.getElementById('postList');
       const count = document.getElementById('resultCount');
       const empty = document.getElementById('emptyState');
-      const arabicCounts = ['٠', '١', '٢', '٣', '٤', '٥', '٦'];
+      const search = document.getElementById('postSearch');
+      const sort = document.getElementById('postSort');
+      const formatNumber = value => new Intl.NumberFormat('ar').format(value);
+      const readMetric = (post, metric) => Number(localStorage.getItem(`anwarpi:${metric}:${post.dataset.id}`) || 0);
+
+      function normalize(value) {
+        return value.toLocaleLowerCase('ar').normalize('NFKD').replace(/[\u064B-\u065F\u0670]/g, '').replace(/[إأآ]/g, 'ا').replace(/ى/g, 'ي');
+      }
+
+      function paintMetrics(post) {
+        const views = readMetric(post, 'views');
+        const liked = localStorage.getItem(`anwarpi:liked:${post.dataset.id}`) === '1';
+        post.querySelector('[data-views]').textContent = `${formatNumber(views)} مشاهدة`;
+        const like = post.querySelector('[data-like]');
+        like.setAttribute('aria-pressed', String(liked));
+        like.querySelector('span').textContent = formatNumber(liked ? 1 : 0);
+      }
 
       function applyFilters() {
+        const ordered = [...posts].sort((a, b) => {
+          if (state.sort === 'views') return readMetric(b, 'views') - readMetric(a, 'views') || Number(b.dataset.order) - Number(a.dataset.order);
+          if (state.sort === 'likes') return Number(localStorage.getItem(`anwarpi:liked:${b.dataset.id}`) === '1') - Number(localStorage.getItem(`anwarpi:liked:${a.dataset.id}`) === '1') || Number(b.dataset.order) - Number(a.dataset.order);
+          return Number(b.dataset.order) - Number(a.dataset.order);
+        });
+        ordered.forEach(post => list.appendChild(post));
         let visible = 0;
         posts.forEach(post => {
           const topicMatch = state.topic === 'all' || post.dataset.topic === state.topic;
           const accessMatch = state.access === 'all' || post.dataset.access === state.access;
-          post.hidden = !(topicMatch && accessMatch);
+          const queryMatch = !state.query || normalize(post.textContent).includes(normalize(state.query));
+          post.hidden = !(topicMatch && accessMatch && queryMatch);
           if (!post.hidden) visible += 1;
         });
-        count.textContent = `${arabicCounts[visible]} ${visible === 1 ? 'مادة' : 'مواد'}`;
+        count.textContent = `${formatNumber(visible)} ${visible === 1 ? 'مادة' : 'مواد'}`;
         empty.classList.toggle('show', visible === 0);
       }
 
@@ -226,6 +285,22 @@
         applyFilters();
       }));
 
+      search.addEventListener('input', () => { state.query = search.value.trim(); applyFilters(); });
+      sort.addEventListener('change', () => { state.sort = sort.value; applyFilters(); });
+      posts.forEach(post => {
+        paintMetrics(post);
+        post.querySelector('[data-like]').addEventListener('click', () => {
+          const key = `anwarpi:liked:${post.dataset.id}`;
+          localStorage.setItem(key, localStorage.getItem(key) === '1' ? '0' : '1');
+          paintMetrics(post);
+          applyFilters();
+        });
+        post.querySelectorAll('a.post-link').forEach(link => link.addEventListener('click', () => {
+          localStorage.setItem(`anwarpi:views:${post.dataset.id}`, String(readMetric(post, 'views') + 1));
+        }));
+      });
+
+      buttons.filter(button => button.dataset.filterKind === 'topic').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.filterValue === state.topic)));
       applyFilters();
     })();
   </script>
diff --git a/assets/anwarpi.js b/assets/anwarpi.js
index 6bf1b44..e215007 100644
--- a/assets/anwarpi.js
+++ b/assets/anwarpi.js
@@ -197,12 +197,14 @@
       "article-agent-guide.html": "nav a[href='article-agent-guide.html']",
       "post-locked.html": "nav a[href='article-agent-guide.html']",
       "post-unlocked.html": "nav a[href='article-agent-guide.html']",
+      "articles.html": "nav a[href='articles.html']",
       "subscription.html": "nav a[href='#exclusive-guides']",
       "vip-onboarding.html": "nav a[href='subscription.html']",
       "account-settings.html": ".nav-account",
       "login.html": ".logo",
       "forgot-password.html": ".logo",
-      "privacy.html": "nav a[href='privacy.html']"
+      "privacy.html": "nav a[href='privacy.html']",
+      "about.html": "nav a[href='about.html']"
     }[page];
 
     var active = selector && topnav.querySelector(selector);