Add IaC-SecFix app with Gradio UI and agent backend

iac_secfix_space/rendering.py

@@ -1,30 +1,197 @@
 from __future__ import annotations
 
-
-ACTION_STYLES: dict[str, str] = {
-    "approved": "background:#22c55e;color:white",
-    "needs_human_review": "background:#f97316;color:white",
-    "rejected": "background:#ef4444;color:white",
-    "refused": "background:#dc2626;color:white",
+_FONT = "'IBM Plex Sans', system-ui, -apple-system, sans-serif"
+_MONO = "'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace"
+
+_SVG_ERROR = (
+    "<svg width='20' height='20' viewBox='0 0 32 32' fill='currentColor'>"
+    "<path d='M16 2C8.2 2 2 8.2 2 16s6.2 14 14 14 14-6.2 14-14S23.8 2 16 2z"
+    "m5.4 21L16 17.6 10.6 23 9 21.4l5.4-5.4L9 10.6 10.6 9 16 14.4 21.4 9 23 10.6"
+    "l-5.4 5.4 5.4 5.4L21.4 23z'/></svg>"
+)
+_SVG_WARNING = (
+    "<svg width='20' height='20' viewBox='0 0 32 32' fill='currentColor'>"
+    "<path d='M16 2L2 30h28L16 2zm-1.33 10.67h2.67V20h-2.67z"
+    "M16 26a1.33 1.33 0 110-2.67A1.33 1.33 0 0116 26z'/></svg>"
+)
+_SVG_CHECK = (
+    "<svg width='20' height='20' viewBox='0 0 32 32' fill='currentColor'>"
+    "<path d='M16 2C8.2 2 2 8.2 2 16s6.2 14 14 14 14-6.2 14-14S23.8 2 16 2z"
+    "m-3 20.6l-5.6-5.6 1.4-1.4 4.2 4.2 9.2-9.2 1.4 1.4L13 22.6z'/></svg>"
+)
+_SVG_INFO = (
+    "<svg width='20' height='20' viewBox='0 0 32 32' fill='currentColor'>"
+    "<path d='M17 22v-8h-4v2h2v6h-2v2h6v-2zM15 8a1.5 1.5 0 100 3 1.5 1.5 0 000-3z"
+    "M16 2C8.2 2 2 8.2 2 16s6.2 14 14 14 14-6.2 14-14S23.8 2 16 2z'/></svg>"
+)
+
+_NOTIFICATION: dict[str, dict] = {
+    "approved": {
+        "border": "#24a148", "bg": "#defbe6", "color": "#0e6027",
+        "icon": _SVG_CHECK, "label": "APPROVED",
+    },
+    "needs_human_review": {
+        "border": "#f1c21b", "bg": "#fdf6dd", "color": "#695200",
+        "icon": _SVG_WARNING, "label": "NEEDS HUMAN REVIEW",
+    },
+    "rejected": {
+        "border": "#da1e28", "bg": "#fff1f1", "color": "#a2191f",
+        "icon": _SVG_ERROR, "label": "REJECTED",
+    },
+    "refused": {
+        "border": "#da1e28", "bg": "#fff1f1", "color": "#a2191f",
+        "icon": _SVG_ERROR, "label": "REFUSED",
+    },
+}
+_DEFAULT_NOTIFICATION = {
+    "border": "#8d8d8d", "bg": "#f4f4f4", "color": "#525252",
+    "icon": _SVG_INFO, "label": "UNKNOWN",
 }
 
 
-def action_badge(action: str) -> str:
-    style = ACTION_STYLES.get(action, "background:#6b7280;color:white")
-    label = action.upper().replace("_", " ")
-    return f"<span style='{style};padding:5px 14px;border-radius:5px;font-weight:bold;font-size:1.1em'>{label}</span>"
+def _notification_html(action: str, reason: str) -> str:
+    cfg = _NOTIFICATION.get(action, _DEFAULT_NOTIFICATION)
+    return (
+        f"<div style='"
+        f"display:flex;align-items:flex-start;gap:12px;"
+        f"background:{cfg['bg']};"
+        f"border-left:4px solid {cfg['border']};"
+        f"padding:14px 16px;"
+        f"font-family:{_FONT};"
+        f"'>"
+        f"<span style='color:{cfg['color']};flex-shrink:0;margin-top:1px'>{cfg['icon']}</span>"
+        f"<div>"
+        f"<p style='font-size:12px;font-weight:600;letter-spacing:0.32px;"
+        f"color:{cfg['color']};margin:0 0 4px;text-transform:uppercase'>{cfg['label']}</p>"
+        f"<p style='font-size:14px;color:#525252;margin:0;line-height:1.5'>{reason}</p>"
+        f"</div>"
+        f"</div>"
+    )
 
 
-def render_findings_md(rule_ids: list[str], summary: dict) -> str:
+def _severity_pill(sev: str) -> str:
+    colors = {
+        "CRITICAL": ("#750e13", "#fff1f1"),
+        "HIGH": ("#a2191f", "#fff1f1"),
+        "MEDIUM": ("#5d3617", "#fdf6dd"),
+        "LOW": ("#0043ce", "#edf5ff"),
+    }
+    fg, bg = colors.get(sev, ("#525252", "#f4f4f4"))
+    return (
+        f"<span style='font-family:{_MONO};font-size:11px;font-weight:500;"
+        f"background:{bg};color:{fg};padding:1px 6px;"
+        f"letter-spacing:0.16px'>{sev}</span>"
+    )
+
+
+def render_findings_html(rule_ids: list[str], summary: dict) -> str:
     failed = summary.get("failed", len(rule_ids))
-    crit = summary.get("CRITICAL", 0)
-    high = summary.get("HIGH", 0)
-    med = summary.get("MEDIUM", 0)
+    crit = int(summary.get("CRITICAL", 0))
+    high = int(summary.get("HIGH", 0))
+    med = int(summary.get("MEDIUM", 0))
+
+    rows = "".join(
+        f"<tr>"
+        f"<td style='padding:6px 0;border-bottom:1px solid #e0e0e0;"
+        f"font-family:{_MONO};font-size:12px;color:#161616'>{rid}</td>"
+        f"</tr>"
+        for rid in rule_ids
+    )
+    table = (
+        f"<table style='width:100%;border-collapse:collapse'>"
+        f"<thead><tr><th style='text-align:left;padding:0 0 8px;"
+        f"font-family:{_FONT};font-size:11px;font-weight:600;letter-spacing:0.32px;"
+        f"text-transform:uppercase;color:#525252;border-bottom:1px solid #393939'>"
+        f"Rule ID</th></tr></thead>"
+        f"<tbody>{rows}</tbody></table>"
+    ) if rule_ids else "<p style='color:#8d8d8d;font-size:13px;margin:8px 0'>No findings</p>"
+
+    pills = " ".join([
+        _severity_pill("CRITICAL") + f" <b style='font-size:13px'>{crit}</b>" if crit else "",
+        _severity_pill("HIGH") + f" <b style='font-size:13px'>{high}</b>" if high else "",
+        _severity_pill("MEDIUM") + f" <b style='font-size:13px'>{med}</b>" if med else "",
+    ])
+
+    return (
+        f"<div style='font-family:{_FONT}'>"
+        f"<div style='display:flex;align-items:center;justify-content:space-between;"
+        f"margin-bottom:12px'>"
+        f"<span style='font-size:24px;font-weight:300;color:#161616'>{failed}</span>"
+        f"<span style='font-size:12px;letter-spacing:0.32px;text-transform:uppercase;"
+        f"color:#525252'>failed checks</span>"
+        f"</div>"
+        f"<div style='display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap'>{pills}</div>"
+        f"{table}"
+        f"</div>"
+    )
+
+
+def _details_html(
+    parse_ok: bool,
+    changed_ratio: float,
+    resolved: list[str],
+    unresolved: list[str],
+    explanation: str,
+    risk_notes: list[str],
+) -> str:
+    def _row(label: str, value: str) -> str:
+        return (
+            f"<tr>"
+            f"<td style='width:160px;padding:8px 0;border-bottom:1px solid #e0e0e0;"
+            f"font-size:11px;font-weight:600;letter-spacing:0.32px;"
+            f"text-transform:uppercase;color:#525252;vertical-align:top'>{label}</td>"
+            f"<td style='padding:8px 0 8px 16px;border-bottom:1px solid #e0e0e0;"
+            f"font-size:13px;color:#161616;font-family:{_MONO}'>{value}</td>"
+            f"</tr>"
+        )
+
+    def _pill_list(items: list[str], ok: bool) -> str:
+        if not items:
+            return "<span style='color:#8d8d8d'>—</span>"
+        color = "#0e6027" if ok else "#a2191f"
+        bg = "#defbe6" if ok else "#fff1f1"
+        pills = "".join(
+            f"<span style='display:inline-block;margin:2px 4px 2px 0;"
+            f"background:{bg};color:{color};padding:2px 8px;"
+            f"font-size:11px;font-weight:500'>{r}</span>"
+            for r in items
+        )
+        return f"<div style='display:flex;flex-wrap:wrap;gap:2px'>{pills}</div>"
+
+    risks_html = ""
+    if risk_notes:
+        items = "".join(
+            f"<li style='margin-bottom:4px;color:#525252'>{n}</li>"
+            for n in risk_notes
+        )
+        risks_html = (
+            f"<div style='margin-top:16px;padding:12px;background:#fdf6dd;"
+            f"border-left:3px solid #f1c21b'>"
+            f"<p style='font-size:11px;font-weight:600;letter-spacing:0.32px;"
+            f"text-transform:uppercase;color:#695200;margin:0 0 8px'>Risk Notes</p>"
+            f"<ul style='margin:0;padding-left:16px;font-size:13px'>{items}</ul>"
+            f"</div>"
+        )
+
+    table = (
+        f"<table style='width:100%;border-collapse:collapse;font-family:{_FONT}'>"
+        f"{_row('Parse OK', 'Yes' if parse_ok else 'No')}"
+        f"{_row('Changed lines', f'{changed_ratio:.0%}')}"
+        f"{_row('Resolved', _pill_list(resolved, ok=True))}"
+        f"{_row('Unresolved', _pill_list(unresolved, ok=False))}"
+        f"</table>"
+    )
+
+    expl_html = (
+        f"<div style='margin-top:16px;padding:12px 16px;"
+        f"background:#f4f4f4;border-left:3px solid #0f62fe'>"
+        f"<p style='font-size:11px;font-weight:600;letter-spacing:0.32px;"
+        f"text-transform:uppercase;color:#0043ce;margin:0 0 6px'>Explanation</p>"
+        f"<p style='font-size:13px;color:#161616;margin:0;line-height:1.6'>{explanation}</p>"
+        f"</div>"
+    ) if explanation else ""
 
-    lines = [f"**{failed} failed checks** (CRITICAL: {crit} | HIGH: {high} | MEDIUM: {med})"]
-    for rid in rule_ids:
-        lines.append(f"- `{rid}`")
-    return "\n".join(lines)
+    return f"<div>{table}{expl_html}{risks_html}</div>"
 
 
 def render_result(data: dict) -> tuple[str, str, str, str, str, str]:
@@ -46,35 +213,18 @@ def render_result(data: dict) -> tuple[str, str, str, str, str, str]:
     unresolved: list[str] = validation.get("targeted_unresolved") or []
     parse_ok: bool = validation.get("parse_ok", False)
     changed_ratio: float = validation.get("changed_lines_ratio", 0.0)
-
     explanation = patch_obj.get("explanation") or reason
     risk_notes: list[str] = patch_obj.get("risk_notes") or []
 
-    status_html = (
-        f"<div style='margin:12px 0'>"
-        f"{action_badge(action)}"
-        f"<p style='margin-top:8px;color:#374151'>{reason}</p>"
-        f"</div>"
-    )
-
-    details_parts = [
-        "### Validation",
-        f"- Parse OK: {'Yes' if parse_ok else 'No'}",
-        f"- Changed lines: {changed_ratio:.0%}",
-        f"- Resolved: {', '.join(f'`{r}`' for r in resolved) if resolved else 'none'}",
-        f"- Unresolved: {', '.join(f'`{r}`' for r in unresolved) if unresolved else 'none'}",
-        "",
-        "### Explanation",
-        explanation,
-    ]
-    if risk_notes:
-        details_parts += ["", "### Risk Notes"] + [f"- {n}" for n in risk_notes]
-
     return (
         original,
         fixed,
-        status_html,
-        render_findings_md(pre_rules, pre_summary),
-        render_findings_md(post_rules, post_summary),
-        "\n".join(details_parts),
+        _notification_html(action, reason),
+        render_findings_html(pre_rules, pre_summary),
+        render_findings_html(post_rules, post_summary),
+        _details_html(parse_ok, changed_ratio, resolved, unresolved, explanation, risk_notes),
     )
+
+
+def error_html(label: str, exc: Exception) -> str:
+    return _notification_html("rejected", f"<b>{label}:</b> {exc}")

iac_secfix_space/ui.py

@@ -10,9 +10,166 @@ import gradio as gr
 
 from .demo_data import load_demos
 from .hf_inference import LORA_MODEL_ID, build_hf_runtime_config, has_hf_config
-from .rendering import render_result
+from .rendering import error_html, render_findings_html, render_result
 
-_N = 6  # number of output components
+_N = 6
+
+CARBON_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
+
+/* ── Global reset ──────────────────────────────────────────────────── */
+.gradio-container, .gradio-container * {
+    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif !important;
+    border-radius: 0 !important;
+    box-sizing: border-box;
+}
+.gradio-container {
+    background: #f4f4f4 !important;
+    padding: 0 !important;
+    max-width: 100% !important;
+}
+body { background: #f4f4f4 !important; }
+
+/* ── Code / mono ───────────────────────────────────────────────────── */
+.cm-content, .cm-line, .cm-scroller {
+    font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace !important;
+    font-size: 13px !important;
+    line-height: 1.6 !important;
+}
+
+/* ── Primary button ────────────────────────────────────────────────── */
+button.primary {
+    background: #0f62fe !important;
+    color: #ffffff !important;
+    border: none !important;
+    font-size: 14px !important;
+    font-weight: 400 !important;
+    letter-spacing: 0.16px !important;
+    height: 48px !important;
+    transition: background 70ms ease !important;
+}
+button.primary:hover { background: #0050e6 !important; }
+button.primary:active { background: #002d9c !important; }
+
+/* ── Secondary button ──────────────────────────────────────────────── */
+button.secondary {
+    background: transparent !important;
+    color: #0f62fe !important;
+    border: 1px solid #0f62fe !important;
+}
+
+/* ── Tabs ──────────────────────────────────────────────────────────── */
+div[role="tablist"] {
+    border-bottom: 1px solid #e0e0e0 !important;
+    background: #ffffff !important;
+    padding: 0 16px !important;
+    gap: 0 !important;
+}
+button[role="tab"] {
+    font-size: 14px !important;
+    letter-spacing: 0.16px !important;
+    color: #525252 !important;
+    background: transparent !important;
+    border: none !important;
+    border-bottom: 3px solid transparent !important;
+    padding: 12px 16px !important;
+    font-weight: 400 !important;
+    margin-bottom: -1px !important;
+    transition: color 70ms ease !important;
+}
+button[role="tab"]:hover { color: #161616 !important; }
+button[role="tab"][aria-selected="true"] {
+    color: #161616 !important;
+    border-bottom: 3px solid #0f62fe !important;
+    font-weight: 600 !important;
+}
+
+/* ── Labels ────────────────────────────────────────────────────────── */
+label > span:first-child, .label-wrap > span {
+    font-size: 11px !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.32px !important;
+    text-transform: uppercase !important;
+    color: #525252 !important;
+}
+
+/* ── Markdown headings ─────────────────────────────────────────────── */
+.prose h3 {
+    font-size: 11px !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.32px !important;
+    text-transform: uppercase !important;
+    color: #525252 !important;
+    border-bottom: 1px solid #e0e0e0 !important;
+    padding-bottom: 8px !important;
+    margin: 20px 0 10px !important;
+}
+.prose code {
+    font-family: 'IBM Plex Mono', monospace !important;
+    background: #f4f4f4 !important;
+    border: 1px solid #e0e0e0 !important;
+    font-size: 0.85em !important;
+    padding: 1px 5px !important;
+    color: #393939 !important;
+}
+
+/* ── Container blocks ──────────────────────────────────────────────── */
+.block { border-color: #e0e0e0 !important; }
+.tabitem { background: #ffffff !important; padding: 20px !important; }
+"""
+
+_HEADER_HTML = f"""
+<div style="background:#161616;padding:28px 32px 24px;margin:-8px -8px 0;border-bottom:1px solid #393939">
+  <p style="font-size:11px;font-weight:600;letter-spacing:0.32px;text-transform:uppercase;
+            color:#6f6f6f;margin:0 0 6px;font-family:'IBM Plex Sans',sans-serif">
+    AMD Developer Hackathon 2026
+  </p>
+  <h1 style="font-size:2rem;font-weight:300;letter-spacing:-0.64px;color:#ffffff;
+             margin:0 0 8px;font-family:'IBM Plex Sans',sans-serif">
+    IaC-SecFix
+  </h1>
+  <p style="font-size:14px;color:#a8a8a8;margin:0 0 14px;font-family:'IBM Plex Sans',sans-serif">
+    Scanner-verified multi-agent remediation for Terraform and Kubernetes
+  </p>
+  <div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center">
+    <span style="font-size:11px;color:#6f6f6f;font-family:'IBM Plex Mono',monospace;
+                 background:#262626;padding:3px 8px">IngestAgent</span>
+    <span style="color:#525252;font-size:12px">→</span>
+    <span style="font-size:11px;color:#6f6f6f;font-family:'IBM Plex Mono',monospace;
+                 background:#262626;padding:3px 8px">PolicyContextAgent</span>
+    <span style="color:#525252;font-size:12px">→</span>
+    <span style="font-size:11px;color:#6f6f6f;font-family:'IBM Plex Mono',monospace;
+                 background:#262626;padding:3px 8px">PatchAgent</span>
+    <span style="color:#525252;font-size:12px">→</span>
+    <span style="font-size:11px;color:#6f6f6f;font-family:'IBM Plex Mono',monospace;
+                 background:#262626;padding:3px 8px">ValidationAgent</span>
+    <span style="color:#525252;font-size:12px">→</span>
+    <span style="font-size:11px;color:#6f6f6f;font-family:'IBM Plex Mono',monospace;
+                 background:#262626;padding:3px 8px">SafetyAgent</span>
+    <span style="color:#525252;font-size:12px">→</span>
+    <span style="font-size:11px;color:#6f6f6f;font-family:'IBM Plex Mono',monospace;
+                 background:#262626;padding:3px 8px">HumanApprovalGate</span>
+  </div>
+</div>
+"""
+
+_FOOTER_HTML = """
+<div style="background:#f4f4f4;border-top:1px solid #e0e0e0;padding:16px 32px;
+            display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px">
+  <div style="display:flex;gap:24px;flex-wrap:wrap">
+    <span style="font-size:12px;color:#525252;font-family:'IBM Plex Sans',sans-serif">
+      <b style="color:#161616">IaC-SecFix</b> &nbsp;·&nbsp; AMD Developer Hackathon 2026
+    </span>
+  </div>
+  <div style="display:flex;gap:24px;flex-wrap:wrap">
+    <span style="font-size:11px;color:#6f6f6f;font-family:'IBM Plex Sans',sans-serif">
+      B3 benchmark &nbsp;·&nbsp; 50 samples &nbsp;·&nbsp;
+      <b style="color:#24a148">32.6%</b> targeted resolution &nbsp;·&nbsp;
+      <b style="color:#24a148">0%</b> unsafe actions
+    </span>
+  </div>
+</div>
+"""
 
 
 def _empty() -> tuple:
@@ -50,18 +207,14 @@ def _live_outputs(file_content: str, iac_type: str) -> tuple:
         }
         return render_result(data)
     except Exception as exc:
-        return (
-            file_content, "",
-            f"<div style='color:red;padding:8px'><b>Error:</b> {exc}</div>",
-            "", "", "",
-        )
+        return (file_content, "", error_html("Error", exc), "", "", "")
 
 
 def _lora_outputs(file_content: str, iac_type: str) -> tuple:
     if not file_content.strip():
         return _empty()
     try:
-        from iac_secfix_agents import IngestRequest, OrchestratorSettings, RemediationOrchestrator
+        from iac_secfix_agents import IngestRequest, RemediationOrchestrator
 
         config = build_hf_runtime_config()
         decision = RemediationOrchestrator(config=config).remediate(
@@ -83,118 +236,131 @@ def _lora_outputs(file_content: str, iac_type: str) -> tuple:
         }
         return render_result(data)
     except Exception as exc:
-        return (
-            file_content, "",
-            f"<div style='color:red;padding:8px'><b>LoRA inference error:</b> {exc}</div>",
-            "", "", "",
-        )
+        return (file_content, "", error_html("LoRA inference error", exc), "", "", "")
 
 
-def _file_panels(label_orig: str, label_fixed: str, interactive_orig: bool = False) -> tuple:
-    orig = gr.Code(label=label_orig, language="yaml", interactive=interactive_orig, lines=22)
-    fixed = gr.Code(label=label_fixed, language="yaml", interactive=False, lines=22)
+def _code_pair(label_orig: str, label_fixed: str, interactive_orig: bool = False) -> tuple:
+    orig = gr.Code(label=label_orig, language="yaml", interactive=interactive_orig, lines=20)
+    fixed = gr.Code(label=label_fixed, language="yaml", interactive=False, lines=20)
     return orig, fixed
 
 
-def _result_panels() -> tuple:
+def _result_section() -> tuple:
     status = gr.HTML()
     with gr.Row():
-        before = gr.Markdown(label="Findings Before")
-        after = gr.Markdown(label="Findings After")
-    details = gr.Markdown()
+        before = gr.HTML(label="Findings Before")
+        after = gr.HTML(label="Findings After")
+    details = gr.HTML()
     return status, before, after, details
 
 
 def build_demo() -> gr.Blocks:
     demos = load_demos()
     choices = list(demos.keys())
-    has_live_vllm = bool(os.getenv("IAC_SECFIX_BASE_URL"))
     has_lora = has_hf_config()
+    has_live_vllm = bool(os.getenv("IAC_SECFIX_BASE_URL"))
 
-    with gr.Blocks(title="IaC-SecFix", theme=gr.themes.Soft()) as app:
-        gr.Markdown(
-            f"""
-# IaC-SecFix
-**Scanner-verified multi-agent remediation for Terraform and Kubernetes**
-
-Multi-agent loop: **IngestAgent** → **PolicyContextAgent** → **PatchAgent** →
-**ValidationAgent** → **SafetyAgent** → **HumanApprovalGate**
+    with gr.Blocks(title="IaC-SecFix", css=CARBON_CSS, theme=gr.themes.Base()) as app:
 
-Fine-tuned LoRA: [`{LORA_MODEL_ID}`](https://huggingface.co/{LORA_MODEL_ID})
-| Base model: `Qwen/Qwen3.5-9B` | r=8, alpha=16
-| Built for the **AMD Developer Hackathon 2026**
-"""
-        )
+        gr.HTML(_HEADER_HTML)
 
         with gr.Tabs():
-            # ── Tab 1: Demo Playback ──────────────────────────────────────
+
+            # ── Demo Playback ─────────────────────────────────────────────
             with gr.Tab("Demo Playback"):
-                gr.Markdown(
-                    "Precomputed results from the benchmark run — no GPU required. "
-                    "Select an example to see the full agent trace."
+                gr.HTML(
+                    "<p style='font-size:13px;color:#525252;padding:0 0 16px;"
+                    "font-family:\"IBM Plex Sans\",sans-serif'>"
+                    "Precomputed benchmark results — no GPU required. "
+                    "Select an example to load the full agent trace.</p>"
                 )
                 with gr.Row():
-                    demo_dd = gr.Dropdown(choices=choices, value=choices[0] if choices else None,
-                                          label="Example", scale=4)
-                    load_btn = gr.Button("Load", variant="primary", scale=1)
+                    demo_dd = gr.Dropdown(
+                        choices=choices,
+                        value=choices[0] if choices else None,
+                        label="Example",
+                        scale=5,
+                    )
+                    load_btn = gr.Button("Load Example", variant="primary", scale=1)
 
-                demo_status, demo_before, demo_after, demo_details = _result_panels()
+                demo_status, demo_before, demo_after, demo_details = _result_section()
                 with gr.Row():
-                    demo_orig, demo_fixed = _file_panels("Original File", "Fixed File")
+                    demo_orig, demo_fixed = _code_pair("Original File", "Fixed File")
 
-                demo_outs = [demo_orig, demo_fixed, demo_status, demo_before, demo_after, demo_details]
-                load_btn.click(fn=lambda l: _demo_outputs(l, demos), inputs=[demo_dd], outputs=demo_outs)
-                app.load(fn=lambda: _demo_outputs(choices[0] if choices else None, demos), outputs=demo_outs)
+                outs = [demo_orig, demo_fixed, demo_status, demo_before, demo_after, demo_details]
+                load_btn.click(fn=lambda l: _demo_outputs(l, demos), inputs=[demo_dd], outputs=outs)
+                app.load(fn=lambda: _demo_outputs(choices[0] if choices else None, demos), outputs=outs)
 
-            # ── Tab 2: Fine-tuned LoRA ────────────────────────────────────
+            # ── Fine-tuned LoRA ───────────────────────────────────────────
             if has_lora:
                 with gr.Tab("Fine-tuned LoRA"):
-                    gr.Markdown(
-                        f"Runs the full multi-agent loop using the fine-tuned LoRA adapter "
-                        f"[`{LORA_MODEL_ID}`](https://huggingface.co/{LORA_MODEL_ID}).\n\n"
-                        "**Space secrets required:** `HF_TOKEN` (serverless) "
-                        "or `IAC_SECFIX_HF_ENDPOINT` + `IAC_SECFIX_HF_TOKEN` (dedicated endpoint)."
+                    gr.HTML(
+                        f"<p style='font-size:13px;color:#525252;padding:0 0 16px;"
+                        f"font-family:\"IBM Plex Sans\",sans-serif'>"
+                        f"Full agent loop via fine-tuned LoRA adapter "
+                        f"<a href='https://huggingface.co/{LORA_MODEL_ID}' "
+                        f"style='color:#0f62fe;text-decoration:none'>"
+                        f"<code style='font-family:\"IBM Plex Mono\",monospace'>"
+                        f"{LORA_MODEL_ID}</code></a>. "
+                        f"Base: <code style='font-family:\"IBM Plex Mono\",monospace'>"
+                        f"Qwen/Qwen3.5-9B</code> · r=8, alpha=16</p>"
                     )
                     with gr.Row():
-                        lora_code = gr.Code(label="Paste IaC file here", language="yaml",
-                                            interactive=True, lines=22)
-                        lora_type = gr.Dropdown(choices=["terraform", "kubernetes"],
-                                                value="terraform", label="IaC Type", scale=0)
+                        lora_code = gr.Code(
+                            label="IaC File", language="yaml", interactive=True, lines=20
+                        )
+                        lora_type = gr.Dropdown(
+                            choices=["terraform", "kubernetes"],
+                            value="terraform",
+                            label="IaC Type",
+                            scale=0,
+                        )
                     lora_btn = gr.Button("Run with Fine-tuned LoRA", variant="primary")
-                    lora_status, lora_before, lora_after, lora_details = _result_panels()
+                    lora_status, lora_before, lora_after, lora_details = _result_section()
                     with gr.Row():
-                        lora_orig, lora_fixed = _file_panels("Input File", "Fixed File")
+                        lora_orig, lora_fixed = _code_pair("Input", "Fixed")
                     lora_btn.click(
                         fn=_lora_outputs,
                         inputs=[lora_code, lora_type],
-                        outputs=[lora_orig, lora_fixed, lora_status, lora_before, lora_after, lora_details],
+                        outputs=[lora_orig, lora_fixed, lora_status,
+                                 lora_before, lora_after, lora_details],
                     )
 
-            # ── Tab 3: Live vLLM endpoint (optional) ─────────────────────
+            # ── Live vLLM endpoint ────────────────────────────────────────
             if has_live_vllm:
-                with gr.Tab("Live vLLM Endpoint"):
-                    gr.Markdown(
-                        "Calls the OpenAI-compatible vLLM endpoint. "
-                        "Set `IAC_SECFIX_BASE_URL`, `IAC_SECFIX_API_KEY`, and `IAC_SECFIX_MODEL` in Space secrets."
+                with gr.Tab("Live Endpoint"):
+                    gr.HTML(
+                        "<p style='font-size:13px;color:#525252;padding:0 0 16px;"
+                        "font-family:\"IBM Plex Sans\",sans-serif'>"
+                        "OpenAI-compatible vLLM endpoint. "
+                        "Set <code style='font-family:\"IBM Plex Mono\",monospace'>"
+                        "IAC_SECFIX_BASE_URL</code>, "
+                        "<code style='font-family:\"IBM Plex Mono\",monospace'>"
+                        "IAC_SECFIX_API_KEY</code>, and "
+                        "<code style='font-family:\"IBM Plex Mono\",monospace'>"
+                        "IAC_SECFIX_MODEL</code> in Space secrets.</p>"
                     )
                     with gr.Row():
-                        live_code = gr.Code(label="Paste IaC file here", language="yaml",
-                                            interactive=True, lines=22)
-                        live_type = gr.Dropdown(choices=["terraform", "kubernetes"],
-                                                value="terraform", label="IaC Type", scale=0)
+                        live_code = gr.Code(
+                            label="IaC File", language="yaml", interactive=True, lines=20
+                        )
+                        live_type = gr.Dropdown(
+                            choices=["terraform", "kubernetes"],
+                            value="terraform",
+                            label="IaC Type",
+                            scale=0,
+                        )
                     live_btn = gr.Button("Run Agent Loop", variant="primary")
-                    live_status, live_before, live_after, live_details = _result_panels()
+                    live_status, live_before, live_after, live_details = _result_section()
                     with gr.Row():
-                        live_orig, live_fixed = _file_panels("Input File", "Fixed File")
+                        live_orig, live_fixed = _code_pair("Input", "Fixed")
                     live_btn.click(
                         fn=_live_outputs,
                         inputs=[live_code, live_type],
-                        outputs=[live_orig, live_fixed, live_status, live_before, live_after, live_details],
+                        outputs=[live_orig, live_fixed, live_status,
+                                 live_before, live_after, live_details],
                     )
 
-        gr.Markdown(
-            "---\n**IaC-SecFix** | AMD Developer Hackathon 2026 | "
-            "Benchmark B3 (zero-shot+RAG): 50 samples · 32.6% targeted resolution · 0% unsafe actions"
-        )
+        gr.HTML(_FOOTER_HTML)
 
     return app