fix: address 5 review issues in dashboard frontend

1. XSS: replace all innerHTML with textContent/DOM construction
where server data is interpolated (retrieval items, refusal
display, iteration nodes, running-on label)
2. Wire showRetrievalRefusal: orchestrator now emits refused flag
and refusal_threshold in retrieval stage done event; frontend
detects and renders grounded refusal display
3. Provider toggle: now display-only, reflects server config from
meta event instead of pretending to switch providers
4. PII badge: pii_redactions_count threaded through orchestrator
_orchestrator_done -> route handler done event -> frontend
5. Cache HTML: index.html read once at first request, not on
every / hit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

agent_bench/agents/orchestrator.py

@@ -198,6 +198,7 @@ class Orchestrator:
         tools = self.registry.get_definitions()
         all_sources: list[str] = []
         all_source_chunks: list[str] = []
+        total_pii_redactions = 0
         total_cost = 0.0
         total_input_tokens = 0
         total_output_tokens = 0
@@ -260,17 +261,31 @@ class Orchestrator:
 
                 if tc.name == "search_documents":
                     pre_rerank = result.metadata.get("pre_rerank_count", 0)
+                    refused = result.metadata.get("refused", False)
 
                     # --- Retrieval stage: done ---
-                    yield StreamEvent(type="stage", metadata={
-                        "stage": "retrieval", "status": "done", "iteration": iteration,
+                    retrieval_done_meta: dict = {
+                        "stage": "retrieval", "status": "done",
+                        "iteration": iteration,
                         "chunks_pre_rerank": pre_rerank,
-                    })
+                    }
+                    if refused:
+                        retrieval_done_meta["refused"] = True
+                        retrieval_done_meta["refusal_threshold"] = (
+                            result.metadata.get("refusal_threshold", 0)
+                        )
+                        retrieval_done_meta["chunks"] = (
+                            result.metadata.get("chunks", [])
+                        )
+                    yield StreamEvent(
+                        type="stage", metadata=retrieval_done_meta,
+                    )
 
                     # --- Reranking stage (already completed inside tool execution) ---
-                    if pre_rerank > 0:
+                    if pre_rerank > 0 and not refused:
                         yield StreamEvent(type="stage", metadata={
-                            "stage": "reranking", "status": "done", "iteration": iteration,
+                            "stage": "reranking", "status": "done",
+                            "iteration": iteration,
                             "chunks": result.metadata.get("chunks", []),
                         })
 
@@ -280,6 +295,9 @@ class Orchestrator:
                     all_source_chunks.extend(
                         result.metadata["source_chunks"]
                     )
+                total_pii_redactions += result.metadata.get(
+                    "pii_redactions_count", 0,
+                )
 
         # Max iterations hit — force text answer without tools
         # (same pattern as run(): explicit call after loop)
@@ -320,6 +338,7 @@ class Orchestrator:
                 "tokens_out": total_output_tokens,
                 "iterations": iteration if iteration else 1,
                 "source_chunks": all_source_chunks,
+                "pii_redactions_count": total_pii_redactions,
             },
         )
 

agent_bench/serving/routes.py

@@ -21,15 +21,26 @@ from agent_bench.serving.schemas import (
 router = APIRouter()
 
 
+_LANDING_HTML: str | None = None
+
+
+def _get_landing_html() -> str:
+    """Read and cache index.html on first call."""
+    global _LANDING_HTML  # noqa: PLW0603
+    if _LANDING_HTML is None:
+        from pathlib import Path
+
+        html_path = Path(__file__).parent / "static" / "index.html"
+        _LANDING_HTML = html_path.read_text()
+    return _LANDING_HTML
+
+
 @router.get("/")
 async def root() -> Response:
     """Showcase landing page with live RAG dashboard."""
-    from pathlib import Path
-
     from starlette.responses import HTMLResponse
 
-    html_path = Path(__file__).parent / "static" / "index.html"
-    return HTMLResponse(content=html_path.read_text())
+    return HTMLResponse(content=_get_landing_html())
 
 
 @router.post("/ask", response_model=AskResponse)
@@ -283,6 +294,9 @@ async def ask_stream(body: AskRequest, request: Request) -> StreamingResponse:
             "tokens_out": done_meta.get("tokens_out", 0),
             "cost": done_meta.get("estimated_cost_usd", 0.0),
             "iterations": done_meta.get("iterations", 1),
+            "pii_redactions_count": done_meta.get(
+                "pii_redactions_count", 0,
+            ),
         }).to_sse()
 
         # Record metrics and persist session

agent_bench/serving/static/index.html

@@ -246,9 +246,9 @@ code{background:var(--code-bg);padding:2px 6px;border-radius:3px;font-size:0.9em
 
     <!-- Right: Pipeline + Retrieval + Security -->
     <div class="right-panel">
-      <div class="provider-toggle">
-        <button class="active" data-provider="openai" onclick="setProvider('openai')">OpenAI</button>
-        <button data-provider="anthropic" onclick="setProvider('anthropic')">Anthropic</button>
+      <div class="provider-toggle" id="providerToggle">
+        <button class="active" data-provider="openai">OpenAI</button>
+        <button data-provider="anthropic">Anthropic</button>
         <span class="disabled-provider" title="See benchmark report">Mistral-7B</span>
       </div>
 
@@ -369,11 +369,11 @@ const state = {
   maxIterationSeen: 1,
 };
 
-/* ── Provider toggle ─── */
-function setProvider(p) {
-  state.provider = p;
+/* ── Provider toggle (display-only, reflects server config) ─── */
+function showActiveProvider(provider) {
+  const p = (provider || '').toLowerCase();
   document.querySelectorAll('.provider-toggle button').forEach(b => {
-    b.classList.toggle('active', b.dataset.provider === p);
+    b.classList.toggle('active', p.includes(b.dataset.provider));
   });
 }
 
@@ -489,7 +489,13 @@ function updateStage(stage, status, meta) {
     updateInjectionBadge(v);
   }
   if (stage === 'retrieval' && status === 'done') {
-    detail.textContent = meta.chunks_pre_rerank ? `${meta.chunks_pre_rerank} candidates` : 'done';
+    if (meta.refused) {
+      detail.textContent = 'refused (below threshold)';
+      dot.className = 'stage-dot done';
+      showRetrievalRefusal(meta);
+    } else {
+      detail.textContent = meta.chunks_pre_rerank ? `${meta.chunks_pre_rerank} candidates` : 'done';
+    }
   }
   if (stage === 'reranking' && status === 'done') {
     const chunks = meta.chunks || [];
@@ -522,7 +528,20 @@ function addIterationNodes(iteration) {
     row.className = 'stage-row';
     row.dataset.stage = s;
     row.dataset.iteration = iteration;
-    row.innerHTML = `<div class="stage-dot"></div><div class="stage-connector"></div><div class="stage-info"><div class="stage-name">${s === 'llm' ? 'LLM Synthesis' : s.charAt(0).toUpperCase() + s.slice(1)}</div><div class="stage-detail" data-detail="${s}"></div></div>`;
+    const dot = document.createElement('div');
+    dot.className = 'stage-dot';
+    const conn = document.createElement('div');
+    conn.className = 'stage-connector';
+    const info = document.createElement('div');
+    info.className = 'stage-info';
+    const name = document.createElement('div');
+    name.className = 'stage-name';
+    name.textContent = s === 'llm' ? 'LLM Synthesis' : s.charAt(0).toUpperCase() + s.slice(1);
+    const detail = document.createElement('div');
+    detail.className = 'stage-detail';
+    detail.dataset.detail = s;
+    info.append(name, detail);
+    row.append(dot, conn, info);
     stages.insertBefore(row, outputRow);
   });
 }
@@ -585,7 +604,16 @@ function updateRetrievalResults(chunks, meta) {
     const pct = topScore > 0 ? Math.max(20, (c.score / topScore) * 95) : 20;
     const item = document.createElement('div');
     item.className = 'retrieval-item';
-    item.innerHTML = `<div class="bar-bg" style="width:${pct}%"></div><span class="source">${c.source}</span><span class="score">${c.score.toFixed(3)}</span>`;
+    const bar = document.createElement('div');
+    bar.className = 'bar-bg';
+    bar.style.width = pct + '%';
+    const src = document.createElement('span');
+    src.className = 'source';
+    src.textContent = c.source;
+    const sc = document.createElement('span');
+    sc.className = 'score';
+    sc.textContent = c.score.toFixed(3);
+    item.append(bar, src, sc);
     item.addEventListener('click', () => {
       item.classList.toggle('expanded');
     });
@@ -605,12 +633,22 @@ function showRetrievalRefusal(meta) {
   badge.className = 'badge badge-refusal';
   const chunks = meta.chunks || [];
   const top = chunks[0] || {};
-  list.innerHTML = `<div class="retrieval-refusal">
-    <div class="threshold-detail">Top candidate: ${top.source || 'none'} &mdash; ${(top.score||0).toFixed(3)}</div>
-    <div class="threshold-detail">Threshold: ${meta.refusal_threshold || '0.02'}</div>
-    <div>Decision: refuse &mdash; no chunk clears threshold</div>
-    <div style="margin-top:8px;font-size:0.8rem;font-style:italic">This is the mechanism that keeps citation accuracy at 1.00.</div>
-  </div>`;
+  const container = document.createElement('div');
+  container.className = 'retrieval-refusal';
+  const d1 = document.createElement('div');
+  d1.className = 'threshold-detail';
+  d1.textContent = `Top candidate: ${top.source || 'none'} \u2014 ${(top.score||0).toFixed(3)}`;
+  const d2 = document.createElement('div');
+  d2.className = 'threshold-detail';
+  d2.textContent = `Threshold: ${meta.refusal_threshold || '0.02'}`;
+  const d3 = document.createElement('div');
+  d3.textContent = 'Decision: refuse \u2014 no chunk clears threshold';
+  const d4 = document.createElement('div');
+  d4.style.cssText = 'margin-top:8px;font-size:0.8rem;font-style:italic';
+  d4.textContent = 'This is the mechanism that keeps citation accuracy at 1.00.';
+  container.append(d1, d2, d3, d4);
+  list.innerHTML = '';
+  list.appendChild(container);
 }
 
 function showRetrievalBlocked() {
@@ -634,7 +672,6 @@ async function streamAnswer(question) {
   let assistantEl = null;
   let answerText = '';
   let wasBlocked = false;
-  let piiCount = 0;
 
   try {
     const resp = await fetch('/ask/stream', {
@@ -677,8 +714,13 @@ async function streamAnswer(question) {
         switch (event.type) {
           case 'meta': {
             const m = event.metadata || {};
-            document.getElementById('runningOn').innerHTML =
-              `Running on: <strong>${m.provider || '?'}</strong> ${m.model || ''}`;
+            const ro = document.getElementById('runningOn');
+            ro.textContent = '';
+            ro.append('Running on: ');
+            const strong = document.createElement('strong');
+            strong.textContent = m.provider || '?';
+            ro.append(strong, ' ' + (m.model || ''));
+            showActiveProvider(m.provider);
             break;
           }
           case 'stage': {
@@ -703,8 +745,7 @@ async function streamAnswer(question) {
           case 'done': {
             const m = event.metadata || {};
             showStats(m);
-            // Update PII badge from metadata if available
-            updatePiiBadge(piiCount);
+            updatePiiBadge(m.pii_redactions_count || 0);
             break;
           }
         }