Deploy ReguAI: Neuro-Symbolic AI GRC & Automated Conformity Assessment Engine

app.py

@@ -50,32 +50,32 @@ def on_domain_change(selected_domain_name: str):
     banner = """
     <div style="margin-top: 12px; padding: 12px 16px; border-radius: 8px; background: #f8fafc; border: 1px dashed #cbd5e1; font-size: 13px; color: #64748b; display: flex; align-items: center; gap: 8px;">
         <span>ℹ️</span>
-        <span>New regulatory sector selected. Click <strong>⚡ Run Deterministic Conformity Assessment</strong> below to evaluate.</span>
+        <span>New regulatory sector selected. Click <strong>⚡ Run Assessment & Review Grounding (Step 2) ➔</strong> below to evaluate.</span>
     </div>
     """
     if not cases:
-        return gr.update(choices=[], value=None), "", "", "<div style='padding:15px;'>No cases found.</div>", banner
+        return gr.update(choices=[], value=None), "", "", "<div style='padding:15px;'>No cases found.</div>", "<div style='padding:15px;'>No cases found.</div>", banner
     titles = [c["title"] for c in cases]
     first_title = titles[0]
     text = catalog.get_case_document_text(first_title)
     factsheet = catalog.render_factsheet_html(first_title)
     quick_bar = catalog.render_quick_bar(first_title)
-    return gr.update(choices=titles, value=first_title), text, quick_bar, factsheet, banner
+    return gr.update(choices=titles, value=first_title), text, quick_bar, factsheet, factsheet, banner
 
 
 def on_case_change(selected_case_title: str):
     banner = """
     <div style="margin-top: 12px; padding: 12px 16px; border-radius: 8px; background: #f8fafc; border: 1px dashed #cbd5e1; font-size: 13px; color: #64748b; display: flex; align-items: center; gap: 8px;">
         <span>ℹ️</span>
-        <span>Case study loaded. Click <strong>⚡ Run Deterministic Conformity Assessment</strong> below to execute deterministic SHACL verification.</span>
+        <span>Case study loaded. Click <strong>⚡ Run Assessment & Review Grounding (Step 2) ➔</strong> below to execute deterministic SHACL verification.</span>
     </div>
     """
     if not selected_case_title:
-        return "", "", "<div style='padding:15px;'>Select a case study.</div>", banner
+        return "", "", "<div style='padding:15px;'>Select a case study.</div>", "<div style='padding:15px;'>Select a case study.</div>", banner
     text = catalog.get_case_document_text(selected_case_title)
     factsheet = catalog.render_factsheet_html(selected_case_title)
     quick_bar = catalog.render_quick_bar(selected_case_title)
-    return text, quick_bar, factsheet, banner
+    return text, quick_bar, factsheet, factsheet, banner
 
 
 def compute_assessment_data(doc_text: str, auditor_id: str, annual_turnover: float = 50000000.0, is_sme: bool = False):
@@ -616,7 +616,7 @@ div[role="tablist"] {
 
 button[role="tab"] {
     font-family: 'Inter', sans-serif !important;
-    font-size: 13px !important;
+    font-size: 13.5px !important;
     font-weight: 600 !important;
     padding: 8px 16px !important;
     border-radius: 8px 8px 0 0 !important;
@@ -626,6 +626,14 @@ button[role="tab"] {
     transition: all 0.15s ease !important;
 }
 
+.factsheet-container, .factsheet-container * {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+}
+
+.factsheet-container code, .factsheet-container pre {
+    font-family: 'JetBrains Mono', monospace !important;
+}
+
 .dark button[role="tab"] {
     color: #94a3b8 !important;
 }
@@ -985,12 +993,19 @@ with gr.Blocks(title="ReguAI: Neuro-Symbolic AI GRC Engine") as demo:
                 label="Statutory Summary",
             )
 
-            spec_input = gr.Textbox(
-                label="System Technical Specification (Markdown or JSON - Fully Editable)",
-                lines=14,
-                placeholder="Paste AI system architecture or model card text...",
-                value=DEFAULT_SPEC_TEXT,
-            )
+            with gr.Tabs():
+                with gr.TabItem("📝 System Technical Specification"):
+                    spec_input = gr.Textbox(
+                        label="System Technical Specification (Markdown or JSON - Fully Editable)",
+                        lines=14,
+                        placeholder="Paste AI system architecture or model card text...",
+                        value=DEFAULT_SPEC_TEXT,
+                    )
+                with gr.TabItem("📚 EUR-Lex Legal Factsheet"):
+                    step1_factsheet_box = gr.HTML(
+                        value=DEFAULT_FACTSHEET,
+                        label="Regulatory Factsheet & Provenance",
+                    )
 
             with gr.Accordion("⚙️ Corporate Exposure & Auditor Settings (Optional)", open=False):
                 with gr.Row():
@@ -1032,13 +1047,13 @@ with gr.Blocks(title="ReguAI: Neuro-Symbolic AI GRC Engine") as demo:
         # =============================================================
         with gr.TabItem("2️⃣ Review Grounding", id="tab_review_grounding"):
             with gr.Tabs():
-                with gr.TabItem("🕸️ Knowledge Graph & Ontology"):
-                    graph_output = gr.HTML(value=DEFAULT_ASSESSMENT["graph_iframe_html"], label="Force-Directed Knowledge Graph")
                 with gr.TabItem("📚 EUR-Lex Legal Factsheet"):
                     factsheet_box = gr.HTML(
                         value=DEFAULT_FACTSHEET,
                         label="Regulatory Factsheet & Provenance",
                     )
+                with gr.TabItem("🕸️ Knowledge Graph & Ontology"):
+                    graph_output = gr.HTML(value=DEFAULT_ASSESSMENT["graph_iframe_html"], label="Force-Directed Knowledge Graph")
                 with gr.TabItem("🔍 Extracted Claims"):
                     claims_table = gr.Dataframe(
                         headers=["Claim ID", "Category", "Status", "Confidence", "Target Article", "Evidence Span"],
@@ -1141,12 +1156,12 @@ with gr.Blocks(title="ReguAI: Neuro-Symbolic AI GRC Engine") as demo:
     domain_dropdown.change(
         fn=on_domain_change,
         inputs=[domain_dropdown],
-        outputs=[case_dropdown, spec_input, quick_bar_box, factsheet_box, status_banner_box],
+        outputs=[case_dropdown, spec_input, quick_bar_box, factsheet_box, step1_factsheet_box, status_banner_box],
     )
     case_dropdown.change(
         fn=on_case_change,
         inputs=[case_dropdown],
-        outputs=[spec_input, quick_bar_box, factsheet_box, status_banner_box],
+        outputs=[spec_input, quick_bar_box, factsheet_box, step1_factsheet_box, status_banner_box],
     )
 
     # Wire assessment buttons (Tab 1 primary to Step 2, direct to Step 3, and Tab 3 re-run)

data/active_learning_triplets.jsonl

@@ -24,3 +24,5 @@
 {"timestamp": "2026-09-21T16:35:03.024528+00:00", "auditor_id": "compliance_lead_01", "claim_id": "clm_test_99", "anchor_text": "Verified operational override in production dashboard.", "positive_label": "HUMAN_OVERSIGHT", "negative_label": "IRRELEVANT_TEXT", "verified_assertion_status": "IMPLEMENTED", "auditor_notes": "Verified operational override in production dashboard."}
 {"timestamp": "2026-09-21T16:44:05.202261+00:00", "auditor_id": "compliance_lead_01", "claim_id": "clm_test_99", "anchor_text": "Verified operational override in production dashboard.", "positive_label": "HUMAN_OVERSIGHT", "negative_label": "IRRELEVANT_TEXT", "verified_assertion_status": "IMPLEMENTED", "auditor_notes": "Verified operational override in production dashboard."}
 {"timestamp": "2026-09-21T16:49:24.911620+00:00", "auditor_id": "compliance_lead_01", "claim_id": "clm_test_99", "anchor_text": "Verified operational override in production dashboard.", "positive_label": "HUMAN_OVERSIGHT", "negative_label": "IRRELEVANT_TEXT", "verified_assertion_status": "IMPLEMENTED", "auditor_notes": "Verified operational override in production dashboard."}
+{"timestamp": "2026-09-21T17:32:38.378505+00:00", "auditor_id": "compliance_lead_01", "claim_id": "clm_test_99", "anchor_text": "Verified operational override in production dashboard.", "positive_label": "HUMAN_OVERSIGHT", "negative_label": "IRRELEVANT_TEXT", "verified_assertion_status": "IMPLEMENTED", "auditor_notes": "Verified operational override in production dashboard."}
+{"timestamp": "2026-09-21T17:34:24.366530+00:00", "auditor_id": "compliance_lead_01", "claim_id": "clm_test_99", "anchor_text": "Verified operational override in production dashboard.", "positive_label": "HUMAN_OVERSIGHT", "negative_label": "IRRELEVANT_TEXT", "verified_assertion_status": "IMPLEMENTED", "auditor_notes": "Verified operational override in production dashboard."}

src/core/case_catalog.py

@@ -103,17 +103,17 @@ class CaseStudyCatalog:
         eli_uri = case.get("provenance", {}).get("eli_uri", "http://data.europa.eu/eli/reg/2024/1689/oj")
 
         return f"""
-        <div class="quick-summary-bar" style="display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; margin:4px 0 10px 0; font-size:12px;">
-            <span style="background:{pill_bg}; color:{pill_color}; border:1px solid {pill_border}; padding:2px 8px; border-radius:4px; font-weight:700;">
+        <div class="quick-summary-bar" style="display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:9px 14px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; margin:4px 0 12px 0; font-family:'Inter', sans-serif; font-size:13px;">
+            <span style="background:{pill_bg}; color:{pill_color}; border:1px solid {pill_border}; padding:3px 10px; border-radius:6px; font-weight:700; font-size:12.5px;">
                 {expected}
             </span>
-            <span style="background:#e0f2fe; color:#0369a1; border:1px solid #bae6fd; padding:2px 8px; border-radius:4px; font-weight:600;">
+            <span style="background:#e0f2fe; color:#0369a1; border:1px solid #bae6fd; padding:3px 10px; border-radius:6px; font-weight:600; font-size:12.5px;">
                 ⚖️ {tier}
             </span>
-            <span style="background:#fef2f2; color:#991b1b; border:1px solid #fecaca; padding:2px 8px; border-radius:4px; font-weight:600;">
+            <span style="background:#fef2f2; color:#991b1b; border:1px solid #fecaca; padding:3px 10px; border-radius:6px; font-weight:600; font-size:12.5px;">
                 💰 {fine.split('(')[0].strip()}
             </span>
-            <a href="{eli_uri}" target="_blank" style="margin-left:auto; color:#2563eb; text-decoration:none; font-weight:600; display:flex; align-items:center; gap:2px;">
+            <a href="{eli_uri}" target="_blank" style="margin-left:auto; color:#2563eb; text-decoration:none; font-weight:600; font-size:13px; display:flex; align-items:center; gap:4px;">
                 📜 EUR-Lex CELEX:{celex} ↗
             </a>
         </div>
@@ -122,7 +122,7 @@ class CaseStudyCatalog:
     def render_factsheet_html(self, case_id_or_title: str) -> str:
         case = self.get_case(case_id_or_title) or self.get_case_by_title(case_id_or_title)
         if not case:
-            return "<div style='padding:15px; color:#64748b;'>Select a case study to display statutory reference factsheet.</div>"
+            return "<div style=\"padding:16px; color:#64748b; font-family:'Inter', sans-serif; font-size:13.5px;\">Select a case study to display statutory reference factsheet.</div>"
 
         prov = case.get("provenance", {})
         reqs = case.get("regulatory_requirements", {})
@@ -148,93 +148,93 @@ class CaseStudyCatalog:
             pill_bg = "#fffbeb"
             pill_border = "#fde68a"
 
-        # Mandatory articles tags
+        # Mandatory articles tags (12.5px symmetric pills)
         articles_html = " ".join([
-            f"<span style='background:#e2e8f0; color:#334155; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600;'>{a}</span>"
+            f"<span style='background:#e2e8f0; color:#1e293b; padding:3px 9px; border-radius:5px; font-size:12.5px; font-weight:600;'>{a}</span>"
             for a in reqs.get("mandatory_articles", [])
         ])
 
         # NIST tags
         nist_html = " ".join([
-            f"<span style='background:#dbeafe; color:#1e40af; padding:2px 6px; border-radius:4px; font-size:11px; font-weight:500;'>{n}</span>"
+            f"<span style='background:#dbeafe; color:#1e40af; padding:3px 8px; border-radius:5px; font-size:12.5px; font-weight:500;'>{n}</span>"
             for n in frameworks.get("nist_ai_rmf", [])
         ])
 
         # ISO tags
         iso_html = " ".join([
-            f"<span style='background:#f3e8ff; color:#6b21a8; padding:2px 6px; border-radius:4px; font-size:11px; font-weight:500;'>{i}</span>"
+            f"<span style='background:#f3e8ff; color:#6b21a8; padding:3px 8px; border-radius:5px; font-size:12.5px; font-weight:500;'>{i}</span>"
             for i in frameworks.get("iso_42001", [])
         ])
 
         # GDPR tags
         gdpr_html = " ".join([
-            f"<span style='background:#e0e7ff; color:#3730a3; padding:2px 6px; border-radius:4px; font-size:11px; font-weight:500;'>{g}</span>"
+            f"<span style='background:#e0e7ff; color:#3730a3; padding:3px 8px; border-radius:5px; font-size:12.5px; font-weight:500;'>{g}</span>"
             for g in frameworks.get("gdpr", [])
         ])
 
         html = f"""
-        <div style="background:#ffffff; border:1px solid #cbd5e1; border-radius:8px; padding:16px; margin-bottom:14px; box-shadow:0 1px 3px rgba(0,0,0,0.05); font-family:-apple-system,BlinkMacSystemFont,sans-serif;" class="factsheet-container">
-            <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; flex-wrap:wrap; gap:8px;">
+        <div style="background:#ffffff; border:1px solid #cbd5e1; border-radius:10px; padding:20px; margin-bottom:16px; box-shadow:0 1px 4px rgba(0,0,0,0.04); font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size:13.5px; line-height:1.6;" class="factsheet-container">
+            <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; flex-wrap:wrap; gap:10px;">
                 <div>
-                    <span style="background:#0284c7; color:#ffffff; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;">
+                    <span style="background:#0284c7; color:#ffffff; padding:4px 11px; border-radius:12px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;">
                         {case.get('domain_name', 'Domain')}
                     </span>
-                    <h3 style="margin:6px 0 2px 0; font-size:16px; font-weight:700; color:#0f172a;">
+                    <h3 style="margin:8px 0 4px 0; font-size:17px; font-weight:700; color:#0f172a; line-height:1.3;">
                         {case.get('title')}
                     </h3>
-                    <div style="font-size:12px; color:#64748b;">
-                        <strong>Legal Basis:</strong> <span style="color:#2563eb;">{case.get('legal_basis')}</span>
+                    <div style="font-size:13px; color:#64748b;">
+                        <strong>Legal Basis:</strong> <span style="color:#2563eb; font-weight:500;">{case.get('legal_basis')}</span>
                     </div>
                 </div>
                 <div>
-                    <span style="background:{pill_bg}; color:{pill_color}; border:1px solid {pill_border}; padding:4px 12px; border-radius:6px; font-size:12px; font-weight:700;">
+                    <span style="background:{pill_bg}; color:{pill_color}; border:1px solid {pill_border}; padding:5px 14px; border-radius:6px; font-size:13px; font-weight:700;">
                         {expected}
                     </span>
                 </div>
             </div>
 
-            <div style="background:#f8fafc; border-left:4px solid #3b82f6; padding:10px 12px; border-radius:4px; margin-bottom:12px; font-size:13px; color:#334155; line-height:1.5;">
-                <strong>🎯 Statutory Intended Purpose:</strong> {guidance.get('intended_purpose', '')}
+            <div style="background:#f8fafc; border-left:4px solid #3b82f6; padding:12px 16px; border-radius:6px; margin-bottom:14px; font-size:13.5px; color:#334155; line-height:1.6;">
+                <strong style="color:#0f172a;">🎯 Statutory Intended Purpose:</strong> {guidance.get('intended_purpose', '')}
             </div>
 
-            <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:12px; margin-bottom:12px;">
-                <div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; padding:10px;">
-                    <div style="font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; margin-bottom:4px;">Mandatory EU AI Act Requirements</div>
-                    <div style="display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;">{articles_html or 'N/A'}</div>
-                    <div style="margin-top:8px; font-size:11px; color:#475569;">
-                        <strong>Conformity Procedure:</strong> {reqs.get('conformity_procedure', 'N/A')}
+            <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:14px; margin-bottom:14px;">
+                <div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:14px;">
+                    <div style="font-size:12px; font-weight:700; color:#475569; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px;">Mandatory EU AI Act Requirements</div>
+                    <div style="display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;">{articles_html or 'N/A'}</div>
+                    <div style="margin-top:10px; font-size:13px; color:#334155; line-height:1.5;">
+                        <strong style="color:#0f172a;">Conformity Procedure:</strong> {reqs.get('conformity_procedure', 'N/A')}
                     </div>
-                    <div style="margin-top:4px; font-size:11px; color:#b91c1c; font-weight:600;">
+                    <div style="margin-top:6px; font-size:13px; color:#b91c1c; font-weight:600; line-height:1.5;">
                         <strong>Statutory Fine Ceiling:</strong> {reqs.get('fine_exposure_tier', 'N/A')}
                     </div>
                 </div>
 
-                <div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; padding:10px;">
-                    <div style="font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; margin-bottom:4px;">Harmonized Framework Crosswalk</div>
-                    <div style="margin-bottom:4px; font-size:11px;"><strong>NIST AI RMF:</strong> {nist_html or 'None'}</div>
-                    <div style="margin-bottom:4px; font-size:11px;"><strong>ISO/IEC 42001:</strong> {iso_html or 'None'}</div>
-                    <div style="font-size:11px;"><strong>GDPR:</strong> {gdpr_html or 'None'}</div>
+                <div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:14px;">
+                    <div style="font-size:12px; font-weight:700; color:#475569; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px;">Harmonized Framework Crosswalk</div>
+                    <div style="margin-bottom:6px; font-size:13px; color:#334155;"><strong style="color:#0f172a;">NIST AI RMF:</strong> {nist_html or 'None'}</div>
+                    <div style="margin-bottom:6px; font-size:13px; color:#334155;"><strong style="color:#0f172a;">ISO/IEC 42001:</strong> {iso_html or 'None'}</div>
+                    <div style="font-size:13px; color:#334155;"><strong style="color:#0f172a;">GDPR:</strong> {gdpr_html or 'None'}</div>
                 </div>
             </div>
 
-            <div style="background:#fffbeb; border:1px solid #fde68a; border-radius:6px; padding:10px 12px; margin-bottom:12px; font-size:12px; color:#92400e; line-height:1.5;">
+            <div style="background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:12px 16px; margin-bottom:14px; font-size:13.5px; color:#92400e; line-height:1.6;">
                 <strong>⚠️ Auditor Pitfall & Common Failure Mode:</strong> {guidance.get('common_pitfalls', '')}
             </div>
 
             <!-- Cryptographic Provenance Block -->
-            <div style="background:#0f172a; color:#cbd5e1; border-radius:6px; padding:12px; font-size:11px; line-height:1.6;">
-                <div style="display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #334155; padding-bottom:6px; margin-bottom:6px;">
-                    <span style="font-weight:700; color:#38bdf8; display:flex; align-items:center; gap:4px;">
+            <div style="background:#0f172a; color:#cbd5e1; border-radius:8px; padding:14px 16px; font-size:13px; line-height:1.6;">
+                <div style="display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #334155; padding-bottom:8px; margin-bottom:8px;">
+                    <span style="font-weight:700; color:#38bdf8; display:flex; align-items:center; gap:6px; font-size:13px;">
                         🔐 Cryptographic Provenance & Legal Anchor (EUR-Lex)
                     </span>
-                    <a href="{prov.get('eli_uri', 'http://data.europa.eu/eli/reg/2024/1689/oj')}" target="_blank" style="color:#60a5fa; text-decoration:none; font-weight:600;">
+                    <a href="{prov.get('eli_uri', 'http://data.europa.eu/eli/reg/2024/1689/oj')}" target="_blank" style="color:#60a5fa; text-decoration:none; font-weight:600; font-size:13px;">
                         CELEX:{prov.get('celex', '32024R1689')} ↗
                     </a>
                 </div>
-                <div style="font-style:italic; color:#94a3b8; margin-bottom:6px; font-size:11px; border-left:2px solid #38bdf8; padding-left:8px;">
+                <div style="font-style:italic; color:#94a3b8; margin-bottom:10px; font-size:13px; border-left:2px solid #38bdf8; padding-left:10px; line-height:1.5;">
                     "{prov.get('statutory_quote', '')[:220]}..."
                 </div>
-                <div style="display:grid; grid-template-columns:1fr 1fr; gap:6px; font-family:monospace; font-size:10px;">
+                <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px; font-family:'JetBrains Mono', monospace; font-size:12px;">
                     <div><span style="color:#64748b;">Statutory Quote SHA-256:</span> <span style="color:#a7f3d0;">{prov.get('statutory_quote_sha256', '')[:16]}...</span></div>
                     <div><span style="color:#64748b;">Model Spec SHA-256:</span> <span style="color:#a7f3d0;">{prov.get('spec_file_sha256', '')[:16]}...</span></div>
                     <div style="grid-column: span 2;"><span style="color:#64748b;">W3C PROV-O Entity:</span> <span style="color:#bae6fd;">{prov.get('prov_o_entity', '')}</span></div>