From 80c7946deb5dff341ddbbc97b806f31ec1b4c989 Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Sat, 1 Nov 2025 08:57:13 +1300
Subject: [PATCH] feat: integrate Hugging Face Space links across website
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- researcher.html: Add HF Space link in collaboration section and resources
- index.html: Add HF Space CTA button in hero section
- architecture.html: Add "See It In Action" interactive exploration section

All links point to https://huggingface.co/spaces/tractatus-framework/audit-log-viewer
with proper styling (HF brand colors), external link icons, and i18n support.

Implements P0 recommendations from HF exposure optimization report.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 public/architecture.html | 34 ++++++++++++++++++++++++++++++++++
 public/index.html        |  5 +++++
 public/researcher.html   | 22 ++++++++++++++++++++++
 3 files changed, 61 insertions(+)

diff --git a/public/architecture.html b/public/architecture.html
index 0b32082f..7d55e22d 100644
--- a/public/architecture.html
+++ b/public/architecture.html
@@ -393,6 +393,40 @@
     </div>
   </section>
 
+  <!-- Interactive Exploration Section -->
+  <section class="bg-gradient-to-br from-yellow-50 to-orange-50 py-16 border-y border-orange-200">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+      <div class="inline-block bg-orange-600 text-white px-4 py-2 rounded-lg font-semibold mb-6 text-sm" data-i18n="interactive_exploration.badge">
+        🔍 INTERACTIVE EXPLORATION
+      </div>
+      <h2 class="text-4xl md:text-5xl font-bold mb-6 text-gray-900" data-i18n="interactive_exploration.heading">
+        See the Framework in Action
+      </h2>
+      <p class="text-xl text-gray-700 mb-8 max-w-3xl mx-auto" data-i18n-html="interactive_exploration.intro">
+        Explore <strong>3,942 real governance decisions</strong> from production deployment.
+        Filter by service, pressure level, and coordination patterns to understand how
+        Deep Interlock operates in practice.
+      </p>
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
+        <a href="https://huggingface.co/spaces/tractatus-framework/audit-log-viewer"
+           target="_blank"
+           rel="noopener noreferrer"
+           class="inline-block bg-gradient-to-r from-yellow-500 to-orange-500 text-white px-8 py-4 rounded-lg font-bold text-lg hover:from-yellow-600 hover:to-orange-600 transition shadow-lg hover:shadow-xl"
+           data-i18n="interactive_exploration.hf_cta">
+          🤗 Launch Interactive Explorer on Hugging Face
+        </a>
+        <a href="/researcher.html"
+           class="inline-block bg-white text-gray-900 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition border-2 border-gray-300"
+           data-i18n="interactive_exploration.researcher_cta">
+          For Researchers →
+        </a>
+      </div>
+      <p class="text-sm text-gray-600 mt-6" data-i18n="interactive_exploration.footer_note">
+        Apache 2.0 licensed • All data anonymized • No sign-up required
+      </p>
+    </div>
+  </section>
+
   <!-- Six Core Services -->
   <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
     <div class="text-center mb-12">
diff --git a/public/index.html b/public/index.html
index 23a7b05f..c6fa0c4e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -95,6 +95,11 @@
           <a href="/docs.html"
              class="btn-base btn-primary inline-block"
              data-i18n="hero.cta_docs">Read Documentation</a>
+          <a href="https://huggingface.co/spaces/tractatus-framework/audit-log-viewer"
+             target="_blank"
+             rel="noopener noreferrer"
+             class="inline-block px-8 py-3 rounded-lg font-semibold transition-all duration-300 bg-gradient-to-r from-yellow-500 to-orange-500 text-white hover:shadow-lg hover:-translate-y-1"
+             data-i18n="hero.cta_hf_space">🤗 Explore Audit Logs</a>
           <a href="/faq.html"
              class="btn-base btn-validator inline-block"
              data-i18n="hero.cta_faq">FAQ</a>
diff --git a/public/researcher.html b/public/researcher.html
index 4c7e2b99..1202faab 100644
--- a/public/researcher.html
+++ b/public/researcher.html
@@ -212,6 +212,12 @@
             <button id="alexander-research-inquiry-button" class="inline-block bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-blue-700 transition text-sm">
               <span data-i18n="alexander_research.contact_link">Contact for Collaboration →</span>
             </button>
+            <a href="https://huggingface.co/spaces/tractatus-framework/audit-log-viewer"
+               target="_blank"
+               rel="noopener noreferrer"
+               class="inline-block bg-gradient-to-r from-yellow-500 to-orange-500 text-white px-4 py-2 rounded-lg font-semibold hover:from-yellow-600 hover:to-orange-600 transition text-sm">
+              <span data-i18n="alexander_research.hf_space_link">🤗 Explore 3,942 Audit Decisions on HF →</span>
+            </a>
             <a href="/about/values.html" class="inline-block bg-gray-200 text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-gray-300 transition text-sm">
               <span data-i18n="alexander_research.values_link">Values & Principles →</span>
             </a>
@@ -539,6 +545,22 @@
       <h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.resources.heading">Research Documentation</h2>
 
       <div class="space-y-3 text-sm">
+        <a href="https://huggingface.co/spaces/tractatus-framework/audit-log-viewer"
+           target="_blank"
+           rel="noopener noreferrer"
+           class="flex items-center justify-between p-4 border-2 border-orange-400 bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg hover:border-orange-500 hover:shadow-md transition">
+          <div class="flex items-center">
+            <span class="text-2xl mr-3">🤗</span>
+            <div>
+              <span class="font-bold text-gray-900 block" data-i18n="sections.resources.hf_space_title">Interactive Audit Log Explorer (Hugging Face)</span>
+              <span class="text-xs text-gray-600" data-i18n="sections.resources.hf_space_subtitle">Explore 3,942 governance decisions from production deployment</span>
+            </div>
+          </div>
+          <svg class="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+          </svg>
+        </a>
+
         <a href="/downloads/organizational-theory-foundations-of-the-tractatus-framework.pdf" target="_blank" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
           <span class="font-medium text-gray-900" data-i18n="sections.resources.doc_1_title">Organisational Theory Foundations</span>
           <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">