From 81ea22ac34ee3a613aecfa858c662f9245cf0812 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Fri, 6 Mar 2026 12:35:40 +0100
Subject: [PATCH] feat: add AI usage homepage section with stats and
 contribution graph

Full-width section for homepage builder showing 4-column stats grid,
level breakdown pills, AI-involved post-graph, and link to /ai/ page.

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
---
 _includes/components/homepage-section.njk  |  2 +
 _includes/components/sections/ai-usage.njk | 66 ++++++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 _includes/components/sections/ai-usage.njk

diff --git a/_includes/components/homepage-section.njk b/_includes/components/homepage-section.njk
index e7b8ee0..b13070c 100644
--- a/_includes/components/homepage-section.njk
+++ b/_includes/components/homepage-section.njk
@@ -51,6 +51,8 @@
   {% include "components/sections/lastfm.njk" ignore missing %}
 {% elif section.type == "posting-activity" %}
   {% include "components/sections/posting-activity.njk" ignore missing %}
+{% elif section.type == "ai-usage" %}
+  {% include "components/sections/ai-usage.njk" ignore missing %}
 {% else %}
   <!-- Unknown section type: {{ section.type }} -->
 {% endif %}
diff --git a/_includes/components/sections/ai-usage.njk b/_includes/components/sections/ai-usage.njk
new file mode 100644
index 0000000..e407d0e
--- /dev/null
+++ b/_includes/components/sections/ai-usage.njk
@@ -0,0 +1,66 @@
+{# AI Usage Section — full-width AI transparency stats and contribution graph #}
+{% set sectionConfig = section.config or {} %}
+{% set sectionTitle = sectionConfig.title or "AI Transparency" %}
+{% set stats = collections.posts | aiStats %}
+{% set aiPostsList = collections.posts | aiPosts %}
+
+{% if stats and stats.total > 0 %}
+<section class="mb-8 sm:mb-12">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">
+    {{ sectionTitle }}
+  </h2>
+
+  <div class="p-6 rounded-xl bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700">
+    {# Stats grid — 4 columns #}
+    <div class="grid gap-4 sm:grid-cols-4 mb-6">
+      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+        <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.total }}</div>
+        <div class="text-xs text-surface-500 dark:text-surface-400">Total posts</div>
+      </div>
+      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+        <div class="text-2xl font-bold text-amber-600 dark:text-amber-400">{{ stats.aiCount }}</div>
+        <div class="text-xs text-surface-500 dark:text-surface-400">AI-involved</div>
+      </div>
+      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+        <div class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{{ stats.total - stats.aiCount }}</div>
+        <div class="text-xs text-surface-500 dark:text-surface-400">Human-only</div>
+      </div>
+      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+        <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.percentage }}%</div>
+        <div class="text-xs text-surface-500 dark:text-surface-400">AI ratio</div>
+      </div>
+    </div>
+
+    {# Level breakdown #}
+    <div class="flex flex-wrap gap-3 text-sm mb-6">
+      <span class="px-3 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-300">
+        Level 0 (None): {{ stats.byLevel[0] }}
+      </span>
+      <span class="px-3 py-1 rounded-full bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300">
+        Level 1 (Editorial): {{ stats.byLevel[1] }}
+      </span>
+      <span class="px-3 py-1 rounded-full bg-amber-100 dark:bg-amber-900/40 text-amber-800 dark:text-amber-200">
+        Level 2 (Co-drafted): {{ stats.byLevel[2] }}
+      </span>
+      <span class="px-3 py-1 rounded-full bg-amber-200 dark:bg-amber-900/60 text-amber-900 dark:text-amber-100">
+        Level 3 (AI-generated): {{ stats.byLevel[3] }}
+      </span>
+    </div>
+
+    {# Post graph — AI-involved posts highlighted #}
+    {% if aiPostsList and aiPostsList.length %}
+    <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-3">AI-Involved Posts Over Time</h3>
+    <p class="text-sm text-surface-500 dark:text-surface-400 mb-4">Highlighted days had posts with AI involvement (level 1+). Empty boxes represent days with no AI-involved posts.</p>
+    {% set graphLimit = sectionConfig.limit or 1 %}
+    {% postGraph aiPostsList, { prefix: "ai-section", limit: graphLimit, highlightColorLight: "#d97706", highlightColorDark: "#fbbf24" } %}
+    {% endif %}
+  </div>
+
+  <a href="/ai/" class="text-sm text-amber-600 dark:text-amber-400 hover:underline mt-4 inline-flex items-center gap-1">
+    View full AI transparency report
+    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+    </svg>
+  </a>
+</section>
+{% endif %}